/* Страницы студента в стиле Moodle (тема Boost): светлый фон, белые карточки, синие акценты.
   Без внешних шрифтов и встроенных стилей: сервер экзамена работает без интернета и отдаёт
   строгую политику безопасности (CSP). Тёмная тема браузера не применяется. */

:root{
  color-scheme:light;
  --paper:#f8f9fa; --surface:#ffffff; --surface-2:#f8f9fa;
  --ink:#1d2125; --ink-soft:#6a737b; --ink-faint:#adb5bd;
  --rule:#dee2e6; --rule-strong:#ced4da;
  --primary:#0f6cbf; --primary-dark:#0b508e; --primary-soft:#e7f1fb;
  --success:#357a32; --success-soft:#e6f5e6; --danger:#ca3120; --danger-soft:#f8e6e4; --warning-soft:#fff3cd;
  --on-ink:#ffffff;
  --radius:.5rem;
  --sans:"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --serif:var(--sans);
  --mono:Consolas,"Courier New",monospace;
  --shadow:0 .125rem .25rem rgba(0,0,0,.05);
}

*{box-sizing:border-box}
[hidden]{display:none!important}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:15px; line-height:1.5;
}
.in{max-width:860px; margin:0 auto; padding-inline:16px}
.narrow{max-width:560px; margin:0 auto; padding-inline:16px}
.wrap{padding-block:28px 56px}
.mono{font-family:var(--mono); font-variant-numeric:tabular-nums}
a{color:var(--primary)}
a:hover{color:var(--primary-dark)}

h1,h2,h3{font-family:var(--sans); color:var(--ink)}
h1{font-weight:400; font-size:clamp(26px,5vw,34px); line-height:1.2; margin:0}
h2{font-weight:400; font-size:clamp(20px,4vw,26px); line-height:1.25; margin:0}
.eyebrow{font-size:12px; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-soft); font-weight:600; margin:0 0 6px}

.head{padding-bottom:14px; border-bottom:1px solid var(--rule); margin-bottom:22px}
.head-r{display:flex; justify-content:space-between; align-items:flex-start; gap:14px; flex-wrap:wrap}
.who{margin:10px 0 0; font-size:14px; color:var(--ink-soft)}
.who b{font-family:var(--mono); color:var(--ink)}

.card{border:1px solid var(--rule); border-radius:var(--radius); background:var(--surface); padding:24px; box-shadow:var(--shadow)}
.card.center{text-align:center; padding:28px 24px}

