/* ============================================================================
   HexHunter → Hexlitix integration — wireframe kit (DRAFT, demo020 look & feel)
   Tokens are the base UIS Annex B (normative) values, verbatim. Do not hard-code
   a hex outside :root — reference var(). This is an EXPLORATION wireframe sheet,
   not a production stylesheet.
   ========================================================================== */
:root{
  /* surfaces */ --bs-body-bg:#1d2835; --bs-app-header-bg:rgba(29,40,53,.95);
  /* text */ --bs-body-color:rgba(255,255,255,.75); --bs-heading-color:#fff; --bs-tertiary-color:rgba(255,255,255,.5);
  /* accent */ --bs-theme:#3cd2a5; --bs-theme-rgb:60,210,165;
  /* semantic */ --bs-primary:#4e9cff; --bs-info:#30beff; --bs-warning:#ff9f0c; --bs-danger:#ff6060; --bs-muted:#617a86; --bs-blue:#0271ff;
  --bs-warning-text-emphasis:rgb(255,197,109); --bs-warning-bg-subtle:rgb(51,32,2); --bs-warning-border-subtle:rgb(100,93,5);
  --bs-danger-text-emphasis:rgb(236,102,102); --bs-danger-bg-subtle:rgb(45,0,0);
  --bs-info-text-emphasis:rgb(102,195,238); --bs-info-bg-subtle:rgb(0,31,45); --bs-info-border-subtle:rgb(0,62,91);
  /* borders */ --bs-border-color:rgba(255,255,255,.25); --bs-border-radius:4px; --bs-border-radius-sm:2px;
  /* type */ --bs-body-font-family:"Chakra Petch",system-ui,"Segoe UI",sans-serif; --bs-body-font-size:.875rem; --bs-body-font-weight:300; --bs-body-letter-spacing:.046875rem;
  /* house (proposed) */ --hx-btn-primary:#0066cc; --hx-btn-primary-border:#005bb5; --hx-btn-danger:#cc0000; --hx-btn-danger-border:#b30000;
  --hx-corner:rgba(60,210,165,.75); --hx-frame-line:rgba(60,210,165,.3); --hx-theme-subtle:rgba(60,210,165,.5); --hx-theme-dim:rgba(60,210,165,.6); --hx-theme-faint:rgba(60,210,165,.25); --hx-theme-rule:rgba(60,210,165,.35);
  --hx-on-theme:rgb(6,19,12); --hx-faint:rgba(255,255,255,.35); --hx-dim:rgba(255,255,255,.45); --hx-ghost-icon:rgba(255,255,255,.15);
  --hx-panel-head-tint:rgba(255,255,255,.03); --hx-strip-bg:rgba(0,0,0,.15); --hx-strip-border:rgba(255,255,255,.09); --hx-track-bg:rgba(0,0,0,.25); --hx-track-border:rgba(255,255,255,.18); --hx-addon-bg:rgba(0,0,0,.1);
  --hx-dropdown-bg:rgba(29,40,53,.98); --hx-overlay-bg:rgba(29,40,53,.95); --hx-popup-bg:rgba(0,0,0,.75); --hx-scrolltop-bg:rgba(53,67,74,.75);
  --hx-map-control-bg:#fff; --hx-map-control-fg:#000; --hx-popup-text:rgba(255,255,255,.6);
  --hx-chart-1:#00bcd4; --hx-chart-2:#2196f3; --hx-chart-axis:rgba(255,255,255,.15); --hx-spin:rgb(255,123,40); --hx-chip-info:rgb(50,153,255);
  --hx-type-hexguard:#53cfe0; --hx-type-hexguard-bg:#01242b; --hx-type-dm:#f28fbc; --hx-type-dm-bg:#2f0f1f; --hx-type-cot:#74d994; --hx-type-cot-bg:#072713; --hx-type-osmand:#f0d34d; --hx-type-osmand-bg:#2f2400;
  --hx-type-hexhunter:#ff9f0c; --hx-type-hexhunter-bg:#2f1a00; /* proposed, needs QWS sign-off */
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--bs-body-font-family); font-size:var(--bs-body-font-size); font-weight:var(--bs-body-font-weight);
  line-height:1.5; letter-spacing:var(--bs-body-letter-spacing); color:var(--bs-body-color);
  background:#1d2835;
  background-image:
    radial-gradient(1200px 500px at 70% -5%, rgba(50,70,80,.35), transparent 60%),
    linear-gradient(180deg, rgba(50,70,80,.9) 0%, rgb(13,16,27) 100%);
  background-attachment:fixed; min-height:100vh;
}
/* faint grid behind everything, approximating pattern-dark.png */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
  background-size:75px 75px;
}
a{color:var(--bs-theme); text-decoration:underline}
a:hover{opacity:.5}

