@import url("https://fonts.googleapis.com/css2?family=Golos+Text:wght@400;500;600;700&family=PT+Serif:ital,wght@0,400;0,700;1,400&family=IBM+Plex+Mono:wght@400;500&display=swap");

:root {
  --ground:#E7E9E6; --paper:#FBFBF9; --ink:#1B1E1C; --ink-soft:#676D68;
  --ink-faint:#8E948F; --rule:#CBCFC9; --rule-soft:#DEE1DC;
  --accent:#33505F; --accent-wash:#E1E7EA;
  --pass:#3D6B52; --pass-wash:#E2EDE6;
  --fail:#8E4038; --fail-wash:#F3E4E2;
  --flag:#7A5C28; --flag-wash:#F0EADD;
  --f-display:"Golos Text","Helvetica Neue",Arial,sans-serif;
  --f-body:"PT Serif",Georgia,"Times New Roman",serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground:#15181A; --paper:#1D2124; --ink:#E4E7E4; --ink-soft:#A0A7A2;
    --ink-faint:#767D78; --rule:#333A3D; --rule-soft:#282E31;
    --accent:#86AFC4; --accent-wash:#22303A;
    --pass:#7FB795; --pass-wash:#1E2C25;
    --fail:#CE8B81; --fail-wash:#2E2220;
    --flag:#C9A96A; --flag-wash:#2A2620;
  }
}

* { box-sizing:border-box; }

