/* [yx3010] YAS Cloud Portal - design system v2 ("control room"): loaded LAST by the shell and injected into every embedded page.
   One token set (dark default + light), larger type scale, glass panels with depth, consistent spacing, sticky table headers,
   status glows, motion that respects prefers-reduced-motion. Orange accent kept (owner theme). No inline styles anywhere (CSP). */
html.tx.tx.yx{
 --bg:#06080c;--bg2:#0a0d13;--bg3:#0e121a;--panel:rgba(16,20,28,.82);--panel-s:#10141c;--panel2:rgba(23,28,38,.9);--glass:rgba(16,20,28,.72);--glass2:rgba(23,28,38,.9);--card:rgba(16,20,28,.82);
 --line:rgba(148,163,184,.11);--line2:rgba(148,163,184,.2);--text:#e9ecf2;--muted:#9aa3b5;--dim:#687286;
 --accent:#f39044;--accent2:#ffb36e;--acc:#f39044;--acc2:#c96a22;--soft:rgba(243,144,68,.12);--glow:rgba(243,144,68,.38);
 --ok:#22c55e;--warn:#eab308;--bad:#ef4444;--off:#4b5263;--info:#38bdf8;--cyan:#22d3ee;--violet:#a78bfa;--blue:#3b82f6;
 --c-redlight:#f87171;--c-patrol:#60a5fa;--c-speed:#f39044;--c-other:#a78bfa;
 --font:"Segoe UI Variable Text","Segoe UI",-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Roboto,"Noto Sans Arabic",Arial,sans-serif;
 --head:"Segoe UI Variable Display","Segoe UI",-apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue",Roboto,sans-serif;
 --mono:"Cascadia Mono","SF Mono",ui-monospace,Menlo,Consolas,"Liberation Mono",monospace;
 --fs-xs:11.5px;--fs-s:12.5px;--fs:14px;--fs-m:15px;--fs-l:17px;--fs-xl:22px;--fs-2xl:30px;
 --r:10px;--r-s:7px;--r-l:14px;--sp:12px;--top:52px;
 --sh:0 1px 0 rgba(255,255,255,.035) inset,0 12px 32px -12px rgba(0,0,0,.7),0 2px 6px rgba(0,0,0,.35);
 --sh-l:0 30px 80px -20px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.05);
 --grad:linear-gradient(135deg,#f39044,#ffb36e);
 --yx-fx-acc:243,144,68;--yx-fx-cy:34,211,238;--yx-fx-grid:148,163,184;--yx-fx-k:1;
 --ease:cubic-bezier(.2,.8,.2,1);
 color-scheme:dark}
html.tx.tx.yx[data-theme="light"]{
 --bg:#eef1f6;--bg2:#e6eaf1;--bg3:#dde2ea;--panel:rgba(255,255,255,.86);--panel-s:#fff;--panel2:rgba(246,248,251,.95);--glass:rgba(255,255,255,.78);--glass2:rgba(246,248,251,.95);--card:rgba(255,255,255,.86);
 --line:rgba(15,23,42,.09);--line2:rgba(15,23,42,.16);--text:#111723;--muted:#556074;--dim:#8a93a6;
 --accent:#e0731f;--accent2:#f39044;--acc:#e0731f;--acc2:#b9591a;--soft:rgba(224,115,31,.1);--glow:rgba(224,115,31,.3);
 --ok:#16a34a;--warn:#c48a04;--bad:#dc2626;--off:#a3aab8;--info:#0284c7;--cyan:#0891b2;--violet:#7c3aed;--blue:#2563eb;
 --c-redlight:#dc2626;--c-patrol:#2563eb;--c-speed:#e0731f;--c-other:#7c3aed;
 --sh:0 1px 0 rgba(255,255,255,.7) inset,0 10px 28px -14px rgba(15,23,42,.28),0 1px 3px rgba(15,23,42,.08);
 --sh-l:0 30px 70px -24px rgba(15,23,42,.4),0 0 0 1px rgba(15,23,42,.06);
 --yx-fx-acc:224,115,31;--yx-fx-cy:8,145,178;--yx-fx-grid:15,23,42;--yx-fx-k:.75;color-scheme:light}

