/* Аттестация PLEADA — надстройка над Табло.
   Принцип тот же: хром нейтральный, цвет только на данных (результат, статус, тема). */

/* Логотип — вордмарк PLEADA (вектор из бренд-набора), не эмодзи. */
.logo-pleada{height:17px;width:auto;display:block;color:var(--ink);flex-shrink:0}
.brand{display:flex;flex-direction:column;align-items:flex-start;gap:5px}
.brand-sub{font-size:11px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-4)}
.auth-brand{display:flex;flex-direction:column;align-items:flex-start;gap:7px;margin-bottom:16px}
.auth-brand .logo-pleada{height:21px}
.auth-brand-sub{font-size:11.5px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-4)}
.nav-sep{font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  color:var(--ink-4);padding:14px 12px 6px}
.side-foot .me-name{font-weight:600;color:var(--ink);font-size:13px}
.side-foot .me-role{font-size:12px;color:var(--ink-3);margin-top:2px}
.side-foot .me-acts{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap}
.ver{font-size:11px;color:var(--ink-4);margin-top:10px}
.who{font-size:13px;color:var(--ink-3)}

/* ------------------------------------------------------------ вход */
.auth{min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:var(--bg);padding:24px}
.auth-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card);
  box-shadow:var(--shadow-md);padding:32px;width:100%;max-width:400px}
.auth-card.wide{max-width:480px}
.auth-brand{font-size:19px;font-weight:600;color:var(--ink);display:flex;align-items:center;
  gap:9px;margin-bottom:8px}
.auth-sub{font-size:13px;color:var(--ink-3);line-height:1.55;margin:0 0 20px}
.auth-go{width:100%;margin-top:6px;justify-content:center}
.auth-alt{margin-top:18px;padding-top:16px;border-top:1px solid var(--border-2);
  font-size:13px;color:var(--ink-3)}
.auth-alt a{color:var(--ink);font-weight:600}
.auth-foot{margin-top:14px;font-size:12px;color:var(--ink-4);line-height:1.6}
.steps{display:flex;gap:8px;margin:0 0 16px;font-size:11.5px;font-weight:600}
.steps span{padding:4px 10px;border-radius:var(--r-pill);background:#F4F4F5;color:var(--ink-4)}
.steps span.on{background:var(--ink);color:#fff}
.steps span.done{background:var(--ok-bg);color:var(--ok)}

.field{display:block;margin-bottom:14px}
.field>span{display:block;font-size:12px;font-weight:600;color:var(--ink-2);margin-bottom:6px}
.field input,.field select,.field textarea{width:100%;padding:10px 12px;border:1px solid var(--border);
  border-radius:var(--r-btn);font-family:var(--font);font-size:14px;color:var(--ink);
  background:var(--surface);box-sizing:border-box}
.field textarea{font-family:var(--font);line-height:1.55;resize:vertical}
.field textarea.mono{font-family:var(--font-mono);font-size:12px}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--ink);
  box-shadow:0 0 0 3px rgba(0,0,0,.06)}
.field small{display:block;font-size:11.5px;color:var(--ink-4);margin-top:5px;line-height:1.5}
.field small.warn{color:var(--hot)}
.field small.ok-hint{color:var(--ok)}
.field.hidden{display:none}
.form-col{max-width:420px}
.form-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.form-row input,.form-row select{padding:9px 11px;border:1px solid var(--border);
  border-radius:var(--r-btn);font-family:var(--font);font-size:13px}
.form-row input{min-width:150px}
form.inline{display:inline}

.flashes{margin-bottom:16px}
.flash{padding:11px 14px;border-radius:var(--r-btn);font-size:13px;margin-bottom:8px;
  border:1px solid transparent;line-height:1.5}
