@import url(fonts/fonts.css);
:root{
  --bg:#0A0A0A; --bg-2:#111111; --panel:#161616; --panel-2:#1E1E1E; --line:#2A2A2A; --line-2:#3A3A3A;
  --ink:#FFFFFF; --ink-2:#CFCFCF; --muted:#8F8F8F;
  --acid:#7AE000; --acid-ink:#0A0A0A; --acid-soft:rgba(122,224,0,.12);
  --coral:#FF8562; --coral-soft:rgba(255,133,98,.14);
  --amber:#F2B233; --blue:#6FB7FF;
  --r:18px; --r-s:12px;
  --head:'Unbounded',system-ui,sans-serif; --body:'Jost',-apple-system,'Segoe UI',Arial,sans-serif; --hand:'Caveat',cursive;
}
*{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.5;
  -webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.07;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
body>*{position:relative;z-index:1}
h1,h2,h3,.head{font-family:var(--head);font-weight:900;text-transform:uppercase;letter-spacing:-.01em;line-height:1.05;margin:0}
h2{font-size:clamp(22px,4vw,30px)} h3{font-size:17px;font-weight:700}
p{margin:0 0 12px}
a{color:var(--acid)}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--acid);outline-offset:3px;border-radius:8px}
.hand{font-family:var(--hand);font-weight:600;color:var(--ink);font-size:1.5em;line-height:1}
.muted{color:var(--muted)} .small{font-size:14px} .tiny{font-size:12.5px}
.acid{color:var(--acid)} .coral{color:var(--coral)}
.hide{display:none!important}

/* шапка */
.top{display:flex;align-items:center;gap:14px;padding:14px 22px;border-bottom:1px solid var(--line);position:sticky;top:0;background:rgba(10,10,10,.88);backdrop-filter:blur(10px);z-index:20}
.logo{display:inline-flex;align-items:center;font-family:var(--head);font-weight:900;font-size:14px;letter-spacing:.02em;
  background:var(--acid);color:var(--acid-ink);padding:6px 12px 6px 10px;transform:skew(-8deg);border-radius:3px;text-decoration:none}
.logo span{transform:skew(8deg);display:inline-block}
.top .sp{flex:1}
.top .who{font-size:14px;color:var(--muted)}
@media(max-width:600px){.top{padding:12px 16px}}

.wrap{max-width:760px;margin:0 auto;padding:34px 22px 90px}
.wide{max-width:1240px}
@media(max-width:600px){.wrap{padding:24px 16px 70px}}

/* кнопки */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:99px;cursor:pointer;
  font-family:var(--head);font-weight:700;font-size:13.5px;letter-spacing:.02em;text-transform:uppercase;
  padding:15px 24px;background:var(--acid);color:var(--acid-ink);text-decoration:none;transition:transform .12s, filter .12s}
.btn:hover{filter:brightness(1.08)} .btn:active{transform:scale(.98)}
.btn[disabled]{opacity:.4;cursor:not-allowed}
.btn.ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line-2)}
.btn.ghost:hover{border-color:var(--ink)}
.btn.coral{background:var(--coral);color:#1A0B05}
.btn.sm{padding:9px 14px;font-size:11.5px}
.btn.block{width:100%}
.arrow::after{content:"↗";font-family:var(--body);font-weight:700;font-size:1.25em;line-height:0}
.link{background:none;border:0;color:var(--acid);cursor:pointer;padding:0;text-decoration:underline;text-underline-offset:3px}

/* карточки */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:24px 26px;margin-bottom:16px}
@media(max-width:600px){.card{padding:20px 18px}}
.card.acid{border-color:var(--acid);box-shadow:0 0 0 1px var(--acid) inset}
.lbl{display:block;font-family:var(--head);font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--acid);margin-bottom:10px}
.lbl.coral{color:var(--coral)} .lbl.muted{color:var(--muted)}

/* поля */
.field{display:block;margin-bottom:14px}
.field>span{display:block;font-size:14px;color:var(--ink-2);margin-bottom:6px}
.inp{width:100%;background:var(--bg-2);border:1.5px solid var(--line-2);border-radius:var(--r-s);padding:13px 15px;font-size:16px;outline:none}
.inp:focus{border-color:var(--acid)}
textarea.inp{min-height:90px;resize:vertical;line-height:1.45}
.row{display:flex;gap:12px;flex-wrap:wrap} .row>*{flex:1 1 200px}
.check{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;color:var(--ink-2);cursor:pointer}
.check input{width:20px;height:20px;accent-color:var(--acid);margin-top:2px;flex:none}
.err{color:var(--coral);font-size:14.5px;min-height:1.2em;margin:6px 0}

