/* ─────────────────────────────────────────────────────────────
   UBO Hunter — v2 (Helios dark workspace)
   Top header + categorized sidebar + dense dossier
   ───────────────────────────────────────────────────────────── */

:root {
  /* ─────────────────────────────────────────────────────────────
     NL AI — canonical design-system tokens.
     Dark-first, calm, monotone. Near-black warm base, restrained
     accents used only as semantic signals. Single brand family
     (Inter). The signature interactive surface is the cream-fill
     pill (--selected-fill), reserved for active nav + primary CTAs.
     ───────────────────────────────────────────────────────────── */

  /* ─── Core accents (semantic) — solid + text-tone + dim ───────────
     Canonical NL design-system palette. The ONLY hues allowed in
     status/risk surfaces, pills, badges, avatars, charts, icons,
     tinted backgrounds, focus rings — across the product.
     Derive tinted treatments from the solid via opacity (see scale
     below). Never introduce new semantic hues. */
  --nl-rose:          #D94040;  /* critical / high risk             */
  --nl-rose-dim:      #A92F2F;
  --nl-orange:        #F07030;  /* warning / elevated risk          */
  --nl-orange-dim:    #C25622;
  --nl-yellow:        #E5B23A;  /* medium risk (DS yellow token)    */
  --nl-yellow-dim:    #B58524;  /*  derived darker variant          */
  --nl-teal:          #1DB88A;  /* positive / safe / cleared        */
  --nl-teal-dim:      #178D6A;
  --nl-blue:          #3D6FE8;  /* primary / system blue / link     */
  --nl-blue-dim:      #2F56B8;
  --nl-sky:           #6BC4F0;  /* informational / regulatory ref   */
  --nl-sky-dim:       #4E9BC2;

  --nl-black:         #0D0D10;
  --nl-white:         #F2F2F0;

  /* ─── Background tiers — calm, monotone, faintly warm ─── */
  --page:             #0D0D10;   /* page / canvas */
  --page-faint:       #101013;   /* topbar chrome — a hair off base */
  --surface:          #131316;   /* primary card / panel */
  --surface-faint:    #1A1A1F;   /* hover / secondary surface */
  --surface-strong:   #1D1D21;   /* elevated / avatars / modals */
  --surface-action:   rgba(61, 111, 232, 0.10);

  /* ─── Text hierarchy — soft warm whites, never pure #FFF ─── */
  --fg-strong:        #F2F2F0;
  --fg-primary:       #C2C2C0;
  --fg-faint:         #9B9BA1;
  --fg-disabled:      #70707A;
  --fg-action:        #7C9EF0;   /* link / action text (blue, lifted) */
  --fg-on-dark:       #F2F2F0;

  /* ─── Borders — barely-visible translucent hairlines ─── */
  --border-strong:    rgba(255, 255, 255, 0.12);
  --border-primary:   rgba(255, 255, 255, 0.06);
  --border-faint:     rgba(255, 255, 255, 0.04);
  --border-action:    var(--nl-blue);

  --rail-bg:          #0D0D10;
  --rail-bg-deep:     #050507;
  --rail-fg:          #C2C2C0;
  --rail-fg-active:   #0D0D10;

  /* ─── Signature selected fill — cream pill ─── */
  --selected-fill:    linear-gradient(180deg, #F5F5F2 0%, #E0E0DC 100%);
  --selected-fg:      #0D0D10;
  --selected-shadow:  inset 0 1px 0 rgba(255,255,255,0.5),
                      0 6px 16px -10px rgba(0,0,0,0.6);

  /* back-compat aliases */
  --bg:           var(--page);
  --bg-deep:      #050507;       /* sunken wells + graph canvas */
  --surface-1:    var(--surface);
  --surface-2:    var(--surface-faint);
  --surface-3:    var(--surface-strong);
  --hairline:     var(--border-primary);
  --hairline-2:   var(--border-strong);
  --rule:         var(--border-faint);
  --ink:          var(--fg-strong);
  --ink-2:        var(--fg-primary);
  --ink-3:        var(--fg-faint);
  --ink-4:        var(--fg-disabled);
  --ink-5:        var(--border-primary);

  /* brand accent ('brass' kept as a name — resolves to blue) */
  --brass:        var(--nl-blue);
  --brass-dim:    var(--nl-blue-dim);
  --brass-bg:     rgba(61, 111, 232, 0.14);

  /* risk palette — bound DIRECTLY to canonical DS solids.
     No lifted/peachy variants — bars, dots, numbers, icons all use
     the same hue as the source-of-truth palette. */
  --critical:     var(--nl-rose);     /* #D94040 */
  --critical-dim: var(--nl-rose-dim);
  --critical-bg:  rgba(217, 64, 64, 0.12);
  --critical-edge:rgba(217, 64, 64, 0.34);
  --high:         var(--nl-orange);   /* #F07030 */
  --high-dim:     var(--nl-orange-dim);
  --high-bg:      rgba(240, 112, 48, 0.12);
  --high-edge:    rgba(240, 112, 48, 0.34);
  --medium:       var(--nl-yellow);   /* #E5B23A */
  --medium-bg:    rgba(229, 178, 58, 0.14);
  --medium-edge:  rgba(229, 178, 58, 0.34);
  --clean:        var(--nl-teal);     /* #1DB88A */
  --clean-bg:     rgba(29, 184, 138, 0.12);
  --clean-edge:   rgba(29, 184, 138, 0.34);
  --info:         var(--nl-sky);      /* #6BC4F0 */
  --info-bg:      rgba(107, 196, 240, 0.12);
  --info-edge:    rgba(107, 196, 240, 0.32);

  /* ─── Type — single brand family (Inter), mono aliased to it ─── */
  --sans: "Inter", ui-sans-serif, -apple-system, BlinkMacSystemFont,
          "Helvetica Neue", Arial, sans-serif;
  --serif: var(--sans);
  --mono: "Inter", ui-monospace, "JetBrains Mono", "SF Mono", Consolas, monospace;
  --font-features: "cv05" 1, "cv11" 1, "liga" 1, "calt" 1, "kern" 1;

  --header-h: 56px;
  --sidebar-w: 232px;
  --radius-sm:   8px;    /* buttons, inputs, sidebar items, chips */
  --radius:      12px;   /* cards, panels */
  --radius-lg:   16px;   /* modals */
  --radius-pill: 999px;

  /* atmospheric grain overlay */
  --grain-url: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.35 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/></svg>");
}

/* ─── Self-hosted Inter (variable, upright + italic) ─── */
@font-face {
  font-family: "Inter";
  src: url("fonts/Inter-VariableFont_opsz_wght.ttf") format("truetype-variations");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/Inter-Italic-VariableFont_opsz_wght.ttf") format("truetype-variations");
  font-weight: 100 900; font-style: italic; font-display: swap;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--page); color: var(--fg-primary);
  font-family: var(--sans);
  font-size: 13px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: var(--font-features);
}
html, body, button, input, textarea, select, optgroup {
  font-feature-settings: var(--font-features);
}
body { min-height: 100vh; }
#root { min-height: 100vh; }

/* atmospheric grain — signature, almost imperceptible */
body::after {
  content: ''; position: fixed; inset: 0; z-index: 9998;
  pointer-events: none;
  background-image: var(--grain-url);
  background-size: 200px 200px;
  opacity: 0.025;
  mix-blend-mode: screen;
}

/* type utilities */
.serif { font-family: var(--sans); font-weight: 500; }
.mono  { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.uc    { text-transform: uppercase; letter-spacing: 0.08em; font-size: 10.5px; font-weight: 600; color: var(--fg-faint); }
.uc-sm { text-transform: uppercase; letter-spacing: 0.08em; font-size: 10.5px; font-weight: 600; color: var(--fg-faint); }
.dim   { color: var(--fg-faint); }
.dimmer{ color: var(--fg-disabled); }
.italic{ font-style: italic; }
.emph  { font-style: italic; color: var(--fg-primary); }

h1, h2, h3, h4 { font-family: var(--sans); font-weight: 500; margin: 0; letter-spacing: -0.01em; color: var(--fg-strong); }
h1 { font-size: 28px; line-height: 1.15; font-weight: 500; }
h2 { font-size: 22px; line-height: 1.2;  font-weight: 500; }
h3 { font-size: 16px; line-height: 1.3;  font-weight: 500; }
h4 { font-size: 13px; line-height: 1.4;  font-weight: 600; }

p { margin: 0 0 0.6em 0; }
a { color: var(--fg-action); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }
::selection { background: rgba(61,111,232,0.32); color: var(--fg-strong); }

/* scrollbar */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--border-primary); border-radius: 5px; border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--border-strong); background-clip: padding-box; border: 2px solid transparent; }

/* ─── TOP HEADER ────────────────────────────────────────── */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; height: var(--header-h);
  display: flex; align-items: center; gap: 16px;
  padding: 0 16px;
  background: var(--page-faint);
  border-bottom: 1px solid var(--border-primary);
  z-index: 50;
}
.topbar-brand {
  display: flex; align-items: center; gap: 10px;
  padding-right: 18px; border-right: 1px solid var(--border-primary);
  margin-right: 4px;
  height: 100%;
}
.topbar-brand .brand-mark {
  display: inline-flex; align-items: center; justify-content: center;
  height: 22px; text-decoration: none;
  transition: opacity 120ms;
}
.topbar-brand .brand-mark:hover { opacity: 0.78; }
.topbar-brand .brand-mark img {
  height: 22px; width: auto; display: block;
  /* PNG is already white; leave colour as-is on the dark topbar */
}
.topbar-brand .brand-divider {
  width: 1px; height: 18px; background: var(--border-primary);
  display: inline-block; opacity: 0.9;
}
.topbar-brand .brand-name {
  font-weight: 600; color: var(--fg-strong); font-size: 14px; letter-spacing: -0.005em;
}
.topbar-brand .brand-ver {
  color: var(--fg-faint); font-size: 11px; font-weight: 500;
}
.topbar-brand .brand-tag {
  background: var(--brass-bg); color: var(--brass);
  border: 1px solid rgba(61,111,232,0.40);
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.06em;
  padding: 1px 5px; border-radius: 3px;
  margin-left: 2px;
}
.topbar-search {
  flex: 1; max-width: 720px; height: 32px;
  display: flex; align-items: center; gap: 10px;
  padding: 0 12px;
  background: var(--bg-deep);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-sm);
  color: var(--fg-faint); cursor: pointer; transition: border-color 100ms;
  font-family: var(--sans); font-size: 13px; text-align: left;
}
.topbar-search:hover { border-color: var(--border-strong); }
.topbar-search-text { flex: 1; }
.topbar-search .kbd { color: var(--fg-disabled); font-size: 11px; }

.topbar-right { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.tenant-chip {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--fg-primary);
  padding: 6px 10px; border-radius: var(--radius-sm);
  background: var(--surface-faint);
  border: 1px solid var(--border-primary);
}
.tenant-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--clean); display: inline-block; }

.icon-btn {
  width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid transparent;
  border-radius: var(--radius-sm); cursor: pointer;
  color: var(--fg-faint); transition: all 100ms;
}
.icon-btn:hover { background: var(--surface-faint); color: var(--fg-strong); border-color: var(--border-primary); }

.user-chip {
  display: flex; align-items: center; gap: 10px;
  padding-left: 12px; border-left: 1px solid var(--border-primary);
  margin-left: 4px;
}
.user-av {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--surface-strong); color: var(--fg-strong);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600;
  border: 1px solid var(--border-strong);
}
.user-meta { display: flex; flex-direction: column; line-height: 1.2; }
.user-name { font-size: 12px; font-weight: 500; color: var(--fg-strong); }
.user-role { font-size: 10.5px; color: var(--fg-faint); }

/* ─── SIDEBAR ──────────────────────────────────────────── */
.sidebar {
  position: fixed; top: var(--header-h); left: 0; bottom: 0;
  width: var(--sidebar-w);
  background: var(--page);
  border-right: 1px solid var(--border-primary);
  padding: 16px 10px 12px;
  display: flex; flex-direction: column; gap: 6px;
  z-index: 40;
  overflow-y: auto;
}
.sb-sect { display: flex; flex-direction: column; gap: 1px; margin-bottom: 12px; }
.sb-sect-label {
  font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.10em;
  color: var(--fg-disabled);
  padding: 8px 12px 6px;
}
.sb-items { display: flex; flex-direction: column; gap: 1px; }
.sb-item {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 12px;
  border: none; background: transparent; cursor: pointer;
  color: var(--fg-primary); text-align: left;
  font-family: var(--sans); font-size: 13px;
  border-radius: var(--radius-sm);
  transition: background 80ms, color 80ms;
  width: 100%;
}
.sb-item:hover { background: var(--surface-faint); color: var(--fg-strong); }
.sb-item.active {
  background: var(--selected-fill);
  color: var(--selected-fg);
  border: 1px solid rgba(0,0,0,0.10);
  box-shadow: var(--selected-shadow);
  font-weight: 500;
}
.sb-item.danger { color: var(--high); }
.sb-item.danger:hover { color: var(--high); }
.sb-item.danger.active { color: var(--selected-fg); }
.sb-item .sb-item-label { flex: 1; }
.sb-item .sb-item-count {
  font-family: var(--mono); font-size: 11px; color: var(--fg-faint);
  font-weight: 500;
}
.sb-item.active .sb-item-count { color: rgba(13,13,16,0.55); }

.sb-spacer { flex: 1; }

.sb-health {
  border-top: 1px solid var(--border-primary);
  padding-top: 12px;
}
.sb-health-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 4px 12px; font-size: 12px; color: var(--fg-primary);
}
.health-ok   { color: var(--clean); font-size: 11px; }
.health-warn { color: var(--high);  font-size: 11px; }
.health-err  { color: var(--critical); font-size: 11px; }

/* ─── workspace ───────────────────────────────────────── */
.workspace {
  margin-top: var(--header-h);
  margin-left: var(--sidebar-w);
  min-height: calc(100vh - var(--header-h));
  background: var(--page);
}

/* ─── DOSSIER LAYOUT ─────────────────────────────────── */
.dossier {
  max-width: 1480px;
  margin: 0 auto;
  padding: 18px 32px 80px;
}

.bc-row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  flex-wrap: wrap;
  font-size: 12px; color: var(--fg-faint); margin-bottom: 18px;
}
.bc-trail { display: flex; align-items: center; gap: 8px; min-width: 0; }
.bc-link { color: var(--fg-faint); cursor: pointer; }
.bc-link:hover { color: var(--fg-strong); text-decoration: none; }
.bc-sep { color: var(--fg-disabled); }
.bc-here { color: var(--fg-strong); font-weight: 500; }

/* ─── dossier header (identity + score) ─── */
.d-header {
  display: flex;
  align-items: center;          /* ring anchors vertically against the info block */
  gap: 40px;
  padding: 4px 0 16px;
}
.d-id {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; align-items: flex-start;
}
.d-id-eyebrow { margin-bottom: 10px; white-space: nowrap; }
.d-id-title { display: flex; align-items: center; gap: 16px; margin-bottom: 10px; }
.d-id-av {
  width: 52px; height: 52px; flex-shrink: 0;
  background: var(--surface-strong); color: var(--fg-strong);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 600;
}
.d-id-av.pf { border-radius: 50%; }
.d-id-name { font-size: 28px; font-weight: 500; letter-spacing: -0.012em; color: var(--fg-strong); }
.d-id-sub {
  font-size: 12.5px; color: var(--fg-faint); margin-bottom: 14px;
}
.d-id-sub .sep { color: var(--fg-disabled); margin: 0 6px; }

.d-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }

.d-meta {
  display: grid; grid-template-columns: max-content 1fr;
  gap: 8px 24px; row-gap: 6px;
  padding-top: 12px; border-top: 1px solid var(--border-primary);
  max-width: 720px;
}
.meta-row { display: contents; }
.meta-label { font-size: 12px; color: var(--fg-faint); }
.meta-value { font-size: 12.5px; color: var(--fg-primary); }

.d-actions { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 8px; }

.d-score {
  flex-shrink: 0;
  display: flex; flex-direction: column; align-items: center;
}
/* identity rows — name is the hero, then id/status, then metadata */
.d-id .d-id-title { margin-bottom: 14px; }
.d-facts-id { margin-top: 0 !important; margin-bottom: 12px; }
.d-facts-meta { margin-top: 0 !important; }
/* secondary action — sits below the metadata, aligned to the text block's left edge */
.d-score-report { margin-top: 22px; width: auto; justify-content: center; }
.d-score-clickable { cursor: pointer; border-radius: 14px; padding: 10px; margin: -10px; transition: background 0.14s ease; outline: none; }
.d-score-clickable:hover { background: var(--surface-tinted); }
.d-score-clickable:focus-visible { box-shadow: 0 0 0 2px var(--brass); }
.d-score-meta {
  font-size: 11px; color: var(--fg-faint); line-height: 1.6;
  text-align: left;
}
.d-score-meta div:first-child { color: var(--fg-primary); }

/* Risk colour legend — quick key for the score breakdown bars. Subtle &
   secondary: small dots + muted labels, sits in the card header. */
.risk-legend {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 14px;
}
.risk-legend-item {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; color: var(--fg-faint);
  letter-spacing: 0.01em; white-space: nowrap;
}
.risk-legend-dot {
  width: 7px; height: 7px; border-radius: 50%;
  flex-shrink: 0;
}

.score-ring-wrap {
  position: relative; width: 220px; height: 220px;
}
.score-ring { display: block; }
.score-ring-text {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  pointer-events: none;
}
.score-ring-num {
  font-family: var(--sans); font-size: 64px; font-weight: 500;
  letter-spacing: -0.04em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.score-ring-sub {
  font-size: 11.5px; letter-spacing: 0.04em; margin-top: 4px;
}
.score-ring-band {
  margin-top: 3px;
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1;
}

/* ─── recomendação banner ─── */
.d-banner {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 16px; margin: 8px 0 18px;
  background: var(--surface-faint);
  border: 1px solid var(--border-primary);
  border-left: 2px solid var(--info);
  border-radius: var(--radius-sm);
  font-size: 12.5px; line-height: 1.55; color: var(--fg-primary);
}
.d-banner-icon { color: var(--info); flex-shrink: 0; margin-top: 1px; }
.d-banner strong { color: var(--fg-strong); font-weight: 600; }
.d-banner .emph { color: var(--fg-primary); }

/* ─── TABS (dt) ─── */
.dt {
  display: flex; gap: 0;
  border-bottom: 1px solid var(--border-primary);
  margin: 0 0 20px; overflow-x: auto;
}
.dt-tab {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  background: transparent; border: none; color: var(--fg-faint);
  font: 500 13px var(--sans); cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap; transition: color 80ms;
}
.dt-tab:hover { color: var(--fg-primary); }
.dt-tab.active { color: var(--fg-strong); border-bottom-color: var(--brass); }
.dt-tab .dt-count {
  font-family: var(--mono); font-size: 11px; color: var(--fg-faint);
  padding: 0 6px; min-width: 18px;
  background: var(--surface-faint); border-radius: 3px;
  border: 1px solid var(--border-primary); height: 18px;
  display: inline-flex; align-items: center; justify-content: center;
}
.dt-tab.active .dt-count { color: var(--brass); border-color: rgba(61,111,232,0.40); background: rgba(61,111,232,0.12); }
.dt-tab-end { margin-left: auto; color: var(--fg-action); }
.dt-tab-end:hover { color: var(--fg-action); }

/* ─── two-column grid ─── */
.d-cols { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 20px; }
.d-col-main { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.d-col-side { display: flex; flex-direction: column; gap: 18px; min-width: 0; }

/* ─── card ─── */
.card {
  background: var(--surface);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius);
}
.card-head { padding: 14px 20px 4px; }
.card-eyebrow {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.10em;
  color: var(--fg-faint); font-weight: 600; margin-bottom: 4px;
}
.card-title {
  font-size: 16px; font-weight: 500; color: var(--fg-strong);
  margin-bottom: 12px;
}
.card-foot-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 14px;
  background: transparent; border: none; border-top: 1px solid var(--border-primary);
  color: var(--fg-action); font: 500 12px var(--sans);
  cursor: pointer; width: 100%; text-align: left;
}
.card-foot-btn:hover { background: var(--surface-faint); }

/* ─── risk composition bars ─── */
.risk-comp { display: flex; flex-direction: column; gap: 10px; padding-top: 4px; }
.risk-row {
  display: grid; grid-template-columns: 220px 1fr 44px;
  gap: 16px; align-items: center;
}
.risk-label { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.risk-row.clickable { cursor: pointer; border-radius: 6px; outline: none; transition: background 0.13s ease; padding: 6px 8px; margin: -6px -8px; }
.risk-row.clickable:hover { background: rgba(255,255,255,0.035); }
.risk-row.clickable:focus-visible { box-shadow: 0 0 0 2px var(--accent, rgba(255,255,255,0.25)); }
.risk-name { font-size: 13px; color: var(--fg-primary); }
.risk-name.has-tip {
  position: relative;
  cursor: help;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--fg-faint);
  outline: none;
}
.risk-tip {
  position: absolute;
  bottom: calc(100% + 9px);
  left: 0;
  z-index: 40;
  width: max-content;
  max-width: 320px;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--surface-raised, #1b1b20);
  border: 1px solid var(--border, rgba(255,255,255,0.10));
  box-shadow: 0 12px 32px rgba(0,0,0,0.45);
  color: var(--fg-primary);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
  text-wrap: pretty;
  opacity: 0;
  transform: translateY(3px);
  pointer-events: none;
  transition: opacity 0.14s ease, transform 0.14s ease;
}
.risk-tip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 16px;
  border: 6px solid transparent;
  border-top-color: var(--surface-raised, #1b1b20);
}
.risk-name.has-tip:hover .risk-tip,
.risk-name.has-tip:focus-visible .risk-tip {
  opacity: 1;
  transform: translateY(0);
}
.risk-weight { font-size: 11px; color: var(--fg-faint); }
.risk-bar-track {
  position: relative; height: 4px; background: var(--surface-strong);
  border-radius: 2px; overflow: hidden;
}
.risk-bar-fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  border-radius: 2px;
  transition: width 200ms;
}
.risk-val { font-size: 14px; font-weight: 500; text-align: right; }

/* ─── signals list (sinais críticos) ─── */
.signals { display: flex; flex-direction: column; padding: 0 4px; }
.signal {
  display: grid; grid-template-columns: 12px 1fr 200px;
  gap: 14px; padding: 16px 16px;
  border-top: 1px solid var(--border-primary);
}
.signal:first-child { border-top: none; }
.signal-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--fg-disabled);
  margin-top: 5px;
}
.signal.sev-critical .signal-dot { background: var(--critical); box-shadow: 0 0 0 4px var(--critical-bg); }
.signal.sev-high     .signal-dot { background: var(--high);     box-shadow: 0 0 0 4px var(--high-bg); }
.signal.sev-medium   .signal-dot { background: var(--medium);   box-shadow: 0 0 0 4px var(--medium-bg); }
.signal.sev-clean    .signal-dot { background: var(--clean);    box-shadow: 0 0 0 4px var(--clean-bg); }

.signal-body { min-width: 0; }
.signal-title {
  font-size: 13px; font-weight: 500; color: var(--fg-strong);
  margin-bottom: 4px;
}
.signal-desc {
  font-size: 12px; color: var(--fg-faint); line-height: 1.55;
}
.signal-meta { font-size: 10.5px; color: var(--fg-faint); text-align: right; display: flex; flex-direction: column; gap: 2px; align-items: flex-end; }
.signal-meta-tags { display: flex; gap: 4px; }
.meta-tag {
  background: var(--surface-faint); border: 1px solid var(--border-primary);
  padding: 1px 5px; border-radius: 2px;
  font-family: var(--mono); font-size: 9.5px; font-weight: 500;
  color: var(--fg-primary); text-transform: none;
}
.signal-meta-code { color: var(--fg-faint); }
.signal-meta-date { color: var(--fg-disabled); }
.signal-link { color: var(--fg-action); margin-top: 2px; }

/* ─── timeline ─── */
.tl { list-style: none; margin: 0; padding: 0 0 16px; }
.tl-item {
  display: grid; grid-template-columns: 66px 1fr;
  gap: 14px; padding: 10px 20px; position: relative;
}
.tl-item::before {
  content: ''; position: absolute; left: 80px; top: 0; bottom: 0;
  width: 1px; background: var(--border-primary);
}
.tl-item::after {
  content: ''; position: absolute; left: 76px; top: 14px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--surface); border: 1.5px solid var(--brass-dim);
}
.tl-item:last-child::before { bottom: 50%; }
.tl-date { font-size: 11px; color: var(--fg-faint); padding-top: 1px; }
.tl-body { padding-left: 18px; }
.tl-title { font-size: 13px; font-weight: 500; color: var(--fg-strong); margin-bottom: 2px; }
.tl-desc { font-size: 11.5px; color: var(--fg-faint); line-height: 1.55; }

/* ─── sources panel ─── */
.src-list { padding: 0 0 12px; }
.src-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 20px; font-size: 12.5px;
  border-top: 1px solid var(--border-faint);
}
.src-row:first-child { border-top: 1px solid var(--border-primary); }
.src-name { color: var(--fg-primary); }
.src-ts { color: var(--fg-faint); font-size: 11px; }
.src-row-missing .src-name { color: var(--fg-faint); }
.src-row-missing .src-ts { color: var(--high); }
.src-tier { color: var(--high); font-weight: 600; }

/* ─── profile-toggle (floating bottom-right) ─── */
.profile-toggle {
  position: fixed; bottom: 18px; right: 18px; z-index: 40;
  background: var(--surface);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius);
  padding: 3px; display: flex; gap: 1px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.profile-toggle button {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border: none; background: transparent;
  color: var(--fg-faint); font: 500 11px var(--sans); cursor: pointer;
  border-radius: 3px;
}
.profile-toggle button.active { background: var(--selected-fill); color: var(--selected-fg); box-shadow: var(--selected-shadow); }
.profile-toggle button:hover:not(.active) { color: var(--fg-primary); }

/* ─── pills (chip-style) ───────────────────────────── */
.pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  font-size: 11.5px; font-weight: 500; line-height: 1.5;
  border: 1px solid transparent;
  font-family: var(--sans); white-space: nowrap;
}
.pill.critical { background: var(--critical-bg); color: var(--critical); border-color: var(--critical-edge); }
.pill.high     { background: var(--high-bg);     color: var(--high);     border-color: var(--high-edge); }
.pill.medium   { background: var(--medium-bg);   color: var(--medium);   border-color: var(--medium-edge); }
.pill.clean    { background: var(--clean-bg);    color: var(--clean);    border-color: var(--clean-edge); }
.pill.info     { background: var(--info-bg);     color: var(--info);     border-color: var(--info-edge); }
.pill.neutral  { background: var(--surface-faint);color: var(--fg-primary); border-color: var(--border-primary); }
.pill.outline  { background: transparent;         color: var(--fg-faint);  border-color: var(--border-primary); }
.pill .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ─── buttons ─────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  background: var(--surface); border: 1px solid var(--border-strong);
  color: var(--fg-strong);
  font: 500 12.5px/1.4 var(--sans); cursor: pointer;
  transition: all 100ms ease;
  white-space: nowrap;
}
.btn:hover { background: var(--surface-faint); border-color: var(--border-strong); }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 1px var(--nl-blue), 0 0 0 4px var(--brass-bg); }
.btn.primary {
  background: var(--selected-fill); color: var(--selected-fg);
  border: 1px solid rgba(0,0,0,0.10); font-weight: 600;
  box-shadow: var(--selected-shadow);
}
.btn.primary:hover { filter: brightness(1.04); background: var(--selected-fill); border-color: rgba(0,0,0,0.10); color: var(--selected-fg); }
.btn.danger {
  background: var(--nl-rose); color: #1f0a0d; border-color: var(--nl-rose); font-weight: 600;
}
.btn.danger:hover { background: #e25a5e; border-color: #e25a5e; }
.btn.ghost { background: transparent; border-color: transparent; }
.btn.ghost:hover { background: var(--surface-faint); }
.btn.sm { padding: 4px 10px; font-size: 11.5px; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* ─── input ───────────────────────────────────────── */
.input {
  width: 100%;
  background: var(--bg-deep); border: 1px solid var(--border-primary);
  border-radius: var(--radius-sm); padding: 8px 12px;
  font: 400 13px var(--sans); color: var(--fg-strong);
  outline: none; transition: all 100ms;
}
.input:focus { border-color: var(--nl-blue); box-shadow: 0 0 0 4px var(--brass-bg); }
.input::placeholder { color: var(--fg-disabled); }
.input.mono { font-family: var(--mono); }

/* ─── search hero (for search screen) ────────────── */
.hero-search {
  position: relative;
  background: var(--bg-deep);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius);
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
}
.hero-search:focus-within { border-color: var(--nl-blue); box-shadow: 0 0 0 4px var(--brass-bg); }
.hero-search input {
  flex: 1; background: transparent; border: none; outline: none; color: var(--fg-strong);
  font: 400 16px var(--sans);
}
.hero-search input::placeholder { color: var(--fg-disabled); }

/* ─── stamp ─────────────────────────────────────── */
.stamp {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--sans); font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 3px 8px;
  border: 1px solid currentColor; border-radius: var(--radius-sm);
  color: var(--high); background: var(--high-bg);
}
.stamp.danger { color: var(--critical); background: var(--critical-bg); }
.stamp.clean { color: var(--clean); background: var(--clean-bg); }

/* ─── tick scale ───────────────────────────────── */
.tick-scale { display: flex; gap: 2px; align-items: flex-end; height: 12px; }
.tick-scale .t { flex: 1; height: 100%; background: var(--border-primary); border-radius: 1px; }
.tick-scale .t.on { background: var(--fg-faint); }
.tick-scale .t.critical { background: var(--critical); }
.tick-scale .t.high { background: var(--high); }
.tick-scale .t.medium, .tick-scale .t.medi { background: var(--medium); }
.tick-scale .t.clean { background: var(--clean); }

/* ─── tables ───────────────────────────────────── */
.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl th, .tbl td { padding: 11px 16px; text-align: left; border-bottom: 1px solid var(--border-faint); }
.tbl th { font: 600 11px var(--sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-faint); background: var(--surface-faint); border-bottom: 1px solid var(--border-primary); }
.tbl tbody tr { transition: background 80ms; }
.tbl tbody tr:hover { background: var(--surface-faint); cursor: pointer; }
.tbl tbody tr:last-child td { border-bottom: none; }

/* ─── legacy tabs (for evidence component) ─── */
.tabs { display: flex; gap: 0; border-bottom: 1px solid var(--border-primary); }
.tabs button {
  background: transparent; border: none; color: var(--fg-faint);
  padding: 10px 14px; font: 500 12.5px var(--sans); cursor: pointer;
  border-bottom: 2px solid transparent; display: inline-flex; align-items: center; gap: 8px;
  margin-bottom: -1px;
}
.tabs button:hover { color: var(--fg-primary); }
.tabs button.active { color: var(--fg-strong); border-bottom-color: var(--brass); font-weight: 600; }
.tabs button .cnt { font-family: var(--mono); font-size: 11px; color: var(--fg-faint);
  padding: 1px 6px; background: var(--surface-faint);
  border: 1px solid var(--border-primary); border-radius: 9px; }
.tabs button.active .cnt { color: var(--brass); border-color: rgba(61,111,232,0.40); }

/* ─── evidence cards ─── */
.evid {
  border: 1px solid var(--border-primary);
  border-left-width: 3px;
  padding: 12px 16px;
  margin-bottom: 8px;
  background: var(--surface-faint);
  border-radius: var(--radius-sm);
}
.evid.critical { border-left-color: var(--critical); background: var(--critical-bg); }
.evid.high { border-left-color: var(--high); background: var(--high-bg); }
.evid.medium { border-left-color: var(--medium); }
.evid.clean { border-left-color: var(--clean); background: var(--clean-bg); }
.evid .t { font-weight: 600; font-size: 13px; margin-bottom: 4px; color: var(--fg-strong); }
.evid .s { font-size: 12px; color: var(--fg-primary); line-height: 1.55; }

/* ─── modal ────────────────────────────────────── */
.modal-wrap {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(4,5,10,0.72); padding: 40px;
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(2px);
}
.modal {
  width: 100%; max-width: 640px; max-height: 88vh;
  background: var(--surface);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-lg);
  display: flex; flex-direction: column;
  box-shadow: 0 24px 64px rgba(0,0,0,0.5);
  overflow: hidden;
}
.modal .hd { padding: 20px 24px 14px; border-bottom: 1px solid var(--border-primary); display: flex; justify-content: space-between; align-items: start; gap: 12px; }
.modal .bd { padding: 20px 24px; overflow-y: auto; }
.modal .ft { padding: 14px 24px; border-top: 1px solid var(--border-primary); display: flex; justify-content: flex-end; gap: 10px; background: var(--surface-faint); }