/* ---------- поля и кнопки ---------- */
fieldset{border:0; padding:0; margin:0; min-width:0; display:flex; flex-direction:column; gap:18px}
.field{display:flex; flex-direction:column; gap:6px}
label.lbl{font-weight:600; font-size:14px}
input.txt{
  font-family:var(--mono); font-size:17px; letter-spacing:.02em; color:var(--ink); background:var(--surface);
  border:1px solid var(--rule-strong); border-radius:var(--radius); padding:10px 12px; width:100%;
}
input.txt:focus-visible,.go:focus-visible,.ghost:focus-visible,.tog:focus-visible{outline:0; box-shadow:0 0 0 .2rem rgba(15,108,191,.3); border-color:var(--primary)}
input.txt:disabled{background:var(--surface-2); color:var(--ink-faint)}
.fhint{margin:0; font-size:13px; color:var(--ink-soft)}
.pw{display:flex}
.pw input{flex:1 1 auto; min-width:0; border-radius:var(--radius) 0 0 var(--radius)}
.tog{flex:0 0 auto; font:inherit; font-size:14px; padding:0 14px; cursor:pointer; background:var(--surface-2); color:var(--ink); border:1px solid var(--rule-strong); border-left:0; border-radius:0 var(--radius) var(--radius) 0}
.tog:hover{background:#e9ecef}
.tog:disabled{color:var(--ink-faint); cursor:default}

.go{
  margin-top:20px; cursor:pointer; width:100%; font-family:var(--sans); font-weight:500; font-size:16px; padding:10px 18px;
  border-radius:var(--radius); background:var(--primary); color:#fff; border:1px solid var(--primary);
}
.go:hover{background:var(--primary-dark); border-color:var(--primary-dark); color:#fff}
.go:disabled{background:#8fb8de; border-color:#8fb8de; cursor:default; opacity:1}
.go.auto{width:auto; margin-top:0}
.ghost{cursor:pointer; font:inherit; font-size:15px; padding:9px 16px; border-radius:var(--radius); background:var(--surface); color:var(--primary); border:1px solid var(--primary)}
.ghost:hover{background:var(--primary); color:#fff}

.msg{border:1px solid #f1aeb5; background:#f8d7da; color:#58151c; border-radius:var(--radius); padding:12px 14px; margin-bottom:20px; font-size:14px; text-align:left}
.msg strong{display:block; font-size:15px; margin-bottom:2px}

.rules{margin:0; padding:0 0 0 20px; display:flex; flex-direction:column; gap:6px}
.rules li{font-size:14px; color:var(--ink-soft)}
.sec{margin-top:26px}
.sec-t{margin:0 0 10px; font-size:13px; letter-spacing:.04em; text-transform:uppercase; font-weight:600; color:var(--ink-soft)}
.help{margin:18px 0 0; font-size:14px; color:var(--ink-soft)}
.mt{margin-top:24px}

/* ---------- ожидание ---------- */
.srv,.timer{border:1px solid var(--rule); border-radius:var(--radius); background:var(--surface); padding:6px 14px 5px; text-align:center; min-width:112px}
.srv-l,.timer-l{display:block; font-size:11px; letter-spacing:.04em; text-transform:uppercase; font-weight:600; color:var(--ink-soft)}
.srv-v{display:block; font-family:var(--mono); font-size:20px; line-height:1.2; font-variant-numeric:tabular-nums}
.timer-v{display:block; font-family:var(--mono); font-size:24px; line-height:1.15; font-variant-numeric:tabular-nums}
.timer.low{background:var(--danger); border-color:var(--danger); color:#fff}
.timer.low .timer-l{color:#fff}
.card-l{margin:0; font-size:13px; letter-spacing:.04em; text-transform:uppercase; font-weight:600; color:var(--ink-soft)}
.count{margin:8px 0 0; font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:clamp(54px,16vw,80px); line-height:1.05; color:var(--primary)}
.count.soon{background:var(--danger); color:#fff; display:inline-block; padding:2px 16px; border-radius:var(--radius)}
.at{margin:10px 0 0; font-size:14px; color:var(--ink-soft)}
.msg-t{font-weight:500; font-size:clamp(22px,5vw,28px); line-height:1.25; margin:0}
.msg-p{margin:10px auto 0; max-width:44ch; font-size:15px; color:var(--ink-soft)}
.stay{margin:18px 0 0; padding-top:16px; border-top:1px solid var(--rule); font-size:14px; color:var(--ink-soft)}
.cf{margin-top:20px; border:1px solid var(--rule); border-left:4px solid var(--primary); background:var(--primary-soft); border-radius:var(--radius); padding:16px; text-align:left}
.cf strong{display:block; font-size:17px; margin-bottom:4px}
.cf p{margin:0 0 14px; font-size:14px}
.cf-b{display:flex; gap:10px; flex-wrap:wrap}
.warn{border:1px solid #ffe69c; background:var(--warning-soft); color:#664d03; border-radius:var(--radius); padding:12px 14px; margin-bottom:16px; text-align:left; font-size:14px}
.warn strong{display:block; font-size:15px; margin-bottom:2px}
dl.info{margin:0; border:1px solid var(--rule); border-radius:var(--radius); background:var(--surface); overflow:hidden}
dl.info div{display:grid; grid-template-columns:150px 1fr; gap:12px; padding:10px 14px; border-bottom:1px solid var(--rule)}
dl.info div:last-child{border-bottom:0}
dl.info dt{color:var(--ink-soft); font-size:14px}
dl.info dd{margin:0; font-weight:600; font-size:14px}
.chk{list-style:none; margin:0; padding:0; border:1px solid var(--rule); border-radius:var(--radius); background:var(--surface); overflow:hidden}
.chk li{display:grid; grid-template-columns:26px 1fr auto; gap:12px; align-items:center; padding:10px 14px; border-bottom:1px solid var(--rule); font-size:14px}
.chk li:last-child{border-bottom:0}
.mk{width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px; background:var(--success); color:#fff}
.mk.bad{background:var(--danger)}
.chk .v{font-family:var(--mono); font-size:13px; color:var(--ink-soft)}

/* ---------- экзамен: верхняя панель ---------- */
.bar{position:sticky; top:0; z-index:5; background:var(--surface); border-bottom:1px solid var(--rule); box-shadow:var(--shadow)}
.bar .in{padding-block:10px; display:flex; flex-direction:column; gap:10px}
.bar-r1{display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap}
.pg-row{display:flex; align-items:center; gap:12px}
.pg-t{font-size:13px; font-weight:600; white-space:nowrap; color:var(--ink-soft)}
.pg{flex:1; display:grid; grid-template-columns:repeat(var(--cols,10),1fr); gap:4px}
.pc{height:28px; border:1px solid var(--rule-strong); border-radius:.25rem; background:var(--surface); font-size:12px; display:flex; align-items:center; justify-content:center; font-variant-numeric:tabular-nums; text-decoration:none; color:var(--ink)}
.pc:hover{background:var(--primary-soft); border-color:var(--primary); color:var(--primary)}
.pc.done{background:var(--primary-soft); border-color:var(--primary); color:var(--primary-dark); font-weight:600}
.pc.cur{background:var(--primary); border-color:var(--primary); color:#fff; font-weight:600}
.pc:focus-visible{outline:0; box-shadow:0 0 0 .2rem rgba(15,108,191,.3)}
.navb{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.navb a{text-decoration:none; display:inline-flex; align-items:center}
.pg.c4{--cols:4} .pg.c5{--cols:5} .pg.c6{--cols:6} .pg.c7{--cols:7} .pg.c8{--cols:8} .pg.c9{--cols:9}
.pg.c10{--cols:10} .pg.c11{--cols:11} .pg.c12{--cols:12} .pg.c13{--cols:13} .pg.c14{--cols:14} .pg.c15{--cols:15}
.pg.c16{--cols:16} .pg.c17{--cols:17} .pg.c18{--cols:18} .pg.c19{--cols:19} .pg.c20{--cols:20}

/* ---------- экзамен: задание ---------- */
.exam-wrap{padding-block:22px 44px}
.th{display:flex; align-items:baseline; gap:14px; flex-wrap:wrap}
.kind{font-size:12px; letter-spacing:.04em; text-transform:uppercase; font-weight:600; color:var(--ink-soft)}
.acct{font-weight:500; font-size:clamp(32px,8vw,44px); line-height:1.1; margin:8px 0 0; color:var(--primary)}
.stmt{font-size:clamp(16px,3vw,18px); line-height:1.5; margin:12px 0 0; padding:14px 16px; background:var(--surface); border:1px solid var(--rule); border-left:4px solid var(--primary); border-radius:var(--radius)}
.sq{border:1px solid var(--rule); border-radius:var(--radius); margin-top:16px; background:var(--surface); box-shadow:var(--shadow); overflow:hidden}
.sq-h{display:flex; align-items:center; gap:12px; padding:10px 14px; background:var(--surface-2); border-bottom:1px solid var(--rule)}
.sq-n{flex:0 0 auto; min-width:28px; height:28px; padding:0 8px; display:flex; align-items:center; justify-content:center; background:var(--primary); color:#fff; border-radius:.25rem; font-weight:600; font-size:14px}
.sq-h h3{margin:0; font-size:16px; font-weight:600}
.sq-b{padding:16px 14px; display:flex; flex-direction:column; gap:14px}
.hint{margin:0; font-size:13px; color:var(--ink-soft)}
.hint code{font-family:var(--mono); font-size:12px; background:var(--surface-2); border:1px solid var(--rule); border-radius:.25rem; padding:1px 5px}

.opts{display:flex; flex-direction:column; margin:-16px -14px}
.opt{position:relative; display:grid; grid-template-columns:44px 1fr; cursor:pointer; border-top:1px solid var(--rule); background:var(--surface)}
.opt:first-child{border-top:0}
.opt input{position:absolute; opacity:0; pointer-events:none}
.ltr{display:flex; align-items:center; justify-content:center; padding:12px 0; border-right:1px solid var(--rule); font-weight:600; font-size:15px; color:var(--ink-soft)}
.otx{padding:12px 14px; font-size:15px}
.opt:hover{background:var(--primary-soft)}
.opt:has(input:checked){background:var(--primary); color:#fff}
.opt:has(input:checked) .ltr{border-right-color:rgba(255,255,255,.4); color:#fff}
.opt:has(input:focus-visible){box-shadow:inset 0 0 0 .2rem rgba(15,108,191,.3)}

.chips{display:flex; flex-wrap:wrap; gap:6px}
.chip{position:relative; cursor:pointer}
.chip input{position:absolute; opacity:0; pointer-events:none}
.chip span{display:flex; align-items:center; justify-content:center; min-width:48px; height:40px; padding:0 14px; border:1px solid var(--rule-strong); border-radius:var(--radius); background:var(--surface); font-weight:600; font-size:15px}
.chip.wide span{font-weight:400; font-size:14px}
.chip:hover span{background:var(--primary-soft); border-color:var(--primary)}
.chip input:checked + span{background:var(--primary); border-color:var(--primary); color:#fff}
.chip input:focus-visible + span{box-shadow:0 0 0 .2rem rgba(15,108,191,.3)}
.lblp{font-size:13px; font-weight:600; margin:0 0 7px}
.branch{padding-top:14px; border-top:1px dashed var(--rule-strong)}

.scroll{overflow-x:auto}
table.struct{border-collapse:separate; border-spacing:0; width:100%; min-width:360px; border:1px solid var(--rule); border-radius:var(--radius); overflow:hidden}
table.struct th,table.struct td{border-bottom:1px solid var(--rule); border-right:1px solid var(--rule); padding:0}
table.struct th:last-child,table.struct td:last-child{border-right:0}
table.struct tr:last-child td{border-bottom:0}
table.struct th{background:var(--surface-2); font-size:13px; font-weight:600; padding:9px 10px; text-align:center}
table.struct th.rl{text-align:left; font-weight:400; color:var(--ink-soft); width:42%}
table.struct td.rl{padding:10px 12px; font-size:14px; background:var(--surface-2)}
.cell{width:100%; min-height:52px; border:0; background:transparent; cursor:pointer; color:var(--primary); font-family:var(--mono); font-size:20px; display:flex; align-items:center; justify-content:center; padding:6px}
.cell:hover{background:var(--primary-soft)}
.cell:focus-visible{outline:0; box-shadow:inset 0 0 0 .2rem rgba(15,108,191,.3)}
.cell:empty::after{content:"+"; font-size:17px; color:var(--ink-faint)}

.taccounts{display:flex; gap:22px; flex-wrap:wrap; justify-content:center}
.tacc{flex:1 1 250px; max-width:330px}
.tacc svg{width:100%; height:auto; display:block}
.t-line{stroke:var(--ink); stroke-width:3}
.t-box{fill:var(--surface); stroke:var(--ink); stroke-width:2}
.t-letter{fill:var(--ink); font-family:var(--sans); font-size:22px; font-weight:700; text-anchor:middle}
.arr{display:none; fill:none; stroke-linecap:round; stroke-linejoin:round}
.arr.none{stroke:var(--ink-faint); stroke-width:2}
.arr.none .dash{stroke-dasharray:5 5}
.arr.up,.arr.down{stroke:var(--primary); stroke-width:3}
.tacc[data-state="none"] .arr.none,
.tacc[data-state="up"] .arr.up,
.tacc[data-state="down"] .arr.down{display:inline}
.hit{cursor:pointer; fill:transparent}
.hit:focus{outline:none}
.hit:focus-visible{outline:1px dashed var(--primary); outline-offset:2px}
.acc-in{width:100%; height:100%; border:0; padding:0; margin:0; background:transparent; outline:none; font-family:var(--mono); font-size:21px; text-align:center; color:var(--primary)}
.acc-in:focus{background:var(--primary-soft)}
.tcap{margin:4px 0 0; font-size:12px; color:var(--ink-soft); text-align:center}

.seg{display:flex; flex-wrap:wrap; gap:6px}
.seg label{position:relative}
.seg input{position:absolute; opacity:0; pointer-events:none}
.seg span{display:flex; align-items:center; justify-content:center; min-width:72px; height:44px; padding:0 16px; border:1px solid var(--rule-strong); border-radius:var(--radius); background:var(--surface); cursor:pointer; font-weight:600; font-size:16px}
.seg label:hover span{background:var(--primary-soft); border-color:var(--primary)}
.seg input:checked + span{background:var(--primary); border-color:var(--primary); color:#fff}
.seg input:focus-visible + span{box-shadow:0 0 0 .2rem rgba(15,108,191,.3)}

.foot{margin-top:22px; display:flex; flex-direction:column; gap:14px}
.foot-r{display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap}
.saved{margin:0; font-size:13px; color:var(--ink-soft)}
.saved b{font-family:var(--mono); font-weight:400; color:var(--ink)}

/* ---------- итог ---------- */
.end{border:1px solid var(--rule); border-radius:var(--radius); background:var(--surface); padding:30px 26px; box-shadow:var(--shadow)}
.end h2{font-size:clamp(24px,5vw,32px)}
.end p{margin:12px 0 0; max-width:54ch; color:var(--ink-soft)}
.end dl{margin:22px 0 0; display:grid; grid-template-columns:auto 1fr; gap:6px 18px; font-size:14px}
.end dt{color:var(--ink-soft)}
.end dd{margin:0; font-family:var(--mono)}

/* тренировочный разбор */
table.res td{padding:8px 10px; font-size:14px}
.mk-r{display:inline-block; padding:2px 9px; border-radius:1rem; font-size:12px; margin:2px 0; background:var(--danger-soft); color:var(--danger); border:1px solid #f1aeb5}
.mk-r.ok{background:var(--success-soft); color:var(--success); border-color:#a3cfbb}

/* ---------- кабинет студента ---------- */
.who-form{display:flex; align-items:center; gap:10px}
.ghost.small{font-size:14px; padding:7px 14px; text-decoration:none; display:inline-block}
.card.now{border-left:4px solid var(--primary); text-align:center}
.card .go.auto{margin-top:16px; text-decoration:none; display:inline-block; text-align:center}
.card .msg-p{margin-left:0}
.trainers{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px}
.trainer{border:1px solid var(--rule); border-radius:var(--radius); background:var(--surface); padding:16px; display:flex; flex-direction:column; gap:6px; box-shadow:var(--shadow)}
.trainer b{font-size:17px; font-weight:600}
.trainer .go{margin-top:10px}
table.hist td{padding:9px 10px; font-size:14px; background:var(--surface)}
table.hist th{text-align:left}
.tag{display:inline-block; border-radius:1rem; padding:1px 8px; font-size:11px; background:var(--warning-soft); color:#664d03}
.marks{display:flex; flex-wrap:wrap; gap:4px}
.sq-h .right{margin-left:auto}
dl.key{margin:0; display:grid; grid-template-columns:1fr; gap:6px}
dl.key div{display:grid; grid-template-columns:140px 1fr; gap:10px; font-size:14px}
dl.key dt{color:var(--ink-soft)}
dl.key dd{margin:0}
.sub{color:var(--ink-soft); font-size:14px}

@media (max-width:520px){
  .pg-t{display:none}
  .opt{grid-template-columns:38px 1fr}
  .foot-r{flex-direction:column; align-items:stretch}
  .go.auto{width:100%}
  dl.info div{grid-template-columns:1fr; gap:2px}
  dl.key div{grid-template-columns:1fr; gap:2px}
  .chk li{grid-template-columns:26px 1fr}
  .chk .v{grid-column:2}
  .card{padding:18px 16px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important; animation:none!important}}