:root{--bg:#091015;--surface:#101a22;--surface2:#16222b;--surface3:#22313c;--surface4:#2a3b47;--border:#2c3e49;--accent:#78a8c5;--accent2:#c8a05a;--text:#edf4f8;--text2:#91a4b1;--text3:#6f8391;--red:#d96262;--green:#48b47d;--orange:#d98b4d;--friendly:#6ca2c8;--hostile:#d96262;--neutral:#d9a441;--unknown:#7f95a6;--sidebar-w:288px;--panel-w:314px;--shadow-lg:0 28px 70px rgba(2,7,11,.48);--shadow-md:0 18px 40px rgba(3,10,15,.32);--shadow-soft:0 10px 22px rgba(3,10,15,.16);--control-bg:rgba(17,29,37,.84);--control-bg-soft:rgba(18,30,39,.72);--control-bg-hover:#243641;--control-border:rgba(145,163,177,.17);--control-border-strong:rgba(145,163,177,.32);--control-radius:12px;--control-radius-sm:10px;--control-shadow:none;--control-shadow-hover:none;--control-ring:0 0 0 3px rgba(120,168,197,.17);--shell-glow:radial-gradient(circle at 14% -4%,rgba(120,168,197,.13),transparent 31%),radial-gradient(circle at 88% 10%,rgba(200,160,90,.08),transparent 24%),radial-gradient(circle at 50% 120%,rgba(27,52,67,.38),transparent 36%),linear-gradient(180deg,#121b22 0%,#091015 100%);--topbar-bg:rgba(11,18,23,.9);--tabbar-bg:rgba(13,21,27,.9);--sidebar-bg:rgba(12,19,25,.9);--sidebar-header-bg:rgba(11,18,23,.95);--panel-bg:rgba(12,19,25,.92);--panel-header-bg:rgba(12,19,25,.96);--statusbar-bg:rgba(11,18,23,.95);--font-body:'Archivo',sans-serif;--font-display:'Oxanium',sans-serif;--font-mono:'Share Tech Mono',monospace}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font-body);background:var(--shell-glow);color:var(--text);height:100vh;display:flex;flex-direction:column;overflow:hidden;user-select:none;position:relative}
body::before{content:'';position:fixed;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(255,255,255,.015) 0,rgba(255,255,255,0) 18%,rgba(255,255,255,.01) 46%,rgba(255,255,255,0) 72%,rgba(255,255,255,.012) 100%),linear-gradient(180deg,rgba(255,255,255,.012),transparent 16%,transparent 84%,rgba(255,255,255,.018));opacity:.52;mix-blend-mode:soft-light;z-index:-2}
body::after{content:'';position:fixed;inset:0;pointer-events:none;background-image:radial-gradient(rgba(255,255,255,.05) .7px,transparent .7px),linear-gradient(180deg,rgba(120,168,197,.02),transparent 34%);background-size:14px 14px,100% 100%;opacity:.05;z-index:-1}
#app-root{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden}
button,select,input,textarea{font-family:var(--font-body);letter-spacing:.2px;color:var(--text)}
button,select{cursor:pointer}
select{appearance:none;background:var(--control-bg);border:1px solid var(--control-border);border-radius:var(--control-radius-sm);color:var(--text);padding:7px 34px 7px 11px;outline:none;box-shadow:none;background-image:linear-gradient(45deg,transparent 50%,var(--text2) 50%),linear-gradient(135deg,var(--text2) 50%,transparent 50%);background-position:calc(100% - 16px) calc(50% - 1px),calc(100% - 11px) calc(50% - 1px);background-size:5px 5px,5px 5px;background-repeat:no-repeat;transition:border-color .15s,box-shadow .15s,transform .15s,background .15s}
select:hover{border-color:var(--control-border-strong);background:var(--control-bg-hover)}
select:focus{border-color:var(--accent);box-shadow:var(--control-ring),var(--control-shadow-hover);transform:translateY(-1px)}
select.active{border-color:rgba(96,165,250,.62);background:color-mix(in srgb,var(--accent) 14%,var(--surface2));color:#eff6ff}
button{background:transparent;border:none}
#topbar{display:flex;align-items:center;gap:8px;padding:8px 14px 2px;height:70px;width:100%;max-width:100%;background:linear-gradient(180deg,rgba(255,255,255,.035),transparent),var(--topbar-bg);border-bottom:1px solid color-mix(in srgb,var(--border) 52%,transparent);box-shadow:0 20px 38px rgba(3,8,13,.24);flex-shrink:0;z-index:300;overflow-x:auto;overflow-y:hidden;overflow:auto hidden;position:relative;scrollbar-width:thin;scrollbar-color:rgba(142,160,173,.5) transparent;overscroll-behavior-x:contain;overscroll-behavior-y:none;touch-action:pan-x;backdrop-filter:blur(18px)}
#topbar::-webkit-scrollbar{height:6px}
#topbar::-webkit-scrollbar-track{background:rgba(255,255,255,.04);border-radius:999px}
#topbar::-webkit-scrollbar-thumb{background:rgba(139,148,158,.5);border-radius:999px}
#topbar::-webkit-scrollbar-thumb:hover{background:rgba(139,148,158,.8);border-radius:999px}
#topbar .topbar-overflow-fade{position:absolute;top:0;bottom:6px;width:48px;pointer-events:none;opacity:0;transition:opacity .16s;background:linear-gradient(to right,rgba(13,17,23,0),var(--topbar-bg));z-index:2}
#topbar .topbar-overflow-fade.show{opacity:1}
#topbar .topbar-overflow-fade.left{left:0;transform:scaleX(-1)}
#topbar .topbar-overflow-fade.right{right:0}
#topbar::after{content:'';position:absolute;inset:auto 0 0 0;height:1px;background:linear-gradient(90deg,transparent,rgba(120,168,197,.26),transparent);pointer-events:none}
.tb-group{display:flex;align-items:center;gap:8px;padding:6px;border:1px solid rgba(145,163,177,.08);border-radius:16px;background:linear-gradient(180deg,rgba(255,255,255,.03),transparent),rgba(255,255,255,.018);box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 8px 20px rgba(3,10,15,.08);flex-shrink:0;position:relative}
.tb-group::before{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(135deg,rgba(255,255,255,.03),transparent 55%)}
.tb-group-brand{padding:4px 10px 4px 4px;background:linear-gradient(135deg,rgba(120,168,197,.14),rgba(120,168,197,.03) 68%),rgba(255,255,255,.02);border-color:rgba(120,168,197,.22)}
.logo{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-mono);font-size:12px;color:#e8eff4;letter-spacing:2.6px;white-space:nowrap;margin-right:2px;flex-shrink:0;text-shadow:0 0 18px rgba(120,168,197,.14)}
.logo-mark{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:10px;background:linear-gradient(160deg,rgba(120,168,197,.24),rgba(200,160,90,.08));border:1px solid rgba(120,168,197,.28);color:#d7e7f2;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 10px 18px rgba(8,18,25,.18)}
.logo-word{display:inline-block;transform:translateY(1px)}
.tb-meta{display:flex;flex-direction:column;gap:5px;min-width:250px;margin-bottom:6px}
.tb-kicker{font:600 10px/1 var(--font-display);letter-spacing:1.8px;color:#9db1be;text-transform:uppercase;padding-left:2px}
.tb-sep{width:1px;height:26px;background:var(--border);margin:0 2px;flex-shrink:0}
.tb-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:36px;padding:7px 12px;background:linear-gradient(180deg,rgba(255,255,255,.04),transparent),var(--control-bg);border:1px solid var(--control-border);border-radius:var(--control-radius);color:var(--text);font-family:var(--font-display);font-size:11px;font-weight:700;letter-spacing:.82px;text-transform:uppercase;cursor:pointer;transition:background .24s,border-color .24s,color .24s,transform .24s,box-shadow .24s;white-space:nowrap;flex-shrink:0;box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.tb-btn:hover{background:linear-gradient(180deg,rgba(120,168,197,.08),transparent),var(--control-bg-hover);border-color:rgba(120,168,197,.46);color:#f7fbfd;transform:translateY(-1px);box-shadow:0 12px 20px rgba(3,8,13,.16)}
.tb-btn:active{transform:translateY(0) scale(.98)}
.tb-btn.active,.tb-btn.soft-active{background:color-mix(in srgb,var(--accent) 18%,var(--surface2));border-color:rgba(120,168,197,.68);color:#f4f9fc;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 10px 18px rgba(3,8,13,.14)}
.tb-btn.accent{background:linear-gradient(180deg,rgba(120,168,197,.24),rgba(120,168,197,.12));border-color:rgba(120,168,197,.44);color:#f6fbfe;box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 12px 24px rgba(20,48,68,.18)}
.tb-btn.accent:hover{background:linear-gradient(180deg,rgba(120,168,197,.34),rgba(120,168,197,.16));border-color:rgba(154,196,224,.52)}
.tb-btn[aria-disabled="true"]{opacity:.68}
.tb-btn.danger{border-color:rgba(239,68,68,.45);color:#fca5a5}
.tb-btn.danger:hover{background:rgba(127,29,29,.24);border-color:rgba(248,113,113,.72);color:#fee2e2}
.tb-spacer{flex:1;min-width:4px}
#op-name-input{background:rgba(10,17,22,.78);border:1px solid rgba(120,168,197,.18);border-radius:16px;color:var(--text);font-family:var(--font-display);font-size:15px;font-weight:700;letter-spacing:1.18px;padding:10px 14px 9px;width:100%;outline:none;flex-shrink:0;transition:border-color .24s,background .24s,box-shadow .24s}
#op-name-input:hover{border-bottom-color:var(--control-border-strong)}
#op-name-input:focus{border-color:var(--accent);background:var(--surface2);box-shadow:var(--control-ring)}
#conn-style-sel,#layout-mode-sel{font-family:var(--font-display);font-size:11px;font-weight:700;letter-spacing:.65px;text-transform:uppercase;flex-shrink:0;min-height:34px}
#tab-bar{display:flex;align-items:center;gap:8px;padding:10px 14px 11px;margin:0 10px;background:linear-gradient(180deg,rgba(255,255,255,.02),transparent),var(--tabbar-bg);border:1px solid color-mix(in srgb,var(--border) 46%,transparent);border-top:none;border-radius:0 0 22px 22px;box-shadow:inset 0 1px 0 rgba(255,255,255,.03),0 14px 26px rgba(3,8,13,.08);overflow-x:auto;flex-shrink:0;scrollbar-width:thin;backdrop-filter:blur(16px);position:relative}
#tab-bar.has-overflow{padding-right:92px}
.tab-overflow-fade{position:absolute;top:0;bottom:0;width:42px;pointer-events:none;opacity:0;transition:opacity .16s;background:linear-gradient(to right,rgba(13,17,23,0),var(--tabbar-bg));z-index:2}
.tab-overflow-fade.show{opacity:1}
.tab-overflow-fade.left{left:0;transform:scaleX(-1)}
.tab-overflow-fade.right{right:52px}
.tab-overflow-btn{position:sticky;right:0;z-index:3;margin-left:auto}
.tab{display:inline-flex;align-items:center;gap:6px;min-height:34px;max-width:220px;padding:0 12px;border:1px solid rgba(145,163,177,.12);border-radius:999px;background:rgba(255,255,255,.03);color:var(--text2);font-family:var(--font-display);font-size:12px;font-weight:600;letter-spacing:.55px;cursor:pointer;transition:background .24s,border-color .24s,color .24s,transform .24s,box-shadow .24s}
.tab:hover{background:rgba(255,255,255,.06);color:var(--text);transform:translateY(-1px);box-shadow:0 12px 20px rgba(3,8,13,.12)}
.tab.active{background:linear-gradient(180deg,rgba(120,168,197,.18),rgba(120,168,197,.07));border-color:rgba(120,168,197,.58);color:var(--text);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 10px 18px rgba(7,18,25,.12)}
.tab-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tab-dirty{color:var(--accent2);font-size:10px;line-height:1}
.tab-close,.tab-add{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--control-border);background:var(--control-bg-soft);color:var(--text2);box-shadow:none;transition:background .15s,border-color .15s,color .15s,transform .15s,box-shadow .15s}
.tab-close{width:20px;height:20px;border-radius:999px;flex-shrink:0}
.tab-close:hover{background:rgba(127,29,29,.22);border-color:rgba(248,113,113,.68);color:#fecaca;box-shadow:none}
.tab-add{min-width:34px;height:32px;border-radius:999px;font-family:var(--font-display);font-size:18px}
.tab-add:hover{border-color:rgba(96,165,250,.52);color:#eff6ff;background:color-mix(in srgb,var(--accent) 12%,var(--surface2));transform:none;box-shadow:none}
.tab-rename-input{width:100%;min-width:72px;background:rgba(15,23,42,.88);border:1px solid var(--accent);border-radius:999px;color:var(--text);font-family:var(--font-display);font-size:12px;font-weight:600;letter-spacing:.4px;padding:4px 10px;outline:none}
#main{display:flex;flex:1;overflow:hidden;min-height:0;height:100%;padding:10px 10px 8px;gap:10px;border-bottom:1px solid color-mix(in srgb,var(--border) 58%,transparent);position:relative;background:linear-gradient(180deg,rgba(255,255,255,.012),transparent)}
#main::after{content:'';position:absolute;left:10px;right:10px;bottom:8px;height:1px;background:color-mix(in srgb,var(--border) 58%,transparent);pointer-events:none;z-index:4}
/* SIDEBAR */
#sidebar{width:var(--sidebar-w);background:linear-gradient(180deg,rgba(255,255,255,.03),transparent),var(--sidebar-bg);border:1px solid color-mix(in srgb,var(--border) 56%,transparent);border-radius:24px;display:flex;flex-direction:column;overflow:hidden;flex-shrink:0;min-height:0;height:100%;box-shadow:inset -1px 0 0 rgba(255,255,255,.03),inset 0 -1px 0 color-mix(in srgb,var(--border) 62%,transparent),0 20px 38px rgba(3,8,13,.2);position:relative;backdrop-filter:blur(18px)}
#sidebar::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:color-mix(in srgb,var(--border) 68%,transparent);pointer-events:none;z-index:3}
#sidebar-header{padding:16px 16px 14px;font-family:var(--font-display);font-size:10px;font-weight:700;letter-spacing:1.8px;color:var(--text2);border-bottom:1px solid color-mix(in srgb,var(--border) 42%,transparent);background:linear-gradient(180deg,rgba(255,255,255,.03),transparent),var(--sidebar-header-bg);text-transform:uppercase;display:flex;justify-content:space-between;align-items:flex-start;gap:10px;backdrop-filter:none}
.sidebar-heading{display:flex;flex-direction:column;gap:3px}
.sidebar-heading span{color:#dce9f3}
.sidebar-heading small{font:600 9px/1.4 var(--font-body);letter-spacing:.42px;text-transform:none;color:#8ea2b7;max-width:25ch}
#sidebar-header .sidebar-actions{display:flex;align-items:center;gap:6px}
#sidebar-header .sidebar-actions .tb-btn{padding:2px 7px;font-size:9px}
#sidebar-scroll{overflow-y:scroll;flex:1;min-height:0;overscroll-behavior:contain;height:0}
.palette-section{border-bottom:1px solid rgba(148,163,184,.08)}
.palette-section-title{padding:10px 12px 9px;font-family:var(--font-display);font-size:10px;font-weight:700;letter-spacing:1.55px;color:var(--text2);text-transform:uppercase;cursor:pointer;display:flex;justify-content:space-between;align-items:center;text-align:left;transition:background .15s,color .15s,border-color .15s}
.palette-section-title:hover{color:var(--text);background:rgba(255,255,255,.03)}
.palette-section-title .caret{transition:transform .2s}
.palette-section-title.collapsed .caret{transform:rotate(-90deg)}
.palette-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;padding:6px 8px 8px}
.palette-grid.hidden{display:none}
.palette-subcat-title{grid-column:1/-1;padding:8px 12px 4px;font-family:var(--font-display);font-size:10px;font-weight:700;letter-spacing:1px;color:var(--accent);text-transform:uppercase;margin-top:10px;margin-bottom:4px;text-align:left}
.pal-item{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:6px;min-height:84px;padding:12px 6px 9px;background:linear-gradient(180deg,rgba(255,255,255,.04),transparent),var(--surface2);border:1px solid rgba(142,160,173,.12);border-radius:16px;cursor:grab;transition:background .22s,border-color .22s,transform .22s,box-shadow .22s}
.pal-item:hover{border-color:rgba(120,168,197,.4);background:linear-gradient(180deg,rgba(120,168,197,.08),transparent),var(--surface3);transform:translateY(-2px);box-shadow:0 16px 28px rgba(3,8,13,.18)}
.pal-item svg{width:34px;height:26px}
.pal-item span{display:-webkit-box;overflow:hidden;max-width:58px;min-height:20px;font-family:var(--font-display);font-size:8px;font-weight:600;letter-spacing:.46px;line-height:1.22;color:var(--text2);text-align:center;text-transform:uppercase;word-break:break-word;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.pal-custom-icon{width:34px;height:26px;object-fit:contain;border-radius:3px}
/* CANVAS */
#canvas-wrap{flex:1;position:relative;overflow:hidden;border:1px solid color-mix(in srgb,var(--border) 56%,transparent);border-radius:30px;box-shadow:0 24px 50px rgba(3,8,13,.22),inset 0 1px 0 rgba(255,255,255,.04);background:
radial-gradient(circle at 14% 0%,rgba(120,168,197,.12),transparent 30%),
radial-gradient(circle at 86% 5%,rgba(200,160,90,.07),transparent 24%),
linear-gradient(180deg,rgba(10,17,22,.96) 0%,#0d151b 44%,#081015 100%)}
#canvas-wrap::before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at center,transparent 56%,rgba(4,8,12,.3) 100%),linear-gradient(0deg,rgba(255,255,255,.02),transparent 20%);z-index:0}
#canvas-wrap::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.018),transparent 28%),linear-gradient(90deg,rgba(255,255,255,.012),transparent 22%,rgba(255,255,255,.008) 62%,transparent),repeating-linear-gradient(0deg,transparent 0 31px,rgba(255,255,255,.01) 31px 32px);pointer-events:none;z-index:0}
#canvas-wrap.snap-on{background-image:radial-gradient(circle,rgba(57,73,95,.48) 1px,transparent 1px);background-size:24px 24px}
#canvas-wrap.snap-off{background-image:linear-gradient(rgba(38,53,73,.22) 1px,transparent 1px),linear-gradient(90deg,rgba(38,53,73,.22) 1px,transparent 1px);background-size:40px 40px,40px 40px}
#canvas-bg-overlay{mix-blend-mode:normal;filter:saturate(.92) contrast(1.02)}
#canvas{position:absolute;top:0;left:0;transform-origin:0 0}
#connector-svg{position:absolute;top:0;left:0;pointer-events:none;overflow:visible;z-index:1;transform-origin:0 0}
#link-svg{position:absolute;top:0;left:0;pointer-events:none;overflow:visible;z-index:80;width:1px;height:1px}
#lasso{position:absolute;border:1.5px dashed var(--accent);background:rgba(59,130,246,.06);pointer-events:none;display:none;z-index:50}
/* NODES */
.orbat-node{position:absolute;cursor:grab;z-index:10}
.orbat-node:active{cursor:grabbing;z-index:20}
.orbat-textbox{position:absolute;z-index:12}
.orbat-textbox.selected .textbox-card{border-color:var(--accent2)!important;box-shadow:0 0 0 2px rgba(245,158,11,.35)}
.textbox-card{width:188px;min-height:104px;border:1px solid rgba(148,163,184,.28);border-radius:16px;background:linear-gradient(180deg,rgba(255,255,255,.04),transparent),rgba(22,27,34,.96);box-shadow:var(--shadow-md);overflow:hidden}
.textbox-handle{padding:7px 10px;border-bottom:1px solid rgba(148,163,184,.18);font-family:var(--font-display);font-size:10px;font-weight:700;letter-spacing:1px;color:var(--text2);text-transform:uppercase;cursor:grab;user-select:none}
.textbox-handle:active{cursor:grabbing}
.textbox-input{display:block;width:100%;min-height:76px;padding:10px;border:0;outline:none;resize:none;background:transparent;color:var(--text);font-family:var(--font-body);font-size:12px;line-height:1.5}
.textbox-input::placeholder{color:var(--text2)}
.orbat-node.selected .node-card{border-color:var(--accent2)!important;box-shadow:0 0 0 3px rgba(245,158,11,.42),0 10px 24px rgba(0,0,0,.26);transform:translateY(-1px)}
.orbat-node.multi-selected .node-card{border-color:#22c55e!important;box-shadow:0 0 0 3px rgba(34,197,94,.34),0 8px 20px rgba(0,0,0,.22)}
.orbat-node.locked .node-card{border-style:dashed!important;border-color:rgba(148,163,184,.72)!important;background:color-mix(in srgb,var(--surface) 88%,#64748b 12%);box-shadow:inset 0 0 0 1px rgba(148,163,184,.24),var(--shadow-md)}
.orbat-node.locked .node-card::after{content:'LOCKED';position:absolute;top:6px;left:8px;padding:1px 5px;border-radius:999px;background:rgba(15,23,42,.88);border:1px solid rgba(148,163,184,.28);font:700 8px/1 var(--font-mono);letter-spacing:.4px;color:#cbd5e1}
.orbat-node.dimmed .node-card,.orbat-node.faded .node-card{opacity:.38!important;filter:grayscale(.62) saturate(.72)}
.orbat-node.dimmed .node-name,.orbat-node.faded .node-name{color:#9aa6b7}
.orbat-node.link-tgt .node-card{border-color:var(--green)!important;box-shadow:0 0 0 3px rgba(34,197,94,.45)!important}
.node-card{background:linear-gradient(180deg,rgba(255,255,255,.06),transparent),var(--surface);border:1px solid rgba(120,168,197,.28);border-radius:18px;padding:8px 11px 10px;display:flex;flex-direction:column;align-items:center;gap:4px;min-width:102px;transition:border-color .22s,box-shadow .22s,transform .22s,background .22s;position:relative;box-shadow:var(--shadow-md)}
.node-card::before{display:none}
.node-card:hover{border-color:rgba(200,160,90,.5);box-shadow:0 20px 34px rgba(3,8,13,.24);transform:translateY(-1px)}
.orbat-node.sz-compact .node-card{padding:3px 6px 4px;min-width:76px}
.orbat-node.sz-compact .node-symbol svg,.orbat-node.sz-compact .node-custom-img{width:36px!important;height:28px!important}
.orbat-node.sz-compact .node-name{font-size:10px}
.orbat-node.sz-expanded .node-card{min-width:140px;padding:7px 12px 10px}
.orbat-node.sz-expanded .node-symbol svg,.orbat-node.sz-expanded .node-custom-img{width:60px!important;height:46px!important}
.node-symbol{display:flex;align-items:center;justify-content:center}
.node-symbol svg{width:50px;height:38px;border-radius:8px}
.node-symbol img{border-radius:8px}
.node-custom-img{width:50px;height:38px;object-fit:contain;border-radius:3px}
.node-designation{font-family:var(--font-mono);font-size:10px;color:#f0c870;letter-spacing:1.1px;text-align:center;white-space:nowrap;opacity:.94}
.node-name{font-family:var(--font-display);font-size:13px;font-weight:700;color:#f8fbff;text-align:center;white-space:nowrap;max-width:130px;overflow:hidden;text-overflow:ellipsis;letter-spacing:.18px}
.node-commander{font-family:var(--font-body);font-size:9px;color:#a9b7c8;text-align:center}
.node-strength-lbl{font-family:var(--font-mono);font-size:8px;color:var(--text2);text-align:center}
.node-task-lbl{font-family:var(--font-display);font-size:9px;font-weight:700;color:var(--orange);text-align:center;letter-spacing:.45px}
.node-status-badge{position:absolute;top:-7px;right:-7px;width:13px;height:13px;border-radius:50%;border:2px solid var(--bg)}
.node-status-badge.effective{background:#22c55e}
.node-status-badge.degraded{background:#f59e0b}
.node-status-badge.not-operational{background:#ef4444}
.node-status-badge.unknown-status{background:#6b7280}
.node-add-btn{position:absolute;bottom:-13px;left:50%;transform:translateX(-50%);width:18px;height:18px;border-radius:50%;background:var(--accent);border:2px solid var(--bg);color:#fff;font-size:12px;line-height:14px;text-align:center;cursor:pointer;opacity:0;transition:opacity .15s;z-index:5}
.orbat-node:hover .node-add-btn,.orbat-node.selected .node-add-btn,.orbat-node.multi-selected .node-add-btn{opacity:1}
.node-link-btn{position:absolute;top:-12px;right:50%;transform:translateX(50%);width:18px;height:18px;border-radius:50%;background:#4b5563;border:2px solid var(--bg);color:#fff;font-size:9px;line-height:14px;text-align:center;cursor:crosshair;opacity:0;transition:opacity .15s;z-index:5}
.orbat-node:hover .node-link-btn,.orbat-node.selected .node-link-btn,.orbat-node.multi-selected .node-link-btn{opacity:1}
/* EDIT PANEL */
#edit-panel{width:var(--panel-w);background:linear-gradient(180deg,rgba(255,255,255,.03),transparent),var(--panel-bg);border:1px solid color-mix(in srgb,var(--border) 56%,transparent);border-radius:24px;display:flex;flex-direction:column;flex-shrink:0;overflow:hidden;transition:width .2s;min-height:0;height:100%;box-shadow:inset 1px 0 0 rgba(255,255,255,.03),inset 0 -1px 0 color-mix(in srgb,var(--border) 62%,transparent),0 20px 38px rgba(3,8,13,.2);position:relative;backdrop-filter:blur(18px)}
#edit-panel::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:color-mix(in srgb,var(--border) 68%,transparent);pointer-events:none;z-index:3}
#edit-panel.hidden,#edit-panel.hid{width:0;overflow:hidden}
#ep-inner,#mp-inner{padding:15px;overflow-y:scroll;flex:1;min-width:var(--panel-w);min-height:0;overscroll-behavior:contain;height:0}
#ep-inner h3,#mp-inner h3{position:sticky;top:0;z-index:2;font-family:var(--font-display);font-size:10px;font-weight:700;letter-spacing:1.8px;color:var(--text2);text-transform:uppercase;margin:0 0 14px;padding:8px 0 12px;border-bottom:1px solid var(--border);background:linear-gradient(180deg,var(--panel-header-bg) 82%,rgba(17,24,39,0));display:flex;justify-content:space-between;align-items:center;backdrop-filter:blur(14px)}
.psec{font-family:var(--font-display);font-size:9px;font-weight:700;letter-spacing:1.5px;color:#becdd6;text-transform:uppercase;margin:14px 0 8px;padding-bottom:6px;border-bottom:1px solid rgba(142,160,173,.2)}
.fg{margin-bottom:12px}
.fg label{display:block;font-family:var(--font-display);font-size:9px;font-weight:700;letter-spacing:1.2px;color:var(--text2);text-transform:uppercase;margin-bottom:3px}
.fg input,.fg select,.fg textarea{width:100%;background:var(--control-bg-soft);border:1px solid var(--control-border);border-radius:var(--control-radius-sm);color:var(--text);font-family:var(--font-body);font-size:12px;padding:8px 10px;outline:none;transition:border-color .15s,box-shadow .15s,background .15s,transform .15s;box-shadow:none}
.fg input:hover,.fg select:hover,.fg textarea:hover{border-color:var(--control-border-strong)}
.fg input:focus,.fg select:focus,.fg textarea:focus{border-color:var(--accent);box-shadow:var(--control-ring);background:var(--surface2);transform:none}
.fg select option{background:var(--surface2)}
.fg textarea{resize:vertical;min-height:50px}
.fr{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.aff-row{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.aff-btn,.stat-btn,.sz-btn,.status-btn{display:inline-flex;align-items:center;justify-content:center;min-height:32px;padding:6px 6px;border-radius:var(--control-radius-sm);border:1px solid var(--control-border);background:var(--control-bg-soft);color:var(--text2);font-family:var(--font-display);font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.58px;cursor:pointer;text-align:center;transition:background .15s,border-color .15s,color .15s,transform .15s,box-shadow .15s;box-shadow:none}
.aff-btn:hover,.stat-btn:hover,.sz-btn:hover,.status-btn:hover{transform:none;border-color:var(--control-border-strong);color:var(--text);box-shadow:none}
.aff-btn.a-friendly{background:rgba(59,130,246,.2);border-color:var(--friendly);color:var(--friendly)}
.aff-btn.a-hostile{background:rgba(239,68,68,.2);border-color:var(--hostile);color:var(--hostile)}
.aff-btn.a-neutral{background:rgba(245,158,11,.2);border-color:var(--neutral);color:var(--neutral)}
.aff-btn.a-unknown{background:rgba(168,85,247,.2);border-color:var(--unknown);color:var(--unknown)}
.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.stat-btn{font-size:8px}
.stat-btn.s-effective{background:rgba(34,197,94,.2);border-color:#22c55e;color:#22c55e}
.stat-btn.s-degraded{background:rgba(245,158,11,.2);border-color:#f59e0b;color:#f59e0b}
.stat-btn.s-not-operational{background:rgba(239,68,68,.2);border-color:#ef4444;color:#ef4444}
.stat-btn.s-unknown-status{background:rgba(107,114,128,.2);border-color:#6b7280;color:#6b7280}
.sz-row{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.sz-btn.active,.sz-btn.on,.status-btn.active,.status-btn.on{background:color-mix(in srgb,var(--accent) 12%,var(--surface2));border-color:rgba(96,165,250,.6);color:#eff6ff;box-shadow:none}
.swatch-row{display:flex;gap:4px;flex-wrap:wrap;align-items:center;margin-top:3px}
.sw{width:19px;height:19px;border-radius:3px;cursor:pointer;border:2px solid transparent;transition:border-color .15s;flex-shrink:0}
.sw:hover,.sw.on{border-color:#fff}
.sw.rst{background:var(--surface3);border-color:var(--border);font-size:10px;display:flex;align-items:center;justify-content:center;color:var(--text2)}
.icon-row{display:flex;align-items:center;gap:7px}
.icon-preview{width:48px;height:36px;object-fit:contain;background:var(--surface2);border:1px solid var(--border);border-radius:4px}
.panel-btn,.pb{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:36px;padding:8px 12px;border-radius:var(--control-radius);border:1px solid var(--control-border);background:var(--control-bg);color:var(--text);font-family:var(--font-display);font-size:11px;font-weight:700;letter-spacing:.78px;text-transform:uppercase;cursor:pointer;transition:background .15s,border-color .15s,color .15s,transform .15s,box-shadow .15s;text-align:center;width:100%;margin-bottom:5px;box-shadow:none}
.pb:hover,.panel-btn:hover{border-color:rgba(120,168,197,.42);color:#f8fbff;background:linear-gradient(180deg,rgba(120,168,197,.06),transparent),var(--control-bg-hover);transform:translateY(-1px);box-shadow:0 10px 18px rgba(3,8,13,.14)}
.pb:active,.panel-btn:active{transform:translateY(0) scale(.98)}
.pb.del,.panel-btn.delete{color:#fca5a5;border-color:rgba(239,68,68,.45)}
.pb.del:hover,.panel-btn.delete:hover{background:rgba(127,29,29,.24);border-color:rgba(248,113,113,.72);color:#fee2e2}
.pb.warn,.panel-btn.warn{color:#fdba74;border-color:rgba(249,115,22,.45)}
.pb.warn:hover,.panel-btn.warn:hover{background:rgba(124,45,18,.24);border-color:rgba(251,146,60,.72);color:#ffedd5}
.chk-row{display:flex;flex-wrap:wrap;gap:6px}
.chk-row label{display:flex;align-items:center;gap:3px;font-size:10px;cursor:pointer;color:var(--text2)}
.multi-count{font-size:20px;font-weight:900;color:var(--accent);font-family:var(--font-display);text-align:center;margin:6px 0 14px}
/* MINIMAP */
#minimap{position:absolute;bottom:10px;right:10px;width:168px;height:104px;background:rgba(12,19,25,.86);border:1px solid rgba(142,160,173,.18);border-radius:18px;overflow:hidden;z-index:50;pointer-events:none;display:block;box-shadow:0 22px 36px rgba(3,8,13,.24);backdrop-filter:blur(16px)}
#minimap canvas{width:100%;height:100%}
.mm-label{position:absolute;bottom:8px;left:8px;padding:3px 8px;border:1px solid rgba(139,148,158,.22);border-radius:999px;background:rgba(13,17,23,.72);font-family:var(--font-mono);font-size:8px;letter-spacing:.6px;color:#c9d4df}
#mm-toggle{position:absolute;bottom:124px;right:10px;z-index:51}
#drag-preview-ghost{position:absolute;z-index:65;display:none;padding:4px 8px;border:1px solid rgba(34,197,94,.5);border-radius:999px;background:rgba(15,23,42,.92);font:700 10px/1 var(--font-display);letter-spacing:.6px;color:#dcfce7;pointer-events:none;box-shadow:var(--shadow-md)}
#readonly-banner{position:absolute;top:8px;left:50%;transform:translateX(-50%);z-index:210;display:none;max-width:min(80vw,680px);padding:7px 12px;border:1px solid rgba(245,158,11,.4);border-radius:999px;background:rgba(245,158,11,.14);font:700 10px/1.2 var(--font-display);letter-spacing:.9px;color:#fbbf24;text-transform:uppercase;pointer-events:none}
/* CONTEXT MENU */
#ctx{position:fixed;background:var(--surface);border:1px solid var(--control-border-strong);border-radius:10px;padding:6px;z-index:9999;display:none;min-width:180px;box-shadow:var(--shadow-lg);backdrop-filter:none}
.ctx-item{padding:8px 10px;font-family:var(--font-display);font-size:11px;font-weight:700;letter-spacing:.7px;color:var(--text);cursor:pointer;display:flex;align-items:center;gap:8px;text-transform:uppercase;border-radius:9px;transition:background .12s,border-color .12s,color .12s,transform .12s}
.ctx-item:hover{background:rgba(59,130,246,.12);color:#eff6ff;transform:translateX(1px)}
.ctx-item.danger{color:var(--red)}.ctx-item.danger:hover{background:rgba(239,68,68,.1)}
.ctx-sep{height:1px;background:var(--border);margin:3px 0}
/* LINK MODE */
body.link-mode .orbat-node{cursor:crosshair!important}
/* STATUS BAR */
#statusbar{min-height:38px;margin:0 10px 10px;background:linear-gradient(180deg,rgba(255,255,255,.02),transparent),var(--statusbar-bg);border:1px solid color-mix(in srgb,var(--border) 42%,transparent);border-radius:20px;display:flex;align-items:center;flex-wrap:wrap;padding:8px 12px;gap:6px 12px;font-family:var(--font-mono);font-size:10px;color:var(--text2);flex-shrink:0;backdrop-filter:blur(14px);box-shadow:0 10px 24px rgba(3,8,13,.12)}
#statusbar > span{display:inline-flex;align-items:center;min-height:20px;padding:3px 9px;border:1px solid rgba(142,160,173,.14);border-radius:999px;background:rgba(255,255,255,.03)}
#statusbar b{color:var(--accent)}
#statusbar .hint{margin-left:auto;font-size:9px;color:#5f6b7d;max-width:min(720px,55vw);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* UNDO FLASH */
#undo-flash{position:absolute;top:8px;left:50%;transform:translateX(-50%);background:rgba(59,130,246,.18);border:1px solid var(--accent);border-radius:5px;padding:3px 12px;font-family:var(--font-mono);font-size:10px;color:var(--accent);opacity:0;transition:opacity .3s;pointer-events:none;z-index:200}
#undo-flash.on{opacity:1}
/* MODAL */
.modal-ov{position:fixed;inset:0;background:radial-gradient(circle at top,rgba(108,162,200,.12),transparent 28%),rgba(2,6,10,.72);z-index:8000;display:none;align-items:center;justify-content:center;padding:20px}
.modal-ov.open{display:flex}
.modal-box{background:linear-gradient(180deg,rgba(255,255,255,.05),transparent),var(--surface);border:1px solid var(--control-border-strong);border-radius:24px;padding:22px;min-width:300px;max-width:460px;max-height:80vh;overflow-y:auto;box-shadow:var(--shadow-lg)}
.modal-box h2{font-family:var(--font-display);font-size:15px;font-weight:700;letter-spacing:1.15px;margin-bottom:14px;color:var(--text);display:flex;justify-content:space-between;align-items:center;text-transform:uppercase}
.modal-x{cursor:pointer;color:var(--text2);font-size:18px;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:999px;transition:background .15s,color .15s}
.modal-x:hover{background:rgba(255,255,255,.05);color:var(--text)}
.modal-acts{display:flex;gap:8px;justify-content:flex-end;margin-top:14px}
/* TOAST */
#toast{position:fixed;bottom:34px;left:50%;transform:translateX(-50%) translateY(14px);background:rgba(12,19,25,.92);border:1px solid rgba(142,160,173,.18);border-radius:18px;padding:9px 16px;font-family:var(--font-display);font-size:12px;letter-spacing:.58px;color:var(--text);opacity:0;transition:all .25s;pointer-events:none;z-index:9999;box-shadow:var(--shadow-lg);backdrop-filter:blur(14px)}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:rgba(139,148,158,.44);border:2px solid transparent;border-radius:999px;background-clip:padding-box}::-webkit-scrollbar-thumb:hover{background:rgba(139,148,158,.7);border:2px solid transparent;background-clip:padding-box}

/* COLLAPSIBLE SIDEBAR */
#sidebar{transition:width .2s}
#sidebar.sb-collapsed{width:0;overflow:hidden}

/* PLANNED STATUS — dashed border */
.orbat-node.planned .node-card{border-style:dashed!important}

/* COLLAPSE/EXPAND */
.collapse-btn{position:absolute;top:-11px;right:4px;width:16px;height:16px;border-radius:50%;background:#374151;border:2px solid var(--bg);color:#fff;font-size:8px;line-height:12px;text-align:center;cursor:pointer;opacity:0;transition:opacity .12s;z-index:5}
.orbat-node:hover .collapse-btn,.orbat-node.selected .collapse-btn,.orbat-node.multi-selected .collapse-btn{opacity:1}
.node-collapsed-badge{position:absolute;bottom:-14px;left:50%;transform:translateX(-50%);background:var(--surface2);border:1px solid var(--border);border-radius:3px;padding:1px 5px;font-family:var(--font-mono);font-size:8px;color:var(--text2);white-space:nowrap;cursor:pointer;z-index:5}

/* HOVER CHAIN HIGHLIGHT */
.orbat-node.chain-hi .node-card{box-shadow:0 0 0 3px rgba(168,85,247,.5)!important;border-color:#a855f7!important}

/* REPARENT TARGET */
.orbat-node.rp-target .node-card{border-color:#22c55e!important;box-shadow:0 0 0 3px rgba(34,197,94,.45)!important}

/* ALIGN TOOLBAR */
#align-bar{position:absolute;top:6px;left:50%;transform:translateX(-50%);display:none;background:var(--surface);border:1px solid var(--border);border-radius:6px;padding:4px 8px;gap:4px;z-index:60;box-shadow:0 4px 16px rgba(0,0,0,.4);align-items:center}
#align-bar.show{display:flex}
#align-bar .tb-btn{font-size:10px;padding:3px 6px}

/* REINF/REDUCED BADGE */
.node-mod-badge{position:absolute;top:-6px;left:-6px;font-size:10px;font-weight:900;color:var(--text2);background:var(--bg);border-radius:50%;width:14px;height:14px;display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);border:1px solid var(--border)}

/* AUTOSAVE INDICATOR */
#afsave{position:absolute;top:6px;right:8px;background:rgba(34,197,94,.12);border:1px solid #22c55e;border-radius:4px;padding:2px 10px;font-family:var(--font-mono);font-size:9px;color:#22c55e;opacity:0;transition:opacity .25s;pointer-events:none;z-index:200}
#afsave.on{opacity:1}

/* SHORTCUTS MODAL */
.sc-table{width:100%;border-collapse:collapse;font-size:11px}
.sc-table td{padding:4px 6px;border-bottom:1px solid var(--border)}
.sc-table td:first-child{font-family:var(--font-mono);color:var(--accent);white-space:nowrap}
.sc-table tr:last-child td{border-bottom:none}
kbd{background:var(--surface2);border:1px solid var(--border);border-radius:3px;padding:1px 5px;font-family:var(--font-mono);font-size:9px}

/* TEMPLATES */
.tpl-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.tpl-card{background:var(--surface2);border:1px solid var(--border);border-radius:6px;padding:10px;cursor:pointer;transition:all .12s;text-align:center}
.tpl-card:hover{border-color:var(--accent);background:rgba(59,130,246,.06)}
.tpl-name{font-family:var(--font-display);font-size:12px;font-weight:700;color:var(--text);margin-bottom:2px}
.tpl-desc{font-family:var(--font-body);font-size:9px;color:var(--text2)}

/* RELATIONSHIP LEGEND */
.rel-legend{display:flex;flex-direction:column;gap:4px;font-size:9px;color:var(--text2);font-family:var(--font-display);letter-spacing:.5px}
.rel-row{display:flex;align-items:center;gap:6px}
.rel-line{width:26px;height:2px;flex-shrink:0}
.conn-label{font-family:var(--font-display);font-size:9px;font-weight:700;letter-spacing:.8px;paint-order:stroke;stroke:#0d1117;stroke-width:3px;stroke-linejoin:round;pointer-events:none;text-transform:uppercase}

/* MODAL BASE */
.modal-overlay{position:fixed;inset:0;background:radial-gradient(circle at top,rgba(59,130,246,.12),transparent 28%),rgba(0,0,0,.68);z-index:8000;display:none;align-items:center;justify-content:center;padding:20px}
.modal-overlay.open{display:flex}
.modal-box{background:linear-gradient(180deg,rgba(255,255,255,.04),transparent),var(--surface);border:1px solid var(--control-border-strong);border-radius:18px;padding:22px;min-width:300px;max-width:500px;max-height:82vh;overflow-y:auto;box-shadow:var(--shadow-lg)}
.modal-box h2{font-family:var(--font-display);font-size:15px;font-weight:700;letter-spacing:1px;margin-bottom:14px;color:var(--text);display:flex;justify-content:space-between;align-items:center;text-transform:uppercase}
.modal-close-x{cursor:pointer;color:var(--text2);font-size:16px}
.modal-acts{display:flex;gap:7px;justify-content:flex-end;margin-top:12px}

/* NODE RELTYPE indicator strip */
.node-reltype-strip{position:absolute;bottom:0;left:0;right:0;height:3px;border-radius:0 0 5px 5px;opacity:.7}

/* TOOLTIP on palette items */
.pal-item[data-tip]:hover::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 5px);left:50%;transform:translateX(-50%);background:#1a2332;border:1px solid var(--border);border-radius:4px;padding:4px 8px;font-family:var(--font-body);font-size:10px;color:var(--text);white-space:nowrap;z-index:300;pointer-events:none;box-shadow:0 4px 12px rgba(0,0,0,.4)}
.pal-item{position:relative}

@media print{body{background:#fff;color:#000}#topbar,#sidebar,#edit-panel,#statusbar,#minimap,#mm-toggle,#ctx{display:none!important}#canvas-wrap{overflow:visible!important;background:#fff!important;background-image:none!important}#canvas{position:static!important;transform:none!important}.node-card,.textbox-card{background:#fff!important;border-color:#333!important;box-shadow:none!important}.node-name,.node-designation,.textbox-input{color:#000!important}.node-commander,.node-strength-lbl,.textbox-handle{color:#555!important}.node-add-btn,.node-link-btn{display:none!important}}

.status-row{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
#unit-search-input,#tag-filter-input{background:var(--surface2);border:1px solid var(--border);border-radius:5px;color:var(--text);font-family:var(--font-body);font-size:12px;padding:5px 8px;outline:none;min-width:120px}
#unit-search-input{width:176px}#tag-filter-input{width:126px}
#unit-search-input,#tag-filter-input{background:var(--control-bg-soft);border:1px solid var(--control-border);border-radius:999px;padding:8px 12px;box-shadow:none;transition:border-color .15s,box-shadow .15s,background .15s,transform .15s}
#unit-search-input:hover,#tag-filter-input:hover{border-color:var(--control-border-strong)}
#unit-search-input:focus,#tag-filter-input:focus{border-color:var(--accent);box-shadow:var(--control-ring);background:var(--surface2);transform:none}
.input-clear-btn{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;margin-left:-4px;border:1px solid transparent;border-radius:999px;background:transparent;color:var(--text2);font-family:var(--font-mono);font-size:11px;flex-shrink:0;opacity:.7;transition:background .15s,border-color .15s,color .15s,opacity .15s}
.input-clear-btn:hover{opacity:1;background:rgba(255,255,255,.05);border-color:var(--border);color:var(--text)}
.input-clear-btn.hidden{display:none}
.orbat-node.search-hit .node-card{box-shadow:0 0 0 3px rgba(59,130,246,.45)!important}
.orbat-node.filtered-out{display:none!important}
.node-readiness-pill{position:absolute;top:-7px;left:-7px;min-width:24px;height:14px;padding:0 4px;border-radius:999px;border:1px solid var(--bg);background:#111827;color:#fff;font-family:var(--font-mono);font-size:8px;line-height:12px;text-align:center}
.node-tags{display:flex;gap:3px;flex-wrap:wrap;justify-content:center;max-width:132px;margin-top:2px}
.node-tag-chip{font-family:var(--font-display);font-size:8px;font-weight:700;line-height:1;padding:2px 4px;border-radius:999px;color:#fff;letter-spacing:.4px;text-transform:uppercase}
.panel-help{font-size:10px;color:var(--text2);margin-top:4px}
#ep-insignia-prev{max-width:100%;max-height:72px;object-fit:contain;background:var(--surface2);border:1px solid var(--border);border-radius:4px;padding:4px;display:none}
.tb-btn:focus-visible,.panel-btn:focus-visible,.pb:focus-visible,.aff-btn:focus-visible,.stat-btn:focus-visible,.sz-btn:focus-visible,.status-btn:focus-visible,.palette-section-title:focus-visible,.pal-item:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible{outline:none;border-color:var(--accent)!important;box-shadow:0 0 0 3px rgba(108,162,200,.24)}
#empty-hint{width:min(520px,calc(100vw - 48px));padding:30px 30px 26px;border:1px solid rgba(120,168,197,.16);border-radius:28px;background:linear-gradient(180deg,rgba(120,168,197,.12),rgba(120,168,197,0) 42%),rgba(14,21,28,.86);backdrop-filter:blur(18px);box-shadow:0 30px 56px rgba(3,8,13,.3)}
#empty-hint .eh-hero{display:inline-flex;align-items:center;justify-content:center;width:70px;height:70px;margin:0 auto 14px;border-radius:18px;background:linear-gradient(160deg,rgba(120,168,197,.24),rgba(200,160,90,.08));border:1px solid rgba(120,168,197,.22);font-size:38px;line-height:1;color:#e2edf4;box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
#empty-hint .eh-title{font-family:var(--font-display);font-size:24px;font-weight:700;letter-spacing:.3px;color:var(--text);text-transform:none;margin-bottom:8px;text-wrap:balance}
#empty-hint .eh-copy{font-family:var(--font-body);font-size:13px;line-height:1.72;color:#aebccc;max-width:34ch;margin:0 auto}
#empty-hint .eh-action-row{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:14px}
#empty-hint .eh-action-row .pb{width:auto;margin:0;min-height:34px;padding:7px 10px}
#empty-hint .eh-kbd-row{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:12px}
#empty-hint .eh-kbd-row span{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border-radius:999px;border:1px solid rgba(139,148,158,.24);background:rgba(255,255,255,.03);font-family:var(--font-mono);font-size:9px;color:#c3cfda}
body.theme-light #empty-hint,body.theme-briefing #empty-hint{background:rgba(255,255,255,.86)}

.sidebar-primer{margin:12px 10px 8px;padding:16px;border:1px solid rgba(142,160,173,.12);border-radius:20px;background:linear-gradient(180deg,rgba(120,168,197,.12),transparent 54%),var(--surface2);box-shadow:0 16px 30px rgba(3,8,13,.12);position:relative;overflow:hidden}
.sidebar-primer::after{content:'';position:absolute;right:-22px;top:-18px;width:96px;height:96px;border-radius:22px;background:radial-gradient(circle,rgba(200,160,90,.12),transparent 68%);pointer-events:none}
.sidebar-primer-head{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.sidebar-primer-head .tb-btn{padding:4px 8px;font-size:9px;min-height:30px}
.sidebar-primer-kicker{font:700 10px/1 var(--font-display);letter-spacing:1.1px;text-transform:uppercase;color:var(--accent);margin-bottom:6px}
.sidebar-primer-title{font:700 19px/1.02 var(--font-display);letter-spacing:.14px;color:var(--text);text-wrap:balance;max-width:10ch}
.sidebar-primer-steps{list-style:none;display:flex;flex-direction:column;gap:10px;margin:14px 0 0;padding:0}
.sidebar-primer-steps li{display:grid;grid-template-columns:24px 1fr;gap:10px;align-items:flex-start}
.sidebar-primer-steps li span{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:8px;background:rgba(120,168,197,.14);border:1px solid rgba(120,168,197,.22);font:700 10px/1 var(--font-mono);color:#dbeafe}
.sidebar-primer-steps strong{display:block;font:700 11px/1.2 var(--font-display);letter-spacing:.3px;color:var(--text);text-transform:uppercase}
.sidebar-primer-steps p{margin-top:4px;font:500 11px/1.55 var(--font-body);color:var(--text2)}
.sidebar-primer-actions{display:flex;gap:8px;margin-top:14px}
.sidebar-primer-actions .pb{width:100%;margin:0;min-height:34px}

.flow-summary-card{display:flex;flex-direction:column;gap:10px;padding:16px 15px 14px;margin:4px 0 14px;border:1px solid rgba(142,160,173,.12);border-radius:20px;background:linear-gradient(180deg,rgba(255,255,255,.04),transparent),var(--surface2);box-shadow:0 14px 28px rgba(3,8,13,.1);position:relative;overflow:hidden}
.flow-summary-card::after{content:'';position:absolute;inset:auto -12px -24px auto;width:86px;height:86px;border-radius:24px;background:radial-gradient(circle,rgba(120,168,197,.12),transparent 68%);pointer-events:none}
.flow-summary-card.multi{margin-bottom:12px}
.flow-summary-topline{display:flex;justify-content:space-between;gap:10px;align-items:center}
.flow-summary-kicker{font:700 10px/1 var(--font-display);letter-spacing:1px;text-transform:uppercase;color:var(--accent)}
.flow-summary-title{font:700 20px/1.04 var(--font-display);letter-spacing:.14px;color:var(--text);text-wrap:balance}
.flow-summary-lineage{font:600 10px/1.45 var(--font-mono);color:var(--text2);word-break:break-word}
.flow-summary-copy{font:500 11px/1.65 var(--font-body);color:var(--text2)}
.flow-summary-badge{display:inline-flex;align-items:center;justify-content:center;min-height:28px;padding:0 10px;border-radius:999px;border:1px solid rgba(108,162,200,.24);background:rgba(11,18,24,.42);font:700 9px/1 var(--font-mono);letter-spacing:.45px;color:#e2edf4;text-transform:uppercase}
.flow-summary-pills{display:flex;flex-wrap:wrap;gap:6px}
.flow-pill{display:inline-flex;align-items:center;gap:6px;min-height:26px;padding:0 9px;border-radius:999px;border:1px solid rgba(148,163,184,.14);background:rgba(255,255,255,.03);font:700 9px/1 var(--font-mono);color:var(--text2)}
.flow-pill b{font-family:var(--font-display);font-size:9px;letter-spacing:.55px;color:var(--text);text-transform:uppercase}
.flow-pill.tone-warm{border-color:rgba(217,164,65,.32);color:#ecc57e}
.flow-summary-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
.flow-summary-actions .pb{margin:0;min-height:34px}
.flow-summary-actions .pb:disabled{opacity:.48;cursor:not-allowed}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

@media (max-width: 980px){
  #statusbar .hint{display:none}
  #unit-search-input{width:132px}
  #tag-filter-input{width:96px}
  #tab-bar{padding:8px 10px}
  .tab{max-width:180px}
}

@media (max-width: 720px){
  #topbar{gap:6px;padding:4px 8px 0}
  #tab-bar{margin:0 8px}
  #main{padding:8px 8px 6px;gap:8px}
  #statusbar{margin:0 8px 8px}
  #statusbar{padding:4px 8px;gap:4px 10px}
  #empty-hint{padding:18px 16px}
  .flow-summary-actions{grid-template-columns:1fr}
  .sidebar-primer-actions{flex-direction:column}
}