/* NorthStar — consolidated design CSS */
/* Generated from .design/ HTML files — do not edit manually */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

/* ── DESIGN SYSTEM BASE ── */
/* ── TOKENS ── */
:root {
  --teal:#00B8A9;--teal-dim:rgba(0,184,169,0.10);--teal-glow:rgba(0,184,169,0.25);--teal-mid:rgba(0,184,169,0.35);
  --bg:#0E1318;--card:#161C24;--card-2:#1C242E;
  --border:rgba(255,255,255,0.06);--border-hi:rgba(255,255,255,0.11);
  --text:#E8EAED;--text-sub:#919EAB;--text-dim:#4B5563;
  --red:#FF5630;--red-dim:rgba(255,86,48,0.10);--red-border:rgba(255,86,48,0.28);
  --amber:#FFAB00;--amber-dim:rgba(255,171,0,0.11);--amber-mid:rgba(255,171,0,0.30);
  --green:#36B37E;--green-dim:rgba(54,179,126,0.10);
  --orange:#FF7043;--orange-dim:rgba(255,112,67,0.10);
  --purple:#8B5CF6;--purple-dim:rgba(139,92,246,0.10);
  --sans:'IBM Plex Sans',sans-serif;--mono:'IBM Plex Mono',monospace;
}
.light {
  --teal:#007B75;--teal-dim:rgba(0,123,117,0.10);--teal-glow:rgba(0,123,117,0.20);--teal-mid:rgba(0,123,117,0.30);
  --bg:#E8ECF0;--card:#F4F6F8;--card-2:#EAECEF;
  --border:rgba(0,0,0,0.08);--border-hi:rgba(0,0,0,0.13);
  --text:#1C2025;--text-sub:#4B5563;--text-dim:#9AA3AE;
  --red:#B91C1C;--red-dim:rgba(185,28,28,0.08);--red-border:rgba(185,28,28,0.22);
  --amber:#A16207;--amber-dim:rgba(161,98,7,0.10);--amber-mid:rgba(161,98,7,0.28);
  --green:#156B41;--green-dim:rgba(21,107,65,0.10);
  --orange:#EA580C;--orange-dim:rgba(234,88,12,0.09);
  --purple:#6D28D9;--purple-dim:rgba(109,40,217,0.10);
}

html,body{min-height:100%;background:var(--bg);color:var(--text);font-family:var(--sans);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;transition:background .2s,color .2s}

/* ── DS CHROME ── */
.ds-header{position:sticky;top:0;z-index:100;background:var(--card);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 40px;height:52px}
.ds-logo{display:flex;align-items:center;gap:10px}
.ds-logo-mark{width:28px;height:28px;border-radius:6px;background:linear-gradient(135deg,var(--teal),#007B75);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;color:#fff}
.ds-logo-text{font-size:13px;font-weight:700;color:var(--text)}
.ds-logo-sub{font-size:10px;color:var(--text-dim);margin-left:6px;letter-spacing:0.06em}
.ds-nav{display:flex;align-items:center;gap:2px}
.ds-nav a{padding:5px 12px;border-radius:5px;font-size:12px;font-weight:500;color:var(--text-sub);text-decoration:none;transition:all .1s;cursor:pointer}
.ds-nav a:hover{background:rgba(255,255,255,.04);color:var(--text)}
.ds-nav a.active{background:var(--teal-dim);color:var(--teal);font-weight:600}
.ds-theme-btn{display:flex;align-items:center;gap:5px;padding:5px 10px;border-radius:5px;font-size:11px;font-weight:600;border:1px solid var(--border);background:var(--card-2);color:var(--text-sub);cursor:pointer;font-family:var(--sans)}

.ds-body{display:flex;min-height:calc(100vh - 52px)}
.ds-sidebar{width:220px;flex-shrink:0;position:sticky;top:52px;height:calc(100vh - 52px);overflow-y:auto;border-right:1px solid var(--border);padding:16px 12px}
.ds-sidebar-section{font-size:9px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--text-dim);padding:10px 8px 4px}
.ds-sidebar-link{display:block;padding:6px 8px;border-radius:5px;font-size:12px;color:var(--text-sub);text-decoration:none;transition:all .1s;cursor:pointer}
.ds-sidebar-link:hover{background:rgba(255,255,255,.03);color:var(--text)}
.ds-sidebar-link.active{background:var(--teal-dim);color:var(--teal);font-weight:600}

.ds-content{flex:1;min-width:0;padding:40px;max-width:1000px}

/* ── SECTIONS ── */
.ds-section{margin-bottom:64px;scroll-margin-top:70px}
.ds-section-title{font-size:22px;font-weight:800;letter-spacing:-0.02em;margin-bottom:6px}
.ds-section-desc{font-size:14px;color:var(--text-sub);margin-bottom:28px;line-height:1.7}
.ds-divider{height:1px;background:var(--border);margin:40px 0}

/* ── SUBSECTIONS ── */
.ds-sub{margin-bottom:36px}
.ds-sub-title{font-size:13px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:var(--text-dim);margin-bottom:16px;padding-bottom:8px;border-bottom:1px solid var(--border)}
.ds-desc{font-size:13px;color:var(--text-sub);line-height:1.7;margin-bottom:14px}

/* ── SWATCH GRID ── */
.swatch-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}
.swatch{border-radius:8px;overflow:hidden;border:1px solid var(--border)}
.swatch-color{height:52px}
.swatch-info{padding:8px 10px;background:var(--card)}
.swatch-name{font-size:12px;font-weight:600;font-family:var(--mono)}
.swatch-var{font-size:10px;color:var(--text-dim);font-family:var(--mono);margin-top:2px}
.swatch-hex{font-size:10px;color:var(--text-dim);font-family:var(--mono)}

/* ── TYPE SCALE ── */
.type-row{display:flex;align-items:baseline;gap:20px;padding:14px 0;border-bottom:1px solid var(--border)}
.type-row:last-child{border-bottom:none}
.type-meta{width:160px;flex-shrink:0;font-size:11px;font-family:var(--mono);color:var(--text-dim)}
.type-sample{flex:1}

/* ── DEMO CANVAS ── */
.demo{background:var(--card-2);border:1px solid var(--border);border-radius:10px;padding:24px;margin-bottom:12px}
.demo--dark{background:#0E1318;border-color:rgba(255,255,255,.06)}
.demo-label{font-size:10px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--text-dim);margin-bottom:14px}
.demo-row{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:10px}
.demo-row:last-child{margin-bottom:0}

/* ── CODE ── */
.ds-code{background:var(--card-2);border:1px solid var(--border);border-radius:6px;padding:14px 16px;font-family:var(--mono);font-size:12px;color:var(--text-sub);overflow-x:auto;white-space:pre;margin-top:10px;line-height:1.7}
.ds-code .kw{color:var(--teal)}
.ds-code .cl{color:var(--amber)}
.ds-code .va{color:var(--text)}
.ds-code .co{color:var(--text-dim)}

/* ── SPEC TABLE ── */
.spec-table{width:100%;border-collapse:collapse;font-size:13px}
.spec-table th{text-align:left;padding:8px 12px;font-size:10px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--text-dim);background:var(--card-2);border-bottom:1px solid var(--border)}
.spec-table td{padding:10px 12px;border-bottom:1px solid var(--border);vertical-align:top}
.spec-table tr:last-child td{border-bottom:none}
.spec-table .mono{font-family:var(--mono);font-size:12px;color:var(--teal)}
.spec-table .desc{color:var(--text-sub)}
.spec-wrap{background:var(--card);border:1px solid var(--border);border-radius:8px;overflow:hidden;margin-bottom:12px}

