/* ============================================================
   Nitto Avecia Customer Portal — styles
   Extracted verbatim from Customer_Dashboard_V0_1 (template),
   with portal v2 additions appended at the end of the file.
   ============================================================ */
    :root {
      /* ===== Layer 1 — primitives (raw, theme-independent) ===== */
      --navy-900:#080a55; --navy-800:#0c0f6f; --navy-700:#1b1f86; --navy-600:#2b30a3; --navy-500:#3d43c0;
      --slate-50:#f6f7fb; --slate-100:#eef1f7; --slate-200:#e2e7f0; --slate-300:#cdd5e3;
      --slate-400:#9aa4bd; --slate-500:#6b7596; --slate-600:#4a5474; --slate-700:#333c59; --slate-800:#1f2740; --slate-900:#121829;
      --teal-400:#22b8cf; --teal-500:#0fa3b8; --teal-600:#0c8a9d; --teal-soft:#e2f6f9;
      --violet-500:#7a5fb8; --violet-soft:#efeaf8;
      --green-500:#168a47; --green-soft:#e9f8ef; --amber-500:#b66b00; --amber-soft:#fff3df;
      --red-500:#c33232; --red-soft:#ffebeb; --cyan-500:#0b7896; --cyan-soft:#e7f8fc;

      /* ===== Layer 2 — semantic (LIGHT). Dark/dim/oled/hc layers added in Phase 3. =====
         Phase 0 keeps current effective values (incl. the second :root's muted/line/shadow)
         so the only visible change is the off-white --bg + tabular numerals. */
      --bg: var(--slate-50);            /* CHANGED: off-white so white cards gain elevation */
      --surface: #ffffff;
      --surface-2: #f9fafd;
      --surface-3: #f1f4fa;
      --text: var(--slate-800);         /* Phase 1: neutral slate body text; navy = brand only */
      --muted: var(--slate-500);
      --text-muted: var(--muted);       /* alias for new component CSS */
      --text-subtle: var(--slate-400);
      --line: rgba(12, 15, 111, 0.14);
      --border: var(--line);            /* alias */
      --border-strong: var(--slate-300);
      --primary: #0c0f6f;
      --primary-dark: #0c0f6f;
      --primary-soft: rgba(12, 15, 111, 0.08);
      --on-primary: #ffffff;
      --accent: var(--teal-500);
      --accent-strong: var(--teal-600);
      --accent-soft: var(--teal-soft);
      --ring: rgba(15, 163, 184, 0.32);
      --success: #168a47; --success-soft: #e9f8ef;
      --warning: #b66b00; --warning-soft: #fff3df;
      --danger: #c33232;  --danger-soft: #ffebeb;
      --info: #0b7896;    --info-soft: #e7f8fc;
      --shadow: 0 28px 80px rgba(12, 15, 111, 0.18);   /* current effective big shadow */
      --shadow-sm: 0 1px 2px rgba(18, 24, 41, 0.06);
      --shadow-md: 0 8px 24px rgba(18, 24, 41, 0.08);
      --shadow-lg: 0 24px 60px rgba(18, 24, 41, 0.12);

      /* ===== Layer 3 — scales ===== */
      --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-7:32px; --sp-8:40px; --sp-9:48px; --sp-10:64px;
      --radius-xs:6px; --radius-sm:10px; --radius-md:14px; --radius-lg:22px; --radius-pill:999px;
      --fs-display:2.25rem; --lh-display:1.08; --fs-h1:1.75rem; --lh-h1:1.15; --fs-h2:1.25rem; --lh-h2:1.3;
      --fs-h3:1.0625rem; --lh-h3:1.4; --fs-body:0.9375rem; --lh-body:1.55; --fs-sm:0.8125rem; --fs-xs:0.75rem;
      --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700; --fw-black:800;
      --ease-standard:cubic-bezier(.2,0,0,1); --ease-out:cubic-bezier(.22,1,.36,1); --ease-spring:cubic-bezier(.34,1.56,.64,1);
      --dur-fast:120ms; --dur:200ms; --dur-slow:320ms; --dur-slower:520ms;
      --z-base:1; --z-sticky:15; --z-sidebar:20; --z-drawer:40; --z-backdrop:45; --z-toast:60; --z-modal-backdrop:69; --z-modal:70;

      --sidebar-width: 280px;
      --sidebar-collapsed-width: 92px;
      --font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }

    /* Tabular numerals so KPIs/tables/figures align and animate cleanly (Phase 0). */
    .metric .value, table td, table th, .data-pill, .status, .rag { font-variant-numeric: tabular-nums; }

    /* ===== Phase 3 — theme layers (override the semantic tokens used by components) ===== */
    html[data-theme="dark"] {
      --bg:#0b0f1d; --surface:#131a2d; --surface-2:#1a2236; --surface-3:#232c44;
      --text:#e8ecf6; --muted:#a3adc6; --text-muted:#a3adc6; --text-subtle:#707b97;
      --line:#29324c; --border:#29324c; --border-strong:#3b466a;
      --primary:#6f77f0; --primary-soft:rgba(111,119,240,.16); --on-primary:#ffffff;
      --accent:var(--teal-400); --accent-strong:#3fc6db; --accent-soft:rgba(34,184,207,.16); --ring:rgba(111,119,240,.45);
      --success:#34c27a; --success-soft:rgba(33,180,110,.16);
      --warning:#e0a64b; --warning-soft:rgba(224,166,75,.16);
      --danger:#ef6a6a; --danger-soft:rgba(239,106,106,.16);
      --info:#3fb4d6; --info-soft:rgba(63,180,214,.16);
      --shadow:0 24px 60px rgba(0,0,0,.55); --shadow-sm:0 1px 2px rgba(0,0,0,.5); --shadow-md:0 8px 24px rgba(0,0,0,.45); --shadow-lg:0 24px 60px rgba(0,0,0,.55);
      color-scheme:dark;
    }
    html[data-theme="dim"] {
      --bg:#161c2e; --surface:#1e2640; --surface-2:#26304c; --surface-3:#303c5c;
      --text:#e7ebf5; --muted:#a7b1cb; --text-muted:#a7b1cb; --text-subtle:#76819e;
      --line:#323d5b; --border:#323d5b; --border-strong:#465278;
      --primary:#7a82f0; --primary-soft:rgba(122,130,240,.16); --on-primary:#ffffff;
      --accent:#22b8cf; --accent-strong:#3fc6db; --accent-soft:rgba(34,184,207,.16); --ring:rgba(122,130,240,.45);
      --success:#34c27a; --success-soft:rgba(33,180,110,.16);
      --warning:#e0a64b; --warning-soft:rgba(224,166,75,.16);
      --danger:#ef6a6a; --danger-soft:rgba(239,106,106,.16);
      --info:#3fb4d6; --info-soft:rgba(63,180,214,.16);
      --shadow:0 24px 60px rgba(0,0,0,.45); --shadow-sm:0 1px 2px rgba(0,0,0,.35); --shadow-md:0 8px 24px rgba(0,0,0,.35); --shadow-lg:0 24px 60px rgba(0,0,0,.45);
      color-scheme:dark;
    }
    html[data-theme="oled"] {
      --bg:#000000; --surface:#0c1119; --surface-2:#141b27; --surface-3:#1d2533;
      --text:#eef2fa; --muted:#9aa6c0; --text-muted:#9aa6c0; --text-subtle:#69748f;
      --line:#21293a; --border:#21293a; --border-strong:#33405a;
      --primary:#6f77f0; --primary-soft:rgba(111,119,240,.18); --on-primary:#ffffff;
      --accent:var(--teal-400); --accent-strong:#3fc6db; --accent-soft:rgba(34,184,207,.18); --ring:rgba(111,119,240,.5);
      --success:#34c27a; --success-soft:rgba(33,180,110,.18);
      --warning:#e0a64b; --warning-soft:rgba(224,166,75,.18);
      --danger:#ef6a6a; --danger-soft:rgba(239,106,106,.18);
      --info:#3fb4d6; --info-soft:rgba(63,180,214,.18);
      --shadow:0 24px 60px rgba(0,0,0,.7); --shadow-sm:0 1px 2px rgba(0,0,0,.7); --shadow-md:0 8px 24px rgba(0,0,0,.6); --shadow-lg:0 24px 60px rgba(0,0,0,.7);
      color-scheme:dark;
    }
    html[data-theme="hc"] {
      --bg:#ffffff; --surface:#ffffff; --surface-2:#f1f1f1; --surface-3:#e7e7e7;
      --text:#000000; --muted:#1c1c1c; --text-muted:#1c1c1c; --text-subtle:#333333;
      --line:#000000; --border:#000000; --border-strong:#000000;
      --primary:#0a0f5a; --primary-soft:#e6e7f5; --on-primary:#ffffff;
      --accent:#066f7e; --accent-strong:#044e59; --accent-soft:#d6eef1; --ring:rgba(6,111,126,.65);
      --success:#0a6b2f; --success-soft:#dff3e6;
      --warning:#7a4600; --warning-soft:#fff0db;
      --danger:#9c0000; --danger-soft:#ffe0e0;
      --info:#024e63; --info-soft:#def0f5;
      --shadow:0 0 0 2px #000; --shadow-sm:0 0 0 1px #000; --shadow-md:0 0 0 1px #000; --shadow-lg:0 0 0 2px #000;
      color-scheme:light;
    }
    html[data-theme="hc"] .card, html[data-theme="hc"] .btn { border: 2px solid #000 !important; }

    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      font-family: var(--font);
      background: var(--bg);
      color: var(--text);
    }

    button,
    input,
    select,
    textarea {
      font: inherit;
    }

    button {
      cursor: pointer;
    }

    .hidden {
      display: none !important;
    }

    .login-shell {
      min-height: 100vh;
      display: grid;
      grid-template-columns: 1.05fr 0.95fr;
      background:
        radial-gradient(circle at top left, rgba(255, 255, 255, 0.16), transparent 34%),
        linear-gradient(135deg, #0c0f6f 0%, #0c0f6f 54%, #ffffff 54%, #ffffff 100%);
      position: relative;
      overflow: hidden;
      isolation: isolate;
    }

    .login-shell::before,
    .login-shell::after {
      content: "";
      position: absolute;
      border-radius: 999px;
      pointer-events: none;
      z-index: -1;
    }

    .login-shell::before {
      width: 460px;
      height: 460px;
      left: -140px;
      top: -140px;
      background: rgba(255, 255, 255, 0.12);
    }

    .login-shell::after {
      width: 520px;
      height: 520px;
      right: -170px;
      bottom: -190px;
      background: rgba(12, 15, 111, 0.08);
    }

    .login-hero {
      padding: 64px;
      color: white;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 26px;
    }

    .brand-mark {
      width: 240px;
      max-width: 100%;
      min-height: 64px;
      border-radius: 8px;
      background: #ffffff;
      border: 1px solid rgba(255, 255, 255, 0.22);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 10px 12px;
      box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
    }

    .brand-mark img {
      display: block;
      width: 100%;
      height: auto;
    }

    .login-hero h1 {
      margin: 0;
      font-size: clamp(34px, 4vw, 58px);
      line-height: 1.02;
      letter-spacing: -1.6px;
    }

    .login-hero p {
      max-width: 640px;
      margin: 0;
      font-size: 18px;
      line-height: 1.7;
      color: rgba(255, 255, 255, 0.78);
    }

    .login-visual {
      width: min(650px, 100%);
      display: grid;
      grid-template-columns: 1.12fr 0.88fr;
      gap: 14px;
      align-items: stretch;
    }

    .portal-preview,
    .login-insight-card,
    .hero-stat,
    .login-badge {
      border: 1px solid rgba(255, 255, 255, 0.18);
      background: rgba(255, 255, 255, 0.10);
      box-shadow: 0 24px 70px rgba(0, 0, 0, 0.14);
      backdrop-filter: blur(14px);
    }

    .portal-preview {
      border-radius: 8px;
      padding: 16px;
      min-height: 250px;
    }

    .preview-top {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      align-items: center;
      margin-bottom: 16px;
    }

    .preview-title {
      display: grid;
      gap: 6px;
    }

    .preview-title strong {
      font-size: 14px;
    }

    .preview-title span,
    .preview-chip {
      color: rgba(255, 255, 255, 0.72);
      font-size: 12px;
    }

    .preview-chip {
      border: 1px solid rgba(255, 255, 255, 0.18);
      border-radius: 999px;
      padding: 7px 10px;
      white-space: nowrap;
    }

    .preview-metrics {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
      margin-bottom: 16px;
    }

    .preview-metric {
      border-radius: 8px;
      padding: 12px;
      background: rgba(255, 255, 255, 0.12);
    }

    .preview-metric strong {
      display: block;
      font-size: 22px;
      line-height: 1;
    }

    .preview-metric span {
      display: block;
      margin-top: 7px;
      color: rgba(255, 255, 255, 0.68);
      font-size: 11px;
    }

    .preview-flow {
      display: grid;
      gap: 10px;
    }

    .preview-row {
      display: grid;
      grid-template-columns: 92px 1fr 42px;
      gap: 10px;
      align-items: center;
      color: rgba(255, 255, 255, 0.78);
      font-size: 12px;
    }

    .preview-bar {
      height: 9px;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.14);
      overflow: hidden;
    }

    .preview-bar span {
      display: block;
      height: 100%;
      border-radius: inherit;
      background: #ffffff;
    }

    .login-insights {
      display: grid;
      gap: 14px;
    }

    .login-insight-card {
      border-radius: 8px;
      padding: 16px;
    }

    .login-insight-card small {
      display: block;
      color: rgba(255, 255, 255, 0.62);
      text-transform: uppercase;
      letter-spacing: 0.08em;
      font-weight: 800;
      margin-bottom: 8px;
    }

    .login-insight-card strong {
      display: block;
      font-size: 26px;
      line-height: 1;
      margin-bottom: 8px;
    }

    .login-insight-card span {
      color: rgba(255, 255, 255, 0.70);
      font-size: 13px;
      line-height: 1.45;
    }

    .hero-stats,
    .login-badges {
      display: grid;
      width: min(650px, 100%);
      gap: 12px;
    }

    .hero-stats {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .hero-stat {
      border-radius: 8px;
      padding: 14px;
    }

    .hero-stat strong {
      display: block;
      font-size: 22px;
      line-height: 1;
      margin-bottom: 7px;
    }

    .hero-stat span {
      color: rgba(255, 255, 255, 0.70);
      font-size: 12px;
      line-height: 1.4;
    }

    .login-badges {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .login-badge {
      border-radius: 8px;
      padding: 10px 12px;
      color: rgba(255, 255, 255, 0.78);
      font-size: 12px;
      font-weight: 800;
      text-align: center;
    }

    .hero-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
      max-width: 650px;
    }

    .hero-card {
      padding: 18px;
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.10);
      border: 1px solid rgba(255, 255, 255, 0.16);
      backdrop-filter: blur(10px);
    }

    .hero-card strong {
      display: block;
      margin-bottom: 6px;
    }

    .hero-card span {
      color: rgba(255, 255, 255, 0.72);
      font-size: 14px;
      line-height: 1.45;
    }

    .login-panel-wrap {
      display: grid;
      place-items: center;
      padding: 42px;
    }

    .login-panel {
      width: min(500px, 100%);
      background: rgba(255, 255, 255, 0.94);
      backdrop-filter: blur(18px);
      border: 1px solid rgba(255, 255, 255, 0.7);
      border-radius: 8px;
      padding: 34px;
      box-shadow: var(--shadow);
    }

    .login-panel-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      margin-bottom: 16px;
    }

    .login-panel-header h2 {
      margin-bottom: 0;
    }

    .secure-pill {
      border-radius: 999px;
      background: var(--primary-soft);
      color: var(--primary);
      padding: 8px 11px;
      font-size: 12px;
      font-weight: 900;
      white-space: nowrap;
    }

    .login-panel h2 {
      margin: 0 0 10px;
      font-size: 30px;
      letter-spacing: -0.8px;
    }

    .login-panel > p {
      margin: 0 0 24px;
      color: var(--muted);
      line-height: 1.55;
    }

    .field {
      margin-bottom: 16px;
    }

    .field label {
      display: block;
      margin-bottom: 7px;
      font-size: 13px;
      color: var(--muted);
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }

    .field input,
    .field select,
    .field textarea {
      width: 100%;
      border: 1px solid var(--line);
      background: var(--surface);
      color: var(--text);
      border-radius: 14px;
      padding: 13px 14px;
      outline: none;
      transition: 0.18s ease;
    }

    .field input:focus,
    .field select:focus,
    .field textarea:focus {
      border-color: var(--accent);
      box-shadow: 0 0 0 4px var(--ring);
    }

    .btn {
      position: relative;
      overflow: hidden;
      border: 0;
      border-radius: var(--radius-md);
      padding: 12px 16px;
      font-weight: 700;
      transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast), background var(--dur-fast), border-color var(--dur-fast);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      white-space: nowrap;
    }

    .btn:active { transform: scale(0.975); }
    .btn:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--ring); }

    /* Premium: gradient brand/accent buttons with a hover shine-sweep (D1/D5). */
    .btn-primary, .btn-accent { color: var(--on-primary); }
    .btn-primary { background: linear-gradient(135deg, var(--primary), var(--accent-strong)); box-shadow: var(--shadow-sm); }
    .btn-accent  { background: linear-gradient(135deg, var(--accent), var(--accent-strong)); }
    .btn-primary:hover, .btn-accent:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
    .btn-primary::after, .btn-accent::after {
      content: ""; position: absolute; inset: 0;
      background: linear-gradient(120deg, transparent 32%, rgba(255,255,255,0.28), transparent 68%);
      transform: translateX(-130%); transition: transform 0.6s var(--ease-out); pointer-events: none;
    }
    .btn-primary:hover::after, .btn-accent:hover::after { transform: translateX(130%); }

    .btn-ghost {
      color: var(--text);
      background: var(--surface-2);
      border: 1px solid var(--line);
    }

    .btn-ghost:hover {
      border-color: rgba(12, 15, 111, 0.32);
      transform: translateY(-1px);
    }

    .btn-danger {
      color: var(--danger);
      background: var(--danger-soft);
      border: 1px solid #ffd2d2;
    }

    .btn-sm {
      padding: 8px 10px;
      border-radius: 11px;
      font-size: 12px;
    }

    .login-actions {
      display: grid;
      gap: 10px;
      margin-top: 20px;
    }

    .demo-box {
      margin-top: 18px;
      padding: 14px;
      background: var(--primary-soft);
      border: 1px dashed rgba(12, 15, 111, 0.28);
      border-radius: 16px;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.65;
    }

    .demo-box code {
      color: var(--text);
      font-weight: 800;
    }

    .error {
      margin-top: 12px;
      padding: 12px 14px;
      border-radius: 14px;
      color: var(--danger);
      background: var(--danger-soft);
      border: 1px solid #ffd2d2;
      font-weight: 700;
      font-size: 14px;
    }

    .app-shell {
      min-height: 100vh;
      display: grid;
      grid-template-columns: var(--sidebar-width) 1fr;
      transition: grid-template-columns 0.22s ease;
    }

    .app-shell.sidebar-collapsed {
      grid-template-columns: var(--sidebar-collapsed-width) 1fr;
    }

    .sidebar {
      position: sticky;
      top: 0;
      height: 100vh;
      height: 100dvh;              /* match the actually-visible area on mobile */
      padding: 18px;
      background:
        radial-gradient(circle at top left, rgba(255, 255, 255, 0.16), transparent 34%),
        linear-gradient(180deg, #0c0f6f 0%, #080a55 100%);
      color: white;
      display: flex;
      flex-direction: column;
      gap: 14px;
      overflow: visible;          /* keep the collapse toggle (right:-17px) visible */
      border-right: 1px solid rgba(255, 255, 255, 0.10);
      box-shadow: 18px 0 48px rgba(12, 15, 111, 0.16);
      transition: padding 0.22s ease, width 0.22s ease;
    }

    /* Brand stays pinned at the top, footer pinned at the bottom; only the nav
       region in between flexes and scrolls — so an admin's longer menu never
       pushes Logout off-screen, at any viewport height. */
    .client-brand,
    .sidebar-footer { flex: 0 0 auto; }

    .sidebar-scroll {
      flex: 1 1 auto;
      min-height: 0;
      overflow-y: auto;
      overflow-x: hidden;
      margin: -2px -8px;
      padding: 2px 8px;
      scrollbar-width: thin;
      scrollbar-color: rgba(255, 255, 255, 0.28) transparent;
    }
    .sidebar-scroll::-webkit-scrollbar { width: 6px; }
    .sidebar-scroll::-webkit-scrollbar-thumb {
      background: rgba(255, 255, 255, 0.20);
      border-radius: 999px;
    }

    .sidebar-collapse {
      position: absolute;
      top: 22px;
      right: -17px;
      z-index: 90;
      width: 34px;
      height: 34px;
      border: 1px solid rgba(12, 15, 111, 0.18);
      border-radius: 999px;
      background: #ffffff;
      color: var(--primary);
      display: grid;
      place-items: center;
      box-shadow: 0 14px 34px rgba(12, 15, 111, 0.22);
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .sidebar-collapse:hover {
      transform: translateY(-1px);
      box-shadow: 0 18px 42px rgba(12, 15, 111, 0.28);
    }

    .sidebar-collapse svg {
      width: 18px;
      height: 18px;
      stroke-width: 2.4;
      transition: transform 0.22s ease;
    }

    .app-shell.sidebar-collapsed .sidebar-collapse svg {
      transform: rotate(180deg);
    }

    .client-brand {
      display: flex;
      align-items: flex-start;
      flex-direction: column;
      gap: 12px;
      padding: 12px;
      background: rgba(255, 255, 255, 0.10);
      border: 1px solid rgba(255, 255, 255, 0.14);
      border-radius: 12px;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10);
      transition: padding 0.22s ease;
    }

    .client-logo {
      width: 100%;
      min-height: 48px;
      border-radius: 8px;
      background: #ffffff;
      color: var(--primary);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 8px;
      font-weight: 900;
      letter-spacing: -0.6px;
      flex: 0 0 auto;
      transition: min-height 0.22s ease, padding 0.22s ease;
    }

    .client-logo img {
      display: block;
      max-width: 100%;
      height: auto;
    }

    .client-brand strong {
      display: block;
      line-height: 1.2;
    }

    .client-brand span {
      display: block;
      margin-top: 3px;
      font-size: 12px;
      color: rgba(255, 255, 255, 0.62);
    }

    .client-brand > div:last-child {
      transition: opacity 0.16s ease, transform 0.16s ease;
    }

    .nav-section-title {
      margin: 12px 10px 6px;
      color: rgba(255, 255, 255, 0.48);
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      font-weight: 900;
      transition: opacity 0.16s ease;
    }

    .nav {
      display: grid;
      gap: 7px;
    }

    .nav button {
      width: 100%;
      text-align: left;
      color: rgba(255, 255, 255, 0.82);
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid transparent;
      border-radius: 12px;
      padding: 10px 11px;
      display: flex;
      align-items: center;
      gap: 10px;
      font-weight: 750;
      position: relative;
      transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
    }

    .nav button:hover,
    .nav button.active {
      color: white;
      background: rgba(255, 255, 255, 0.13);
      border-color: rgba(255, 255, 255, 0.16);
      transform: translateX(2px);
    }

    .nav button.active::before {
      content: "";
      position: absolute;
      left: -7px;
      top: 12px;
      bottom: 12px;
      width: 3px;
      border-radius: 999px;
      background: var(--accent);
      box-shadow: 0 0 18px rgba(255, 255, 255, 0.65);
    }

    .nav .icon {
      width: 34px;
      height: 34px;
      border-radius: 11px;
      display: grid;
      place-items: center;
      background: rgba(255, 255, 255, 0.11);
      color: #ffffff;
      flex: 0 0 auto;
      transition: background 0.18s ease;
    }

    .nav .icon svg {
      width: 18px;
      height: 18px;
      stroke-width: 2;
    }

    .nav button:hover .icon,
    .nav button.active .icon {
      background: rgba(255, 255, 255, 0.20);
    }

    .nav-label {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      transition: opacity 0.16s ease, transform 0.16s ease;
    }

    .sidebar-footer {
      margin-top: auto;
      display: grid;
      gap: 10px;
    }

    .user-chip {
      padding: 14px;
      border-radius: 16px;
      background: rgba(255, 255, 255, 0.08);
      border: 1px solid rgba(255, 255, 255, 0.09);
      font-size: 13px;
      color: rgba(255, 255, 255, 0.72);
      overflow-wrap: anywhere;
      transition: padding 0.22s ease;
    }

    .user-chip strong {
      color: white;
      display: block;
      margin-bottom: 3px;
    }

    .app-shell.sidebar-collapsed .sidebar {
      padding: 18px 12px;
      align-items: stretch;
    }

    .app-shell.sidebar-collapsed .client-brand {
      padding: 10px;
      align-items: center;
    }

    .app-shell.sidebar-collapsed .client-logo {
      min-height: 42px;
      padding: 6px;
    }

    .app-shell.sidebar-collapsed .client-brand > div:last-child,
    .app-shell.sidebar-collapsed .nav-section-title,
    .app-shell.sidebar-collapsed .nav-label,
    .app-shell.sidebar-collapsed .user-chip span {
      opacity: 0;
      transform: translateX(-6px);
      pointer-events: none;
      width: 0;
      height: 0;
      overflow: hidden;
    }

    .app-shell.sidebar-collapsed .nav button {
      justify-content: center;
      padding: 10px;
      gap: 0;
    }

    .app-shell.sidebar-collapsed .nav button:hover,
    .app-shell.sidebar-collapsed .nav button.active {
      transform: translateX(0);
    }

    .app-shell.sidebar-collapsed .nav button.active::before {
      left: -5px;
    }

    .app-shell.sidebar-collapsed .sidebar-footer {
      justify-items: center;
    }

    .app-shell.sidebar-collapsed .user-chip {
      width: 48px;
      height: 48px;
      padding: 0;
      display: grid;
      place-items: center;
      border-radius: 14px;
      text-align: center;
    }

    .app-shell.sidebar-collapsed .user-chip strong {
      margin: 0;
      max-width: 38px;
      overflow: hidden;
      text-overflow: clip;
      white-space: nowrap;
      font-size: 11px;
    }

    .app-shell.sidebar-collapsed #logoutBtn {
      width: 48px;
      height: 48px;
      padding: 0;
      font-size: 0;
      border-radius: 14px;
      position: relative;
    }

    .app-shell.sidebar-collapsed #logoutBtn::before {
      content: "↗";
      font-size: 18px;
      line-height: 1;
    }

    .sidebar-footer #logoutBtn {
      color: var(--primary);
      background: #ffffff;
      border: 1px solid rgba(255, 255, 255, 0.22);
    }

    .sidebar-footer #logoutBtn:hover {
      color: var(--danger);
      background: #ffffff;
      border-color: #ffffff;
      box-shadow: 0 14px 30px rgba(0, 0, 0, 0.22);
    }

    .main {
      min-width: 0;
      padding: 24px;
    }

    .topbar {
      position: sticky;
      top: 0;
      z-index: 15;
      display: flex;
      align-items: center;
      gap: 16px;
      justify-content: space-between;
      margin: -24px -24px 24px;
      padding: 18px 24px;
      background: color-mix(in srgb, var(--surface) 92%, transparent);
      -webkit-backdrop-filter: blur(18px);
      backdrop-filter: blur(18px);
      border-bottom: 1px solid var(--line);
    }

    .page-title h1 {
      margin: 0;
      font-size: 28px;
      letter-spacing: -0.8px;
    }

    .page-title p {
      margin: 5px 0 0;
      color: var(--muted);
      font-size: 14px;
    }

    .top-actions {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
      justify-content: flex-end;
    }

    .global-search {
      position: relative;
      min-width: min(360px, 40vw);
    }

    .global-search input {
      width: 100%;
      padding: 12px 14px 12px 40px;
      border: 1px solid var(--line);
      border-radius: 14px;
      background: var(--surface);
      outline: none;
    }

    .global-search .mag {
      position: absolute;
      left: 14px;
      top: 50%;
      transform: translateY(-50%);
      color: var(--muted);
    }

    .search-results {
      position: absolute;
      right: 0;
      top: calc(100% + 8px);
      width: min(540px, 80vw);
      background: var(--surface);
      border: 1px solid var(--line);
      border-radius: 16px;
      box-shadow: var(--shadow);
      overflow: hidden;
      z-index: 30;
      max-height: 420px;
      overflow-y: auto;
    }

    .search-result {
      padding: 14px;
      border-bottom: 1px solid var(--line);
      display: grid;
      gap: 5px;
      cursor: pointer;
    }

    .search-result:hover {
      background: var(--surface-2);
    }

    .search-result:last-child {
      border-bottom: 0;
    }

    .search-result strong {
      font-size: 14px;
    }

    .search-result span {
      color: var(--muted);
      font-size: 12px;
    }

    .page {
      display: none;
    }

    .page.active {
      display: block;
      animation: fadeIn 0.22s ease-out;
    }

    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(6px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .grid {
      display: grid;
      gap: 18px;
    }

    .grid.cards-4 {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .grid.cards-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .grid.cols-2 {
      grid-template-columns: 1.15fr 0.85fr;
    }

    .grid.cols-3 {
      grid-template-columns: 1fr 1fr 1fr;
    }

    #dashboardMetrics.grid.cards-4 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dashboard-chart-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
      gap: 18px;
      align-items: stretch;
      margin-top: 18px;
    }

    .dashboard-chart-grid .card {
      min-width: 0;
    }

    .dashboard-updates-row {
      margin-top: 18px;
    }

    .dashboard-updates-row .card {
      width: 100%;
    }

    .card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-sm);
    }

    .card.pad {
      padding: 20px;
    }

    .card-header {
      padding: 18px 20px;
      border-bottom: 1px solid var(--line);
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
      flex-wrap: wrap;
    }

    .card-header h2,
    .card-header h3 {
      margin: 0;
      font-size: 18px;
      letter-spacing: -0.3px;
    }

    .card-header p {
      margin: 4px 0 0;
      color: var(--muted);
      font-size: 13px;
    }

    .metric {
      padding: 18px;
      position: relative;
      overflow: hidden;
    }

    .metric::after {
      content: "";
      width: 110px;
      height: 110px;
      border-radius: 999px;
      background: var(--accent-soft);
      position: absolute;
      right: -42px;
      top: -42px;
    }

    .metric .label {
      color: var(--muted);
      font-size: 13px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      position: relative;
      z-index: 1;
    }

    .metric .value {
      margin-top: 10px;
      font-size: 34px;
      line-height: 1;
      font-weight: 900;
      letter-spacing: -1.2px;
      position: relative;
      z-index: 1;
    }

    .metric .hint {
      margin-top: 8px;
      color: var(--muted);
      font-size: 13px;
      position: relative;
      z-index: 1;
    }

    .toolbar {
      display: flex;
      align-items: end;
      flex-wrap: wrap;
      gap: 12px;
      padding: 18px 20px;
      border-bottom: 1px solid var(--line);
    }

    .toolbar .field {
      margin: 0;
      min-width: 190px;
      flex: 1;
    }

    .toolbar .field.small {
      min-width: 150px;
      flex: 0 1 170px;
    }

    .toolbar-actions {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }

    .table-wrap {
      overflow-x: auto;
    }

    table {
      width: 100%;
      border-collapse: collapse;
      min-width: 900px;
    }

    th,
    td {
      text-align: left;
      padding: 14px 16px;
      border-bottom: 1px solid var(--line);
      vertical-align: middle;
      font-size: 14px;
    }

    th {
      color: var(--muted);
      background: var(--primary-soft);
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      font-weight: 900;
      position: sticky;
      top: 0;
      z-index: 1;
    }

    tr:hover td {
      background: var(--primary-soft);
    }

    .status,
    .rag {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 9px;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 900;
      border: 1px solid transparent;
      white-space: nowrap;
    }

    .status::before,
    .rag::before {
      content: "";
      width: 8px;
      height: 8px;
      border-radius: 999px;
      background: currentColor;
    }

    .status.in-progress {
      color: var(--info);
      background: var(--info-soft);
      border-color: #bcecf6;
    }

    .status.completed,
    .status.closed {
      color: var(--success);
      background: var(--success-soft);
      border-color: #c1ebd0;
    }

    .status.on-hold,
    .status.overdue {
      color: var(--warning);
      background: var(--warning-soft);
      border-color: #ffe0a8;
    }

    .status.not-started {
      color: var(--muted);
      background: var(--primary-soft);
      border-color: var(--line);
    }

    .status.open {
      color: var(--primary);
      background: var(--primary-soft);
      border-color: rgba(12, 15, 111, 0.18);
    }

    .rag.green {
      color: var(--success);
      background: var(--success-soft);
      border-color: #c1ebd0;
    }

    .rag.amber {
      color: var(--warning);
      background: var(--warning-soft);
      border-color: #ffe0a8;
    }

    .rag.red {
      color: var(--danger);
      background: var(--danger-soft);
      border-color: #ffd2d2;
    }

    .progress-cell {
      min-width: 170px;
    }

    .progress-line {
      width: 100%;
      height: 10px;
      border-radius: 999px;
      background: var(--primary-soft);
      overflow: hidden;
      margin-top: 6px;
    }

    .progress-line span {
      display: block;
      height: 100%;
      border-radius: inherit;
      background: var(--primary);
    }

    .chart-list {
      display: grid;
      gap: 14px;
      padding: 20px;
    }

    .bar-row {
      display: grid;
      grid-template-columns: 140px 1fr 44px;
      gap: 12px;
      align-items: center;
      font-size: 13px;
    }

    .bar-track {
      height: 12px;
      background: var(--primary-soft);
      border-radius: 999px;
      overflow: hidden;
    }

    .bar-fill {
      height: 100%;
      background: var(--primary);
      border-radius: 999px;
    }

    .donut-wrap {
      display: grid;
      grid-template-columns: 190px 1fr;
      align-items: center;
      gap: 18px;
      padding: 20px;
    }

    .donut {
      width: 170px;
      height: 170px;
      border-radius: 50%;
      /* Neutral ring by default; demo.js paints real segments when data exists. */
      background: conic-gradient(var(--line) 0deg 360deg);
      position: relative;
      box-shadow: inset 0 0 0 1px rgba(0,0,0,0.04);
    }

    .donut::after {
      content: "";
      position: absolute;
      inset: 30px;
      background: var(--surface);
      border-radius: 50%;
      box-shadow: inset 0 0 0 1px var(--line);
    }

    .legend {
      display: grid;
      gap: 10px;
    }

    .legend-item {
      display: flex;
      align-items: center;
      gap: 10px;
      color: var(--muted);
      font-size: 13px;
    }

    .legend-dot {
      width: 11px;
      height: 11px;
      border-radius: 999px;
      background: var(--primary);
    }

    .tabs {
      display: flex;
      gap: 8px;
      padding: 16px 20px 0;
      border-bottom: 1px solid var(--line);
    }

    .tab {
      border: 0;
      background: transparent;
      padding: 12px 14px;
      border-radius: 12px 12px 0 0;
      color: var(--muted);
      font-weight: 900;
    }

    .tab.active {
      background: var(--primary-soft);
      color: var(--primary-dark);
    }

    .drawer-backdrop {
      position: fixed;
      inset: 0;
      background: rgba(15, 23, 42, 0.42);
      z-index: 100;
      opacity: 0;
      pointer-events: none;
      transition: 0.2s ease;
    }

    .drawer-backdrop.open {
      opacity: 1;
      pointer-events: auto;
    }

    .drawer {
      position: fixed;
      top: 0;
      right: 0;
      width: min(720px, 94vw);
      height: 100vh;
      height: 100dvh;
      background: var(--surface);
      z-index: 101;
      transform: translateX(105%);
      transition: 0.24s ease;
      box-shadow: -20px 0 60px rgba(15, 23, 42, 0.20);
      overflow-y: auto;
      display: flex;
      flex-direction: column;
    }

    .drawer.open {
      transform: translateX(0);
    }

    .drawer-header {
      position: sticky;
      top: 0;
      background: rgba(255, 255, 255, 0.92);
      backdrop-filter: blur(16px);
      border-bottom: 1px solid var(--line);
      padding: 20px;
      z-index: 1;
      display: flex;
      align-items: start;
      justify-content: space-between;
      gap: 12px;
    }

    .drawer-header h2 {
      margin: 0;
      font-size: 22px;
      letter-spacing: -0.5px;
    }

    .drawer-header p {
      margin: 5px 0 0;
      color: var(--muted);
      font-size: 13px;
    }

    .drawer-body {
      padding: 20px;
      display: grid;
      gap: 18px;
    }

    .detail-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
    }

    .detail-item {
      background: var(--surface-2);
      border: 1px solid var(--line);
      border-radius: 14px;
      padding: 13px;
    }

    .detail-item span {
      display: block;
      color: var(--muted);
      font-size: 12px;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      margin-bottom: 5px;
    }

    .detail-item strong {
      display: block;
      font-size: 14px;
    }

    .timeline {
      position: relative;
      display: grid;
      gap: 12px;
    }

    .step {
      display: grid;
      grid-template-columns: 34px 1fr;
      gap: 12px;
      position: relative;
    }

    .step:not(:last-child)::before {
      content: "";
      position: absolute;
      left: 16px;
      top: 34px;
      bottom: -14px;
      width: 2px;
      background: var(--line);
    }

    .step-dot {
      width: 34px;
      height: 34px;
      border-radius: 999px;
      display: grid;
      place-items: center;
      font-weight: 900;
      color: white;
      background: var(--muted);
      z-index: 1;
    }

    .step-dot.done {
      background: var(--success);
    }

    .step-dot.active {
      background: var(--primary);
    }

    .step-card {
      border: 1px solid var(--line);
      border-radius: 16px;
      padding: 14px;
      background: var(--surface);
    }

    .step-card h4 {
      margin: 0 0 8px;
    }

    .step-meta {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      color: var(--muted);
      font-size: 12px;
    }

    .note {
      border-left: 4px solid var(--primary);
      background: var(--primary-soft);
      padding: 14px;
      border-radius: 14px;
      color: var(--text);
      line-height: 1.55;
    }

    .callout {
      padding: 16px;
      border-radius: 18px;
      border: 1px solid var(--line);
      background: var(--surface-2);
      line-height: 1.6;
      color: var(--muted);
    }

    .kpi-strip {
      display: flex;
      align-items: center;
      gap: 12px;
      flex-wrap: wrap;
    }

    .mini-kpi {
      padding: 10px 12px;
      background: var(--surface-2);
      border: 1px solid var(--line);
      border-radius: 13px;
      min-width: 120px;
    }

    .mini-kpi strong {
      display: block;
      font-size: 18px;
    }

    .mini-kpi span {
      display: block;
      color: var(--muted);
      font-size: 12px;
    }

    .empty {
      padding: 24px;
      text-align: center;
      color: var(--muted);
    }

    .mobile-menu {
      display: none;
    }

    @media (max-width: 1100px) {
      .grid.cards-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .grid.cols-2 {
        grid-template-columns: 1fr;
      }

      #dashboardMetrics.grid.cards-4,
      .dashboard-chart-grid {
        grid-template-columns: 1fr;
      }

      .topbar {
        align-items: flex-start;
        flex-direction: column;
      }

      .global-search {
        width: 100%;
      }
    }

    @media (max-width: 820px) {
      .login-shell {
        grid-template-columns: 1fr;
        background: linear-gradient(160deg, #0c0f6f, #0c0f6f 68%, #ffffff 68%);
      }

      .login-hero {
        padding: 36px 24px 10px;
      }

      .login-panel-wrap {
        padding: 24px;
      }

      .hero-grid {
        grid-template-columns: 1fr;
      }

      .login-visual,
      .hero-stats,
      .login-badges {
        grid-template-columns: 1fr;
      }

      .portal-preview {
        min-height: auto;
      }

      .preview-metrics {
        grid-template-columns: 1fr;
      }

      .app-shell {
        grid-template-columns: 1fr;
      }

      .app-shell.sidebar-collapsed {
        grid-template-columns: 1fr;
      }

      .sidebar {
        position: fixed;
        z-index: 80;
        transform: translateX(-105%);
        transition: 0.22s ease;
        width: min(320px, 92vw);
        overflow-y: auto;
      }

      .sidebar-collapse {
        display: none;
      }

      .sidebar.open {
        transform: translateX(0);
      }

      .mobile-menu {
        display: inline-flex;
      }

      .main {
        padding: 18px;
      }

      .topbar {
        margin: -18px -18px 18px;
        padding: 14px 18px;
      }

      .grid.cards-4,
      .grid.cards-3,
      .grid.cols-3 {
        grid-template-columns: 1fr;
      }

      .donut-wrap {
        grid-template-columns: 1fr;
      }

      .detail-grid {
        grid-template-columns: 1fr;
      }
    }

    @media print {
      body {
        background: white;
      }

      .sidebar,
      .topbar,
      .toolbar,
      .btn,
      .drawer-backdrop,
      .drawer {
        display: none !important;
      }

      .app-shell {
        display: block;
      }

      .main {
        padding: 0;
      }

      .page {
        display: block !important;
        page-break-after: always;
      }

      .card {
        box-shadow: none;
        break-inside: avoid;
      }
    }

  /* (Phase 1: second :root removed — the primary token block above is the single
     source of truth, so the neutral text ramp + theming apply cleanly.) */

  * {
    box-sizing: border-box;
  }

  body {
    margin: 0;
    font-family: var(--font);
    color: var(--text);
    background: var(--bg);
  }

  button,
  input {
    font: inherit;
  }

  button {
    cursor: pointer;
  }

  .hidden {
    display: none !important;
  }

  .login-shell {
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    display: grid;
    grid-template-columns: 1.08fr 0.92fr;
    position: relative;
    overflow: hidden;
    background:
      radial-gradient(circle at 12% 12%, rgba(255, 255, 255, 0.22), transparent 28%),
      radial-gradient(circle at 92% 88%, rgba(12, 15, 111, 0.12), transparent 30%),
      linear-gradient(135deg, #0c0f6f 0%, #0c0f6f 56%, #f7f8ff 56%, #ffffff 100%);
  }

  .login-shell::before,
  .login-shell::after {
    content: "";
    position: absolute;
    border-radius: 999px;
    pointer-events: none;
  }

  .login-shell::before {
    width: 460px;
    height: 460px;
    left: -180px;
    top: -160px;
    background: rgba(255, 255, 255, 0.12);
  }

  .login-shell::after {
    width: 560px;
    height: 560px;
    right: -220px;
    bottom: -230px;
    background: rgba(12, 15, 111, 0.09);
  }

  .login-effects {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
  }

  .login-effects::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px);
    background-size: 54px 54px;
    mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.75), transparent 68%);
    animation: gridDrift 18s linear infinite;
  }

  .effect-orb {
    position: absolute;
    width: var(--size);
    height: var(--size);
    left: var(--x);
    top: var(--y);
    border-radius: 999px;
    background:
      radial-gradient(circle at 35% 35%, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.14) 38%, transparent 70%);
    filter: blur(0.2px);
    opacity: 0.42;
    animation: orbFloat var(--speed) ease-in-out infinite alternate;
  }

  .effect-line {
    position: absolute;
    width: 260px;
    height: 1px;
    left: var(--x);
    top: var(--y);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.52), transparent);
    transform: rotate(var(--rotate));
    opacity: 0.42;
    animation: linePulse var(--speed) ease-in-out infinite;
  }

  .login-hero {
    position: relative;
    z-index: 1;
    min-height: 0;
    padding: clamp(28px, 4vw, 56px);
    color: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(14px, 2.2vh, 24px);
  }

  .brand-mark {
    width: clamp(190px, 18vw, 250px);
    min-height: 58px;
    padding: 10px 14px;
    border-radius: 18px;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 22px 55px rgba(0, 0, 0, 0.24);
    animation: panelIn 0.65s ease both;
  }

  .brand-mark img {
    display: block;
    width: 100%;
    height: auto;
  }

  .hero-copy {
    max-width: 660px;
  }

  .hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.84);
    font-size: 13px;
    font-weight: 800;
    animation: panelIn 0.68s ease both 0.08s;
  }

  .hero-eyebrow::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #ffffff;
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.55);
    animation: livePulse 1.8s ease-out infinite;
  }

    .login-hero h1 {
      margin: 0;
      font-size: clamp(32px, 4.4vw, 60px);
      line-height: 0.98;
      letter-spacing: -2px;
      animation: panelIn 0.72s ease both 0.14s;
    }

  .typewriter-copy {
    min-height: 3.4em;
  }

  .typewriter-copy::after {
    content: "";
    display: inline-block;
    width: 0.08em;
    height: 0.82em;
    margin-left: 0.08em;
    border-radius: 999px;
    background: currentColor;
    transform: translateY(0.08em);
    animation: cursorBlink 0.8s steps(2, start) infinite;
  }

  .login-hero p {
    max-width: 620px;
    margin: 14px 0 0;
    color: rgba(255, 255, 255, 0.78);
    font-size: 18px;
    line-height: 1.7;
    animation: panelIn 0.72s ease both 0.2s;
  }

  .hero-dashboard {
    width: min(680px, 100%);
    display: grid;
    grid-template-columns: 1.25fr 0.75fr;
    gap: 16px;
    perspective: 1100px;
    animation: panelIn 0.74s ease both 0.28s;
  }

  .glass-card {
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.11);
    backdrop-filter: blur(18px);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.18);
    border-radius: 24px;
    position: relative;
    overflow: hidden;
    transition: transform 0.26s ease, border-color 0.26s ease, box-shadow 0.26s ease;
  }

  .glass-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 12%, rgba(255, 255, 255, 0.18) 34%, transparent 58%);
    transform: translateX(-120%);
    animation: cardSheen 6s ease-in-out infinite;
  }

  .glass-card:hover {
    transform: translateY(-4px);
    border-color: rgba(255, 255, 255, 0.34);
    box-shadow: 0 32px 90px rgba(0, 0, 0, 0.24);
  }

  .glass-card > * {
    position: relative;
    z-index: 1;
  }

  .portal-preview {
    padding: 16px;
  }

  .preview-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
  }

  .preview-head strong {
    display: block;
    font-size: 15px;
  }

  .preview-head span {
    display: block;
    margin-top: 4px;
    color: rgba(255, 255, 255, 0.68);
    font-size: 12px;
  }

  .preview-chip {
    padding: 7px 11px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.82);
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
  }

  .preview-metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 14px;
  }

  .preview-metric {
    padding: 12px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.12);
    transition: transform 0.22s ease, background 0.22s ease;
  }

  .preview-metric:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.18);
  }

  .preview-metric strong {
    display: block;
    font-size: 26px;
    line-height: 1;
  }

  .preview-metric span {
    display: block;
    margin-top: 8px;
    color: rgba(255, 255, 255, 0.68);
    font-size: 12px;
  }

  .preview-flow {
    display: grid;
    gap: 10px;
  }

  .preview-row {
    display: grid;
    grid-template-columns: 110px 1fr 42px;
    gap: 12px;
    align-items: center;
    color: rgba(255, 255, 255, 0.78);
    font-size: 12px;
  }

  .preview-bar {
    height: 10px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.16);
  }

  .preview-bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: #ffffff;
    transform-origin: left;
    animation: progressGrow 1.2s cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  .hero-side {
    display: grid;
    gap: 16px;
  }

  .hero-side-card {
    padding: 16px;
    background: rgba(12, 15, 111, 0.82);
    border-color: rgba(255, 255, 255, 0.26);
  }

  .hero-side-card small {
    display: block;
    margin-bottom: 10px;
    color: rgba(255, 255, 255, 0.76);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 900;
  }

  .hero-side-card strong {
    display: block;
    margin-bottom: 8px;
    font-size: 24px;
    line-height: 1;
    color: #ffffff;
  }

  .hero-side-card span {
    color: rgba(255, 255, 255, 0.92);
    font-size: 13px;
    line-height: 1.5;
  }

  .hero-orbit {
    width: min(440px, 100%);
    height: clamp(104px, 17vh, 138px);
    position: relative;
    margin-top: -4px;
    isolation: isolate;
    animation: panelIn 0.74s ease both 0.28s;
  }

  .hero-orbit::before {
    content: "";
    position: absolute;
    left: 5%;
    right: 5%;
    top: 50%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
    opacity: 0.58;
  }

  .orbit-ring {
    position: absolute;
    inset: 8px 34px;
    --start-rotate: -8deg;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 999px;
    transform: rotate(var(--start-rotate));
    animation: orbitDrift 10s linear infinite;
  }

  .orbit-ring:nth-child(2) {
    inset: 18px 66px;
    --start-rotate: 12deg;
    border-color: rgba(255, 255, 255, 0.18);
    animation-duration: 13s;
    animation-direction: reverse;
  }

  .orbit-core {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 78px;
    height: 78px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: #ffffff;
    color: var(--primary);
    box-shadow:
      0 22px 48px rgba(0, 0, 0, 0.24),
      0 0 0 12px rgba(255, 255, 255, 0.12);
    transform: translate(-50%, -50%);
  }

  .orbit-core span {
    font-size: 22px;
    font-weight: 950;
    letter-spacing: -0.04em;
  }

  .orbit-icon {
    position: absolute;
    width: 50px;
    height: 50px;
    display: grid;
    place-items: center;
    border-radius: 18px;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.28);
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.20);
    backdrop-filter: blur(14px);
    animation: iconFloat 4.8s ease-in-out infinite;
  }

  .orbit-icon svg {
    width: 24px;
    height: 24px;
    stroke-width: 2.2;
  }

  .orbit-icon:nth-of-type(1) {
    left: 2%;
    top: 14%;
  }

  .orbit-icon:nth-of-type(2) {
    right: 5%;
    top: 8%;
    animation-delay: 0.35s;
  }

  .orbit-icon:nth-of-type(3) {
    left: 18%;
    bottom: 2%;
    animation-delay: 0.7s;
  }

  .orbit-icon:nth-of-type(4) {
    right: 20%;
    bottom: 4%;
    animation-delay: 1.05s;
  }

  .login-panel-wrap {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    min-height: 0;
    padding: clamp(18px, 3vw, 42px);
  }

  .login-panel {
    width: min(510px, 100%);
    max-height: calc(100vh - clamp(36px, 6vw, 84px));
    padding: clamp(22px, 3vw, 32px);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(12, 15, 111, 0.10);
    box-shadow: var(--shadow);
    backdrop-filter: blur(20px);
    position: relative;
    overflow-x: hidden;
    overflow-y: auto;          /* scroll the form on short screens instead of clipping it */
    animation: panelIn 0.72s ease both 0.2s;
  }

  .login-panel::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 5px;
    background: linear-gradient(90deg, transparent, var(--primary), transparent);
    animation: panelScan 3.4s ease-in-out infinite;
  }

  .login-panel::after {
    content: "";
    position: absolute;
    width: 190px;
    height: 190px;
    right: -90px;
    top: -90px;
    border-radius: 999px;
    background: rgba(12, 15, 111, 0.08);
  }

  .login-panel > * {
    position: relative;
    z-index: 1;
  }

  .login-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 10px;
  }

  .login-panel h2 {
    margin: 0;
    font-size: clamp(26px, 2.8vw, 32px);
    line-height: 1.1;
    letter-spacing: -0.9px;
  }

  .secure-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 12px;
    border-radius: 999px;
    background: var(--primary-soft);
    color: var(--primary);
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
  }

  .secure-pill::before {
    content: "●";
    font-size: 10px;
    animation: dotBlink 1.35s ease-in-out infinite;
  }

  .login-panel > p {
    margin: 0 0 18px;
    color: var(--muted);
    line-height: 1.6;
  }

  .field {
    margin-bottom: 12px;
  }

  .field label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    color: var(--muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 900;
  }

  .input-wrap {
    position: relative;
  }

  .input-icon {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(12, 15, 111, 0.45);
    font-size: 15px;
    pointer-events: none;
  }

  .field input {
    width: 100%;
    height: 48px;
    padding: 0 16px 0 44px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--surface);
    color: var(--text);
    outline: none;
    transition: 0.18s ease;
  }

  .field input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(12, 15, 111, 0.11);
    transform: translateY(-1px);
  }

  .password-action {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    border: 0;
    background: var(--primary-soft);
    color: var(--primary);
    border-radius: 10px;
    padding: 7px 9px;
    font-size: 12px;
    font-weight: 900;
  }

  .login-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    margin: 4px 0 16px;
    color: var(--muted);
    font-size: 13px;
  }

  .remember {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    user-select: none;
  }

  .remember input {
    width: 16px;
    height: 16px;
    accent-color: var(--primary);
  }

  .login-actions {
    display: grid;
    gap: 11px;
  }

  .btn {
    border: 0;
    border-radius: 16px;
    padding: 13px 16px;
    font-weight: 900;
    transition: 0.18s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    white-space: nowrap;
  }

  .btn-primary {
    color: #ffffff;
    background: var(--primary);
    box-shadow: 0 16px 34px rgba(12, 15, 111, 0.28);
  }

  .btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 20px 42px rgba(12, 15, 111, 0.34);
  }

  .btn-ghost {
    color: var(--text);
    background: var(--surface-2);
    border: 1px solid var(--line);
  }

  .btn-ghost:hover {
    transform: translateY(-1px);
    border-color: rgba(12, 15, 111, 0.32);
    background: var(--primary-soft);
  }

  .error {
    margin-top: 14px;
    padding: 12px 14px;
    border-radius: 14px;
    color: var(--danger);
    background: var(--danger-soft);
    border: 1px solid #ffd2d2;
    font-weight: 800;
    font-size: 14px;
  }

  .demo-box {
    margin-top: 14px;
    padding: 12px;
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(12, 15, 111, 0.07), rgba(12, 15, 111, 0.035));
    border: 1px dashed rgba(12, 15, 111, 0.24);
  }

  .demo-box strong {
    display: block;
    margin-bottom: 8px;
  }

  .demo-grid {
    display: grid;
    gap: 6px;
  }

  .demo-user {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 8px 10px;
    border-radius: 12px;
    background: #ffffff;
    border: 1px solid rgba(12, 15, 111, 0.10);
    color: var(--muted);
    font-size: 12px;
    line-height: 1.45;
  }

  .demo-user code {
    color: var(--text);
    font-weight: 900;
  }

  .demo-role {
    padding: 6px 8px;
    border-radius: 999px;
    background: var(--primary-soft);
    color: var(--primary);
    font-size: 11px;
    font-weight: 900;
    white-space: nowrap;
  }

  .login-trust-icons {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 14px;
  }

  .login-trust-icons span {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: rgba(12, 15, 111, 0.08);
    border: 1px solid rgba(12, 15, 111, 0.12);
    color: var(--primary);
    box-shadow: 0 10px 22px rgba(12, 15, 111, 0.10);
    transition: transform 0.22s ease, background 0.22s ease, box-shadow 0.22s ease;
  }

  .login-trust-icons span:hover {
    transform: translateY(-3px);
    background: rgba(12, 15, 111, 0.12);
    box-shadow: 0 14px 28px rgba(12, 15, 111, 0.14);
  }

  .login-trust-icons svg {
    width: 18px;
    height: 18px;
    stroke-width: 2.25;
  }

  @keyframes panelIn {
    from {
      opacity: 0;
      transform: translateY(18px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes gridDrift {
    from {
      background-position: 0 0, 0 0;
    }
    to {
      background-position: 54px 54px, 54px 54px;
    }
  }

  @keyframes orbFloat {
    from {
      transform: translate3d(0, 0, 0) scale(1);
    }
    to {
      transform: translate3d(24px, -28px, 0) scale(1.08);
    }
  }

  @keyframes linePulse {
    0%, 100% {
      opacity: 0.16;
      transform: rotate(var(--rotate)) translateX(-20px);
    }
    50% {
      opacity: 0.56;
      transform: rotate(var(--rotate)) translateX(20px);
    }
  }

  @keyframes livePulse {
    0% {
      box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.52);
    }
    100% {
      box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);
    }
  }

  @keyframes cardSheen {
    0%, 35% {
      transform: translateX(-120%);
    }
    55%, 100% {
      transform: translateX(120%);
    }
  }

  @keyframes progressGrow {
    from {
      transform: scaleX(0.1);
    }
    to {
      transform: scaleX(1);
    }
  }

  @keyframes orbitDrift {
    from {
      transform: rotate(var(--start-rotate));
    }
    to {
      transform: rotate(calc(var(--start-rotate) + 360deg));
    }
  }

  @keyframes iconFloat {
    0%, 100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-7px);
    }
  }

  @keyframes panelScan {
    0%, 100% {
      transform: translateX(-72%);
      opacity: 0.3;
    }
    50% {
      transform: translateX(72%);
      opacity: 0.9;
    }
  }

  @keyframes dotBlink {
    0%, 100% {
      opacity: 0.35;
    }
    50% {
      opacity: 1;
    }
  }

  @keyframes cursorBlink {
    0%, 45% {
      opacity: 1;
    }
    46%, 100% {
      opacity: 0;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.001ms !important;
      animation-iteration-count: 1 !important;
      scroll-behavior: auto !important;
    }
  }

  @media (max-width: 980px) {
    .login-shell {
      grid-template-columns: minmax(300px, 0.92fr) minmax(320px, 1fr);
      background:
        radial-gradient(circle at top left, rgba(255, 255, 255, 0.20), transparent 30%),
        linear-gradient(90deg, #0c0f6f 0%, #0c0f6f 49%, #ffffff 49%, #ffffff 100%);
    }

    .login-hero {
      padding: 22px;
      gap: 12px;
    }

    .brand-mark {
      width: 185px;
      min-height: 50px;
      border-radius: 14px;
    }

    .hero-eyebrow {
      margin-bottom: 8px;
      padding: 7px 10px;
      font-size: 11px;
    }

    .login-hero h1 {
      font-size: clamp(27px, 4.4vw, 38px);
      letter-spacing: -1.2px;
    }

    .login-hero p {
      margin-top: 8px;
      min-height: 4.35em;
      font-size: 13px;
      line-height: 1.45;
    }

    .hero-dashboard {
      grid-template-columns: 1fr;
      gap: 10px;
      width: 100%;
    }

    .hero-side {
      display: none;
    }

    .portal-preview {
      padding: 12px;
      border-radius: 18px;
    }

    .preview-head {
      margin-bottom: 10px;
    }

    .preview-head strong {
      font-size: 13px;
    }

    .preview-head span,
    .preview-chip {
      font-size: 10px;
    }

    .preview-metrics {
      gap: 6px;
      margin-bottom: 10px;
    }

    .preview-metric {
      padding: 8px;
      border-radius: 12px;
    }

    .preview-metric strong {
      font-size: 18px;
    }

    .preview-metric span {
      margin-top: 5px;
      font-size: 10px;
    }

    .preview-flow {
      gap: 6px;
    }

    .preview-row {
      grid-template-columns: 84px 1fr 34px;
      gap: 8px;
      font-size: 10px;
    }

    .preview-bar {
      height: 7px;
    }

    .hero-orbit {
      width: min(340px, 100%);
      height: 96px;
    }

    .orbit-ring {
      inset: 6px 28px;
    }

    .orbit-ring:nth-child(2) {
      inset: 16px 58px;
    }

    .orbit-core {
      width: 64px;
      height: 64px;
    }

    .orbit-core span {
      font-size: 18px;
    }

    .orbit-icon {
      width: 40px;
      height: 40px;
      border-radius: 14px;
    }

    .orbit-icon svg {
      width: 20px;
      height: 20px;
    }

    .login-panel-wrap {
      padding: 16px;
    }

    .login-panel {
      padding: 18px;
      border-radius: 20px;
      max-height: calc(100vh - 32px);
    }

    .login-panel-header {
      margin-bottom: 6px;
    }

    .login-panel h2 {
      font-size: 24px;
    }

    .secure-pill {
      padding: 7px 9px;
      font-size: 10px;
    }

    .login-panel > p {
      margin-bottom: 12px;
      font-size: 13px;
      line-height: 1.45;
    }

    .field {
      margin-bottom: 9px;
    }

    .field label {
      margin-bottom: 5px;
      font-size: 10px;
    }

    .field input {
      height: 42px;
      border-radius: 13px;
    }

    .login-row {
      margin: 3px 0 11px;
      font-size: 11px;
    }

    .btn {
      padding: 10px 13px;
      border-radius: 13px;
      font-size: 13px;
    }

    .demo-box {
      margin-top: 10px;
      padding: 10px;
      border-radius: 13px;
    }

    .demo-box strong {
      margin-bottom: 6px;
      font-size: 13px;
    }

    .demo-user {
      padding: 6px 8px;
      border-radius: 10px;
      font-size: 10px;
    }

    .demo-role {
      padding: 5px 7px;
      font-size: 9px;
    }

    .login-trust-icons {
      display: none;
    }
  }

  @media (max-width: 640px) {
    .login-shell {
      grid-template-columns: 1fr;
      grid-template-rows: auto 1fr;
      background:
        radial-gradient(circle at top left, rgba(255, 255, 255, 0.20), transparent 30%),
        linear-gradient(180deg, #0c0f6f 0%, #0c0f6f 28%, #ffffff 28%, #ffffff 100%);
    }

    .login-hero {
      padding: 14px 18px 8px;
      gap: 8px;
    }

    .brand-mark {
      width: 168px;
      min-height: 44px;
      padding: 8px 10px;
    }

    .login-hero h1 {
      font-size: 24px;
      letter-spacing: -0.8px;
    }

    .login-hero p {
      display: none;
    }

    .hero-eyebrow,
    .hero-dashboard,
    .hero-orbit {
      display: none;
    }

    .login-panel-wrap {
      align-items: start;
      padding: 10px 18px 16px;
    }

    .login-panel {
      padding: 16px;
      border-radius: 18px;
      max-height: calc(100vh - 112px);
    }

    .login-panel-header {
      align-items: center;
      flex-direction: row;
    }

    .login-panel > p {
      font-size: 12px;
    }

    .demo-box {
      display: none;
    }

    .login-row {
      align-items: center;
      flex-direction: row;
    }
  }

  button.mobile-menu {
    display: none;
  }

  @media (max-width: 820px) {
    button.mobile-menu {
      display: inline-flex;
    }
  }

/* ============================================================
   PORTAL v2 ADDITIONS — auth, quality visual, users, history
   (uses the template's design tokens)
   ============================================================ */

.user-chip { display: flex; align-items: center; gap: 10px; }
.user-chip .user-texts { display: flex; flex-direction: column; min-width: 0; }
.user-chip .user-texts strong,
.user-chip .user-texts span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-avatar {
  width: 38px; height: 38px; border-radius: 50%;
  object-fit: cover; flex: 0 0 auto;
  border: 2px solid var(--primary-soft);
  background: var(--primary-soft);
}
.user-avatar-fallback {
  width: 38px; height: 38px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--primary-soft); color: var(--primary);
  font-weight: 700; font-size: 14px; flex: 0 0 auto;
}
.sidebar-collapsed .user-avatar,
.sidebar-collapsed .user-avatar-fallback { display: none; }

.data-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 999px;
  background: var(--success-soft); color: var(--success);
  font-size: 12px; font-weight: 600; white-space: nowrap;
}
.data-pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); }

