/* ===== BODY ===== */

body{

background: #000000;

color:#e6e6e6;

font-family:Arial, Helvetica, sans-serif;

padding:24px;

}

.hidden{
display:none !important;
}

.auth-screen{
min-height:calc(100vh - 80px);
display:flex;
align-items:center;
justify-content:center;
}

.auth-card{
width:100%;
max-width:420px;
background:#1f2636;
border:1px solid rgba(120,140,255,0.25);
border-radius:12px;
padding:30px;
box-shadow:
0 20px 40px rgba(0,0,0,0.7),
0 0 0 1px rgba(255,255,255,0.04) inset,
0 0 25px rgba(80,110,255,0.15);
}

.auth-card h1{
margin-bottom:20px;
}

.brand-logo{
display:flex;
align-items:center;
min-width:0;
}

.brand-logo img{
display:block;
width:220px;
max-width:100%;
height:auto;
}

.brand-logo-auth{
justify-content:center;
margin-bottom:20px;
}

.brand-logo-auth img{
width:240px;
}

.auth-card input{
margin-bottom:16px;
}

#login-error{
display:none;
height:auto;
min-height:0;
margin-top:16px;
padding:12px;
white-space:pre-wrap;
}

#login-error:not(:empty){
display:block;
}

.topbar{
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
margin-bottom:20px;
}

.topbar h1{
margin:0;
text-align:left;
}

.userbar{
display:flex;
align-items:center;
gap:16px;
color:#9ca3af;
}

.userbar button{
height:38px;
padding:0 18px;
}

.workspace-layout{
display:grid;
grid-template-columns:240px minmax(0,1fr);
gap:22px;
align-items:start;
}

.sidebar{
position:sticky;
top:24px;
background:#1f2636;
border:1px solid rgba(120,140,255,0.25);
border-radius:12px;
padding:14px;
box-shadow:
0 20px 40px rgba(0,0,0,0.7),
0 0 0 1px rgba(255,255,255,0.04) inset,
0 0 25px rgba(80,110,255,0.15);
}

.nav-button{
width:100%;
height:42px;
justify-content:flex-start;
padding:0 16px;
margin-bottom:8px;
background:#2b3038;
box-shadow:none;
}

.nav-button:hover{
box-shadow:0 0 12px rgba(77,99,255,0.35);
}

.nav-button.active{
background:linear-gradient(180deg,#4d63ff 0%,#3246d3 100%);
}

.workspace-main{
min-width:0;
}

.workspace-section{
display:none;
}

.workspace-section.active{
display:block;
}

.users-table{
width:100%;
border-collapse:collapse;
font-size:13px;
margin-top:20px;
}

.users-table th,
.users-table td{
padding:10px;
border-bottom:1px solid #2a2f36;
text-align:left;
}

.users-table th{
color:#9ca3af;
}

.users-table button{
height:34px;
padding:0 14px;
font-size:13px;
}

.table-actions{
display:flex;
gap:8px;
align-items:center;
flex-wrap:wrap;
}

.table-password-input{
width:160px;
height:34px;
font-size:13px;
}

.plan-table input,
.plan-table select{
height:34px;
font-size:13px;
}

.plan-table small{
display:block;
margin-top:4px;
color:#9ca3af;
line-height:1.35;
}

.structure-tree{
min-height:420px;
max-height:680px;
overflow:auto;
white-space:pre;
color:#a7f3a6;
}

.plan-log{
min-height:22px;
margin:8px 0 0;
color:#9ca3af;
font-size:14px;
}

.plan-checkbox{
display:flex;
align-items:center;
gap:8px;
margin:0;
color:#e6e6e6;
}

.plan-checkbox input{
width:auto;
height:auto;
margin:0;
}

.plan-parent-select{
min-width:180px;
}

.danger-button{
background:#7f1d1d;
box-shadow:none;
}

.danger-button:hover{
box-shadow:0 0 12px rgba(239,68,68,0.45);
}

.site-preview-panel{
margin-top:24px;
background:#111722;
border:1px solid #2a3446;
border-radius:10px;
padding:16px;
}

.site-preview-header{
display:flex;
flex-direction:column;
align-items:stretch;
justify-content:flex-start;
gap:18px;
margin-bottom:14px;
}

.site-preview-header h3{
margin:0 0 8px;
}

.site-preview-header p{
margin:0;
color:#9ca3af;
font-size:13px;
word-break:break-all;
}

.site-preview-actions{
display:flex;
gap:10px;
flex-wrap:wrap;
justify-content:center;
width:100%;
}

.site-preview-actions button{
height:48px;
padding:0 30px;
font-size:15px;
}

#site-preview-frame{
width:100%;
height:720px;
border:1px solid #334155;
border-radius:8px;
background:#0b0d10;
color-scheme:dark;
}


/* ===== TITLE ===== */

h1{
text-align:center;
margin-bottom:40px;
font-weight:600;
}


/* ===== PANELS ===== */

.panel{

background:#1f2636;

border:1px solid rgba(120,140,255,0.25);

border-radius:12px;

padding:30px;

margin-bottom:24px;

box-shadow:
0 20px 40px rgba(0,0,0,0.7),
0 0 0 1px rgba(255,255,255,0.04) inset,
0 0 25px rgba(80,110,255,0.15);

}