/* ── PAGE TYPE CARDS ── */
.page-type-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.page-type-card{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:18px 20px}
.page-type-label{font-size:12px;font-weight:700;color:var(--text);margin-bottom:6px;display:flex;align-items:center;gap:8px}
.page-type-icon{width:28px;height:28px;border-radius:6px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.page-type-desc{font-size:12px;color:var(--text-sub);line-height:1.6;margin-bottom:10px}
.page-type-rules{font-size:11px;color:var(--text-dim);display:flex;flex-direction:column;gap:3px}
.page-type-rules li{list-style:none;padding-left:12px;position:relative}
.page-type-rules li::before{content:"·";position:absolute;left:0;color:var(--teal)}
.page-type-examples{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px}
.page-type-example{font-size:10px;padding:2px 7px;border-radius:3px;background:var(--card-2);border:1px solid var(--border);color:var(--text-dim);font-family:var(--mono)}

/* ── COMPONENTS ── */
/* Buttons */
.btn{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:6px;font-size:12px;font-weight:600;font-family:var(--sans);cursor:pointer;transition:all .12s;white-space:nowrap;border:none;text-decoration:none}
.btn--primary{background:var(--teal);color:#fff}.btn--primary:hover{filter:brightness(1.08)}
.btn--ghost{background:var(--teal-dim);color:var(--teal);border:1px solid var(--teal-mid)}.btn--ghost:hover{background:var(--teal);color:#0a1018}
.btn--subtle{background:rgba(255,255,255,0.04);color:var(--text-sub);border:1px solid var(--border)}.btn--subtle:hover{background:var(--card-2);color:var(--text)}
.btn--danger{background:var(--red-dim);color:var(--red);border:1px solid var(--red-border)}.btn--danger:hover{background:var(--red);color:#fff}
.btn--sm{padding:4px 10px;font-size:11px}
.btn--lg{padding:10px 20px;font-size:13px}
/* Pills */
.pill{display:inline-flex;align-items:center;padding:2px 8px;border-radius:3px;font-size:10px;font-weight:600;letter-spacing:0.04em;white-space:nowrap}
.pill--teal{background:var(--teal-dim);color:var(--teal)}
.pill--green{background:var(--green-dim);color:var(--green)}
.pill--amber{background:var(--amber-dim);color:var(--amber)}
.pill--red{background:var(--red-dim);color:var(--red)}
.pill--dim{background:rgba(255,255,255,.05);color:var(--text-dim)}
.pill--orange{background:var(--orange-dim);color:var(--orange)}
.pill--purple{background:var(--purple-dim);color:var(--purple)}
.pill--outline-teal{background:transparent;color:var(--teal);border:1px solid var(--teal-mid)}
.pill--outline-green{background:transparent;color:var(--green);border:1px solid rgba(54,179,126,.3)}
.pill--outline-amber{background:transparent;color:var(--amber);border:1px solid var(--amber-mid)}
/* Badges */
.badge{display:inline-flex;align-items:center;gap:4px;padding:1px 7px;border-radius:10px;font-size:10px;font-weight:700;font-family:var(--mono)}
.badge--teal{background:var(--teal-dim);color:var(--teal)}
.badge--green{background:var(--green-dim);color:var(--green)}
.badge--amber{background:var(--amber-dim);color:var(--amber)}
.badge--red{background:var(--red-dim);color:var(--red)}
/* Cards */
.card{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:16px 18px;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.card-label{font-size:10px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--text-dim)}
/* Inputs */
.ns-input,.ns-select,.ns-textarea{width:100%;box-sizing:border-box;padding:9px 12px;background:var(--card-2);border:1px solid var(--border);border-radius:7px;color:var(--text);font-size:13px;font-family:var(--sans);outline:none;transition:border-color .15s,box-shadow .15s}
.ns-input:focus,.ns-select:focus,.ns-textarea:focus{border-color:var(--teal-mid);box-shadow:0 0 0 3px var(--teal-dim)}
.ns-input::placeholder,.ns-textarea::placeholder{color:var(--text-dim)}
.ns-select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23637381' d='M6 8L1 3h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:32px}
.ns-textarea{resize:vertical;min-height:80px;line-height:1.6}
.ns-label{display:block;font-size:12px;font-weight:600;color:var(--text-sub);margin-bottom:6px}
.ns-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.ns-hint{font-size:11px;color:var(--text-dim)}
.ns-error{font-size:11px;color:var(--red)}
/* Table */
.ns-table{background:var(--card);border:1px solid var(--border);border-radius:10px;overflow:hidden}
.ns-table-head{display:grid;padding:8px 16px;font-size:10px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--text-dim);background:var(--card-2);border-bottom:1px solid var(--border)}
.ns-table-row{display:grid;padding:12px 16px;align-items:center;border-top:1px solid var(--border);transition:background .1s;cursor:pointer;text-decoration:none;color:var(--text)}
.ns-table-row:hover{background:rgba(255,255,255,.025)}
.ns-table-foot{padding:10px 16px;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;font-size:11px;color:var(--text-dim);background:var(--card-2)}
/* Filter bar */
.ns-filter-bar{display:flex;align-items:center;gap:8px;margin-bottom:16px;flex-wrap:wrap}
.ns-search{padding:7px 12px;background:var(--card-2);border:1px solid var(--border);border-radius:20px;color:var(--text);font-size:12px;font-family:var(--sans);outline:none;width:220px;box-sizing:border-box}
.ns-search::placeholder{color:var(--text-dim)}
.ns-chip{display:inline-flex;align-items:center;padding:5px 10px;border-radius:20px;font-size:11px;font-weight:500;background:var(--card-2);border:1px solid var(--border);color:var(--text-sub);cursor:pointer;transition:all .1s}
.ns-chip:hover,.ns-chip.active{background:var(--teal-dim);border-color:var(--teal-mid);color:var(--teal);font-weight:600}
/* KPI */
.kpi-card{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:16px 18px}
.kpi-label{font-size:10px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--text-dim);margin-bottom:8px}
.kpi-value{font-size:26px;font-weight:700;letter-spacing:-0.02em;line-height:1;font-family:var(--mono)}
.kpi-sub{font-size:11px;color:var(--text-dim);margin-top:6px;display:flex;align-items:center;gap:4px}
.kpi-delta-up{color:var(--green);font-size:11px;font-weight:600;font-family:var(--mono)}
.kpi-delta-down{color:var(--red);font-size:11px;font-weight:600;font-family:var(--mono)}
.kpi-delta-warn{color:var(--amber);font-size:11px;font-weight:600;font-family:var(--mono)}
/* Info boxes */
.info-box{padding:12px 14px;border-radius:7px;font-size:12px;line-height:1.7}
.info-box--teal{background:var(--teal-dim);border:1px solid var(--teal-mid);color:var(--teal)}
.info-box--amber{background:var(--amber-dim);border:1px solid var(--amber-mid);color:var(--amber)}
.info-box--green{background:var(--green-dim);border:1px solid rgba(54,179,126,.3);color:var(--green)}
.info-box--red{background:var(--red-dim);border:1px solid var(--red-border);color:var(--red)}
/* Radio cards */
.radio-group{display:flex;flex-direction:column;gap:8px}
.radio-card{display:flex;align-items:flex-start;gap:12px;padding:12px 14px;border-radius:8px;border:1px solid var(--border);cursor:pointer;transition:all .15s;background:var(--card-2)}
.radio-card:hover,.radio-card.active{border-color:var(--teal-mid);background:var(--teal-dim)}
.radio-dot{width:16px;height:16px;border-radius:50%;border:2px solid var(--border-hi);flex-shrink:0;margin-top:2px;transition:all .15s}
.radio-card.active .radio-dot{border-color:var(--teal);background:var(--teal);box-shadow:inset 0 0 0 3px var(--card)}
/* Timeline */
.tl-item{display:flex;gap:14px;padding-bottom:14px}
.tl-item:last-child{padding-bottom:0}
.tl-spine{display:flex;flex-direction:column;align-items:center;flex-shrink:0;width:20px}
.tl-dot{width:8px;height:8px;border-radius:50%;background:var(--teal);flex-shrink:0;margin-top:4px}
.tl-dot--green{background:var(--green)}.tl-dot--amber{background:var(--amber)}.tl-dot--red{background:var(--red)}.tl-dot--dim{background:var(--text-dim)}
.tl-line{width:1px;flex:1;background:var(--border);margin-top:4px}
.tl-item:last-child .tl-line{display:none}
.tl-event{font-size:13px;font-weight:500}
.tl-meta{font-size:11px;color:var(--text-dim);margin-top:2px;font-family:var(--mono)}
/* HUD nodes */
.hud-demo{background:var(--card);border:1px solid var(--border-hi);border-radius:10px;padding:20px 24px;position:relative;overflow:hidden}
.hud-demo::before{content:'';position:absolute;top:0;left:20px;right:20px;height:1px;background:linear-gradient(90deg,transparent,var(--teal-mid),transparent)}
.hud-wire-demo{position:relative;height:4px;background:var(--border-hi);border-radius:2px;margin:30px 0}
.hud-wire-live-demo{position:absolute;left:0;top:0;bottom:0;width:45%;background:linear-gradient(90deg,var(--green),var(--teal));opacity:.7;border-radius:2px}
.hud-nodes-demo{display:flex;justify-content:space-between;margin-top:-18px;padding:0 4px}
.hud-node-demo{display:flex;flex-direction:column;align-items:center;gap:6px}
.hud-nd{width:12px;height:12px;border-radius:50%;border:2px solid var(--text-dim);background:transparent}
.hud-nd--done{border-color:var(--green);background:var(--green-dim);box-shadow:0 0 4px var(--green)}
.hud-nd--current{width:16px;height:16px;border-color:var(--teal);background:var(--teal-dim);box-shadow:0 0 8px var(--teal);animation:hpulse 2.6s ease-in-out infinite}
.hud-nd--next{border-color:var(--amber);background:var(--amber-dim)}
@keyframes hpulse{0%,40%{box-shadow:0 0 8px var(--teal),0 0 16px rgba(0,184,169,.25);opacity:1}55%,90%{box-shadow:none;opacity:.4}100%{box-shadow:0 0 8px var(--teal),0 0 16px rgba(0,184,169,.25);opacity:1}}
.hud-nl{font-size:9px;font-family:var(--mono);letter-spacing:0.06em;text-transform:uppercase;text-align:center}
.hud-nl--done{color:var(--text-dim)}.hud-nl--current{color:var(--teal);font-weight:600}.hud-nl--next{color:var(--amber);font-weight:600}.hud-nl--dim{color:var(--text-dim);opacity:.5}
/* Form shell */
.form-shell{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:20px}
.form-main{display:flex;flex-direction:column;gap:16px;min-width:0}
.form-aside{display:flex;flex-direction:column;gap:14px;width:260px;max-width:260px;overflow:hidden}
.form-card{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:20px 22px}
.form-section-title{font-size:10px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--text-dim);margin-bottom:16px;padding-bottom:10px;border-bottom:1px solid var(--border)}
.form-row--2{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.form-row--3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;margin-bottom:14px}
.form-actions{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:14px 16px;border-top:1px solid var(--border);background:var(--card);border-radius:0 0 10px 10px}
.form-actions-right{display:flex;align-items:center;gap:8px}
/* Step bar */
.step-bar{display:flex;align-items:center;margin-bottom:20px}
.step-item{display:flex;align-items:center;gap:6px;flex:1;min-width:0}
.step-item:last-child{flex:none}
.step-node{width:24px;height:24px;border-radius:50%;border:2px solid var(--border-hi);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:var(--text-dim);background:var(--card-2);flex-shrink:0}
.step-node--active{border-color:var(--teal);color:var(--teal);background:var(--teal-dim)}
.step-node--done{border-color:var(--green);color:var(--green);background:var(--green-dim)}
.step-label{font-size:11px;color:var(--text-dim);white-space:nowrap}
.step-label--active{color:var(--teal);font-weight:600}
.step-label--done{color:var(--green)}
.step-conn{flex:1;height:1px;background:var(--border);margin:0 8px;min-width:16px}
.step-conn--done{background:var(--green);opacity:.5}
/* Live dot */
.live-dot{width:5px;height:5px;border-radius:50%;background:var(--green);box-shadow:0 0 5px var(--green);animation:pulse 2s ease-in-out infinite;display:inline-block}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}