/* ---- shell ---------------------------------------------------------------- */
.app-header{position:fixed; top:0; left:0; right:0; height:52px; z-index:30;
  background:var(--bs-app-header-bg); display:flex; align-items:center; gap:16px; padding:0 16px}
.navbar-logo{width:26px;height:26px;border:2px solid var(--bs-theme);border-radius:3px;position:relative;flex:0 0 auto}
.navbar-logo::before{content:"H";position:absolute;inset:0;display:grid;place-items:center;color:var(--bs-theme);font-weight:700;font-size:13px}
.navbar-brand{color:var(--bs-heading-color);text-decoration:none;letter-spacing:2px;font-size:14.7px;font-weight:700}
.navbar-brand small{font-weight:300;font-size:12.9px;letter-spacing:2px;margin-left:.5ch}
.app-header .spacer{flex:1}
.app-header .hdr-icon{color:var(--bs-heading-color);font-size:16px;padding:8px 10px;cursor:default;position:relative}
.app-header .hdr-user{display:flex;align-items:center;gap:8px;color:var(--bs-heading-color);font-size:14px;padding:0 6px}
.dot-badge::after{content:"";position:absolute;top:6px;right:8px;width:7px;height:7px;border-radius:50%;background:var(--bs-danger)}

.app-sidebar{position:fixed;top:52px;left:0;width:270px;bottom:0;overflow-y:auto;z-index:20;padding-bottom:40px}
.menu-profile{padding:16px 16px 0}
.menu-profile .name{color:var(--bs-heading-color);font-weight:500;font-size:14px}
.menu-profile .role{color:var(--bs-tertiary-color);font-size:11.9px}
.menu-profile hr{border:0;border-top:1px solid var(--bs-border-color);margin:16px 0 0}
.menu-header{color:rgba(255,255,255,.3);font-size:10.5px;font-weight:600;letter-spacing:.75px;padding:16px 16px 8px;text-transform:none}
.menu-link{display:flex;align-items:center;gap:10px;height:31.6px;padding:4.8px 16px;color:var(--bs-tertiary-color);text-decoration:none;font-size:14px;cursor:pointer}
.menu-link .ic{width:30px;text-align:center;font-size:15px;flex:0 0 auto}
.menu-link .caret{margin-left:auto;font-size:11px;opacity:.6}
.menu-link:hover{color:var(--bs-heading-color)}
.menu-link.active{color:var(--bs-heading-color)}
.menu-link.active .ic{color:var(--bs-theme)}
.menu-sub{display:none;padding:2px 0 6px}
.menu-sub.open{display:block}
.menu-sub a{display:block;padding:5px 16px 5px 56px;color:var(--bs-tertiary-color);text-decoration:none;font-size:13px}
.menu-sub a:hover{color:var(--bs-heading-color);opacity:1}
.menu-sub a.active{color:var(--bs-heading-color)}
.menu-sub a.active::before{content:"";}
.hh-group .menu-link .ic{color:var(--bs-theme)}

.app-content{position:relative;z-index:1;margin-left:270px;padding:76px 32px 80px}
@media(max-width:1200px){.app-content{padding:68px 16px 80px}}