/* ─── force graph node ─── */
.gnode-label {
  font-family: var(--sans); font-size: 11.5px; font-weight: 600;
  fill: var(--fg-strong); pointer-events: none;
  letter-spacing: 0.005em;
  paint-order: stroke;
  stroke: var(--bg-deep); stroke-width: 4; stroke-linejoin: round;
}
.gnode-sub {
  font-family: var(--mono); font-size: 10px;
  fill: var(--fg-primary); pointer-events: none;
  paint-order: stroke;
  stroke: var(--bg-deep); stroke-width: 3.5; stroke-linejoin: round;
}
.glink { stroke: var(--border-strong); stroke-width: 1; fill: none; }
.glink-lbl { font-family: var(--sans); font-size: 10.5px; font-weight: 600; fill: var(--fg-primary); pointer-events: none; }

/* ─── GRAFO TAB layout (controls + graph + 3-col footer) ─── */
.gt { display: flex; flex-direction: column; gap: 14px; }

/* ─── Signals side panel (retractable, right of graph) ─── */
/* hide app chrome while the graph is in fullscreen so the overlay reads full-bleed */
body.graph-fs .topbar,
body.graph-fs .sidebar { display: none !important; }

/* The signals rail is an OVERLAY layer above the graph — it never reflows
   the graph (the graph stays pinned; the panel slides in/out on top). */
.sigpanel {
  --sig-w: 300px;
  position: absolute; inset: 0;
  z-index: 6; pointer-events: none;
}

/* ── Panel body — a native split-view drawer that slides in / out ── */
.sigpanel-body {
  pointer-events: auto;
  position: absolute; top: 0; right: 0; bottom: 0;
  width: var(--sig-w); display: flex; flex-direction: column;
  background: var(--surface);
  border-left: 1px solid var(--card-stroke);
  box-shadow: -10px 0 28px -20px rgba(0,0,0,0.30);
  transform: translateX(0);
  transition: transform 0.30s cubic-bezier(0.32,0.72,0,1), opacity 0.22s ease;
}
.sigpanel.closed .sigpanel-body {
  transform: translateX(100%);
  opacity: 0;
  pointer-events: none;
}

/* ── Collapse handle — a slim grip docked to the panel's left edge, drawn
   in the SAME surface / stroke / radius language as the rest of the UI so it
   reads as part of the panel structure, not a floating button. ── */
.sigpanel-tab {
  pointer-events: auto;
  position: absolute; top: 50%; right: var(--sig-w);
  transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 7px;
  width: 22px; min-height: 54px; padding: 9px 0;
  background: var(--surface); color: var(--fg-faint);
  border: 1px solid var(--card-stroke); border-right: none;
  border-radius: 9px 0 0 9px;
  box-shadow: -5px 0 14px -10px rgba(0,0,0,0.22);
  cursor: pointer;
  transition: right 0.30s cubic-bezier(0.32,0.72,0,1),
              background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
/* Generous invisible hit target without enlarging the visible grip */
.sigpanel-tab::before {
  content: ''; position: absolute; inset: -12px -10px -12px -16px;
}
.sigpanel-tab:hover  { background: var(--surface-faint); color: var(--fg-strong); }
.sigpanel-tab:active { background: var(--surface-soft-active); color: var(--fg-strong); }
.sigpanel-tab:focus-visible {
  outline: none;
  box-shadow: -5px 0 14px -10px rgba(0,0,0,0.22), 0 0 0 2px var(--brass);
}

/* Closed — handle docks to the graph's right edge as the reveal affordance.
   It is INDEPENDENT of entity detail cards: it never moves to a card and
   never appears attached to one. It stays pinned to the graph edge for
   every selected node, and sits above any open card so it's always visible. */
.sigpanel.closed .sigpanel-tab { right: 0; }
.sigpanel-tab { z-index: 8; }

/* Chevron rotates to communicate state:
   open  → ▸ points to the edge  (click = collapse)
   closed→ ◂ points to the graph (click = expand) */
.sigpanel-chev { transition: transform 0.30s cubic-bezier(0.32,0.72,0,1); display: block; }
.sigpanel.open   .sigpanel-chev { transform: rotate(0deg); }
.sigpanel.closed .sigpanel-chev { transform: rotate(180deg); }

.sigpanel-tab-count {
  font: 600 10px var(--mono); color: var(--brass);
  background: var(--brass-bg); border-radius: 999px; padding: 2px 6px;
  line-height: 1;
}
.sigpanel-head {
  flex: none;
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 16px 16px 12px; border-bottom: 1px solid var(--rule);
}
.sigpanel-title { font-family: var(--serif); font-size: 14px; }
.sigpanel-meta { font-size: 10.5px; color: var(--fg-faint); letter-spacing: 0.06em; }
.sigpanel-list { flex: 1 1 0; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 12px; }
/* Each signal is a self-contained card: a low-contrast filled surface with
   a severity-coloured accent bar on the left edge, generous internal
   padding, and a clear stacked hierarchy (badge → title → detail → pill). */
.sigrow {
  display: flex; flex-direction: column; gap: 9px;
  text-align: left; width: 100%;
  padding: 15px 15px 14px;
  border-radius: 9px;
  background: var(--surface-tinted);
  border: none;
  border-left: 3px solid var(--fg-disabled);
  cursor: pointer; transition: background 0.13s ease, box-shadow 0.13s ease;
  font: inherit; color: inherit;
}
.sigrow.critical { border-left-color: var(--critical); }
.sigrow.high     { border-left-color: var(--high); }
.sigrow.medium   { border-left-color: var(--medium); }
.sigrow.clean    { border-left-color: var(--clean); }
.sigrow:hover:not(.static) { background: var(--surface-tinted-hi); }
.sigrow.active { background: var(--brass-bg); box-shadow: inset 0 0 0 1px rgba(61,111,232,0.45); }
.sigrow.static { cursor: default; opacity: 0.6; }
.sigrow-sev {
  flex: none; align-self: flex-start;
  font: 600 9px var(--mono); letter-spacing: 0.08em; text-transform: uppercase;
  padding: 3px 7px; border-radius: 4px;
}
.sigrow-sev.critical { color: var(--critical); background: var(--critical-bg); }
.sigrow-sev.high     { color: var(--high);     background: var(--high-bg); }
.sigrow-sev.medium   { color: var(--medium);   background: var(--medium-bg); }
.sigrow-sev.clean    { color: var(--clean);    background: var(--clean-bg); }
.sigrow-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sigrow-titlerow { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.sigrow-title { font-size: 12.5px; font-weight: 500; line-height: 1.3; min-width: 0; }
.sigrow-rule {
  flex: none; font-size: 9.5px; letter-spacing: 0.04em; color: var(--brass);
  background: var(--brass-bg); border: 1px solid rgba(61,111,232,0.28);
  padding: 1px 5px; border-radius: 4px; line-height: 1.4;
}
.sigrow-detail { font-size: 11px; color: var(--fg-faint); line-height: 1.45; text-wrap: pretty; }
/* Related entity — small pill anchored to the bottom-left of the card. */
.sigrow-node {
  display: inline-flex; align-items: center; gap: 5px;
  align-self: flex-start; margin-top: 3px;
  padding: 3px 9px 3px 7px; border-radius: 999px;
  font-size: 10px; color: var(--brass);
  background: var(--surface-tinted-hi);
}
.sigpanel-foot {
  flex: none;
  padding: 12px 16px; border-top: 1px solid var(--rule);
  min-height: 44px; display: flex; align-items: center;
}
.sigpanel-hint { font-size: 10.5px; color: var(--fg-faint); line-height: 1.4; text-wrap: pretty; }
@media (max-width: 720px) {
  .sigpanel { --sig-w: 240px; }
}

/* ── Toggle switch (pill com bolinha deslizante) ── */
.toggle {
  display: inline-flex; align-items: center;
  width: 32px; height: 18px; flex-shrink: 0;
  border-radius: 999px;
  background: var(--ink-5, #3a3a3a);
  cursor: pointer;
  transition: background 0.22s ease;
  position: relative;
}
.toggle.on  { background: var(--brass); }
.toggle.disabled { opacity: 0.3; cursor: not-allowed; }
.toggle-dot {
  position: absolute; left: 3px;
  width: 12px; height: 12px; border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.35);
  transition: left 0.22s cubic-bezier(0.32,0.72,0,1);
}
.toggle.on .toggle-dot { left: 17px; }

/* ── Painel de filtro de tipos de nó (lado esquerdo, espelho do sigpanel) ── */
.kindpanel {
  --kind-w: 220px;
  position: absolute; inset: 0;
  z-index: 6; pointer-events: none;
}
.kindpanel-body {
  pointer-events: auto;
  position: absolute; top: 0; left: 0; bottom: 0;
  width: var(--kind-w); display: flex; flex-direction: column;
  background: var(--surface);
  border-right: 1px solid var(--card-stroke);
  box-shadow: 10px 0 28px -20px rgba(0,0,0,0.30);
  transform: translateX(0);
  transition: transform 0.30s cubic-bezier(0.32,0.72,0,1), opacity 0.22s ease;
}
.kindpanel.closed .kindpanel-body {
  transform: translateX(-100%);
  opacity: 0;
  pointer-events: none;
}
.kindpanel-tab {
  pointer-events: auto;
  position: absolute; top: 50%; left: var(--kind-w);
  transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 7px;
  width: 22px; min-height: 54px; padding: 9px 0;
  background: var(--surface); color: var(--fg-faint);
  border: 1px solid var(--card-stroke); border-left: none;
  border-radius: 0 9px 9px 0;
  box-shadow: 5px 0 14px -10px rgba(0,0,0,0.22);
  cursor: pointer;
  transition: left 0.30s cubic-bezier(0.32,0.72,0,1),
              background 0.15s ease, color 0.15s ease;
}
.kindpanel-tab::before {
  content: ''; position: absolute; inset: -12px -16px -12px -10px;
}
.kindpanel-tab:hover  { background: var(--surface-faint); color: var(--fg-strong); }
.kindpanel-tab:active { background: var(--surface-soft-active); color: var(--fg-strong); }
.kindpanel.closed .kindpanel-tab { left: 0; }
.kindpanel-chev { transition: transform 0.30s cubic-bezier(0.32,0.72,0,1); display: block; }
.kindpanel.open  .kindpanel-chev { transform: rotate(180deg); }
.kindpanel.closed .kindpanel-chev { transform: rotate(0deg); }
.kindpanel-head {
  flex: none; padding: 12px 14px 10px;
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--rule);
}
.kindpanel-title { font-family: var(--serif); font-size: 14px; }
.kindpanel-list  { flex: 1 1 0; overflow-y: auto; padding: 6px 0; display: flex; flex-direction: column; }

/* Subtle frame around the graph area — identical to the legend / filter
   container: same stroke (1px var(--border-faint)), radius (10px) and edge
   treatment. overflow:hidden clips the inner canvas to the radius so the
   frame is one continuous rounded outline (no corner breaks/double lines). */
.gt > .card { border: 1px solid var(--border-faint); border-radius: 10px; overflow: hidden; }

.gt-controls {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  padding: 6px 4px;
}
.gt-controls-left {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.gt-controls-right {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; color: var(--fg-faint);
}
.gt-controls-right .sep { color: var(--fg-disabled); }

/* legend strip — its own row below the graph card */
.gt-legend-row {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 8px 14px;
  background: var(--surface-faint);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-sm);
  font-size: 11px; color: var(--fg-faint);
}
.gt-legend-row .gt-legend-group {
  display: flex; align-items: center; gap: 14px;
}
.gt-legend-row .gt-legend-group > span {
  display: inline-flex; align-items: center; gap: 5px;
}
.gt-legend-group { display: flex; align-items: center; gap: 12px; }
.gt-legend-sep   { width: 1px; height: 14px; background: var(--border-strong); opacity: 0.6; }
.gt-legend-dot   {
  display: inline-block; width: 8px; height: 8px;
  border-radius: 50%; vertical-align: middle; margin-right: 4px;
}

.gt-depth {
  display: inline-flex;
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-sm);
  background: var(--surface-faint);
  padding: 2px;
  gap: 2px;
}
.gt-depth-btn {
  background: transparent; border: none;
  padding: 4px 10px;
  font: 500 11.5px var(--mono);
  color: var(--fg-faint);
  cursor: pointer; border-radius: 3px;
}
.gt-depth-btn:hover { color: var(--fg-primary); }
.gt-depth-btn.active {
  background: var(--selected-fill); color: var(--selected-fg); box-shadow: var(--selected-shadow);
}

.gt-toggle {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; color: var(--fg-primary);
  cursor: pointer; user-select: none;
}
.gt-toggle input {
  appearance: none; -webkit-appearance: none;
  width: 14px; height: 14px;
  border: 1px solid var(--border-strong); border-radius: 3px;
  background: var(--surface-faint);
  cursor: pointer; position: relative;
  margin: 0;
  transition: all 100ms;
}
.gt-toggle input:checked {
  background: var(--fg-action); border-color: var(--fg-action);
}
.gt-toggle input:checked::after {
  content: ''; position: absolute;
  left: 3px; top: 0px;
  width: 4px; height: 8px;
  border: solid #0D0D10;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* footer 3-col */
.gt-foot {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 0.9fr);
  gap: 14px;
  align-items: stretch;
}
.gt-foot-card { display: flex; flex-direction: column; }

/* UBO rows */
.gt-ubo-list {
  padding: 0 4px 12px;
  display: flex; flex-direction: column;
}
.gt-ubo-row {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 12px; align-items: center;
  padding: 11px 16px;
  border-top: 1px solid var(--border-faint);
}
.gt-ubo-row:first-child { border-top: 1px solid var(--border-primary); }
.gt-ubo-av {
  width: 32px; height: 32px; border-radius: 50%;
  border: none; display: flex; align-items: center; justify-content: center;
  font: 600 11px var(--mono); letter-spacing: 0.04em;
}
.gt-ubo-name { font-size: 13px; font-weight: 500; color: var(--fg-strong); margin-bottom: 2px; }
.gt-ubo-role { font-size: 11.5px; color: var(--fg-faint); }
.gt-ubo-pct { text-align: right; }
.gt-ubo-pct-num { font-size: 17px; font-weight: 500; letter-spacing: -0.01em; line-height: 1.15; }
.gt-ubo-pct-sub { font-size: 10px; color: var(--fg-faint); }

/* evidence chain */
.gt-chain {
  padding: 0 20px 20px;
  display: flex; flex-direction: column; gap: 14px;
}
.gt-chain-steps {
  list-style: none; margin: 0; padding: 14px 14px 12px;
  background: var(--surface-faint);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-sm);
  font-family: var(--mono); font-size: 12px;
  display: flex; flex-direction: column; gap: 6px;
}
.gt-chain-steps li {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  color: var(--fg-primary);
}
.gt-chain-node {
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: 3px; padding: 3px 8px;
  color: var(--fg-strong); font-weight: 500;
}
.gt-chain-leaf {
  color: var(--critical);
  border-color: rgba(217,64,64,0.45);
  background: var(--critical-bg);
}
.gt-chain-edge { color: var(--fg-faint); padding-left: 6px; }
.gt-chain-result {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  padding-top: 4px;
}
.gt-chain-pct {
  font-size: 22px; font-weight: 500; letter-spacing: -0.02em;
  color: var(--fg-strong); margin-top: 2px;
}
.gt-chain-note {
  font-size: 11.5px; color: var(--fg-faint); line-height: 1.55;
  padding-top: 10px; border-top: 1px solid var(--border-faint);
}

/* anomalias */
.gt-anom { padding: 0 0 12px; }
.gt-anom-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 9px 20px;
  border-top: 1px solid var(--border-faint);
  font-size: 12.5px;
}
.gt-anom-row:first-child { border-top: 1px solid var(--border-primary); }
.gt-anom-label { color: var(--fg-primary); }

@media (max-width: 1180px) {
  .gt-foot { grid-template-columns: 1fr 1fr; }
  .gt-foot-card:last-child { grid-column: 1 / -1; }
}
@media (max-width: 800px) {
  .gt-foot { grid-template-columns: 1fr; }
  .gt-foot-card:last-child { grid-column: auto; }
}

/* ─── escape hatch utilities ─────────────────────── */
.flex { display: flex; }
.col  { display: flex; flex-direction: column; }
.gap-4 { gap: 4px; } .gap-6 { gap: 6px; } .gap-8 { gap: 8px; }
.gap-10{ gap: 10px;} .gap-12{ gap: 12px;} .gap-16{ gap: 16px;}
.gap-20{ gap: 20px;} .gap-24{ gap: 24px;} .gap-32{ gap: 32px;}
.aic { align-items: center; }
.ais { align-items: flex-start; }
.jcb { justify-content: space-between; }
.fw  { flex-wrap: wrap; }
.f1  { flex: 1; }
.tr  { text-align: right; }
.mt-4 { margin-top: 4px; } .mt-8 { margin-top: 8px; } .mt-12 { margin-top: 12px; } .mt-16 { margin-top: 16px; } .mt-20 { margin-top: 20px; } .mt-24 { margin-top: 24px; } .mt-32 { margin-top: 32px; }
.mb-4 { margin-bottom: 4px; } .mb-8 { margin-bottom: 8px; } .mb-12 { margin-bottom: 12px; } .mb-16 { margin-bottom: 16px; } .mb-20 { margin-bottom: 20px; }

/* legacy doc / paper / section-head fallbacks (for search/results/report screens) */
.doc { max-width: 1180px; margin: 0 auto; padding: 28px 32px 80px; }
.doc.wide { max-width: 1480px; }
.paper { background: var(--surface); border: 1px solid var(--border-primary); border-radius: var(--radius); position: relative; }
.paper.deep { background: var(--surface-faint); }
.paper.flat { background: transparent; }
.section-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 14px 20px;
  border-bottom: 1px solid var(--border-primary);
}
.section-head .title { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.section-head .marg { font-family: var(--mono); font-size: 11px; color: var(--fg-faint); min-width: 28px; flex-shrink: 0; text-transform: uppercase; }
.section-head h3 { font-size: 16px; white-space: nowrap; }
.section-body { padding: 20px; }

/* ─────────────────────────────────────────────────────────────
   FEEDBACK MECHANISM (C1 / C2 / C3 / C4 / FDE)
   Spec: PRD-Feedback v0.1 §3 / §6 / §9
   ───────────────────────────────────────────────────────────── */

/* C1 inline rating bar — sits in the section header, discreet */
.fb-bar {
  display: inline-flex; align-items: center; gap: 6px;
  position: relative;
  font-family: var(--mono); font-size: 11px;
  flex-shrink: 0;
}
.fb-bar.compact { gap: 4px; }
.fb-thumb {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 7px;
  background: var(--surface-faint);
  border: 1px solid var(--border-primary);
  border-radius: 3px;
  color: var(--fg-faint); cursor: pointer;
  transition: all 100ms;
}
.fb-thumb:hover:not(:disabled) { color: var(--fg-strong); border-color: var(--border-strong); background: var(--surface-strong); }
.fb-thumb.on.up   { color: var(--clean);   border-color: rgba(29,184,138,0.5);  background: var(--clean-bg); }
.fb-thumb.on.down { color: var(--high);    border-color: rgba(240,112,48,0.5); background: var(--high-bg); }
.fb-thumb:disabled { cursor: not-allowed; opacity: 0.55; }
.fb-thumb span.mono { font-variant-numeric: tabular-nums; }

.fb-meta {
  color: var(--fg-faint); font-size: 10.5px; padding: 0 4px;
  border-left: 1px solid var(--border-primary);
}
.fb-meta:first-of-type { border-left: none; padding-left: 6px; }
.fb-meta strong { color: var(--fg-primary); font-weight: 600; }

/* C1 popover for thumbs-down */
.fb-pop {
  position: absolute; top: calc(100% + 8px); right: 0;
  width: 460px; max-width: calc(100vw - 40px);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: 0 16px 40px rgba(0,0,0,0.45);
  z-index: 50;
  font-family: var(--sans);
  animation: fbPopIn 130ms ease-out forwards;
}
@keyframes fbPopIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fb-pop-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 12px; padding: 14px 16px 10px;
  border-bottom: 1px solid var(--border-primary);
}
.fb-pop-title { font-size: 14px; font-weight: 500; color: var(--fg-strong); }
.fb-pop-body { padding: 12px 16px 14px; max-height: 480px; overflow-y: auto; }
.fb-pop-cat { margin-bottom: 12px; }
.fb-pop-cat:last-child { margin-bottom: 0; }
.fb-pop-cat-label {
  font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--fg-faint); margin-bottom: 6px;
}
.fb-pop-tags { display: flex; flex-wrap: wrap; gap: 5px; }

.fb-tag-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 9px;
  font: 500 11.5px var(--sans);
  background: var(--surface-faint);
  border: 1px solid var(--border-primary);
  border-radius: 999px;
  color: var(--fg-primary); cursor: pointer;
  transition: all 80ms;
}
.fb-tag-chip:hover { border-color: var(--border-strong); color: var(--fg-strong); }
.fb-tag-chip.on {
  background: var(--brass-bg); border-color: var(--brass); color: var(--brass);
}

.fb-pop-foot {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 12px; padding-top: 12px;
  border-top: 1px solid var(--border-primary);
}

/* Read-only tag in dashboards / history */
.fb-tag-readonly {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 8px;
  background: var(--surface-faint);
  border: 1px solid var(--border-primary);
  border-radius: 3px;
  font: 500 11px var(--sans);
  color: var(--fg-primary);
}
.fb-tag-readonly-n {
  background: var(--surface-strong); color: var(--fg-strong);
  padding: 0 5px; border-radius: 8px; font-size: 10px;
}

/* "What colleagues said" — feedback history list inside a section */
.fb-history {
  margin-top: 14px; padding: 12px 14px;
  background: var(--bg-deep); border: 1px solid var(--border-primary);
  border-radius: 3px;
}
.fb-history-row {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 0;
  border-top: 1px solid var(--border-faint); font-size: 12px;
}
.fb-history-row:first-of-type { border-top: none; }
.fb-history-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid var(--border-primary);
}
.fb-history-icon.up   { color: var(--clean); background: var(--clean-bg); border-color: rgba(29,184,138,0.4); }
.fb-history-icon.down { color: var(--high);  background: var(--high-bg);  border-color: rgba(240,112,48,0.4); }
.fb-history-tags { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }

/* C2 / C3 modal extras */
.fb-radio-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  background: var(--surface-faint); border: 1px solid var(--border-primary);
  border-radius: 4px; cursor: pointer;
  font: 500 12px var(--sans); color: var(--fg-primary);
  transition: all 80ms;
}
.fb-radio-chip:hover { border-color: var(--border-strong); color: var(--fg-strong); }
.fb-radio-chip.on {
  background: var(--brass-bg); border-color: var(--brass); color: var(--brass);
}
.fb-radio-chip input { display: none; }

.mlro-context {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  padding: 12px 14px;
  background: var(--bg-deep); border: 1px solid var(--border-primary);
  border-radius: 4px;
}
.mlro-context-val {
  margin-top: 4px; font-size: 12.5px; color: var(--fg-strong);
  line-height: 1.45;
}

/* C4 upload */
.c4-drop {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 32px 24px;
  background: var(--surface-faint);
  border: 1.5px dashed var(--border-strong);
  border-radius: 6px;
}
.c4-drop-icon {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--brass-bg); border: 1px solid var(--brass);
  display: flex; align-items: center; justify-content: center;
}

/* FDE dashboard */
.fb-kpis {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}
.fb-kpi {
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius);
}
.fb-kpi-label {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--fg-faint); font-weight: 600; margin-bottom: 8px;
}
.fb-kpi-value {
  font: 500 28px/1 var(--sans); letter-spacing: -0.02em;
  color: var(--fg-strong); font-variant-numeric: tabular-nums;
  margin-bottom: 6px;
}
.fb-kpi-value.tone-clean { color: var(--clean); }
.fb-kpi-value.tone-high  { color: var(--high); }
.fb-kpi-value.tone-medium{ color: var(--medium); }
.fb-kpi-sub { font-size: 11px; color: var(--fg-faint); line-height: 1.5; }

.fb-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 1100px) {
  .fb-kpis { grid-template-columns: repeat(2, 1fr); }
  .fb-grid { grid-template-columns: 1fr; }
}

/* Top tags bar list */
.fb-tag-bar {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 0; border-top: 1px solid var(--border-faint);
}
.fb-tag-bar:first-child { border-top: none; }
.fb-tag-bar-rank {
  font-size: 11px; color: var(--fg-disabled);
  width: 22px; flex-shrink: 0;
}

/* Confidence histogram */
.fb-hist {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  height: 180px; padding-top: 8px;
}
.fb-hist-col { display: flex; flex-direction: column; gap: 4px; align-items: stretch; min-width: 0; }
.fb-hist-bar-wrap {
  flex: 1; position: relative;
  display: flex; align-items: flex-end;
  border-bottom: 1px solid var(--border-primary);
}
.fb-hist-bar {
  width: 100%; min-height: 4px; border-radius: 2px 2px 0 0;
  position: relative;
  transition: height 200ms;
}
.fb-hist-bar-n {
  position: absolute; top: -16px; left: 50%; transform: translateX(-50%);
  font-size: 10.5px; color: var(--fg-primary); font-variant-numeric: tabular-nums;
}
.fb-hist-label {
  text-align: center; font-size: 10px; color: var(--fg-faint);
}
.fb-hist-thr-label {
  position: absolute; top: -2px;
  font-size: 9.5px; color: var(--high);
  background: var(--surface); padding: 0 5px;
  border-radius: 2px; border: 1px solid rgba(240,112,48,0.4);
  transform: translateX(-50%);
}

/* Concordance bars (stacked) */
.fb-conc-bar {
  display: flex; height: 28px; border-radius: 3px;
  overflow: hidden; border: 1px solid var(--border-primary);
}
.fb-conc-bar > div {
  display: flex; align-items: center; justify-content: center;
  color: rgba(0,0,0,0.65); font: 600 11px var(--mono);
  transition: width 200ms;
  min-width: 0;
  border-right: 1px solid rgba(0,0,0,0.25);
}
.fb-conc-bar > div:last-child { border-right: none; }
.fb-conc-legend {
  display: flex; gap: 14px; margin-top: 6px;
  font-size: 11px; color: var(--fg-faint);
}
.fb-conc-legend > span { display: inline-flex; align-items: center; gap: 5px; }
.fb-conc-legend .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }

/* ─────────────────────────────────────────────────────────────
   COAF / SUSEP exporter
   ───────────────────────────────────────────────────────────── */

.amb-toggle {
  display: inline-flex;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 2px;
}
.amb-toggle button {
  padding: 5px 12px; background: transparent; border: none;
  font: 600 11px var(--mono); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--fg-faint); cursor: pointer; border-radius: 3px;
  transition: all 100ms;
}
.amb-toggle button.on    { background: var(--info-bg);     color: var(--info);     border: 1px solid rgba(107,196,240,0.4); }
.amb-toggle button.on.prod { background: var(--critical-bg); color: var(--critical); border: 1px solid rgba(217,64,64,0.5); }

.amb-banner {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; border-radius: 4px;
  font-size: 12.5px; line-height: 1.55;
  background: var(--critical-bg);
  border: 1px solid var(--critical);
  color: var(--fg-strong);
}
.amb-banner strong { color: var(--critical); }

/* dense COAF table */
.coaf-tbl tbody tr.row-selected { background: var(--brass-bg); }
.coaf-tbl tbody tr.row-selected:hover { background: rgba(61,111,232,0.20); }
.coaf-tbl td input[type="checkbox"] { accent-color: var(--brass); }

.occ-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 8px;
  background: var(--surface-faint); border: 1px solid var(--border-primary);
  border-radius: 3px;
  font: 500 11px var(--sans); color: var(--fg-primary);
  white-space: nowrap;
}
.occ-pill .mono { color: var(--brass); font-weight: 600; }
.occ-pill-label { color: var(--fg-faint); font-size: 11px; }

.env-row {
  display: flex; align-items: center; gap: 12px;
  padding: 6px 0; border-top: 1px solid var(--border-faint);
}
.env-row:first-of-type { border-top: none; padding-top: 0; }
.env-row-type {
  display: inline-block; min-width: 24px;
  background: var(--brass-bg); color: var(--brass);
  border-radius: 3px; padding: 1px 6px; font-size: 10.5px; text-align: center;
}
.env-row-typelbl { font-size: 12px; min-width: 80px; color: var(--fg-faint); }

.coaf-expand {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 24px;
}

.err-row {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 5px 0; flex-wrap: wrap;
}

/* Builder modal */
.builder-steps {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 16px; background: var(--surface-faint);
  border: 1px solid var(--border-primary); border-radius: 4px;
}
.builder-step {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: var(--fg-faint);
}
.builder-step.on    { color: var(--fg-strong); }
.builder-step.done  { color: var(--clean); }
.builder-step-n {
  width: 22px; height: 22px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-strong); color: var(--fg-faint);
  font-size: 11px; font-weight: 600; border: 1px solid var(--border-strong);
}
.builder-step.on .builder-step-n { background: var(--brass-bg); color: var(--brass); border-color: var(--brass); }
.builder-step.done .builder-step-n { background: var(--clean-bg); color: var(--clean); border-color: var(--clean); }
.builder-step-sep { flex: 1; height: 1px; background: var(--border-primary); }

.builder-summary {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1.5fr; gap: 18px;
  padding: 14px 18px;
  background: var(--bg-deep);
  border: 1px solid var(--border-primary); border-radius: 4px;
}

.builder-val-banner {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: 4px; font-size: 12.5px;
}
.builder-val-banner.ok  { background: var(--clean-bg);    border: 1px solid var(--clean); }
.builder-val-banner.err { background: var(--critical-bg); border: 1px solid var(--critical); }
.builder-val-banner strong { color: var(--fg-strong); }

.builder-done {
  padding: 24px 32px 16px;
}

/* XML preview pre */
.xml-preview {
  background: var(--bg-deep);
  border: 1px solid var(--border-primary);
  border-radius: 3px;
  padding: 14px 16px;
  font-family: var(--mono); font-size: 11.5px; line-height: 1.55;
  color: var(--fg-primary);
  white-space: pre; overflow: auto; max-height: 360px;
  margin: 0;
  font-variant-ligatures: none;
}

/* Lote viewer */
.lote-meta {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px;
  padding: 14px 18px;
  background: var(--bg-deep); border: 1px solid var(--border-primary);
  border-radius: 4px;
}
@media (max-width: 980px) { .lote-meta { grid-template-columns: repeat(3, 1fr); } }
.section-head .meta { font-family: var(--sans); font-size: 11.5px; color: var(--fg-faint); white-space: nowrap; flex-shrink: 0; }
.section-body { padding: 20px; }

/* ═════════════════════════════════════════════════════════════════════════
   V2 · SOFT-UI MIGRATION — NL AI UI Kit (App)
   Migrates the entire product chrome to the canonical UI Kit App v2 vocabulary:
     • borders are removed from interactive surfaces (cards, buttons, pills,
       tabs, inputs, modals); depth comes from tier-change + soft drop shadow
     • pill-shaped buttons & tabs (radius 999)
     • tabs render as a segmented control inside a tinted track, with a
       white active-fill pill (no underline)
     • the cream selected-fill is reserved for sidebar selection and primary
       CTAs only; small toggles use the smaller active-fill (white pill)
   ═════════════════════════════════════════════════════════════════════════ */

:root {
  --surface-soft:        #16161A;
  --surface-soft-hover:  #1F1F23;
  --surface-soft-active: #25252A;
  --surface-tinted:      rgba(255,255,255,0.04);
  --surface-tinted-hi:   rgba(255,255,255,0.07);
  --surface-glass:       rgba(20,20,24,0.72);
  --active-fill:         #F2F2F0;
  --active-fill-fg:      #0A0A0B;
  --active-fill-shadow:  inset 0 1px 0 rgba(255,255,255,0.18),
                         0 1px 2px rgba(0,0,0,0.30),
                         0 8px 16px -10px rgba(0,0,0,0.55);
  --shadow-soft-1:       inset 0 1px 0 rgba(255,255,255,0.025),
                         0 1px 2px rgba(0,0,0,0.30),
                         0 8px 18px -10px rgba(0,0,0,0.50);
  --shadow-soft-2:       inset 0 1px 0 rgba(255,255,255,0.04),
                         0 4px 12px rgba(0,0,0,0.40),
                         0 24px 56px -24px rgba(0,0,0,0.70);
}