::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--card-2);border-radius:2px}

/* === northstar-account-detail.html === */
body{background:var(--bg);color:var(--text);font-family:var(--sans);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;transition:background .2s,color .2s}
.shell{display:flex;height:100vh;overflow:hidden}
.sidebar{width:220px;flex-shrink:0;background:var(--card);border-right:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden;transition:background .2s,border-color .2s}
.sidebar-logo{padding:18px 16px 14px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px;flex-shrink:0}
.logo-mark{width:30px;height:30px;border-radius:7px;background:linear-gradient(135deg,var(--teal),#007B75);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;color:#fff;flex-shrink:0;box-shadow:0 0 12px rgba(0,184,169,.3)}
.logo-name{font-size:13px;font-weight:700;color:var(--text)}
.logo-sub{font-size:10px;color:var(--text-dim)}
.sidebar-user{margin:12px 10px;padding:9px 10px;background:var(--card-2);border-radius:8px;border:1px solid var(--border);display:flex;align-items:center;gap:9px;flex-shrink:0}
.user-avatar{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,var(--teal),#007B75);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#fff;flex-shrink:0}
.user-name{font-size:12px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.user-role{font-size:10px;color:var(--text-dim)}
.sidebar-nav{flex:1;overflow-y:auto;padding:8px 10px}
.nav-sl{font-size:9px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--text-dim);padding:8px 10px 4px}
.nav-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:6px;cursor:pointer;color:var(--text-sub);font-size:13px;text-decoration:none;transition:background .1s,color .1s;position:relative}
.nav-item:hover{background:rgba(255,255,255,0.03);color:var(--text)}
.nav-item.active{background:var(--teal-dim);color:var(--teal);font-weight:600}
.nav-item.active::before{content:"";position:absolute;left:0;top:20%;bottom:20%;width:2px;background:var(--teal);border-radius:0 2px 2px 0}
.nav-icon{width:16px;height:16px;opacity:.7;flex-shrink:0}
.nav-item.active .nav-icon{opacity:1}
.nb{margin-left:auto;font-size:10px;font-weight:700;padding:1px 6px;border-radius:10px;background:var(--teal-dim);color:var(--teal);font-family:var(--mono)}
.nb-a{background:var(--amber-dim);color:var(--amber)}
.nb-r{background:var(--red-dim);color:var(--red)}
.sidebar-footer{padding:12px 10px;border-top:1px solid var(--border);flex-shrink:0}
.sfi{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:6px;cursor:pointer;color:var(--text-dim);font-size:12px;transition:background .1s,color .1s}
.sfi:hover{background:rgba(255,255,255,.03);color:var(--text-sub)}
.main{flex:1;display:flex;flex-direction:column;overflow:hidden}
.topbar{display:flex;align-items:center;padding:0 24px;height:44px;border-bottom:1px solid var(--border);background:var(--card);flex-shrink:0;gap:8px;transition:background .2s,border-color .2s}
.tbc{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text-dim);flex:1;min-width:0}
.tbc a{color:var(--text-sub);text-decoration:none}
.tbc a:hover{color:var(--text)}
.tbc .sep{color:var(--border-hi)}
.tbc .cur{color:var(--text);font-weight:500}
.tbr{display:flex;align-items:center;gap:16px;flex-shrink:0}
.tbmeta{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--text-dim);font-family:var(--mono)}
.ld{width:5px;height:5px;border-radius:50%;background:var(--green);box-shadow:0 0 5px var(--green);animation:pulse 2s ease-in-out infinite}
.tbb{display:flex;align-items:center;gap:5px;padding:5px 10px;border-radius:5px;font-size:11px;font-weight:600;border:1px solid var(--border);background:var(--card-2);color:var(--text-sub);cursor:pointer;transition:all .1s;font-family:var(--sans)}
.tbb:hover{border-color:var(--border-hi);color:var(--text)}
.page{flex:1;overflow-y:auto;padding:24px 28px}
.ph{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:20px}
.pt{font-size:18px;font-weight:700;letter-spacing:-0.02em}
.pt-row{display:flex;align-items:center;gap:10px}
.ps{font-size:12px;color:var(--text-dim);margin-top:3px}
.pmeta{display:flex;align-items:center;gap:12px;font-size:12px;color:var(--text-dim);margin-top:6px;flex-wrap:wrap}
.pmeta b{color:var(--text-sub);font-weight:500}
.pmeta-sep{width:1px;height:10px;background:var(--border)}
.btn-p{background:var(--teal);color:#fff}
.btn-p:hover{filter:brightness(1.08)}
.btn-g{background:var(--teal-dim);color:var(--teal);border:1px solid var(--teal-mid)}
.btn-g:hover{background:var(--teal);color:#0a1018}
.btn-s{background:rgba(255,255,255,0.04);color:var(--text-sub);border:1px solid var(--border)}
.btn-s:hover{background:var(--card-2);color:var(--text)}
.btn-d{background:var(--red-dim);color:var(--red);border:1px solid var(--red-border)}
.ch{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.cl{font-size:10px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--text-dim)}
.cr{display:grid;grid-template-columns:1fr 260px;gap:14px}
.st{display:flex;flex-direction:column;gap:14px}
.tc{background:var(--card);border:1px solid var(--border);border-radius:10px;overflow:hidden}
.th{display:grid;padding:8px 16px;font-size:10px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--text-dim);background:var(--card-2);border-bottom:1px solid var(--border)}
.tr{display:grid;padding:12px 16px;align-items:center;border-top:1px solid var(--border);transition:background .1s;cursor:pointer;text-decoration:none;color:var(--text)}
.tr:first-of-type{border-top:none}
.tr:hover{background:rgba(255,255,255,.025)}
.tf{padding:10px 16px;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;font-size:11px;color:var(--text-dim);background:var(--card-2)}
.p-t{background:var(--teal-dim);color:var(--teal)}
.p-g{background:var(--green-dim);color:var(--green)}
.p-a{background:var(--amber-dim);color:var(--amber)}
.p-r{background:var(--red-dim);color:var(--red)}
.p-d{background:rgba(255,255,255,.05);color:var(--text-dim)}
.p-o{background:var(--orange-dim);color:var(--orange)}
.fbar{display:flex;align-items:center;gap:8px;margin-bottom:16px;flex-wrap:wrap}
.si{padding:7px 12px;background:var(--card-2);border:1px solid var(--border);border-radius:20px;color:var(--text);font-size:12px;font-family:var(--sans);outline:none;width:220px}
.si::placeholder{color:var(--text-dim)}
.fc{display:inline-flex;align-items:center;padding:5px 10px;border-radius:20px;font-size:11px;font-weight:500;background:var(--card-2);border:1px solid var(--border);color:var(--text-sub);cursor:pointer;transition:all .1s}
.fc:hover,.fc.active{background:var(--teal-dim);border-color:var(--teal-mid);color:var(--teal);font-weight:600}
.fr{display:flex;align-items:flex-start;gap:10px;padding:7px 0;border-bottom:1px solid var(--border)}
.fr:last-child{border-bottom:none}
.fl{width:130px;font-size:11px;color:var(--text-dim);flex-shrink:0;padding-top:2px;text-transform:uppercase;letter-spacing:0.04em}
.fv{flex:1;font-weight:500;font-size:13px}
.tli{display:flex;gap:14px;padding-bottom:14px}
.tli:last-child{padding-bottom:0}
.tls{display:flex;flex-direction:column;align-items:center;flex-shrink:0;width:20px}
.tld{width:8px;height:8px;border-radius:50%;background:var(--teal);flex-shrink:0;margin-top:4px}
.tld-d{background:var(--text-dim)}
.tld-g{background:var(--green)}
.tld-a{background:var(--amber)}
.tld-r{background:var(--red)}
.tll{width:1px;flex:1;background:var(--border);margin-top:4px}
.tli:last-child .tll{display:none}
.tle{font-size:13px;font-weight:500}
.tlm{font-size:11px;color:var(--text-dim);margin-top:2px;font-family:var(--mono)}
.ap{display:flex;flex-direction:column;gap:8px}
.ab{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px;border-radius:7px;font-size:12px;font-weight:600;font-family:var(--sans);cursor:pointer;border:1px solid var(--teal-mid);background:var(--teal-dim);color:var(--teal);transition:filter .15s;text-align:left}
.ab:hover{filter:brightness(1.1)}
.ab-bl{background:rgba(255,255,255,.03);border-color:var(--border);color:var(--text-dim);cursor:not-allowed}
.ab-bl:hover{filter:none}
.brn{font-size:11px;font-weight:400;color:var(--text-dim);margin-top:2px}
.ni-input,.ni-select,.ni-textarea{width:100%;padding:9px 12px;background:var(--card-2);border:1px solid var(--border);border-radius:7px;color:var(--text);font-size:13px;font-family:var(--sans);outline:none;transition:border-color .15s}
.ni-input:focus,.ni-select:focus,.ni-textarea:focus{border-color:var(--teal-mid);box-shadow:0 0 0 3px var(--teal-dim)}
.ni-input::placeholder,.ni-textarea::placeholder{color:var(--text-dim)}
.ni-select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23637381' d='M6 8L1 3h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:32px}
.ni-textarea{resize:vertical;min-height:80px}
.ni-label{display:block;font-size:12px;font-weight:600;color:var(--text-sub);margin-bottom:6px}
.ni-field{margin-bottom:16px}
.ni-hint{font-size:11px;color:var(--text-dim);margin-top:4px}
.form-row{display:grid;gap:14px;margin-bottom:14px}
.form-row--single{grid-template-columns:1fr}
.ni-label span{color:var(--red);margin-left:2px}
.ni-input[readonly]{opacity:.65}
.summary-row{display:flex;justify-content:space-between;align-items:flex-start;padding:7px 0;border-bottom:1px solid var(--border);font-size:12px}
.summary-row:last-child{border-bottom:none}
.summary-label{color:var(--text-dim);flex-shrink:0;width:110px}
.summary-val{color:var(--text);font-weight:500;text-align:right;font-size:12px}
.radio-card:hover,.radio-card.selected{border-color:var(--teal-mid);background:var(--teal-dim)}
.radio-card.selected .radio-dot{border-color:var(--teal);background:var(--teal);box-shadow:inset 0 0 0 3px var(--card)}
.radio-title{font-size:13px;font-weight:600}
.radio-sub{font-size:11px;color:var(--text-dim);margin-top:2px}
.tag-row{display:flex;flex-wrap:wrap;gap:6px}
.tag{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:20px;font-size:11px;font-weight:500;background:var(--card-2);border:1px solid var(--border);color:var(--text-sub);cursor:pointer;transition:all .1s}
.tag.selected{background:var(--teal-dim);border-color:var(--teal-mid);color:var(--teal)}
.tag:hover{border-color:var(--teal-mid);color:var(--teal)}

