:root{--bg0:#081018;--panel:rgba(14,24,34,.74);--panel2:rgba(255,255,255,.04);--line:rgba(255,255,255,.08);
--ink:#e9eff4;--mute:#8da2b2;--acc:#f5a524;--acc2:#ffcf6e;--ok:#3ddc84;--bad:#ff5d5d;--warn:#ffc24b;--info:#5cc8ff;
--bggrad:radial-gradient(1100px 600px at 80% -10%,rgba(245,165,36,.16),transparent 60%),radial-gradient(900px 500px at -10% 110%,rgba(92,200,255,.12),transparent 60%),linear-gradient(160deg,#0a141d,#0d1d29 50%,#081018)}
*{box-sizing:border-box}
[hidden]{display:none!important}   /* иначе .chip/.row отменят hidden */
html,body{margin:0}
body{font-family:'Segoe UI',system-ui,-apple-system,Roboto,Arial,sans-serif;color:var(--ink);min-height:100vh;display:flex;flex-direction:column;background:var(--bg0);font-size:14px}
.bg{position:fixed;inset:-24px;z-index:-1;background:var(--bggrad);background-size:cover;filter:blur(8px) brightness(.85)}
a{color:var(--info);text-decoration:none}
/* ---------- горна лента ---------- */
.top{display:flex;align-items:center;gap:16px;padding:12px 18px;background:rgba(6,14,21,.72);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:12px;min-width:0}
/* логото на Cario е на бял фон – стои в бяла „табелка“ */
.logo{height:48px;min-width:48px;padding:5px 10px;border-radius:12px;background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.35),inset 0 0 0 1px rgba(0,0,0,.06);display:flex;align-items:center;justify-content:center;font-weight:800;color:#1a1a1a;font-size:16px;flex:none;overflow:hidden}
.logo img{height:36px;width:auto;display:block}
h1{font-size:16px;margin:0;font-weight:650;letter-spacing:.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sub{color:var(--mute);font-size:12.5px}
.clockbox{margin-left:auto;text-align:right}
.clock{font:600 22px/1 ui-monospace,'Cascadia Mono',Consolas,monospace;letter-spacing:1px}
.who{display:flex;align-items:center;gap:10px;color:var(--mute);font-size:13px}
.live{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--bad);vertical-align:middle;box-shadow:0 0 0 3px rgba(255,93,93,.15)}
.live.on{background:var(--ok);box-shadow:0 0 0 3px rgba(61,220,132,.18)}
/* ---------- табове ---------- */
.tabs{display:flex;gap:6px;padding:10px 18px;overflow-x:auto;position:sticky;top:0;z-index:5;background:rgba(6,14,21,.6);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.tab{background:transparent;border:1px solid transparent;color:var(--mute);padding:8px 14px;border-radius:999px;cursor:pointer;font-size:14px;white-space:nowrap}
.tab:hover{color:var(--ink);background:var(--panel2)}
.tab.on{color:#1b1206;background:var(--acc);font-weight:650}
main{flex:1;width:100%;max-width:1280px;margin:0 auto;padding:14px}
.pane{display:none}.pane.on{display:block}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(420px,1fr));gap:14px}
@media(max-width:480px){.grid2{grid-template-columns:1fr}.clock{font-size:18px}main{padding:10px}}
.card{background:var(--panel);backdrop-filter:blur(14px);border:1px solid var(--line);border-radius:16px;padding:16px;box-shadow:0 10px 30px rgba(0,0,0,.28);margin-bottom:14px}
.grid>.card,.grid2>.card{margin-bottom:0}
.card h3{margin:0;font-size:13px;color:var(--mute);text-transform:uppercase;letter-spacing:1.2px;font-weight:650}
.th{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px}
.hint{color:var(--mute);font-size:12.5px;line-height:1.45;margin:8px 0 0}
/* ---------- бутони и полета ---------- */
.btn,button{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.12);color:var(--ink);padding:9px 14px;border-radius:10px;cursor:pointer;font-size:14px;font-family:inherit;transition:filter .15s,transform .05s}
.btn:hover,button:hover{filter:brightness(1.18)}
.btn:active,button:active{transform:translateY(1px)}
.btn.ok{background:linear-gradient(180deg,#2fbf6f,#1f8f52);border-color:transparent;color:#fff}
.btn.bad{background:linear-gradient(180deg,#e2484d,#ac2a2f);border-color:transparent;color:#fff}
.btn.acc{background:linear-gradient(180deg,#ffb83d,#e0901a);border-color:transparent;color:#1b1206;font-weight:650}
.btn.ghost{background:transparent}
.btn.sm{padding:5px 10px;font-size:12.5px;border-radius:8px}
.btns{display:flex;gap:8px;margin-top:12px}.btns .btn{flex:1;padding:12px;font-size:15px}
input,select{background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.14);color:var(--ink);border-radius:9px;padding:7px 9px;font-size:14px;font-family:inherit;max-width:100%}
input:focus,select:focus{outline:none;border-color:var(--acc)}
input[type=checkbox]{width:17px;height:17px;accent-color:var(--acc);vertical-align:middle}
input[type=number]{width:78px}
label{cursor:pointer}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:8px 0}
.fld{display:flex;flex-direction:column;gap:4px;font-size:12.5px;color:var(--mute)}
.fld input,.fld select{color:var(--ink)}
table{width:100%;border-collapse:collapse;font-size:14px}
td,th{padding:7px 6px;border-bottom:1px solid var(--line);text-align:left}
th{color:var(--mute);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.8px}
/* ---------- състояния ---------- */
.ok{color:var(--ok)}.bad{color:var(--bad)}.warn{color:var(--warn)}.mut{color:var(--mute)}
.chip{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;background:var(--panel2);border:1px solid var(--line);font-size:12px;color:var(--mute);white-space:nowrap}
.chip.on{color:var(--ok);border-color:rgba(61,220,132,.35);background:rgba(61,220,132,.08)}
.chip.off{color:var(--bad);border-color:rgba(255,93,93,.35);background:rgba(255,93,93,.08)}
.chip.acc{color:var(--acc);border-color:rgba(245,165,36,.4);background:rgba(245,165,36,.08)}
.big{font-size:26px;font-weight:700;letter-spacing:.5px;margin:4px 0}
.next{display:flex;align-items:center;gap:8px;color:var(--mute);font-size:13px;margin-top:6px;min-height:20px}
.next b{color:var(--acc2);font-weight:600}
.alert{background:rgba(255,93,93,.1);border:1px solid rgba(255,93,93,.35);color:#ffb3b3;border-radius:10px;padding:8px 10px;font-size:13px;margin-top:8px}
.meta{display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px 12px;margin-top:12px;padding-top:10px;border-top:1px solid var(--line);color:var(--mute);font-size:12.5px}
.meta b{color:var(--ink)}
.kv{display:grid;grid-template-columns:auto 1fr;gap:7px 14px;font-size:13.5px}
.kv span:nth-child(odd){color:var(--mute)}
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:#46525c;margin-right:6px;vertical-align:middle}
.dot.on{background:var(--ok);box-shadow:0 0 10px rgba(61,220,132,.8)}
/* ---------- лампа ---------- */
.lampbox{display:flex;align-items:center;gap:16px}
.lamp{width:72px;height:72px;flex:none;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.04);border:1px solid var(--line);transition:all .4s}
.lamp svg{width:40px;height:40px}.lamp path{fill:#56626c;transition:fill .4s}
.lamp.on{background:radial-gradient(circle,rgba(255,207,110,.45),rgba(245,165,36,.08) 70%);border-color:rgba(255,207,110,.6);box-shadow:0 0 40px rgba(255,190,80,.35)}
.lamp.on path{fill:#ffd36b}
/* ---------- бариера ---------- */
.pair{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.gate{background:rgba(0,0,0,.22);border:1px solid var(--line);border-radius:12px;padding:8px 10px 10px;text-align:center}
.gate svg{width:100%;max-width:170px;height:auto;display:block;margin:0 auto}
.gate .post{fill:#3b4853}.gate .hub{fill:#d6dde3}
.gate .arm{transition:transform .9s cubic-bezier(.5,.1,.2,1)}
.gate .armb{fill:#f2f4f6}.gate .stripe{fill:#e2484d}
.gate.unk .armb{fill:#8a96a0}.gate.unk .stripe{fill:#5b6670}
.gate.mv .arm{animation:blink 1s infinite}
@keyframes blink{50%{opacity:.45}}
.gl{font-size:12px;color:var(--mute);margin-top:4px}
.gs{font-weight:700;font-size:14px}
.gate.op .gs{color:var(--ok)}.gate.cl .gs{color:var(--warn)}.gate.mv .gs{color:var(--info)}.gate.unk .gs{color:var(--mute)}
/* ---------- правила ---------- */
.rule{border:1px solid var(--line);border-radius:14px;padding:12px;margin:10px 0;background:rgba(0,0,0,.18)}
.rule.dis{opacity:.5}
.rule .rh{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.rule .rh input[type=text]{flex:1;min-width:150px;font-weight:600}
.rule .rg{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px 14px;margin-top:10px}
.rule .rg2{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px;margin-top:10px;padding:10px;border-radius:10px;background:rgba(255,255,255,.03)}
@media(max-width:700px){.rule .rg2{grid-template-columns:1fr}}
.pt .mut{font-size:12.5px}
.pt{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.pt select{max-width:190px}
.days{display:flex;gap:4px}
.days label{width:30px;height:30px;border-radius:8px;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--mute);user-select:none}
.days input{display:none}
.days label.on{background:rgba(245,165,36,.18);border-color:rgba(245,165,36,.5);color:var(--acc2)}
.today{font-size:12.5px;color:var(--mute);margin-top:8px}
.today b{color:var(--acc2)}
.tgt{font-size:11px;padding:2px 8px;border-radius:6px;font-weight:700;letter-spacing:.5px}
.tgt0{background:rgba(255,207,110,.15);color:var(--acc2)}.tgt1{background:rgba(92,200,255,.14);color:var(--info)}
.tgt2{background:rgba(61,220,132,.14);color:var(--ok)}.tgt3{background:rgba(190,140,255,.16);color:#c8a6ff}
/* ---------- времева линия ---------- */
.tl{margin:14px 0 16px;padding:12px 12px 6px;border:1px solid var(--line);border-radius:12px;background:rgba(0,0,0,.2)}
.tlr{display:grid;grid-template-columns:120px 1fr;align-items:center;gap:12px;margin:0 0 8px}
.tll{font-size:13px;font-weight:600}
.tlt{position:relative;height:26px;border-radius:7px;background:rgba(255,255,255,.05)}
.tlax .tlt{height:16px;background:none}
.tlax b{position:absolute;top:0;transform:translateX(-50%);font:600 11px ui-monospace,Consolas,monospace;color:var(--mute)}
.tlax b:first-child{transform:none}.tlax b:last-child{transform:translateX(-100%)}
.tln{position:absolute;top:0;bottom:0;background:rgba(40,60,120,.28);border-radius:7px}
.tls{position:absolute;top:4px;bottom:4px;border-radius:5px;display:flex;align-items:center;justify-content:center;overflow:hidden;min-width:2px}
.tls em{font:700 11px ui-monospace,Consolas,monospace;font-style:normal;color:#0b1520;white-space:nowrap}
.tl0{background:linear-gradient(180deg,#ffd36b,#f5a524)}.tl1{background:linear-gradient(180deg,#86d8ff,#3fb2f0)}
.tl2{background:linear-gradient(180deg,#6eeaa4,#2fbf6f)}.tl3{background:linear-gradient(180deg,#d5b8ff,#a77bf0)}
.tlw{top:10px;bottom:10px;background:rgba(255,255,255,.35)}
.tle{position:absolute;top:-3px;bottom:-3px;width:2px;margin-left:-1px;background:#fff;z-index:2}
.tle.off{background:var(--bad)}
.tle em{position:absolute;top:-15px;left:4px;font:700 10.5px ui-monospace,Consolas,monospace;font-style:normal;white-space:nowrap;color:var(--ink);background:rgba(6,14,21,.9);padding:0 4px;border-radius:4px}
.tlno{position:absolute;left:10px;top:5px;font-size:12px;color:var(--mute)}
.tlleg{display:flex;gap:16px;flex-wrap:wrap;font-size:12px;color:var(--mute);padding:4px 0 6px 132px}
.tlleg i{display:inline-block;width:14px;height:10px;border-radius:3px;margin-right:6px;vertical-align:middle}
.lg0{background:linear-gradient(90deg,#f5a524,#3fb2f0,#2fbf6f,#a77bf0)}.lgn{background:rgba(40,60,120,.6)}.lge{background:#fff;width:3px!important}
@media(max-width:700px){.tlr{grid-template-columns:80px 1fr}.tll{font-size:11.5px}.tlleg{padding-left:0}.tls em{display:none}}
/* ---------- графици: визуален изглед ---------- */
.daybar .dinfo{margin-left:auto;color:var(--mute);font-size:13.5px}.dinfo b{color:var(--ink);font-weight:600}
.legend{display:flex;flex-wrap:wrap;gap:6px 16px;margin:10px 0 0;font-size:12.5px;color:var(--mute)}
.legend i{display:inline-block;width:18px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.lg-on{background:linear-gradient(90deg,#f5a524,#3fb2f0,#2fbf6f,#a77bf0)}
.lg-der{background:repeating-linear-gradient(135deg,#f5a524 0 4px,#8a5a10 4px 8px)}
.lg-ban{background:repeating-linear-gradient(135deg,rgba(255,93,93,.7) 0 3px,transparent 3px 6px);border:1px solid rgba(255,93,93,.5)}
.lg-night{background:rgba(60,80,150,.55)}.lg-work{height:3px!important;background:rgba(255,255,255,.6);vertical-align:2px!important}
.lg-now{width:0!important;height:13px!important;border-left:2px dashed var(--info)}
.tgc{border-top:3px solid var(--tc)}
.tgc .th{margin-bottom:6px}
.tgh{display:flex;align-items:center;gap:10px;color:var(--ink)!important;font-size:15.5px!important;text-transform:none!important;letter-spacing:.2px!important}
.tgi{width:32px;height:32px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--tc) 18%,transparent)}
.tgi svg{width:20px;height:20px;fill:var(--tc)}
.rtw{padding-top:38px}
.rtr,.dtr,.wt{position:relative;border-radius:9px;background-color:rgba(255,255,255,.045);
background-image:repeating-linear-gradient(90deg,transparent 0 calc(12.5% - 1px),rgba(255,255,255,.07) calc(12.5% - 1px) 12.5%)}
.rtr{height:42px}
.tln{position:absolute;top:0;bottom:0;background:rgba(60,80,150,.3);border-radius:9px}
.wkb{position:absolute;bottom:3px;height:3px;background:rgba(255,255,255,.45);border-radius:2px}
.rs{position:absolute;top:6px;bottom:10px;border-radius:6px;background:var(--tc);display:flex;align-items:center;justify-content:center;overflow:hidden;
box-shadow:0 0 14px color-mix(in srgb,var(--tc) 45%,transparent)}
.rs.der{background:repeating-linear-gradient(135deg,var(--tc) 0 12px,color-mix(in srgb,var(--tc) 72%,#000) 12px 24px)}
.rs em{font:700 12px ui-monospace,Consolas,monospace;font-style:normal;color:#0b1520;white-space:nowrap}
.rban{position:absolute;top:0;bottom:0;border-radius:9px;background:repeating-linear-gradient(135deg,rgba(255,93,93,.32) 0 5px,transparent 5px 10px);box-shadow:inset 0 0 0 1px rgba(255,93,93,.4)}
.rev{position:absolute;top:-4px;bottom:-4px;width:2px;margin-left:-1px;background:#fff;z-index:2}
.rev.off{background:var(--bad)}
.rev em{position:absolute;bottom:calc(100% + 2px);left:50%;transform:translateX(-50%);font:700 10.5px ui-monospace,Consolas,monospace;font-style:normal;white-space:nowrap;color:var(--ink);background:rgba(6,14,21,.94);border:1px solid var(--line);padding:0 5px;border-radius:5px}
.rev.l2 em{bottom:calc(100% + 19px)}.rev.l2:before{content:'';position:absolute;bottom:100%;left:0;width:2px;height:17px;background:inherit;opacity:.6}
.now{position:absolute;top:-6px;bottom:-6px;width:0;margin-left:-1px;border-left:2px dashed var(--info);z-index:3;filter:drop-shadow(0 0 4px var(--info))}
.ax{position:relative;height:16px;margin-top:4px}
.ax b{position:absolute;transform:translateX(-50%);font:600 10.5px ui-monospace,Consolas,monospace;color:var(--mute)}
.ax b:first-child{transform:none}.ax b:last-child{transform:translateX(-100%)}
.rsum{font-size:13.5px;color:var(--mute);margin:4px 0 12px}.rsum b{color:var(--ink);font-weight:600}
.rl .rule{padding:0;margin:8px 0;border-radius:12px;transition:border-color .2s}
.rrow{display:grid;grid-template-columns:auto auto minmax(0,1fr) 250px auto;gap:12px;align-items:center;padding:10px 12px}
.rtx{cursor:pointer;min-width:0}.rtx b{font-size:14px}
.sn{font-size:13px;color:var(--mute);margin-top:3px;line-height:1.45}.sn b{color:var(--ink);font-weight:600}
.kb{font-size:10px;font-weight:800;letter-spacing:.7px;padding:3px 7px;border-radius:6px;border:1px solid;white-space:nowrap}
.kb.k0{color:var(--tc);border-color:color-mix(in srgb,var(--tc) 50%,transparent);background:color-mix(in srgb,var(--tc) 12%,transparent)}
.kb.k1{color:#e9eff4;border-color:rgba(255,255,255,.3)}
.kb.k2{color:var(--bad);border-color:rgba(255,93,93,.45);background:rgba(255,93,93,.08)}
.mbw{display:flex;align-items:center;gap:10px;cursor:pointer}
.mb{position:relative;flex:1;height:10px;border-radius:5px;background:rgba(255,255,255,.08)}
.mb i{position:absolute;top:0;bottom:0;border-radius:5px;background:var(--tc)}
.mb.ban i{background:repeating-linear-gradient(135deg,var(--bad) 0 4px,transparent 4px 8px)}
.mb .mbe{width:3px;margin-left:-1.5px;top:-4px;bottom:-4px;background:#fff;border-radius:2px}.mb .mbe.off{background:var(--bad)}
.mbt{font:600 11.5px ui-monospace,Consolas,monospace;color:var(--mute);white-space:nowrap;min-width:100px}
.rbt{display:flex;gap:6px}
.rule.open{border-color:color-mix(in srgb,var(--tc) 60%,transparent);background:rgba(0,0,0,.3)}
.red{padding:2px 14px 14px;border-top:1px solid var(--line)}
.dtw{margin:14px 0 4px;padding-top:24px}
.dtr{height:36px}
.dsp{position:absolute;top:9px;bottom:9px;border-radius:5px;background:var(--tc);opacity:.9}
.dsp.ban{background:repeating-linear-gradient(135deg,var(--bad) 0 6px,rgba(255,93,93,.3) 6px 12px);opacity:1}
.hd{position:absolute;top:50%;width:24px;height:24px;margin:-12px 0 0 -12px;border-radius:50%;background:#fff;border:4px solid var(--tc,var(--acc));cursor:ew-resize;touch-action:none;z-index:4;box-shadow:0 2px 10px rgba(0,0,0,.55);transition:transform .1s}
.hd:hover,.hd.drag{transform:scale(1.18)}
.hd em{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);font:700 11.5px ui-monospace,Consolas,monospace;font-style:normal;white-space:nowrap;background:rgba(6,14,21,.96);color:var(--ink);padding:1px 7px;border-radius:6px;border:1px solid var(--line);pointer-events:none}
.hd.lock{cursor:help;background:#25313a;border-style:dashed}
.sw{position:relative;width:40px;height:23px;flex:none;display:inline-block;cursor:pointer}.sw input{opacity:0;width:0;height:0;position:absolute}
.sw i{position:absolute;inset:0;border-radius:999px;background:rgba(255,255,255,.16);transition:.2s}
.sw i:after{content:'';position:absolute;left:3px;top:3px;width:17px;height:17px;border-radius:50%;background:#cfd8df;transition:.2s}
.sw input:checked+i{background:var(--tc,var(--ok))}.sw input:checked+i:after{transform:translateX(17px);background:#fff}
.stw{display:inline-flex;align-items:center;gap:4px}
.stp{min-width:32px;padding:6px 0;font-weight:700}
/* телефон / таблет: по-голяма зона за докосване на кръгчетата */
@media (pointer:coarse){.hd{width:28px;height:28px;margin:-14px 0 0 -14px}.hd:after{content:'';position:absolute;inset:-12px;border-radius:50%}
.wt .hd{width:24px;height:24px;margin:-12px 0 0 -12px}.stp{min-width:40px;padding:9px 0}.hd em{bottom:32px}}
.tip{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;background:rgba(92,200,255,.08);border:1px solid rgba(92,200,255,.3);border-radius:10px;padding:10px 12px;font-size:13px;margin:10px 0 0;line-height:1.45}
.addm{margin-top:10px}.addm summary{list-style:none;display:inline-block}.addm summary::-webkit-details-marker{display:none}
.addl{display:flex;flex-direction:column;gap:6px;margin-top:8px;max-width:560px}.addl .btn{text-align:left}
.lps{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.wr{display:grid;grid-template-columns:100px 44px minmax(0,1fr) 216px;gap:12px;align-items:center;margin:4px 0;padding:4px 6px;border-radius:9px}
.wr.cur{background:rgba(245,165,36,.07)}
.wd{font-size:13.5px;font-weight:600}
.wt{height:30px;--tc:#cfd8df}
.wbd{position:absolute;top:8px;bottom:8px;background:rgba(207,216,223,.55);border-radius:5px}
.wtm{display:flex;gap:6px;align-items:center;justify-content:flex-end}.wtm input{width:96px}
.wt .hd{width:20px;height:20px;margin:-10px 0 0 -10px;border-width:3px}
.wt .hd em{bottom:22px;font-size:10.5px;opacity:0}.wt .hd:hover em,.wt .hd.drag em{opacity:1}
.wax{padding-top:0;margin-top:-4px}.wax .ax{margin:0}
@media(max-width:860px){.rrow{grid-template-columns:auto minmax(0,1fr);gap:8px 12px}.rrow .kb{display:none}.mbw{grid-column:1/-1}.rbt{grid-column:1/-1;justify-content:flex-end}
.rs em,.rev em span{display:none}
.wr{grid-template-columns:86px 44px minmax(0,1fr)}.wtm{grid-column:1/-1;justify-content:flex-end}.wax .ax{grid-column:3}.daybar .dinfo{margin-left:0;width:100%}}
.savebar{position:sticky;bottom:10px;z-index:4;display:flex;gap:10px;align-items:center;justify-content:flex-end;background:rgba(6,14,21,.85);backdrop-filter:blur(10px);border:1px solid var(--line);border-radius:14px;padding:10px 12px;margin-top:6px}
.savebar .dirty{color:var(--warn);font-size:13px;margin-right:auto}
/* ---------- съобщения ---------- */
#toasts{position:fixed;right:14px;bottom:14px;display:flex;flex-direction:column;gap:8px;z-index:50;max-width:min(92vw,380px)}
.toast{background:rgba(14,24,34,.96);border:1px solid var(--line);border-left:4px solid var(--info);padding:10px 14px;border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.4);font-size:14px;animation:tin .25s}
.toast.ok{border-left-color:var(--ok);color:var(--ink)}.toast.bad{border-left-color:var(--bad);color:var(--ink)}.toast.warn{border-left-color:var(--warn);color:var(--ink)}
@keyframes tin{from{transform:translateY(10px);opacity:0}}
.bar{height:8px;background:rgba(255,255,255,.08);border-radius:6px;overflow:hidden;margin-top:8px}
.bar i{display:block;height:100%;width:0;background:var(--acc);transition:width .2s}
footer{text-align:center;padding:14px;font-size:13px;color:#9fb3c2;background:rgba(6,14,21,.72);backdrop-filter:blur(10px);border-top:1px solid var(--line)}
/* ---------- вход ---------- */
.lg{max-width:370px;margin:9vh auto 24px;text-align:center;padding:26px}
.lg input{width:100%;margin:6px 0;padding:11px 12px}
.lg .btn{width:100%;margin-top:10px;padding:12px}
.lg .logo{margin:0 auto 16px;height:84px;padding:10px 18px;display:inline-flex;border-radius:16px}
.lg .logo img{height:62px}