:root{
  --bg1:#6478ef;
  --bg2:#7454c5;
  --bg3:#a04fbd;
  --ink:#24313d;
  --muted:#7f898d;
  --card:#ffffff;
  --line:#e7e9ed;
  --green:#1f9b56;
  --green-bg:#e9f8ef;
  --red:#c83b4d;
  --red-bg:#fdebed;
  --shadow:0 22px 60px rgba(43,34,103,.19);
  --radius:28px;
}
*{box-sizing:border-box}
html{min-height:100%;background:#7558c7}
body{
  margin:0;
  min-height:100vh;
  min-height:100dvh;
  color:var(--ink);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  background:
    radial-gradient(circle at 15% 10%,rgba(255,255,255,.12),transparent 32%),
    radial-gradient(circle at 88% 88%,rgba(255,119,190,.18),transparent 36%),
    linear-gradient(145deg,var(--bg1) 0%,var(--bg2) 62%,var(--bg3) 125%);
}
button,input{font:inherit}
button{cursor:pointer}
.app-shell{width:min(980px,100%);margin:0 auto;padding:18px 18px 40px}
.topbar{
  min-height:76px;
  display:flex;
  align-items:center;
  gap:12px;
  color:#fff;
  padding:6px 4px 18px;
}
.brand{display:flex;align-items:center;gap:12px;min-width:0;flex:1}
.brand-icon{font-size:32px;filter:drop-shadow(0 4px 8px rgba(0,0,0,.2))}
.brand-title{font-size:clamp(23px,4vw,38px);font-weight:720;letter-spacing:-.03em;line-height:1.05}
.brand-subtitle{opacity:.76;font-size:13px;margin-top:4px}
.icon-btn{
  width:44px;height:44px;border-radius:14px;border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.12);color:#fff;font-size:24px;backdrop-filter:blur(8px)
}
.view{display:none;animation:fadeUp .24s ease}
.view.active{display:block}
.hidden{display:none!important}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.hero-card,.question-card{
  background:rgba(255,255,255,.98);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.hero-card{padding:clamp(26px,6vw,58px);max-width:820px;margin:22px auto 0}
.eyebrow{
  color:#7783d7;text-transform:uppercase;letter-spacing:.12em;font-size:12px;font-weight:700
}
h1,h2,p{margin-top:0}
h1{font-size:clamp(34px,6vw,54px);letter-spacing:-.045em;line-height:1.02;margin:10px 0 14px}
.lead{font-size:clamp(16px,2.4vw,20px);line-height:1.55;color:#667078;margin-bottom:28px}
.stats-card{
  display:flex;align-items:center;gap:18px;padding:20px 22px;background:#f6f7f9;border:1px solid #eceef1;
  border-radius:20px;margin:26px 0
}
.stat-number{font-size:42px;font-weight:760;letter-spacing:-.05em;color:#43505a}
.stat-title{font-size:17px;font-weight:650}
.stat-caption{font-size:13px;color:#8a9196;margin-top:4px}
.mode-grid{display:grid;gap:14px}
.mode-card{
  width:100%;border:0;text-align:left;border-radius:22px;color:#fff;padding:22px 22px;
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:15px;
  box-shadow:0 16px 30px rgba(65,53,126,.17);transition:.18s transform,.18s box-shadow
}
.mode-card:hover{transform:translateY(-2px);box-shadow:0 20px 36px rgba(65,53,126,.22)}
.mode-card:active{transform:translateY(0)}
.mode-card.training{background:linear-gradient(120deg,#6279ea,#8056c2)}
.mode-card.tickets{background:linear-gradient(120deg,#d75ad1,#f25273)}
.mode-icon{font-size:31px}
.mode-card strong{display:block;font-size:22px;font-weight:720}
.mode-card small{display:block;font-size:14px;opacity:.88;margin-top:4px;line-height:1.35}
.mode-arrow{font-size:27px;opacity:.8}

.progress-wrap{margin:16px 2px 16px}
.progress-top{display:flex;justify-content:space-between;color:#fff;font-size:14px;margin:0 4px 9px;opacity:.92}
.progress-track{height:12px;border-radius:999px;background:rgba(255,255,255,.28);overflow:hidden}
.progress-bar{height:100%;width:0;background:#fff;border-radius:inherit;transition:width .28s ease}
.question-card{padding:clamp(24px,5vw,48px);margin-top:18px}
.question-kicker{font-size:14px;color:#8a9297;margin-bottom:12px}
.question-card h2{font-size:clamp(25px,4vw,37px);line-height:1.24;letter-spacing:-.025em;margin-bottom:26px;font-weight:690}
.answers{display:grid;gap:12px}
.answer-btn{
  width:100%;text-align:left;padding:17px 18px;border:2px solid #e1e4e7;border-radius:17px;background:#fff;
  color:#29343d;line-height:1.38;transition:.15s border,.15s background,.15s transform;
  display:flex;align-items:flex-start;gap:12px
}
.answer-btn:hover:not(:disabled){border-color:#9aa6ec;transform:translateY(-1px)}
.answer-btn:disabled{cursor:default}
.answer-mark{flex:0 0 30px;height:30px;border-radius:9px;background:#f0f2f4;display:grid;place-items:center;font-size:14px;color:#788188}
.answer-btn.correct{border-color:#31a85f;background:var(--green-bg);color:#176d3d}
.answer-btn.correct .answer-mark{background:#2da75e;color:#fff}
.answer-btn.wrong{border-color:#d84a5d;background:var(--red-bg);color:#8f2634}
.answer-btn.wrong .answer-mark{background:#d84a5d;color:#fff}
.feedback{margin-top:18px;padding:14px 16px;border-radius:14px;font-size:14px;line-height:1.4}
.feedback.good{background:var(--green-bg);color:#176d3d}
.feedback.bad{background:var(--red-bg);color:#8f2634}
.question-actions{display:flex;justify-content:space-between;gap:12px;margin-top:24px}
.primary-btn,.secondary-btn{
  min-height:50px;border-radius:15px;padding:0 20px;border:0;font-weight:650
}
.primary-btn{background:linear-gradient(120deg,#6479ed,#7e54bd);color:#fff;box-shadow:0 12px 24px rgba(84,72,160,.18)}
.secondary-btn{background:#f2f4f6;color:#5c656b}
.wide{width:100%;margin-top:10px}

.catalog-head{
  background:rgba(255,255,255,.98);border-radius:24px;padding:26px;box-shadow:var(--shadow);margin-top:16px
}
.catalog-head h1{font-size:clamp(32px,5vw,48px);margin-bottom:10px}
.catalog-head p{color:#687278;line-height:1.5;margin-bottom:18px}
.catalog-tools{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center}
.search-box{
  height:52px;border:1px solid #e2e5e8;background:#f8f9fa;border-radius:15px;
  display:flex;align-items:center;gap:10px;padding:0 15px
}
.search-box input{border:0;outline:0;background:transparent;width:100%;color:#24313d}
.catalog-count{font-size:13px;color:#747d83;background:#f4f5f7;padding:10px 12px;border-radius:12px}
.catalog{display:grid;gap:10px;margin-top:14px}
.ticket{
  background:rgba(255,255,255,.98);border-radius:18px;box-shadow:0 8px 20px rgba(45,37,106,.12);
  overflow:hidden
}
.ticket summary{
  list-style:none;display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:start;
  padding:18px 18px;cursor:pointer
}
.ticket summary::-webkit-details-marker{display:none}
.ticket-number{
  min-width:36px;height:36px;border-radius:11px;background:#edf0ff;color:#6877cf;display:grid;place-items:center;font-size:13px;font-weight:700
}
.ticket-question{font-size:16px;line-height:1.42;padding-top:6px}
.ticket-chevron{color:#929aa0;font-size:20px;transform:rotate(0);transition:.18s transform;padding-top:5px}
.ticket[open] .ticket-chevron{transform:rotate(90deg)}
.ticket-body{padding:0 18px 18px 66px}
.ticket-answer{
  padding:11px 13px;border-radius:12px;background:#f5f6f7;margin-top:8px;font-size:14px;line-height:1.4;color:#59636a
}
.ticket-answer.correct{background:var(--green-bg);color:#176d3d;border:1px solid #bfe7cf}
.ticket-answer.correct::before{content:"✓ ";font-weight:800}
.empty{
  background:#fff;border-radius:18px;padding:28px;text-align:center;color:#7b858b
}
.finish-card{text-align:center}
.finish-icon{font-size:64px;margin-bottom:14px}
.finish-stats{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:26px 0}
.finish-stats>div{background:#f5f6f8;border-radius:18px;padding:20px}
.finish-stats strong{display:block;font-size:36px;letter-spacing:-.04em}
.finish-stats span{font-size:13px;color:#7d858a}

@media (max-width:640px){
  .app-shell{padding:10px 14px 28px}
  .topbar{min-height:70px;padding-bottom:12px}
  .brand-icon{font-size:27px}
  .brand-title{font-size:25px}
  .brand-subtitle{display:none}
  .hero-card{margin-top:8px;padding:26px 20px;border-radius:25px}
  .hero-card h1{font-size:38px}
  .mode-card{padding:19px 17px}
  .mode-card strong{font-size:19px}
  .question-card{padding:24px 18px;border-radius:24px}
  .question-card h2{font-size:27px}
  .answer-btn{padding:15px 14px}
  .question-actions{flex-direction:column-reverse}
  .question-actions button{width:100%}
  .catalog-head{padding:22px 18px;border-radius:22px}
  .catalog-tools{grid-template-columns:1fr}
  .catalog-count{justify-self:start}
  .ticket summary{padding:16px 14px;gap:10px}
  .ticket-body{padding:0 14px 16px 60px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}
}