/* ---- headings ------------------------------------------------------------- */
h1.page-header{color:var(--bs-heading-color);font-size:28px;font-weight:600;letter-spacing:.75px;margin:0 0 2px}
h1.page-header small{color:var(--bs-body-color);font-size:16px;font-weight:400;margin-left:8px}
.breadcrumb{font-size:11.9px;font-weight:700;letter-spacing:.75px;margin:0 0 18px;color:var(--bs-body-color)}
.breadcrumb a{color:var(--bs-theme)}
.breadcrumb span.sep{padding:0 6px;color:var(--bs-tertiary-color)}
.title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* ---- framed panel (the signature HUD frame) ------------------------------- */
.panel{position:relative;background:transparent;border:1px solid var(--hx-frame-line);margin-bottom:16px}
.panel::before,.panel::after{content:"";position:absolute;pointer-events:none}
/* inset frame lines */
.panel>.frame-l{position:absolute;inset:15px;border:1px solid var(--hx-frame-line);pointer-events:none}
.panel .corner{position:absolute;width:10px;height:10px;border:2px solid var(--hx-corner);z-index:2}
.panel .corner.tl{top:-1px;left:-1px;border-right:0;border-bottom:0}
.panel .corner.tr{top:-1px;right:-1px;border-left:0;border-bottom:0}
.panel .corner.bl{bottom:-1px;left:-1px;border-right:0;border-top:0}
.panel .corner.br{bottom:-1px;right:-1px;border-left:0;border-top:0}
.panel-heading{height:40px;display:flex;align-items:center;gap:10px;padding:8px 16px;background:var(--hx-panel-head-tint);border-bottom:1px solid var(--bs-border-color);border-radius:3px 3px 0 0}
.panel-title{color:var(--bs-theme);font-size:13px;font-weight:600;letter-spacing:.75px;margin:0}
.panel-heading .tools{margin-left:auto;display:flex;align-items:center;gap:12px;color:var(--bs-body-color);font-size:13px}
.panel-heading .tools .x{cursor:pointer}
.panel-body{padding:16px}
.panel-body.tight{padding:4px}
.panel-footer{padding:10.4px 16px;border-top:1px solid var(--bs-border-color);display:flex;align-items:center;gap:12px}

/* ---- live indicator ------------------------------------------------------- */
.live-dot{width:12px;height:12px;border-radius:50%;background:var(--bs-theme);display:inline-block;animation:pulse 1.5s ease-in-out infinite}
.live-clock{color:var(--bs-theme);font-size:13px}
@keyframes pulse{0%,100%{transform:scale(1);opacity:1;filter:brightness(1)}50%{transform:scale(1.05);opacity:.9;filter:brightness(1.2)}}
@media(prefers-reduced-motion:reduce){.live-dot{animation:none}}

/* ---- stat tiles ----------------------------------------------------------- */
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:16px}
.tiles.c3{grid-template-columns:repeat(3,1fr)}
@media(max-width:1200px){.tiles,.tiles.c3{grid-template-columns:repeat(2,1fr)}}
.tile{position:relative;border:1px solid var(--bs-border-color);padding:16px;min-height:123px;overflow:hidden}
.tile.accent{border-color:var(--hx-theme-subtle)}
.tile .ghost{position:absolute;top:10px;right:12px;font-size:40px;color:var(--hx-ghost-icon);line-height:1}
.tile .lbl{color:var(--bs-tertiary-color);font-size:11.7px;letter-spacing:1px;text-transform:uppercase}
.tile .val{color:var(--bs-heading-color);font-size:25.6px;font-weight:500;letter-spacing:1px;margin-top:6px}
.tile .desc{color:var(--bs-body-color);font-size:11.7px;font-weight:300;margin-top:4px}
.tile .foot{margin:16px -16px -16px;padding:7.2px 16px;border-top:1px solid var(--bs-border-color);text-align:right}
.tile .foot a{color:var(--bs-heading-color);font-size:13px;font-weight:300;text-decoration:none}
.progress{height:3px;background:var(--hx-ghost-icon);border-radius:4px;margin-top:8px;overflow:hidden}
.progress>i{display:block;height:100%;background:var(--bs-primary)}