/* ─── Top header ─────────────────────────────────────── */
.topbar {
  border-bottom: none;
  box-shadow: 0 1px 0 rgba(255,255,255,0.025), 0 8px 24px -16px rgba(0,0,0,0.5);
}
.topbar-brand { border-right: none; padding-right: 12px; }
.topbar-brand .brand-divider { display: none; }
.topbar-brand .brand-tag {
  background: var(--surface-soft); color: var(--fg-faint);
  border: none; border-radius: 999px; padding: 2px 7px;
}
.topbar-search {
  background: var(--surface-soft); border: none; border-radius: 10px;
  height: 34px; transition: background 140ms cubic-bezier(0.2,0,0,1);
}
.topbar-search:hover { background: var(--surface-soft-hover); border: none; }
.topbar-search .kbd {
  background: var(--surface-tinted); padding: 2px 7px; border-radius: 999px;
  font-family: var(--mono); color: var(--fg-disabled);
}
.tenant-chip { background: var(--surface-soft); border: none; border-radius: 999px; padding: 6px 12px; }
.icon-btn { width: 34px; height: 34px; border-radius: 999px; border: 1px solid transparent; }
.icon-btn:hover { background: var(--surface-tinted); border: 1px solid transparent; }
.user-chip { border-left: none; padding-left: 10px; }
.user-av { border: none; box-shadow: inset 0 1px 0 rgba(255,255,255,0.05); }

/* ─── Sidebar ─────────────────────────────────────── */
.sidebar { border-right: none; }
.sb-item { border-radius: 10px; padding: 7px 12px; }
.sb-item.active { border: 1px solid transparent; }
.sb-health { border-top: none; margin-top: 8px; padding-top: 6px; }

/* ─── Cards / paper / section heads ───────────────── */
.card, .paper { border: none; box-shadow: var(--shadow-soft-1); }
.paper.flat   { box-shadow: none; background: transparent; }
.paper.deep   { background: var(--surface-tinted); box-shadow: none; }
.section-head { border-bottom: 1px solid var(--border-faint); }
.card-foot-btn {
  border-top: none; background: var(--surface-tinted);
  border-bottom-left-radius: var(--radius);
  border-bottom-right-radius: var(--radius);
  color: var(--fg-strong); font-weight: 500;
  transition: background 140ms cubic-bezier(0.2,0,0,1);
}
.card-foot-btn:hover { background: var(--surface-tinted-hi); }

/* ─── Buttons ─────────────────────────────────────── */
.btn {
  border: none; border-radius: 999px;
  background: var(--surface-soft); color: var(--fg-strong);
  box-shadow: var(--shadow-soft-1);
  padding: 7px 13px; font-weight: 500; letter-spacing: -0.005em;
  transition: background 140ms cubic-bezier(0.2,0,0,1), filter 140ms;
}
.btn:hover  { background: var(--surface-soft-hover); border: none; }
.btn:focus-visible { box-shadow: var(--shadow-soft-1), 0 0 0 3px rgba(255,255,255,0.08); }
.btn.primary {
  background: var(--selected-fill); color: var(--selected-fg);
  border: none; box-shadow: var(--selected-shadow); font-weight: 600;
}
.btn.primary:hover { background: var(--selected-fill); border: none; filter: brightness(1.04); }
.btn.danger {
  background: var(--critical-bg); color: var(--critical);
  border: none; box-shadow: var(--shadow-soft-1); font-weight: 600;
}
.btn.danger:hover { background: var(--critical-bg); border: none; filter: brightness(1.1); }
.btn.ghost { background: transparent; border: none; box-shadow: none; color: var(--fg-faint); }
.btn.ghost:hover { background: var(--surface-tinted); }
.btn.sm { padding: 4px 10px; }
.btn:disabled { opacity: 0.45; }

/* ─── Inputs / hero search ────────────────────────── */
.input {
  background: var(--surface-soft); border: none; border-radius: 10px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.025);
  padding: 8px 12px;
}
.input:focus {
  border: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.025),
              0 0 0 3px rgba(255,255,255,0.07);
}
.hero-search {
  background: var(--surface-soft); border: none; border-radius: 14px;
  padding: 16px 18px; box-shadow: var(--shadow-soft-1);
}
.hero-search:focus-within {
  border: none;
  box-shadow: var(--shadow-soft-1), 0 0 0 3px rgba(255,255,255,0.07);
}

/* ─── Pills · stamps · meta tags ──────────────────── */
.pill {
  border: 1px solid transparent;
  background: var(--surface-soft); color: var(--fg-primary);
}
.pill.critical { background: var(--critical-bg); color: var(--critical); border-color: transparent; }
.pill.high     { background: var(--high-bg);     color: var(--high);     border-color: transparent; }
.pill.medium   { background: var(--medium-bg);   color: var(--medium);   border-color: transparent; }
.pill.clean    { background: var(--clean-bg);    color: var(--clean);    border-color: transparent; }
.pill.info     { background: var(--info-bg);     color: var(--info);     border-color: transparent; }
.pill.neutral  { background: var(--surface-soft);   color: var(--fg-primary); border-color: transparent; }
.pill.outline  { background: var(--surface-tinted); color: var(--fg-faint);   border-color: transparent; }
.stamp         { border: none; }
.meta-tag {
  background: var(--surface-tinted); border: none;
  border-radius: 999px; padding: 1px 7px;
}

/* ─── Tabs · segmented control (dt + legacy .tabs) ── */
.dt {
  border-bottom: none; background: var(--surface-tinted);
  border-radius: 12px; padding: 4px; gap: 4px;
  margin: 0 0 20px;
}
.dt-tab {
  padding: 8px 14px; border-bottom: none; border-radius: 8px;
  margin-bottom: 0; transition: background 140ms cubic-bezier(0.2,0,0,1), color 140ms;
}
.dt-tab:hover { color: var(--fg-primary); }
.dt-tab.active {
  background: var(--active-fill); color: var(--active-fill-fg);
  border-bottom: none; box-shadow: var(--active-fill-shadow); font-weight: 600;
}
.dt-tab .dt-count {
  border: none; border-radius: 999px;
  background: var(--surface-tinted); color: var(--fg-faint);
  padding: 0 6px;
}
.dt-tab.active .dt-count {
  background: rgba(10,10,11,0.10); color: var(--active-fill-fg); border: none;
}
.dt-tab-end { padding: 10px 14px; color: var(--fg-strong); font-weight: 500; }
.dt-tab-end:hover { background: var(--surface-tinted); }

.tabs {
  border-bottom: none; background: var(--surface-tinted);
  border-radius: 12px; padding: 4px; gap: 4px;
}
.tabs button {
  border-bottom: none; border-radius: 8px; margin-bottom: 0;
  padding: 8px 14px; transition: background 140ms cubic-bezier(0.2,0,0,1), color 140ms;
}
.tabs button.active {
  background: var(--active-fill); color: var(--active-fill-fg);
  border-bottom: none; box-shadow: var(--active-fill-shadow); font-weight: 600;
}
.tabs button .cnt { border: none; border-radius: 999px; background: var(--surface-tinted); }
.tabs button.active .cnt {
  background: rgba(10,10,11,0.10); color: var(--active-fill-fg); border: none;
}

/* ─── Dossier header bits ─────────────────────────── */
.d-banner {
  background: var(--surface-tinted); border: none; border-left: none;
  border-radius: 12px; padding: 14px 18px;
}
.d-banner-icon { color: var(--fg-faint); }
.d-meta {
  border-top: none; background: var(--surface-tinted);
  border-radius: 12px; padding: 16px 18px; margin-top: 6px;
}
.d-id-av { border: none; box-shadow: var(--shadow-soft-1); background: var(--surface-strong); }

/* ─── Profile toggle (PJ/PF) ──────────────────────── */
.profile-toggle {
  background: var(--surface-strong); border: none;
  border-radius: 999px; padding: 4px;
  box-shadow: var(--shadow-soft-2);
}
.profile-toggle button { border-radius: 999px; padding: 6px 12px; }
.profile-toggle button.active {
  background: var(--active-fill); color: var(--active-fill-fg);
  box-shadow: var(--active-fill-shadow);
}

/* ─── Tables ──────────────────────────────────────── */
.tbl th {
  background: var(--surface-tinted); border-bottom: none;
  color: var(--fg-faint); letter-spacing: 0.06em;
}
.tbl tbody tr:hover { background: var(--surface-tinted); }

/* ─── Modal ───────────────────────────────────────── */
.modal { border: none; box-shadow: var(--shadow-soft-2); border-radius: 16px; }
.modal .hd { border-bottom: 1px solid var(--border-faint); }
.modal .ft { border-top: 1px solid var(--border-faint); background: var(--surface-tinted); }
.modal-wrap { backdrop-filter: blur(4px); }

/* ─── Evidence cards ─────────────────────────────── */
.evid {
  border: none; border-left: 3px solid var(--border-faint);
  background: var(--surface-tinted); border-radius: 10px;
}
.evid.critical { border-left-color: var(--critical); background: var(--critical-bg); }
.evid.high     { border-left-color: var(--high);     background: var(--high-bg); }
.evid.medium   { border-left-color: var(--medium);   background: var(--surface-tinted); }
.evid.clean    { border-left-color: var(--clean);    background: var(--clean-bg); }

/* ─── Feedback chrome (C1/C2/C3/C4) ──────────────── */
.fb-thumb {
  border: none; border-radius: 999px; background: var(--surface-soft);
  transition: background 140ms;
}
.fb-thumb:hover:not(:disabled) { border: none; background: var(--surface-soft-hover); color: var(--fg-strong); }
.fb-thumb.on.up   { border: none; background: var(--clean-bg); color: var(--clean); }
.fb-thumb.on.down { border: none; background: var(--high-bg);  color: var(--high); }
.fb-meta { border-left: none; padding: 0 6px; }

.fb-pop {
  background: var(--surface-strong); border: none;
  border-radius: 14px; box-shadow: var(--shadow-soft-2);
}
.fb-pop-head { border-bottom: 1px solid var(--border-faint); }
.fb-pop-foot { border-top: 1px solid var(--border-faint); }

.fb-tag-chip {
  border: none; background: var(--surface-soft); border-radius: 999px;
  transition: background 140ms;
}
.fb-tag-chip:hover { border: none; background: var(--surface-soft-hover); }
.fb-tag-chip.on { background: var(--brass-bg); color: var(--brass); border: none; }

.fb-tag-readonly {
  border: none; background: var(--surface-tinted);
  border-radius: 999px; padding: 2px 10px;
}
.fb-tag-readonly-n { background: var(--surface-strong); }

.fb-history { background: var(--surface-tinted); border: none; border-radius: 10px; }

.fb-radio-chip {
  border: none; border-radius: 999px;
  background: var(--surface-soft); padding: 6px 12px;
  transition: background 140ms;
}
.fb-radio-chip:hover { border: none; background: var(--surface-soft-hover); }
.fb-radio-chip.on { background: var(--brass-bg); color: var(--brass); border: none; }

.mlro-context { background: var(--surface-tinted); border: none; border-radius: 10px; }

.c4-drop {
  background: var(--surface-tinted);
  border: 1.5px dashed var(--border-strong); border-radius: 14px;
}
.c4-drop-icon { border: none; }

/* FDE dashboard */
.fb-kpi { border: none; box-shadow: var(--shadow-soft-1); }
.fb-hist-bar-wrap { border-bottom: 1px solid var(--border-faint); }
.fb-hist-thr-label { background: var(--surface-strong); border: none; }
.fb-conc-bar { border: none; box-shadow: var(--shadow-soft-1); border-radius: 999px; }

/* ─── COAF / SUSEP exporter ───────────────────────── */
.amb-toggle { background: var(--surface-soft); border: none; border-radius: 999px; padding: 3px; }
.amb-toggle button { border-radius: 999px; padding: 6px 14px; }
.amb-toggle button.on    { background: var(--info-bg);     color: var(--info);     border: none; }
.amb-toggle button.on.prod { background: var(--critical-bg); color: var(--critical); border: none; }
.amb-banner {
  border: none; border-radius: 12px;
  box-shadow: inset 0 0 0 1px rgba(217,64,64,0.34);
}
.occ-pill { background: var(--surface-soft); border: none; border-radius: 999px; padding: 3px 10px; }
.env-row-type { background: var(--brass-bg); color: var(--brass); border-radius: 999px; padding: 2px 8px; }
.builder-steps { background: var(--surface-tinted); border: none; border-radius: 10px; }
.builder-step-n { border: none; box-shadow: inset 0 0 0 1px var(--border-strong); }
.builder-step.on .builder-step-n   { box-shadow: inset 0 0 0 1px var(--brass); }
.builder-step.done .builder-step-n { box-shadow: inset 0 0 0 1px var(--clean); }
.builder-step-sep { background: var(--border-faint); }
.builder-summary { background: var(--surface-tinted); border: none; border-radius: 10px; }
.builder-val-banner.ok  { border: none; border-radius: 10px; box-shadow: inset 0 0 0 1px rgba(29,184,138,0.34); }
.builder-val-banner.err { border: none; border-radius: 10px; box-shadow: inset 0 0 0 1px rgba(217,64,64,0.34); }
.xml-preview { border: none; border-radius: 10px; }
.lote-meta { background: var(--surface-tinted); border: none; border-radius: 10px; }

/* ─── Graph chrome ────────────────────────────────── */
.gt-legend-row { background: var(--surface-tinted); border: none; border-radius: 10px; }
.gt-depth {
  background: var(--surface-tinted); border: none;
  border-radius: 999px; padding: 3px;
}
.gt-depth-btn { border-radius: 999px; padding: 5px 12px; }
.gt-depth-btn.active {
  background: var(--active-fill); color: var(--active-fill-fg);
  box-shadow: var(--active-fill-shadow);
}
.gt-toggle input {
  background: var(--surface-soft); border: none; border-radius: 4px;
  box-shadow: inset 0 0 0 1px var(--border-strong);
}
.gt-toggle input:checked {
  background: var(--fg-action); border: none; box-shadow: none;
}
.gt-chain-steps { background: var(--surface-tinted); border: none; border-radius: 10px; }
.gt-chain-node {
  background: var(--surface-soft); border: none;
  box-shadow: inset 0 0 0 1px var(--border-strong);
}
.gt-chain-leaf {
  background: var(--critical-bg); color: var(--critical);
  box-shadow: inset 0 0 0 1px rgba(217,64,64,0.45);
}

/* ═════════════════════════════════════════════════════════════════════════
   V2.1 · MONOCHROMATIC REFINEMENT
   Evolve toward a calmer, more editorial atmosphere. Color is reserved
   strictly for SEMANTIC signal: severity (critical/high/medium), success
   (clean), regulatory info (sky), and active environment toggles. Decorative
   blue accents — used previously for case-ID links, italic display words,
   source-pill bullets, tab end-actions, the cream sidebar pill — are
   neutralized to grayscale so hierarchy is carried by type, spacing,
   and tone. The cream selected-fill is reserved for primary CTAs only.
   ═════════════════════════════════════════════════════════════════════════ */

/* Sidebar active item — subtle dark tile (replaces the bright cream pill).
   In the new calmer direction the cream is too loud for nav; it stays as
   the signature surface for primary CTAs (Gerar relatório PLD/FT), where
   it is the one and only canonical next step. */
.sb-item.active {
  background: var(--surface-soft); color: var(--fg-strong);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
  border: 1px solid transparent; font-weight: 600;
}
.sb-item.active .sb-item-count { color: var(--fg-primary); }
.sb-item:hover { background: var(--surface-tinted); }

/* Sidebar danger items — neutral text; severity lives in icon, not type */
.sb-item.danger,
.sb-item.danger:hover { color: var(--fg-primary); }
.sb-item.danger.active { color: var(--fg-strong); }

/* Profile toggle (PJ/PF) — subtle dark active state */
.profile-toggle button.active {
  background: var(--surface-soft); color: var(--fg-strong);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}

/* Graph depth selector — subtle dark active state */
.gt-depth-btn.active {
  background: var(--surface-soft); color: var(--fg-strong);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}

/* Hyperlinks — neutral by default; opt into action-blue with .link-action */
a { color: var(--fg-strong); }
a:hover {
  color: var(--fg-strong); text-decoration: underline;
  text-underline-offset: 2px; text-decoration-color: var(--border-strong);
}
.link-action,
.link-action:hover { color: var(--fg-action); }

/* Selection — soft grey rather than blue tint */
::selection { background: rgba(255,255,255,0.12); color: var(--fg-strong); }

/* Input focus — white halo, not blue */
.input:focus,
.hero-search:focus-within {
  border: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.025),
              0 0 0 3px rgba(255,255,255,0.10);
}

/* Inline brass accents in JSX (italic display "dessa", source bullets,
   "§" ornament, table CASO IDs) — neutralize via attribute selector that
   matches React-serialized inline styles. Falls back gracefully. */
[style*="--brass"]      { color: var(--fg-strong) !important; }
[style*="brass-bg"]     { background: var(--surface-tinted) !important; color: var(--fg-strong) !important; }
/* Re-tone the small dots in the source-pill row to a muted grey */
.flex.mt-16 [style*="--brass"],
.hero-search ~ .flex [style*="--brass"] { color: var(--fg-disabled) !important; }
/* Italic "dessa" — keep italic; primary white tone */
h1 [style*="italic"][style*="--brass"] { color: var(--fg-strong) !important; }

/* CASO IDs in tables (rendered as <td class="num" style="color: var(--brass)">) */
.tbl td.num { color: var(--fg-primary); font-family: var(--mono); }

/* Card-foot CTAs + signal "abrir →" — neutral primary, not blue */
.card-foot-btn  { color: var(--fg-strong); }
.signal-link    { color: var(--fg-strong); }
.dt-tab-end,
.dt-tab-end:hover { color: var(--fg-strong); }

/* Tab active accent dot/count — neutral on white pill */
.dt-tab.active .dt-count,
.tabs button.active .cnt {
  background: rgba(10,10,11,0.10); color: var(--active-fill-fg); border: none;
}

/* Feedback chrome — neutralize "on" state from blue to subtle grey fill */
.fb-tag-chip.on,
.fb-radio-chip.on {
  background: var(--surface-soft-active); color: var(--fg-strong); border: none;
}

/* Graph node toggle — white check, not action-blue */
.gt-toggle input:checked {
  background: var(--fg-primary); border: none;
  box-shadow: none;
}
.gt-toggle input:checked::after { border-color: var(--page); }

/* COAF / SUSEP chrome — neutralize brass-tinted bits */
.occ-pill .mono { color: var(--fg-strong); }
.env-row-type {
  background: var(--surface-soft); color: var(--fg-strong);
  border-radius: 999px; padding: 2px 9px;
}
.coaf-tbl tbody tr.row-selected,
.coaf-tbl tbody tr.row-selected:hover { background: var(--surface-tinted-hi); }
.coaf-tbl td input[type="checkbox"] { accent-color: var(--fg-primary); }

.builder-step.on .builder-step-n {
  background: var(--surface-soft); color: var(--fg-strong);
  box-shadow: inset 0 0 0 1px var(--border-strong);
}
.builder-step.on { color: var(--fg-strong); }

/* Brand BETA tag — already neutralized in v2; ensure no blue ring */
.topbar-brand .brand-tag {
  background: var(--surface-soft) !important;
  color: var(--fg-faint) !important;
  border: none !important;
}

/* Pill outline variants — quieter, tertiary text */
.pill.outline { color: var(--fg-faint); }

/* Card eyebrows — keep the UI Kit App's uppercase pattern; slightly quieter */
.card-eyebrow { color: var(--fg-faint); letter-spacing: 0.08em; }

/* Section-head h3 "§" ornament — tertiary, not blue */
.section-head h3 .italic[style*="--brass"],
h3 .serif.italic[style*="--brass"] { color: var(--fg-faint) !important; }

/* AMB toggle — environment color stays (safety-critical visual signal) */

/* ═════════════════════════════════════════════════════════════════════════
   V2.2 · SOFT-FILL INDICATORS
   All colored pills, badges, chips, tags, counters, status indicators,
   circular initial avatars and similar surfaces share one treatment:
   a soft 12% tinted background of the semantic color, NO colored stroke,
   and the semantic color carried by the foreground (text/icon/initials)
   at full opacity. Solid color is reserved for dots and tick-bars where
   the mark IS the content. Goal: lighter, less noisy, more refined.
   ═════════════════════════════════════════════════════════════════════════ */

/* Stamps (MINUTA / VALIDADO / etc.) — drop the currentColor border */
.stamp,
.stamp.danger,
.stamp.clean { border: none !important; }

/* Evidence-chain leaf node — remove the heavy 45%-alpha colored ring */
.gt-chain-leaf { box-shadow: none !important; }

/* Validation banners — drop the full-color border */
.builder-val-banner.ok  { border: none !important; }
.builder-val-banner.err { border: none !important; }

/* Environment banner (PROD warning) — drop full-color border */
.amb-banner { border: none !important; }

/* Builder step indicators — drop colored ring */
.builder-step.on   .builder-step-n,
.builder-step.done .builder-step-n { border-color: transparent !important; }

/* C4 drop-icon (feedback flow) — drop colored ring */
.c4-drop-icon { border: none !important; }

/* Feedback history thumbs-up/down icons — drop colored ring */
.fb-history-icon.up,
.fb-history-icon.down { border: none !important; }

/* ═════════════════════════════════════════════════════════════════════════
   V2.3 · PREMIUM ENTERPRISE POLISH
   Final pass: layered tonal hierarchy, near-zero borders, comfortable
   tables, stronger typographic hierarchy, cohesive metric groupings.
   Target: Linear / Stripe / Vercel / Attio. Calm, dense, intentional.
   Product, IA, content density, and workflows are UNCHANGED.
   ═════════════════════════════════════════════════════════════════════════ */

:root {
  /* Deeper, more layered dark palette. Reads as one calm atmosphere
     rather than identical black slabs. Each tier is ~+3 lightness. */
  --page:             #08090B;   /* page / canvas — slightly cooler black */
  --page-faint:       #0B0C0F;   /* topbar */
  --surface:          #0E1014;   /* primary card / panel */
  --surface-faint:    #11141A;   /* hover / secondary surface */
  --surface-strong:   #151922;   /* elevated / avatar / modal */
  --bg-deep:          #050608;   /* sunken wells (chart canvas, code) */

  /* V2 soft-surface tier — pulled in line with the new tonal ladder */
  --surface-soft:        #11141A;
  --surface-soft-hover:  #161A24;
  --surface-soft-active: #1A1F2A;
  --surface-tinted:      rgba(255,255,255,0.022);
  --surface-tinted-hi:   rgba(255,255,255,0.045);

  /* Hairlines: thinner, lower contrast — borders should be the exception */
  --border-strong:    rgba(255,255,255,0.085);
  --border-primary:   rgba(255,255,255,0.045);
  --border-faint:     rgba(255,255,255,0.025);

  /* Reset selected aliases */
  --surface-1:    var(--surface);
  --surface-2:    var(--surface-faint);
  --surface-3:    var(--surface-strong);
  --hairline:     var(--border-primary);
  --hairline-2:   var(--border-strong);
  --rule:         var(--border-faint);
  --ink-5:        var(--border-primary);

  /* Slightly desaturated semantic palette — premium not flashy.
     Backgrounds drop from 12% → 10%; foreground tones are unchanged. */
  --critical-bg:  rgba(217, 64, 64, 0.10);
  --high-bg:      rgba(240,112, 48, 0.10);
  --medium-bg:    rgba(229,178, 58, 0.10);   /* derived from --nl-yellow */
  --clean-bg:     rgba( 29,184,138, 0.10);
  --info-bg:      rgba(107,196,240, 0.10);
  --brass-bg:     rgba( 61,111,232, 0.10);

  /* Comfortable, intentional density. */
  --row-y: 13px;
  --row-x: 18px;
}

/* ─── Page chrome — calmer base ───────────────────────────────────── */
html, body { background: var(--page); color: var(--fg-primary); }

/* Atmospheric grain dialed a notch lower */
body::after { opacity: 0.018; }

/* ─── Top header — single quiet plane, no edge ──────────────────── */
.topbar {
  background: var(--page);
  border-bottom: none;
  box-shadow: none;
}
.topbar::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: var(--border-faint); pointer-events: none;
}
.topbar { position: fixed; }
.topbar-brand .brand-name { letter-spacing: -0.012em; }
.topbar-brand .brand-ver { color: var(--fg-disabled); }
.topbar-search {
  background: var(--surface-soft);
  height: 32px;
  border-radius: 8px;
  font-size: 12.5px;
}
.tenant-chip {
  background: transparent;
  color: var(--fg-faint);
  padding: 6px 10px;
  font-size: 11.5px;
}
.tenant-chip .tenant-dot { width: 5px; height: 5px; }

/* ─── Sidebar — integrated, no floating-panel feel ──────────────── */
.sidebar {
  background: var(--page);
  border-right: none;
  padding: 14px 12px 14px;
  gap: 2px;
}
.sb-sect { margin-bottom: 18px; }
.sb-sect-label {
  font-size: 9.5px; letter-spacing: 0.12em;
  color: var(--fg-disabled);
  padding: 6px 12px 8px;
  opacity: 0.9;
}
.sb-item {
  padding: 6.5px 12px; font-size: 12.5px;
  font-weight: 450; color: var(--fg-primary);
  border-radius: 7px;
  gap: 11px;
}
.sb-item:hover { background: rgba(255,255,255,0.03); color: var(--fg-strong); }
.sb-item.active {
  background: rgba(255,255,255,0.045);
  color: var(--fg-strong);
  box-shadow: none;
  font-weight: 550;
}
.sb-item .sb-item-count {
  font-family: var(--mono); font-size: 10.5px;
  color: var(--fg-disabled); font-weight: 500;
}
.sb-item.active .sb-item-count { color: var(--fg-faint); }
.sb-health { padding-top: 8px; }
.sb-health-row { padding: 3px 12px; font-size: 11.5px; color: var(--fg-faint); }

/* ─── Workspace — calmer canvas ─────────────────────────────────── */
.workspace { background: var(--page); }
.dossier { padding: 22px 36px 96px; }
.doc { padding: 26px 36px 96px; }

/* ─── Typography hierarchy — stronger focal points ──────────────── */
h1 { font-size: 30px; line-height: 1.12; letter-spacing: -0.018em; font-weight: 500; }
h2 { font-size: 20px; letter-spacing: -0.014em; }
h3 { font-size: 15px; letter-spacing: -0.008em; font-weight: 550; }

/* Dossier identity header — make the name the hero */
.d-id-name { font-size: 30px; letter-spacing: -0.018em; font-weight: 500; }
.d-id-sub { font-size: 12px; color: var(--fg-faint); }
.d-id-av {
  width: 48px; height: 48px;
  background: var(--surface-faint);
  border-radius: 10px;
  font-size: 13px; font-weight: 600;
  box-shadow: none;
}

/* Breadcrumbs — quieter */
.bc-row { font-size: 11.5px; color: var(--fg-disabled); margin-bottom: 22px; }
.bc-here { color: var(--fg-primary); font-weight: 450; }

/* Card eyebrows — quieter, smaller, tighter */
.card-eyebrow {
  font-size: 10px; letter-spacing: 0.10em;
  color: var(--fg-disabled); font-weight: 600;
  margin-bottom: 6px;
}
.card-title {
  font-size: 15px; font-weight: 550;
  letter-spacing: -0.008em;
  color: var(--fg-strong);
  margin-bottom: 14px;
}

/* Uppercase utility — quieter tertiary */
.uc, .uc-sm { color: var(--fg-disabled); letter-spacing: 0.10em; font-size: 10px; }

/* ─── Cards / paper — calmer surfaces, fewer cards-in-cards ─── */
.card, .paper {
  background: var(--surface);
  border: none;
  box-shadow: none;
  border-radius: 14px;
}
.paper.deep { background: var(--surface-faint); }
.paper.flat { background: transparent; }
.card-head { padding: 16px 22px 4px; }
.section-head {
  padding: 14px 22px;
  border-bottom: none;
}
.section-body { padding: 4px 22px 22px; }
.card-foot-btn {
  border-top: 1px solid var(--border-faint);
  background: transparent;
  padding: 11px 22px;
  font-size: 12px; color: var(--fg-faint);
}
.card-foot-btn:hover { background: rgba(255,255,255,0.02); color: var(--fg-strong); }

/* Two-column main grid — slightly more breathing room */
.d-cols { gap: 24px; }
.d-col-main, .d-col-side { gap: 20px; }

/* ─── Banners — pure tonal, no left rule ─────────────────────── */
.d-banner {
  background: var(--surface-faint);
  border: none; border-left: none;
  border-radius: 12px;
  padding: 14px 18px;
  font-size: 12.5px; color: var(--fg-primary);
}
.d-banner-icon { color: var(--fg-faint); }

/* Meta block — sits inside the same plane, not a separate card */
.d-meta {
  background: transparent;
  border: none; border-top: 1px solid var(--border-faint);
  border-radius: 0;
  padding: 16px 0 4px;
  margin-top: 12px;
}
.meta-label { font-size: 11.5px; color: var(--fg-disabled); }
.meta-value { font-size: 12.5px; color: var(--fg-primary); }

/* ─── Score ring — quieter scale ─────────────────────────────── */
.score-ring-num { font-size: 60px; font-weight: 500; letter-spacing: -0.045em; }
.score-ring-sub { font-size: 10.5px; letter-spacing: 0.06em; color: var(--fg-disabled); margin-top: 6px; }
.d-score-meta { font-size: 11px; color: var(--fg-disabled); line-height: 1.7; }
.d-score-meta div:first-child { color: var(--fg-primary); }

/* ─── Tabs (dt + .tabs) — calmer segmented control ──────────── */
.dt, .tabs {
  background: var(--surface-faint);
  padding: 3px; gap: 2px;
  border-radius: 10px;
}
.dt-tab, .tabs button {
  padding: 7px 13px; font-size: 12.5px;
  border-radius: 7px;
  color: var(--fg-faint); font-weight: 500;
}
.dt-tab:hover, .tabs button:hover { color: var(--fg-primary); background: rgba(255,255,255,0.02); }
.dt-tab.active, .tabs button.active {
  background: var(--surface-strong);
  color: var(--fg-strong);
  font-weight: 550;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
.dt-tab .dt-count, .tabs button .cnt {
  background: rgba(255,255,255,0.04);
  color: var(--fg-faint);
  padding: 0 6px; font-size: 10.5px;
  min-width: 16px; height: 17px;
}
.dt-tab.active .dt-count, .tabs button.active .cnt {
  background: rgba(255,255,255,0.06);
  color: var(--fg-strong);
}
.dt-tab-end { padding: 8px 13px; color: var(--fg-faint); font-weight: 500; }
.dt-tab-end:hover { background: rgba(255,255,255,0.02); color: var(--fg-strong); }

/* ─── Tables — premium, comfortable, lighter dividers ─────── */
.tbl { font-size: 12.5px; }
.tbl th {
  padding: 10px 18px;
  background: transparent;
  border-bottom: 1px solid var(--border-faint);
  font-size: 10.5px; letter-spacing: 0.08em;
  color: var(--fg-disabled); font-weight: 600;
}
.tbl td {
  padding: 13px 18px;
  border-bottom: 1px solid var(--border-faint);
  color: var(--fg-primary);
}
.tbl tbody tr { transition: background 100ms; }
.tbl tbody tr:hover { background: rgba(255,255,255,0.022); }
.tbl tbody tr:last-child td { border-bottom: none; }

/* ─── Pills / chips / stamps — quieter borders, no glow ─── */
.pill { padding: 3px 10px; font-size: 11px; font-weight: 500; letter-spacing: -0.002em; }
.pill.outline { background: transparent; color: var(--fg-faint); border-color: transparent; }
.stamp {
  font-size: 10px; letter-spacing: 0.08em;
  padding: 3px 9px; border-radius: 6px;
}
.meta-tag {
  background: rgba(255,255,255,0.04);
  border: none; border-radius: 999px;
  padding: 2px 8px;
  font-size: 9.5px; color: var(--fg-faint);
}

/* ─── Buttons — softer, calmer ───────────────────────────── */
.btn {
  background: var(--surface-faint);
  box-shadow: none;
  padding: 7px 13px; font-size: 12.5px;
  border-radius: 8px;
  font-weight: 500;
}
.btn:hover { background: var(--surface-strong); }
.btn:focus-visible { box-shadow: 0 0 0 2px rgba(255,255,255,0.10); outline: none; }
.btn.primary {
  background: var(--selected-fill); color: var(--selected-fg);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.45);
  font-weight: 600;
}
.btn.primary:hover { filter: brightness(1.03); }
.btn.danger {
  background: var(--critical-bg); color: var(--critical);
  box-shadow: none;
}
.btn.danger:hover { background: rgba(217,64,64,0.18); }
.btn.ghost { background: transparent; }
.btn.ghost:hover { background: rgba(255,255,255,0.035); color: var(--fg-strong); }
.btn.sm { padding: 4px 10px; font-size: 11.5px; border-radius: 7px; }

/* Icon-only buttons */
.icon-btn { width: 32px; height: 32px; border-radius: 8px; }
.icon-btn:hover { background: rgba(255,255,255,0.04); }

/* ─── Inputs — softer ────────────────────────────────────── */
.input {
  background: var(--surface-faint);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 12.5px;
  box-shadow: none;
}
.input:focus { box-shadow: 0 0 0 2px rgba(255,255,255,0.08); }
.hero-search {
  background: var(--surface);
  border-radius: 14px;
  padding: 16px 20px;
  box-shadow: none;
}
.hero-search:focus-within { box-shadow: 0 0 0 2px rgba(255,255,255,0.07); }