.sample-pill {
  display: inline-flex; align-items: center;
  padding: 4px 10px; border-radius: 999px;
  background: var(--warning-soft); color: var(--warning);
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; white-space: nowrap;
}

.chart-canvas-wrap { position: relative; height: clamp(280px, 48vh, 430px); padding: 8px 22px 16px; }
.chart-canvas-wrap canvas { width: 100% !important; }
.chart-canvas-wrap .empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
@media (max-width: 820px) { .chart-canvas-wrap { height: 340px; padding: 6px 10px 12px; } }

.invite-link-box {
  display: flex; gap: 10px; align-items: center;
  margin-top: 14px; padding: 12px 14px;
  border: 1px dashed var(--line); border-radius: var(--radius-sm);
  background: var(--primary-soft);
}
.invite-link-box code {
  flex: 1; font-size: 12px; word-break: break-all;
  color: var(--primary); font-family: ui-monospace, Consolas, monospace;
}

/* Password-reset mode picker (in the modal): full-width option buttons */
.reset-mode-grid { display: grid; gap: 10px; margin-top: 6px; }
.reset-mode {
  display: block; width: 100%; text-align: left; font: inherit; cursor: pointer;
  padding: 12px 14px; border: 1px solid var(--line);
  border-radius: var(--radius-sm); background: var(--surface-2, var(--bg));
  transition: border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast);
}
.reset-mode:hover { border-color: var(--primary); transform: translateY(-1px); }
.reset-mode:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); border-color: var(--primary); }
.reset-mode strong { display: block; font-size: 13px; margin-bottom: 3px; color: var(--text); }
.reset-mode span { display: block; font-size: 12px; color: var(--text-muted, var(--muted)); line-height: 1.45; }