/* embedded pages: opaque panels (their dense grids may overflow a cell; translucent panels would show it) */
html.tx.tx.yx:not(.yx-shell){--panel:#10141c;--panel2:#171c26;--glass:#10141c;--glass2:#171c26;--card:#10141c}
html.tx.tx.yx:not(.yx-shell)[data-theme="light"]{--panel:#fff;--panel2:#f6f8fb;--glass:#fff;--glass2:#f6f8fb;--card:#fff}

/* ---------------------------------------------------------------- base typography */
html.yx.tx body{font-family:var(--font);font-size:var(--fs);line-height:1.45;letter-spacing:0;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
html.yx.tx .mono,html.yx.tx code,html.yx.tx pre,html.yx.tx kbd,html.yx.tx .ip,html.yx.tx .rid{font-family:var(--mono);font-size:.92em;letter-spacing:0}
html.yx.tx h1,html.yx.tx h2,html.yx.tx h3,html.yx.tx h4{font-family:var(--head);letter-spacing:-.01em}
html.yx.tx a{color:var(--accent)}
html.yx.tx ::selection{background:var(--glow);color:var(--text)}
html.yx.tx *{scrollbar-color:var(--line2) transparent;scrollbar-width:thin}
html.yx.tx ::-webkit-scrollbar{width:10px;height:10px}html.yx.tx ::-webkit-scrollbar-thumb{background:var(--line2);border-radius:10px;border:3px solid transparent;background-clip:padding-box}
html.yx.tx ::-webkit-scrollbar-thumb:hover{background-color:var(--dim)}
html.yx.tx :focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.yxi{width:18px;height:18px;flex:none;vertical-align:-4px}

/* ---------------------------------------------------------------- animated background (canvas) */
#yxBg{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;opacity:.9}

/* ---------------------------------------------------------------- shell: rail */
html.yx-shell.tx .side{background:linear-gradient(180deg,rgba(10,13,19,.92),rgba(8,10,15,.96));border-right:1px solid var(--line);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);z-index:30}
html.yx-shell.tx[data-theme="light"] .side{background:rgba(255,255,255,.88)}
html.yx-shell.tx body{--side:60px}html.yx-shell.tx body.rail-open{--side:236px}
html.yx-shell.tx .brand{height:var(--top);padding:0 13px;gap:11px;border-bottom:1px solid var(--line)}
html.yx-shell.tx .logo{background:var(--grad)!important;color:#1a0d02!important;border-radius:8px;padding:5px 7px;font:800 12px/1 var(--head);letter-spacing:1.4px;box-shadow:0 0 0 1px rgba(255,255,255,.12) inset,0 6px 18px -6px var(--glow)}
html.yx-shell.tx .brand b{font:650 15px/1.2 var(--head)}html.yx-shell.tx .brand small{font-size:10.5px;letter-spacing:1.2px}
html.yx-shell.tx #nav{padding:8px 8px;gap:2px}
html.yx-shell.tx #nav a{height:40px;padding:0 12px;gap:13px;font-size:14px;border-radius:9px;color:var(--muted)}
html.yx-shell.tx #nav a i{font-size:17px;width:20px}
html.yx-shell.tx #nav a:hover{background:rgba(148,163,184,.08);color:var(--text)}
html.yx-shell.tx #nav a.on{background:linear-gradient(90deg,rgba(243,144,68,.16),rgba(243,144,68,.04));color:var(--text)}
html.yx-shell.tx #nav a.on i{color:var(--accent);filter:drop-shadow(0 0 6px var(--glow))}
html.yx-shell.tx #nav a.on::before{left:-8px;top:9px;bottom:9px;width:3px;background:var(--accent)!important;box-shadow:0 0 12px var(--accent)}
html.yx-shell.tx body.rail-open #nav .navgrp span{font-size:10.5px;letter-spacing:.12em}
html.yx-shell.tx body:not(.rail-open) #nav a span{font-size:13px;padding:5px 10px;border-radius:8px;background:var(--panel-s);box-shadow:var(--sh-l)}
html.yx-shell.tx .pill{font-size:10.5px;line-height:17px;min-width:17px;border-radius:9px}
html.yx-shell.tx .me{padding:10px;gap:10px}html.yx-shell.tx .av{width:32px;height:32px;font-size:13px;background:var(--panel2)!important;box-shadow:0 0 0 1px var(--line2)}
html.yx-shell.tx .me small{font-size:11.5px}html.yx-shell.tx .mename b{font-size:13.5px}

/* ---------------------------------------------------------------- shell: top bar + workspace tabs */
html.yx-shell.tx .main{z-index:1}
html.yx-shell.tx .topbar{height:var(--top);padding:0 14px;gap:10px;background:rgba(9,12,17,.72);backdrop-filter:blur(16px) saturate(1.2);-webkit-backdrop-filter:blur(16px) saturate(1.2);border-bottom:1px solid var(--line)}
html.yx-shell.tx[data-theme="light"] .topbar{background:rgba(255,255,255,.75)}
html.yx-shell.tx .topbar::after{background:linear-gradient(90deg,transparent,rgba(243,144,68,.55),transparent)!important;opacity:.55}
html.yx-shell.tx .topbar h1{font:650 18px/1.2 var(--head);max-width:26vw;margin:0 6px 0 2px}
html.yx-shell.tx .ghost{height:36px;min-width:36px;border-radius:9px;font-size:15px;color:var(--muted)}
html.yx-shell.tx .ghost:hover{color:var(--text);background:rgba(148,163,184,.1);border-color:var(--line)}
html.yx-shell.tx .search-btn{height:36px;border-radius:10px;padding:0 8px 0 12px;font-size:13.5px;min-width:260px;background:rgba(148,163,184,.07);border-color:var(--line2);gap:10px}
html.yx-shell.tx .search-btn span{flex:1;text-align:left}
html.yx-shell.tx .search-btn:hover{border-color:var(--accent);box-shadow:0 0 0 3px var(--soft),0 0 18px -4px var(--glow)}
html.yx-shell.tx kbd{font:600 10.5px/1.6 var(--mono);border-radius:5px;padding:0 5px;background:rgba(148,163,184,.1);border-color:var(--line2)}
html.yx-shell.tx .netbadge{font-size:12px;padding:3px 10px 3px 22px;border-radius:999px}
html.yx-shell.tx .netbadge::before{left:9px;width:7px;height:7px;margin-top:-3.5px;animation:yxPulse 2.4s ease-in-out infinite}
.topbar:has(#subslot .tabs) .search-btn{min-width:0!important}.topbar:has(#subslot .tabs) .search-btn span,.topbar:has(#subslot .tabs) .yx-clock{display:none}
html.yx-shell.tx #subslot{flex:1 1 auto}
.yx-clock{font:600 13px/1 var(--mono);color:var(--muted);white-space:nowrap;padding:0 4px;letter-spacing:.02em}
.yx-clock b{color:var(--text);font-weight:600}
html.yx-shell.tx #tabbar{padding-right:170px!important;height:38px;background:rgba(8,10,15,.55);border-bottom:1px solid var(--line);padding:0 8px;gap:2px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
html.yx-shell.tx[data-theme="light"] #tabbar{background:rgba(255,255,255,.55)}
html.yx-shell.tx #tabbar a{font-size:13px;padding:0 12px;gap:7px;border-radius:9px 9px 0 0;transition:background .18s var(--ease),color .18s}
html.yx-shell.tx #tabbar a.on{background:var(--panel);color:var(--text);box-shadow:inset 0 2px 0 var(--accent)}
html.yx-shell.tx #view{padding:14px 16px 22px;animation:yxRise .32s var(--ease) both}
html.yx-shell.tx #frames iframe.on{animation:yxRise .3s var(--ease) both}
html.yx-shell.tx .bell b{font-size:10px;line-height:15px}

/* ---------------------------------------------------------------- shell: unit sidebar (hosts) */
html.yx-shell.tx #hosts{width:250px;background:rgba(9,12,17,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-right:1px solid var(--line)}
html.yx-shell.tx[data-theme="light"] #hosts{background:rgba(255,255,255,.86)}
html.yx-shell.tx body.hosts-on .main{margin-left:calc(var(--side) + 250px)}
html.yx-shell.tx #hosts .hh{height:var(--top);padding:0 14px}html.yx-shell.tx #hosts .hh b{font-size:12px;letter-spacing:1.2px}html.yx-shell.tx #hosts .hh span{font-size:12px}
html.yx-shell.tx #hosts .hq{padding:10px 10px 8px}html.yx-shell.tx #hosts .hq input{height:36px;font-size:13.5px;border-radius:9px;padding:0 12px}
html.yx-shell.tx #hosts .hl{padding:0 8px 10px}
html.yx-shell.tx #hosts .fold{border-radius:11px;margin:0 0 8px;background:var(--panel);border-color:var(--line)}
html.yx-shell.tx #hosts .fold>.fh{font-size:12.5px;padding:8px 10px;font-weight:600;letter-spacing:.02em;text-transform:capitalize}
html.yx-shell.tx #hosts .fold>.fh em{font-size:11.5px}
html.yx-shell.tx #hosts .hrow{padding:7px 8px 7px 11px;gap:9px;grid-template-columns:10px minmax(0,1fr) auto}
html.yx-shell.tx #hosts .hrow>div{min-width:0}
html.yx-shell.tx #hosts .hrow .hn{font-size:13.5px}html.yx-shell.tx #hosts .hrow small{font-size:11.5px;margin-top:1px}
html.yx-shell.tx #hosts .hrow .hb a,html.yx-shell.tx #hosts .hrow .hb button{width:26px;height:26px;border-radius:7px;font-size:12px}
html.yx-shell.tx #hosts .hrow:hover{background:rgba(243,144,68,.06)}
html.yx-shell.tx #hosts .hrow.on{background:rgba(243,144,68,.1);box-shadow:inset 3px 0 0 var(--accent)}
html.yx-shell.tx #hosts .hfoot{font-size:11.5px;padding:8px 12px}

/* ---------------------------------------------------------------- generic components
   SKIN (every page, shell + embedded): colours, fonts, radii, shadows, focus - never sizes, so the dense embedded pages keep their layout.
   SIZE (portal-native pages in the shell only, html.yx-shell): larger controls, padding, sticky table headers. */
html.yx.tx .card,html.yx.tx .panel,html.yx.tx .box,html.yx.tx .dpan{background:var(--panel);border-color:var(--line);box-shadow:var(--sh)}
html.yx.tx .card,html.yx.tx .dpan{border-radius:var(--r-l)}html.yx.tx .panel,html.yx.tx .box{border-radius:var(--r)}
html.yx.tx .muted{color:var(--muted)}
html.yx.tx .btn,html.yx.tx button.btn,html.yx.tx .ib{font-family:var(--font);font-weight:600;border-color:var(--line2);background:rgba(148,163,184,.07);color:var(--text);transition:border-color .16s,background .16s,box-shadow .2s,transform .1s}
html.yx.tx .btn:hover,html.yx.tx .ib:hover{border-color:var(--accent);background:rgba(243,144,68,.08);box-shadow:0 0 0 3px var(--soft)}
html.yx.tx .btn:active{transform:translateY(1px)}
html.yx.tx .btn.primary,html.yx.tx .ib.acc,html.yx.tx .btn.acc{background:var(--grad)!important;color:#1b0e03!important;border-color:transparent!important;box-shadow:0 8px 22px -10px var(--glow)}
html.yx.tx .btn.primary:hover{filter:brightness(1.06);box-shadow:0 10px 26px -8px var(--glow),0 0 0 3px var(--soft)}
html.yx.tx .btn.danger{color:var(--bad);border-color:rgba(239,68,68,.35)}html.yx.tx .btn.danger:hover{background:rgba(239,68,68,.1);border-color:var(--bad);box-shadow:0 0 0 3px rgba(239,68,68,.12)}
html.yx.tx .btn.warn{color:var(--warn);border-color:rgba(234,179,8,.35)}
html.yx.tx input,html.yx.tx select,html.yx.tx textarea{font-family:var(--font);background:rgba(148,163,184,.06);border-color:var(--line2);color:var(--text);transition:border-color .16s,box-shadow .16s}
html.yx.tx input[type=checkbox],html.yx.tx input[type=radio]{accent-color:var(--accent)}
html.yx.tx input:focus,html.yx.tx select:focus,html.yx.tx textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--soft);outline:none}
html.yx.tx select option{background:var(--panel-s);color:var(--text)}
html.yx.tx th{font-family:var(--font)!important;color:var(--muted);border-bottom-color:var(--line2)!important}
html.yx.tx td{border-bottom-color:var(--line)}
html.yx.tx tbody tr:hover td,html.yx.tx tr.click:hover td{background:rgba(243,144,68,.055)}
html.yx.tx .tag,html.yx.tx .chip,html.yx.tx .pill.tag{font-family:var(--font);font-weight:600}
html.yx.tx .tag.ok{color:var(--ok);border-color:rgba(34,197,94,.35)}html.yx.tx .tag.bad{color:var(--bad);border-color:rgba(239,68,68,.4)}html.yx.tx .tag.warn{color:var(--warn);border-color:rgba(234,179,8,.4)}html.yx.tx .tag.acc{color:var(--accent);border-color:rgba(243,144,68,.4)}
html.yx.tx .dot.on{background:var(--ok);box-shadow:0 0 0 3px rgba(34,197,94,.16),0 0 10px var(--ok);animation:yxPulse 2.4s ease-in-out infinite}
html.yx.tx .tabs a.on{color:var(--text);box-shadow:inset 0 -2px 0 var(--accent)}
html.yx.tx .note{background:rgba(243,144,68,.07);border-color:rgba(243,144,68,.22)}
html.yx.tx .err{background:rgba(239,68,68,.1);border-color:rgba(239,68,68,.35);color:var(--bad)}
html.yx.tx dialog:not(.uid-back){border:1px solid var(--line2);background:var(--panel-s);box-shadow:var(--sh-l);border-radius:var(--r-l)}
html.yx.tx dialog:not(.uid-back)::backdrop{background:rgba(3,5,8,.62);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
html.yx.tx dialog:not(.uid-back)[open]{animation:yxPop .22s var(--ease)}
html.yx.tx .toast{font-family:var(--font);font-weight:600;border-radius:12px;background:var(--panel-s);color:var(--text);border:1px solid rgba(243,144,68,.4);box-shadow:var(--sh-l),0 0 24px -8px var(--glow)}
html.yx.tx .pop{font-family:var(--font);border-radius:10px;background:var(--panel-s);border:1px solid var(--line2);box-shadow:var(--sh-l)}
/* embedded pages: proportional font one step larger than the old 11.5 px mono (same text width, easier to read) */
html.yx.tx:not(.yx-shell) body{font-size:13px}
html.yx.tx:not(.yx-shell) table{font-size:13px}html.yx.tx:not(.yx-shell) th{font-size:11px}
html.yx.tx:not(.yx-shell) .btn,html.yx.tx:not(.yx-shell) .ib{font-size:12.5px}
html.yx.tx:not(.yx-shell) input,html.yx.tx:not(.yx-shell) select,html.yx.tx:not(.yx-shell) textarea{font-size:13px}
html.yx.tx:not(.yx-shell) .tag,html.yx.tx:not(.yx-shell) .chip,html.yx.tx:not(.yx-shell) .pill{font-size:11px}
html.yx.tx:not(.yx-shell) #nav a{font-size:13px}
/* SIZE: portal-native pages (Units list, unit page, Users & roles, Logs, Notifications, Settings) */
html.yx-shell.tx .card{padding:16px 18px;margin-bottom:14px}
html.yx-shell.tx .card h2,html.yx-shell.tx .ch h2{font:650 var(--fs-m)/1.3 var(--head);letter-spacing:.01em;color:var(--text);text-transform:none}
html.yx-shell.tx .card h3{font:650 var(--fs)/1.3 var(--head);color:var(--text)}
html.yx-shell.tx .small{font-size:var(--fs-s)}
html.yx-shell.tx .btn,html.yx-shell.tx button.btn{font-size:13px;height:34px;padding:0 14px;border-radius:9px;gap:7px}
html.yx-shell.tx .btn.sm,html.yx-shell.tx button.btn.sm{height:28px;padding:0 10px;font-size:12.5px;border-radius:8px}
html.yx-shell.tx input,html.yx-shell.tx select{font-size:13.5px;height:36px;border-radius:9px;padding:0 11px}
html.yx-shell.tx textarea{font-size:13.5px;border-radius:9px;padding:8px 11px}
html.yx-shell.tx input[type=checkbox],html.yx-shell.tx input[type=radio]{height:auto}
html.yx-shell.tx label>span{font-size:12.5px;color:var(--muted)}
html.yx-shell.tx #view table{font-size:13.5px;border-collapse:separate;border-spacing:0}
html.yx-shell.tx #view th{position:sticky;top:0;z-index:2;background:var(--panel-s)!important;font:600 11.5px/1.2 var(--font)!important;letter-spacing:.06em!important;text-transform:uppercase;padding:10px 10px;white-space:nowrap;text-align:left}
html.yx-shell.tx #view td{padding:9px 10px}
html.yx-shell.tx .tag,html.yx-shell.tx .chip{font-size:11.5px;line-height:1.5;border-radius:6px;padding:1px 8px}
html.yx-shell.tx .dot{width:9px;height:9px}
html.yx-shell.tx .tabs{padding:4px;border-radius:12px;gap:2px;background:var(--panel);border-color:var(--line)}
html.yx-shell.tx .tabs a{font-size:13.5px;padding:7px 14px;border-radius:9px}
html.yx-shell.tx .tabs a.on{background:rgba(243,144,68,.12)}
html.yx-shell.tx #subslot .tabs a{padding:6px 12px}
html.yx-shell.tx .empty{font-size:13.5px!important;color:var(--muted)!important;padding:14px 12px!important}
html.yx-shell.tx .note,html.yx-shell.tx .warnbox{border-radius:12px;padding:12px 14px;font-size:13.5px}
html.yx-shell.tx .err{border-radius:12px;padding:10px 14px;font-size:13.5px}
html.yx-shell.tx .kvs>div span,html.yx-shell.tx .kl span{font-size:12.5px}html.yx-shell.tx .kvs>div b,html.yx-shell.tx .kl b{font-size:13.5px}
html.yx-shell.tx ul.tl li{font-size:13.5px;padding:8px 2px}html.yx-shell.tx ul.tl time{font-size:12px}
html.yx-shell.tx dialog:not(.uid-back){font-size:var(--fs)}
html.yx-shell.tx .toast{font-size:13.5px;padding:12px 18px}
/* command palette */
html.yx-shell.tx .pal{background:rgba(3,5,8,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
html.yx-shell.tx .palbox{border-radius:16px;box-shadow:var(--sh-l),0 0 40px -16px var(--glow);background:var(--panel-s);border:1px solid var(--line2);animation:yxPop .2s var(--ease)}
html.yx-shell.tx #palq{height:52px;font-size:17px;border-radius:16px 16px 0 0;border:0;border-bottom:1px solid var(--line);background:transparent;padding:0 18px}
html.yx-shell.tx .palres a{padding:10px 14px;font-size:14px;border-radius:10px}html.yx-shell.tx .palres a.sel{background:rgba(243,144,68,.12)}
html.yx-shell.tx .palres .k{font-size:11px;border-radius:6px}
html.yx-shell.tx .pop{font-size:12.5px;line-height:1.45;padding:8px 11px}

html.yx.yp-c .yp-tb>.bar,html.yx.yp-c .yp-tb>.card.bar{padding:0!important;margin:0!important;background:none!important;border:0!important;box-shadow:none!important;border-radius:0!important}
html.yx.yp-c .topbar{min-height:46px;height:auto}
html.yx.yp-c .main>.card,html.yx.yp-c .page>.card{margin-bottom:12px}
html.yx.tx .bar.card{padding:8px 10px}
html.yx.tx .card.tablewrap,html.yx.tx .card.tw,html.yx.tx .card.np{padding:0}

/* ---------------------------------------------------------------- dashboard */
html.yx-shell.tx #view.dashv{overflow:auto;display:block;padding:14px 16px 26px}
.yx-dash{margin-bottom:6px}
.yx-sech{display:flex;align-items:baseline;gap:12px;margin:20px 2px 10px}
.yx-sech h2{margin:0;font:650 16px/1.2 var(--head);color:var(--text)}
.yx-sech span{font-size:12.5px;color:var(--dim)}
/* ribbon */
.yx-rib{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:12px;margin-bottom:14px}
.yx-tile{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto 1fr auto;grid-template-areas:"i l" "n n" "s s" "b b";align-items:center;gap:4px 10px;min-width:0;text-align:left;font:inherit;color:var(--text);cursor:pointer;
 padding:14px 16px 12px;border-radius:var(--r-l);background:var(--panel);border:1px solid var(--line);box-shadow:var(--sh);overflow:hidden;transition:transform .2s var(--ease),border-color .2s,box-shadow .25s,background .2s;isolation:isolate}
.yx-tile::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(260px 120px at 100% 0%,var(--tc-soft,rgba(243,144,68,.12)),transparent 70%);opacity:.9;transition:opacity .25s}
.yx-tile:hover{transform:translateY(-2px);border-color:var(--tc,var(--accent));box-shadow:var(--sh),0 0 0 1px var(--tc,var(--accent)),0 14px 34px -14px var(--tc-glow,var(--glow))}
.yx-tile.on{border-color:var(--tc,var(--accent));box-shadow:var(--sh),0 0 0 1px var(--tc,var(--accent)),0 0 28px -8px var(--tc-glow,var(--glow));background:linear-gradient(180deg,var(--tc-soft,rgba(243,144,68,.12)),var(--panel) 70%)}
.yx-tile.on::after{content:"";position:absolute;left:16px;right:16px;bottom:0;height:2px;border-radius:2px;background:var(--tc,var(--accent));box-shadow:0 0 12px var(--tc,var(--accent))}
.yx-ti{grid-area:i;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;color:var(--tc,var(--accent));background:var(--tc-soft,rgba(243,144,68,.12));box-shadow:inset 0 0 0 1px var(--tc-line,rgba(243,144,68,.25))}
.yx-ti .yxi{width:19px;height:19px}
.yx-tl{grid-area:l;font:600 12px/1.2 var(--font);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.yx-tn{grid-area:n;font:700 28px/1.05 var(--head);font-variant-numeric:tabular-nums;letter-spacing:-.02em;margin-top:6px;display:inline-block;transform-origin:left center}
.yx-tsub{grid-area:s;display:flex;flex-wrap:wrap;gap:2px 12px;font-size:12.5px;color:var(--muted);white-space:nowrap}
.yx-st{font-style:normal;display:inline-flex;align-items:center;gap:6px;padding:2px 6px;margin:0 -6px;border-radius:6px;transition:background .15s,color .15s}
.yx-st[data-st]:hover,.yx-st[data-go]:hover{background:rgba(148,163,184,.12);color:var(--text)}
.yx-st.sel{background:rgba(148,163,184,.16);color:var(--text)}
.yx-st em{width:7px;height:7px;border-radius:50%;background:var(--off);flex:none}
.yx-st.on em{background:var(--ok);box-shadow:0 0 8px var(--ok)}
.yx-st.off.has{color:var(--text)}.yx-st.off.has em{background:var(--bad);box-shadow:0 0 8px var(--bad)}
.yx-st.bad.has{color:var(--bad)}.yx-st.bad em{background:var(--bad)}
.yx-st[data-go] em,.yx-tile.appr .yx-st em{display:none}
.yx-tbar{grid-area:b;height:4px;border-radius:4px;background:rgba(148,163,184,.14);overflow:hidden;margin-top:8px}
.yx-tbar i{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,var(--ok),#4ade80);box-shadow:0 0 10px rgba(34,197,94,.5);transition:width .8s var(--ease)}
.yx-tdev{position:absolute;top:12px;right:12px;font-size:11px;color:var(--dim);border:1px solid var(--line2);border-radius:6px;padding:0 6px}
.yx-tile.c-redlight{--tc:var(--c-redlight);--tc-soft:rgba(248,113,113,.12);--tc-line:rgba(248,113,113,.28);--tc-glow:rgba(248,113,113,.4)}
.yx-tile.c-patrol{--tc:var(--c-patrol);--tc-soft:rgba(96,165,250,.12);--tc-line:rgba(96,165,250,.28);--tc-glow:rgba(96,165,250,.4)}
.yx-tile.c-speed{--tc:var(--c-speed);--tc-soft:rgba(243,144,68,.12);--tc-line:rgba(243,144,68,.28);--tc-glow:rgba(243,144,68,.4)}
.yx-tile.c-other{--tc:var(--c-other);--tc-soft:rgba(167,139,250,.12);--tc-line:rgba(167,139,250,.28);--tc-glow:rgba(167,139,250,.4)}
.yx-tile.fleet{--tc:var(--cyan);--tc-soft:rgba(34,211,238,.1);--tc-line:rgba(34,211,238,.26);--tc-glow:rgba(34,211,238,.35)}
.yx-tile.alert{--tc:var(--warn);--tc-soft:rgba(234,179,8,.1);--tc-line:rgba(234,179,8,.26);--tc-glow:rgba(234,179,8,.35)}
.yx-tile.alert.glow{--tc:var(--bad);--tc-soft:rgba(239,68,68,.13);--tc-line:rgba(239,68,68,.3);--tc-glow:rgba(239,68,68,.45);animation:yxGlow 2.6s ease-in-out infinite}
.yx-tile.alert.glow .yx-tn{color:var(--bad)}
.yx-tile.appr{--tc:var(--violet);--tc-soft:rgba(167,139,250,.1);--tc-line:rgba(167,139,250,.26);--tc-glow:rgba(167,139,250,.35)}
.yx-tile.appr.glow{animation:yxGlowV 2.6s ease-in-out infinite}.yx-tile.appr.glow .yx-tn{color:var(--violet)}
.yx-stagger>*{animation:yxRise .5s var(--ease) both}
.yx-stagger>*:nth-child(2){animation-delay:.04s}.yx-stagger>*:nth-child(3){animation-delay:.08s}.yx-stagger>*:nth-child(4){animation-delay:.12s}.yx-stagger>*:nth-child(5){animation-delay:.16s}.yx-stagger>*:nth-child(6){animation-delay:.2s}.yx-stagger>*:nth-child(7){animation-delay:.24s}
.yx-bump{animation:yxBump .6s var(--ease)}
/* table + map split */
.yx-split{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(360px,1fr);gap:14px;height:min(640px,calc(100vh - 290px));min-height:440px}
.yx-card{display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-l);box-shadow:var(--sh);overflow:hidden;animation:yxRise .45s var(--ease) both}
.yx-mcard{animation-delay:.08s}
.yx-ch{display:flex;align-items:center;gap:10px;padding:10px 12px 10px 16px;border-bottom:1px solid var(--line);flex:none;min-height:54px;flex-wrap:wrap}
.yx-ch h3{display:flex;align-items:center;gap:8px;margin:0;font:650 15px/1.2 var(--head);color:var(--text);white-space:nowrap}
.yx-ch h3 .yxi{color:var(--accent)}
.yx-ch small{color:var(--dim);font-size:12.5px}
.yx-ch .sp{flex:1}
.yx-chips{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.yx-fchip{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 8px 0 11px;border-radius:999px;font:600 12.5px/1 var(--font);color:var(--text);background:rgba(243,144,68,.13);border:1px solid rgba(243,144,68,.4);cursor:pointer;animation:yxPop .2s var(--ease)}
.yx-fchip .yxi{width:14px;height:14px;opacity:.75}.yx-fchip:hover{background:rgba(243,144,68,.22)}
.yx-link{background:none;border:0;color:var(--accent);font:inherit;font-size:12.5px;cursor:pointer;padding:0 4px;text-decoration:underline;text-underline-offset:3px}
.yx-search{display:flex;align-items:center;gap:8px;height:36px;padding:0 10px;border-radius:10px;border:1px solid var(--line2);background:rgba(148,163,184,.06);min-width:240px;flex:0 1 320px;color:var(--dim);transition:border-color .16s,box-shadow .16s}
.yx-search:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--soft);color:var(--accent)}
html.yx.tx .yx-search input{border:0!important;background:none!important;box-shadow:none!important;height:34px;padding:0;flex:1;min-width:0;font-size:13.5px}
.yx-count{font-size:12.5px;color:var(--muted);white-space:nowrap}.yx-count b{color:var(--text);font-variant-numeric:tabular-nums}
.yx-tblw{flex:1;min-height:0;overflow:auto;position:relative}
.yx-fade{animation:yxFade .35s var(--ease)}
html.yx.tx .yx-tbl{width:100%;font-size:13.5px}
html.yx.tx .yx-tbl th{padding:10px 9px;cursor:pointer;user-select:none;-webkit-user-select:none}
html.yx.tx .yx-tbl th:first-child{padding-left:16px}
html.yx.tx .yx-tbl th:hover{color:var(--text)}
html.yx.tx .yx-tbl th.sorted{color:var(--accent)}
.yx-sa{display:inline-block;width:0;height:0;margin-left:5px;vertical-align:2px;border:4px solid transparent;opacity:0}
th.sorted.asc .yx-sa{border-bottom-color:currentColor;border-top-width:0;opacity:1}th.sorted.desc .yx-sa{border-top-color:currentColor;border-bottom-width:0;opacity:1}
html.yx.tx .yx-tbl td{padding:8px 9px;vertical-align:middle;white-space:nowrap}
html.yx.tx .yx-tbl td:first-child{padding-left:16px}
html.yx.tx .yx-tbl tbody tr{cursor:pointer;outline:none}
html.yx.tx .yx-tbl tbody tr.hov td{background:rgba(34,211,238,.06)}
html.yx.tx .yx-tbl tbody tr.sel td{background:rgba(243,144,68,.12)}
html.yx.tx .yx-tbl tbody tr.sel td:first-child{box-shadow:inset 3px 0 0 var(--accent)}
html.yx.tx .yx-tbl tbody tr:focus-visible td{background:rgba(243,144,68,.14)}
.yx-tbl .c-id b{display:block;font:700 14px/1.2 var(--mono);letter-spacing:-.01em}
.yx-tbl .c-id small{display:block;color:var(--muted);font-size:12px;max-width:180px;overflow:hidden;text-overflow:ellipsis}
.yx-tbl .c-site{max-width:180px;overflow:hidden;text-overflow:ellipsis;color:var(--muted)}
.yx-tbl .num{font-variant-numeric:tabular-nums;text-align:right;font-weight:600}
.yx-tbl .mono{font-size:12.5px}
.yx-tbl .c-last{color:var(--muted);font-size:12.5px}
.yx-tbl .c-act{text-align:right;padding-right:12px}
.yx-tbl .c-st{width:1%}
html.yx.tx .yx-tbl td.c-st,html.yx.tx .yx-tbl th.h-st{position:sticky;left:0;z-index:1;background:var(--panel-s)}
html.yx.tx .yx-tbl th.h-st{z-index:3}
html.yx.tx .yx-tbl td.c-id,html.yx.tx .yx-tbl th.h-opid{position:sticky;left:58px;z-index:1;background:var(--panel-s);box-shadow:8px 0 12px -10px rgba(0,0,0,.6)}
html.yx.tx .yx-tbl th.h-opid{z-index:3}
html.yx.tx .yx-tbl td.c-st{min-width:58px;max-width:58px}
html.yx.tx .yx-tbl tbody tr:hover td.c-st,html.yx.tx .yx-tbl tbody tr:hover td.c-id{background:#171b22}
html.yx.tx .yx-tbl tbody tr.sel td.c-st,html.yx.tx .yx-tbl tbody tr.sel td.c-id{background:#22180f}
html.yx.tx[data-theme="light"] .yx-tbl tbody tr:hover td.c-st,html.yx.tx[data-theme="light"] .yx-tbl tbody tr:hover td.c-id{background:#fbf3ec}
html.yx.tx[data-theme="light"] .yx-tbl tbody tr.sel td.c-st,html.yx.tx[data-theme="light"] .yx-tbl tbody tr.sel td.c-id{background:#fbe7d6}
.yx-ib{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:8px;border:1px solid var(--line2);background:rgba(148,163,184,.06);color:var(--muted);margin-left:4px;cursor:pointer;transition:all .15s;vertical-align:middle;padding:0}
.yx-ib .yxi{width:16px;height:16px}
.yx-ib:hover{color:var(--accent);border-color:var(--accent);background:rgba(243,144,68,.1);box-shadow:0 0 12px -3px var(--glow);text-decoration:none}
.yx-dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--off);vertical-align:middle;flex:none}
.yx-dot.sm{width:7px;height:7px;margin-right:6px;vertical-align:1px}
.yx-dot.ok{background:var(--ok);box-shadow:0 0 0 3px rgba(34,197,94,.15),0 0 10px var(--ok);animation:yxPulse 2.6s ease-in-out infinite}
.yx-dot.warn{background:var(--warn);box-shadow:0 0 0 3px rgba(234,179,8,.15),0 0 10px var(--warn)}
.yx-dot.bad,.yx-dot.crit{background:var(--bad);box-shadow:0 0 0 3px rgba(239,68,68,.18),0 0 12px var(--bad);animation:yxPulseR 1.6s ease-in-out infinite}
.yx-dot.off{background:transparent;box-shadow:inset 0 0 0 2px var(--off)}
.yx-dot.sm.ok,.yx-dot.sm.off{animation:none}
.yx-acount{display:inline-block;margin-left:6px;font:700 10.5px/16px var(--font);min-width:16px;text-align:center;border-radius:8px;background:var(--warn);color:#1a1200;vertical-align:middle}
.yx-acount.crit{background:var(--bad);color:#fff}
.yx-cat{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--tc,var(--muted))}
.yx-cat .yxi{width:16px;height:16px}
.yx-cat.c-redlight{--tc:var(--c-redlight)}.yx-cat.c-patrol{--tc:var(--c-patrol)}.yx-cat.c-speed{--tc:var(--c-speed)}.yx-cat.c-other{--tc:var(--c-other)}
.yx-chip{display:inline-block;font:600 11.5px/1.6 var(--font);padding:0 8px;border-radius:6px;border:1px solid var(--line2);color:var(--muted);margin-left:4px}
.yx-chip:first-child{margin-left:0}
.yx-chip.ok{color:var(--ok);border-color:rgba(34,197,94,.35);background:rgba(34,197,94,.07)}
.yx-chip.warn{color:var(--warn);border-color:rgba(234,179,8,.38);background:rgba(234,179,8,.07)}
.yx-chip.bad{color:var(--bad);border-color:rgba(239,68,68,.4);background:rgba(239,68,68,.08)}
.yx-chip.dim{color:var(--dim)}
.yx-na{color:var(--dim)}
.yx-mbar{display:inline-flex;flex-direction:column;gap:3px;min-width:48px}
.yx-mbar b{font:600 12.5px/1 var(--font);font-variant-numeric:tabular-nums}
.yx-mbar i{display:block;height:3px;border-radius:3px;background:rgba(148,163,184,.16);overflow:hidden}
.yx-mbar u{display:block;height:100%;background:var(--ok);border-radius:3px;transition:width .6s var(--ease)}
.yx-mbar.warn b{color:var(--warn)}.yx-mbar.warn u{background:var(--warn)}.yx-mbar.bad b{color:var(--bad)}.yx-mbar.bad u{background:var(--bad);box-shadow:0 0 8px var(--bad)}
.yx-ring circle{fill:none;stroke-width:2.6}.yx-ring .bg{stroke:rgba(148,163,184,.18)}.yx-ring .fg{stroke-linecap:round;transition:stroke-dashoffset .8s var(--ease)}
.yx-ring.ok .fg{stroke:var(--ok)}.yx-ring.warn .fg{stroke:var(--warn)}.yx-ring.bad .fg{stroke:var(--bad)}.yx-ring.off .fg{stroke:var(--off)}
.yx-ring text{font:700 8.5px var(--font);fill:var(--text);text-anchor:middle}
.yx-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:48px 20px;color:var(--muted);text-align:center;animation:yxFade .3s}
.yx-empty .yxi{width:30px;height:30px;color:var(--dim)}.yx-empty b{font-size:15px;color:var(--text)}
.yx-skel{height:100%;min-height:160px;background:linear-gradient(90deg,transparent,rgba(148,163,184,.07),transparent);background-size:200% 100%;animation:yxSkel 1.3s linear infinite}
/* map */
.yx-mapw{position:relative;flex:1;min-height:0}
#yxMap{position:absolute;inset:0}
.yxmap{outline:none;overflow:hidden;background:radial-gradient(120% 120% at 30% 10%,#071019,#03060a 75%);touch-action:none;user-select:none;-webkit-user-select:none}
html.yx[data-theme="light"] .yxmap{background:radial-gradient(120% 120% at 70% 20%,#dde8f2,#c9d6e3 70%)}
.yxm-svg{display:block;cursor:grab}.yxm-svg:active{cursor:grabbing}
.yxmap .sea{fill:transparent}
.yxmap .land{fill:#172230;stroke:rgba(56,189,248,.45);stroke-width:1.2px;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 6px rgba(56,189,248,.18))}
.yxmap .water{fill:#04080d;stroke:rgba(56,189,248,.2);stroke-width:.8px;vector-effect:non-scaling-stroke}
html.yx[data-theme="light"] .yxmap .land{fill:#f5f7fa;stroke:rgba(2,132,199,.35)}html.yx[data-theme="light"] .yxmap .water{fill:#c9d6e3}
.yxmap .grat{fill:none;stroke:rgba(148,163,184,.06);stroke-width:1px}
.yxmap .adm{fill:none;stroke:rgba(148,163,184,.22);stroke-width:.8px;stroke-dasharray:3 3}
.yxmap .ctry{fill:none;stroke:rgba(148,163,184,.5);stroke-width:1.2px}
.yxmap .rd2{fill:none;stroke:rgba(243,144,68,.16);stroke-width:.8px}
.yxmap .rd1g{fill:none;stroke:rgba(243,144,68,.12);stroke-width:4px;stroke-linecap:round}
.yxmap .rd1{fill:none;stroke:rgba(243,144,68,.6);stroke-width:1.2px;stroke-linecap:round}
html.yx[data-theme="light"] .yxmap .rd1{stroke:rgba(224,115,31,.7)}html.yx[data-theme="light"] .yxmap .rd2{stroke:rgba(224,115,31,.25)}html.yx[data-theme="light"] .yxmap .rd1g{stroke:rgba(224,115,31,.08)}
.yxmap .pdot{fill:rgba(203,213,225,.55)}
.yxmap .pl{font:500 11px var(--font);fill:rgba(203,213,225,.6);paint-order:stroke;stroke:rgba(7,10,15,.85);stroke-width:3px;stroke-linejoin:round}
.yxmap .pl.big{font-size:12.5px;font-weight:600;fill:rgba(226,232,240,.78)}
html.yx[data-theme="light"] .yxmap .pl{fill:#475569;stroke:rgba(255,255,255,.9)}html.yx[data-theme="light"] .yxmap .pdot{fill:#64748b}
.yxmap .pin{cursor:pointer;transition:opacity .2s}
.yxmap .pin .dot{fill:var(--ok);stroke:rgba(7,10,15,.9);stroke-width:2px;filter:drop-shadow(0 0 6px rgba(34,197,94,.75))}
.yxmap .pin .core{fill:#fff;opacity:.9}
.yxmap .pin.warn .dot{fill:var(--warn);filter:drop-shadow(0 0 6px rgba(234,179,8,.75))}
.yxmap .pin.bad .dot{fill:var(--bad);filter:drop-shadow(0 0 7px rgba(239,68,68,.85))}
.yxmap .pin.off .dot{fill:#3a4252;filter:none;stroke:#8792a6;stroke-width:1.6px}.yxmap .pin.off .core{opacity:.35}
.yxmap .pin .pulse{fill:none;stroke:var(--bad);stroke-width:2px;animation:yxPing 1.8s ease-out infinite;transform-box:fill-box;transform-origin:center}
.yxmap .pin.warn .pulse{stroke:var(--warn)}
.yxmap .pin .halo{fill:rgba(243,144,68,.16);stroke:var(--accent);stroke-width:1.6px;animation:yxHalo 1.8s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.yxmap .pin .lbl{font:700 12px var(--mono);fill:#f1f5f9;paint-order:stroke;stroke:rgba(5,8,12,.92);stroke-width:3.5px;stroke-linejoin:round}
html.yx[data-theme="light"] .yxmap .pin .lbl{fill:#0f172a;stroke:rgba(255,255,255,.95)}
.yxmap .pin.sel .lbl,.yxmap .pin.hov .lbl{fill:var(--accent2);font-size:13px}
.yxmap .pin.hov .dot{stroke:var(--accent);stroke-width:2.5px}
.yxmap .pin.dim,.yxmap .clu.dim{opacity:.22}
.yxmap .clu{cursor:pointer}
.yxmap .clu .cbg{fill:rgba(12,17,25,.88);stroke:rgba(148,163,184,.3);stroke-width:1px}
html.yx[data-theme="light"] .yxmap .clu .cbg{fill:rgba(255,255,255,.92)}
.yxmap .clu .cring{fill:none;stroke-width:3.2px}.yxmap .clu .cring.ok{stroke:var(--ok)}.yxmap .clu .cring.bad{stroke:var(--bad)}.yxmap .clu .cring.off{stroke:#5b6475}
.yxmap .clu .cn{font:700 12.5px var(--font);fill:var(--text);text-anchor:middle}
.yxmap .clu.hasbad .cbg{filter:drop-shadow(0 0 8px rgba(239,68,68,.6))}
.yxmap .clu:hover .cbg{stroke:var(--accent)}
.yxm-ui{position:absolute;right:12px;top:12px;display:flex;flex-direction:column;gap:6px;z-index:2}
.yxm-ui button{width:34px;height:34px;border-radius:9px;border:1px solid var(--line2);background:rgba(12,17,25,.82);color:var(--text);font:600 17px/1 var(--font);cursor:pointer;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:all .15s}
html.yx[data-theme="light"] .yxm-ui button{background:rgba(255,255,255,.88)}
.yxm-ui button:hover{border-color:var(--accent);color:var(--accent);box-shadow:0 0 14px -4px var(--glow)}
.yxm-attr{position:absolute;right:10px;bottom:6px;font-size:10.5px;color:var(--dim);pointer-events:none}
.yxm-tip{position:absolute;left:0;top:0;z-index:4;pointer-events:none;max-width:280px;padding:9px 12px;border-radius:11px;background:rgba(10,14,21,.94);border:1px solid var(--line2);box-shadow:var(--sh-l);font-size:12.5px;display:flex;flex-direction:column;gap:2px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
html.yx[data-theme="light"] .yxm-tip{background:rgba(255,255,255,.96)}
.yxm-tip b{font-size:13.5px;color:var(--text)}.yxm-tip span{color:var(--muted)}
.yxm-tip .tl,.yxm-np .tl{font-style:normal;display:inline-block}
.yxm-tip .tl.ok{color:var(--ok)}.yxm-tip .tl.bad{color:var(--bad)}.yxm-tip .tl.warn{color:var(--warn)}.yxm-tip .tl.off{color:var(--dim)}
.yxm-tip i.tl{margin-right:8px}
.yxm-np{position:absolute;left:10px;bottom:22px;right:56px;z-index:2;display:flex;flex-wrap:wrap;align-items:center;gap:5px;padding:7px 9px;border-radius:11px;background:rgba(10,14,21,.8);border:1px solid var(--line);font-size:12px;color:var(--muted);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
html.yx[data-theme="light"] .yxm-np{background:rgba(255,255,255,.85)}
.yxm-np b{color:var(--muted);font-weight:600;margin-right:4px}
.yxm-np button{font:600 11.5px/1.7 var(--mono);border-radius:6px;border:1px solid var(--line2);background:rgba(148,163,184,.08);color:var(--text);padding:0 7px;cursor:pointer}
.yxm-np button:hover{border-color:var(--accent);color:var(--accent)}
.yxm-np button.off{color:var(--dim)}.yxm-np button.bad{border-color:rgba(239,68,68,.5)}
/* selection card */
.yx-sel{position:absolute;left:12px;top:12px;z-index:3;width:min(330px,calc(100% - 70px));padding:14px;border-radius:14px;background:rgba(10,14,21,.92);border:1px solid rgba(243,144,68,.35);box-shadow:var(--sh-l),0 0 30px -12px var(--glow);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);animation:yxSlide .28s var(--ease)}
html.yx[data-theme="light"] .yx-sel{background:rgba(255,255,255,.95)}
.yx-selh{display:flex;align-items:center;gap:9px}.yx-selh b{font:700 16px/1.2 var(--mono)}.yx-selh small{color:var(--muted);font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.yx-x{width:28px;height:28px;display:grid;place-items:center;border-radius:8px;border:1px solid transparent;background:none;color:var(--muted);cursor:pointer;padding:0}
.yx-x:hover{border-color:var(--line2);color:var(--text)}.yx-x .yxi{width:16px;height:16px}
.yx-selm{display:flex;flex-wrap:wrap;gap:6px 14px;margin:8px 0 10px;font-size:12.5px;color:var(--muted)}
.yx-selm span{display:inline-flex;align-items:center;gap:5px}.yx-selm .yxi{width:14px;height:14px}
.yx-selg{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-bottom:10px}
.yx-selg div{padding:7px 8px;border-radius:9px;background:rgba(148,163,184,.07);border:1px solid var(--line)}
.yx-selg small{display:block;font-size:10.5px;color:var(--dim);text-transform:uppercase;letter-spacing:.06em}.yx-selg b{font:700 15px/1.2 var(--head);font-variant-numeric:tabular-nums}
.yx-sela{list-style:none;margin:0 0 10px;padding:0;display:flex;flex-direction:column;gap:4px;font-size:12.5px}
.yx-sela li{padding:5px 8px;border-radius:7px;background:rgba(234,179,8,.08);border-left:2px solid var(--warn)}.yx-sela li.bad{background:rgba(239,68,68,.08);border-left-color:var(--bad)}
.yx-selnp{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--dim);margin:0 0 10px}.yx-selnp .yxi{width:14px;height:14px}
.yx-selb{display:flex;flex-wrap:wrap;gap:6px}
.yx-btn{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 11px;border-radius:9px;border:1px solid var(--line2);background:rgba(148,163,184,.07);color:var(--text);font:600 12.5px/1 var(--font);cursor:pointer;text-decoration:none;transition:all .15s}
.yx-btn .yxi{width:15px;height:15px}
.yx-btn:hover{border-color:var(--accent);color:var(--accent);text-decoration:none;box-shadow:0 0 0 3px var(--soft)}
.yx-btn.pri{background:var(--grad);color:#1b0e03;border-color:transparent}.yx-btn.pri:hover{color:#1b0e03;filter:brightness(1.07)}
/* existing dashboard parts restyled (Fleet KPIs = old totals strip, Live analytics = old panels) */
html.yx.tx .tot{border-radius:var(--r-l);background:var(--panel);box-shadow:var(--sh);grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
html.yx.tx .tot>a{padding:12px 16px;gap:2px}
html.yx.tx .tot b{font:700 22px/1.15 var(--head)}html.yx.tx .tot b small{font-size:13px}
html.yx.tx .tot span{font-size:11.5px;letter-spacing:.07em}html.yx.tx .tot em{font-size:12px}
html.yx.tx .tot>a:hover{background:rgba(243,144,68,.06)}
html.yx.tx .dmain{display:grid;height:auto;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr) minmax(0,1fr);grid-auto-rows:640px;gap:14px;margin-bottom:14px}
html.yx.tx .dmain>.dcol:nth-child(3){display:flex;grid-column:auto}
html.yx.tx .dcol{gap:14px}
html.yx.tx .dbot{height:300px;gap:14px}
html.yx.tx .dpan>.ph{height:44px;padding:0 14px;gap:9px}
html.yx.tx .dpan>.ph h3{font:650 13.5px/1.2 var(--head);letter-spacing:.02em;text-transform:none;color:var(--text)}
html.yx.tx .dpan>.ph h3 i{font-size:14px}
html.yx.tx .dpan>.ph small{font-size:12px}
html.yx.tx .dpan>.pb{padding:10px 14px}
html.yx.tx .ucards{grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:10px;padding:10px}
html.yx.tx .uc{border-radius:12px;background:var(--panel2);border-color:var(--line);transition:transform .2s var(--ease),border-color .2s,box-shadow .2s}
html.yx.tx .uc:hover{transform:translateY(-2px);border-color:rgba(243,144,68,.45);box-shadow:0 14px 30px -16px var(--glow)}
html.yx.tx .uc .uh b{font-size:14px}html.yx.tx .uc .uh small{font-size:12px}
html.yx.tx .gg .gl span,html.yx.tx .gg .gl b{font-size:11.5px}
html.yx.tx .vchip,html.yx.tx .ico,html.yx.tx .lic,html.yx.tx .qbtn{font-size:11px}
html.yx.tx .feed li{font-size:13px;padding:7px 12px}html.yx.tx .feed li time{font-size:11.5px}
html.yx.tx .feed li button.ack{font-size:11px;border-radius:6px}
html.yx.tx .sevbar button{font-size:12px;border-radius:7px;padding:2px 9px}
html.yx.tx svg.ch text{font-size:9px}
html.yx.tx .lg{font-size:11.5px}
html.yx.tx .hbars .hr{font-size:12.5px}
html.yx.tx .capc{border-radius:12px}html.yx.tx .capc b{font-size:13.5px}
html.yx.tx .secg b{font-size:20px}html.yx.tx .secg span{font-size:11.5px}
html.yx.tx .ticker{font-size:12.5px}
/* unit drawer */
html.yx.tx .udrawer{width:min(980px,92vw);background:rgba(10,13,19,.96);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-left:1px solid var(--line2);box-shadow:var(--sh-l)}
html.yx.tx[data-theme="light"] .udrawer{background:rgba(255,255,255,.97)}
html.yx.tx .udrawer .dh{height:60px;padding:0 16px;gap:10px}html.yx.tx .udrawer .dh h2{font:650 18px/1.2 var(--head)}
html.yx.tx .dscrim.on{background:rgba(3,5,8,.5);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
html.yx.tx .wg .w{border-radius:12px;background:var(--panel2);border-color:var(--line)}
html.yx.tx .wg .w h4{font:650 13px/1.2 var(--head);letter-spacing:.02em;text-transform:none}
html.yx.tx .wg .w .big{font-size:24px}
html.yx.tx .ifl div{font-size:13px}
html.yx.tx .svl span{font-size:11.5px}

/* ---------------------------------------------------------------- units pages (P2): left panel + master table + dial unit page + 80 % popup */
html.yx-shell.tx body.yx-upage #hosts{display:none}
html.yx-shell.tx body.yx-upage.hosts-on .main{margin-left:var(--side)}
.yx-ulay{display:grid;grid-template-columns:280px minmax(0,1fr);gap:14px;height:calc(100vh - var(--top) - 38px - 36px);min-height:520px}
.yx-uside{display:flex;flex-direction:column;min-height:0;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-l);box-shadow:var(--sh);overflow:hidden;animation:yxRise .4s var(--ease) both}
.yx-ush{display:flex;align-items:center;gap:8px;padding:14px 14px 8px}.yx-ush b{display:flex;align-items:center;gap:8px;font:650 15px/1 var(--head)}.yx-ush b .yxi{color:var(--accent)}
.yx-ush span{margin-left:auto;font-size:12px;color:var(--muted)}
.yx-search.sm{margin:0 12px;min-width:0;flex:none;height:36px}
.yx-usf{display:flex;gap:4px;padding:8px 12px;flex-wrap:wrap}
.yx-usf button{font:600 12px/1 var(--font);height:26px;padding:0 10px;border-radius:999px;border:1px solid var(--line2);background:none;color:var(--muted);cursor:pointer;transition:all .15s}
.yx-usf button:hover{color:var(--text);border-color:var(--dim)}.yx-usf button.on{color:#1b0e03;background:var(--accent);border-color:var(--accent)}
.yx-usl{flex:1;min-height:0;overflow:auto;padding:4px 8px 12px}
.yx-usg{margin-bottom:6px}
.yx-usgh{display:flex;align-items:center;gap:8px;width:100%;padding:8px 8px;border:0;background:none;color:var(--tc,var(--muted));font:700 12px/1 var(--font);letter-spacing:.06em;text-transform:uppercase;cursor:pointer;border-radius:8px}
.yx-usgh:hover{background:rgba(148,163,184,.07)}.yx-usgh .yxi{width:16px;height:16px}.yx-usgh b{flex:1;text-align:left}.yx-usgh em{font-style:normal;color:var(--dim);font-weight:600;letter-spacing:0}
.yx-usgh::after{content:"▾";color:var(--dim);transition:transform .2s}.yx-usg.shut .yx-usgh::after{transform:rotate(-90deg)}
.yx-usg.shut .yx-usr{display:none}
.yx-usg.c-redlight{--tc:var(--c-redlight)}.yx-usg.c-patrol{--tc:var(--c-patrol)}.yx-usg.c-speed{--tc:var(--c-speed)}.yx-usg.c-other{--tc:var(--c-other)}
.yx-usr{display:flex;align-items:center;gap:10px;padding:8px 10px;margin:1px 0;border-radius:10px;color:var(--text);text-decoration:none!important;transition:background .14s,transform .14s;outline:none}
.yx-usr:hover,.yx-usr:focus-visible{background:rgba(243,144,68,.07)}
.yx-usr.on{background:linear-gradient(90deg,rgba(243,144,68,.18),rgba(243,144,68,.05));box-shadow:inset 3px 0 0 var(--accent)}
.yx-usn{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.yx-usn b{font:700 13.5px/1.2 var(--mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.yx-usn i{font-style:normal;font-size:12.5px;color:var(--text);opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.yx-usn small{font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.yx-empty.sm{padding:22px 10px}
.yx-umain{min-width:0;min-height:0;display:flex;flex-direction:column}
.yx-ulist{flex:1;min-height:0}
.yx-ulist select{height:36px;border-radius:10px;padding:0 10px;font-size:13px;background:rgba(148,163,184,.06);border:1px solid var(--line2);color:var(--text)}
.yx-btn.on{border-color:var(--accent);color:var(--accent);background:rgba(243,144,68,.1)}
.yx-unote{margin:10px 14px 0}
.yx-nohb{margin:0 18px 14px;display:flex;align-items:center;gap:8px}.yx-nohb .yxi{color:var(--warn)}
html.yx.tx .yx-ltbl td.c-id small{max-width:220px}
.yx-gbody .yx-grow td{background:rgba(148,163,184,.05)!important;padding:10px 16px!important;border-bottom:1px solid var(--line2)}
.yx-grow .yx-count{margin-left:12px}
.yx-hc{display:inline-flex;align-items:center;gap:6px}.yx-hc .yx-mbar{min-width:46px}
.yx-thumb{display:inline-block;width:64px;height:36px;border-radius:6px;overflow:hidden;background:rgba(148,163,184,.08);vertical-align:middle}.yx-thumb img{width:100%;height:100%;object-fit:cover;display:block}
html.yx.tx a.yx-btn,html.yx.tx a.yx-ib{color:var(--text)}html.yx.tx a.yx-ib{color:var(--muted)}
html.yx.tx a.yx-btn:hover,html.yx.tx a.yx-ib:hover{color:var(--accent)}
html.yx.tx .yx-utabs a{color:var(--muted)}html.yx.tx .yx-utabs a:hover,html.yx.tx .yx-utabs a.on{color:var(--text)}
html.yx.tx a.yx-usr{color:var(--text)}
/* unit page */
.yx-upanel{flex:1;min-height:0;overflow:auto;padding:0 0 18px}
.yx-uhead{display:flex;align-items:center;gap:14px;padding:16px 18px 12px;flex-wrap:wrap}
.yx-uhead .yx-ib{width:34px;height:34px;font-size:20px;margin:0}
.yx-uring svg{display:block}
.yx-uht{min-width:0}
.yx-uht h2{margin:0;font:600 22px/1.2 var(--head);letter-spacing:-.01em}.yx-uht h2 b{font:800 22px/1.2 var(--mono);color:var(--accent)}
.yx-uhm{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin-top:6px;font-size:12.5px}
.yx-uhm .yx-chip{margin:0}
.yx-um{display:inline-flex;align-items:center;gap:5px;color:var(--muted)}.yx-um .yxi{width:14px;height:14px}.yx-um.mono{font-family:var(--mono);font-size:12px}
.yx-uacts{display:flex;flex-wrap:wrap;gap:6px}
.yx-upres{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-top:8px;font-size:12.5px;padding:6px 10px;border-radius:10px;width:fit-content}
.yx-upres .yxi{width:15px;height:15px}
.yx-upres.ok{color:var(--ok);background:rgba(34,197,94,.07);border:1px solid rgba(34,197,94,.25)}
.yx-upres.warn{color:var(--warn);background:rgba(234,179,8,.1);border:1px solid rgba(234,179,8,.45);animation:yxGlowW 2.4s ease-in-out infinite}
.yx-upres.warn span{color:var(--text)}
@keyframes yxGlowW{50%{box-shadow:0 0 18px -6px rgba(234,179,8,.6)}}
.yx-prow{display:flex;gap:8px;margin-top:12px}.yx-prow input{flex:1;max-width:320px}
.yx-utabs{display:flex;gap:4px;padding:4px;margin:0 18px 16px;border-radius:14px;background:rgba(148,163,184,.06);border:1px solid var(--line);overflow-x:auto;scrollbar-width:none;position:sticky;top:0;z-index:3;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.yx-utabs::-webkit-scrollbar{display:none}
.yx-utabs a{flex:1 0 auto;display:flex;align-items:center;justify-content:center;gap:8px;padding:10px 14px;border-radius:10px;color:var(--muted);font:600 13.5px/1 var(--font);text-decoration:none!important;white-space:nowrap;transition:all .18s var(--ease);outline:none}
.yx-utabs a .yxi{width:17px;height:17px}
.yx-utabs a em{font-style:normal;font-size:11px;color:var(--dim);background:rgba(148,163,184,.1);border-radius:999px;padding:1px 7px}
.yx-utabs a .yx-dot.sm{margin:0}
.yx-utabs a:hover{color:var(--text);background:rgba(148,163,184,.08)}
.yx-utabs a.on{color:var(--text);background:var(--panel-s);box-shadow:0 0 0 1px rgba(243,144,68,.45),0 6px 18px -8px var(--glow)}.yx-utabs a.on .yxi{color:var(--accent)}
.yx-utabs a:focus-visible{box-shadow:0 0 0 2px var(--accent)}
.yx-dials{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px;padding:0 18px}
.yx-dial{position:relative;display:flex;flex-direction:column;gap:6px;text-align:left;font:inherit;color:var(--text);cursor:pointer;padding:14px 16px 12px;border-radius:16px;min-height:170px;background:linear-gradient(160deg,rgba(148,163,184,.07),rgba(148,163,184,.02) 60%),var(--panel2);border:1px solid var(--line);box-shadow:var(--sh);overflow:hidden;transition:transform .2s var(--ease),border-color .2s,box-shadow .25s;isolation:isolate}
.yx-dial::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(220px 110px at 100% 0%,var(--dc-soft,transparent),transparent 70%)}
.yx-dial:hover,.yx-dial:focus-visible{transform:translateY(-3px);border-color:var(--dc,var(--accent));box-shadow:var(--sh),0 0 0 1px var(--dc,var(--accent)),0 16px 34px -16px var(--dc-glow,var(--glow));outline:none}
.yx-dial.ok{--dc:var(--ok);--dc-soft:rgba(34,197,94,.1);--dc-glow:rgba(34,197,94,.4)}
.yx-dial.warn{--dc:var(--warn);--dc-soft:rgba(234,179,8,.12);--dc-glow:rgba(234,179,8,.4)}
.yx-dial.bad{--dc:var(--bad);--dc-soft:rgba(239,68,68,.14);--dc-glow:rgba(239,68,68,.45);border-color:rgba(239,68,68,.35)}
.yx-dial.bad .yx-dv{color:var(--bad)}.yx-dial.warn .yx-dv{color:var(--warn)}
.yx-dial.off,.yx-dial.na{--dc:var(--dim)}
.yx-dh{display:flex;align-items:center;gap:9px}
.yx-di{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;color:var(--dc,var(--accent));background:rgba(148,163,184,.08);box-shadow:inset 0 0 0 1px var(--line2)}
.yx-dial.na .yx-di,.yx-dial.off .yx-di{color:var(--muted)}
.yx-dh b{flex:1;font:650 13px/1.2 var(--font);letter-spacing:.04em;text-transform:uppercase;color:var(--muted);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.yx-dv{font:700 26px/1.15 var(--head);font-variant-numeric:tabular-nums;letter-spacing:-.02em;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.yx-ds{font-size:12.5px;color:var(--muted);line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:1.35em}
.yx-dt{margin-top:auto;display:flex;align-items:center;gap:5px;font-size:11.5px;color:var(--dim)}.yx-dt .yxi{width:13px;height:13px}
.yx-spark{width:100%;height:34px;display:block;margin:2px 0}
.yx-spark .a{fill:rgba(56,189,248,.12);stroke:none}.yx-spark .l{fill:none;stroke:var(--cyan);stroke-width:1.6}
.yx-spark.warm .a{fill:rgba(234,179,8,.12)}.yx-spark.warm .l{stroke:var(--warn)}
.yx-whid{display:none}
.yx-bctip[hidden],.yxm-tip[hidden],.yxm-np[hidden],.yx-sel[hidden],.yx-help[hidden]{display:none!important}
/* 80 % popup */
.yx-pop{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;background:rgba(3,5,8,.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);padding:3vh 3vw}
.yx-pop[hidden]{display:none}
.yx-pop.in{animation:yxFade .2s}.yx-pop.in .yx-popbox{animation:yxZoom .28s var(--ease)}
.yx-popbox{width:min(80vw,1500px);height:80vh;display:flex;flex-direction:column;background:var(--panel-s);border:1px solid var(--line2);border-radius:20px;box-shadow:var(--sh-l),0 0 60px -24px var(--glow);overflow:hidden}
.yx-poph{display:flex;align-items:center;gap:12px;padding:14px 16px 14px 20px;border-bottom:1px solid var(--line);flex:none;background:linear-gradient(180deg,rgba(148,163,184,.05),transparent)}
.yx-popi{width:40px;height:40px;flex:none;border-radius:12px;display:grid;place-items:center;color:var(--accent);background:rgba(243,144,68,.1);box-shadow:inset 0 0 0 1px rgba(243,144,68,.3)}
.yx-popi.bad{color:var(--bad);background:rgba(239,68,68,.1);box-shadow:inset 0 0 0 1px rgba(239,68,68,.35)}.yx-popi.warn{color:var(--warn)}.yx-popi.ok{color:var(--ok);background:rgba(34,197,94,.08);box-shadow:inset 0 0 0 1px rgba(34,197,94,.3)}
.yx-popi .yxi{width:22px;height:22px}
.yx-popt{min-width:0}.yx-popt b{display:block;font:650 19px/1.2 var(--head)}.yx-popt small{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--muted);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.yx-popnav{display:flex;gap:4px}.yx-popnav[hidden]{display:none}.yx-popnav .yx-x{font-size:20px;width:34px;height:34px;border-color:var(--line2)}
.yx-popx{width:36px;height:36px}
.yx-popb{flex:1;min-height:0;overflow:auto;padding:20px 22px 26px}
.yx-popb .wg.yx-wone{display:block}
.yx-popb .wg .w{min-height:0;padding:18px}
.yx-popb .wg .w h4{font-size:15px}
.yx-popb .wg .w .big{font-size:38px}
.yx-popb .wg svg.ch{height:min(46vh,420px)!important;max-height:none}
.yx-popb .wg .donut{width:200px;height:200px}
.yx-popb .kl,.yx-popb .ifl div{font-size:14px}
.yx-pextra{margin-top:16px}
.yx-kvs{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:8px 18px}
html.yx.tx .yx-kvs>div{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--line)}
html.yx.tx .yx-kvs>div span{color:var(--muted)}html.yx.tx .yx-kvs>div b{text-align:right;word-break:break-word}
body.yx-popon{overflow:hidden}
@keyframes yxZoom{from{opacity:0;transform:scale(.96) translateY(10px)}to{opacity:1;transform:none}}
@media (max-width:1180px){.yx-ulay{grid-template-columns:240px minmax(0,1fr)}}
@media (max-width:900px){.yx-ulay{grid-template-columns:1fr;height:auto}.yx-uside{max-height:320px}.yx-ulist{min-height:70vh}.yx-popbox{width:96vw;height:90vh}.yx-dials{grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px;padding:0 12px}.yx-dial{min-height:150px}.yx-utabs{margin:0 12px 12px}.yx-utabs a{flex:0 0 auto}}

/* popup history charts */
.yx-popb.has-bc .w svg.ch,.has-bc .wg .w svg.ch{display:none}
.yx-bc{margin-top:16px;padding:16px 18px;border-radius:14px;background:var(--panel2);border:1px solid var(--line)}
.yx-bch{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:10px}.yx-bch b{font:650 15px/1.2 var(--head)}.yx-bch span{font-size:12px;color:var(--dim)}
.yx-bcst{display:flex;flex-wrap:wrap;gap:8px 18px;margin-bottom:10px}
.yx-bcs{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted)}.yx-bcs i{width:10px;height:3px;border-radius:2px;background:var(--cyan)}
.yx-bcs.s2 i{background:var(--violet)}.yx-bcs.warm i{background:var(--warn)}
.yx-bcs b{color:var(--text);font-variant-numeric:tabular-nums}.yx-bcs em{font-style:normal;color:var(--dim)}
.yx-bcw{position:relative}
.yx-bcsvg{display:block;width:100%;height:auto;cursor:crosshair}
.yx-bcsvg .gr{stroke:rgba(148,163,184,.12);stroke-width:1}.yx-bcsvg .gr.v{stroke-dasharray:2 4}
.yx-bcsvg .ax{font:11px var(--font);fill:var(--dim)}.yx-bcsvg .ax.thr{fill:var(--bad)}
.yx-bcsvg .thr{stroke:var(--bad);stroke-width:1.2;stroke-dasharray:6 4}
.yx-bcsvg .ln{fill:none;stroke:var(--cyan);stroke-width:1.8;stroke-linejoin:round}
.yx-bcsvg .ar{fill:rgba(34,211,238,.1);stroke:none}
.yx-bcsvg .ln.s2{stroke:var(--violet)}.yx-bcsvg .ar.s2{fill:rgba(167,139,250,.06)}
.yx-bcsvg .ln.warm{stroke:var(--warn)}.yx-bcsvg .ar.warm{fill:rgba(234,179,8,.1)}
.yx-bcsvg .xh{stroke:var(--accent);stroke-width:1}
.yx-bctip{position:absolute;left:0;top:0;pointer-events:none;padding:8px 11px;border-radius:10px;background:rgba(10,14,21,.95);border:1px solid var(--line2);box-shadow:var(--sh-l);font-size:12.5px;display:flex;flex-direction:column;gap:3px;white-space:nowrap}
html.yx[data-theme="light"] .yx-bctip{background:rgba(255,255,255,.97)}
.yx-bctip b{font-size:12px;color:var(--muted);font-weight:600}.yx-bctip span{display:flex;align-items:center;gap:6px}.yx-bctip i{width:8px;height:3px;border-radius:2px;background:var(--cyan)}
.yx-bctip span.s2 i{background:var(--violet)}.yx-bctip span.warm i{background:var(--warn)}

/* ---------------------------------------------------------------- P3 table pages (RustDesk / SSH / YASConnect) */
.yx-tv{display:flex;flex-direction:column;gap:12px;min-height:calc(100vh - var(--top) - 38px - 40px)}
.yx-tvh{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.yx-tvt{display:flex;align-items:center;gap:12px}.yx-tvt>.yxi{width:40px;height:40px;padding:9px;border-radius:12px;color:var(--accent);background:rgba(243,144,68,.1);box-shadow:inset 0 0 0 1px rgba(243,144,68,.3)}
.yx-tvt h2{margin:0;font:650 20px/1.2 var(--head)}.yx-tvt small{display:block;color:var(--muted);font-size:12.5px;margin-top:2px}
.yx-hchips{display:inline-flex;align-items:center;gap:8px}
.yx-tvchips{display:flex;flex-wrap:wrap;gap:8px}
.yx-tchip{display:inline-flex;align-items:baseline;gap:8px;padding:9px 14px;border-radius:12px;border:1px solid var(--line);background:var(--panel);box-shadow:var(--sh);color:var(--muted);font:600 12.5px/1 var(--font);cursor:pointer;transition:all .18s var(--ease)}
.yx-tchip b{font:700 20px/1 var(--head);color:var(--text);font-variant-numeric:tabular-nums}
.yx-tchip:hover{transform:translateY(-1px);border-color:var(--dim)}
.yx-tchip.ok b{color:var(--ok)}.yx-tchip.bad b{color:var(--bad)}.yx-tchip.warn b{color:var(--warn)}.yx-tchip.acc b{color:var(--accent)}
.yx-tchip.on{border-color:var(--accent);background:linear-gradient(180deg,rgba(243,144,68,.14),var(--panel));color:var(--text);box-shadow:var(--sh),0 0 0 1px var(--accent),0 8px 20px -10px var(--glow)}
.yx-tvcard{flex:1;min-height:420px}
html.yx.tx .yx-tvtbl td{white-space:nowrap}
html.yx.tx .yx-tvtbl td b{display:block;font:700 13.5px/1.25 var(--mono)}
html.yx.tx .yx-tvtbl td small{display:block;color:var(--muted);font-size:12px;max-width:260px;overflow:hidden;text-overflow:ellipsis}
html.yx.tx .yx-tvtbl td.c-acts{text-align:right}
html.yx.tx .yx-tvtbl tr.pend td{background:rgba(234,179,8,.05)}
html.yx.tx .yx-tvtbl td.c-st,html.yx.tx .yx-tvtbl th.h-st{position:sticky;left:0;z-index:1;background:var(--panel-s);width:1%}
html.yx.tx .yx-tvtbl td.c-opid,html.yx.tx .yx-tvtbl th.h-opid{position:sticky;left:44px;z-index:1;background:var(--panel-s);box-shadow:8px 0 12px -10px rgba(0,0,0,.6)}
html.yx.tx .yx-tvtbl td.c-acts,html.yx.tx .yx-tvtbl th.h-acts{position:sticky;right:0;z-index:1;background:var(--panel-s);box-shadow:-8px 0 12px -10px rgba(0,0,0,.6)}
html.yx.tx .yx-tvtbl th.h-st,html.yx.tx .yx-tvtbl th.h-opid,html.yx.tx .yx-tvtbl th.h-acts{z-index:3}
html.yx.tx .yx-tvtbl tbody tr:hover td.c-st,html.yx.tx .yx-tvtbl tbody tr:hover td.c-opid,html.yx.tx .yx-tvtbl tbody tr:hover td.c-acts{background:#171b22}
html.yx.tx[data-theme="light"] .yx-tvtbl tbody tr:hover td.c-st,html.yx.tx[data-theme="light"] .yx-tvtbl tbody tr:hover td.c-opid,html.yx.tx[data-theme="light"] .yx-tvtbl tbody tr:hover td.c-acts{background:#fbf3ec}
html.yx.tx .yx-tvtbl td.c-eng,html.yx.tx .yx-tvtbl td.c-site{max-width:170px;overflow:hidden;text-overflow:ellipsis}
.yx-cp{display:inline-grid;place-items:center;width:22px;height:22px;margin-left:6px;border-radius:6px;border:1px solid transparent;background:none;color:var(--dim);cursor:pointer;vertical-align:middle;padding:0;opacity:.0;transition:opacity .15s}
tr:hover .yx-cp{opacity:1}.yx-cp:hover{color:var(--accent);border-color:var(--line2)}.yx-cp .yxi{width:13px;height:13px}
.yx-pres{display:inline-flex;align-items:center;gap:6px;padding:2px 8px;border-radius:999px;background:rgba(234,179,8,.12);border:1px solid rgba(234,179,8,.45);color:var(--warn);font-size:12px;font-weight:600}
.yx-pres .yxi{width:13px;height:13px}
.yx-btn.sm{height:28px;padding:0 10px;font-size:12px;border-radius:8px}
.yx-btn.warn{color:var(--warn);border-color:rgba(234,179,8,.45)}
.yx-btn[disabled]{opacity:.4;cursor:not-allowed;box-shadow:none}
.yx-pacts{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
html.yx-shell.tx #subslot .tabs a{color:var(--muted)}html.yx-shell.tx #subslot .tabs a.on,html.yx-shell.tx #subslot .tabs a:hover{color:var(--text)}
html.yx-shell.tx #subslot .tabs a.yx-back{color:var(--accent);font-weight:700}
/* SSH terminal inside the 80 % popup */
.yx-popb.yx-termb{padding:0;background:#0b0b0d;overflow:hidden}
.yx-term{display:block;width:100%;height:100%;border:0;background:#0b0b0d}

/* ---------------------------------------------------------------- P4: licences page, pull-down fleet ribbon, engineer computers */
.yx-seg{display:inline-flex;gap:3px;padding:4px;border-radius:12px;background:var(--panel);border:1px solid var(--line);width:fit-content;box-shadow:var(--sh)}
.yx-seg button{font:600 13px/1 var(--font);padding:9px 16px;border-radius:9px;border:0;background:none;color:var(--muted);cursor:pointer;transition:all .16s}
.yx-seg button:hover{color:var(--text);background:rgba(148,163,184,.08)}
.yx-seg button.on{color:var(--text);background:var(--panel-s);box-shadow:0 0 0 1px rgba(243,144,68,.5),0 6px 16px -8px var(--glow)}
.yx-feat{display:inline-block;margin:1px 4px 1px 0;padding:1px 7px;border-radius:6px;font-size:11.5px;font-weight:600;color:var(--cyan);background:rgba(34,211,238,.08);border:1px solid rgba(34,211,238,.25);text-transform:uppercase;letter-spacing:.03em;font-size:10.5px}
html.yx.tx .yx-lictbl td.c-feat{white-space:normal;min-width:220px;max-width:340px}
html.yx.tx .yx-tvtbl td small{display:block}
.yx-lb{font:600 13px/1.2 var(--font)!important}
.yx-aud li{font-size:13px}
/* pull-down fleet ribbon */
.yx-slide{position:relative;z-index:6;height:0}
.yx-slw{position:absolute;top:-33px;right:14px;display:flex;flex-direction:column-reverse;align-items:flex-end;width:min(1100px,calc(100vw - 120px));pointer-events:none}
.yx-slw>*{pointer-events:auto}
.yx-slide[hidden]{display:none}
.yx-slt{display:inline-flex;align-items:center;gap:8px;height:28px;padding:0 12px 0 10px;border:1px solid rgba(243,144,68,.45);border-radius:999px;background:rgba(10,14,21,.9);color:var(--text);font:600 12px/1 var(--font);cursor:pointer;box-shadow:0 8px 20px -10px rgba(0,0,0,.7),0 0 16px -8px var(--glow);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:transform .2s var(--ease)}
html.yx[data-theme="light"] .yx-slt{background:rgba(255,255,255,.92)}
.yx-slt:hover{transform:translateY(-1px);border-color:var(--accent)}
.yx-slt i{font-style:normal;font-size:11.5px;padding:1px 6px;border-radius:6px;background:rgba(148,163,184,.12);margin-left:2px}
.yx-slt i.bad{background:rgba(239,68,68,.18);color:var(--bad)}.yx-slt i.warn{background:rgba(234,179,8,.16);color:var(--warn)}.yx-slt i.vi{background:rgba(167,139,250,.16);color:var(--violet)}
.yx-sld{width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 8px var(--ok)}
.yx-slide.alert .yx-sld{background:var(--bad);box-shadow:0 0 8px var(--bad);animation:yxPulse 1.4s infinite}
.yx-slc{opacity:.7;transition:transform .2s}.yx-slide.open .yx-slc{transform:rotate(180deg)}
.yx-slp{width:100%;margin-top:8px;padding:14px;border:1px solid var(--line2);border-radius:18px;background:rgba(10,14,21,.96);box-shadow:var(--sh-l),0 0 40px -20px var(--glow);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);animation:yxDrop .28s var(--ease)}
html.yx[data-theme="light"] .yx-slp{background:rgba(255,255,255,.97)}
.yx-slp[hidden]{display:none}
.yx-slg{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px}
.yx-slti{display:flex;flex-direction:column;gap:2px;text-align:left;padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:var(--panel2);color:var(--text);font:inherit;cursor:pointer;text-decoration:none!important;transition:all .16s}
.yx-slti:hover{border-color:var(--accent);transform:translateY(-1px)}
.yx-slti span{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:600}
.yx-slti b{font:700 22px/1.1 var(--head);font-variant-numeric:tabular-nums}
.yx-slti em{font-style:normal;font-size:11.5px;color:var(--muted);display:flex;gap:8px}
.yx-slti em i{font-style:normal;padding:0 4px;border-radius:5px}.yx-slti em i:hover{background:rgba(148,163,184,.14);color:var(--text)}
.yx-slti em i.on{color:var(--ok)}.yx-slti em i.off.has{color:var(--bad)}
.yx-slti.c-redlight b{color:var(--c-redlight)}.yx-slti.c-patrol b{color:var(--c-patrol)}.yx-slti.c-speed b{color:var(--c-speed)}.yx-slti.c-other b{color:var(--c-other)}
.yx-slti.alert.glow{border-color:rgba(239,68,68,.5)}.yx-slti.alert.glow b{color:var(--bad)}.yx-slti.appr b{color:var(--violet)}
html.yx.tx a.yx-slti{color:var(--text)}
.yx-slu{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-top:10px;padding:10px 12px;border-radius:12px;background:rgba(243,144,68,.07);border:1px solid rgba(243,144,68,.25);font-size:12.5px}
.yx-slu b{font:700 14px/1.2 var(--mono);color:var(--accent);margin-right:4px}
.yx-slu span{color:var(--muted)}.yx-slu .ok{color:var(--ok)}.yx-slu .bad{color:var(--bad)}.yx-slu .warn{color:var(--warn)}
@keyframes yxDrop{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:none}}
/* engineer computers page (embedded, same look as the other pages) */
html.yx .app.ota main.ws{padding:16px 20px 30px}
html.yx .app.ota .top{background:transparent}
html.yx .ep-note{font-size:13.5px;line-height:1.6;max-width:none;padding:14px 18px;border-radius:14px;background:linear-gradient(135deg,rgba(243,144,68,.09),rgba(34,211,238,.04));border:1px solid rgba(243,144,68,.25);color:var(--text)}
html.yx .ep-sec{margin:14px 0;padding:16px 18px;border-radius:14px;background:var(--panel);border:1px solid var(--line);box-shadow:var(--sh)}
html.yx .ep-sec>h3{display:flex;align-items:center;gap:8px;margin:0 0 12px;font:650 15px/1.2 var(--head);color:var(--text)}
html.yx .ep-sec>h3::before{content:"";width:4px;height:16px;border-radius:2px;background:var(--accent);box-shadow:0 0 10px var(--glow)}
html.yx .ep-sec.ep-two{padding:0;background:none;border:0;box-shadow:none}
html.yx .ep-box{border-radius:14px;background:var(--panel);border-color:var(--line);box-shadow:var(--sh);padding:16px 18px;font-size:13px}
html.yx .ep-row input,html.yx .ep-row select,html.yx .ep-box input{border-radius:9px;padding:8px 10px;font-size:13px;border-color:var(--line2)}
html.yx .ep-tbl{font-size:13px}html.yx .ep-tbl th{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:9px 8px;position:sticky;top:0;background:var(--panel)}
html.yx .ep-tbl td{padding:9px 8px}html.yx .ep-tbl tbody tr:hover td{background:rgba(243,144,68,.05)}
html.yx .ep-card{border-radius:14px;box-shadow:var(--sh);transition:transform .2s var(--ease),box-shadow .2s}html.yx .ep-card:hover{transform:translateY(-2px)}
html.yx .ep-k{display:inline-flex;gap:6px}
html.yx .ep-dlg{border-radius:16px;box-shadow:var(--sh-l)}

/* ---------------------------------------------------------------- P5 allocations */
.yx-alc .ch h2{display:flex;align-items:center;gap:8px}.yx-alc .ch h2 .yxi{color:var(--accent)}
.yx-alu{margin:12px 0;padding:12px 14px;border-radius:12px;background:var(--panel2);border:1px solid var(--line)}
.yx-aluh{display:flex;align-items:center;gap:10px;margin-bottom:8px}.yx-aluh b{font-size:15px}
html.yx.tx .yx-altbl td{vertical-align:middle}html.yx.tx .yx-altbl td small{display:block}
html.yx.tx .yx-altbl tr.paused td{opacity:.55}
.yx-chk{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:6px;font-weight:800;font-size:12px}
.yx-chk.y{color:var(--ok);background:rgba(34,197,94,.12)}.yx-chk.n{color:var(--bad);background:rgba(239,68,68,.1)}
.yx-alf{display:flex;flex-direction:column;gap:14px;max-width:980px}
.yx-popb .dbtns{position:sticky;bottom:-26px;margin:4px -22px -26px;padding:14px 22px;background:var(--panel-s);border-top:1px solid var(--line);z-index:2}
.yx-alf label>span{display:block;margin-bottom:4px}
.yx-alf fieldset{border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin:0}
.yx-alf legend{padding:0 6px;font-weight:650;color:var(--muted);font-size:12.5px;letter-spacing:.05em;text-transform:uppercase}
.yx-alch{display:flex;flex-wrap:wrap;gap:8px}
.yx-tg{display:inline-flex!important;align-items:center;gap:0;cursor:pointer;margin:0!important}
.yx-tg input{position:absolute;opacity:0;width:0;height:0}
.yx-tg span{display:inline-flex!important;align-items:center;gap:7px;margin:0!important;padding:8px 14px;border-radius:10px;border:1px solid var(--line2);background:rgba(148,163,184,.06);color:var(--muted)!important;font-weight:600;font-size:13px!important;transition:all .15s}
.yx-tg span .yxi{width:16px;height:16px}
.yx-tg input:checked+span{color:var(--text)!important;border-color:var(--accent);background:rgba(243,144,68,.14);box-shadow:0 0 0 1px var(--accent) inset}
.yx-tg input:focus-visible+span{outline:2px solid var(--accent)}
.yx-tg.sm span{padding:5px 10px;font-size:12px!important}
.yx-alg{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.yx-alw{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px;margin-top:12px}.yx-alw>span{width:100%;font-size:12.5px;color:var(--muted)}
.yx-days{display:flex;flex-wrap:wrap;gap:4px}
.yx-alp{max-height:260px;overflow:auto;margin-top:8px;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:4px}
.yx-alp label{padding:6px 8px;border-radius:8px}.yx-alp label:hover{background:rgba(148,163,184,.07)}.yx-alp label[hidden]{display:none}
html.yx.tx code.cmd{display:block;padding:10px 12px;border-radius:10px;background:#07090d;border:1px solid var(--line2);color:#e9ecf2;font-size:13px;user-select:all;margin:6px 0}

/* ---------------------------------------------------------------- P6 log & ledger */
.yx-lgcard{flex:1;min-height:480px}
.yx-lgh select{height:36px;border-radius:10px;padding:0 10px;font-size:13px;background:rgba(148,163,184,.06);border:1px solid var(--line2);color:var(--text)}
.yx-lgq{flex:1 1 420px;max-width:560px}
.yx-lgunits{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:10px 16px 0}
.yx-lgunits .yx-chip{display:inline-flex;align-items:center;gap:6px;font-size:13px;padding:3px 10px}.yx-lgunits .yxi{width:14px;height:14px}
.yx-lgchips{display:flex;flex-wrap:wrap;gap:6px;padding:10px 16px}
.yx-lgchips .yx-tchip{padding:6px 10px;box-shadow:none}.yx-lgchips .yx-tchip b{font-size:15px}
.yx-lgw{padding:4px 16px 20px;overflow:auto;flex:1;min-height:0}
.yx-lgday{position:sticky;top:0;z-index:1;margin:14px 0 6px;padding:6px 0;font:650 13px/1 var(--head);letter-spacing:.05em;text-transform:uppercase;color:var(--accent);background:var(--panel-s)}
.yx-lgl{list-style:none;margin:0;padding:0 0 0 14px;border-left:2px solid var(--line2)}
.yx-lgl li{position:relative;display:grid;grid-template-columns:72px 170px minmax(0,1fr) auto;align-items:start;gap:10px;padding:8px 8px 8px 10px;border-radius:10px;transition:background .12s;animation:yxFade .25s}
.yx-lgl li::before{content:"";position:absolute;left:-20px;top:14px;width:10px;height:10px;border-radius:50%;background:var(--panel-s);border:2px solid var(--dim)}
.yx-lgl li:hover{background:rgba(243,144,68,.05)}
.yx-lgl time{font:600 12.5px/1.6 var(--mono);color:var(--muted)}
.yx-lgs{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--muted);white-space:nowrap}.yx-lgs .yxi{width:15px;height:15px;color:var(--accent)}
.yx-lgt p{margin:0;font-size:13.5px;line-height:1.45;word-break:break-word}
.yx-lgt small{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:2px;color:var(--dim);font-size:12px}.yx-lgt small .yxi{width:12px;height:12px}
.yx-lgl li.s-gate::before,.yx-lgl li.s-dup::before{border-color:var(--bad)}.yx-lgl li.s-licence::before,.yx-lgl li.s-keys::before{border-color:var(--violet)}
.yx-lgl li.s-ssh::before,.yx-lgl li.s-session::before,.yx-lgl li.s-remote::before{border-color:var(--cyan)}.yx-lgl li.s-update::before{border-color:var(--warn)}
.yx-lgl li.s-portal::before,.yx-lgl li.s-signin::before{border-color:var(--accent)}.yx-lgl li.s-unit::before,.yx-lgl li.s-access::before{border-color:var(--ok)}
@media (max-width:900px){.yx-lgl li{grid-template-columns:60px minmax(0,1fr) auto}.yx-lgs{grid-column:2}.yx-lgt{grid-column:1/-1}}

/* ---------------------------------------------------------------- sign-in / setup / codes / security-key pages */
html.yx-login body.loginbody{background:radial-gradient(1200px 700px at 78% 30%,rgba(243,144,68,.12),transparent 60%),radial-gradient(900px 600px at 0% 100%,rgba(34,211,238,.08),transparent 60%),var(--bg);min-height:100vh;height:auto;padding:28px;font-size:14px}
html.yx-login #yxBg{opacity:1}
html.yx-login .loginwrap{z-index:2;width:min(440px,100%);animation:yxRise .6s var(--ease) both}
html.yx-login .loginwrap.yx-lwrap{width:min(1180px,100%);display:grid;grid-template-columns:minmax(0,1.15fr) minmax(360px,430px);gap:64px;align-items:center}
html.yx-login .loginwrap .card{padding:28px 30px 22px;border-radius:20px;background:rgba(12,16,23,.78);border:1px solid rgba(243,144,68,.22);box-shadow:var(--sh-l),0 0 60px -24px var(--glow);backdrop-filter:blur(18px) saturate(1.2);-webkit-backdrop-filter:blur(18px) saturate(1.2)}
html.yx-login[data-theme="light"] .loginwrap .card{background:rgba(255,255,255,.86)}
html.yx-login .loginwrap .card::before{height:3px;background:linear-gradient(90deg,transparent,var(--accent),var(--cyan),transparent)!important;background-size:200% 100%!important;animation:yxSweep 5s linear infinite!important}
html.yx-login .brand.big{gap:14px;margin-bottom:6px;height:auto;padding:0;border:0}
html.yx-login .brand.big .logo{font-size:15px;padding:8px 10px;border-radius:10px}
html.yx-login .brand.big b{font:700 22px/1.15 var(--head)}html.yx-login .brand.big small{font-size:11px;letter-spacing:.14em;color:var(--muted);white-space:normal}
html.yx-login .loginwrap .card{background:rgba(12,16,23,.92)}
html.yx-login .card p.muted{font-size:13.5px;line-height:1.55;margin:12px 0}
html.yx-login .card p.small{font-size:12.5px}
html.yx-login .login form{gap:14px;margin:16px 0 10px}
html.yx-login label{gap:6px;margin:0}html.yx-login label>span{font-size:12.5px;font-weight:600;letter-spacing:.02em;color:var(--muted)}
html.yx-login .loginwrap input{height:46px;font-size:15px;border-radius:12px;padding:0 14px;background:rgba(148,163,184,.07);border:1px solid var(--line2)}
html.yx-login .loginwrap input:focus{border-color:var(--accent);box-shadow:0 0 0 4px var(--soft),0 0 24px -8px var(--glow)}
html.yx-login .loginwrap .btn{height:46px;font-size:15px;border-radius:12px}
html.yx-login .loginwrap .btn.primary{letter-spacing:.02em;position:relative;overflow:hidden}
html.yx-login .loginwrap .btn.primary::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);transform:translateX(-100%);animation:yxShine 4.5s ease-in-out infinite}
html.yx-login .err{border-radius:12px;padding:10px 14px;font-size:13.5px}
.yx-lfoot{display:flex;align-items:center;gap:8px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line);font-size:12px;color:var(--dim)}
.yx-lock{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 10px var(--ok);animation:yxPulse 2.2s ease-in-out infinite}
.yx-hero{position:relative;color:var(--text);animation:yxRise .7s var(--ease) both}
.yx-hbadge{display:inline-flex;align-items:center;gap:10px;font:700 11.5px/1 var(--font);letter-spacing:.18em;color:var(--accent);padding:9px 14px;border-radius:999px;border:1px solid rgba(243,144,68,.35);background:rgba(243,144,68,.08)}
.yx-hbadge i{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px var(--accent);animation:yxPulse 1.6s ease-in-out infinite}
.yx-hero h1{margin:22px 0 14px;font:800 56px/1.04 var(--head);letter-spacing:-.03em}
.yx-hero h1 span{background:linear-gradient(90deg,var(--accent),#ffd0a3 40%,var(--cyan) 90%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:yxSweep 8s linear infinite}
.yx-hero p{font-size:17px;line-height:1.6;color:var(--muted);max-width:560px;margin:0 0 26px}
.yx-hfeat{list-style:none;margin:0 0 26px;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;max-width:620px}
.yx-hfeat li{padding:14px 14px 12px;border-radius:14px;background:rgba(12,16,23,.55);border:1px solid var(--line);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);animation:yxRise .7s var(--ease) both}
html.yx-login[data-theme="light"] .yx-hfeat li{background:rgba(255,255,255,.7)}
.yx-hfeat li:nth-child(2){animation-delay:.1s}.yx-hfeat li:nth-child(3){animation-delay:.2s}
.yx-hfeat b{display:block;font:800 20px/1.1 var(--head);color:var(--accent);margin-bottom:4px}.yx-hfeat span{font-size:12.5px;color:var(--muted);line-height:1.4}
.yx-hclock{font:600 14px/1 var(--mono);color:var(--dim);letter-spacing:.04em}
@keyframes yxSweep{to{background-position:-200% 0}}
@keyframes yxShine{0%,70%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
@media (max-width:980px){html.yx-login .loginwrap.yx-lwrap{grid-template-columns:1fr;gap:26px;width:min(460px,100%)}.yx-hero h1{font-size:34px;margin:16px 0 8px}.yx-hero p,.yx-hfeat,.yx-hclock{display:none}.yx-hero{text-align:center}}
@media (max-width:480px){html.yx-login body.loginbody{padding:14px}html.yx-login .loginwrap .card{padding:22px 18px 18px}}

/* ---------------------------------------------------------------- help overlay */
.yx-help{position:fixed;inset:0;z-index:200;display:grid;place-items:center;background:rgba(3,5,8,.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);animation:yxFade .18s}
.yx-help[hidden]{display:none}
.yx-help-box{width:min(860px,calc(100vw - 32px));max-height:86vh;overflow:auto;border-radius:18px;background:var(--panel-s);border:1px solid var(--line2);box-shadow:var(--sh-l),0 0 50px -20px var(--glow);padding:18px 22px;animation:yxPop .22s var(--ease)}
.yx-help-h{display:flex;align-items:center;gap:10px;font-size:17px;margin-bottom:12px}.yx-help-h .yxi{color:var(--accent);width:22px;height:22px}.yx-help-h .sp{flex:1}
.yx-help-g{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.yx-help-g h4{margin:0 0 8px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.yx-help-g p{display:flex;align-items:center;gap:6px;margin:0 0 7px;font-size:13.5px}.yx-help-g p span{color:var(--muted);margin-left:6px}

/* ---------------------------------------------------------------- motion */
@keyframes yxRise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes yxFade{from{opacity:0}to{opacity:1}}
@keyframes yxPop{from{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:none}}
@keyframes yxSlide{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}
@keyframes yxPulse{0%,100%{opacity:1}50%{opacity:.55}}
@keyframes yxPulseR{0%,100%{box-shadow:0 0 0 3px rgba(239,68,68,.18),0 0 12px var(--bad)}50%{box-shadow:0 0 0 6px rgba(239,68,68,.05),0 0 18px var(--bad)}}
@keyframes yxGlow{0%,100%{box-shadow:var(--sh),0 0 0 1px rgba(239,68,68,.35),0 0 18px -8px rgba(239,68,68,.5)}50%{box-shadow:var(--sh),0 0 0 1px rgba(239,68,68,.7),0 0 30px -6px rgba(239,68,68,.65)}}
@keyframes yxGlowV{0%,100%{box-shadow:var(--sh),0 0 0 1px rgba(167,139,250,.3)}50%{box-shadow:var(--sh),0 0 0 1px rgba(167,139,250,.65),0 0 26px -8px rgba(167,139,250,.6)}}
@keyframes yxBump{0%{transform:scale(1)}30%{transform:scale(1.08);color:var(--accent2)}100%{transform:scale(1)}}
@keyframes yxPing{0%{transform:scale(1);opacity:.9}100%{transform:scale(3);opacity:0}}
@keyframes yxHalo{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.15);opacity:.6}}
@keyframes yxSkel{to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){
 html.yx *,html.yx *::before,html.yx *::after{animation:none!important;transition:none!important}
 #yxBg{opacity:.6}}

/* ---------------------------------------------------------------- responsive (iPad Pro 13: 1376x1032 / 1032x1376, phones) */
@media (max-width:1500px){.yx-split{grid-template-columns:minmax(0,1.35fr) minmax(330px,1fr)}.yx-tile{padding:12px 13px 10px}.yx-tn{font-size:25px}.yx-ti{width:30px;height:30px}}
@media (max-width:1600px){html.yx.tx .dmain{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);grid-auto-rows:600px 420px}html.yx.tx .dmain>.dcol:nth-child(3){grid-column:1/-1}}
@media (max-width:1380px){.yx-tsub{white-space:normal}.yx-tile{padding:11px 11px 9px;gap:3px 8px}.yx-tl{font-size:11px;letter-spacing:.04em}.yx-tn{font-size:23px}.yx-ti{width:28px;height:28px;border-radius:8px}.yx-ti .yxi{width:16px;height:16px}.yx-tdev{top:8px;right:8px}}
@media (max-width:1180px){
 .yx-split{grid-template-columns:1fr;height:auto}
 .yx-tcard{height:min(560px,70vh)}.yx-mcard{height:460px}
 html.yx.tx .dmain{grid-template-columns:1fr;grid-auto-rows:auto}html.yx.tx .dmain>.dcol{min-height:0}html.yx.tx #dCards{height:560px}html.yx.tx #dAl{height:440px}html.yx.tx .dbot{height:auto;grid-template-columns:1fr}html.yx.tx .dpan{min-height:260px}
 html.yx-shell.tx .search-btn{min-width:0}html.yx-shell.tx .search-btn span{display:none}html.yx-shell.tx .search-btn kbd{display:none}
 .yx-clock{display:none}}
@media (max-width:1100px){html.yx-shell.tx body.hosts-on .main{margin-left:var(--side)}.yx-rib{grid-auto-flow:row;grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:860px){
 html.yx-shell.tx body.hosts-on .main{margin-left:0}
 html.yx-shell.tx #view,html.yx-shell.tx #view.dashv{padding:10px 10px 22px}
 .yx-rib{grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
 .yx-tile{padding:12px}.yx-tn{font-size:24px}
 .yx-search{min-width:0;flex:1 1 100%}
 html.yx-shell.tx .topbar h1{max-width:40vw}
 html.yx-shell.tx .netbadge{display:none}html.yx-shell.tx #yxKeys,html.yx-shell.tx #hostsBtn{display:none}}
@media (hover:none){.yx-ib{width:36px;height:36px}html.yx-shell.tx #nav a{height:44px}.yx-st{padding:4px 7px}}