/* ─── Signal rows / src-list / ubo-list — fainter dividers ── */
.signal { padding: 14px 22px; gap: 14px; border-top: 1px solid var(--border-faint); }
.signal-title { font-size: 13px; font-weight: 550; color: var(--fg-strong); }
.signal-desc { font-size: 12px; color: var(--fg-faint); line-height: 1.6; }
.signal-meta { font-size: 10.5px; }
.signal-link { font-size: 11.5px; color: var(--fg-faint); }

.src-list { padding: 0 0 12px; }
.src-row {
  padding: 9px 22px;
  border-top: 1px solid var(--border-faint);
  font-size: 12px;
}
.src-row:first-child { border-top: 1px solid var(--border-faint); }
.src-name { color: var(--fg-primary); }
.src-ts { color: var(--fg-disabled); font-size: 11px; }

.gt-ubo-row { padding: 12px 22px; border-top: 1px solid var(--border-faint); }
.gt-ubo-row:first-child { border-top: 1px solid var(--border-faint); }
.gt-ubo-pct-num { font-size: 16px; font-weight: 550; }
.gt-ubo-pct-sub { color: var(--fg-disabled); }

.gt-anom-row { padding: 11px 22px; border-top: 1px solid var(--border-faint); font-size: 12px; }
.gt-anom-row:first-child { border-top: 1px solid var(--border-faint); }

/* ─── Timeline — quieter rail ──────────────────────────────── */
.tl-item::before { background: var(--border-faint); }
.tl-item::after { background: var(--surface); border-color: var(--border-strong); }
.tl-title { font-size: 12.5px; font-weight: 550; }
.tl-desc { font-size: 11.5px; color: var(--fg-faint); }

/* ─── Score / risk composition ─────────────────────────────── */
.risk-bar-track { background: rgba(255,255,255,0.04); }
.risk-name { font-size: 12.5px; }
.risk-weight { font-size: 10.5px; color: var(--fg-disabled); }
.risk-val { font-size: 13px; font-weight: 550; }

/* ─── KPI tiles — cohesive group (not separate widgets) ────── */
.fb-kpis {
  background: var(--surface);
  border-radius: 14px;
  padding: 4px;
  gap: 1px;
  position: relative;
}
.fb-kpis::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  border-radius: 14px;
  background:
    linear-gradient(to right,
      transparent calc(20% - 0.5px), var(--border-faint) calc(20% - 0.5px), var(--border-faint) calc(20% + 0.5px), transparent calc(20% + 0.5px),
      transparent calc(40% - 0.5px), var(--border-faint) calc(40% - 0.5px), var(--border-faint) calc(40% + 0.5px), transparent calc(40% + 0.5px),
      transparent calc(60% - 0.5px), var(--border-faint) calc(60% - 0.5px), var(--border-faint) calc(60% + 0.5px), transparent calc(60% + 0.5px),
      transparent calc(80% - 0.5px), var(--border-faint) calc(80% - 0.5px), var(--border-faint) calc(80% + 0.5px), transparent calc(80% + 0.5px)
    );
}
.fb-kpi {
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  padding: 18px 20px;
}
.fb-kpi-label {
  font-size: 10px; letter-spacing: 0.10em;
  color: var(--fg-disabled); margin-bottom: 10px;
}
.fb-kpi-value {
  font-size: 30px; letter-spacing: -0.025em;
  margin-bottom: 6px;
}
.fb-kpi-sub { font-size: 10.5px; color: var(--fg-disabled); }

/* ─── Histogram / charts — editorial, less noisy ───────────── */
.fb-hist-bar-wrap { border-bottom-color: var(--border-faint); }
.fb-hist-bar { opacity: 0.85; }
.fb-hist-bar-n { color: var(--fg-faint); }
.fb-hist-label { color: var(--fg-disabled); }
.fb-conc-bar { border-radius: 6px; height: 26px; }

/* ─── Builder / COAF / SUSEP — unify tonal pieces ──────────── */
.builder-steps,
.builder-summary,
.mlro-context,
.lote-meta,
.fb-history {
  background: var(--surface-faint);
  border: none;
  border-radius: 12px;
}
.builder-step.on .builder-step-n { background: var(--surface-strong); color: var(--fg-strong); box-shadow: inset 0 0 0 1px var(--border-strong); }
.builder-step.done .builder-step-n { background: var(--clean-bg); color: var(--clean); }
.builder-step-sep { background: var(--border-faint); }

.xml-preview {
  background: var(--bg-deep);
  border: 1px solid var(--border-faint);
  border-radius: 10px;
  font-size: 11px; line-height: 1.6;
}

.amb-toggle { background: var(--surface-soft); padding: 3px; border-radius: 999px; }
.amb-toggle button { padding: 5px 13px; font-size: 10.5px; border-radius: 999px; }

/* ─── Modal — calmer, taller hierarchy ───────────────────── */
.modal {
  background: var(--surface);
  border-radius: 16px;
  box-shadow: 0 32px 80px -16px rgba(0,0,0,0.6), 0 0 0 1px var(--border-faint);
}
.modal .hd { border-bottom: 1px solid var(--border-faint); padding: 22px 26px 16px; }
.modal .bd { padding: 22px 26px; }
.modal .ft {
  border-top: 1px solid var(--border-faint);
  background: transparent;
  padding: 16px 26px;
}
.modal-wrap { background: rgba(4,5,8,0.65); backdrop-filter: blur(6px); }

/* ─── Evidence cards — calmer ─────────────────────────────── */
.evid {
  background: var(--surface-faint);
  border-left-width: 2px;
  border-radius: 10px;
  padding: 13px 16px;
}
.evid.critical { background: var(--critical-bg); }
.evid.high { background: var(--high-bg); }
.evid.medium { background: var(--surface-faint); }
.evid.clean { background: var(--clean-bg); }
.evid .t { font-size: 12.5px; font-weight: 550; }
.evid .s { font-size: 11.5px; color: var(--fg-primary); }

/* ─── Sinais · evidence-by-family — list-first hierarchy ───── */
/* No section title here — the dossier tab ("Sinais") already names it.
   Family tabs are a quiet secondary filter; the evidence list is the hero. */
.evid-family { padding: 20px 22px 22px; }

/* Secondary filter — segmented family selector, deliberately quiet */
.evid-fambar {
  display: inline-flex; flex-wrap: wrap; gap: 4px;
  padding: 4px; margin-bottom: 18px;
  background: var(--surface-faint);
  border: 1px solid var(--border-faint);
  border-radius: 12px;
  max-width: 100%;
}
.evid-fam {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px; border: none; background: transparent; cursor: pointer;
  border-radius: 9px; color: var(--fg-primary);
  font: 500 12.5px var(--sans); letter-spacing: -0.005em;
  transition: background 120ms ease, color 120ms ease;
}
.evid-fam:hover { color: var(--fg-strong); background: rgba(255,255,255,0.05); }
.evid-fam.active {
  background: var(--surface-strong); color: var(--fg-strong);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.07);
}
.evid-fam-sep {
  align-self: stretch; width: 1px; margin: 4px 3px;
  background: var(--border-primary); flex-shrink: 0;
}
.evid-fam-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.evid-fam-dot.critical { background: var(--critical); }
.evid-fam-dot.high     { background: var(--high); }
.evid-fam-dot.medium   { background: var(--medium); }
.evid-fam-cnt {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box;
  border-radius: 999px; background: var(--surface-strong);
  font-family: var(--mono); font-size: 10.5px; line-height: 1;
  color: var(--fg-faint); font-variant-numeric: tabular-nums;
}
.evid-fam.active .evid-fam-cnt { background: var(--bg-deep); color: var(--fg-primary); }

/* The list — primary focus: defined cards, severity tag for fast scanning */
.evid-list { display: flex; flex-direction: column; gap: 8px; }
.evid-list .evid {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 15px 17px; margin: 0;
  border: 1px solid var(--border-primary) !important;
  transition: background 120ms ease;
}
.evid-list .evid.critical { border-color: var(--critical-edge) !important; }
.evid-list .evid.high     { border-color: var(--high-edge) !important; }
.evid-list .evid.medium   { border-color: var(--medium-edge) !important; }
.evid-list .evid.clean    { border-color: var(--clean-edge) !important; }
.evid-sev {
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 3px 7px; border-radius: 6px;
  font-size: 9px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  white-space: nowrap;
}
.evid-sev.critical { color: var(--critical); background: var(--critical-bg); }
.evid-sev.high     { color: var(--high);     background: var(--high-bg); }
.evid-sev.medium   { color: var(--medium);   background: var(--medium-bg); }
.evid-sev.clean    { color: var(--clean);    background: var(--clean-bg); }
.evid-main { flex: 1; min-width: 0; }
.evid-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 4px; }
.evid-head .t { flex: 1; min-width: 0; margin-bottom: 0 !important; }
.evid-famtag {
  flex-shrink: 0;
  font-size: 9.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--fg-faint); background: var(--surface-strong);
  padding: 3px 9px; border-radius: 999px;
}
.evid-list .evid .t { font-size: 13.5px; font-weight: 600; margin-bottom: 4px; letter-spacing: -0.005em; color: var(--fg-strong); }
.evid-list .evid .s { font-size: 12px; line-height: 1.6; color: var(--fg-primary); }
.evid-list .evid .s a { color: var(--brass); white-space: nowrap; font-weight: 500; }
.evid-empty {
  font-style: italic; color: var(--fg-faint);
  font-size: 12px; padding: 14px 17px;
  background: var(--surface-faint); border: 1px solid var(--border-primary); border-radius: 10px;
}
/* ─── Sinais collapsible · reveals the rule a signal triggered ─── */
.card-sub {
  font-size: 12px; line-height: 1.55; color: var(--fg-faint);
  margin: -4px 0 12px; max-width: 62ch;
}
.evid-list .evid.evid-collapse {
  display: block; padding: 0; overflow: hidden;
}
.evid-row {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto auto;
  align-items: center; column-gap: 14px;
  width: 100%; padding: 13px 17px; margin: 0;
  background: transparent; border: none; cursor: pointer;
  text-align: left; font: inherit; color: inherit;
  transition: background 120ms ease;
}
.evid-row .evid-sev { justify-self: start; margin-top: 0; }
.evid-row:hover { background: rgba(255,255,255,0.022); }
[data-theme="light"] .evid-row:hover { background: rgba(15,23,42,0.025); }
.evid-chev {
  flex-shrink: 0; align-self: center; margin-left: 4px;
  color: var(--fg-faint); display: inline-flex;
  transition: transform 160ms ease, color 120ms ease;
}
.evid-collapse.open .evid-chev { transform: rotate(90deg); color: var(--fg-primary); }
.evid-row:hover .evid-chev { color: var(--fg-primary); }

/* Delta pill on the header row — colour follows the row's severity band
   so border, severity tag and delta read as one accent. */
.evid-delta {
  flex-shrink: 0; justify-self: end;
  min-width: 58px; text-align: center;
  font-family: var(--mono); font-size: 11.5px; font-weight: 600;
  font-variant-numeric: tabular-nums;
  padding: 4px 10px; border-radius: 999px;
}
.evid-delta.critical { color: var(--critical); background: var(--critical-bg); }
.evid-delta.high     { color: var(--high);     background: var(--high-bg); }
.evid-delta.medium   { color: var(--medium);   background: var(--medium-bg); }
.evid-delta.clean    { color: var(--clean);    background: var(--clean-bg); }
.evid-delta.zero,
.evid-delta.none     { color: var(--fg-faint); background: var(--surface-strong); }

.evid-rule {
  margin: 0 17px 16px;
  padding: 13px 15px;
  background: var(--surface-faint);
  border: 1px solid var(--border-faint);
  border-left: 2px solid var(--brass);
  border-radius: 8px;
}
.evid-collapse.critical .evid-rule { border-left-color: var(--critical); }
.evid-collapse.high     .evid-rule { border-left-color: var(--high); }
.evid-collapse.medium   .evid-rule { border-left-color: var(--medium); }
.evid-collapse.clean    .evid-rule { border-left-color: var(--clean); }
.evid-rule-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 9px;
}
.evid-rule-eyebrow {
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--fg-faint);
}
.evid-rule-delta {
  flex-shrink: 0;
  font-family: var(--mono); font-size: 12px; font-weight: 600;
  font-variant-numeric: tabular-nums;
  padding: 3px 9px; border-radius: 999px;
}
.evid-rule-delta.pos  { color: var(--critical); background: var(--critical-bg); }
.evid-rule-delta.neg  { color: var(--clean);    background: var(--clean-bg); }
.evid-rule-delta.zero { color: var(--fg-faint); background: var(--surface-strong); }
.evid-row > .evid-rule-delta { flex-shrink: 0; align-self: center; }

/* Rule-first header line: ID · name · family */
.evid-rule-line {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 11px;
}
.evid-ruleid {
  font-family: var(--mono); font-size: 11.5px; font-weight: 600;
  color: var(--brass); letter-spacing: 0.01em; flex-shrink: 0;
}
.evid-ruleid.none { color: var(--fg-faint); }
.evid-rulename {
  font-size: 13.5px; font-weight: 600; color: var(--fg-strong);
  letter-spacing: -0.005em;
}

/* Expanded body — the triggering signal */
.evid-sig-title {
  font-size: 12.5px; font-weight: 600; color: var(--fg-strong);
  margin-bottom: 5px; letter-spacing: -0.005em;
}
.evid-sig-rationale {
  font-size: 11px; line-height: 1.6; color: var(--fg-faint);
  margin: 10px 0 0; text-wrap: pretty;
}
.evid-sig-rationale-lbl {
  display: inline-block; margin-right: 8px;
  font-family: var(--mono); font-size: 9px; font-weight: 700;
  letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--fg-faint); background: var(--surface-strong);
  padding: 2px 7px; border-radius: 999px; vertical-align: 1px;
}
.evid-rule-id {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 10px;
  margin-bottom: 7px;
}
.evid-rule-id .mono {
  font-family: var(--mono); font-size: 11.5px; font-weight: 600;
  color: var(--brass); letter-spacing: 0.01em;
}
.evid-rule-desc { font-size: 12.5px; font-weight: 550; color: var(--fg-strong); }
.evid-rule-fam {
  font-size: 9.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--fg-faint); background: var(--surface-strong);
  padding: 3px 9px; border-radius: 999px;
}
.evid-rule-why {
  font-size: 11.5px; line-height: 1.6; color: var(--fg-primary);
  margin: 0; text-wrap: pretty;
}
.evid-rule-none {
  font-size: 11.5px; line-height: 1.6; color: var(--fg-faint); font-style: italic;
}

@media (max-width: 720px) {
  .evid-sev { width: auto; }
  .evid-list .evid { flex-wrap: wrap; gap: 6px; }
  .evid-row { grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 10px; row-gap: 6px; }
  .evid-row .evid-delta { grid-column: 2 / 4; justify-self: start; }
  .evid-row .evid-chev { grid-row: 1; grid-column: 3; }
}

/* ─── Force-graph chrome ──────────────────────────────────── */
.gt-legend-row {
  background: transparent;
  border: 1px solid var(--border-faint);
  border-radius: 10px;
  padding: 9px 14px;
  font-size: 10.5px;
}
.gt-legend-sep { background: var(--border-faint); opacity: 1; }
.gt-depth { background: var(--surface-faint); padding: 2px; border-radius: 999px; }
.gt-depth-btn { padding: 5px 12px; font-size: 11px; border-radius: 999px; color: var(--fg-faint); }
.gt-depth-btn.active {
  background: var(--surface-strong); color: var(--fg-strong);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.045);
}

/* Profile toggle — match segmented control */
.profile-toggle {
  background: var(--surface-strong);
  border-radius: 999px;
  padding: 3px;
  box-shadow: 0 16px 40px -16px rgba(0,0,0,0.55), 0 0 0 1px var(--border-faint);
}
.profile-toggle button.active {
  background: var(--surface-soft-active);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}

/* ─── Feedback chrome — calmer chips ─────────────────────── */
.fb-thumb {
  background: rgba(255,255,255,0.035);
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 10.5px;
}
.fb-thumb:hover:not(:disabled) { background: rgba(255,255,255,0.06); }
.fb-tag-chip, .fb-radio-chip {
  background: rgba(255,255,255,0.035);
  font-size: 11.5px;
}
.fb-tag-chip:hover, .fb-radio-chip:hover { background: rgba(255,255,255,0.06); }
.fb-tag-readonly { background: rgba(255,255,255,0.03); padding: 2px 9px; }
.fb-pop {
  background: var(--surface-strong);
  border-radius: 14px;
  box-shadow: 0 32px 80px -16px rgba(0,0,0,0.6), 0 0 0 1px var(--border-faint);
}

/* Diff rules under evidence card — softer well */
.coaf-tbl tbody tr.row-selected { background: rgba(255,255,255,0.04); }
.coaf-tbl tbody tr.row-selected:hover { background: rgba(255,255,255,0.06); }

/* ─── Tick-scale — slightly softer baseline ─────────────── */
.tick-scale .t { background: rgba(255,255,255,0.035); }
.tick-scale .t.on { background: var(--fg-disabled); }

/* ─── Source row missing — neutral, not warning-orange ─── */
.src-row-missing .src-ts { color: var(--fg-disabled); }

/* ─── Final cohesion: any card-in-card .paper inside a .card
   should flatten to transparent so we don't double-stack tones */
.card .paper:not(.deep):not(.flat),
.paper .card,
.card .card {
  background: transparent;
  box-shadow: none;
}

/* ─── Make link color completely neutral on dossier copy ─ */
.signal-link { color: var(--fg-faint); }
.signal-link:hover { color: var(--fg-strong); }

/* ─── Scrollbar — even quieter ──────────────────────────── */
*::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.06); }
*::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.12); }

/* ═════════════════════════════════════════════════════════════════════════
   V2.4 · NEUTRAL CONSISTENCY PASS
   Final visual cohesion sweep — product / IA / spacing UNCHANGED.

   1. Purge blue cast from neutral chrome — true charcoal & graphite palette.
   2. Severity surfaces (critical / high / medium / clean / info) become
      one component with one treatment: soft 8–10% tinted fill, no border,
      no left accent strip. Yellow / medium picks up the same fill as
      everything else.
   3. Active tabs / selected nav items lose the top-edge 1px highlight.
      Selection is communicated through brighter surface + stronger text.
   4. Monogram avatars + initials badges shed their colored outlines and
      sit on subtle (~12%) tinted fills.
   5. Fills over borders, surfaces over outlines, everywhere.
   ═════════════════════════════════════════════════════════════════════════ */

:root {
  /* True-neutral charcoal/graphite. No blue cast.
     Same lightness ladder as V2.3 — only hue is removed. */
  --page:             #0B0B0B;   /* page / canvas */
  --page-faint:       #0F0F0F;   /* topbar */
  --surface:          #131313;   /* primary card / panel */
  --surface-faint:    #181818;   /* hover / secondary surface */
  --surface-strong:   #1E1E1E;   /* elevated / avatar / modal */
  --bg-deep:          #060606;   /* sunken wells (chart canvas, code) */

  --surface-soft:        #181818;
  --surface-soft-hover:  #1F1F1F;
  --surface-soft-active: #262626;

  /* Hairlines remain neutral whites — already hue-free. */

  /* Lift medium to the same baseline as the others so yellow status
     surfaces stop reading as a different component. */
  --critical-bg:  rgba(217, 64, 64, 0.08);
  --high-bg:      rgba(240,112, 48, 0.08);
  --medium-bg:    rgba(229,178, 58, 0.08);   /* derived from --nl-yellow */
  --clean-bg:     rgba( 29,184,138, 0.08);
  --info-bg:      rgba(107,196,240, 0.08);

  /* Selection elevation — soft drop shadow only, no inset top sheen. */
  --active-fill-shadow:
    0 1px 2px rgba(0,0,0,0.22),
    0 6px 14px -8px rgba(0,0,0,0.42);
}

/* ─── Evidence / status cards — uniform soft-fill component ───────── */
.evid,
.evid.critical,
.evid.high,
.evid.medium,
.evid.clean {
  border: none !important;
  border-left: none !important;
  border-radius: 10px;
  padding: 13px 16px;
}
.evid           { background: var(--surface-faint); }
.evid.critical  { background: var(--critical-bg); }
.evid.high      { background: var(--high-bg); }
.evid.medium    { background: var(--medium-bg); }
.evid.clean     { background: var(--clean-bg); }

/* Recommendation banner — drop any residual left accent + neutral icon. */
.d-banner {
  border: none !important;
  border-left: none !important;
  background: var(--surface-faint);
}
.d-banner-icon { color: var(--fg-faint); }

/* ─── Selection states — no top-edge highlight, anywhere ─────────── */
.sb-item.active {
  background: var(--surface-soft-active);
  color: var(--fg-strong);
  box-shadow: none;
  border: 1px solid transparent;
  font-weight: 600;
}
.sb-item.active .sb-item-count { color: var(--fg-primary); }
.sb-item:hover { background: var(--surface-soft); }
.sb-item.danger.active { color: var(--fg-strong); }

.profile-toggle button.active {
  background: var(--surface-soft-active);
  color: var(--fg-strong);
  box-shadow: none;
}

.gt-depth-btn.active {
  background: var(--surface-soft-active);
  color: var(--fg-strong);
  box-shadow: none;
}

/* Tab pills: still use the cream fill, but elevation comes from a soft
   drop shadow only — the inset top stripe is gone via --active-fill-shadow. */

/* ─── Avatars / initials badges — soft tint, no outline ──────────── */
.user-av {
  background: var(--surface-soft);
  border: none !important;
  box-shadow: none;
  color: var(--fg-strong);
}
.d-id-av {
  background: var(--surface-soft);
  border: none !important;
  box-shadow: none;
  color: var(--fg-strong);
}
.fb-history-icon {
  border: none !important;
  box-shadow: none !important;
}

/* ─── Pills already use soft-tint fills; drop any leftover stroke ─ */
.pill,
.pill.critical,
.pill.high,
.pill.medium,
.pill.clean,
.pill.info,
.pill.neutral,
.pill.outline { border-color: transparent !important; }

/* ─── Stamps — fill only, no border ──────────────────────────────── */
.stamp { border: none !important; }

/* ─── Inline severity-bordered initial avatars (UBOs in evidence
   panel) — kill the colored ring; soft fill carries the meaning. */
.section-body > div > div[style*="border: 1px solid var(--critical)"],
.section-body > div > div[style*="border: 1px solid var(--high)"],
.section-body > div > div[style*="border: 1px solid var(--medium)"],
.section-body > div > div[style*="border: 1px solid var(--clean)"] {
  border: none !important;
}

/* ─── Modal chrome / cards — neutral, no left rules ──────────────── */
.modal { background: var(--surface); }
.card-foot-btn { background: transparent; }
.card-foot-btn:hover { background: var(--surface-soft); }

/* ─── Hairline edges only where they earn it ─────────────────────── */
.section-head { border-bottom: 1px solid var(--border-faint); }
.modal .hd    { border-bottom: 1px solid var(--border-faint); }
.modal .ft    { border-top:    1px solid var(--border-faint); }

/* ═════════════════════════════════════════════════════════════════════════
   V2.4.1 · TOP-EDGE HIGHLIGHT TERMINATION
   Strips every remaining 1px white top-stripe, top-bright gradient, and
   top-edge inset sheen — across cream pills, dark selected tiles, inputs,
   buttons, avatars, cards, modals, pop-overs. Selection now reads only via
   surface fill + text contrast (+ optional outer drop shadow).
   ═════════════════════════════════════════════════════════════════════════ */

:root {
  /* Cream pill — flat fill, no top-bright gradient. */
  --selected-fill:   #ECECE8;
  --selected-shadow: 0 1px 2px rgba(0,0,0,0.22),
                     0 6px 14px -8px rgba(0,0,0,0.42);

  /* Active pill (white-fill tabs / toggles) — outer shadow only. */
  --active-fill-shadow:
    0 1px 2px rgba(0,0,0,0.22),
    0 6px 14px -8px rgba(0,0,0,0.42);

  /* Soft surface shadows — outer-only, no inset top stripe. */
  --shadow-soft-1: 0 1px 2px rgba(0,0,0,0.22),
                   0 8px 18px -10px rgba(0,0,0,0.42);
  --shadow-soft-2: 0 4px 12px rgba(0,0,0,0.35),
                   0 24px 56px -24px rgba(0,0,0,0.65);
}

/* ─── Selected / active surfaces — uniform top to bottom ─────────── */
.sb-item.active,
.profile-toggle button.active,
.gt-depth-btn.active,
.amb-toggle button.on,
.amb-toggle button.on.prod,
.fb-tag-chip.on,
.fb-radio-chip.on {
  box-shadow: none !important;
  background-image: none !important;
}

/* Tab pills — keep the cream fill but elevation is outer-shadow only. */
.dt-tab.active,
.tabs button.active {
  box-shadow: var(--active-fill-shadow) !important;
  background-image: none !important;
}
.dt-tab.active .dt-count,
.tabs button.active .cnt { box-shadow: none !important; }

/* Primary CTA — flat cream pill, no inset top stripe. */
.btn.primary {
  background: var(--selected-fill) !important;
  background-image: none !important;
  box-shadow: var(--selected-shadow) !important;
}
.btn.primary:hover {
  background: var(--selected-fill) !important;
  background-image: none !important;
}

/* Profile toggle (PJ/PF) active — outer shadow only, no inset sheen. */
.profile-toggle button.active {
  background: var(--active-fill) !important;
  color: var(--active-fill-fg) !important;
  box-shadow: var(--active-fill-shadow) !important;
}

/* ─── Inputs / fields — strip the inset 1px top highlight ──────── */
.input,
.input:focus,
.hero-search,
.hero-search:focus-within {
  box-shadow: none !important;
}
.input:focus,
.hero-search:focus-within {
  outline: 1px solid var(--border-strong);
  outline-offset: 0;
}

/* ─── Buttons (non-primary) — flat fill, hover by background only ─ */
.btn               { box-shadow: none !important; }
.btn:hover         { box-shadow: none !important; }
.btn:focus-visible {
  box-shadow: none !important;
  outline: 1px solid var(--border-strong);
  outline-offset: 1px;
}

/* ─── Avatars / badges — flat fill, no inset top sheen ──────────── */
.user-av,
.d-id-av,
.fb-history-icon { box-shadow: none !important; }

/* ─── Cards / paper / modals / popovers — outer shadow only ───── */
.card, .paper        { box-shadow: var(--shadow-soft-1); }
.paper.flat          { box-shadow: none !important; }
.paper.deep          { box-shadow: none !important; }
.modal               { box-shadow: var(--shadow-soft-2); }
.fb-pop              { box-shadow: var(--shadow-soft-2); }
.fb-kpi              { box-shadow: var(--shadow-soft-1); }
.fb-conc-bar         { box-shadow: none !important; }
.builder-step-n,
.builder-step.on .builder-step-n,
.builder-step.done .builder-step-n,
.gt-chain-node,
.gt-chain-leaf       { box-shadow: none !important; }

/* ─── Sidebar item hover — flat fill only ──────────────────────── */
.sb-item:hover { box-shadow: none; }

/* ═════════════════════════════════════════════════════════════════════════
   V2.5 · CANONICAL SEMANTIC PALETTE + OPACITY DISCIPLINE
   Single source of truth for every status/risk surface in the product.

   Six solids — and ONLY these six — are allowed as semantic hues:

     #D94040  rose     critical / high risk
     #F07030  orange   warning  / elevated risk
     #E5B23A  yellow   medium  risk           ← new DS token
     #1DB88A  teal     positive / safe / cleared
     #6BC4F0  sky      informational
     #3D6FE8  blue     primary / system

   The yellow (#E5B23A) was designed to sit naturally between orange
   (#F07030) and teal (#1DB88A) — warm amber, similar perceived
   brightness, not neon, not washed out, readable on dark.

   Every tinted treatment is derived from one of these solids via
   opacity. NEVER hardcode a new rgba/hex for a status surface.

   Recommended scale (matches PRD opacity guidance):
     ─ subtle background    : 0.08  (8 %)   surface tint, hover hint
     ─ pill / badge fill    : 0.14  (14%)   chip, signal dot halo
     ─ stronger emphasis    : 0.26  (26%)   active pill border, focus ring
   Use the *-bg / *-bg-emph / *-edge tokens below — do not invent.
   ═════════════════════════════════════════════════════════════════════════ */

:root {
  /* solids — re-asserted for inheritance + tooling clarity */
  --nl-rose:     #D94040;
  --nl-orange:   #F07030;
  --nl-yellow:   #E5B23A;
  --nl-teal:     #1DB88A;
  --nl-sky:      #6BC4F0;
  --nl-blue:     #3D6FE8;

  /* foreground semantic tokens — BOUND to the canonical solids.
     Used for icons, labels, dots, bar fills, numbers — anywhere a
     status colour is rendered as a foreground element. */
  --critical:    var(--nl-rose);    /* #D94040 */
  --high:        var(--nl-orange);  /* #F07030 */
  --medium:      var(--nl-yellow);  /* #E5B23A */
  --clean:       var(--nl-teal);    /* #1DB88A */
  --info:        var(--nl-sky);     /* #6BC4F0 */

  /* tinted backgrounds — every one derived from its solid via alpha.
     Use ONLY these tokens for tinted surfaces. */
  --critical-bg:       rgba(217,  64,  64, 0.08);
  --high-bg:           rgba(240, 112,  48, 0.08);
  --medium-bg:         rgba(229, 178,  58, 0.10);  /* yellow reads a hair softer @ 8% — bump to 10% for parity */
  --clean-bg:          rgba( 29, 184, 138, 0.08);
  --info-bg:           rgba(107, 196, 240, 0.08);
  --blue-bg:           rgba( 61, 111, 232, 0.08);

  --critical-bg-emph:  rgba(217,  64,  64, 0.14);
  --high-bg-emph:      rgba(240, 112,  48, 0.14);
  --medium-bg-emph:    rgba(229, 178,  58, 0.16);
  --clean-bg-emph:     rgba( 29, 184, 138, 0.14);
  --info-bg-emph:      rgba(107, 196, 240, 0.14);
  --blue-bg-emph:      rgba( 61, 111, 232, 0.14);

  --critical-edge:     rgba(217,  64,  64, 0.26);
  --high-edge:         rgba(240, 112,  48, 0.26);
  --medium-edge:       rgba(229, 178,  58, 0.28);
  --clean-edge:        rgba( 29, 184, 138, 0.26);
  --info-edge:         rgba(107, 196, 240, 0.26);
  --blue-edge:         rgba( 61, 111, 232, 0.30);

  /* brass = primary blue, restated so it always lands on the canonical hue */
  --brass:        var(--nl-blue);
  --brass-dim:    var(--nl-blue-dim);
  --brass-bg:     var(--blue-bg-emph);
}

/* ─── Medium / yellow surfaces — same component vocabulary as the
   other severities. Soft fill, no border, text-tone via --medium. */
.pill.medium,
.evid.medium,
.fb-kpi-value.tone-medium { color: var(--medium); }
.pill.medium    { background: var(--medium-bg-emph); border-color: transparent; }
.evid.medium    { background: var(--medium-bg); }
.signal.sev-medium .signal-dot {
  background: var(--medium);
  box-shadow: 0 0 0 4px var(--medium-bg);
}
.tick-scale .t.medium,
.tick-scale .t.medi { background: var(--medium); }

/* Tab/segment selection lines & focus rings always land on the
   canonical primary blue, never on an arbitrary hue. */
.dt-tab.active { border-bottom-color: var(--nl-blue) !important; }
.tabs button.active { border-bottom-color: var(--nl-blue) !important; }
::selection { background: var(--blue-bg-emph); color: var(--fg-strong); }

/* Tenant / connection "ok" dot inherits the canonical teal — already
   correct, just re-asserted for clarity. */
.tenant-dot { background: var(--clean); }


/* ═════════════════════════════════════════════════════════════════════════
   V2.6 · APP-SHELL CONTAINMENT  (Linear / Raycast / Notion-Calendar feel)

   Purely structural refinement — no product, IA, content or workflow
   changes.  Goal: separate the application *chrome* (topbar + sidebar)
   from the working *workspace*, so the content area reads as a focused
   container sitting inside the shell.

     ┌────────────────────────────────────────────────────────┐
     │  topbar  (page bg — chrome)                            │
     ├────────┬───────────────────────────────────────────────┤
     │        │ ╭───────────────────────────────────────────╮ │
     │ sb     │ │                                           │ │
     │ (page) │ │   workspace card (lifted surface, r=16)   │ │
     │        │ │                                           │ │
     │        │ ╰───────────────────────────────────────────╯ │
     └────────┴───────────────────────────────────────────────┘

   Three-tier surface ladder so cards still read INSIDE the workspace:

     0 · page          deepest    chrome / shell background
     1 · workspace     mid        the focused container
     2 · surface       lifted     panels, cards, paper inside workspace
   ═════════════════════════════════════════════════════════════════════════ */