/* чипы и сегменты */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:1.5px solid var(--line-2);background:transparent;border-radius:99px;padding:9px 15px;cursor:pointer;font-size:15px}
.chip:hover{border-color:var(--ink)}
.chip.on{background:var(--acid);color:var(--acid-ink);border-color:var(--acid);font-weight:600}
.seg{display:inline-flex;border:1.5px solid var(--line-2);border-radius:99px;overflow:hidden}
.seg button{border:0;background:transparent;padding:8px 13px;cursor:pointer;min-width:40px;font-weight:600}
.seg button+button{border-left:1px solid var(--line)}
.seg button.on{background:var(--acid);color:var(--acid-ink)}

/* плашки статусов */
.tag{display:inline-block;font-size:12px;font-weight:600;padding:3px 9px;border-radius:99px;background:var(--panel-2);color:var(--ink-2);white-space:nowrap}
.tag.ok{background:var(--acid-soft);color:var(--acid)} .tag.warn{background:rgba(242,178,51,.14);color:var(--amber)}
.tag.bad{background:var(--coral-soft);color:var(--coral)} .tag.blue{background:rgba(111,183,255,.14);color:var(--blue)}

/* всплывашка */
#toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);opacity:0;transition:.25s;z-index:999;
  background:var(--ink);color:var(--bg);padding:12px 18px;border-radius:12px;font-weight:600;font-size:15px;max-width:90vw;pointer-events:none}
#toast.on{opacity:1;transform:translateX(-50%)}

/* полосы */
.bar{height:10px;border-radius:99px;background:var(--panel-2);overflow:hidden;position:relative}
.bar>i{position:absolute;left:0;top:0;bottom:0;border-radius:99px;background:var(--acid)}
.bar>i.b{background:var(--coral)}

/* таблицы */
.tbl{width:100%;border-collapse:collapse;font-size:14.5px}
.tbl th{font-weight:600;color:var(--muted);text-align:left;font-size:12.5px;text-transform:uppercase;letter-spacing:.06em;padding:10px 10px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--panel)}
.tbl td{padding:11px 10px;border-bottom:1px solid var(--line);vertical-align:top}
.tbl tr.click{cursor:pointer} .tbl tr.click:hover td{background:var(--panel-2)}
.num{font-variant-numeric:tabular-nums;text-align:right}

/* модалка */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.72);z-index:60;display:flex;align-items:flex-start;justify-content:center;padding:40px 16px;overflow:auto}
.modal>.box{background:var(--bg-2);border:1px solid var(--line-2);border-radius:var(--r);width:100%;max-width:880px;padding:26px 28px;position:relative}
.modal .x{position:absolute;right:14px;top:12px;background:none;border:0;font-size:26px;color:var(--muted);cursor:pointer}

/* ---------- видео ---------- */
.vstage{position:relative;flex:1;min-height:0;background:#050505}
.vstage video.remote{width:100%;height:100%;object-fit:cover;display:block;background:#050505}
.vstage video.self{position:absolute;right:10px;bottom:10px;width:26%;max-width:180px;aspect-ratio:4/3;object-fit:cover;border-radius:10px;border:1.5px solid rgba(255,255,255,.3);transform:scaleX(-1);background:#222}
.vstage .vmsg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:20px;color:var(--ink-2);font-size:15px}
.vdot{width:9px;height:9px;border-radius:50%;background:var(--muted);flex:none}
.vdot.on{background:var(--acid);box-shadow:0 0 0 3px var(--acid-soft)} .vdot.wait{background:var(--amber)}
*{scrollbar-color:var(--line-2) transparent;scrollbar-width:thin}
.btn[disabled]{background:var(--panel-2);color:var(--muted);opacity:1}
@media(max-width:600px){.top>.small{display:none}.top .who{max-width:40vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}
::-webkit-scrollbar{width:8px;height:8px} ::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:8px} ::-webkit-scrollbar-thumb:hover{background:var(--muted)}

/* подвал: ссылка на персональные данные на каждой странице */
.foot{padding:22px;text-align:center;font-size:13px;border-top:1px solid var(--line)}
.foot a{color:var(--muted)}