:root{
  --bg:#071325;--bg2:#0b1d38;--panel:#0d2450;--panel2:#0b1a37;--panel3:#0e2147;
  --text:#f5fbff;--muted:#a7bddf;--cyan:#18d4ff;--orange:#ff9800;--gold:#ffd45b;
  --green:#24df7d;--red:#ff4b70;--line:#2a5b9a;--shadow:0 24px 60px rgba(0,0,0,.35);
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;background:#020817;color:var(--text);overflow:hidden}
body{min-height:100dvh}
button,input{font:inherit}
button{cursor:pointer}
a{color:inherit}
.app-shell{
  height:100dvh;max-width:1536px;margin:auto;display:grid;grid-template-rows:58px 1fr 34px;
  background:
    radial-gradient(circle at 14% 0%,rgba(34,82,151,.55) 0,transparent 34%),
    radial-gradient(circle at 92% 8%,rgba(89,28,138,.46) 0,transparent 28%),
    linear-gradient(90deg,#081327 0%,#06142d 45%,#03102b 100%);
  overflow:hidden;
}
.topbar{
  display:flex;align-items:center;justify-content:space-between;padding:8px clamp(12px,3vw,34px);
  border-bottom:1px solid #183867;background:#081734d9;backdrop-filter:blur(12px);z-index:5;
}
.brand{text-decoration:none;font-size:clamp(19px,2.3vw,30px);font-weight:1000;letter-spacing:-1.4px;text-shadow:0 3px 18px #000}
.brand .virus{color:#fff}.brand .chat{color:var(--orange)}
.lang-switch{display:flex;gap:5px}
.lang{border:1px solid #315b98;border-radius:10px;background:#0b2147;color:#fff;padding:6px 9px;font-size:18px;line-height:1}
.lang.active{outline:2px solid var(--cyan);background:#163770}
.card{
  background:linear-gradient(180deg,rgba(13,36,80,.94),rgba(8,24,56,.95));
  border:1px solid rgba(64,111,178,.72); border-radius:26px; box-shadow:var(--shadow);
}
.mini{border-radius:18px}
.screen{display:none;min-height:0;padding:18px 18px 14px 18px;overflow:auto}
.screen-home,.screen-result{overflow-y:auto}
.screen.active{display:grid}
.screen-home{grid-template-rows:auto 1fr;gap:18px;align-content:start}
.home-top{display:grid;grid-template-columns:1.08fr .92fr;gap:18px}
.home-copy{padding:28px 28px 24px 28px;display:flex;flex-direction:column;justify-content:center;min-width:0}
.eyebrow{font-size:clamp(11px,1vw,14px);font-weight:900;color:var(--cyan);letter-spacing:1.4px}
h1{font-size:clamp(40px,5vw,72px);line-height:.94;letter-spacing:-2.6px;margin:8px 0 12px;max-width:900px;text-wrap:balance}
.intro{margin:0;color:#d1dff3;font-size:clamp(15px,1.45vw,20px);line-height:1.35;max-width:860px}
.feature-row{display:flex;flex-wrap:wrap;gap:9px;margin-top:18px}
.feature-row span{font-size:13px;background:#0c2550;border:1px solid #3464a3;border-radius:999px;padding:8px 12px;color:#d6ebff;font-weight:700}
.hero-visual{overflow:hidden;padding:0;min-height:250px}
.hero-visual img{width:100%;height:100%;display:block;object-fit:cover;object-position:center center}
.level-area{padding:18px 18px 16px 18px;display:grid;grid-template-rows:auto 1fr;gap:14px;min-height:0}
.level-head h2{font-size:clamp(21px,2.2vw,34px);margin:0 0 4px 0}
.level-head p{margin:0;color:var(--muted);font-size:14px}
.levels{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;min-height:0}
.level-card{
  position:relative;min-height:208px;border-radius:24px;padding:0;overflow:hidden;color:#fff;text-align:left;
  border:1px solid #3c6bab;background:#0b2249;box-shadow:0 14px 30px rgba(0,0,0,.35);transition:.18s ease
}
.level-card:hover{transform:translateY(-4px);filter:brightness(1.06)}
.level-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 52%;opacity:.96}
.level-card:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,14,29,.03) 0%,rgba(5,14,29,.24) 35%,rgba(5,14,29,.88) 100%)}
.level-card span,.level-card strong{position:absolute;z-index:1;left:16px;right:16px}
.level-card .level-kicker{bottom:60px;font-size:clamp(13px,1.1vw,17px);font-weight:900;text-transform:uppercase;letter-spacing:.7px}
.level-card strong{bottom:16px;font-size:clamp(14px,1.35vw,21px);line-height:1.05;font-weight:900;text-wrap:balance}
.level-card.simple{border-color:#27df82}.level-card.medium{border-color:#ffab24}.level-card.hard{border-color:#ff4b70}
.level-card.simple .level-kicker{color:#8dffc0}.level-card.medium .level-kicker{color:#ffd280}.level-card.hard .level-kicker{color:#ff93a8}

.screen-quiz{place-items:center;grid-template-rows:auto auto minmax(0,1fr) auto;gap:12px;max-width:1050px;width:100%;margin:auto}
.quiz-head{width:100%;display:grid;grid-template-columns:auto 1fr;gap:8px;align-items:center;padding:12px 14px}
.quiz-meta{display:flex;justify-content:space-between;align-items:center;color:#cfdef2;font-size:15px}
.quiz-meta #levelBadge{font-weight:900;color:var(--cyan)}
.progress{grid-column:1/-1;height:8px;border-radius:999px;background:#142d56;overflow:hidden}
.progress i{display:block;height:100%;width:5%;background:linear-gradient(90deg,var(--green),var(--cyan));border-radius:999px;transition:.25s}
.small{width:38px;height:38px;padding:0;border-radius:50%}
.help-bar{width:100%;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 14px}
.help-label{font-size:13px;color:#b8d1ef;font-weight:800}
.help-buttons{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.help-btn{
  border:1px solid #3970b5;background:#0c2550;color:#fff;border-radius:13px;padding:10px 14px;
  font-weight:900;font-size:13px;transition:.16s ease
}
.help-btn:hover{background:#16386e}
.help-btn.used,.help-btn:disabled{opacity:.42;cursor:not-allowed}
.question-card{position:relative;width:100%;height:100%;display:grid;grid-template-rows:auto 1fr;gap:14px;padding:24px;min-height:0}
.question-card h2{font-size:clamp(25px,3.2vw,42px);line-height:1.08;margin:0;padding-right:100px;text-wrap:balance}
.rabbit-mini{position:absolute;top:16px;right:16px;width:88px;height:88px;border-radius:22px;overflow:hidden;border:1px solid #386aab;background:#081734}
.rabbit-mini img{width:100%;height:100%;object-fit:cover;object-position:center}
.answers{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-content:center}
.answer{
  position:relative;min-height:76px;border:1px solid #315b98;background:#0b2145;color:#eef6ff;border-radius:18px;
  padding:15px 44px 15px 16px;text-align:left;font-weight:800;font-size:18px;line-height:1.2;transition:.15s
}
.answer:hover{background:#133163}
.answer.selected{outline:2px solid var(--cyan);background:#153970}
.answer.hint-best{box-shadow:0 0 0 2px #ffd45b inset;background:#17396b}
.answer.hint-best:after{content:"★";position:absolute;right:14px;top:50%;transform:translateY(-50%);color:#ffd45b;font-size:22px;text-shadow:0 0 8px rgba(255,212,91,.45)}
.answer.hidden-by-help{visibility:hidden;pointer-events:none}
.quiz-foot{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px}
.quiz-foot span{font-size:13px;color:#d2def2;min-height:18px}
.primary,.secondary,.ghost{border:0;border-radius:14px;padding:12px 18px;font-weight:900}
.primary{background:linear-gradient(90deg,#16b9ff,#6757ff);color:#fff;box-shadow:0 10px 25px rgba(35,87,255,.29)}
.primary:disabled{opacity:.35;cursor:not-allowed}
.secondary{background:#ffab17;color:#111}
.ghost{background:#132a50;color:#e7f2ff;border:1px solid #31588f}

.screen-result{place-items:center}
.result-card{
  width:min(1200px,100%);min-height:560px;display:grid;grid-template-columns:340px minmax(0,1fr);gap:22px;padding:22px;
  align-items:stretch;
}
.result-visual{
  border-radius:24px;background:linear-gradient(180deg,#101f45,#081833);border:1px solid rgba(64,111,178,.6);
  display:flex;align-items:center;justify-content:center;overflow:hidden;padding:14px
}
.result-visual img{width:100%;height:100%;object-fit:cover;object-position:center}
.result-copy{display:flex;flex-direction:column;justify-content:center;min-width:0}
.result-copy h2{font-size:clamp(29px,3vw,44px);line-height:1;margin:7px 0 10px}
.score-ring{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.score-ring strong{font-size:clamp(52px,6vw,88px);line-height:1;color:var(--gold)}
.score-ring span{color:#d0def0;font-weight:800;font-size:24px}
.result-copy p{margin:8px 0 14px;color:#d9e5f7;font-size:18px;line-height:1.35}
.result-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.result-stats div{padding:12px 14px;border-radius:16px;background:#081a39;border:1px solid #274f88}
.result-stats span{display:block;color:#8fa7c9;font-size:11px;text-transform:uppercase;margin-bottom:5px}
.result-stats strong{font-size:23px}
.name-field{display:block;margin-top:14px}
.name-field span{display:block;color:#b9cce7;font-size:13px;margin-bottom:6px;font-weight:700}
.name-field input{width:100%;border:1px solid #355f98;background:#07172f;color:#fff;border-radius:14px;padding:14px 15px;outline:none;font-size:18px}
.name-field input:focus{border-color:var(--cyan)}
.actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.actions button{flex:1 1 180px}
footer{
  display:flex;align-items:center;justify-content:center;gap:18px;padding:0 16px;font-size:10px;
  color:#7f97bc;border-top:1px solid #173563;white-space:nowrap
}
footer a{color:#a8c9f4;text-decoration:none}

@media (max-width:980px){
  .app-shell{grid-template-rows:50px 1fr 28px}
  .screen{padding:12px 12px 10px}
  .home-top{grid-template-columns:1fr}
  .hero-visual{min-height:180px}
  .levels{gap:10px}
  .result-card{grid-template-columns:1fr;min-height:0}
  .result-visual{height:220px}
}
@media (max-width:700px){
  .topbar{padding:6px 10px}.brand{font-size:20px}.lang{font-size:16px;padding:4px 6px;border-radius:7px}
  .screen{padding:8px}
  .screen-home{gap:8px}
  .home-top{gap:8px}
  .home-copy{padding:14px;border-radius:18px}
  h1{font-size:clamp(26px,8.5vw,38px);line-height:.94;letter-spacing:-1.5px;margin:5px 0 8px}
  .eyebrow{font-size:9px}.intro{font-size:12px;line-height:1.25}.feature-row{gap:6px;margin-top:10px}
  .feature-row span{font-size:10px;padding:6px 8px}
  .hero-visual{min-height:112px;border-radius:18px}
  .level-area{padding:10px;border-radius:18px;gap:8px}
  .level-head h2{font-size:18px}.level-head p{font-size:10px}
  .levels{grid-template-columns:1fr;gap:8px}
  .level-card{min-height:100px;border-radius:16px}
  .level-card .level-kicker{bottom:35px;font-size:10px;left:11px;right:11px}
  .level-card strong{bottom:10px;font-size:12px;left:11px;right:11px}
  .screen-quiz{gap:8px}
  .quiz-head,.help-bar{padding:9px 10px;border-radius:14px}
  .quiz-meta{font-size:11px}.small{width:30px;height:30px}
  .help-label{font-size:10px}.help-buttons{gap:5px}.help-btn{padding:7px 8px;font-size:10px;border-radius:9px}
  .question-card{padding:12px;border-radius:18px;gap:9px}
  .question-card h2{font-size:clamp(19px,5.2vw,25px);padding-right:54px}
  .rabbit-mini{width:46px;height:46px;border-radius:11px;top:8px;right:8px}
  .answers{grid-template-columns:1fr;gap:7px}
  .answer{min-height:0;padding:10px 11px;font-size:15px;border-radius:12px}
  .quiz-foot span{font-size:10px}.quiz-foot .primary{padding:10px 14px}
  .result-card{padding:12px;border-radius:18px;gap:10px}
  .result-visual{height:160px;border-radius:16px;padding:8px}
  .result-copy h2{font-size:22px}
  .score-ring strong{font-size:42px}.score-ring span{font-size:15px}
  .result-copy p{font-size:13px;margin:5px 0 8px;line-height:1.25}
  .result-stats{gap:6px}.result-stats div{padding:8px}.result-stats span{font-size:8px}.result-stats strong{font-size:14px}
  .name-field{margin-top:8px}.name-field input{padding:10px;font-size:13px}.name-field span{font-size:10px}
  .actions{gap:6px;margin-top:8px}.actions button{padding:9px 8px;font-size:11px;border-radius:10px}
  footer{font-size:7px;gap:7px;padding:0 6px}
}
@media (max-width:390px),(max-height:690px){
  .app-shell{grid-template-rows:44px 1fr 22px}
  .screen{padding:6px}
  .home-copy{padding:12px}.hero-visual{min-height:90px}
  h1{font-size:clamp(23px,7.8vw,32px)}.intro{font-size:10px}.feature-row{gap:5px}
  .feature-row span{font-size:9px;padding:5px 7px}
  .level-head h2{font-size:15px}
  .level-card{min-height:86px}
  .level-card .level-kicker{bottom:31px;font-size:9px}
  .level-card strong{font-size:11px}
  .question-card h2{font-size:17px}.answer{font-size:13px;padding:8px 9px}
  .help-btn{font-size:9px;padding:6px 7px}
  .result-visual{height:120px}.result-copy h2{font-size:18px}.score-ring strong{font-size:34px}.score-ring span{font-size:12px}
  .result-copy p{font-size:11px}.actions button{font-size:9px;padding:7px 6px}
  footer{font-size:6.5px}
}

@media (max-width:700px){
  .screen-home{padding-bottom:20px}
  .help-buttons{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%}
  .help-btn{min-width:0;white-space:nowrap}
  .quiz-foot{position:sticky;bottom:0;padding-top:4px;background:linear-gradient(180deg,rgba(6,19,42,0),rgba(6,19,42,.86) 35%,rgba(6,19,42,.96) 100%)}
}