/* ==========================================================================
   THREADR · Apple UI layer (pmt2_25Sept)
   --------------------------------------------------------------------------
   A visual-only layer that sits ON TOP of styles.css. No class names, markup
   or behaviour change: it re-points the design tokens and restyles existing
   components to Apple's system design (HIG + Liquid Glass), keeping the
   Threadr green as the single accent.
     · clarity   — SF / Inter type, near-black text, sentence-case labels
     · deference — glass only on chrome (sidebar, bars, menus, toasts)
     · depth     — soft low shadows, concentric radii, 8-pt rhythm
   To roll back the whole restyle, delete the <link> to apple.css in
   index.html / login.html. Every selector below is prefixed with
   :root[data-theme] so it outranks the matching rule in styles.css
   (index.html and login.html always set data-theme before first paint).
   ========================================================================== */

/* ---------------------------------------------------------------- tokens */
:root[data-theme] {
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Inter", "Segoe UI Variable Text", "Segoe UI", "Helvetica Neue", Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI Variable Display", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius: 18px;
  --radius-lg: 22px;
  --radius-pill: 980px;

  --ease: cubic-bezier(.4, 0, .2, 1);
  --ease-out: cubic-bezier(.4, 0, .2, 1);
  --ease-spring: cubic-bezier(.32, .72, 0, 1);
  --dur-fast: .12s;
  --dur: .24s;
  --dur-slow: .34s;

  --sidebar-w: 236px;
  --topbar-h: 56px;
}

:root[data-theme="light"] {
  --bg: #F5F5F7;
  --bg-2: #EFEFF2;
  --panel: #FFFFFF;
  --panel-2: #F5F5F7;
  --panel-3: #FFFFFF;
  --fill: #E8E8ED;
  --fill-hover: #DCDCE1;
  --fill-search: rgba(118, 118, 128, .12);
  --row-hover: #F7F7F9;
  --row-selected: #E8F4EF;
  --row-expand: #FAFAFB;

  --sidebar-bg: rgba(255, 255, 255, .72);
  --sidebar-bg-2: rgba(255, 255, 255, .72);
  --sidebar-fg: #1D1D1F;
  --sidebar-fg-dim: #6E6E73;
  --sidebar-fg-strong: #1D1D1F;
  --sidebar-active: rgba(10, 132, 102, .12);
  --sidebar-hover: rgba(0, 0, 0, .045);

  --primary: #0A8466;          /* Threadr green, deepened so white text passes AA */
  --primary-600: #0B8F6E;      /* hover: a subtle lighten */
  --primary-700: #097A5E;      /* pressed */
  --primary-ink: #FFFFFF;
  --accent: #0A7C5E;           /* links / selected ink */
  --accent-2: #086B51;
  --accent-soft: rgba(16, 163, 127, .12);
  --accent-glow: rgba(16, 163, 127, .20);
  --focus-ring: rgba(10, 132, 102, .32);

  --text: #1D1D1F;
  --text-strong: #1D1D1F;
  --muted: #6E6E73;
  --muted-2: #86868B;

  --border: rgba(0, 0, 0, .09);
  --border-strong: rgba(0, 0, 0, .14);
  --border-faint: rgba(0, 0, 0, .055);

  --green: #248A3D;
  --green-soft: rgba(52, 199, 89, .14);
  --red: #D70015;
  --amber: #B25000;
  --purple: #8944AB;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .06);
  --shadow-md: 0 4px 24px rgba(0, 0, 0, .08);
  --shadow-lg: 0 12px 48px rgba(0, 0, 0, .14);
  --glow: none;

  --glass-bg: rgba(255, 255, 255, .72);
  --glass-bg-strong: rgba(250, 250, 252, .86);
  --hud-bg: rgba(255, 255, 255, .94);
  --glass-border: rgba(0, 0, 0, .08);
  --glass-hi: rgba(255, 255, 255, .85);
  --scrim: rgba(0, 0, 0, .28);
  --chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236E6E73' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  color-scheme: light;
}

:root[data-theme="dark"] {
  --bg: #000000;
  --bg-2: #0E0E10;
  --panel: #1C1C1E;
  --panel-2: #2C2C2E;
  --panel-3: #1F1F22;
  --fill: #2C2C2E;
  --fill-hover: #3A3A3C;
  --fill-search: rgba(118, 118, 128, .24);
  --row-hover: #242426;
  --row-selected: #12261F;
  --row-expand: #161618;

  --sidebar-bg: rgba(28, 28, 30, .72);
  --sidebar-bg-2: rgba(28, 28, 30, .72);
  --sidebar-fg: #F5F5F7;
  --sidebar-fg-dim: #98989D;
  --sidebar-fg-strong: #FFFFFF;
  --sidebar-active: rgba(52, 196, 154, .18);
  --sidebar-hover: rgba(255, 255, 255, .06);

  --primary: #0C9170;
  --primary-600: #0E9A77;
  --primary-700: #0A8466;
  --primary-ink: #FFFFFF;
  --accent: #34C49A;
  --accent-2: #5ED3AE;
  --accent-soft: rgba(52, 196, 154, .16);
  --accent-glow: rgba(52, 196, 154, .24);
  --focus-ring: rgba(52, 196, 154, .45);

  --text: #F5F5F7;
  --text-strong: #FFFFFF;
  --muted: #A1A1A6;
  --muted-2: #8D8D93;

  --border: rgba(255, 255, 255, .10);
  --border-strong: rgba(255, 255, 255, .16);
  --border-faint: rgba(255, 255, 255, .06);

  --green: #30D158;
  --green-soft: rgba(48, 209, 88, .16);
  --red: #FF453A;
  --amber: #FF9F0A;
  --purple: #BF5AF2;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .5);
  --shadow-md: 0 8px 30px rgba(0, 0, 0, .5);
  --shadow-lg: 0 20px 60px rgba(0, 0, 0, .65);
  --glow: none;

  --glass-bg: rgba(28, 28, 30, .72);
  --glass-bg-strong: rgba(36, 36, 38, .86);
  --hud-bg: rgba(44, 44, 46, .94);
  --glass-border: rgba(255, 255, 255, .10);
  --glass-hi: rgba(255, 255, 255, .08);
  --scrim: rgba(0, 0, 0, .5);
  --chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23A1A1A6' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  color-scheme: dark;
}

/* ---------------------------------------------------------------- base */
:root[data-theme] body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  font-size: 14px; line-height: 1.43; letter-spacing: -.01em;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
:root[data-theme] ::selection { background: var(--accent-soft); color: inherit; }
:root[data-theme] ::-webkit-scrollbar-thumb { background: rgba(128, 128, 136, .35); border-radius: 8px; border: 3px solid transparent; background-clip: content-box; }
:root[data-theme] ::-webkit-scrollbar-thumb:hover { background: rgba(128, 128, 136, .55); background-clip: content-box; }
:root[data-theme] :focus-visible { outline: none; }
:root[data-theme] a:focus-visible, :root[data-theme] button:focus-visible, :root[data-theme] [tabindex]:focus-visible { box-shadow: 0 0 0 4px var(--focus-ring); }

/* No all-caps eyebrow labels (Apple: sentence case). Covers inline styles too. */
:root[data-theme] [style*="text-transform:uppercase"], :root[data-theme] [style*="text-transform: uppercase"] { text-transform: none !important; letter-spacing: -.005em !important; }

/* ---------------------------------------------------------------- form controls */
:root[data-theme] input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]),
:root[data-theme] select, :root[data-theme] textarea {
  /* fill + border come from the tokens via styles.css; this rule only sets the
     shape, so lighter-weight field rules (search fields) can restyle the fill */
  font-family: inherit; color: var(--text);
  border-radius: 10px;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
:root[data-theme] input:not([type=checkbox]):not([type=radio]):focus, :root[data-theme] select:focus, :root[data-theme] textarea:focus {
  border-color: var(--primary); box-shadow: 0 0 0 4px var(--focus-ring); outline: none;
}
:root[data-theme] ::placeholder { color: var(--muted-2); opacity: 1; }
:root[data-theme] input[type=checkbox], :root[data-theme] input[type=radio], :root[data-theme] .checkbox { accent-color: var(--primary); }
/* Pop-up buttons: one consistent chevron on every single-choice select. The
   longhands are !important so the many `background:` shorthands in styles.css
   can't wipe the chevron and leave a select with no arrow. */
:root[data-theme] select:not([multiple]) {
  -webkit-appearance: none !important; appearance: none !important;
  background-image: var(--chev) !important;
  background-repeat: no-repeat !important;
  background-position: right 11px center !important;
  background-size: 10px 6px !important;
  padding-right: 30px !important;
}
:root[data-theme] select option, :root[data-theme] select optgroup { background: var(--panel); color: var(--text); }

:root[data-theme] .field { gap: 6px; }
:root[data-theme] .field label { font-size: 13px; font-weight: 500; color: var(--muted); letter-spacing: -.005em; }
:root[data-theme] .field input, :root[data-theme] .field select, :root[data-theme] .field textarea { padding: 9px 12px; border-radius: 10px; background-color: var(--panel-3); border-color: var(--border-strong); }
:root[data-theme] .field input:focus, :root[data-theme] .field select:focus, :root[data-theme] .field textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 4px var(--focus-ring); }
:root[data-theme] .form-grid { gap: 16px 20px; }
:root[data-theme] .form-group-title {
  text-transform: none; letter-spacing: -.01em; font-size: 15px; font-weight: 600; color: var(--text-strong);
  border-top: 0; margin-top: 14px; padding-top: 0;
}
:root[data-theme] .form-group-title:first-child { margin-top: 0; }
:root[data-theme] .field .ms-opt {
  border-radius: var(--radius-pill); border: 1px solid transparent; background: var(--fill);
  padding: 7px 13px; font-weight: 500; color: var(--text);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
:root[data-theme] .field .ms-opt:hover { border-color: transparent; background: var(--fill-hover); }
:root[data-theme] .field .ms-opt input { min-height: 0; }
:root[data-theme] .field .ms-opt:has(input:checked) { background: var(--accent-soft); border-color: transparent; color: var(--accent-2); font-weight: 600; }

/* ---------------------------------------------------------------- buttons
   One button, styled by emphasis: filled (primary, one per view), gray
   (default), plain (ghost), tinted (danger). Capsule shape, 44pt on touch,
   press = scale(.97), focus = soft ring, disabled = low opacity. */
:root[data-theme] .btn {
  gap: 6px; padding: 7px 15px; min-height: 34px;
  border-radius: var(--radius-pill); border: 1px solid transparent;
  background: var(--fill); color: var(--text);
  font-family: inherit; font-size: 13.5px; font-weight: 500; letter-spacing: -.01em; line-height: 1.2;
  box-shadow: none; filter: none;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform .12s var(--ease), opacity var(--dur) var(--ease);
}
:root[data-theme] .btn:hover { background: var(--fill-hover); border-color: transparent; color: var(--text); }
:root[data-theme] .btn:active { transform: scale(.97); }
:root[data-theme] .btn:focus-visible { box-shadow: 0 0 0 4px var(--focus-ring); }
:root[data-theme] .btn:disabled, :root[data-theme] .btn[disabled] { opacity: .36; cursor: default; transform: none; }

:root[data-theme] .btn.primary, :root[data-theme] .btn.accent {
  background: var(--primary); background-image: none; color: var(--primary-ink);
  border-color: transparent; font-weight: 600; box-shadow: none; filter: none;
}
:root[data-theme] .btn.primary:hover, :root[data-theme] .btn.accent:hover {
  background: var(--primary-600); background-image: none; color: var(--primary-ink);
  border-color: transparent; box-shadow: none; transform: none; filter: none;
}
:root[data-theme] .btn.primary:active, :root[data-theme] .btn.accent:active { background: var(--primary-700); transform: scale(.97); box-shadow: none; }

:root[data-theme] .btn.ghost { background: transparent; color: var(--text); border-color: transparent; }
:root[data-theme] .btn.ghost:hover { background: var(--fill); color: var(--text-strong); }

:root[data-theme] .btn.danger { background: rgba(215, 0, 21, .08); color: var(--red); border-color: transparent; }
:root[data-theme] .btn.danger:hover { background: rgba(215, 0, 21, .14); color: var(--red); border-color: transparent; }
:root[data-theme="dark"] .btn.danger { background: rgba(255, 69, 58, .14); }
:root[data-theme="dark"] .btn.danger:hover { background: rgba(255, 69, 58, .22); }

:root[data-theme] .btn.sm { padding: 5px 12px; min-height: 28px; font-size: 12.5px; }
:root[data-theme] .btn-icon, :root[data-theme] .btn.btn-icon { width: 34px; height: 34px; min-height: 0; padding: 0; justify-content: center; border-radius: 50%; }
:root[data-theme] .btn.btn-icon.sm, :root[data-theme] .btn-icon.btn.sm { width: 30px; height: 30px; }

/* "+" create button — a plain toolbar glyph in the accent (no filled circle). */
:root[data-theme] .btn-add-round {
  width: 40px; height: 40px; border-radius: 50%; background: transparent; background-image: none; color: var(--accent);
  box-shadow: none; filter: none;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), transform .12s var(--ease);
}
:root[data-theme] .btn-add-round svg { width: 26px; height: 26px; }
:root[data-theme] .btn-add-round:hover { background: var(--fill-search); color: var(--accent); filter: none; box-shadow: none; }
:root[data-theme] .btn-add-round:active { transform: scale(.92); background: var(--fill); }
:root[data-theme] .btn-add-round:focus-visible { box-shadow: 0 0 0 4px var(--focus-ring); }

