/* ============================================================================
   VELORA · COMPONENT LAYER  (v126 "Premium UI")
   ----------------------------------------------------------------------------
   Loaded AFTER velora.css. Purpose: one shared, token-driven vocabulary for the
   whole app so every page speaks the same visual language. Additive — it does
   not remove anything; it promotes the previously-dead tokens (--sp-*, --radius-*)
   to first-class and gives buttons / forms / tables / states a single source.

   Sections:
     [A] Token refinements + motion       [E] Stat strip + KPI cards
     [B] Button system (.v-btn*)          [F] Tables (responsive stacked)
     [C] Forms (.v-field)                 [G] Toast + states
     [D] Page header + sections           [H] Dashboard cockpit (v126)
   ========================================================================== */

/* ── [A] Token refinements ─────────────────────────────────────────────────── */
:root{
  /* Accessibility: the old --muted-2 (#8d95a3) failed WCAG AA on cream. Darkened. */
  --muted-2:#646c7b;
  /* Named radii so density/roundness can be retuned in ONE place. */
  --radius-card:22px;
  --radius-control:14px;
  --radius-pill:999px;
  /* Single motion duration; collapses to 0 under reduced-motion (see below). */
  --motion:.16s;
  --ease:cubic-bezier(.4,.16,.2,1);
}
@media (prefers-reduced-motion: reduce){ :root{ --motion:0s } }

/* ── [B] Button system ─────────────────────────────────────────────────────── */
/* .v-btn already exists in velora.css; here we complete it: focus, disabled,
   loading, semantic + size + shape variants, so per-view button copies can retire. */
.v-btn{ transition:transform var(--motion) var(--ease), box-shadow var(--motion) var(--ease), background var(--motion) var(--ease), border-color var(--motion) var(--ease); }
.v-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.v-btn:active{ transform:translateY(0); }
.v-btn[disabled], .v-btn[aria-disabled="true"]{ opacity:.55; pointer-events:none; box-shadow:none; }
.v-btn.is-loading{ pointer-events:none; position:relative; color:transparent !important; }
.v-btn.is-loading::after{
  content:""; position:absolute; inset:0; margin:auto; width:16px; height:16px;
  border:2px solid currentColor; border-right-color:transparent; border-radius:50%;
  animation:vBtnSpin .7s linear infinite; color:#fff;
}
.v-btn-ghost.is-loading::after, .v-btn-soft.is-loading::after{ color:var(--accent); }
@keyframes vBtnSpin{ to{ transform:rotate(360deg) } }

.v-btn-sm{ padding:8px 12px; font-size:12.5px; border-radius:12px; }
.v-btn-lg{ padding:14px 20px; font-size:15px; }
.v-btn-pill{ border-radius:var(--radius-pill); }
.v-btn-block{ width:100%; }

.v-btn-soft{ background:var(--accent-soft); border:1px solid var(--line-accent); color:#3a45b8; }
.v-btn-soft:hover{ background:#e7eaff; }
.v-btn-ghost{ background:transparent; border:1px solid var(--line); color:var(--text); }
.v-btn-ghost:hover{ background:var(--surface-2); }
.v-btn-ok{ background:linear-gradient(135deg,#1f9d57,#22a35a); color:#fff; box-shadow:0 12px 26px rgba(34,163,90,.20); }
.v-btn-ok:hover{ filter:brightness(1.03); }
.v-btn-danger{ background:linear-gradient(135deg,#c5354f,#cb3a58); color:#fff; box-shadow:0 12px 26px rgba(203,58,88,.18); }
.v-btn-danger:hover{ filter:brightness(1.03); }
.v-btn-warn{ background:var(--warn-soft); border:1px solid var(--warn-line); color:var(--warn); }

/* Icon-only buttons get a guaranteed hit area + focus ring (a11y). */
.v-iconbtn{ display:inline-grid; place-items:center; width:38px; height:38px; border-radius:var(--radius-control); border:1px solid var(--line); background:var(--surface); color:var(--muted); cursor:pointer; transition:all var(--motion) var(--ease); }
.v-iconbtn:hover{ color:var(--text); border-color:var(--line-accent); background:var(--surface-2); }
.v-iconbtn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

/* Global a11y net: icon-only chrome controls always show a focus ring. */
.rail-btn:focus-visible, .palette-trigger:focus-visible, .mobile-menu-btn:focus-visible,
.velora-tools-menu > summary:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

/* ── [C] Forms ─────────────────────────────────────────────────────────────── */
.v-field{ display:grid; gap:var(--sp-2); }
.v-field .v-label{ font-size:12.5px; font-weight:800; letter-spacing:-.01em; color:var(--text); }
.v-field .v-help{ font-size:12px; color:var(--muted); line-height:1.5; }
.v-field .v-input, .v-field .v-select, .v-field .v-textarea{
  width:100%; padding:11px 13px; border:1px solid var(--line); border-radius:var(--radius-control);
  background:var(--surface); color:var(--text); font:inherit; font-size:14px;
  transition:border-color var(--motion) var(--ease), box-shadow var(--motion) var(--ease);
}
.v-field .v-input:focus, .v-field .v-select:focus, .v-field .v-textarea:focus{
  outline:none; border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-soft);
}
.v-field.is-error .v-input, .v-field.is-error .v-textarea{ border-color:var(--bad); box-shadow:0 0 0 4px var(--bad-soft); }
.v-field .v-err{ font-size:12px; color:var(--bad); font-weight:700; }
.v-fieldset{ display:grid; gap:var(--sp-4); padding:var(--sp-6); border:1px solid var(--line); border-radius:var(--radius-card); background:var(--surface); }
.v-fieldset > legend, .v-fieldset .v-legend{ font-family:var(--font-display); font-weight:800; font-size:16px; letter-spacing:-.02em; padding:0; margin-bottom:var(--sp-1); }

/* ── [D] Page header + sections ────────────────────────────────────────────── */
.v-page-header{ display:flex; align-items:flex-start; justify-content:space-between; gap:var(--sp-4); flex-wrap:wrap; margin-bottom:var(--sp-5); }
.v-page-header .v-ph-eyebrow{ font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--muted-2); }
.v-page-header .v-ph-title{ font-family:var(--font-display); font-size:24px; font-weight:800; letter-spacing:-.035em; line-height:1.1; color:var(--text); margin:2px 0 0; }
.v-page-header .v-ph-sub{ font-size:13.5px; color:var(--muted); margin-top:5px; max-width:60ch; line-height:1.5; }
.v-page-header .v-ph-actions{ display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap; }

.v-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-card); box-shadow:var(--shadow-sm); }
.v-card-pad{ padding:var(--sp-6); }
.v-card-hover{ transition:transform var(--motion) var(--ease), box-shadow var(--motion) var(--ease); }
.v-card-hover:hover{ transform:translateY(-2px); box-shadow:var(--shadow); }
.v-eyebrow{ display:inline-flex; align-items:center; gap:7px; font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--muted-2); }

/* Toolbar — sticky search/filter bar */
.v-toolbar{ display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap; padding:var(--sp-3); border:1px solid var(--line); border-radius:var(--radius-card); background:var(--surface); box-shadow:var(--shadow-sm); }
.v-toolbar .v-toolbar-grow{ flex:1 1 220px; }
.v-toolbar .v-toolbar-end{ margin-left:auto; display:flex; gap:var(--sp-2); }

/* Segmented control (tabs / filters) */
.v-segmented{ display:inline-flex; gap:4px; padding:4px; background:var(--surface-2); border:1px solid var(--line); border-radius:var(--radius-pill); flex-wrap:wrap; }
.v-seg{ display:inline-flex; align-items:center; gap:6px; padding:7px 13px; border-radius:var(--radius-pill); font-size:12.5px; font-weight:700; color:var(--muted); text-decoration:none; cursor:pointer; border:none; background:transparent; transition:all var(--motion) var(--ease); }
.v-seg:hover{ color:var(--text); }
.v-seg.is-active{ background:var(--surface); color:var(--accent); box-shadow:var(--shadow-sm); }
.v-seg .v-seg-count{ font-size:11px; padding:1px 7px; border-radius:var(--radius-pill); background:var(--accent-soft); color:#3a45b8; font-weight:800; }

/* ── [E] Stat strip + KPI cards ────────────────────────────────────────────── */
.v-statstrip{ display:flex; flex-wrap:wrap; gap:var(--sp-2) var(--sp-6); align-items:center; padding:var(--sp-3) var(--sp-5); border:1px solid var(--line); border-radius:var(--radius-card); background:var(--surface); }
.v-stat{ display:inline-flex; align-items:baseline; gap:7px; font-size:13px; color:var(--muted); }
.v-stat b{ font-family:var(--font-display); font-size:18px; color:var(--text); font-weight:800; }

.v-kpi-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(208px,1fr)); gap:var(--sp-4); }
.v-kpi{ position:relative; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-card); padding:var(--sp-5); box-shadow:var(--shadow-sm); overflow:hidden; transition:transform var(--motion) var(--ease), box-shadow var(--motion) var(--ease); }
.v-kpi:hover{ transform:translateY(-2px); box-shadow:var(--shadow); }
.v-kpi::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--accent); opacity:.0; transition:opacity var(--motion) var(--ease); }
.v-kpi:hover::before{ opacity:.9; }
.v-kpi.kpi-ok::before{ background:var(--ok); } .v-kpi.kpi-warn::before{ background:var(--warn); } .v-kpi.kpi-bad::before{ background:var(--bad); }
.v-kpi-head{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-2); }
.v-kpi-label{ font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--muted-2); }
.v-kpi-ic{ width:30px; height:30px; border-radius:10px; display:grid; place-items:center; background:var(--accent-soft); color:var(--accent); flex:none; }
.v-kpi.kpi-ok .v-kpi-ic{ background:var(--ok-soft); color:var(--ok); } .v-kpi.kpi-warn .v-kpi-ic{ background:var(--warn-soft); color:var(--warn); } .v-kpi.kpi-bad .v-kpi-ic{ background:var(--bad-soft); color:var(--bad); }
.v-kpi-value{ font-family:var(--font-display); font-size:34px; font-weight:800; letter-spacing:-.04em; line-height:1.05; margin-top:var(--sp-3); color:var(--text); }
.v-kpi-sub{ font-size:12.5px; color:var(--muted); margin-top:var(--sp-1); display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.v-delta{ display:inline-flex; align-items:center; gap:3px; font-weight:800; font-size:12px; padding:1px 8px; border-radius:var(--radius-pill); }
.v-delta-up{ color:#14693c; background:var(--ok-soft); } .v-delta-down{ color:#9c2b44; background:var(--bad-soft); } .v-delta-flat{ color:var(--muted); background:var(--surface-2); }

/* ── [F] Tables — responsive (collapse to cards on mobile) ──────────────────── */
.v-table2{ width:100%; border-collapse:separate; border-spacing:0; }
.v-table2 thead th{ text-align:left; font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--muted-2); padding:10px 14px; border-bottom:1px solid var(--line); background:var(--surface-2); position:sticky; top:0; }
.v-table2 tbody td{ padding:13px 14px; border-bottom:1px solid var(--line-2); font-size:13.5px; vertical-align:middle; }
.v-table2 tbody tr{ transition:background var(--motion) var(--ease); }
.v-table2 tbody tr:hover{ background:var(--surface-2); }
.v-table-wrap{ overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius-card); background:var(--surface); }
@media (max-width:760px){
  .v-table2.is-stacked thead{ position:absolute; left:-9999px; }
  .v-table2.is-stacked tbody tr{ display:block; border:1px solid var(--line); border-radius:var(--radius-card); margin-bottom:var(--sp-3); padding:var(--sp-2) var(--sp-3); }
  .v-table2.is-stacked tbody td{ display:flex; justify-content:space-between; gap:var(--sp-3); border:none; padding:7px 0; }
  .v-table2.is-stacked tbody td::before{ content:attr(data-label); color:var(--muted-2); font-weight:800; font-size:11px; text-transform:uppercase; letter-spacing:.05em; }
}