.kind-pill {
  display: inline-flex; padding: 3px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 700;
  background: var(--info-soft); color: var(--info);
}
.kind-pill.owner { background: var(--primary-soft); color: var(--primary); }
.kind-pill.admin { background: var(--danger-soft); color: var(--danger); }

.status.showing { background: var(--success-soft); color: var(--success); }
.status.kept { background: var(--primary-soft); color: var(--primary); }
.status.ready { background: var(--success-soft); color: var(--success); }
.status.loading { background: var(--info-soft); color: var(--info); }
.status.failed { background: var(--danger-soft); color: var(--danger); }

/* registration */
.register-panel { max-width: 520px; }
.register-step { margin: 18px 0 6px; font-size: 13px; font-weight: 700; color: var(--primary); letter-spacing: 0.02em; }
.avatar-row { display: flex; align-items: center; gap: 14px; margin-top: 6px; }
.avatar-preview {
  width: 64px; height: 64px; border-radius: 50%;
  object-fit: cover; background: var(--primary-soft);
  border: 2px solid var(--line);
}
.qr-row { display: flex; gap: 16px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
.qr-row img { width: 150px; height: 150px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; }
.qr-secret { font-family: ui-monospace, Consolas, monospace; font-size: 12px; color: var(--muted); word-break: break-all; }
.success-panel { text-align: center; padding: 14px 4px; }
.success-panel .big { font-size: 40px; }

/* ============================================================================
   Registration page refinements
   ========================================================================= */

/* The invite form (name + photo + 2 passwords + QR + code + button) is much
   taller than the login form. The panel caps at viewport height with
   overflow:hidden, which clipped step 3 (QR / code / button) with no way to
   reach it. Allow the panel to scroll vertically instead of clipping.
   Higher specificity (.login-panel.register-panel) guarantees the override. */
.login-panel.register-panel {
  overflow-x: hidden;
  overflow-y: auto;
}

/* Hide the browser's built-in password reveal control (Edge/IE eye icon and
   the clear "x"); it overlapped our custom Show/Hide button. */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear { display: none; }

/* Keep typed password text from sliding under the Show/Hide button. */
#regPassword { padding-right: 74px; }

/* Modern profile-photo upload control (replaces the dated native file input). */
.avatar-row .sr-file {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
.avatar-upload { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.avatar-upload-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  cursor: pointer;
  padding: 10px 16px;
  border-radius: 12px;
  background: var(--primary-soft);
  color: var(--primary);
  border: 1px solid rgba(12, 15, 111, 0.18);
  font-size: 13px;
  font-weight: 800;
  transition: 0.18s ease;
}
.avatar-upload-btn:hover {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
  transform: translateY(-1px);
}
.avatar-upload-btn:focus-within { outline: 2px solid var(--primary); outline-offset: 2px; }
.avatar-upload-btn svg { width: 16px; height: 16px; }
.avatar-filename {
  font-size: 12px;
  color: var(--muted);
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Comfortable tap targets for row-action / toolbar buttons on touch screens. */
@media (max-width: 820px) {
  .btn-sm { min-height: 40px; }
}

/* ---- Quality: secondary status-mix doughnut + breakdown panel ---- */
.mini-chart-wrap { position: relative; height: clamp(220px, 30vh, 300px); padding: 10px 16px 18px; }
.quality-breakdown { padding: 16px 22px 20px; display: grid; gap: 10px; align-content: start; }
.qb-row { display: grid; grid-template-columns: 14px 1fr auto 48px; gap: 10px; align-items: center; font-size: 14px; }
.qb-dot { width: 12px; height: 12px; border-radius: 50%; }
.qb-label { color: var(--text); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qb-val { font-weight: 800; color: var(--primary); }
.qb-share { color: var(--muted); font-size: 12px; text-align: right; }
.qb-foot { margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--line); display: grid; gap: 8px; }
.qb-foot > div { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }
.qb-foot span { color: var(--muted); }
.qb-foot strong { color: var(--text); }

/* ============================================================================
   Product Tracking — live screen. In-view styles scoped under #ptRoot; the
   drill drawer's table styles use unique class names (.dtbl/.st-chip/.age-pill,
   wrapped in .ptd) so nothing collides with the rest of the app.
   ============================================================================ */
#ptRoot .pt-headline{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:14px;color:var(--muted);margin:2px 2px 16px}
#ptRoot .pt-headline b{color:var(--text)}
#ptRoot .pt-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}
#ptRoot .pt-kpi{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:16px;position:relative;overflow:hidden;box-shadow:0 10px 28px rgba(12,15,111,.05)}
#ptRoot .pt-kpi .ic{position:absolute;right:14px;top:14px;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:var(--primary-soft);color:var(--primary)}
#ptRoot .pt-kpi .ic svg{width:21px;height:21px}
#ptRoot .pt-kpi .l{font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);max-width:calc(100% - 46px)}
#ptRoot .pt-kpi .v{font-size:30px;font-weight:900;letter-spacing:-1px;margin-top:8px}
#ptRoot .pt-kpi .h{font-size:12px;color:var(--muted);margin-top:6px}
#ptRoot .pt-cardhead{padding:16px 20px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
#ptRoot .pt-cardhead h2{margin:0;font-size:18px}
#ptRoot .pt-cardhead p{margin:4px 0 0;color:var(--muted);font-size:13px}
#ptRoot .pt-picker{display:flex;align-items:center;gap:8px}
#ptRoot .pt-picker label{font-size:12px;font-weight:800;color:var(--muted);text-transform:uppercase}
#ptRoot .pt-picker select{font:inherit;border:1px solid var(--line);border-radius:11px;padding:8px 11px;background:var(--surface);color:var(--text)}
#ptRoot .pt-tabs{display:flex;gap:8px;flex-wrap:wrap;padding:14px 20px 0}
#ptRoot .pt-tab{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:8px 14px;font-weight:800;font-size:13.5px;color:var(--muted);cursor:pointer}
#ptRoot .pt-tab svg{width:16px;height:16px}
#ptRoot .pt-tab:hover{border-color:var(--primary);color:var(--text)}
#ptRoot .pt-tab.active{background:linear-gradient(150deg,#0c0f6f,#3b40c4);color:#fff;border-color:transparent}
#ptRoot .pt-legend{display:flex;gap:14px;flex-wrap:wrap;padding:12px 20px;border-top:1px solid var(--line);font-size:12px;color:var(--muted)}
#ptRoot .pt-legend i{display:inline-flex;width:13px;height:13px;border-radius:4px;margin-right:6px;vertical-align:-2px}
#ptRoot .pt-empty{display:grid;place-items:center;gap:10px;padding:46px 20px;text-align:center;color:var(--muted)}
#ptRoot .pt-empty svg{width:70px;height:70px;color:var(--primary);opacity:.45}
#ptRoot .pt-btn{border:1px solid var(--line);background:var(--surface);color:var(--text);border-radius:11px;padding:8px 12px;font-weight:800;font-size:13px;cursor:pointer}
#ptRoot .pt-tblscroll{overflow-x:auto}

#ptRoot .pl-wrap{display:grid;grid-template-columns:1fr 300px;gap:18px;padding:14px 20px 22px}
#ptRoot .pl-row{display:grid;grid-template-columns:54px 1fr;gap:14px;position:relative;padding:13px 10px;border-radius:14px;cursor:pointer;outline:none}
#ptRoot .pl-row:hover{background:var(--primary-soft)}
#ptRoot .pl-row:focus-visible{box-shadow:0 0 0 3px var(--primary-soft),inset 0 0 0 2px var(--primary)}
#ptRoot .pl-row:not(:last-child)::before{content:"";position:absolute;left:25.5px;top:55px;bottom:-11px;width:3px;border-radius:3px;background:linear-gradient(180deg,var(--primary-soft),var(--primary),var(--primary-soft));background-size:100% 200%;opacity:.5;animation:ptFlow 2s linear infinite}
#ptRoot .pl-node{width:54px;height:54px;align-self:start;border-radius:16px;display:grid;place-items:center;color:#fff;position:relative;z-index:1;background:linear-gradient(155deg,#0c0f6f,#3b40c4);box-shadow:0 10px 22px rgba(12,15,111,.28)}
#ptRoot .pl-node svg{width:24px;height:24px;max-width:24px;max-height:24px;display:block}
#ptRoot .pl-node.pl-empty{background:var(--surface-2);color:var(--muted);box-shadow:none;border:1.5px dashed var(--line)}
#ptRoot .pl-node.pl-empty svg{opacity:.6}
#ptRoot .pl-node .num{position:absolute;left:-6px;top:-6px;width:20px;height:20px;border-radius:50%;background:var(--surface);color:var(--primary);border:1px solid var(--line);font-size:11px;font-weight:900;display:grid;place-items:center}
#ptRoot .pl-head{display:flex;justify-content:space-between;align-items:center;gap:10px}
#ptRoot .pl-name{font-weight:800;font-size:15px;display:flex;flex-direction:column;gap:1px;min-width:0}
#ptRoot .pl-name small{color:var(--muted);font-weight:600;font-size:11px}
#ptRoot .pl-total{font-weight:900;font-size:22px;min-width:26px;text-align:right}
#ptRoot .pl-total.zero{color:var(--muted);opacity:.5;font-weight:700}
#ptRoot .pl-bar{display:flex;height:14px;border-radius:999px;overflow:hidden;background:var(--primary-soft);margin-top:9px}
#ptRoot .pl-bar span{display:block;height:100%}
#ptRoot .pl-chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px}
#ptRoot .pl-chip{font-size:11px;font-weight:700;color:var(--muted);background:var(--surface-2);border:1px solid var(--line);border-radius:999px;padding:2px 9px;display:inline-flex;align-items:center;gap:5px}
#ptRoot .pl-chip i{width:8px;height:8px;border-radius:50%}
#ptRoot .pl-chip.age{background:var(--surface);color:var(--muted)}
#ptRoot .pl-chip.age.over{background:rgba(195,50,50,.12);border-color:rgba(195,50,50,.3);color:var(--danger)}
#ptRoot .pl-side{display:grid;gap:14px;align-content:start}
#ptRoot .pt-panel{border:1px solid var(--line);border-radius:16px;padding:16px;background:var(--surface-2)}
#ptRoot .pt-panel h4{margin:0 0 12px;font-size:13px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
#ptRoot .pt-donutwrap{display:grid;place-items:center;gap:12px}
#ptRoot .pt-donut{width:150px;height:150px;border-radius:50%;position:relative;display:grid;place-items:center}
#ptRoot .pt-donut::after{content:"";position:absolute;inset:22px;border-radius:50%;background:var(--surface-2)}
#ptRoot .pt-donut-c{position:relative;text-align:center;z-index:1}
#ptRoot .pt-donut-c b{display:block;font-size:26px;font-weight:900;line-height:1}
#ptRoot .pt-donut-c span{font-size:11px;color:var(--muted)}
#ptRoot .pt-dleg{display:grid;gap:6px;width:100%}
#ptRoot .pt-dleg div{display:grid;grid-template-columns:13px 1fr auto;gap:8px;align-items:center;font-size:12.5px}
#ptRoot .pt-dleg i{width:11px;height:11px;border-radius:3px}
#ptRoot .pt-dleg b{font-weight:800;color:var(--primary)}

#ptRoot .pt-matrix{width:100%;border-collapse:collapse;min-width:560px}
#ptRoot .pt-matrix th,#ptRoot .pt-matrix td{padding:11px 12px;border-bottom:1px solid var(--line);font-size:13px;text-align:center;position:static}
#ptRoot .pt-matrix th{background:var(--primary-soft);color:var(--muted);text-transform:uppercase;font-size:11px;letter-spacing:.04em;font-weight:900}
#ptRoot .pt-matrix th.s,#ptRoot .pt-matrix td.s{text-align:left;position:sticky;left:0;background:var(--surface);font-weight:700;min-width:210px}
#ptRoot .pt-matrix th.s{background:var(--primary-soft)}
#ptRoot .pt-matrix .th-i{display:inline-flex;align-items:center;gap:6px;justify-content:center}
#ptRoot .pt-matrix td.s .ts{display:flex;align-items:center;gap:9px}
#ptRoot .pt-matrix td.s .tsi{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;background:var(--primary-soft);color:var(--primary);flex:0 0 auto}
#ptRoot .pt-matrix td.s .tsi svg{width:16px;height:16px}
#ptRoot .pt-matrix td.heat{cursor:pointer;font-weight:800;color:#fff;border-radius:6px}
#ptRoot .pt-matrix td.heat.lo{color:var(--text)}
#ptRoot .pt-matrix td.heat:hover{outline:2px solid var(--primary);outline-offset:-2px}
#ptRoot .pt-matrix td.zero{color:var(--muted);opacity:.4}
#ptRoot .pt-matrix th.click,#ptRoot .pt-matrix td.s.click{cursor:pointer}
#ptRoot .pt-matrix th.click:hover,#ptRoot .pt-matrix td.s.click:hover{outline:2px solid var(--primary);outline-offset:-2px}
#ptRoot .pt-matrix td.tot,#ptRoot .pt-matrix th.tot{background:var(--primary-soft);font-weight:900;color:var(--primary)}
#ptRoot .pt-matrix tr.totrow td{background:var(--primary-soft);font-weight:900;border-top:2px solid var(--line)}

#ptRoot .sb{display:grid;gap:13px;padding:20px}
#ptRoot .sb-row{display:grid;grid-template-columns:220px 1fr 44px;gap:14px;align-items:center;cursor:pointer}
#ptRoot .sb-label{display:flex;align-items:center;gap:9px;justify-content:flex-end;font-weight:700;font-size:13.5px;text-align:right}
#ptRoot .sb-label .si{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;background:var(--primary-soft);color:var(--primary);flex:0 0 auto}
#ptRoot .sb-label .si svg{width:15px;height:15px}
#ptRoot .sb-track{display:flex;height:28px;border-radius:9px;overflow:hidden;background:var(--primary-soft)}
#ptRoot .sb-track span{display:block;height:100%}
#ptRoot .sb-row:hover .sb-track{outline:2px solid var(--primary);outline-offset:2px}
#ptRoot .sb-total{font-weight:900;text-align:right}

/* User-management: action buttons per row + role editor in the drawer */
.row-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.role-edit p{font-size:13.5px;line-height:1.5;color:var(--text);margin:0 0 16px}
.role-edit .role-edit-note{font-size:12px;color:var(--muted);margin:14px 0}

/* ===== Toasts & modals (Phase 2) ===== */
#toasts{position:fixed;right:20px;bottom:20px;z-index:var(--z-toast);display:flex;flex-direction:column;gap:10px;max-width:340px}
.toast{display:flex;gap:11px;align-items:flex-start;background:var(--surface);border:1px solid var(--border);border-left:4px solid var(--accent);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);padding:13px 14px;animation:toastIn var(--dur) var(--ease-out)}
.toast.ok{border-left-color:var(--success)}.toast.err{border-left-color:var(--danger)}.toast.warn{border-left-color:var(--warning)}.toast.info{border-left-color:var(--info)}
.toast .ti{width:20px;height:20px;flex:0 0 auto;margin-top:1px}
.toast .toast-text b{font-size:13.5px;display:block;color:var(--text)}
.toast .toast-text p{margin:2px 0 0;font-size:12.5px;color:var(--text-muted)}
.toast .toast-act{display:block;background:0;border:0;color:var(--accent-strong);font-weight:700;font-size:12.5px;padding:0;margin-top:4px;cursor:pointer}
.toast .toast-x{margin-left:auto;background:0;border:0;color:var(--text-subtle);font-size:16px;line-height:1;cursor:pointer}
.scrim{position:fixed;inset:0;background:rgba(8,11,24,.5);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);z-index:var(--z-modal);display:grid;place-items:center;padding:20px;animation:scrimIn var(--dur)}
.modal{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);width:min(460px,100%);padding:24px;animation:modalIn var(--dur) var(--ease-out)}
.modal h3{margin:0 0 8px;font-size:var(--fs-h2);color:var(--text)}
.modal .modal-p{color:var(--text-muted);margin:0 0 18px}
.modal .modal-body{color:var(--text);margin:0 0 18px}
.modal .modal-err{display:none;color:var(--danger);font-size:12px;font-weight:600;margin:-8px 0 10px}
.modal .modal-err.show{display:block}
.modal .modal-row{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end;align-items:center;margin-top:6px}
@keyframes toastIn{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
@keyframes scrimIn{from{opacity:0}to{opacity:1}}
@keyframes modalIn{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.toast,.scrim,.modal{animation:none}}
@media (max-width:640px){#toasts{left:14px;right:14px;max-width:none}}

/* ===== Theme switcher (Phase 3) ===== */
.theme-btn{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--border);background:var(--surface);color:var(--text);border-radius:var(--radius-pill);padding:7px 12px;font-size:13px;font-weight:600;cursor:pointer;transition:border-color var(--dur-fast)}
.theme-btn:hover{border-color:var(--border-strong)}
.theme-btn svg{width:16px;height:16px}
.theme-menu{position:fixed;z-index:var(--z-modal);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);padding:6px;min-width:172px;display:flex;flex-direction:column;gap:2px;animation:modalIn var(--dur-fast) var(--ease-out)}
.theme-menu button{text-align:left;background:0;border:0;color:var(--text);padding:9px 11px;border-radius:var(--radius-sm);font-size:13px;cursor:pointer}
.theme-menu button:hover{background:var(--surface-2)}
.theme-menu button[aria-checked="true"]{color:var(--accent-strong);font-weight:700}