:root {
  /* deepen the page so the workspace card has room to lift off */
  --page:             #06070A;   /* shell / chrome background */
  --page-faint:       #06070A;   /* topbar — flush with page */

  /* the workspace container itself — a hair lighter than page,
     a hair darker than surface, so the 3-tier ladder reads cleanly */
  --workspace-bg:     #0E0F12;
  --workspace-radius: 16px;
  --shell-gap:        12px;      /* outer margin between card + chrome */
  --shell-gap-r:      14px;      /* a touch more breathing on the right */
}

/* ─── Page / chrome ─────────────────────────────────────────────── */
body { background: var(--page); }

/* Topbar — flush with the page, no chrome card; drop the hairline so
   the workspace card's top edge is the only visual seam. */
.topbar {
  background: var(--page) !important;
  border-bottom: none !important;
  box-shadow: none !important;
}
.topbar::after { display: none !important; }

/* Sidebar — sits directly on the page surface, no card, no border */
.sidebar {
  background: var(--page) !important;
  border-right: none !important;
  box-shadow: none !important;
}

/* ─── Workspace container — the focused work surface ───────────── */
.workspace {
  /* outer gap between card and the chrome on all 4 sides */
  margin-top:    calc(var(--header-h) + var(--shell-gap));
  margin-left:   calc(var(--sidebar-w) + 4px);   /* sidebar already has its own inner padding — tight here */
  margin-right:  var(--shell-gap-r);
  margin-bottom: var(--shell-gap);

  /* container surface */
  background: var(--workspace-bg);
  border-radius: var(--workspace-radius);

  /* sized so the card always fills the available vertical space —
     content inside scrolls naturally with the page */
  min-height: calc(100vh - var(--header-h) - var(--shell-gap) * 2);

  /* surface contrast does the heavy lifting; the hairline is barely
     there, only to crisp the edge on very dark monitors */
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.025),
    0 1px 2px rgba(0,0,0,0.45),
    0 28px 64px -32px rgba(0,0,0,0.7);

  /* let absolutely-positioned overlays (feedback popover, tooltips)
     escape the card; inner padding keeps content off the corners */
  isolation: isolate;
}

/* On smaller widths, keep the structure but tighten the gaps slightly */
@media (max-width: 1280px) {
  .workspace {
    margin-left: calc(var(--sidebar-w) + 2px);
    margin-right: 8px;
    margin-bottom: 8px;
    margin-top: calc(var(--header-h) + 8px);
  }
}

/* ─── Inside the card: cards/papers stay one step lifted so they
   still read as elements within the workspace, not the workspace
   itself.  --surface is already the right value (#131313) — re-assert
   the relationship for clarity. */
.card,
.paper:not(.flat):not(.deep) {
  background: var(--surface);   /* lifted above --workspace-bg */
}

/* Modal scrim / popovers — render relative to the viewport, not the
   workspace card; they need to escape the rounded clip. Both already
   use position:fixed so they sit on top of everything anyway. */

/* Brand mark in the topbar — drop the right divider stripe so the
   topbar reads as one quiet plane. */
.topbar-brand { border-right: none !important; }


/* ═════════════════════════════════════════════════════════════════════════
   V2.9 · PERSISTENT WORKSPACE FRAME

   The workspace becomes a fixed scroll container so its rounded corners,
   border, and surface ALWAYS stay visible. Page-level scrolling moves
   the dossier content INSIDE the card; the card frame itself is pinned.

      ┌─────────────────────────────────────────────────────────┐
      │  topbar  (fixed)                                        │
      │ ┌────────┬─────────────────────────────────────────────┐│
      │ │ side-  │ ╭──── workspace card (FIXED frame) ───────╮ ││
      │ │ bar    │ │  • frame stays put                       │ ││
      │ │ (fixed)│ │  • content scrolls inside                │ ││
      │ │        │ ╰──────────────────────────────────────────╯ ││
      │ └────────┴─────────────────────────────────────────────┘│
      └─────────────────────────────────────────────────────────┘

   No JSX changes — purely CSS. The .workspace was previously a flow
   block whose top edge slid under the fixed topbar on scroll; pinning
   it to the viewport eliminates that occlusion.
   ═════════════════════════════════════════════════════════════════════════ */

html, body { height: 100%; overflow: hidden; }   /* page itself no longer scrolls */

/* Asserted AFTER the V2.7 .workspace margin rule in source order so
   these !important fixed-position values actually win. */
.workspace,
.workspace.workspace {       /* doubled selector to outweigh later overrides */
  position: fixed !important;
  top:    calc(var(--header-h) + var(--shell-gap)) !important;
  left:   var(--content-left)  !important;
  right:  var(--content-right) !important;
  bottom: var(--shell-gap)     !important;
  margin: 0 !important;
  min-height: 0 !important;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-gutter: auto;
  scrollbar-width: none;
}
.workspace::-webkit-scrollbar { width: 0; height: 0; background: transparent; }

@media (max-width: 1280px) {
  .workspace {
    top:    calc(var(--header-h) + 8px) !important;
    bottom: 8px !important;
  }
}




/* ═════════════════════════════════════════════════════════════════════════
   V2.7 · TOPBAR ↔ WORKSPACE HORIZONTAL ALIGNMENT

   The sidebar is a separate layout region (full-height column on the left).
   The topbar and the workspace card share ONE grid: identical left edge,
   identical right edge, identical horizontal margins. The page now reads
   as a perfectly symmetrical shell, top to bottom.

      ┌────────────┬────────────────────────────────────┐
      │            │   topbar  (aligned with workspace) │
      │  SIDEBAR   ├────────────────────────────────────┤
      │  (its own  │   ╭────────────────────────────╮   │
      │  region,   │   │                            │   │
      │  full-     │   │   workspace card           │   │
      │  height)   │   │                            │   │
      │            │   ╰────────────────────────────╯   │
      └────────────┴────────────────────────────────────┘
        ↑              ↑                              ↑
        sidebar       shared LEFT edge        shared RIGHT edge
                       (= --shell-gap)         (= --shell-gap)
   ═════════════════════════════════════════════════════════════════════════ */

:root {
  /* one knob controls the gap on both sides of the content area —
     left margin (between sidebar and topbar/workspace) equals right
     margin (between topbar/workspace and viewport edge) */
  --shell-gap:   12px;
  --shell-gap-r: 12px;   /* re-asserted to match left for symmetry */

  /* shared horizontal grid for everything in the content area (sem sidebar) */
  --content-left:  var(--shell-gap);
  --content-right: var(--shell-gap);
}

/* ─── Sidebar: own layout region, full-height left column ─────── */
.sidebar {
  top: 0 !important;
  /* push the first nav section down so it visually aligns with the
     topbar's content baseline (otherwise it would sit above the topbar) */
  padding-top: calc(var(--header-h) + 4px) !important;
  z-index: 40;
}

/* ─── Topbar: belongs to the content grid, NOT the full viewport ─ */
.topbar {
  left:  var(--content-left)  !important;
  right: var(--content-right) !important;
  /* keep z above sidebar so the search/right utilities float over it
     if widths ever cross; doesn't actually overlap at default sizes */
  z-index: 50;
  /* inner padding shrinks now that the topbar is narrower; the brand,
     search and right utilities still have room to breathe */
  padding: 0 12px !important;
}

/* the topbar's bottom edge is no longer a visual seam — drop its
   hairline so the small gap between topbar bottom and workspace card
   top is what separates them */
.topbar::after { display: none !important; }
.topbar { border-bottom: none !important; box-shadow: none !important; }

/* ─── Workspace: identical horizontal margins to the topbar ───── */
.workspace {
  margin-left:  var(--content-left)  !important;
  margin-right: var(--content-right) !important;
  /* (vertical margins / radius / background unchanged) */
}

/* ─── Smaller viewports — keep the grid relationship intact ──── */
@media (max-width: 1280px) {
  :root {
    --shell-gap:   8px;
    --shell-gap-r: 8px;
  }
  .topbar { padding: 0 10px !important; }
}


/* ═════════════════════════════════════════════════════════════════════════
   V2.8 · SIDEBAR-ANCHORED BRAND · NEUTRAL CHARCOAL PALETTE · FLAT ELEVATION

   Three coordinated changes, all CSS:

   1. The logo + version + BETA badge are pinned over the sidebar column,
      visually owned by the left rail. The search + right utilities live
      on the workspace grid (their left edge = workspace's left edge).

      ┌────────────┬─────────────────────────────────────┐
      │            │   ┌───┐                  ┌────────┐ │
      │ ⬢ NLBS.AI │   │ 🔎 │  search…         │  user  │ │  <- topbar
      │  v0.4 BETA│   └───┘                  └────────┘ │
      ├────────────┼─────────────────────────────────────┤
      │  SIDEBAR   │   ╭───── workspace card ────────╮   │
      │            │   │                             │   │
      └────────────┴─────────────────────────────────────┘

   2. Strip every remaining blue/navy cast. Page / chrome / workspace /
      cards / panels resolve to true neutral charcoal:
        #060606  page              (chrome / shell)
        #0B0B0B  workspace card    (the focused container)
        #141414  surface / cards   (inner elevation step 1)
        #1A1A1A  surface-strong    (modals, avatar fills)
        #222222  surface-soft-active

   3. Zero shadows. No drop, no glow, no inset sheen, no blur, no
      coloured glow. Elevation is conveyed purely by surface contrast
      and the 12px breathing-room gap around the workspace card.
   ═════════════════════════════════════════════════════════════════════════ */

:root {
  /* ─── neutral charcoal ladder (true grayscale, no hue) ─── */
  --page:             #060606;
  --page-faint:       #060606;
  --workspace-bg:     #0B0B0B;

  --surface:          #141414;
  --surface-faint:    #181818;
  --surface-strong:   #1A1A1A;

  --surface-soft:        #141414;
  --surface-soft-hover:  #1A1A1A;
  --surface-soft-active: #222222;

  --bg-deep:          #050505;

  /* ─── borders bumped a touch for clearer separation across the dark
         UI (cards, dividers, panel outlines). Same hue/style, more
         present. Was .085 / .045 / .025. These feed --hairline,
         --rule and --card-stroke downstream. ─── */
  --border-strong:    rgba(255,255,255,0.145);
  --border-primary:   rgba(255,255,255,0.09);
  --border-faint:     rgba(255,255,255,0.055);

  /* ─── zero-shadow tokens — anything that consumes these flattens ─ */
  --selected-shadow:     none;
  --active-fill-shadow:  none;
  --shadow-soft-1:       none;
  --shadow-soft-2:       none;
}

/* ─── 1 · BRAND ANCHORED TO THE SIDEBAR COLUMN ───────────────────── */

/* Topbar spans the full viewport again so the brand can occupy the
   left-rail area while the rest of its children land on the
   workspace grid. */
.topbar {
  left:  0  !important;
  right: 0  !important;
  padding: 0 !important;
  gap: 0   !important;
  background: var(--page) !important;
  border-bottom: none !important;
}

/* The brand becomes a fixed-width column matching the sidebar — logo,
   version label, BETA badge sit visually OVER the sidebar rail. */
.topbar-brand {
  width: var(--sidebar-w) !important;
  flex: 0 0 var(--sidebar-w) !important;
  box-sizing: border-box;
  padding: 0 12px 0 16px !important;   /* matches sidebar inner padding */
  margin: 0 !important;                /* kill any inherited margin so the
                                           gap before search is exactly
                                           --shell-gap (12px) */
  gap: 10px;
  border-right: none !important;
}

/* Search button starts at the workspace's left edge — 12px gap from
   the sidebar/brand column, exactly mirroring the workspace's
   margin-left. */
.topbar-search {
  margin-left: var(--shell-gap)  !important;
  margin-right: 16px;
}

/* Right utilities (tenant chip, bell, settings, user) end at the
   workspace's right edge — same 12px gap as workspace margin-right. */
.topbar-right {
  margin-left: auto;
  margin-right: var(--shell-gap) !important;
}

/* Sidebar no longer needs its old top padding push — the brand now
   sits in the topbar over the sidebar column. First nav section can
   align with the topbar baseline by matching header-h. */
.sidebar {
  top: 0 !important;
  padding-top: calc(var(--header-h) + 4px) !important;
}

/* ─── 2 · NEUTRAL SURFACES (no blue cast anywhere) ───────────────── */

body            { background: var(--page); }
.topbar         { background: var(--page) !important; }
.sidebar        { background: var(--page) !important; }
.workspace      { background: var(--workspace-bg) !important; }
.card,
.paper:not(.flat):not(.deep) { background: var(--surface); }
.modal          { background: var(--surface); }

/* fb-pop, fb-kpi, builder-summary etc inherit through the variables
   above — re-asserting they all land on neutral surfaces. */
.fb-pop         { background: var(--surface); }
.fb-kpi         { background: var(--surface); }
.fb-history     { background: var(--surface-faint); }
.builder-steps,
.builder-summary,
.mlro-context,
.lote-meta      { background: var(--surface-faint); }

/* User-av and identity badge fills become neutral charcoal too. */
.user-av,
.d-id-av,
.fb-history-icon { background: var(--surface-strong); }

/* ─── 3 · FLAT ELEVATION — every box-shadow removed ──────────────── */

*,
*::before,
*::after { box-shadow: none !important; }

/* Workspace card relies on the surface step (page → workspace card →
   inner surfaces) and the breathing-room gap to read as contained. */
.workspace {
  box-shadow: none !important;
  /* re-emphasise the boundary via a single 1px hairline — flat, not
     elevated. Border, not shadow, so it counts as a “subtle border”. */
  border: 1px solid rgba(255,255,255,0.03);
}

/* Modal still needs to read as elevated — convey via a single 1px
   hairline border, no glow. */
.modal { border: 1px solid rgba(255,255,255,0.06); }
.modal-wrap { backdrop-filter: blur(4px); }

/* Profile toggle, popovers — flat fills, hairlines only */
.profile-toggle { border: 1px solid rgba(255,255,255,0.04); }
.fb-pop         { border: 1px solid rgba(255,255,255,0.06); }

/* Tab pills, sidebar items, segmented controls — selection now reads
   purely as surface contrast. No drop shadow at all. */
.dt-tab.active,
.tabs button.active,
.btn.primary,
.sb-item.active,
.profile-toggle button.active,
.gt-depth-btn.active,
.fb-tag-chip.on,
.fb-radio-chip.on { box-shadow: none !important; }


/* ═════════════════════════════════════════════════════════════════════════
   V2.10 · FINAL WORKSPACE POSITION OVERRIDE  (must be last in source order)

   The V2.7 block (line ~3033) sets margin-left/margin-right on .workspace
   with !important. V2.9 makes the workspace position:fixed with left/right,
   but also sets margin:0 !important — only V2.7 comes AFTER V2.9 in source
   order, so V2.7's margin-left wins, pushing the fixed element to
   x = left + margin-left = 244 + 244 = 488px (visibly narrow, far from
   the search bar).

   This block, appended at end-of-file, definitively zeroes the margins so
   the workspace card's left edge = topbar-search left edge = --content-left.
   ═════════════════════════════════════════════════════════════════════════ */
.workspace {
  margin: 0 !important;
  left:   var(--content-left)  !important;
  right:  var(--content-right) !important;
}







/* ═════════════════════════════════════════════════════════════════════════
   V3 · RESPONSIVE  ·  Mobile (≤767) / Tablet (768–1023) / Desktop (≥1024)
   ───────────────────────────────────────────────────────────────────────
   Appended last so its rules win over the V2.7/V2.8/V2.9/V2.10 desktop-
   first overrides. The goal:
     • desktop ≥1024px        – unchanged Helios workspace
     • tablet 768–1023px      – sidebar collapses to drawer, columns stack
                                 lightly, tables become flow with reduced
                                 padding (h-scroll allowed for very dense
                                 tables)
     • mobile  ≤767px         – sidebar = full drawer, top bar compact w/
                                 hamburger + magnifier, every multi-column
                                 grid stacks, dense tables become record
                                 cards (display:block per row), modals
                                 become bottom-sheets, sticky primary
                                 action bar at the dossier footer.
   ───────────────────────────────────────────────────────────────────── */

/* mobile-only chrome: hidden at ≥1024px ------------------------------- */
.mob-menu-btn,
.mob-search-btn,
.nav-scrim { display: none; }


/* ═══════════════ TABLET (≤ 1023px) ═══════════════ */
@media (max-width: 1023px) {
  :root {
    --header-h: 54px;
    --shell-gap: 8px;
    --shell-gap-r: 8px;
    --sidebar-w: 232px;
    /* the workspace card spans full width minus the gutters when the
       sidebar collapses to a drawer */
    --content-left:  var(--shell-gap);
    --content-right: var(--shell-gap-r);
  }

  /* page can now scroll — drop the desktop fixed-frame trick */
  html, body { overflow: visible !important; height: auto !important; }

  /* topbar reverts to spanning full viewport; brand becomes auto-width */
  .topbar { padding: 0 10px !important; gap: 10px !important; }
  .topbar-brand {
    width: auto !important;
    flex: 0 0 auto !important;
    padding: 0 4px !important;
    border-right: 1px solid var(--border-primary) !important;
    margin-right: 4px !important;
  }
  .topbar-brand .brand-ver { display: none; }
  .topbar-brand .brand-tag { display: none; }

  /* hamburger appears, full-width search still visible */
  .mob-menu-btn {
    display: inline-flex;
    align-items: center; justify-content: center;
    width: 38px; height: 38px;
    background: transparent; border: 1px solid transparent;
    border-radius: 8px; color: var(--fg-primary);
    cursor: pointer; flex-shrink: 0;
  }
  .mob-menu-btn:hover { background: var(--surface-faint); color: var(--fg-strong); }

  .topbar-search { margin-left: 0 !important; max-width: none; }
  .tenant-chip { display: none; }                /* tenant name in drawer instead */
  .user-meta { display: none; }                  /* avatar only */
  .user-chip { padding-left: 8px; margin-left: 0; }

  /* sidebar becomes a slide-in drawer */
  .sidebar {
    transform: translateX(-100%);
    transition: transform 220ms cubic-bezier(0.32, 0.72, 0, 1);
    will-change: transform;
    z-index: 90 !important;
    top: 0 !important;
    padding-top: calc(var(--header-h) + 8px) !important;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.04), 24px 0 48px rgba(0,0,0,0.45);
    border-right: 1px solid rgba(255,255,255,0.06);
  }
  body.nav-open .sidebar { transform: translateX(0); }
  .nav-scrim {
    display: block;
    position: fixed; inset: 0; z-index: 80;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(2px);
    opacity: 0; pointer-events: none;
    transition: opacity 180ms ease;
  }
  body.nav-open .nav-scrim { opacity: 1; pointer-events: auto; }
  body.nav-open { overflow: hidden; }   /* lock background scroll while open */

  /* workspace flows naturally underneath the topbar */
  .workspace, .workspace.workspace {
    position: static !important;
    top: auto !important; bottom: auto !important;
    left: auto !important; right: auto !important;
    margin: var(--header-h) var(--shell-gap-r) var(--shell-gap) var(--shell-gap) !important;
    min-height: calc(100vh - var(--header-h) - var(--shell-gap) * 2) !important;
    border: 1px solid rgba(255,255,255,0.03);
    border-radius: 12px;
    overflow: visible !important;
  }

  /* a bit tighter on dossier/doc padding */
  .dossier { padding: 18px 22px 80px !important; }
  .doc     { padding: 22px 22px 80px !important; }

  /* dossier header: score on top, identity stacks under */
  .d-header { flex-direction: column !important; align-items: flex-start !important; gap: 20px !important; }
  .d-score { min-width: 0; align-items: flex-start; }

  /* graph footer collapses to 1-2 cols */
  .gt-foot { grid-template-columns: 1fr 1fr !important; }
  .gt-foot-card:last-child { grid-column: 1 / -1 !important; }

  /* feedback dashboard KPIs to 3-up, charts stack */
  .fb-kpis { grid-template-columns: repeat(3, 1fr) !important; }
  .fb-grid { grid-template-columns: 1fr !important; }

  /* SUSEP exporter: compact */
  .lote-meta { grid-template-columns: repeat(3, 1fr) !important; }
  .builder-summary { grid-template-columns: 1fr 1fr !important; }
  .coaf-expand { grid-template-columns: 1fr !important; }

  /* two-column dossier collapses */
  .d-cols { grid-template-columns: 1fr !important; }
}


/* ═══════════════ MOBILE (≤ 767px) ═══════════════ */
@media (max-width: 767px) {
  :root {
    --header-h: 52px;
    --sidebar-w: 280px;
    --shell-gap: 0px;
    --shell-gap-r: 0px;
    --content-left: 0px;
    --content-right: 0px;
  }

  /* ─ topbar: brand text hidden, only mark visible ─ */
  .topbar {
    padding: 0 6px !important;
    gap: 6px !important;
    background: var(--page) !important;
    border-bottom: 1px solid var(--border-primary) !important;
  }
  .topbar-brand {
    padding: 0 6px 0 0 !important;
    margin-right: 0 !important;
    border-right: none !important;
    gap: 6px !important;
  }
  .topbar-brand .brand-divider,
  .topbar-brand .brand-name { display: none; }
  .topbar-brand .brand-mark img { height: 20px; }

  /* hide the full search button; show the magnifier icon button */
  .topbar-search { display: none !important; }
  .mob-search-btn {
    display: inline-flex;
    align-items: center; justify-content: center;
    width: 44px; height: 44px;
    background: transparent; border: 1px solid transparent;
    border-radius: 10px; color: var(--fg-primary);
    cursor: pointer; flex-shrink: 0; margin-left: auto;
  }
  .mob-search-btn:active,
  .mob-search-btn:focus { background: var(--surface-faint); }

  .mob-menu-btn { width: 44px; height: 44px; }

  /* compact right rail: drop bell + settings, keep avatar only */
  .topbar-right { gap: 4px !important; margin-right: 0 !important; }
  .topbar-right > .icon-btn { display: none; }   /* bell + settings hidden on mobile */
  .user-chip {
    padding: 0 !important; border-left: none !important; margin-left: 0 !important;
  }
  .user-av { width: 34px; height: 34px; font-size: 12px; }

  /* ─ workspace: zero outer gutters, no border, native page scroll ─ */
  .workspace, .workspace.workspace {
    position: static !important;
    margin: var(--header-h) 0 0 0 !important;
    border: none !important;
    border-radius: 0 !important;
    min-height: calc(100vh - var(--header-h)) !important;
    overflow: visible !important;
  }

  /* breathing-room gutters everywhere = 16px (single knob) */
  .dossier { padding: 14px 16px 96px !important; }
  .doc     { padding: 18px 16px 96px !important; max-width: 100%; }

  /* drawer is wider for thumb reach */
  .sidebar { width: var(--sidebar-w); padding: calc(var(--header-h) + 6px) 10px 16px !important; }

  /* ── HERO (search screen) ── */
  .doc h1 { font-size: 36px !important; line-height: 1.05 !important; }
  .hero-search {
    flex-wrap: wrap;
    padding: 10px 10px !important;
    gap: 8px !important;
  }
  .hero-search input { font-size: 16px !important; }
  .hero-search .kbd { display: none; }
  .hero-search .btn.primary { width: 100%; justify-content: center; padding: 10px 12px !important; }

  /* ── BREADCRUMB (compact) ── */
  .bc-row { font-size: 11.5px; margin-bottom: 12px; flex-wrap: wrap; }

  /* ── DOSSIER HEADER ── */
  .d-id-name { font-size: 22px !important; line-height: 1.18 !important; }
  .d-id-title { gap: 12px !important; margin-bottom: 8px !important; }
  .d-id-av { width: 44px !important; height: 44px !important; font-size: 12px !important; }
  .d-id-sub { font-size: 11.5px !important; line-height: 1.5 !important; }
  .d-meta { grid-template-columns: 1fr !important; gap: 4px !important; padding-top: 10px !important; }
  .meta-row { display: grid !important; grid-template-columns: max-content 1fr; gap: 12px; align-items: baseline; }
  .meta-label { font-size: 10.5px !important; text-transform: uppercase; letter-spacing: 0.06em; }
  .meta-value { font-size: 12.5px !important; }

  /* score ring: keeps its hierarchy but smaller, stays in flow row */
  .d-score { flex-direction: row !important; align-items: center !important; gap: 16px !important; min-width: 0 !important; }
  .score-ring-wrap { width: 132px !important; height: 132px !important; flex-shrink: 0; }
  .score-ring { width: 132px !important; height: 132px !important; }
  .score-ring-num { font-size: 42px !important; }
  .score-ring-sub { font-size: 10px !important; }
  .d-score-meta { font-size: 10.5px !important; }

  /* primary action: stays visible inline; secondary actions collapse
     into a sticky bottom-bar on the dossier page */
  .d-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 8px !important;
  }
  .d-actions .btn { width: 100%; justify-content: center; min-height: 44px; }
  .d-actions .btn.primary { grid-column: 1 / -1; }

  /* ── TABS (scrollable strip) ── */
  .dt, .tabs {
    overflow-x: auto;
    flex-wrap: nowrap !important;
    margin-left: -16px; margin-right: -16px;
    padding-left: 16px; padding-right: 16px;
    scrollbar-width: none;
  }
  .dt::-webkit-scrollbar, .tabs::-webkit-scrollbar { display: none; }
  .dt-tab, .tabs button { flex-shrink: 0; padding: 12px 12px !important; }
  .dt-tab-end { margin-left: 0 !important; }

  /* ── TWO-COLUMN GRIDS ── */
  .d-cols { grid-template-columns: 1fr !important; gap: 14px !important; }
  .d-col-main, .d-col-side { gap: 14px !important; }

  /* ── CARDS / SECTION HEADS ── */
  .card-head { padding: 14px 16px 4px !important; }
  .card-title { font-size: 15px !important; }
  .section-head { padding: 12px 16px !important; flex-wrap: wrap; gap: 8px; }
  .section-head h3 { white-space: normal !important; font-size: 15px !important; }
  .section-body { padding: 14px 16px !important; }
  .signal { padding: 14px 16px !important; gap: 10px !important; flex-wrap: wrap; }
  .signal-meta { flex-direction: row; flex-wrap: wrap; gap: 6px; align-items: center; }
  .gt-anom-row { padding: 9px 16px !important; }

  /* ── DENSE TABLES → STACKED CARDS ──
     thead is hidden; every <tr> becomes a card; every <td> becomes a
     row inside the card with its column header as a tiny eyebrow.
     Tables that opt-out (add class .tbl-keep) keep their flow layout
     wrapped in a horizontal scroll container. */
  .card .tbl,
  .paper .tbl,
  .bd .tbl { width: 100%; }

  .tbl:not(.tbl-keep) {
    display: block;
    border: none;
    font-size: 13px;
  }
  .tbl:not(.tbl-keep) thead { display: none; }
  .tbl:not(.tbl-keep) tbody { display: block; }
  .tbl:not(.tbl-keep) tbody tr {
    display: grid;
    grid-template-columns: max-content 1fr;
    column-gap: 14px;
    row-gap: 4px;
    padding: 12px 14px;
    margin: 0 0 8px 0;
    background: var(--surface-faint);
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.04);
  }
  .tbl:not(.tbl-keep) tbody tr:hover { background: var(--surface-faint); }
  .tbl:not(.tbl-keep) tbody tr:last-child { margin-bottom: 0; }
  .tbl:not(.tbl-keep) tbody tr td {
    display: block;
    padding: 0;
    border: none;
    grid-column: 1 / -1;
    text-align: left;
    width: auto !important;
    min-width: 0;
  }
  /* if a cell carries data-label, render it as a tiny eyebrow */
  .tbl:not(.tbl-keep) tbody tr td[data-label] {
    display: grid;
    grid-template-columns: 110px 1fr;
    column-gap: 10px;
    align-items: baseline;
  }
  .tbl:not(.tbl-keep) tbody tr td[data-label]::before {
    content: attr(data-label);
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--fg-faint);
    font-weight: 600;
  }
  .tbl:not(.tbl-keep) tbody tr td[data-primary] {
    font-size: 14.5px;
    color: var(--fg-strong);
    font-weight: 500;
    grid-column: 1 / -1;
    margin-bottom: 2px;
  }
  .tbl:not(.tbl-keep) tbody tr td[data-primary]::before { content: none; }

  /* horizontally scroll any table that opts out of stacking */
  .tbl.tbl-keep {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
    width: 100%;
  }

  /* COAF table: stacks, but keep selected highlight */
  .coaf-tbl:not(.tbl-keep) tbody tr.row-selected {
    background: rgba(61,111,232,0.10) !important;
    border-color: rgba(61,111,232,0.30) !important;
  }

  /* ── FORCE-DIRECTED GRAPH ── */
  .gt-controls {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  .gt-controls-left, .gt-controls-right {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .gt-foot {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .gt-foot-card:last-child { grid-column: auto !important; }
  .gt-chain-result { grid-template-columns: 1fr !important; }
  .gt-chain-steps { padding: 12px !important; }
  .gt-ubo-row { padding: 11px 14px !important; column-gap: 12px !important; }

  /* ── FEEDBACK DASHBOARD ── */
  .fb-kpis {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0 !important;
    border-radius: 12px !important;
  }
  .fb-kpi { padding: 14px 14px !important; }
  .fb-grid { grid-template-columns: 1fr !important; gap: 14px !important; }
  .fb-hist { height: 160px !important; }
  .fb-hist-label { font-size: 9.5px !important; }
  .fb-pop { width: calc(100vw - 24px); max-width: 100%; right: 0 !important; left: 12px !important; }

  /* ── SUSEP / COAF EXPORTER ── */
  .lote-meta { grid-template-columns: 1fr 1fr !important; gap: 10px !important; padding: 12px 14px !important; }
  .builder-steps { flex-wrap: wrap !important; gap: 8px !important; padding: 10px 12px !important; }
  .builder-step { font-size: 11.5px !important; }
  .builder-step-sep { display: none !important; }
  .builder-summary { grid-template-columns: 1fr !important; gap: 10px !important; padding: 12px 14px !important; }
  .coaf-expand { grid-template-columns: 1fr !important; gap: 16px !important; }
  .amb-toggle { width: 100%; justify-content: stretch; }
  .amb-toggle button { flex: 1; text-align: center; }

  /* ── MODALS → BOTTOM SHEETS ── */
  .modal-wrap {
    padding: 0 !important;
    align-items: flex-end !important;
  }
  .modal {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 92vh !important;
    border-radius: 16px 16px 0 0 !important;
    margin: 0 !important;
    animation: sheet-up 220ms cubic-bezier(0.32, 0.72, 0, 1);
  }
  @keyframes sheet-up {
    from { transform: translateY(24px); opacity: 0; }
    to { transform: none; opacity: 1; }
  }
  .modal .hd { padding: 16px 18px 12px !important; }
  .modal .bd { padding: 16px 18px !important; }
  .modal .ft {
    padding: 12px 18px !important;
    flex-direction: column-reverse !important;
    align-items: stretch !important;
    gap: 8px !important;
    /* keep close/confirm reachable; the sheet has its own scroll above */
    position: sticky;
    bottom: 0;
    background: var(--surface-faint);
    border-top: 1px solid var(--border-faint);
  }
  .modal .ft .btn { width: 100%; justify-content: center; min-height: 44px; }
  .modal-wrap { backdrop-filter: blur(2px); background: rgba(0,0,0,0.55) !important; }

  /* a small drag-handle hint on the bottom-sheet header */
  .modal .hd::before {
    content: '';
    position: absolute; top: 6px; left: 50%; transform: translateX(-50%);
    width: 36px; height: 4px; border-radius: 999px;
    background: rgba(255,255,255,0.18);
  }
  .modal .hd { position: relative; padding-top: 22px !important; }

  /* ── PILLS / BUTTONS / INPUTS: hit targets ── */
  .btn { min-height: 36px; padding: 8px 12px !important; font-size: 13px !important; }
  .btn.sm { min-height: 32px; }
  .icon-btn { width: 40px; height: 40px; }
  .input { font-size: 16px; padding: 12px 14px; min-height: 44px; }   /* 16px prevents iOS zoom */

  /* ── PROFILE TOGGLE (floating PJ/PF) ── */
  .profile-toggle {
    left: 16px; right: 16px; bottom: 16px;
    display: flex; justify-content: stretch;
  }
  .profile-toggle button { flex: 1; justify-content: center; }

  /* ── RECENT CASES (search screen wrap) ── */
  .doc > div[style*="margin: '64px auto 0'"],
  .doc > div[style*="max-width: 1180"] { max-width: 100% !important; margin-top: 36px !important; }

  /* ── TIMELINE ── */
  .tl-item { padding: 10px 16px !important; }

  /* ── FEEDBACK BAR INSIDE SECTION-HEAD ── */
  .section-head .fb-bar { width: 100%; justify-content: flex-end; }

  /* ── EVIDENCE CARDS ── */
  .evid { padding: 12px 14px !important; }
}


/* ═══════════════ EXTRA-SMALL (≤ 380px) — keep everything legible ═══ */
@media (max-width: 380px) {
  .d-id-name { font-size: 20px !important; }
  .doc h1 { font-size: 30px !important; }
  .score-ring-wrap { width: 108px !important; height: 108px !important; }
  .score-ring { width: 108px !important; height: 108px !important; }
  .score-ring-num { font-size: 34px !important; }
  .d-actions { grid-template-columns: 1fr !important; }
  .fb-kpis { grid-template-columns: 1fr !important; }
  .tbl:not(.tbl-keep) tbody tr td[data-label] { grid-template-columns: 1fr; }
  .tbl:not(.tbl-keep) tbody tr td[data-label]::before { margin-bottom: 2px; }
}


/* ═══════════════ TOUCH-PRIMARY — disable hover-only affordances ═══ */
@media (hover: none) and (pointer: coarse) {
  /* keep tap feedback subtle, not a hover persisting "stuck" */
  .sb-item:hover,
  .btn:hover,
  .icon-btn:hover { background: inherit; }
}


/* ═══════════════ PRINT — let everything flow naturally ═══════════ */
@media print {
  html, body { overflow: visible !important; height: auto !important; }
  .topbar, .sidebar, .nav-scrim, .profile-toggle, .mob-menu-btn, .mob-search-btn { display: none !important; }
  .workspace, .workspace.workspace {
    position: static !important;
    margin: 0 !important;
    border: none !important;
    background: white !important;
    color: black !important;
  }
}



/* ═════════════════════════════════════════════════════════════════════════
   V4 · INITIALS-AVATAR TREATMENT  (unified with pills/badges)

   Any initials-style circular badge (UBO list, graph-side panels,
   ownership tables, evidence rows, investigation views) follows the
   SAME visual recipe as .pill.{tone}:

      background : var(--{tone}-bg)   ← soft tinted wash (~12% opacity)
      color      : var(--{tone})      ← initials at full saturation
      border     : none / hairline tinted to match
      shape      : kept circular, original sizing

   Tone is declared via [data-tone="critical|high|medium|clean|info"] on
   the avatar element, OR by the canonical risk variables on a wrapper.
   The same selector also normalises any inline-styled .gt-ubo-av so a
   stale `background: var(--critical)1F` (invalid CSS) can no longer
   leak the saturated solid fill.
   ───────────────────────────────────────────────────────────────────── */

/* Reset any stale inline saturated fills on the graph UBO avatar so the
   tonal recipe below wins.  (Inline style="background: var(--critical)1F"
   was concatenating onto the CSS variable, producing invalid CSS that
   fell through to the saturated solid color.)  */
.gt-ubo-av { background: var(--surface-faint); color: var(--fg-primary); }

/* ── Tone recipe shared by every initials avatar/badge ────────────── */
.gt-ubo-av[data-tone="critical"],
.av-tone[data-tone="critical"]   { background: var(--critical-bg); color: var(--critical); }
.gt-ubo-av[data-tone="high"],
.av-tone[data-tone="high"]       { background: var(--high-bg);     color: var(--high); }
.gt-ubo-av[data-tone="medium"],
.av-tone[data-tone="medium"]     { background: var(--medium-bg);   color: var(--medium); }
.gt-ubo-av[data-tone="clean"],
.av-tone[data-tone="clean"]      { background: var(--clean-bg);    color: var(--clean); }
.gt-ubo-av[data-tone="info"],
.av-tone[data-tone="info"]       { background: var(--info-bg);     color: var(--info); }
.gt-ubo-av[data-tone="neutral"],
.av-tone[data-tone="neutral"]    { background: var(--surface-faint); color: var(--fg-primary); }

/* No saturated borders — tonal wash only. (Honors flat elevation V2.8.) */
.gt-ubo-av,
.av-tone {
  border: none;
  font-weight: 600;
  letter-spacing: 0.04em;
  font-feature-settings: var(--font-features);
}



/* ═════════════════════════════════════════════════════════════════════════
   V5 · LIGHT MODE  ·  full theme system
   ───────────────────────────────────────────────────────────────────────
   data-theme="light" on <html> swaps the entire visual system. Dark mode
   is the default; light mode is a first-class native theme, not an
   inverted dark mode. Reference: Linear, Notion, Stripe, Raycast.

      App background    #F5F6F8   (calm, slightly cool gray)
      Primary cards     #FFFFFF
      Secondary cards   #FAFBFC
      Borders           rgba(15,23,42, 0.04 / 0.06 / 0.10)
      Text strong       #111827
      Text body         #1F2937
      Text faint        #6B7280
      Text disabled     #9CA3AF
      Brand accent      #2F56B8 (existing nl-blue, darkened slightly for contrast)
      Selected pill     rgba(15,23,42,0.06) wash (replaces the cream gradient)

   The semantic risk hues stay the same; their *-bg variants are bumped
   slightly to read on a near-white surface (≈14% opacity vs 12% on dark).
   ───────────────────────────────────────────────────────────────────── */

/* ── settings-popover chrome (theme switcher) — works in either theme ── */
.settings-wrap { position: relative; display: inline-flex; }
.icon-btn.is-open { background: var(--surface-faint); color: var(--fg-strong); }

.settings-pop {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 200;
  min-width: 220px;
  background: var(--surface);
  border: 1px solid var(--border-primary);
  border-radius: 12px;
  padding: 10px;
  box-shadow:
    0 1px 2px rgba(0,0,0,0.10),
    0 12px 32px rgba(0,0,0,0.18);
  animation: settings-pop-in 140ms ease-out;
}
@keyframes settings-pop-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}
.settings-section + .settings-section { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border-faint); }
.settings-nav-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 8px 10px;
  background: transparent; border: none; border-radius: 8px;
  color: var(--fg-primary); font: 500 13px var(--sans);
  cursor: pointer; text-align: left;
  transition: background 120ms, color 120ms;
}
.settings-nav-item:hover { background: var(--surface-faint); color: var(--fg-strong); }
.settings-section-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-faint);
  font-weight: 600;
  padding: 4px 8px 6px;
}
.theme-options { display: flex; flex-direction: column; gap: 1px; }
.theme-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: transparent;
  border: none;
  border-radius: 8px;
  color: var(--fg-primary);
  font: 500 13px var(--sans);
  cursor: pointer;
  text-align: left;
  transition: background 80ms, color 80ms;
}
.theme-option:hover { background: var(--surface-faint); color: var(--fg-strong); }
.theme-option.on   { color: var(--fg-strong); }
.theme-option-ic { color: var(--fg-faint); display: inline-flex; }
.theme-option.on .theme-option-ic { color: var(--fg-strong); }
.theme-option-label { flex: 1; }
.theme-option-check { color: var(--brass); display: inline-flex; }

