*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;background:#111;color:#fff;font-family:system-ui,-apple-system,Segoe UI,sans-serif;overflow:hidden}
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-thumb{background:#06B6D4;border-radius:3px}
::-webkit-scrollbar-track{background:#181818}

:root{
  --or:#06B6D4;--or-h:#22D3EE;--or-d:#0891B2;
  --gn:#22C55E;--rd:#EF4444;--am:#F59E0B;--bl:#3B82F6;--pp:#8B5CF6;--cy:#06B6D4;
  --bg1:#111;--bg2:#181818;--bg3:#1E1E1E;--bg4:#151515;
  --b1:rgba(6,182,212,.2);--b2:rgba(255,255,255,.07);--b3:rgba(255,255,255,.04);
  --md:#888;--dm:#4A4A4A;--lt:#e8e8e8;
}

body.light{background:#f5f5f5;color:#111}
body.light::-webkit-scrollbar-track{background:#e0e0e0}

#cv{position:fixed;inset:0;background:#111;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:9999}
#cv.hide{display:none}
.cgrid{position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent,transparent 39px,rgba(6,182,212,.03) 39px,rgba(6,182,212,.03) 40px),repeating-linear-gradient(90deg,transparent,transparent 39px,rgba(6,182,212,.03) 39px,rgba(6,182,212,.03) 40px)}
.cscan{position:absolute;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,#06B6D4,transparent);animation:scn 5s linear infinite}
@keyframes scn{0%{top:0}100%{top:100%}}
#cv .cvlogo{margin-bottom:24px;animation:glow 3s ease-in-out infinite alternate;position:relative;z-index:1;display:flex;align-items:center;justify-content:center}
@keyframes glow{from{filter:drop-shadow(0 0 20px rgba(6,182,212,.3))}to{filter:drop-shadow(0 0 55px rgba(6,182,212,.65))}}
.ctag{font-size:11px;font-weight:600;letter-spacing:4px;color:#4A4A4A;text-transform:uppercase;margin-bottom:10px;font-family:monospace;position:relative;z-index:1}
.ctitle{font-size:26px;font-weight:800;color:#fff;text-align:center;margin-bottom:6px;position:relative;z-index:1}
.ctitle span{color:#06B6D4}
.csub{font-size:12px;color:#888;margin-bottom:32px;text-align:center;position:relative;z-index:1}
.cpills{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-bottom:36px;position:relative;z-index:1}
.cpill{border:1px solid rgba(6,182,212,.25);color:#888;padding:5px 12px;border-radius:20px;font-size:10px;font-weight:600;letter-spacing:.5px;display:flex;align-items:center;gap:5px}
.cpdot{width:5px;height:5px;border-radius:50%;background:#06B6D4}
#go{background:#06B6D4;color:#fff;border:none;padding:13px 48px;border-radius:3px;font-size:14px;font-weight:700;letter-spacing:1px;text-transform:uppercase;cursor:pointer;font-family:inherit;box-shadow:0 0 40px rgba(6,182,212,.4);position:relative;z-index:1;transition:all .2s}
#go:hover{background:#22D3EE;transform:translateY(-2px);box-shadow:0 8px 50px rgba(6,182,212,.55)}
.cver{font-size:9px;color:#333;margin-top:14px;font-family:monospace;letter-spacing:1px;position:relative;z-index:1}

#login-page{position:fixed;inset:0;background:#111;display:flex;align-items:center;justify-content:center;z-index:9998}
.lg-grid{position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent,transparent 39px,rgba(6,182,212,.03) 39px,rgba(6,182,212,.03) 40px),repeating-linear-gradient(90deg,transparent,transparent 39px,rgba(6,182,212,.03) 39px,rgba(6,182,212,.03) 40px)}
.lg-box{background:#181818;border:1px solid rgba(255,255,255,.07);border-radius:4px;padding:32px 36px;width:380px;position:relative;z-index:1;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.lg-logo{text-align:center;margin-bottom:14px;display:flex;justify-content:center}
.lg-tag{font-size:10px;font-weight:600;letter-spacing:3px;color:#555;text-transform:uppercase;text-align:center;margin-bottom:28px;font-family:monospace}
.lg-lbl{font-size:9px;font-weight:700;color:#888;text-transform:uppercase;letter-spacing:1px;margin-bottom:6px;display:block}
.lg-inp{width:100%;background:#0d0d0d;border:1px solid rgba(255,255,255,.08);color:#e8e8e8;padding:10px 12px;border-radius:2px;font-size:13px;font-family:inherit;outline:none;transition:border-color .15s;margin-bottom:14px}
.lg-inp:focus{border-color:#06B6D4}
.lg-btn{width:100%;background:#06B6D4;color:#fff;border:none;padding:11px;border-radius:2px;font-size:12px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;cursor:pointer;font-family:inherit;transition:all .15s;margin-top:6px}
.lg-btn:hover:not(:disabled){background:#22D3EE}
.lg-btn:disabled{background:#4A4A4A;cursor:not-allowed}
.lg-err{background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.3);color:#EF4444;padding:8px 12px;border-radius:2px;font-size:11px;margin-bottom:14px;display:none}
.lg-err.show{display:block}
.lg-ftr{font-size:9px;color:#333;text-align:center;margin-top:20px;font-family:monospace;letter-spacing:1px}

#app{display:none;flex-direction:column;height:100vh}
#app.ready{display:flex}

#tb{display:flex;align-items:center;height:48px;background:#181818;border-bottom:1px solid var(--b2);flex-shrink:0}
#tblogo{display:flex;align-items:center;padding:0 14px;border-right:1px solid var(--b2);height:100%;gap:10px;cursor:pointer}
#tblogo:hover{background:rgba(255,255,255,.02)}
.tlogo-mark{font-size:18px;font-weight:900;letter-spacing:3px;color:#06B6D4}
.tlogo-img{height:32px !important;width:auto !important;max-width:120px;display:block;object-fit:contain;mix-blend-mode:screen}
.cvlogo-img{height:90px !important;width:auto !important;max-width:280px;display:block;object-fit:contain;mix-blend-mode:screen;filter:drop-shadow(0 0 30px rgba(6,182,212,.5))}
.lg-logo-img{height:auto !important;width:auto !important;max-width:200px;display:inline-block;object-fit:contain;mix-blend-mode:screen;filter:drop-shadow(0 0 25px rgba(6,182,212,.4));transition:transform .3s ease,filter .3s ease}
.lg-logo-img:hover{transform:scale(1.04);filter:drop-shadow(0 0 35px rgba(6,182,212,.65))}
.tsep{width:1px;height:22px;background:rgba(255,255,255,.1)}
.tnm{font-size:10px;font-weight:700;letter-spacing:2px;color:#fff;text-transform:uppercase}
.tnm span{color:#06B6D4}
#live{display:flex;align-items:center;gap:5px;margin-left:14px;background:rgba(34,197,94,.1);border:1px solid rgba(34,197,94,.3);border-radius:3px;padding:3px 9px;font-size:9px;font-weight:700;color:#22C55E;font-family:monospace;letter-spacing:1px}
#live.off{background:rgba(239,68,68,.1);border-color:rgba(239,68,68,.3);color:#EF4444}
.ldot{width:5px;height:5px;border-radius:50%;background:#22C55E;animation:blink 1.5s ease-in-out infinite}
#live.off .ldot{background:#EF4444;animation:none}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}

#tbst{display:flex;margin-left:auto;height:100%}
.ts{display:flex;flex-direction:column;justify-content:center;padding:0 13px;border-left:1px solid var(--b2);cursor:pointer;transition:background .15s}
.ts:hover{background:rgba(6,182,212,.05)}
.tsv{font-size:14px;font-weight:700;font-family:monospace;line-height:1}
.tsl{font-size:9px;color:#4A4A4A;text-transform:uppercase;letter-spacing:.5px;margin-top:2px}
.co{color:#06B6D4}.cg{color:#22C55E}.cr{color:#EF4444}.ca{color:#F59E0B}.cb{color:#3B82F6}.cp{color:#8B5CF6}
#ttime{font-family:monospace;font-size:11px;color:#4A4A4A;padding:0 13px;border-left:1px solid var(--b2);display:flex;align-items:center}

.tbtn{background:transparent;border:1px solid rgba(255,255,255,.07);color:#888;padding:3px 8px;border-radius:2px;cursor:pointer;font-size:9px;font-weight:700;font-family:monospace;margin-right:4px;transition:all .15s}
.tbtn:hover{border-color:#06B6D4;color:#06B6D4}
.tbtn.thm{font-size:12px;letter-spacing:0}

#tbuser{display:flex;align-items:center;gap:8px;padding:0 13px;border-left:1px solid var(--b2);cursor:pointer;height:100%;transition:background .15s}
#tbuser:hover{background:rgba(6,182,212,.04)}
.tbuser-av{width:24px;height:24px;border-radius:50%;background:rgba(6,182,212,.15);border:1px solid rgba(6,182,212,.4);display:flex;align-items:center;justify-content:center;color:#06B6D4;font-size:10px;font-weight:700}
.tbuser-name{font-size:11px;color:#e8e8e8}
.tbuser-menu{position:absolute;top:48px;background:#1E1E1E;border:1px solid var(--b2);border-radius:3px;min-width:180px;display:none;z-index:1000;box-shadow:0 10px 30px rgba(0,0,0,.5)}
.tbuser-menu.show{display:block}
.tbuser-menu-item{padding:9px 14px;font-size:11px;color:#888;cursor:pointer;display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--b3)}
.tbuser-menu-item:last-child{border-bottom:none}
.tbuser-menu-item:hover{background:rgba(6,182,212,.06);color:#06B6D4}

#nav{display:flex;background:#1E1E1E;border-bottom:1px solid var(--b2);flex-shrink:0;padding:0 14px;overflow-x:auto}
.ni{display:flex;align-items:center;gap:6px;padding:11px 14px;font-size:12px;font-weight:800;color:#fff;cursor:pointer;border-bottom:2px solid transparent;white-space:nowrap;transition:all .15s;text-transform:uppercase;letter-spacing:1px;user-select:none}
.ni:hover{color:#fff;background:rgba(255,255,255,.04)}
.ni.on{color:#06B6D4;border-bottom-color:#06B6D4}
.nb{background:#EF4444;color:#fff;border-radius:2px;padding:1px 5px;font-size:8px;font-weight:700;margin-left:4px}

#subnav{display:flex;background:#151515;border-bottom:1px solid rgba(255,255,255,.04);flex-shrink:0;padding:0 14px;overflow-x:auto;min-height:32px}
.sni{display:flex;align-items:center;gap:5px;padding:8px 12px;font-size:11px;font-weight:700;color:#fff;cursor:pointer;border-bottom:1px solid transparent;white-space:nowrap;transition:all .15s;letter-spacing:.6px;user-select:none;text-transform:uppercase}
.sni:hover{color:#fff;background:rgba(255,255,255,.04)}
.sni.on{color:#06B6D4;border-bottom-color:#06B6D4}

#main{flex:1;overflow:hidden;position:relative}
.scr{position:absolute;inset:0;overflow-y:auto;opacity:0;pointer-events:none;transition:opacity .15s;padding-bottom:24px}
.scr.on{opacity:1;pointer-events:all}

.krow{display:grid;gap:8px;padding:10px 12px 0}
.k2{grid-template-columns:repeat(2,minmax(0,1fr))}
.k3{grid-template-columns:repeat(3,minmax(0,1fr))}
.k4{grid-template-columns:repeat(4,minmax(0,1fr))}
.k5{grid-template-columns:repeat(5,minmax(0,1fr))}
.k6{grid-template-columns:repeat(6,minmax(0,1fr))}
.kpi{background:#181818;border:1px solid var(--b2);border-top:2px solid #06B6D4;border-radius:2px;padding:10px 12px;cursor:pointer;transition:all .15s;position:relative}
.kpi.nc{cursor:default}
.kpi:hover:not(.nc){background:#1d1d1d;transform:translateY(-1px);box-shadow:0 4px 12px rgba(6,182,212,.15)}
.kpi:hover:not(.nc) .kl{color:#888}
.kl{font-size:9px;color:#4A4A4A;text-transform:uppercase;letter-spacing:1px;margin-bottom:4px;font-weight:600;transition:color .15s}
.kv{font-size:22px;font-weight:800;font-family:monospace;line-height:1.2;margin-bottom:2px;white-space:nowrap}
.ks{font-size:10px;color:#4A4A4A}
.tu{color:#22C55E}.td{color:#EF4444}
.kpi.gn{border-top-color:#22C55E}
.kpi.rd{border-top-color:#EF4444}
.kpi.am{border-top-color:#F59E0B}
.kpi.bl{border-top-color:#3B82F6}

.card{background:#181818;border:1px solid var(--b2);border-radius:2px;overflow:hidden}
.chdr{display:flex;align-items:center;justify-content:space-between;padding:7px 12px;border-bottom:1px solid rgba(255,255,255,.05);gap:10px;flex-wrap:wrap}
.chtit{font-size:9px;font-weight:700;color:#e8e8e8;text-transform:uppercase;letter-spacing:1px;display:flex;align-items:center;gap:7px}
.cacc{width:2px;height:11px;background:#06B6D4;border-radius:1px;flex-shrink:0}
.cbdy{padding:10px 12px}

.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;padding:0 12px;margin-top:8px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:0 12px;margin-top:8px}
.gfull{padding:0 12px;margin-top:8px}

.tbl{width:100%;border-collapse:collapse;font-size:11px}
.tbl th{text-align:left;padding:6px 10px;font-size:9px;font-weight:700;color:#4A4A4A;text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid var(--b2);background:#1E1E1E;user-select:none}
.tbl th.sortable{cursor:pointer}
.tbl th.sortable:hover{color:#888}
.tbl th.sortable.asc::after{content:' ▲';color:#06B6D4}
.tbl th.sortable.desc::after{content:' ▼';color:#06B6D4}
.tbl td{padding:6px 10px;border-bottom:1px solid rgba(255,255,255,.03);color:#888}
.tbl tr:hover td{background:rgba(6,182,212,.04);color:#e8e8e8}
.tbl tr.clickable{cursor:pointer}
.tbl tr:last-child td{border-bottom:none}
.tbl strong{color:#e8e8e8;font-weight:600}
.mono{font-family:monospace;font-size:10px}

.bdg{display:inline-flex;align-items:center;padding:2px 6px;border-radius:2px;font-size:9px;font-weight:700;font-family:monospace;text-transform:uppercase;letter-spacing:.5px}
.bu{background:rgba(34,197,94,.12);color:#22C55E;border:1px solid rgba(34,197,94,.3)}
.bw{background:rgba(245,158,11,.12);color:#F59E0B;border:1px solid rgba(245,158,11,.3)}
.bd{background:rgba(239,68,68,.12);color:#EF4444;border:1px solid rgba(239,68,68,.3)}
.bi{background:rgba(59,130,246,.12);color:#3B82F6;border:1px solid rgba(59,130,246,.3)}
.bc{background:rgba(239,68,68,.2);color:#EF4444;border:1px solid rgba(239,68,68,.5);animation:bp 2s infinite}
.bo{background:rgba(6,182,212,.15);color:#06B6D4;border:1px solid rgba(6,182,212,.4)}
.bp2{background:rgba(139,92,246,.12);color:#8B5CF6;border:1px solid rgba(139,92,246,.3)}
.bgr{background:rgba(107,114,128,.15);color:#888;border:1px solid rgba(107,114,128,.3)}
@keyframes bp{0%,100%{opacity:1}50%{opacity:.45}}

.dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;display:inline-block}
.dup{background:#22C55E;box-shadow:0 0 5px #22C55E}
.dwn{background:#EF4444;box-shadow:0 0 5px #EF4444;animation:blink 1s infinite}
.dwrn{background:#F59E0B;box-shadow:0 0 5px #F59E0B}
.ddm{background:#4A4A4A}

.bw2{background:rgba(255,255,255,.06);border-radius:2px;height:4px;overflow:hidden;display:inline-block;vertical-align:middle;width:60px}
.bf{height:100%;border-radius:2px;transition:width .3s}
.bor{background:#06B6D4}.bgrn{background:#22C55E}.bam{background:#F59E0B}.brd{background:#EF4444}.bbl{background:#3B82F6}

.ali{display:flex;align-items:flex-start;gap:9px;padding:8px 12px;border-bottom:1px solid rgba(255,255,255,.03);cursor:pointer;transition:background .12s}
.ali:hover{background:rgba(6,182,212,.05)}
.alm{font-size:11px;color:#888;line-height:1.4;flex:1;min-width:0}
.alm strong{color:#e8e8e8;font-weight:600}
.alt2{font-family:monospace;font-size:9px;color:#4A4A4A;white-space:nowrap;margin-top:1px}

.fbtn{background:#06B6D4;color:#fff;border:none;padding:5px 11px;border-radius:2px;cursor:pointer;font-size:10px;font-weight:700;letter-spacing:.5px;transition:all .15s;font-family:inherit;text-transform:uppercase;display:inline-flex;align-items:center;gap:5px}
.fbtn:hover:not(:disabled){background:#22D3EE}
.fbtn:disabled{background:#4A4A4A;cursor:not-allowed;opacity:.6}
.fbtn2{background:transparent;color:#888;border:1px solid rgba(255,255,255,.1);padding:5px 11px;border-radius:2px;cursor:pointer;font-size:10px;font-weight:600;transition:all .15s;font-family:inherit;display:inline-flex;align-items:center;gap:5px}
.fbtn2:hover:not(:disabled){border-color:#06B6D4;color:#06B6D4}
.fbtn2:disabled{opacity:.5;cursor:not-allowed}
.fbtn-rd{background:rgba(239,68,68,.15);color:#EF4444;border:1px solid rgba(239,68,68,.3)}
.fbtn-rd:hover{background:rgba(239,68,68,.25)}
.bsm{background:transparent;border:1px solid rgba(6,182,212,.3);color:#06B6D4;padding:2px 7px;border-radius:2px;font-size:9px;font-weight:700;cursor:pointer;font-family:monospace;letter-spacing:.5px;transition:all .15s}
.bsm:hover{background:rgba(6,182,212,.1)}

.finput{background:#0d0d0d;border:1px solid rgba(255,255,255,.08);color:#e8e8e8;padding:5px 9px;border-radius:2px;font-size:11px;font-family:inherit;outline:none;transition:border-color .15s}
.finput:focus{border-color:#06B6D4}
.finput.err{border-color:#EF4444}
.fselect{background:#0d0d0d;border:1px solid rgba(255,255,255,.08);color:#e8e8e8;padding:5px 9px;border-radius:2px;font-size:11px;font-family:inherit;outline:none;cursor:pointer;transition:border-color .15s}
.fselect:focus{border-color:#06B6D4}

.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:9000;display:none;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(2px)}
.modal-overlay.show{display:flex}
.modal{background:#1E1E1E;border:1px solid rgba(255,255,255,.1);border-radius:4px;width:100%;max-width:560px;max-height:90vh;display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(0,0,0,.6)}
.modal.lg{max-width:800px}
.modal.xl{max-width:1100px}
.modal-hdr{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid rgba(255,255,255,.07);flex-shrink:0}
.modal-ttl{font-size:13px;font-weight:700;color:#fff;letter-spacing:.5px}
.modal-x{background:none;border:none;color:#888;font-size:18px;cursor:pointer;padding:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:2px}
.modal-x:hover{background:rgba(255,255,255,.05);color:#EF4444}
.modal-bdy{padding:18px;overflow-y:auto;flex:1}
.modal-ftr{display:flex;justify-content:flex-end;gap:8px;padding:12px 18px;border-top:1px solid rgba(255,255,255,.07);flex-shrink:0}

.fld{margin-bottom:14px}
.fld-lbl{display:block;font-size:9px;font-weight:700;color:#888;text-transform:uppercase;letter-spacing:1px;margin-bottom:5px}
.fld-lbl .req{color:#EF4444;margin-left:2px}
.fld-inp{width:100%;background:#0d0d0d;border:1px solid rgba(255,255,255,.08);color:#e8e8e8;padding:8px 11px;border-radius:2px;font-size:12px;font-family:inherit;outline:none;transition:border-color .15s}
.fld-inp:focus{border-color:#06B6D4}
.fld-inp.err{border-color:#EF4444}
.fld-help{font-size:9px;color:#555;margin-top:3px}
.fld-err{font-size:9px;color:#EF4444;margin-top:3px;display:none}
.fld-err.show{display:block}
.fld-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}

.cred-panel{background:#0d0d0d;border:1px solid rgba(6,182,212,.3);border-radius:2px;padding:14px;margin-top:8px}
.cred-panel-hdr{font-size:10px;font-weight:700;color:#06B6D4;text-transform:uppercase;letter-spacing:1px;margin-bottom:12px;display:flex;align-items:center;gap:6px}

.toast-box{position:fixed;top:60px;right:20px;z-index:10000;display:flex;flex-direction:column;gap:8px;max-width:380px}
.toast{background:#1E1E1E;border:1px solid rgba(255,255,255,.1);border-left:3px solid #06B6D4;border-radius:3px;padding:11px 14px;font-size:11px;color:#e8e8e8;display:flex;align-items:flex-start;gap:9px;animation:slidein .25s ease;box-shadow:0 8px 24px rgba(0,0,0,.4)}
.toast.suc{border-left-color:#22C55E}
.toast.err{border-left-color:#EF4444}
.toast.warn{border-left-color:#F59E0B}
.toast.info{border-left-color:#3B82F6}
.toast-ico{font-size:14px;flex-shrink:0;margin-top:1px}
.toast-suc .toast-ico{color:#22C55E}
.toast-err .toast-ico{color:#EF4444}
.toast-msg{flex:1;line-height:1.5}
.toast-x{background:none;border:none;color:#555;cursor:pointer;font-size:14px;padding:0;flex-shrink:0}
.toast-x:hover{color:#fff}
@keyframes slidein{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}

.skel{background:linear-gradient(90deg,rgba(255,255,255,.04) 0%,rgba(255,255,255,.08) 50%,rgba(255,255,255,.04) 100%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:2px}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.skel-line{height:11px;margin-bottom:6px}
.skel-row{height:32px;margin-bottom:4px}

.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 20px;color:#555;text-align:center}
.empty-ico{font-size:42px;color:#333;margin-bottom:14px}
.empty-ttl{font-size:13px;font-weight:600;color:#888;margin-bottom:6px}
.empty-msg{font-size:11px;color:#555;margin-bottom:18px;max-width:320px}

.coming-soon{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;padding:40px 20px;text-align:center}
.cs-mark{width:80px;height:80px;border:2px solid rgba(6,182,212,.3);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:32px;color:#06B6D4;margin-bottom:20px;background:rgba(6,182,212,.05);box-shadow:0 0 30px rgba(6,182,212,.15)}
.cs-ttl{font-size:18px;font-weight:700;color:#e8e8e8;margin-bottom:8px;letter-spacing:1px}
.cs-tag{font-size:10px;font-weight:700;color:#06B6D4;text-transform:uppercase;letter-spacing:3px;margin-bottom:24px;font-family:monospace}
.cs-msg{font-size:12px;color:#888;max-width:420px;line-height:1.7;margin-bottom:24px}
.cs-back{background:transparent;border:1px solid rgba(6,182,212,.4);color:#06B6D4;padding:8px 20px;border-radius:2px;cursor:pointer;font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;font-family:inherit;transition:all .15s}
.cs-back:hover{background:rgba(6,182,212,.1)}

.pgn{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;border-top:1px solid var(--b2);font-size:10px;color:#888}
.pgn-info{font-family:monospace}
.pgn-ctrls{display:flex;gap:4px;align-items:center}
.pgn-btn{background:transparent;border:1px solid rgba(255,255,255,.08);color:#888;padding:3px 9px;border-radius:2px;cursor:pointer;font-size:10px;font-family:monospace;transition:all .15s;min-width:28px}
.pgn-btn:hover:not(:disabled){border-color:#06B6D4;color:#06B6D4}
.pgn-btn:disabled{opacity:.3;cursor:not-allowed}
.pgn-btn.on{background:#06B6D4;color:#fff;border-color:#06B6D4}

.wiz-steps{display:flex;align-items:center;gap:0;padding:14px 18px;border-bottom:1px solid var(--b2);background:#151515}
.wiz-step{display:flex;align-items:center;gap:8px;font-size:10px;color:#555;font-weight:700;text-transform:uppercase;letter-spacing:1px}
.wiz-step.active{color:#06B6D4}
.wiz-step.done{color:#22C55E}
.wiz-step-num{width:22px;height:22px;border-radius:50%;border:1px solid currentColor;display:flex;align-items:center;justify-content:center;font-family:monospace;font-size:10px;font-weight:700}
.wiz-step.active .wiz-step-num{background:rgba(6,182,212,.15)}
.wiz-step.done .wiz-step-num{background:rgba(34,197,94,.15)}
.wiz-step-arr{flex:1;height:1px;background:rgba(255,255,255,.08);margin:0 12px;min-width:30px}

.imp-grp{background:#0d0d0d;border:1px solid var(--b2);border-radius:3px;margin-bottom:10px;overflow:hidden}
.imp-grp-hdr{padding:10px 14px;border-bottom:1px solid var(--b2);display:flex;align-items:center;justify-content:space-between;background:#151515}
.imp-grp-ttl{font-size:11px;font-weight:700;color:#e8e8e8;display:flex;align-items:center;gap:8px}
.imp-grp-ct{font-family:monospace;font-size:10px;color:#888}
.imp-grp-bdy{padding:14px}
.imp-opts{display:flex;flex-direction:column;gap:7px;margin-bottom:10px}
.imp-opt{display:flex;align-items:center;gap:9px;padding:7px 11px;background:rgba(255,255,255,.02);border:1px solid var(--b2);border-radius:2px;cursor:pointer;font-size:11px;color:#888;transition:all .15s}
.imp-opt:hover{border-color:rgba(6,182,212,.3)}
.imp-opt.sel{border-color:#06B6D4;background:rgba(6,182,212,.06);color:#e8e8e8}
.imp-opt-rad{width:13px;height:13px;border-radius:50%;border:2px solid #555;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.imp-opt.sel .imp-opt-rad{border-color:#06B6D4}
.imp-opt.sel .imp-opt-rad::after{content:'';width:5px;height:5px;border-radius:50%;background:#06B6D4}

.imp-prog{padding:14px 18px}
.imp-prog-bar{height:8px;background:#0d0d0d;border-radius:4px;overflow:hidden;margin-bottom:8px}
.imp-prog-fill{height:100%;background:linear-gradient(90deg,#06B6D4,#22D3EE);transition:width .3s;border-radius:4px}
.imp-prog-txt{font-size:10px;color:#888;font-family:monospace;display:flex;justify-content:space-between}
.imp-log{margin-top:14px;background:#0d0d0d;border:1px solid var(--b2);border-radius:2px;max-height:280px;overflow-y:auto;padding:6px 0}
.imp-log-row{display:flex;gap:9px;padding:4px 12px;font-family:monospace;font-size:10px;align-items:center}
.imp-log-row.ok{color:#22C55E}
.imp-log-row.fail{color:#EF4444}
.imp-log-row.pend{color:#888}
.imp-log-ico{width:14px;text-align:center;flex-shrink:0}
.imp-log-ip{width:120px;flex-shrink:0;color:#e8e8e8}
.imp-log-msg{flex:1;color:#888;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.cb-row{display:flex;align-items:center;gap:8px;padding:5px 0;cursor:pointer}
.cb{width:14px;height:14px;border-radius:2px;background:#0d0d0d;flex-shrink:0;display:flex;align-items:center;justify-content:center;cursor:pointer}
.cb.on{background:#06B6D4;border-color:#06B6D4}
.cb.on::after{content:'✓';color:#fff;font-size:11px;font-weight:700}
.cb-lbl{font-size:11px;color:#888;cursor:pointer}

.fil-bar{display:flex;gap:6px;padding:8px 12px;background:#151515;border-bottom:1px solid var(--b2);flex-wrap:wrap;align-items:center}
.fil-grp{display:flex;align-items:center;gap:5px}
.fil-lbl{font-size:9px;color:#555;text-transform:uppercase;letter-spacing:1px;font-weight:700}

.engine-card{background:#0d0d0d;border:1px solid var(--b2);border-left:3px solid #22C55E;border-radius:2px;padding:12px 14px;display:flex;flex-direction:column;gap:6px}
.engine-card.stale{border-left-color:#F59E0B}
.engine-card.dead{border-left-color:#EF4444}
.engine-id{font-family:monospace;font-size:11px;color:#e8e8e8;font-weight:700}
.engine-meta{font-size:10px;color:#888;font-family:monospace}
.engine-stats{display:flex;gap:14px;margin-top:4px}
.engine-stat{display:flex;flex-direction:column}
.engine-stat-v{font-family:monospace;font-size:13px;font-weight:700;color:#06B6D4}
.engine-stat-l{font-size:8px;color:#555;text-transform:uppercase;letter-spacing:.8px}

.health-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;padding:0 12px}
.health-card{background:#181818;border:1px solid var(--b2);border-left:3px solid #22C55E;border-radius:2px;padding:14px}
.health-card.degraded{border-left-color:#F59E0B}
.health-card.unhealthy{border-left-color:#EF4444}
.health-name{font-size:11px;font-weight:700;color:#e8e8e8;text-transform:uppercase;letter-spacing:1px;margin-bottom:6px}
.health-status{font-size:10px;color:#22C55E;font-family:monospace;font-weight:700;letter-spacing:1px;margin-bottom:8px}
.health-card.degraded .health-status{color:#F59E0B}
.health-card.unhealthy .health-status{color:#EF4444}
.health-meta{font-size:10px;color:#888;font-family:monospace;line-height:1.6}

[dir="rtl"] #nav,[dir="rtl"] #subnav{direction:rtl}
[dir="rtl"] .tbl th{text-align:right}
[dir="rtl"] #tblogo{border-right:none;border-left:1px solid var(--b2)}
[dir="rtl"] #tbst .ts:first-child{border-left:none}
[dir="rtl"] .toast-box{right:auto;left:20px}
[dir="rtl"] .toast{border-left:1px solid rgba(255,255,255,.1);border-right:3px solid #06B6D4}
[dir="rtl"] .toast.suc{border-right-color:#22C55E}
[dir="rtl"] .toast.err{border-right-color:#EF4444}
[dir="rtl"] .toast.warn{border-right-color:#F59E0B}
[dir="rtl"] .toast.info{border-right-color:#3B82F6}


/* ========= DASHBOARD HERO ========= */
.hero-card{
  position:relative;background:linear-gradient(135deg,#0e0e0e 0%,#0a0a0a 50%,#0d0d0d 100%);
  border:1px solid #1a1a1a;border-radius:6px;padding:22px 26px;margin-bottom:14px;
  overflow:hidden;
}
.hero-bg{
  position:absolute;inset:0;
  background:
    radial-gradient(circle at 20% 30%,rgba(6,182,212,0.15) 0%,transparent 40%),
    radial-gradient(circle at 80% 70%,rgba(59,130,246,0.08) 0%,transparent 40%),
    linear-gradient(135deg,transparent 49.5%,rgba(6,182,212,0.04) 50%,transparent 50.5%);
  pointer-events:none;
}
.hero-bg::before{
  content:'';position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(6,182,212,0.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(6,182,212,0.04) 1px,transparent 1px);
  background-size:30px 30px;
  mask-image:radial-gradient(ellipse at center,black 30%,transparent 80%);
  -webkit-mask-image:radial-gradient(ellipse at center,black 30%,transparent 80%);
}
.hero-grid{position:relative;display:grid;grid-template-columns:auto 1fr auto;gap:32px;align-items:center;z-index:1}
.hero-score-block{display:flex;flex-direction:column;align-items:center;gap:6px}
.hero-score-label{font-size:10px;color:#888;letter-spacing:2px;font-weight:700;text-transform:uppercase}
.hero-score-ring{position:relative;width:200px;height:200px}
.hero-score-text{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.hero-score-value{font-size:56px;font-weight:900;line-height:1;
  background:linear-gradient(135deg,#06B6D4,#F59E0B);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 18px rgba(6,182,212,.4));
  font-variant-numeric:tabular-nums;
}
.hero-score-unit{font-size:13px;color:#666;margin-top:2px;letter-spacing:1px}
.hero-score-status{font-size:11px;font-weight:700;letter-spacing:0.5px;margin-top:4px;text-align:center}

.hero-stats-block{display:flex;flex-direction:column;gap:14px}
.hero-stat-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.hero-stat{display:flex;align-items:flex-start;gap:14px;padding:12px 16px;background:rgba(255,255,255,0.02);border:1px solid #1a1a1a;border-radius:4px;transition:all .25s ease}
.hero-stat:hover{border-color:rgba(6,182,212,0.4);background:rgba(6,182,212,0.03);transform:translateY(-1px)}
.hero-stat-icon{font-size:22px;color:#06B6D4;line-height:1;margin-top:2px;text-shadow:0 0 12px currentColor}
.hero-stat-meta{flex:1;min-width:0}
.hero-stat-label{font-size:9px;color:#888;text-transform:uppercase;letter-spacing:1.2px;font-weight:700;margin-bottom:4px}
.hero-stat-value{font-size:22px;color:#cfcfcf;font-weight:900;line-height:1.1;margin-bottom:3px;font-variant-numeric:tabular-nums}
.hero-stat-sub{font-size:10px;color:#666;font-family:monospace}

.hero-pulse-block{display:flex;flex-direction:column;align-items:center;gap:6px}
.hero-pulse-label{font-size:10px;color:#888;letter-spacing:2px;font-weight:700;text-transform:uppercase}
#hero-pulse-canvas{display:block;background:transparent;border-radius:4px}
.hero-pulse-meta{display:flex;gap:18px;font-size:10px;color:#888;font-family:monospace;margin-top:4px}
.hero-pulse-meta span{color:#06B6D4;font-weight:700}

@media (max-width: 1280px){
  .hero-grid{grid-template-columns:1fr;gap:18px}
  .hero-pulse-block{order:3}
}

/* ========= PERFORMANCE BARS ========= */
.perf-card{transition:transform .2s ease,border-color .2s ease}
.perf-card:hover{transform:translateY(-1px);border-color:rgba(6,182,212,0.3)}
.perf-bar-wrap{position:relative;height:14px;background:#0d0d0d;border-radius:8px;overflow:hidden;margin-bottom:10px;border:1px solid #1a1a1a}
.perf-bar{position:absolute;top:0;left:0;height:100%;border-radius:8px;transition:width 1.2s cubic-bezier(.4,0,.2,1);
  background:linear-gradient(90deg,#10B981,#10B981dd);
  box-shadow:0 0 12px currentColor;
}
.perf-bar::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.15),transparent);
  animation:shimmer 2s infinite;
}
@keyframes shimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
.perf-meta{display:flex;justify-content:space-between;font-size:10px;color:#888;font-family:monospace}

/* ========= TOP ROWS (CPU / Engines / Down) ========= */
.top-row{display:flex;align-items:center;gap:10px;padding:9px 12px;border-bottom:1px solid #1a1a1a;cursor:pointer;transition:background .15s ease}
.top-row:hover{background:rgba(6,182,212,0.05)}
.top-row:last-child{border-bottom:none}
.top-row-name{flex:1;min-width:0}
.top-row-bar-wrap{flex:0 0 80px;height:6px;background:#1a1a1a;border-radius:3px;overflow:hidden}
.top-row-bar{height:100%;border-radius:3px;transition:width .8s cubic-bezier(.4,0,.2,1)}
.top-row-val{flex:0 0 50px;text-align:right;font-family:monospace;font-size:11px;font-weight:700}

/* ========= GLOW for KPI on critical/down ========= */
.kpi.rd[data-kpi="critical"] .kv.cr{text-shadow:0 0 14px rgba(239,68,68,0.5)}
.kpi.rd[data-kpi="down"] .kv.cr{text-shadow:0 0 14px rgba(239,68,68,0.5)}
.kpi.gn .kv.cg{text-shadow:0 0 14px rgba(34,197,94,0.4)}

/* === device-logs styles (auto-injected) === */
/* ─────────────────────────────────────────────────────────────────
 * Device Logs — append to assets/styles.css
 * ─────────────────────────────────────────────────────────────── */

/* List table */
.dl-tbl {
  border-collapse: collapse;
  font-size: 13px;
}
.dl-tbl thead th {
  position: sticky;
  top: 0;
  background: #1a1f2a;
  color: #aab;
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 600;
  padding: 8px 10px;
  text-align: left;
  border-bottom: 1px solid #2a2f3a;
  z-index: 1;
}
.dl-tbl tbody td {
  padding: 6px 10px;
  border-bottom: 1px solid #1a1f2a;
  vertical-align: top;
  word-break: break-word;
}
.dl-tbl tr.dl-row:hover {
  background: rgba(80, 120, 200, 0.08);
  cursor: pointer;
}
.dl-tbl .dl-time     { color: #888; white-space: nowrap; font-family: monospace; font-size: 12px; }
.dl-tbl .dl-host     { color: #cdf; font-weight: 500; white-space: nowrap; }
.dl-tbl .dl-meta     { white-space: nowrap; }
.dl-tbl .dl-meta .bdg { margin-right: 4px; }
.dl-tbl .dl-msg      { color: #ddd; font-family: monospace; font-size: 12px; }

/* Newly-arrived row flash (kept subtle so it doesn't seizure-trigger) */
@keyframes dl-flash-anim {
  0%   { background: rgba(80, 220, 120, 0.20); }
  100% { background: transparent; }
}
.dl-tbl tr.dl-row.dl-flash td {
  animation: dl-flash-anim 1.2s ease-out;
}

/* Pause button active state */
.fbtn2.active {
  background: #4a3a1a;
  color: #ffcc66;
  border-color: #6a5a3a;
}

/* Drill-down dialog */
.dl-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}
.dl-dialog {
  background: #15191f;
  border: 1px solid #2a2f3a;
  border-radius: 8px;
  width: min(900px, 100%);
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}
.dl-dialog-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid #2a2f3a;
  background: #1a1f2a;
}
.dl-dialog-b {
  padding: 18px;
  overflow-y: auto;
  flex: 1;
}
.dl-close {
  background: transparent;
  border: 1px solid #2a2f3a;
  color: #aab;
  width: 30px;
  height: 30px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
}
.dl-close:hover {
  background: #2a2f3a;
  color: #fff;
}
.dl-fld {
  display: flex;
  padding: 4px 0;
  font-size: 13px;
}
.dl-fld .dl-fk {
  color: #888;
  width: 130px;
  flex-shrink: 0;
}
.dl-section {
  margin: 16px 0 6px 0;
  padding-bottom: 4px;
  border-bottom: 1px solid #2a2f3a;
  color: #aab;
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
}
.dl-msg-full,
.dl-struct,
.dl-raw {
  background: #0a0d12;
  border: 1px solid #1a1f2a;
  border-radius: 4px;
  padding: 10px 12px;
  margin: 6px 0;
  font-family: monospace;
  font-size: 12px;
  white-space: pre-wrap;
  word-break: break-all;
  max-height: 200px;
  overflow-y: auto;
  color: #cdc;
}
.dl-raw {
  color: #999;
  max-height: 120px;
  font-size: 11px;
}

/* Unknown sources sample column truncation */
.dl-sample {
  font-family: monospace;
  font-size: 12px;
  color: #aab;
  max-width: 400px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* === end device-logs styles === */
/* ────────────────────────────────────────────────────────────
   AIN v2 — Global Alert Notifications (append to styles.css)
   ──────────────────────────────────────────────────────────── */

/* ────────────────────────────────────────────────────────────
   Alert toasts — NOC-grade design
   هرمية واضحة: شارة الخطورة + الوقت ← اسم الجهاز (الأبرز) ← الحالة
   ← الميتا. شريط لون جانبي متوهج + زجاجية داكنة + شريط تقدّم للمؤقت.
   كله ضمن .toast.alert-toast — توستات النظام (ui.js) غير متأثرة.
   ──────────────────────────────────────────────────────────── */
.toast.alert-toast {
  position: relative;
  overflow: hidden;
  max-width: 380px;
  min-width: 300px;
  padding: 12px 14px 13px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-left: 1px solid rgba(255, 255, 255, 0.08); /* الشريط عبر ::before */
  border-radius: 10px;
  background: rgba(13, 18, 28, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  align-items: flex-start;
  gap: 11px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
  animation: alert-toast-in 0.32s cubic-bezier(0.21, 1.02, 0.55, 1.01);
}
.toast.alert-toast.toast-leaving {
  animation: alert-toast-out 0.22s ease-in forwards;
  pointer-events: none;
}
@keyframes alert-toast-in {
  from { transform: translateX(18px) scale(0.97); opacity: 0; }
  to   { transform: translateX(0) scale(1);       opacity: 1; }
}
[dir="rtl"] .toast.alert-toast { animation-name: alert-toast-in-rtl; }
@keyframes alert-toast-in-rtl {
  from { transform: translateX(-18px) scale(0.97); opacity: 0; }
  to   { transform: translateX(0) scale(1);        opacity: 1; }
}
@keyframes alert-toast-out {
  from { transform: translateX(0) scale(1);     opacity: 1; max-height: 200px; margin-bottom: 0; }
  to   { transform: translateX(0) scale(0.96);  opacity: 0; max-height: 0;     margin-bottom: -8px; }
}

/* الشريط الجانبي المتوهج — منطقي الاتجاه (يلتف تلقائياً مع RTL) */
.toast.alert-toast::before {
  content: '';
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 3px;
  background: var(--at-accent, #06B6D4);
  box-shadow: 0 0 12px var(--at-glow, rgba(6, 182, 212, 0.5));
}

.toast.alert-toast.alert-critical {
  --at-accent: #EF4444;
  --at-glow: rgba(239, 68, 68, 0.55);
  --at-soft: rgba(239, 68, 68, 0.13);
  --at-line: rgba(239, 68, 68, 0.40);
  background: linear-gradient(135deg, rgba(56, 14, 18, 0.94) 0%, rgba(13, 18, 28, 0.92) 55%);
  border-color: rgba(239, 68, 68, 0.30);
  animation: alert-toast-in 0.32s cubic-bezier(0.21, 1.02, 0.55, 1.01),
             alert-toast-pulse 2s ease-in-out 0.4s infinite;
}
[dir="rtl"] .toast.alert-toast.alert-critical {
  animation: alert-toast-in-rtl 0.32s cubic-bezier(0.21, 1.02, 0.55, 1.01),
             alert-toast-pulse 2s ease-in-out 0.4s infinite;
}
.toast.alert-toast.alert-warning {
  --at-accent: #F59E0B;
  --at-glow: rgba(245, 158, 11, 0.45);
  --at-soft: rgba(245, 158, 11, 0.12);
  --at-line: rgba(245, 158, 11, 0.38);
  background: linear-gradient(135deg, rgba(50, 38, 12, 0.92) 0%, rgba(13, 18, 28, 0.92) 55%);
  border-color: rgba(245, 158, 11, 0.22);
}
.toast.alert-toast.alert-info {
  --at-accent: #3B82F6;
  --at-glow: rgba(59, 130, 246, 0.4);
  --at-soft: rgba(59, 130, 246, 0.12);
  --at-line: rgba(59, 130, 246, 0.38);
  border-color: rgba(59, 130, 246, 0.2);
}
.toast.alert-toast.alert-resolved {
  --at-accent: #22C55E;
  --at-glow: rgba(34, 197, 94, 0.4);
  --at-soft: rgba(34, 197, 94, 0.12);
  --at-line: rgba(34, 197, 94, 0.38);
  background: linear-gradient(135deg, rgba(12, 38, 22, 0.92) 0%, rgba(13, 18, 28, 0.92) 55%);
  border-color: rgba(34, 197, 94, 0.22);
}
.toast.alert-toast.alert-ack {
  --at-accent: #3B82F6;
  --at-glow: rgba(59, 130, 246, 0.35);
  --at-soft: rgba(59, 130, 246, 0.10);
  --at-line: rgba(59, 130, 246, 0.32);
  border-color: rgba(59, 130, 246, 0.18);
  opacity: 0.96;
}

@keyframes alert-toast-pulse {
  0%, 100% { box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55), 0 0 0 0 rgba(239, 68, 68, 0); }
  50%      { box-shadow: 0 12px 36px rgba(0, 0, 0, 0.55), 0 0 22px 1px rgba(239, 68, 68, 0.28); }
}

.toast.alert-toast:hover {
  transform: translateY(-1px);
  transition: transform 0.15s ease;
  border-color: rgba(255, 255, 255, 0.18);
}

/* الأيقونة داخل حلقة ملوّنة */
.alert-toast-ico {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  margin-top: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
  border-radius: 50%;
  color: var(--at-accent, #06B6D4);
  background: var(--at-soft, rgba(6, 182, 212, 0.12));
  border: 1px solid var(--at-line, rgba(6, 182, 212, 0.35));
  box-shadow: 0 0 10px var(--at-glow, rgba(6, 182, 212, 0.25));
}
.alert-critical .alert-toast-ico { animation: alert-ico-beat 2s ease-in-out infinite; }
@keyframes alert-ico-beat {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.08); }
}

.alert-toast-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

/* الرأس: شارة الخطورة + الوقت */
.alert-toast-hdr {
  display: flex;
  align-items: center;
  gap: 8px;
}
.alert-toast-chip {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  font-family: monospace;
  color: var(--at-accent, #06B6D4);
  background: var(--at-soft, rgba(6, 182, 212, 0.14));
  border: 1px solid var(--at-line, rgba(6, 182, 212, 0.40));
  padding: 2px 7px;
  border-radius: 999px;
  line-height: 1.4;
}
.alert-toast-time {
  margin-inline-start: auto;
  font-size: 9.5px;
  font-family: monospace;
  color: #5b6573;
  white-space: nowrap;
}

/* الموضوع: اسم الجهاز/الخدمة — الأبرز */
.alert-toast-subject {
  font-size: 13px;
  font-weight: 700;
  color: #f1f5f9;
  line-height: 1.35;
  word-break: break-word;
  margin-top: 2px;
}

/* الحالة: وش صار */
.alert-toast-msg {
  font-size: 11.5px;
  color: #9aa6b5;
  line-height: 1.45;
  word-wrap: break-word;
}

/* الميتا: التكرارات + الوقت الأول */
.alert-toast-meta {
  font-size: 10px;
  color: #6b7585;
  margin-top: 4px;
  font-family: monospace;
}

/* شريط التقدّم — يعدّ تنازلياً حتى الاختفاء (المؤقتة فقط) */
.alert-toast-progress {
  position: absolute;
  bottom: 0;
  inset-inline-start: 0;
  height: 2px;
  width: 100%;
  background: linear-gradient(90deg, var(--at-accent, #06B6D4), transparent);
  opacity: 0.7;
  transform-origin: left;
  animation-name: alert-toast-countdown;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}
[dir="rtl"] .alert-toast-progress { transform-origin: right; }
@keyframes alert-toast-countdown {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}

/* Topbar flash on critical/warning alerts */
#tb.flash-critical { animation: tb-flash-red 1.5s ease-out; }
#tb.flash-warning  { animation: tb-flash-amber 1.5s ease-out; }
#tb.flash-info     { animation: tb-flash-blue 1.5s ease-out; }

@keyframes tb-flash-red {
  0%   { box-shadow: inset 0 -2px 0 transparent; }
  20%  { box-shadow: inset 0 -2px 0 #EF4444, 0 0 24px rgba(239, 68, 68, 0.4); }
  100% { box-shadow: inset 0 -2px 0 transparent; }
}
@keyframes tb-flash-amber {
  0%   { box-shadow: inset 0 -2px 0 transparent; }
  20%  { box-shadow: inset 0 -2px 0 #F59E0B, 0 0 20px rgba(245, 158, 11, 0.3); }
  100% { box-shadow: inset 0 -2px 0 transparent; }
}
@keyframes tb-flash-blue {
  0%   { box-shadow: inset 0 -2px 0 transparent; }
  20%  { box-shadow: inset 0 -2px 0 #3B82F6, 0 0 20px rgba(59, 130, 246, 0.3); }
  100% { box-shadow: inset 0 -2px 0 transparent; }
}

/* ────────────────────────────────────────────────────────────
   Topbar bell (notification center)
   ──────────────────────────────────────────────────────────── */
.tbbell {
  position: relative;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 3px;
  margin: 0 6px;
  transition: background 0.15s;
  user-select: none;
}
.tbbell:hover { background: rgba(255, 255, 255, 0.06); }
.bell-ico {
  font-size: 14px;
  filter: grayscale(0.3);
  line-height: 1;
}
.tbbell.has-unread .bell-ico {
  filter: none;
  animation: bell-shake 0.6s ease-in-out;
}
@keyframes bell-shake {
  0%, 100%   { transform: rotate(0); }
  20%        { transform: rotate(-12deg); }
  40%        { transform: rotate(10deg); }
  60%        { transform: rotate(-6deg); }
  80%        { transform: rotate(4deg); }
}
.bell-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 14px;
  height: 14px;
  padding: 0 4px;
  background: #EF4444;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: monospace;
  box-shadow: 0 0 0 2px #181818;
}

.bell-dropdown {
  position: absolute;
  top: 38px;
  right: 0;
  width: 340px;
  max-height: 420px;
  background: #1E1E1E;
  border: 1px solid var(--b2, rgba(255,255,255,0.07));
  border-radius: 4px;
  display: none;
  flex-direction: column;
  z-index: 1000;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.6);
  overflow: hidden;
}
.bell-dropdown.open { display: flex; }

.bell-hdr {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  font-size: 11px;
  font-weight: 700;
  color: #06B6D4;
  text-transform: uppercase;
  letter-spacing: 1px;
  border-bottom: 1px solid var(--b2, rgba(255,255,255,0.07));
}
.bell-hdr > span { flex: 1; }
.bell-mute, .bell-clear {
  background: none;
  border: 1px solid rgba(255,255,255,0.1);
  color: #aaa;
  font-size: 10px;
  padding: 3px 8px;
  border-radius: 2px;
  cursor: pointer;
  font-family: inherit;
}
.bell-mute:hover, .bell-clear:hover { color: #fff; border-color: rgba(255,255,255,0.25); }

.bell-empty {
  padding: 32px 16px;
  text-align: center;
  color: #555;
  font-size: 11px;
}
.bell-list {
  flex: 1;
  overflow-y: auto;
  max-height: 360px;
}

.bell-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  cursor: pointer;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  transition: background 0.12s;
}
.bell-item:hover { background: rgba(255,255,255,0.03); }
.bell-item:last-child { border-bottom: none; }
.bell-item-done { opacity: 0.55; }

.bell-item-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-top: 4px;
  flex-shrink: 0;
}
.bell-item-critical .bell-item-dot { background: #EF4444; box-shadow: 0 0 6px #EF4444; }
.bell-item-warning  .bell-item-dot { background: #F59E0B; }
.bell-item-info     .bell-item-dot { background: #3B82F6; }
.bell-item-done .bell-item-dot     { background: #22C55E; box-shadow: none; }

.bell-item-body { flex: 1; min-width: 0; }
.bell-item-ttl {
  font-size: 12px;
  color: #e8e8e8;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bell-item-meta {
  font-size: 10px;
  color: #777;
  margin-top: 2px;
  font-family: monospace;
}

/* RTL support */
html[dir="rtl"] .bell-dropdown { right: auto; left: 0; }
html[dir="rtl"] .bell-badge    { right: auto; left: 2px; }
html[dir="rtl"] .toast-box     { right: auto; left: 20px; }
html[dir="rtl"] @keyframes slidein { from { transform: translateX(-100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

/* Light theme tweaks */
body.light .toast.alert-toast { background: #fff; color: #1a1a1a; }
body.light .toast.alert-toast.alert-critical { background: linear-gradient(135deg, #fff5f5 0%, #fff 60%); }
body.light .toast.alert-toast.alert-warning  { background: linear-gradient(135deg, #fff8eb 0%, #fff 60%); }
body.light .alert-toast-msg { color: #333; }
body.light .alert-toast-meta { color: #888; }
body.light .bell-dropdown    { background: #fff; }
body.light .bell-item-ttl    { color: #1a1a1a; }
body.light .tbbell:hover     { background: rgba(0,0,0,0.05); }


/* ────────────────────────────────────────────────────────────
   AIN v2 — Pause Monitoring + Wizard styles
   Append to frontend_v2/assets/styles.css
   ──────────────────────────────────────────────────────────── */


/* ════ Pause modal ════ */
.pause-modal {
  font-size: 12px;
  color: #ccc;
  padding: 4px 0;
}
.pause-modal-msg {
  background: rgba(6,182,212, 0.06);
  border-left: 3px solid #06B6D4;
  padding: 10px 12px;
  border-radius: 2px;
  line-height: 1.6;
  margin-bottom: 16px;
  color: #ccc;
  font-size: 11px;
}
.pause-modal-msg em { color: #888; font-style: italic; }

.pause-section-lbl {
  font-size: 9px;
  font-weight: 700;
  color: #06B6D4;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--b2, rgba(255,255,255,0.07));
  padding-bottom: 4px;
}

.pause-presets {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.pause-preset {
  background: #161616;
  border: 1px solid rgba(255,255,255,0.08);
  color: #ddd;
  padding: 9px 10px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 2px;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.12s;
}
.pause-preset:hover {
  background: rgba(6,182,212, 0.1);
  border-color: #06B6D4;
  color: #fff;
  transform: translateY(-1px);
}
.pause-preset:active {
  transform: translateY(0);
}

.pause-custom-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.pause-custom-inp:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.pause-indef-row {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 11px;
  color: #aaa;
  margin-left: auto;
}
.pause-indef-row input[type="checkbox"] {
  cursor: pointer;
}

/* Amber accent for the Resume button when device is paused */
.fbtn2.fbtn-am {
  border-color: rgba(245, 158, 11, 0.5);
  color: #FBBF24;
}
.fbtn2.fbtn-am:hover {
  background: rgba(245, 158, 11, 0.1);
  border-color: #F59E0B;
}


/* ════ Wizard styles ════ */
.wiz-root {
  max-width: 880px;
  margin: 0 auto;
  padding: 20px;
}

/* Stepper at the top */
.wiz-stepper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 26px;
  padding: 0 4px;
  position: relative;
}
.wiz-stepper::before {
  content: '';
  position: absolute;
  top: 14px;
  left: 26px;
  right: 26px;
  height: 1px;
  background: rgba(255,255,255,0.08);
  z-index: 0;
}
.wiz-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  position: relative;
  z-index: 1;
  flex: 1;
}
.wiz-step-circle {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #1A1A1A;
  border: 2px solid rgba(255,255,255,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: #555;
  transition: all 0.2s;
}
.wiz-step.done .wiz-step-circle {
  border-color: #22C55E;
  background: rgba(34, 197, 94, 0.1);
  color: #22C55E;
}
.wiz-step.active .wiz-step-circle {
  border-color: #06B6D4;
  background: rgba(6,182,212, 0.15);
  color: #06B6D4;
  box-shadow: 0 0 0 4px rgba(6,182,212, 0.15);
}
.wiz-step-lbl {
  font-size: 10px;
  font-weight: 600;
  color: #555;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  text-align: center;
}
.wiz-step.active .wiz-step-lbl { color: #06B6D4; }
.wiz-step.done .wiz-step-lbl { color: #888; }

/* Body card */
.wiz-card {
  background: #161616;
  border: 1px solid var(--b2, rgba(255,255,255,0.07));
  border-radius: 4px;
  padding: 22px 26px;
  min-height: 360px;
}
.wiz-step-title {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 4px;
}
.wiz-step-subtitle {
  font-size: 11px;
  color: #888;
  margin-bottom: 22px;
  line-height: 1.5;
}

/* Device-type cards (step 1) */
.wiz-type-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}
.wiz-type-card {
  background: #1A1A1A;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 3px;
  padding: 14px 12px;
  cursor: pointer;
  text-align: center;
  transition: all 0.15s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.wiz-type-card:hover {
  border-color: rgba(6,182,212, 0.5);
  background: rgba(6,182,212, 0.05);
}
.wiz-type-card.on {
  border-color: #06B6D4;
  background: rgba(6,182,212, 0.12);
  box-shadow: 0 0 0 1px #06B6D4 inset;
}
.wiz-type-icon {
  font-size: 22px;
  color: #06B6D4;
  line-height: 1;
}
.wiz-type-lbl {
  font-size: 11px;
  font-weight: 600;
  color: #ddd;
}
.wiz-type-hint {
  font-size: 9px;
  color: #666;
  margin-top: 2px;
}

/* Smart-suggested protocol pills (step 2) */
.wiz-proto-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.wiz-proto-pill {
  background: #1A1A1A;
  border: 1px solid rgba(255,255,255,0.1);
  color: #ccc;
  padding: 8px 14px;
  border-radius: 14px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.12s;
  font-family: inherit;
}
.wiz-proto-pill:hover {
  border-color: rgba(6,182,212, 0.5);
  color: #fff;
}
.wiz-proto-pill.on {
  background: rgba(6,182,212, 0.15);
  border-color: #06B6D4;
  color: #06B6D4;
}
.wiz-proto-pill.suggested::before {
  content: '★';
  color: #06B6D4;
  margin-right: 4px;
  font-size: 9px;
}

/* Test-connection result panel (step 4) */
.wiz-test-box {
  background: #0d0d0d;
  border: 1px solid var(--b2, rgba(255,255,255,0.07));
  border-radius: 3px;
  padding: 16px;
  margin-top: 16px;
  font-family: monospace;
  font-size: 11px;
  line-height: 1.7;
  min-height: 80px;
}
.wiz-test-box.testing { border-left: 3px solid #3B82F6; color: #888; }
.wiz-test-box.success { border-left: 3px solid #22C55E; color: #22C55E; background: rgba(34, 197, 94, 0.05); }
.wiz-test-box.failed  { border-left: 3px solid #EF4444; color: #EF4444; background: rgba(239, 68, 68, 0.05); }
.wiz-test-box-title { font-weight: 700; font-size: 12px; margin-bottom: 6px; }
.wiz-test-box-detail { color: #888; font-size: 10px; line-height: 1.6; }

.wiz-autofill-banner {
  margin-top: 12px;
  padding: 10px 12px;
  background: rgba(34, 197, 94, 0.06);
  border: 1px solid rgba(34, 197, 94, 0.25);
  border-left: 3px solid #22C55E;
  border-radius: 2px;
  font-size: 11px;
  color: #ccc;
  display: flex;
  align-items: center;
  gap: 10px;
}
.wiz-autofill-banner strong { color: #22C55E; }
.wiz-autofill-list {
  margin-top: 6px;
  font-family: monospace;
  font-size: 10px;
  color: #888;
}

/* Review step (step 5) */
.wiz-review {
  background: #0f0f0f;
  border: 1px solid var(--b2, rgba(255,255,255,0.07));
  border-radius: 3px;
  padding: 16px 20px;
}
.wiz-review-row {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px dashed rgba(255,255,255,0.04);
  font-size: 12px;
}
.wiz-review-row:last-child { border-bottom: none; }
.wiz-review-key {
  color: #777;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.6px;
  font-weight: 600;
}
.wiz-review-val {
  color: #e8e8e8;
  font-family: monospace;
  word-break: break-all;
}
.wiz-review-val.muted { color: #555; font-style: italic; }
.wiz-review-section {
  font-size: 10px;
  font-weight: 700;
  color: #06B6D4;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 14px 0 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--b2, rgba(255,255,255,0.07));
}
.wiz-review-section:first-child { margin-top: 0; }

/* Footer (Back / Next / Save) */
.wiz-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--b2, rgba(255,255,255,0.07));
}
.wiz-footer-right { display: flex; gap: 8px; }


/* RTL support */
html[dir="rtl"] .pause-modal-msg { border-left: none; border-right: 3px solid #06B6D4; }
html[dir="rtl"] .wiz-autofill-banner { border-left: none; border-right: 3px solid #22C55E; }
html[dir="rtl"] .wiz-test-box.testing,
html[dir="rtl"] .wiz-test-box.success,
html[dir="rtl"] .wiz-test-box.failed { border-left: none; border-right-width: 3px; border-right-style: solid; }


/* Light theme tweaks */
body.light .pause-modal-msg     { background: rgba(6,182,212, 0.04); color: #333; }
body.light .pause-preset        { background: #f5f5f5; color: #333; }
body.light .pause-preset:hover  { background: rgba(6,182,212, 0.08); }
body.light .wiz-card            { background: #fff; }
body.light .wiz-type-card       { background: #fafafa; }
body.light .wiz-step-circle     { background: #fff; }
body.light .wiz-test-box        { background: #fafafa; }
body.light .wiz-review          { background: #fafafa; }
body.light .wiz-review-val      { color: #1a1a1a; }
/* ─────────────── TOPOLOGY MODULE ─────────────── */
.topo-wrap{display:flex;flex-direction:column;height:100%}
.topo-toolbar{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;background:#181818;border-bottom:1px solid var(--b2);gap:12px;flex-wrap:wrap}
.topo-tb-left{display:flex;align-items:center;gap:14px}
.topo-tb-right{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.topo-filter-row{display:flex;align-items:flex-start;gap:14px;padding:10px 14px;background:rgba(6,182,212,0.04);border-bottom:1px solid rgba(6,182,212,0.2);flex-wrap:wrap}
.topo-filter-cell{display:flex;flex-direction:column;gap:4px}
.topo-filter-cell label{font-size:9px;color:#94a3b8;text-transform:uppercase;letter-spacing:1.2px;font-weight:600}
.topo-filter-cell .finput{padding:6px 8px;font-size:11px;height:30px;background:#0f1418;border:1px solid var(--b2);color:#e2e8f0;border-radius:3px}
.topo-filter-cell .finput:focus{outline:none;border-color:#06B6D4}
.topo-tag{font-size:9px;font-weight:700;color:#888;text-transform:uppercase;letter-spacing:1.5px;padding-right:8px;border-right:1px solid var(--b2)}
.topo-stat{display:flex;flex-direction:column;align-items:flex-start;padding:0 8px;border-left:1px solid var(--b2)}
.topo-stat .kv{font-size:14px;font-weight:800;font-family:monospace;line-height:1}
.topo-stat .kl{font-size:8px;color:#4a4a4a;text-transform:uppercase;letter-spacing:1px;margin-top:2px;font-weight:600}
.topo-layout-btn{padding:5px 10px !important;font-size:9px !important}
.topo-layout-btn.on{background:#06B6D4 !important;color:#000 !important;border-color:#06B6D4 !important}

.topo-main{flex:1;display:flex;overflow:hidden;position:relative;min-height:520px}
.topo-canvas-wrap{flex:1;position:relative;background:radial-gradient(ellipse at center,#101820 0%,#0a0a0a 100%);overflow:hidden}
.topo-canvas{position:absolute;inset:0}
.topo-grid{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,transparent,transparent 39px,rgba(6,182,212,.025) 39px,rgba(6,182,212,.025) 40px),repeating-linear-gradient(90deg,transparent,transparent 39px,rgba(6,182,212,.025) 39px,rgba(6,182,212,.025) 40px)}
.topo-scan{position:absolute;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(6,182,212,.4),transparent);animation:topo-scan 6s linear infinite;pointer-events:none}
@keyframes topo-scan{0%{top:0}100%{top:100%}}

.topo-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:20px;pointer-events:none}
.topo-empty-tit{font-size:14px;font-weight:700;color:#e8e8e8;margin-bottom:8px}
.topo-empty-sub{font-size:11px;color:#888;line-height:1.6;max-width:420px}
.topo-empty-sub b{color:#06B6D4}

.topo-legend{position:absolute;bottom:10px;left:10px;background:rgba(20,20,20,.85);backdrop-filter:blur(8px);border:1px solid var(--b2);border-radius:3px;padding:8px 10px;display:flex;gap:10px;font-size:9px;font-family:monospace;color:#ccc;flex-wrap:wrap;z-index:5}
.topo-legend .lgi{display:flex;align-items:center;gap:5px}
.topo-legend .lgd{width:7px;height:7px;border-radius:50%}

.topo-detail{width:0;background:#181818;border-left:1px solid var(--b2);transition:width .25s ease;overflow:hidden;flex-shrink:0}
.topo-detail.open{width:300px}
.topo-d-inner{padding:14px;height:100%;overflow-y:auto;position:relative}
.topo-d-close{position:absolute;top:8px;right:8px;background:transparent;border:1px solid var(--b2);color:#888;width:22px;height:22px;border-radius:2px;cursor:pointer;font-family:monospace;font-size:14px;line-height:1}
.topo-d-close:hover{border-color:#EF4444;color:#EF4444}
.topo-d-hdr{padding-bottom:10px;border-bottom:1px solid var(--b2);margin-bottom:12px}
.topo-d-name{font-size:13px;font-weight:700;color:#fff;margin-bottom:3px;padding-right:24px}
.topo-d-meta{font-size:10px;color:#888;font-family:monospace}
.topo-d-stat{display:inline-flex;align-items:center;gap:4px;font-size:9px;font-weight:700;font-family:monospace;padding:2px 6px;border-radius:2px;margin-top:6px}
.topo-d-stat.rsup{background:rgba(34,197,94,.12);color:#22C55E;border:1px solid rgba(34,197,94,.3)}
.topo-d-stat.rsdn{background:rgba(239,68,68,.12);color:#EF4444;border:1px solid rgba(239,68,68,.3)}
.topo-d-stat.rswn{background:rgba(245,158,11,.12);color:#F59E0B;border:1px solid rgba(245,158,11,.3)}
.topo-d-sec{margin-bottom:12px}
.topo-d-tit{font-size:9px;font-weight:700;color:#888;text-transform:uppercase;letter-spacing:1.2px;margin-bottom:6px;display:flex;align-items:center;gap:5px}
.topo-d-tit::before{content:"";width:2px;height:9px;background:#06B6D4;border-radius:1px}
.topo-d-kv{display:flex;justify-content:space-between;padding:4px 0;border-bottom:1px solid rgba(255,255,255,.04);font-size:10px}
.topo-d-kv:last-child{border-bottom:none}
.topo-d-kv span:first-child{color:#888;text-transform:uppercase;font-size:9px;font-weight:600;letter-spacing:.5px}
.topo-d-kv span:last-child{color:#e8e8e8;font-family:monospace}

.td-chk{display:flex;align-items:center;gap:8px;padding:6px 4px;border-radius:2px;cursor:pointer;font-size:11px;color:#e8e8e8;user-select:none}
.td-chk:hover{background:rgba(255,255,255,.03)}
.td-chk input{accent-color:#06B6D4;cursor:pointer}
.td-chk .td-hint{color:#666;font-size:10px;margin-left:auto}

body.light .topo-toolbar,body.light .topo-detail{background:#fafafa}
body.light .topo-canvas-wrap{background:radial-gradient(ellipse at center,#f0f0f0 0%,#e8e8e8 100%)}
body.light .topo-empty-tit{color:#1a1a1a}
body.light .topo-d-name{color:#1a1a1a}
body.light .topo-d-kv span:last-child{color:#1a1a1a}

/* ─── Full Screen Mode ─────────────────────────────────────────
   Activated by adding `fs-on` to body. Hides topbar (#tb), nav,
   and subnav by floating them off-screen above the viewport.
   #main gets the full viewport. A 14px hover-strip at top reveals
   the bars (slide-down). Pin keeps them open AND reflows #main
   to start below them so content isn't covered.

   Heights used:
     #tb     = 48px  (topbar)
     #nav    = ~40px (top nav row)
     #subnav = ~33px (subnav row, min-height:32px in original)
     total   = ~121px when all three are visible
*/
body.fs-on #tb,
body.fs-on #nav,
body.fs-on #subnav{
  position:fixed;left:0;right:0;z-index:200;
  transform:translateY(-110%);
  transition:transform .25s ease, visibility 0s linear .25s, opacity .25s ease;
  pointer-events:none;
  visibility:hidden;
  opacity:0;
}
body.fs-on #tb     { top:0;    }
body.fs-on #nav    { top:48px; }
body.fs-on #subnav { top:88px; }

/* In raw fullscreen, #main owns the whole viewport. */
body.fs-on #main{
  position:fixed;left:0;right:0;top:0;bottom:0;
  height:100vh;width:100vw;
}

/* Reveal: hover-strip is over the top OR pin is on. */
body.fs-on.fs-reveal #tb,
body.fs-on.fs-reveal #nav,
body.fs-on.fs-reveal #subnav,
body.fs-on.fs-pin #tb,
body.fs-on.fs-pin #nav,
body.fs-on.fs-pin #subnav{
  transform:translateY(0);
  pointer-events:auto;
  visibility:visible;
  opacity:1;
  transition:transform .25s ease, visibility 0s linear 0s, opacity .25s ease;
}

/* When the bars are pinned, push #main down so its top is below
   the subnav row. This way the user gets persistent bars + a
   fully-usable working area, like a normal app but with the
   bars locked. */
body.fs-on.fs-pin #main{
  top:121px;
  height:calc(100vh - 121px);
}

/* Top hover-strip — invisible 14px band at top of screen. Listens
   for mouseenter to trigger reveal. Sits below modals (z:199) and
   below the actual bars when they slide down (z:200). */
#fs-hover-strip{
  position:fixed;top:0;left:0;right:0;height:14px;z-index:199;
  pointer-events:auto;display:none;background:transparent;
}
body.fs-on #fs-hover-strip{display:block}
body.fs-on.fs-pin #fs-hover-strip{display:none}

/* Topbar fullscreen + pin buttons. Match .tbtn sizing so the row
   stays aligned. The pin button only appears in fullscreen. */
#tbfs,#tbpin{
  background:transparent;border:1px solid rgba(255,255,255,.07);
  color:#888;padding:3px 8px;border-radius:2px;cursor:pointer;
  font-size:12px;font-weight:700;font-family:monospace;
  margin-right:4px;transition:all .15s;line-height:1;
}
#tbfs:hover,#tbpin:hover{border-color:#06B6D4;color:#06B6D4}
#tbpin{display:none}
body.fs-on #tbpin{display:inline-flex;align-items:center}
body.fs-pin #tbpin{color:#06B6D4;border-color:#06B6D4;background:rgba(6,182,212,.08)}