/* ===== Phase 4 — motion & micro-interactions ===== */
.metric{transition:transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast)}
.metric:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.grid .card{animation:cardRise var(--dur-slow) var(--ease-out) both}
.grid .card:nth-child(2){animation-delay:40ms}
.grid .card:nth-child(3){animation-delay:80ms}
.grid .card:nth-child(4){animation-delay:120ms}
@keyframes cardRise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
/* Global reduced-motion guard: collapse all motion to instant. */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}

/* ===== Phase 5 — mobile: collapse standard tables to label/value cards (<=640px).
   app.js stamps each cell with data-label from its column header. ===== */
@media (max-width: 640px){
  .table-wrap{overflow-x:hidden}
  .table-wrap table, .table-wrap tbody, .table-wrap tr{display:block !important;width:100% !important;min-width:0 !important;max-width:100% !important}
  .table-wrap thead{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}
  .table-wrap tbody tr{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);margin:0 0 12px;padding:4px 14px}
  .table-wrap tbody tr:hover td{background:transparent}
  .table-wrap tbody td{display:flex;align-items:center;justify-content:space-between;gap:18px;text-align:right;border:0;padding:10px 0;font-size:13.5px;min-width:0}
  .table-wrap tbody td + td{border-top:1px solid var(--border)}
  .table-wrap tbody td::before{content:attr(data-label);font-weight:600;color:var(--text-muted);text-align:left;flex:0 0 auto;white-space:nowrap}
  .table-wrap tbody td:empty{display:none}
}

