/* MAMORA: ретро-терминал 80-х, красное на чёрном и зелёное свечение люминофора */
:root{
  --bg:#040605; --panel:#070d09; --panel2:#0a130d;
  --line:#16301f; --line2:#25573a;
  --g:#3dff7a; --g2:#1fae52; --text:#c9f0d4; --muted:#6c9679;
  --red:#ff2e4d; --red2:#a3162b; --amber:#ffb000; --cyan:#4de1ff;
  --glow:0 0 6px rgba(61,255,122,.55),0 0 20px rgba(61,255,122,.18);
  --glow-r:0 0 6px rgba(255,46,77,.65),0 0 24px rgba(255,46,77,.28);
  --mono:ui-monospace,"Cascadia Mono","JetBrains Mono","SF Mono",Menlo,Consolas,"Liberation Mono","Courier New",monospace;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html,body{margin:0;min-height:100%}
body{
  background:var(--bg);color:var(--text);font:14px/1.55 var(--mono);-webkit-font-smoothing:antialiased;
  background-image:
    radial-gradient(1100px 560px at 50% -12%,rgba(61,255,122,.08),transparent 62%),
    radial-gradient(900px 520px at 105% 112%,rgba(255,46,77,.08),transparent 60%);
  background-attachment:fixed;
}
body.lock{overflow:hidden}
::selection{background:var(--g);color:#001a08}
a{color:var(--g)}
code{color:var(--g);background:rgba(61,255,122,.08);padding:0 5px;border-radius:3px}

/* ЭЛТ: линии развёртки, виньетка, редкое мерцание */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:900;
  background:repeating-linear-gradient(to bottom,rgba(0,0,0,0) 0,rgba(0,0,0,0) 2px,rgba(0,0,0,.2) 3px);
}
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:901;
  background:radial-gradient(ellipse at center,rgba(0,0,0,0) 55%,rgba(0,0,0,.6) 100%);
  animation:flicker 7s infinite;
}
body.nofx::before,body.nofx::after{display:none}
body.nofx *{animation:none !important}
@keyframes flicker{0%,90%,100%{opacity:1}91%{opacity:.82}92%{opacity:1}95%{opacity:.9}96%{opacity:1}}
@keyframes blink{50%{opacity:0}}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(61,255,122,.6)}70%{box-shadow:0 0 0 7px rgba(61,255,122,0)}}
@keyframes shake{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(4px)}30%,50%,70%{transform:translateX(-7px)}40%,60%{transform:translateX(7px)}}
@keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){*{animation:none !important;transition:none !important}}

/* логотип с глитчем */
.logo{position:relative;display:inline-block;font-weight:800;letter-spacing:.2em;color:var(--g);text-shadow:var(--glow);line-height:1}
.logo::before,.logo::after{content:attr(data-text);position:absolute;left:0;top:0;width:100%;overflow:hidden}
.logo::before{color:var(--red);text-shadow:none;animation:g1 3.4s infinite steps(1)}
.logo::after{color:var(--cyan);text-shadow:none;animation:g2 2.9s infinite steps(1)}
@keyframes g1{0%,84%,100%{clip-path:inset(0 0 100% 0);transform:translate(0)}85%{clip-path:inset(8% 0 58% 0);transform:translate(-4px,1px)}88%{clip-path:inset(62% 0 10% 0);transform:translate(4px,-1px)}91%{clip-path:inset(30% 0 44% 0);transform:translate(-2px,0)}93%{clip-path:inset(0 0 100% 0)}}
@keyframes g2{0%,70%,100%{clip-path:inset(0 0 100% 0);transform:translate(0)}71%{clip-path:inset(50% 0 20% 0);transform:translate(4px,0)}74%{clip-path:inset(12% 0 66% 0);transform:translate(-4px,1px)}77%{clip-path:inset(0 0 100% 0)}}
.tag{color:var(--muted);letter-spacing:.14em;text-transform:uppercase;font-size:11px}
.tag b{color:var(--red);font-weight:700;text-shadow:var(--glow-r)}
.cur::after{content:"█";margin-left:4px;color:var(--g);animation:blink 1.05s steps(2) infinite}

/* окна */
.win{position:relative;background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--line);border-top:2px solid var(--g2);padding:16px 18px;margin-bottom:16px;box-shadow:0 10px 40px rgba(0,0,0,.55),inset 0 0 40px rgba(61,255,122,.025);animation:rise .35s both}
.win.red{border-top-color:var(--red)}
.wt{display:flex;align-items:center;gap:10px;justify-content:space-between;flex-wrap:wrap;margin:-2px 0 14px;text-transform:uppercase;letter-spacing:.14em;font-size:12px;color:var(--g);text-shadow:var(--glow)}
.wt .l::before{content:"▌";color:var(--red);margin-right:8px;text-shadow:var(--glow-r)}
h3{margin:20px 0 8px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600}