/* ---- buttons -------------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:400;letter-spacing:.75px;
  height:34.8px;padding:6px 12px;border-radius:4px;border:1px solid transparent;cursor:pointer;text-decoration:none;color:var(--bs-heading-color);background:transparent}
.btn-primary{background:var(--hx-btn-primary);border-color:var(--hx-btn-primary-border)}
.btn-default{background:rgb(121,142,152);border-color:rgb(121,142,152)}
.btn-danger{background:var(--hx-btn-danger);border-color:var(--hx-btn-danger-border)}
.btn-outline{border-color:var(--bs-theme);color:var(--bs-theme);background:transparent}
.btn-sm{height:29.3px;padding:4px 8px;border-radius:2px;font-size:13px}
.btn-xs{height:24px;padding:2px 8px;font-size:11.7px}
.btn[disabled],.btn.disabled{opacity:.65;cursor:not-allowed}

/* ---- segmented control (Tabs) --------------------------------------------- */
.seg{display:inline-flex;background:var(--hx-track-bg);border:1px solid var(--hx-track-border);border-radius:4px;height:34.8px;padding:0}
.seg a{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;font-size:11px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;color:var(--hx-dim);text-decoration:none;border-radius:3px}
.seg a.on{background:var(--bs-theme);color:var(--hx-on-theme)}
.seg a.on .d{animation:pulse 1.6s ease-in-out infinite}

/* ---- metadata strip ------------------------------------------------------- */
.ems-strip{background:var(--hx-strip-bg);border:1px solid var(--hx-strip-border);border-radius:4px;padding:8px 12px;margin-top:9px;display:flex;flex-wrap:wrap;align-items:center;gap:4px 2px}
.ems-chip{display:inline-flex;align-items:baseline;gap:6px;padding:0 2px}
.ems-lbl{font-size:9.5px;font-weight:700;letter-spacing:.475px;text-transform:uppercase;color:var(--hx-theme-dim)}
.ems-val{font-size:11px;font-weight:700;color:var(--bs-body-color)}
.ems-val.empty{font-weight:400;color:var(--hx-faint)}
.ems-dot{color:var(--hx-theme-faint);font-size:10px;padding:0 6px}

/* ---- HUD table ------------------------------------------------------------ */
table.hud{width:100%;border-collapse:collapse}
table.hud th{color:var(--bs-body-color);font-size:14px;font-weight:700;letter-spacing:.75px;text-align:left;padding:8px;border-bottom:1px solid var(--bs-border-color)}
table.hud td{font-size:14px;font-weight:300;color:var(--bs-body-color);padding:8px;border-bottom:1px solid var(--bs-border-color);vertical-align:top}
table.hud td a.name{color:var(--bs-theme);text-decoration:underline}
table.hud tr:hover td{background:rgba(255,255,255,.03)}
.sub{display:block;font-size:12.25px;color:var(--bs-tertiary-color)}
.mono{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}

/* ---- grid (interactive data grid look) ------------------------------------ */
table.grid{width:100%;border-collapse:collapse}
table.grid th{background:var(--bs-body-bg);color:var(--bs-body-color);font-size:14px;font-weight:500;text-align:left;padding:8px 16px;position:sticky;top:0}
table.grid th .flt{color:var(--bs-tertiary-color);font-size:11px;margin-left:6px}
table.grid td{font-size:14px;font-weight:400;color:var(--bs-body-color);padding:6px 16px;border-bottom:1px solid var(--bs-border-color)}
table.grid tr:nth-child(2n) td{background:rgba(255,255,255,.02)}
table.grid tr:hover td{background:rgba(255,255,255,.05)}
table.grid tr.sel td{background:rgba(var(--bs-theme-rgb),.10)}

/* ---- badges / chips ------------------------------------------------------- */
.badge{display:inline-block;font-size:12.25px;font-weight:300;letter-spacing:.75px;padding:2px 8px;border-radius:4px;border:1px solid}
.badge.hexhunter{color:var(--hx-type-hexhunter);background:var(--hx-type-hexhunter-bg);border-color:var(--hx-type-hexhunter)}
.badge.hexguard{color:var(--hx-type-hexguard);background:var(--hx-type-hexguard-bg);border-color:var(--hx-type-hexguard)}
.chip{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 8px;border-radius:4px;border:1px solid var(--hx-chip-info);color:var(--hx-chip-info);font-size:12px;font-weight:300}
.chip.wifi{border-color:var(--bs-info);color:var(--bs-info)}
.chip.ble{border-color:var(--bs-theme);color:var(--bs-theme)}
.chip.cell{border-color:var(--bs-primary);color:var(--bs-primary)}
.chip.classic{border-color:var(--bs-muted);color:var(--bs-muted)}
.chip.passive{border-color:var(--hx-theme-subtle);color:var(--hx-theme-dim)}
.chip.active{border-color:var(--bs-warning);color:var(--bs-warning-text-emphasis)}