/* === northstar-account-list.html === */
.ni-error{font-size:11px;color:var(--red);margin-top:0}
.step-connector{flex:1;height:1px;background:var(--border);margin:0 8px}
.step-connector--done{background:var(--green);opacity:.4}
.check-group{display:flex;flex-direction:column;gap:6px}
.check-row{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:7px;border:1px solid var(--border);background:var(--card-2);cursor:pointer;transition:all .15s}
.check-row:hover{border-color:var(--teal-mid)}
.check-row.checked{border-color:var(--teal-mid);background:var(--teal-dim)}
.check-box{width:16px;height:16px;border-radius:3px;border:2px solid var(--border-hi);flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:all .15s}
.check-row.checked .check-box{background:var(--teal);border-color:var(--teal)}

/* === northstar-add-supplier.html === */
.form-body{max-width:860px;display:flex;flex-direction:column;gap:16px}
.fst{font-size:10px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--text-dim);margin-bottom:16px;padding-bottom:10px;border-bottom:1px solid var(--border)}
.fr2{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.fr3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;margin-bottom:14px}
.fr1{margin-bottom:14px}
.fr2:last-child,.fr3:last-child,.fr1:last-child{margin-bottom:0}
.nf{display:flex;flex-direction:column;gap:6px}
.nl{font-size:12px;font-weight:600;color:var(--text-sub)}
.nl span{color:var(--red);margin-left:2px}
.ni,.ns,.nta{width:100%;padding:9px 12px;background:var(--card-2);border:1px solid var(--border);border-radius:7px;color:var(--text);font-size:13px;font-family:var(--sans);outline:none;transition:border-color .15s,box-shadow .15s;box-sizing:border-box}
.ni:focus,.ns:focus,.nta:focus{border-color:var(--teal-mid);box-shadow:0 0 0 3px var(--teal-dim)}
.ni::placeholder,.nta::placeholder{color:var(--text-dim)}
.ns{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23637381' d='M6 8L1 3h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:32px}
.nta{resize:vertical;min-height:90px;line-height:1.6}
.nh{font-size:11px;color:var(--text-dim)}
.ib{padding:12px 14px;border-radius:7px;font-size:12px;line-height:1.7}
.ib-t{background:var(--teal-dim);border:1px solid var(--teal-mid);color:var(--teal)}
.ib-a{background:var(--amber-dim);border:1px solid var(--amber-mid);color:var(--amber)}
.ib-g{background:var(--green-dim);border:1px solid rgba(54,179,126,.3);color:var(--green)}
.check-row:hover,.check-row.checked{border-color:var(--teal-mid);background:var(--teal-dim)}