.flash.good{background:var(--ok-bg);color:#15803D;border-color:#BBF7D0}
.flash.bad{background:var(--cold-bg);color:var(--cold);border-color:#FECACA}

/* ------------------------------------------------------------ общее */
.narrow{max-width:520px}
.split-2{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
.card{margin-bottom:16px}
.lead{font-size:15px;color:var(--ink-2);line-height:1.6;margin:0 0 12px}
/* Табло красит .note в сиреневый — у нас цвет только на данных, поэтому нейтрализуем. */
.note{display:block;background:#FAFAFA;border:1px solid var(--border-2);border-radius:var(--r-btn);
  padding:13px 15px;font-size:13px;color:var(--ink-2);line-height:1.65;margin:0 0 14px}
.note b{color:var(--ink)}
.hint{font-size:12px;color:var(--ink-4);line-height:1.6;margin-top:10px}
.hint-inline{font-size:11.5px;color:var(--ink-4)}
.empty{padding:26px;text-align:center;color:var(--ink-4);font-size:13px}
.act-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:14px}
.act-row.center{justify-content:center;margin:20px 0}
.acts{white-space:nowrap}
.acts form{margin-right:4px}
.nowrap{white-space:nowrap}
.vtag{font-family:var(--font-mono);font-size:10.5px;color:var(--ink-4);margin-left:6px}
.of{font-size:15px;color:var(--ink-4);font-weight:500}
tr.dim{opacity:.5}
tr.clickable{cursor:pointer}
tr.clickable:hover{background:#FAFAFA}
.err-code{font-size:44px;font-weight:600;color:var(--ink-4);margin-bottom:8px}
.pill.hot{background:var(--hot-bg);color:var(--hot)}
.pill.cold{background:var(--cold-bg);color:var(--cold)}
.btn-big{padding:13px 26px;font-size:15px}
.mx-sub{display:block;font-size:11px;color:var(--ink-4);font-weight:400}

.banner{display:flex;align-items:center;gap:14px;background:var(--warm-bg);
  border:1px solid #FDE68A;border-radius:var(--r-card);padding:14px 16px;margin-bottom:16px;
  font-size:13.5px;color:#92400E;line-height:1.5}
.banner .btn{margin-left:auto;flex-shrink:0}

/* ------------------------------------------------------------ карточки тестов */
.tgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:14px}
.tcard{border:1px solid var(--border);border-radius:var(--r-card);padding:16px;
  background:var(--surface);display:flex;flex-direction:column;gap:8px}
.tcard.passed{border-left:3px solid var(--ok)}
.tcard.failed{border-left:3px solid var(--cold)}
.tcard.todo{border-left:3px solid var(--warm)}
.tcard-h{display:flex;align-items:center;gap:8px}
.tcard-score{margin-left:auto;font-size:18px;font-weight:600;color:var(--ink)}
.tcard-t{font-size:15px;font-weight:600;color:var(--ink);text-decoration:none;line-height:1.4}
.tcard-t:hover{text-decoration:underline}
.tcard-sub{font-size:12.5px;color:var(--ink-3);line-height:1.5}
.tcard-meta{display:flex;flex-wrap:wrap;gap:10px;font-size:11.5px;color:var(--ink-4)}
.tcard-when{font-size:11.5px;color:var(--ink-4)}
.tcard-acts{display:flex;gap:6px;flex-wrap:wrap;margin-top:auto;padding-top:8px}

.prep{margin:0;padding-left:20px;font-size:13.5px;color:var(--ink-2);line-height:1.9}
.prep a{color:var(--ink);font-weight:600}
/* display:table — иначе .kv из Табло (flex) ломает разметку таблицы */
table.kv{display:table;width:100%;font-size:13px;margin-bottom:14px}
table.kv tr{display:table-row}
table.kv td{display:table-cell}
table.kv td{padding:7px 0;border-bottom:1px solid var(--border-2)}
table.kv td:first-child{color:var(--ink-3)}
table.kv td:last-child{text-align:right;font-weight:600;color:var(--ink)}

/* ------------------------------------------------------------ материал */
.mat{font-size:14.5px;line-height:1.7;color:var(--ink-2);max-width:760px}
.mat h2{font-size:19px;color:var(--ink);margin:26px 0 12px;font-weight:600}
.mat h3{font-size:16px;color:var(--ink);margin:22px 0 10px;font-weight:600}
.mat h4,.mat h5{font-size:14.5px;color:var(--ink);margin:16px 0 8px;font-weight:600}
.mat h3.mat-point,.mat h4.mat-point{display:flex;gap:10px;align-items:baseline;
  background:#FAFAFA;border-left:3px solid var(--ink);padding:11px 14px;border-radius:0 8px 8px 0;
  margin:26px 0 12px}
.mat-num{font-family:var(--font-mono);font-size:12px;color:#fff;background:var(--ink);
  min-width:22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;
  justify-content:center;flex-shrink:0}
.mat p{margin:0 0 12px}
.mat-ul{margin:0 0 14px;padding-left:20px}
.mat-ul li{margin-bottom:7px}
.mat-hr{border:none;border-top:1px solid var(--border-2);margin:22px 0}
.mat strong{color:var(--ink)}
.mat code{font-family:var(--font-mono);font-size:12.5px;background:#F4F4F5;padding:1px 5px;
  border-radius:var(--r-sm)}

/* ------------------------------------------------------------ прохождение */
.runbar{position:sticky;top:0;z-index:20;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-card);padding:12px 16px;margin-bottom:16px;display:flex;
  align-items:center;gap:14px;font-size:13px;color:var(--ink-3);box-shadow:var(--shadow)}
.runbar b{color:var(--ink)}
.runbar-bar{flex:1;height:5px;background:#F1F1F1;border-radius:99px;overflow:hidden;min-width:80px}
.runbar-bar i{display:block;height:100%;background:var(--ink);transition:width .2s}
.timer{font-size:16px;font-weight:600;color:var(--ink);padding:4px 10px;background:#F4F4F5;
  border-radius:var(--r-btn)}
.timer.low{background:var(--cold-bg);color:var(--cold)}

.card.q{border-left:3px solid var(--border)}
.card.q.done{border-left-color:var(--ink)}
.q-top{display:flex;align-items:center;gap:9px;margin-bottom:10px;flex-wrap:wrap}
.q-num{font-size:12px;font-weight:600;color:#fff;background:var(--ink);min-width:22px;height:22px;
  border-radius:50%;display:inline-flex;align-items:center;justify-content:center}
.q-kind{font-size:11.5px;color:var(--ink-4)}
.q-weight{font-size:11.5px;color:var(--ink-4);margin-left:auto}
.q-text{font-size:15.5px;color:var(--ink);line-height:1.55;font-weight:500;margin-bottom:14px}
.opts{display:flex;flex-direction:column;gap:2px}
.opt{display:flex;gap:11px;align-items:flex-start;padding:11px 13px;border-radius:var(--r-btn);
  cursor:pointer;font-size:14px;color:var(--ink-2);line-height:1.5;border:1px solid transparent}
.opt:hover{background:#FAFAFA}
.opt input{margin-top:3px;flex-shrink:0;accent-color:#171717;width:16px;height:16px}
.opt:has(input:checked){background:#F4F4F5;border-color:var(--border);color:var(--ink)}
.card.q textarea{width:100%;padding:12px;border:1px solid var(--border);border-radius:var(--r-btn);
  font-family:var(--font);font-size:14px;line-height:1.6;box-sizing:border-box;resize:vertical}
.card.q textarea:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(0,0,0,.06)}
.submit-row{display:flex;flex-direction:column;align-items:center;gap:10px;margin:26px 0 40px}
.warn-line{font-size:12.5px;color:var(--hot)}

/* ------------------------------------------------------------ результат */
.verdict{display:flex;align-items:center;gap:22px;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--r-card);padding:22px 24px;margin-bottom:16px;
  box-shadow:var(--shadow)}
.verdict.good{border-left:4px solid var(--ok)}
.verdict.bad{border-left:4px solid var(--cold)}
.verdict-score{text-align:center;min-width:104px}
.vs-num{font-size:40px;font-weight:600;color:var(--ink);line-height:1}
.vs-grade{font-size:11.5px;color:var(--ink-4);margin-top:5px}
.vb-title{font-size:17px;font-weight:600;color:var(--ink);margin-bottom:5px}
.vb-sub{font-size:12.5px;color:var(--ink-3);line-height:1.65}
.verdict form{margin-left:auto}

.topics{width:100%;font-size:13px}
.topics td{padding:7px 0;border-bottom:1px solid var(--border-2)}
.tp-name{color:var(--ink-2);font-weight:500}
.tp-bar{width:210px}
.tp-raw{color:var(--ink-4);font-size:11.5px;text-align:right}
.topics .tnum{text-align:right;font-weight:600;color:var(--ink);width:56px}

.rev{border:1px solid var(--border);border-radius:var(--r-card);padding:15px 17px;margin-bottom:11px}
.rev.ok{border-left:3px solid var(--ok);background:#FCFEFC}
.rev.part{border-left:3px solid var(--warm);background:#FFFDF8}
.rev.bad{border-left:3px solid var(--cold);background:#FFFCFC}
.rev-h{display:flex;gap:10px;align-items:baseline}
.rev-mark{font-weight:700;font-size:15px;flex-shrink:0}
.rev.ok .rev-mark{color:var(--ok)} .rev.part .rev-mark{color:var(--warm)}
.rev.bad .rev-mark{color:var(--cold)}
.rev-q{font-size:14.5px;color:var(--ink);font-weight:500;line-height:1.5}
.rev-pts{margin-left:auto;font-size:12.5px;color:var(--ink-3);flex-shrink:0}
.rev-topic{margin:7px 0 0 25px}
.rev-cols{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:11px 0 0 25px}
.rc-lab{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;
  color:var(--ink-4);margin-bottom:5px}
.rev-col ul{margin:0;padding-left:16px;font-size:13.5px;color:var(--ink-2);line-height:1.6}
.rev-col li{margin-bottom:3px}
.rev-col.right li.hit{color:var(--ok)}
.rev-col.right li.miss{color:var(--cold)}
.rev-why{margin:11px 0 0 25px;font-size:13px;color:var(--ink-2);line-height:1.6;
  background:#FAFAFA;padding:10px 13px;border-radius:var(--r-btn)}
.rev-why b{color:var(--ink)}

/* ------------------------------------------------------------ карточки-тренажёр */
.cardgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.fcard{border:1px solid var(--border);border-radius:var(--r-card);background:var(--surface);
  padding:16px;cursor:pointer;transition:box-shadow .15s,border-color .15s}
.fcard:hover{box-shadow:var(--shadow-md)}
.fcard.open{border-color:var(--ink)}
.fc-q{font-size:14.5px;color:var(--ink);font-weight:500;line-height:1.5;margin:9px 0}
.fc-hint{font-size:11px;color:var(--ink-4)}
.fcard.open .fc-hint{display:none}
.fc-a{display:none;margin-top:12px;padding-top:12px;border-top:1px solid var(--border-2)}
.fcard.open .fc-a{display:block}
.fc-a ul{margin:0;padding-left:17px;font-size:13.5px;color:var(--ok);line-height:1.6;font-weight:500}
.fc-why{margin-top:9px;font-size:12.5px;color:var(--ink-3);line-height:1.6}

/* ------------------------------------------------------------ панель РОПа */
.matrix .mx-th{font-size:11px;line-height:1.35;min-width:96px;vertical-align:bottom}
.mx-pass{color:var(--ink-4);font-weight:400}
.mx-name{font-weight:600;color:var(--ink);min-width:180px}
.mx-name a{color:var(--ink);text-decoration:none}
.mx-name a:hover{text-decoration:underline}
.mx-cell{text-align:center}
.mx-val{display:inline-block;font-weight:600;font-size:13.5px;padding:2px 8px;
  border-radius:var(--r-pill)}
.mx-val.good{background:var(--ok-bg);color:var(--ok)}
.mx-val.bad{background:var(--cold-bg);color:var(--cold)}
.mx-none{color:var(--ink-4)}
.matrix td.tnum{text-align:right;font-weight:600}

.hardest{margin:0;padding-left:20px;font-size:13.5px}
.hardest li{margin-bottom:13px;line-height:1.5}
.hd-top{display:flex;gap:8px;align-items:center;margin-bottom:4px;flex-wrap:wrap}
.hd-top .tnum{font-weight:600;font-size:14px}
.hd-top .bad{color:var(--cold)}
.hd-n{font-size:11px;color:var(--ink-4)}
.hd-q{color:var(--ink-2)}

.filterbar{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card);
  padding:12px 14px;margin-bottom:16px}
.fb-row{display:flex;gap:9px;flex-wrap:wrap;align-items:center}
.fb-row select{padding:8px 11px;border:1px solid var(--border);border-radius:var(--r-btn);
  font-family:var(--font);font-size:13px;color:var(--ink);background:var(--surface)}
.fb-count{margin-left:auto;font-size:12px;color:var(--ink-4)}

.pending-row{display:flex;align-items:center;gap:14px;padding:11px 0;
  border-bottom:1px solid var(--border-2);font-size:13.5px;flex-wrap:wrap}
.pending-row .act-row{margin:0;margin-left:auto}

.dr-sub{font-size:12px;color:var(--ink-3);font-weight:400}
.dr-kv{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:13px;margin-bottom:12px}
.dr-kv span{color:var(--ink-3)}
.dr-kv b{color:var(--ink);font-weight:600}
.dr-a{border-left:3px solid var(--border);padding:9px 0 9px 11px;margin-bottom:9px}
.dr-a.ok{border-left-color:var(--ok)} .dr-a.part{border-left-color:var(--warm)}
.dr-a.bad{border-left-color:var(--cold)}
.dr-a-h{display:flex;gap:8px;align-items:baseline;font-size:13px;color:var(--ink);
  font-weight:500;line-height:1.45}
.dr-a-h .mono{margin-left:auto;font-size:11.5px;color:var(--ink-3);flex-shrink:0}
.dr-a-b{font-size:12.5px;color:var(--ink-2);margin-top:4px;line-height:1.5}
.dr-a-b i{color:var(--ink-4);font-style:normal;font-size:11px;text-transform:uppercase;
  letter-spacing:.03em}
.dr-a-b.right{color:var(--ok)}

.spec{margin-top:14px;font-size:12.5px}
.spec summary{cursor:pointer;color:var(--ink-3);font-weight:600}
.spec pre{background:#FAFAFA;border:1px solid var(--border-2);border-radius:var(--r-btn);
  padding:14px;overflow-x:auto;font-size:11.5px;line-height:1.6;color:var(--ink-2);margin-top:10px}

/* ------------------------------------------------------------ адаптив */
@media (max-width:900px){
  .split-2,.rev-cols{grid-template-columns:1fr}
  .verdict{flex-wrap:wrap;gap:14px}
  .verdict form{margin-left:0;width:100%}
  .rev-cols,.rev-topic,.rev-why{margin-left:0}
}
@media (max-width:640px){
  .auth-card{padding:24px}
  .runbar{flex-wrap:wrap}
  .tgrid,.cardgrid{grid-template-columns:1fr}
}
@media print{
  .sidebar,.topbar,.act-row,.btn{display:none !important}
  .content{margin:0}
  .card,.rev,.verdict{break-inside:avoid;box-shadow:none}
}