:root{
  --bg:#0d0d0f; --panel:#16161a; --panel2:#1c1c22; --border:#2a2a30;
  --acc:#ff6b35; --acc2:#ffa600; --txt:#e8e8ea; --mut:#9a9aa2; --ok:#3ecf8e; --err:#ff5d5d;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--txt);
  font-family:'Inter',system-ui,Arial,sans-serif;font-size:14px;line-height:1.5}
a{color:var(--acc);text-decoration:none}
a:hover{text-decoration:underline}
.dev-banner{background:linear-gradient(90deg,#3a1a00,#241000);color:var(--acc2);
  text-align:center;padding:6px;font-size:12px;border-bottom:1px solid var(--border)}
header{display:flex;align-items:center;gap:18px;padding:14px 26px;
  background:var(--panel);border-bottom:1px solid var(--border)}
header .brand{font-weight:700;font-size:17px;color:#fff}
header .brand span{color:var(--acc)}
header nav{display:flex;gap:16px;margin-left:10px}
header nav a{color:var(--mut);font-weight:500}
header nav a:hover{color:var(--txt)}
header .right{margin-left:auto;color:var(--mut);font-size:13px;display:flex;gap:14px;align-items:center}
.wrap{max-width:1180px;margin:24px auto;padding:0 24px}
.card{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:20px;margin-bottom:18px}
h1{font-size:22px;margin:0 0 4px} h2{font-size:16px;margin:0 0 12px}
.muted{color:var(--mut)} .small{font-size:12px}
.flash{padding:10px 14px;border-radius:10px;margin-bottom:12px}
.flash.ok{background:#10301f;color:var(--ok);border:1px solid #1d5236}
.flash.err{background:#3a1414;color:var(--err);border:1px solid #5c2020}
.btn{display:inline-block;background:var(--acc);color:#fff;border:none;border-radius:10px;
  padding:10px 18px;font-weight:600;cursor:pointer;font-size:14px}
.btn:hover{background:#ff7d4d;text-decoration:none}
.btn.sec{background:transparent;border:1px solid var(--border);color:var(--txt)}
.btn.sec:hover{border-color:var(--acc);background:transparent}
.btn.sm{padding:6px 12px;font-size:13px}
input[type=text],input[type=email],input[type=password],textarea,select{
  background:var(--panel2);border:1px solid var(--border);color:var(--txt);
  border-radius:9px;padding:9px 11px;font-size:14px;width:100%;font-family:inherit}
textarea{min-height:48px;resize:vertical}
label{display:block;color:var(--mut);font-size:12px;margin-bottom:5px}
table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--border);font-size:13px;vertical-align:top}
th{color:var(--mut);font-weight:600}
.gauge{display:flex;align-items:center;gap:18px}
.gauge .num{font-size:40px;font-weight:800;color:var(--acc);line-height:1}
.bar{height:12px;background:var(--panel2);border-radius:8px;overflow:hidden;flex:1;border:1px solid var(--border)}
.bar > i{display:block;height:100%;background:linear-gradient(90deg,var(--acc),var(--acc2))}
.pill{display:inline-block;padding:2px 9px;border-radius:20px;font-size:11px;font-weight:600;border:1px solid var(--border)}
.pill.s-draft{color:var(--mut)} .pill.s-on_validation{color:var(--acc2);border-color:#5a3d00}
.pill.s-returned{color:var(--err);border-color:#5c2020} .pill.s-validated{color:#6ca8ff;border-color:#1f3a5c}
.pill.s-approved{color:var(--ok);border-color:#1d5236}
.mode-tag{font-size:11px;padding:2px 9px;border-radius:20px;border:1px solid var(--border);color:var(--acc2)}
.metric-area{margin-top:18px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--acc);font-weight:700}
.metric{border:1px solid var(--border);border-radius:11px;padding:14px;margin:10px 0;background:var(--panel2)}
.metric .top{display:flex;gap:10px;align-items:baseline;justify-content:space-between}
.metric .name{font-weight:600}
.wbadge{font-size:11px;color:var(--mut);border:1px solid var(--border);border-radius:6px;padding:1px 7px;margin-left:6px}
.levels{display:flex;gap:6px;margin:10px 0;flex-wrap:wrap}
.levels .lv{flex:1;min-width:90px;border:1px solid var(--border);border-radius:9px;padding:8px;cursor:pointer;background:var(--panel);font-size:12px}
.levels .lv input{display:none}
.levels .lv.sel{border-color:var(--acc);box-shadow:0 0 0 1px var(--acc) inset}
.levels .lv b{color:var(--acc2)}
.levels.ro .lv{cursor:default;opacity:.55}.levels.ro .lv.sel{opacity:1}
.beforeafter{display:flex;gap:14px;align-items:center;font-size:12px;color:var(--mut);margin-top:6px}
.auto-tag{font-size:11px;color:var(--acc2);border:1px solid #5a3d00;border-radius:6px;padding:1px 7px}
.loginbox{max-width:420px;margin:8vh auto}
.codebig{font-size:30px;letter-spacing:.3em;color:var(--acc);font-weight:800;text-align:center;
  background:var(--panel2);border:1px dashed var(--acc);border-radius:10px;padding:14px;margin:12px 0}
.dyn{font-variant-numeric:tabular-nums}
.spark{display:flex;gap:3px;align-items:flex-end;height:30px}
.spark i{width:8px;background:var(--acc);border-radius:2px;opacity:.85}
.spark i.gap{background:var(--border);height:4px;opacity:.5}

/* header hat switch */
header .hat{display:flex;border:1px solid var(--border);border-radius:9px;overflow:hidden}
header .hat a{padding:6px 12px;color:var(--mut);font-size:12px;font-weight:600}
header .hat a:hover{text-decoration:none;color:var(--txt)}
header .hat a.on{background:var(--acc);color:#fff}
header .who{font-size:12px}

.head-row{display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap}
.head-row .actions{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.actions-bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.acc{color:var(--acc)}
.nowrap{white-space:nowrap}

/* dashboard grid — выровненная сетка */
.dash{overflow-x:auto}
table.grid{table-layout:fixed}
table.grid th,table.grid td{vertical-align:top}
.grid .c-name{width:30%} .grid .c-mode{width:104px}
.grid .c-q{width:108px} .grid .c-dyn{width:90px}
.grid td.c-q{text-align:left}
.qval{font-size:18px;font-weight:800;color:var(--acc);line-height:1.1}
.qval.plan{color:var(--acc2);font-size:15px}
.qval.empty{color:var(--mut);font-weight:400}
.qband{font-size:11px;color:var(--mut);margin:2px 0 5px;min-height:14px}
.qval .hist{font-size:10px;color:var(--acc2);vertical-align:super;margin-left:2px}

/* tabs */
.tabs{display:flex;gap:6px;margin:0 0 16px}
.tabs .tab{padding:9px 16px;border:1px solid var(--border);border-radius:10px;color:var(--mut);font-weight:600;background:var(--panel)}
.tabs .tab:hover{color:var(--txt);text-decoration:none}
.tabs .tab.on{background:var(--acc);color:#fff;border-color:var(--acc)}

/* login steps */
.login-steps{margin:0 0 16px;padding-left:20px;color:var(--txt);font-size:13px}
.login-steps li{margin:6px 0}

/* пустой реестр процессов */
.empty-proc{padding:22px;text-align:center;color:var(--mut);border:1px dashed var(--border);border-radius:10px;margin:6px 0}

/* легенда цветов флагов */
.flag-legend{display:flex;gap:20px;flex-wrap:wrap;font-size:12px;color:var(--mut);margin:6px 0 12px}
.flag-legend .lg{display:inline-block;width:14px;height:14px;border-radius:4px;vertical-align:middle;margin-right:6px}
.flag-legend .lg-cur{background:#ff6b35}
.flag-legend .lg-inh{background:#4493c8}

/* checklist */
.checklist{display:grid;grid-template-columns:1fr 1fr;gap:8px 18px;margin:6px 0}
.checklist .chk{display:flex;align-items:flex-start;gap:10px;color:var(--txt);font-size:13px;line-height:1.3}
.checklist .chk input{flex:none;margin-top:1px}

/* унаследованный (заблокированный из прошлых кварталов) флаг — синий */
input[type=checkbox].inh:checked{background:#4493c8;border-color:#4493c8}
input[type=checkbox].inh{cursor:not-allowed}

/* таблица пользователей — обычная раскладка (не fixed), действия справа */
table.utable{width:100%;border-collapse:collapse}
table.utable th,table.utable td{padding:8px 10px;vertical-align:top;border-bottom:1px solid var(--border);text-align:left}
table.utable td.uacts{white-space:nowrap;text-align:right}
table.utable td.uacts .btn{padding:5px 9px;font-size:12px}
table.utable td.uacts form{display:inline}

/* методика */
.formula{font-size:18px;font-weight:700;color:var(--acc);background:var(--panel2);
  border:1px solid var(--border);border-radius:9px;padding:12px 16px;margin:8px 0;text-align:center}
.bandbar{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
.bandchip{display:flex;align-items:center;gap:8px;border:1px solid;border-radius:999px;padding:6px 12px;font-size:13px}
.bandchip .dot{width:12px;height:12px;border-radius:50%;display:inline-block}

/* checkboxes — кастомные, чёткие: пустой = контур, отмеченный = оранжевый квадрат с белой галочкой */
input[type=checkbox]{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  width:20px;height:20px;border:1.5px solid #5a5a64;border-radius:5px;
  background:#0e0e11;cursor:pointer;position:relative;vertical-align:middle;margin:0;flex:none}
input[type=checkbox]:checked{background:#ff6b35;border-color:#ff6b35}
input[type=checkbox]:checked::after{
  content:"";position:absolute;left:6px;top:2px;width:5px;height:10px;
  border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
input[type=checkbox]:disabled{opacity:.9;cursor:default}

/* process register */
.regwrap{overflow-x:auto}
table.proc{border-collapse:collapse;width:max-content;font-size:12px}
table.proc th,table.proc td{border-bottom:1px solid var(--bd);padding:6px 5px}
table.proc th.proc-name{text-align:left;vertical-align:bottom;min-width:210px}
table.proc th.vert{writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap;
  height:165px;vertical-align:bottom;text-align:left;font-size:11px;color:var(--mut);
  font-weight:600;line-height:1.1;padding:6px 3px}
table.proc td.name{text-align:left;min-width:210px}
table.proc td.ck{text-align:center}

/* drill-down ссылка в дашборде */
.deplink{color:inherit;text-decoration:none}
.deplink:hover{color:#ff6b35;text-decoration:underline}

/* виджет динамики индекса по кварталам */
.qtrend{margin-top:16px;border-top:1px solid var(--bd);padding-top:14px}
.qtrend-bars{display:flex;gap:10px;align-items:flex-end}
.qt{flex:1;max-width:110px;display:flex;flex-direction:column;align-items:center;gap:5px}
.qt-bar{width:100%;height:64px;background:#1e1e24;border-radius:6px;display:flex;align-items:flex-end;overflow:hidden}
.qt-bar i{display:block;width:100%;background:linear-gradient(#ffa600,#ff6b35);border-radius:6px 6px 0 0;min-height:2px}
.qt.cur .qt-bar i{box-shadow:inset 0 0 0 2px rgba(255,255,255,.25)}
.qt-val{font-size:13px;font-weight:700}
.qt.cur .qt-val{color:#ff6b35}
.qt-lab{font-size:11px;color:var(--mut)}
.newproc{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.newproc input{max-width:240px}

/* stats row */
.statrow{display:flex;gap:18px;align-items:flex-end;margin-top:8px}
.statrow .pctin input{max-width:120px}
.statrow .lvval{font-size:22px;font-weight:800;line-height:1.2}
.userform .row3{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:12px}
@media(max-width:760px){.userform .row3,.checklist{grid-template-columns:1fr}}