/* On mobile, hide the bell but KEEP the gear so the user can switch theme */
@media (max-width: 767px) {
  .topbar-right .icon-btn[aria-label="notificações"] { display: none; }
  .topbar-right .icon-btn[aria-label="configurações"] { display: inline-flex !important; width: 40px; height: 40px; }
  .settings-pop { right: 0; }
}


/* ═════════════════════════════════════════════════════════════════════════
   LIGHT TOKENS  —  declared on the root via [data-theme="light"]
   ═════════════════════════════════════════════════════════════════════════ */

[data-theme="light"] {
  /* ─── Background ladder ─────────────────────────────────────────── */
  --page:              #F5F6F8;     /* app canvas */
  --page-faint:        #F5F6F8;
  --workspace-bg:      #FFFFFF;     /* the focused workspace card */
  --bg-deep:           #EFF1F4;     /* sunken wells, code, graph canvas */

  --surface:           #FFFFFF;     /* primary cards */
  --surface-faint:     #FAFBFC;     /* secondary surfaces, hovers */
  --surface-strong:    #FFFFFF;     /* elevated (modals, avatars) */

  --surface-soft:        #FFFFFF;
  --surface-soft-hover:  #F1F3F5;
  --surface-soft-active: #E9ECEF;
  --surface-tinted:      rgba(15,23,42,0.04);
  --surface-tinted-hi:   rgba(15,23,42,0.07);
  --surface-glass:       rgba(255,255,255,0.86);

  /* ─── Typography hierarchy ──────────────────────────────────────── */
  --fg-strong:         #111827;
  --fg-primary:        #1F2937;
  --fg-faint:          #6B7280;
  --fg-disabled:       #9CA3AF;
  --fg-action:         #2F56B8;     /* link/action text — darker than dark-mode --fg-action */
  --fg-on-dark:        #F2F2F0;

  /* ─── Borders / hairlines ───────────────────────────────────────── */
  --border-strong:     rgba(15,23,42,0.10);
  --border-primary:    rgba(15,23,42,0.06);
  --border-faint:      rgba(15,23,42,0.04);
  --border-action:     var(--nl-blue);

  /* ─── Brand accent (subtly darker on light surfaces) ─────────────── */
  --brass:             #2F56B8;
  --brass-dim:         #1F3F8F;
  --brass-bg:          rgba(47, 86, 184, 0.10);

  /* ─── Selected pill — replaces the cream gradient ────────────────── */
  --selected-fill:     rgba(15, 23, 42, 0.06);
  --selected-fg:       #111827;
  --selected-shadow:   none;

  /* Active fill alias used by primary buttons in the V2.6 layer */
  --active-fill:       #111827;          /* dark surface for primary CTA */
  --active-fill-fg:    #FFFFFF;
  --active-fill-shadow: 0 1px 2px rgba(15,23,42,0.10);

  /* ─── Risk tints — bumped slightly so the wash reads on white ─── */
  --critical-bg:       rgba(217, 64, 64, 0.10);
  --critical-edge:     rgba(217, 64, 64, 0.28);
  --high-bg:           rgba(240, 112, 48, 0.12);
  --high-edge:         rgba(240, 112, 48, 0.30);
  --medium-bg:         rgba(229, 178, 58, 0.16);
  --medium-edge:       rgba(229, 178, 58, 0.34);
  --clean-bg:          rgba(29, 184, 138, 0.12);
  --clean-edge:        rgba(29, 184, 138, 0.30);
  --info-bg:           rgba(107, 196, 240, 0.16);
  --info-edge:         rgba(107, 196, 240, 0.34);

  /* Medium high-emphasis variant referenced in some pills */
  --medium-bg-emph:    rgba(229, 178, 58, 0.22);

  /* ─── Sidebar rail ─────────────────────────────────────────────── */
  --rail-bg:           #FFFFFF;
  --rail-bg-deep:      #FFFFFF;
  --rail-fg:           #1F2937;
  --rail-fg-active:    #111827;

  /* ─── Shadows — soft, low spread, premium SaaS feel ──────────────── */
  --shadow-soft-1:
    0 1px 2px rgba(15,23,42,0.04),
    0 4px 12px rgba(15,23,42,0.04);
  --shadow-soft-2:
    0 1px 2px rgba(15,23,42,0.06),
    0 12px 32px rgba(15,23,42,0.08);

  /* surface-tinted (sometimes used for fills) on light needs different rgb */
  --tint-on-rgb: 15, 23, 42;
}

[data-theme="light"] {
  color-scheme: light;
}


@media (max-width: 1023px) {
}


@media (max-width: 767px) {
}





@media (max-width: 767px) {
}





[data-theme="light"] {
  /* Re-tier the surface ladder for clearer visual layers --------- */
  --page:            #F3F4F6;
  --workspace-bg:    #F3F4F6;   /* workspace becomes the canvas, NOT a card */
  --surface:         #FFFFFF;   /* cards sit ON the canvas */
  --surface-faint:   #F8F9FB;   /* section backgrounds, hovers */
  --surface-strong:  #FFFFFF;   /* elevated (modals, popovers) */
  --bg-deep:         #EDEFF3;

  /* Borders & dividers — fewer lines, mostly hairlines */
  --border-strong:   rgba(15,23,42,0.10);
  --border-primary:  rgba(15,23,42,0.06);
  --border-faint:    rgba(15,23,42,0.04);

  /* Premium elevation tokens --------------------------------- */
  --elev-card:
    0 1px 2px rgba(15,23,42,0.04),
    0 8px 24px rgba(15,23,42,0.06);
  --elev-popover:
    0 1px 2px rgba(15,23,42,0.06),
    0 12px 32px rgba(15,23,42,0.10);
  --elev-modal:
    0 4px 12px rgba(15,23,42,0.08),
    0 24px 64px rgba(15,23,42,0.16);
}





@media (max-width: 767px) {
}



@media (max-width: 380px) {
}



@media (max-width: 1023px) {
}





@media (max-width: 767px) {
}



@media (max-width: 380px) {
}



@media (max-width: 767px) {
}



@media (max-width: 767px) {
}



@media (max-width: 767px) {
}



@media (max-width: 767px) {
}



@media (max-width: 767px) {
}



@media (max-width: 767px) {
}





@media (max-width: 767px) {

  
  .dt {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    overflow-x: visible !important;
    flex-wrap: unset !important;
    margin: 4px 0 18px !important;
    padding: 6px !important;
    gap: 4px !important;
    border: 1px solid var(--border-primary) !important;
    border-radius: 14px !important;
    background: var(--surface) !important;
  }
  .dt-tab {
    padding: 9px 12px !important;
    font-size: 12.5px !important;
    border-radius: 8px !important;
    white-space: normal !important;
    line-height: 1.25 !important;
    min-height: 40px !important;
    text-align: left !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    border-bottom: none !important;
    margin-bottom: 0 !important;
  }
  .dt-tab > span:not(.dt-count) {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
  }
  .dt-tab.active {
    background: var(--selected-fill) !important;
    color: var(--selected-fg) !important;
  }
  .dt-tab-end {
    margin-left: 0 !important;
    justify-content: flex-start !important;
    padding: 9px 12px !important;
    border-radius: 8px !important;
  }
  
  .tabs {
    display: flex !important;
    flex-wrap: wrap !important;
    overflow-x: visible !important;
    border-bottom: none !important;
    background: var(--surface);
    border: 1px solid var(--border-primary);
    border-radius: 12px;
    padding: 4px;
    gap: 4px;
  }
  .tabs button {
    flex: 1 1 auto;
    min-width: 0;
    padding: 8px 10px !important;
    border-radius: 7px;
    border-bottom: none !important;
    margin-bottom: 0 !important;
    white-space: nowrap;
  }

  
  .signal {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 14px 16px !important;
    gap: 10px !important;
    border-top: 1px solid var(--border-faint);
  }
  .signal:first-of-type { border-top: none; }
  .signal-dot {
    flex-shrink: 0;
    align-self: flex-start;
  }
  .signal-body { min-width: 0 !important; width: 100% !important; }
  .signal-title {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    word-break: break-word;
    overflow-wrap: anywhere;
  }
  .signal-desc {
    font-size: 13px;
    line-height: 1.5;
    color: var(--fg-faint);
    word-break: break-word;
    overflow-wrap: anywhere;
  }
  .signal-meta {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 6px 10px !important;
    padding-top: 6px !important;
    margin-top: 2px !important;
    border-top: 1px dashed var(--border-faint);
    width: 100%;
  }
  .signal-meta-tags { display: flex; flex-wrap: wrap; gap: 4px; }
  .signal-meta-code,
  .signal-meta-date {
    font-size: 11px;
    color: var(--fg-faint);
    flex-basis: 100%;
  }
  .signal-meta-code { font-family: var(--mono); }
  .signal-link {
    margin-left: auto;
    font-size: 12px;
  }

  
  .evid {
    padding: 14px 16px !important;
    border-radius: 12px !important;
  }
  .evid .t {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    word-break: break-word;
    overflow-wrap: anywhere;
  }
  .evid .s {
    font-size: 13px;
    line-height: 1.55;
    word-break: break-word;
    overflow-wrap: anywhere;
  }

  
  .tl-item { padding: 10px 16px 14px !important; gap: 4px; }
  .tl-date { font-size: 11px !important; letter-spacing: 0.05em; }
  .tl-title {
    font-size: 13.5px !important;
    line-height: 1.35;
    word-break: break-word;
  }
  .tl-desc {
    font-size: 12.5px !important;
    line-height: 1.5;
    word-break: break-word;
  }

  
  .src-row {
    padding: 12px 16px !important;
    font-size: 12.5px;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    border-top: 1px solid var(--border-faint);
  }
  .src-row:first-of-type { border-top: none; }
  .src-name {
    min-width: 0;
    word-break: break-word;
    flex: 1;
    line-height: 1.4;
  }
  .src-ts {
    font-size: 11px !important;
    flex-shrink: 0;
    color: var(--fg-faint);
    text-align: right;
  }

  
  .gt-ubo-row {
    grid-template-columns: 40px 1fr auto !important;
    padding: 14px 16px !important;
    column-gap: 12px !important;
    align-items: center !important;
    border-top: 1px solid var(--border-faint);
  }
  .gt-ubo-row:first-of-type { border-top: none; }
  .gt-ubo-av { width: 36px !important; height: 36px !important; font-size: 12px; }
  .gt-ubo-body { min-width: 0; }
  .gt-ubo-name {
    font-size: 14px !important;
    font-weight: 600;
    word-break: break-word;
    line-height: 1.3;
  }
  .gt-ubo-role { font-size: 12px !important; color: var(--fg-faint); }
  .gt-ubo-pct-num { font-size: 15px !important; }

  
  .gt-anom-row {
    padding: 12px 16px !important;
    flex-wrap: wrap !important;
    gap: 6px 12px !important;
    border-top: 1px solid var(--border-faint);
  }
  .gt-anom-row:first-of-type { border-top: none; }
  .gt-anom-label { flex: 1 1 100%; word-break: break-word; }

  
  .gt-chain-steps li {
    flex-wrap: wrap;
    gap: 6px 8px;
  }
  .gt-chain-result {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  
  .d-pills { gap: 6px !important; }
  .pill { white-space: normal; word-break: break-word; }

  
  .d-meta {
    grid-template-columns: 1fr !important;
    gap: 4px 0 !important;
  }
  .meta-row {
    display: grid !important;
    grid-template-columns: max-content 1fr;
    gap: 12px;
    align-items: baseline;
    padding: 4px 0;
  }
  .meta-label { font-size: 10.5px !important; }
  .meta-value {
    font-size: 12.5px !important;
    word-break: break-word;
    line-height: 1.4;
  }

  
  .card,
  .paper:not(.flat):not(.deep) {
    border: 1px solid var(--border-primary) !important;
    border-radius: 16px !important;
    overflow: hidden;
  }
  
  .card .paper:not(.flat):not(.deep) {
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
  }

  
  .dossier { padding: 16px 16px 120px !important; }
  .doc     { padding: 20px 16px 120px !important; }
  .d-cols { gap: 16px !important; }
  .d-col-main, .d-col-side { gap: 16px !important; }
  .card-head    { padding: 16px 16px 4px !important; }
  .card-title   { font-size: 17px !important; font-weight: 600 !important; line-height: 1.3 !important; word-break: break-word; }
  .card-eyebrow { font-size: 10.5px !important; }
  .section-head { padding: 14px 16px !important; flex-wrap: wrap; gap: 8px; }
  .section-head h3 { white-space: normal !important; font-size: 15px !important; line-height: 1.3; word-break: break-word; }
  .section-body { padding: 16px !important; }
  .card-foot-btn { padding: 14px 16px !important; border-top: 1px solid var(--border-faint); }

  
  .profile-toggle {
    bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
    left: 16px !important;
    right: 16px !important;
  }

  
  .modal .bd { word-break: break-word; }

  
  

  
  .card *,
  .paper * {
    
    overflow-wrap: anywhere;
  }
  
  .mono { overflow-wrap: normal; word-break: keep-all; }

  
  .signal-meta-tags .meta-tag { white-space: normal; word-break: break-word; }

  
  .fb-history-row { flex-wrap: wrap; gap: 6px 10px; padding: 10px 0; }
  .fb-history-row > * { min-width: 0; word-break: break-word; }

  
  .section-head .fb-bar { width: 100%; justify-content: flex-start; flex-wrap: wrap; }
}




@media (max-width: 767px) {
  [data-theme="dark"] .dt,
  html:not([data-theme="light"]) .dt {
    background: var(--surface-faint);
  }
  [data-theme="dark"] .dt-tab.active,
  html:not([data-theme="light"]) .dt-tab.active {
    background-color: rgba(255,255,255,0.06) !important;
    background-image: none !important;
    color: var(--fg-strong) !important;
  }
  [data-theme="dark"] .dt-tab-end,
  html:not([data-theme="light"]) .dt-tab-end {
    background-color: rgba(255,255,255,0.04) !important;
    color: var(--fg-action) !important;
  }
}



@media (max-width: 767px) {
  .signal,
  .signal.sev-critical,
  .signal.sev-high,
  .signal.sev-medium,
  .signal.sev-clean {
    flex-direction: column !important;
  }
}






.d-id-sub {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 6px;
  line-height: 1.55;
}
.d-id-sub-item { display: inline; }
.d-id-sub .sep { color: var(--fg-disabled); margin: 0; padding: 0; }


.d-status {
  margin-top: 14px;
}
.d-pills { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }


.d-keyfacts {
  margin-top: 22px;
  max-width: 560px;
  background: var(--surface-faint);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius);
  padding: 4px 14px;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.d-keyfacts:hover { border-color: var(--border-strong); }
.d-keyfacts-label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--fg-faint);
  margin-bottom: 10px;
}
.d-keyfacts-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  background: none;
  border: none;
  padding: 13px 0;
  margin: 0;
  cursor: pointer;
  font: inherit;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--fg-primary);
  transition: color 0.15s ease;
}
.d-keyfacts-toggle:hover { color: var(--fg-strong); }
.d-keyfacts-toggle svg {
  flex: none; opacity: 0.85;
  color: var(--brass);
  transition: transform 0.18s ease;
}
.d-keyfacts .d-meta {
  padding-bottom: 14px;
  grid-template-columns: max-content 1fr max-content 1fr;
  column-gap: 28px;
}
.d-keyfacts.collapsed .d-keyfacts-toggle { color: var(--fg-faint); }
.d-keyfacts.collapsed:hover .d-keyfacts-toggle { color: var(--fg-primary); }






@media (max-width: 767px) {

  
  .d-id .uc-sm:first-child { margin-bottom: 8px !important; font-size: 10.5px !important; letter-spacing: 0.08em !important; }

  
  .d-id-title {
    gap: 12px !important;
    margin-bottom: 8px !important;
    align-items: center;
  }
  .d-id-av { width: 44px !important; height: 44px !important; font-size: 12px !important; border-radius: 10px !important; flex-shrink: 0; }
  .d-id-name { font-size: 24px !important; font-weight: 600 !important; line-height: 1.18 !important; word-break: break-word; letter-spacing: -0.01em; }

  
  .d-id-sub {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 2px !important;
    margin-bottom: 0 !important;
    font-size: 12.5px !important;
  }
  .d-id-sub .sep { display: none !important; }
  .d-id-sub-item {
    display: block !important;
    color: var(--fg-faint);
    line-height: 1.4;
  }
  .d-id-sub-item:first-child { color: var(--fg-strong); font-weight: 500; }

  
  .d-status {
    margin-top: 18px !important;
    padding-top: 16px !important;
    border-top: 1px solid var(--border-faint);
  }
  .d-pills { gap: 6px !important; }
  
  .d-pills .pill:first-child {
    font-size: 12px;
    font-weight: 600;
    padding: 5px 12px;
  }

  
  .d-keyfacts {
    margin-top: 20px !important;
    padding: 4px 14px !important;
    border-top: none;
  }
  .d-keyfacts-label {
    font-size: 10.5px !important;
    letter-spacing: 0.10em !important;
    color: var(--fg-primary) !important;
    margin-bottom: 12px !important;
  }
  .d-keyfacts .d-meta {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    max-width: none !important;
  }
  .d-keyfacts .meta-row {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 4px !important;
    padding: 0 !important;
    grid-template-columns: none !important;
  }
  .d-keyfacts .meta-label {
    font-size: 10.5px !important;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fg-faint);
  }
  .d-keyfacts .meta-value {
    font-size: 14px !important;
    font-weight: 500;
    line-height: 1.45;
    color: var(--fg-strong);
    word-break: break-word;
  }

  
  .d-actions {
    margin-top: 20px !important;
    padding-top: 18px !important;
    border-top: 1px solid var(--border-faint);
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  .d-actions .btn {
    min-height: 44px !important;
    border-radius: 10px !important;
    font-weight: 500 !important;
    font-size: 13px !important;
  }
  .d-actions .btn.primary { grid-column: 1 / -1 !important; font-weight: 600 !important; }

  
  .d-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 18px !important;
    padding: 4px 0 22px !important;
  }
  .d-score {
    padding: 16px !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 16px !important;
  }
  .d-score-meta {
    text-align: left !important;
    padding-top: 0 !important;
    border-top: none !important;
    margin-top: 0 !important;
    font-size: 11px !important;
    line-height: 1.5 !important;
  }
  .d-score-meta div:first-child { font-size: 12px !important; font-weight: 600 !important; color: var(--fg-strong) !important; margin-bottom: 4px; }
}



@media (max-width: 380px) {
  .d-id-name { font-size: 20px !important; }
  .d-actions { grid-template-columns: 1fr !important; }
  .d-score { flex-direction: column !important; align-items: flex-start !important; }
}




@media (min-width: 1024px) {
  .d-status { margin-top: 12px; }
  .d-keyfacts {
    margin-top: 22px;
  }
  .d-actions {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--border-faint);
  }
}





:root,
[data-theme="light"],
[data-theme="dark"],
html:not([data-theme]) {
  --shadow-soft-1:      none;
  --shadow-soft-2:      none;
  --selected-shadow:    none;
  --active-fill-shadow: none;
}


.card, [data-theme="light"] .card, [data-theme="dark"] .card,
.paper, [data-theme="light"] .paper, [data-theme="dark"] .paper,
.paper:not(.flat):not(.deep),
[data-theme="light"] .paper:not(.flat):not(.deep),
[data-theme="dark"] .paper:not(.flat):not(.deep),
.modal, [data-theme="light"] .modal, [data-theme="dark"] .modal,
.modal-wrap .modal,
.fb-pop, [data-theme="light"] .fb-pop, [data-theme="dark"] .fb-pop,
.fb-kpi, [data-theme="light"] .fb-kpi, [data-theme="dark"] .fb-kpi,
.fb-kpis, [data-theme="light"] .fb-kpis, [data-theme="dark"] .fb-kpis,
.fb-conc-bar,
.fb-hist-thr-label,
.hero-search, [data-theme="light"] .hero-search, [data-theme="dark"] .hero-search,
.dt, [data-theme="light"] .dt, [data-theme="dark"] .dt,
.dt-tab, .dt-tab.active,
[data-theme="light"] .dt-tab, [data-theme="light"] .dt-tab.active,
[data-theme="dark"] .dt-tab, [data-theme="dark"] .dt-tab.active,
.tabs, .tabs button, .tabs button.active,
[data-theme="light"] .tabs, [data-theme="light"] .tabs button, [data-theme="light"] .tabs button.active,
[data-theme="dark"] .tabs, [data-theme="dark"] .tabs button, [data-theme="dark"] .tabs button.active,
.btn, [data-theme="light"] .btn, [data-theme="dark"] .btn,
.btn.primary, [data-theme="light"] .btn.primary, [data-theme="dark"] .btn.primary,
.btn.danger, [data-theme="light"] .btn.danger, [data-theme="dark"] .btn.danger,
.btn.sm, [data-theme="light"] .btn.sm,
.btn.ghost, [data-theme="light"] .btn.ghost,
.icon-btn, [data-theme="light"] .icon-btn, [data-theme="dark"] .icon-btn,
.profile-toggle, [data-theme="light"] .profile-toggle, [data-theme="dark"] .profile-toggle,
.profile-toggle button, [data-theme="light"] .profile-toggle button,
.profile-toggle button.active, [data-theme="light"] .profile-toggle button.active,
.gt-depth-btn, [data-theme="light"] .gt-depth-btn,
.gt-depth-btn.active, [data-theme="light"] .gt-depth-btn.active,
.gt-controls, [data-theme="light"] .gt-controls,
.gt-controls-left, .gt-controls-right,
.gt-foot-card,
.tbl:not(.tbl-keep) tbody tr,
[data-theme="light"] .tbl:not(.tbl-keep) tbody tr,
[data-theme="dark"] .tbl:not(.tbl-keep) tbody tr,
.topbar, [data-theme="light"] .topbar, [data-theme="dark"] .topbar,
.sidebar, [data-theme="light"] .sidebar,
.d-id-av, [data-theme="light"] .d-id-av,
.d-actions .btn, [data-theme="light"] .d-actions .btn,
.d-actions .btn.primary, [data-theme="light"] .d-actions .btn.primary,
.d-score, [data-theme="light"] .d-score, [data-theme="dark"] .d-score,
.settings-pop, [data-theme="light"] .settings-pop,
.evid, [data-theme="light"] .evid,
.signal, [data-theme="light"] .signal,
.sb-item, .sb-item.active,
[data-theme="light"] .sb-item, [data-theme="light"] .sb-item.active,
.user-av,
.d-banner, [data-theme="light"] .d-banner,
.amb-toggle,
.lote-meta,
.builder-steps,
.builder-summary,
.xml-preview {
  box-shadow: none !important;
}


.topbar {
  border-bottom: 1px solid var(--border-faint);
}


.btn:focus-visible,
.icon-btn:focus-visible {
  box-shadow: 0 0 0 2px rgba(255,255,255,0.18) !important;
}
.input:focus,
.hero-search:focus-within {
  box-shadow: 0 0 0 2px rgba(255,255,255,0.10) !important;
}




.signal.sev-critical .signal-dot { box-shadow: 0 0 0 4px var(--critical-bg) !important; }
.signal.sev-high     .signal-dot { box-shadow: 0 0 0 4px var(--high-bg) !important; }
.signal.sev-medium   .signal-dot { box-shadow: 0 0 0 4px var(--medium-bg) !important; }
.signal.sev-clean    .signal-dot { box-shadow: 0 0 0 4px var(--clean-bg) !important; }




@media (max-width: 767px) {

  

  
  .tbl:not(.tbl-keep) tbody tr td[data-primary] {
    border-bottom: none !important;
    padding-bottom: 0 !important;
    margin-bottom: 10px !important;
  }

  
  .tbl:not(.tbl-keep) tbody tr td:first-child {
    font-size: 10.5px !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase;
    margin-bottom: 6px !important;
    padding-bottom: 0 !important;
    border: none !important;
  }

  
  .tbl:not(.tbl-keep) tbody tr {
    margin-bottom: 14px !important;
    border-radius: 14px !important;
    overflow: hidden;
  }
  .tbl:not(.tbl-keep) tbody tr:last-child {
    margin-bottom: 0 !important;
  }

  
  .tbl:not(.tbl-keep) tbody tr td[data-primary] > div > span:first-child {
    border-color: transparent !important;
  }

  
  .card .card,
  .card > .paper:not(.flat):not(.deep),
  .paper .card,
  .paper > .paper:not(.flat):not(.deep) {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  
  .paper > .signal,
  .paper > .gt-ubo-row,
  .paper > .src-row,
  .paper > .gt-anom-row,
  .paper > .tl-item,
  .paper > .evid,
  .card  > .signal,
  .card  > .gt-ubo-row,
  .card  > .src-row,
  .card  > .gt-anom-row,
  .card  > .tl-item,
  .card  > .evid {
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
    background: transparent !important;
  }
  
  .paper > .signal + .signal,
  .paper > .gt-ubo-row + .gt-ubo-row,
  .paper > .src-row + .src-row,
  .paper > .gt-anom-row + .gt-anom-row,
  .paper > .tl-item + .tl-item,
  .paper > .evid + .evid,
  .card  > .signal + .signal,
  .card  > .gt-ubo-row + .gt-ubo-row,
  .card  > .src-row + .src-row,
  .card  > .gt-anom-row + .gt-anom-row,
  .card  > .tl-item + .tl-item,
  .card  > .evid + .evid {
    border-top: 1px solid var(--border-faint) !important;
  }

  
  .fb-kpis {
    overflow: hidden;          
  }
  .fb-kpi {
    border-radius: 0 !important;
    background: transparent !important;
  }

  
  .d-score-meta {
    border-top: none !important;
  }

  
  .card,
  .paper:not(.flat):not(.deep) {
    overflow: hidden;          
  }
}




@media (min-width: 768px) {
}




@media (max-width: 767px) {

  

  
  .tbl:not(.tbl-keep) tbody tr,
  [data-theme="light"] .tbl:not(.tbl-keep) tbody tr {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 16px 16px !important;
    overflow: visible !important;
  }

  
  .tbl:not(.tbl-keep) tbody tr td,
  [data-theme="light"] .tbl:not(.tbl-keep) tbody tr td {
    border: none !important;
    border-bottom: none !important;
  }

  
  .tbl:not(.tbl-keep) tbody tr td[data-label],
  [data-theme="light"] .tbl:not(.tbl-keep) tbody tr td[data-label] {
    border-top: 1px solid var(--border-faint) !important;
    padding-top: 12px !important;
    padding-bottom: 0 !important;
    margin-top: 4px !important;
  }

  
  .tbl:not(.tbl-keep) tbody tr + tr,
  [data-theme="light"] .tbl:not(.tbl-keep) tbody tr + tr {
    border-top: 1px solid var(--border-faint) !important;
  }

  
  .tbl:not(.tbl-keep) tbody tr:last-child {
    margin-bottom: 0 !important;
  }

  
  .tbl:not(.tbl-keep) tbody tr:hover {
    background: transparent !important;
  }

  
  .coaf-tbl:not(.tbl-keep) tbody tr.row-selected {
    background: rgba(61,111,232,0.10) !important;
    border: none !important;
  }
}





.sec-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}
.sec-header-title { flex: 1; min-width: 0; }
.sec-header-meta  { flex-shrink: 0; }