/* === northstar-customer-detail.html === */
.hud{background:var(--card);border:1px solid var(--border-hi);border-radius:10px;overflow:hidden;position:relative;box-shadow:0 2px 16px rgba(0,0,0,.4);margin-bottom:16px}
.hud::before{content:'';position:absolute;top:0;left:20px;right:20px;height:1px;background:linear-gradient(90deg,transparent,var(--teal-mid),transparent)}
.hud-inner{position:relative;height:200px;padding:0 50px}
.hw{position:absolute;left:50px;right:50px;top:120px;height:2px;background:var(--border-hi)}
.hwl{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,var(--green),var(--teal));opacity:.7;width:100%;overflow:visible}
.hwd{position:absolute;width:8px;height:8px;border-radius:50%;background:var(--teal);box-shadow:0 0 8px var(--teal);top:50%;transform:translateY(-50%);opacity:0;pointer-events:none}
.sab{display:inline-flex;align-items:center;gap:5px;padding:7px 14px;border-radius:5px;font-size:11px;font-weight:700;font-family:var(--sans);letter-spacing:0.08em;text-transform:uppercase;cursor:pointer;white-space:nowrap;transition:all .12s;border:1px solid var(--teal-mid);background:var(--teal-dim);color:var(--teal)}
.sab:hover{background:var(--teal);color:#0a1018}
.smb{border-top:1px solid var(--border);padding:8px 20px;display:flex;align-items:center;gap:16px}
.smi{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--text-dim);font-family:var(--mono)}
.smi b{color:var(--text-sub);font-weight:500;font-family:var(--sans)}
.sms{width:1px;height:10px;background:var(--border);flex-shrink:0}

/* === northstar-dashboard-admin.html === */
.nav-section-label{font-size:9px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--text-dim);padding:8px 10px 4px}
.nav-badge{margin-left:auto;font-size:10px;font-weight:700;padding:1px 6px;border-radius:10px;background:var(--teal-dim);color:var(--teal);font-family:var(--mono)}
.nav-badge--amber{background:var(--amber-dim);color:var(--amber)}
.nav-badge--red{background:var(--red-dim);color:var(--red)}
.sidebar-footer-item{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:6px;cursor:pointer;color:var(--text-dim);font-size:12px;transition:background .1s,color .1s}
.sidebar-footer-item:hover{background:rgba(255,255,255,0.03);color:var(--text-sub)}
.topbar-breadcrumb{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text-dim);flex:1;min-width:0}
.topbar-breadcrumb .current{color:var(--text);font-weight:500}
.topbar-right{display:flex;align-items:center;gap:16px;flex-shrink:0}
.topbar-meta{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--text-dim);font-family:var(--mono)}
.topbar-btn{display:flex;align-items:center;gap:5px;padding:5px 10px;border-radius:5px;font-size:11px;font-weight:600;border:1px solid var(--border);background:var(--card-2);color:var(--text-sub);cursor:pointer;transition:all .1s;font-family:var(--sans)}
.topbar-btn:hover{border-color:var(--border-hi);color:var(--text)}
.page-header{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:24px}
.page-title{font-size:18px;font-weight:700;letter-spacing:-0.02em}
.page-sub{font-size:12px;color:var(--text-dim);margin-top:3px}
.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:20px}
.kpi-up{color:var(--green);font-weight:600}
.kpi-down{color:var(--red);font-weight:600}
.kpi-warn{color:var(--amber);font-weight:600}
.content-grid{display:grid;grid-template-columns:1fr 280px;gap:14px}
.stack{display:flex;flex-direction:column;gap:14px}
.table-head{display:grid;padding:5px 10px;font-size:10px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--text-dim)}
.table-row{display:grid;padding:10px 10px;border-radius:6px;align-items:center;border-top:1px solid var(--border);transition:background .1s;cursor:pointer;text-decoration:none;color:var(--text)}
.table-row:hover{background:rgba(255,255,255,0.025)}
.users-grid{grid-template-columns:1fr 90px 80px 80px}
.util-grid{grid-template-columns:1fr 80px 60px 80px}
.pill--active{background:var(--green-dim);color:var(--green)}
.pill--invited{background:var(--amber-dim);color:var(--amber)}
.pill--suspended{background:var(--red-dim);color:var(--red)}
.pill--salesrep{background:var(--teal-dim);color:var(--teal)}
.pill--admin{background:var(--red-dim);color:var(--red)}
.pill--opscoord{background:rgba(255,112,67,0.12);color:#FF7043}
.pill--cxm{background:rgba(139,92,246,0.12);color:#8B5CF6}
.pill--supplier{background:var(--amber-dim);color:var(--amber)}
.task-row{display:flex;align-items:flex-start;gap:10px;padding:9px 12px;background:var(--card-2);border:1px solid var(--border);border-radius:7px;cursor:pointer;transition:background .1s}
.task-row:hover{background:rgba(255,255,255,0.03)}
.task-row+.task-row{margin-top:6px}
.task-dot{width:6px;height:6px;border-radius:50%;background:var(--text-dim);flex-shrink:0;margin-top:6px}
.task-dot--urgent{background:var(--red)}
.task-dot--teal{background:var(--teal)}
.task-dot--amber{background:var(--amber)}
.task-title{font-size:12px;font-weight:500;color:var(--text)}
.task-meta{font-size:11px;color:var(--text-dim);font-family:var(--mono);margin-top:1px}
.sys-row{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid var(--border)}
.sys-row:last-child{border-bottom:none}
.sys-label{flex:1;font-size:12px;color:var(--text-sub)}
.sys-val{font-size:12px;font-family:var(--mono);font-weight:500}

/* === northstar-dashboard-cxm.html === */
.kpi-delta--up{color:var(--green);font-size:11px;font-weight:600;font-family:var(--mono)}
.kpi-delta--down{color:var(--red);font-size:11px;font-weight:600;font-family:var(--mono)}
.customer-grid{grid-template-columns:1fr 90px 80px 90px}
.pill--customer{background:var(--green-dim);color:var(--green)}
.pill--prospect{background:var(--amber-dim);color:var(--amber)}
.pill--churned{background:var(--red-dim);color:var(--red)}
.pill--lead{background:rgba(255,255,255,0.05);color:var(--text-dim)}
.pill--mql{background:var(--teal-dim);color:var(--teal)}
.pill--opportunity{background:rgba(255,112,67,0.12);color:#FF7043}
.health-row{display:flex;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid var(--border)}
.health-row:last-child{border-bottom:none}
.health-name{flex:1;font-size:13px;font-weight:500}
.health-score{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;font-family:var(--mono);flex-shrink:0}
.health-score--good{background:var(--green-dim);color:var(--green);border:1px solid rgba(54,179,126,0.3)}
.health-score--warn{background:var(--amber-dim);color:var(--amber);border:1px solid var(--amber-mid)}
.health-score--bad{background:var(--red-dim);color:var(--red);border:1px solid var(--red-border)}
.health-label{font-size:11px;color:var(--text-dim)}
.activity-item{display:flex;gap:10px;padding-bottom:12px}
.activity-item:last-child{padding-bottom:0}
.activity-spine{display:flex;flex-direction:column;align-items:center;flex-shrink:0;width:16px}
.activity-dot{width:7px;height:7px;border-radius:50%;background:var(--teal);flex-shrink:0;margin-top:4px}
.activity-dot--dim{background:var(--text-dim)}
.activity-dot--green{background:var(--green)}
.activity-dot--amber{background:var(--amber)}
.activity-dot--red{background:var(--red)}
.activity-line{width:1px;flex:1;background:var(--border);margin-top:4px}
.activity-item:last-child .activity-line{display:none}
.activity-event{font-size:12px;font-weight:500;color:var(--text)}
.activity-meta{font-size:11px;color:var(--text-dim);margin-top:2px;font-family:var(--mono)}

/* === northstar-dashboard-opscoord.html === */
.kpi-delta{font-size:11px;font-weight:600;font-family:var(--mono)}
.kpi-delta--warn{color:var(--amber)}
.rfq-grid{grid-template-columns:1fr 110px 90px 80px}
.contract-grid{grid-template-columns:1fr 110px 90px 80px}
.pill--sent{background:var(--teal-dim);color:var(--teal)}
.pill--quotes-received{background:var(--amber-dim);color:var(--amber)}
.pill--generated{background:var(--teal-dim);color:var(--teal)}
.pill--bid-defined{background:rgba(255,255,255,0.05);color:var(--text-dim)}
.pill--draft{background:rgba(255,255,255,0.05);color:var(--text-dim)}
.pill--awaiting-approval{background:var(--amber-dim);color:var(--amber)}
.pill--approved{background:var(--teal-dim);color:var(--teal)}
.pill--executed{background:var(--green-dim);color:var(--green)}
.pill--proposed{background:var(--green-dim);color:var(--green)}
.workload-row{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid var(--border)}
.workload-row:last-child{border-bottom:none}
.workload-label{font-size:11px;color:var(--text-sub);width:120px;flex-shrink:0}
.workload-bar-wrap{flex:1;height:6px;background:var(--card-2);border-radius:3px;overflow:hidden}
.workload-bar-fill{height:100%;border-radius:3px}
.workload-count{font-size:11px;font-family:var(--mono);color:var(--text-sub);width:28px;text-align:right}

/* === northstar-dashboard-opsdir.html === */
.cockpit{display:grid;grid-template-columns:220px 1fr 220px;height:calc(100vh - 40px);overflow:hidden;gap:0}
.rail{overflow-y:auto;background:var(--card);display:flex;flex-direction:column}
.rail--left{border-right:1px solid var(--border)}
.rail--right{border-left:1px solid var(--border)}
.rail-section{padding:12px;border-bottom:1px solid var(--border)}
.rail-label{font-size:9px;letter-spacing:0.1em;text-transform:uppercase;color:var(--text-dim);font-weight:700;margin-bottom:10px}
.center{overflow-y:auto;padding:16px 18px}
.gauge-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:0}
.gauge{background:var(--card-2);border:1px solid var(--border);border-radius:7px;padding:9px 10px 7px;position:relative;overflow:hidden}
.gauge::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--teal);border-radius:0 0 7px 7px}
.gauge--green::after{background:var(--green)}
.gauge--amber::after{background:var(--amber)}
.gauge--red::after{background:var(--red)}
.gauge-val{font-size:18px;font-weight:700;line-height:1;margin-bottom:3px;color:var(--teal);font-family:var(--mono)}
.gauge-val--green{color:var(--green)}
.gauge-val--amber{color:var(--amber)}
.gauge-val--red{color:var(--red)}
.gauge-lbl{font-size:9px;letter-spacing:0.08em;text-transform:uppercase;color:var(--text-dim)}
.pipeline-nodes{display:flex;flex-direction:column;gap:6px}
.pnode{display:flex;align-items:center;gap:8px;padding:7px 10px;background:var(--card-2);border:1px solid var(--border);border-radius:6px}
.pnode-count{font-size:18px;font-weight:800;font-family:var(--mono);color:var(--text);width:28px;flex-shrink:0;line-height:1}
.pnode-label{flex:1;font-size:11px;color:var(--text-sub)}
.pnode-val{font-size:11px;font-family:var(--mono);color:var(--text-dim)}
.pnode-bar{height:3px;background:var(--card);border-radius:2px;overflow:hidden;margin-top:3px}
.pnode-fill{height:100%;border-radius:2px}
.alert-row{display:flex;align-items:flex-start;gap:8px;padding:8px 10px;border-radius:6px;margin-bottom:6px;border:1px solid var(--border)}
.alert-row--red{background:var(--red-dim);border-color:var(--red-border)}
.alert-row--amber{background:var(--amber-dim);border-color:var(--amber-mid)}
.alert-row--teal{background:var(--teal-dim);border-color:var(--teal-mid)}
.alert-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;margin-top:5px}
.alert-dot--red{background:var(--red)}
.alert-dot--amber{background:var(--amber)}
.alert-dot--teal{background:var(--teal)}
.alert-title{font-size:11px;font-weight:600;color:var(--text)}
.alert-sub{font-size:10px;color:var(--text-dim);font-family:var(--mono);margin-top:1px}
.kpi-row{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px}
.kpi-tile{background:var(--card);border:1px solid var(--border);border-radius:8px;padding:12px 14px}
.kpi-tile-label{font-size:9px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--text-dim);margin-bottom:6px}
.kpi-tile-val{font-size:22px;font-weight:700;font-family:var(--mono);letter-spacing:-0.02em;line-height:1}
.kpi-tile-sub{font-size:10px;color:var(--text-dim);margin-top:4px}
.chart-area{background:var(--card);border:1px solid var(--border);border-radius:8px;padding:14px 16px;margin-bottom:14px}
.chart-label{font-size:10px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--text-dim);margin-bottom:12px}
.bar-chart{display:flex;align-items:flex-end;gap:6px;height:80px}
.bar-col{display:flex;flex-direction:column;align-items:center;gap:4px;flex:1}
.bar{width:100%;border-radius:3px 3px 0 0;background:var(--teal);opacity:.7;transition:opacity .2s}
.bar:hover{opacity:1}
.bar-lbl{font-size:9px;font-family:var(--mono);color:var(--text-dim)}
.bar-val{font-size:9px;font-family:var(--mono);color:var(--text-sub)}
.sla-row{display:flex;align-items:center;gap:10px;padding:6px 0;border-bottom:1px solid var(--border)}
.sla-row:last-child{border-bottom:none}
.sla-label{width:100px;font-size:11px;color:var(--text-sub);flex-shrink:0}
.sla-bar-wrap{flex:1;height:5px;background:var(--card-2);border-radius:3px;overflow:hidden}
.sla-bar-fill{height:100%;border-radius:3px}
.sla-pct{width:36px;font-size:10px;font-family:var(--mono);text-align:right;flex-shrink:0}
.supp-row{display:flex;align-items:center;gap:8px;padding:7px 0;border-bottom:1px solid var(--border)}
.supp-row:last-child{border-bottom:none}
.supp-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.supp-name{flex:1;font-size:11px}
.supp-pct{font-size:10px;font-family:var(--mono);color:var(--text-dim)}
.act-item{display:flex;gap:8px;padding-bottom:10px}
.act-item:last-child{padding-bottom:0}
.act-dot{width:6px;height:6px;border-radius:50%;background:var(--teal);flex-shrink:0;margin-top:4px}
.act-dot--green{background:var(--green)}
.act-dot--amber{background:var(--amber)}
.act-dot--red{background:var(--red)}
.act-dot--dim{background:var(--text-dim)}
.act-line-wrap{display:flex;flex-direction:column;align-items:center;width:6px;flex-shrink:0}
.act-line{width:1px;flex:1;background:var(--border);margin-top:3px}
.act-item:last-child .act-line{display:none}
.act-text{font-size:11px;color:var(--text)}
.act-meta{font-size:10px;color:var(--text-dim);font-family:var(--mono);margin-top:1px}

