/* ======================
   BASE
   ====================== */

body{
 margin:0;
 font-family:Inter,system-ui,sans-serif;
 background:
 radial-gradient(circle at 10% 20%, rgba(79,70,229,.25), transparent 40%),
 radial-gradient(circle at 90% 80%, rgba(34,211,238,.2), transparent 40%),
 linear-gradient(180deg,#020617,#020617 60%);

 color:#e2e8f0;
 display:flex;
}

/* ======================
   SIDEBAR
   ====================== */

.sidebar{
 width:230px;
 background:rgba(15,23,42,0.6);
 backdrop-filter:blur(14px);
 height:100vh;
 padding:20px;
 border-right:1px solid rgba(255,255,255,0.05);
}

.menu-item{
 padding:12px;
 border-radius:14px;
 margin-bottom:10px;
 cursor:pointer;
 opacity:.7;
 transition:all .2s ease;
}

.menu-item:hover{
 background:#0f172a;
 opacity:1;
 transform:translateX(6px);
}

.menu-item.active{
 background:linear-gradient(90deg,#1f2937,#111827);
 opacity:1;
 box-shadow:0 0 20px rgba(79,70,229,0.25);
}

/* ======================
   LAYOUT
   ====================== */

.main{
 flex:1;
 display:flex;
 justify-content:center;
 padding:40px;
}

.card{
 width:650px;
 background:rgba(255,255,255,0.04);
 backdrop-filter:blur(16px);
 border:1px solid rgba(255,255,255,0.06);
 border-radius:22px;
 padding:30px;
 box-shadow:
 0 10px 40px rgba(0,0,0,0.5),
 inset 0 1px 0 rgba(255,255,255,0.05);
 transition:all .3s ease;
}

/* subtle glow on active screen */
.screen.active{
 display:block;
 animation:screenIn .28s ease;
}

.screen{
 display:none;
}

@keyframes screenIn{
 from{
  opacity:0;
  transform:translateY(14px);
 }
 to{
  opacity:1;
  transform:translateY(0);
 }
}

/* ======================
   LOGO
   ====================== */

h1{
 font-size:44px;
 font-weight:800;
 text-align:center;
 margin-bottom:25px;
 background:linear-gradient(90deg,#4f46e5,#22d3ee);
 -webkit-background-clip:text;
 -webkit-text-fill-color:transparent;
 text-shadow:0 0 35px rgba(79,70,229,0.45);
}

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

input,textarea,select{
 width:100%;
 padding:13px;
 border-radius:14px;
 margin-top:10px;
 background:rgba(255,255,255,0.06);
 border:1px solid rgba(255,255,255,0.12);
 color:#e2e8f0;
 backdrop-filter:blur(8px);
 transition:.25s ease;
}

input:hover,textarea:hover,select:hover{
 border-color:rgba(255,255,255,0.2);
}

input:focus,textarea:focus,select:focus{
 outline:none;
 border-color:#22d3ee;
 box-shadow:0 0 0 3px rgba(34,211,238,.25);
}

textarea{
 caret-color:#22d3ee;
}

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

button{
 margin-top:15px;
 padding:13px 20px;
 border:none;
 border-radius:14px;
 background:linear-gradient(90deg,#4f46e5,#22d3ee);
 color:white;
 font-weight:600;
 cursor:pointer;
 transition:all .2s ease;
}

button:hover{
 transform:translateY(-3px);
 box-shadow:0 8px 25px rgba(34,211,238,0.35);
}

button:active{
 transform:scale(.96);
}

/* ======================
   BLOCKS
   ====================== */

.question,
.result,
.hint{
 margin-top:15px;
 padding:18px;
 background:rgba(2,6,23,0.8);
 border-radius:16px;
 border:1px solid rgba(255,255,255,0.06);
 backdrop-filter:blur(6px);
}

.result{
 border-left:none;
}

.progress{
 margin-bottom:15px;
 height:8px;
 background:#020617;
 border-radius:10px;
 overflow:hidden;
}

/* hide empty */

.progress:empty,
.result:empty,
.question:empty{
 display:none;
}

/* ======================
   CHAT
   ====================== */

#chatResult{
 display:flex;
 flex-direction:column;
 gap:16px;
 margin-bottom:18px;
 height:420px;
 min-height:300px;
 overflow-y:auto;
 padding-right:6px;
}

/* custom scroll */
#chatResult::-webkit-scrollbar{
 width:6px;
}

#chatResult::-webkit-scrollbar-thumb{
 background:#1f2937;
 border-radius:6px;
}

#chatResult .msg{
 max-width:75%;
 padding:15px 18px;
 border-radius:16px;
 line-height:1.6;
 font-size:15px;
 white-space:pre-wrap;
 animation:fadeIn .25s ease;
}

