:root {
    --bg: #F5F8F8;
    --surface: #FFFFFF;
    --surface-alt: #EAF1F0;
    --border: #DCE6E4;
    --text: #10171C;
    --text-secondary: #55666B;
    --navy: #112240;
    --navy-ink: #FFFFFF;
    --teal: #028090;
    --teal-strong: #016670;
    --mint: #02C39A;
    --mint-ink: #04352A;
    --success-bg: #E4F3EA;
    --success-text: #1E7A4C;
    --warning-bg: #FCEFD9;
    --warning-text: #93590A;
    --critical-bg: #FBE9E7;
    --critical-text: #A32C22;
    --shadow: 0 1px 2px rgba(16,23,28,0.06), 0 10px 28px -14px rgba(16,23,28,0.18);
    --focus: #028090;
    --r-sm: 6px;
    --r-md: 10px;
    --r-lg: 14px;
    --font-display: 'Archivo', 'Arial Narrow', sans-serif;
    --font-body: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
    --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --bg: #0A141F;
      --surface: #101D2C;
      --surface-alt: #16273A;
      --border: #223349;
      --text: #E7EEF1;
      --text-secondary: #93A6B0;
      --navy: #16324D;
      --navy-ink: #F2F6F7;
      --teal: #3FC3D2;
      --teal-strong: #6ED8E4;
      --mint: #35E0AC;
      --mint-ink: #04140F;
      --success-bg: #123726;
      --success-text: #7FE0AC;
      --warning-bg: #3A2A0F;
      --warning-text: #F0B94D;
      --critical-bg: #3A1714;
      --critical-text: #F5978A;
      --shadow: 0 1px 2px rgba(0,0,0,0.4), 0 10px 28px -14px rgba(0,0,0,0.65);
      --focus: #3FC3D2;
    }
  }
  :root[data-theme="dark"] {
    --bg: #0A141F;
    --surface: #101D2C;
    --surface-alt: #16273A;
    --border: #223349;
    --text: #E7EEF1;
    --text-secondary: #93A6B0;
    --navy: #16324D;
    --navy-ink: #F2F6F7;
    --teal: #3FC3D2;
    --teal-strong: #6ED8E4;
    --mint: #35E0AC;
    --mint-ink: #04140F;
    --success-bg: #123726;
    --success-text: #7FE0AC;
    --warning-bg: #3A2A0F;
    --warning-text: #F0B94D;
    --critical-bg: #3A1714;
    --critical-text: #F5978A;
    --shadow: 0 1px 2px rgba(0,0,0,0.4), 0 10px 28px -14px rgba(0,0,0,0.65);
    --focus: #3FC3D2;
  }

  * { box-sizing: border-box; }
  html { color-scheme: light dark; }
  body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
  }
  h1, h2, h3 { font-family: var(--font-display); text-wrap: balance; margin: 0; }
  a { color: var(--teal); }
  button { font-family: inherit; }
  :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
  @media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
  }

  /* ---------- Top bar ---------- */
  .topbar {
    background: var(--navy);
    color: var(--navy-ink);
    padding: 14px clamp(16px, 4vw, 36px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
  }
  .brand { display: flex; align-items: baseline; gap: 10px; }
  .brand .mark {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 17px;
    letter-spacing: 0.01em;
  }
  .brand .product {
    font-size: 13px;
    color: rgba(255,255,255,0.72);
    font-weight: 500;
    padding-left: 10px;
    border-left: 1px solid rgba(255,255,255,0.28);
  }
  .persona-switch {
    display: inline-flex;
    background: rgba(255,255,255,0.10);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 999px;
    padding: 3px;
    gap: 2px;
  }
  .persona-switch button {
    border: none;
    background: transparent;
    color: rgba(255,255,255,0.75);
    font-size: 13px;
    font-weight: 600;
    padding: 7px 16px;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
  }
  .persona-switch button[aria-pressed="true"] {
    background: var(--mint);
    color: var(--mint-ink);
  }

  /* ---------- Layout ---------- */
  main { max-width: 1080px; margin: 0 auto; padding: clamp(16px, 4vw, 32px) clamp(16px, 4vw, 36px) 60px; }
  .view-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
  .view-head .who { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-secondary); font-weight: 600; margin-bottom: 4px; }
  .view-head h1 { font-size: 24px; font-weight: 700; }

  .role-select { display: inline-flex; border: 1px solid var(--border); border-radius: 999px; padding: 3px; gap: 2px; background: var(--surface); box-shadow: var(--shadow); }
  .role-select button {
    border: none; background: transparent; color: var(--text-secondary);
    font-size: 12.5px; font-weight: 600; padding: 7px 13px; border-radius: 999px; cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
  }
  .role-select button[aria-pressed="true"] { background: var(--teal); color: #fff; }

  .kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 26px; }
  .kpi {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
    padding: 16px 18px; box-shadow: var(--shadow);
  }
  .kpi .label { font-size: 12px; color: var(--text-secondary); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
  .kpi .value { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 26px; font-weight: 600; margin-top: 6px; }
  .kpi .sub { font-size: 12.5px; color: var(--text-secondary); margin-top: 3px; }

  section.block { margin-bottom: 30px; }
  .block-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
  .block-head h2 { font-size: 16.5px; font-weight: 700; }
  .block-head .hint { font-size: 12.5px; color: var(--text-secondary); }

  /* ---------- Reg-hook tag ---------- */
  .reghook {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 11px; font-weight: 600; color: var(--teal-strong);
    background: color-mix(in srgb, var(--teal) 12%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--teal) 30%, var(--border));
    padding: 3px 9px; border-radius: 999px; white-space: nowrap;
  }
  .reghook::before { content: "§"; font-weight: 700; }

  /* ---------- Alert card ---------- */
  .alert { position: relative; display: flex; gap: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 16px 18px 16px 20px; box-shadow: var(--shadow); overflow: hidden; }
  .alert::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--warning-text); }
  .alert.info::before { background: var(--teal); }
  .alert .body { flex: 1; min-width: 0; }
  .alert .headline { font-weight: 700; font-size: 14.5px; margin-bottom: 4px; }
  .alert p { margin: 0 0 10px; color: var(--text-secondary); font-size: 13.5px; }
  .alert .actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

  .btn { border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: 13px; font-weight: 600; padding: 8px 14px; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease; }
  .btn:hover { border-color: var(--teal); }
  .btn.primary { background: var(--teal); border-color: var(--teal); color: #fff; }
  .btn.primary:hover { background: var(--teal-strong); border-color: var(--teal-strong); }
  .btn.ghost { background: transparent; }
  .btn.small { padding: 6px 11px; font-size: 12px; }
  .btn:disabled { opacity: 0.5; cursor: not-allowed; }

  .confirm-msg { font-size: 12.5px; color: var(--success-text); font-weight: 600; display: none; align-items: center; gap: 6px; }
  .confirm-msg.show { display: inline-flex; }

  /* ---------- Cards / tables ---------- */
  .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
  .mandate {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
    padding: 16px 18px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 8px;
  }
  .mandate .top-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
  .mandate .name { font-weight: 700; font-size: 14.5px; }
  .mandate dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; margin: 4px 0 0; font-size: 12.5px; }
  .mandate dt { color: var(--text-secondary); }
  .mandate dd { margin: 0; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
  .mandate .row-actions { margin-top: 6px; display: flex; gap: 8px; }

  .pill { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; padding: 3px 10px; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.03em; }
  .pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
  .pill.active { background: var(--success-bg); color: var(--success-text); }
  .pill.pending { background: var(--warning-bg); color: var(--warning-text); }
  .pill.flagged { background: var(--critical-bg); color: var(--critical-text); }
  .pill.expired { background: var(--surface-alt); color: var(--text-secondary); }

  .table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow); background: var(--surface); }
  table { width: 100%; border-collapse: collapse; min-width: 640px; }
  thead th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-secondary); font-weight: 700; padding: 11px 16px; background: var(--surface-alt); border-bottom: 1px solid var(--border); }
  tbody td { padding: 12px 16px; border-bottom: 1px solid var(--border); font-size: 13.5px; vertical-align: middle; }
  tbody tr:last-child td { border-bottom: none; }
  td.num, th.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
  td.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--text-secondary); font-size: 12.5px; }

  .panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 20px 22px; box-shadow: var(--shadow); }
  .panel + .panel { margin-top: 12px; }
  .panel h3 { font-size: 14.5px; margin-bottom: 4px; }
  .panel .desc { font-size: 13px; color: var(--text-secondary); margin: 0 0 14px; max-width: 60ch; }
  .rights-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
  .right-item { border: 1px solid var(--border); border-radius: var(--r-sm); padding: 12px 14px; background: var(--surface-alt); }
  .right-item .t { font-weight: 700; font-size: 13px; margin-bottom: 3px; }
  .right-item .d { font-size: 12.5px; color: var(--text-secondary); }
  .right-item button { margin-top: 8px; }

  .status-dot { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; }
  .status-dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--success-text); }
  .status-dot.warn::before { background: var(--warning-text); }

  .footnote { margin-top: 44px; padding-top: 18px; border-top: 1px solid var(--border); font-size: 12px; color: var(--text-secondary); max-width: 76ch; }
  .footnote strong { color: var(--text); }

  [hidden] { display: none !important; }

  @media (max-width: 640px) {
    .mandate dl { grid-template-columns: 1fr; }
    .mandate dt::after { content: ":"; }
  }
  @media (max-width: 560px) {
    .persona-switch { flex-wrap: wrap; }
    .persona-switch button { padding: 7px 12px; font-size: 12px; }
  }