/* Кабинет «Факт» — техно-версия по макету 08.09 (design_handoff_fakt_cabinet).
 * Правило цвета: циан = можно нажать / выбрано; лайм · оранжевый · красный = только статус. */
:root {
  --bg:#0b0d10; --card:rgba(18,21,26,.86); --card-soft:rgba(18,21,26,.6); --line:rgba(255,255,255,.09); --line2:rgba(255,255,255,.065);
  --ink:#e6ebf2; --ink2:#9aa5b4; --ink3:#8b95a3; --mono-ink:#c3ccd8; --mute:#7c8798; --mute2:#6f7a89;
  --cy:#57dae5; --cy-ink:#bff2f7; --cy-hover:#8ce9f1; --cy-bg:rgba(87,218,229,.14); --cy-line:rgba(87,218,229,.6); --cy-glow:inset 0 0 22px rgba(87,218,229,.16);
  --ok:#9ee66b; --late:#ff8a4c; --late-ink:#ffb287; --dead:#ff6b5e; --dead-ink:#ff9c92;
  --sans:"Space Grotesk",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
}
*, *::before, *::after { box-sizing:border-box; }
[hidden] { display:none !important; }
html { color-scheme:dark; }
body { margin:0; background:var(--bg); color:var(--ink); font:15px/1.5 var(--sans); -webkit-font-smoothing:antialiased;
  background-image:linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px); background-size:44px 44px; }
