/* Темы тренажёра: .hall (экзамен, итог, разбор) и .play (тренировка, модуль, ошибки) */
.app{transition:background .3s}
.app.hall{--h-bg:#14111c;--h-card:#1e1a2b;--h-line:#3a3350;--h-txt:#f3eefa;--h-mut:#9d93b3;--h-acc:#f52d6d}
.app.hall .doc,.app.hall .exam-body{background:var(--h-bg)!important;color:var(--h-txt)}
.app.hall .app-chrome{background:#0c0a12}
.app.hall .exam-bar{background:var(--h-bg);border-bottom:1px solid #2c2640}
.app.hall h3{color:var(--h-txt)}
.app.hall .mini{color:var(--h-mut)}
.app.hall .mode-title{background:#2c2640;color:#f3eefa}
.app.hall .track .lane{background:#2c2640}
.app.hall .qtext{color:var(--h-txt);font-size:20px}
.app.hall .pill{background:#2c2640;color:#f3eefa}
.app.hall .flagbtn{background:var(--h-card);border-color:var(--h-line);color:var(--h-mut)}
.app.hall .flagbtn.on{border-color:var(--h-acc);color:#fff}
.app.hall .opt{background:var(--h-card);border:1px solid var(--h-line);color:var(--h-txt);border-radius:12px}
.app.hall .opt:hover{border-color:var(--h-acc)}
.app.hall .opt.sel{border-color:var(--h-acc);background:#2a1626}
.app.hall .opt u{background:transparent;border:0;color:var(--h-acc);font-weight:700}
.app.hall .b-nav{background:var(--h-card);border:1px solid var(--h-line);color:var(--h-txt)}
.app.hall .b-nav:disabled{opacity:.4}
.app.hall .b-main{background:var(--h-acc);color:#fff;border:0}
.app.hall .b-fin{background:#7c5cff;color:#fff}
.app.hall .b-plain{color:var(--h-mut)}
.app.hall .navgrid button{background:var(--h-card);border:1px solid var(--h-line);color:var(--h-txt)}
.app.hall .navgrid button.done{background:var(--h-acc);border-color:var(--h-acc);color:#fff}
.app.hall .navgrid button.cur{outline:2px solid #fff}
.app.hall .why-box{background:#221d31;border-left-color:#7c5cff;color:#e8e1f5}
.app.hall .why-box h4{color:var(--h-mut)}
.app.hall .why-box.good{border-left-color:#2fb67c}
.app.hall .why-box.bad{border-left-color:#e5484d}
.app.hall .weak{background:#2a1620;border-left-color:#e5484d;color:var(--h-txt)}
.app.hall .weak p{color:#cfc6e3}
.app.hall .rev{background:var(--h-card);border-color:var(--h-line);box-shadow:none;color:var(--h-txt)}
.app.hall .rev .o{border-color:var(--h-line);background:transparent;color:var(--h-txt)}
.app.hall .rev .o.right{background:#12301f;border-color:#2fb67c}
.app.hall .rev .o.mine{background:#3a1620;border-color:#e5484d}
.app.hall .rev .st.ok{color:#5fd9a6}.app.hall .rev .st.no{color:#ff7b81}
.app.hall .filters button{background:var(--h-card);border-color:var(--h-line);color:var(--h-mut)}
.app.hall .filters button.on{background:var(--h-acc);border-color:var(--h-acc);color:#fff}
.app.hall .topicrow .bar{background:#2c2640}
.app.hall .btn-s{background:#2c2640}

.app.play{--p-bg:#f6f3ff;--p-line:#e4dcff;--p-txt:#2a2347;--p-mut:#6c6490;--p-acc:#7c5cff}
.app.play .doc,.app.play .exam-body{background:var(--p-bg)!important;color:var(--p-txt)}
.app.play .app-chrome{background:#3b2b7a}
.app.play .exam-bar{background:#fff;color:var(--p-txt);border-bottom:1px solid var(--p-line)}
.app.play .mode-title{background:var(--p-line);color:#4b3a9c}
.app.play .clock{color:var(--p-txt)}
.app.play .mini{color:var(--p-mut)}
.app.play .track .lane{background:var(--p-line)}
.app.play .track .lane i{background:var(--p-acc)}
.app.play .qtext{color:var(--p-txt);font-size:19px}
.app.play .pill{background:#4b3a9c}
.app.play .opt{background:#fff;border:2px solid var(--p-line);border-radius:14px;color:var(--p-txt)}
.app.play .opt:hover{border-color:var(--p-acc)}
.app.play .opt.sel{border-color:var(--p-acc);background:#f0ebff}
.app.play .opt.right{border-color:#2fb67c;background:#e5f6ee}
.app.play .opt.wrong{border-color:#e5484d;background:#fdecee}
.app.play .opt.dim{opacity:.55}
.app.play .opt u{color:var(--p-acc)}
.app.play .b-main{background:var(--p-acc);color:#fff}
.app.play .b-fin{background:#2fb67c;color:#fff}
.app.play .navgrid button.ok{background:#2fb67c;border-color:#2fb67c;color:#fff}
.app.play .navgrid button.no{background:#e5484d;border-color:#e5484d;color:#fff}
.app.play .why-box{background:#fff;border-left-color:var(--p-acc)}
.app.play .why-box.good{background:#e5f6ee;border-left-color:#2fb67c}
.app.play .why-box.bad{background:#fdecee;border-left-color:#e5484d}

.hud{display:flex;gap:14px;align-items:center;font-size:14px;font-weight:700}
.hud .fl{color:#d4510e}.hud .xp{color:#4b3a9c}
.hud .fl.hot{animation:flame .6s ease-in-out infinite alternate}
@keyframes flame{from{transform:scale(1)}to{transform:scale(1.18)}}
#dots{display:flex;flex-wrap:wrap;gap:4px;margin-top:14px}
#dots i{width:8px;height:8px;border-radius:50%;background:#3a3350;display:block}
#dots i.a{background:#f52d6d}#dots i.c{background:#fff;transform:scale(1.4)}
.pop{position:fixed;left:50%;top:150px;transform:translateX(-50%);padding:8px 16px;border-radius:20px;font-weight:700;font-size:16px;z-index:50;pointer-events:none;animation:popup 1.4s ease-out forwards}
.pop.good{background:#2fb67c;color:#fff}.pop.warn{background:#f5a02d;color:#2a1a00}.pop.fire{background:#d4510e;color:#fff}
@keyframes popup{0%{opacity:0;transform:translate(-50%,10px) scale(.8)}15%{opacity:1;transform:translate(-50%,0) scale(1.05)}80%{opacity:1}100%{opacity:0;transform:translate(-50%,-40px)}}

.res{display:flex;gap:26px;align-items:center;flex-wrap:wrap;margin:10px 0 22px}
.ringwrap{position:relative;width:160px;height:160px;flex:0 0 auto}
.ringwrap svg{display:block}
.ringtxt{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.ringtxt b{font-size:40px;font-weight:800;line-height:1}
.ringtxt span{font-size:13px;color:#9d93b3;margin-top:4px}
.app.hall .score{background:#1e1a2b;border:1px solid #2c2640}
.app.hall .stats{background:transparent;gap:10px}
.app.hall .stats>div{background:#221d31;border-radius:10px}
.fade{opacity:0;transition:opacity .5s}.fade.in{opacity:1}
#resBadges{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px;min-height:30px}
#resBadges span{background:#2a2250;border:1px solid #7c5cff;color:#d9d0ff;border-radius:16px;padding:5px 12px;font-size:13px;opacity:0;transform:translateY(8px);transition:all .4s}
#resBadges span.in{opacity:1;transform:none}
.topicrow .bar i{transition:width .7s ease-out}
@media(prefers-reduced-motion:reduce){.pop,.hud .fl.hot{animation:none}.topicrow .bar i,#resBadges span,.fade{transition:none}}