/* ── [G] Toast + empty/loading/skeleton states ─────────────────────────────── */
.v-toast-host{ position:fixed; left:50%; bottom:var(--sp-6); transform:translateX(-50%); z-index:9999; display:flex; flex-direction:column; gap:var(--sp-2); pointer-events:none; }
.v-toast{ display:flex; align-items:center; gap:10px; min-width:240px; max-width:min(92vw,420px); padding:12px 16px; border:1px solid var(--line); border-radius:var(--radius-control); background:var(--surface); box-shadow:var(--shadow-pop); font-size:13.5px; font-weight:700; color:var(--text); pointer-events:auto; animation:vToastIn .22s var(--ease); }
.v-toast::before{ content:""; width:9px; height:9px; border-radius:50%; flex:none; background:var(--accent); }
.v-toast.is-ok::before{ background:var(--ok); } .v-toast.is-bad::before{ background:var(--bad); } .v-toast.is-warn::before{ background:var(--warn); }
.v-toast.is-leaving{ animation:vToastOut .2s var(--ease) forwards; }
@keyframes vToastIn{ from{ opacity:0; transform:translateY(10px) } to{ opacity:1; transform:translateY(0) } }
@keyframes vToastOut{ to{ opacity:0; transform:translateY(10px) } }

.v-empty{ display:grid; place-items:center; text-align:center; padding:var(--sp-8) var(--sp-6); gap:var(--sp-2); }
.v-empty .v-empty-illu{ width:96px; height:96px; opacity:.9; margin-bottom:var(--sp-2); }
.v-empty .v-empty-title{ font-family:var(--font-display); font-weight:800; font-size:17px; letter-spacing:-.02em; color:var(--text); }
.v-empty .v-empty-text{ font-size:13.5px; color:var(--muted); max-width:42ch; line-height:1.6; }

.v-skel{ background:linear-gradient(100deg, var(--surface-2) 30%, var(--surface-3) 50%, var(--surface-2) 70%); background-size:200% 100%; border-radius:10px; animation:vSkel 1.3s ease-in-out infinite; }
@keyframes vSkel{ to{ background-position:-200% 0 } }
@media (prefers-reduced-motion: reduce){ .v-skel{ animation:none } .v-toast{ animation:none } }

/* ── [H] Dashboard cockpit (v126) ──────────────────────────────────────────── */
.dash{ display:grid; gap:var(--sp-5); }

/* Command bar */
.dash-cmd{ display:flex; align-items:center; gap:var(--sp-4); flex-wrap:wrap; padding:var(--sp-3) var(--sp-5); border:1px solid var(--line); border-radius:var(--radius-card); background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(251,248,243,.9)); box-shadow:var(--shadow-sm); position:sticky; top:8px; z-index:5; }
.dash-cmd .dash-greet{ display:flex; flex-direction:column; line-height:1.2; }
.dash-cmd .dash-greet b{ font-family:var(--font-display); font-size:16px; font-weight:800; letter-spacing:-.02em; color:var(--text); }
.dash-cmd .dash-greet small{ font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums; }
.dash-cmd .dash-actions{ display:flex; gap:8px; flex-wrap:wrap; }
.dash-cmd .dash-end{ margin-left:auto; display:flex; align-items:center; gap:var(--sp-3); }
.dash-worker{ display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:700; color:var(--muted); padding:7px 12px; border-radius:var(--radius-pill); border:1px solid var(--line); background:var(--surface); }
.dash-worker .dot{ width:8px; height:8px; border-radius:50%; background:var(--ok); box-shadow:0 0 0 3px var(--ok-soft); }
.dash-worker.is-bad .dot{ background:var(--bad); box-shadow:0 0 0 3px var(--bad-soft); }

/* Alert banner */
.dash-alerts{ display:grid; gap:var(--sp-2); }
.dash-alert{ display:flex; align-items:center; gap:var(--sp-3); padding:13px 16px; border-radius:var(--radius-control); border:1px solid var(--warn-line); background:var(--warn-soft); }
.dash-alert.sev-bad{ border-color:var(--bad-line); background:var(--bad-soft); }
.dash-alert.sev-ok{ border-color:var(--ok-line); background:var(--ok-soft); }
.dash-alert .dash-alert-ic{ flex:none; color:var(--warn); } .dash-alert.sev-bad .dash-alert-ic{ color:var(--bad); } .dash-alert.sev-ok .dash-alert-ic{ color:var(--ok); }
.dash-alert .dash-alert-txt{ flex:1; font-size:13.5px; font-weight:700; color:var(--text); }
.dash-alert .v-btn{ flex:none; }

/* Mid: fleet health + activity */
.dash-mid{ display:grid; grid-template-columns:minmax(280px,4fr) minmax(320px,6fr); gap:var(--sp-4); }
.dash-gauge-card, .dash-feed-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-card); padding:var(--sp-5); box-shadow:var(--shadow-sm); }
.dash-gauge-wrap{ position:relative; display:grid; place-items:center; padding:var(--sp-3) 0 var(--sp-2); }
.dash-gauge-center{ position:absolute; inset:0; display:grid; place-content:center; text-align:center; }
.dash-gauge-pct{ font-family:var(--font-display); font-size:40px; font-weight:800; letter-spacing:-.04em; color:var(--text); line-height:1; }
.dash-gauge-cap{ font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--muted-2); margin-top:4px; }
.dash-gauge-legend{ display:flex; justify-content:center; gap:var(--sp-4); flex-wrap:wrap; margin-top:var(--sp-3); }
.dash-gauge-legend span{ display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--muted); }
.dash-gauge-legend i{ width:9px; height:9px; border-radius:3px; display:inline-block; }
.dash-attn{ margin-top:var(--sp-3); border-top:1px solid var(--line-2); padding-top:var(--sp-3); display:grid; gap:8px; }
.dash-attn-row{ display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--muted); }
.dash-attn-row .dot{ width:8px; height:8px; border-radius:50%; background:var(--bad); flex:none; }

.dash-feed-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--sp-3); }
.dash-feed-live{ display:inline-flex; align-items:center; gap:7px; font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--muted-2); }
.dash-feed-live .dot{ width:8px; height:8px; border-radius:50%; background:var(--ok); animation:vDashLivePulse 1.8s ease-in-out infinite; }
/* v137: renamed from vLivePulse — velora.css already defines a DIFFERENT vLivePulse (soft 4->7px ring)
   and loads first, so this redefinition was silently overriding the live-chip's intended animation. */
@keyframes vDashLivePulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(34,163,90,.5) } 50%{ box-shadow:0 0 0 6px rgba(34,163,90,0) } }
@media (prefers-reduced-motion: reduce){ .dash-feed-live .dot{ animation:none } }

/* Operational detail (collapsed) */
.dash-detail{ border:1px solid var(--line); border-radius:var(--radius-card); background:var(--surface); overflow:hidden; }
.dash-detail > summary{ list-style:none; cursor:pointer; padding:var(--sp-4) var(--sp-5); display:flex; align-items:center; gap:var(--sp-3); font-weight:800; font-size:14px; color:var(--text); }
.dash-detail > summary::-webkit-details-marker{ display:none; }
.dash-detail > summary::after{ content:"▾"; margin-left:auto; color:var(--muted-2); transition:transform var(--motion) var(--ease); }
.dash-detail[open] > summary::after{ transform:rotate(180deg); }
.dash-detail .dash-detail-body{ padding:0 var(--sp-5) var(--sp-5); }

@media (max-width:960px){ .dash-mid{ grid-template-columns:1fr; } .dash-cmd{ position:static; } }

/* On the dashboard the command bar IS the page header — hide the generic title row. */
body.page-home .page-title-row{ display:none; }

/* home.js forces #rel-delta to class "hm-metricVal hm-delta-*" (24px). Tame it so it
   reads as an inline trend chip inside the KPI card sub-line. */
.v-kpi-sub .hm-metricVal{ display:inline; font-size:14px; font-weight:800; margin:0; }
.dash .hm-chip{ background:var(--surface); }

/* ── Dark mode for the v126/v127 components ─────────────────────────────────
   Almost everything is token-driven and adapts automatically; only the few
   hardcoded light values below need an explicit dark counterpart. */
