/* SailTests — общие стили. Токены цветов вверху, тёмная тема ниже. */
/* Layout: landing up to 980px wide; app screens in one narrow 560px column like a phone app. Chart-paper ground, navy chrome, port/starboard signal colours carry answer state */
:root{
  --bg:#EEF3F6; --surface:#FFFFFF; --ink:#0F2235; --muted:#5A6B7C; --line:#D3DEE6;
  --navy:#12324F; --navy-ink:#FFFFFF; --accent:#E3A51A; --on-accent:#14202C;
  --stbd:#0E8A4A; --stbd-soft:#DDF2E6; --port:#C2262E; --port-soft:#FBE3E3; --amber:#B7790D; --amber-soft:#FCEFD3;
  --idle:#AAB7C3; --sea:#DCE7EE; --night:#0A1622; --night-2:#102638;
  --f-display:"Barlow Semi Condensed","Arial Narrow",Arial,sans-serif;
  --f-body:"Source Sans 3","Segoe UI",Roboto,Arial,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0B1724; --surface:#132334; --ink:#E6EEF4; --muted:#93A6B8; --line:#24394E;
  --navy:#0F2A44; --navy-ink:#E6EEF4; --accent:#F0B83A; --on-accent:#14202C;
  --stbd:#3CC27A; --stbd-soft:#123726; --port:#F06A6F; --port-soft:#3D1A1E; --amber:#F0B83A; --amber-soft:#3A2D10;
  --idle:#4C6175; --sea:#173049; --night:#06101A; --night-2:#0D2134; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0B1724; --surface:#132334; --ink:#E6EEF4; --muted:#93A6B8; --line:#24394E;
  --navy:#0F2A44; --navy-ink:#E6EEF4; --accent:#F0B83A; --on-accent:#14202C;
  --stbd:#3CC27A; --stbd-soft:#123726; --port:#F06A6F; --port-soft:#3D1A1E; --amber:#F0B83A; --amber-soft:#3A2D10;
  --idle:#4C6175; --sea:#173049; --night:#06101A; --night-2:#0D2134; color-scheme:dark}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:16px;line-height:1.5}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--navy)}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible,input:focus-visible,a:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.bar{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--navy);color:var(--navy-ink);
  padding-block:10px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.bar-in{max-width:980px;margin:0 auto;display:flex;align-items:center;gap:10px}
.brand{font-family:var(--f-display);font-weight:700;font-size:22px;letter-spacing:.02em;display:flex;align-items:center;gap:8px;flex:1;min-width:0;background:none;border:0;color:inherit;padding:0;text-align:left}
.brand b{color:var(--accent);font-weight:700}
.barbtn{border:1px solid rgba(255,255,255,.25);background:transparent;color:var(--navy-ink);border-radius:8px;padding:6px 10px;font-size:14px;font-weight:600}
.langsel{position:relative}
.langsel>button{display:flex;align-items:center;gap:6px;font-family:var(--f-mono);font-size:13px}
.menu{position:absolute;right:0;top:calc(100% + 6px);background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 30px rgba(8,20,32,.18);padding:4px;min-width:170px;z-index:20}
.menu button{display:flex;justify-content:space-between;gap:12px;width:100%;border:0;background:none;padding:9px 10px;border-radius:7px;text-align:left;font-size:15px}
.menu button:hover{background:var(--bg)}
.menu button[aria-checked="true"]{font-weight:600}
.menu button span:last-child{font-family:var(--f-mono);font-size:12px;color:var(--muted)}
main{max-width:560px;margin:0 auto;padding-block:18px 48px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));display:flex;flex-direction:column;gap:16px}
main.wide{max-width:980px;gap:56px;padding-block:32px 56px}
h1,h2,h3{font-family:var(--f-display);font-weight:700;line-height:1.12;margin:0;text-wrap:balance}
h1{font-size:30px} h2{font-size:24px} h3{font-size:19px}
p{margin:0}
.muted{color:var(--muted)}
.eyebrow{font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.back{border:0;background:none;color:var(--muted);padding:0;display:inline-flex;gap:6px;align-items:center;font-size:15px;align-self:flex-start}
.btn{border:0;border-radius:12px;padding:14px 18px;font-weight:600;font-size:16px;background:var(--navy);color:var(--navy-ink);width:100%;display:flex;align-items:center;justify-content:center;gap:10px;text-decoration:none}
:root[data-theme="dark"] .btn{background:var(--accent);color:var(--on-accent)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .btn{background:var(--accent);color:var(--on-accent)}}
.btn.gold{background:var(--accent);color:var(--on-accent)}
.btn.ghost{background:var(--surface);color:var(--ink);border:1px solid var(--line)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px}
.note{font-size:13px;color:var(--muted);border-left:3px solid var(--accent);padding:4px 0 4px 10px}
input[type=text]{width:100%;font:inherit;padding:12px 14px;border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--ink)}
/* landing */
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
.hero h1{font-size:clamp(36px,6vw,56px);letter-spacing:-.01em}
.hero h1 em{font-style:normal;color:var(--accent)}
.hero-txt{display:flex;flex-direction:column;gap:18px;min-width:0}
.hero-txt p{font-size:18px;color:var(--muted);max-width:34em}
.cta-row{display:flex;gap:10px;flex-wrap:wrap}
.cta-row .btn{width:auto;padding-inline:22px}
.facts{display:flex;gap:22px;flex-wrap:wrap;font-size:14px;color:var(--muted)}
.facts b{display:block;font-family:var(--f-display);font-size:26px;color:var(--ink);line-height:1.1;font-variant-numeric:tabular-nums}
.mock{background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:16px;display:flex;flex-direction:column;gap:12px;box-shadow:0 24px 60px rgba(10,30,50,.14);transform:rotate(1.2deg);max-width:380px;justify-self:center;width:100%}
.sect{display:flex;flex-direction:column;gap:20px}
.feat{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px}
.feat .panel{display:flex;flex-direction:column;gap:8px}
.feat svg{color:var(--accent)}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;counter-reset:s}
.steps li{counter-increment:s;display:flex;flex-direction:column;gap:6px;padding-top:44px;position:relative}
.steps li::before{content:counter(s);position:absolute;top:0;left:0;width:32px;height:32px;border-radius:50%;background:var(--navy);color:var(--navy-ink);display:grid;place-items:center;font-family:var(--f-display);font-weight:700}
.steps li::after{content:"";position:absolute;top:16px;left:40px;right:-6px;border-top:1.5px dashed var(--line)}
.steps li:last-child::after{display:none}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.tag{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:5px 12px;font-size:14px}
.tag.on{background:var(--navy);color:var(--navy-ink);border-color:var(--navy)}
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px}
.plan{display:flex;flex-direction:column;gap:6px}
.plan.pop{border:2px solid var(--accent)}
.plan .price{font-family:var(--f-display);font-weight:700;font-size:32px;font-variant-numeric:tabular-nums}
.plan .badge{align-self:flex-start;background:var(--accent);color:var(--on-accent);font-size:12px;font-weight:600;border-radius:999px;padding:2px 9px}
.endcta{background:var(--navy);color:var(--navy-ink);border-radius:20px;padding:28px 22px;display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.endcta .btn{width:auto}
footer{font-size:13px;color:var(--muted);border-top:1px solid var(--line);padding-top:18px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
@media (max-width:760px){.hero{grid-template-columns:1fr}.mock{transform:none}.steps li::after{display:none}}
/* exams */
.exams{display:grid;gap:10px}
.exam{display:flex;gap:14px;align-items:center;text-align:left;width:100%;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px}
.exam:disabled{opacity:.55;cursor:default}
.exam .code{font-family:var(--f-mono);font-size:12px;background:var(--navy);color:var(--navy-ink);border-radius:8px;padding:8px 6px;min-width:54px;text-align:center}
.exam .t{font-family:var(--f-display);font-weight:600;font-size:20px;line-height:1.2}
.exam .s{font-size:14px;color:var(--muted)}
.install{display:flex;gap:12px;align-items:flex-start;font-size:14px}
.install svg{flex:none;color:var(--accent)}
.install .x{border:0;background:none;color:var(--muted);padding:0 4px;font-size:20px;line-height:1}
/* progress */
.stats{display:flex;flex-direction:column;gap:10px}
.track{height:10px;border-radius:5px;background:var(--line);overflow:hidden;display:flex}
.track i{display:block;height:100%}
.legend{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:14px;color:var(--muted)}
.legend span{display:inline-flex;align-items:center;gap:6px}
.dot{width:10px;height:10px;border-radius:50%;display:inline-block;flex:none}
.big{font-family:var(--f-display);font-weight:700;font-size:26px;font-variant-numeric:tabular-nums}
.topics{list-style:none;margin:0;padding:0;background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.topics li+li{border-top:1px solid var(--line)}
.topic{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:none;border:0;padding:12px 14px}
.topic .n{font-family:var(--f-mono);font-size:12px;color:var(--muted);width:20px;flex:none}
.topic .name{flex:1;min-width:0;line-height:1.3}
.topic .name small{display:block;color:var(--muted);font-size:12px;margin-top:2px}
.chip{font-size:12px;font-weight:600;border-radius:999px;padding:3px 9px;white-space:nowrap;flex:none;font-variant-numeric:tabular-nums}
.chip.done{background:var(--stbd-soft);color:var(--stbd)}
.chip.prog{background:var(--amber-soft);color:var(--amber)}
.chip.new{background:transparent;color:var(--muted);border:1px solid var(--line)}
.final{display:flex;gap:14px;align-items:center}
.final .lock{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:var(--line);flex:none}
.final.open .lock{background:var(--accent);color:var(--on-accent)}
.bestbox{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;text-align:center}
.bestbox b{display:block;font-family:var(--f-display);font-size:24px;font-variant-numeric:tabular-nums;line-height:1.1}
.bestbox span{font-size:12px;color:var(--muted)}
/* theory */
.theory p+p{margin-top:10px}
.theory h3{margin:16px 0 6px}
.theory ul{margin:6px 0 0;padding-left:20px}
.theory li+li{margin-top:4px}
figure{margin:14px 0 4px}
figure svg{width:100%;max-width:340px;height:auto;display:block;margin:0 auto}
figcaption{font-size:13px;color:var(--muted);text-align:center;margin-top:6px}
/* quiz */
.qhead{display:flex;justify-content:space-between;align-items:center;gap:10px}
.qcount{font-family:var(--f-mono);font-size:13px;color:var(--muted);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.quit{border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:5px 10px;font-size:14px;display:inline-flex;gap:6px;align-items:center}
.timer{font-family:var(--f-mono);font-size:15px;font-variant-numeric:tabular-nums}
.timer.low{color:var(--port)}
.tbar{height:4px;background:var(--line);border-radius:2px;overflow:hidden}
.tbar i{display:block;height:100%;background:var(--navy);transition:width 1s linear}
:root[data-theme="dark"] .tbar i{background:var(--accent)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .tbar i{background:var(--accent)}}
.tbar.low i{background:var(--port)}
.qtext{font-size:19px;font-weight:600;line-height:1.35}
.qimg svg{width:100%;height:auto;display:block;border-radius:12px}
.hint{font-size:14px;color:var(--amber);font-weight:600}
.opts{display:grid;gap:10px}
.opt{display:flex;gap:12px;align-items:flex-start;text-align:left;width:100%;background:var(--surface);border:2px solid var(--line);border-radius:12px;padding:12px 14px;line-height:1.35}
.opt .k{font-family:var(--f-mono);font-size:13px;width:26px;height:26px;border-radius:7px;border:1.5px solid var(--idle);display:grid;place-items:center;flex:none}
.opt.multi .k{border-radius:6px}
.opt[aria-pressed="true"]{border-color:var(--navy)}
.opt[aria-pressed="true"] .k{background:var(--navy);color:var(--navy-ink);border-color:var(--navy)}
:root[data-theme="dark"] .opt[aria-pressed="true"]{border-color:var(--accent)}
:root[data-theme="dark"] .opt[aria-pressed="true"] .k{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .opt[aria-pressed="true"]{border-color:var(--accent)}
:root:not([data-theme="light"]) .opt[aria-pressed="true"] .k{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}}
.opt.ok{border-color:var(--stbd);background:var(--stbd-soft)}
.opt.ok .k{background:var(--stbd);border-color:var(--stbd);color:#fff}
.opt.bad{border-color:var(--port);background:var(--port-soft)}
.opt.bad .k{background:var(--port);border-color:var(--port);color:#fff}
.opt:disabled{cursor:default}
.verdict{border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:6px}
.verdict.ok{background:var(--stbd-soft);color:var(--stbd);font-weight:600}
.verdict.bad{background:var(--port-soft)}
.verdict.bad strong{color:var(--port)}
.verdict.bad p{color:var(--ink)}
.confirm{display:flex;flex-direction:column;gap:12px;border:2px solid var(--amber)}
.confirm .row{display:flex;gap:10px}
/* result + cert */
.score{text-align:center;display:flex;flex-direction:column;gap:6px;align-items:center}
.ring{width:132px;height:132px}
.newbest{color:var(--stbd);font-weight:600;font-size:14px}
.cert{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:22px 18px;text-align:center;display:flex;flex-direction:column;gap:10px;position:relative;overflow:hidden}
.cert::before{content:"";position:absolute;inset:8px;border:1.5px solid var(--accent);border-radius:3px;pointer-events:none}
.cert .who{font-family:var(--f-display);font-weight:700;font-size:28px;line-height:1.1}
.cert .rope{height:10px;background:repeating-linear-gradient(135deg,var(--accent) 0 4px,transparent 4px 8px);opacity:.6;margin:4px 24px}
.cert small{font-size:12px;color:var(--muted)}
.demo{border:1px dashed var(--line);border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:8px}
.demo .row{display:flex;gap:8px;flex-wrap:wrap}
.demo button{flex:1;min-width:140px;border:1px solid var(--line);background:var(--surface);border-radius:10px;padding:9px 10px;font-size:14px}
@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important}}

/* вход и регистрация */
.authbox{display:flex;flex-direction:column;gap:14px}
.authbox h1{font-size:26px}
.fl{display:flex;flex-direction:column;gap:6px;font-size:14px;color:var(--muted)}
.fl input{width:100%;font:inherit;font-size:16px;padding:12px 14px;border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--ink)}
.fl input:focus-visible{outline:3px solid var(--accent);outline-offset:1px}
.fl small{font-size:12px}
.autherr{margin:0}
.tabs{display:grid;grid-template-columns:1fr 1fr;background:var(--line);border-radius:12px;padding:4px;gap:4px}
.tabs button{border:0;background:transparent;border-radius:9px;padding:10px;font-weight:600;font-size:15px;color:var(--muted)}
.tabs button[aria-selected="true"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px rgba(10,30,50,.12)}
.or{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:13px}
.or::before,.or::after{content:"";flex:1;border-top:1px solid var(--line)}
/* второстепенная кнопка остаётся светлой и в тёмной теме (перебивает тёмное правило для .btn) */
:root:not(#_) .btn.ghost{background:var(--surface);color:var(--ink);border:1px solid var(--line)}
:root:not(#_) .btn.gold{background:var(--accent);color:var(--on-accent)}

/* аватар и меню аккаунта */
.usersel{position:relative}
.avatar{width:36px;height:36px;border-radius:50%;border:2px solid rgba(255,255,255,.35);background:var(--accent);color:var(--on-accent);font-family:var(--f-display);font-weight:700;font-size:15px;display:grid;place-items:center;padding:0;letter-spacing:.02em}
.avatar[aria-expanded="true"]{border-color:#fff}
.big-av{width:56px;height:56px;font-size:22px;border:0;flex:none}
.usermenu{min-width:220px}
.who-box{display:flex;flex-direction:column;gap:2px;padding:10px 10px 12px;border-bottom:1px solid var(--line);margin-bottom:4px;min-width:0}
.who-box b{font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.who-box span{font-size:13px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kv{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;margin:10px 0 0}
.kv dt{color:var(--muted)}
.kv dd{margin:0;min-width:0;overflow-wrap:anywhere}
.menu.usermenu button span:last-child{font-family:var(--f-body);font-size:15px;color:var(--ink)}

/* сертификат в курсе */
.certcard{display:flex;align-items:center;gap:14px;width:100%;text-align:left;border:2px solid var(--stbd);background:var(--stbd-soft)}
.certcard b{font-family:var(--f-display);font-size:19px}
.certcard .muted{font-size:14px}
.certmark{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:var(--stbd);color:#fff;flex:none}
.certmark svg{color:#fff}
.certgo{display:none;font-size:22px;color:var(--stbd);font-weight:700}
@media (max-width:420px){.certcard .chip{display:none}.certgo{display:block}}

/* профиль */
.pfhead{display:flex;align-items:center;gap:14px;min-width:0}
.pfhead h1{overflow-wrap:anywhere}
.pfmail{overflow-wrap:anywhere}
.pfsec{display:flex;flex-direction:column;gap:12px}
.pfform{display:flex;flex-direction:column;gap:10px}
.pfform .btn{width:auto;align-self:flex-start;padding-inline:18px}
.pfinline{flex-direction:row;flex-wrap:wrap}
#pf-code{flex:1;min-width:160px;font:inherit;font-family:var(--f-mono);letter-spacing:.04em;text-transform:uppercase;padding:12px 14px;border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--ink)}
.pfbtns{display:flex;gap:10px;flex-wrap:wrap}
.pfbtns .btn{width:auto;padding-inline:18px}
.pfrow{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.pfmsg{margin:0;font-size:14px;font-weight:600}
.pfmsg.ok{color:var(--stbd)}
.pfmsg.bad{color:var(--port)}
.linkbtn{border:0;background:none;padding:0;color:var(--navy);font-weight:600;font-size:15px;text-align:left}
:root[data-theme="dark"] .linkbtn{color:var(--accent)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .linkbtn{color:var(--accent)}}
:root:not(#_) .linkbtn.ok{color:var(--stbd)}
:root:not(#_) .linkbtn.bad{color:var(--port)}
.pfexam{display:flex;gap:12px;align-items:flex-start;padding-top:12px;border-top:1px solid var(--line)}
.pfexam:first-of-type{border-top:0;padding-top:0}
.pfexam .code{font-family:var(--f-mono);font-size:12px;background:var(--navy);color:var(--navy-ink);border-radius:8px;padding:8px 6px;min-width:50px;text-align:center;flex:none}
.pfexam.soon{opacity:.55}
.pfx{display:flex;flex-direction:column;gap:6px;flex:1;min-width:0}
.pfx b{font-family:var(--f-display);font-size:19px}
.acc{align-self:flex-start;font-size:13px;font-weight:600;border-radius:999px;padding:3px 10px;border:1px solid var(--line);color:var(--muted)}
.acc.ok{background:var(--stbd-soft);color:var(--stbd);border-color:transparent}
.small{font-size:13px}
.dangerzone{border-color:var(--port-soft)}
:root:not(#_) .btn.danger{background:var(--port);color:#fff}
.flash{margin:0;background:var(--stbd-soft);color:var(--stbd);font-weight:600;border-radius:12px;padding:12px 14px}

.exam.mine{align-items:flex-start;text-align:left}
.exam.mine .pfx{gap:8px}
.exam.mine .track{display:flex;width:100%}
.subh{font-family:var(--f-display);font-size:20px;margin:8px 0 0}

.contblock{display:flex;flex-direction:column;gap:12px}
.contblock h2{margin:0}
html,body{overflow-anchor:none}

/* закрытые темы */
.topic.locked{opacity:.6}
.lockchip{display:inline-flex;align-items:center;padding:4px 8px}
.lockchip svg{width:16px;height:16px}
.lockbox{display:flex;gap:14px;align-items:flex-start;border-color:var(--amber)}
.lockbox p{margin:0}
.lockmark svg{width:28px;height:28px;color:var(--amber)}
.lockbox.pulse{animation:lockpulse .9s ease}
@keyframes lockpulse{0%,100%{box-shadow:none}40%{box-shadow:0 0 0 4px var(--amber)}}
@media (prefers-reduced-motion:reduce){.lockbox.pulse{animation:none}}
/* группы экзаменов */
.groups{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.grp{display:flex;flex-direction:column;gap:12px}
.grp h3{margin:0;font-family:var(--f-display);font-size:20px}
.gprice{font-family:var(--f-mono);font-size:13px;font-weight:600;color:var(--muted)}
.subrow{margin-top:6px}
.grph{margin:0;font-size:15px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
/* шпаргалки */
.sheets{display:flex;flex-direction:column;gap:8px}
.sheets p{margin:0}
.sheetlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.sheetlist .n{font-size:11px}
.sheet{background:#fff;color:#14213a;border-radius:12px;padding:22px 18px;box-shadow:0 1px 3px rgba(0,0,0,.15);display:flex;flex-direction:column;gap:14px;font-size:14px}
.sheet header,.sheet footer{display:flex;justify-content:space-between;gap:10px;font-family:var(--f-mono);font-size:11px;color:#5a6577}
.sheet header b{font-family:var(--f-display);font-size:18px;color:#14213a}.sheet header b span{color:#c8901a}
.sheet footer{border-top:1px solid #d6dbe3;padding-top:10px;flex-wrap:wrap}
.sheet h1{margin:0;font-size:24px;color:#14213a}
.st{width:100%;border-collapse:collapse}
.st th{text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:#5a6577;border-bottom:2px solid #14213a;padding:6px 6px 6px 0}
.st td{border-bottom:1px solid #d6dbe3;padding:7px 6px 7px 0;vertical-align:middle}
.lt{display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:3px;border:1px solid rgba(0,0,0,.35);vertical-align:middle}
.lt-w{background:#fff}.lt-r{background:#d62828}.lt-g{background:#1f9d55}
.steps{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:6px}
@media print{
  @page{size:A4;margin:14mm}
  body{background:#fff!important}
  header.bar,.noprint,#diagbox{display:none!important}
  main{padding:0!important;max-width:none!important}
  .sheet{box-shadow:none;border-radius:0;padding:0;font-size:12pt}
  .st tr{break-inside:avoid}
  .lt{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}
.st td:nth-child(2){white-space:nowrap}
.coursehead{display:flex;flex-direction:column;gap:6px}.coursehead h1{margin:0}
.pflabel{font-size:14px;color:var(--muted)}
.pfinline{display:flex;gap:10px;align-items:stretch;flex-wrap:wrap}
.pfinline .btn{width:auto;flex:none;padding:0 20px;min-height:48px}
.pfinput{flex:1;min-width:160px;font:inherit;font-size:16px;padding:12px 14px;border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--ink)}
.pfinput:focus-visible,.pfinline input:focus-visible{outline:3px solid var(--accent);outline-offset:1px}
/* сертификат: лист A4 альбомный, на экране масштабируется по ширине */
.certbar{display:flex;flex-direction:column;gap:10px}
.certpaper{container-type:inline-size;background:#fdfbf6;color:#14213a;aspect-ratio:297/210;width:100%;border-radius:4px;box-shadow:0 2px 10px rgba(0,0,0,.18);position:relative;overflow:hidden}
.certpaper::before{content:"";position:absolute;inset:2.2cqw;border:.35cqw solid #14213a;pointer-events:none}
.certpaper::after{content:"";position:absolute;inset:3.1cqw;border:.15cqw solid #c8901a;pointer-events:none}
.cp-in{position:absolute;inset:5cqw 7cqw;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:1.1cqw}
.cp-brand{display:flex;align-items:center;gap:.8cqw;font-family:var(--f-display);font-weight:700;font-size:2.6cqw;color:#14213a}
.cp-brand svg{width:3cqw;height:3cqw;color:#14213a}.cp-brand b{color:#c8901a}
.cp-title{font-family:var(--f-display);font-weight:800;font-size:6.4cqw;letter-spacing:.14em;text-transform:uppercase;line-height:1;margin-top:.6cqw}
.cp-l{margin:0;font-size:1.9cqw;color:#4a5568}
.cp-name{font-family:var(--f-display);font-weight:700;font-size:5.2cqw;line-height:1.05;border-bottom:.15cqw solid #c8901a;padding:0 3cqw .6cqw;max-width:90%;overflow-wrap:anywhere}
.cp-exam{font-family:var(--f-display);font-weight:700;font-size:3.4cqw;color:#14213a}
.cp-rope{width:40%;height:1.1cqw;background:repeating-linear-gradient(135deg,#c8901a 0 .45cqw,transparent .45cqw .9cqw);opacity:.75}
.cp-meta{display:flex;gap:6cqw;justify-content:center}
.cp-meta span{display:flex;flex-direction:column;gap:.3cqw}
.cp-meta small{font-family:var(--f-mono);font-size:1.3cqw;text-transform:uppercase;letter-spacing:.08em;color:#6b7686}
.cp-meta b{font-size:2cqw;font-family:var(--f-mono)}
.cp-note{margin:.6cqw 0 0;font-size:1.25cqw;color:#6b7686;max-width:80%}
@media print{
  .certpaper{box-shadow:none;border-radius:0;width:100%;-webkit-print-color-adjust:exact;print-color-adjust:exact}
}
@media print{
  .certpaper{width:279mm;height:192mm;aspect-ratio:auto;margin:0 auto;break-inside:avoid;page-break-after:avoid}
  html,body,main,#app{height:auto!important;min-height:0!important;margin:0!important;padding:0!important}
}
.certbar .btn{width:auto;align-self:flex-start;padding-inline:22px}
/* администратор */
.adtable{overflow-x:auto}
.adtable .st td,.adtable .st th{padding:5px 8px;font-size:14px;color:var(--ink);border-color:var(--line)}
.adtable .st th{color:var(--muted);border-bottom-color:var(--ink)}
.adlist{margin:6px 0 0;padding-left:20px;font-size:14px;max-height:240px;overflow:auto}
#adminroot{display:flex;flex-direction:column;gap:16px}
#adminroot input[type=file]{font:inherit;max-width:100%}
.qimg img{max-width:100%;height:auto;display:block;margin:0 auto;border-radius:8px}

/* оплата */
.buylist{display:flex;flex-direction:column;gap:8px}
.lockbox .buylist .btn,.lockbox .pfbtns .btn{width:100%;flex:1 1 100%;justify-content:center;text-align:center;padding-inline:18px}
.lockbox .pfx{gap:10px}
.purlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.purlist li{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:10px 0;border-top:1px solid var(--line)}
.purlist li:first-child{border-top:0}
.purlist li div{display:flex;flex-direction:column;gap:2px;min-width:0}
.purr{display:flex;flex-direction:column;align-items:flex-end;gap:2px;font-size:15px}
.purr a{font-size:14px;color:var(--navy);font-weight:600}
:root[data-theme="dark"] .purr a{color:var(--accent)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .purr a{color:var(--accent)}}
.flash.bad{background:var(--port-soft);color:var(--port)}

/* юридические страницы */
.legalnav{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:14px}
.legalnav a{color:inherit;opacity:.8;text-decoration:underline;text-underline-offset:3px}
.legalnav a:hover{opacity:1}
.minifoot{margin-top:24px;padding-top:16px;border-top:1px solid var(--line);color:var(--muted)}
.legal{display:flex;flex-direction:column;gap:10px;line-height:1.55}
.legal h1{margin:0}
.legal h3{margin:12px 0 0;font-size:17px}
.legal p,.legal ul{margin:0}
.legal ul{padding-left:20px;display:flex;flex-direction:column;gap:6px}
.legal a,.consent a{color:var(--navy);font-weight:600}
:root[data-theme="dark"] .legal a,:root[data-theme="dark"] .consent a{color:var(--accent)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .legal a,:root:not([data-theme="light"]) .consent a{color:var(--accent)}}
.consent{margin:0;line-height:1.45}

/* тест: таймер и прогресс закреплены под шапкой при прокрутке */
.qtop{position:sticky;top:calc(env(safe-area-inset-top,0px) + var(--barh,56px));z-index:4;background:var(--bg);
  display:flex;flex-direction:column;gap:8px;padding:10px 0 10px;margin-top:-10px;box-shadow:0 8px 8px -8px rgba(0,0,0,.12)}
.install .insbtn{width:auto;display:inline-flex;margin-top:10px;padding:9px 18px;font-size:15px}