a { color:var(--cy); text-decoration:none; } a:hover { color:var(--cy-hover); }
:focus-visible { outline:1px solid var(--cy); outline-offset:2px; }
::selection { background:rgba(87,218,229,.28); }
@keyframes fk-blink { 0%,100% { opacity:1; } 50% { opacity:.18; } }
@keyframes fk-rise { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
.wrap { max-width:1320px; margin:0 auto; padding:20px 24px 80px; }
.mono { font-family:var(--mono); }
.kicker { font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--mute); }
.kicker.cy { color:var(--cy); } .kicker.warn { color:var(--late-ink); } .kicker.orange { color:var(--late); }
h1.big { font-size:38px; font-weight:600; margin:0; letter-spacing:-.025em; line-height:1.1; }
h2.mid { font-size:22px; font-weight:600; margin:0; letter-spacing:-.015em; }
.lead { color:var(--ink2); margin-top:6px; font-size:14px; }
.small { font-size:12.5px; } .tiny { font-size:12px; } .muted { color:var(--mute); } .muted2 { color:var(--mute2); } .ink2 { color:var(--ink2); } .ink3 { color:var(--ink3); }
.ok { color:var(--ok); } .late { color:var(--late); } .late-ink { color:var(--late-ink); } .dead { color:var(--dead); } .dead-ink { color:var(--dead-ink); } .cy-ink { color:var(--cy-ink); }
.card { border:1px solid var(--line); border-radius:12px; background:var(--card); padding:18px 20px; }
.card.pad0 { padding:0; overflow:hidden; }
.card.soft { background:var(--card-soft); }
.card.cy { border-color:rgba(87,218,229,.24); background:rgba(87,218,229,.05); }
.card.warn { border-color:rgba(255,138,76,.32); background:rgba(255,138,76,.07); }
.card.orange { border-color:rgba(255,138,76,.35); background:rgba(255,138,76,.06); }
.row { display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.row.top { align-items:flex-start; } .row.base { align-items:baseline; } .row.end { align-items:flex-end; }
.between { justify-content:space-between; }
.col { display:flex; flex-direction:column; gap:12px; }
.grow { flex:1 1 auto; min-width:0; }
.ml { margin-left:auto; }
.stack { display:flex; gap:18px; flex-wrap:wrap; align-items:flex-start; }
.stack > .main { flex:1 1 560px; min-width:0; }
.stack > .side { flex:0 1 340px; min-width:268px; display:flex; flex-direction:column; gap:14px; }
.stack > .side.narrow { flex:0 1 280px; min-width:240px; }
.mt8 { margin-top:8px; } .mt12 { margin-top:12px; } .mt16 { margin-top:16px; } .mt22 { margin-top:22px; } .mb12 { margin-bottom:12px; } .mb16 { margin-bottom:16px; } .mb18 { margin-bottom:18px; }
.ellipsis { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tab { font-variant-numeric:tabular-nums; }

/* шапка */
.hdr { display:flex; align-items:center; gap:24px; flex-wrap:wrap; padding:14px 18px; border:1px solid var(--line); border-radius:10px; background:var(--card); margin-bottom:20px; }
.logo-block { display:flex; align-items:center; gap:12px; }
.logo { width:34px; height:34px; border-radius:8px; border:1px solid rgba(87,218,229,.5); background:rgba(87,218,229,.1); display:flex; align-items:center; justify-content:center; flex:none; }
.logo i { width:10px; height:10px; border-radius:2px; background:var(--cy); box-shadow:0 0 12px var(--cy); }
.brand { font-family:var(--mono); font-weight:700; font-size:17px; letter-spacing:.18em; }
.sub { font-size:10.5px; letter-spacing:.1em; color:var(--mute); text-transform:uppercase; }
.hstat { margin-left:auto; display:flex; align-items:center; gap:18px; font-size:11px; letter-spacing:.1em; text-transform:uppercase; }
.hstat .st { display:flex; align-items:center; gap:8px; }
.hstat .st.ok { color:var(--ok); } .hstat .st.dead { color:var(--dead); }
.hstat .link { color:var(--mute); background:none; border:0; padding:0; font:inherit; letter-spacing:inherit; text-transform:inherit; cursor:pointer; }
.hstat .link:hover { color:var(--mono-ink); }
.blink { width:7px; height:7px; border-radius:999px; background:var(--ok); box-shadow:0 0 10px var(--ok); animation:fk-blink 1.6s steps(1,end) infinite; }
.blink.dead { background:var(--dead); box-shadow:0 0 10px var(--dead); animation:none; }

/* сегментированные группы: навигация, периоды, вид канала */
.seg { display:flex; gap:4px; padding:4px; border:1px solid var(--line); border-radius:10px; background:rgba(255,255,255,.02); flex-wrap:wrap; }
.seg button { display:flex; align-items:center; gap:9px; font-family:var(--mono); font-size:12px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; padding:9px 18px; border-radius:7px; cursor:pointer; border:1px solid transparent; background:transparent; color:var(--mute); transition:background .15s,color .15s; }
.seg button:hover { border-color:rgba(87,218,229,.45); }
.seg button .d { width:6px; height:6px; border-radius:1px; background:rgba(255,255,255,.22); }
.seg button.on { background:rgba(87,218,229,.16); border-color:rgba(87,218,229,.65); color:var(--cy-ink); box-shadow:var(--cy-glow); }
.seg button.on .d { background:var(--cy); box-shadow:0 0 10px var(--cy); }
.seg.sm button { font-size:11.5px; letter-spacing:.1em; padding:9px 15px; }
.seg.kinds button { border-color:rgba(255,255,255,.12); } .seg.kinds button.on { border-color:rgba(87,218,229,.65); }

/* кнопки */
.btn { font-family:var(--mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; padding:10px 16px; border-radius:8px; cursor:pointer; border:1px solid rgba(255,255,255,.14); background:transparent; color:var(--ink2); transition:background .15s; }
.btn:hover { background:rgba(255,255,255,.06); }
.btn.cy { border-color:var(--cy-line); background:var(--cy-bg); color:var(--cy-ink); box-shadow:var(--cy-glow); } .btn.cy:hover { background:rgba(87,218,229,.24); }
.btn.cy2 { border-color:rgba(87,218,229,.5); background:rgba(87,218,229,.12); color:var(--cy-hover); box-shadow:none; padding:9px 16px; } .btn.cy2:hover { background:rgba(87,218,229,.22); }
.btn.red { border-color:rgba(255,107,94,.3); color:var(--dead-ink); } .btn.red:hover { background:rgba(255,107,94,.12); }
.btn.orange { border-color:rgba(255,138,76,.55); background:rgba(255,138,76,.12); color:var(--late-ink); } .btn.orange:hover { background:rgba(255,138,76,.22); }
.btn.sm { font-size:10.5px; letter-spacing:.08em; padding:7px 12px; border-radius:6px; }
.btn.xs { font-size:10px; letter-spacing:.08em; padding:6px 10px; border-radius:6px; }
.btn.cy.sm { border-color:rgba(87,218,229,.45); background:rgba(87,218,229,.1); box-shadow:none; } .btn.cy.sm:hover { background:rgba(87,218,229,.2); }
.btn:disabled { opacity:.5; cursor:default; }
.linkbtn { font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; background:none; border:0; padding:0; color:var(--cy); cursor:pointer; }
.linkbtn:hover { color:var(--cy-hover); }
.pill { font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; padding:6px 11px; border-radius:999px; cursor:pointer; border:1px solid rgba(255,255,255,.14); background:transparent; color:var(--mute); }
.pill.on { border-color:rgba(158,230,107,.4); background:rgba(158,230,107,.12); color:var(--ok); }
.pill.md { font-size:10.5px; padding:7px 12px; }
.chip { font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; padding:5px 10px; border-radius:999px; cursor:pointer; border:1px solid rgba(255,255,255,.12); background:transparent; color:var(--mute2); }
.chip.on { border-color:var(--cy-line); background:var(--cy-bg); color:var(--cy-ink); }
.chips { display:flex; gap:6px; flex-wrap:wrap; align-items:center; }

/* поля */
.field { display:flex; flex-direction:column; gap:5px; }
.field > span { font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--mute); }
.input { font-family:var(--mono); font-size:12.5px; padding:9px 12px; border-radius:7px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.03); color:var(--ink); max-width:100%; }
.input.sans { font-family:var(--sans); font-size:13.5px; }
.input.num { width:96px; font-size:13px; text-align:right; padding:8px 10px; }
.input:focus { border-color:var(--cy-line); outline:none; }
.input.inline { width:100%; font-family:var(--sans); font-size:14px; font-weight:500; padding:7px 10px; border:1px solid transparent; background:transparent; }
.input.inline:hover { border-color:rgba(255,255,255,.14); background:rgba(255,255,255,.03); }
.input.inline:focus { border-color:var(--cy-line); background:rgba(255,255,255,.03); }
select.input { appearance:auto; }
.form { display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; }

/* очередь */
.quiet { border:1px solid rgba(158,230,107,.28); border-radius:12px; background:rgba(158,230,107,.05); padding:16px 22px; display:flex; gap:22px; flex-wrap:wrap; align-items:center; }
.quiet .big-dot { width:9px; height:9px; border-radius:999px; background:var(--ok); box-shadow:0 0 12px var(--ok); flex:none; animation:fk-blink 1.6s steps(1,end) infinite; }
.quiet .title { font-size:20px; font-weight:600; letter-spacing:-.01em; }
.quiet .sum { display:flex; gap:16px; flex-wrap:wrap; font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; }
.callcard { border-radius:12px; padding:20px 22px; background:var(--card); border:1px solid var(--line); animation:fk-rise .3s ease both; }
.callcard.late { background:rgba(255,138,76,.09); border-color:rgba(255,138,76,.45); box-shadow:inset 0 0 40px rgba(255,138,76,.08); }
.callcard .state { font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; margin-bottom:7px; color:var(--ok); }
.callcard.late .state { color:var(--late); }
.callcard .place { font-size:22px; font-weight:600; line-height:1.2; letter-spacing:-.01em; }
.callcard .meta { font-family:var(--mono); font-size:11.5px; color:var(--ink3); margin-top:6px; }
.callcard .timer { font-family:var(--mono); font-weight:700; font-size:42px; line-height:1; font-variant-numeric:tabular-nums; color:var(--ok); text-shadow:0 0 22px rgba(158,230,107,.25); }
.callcard.late .timer { color:var(--late); text-shadow:0 0 22px rgba(255,138,76,.4); }
.callcard .under { font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--mute); margin-top:5px; }
.bar { height:6px; border-radius:3px; background:rgba(255,255,255,.07); overflow:hidden; margin-top:16px; }
.bar > i { display:block; height:100%; border-radius:3px; background:var(--ok); box-shadow:0 0 12px rgba(158,230,107,.45); transition:width 1s linear; }
.callcard.late .bar > i { background:var(--late); box-shadow:0 0 12px rgba(255,138,76,.6); }
.bar.thin { height:4px; border-radius:2px; margin-top:14px; } .bar.thin > i { background:var(--cy); box-shadow:0 0 12px rgba(87,218,229,.6); }
.state-list { display:flex; flex-direction:column; gap:9px; font-family:var(--mono); font-size:11.5px; }
.state-list .it { display:flex; gap:9px; align-items:center; }
.state-list .dot { width:6px; height:6px; border-radius:999px; flex:none; background:rgba(255,255,255,.25); }
.state-list .dot.sq { border-radius:1px; }
.state-list .dot.ok { background:var(--ok); box-shadow:0 0 8px var(--ok); } .state-list .dot.late { background:var(--late); box-shadow:0 0 8px var(--late); } .state-list .dot.dead { background:var(--dead); box-shadow:0 0 8px var(--dead); }
.state-list .hr { height:1px; background:var(--line2); margin:4px 0; }