/* формы */
label{display:block;margin:12px 0 5px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
input,textarea,select{width:100%;padding:9px 11px;background:#030704;color:var(--text);border:1px solid var(--line2);border-radius:0;font:inherit;caret-color:var(--g);outline:none;transition:border-color .15s,box-shadow .15s}
input::placeholder,textarea::placeholder{color:#3f6150}
input:focus,textarea:focus,select:focus{border-color:var(--g);box-shadow:var(--glow)}
textarea{resize:vertical}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--g) 50%),linear-gradient(135deg,var(--g) 50%,transparent 50%);background-position:calc(100% - 17px) 55%,calc(100% - 12px) 55%;background-size:5px 5px;background-repeat:no-repeat;padding-right:30px}
select option{background:#050a07;color:var(--text)}
input[type=checkbox]{width:16px;height:16px;appearance:none;padding:0;border:1px solid var(--g2);background:#030704;display:inline-grid;place-content:center;cursor:pointer}
input[type=checkbox]:checked{background:var(--g);box-shadow:var(--glow)}
input[type=checkbox]:checked::after{content:"✓";color:#001a08;font-size:12px;font-weight:800;line-height:1}

button{position:relative;padding:8px 15px;background:transparent;color:var(--g);border:1px solid var(--g2);border-radius:0;font:inherit;font-size:12px;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;transition:background .15s,box-shadow .15s,color .15s,border-color .15s}
button:hover:not(:disabled){background:rgba(61,255,122,.12);box-shadow:var(--glow);color:#eafff1}
button:active:not(:disabled){transform:translateY(1px)}
button:focus-visible{outline:1px dashed var(--g);outline-offset:3px}
button:disabled{opacity:.4;cursor:default}
button.primary{background:var(--g);color:#001a08;border-color:var(--g);font-weight:800}
button.primary:hover:not(:disabled){background:#7dffa5;color:#001a08;box-shadow:var(--glow)}
button.danger{color:var(--red);border-color:var(--red2)}
button.danger:hover:not(:disabled){background:rgba(255,46,77,.14);box-shadow:var(--glow-r);color:#ffd0d8}
button.small{padding:4px 10px;font-size:11px}
button.ghost{border-color:var(--line2);color:var(--muted)}

.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.between{justify-content:space-between}
.end{justify-content:flex-end}
.grow{flex:1;min-width:170px}
.sel{width:auto;min-width:190px}
.muted{color:var(--muted);font-size:12px}
.ok{color:var(--g)} .bad,.err{color:var(--red)} .warn{color:var(--amber)}
.msg{min-height:1.5em;margin-top:10px;font-size:13px}
.hint{color:var(--muted);font-size:12px;margin-top:6px}

/* таблицы */
.wide{overflow-x:auto}
table{width:100%;border-collapse:collapse}
th{text-align:left;padding:7px 8px;font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--line2);white-space:nowrap}
td{padding:9px 8px;border-bottom:1px dashed var(--line);vertical-align:middle}
tbody tr{transition:background .12s}
tbody tr:hover{background:rgba(61,255,122,.045)}
tr:last-child td{border-bottom:0}
.empty{text-align:center;color:var(--muted);padding:22px 0;letter-spacing:.08em}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:8px;background:var(--muted);vertical-align:middle}
.dot.ok{background:var(--g);box-shadow:0 0 8px var(--g)}
.dot.bad{background:var(--red);box-shadow:0 0 8px var(--red)}
.dot.warn{background:var(--amber);box-shadow:0 0 8px var(--amber);animation:pulse 1.4s infinite}
.badge{display:inline-block;margin-left:6px;padding:0 7px;font-size:10px;letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--line2);color:var(--muted);vertical-align:middle}
.badge.accent{border-color:var(--red2);color:var(--red);background:rgba(255,46,77,.08)}

/* окно просмотра и диалог подтверждения */
.modal{position:fixed;inset:0;z-index:500;display:flex;align-items:flex-start;justify-content:center;padding:5vh 12px;overflow:auto;background:rgba(0,0,0,.84);backdrop-filter:blur(2px)}
.modal .win{width:100%;max-width:780px;margin:0;border-top-color:var(--red);animation:rise .22s both}
.modal.ask{align-items:center}
.modal.ask .win{max-width:440px}
.dlg{display:flex;gap:12px;justify-content:space-between;padding:10px 8px;border-bottom:1px dashed var(--line);cursor:pointer;transition:background .12s}
.dlg:hover{background:rgba(61,255,122,.07)}
.dlg .t{color:#eafff1;font-weight:700}
.dlg .p{color:var(--muted);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:46ch}
.dlg .r{text-align:right;white-space:nowrap;font-size:11px;color:var(--muted)}
.unread{display:inline-block;min-width:20px;margin-top:4px;padding:0 6px;background:var(--red);color:#fff;font-size:11px;text-align:center;box-shadow:var(--glow-r)}
.chat{display:flex;flex-direction:column;gap:6px;margin-top:12px}
.bub{max-width:84%;padding:7px 11px;white-space:pre-wrap;word-break:break-word}
.bub.in{align-self:flex-start;border-left:3px solid var(--g2);background:rgba(61,255,122,.05)}
.bub.out{align-self:flex-end;border-right:3px solid var(--red);background:rgba(255,46,77,.07)}
.bub .meta{margin-top:3px;font-size:10px;letter-spacing:.06em;color:var(--muted)}
.bub .meta .auto{color:var(--red)}
.bub .who{font-size:11px;color:var(--g);font-weight:700}
.hist{padding:10px 0;border-bottom:1px dashed var(--line)}
.hist:last-child{border-bottom:0}
.hist .h{font-size:11px;color:var(--muted)}
.hist .tx{white-space:pre-wrap;word-break:break-word;margin:3px 0}

/* уведомления */
#toasts{position:fixed;right:16px;bottom:16px;z-index:800;display:flex;flex-direction:column;gap:8px;max-width:min(420px,calc(100vw - 32px))}
.toast{padding:10px 14px;background:#050a07;border:1px solid var(--g2);border-left:4px solid var(--g);color:var(--text);font-size:13px;box-shadow:0 8px 30px rgba(0,0,0,.6);animation:rise .25s both;transition:opacity .35s}
.toast.bad,.toast.err{border-color:var(--red2);border-left-color:var(--red);box-shadow:0 8px 30px rgba(0,0,0,.6),var(--glow-r)}
.toast.out{opacity:0}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:700px){.grid2{grid-template-columns:1fr}}