#chatResult .user{
 align-self:flex-end;
 background:linear-gradient(135deg,#2563eb,#1d4ed8);
 color:white;
 border-bottom-right-radius:6px;
 box-shadow:0 4px 15px rgba(37,99,235,0.4);
}

#chatResult .bot{
 align-self:flex-start;
 background:#111827;
 border:1px solid #1f2937;
 color:#e5e7eb;
 border-bottom-left-radius:6px;
}

.chat-input{
 display:flex;
 gap:10px;
 align-items:center;
 margin-top:12px;
}

.chat-input input{
 flex:1;
 margin-top:0;
}

.chat-input button{
 margin-top:0;
 white-space:nowrap;
}

/* ======================
   ANIMATION
   ====================== */

@keyframes fadeIn{
 from{
  opacity:0;
  transform:translateY(14px) scale(.98);
 }
 to{
  opacity:1;
  transform:translateY(0) scale(1);
 }
}

/* ======================
   LEVEL 2 MICRO ANIMATION
   ====================== */

/* мягкое появление элементов внутри активного экрана */

.screen.active > *{
 opacity:0;
 transform:translateY(8px);
 animation:fadeBlock .35s ease forwards;
}

.screen.active > *:nth-child(1){ animation-delay:.05s }
.screen.active > *:nth-child(2){ animation-delay:.1s }
.screen.active > *:nth-child(3){ animation-delay:.15s }
.screen.active > *:nth-child(4){ animation-delay:.2s }
.screen.active > *:nth-child(5){ animation-delay:.25s }
.screen.active > *:nth-child(6){ animation-delay:.3s }
.screen.active > *:nth-child(7){ animation-delay:.35s }

@keyframes fadeBlock{
 from{
  opacity:0;
  transform:translateY(8px);
 }
 to{
  opacity:1;
  transform:translateY(0);
 }
}

/* лёгкая подсветка активной карточки */

.screen.active{
 box-shadow:
 0 15px 50px rgba(0,0,0,0.6),
 0 0 40px rgba(79,70,229,0.15);
 transition:box-shadow .4s ease;
}

/* более живой фокус инпутов */

input:focus,textarea:focus,select:focus{
 box-shadow:
 0 0 0 3px rgba(34,211,238,.25),
 0 0 15px rgba(34,211,238,.2);
}

/* ======================
   HERO SECTION
   ====================== */

.hero{
 margin-bottom:35px;
 padding:28px;
 border-radius:22px;
 background:rgba(255,255,255,0.04);
 border:1px solid rgba(255,255,255,0.08);
 backdrop-filter:blur(12px);
 box-shadow:
 0 20px 60px rgba(0,0,0,0.5),
 0 0 40px rgba(79,70,229,0.1);
 animation:screenIn .4s ease;
}

.hero-badge{
 display:inline-block;
 font-size:12px;
 letter-spacing:.5px;
 padding:6px 12px;
 border-radius:20px;
 background:rgba(34,211,238,.15);
 color:#22d3ee;
 margin-bottom:15px;
 font-weight:600;
}

.hero h2{
 margin:0 0 14px 0;
 font-size:24px;
 font-weight:700;
 line-height:1.3;
}

.hero-sub{
 margin-bottom:22px;
 opacity:.85;
 line-height:1.6;
 font-size:15px;
}

.hero-grid{
 display:grid;
 grid-template-columns:repeat(3,1fr);
 gap:18px;
}