/* ---------------------------------------------------------------- app shell · sidebar */
:root[data-theme] .sidebar {
  background: var(--sidebar-bg);
  -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%);
  color: var(--sidebar-fg);
  border-right: 1px solid var(--border-faint);
}
@media (min-width: 901px) {
  /* Floating inset sidebar (macOS 26): a rounded glass panel beside the content. */
  :root[data-theme] .sidebar {
    margin: 10px 0 10px 10px; height: calc(100vh - 20px); top: 10px;
    border: 1px solid var(--glass-border); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm), inset 0 1px 0 var(--glass-hi);
    overflow: hidden;
  }
}
:root[data-theme] .brand { height: 58px; padding: 14px 16px; border-bottom: 0; gap: 9px; }
/* The mark is a light ribbon drawn for dark grounds: sit it on a dark app-icon
   tile (like the favicon) so it reads on the light sidebar too. */
:root[data-theme] .brand .logo { box-shadow: none; border-radius: 9px; background: #1D1D1F; }
:root[data-theme] .brand .logo img { width: 78%; height: 78%; }
:root[data-theme="dark"] .brand .logo { background: #2C2C2E; }
:root[data-theme] .brand .brand-word, :root[data-theme] .brand .brand-text { color: var(--sidebar-fg-strong); }
:root[data-theme] .nav { padding: 4px 10px 10px; }
:root[data-theme] .nav-section {
  margin: 18px 10px 5px; font-size: 11.5px; font-weight: 600; letter-spacing: 0; text-transform: none;
  color: var(--sidebar-fg-dim);
}
:root[data-theme] .nav-item {
  gap: 10px; padding: 7px 10px; margin-bottom: 2px; border-radius: 10px; border: 0;
  font-size: 13.5px; font-weight: 500; color: var(--sidebar-fg); letter-spacing: -.01em;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), transform .12s var(--ease);
}
:root[data-theme] .nav-item:hover { background: var(--sidebar-hover); color: var(--sidebar-fg-strong); }
:root[data-theme] .nav-item.active { background: var(--sidebar-active); color: var(--sidebar-fg-strong); font-weight: 600; border: 0; }
:root[data-theme] .nav-item.active::before { display: none; }
:root[data-theme] .nav-item > svg { color: var(--accent); }
:root[data-theme] .nav-item.active > svg { color: var(--accent); }
:root[data-theme] .nav-item .count {
  background: transparent; color: var(--sidebar-fg-dim); font-size: 12px; font-weight: 500;
  padding: 0 2px; font-variant-numeric: tabular-nums;
}
:root[data-theme] .nav-item.scan {
  margin: 8px 2px 10px; padding: 11px 18px; border-radius: var(--radius-pill);
  background: var(--primary); background-image: none; color: #fff; border: 0;
  font-size: 15px; font-weight: 600; box-shadow: none;
}
:root[data-theme] .nav-item.scan:hover { background: var(--primary-600); color: #fff; box-shadow: none; filter: none; }
:root[data-theme] .nav-item.scan > svg { color: #fff; }
:root[data-theme] .sidebar-foot { border-top: 1px solid var(--border-faint); padding: 10px 12px; margin: 0; }
:root[data-theme] .sidebar-foot:hover { background: var(--sidebar-hover); }
:root[data-theme] .sidebar-foot .sf-name { color: var(--sidebar-fg-strong); font-size: 13px; }
:root[data-theme] .sidebar-foot .sf-role, :root[data-theme] .sidebar-foot .sf-caret { color: var(--sidebar-fg-dim); }
:root[data-theme] .avatar { background: var(--primary); background-image: none; font-weight: 600; }

/* ---------------------------------------------------------------- app shell · top bar + content */
:root[data-theme] .topbar {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--border-faint);
}
:root[data-theme] .content { padding: 22px 28px; }
:root[data-theme] .content.idx-scroll { padding-bottom: 6px; }
/* There is no top bar, so the records list runs to the bottom of the window
   (the old height left a 56px gap under the pager). */
@media (min-width: 901px) {
  :root[data-theme] .content.idx-scroll { height: 100vh; }
}
:root[data-theme] .page-head { gap: 12px; margin-bottom: 16px; }
:root[data-theme] .page-title {
  font-family: var(--font-display); font-size: 26px; font-weight: 700; letter-spacing: -.022em;
  color: var(--text-strong); gap: 10px;
}
:root[data-theme] .page-title .obj-ico { width: 32px; height: 32px; border-radius: 9px; }
:root[data-theme] .subtle { color: var(--muted); }
:root[data-theme] .hint { color: var(--muted); font-size: 12.5px; }
:root[data-theme] .idx-count {
  background: transparent; border: 0; padding: 0 2px; font-size: 15px; font-weight: 500;
  color: var(--muted-2); font-family: var(--font-display); font-variant-numeric: tabular-nums;
}

/* Page transition: a short cross-fade that answers the navigation. */
@keyframes apFade { from { opacity: 0; } to { opacity: 1; } }
:root[data-theme] .content.route-anim { animation: apFade .22s var(--ease); }

/* ---------------------------------------------------------------- surfaces */
:root[data-theme] .card {
  background: var(--panel); border: 1px solid var(--border-faint);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
}
:root[data-theme] .card.pad { padding: 20px; }
:root[data-theme] .card.clickable, :root[data-theme] .row-click { transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
:root[data-theme] .card.clickable:hover, :root[data-theme] .kpi.clickable:hover, :root[data-theme] .row-click:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--border-faint); }
:root[data-theme] .card.clickable:active, :root[data-theme] .kpi.clickable:active, :root[data-theme] .row-click:active { transform: scale(.99); }
:root[data-theme] .divider { background: var(--border-faint); }
:root[data-theme] code { background: var(--fill-search); color: var(--text); border-radius: 6px; font-family: var(--mono); }
:root[data-theme] pre { background: var(--panel-2) !important; border-color: var(--border-faint) !important; color: var(--text) !important; border-radius: 12px; }

/* Dashboard tiles: hero numbers, no washes. */
:root[data-theme] .kpis { gap: 16px; margin-bottom: 24px; }
:root[data-theme] .kpi {
  background: var(--panel); border: 1px solid var(--border-faint); border-radius: var(--radius);
  padding: 18px 18px 16px; box-shadow: var(--shadow-sm); transform: none;
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
:root[data-theme] .kpi:hover { transform: none; box-shadow: var(--shadow-sm); border-color: var(--border-faint); }
:root[data-theme] .kpi::after { display: none; }
:root[data-theme] .kpi .k-label { font-size: 13px; font-weight: 500; color: var(--muted); text-transform: none; letter-spacing: -.005em; }
:root[data-theme] .kpi .k-val {
  font-family: var(--font-display); font-size: 32px; font-weight: 700; letter-spacing: -.025em;
  font-variant-numeric: tabular-nums; margin-top: 6px; color: var(--text-strong);
}
:root[data-theme] .kpi .k-ico { width: 32px; height: 32px; border-radius: 9px; color: #fff; }
:root[data-theme] .donut-total { font-family: var(--font-display); font-weight: 700; font-variant-numeric: tabular-nums; }
:root[data-theme] .donut-sub { text-transform: none; letter-spacing: 0; font-size: 10px; }
:root[data-theme] .donut-leg .val { font-family: var(--font); font-variant-numeric: tabular-nums; font-weight: 600; }

/* Record header (contact card style). */
:root[data-theme] .profile-hero { border-radius: var(--radius-lg); border: 1px solid var(--border-faint); box-shadow: var(--shadow-sm); padding: 24px; }
:root[data-theme] .profile-hero::before { display: none; }
:root[data-theme] .ph-avatar { width: 64px; height: 64px; border-radius: 50%; font-weight: 600; font-size: 24px; box-shadow: none; }
:root[data-theme] .ph-name { font-family: var(--font-display); font-size: 28px; font-weight: 700; letter-spacing: -.025em; }
:root[data-theme] .ph-sub { color: var(--muted); }
:root[data-theme] .ph-q { border-radius: 50%; background: var(--fill); border: 0; color: var(--accent); }
:root[data-theme] .ph-q:hover { background: var(--fill-hover); color: var(--accent); transform: none; box-shadow: none; }
:root[data-theme] .ph-qbtn {
  border-radius: 12px; border: 0; background: var(--fill); color: var(--accent);
  font-weight: 500; padding: 9px 15px;
  transition: background var(--dur-fast) var(--ease), transform .12s var(--ease);
}
:root[data-theme] .ph-qbtn:hover { background: var(--fill-hover); border-color: transparent; }
:root[data-theme] .ph-qbtn:active { transform: scale(.97); }
:root[data-theme] .ph-qbtn.accent { background: var(--accent-soft); color: var(--accent-2); border: 0; }
:root[data-theme] .ph-qbtn.accent:hover { background: rgba(16, 163, 127, .18); }
:root[data-theme] .ph-actions { border-top: 1px solid var(--border-faint); gap: 8px; }
:root[data-theme] .rec-h, :root[data-theme] .rec-side-card .rec-side-h {
  text-transform: none; letter-spacing: -.01em; font-size: 15px; font-weight: 600; color: var(--text-strong);
}
:root[data-theme] .rec-side-card .rec-side-h .hint { font-weight: 400; }
:root[data-theme] .rec-side { gap: 16px; }
:root[data-theme] .assoc-row2 { border-bottom: 1px solid var(--border-faint); padding: 9px 0; }
:root[data-theme] .assoc-row2 a { color: var(--text-strong); font-weight: 500; }
/* Detail rows: long values (emails, URLs) wrap inside the card instead of
   pushing it past the screen edge. */
:root[data-theme] .rec-grid > div, :root[data-theme] .rec-grid > aside { min-width: 0; }
:root[data-theme] .rec-grid .card.pad > div[style*="display:flex;padding:8px 0"] > div[style*="flex:1"] { min-width: 0; overflow-wrap: anywhere; }
:root[data-theme] .rec-grid .card.pad > div[style*="display:flex;padding:8px 0"] { border-bottom-color: var(--border-faint) !important; }
:root[data-theme] .rec-grid .card.pad > div[style*="display:flex;padding:8px 0"] > div[style*="width:150px"] { font-weight: 500 !important; }
:root[data-theme] .rec-cardphoto .rec-card-img { border-radius: 12px; border-color: var(--border-faint); }

/* Timeline */
:root[data-theme] .tl-item::before { background: var(--border); width: 1.5px; }
:root[data-theme] .tl-dot { box-shadow: 0 0 0 4px var(--panel); }
:root[data-theme] .tl-title { font-weight: 600; }
:root[data-theme] .tl-when { font-family: var(--font); font-variant-numeric: tabular-nums; color: var(--muted-2); }
:root[data-theme] .tl-note, :root[data-theme] .tl-change { background: var(--panel-2); border: 0; border-radius: 12px; }

/* ---------------------------------------------------------------- tabs, chips, segmented */
:root[data-theme] .tabs { border-bottom: 0; gap: 4px; align-items: center; padding: 2px 0 4px; }
:root[data-theme] .idx-tabsrow { align-items: center; }
:root[data-theme] .tab {
  top: 0; padding: 6px 13px; border: 0; border-radius: var(--radius-pill);
  font-size: 13.5px; font-weight: 500; color: var(--muted); letter-spacing: -.01em;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
:root[data-theme] .tab:hover { background: var(--fill-search); color: var(--text); }
:root[data-theme] .tab.active { background: var(--fill); color: var(--text-strong); border: 0; font-weight: 600; }
:root[data-theme] .tab .tcount { color: var(--muted-2); font-variant-numeric: tabular-nums; }
:root[data-theme] .tab.add { color: var(--muted-2); padding: 6px 10px; }

:root[data-theme] .chip {
  gap: 6px; padding: 5px 12px; border-radius: var(--radius-pill);
  border: 1px solid transparent; background: var(--fill-search); color: var(--text);
  font-size: 13px; font-weight: 500;
  transition: background var(--dur-fast) var(--ease);
}
:root[data-theme] .chip:hover { background: var(--fill); border-color: transparent; }
:root[data-theme] .chip.solid { background: var(--accent-soft); color: var(--accent-2); border-color: transparent; }
:root[data-theme] .chip .x { color: var(--muted); }

/* Segmented controls (iOS): a gray track, the selected segment is a raised surface. */
:root[data-theme] .seg { background: var(--fill-search); border: 0; border-radius: 9px; padding: 2px; gap: 2px; }
:root[data-theme] .seg button { border-radius: 7px; color: var(--text); font-weight: 500; padding: 5px 13px; transition: background var(--dur) var(--ease); }
:root[data-theme] .seg button:hover { background: transparent; color: var(--text); }
:root[data-theme] .seg button.on { background: var(--panel); color: var(--text-strong); box-shadow: var(--shadow-sm), 0 0 0 .5px var(--border); }
:root[data-theme="dark"] .seg button.on { background: #636366; }

:root[data-theme] .settings-access-tabs {
  display: inline-flex; gap: 2px; padding: 2px; margin-bottom: 20px;
  background: var(--fill-search); border: 0; border-radius: 9px;
}
:root[data-theme] .settings-access-tab {
  top: 0; padding: 6px 14px; border: 0; border-radius: 7px; color: var(--text); font-weight: 500;
  border-bottom: 0; transition: background var(--dur) var(--ease);
}
:root[data-theme] .settings-access-tab:hover { color: var(--text); }
:root[data-theme] .settings-access-tab.active { background: var(--panel); color: var(--text-strong); border-bottom: 0; font-weight: 600; box-shadow: var(--shadow-sm), 0 0 0 .5px var(--border); }
:root[data-theme="dark"] .settings-access-tab.active { background: #636366; color: #fff; }

:root[data-theme] .settings-theme-btns { background: var(--fill-search); border-radius: 9px; padding: 2px; gap: 2px; }
:root[data-theme] .theme-opt { border: 0; border-radius: 7px; background: transparent; color: var(--text); font-weight: 500; padding: 6px 14px; }
:root[data-theme] .theme-opt:hover { background: transparent; color: var(--text); }
:root[data-theme] .theme-opt.active { background: var(--panel); color: var(--text-strong); box-shadow: var(--shadow-sm), 0 0 0 .5px var(--border); }

/* ---------------------------------------------------------------- search fields (magnifier leading) */
:root[data-theme] .toolbar .search-mini input,
:root[data-theme] .idx-tabsrow .search-mini input,
:root[data-theme] .idx-searchrow .search-mini input {
  background-color: var(--fill-search); border-color: transparent; border-radius: 10px;
  padding: 7px 12px 7px 32px; font-size: 13.5px;
}
:root[data-theme] .toolbar .search-mini input:focus,
:root[data-theme] .idx-tabsrow .search-mini input:focus,
:root[data-theme] .idx-searchrow .search-mini input:focus { background-color: var(--panel-3); border-color: var(--primary); box-shadow: 0 0 0 4px var(--focus-ring); }
:root[data-theme] .toolbar .search-mini .si,
:root[data-theme] .idx-tabsrow .search-mini .si,
:root[data-theme] .idx-searchrow .search-mini .si { left: 10px; right: auto; color: var(--muted); }
:root[data-theme] .idx-tabsrow .search-mini { padding-bottom: 0; }
:root[data-theme] .global-search {
  background: var(--fill-search); border: 1px solid transparent; border-radius: 10px; padding: 7px 12px; color: var(--muted);
}
:root[data-theme] .global-search:hover { border-color: transparent; background: var(--fill); }
:root[data-theme] .global-search:focus-visible { border-color: var(--primary); box-shadow: 0 0 0 4px var(--focus-ring); }
:root[data-theme] .gs-placeholder { color: var(--muted); }
:root[data-theme] .kbd, :root[data-theme] .cmdk-kbd { font-family: var(--font); font-weight: 500; background: var(--panel); border: 1px solid var(--border); color: var(--muted); border-radius: 6px; }
:root[data-theme] .rl-picker .rl-search { background: var(--fill-search); border-color: transparent; border-radius: 10px; }
:root[data-theme] .rl-picker .rl-search:focus-within { background: var(--panel-3); border-color: var(--primary); box-shadow: 0 0 0 4px var(--focus-ring); }
:root[data-theme] .rl-picker .rl-search input, :root[data-theme] .rl-picker .rl-search input:focus { background: transparent; border: 0; box-shadow: none; }

:root[data-theme] .sort-mini select { border-radius: 10px; font-size: 13px; background-color: var(--panel-3); }

/* ---------------------------------------------------------------- tables (plain grouped list look) */
:root[data-theme] .table-wrap {
  background: var(--panel); border: 1px solid var(--border-faint); border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
:root[data-theme] table.grid th, :root[data-theme] table.grid td { border-bottom: 1px solid var(--border-faint); padding: 11px 14px; }
:root[data-theme] table.grid thead th {
  background: var(--panel); color: var(--muted); font-size: 12px; font-weight: 600;
  text-transform: none; letter-spacing: -.005em; border-bottom: 1px solid var(--border);
}
:root[data-theme] table.grid tbody tr:last-child td { border-bottom: 0; }
:root[data-theme] table.grid tbody tr:hover { background: var(--row-hover); }
:root[data-theme] table.grid tbody tr.selected { background: var(--row-selected); }
:root[data-theme] .table-wrap table.grid th.col-check, :root[data-theme] .table-wrap table.grid td.col-check,
:root[data-theme] .table-wrap table.grid td.name-cell, :root[data-theme] .table-wrap table.grid td.act-cell { background: var(--panel); }
:root[data-theme] .table-wrap table.grid thead th.col-check, :root[data-theme] .table-wrap table.grid thead th.name-th, :root[data-theme] .table-wrap table.grid thead th.act-th { background: var(--panel); }
:root[data-theme] .table-wrap table.grid tbody tr:hover td.col-check,
:root[data-theme] .table-wrap table.grid tbody tr:hover td.name-cell,
:root[data-theme] .table-wrap table.grid tbody tr:hover td.act-cell { background: var(--row-hover); }
:root[data-theme] .table-wrap table.grid tbody tr.selected td.col-check,
:root[data-theme] .table-wrap table.grid tbody tr.selected td.name-cell,
:root[data-theme] .table-wrap table.grid tbody tr.selected td.act-cell { background: var(--row-selected); }
:root[data-theme] .table-wrap table.grid td.name-cell, :root[data-theme] .table-wrap table.grid thead th.name-th { box-shadow: 1px 0 0 var(--border-faint); }
:root[data-theme] .table-wrap table.grid th.act-th, :root[data-theme] .table-wrap table.grid td.act-cell { box-shadow: -1px 0 0 var(--border-faint); }
:root[data-theme] .table-wrap table.grid.grid-plain td.name-cell, :root[data-theme] .table-wrap table.grid.grid-plain thead th.name-th { box-shadow: none; background: transparent; }
:root[data-theme] table.grid td.name-cell a, :root[data-theme] table.grid td.entry-cell a { color: var(--text-strong); font-weight: 600; }
:root[data-theme] table.grid td.name-cell a:hover, :root[data-theme] table.grid td.entry-cell a:hover { color: var(--accent); }
:root[data-theme] table.grid td.ed-cell:hover { outline: 1px solid var(--border-strong); outline-offset: -4px; background: transparent; border-radius: 0; }
:root[data-theme] .expand-row td { background: var(--row-expand); }
:root[data-theme] .exp-group-t, :root[data-theme] .expand-inner .kv b { text-transform: none; letter-spacing: -.005em; }
:root[data-theme] .exp-group-t { font-size: 12px; font-weight: 600; color: var(--muted); }
:root[data-theme] .expand-inner .kv b { font-size: 12px; font-weight: 500; }
:root[data-theme] .pill-primary { text-transform: none; letter-spacing: 0; border-radius: var(--radius-pill); padding: 1px 7px; font-weight: 600; }
:root[data-theme] .avatar-sm { font-weight: 600; }
/* Users table: the name cell was display:flex, which pulled it out of the table
   row (misaligned separators); keep it a real cell. */
:root[data-theme] .users-wrap table.grid td.u-name { display: table-cell; }

/* The index record list: each record is its own rounded row (an inset tile),
   separated by a small gap, on the page background. */
:root[data-theme] .content.idx-scroll .cluster-wrap {
  border: 0; border-radius: 0; background: transparent; box-shadow: none; padding: 0 2px;
}
:root[data-theme] table.cluster-grid { border-collapse: separate; border-spacing: 0 6px; margin-top: -6px; }
:root[data-theme] table.cluster-grid thead th.cl-th,
:root[data-theme] table.cluster-grid thead th.col-check {
  background: var(--bg); color: var(--muted); font-size: 12px; font-weight: 600;
  text-transform: none; letter-spacing: -.005em; border-bottom: 0; padding: 12px 14px 4px;
}
:root[data-theme] table.cluster-grid thead th.col-check { padding: 12px 0 4px; }
:root[data-theme] .content.idx-scroll .cluster-wrap table.cluster-grid thead th { background: var(--bg); box-shadow: none; }
:root[data-theme] table.cluster-grid td {
  background: var(--panel); padding: 12px 14px; font-size: 13px;
  border-top: 1px solid var(--border-faint); border-bottom: 1px solid var(--border-faint);
  transition: background var(--dur-fast) var(--ease);
}
:root[data-theme] table.cluster-grid td:first-child { border-left: 1px solid var(--border-faint); border-radius: 14px 0 0 14px; }
:root[data-theme] table.cluster-grid td:last-child { border-right: 1px solid var(--border-faint); border-radius: 0 14px 14px 0; }
:root[data-theme] table.cluster-grid td.col-check { padding: 14px 0 0; }
:root[data-theme] table.cluster-grid tbody tr:last-child td { border-bottom: 1px solid var(--border-faint); }
:root[data-theme] table.cluster-grid tbody tr:hover td { background: var(--row-hover); }
:root[data-theme] table.cluster-grid tbody tr.selected td { background: var(--row-selected); border-color: rgba(16, 163, 127, .22); }
:root[data-theme] .cl-cell .cl-name a { font-weight: 600; font-size: 14px; letter-spacing: -.01em; }
:root[data-theme] .cl-cell .cl-name a:hover, :root[data-theme] .cl-cell .cl-co:hover { color: var(--accent); }

:root[data-theme] table.grid thead th .col-resize:hover::after, :root[data-theme] table.grid thead th.resizing .col-resize::after { background: var(--primary); }
:root[data-theme] .row-exp { border-radius: 50%; }
:root[data-theme] table.grid tbody tr.expanded .row-exp { color: var(--accent); }

/* Pager */
:root[data-theme] .pager { color: var(--muted); }
:root[data-theme] .pager .pg { border: 0; background: transparent; border-radius: var(--radius-pill); min-width: 32px; height: 32px; font-variant-numeric: tabular-nums; transition: background var(--dur-fast) var(--ease); }
:root[data-theme] .pager .pg:hover { background: var(--fill); }
:root[data-theme] .pager .pg.active { background: var(--primary); color: #fff; }
:root[data-theme] .pager select { border-radius: 10px; }

/* Bulk bars */
:root[data-theme] .bulk-bar {
  background: var(--glass-bg-strong); color: var(--text);
  -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid var(--glass-border); border-radius: var(--radius-pill);
  box-shadow: var(--shadow-lg), inset 0 1px 0 var(--glass-hi); padding: 8px 10px 8px 18px;
}
:root[data-theme] .bulk-bar .btn { background: var(--fill); color: var(--text); border-color: transparent; }
:root[data-theme] .bulk-bar .btn:hover { background: var(--fill-hover); }
:root[data-theme] #idx-bulk .bulk-bar {
  background: var(--accent-soft); border: 0; border-radius: 14px; box-shadow: none; padding: 7px 10px 7px 14px;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
:root[data-theme] #idx-bulk .bulk-bar .btn { background: var(--panel); color: var(--text); border-color: transparent; }
:root[data-theme] #idx-bulk .bulk-bar .btn:hover { background: var(--panel-2); }
:root[data-theme] #idx-bulk .bulk-bar .btn.danger { background: var(--panel); color: var(--red); }
:root[data-theme] #idx-bulk .bulk-bar .btn.primary { background: var(--primary); background-image: none; color: #fff; }
:root[data-theme] #idx-bulk .bulk-link { color: var(--accent); }

/* Badges: capsule tags, restrained colour. */
:root[data-theme] .badge { border-radius: var(--radius-pill); padding: 2px 9px; font-size: 12px; font-weight: 500; border: 0; letter-spacing: -.005em; }
:root[data-theme="light"] .badge { background: rgba(118, 118, 128, .12); color: #515154; }
:root[data-theme="light"] .badge.blue   { background: rgba(0, 122, 255, .10);  color: #0062CC; }
:root[data-theme="light"] .badge.green  { background: rgba(16, 163, 127, .12); color: #0A7C5E; }
:root[data-theme="light"] .badge.orange { background: rgba(255, 149, 0, .14);  color: #A24600; }
:root[data-theme="light"] .badge.purple { background: rgba(175, 82, 222, .12); color: #7A3CA0; }
:root[data-theme="light"] .badge.teal   { background: rgba(48, 176, 199, .14); color: #0B6E80; }
:root[data-theme="light"] .badge.gray   { background: rgba(118, 118, 128, .12); color: #515154; }
:root[data-theme="dark"] .badge { background: rgba(118, 118, 128, .24); color: #D1D1D6; }
:root[data-theme="dark"] .badge.blue   { background: rgba(10, 132, 255, .20);  color: #7CB9FF; }
:root[data-theme="dark"] .badge.green  { background: rgba(52, 196, 154, .18);  color: #6FDDB8; }
:root[data-theme="dark"] .badge.orange { background: rgba(255, 159, 10, .18);  color: #FFB84D; }
:root[data-theme="dark"] .badge.purple { background: rgba(191, 90, 242, .20);  color: #D9A2F7; }
:root[data-theme="dark"] .badge.teal   { background: rgba(100, 210, 255, .16); color: #8EDCF7; }
:root[data-theme="dark"] .badge.gray   { background: rgba(118, 118, 128, .24); color: #D1D1D6; }

:root[data-theme] .strength .d { background: var(--fill); }
:root[data-theme] .strength .d.on { background: var(--primary); box-shadow: none; }

/* ---------------------------------------------------------------- menus, sheets, dialogs */
/* Menus are chrome: a glass popover with inset, rounded rows. */
:root[data-theme] .dropdown {
  background: var(--hud-bg);
  -webkit-backdrop-filter: blur(28px) saturate(180%); backdrop-filter: blur(28px) saturate(180%);
  border: 1px solid var(--glass-border); border-radius: 14px; padding: 5px;
  box-shadow: var(--shadow-lg), inset 0 1px 0 var(--glass-hi);
  animation: apPop .16s var(--ease);
}
:root[data-theme] .dropdown .dd-item { padding: 7px 10px; border-radius: 9px; font-size: 13.5px; color: var(--text); gap: 10px; }
:root[data-theme] .dropdown .dd-item:hover { background: var(--fill); }
:root[data-theme] .dropdown .dd-sep { background: var(--border); margin: 5px 8px; }

/* Dialogs (desktop): centred, soft pop. */
@keyframes apPop { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
@keyframes apSheet { from { transform: translateY(100%); } to { transform: none; } }
@keyframes apSlideIn { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
:root[data-theme] .overlay { background: var(--scrim); -webkit-backdrop-filter: none; backdrop-filter: none; animation: apFade .2s var(--ease); }
:root[data-theme] .modal {
  background: var(--panel); border: 0; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  animation: apPop .24s var(--ease-spring);
}
:root[data-theme="dark"] .modal { border: 1px solid var(--border); }
:root[data-theme] .modal-head { padding: 18px 20px 10px; border-bottom: 0; gap: 10px; }
:root[data-theme] .modal-head h3 { font-family: var(--font-display); font-size: 18px; font-weight: 700; letter-spacing: -.02em; color: var(--text-strong); }
:root[data-theme] .modal-head .x {
  width: 30px; height: 30px; border-radius: 50%; background: var(--fill); color: var(--muted);
  transition: background var(--dur-fast) var(--ease), transform .12s var(--ease);
}
:root[data-theme] .modal-head .x:hover { background: var(--fill-hover); color: var(--text); }
:root[data-theme] .modal-head .x:active { transform: scale(.92); }
:root[data-theme] .modal-head .x svg { width: 15px; height: 15px; }
:root[data-theme] .modal-body { padding: 8px 20px 20px; }
:root[data-theme] .modal-foot { background: var(--panel); border-top: 1px solid var(--border-faint); padding: 14px 20px; gap: 10px; }

:root[data-theme] .drawer-overlay { background: var(--scrim); -webkit-backdrop-filter: none; backdrop-filter: none; animation: apFade .2s var(--ease); }
:root[data-theme] .drawer {
  background: var(--panel); border-left: 0; box-shadow: var(--shadow-lg);
  animation: apSlideIn .28s var(--ease-spring);
}
:root[data-theme="dark"] .drawer { border-left: 1px solid var(--border); }

/* Create sheet (global "+"): grouped list inside a sheet. */
:root[data-theme] .sheet-scrim { background: var(--scrim); }
:root[data-theme] .create-sheet { background: var(--panel); border: 0; border-radius: 22px 22px 0 0; box-shadow: var(--shadow-lg); padding: 8px 12px calc(12px + env(safe-area-inset-bottom, 0px)); }
:root[data-theme] .create-sheet::before { content: ""; display: block; width: 36px; height: 5px; border-radius: 3px; background: var(--fill-hover); margin: 2px auto 6px; }
:root[data-theme] .sheet-title { font-family: var(--font-display); font-size: 17px; font-weight: 700; letter-spacing: -.02em; padding: 6px 0 12px; }
:root[data-theme] .sheet-list { background: var(--panel-2); border-radius: 14px; overflow: hidden; }
:root[data-theme="dark"] .sheet-list { background: var(--panel-2); }
:root[data-theme] .sheet-item { border-radius: 0; padding: 13px 14px; font-size: 16px; gap: 14px; }
:root[data-theme] .sheet-item + .sheet-item { box-shadow: inset 0 1px 0 var(--border-faint); }
:root[data-theme] .sheet-item:hover { background: var(--fill); }
:root[data-theme] .sheet-ic { color: var(--accent); }
:root[data-theme] .sheet-sep { margin: 0; background: var(--border-faint); }
:root[data-theme] .sheet-cancel { border-radius: 14px; min-height: 50px; font-size: 16px; font-weight: 600; margin-top: 10px; background: var(--panel-2); }
@media (min-width: 720px) {
  :root[data-theme] .create-sheet { border-radius: var(--radius-lg); }
  :root[data-theme] .create-sheet::before { display: none; }
}

/* Toasts: a glass capsule (HUD). */
@keyframes apToast { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }
:root[data-theme] .toast {
  background: var(--hud-bg); color: var(--text-strong);
  -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid var(--glass-border); border-radius: var(--radius-pill);
  box-shadow: var(--shadow-lg), inset 0 1px 0 var(--glass-hi);
  padding: 10px 18px; font-size: 14px; font-weight: 500; gap: 8px;
  animation: apToast .3s var(--ease-spring);
}
:root[data-theme] .toast::before { display: none; }
:root[data-theme] .toast.ok { background: var(--hud-bg); color: var(--text-strong); }
:root[data-theme] .toast.ok svg { color: var(--green); }
:root[data-theme] .toast.err { background: var(--hud-bg); color: var(--red); border-color: rgba(215, 0, 21, .28); }

/* Command palette (Spotlight). */
:root[data-theme] .cmdk-overlay { background: rgba(0, 0, 0, .18); -webkit-backdrop-filter: none; backdrop-filter: none; }
:root[data-theme="dark"] .cmdk-overlay { background: rgba(0, 0, 0, .45); }
:root[data-theme] .cmdk-panel {
  background: var(--hud-bg);
  -webkit-backdrop-filter: blur(40px) saturate(180%); backdrop-filter: blur(40px) saturate(180%);
  border: 1px solid var(--glass-border); border-radius: 22px;
  box-shadow: var(--shadow-lg), inset 0 1px 0 var(--glass-hi);
  transition: transform .2s var(--ease-spring);
}
:root[data-theme] .cmdk-input-row { padding: 16px 18px; border-bottom: 1px solid var(--border-faint); }
/* the Spotlight field is borderless (the :not() chain matches the generic input rule's weight) */
:root[data-theme] .cmdk-input-row .cmdk-input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]), :root[data-theme] .cmdk-input-row .cmdk-input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):focus { font-size: 20px; font-weight: 400; letter-spacing: -.02em; background: transparent; border: 0; border-radius: 0; box-shadow: none; padding: 0; }
:root[data-theme] .cmdk-list { padding: 6px 8px 8px; }
:root[data-theme] .cmdk-group { text-transform: none; letter-spacing: 0; font-size: 12px; font-weight: 600; color: var(--muted); padding: 10px 10px 4px; }
:root[data-theme] .cmdk-item { border-radius: 10px; padding: 8px 10px; }
:root[data-theme] .cmdk-item.sel { background: var(--primary); color: #fff; }
:root[data-theme] .cmdk-item.sel .cmdk-ico, :root[data-theme] .cmdk-item.sel .cmdk-sub, :root[data-theme] .cmdk-item.sel .cmdk-enter { color: rgba(255, 255, 255, .85); }
:root[data-theme] .cmdk-foot { border-top: 1px solid var(--border-faint); color: var(--muted); }

/* ---------------------------------------------------------------- settings (System Settings) */
:root[data-theme] .settings-overlay { background: var(--scrim); -webkit-backdrop-filter: none; backdrop-filter: none; animation: apFade .2s var(--ease); }
:root[data-theme] .settings-modal {
  background: var(--panel); border: 0; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  animation: apPop .26s var(--ease-spring);
}
:root[data-theme="dark"] .settings-modal { border: 1px solid var(--border); }
:root[data-theme] .settings-side { background: var(--bg-2); border-right: 1px solid var(--border-faint); width: 178px; }
:root[data-theme] .settings-side-head { border-bottom: 0; padding: 22px 18px 8px; }
:root[data-theme] .settings-title {
  font-family: var(--font-display); text-transform: none; letter-spacing: -.02em;
  font-size: 20px; font-weight: 700; color: var(--text-strong);
}
:root[data-theme] .settings-nav { padding: 6px 10px; }
:root[data-theme] .s-nav-item {
  border: 0; border-radius: 9px; padding: 7px 10px; font-size: 13.5px; font-weight: 500; color: var(--text); gap: 10px;
}
:root[data-theme] .s-nav-item > svg { color: var(--accent); }
:root[data-theme] .s-nav-item:hover { background: var(--sidebar-hover); color: var(--text-strong); }
:root[data-theme] .s-nav-item.active { background: var(--sidebar-active); color: var(--text-strong); font-weight: 600; border: 0; }
:root[data-theme] .s-nav-children { border-left: 0; margin: 2px 0 6px 10px; padding-left: 8px; }
:root[data-theme] .s-nav-sub { border-radius: 8px; padding: 6px 10px; font-size: 13px; color: var(--text); }
:root[data-theme] .s-nav-sub:hover { background: var(--sidebar-hover); color: var(--text-strong); }
:root[data-theme] .s-nav-sub.active { background: var(--sidebar-active); color: var(--text-strong); font-weight: 600; }
:root[data-theme] .settings-body { padding: 26px 30px; color: var(--text); }
:root[data-theme] .settings-panel-head { padding-right: 44px; }
:root[data-theme] .settings-panel-head h2 { font-family: var(--font-display); font-size: 22px; font-weight: 700; letter-spacing: -.022em; }
:root[data-theme] .settings-close {
  width: 30px; height: 30px; min-height: 0; top: 14px; right: 16px; border-radius: 50%; border: 0;
  background: var(--fill); color: var(--muted);
}
:root[data-theme] .settings-close:hover { background: var(--fill-hover); color: var(--text); border: 0; }
:root[data-theme] .settings-close svg { width: 15px; height: 15px; }
:root[data-theme] .settings-row { border-bottom-color: var(--border-faint); }
:root[data-theme] .settings-row-label { font-weight: 600; }
:root[data-theme] .settings-row-sub, :root[data-theme] .dm-help, :root[data-theme] .settings-body .subtle { color: var(--muted); opacity: 1; }
:root[data-theme] .settings-body .hint, :root[data-theme] .fv-h .hint { color: var(--muted); }
:root[data-theme] .dm-sub-lbl, :root[data-theme] .dm-field-name, :root[data-theme] .fv-label, :root[data-theme] .fv-h, :root[data-theme] .settings-body .tier-lbl, :root[data-theme] .settings-body .page-title { color: var(--text-strong); }
:root[data-theme] .callout { border-radius: 12px; border: 0; }
:root[data-theme] .callout.green { background: var(--green-soft); color: var(--green); }
:root[data-theme] .callout.red { background: rgba(215, 0, 21, .08); color: var(--red); }

/* Data model editor: inset grouped lists. */
:root[data-theme] .dm-field { border: 1px solid var(--border-faint); border-radius: 14px; box-shadow: var(--shadow-sm); }
:root[data-theme] .dm-field-head { background: var(--panel); border-bottom: 1px solid var(--border-faint); padding: 12px 14px; }
:root[data-theme] .dm-field-name { font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
:root[data-theme] .dm-field-count { background: var(--fill-search); border: 0; color: var(--muted); font-variant-numeric: tabular-nums; }
:root[data-theme] .dm-sub { border-bottom-color: var(--border-faint); }
:root[data-theme] .dm-sub.editing { background: var(--accent-soft); }
:root[data-theme] .dm-show { text-transform: none; letter-spacing: 0; font-size: 12px; font-weight: 500; color: var(--muted); }
:root[data-theme] .dm-tier, :root[data-theme] .dm-move, :root[data-theme] .fv-grp, :root[data-theme] .fv-objpick select, :root[data-theme] .tier-move, :root[data-theme] .users-wrap .u-role-sel,
:root[data-theme] .dm-edit-f input, :root[data-theme] .dm-edit-f select, :root[data-theme] .dm-edit-f textarea { background-color: var(--panel-3); border-color: var(--border-strong); border-radius: 9px; }
/* Repeated per-field "Add sub-field" actions are tinted, not filled: one filled
   button per view ("Add field") keeps the hierarchy clear. */
:root[data-theme] .dm-field-head .btn.primary { background: var(--accent-soft); color: var(--accent-2); }
:root[data-theme] .dm-field-head .btn.primary:hover { background: rgba(16, 163, 127, .18); color: var(--accent-2); }
:root[data-theme] .dm-iconbtn { background: var(--fill); border: 0; }
:root[data-theme] .dm-iconbtn:hover { background: var(--fill-hover); border: 0; }
:root[data-theme] .dm-sub .del-prop:hover, :root[data-theme] .dm-field-head .dm-del-field:hover { background: rgba(215, 0, 21, .10); }
:root[data-theme] .dm-sub-edit { background: var(--panel-2); border-bottom: 1px solid var(--border-faint); }
:root[data-theme] .fv-matrix thead th { text-transform: none; letter-spacing: 0; font-size: 12px; color: var(--muted); }
:root[data-theme] .fv-matrix th, :root[data-theme] .fv-matrix td, :root[data-theme] .fv-row { border-bottom-color: var(--border-faint); }
:root[data-theme] .tier-pill { text-transform: none; letter-spacing: 0; font-size: 12px; font-weight: 600; padding: 3px 10px; }
:root[data-theme] .tier-primary { background: var(--primary); }
:root[data-theme] .tier-secondary { background: #8E8E93; }
:root[data-theme] .tier-tertiary { background: #AEAEB2; }
:root[data-theme] .tier-drop { border: 1.5px dashed var(--border-strong); border-radius: 14px; }
:root[data-theme] .tier-drop.drop-hover { border-color: var(--primary); background: var(--accent-soft); }
:root[data-theme] .tier-row { border: 1px solid var(--border-faint); border-radius: 10px; box-shadow: var(--shadow-sm); }

/* Duplicate dialog, scanner review, misc */
:root[data-theme] .dup-card { border: 0; border-radius: 14px; background: var(--panel-2); }
:root[data-theme] .dup-new { background: var(--accent-soft); }
:root[data-theme] .dup-h { text-transform: none; letter-spacing: 0; font-size: 12px; font-weight: 600; color: var(--muted); }
:root[data-theme] .scan-role { text-transform: none; letter-spacing: 0; }
:root[data-theme] .scan-or { text-transform: none; letter-spacing: 0; font-size: 13px; }
:root[data-theme] .scan-auto-btn { background: var(--primary); background-image: none; box-shadow: none; border-radius: var(--radius-pill); font-weight: 600; }
:root[data-theme] .scan-auto-btn:hover { background: var(--primary-600); filter: none; }
:root[data-theme] .scan-shot, :root[data-theme] .scan-empty { border-radius: 14px; border-color: var(--border); }
:root[data-theme] .empty { color: var(--muted); }

/* Associations designer + links panel: follow the new surfaces. */
:root[data-theme] .ad-canvas { background: var(--panel-2); border: 1px solid var(--border-faint); border-radius: var(--radius); }
:root[data-theme] .ad-node { border: 0; box-shadow: var(--shadow-sm), 0 0 0 .5px var(--border-strong); }
:root[data-theme] .ad-node.drop-target { box-shadow: 0 0 0 4px var(--focus-ring), var(--shadow-md); }
:root[data-theme] .ad-badge { border: 0; box-shadow: var(--shadow-sm), 0 0 0 .5px var(--border-strong); font-weight: 500; }
:root[data-theme] .ad-hint { border: 0; background: var(--glass-bg-strong); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); box-shadow: var(--shadow-md); }
:root[data-theme] .ad-end { background: transparent; color: var(--muted); font-weight: 500; }
:root[data-theme] .ad-list-h { font-size: 13px; font-weight: 600; color: var(--muted); }
:root[data-theme] .ad-list { border: 1px solid var(--border-faint); border-radius: 14px; box-shadow: var(--shadow-sm); }
:root[data-theme] .ad-row + .ad-row { border-top: 0; box-shadow: inset 0 1px 0 var(--border-faint); }
:root[data-theme] .ad-legacy { border: 1px solid var(--border-faint); border-radius: 14px; box-shadow: var(--shadow-sm); }
:root[data-theme] .ad-seg { background: var(--fill-search); border: 0; border-radius: 12px; }
:root[data-theme] .ad-seg button[aria-checked="true"] { background: var(--panel); color: var(--text-strong); box-shadow: var(--shadow-sm), 0 0 0 .5px var(--border); }
:root[data-theme="dark"] .ad-seg button[aria-checked="true"] { background: #636366; color: #fff; }
:root[data-theme] .rl-res { border-radius: 10px; }

/* Network map canvas */
:root[data-theme] #cyGraph { background: var(--panel); border: 1px solid var(--border-faint); border-radius: var(--radius); box-shadow: var(--shadow-sm); }

/* Skeleton shimmer: calmer. */
:root[data-theme] .sk { background: var(--fill-search); border-radius: 8px; }

/* Splash: calm and still — the mark fades in once; no floating, pulsing halo. */
:root[data-theme] #splash { background: var(--bg); }
:root[data-theme] #splash .sp-mark, :root[data-theme] #splash .sp-mark::before { animation: none; }
:root[data-theme] #splash .sp-mark::before { display: none; }
:root[data-theme] #splash .sp-mark img { animation: apFade .5s var(--ease) both; filter: none; background: #1D1D1F; border-radius: 22px; padding: 14px; box-sizing: border-box; }
:root[data-theme] #splash .sp-word { font-family: var(--font-display); font-weight: 700; letter-spacing: -.025em; animation: apFade .5s var(--ease) .15s forwards; }
:root[data-theme] .scan-success-burst .ssb-ring { background: var(--primary); background-image: none; box-shadow: var(--shadow-lg); }

/* ---------------------------------------------------------------- phones */
@media (max-width: 900px) {
  :root[data-theme] .content { padding: 16px; padding-top: max(16px, env(safe-area-inset-top, 0px)); padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px)); }
  :root[data-theme] .page-title { font-size: 28px; }
  /* Off-canvas sidebar keeps a solid surface for legibility over content. */
  :root[data-theme] .sidebar { width: 280px; background: var(--panel); border-radius: 0 22px 22px 0; border-right: 0; box-shadow: none; margin: 0; }
  :root[data-theme] .sidebar.open { box-shadow: var(--shadow-lg); }
  :root[data-theme] .scrim { background: var(--scrim); }
  :root[data-theme] .nav-item { padding: 11px 12px; font-size: 16px; }
  :root[data-theme] .btn { min-height: 44px; padding: 10px 18px; font-size: 15px; }
  :root[data-theme] .btn.sm { min-height: 36px; padding: 7px 14px; font-size: 14px; }
  :root[data-theme] .btn-icon, :root[data-theme] .btn.btn-icon { width: 44px; height: 44px; min-height: 0; padding: 0; }
  :root[data-theme] .btn.btn-icon.sm, :root[data-theme] .btn-icon.btn.sm { width: 38px; height: 38px; }
  :root[data-theme] .tab { padding: 8px 14px; font-size: 15px; }
  :root[data-theme] .chip { padding: 7px 13px; font-size: 14px; }

  /* Floating capsule tab bar (iOS 26), inset from the edges, always one tap away. */
  :root[data-theme] .bottom-nav {
    left: 12px; right: 12px; bottom: max(10px, env(safe-area-inset-bottom, 0px));
    height: 62px; padding: 0 4px; border-radius: 31px;
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%);
    border: 1px solid var(--glass-border); border-top: 1px solid var(--glass-border);
    box-shadow: var(--shadow-md), inset 0 1px 0 var(--glass-hi);
    align-items: center;
  }
  :root[data-theme] .bottom-nav .bn-item {
    height: 54px; margin: 0 1px; border-radius: 27px; gap: 2px;
    color: var(--muted); font-size: 10.5px; font-weight: 600; letter-spacing: 0;
    transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
  }
  :root[data-theme] .bottom-nav .bn-item .bn-ic { width: 30px; height: 26px; border-radius: 0; background: transparent; }
  :root[data-theme] .bottom-nav .bn-item .bn-ic svg { width: 23px; height: 23px; }
  :root[data-theme] .bottom-nav .bn-item.active { color: var(--accent); background: var(--fill-search); }
  :root[data-theme] .bottom-nav .bn-item.active .bn-ic { background: transparent; }
  :root[data-theme] .bottom-nav .bn-item.active .bn-ic svg { filter: none; }
  :root[data-theme] .bottom-nav .bn-item:active .bn-ic { transform: scale(.9); }
  /* The index list stops above the floating bar. */
  :root[data-theme] .content.idx-scroll { height: calc(100vh - 72px - max(10px, env(safe-area-inset-bottom, 0px))); }
  html.is-app:root[data-theme] .content.idx-scroll {
    height: calc(100vh - 72px - max(10px, env(safe-area-inset-bottom, 0px)) - env(safe-area-inset-top, 0px));
    padding-top: max(12px, env(safe-area-inset-top, 0px)); padding-bottom: 0;
  }
  /* Toasts float above the tab bar instead of on top of it. */
  :root[data-theme] .toasts { bottom: calc(84px + max(10px, env(safe-area-inset-bottom, 0px))); width: calc(100% - 32px); }
  :root[data-theme] .toast { max-width: 100%; }
}

@media (max-width: 640px) {
  /* Phones: objects become compact icon-over-label tiles so five of them fit
     round the canvas without colliding. */
  :root[data-theme] .ad-canvas { height: 520px; }
  :root[data-theme] .ad-node { flex-direction: column; gap: 4px; padding: 8px 10px 7px; border-radius: 16px; font-size: 12.5px; font-weight: 600; }
  :root[data-theme] .ad-node-ic { width: 34px; height: 34px; }
}
@media (max-width: 900px) {
  :root[data-theme] .rec-grid { grid-template-columns: minmax(0, 1fr); }
}
/* Phones: label above value, like a contact card. */
@media (max-width: 767px) {
  :root[data-theme] .rec-grid .card.pad > div[style*="display:flex;padding:8px 0"] { flex-direction: column; gap: 2px !important; padding: 10px 0 !important; }
  :root[data-theme] .rec-grid .card.pad > div[style*="display:flex;padding:8px 0"] > div[style*="width:150px"] { width: auto !important; font-size: 13px !important; }
  :root[data-theme] .rec-grid .card.pad > div[style*="display:flex;padding:8px 0"] > div[style*="flex:1"] { font-size: 16px; }
}

@media (max-width: 767px) {
  /* styles.css hides every .table-wrap on phones (meant for the records list,
     which has its own card view). Segments, Events, Users, Audit and import
     previews have no card view, so they vanished on phones. Show them again,
     scrolling sideways when wide. */
  :root[data-theme] .table-wrap:not(.cluster-wrap) { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  :root[data-theme] .table-wrap:not(.cluster-wrap) table.grid { table-layout: auto; }
  :root[data-theme] .table-wrap.users-wrap table.grid { min-width: max-content; }
  :root[data-theme] .table-wrap:not(.cluster-wrap) table.grid td.name-cell,
  :root[data-theme] .table-wrap:not(.cluster-wrap) table.grid thead th.name-th { position: static; box-shadow: none; }
  :root[data-theme] .rec-card { border: 0; border-radius: 16px; box-shadow: var(--shadow-sm); padding: 14px; }
  :root[data-theme="dark"] .rec-card { border: 1px solid var(--border-faint); box-shadow: none; }
  :root[data-theme] .rec-card .avatar { border-radius: 50%; font-weight: 600; }
  :root[data-theme] .rec-card .rc-name { font-weight: 600; font-size: 16px; letter-spacing: -.015em; }
  :root[data-theme] .rec-card .rc-line .rc-k { font-weight: 500; }
  :root[data-theme] .rec-card:active { transform: scale(.985); }
  :root[data-theme] .content.idx-scroll .cluster-wrap { border: 0; background: transparent; box-shadow: none; border-radius: 0; }
  /* List header on phones: views on one line, a full-width search field below,
     then filters as a single sideways-scrolling row beside Sort. */
  :root[data-theme] .idx-tabsrow { flex-wrap: wrap; row-gap: 8px; }
  :root[data-theme] .idx-tabsrow .tabs { flex: 1 1 100%; }
  :root[data-theme] .idx-tabsrow .search-mini { flex: 1 1 100%; }
  :root[data-theme] .idx-tabsrow .search-mini input { width: 100%; max-width: none; }
  :root[data-theme] .idx-controls { gap: 10px; }
  :root[data-theme] .idx-controls .filter-row { flex: 1 1 0; min-width: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 2px 0; }
  :root[data-theme] .idx-controls .filter-row::-webkit-scrollbar { display: none; }
  :root[data-theme] .idx-controls .filter-row > * { flex: none; }
  :root[data-theme] .ph-qbtn { padding: 12px; font-size: 15px; }
}

/* Sheets on phones: rise from the bottom (translateY only — the old shared
   `sheetUp` keyframe also carried translateX(-50%), which is what shifted
   every phone dialog left for a moment as it opened). */
@media (max-width: 680px) {
  :root[data-theme] .modal, :root[data-theme] .modal.wide { border-radius: 22px 22px 0 0; animation: apSheet .34s var(--ease-spring); border: 0; }
  :root[data-theme] .modal-head { padding-top: 24px; }
  :root[data-theme] .modal-head::before, :root[data-theme] .drawer .modal-head::before { top: 8px; width: 36px; height: 5px; background: var(--fill-hover); }
  :root[data-theme] .drawer { border-radius: 22px 22px 0 0; border: 0; animation: apSheet .34s var(--ease-spring); }
  :root[data-theme] .settings-modal { height: 96vh; width: 100vw; margin-top: auto; border-radius: 22px 22px 0 0; animation: apSheet .34s var(--ease-spring); }
  :root[data-theme] .settings-overlay { align-items: flex-end; }
  :root[data-theme] .settings-side { width: 100%; border-right: 0; border-bottom: 1px solid var(--border-faint); background: var(--panel); }
  :root[data-theme] .settings-side-head { padding: 22px 16px 4px; }
  /* Section switcher: a wrapping row of capsules, so every section is visible. */
  :root[data-theme] .settings-nav { flex-wrap: wrap; overflow-x: visible; gap: 6px; padding: 8px 14px 12px; }
  :root[data-theme] .settings-nav .s-nav-item { background: var(--fill-search); border-radius: var(--radius-pill); padding: 8px 14px; margin: 0; font-size: 14px; }
  :root[data-theme] .settings-nav .s-nav-item.active { background: var(--sidebar-active); }
  :root[data-theme] .settings-body { padding: 18px 16px calc(24px + env(safe-area-inset-bottom, 0px)); }
  :root[data-theme] .settings-close { top: 16px; right: 14px; }
}

/* ---------------------------------------------------------------- accessibility */
@media (prefers-reduced-motion: reduce) {
  :root[data-theme] .btn, :root[data-theme] .btn:active, :root[data-theme] .nav-item, :root[data-theme] .tab, :root[data-theme] .chip, :root[data-theme] .ph-qbtn, :root[data-theme] .rec-card { transition: none; transform: none; }
  :root[data-theme] .modal, :root[data-theme] .drawer, :root[data-theme] .dropdown, :root[data-theme] .toast, :root[data-theme] .settings-modal, :root[data-theme] .overlay, :root[data-theme] .settings-overlay, :root[data-theme] .drawer-overlay, :root[data-theme] .content.route-anim, :root[data-theme] #splash .sp-mark img, :root[data-theme] #splash .sp-word { animation: none !important; }
  :root[data-theme] #splash .sp-word { opacity: 1; }
  :root[data-theme] .card.clickable:hover, :root[data-theme] .kpi.clickable:hover, :root[data-theme] .row-click:hover { transform: none; }
}
/* Reduce Transparency: glass becomes solid. */
@media (prefers-reduced-transparency: reduce) {
  :root[data-theme] .sidebar, :root[data-theme] .topbar, :root[data-theme] .bottom-nav, :root[data-theme] .dropdown, :root[data-theme] .toast, :root[data-theme] .bulk-bar, :root[data-theme] .cmdk-panel, :root[data-theme] .ad-hint {
    -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--panel);
  }
}
/* Increase Contrast: firmer separators and secondary text. */
@media (prefers-contrast: more) {
  :root[data-theme="light"] { --border: rgba(0, 0, 0, .22); --border-strong: rgba(0, 0, 0, .34); --border-faint: rgba(0, 0, 0, .16); --muted: #4A4A4F; --muted-2: #5E5E63; --glass-bg: #FFFFFF; --glass-bg-strong: #FFFFFF; }
  :root[data-theme="dark"] { --border: rgba(255, 255, 255, .24); --border-strong: rgba(255, 255, 255, .36); --border-faint: rgba(255, 255, 255, .18); --muted: #C7C7CC; --muted-2: #AEAEB2; --glass-bg: #1C1C1E; --glass-bg-strong: #1C1C1E; }
}

/* ================================================================= pmt1 28 Sept
   Phone alignment pass — every screen measured at 360 / 390 / 430 px wide.
   Visual only: no markup or behaviour changes. */
@media (max-width: 767px) {
  /* Records list: filters get the room (one sideways-scrolling row that fades at
     the edge), Sort shrinks to a compact picker, the pager stays on one line. */
  :root[data-theme] .idx-controls { gap: 8px; }
  :root[data-theme] .idx-controls .filter-row { -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); padding-right: 18px; }
  :root[data-theme] .sort-mini { flex: none; }
  :root[data-theme] .sort-mini .hint { display: none; }
  :root[data-theme] .sort-mini select { max-width: 118px; }
  :root[data-theme] .pager { gap: 6px; flex-wrap: nowrap; white-space: nowrap; padding: 10px 0; font-size: 12.5px; }
  :root[data-theme] .pager > .hint { display: none; }
  :root[data-theme] .pager .pages { gap: 2px; }
  :root[data-theme] .pager .pg { min-width: 30px; height: 30px; }
  :root[data-theme] .pager select { padding: 4px 22px 4px 8px; }

  /* Record header: long names no longer tower; actions sit in an even grid. */
  :root[data-theme] .ph-name { font-size: 24px; line-height: 1.15; overflow-wrap: anywhere; }
  :root[data-theme] .ph-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 8px; }
  :root[data-theme] .ph-actions .btn { width: 100%; justify-content: center; min-height: 40px; }

  /* Page titles with a count/badge (segments, long object names). */
  :root[data-theme] .page-head .page-title { font-size: 26px; line-height: 1.15; overflow-wrap: anywhere; }
  :root[data-theme] .idx-seg-mode, :root[data-theme] .page-title .badge { white-space: nowrap; vertical-align: middle; }

  /* Wide tables (Segments, Events, Users, Audit, import previews): keep each
     cell on one line and scroll the table sideways, instead of squeezing the
     text into narrow, many-line columns. */
  :root[data-theme] .table-wrap:not(.cluster-wrap) table.grid { min-width: max-content; }
  :root[data-theme] .table-wrap:not(.cluster-wrap) table.grid th,
  :root[data-theme] .table-wrap:not(.cluster-wrap) table.grid td { white-space: nowrap; }

  /* Forms in sheets: one column that can never be pushed wider than the phone. */
  :root[data-theme] .form-grid { grid-template-columns: minmax(0, 1fr); }
  :root[data-theme] .field, :root[data-theme] .field > * { min-width: 0; }
  :root[data-theme] .field select, :root[data-theme] .field input, :root[data-theme] .field textarea { max-width: 100%; }
  :root[data-theme] .modal-body { overflow-x: hidden; }

  /* Network Map search: full width, never runs out of its card. */
  :root[data-theme] .gc-focus { width: 100%; }
  :root[data-theme] .gc-focus .search-mini { flex: 1 1 100%; min-width: 0; }
  :root[data-theme] .gc-focus .search-mini input { width: 100%; max-width: none; box-sizing: border-box; }

  /* "Check linked details": the radio sits left, the text wraps as one block. */
  :root[data-theme] .rv-opt { display: block; position: relative; padding-left: 26px; line-height: 1.4; }
  :root[data-theme] .rv-opt input { position: absolute; left: 0; top: 2px; margin: 0; }
  :root[data-theme] .rv-opt .hint { display: block; }

  /* Association sheet rows: the remove (×) sits at the right of its row. */
  :root[data-theme] .ad-match-row { position: relative; }
  :root[data-theme] .ad-match-row .ad-match-rm, :root[data-theme] .ad-match-row .ad-copy-rm { align-self: flex-end; margin: 2px 0 0; }
  :root[data-theme] .ad-match-row + .ad-match-row { border-top: 1px solid var(--border-faint); padding-top: 10px; margin-top: 10px; }

  /* Settings cards (roles matrix etc.) stay inside the sheet and scroll inside. */
  :root[data-theme] .settings-body .card { max-width: 100%; }
  :root[data-theme] .settings-body #matrix { overflow-x: auto; }
}
@media (max-width: 680px) {
  /* Settings ▸ Data Model on phones: the object list opens as its own row of
     capsules under the section switcher (it used to stretch "Data Model" into a
     tall bubble beside a column of objects). */
  :root[data-theme] .settings-nav { align-items: center; }
  :root[data-theme] .settings-nav .s-nav-children { order: 10; flex: 1 1 100%; display: flex; flex-wrap: nowrap; gap: 6px; overflow-x: auto; margin: 2px 0 0; padding: 2px 0; border-left: 0; scrollbar-width: none; }
  :root[data-theme] .settings-nav .s-nav-children::-webkit-scrollbar { display: none; }
  :root[data-theme] .settings-nav .s-nav-sub { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: var(--radius-pill); background: var(--fill-search); white-space: nowrap; }
  :root[data-theme] .settings-nav .s-nav-sub.active { background: var(--sidebar-active); }
}
@media (max-width: 767px) {
  /* Record header buttons: an even grid sized to how many there are —
     3 → one row of 3 · 4 → 2 × 2 · 5 → 3 on top, 2 below. */
  :root[data-theme] .ph-actions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  :root[data-theme] .ph-actions .btn { padding-left: 8px; padding-right: 8px; min-width: 0; white-space: nowrap; }
  :root[data-theme] .ph-actions .btn svg { flex: none; }
  :root[data-theme] .ph-actions:has(> .btn:nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :root[data-theme] .ph-actions:has(> .btn:nth-child(5):last-child) { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  :root[data-theme] .ph-actions:has(> .btn:nth-child(5):last-child) > .btn { grid-column: span 2; }
  :root[data-theme] .ph-actions:has(> .btn:nth-child(5):last-child) > .btn:nth-child(n+4) { grid-column: span 3; }
  :root[data-theme] .ph-actions:has(> .btn:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Role editor header (Rename / Delete / Save) wraps under the role name. */
  :root[data-theme] #matrix > .card > div:first-child { flex-wrap: wrap; }
  :root[data-theme] #matrix > .card > div:first-child > div { margin-left: 0 !important; flex-wrap: wrap; }
}

/* ================================================================ 15 Oct 2026 batch
   (duplicate check on scan, paste-a-list segments, Do-not-email notes,
   similar company names). New components only — nothing above is changed. */
:root[data-theme] .scan-dup-banner { margin: 2px 0 12px; }
:root[data-theme] .scan-dup-panel { align-items: flex-start; }
:root[data-theme] .scan-dup-panel a { color: var(--link, var(--accent-2)); font-weight: 600; }
:root[data-theme] .scan-dup-seg { display: flex; flex-wrap: nowrap; width: 100%; max-width: 420px; margin-top: 10px; }
:root[data-theme] .scan-dup-seg button { flex: 1 1 0; min-width: 0; font-size: 13px; padding: 6px 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; }
:root[data-theme] .scan-dup-panel .scan-reason-txt { min-width: 0; }
:root[data-theme] .scan-dup-tag { display: inline-block; padding: 0 7px; margin-right: 2px; border-radius: var(--radius-pill); background: rgba(240,180,41,.18); color: var(--amber); font-weight: 600; font-size: 11.5px; line-height: 18px; }
:root[data-theme] .scan-dup-help { margin-top: 6px; font-size: 12.5px; }
:root[data-theme] .scan-dup-help:empty { display: none; }
:root[data-theme] .scan-dup-line { -webkit-line-clamp: 2; }
/* Segments ▸ Add people: Search | Paste a list */
:root[data-theme] .seg-add-tabs { display: inline-flex; margin-bottom: 12px; }
:root[data-theme] .seg-add-results { margin-top: 10px; max-height: 320px; overflow: auto; }
:root[data-theme] .seg-add-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
:root[data-theme] .seg-add-row .hint { display: inline-flex; gap: 6px; flex-wrap: wrap; }
:root[data-theme] .seg-add textarea, :root[data-theme] .seg-paste-new textarea { width: 100%; resize: vertical; min-height: 72px; font: inherit; }
:root[data-theme] .seg-paste-row {
  display: grid; grid-template-columns: minmax(0, 34%) minmax(0, 1fr) 44px; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 10px; background: var(--fill-search); margin-bottom: 6px; font-size: 13.5px;
}
:root[data-theme] .seg-paste-row.none { opacity: .7; }
:root[data-theme] .seg-paste-in { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--muted); }
:root[data-theme] .seg-paste-out { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:root[data-theme] .seg-paste-out select { width: 100%; }
:root[data-theme] .seg-paste-st { text-align: right; }
@media (max-width: 600px) {
  :root[data-theme] .seg-paste-row { grid-template-columns: minmax(0, 1fr) 40px; }
  :root[data-theme] .seg-paste-in { grid-column: 1 / -1; }
}
/* Companies ▸ ⋯ ▸ Find similar names */
:root[data-theme] .sim-list { display: flex; flex-direction: column; gap: 10px; max-height: 60vh; overflow: auto; }
:root[data-theme] .sim-group { border-radius: 12px; background: var(--fill-search); padding: 4px; }
:root[data-theme] .sim-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto 18px; align-items: center; gap: 12px;
  padding: 9px 10px; border-radius: 9px; color: var(--text); text-decoration: none; font-size: 13.5px;
}
:root[data-theme] .sim-row + .sim-row { border-top: .5px solid var(--border); }
:root[data-theme] .sim-none { display: flex; align-items: center; gap: 8px; padding: 18px 4px; color: var(--muted); }
:root[data-theme] .sim-none svg { color: var(--primary); }
:root[data-theme] .sim-row:hover { background: var(--panel); }
:root[data-theme] .sim-name { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:root[data-theme] .sim-meta { color: var(--muted); font-size: 12.5px; white-space: nowrap; font-variant-numeric: tabular-nums; }
:root[data-theme] .sim-go { color: var(--muted-2); display: inline-flex; }
@media (max-width: 600px) {
  :root[data-theme] .sim-row { grid-template-columns: minmax(0, 1fr) 18px; }
  :root[data-theme] .sim-meta { grid-column: 1; grid-row: 2; }
  :root[data-theme] .sim-go { grid-row: 1 / span 2; grid-column: 2; }
}
/* Scan review — front + back of card */
:root[data-theme] .scan-sides { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
:root[data-theme] .scan-sides .scan-thumbs { display: flex; gap: 8px; flex-wrap: wrap; }
:root[data-theme] .scan-back-btn { display: inline-flex; align-items: center; gap: 6px; }
:root[data-theme] .scan-back-btn .spin { width: 13px; height: 13px; }
:root[data-theme] .scan-back-done { color: var(--primary); }
:root[data-theme] .scan-2sides { display: inline-block; padding: 0 7px; margin-right: 4px; border-radius: var(--radius-pill); background: var(--accent-soft); color: var(--accent-2); font-size: 11.5px; font-weight: 600; }

/* ================================================================ 15 Oct 2026 — linking batch
   (rule options, link-field suggestions, pins, merge, Lead Source events, staff). */
/* Settings ▸ Associations sheet: rule options + transfer "Updates" column */
:root[data-theme] .ad-opts { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
:root[data-theme] .ad-opts:empty { display: none; }
:root[data-theme] .ad-opt-row { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; line-height: 1.4; cursor: pointer; }
:root[data-theme] .ad-opt-row input { margin-top: 2px; flex: none; }
:root[data-theme] .ad-opt-missing { align-items: center; flex-wrap: wrap; cursor: default; }
:root[data-theme] .ad-opt-l { color: var(--muted); font-size: 13px; }
:root[data-theme] .ad-missing-seg { display: inline-flex; }
:root[data-theme] .ad-missing-seg button { font-size: 12.5px; padding: 5px 11px; }
:root[data-theme] .ad-copy-mode { flex: 0 0 132px; }
@media (max-width: 640px) { :root[data-theme] .ad-copy-mode { flex: 1 1 auto; } }

/* Record form: suggestions under a link field */
:root[data-theme] .ac-host { position: relative; }
:root[data-theme] .ac-list {
  position: absolute; left: 0; right: 0; top: calc(100% - 2px); z-index: 30;
  background: var(--panel); border: .5px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-md, 0 8px 24px rgba(0,0,0,.12));
  padding: 4px; max-height: 240px; overflow: auto;
}
:root[data-theme] .ac-list[hidden] { display: none; }
:root[data-theme] .ac-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; font-size: 13.5px; cursor: pointer; color: var(--text); }
:root[data-theme] .ac-item svg { color: var(--muted-2); flex: none; }
:root[data-theme] .ac-item span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:root[data-theme] .ac-item:hover, :root[data-theme] .ac-item.on { background: var(--fill-search); }

/* Record form: "Only for this contact" under transfer fields; badge on the record page */
:root[data-theme] .pin-toggle { display: flex; align-items: flex-start; gap: 7px; margin-top: 6px; font-size: 12.5px; line-height: 1.35; color: var(--muted); cursor: pointer; font-weight: 500; }
:root[data-theme] .pin-toggle .checkbox { width: 15px; height: 15px; flex: none; margin: 1px 0 0; }
:root[data-theme] .pin-toggle .pin-text { flex: 1; min-width: 0; }
:root[data-theme] .pin-toggle .hint { font-weight: 400; font-size: inherit; }
:root[data-theme] .pin-badge { margin-left: 6px; font-size: 11px; vertical-align: 1px; }

/* "No company called …" / "Company changed" dialogs */
:root[data-theme] .link-ask p { line-height: 1.5; }
:root[data-theme] .link-ask-list { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 10px; }
:root[data-theme] .link-ask-item {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 10px 12px;
  border: 0; border-radius: 10px; background: var(--fill-search); color: var(--text); font: inherit; font-size: 13.5px; cursor: pointer;
}
:root[data-theme] .link-ask-item:hover { background: var(--fill); }
:root[data-theme] .link-ask-item svg { color: var(--muted-2); flex: none; }
:root[data-theme] .link-ask-item span:nth-child(2) { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:root[data-theme] .link-ask-item .hint { flex: none; color: var(--primary); font-weight: 500; }

/* Find similar names ▸ Merge */
:root[data-theme] .sim-actions { display: flex; justify-content: flex-end; padding: 4px 6px 4px; border-top: .5px solid var(--border); }
:root[data-theme] .merge-pick { display: flex; flex-direction: column; gap: 6px; }
:root[data-theme] .merge-opt { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; background: var(--fill-search); cursor: pointer; font-size: 13.5px; }
:root[data-theme] .merge-opt:has(input:checked) { background: var(--accent-soft); }
:root[data-theme] .merge-name { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:root[data-theme] .merge-what { margin: 12px 0 0; padding-left: 18px; line-height: 1.55; }

/* Event preset ▸ "Use this event as a Lead Source" */
:root[data-theme] .ev-lead { cursor: pointer; }
:root[data-theme] .ev-lead[hidden] { display: none; }
:root[data-theme] .ev-lead-row { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; line-height: 1.45; }
:root[data-theme] .ev-lead-row input { margin-top: 2px; flex: none; }

/* Settings ▸ Users ▸ ICF Contact */
/* the Users table sizes its columns to their content (7 columns no longer squeeze) */
:root[data-theme] .users-wrap table.grid { table-layout: auto; }
:root[data-theme] .users-wrap table.grid th, :root[data-theme] .users-wrap table.grid td { padding-left: 10px; padding-right: 10px; }
:root[data-theme] .users-wrap table.grid td.u-staff { white-space: nowrap; }
:root[data-theme] .u-staff-line { display: inline-flex; align-items: center; gap: 2px; }
:root[data-theme] .u-staff-name { font-weight: 500; }
:root[data-theme] .u-staff-how { display: block; font-size: 11.5px; margin-top: 1px; }
:root[data-theme] .staff-res { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; max-height: 300px; overflow: auto; }
:root[data-theme] .staff-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 10px; background: transparent; color: var(--text); font: inherit; font-size: 13.5px; text-align: left; cursor: pointer; }
:root[data-theme] .staff-item:hover { background: var(--fill-search); }
:root[data-theme] .staff-item.on { background: var(--accent-soft); }
:root[data-theme] .staff-item .staff-n { font-weight: 600; }
:root[data-theme] .staff-item .hint { margin-left: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
:root[data-theme] .staff-alt { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; padding-top: 10px; border-top: .5px solid var(--border); }
/* Two-column record form: a long dropdown option (e.g. Category) no longer pushes the
   left column wider than the sheet (it caused a sideways scroll in the Edit drawer). */
@media (min-width: 901px) {
  :root[data-theme] .form-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  :root[data-theme] .form-grid > .field, :root[data-theme] .form-grid > .field > select { min-width: 0; }
}

/* ===== 19 Oct 2026 — pmt1_16Oct batch ===== */
/* Duplicate pop-up ▸ "Add as a new contact" needs a different email */
:root[data-theme] .dup-newemail { margin-top: 2px; padding: 12px 14px; border-radius: 14px; background: var(--fill-search); }
:root[data-theme] .dup-newemail .input { min-width: 0; }
:root[data-theme] .scan-dup-email { display: block; margin-top: 4px; color: var(--text); }

/* Record ▸ Business card photos (Front, Back, Catalogue, Brochure, Handwritten notes…) */
:root[data-theme] .cp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
:root[data-theme] .cp-tile { position: relative; display: block; padding: 0; border: 0; border-radius: 12px; overflow: hidden; background: var(--fill-search); cursor: pointer; aspect-ratio: 1.6; }
:root[data-theme] .cp-tile img { display: block; width: 100%; height: 100%; object-fit: cover; }
:root[data-theme] .cp-tile:hover { box-shadow: 0 0 0 2px var(--accent); }
:root[data-theme] .cp-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
:root[data-theme] .cp-label { position: absolute; left: 6px; bottom: 6px; max-width: calc(100% - 12px); padding: 2px 8px; border-radius: 999px; background: rgba(0, 0, 0, .55); color: #fff; font-size: 11.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:root[data-theme] .cp-add { margin-top: 10px; width: 100%; justify-content: center; }
:root[data-theme] .cp-roles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
:root[data-theme] .cp-roles .btn { justify-content: center; }
:root[data-theme] .cp-view-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
:root[data-theme] .cp-view-nav { display: flex; justify-content: space-between; margin-top: 10px; }

/* Voice note ▸ recording / hearing-you dot */
.vn-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #ff3b30; margin-right: 6px; vertical-align: 1px; animation: vnPulse 1.1s ease-in-out infinite; }
@keyframes vnPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.8); } }
@media (prefers-reduced-motion: reduce) { .vn-dot { animation: none; } }

/* Record ▸ Research panel (LinkedIn + Google + likely profiles) */
:root[data-theme] .rs-links { display: flex; gap: 8px; flex-wrap: wrap; }
:root[data-theme] .rs-links .btn { text-decoration: none; }
:root[data-theme] .rs-sub { margin: 10px 0 2px; }
:root[data-theme] .rs-body { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
:root[data-theme] .rs-loading { display: flex; align-items: center; gap: 10px; padding: 18px 4px; color: var(--muted); }
:root[data-theme] .rs-verdict { font-size: 13.5px; font-weight: 600; color: var(--text-strong); }
:root[data-theme] .rs-verdict.likely { color: var(--accent-2); }
:root[data-theme] .rs-cand { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--panel-2); }
:root[data-theme] .rs-cand.top { background: var(--accent-soft); }
:root[data-theme] .rs-cand-main { flex: 1; min-width: 0; }
:root[data-theme] .rs-cand-name { font-weight: 600; color: var(--text-strong); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
:root[data-theme] .rs-cand-head { font-size: 13px; color: var(--text); margin-top: 2px; overflow-wrap: anywhere; }
:root[data-theme] .rs-cand-snip { margin-top: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
:root[data-theme] .rs-cand .btn { flex: none; text-decoration: none; }
:root[data-theme] .rs-why { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
:root[data-theme] .rs-chip { font-size: 11.5px; padding: 2px 8px; border-radius: 999px; background: var(--fill-search); color: var(--muted); }
:root[data-theme] .rs-chip.ok { background: rgba(16, 163, 127, .12); color: var(--accent-2); }
:root[data-theme] .rs-chip.no { background: rgba(255, 59, 48, .10); color: #c4362b; }
:root[data-theme] .rs-chip.part { background: rgba(255, 159, 10, .14); color: #a86400; }
:root[data-theme="dark"] .rs-chip.part { color: #ffbf5f; }
:root[data-theme="dark"] .rs-chip.no { color: #ff7b72; }
:root[data-theme] .rs-empty { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border-radius: 14px; background: var(--panel-2); color: var(--muted-2); }
:root[data-theme] .rs-empty b { color: var(--text-strong); }
:root[data-theme] .rs-note { margin: 12px 0 0; }
@media (max-width: 640px) {
  :root[data-theme] .rs-cand { flex-direction: column; }
  :root[data-theme] .rs-cand .btn { align-self: stretch; justify-content: center; }
  :root[data-theme] .rs-links .btn { flex: 1; justify-content: center; }
}

/* Scan lab (admin test page for the new card finder) */
:root[data-theme] .sl-link { margin-left: auto; text-decoration: none; }
:root[data-theme] .sl-stage { position: relative; width: 100%; max-width: 900px; aspect-ratio: 4 / 3; margin: 0 auto; border-radius: 16px; overflow: hidden; background: #000; }
:root[data-theme] .sl-stage video, :root[data-theme] .sl-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
:root[data-theme] .sl-stage video { object-fit: contain; }
:root[data-theme] .sl-badge { position: absolute; left: 10px; right: 10px; bottom: 10px; padding: 6px 10px; border-radius: 10px; background: rgba(0, 0, 0, .6); color: #fff; font-size: 12.5px; font-variant-numeric: tabular-nums; }
:root[data-theme] .sl-stats { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 12px 0 4px; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
:root[data-theme] .sl-stats b { color: var(--text-strong); }
:root[data-theme] .sl-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
@media (max-width: 640px) { :root[data-theme] .sl-stage { aspect-ratio: 3 / 4; } :root[data-theme] .sl-actions .btn { flex: 1 1 45%; justify-content: center; } }

/* Company auto-fill note + flash (23 Oct) */
:root[data-theme] .cf-note { display: flex; align-items: flex-start; gap: 6px; margin-top: 6px; font-size: 12.5px; line-height: 1.4; color: var(--accent-2); }
:root[data-theme] .cf-note svg { flex: none; margin-top: 2px; }
:root[data-theme] .cf-note span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
:root[data-theme] .cf-note b { font-weight: 600; }
:root[data-theme] .cf-undo { flex: none; border: 0; background: none; padding: 0 2px; font: inherit; font-weight: 600; color: var(--accent); cursor: pointer; text-decoration: underline; }
:root[data-theme] .field.cf-flash input, :root[data-theme] .field.cf-flash select, :root[data-theme] .field.cf-flash .multiselect { box-shadow: 0 0 0 3px var(--accent-glow); transition: box-shadow .3s; }