/* ===== Trust footer ===== */
.app-foot{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:28px;padding:18px 4px 8px;border-top:1px solid var(--border);color:var(--text-muted);font-size:12.5px}
.af-badge{display:inline-flex;align-items:center;gap:7px;background:var(--success-soft);color:var(--success);border-radius:var(--radius-pill);padding:5px 11px;font-weight:700;font-size:12px}
.af-badge svg{width:14px;height:14px}
.af-meta{color:var(--text-subtle)}
.af-links{margin-left:auto;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.af-links a{color:var(--text-muted)}
.af-links a:hover{color:var(--accent-strong)}

/* ===== Splash / auth-loading (Phase 10) ===== */
.splash{position:fixed;inset:0;z-index:200;display:grid;place-items:center;background:var(--bg);transition:opacity var(--dur-slow) var(--ease-out)}
.splash.gone{opacity:0;pointer-events:none}
.splash-inner{display:flex;flex-direction:column;align-items:center;gap:16px}
.splash-logo{width:58px;height:58px;border-radius:16px;background:linear-gradient(135deg,var(--accent),var(--accent-strong));color:#fff;display:grid;place-items:center;font-weight:800;font-size:20px;box-shadow:var(--shadow-lg)}
.splash-bar{width:120px;height:4px;border-radius:4px;background:var(--surface-3);overflow:hidden}
.splash-bar i{display:block;height:100%;width:40%;background:var(--accent);border-radius:4px;animation:splashLoad 1s var(--ease-out) infinite}
@keyframes splashLoad{0%{transform:translateX(-130%)}100%{transform:translateX(330%)}}

/* ===== A11y: skip-to-content link (visible on keyboard focus) ===== */
.skip-link{position:fixed;top:-120px;left:12px;z-index:300;background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:var(--radius-sm);padding:10px 14px;font-weight:600;box-shadow:var(--shadow-md);transition:top var(--dur) var(--ease-out)}
.skip-link:focus{top:12px;outline:none;box-shadow:0 0 0 4px var(--ring)}
#maincontent:focus{outline:none}

/* ===== Illustrated empty states (standalone .empty divs; table-cell empties stay text).
   Theme-aware: the icon is a mask filled with --text-subtle, so it adapts per theme. ===== */
.empty:not(td){display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:36px 24px}
.empty:not(td)::before{
  content:"";width:46px;height:46px;margin-bottom:8px;background:var(--text-subtle);opacity:.7;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='22 12 16 12 14 15 10 15 8 12 2 12'/%3E%3Cpath d='M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='22 12 16 12 14 15 10 15 8 12 2 12'/%3E%3Cpath d='M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.chart-canvas-wrap .empty{flex-direction:column}

/* ===== Loading skeletons (shimmer placeholders during initial data fetch).
   The global prefers-reduced-motion guard freezes the sheen to a static fill. ===== */
.sk{background:linear-gradient(90deg,var(--surface-2) 25%,var(--surface-3) 37%,var(--surface-2) 63%);background-size:400% 100%;animation:sheen 1.3s linear infinite;border-radius:8px}
@keyframes sheen{0%{background-position:100% 0}100%{background-position:0 0}}
.sk-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:18px;display:flex;flex-direction:column;gap:11px;min-height:96px}
.sk-line{height:13px}
.sk-line.sm{width:45%}
.sk-line.lg{height:26px;width:70%}

#ptRoot .kb{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(180px,1fr);gap:12px;padding:20px;overflow-x:auto}
#ptRoot .kb-col{background:var(--surface-2);border:1px solid var(--line);border-radius:14px;min-height:120px;overflow:hidden}
#ptRoot .kb-h{padding:11px 12px;font-weight:900;font-size:13px;display:flex;justify-content:space-between;align-items:center;gap:6px;border-bottom:3px solid;border-radius:14px 14px 0 0}
#ptRoot .kb-h .lab{display:flex;align-items:center;gap:7px}
#ptRoot .kb-h .cnt{font-size:12px;background:var(--surface);border-radius:999px;padding:1px 9px}
#ptRoot .kb-body{padding:10px;display:grid;gap:8px;grid-template-columns:minmax(0,1fr)}
#ptRoot .kb-card{background:var(--surface);border:1px solid var(--line);border-radius:11px;padding:9px 11px;font-size:13px;font-weight:600;display:flex;justify-content:space-between;align-items:center;gap:8px;cursor:pointer;min-width:0;max-width:100%}
#ptRoot .kb-card:hover{border-color:var(--primary)}
#ptRoot .kb-card .kc{display:flex;align-items:center;gap:7px;min-width:0;flex:1 1 auto}
#ptRoot .kb-card .kc svg{width:15px;height:15px;flex:0 0 auto;color:var(--primary)}
#ptRoot .kb-card .kc span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#ptRoot .kb-card b{font-weight:900;color:var(--primary);flex:0 0 auto}
#ptRoot .kb-empty{color:var(--muted);font-size:12px;padding:10px}

#ptRoot .bc{padding:18px 20px 10px}
#ptRoot .bc svg{display:block;overflow:visible}
#ptRoot .bc .barg{cursor:pointer}
#ptRoot .bc .barg rect{transition:opacity .15s}
#ptRoot .bc .barg:hover rect{opacity:.82}

#ptRoot .bx{padding:18px 20px}
#ptRoot .bx-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
#ptRoot .bx-search{position:relative;flex:1 1 240px;min-width:200px}
#ptRoot .bx-search input{width:100%;padding:9px 12px 9px 34px;border:1px solid var(--line);border-radius:11px;background:var(--surface);color:var(--text);font:inherit;outline:none}
#ptRoot .bx-search input:focus{border-color:var(--primary);box-shadow:0 0 0 4px var(--primary-soft)}
#ptRoot .bx-search .mag{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--muted);display:flex}
#ptRoot .bx-bar select{font:inherit;border:1px solid var(--line);border-radius:11px;padding:9px 11px;background:var(--surface);color:var(--text)}
#ptRoot .bx-count{color:var(--muted);font-size:12.5px;font-weight:700;margin-left:auto;white-space:nowrap}

.dtbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:12px}
.dtbl{width:100%;border-collapse:collapse;font-size:12.5px;min-width:520px}
.dtbl th{position:sticky;top:0;background:var(--primary-soft);color:var(--muted);text-transform:uppercase;font-size:10px;letter-spacing:.04em;font-weight:900;text-align:left;padding:9px 11px;white-space:nowrap}
.dtbl td{padding:9px 11px;border-top:1px solid var(--line);border-bottom:0;white-space:nowrap;text-align:left;vertical-align:middle}
.dtbl tbody tr:hover td{background:var(--primary-soft)}
.dtbl .st-chip{font-size:10px;font-weight:800;border-radius:999px;padding:2px 8px;white-space:nowrap}
.dtbl .age-pill{font-weight:800;border-radius:999px;padding:2px 9px;background:var(--primary-soft);color:var(--primary)}
.dtbl .age-pill.over{background:rgba(195,50,50,.14);color:var(--danger)}
.dtbl .over{color:var(--danger);font-weight:800}
.dtbl .dim{color:var(--muted);opacity:.6}
.ptd .drill-foot{display:flex;justify-content:flex-end;margin-bottom:12px}

@keyframes ptFlow{0%{background-position:0 -100%}100%{background-position:0 100%}}
@media (max-width:1100px){#ptRoot .pt-kpis{grid-template-columns:repeat(2,1fr)}#ptRoot .pl-wrap{grid-template-columns:1fr}#ptRoot .sb-row{grid-template-columns:140px 1fr 40px}}
@media (prefers-reduced-motion:reduce){#ptRoot *{animation:none!important}}

/* ============================================================
   Project Tracking — live program status (RAG band, KPI strip,
   attention list, schedule visual, risk register, decision log,
   RAG-mix doughnut). In-page styles scoped under #projectRoot;
   drawer content styles scoped under .prjd. Theme-token based
   only (works in light + dark); no hard-coded colours.
   ============================================================ */

/* ---- Toolbar: program segmented tabs + admin client picker ---- */
#projectRoot .prj-toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px}
#projectRoot .prj-toolbar:empty{display:none}
#projectRoot .prj-progtabs{display:inline-flex;gap:6px;background:var(--surface-2);border:1px solid var(--line);border-radius:999px;padding:4px}
#projectRoot .prj-progtab{border:0;background:transparent;color:var(--muted);font:inherit;font-weight:800;font-size:13.5px;padding:8px 18px;border-radius:999px;cursor:pointer;transition:color var(--dur-fast) var(--ease-out)}
#projectRoot .prj-progtab:hover{color:var(--text)}
#projectRoot .prj-progtab.active{background:linear-gradient(150deg,var(--primary),var(--accent-strong));color:var(--on-primary);box-shadow:var(--shadow-sm)}
#projectRoot .prj-progtab:focus-visible{outline:none;box-shadow:0 0 0 3px var(--ring)}
#projectRoot .prj-picker{display:flex;align-items:center;gap:8px;margin-left:auto}
#projectRoot .prj-picker label{font-size:12px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
#projectRoot .prj-picker select{font:inherit;border:1px solid var(--line);border-radius:11px;padding:8px 11px;background:var(--surface);color:var(--text)}
#projectRoot .prj-picker select:focus-visible{outline:none;box-shadow:0 0 0 3px var(--ring)}

/* ---- Sticky RAG header band ---- */
#projectRoot .prj-ragband{position:sticky;top:0;z-index:6;display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:14px 18px;margin-bottom:18px;background:var(--surface);background:color-mix(in srgb,var(--surface) 90%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}
#projectRoot .rb-title{display:flex;flex-direction:column;gap:2px;font-weight:900;font-size:16px;letter-spacing:-.3px;color:var(--text);padding-right:16px;border-right:1px solid var(--line)}
#projectRoot .rb-title small{font-weight:700;font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
#projectRoot .rb-pills{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
#projectRoot .rb-item{display:flex;flex-direction:column;gap:6px}
#projectRoot .rb-label{font-size:11px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.03em;max-width:230px}
#projectRoot .rb-overall{padding:7px 13px;border-radius:14px;background:var(--surface-2);border:1px solid var(--line)}
#projectRoot .rb-overall .rb-label{color:var(--text)}
#projectRoot .rb-overall .rag{font-size:13.5px}
#projectRoot .prj-ragband .rag{font-size:12.5px;padding:6px 11px}
/* Neutral pill for blank / unrated RAG (in-page + drawer) */
#projectRoot .rag.unrated,.prjd .rag.unrated{color:var(--text-subtle);background:var(--surface-2);border-color:var(--line)}

/* ---- KPI strip (5 metric cards) ---- */
#projectRoot .prj-kpis{grid-template-columns:repeat(5,minmax(0,1fr));margin-bottom:18px}
@media (max-width:1200px){#projectRoot .prj-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:720px){#projectRoot .prj-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---- Cards + card heads ---- */
#projectRoot .prj-card{margin-bottom:18px;overflow:hidden}
#projectRoot .prj-midrow{margin-bottom:18px}
#projectRoot .prj-midrow .prj-card{margin-bottom:0}
#projectRoot .prj-cardhead{padding:16px 20px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
#projectRoot .prj-cardhead h2{margin:0;font-size:17px;letter-spacing:-.3px}
#projectRoot .prj-cardhead p{margin:4px 0 0;color:var(--muted);font-size:13px}
#projectRoot .prj-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}

/* ---- Segmented toggle (Visual | Table) + button ---- */
#projectRoot .prj-seg{display:inline-flex;background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:3px}
#projectRoot .prj-segbtn{display:inline-flex;align-items:center;gap:6px;border:0;background:transparent;color:var(--muted);font:inherit;font-weight:800;font-size:12.5px;padding:7px 13px;border-radius:8px;cursor:pointer}
#projectRoot .prj-segbtn:hover{color:var(--text)}
#projectRoot .prj-segbtn.active{background:var(--surface);color:var(--primary);box-shadow:var(--shadow-sm)}
#projectRoot .prj-segbtn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--ring)}
#projectRoot .prj-segbtn svg{width:15px;height:15px}
#projectRoot .prj-btn{border:1px solid var(--line);background:var(--surface);color:var(--text);border-radius:10px;padding:8px 13px;font-weight:800;font-size:12.5px;cursor:pointer}
#projectRoot .prj-btn:hover{border-color:var(--primary);color:var(--primary)}
#projectRoot .prj-btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--ring)}

/* ---- Attention list ---- */
#projectRoot .prj-attn{display:flex;flex-direction:column}
#projectRoot .prj-attn-row{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:12px;padding:12px 20px;border-bottom:1px solid var(--line);cursor:pointer;outline:none}
#projectRoot .prj-attn-row:last-child{border-bottom:0}
#projectRoot .prj-attn-row:hover{background:var(--primary-soft)}
#projectRoot .prj-attn-row:focus-visible{box-shadow:inset 0 0 0 2px var(--primary)}
#projectRoot .prj-attn-label{font-weight:800;font-size:14px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#projectRoot .prj-attn-state{font-size:12.5px;color:var(--muted);white-space:nowrap}
#projectRoot .prj-attn-date{font-size:12.5px;font-weight:700;color:var(--text);white-space:nowrap}
@media (max-width:520px){
  #projectRoot .prj-attn-row{grid-template-columns:auto 1fr}
  #projectRoot .prj-attn-state,#projectRoot .prj-attn-date{grid-column:2;justify-self:start}
}
#projectRoot .prj-allclear{display:flex;align-items:center;gap:14px;padding:26px 20px;color:var(--muted)}
#projectRoot .prj-allclear svg{color:var(--success);flex:0 0 auto}
#projectRoot .prj-allclear b{color:var(--text);display:block;font-size:15px}
#projectRoot .prj-allclear span{font-size:13px}

/* ---- RAG-mix doughnut card ---- */
#projectRoot .prj-chart-card .mini-chart-wrap{padding:8px 14px 16px}

/* ---- Schedule: batch inline-SVG Gantt ---- */
#projectRoot .prj-gantt{padding:16px 18px 4px;overflow-x:auto}
#projectRoot .prj-gantt svg{display:block;min-width:640px;overflow:visible}
#projectRoot .prj-ggrid{stroke:var(--line);stroke-width:1;stroke-dasharray:2 4}
#projectRoot .prj-gtick{fill:var(--muted);font-size:11px;font-weight:700}
#projectRoot .prj-gtoday{stroke:var(--danger);stroke-width:1.5;stroke-dasharray:4 3;opacity:.75}
#projectRoot .prj-gtodaylab{fill:var(--danger);font-size:10px;font-weight:800}
#projectRoot .prj-glabel{fill:var(--text);font-size:12.5px;font-weight:800}
#projectRoot .prj-gmarklab,#projectRoot .prj-gtbd{fill:var(--muted);font-size:11px;font-weight:700}
#projectRoot .prj-ghit{fill:transparent;cursor:pointer}
#projectRoot .prj-grow{outline:none;cursor:pointer}
#projectRoot .prj-grow:hover .prj-ghit{fill:var(--primary-soft)}
#projectRoot .prj-grow:focus-visible .prj-ghit{fill:var(--primary-soft);stroke:var(--primary);stroke-width:2}
#projectRoot .prj-glegend{display:flex;gap:16px;flex-wrap:wrap;padding:10px 20px 16px;font-size:12px;color:var(--muted)}
#projectRoot .prj-glegend i.prj-gdot{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:6px;vertical-align:-1px}
#projectRoot .prj-glegend .prj-gk b{color:var(--text)}
#projectRoot .prj-glegend .prj-gtodaykey b{color:var(--danger)}

/* ---- Schedule: milestone roadmap (reuses global .timeline/.step/.step-*) ---- */
#projectRoot .prj-roadmap{padding:18px 20px 10px;display:grid;gap:22px}
#projectRoot .prj-group{display:grid;gap:12px}
#projectRoot .prj-grouphd{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.05em;color:var(--primary)}
#projectRoot .prj-grouphd::before{content:"";width:8px;height:8px;border-radius:3px;background:var(--primary)}
#projectRoot .prj-step{cursor:pointer;border-radius:16px;outline:none}
#projectRoot .prj-step:hover .step-card{border-color:var(--primary)}
#projectRoot .prj-step:focus-visible .step-card{border-color:var(--primary);box-shadow:0 0 0 3px var(--ring)}

/* ---- Sortable schedule / risk / decision tables (reuse global .table-wrap table) ---- */
#projectRoot .prj-sort{cursor:pointer;-webkit-user-select:none;user-select:none;white-space:nowrap}
#projectRoot .prj-sort::after{content:"↕";margin-left:6px;font-size:10px;opacity:.4}
#projectRoot .prj-sort[aria-sort="ascending"]::after{content:"↑";opacity:1}
#projectRoot .prj-sort[aria-sort="descending"]::after{content:"↓";opacity:1}
#projectRoot .prj-sort:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--primary)}
#projectRoot .prj-rowlink{cursor:pointer}
#projectRoot .prj-rowlink:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--primary)}
#projectRoot .prj-muted{color:var(--muted)}
#projectRoot td.prj-over,.prjd .prj-over{color:var(--danger);font-weight:800}
#projectRoot .prj-overtag,.prjd .prj-overtag{display:inline-block;margin-left:6px;font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.03em;color:var(--danger);background:var(--danger-soft);border-radius:999px;padding:1px 7px}

/* ---- Empty states ---- */
#projectRoot .prj-empty{display:grid;place-items:center;gap:12px;padding:44px 20px;text-align:center;color:var(--muted)}
#projectRoot .prj-empty svg{color:var(--primary);opacity:.5}
#projectRoot .prj-empty b{color:var(--text);font-size:15px}

/* ---- Drawer content (rendered outside #projectRoot, scoped under .prjd) ---- */
.prjd h3{font-size:15px;margin:16px 0 6px}
.prjd .prjd-text{color:var(--text);line-height:1.6;margin:6px 0 16px;white-space:pre-line}
.prjd .prjd-sev{margin-bottom:4px}
.prjd .detail-grid{margin-bottom:4px}
.prjd .prjd-proc{box-shadow:none;margin-top:16px}
.prjd .prjd-proc h3{margin-top:0}
.prjd .timeline{margin-top:6px}