/* отчёт */
.tiles { display:grid; grid-template-columns:repeat(auto-fit,minmax(168px,1fr)); gap:12px; margin-bottom:20px; }
.tile { border:1px solid var(--line); border-radius:10px; background:var(--card); padding:16px 18px; }
.tile b { display:block; font-family:var(--mono); font-weight:700; font-size:27px; line-height:1.05; font-variant-numeric:tabular-nums; }
.tile span { display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--mute); margin-top:7px; text-wrap:pretty; }
.tile.ok { border-color:rgba(158,230,107,.28); background:rgba(158,230,107,.07); } .tile.ok b { color:var(--ok); }
.tile.bad { border-color:rgba(255,138,76,.32); background:rgba(255,138,76,.08); } .tile.bad b { color:var(--late); }
.places { display:flex; flex-direction:column; gap:2px; }
.prow { cursor:pointer; padding:11px 12px; border-radius:8px; }
.prow:hover { background:rgba(87,218,229,.08); } .prow.open { background:rgba(87,218,229,.1); }
.prow .line { display:flex; gap:14px; align-items:baseline; }
.prow .caret { font-family:var(--mono); font-size:12px; color:var(--cy); width:13px; flex:none; }
.prow .name { flex:1 1 auto; min-width:0; font-size:14.5px; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.prow .med { font-family:var(--mono); font-size:11.5px; color:var(--mute); flex:none; }
.prow .st { font-family:var(--mono); font-size:11.5px; flex:none; min-width:118px; text-align:right; }
.prow .n { font-family:var(--mono); font-weight:700; font-size:17px; flex:none; min-width:32px; text-align:right; font-variant-numeric:tabular-nums; }
.sbar { margin:9px 0 0 27px; height:5px; border-radius:3px; background:rgba(255,255,255,.06); overflow:hidden; display:flex; }
.sbar i { display:block; height:100%; } .sbar .ok { background:var(--ok); } .sbar .late { background:var(--late); } .sbar .dead { background:var(--dead); }
.detail { border:1px solid rgba(87,218,229,.22); border-radius:10px; background:rgba(87,218,229,.05); padding:13px 15px; margin:6px 0 10px 27px; }
.detail .th { display:flex; gap:12px; font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--mute); padding-bottom:8px; }
.detail .scroll { max-height:172px; overflow-y:auto; scrollbar-width:thin; scrollbar-color:rgba(87,218,229,.35) transparent; }
.detail .tr { display:flex; gap:12px; align-items:baseline; padding:7px 0; border-top:1px solid var(--line2); font-family:var(--mono); font-size:12.5px; font-variant-numeric:tabular-nums; }
.detail .c1 { flex:1 1 auto; color:var(--mono-ink); } .detail .c2 { width:86px; flex:none; color:var(--mute); } .detail .c3 { width:116px; flex:none; text-align:right; } .detail .c4 { width:70px; flex:none; text-align:right; color:var(--mute); }
.legend { display:flex; gap:16px; flex-wrap:wrap; margin-top:16px; font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--mute); }
.legend span { display:flex; align-items:center; gap:7px; } .legend i { width:8px; height:8px; border-radius:1px; display:inline-block; }
.bars { display:flex; align-items:flex-end; gap:5px; height:132px; }
.bars .b { flex:1 1 0; min-width:0; display:flex; flex-direction:column; justify-content:flex-end; gap:6px; height:100%; }
.bars .v { min-height:2px; border-radius:3px; background:#4f8f6b; display:flex; flex-direction:column; justify-content:flex-end; overflow:hidden; }
.bars .v i { display:block; background:var(--late); }
.bars .l { font-family:var(--mono); font-size:9.5px; color:var(--mute2); text-align:center; white-space:nowrap; overflow:hidden; }

/* таблицы настроек и администратора */
.thead { display:flex; gap:12px; padding:14px 20px; border-bottom:1px solid var(--line2); font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--mute); }
.trow { display:flex; gap:12px; align-items:center; padding:10px 20px; border-top:1px solid rgba(255,255,255,.06); }
.trow:hover { background:rgba(255,255,255,.03); }
.trow.all { background:rgba(87,218,229,.04); border-top:0; }
.trow.all:hover { background:rgba(87,218,229,.04); }
.trow.pad13 { padding:13px 20px; }
.tfoot { padding:14px 20px; border-top:1px solid var(--line2); display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.c-place { flex:1 1 200px; min-width:0; } .c-chan { flex:1 1 210px; } .c-54 { width:54px; flex:none; text-align:right; } .c-132 { width:132px; flex:none; text-align:right; } .c-82 { width:82px; flex:none; display:flex; justify-content:center; } .c-64 { width:64px; flex:none; display:flex; justify-content:flex-end; }
.addr { display:block; font-family:var(--mono); font-size:10.5px; color:var(--mute2); padding:0 10px; margin-top:1px; }
.num12 { font-family:var(--mono); font-size:12px; font-variant-numeric:tabular-nums; color:var(--mono-ink); }
.seen { font-family:var(--mono); font-size:11px; color:var(--ink3); line-height:1.35; }
.dlist .it { display:flex; gap:14px; align-items:center; padding:13px 0; border-top:1px solid rgba(255,255,255,.06); flex-wrap:wrap; }
.dlist .dot { width:7px; height:7px; border-radius:999px; flex:none; background:rgba(255,255,255,.2); }
.dlist .dot.ok { background:var(--ok); box-shadow:0 0 8px var(--ok); } .dlist .dot.dead { background:var(--dead); box-shadow:0 0 8px var(--dead); }
.dlist .nm { display:block; font-size:14.5px; font-weight:500; }
.dlist .wh { display:block; font-family:var(--mono); font-size:11px; color:var(--mute2); margin-top:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dlist .stt { font-family:var(--mono); font-size:11.5px; flex:none; min-width:120px; text-align:right; }
.spoiler-btn { width:100%; display:flex; gap:12px; align-items:center; padding:14px 20px; background:none; border:0; cursor:pointer; text-align:left; font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--mute); }
.spoiler-btn:hover { color:var(--mono-ink); }
.spoiler-btn .caret { color:var(--cy); width:12px; }
.mesh .it { display:flex; gap:10px; align-items:center; padding:11px 0; border-top:1px solid rgba(255,255,255,.06); }
.code { font-family:var(--mono); font-size:11px; line-height:1.6; color:var(--ok); background:var(--bg); border:1px solid var(--line); border-radius:8px; padding:12px 13px; word-break:break-all; user-select:all; }
.codes pre { font-family:var(--mono); font-size:11.5px; color:var(--mono-ink); line-height:1.7; white-space:pre-line; margin:0; }
.bigcode { font-family:var(--mono); font-weight:700; font-size:26px; letter-spacing:.16em; color:#ffd0b0; margin:6px 0 14px; }

/* вход */
.login { max-width:420px; margin:56px auto 0; }
.login .logo-block { margin-bottom:22px; }
.login .col { gap:14px; }
.login .input { font-size:15px; padding:11px 13px; width:100%; }
.login .code { font-size:24px; letter-spacing:.3em; text-align:center; color:var(--ink); background:rgba(255,255,255,.03); user-select:auto; }
.login .btn { padding:12px 18px; }
.login .alt { margin-top:22px; padding-top:16px; border-top:1px solid var(--line2); display:flex; gap:16px; flex-wrap:wrap; }

/* тост */
.toast { position:fixed; left:50%; transform:translateX(-50%); bottom:24px; background:#12151a; border:1px solid rgba(87,218,229,.4); color:#d8e2ec; padding:12px 20px; border-radius:9px; font-size:12.5px; box-shadow:0 12px 32px rgba(0,0,0,.5); z-index:9; max-width:86vw; }
.toast.bad { border-color:rgba(255,107,94,.5); }
.viewas { border:1px solid rgba(255,138,76,.45); background:rgba(255,138,76,.09); color:var(--late-ink); padding:8px 14px; border-radius:8px; font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-bottom:16px; }

@media (max-width:720px) {
  .wrap { padding:12px 12px 60px; }
  h1.big { font-size:28px; }
  .callcard .timer { font-size:34px; }
  .thead { display:none; }
  .trow { flex-wrap:wrap; }
  .c-54, .c-132 { width:auto; text-align:left; }
  .hstat { margin-left:0; }
}