html[data-theme=dark] .dash-cmd{ background:linear-gradient(180deg, var(--surface), var(--surface-2)); }
html[data-theme=dark] .v-btn-soft{ color:#aeb6ff; }
html[data-theme=dark] .v-seg-count{ color:#aeb6ff; }
html[data-theme=dark] .v-kpi-value > span span{ color:var(--muted); }
html[data-theme=dark] .ab-roadmap-pill.is-planned{ color:#aeb6ff; }

/* ════════════════════════════════════════════════════════════════════════════
   v128 MISSION CONTROL — status pills, health bars, fleet ring, verdict, alerts
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Status pills (global status system) ── */
.v-pill{ display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:var(--radius-pill); font-size:11.5px; font-weight:800; letter-spacing:-.01em; line-height:1.5; white-space:nowrap; border:1px solid transparent; }
.v-pill .vicon{ width:13px; height:13px; }
.v-pill-ok{   background:var(--ok-soft);   color:#15803d; border-color:var(--ok-line); }
.v-pill-warn{ background:var(--warn-soft); color:#b45309; border-color:var(--warn-line); }
.v-pill-bad{  background:var(--bad-soft);  color:#be123c; border-color:var(--bad-line); }
.v-pill-mute{ background:var(--surface-2); color:var(--muted); border-color:var(--line); }
html[data-theme=dark] .v-pill-ok{ color:#5fd39a; } html[data-theme=dark] .v-pill-warn{ color:#f0b968; } html[data-theme=dark] .v-pill-bad{ color:#f3899f; } html[data-theme=dark] .v-pill-mute{ color:var(--muted); }

/* ── Health bar ── */
.v-health{ display:inline-flex; align-items:center; gap:8px; min-width:96px; }
.v-health-track{ flex:1; height:6px; border-radius:999px; background:var(--surface-3); overflow:hidden; min-width:54px; }
.v-health-fill{ display:block; height:100%; border-radius:999px; transition:width .4s var(--ease); }
.v-health-ok{   background:linear-gradient(90deg,#22a35a,#34c77b); }
.v-health-warn{ background:linear-gradient(90deg,#d4892a,#f0b54a); }
.v-health-bad{  background:linear-gradient(90deg,#c5354f,#e7607c); }
.v-health-num{ font-size:12px; font-weight:800; color:var(--muted); font-variant-numeric:tabular-nums; min-width:22px; text-align:right; }

/* ── Mission Control top row: verdict | fleet ring | alert center ── */
.mc-top{ display:grid; grid-template-columns:minmax(220px,3fr) minmax(260px,4fr) minmax(280px,5fr); gap:var(--sp-4); align-items:stretch; }
.mc-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-card); box-shadow:var(--shadow-sm); padding:var(--sp-5); display:flex; flex-direction:column; }
.mc-card-h{ font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--muted-2); margin-bottom:var(--sp-3); display:flex; align-items:center; justify-content:space-between; gap:8px; }

/* System verdict */
.mc-verdict{ justify-content:center; align-items:flex-start; position:relative; overflow:hidden; }
.mc-verdict.is-ok{ background:linear-gradient(135deg, var(--ok-soft), var(--surface)); }
.mc-verdict.is-bad{ background:linear-gradient(135deg, var(--bad-soft), var(--surface)); }
.mc-verdict.is-warn{ background:linear-gradient(135deg, var(--warn-soft), var(--surface)); }
.mc-verdict-badge{ width:46px; height:46px; border-radius:14px; display:grid; place-items:center; color:#fff; margin-bottom:var(--sp-3); flex:none; }
.mc-verdict.is-ok .mc-verdict-badge{ background:linear-gradient(135deg,#1f9d57,#22a35a); box-shadow:0 12px 26px rgba(34,163,90,.25); }
.mc-verdict.is-bad .mc-verdict-badge{ background:linear-gradient(135deg,#c5354f,#cb3a58); box-shadow:0 12px 26px rgba(203,58,88,.25); }
.mc-verdict.is-warn .mc-verdict-badge{ background:linear-gradient(135deg,#d4892a,#e0962f); box-shadow:0 12px 26px rgba(212,137,42,.25); }
.mc-verdict-badge .vicon{ width:26px; height:26px; }
.mc-verdict-title{ font-family:var(--font-display); font-size:24px; font-weight:800; letter-spacing:-.035em; line-height:1.1; color:var(--text); }
.mc-verdict-sub{ font-size:13px; color:var(--muted); margin-top:6px; line-height:1.5; }

/* Fleet health ring */
.mc-ring-body{ display:flex; align-items:center; gap:var(--sp-4); flex:1; }
.mc-ring-wrap{ position:relative; flex:none; display:grid; place-items:center; }
.mc-ring-center{ position:absolute; inset:0; display:grid; place-content:center; text-align:center; }
.mc-ring-num{ font-family:var(--font-display); font-size:26px; font-weight:800; letter-spacing:-.04em; line-height:1; color:var(--text); }
.mc-ring-cap{ font-size:9.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--muted-2); margin-top:2px; }
.mc-legend{ flex:1; display:grid; gap:6px; min-width:0; }
.mc-legend-row{ display:flex; align-items:center; gap:8px; font-size:12px; color:var(--muted); }
.mc-legend-row i{ width:9px; height:9px; border-radius:3px; flex:none; }
.mc-legend-row b{ margin-left:auto; color:var(--text); font-variant-numeric:tabular-nums; }

/* Alert center */
.mc-alerts{ display:grid; gap:8px; flex:1; }
.mc-alert-row{ display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:var(--radius-control); border:1px solid var(--line); background:var(--surface-2); transition:border-color var(--motion) var(--ease), background var(--motion) var(--ease); }
.mc-alert-row:hover{ border-color:var(--line-accent); }
.mc-alert-ic{ width:30px; height:30px; border-radius:9px; display:grid; place-items:center; flex:none; }
.mc-alert-row.sev-bad .mc-alert-ic{ background:var(--bad-soft); color:var(--bad); } .mc-alert-row.sev-warn .mc-alert-ic{ background:var(--warn-soft); color:var(--warn); } .mc-alert-row.sev-ok .mc-alert-ic{ background:var(--ok-soft); color:var(--ok); }
.mc-alert-n{ font-family:var(--font-display); font-size:17px; font-weight:800; color:var(--text); min-width:30px; }
.mc-alert-txt{ flex:1; font-size:12.5px; color:var(--muted); line-height:1.35; }
.mc-alert-row .v-btn{ flex:none; }

@media (max-width:1180px){ .mc-top{ grid-template-columns:1fr 1fr; } .mc-alerts-card{ grid-column:1 / -1; } }
@media (max-width:760px){ .mc-top{ grid-template-columns:1fr; } }

/* Needs-attention rows (dashboard mid) */
.dash-attn-acct{ display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:var(--radius-control); text-decoration:none; transition:background var(--motion) var(--ease); }
.dash-attn-acct:hover{ background:var(--surface-2); }
.dash-attn-mail{ flex:1; min-width:0; font-size:12.5px; color:var(--text); font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ── Control Briefing (post-login) ── */
.cb-backdrop{ position:fixed; inset:0; z-index:1000; display:grid; place-items:center; padding:18px; background:rgba(29,36,51,.42); backdrop-filter:blur(6px); animation:cbFade .2s ease; }
.cb-hidden{ opacity:0; transition:opacity .2s ease; }
@keyframes cbFade{ from{ opacity:0 } to{ opacity:1 } }
.cb-card{ position:relative; width:min(560px,100%); max-height:92vh; overflow:auto; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-xl); box-shadow:var(--shadow-pop); padding:var(--sp-6); animation:cbPop .22s var(--ease); }
@keyframes cbPop{ from{ opacity:0; transform:translateY(12px) scale(.98) } to{ opacity:1; transform:none } }
.cb-close{ position:absolute; top:14px; right:14px; width:34px; height:34px; border-radius:10px; border:1px solid var(--line); background:var(--surface); color:var(--muted); display:grid; place-items:center; cursor:pointer; }
.cb-close:hover{ background:var(--surface-2); color:var(--text); }
.cb-close:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.cb-head{ display:flex; align-items:flex-start; gap:14px; padding-right:30px; }
.cb-avatar{ flex:none; width:48px; height:48px; border-radius:15px; display:grid; place-items:center; color:#fff; background:linear-gradient(135deg,var(--accent),var(--accent-2)); box-shadow:0 12px 26px rgba(85,99,255,.22); }
.cb-avatar .vicon{ width:24px; height:24px; }
.cb-kicker{ font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--muted-2); }
.cb-title{ font-family:var(--font-display); font-size:22px; font-weight:800; letter-spacing:-.03em; margin:2px 0 0; color:var(--text); }
.cb-sub{ font-size:13.5px; color:var(--muted); margin:5px 0 0; }
.cb-session{ display:flex; flex-wrap:wrap; gap:8px 16px; margin-top:var(--sp-4); padding:11px 14px; border-radius:var(--radius-control); background:var(--surface-2); border:1px solid var(--line); }
.cb-session span{ display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums; }
.cb-session .vicon{ color:var(--muted-2); }
.cb-health{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:var(--sp-4); }
.cb-stat{ display:flex; align-items:center; gap:10px; padding:11px 12px; border:1px solid var(--line); border-radius:var(--radius-control); background:var(--surface); }
.cb-stat-ic{ width:30px; height:30px; border-radius:9px; display:grid; place-items:center; background:var(--accent-soft); color:var(--accent); flex:none; }
.cb-stat-label{ font-size:11px; color:var(--muted-2); font-weight:700; }
.cb-pill{ display:inline-flex; margin-top:3px; padding:2px 9px; border-radius:var(--radius-pill); font-size:11px; font-weight:800; }
.cb-pill-ok{ background:var(--ok-soft); color:#15803d; } .cb-pill-warn{ background:var(--warn-soft); color:#b45309; } .cb-pill-bad{ background:var(--bad-soft); color:#be123c; } .cb-pill-mute{ background:var(--surface-3); color:var(--muted); }
.cb-radar{ margin-top:var(--sp-4); padding:var(--sp-4); border-radius:var(--radius-card); background:linear-gradient(135deg,var(--accent-soft),var(--surface)); border:1px solid var(--line-accent); }
.cb-radar-head{ display:flex; align-items:center; gap:8px; font-size:12px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--accent); }
.cb-radar-figs{ display:flex; gap:var(--sp-6); margin-top:10px; }
.cb-fig{ display:flex; flex-direction:column; }
.cb-fig b{ font-family:var(--font-display); font-size:28px; font-weight:800; letter-spacing:-.04em; color:var(--text); line-height:1; }
.cb-fig span{ font-size:12px; color:var(--muted); margin-top:3px; }
.cb-note{ display:flex; align-items:flex-start; gap:7px; margin:10px 0 0; font-size:12px; color:var(--muted); line-height:1.5; }
.cb-note .vicon{ color:var(--ok); flex:none; margin-top:1px; }
.cb-muted{ font-size:13px; color:var(--muted); margin:8px 0 0; }
.cb-actions{ display:flex; flex-wrap:wrap; gap:9px; margin-top:var(--sp-5); }
.cb-btn{ display:inline-flex; align-items:center; gap:7px; padding:10px 15px; border-radius:var(--radius-control); border:1px solid var(--line); background:var(--surface); color:var(--text); font:inherit; font-size:13px; font-weight:800; cursor:pointer; text-decoration:none; transition:all var(--motion) var(--ease); }
.cb-btn:hover{ background:var(--surface-2); transform:translateY(-1px); }
.cb-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.cb-btn-primary{ background:linear-gradient(135deg,var(--accent),var(--accent-up)); color:#fff; border-color:transparent; box-shadow:0 12px 26px rgba(85,99,255,.20); }
.cb-btn-primary:hover{ filter:brightness(1.03); }
@media (max-width:520px){ .cb-health{ grid-template-columns:1fr; } .cb-actions .cb-btn{ flex:1; justify-content:center; } }
@media (prefers-reduced-motion: reduce){ .cb-backdrop, .cb-card{ animation:none; } }

/* ════════════════════════════════════════════════════════════════════════════
   v129 MISSION CONTROL SHELL — left sidebar + slim topbar (overrides velora.css [3])
   ════════════════════════════════════════════════════════════════════════════ */
.workspace-layout{ display:grid !important; grid-template-columns:250px minmax(0,1fr); gap:0; align-items:stretch; }
.mc-sidebar{ display:flex; flex-direction:column; background:linear-gradient(180deg, var(--surface), var(--surface-2)); border-right:1px solid var(--line); position:sticky; top:0; align-self:start; height:calc(100vh - 28px); }
.mc-brand{ display:flex; align-items:center; gap:11px; padding:18px 18px 14px; text-decoration:none; }
.mc-brand-mark{ width:40px; height:40px; border-radius:13px; display:grid; place-items:center; color:#fff; background:linear-gradient(135deg,var(--accent),var(--accent-2)); box-shadow:0 10px 22px rgba(85,99,255,.20); flex:none; }
.mc-brand-mark .vicon{ width:23px; height:23px; }
.mc-brand-id{ display:flex; flex-direction:column; line-height:1.12; min-width:0; }
.mc-brand-id b{ font-family:var(--font-display); font-size:18px; font-weight:800; letter-spacing:-.045em; color:var(--text); }
.mc-brand-id small{ font-size:10px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--muted-2); }
.mc-nav{ flex:1; overflow-y:auto; padding:6px 12px 12px; display:flex; flex-direction:column; gap:13px; }
.mc-nav-group{ display:flex; flex-direction:column; gap:2px; }
.mc-nav-grouplabel{ font-size:10px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--muted-2); padding:4px 10px 3px; }
.mc-nav-link{ position:relative; display:flex; align-items:center; gap:11px; padding:9px 11px; border-radius:11px; text-decoration:none; color:var(--muted); font-size:13.5px; font-weight:600; transition:background var(--motion) var(--ease), color var(--motion) var(--ease); }
.mc-nav-link:hover{ background:var(--surface); color:var(--text); }
.mc-nav-link:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; }
.mc-nav-link.is-active{ background:var(--accent-soft); color:var(--accent); font-weight:800; }
.mc-nav-link.is-active::before{ content:""; position:absolute; left:-12px; top:9px; bottom:9px; width:3px; border-radius:0 3px 3px 0; background:var(--accent); }
.mc-nav-ic{ display:grid; place-items:center; width:20px; flex:none; color:inherit; }
.mc-nav-ic .vicon{ width:18px; height:18px; }
.mc-nav-txt{ flex:1; }
.mc-nav-dot{ width:7px; height:7px; border-radius:50%; background:var(--ok); flex:none; }
.mc-sidebar-foot{ padding:12px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:9px; }
.mc-syschip{ display:flex; align-items:center; gap:8px; padding:8px 11px; border-radius:11px; font-size:12px; font-weight:800; }
.mc-syschip.is-ok{ background:var(--ok-soft); color:#15803d; } .mc-syschip.is-warn{ background:var(--warn-soft); color:#b45309; }
.mc-syschip-dot{ width:8px; height:8px; border-radius:50%; background:currentColor; }
.mc-syschip b{ margin-left:auto; }
.mc-user-row{ display:flex; align-items:center; gap:8px; }
.mc-user{ flex:1; min-width:0; display:flex; align-items:center; gap:8px; }
.mc-user-av{ width:30px; height:30px; border-radius:9px; background:var(--surface-3); display:grid; place-items:center; color:var(--muted); flex:none; }
.mc-user-av .vicon{ width:16px; height:16px; }
.mc-user-name{ font-size:12.5px; font-weight:700; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mc-foot-btn{ width:32px; height:32px; border-radius:9px; border:1px solid var(--line); background:var(--surface); color:var(--muted); display:grid; place-items:center; cursor:pointer; flex:none; text-decoration:none; }
.mc-foot-btn:hover{ color:var(--text); background:var(--surface-2); } .mc-foot-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.mc-foot-btn .vicon{ width:16px; height:16px; }
.mc-version{ font-size:10px; color:var(--muted-2); text-align:center; letter-spacing:.05em; }

.content-zone{ display:flex; flex-direction:column; min-width:0; }
.mc-topbar{ display:flex; align-items:center; gap:14px; padding:13px 22px; border-bottom:1px solid var(--line); background:rgba(255,255,255,.62); position:sticky; top:0; z-index:12; backdrop-filter:blur(8px); }
html[data-theme=dark] .mc-topbar{ background:rgba(20,22,29,.6); }
.mc-topbar-title{ display:flex; align-items:center; gap:12px; min-width:0; }
.mc-topbar .view-title{ font-size:21px; }
.mc-topbar-actions{ margin-left:auto; display:flex; align-items:center; gap:10px; }
/* v148 panel switcher (topbar, native <details>, dark-mode safe via CSS vars) */
.mc-panelsw{ position:relative; }
.mc-panelsw>summary{ list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border:1px solid var(--line); border-radius:10px; background:var(--surface); color:var(--text); font-weight:650; font-size:13px; }
.mc-panelsw>summary::-webkit-details-marker{ display:none; }
.mc-panelsw>summary:hover{ border-color:var(--accent); }
.mc-panelsw-caret{ color:var(--muted); font-size:11px; }
.mc-panelsw-menu{ position:absolute; right:0; top:calc(100% + 6px); min-width:184px; z-index:40; background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:6px; box-shadow:0 14px 34px rgba(15,23,42,.20); display:flex; flex-direction:column; gap:2px; }
.mc-panelsw-item{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 10px; border-radius:8px; text-decoration:none; color:var(--text); font-weight:600; font-size:13px; }
a.mc-panelsw-item:hover{ background:var(--accent-soft); color:var(--accent); }
.mc-panelsw-item.is-active{ color:var(--muted); cursor:default; }
.mc-panelsw-badge{ font-size:11px; font-weight:700; color:var(--accent); background:var(--accent-soft); padding:1px 7px; border-radius:999px; }
.mc-hamburger{ display:none; width:38px; height:38px; border-radius:11px; border:1px solid var(--line); background:var(--surface); color:var(--text); place-items:center; cursor:pointer; flex:none; }
.mc-scrim{ display:none; }

@media (max-width:1100px){ .workspace-layout{ grid-template-columns:214px minmax(0,1fr); } }
@media (max-width:880px){
  .app-shell{ padding:0; }
  .app-frame{ overflow:visible; backdrop-filter:none; border:none; border-radius:0; min-height:100vh; background:transparent; box-shadow:none; }
  .workspace-layout{ grid-template-columns:1fr !important; min-height:100vh; }
  .mc-sidebar{ position:fixed; left:0; top:0; bottom:0; height:auto; width:270px; z-index:60; transform:translateX(-100%); transition:transform .22s var(--ease); box-shadow:0 30px 80px rgba(33,36,44,.28); border-radius:0 18px 18px 0; }
  .mc-nav-toggle:checked ~ .app-shell .mc-sidebar{ transform:translateX(0); }
  .mc-nav-toggle:checked ~ .app-shell .mc-scrim{ display:block; position:fixed; inset:0; z-index:55; background:rgba(29,36,51,.42); }
  .mc-hamburger{ display:grid; }
  .mc-topbar{ padding:12px 16px; }
}
@media (max-width:560px){ .mc-hide-sm{ display:none; } .mc-topbar .palette-hint, .mc-topbar kbd{ display:none; } }
@media (prefers-reduced-motion: reduce){ .mc-sidebar{ transition:none; } }

/* ════════════════════════════════════════════════════════════════════════════
   v130 PAGE NORMALIZATION — unify every per-view body to the token design system
   so Operations/Monitor/Users/Settings/Released/Inbox/Suppliers/Notepad/AddAccount
   look like one product. Pure CSS (no markup risk): higher specificity than the
   bespoke per-view rules, but semantic variants (.is-active, .warn, .ok…) survive.
   ════════════════════════════════════════════════════════════════════════════ */

/* Cards → one surface */
.main-surface :is(.op-card,.us-card,.stx-card,.mo-card,.sup-card,.np-card,.aa-card,.ix-card,.watch-card,.aa-subcard){
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-card); box-shadow:var(--shadow-sm);
}
/* Card titles / subs → display type + token ink */
.main-surface :is(.op-cardTitle,.us-cardTitle,.stx-cardTitle,.mo-cardTitle,.sup-cardTitle,.np-cardTitle,.aa-cardTitle,.ix-card-head h2,.rl-title){
  font-family:var(--font-display); letter-spacing:-.025em; color:var(--text);
}
.main-surface :is(.op-cardSub,.us-cardSub,.stx-cardSub,.mo-cardSub,.np-cardSub,.aa-cardSub,.ix-card-sub,.rl-subtitle){ color:var(--muted); }
/* Card icon chips → brand wash */
.main-surface :is(.op-cardIcon,.mo-cardIcon,.sup-cardIcon,.aa-headChip){ background:var(--accent-soft); color:var(--accent); border-radius:12px; }
/* Page heads → consistent eyebrow/title rhythm */
.main-surface :is(.op-pagehead,.us-pagehead,.stx-pagehead,.mo-pagehead,.aa-pagehead,.sup-hero,.np-hero,.rl-head){ margin-bottom:var(--sp-4); }
/* Inputs / selects / textareas → one field look */
.main-surface :is(.op-input,.us-input,.stx-input,.sup-input,.np-input,.aa-input,.ix-input){
  border-radius:var(--radius-control); border:1px solid var(--line); background:var(--surface); color:var(--text); transition:border-color var(--motion) var(--ease), box-shadow var(--motion) var(--ease);
}
.main-surface :is(.op-input,.us-input,.stx-input,.sup-input,.np-input,.aa-input,.ix-input):focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-soft); }
/* Buttons → token radius + lift + a guaranteed focus ring (a11y) */
.main-surface :is(.op-btn,.us-btn,.stx-btn,.sup-btn,.np-btn,.aa-btn,.ix-btn,.ac-btn){ border-radius:var(--radius-control); transition:transform var(--motion) var(--ease), box-shadow var(--motion) var(--ease), background var(--motion) var(--ease); }
.main-surface :is(.op-btn,.us-btn,.stx-btn,.sup-btn,.np-btn,.aa-btn,.ix-btn,.ac-btn):focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.main-surface :is(.op-btn,.us-btn,.stx-btn,.sup-btn,.np-btn,.aa-btn,.ix-btn,.ac-btn).is-loading{ opacity:.6; pointer-events:none; }
/* Table headers → uppercase token labels (de-databasify) */
.main-surface :is(.op-table,.us-table,.mo-table,.au-table) thead th{
  font-size:11px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--muted-2); background:var(--surface-2); border-bottom:1px solid var(--line);
}
.main-surface :is(.op-table,.us-table,.mo-table,.au-table) tbody tr{ transition:background var(--motion) var(--ease); }
.main-surface :is(.op-table,.us-table,.mo-table,.au-table) tbody tr:hover{ background:var(--surface-2); }

/* ── Invoices: neutralise the rainbow Tailwind tabs into a clean segmented control
   (markup + JS-count IDs untouched; the bespoke colours are simply overridden). ── */
.iv-tabs{ display:flex; flex-wrap:wrap; gap:4px; padding:4px; background:var(--surface-2); border:1px solid var(--line); border-radius:var(--radius-pill); width:100% !important; overflow-x:auto; }
.iv-tabs .iv-tab{ background:transparent !important; color:var(--muted) !important; border-radius:var(--radius-pill) !important; font-weight:700; box-shadow:none !important; white-space:nowrap; }
.iv-tabs .iv-tab:hover{ color:var(--text) !important; background:var(--surface) !important; }
.iv-tabs .iv-tab.is-active{ background:var(--surface) !important; color:var(--accent) !important; box-shadow:var(--shadow-sm) !important; }
.iv-tabs .iv-tab > span{ background:var(--surface-3) !important; color:var(--muted) !important; border:0 !important; }
.iv-tabs .iv-tab.is-active > span{ background:var(--accent-soft) !important; color:var(--accent) !important; }
.iv-tabs .iv-tab-cta{ background:linear-gradient(135deg,var(--accent),var(--accent-up)) !important; color:#fff !important; }
/* Invoices filter inputs → token field look */
.iv-toolbar :is(.iv-input,select,input[type=text],input[type=search]){ border-radius:var(--radius-control) !important; border:1px solid var(--line) !important; background:var(--surface) !important; color:var(--text); }
.iv-statstrip{ flex-wrap:wrap; }

/* ── Value Model (About) ── */
.vm-card{ background:linear-gradient(180deg, var(--surface), var(--surface-2)); }
.vm-head{ display:flex; flex-wrap:wrap; gap:var(--sp-4); align-items:flex-end; justify-content:space-between; }
.vm-figure{ font-family:var(--font-display); font-size:30px; font-weight:800; letter-spacing:-.04em; color:var(--text); }
.vm-figure small{ font-size:13px; font-weight:700; color:var(--muted); letter-spacing:0; }
.vm-bars{ display:grid; gap:9px; margin-top:var(--sp-4); }
.vm-bar-row{ display:grid; grid-template-columns:minmax(140px,1.4fr) 1fr auto; gap:12px; align-items:center; font-size:12.5px; }
.vm-bar-label{ color:var(--text); font-weight:600; }
.vm-bar-track{ height:8px; border-radius:999px; background:var(--surface-3); overflow:hidden; }
.vm-bar-fill{ height:100%; border-radius:999px; background:linear-gradient(90deg,var(--accent),var(--accent-2)); }
.vm-bar-val{ color:var(--muted); font-variant-numeric:tabular-nums; white-space:nowrap; }
.vm-factors{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-4); margin-top:var(--sp-5); }
@media (max-width:680px){ .vm-factors{ grid-template-columns:1fr; } }
.vm-factor h4{ font-size:12px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--muted-2); margin:0 0 8px; }
.vm-factor ul{ margin:0; padding-left:18px; display:grid; gap:5px; }
.vm-factor li{ font-size:12.5px; color:var(--muted); line-height:1.5; }
.vm-disclaimer{ margin-top:var(--sp-5); padding:12px 14px; border-radius:var(--radius-control); background:var(--surface-2); border:1px dashed var(--line); font-size:12px; color:var(--muted-2); line-height:1.6; }

/* ==== v200 MISSION CONTROL 2.0 ==== */
/* ⓘ explain-everything hints (pure CSS, keyboard-focusable) */
.v-hint{ position:relative; display:inline-flex; align-items:center; margin-left:5px; color:var(--muted-2); cursor:help; vertical-align:middle; }
.v-hint:hover, .v-hint:focus-visible{ color:var(--accent); outline:none; }
.v-hint-pop{ position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%); width:260px; background:var(--text); color:var(--surface); font-size:11.5px; font-weight:500; line-height:1.45; padding:9px 11px; border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,.18); opacity:0; pointer-events:none; transition:opacity .12s ease; z-index:60; text-align:left; }
.v-hint:hover .v-hint-pop, .v-hint:focus-visible .v-hint-pop{ opacity:1; }
/* empty states */
.v-empty{ display:flex; flex-direction:column; align-items:center; gap:6px; padding:26px 16px; color:var(--muted); text-align:center; }
.v-empty-ic{ opacity:.4; }
.v-empty-t{ font-weight:700; color:var(--muted); font-size:13.5px; }
.v-empty-s{ font-size:12.5px; max-width:420px; }
/* live pipeline */
.v-pipe{ border:1px solid var(--line); border-radius:16px; background:var(--surface); padding:16px 18px; margin-top:14px; overflow-x:auto; }
.v-pipe-row{ display:flex; align-items:stretch; gap:0; min-width:760px; }
.v-pipe-node{ flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; padding:10px 6px; border-radius:12px; position:relative; }
.v-pipe-node.is-bad{ background:rgba(220,38,38,.06); }
.v-pipe-num{ font-size:20px; font-weight:800; color:var(--text); line-height:1; }
.v-pipe-lbl{ font-size:11px; font-weight:650; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }
.v-pipe-sub{ font-size:10.5px; color:var(--muted-2); }
.v-pipe-arrow{ display:flex; align-items:center; color:var(--muted-2); padding:0 2px; }
.v-pipe-dot{ width:7px; height:7px; border-radius:50%; background:var(--accent); position:absolute; top:8px; right:8px; animation:vPipePulse 2.4s ease infinite; }
.v-pipe-node.is-bad .v-pipe-dot{ background:#dc2626; }
@keyframes vPipePulse{ 0%,100%{ opacity:.25 } 50%{ opacity:1 } }
/* command palette (Ctrl+K) */
.vk-overlay{ position:fixed; inset:0; background:rgba(15,23,42,.45); backdrop-filter:blur(2px); z-index:200; display:flex; align-items:flex-start; justify-content:center; padding-top:12vh; }
.vk-box{ width:min(640px, 92vw); background:var(--surface); border:1px solid var(--line); border-radius:16px; box-shadow:0 24px 64px rgba(0,0,0,.35); overflow:hidden; }
.vk-input{ width:100%; border:0; outline:0; background:transparent; color:var(--text); font-size:15px; padding:16px 18px; border-bottom:1px solid var(--line); }
.vk-list{ max-height:46vh; overflow-y:auto; padding:6px; }
.vk-item{ display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:10px; cursor:pointer; color:var(--text); font-size:13.5px; text-decoration:none; }
.vk-item.is-active, .vk-item:hover{ background:var(--accent-soft, rgba(79,70,229,.08)); }
.vk-kind{ margin-left:auto; font-size:10.5px; font-weight:700; color:var(--muted-2); text-transform:uppercase; letter-spacing:.05em; }
.vk-hintbar{ display:flex; gap:14px; padding:8px 14px; border-top:1px solid var(--line); color:var(--muted-2); font-size:11px; }

/* ==== v201 SUPERCHARGE ==== */
/* tooltips v2 — single fixed popup on body (old .v-hint-pop is disabled below) */
.v-hint-pop{ display:none !important; }
.v-tip{ position:fixed; z-index:400; max-width:300px; background:var(--text); color:var(--surface); font-size:11.5px; font-weight:500; line-height:1.5; padding:9px 11px; border-radius:10px; box-shadow:0 10px 30px rgba(0,0,0,.25); opacity:0; pointer-events:none; transition:opacity .1s ease; }
.v-tip.is-on{ opacity:1; }
/* notification bell */
.vn-wrap{ position:relative; display:inline-flex; }
.vn-bell{ position:relative; }
.vn-count{ position:absolute; top:-4px; right:-5px; background:#dc2626; color:#fff; font-size:10px; font-weight:800; min-width:16px; height:16px; border-radius:8px; display:flex; align-items:center; justify-content:center; padding:0 4px; }
.vn-panel{ display:none; position:absolute; top:calc(100% + 10px); right:0; width:min(380px, 92vw); background:var(--surface); border:1px solid var(--line); border-radius:14px; box-shadow:0 18px 48px rgba(0,0,0,.22); z-index:150; overflow:hidden; }
.vn-panel.is-open{ display:block; }
.vn-head{ display:flex; align-items:center; justify-content:space-between; padding:11px 14px; border-bottom:1px solid var(--line); font-weight:750; font-size:13px; }
.vn-perm{ font-size:11px; color:var(--accent); cursor:pointer; background:none; border:0; }
.vn-list{ max-height:52vh; overflow-y:auto; }
.vn-item{ display:flex; gap:10px; padding:10px 14px; border-bottom:1px solid var(--line); text-decoration:none; color:var(--text); font-size:12.5px; }
.vn-item:hover{ background:var(--accent-soft, rgba(79,70,229,.06)); }
.vn-ic{ flex:0 0 auto; }
.vn-body{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.vn-label{ font-weight:600; }
.vn-time{ font-size:10.5px; color:var(--muted-2); }
.vn-empty{ padding:22px 16px; color:var(--muted); font-size:12.5px; text-align:center; }
/* skeleton shimmer while a live fragment refetches */
.v-skel{ position:relative; opacity:.55; transition:opacity .15s ease; }
/* account doctor drawer */
.vn-drawer-wrap{ position:fixed; inset:0; background:rgba(15,23,42,.35); z-index:300; }
.vn-drawer{ position:absolute; top:0; right:0; bottom:0; width:min(400px, 94vw); background:var(--surface); border-left:1px solid var(--line); box-shadow:-16px 0 48px rgba(0,0,0,.25); padding:18px; overflow-y:auto; }
.vn-dr-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:14px; margin-bottom:10px; word-break:break-all; }
.vn-dr-close{ background:none; border:0; font-size:22px; color:var(--muted); cursor:pointer; line-height:1; }
.vn-dr-status{ display:inline-block; font-weight:800; font-size:12px; padding:4px 10px; border-radius:999px; margin-bottom:8px; }
.vn-sev-ok{ background:#ecfdf5; color:#065f46; } .vn-sev-warn{ background:#fffbeb; color:#92400e; } .vn-sev-bad{ background:#fef2f2; color:#991b1b; }
.vn-dr-hint{ font-size:12.5px; color:var(--muted); margin-bottom:12px; line-height:1.5; }
.vn-dr-row{ display:flex; justify-content:space-between; gap:14px; padding:7px 0; border-bottom:1px dashed var(--line); font-size:12.5px; color:var(--muted); }
.vn-dr-row b{ color:var(--text); text-align:right; word-break:break-all; }
.vn-dr-note{ margin-top:14px; font-size:11px; color:var(--muted-2); line-height:1.5; }

/* ==== v203 EMERALD 2.0 — "Next Level of Intelligence" ==================================
   ONE identity. Token-level: every component drinks from --accent/--accent-up/--accent-soft,
   so the whole app re-skins coherently, light + dark. Fast by design: 120ms transitions,
   transform/opacity only, no heavy blur, prefers-reduced-motion honored. */
/* Tokens moved to assets/theme.css (v204) — the single design DNA file. */
/* keep the era gradient wordmark + chip on the emerald identity */
.mc-brand-id b{ background:var(--v-grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.v-era{ background:var(--v-grad); }

/* ── SIDEBAR 2.0 — premium SaaS navigation ─────────────────────────────────────────────── */
.mc-sidebar{ padding:14px 12px 12px; }
.mc-brand{ display:flex; align-items:center; gap:11px; padding:6px 8px 14px; text-decoration:none; }
.mc-brand-mark{ display:flex; align-items:center; justify-content:center; width:38px; height:38px; flex:0 0 38px;
  border-radius:12px; background:var(--v-grad); color:#fff; box-shadow:0 4px 14px -4px rgba(5,150,105,.55); }
.mc-brand-mark .vicon{ width:22px; height:22px; }
.mc-brand-id b{ font-size:16.5px; letter-spacing:-.01em; }
.mc-brand-id small{ display:block; font-size:10px; letter-spacing:.09em; text-transform:uppercase; color:var(--muted-2); margin-top:1px; }
.mc-nav{ display:flex; flex-direction:column; gap:2px; }
.mc-nav-group{ margin-top:14px; }
.mc-nav-group:first-child{ margin-top:2px; }
.mc-nav-grouplabel{ font-size:10px; font-weight:750; letter-spacing:.1em; text-transform:uppercase; color:var(--muted-2); padding:0 10px 6px; }
.mc-nav-link{ display:flex; align-items:center; gap:10px; padding:8px 10px; margin:1px 0; border-radius:10px;
  font-size:13px; font-weight:560; color:var(--muted); text-decoration:none; position:relative;
  transition:background .12s var(--v-ease), color .12s var(--v-ease); }
.mc-nav-ic{ display:flex; width:20px; flex:0 0 20px; justify-content:center; }
.mc-nav-ic .vicon{ width:18px; height:18px; }
.mc-nav-link:hover{ background:var(--accent-soft); color:var(--text); }
.mc-nav-link.is-active{ background:var(--accent-soft); color:var(--accent); font-weight:700; }
.mc-nav-link.is-active::before{ content:""; position:absolute; left:-6px; top:7px; bottom:7px; width:3px;
  border-radius:3px; background:var(--v-grad); }
.mc-nav-link.is-active .mc-nav-ic{ color:var(--accent); }
.mc-nav-dot{ width:7px; height:7px; border-radius:50%; background:var(--accent); margin-left:auto; box-shadow:0 0 0 3px var(--accent-soft); }
.mc-sidebar-foot{ margin-top:auto; padding-top:12px; border-top:1px solid var(--line); }
.mc-syschip{ border-radius:10px; font-weight:650; }
.mc-syschip.is-ok{ background:var(--accent-soft); color:var(--accent); }
.mc-foot-btn{ border-radius:9px; transition:background .12s var(--v-ease), color .12s var(--v-ease); }
.mc-foot-btn:hover{ background:var(--accent-soft); color:var(--accent); }
.mc-version{ font-size:10px; color:var(--muted-2); letter-spacing:.04em; }

/* ── Premium surface system — fast, clean, coherent ────────────────────────────────────── */
.v-kpi, .wk-card, .vm-card, .ab-card{ box-shadow:var(--v-shadow-sm); transition:box-shadow .14s var(--v-ease), transform .14s var(--v-ease); }
.v-kpi:hover, .wk-card:hover{ box-shadow:var(--v-shadow-md); transform:translateY(-1px); }
.v-kpi-value, .v-pipe-num, .vm-figure, .iv-statstrip b, .rl-ccPill{ font-variant-numeric:tabular-nums; }
.v-pipe-node .v-pipe-num{ background:var(--v-grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.v-pipe-arrow{ position:relative; min-width:26px; }
.v-pipe-arrow::after{ content:""; position:absolute; top:50%; left:2px; width:5px; height:5px; margin-top:-2.5px;
  border-radius:50%; background:var(--accent); opacity:0; animation:vFlow 2.8s linear infinite; }
@keyframes vFlow{ 0%{ left:2px; opacity:0 } 15%{ opacity:.9 } 85%{ opacity:.9 } 100%{ left:calc(100% - 6px); opacity:0 } }
@keyframes vBump{ 0%{transform:scale(1)} 35%{transform:scale(1.05)} 100%{transform:scale(1)} }
.v-bump{ animation:vBump .4s var(--v-ease); }
:is(a,button,input,select,textarea,[tabindex]):focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:6px; }
.view-title{ letter-spacing:-.015em; }
h1.view-title{ font-weight:750; }
/* topbar chips + live dot on the identity */
.v-live-dot{ background:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
/* login 2.0 — emerald glow, stronger card, no clutter */
.lg-aurora{ position:fixed; inset:0; pointer-events:none; background:
  radial-gradient(640px 420px at 10% -10%, rgba(5,150,105,.16), transparent 70%),
  radial-gradient(720px 480px at 110% 110%, rgba(52,211,153,.13), transparent 72%); }
:is(.lg-card, .login-card){ box-shadow:0 18px 60px -18px rgba(6,78,59,.28), var(--v-shadow-sm); border-color:rgba(5,150,105,.18); }
:is(.lg-input):focus{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
:is(.lg-submit, .lg-btn-primary){ background:var(--v-grad); border:0; }
/* respect users who prefer stillness */
@media (prefers-reduced-motion: reduce){
  .v-pipe-arrow::after{ animation:none; opacity:0; }
  .v-bump{ animation:none; }
  .v-kpi:hover, .wk-card:hover{ transform:none; }
}

/* ==== v204 VELORA OS — the shell: desk, window, icon rail, command strip ==================
   The app reads as a premium OS window floating on a desk. Rail = icons only on desktop
   (labels via the fixed tooltip engine — overlap-proof by construction); on mobile the SAME
   markup opens as the classic labeled drawer. All values come from assets/theme.css. */
body{ font-family:var(--font-body); }
:is(h1,h2,h3,.view-title,.v-kpi-value,.v-pipe-num,.vm-figure,.mc-brand-id b,.lg-headline,.ab-h1){ font-family:var(--font-display); }
.app-shell{ background:var(--os-desk); background-image:var(--os-desk-glow); }
.content-zone{ background:var(--surface); border-radius:var(--os-window-radius); box-shadow:var(--v-shadow-window), 0 0 0 1px var(--os-window-ring); margin:14px 14px 14px 0; overflow:hidden; }
@media (max-width:880px){ .content-zone{ margin:0; border-radius:0; box-shadow:none; } }

/* ── the RAIL (desktop ≥881px) ─────────────────────────────────────────────────────────── */
@media (min-width:881px){
  .workspace-layout{ grid-template-columns:var(--os-rail-w) minmax(0,1fr) !important; }
  .mc-sidebar.os-rail{ width:var(--os-rail-w); padding:14px 0 12px; background:transparent; border-right:0; align-items:center; height:100vh; }
  .os-rail .mc-brand{ padding:0 0 14px; justify-content:center; }
  .os-rail .mc-brand-id{ display:none; }
  .os-rail .mc-brand-mark{ width:42px; height:42px; flex:0 0 42px; border-radius:13px; }
  .os-rail .mc-nav{ width:100%; align-items:center; gap:3px; overflow-y:auto; scrollbar-width:none; }
  .os-rail .mc-nav::-webkit-scrollbar{ display:none; }
  .os-rail .mc-nav-group{ margin-top:0; width:100%; display:flex; flex-direction:column; align-items:center; gap:3px; padding-top:10px; position:relative; }
  .os-rail .mc-nav-group + .mc-nav-group::before{ content:""; width:24px; height:1px; background:var(--line); position:absolute; top:4px; left:50%; transform:translateX(-50%); }
  .os-rail .mc-nav-grouplabel{ display:none; }
  .os-rail .mc-nav-link{ width:44px; height:44px; padding:0; margin:0; justify-content:center; border-radius:13px; color:var(--muted); }
  .os-rail .mc-nav-link::before{ display:none; }
  .os-rail .mc-nav-ic{ width:auto; flex:none; }
  .os-rail .mc-nav-ic .vicon{ width:21px; height:21px; }
  .os-rail .mc-nav-txt{ display:none; }
  .os-rail .mc-nav-link:hover{ background:var(--accent-soft); color:var(--accent); }
  .os-rail .mc-nav-link.is-active{ background:var(--v-grad); color:#fff; box-shadow:0 6px 16px -6px rgba(5,150,105,.55); }
  .os-rail .mc-nav-link.is-active .mc-nav-ic{ color:#fff; }
  .os-rail .mc-nav-dot{ position:absolute; top:6px; right:6px; margin:0; box-shadow:none; }
  .os-rail .mc-sidebar-foot{ width:100%; border-top:0; padding:10px 0 0; display:flex; flex-direction:column; align-items:center; gap:8px; }
  .os-rail .mc-syschip{ width:12px; height:12px; padding:0; border-radius:50%; overflow:hidden; color:transparent; justify-content:center; }
  .os-rail .mc-syschip *{ display:none; }
  .os-rail .mc-syschip.is-ok{ background:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
  .os-rail .mc-syschip.is-warn{ background:#f59e0b; box-shadow:0 0 0 3px #fef3c7; }
  .os-rail .mc-user-row{ flex-direction:column; gap:8px; }
  .os-rail .mc-user-name{ display:none; }
  .os-rail .mc-version{ writing-mode:vertical-rl; font-size:9px; opacity:.55; }
}

/* ── the COMMAND STRIP (topbar inside the window) ──────────────────────────────────────── */
.os-strip{ display:grid; grid-template-columns:1fr minmax(220px,440px) 1fr; align-items:center; gap:14px; padding:12px 18px; border-bottom:1px solid var(--line); }
.os-strip .mc-topbar-title{ display:flex; align-items:center; gap:10px; min-width:0; }
.os-strip .view-title{ font-size:16px; font-weight:800; letter-spacing:-.015em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.os-strip .palette-trigger{ display:flex; width:100%; align-items:center; gap:9px; padding:9px 14px; border-radius:12px;
  border:1px solid var(--line); background:var(--surface-2); color:var(--muted); font-size:12.5px; cursor:pointer;
  transition:border-color var(--v-fast) var(--v-ease), box-shadow var(--v-fast) var(--v-ease); }
.os-strip .palette-trigger:hover{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); color:var(--text); }
.os-strip .palette-trigger .palette-hint{ flex:1; text-align:left; }
.os-strip .palette-trigger kbd{ font-size:10px; border:1px solid var(--line); border-radius:5px; padding:1px 5px; color:var(--muted-2); background:var(--surface); }
.os-strip .mc-topbar-actions{ justify-content:flex-end; display:flex; align-items:center; gap:8px; }
@media (max-width:880px){ .os-strip{ grid-template-columns:auto 1fr auto; } .os-strip .palette-hint{ display:none; } }

/* ═══════════════════════════════════════════════════════════════════════════
   v206 OS 2.1 SYSTEM — one component family, skinned to the theme.css DNA.
   Strategy: RESTYLE the existing component classes (v-card, v-kpi, v-pill,
   v-segmented, v-table2, v-btn, v-empty, v-page-header) so every view lifts at
   once, and ADD only the missing primitives (os-chip, os-ava, os-jour, os-frow,
   os-confirm). Conservative on purpose: colors/radius/shadow/type only — no
   display/layout changes to existing classes, so nothing shifts or breaks.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Cards ── */
.v-card{border:1px solid var(--line)!important;border-radius:var(--v-radius,14px)!important;
  background:var(--surface,#fff)!important;box-shadow:var(--v-shadow-sm)!important}
.v-card-hover{transition:transform var(--v-fast,120ms) var(--v-ease,ease),box-shadow var(--v-fast,120ms) var(--v-ease,ease)}
.v-card-hover:hover{transform:translateY(-1px);box-shadow:var(--v-shadow-md)!important}

/* ── Page header ── */
.v-page-header{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.v-ph-eyebrow{font-family:var(--font-display);font-weight:800;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent);margin-bottom:3px}
.v-ph-title{font-family:var(--font-display);font-weight:800;letter-spacing:-.015em;font-size:20px;margin:0;color:var(--text)}
.v-ph-sub{font-size:12.5px;color:var(--muted-2);margin:3px 0 0}
.v-ph-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}

/* ── KPI ── */
.v-kpi{border-color:var(--line)!important;border-radius:var(--v-radius,14px)!important;box-shadow:var(--v-shadow-sm)!important}
.v-kpi-value{font-family:var(--font-display)!important;font-weight:800!important;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.v-kpi-label{font-family:var(--font-display);font-weight:800;font-size:10px!important;letter-spacing:.09em;text-transform:uppercase;color:var(--muted-2)!important}

/* ── Segmented ── */
.v-segmented{background:color-mix(in srgb, var(--accent-soft) 45%, var(--surface-2, #eef3f0))!important;
  border-radius:12px!important;padding:3px!important;border:0!important;box-shadow:inset 0 0 0 1px var(--os-window-ring,rgba(15,42,32,.05))!important}
.v-seg{border-radius:9px!important;font-weight:600!important;color:var(--muted)!important;transition:color var(--v-fast,120ms) var(--v-ease,ease)}
.v-seg:hover{color:var(--text)!important}
.v-seg.is-active{background:var(--surface,#fff)!important;color:var(--accent)!important;box-shadow:var(--v-shadow-sm)!important}
.v-seg-count{font-variant-numeric:tabular-nums}

/* ── Pills (tones stay semantic; shape unified) ── */
.v-pill{border-radius:999px!important;font-weight:700!important;letter-spacing:.02em}

/* ── Tables ── */
.v-table-wrap{border:1px solid var(--line)!important;border-radius:var(--v-radius,14px)!important;
  overflow:hidden;box-shadow:var(--v-shadow-sm)!important;background:var(--surface,#fff)}
.v-table2 thead th{font-family:var(--font-display)!important;font-weight:800!important;font-size:9.5px!important;
  letter-spacing:.09em;text-transform:uppercase;color:var(--muted-2)!important;background:var(--surface-2,#fbfdfc)!important}
.v-table2 tbody tr{transition:background var(--v-fast,120ms) var(--v-ease,ease)}
.v-table2 tbody tr:hover{background:color-mix(in srgb, var(--accent-soft) 30%, var(--surface,#fff))}

/* ── Buttons ── */
.v-btn{border-radius:10px!important;font-weight:600!important;box-shadow:var(--v-shadow-sm)}
.v-btn-ok{background:var(--v-grad,linear-gradient(115deg,#047857,#059669 55%,#34d399))!important;
  border:0!important;color:#fff!important;font-weight:700!important;box-shadow:var(--v-shadow-md)!important}
.v-btn-ok:hover{filter:brightness(1.06)}
.v-btn-danger{background:none!important;color:#b42335!important;border:1px dashed rgba(190,35,53,.35)!important;box-shadow:none!important}
.v-btn-danger:hover{background:#fef2f2!important;border-style:solid!important}

/* ── Empty states + illustrations (sprite ill-* already inlined on every page) ── */
.v-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;padding:26px 12px}
.v-empty .villu{width:150px;height:102px;margin-bottom:8px}
.v-empty-title,.v-empty-t{font-family:var(--font-display);font-weight:800;font-size:14.5px;color:var(--text)}
.v-empty-text,.v-empty-s{font-size:12.5px;color:var(--muted);max-width:42ch}

/* ── NEW: semantic chips (amount / why-not-payable / duplicate) ── */
.os-chip{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:700;
  border-radius:999px;padding:3px 9px;white-space:nowrap}
.os-chip .vicon{width:11px;height:11px}
.os-chip-pay{background:var(--accent-soft);color:#04684a;border:1px solid rgba(5,150,105,.25);font-variant-numeric:tabular-nums}
.os-chip-why{background:var(--accent-2-soft,#fffbeb);color:#92600a;border:1px solid rgba(245,158,11,.3)}
.os-chip-dup{background:#fef2f2;color:#b42335;border:1px solid rgba(190,35,53,.25)}
.os-chip-mut{background:var(--surface-2,#f2f5f3);color:var(--muted);border:1px solid var(--line)}
button.os-chip{cursor:pointer}
button.os-chip:hover{filter:brightness(.97)}
button.os-chip:focus-visible{outline:2px solid var(--accent);outline-offset:1px}

/* ── NEW: supplier avatar ── */
.os-ava{width:34px;height:34px;border-radius:10px;flex-shrink:0;display:inline-flex;align-items:center;
  justify-content:center;background:var(--v-grad,linear-gradient(115deg,#047857,#059669 55%,#34d399));
  color:#fff;font-family:var(--font-display);font-weight:800;font-size:13px}
.os-ava-mut{background:var(--surface-2,#e7ede9);color:var(--muted)}
.os-ava-sm{width:26px;height:26px;border-radius:8px;font-size:11px}

/* ── NEW: journey dots (delivered → opened → pickup) ── */
.os-jour{display:inline-flex;gap:3px;align-items:center;vertical-align:middle}
.os-jour i{width:8px;height:8px;border-radius:99px;background:var(--accent);font-style:normal}
.os-jour i.off{background:var(--line)}
.os-jour i.bad{background:#b42335}

/* ── NEW: settings/detail row (label + control) ── */
.os-frow{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 0;border-bottom:1px solid var(--line);font-size:12.5px}
.os-frow:last-child{border-bottom:0}
.os-frow small{display:block;color:var(--muted-2);font-size:11px;margin-top:1px;font-weight:400}

/* ── NEW: OS confirm dialog (replaces native confirm() on plain forms) ── */
.os-confirm-backdrop{position:fixed;inset:0;background:rgba(10,24,18,.45);backdrop-filter:blur(4px);
  z-index:1200;display:flex;align-items:center;justify-content:center;padding:16px}
.os-confirm{background:var(--surface,#fff);border:1px solid var(--os-window-ring,rgba(15,42,32,.1));
  border-radius:var(--os-window-radius,18px);box-shadow:var(--v-shadow-window);width:min(400px,94vw);padding:22px}
.os-confirm h3{font-family:var(--font-display);font-weight:800;font-size:15px;margin:0 0 6px;color:var(--text)}
.os-confirm p{font-size:13px;color:var(--muted);margin:0 0 16px}
.os-confirm-acts{display:flex;gap:8px;justify-content:flex-end}
.os-confirm-acts button{border-radius:10px;padding:8px 14px;font-size:12.5px;font-weight:600;cursor:pointer}
.os-confirm-cancel{background:var(--surface,#fff);border:1px solid var(--line);color:var(--text)}
.os-confirm-go{background:var(--v-grad);border:0;color:#fff;font-weight:700}
.os-confirm-go.danger{background:#b42335}
.os-confirm-acts button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ── Dark mode ── */
html[data-theme=dark] .v-segmented{background:rgba(255,255,255,.05)!important}
html[data-theme=dark] .v-seg.is-active{background:var(--surface-3,#18201c)!important;color:var(--accent-up,#34d399)!important}
html[data-theme=dark] .v-table2 thead th{background:var(--surface-2,#141b18)!important}
html[data-theme=dark] .v-table2 tbody tr:hover{background:rgba(16,185,129,.06)}
html[data-theme=dark] .os-chip-pay{background:var(--accent-soft,#0f2a20);color:var(--accent-up,#34d399)}
html[data-theme=dark] .os-chip-why{background:rgba(245,158,11,.1);color:#f5b04b;border-color:rgba(245,158,11,.25)}
html[data-theme=dark] .os-chip-dup{background:rgba(190,35,53,.12);color:#f08c9a;border-color:rgba(190,35,53,.3)}
html[data-theme=dark] .os-chip-mut{background:var(--surface-3,#18201c);color:var(--muted);border-color:var(--line)}
html[data-theme=dark] .os-ava-mut{background:var(--surface-3,#18201c);color:var(--muted)}
html[data-theme=dark] .os-frow{border-bottom-color:var(--line)}
html[data-theme=dark] .os-confirm{background:var(--surface,#101614)}
html[data-theme=dark] .os-confirm-cancel{background:var(--surface-3,#18201c);border-color:var(--line);color:var(--text)}
html[data-theme=dark] .v-btn-danger{color:#f08c9a!important;border-color:rgba(190,35,53,.4)!important}
html[data-theme=dark] .v-btn-danger:hover{background:rgba(190,35,53,.12)!important}

@media (prefers-reduced-motion:reduce){
  .v-card-hover,.v-seg,.v-table2 tbody tr,button.os-chip{transition:none}
  .v-card-hover:hover{transform:none}
}

/* ═══════════════════════════════════════════════════════════════════════════
   v205 WORKBENCH — the hold modal joins the Velora OS design language.
   Tokens come from assets/theme.css (the design DNA). Placed LAST in this file
   so equal-specificity+!important rules above are overridden by cascade order.
   New structure/behavior classes are hvx-*; legacy hooks untouched.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── The window ── */
#holdViewModal .invoices-modal-shell{
  border-radius:var(--os-window-radius,18px)!important;
  border:1px solid var(--os-window-ring,rgba(15,42,32,.10))!important;
  box-shadow:var(--v-shadow-window,0 24px 70px -28px rgba(15,42,32,.30))!important;
  background:#fff!important;
}
#holdViewModal > [data-modal-overlay]{background:rgba(10,24,18,.45)!important;backdrop-filter:blur(6px)}

/* ── Header ── */
#holdViewModal .hvx-head{
  background:linear-gradient(180deg,#fbfdfc,#fff)!important;
  border-bottom:1px solid var(--line,#e2e9e5)!important;
  padding:16px 20px 13px!important;
}
#holdViewModal .hvx-title{
  font-family:var(--font-display,'Manrope',sans-serif);font-weight:800;letter-spacing:-.01em;
  font-size:17px;color:var(--text,#12241c);
}
#holdViewModal .hvx-chips > span{font-weight:600}
#holdViewModal .hvx-chip-amount{background:var(--accent-soft,#e9f9f1);color:#04684a;border:1px solid rgba(5,150,105,.25)}
#holdViewModal .hvx-chip-amount b{font-weight:700;font-variant-numeric:tabular-nums}
#holdViewModal .hvx-chip-amount.warn{background:var(--accent-2-soft,#fffbeb);color:#92600a;border-color:rgba(245,158,11,.35)}
#holdViewModal .hvx-chip-amount.bad{background:#fef2f2;color:#b42335;border-color:rgba(190,35,53,.25)}
#holdViewModal .hvx-chip-dup{background:#fef2f2;color:#b42335;border:1px solid rgba(190,35,53,.25);cursor:pointer}
#holdViewModal .hvx-headbtn{transition:background var(--v-fast,120ms) var(--v-ease,ease)}

/* ── Recipient chips (JS-built mirror of the raw rows) ── */
#holdViewModal .hvx-rcpt-chips{display:flex;flex-direction:column;gap:5px}
#holdViewModal .hvx-rcpt.hvx-chips-on #hv-recipients{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
#holdViewModal .hvx-rcpt.hvx-chips-on #hv-rcpt-chips[hidden]{display:flex}
#holdViewModal .hvx-rr{display:flex;align-items:center;flex-wrap:wrap;gap:5px}
#holdViewModal .hvx-rk{width:34px;flex-shrink:0;font-size:10px;font-weight:600;color:var(--muted-2,#8aa094);text-transform:uppercase;letter-spacing:.06em}
#holdViewModal .hvx-addr{
  display:inline-flex;align-items:center;gap:6px;max-width:100%;
  background:#fff;border:1px solid var(--line,#e2e9e5);border-radius:999px;
  padding:2.5px 10px 2.5px 3px;font-size:11.5px;color:var(--text,#12241c);
  box-shadow:var(--v-shadow-sm,0 1px 2px rgba(16,44,34,.06));cursor:copy;
  transition:border-color var(--v-fast,120ms) var(--v-ease,ease);
}
#holdViewModal .hvx-addr:hover{border-color:var(--accent,#059669)}
#holdViewModal .hvx-addr i{
  font-style:normal;width:18px;height:18px;border-radius:999px;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--accent-soft,#e9f9f1);color:var(--accent,#059669);
  font-size:9.5px;font-weight:700;font-family:var(--font-display,'Manrope',sans-serif);
}
#holdViewModal .hvx-addr em{font-style:normal;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── Side rail: tabs + panels ── */
#holdViewModal .invoices-modal-side{background:#fbfdfc!important;border-color:var(--line,#e2e9e5)!important}
#holdViewModal .hvx-tabs{
  position:sticky;top:-18px;z-index:5;margin:-6px 0 12px;
  display:flex;gap:2px;background:#eef3f0;border-radius:12px;padding:3px;
  box-shadow:inset 0 0 0 1px rgba(15,42,32,.04);
}
#holdViewModal .hvx-tabs[hidden]{display:none}
#holdViewModal .hvx-side.hvx-tabs-on .hvx-tabs{display:flex}
#holdViewModal .hvx-tab{
  flex:1;display:inline-flex;align-items:center;justify-content:center;gap:5px;
  border:0;background:none;border-radius:9px;padding:6px 4px;cursor:pointer;
  font-size:11px;font-weight:600;color:var(--muted,#5c6f66);
  transition:background var(--v-fast,120ms) var(--v-ease,ease),color var(--v-fast,120ms) var(--v-ease,ease);
}
#holdViewModal .hvx-tab .vicon{width:13px;height:13px}
#holdViewModal .hvx-tab span{white-space:nowrap}
@media (max-width:1500px){#holdViewModal .hvx-tab span{display:none}#holdViewModal .hvx-tab .vicon{width:15px;height:15px}}
#holdViewModal .hvx-tab:hover{color:var(--text,#12241c)}
#holdViewModal .hvx-tab.on{background:#fff;color:var(--accent,#047857);box-shadow:var(--v-shadow-sm,0 1px 2px rgba(16,44,34,.08))}
#holdViewModal .hvx-tab:focus-visible{outline:2px solid var(--accent,#059669);outline-offset:1px}
#holdViewModal .hvx-side.hvx-tabs-on .hvx-panel{display:none}
#holdViewModal .hvx-side.hvx-tabs-on .hvx-panel.on{display:block}

/* ── Cards ── */
#holdViewModal .hvx-card{
  border:1px solid var(--line,#e2e9e5)!important;border-radius:var(--v-radius,14px)!important;
  box-shadow:var(--v-shadow-sm,0 1px 2px rgba(16,44,34,.06))!important;background:#fff!important;
}
#holdViewModal .hvx-card-title{
  font-family:var(--font-display,'Manrope',sans-serif);font-weight:800;font-size:11px!important;
  letter-spacing:.08em;text-transform:uppercase;color:var(--muted,#5c6f66)!important;
}
#holdViewModal .pdf-intel-box.hvx-card{background:#fff!important;border-color:var(--line,#e2e9e5)!important}

/* ── Buttons: one clear hierarchy ── */
#holdViewModal .hvx-btn-release{
  background:var(--v-grad,linear-gradient(115deg,#047857,#059669 55%,#34d399))!important;
  border:0!important;box-shadow:var(--v-shadow-md,0 6px 18px -6px rgba(6,78,59,.20))!important;
  font-weight:700!important;border-radius:11px!important;
}
#holdViewModal .hvx-btn-release:hover{filter:brightness(1.06)}
#holdViewModal .hvx-btn-pin{
  background:#fff!important;color:var(--text,#12241c)!important;
  border:1px solid var(--line,#e2e9e5)!important;border-radius:11px!important;font-weight:600!important;
}
#holdViewModal .hvx-btn-pin:hover{border-color:var(--accent,#059669)!important;background:var(--accent-soft,#e9f9f1)!important;color:#04684a!important}
#holdViewModal .hvx-btn-delete{
  background:none!important;color:#b42335!important;border:1px dashed rgba(190,35,53,.35)!important;
  border-radius:11px!important;box-shadow:none!important;font-weight:600!important;
}
#holdViewModal .hvx-btn-delete:hover{background:#fef2f2!important;border-style:solid!important}
#holdViewModal .hvx-btn-changed{
  background:#0d3327!important;border:0!important;border-radius:11px!important;font-weight:700!important;
}
#holdViewModal .hvx-btn-changed:hover{background:#0a5c42!important}

/* ── Inputs ── */
#holdViewModal .hvx-input{border-color:var(--line,#e2e9e5)!important;border-radius:9px!important}
#holdViewModal .hvx-input:focus{
  border-color:var(--accent,#059669)!important;
  box-shadow:0 0 0 3px rgba(5,150,105,.14)!important;
}
#holdViewModal .hvx-input[data-dirty="1"]{border-color:var(--accent-2,#f59e0b)!important;background:var(--accent-2-soft,#fffbeb)}
#holdViewModal .hvx-mut{color:var(--muted-2,#8aa094);font-weight:400;text-transform:none;letter-spacing:0}

/* ── Supplier panel ── */
#holdViewModal .hvx-sup-head{display:flex;align-items:center;gap:9px;margin-bottom:10px}
#holdViewModal .hvx-sup-ava{
  width:32px;height:32px;border-radius:10px;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--v-grad,linear-gradient(115deg,#047857,#059669 55%,#34d399));color:#fff;
  font-family:var(--font-display,'Manrope',sans-serif);font-weight:800;font-size:13px;
}
#holdViewModal .hvx-sup-name{min-width:0}
#holdViewModal .hvx-sup-name b{display:block;font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#holdViewModal .hvx-sup-name small{display:block;font-size:11px;color:var(--muted,#5c6f66);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#holdViewModal .hvx-sup-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:10px}
#holdViewModal .hvx-sup-stat{border:1px solid var(--line,#e2e9e5);border-radius:10px;padding:7px 9px;background:#fbfdfc}
#holdViewModal .hvx-sup-stat b{display:block;font-size:13px;font-variant-numeric:tabular-nums;font-family:var(--font-display,'Manrope',sans-serif);font-weight:800}
#holdViewModal .hvx-sup-stat span{display:block;font-size:9.5px;color:var(--muted-2,#8aa094);text-transform:uppercase;letter-spacing:.06em;margin-top:1px}
#holdViewModal .hvx-sup-dup{
  display:flex;gap:7px;align-items:flex-start;margin-bottom:10px;
  border-left:3px solid #b42335;background:#fef2f2;border-radius:0 9px 9px 0;
  padding:8px 10px;font-size:11.5px;color:#8f1d2c;
}
#holdViewModal .hvx-sup-list{display:flex;flex-direction:column;gap:6px}
#holdViewModal .hvx-sup-row{
  display:flex;align-items:center;gap:8px;border:1px solid var(--line,#e2e9e5);
  border-radius:10px;padding:7px 9px;background:#fff;font-size:11.5px;
}
#holdViewModal .hvx-sup-row .st{
  flex-shrink:0;font-size:9.5px;font-weight:700;border-radius:999px;padding:2px 7px;
  text-transform:uppercase;letter-spacing:.04em;
}
#holdViewModal .hvx-sup-row .st.released{background:var(--accent-soft,#e9f9f1);color:#04684a}
#holdViewModal .hvx-sup-row .st.pending{background:var(--accent-2-soft,#fffbeb);color:#92600a}
#holdViewModal .hvx-sup-row .st.other{background:#f2f5f3;color:#5c6f66}
#holdViewModal .hvx-sup-row .sj{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text,#12241c)}
#holdViewModal .hvx-sup-row .amt{flex-shrink:0;font-variant-numeric:tabular-nums;font-weight:600;color:#04684a}
#holdViewModal .hvx-sup-row .dt{flex-shrink:0;color:var(--muted-2,#8aa094);font-size:10.5px}
#holdViewModal .hvx-sup-fleet{margin-top:9px;font-size:11px;color:var(--muted,#5c6f66)}
#holdViewModal .hvx-sup-empty{font-size:12px;color:var(--muted,#5c6f66)}

/* ── Keyboard bar ── */
#holdViewModal .hvx-foot{
  display:flex;flex-wrap:wrap;gap:14px;align-items:center;
  border-top:1px solid var(--line,#e2e9e5);background:#fbfdfc;
  padding:8px 20px;font-size:11px;color:var(--muted,#5c6f66);
}
#holdViewModal .hvx-foot[hidden]{display:none}
#holdViewModal .hvx-foot kbd{
  font-family:inherit;font-size:10px;font-weight:600;color:var(--text,#12241c);
  background:#fff;border:1px solid var(--line,#e2e9e5);border-bottom-width:2px;
  border-radius:5px;padding:1px 5px;margin-right:1px;
}
#holdViewModal .hvx-foot .rr-armed{color:#b42335;font-weight:700}
@media (max-width:768px){#holdViewModal .hvx-foot{display:none!important}}

/* ── Message pane ── */
#holdViewModal .invoices-modal-main{background:#fff!important}
#holdViewModal .hvx-label{
  font-family:var(--font-display,'Manrope',sans-serif);font-weight:800;
  letter-spacing:.12em;color:var(--muted-2,#8aa094)!important;
}

/* ── Dark mode ── */
html[data-theme=dark] #holdViewModal .invoices-modal-shell{
  background:var(--surface,#101614)!important;border-color:var(--os-window-ring,rgba(255,255,255,.07))!important;
}
html[data-theme=dark] #holdViewModal .hvx-head{background:linear-gradient(180deg,var(--surface-2,#141b18),var(--surface,#101614))!important;border-bottom-color:var(--line)!important}
html[data-theme=dark] #holdViewModal .hvx-title{color:var(--text)}
html[data-theme=dark] #holdViewModal .invoices-modal-side{background:var(--surface-2,#141b18)!important}
html[data-theme=dark] #holdViewModal .invoices-modal-main{background:var(--surface,#101614)!important}
html[data-theme=dark] #holdViewModal .hvx-card,
html[data-theme=dark] #holdViewModal .pdf-intel-box.hvx-card{background:var(--surface-3,#18201c)!important;border-color:var(--line)!important}
html[data-theme=dark] #holdViewModal .hvx-tabs{background:rgba(255,255,255,.05)}
html[data-theme=dark] #holdViewModal .hvx-tab.on{background:var(--surface-3,#18201c);color:var(--accent-up,#34d399)}
html[data-theme=dark] #holdViewModal .hvx-addr{background:var(--surface-3,#18201c);border-color:var(--line);color:var(--text)}
html[data-theme=dark] #holdViewModal .hvx-btn-pin{background:var(--surface-3,#18201c)!important;color:var(--text)!important;border-color:var(--line)!important}
html[data-theme=dark] #holdViewModal .hvx-btn-changed{background:var(--accent-soft,#0f2a20)!important;color:var(--accent-up,#34d399)!important}
html[data-theme=dark] #holdViewModal .hvx-sup-stat,
html[data-theme=dark] #holdViewModal .hvx-sup-row{background:var(--surface-3,#18201c);border-color:var(--line)}
html[data-theme=dark] #holdViewModal .hvx-sup-row .sj{color:var(--text)}
html[data-theme=dark] #holdViewModal .hvx-foot{background:var(--surface-2,#141b18);border-top-color:var(--line)}
html[data-theme=dark] #holdViewModal .hvx-foot kbd{background:var(--surface-3,#18201c);border-color:var(--line);color:var(--text)}
html[data-theme=dark] #holdViewModal .hvx-input[data-dirty="1"]{background:rgba(245,158,11,.08)}

@media (prefers-reduced-motion:reduce){
  #holdViewModal .hvx-addr,#holdViewModal .hvx-tab,#holdViewModal .hvx-headbtn{transition:none}
}