@media (max-width: 767px) {

  
  .section-head,
  [data-theme="light"] .section-head {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 6px !important;
    padding: 14px 16px !important;
  }
  .section-head .title {
    width: 100%;
    flex: none;
  }
  .section-head h3 {
    white-space: normal !important;
    font-size: 15px !important;
    line-height: 1.3;
    word-break: break-word;
  }
  
  .section-head .meta {
    width: 100%;
    flex: none;
    white-space: normal !important;
    font-size: 11px !important;
    color: var(--fg-faint);
    margin-left: 0 !important;
  }
  
  .section-head .fb-bar,
  .section-head .btn,
  .section-head .actions {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  
  .sec-header {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
  }
  .sec-header-title {
    width: 100%;
    font-size: 17px !important;
    line-height: 1.3;
  }
  .sec-header-meta {
    width: 100%;
    font-size: 10px !important;
    color: var(--fg-faint);
    opacity: 0.85;
  }

  
  .card-head.flex.jcb,
  .card-head.flex.jcb.aic {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }
  .card-head.flex.jcb > *,
  .card-head.flex.jcb.aic > * {
    width: 100%;
  }
  .card-head.flex.jcb .btn,
  .card-head.flex.jcb.aic .btn {
    width: auto;       
    align-self: flex-start;
  }

  
  .card-eyebrow.flex.jcb,
  .card-eyebrow.flex.jcb.aic {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
  }
  .card-eyebrow.flex.jcb > *,
  .card-eyebrow.flex.jcb.aic > * {
    width: 100%;
  }

  /* ── REPORT SCREEN (.doc) ─────────────────────────────────────
     Top action bar (fechar / exportar PDF / marcar como validado):
     stack the title block and let the buttons wrap below. */
  .doc > .flex.jcb.ais.mb-12 {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }
  .doc > .flex.jcb.ais.mb-12 > div:first-child {
    width: 100%;
  }
  .doc > .flex.jcb.ais.mb-12 .flex.gap-8 {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .doc > .flex.jcb.ais.mb-12 .flex.gap-8 .btn {
    flex: 1 1 auto;
    justify-content: center;
    white-space: nowrap;
  }

  /* Stamp / validation status row — stack stamp+text above progress */
  .doc > .flex.jcb.aic.mb-16 {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 14px !important;
    padding: 14px 16px !important;
  }
  .doc > .flex.jcb.aic.mb-16 > div:last-child {
    min-width: 0 !important;
    width: 100% !important;
    text-align: left !important;
  }

  /* Section accordion header — title was getting crushed to 1ch wide
     by the rating bar + status pill + chevron all refusing to shrink.
     Move them to a second row so the title can breathe. */
  .doc .paper > .flex.aic.gap-16 {
    flex-wrap: wrap !important;
    gap: 10px 12px !important;
    align-items: center !important;
    padding: 14px 16px !important;
  }
  .doc .paper > .flex.aic.gap-16 > .serif.italic {
    flex: 0 0 auto;
  }
  .doc .paper > .flex.aic.gap-16 > h4.f1 {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: anywhere;
    font-size: 14.5px !important;
    line-height: 1.3 !important;
  }
  /* Rating bar, status pill, chevron drop to a full-width second row */
  .doc .paper > .flex.aic.gap-16 > .fb-bar,
  .doc .paper > .flex.aic.gap-16 > .pill {
    flex: 0 0 auto;
    order: 3;
  }
  .doc .paper > .flex.aic.gap-16 > svg:last-child {
    margin-left: auto !important;
  }

  /* Section body — pad in from 20px to 16px to match new header */
  .doc .paper > div[style*="padding: 0 20px 18px"] {
    padding: 0 16px 16px !important;
  }
  .doc .paper > div[style*="padding: 0 20px 18px"] .flex.jcb.aic.mt-16 {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  .doc .paper > div[style*="padding: 0 20px 18px"] .flex.jcb.aic.mt-16 .flex.gap-6 {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  .doc .paper > div[style*="padding: 0 20px 18px"] .flex.jcb.aic.mt-16 .btn {
    flex: 1 1 auto;
    justify-content: center;
  }
}



/* ═════════════════════════════════════════════════════════════════════
   V14 · LIGHT THEME · COLOR-ONLY OVERLAY
   ───────────────────────────────────────────────────────────────────
   Layout for light mode is IDENTICAL to dark (no spacing / size /
   typography overrides). This layer ONLY swaps colors where the base
   CSS uses hardcoded dark literals (rgba(255,255,255,…), #141414,
   #C2C2C0, #ECECE8, etc.) that don't auto-derive from variables.
   ───────────────────────────────────────────────────────────────── */

/* Page chrome ----------------------------------------------------- */
[data-theme="light"] body { background: var(--page); color: var(--fg-primary); }
[data-theme="light"] body::after { opacity: 0; }    /* kill dark grain */

/* Topbar: was background: var(--page-faint) hardcoded as dark */
[data-theme="light"] .topbar { background: var(--page); }
[data-theme="light"] .topbar-brand .brand-mark img {
  filter: invert(1) hue-rotate(180deg) brightness(0.4);
}

/* Topbar search input: hardcoded background was --surface-soft (dark
   value). Force surface white on light. */
[data-theme="light"] .topbar-search {
  background: var(--surface) !important;
  color: var(--fg-faint);
  border: 1px solid var(--border-primary);
}
[data-theme="light"] .topbar-search:hover {
  background: var(--surface-faint) !important;
  border-color: var(--border-strong);
}
[data-theme="light"] .topbar-search .kbd {
  background: var(--surface-tinted);
  color: var(--fg-disabled);
}

/* Sidebar ---------------------------------------------------------- */
[data-theme="light"] .sidebar { background: var(--page); }
[data-theme="light"] .sb-item { color: var(--fg-primary); }
[data-theme="light"] .sb-item:hover {
  background: rgba(15,23,42,0.04);
  color: var(--fg-strong);
}
[data-theme="light"] .sb-item.active {
  background: rgba(15,23,42,0.06);
  color: var(--fg-strong);
  border-color: transparent;
}
[data-theme="light"] .sb-item.active .sb-item-count { color: var(--fg-faint); }
[data-theme="light"] .sb-sect-label { color: var(--fg-faint); }
[data-theme="light"] .sb-health-row { color: var(--fg-faint); }

/* Workspace -------------------------------------------------------- */
[data-theme="light"] .workspace,
[data-theme="light"] .workspace.workspace {
  background: var(--workspace-bg);
  border: 1px solid var(--border-primary);
}

/* Cards & papers --------------------------------------------------- */
[data-theme="light"] .card,
[data-theme="light"] .paper:not(.flat):not(.deep) {
  background: var(--surface);
  border: 1px solid var(--border-primary);
}
[data-theme="light"] .paper.deep   { background: var(--surface-faint); border: 1px solid var(--border-faint); }
[data-theme="light"] .paper.flat   { background: transparent; }
[data-theme="light"] .section-head { border-bottom-color: var(--border-faint); }

/* Tabs ------------------------------------------------------------- */
[data-theme="light"] .dt {
  background: transparent;
  border-bottom: 1px solid var(--border-primary);
}
[data-theme="light"] .dt-tab            { color: var(--fg-faint); }
[data-theme="light"] .dt-tab:hover      { background: rgba(15,23,42,0.03); color: var(--fg-strong); }
[data-theme="light"] .dt-tab.active     { background: transparent; color: var(--fg-strong); border-bottom-color: var(--brass); }
[data-theme="light"] .dt-tab .dt-count  { background: rgba(15,23,42,0.06); color: var(--fg-faint); }
[data-theme="light"] .dt-tab.active .dt-count { background: rgba(47,86,184,0.10); color: var(--brass); }
[data-theme="light"] .dt-tab-end:hover  { background: rgba(15,23,42,0.03); }

[data-theme="light"] .tabs              { border-bottom: 1px solid var(--border-primary); }
[data-theme="light"] .tabs button       { color: var(--fg-faint); }
[data-theme="light"] .tabs button:hover { background: rgba(15,23,42,0.03); color: var(--fg-strong); }
[data-theme="light"] .tabs button.active {
  background: var(--surface);
  color: var(--fg-strong);
}

/* Tables ----------------------------------------------------------- */
[data-theme="light"] .tbl th { background: var(--surface-faint); color: var(--fg-faint); border-bottom: 1px solid var(--border-primary); }
[data-theme="light"] .tbl tbody tr:hover { background: rgba(15,23,42,0.03); }
[data-theme="light"] .tbl tbody tr td { border-bottom: 1px solid var(--border-faint); }

/* Pills / chips ---------------------------------------------------- */
[data-theme="light"] .pill.neutral  { background: rgba(15,23,42,0.04); color: var(--fg-primary); }
[data-theme="light"] .pill.outline  { background: rgba(15,23,42,0.04); color: var(--fg-faint); border: 1px solid var(--border-primary); }
[data-theme="light"] .meta-tag      { background: rgba(15,23,42,0.05); color: var(--fg-faint); }

/* Buttons ---------------------------------------------------------- */
[data-theme="light"] .btn {
  background: var(--surface);
  color: var(--fg-strong);
  border: 1px solid var(--border-primary);
}
[data-theme="light"] .btn:hover { background: var(--surface-faint); border-color: var(--border-strong); }
[data-theme="light"] .btn.primary {
  background: #111827 !important;
  background-image: none !important;
  color: #FFFFFF !important;
  border: 1px solid #111827 !important;
}
[data-theme="light"] .btn.primary:hover { background: #1F2937 !important; border-color: #1F2937 !important; color: #FFFFFF !important; }
[data-theme="light"] .btn.ghost         { background: transparent; border: 1px solid transparent; color: var(--fg-primary); }
[data-theme="light"] .btn.ghost:hover   { background: rgba(15,23,42,0.04); }
[data-theme="light"] .btn.danger {
  background: var(--critical-bg);
  color: var(--critical);
  border: 1px solid transparent;
}
[data-theme="light"] .btn.danger:hover  { background: rgba(217,64,64,0.18); }

[data-theme="light"] .icon-btn          { color: var(--fg-faint); }
[data-theme="light"] .icon-btn:hover    { background: rgba(15,23,42,0.04); color: var(--fg-strong); }

/* Inputs ----------------------------------------------------------- */
[data-theme="light"] .input,
[data-theme="light"] .hero-search {
  background: var(--surface);
  border: 1px solid var(--border-primary);
  color: var(--fg-strong);
}
[data-theme="light"] .input::placeholder,
[data-theme="light"] .hero-search input::placeholder { color: var(--fg-disabled); }
[data-theme="light"] .input:focus,
[data-theme="light"] .hero-search:focus-within { border-color: var(--brass); }

/* Tenant chip / user avatars -------------------------------------- */
[data-theme="light"] .tenant-chip {
  background: var(--surface);
  border: 1px solid var(--border-primary);
  color: var(--fg-primary);
}
[data-theme="light"] .user-av,
[data-theme="light"] .d-id-av {
  background: var(--surface-faint);
  color: var(--fg-strong);
  border: 1px solid var(--border-primary);
}
[data-theme="light"] .user-meta-name { color: var(--fg-strong); }
[data-theme="light"] .user-meta-role { color: var(--fg-faint); }

/* Modal ------------------------------------------------------------ */
[data-theme="light"] .modal {
  background: var(--surface);
  border: 1px solid var(--border-primary);
  color: var(--fg-primary);
}
[data-theme="light"] .modal .hd { border-bottom-color: var(--border-faint); }
[data-theme="light"] .modal .ft { background: var(--surface-faint); border-top-color: var(--border-faint); }
[data-theme="light"] .modal-wrap { background: rgba(15,23,42,0.40); }

/* Popovers (FB pop, settings pop) --------------------------------- */
[data-theme="light"] .fb-pop,
[data-theme="light"] .settings-pop {
  background: var(--surface);
  border: 1px solid var(--border-primary);
  color: var(--fg-primary);
}

/* Theme switcher inside settings popover -------------------------- */
[data-theme="light"] .theme-option         { color: var(--fg-primary); }
[data-theme="light"] .theme-option:hover   { background: var(--surface-faint); color: var(--fg-strong); }
[data-theme="light"] .theme-option-ic      { color: var(--fg-faint); }
[data-theme="light"] .theme-option.on .theme-option-ic { color: var(--fg-strong); }

/* Profile toggle (PJ/PF) ------------------------------------------ */
[data-theme="light"] .profile-toggle {
  background: var(--surface);
  border: 1px solid var(--border-primary);
}
[data-theme="light"] .profile-toggle button         { color: var(--fg-faint); }
[data-theme="light"] .profile-toggle button:hover   { color: var(--fg-strong); }
[data-theme="light"] .profile-toggle button.active  { background: #111827; color: #FFFFFF; }

/* Banners / informational strips ---------------------------------- */
[data-theme="light"] .d-banner {
  background: var(--surface-faint);
  border: 1px solid var(--border-faint);
  color: var(--fg-primary);
}
[data-theme="light"] .d-banner-icon { color: var(--brass); }

/* Signal rows / src / timeline ------------------------------------ */
[data-theme="light"] .signal      { border-top: 1px solid var(--border-faint); }
[data-theme="light"] .src-row     { border-top: 1px solid var(--border-faint); }
[data-theme="light"] .gt-ubo-row  { border-top: 1px solid var(--border-faint); }
[data-theme="light"] .gt-anom-row { border-top: 1px solid var(--border-faint); }
[data-theme="light"] .tl-item::before { background: var(--border-faint); }
[data-theme="light"] .tl-item::after  { background: var(--surface); border-color: var(--border-strong); }

/* Card foot CTA --------------------------------------------------- */
[data-theme="light"] .card-foot-btn { background: var(--surface-faint); color: var(--fg-strong); border-top: 1px solid var(--border-faint); }
[data-theme="light"] .card-foot-btn:hover { background: rgba(15,23,42,0.04); }

/* GT (Graph toolbar) chrome --------------------------------------- */
[data-theme="light"] .gt-toggle      { background: var(--surface); border: 1px solid var(--border-primary); }
[data-theme="light"] .gt-toggle.on   { background: rgba(47,86,184,0.08); border-color: rgba(47,86,184,0.30); color: var(--brass); }
[data-theme="light"] .gt-depth-btn   { background: var(--surface); border: 1px solid var(--border-primary); color: var(--fg-faint); }
[data-theme="light"] .gt-depth-btn.active { background: #111827; color: #FFFFFF; border-color: #111827; }

/* Builder steps / lote-meta / amb-toggle -------------------------- */
[data-theme="light"] .builder-steps,
[data-theme="light"] .builder-summary,
[data-theme="light"] .lote-meta { background: var(--surface-faint); border: 1px solid var(--border-faint); }
[data-theme="light"] .amb-toggle { background: var(--surface-faint); border: 1px solid var(--border-primary); }
[data-theme="light"] .amb-toggle button { color: var(--fg-faint); }
[data-theme="light"] .amb-toggle button.on    { background: var(--info-bg);     color: var(--info);     border: 1px solid rgba(107,196,240,0.40); }
[data-theme="light"] .amb-toggle button.on.prod { background: var(--critical-bg); color: var(--critical); border: 1px solid rgba(217,64,64,0.40); }
[data-theme="light"] .builder-step .builder-step-n { background: var(--surface); color: var(--fg-faint); border: 1px solid var(--border-primary); }
[data-theme="light"] .builder-step.on .builder-step-n   { background: var(--brass-bg);  color: var(--brass);  border: 1px solid var(--brass); }
[data-theme="light"] .builder-step.done .builder-step-n { background: var(--clean-bg); color: var(--clean); border: 1px solid var(--clean); }

/* XML preview / evidence cards / feedback chrome ------------------ */
[data-theme="light"] .xml-preview { background: var(--bg-deep); color: var(--fg-primary); border: 1px solid var(--border-primary); }
[data-theme="light"] .evid          { background: var(--surface);      border: 1px solid var(--border-primary); }
[data-theme="light"] .evid.critical { background: var(--critical-bg);  border-color: var(--critical-edge); }
[data-theme="light"] .evid.high     { background: var(--high-bg);      border-color: var(--high-edge); }
[data-theme="light"] .evid.medium   { background: var(--medium-bg);    border-color: var(--medium-edge); }
[data-theme="light"] .evid.clean    { background: var(--clean-bg);     border-color: var(--clean-edge); }
[data-theme="light"] .fb-kpi      { background: var(--surface); }
[data-theme="light"] .fb-kpis     { background: var(--surface); border: 1px solid var(--border-primary); }
[data-theme="light"] .fb-hist-bar { opacity: 1; }
[data-theme="light"] .fb-hist-bar-n { color: var(--fg-primary); }
[data-theme="light"] .fb-hist-bar-wrap { border-bottom-color: var(--border-primary); }

/* Sliders in tweak panel ------------------------------------------ */
[data-theme="light"] input[type="range"]::-webkit-slider-runnable-track { background: rgba(15,23,42,0.10); }

/* Drop-down chevrons / nav-scrim ---------------------------------- */
[data-theme="light"] .nav-scrim { background: rgba(15,23,42,0.40); }

/* Force flat: kill any inherited box-shadow on cards/buttons in
   light mode (V10 should have done this; double-down for safety) */
[data-theme="light"] .card,
[data-theme="light"] .paper,
[data-theme="light"] .btn,
[data-theme="light"] .btn.primary,
[data-theme="light"] .topbar,
[data-theme="light"] .sidebar,
[data-theme="light"] .modal,
[data-theme="light"] .topbar-search,
[data-theme="light"] .hero-search,
[data-theme="light"] .input,
[data-theme="light"] .profile-toggle,
[data-theme="light"] .settings-pop,
[data-theme="light"] .fb-pop,
[data-theme="light"] .dt-tab.active,
[data-theme="light"] .tabs button.active,
[data-theme="light"] .gt-depth-btn,
[data-theme="light"] .gt-depth-btn.active,
[data-theme="light"] .d-id-av,
[data-theme="light"] .user-av,
[data-theme="light"] .tenant-chip,
[data-theme="light"] .sb-item.active,
[data-theme="light"] .evid,
[data-theme="light"] .fb-kpi,
[data-theme="light"] .fb-kpis {
  box-shadow: none !important;
}

/* ═══════════════════════════════════════════════════════════════
   Score card — dispositive floor / diffuse split (metodologia v0.5)
   Two-arc ring legend · driver-pillar flag/note · collapsible parecer
   ═══════════════════════════════════════════════════════════════ */

/* legend beneath the ring */
.score-legend {
  width: 100%;
  max-width: 232px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 2px;
}
.sl-row { display: flex; align-items: center; gap: 8px; }
.sl-swatch {
  width: 11px; height: 11px; border-radius: 3px; flex-shrink: 0;
}
.sl-swatch.hatch {
  background: var(--sw-c);
  opacity: 0.4;
}
.sl-text { font-size: 11.5px; color: var(--fg-faint); line-height: 1.4; }
.sl-text strong { color: var(--fg-strong); font-weight: 600; }
.sl-formula {
  font-size: 11px; color: var(--fg-faint);
  letter-spacing: 0.01em; margin-top: 3px;
  padding-top: 6px; border-top: 1px solid var(--border-faint);
}

/* driver-pillar flag + reconciliation note */
.risk-item { display: flex; flex-direction: column; gap: 0; }
.risk-flag {
  font-size: 10.5px; color: var(--nl-rose); font-weight: 500;
  letter-spacing: 0.01em; white-space: nowrap; margin-left: 2px;
}
.risk-note {
  font-size: 11.5px; color: var(--fg-faint); line-height: 1.5;
  padding-top: 4px; padding-left: 2px;
  display: flex; gap: 6px; align-items: flex-start;
}
.risk-note-glyph { color: var(--nl-rose); flex-shrink: 0; }
.risk-footnote {
  font-size: 11.5px; color: var(--fg-faint); line-height: 1.5;
  margin-top: 4px; padding-top: 10px;
  border-top: 1px dashed var(--border-primary);
  display: flex; gap: 6px; align-items: flex-start;
}
.risk-footnote .risk-flag { color: var(--nl-rose); }

/* critical signals + the rules they triggered, beneath the risk bars */
.risk-drivers {
  margin-top: 14px; padding-top: 14px;
  border-top: 1px dashed var(--border-primary);
  display: flex; flex-direction: column; gap: 10px;
}
.risk-drivers-head {
  font-size: 10px; font-weight: 600; letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--fg-faint);
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.risk-drivers-cta {
  letter-spacing: 0.02em; text-transform: none; font-weight: 500;
  color: var(--brass); transition: transform 0.13s ease;
}
.risk-drivers.clickable { cursor: pointer; border-radius: 8px; }
.risk-drivers.clickable:hover .risk-drivers-cta { transform: translateX(2px); }
.risk-driver-rule.clickable { cursor: pointer; transition: background 0.13s ease, border-color 0.13s ease; }
.risk-driver-rule.clickable:hover { background: var(--surface-strong); }
.risk-driver-rule.clickable:focus-visible,
.risk-drivers.clickable:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
.risk-driver { display: flex; gap: 10px; }
.risk-driver-sev {
  flex: none; align-self: flex-start;
  font: 600 9px var(--mono); letter-spacing: 0.08em; text-transform: uppercase;
  padding: 3px 6px; border-radius: 4px; margin-top: 1px;
}
.risk-driver-sev.critical { color: var(--critical); background: var(--critical-bg); }
.risk-driver-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.risk-driver-title { font-size: 13px; font-weight: 500; line-height: 1.3; }
.risk-driver-detail { font-size: 11.5px; color: var(--fg-faint); line-height: 1.45; text-wrap: pretty; }
.risk-driver-rule {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  width: 100%;
  padding: 9px 12px;
  background: var(--surface-tinted); border-radius: 6px;
  border-left: 2px solid var(--critical);
}
.risk-driver-rule-id { font-size: 11px; color: var(--brass); flex: none; }
.risk-driver-rule-desc { font-size: 11.5px; color: var(--fg-primary); flex: 1; min-width: 0; }
.risk-driver-rule-delta { font-size: 12px; font-weight: 600; color: var(--critical); flex: none; }
.risk-drivers .risk-footnote { margin-top: 2px; }

/* parecer jurídico — collapsible legal opinion block inside the score card */
.legal-op {
  margin: 0 20px; padding: 18px 0 20px;
  border-top: 1px solid var(--border-primary);
}
.legal-review {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--nl-orange);
  background: var(--high-bg); border: 1px solid var(--high-edge);
  border-radius: var(--radius-sm); padding: 9px 12px; margin-bottom: 16px;
}
.legal-review-icon { font-size: 14px; line-height: 1; }
.legal-head-block { margin-bottom: 10px; }

/* collapsed: clamp the paragraph to its first lines and fade it out;
   expanded: reveal the full text + fundamentação. */
.legal-body {
  position: relative;
}
.legal-body.clamped {
  max-height: 4.9em;                       /* ~3 lines of preview */
  overflow: hidden;
}
.legal-text {
  font-size: 13px; color: var(--fg-primary); line-height: 1.62;
  font-weight: 300; margin: 0; text-wrap: pretty;
}
.legal-text strong { font-weight: 500; color: var(--fg-strong); }
.legal-fade {
  position: absolute; left: 0; right: 0; bottom: 0; height: 2.6em;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--surface) 92%);
}
.legal-basis {
  font-size: 11px; color: var(--fg-disabled); margin-top: 12px;
  font-family: var(--mono); line-height: 1.5;
}

/* prominent expand control, sits directly under the title/preview */
.legal-toggle {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 12px; padding: 7px 14px;
  background: var(--surface-faint);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  color: var(--fg-strong); font-size: 12.5px; font-weight: 500;
  letter-spacing: 0.005em; cursor: pointer;
  transition: background 140ms, border-color 140ms;
}
.legal-toggle:hover { background: var(--surface-strong); border-color: var(--fg-faint); }
.legal-chev { font-size: 11px; line-height: 1; color: var(--fg-faint); }

/* ═════════════════════════════════════════════════════════════════════════
   LIGHT-MODE CONTRAST PASS
   The semantic palette is tuned for dark surfaces — on white the bright
   brand hues fail (yellow text on yellow tint, pale rings/bars). Re-tone
   them to darker, AA-legible variants for light mode ONLY. Tinted *-bg
   tokens are independent rgba literals, so fills stay soft while text,
   ring strokes, bar fills and dots all gain contrast.
   ═════════════════════════════════════════════════════════════════════════ */
[data-theme="light"] {
  /* Status / semantic hues are IDENTICAL to dark mode — same saturation
     and visual impact (critical/warning/success/info + graph relationship
     colors). They live on tinted fills, dots, bars and ring strokes, so
     the wash carries them on white exactly as on near-black. */
  --critical:  #D94040;
  --high:      #F07030;
  --medium:    #E5B23A;
  --clean:     #1DB88A;
  --info:      #6BC4F0;

  /* Secondary / faint text — nudge darker to clear AA on the gray canvas */
  --fg-faint:    #565E6C;
  --fg-disabled: #8B92A0;
}
/* Icons that lean on faint tone read better one step darker */
[data-theme="light"] .icon-btn { color: #565E6C; }
[data-theme="light"] .icon-btn svg { stroke: currentColor; }

/* ═══════════════════════════════════════════════════════════════
   Collapsible sidebar — icon-only rail. body.sb-collapsed narrows
   --sidebar-w (which cascades into --content-left, so the workspace
   margin follows automatically) and hides every text label.
   ═══════════════════════════════════════════════════════════════ */
.sb-collapse-btn {
  display: flex; align-items: center; gap: 11px;
  width: 100%; padding: 7px 12px; margin-top: 4px;
  background: none; border: none; cursor: pointer;
  border-radius: 10px;
  font: inherit; font-size: 12.5px; color: var(--fg-faint);
  transition: background 0.13s, color 0.13s;
}
.sb-collapse-btn:hover { background: var(--surface-soft); color: var(--fg-strong); }

body.sb-collapsed {
  --sidebar-w: 68px;
  --content-left: calc(68px + var(--shell-gap));
}
body.sb-collapsed .sidebar { padding-left: 0 !important; padding-right: 0 !important; }
body.sb-collapsed .sb-sect-label,
body.sb-collapsed .sb-item-label,
body.sb-collapsed .sb-item-sub,
body.sb-collapsed .sb-item-count { display: none; }
body.sb-collapsed .sb-sect { align-items: center; }
body.sb-collapsed .sb-items { width: 100%; align-items: center; }
body.sb-collapsed .sb-item {
  justify-content: center;
  width: 44px; padding: 9px 0; gap: 0;
  margin: 0 auto;
}
body.sb-collapsed .sb-collapse-btn { justify-content: center; width: 44px; padding: 9px 0; margin: 4px auto 0; }
@media (max-width: 720px) {
  /* on the mobile drawer, always show full labels regardless of collapsed pref */
  body.sb-collapsed { --sidebar-w: 280px; --content-left: var(--shell-gap); }
  body.sb-collapsed .sb-sect-label,
  body.sb-collapsed .sb-item-label,
  body.sb-collapsed .sb-item-sub,
  body.sb-collapsed .sb-item-count { display: revert; }
  body.sb-collapsed .sb-item { justify-content: flex-start; width: auto; padding: 6.5px 12px; gap: 11px; }
  body.sb-collapsed .sb-collapse-btn { display: none; }
}

/* ════════════════════════════════════════════════════════════════
   DOSSIER HEADER v3 — structured identity, live registry strip,
   workflow sub-bar, and a risk verdict that fills the centre gap.
   ════════════════════════════════════════════════════════════════ */

/* ── Workflow state (snapshot freshness · assignee) — sits on the
      breadcrumb row, visually distinct from the identity block ── */
.d-workflow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wf-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 4px 10px; border-radius: var(--radius-pill);
  font-size: 11.5px; color: var(--fg-faint);
  background: var(--surface-faint); border: 1px solid var(--border-faint);
  white-space: nowrap;
}
.wf-fresh { color: var(--fg-primary); }
.wf-copy { cursor: pointer; transition: border-color 0.13s ease, background 0.13s ease; }
.wf-copy:hover { border-color: var(--border-strong); background: var(--surface-tinted); }
.wf-copy:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
.wf-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--clean); box-shadow: 0 0 0 3px var(--clean-bg);
  flex: none;
}
.wf-src { color: var(--fg-disabled); font-size: 10.5px; }
.wf-assignee .wf-av {
  width: 18px; height: 18px; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  font: 600 9px var(--mono); letter-spacing: 0.02em;
  background: var(--brass-bg); color: var(--brass);
  margin-right: 8px;
}
.wf-assignee .mono { color: var(--fg-primary); }

/* Avatar-led pill: inset the circle equally from the left / top / bottom
   edges (4px) so it sits perfectly balanced inside the rounded cap, and
   collapse the inter-item gap so only the avatar margin spaces the text. */
.wf-chip.wf-assignee {
  gap: 0;
  padding: 4px 12px 4px 4px;
}

/* ── Structured micro-facts (replaces the flat grey meta sentence) ── */
.d-facts {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 8px 16px; margin-top: 14px;
}
.d-doc-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 4px 5px 4px 9px; border-radius: 7px;
  background: var(--surface-faint); border: 1px solid var(--border-primary);
  cursor: pointer; transition: border-color 0.14s ease, background 0.14s ease, color 0.14s ease;
}
.d-doc-chip:hover { border-color: var(--border-strong); background: var(--surface-tinted); }
.d-doc-type { font-size: 9.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-faint); }
.d-doc-num { font-size: 12.5px; color: var(--fg-strong); }
.d-doc-chip svg { color: var(--fg-faint); transition: color 0.14s ease; }
.d-doc-chip:hover svg { color: var(--fg-primary); }
.d-doc-chip.copied { border-color: var(--clean-edge); background: var(--clean-bg); }
.d-doc-chip.copied .d-doc-type, .d-doc-chip.copied svg { color: var(--clean); }

.d-status-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: var(--radius-pill);
  font-size: 11.5px; font-weight: 500;
  color: var(--clean); background: var(--clean-bg);
}
.d-status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--clean); flex: none; }

.d-fact {
  display: inline-flex; align-items: baseline; gap: 6px;
  font-size: 12.5px; color: var(--fg-primary); min-width: 0;
  white-space: nowrap;
}
.d-fact-k { font-size: 11px; color: var(--fg-faint); }
.d-fact-sub { color: var(--fg-faint); }
.d-fact-code { font-size: 11px; color: var(--fg-disabled); }

/* ── Risk verdict — fills the gap between the name and the ring ── */
.d-verdict {
  display: flex; flex-direction: column; align-items: flex-start;
  justify-content: center; gap: 9px; min-width: 0;
}
.d-verdict-eyebrow { color: var(--fg-faint); }
.d-verdict-sevs { display: flex; flex-wrap: wrap; gap: 7px; }
.sev-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px 4px 8px; border-radius: 8px;
  font-size: 12px; font-weight: 500;
  border: 1px solid transparent;
}
.sev-chip-n { font: 700 13px var(--mono); font-variant-numeric: tabular-nums; }
.sev-chip.critical { color: var(--critical); background: var(--critical-bg); border-color: var(--critical-edge); }
.sev-chip.high     { color: var(--high);     background: var(--high-bg);     border-color: var(--high-edge); }
.sev-chip.medium   { color: var(--medium);   background: var(--medium-bg);   border-color: var(--medium-edge); }
.d-verdict-link {
  display: inline-flex; align-items: center; gap: 4px;
  background: none; border: none; padding: 0; cursor: pointer;
  font-size: 11.5px; color: var(--fg-faint); transition: color 0.13s ease;
}
.d-verdict-link:hover { color: var(--brass); }
.d-verdict-link svg { transition: transform 0.13s ease; }
.d-verdict-link:hover svg { transform: translateX(2px); }