/* === northstar-dashboard-salesrep.html === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; }
.logo-text { display: flex; flex-direction: column; gap: 1px; }
.user-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.deals-grid { grid-template-columns: 1fr 90px 80px 80px 90px; }
.pill--potential     { background: rgba(255,255,255,0.05); color: var(--text-dim); }
.pill--qualified     { background: var(--amber-dim); color: var(--amber); }
.pill--bid-requested { background: var(--teal-dim);  color: var(--teal); }
.pill--awaiting-sig  { background: var(--green-dim); color: var(--green); }
.pill--closed-won    { background: var(--green-dim); color: var(--green); }
.pill--closed-lost   { background: var(--red-dim);   color: var(--red); }
.pill--stalled       { background: var(--amber-dim); color: var(--amber); }
.task-row + .task-row { margin-top: 6px; }
.pipeline-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--border); }
.pipeline-row:last-child { border-bottom: none; }
.pipeline-stage { width: 110px; font-size: 11px; color: var(--text-sub); flex-shrink: 0; }
.pipeline-bar-wrap { flex: 1; height: 6px; background: var(--card-2); border-radius: 3px; overflow: hidden; }
.pipeline-bar-fill { height: 100%; border-radius: 3px; }
.pipeline-count { width: 28px; font-size: 11px; font-family: var(--mono); color: var(--text-sub); text-align: right; flex-shrink: 0; }
.pipeline-val   { width: 56px; font-size: 11px; font-family: var(--mono); color: var(--text-dim); text-align: right; flex-shrink: 0; }
.mini-stat-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 12px; }
.mini-stat-row:last-child { border-bottom: none; }
.mini-stat-label { color: var(--text-sub); }
.mini-stat-val   { font-family: var(--mono); font-weight: 600; color: var(--text); }
.activity-body { flex: 1; }

/* === northstar-dashboard-supplier.html === */
.tenant-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:4px;background:var(--amber-dim);border:1px solid var(--amber-mid);font-size:11px;font-weight:600;color:var(--amber);margin-bottom:20px}
.pill--submitted{background:var(--green-dim);color:var(--green)}
.pill--expired{background:var(--red-dim);color:var(--red)}
.pill--pending{background:rgba(255,255,255,0.05);color:var(--text-dim)}
.pill--won{background:var(--green-dim);color:var(--green)}
.pill--lost{background:var(--red-dim);color:var(--red)}
.urgent-banner{display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--amber-dim);border:1px solid var(--amber-mid);border-radius:8px;margin-bottom:16px}
.urgent-dot{width:8px;height:8px;border-radius:50%;background:var(--amber);flex-shrink:0;animation:pulse 1.5s ease-in-out infinite}
.win-rate-wrap{display:flex;flex-direction:column;gap:6px;margin-top:4px}
.win-row{display:flex;align-items:center;gap:8px;font-size:11px}
.win-label{width:90px;color:var(--text-sub)}
.win-bar-wrap{flex:1;height:5px;background:var(--card-2);border-radius:3px;overflow:hidden}
.win-fill{height:100%;border-radius:3px}
.win-pct{width:30px;text-align:right;font-family:var(--mono);font-size:10px;color:var(--text-dim)}