body {
  margin:0; background:var(--ground); color:var(--ink);
  font-family:var(--f-body); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

.wrap { max-width:52rem; margin:0 auto; padding:clamp(1.5rem,5vw,3.5rem) clamp(1rem,4vw,2rem) 5rem; }
.wrap.wide { max-width:70rem; }

.card { background:var(--paper); border:1px solid var(--rule); padding:clamp(1.4rem,4vw,2.6rem); }

.org { font-family:var(--f-display); font-size:0.68rem; font-weight:600; letter-spacing:0.22em; text-transform:uppercase; color:var(--ink-faint); }
h1 { font-family:var(--f-display); font-weight:600; font-size:clamp(1.6rem,4.5vw,2.4rem); line-height:1.12; letter-spacing:-0.02em; margin:0.9rem 0 0.6rem; text-wrap:balance; }
h2 { font-family:var(--f-display); font-weight:600; font-size:1.12rem; letter-spacing:-0.01em; margin:0 0 0.8rem; }
p { margin:0 0 0.9rem; }
p:last-child { margin-bottom:0; }
.lede { color:var(--ink-soft); max-width:52ch; }
.muted { color:var(--ink-soft); }
.small { font-size:0.88rem; }
.mono { font-family:var(--f-mono); font-size:0.85em; }

a { color:var(--accent); }
a:focus-visible, button:focus-visible, input:focus-visible, label:focus-visible {
  outline:2px solid var(--accent); outline-offset:2px;
}

/* ------------------------------------------------------------- элементы */

.btn {
  display:inline-block; font-family:var(--f-display); font-size:0.92rem; font-weight:600;
  padding:0.7rem 1.3rem; border:1px solid var(--accent); background:var(--accent);
  color:var(--paper); text-decoration:none; cursor:pointer; border-radius:0;
}
.btn:hover { filter:brightness(1.12); }
.btn.ghost { background:transparent; color:var(--accent); }
.btn.ghost:hover { background:var(--accent-wash); filter:none; }
.btn.danger { border-color:var(--fail); background:transparent; color:var(--fail); }
.btn.danger:hover { background:var(--fail-wash); }
.btn:disabled, .btn[aria-disabled="true"] { opacity:0.45; cursor:not-allowed; }
.btn.small { font-size:0.8rem; padding:0.45rem 0.85rem; }

.row { display:flex; flex-wrap:wrap; gap:0.6rem; align-items:center; }
.stack { display:flex; flex-direction:column; gap:1.2rem; }
.stack.tight { gap:0.6rem; }

input[type=text], input[type=email], input[type=password] {
  font-family:var(--f-body); font-size:1rem; padding:0.65rem 0.8rem;
  border:1px solid var(--rule); background:var(--paper); color:var(--ink);
  width:100%; max-width:24rem;
}

.badge {
  font-family:var(--f-display); font-size:0.64rem; font-weight:600;
  letter-spacing:0.12em; text-transform:uppercase; padding:0.28rem 0.5rem;
  white-space:nowrap; border:1px solid currentColor;
}
.badge.ok { color:var(--pass); }
.badge.no { color:var(--fail); }
.badge.wait { color:var(--flag); }
.badge.idle { color:var(--ink-faint); }

.note { background:var(--flag-wash); padding:1rem 1.2rem; }
.note.ok { background:var(--pass-wash); }
.note.no { background:var(--fail-wash); }
.note.info { background:var(--accent-wash); }

table { width:100%; border-collapse:collapse; font-family:var(--f-display); font-size:0.9rem; }
.table-wrap { overflow-x:auto; }
th { text-align:left; font-weight:600; font-size:0.64rem; letter-spacing:0.13em; text-transform:uppercase; color:var(--ink-faint); padding:0 0.9rem 0.55rem 0; border-bottom:1px solid var(--rule); }
td { padding:0.7rem 0.9rem 0.7rem 0; border-bottom:1px solid var(--rule-soft); vertical-align:baseline; }
th:last-child, td:last-child { padding-right:0; }
td.m { font-family:var(--f-mono); font-size:0.82rem; white-space:nowrap; }

/* --------------------------------------------------------- список чтения */

.doclist { display:grid; gap:0.6rem; }
.doclist a {
  display:grid; grid-template-columns:1.6rem 1fr auto; gap:0.9rem; align-items:center;
  padding:0.95rem 1.1rem; background:var(--paper); border:1px solid var(--rule);
  text-decoration:none; color:inherit;
}
.doclist a:hover { border-color:var(--accent); background:var(--accent-wash); }
.doclist .tick { font-family:var(--f-mono); color:var(--ink-faint); }
.doclist .tick.done { color:var(--pass); }
.doclist .name { font-family:var(--f-display); font-weight:500; }

.progress { font-family:var(--f-mono); font-size:0.82rem; color:var(--ink-soft); }

/* ------------------------------------------------------------------ тест */

.qbar {
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
  font-family:var(--f-mono); font-size:0.82rem; color:var(--ink-soft);
  padding-bottom:0.8rem; border-bottom:1px solid var(--rule); margin-bottom:1.6rem;
}
#timer.low { color:var(--fail); font-weight:500; }

.qtext { font-family:var(--f-display); font-size:1.2rem; font-weight:600; line-height:1.4; margin:0 0 1.4rem; text-wrap:balance; }

.options { display:grid; gap:0.55rem; margin-bottom:1.6rem; }
.options label {
  display:grid; grid-template-columns:1.7rem 1fr; gap:0.6rem; align-items:start;
  padding:0.9rem 1.1rem; border:1px solid var(--rule); background:var(--paper);
  cursor:pointer;
}
.options label:hover { border-color:var(--accent); background:var(--accent-wash); }
.options input { margin:0.25rem 0 0; }
.options .ltr { font-family:var(--f-mono); font-size:0.85rem; color:var(--ink-soft); }
.options input:checked ~ .ltr { color:var(--accent); font-weight:500; }

/* -------------------------------------------------------------- результат */

.score { font-family:var(--f-mono); font-size:2.6rem; line-height:1; font-variant-numeric:tabular-nums; }
.score.ok { color:var(--pass); }
.score.no { color:var(--fail); }

/* ----------------------------------------------------------------- бланк */

@media print {
  body { background:#fff; color:#000; }
  .noprint { display:none !important; }
  .card { border:none; padding:0; }
  .wrap { padding:0; max-width:none; }
}
.sig { display:grid; grid-template-columns:repeat(auto-fit,minmax(11rem,1fr)); gap:1.6rem 2.4rem; margin-top:2rem; }
.sig .line { border-bottom:1px solid var(--rule); height:2.2rem; }
.sig .lbl { font-family:var(--f-display); font-size:0.64rem; letter-spacing:0.13em; text-transform:uppercase; color:var(--ink-faint); }

/* ----------------------------------------------------------------- шапка */

.topbar {
  display:flex; flex-wrap:wrap; gap:0.6rem 1.4rem; align-items:baseline;
  padding-bottom:1rem; border-bottom:1px solid var(--rule); margin-bottom:1.8rem;
}
.topbar nav { margin-left:auto; display:flex; gap:1.2rem; font-family:var(--f-display); font-size:0.85rem; }

/* ------------------------------------------------------- разбор попытки */

.qrow { border:1px solid var(--rule-soft); padding:1.1rem 1.2rem; background:var(--paper); }
.qrow.bad { border-left:3px solid var(--fail); }
.qhead { display:flex; flex-wrap:wrap; align-items:center; gap:0.5rem 0.7rem; margin-bottom:0.6rem; }
.qhead .m { font-family:var(--f-mono); font-size:0.85rem; color:var(--ink-faint); min-width:1.6rem; }
.qq { font-family:var(--f-display); font-weight:600; font-size:1rem; line-height:1.4; margin:0 0 0.8rem; }

.opts { list-style:none; margin:0; padding:0; display:grid; gap:0.3rem; }
.opts li {
  display:grid; grid-template-columns:1.5rem 1fr auto; gap:0.5rem; align-items:baseline;
  padding:0.5rem 0.7rem; font-size:0.93rem; border:1px solid transparent;
}
.opts .ltr { font-family:var(--f-mono); font-size:0.82rem; color:var(--ink-faint); }
.opts .mark {
  font-family:var(--f-display); font-size:0.62rem; font-weight:600;
  letter-spacing:0.12em; text-transform:uppercase; white-space:nowrap; color:var(--ink-faint);
}
.opts li.is-correct { background:var(--pass-wash); border-color:var(--pass); }
.opts li.is-correct .ltr, .opts li.is-correct .mark { color:var(--pass); }
.opts li.is-given { background:var(--fail-wash); border-color:var(--fail); }
.opts li.is-given .ltr, .opts li.is-given .mark { color:var(--fail); }
.opts li.is-correct.is-given { background:var(--pass-wash); border-color:var(--pass); }
.opts li.is-correct.is-given .ltr, .opts li.is-correct.is-given .mark { color:var(--pass); }

@media (max-width:34rem) {
  .opts li { grid-template-columns:1.5rem 1fr; }
  .opts .mark { grid-column:2; }
}

/* --------------------------------------------------- анкета и договоры */

.field { display:grid; gap:0.35rem; margin-bottom:1.1rem; }
.field label { font-family:var(--f-display); font-size:0.8rem; font-weight:600; color:var(--ink-soft); }
.field .hint { font-family:var(--f-display); font-size:0.78rem; color:var(--ink-faint); }
.field .badge { justify-self:start; }

.grid2 { display:grid; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); gap:0 1.8rem; }

input[type=file] { font-family:var(--f-display); font-size:0.85rem; max-width:24rem; }

textarea {
  width:100%; font-family:var(--f-mono); font-size:0.8rem; line-height:1.55;
  padding:0.9rem; border:1px solid var(--rule); background:var(--paper); color:var(--ink);
  resize:vertical;
}

/* Договор показываем моноширинным: в шаблоне значима каждая колонка */
.doc {
  font-family:var(--f-mono); font-size:0.82rem; line-height:1.7; white-space:pre-wrap;
  background:var(--paper); border:1px solid var(--rule);
  padding:clamp(1.1rem,3vw,2.2rem); max-height:62vh; overflow-y:auto;
}
.doc.full { max-height:none; overflow:visible; }

.agree {
  display:grid; grid-template-columns:1.5rem 1fr; gap:0.6rem; align-items:start;
  padding:1rem 1.1rem; border:1px solid var(--rule); background:var(--ground); cursor:pointer;
}
.agree input { margin:0.3rem 0 0; }

.stamp {
  font-family:var(--f-mono); font-size:0.76rem; line-height:1.8; color:var(--ink-soft);
  border-top:1px solid var(--rule); margin-top:1.6rem; padding-top:1rem;
}
.stamp .hashline { word-break:break-all; }