/* status pills for command lifecycle / session state */
.pill{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;padding:2px 8px;border-radius:10px;border:1px solid var(--bs-border-color);color:var(--bs-body-color)}
.pill.live,.pill.completed,.pill.active{color:var(--bs-theme);border-color:var(--hx-theme-subtle)}
.pill.sent,.pill.pending,.pill.acked{color:var(--bs-info-text-emphasis);border-color:var(--bs-info-border-subtle)}
.pill.failed,.pill.refused{color:var(--bs-danger-text-emphasis);border-color:var(--bs-danger-text-emphasis)}
.pill.expired,.pill.ended,.pill.stale{color:var(--bs-muted);border-color:var(--bs-muted)}
.pill.warn{color:var(--bs-warning-text-emphasis);border-color:var(--bs-warning-border-subtle)}

/* ---- freshness ------------------------------------------------------------ */
.fresh{color:var(--bs-theme)} .ageing{color:var(--bs-warning)} .stalec{color:var(--bs-muted)}

/* ---- list rows (device list / log feed) ----------------------------------- */
.lg{list-style:none;margin:0;padding:0}
.lg>li{padding:12px 16px;border-bottom:1px solid var(--bs-border-color)}
.lg>li:hover{background:rgba(255,255,255,.03)}
.lg .pn{color:var(--bs-body-color);font-size:14px;font-weight:600}
.lg .co{color:var(--bs-tertiary-color);font-size:12.25px}
.metrics{display:flex;gap:14px;font-size:11.9px;color:var(--bs-body-color);margin-top:4px}

