:root {
    --navy:      #0f1f2e;
    --navy2:     #172333;
    --navy3:     #1e2d3d;
    --teal:      #0d9488;
    --teal-l:    #14b8a6;
    --teal-ll:   #99f6e4;
    --gold:      #f59e0b;
    --gold-l:    #fcd34d;
    --white:     #ffffff;
    --offwhite:  #f8fafc;
    --gray-100:  #f1f5f9;
    --gray-200:  #e2e8f0;
    --gray-400:  #94a3b8;
    --gray-600:  #475569;
    --gray-800:  #1e293b;
    --success:   #10b981;
    --warn:      #f59e0b;
    --danger:    #ef4444;

    /* Radius is now tiered by hierarchy, not one value everywhere —
       big containers (panels, cards) read as "settled" with a larger
       radius; small interactive controls (buttons, inputs, badges) get
       a tighter radius so they feel precise, not just miniature panels. */
    --radius-lg: 14px;
    --radius:    9px;
    --radius-sm: 6px;

    /* A real two-layer elevation system — a tight, dark "contact"
       shadow that defines the edge, plus a soft, wide ambient shadow
       that suggests actual depth — instead of one flat blur reused
       for every single surface regardless of how "raised" it should
       feel. --shadow is for resting cards; --shadow-lg is for things
       that should feel closer to the user (modals, the login card). */
    --shadow:    0 1px 2px rgba(15,31,46,.06), 0 4px 16px rgba(15,31,46,.07);
    --shadow-lg: 0 2px 4px rgba(15,31,46,.08), 0 16px 40px rgba(15,31,46,.16);
    --shadow-dark: 0 1px 2px rgba(0,0,0,.2), 0 8px 28px rgba(0,0,0,.28);
  }

  * { box-sizing: border-box; margin: 0; padding: 0; }

  /* Type system: Inter for UI text, IBM Plex Mono kept for genuinely
     tabular/numeric content. Inter specifically over IBM Plex Sans
     (used on the marketing site) because it was built for interface
     legibility at small sizes — larger x-height, clearer distinction
     between similar characters (I/l/1, O/0) — which matters more here
     than brand match, given real feedback that dense forms were hard
     to read for some users. The marketing site keeps Plex; a working
     tool used daily by people of varying eyesight isn't the place to
     prioritize typographic personality over legibility. */
  @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

  body {
    font-family: 'Inter', -apple-system, system-ui, sans-serif;
    background: var(--offwhite); color: var(--gray-800); min-height: 100vh;
    -webkit-font-smoothing: antialiased;
  }

  /* Labels moved off the mono face and out of all-caps: a monospace
     font trades away the letter-spacing and shape variety that make
     text quick to read at a glance, and long all-caps phrases
     ("ORGANIZATION CREDENTIALING PROFILE") are measurably slower to
     read than sentence case — a real cost for a form this dense, not
     just a style preference. Kept mono for genuinely tabular/numeric
     content (table headers, data, badges) where column alignment
     matters more than reading speed. */
  code, .mono, th, .badge, .ov-stat-label, .company-card-slug {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
  }

  /* Header size (Branding setting): standard / large / xlarge. Set on <html data-header-size>. */
  :root { --hdr-h: 56px; --hdr-logo: 32px; --hdr-name: 17px; --hdr-sub: 13px; }
  :root[data-header-size="large"]  { --hdr-h: 76px; --hdr-logo: 52px; --hdr-name: 20px; --hdr-sub: 14px; }
  :root[data-header-size="xlarge"] { --hdr-h: 96px; --hdr-logo: 72px; --hdr-name: 24px; --hdr-sub: 15px; }
  header {
    background: var(--navy); height: var(--hdr-h); padding: 0 24px;
    display: flex; align-items: center; justify-content: space-between;
    position: sticky; top: 0; z-index: 100;
    border-bottom: 1px solid rgba(255,255,255,.06);
  }
  .logo { display: flex; align-items: center; gap: 10px; }
  .logo-mark { width: var(--hdr-logo); height: var(--hdr-logo); flex-shrink: 0; border-radius: var(--radius-sm); background: var(--teal); display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 15px; color: #fff; box-shadow: 0 2px 6px rgba(13,148,136,.4); }
  .logo-name { color: #fff; font-size: var(--hdr-name); font-weight: 700; letter-spacing: -.01em; }
  .logo-sub  { color: var(--teal-l); font-size: var(--hdr-sub); }
  .logo-mark img.hdr-logo-img { width: 100%; height: 100%; object-fit: contain; border-radius: 6px; }
  /* At the larger sizes a logo is shown at its own proportions (up to 220px wide) on the header itself,
     not squeezed into a square tile. */
  :root[data-header-size="large"] .logo-mark.has-logo,
  :root[data-header-size="xlarge"] .logo-mark.has-logo { width: auto; max-width: 220px; background: transparent; box-shadow: none; }
  :root[data-header-size="large"] .logo-mark.has-logo img.hdr-logo-img,
  :root[data-header-size="xlarge"] .logo-mark.has-logo img.hdr-logo-img { width: auto; max-width: 220px; height: 100%; }
  #hdrRight  { display: flex; align-items: center; gap: 8px; }
  #hdrUser   { color: rgba(255,255,255,.7); font-size: 15px; display: none; }
  #hdrRole   { background: var(--teal); color: #fff; padding: 2px 9px; border-radius: 20px; font-size: 13px; font-weight: 700; display: none; }
  #hdrLogout { background: transparent; border: 1px solid rgba(255,255,255,.2); color: rgba(255,255,255,.7); padding: 4px 12px; border-radius: var(--radius-sm); font-size: 14px; cursor: pointer; display: none; transition: all .15s; }
  #hdrLogout:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.35); }

  /* Floating menu button: only ever shown on phones, and only while the header has scrolled out of sight. */
  #mobileMenuFab { display: none; position: fixed; top: 10px; left: 10px; z-index: 95; width: 42px; height: 42px; border-radius: 50%;
    align-items: center; justify-content: center; font-size: 20px; color: #fff; cursor: pointer;
    background: var(--navy); border: 1px solid rgba(255,255,255,.25); box-shadow: 0 4px 14px rgba(0,0,0,.4); }
  @media (max-width: 900px) { #mobileMenuFab.show { display: flex; } }
  .screen { display: none; }
  .screen.active { display: block; }

  /* LOGIN — split screen. The persistent header (menu, search, tenant
     branding, My Credentials) is hidden while the login screen is active:
     none of it applies to someone who hasn't signed in yet, and the
     branding shown there could belong to a different tenant. */
  body:has(#loginScreen.active) > header { display: none; }
  #loginScreen { min-height: 100vh; min-height: 100dvh; display: none; align-items: stretch; padding: 0; background: var(--offwhite); }
  #loginScreen.active { display: flex; }

  .login-brand {
    flex: 0 0 46%; max-width: 640px; position: relative; overflow: hidden;
    display: flex; flex-direction: column; justify-content: space-between;
    padding: 48px 56px; color: #fff;
    background:
      radial-gradient(900px 500px at 12% 0%, rgba(20,184,166,.22), transparent 60%),
      radial-gradient(700px 520px at 100% 100%, rgba(30,64,175,.35), transparent 60%),
      var(--navy);
  }
  .login-brand-logo { width: 190px; height: auto; display: block; }
  .login-brand-body { max-width: 480px; }
  .login-def-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; }
  .login-def-word { font-size: 18px; font-weight: 700; color: var(--teal-ll); letter-spacing: .01em; }
  .login-def-pos { font-size: 14px; font-style: italic; color: rgba(255,255,255,.55); }
  .login-brand .login-def-text span { display: block; }
  .login-brand .login-def-text { font-size: 32px; line-height: 1.2; font-weight: 700; letter-spacing: -.02em; color: #fff; margin: 0 0 20px; }
  .login-brand .login-brand-sub { font-size: 17px; line-height: 1.55; color: rgba(255,255,255,.72); margin: 0; }
  .login-brand-foot { font-size: 14px; color: rgba(255,255,255,.45); }

  .login-form-side { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; padding: 32px 24px; }
  .login-card { width: 100%; max-width: 380px; }
  .login-mobile-logo { display: none; width: 150px; height: auto; margin: 0 0 28px; }
  .login-card h2 { font-size: 28px; color: var(--navy); font-weight: 700; margin-bottom: 6px; letter-spacing: -.02em; }
  .login-card .login-sub { color: var(--gray-600); font-size: 16px; margin-bottom: 28px; }
  .login-pw-wrap { position: relative; }
  .login-pw-wrap input { padding-right: 64px; }
  .login-pw-toggle { position: absolute; top: 50%; right: 8px; transform: translateY(-50%); background: none; border: none; color: var(--teal); font-size: 14px; font-weight: 600; cursor: pointer; padding: 6px 8px; border-radius: var(--radius-sm); }
  .login-pw-toggle:hover { background: var(--gray-100); }
  .login-links { margin-top: 18px; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 10px; font-size: 15px; }
  .login-links a { color: var(--teal); text-decoration: none; }
  .login-links a:hover { text-decoration: underline; }
  .login-links-dot { color: var(--gray-400); }
  .login-footnote { margin: 22px 0 0; padding-top: 18px; border-top: 1px solid var(--gray-200); font-size: 14px; color: var(--gray-600); text-align: center; }

  @media (max-width: 900px) {
    .login-brand { display: none; }
    .login-mobile-logo { display: block; }
    .login-form-side { align-items: flex-start; padding: 40px 20px; }
  }
  @media (max-width: 480px) {
    .login-links { flex-direction: column; align-items: center; gap: 10px; }
    .login-links-dot { display: none; }
  }

  .form-group { margin-bottom: 16px; }
  .field-label { display: block; font-size: 14px; font-weight: 600; color: var(--gray-600); margin-bottom: 6px; }
  input[type=text], input[type=email], input[type=password], input[type=date], select, textarea {
    width: 100%; padding: 10px 13px; border: 1.5px solid var(--gray-200);
    border-radius: var(--radius-sm); font-size: 16px; color: var(--gray-800);
    background: #fff; outline: none; transition: border-color .15s, box-shadow .15s; font-family: inherit;
  }
  input:focus, select:focus, textarea:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(13,148,136,.12); }

  .btn { padding: 10px 18px; border-radius: var(--radius-sm); font-size: 16px; font-weight: 600; cursor: pointer; border: none; transition: transform .1s ease, box-shadow .15s ease, background .15s ease; display: inline-flex; align-items: center; gap: 6px; }
  .btn:active { transform: translateY(1px); }
  .btn-primary { background: var(--teal); color: #fff; width: 100%; justify-content: center; padding: 12px; box-shadow: 0 2px 8px rgba(13,148,136,.3); }
  .btn-primary:hover { background: var(--teal-l); box-shadow: 0 4px 14px rgba(13,148,136,.4); }
  .btn-primary:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }
  .btn-sm { padding: 5px 12px; font-size: 14px; border-radius: var(--radius-sm); }
  .btn-teal   { background: var(--teal); color: #fff; }
  .btn-teal:hover { background: var(--teal-l); }
  .btn-gold   { background: transparent; border: 1px solid var(--gold); color: var(--gold); }
  .btn-gold:hover { background: rgba(245,158,11,.08); }
  .btn-danger { background: transparent; border: 1px solid var(--danger); color: var(--danger); }
  .btn-danger:hover { background: rgba(239,68,68,.08); }
  .btn-ghost  { background: transparent; border: 1px solid var(--gray-200); color: var(--gray-600); }
  .btn-ghost:hover { border-color: var(--gray-400); }

  .alert { padding: 10px 14px; border-radius: var(--radius-sm); font-size: 15px; margin-bottom: 14px; display: none; }
  .alert-error   { background: #fef2f2; border: 1px solid #fecaca; color: var(--danger); }
  .alert-success { background: #f0fdf4; border: 1px solid #bbf7d0; color: #15803d; }

  /* LAYOUT */
  .page { padding: 28px 24px; max-width: 1100px; margin: 0 auto; }
  #adminScreen .page { max-width: none; padding-left: 20px; padding-right: 20px; }
  .page-header { margin-bottom: 24px; display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 12px; }
  .page-header h1 { font-size: 24px; font-weight: 700; color: var(--navy); margin-bottom: 2px; letter-spacing: -.015em; }
  .page-header p  { color: var(--gray-600); font-size: 16px; }

  /* STAT CARDS — a colored top edge instead of a left rail reads more
     like a status indicator on a real dashboard than a generic
     left-border accent, and the elevation now actually differs from
     a resting panel below it. */
  .stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px,1fr)); gap: 12px; margin-bottom: 24px; }
  .stat-card { background: #fff; border-radius: var(--radius); padding: 16px; border: 1px solid var(--gray-200); border-top: 3px solid var(--gray-200); box-shadow: var(--shadow); transition: box-shadow .15s ease; }
  .stat-card.ok     { border-top-color: var(--success); }
  .stat-card.warn   { border-top-color: var(--warn); }
  .stat-card.danger { border-top-color: var(--danger); }
  .stat-card.info   { border-top-color: var(--teal); }
  .stat-num   { font-size: 30px; font-weight: 800; color: var(--navy); line-height: 1; letter-spacing: -.02em; }
  .stat-label { font-size: 14px; color: var(--gray-600); margin-top: 4px; font-weight: 500; }

  /* PANELS */
  .panel { background: #fff; border-radius: var(--radius-lg); border: 1px solid var(--gray-200); box-shadow: var(--shadow); margin-bottom: 20px; }
  .panel-head { padding: 16px 20px; border-bottom: 1px solid var(--gray-100); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
  .panel-title { font-size: 17px; font-weight: 700; color: var(--navy); letter-spacing: -.01em; }
  .panel-body  { padding: 20px; }

  /* BADGES */
  .badge { padding: 3px 10px; border-radius: 20px; font-size: 13px; font-weight: 700; white-space: nowrap; letter-spacing: .01em; }
  .badge-ok       { background: #d1fae5; color: #065f46; }
  .badge-warn     { background: #fef3c7; color: #92400e; }
  .badge-danger   { background: #fee2e2; color: #991b1b; }
  .badge-none     { background: var(--gray-100); color: var(--gray-600); }
  .badge-verified { background: #dbeafe; color: #1e40af; }
  .badge-pending  { background: #fef3c7; color: #92400e; }

  /* DOC LIST */
  .doc-item { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--gray-100); flex-wrap: wrap; }
  .doc-item:last-child { border-bottom: none; }
  .doc-icon { font-size: 24px; width: 34px; text-align: center; flex-shrink: 0; }
  .doc-info { flex: 1; min-width: 0; }
  .doc-name { font-weight: 600; font-size: 16px; color: var(--navy); }
  .doc-meta { font-size: 14px; color: var(--gray-400); margin-top: 2px; }
  .doc-note { font-size: 14px; color: var(--gray-600); margin-top: 2px; font-style: italic; }

  /* UPLOAD */
  .file-btns { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 8px; }
  .file-label { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: var(--radius-sm); cursor: pointer; font-size: 15px; font-weight: 600; transition: all .15s; }
  .file-label-primary   { background: var(--teal); color: #fff; }
  .file-label-primary:hover { background: var(--teal-l); }
  .file-label-secondary { background: var(--navy3); color: #fff; }
  #upFileName { font-size: 15px; color: var(--gray-400); font-style: italic; }
  #photoPreview { margin-top: 10px; display: none; }
  #photoPreviewImg { max-width: 180px; max-height: 140px; border-radius: var(--radius-sm); border: 1.5px solid var(--gray-200); object-fit: cover; }

  .form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .form-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }

  /* TABS */
  .tabs { display: flex; gap: 6px; margin-bottom: 20px; flex-wrap: wrap; }
  .tab { padding: 7px 16px; border-radius: var(--radius-sm); border: 1.5px solid var(--gray-200); background: #fff; font-size: 15px; font-weight: 600; color: var(--gray-600); cursor: pointer; transition: all .15s; }
  .tab.active { background: var(--navy); border-color: var(--navy); color: #fff; }
  .tab:hover:not(.active) { border-color: var(--teal); color: var(--teal); }

  /* ADMIN SIDEBAR NAV */
  .admin-layout { display: flex; align-items: flex-start; gap: 20px; }
  .admin-sidebar {
    display: flex; flex-direction: column; gap: 4px;
    width: 240px; flex-shrink: 0; background: var(--navy);
    border-radius: var(--radius-lg); padding: 60px 10px 16px;
    margin-bottom: 0 !important;
    box-shadow: var(--shadow-dark);
    border: 1px solid rgba(255,255,255,.1);
  }
  .admin-sidebar .tab {
    display: flex; align-items: center; gap: 14px;
    width: 100%; text-align: left; padding: 13px 16px;
    border-radius: var(--radius-sm); border: none; background: transparent;
    color: rgba(255,255,255,.66); font-size: 16px; font-weight: 500;
    letter-spacing: .1px; cursor: pointer;
    transition: background .15s ease, color .15s ease;
  }
  .admin-sidebar .tab i { font-size: 20px; width: 20px; text-align: center; flex-shrink: 0; }
  .admin-sidebar .tab.active { background: var(--teal); color: #fff; font-weight: 700; box-shadow: 0 2px 10px rgba(13,148,136,.35); }
  .admin-sidebar .tab:hover:not(.active) { background: rgba(255,255,255,.06); color: rgba(255,255,255,.9); }
  /* TRIAL — section breaks grouping related tabs in the sidebar. */
  .sidebar-section-break { height: 1px; background: rgba(255,255,255,.08); margin: 8px 10px; }
  .admin-main { flex: 1; min-width: 0; }
  /* Always visible now, not just under 900px — this is the one
     explicit, deliberate way to open the drawer, alongside hovering
     the left edge (see the mousemove listener in the page script). */
  .admin-sidebar-toggle {
    display: flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; flex-shrink: 0;
    background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.2);
    border-radius: var(--radius-sm); font-size: 20px; cursor: pointer;
  }
  .admin-sidebar-toggle i { font-size: 20px; }
  /* Promoted from the old @media(max-width:900px)-only drawer behavior
     to the default at every width — fixed to the viewport, off-screen
     by default, slides in via .mobile-open (the class name is historical;
     this is no longer mobile-specific). The 900px block below still
     exists and still sets the identical values, which is intentionally
     redundant rather than removed, so nothing about the narrow-screen
     behavior that was already proven out had to be touched to do this. */
  .admin-sidebar-col {
    position: fixed; top: 0; left: 0; height: 100vh; width: 280px;
    max-width: 85vw; z-index: 100; background: var(--navy);
    padding: 20px 14px; box-sizing: border-box; overflow-y: auto;
    transform: translateX(-100%); transition: transform .25s ease;
    box-shadow: var(--shadow-dark);
    display: flex; flex-direction: column; gap: 12px;
  }
  .admin-sidebar-col.mobile-open { transform: translateX(0); }
  .admin-sidebar-memo {
    margin: 12px 0 0; padding: 12px; background: var(--navy);
    box-shadow: 0 4px 24px rgba(0,0,0,.18); border: 1px solid rgba(255,255,255,.18);
    border-radius: 8px; width: 100%; box-sizing: border-box;
  }
  .admin-sidebar-backdrop {
    display: block; position: fixed; inset: 0; background: rgba(0,0,0,.5);
    z-index: 90; opacity: 0; pointer-events: none; transition: opacity .25s ease;
  }
  .admin-sidebar-backdrop.mobile-open { opacity: 1; pointer-events: auto; }

  @media (max-width: 900px) {
    /* Now a real child of <header> itself — a normal, in-flow flex
       item there, not fixed/floating over the page. That's both the
       standard placement (leftmost, in the persistent header) and
       what actually stopped it from interfering with page content,
       since it's no longer competing with .admin-main in a different
       flex container the way it was before. */
    .admin-sidebar-toggle { display: flex; }
    /* The drawer is position:fixed, anchored to the viewport itself —
       deliberately NOT participating in .admin-layout's flex flow at
       all at this width. Every earlier attempt at this (sticky, then
       relative, wrapped in a flex-direction:column parent) kept
       breaking because it was still entangled with the surrounding
       page layout in one way or another. Fixed positioning sidesteps
       that class of bug entirely — this element no longer cares what
       its parent or siblings are doing. Closed by default
       (translateX(-100%), off-screen to the left); .mobile-open
       slides it into view. */
    .admin-sidebar-col {
      position: fixed; top: 0; left: 0; height: 100vh; width: 280px;
      max-width: 85vw; z-index: 100; background: var(--navy);
      padding: 20px 14px; box-sizing: border-box; overflow-y: auto;
      transform: translateX(-100%); transition: transform .25s ease;
      box-shadow: var(--shadow-dark);
    }
    .admin-sidebar-col.mobile-open { transform: translateX(0); }
    .admin-sidebar-memo { width: 100%; }
    /* Dimmed backdrop behind the open drawer — also fixed to the
       viewport, sitting just below the drawer's own z-index. Clicking
       it closes the drawer (wired in the HTML itself), same standard
       pattern as any slide-out panel. */
    .admin-sidebar-backdrop {
      display: block; position: fixed; inset: 0; background: rgba(0,0,0,.5);
      z-index: 90; opacity: 0; pointer-events: none; transition: opacity .25s ease;
    }
    .admin-sidebar-backdrop.mobile-open {
      opacity: 1; pointer-events: auto;
    }
    /* The header's own height was fixed at 56px with no override at
       all — fine when its content fits one row, but at this width
       there's genuinely too much (hamburger, logo+name, user info,
       Admin badge, 3 buttons) to force into that row without severe
       text wrapping inside too-short flex items. Letting it grow and
       wrap naturally is the direct fix — quicker than relocating
       buttons into the drawer, which is the better long-term answer
       if this ever feels cramped again.  */
    :root, :root[data-header-size="large"], :root[data-header-size="xlarge"] { --hdr-h: 56px; --hdr-logo: 32px; --hdr-name: 17px; --hdr-sub: 13px; }
    :root[data-header-size] .logo-mark.has-logo { width: 32px; max-width: none; background: var(--teal); }
    :root[data-header-size] .logo-mark.has-logo img.hdr-logo-img { width: 100%; max-width: none; }
    header {
      position: static;
      height: auto; min-height: 56px; flex-wrap: wrap;
      padding: 10px 14px; gap: 8px 12px; row-gap: 8px;
    }
    /* Phone header, three slim rows instead of one tall stack:
         row 1  menu button + logo and company name   (this row stays on screen while you scroll)
         row 2  search, full width
         row 3  name, role and the buttons, in one line you can swipe sideways
       The left-hand wrapper is dissolved (display: contents) so its menu button and search box can be placed on their own. */
    header > div:first-child { display: contents !important; }
    header .admin-sidebar-toggle { order: 1; }
    header .logo { order: 2; flex: 1 1 0; min-width: 0; }
    header #hdrSearchWrap { order: 3; flex: 1 1 100%; width: 100% !important; max-width: none !important; }
    header > div:last-child { order: 4; flex: 1 1 100% !important; justify-content: flex-start !important; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    header > div:last-child::-webkit-scrollbar { display: none; }
    #hdrRight { flex-wrap: nowrap; white-space: nowrap; gap: 6px; }
    #hdrRight button { font-size: 13px !important; padding: 4px 10px !important; flex-shrink: 0; }
    #hdrUser { font-size: 14px; }
  }

  /* DARK PANEL */
  /* Panels used to share the exact same background color as the page
     behind them (--navy for both), relying on margin and a faint shadow
     alone to separate sections — not enough contrast in practice. Using
     the lighter --navy2 plus a visible border gives each section a real,
     defined edge instead of blurring into its neighbors and the page. */
  .dark-panel { background: var(--navy2); border: 1px solid rgba(255,255,255,.08); border-radius: var(--radius-lg); padding: 20px; color: #fff; margin-bottom: 20px; box-shadow: var(--shadow-dark); }
  .ov-stat-card { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.18); border-radius: var(--radius); padding: 18px 16px; text-align: center; }
  .ov-stat-num { font-size: 32px; font-weight: 800; color: #fff; line-height: 1; margin-bottom: 6px; letter-spacing: -.02em; }
  .ov-stat-label { font-size: 14px; color: rgba(255,255,255,.62); text-transform: uppercase; letter-spacing: .06em; }
  .ov-stat-card.ov-stat-warn .ov-stat-num { color: #f59e0b; }
  .ov-stat-card.ov-stat-danger .ov-stat-num { color: #ef4444; }
  .ov-attention-row { display: flex; justify-content: space-between; align-items: center; background: rgba(255,255,255,.03); border-radius: var(--radius-sm); padding: 10px 14px; font-size: 15px; }
  .ov-attention-row .ov-days-badge { font-weight: 700; font-size: 14px; padding: 3px 9px; border-radius: 12px; }
  .dark-panel h2 { font-size: 21px; color: var(--teal-l); margin-bottom: 16px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
  .panel-header-collapsible { display: flex; align-items: center; justify-content: space-between; cursor: pointer; user-select: none; }
  .panel-chevron { display: inline-block; font-size: 13px; color: inherit; opacity: .4; transition: transform .18s ease; margin-left: 10px; }
  .panel-chevron.open { transform: rotate(90deg); }
  .panel-body { overflow: hidden; }
  .panel-header-collapsible:hover { background: rgba(255,255,255,.04); }
  .panel-header-collapsible:focus-visible { outline: 2px solid var(--teal-l, #5eead4); outline-offset: 2px; }
  .panel-chevron-pill { opacity: 1; transform: none !important; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; letter-spacing: .02em; padding: 4px 11px; border-radius: 999px; border: 1px solid rgba(255,255,255,.28); color: rgba(255,255,255,.82); background: rgba(255,255,255,.06); white-space: nowrap; }
  .panel-chevron-pill::before { content: '\25B8'; display: inline-block; transition: transform .18s ease; }
  .panel-chevron-pill::after { content: 'Show'; }
  .panel-chevron-pill.open::before { transform: rotate(90deg); }
  .panel-chevron-pill.open::after { content: 'Hide'; }
  .panel-header-collapsible:hover .panel-chevron-pill { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.5); }
  .panel-toggle-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 12px; font-size: 13px; color: rgba(255,255,255,.7); }
  .panel-toggle-bar .btn-ghost { color: rgba(255,255,255,.85); border-color: rgba(255,255,255,.3); }
  .panel-toggle-bar .btn-ghost:hover { background: rgba(255,255,255,.1); }
  .panel-toggle-hint { margin-right: auto; }
  .btn-more-item { display: block; width: 100%; text-align: left; font-size: 15px; padding: 8px 10px; border: none; background: none; color: #fff; cursor: pointer; border-radius: var(--radius-sm); }
  .btn-more-item:hover { background: rgba(255,255,255,.08); }

  .filter-bar { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; align-items: center; }
  .filter-sel { padding: 6px 10px; border-radius: var(--radius-sm); border: 1px solid rgba(255,255,255,.15); background: rgba(255,255,255,.06); color: #fff; font-size: 15px; cursor: pointer; font-family: inherit; }
  .filter-sel option { background: var(--navy2); }

  /* PARTNER PORTAL — dark page background matching the rest of the
     platform, but individual staff cards stay light (white card, dark
     text) — same "light card floating on a dark page" pattern the
     Overview/Selko Admin stat-cards already use elsewhere, rather than
     making every element dark. Scoped to #partnerScreen specifically
     rather than redefining .panel/.doc-item globally, since the staff
     self-service screens share those same classes on their own
     fully-light pages. */
  #partnerScreen { background: var(--navy); min-height: 100vh; }
  #partnerScreen .page-header h1 { color: #fff; }
  #partnerScreen .page-header p { color: rgba(255,255,255,.66); }

  /* STAFF SCREEN ("My Credentials") — same dark-page/light-card
     treatment as #partnerScreen above, for the same reason: this
     screen still uses the original light theme's .panel/.stat-grid/
     .form-group classes, which read as plain and inconsistent next to
     the polished dark admin experience. Cards stay light (matching the
     established pattern elsewhere — Overview's own stat-cards are
     light cards on a dark page too), only the outer page background
     and header text change. */
  #staffScreen { background: var(--navy); min-height: 100vh; }
  #staffScreen .page-header h1 { color: #fff; }
  #staffScreen .page-header p { color: rgba(255,255,255,.66); }

  /* ADMIN SCREEN — the screen every admin actually spends most of
     their time in never got this treatment at all, unlike its two
     siblings above. Its .page-header sat on the plain body background
     (--offwhite) this whole time — always a real inconsistency, just
     far more visible once a company's own dark --navy branding makes
     everything else around it look intentional. Same fix, third time. */
  #adminScreen { background: var(--navy); min-height: 100vh; }
  #adminScreen .page-header h1 { color: #fff; }
  #adminScreen .page-header p { color: rgba(255,255,255,.66); }
  #partnerScreen input[type=text] { background: var(--navy2); border-color: rgba(255,255,255,.34); color: #fff; }
  #partnerScreen input[type=text]::placeholder { color: rgba(255,255,255,.55); }

  /* TABLE */
  .tbl-wrap { overflow-x: auto; }
  table { width: 100%; border-collapse: collapse; font-size: 15px; }
  th { text-align: left; padding: 8px 12px; color: var(--teal-l); font-weight: 600; border-bottom: 1px solid rgba(255,255,255,.14); white-space: nowrap; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; }
  td { padding: 10px 12px; border-bottom: 1px solid rgba(255,255,255,.09); color: #cbd5e1; vertical-align: middle; }
  tr:last-child td { border-bottom: none; }
  tr:hover td { background: rgba(255,255,255,.03); }
  .td-actions { display: flex; gap: 5px; flex-wrap: wrap; align-items: center; }

  /* BANNER */
  .banner { border-radius: var(--radius-sm); padding: 12px 16px; margin-bottom: 14px; display: none; }
  .banner-danger { background: rgba(239,68,68,.08); border: 1px solid rgba(239,68,68,.3); }
  .banner-title  { font-weight: 700; font-size: 15px; margin-bottom: 6px; color: #b91c1c; }
  .banner-list   { font-size: 14px; color: #7f1d1d; line-height: 1.9; }

  /* INLINE FORM */
  .inline-form { background: rgba(255,255,255,.05); border-radius: var(--radius); padding: 16px; margin-bottom: 14px; display: none; }
  .inline-label  { font-size: 15px; font-weight: 600; color: var(--teal-l); display: block; margin-bottom: 5px; }
  /* input.inline-input (not just .inline-input) — a plain class selector
     loses to the input[type=text] rule above, which is more specific
     because it combines an element type with an attribute selector.
     Tying the specificity here and relying on source order (this rule
     comes later in the file) is what actually makes white text win on
     dark-panel inputs, instead of falling back to gray-800 body text
     color meant for the light-background forms. */
  input.inline-input  { width: 100%; padding: 10px 12px; border-radius: var(--radius-sm); border: 1px solid rgba(255,255,255,.34); background: rgba(255,255,255,.07); color: #fff; font-size: 17px; font-family: 'Inter', inherit; transition: border-color .15s, background .15s; }
  textarea.inline-input { width: 100%; padding: 10px 12px; border-radius: var(--radius-sm); border: 1px solid rgba(255,255,255,.34); background: rgba(255,255,255,.07); color: #fff; font-size: 17px; font-family: 'Inter', inherit; line-height: 1.4; transition: border-color .15s, background .15s; }
  textarea.inline-input:focus { outline: none; border-color: var(--teal); background: rgba(255,255,255,.1); }
  input.inline-input:focus { outline: none; border-color: var(--teal); background: rgba(255,255,255,.1); }
  /* Placeholder text had no explicit color at all before this — it was
     falling back to a weak browser default that read as barely-there
     grey-blue against the dark input fill (the actual "blue on blue"
     effect). A deliberately lighter, warmer grey than the label color
     keeps it clearly distinguishable from real entered text (white)
     while still being genuinely readable, not just technically visible. */
  input.inline-input::placeholder { color: rgba(255,255,255,.58); opacity: 1; }

  /* Chrome (and other WebKit browsers) force their own light background
     and dark text onto autofilled inputs — a phone/address/zip field
     that gets flagged for autofill becomes unreadable the moment it's
     focused or filled, since neither the rules above nor a plain
     `background` override can touch WebKit's internal autofill layer.
     The only reliable override is an absurdly large inset box-shadow
     (paints over the autofill background WebKit applies) paired with
     -webkit-text-fill-color (the actual property WebKit reads for
     autofilled text color, instead of the normal `color` property). */
  .inline-input:-webkit-autofill,
  .inline-input:-webkit-autofill:hover,
  .inline-input:-webkit-autofill:focus {
    -webkit-text-fill-color: #fff;
    -webkit-box-shadow: 0 0 0px 1000px rgba(23,35,51,1) inset;
    box-shadow: 0 0 0px 1000px rgba(23,35,51,1) inset;
    transition: background-color 5000s ease-in-out 0s;
  }
  .inline-select { width: 100%; padding: 10px 12px; border-radius: var(--radius-sm); border: 1px solid rgba(255,255,255,.34); background: rgba(255,255,255,.07); color: #fff; font-size: 17px; font-family: inherit; cursor: pointer; }
  .inline-select option { background: var(--navy2); }
  .inline-grid-4 { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr auto; gap: 10px; align-items: end; }
  .inline-grid-3 { display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px; align-items: end; }

  /* TOAST */
  #toast { position: fixed; bottom: 24px; right: 24px; background: var(--navy); color: #fff; padding: 11px 18px; border-radius: var(--radius-sm); font-size: 15px; box-shadow: var(--shadow-dark); z-index: 9999; opacity: 0; transform: translateY(8px); transition: all .25s; pointer-events: none; border-left: 3px solid var(--teal); }
  #toast.show { opacity: 1; transform: translateY(0); }

  .up-status { font-size: 15px; padding: 8px 12px; border-radius: var(--radius-sm); margin: 8px 0; display: none; }
  .up-ok  { background: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0; }
  .up-err { background: #fef2f2; color: var(--danger); border: 1px solid #fecaca; }

  .spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid rgba(255,255,255,.3); border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; vertical-align: middle; }
  @keyframes spin { to { transform: rotate(360deg); } }

  .company-card { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: var(--radius); padding: 18px; }
  .company-card-head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 14px; }
  .company-card-name { font-size: 17px; font-weight: 700; color: #fff; margin-bottom: 3px; }
  .company-card-slug { font-size: 13px; color: rgba(255,255,255,.55); }
  .company-card-body { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
  .company-card-stat { background: rgba(255,255,255,.04); border-radius: var(--radius-sm); padding: 10px 12px; }
  .company-card-stat-num   { font-size: 22px; font-weight: 800; color: #fff; line-height: 1; }
  .company-card-stat-label { font-size: 13px; color: rgba(255,255,255,.58); margin-top: 2px; }
  .company-card-flags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
  .flag-pill { padding: 3px 10px; border-radius: 20px; font-size: 13px; font-weight: 700; }
  .flag-on  { background: rgba(13,148,136,.25); color: var(--teal-l); border: 1px solid rgba(13,148,136,.4); }
  .flag-off { background: rgba(255,255,255,.05); color: rgba(255,255,255,.55); border: 1px solid rgba(255,255,255,.1); }
  .company-card-actions { display: flex; gap: 6px; flex-wrap: wrap; }

  .empty-state { text-align: center; padding: 40px 20px; color: var(--gray-400); font-size: 16px; }
  .empty-icon  { font-size: 34px; margin-bottom: 10px; }

  @media (max-width: 640px) {
    .page { padding: 16px; }
    .form-grid-2 { grid-template-columns: 1fr; }
    .form-grid-3 { grid-template-columns: 1fr; }
    .inline-grid-4 { grid-template-columns: 1fr 1fr; }
    .inline-grid-3 { grid-template-columns: 1fr; }
    #ovStatsGrid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    /* These four rules previously BLEW UP headings to 32-48px on phones
       — the exact opposite of what a mobile media query should do.
       Removed entirely; headings now correctly inherit their normal
       desktop sizes (22px page titles, 15px panel titles, etc.) on
       small screens instead of overflowing them. */
  }

  /* Document types table: small "click to change" hints under the column
     headings of the columns that are actually buttons, and a subtle ⇄ on the
     badges that toggle when clicked. */
  .th-hint { display: block; font-size: 11px; font-weight: 400; text-transform: none; letter-spacing: 0; color: rgba(255,255,255,.5); margin-top: 1px; white-space: nowrap; }
  .toggle-glyph { font-size: 12px; opacity: .65; margin-left: 2px; }
  #docTypesTbody .badge[onclick]:hover { filter: brightness(1.25); }

  /* Getting-started deep links and the Settings "jump to" bar */
  .chip-btn { background: transparent; border: 1px solid rgba(255,255,255,.22); color: rgba(255,255,255,.82); border-radius: 20px; padding: 5px 12px; font-size: 14px; cursor: pointer; font-family: inherit; }
  .chip-btn:hover { border-color: var(--teal); color: #fff; background: rgba(20,184,166,.12); }
  .flash-highlight { animation: flashHighlight 2.2s ease-out; }
  @keyframes flashHighlight { 0% { box-shadow: 0 0 0 3px rgba(20,184,166,.9); } 100% { box-shadow: 0 0 0 3px rgba(20,184,166,0); } }


/* ── Settings sections: a title, one short help line capped at a readable
   width, then the controls. Replaces long full-width paragraphs. ── */
.set-block { padding: 18px 0; border-top: 1px solid rgba(255,255,255,.1); }
.set-block.first { border-top: 0; padding-top: 4px; }
.set-title { font-size: 16px; font-weight: 600; color: #fff; margin: 0 0 4px; }
.set-help { font-size: 14px; line-height: 1.5; color: rgba(255,255,255,.62); max-width: 66ch; margin: 0 0 12px; }
.set-note { font-size: 14px; line-height: 1.5; color: var(--gold); max-width: 66ch; margin: 0 0 14px; padding: 8px 12px; border-left: 3px solid var(--gold); background: rgba(255,255,255,.04); border-radius: 0 6px 6px 0; }
.set-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.set-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.set-row input.inline-input { flex: 1 1 180px; max-width: 240px; }
.set-check { display: flex; align-items: center; gap: 10px; font-size: 15px; color: #fff; padding: 6px 0; cursor: pointer; }
.set-msg { font-size: 13px; margin-top: 2px; }
.role-chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 6px 4px 14px; border-radius: 20px; font-weight: 600; font-size: 15px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.2); color: #fff; }
.role-chip button { background: none; border: 0; color: rgba(255,255,255,.6); cursor: pointer; font-size: 15px; line-height: 1; padding: 6px 8px; border-radius: 50%; min-width: 30px; min-height: 30px; }
.role-chip button:hover { background: rgba(255,255,255,.14); color: #fff; }
.toggle-chip { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 20px; font-size: 15px; cursor: pointer; font-weight: 600; background: transparent; color: rgba(255,255,255,.7); border: 1px solid rgba(255,255,255,.25); }
.toggle-chip.on { background: var(--teal); color: #fff; border-color: var(--teal); }
@media (max-width: 600px) { .set-row input.inline-input { max-width: none; } .set-row .btn { flex: 1 1 100%; } }

/* Wide screens: explanation on the left, controls on the right, so the page
   isn't a narrow column with a blank right half. */
.set-block { display: grid; grid-template-columns: 1fr; gap: 4px 40px; }
.set-text .set-help { margin-bottom: 12px; }
.set-text .set-note { margin-bottom: 0; }
@media (min-width: 900px) {
  .set-block { grid-template-columns: minmax(260px, 380px) 1fr; align-items: start; padding: 22px 0; }
  .set-controls { padding-top: 2px; }
  .set-text .set-help, .set-text .set-note { margin-bottom: 12px; }
}
.set-row .btn { padding: 11px 18px; font-size: 15px; }
.role-chip button { display: inline-flex; align-items: center; justify-content: center; }

/* Staff profile, Info page: sub-tabs. Drawn as real buttons (box, border, hover, filled when selected) so they read as clickable. */
.fp-subtabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; padding-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,.12); }
.fp-subtab { display: inline-flex; align-items: center; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.28); border-radius: 8px; color: #fff; font-size: 15px; font-weight: 600; padding: 10px 18px; cursor: pointer; transition: background .15s, border-color .15s; }
.fp-subtab:hover { background: rgba(255,255,255,.13); border-color: rgba(255,255,255,.5); }
.fp-subtab:focus-visible { outline: 2px solid var(--teal-l); outline-offset: 2px; }
.fp-subtab.on { background: var(--teal); border-color: var(--teal); color: #fff; box-shadow: 0 1px 6px rgba(13,148,136,.45); cursor: default; }
.fp-pane { display: none; }
.fp-pane.on { display: block; }

/* Professional roles: one table, one row per role */
.roles-table-wrap { overflow: visible; margin: 4px 0 14px; border: 1px solid rgba(255,255,255,.12); border-radius: 10px; }
.roles-table { width: 100%; border-collapse: collapse; min-width: 560px; }
.roles-table th { text-align: left; font-size: 13px; font-weight: 700; color: #fff; padding: 12px 14px; background: rgba(255,255,255,.04); border-bottom: 1px solid rgba(255,255,255,.12); vertical-align: bottom; }
.roles-table .rt-sub { display: block; font-size: 12px; font-weight: 400; color: rgba(255,255,255,.55); margin-top: 3px; line-height: 1.4; max-width: 28ch; }
.roles-table td { padding: 10px 14px; border-top: 1px solid rgba(255,255,255,.08); vertical-align: middle; }
.roles-table tbody tr:first-child td { border-top: 0; }
.roles-table tbody tr:hover td { background: rgba(255,255,255,.03); }
.roles-table .rt-role { font-size: 17px; font-weight: 700; color: #fff; }
.roles-table .rt-act { text-align: right; white-space: nowrap; }
.roles-table .rt-act .btn { color: rgba(255,255,255,.85); border-color: rgba(255,255,255,.25); margin-left: 6px; }
.roles-table .rt-act .rt-remove { color: #fca5a5; border-color: rgba(252,165,165,.35); }
.roles-table.hide-caqh .rt-caqh, .roles-table.hide-rx .rt-rx { display: none; }
.role-switch { display: inline-flex; align-items: center; gap: 10px; background: none; border: 0; padding: 4px 0; cursor: pointer; color: rgba(255,255,255,.65); font-size: 14px; font-weight: 600; }
.role-switch .rs-knob { position: relative; width: 40px; height: 22px; border-radius: 11px; background: rgba(255,255,255,.18); transition: background .15s; flex: none; }
.role-switch .rs-knob::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s; }
.role-switch.on .rs-knob { background: var(--teal); }
.role-switch.on .rs-knob::after { transform: translateX(18px); }
.role-switch.on { color: #fff; }
.role-switch:focus-visible { outline: 2px solid var(--teal-l, #5eead4); outline-offset: 3px; border-radius: 6px; }
.roles-add-row { margin-top: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.roles-table th { white-space: normal; }
.roles-table .rt-sub { white-space: normal; text-transform: none; letter-spacing: normal; font-family: inherit; font-size: 12.5px; max-width: 30ch; }

.help-tip { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; margin-left: 6px; border-radius: 50%; border: 1px solid rgba(255,255,255,.45); color: rgba(255,255,255,.85); font-size: 12px; font-weight: 700; cursor: help; vertical-align: middle; text-transform: none; letter-spacing: 0; font-family: inherit; }
.help-tip:hover, .help-tip:focus { background: rgba(255,255,255,.16); outline: none; border-color: #fff; }
.help-tip::after { content: attr(data-tip); display: none; position: absolute; top: calc(100% + 8px); left: -8px; width: 270px; padding: 10px 12px; border-radius: 8px; background: #0b1220; border: 1px solid rgba(255,255,255,.25); box-shadow: 0 8px 24px rgba(0,0,0,.5); color: rgba(255,255,255,.9); font-size: 13px; font-weight: 400; line-height: 1.45; text-align: left; white-space: normal; z-index: 20; }
.help-tip:hover::after, .help-tip:focus::after { display: block; }
.roles-table .rt-sub { display: none; }
@media (max-width: 700px) { .roles-table-wrap { overflow-x: auto; } }
.roles-table thead th:first-child { border-top-left-radius: 9px; } .roles-table thead th:last-child { border-top-right-radius: 9px; }

.seg-toggle { display: inline-flex; border: 1px solid rgba(255,255,255,.25); border-radius: 8px; overflow: hidden; }
.seg-toggle button { background: transparent; color: rgba(255,255,255,.75); border: 0; padding: 8px 14px; font-size: 14px; font-weight: 600; cursor: pointer; }
.seg-toggle button + button { border-left: 1px solid rgba(255,255,255,.25); }
.seg-toggle button.seg-on { background: var(--teal); color: #fff; }

/* Sections merged inside one Settings panel */
.set-sub { margin: 0 0 18px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.1); }
.panel-body > .set-sub:first-child { border-top: 0; padding-top: 0; }
.set-sub-title { font-size: 18px; font-weight: 600; color: #fff; margin: 0 0 10px; }

/* LIGHT THEME. The app is built light-on-navy, so Light flips the whole page
   (including inline colors) and puts photos, logos and previews back the right
   way round. Dark is the normal look and needs no rules. */
html[data-theme="light"] { filter: invert(1) hue-rotate(180deg); background: #fff; }
html[data-theme="light"] img, html[data-theme="light"] video, html[data-theme="light"] canvas,
html[data-theme="light"] iframe, html[data-theme="light"] embed, html[data-theme="light"] object,
html[data-theme="light"] .keep-colors { filter: invert(1) hue-rotate(180deg); }
#hdrTheme { background: transparent; border: 1px solid rgba(255,255,255,.2); color: rgba(255,255,255,.7); padding: 4px 12px; border-radius: var(--radius-sm); font-size: 14px; cursor: pointer; transition: all .15s; white-space: nowrap; }
#hdrTheme:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.35); }
/* Neutral surfaces so Light reads as clean white and light grey, not tinted blue. */
html[data-theme="light"] { --navy: #000000; --navy2: #0b0b0b; --navy3: #1c1c1c; }
/* The sign-in page is already a designed light/dark split, so it keeps that look in both themes. */
html[data-theme="light"] #loginScreen { filter: invert(1) hue-rotate(180deg); }
html[data-theme="light"] #loginScreen { --navy: #0f1f2e; --navy2: #172333; --navy3: #1e2d3d; }
html[data-theme="light"] #loginScreen img { filter: none; }