/* ── DADOS CADASTRAIS — live summary strip + expandable full registry ── */
.d-registry { margin: 0 0 4px; }
.d-reg-strip {
  display: flex; align-items: center; gap: 22px;
  padding: 13px 18px;
  background: var(--surface-faint);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius);
  transition: border-color 0.15s ease;
}
.d-reg-strip:hover { border-color: var(--border-strong); }
.d-reg-eyebrow {
  flex: none; font-size: 10px; font-weight: 600; letter-spacing: 0.10em;
  text-transform: uppercase; color: var(--fg-faint);
  align-self: flex-start; padding-top: 3px;
}
.d-reg-cells { flex: 1; display: flex; flex-wrap: wrap; gap: 12px 32px; min-width: 0; }
.d-reg-cell { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.d-reg-k { font-size: 10.5px; color: var(--fg-faint); letter-spacing: 0.01em; }
.d-reg-v { font-size: 13px; font-weight: 500; color: var(--fg-strong); }
.d-reg-toggle {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  align-self: center;
  padding-left: 20px; border-left: 1px solid var(--border-faint);
  background: none; border-top: none; border-right: none; border-bottom: none;
  cursor: pointer; font-size: 11.5px; color: var(--fg-faint);
  transition: color 0.13s ease; white-space: nowrap;
}
.d-reg-toggle:hover { color: var(--brass); }
.d-reg-toggle svg { color: var(--brass); }
.d-registry.open .d-reg-strip { border-radius: var(--radius) var(--radius) 0 0; }
.d-registry .d-meta {
  display: grid; grid-template-columns: max-content 1fr max-content 1fr;
  gap: 9px 28px;
  margin: 0; padding: 16px 18px;
  max-width: none; width: 100%;
  background: var(--surface-faint);
  border: 1px solid var(--border-primary); border-top: none;
  border-radius: 0 0 var(--radius) var(--radius);
}

/* ── Responsive — stack the header zones & registry on narrow widths ── */
@media (max-width: 860px) {
  .d-header { flex-direction: column !important; gap: 18px !important; align-items: flex-start !important; }
  .d-verdict { align-items: flex-start; }
  .d-reg-strip { flex-direction: column; align-items: flex-start; gap: 12px; }
  .d-reg-toggle { padding-left: 0; border-left: none; align-self: flex-start; }
  .d-registry .d-meta { grid-template-columns: max-content 1fr; gap: 7px 20px; }
}

/* ════════════════════════════════════════════════════════════════
   CONTAINER UNIFICATION
   The "Dados Cadastrais" strip and the tab/navigation track adopt the
   canonical content-card surface (.card / .paper):
       background: var(--surface);  border: none;  border-radius: 14px;
   No visible outlines — separation comes purely from the filled surface,
   exactly like "Prováveis beneficiários finais", "Cadeia de evidência",
   "Anomalias estruturais" and every other content card.
   ════════════════════════════════════════════════════════════════ */

/* ── Dados Cadastrais — collapsed summary strip ── */
.d-reg-strip {
  background: var(--surface);
  border: none;
  border-radius: 14px;
}
.d-reg-strip:hover { border-color: transparent; }            /* no outline to tint */
.d-registry.open .d-reg-strip { border-radius: 14px 14px 0 0; }

/* ── Dados Cadastrais — expanded registry panel (same card surface) ── */
.d-registry .d-meta {
  background: var(--surface);
  border: none;
  border-top: 1px solid var(--border-faint);                 /* internal divider only */
  border-radius: 0 0 14px 14px;
}

/* ── Tab / navigation track — same filled card surface ── */
.dt {
  background: var(--surface);
  border: none;
  border-radius: 14px;
}
[data-theme="light"] .dt {
  background: var(--surface);
  border: none;
  border-bottom: none;
  border-radius: 14px;
}

/* ════════════════════════════════════════════════════════════════
   Topbar search — centered in the header. Auto margins on both sides
   of the search absorb the free space equally, so it sits centered
   between the brand (left) and the utilities (right) without crowding
   or overlapping either zone.
   ════════════════════════════════════════════════════════════════ */
@media (min-width: 768px) {
  .topbar { display: flex !important; align-items: center; }
  .topbar-search {
    position: static;
    transform: none;
    flex: 0 1 560px;
    width: auto;
    max-width: 560px;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .topbar-right { margin-left: 0 !important; flex: none; }
}

/* ════════════════════════════════════════════════════════════════
   SKELETON LOADING STATE
   Neutral shimmer placeholders that mirror the real layout. The sheen
   is a soft, low-contrast horizontal sweep; surfaces use the design
   system's neutral tints so the loading view reads as the real
   interface already present, progressively revealing content.
   ════════════════════════════════════════════════════════════════ */
:root {
  --skel-base:  rgba(255, 255, 255, 0.05);
  --skel-sheen: rgba(255, 255, 255, 0.07);
}
[data-theme="light"] {
  --skel-base:  rgba(15, 23, 42, 0.06);
  --skel-sheen: rgba(15, 23, 42, 0.045);
}

.skel {
  position: relative;
  overflow: hidden;
  background: var(--skel-base);
}
.skel::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 0%, var(--skel-sheen) 50%, transparent 100%);
  transform: translateX(-100%);
  animation: skel-shimmer 1.6s ease-in-out infinite;
}
@keyframes skel-shimmer { 100% { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) {
  .skel::after { animation: none; }
}

/* Full-interface overlay — sits above the app chrome, cross-fades out */
.skel-overlay {
  position: fixed; inset: 0; z-index: 80;
  background: var(--page);
  opacity: 1;
  transition: opacity 0.5s ease;
}
.skel-overlay.fading { opacity: 0; pointer-events: none; }

/* Signals panel placeholder — matches the real .sigpanel-body geometry */
.skel-sigpanel {
  width: 300px; flex: none;
  display: flex; flex-direction: column;
  background: var(--bg);
  border-left: 1px solid var(--hairline);
}
.skel-sigpanel-head {
  flex: none;
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 16px 16px 12px; border-bottom: 1px solid var(--rule);
}
.skel-sigpanel-list {
  flex: 1; overflow: hidden;
  padding: 12px; display: flex; flex-direction: column; gap: 12px;
}
.skel-sigpanel-foot {
  flex: none; min-height: 44px;
  display: flex; align-items: center;
  padding: 12px 16px; border-top: 1px solid var(--rule);
}
.skel-sigrow {
  display: flex; flex-direction: column; gap: 9px;
  padding: 15px;
  border-radius: 9px;
  background: var(--surface-tinted);
  border-left: 3px solid var(--skel-base);
}
@media (max-width: 720px) {
  .skel-sigpanel { width: 240px; }
}

/* ════════════════════════════════════════════════════════════════
   UNIFIED CARD SYSTEM  ·  authoritative consolidation (final layer)
   ────────────────────────────────────────────────────────────────
   ONE coherent container language. Card type is signalled by content
   and accents — never by a different container chrome.

     • Same fill approach     — filled surfaces from the DS neutral ladder
     • Same stroke behavior    — top-level cards carry ONE hairline
                                 (--card-stroke); nested fills use tone,
                                 not a stroke
     • Same radius family      — 14px containers · 10px nested
     • Same surface contrast   — page → surface (card) → surface-tinted
                                 (nested) → surface-tinted-hi (hover)
     • Same hover / selected   — tint up one step · brass ring when active
     • Same nested separation  — a nested fill = exactly one tonal step;
                                 never a second bordered card inside a card
   ════════════════════════════════════════════════════════════════ */
:root {
  --card-stroke:        var(--border-faint);
  --card-radius:        14px;
  --card-radius-nested: 10px;
}
[data-theme="light"] { --card-stroke: var(--border-primary); }

/* ── TIER 1 · top-level container cards ───────────────────────── */
.card,
.paper:not(.flat):not(.deep),
.gt > .card,
.fb-kpis,
.d-reg-strip,
.dt,
.modal,
.fb-pop,
.settings-pop {
  background: var(--surface);
  border: 1px solid var(--card-stroke);
  border-radius: var(--card-radius);
  box-shadow: none;
}
.gt > .card { overflow: hidden; }
[data-theme="light"] .card,
[data-theme="light"] .paper:not(.flat):not(.deep),
[data-theme="light"] .dt,
[data-theme="light"] .d-reg-strip { border: 1px solid var(--card-stroke); }

/* Docked graph signals panel — same card surface, single divider edge */
.sigpanel-body, .skel-sigpanel {
  background: var(--surface);
  border: none; border-left: 1px solid var(--card-stroke);
  border-radius: 0;
}

/* Dados cadastrais — one seamless card across collapsed / expanded */
.d-registry.open .d-reg-strip { border-radius: var(--card-radius) var(--card-radius) 0 0; border-bottom: none; }
.d-registry .d-meta {
  background: var(--surface);
  border: 1px solid var(--card-stroke); border-top: none;
  border-radius: 0 0 var(--card-radius) var(--card-radius);
}

/* ── TIER 2 · nested fills & info panels (tone = separation) ──── */
.gt-chain-steps,
.builder-steps, .builder-summary,
.lote-meta, .mlro-context,
.xml-preview,
.fb-history,
.d-banner {
  background: var(--surface-tinted);
  border: none;
  border-radius: var(--card-radius-nested);
  box-shadow: none;
}

/* Legend strip sits at the top level on the canvas (like the graph card),
   so it carries the same shared hairline — tinted fill, nested radius. */
.gt-legend-row {
  background: var(--surface-tinted);
  border: 1px solid var(--card-stroke);
  border-radius: var(--card-radius-nested);
  box-shadow: none;
}

/* ── Semantic nested cards · tone + 3px severity left accent ──── */
.sigrow, .skel-sigrow {
  background: var(--surface-tinted);
  border: none;
  border-left: 3px solid var(--fg-disabled);
  border-radius: var(--card-radius-nested);
  box-shadow: none;
}
.sigrow.critical { border-left-color: var(--critical); }
.sigrow.high     { border-left-color: var(--high); }
.sigrow.medium   { border-left-color: var(--medium); }
.sigrow.clean    { border-left-color: var(--clean); }

/* ── Unified hover / selected across interactive cards & rows ──── */
.sigrow:hover:not(.static),
.tbl tbody tr:hover { background: var(--surface-tinted-hi); }
.sigrow.active { background: var(--brass-bg); box-shadow: inset 0 0 0 1px rgba(61,111,232,0.45); }

/* ═════════════════════════════════════════════════════════════════════════
   V15 · LIGHT MODE — DEPTH, SURFACE LADDER & HIERARCHY  (final layer)
   ─────────────────────────────────────────────────────────────────────────
   Brings light mode to parity with dark: a clear three-tier surface ladder
   (Linear-style) where the main workspace is a dedicated, very light frame
   sitting on a slightly darker / warmer canvas — separated by TONE and a
   single hairline, not by heavy shadow.

       0 · page          gray-warm canvas   ← sidebar + topbar live here
       1 · workspace      near-white frame   ← the dedicated work surface
       2 · surface        white cards        ← panels / cards inside
       3 · surface-faint  tonal nested fill  ← sections, hovers, wells
   ═════════════════════════════════════════════════════════════════════════ */
[data-theme="light"] {
  /* Perfectly neutral grayscale — no warm/cream/cool cast anywhere.
     Extremely tight ladder so the layer separation is barely perceptible
     (Linear / Notion). Going inward = a hair lighter, never white-on-gray. */
  --page:             #F4F4F4;   /* outer canvas — near-white */
  --page-faint:       #F4F4F4;
  --workspace-bg:     #FAFAFA;   /* frame — slightly lighter, almost white */
  --surface:          #FFFFFF;   /* cards — pure white */
  --surface-faint:    #F4F4F4;   /* inputs · tabs · secondary containers · hover */
  --surface-strong:   #FFFFFF;   /* elevated (modals / popovers) */
  --bg-deep:          #F0F0F0;   /* sunken wells · code · graph canvas */

  --surface-soft:        #FFFFFF;
  --surface-soft-hover:  #F4F4F4;
  --surface-soft-active: #ECECEC;
  --surface-tinted:    rgba(0,0,0,0.035);
  --surface-tinted-hi: rgba(0,0,0,0.06);

  /* Hairlines — neutral, low-contrast, minimal noise */
  --card-stroke:      rgba(0,0,0,0.06);
  --border-strong:    rgba(0,0,0,0.10);
  --border-primary:   rgba(0,0,0,0.06);
  --border-faint:     rgba(0,0,0,0.04);
  --selected-fill:    rgba(0,0,0,0.05);

  /* Neutral text ramp — drop the slate/blue cast entirely */
  --fg-strong:   #1A1A1A;
  --fg-primary:  #333333;
  --fg-faint:    #707070;
  --fg-disabled: #9E9E9E;
}

/* ── The workspace frame — a dedicated surface on the canvas ─────────────
   Tonal separation + one subtle stroke; only a whisper of shadow so the
   frame reads as "sitting on top" without feeling card-heavy. */
[data-theme="light"] .workspace,
[data-theme="light"] .workspace.workspace {
  background: var(--workspace-bg) !important;
  border: 1px solid var(--border-faint) !important;   /* whisper edge, integrated */
  box-shadow: none !important;                         /* tone only, no shadow */
}

/* Topbar + sidebar belong to the canvas — flush, no seam */
[data-theme="light"] .topbar {
  background: var(--page) !important;
  border-bottom: none !important;
  box-shadow: none !important;
}
[data-theme="light"] .sidebar {
  background: var(--page) !important;
  border-right: none !important;
}

/* Topbar search lifts off the gray canvas as a clean white field */
[data-theme="light"] .topbar-search {
  background: var(--surface) !important;
  border: 1px solid var(--border-primary) !important;
}
[data-theme="light"] .topbar-search:hover {
  background: var(--surface) !important;
  border-color: var(--border-strong) !important;
}

/* Sidebar nav — clearer active + hover states on the canvas */
[data-theme="light"] .sb-item:hover { background: rgba(0,0,0,0.04); }
[data-theme="light"] .sb-item.active {
  background: var(--surface);
  color: var(--fg-strong);
  box-shadow: inset 0 0 0 1px var(--border-primary);
}
[data-theme="light"] .sb-item.active .sb-item-count { color: var(--fg-faint); }

/* Top-level cards & key containers — single crisp hairline on white frame */
[data-theme="light"] .card,
[data-theme="light"] .paper:not(.flat):not(.deep),
[data-theme="light"] .dt,
[data-theme="light"] .gt > .card,
[data-theme="light"] .gt-legend-row,
[data-theme="light"] .d-reg-strip,
[data-theme="light"] .fb-kpis,
[data-theme="light"] .modal,
[data-theme="light"] .fb-pop,
[data-theme="light"] .settings-pop {
  border: 1px solid var(--card-stroke);
}
[data-theme="light"] .d-registry .d-meta {
  border: 1px solid var(--card-stroke); border-top: none;
}

/* Section dividers a touch more present so stacked content scans cleanly */
[data-theme="light"] .section-head { border-bottom: 1px solid var(--border-primary); }
[data-theme="light"] .signal,
[data-theme="light"] .src-row,
[data-theme="light"] .gt-ubo-row,
[data-theme="light"] .gt-anom-row { border-top: 1px solid var(--border-faint); }
[data-theme="light"] .tbl tbody tr td { border-bottom: 1px solid var(--border-faint); }

/* Neutral dark CTA (was slate #111827) — keep the contrast, drop the cool cast */
[data-theme="light"] .btn.primary,
[data-theme="light"] .d-actions .btn.primary {
  background: #1C1C1C !important; background-image: none !important;
  color: #FFFFFF !important; border: 1px solid #1C1C1C !important;
}
[data-theme="light"] .btn.primary:hover,
[data-theme="light"] .d-actions .btn.primary:hover { background: #2A2A2A !important; border-color: #2A2A2A !important; }
[data-theme="light"] .profile-toggle button.active,
[data-theme="light"] .gt-depth-btn.active { background: #1C1C1C !important; color: #FFFFFF !important; border-color: #1C1C1C !important; }

/* Neutralize the few remaining slate-tinted hover washes */
[data-theme="light"] .icon-btn:hover,
[data-theme="light"] .btn.ghost:hover,
[data-theme="light"] .card-foot-btn:hover,
[data-theme="light"] .dt-tab:hover,
[data-theme="light"] .dt-tab-end:hover,
[data-theme="light"] .tabs button:hover,
[data-theme="light"] .tbl tbody tr:hover { background: rgba(0,0,0,0.04); }

/* ═════════════════════════════════════════════════════════════════
   MOBILE (≤767px) · graph · detected-signals · entity card · score
   Intentional vertical flow — full-width sections, comfortable
   spacing, no compressed desktop overlays.
   ═════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  /* 1 · the retractable overlay rail + edge handle never show on mobile;
        signals render as a section below the graph instead. */
  .sigpanel { display: none !important; }

  /* Detected-signals — full-width card below the graph canvas */
  .sig-mobile { margin-top: 2px; }
  .sig-mobile > .card-head { padding: 16px 16px 10px !important; }
  .sig-mobile .sigpanel-meta { font-size: 11px; color: var(--fg-faint); }
  .sig-mobile-list {
    display: flex; flex-direction: column; gap: 10px;
    padding: 4px 14px 16px !important;
  }
  .sig-mobile-list .sigrow { width: 100%; }

  /* 2 · entity detail card → bottom-sheet modal inside the graph area.
        Solid surface, system radius/stroke, so graph lines never bleed
        through. Closed only by its own ✕. */
  .gnode-card {
    top: auto !important; bottom: 12px !important;
    left: 12px !important; right: 12px !important;
    width: auto !important; max-height: 80% !important;
    background: var(--surface) !important;
    border: 1px solid var(--card-stroke) !important;
    border-radius: 16px !important;
    box-shadow: 0 12px 36px rgba(15,23,42,0.20) !important;
    overflow: auto !important;
  }
  .gnode-card > div { padding-left: 18px !important; padding-right: 18px !important; }
  .gnode-card > .flex.jcb.aic { padding-top: 16px !important; padding-bottom: 12px !important; }
  .gnode-card h3 { word-break: break-word; }

  /* 4 · score / risk — single grouped, vertical, centered component;
        report button full-width below. */
  .d-score,
  .d-score.d-score-clickable {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 16px !important;
    min-width: 0 !important;
    width: 100% !important;
    padding: 8px 8px 4px !important;
  }
  .score-ring-wrap,
  .score-ring { width: 200px !important; height: 200px !important; }
  .score-ring-num { font-size: 58px !important; }
  .score-ring-sub { font-size: 11px !important; margin-top: 4px !important; }
  .score-ring-band { font-size: 18px !important; margin-top: 4px !important; }
  .d-score-report {
    margin-top: 0 !important;
    width: 100% !important;
    justify-content: center !important;
    min-height: 48px !important;
    font-size: 14px !important;
  }

  /* ── mobile header: one centered, spacious column ── */
  .d-header {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 28px !important;
    padding: 4px 0 30px !important;
  }
  .d-id {
    width: 100% !important;
    align-items: center !important;
    text-align: center !important;
  }
  .d-id-eyebrow {
    margin-bottom: 14px !important;
    white-space: normal !important;
  }
  .d-id .d-id-title { margin-bottom: 16px !important; justify-content: center !important; }
  .d-id-name { text-align: center !important; }
  /* each info row centers on the shared vertical axis with breathing room */
  .d-facts.d-facts-id,
  .d-facts.d-facts-meta {
    justify-content: center !important;
    width: 100% !important;
  }
  .d-facts.d-facts-id { margin-bottom: 18px !important; }
  .d-facts.d-facts-meta { margin-bottom: 0 !important; row-gap: 12px !important; }
  /* CTA: centered, aligned with the content above, clearly separated */
  .d-id .d-score-report {
    margin-top: 28px !important;
    align-self: center !important;
    width: auto !important;
    min-width: 240px !important;
  }
}

@media (max-width: 380px) {
  .d-score,
  .d-score.d-score-clickable { align-items: center !important; }
  .score-ring-wrap,
  .score-ring { width: 172px !important; height: 172px !important; }
  .score-ring-num { font-size: 50px !important; }
}

/* ── Autenticação ─────────────────────────────────────────── */
.auth-bg {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--nl-bg-base, #0b0d12);
  padding: 24px;
}
.auth-card {
  background: var(--nl-surface-1, #14171f);
  border: 1px solid var(--nl-border, #23293a);
  border-radius: 16px;
  padding: 40px;
  width: 100%;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.auth-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 32px;
}
.auth-mark { width: 36px; height: 36px; object-fit: contain; }
.auth-brand { font-size: 15px; font-weight: 700; letter-spacing: .04em; color: var(--nl-text-base, #e8e4dc); }
.auth-brand-sub { font-size: 11px; color: var(--nl-text-muted, #6b7280); margin-top: 1px; }
.auth-title { font-size: 22px; font-weight: 600; color: var(--nl-text-base, #e8e4dc); margin-bottom: 24px; }
.auth-desc { font-size: 14px; color: var(--nl-text-muted, #6b7280); margin-bottom: 24px; line-height: 1.6; }
.auth-form { display: flex; flex-direction: column; gap: 16px; }
.auth-field { display: flex; flex-direction: column; gap: 6px; }
.auth-field label { font-size: 13px; font-weight: 500; color: var(--nl-text-sub, #9ca3af); }
.auth-field input {
  background: var(--nl-bg-base, #0b0d12);
  border: 1px solid var(--nl-border, #23293a);
  border-radius: 8px;
  color: var(--nl-text-base, #e8e4dc);
  font-size: 15px;
  padding: 10px 14px;
  outline: none;
  transition: border-color .15s;
  width: 100%;
  font-family: inherit;
}
.auth-field input:focus { border-color: var(--nl-blue, #3b82f6); }
.auth-field input:disabled { opacity: .5; cursor: not-allowed; }
.auth-error {
  font-size: 13px;
  color: #fca5a5;
  background: rgba(185,28,28,.15);
  border: 1px solid rgba(185,28,28,.35);
  border-radius: 8px;
  padding: 9px 12px;
}
.auth-btn {
  width: 100%;
  background: var(--nl-blue, #1d4ed8);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  padding: 11px;
  cursor: pointer;
  transition: background .15s, opacity .15s;
  margin-top: 4px;
  font-family: inherit;
}
.auth-btn:hover:not(:disabled) { background: #1e40af; }
.auth-btn:disabled { opacity: .55; cursor: not-allowed; }
.auth-link {
  background: none;
  border: none;
  color: var(--nl-blue, #3b82f6);
  font-size: 14px;
  cursor: pointer;
  padding: 0;
  margin-top: 20px;
  text-align: center;
  font-family: inherit;
  transition: opacity .15s;
}
.auth-link:hover { opacity: .75; }
.auth-sent-icon { font-size: 40px; text-align: center; margin-bottom: 8px; }
.auth-countdown-msg { font-size: 12px; color: #4ade80; margin-bottom: 4px; }
.auth-brand-sub { font-size: 11px; color: var(--fg-disabled, #64748b); margin-top: 1px; }

/* ── Change Password overlay ──────────────────────────────────── */
.chpw-overlay {
  position: fixed; inset: 0; z-index: 1200;
  background: rgba(0,0,0,.55);
  display: flex; align-items: center; justify-content: center;
}
.chpw-card {
  background: var(--surface); border: 1px solid var(--border-primary);
  border-radius: 14px; padding: 28px;
  width: 100%; max-width: 400px;
  box-shadow: 0 20px 60px rgba(0,0,0,.4);
}
.chpw-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 22px;
}
.chpw-title {
  font-size: 17px; font-weight: 600; color: var(--fg-strong);
}

/* ── Admin Panel ──────────────────────────────────────────────── */
.adm-panel {
  padding: 32px 40px;
  max-width: 960px;
}
.adm-header { margin-bottom: 24px; }
.adm-title  { font-size: 22px; font-weight: 700; color: var(--nl-text-base); margin: 0; }

.adm-tabs {
  display: flex; gap: 4px;
  border-bottom: 1px solid var(--nl-border);
  margin-bottom: 28px;
}
.adm-tab {
  background: none; border: none; cursor: pointer;
  padding: 8px 20px; font-size: 14px; font-weight: 500;
  color: var(--nl-text-muted); border-bottom: 2px solid transparent;
  margin-bottom: -1px; transition: color .15s, border-color .15s;
}
.adm-tab:hover { color: var(--nl-text-base); }
.adm-tab--active { color: var(--nl-accent); border-bottom-color: var(--nl-accent); }

.adm-tab-body { }

.adm-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 20px;
}
.adm-section-title { font-size: 16px; font-weight: 600; color: var(--nl-text-base); margin: 0; }

.adm-filter-row {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 20px; font-size: 13px; color: var(--nl-text-muted);
}
.adm-filter-row select {
  background: var(--nl-surface); border: 1px solid var(--nl-border);
  color: var(--nl-text-base); border-radius: 6px; padding: 6px 10px;
  font-size: 13px; outline: none;
}

.adm-table {
  width: 100%; border-collapse: collapse; font-size: 13px;
}
.adm-table th {
  text-align: left; padding: 8px 12px;
  color: var(--nl-text-muted); font-weight: 500; font-size: 12px;
  border-bottom: 1px solid var(--nl-border);
}
.adm-table td {
  padding: 10px 12px; border-bottom: 1px solid var(--nl-border-subtle, var(--nl-border));
  color: var(--nl-text-base); vertical-align: middle;
}
.adm-table tr:last-child td { border-bottom: none; }
.adm-table tr:hover td { background: var(--nl-surface-hover, rgba(255,255,255,.03)); }

.adm-td-name { font-weight: 500; }
.adm-code    { font-family: ui-monospace, monospace; font-size: 12px; color: var(--nl-text-muted); }
.adm-hint    { color: var(--nl-text-muted); font-size: 12px; }

.adm-badge {
  display: inline-block; padding: 2px 8px; border-radius: 99px;
  font-size: 11px; font-weight: 600; letter-spacing: .03em;
}
.adm-badge--on  { background: rgba(34,197,94,.15); color: #4ade80; }
.adm-badge--off { background: rgba(148,163,184,.12); color: var(--nl-text-muted); }

.adm-toggle {
  padding: 4px 12px; border-radius: 6px; font-size: 12px; font-weight: 500;
  cursor: pointer; border: 1px solid; transition: opacity .15s;
}
.adm-toggle:disabled { opacity: .5; cursor: not-allowed; }
.adm-toggle--on  { background: rgba(239,68,68,.1);  color: #f87171; border-color: rgba(239,68,68,.3); }
.adm-toggle--off { background: rgba(34,197,94,.1);  color: #4ade80; border-color: rgba(34,197,94,.3); }

.adm-loading { color: var(--nl-text-muted); font-size: 14px; padding: 32px 0; }
.adm-empty   { color: var(--nl-text-muted); font-size: 14px; padding: 32px 0; }
.adm-error   { color: #f87171; font-size: 13px; margin-bottom: 16px; padding: 10px 14px;
               background: rgba(239,68,68,.08); border-radius: 8px; border: 1px solid rgba(239,68,68,.2); }

.adm-form-card {
  background: var(--nl-surface); border: 1px solid var(--nl-border);
  border-radius: 12px; padding: 24px; margin-bottom: 28px; max-width: 520px;
}
.adm-form-title { font-size: 15px; font-weight: 600; margin: 0 0 4px; color: var(--nl-text-base); }
.adm-form-desc  { font-size: 13px; color: var(--nl-text-muted); margin: 0 0 20px; }
.adm-form       { display: flex; flex-direction: column; gap: 16px; }

.adm-field       { display: flex; flex-direction: column; gap: 6px; }
.adm-field label { font-size: 13px; font-weight: 500; color: var(--nl-text-subtle, var(--nl-text-muted)); }
.adm-field input,
.adm-field select {
  background: var(--nl-bg, #0f172a); border: 1px solid var(--nl-border);
  border-radius: 8px; color: var(--nl-text-base); font-size: 14px;
  padding: 9px 12px; outline: none; transition: border-color .15s;
}
.adm-field input:focus,
.adm-field select:focus { border-color: var(--nl-accent); }

.adm-form-actions { display: flex; gap: 10px; justify-content: flex-end; padding-top: 4px; }

.adm-btn-primary {
  background: var(--nl-accent); color: #fff; border: none;
  border-radius: 8px; padding: 9px 20px; font-size: 13px; font-weight: 600;
  cursor: pointer; transition: opacity .15s;
}
.adm-btn-primary:hover:not(:disabled) { opacity: .85; }
.adm-btn-primary:disabled { opacity: .5; cursor: not-allowed; }

.adm-btn-ghost {
  background: none; color: var(--nl-text-muted); border: 1px solid var(--nl-border);
  border-radius: 8px; padding: 9px 18px; font-size: 13px; font-weight: 500;
  cursor: pointer; transition: color .15s;
}
.adm-btn-ghost:hover { color: var(--nl-text-base); }

/* ─────────────────────────────────────────────────────────────
   Entity Profile Screen — .ep-*
   ───────────────────────────────────────────────────────────── */

.ep-container { padding-top: 32px; }

.ep-header { margin-bottom: 28px; }

.ep-entity-type-badge {
  display: inline-block; font-size: 10px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; background: var(--surface-2); border: 1px solid var(--hairline-2);
  border-radius: 4px; padding: 3px 8px; color: var(--ink-3); margin-bottom: 8px;
}

.ep-name { font-size: 32px; line-height: 1.15; margin: 4px 0 6px; }
.ep-doc  { font-size: 13px; color: var(--ink-3); letter-spacing: .04em; }

/* Risk banner */
.ep-risk-banner {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  border: 1.5px solid; border-radius: 10px; padding: 20px 24px; margin-bottom: 24px;
}
.ep-risk-left  { display: flex; align-items: baseline; gap: 16px; }
.ep-risk-label { font-size: 28px; font-weight: 700; font-family: var(--serif); }
.ep-risk-score { font-size: 20px; color: var(--ink-2); }
.ep-risk-flags { display: flex; gap: 8px; flex-wrap: wrap; }

.ep-flag          { font-size: 11px; font-weight: 600; border-radius: 4px; padding: 4px 10px; letter-spacing: .04em; text-transform: uppercase; }
.ep-flag--critical { background: rgba(192,57,43,.15); color: var(--critical); border: 1px solid rgba(192,57,43,.3); }
.ep-flag--high     { background: rgba(224,123,57,.12); color: var(--high);     border: 1px solid rgba(224,123,57,.3); }
.ep-flag--medium   { background: rgba(214,168,0,.10);  color: var(--medium);   border: 1px solid rgba(214,168,0,.25); }

/* Body layout */
.ep-body { display: flex; flex-direction: column; gap: 16px; }

.ep-section       { padding: 20px 24px; }
.ep-section-title { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 16px; }

/* Pillar bars */
.ep-pillars { display: flex; flex-direction: column; gap: 10px; }
.ep-pillar-row {
  display: grid; grid-template-columns: 160px 1fr 52px 40px;
  align-items: center; gap: 12px;
}
.ep-pillar-name     { font-size: 13px; color: var(--ink-2); }
.ep-pillar-bar-wrap { height: 6px; background: var(--surface-2); border-radius: 3px; overflow: hidden; }
.ep-pillar-bar-fill { height: 100%; border-radius: 3px; transition: width .4s; }
.ep-pillar-score    { font-size: 13px; text-align: right; }
.ep-pillar-weight   { font-size: 11px; }

/* Operational explanation */
.ep-explanation { font-size: 14px; line-height: 1.7; color: var(--ink-2); }

/* Signals */
.ep-signals { display: flex; flex-direction: column; gap: 8px; }
.ep-signal-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px; background: var(--surface-2); border-radius: 6px;
  border: 1px solid var(--hairline-2);
}
.ep-signal-name  { font-size: 13px; color: var(--ink-2); }
.ep-signal-score { font-size: 13px; font-weight: 600; }

/* Subject details grid */
.ep-details-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px 24px;
}
.ep-details-grid > div { display: flex; flex-direction: column; gap: 3px; }
.ep-detail-label { font-size: 11px; color: var(--ink-4); text-transform: uppercase; letter-spacing: .06em; }

/* Data freshness */
.ep-freshness { display: flex; flex-direction: column; gap: 8px; }
.ep-freshness-row {
  display: flex; align-items: center; gap: 12px;
  font-size: 13px; border-bottom: 1px solid var(--hairline-2); padding-bottom: 6px;
}
.ep-freshness-domain { flex: 1; color: var(--ink-2); }
.ep-freshness-found  { font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 3px; }
.ep-found--yes { background: rgba(77,161,74,.10); color: var(--clean); }
.ep-found--no  { background: var(--surface-2); color: var(--ink-4); }

/* Metadata footer */
.ep-meta { font-size: 11px; padding: 8px 0 24px; letter-spacing: .02em; }

/* Loading/polling state */
.ep-state-box {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; padding: 80px 24px; text-align: center;
}

@keyframes ep-spin { to { transform: rotate(360deg); } }
.ep-spinner {
  width: 36px; height: 36px; border: 3px solid var(--hairline-2);
  border-top-color: var(--brass); border-radius: 50%;
  animation: ep-spin .8s linear infinite;
}