/* === northstar-deal-detail.html === */
.topbar-breadcrumb a{color:var(--text-sub);text-decoration:none}
.topbar-breadcrumb a:hover{color:var(--text)}
.topbar-breadcrumb .sep{color:var(--border-hi)}
.page-meta{display:flex;align-items:center;gap:12px;font-size:12px;color:var(--text-dim);margin-top:6px;flex-wrap:wrap}
.page-meta-item b{color:var(--text-sub);font-weight:500}
.page-meta-sep{width:1px;height:10px;background:var(--border)}
.hud-wire{position:absolute;left:60px;right:60px;top:130px;height:2px;background:var(--border-hi)}
.hud-wire-live{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,var(--green),var(--teal));opacity:.7;overflow:visible}
.hud-wire-dot{position:absolute;width:8px;height:8px;border-radius:50%;background:var(--teal);box-shadow:0 0 8px var(--teal),0 0 16px var(--teal-glow);top:50%;transform:translateY(-50%);left:0;opacity:0;pointer-events:none}
.node{position:absolute;top:130px;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center}
.node-dot{width:10px;height:10px;border-radius:50%;border:1.5px solid var(--text-dim);background:transparent;flex-shrink:0}
.node-label{position:absolute;bottom:calc(100% + 10px);white-space:nowrap;font-family:var(--mono);font-size:10px;letter-spacing:0.06em;text-transform:uppercase;color:var(--text-sub);text-align:center;line-height:1.4}
.node--done .node-dot{border-color:var(--green);background:var(--green-dim);box-shadow:0 0 4px var(--green)}
.node--done .node-label{color:var(--text-dim)}
.node--current .node-dot{width:14px;height:14px;border-color:var(--teal);background:var(--teal-dim);animation:npulse 2.6s ease-in-out infinite}
.node--current .node-label{color:var(--teal);font-weight:600;font-size:11px}
@keyframes npulse{0%,40%{box-shadow:0 0 8px var(--teal),0 0 16px var(--teal-glow);opacity:1}55%,90%{box-shadow:none;opacity:.4}100%{box-shadow:0 0 8px var(--teal),0 0 16px var(--teal-glow);opacity:1}}
.node--next .node-dot{border-color:var(--amber);background:var(--amber-dim);box-shadow:0 0 4px var(--amber)}
.node--next .node-label{color:var(--amber);font-weight:600}
.node--win .node-dot{border-color:var(--green);background:var(--green-dim)}
.node--win .node-label{color:var(--text-dim)}
.node--loss .node-dot{border-color:var(--red);background:var(--red-dim)}
.node--loss .node-label{color:var(--text-dim)}
.action-wrap{position:absolute;display:flex;flex-direction:column;align-items:center;transform:translateX(-50%)}
.action-desc{font-size:11px;color:var(--teal);opacity:.6;margin-bottom:6px;white-space:nowrap}
.action-stub{width:1px;flex:1;min-height:12px;background:linear-gradient(to bottom,var(--teal-mid),transparent)}
.sm-act-btn{display:inline-flex;align-items:center;gap:5px;padding:7px 14px;border-radius:5px;font-size:11px;font-weight:700;font-family:var(--sans);letter-spacing:0.08em;text-transform:uppercase;cursor:pointer;white-space:nowrap;transition:all .12s;border:1px solid var(--teal-mid);background:var(--teal-dim);color:var(--teal)}
.sm-act-btn:hover{background:var(--teal);color:#0a1018;border-color:var(--teal)}
.sm-act-btn--danger{border-color:var(--red-border);background:var(--red-dim);color:var(--red)}
.sm-act-btn--danger:hover{background:var(--red);color:#fff;border-color:var(--red)}
.sm-meta-bar{border-top:1px solid var(--border);padding:8px 20px;display:flex;align-items:center;gap:16px}
.sm-meta-item{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--text-dim);font-family:var(--mono)}
.sm-meta-item b{color:var(--text-sub);font-weight:500;font-family:var(--sans)}
.sm-meta-sep{width:1px;height:10px;background:var(--border);flex-shrink:0}
.content-row{display:grid;grid-template-columns:1fr 260px;gap:14px}
.field-row{display:flex;align-items:flex-start;gap:10px;padding:7px 0;border-bottom:1px solid var(--border);font-size:13px}
.field-row:last-child{border-bottom:none}
.field-label{width:130px;font-size:11px;color:var(--text-dim);flex-shrink:0;padding-top:1px;text-transform:uppercase;letter-spacing:0.04em}
.field-val{flex:1;font-weight:500}
.action-panel{display:flex;flex-direction:column;gap:8px}
.action-btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px;border-radius:7px;font-size:12px;font-weight:600;font-family:var(--sans);cursor:pointer;border:1px solid var(--teal-mid);background:var(--teal-dim);color:var(--teal);transition:filter .15s;text-align:left}
.action-btn:hover{filter:brightness(1.1)}
.action-btn--blocked{background:rgba(255,255,255,0.03);border-color:var(--border);color:var(--text-dim);cursor:not-allowed}
.action-btn--blocked:hover{filter:none}
.block-reason{font-size:11px;font-weight:400;color:var(--text-dim);margin-top:2px}