/* ===== GRID FORM ===== */

.grid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:25px;

margin-bottom:30px;
}


/* ===== LABELS ===== */

label{

display:block;

margin-bottom:6px;

font-size:13px;

color:#9ca3af;
}


/* ===== INPUTS ===== */

input,
select{

width:100%;

height:42px;

padding:0 12px;

background:#2b3038;

border:1px solid #3a3f46;

border-radius:6px;

color:#e6e6e6;

font-size:14px;

box-sizing:border-box;

transition:border .15s;
}

input:focus,
select:focus{

outline:none;

border:1px solid #3b82f6;
}


/* ===== FILE INPUT ===== */

input[type="file"]{

padding:8px;

height:auto;
}


/* ===== BUTTON CONTAINER ===== */

.buttons{

display:flex;

justify-content:center;

gap:30px;

margin-top:20px;

margin-bottom:10px;
}


/* ===== BUTTON STYLE ===== */

button{

background:linear-gradient(
180deg,
#4d63ff 0%,
#3246d3 100%
);

color:white;

border:none;

border-radius:7px;

height:48px;

padding:0 30px;

font-size:15px;

font-weight:600;

display:flex;

align-items:center;

justify-content:center;

cursor:pointer;

box-shadow:
0 10px 20px rgba(0,0,0,0.6);

transition:.15s;
}


/* ===== BUTTON HOVER ===== */

button:hover{

transform:translateY(-0px);

box-shadow:
0 14px 28px rgba(0,0,0,0.8),
0 0 12px rgba(77,99,255,0.6);

}


/* ===== BUTTON PRESS ===== */

button:active{

transform:translateY(2px);


}


/* ===== LOG WINDOW ===== */

pre{

background:#0b0d10;

border:1px solid #2a2f36;

border-radius:6px;

padding:20px;

margin-top:25px;

height:220px;

overflow:auto;

font-family:monospace;

font-size:13px;

color:#9ee79e;

box-shadow:inset 0 0 20px rgba(0,0,0,0.8);
}


/* ===== DOWNLOAD BUTTON ===== */

.download{

display:flex;

justify-content:center;

margin-top:30px;
}


/* ===== FOOTER ===== */

footer{

margin-top:60px;

opacity:0.6;

text-align:center;

font-size:13px;
}
.serp-results{

margin-top:30px;

background:#0b0d10;

border:1px solid #2a2f36;

border-radius:6px;

padding:20px;

max-height:300px;

overflow:auto;

}

.serp-results h3{

margin-top:0;
margin-bottom:15px;

font-size:16px;

color:#9ca3af;

}

.serp-item{

padding:8px 0;

border-bottom:1px solid #1f232a;

font-size:14px;

}

.serp-item:last-child{

border-bottom:none;

}

.serp-title{

color:#60a5fa;

}

.serp-url{

color:#9ca3af;

font-size:12px;

}
.serp-table{

width:100%;

border-collapse:collapse;

font-size:13px;

}

.serp-table th{

text-align:left;

padding:8px;

border-bottom:1px solid #2a2f36;

color:#9ca3af;

}

.serp-table td{

padding:8px;

border-bottom:1px solid #1f232a;

}

.serp-table tr:hover{

background:#1f232a;

}
.type-review{color:#60a5fa;}
.type-forum{color:#fbbf24;}
.type-video{color:#ef4444;}
.type-social{color:#34d399;}

.structure {
  color: #e6e6e6;
  font-family: monospace;
  font-size: 14px;
}

.excel-download {
  display: flex;
  justify-content: center;
  margin-top: 25px;
  margin-bottom: 30px;
}

.excel-download .btn-primary {
  min-width: 220px;
}

.next-stage-action {
  display: flex;
  justify-content: center;
  margin: 34px 0 8px;
}

.next-stage-action .btn-primary {
  min-width: 260px;
  cursor: pointer;
  border: 0;
}

.magic-settings-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 22px 0 30px;
}

.magic-settings-action .btn-primary {
  min-width: 260px;
  cursor: pointer;
  border: 0;
}

.magic-settings-action small {
  color: #aab3c2;
  font-size: 14px;
  text-align: center;
}

.btn-primary{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:14px 36px;

  background:linear-gradient(180deg,#5d6cff,#3c49d8);

  border-radius:7px;

  color:#fff;
  font-weight:700;
  font-size:16px;

  text-decoration:none;

  box-shadow:
  0 12px 25px rgba(0,0,0,0.7),
  0 0 25px rgba(90,110,255,0.25);

  transition:.15s;
}

/* ===== кнопка Скачать результаты (Excel) ===== */

.btn-primary:hover{
  transform:translateY(-0px);
  box-shadow:
  0 18px 35px rgba(0,0,0,0.8),
  0 0 30px rgba(90,110,255,0.35);
}

.btn-primary:active{
  transform:translateY(3px);
}

@media (max-width: 980px){
  body{
    padding:16px;
  }

  .workspace-layout{
    grid-template-columns:1fr;
  }

  .sidebar{
    position:static;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
  }

  .nav-button{
    margin-bottom:0;
  }

  .grid{
    grid-template-columns:1fr;
  }
}