.hero-card{
 padding:18px;
 border-radius:18px;
 background:rgba(2,6,23,0.8);
 border:1px solid rgba(255,255,255,0.06);
 transition:all .25s ease;
}

.hero-card:hover{
 transform:translateY(-6px);
 box-shadow:0 10px 30px rgba(79,70,229,.25);
 border-color:rgba(79,70,229,.4);
}

.hero-icon{
 font-size:22px;
 margin-bottom:8px;
}

.hero-title{
 font-weight:600;
 margin-bottom:6px;
}

.hero-text{
 font-size:14px;
 opacity:.75;
 line-height:1.5;
}

/* адаптивность */

@media (max-width:900px){
 .hero-grid{
  grid-template-columns:1fr;
 }
}

/* ======================
   HOME SCREEN
   ====================== */

.home-hero{
 text-align:center;
 margin-bottom:40px;
}

.home-badge{
 display:inline-block;
 padding:6px 14px;
 border-radius:20px;
 font-size:12px;
 font-weight:600;
 background:rgba(34,211,238,.15);
 color:#22d3ee;
 margin-bottom:16px;
}

.home-hero h2{
 font-size:26px;
 margin-bottom:14px;
 line-height:1.3;
}

.home-hero p{
 opacity:.8;
 line-height:1.6;
 max-width:520px;
 margin:0 auto;
}

.home-grid{
 display:grid;
 grid-template-columns:repeat(2,1fr);
 gap:24px;
}

.home-card{
 padding:28px;
 border-radius:22px;
 background:rgba(255,255,255,0.05);
 border:1px solid rgba(255,255,255,0.08);
 cursor:pointer;
 transition:all .3s ease;
 text-align:center;
}

.home-card:hover{
 transform:translateY(-10px);
 box-shadow:0 20px 50px rgba(79,70,229,.35);
 border-color:rgba(79,70,229,.6);
}

.home-icon{
 font-size:30px;
 margin-bottom:12px;
}

.home-title{
 font-weight:600;
 margin-bottom:8px;
}

.home-text{
 font-size:14px;
 opacity:.75;
}

/* ======================
   TELEGRAM WIDGET
   ====================== */

#tgWidget{
 position:fixed;
 right:28px;
 bottom:28px;
 width:58px;
 height:58px;
 border-radius:50%;
 background:#229ED9;
 display:flex;
 align-items:center;
 justify-content:center;
 box-shadow:
 0 10px 30px rgba(0,0,0,.5),
 0 0 25px rgba(34,211,238,.35);
 transition:all .25s ease;
 z-index:999;
}

#tgWidget:hover{
 transform:translateY(-4px) scale(1.05);
 box-shadow:
 0 15px 40px rgba(0,0,0,.6),
 0 0 30px rgba(34,211,238,.6);
}

#tgWidget svg{
 width:26px;
 height:26px;
}

/* ======================
   SCHOOL BENEFITS
   ====================== */

.school-benefits{
 margin-top:25px;
 display:grid;
 gap:16px;
}

.benefit{
 padding:18px;
 border-radius:16px;
 background:rgba(2,6,23,0.8);
 border:1px solid rgba(255,255,255,0.06);
}

.benefit-title{
 font-weight:600;
 margin-bottom:6px;
}

.benefit-text{
 font-size:14px;
 opacity:.75;
 line-height:1.5;
}


/* ======================
   SCHOOL RESULTS
   ====================== */

.school-results{
 margin-top:28px;
 padding:20px;
 border-radius:16px;
 background:rgba(2,6,23,0.8);
 border:1px solid rgba(255,255,255,0.06);
}

.school-results-title{
 font-weight:600;
 margin-bottom:12px;
}

.school-results-list div{
 margin:6px 0;
 font-size:14px;
 opacity:.85;
}

/* ======================
   PILOT INFO
   ====================== */

.pilot-info{
 margin-top:22px;
 padding:14px 16px;
 border-radius:14px;
 background:rgba(2,6,23,0.7);
 border:1px solid rgba(255,255,255,0.06);
 font-size:14px;
 line-height:1.5;
 opacity:.9;
}