/* === northstar-deals-list.html === */
.filter-bar{display:flex;align-items:center;gap:8px;margin-bottom:16px;flex-wrap:wrap}
.search-input{padding:7px 12px;background:var(--card-2);border:1px solid var(--border);border-radius:20px;color:var(--text);font-size:12px;font-family:var(--sans);outline:none;transition:border-color .15s;width:220px}
.search-input:focus{border-color:var(--teal-mid)}
.search-input::placeholder{color:var(--text-dim)}
.filter-chip{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:20px;font-size:11px;font-weight:500;background:var(--card-2);border:1px solid var(--border);color:var(--text-sub);cursor:pointer;transition:all .1s}
.filter-chip:hover,.filter-chip.active{background:var(--teal-dim);border-color:var(--teal-mid);color:var(--teal)}
.filter-chip.active{font-weight:600}
.table-card{background:var(--card);border:1px solid var(--border);border-radius:10px;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.table-row:first-of-type{border-top:none}
.table-footer{padding:10px 16px;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;font-size:11px;color:var(--text-dim);background:var(--card-2)}

/* === northstar-notifications.html === */
.sr{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px solid var(--border);font-size:12px}
.sr:last-child{border-bottom:none}
.sl{color:var(--text-dim);width:110px;flex-shrink:0}
.sv{color:var(--text);font-weight:500;text-align:right}

/* === northstar-quote-comparison.html === */
.compare-grid{display:grid;grid-template-columns:160px repeat(4,1fr);gap:0;background:var(--card);border:1px solid var(--border);border-radius:10px;overflow:hidden;margin-bottom:16px}
.cg-header-cell{padding:12px 14px;font-size:11px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--text-dim);background:var(--card-2);border-bottom:1px solid var(--border);border-right:1px solid var(--border)}
.cg-header-cell:last-child{border-right:none}
.cg-supplier-header{padding:14px;background:var(--card-2);border-bottom:1px solid var(--border);border-right:1px solid var(--border);display:flex;flex-direction:column;gap:4px}
.cg-supplier-header:last-child{border-right:none}
.cg-supplier-name{font-size:13px;font-weight:600}
.cg-supplier-winner{font-size:10px;font-weight:700;color:var(--green);letter-spacing:0.04em}
.cg-row-label{padding:10px 14px;font-size:11px;color:var(--text-sub);background:var(--card-2);border-right:1px solid var(--border);border-top:1px solid var(--border);display:flex;align-items:center}
.cg-cell{padding:10px 14px;border-top:1px solid var(--border);border-right:1px solid var(--border);display:flex;align-items:center;font-size:13px;font-family:var(--mono)}
.cg-cell:last-child{border-right:none}
.cg-cell--winner{background:var(--green-dim)}
.cg-cell--high{color:var(--amber)}
.cg-cell--best{color:var(--green);font-weight:600}
.select-btn{padding:5px 12px;border-radius:5px;font-size:11px;font-weight:700;font-family:var(--sans);cursor:pointer;border:1px solid var(--teal-mid);background:var(--teal-dim);color:var(--teal);transition:all .12s;letter-spacing:0.04em}
.select-btn:hover{background:var(--teal);color:#0a1018;border-color:var(--teal)}
.select-btn--selected{background:var(--green-dim);border-color:rgba(54,179,126,.4);color:var(--green);cursor:default}
.select-btn--selected:hover{background:var(--green-dim);color:var(--green)}
.rfq-meta-bar{display:flex;align-items:center;gap:16px;padding:10px 16px;background:var(--card);border:1px solid var(--border);border-radius:8px;margin-bottom:16px}
.rfq-meta-item{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--text-dim);font-family:var(--mono)}
.rfq-meta-item b{color:var(--text-sub);font-weight:500;font-family:var(--sans)}
.rfq-meta-sep{width:1px;height:10px;background:var(--border)}

/* === northstar-quote-entry.html === */
.rfq-snapshot{display:flex;align-items:stretch;gap:14px;padding:14px 18px;background:var(--card);border:1px solid var(--border);border-radius:10px;margin-bottom:20px}
.rfq-snapshot-item{display:flex;flex-direction:column;gap:3px;padding-right:18px;border-right:1px solid var(--border)}
.rfq-snapshot-item:last-child{border-right:none}
.rfq-snapshot-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:var(--text-dim)}
.rfq-snapshot-val{font-size:14px;font-weight:600;font-family:var(--mono)}
.deadline-badge{display:inline-flex;align-items:center;padding:3px 9px;border-radius:3px;font-size:11px;font-weight:700;background:var(--amber-dim);color:var(--amber);border:1px solid var(--amber-mid)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px}
.form-card-title{font-size:12px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--text-dim);margin-bottom:16px}
.ns-field:last-child{margin-bottom:0}
.ns-field-hint{font-size:11px;color:var(--text-dim);margin-top:4px}
.price-preview{background:var(--card-2);border:1px solid var(--teal-mid);border-radius:8px;padding:14px 16px;margin-top:16px;display:flex;align-items:center;gap:14px}
.price-preview-val{font-size:28px;font-weight:700;font-family:var(--mono);color:var(--teal)}
.price-preview-label{font-size:12px;color:var(--text-sub)}
.price-preview-annual{font-size:13px;font-family:var(--mono);color:var(--text-sub);margin-top:2px}

/* === northstar-rfq-list.html === */
.pill--winning-bid{background:var(--green-dim);color:var(--green)}
.pill--none-selected{background:var(--red-dim);color:var(--red)}
.overdue{color:var(--red);font-weight:600}
.deadline-warn{color:var(--amber);font-weight:600}

/* === northstar-rfq.html === */
.sidebar, .topbar, .card, .sm-hud, .sm-meta-bar, .legend, .page {
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.page-title-group { display: flex; flex-direction: column; gap: 6px; }
.page-pill {
  display: inline-flex; align-items: center;
  padding: 3px 9px; border-radius: 4px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.04em;
  white-space: nowrap;
}
.page-pill--sent       { background: var(--teal-dim); color: var(--teal); border: 1px solid var(--teal-mid); }
.page-pill--bid-defined { background: rgba(255,255,255,0.05); color: var(--text-sub); }
.page-pill--generated  { background: var(--teal-dim); color: var(--teal); }
.page-meta-item { display: flex; align-items: center; gap: 5px; }
.page-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.demo-switcher {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 16px;
  padding: 8px 12px;
  background: var(--card-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  width: fit-content;
}
.demo-switcher-label {
  font-size: 10px; color: var(--text-dim);
  text-transform: uppercase; letter-spacing: 0.08em;
  margin-right: 4px; font-weight: 600;
}
.demo-btn {
  padding: 4px 10px; border-radius: 4px;
  font-size: 11px; font-weight: 600;
  font-family: var(--sans); cursor: pointer;
  border: 1px solid transparent;
  background: transparent; color: var(--text-dim);
  letter-spacing: 0.03em; transition: all 0.1s;
}
.demo-btn.active { background: var(--teal-dim); border-color: var(--teal-mid); color: var(--teal); }
.demo-btn:hover:not(.active) { color: var(--text-sub); }
@keyframes node-pulse {
  0%,40%  { box-shadow: 0 0 8px var(--teal), 0 0 16px var(--teal-glow); opacity:1; }
  55%,90% { box-shadow: none; opacity: 0.4; }
  100%    { box-shadow: 0 0 8px var(--teal), 0 0 16px var(--teal-glow); opacity:1; }
}
.action-desc--danger { color: var(--red); }
.action-stub--danger { background: linear-gradient(to bottom, var(--red-border), transparent); }
.block-wrap {
  position: absolute;
  display: flex; flex-direction: column; align-items: center;
  transform: translateX(-50%);
}
.block-stub { width: 1px; height: 14px; background: linear-gradient(to top, var(--amber-mid), transparent); }
.sm-hud {
  background: var(--card);
  border: 1px solid var(--border-hi);
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 2px 16px rgba(0,0,0,0.4);
  margin-bottom: 16px;
}
.sm-hud::before {
  content: '';
  position: absolute; top: 0; left: 20px; right: 20px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--teal-mid), transparent);
}
.hud-svg-wrap { padding: 0 20px; }
.supp-pill { font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: 3px; letter-spacing: 0.04em; }
.supp-pill--pending { background: rgba(255,255,255,0.05); color: var(--text-dim); }
.add-target-row { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
select.ns-select {
  flex: 1; padding: 7px 10px;
  background: var(--card-2); border: 1px solid var(--border-hi);
  border-radius: 5px; color: var(--text-sub);
  font-size: 12px; font-family: var(--sans); outline: none; appearance: none;
}
.add-btn {
  padding: 7px 14px; background: var(--teal-dim);
  border: 1px solid var(--teal-mid); color: var(--teal);
  font-size: 11px; font-weight: 600; font-family: var(--sans);
  border-radius: 5px; cursor: pointer; transition: all 0.12s; white-space: nowrap;
}
.add-btn:hover { background: var(--teal); color: #0a1018; }
.check-item { display: flex; align-items: flex-start; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 12px; }
.check-item:last-child { border-bottom: none; }
.check-icon { font-size: 13px; flex-shrink: 0; margin-top: 1px; }
.check-text { color: var(--text-sub); }
.check-text b { color: var(--text); font-weight: 500; display: block; margin-bottom: 1px; }
.check-text.done b { color: var(--green); }
.check-text.blocked b { color: var(--amber); }
.sm-block-card {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 7px 12px; border-radius: 5px;
  background: rgba(255,171,0,0.05); border: 1px solid var(--amber-mid);
  cursor: not-allowed; text-align: center; max-width: none; width: 100%;
}
.sm-block-label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--amber);
  display: flex; align-items: center; gap: 4px; white-space: nowrap;
}
.sm-block-reason { font-size: 11px; color: rgba(255,171,0,0.55); line-height: 1.4; }
.sm-lock { display: inline-flex; width: 10px; height: 10px; opacity: 0.7; }
.legend {
  display: flex; align-items: center; gap: 16px;
  padding: 8px 14px; margin-top: 14px;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 7px; width: fit-content;
}
.legend-item { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-sub); }
.legend-swatch { width: 16px; height: 5px; border-radius: 2px; }