/* ---- map placeholder ------------------------------------------------------ */
.map{position:relative;background:
   repeating-linear-gradient(0deg,rgba(255,255,255,.04) 0 1px,transparent 1px 44px),
   repeating-linear-gradient(90deg,rgba(255,255,255,.04) 0 1px,transparent 1px 44px),
   radial-gradient(900px 500px at 40% 30%, rgba(60,210,165,.06), transparent 60%),
   linear-gradient(180deg,#14202b,#0c141b);
  min-height:360px;border:1px solid var(--bs-border-color);overflow:hidden}
.map .ctl{position:absolute;top:10px;right:10px;display:flex;flex-direction:column;gap:2px}
.map .ctl b{width:26px;height:26px;display:grid;place-items:center;background:var(--hx-map-control-bg);color:var(--hx-map-control-fg);font-weight:700;border-radius:4px;font-size:16px}
.map .scale{position:absolute;bottom:8px;right:10px;font-size:11px;background:#fff;color:#000;padding:0 6px;border-radius:2px}
.map .mk{position:absolute;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;transform:translate(-50%,-50%);font-size:12px;font-weight:700;border:2px solid #0008}
.map .mk.ble{background:var(--bs-theme);color:#06130c}
.map .mk.wifi{background:var(--bs-info);color:#001f2d}
.map .mk.cell{background:var(--bs-primary);color:#001}
.map .mk.hunter{background:var(--hx-type-hexhunter);color:#2f1a00;border-radius:4px}
.map .mk.sel{box-shadow:0 0 0 3px var(--hx-spin)}
.map .ring{position:absolute;border:1px dashed var(--hx-theme-faint);border-radius:50%;transform:translate(-50%,-50%)}

/* ---- map popup card ------------------------------------------------------- */
.popup{position:absolute;width:300px;background:var(--hx-popup-bg);border:1px solid var(--hx-corner);box-shadow:0 8px 25px 5px rgba(0,0,0,.6);padding:12px}
.popup h4{margin:0 0 6px;color:var(--bs-heading-color);font-size:20px;font-weight:600}
.popup .co{color:var(--hx-popup-text);font-size:14px;font-weight:600}

/* ---- forms ---------------------------------------------------------------- */
.form-row{display:grid;grid-template-columns:200px 1fr;gap:12px;align-items:center;margin-bottom:12px}
.form-label{color:var(--bs-theme);font-size:14px}
.form-control{height:34.8px;padding:6px 12px;background:transparent;border:1px solid var(--bs-border-color);border-radius:4px;color:var(--bs-body-color);font-family:inherit;font-size:14px;width:100%}
/* Native <select>: the OS paints the open option list, so options need an explicit dark bg + light
   text or they render white-on-white. Give the select itself a solid dark bg too (it sits over the
   dark body/panel) so the closed control matches. */
select.form-control{background-color:var(--bs-body-bg);color:var(--bs-body-color);appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--bs-muted) 50%),linear-gradient(135deg,var(--bs-muted) 50%,transparent 50%);background-position:calc(100% - 16px) 15px,calc(100% - 11px) 15px;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
select.form-control option{background-color:var(--bs-body-bg);color:var(--bs-body-color)}
select.form-control option:disabled{color:var(--bs-muted)}
.input-group{display:flex}
.input-group .form-control{border-radius:4px 0 0 4px}
.input-group .go{width:40px;display:grid;place-items:center;background:var(--hx-btn-primary);border:1px solid var(--hx-btn-primary-border);border-left:0;border-radius:0 4px 4px 0;color:#fff;cursor:pointer}
.switch{position:relative;width:38px;height:20px;border-radius:10px;background:var(--hx-track-bg);border:1px solid var(--hx-track-border);display:inline-block;vertical-align:middle;cursor:pointer}
.switch::after{content:"";position:absolute;top:1px;left:1px;width:16px;height:16px;border-radius:50%;background:var(--bs-muted);transition:.15s}
.switch.on{background:var(--bs-theme);border-color:var(--bs-theme)}
.switch.on::after{left:19px;background:var(--hx-on-theme)}
.check{width:18px;height:18px;border:1px solid var(--bs-border-color);border-radius:3.5px;display:inline-block;vertical-align:middle}
.check.on{background:var(--bs-theme);border-color:var(--bs-theme);position:relative}
.check.on::after{content:"✓";position:absolute;inset:0;display:grid;place-items:center;color:#000;font-size:12px}

/* ---- alerts / notes ------------------------------------------------------- */
.alert{border-radius:4px;padding:16px;border:1px solid}
.alert-info{color:var(--bs-info-text-emphasis);background:var(--bs-info-bg-subtle);border-color:var(--bs-info-border-subtle)}
.alert-warning{color:var(--bs-warning-text-emphasis);background:var(--bs-warning-bg-subtle);border-color:var(--bs-warning-border-subtle)}
.note-danger{background:var(--bs-danger-bg-subtle);border-left:3px solid var(--bs-danger-text-emphasis);color:var(--bs-danger-text-emphasis);padding:15px 15px 15px 18px;border-radius:4px}

/* ---- drawer / side pane --------------------------------------------------- */
.pane{border-left:1px solid var(--hx-theme-rule);background:rgba(29,40,53,.6);padding:16px}
.pane h6{color:var(--bs-body-color);font-size:13.6px;font-weight:600;margin:0 0 10px}

/* ---- layout helpers ------------------------------------------------------- */
.grid2{display:grid;grid-template-columns:2fr 1fr;gap:16px}
.grid-aside{display:grid;grid-template-columns:520px 1fr;gap:16px}
.grid-id{display:grid;grid-template-columns:1fr 380px;gap:16px}
@media(max-width:1200px){.grid2,.grid-aside,.grid-id{grid-template-columns:1fr}}
.muted{color:var(--bs-tertiary-color)}
.right{margin-left:auto}
.row-between{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.kv{display:grid;grid-template-columns:150px 1fr;gap:6px 12px;font-size:13px}
.kv dt{color:var(--bs-tertiary-color)} .kv dd{margin:0;color:var(--bs-body-color)}
.section-note{font-size:11.9px;color:var(--bs-tertiary-color);margin:0 0 12px}
.wf-banner{position:fixed;bottom:0;left:270px;right:0;z-index:40;background:rgba(0,0,0,.6);border-top:1px solid var(--hx-frame-line);color:var(--bs-tertiary-color);font-size:11px;padding:4px 16px;text-align:center}
@media(max-width:1200px){.wf-banner{left:0}}
.derived{border-bottom:1px dotted var(--hx-theme-dim)}
.layer-tag{font-size:9.5px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--hx-theme-dim);border:1px solid var(--hx-theme-faint);border-radius:3px;padding:1px 5px;margin-left:8px}