@font-face {
  font-family: "Geist";
  src: url("../fonts/geist-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Instrument Serif";
  src: url("../fonts/instrument-serif-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Geist Mono";
  src: url("../fonts/geist-mono-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* =============================================================================
   UTILITY — SCREEN-READER ONLY
   ============================================================================= */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* =============================================================================
   CSS CUSTOM PROPERTIES - THEME SYSTEM
   Modern color system with comprehensive dark/light mode support
   ============================================================================= */

:root {
  /* Primary Colors - Light blues theme */
  --primary: oklch(0.623 0.188 259.8);
  --primary-hover: oklch(0.546 0.215 262.9);
  --secondary: oklch(0.663 0.03 267.4);
  --secondary-hover: oklch(0.551 0.023 264.4);
  --success: oklch(0.596 0.127 163.2);
  --success-hover: oklch(0.508 0.105 165.6);
  --info: oklch(0.685 0.148 237.3);
  --info-hover: oklch(0.588 0.139 242);
  --warning: oklch(0.666 0.157 58.3);
  --warning-hover: oklch(0.555 0.146 49);
  --warning-text: oklch(0.55 0.15 60);
  --danger: oklch(0.577 0.215 27.3);
  --danger-hover: oklch(0.505 0.19 27.5);

  /* Disclaimer warning color */
  --disclaimer-color: var(--warning);

  /* Background Tokens - Slate/Blue-Gray Mode */
  --bg: oklch(0.929 0.013 255.5); /* Slate 200 — lightened from Slate 300 */
  --bg-elev-1: oklch(0.96 0.008 253.9); /* Slate 100/200 blend — elevated surfaces */
  --bg-elev-2: oklch(0.869 0.02 252.9); /* Slate 300 — tertiary surfaces */
  --surface: oklch(0.984 0.003 247.9); /* Slate 50 - Cards */
  --surface-alt: oklch(1 0 0); /* White */

  /* Map existing background variables */
  --bg-primary: var(--bg);
  --bg-secondary: var(--bg-elev-1);
  --bg-tertiary: var(--bg-elev-2);
  --bg-card: var(--surface);

  /* Text Tokens */
  --text: oklch(0.252 0.021 251.6);
  --text-muted: oklch(0.376 0.031 246.9);

  /* Map existing text variables */
  --text-primary: var(--text);
  --text-secondary: var(--text-muted);
  --chip-text: oklch(0.252 0.021 251.6);
  --chip-active-outline: oklch(0 0 0 / 0.75);
  --chip-search-outline: oklch(0.723 0.192 149.6 / 0.75);

  /* Border & Shadow - Light grays */
  --border: oklch(0.711 0.035 256.8); /* Slate 400 — was identical to bg-primary */
  --border-hover: oklch(0.554 0.041 257.4); /* Slate 500 */
  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1);
  --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.15), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.15), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --back-to-top-bg: var(--surface);
  --back-to-top-border: var(--border);
  --back-to-top-text: var(--text-primary);
  --back-to-top-hover-bg: var(--bg-elev-1);
  --back-to-top-shadow: 0 2px 8px rgb(0 0 0 / 0.15);

  /* Metal-specific Colors - tuned for light mode (WCAG AA on #eef2f7) */
  --silver: oklch(0.509 0.022 262.9);
  --gold: oklch(0.507 0.134 48.2);
  --platinum: oklch(0.446 0.026 256.8);
  --palladium: oklch(0.495 0.22 293);
  --copper: oklch(0.52 0.115 50); /* STRK-305 — copper brown, AA on light bg */

  /* Inventory Type Colors (darkened for text readability on light backgrounds) */
  --type-coin-bg: oklch(0.58 0.143 55.6);
  --type-coin-text: oklch(1 0 0);
  --type-round-bg: oklch(0.492 0.026 265.6);
  --type-round-text: oklch(0.984 0.003 247.9);
  --type-bar-bg: oklch(0.559 0.115 83.7);
  --type-bar-text: oklch(1 0 0);
  --type-note-bg: oklch(0.508 0.105 165.6);
  --type-note-text: oklch(0.984 0.003 247.9);
  --type-aurum-bg: oklch(0.491 0.241 292.6);
  --type-aurum-text: oklch(1 0 0);
  --type-goldback-bg: oklch(0.652 0.132 81.6);
  --type-goldback-text: oklch(1 0 0);
  --type-silverback-bg: oklch(0.593 0.031 248.3);
  --type-silverback-text: oklch(1 0 0);
  /* STRK-235: constitutional / junk silver — muted teal-pewter, distinct from silverback */
  --type-constitutional-bg: oklch(0.585 0.046 197);
  --type-constitutional-text: oklch(1 0 0);
  --type-set-bg: oklch(0.606 0.219 292.7);
  --type-set-text: oklch(1 0 0);
  --type-other-bg: oklch(0.495 0.22 293);
  --type-other-text: oklch(0.984 0.003 247.9);

  /* Component Spacing */
  --radius-sm: 4px;
  --radius: 8px;
  --radius-lg: 12px;
  --radius-xl: 20px;
  --radius-pill: 999px;
  --spacing-xs: 0.2rem;
  --spacing-sm: 0.4rem;
  --spacing-md: 0.5rem;
  --spacing: 0.75rem;
  --spacing-lg: 1.25rem;
  --spacing-xl: 1.5rem;

  /* Type Scale — fixed rem for product UI */
  --font-size-xs: 0.6875rem;
  --font-size-sm: 0.75rem;
  --font-size-base: 0.8125rem;
  --font-size-md: 0.875rem;
  --font-size-lg: 1rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.875rem;

  /* Font Families */
  --font-body: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-heading: "Instrument Serif", Georgia, "Times New Roman", serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", "Cascadia Code", "Menlo", monospace;

  /* Transitions */
  --transition: var(--transition);

  /* STRK-25 — Semantic text on colored backgrounds */
  --text-inverse: oklch(1 0 0);

  /* STRK-25 — Focus ring */
  --focus-ring: oklch(0.623 0.188 259.8 / 0.2);

  /* STRK-25 — Hover-mix direction (black darkens for light themes) */
  --hover-mix: black;

  /* STRK-25 — Tag/badge system */
  --tag-bg: oklch(0.585 0.204 277.1 / 0.1);
  --tag-text: oklch(0.585 0.204 277.1);
  --tag-border: oklch(0.585 0.204 277.1 / 0.2);

  /* STRK-25 — Brand accent */
  --brand-gold: oklch(0.652 0.132 81.6);

  /* STRK-25 — Authority brand colors (grading services) */
  --authority-pcgs: oklch(0.546 0.215 262.9);
  --authority-ngc: oklch(0.666 0.157 58.3);
  --authority-anacs: oklch(0.596 0.127 163.2);
  --authority-icg: oklch(0.541 0.247 293);

  /* STRK-25 — Disposition badge tokens (alpha bg shared across themes; text varies) */
  --disposition-sold-bg: oklch(0.691 0.171 150.6 / 0.18);
  --disposition-sold-text: oklch(0.575 0.14 150.9);
  --disposition-traded-bg: oklch(0.594 0.159 252.3 / 0.18);
  --disposition-traded-text: oklch(0.505 0.132 252.3);
  --disposition-lost-bg: oklch(0.572 0.212 27.3 / 0.18);
  --disposition-lost-text: oklch(0.485 0.177 27);
  --disposition-gifted-bg: oklch(0.552 0.204 303.2 / 0.18);
  --disposition-gifted-text: oklch(0.451 0.191 301.8);
  --disposition-returned-bg: oklch(0.699 0.161 57.7 / 0.18);
  --disposition-returned-text: oklch(0.57 0.129 58.4);

  /* STRK-25 — Table column accent colors (alias to themed family tokens) */
  --col-qty: var(--primary);
  --col-weight: var(--secondary);
  --col-purchase: var(--success);
  --col-melt: var(--warning);
  --col-retail: var(--info);

  /* STRK-65 — Attachment icon type colors */
  --attach-pdf-bg: #fde8e8;
  --attach-pdf-fg: #c0392b;
  --attach-png-bg: #e8f4fd;
  --attach-png-fg: #2980b9;
  --attach-jpg-bg: #fef9e7;
  --attach-jpg-fg: #d4ac0d;
}

/* =============================================================================
   METALLIC DARK THEME — oklch with gold-tinted gunmetal neutrals
   Hue 85° (warm amber), chroma 0.005–0.015 for subtle warmth
   ============================================================================= */
[data-theme="dark"] {
  /* Primary Colors - Metallic Dark (warm gold accent — STRK-39) */
  --primary: oklch(0.72 0.16 75);
  --primary-hover: oklch(0.64 0.18 75);
  --secondary: oklch(0.5 0.01 85);
  --secondary-hover: oklch(0.62 0.01 85);
  --success: oklch(0.64 0.17 155);
  --success-hover: oklch(0.56 0.17 155);
  --info: oklch(0.72 0.12 220);
  --info-hover: oklch(0.63 0.12 220);
  --warning: oklch(0.72 0.16 80);
  --warning-hover: oklch(0.63 0.16 80);
  --danger: oklch(0.58 0.22 25);
  --danger-hover: oklch(0.5 0.22 25);

  /* Disclaimer warning color */
  --disclaimer-color: var(--danger);

  /* Metal-specific Colors - metallic dark */
  /* Metals — slate-parity oklch values (cool silver/platinum/palladium hues
     contrast against warm-gunmetal bg, producing visible tint when blended in
     gradients/sparklines/headers; gold stays warm but high-chroma stands out
     against the low-chroma bg). Matches the default Slate theme appearance,
     theme-appropriate (oklch instead of hex). STRK-25. */
  --silver: oklch(0.851 0.011 248.8); /* #d1d5db equivalent */
  --gold: oklch(0.811 0.157 79); /* #fbbf24 equivalent */
  --platinum: oklch(0.961 0.003 264.5); /* #f3f4f6 equivalent */
  --palladium: oklch(0.794 0.119 305.9); /* #d8b4fe equivalent */
  --copper: oklch(0.75 0.11 55); /* STRK-305 — lightened copper for dark bg */

  /* Inventory Type Colors */
  --type-coin-bg: oklch(0.52 0.14 60);
  --type-coin-text: #ffffff;
  --type-round-bg: oklch(0.65 0.01 85);
  --type-round-text: oklch(0.2 0.01 85);
  --type-bar-bg: oklch(0.85 0.14 95);
  --type-bar-text: oklch(0.2 0.01 85);
  --type-note-bg: oklch(0.5 0.12 165);
  --type-note-text: #ffffff;
  --type-aurum-bg: oklch(0.55 0.2 295);
  --type-aurum-text: #ffffff;
  --type-goldback-bg: oklch(0.68 0.14 85);
  --type-goldback-text: oklch(0.2 0.01 85);
  --type-silverback-bg: oklch(0.65 0.01 250);
  --type-silverback-text: oklch(0.2 0.01 85);
  /* STRK-235: constitutional / junk silver */
  --type-constitutional-bg: oklch(0.66 0.05 197);
  --type-constitutional-text: oklch(0.2 0.01 197);
  --type-set-bg: oklch(0.62 0.18 295);
  --type-set-text: oklch(0.2 0.01 85);
  --type-other-bg: oklch(0.55 0.2 295);
  --type-other-text: #ffffff;

  /* Background Colors - Gunmetal with gold warmth */
  --bg-primary: oklch(0.18 0.008 85);
  --bg-secondary: oklch(0.22 0.008 85);
  --bg-tertiary: oklch(0.28 0.007 85);
  --bg-card: oklch(0.22 0.01 85);

  /* Text Colors - Warm neutrals */
  --text-primary: oklch(0.95 0.005 85);
  --text-secondary: oklch(0.8 0.008 85);
  --text-muted: oklch(0.65 0.012 85);
  --chip-text: oklch(0.95 0.005 85);
  --chip-active-outline: oklch(0.95 0.005 85 / 0.9);
  --chip-search-outline: oklch(0.7 0.18 150 / 0.8);

  /* Border & Shadow - Warm gunmetal */
  --border: oklch(0.32 0.008 85);
  --border-hover: oklch(0.4 0.01 85);
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
  --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.3), 0 2px 4px -2px rgb(0 0 0 / 0.3);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.3), 0 4px 6px -4px rgb(0 0 0 / 0.3);
  --back-to-top-bg: oklch(0.22 0.008 85);
  --back-to-top-border: oklch(0.4 0.01 85);
  --back-to-top-text: oklch(0.93 0.005 85);
  --back-to-top-hover-bg: oklch(0.28 0.007 85);
  --back-to-top-shadow: 0 2px 8px rgb(0 0 0 / 0.4);

  /* STRK-25 — Semantic text on colored backgrounds */
  --text-inverse: oklch(0.98 0 0);

  /* STRK-25 — Focus ring */
  --focus-ring: oklch(0.72 0.16 75 / 0.2);

  /* STRK-25 — Hover-mix direction (white lightens for dark themes) */
  --hover-mix: white;

  /* STRK-25 — Tag/badge system */
  --tag-bg: oklch(0.55 0.2 280 / 0.15);
  --tag-text: oklch(0.7 0.15 280);
  --tag-border: oklch(0.55 0.2 280 / 0.25);

  /* STRK-25 — Brand accent */
  --brand-gold: oklch(0.68 0.14 85);

  /* STRK-25 — Authority brand colors (grading services) */
  --authority-pcgs: oklch(0.63 0.18 255);
  --authority-ngc: oklch(0.72 0.16 80);
  --authority-anacs: oklch(0.64 0.17 155);
  --authority-icg: oklch(0.55 0.2 295);

  /* STRK-25 — Disposition badge tokens (alpha bg shared; text lightened for dark contrast) */
  --disposition-sold-bg: hsla(142, 60%, 45%, 0.18);
  --disposition-sold-text: hsla(142, 60%, 65%, 1);
  --disposition-traded-bg: hsla(210, 70%, 50%, 0.18);
  --disposition-traded-text: hsla(210, 70%, 70%, 1);
  --disposition-lost-bg: hsla(0, 70%, 50%, 0.18);
  --disposition-lost-text: hsla(0, 70%, 70%, 1);
  --disposition-gifted-bg: hsla(270, 60%, 55%, 0.18);
  --disposition-gifted-text: hsla(270, 60%, 75%, 1);
  --disposition-returned-bg: hsla(30, 80%, 50%, 0.18);
  --disposition-returned-text: hsla(30, 80%, 70%, 1);

  /* STRK-25 — Table column accent colors (alias to themed family tokens) */
  --col-qty: var(--primary);
  --col-weight: var(--secondary);
  --col-purchase: var(--success);
  --col-melt: var(--warning);
  --col-retail: var(--info);

  /* STRK-65 — Attachment icon type colors */
  --attach-pdf-bg: rgba(192, 57, 43, 0.18);
  --attach-pdf-fg: #e57373;
  --attach-png-bg: rgba(41, 128, 185, 0.18);
  --attach-png-fg: #64b5f6;
  --attach-jpg-bg: rgba(212, 172, 13, 0.18);
  --attach-jpg-fg: #ffd54f;
}

/* =============================================================================
   SLATE THEME — Original Tailwind Slate dark palette (preserved as 4th option)
   ============================================================================= */
[data-theme="slate"] {
  /* Primary Colors - Slate */
  --primary: #3b82f6;
  --primary-hover: #2563eb;
  --secondary: #6b7280;
  --secondary-hover: #9ca3af;
  --success: #10b981;
  --success-hover: #059669;
  --info: #38bdf8;
  --info-hover: #0ea5e9;
  --warning: #f59e0b;
  --warning-hover: #d97706;
  --danger: #ef4444;
  --danger-hover: #dc2626;

  /* Disclaimer warning color */
  --disclaimer-color: var(--danger);

  /* Metal-specific Colors - slate */
  --silver: #d1d5db;
  --gold: #fbbf24;
  --platinum: #f3f4f6;
  --palladium: #d8b4fe;
  --copper: #d99668; /* STRK-305 — lightened copper for slate bg */

  /* Inventory Type Colors */
  --type-coin-bg: #b45309;
  --type-coin-text: #ffffff;
  --type-round-bg: #9ca3af;
  --type-round-text: #1e293b;
  --type-bar-bg: #fde047;
  --type-bar-text: #1e293b;
  --type-note-bg: #047857;
  --type-note-text: #ffffff;
  --type-aurum-bg: #8b5cf6;
  --type-aurum-text: #ffffff;
  --type-goldback-bg: #d4a017;
  --type-goldback-text: #1e293b;
  --type-silverback-bg: #94a3b8;
  --type-silverback-text: #1e293b;
  /* STRK-235: constitutional / junk silver */
  --type-constitutional-bg: #6f9aa3;
  --type-constitutional-text: #1e293b;
  --type-set-bg: #a78bfa;
  --type-set-text: #1e293b;
  --type-other-bg: #8b5cf6;
  --type-other-text: #ffffff;

  /* Background Colors - Slate */
  --bg-primary: #0f172a;
  --bg-secondary: #1e293b;
  --bg-tertiary: #334155;
  --bg-card: #1e293b;

  /* Text Colors - Slate */
  --text-primary: #f8fafc;
  --text-secondary: #cbd5e1;
  --text-muted: #94a3b8;
  --chip-text: #f8fafc;
  --chip-active-outline: rgba(255, 255, 255, 0.9);
  --chip-search-outline: rgba(34, 197, 94, 0.8);

  /* Border & Shadow - Slate */
  --border: #334155;
  --border-hover: #475569;
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
  --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.3), 0 2px 4px -2px rgb(0 0 0 / 0.3);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.3), 0 4px 6px -4px rgb(0 0 0 / 0.3);
  --back-to-top-bg: #1e293b;
  --back-to-top-border: #475569;
  --back-to-top-text: #f1f5f9;
  --back-to-top-hover-bg: #334155;
  --back-to-top-shadow: 0 2px 8px rgb(0 0 0 / 0.4);

  /* STRK-25 — Semantic text on colored backgrounds */
  --text-inverse: #ffffff;

  /* STRK-25 — Focus ring */
  --focus-ring: oklch(0.623 0.188 259.8 / 0.2);

  /* STRK-25 — Hover-mix direction (white lightens for dark themes) */
  --hover-mix: white;

  /* STRK-25 — Tag/badge system */
  --tag-bg: rgba(99, 102, 241, 0.1);
  --tag-text: #818cf8;
  --tag-border: rgba(99, 102, 241, 0.2);

  /* STRK-25 — Brand accent */
  --brand-gold: #d4a017;

  /* STRK-25 — Authority brand colors (grading services) */
  --authority-pcgs: #60a5fa;
  --authority-ngc: #fbbf24;
  --authority-anacs: #34d399;
  --authority-icg: #a78bfa;

  /* STRK-25 — Disposition badge tokens (alpha bg shared; text lightened for dark contrast) */
  --disposition-sold-bg: hsla(142, 60%, 45%, 0.18);
  --disposition-sold-text: hsla(142, 60%, 65%, 1);
  --disposition-traded-bg: hsla(210, 70%, 50%, 0.18);
  --disposition-traded-text: hsla(210, 70%, 70%, 1);
  --disposition-lost-bg: hsla(0, 70%, 50%, 0.18);
  --disposition-lost-text: hsla(0, 70%, 70%, 1);
  --disposition-gifted-bg: hsla(270, 60%, 55%, 0.18);
  --disposition-gifted-text: hsla(270, 60%, 75%, 1);
  --disposition-returned-bg: hsla(30, 80%, 50%, 0.18);
  --disposition-returned-text: hsla(30, 80%, 70%, 1);

  /* STRK-25 — Table column accent colors (alias to themed family tokens) */
  --col-qty: var(--primary);
  --col-weight: var(--secondary);
  --col-purchase: var(--success);
  --col-melt: var(--warning);
  --col-retail: var(--info);

  /* STRK-65 — Attachment icon type colors (inherit dark values) */
  --attach-pdf-bg: rgba(192, 57, 43, 0.18);
  --attach-pdf-fg: #e57373;
  --attach-png-bg: rgba(41, 128, 185, 0.18);
  --attach-png-fg: #64b5f6;
  --attach-jpg-bg: rgba(212, 172, 13, 0.18);
  --attach-jpg-fg: #ffd54f;
}

[data-theme="sepia"] {
  /* Primary Colors - Sepia Mode */
  --primary: oklch(0.569 0.133 50.9);
  --primary-hover: oklch(0.492 0.116 50.7);
  --secondary: oklch(0.571 0.053 72.7);
  --secondary-hover: oklch(0.484 0.048 80.5);
  --success: oklch(0.603 0.117 130.4);
  --success-hover: oklch(0.536 0.106 131.3);
  --info: oklch(0.535 0.085 212.1);
  --info-hover: oklch(0.455 0.072 212.2);
  --warning: oklch(0.666 0.157 58.3);
  --warning-hover: oklch(0.555 0.146 49);
  --warning-text: oklch(0.55 0.15 60);
  --danger: oklch(0.577 0.215 27.3);
  --danger-hover: oklch(0.505 0.19 27.5);

  /* Metal-specific Colors - Sepia tone (darkened for WCAG AA text contrast on warm bg) */
  --silver: oklch(0.531 0.01 67.6);
  --gold: oklch(0.513 0.102 86.8);
  --platinum: oklch(0.468 0 0);
  --palladium: oklch(0.468 0.043 67.7);
  --copper: oklch(0.48 0.085 50); /* STRK-305 — muted copper, AA on warm bg */

  /* Inventory Type Colors (darkened for text readability on sepia backgrounds) */
  --type-coin-bg: oklch(0.525 0.131 52.3);
  --type-coin-text: oklch(1 0 0);
  --type-round-bg: oklch(0.453 0.021 67.3);
  --type-round-text: oklch(1 0 0);
  --type-bar-bg: oklch(0.543 0.111 88.6);
  --type-bar-text: oklch(1 0 0);
  --type-note-bg: oklch(0.47 0.092 169.2);
  --type-note-text: oklch(1 0 0);
  --type-aurum-bg: oklch(0.491 0.241 292.6);
  --type-aurum-text: oklch(1 0 0);
  --type-goldback-bg: oklch(0.581 0.124 73.2);
  --type-goldback-text: oklch(1 0 0);
  --type-silverback-bg: oklch(0.551 0.023 264.4);
  --type-silverback-text: oklch(1 0 0);
  /* STRK-235: constitutional / junk silver */
  --type-constitutional-bg: oklch(0.55 0.044 195);
  --type-constitutional-text: oklch(1 0 0);
  --type-set-bg: oklch(0.541 0.247 293);
  --type-set-text: oklch(1 0 0);
  --type-other-bg: oklch(0.473 0.162 298.9);
  --type-other-text: oklch(1 0 0);

  /* Background Colors - Sepia Mode (Parchment/Cream) */
  --bg-primary: oklch(0.923 0.029 89.6); /* Warm parchment */
  --bg-secondary: oklch(0.892 0.032 89.1); /* Aged linen */
  --bg-tertiary: oklch(0.847 0.036 88.8); /* Warm stone */
  --bg-card: oklch(0.955 0.018 89.4); /* Light cream for cards */
  --surface-alt: oklch(0.973 0.015 90.2); /* Warm white — brightest sepia surface */

  /* Text Colors - Sepia Mode */
  --text-primary: oklch(0.314 0.039 86.7);
  --text-secondary: oklch(0.403 0.039 85.2);
  --text-muted: oklch(0.514 0.033 84.5);
  --chip-text: oklch(0.314 0.039 86.7);
  --chip-active-outline: oklch(0.314 0.039 86.7 / 0.8);
  --chip-search-outline: oklch(0.526 0.109 133.6 / 0.75);

  /* Border & Shadow - Sepia Mode */
  --border: oklch(0.786 0.038 86.2);
  --border-hover: oklch(0.685 0.048 84.5);
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.12);
  --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);

  /* STRK-25 — Semantic text on colored backgrounds */
  --text-inverse: oklch(1 0 0);

  /* STRK-25 — Focus ring */
  --focus-ring: oklch(0.569 0.133 50.9 / 0.2);

  /* STRK-25 — Hover-mix direction (black darkens for light themes) */
  --hover-mix: black;

  /* STRK-25 — Tag/badge system */
  --tag-bg: oklch(0.515 0.097 69.1 / 0.1);
  --tag-text: oklch(0.491 0.241 292.6);
  --tag-border: oklch(0.515 0.097 69.1 / 0.2);

  /* STRK-25 — Brand accent */
  --brand-gold: oklch(0.58 0.119 78.3);

  /* STRK-25 — Authority brand colors (grading services) */
  --authority-pcgs: oklch(0.488 0.217 264.4);
  --authority-ngc: oklch(0.555 0.146 49);
  --authority-anacs: oklch(0.508 0.105 165.6);
  --authority-icg: oklch(0.491 0.241 292.6);

  /* STRK-25 — Disposition badge tokens (alpha bg shared; text saturated for sepia contrast) */
  --disposition-sold-bg: oklch(0.691 0.171 150.6 / 0.18);
  --disposition-sold-text: oklch(0.575 0.14 150.9);
  --disposition-traded-bg: oklch(0.594 0.159 252.3 / 0.18);
  --disposition-traded-text: oklch(0.505 0.132 252.3);
  --disposition-lost-bg: oklch(0.572 0.212 27.3 / 0.18);
  --disposition-lost-text: oklch(0.485 0.177 27);
  --disposition-gifted-bg: oklch(0.552 0.204 303.2 / 0.18);
  --disposition-gifted-text: oklch(0.451 0.191 301.8);
  --disposition-returned-bg: oklch(0.699 0.161 57.7 / 0.18);
  --disposition-returned-text: oklch(0.57 0.129 58.4);

  /* STRK-25 — Table column accent colors (alias to themed family tokens) */
  --col-qty: var(--primary);
  --col-weight: var(--secondary);
  --col-purchase: var(--success);
  --col-melt: var(--warning);
  --col-retail: var(--info);

  /* STRK-65 — Attachment icon type colors */
  --attach-pdf-bg: rgba(160, 40, 20, 0.12);
  --attach-pdf-fg: #a02814;
  --attach-png-bg: rgba(30, 80, 140, 0.12);
  --attach-png-fg: #1e508c;
  --attach-jpg-bg: rgba(140, 90, 0, 0.12);
  --attach-jpg-fg: #8c5a00;
}

/* =============================================================================
   BASE STYLES & RESET
   ============================================================================= */

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

html {
  font-family: var(--font-body);
  background: var(--bg-primary);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.6;
}

body {
  max-width: 1600px;
  width: 100%;
  margin: var(--spacing-lg) auto;
  padding: var(--spacing);
  transition: var(--transition);
  overflow-x: hidden; /* Prevent horizontal overflow on body */
  box-sizing: border-box;
}

/* =============================================================================
   TYPOGRAPHY
   ============================================================================= */

h1 {
  font-family: var(--font-heading);
  font-size: var(--font-size-3xl);
  font-weight: 400;
  color: var(--primary);
  margin-bottom: var(--spacing);
  letter-spacing: -0.025em;
}

h2 {
  font-family: var(--font-heading);
  font-size: var(--font-size-xl);
  font-weight: 400;
  color: var(--text-primary);
  margin-bottom: var(--spacing-sm);
}

.section-title {
  text-align: center;
  font-family: var(--font-heading);
  margin: var(--spacing-lg) 0;
}

.modal-header .section-title {
  margin: 0;
}

label {
  display: block;
  font-weight: 500;
  margin-bottom: 0.25rem;
  color: var(--text-primary);
  font-size: var(--font-size-md);
}

/* =============================================================================
   LAYOUT COMPONENTS
   ============================================================================= */

.app-header {
  display: flex;
  align-items: center;
  margin-bottom: var(--spacing-xl);
  width: 100%;
  padding: var(--spacing);
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  /* min-height removed — let content determine header height (STAK-514) */
}

/* Header action buttons — 2-col grid at narrow widths, flex row at wider */
.app-header-actions {
  margin-left: auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-md);
  align-items: start;
  flex-shrink: 0;
}
@media (min-width: 580px) {
  .app-header-actions {
    display: flex;
    align-items: center;
  }
}

.app-logo-group {
  position: relative;
  display: flex;
  align-items: center;
  align-self: stretch;
  flex: 1;
  min-width: 0;
  max-width: 800px;
}

.app-logo {
  display: flex;
  align-items: center;
  margin: 0;
  height: 100%;
  cursor: pointer;
}

.app-logo svg {
  display: block;
}

/* StakTrakr Logo Styles */
.stackr-logo {
  height: 56px;
  width: auto;
}

/* Default state - show light mode */
.stackr-logo .light-mode {
  display: block;
}

.stackr-logo .dark-mode {
  display: none;
}

.stackr-logo .sepia-mode {
  display: none;
}

/* Dark theme */
:is([data-theme="dark"], [data-theme="slate"]) .stackr-logo .light-mode {
  display: none;
}

:is([data-theme="dark"], [data-theme="slate"]) .stackr-logo .dark-mode {
  display: block;
}

:is([data-theme="dark"], [data-theme="slate"]) .stackr-logo .sepia-mode {
  display: none;
}

/* Light theme (explicit) */
[data-theme="light"] .stackr-logo .light-mode {
  display: block;
}

[data-theme="light"] .stackr-logo .dark-mode {
  display: none;
}

[data-theme="light"] .stackr-logo .sepia-mode {
  display: none;
}

/* Sepia theme */
[data-theme="sepia"] .stackr-logo .light-mode {
  display: none;
}

[data-theme="sepia"] .stackr-logo .dark-mode {
  display: none;
}

[data-theme="sepia"] .stackr-logo .sepia-mode {
  display: block;
}

/* System preference detection (only when <html> has no explicit theme) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .stackr-logo .light-mode {
    display: none;
  }
  :root:not([data-theme]) .stackr-logo .dark-mode {
    display: block;
  }
}

/* Responsive scaling */
@media (max-width: 768px) {
}

@media (max-width: 480px) {
  html {
    font-size: var(
      --font-size-md
    ); /* Down from 16px default — 12.5% global reduction for 360-412px phones */
  }
}

.container {
  display: grid;
  gap: var(--spacing-xl);
  max-width: 100%;
  overflow: hidden; /* Prevent container overflow */
  box-sizing: border-box;
}

section {
  background: var(--bg-card);
  padding: var(--spacing-xl);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  transition: var(--transition);
  width: 100%;
  max-width: 100%;
  min-width: 0; /* Prevent grid-item blowout on narrow viewports */
  overflow: hidden; /* Ensure no content overflows the section */
  box-sizing: border-box;
}

.app-footer {
  margin-top: var(--spacing-xl);
  text-align: center;
  font-size: var(--font-size-lg);
  color: var(--text-secondary);
  padding: var(--spacing);
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}

.app-footer a {
  color: var(--primary);
}

.footer-meta {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  line-height: 1.6;
}

.footer-badges {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

.footer-badges img {
  vertical-align: middle;
}

/* ── Shield badge component ──
   Two-part badges matching shields.io flat-square style.
   Structure: <a class="shield-badge"><span class="shield-badge-label">label</span><span class="shield-badge-value shield-badge-value--COLOR">value</span></a>
   Colors use the shields.io palette with white text on all backgrounds. */
.shield-badge {
  display: inline-flex;
  height: 20px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  font-family: "Verdana", "DejaVu Sans", sans-serif;
  font-size: var(--font-size-xs);
  vertical-align: middle;
  text-decoration: none;
  line-height: 20px;
  cursor: pointer;
  border: none;
  padding: 0;
  background: none;
}
.shield-badge:hover {
  text-decoration: none;
  opacity: 0.85;
}
.shield-badge-label {
  padding: 0 6px;
  background: #555;
  color: #fff;
  white-space: nowrap;
}
.shield-badge-value {
  padding: 0 6px;
  white-space: nowrap;
}
/* shields.io palette — WCAG AA compliant contrast
   Dark text (#1a1a1a) on bright backgrounds (green/yellow/orange/grey)
   White text (#fff) on dark backgrounds (red/blue/label grey) */
.shield-badge-value--brightgreen {
  background: #4c1;
  color: #1a1a1a;
}
.shield-badge-value--green {
  background: #97ca00;
  color: #1a1a1a;
}
.shield-badge-value--yellow {
  background: #dfb317;
  color: #1a1a1a;
}
.shield-badge-value--orange {
  background: #fe7d37;
  color: #1a1a1a;
}
.shield-badge-value--red {
  background: #e05d44;
  color: #fff;
}
.shield-badge-value--blue {
  background: #0969da;
  color: #fff;
}
.shield-badge-value--grey {
  background: #9f9f9f;
  color: #1a1a1a;
}

/* Legacy .version-badge — no longer used in footer, removed in STAK-536 */

/* Environment badge (BETA / PREVIEW / LOCAL) — STAK-376 */
.env-badge {
  position: absolute;
  bottom: -2px;
  left: 2px;
  display: inline-flex;
  align-items: center;
  font-size: var(--font-size-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 1px 6px;
  border-radius: var(--radius);
  text-transform: uppercase;
  line-height: 1.4;
  z-index: 1;
  pointer-events: none;
}
.env-badge--beta {
  background: var(--warning, #f0ad4e);
  color: #1a1a1a;
}
.env-badge--preview {
  background: var(--info, #5bc0de);
  color: #1a1a1a;
}
.env-badge--local {
  background: var(--text-muted, #999);
  color: #fff;
}

/* =============================================================================
   DISPOSITION STYLES — Realized Gains / Disposition feature (STAK-72)
   ============================================================================= */

/* --- Disposed row (table view) — faded with strikethrough name ------------ */
.disposed-row {
  opacity: 0.55;
}
.disposed-row .filter-text {
  text-decoration: line-through;
}

/* --- Disposed card (card view) — faded ----------------------------------- */
.disposed-card {
  opacity: 0.55;
}

/* --- Disposition badge — inline pill (mirrors .env-badge pattern) -------- */
.disposition-badge {
  display: inline-block;
  font-size: var(--font-size-xs);
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--radius-lg);
  margin-left: 6px;
  line-height: 1.4;
  vertical-align: middle;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.disposition-badge--sold {
  background: var(--disposition-sold-bg);
  color: var(--disposition-sold-text);
}
.disposition-badge--traded {
  background: var(--disposition-traded-bg);
  color: var(--disposition-traded-text);
}

/* ── Trade linking ─────────────────────────────────────────────── */

/* Dispose-form: item picker section */
.trade-link-section {
  margin-top: var(--spacing);
  padding-top: var(--spacing);
  border-top: 1px solid color-mix(in oklch, var(--border) 50%, transparent);
}
.trade-link-section__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spacing-sm);
}
.trade-link-section__header label {
  font-size: var(--font-size-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--primary);
}
.trade-value-summary {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--text-primary);
}

/* Search input with icon */
.trade-item-picker {
  position: relative;
}
.trade-item-picker .trade-search-icon {
  position: absolute;
  left: 0.6rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-secondary);
  pointer-events: none;
  font-size: var(--font-size-sm);
}
.trade-item-picker input[type="search"] {
  width: 100%;
  background: var(--glass-input-bg, rgba(0, 0, 0, 0.03));
  border: 1.5px solid var(--glass-input-border, var(--border));
  border-radius: var(--radius);
  padding: 0.4rem 0.6rem 0.4rem 2rem;
  font-size: var(--font-size-md);
  color: var(--text-primary);
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}
.trade-item-picker input[type="search"]:focus {
  border-color: var(--primary);
  outline: none;
  box-shadow: 0 0 0 2px color-mix(in oklch, var(--primary) 20%, transparent);
}
.trade-item-picker input[type="search"]::placeholder {
  color: var(--text-secondary);
}

/* Search suggestions dropdown */
.trade-item-suggestions {
  margin-top: var(--spacing-xs);
  max-height: 160px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card, var(--bg-primary));
}
.trade-item-suggestion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  cursor: pointer;
  transition: background 0.1s ease;
  border-bottom: 1px solid color-mix(in oklch, var(--border) 30%, transparent);
  font-size: var(--font-size-sm);
}
.trade-item-suggestion:last-child {
  border-bottom: none;
}
.trade-item-suggestion:hover,
.trade-item-suggestion:focus {
  background: var(--bg-secondary);
}
.trade-item-suggestion .result-name {
  font-weight: 500;
  color: var(--text-primary);
}
.trade-item-suggestion .result-meta {
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
}

/* Linked items as chips */
.trade-linked-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: var(--spacing-sm);
}
.trade-linked-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px 3px 10px;
  background: var(--disposition-traded-bg);
  color: var(--disposition-traded-text);
  border-radius: var(--radius-pill);
  font-size: var(--font-size-xs);
  font-weight: 600;
}
.trade-linked-chip .chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: color-mix(in oklch, var(--disposition-traded-text) 20%, transparent);
  color: var(--disposition-traded-text);
  font-size: 10px;
  cursor: pointer;
  border: none;
  line-height: 1;
  transition: background 0.15s;
}
.trade-linked-chip .chip-remove:hover {
  background: color-mix(in oklch, var(--disposition-traded-text) 35%, transparent);
}

/* Add new item button (dashed) */
.trade-add-new-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 8px 10px;
  margin-top: var(--spacing-xs);
  background: var(--glass-input-bg, rgba(0, 0, 0, 0.03));
  border: 1.5px dashed var(--border);
  border-radius: var(--radius);
  color: var(--primary);
  font-size: var(--font-size-sm);
  font-weight: 600;
  cursor: pointer;
  transition:
    border-color 0.15s,
    background 0.15s;
}
.trade-add-new-btn:hover {
  border-color: var(--primary);
  background: color-mix(in oklch, var(--primary) 8%, transparent);
}
.trade-add-new-btn .add-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: color-mix(in oklch, var(--primary) 15%, transparent);
  font-size: var(--font-size-md);
  font-weight: 700;
  line-height: 1;
  flex-shrink: 0;
}
.trade-add-new-btn .add-hint {
  color: var(--text-secondary);
  font-weight: 400;
  font-size: var(--font-size-xs);
}

/* Spot value labels */
.trade-spot-label {
  font-size: var(--font-size-xs);
  font-weight: 500;
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}
.trade-spot-label.auto {
  background: color-mix(in oklch, var(--success) 15%, transparent);
  color: var(--success);
}
.trade-spot-label.custom {
  background: color-mix(in oklch, var(--warning) 15%, transparent);
  color: var(--warning-text, var(--warning));
}

/* Spot breakdown table (dispose form) */
.trade-spot-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--font-size-xs);
  margin-top: var(--spacing-sm);
}
.trade-spot-table th {
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  text-align: left;
  padding: 3px 6px;
  border-bottom: 1px solid var(--border);
}
.trade-spot-table td {
  padding: 4px 6px;
  color: var(--text-primary);
  border-bottom: 1px solid color-mix(in oklch, var(--border) 30%, transparent);
}
.trade-spot-table tr:last-child td {
  border-bottom: none;
}
.trade-spot-table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.trade-spot-table .total-row td {
  font-weight: 700;
  border-top: 1px solid var(--border);
  padding-top: 6px;
}

/* View modal: received items table */
.trade-items-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--font-size-sm);
  margin-top: var(--spacing-sm);
}
.trade-items-table th {
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-align: left;
  padding: 4px 6px;
  border-bottom: 1px solid var(--border);
}
.trade-items-table td {
  padding: 6px;
  border-bottom: 1px solid color-mix(in oklch, var(--border) 40%, transparent);
  color: var(--text-primary);
  vertical-align: middle;
}
.trade-items-table tr:last-child td {
  border-bottom: none;
}
.trade-items-table .item-name {
  font-weight: 500;
  color: var(--primary);
  cursor: pointer;
  text-decoration: none;
  background: none;
  border: none;
  font-size: inherit;
  padding: 0;
}
.trade-items-table .item-name:hover {
  text-decoration: underline;
}
.trade-items-table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.trade-items-table .trade-missing-item {
  color: var(--text-secondary);
  font-style: italic;
}

/* View modal: comparison bar */
.trade-comparison {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing);
  margin-top: var(--spacing-sm);
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: var(--font-size-sm);
}
.trade-comparison-side {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.trade-comparison-side .comp-label {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.trade-comparison-side .comp-value {
  font-size: var(--font-size-md);
  font-weight: 600;
  color: var(--text-primary);
}
.trade-comparison-arrow {
  font-size: var(--font-size-lg);
  color: var(--text-secondary);
}
.trade-comparison-verdict {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
}
.trade-comparison-verdict .comp-label {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.trade-comparison-verdict .comp-value {
  font-size: var(--font-size-md);
  font-weight: 700;
}
.trade-comparison-verdict .comp-value.gain {
  color: var(--success);
}
.trade-comparison-verdict .comp-value.loss {
  color: var(--danger);
}

/* View modal: provenance line (received item) */
.trade-provenance-line {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing);
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  line-height: 1.4;
}
.trade-provenance-line .prov-icon {
  font-size: var(--font-size-lg);
  flex-shrink: 0;
}
.trade-provenance-line .prov-link {
  color: var(--primary);
  text-decoration: none;
  font-weight: 500;
  cursor: pointer;
  background: none;
  border: none;
  font-size: inherit;
  padding: 0;
}
.trade-provenance-line .prov-link:hover {
  text-decoration: underline;
}

/* View modal: unlink button */
.trade-unlink-btn {
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--danger);
  background: none;
  border: 1px solid color-mix(in oklch, var(--danger) 30%, transparent);
  border-radius: var(--radius-pill);
  padding: 3px 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: all 0.15s;
}
.trade-unlink-btn:hover {
  background: color-mix(in oklch, var(--danger) 10%, transparent);
  border-color: var(--danger);
}

/* View modal: edit trade inline controls */
.trade-edit-toggle {
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--primary);
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  gap: 4px;
  transition: background 0.15s;
}
.trade-edit-toggle:hover {
  background: color-mix(in oklch, var(--primary) 12%, transparent);
}
.trade-edit-toggle svg {
  width: 12px;
  height: 12px;
}
.trade-edit-actions {
  display: flex;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-sm);
}
.trade-edit-actions .btn-sm {
  padding: 4px 12px;
  font-size: var(--font-size-xs);
  font-weight: 700;
  border-radius: var(--radius-pill);
  border: none;
  cursor: pointer;
  transition: filter 0.15s;
}
.trade-edit-actions .btn-sm.save {
  background: var(--primary);
  color: var(--text-inverse);
}
.trade-edit-actions .btn-sm.save:hover {
  filter: brightness(1.1);
}
.trade-edit-actions .btn-sm.cancel {
  background: var(--glass-input-bg, rgba(0, 0, 0, 0.03));
  border: 1px solid var(--glass-input-border, var(--border));
  color: var(--text-primary);
}
.trade-edit-actions .btn-sm.cancel:hover {
  background: var(--glass-input-focus-bg, rgba(0, 0, 0, 0.07));
}

/* Responsive */
@media (max-width: 560px) {
  .trade-comparison {
    flex-wrap: wrap;
  }
}
.disposition-badge--lost {
  background: var(--disposition-lost-bg);
  color: var(--disposition-lost-text);
}
.disposition-badge--gifted {
  background: var(--disposition-gifted-bg);
  color: var(--disposition-gifted-text);
}
.disposition-badge--returned {
  background: var(--disposition-returned-bg);
  color: var(--disposition-returned-text);
}

/* Dark theme badge overrides — lighter text for contrast */
:is([data-theme="dark"], [data-theme="slate"]) .disposition-badge--sold {
  color: var(--disposition-sold-text);
}
:is([data-theme="dark"], [data-theme="slate"]) .disposition-badge--traded {
  color: var(--disposition-traded-text);
}
:is([data-theme="dark"], [data-theme="slate"]) .disposition-badge--lost {
  color: var(--disposition-lost-text);
}
:is([data-theme="dark"], [data-theme="slate"]) .disposition-badge--gifted {
  color: var(--disposition-gifted-text);
}
:is([data-theme="dark"], [data-theme="slate"]) .disposition-badge--returned {
  color: var(--disposition-returned-text);
}

/* --- Remove Item / Disposition modal form layout ------------------------- */
#removeItemModal .modal-body {
  padding: var(--spacing-lg, 1.25rem);
}
#removeItemModal label {
  display: block;
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 0.3rem;
}
#removeItemModal select,
#removeItemModal input[type="date"],
#removeItemModal input[type="number"],
#removeItemModal input[type="text"],
#removeItemModal textarea {
  width: 100%;
  background: var(--glass-input-bg, rgba(0, 0, 0, 0.03));
  border: 1.5px solid var(--glass-input-border, var(--border));
  border-radius: var(--radius);
  padding: 0.4rem 0.6rem;
  font-size: var(--font-size-md);
  color: var(--text-primary);
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}
#removeItemModal select:focus,
#removeItemModal input:focus,
#removeItemModal textarea:focus {
  border-color: var(--accent, #3b82f6);
  outline: none;
  box-shadow: 0 0 0 2px hsla(217, 91%, 60%, 0.15);
}
#removeItemModal textarea {
  resize: vertical;
  min-height: 3.5rem;
}

/* --- Pill-style buttons for all modal footers ---------------------------- */
.modal-footer .btn {
  border-radius: var(--radius-pill);
  padding: 0.4rem 1rem;
  font-size: var(--font-size-base);
  font-weight: 700;
}
.modal-footer .btn.secondary {
  background: var(--glass-input-bg, rgba(0, 0, 0, 0.04));
  border: 1px solid var(--glass-input-border, var(--border));
  color: var(--text-primary);
}
.modal-footer .btn.secondary:hover {
  background: var(--glass-input-focus-bg, rgba(0, 0, 0, 0.07));
  border-color: var(--primary);
}
.modal-footer .btn.danger {
  border: 1px solid var(--danger);
}

/* --- Toggle switch (iOS-style) ------------------------------------------- */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 40px;
  min-width: 40px;
  height: 22px;
  flex-shrink: 0;
}
.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}
.toggle-switch .toggle-track {
  position: absolute;
  inset: 0;
  background: var(--bg-tertiary, rgba(0, 0, 0, 0.1));
  border: 1.5px solid var(--border);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition:
    background 0.2s ease,
    border-color 0.2s ease;
}
.toggle-switch .toggle-track::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: var(--text-secondary);
  border-radius: 50%;
  transition:
    transform 0.2s ease,
    background 0.2s ease;
}
.toggle-switch input:checked + .toggle-track {
  background: var(--primary);
  border-color: var(--primary);
}
.toggle-switch input:checked + .toggle-track::after {
  transform: translateX(18px);
  background: var(--text-inverse);
}

/* Toggle card — reusable row with toggle + label text */
.dispose-toggle-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.75rem;
  background: var(--bg-tertiary, rgba(0, 0, 0, 0.04));
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: border-color 0.2s ease;
  margin-bottom: 0.75rem;
}
.dispose-toggle-card:hover {
  border-color: var(--primary);
}
.dispose-toggle-card > span:last-child {
  font-size: var(--font-size-md);
  font-weight: 600;
  color: var(--text-primary);
}

.storage-line a {
  margin-left: var(--spacing-sm);
}

/* Multi-color storage bar (localStorage + IndexedDB) */
.storage-bar {
  display: inline-flex;
  vertical-align: middle;
  margin-left: var(--spacing-sm);
  width: 180px;
  height: 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background-color: var(--bg-tertiary);
  overflow: hidden;
}

.storage-bar-ls {
  height: 100%;
  background-color: var(--primary);
  transition: width 0.3s ease;
  min-width: 0;
}

.storage-bar-idb {
  height: 100%;
  background-color: var(--success);
  transition: width 0.3s ease;
  min-width: 0;
}

/* Legend dots in storage text */
.storage-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin: 0 2px 0 6px;
  vertical-align: middle;
}

.storage-dot--ls {
  background-color: var(--primary);
}
.storage-dot--idb {
  background-color: var(--success);
}

section:hover {
  box-shadow: var(--shadow-lg);
}

.grid {
  display: grid;
  gap: var(--spacing);
}

.grid-2 {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

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

.grid-purity-row {
  grid-template-columns: 2fr 1fr 1fr auto;
}

/* STRK-235: Constitutional denomination + coin-count row (variant select wider) */
.grid-variant-row {
  grid-template-columns: 2fr 1fr;
}

.grid-name-year {
  grid-template-columns: 3fr 2fr;
}

.grid-grade {
  grid-template-columns: 1fr 1fr 1.5fr;
}

/* =============================================================================
   FORM ELEMENTS
   ============================================================================= */

form {
  display: grid;
  gap: var(--spacing);
}

input,
select,
button {
  font-family: inherit;
  font-size: var(--font-size-lg);
  transition: var(--transition);
}

input,
select {
  width: 100%;
  padding: 0.75rem;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-primary);
  color: var(--text-primary);
}

input:focus,
select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgb(59 130 246 / 0.1);
}

.currency-input {
  position: relative;
}

.currency-input input {
  padding-left: var(--currency-padding, 2rem);
}

.currency-input::before {
  content: var(--currency-symbol, "$");
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-weight: 500;
  pointer-events: none;
  z-index: 1;
}

/* =============================================================================
   COLLAPSIBLE FORM SECTIONS — <details>/<summary> based, zero JS to toggle
   (restored by STRK-301; js/form-sections.js layers remembered state and
   count badges on top). Each section is details.form-section[data-section].
   ============================================================================= */

.form-section {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 0.75rem;
  overflow: hidden;
}

.form-section-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: 0.5rem 0.7rem;
  background: var(--bg-secondary);
  font-weight: 600;
  font-size: var(--font-size-base);
  color: var(--text-primary);
  user-select: none;
  -webkit-user-select: none;
  transition: background var(--transition);
  min-height: 36px;
  box-sizing: border-box;
}

.form-section-icon {
  display: inline-flex;
  align-items: center;
  color: var(--text-secondary);
  flex-shrink: 0;
}

/* The explicit display beats the UA's [hidden] rule, so restate it — the
   badge must truly vanish at count 0, not render as an empty pill. */
.form-section-count[hidden] {
  display: none;
}

.form-section-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.35rem;
  border-radius: var(--radius-pill);
  background: var(--primary);
  color: var(--text-inverse);
  font-size: var(--font-size-xs);
  font-weight: 700;
  line-height: 1;
}

.form-section-body {
  padding: 0.55rem 0.7rem 0.65rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

/* Native disclosure chrome (STRK-301): suppress the UA marker, make the
   summary read as clickable, and draw our own chevron — right-pointing when
   collapsed, down when open. */
details.form-section > summary.form-section-header {
  cursor: pointer;
  list-style: none;
}

details.form-section > summary.form-section-header::-webkit-details-marker {
  display: none;
}

details.form-section > summary.form-section-header::after {
  content: "";
  width: 0.45em;
  height: 0.45em;
  border-right: 2px solid var(--text-secondary);
  border-bottom: 2px solid var(--text-secondary);
  transform: rotate(-45deg);
  margin-left: auto;
  flex-shrink: 0;
  transition: transform var(--transition);
}

details.form-section[open] > summary.form-section-header::after {
  transform: rotate(45deg);
}

details.form-section > summary.form-section-header:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
}

/* Inline URL input below upload row */
.image-url-input {
  margin-top: 0.35rem;
}

.image-url-input input {
  font-size: var(--font-size-base);
  padding: 0.45rem 0.6rem;
}

/* Numista API status dot on button */
.api-status-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-left: 0.3rem;
  vertical-align: middle;
  background: var(--text-muted, #999);
}

.api-status-dot.connected {
  background: var(--success, #16a34a);
}

.api-status-dot.disconnected {
  background: var(--text-muted, #999);
}

/* Sepia theme adjustments */
[data-theme="sepia"] .form-section-header {
  background: var(--bg-secondary);
}

/* =============================================================================
   BUTTONS - Enhanced for file:// protocol compatibility
   ============================================================================= */

/* File protocol compatibility fixes */
.btn {
  /* Force clickability for file:// protocol */
  pointer-events: auto !important;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

/* Ensure header buttons are always clickable */
.app-header .btn {
  position: relative;
  z-index: 100;
  pointer-events: auto !important;
}

/* Force cursor pointer for all buttons */
button,
.btn,
input[type="button"],
input[type="submit"] {
  cursor: pointer !important;
}

/* Main button styles */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-md);
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: var(--radius);
  font-size: var(--font-size-md);
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: var(--transition);
  position: relative;
  overflow: hidden;
  min-height: 2.75rem;
  background: var(--primary);
  color: var(--text-inverse);
}

.btn:hover {
  background: var(--primary-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow);
}

.btn:active {
  transform: translateY(0);
}

.btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in oklch, var(--text-inverse), transparent 80%),
    transparent
  );
  transition: left 0.5s;
}

.btn:hover::before {
  left: 100%;
}

.btn.danger {
  background: var(--danger);
}

.btn.danger:hover {
  background: var(--danger-hover);
}

.btn.success {
  background: var(--success);
}

.btn.success:hover {
  background: var(--success-hover);
}

.btn.info {
  background: var(--info);
}

.btn.info:hover {
  background: var(--info-hover);
}

.btn.secondary {
  background: var(--secondary);
}

.btn.secondary:hover {
  background: var(--secondary-hover);
}

.btn.warning {
  background: var(--warning);
  color: var(--text-primary);
}

.btn.warning:hover {
  background: var(--warning-hover);
}

.btn.premium {
  background: var(--warning);
  color: var(--text-primary);
}

.btn.premium:hover {
  background: var(--warning-hover);
}

.btn.filters {
  background: var(--warning);
  color: var(--text-primary);
}

.btn.filters:hover {
  background: var(--warning-hover);
}

/* =============================================================================
   SPOT PRICE CARDS — Sparkline Redesign
   ============================================================================= */

.spot-input {
  background: var(--bg-secondary);
  border-radius: var(--radius-lg);
  padding: 0;
  border: 1px solid var(--border);
  overflow: hidden;
  min-width: 0; /* Prevent grid item overflowing its cell */
}

/* Spot price cards grid — 2col default → 4col at 960px */
.spot-cards-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr 1fr; /* 2×2 at all narrow widths */
}
@media (min-width: 960px) {
  .spot-cards-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Five-card tier (STRK-306) — applyMetalOrder() stamps data-cards with the
   visible count, so none of these rules match while copper stays disabled
   (the four-card dashboard is untouched). Narrow: the FIRST card (the user's
   top-sorted metal) takes the full-width top slot and the rest fill 2+2 —
   no orphan. ≥960px: five equal columns. */
.spot-cards-grid[data-cards="5"] .spot-input:first-child {
  grid-column: span 2;
}
@media (min-width: 960px) {
  .spot-cards-grid[data-cards="5"] {
    grid-template-columns: repeat(5, 1fr);
  }
  .spot-cards-grid[data-cards="5"] .spot-input:first-child {
    grid-column: auto;
  }
}

.spot-card {
  position: relative;
  background: var(--bg-primary);
  border-radius: var(--radius-lg);
  padding: 0;
  text-align: center;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  height: 100%;
}

/* Sparkline canvas — positioned behind card content */
.spot-sparkline {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 0.35;
  pointer-events: none;
}

/* Card header: label + controls row */
.spot-card-header {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.25rem;
  padding: var(--spacing) var(--spacing) 0;
}

.spot-card-label {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
/* Trend-period chip — a real <button> (STRK-283), so the button UA styles are
   reset back to the flat label it has always looked like, then given hover and
   focus affordances so it reads as interactive. */
.spot-card-period {
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--text-secondary);
  margin-left: auto;
  line-height: 1;
  appearance: none;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm, 4px);
  padding: 0.1rem 0.3rem;
  cursor: pointer;
  font-family: inherit;
  transition:
    color 0.15s ease,
    border-color 0.15s ease,
    background-color 0.15s ease;
}

.spot-card-period:hover {
  color: var(--text-primary);
  border-color: var(--border);
  background: var(--bg-secondary);
}

.spot-card-period:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
  color: var(--text-primary);
}

/* The controls wrapper is visible again (STRK-284) so the per-card refresh
   icon can replace the retired header Spot Sync button. */
.spot-card-controls {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  /* Separate the refresh icon from the adjacent .spot-card-period chip. Two
     unrelated controls flush against each other invite mis-taps (STRK-284). */
  margin-left: 0.5rem;
}

/* ...but the range <select> inside it stays hidden. It is the sparkline engine
   driven by _applyTrend (a synthetic change event that spot.js listens for),
   NOT a user-facing control — the period is chosen via the .spot-card-period
   chip (STRK-283). Hiding the select specifically rather than the whole wrapper
   is what keeps a second, competing period control off the screen. */
.spot-range-select {
  display: none;
}

/* Sync icon button.
   24x24 minimum per WCAG 2.5.8 target size, matching the precedent set for the
   bulk-edit checkboxes (STRK-91 C.5). It was 22x22 while it was a hidden
   secondary control; STRK-284 made it the ONLY manual spot-refresh affordance,
   so it has to meet the bar on its own.
   NOT expanded to a 44x44 AAA target: the card header is ~24px tall and sits
   directly above .spot-card-value, so a 44px hit area (visible or via an
   overlay pseudo-element) would extend ~10px past the glyph on every side and
   steal taps from the shift-click-to-edit price. A genuine 44px target needs
   the card header re-laid out — that belongs to the Phase 4 dashboard redesign,
   which is already scoped to rebuild these cards. */
.spot-sync-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 4px);
  background: var(--bg-secondary);
  color: var(--text-secondary);
  cursor: pointer;
  transition: var(--transition);
}

.spot-sync-icon:hover:not(:disabled) {
  color: var(--primary);
  border-color: var(--primary);
}

.spot-sync-icon:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
}

.spot-sync-icon:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.spot-sync-icon.syncing svg {
  animation: spin 0.8s linear infinite;
}

/* Spot-data freshness (STRK-291) — written by applySpotFreshnessClasses
   (js/spot.js). Colours the icon itself rather than pinning a corner badge:
   .spot-sync-icon is inline-flex with no `position: relative`, so it is not a
   containing block and an absolutely-positioned dot would anchor to an
   unrelated ancestor (see the note by .header-cloud-dot--* below).

   `color` drives the SVG because its strokes are `stroke="currentColor"`;
   `border-color` carries the same state out to the button edge so the signal
   survives at small sizes. Nothing else is set — these compose with .syncing,
   :disabled, and :hover rather than replacing them.

   Deliberately lower specificity (0,1,0) than `.spot-sync-icon:hover:not(:disabled)`
   (0,3,0), so hover still wins and the button keeps its normal affordance. */
.spot-sync-icon--fresh {
  color: var(--success);
  border-color: var(--success);
}

.spot-sync-icon--stale {
  color: var(--warning);
  border-color: var(--warning);
}

.spot-sync-icon--expired {
  color: var(--danger);
  border-color: var(--danger);
}

/* `--warning` is ~1.4:1 against --bg-secondary in light and sepia (both use
   oklch(0.666 0.157 58.3)) — see .context/implementation-gotchas.md. An icon
   stroke is judged at WCAG 1.4.11 Non-text Contrast (3:1) rather than the 4.5:1
   small-text bar, but 1.4:1 fails that too, so these two themes get the darker
   amber the gotchas doc prescribes. Dark and slate already sit at L≈0.72-0.75
   on a dark surface and are left alone. theme.js always writes an explicit
   data-theme (including "light"), so the attribute selector is reliable. */
[data-theme="light"] .spot-sync-icon--stale,
[data-theme="sepia"] .spot-sync-icon--stale {
  color: oklch(0.55 0.15 60);
  border-color: oklch(0.55 0.15 60);
}

/* Sepia's `--success` (oklch(0.603 0.117 130.4)) measures 2.72:1 against the
   sepia card surface (oklch(0.892 0.032 89.1)) — under the 3:1 non-text bar.
   Same hue, lower lightness, measured at 3.83:1. Sepia only: light measures
   3.35:1 and dark/slate are 5.6-5.8:1, all already passing. */
[data-theme="sepia"] .spot-sync-icon--fresh {
  color: oklch(0.52 0.13 130.4);
  border-color: oklch(0.52 0.13 130.4);
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Card value — above sparkline */
.spot-card-value {
  position: relative;
  z-index: 1;
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--primary);
  cursor: default;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 var(--spacing);
}

/* Spot price change indicators */
.spot-up {
  color: var(--success);
}
.spot-down {
  color: var(--danger);
}
.spot-unchanged {
  color: var(--warning);
}

.spot-card-change {
  font-size: var(--font-size-base);
  font-weight: 600;
  text-align: center;
  padding: 2px 0;
  position: relative;
  z-index: 2;
  min-height: 1.1em;
}
.spot-change-up {
  color: var(--success);
}
.spot-change-down {
  color: var(--danger);
}

/* Portfolio card gain/loss percentage — subtle prefix left of value */
.gain-loss-pct {
  font-size: var(--font-size-xs);
  font-weight: 400;
  opacity: 0.7;
  margin-right: 0.35em;
}

.spot-card-timestamp {
  position: relative;
  z-index: 1;
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  margin-top: 0.25rem;
  font-weight: 400;
  line-height: 1.2;
  padding: 0 var(--spacing) var(--spacing);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Inline edit input (shift+click on price) */
.spot-inline-input {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  text-align: center;
  width: 7em;
  border: 2px solid var(--primary);
  border-radius: var(--radius-sm, 4px);
  background: var(--bg-primary);
  color: var(--primary);
  padding: 0.1rem 0.25rem;
  outline: none;
}
.spot-inline-input:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* Hide number spinners on inline input */
.spot-inline-input::-webkit-outer-spin-button,
.spot-inline-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.spot-inline-input[type="number"] {
  -moz-appearance: textfield;
}

/* Settings Modal - API Provider Blocks */
.settings-section {
  margin-top: 1rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem;
}

.api-providers {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.api-provider {
  padding: 0.75rem;
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

:is([data-theme="dark"], [data-theme="slate"]) .api-provider {
  background: var(--bg-tertiary);
  border-color: var(--border-hover);
}

.api-provider input[type="password"] {
  width: 100%;
}

.api-key-note {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  margin-top: 0.25rem;
}

.provider-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.25rem;
  font-weight: 600;
  gap: var(--spacing-md);
}

.provider-badge.free {
  background: var(--success);
  color: var(--text-inverse);
  font-size: var(--font-size-xs);
  padding: 2px 8px;
  border-radius: var(--radius-lg);
  margin-left: 0.5rem;
  font-weight: 600;
}

.provider-doc-link {
  font-size: var(--font-size-base);
  font-weight: 400;
  opacity: 0.7;
  text-decoration: none;
  color: var(--primary);
}
.provider-doc-link:hover {
  opacity: 1;
  text-decoration: underline;
}

.provider-history-pull {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-sm);
  flex-wrap: wrap;
}
.provider-history-pull label {
  font-size: var(--font-size-base);
  font-weight: 500;
  color: var(--text-primary);
  margin: 0;
}
.provider-history-select {
  width: 110px;
  padding: var(--spacing-xs) var(--spacing-sm);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: var(--font-size-base);
}
.api-history-btn {
  font-size: var(--font-size-base);
  padding: var(--spacing-xs) var(--spacing-sm);
}
.history-pull-cost {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  white-space: nowrap;
}

.provider-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 0.5rem;
  gap: 1rem;
}

.provider-info {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  align-items: center;
  text-align: center;
  margin-top: var(--spacing);
}

.provider-history {
  font-size: var(--font-size-sm);
  margin-top: 0.25rem;
  text-align: center;
}

.provider-history table {
  margin: 0 auto;
  border-collapse: collapse;
}

.provider-history th,
.provider-history td {
  padding: 0 0.5rem;
  text-align: center;
}

.provider-history th.provider-label {
  font-weight: 600;
  text-align: right;
}

.provider-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  justify-content: center;
}

.provider-checkbox-row label {
  font-size: var(--font-size-sm);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.provider-checkbox-row .provider-metal-name {
  margin-top: 0.25rem;
}

.api-usage {
  margin: var(--spacing) auto 0;
}

.api-usage .usage-bar {
  display: flex;
  width: 100%;
  height: 8px;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--secondary);
}

.api-usage .usage-bar .used {
  background: var(--danger);
}

.api-usage .usage-bar .remaining {
  background: var(--success);
}

.api-usage .usage-text {
  font-size: var(--font-size-sm);
  text-align: center;
  margin-top: 0.25rem;
}

.cache-duration-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  margin-top: 1rem;
}

.api-key-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  margin-top: 0.5rem;
}

/* Provider Settings Section */
.provider-settings {
  background: var(--bg-secondary);
  border-radius: var(--radius);
  padding: var(--spacing);
  margin: var(--spacing) 0;
  border: 1px solid var(--border);
}

.provider-settings h4 {
  margin: 0 0 var(--spacing) 0;
  color: var(--primary);
  font-size: var(--font-size-md);
  font-weight: 600;
  border-bottom: 1px solid var(--border);
  padding-bottom: var(--spacing-sm);
}

.provider-setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-sm);
}

.provider-setting-row label {
  font-size: var(--font-size-base);
  font-weight: 500;
  color: var(--text-primary);
  margin: 0;
}

.provider-cache-select,
.provider-history-input {
  width: 120px;
  padding: var(--spacing-xs) var(--spacing-sm);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: var(--font-size-base);
}

/* Metal Selection */
.metal-selection {
  margin-top: var(--spacing);
}

.metal-selection > label {
  display: block;
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--spacing-sm);
}

.metal-checkboxes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-sm);
}

.metal-checkbox {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-xs);
  border-radius: var(--radius);
  transition: var(--transition);
  font-size: var(--font-size-base);
  cursor: pointer;
}

.metal-checkbox:hover {
  background: var(--bg-tertiary);
}

.metal-checkbox input[type="checkbox"] {
  width: auto;
  margin: 0;
}

.metal-name {
  font-weight: 500;
  color: var(--text-primary);
}

.api-field-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  margin-top: 0.5rem;
}

.provider-status {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: var(--font-size-md);
}

.provider-status .status-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--warning);
}

.provider-status .status-text {
  color: var(--warning);
}

.provider-status.status-connected .status-dot {
  background: var(--success);
}

.provider-status.status-connected .status-text {
  color: var(--success);
}

.provider-status.status-error .status-dot {
  background: var(--danger);
}

.provider-status.status-error .status-text {
  color: var(--danger);
}

.settings-actions {
  margin-top: 1rem;
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: nowrap;
}

/* API Header Status Row — compact per-provider indicators */
.api-header-status-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  align-items: center;
  margin-top: 0.75rem;
  padding: 0.5rem 0.75rem;
  background: var(--bg-secondary);
  border-radius: var(--radius);
}

.api-header-status-item {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: var(--font-size-base);
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius);
}

.api-header-status-item .status-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--warning);
}

.api-header-status-item.connected .status-dot {
  background: var(--success);
}

.api-header-status-item.disconnected .status-dot {
  background: var(--text-muted);
}

.api-header-status-item.error .status-dot {
  background: var(--danger);
}

.api-header-status-item .status-name {
  font-weight: 500;
  color: var(--text-primary);
}

.api-header-status-item .status-timestamp {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
}

/* Last-used timestamp inside provider cards */
.status-last-used {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  margin-left: 0.5rem;
}

/* Pinned provider tab (Numista) */
.settings-provider-tab.pinned {
  cursor: default;
}

/* Provider priority dropdown (STACK-90) */
.provider-priority-select {
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
  font-size: var(--font-size-md);
  min-width: 140px;
}

.settings-subtext {
  margin: 0.5rem 0;
  color: var(--text-secondary);
  font-size: var(--font-size-lg);
}

/* Header toggle buttons (STACK-54) */
.header-toggle-btn {
  width: 56px;
  height: 56px;
  padding: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
}

.header-toggle-btn svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* #headerCloudSyncWrapper sizing rules removed with the button (STRK-287). */

.header-buttons--show-text .header-toggle-btn {
  height: auto;
  min-height: 56px;
  padding: 4px 4px;
}

.header-btn-text {
  display: none;
  font-size: var(--font-size-xs);
  line-height: 1;
  margin-top: 1px;
  text-align: center;
}

.header-buttons--show-text .header-btn-text {
  display: block;
}

/* Settings checkbox labels (STACK-54) */
.settings-checkbox-label {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: 0.35rem 0;
  cursor: pointer;
  font-size: var(--font-size-lg);
}

.settings-checkbox-label input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  accent-color: var(--primary);
  cursor: pointer;
}

/* Header currency dropdown styles removed with the button (STRK-288). Unlike
   .cloud-sync-dot and the .header-cloud-dot--* colour modifiers — which the
   spot/retail freshness dots share, so STRK-287 had to keep them —
   .header-currency-dropdown and .header-currency-item were used by nothing but
   the retired picker that toggleCurrencyDropdown() built, so they are safe to
   delete outright. */

.theme-buttons {
  display: flex;
  gap: 1rem;
  align-items: center;
}

/* Larger icons for header theme buttons */
.app-header .theme-btn {
  font-size: var(--font-size-2xl);
}

/* Theme button styling - shows current theme */
.theme-btn {
  border: 2px solid var(--border);
  transition: var(--transition);
  font-size: var(--font-size-xl);
  min-width: 3rem;
  position: relative;
  overflow: hidden;
}

.theme-btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow);
  border-color: var(--primary);
}

/* Theme button colors driven by [data-theme] attribute so they apply immediately
   when the inline head script sets data-theme — before any JS runs. The class variants
   (.dark/.light/.sepia/.slate) are kept for backwards compatibility but are now redundant. */
[data-theme="dark"] .theme-btn,
.theme-btn.dark {
  background: #2a2520;
  color: #f0ebe5;
  border-color: #3d3530;
}

:is([data-theme="slate"]) .theme-btn,
.theme-btn.slate {
  background: #1e293b;
  color: #f8fafc;
  border-color: #334155;
}

:root:not([data-theme]) .theme-btn,
[data-theme="light"] .theme-btn,
.theme-btn.light {
  background: #f8fafc;
  color: #1e293b;
  border-color: #cbd5e1;
}

[data-theme="sepia"] .theme-btn,
.theme-btn.sepia {
  background: #f2e7d5;
  color: #3e2f1e;
  border-color: #d1c2a5;
}

.theme-btn:hover::before {
  left: 100%;
}

.theme-display {
  padding: 0.5rem 1rem;
  border: 1px solid var(--border);
  min-width: 120px;
  text-align: center;
  border-radius: var(--radius);
  background: var(--bg-primary);
  color: var(--text-primary);
}

/* Info modal sizing */
#apiInfoModal .modal-content {
  max-width: 500px;
}

#apiInfoModal h3 {
  margin-bottom: 1rem;
}

#apiInfoModal .modal-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 1.5rem;
}

/* API history modal sizing */
#apiHistoryModal .modal-content {
  width: 60vw;
  height: 60vh;
  max-width: none;
  max-height: none;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}

#apiHistoryModal .modal-content::before {
  display: none;
}

/* Storage report options modal */
#storageOptionsModal .modal-content {
  max-width: 400px;
  text-align: center;
}
#storageOptionsModal .options-buttons {
  display: flex;
  gap: var(--spacing);
  justify-content: center;
}
#storageOptionsModal .options-buttons .btn {
  flex: 1;
}

#apiHistoryModal .modal-header {
  background: linear-gradient(135deg, var(--primary), var(--primary-hover));
  color: var(--text-inverse);
  padding: var(--spacing-xl);
  position: relative;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow: var(--shadow);
}

#apiHistoryModal .modal-header h2 {
  margin: 0;
  color: var(--text-inverse);
  text-align: center;
}

#apiHistoryModal .modal-body {
  padding: var(--spacing-xl);
  overflow: auto;
  flex: 1;
}

.api-history-footer {
  padding: var(--spacing);
  border-top: 1px solid var(--border);
  display: flex;
  gap: var(--spacing-sm);
  justify-content: flex-end;
}

.api-history-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.api-history-table {
  display: flex;
  flex-direction: column;
}

.api-history-filter {
  display: flex;
  gap: var(--spacing-md);
  margin-bottom: 0.5rem;
}

.api-history-filter input {
  flex: 1;
}

.api-history-table-wrapper {
  height: 70vh;
  width: 100%;
  overflow-y: auto;
}

#apiHistoryTable {
  width: 100%;
  min-width: 100%;
}

#apiHistoryTable th {
  cursor: pointer;
}

.api-history-cached-badge {
  color: var(--text-muted, #888);
  font-style: italic;
  font-size: var(--font-size-base);
}

#catalogHistoryTable {
  width: 100%;
  min-width: 100%;
}

#catalogHistoryTable th {
  cursor: pointer;
}

.api-info-body {
  margin-bottom: 1rem;
  font-size: var(--font-size-md);
  background: var(--bg-tertiary);
  padding: 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.api-info-body .info-provider-name {
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.api-info-body ul {
  margin: 0.5rem 0 0 1.25rem;
}

.api-info-body li + li {
  margin-top: 0.25rem;
}

.api-info-body .info-docs-btn {
  margin-top: 0.75rem;
}

/* =============================================================================
   UNIFIED SETTINGS MODAL
   ============================================================================= */

/* Settings modal content — near full-screen
   Compound selector for higher specificity than base .modal-content */
.modal-content.settings-modal-content {
  width: 90vw;
  max-width: 1100px;
  height: 85vh;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}

/* Hide base modal gradient line — settings header has its own */
.modal-content.settings-modal-content::before {
  display: none;
}

.settings-modal-content > .modal-header {
  background: transparent;
  border-bottom: 1px solid var(--border-color-subtle, var(--bs-border-color));
  padding: var(--spacing) var(--spacing-xl);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  flex-shrink: 0;
}

.settings-modal-content > .modal-header h2 {
  margin: 0;
  font-size: var(--font-size-xl);
  color: var(--text-primary);
}

/* Sidebar + content layout */
.settings-modal-layout {
  display: flex;
  flex: 1;
  overflow: hidden;
}

.settings-sidebar {
  width: 160px;
  min-width: 160px;
  background: var(--bg-secondary);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: var(--spacing-sm) 0;
  overflow-y: auto;
  flex-shrink: 0;
}

.settings-nav-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: 0.75rem 1rem;
  border: none;
  background: none;
  color: var(--text-secondary);
  font-size: var(--font-size-md);
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition:
    background 0.15s,
    color 0.15s;
}

.settings-nav-item:hover {
  background: var(--bg-card);
  color: var(--text-primary);
}

.settings-nav-item.active {
  background: var(--bg-card);
  color: var(--primary);
  border-left: 3px solid var(--primary);
  font-weight: 600;
}

.settings-nav-item svg {
  flex-shrink: 0;
}

/* Content area */
.settings-content-area {
  flex: 1;
  overflow-y: auto;
  padding: var(--spacing-xl);
  scrollbar-width: thin;
  scrollbar-color: var(--primary) var(--bg-secondary);
}

.settings-content-area::-webkit-scrollbar {
  width: 8px;
}
.settings-content-area::-webkit-scrollbar-track {
  background: var(--bg-secondary);
  border-radius: var(--radius);
}
.settings-content-area::-webkit-scrollbar-thumb {
  background-color: var(--primary);
  border-radius: var(--radius);
}
.settings-content-area::-webkit-scrollbar-thumb:hover {
  background-color: var(--primary-hover);
}

.settings-section-panel h3 {
  margin: 0 0 1rem 0;
  font-size: var(--font-size-xl);
}

/* Settings groups (Site section) */
.settings-group {
  margin-bottom: 1.25rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--border);
}

.settings-group:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.settings-group-label {
  font-weight: 600;
  font-size: var(--font-size-md);
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}

/* Settings fieldset — bordered card wrapping related settings (STAK-115) */
.settings-fieldset {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
  padding: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
}
.settings-fieldset-title {
  font-weight: 700;
  font-size: var(--font-size-base);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  margin-bottom: var(--spacing);
}

/* Seed image grid (Images settings tab — STACK-96) */
.seed-image-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 0.75rem;
}
.seed-image-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.5rem;
  text-align: center;
  background: var(--bg-card);
  position: relative;
}
.seed-image-card img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  border-radius: calc(var(--radius) - 2px);
  background: var(--bg-secondary);
}
.seed-image-card .seed-label {
  font-size: var(--font-size-sm);
  margin-top: 0.35rem;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.seed-image-card .seed-metal-badge {
  display: inline-block;
  font-size: var(--font-size-xs);
  padding: 0.1rem 0.35rem;
  border-radius: var(--radius-sm);
  margin-top: 0.2rem;
  text-transform: uppercase;
  font-weight: 600;
}
.seed-image-card .seed-metal-badge[data-metal="silver"] {
  background: #c0c0c0;
  color: #333;
}
.seed-image-card .seed-metal-badge[data-metal="gold"] {
  background: #ffd700;
  color: #333;
}
.seed-image-card .seed-metal-badge[data-metal="platinum"] {
  background: #e5e4e2;
  color: #333;
}
.seed-image-card .seed-metal-badge[data-metal="palladium"] {
  background: #ced4da;
  color: #333;
}
.seed-image-card .seed-delete-btn {
  position: absolute;
  top: 4px;
  right: 4px;
  background: var(--danger);
  color: var(--text-inverse);
  border: none;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  font-size: var(--font-size-xs);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.image-storage-stats {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: var(--font-size-md);
}
.image-storage-stats .stat-item {
  background: var(--bg-secondary);
  padding: 0.35rem 0.65rem;
  border-radius: var(--radius);
  color: var(--text-primary);
}
.storage-gauge-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  margin-bottom: 0.4rem;
  font-size: var(--font-size-base);
}
.storage-gauge-label {
  min-width: 7rem;
  color: var(--text-secondary);
}
.storage-gauge-bar-wrap {
  flex: 1;
  height: 6px;
  background: var(--border, #333);
  border-radius: var(--radius-sm);
  overflow: hidden;
  min-width: 60px;
}
.storage-gauge-bar {
  height: 100%;
  border-radius: var(--radius-sm);
  transition: width 0.3s ease;
  width: 0%;
}
.storage-gauge-size {
  min-width: 8rem;
  text-align: right;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
.storage-gauge-persist {
  font-size: var(--font-size-sm);
  margin-top: 0.3rem;
}
.image-pattern-table {
  width: 100%;
  font-size: var(--font-size-base);
  border-collapse: collapse;
}
.image-pattern-table th,
.image-pattern-table td {
  padding: 0.3rem 0.5rem;
  border-bottom: 1px solid var(--border);
  text-align: left;
}
.image-pattern-table th {
  font-weight: 600;
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  text-transform: uppercase;
}

/* ── Storage Settings Panel ─────────────────────────────────────────────── */

/* Summary stat cards */
.storage-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing);
  margin-bottom: var(--spacing-lg);
}

@media (max-width: 600px) {
  .storage-summary-grid {
    grid-template-columns: 1fr;
  }
}

.storage-stat-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.storage-stat-label {
  font-size: var(--font-size-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
}

.storage-stat-value {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--text-primary);
}

.storage-stat-bar-wrap {
  height: 6px;
  background: var(--bg-tertiary);
  border-radius: var(--radius-sm);
  overflow: hidden;
  display: flex;
  margin: 0.15rem 0;
}

.storage-stat-bar-wrap--stacked {
  /* children fill left-to-right for the combined bar */
}

.storage-stat-bar {
  height: 100%;
  border-radius: var(--radius-sm);
  transition: width 0.4s ease;
  min-width: 0;
}

.storage-stat-bar--ls {
  background: var(--primary);
}
.storage-stat-bar--idb {
  background: var(--success);
}

.storage-stat-sub {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

/* Fieldset header with actions row */
.storage-fieldset-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spacing);
  gap: var(--spacing);
  flex-wrap: wrap;
}

.storage-fieldset-actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.storage-refresh-btn {
  padding: 0.25rem 0.6rem;
  font-size: var(--font-size-sm);
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.storage-toggle-tiny {
  background: none;
  border: none;
  padding: 0;
  font-size: var(--font-size-base);
  color: var(--primary);
  cursor: pointer;
  text-decoration: underline;
}

.storage-toggle-tiny:hover {
  color: var(--primary-hover);
}

/* Key data table */
.storage-key-table-loading {
  color: var(--text-secondary);
  font-size: var(--font-size-md);
  padding: var(--spacing);
}

.storage-data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-base);
}

.storage-data-table th {
  text-align: left;
  font-size: var(--font-size-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  padding: 0.35rem 0.5rem;
  border-bottom: 1px solid var(--border);
}

.storage-data-table td {
  padding: 0.35rem 0.5rem;
  border-bottom: 1px solid var(--border-light, var(--border));
  vertical-align: middle;
}

.storage-key-row:last-child td {
  border-bottom: none;
}
.storage-key-row:hover {
  background: var(--bg-tertiary);
}

.storage-key-icon {
  width: 1.5rem;
  text-align: center;
  font-size: var(--font-size-lg);
}

.storage-key-label {
  max-width: 14rem;
}

.storage-key-raw {
  display: block;
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  font-family: var(--font-mono);
  margin-top: 1px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 13rem;
}

.storage-key-size {
  white-space: nowrap;
  color: var(--text-primary);
  min-width: 4.5rem;
}
.storage-key-pct {
  white-space: nowrap;
  color: var(--text-secondary);
  min-width: 3rem;
}
.storage-key-records {
  color: var(--text-secondary);
  min-width: 4rem;
}

.storage-col-bar {
  width: 8rem;
}

.storage-key-bar-wrap {
  height: 6px;
  background: var(--bg-tertiary);
  border-radius: var(--radius-sm);
  overflow: hidden;
  min-width: 5rem;
}

.storage-key-bar {
  height: 100%;
  background: var(--primary);
  border-radius: var(--radius-sm);
  transition: width 0.3s ease;
  min-width: 0;
}

.storage-key-bar--idb {
  background: var(--success);
}

/* Type badges */
.storage-type-badge {
  display: inline-block;
  padding: 0.1rem 0.4rem;
  border-radius: var(--radius);
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  background: var(--bg-tertiary);
  color: var(--text-secondary);
}

.storage-type-badge--array {
  background: color-mix(in srgb, var(--primary) 15%, transparent);
  color: var(--primary);
}
.storage-type-badge--object {
  background: color-mix(in srgb, var(--info) 15%, transparent);
  color: var(--info);
}
.storage-type-badge--idb {
  background: color-mix(in srgb, var(--success) 15%, transparent);
  color: var(--success);
}

.storage-minor-note {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin-top: var(--spacing-sm);
  margin-bottom: 0;
}

/* Pattern rule form (Settings > Images) */
.pattern-rule-form-row {
  display: flex;
  gap: var(--spacing-md);
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}
.pattern-rule-field {
  flex: 1;
  min-width: 140px;
}
.pattern-rule-field label {
  display: block;
  font-size: var(--font-size-base);
  color: var(--text-secondary);
  margin-bottom: 0.2rem;
}
.pattern-rule-field-narrow {
  flex: 0 0 120px;
  min-width: 100px;
}
.pattern-rule-field input[type="file"] {
  font-size: var(--font-size-base);
  max-width: 100%;
}

/* Pattern mode toggle (Keywords / Regex) */
.pattern-mode-toggle {
  display: inline-flex;
  gap: 2px;
  margin-left: 0.4rem;
  vertical-align: middle;
}
.pattern-mode-btn {
  font-size: var(--font-size-xs);
  padding: 1px 6px;
  border: 1px solid var(--border);
  background: var(--bg-secondary);
  color: var(--text-secondary);
  border-radius: var(--radius-sm);
  cursor: pointer;
  line-height: 1.4;
}
.pattern-mode-btn.active {
  background: var(--primary);
  color: var(--text-inverse);
  border-color: var(--primary);
}
.pattern-rule-tip {
  display: block;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin-top: 2px;
  line-height: 1.3;
}

/* Custom pattern rule rows */
.pattern-rule-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--border);
  font-size: var(--font-size-md);
}
.pattern-rule-row:last-child {
  border-bottom: none;
}
.pattern-rule-thumb {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  flex-shrink: 0;
  background: var(--bg-secondary);
}
.pattern-rule-info {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
.pattern-rule-info .rule-pattern {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pattern-rule-info .rule-replacement {
  font-size: var(--font-size-base);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pattern-cell {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  word-break: break-all;
}
.pattern-rule-actions {
  flex-shrink: 0;
  display: flex;
  gap: 0.25rem;
}
.pattern-rule-actions .btn {
  padding: 0.2rem 0.5rem;
  font-size: var(--font-size-sm);
}

/* Dual thumbnail wrapper (obverse + reverse side by side) */
.pattern-rule-thumbs {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}
.pattern-rule-thumb-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
}

/* Allow pattern rule rows to wrap for inline edit form */
.pattern-rule-row {
  flex-wrap: wrap;
}

/* Inline edit form for pattern rules */
.pattern-rule-edit-form {
  width: 100%;
  padding: 0.5rem 0 0.25rem;
  border-top: 1px dashed var(--border);
  margin-top: 0.25rem;
}
.pattern-rule-edit-form .edit-form-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.35rem 0.75rem;
  font-size: var(--font-size-base);
}
.pattern-rule-edit-form .edit-form-fields label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}
.pattern-rule-edit-form .edit-form-fields input[type="text"] {
  padding: 0.25rem 0.4rem;
  font-size: var(--font-size-base);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-primary);
  color: var(--text-primary);
}
.pattern-rule-edit-form .edit-form-fields input[type="file"] {
  font-size: var(--font-size-sm);
}
.pattern-rule-edit-form .edit-form-actions {
  display: flex;
  gap: 0.35rem;
  margin-top: 0.4rem;
}

/* Image upload UI — dual obverse/reverse (STACK-32) */
.image-upload-group {
  margin-top: 0.25rem;
}
.image-pattern-toggle-group {
  margin-top: 0.5rem;
  font-size: var(--font-size-md);
}
.image-pattern-toggle-group .form-control {
  margin-top: 0.35rem;
}
.image-pattern-toggle-group .pattern-rule-tip {
  display: block;
  margin-top: 0.2rem;
  color: var(--text-muted, #888);
  font-size: var(--font-size-sm);
}
.image-upload-sides {
  display: flex;
  gap: var(--spacing-md);
}
.image-upload-side {
  flex: 1;
  min-width: 0;
}
.image-swap-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  padding-top: 1.2rem;
}
.image-swap-wrapper .btn-icon {
  font-size: var(--font-size-xl);
  padding: 0.2rem 0.4rem;
  line-height: 1;
}
.image-side-label {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 0.25rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
/* Image card — preview left, buttons stacked right */
.image-card {
  display: flex;
  align-items: stretch;
  gap: var(--spacing-md);
  min-height: 100px;
}

/* Dashed outline for image cards in settings (STAK-439) */
#settingsPanel_images .image-card {
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  padding: 0.75rem;
}

.image-upload-filename {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  display: block;
  margin-top: 0.2rem;
}

.image-upload-preview {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.image-upload-preview img {
  max-width: 100%;
  max-height: 140px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  object-fit: contain;
}

.frame-toggle {
  position: absolute;
  right: 6px;
  bottom: 6px;
  z-index: 2;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: color-mix(in oklch, var(--bg-primary), transparent 8%);
  color: var(--text-muted);
  box-shadow: 0 2px 8px color-mix(in oklch, #000, transparent 82%);
  cursor: pointer;
  font-size: var(--font-size-sm);
  font-weight: 800;
  line-height: 1;
  padding: 0;
}

.frame-toggle::before {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
}

.frame-toggle[data-frame-state="circle"],
.frame-toggle[data-frame-state="rectangle"] {
  color: var(--metal-gold, var(--gold));
  border-color: color-mix(in oklch, var(--metal-gold, var(--gold)), transparent 45%);
  background: color-mix(in oklch, var(--metal-gold, var(--gold)), transparent 88%);
}

.frame-toggle:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.image-card-actions {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  justify-content: center;
  flex-shrink: 0;
}

/* Pill buttons with color coding — compound selector beats .btn specificity */
.btn.img-btn {
  border-radius: var(--radius-pill);
  padding: 0.3rem 0.7rem;
  font-size: var(--font-size-sm);
  font-weight: 600;
  min-height: 0;
  white-space: nowrap;
  border: 1px solid transparent;
  transform: none;
  box-shadow: none;
  transition:
    opacity 0.15s ease,
    background 0.15s ease;
}

.btn.img-btn:hover {
  transform: none;
  box-shadow: none;
}

.btn.img-btn::before {
  display: none;
}

.btn.img-btn-upload {
  background: var(--primary);
  color: var(--text-inverse);
  border-color: var(--primary);
}

.btn.img-btn-upload:hover {
  opacity: 0.85;
  background: var(--primary);
}

.btn.img-btn-url {
  background: color-mix(in oklch, var(--success), transparent 85%);
  color: var(--success);
  border-color: color-mix(in oklch, var(--success), transparent 70%);
}

.btn.img-btn-url:hover {
  background: color-mix(in oklch, var(--success), transparent 75%);
}

.btn.img-btn-camera {
  background: rgba(139, 92, 246, 0.15);
  color: #8b5cf6;
  border-color: rgba(139, 92, 246, 0.3);
}

.btn.img-btn-camera:hover {
  background: rgba(139, 92, 246, 0.25);
}

.btn.img-btn-remove {
  background: color-mix(in oklch, var(--danger), transparent 88%);
  color: var(--danger);
  border-color: color-mix(in oklch, var(--danger), transparent 75%);
}

.btn.img-btn-remove:hover {
  background: color-mix(in oklch, var(--danger), transparent 78%);
}

.image-size-info {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  margin-top: 0.2rem;
  display: block;
}
.btn-sm {
  padding: 0.25rem 0.6rem;
  font-size: var(--font-size-base);
}

/* Chip grouping controls (blacklist & custom rules) */
.chip-grouping-controls {
  display: flex;
  gap: var(--spacing-md);
  align-items: center;
  margin-bottom: 0.5rem;
}

.chip-grouping-input {
  flex: 1;
  min-width: 0;
  padding: 0.35rem 0.5rem;
  font-size: var(--font-size-base);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
  color: var(--text-primary);
}

.chip-grouping-input-wide {
  flex: 2;
  min-width: 0;
  padding: 0.35rem 0.5rem;
  font-size: var(--font-size-base);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
  color: var(--text-primary);
}

.chip-grouping-table-container {
  max-height: 400px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-top: 0.25rem;
}

.chip-grouping-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-base);
}

.chip-grouping-table thead {
  position: sticky;
  top: 0;
  background: var(--bg-card);
  z-index: 1;
}

.chip-grouping-table th,
.chip-grouping-table td {
  padding: 0.3rem 0.5rem;
  text-align: left;
  border-bottom: 1px solid var(--border);
  color: var(--text-primary);
}

.chip-grouping-table th {
  font-weight: 600;
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
}

.chip-grouping-table td.chip-grouping-patterns {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chip-grouping-empty {
  text-align: center;
  padding: 1rem;
  color: var(--text-muted);
  font-size: var(--font-size-base);
  font-style: italic;
}

.chip-grouping-delete {
  background: none;
  border: none;
  color: var(--danger);
  cursor: pointer;
  font-size: var(--font-size-lg);
  font-weight: 700;
  line-height: 1;
  padding: 0.1rem 0.3rem;
  border-radius: var(--radius);
  transition: background 0.1s;
}

.chip-grouping-delete:hover {
  background: rgba(var(--danger-rgb, 220, 53, 69), 0.12);
}

.chip-grouping-actions {
  white-space: nowrap;
}

.chip-grouping-edit,
.chip-grouping-save,
.chip-grouping-cancel {
  background: none;
  border: none;
  cursor: pointer;
  font-size: var(--font-size-md);
  font-weight: 700;
  line-height: 1;
  padding: 0.1rem 0.3rem;
  border-radius: var(--radius);
  transition: background 0.1s;
}

.chip-grouping-edit {
  color: var(--text-muted);
}

.chip-grouping-edit:hover {
  color: var(--info);
  background: rgba(var(--info-rgb, 13, 110, 253), 0.12);
}

.chip-grouping-save {
  color: var(--success);
}

.chip-grouping-save:hover {
  background: rgba(var(--success-rgb, 25, 135, 84), 0.12);
}

.chip-grouping-cancel {
  color: var(--text-muted);
}

.chip-grouping-cancel:hover {
  color: var(--danger);
  background: rgba(var(--danger-rgb, 220, 53, 69), 0.12);
}

/* Image-cache modal: catalog ID + activity log line */
.cache-id {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  white-space: nowrap;
}
.cache-log-line {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  padding: 0.1rem 0;
}

/* Inline chip config — up/down reorder buttons */
.inline-chip-move {
  background: none;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  cursor: pointer;
  font-size: var(--font-size-sm);
  font-weight: 700;
  line-height: 1;
  padding: 0.15rem 0.35rem;
  border-radius: var(--radius);
  transition:
    background 0.1s,
    color 0.1s;
}

.inline-chip-move:hover:not(:disabled) {
  background: var(--bg-tertiary);
  color: var(--primary);
}

.inline-chip-move:disabled {
  opacity: 0.3;
  cursor: default;
}

.chip-grouping-edit-input {
  width: 100%;
  padding: 0.2rem 0.35rem;
  font-size: var(--font-size-base);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-input, var(--bg));
  color: var(--text);
  box-sizing: border-box;
}

.chip-grouping-edit-wide {
  min-width: 120px;
}

/* Theme picker */
.theme-picker {
  display: flex;
  gap: var(--spacing-md);
  flex-wrap: wrap;
}

.theme-option {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.5rem 1rem;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
  color: var(--text-primary);
  font-size: var(--font-size-base);
  font-weight: 500;
  cursor: pointer;
  transition:
    border-color 0.15s,
    background 0.15s;
}

.theme-option[data-theme="light"] {
  background: #f8fafc;
  color: #1e293b;
  border-color: #cbd5e1;
}

.theme-option[data-theme="dark"] {
  background: #2a2520;
  color: #f0ebe5;
  border-color: #3d3530;
}

.theme-option[data-theme="slate"] {
  background: #1e293b;
  color: #f8fafc;
  border-color: #334155;
}

.theme-option[data-theme="sepia"] {
  background: #f2e7d5;
  color: #3e2f1e;
  border-color: #d1c2a5;
}

.theme-option:hover {
  border-color: var(--primary);
}

.theme-option.active {
  border-color: var(--primary);
  background: var(--primary);
  color: var(--text-inverse);
}

/* Provider tabs */
.settings-provider-tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--border);
  margin: 1rem 0 0 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.settings-provider-tab {
  padding: 0.5rem 1rem;
  border: none;
  background: none;
  color: var(--text-secondary);
  font-size: var(--font-size-base);
  font-weight: 500;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition:
    color 0.15s,
    border-color 0.15s;
}

.settings-provider-tab:hover {
  color: var(--text-primary);
}

.settings-provider-tab.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
  font-weight: 600;
}

.settings-provider-panel {
  padding-top: 1rem;
}

/* Settings action button — outlined style for in-panel actions */
.settings-action-btn {
  background: transparent;
  color: var(--primary);
  border: 1px solid var(--primary);
  padding: 0.5rem 1.25rem;
  min-height: 2.25rem;
}
.settings-action-btn:hover {
  background: var(--primary);
  color: var(--text-inverse);
}

/* Info icon tooltip next to labels */
.settings-tooltip {
  cursor: help;
  opacity: 0.5;
  font-size: var(--font-size-base);
  margin-left: 0.25rem;
}
.settings-tooltip:hover {
  opacity: 0.8;
}

/* Placeholder sections (Cloud) */
.settings-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 1rem;
  color: var(--text-secondary);
  text-align: center;
  gap: 1rem;
}

.settings-placeholder p {
  font-size: var(--font-size-lg);
  margin: 0;
}

/* Cloud provider — connection & status */
.cloud-connected-badge {
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--success, #198754);
  padding: 0.15rem 0.5rem;
  border: 1px solid var(--success, #198754);
  border-radius: var(--radius-lg);
  margin-left: 0.5rem;
  vertical-align: middle;
}
.cloud-connection-status {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 0.5rem;
}
.cloud-status-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--font-size-base);
  padding: 0.2rem 0;
  border-bottom: 1px solid var(--border);
}
.cloud-status-row:last-child {
  border-bottom: none;
}
.cloud-status-label {
  color: var(--text-secondary);
  font-weight: 500;
}
.cloud-status-value {
  color: var(--text-primary);
  font-weight: 600;
  text-align: right;
}
.cloud-status-indicator {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.cloud-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.cloud-status-indicator[data-state="disconnected"] .cloud-status-dot {
  background: var(--text-secondary, #94a3b8);
}
.cloud-status-indicator[data-state="connected"] .cloud-status-dot {
  background: var(--success, #198754);
  box-shadow: 0 0 4px var(--success, #198754);
}
.cloud-connection-actions {
  margin-top: auto;
  padding-top: 0.5rem;
}
.cloud-status-detail {
  font-size: var(--font-size-base);
  color: var(--text-secondary, #6c757d);
  margin-top: 0.25rem;
}
.cloud-status-detail:empty {
  display: none;
}
.cloud-provider-actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  flex-wrap: wrap;
}
.cloud-provider-actions .btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}
.cloud-backup-list {
  max-height: 200px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 0.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.25rem;
  background: var(--bg-primary);
}
.cloud-backup-row {
  display: flex;
  align-items: center;
  gap: 2px;
  border-radius: var(--radius);
  overflow: hidden;
}
.cloud-backup-row:hover .cloud-backup-delete-btn {
  opacity: 1;
}
.cloud-backup-entry {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.4rem 0.6rem;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: var(--radius);
  font-size: var(--font-size-base);
  color: var(--text-primary);
  flex: 1;
  min-width: 0;
  text-align: left;
  transition: background 0.15s ease;
}
.cloud-backup-entry:hover {
  background: var(--bg-secondary);
}
.cloud-backup-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}
.cloud-backup-size {
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  flex-shrink: 0;
  margin-left: 0.5rem;
}
.cloud-backup-type {
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
  flex-shrink: 0;
  margin-left: 0.5rem;
  opacity: 0.8;
}
.cloud-backup-delete-btn {
  flex-shrink: 0;
  padding: 0.3rem 0.5rem;
  border: none;
  background: transparent;
  color: var(--danger, #e74c3c);
  cursor: pointer;
  font-size: var(--font-size-lg);
  line-height: 1;
  border-radius: var(--radius);
  opacity: 0;
  transition:
    opacity 0.15s ease,
    background 0.15s ease;
}
.cloud-backup-delete-btn:hover {
  background: color-mix(in srgb, var(--danger, #e74c3c) 12%, transparent);
  opacity: 1;
}
.cloud-backup-delete-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.cloud-backup-empty {
  font-size: var(--font-size-base);
  color: var(--text-secondary);
  padding: 0.5rem;
  text-align: center;
}

/* Cloud toast */
.cloud-toast {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  max-width: 360px;
  padding: 0.75rem 1rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  font-size: var(--font-size-md);
  z-index: 10000;
  animation: cloudToastIn 0.3s ease;
}
.cloud-toast.fade-out {
  animation: cloudToastOut 0.3s ease forwards;
}
@keyframes cloudToastIn {
  from {
    opacity: 0;
    transform: translateY(1rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes cloudToastOut {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(1rem);
  }
}

/* STAK-149: Cloud auto-sync status dot */
.cloud-sync-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-secondary, #94a3b8);
  flex-shrink: 0;
  transition:
    background 0.2s,
    box-shadow 0.2s;
}
.cloud-sync-dot--ok {
  background: var(--success, #198754);
  box-shadow: 0 0 4px var(--success, #198754);
}
.cloud-sync-dot--error {
  background: var(--danger, #e74c3c);
  box-shadow: 0 0 4px var(--danger, #e74c3c);
}
.cloud-sync-dot--syncing {
  background: var(--info, #0dcaf0);
  animation: cloudSyncPulse 1s ease-in-out infinite;
}
/* #headerCloudSyncBtn positioning removed with the button (STRK-287).
   .cloud-sync-dot STAYS — it is the inline-flow dot used by the spot and retail
   freshness indicators, including #marketFreshnessDot (created in
   js/market-data.js; its colour is driven by updateMarketHealthDot in
   js/retail.js), so deleting it as "cloud" styling would break unrelated
   indicators.

   The .header-cloud-dot BASE rule (STAK-264) was deleted by STRK-298. It was
   `position: absolute` with bottom/right offsets because it overlaid a header
   button's corner, and every such button is now retired: #headerMarketDot went
   with the Market button (STRK-290) and #headerSyncDot with the Spot Sync one
   (STRK-284). Its replacement #marketFreshnessDot deliberately takes
   .cloud-sync-dot instead, because in a flex row the absolute variant anchors to
   an unrelated positioned ancestor rather than its own button.

   Nothing re-adds it. STRK-291 (shipped) retargeted updateSpotSyncHealthDot at
   the four syncIcon{Metal} buttons, and those could not host it either:
   .spot-sync-icon (~line 2088) is inline-flex with no `position: relative`, so
   it is not a containing block. STRK-291 therefore colours the icon itself via
   the .spot-sync-icon--{fresh,stale,expired} modifiers defined up there.
   Recover from git history if a corner badge is ever wanted.

   The .header-cloud-dot--{green,orange,red} modifiers below DO stay: they are
   pure colour (background + box-shadow only), they compose with .cloud-sync-dot
   as well as they did with the deleted base, and js/spot.js + js/retail.js both
   apply them. */
.header-cloud-dot--green {
  background: var(--success, #198754);
  box-shadow: 0 0 4px var(--success, #198754);
}
.header-cloud-dot--orange {
  background: var(--warning, #f59e0b);
  box-shadow: 0 0 4px var(--warning, #f59e0b);
}
.header-cloud-dot--red {
  background: var(--danger, #dc2626);
  box-shadow: 0 0 4px var(--danger, #dc2626);
}
@keyframes cloudSyncPulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.5;
    transform: scale(0.85);
  }
}

/* Conflict modal two-column layout */
.cloud-conflict-grid {
  display: flex;
  gap: 1rem;
  align-items: stretch;
  font-size: var(--font-size-md);
}
.cloud-conflict-col {
  flex: 1;
  background: var(--bg-secondary, #f8f9fa);
  border: 1px solid var(--border, #dee2e6);
  border-radius: var(--radius, 0.375rem);
  padding: 0.75rem;
}
.cloud-conflict-col-label {
  font-weight: 600;
  font-size: var(--font-size-base);
  margin-bottom: 0.5rem;
  color: var(--text-secondary, #6c757d);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.cloud-conflict-row {
  display: flex;
  justify-content: space-between;
  gap: var(--spacing-md);
  padding: 0.15rem 0;
  color: var(--text-primary);
}
.cloud-conflict-divider {
  display: flex;
  align-items: center;
  font-weight: 700;
  font-size: var(--font-size-lg);
  color: var(--text-secondary, #6c757d);
  flex-shrink: 0;
}

/* Update-available modal metadata rows */
.cloud-sync-update-meta {
  background: var(--bg-secondary, #f8f9fa);
  border: 1px solid var(--border, #dee2e6);
  border-radius: var(--radius, 0.375rem);
  padding: 0.75rem;
  font-size: var(--font-size-md);
}
[data-theme="dark"] .cloud-sync-update-meta {
  background: color-mix(in oklch, var(--bg-tertiary), transparent 40%);
  border-color: var(--border);
}
[data-theme="slate"] .cloud-sync-update-meta {
  background: rgba(51, 65, 85, 0.6);
  border-color: rgba(148, 163, 184, 0.25);
}
.cloud-sync-update-row {
  display: flex;
  justify-content: space-between;
  gap: var(--spacing-md);
  padding: 0.15rem 0;
  color: var(--text-muted);
}
.cloud-sync-update-row strong {
  color: var(--text-primary);
}
.cloud-sync-update-row:not(:last-child) {
  border-bottom: 1px solid var(--border, #dee2e6);
}

/* STRK-13: Sticky inventory recovery banner — shown when boot detected
   damaged or unparseable inventory storage. Themes via existing custom
   properties; no new colors introduced. */
.inventory-recovery-banner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  margin: 0 0 0.75rem 0;
  border-radius: var(--radius-lg, 12px);
  background: color-mix(in srgb, var(--warning) 10%, var(--bg-secondary));
  color: var(--text-primary, var(--text));
  border: 1px solid color-mix(in srgb, var(--warning) 35%, var(--border));
  box-shadow: var(--shadow-sm);
  font-size: var(--font-size-lg);
  line-height: 1.5;
}

.inventory-recovery-banner__icon {
  font-size: var(--font-size-2xl);
  flex-shrink: 0;
  color: var(--warning);
}

.inventory-recovery-banner__copy {
  flex: 1 1 auto;
  margin: 0;
  color: var(--text-primary, var(--text));
}

.inventory-recovery-banner__actions {
  display: flex;
  gap: var(--spacing-md);
  flex-shrink: 0;
}

.inventory-recovery-banner__btn {
  padding: 0.4rem 0.85rem;
  border-radius: var(--radius, 8px);
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-primary, var(--text));
  font-size: var(--font-size-md);
  cursor: pointer;
}

.inventory-recovery-banner__btn:hover {
  background: var(--bg-secondary);
  border-color: var(--border-hover);
}

.inventory-recovery-banner__btn--primary {
  background: var(--primary);
  color: var(--text-inverse);
  border-color: var(--primary);
}

.inventory-recovery-banner__btn--primary:hover {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
}

@media (max-width: 640px) {
  .inventory-recovery-banner {
    flex-direction: column;
    align-items: stretch;
  }
  .inventory-recovery-banner__actions {
    flex-wrap: wrap;
  }
}

/* Cloud beta banner & provider cards */
.cloud-beta-banner {
  position: relative;
  background: color-mix(in srgb, var(--warning, #f0ad4e) 10%, var(--bg-secondary));
  border: 1px solid color-mix(in srgb, var(--warning, #f0ad4e) 35%, var(--border));
  border-radius: var(--radius-lg, 0.5rem);
  padding: 1rem 1.25rem;
  margin-bottom: 1rem;
  font-size: var(--font-size-md);
  line-height: 1.5;
}
.cloud-beta-banner p {
  margin: 0 0 0.5rem;
}
.cloud-beta-banner p:last-child {
  margin-bottom: 0;
}
.cloud-beta-title {
  font-weight: 700;
  font-size: var(--font-size-lg);
}
.cloud-beta-badge {
  position: absolute;
  top: 0.6rem;
  right: 0.75rem;
  font-size: var(--font-size-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--warning-text, var(--warning, #f0ad4e));
  border: 1px solid var(--warning, #f0ad4e);
  border-radius: var(--radius-lg);
  padding: 0.1rem 0.5rem;
}
.cloud-provider-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 0.5rem);
  padding: 1rem 1.25rem;
  margin-bottom: 1rem;
  background: var(--bg-card, var(--bg-secondary));
}
.cloud-provider-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}
.cloud-provider-card-title {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
  font-size: var(--font-size-lg);
}
.cloud-provider-card-badges {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.cloud-provider-card-actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  flex-wrap: wrap;
  margin-top: 0.75rem;
}
.cloud-provider-disclaimer {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin-top: 0.75rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--border);
  line-height: 1.45;
}
.cloud-provider-card--coming-soon {
  opacity: 0.55;
  pointer-events: none;
}
.cloud-badge {
  font-size: var(--font-size-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.12rem 0.45rem;
  border-radius: var(--radius-lg);
  white-space: nowrap;
}
.cloud-badge--beta {
  color: var(--warning-text, var(--warning, #f0ad4e));
  border: 1px solid var(--warning, #f0ad4e);
}
.cloud-badge--coming-soon {
  color: var(--text-secondary);
  border: 1px solid var(--border);
}
.cloud-session-cache {
  opacity: 0.7;
}

/* Footer bar */
.settings-footer {
  padding: 0.5rem 1rem;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  border-top: 1px solid var(--border);
  background: var(--bg-secondary);
  text-align: center;
  flex-shrink: 0;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

/* Mobile: sidebar becomes 5×2 grid — all 10 tabs visible (STACK-70) */
@media (max-width: 768px) {
  .settings-modal-layout {
    flex-direction: column;
  }

  .settings-sidebar {
    width: 100%;
    min-width: unset;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    overflow: visible;
    border-right: none;
    border-bottom: 1px solid var(--border);
    padding: var(--spacing-xs);
    gap: 2px;
    flex-shrink: 0;
  }

  .settings-nav-item {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    padding: 0.35rem 0.25rem;
    font-size: var(--font-size-xs);
    text-align: center;
    white-space: nowrap;
    min-height: 44px;
    border-radius: var(--radius);
  }

  .settings-nav-item svg {
    width: 14px;
    height: 14px;
  }

  .settings-nav-item.active {
    border-left: none;
    background: var(--primary);
    color: var(--text-inverse);
  }

  .settings-content-area {
    padding: var(--spacing);
  }

  /* Provider tabs: horizontal scroll on mobile (STACK-90) */
  .settings-provider-tabs {
    flex-wrap: nowrap;
  }
  .settings-provider-tab {
    white-space: nowrap;
    flex-shrink: 0;
    padding: 0.5rem 0.75rem;
    font-size: var(--font-size-sm);
  }
}

.settings-card-grid {
  display: grid;
  gap: var(--spacing);
}

@media (min-width: 600px) {
  .settings-card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.settings-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: var(--spacing);
}

.settings-card:hover {
  box-shadow: var(--shadow-lg);
}

.settings-card-grid--compact .settings-card {
  align-items: flex-start;
}

.settings-card-grid--3col {
  grid-template-columns: repeat(3, 1fr);
}

.settings-card-grid--mini .settings-card {
  padding: 0.6rem 0.75rem;
  gap: 0;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

/* ── About Tab (Settings landing) — STAK-490 ── */

/* A) About hero layout */
.about-hero {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 24px;
}
.about-logo-wrap {
  flex-shrink: 0;
}
.about-logo-wrap svg {
  border-radius: var(--radius-xl);
}
.about-hero-text {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.about-app-name {
  font-size: var(--font-size-xl);
  font-weight: 700;
  letter-spacing: 3px;
}
.about-app-name .stak {
  color: var(--text-secondary, #e2e8f0);
}
.about-app-name .trakr {
  color: var(--brand-gold);
}
.about-version {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  font-family: var(--font-mono);
}
.about-tagline {
  font-size: var(--font-size-base);
  color: var(--text-secondary);
  font-style: italic;
}
.about-desc {
  font-size: var(--font-size-base);
  color: var(--text-secondary);
  line-height: 1.6;
}

/* B) Badges */
.about-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
  justify-content: flex-start;
}
.about-badge-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-muted);
  font-size: var(--font-size-xs);
  text-decoration: none;
  transition: all 0.15s;
  cursor: pointer;
}
.about-badge-item:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
  border-color: var(--border-hover, var(--border));
}
.about-badge-item svg {
  width: 13px;
  height: 13px;
}

/* C) Section dividers */
.about-section {
  margin-top: 20px;
}
.about-section-title {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.about-section-title::after {
  content: "";
  flex: 1;
  border-top: 1px solid var(--border);
}

/* D) What's New list items */
#settingsPanel_about #aboutChangelogLatest li {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  line-height: 1.5;
  padding: 8px 12px;
  background: var(--bg-primary);
  border-radius: var(--radius);
  margin-bottom: 6px;
  list-style: none;
}
#settingsPanel_about #aboutChangelogLatest li strong {
  color: var(--text-primary);
}
#settingsPanel_about #aboutChangelogLatest {
  padding-left: 0;
}

/* E) Compact disclaimer */
.about-disclaimer {
  margin-top: 20px;
  padding: 12px 14px;
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  line-height: 1.6;
}
.about-disclaimer strong {
  color: var(--text-secondary);
}
.about-disclaimer a {
  color: var(--primary);
}

/* F) Troubleshooting card */
.about-troubleshooting {
  margin-top: 20px;
  padding: 12px 14px;
  background: var(--bg-primary);
  border-radius: var(--radius);
  font-size: var(--font-size-base);
  border: 1px solid var(--border);
  color: var(--text-muted);
  line-height: 1.6;
}
.about-troubleshooting strong {
  color: var(--text-secondary);
}
.about-troubleshooting .btn {
  margin-top: 8px;
  font-size: var(--font-size-sm);
  padding: 4px 12px;
  opacity: 0.85;
}

/* F) Sidebar separator */
.stk-nav-separator {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 4px 8px;
}

/* G) What's New toast card (STAK-547 — replaces modal) */
.whats-new-toast-card {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  width: 340px;
  max-width: calc(100vw - 2rem);
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
  z-index: 10000;
  cursor: pointer;
  animation: cloudToastIn 0.3s ease;
  overflow: hidden;
}
.whats-new-toast-card.fade-out {
  animation: cloudToastOut 0.3s ease forwards;
}
.wntc-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px 6px;
  border-bottom: 1px solid var(--border);
}
.wntc-label {
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--brand-gold);
  flex: 1;
}
.wntc-version {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  font-family: var(--font-mono);
}
.wntc-close {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: var(--font-size-md);
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
  margin-left: 4px;
}
.wntc-close:hover {
  color: var(--text-primary);
}
.wntc-body {
  padding: 8px 10px 10px;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  line-height: 1.5;
}
.wntc-body strong {
  color: var(--text-primary);
}

/* H) About tab responsive */
@media (max-width: 768px) {
  .about-hero {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .about-badges {
    justify-content: center;
  }
}

/* Image input row — file input + camera button side by side */
.image-input-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}

/* Camera capture button — icon-only, compact */
.camera-capture-btn {
  padding: 0.25rem 0.4rem;
  flex-shrink: 0;
}

/* Cloud Sync modal layout */
#cloudSyncModal .modal-content {
  max-width: 400px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}

#cloudSyncModal .modal-header {
  background: linear-gradient(135deg, var(--primary), var(--primary-hover));
  color: var(--text-inverse);
  padding: var(--spacing-xl);
  position: relative;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow: var(--shadow);
}

#cloudSyncModal .modal-header h2 {
  margin: 0;
  color: var(--text-inverse);
  text-align: center;
}

#cloudSyncModal .modal-body {
  padding: var(--spacing-xl);
  text-align: center;
}

/* Provider panels within Settings modal inherit scrollable content area */

/* Standardized modal layout for change log and details views */
/* shared modal content structure */
#changeLogModal .modal-content,
#itemModal .modal-content {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  width: 90%;
  max-width: 700px;
}

#detailsModal .modal-content {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  width: 90%;
  max-width: 1200px;
  max-height: 90vh;
}

#changeLogModal .modal-content {
  max-width: 1200px;
  max-height: 80vh;
}

/* Flat panel-pattern modal headers (STRK-25): replaces the blue brand gradient
   that read as generic/digital with a metallic-flat surface. Bg + border read
   from tokens so all 4 themes resolve correctly (warm gunmetal in dark,
   slate-blue in slate, light surface in light, paper in sepia). */
#changeLogModal .modal-header,
#detailsModal .modal-header,
#storageReportModal .modal-header,
#itemModal .modal-header {
  background: var(--bg-secondary);
  color: var(--text-primary);
  padding: var(--spacing-xl);
  position: relative;
  border-bottom: 1px solid var(--border);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow: var(--shadow);
}

#changeLogModal .modal-header h2,
#detailsModal .modal-header h2,
#storageReportModal .modal-header h2,
#itemModal .modal-header h2 {
  margin: 0;
  color: var(--text-primary);
  text-align: center;
}

#changeLogModal .modal-body,
#itemModal .modal-body {
  padding: var(--spacing);
  overflow: auto;
  flex: 1;
}

#changeLogModal .modal-footer {
  padding: var(--spacing);
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
}

#changeLogClearBtn {
  font-size: var(--font-size-xl);
}

#detailsModal .modal-body {
  padding: var(--spacing-xl);
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

#storageReportModal .modal-body {
  height: 80vh;
  padding: 0;
}

#changeLogTable {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

#changeLogTable th,
#changeLogTable td {
  padding: var(--spacing-xs);
  text-align: left;
  font-size: var(--font-size-sm);
}

#changeLogTable td {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#changeLogTable th:last-child,
#changeLogTable td:last-child {
  width: 5rem;
}

#changeLogTable td.action-cell {
  white-space: nowrap;
}

.synced-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 4.25rem;
  margin: 1px;
  padding: 0.25rem 0.5rem;
  color: var(--text-secondary);
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  font-weight: 600;
  line-height: 1.2;
}

/* STRK-44: grouped transaction rows in change log */
.changelog-tx-group-header {
  cursor: pointer;
}
.changelog-tx-group-header td {
  font-weight: 500;
}
.changelog-tx-group-header .changelog-tx-caret {
  display: inline-block;
  transition: transform 0.15s;
  margin-inline-end: 0.3em;
  font-size: 0.7em;
}
.changelog-tx-group-header.expanded .changelog-tx-caret {
  transform: rotate(90deg);
}
.changelog-tx-subtable {
  font-size: 0.85em;
  opacity: 0.9;
}
.changelog-tx-subtable td {
  padding: 2px 4px;
}

@media (max-width: 600px) {
  #changeLogTable th,
  #changeLogTable td {
    font-size: var(--font-size-xs);
  }
}

#detailsModal {
  font-size: clamp(0.8rem, 1vw + 0.5rem, 1rem);
}

/* =============================================================================
   TOTALS CARDS — CAROUSEL
   Five summary cards in a snap-scroll row. All Metals shows first on mobile.
   At ≥1350px all five are visible at once (no carousel chrome needed).
   ============================================================================= */

/* Wrapper provides positioning context for the prev/next arrow buttons */
.totals-wrapper {
  position: relative;
}

/* Carousel row: horizontal flex, snap-scroll, hidden scrollbar */
.totals {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--spacing);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 0 2px var(--spacing-sm); /* 2px side padding so box-shadow isn't clipped */
}
.totals::-webkit-scrollbar {
  display: none;
}

/* Cards: snap to start, sized per viewport */
.total-card {
  background: var(--bg-secondary);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  transition: var(--transition);
  flex: 0 0 calc(100% - 1.5rem); /* mobile: nearly full width, next card peeks */
  scroll-snap-align: start;
  min-width: 0;
}
.total-card:hover {
  box-shadow: var(--shadow-lg);
}

@media (min-width: 580px) {
  .total-card {
    flex: 0 0 calc(50% - var(--spacing) * 0.5);
  }
}
@media (min-width: 960px) {
  .total-card {
    flex: 0 0 calc(33.333% - var(--spacing) * 0.667);
  }
}
@media (min-width: 1350px) {
  /* All cards (5, or 6 with copper) in one row — disable carousel scrolling */
  .totals {
    overflow-x: visible;
    scroll-snap-type: none;
  }
  .total-card {
    flex: 1;
  }
}

/* Six-card tier (STRK-306/341) — every row is a uniform two-line block:
   label left on the first line, value RIGHT-ALIGNED on the second, so
   $123,456.78 never truncates AND row separators stay height-aligned
   across all six cards. (The earlier per-row conditional wrap fixed
   truncation but let long-value cards grow taller than their neighbors —
   STRK-341 live review chose all-lines-drop over misaligned rows.)
   Keyed on the data-cards count applyMetalOrder() stamps, so five-card
   layouts stay pixel-identical to the pre-copper dashboard. */
@media (min-width: 1350px) {
  .totals[data-cards="6"] .total-item {
    display: block;
    padding: 0.3rem 0;
  }
  .totals[data-cards="6"] .total-label {
    display: block;
    font-size: var(--font-size-sm);
    line-height: 1.2;
  }
  .totals[data-cards="6"] .total-value {
    display: block;
    overflow: visible;
    text-overflow: clip;
    text-align: right;
    line-height: 1.35;
  }
}

/* All Metals is pinned first in the carousel below 1350px (pre-existing
   behavior, unchanged). At ≥1350px the pin resets and the user's
   Settings › Metal Order config governs; the DEFAULT config now leads
   with All Metals (STRK-306 review decision), so new users see the
   aggregate card first at every width, while a stored custom order still
   controls the ≥1350px row exactly as before. */
.total-card-all {
  order: -1;
}
@media (min-width: 1350px) {
  .total-card-all {
    order: 0;
  } /* config/DOM order at full desktop */
}

/* ── Carousel navigation arrows ─────────────────────────────────────────── */
.totals-nav-btn {
  position: absolute;
  top: calc(50% - 16px); /* 16px = half button height, above the dots row */
  transform: translateY(-50%);
  z-index: 10;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-primary);
  font-size: var(--font-size-xl);
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow);
  transition:
    background 0.15s,
    opacity 0.15s;
  opacity: 0.85;
  padding: 0;
}
.totals-nav-btn:hover {
  background: var(--bg-secondary);
  opacity: 1;
}
.totals-nav-btn:disabled {
  opacity: 0.3;
  cursor: default;
}
.totals-prev {
  left: -14px;
}
.totals-next {
  right: -14px;
}

@media (min-width: 1350px) {
  .totals-prev,
  .totals-next {
    display: none;
  }
}

/* ── Carousel dot indicators ─────────────────────────────────────────────── */
.totals-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 0.5rem 0 0;
}
.totals-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border);
  border: none;
  cursor: pointer;
  padding: 0;
  transition:
    background 0.2s,
    transform 0.2s;
}
.totals-dot.active {
  background: var(--primary);
  transform: scale(1.3);
}
@media (min-width: 1350px) {
  .totals-dots {
    display: none;
  }
}

.total-card {
  background: var(--bg-secondary);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  transition: var(--transition);
  /* Prevent grid item from overflowing its cell (min-width:auto default causes overflow) */
  min-width: 0;
  overflow: hidden;
}

.total-card:hover {
  box-shadow: var(--shadow-lg);
}

.total-title {
  font-size: var(--font-size-xl);
  font-weight: 700;
  margin-bottom: var(--spacing);
  color: var(--primary);
  text-align: center;
  padding-bottom: var(--spacing-sm);
  border-bottom: 2px solid var(--border);
}

.total-group {
  background: var(--bg-primary);
  border-radius: var(--radius);
  padding: var(--spacing);
  margin: var(--spacing-sm) 0;
  border: 1px solid var(--border);
}

.total-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.375rem 0;
  border-bottom: 1px dashed var(--border);
}

.total-item:last-child {
  border-bottom: none;
}

.total-label {
  font-weight: 500;
  color: var(--text-secondary);
  font-size: var(--font-size-base);
  white-space: nowrap;
  flex-shrink: 0;
}

.total-value {
  font-weight: 600;
  color: var(--text-primary);
  font-size: var(--font-size-lg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.total-title {
  font-size: var(--font-size-xl);
  font-weight: 700;
  margin-bottom: var(--spacing);
  color: var(--text-primary);
  text-align: center;
  padding-bottom: var(--spacing-sm);
  border-bottom: 4px solid var(--border); /* fallback, will be overridden below */
  transition:
    border-color 0.2s,
    color 0.2s;
  cursor: pointer;
  user-select: none;
}

.total-title:hover {
  color: var(--primary);
}

/* Metal-specific underline accent */
.silver .total-title {
  border-bottom: 4px solid var(--silver);
}
.gold .total-title {
  border-bottom: 4px solid var(--gold);
}
.platinum .total-title {
  border-bottom: 4px solid var(--platinum);
}
.palladium .total-title {
  border-bottom: 4px solid var(--palladium);
}
.copper .total-title {
  border-bottom: 4px solid var(--copper);
}

/* All Metals combined card — uses primary accent */
.total-card-all .total-title {
  border-bottom: 4px solid var(--primary);
}

/* Gain/Loss bottom-line emphasis — the "bottom line" of each card */
.total-item-bottom-line {
  border-bottom: none;
  border-top: 2px solid var(--border);
  margin-top: 0.25rem;
  padding-top: 0.5rem;
}
.total-item-bottom-line .total-label {
  font-weight: 700;
  font-size: var(--font-size-md);
}
.total-item-bottom-line .total-value {
  font-weight: 700;
  font-size: var(--font-size-lg);
}

/* In carousel mode cards can be full-width or near-full, so standard sizes work fine.
   No per-column-count overrides needed. */

/* =============================================================================
   TABLES - Main inventory table with interactive features
   
   Features implemented:
   - Fixed table layout for precise column control
   - Sortable headers with visual indicators
   - Clickable item names for editing
   - Collectable status checkboxes
   - Delete buttons with hover effects
   - Column resizing with drag handles
   - Responsive design with mobile optimizations
   - Hover effects and zebra striping for readability
   ============================================================================= */

table {
  width: 100%;
  border-collapse: collapse;
  background: var(--bg-primary);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  table-layout: auto; /* Allow columns to size based on content */
}

.table-section {
  width: 100%;
  max-width: 100%;
  min-height: auto;
  box-sizing: border-box;
  /* Visual chrome — wraps portal-scroll + footer controls */
  border: 2px solid var(--border);
  border-radius: var(--radius);
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
  /* Override base section{overflow:hidden} — portal-scroll handles overflow,
     and hidden here would create an intermediate scroll container that
     breaks position:sticky on thead th in some browsers */
  overflow: visible;
}

/* Scroll container wrapping only the <table> — footer stays outside.
   max-height MUST be set so the container actually constrains content
   and becomes a real scroll container (required for position:sticky).
   JS updatePortalHeight() overrides with a precise row-based value. */
.portal-scroll {
  overflow-x: auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  max-height: 70vh;
  scrollbar-width: thin;
  scrollbar-color: var(--primary) var(--bg-secondary);
  scrollbar-gutter: stable;
}

.portal-scroll::-webkit-scrollbar {
  width: 8px;
}
.portal-scroll::-webkit-scrollbar-track {
  background: var(--bg-secondary);
}
.portal-scroll::-webkit-scrollbar-thumb {
  background-color: var(--primary);
  border-radius: var(--radius);
}
.portal-scroll::-webkit-scrollbar-thumb:hover {
  background-color: var(--primary-hover);
}

#inventoryTable {
  /* Use the available container width and allow responsive scaling
     to prevent right-side columns being clipped. Horizontal scrolling
     remains available via .table-section when necessary. */
  width: 100%;
  table-layout: auto;
  background: var(--bg-primary);
  /* override base table rules that block position:sticky on thead th:
     - border-collapse:separate keeps each cell's box independent
     - border-spacing:0 eliminates visual gaps (same look as collapse)
     - overflow:visible lets sticky reach the .table-section scroll container */
  border-collapse: separate;
  border-spacing: 0;
  overflow: visible;
}

#inventoryTable tbody {
  height: auto;
}

.table-footer-controls {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: 0.25rem;
  width: 100%;
}

/* Bulk Edit Control Panel */
.bulk-edit-panel {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.5rem 0;
  margin-top: 0.5rem;
  border-top: 1px solid var(--border);
  background: var(--bg-secondary);
  border-radius: var(--radius);
}

.bulk-edit-controls {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.bulk-edit-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  transition: var(--transition);
  font-size: var(--font-size-md);
  font-weight: 500;
}

.bulk-edit-icon {
  width: 1.25rem;
  height: 1.25rem;
  fill: currentColor;
}

.toggle-all-btn {
  background: var(--primary);
  color: var(--text-inverse);
}

.toggle-all-btn:hover {
  background: var(--primary-dark);
  transform: translateY(-1px);
}

.save-all-btn {
  background: var(--success);
  color: var(--text-inverse);
}

.save-all-btn:hover {
  background: var(--success-hover);
  transform: translateY(-1px);
}

.cancel-all-btn {
  background: var(--danger);
  color: var(--text-inverse);
}

.cancel-all-btn:hover {
  background: var(--danger-hover);
  transform: translateY(-1px);
}

.bulk-edit-btn:active {
  transform: translateY(0);
}

th {
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-weight: 600;
  padding: 0.375rem 0.25rem; /* Reduced padding for narrower rows */
  text-align: center;
  cursor: pointer;
  position: relative;
  border-bottom: 2px solid var(--border);
  border-right: 1px solid var(--border);
  transition: var(--transition);
  font-size: var(--font-size-base); /* Reduced from 0.95rem for more space */
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
}

/* Removed annoying th:hover animation effect */

td {
  padding: 0.2rem; /* Reduced padding for better density */
  border-bottom: 1px solid var(--border); /* Themed border for cell separation */
  border-right: 1px solid color-mix(in oklch, var(--border), transparent 40%); /* Lighter right border */
  color: var(--text-primary);
  font-size: var(--font-size-sm); /* Reduced from 0.875rem for inline editing */
  line-height: 1.2; /* Tighter line height */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
  max-width: 20ch; /* Limit to approximately 20 characters */
}

/* Name column — constrain width so flex-based truncation kicks in */
td[data-column="name"] {
  max-width: 340px;
  width: auto;
  overflow: hidden; /* Constrain inner flex container to cell's computed width */
}

/* Name cell flex layout — name text truncates, tags stay visible */
.name-cell-content {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
}

/* Name text truncates with ellipsis */
.name-cell-content > .filter-text {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Table thumbnail — coin obverse preview */
.table-thumb {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--bg-tertiary, #2a2a2a);
  vertical-align: middle;
  cursor: pointer;
  transition: box-shadow 0.15s ease;
}
.table-thumb:hover {
  box-shadow: 0 0 0 2px var(--primary);
  z-index: 1;
  position: relative;
}
/* Rectangular thumbnails for bars, notes, aurum, sets */
.table-thumb.table-thumb-rect {
  background: transparent;
  border-radius: var(--radius);
}
.table-thumb.table-thumb-rect:hover {
  border-radius: var(--radius);
}

/* Thumb popover — wider variant of the bulk-img-popover */
.thumb-popover {
  width: 300px;
}
.thumb-popover-preview {
  aspect-ratio: 1;
  min-height: 110px;
}
.thumb-popover-empty {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}
/* Make the whole image cell feel clickable */
#inventoryTable td[data-column="image"] {
  cursor: pointer;
}
/* Back to top floating button */
.back-to-top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 1000;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--back-to-top-border);
  background: var(--back-to-top-bg);
  color: var(--back-to-top-text);
  cursor: pointer;
  box-shadow: var(--back-to-top-shadow);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}
.back-to-top.visible {
  opacity: 1;
  pointer-events: auto;
}
.back-to-top:hover {
  background: var(--back-to-top-hover-bg);
}

/* Reverse thumbnail — slight overlap for paired display */
.table-thumb + .table-thumb {
  margin-left: 2px;
}
/* Keep thumbnail in layout for IntersectionObserver but invisible until src is set */
.table-thumb:not([src]) {
  visibility: hidden;
}
/* Placeholder thumbnails — subtler than real images */
.table-thumb-placeholder {
  opacity: 0.55;
  filter: saturate(0.7);
}

/* Tags never shrink — always visible */
.name-cell-content > .year-tag,
.name-cell-content > .numista-tag,
.name-cell-content > .pcgs-tag,
.name-cell-content > .grade-tag,
.name-cell-content > .serial-tag,
.name-cell-content > .storage-tag,
.name-cell-content > .notes-indicator,
.name-cell-content > .purity-tag,
.name-cell-content > .tags-inline-chip {
  flex-shrink: 0;
}

td[data-column="purchaseLocation"],
td[data-column="storageLocation"] {
  max-width: 9ch; /* Reduced from 18ch - compact location columns */
  width: 9ch;
  min-width: 9ch;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Fixed date column — compact MM/DD/YY format */
td[data-column="date"],
th[data-column="date"] {
  max-width: 9ch;
  width: 9ch;
  min-width: 9ch;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Metal column with toggle capability and increased width */
#inventoryTable th[data-column="metal"],
#inventoryTable td[data-column="metal"] {
  max-width: 25ch; /* Increased metal column to prevent wrapping */
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}
/* Transition only on td — transition:all on the sticky th breaks stacking */
#inventoryTable td[data-column="metal"] {
  transition: all 0.3s ease;
}

/* Metal column expansion on hover - CELLS ONLY */
#inventoryTable td[data-column="metal"]:hover {
  max-width: none;
  white-space: nowrap;
  z-index: 10;
  background: var(--bg-primary);
  box-shadow: var(--shadow);
  border-radius: var(--radius-sm);
}

/* Price column toggle styling */
#inventoryTable th[data-column="purchasePrice"] {
  cursor: pointer;
  /* position: sticky inherited from #inventoryTable thead th —
     sticky acts as relative for child/pseudo positioning */
}

#inventoryTable th[data-column="purchasePrice"]:after {
  content: "⇄";
  position: absolute;
  right: 0.25rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--font-size-base);
  opacity: 0.6;
}

[data-column].hidden,
[data-column].hidden-empty {
  display: none;
}

/* Collectable column header removed in portfolio redesign */

/* Base row styling */
tr {
  background: var(--bg-primary);
  transition: filter 0.2s ease-in-out;
}

/* Zebra striping */
tr:nth-child(even) {
  background: var(--bg-secondary);
}

/* Hover effect using a filter instead of background color */
tr:hover {
  filter: brightness(0.95);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: 1;
}

.sort-indicator {
  margin-left: 0.25rem;
  font-weight: bold;
  color: var(--primary);
  font-size: var(--font-size-xs);
}

/* Utility column width classes */
.shrink {
  width: 1%;
  white-space: nowrap;
  min-width: 0;
}
/* Name column cells remain left aligned for readability */
#inventoryTable td[data-column="name"] {
  text-align: left;
}

/* Legacy "Enhanced Mobile Responsive Design" section removed —
   consolidated into canonical responsive block below line 5127 and
   card-view rules at end of file.  See STACK-38 / STACK-31. */

/* Clickable name cell styling */
.name-cell {
  text-align: left !important;
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  cursor: pointer;
  padding: var(--spacing-sm);
}

.name-text {
  flex: 1;
  text-align: left;
  font-weight: 500;
  transition: var(--transition);
}

.name-text:hover {
  color: var(--primary);
  text-decoration: underline;
}

/* Make buttons in table cells smaller */
td .btn {
  padding: 0.25rem 0.5rem;
  font-size: var(--font-size-xs);
  min-height: 1.8rem;
  line-height: 1;
  margin: 1px;
}

td .action-btn {
  width: 2rem;
  height: 2rem;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

td .action-icon {
  width: 1.25rem;
  height: 1.25rem;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

td .action-icon.danger {
  color: var(--danger);
}

/* Enhanced delete button styling */
td .action-icon.delete-btn {
  color: var(--danger);
  border-radius: var(--radius);
  padding: 0.25rem;
  /* Removed transition: var(--transition); */
}

/* Removed hover effect to prevent flooding into other cells */

td .action-icon.success {
  color: var(--success);
}

td .filter-text {
  cursor: pointer;
  font-weight: 600;
}

.na-value {
  color: var(--text-muted);
  font-style: italic;
}

td .filter-text a,
td .filter-text a:visited {
  color: inherit;
}

/* Enhanced Inline Editing Styles */
td .inline-edit-icon,
td .save-inline,
td .cancel-inline {
  cursor: pointer;
  transition: var(--transition);
  user-select: none;
}

td .inline-edit-icon {
  margin-right: 0.25rem;
  font-size: var(--font-size-xl);
  display: inline-block;
  color: var(--text-muted);
  padding: 0.1rem;
  border-radius: var(--radius);
}

td .inline-edit-icon:hover {
  color: var(--primary);
  background: var(--bg-secondary);
  transform: scale(1.1);
}

/* Name cell inline edit icons */
td[data-column="name"] .inline-edit-icon {
  border-radius: 50%;
  padding: 2px;
}

td[data-column="name"] .inline-edit-icon:hover {
  opacity: 1 !important;
  background: var(--bg-elev-1);
  transform: translateY(-50%) scale(1.2);
}

td.editing {
  position: relative;
  background: var(--bg-tertiary) !important;
  border: 2px solid var(--primary) !important;
  border-radius: var(--radius);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

td.editing .inline-input {
  width: 100%;
  min-width: 0;
  border: none;
  background: transparent;
  color: var(--text-primary);
  font-size: inherit;
  font-weight: 500;
  padding: 0.2rem;
  margin: 0;
  border-radius: 0;
  box-shadow: none;
  -moz-appearance: textfield;
}

td.editing .inline-input::-webkit-outer-spin-button,
td.editing .inline-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

td.editing .inline-input:focus {
  outline: none;
  background: var(--bg-primary);
  border-radius: var(--radius);
}
td.editing .inline-input:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}

td.editing .save-inline,
td.editing .cancel-inline {
  position: absolute;
  right: 0.2rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  font-size: var(--font-size-lg);
  padding: 0.2rem;
  margin: 0;
  cursor: pointer;
  border-radius: var(--radius);
  transition: var(--transition);
}

td.editing .save-inline {
  right: 1.5rem;
  color: var(--success);
}

td.editing .save-inline:hover {
  background: var(--success);
  color: var(--text-inverse);
  transform: translateY(-50%) scale(1.2);
}

td.editing .cancel-inline {
  right: 0.2rem;
  color: var(--danger);
}

td.editing .cancel-inline:hover {
  background: var(--danger);
  color: var(--text-inverse);
  transform: translateY(-50%) scale(1.2);
}

/* Mobile inline editing adjustments */
@media (max-width: 768px) {
  td .inline-edit-icon {
    font-size: var(--font-size-lg);
    margin-right: 0.15rem;
  }

  td.editing .inline-input {
    font-size: var(--font-size-sm);
  }

  td.editing .save-inline,
  td.editing .cancel-inline {
    font-size: var(--font-size-base);
    padding: 0.15rem;
  }

  td.editing .save-inline {
    right: 1.2rem;
  }
}

@media (max-width: 480px) {
  td .inline-edit-icon {
    font-size: var(--font-size-lg);
    margin-right: 0.1rem;
  }

  td.editing {
    border-width: 1px;
  }

  td.editing .inline-input {
    font-size: var(--font-size-xs);
    padding: 0.15rem;
  }

  td.editing .save-inline,
  td.editing .cancel-inline {
    font-size: var(--font-size-sm);
    padding: 0.1rem;
  }
}

td .filter-text:hover,
td .filter-text:focus {
  text-decoration: underline;
  background: var(--bg-secondary);
  border-radius: var(--radius);
  padding: 0.1rem 0.2rem;
  margin: -0.1rem -0.2rem;
  transition: var(--transition);
}

/* Make toggle switches smaller */
td .switch {
  width: 32px;
  height: 18px;
}

td .slider {
  border-radius: var(--radius-pill);
}

td .slider:before {
  height: 14px;
  width: 14px;
  left: 2px;
  bottom: 2px;
}

td input:checked + .slider:before {
  transform: translateX(14px);
}

/* Enhanced Resize handle styling */
.resize-handle {
  position: absolute;
  right: 0;
  top: 0;
  width: 8px;
  height: 100%;
  background: transparent;
  cursor: col-resize;
  z-index: 10;
  transition: var(--transition);
  border-right: 2px solid transparent;
}

.resize-handle:hover {
  background: color-mix(in oklch, var(--primary), transparent 90%);
  border-right-color: var(--primary);
  opacity: 0.8;
}

.resize-handle:active {
  background: color-mix(in oklch, var(--primary), transparent 80%);
  border-right-color: var(--primary-hover);
  opacity: 1;
  width: 10px;
}

/* Mobile resize handle adjustments */
@media (max-width: 768px) {
  .resize-handle {
    width: 10px;
    border-right-width: 3px;
  }

  .resize-handle:active {
    width: 12px;
  }
}

/* =============================================================================
   MODALS - Edit modal and analytics modal with charts
   
   Two modal types:
   1. Edit Modal: Item editing form with validation
   2. Details Modal: Analytics with pie charts and data breakdowns
   
   Features:
   - Backdrop blur and overlay effects
   - Smooth slide-in animation
   - Responsive sizing for all screen sizes
   - Keyboard navigation support
   - Auto-scrolling for content overflow
   ============================================================================= */

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  padding: var(--spacing);
  animation: modalFadeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes modalFadeIn {
  from {
    opacity: 0;
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
  }
  to {
    opacity: 1;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
}

.modal-content {
  background: rgba(248, 250, 252, 0.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(248, 250, 252, 0.2);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  max-width: 1200px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow:
    0 25px 50px -12px rgba(0, 0, 0, 0.25),
    0 0 0 1px rgba(248, 250, 252, 0.05),
    inset 0 1px 0 rgba(248, 250, 252, 0.1);
  animation: modalSlideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

/* STRK-25: split — was :is(dark, slate) hardcoding Slate-blue rgba into BOTH
   themes, defeating the new metallic dark palette. Dark now reads tokens; slate
   keeps the original Tailwind Slate values. */
[data-theme="dark"] .modal-content {
  background: color-mix(in oklch, var(--bg-card), transparent 5%);
  border: 1px solid var(--border);
  box-shadow:
    0 25px 50px -12px rgba(0, 0, 0, 0.5),
    0 0 0 1px color-mix(in oklch, var(--border), transparent 75%),
    inset 0 1px 0 color-mix(in oklch, var(--text-primary), transparent 90%);
}

[data-theme="slate"] .modal-content {
  background: rgba(30, 41, 59, 0.95);
  border: 1px solid rgba(148, 163, 184, 0.2);
  box-shadow:
    0 25px 50px -12px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(148, 163, 184, 0.05),
    inset 0 1px 0 rgba(148, 163, 184, 0.1);
}

.modal-content::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--primary), transparent);
  opacity: 0.6;
}

/* =============================================================================
   VIEW ITEM MODAL — Coin showcase card with image display + enriched data

   Glass-morphism card matching existing modal system.
   Images displayed on a subtle dark field (coin presentation aesthetic).
   Sections separated by faint gradient dividers.
   ============================================================================= */

[data-theme="sepia"] .modal-content {
  background: rgba(232, 220, 197, 0.95); /* Matches new --bg-card #e8dcc5 */
  border: 1px solid rgba(139, 69, 19, 0.2);
  box-shadow:
    0 25px 50px -12px rgba(62, 47, 30, 0.25),
    0 0 0 1px rgba(139, 69, 19, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* --- Modal content shell --- */
#viewItemModal .modal-content {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  width: 92%;
  max-width: 820px;
  max-height: 90vh;
}

/* --- Header — flat, theme-aware (matches edit modal pattern) --- */
#viewItemModal .modal-header {
  background: var(--bg-secondary);
  color: var(--text-primary);
  padding: var(--spacing-lg) var(--spacing-xl) var(--spacing-sm);
  position: relative;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  border-bottom: 1px solid var(--border);
  box-shadow: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Close X button — top-right corner */
.view-modal-close {
  position: absolute;
  top: 6px;
  right: 10px;
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: var(--font-size-xl);
  line-height: 1;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: var(--radius);
  transition:
    color 0.15s ease,
    background 0.15s ease;
  z-index: 1;
}

.view-modal-close:hover {
  color: var(--text-primary);
  background: var(--bg-tertiary);
}

#viewItemModal .modal-header h2 {
  margin: 0;
  color: var(--text-primary);
  font-size: var(--font-size-xl);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Title row — title left, padded so text can't run under the absolute-pos close (X) */
.view-header-title-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  min-width: 0;
  padding-right: 32px;
}

/* Badges row — catalog ID + count chip */
.view-header-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  min-height: 1.4rem;
}

/* --- Header action buttons (eBay) — pushed right inside badges row --- */
.view-header-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
  align-items: center;
  margin-left: auto;
}

.view-header-actions button {
  padding: 5px 12px;
  border-radius: var(--radius);
  font-size: var(--font-size-sm);
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition);
  border: 1px solid color-mix(in oklch, var(--text-inverse), transparent 80%);
  background: color-mix(in oklch, var(--text-inverse), transparent 90%);
  color: inherit;
  white-space: nowrap;
}

.view-header-actions button:hover {
  background: color-mix(in oklch, var(--text-inverse), transparent 80%);
}

.view-header-actions .view-ebay-btn {
  background: transparent;
  border-color: color-mix(in oklch, var(--text-inverse), transparent 80%);
}

.view-header-actions .view-ebay-btn:hover {
  background: color-mix(in oklch, var(--text-inverse), transparent 85%);
}

#viewItemModal .view-modal-catalog-id {
  display: inline-block;
  font-size: var(--font-size-xs);
  font-weight: 500;
  opacity: 0.85;
  background: rgba(128, 128, 128, 0.2);
  color: inherit;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
}

#viewItemModal .view-modal-count-chip {
  display: inline-block;
  font-size: var(--font-size-xs);
  font-weight: 500;
  opacity: 0.85;
  background: rgba(128, 128, 128, 0.2);
  color: inherit;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
}

/* --- Scrollable body --- */
#viewItemModal .modal-body {
  padding: 0;
  overflow-y: auto;
  flex: 1;
}

/* --- Image showcase section --- */
.view-image-section {
  background: var(--bg-tertiary);
  padding: var(--spacing-lg);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: var(--spacing-lg);
  position: relative;
}

.view-image-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-xs);
  position: relative;
  z-index: 1;
}

/* Default: round coin frame */
.view-image-slot img {
  max-width: 180px;
  max-height: 180px;
  object-fit: contain;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

/* Rectangular frame for bars, notes, Aurum/Goldback — auto-fits aspect ratio */
.view-image-slot.view-shape-rect img {
  border-radius: var(--radius);
  max-width: 200px;
  max-height: 260px;
  width: auto;
  height: auto;
}

.view-image-slot.view-shape-rect .view-image-placeholder {
  border-radius: var(--radius);
  width: 140px;
  height: 200px;
}

.view-image-slot img:hover {
  transform: scale(1.06);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
}

.view-image-slot .view-image-label {
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(248, 250, 252, 0.55);
  font-weight: 500;
}

/* Placeholder when no image available */
.view-image-placeholder {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  border: 1px dashed rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-3xl);
  color: rgba(255, 255, 255, 0.15);
}

/* --- Certification badge overlay on image section --- */
.view-cert-badge {
  position: absolute;
  bottom: var(--spacing-sm);
  right: calc(var(--spacing-sm) + 10px); /* extra padding for scrollbar clearance */
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: var(--font-size-md);
  font-weight: 600;
  padding: 0.3rem 0.6rem;
  border-radius: var(--radius);
  background: rgba(0, 0, 0, 0.55);
  color: rgba(248, 250, 252, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(4px);
  line-height: 1.2;
  white-space: nowrap;
}

/* --- Authority-specific grade + border colors --- */
.view-cert-badge[data-authority="PCGS"] {
  border-color: color-mix(in oklch, var(--authority-pcgs), transparent 60%);
}
.view-cert-badge[data-authority="PCGS"] .view-cert-grade {
  color: var(--authority-pcgs);
}
.view-cert-badge[data-authority="NGC"] {
  border-color: color-mix(in oklch, var(--authority-ngc), transparent 60%);
}
.view-cert-badge[data-authority="NGC"] .view-cert-grade {
  color: var(--authority-ngc);
}
.view-cert-badge[data-authority="ANACS"] {
  border-color: color-mix(in oklch, var(--authority-anacs), transparent 60%);
}
.view-cert-badge[data-authority="ANACS"] .view-cert-grade {
  color: var(--authority-anacs);
}
.view-cert-badge[data-authority="ICG"] {
  border-color: color-mix(in oklch, var(--authority-icg), transparent 60%);
}
.view-cert-badge[data-authority="ICG"] .view-cert-grade {
  color: var(--authority-icg);
}

/* Grade text — clickable when PCGS CoinFacts link available */
.view-cert-grade.view-cert-clickable {
  cursor: pointer;
  transition: var(--transition);
}
.view-cert-grade.view-cert-clickable:hover {
  text-decoration: underline;
  opacity: 0.85;
}

/* --- Verify checkmark states: gray → green → red --- */
.view-cert-verify {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.35); /* gray — never verified */
  transition: var(--transition);
  padding: 0.15rem;
  border-radius: 50%;
}

/* Inline verify badge in Grading section (STAK-124) */
.view-cert-verify-inline {
  margin-left: 0.4rem;
  vertical-align: middle;
  color: var(--text-muted);
}
.view-cert-verify-inline:hover {
  color: var(--text-secondary);
  background: var(--bg-tertiary);
}
.view-cert-verify-inline.pcgs-verified {
  color: var(--success);
}
.view-cert-verify-inline.pcgs-verify-failed {
  color: var(--danger);
}
.view-cert-verify:hover {
  color: color-mix(in oklch, var(--text-inverse), transparent 30%);
  background: color-mix(in oklch, var(--text-inverse), transparent 90%);
}
.view-cert-verify.pcgs-verifying {
  color: color-mix(in oklch, var(--text-inverse), transparent 70%);
  animation: pcgs-pulse 1s ease-in-out infinite;
}
.view-cert-verify.pcgs-verified {
  color: var(--success); /* green — passed */
}
.view-cert-verify.pcgs-verified:hover {
  color: var(--success-hover);
  background: color-mix(in oklch, var(--success), transparent 90%);
}
.view-cert-verify.pcgs-verify-failed {
  color: var(--danger); /* red — failed */
}

/* Sepia theme — adjust colors on dark image bg */
[data-theme="sepia"] .view-cert-badge[data-authority="PCGS"] .view-cert-grade {
  color: #93bbfd;
}
[data-theme="sepia"] .view-cert-badge[data-authority="NGC"] .view-cert-grade {
  color: #fcd34d;
}
[data-theme="sepia"] .view-cert-badge[data-authority="ANACS"] .view-cert-grade {
  color: #6ee7b7;
}
[data-theme="sepia"] .view-cert-verify.pcgs-verified {
  color: #86efac;
}

/* --- Data sections --- */
.view-detail-section {
  padding: var(--spacing) var(--spacing-xl);
  border-bottom: 1px solid var(--border);
}

.view-detail-section:last-child {
  border-bottom: none;
}

.view-section-title {
  font-size: var(--font-size-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--primary);
  margin: 0 0 var(--spacing-sm) 0;
  padding-bottom: 2px;
}

.view-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px var(--spacing-lg);
}

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

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

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

.view-detail-item {
  display: flex;
  flex-direction: column;
  padding: 3px 0;
}

.view-detail-item.full-width {
  grid-column: 1 / -1;
}

.view-detail-label {
  font-size: var(--font-size-xs);
  font-weight: 500;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.view-detail-value {
  font-size: var(--font-size-md);
  font-weight: 500;
  color: var(--text-primary);
  word-break: break-word;
}

.view-detail-value.gain {
  color: var(--success);
  font-weight: 600;
}

.view-detail-value.loss {
  color: var(--danger);
  font-weight: 600;
}

.view-detail-value.muted {
  color: var(--text-secondary);
  font-style: italic;
}

/* --- Valuation section emphasis --- */
.view-detail-section.view-valuation-section {
  background: var(--bg-secondary);
}

/* --- Chart range pills --- */
.view-chart-range-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin-bottom: var(--spacing-sm);
}

.view-chart-range-pill {
  padding: 2px 8px;
  font-size: var(--font-size-xs);
  font-weight: 500;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: var(--transition);
}

.view-chart-range-pill:hover {
  background: var(--bg-tertiary);
}

.view-chart-range-pill.active {
  background: var(--primary);
  color: var(--text-inverse);
  border-color: var(--primary);
}

/* --- Custom date range picker --- */
.view-chart-date-range {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}

.view-chart-date-input {
  padding: 1px 4px;
  font-size: var(--font-size-sm);
  font-family: inherit;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-secondary);
  color: var(--text-secondary);
  cursor: pointer;
  transition: var(--transition);
  max-width: 110px;
}

.view-chart-date-input:hover {
  border-color: var(--primary);
}

.view-chart-date-input:focus {
  outline: none;
  border-color: var(--primary);
  color: var(--text-primary);
}

.view-chart-date-sep {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  line-height: 1;
}

/* --- Price history chart --- */
.view-chart-container {
  position: relative;
  width: 100%;
  height: 200px;
  margin-top: var(--spacing-sm);
}

.view-chart-no-data {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 120px;
  color: var(--text-secondary);
  font-size: var(--font-size-base);
  font-style: italic;
}

.view-chart-caption {
  margin: var(--spacing-xs) 0 0;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  font-style: italic;
  text-align: center;
}

/* Catalog Data (Numista) section — 3-column grid override */
.view-numista-section .view-detail-grid {
  grid-template-columns: 1fr 1fr 1fr;
}

/* Image tooltip for obverse/reverse descriptions */
.view-image-slot {
  position: relative;
}

.view-image-slot[title] img {
  cursor: help;
}

/* Rarity bar */
.view-rarity-bar {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.view-rarity-track {
  flex: 1;
  height: 6px;
  background: var(--bg-tertiary);
  border-radius: var(--radius-sm);
  overflow: hidden;
  max-width: 120px;
}

.view-rarity-fill {
  height: 100%;
  border-radius: var(--radius-sm);
  background: linear-gradient(90deg, var(--success), var(--warning), var(--danger));
  transition: width 0.4s ease;
}

.view-rarity-score {
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--text-primary);
}

/* --- Notes section --- */
.view-notes-text {
  font-size: var(--font-size-md);
  color: var(--text-secondary);
  line-height: 1.5;
  font-style: italic;
  white-space: pre-wrap;
  word-break: break-word;
}

/* --- View modal sticky footer --- */
.view-modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
  padding: 0.75rem var(--spacing-xl);
  padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
  padding-left: max(var(--spacing-xl), env(safe-area-inset-left));
  padding-right: max(var(--spacing-xl), env(safe-area-inset-right));
  border-top: 1px solid var(--border);
  background: var(--bg-secondary);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  flex-shrink: 0;
}

.view-footer-left,
.view-footer-right {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.view-modal-footer .view-footer-btn {
  border-radius: var(--radius-pill);
  padding: 0.3rem 0.75rem;
  font-size: var(--font-size-sm);
  font-weight: 700;
  cursor: pointer;
  border: none;
  transition:
    background 0.15s ease,
    border-color 0.15s ease;
}

.view-modal-footer .view-footer-btn.secondary {
  background: var(--glass-input-bg, rgba(0, 0, 0, 0.04));
  border: 1px solid var(--glass-input-border, var(--border));
  color: var(--text-primary);
}

.view-modal-footer .view-footer-btn.secondary:hover {
  background: var(--glass-input-focus-bg, rgba(0, 0, 0, 0.07));
  border-color: var(--primary);
}

.view-modal-footer .view-footer-btn.primary {
  background: var(--warning);
  color: var(--bg-primary);
  border: 1px solid transparent;
  box-shadow: 0 2px 8px color-mix(in oklch, var(--warning), transparent 75%);
}

.view-modal-footer .view-footer-btn.primary:hover {
  filter: brightness(1.1);
}

.view-modal-footer .view-footer-btn.danger {
  background: var(--danger);
  color: var(--text-inverse);
  border: 1px solid transparent;
}

.view-modal-footer .view-footer-btn.danger:hover {
  filter: brightness(1.1);
}

/* Clickable N# badge */
.view-modal-catalog-id[style*="cursor: pointer"]:hover {
  filter: brightness(1.2);
}

/* --- Responsive: mobile view modal (≤768px) --- */
@media (max-width: 768px) {
  /* Full-screen modal on phones — no chrome, maximum content.
     STAK-578 P5.2: 100dvh override for Android Chrome (env() resolves to 0
     on Android, so only dynamic-viewport sizing keeps the sticky footer
     above the gesture bar). 100vh declarations are kept first as the
     fallback for browsers that don't yet support dvh. */
  #viewItemModal .modal-content {
    width: 100%;
    max-width: 100%;
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    border-radius: 0;
    margin: 0;
  }

  #viewItemModal .modal-header {
    border-radius: 0;
    padding: var(--spacing-sm) var(--spacing);
    flex-wrap: wrap;
  }

  #viewItemModal .modal-header h2 {
    font-size: var(--font-size-lg);
    line-height: 1.3;
  }

  .view-header-actions button {
    padding: 4px 8px;
    font-size: var(--font-size-xs);
  }

  /* Images: side-by-side, flex-fill to use available width (STAK-124) */
  .view-image-section {
    flex-direction: row;
    justify-content: center;
    gap: var(--spacing);
    padding: var(--spacing);
  }

  .view-image-slot {
    flex: 1 1 0;
    min-width: 0;
  }

  .view-image-slot img {
    max-width: 100%;
    max-height: 160px;
    width: auto;
  }

  .view-image-placeholder {
    width: 100%;
    aspect-ratio: 1;
    font-size: var(--font-size-3xl);
  }

  .view-image-slot.view-shape-rect img {
    max-width: 100%;
    max-height: 200px;
  }

  .view-image-slot.view-shape-rect .view-image-placeholder {
    width: 100%;
    aspect-ratio: 3/4;
  }

  .view-cert-badge {
    display: none; /* Hidden ≤768px — inline verify in Grading section instead */
  }

  /* 2-column data grid (down from 3/4) */
  .view-detail-grid,
  .view-detail-grid.three-col,
  .view-detail-grid.four-col {
    grid-template-columns: 1fr 1fr;
  }

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

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

  .view-chart-container {
    height: 160px;
  }

  .view-detail-section {
    padding: var(--spacing-sm) var(--spacing);
  }

  .view-modal-footer {
    border-radius: 0;
  }
}

/* --- Extra-small phones (≤480px) — optimized for 360-412px viewports (STAK-124) --- */
@media (max-width: 480px) {
  .view-detail-grid,
  .view-detail-grid.three-col,
  .view-detail-grid.four-col {
    grid-template-columns: 1fr 1fr;
  }

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

  /* Tighter image gap at smallest screens */
  .view-image-section {
    gap: var(--spacing-md);
    padding: 0.5rem;
  }

  .view-image-slot img {
    max-height: 150px;
  }

  .view-image-slot.view-shape-rect img {
    max-height: 180px;
  }

  /* Price History pills — ~5% larger for touch targets (STAK-124) */
  .view-chart-range-pill {
    padding: 3px 10px;
    font-size: var(--font-size-xs);
  }
}

/* =============================================================================
   ABOUT MODAL STYLING - Enhanced splash page design
   ============================================================================= */

.about-modal-content {
  width: 75vw;
  max-width: 1200px;
  padding: 0;
  overflow: hidden;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}

.about-modal-header {
  background: var(--bg-secondary);
  padding: var(--spacing) var(--spacing-xl);
  position: relative;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.about-modal-header h1 {
  margin: 0;
  color: var(--text-secondary);
  text-align: center;
}

.about-title {
  font-size: var(--font-size-3xl);
  font-weight: 700;
  margin: 0;
  text-align: center;
  color: var(--text-primary);
}

.about-title #aboutAppName {
  color: var(--primary);
}

.about-title #aboutVersion {
  color: var(--text-secondary);
}

.modal-close {
  position: absolute;
  top: var(--spacing);
  right: var(--spacing);
  background: none;
  border: none;
  font-size: var(--font-size-2xl);
  color: var(--text-secondary);
  cursor: pointer;
  padding: var(--spacing-sm);
  border-radius: var(--radius);
  transition: var(--transition);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-close:hover {
  color: var(--text-primary);
  background: var(--bg-primary);
}

.about-modal-body {
  padding: var(--spacing-xl);
  overflow-y: auto;
  flex: 1;
  scrollbar-width: thin;
  scrollbar-color: var(--primary) var(--bg-secondary);
}

.about-modal-body::-webkit-scrollbar {
  width: 8px;
}

.about-modal-body::-webkit-scrollbar-track {
  background: var(--bg-secondary);
  border-radius: var(--radius);
}

.about-modal-body::-webkit-scrollbar-thumb {
  background-color: var(--primary);
  border-radius: var(--radius);
}

.about-modal-body::-webkit-scrollbar-thumb:hover {
  background-color: var(--primary-hover);
}

.about-description {
  font-size: var(--font-size-xl);
  line-height: 1.7;
  color: var(--text-secondary);
  margin: var(--spacing-xl) 0;
  text-align: center;
  padding: var(--spacing-lg);
  background: var(--bg-secondary);
  border-radius: var(--radius);
  border: 1px solid var(--border);
}

/* Old .about-badges removed — replaced by STAK-490 About Tab styles */

.about-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.65rem;
  font-size: var(--font-size-base);
  font-weight: 500;
  color: var(--text-secondary);
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  text-decoration: none;
  transition:
    color 0.15s ease,
    border-color 0.15s ease;
}

a.about-badge:hover {
  color: var(--text-primary);
  border-color: var(--text-muted);
}

.about-badge svg {
  width: 0.9rem;
  height: 0.9rem;
  flex-shrink: 0;
}

.about-alert {
  background: linear-gradient(135deg, var(--bg-card), var(--bg-secondary));
  border: 1px solid color-mix(in oklch, var(--danger), transparent 70%);
  border-left: 4px solid var(--danger);
  border-radius: var(--radius);
  padding: var(--spacing-lg);
  margin: var(--spacing-xl) 0;
  position: relative;
  overflow: hidden;
}

:is([data-theme="dark"], [data-theme="slate"]) .about-alert {
  background: linear-gradient(
    135deg,
    color-mix(in oklch, var(--danger), var(--bg-primary) 80%),
    var(--bg-primary)
  );
  border-color: color-mix(in oklch, var(--danger), var(--bg-primary) 50%);
}

.alert-header {
  display: flex;
  align-items: center;
  margin-bottom: var(--spacing);
  font-weight: 600;
  color: var(--danger);
}

.alert-icon {
  font-size: var(--font-size-xl);
  margin-right: var(--spacing-sm);
}

.about-alert .alert-content {
  column-count: 2;
  column-gap: var(--spacing-lg);
}

.about-alert .alert-content p {
  margin: 0 0 var(--spacing);
  line-height: 1.6;
  color: var(--text-primary);
  break-inside: avoid;
}

.about-alert-compact {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing) var(--spacing-lg);
  margin: var(--spacing-lg) 0;
  font-size: var(--font-size-md);
}

.about-alert-link {
  background: none;
  border: none;
  padding: 0;
  color: var(--primary);
  cursor: pointer;
  font-size: inherit;
  text-decoration: underline;
}

.about-alert-link:hover {
  color: var(--primary-hover);
}

.about-section-footer {
  margin-top: var(--spacing);
  padding-top: var(--spacing);
  border-top: 1px solid var(--border);
  text-align: right;
}

.about-card-link {
  background: none;
  border: none;
  padding: 0;
  color: var(--primary);
  cursor: pointer;
  font-size: var(--font-size-md);
  text-decoration: none;
}

.about-card-link:hover {
  color: var(--primary-hover);
  text-decoration: underline;
}

.alert-actions {
  margin-top: var(--spacing-lg);
  text-align: center;
}

.about-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-xl);
}

@media (max-width: 768px) {
  .about-info-grid {
    grid-template-columns: 1fr;
  }
}

.about-info-grid .about-section {
  margin-bottom: 0;
}

.about-section {
  margin-bottom: var(--spacing-xl);
  background: var(--bg-secondary);
  border-radius: var(--radius);
  padding: var(--spacing-lg);
  border: 1px solid var(--border);
}

.about-section .section-title {
  font-size: var(--font-size-xl);
  font-weight: 600;
  color: var(--primary);
  margin-bottom: var(--spacing);
  padding-bottom: var(--spacing-sm);
  border-bottom: 2px solid var(--border);
}

.changelog-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.changelog-list li {
  padding: var(--spacing-sm) 0;
  border-bottom: 1px dashed var(--border);
  color: var(--text-secondary);
  line-height: 1.5;
}

.changelog-list li:last-child {
  border-bottom: none;
}

.changelog-list li::before {
  content: "•";
  color: var(--primary);
  font-weight: bold;
  font-size: var(--font-size-xl);
  margin-right: var(--spacing-sm);
}

.resources-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--spacing);
}

.resource-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  padding: var(--spacing) var(--spacing-lg);
  background: var(--bg-primary);
  color: var(--text-primary);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  text-decoration: none;
  font-weight: 500;
  transition: var(--transition);
  cursor: pointer;
  font-size: var(--font-size-md);
}

.resource-btn:hover {
  background: var(--bg-tertiary);
  border-color: var(--primary);
  color: var(--primary);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.acceptance-text {
  font-size: var(--font-size-md);
  color: var(--text-muted);
  margin-top: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
  line-height: 1.5;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.about-accept-btn {
  background: linear-gradient(135deg, var(--success), var(--success-hover));
  color: var(--text-inverse);
  font-size: var(--font-size-xl);
  padding: var(--spacing) var(--spacing-xl);
  border: none;
  border-radius: var(--radius);
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  box-shadow: var(--shadow);
}

.about-accept-btn:hover {
  background: linear-gradient(
    135deg,
    var(--success-hover),
    color-mix(in oklch, var(--success-hover), var(--hover-mix) 15%)
  );
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

/* Responsive adjustments for about modal */
@media (max-width: 768px) {
  .about-modal-content {
    width: 95vw;
    margin: var(--spacing-sm);
    max-height: 95vh;
  }

  .about-title {
    font-size: var(--font-size-2xl);
  }

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

  .about-modal-body {
    padding: var(--spacing);
  }

  .about-alert .alert-content {
    column-count: 1;
  }
}

@media (max-width: 480px) {
  .about-title {
    font-size: var(--font-size-xl);
  }

  .about-description {
    font-size: var(--font-size-lg);
    padding: var(--spacing);
  }

  .about-modal-header {
    padding: var(--spacing);
  }
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(-20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* =============================================================================
   FAQ MODAL — Accordion styles
   ============================================================================= */

.faq-item {
  border: 1px solid var(--border-color, rgba(0, 0, 0, 0.1));
  border-radius: var(--radius);
  background: var(--bg-secondary, #f8fafc);
  margin-bottom: 0.5rem;
  overflow: hidden;
  transition: border-color 0.2s ease;
}

.faq-item[open] {
  border-color: var(--primary, #3b82f6);
}

.faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.85rem 1rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  gap: 0.75rem;
  color: var(--text-primary, #1e293b);
}

.faq-question::-webkit-details-marker {
  display: none;
}

.faq-question::after {
  content: "▾";
  font-size: var(--font-size-md);
  flex-shrink: 0;
  transition: transform 0.2s ease;
  color: var(--text-secondary, #64748b);
}

.faq-item[open] > .faq-question::after {
  transform: rotate(-180deg);
}

.faq-answer {
  padding: 0 1rem 1rem 1rem;
  color: var(--text-secondary, #475569);
  line-height: 1.65;
  font-size: var(--font-size-lg);
}

.faq-answer p + p {
  margin-top: 0.6rem;
}

.faq-answer a {
  color: var(--primary, #3b82f6);
}

.faq-list {
  list-style: disc;
  padding-left: 1.5rem;
  margin: 0.5rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

/* Nested technical sub-accordion */
.faq-technical {
  border: 1px dashed var(--border-color, rgba(0, 0, 0, 0.15));
  border-radius: var(--radius-sm);
  background: var(--bg-primary, #f1f5f9);
  margin-top: 0.75rem;
  padding: 0;
  overflow: hidden;
}

.faq-technical > summary {
  padding: 0.5rem 0.75rem;
  font-size: var(--font-size-base);
  font-weight: 600;
  cursor: pointer;
  color: var(--text-secondary, #64748b);
  list-style: none;
  letter-spacing: 0.01em;
}

.faq-technical > summary::-webkit-details-marker {
  display: none;
}

.faq-technical > summary::before {
  content: "▸ ";
  font-size: var(--font-size-sm);
}

.faq-technical[open] > summary::before {
  content: "▾ ";
}

.faq-technical > p {
  padding: 0 0.75rem 0.65rem 0.75rem;
  font-size: var(--font-size-base);
  font-family: var(--font-mono);
  line-height: 1.6;
  color: var(--text-secondary, #475569);
}

/* Honest Limitations section */
.faq-limitations-section {
  border-left: 3px solid var(--warning, #f59e0b);
  padding-left: 0.75rem;
}

.faq-limitations-title {
  color: var(--warning, #b45309) !important;
}

.faq-limitations-intro {
  font-style: italic;
  color: var(--text-secondary, #64748b);
  margin-bottom: 0.75rem;
  font-size: var(--font-size-lg);
}

/* Dark theme overrides — STRK-25: split for metallic dark vs preserved slate */
[data-theme="dark"] .faq-item {
  background: color-mix(in oklch, var(--bg-card), transparent 60%);
}
[data-theme="slate"] .faq-item {
  background: rgba(30, 41, 59, 0.4);
  border-color: rgba(255, 255, 255, 0.08);
}

:is([data-theme="dark"], [data-theme="slate"]) .faq-item[open] {
  border-color: var(--primary, #3b82f6);
}

[data-theme="dark"] .faq-technical {
  background: color-mix(in oklch, var(--bg-primary), transparent 50%);
}
[data-theme="slate"] .faq-technical {
  background: rgba(15, 23, 42, 0.5);
  border-color: rgba(255, 255, 255, 0.1);
}

/* Sepia theme overrides */
[data-theme="sepia"] .faq-item {
  background: rgba(120, 90, 40, 0.08);
  border-color: rgba(120, 90, 40, 0.15);
}

[data-theme="sepia"] .faq-technical {
  background: rgba(120, 90, 40, 0.05);
}

/* Mobile responsive */
@media (max-width: 768px) {
  .faq-question {
    padding: 0.7rem 0.85rem;
    font-size: var(--font-size-lg);
  }

  .faq-answer {
    padding: 0 0.85rem 0.85rem 0.85rem;
  }

  .faq-limitations-section {
    padding-left: 0.5rem;
  }
}

.details-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-xl);
  margin-bottom: var(--spacing-lg);
  flex: 0 0 auto;
  overflow: visible;
}

.details-panel {
  background: var(--bg-secondary);
  border-radius: var(--radius);
  padding: var(--spacing-lg);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
  overflow: visible;
}

.details-breakdown {
  flex: 0 0 auto;
  overflow: visible;
  padding-right: var(--spacing-sm);
}

.details-panel-title {
  font-size: var(--font-size-xl);
  font-weight: 600;
  color: var(--primary);
  margin: 0;
  text-align: center;
  border-bottom: 1px solid var(--border);
  padding-bottom: var(--spacing-sm);
}

.breakdown-item {
  padding: var(--spacing-sm) 0;
  border-bottom: 1px dashed var(--border);
}

.breakdown-item:last-child {
  border-bottom: none;
}

.breakdown-header {
  display: flex;
  align-items: center;
  margin-bottom: 0.25rem;
}

.breakdown-color-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 0.4rem;
  flex-shrink: 0;
}

.breakdown-label {
  font-weight: 600;
  color: var(--text-primary);
  font-size: var(--font-size-md);
  flex: 1;
}

.breakdown-meta {
  color: var(--text-muted);
  font-size: var(--font-size-sm);
  font-weight: 500;
}

/* 2x2 financial grid for breakdown rows */
.breakdown-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.125rem 0.75rem;
  font-size: var(--font-size-base);
}

.breakdown-cell {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0.1rem 0;
}

.breakdown-cell-label {
  color: var(--text-muted);
  font-weight: 400;
  font-size: var(--font-size-sm);
}

.breakdown-cell-value {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.breakdown-purchase .breakdown-cell-value {
  color: var(--text-primary);
}
.breakdown-melt .breakdown-cell-value {
  color: var(--primary);
}
.breakdown-retail .breakdown-cell-value {
  color: var(--text-secondary);
}
.breakdown-gain .breakdown-cell-value {
  color: var(--success);
}
.breakdown-loss .breakdown-cell-value {
  color: var(--danger);
}

.chart-canvas-container {
  position: relative;
  width: 100%;
  max-width: 300px;
  max-height: 300px;
  aspect-ratio: 1;
  margin: 0 auto;
  flex: 0 0 auto;
}

.chart-canvas {
  max-height: 300px !important;
}

/* Chart metric toggle — segmented button bar for details modal */
.chart-metric-toggle {
  display: flex;
  justify-content: center;
  gap: 0;
  margin: 0 auto 0.75rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  width: fit-content;
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--bg-primary);
  padding: 0.5rem 0;
}
.chart-metric-btn {
  padding: 0.5rem 1.25rem;
  font-size: var(--font-size-md);
  font-weight: 600;
  cursor: pointer;
  border: none;
  background: var(--bg-secondary);
  color: var(--text-primary);
  transition:
    background 0.15s,
    color 0.15s;
  white-space: nowrap;
  line-height: 1.4;
}
.chart-metric-btn:first-child {
  border-radius: var(--radius) 0 0 var(--radius);
}
.chart-metric-btn:last-child {
  border-radius: 0 var(--radius) var(--radius) 0;
}
.chart-metric-btn:not(:last-child) {
  border-right: 1px solid var(--border);
}
.chart-metric-btn:hover {
  background: var(--bg-hover);
}
.chart-metric-btn.active {
  background: var(--primary);
  color: var(--text-inverse);
}

/* =============================================================================
   NUMISTA MODAL - Removed (X-Frame-Options blocks iframes on hosted sites)
   Numista pages now open in popup windows via js/numista-modal.js
   ============================================================================= */

/* Pagination section removed — replaced by portal (scrollable table) view */

.change-log-label {
  font-weight: 700;
  color: var(--primary);
  cursor: pointer;
}

.btn.silver {
  background: var(--silver);
  color: var(--text-primary);
}

.btn.silver:hover {
  background: color-mix(in oklch, var(--silver), var(--hover-mix) 12%);
}

.table-disclaimer {
  font-size: var(--font-size-sm);
  color: var(--disclaimer-color);
  font-style: italic;
  text-align: center;
}

.table-subtitle {
  font-size: var(--font-size-md);
  font-weight: 500;
  text-align: center;
  margin-bottom: 0.25rem;
}

.backup-link {
  text-decoration: underline;
  cursor: pointer;
}

.beta-warning {
  margin-top: var(--spacing-xs);
  font-size: var(--font-size-sm);
  color: var(--warning-text, var(--warning));
  text-align: center;
}

/* =============================================================================
   SEARCH
   ============================================================================= */

.search-section {
  margin-bottom: var(--spacing);
}

.search-container {
  display: flex;
  gap: var(--spacing-sm);
  align-items: center;
}

#searchInput {
  flex: 1;
}

/* Save Filter button in filter-controls bar — matches chip-sort-btn style */
.save-filter-btn {
  padding: 0.2rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  font-size: var(--font-size-base);
  cursor: pointer;
  transition:
    background 0.15s,
    color 0.15s,
    border-color 0.15s;
}

.save-filter-btn:hover {
  background: var(--primary);
  color: var(--text-inverse);
  border-color: var(--primary);
}

.save-filter-btn:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.modern-icon-btn {
  width: 2.75rem;
  height: 2.75rem;
  padding: 0.5rem;
  min-width: 2.75rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  color: var(--text-primary);
  border-radius: var(--radius);
  transition: var(--transition);
  position: relative;
  overflow: hidden;
}

.modern-icon-btn:hover {
  background: var(--primary);
  color: var(--text-inverse);
  border-color: var(--primary);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.modern-icon-btn:active {
  transform: translateY(0);
}

.modern-icon-btn:focus {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.modern-icon-btn svg {
  width: 1.25rem;
  height: 1.25rem;
  transition: transform 0.2s ease;
}

.modern-icon-btn:hover svg {
  transform: scale(1.1);
}

/* Theme-specific adjustments */
:is([data-theme="dark"], [data-theme="slate"]) .modern-icon-btn {
  background: var(--bg-tertiary);
  border-color: var(--border);
}

:is([data-theme="dark"], [data-theme="slate"]) .modern-icon-btn:hover {
  background: var(--primary);
  box-shadow: 0 2px 12px color-mix(in srgb, var(--primary) 30%, transparent);
}

[data-theme="sepia"] .modern-icon-btn {
  background: var(--bg-tertiary);
  border-color: var(--border);
}

[data-theme="sepia"] .modern-icon-btn:hover {
  background: var(--primary);
  box-shadow: 0 2px 8px rgba(139, 69, 19, 0.2);
}

/* Enhanced search action buttons with text labels */
.search-action-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  height: 2.75rem;
  padding: 0.5rem 0.75rem;
  min-width: auto;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  color: var(--text-primary);
  border-radius: var(--radius);
  transition: var(--transition);
  position: relative;
  overflow: hidden;
  font-size: var(--font-size-md);
  font-weight: 500;
  white-space: nowrap;
}

.search-action-btn:hover {
  background: var(--primary);
  color: var(--text-inverse);
  border-color: var(--primary);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.search-action-btn:active {
  transform: translateY(0);
}

.search-action-btn:focus {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.search-action-btn svg {
  width: 1rem;
  height: 1rem;
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.search-action-btn:hover svg {
  transform: scale(1.1);
}

/* Specific button color variations */
.search-action-btn.add-btn:hover {
  background: var(--success);
  border-color: var(--success);
}

.search-action-btn.clear-btn:hover {
  background: var(--warning);
  border-color: var(--warning);
}

.search-action-btn.log-btn:hover {
  background: var(--info);
  border-color: var(--info);
}

/* Theme-specific adjustments for search action buttons */
:is([data-theme="dark"], [data-theme="slate"]) .search-action-btn {
  background: var(--bg-tertiary);
  border-color: var(--border);
}

:is([data-theme="dark"], [data-theme="slate"]) .search-action-btn.add-btn:hover {
  background: var(--success);
  box-shadow: 0 2px 12px rgba(34, 197, 94, 0.3);
}

:is([data-theme="dark"], [data-theme="slate"]) .search-action-btn.clear-btn:hover {
  background: var(--warning);
  box-shadow: 0 2px 12px rgba(245, 158, 11, 0.3);
}

:is([data-theme="dark"], [data-theme="slate"]) .search-action-btn.log-btn:hover {
  background: var(--info);
  box-shadow: 0 2px 12px color-mix(in srgb, var(--info) 30%, transparent);
}

[data-theme="sepia"] .search-action-btn {
  background: var(--bg-tertiary);
  border-color: var(--border);
}

[data-theme="sepia"] .search-action-btn.add-btn:hover {
  background: var(--success);
  box-shadow: 0 2px 8px rgba(34, 197, 94, 0.2);
}

[data-theme="sepia"] .search-action-btn.clear-btn:hover {
  background: var(--warning);
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.2);
}

[data-theme="sepia"] .search-action-btn.log-btn:hover {
  background: var(--info);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--info) 20%, transparent);
}

.autocomplete-dropdown {
  position: fixed;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  z-index: 10100;
  max-height: 12rem;
  overflow-y: auto;
}

.autocomplete-item {
  padding: var(--spacing-sm) var(--spacing);
  cursor: pointer;
}

.autocomplete-item.active,
.autocomplete-item:hover {
  background: var(--bg-secondary);
}

.autocomplete-item mark {
  background: transparent;
  color: var(--info);
  font-weight: 600;
}

.fuzzy-indicator {
  font-size: var(--font-size-base);
  color: var(--text-muted);
  padding: var(--spacing-xs) 0;
  font-style: italic;
}

.filter-select {
  width: 8rem;
  height: 1.375rem;
}

.icon-btn {
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  min-width: 2.75rem;
}

/* =============================================================================
   SEARCH FILTERS (INTEGRATED)
   ============================================================================= */

.search-filters {
  margin-top: var(--spacing-sm);
  padding-top: var(--spacing-sm);
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.filter-row {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-sm);
}

.filter-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--spacing);
}

.control-group {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.control-label {
  font-size: var(--font-size-md);
  font-weight: 500;
  color: var(--text-muted);
  white-space: nowrap;
}

.control-select {
  appearance: none;
  padding: 0.25rem 1.5rem 0.25rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-tertiary);
  color: var(--text-primary);
  font-size: var(--font-size-md);
  width: 4rem;
  min-width: 0;
  text-align: center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' fill='none' stroke='currentColor' stroke-width='1.5'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.35rem center;
  background-size: 0.65rem;
  cursor: pointer;
  transition: var(--transition);
}

.control-select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--primary-alpha);
}

.control-select:hover {
  border-color: var(--border-hover);
}

/* =============================================================================
  ORIGINAL FILTER STYLES
  ============================================================================= */

.active-filters {
  display: flex;
  flex: 1 1 100%; /* allow the filters area to take full row so chips can center */
  flex-wrap: wrap;
  gap: var(--spacing-xs);
  justify-content: center; /* center chips within available width */
  padding: 0 var(--spacing-sm);
  order: 1;
}

.control-settings {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--spacing);
  margin-top: var(--spacing-sm);
  padding-top: var(--spacing-sm);
  border-top: 1px solid var(--border);
}

.chip-min-label {
  font-size: var(--font-size-base);
  font-weight: 500;
  color: var(--text-secondary);
  margin: 0;
}

.chip-min-select {
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: var(--font-size-base);
  min-width: 60px;
}

.active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
  justify-content: center;
  padding: 0 var(--spacing-sm);
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
  color: var(--chip-text);
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius);
  font-size: var(--font-size-sm);
  font-family: var(--font-body);
  font-weight: 500;
  height: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: var(--transition);
  box-shadow: var(--shadow-sm);
  text-align: center;
  white-space: nowrap;
  user-select: none;
  margin: 0.05rem;
  max-width: fit-content;
  box-sizing: border-box;
}

.filter-chip-excluded {
  outline: 1px dashed rgba(0, 0, 0, 0.35);
  outline-offset: 1px;
  opacity: 0.86;
}

.filter-chip:hover {
  opacity: 0.9;
  transform: translateY(-1px);
  box-shadow: var(--shadow);
}

.chip-close {
  margin-left: 0.35rem;
  font-weight: 700;
  opacity: 0.95;
  cursor: pointer;
}

/* Hide × on idle chips; only show on active-filter or search chips */
.filter-chip:not(.filter-chip-active):not(.filter-chip-search) .chip-close {
  display: none;
}

/* Active filter chip — themed border ring signals selection */
.filter-chip-active {
  outline: 2px solid var(--chip-active-outline);
  outline-offset: 1px;
}

/* Search chip — themed green outline */
.filter-chip-search {
  outline: 2px solid var(--chip-search-outline);
  outline-offset: 1px;
}

.filter-chip:active {
  transform: translateY(0);
}

/* Chip sort toggle — segmented A-Z / Qty control */
.chip-sort-toggle {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.chip-sort-btn {
  padding: 0.2rem 0.6rem;
  border: none;
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  font-size: var(--font-size-base);
  cursor: pointer;
  transition:
    background 0.15s,
    color 0.15s;
}

.chip-sort-btn:not(:last-child) {
  border-right: 1px solid var(--border);
}

.chip-sort-btn:hover {
  background: var(--bg-secondary);
}

.chip-sort-btn.active {
  background: var(--primary);
  color: var(--text-inverse);
}

/* STRK-4: Purchase Price label row — label on the left, compact Lot/Each
   toggle on the right. Sized so the toggle aligns with the small uppercase
   label and the right column matches the left (Purchase Date) column height,
   keeping inputs vertically aligned across the .grid.grid-2 row. */
.label-with-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
  margin-bottom: 0.2rem;
}
.label-with-toggle > label,
#inventoryForm .label-with-toggle > label {
  margin-bottom: 0;
}

#purchasePriceModeToggle .chip-sort-btn {
  padding: 0.1rem 0.45rem;
  font-size: var(--font-size-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1;
}

/* STRK-53: dispose-modal quantity selector — AAA touch targets + wrap on narrow viewports */
.chip-sort-toggle--quantity {
  flex-wrap: wrap;
  gap: 8px;
  overflow: visible;
  border: none;
}
.chip-sort-toggle--quantity .chip-sort-btn {
  min-width: 44px;
  min-height: 44px;
  padding: 0.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.chip-sort-toggle--quantity.is-disabled .chip-sort-btn {
  opacity: 0.55;
  cursor: default;
}
.qty-max-suffix {
  color: var(--text-secondary);
  font-weight: 400;
  font-size: var(--font-size-sm);
  margin-left: 0.4rem;
}
#removeItemQtySelect {
  min-height: 44px;
}

#purchasePriceModeToggle.is-hidden {
  display: none;
}

#removeItemAmountModeToggle.is-hidden {
  display: none;
}

/* Chip context menu (right-click on name/dynamic chips) */
.chip-context-menu {
  position: fixed;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg, 0 4px 12px rgba(0, 0, 0, 0.15));
  z-index: 10000;
  min-width: 160px;
  padding: 0.25rem 0;
}

.chip-context-menu-item {
  padding: 0.5rem 1rem;
  font-size: var(--font-size-base);
  color: var(--text-primary);
  cursor: pointer;
  transition: background 0.1s;
}

.chip-context-menu-item:hover {
  background: var(--bg-hover, var(--border));
}

.chip-confirm-message {
  padding: 0.5rem 0.75rem 0.25rem;
  font-size: var(--font-size-base);
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
}

.chip-confirm-buttons {
  display: flex;
  gap: 0.35rem;
  padding: 0.25rem 0.75rem 0.5rem;
}

.chip-confirm-yes,
.chip-confirm-no {
  flex: 1;
  padding: 0.3rem 0.5rem;
  font-size: var(--font-size-sm);
  font-weight: 500;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background 0.1s;
}

.chip-confirm-yes {
  background: var(--danger);
  color: var(--text-inverse);
  border-color: var(--danger);
}

.chip-confirm-yes:hover {
  opacity: 0.85;
}

.chip-confirm-no {
  background: var(--bg-card);
  color: var(--text-primary);
}

.chip-confirm-no:hover {
  background: var(--bg-hover, var(--border));
}

.search-results-info {
  font-size: var(--font-size-md);
  color: var(--text-muted);
  text-align: right;
  margin-left: 0; /* remove auto margin which can push chips out of center */
}

.search-results-info:not(:empty) {
  margin-top: 0;
}

/* Clear all filters button */
.filter-clear-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
  background: var(--danger);
  color: var(--text-inverse);
  padding: 0.25rem 0.75rem;
  border: none;
  border-radius: var(--radius);
  font-size: var(--font-size-sm);
  font-family: var(--font-body);
  font-weight: 600;
  height: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: var(--transition);
  box-shadow: var(--shadow-sm);
  text-align: center;
  white-space: nowrap;
  user-select: none;
  margin: 0.05rem 0 0.05rem 0.5rem;
  max-width: fit-content;
  box-sizing: border-box;
}

.filter-clear-btn:hover {
  background: var(--error-dark);
  transform: translateY(-1px);
  box-shadow: var(--shadow);
}

.filter-clear-btn:active {
  transform: translateY(0);
}

/* =============================================================================
   IMPORT/EXPORT SECTION
   ============================================================================= */

.import-export-section h2 {
  text-align: center;
  font-weight: 600;
  margin-bottom: var(--spacing);
  color: var(--primary);
  font-size: var(--font-size-xl);
}

.file-blocks {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing);
}

.import-block,
.export-block {
  flex: 1;
}

/* .format-desc removed — descriptions moved to button title attributes */

.import-export-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-sm);
}

.import-export-grid .btn,
.import-export-grid label.btn {
  height: 2.75rem;
  padding: var(--spacing-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin: 0;
  line-height: 1;
  width: 100%;
}

.import-export-grid label.btn {
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.import-export-grid label.btn input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.import-csv-grid,
.import-json-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-sm);
}

.import-progress {
  width: 100%;
  margin-top: var(--spacing-sm);
  display: none;
}

.import-progress-text {
  text-align: center;
  font-size: var(--font-size-md);
  color: var(--text-muted);
  margin-top: var(--spacing-sm);
  display: none;
}

/* =============================================================================
   TOGGLE SWITCHES
   ============================================================================= */

.switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--border);
  transition: var(--transition);
  border-radius: var(--radius-pill);
}

.slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: var(--text-inverse);
  transition: var(--transition);
  border-radius: 50%;
  box-shadow: var(--shadow-sm);
}

input:checked + .slider {
  background-color: var(--primary);
}

input:checked + .slider:before {
  transform: translateX(20px);
}

input:disabled + .slider {
  background-color: var(--text-muted);
  opacity: 0.6;
}

/* =============================================================================
   BOATING ACCIDENT SECTION
   ============================================================================= */

.boating-accident-section {
  text-align: center;
}

.backup-buttons {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing);
  margin-top: var(--spacing);
}

.backup-buttons .btn {
  width: 100%;
  min-height: 2.75rem;
  font-size: var(--font-size-lg);
  padding: var(--spacing) var(--spacing-lg);
}

/* =============================================================================
   FILTERS MODAL
   ============================================================================= */

#filtersModal .modal-content {
  max-width: 600px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}

#filtersModal .modal-header {
  background: linear-gradient(135deg, var(--warning), var(--warning-hover));
  color: var(--text-primary);
  padding: var(--spacing-xl);
  position: relative;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow: var(--shadow);
}

#filtersModal .modal-body {
  padding: var(--spacing-xl);
  overflow-y: auto;
  flex: 1;
}

.filters-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-xl);
}

.filter-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.filter-group label {
  font-weight: 600;
  color: var(--text-primary);
  font-size: var(--font-size-lg);
}

.filter-select {
  width: 100%;
  padding: var(--spacing-sm) var(--spacing);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: var(--font-size-lg);
  transition: var(--transition);
}

.filter-select:focus {
  outline: none;
  border-color: var(--warning);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--warning), transparent 90%);
}

.exclude-toggle {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 0.25rem;
  font-size: var(--font-size-base);
}

.date-range-inputs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-sm);
}

.date-range-inputs input {
  padding: var(--spacing-sm) var(--spacing);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: var(--font-size-lg);
  transition: var(--transition);
}

.date-range-inputs input:focus {
  outline: none;
  border-color: var(--warning);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--warning), transparent 90%);
}

.filter-actions {
  display: flex;
  gap: var(--spacing);
  justify-content: flex-end;
  padding-top: var(--spacing);
  border-top: 1px solid var(--border);
}

.filter-actions .btn {
  min-width: 120px;
}

/* =============================================================================
   ACTION BUTTON GRIDS
   ============================================================================= */

.action-buttons {
  display: grid;
  gap: var(--spacing-sm);
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

/* =============================================================================
   RESPONSIVE DESIGN - Consolidated Media Queries
   
   Breakpoint strategy:
   - 1200px: Large desktop - reduce chart complexity, stack some elements
   - 992px: Desktop - simplify totals grid, reduce modal sizes
   - 768px: Tablet - stack most elements, smaller fonts, compact controls
   - 480px: Mobile - single column layout, minimal spacing, touch-friendly
   
   Key responsive features:
   - Flexible grid layouts that adapt to screen size
   - Progressive enhancement from mobile-first approach
   - Touch-friendly button and input sizing
   - Readable font sizes across all devices
   - Optimized table display with column adjustments
   ============================================================================= */

/* STACK-71: Single-column details at tablet widths, aligned with card-view breakpoint */
@media (max-width: 1350px) {
  .details-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1200px) {
  #detailsModal .modal-content {
    max-width: 900px;
  }
}

@media (max-width: 992px) {
  #detailsModal .modal-content {
    max-width: 900px;
  }
}

@media (max-width: 768px) {
  body {
    max-width: 100%;
    margin: var(--spacing) auto;
    padding: var(--spacing-sm);
  }

  /* Compact header: logo left, 2×2 buttons right (STAK-126) */
  .app-header {
    flex-direction: row;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing);
    padding: var(--spacing-sm);
  }

  .app-logo {
    margin: 0;
    flex: 1;
    min-width: 0;
  }

  .app-logo .stackr-logo {
    max-width: 100%;
    height: auto;
  }

  section {
    padding: var(--spacing);
  }

  .table-controls {
    flex-direction: column;
    align-items: stretch;
    gap: var(--spacing-sm);
  }

  /* Search toolbar: single row with icon-only buttons (STAK-126) */
  .search-container {
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    gap: var(--spacing-xs);
  }

  .search-container #searchInput {
    flex: 1;
    min-width: 0;
  }

  .search-action-btn span {
    display: none;
  }

  .search-action-btn {
    padding: 0.5rem;
    width: 2.75rem;
    min-width: 2.75rem;
    height: 2.75rem;
    justify-content: center;
  }

  .totals {
    gap: var(--spacing-sm);
  }

  .total-card {
    padding: var(--spacing-sm);
  }

  .total-group {
    padding: var(--spacing-xs);
    margin: var(--spacing-xs) 0;
  }

  .total-item {
    padding: 0.2rem 0;
  }

  .total-label {
    font-size: var(--font-size-xs);
  }

  .total-value {
    font-size: var(--font-size-base);
  }

  .total-title {
    font-size: var(--font-size-md);
    margin-bottom: var(--spacing-xs);
    padding-bottom: var(--spacing-xs);
    border-bottom-width: 3px;
  }

  .total-item-bottom-line .total-label {
    font-size: var(--font-size-sm);
  }

  .total-item-bottom-line .total-value {
    font-size: var(--font-size-md);
  }

  .import-export-grid {
    grid-template-columns: 1fr;
  }

  .details-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing);
  }

  #detailsModal .modal-content {
    max-width: 95%;
    padding: var(--spacing);
  }

  .grid-2,
  .grid-3,
  .grid-name-year,
  .grid-grade {
    grid-template-columns: 1fr;
  }

  .grid-purity-row {
    grid-template-columns: 1fr 1fr;
  }

  .action-buttons {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  h1 {
    font-size: var(--font-size-2xl);
  }

  .modal-content {
    margin: 0.25rem;
    padding: 0.6rem;
  }

  .total-card {
    padding: var(--spacing-xs);
  }

  .total-label {
    font-size: var(--font-size-xs);
  }

  .total-value {
    font-size: var(--font-size-sm);
  }

  .total-title {
    font-size: var(--font-size-base);
  }

  .total-item-bottom-line .total-value {
    font-size: var(--font-size-base);
  }

  .spot-input {
    padding: var(--spacing);
  }

  /* Min-width reductions for 360px viewports (STAK-124) */
  .header-currency-menu {
    min-width: 180px;
  }

  .search-container #searchInput {
    min-width: 160px;
  }
}

/* Additional mobile table adjustments — removed ≤768px rules (card view handles them) */

@media (min-width: 600px) {
  .grid-2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .action-buttons {
    grid-template-columns: repeat(2, 1fr);
  }
}
#inventoryTable td.icon-col {
  width: 3.5rem;
  padding: 0.25rem;
  text-align: center;
  vertical-align: middle;
  position: relative;
}

#inventoryTable th.icon-col {
  width: 3.5rem;
  padding: 0.25rem;
  text-align: center;
  vertical-align: middle;
  /* position: sticky inherited from #inventoryTable thead th —
     sticky acts as relative for child/pseudo positioning */
}

/* Enhanced action icons without hover animations */
#inventoryTable td.icon-col .action-icon {
  /* Removed transition animation */
  border-radius: var(--radius);
  padding: 0.2rem;
  cursor: pointer;
}

/* Enhanced styling for edit icons - no hover effects for clean interface */
#inventoryTable td.icon-col .action-icon.edit-icon {
  color: var(--primary);
  font-weight: bold;
}

#inventoryTable td.icon-col .action-icon.view-icon {
  color: var(--text-secondary);
}

#inventoryTable td.icon-col .action-icon.view-icon:hover {
  color: var(--primary);
}

/* Actions column styling */
#inventoryTable td[data-column="actions"] {
  text-align: center;
  padding: 0.2rem;
}

#inventoryTable td[data-column="actions"] .icon-btn {
  margin: 0;
}

/* Style the edit toggle button based on mode */
#inventoryTable td[data-column="actions"] .edit-toggle {
  color: var(--primary);
}

#inventoryTable td[data-column="actions"] .edit-toggle:hover {
  color: var(--primary-dark);
}

/* Actions header styling */
/* Row editing styles */
#inventoryTable tbody tr.editing-row {
  background: var(--bg-secondary) !important;
  border: 2px solid var(--primary);
  outline: none;
}

#inventoryTable tbody tr.editing-row .inline-edit-input {
  background: var(--bg-primary);
  border: 1px solid var(--border);
  color: var(--text-primary);
  padding: 0.15rem; /* Reduced padding for better fit */
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs); /* Smaller font for better fit */
  width: 100%;
  box-sizing: border-box;
  min-width: 60px; /* Ensure minimum usable width */
}

#inventoryTable tbody tr.editing-row .inline-edit-input:focus {
  outline: 2px solid var(--primary);
  outline-offset: -1px;
}

#inventoryTable tbody tr.editing-row .save-row {
  color: var(--success);
}

#inventoryTable tbody tr.editing-row .cancel-row {
  color: var(--danger);
}

#inventoryTable th.icon-col {
  font-size: var(--font-size-xs);
  line-height: 1.1;
}

#inventoryTable td.icon-col {
  font-size: var(--font-size-sm);
}

/* Icon sizing in action cells */
#inventoryTable th.icon-col svg,
#inventoryTable td.icon-col .action-icon {
  width: 1rem;
  height: 1rem;
}

#inventoryTable td[data-column="purchaseLocation"],
#inventoryTable td[data-column="storageLocation"] {
  max-width: 20ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#inventoryTable th,
#inventoryTable td {
  text-align: center;
}

#inventoryTable th[data-column="name"],
#inventoryTable td[data-column="name"] {
  text-align: left;
}

.info-link {
  margin-left: 0.25rem;
  font-size: var(--font-size-sm);
}

#typeSummary {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
  justify-content: center;
  align-items: center;
  margin-top: var(--spacing-sm);
  padding: var(--spacing-sm);
  min-height: 2rem;
  max-height: 8rem;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--primary) var(--bg-secondary);
}

#typeSummary::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

#typeSummary::-webkit-scrollbar-track {
  background: var(--bg-secondary);
  border-radius: var(--radius);
}

#typeSummary::-webkit-scrollbar-thumb {
  background-color: var(--primary);
  border-radius: var(--radius);
}

#typeSummary::-webkit-scrollbar-thumb:hover {
  background-color: var(--primary-hover);
}

/* Header Icons */
.header-icon {
  width: 1rem;
  height: 1rem;
  margin: 0 auto 0.25rem;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.header-icon.vault-icon {
  fill: currentColor;
  stroke: none;
}

/* Header Text Styling */
.header-text {
  display: block;
  font-size: var(--font-size-xs);
  font-weight: 500;
  color: var(--text-primary);
  text-align: center;
  margin-top: 0.15rem;
  line-height: 1;
}

/* Actions column — merged edit/copy/delete */
#inventoryTable th.actions-col,
#inventoryTable td.actions-cell {
  width: 5rem;
  min-width: 4.5rem;
}

.actions-row {
  display: flex;
  gap: 0.1rem;
  justify-content: center;
  align-items: center;
}

/* Icon column styling */
.icon-col {
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
  min-width: 3.5rem;
}

.icon-col .header-icon {
  margin: 0 auto 0.25rem;
}

/* Action column styling — no sticky positioning needed (table fits viewport) */
#inventoryTable th.icon-col {
  background: var(--bg-secondary);
  color: var(--text-primary);
}

#inventoryTable td.icon-col {
  background: inherit;
  color: inherit;
}

/* Icon button base for action cells */
#inventoryTable .icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  padding: 0.15rem;
  background: transparent;
  border: 0;
  border-radius: var(--radius);
  cursor: pointer;
  /* No transition — hover effects disabled to prevent repaint at sticky header boundary */
}

#inventoryTable .icon-btn:focus {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* Removed hover effect to prevent cell flooding */

#inventoryTable .icon-svg {
  width: 1.05rem;
  height: 1.05rem;
  display: block;
  fill: currentColor;
  color: inherit;
}
.edit-svg {
  color: inherit;
}
.delete-svg {
  color: inherit;
}

/* CANONICAL RESPONSIVE TABLE RULES — Progressive disclosure + portfolio layout
   Single source of truth for all inventory table responsive behavior.
   Card view (≤768px) lives at end of file.  See STACK-38 / STACK-31.
   Column hides removed — .portal-scroll handles horizontal overflow so users
   can scroll to gain/loss and source columns on narrow viewports. */

/* Dense baseline: slightly smaller font for compact inventory view (>1024px) */
#inventoryTable {
  font-size: var(--font-size-md);
}

@media (max-width: 1024px) {
  #inventoryTable {
    font-size: var(--font-size-base);
  }
  #inventoryTable th,
  #inventoryTable td {
    padding: 0.3rem 0.2rem;
  }
}

/* Sticky icon columns: remove left border so they blend with adjacent cells */
#inventoryTable th.icon-col,
#inventoryTable td.icon-col {
  border-left: none;
}

th {
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
}

/* Make header icons/text use muted header color so they don't pop */
#inventoryTable thead th {
  color: var(--text-secondary);
  background: var(--bg-secondary);
  font-family: var(--font-body);
  position: sticky;
  top: 0;
  z-index: 2;
  /* Override generic th { transition: var(--transition) } — transition:all on
     sticky elements creates temporary compositor layers during scroll that can
     break stacking order, causing data rows to paint above the header */
  transition: none;
}

/* Ensure uniform font family for entire table */
#inventoryTable {
  font-family: var(--font-body);
}

#inventoryTable thead th .header-icon,
#inventoryTable thead th .header-text {
  color: var(--text-secondary);
}

/* Icon column header should visually match other headers */
#inventoryTable thead th.icon-col {
  background: var(--bg-secondary);
  color: var(--text-primary);
  padding: 0.35rem 0.4rem;
}

/* Icon cells in the body: inherit color so they match the row's text color and striping */
#inventoryTable tbody td.icon-col {
  color: inherit;
  padding: 0.25rem 0.35rem;
}

/* Icon button visual blending */
#inventoryTable .icon-btn {
  background: transparent; /* keep inline with row */
  color: var(--text-secondary);
  box-shadow: none;
}

/* Removed hover effect to prevent cell flooding */

#inventoryTable .icon-btn:active {
  transform: translateY(0);
}

/* Slightly smaller icon size in cells to reduce visual weight */
#inventoryTable .icon-svg {
  width: 0.95rem;
  height: 0.95rem;
}

/* Dense table mode: reduce paddings and icon sizes for a compact view */
#inventoryTable th,
#inventoryTable td {
  padding: 0.18rem 0.28rem; /* tighter padding */
}

/* Increase header height to accommodate sort arrows */
#inventoryTable thead th {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

#inventoryTable .icon-btn {
  width: 2rem;
  height: 2rem;
}
#inventoryTable .icon-svg {
  width: 0.9rem;
  height: 0.9rem;
}

/* Force tbody into a lower stacking context so positioned td cells
   (metal, actions) never paint above the sticky thead (z-index: 2) */
#inventoryTable tbody {
  position: relative;
  z-index: 1;
}

/* Tighter row height with improved visual separation */
#inventoryTable tbody tr {
  min-height: 2rem;
  background: var(--bg-primary);
  border-bottom: 2px solid var(--bg-secondary);
}

/* Alternating row background using theme tokens */
#inventoryTable tbody tr:nth-child(even) {
  background: var(--bg-secondary);
}

/* Neutralise generic tr:hover on header row — filter/position on a tr ancestor
   breaks position:sticky on child th elements */
#inventoryTable thead tr:hover {
  filter: none;
  box-shadow: none;
  position: static;
  z-index: auto;
}

/* Hover state for data rows — override generic tr:hover which sets
   position:relative + z-index:1, causing rows to paint above the sticky thead */
#inventoryTable tbody tr:hover {
  background: var(--bg-tertiary);
  filter: none;
  box-shadow: none;
  position: static;
  z-index: auto;
}

/* Prevent any data cell from elevating above the sticky header (z-index:2) */
#inventoryTable tbody td {
  z-index: auto;
}

/* Keep visual clarity on very small screens */
@media (max-width: 480px) {
  #inventoryTable {
    font-size: var(--font-size-sm);
  }
  #inventoryTable th,
  #inventoryTable td {
    padding: 0.14rem 0.12rem;
  }
  #inventoryTable .icon-btn {
    width: 1.8rem;
    height: 1.8rem;
  }
  #inventoryTable .icon-svg {
    width: 0.8rem;
    height: 0.8rem;
  }
}

.center-align {
  text-align: center !important;
}

.center-align td {
  text-align: center !important;
}

/* Type-specific color helpers */
.type-coin {
  color: var(--type-coin-bg);
}
.type-round {
  color: var(--type-round-bg);
}
.type-bar {
  color: var(--type-bar-bg);
}
.type-note {
  color: var(--type-note-bg);
}
.type-set {
  color: var(--type-set-bg);
}
.type-other {
  color: var(--type-other-bg);
}

/* =============================================================================
   CATALOG LINK STYLING
   Enhanced N# column with database/catalog icons representing external database
   ============================================================================= */

.catalog-link {
  display: inline;
  text-decoration: none;
  font-size: var(--font-size-base);
  font-weight: 700;
  transition: opacity 0.2s ease;
}

/* Light mode - bold blue */
:root .catalog-link {
  color: #1d4ed8;
}

.catalog-link:hover {
  text-decoration: underline;
  opacity: 0.8;
}

/* Dark mode - light blue */
:is([data-theme="dark"], [data-theme="slate"]) .catalog-link {
  color: #60a5fa;
}

/* Sepia mode - bold blue */
[data-theme="sepia"] .catalog-link {
  color: #1d4ed8;
}

/* eBay price link styling */
.ebay-price-link {
  text-decoration: none;
  color: inherit;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  transition: var(--transition);
}

.ebay-price-link:hover {
  opacity: 0.8;
}

.ebay-search-svg {
  width: 12px;
  height: 12px;
  color: var(--text-muted);
  flex-shrink: 0;
}

.ebay-price-link:hover .ebay-search-svg {
  color: var(--text-primary);
}

/* Retail/Gain-Loss confidence styling — estimated (melt fallback) vs confirmed (manual) */
.retail-estimated {
  font-style: italic;
  color: var(--text-muted);
}
.retail-confirmed {
  font-weight: 600;
}
.gainloss-estimated {
  font-style: italic;
  color: var(--text-muted);
}

/* Responsive catalog link with improved mobile experience */
@media (max-width: 768px) {
  .catalog-link {
    font-size: var(--font-size-xs);
  }
}

@media (max-width: 600px) {
  .catalog-link {
    font-size: var(--font-size-xs);
  }
}

@media (max-width: 480px) {
  .catalog-link {
    font-size: var(--font-size-xs);
  }
}

/* =============================================================================
   NUMISTA TAG — Inline N# badge on inventory table Name cell
   ============================================================================= */
.numista-tag {
  display: inline-flex;
  align-items: center;
  font-size: var(--font-size-xs);
  font-weight: 600;
  padding: 0.1rem 0.3rem;
  margin-left: 0.25rem;
  border-radius: var(--radius);
  background: var(--bg-tertiary);
  color: var(--primary);
  cursor: pointer;
  text-decoration: none;
  transition: var(--transition);
  vertical-align: middle;
  line-height: 1.2;
  white-space: nowrap;
}

.numista-tag:hover,
.numista-tag:focus-visible {
  background: var(--primary);
  color: var(--text-inverse);
  outline: none;
}

/* Dark theme overrides — Numista brand blue */
:is([data-theme="dark"], [data-theme="slate"]) .numista-tag {
  background: color-mix(in oklch, var(--text-inverse), transparent 90%);
  color: #60a5fa;
}
:is([data-theme="dark"], [data-theme="slate"]) .numista-tag:hover,
:is([data-theme="dark"], [data-theme="slate"]) .numista-tag:focus-visible {
  background: #60a5fa;
  color: var(--bg-primary);
}

/* Sepia theme overrides — Numista brand blue (deferred: needs --authority-numista token) */
[data-theme="sepia"] .numista-tag {
  background: color-mix(in oklch, var(--text-primary), transparent 92%);
  color: #1d4ed8;
}
[data-theme="sepia"] .numista-tag:hover,
[data-theme="sepia"] .numista-tag:focus-visible {
  background: #1d4ed8;
  color: var(--text-inverse);
}

/* =============================================================================
   PCGS TAG — Inline PCGS# badge on inventory table Name cell
   ============================================================================= */
.pcgs-tag {
  display: inline-flex;
  align-items: center;
  font-size: var(--font-size-xs);
  font-weight: 600;
  padding: 0.1rem 0.3rem;
  margin-left: 0.25rem;
  border-radius: var(--radius);
  background: rgba(37, 99, 235, 0.1);
  color: var(--authority-pcgs);
  cursor: pointer;
  text-decoration: none;
  transition: var(--transition);
  vertical-align: middle;
  line-height: 1.2;
  white-space: nowrap;
}

.pcgs-tag:hover,
.pcgs-tag:focus-visible {
  background: var(--authority-pcgs);
  color: var(--text-inverse);
  outline: none;
}

/* Dark theme overrides */
:is([data-theme="dark"], [data-theme="slate"]) .pcgs-tag {
  background: color-mix(in oklch, var(--authority-pcgs), transparent 80%);
  color: var(--authority-pcgs);
}
:is([data-theme="dark"], [data-theme="slate"]) .pcgs-tag:hover,
:is([data-theme="dark"], [data-theme="slate"]) .pcgs-tag:focus-visible {
  background: var(--authority-pcgs);
  color: var(--text-inverse);
}

/* Sepia theme overrides */
[data-theme="sepia"] .pcgs-tag {
  background: color-mix(in oklch, var(--authority-pcgs), transparent 92%);
  color: var(--authority-pcgs);
}
[data-theme="sepia"] .pcgs-tag:hover,
[data-theme="sepia"] .pcgs-tag:focus-visible {
  background: var(--authority-pcgs);
  color: var(--text-inverse);
}

/* =============================================================================
   YEAR TAG — Inline year badge on inventory table Name cell
   ============================================================================= */
.year-tag {
  display: inline-flex;
  align-items: center;
  font-size: var(--font-size-xs);
  font-weight: 600;
  padding: 0.1rem 0.35rem;
  margin-left: 0.35rem;
  border-radius: var(--radius);
  background: var(--bg-tertiary);
  color: var(--text-secondary, #666);
  vertical-align: middle;
  line-height: 1.2;
  white-space: nowrap;
}

/* Dark theme overrides */
:is([data-theme="dark"], [data-theme="slate"]) .year-tag {
  background: color-mix(in oklch, var(--text-inverse), transparent 92%);
  color: var(--text-muted);
}

/* Sepia theme overrides */
[data-theme="sepia"] .year-tag {
  background: color-mix(in oklch, var(--text-primary), transparent 94%);
  color: var(--text-muted);
}

/* =============================================================================
   PURITY TAG — Inline purity badge on inventory table Name cell
   ============================================================================= */

.purity-tag {
  display: inline-flex;
  align-items: center;
  font-size: var(--font-size-xs);
  font-weight: 600;
  padding: 0.1rem 0.35rem;
  margin-left: 0.35rem;
  border-radius: var(--radius);
  background: var(--bg-tertiary);
  color: var(--text-secondary, #666);
  vertical-align: middle;
  line-height: 1.2;
  white-space: nowrap;
}

:is([data-theme="dark"], [data-theme="slate"]) .purity-tag {
  background: color-mix(in oklch, var(--text-inverse), transparent 92%);
  color: var(--text-muted);
}

[data-theme="sepia"] .purity-tag {
  background: color-mix(in oklch, var(--text-primary), transparent 94%);
  color: var(--text-muted);
}

/* =============================================================================
   GRADE TAG — Inline grade badge on inventory table Name cell
   Color-coded by grading authority: PCGS=blue, NGC=gold, ANACS=green, ICG=purple
   ============================================================================= */
.grade-tag {
  display: inline-flex;
  align-items: center;
  font-size: var(--font-size-xs);
  font-weight: 600;
  padding: 0.1rem 0.35rem;
  margin-left: 0.35rem;
  border-radius: var(--radius);
  background: var(--bg-tertiary);
  color: var(--text-secondary, #666);
  text-decoration: none;
  vertical-align: middle;
  line-height: 1.2;
  white-space: nowrap;
}

/* Clickable grade tags (have cert number) */
.grade-tag[data-clickable="true"] {
  cursor: pointer;
  transition: var(--transition);
}
.grade-tag[data-clickable="true"]:hover,
.grade-tag[data-clickable="true"]:focus-visible {
  filter: brightness(0.85);
  outline: none;
}

/* Authority color coding — Light theme */
.grade-tag[data-authority="PCGS"] {
  background: rgba(37, 99, 235, 0.12);
  color: var(--authority-pcgs);
}
.grade-tag[data-authority="NGC"] {
  background: rgba(217, 119, 6, 0.12);
  color: var(--authority-ngc);
}
.grade-tag[data-authority="ANACS"] {
  background: rgba(5, 150, 105, 0.12);
  color: var(--authority-anacs);
}
.grade-tag[data-authority="ICG"] {
  background: rgba(124, 58, 237, 0.12);
  color: var(--authority-icg);
}

/* Clickable hover overrides — Light theme */
.grade-tag[data-clickable="true"][data-authority="PCGS"]:hover,
.grade-tag[data-clickable="true"][data-authority="PCGS"]:focus-visible {
  background: var(--authority-pcgs);
  color: var(--text-inverse);
}
.grade-tag[data-clickable="true"][data-authority="NGC"]:hover,
.grade-tag[data-clickable="true"][data-authority="NGC"]:focus-visible {
  background: var(--authority-ngc);
  color: var(--text-inverse);
}
.grade-tag[data-clickable="true"][data-authority="ANACS"]:hover,
.grade-tag[data-clickable="true"][data-authority="ANACS"]:focus-visible {
  background: var(--authority-anacs);
  color: var(--text-inverse);
}
.grade-tag[data-clickable="true"][data-authority="ICG"]:hover,
.grade-tag[data-clickable="true"][data-authority="ICG"]:focus-visible {
  background: var(--authority-icg);
  color: var(--text-inverse);
}

/* Dark theme overrides */
:is([data-theme="dark"], [data-theme="slate"]) .grade-tag {
  background: color-mix(in oklch, var(--text-inverse), transparent 92%);
  color: var(--text-muted);
}
:is([data-theme="dark"], [data-theme="slate"]) .grade-tag[data-authority="PCGS"] {
  background: color-mix(in oklch, var(--authority-pcgs), transparent 85%);
  color: var(--authority-pcgs);
}
:is([data-theme="dark"], [data-theme="slate"]) .grade-tag[data-authority="NGC"] {
  background: color-mix(in oklch, var(--authority-ngc), transparent 85%);
  color: var(--authority-ngc);
}
:is([data-theme="dark"], [data-theme="slate"]) .grade-tag[data-authority="ANACS"] {
  background: color-mix(in oklch, var(--authority-anacs), transparent 85%);
  color: var(--authority-anacs);
}
:is([data-theme="dark"], [data-theme="slate"]) .grade-tag[data-authority="ICG"] {
  background: color-mix(in oklch, var(--authority-icg), transparent 85%);
  color: var(--authority-icg);
}
:is([data-theme="dark"], [data-theme="slate"])
  .grade-tag[data-clickable="true"][data-authority="PCGS"]:hover,
:is([data-theme="dark"], [data-theme="slate"])
  .grade-tag[data-clickable="true"][data-authority="PCGS"]:focus-visible {
  background: var(--authority-pcgs);
  color: var(--bg-primary);
}
:is([data-theme="dark"], [data-theme="slate"])
  .grade-tag[data-clickable="true"][data-authority="NGC"]:hover,
:is([data-theme="dark"], [data-theme="slate"])
  .grade-tag[data-clickable="true"][data-authority="NGC"]:focus-visible {
  background: var(--authority-ngc);
  color: var(--bg-primary);
}
:is([data-theme="dark"], [data-theme="slate"])
  .grade-tag[data-clickable="true"][data-authority="ANACS"]:hover,
:is([data-theme="dark"], [data-theme="slate"])
  .grade-tag[data-clickable="true"][data-authority="ANACS"]:focus-visible {
  background: var(--authority-anacs);
  color: var(--bg-primary);
}
:is([data-theme="dark"], [data-theme="slate"])
  .grade-tag[data-clickable="true"][data-authority="ICG"]:hover,
:is([data-theme="dark"], [data-theme="slate"])
  .grade-tag[data-clickable="true"][data-authority="ICG"]:focus-visible {
  background: var(--authority-icg);
  color: var(--bg-primary);
}

/* Sepia theme overrides */
[data-theme="sepia"] .grade-tag {
  background: color-mix(in oklch, var(--text-primary), transparent 94%);
  color: var(--text-muted);
}
[data-theme="sepia"] .grade-tag[data-authority="PCGS"] {
  background: color-mix(in oklch, var(--authority-pcgs), transparent 90%);
  color: var(--authority-pcgs);
}
[data-theme="sepia"] .grade-tag[data-authority="NGC"] {
  background: color-mix(in oklch, var(--authority-ngc), transparent 90%);
  color: var(--authority-ngc);
}
[data-theme="sepia"] .grade-tag[data-authority="ANACS"] {
  background: color-mix(in oklch, var(--authority-anacs), transparent 90%);
  color: var(--authority-anacs);
}
[data-theme="sepia"] .grade-tag[data-authority="ICG"] {
  background: color-mix(in oklch, var(--authority-icg), transparent 90%);
  color: var(--authority-icg);
}
[data-theme="sepia"] .grade-tag[data-clickable="true"][data-authority="PCGS"]:hover,
[data-theme="sepia"] .grade-tag[data-clickable="true"][data-authority="PCGS"]:focus-visible {
  background: var(--authority-pcgs);
  color: var(--text-inverse);
}
[data-theme="sepia"] .grade-tag[data-clickable="true"][data-authority="NGC"]:hover,
[data-theme="sepia"] .grade-tag[data-clickable="true"][data-authority="NGC"]:focus-visible {
  background: var(--authority-ngc);
  color: var(--text-inverse);
}
[data-theme="sepia"] .grade-tag[data-clickable="true"][data-authority="ANACS"]:hover,
[data-theme="sepia"] .grade-tag[data-clickable="true"][data-authority="ANACS"]:focus-visible {
  background: var(--authority-anacs);
  color: var(--text-inverse);
}
[data-theme="sepia"] .grade-tag[data-clickable="true"][data-authority="ICG"]:hover,
[data-theme="sepia"] .grade-tag[data-clickable="true"][data-authority="ICG"]:focus-visible {
  background: var(--authority-icg);
  color: var(--text-inverse);
}

/* =============================================================================
   SERIAL TAG — Inline serial number badge (purple tint)
   ============================================================================= */
.serial-tag {
  display: inline-flex;
  align-items: center;
  font-size: var(--font-size-xs);
  font-weight: 600;
  padding: 0.1rem 0.3rem;
  margin-left: 0.25rem;
  border-radius: var(--radius);
  background: rgba(139, 92, 246, 0.12);
  color: #7c3aed;
  vertical-align: middle;
  line-height: 1.2;
  white-space: nowrap;
  max-width: 8ch;
  overflow: hidden;
  text-overflow: ellipsis;
}

:is([data-theme="dark"], [data-theme="slate"]) .serial-tag {
  background: rgba(139, 92, 246, 0.18);
  color: #a78bfa;
}

[data-theme="sepia"] .serial-tag {
  background: rgba(109, 40, 217, 0.1);
  color: #6d28d9;
}

/* =============================================================================
   STORAGE TAG — Inline storage location badge (muted, truncated)
   ============================================================================= */
.storage-tag {
  display: inline-flex;
  align-items: center;
  font-size: var(--font-size-xs);
  font-weight: 500;
  padding: 0.1rem 0.3rem;
  margin-left: 0.25rem;
  border-radius: var(--radius);
  background: var(--bg-tertiary);
  color: var(--text-muted);
  vertical-align: middle;
  line-height: 1.2;
  white-space: nowrap;
  max-width: 8ch;
  overflow: hidden;
  text-overflow: ellipsis;
}

:is([data-theme="dark"], [data-theme="slate"]) .storage-tag {
  background: color-mix(in oklch, var(--text-inverse), transparent 94%);
  color: var(--text-muted);
}

[data-theme="sepia"] .storage-tag {
  background: color-mix(in oklch, var(--text-primary), transparent 95%);
  color: var(--text-muted);
}

/* =============================================================================
   NOTES INDICATOR — Small icon when item has notes
   ============================================================================= */
.notes-indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 0.25rem;
  color: var(--text-muted);
  vertical-align: middle;
  line-height: 1;
  cursor: pointer;
}

.notes-indicator:hover {
  color: var(--primary);
}

.notes-indicator svg {
  width: 0.75rem;
  height: 0.75rem;
}

:is([data-theme="dark"], [data-theme="slate"]) .notes-indicator {
  color: var(--text-muted);
}

[data-theme="sepia"] .notes-indicator {
  color: var(--text-muted);
}

/* =============================================================================
   PCGS VERIFY BUTTON — Small checkmark icon inside grade tag
   ============================================================================= */
.pcgs-verify-btn {
  display: inline-flex;
  align-items: center;
  margin-left: 0.2rem;
  cursor: pointer;
  opacity: 0.5;
  transition: var(--transition);
  vertical-align: middle;
}

.pcgs-verify-btn:hover {
  opacity: 1;
}

.pcgs-verify-btn.pcgs-verifying {
  opacity: 0.3;
  animation: pcgs-pulse 1s ease-in-out infinite;
}

.pcgs-verify-btn.pcgs-verified {
  opacity: 1;
  color: var(--success);
}

.pcgs-verify-btn.pcgs-verify-failed {
  opacity: 1;
  color: var(--danger);
}

@keyframes pcgs-pulse {
  0%,
  100% {
    opacity: 0.3;
  }
  50% {
    opacity: 0.7;
  }
}

:is([data-theme="dark"], [data-theme="slate"]) .pcgs-verify-btn.pcgs-verified {
  color: var(--success);
}

[data-theme="sepia"] .pcgs-verify-btn.pcgs-verified {
  color: var(--success);
}

:is([data-theme="dark"], [data-theme="slate"]) #certVerifiedIcon {
  color: var(--success);
}
[data-theme="sepia"] #certVerifiedIcon {
  color: var(--success);
}

/* =============================================================================
   FORM INFO ICON — Always-visible (i) link icon in form labels
   ============================================================================= */
.form-info-icon {
  color: var(--warning, #f59e0b);
  text-decoration: none;
  display: inline-flex;
  vertical-align: middle;
  margin-left: 0.25rem;
}
.form-info-icon:visited,
.form-info-icon:hover,
.form-info-icon:active,
.form-info-icon:link {
  color: var(--warning, #f59e0b);
}
.form-info-icon:hover {
  opacity: 0.8;
}
.form-info-icon svg {
  stroke: currentColor;
}

/* =============================================================================
   ITEM MODAL ACTION BAR — Search Numista left, Cancel/Submit right
   ============================================================================= */
.item-modal-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 1rem;
  gap: var(--spacing-md);
}

.item-modal-actions-left {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  flex-wrap: wrap;
}

.item-modal-actions-right {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

/* =============================================================================
   ITEM MODAL — Glassmorphic Redesign (STAK-173)
   Scoped to #itemModal / #inventoryForm so other modals are unaffected.
   Translates Stitch V3 "Refined Bottom Sheet" prototype into theme-aware CSS.
   ============================================================================= */

/* --- Modernized modal header — replace bright blue gradient -------------- */
#itemModal .modal-header {
  background: var(--bg-secondary);
  color: var(--text-primary);
  padding: var(--spacing) var(--spacing-xl);
  border-bottom: 1px solid var(--border);
  box-shadow: none;
}

#itemModal .modal-header h2 {
  color: var(--text-primary);
  font-size: var(--font-size-lg);
  font-weight: 700;
  letter-spacing: 0.02em;
}

#itemModal .modal-close {
  color: var(--text-secondary);
}

#itemModal .modal-close:hover {
  color: var(--text-primary);
}

/* --- Glass-style form inputs -------------------------------------------- */
#inventoryForm input,
#inventoryForm select {
  background: var(--glass-input-bg, rgba(0, 0, 0, 0.03));
  border: 1.5px solid var(--glass-input-border, var(--border));
  border-radius: var(--radius);
  padding: 0.4rem 0.6rem;
  font-size: var(--font-size-md);
  line-height: 1.2;
  min-height: var(--inventory-control-height);
  height: var(--inventory-control-height);
  box-sizing: border-box;
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

/* Solid backgrounds for OS-native <option> popups (STAK-353) */
#inventoryForm select option {
  background: var(--bg-primary);
  color: var(--text-primary);
}

#inventoryForm input:focus,
#inventoryForm select:focus {
  background: var(--glass-input-focus-bg, rgba(0, 0, 0, 0.05));
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--focus-ring);
}

/* Dark theme glass tokens */
:is([data-theme="dark"], [data-theme="slate"]) #inventoryForm {
  --glass-input-bg: rgba(255, 255, 255, 0.05);
  --glass-input-border: rgba(255, 255, 255, 0.1);
  --glass-input-focus-bg: rgba(255, 255, 255, 0.08);
}

/* Sepia theme glass tokens */
[data-theme="sepia"] #inventoryForm {
  --glass-input-bg: rgba(139, 69, 19, 0.04);
  --glass-input-border: rgba(139, 69, 19, 0.15);
  --glass-input-focus-bg: rgba(139, 69, 19, 0.07);
}

/* --- Uppercase micro-labels --------------------------------------------- */
#inventoryForm label,
#inventoryForm .form-section-label {
  font-size: var(--font-size-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
  margin-bottom: 0.2rem;
}

/* Restore hint spans inside labels */
#inventoryForm label span[style*="font-weight:normal"] {
  font-weight: 400 !important;
  text-transform: none;
  letter-spacing: normal;
  font-size: var(--font-size-xs);
}

/* --- Refined field group spacing ---------------------------------------- */
#inventoryForm .grid {
  gap: var(--spacing-md);
  margin-bottom: 0.4rem;
}

#inventoryForm {
  --inventory-control-height: 34px;
  gap: var(--spacing-md);
}

/* --- Image upload slots — dashed drop-zone style ------------------------ */
#inventoryForm .image-upload-side {
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  padding: 0.5rem;
  transition:
    border-color 0.2s ease,
    background 0.2s ease;
}

#inventoryForm .image-upload-side:hover {
  border-color: var(--primary);
  background: color-mix(in oklch, var(--primary), transparent 97%);
}

:is([data-theme="dark"], [data-theme="slate"]) #inventoryForm .image-upload-side:hover {
  background: color-mix(in oklch, var(--primary), transparent 94%);
}

#inventoryForm .image-side-label {
  font-size: var(--font-size-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted, var(--text-secondary));
}

/* --- Collapsible sections — refined for prototype look ------------------ */
#inventoryForm .form-section {
  border: 1px solid var(--glass-input-border, var(--border));
  border-radius: var(--radius);
  margin-bottom: 0.5rem;
  background: transparent;
}

#inventoryForm .form-section-header {
  background: transparent;
  padding: 0.55rem 0.7rem;
  font-size: var(--font-size-sm);
  font-weight: 700;
  letter-spacing: 0.03em;
}

#inventoryForm .form-section-icon {
  color: var(--primary);
}

/* --- Action bar — pill buttons with icons ------------------------------- */
#inventoryForm .item-modal-actions {
  position: sticky;
  bottom: calc(-1 * var(--spacing));
  margin: 0.85rem calc(-1 * var(--spacing)) calc(-1 * var(--spacing));
  padding: 0.75rem var(--spacing) 0.65rem;
  padding-bottom: max(0.65rem, env(safe-area-inset-bottom));
  padding-left: max(var(--spacing), env(safe-area-inset-left));
  padding-right: max(var(--spacing), env(safe-area-inset-right));
  border-top: 1px solid var(--border);
  background: var(--bg-secondary);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  gap: 0.4rem;
  justify-content: flex-end;
  z-index: 2;
}

#inventoryForm .item-modal-actions-left .btn,
#inventoryForm .item-modal-actions-right .btn {
  border-radius: var(--radius-pill);
  padding: 0.3rem 0.75rem;
  font-size: var(--font-size-sm);
  font-weight: 700;
  min-height: auto;
}

#inventoryForm .item-modal-actions-left .btn.secondary,
#inventoryForm .item-modal-actions-right .btn.secondary {
  background: var(--glass-input-bg, rgba(0, 0, 0, 0.04));
  border: 1px solid var(--glass-input-border, var(--border));
  color: var(--text-primary);
  transition:
    background 0.15s ease,
    border-color 0.15s ease;
}

#inventoryForm .item-modal-actions-left .btn.secondary:hover,
#inventoryForm .item-modal-actions-right .btn.secondary:hover {
  background: var(--glass-input-focus-bg, rgba(0, 0, 0, 0.07));
  border-color: var(--primary);
}

/* Cancel button */
#inventoryForm #cancelItem {
  background: var(--glass-input-bg, rgba(0, 0, 0, 0.04));
  border: 1px solid var(--glass-input-border, var(--border));
  color: var(--text-secondary);
}

/* Submit button — premium gold/accent treatment */
#inventoryForm #itemModalSubmit.premium {
  border-radius: var(--radius-pill);
  padding: 0.3rem 0.85rem;
  min-height: auto;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--warning) 20%, transparent);
}

/* --- Numista status dot — position fix inside pill button --------------- */
#inventoryForm .api-status-dot {
  margin-left: 0.35rem;
}

/* --- Inline search buttons next to inputs ------------------------------- */
.input-with-action {
  display: flex;
  align-items: stretch;
  gap: 0;
  position: relative;
  min-height: var(--inventory-control-height, 34px);
}

.input-with-action input,
.input-with-action select {
  flex: 1;
  min-width: 0;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

.inline-search-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-width: 32px;
  min-height: var(--inventory-control-height, 34px);
  height: var(--inventory-control-height, 34px);
  box-sizing: border-box;
  padding: 0.25rem;
  background: var(--glass-input-bg, rgba(0, 0, 0, 0.03));
  border: 1.5px solid var(--glass-input-border, var(--border));
  border-left: none;
  border-radius: 0 var(--radius) var(--radius) 0;
  color: var(--text-secondary);
  cursor: pointer;
  transition:
    color 0.15s ease,
    background 0.15s ease;
}

.inline-search-btn:hover {
  color: var(--primary);
  background: var(--glass-input-focus-bg, rgba(0, 0, 0, 0.05));
}

.inline-search-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.inline-search-btn .api-status-dot {
  width: 6px;
  height: 6px;
  margin-left: 2px;
}

/* --- Pattern toggle row — checkbox + refresh side-by-side --------------- */
.pattern-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
}

.pattern-toggle-label {
  flex: 1;
  min-height: 30px;
  display: flex;
  align-items: center;
}

.pattern-toggle-label input[type="checkbox"] {
  width: 15px;
  height: 15px;
}

.pattern-refresh-btn {
  min-width: 30px;
  min-height: 30px;
  padding: 0.3rem !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
}

/* --- Date N/A toggle button (STAK-375) ----------------------------------- */
.date-na-btn {
  font-size: var(--font-size-sm) !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  min-width: 40px;
  padding: 0 0.6rem;
}
.date-na-btn.active {
  color: var(--text-inverse);
  background: var(--primary);
  border-color: var(--primary);
}

/* --- Clone mode (STAK-375) ---------------------------------------------- */
/* Field-level checkboxes — hidden by default, shown in clone mode */
.clone-field-cb {
  display: none;
  width: 14px;
  height: 14px;
  margin-right: 0.3rem;
  vertical-align: middle;
  accent-color: var(--primary);
  cursor: pointer;
  flex-shrink: 0;
}
.clone-mode .clone-field-cb {
  display: inline-block;
}

/* Dimmed fields when clone checkbox unchecked */
.clone-field-dimmed {
  opacity: 0.35;
  pointer-events: none;
}
.clone-field-dimmed .clone-field-cb,
.clone-field-dimmed .clone-section-cb {
  pointer-events: auto;
}

/* Section-level clone checkbox on section headers */
.clone-section-cb {
  display: none;
  width: 16px;
  height: 16px;
  margin-right: 0.4rem;
  accent-color: var(--primary);
  cursor: pointer;
}
.clone-mode .clone-section-cb {
  display: inline-block;
}

/* Clone counter badge */
.clone-picker-count {
  font-size: var(--font-size-sm);
  font-weight: 700;
  color: var(--primary);
  padding: 0.15rem 0.5rem;
  background: var(--glass-input-bg, rgba(0, 0, 0, 0.04));
  border-radius: var(--radius-pill);
}

/* --- Estimate Retail checkbox styling ----------------------------------- */
.estimate-retail-label {
  min-height: 30px;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.25rem;
}

.estimate-retail-label input[type="checkbox"] {
  width: 14px;
  height: 14px;
}

/* --- Numista data section — read-only/API-populated fields -------------- */
.numista-data-fields input {
  color: var(--text-secondary);
}

.numista-data-fields input:focus {
  color: var(--text-primary);
}

/* --- Tags section -------------------------------------------------------- */
.tags-edit-container {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.tags-row {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.tags-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  min-height: 28px;
  align-items: center;
}

.tag-empty-hint {
  font-size: var(--font-size-sm);
  color: var(--text-muted, var(--text-secondary));
  opacity: 0.6;
  font-style: italic;
}

.tags-add-row {
  display: flex;
  gap: 0.35rem;
  align-items: center;
  margin-top: 0.25rem;
}

.tags-add-row .tag-input {
  flex: 1;
  min-width: 0;
  font-size: var(--font-size-base);
}

.tags-add-row .btn {
  min-width: 30px;
  min-height: 30px;
  padding: 0.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 3-column equal grid for Numista dimensions row */
.grid-3-equal {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--spacing);
}

/* --- Currency input inside glass form ----------------------------------- */
#inventoryForm .currency-input {
  --currency-padding: 1.4rem;
}

#inventoryForm .currency-input::before {
  left: 0.5rem;
  font-size: var(--font-size-md);
}

#inventoryForm .currency-input input {
  border-radius: var(--radius);
  padding-left: var(--currency-padding, 1.4rem);
}

/* --- Currency input with inline button ---------------------------------- */
#inventoryForm .currency-input.input-with-action input {
  border-radius: var(--radius) 0 0 var(--radius);
}

#inventoryForm .currency-input.input-with-action .inline-search-btn {
  min-height: var(--inventory-control-height, 34px);
  align-self: stretch;
}

/* =============================================================================
   NUMISTA RESULTS MODAL — Stacked modal for search results / field picker
   ============================================================================= */
#numistaResultsModal {
  z-index: 10000;
}

.numista-results-modal-content {
  max-width: 600px;
  width: 90%;
  /* STRK-51: keep header and actions reachable with 15+ expanded picker rows */
  display: flex;
  flex-direction: column;
  max-height: 90vh;
  overflow: hidden;
}

.numista-results-modal-content .modal-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.numista-results-modal-content .numista-fill-actions {
  position: sticky;
  bottom: 0;
  background: var(--bg-primary);
  padding-top: 0.5rem;
  border-top: 1px solid var(--border);
  z-index: 1;
}

.numista-results-list {
  max-height: 400px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  padding: 0.5rem 0;
}

.numista-result-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: var(--transition);
  background: var(--bg-secondary);
}

.numista-result-card:hover {
  border-color: var(--primary);
  background: var(--bg-tertiary);
}

.numista-result-card.selected {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--primary);
}

.numista-result-images {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.numista-result-card img,
.numista-selected-preview .numista-result-images img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  background: var(--bg-primary);
}

.numista-img-placeholder {
  width: 48px;
  height: 48px;
  background: var(--bg-tertiary);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-xl);
  flex-shrink: 0;
}

/* Search refinement bar above results — sticky so it stays visible while scrolling */
.numista-refine-search {
  display: flex;
  gap: var(--spacing-md);
  width: 100%;
  padding: 0.25rem 0 0.5rem;
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--bg-secondary);
}

.numista-refine-input {
  flex: 1;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: var(--font-size-md);
}

.numista-refine-btn {
  padding: 0.5rem 1rem;
  white-space: nowrap;
  font-size: var(--font-size-md);
}

.numista-result-info {
  flex: 1;
  min-width: 0;
}

.numista-result-name {
  font-weight: 600;
  font-size: var(--font-size-lg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.numista-result-meta {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  margin-top: 0.15rem;
}

.numista-result-id {
  font-size: var(--font-size-xs);
  color: var(--primary);
  font-weight: 600;
}

.numista-result-id-link {
  appearance: none;
  border: 0;
  background: transparent;
  color: inherit;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.numista-result-id-link:hover {
  color: color-mix(in srgb, var(--primary) 75%, white 25%);
}

.numista-result-id-link:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.numista-result-footer {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--spacing-md);
  margin-top: 0.25rem;
}

/* Field picker area */
.numista-field-picker {
  padding: 0.5rem 0;
}

.numista-selected-preview {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.75rem;
  border: 2px solid var(--primary);
  border-radius: var(--radius);
  background: var(--bg-secondary);
  margin-bottom: 0.75rem;
}

/* .numista-selected-preview img — handled by .numista-result-images img above */

.numista-field-checkboxes {
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: 0.35rem 0.5rem;
  align-items: center;
  margin: 0 0 0.75rem 0;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.numista-fields-heading {
  grid-column: 1 / -1;
  font-weight: 600;
  font-size: var(--font-size-md);
  margin-bottom: 0.15rem;
}

.numista-fields-section-label {
  grid-column: 1 / -1;
  font-weight: 600;
  font-size: var(--font-size-md);
  margin-top: 0.5rem;
  margin-bottom: 0.15rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border);
  color: var(--text-secondary, var(--text-primary));
}

.numista-field-checkboxes input[type="checkbox"] {
  margin: 0;
}

.numista-field-label {
  font-weight: 600;
  font-size: var(--font-size-base);
  white-space: nowrap;
  text-align: right;
  color: var(--text-secondary, var(--text-primary));
}

.numista-field-input {
  min-width: 0;
  padding: 0.25rem 0.4rem;
  font-size: var(--font-size-base);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-primary);
  color: var(--text-primary);
}

.numista-field-input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.numista-field-input:focus {
  border-color: var(--primary);
  outline: none;
}

.numista-field-current {
  grid-column: 3;
  font-size: var(--font-size-xs);
  color: var(--text-muted, #999);
  margin-top: -0.2rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.numista-field-warn {
  grid-column: 1 / -1;
  font-size: var(--font-size-xs);
  color: var(--danger, #f44336);
  font-style: italic;
  margin-top: -0.2rem;
  padding-left: 1.5rem;
}

/* .numista-field-row uses display:contents so children participate directly in the parent grid */
.numista-field-row {
  display: contents;
}

/* Numista tag picker (STAK-556) */
.numista-tag-separator {
  border-top: 1px solid var(--border-color, #ddd);
  margin: 0.5rem 0;
  grid-column: 1 / -1;
}

.numista-tag-heading-row {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-bottom: 0.15rem;
}

.numista-fields-subheading {
  font-weight: 600;
  font-size: var(--font-size-md);
}

.numista-tags-section {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 0.3rem;
  padding: 0.25rem 0;
}

.numista-tag-cb-wrap {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin: 0.15rem 0.3rem;
  cursor: pointer;
}

.numista-tag-hint {
  font-size: var(--font-size-sm);
  opacity: 0.6;
  font-style: italic;
}

.numista-tag-actions {
  font-size: var(--font-size-sm);
  cursor: pointer;
  color: var(--accent-color, #4a90d9);
  margin-left: 0.5rem;
}

.numista-tag-actions:hover {
  text-decoration: underline;
}

.numista-tag-dimmed {
  opacity: 0.5;
}

.numista-field-edited {
  font-size: var(--font-size-sm);
  color: var(--warning-color, orange);
  font-style: italic;
  grid-column: 3;
}

.numista-fill-actions {
  display: flex;
  gap: var(--spacing-md);
  justify-content: flex-end;
}

.numista-no-results {
  text-align: center;
  padding: 2rem 1rem;
  color: var(--text-muted);
  font-style: italic;
}

/* Enhanced no-results: retry search + quick-picks */
.numista-no-results-enhanced {
  padding: 1rem;
}

.numista-retry-search p {
  text-align: center;
  color: var(--text-muted);
  font-style: italic;
  margin-bottom: 0.75rem;
}

.numista-retry-row {
  display: flex;
  gap: var(--spacing-md);
  margin-bottom: 1rem;
}

.numista-retry-input {
  flex: 1;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  background: var(--bg-input);
  color: var(--text-primary);
  font-size: var(--font-size-lg);
}

.numista-retry-btn {
  white-space: nowrap;
}

.numista-quick-picks-label {
  font-size: var(--font-size-base);
  color: var(--text-muted);
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.numista-quick-picks-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  max-height: 280px;
  overflow-y: auto;
}

.numista-quick-pick {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: 0.45rem 0.65rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  background: var(--bg-card);
  cursor: pointer;
  transition: background 0.15s;
  text-align: left;
}

.numista-quick-pick:hover {
  background: var(--bg-hover);
}

.quick-pick-id {
  font-weight: 600;
  color: var(--primary);
  font-size: var(--font-size-md);
  min-width: 5rem;
}

.quick-pick-name {
  flex: 1;
  font-size: var(--font-size-md);
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quick-pick-count {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  background: var(--bg-input);
  padding: 0.1rem 0.4rem;
  border-radius: var(--radius-lg);
}

/* =============================================================================
   SPOT LOOKUP MODAL — Historical spot price search (STACK-49)
   ============================================================================= */
#spotLookupModal {
  z-index: 10000;
}

.spot-lookup-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-md);
}

.spot-lookup-table th {
  text-transform: uppercase;
  font-size: var(--font-size-xs);
  letter-spacing: 0.05em;
  color: var(--text-muted);
  padding: 0.4rem 0.5rem;
  text-align: left;
  border-bottom: 1px solid var(--border);
}

.spot-lookup-table td {
  padding: 0.45rem 0.5rem;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

.spot-lookup-table tr:last-child td {
  border-bottom: none;
}

.spot-lookup-use-btn {
  padding: 0.25rem 0.75rem;
  font-size: var(--font-size-base);
}

.spot-lookup-empty {
  text-align: center;
  padding: 2rem 1rem;
  color: var(--text-muted);
}

.spot-lookup-hint {
  font-size: var(--font-size-base);
  color: var(--text-muted);
  margin-top: 0.5rem;
}

.spot-lookup-fetch-btn {
  margin-top: 1rem;
}

#typeSummary .summary-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.15rem 0.4rem;
  min-height: 1.25rem;
  border-radius: var(--radius);
  font-size: var(--font-size-sm);
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition: var(--transition);
  user-select: none;
  white-space: nowrap;
  box-shadow: var(--shadow-sm);
  margin: 0.05rem;
  line-height: 1.1;
  border: 1px solid rgba(255, 255, 255, 0.2);
  max-width: fit-content;
}

#typeSummary .summary-chip:hover {
  transform: translateY(-1px) scale(1.05);
  box-shadow: var(--shadow);
  filter: brightness(1.1);
}

#typeSummary .summary-chip:active {
  transform: translateY(0) scale(1.02);
}

/* Enhanced chip styling for better visual hierarchy */
#typeSummary .type-chip,
#typeSummary .metal-chip {
  font-weight: 700;
  border-width: 2px;
}

#typeSummary .purchase-chip,
#typeSummary .storage-chip,
#typeSummary .name-chip {
  font-weight: 500;
  font-style: italic;
  border-style: dashed;
}

.type-chip.coin {
  background-color: var(--type-coin-bg);
  color: var(--type-coin-text);
}
.type-chip.round {
  background-color: var(--type-round-bg);
  color: var(--type-round-text);
}
.type-chip.bar {
  background-color: var(--type-bar-bg);
  color: var(--type-bar-text);
}
.type-chip.note {
  background-color: var(--type-note-bg);
  color: var(--type-note-text);
}
.type-chip.set {
  background-color: var(--type-set-bg);
  color: var(--type-set-text);
}
.type-chip.other {
  background-color: var(--type-other-bg);
  color: var(--type-other-text);
}
.type-chip.constitutional {
  background-color: var(--type-constitutional-bg);
  color: var(--type-constitutional-text);
}

/* ── STRK-235: Constitutional / junk silver entry card ──────────────────────
   Replaces the standard Purity/Qty/Weight/Unit row when type = Constitutional.
   Sourced from the approved prototype (specs/.../artifacts/playground.html). */
.lock-pill {
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  background: var(--type-constitutional-bg);
  color: var(--type-constitutional-text);
  font-weight: 700;
  vertical-align: middle;
}
/* #item-constitutional-group reuses the shared .form-section / .form-section-header /
   .form-section-body chrome (no dedicated card fill) so it matches the other modal
   sections (Grading, Pricing). The entry-mode toggle sits in the header (margin-left:auto). */
.ccg-hint {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
}
#constitutional-silver-preview {
  font-family: var(--font-mono);
  font-size: var(--font-size-md);
  background: var(--bg-primary);
  border: 1px dashed var(--border-hover);
  border-radius: var(--radius);
  padding: 0.55rem 0.75rem;
  color: var(--text-primary);
}
#constitutional-silver-preview .melt {
  color: var(--warning);
  font-weight: 700;
}
#constitutional-silver-preview .oz {
  color: var(--silver);
  font-weight: 700;
}

/* =============================================================================
   CONTROL SETTINGS - NEW LAYOUT
   Positioned at bottom right of filters card
   ============================================================================= */

.control-settings {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--spacing-sm);
  box-shadow: var(--shadow-sm);
  min-width: fit-content;
  align-self: flex-start;
}

.chip-control,
.items-control,
.group-names-control {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  white-space: nowrap;
}

/* Anchor dropdown controls to lower right */
.control-settings {
  display: flex;
  gap: var(--spacing);
  justify-content: flex-end;
  align-items: flex-end;
  flex-wrap: wrap;
}

.chip-label,
.items-label {
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--text-secondary);
  margin: 0;
  min-width: fit-content;
}

.chip-select,
.table-select {
  padding: 0.2rem 0.4rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: var(--font-size-sm);
  min-width: 50px;
  cursor: pointer;
  transition: var(--transition);
}

.chip-select:focus,
.table-select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--focus-ring);
}

.chip-select:hover,
.table-select:hover {
  border-color: var(--primary);
}

/* Responsive adjustments for control settings */
@media (max-width: 768px) {
  /* Keep filter controls horizontal, compact (STAK-126) */
  .filter-controls {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--spacing-xs);
  }

  .control-label {
    font-size: var(--font-size-sm);
  }
}

@media (max-width: 480px) {
  .filter-controls {
    gap: var(--spacing-xs);
  }

  .control-label {
    font-size: var(--font-size-xs);
  }

  .control-select {
    width: 100%;
  }
}

/* Debug modal styling */
#debugModalContent {
  max-height: 60vh;
  overflow-y: auto;
  font-family: var(--font-mono);
  white-space: pre-wrap;
}

/* =============================================================================
   ENCRYPTION UI STYLES
   Master password and encryption management interface
   ============================================================================= */

.encryption-section {
  background: var(--bg-card);
  border: 2px solid var(--primary) !important;
  border-radius: var(--radius);
  padding: 1rem;
  margin-bottom: 1.5rem;
}

.encryption-status {
  margin-bottom: 1rem;
}

.status-indicator {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: 0.5rem;
  border-radius: var(--radius);
  background: var(--bg-secondary);
}

.status-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}

.status-indicator.status-success .status-dot {
  background: var(--success);
  animation: pulse-success 2s infinite;
}

.status-indicator.status-warning .status-dot {
  background: var(--warning);
}

.status-indicator.status-error .status-dot {
  background: var(--danger);
  animation: pulse-error 2s infinite;
}

.status-indicator.status-info .status-dot {
  background: var(--info);
}

@keyframes pulse-success {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.6;
  }
}

@keyframes pulse-error {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
}

.status-text {
  font-weight: 500;
  color: var(--text-primary);
}

.form-row {
  margin-bottom: 1rem;
}

.form-row label {
  display: block;
  margin-bottom: 0.25rem;
  font-weight: 500;
  color: var(--text-primary);
}

.form-row input[type="password"] {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text-primary);
  font-size: var(--font-size-md);
}

.form-row input[type="password"]:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--primary) 20;
}

.encryption-actions {
  display: flex;
  gap: var(--spacing-md);
  margin-top: 1rem;
  flex-wrap: wrap;
}

.encryption-actions .btn {
  flex: 0 0 auto;
}

.encryption-info {
  background: var(--bg-secondary);
  padding: 0.75rem;
  border-radius: var(--radius);
  margin-bottom: 1rem;
}

.encryption-info strong {
  color: var(--text-primary);
}

.data-status-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--spacing-md);
  margin-top: 0.5rem;
}

.status-item {
  padding: 0.5rem;
  border-radius: var(--radius);
  font-size: var(--font-size-md);
  font-weight: 500;
}

.status-item.status-success {
  background: var(--success) 20;
  color: var(--success);
  border: 1px solid var(--success) 40;
}

.status-item.status-warning {
  background: var(--warning) 20;
  color: var(--warning);
  border: 1px solid var(--warning) 40;
}

.status-item.status-info {
  background: var(--info) 20;
  color: var(--info);
  border: 1px solid var(--info) 40;
}

.encryption-warning {
  margin-top: 1rem;
  padding: 0.75rem;
  background: var(--warning) 15;
  border: 1px solid var(--warning) 40;
  border-radius: var(--radius);
  color: var(--text-primary);
}

.encryption-warning strong {
  color: var(--warning);
}

.change-password-section {
  background: var(--bg-secondary);
  padding: 1rem;
  border-radius: var(--radius);
  margin-top: 1rem;
  border: 1px solid var(--border);
}

.change-password-section h4 {
  margin: 0 0 1rem 0;
  color: var(--text-primary);
}

/* Dark mode encryption styles */
:is([data-theme="dark"], [data-theme="slate"]) .encryption-section {
  background: var(--bg-card);
  border-color: var(--primary) !important;
}

:is([data-theme="dark"], [data-theme="slate"]) .status-indicator {
  background: var(--bg-secondary);
}

:is([data-theme="dark"], [data-theme="slate"]) .form-row input[type="password"] {
  background: var(--bg-secondary);
  border-color: var(--border);
  color: var(--text-primary);
}

:is([data-theme="dark"], [data-theme="slate"]) .encryption-info {
  background: var(--bg-secondary);
}

:is([data-theme="dark"], [data-theme="slate"]) .change-password-section {
  background: var(--bg-secondary);
  border-color: var(--border);
}

/* Sepia mode encryption styles */
[data-theme="sepia"] .encryption-section {
  background: var(--bg-card);
  border-color: var(--primary) !important;
}

[data-theme="sepia"] .status-indicator {
  background: var(--bg-secondary);
}

[data-theme="sepia"] .form-row input[type="password"] {
  background: var(--bg-secondary);
  border-color: var(--border);
  color: var(--text-primary);
}

[data-theme="sepia"] .encryption-info {
  background: var(--bg-secondary);
}

[data-theme="sepia"] .change-password-section {
  background: var(--bg-secondary);
  border-color: var(--border);
}

/* =============================================================================
   VAULT ENCRYPTED BACKUP STYLES
   Password input groups, strength bar, match indicator, separator
   ============================================================================= */

.password-input-group {
  display: flex;
  gap: 0;
}

.password-input-group input[type="password"],
.password-input-group input[type="text"] {
  flex: 1;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

.password-toggle {
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border);
  border-left: none;
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--bg-secondary);
  color: var(--text-secondary);
  cursor: pointer;
  font-size: var(--font-size-lg);
  line-height: 1;
  transition:
    background 0.2s,
    color 0.2s;
}

.password-toggle:hover {
  background: var(--bg-card);
  color: var(--text-primary);
}

.strength-bar {
  height: 4px;
  background: var(--border);
  border-radius: var(--radius-sm);
  margin-top: 0.375rem;
  overflow: hidden;
}

.strength-fill {
  height: 100%;
  border-radius: var(--radius-sm);
  transition:
    width 0.3s ease,
    background 0.3s ease;
  width: 0%;
}

.strength-text {
  font-size: var(--font-size-sm);
  margin-top: 0.25rem;
  font-weight: 500;
}

.password-match {
  font-size: var(--font-size-sm);
  margin-top: 0.25rem;
  font-weight: 500;
}

.vault-separator {
  border: none;
  border-top: 1px solid var(--border);
  margin: 0.75rem 0;
  width: 100%;
}

.vault-dot-pulse {
  animation: vault-pulse 1.5s ease-in-out infinite;
}

@keyframes vault-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
}

/* Dark mode vault styles */
:is([data-theme="dark"], [data-theme="slate"]) .password-toggle {
  background: var(--bg-secondary);
  border-color: var(--border);
  color: var(--text-secondary);
}

:is([data-theme="dark"], [data-theme="slate"]) .password-toggle:hover {
  background: var(--bg-card);
  color: var(--text-primary);
}

:is([data-theme="dark"], [data-theme="slate"]) .strength-bar {
  background: var(--border);
}

/* Sepia mode vault styles */
[data-theme="sepia"] .password-toggle {
  background: var(--bg-secondary);
  border-color: var(--border);
  color: var(--text-secondary);
}

[data-theme="sepia"] .password-toggle:hover {
  background: var(--bg-card);
  color: var(--text-primary);
}

[data-theme="sepia"] .strength-bar {
  background: var(--border);
}

/* =============================================================================
   MODERN RESPONSIVE TABLE REDESIGN
   ============================================================================= */

/* Fix storage location width to 25 characters max */
#inventoryTable td[data-column="storageLocation"] {
  max-width: 25ch !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Metal column toggle with increased width */
#inventoryTable td[data-column="metal"] {
  max-width: 25ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  position: relative;
}

/* Remove ellipsis from action buttons - clean look */
#inventoryTable td.icon-col {
  text-overflow: clip !important;
  overflow: clip !important;
}

/* Enhanced delete button styling - restore red */
#inventoryTable td.icon-col .action-icon.danger {
  color: var(--error) !important;
  border-radius: var(--radius-sm);
  padding: 0.25rem;
  /* Removed transition: var(--transition); */
}

/* Removed hover effect to prevent cell flooding */

/* Portfolio column styling */
#inventoryTable td[data-column="meltValue"],
#inventoryTable td[data-column="retailPrice"],
#inventoryTable td[data-column="gainLoss"] {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Legacy "Responsive column hiding" section removed —
   consolidated into canonical responsive block and card-view rules.
   See STACK-38 / STACK-31. */

/* Smooth table scrolling */
#inventoryTable {
  scroll-behavior: smooth;
  border-collapse: separate;
  border-spacing: 0;
}

/* Modern table cell styling */
#inventoryTable td {
  border-bottom: 1px solid var(--border);
}

/* Legacy price column styling - consolidated above */

/* Legacy price toggle styling - no longer used but kept for compatibility */
.price-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-sm);
  transition: var(--transition);
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.price-toggle:hover {
  background: var(--primary);
  color: var(--text-inverse) !important;
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

/* Purchase location styling and column width */
#inventoryTable th[data-column="purchaseLocation"],
#inventoryTable td[data-column="purchaseLocation"] {
  max-width: 140px !important; /* Reduced from default ~200px to 2/3 size */
  width: 140px !important;
}

.purchase-link {
  color: var(--primary);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  margin-right: 4px;
  vertical-align: middle;
}

.purchase-link:hover {
  color: var(--primary-hover);
}

.purchase-link-icon {
  flex-shrink: 0;
}

/* Purchase Price column — fixed width */
#inventoryTable th[data-column="purchasePrice"],
#inventoryTable td[data-column="purchasePrice"] {
  max-width: 110px !important;
  width: 110px !important;
  min-width: 110px !important;
  text-align: right;
  padding: 0.5rem 0.75rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Melt, Retail, Gain/Loss columns — auto-size to content */
#inventoryTable th[data-column="meltValue"],
#inventoryTable td[data-column="meltValue"],
#inventoryTable th[data-column="retailPrice"],
#inventoryTable td[data-column="retailPrice"],
#inventoryTable th[data-column="gainLoss"],
#inventoryTable td[data-column="gainLoss"] {
  width: auto !important;
  min-width: unset !important;
  max-width: none !important;
  text-align: right;
  padding: 0.5rem 0.75rem;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
}

/* Price headers — inherit system font from .header-text */
#inventoryTable th[data-column="purchasePrice"],
#inventoryTable th[data-column="meltValue"],
#inventoryTable th[data-column="retailPrice"],
#inventoryTable th[data-column="gainLoss"] {
  font-weight: 600;
  background: var(--bg-secondary);
  color: var(--text-secondary);
}

/* Price data cells — monospace for numeric alignment */
#inventoryTable td[data-column="purchasePrice"],
#inventoryTable td[data-column="meltValue"],
#inventoryTable td[data-column="retailPrice"],
#inventoryTable td[data-column="gainLoss"] {
  font-family: var(--font-mono);
  font-size: var(--font-size-md);
  font-weight: 500;
}

/* Text columns use main font family */
#inventoryTable td[data-column="name"],
#inventoryTable td[data-column="metal"],
#inventoryTable td[data-column="purchaseLocation"],
#inventoryTable td[data-column="date"] {
  font-family: var(--font-body);
}

/* Numerical value consistency across all numeric columns */
#inventoryTable td[data-column="qty"],
#inventoryTable td[data-column="weight"],
#inventoryTable td[data-column="purchasePrice"],
#inventoryTable td[data-column="meltValue"],
#inventoryTable td[data-column="retailPrice"],
#inventoryTable td[data-column="gainLoss"] {
  font-family: var(--font-mono) !important;
  font-size: var(--font-size-md) !important;
  font-weight: 500 !important;
  text-align: right !important;
}

/* Completely disable ALL hover effects on action icons to prevent cell flooding */
#inventoryTable .icon-btn:hover,
#inventoryTable .action-icon:hover,
#inventoryTable .icon-btn:focus,
#inventoryTable .action-icon:focus {
  background: transparent !important;
  transform: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Allow inline edit icons to remain functional with subtle hover */
#inventoryTable .inline-edit-icon:hover {
  opacity: 1 !important;
  background: color-mix(in srgb, var(--primary) 10%, transparent) !important;
  border-radius: 50% !important;
}

/* Subtle color variations for different numeric types */
#inventoryTable td[data-column="qty"] {
  color: var(--col-qty);
}

#inventoryTable td[data-column="weight"] {
  color: var(--col-weight);
}

#inventoryTable td[data-column="purchasePrice"] {
  color: var(--col-purchase);
}

#inventoryTable td[data-column="meltValue"] {
  color: var(--col-melt);
}

#inventoryTable td[data-column="retailPrice"] {
  color: var(--col-retail);
}

/* =============================================================================
   SETTINGS GOLDBACK PANEL (STACK-45)
   ============================================================================= */

.settings-goldback-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-md);
}

.settings-goldback-table th,
.settings-goldback-table td {
  padding: 0.35rem 0.5rem;
  text-align: left;
  border-bottom: 1px solid var(--border);
}

.settings-goldback-table th {
  font-weight: 800;
  font-size: var(--font-size-sm);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.source-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  font-size: var(--font-size-sm);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.source-badge.api {
  background: color-mix(in oklch, var(--primary), transparent 86%);
  color: var(--primary-hover);
}

.source-badge.spot {
  background: color-mix(in oklch, var(--warning), transparent 84%);
  color: var(--warning-hover);
}

.source-badge.manual {
  background: color-mix(in oklch, var(--success), transparent 84%);
  color: var(--success-hover);
}

.source-badge.off {
  background: color-mix(in oklch, var(--text-muted), transparent 82%);
  color: var(--text-muted);
}

:is([data-theme="dark"], [data-theme="slate"]) .source-badge.api {
  color: color-mix(in oklch, var(--primary), var(--text-inverse) 35%);
}

:is([data-theme="dark"], [data-theme="slate"]) .source-badge.spot {
  color: color-mix(in oklch, var(--warning), var(--text-inverse) 35%);
}

:is([data-theme="dark"], [data-theme="slate"]) .source-badge.manual {
  color: color-mix(in oklch, var(--success), var(--text-inverse) 35%);
}

:is([data-theme="dark"], [data-theme="slate"]) .source-badge.off {
  color: var(--text-muted);
}

/* Currency fields — 2-column row matching prototype */
.currency-fields-row {
  display: grid;
  gap: 12px;
  /* STRK-236: separate the dropdown row from the toggle grid below it */
  margin-bottom: 1.25rem;
}

@media (min-width: 640px) {
  .currency-fields-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.currency-field {
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-tertiary);
}

.currency-field strong {
  display: block;
  margin-bottom: 6px;
  font-size: var(--font-size-md);
}

.currency-field select {
  width: 100%;
}

/* STRK-236: Currency panel toggle pair — spot-ratios + constitutional-basis arranged side by
   side, with the heavy descriptive paragraphs replaced by an info-icon tooltip on each label. */
.settings-toggle-grid {
  display: grid;
  gap: 12px;
}

@media (min-width: 640px) {
  .settings-toggle-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.settings-toggle-grid .settings-group {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.settings-info-icon {
  position: relative;
  cursor: help;
}

.settings-info-icon:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm, 4px);
}

.settings-info-icon::after {
  content: attr(data-tip);
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  max-width: 260px;
  width: max-content;
  white-space: normal;
  padding: 8px 10px;
  border-radius: var(--radius-sm, 4px);
  background: var(--bg-card);
  color: var(--text-primary);
  border: 1px solid var(--border-hover);
  box-shadow: var(--shadow-lg);
  font-size: var(--font-size-sm);
  font-weight: 400;
  line-height: 1.45;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
}

.settings-info-icon:hover::after,
.settings-info-icon:focus::after,
.settings-info-icon:focus-visible::after {
  opacity: 1;
  visibility: visible;
}

/* Goldback pricing source — pill radio buttons */
.gb-source-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.gb-source-btn {
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 8px 14px;
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  font: inherit;
  font-size: var(--font-size-base);
  font-weight: 700;
  cursor: pointer;
  transition:
    background 0.15s,
    color 0.15s;
}

.gb-source-btn:hover {
  color: var(--text-primary);
}

.gb-source-btn.active {
  background: linear-gradient(135deg, var(--primary), var(--primary-hover));
  color: var(--text-inverse);
  border-color: transparent;
}

/* Conditional input rows — 2-column grid with input shell + helper card */
.gb-conditional-row {
  display: grid;
  gap: 12px;
  margin-bottom: 16px;
}

@media (min-width: 640px) {
  .gb-conditional-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.gb-input-shell {
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-tertiary);
}

.gb-input-shell label {
  display: block;
  margin-bottom: 6px;
  font-size: var(--font-size-base);
  font-weight: 700;
}

.gb-input-shell input {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 8px 12px;
  background: var(--bg-secondary);
  color: var(--text-primary);
  font: inherit;
}

.gb-input-shell small {
  display: block;
  margin-top: 6px;
  color: var(--text-secondary);
  font-size: var(--font-size-base);
}

.gb-helper-card {
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-tertiary);
}

.gb-helper-card strong {
  display: block;
  margin-bottom: 4px;
  font-size: var(--font-size-md);
}

.gb-helper-card p {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--font-size-md);
}

/* History row — card + button side-by-side */
.gb-history-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 4px;
}

.gb-history-btn {
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-primary);
  padding: 8px 14px;
  font: inherit;
  font-size: var(--font-size-base);
  font-weight: 700;
  cursor: pointer;
}

.gb-history-btn:hover {
  background: var(--bg-tertiary);
}

/* =============================================================================
   STAK-443 API Tab Redesign
   ============================================================================= */

/* Fieldset header row + inline status (API section headers) */
.fieldset-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  gap: 12px;
  flex-wrap: wrap;
}
.fieldset-status-inline {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

/* Pill override inside API fieldsets (REQ-8.1) */
.settings-fieldset .btn:not(.btn-toggle-key) {
  border-radius: var(--radius-pill);
}

/* Market beacon (live-data hero card) */
.market-beacon {
  display: flex;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid color-mix(in oklch, var(--success), transparent 60%);
  border-radius: var(--radius-lg);
  background: linear-gradient(
    135deg,
    color-mix(in oklch, var(--success), transparent 90%),
    color-mix(in oklch, var(--bg-secondary), transparent 40%)
  );
}
.market-beacon-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-lg);
  background: color-mix(in oklch, var(--success), transparent 80%);
  color: var(--success);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.market-beacon-body {
  flex: 1;
}
.market-beacon-body strong {
  font-size: var(--font-size-lg);
}
.market-beacon-body p {
  margin: 4px 0 6px;
  font-size: var(--font-size-md);
  color: var(--text-secondary);
}
.provider-attribution {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  font-style: italic;
}
.provider-attribution a {
  color: var(--primary);
}

/* Spot provider accordion */
.spot-accordion {
  margin-top: 8px;
}
.spot-accordion-panel {
  display: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-tertiary);
  padding: 12px 14px;
}
.spot-accordion-panel.active {
  display: block;
}

.spot-panel-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.spot-panel-info {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.spot-panel-info strong {
  font-size: var(--font-size-lg);
}
.spot-panel-meta {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}
.spot-panel-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.spot-panel-footer {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
  font-size: var(--font-size-sm);
}
.spot-panel-footer .disclaimer {
  color: var(--warning);
  font-style: italic;
}

.optional-key-details {
  margin: 0.5rem 0;
}
.optional-key-details summary {
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--text-secondary);
  padding: 0.25rem 0;
}
.optional-key-details summary:hover {
  color: var(--text-primary);
}

/* Provider field grid — multi-column for API key + options */
.provider-field-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: 1fr;
  margin-top: 10px;
}
@media (min-width: 640px) {
  .provider-field-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.provider-field {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-tertiary);
}
.provider-field select,
.provider-field input {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 6px 10px;
  background: var(--bg-secondary);
  color: var(--text-primary);
  font: inherit;
}
.inline-field-group {
  display: flex;
  gap: 6px;
  align-items: stretch;
}
.inline-field-group select {
  flex: 1;
}

/* Manual (override) grid */
.manual-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, 1fr);
  margin-top: 10px;
}
@media (min-width: 720px) {
  .manual-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* API-tab action button — outlined, compact (REQ-8.2 visual QA) */
.api-action-btn {
  background: transparent;
  color: var(--primary);
  border: 1px solid var(--primary);
  padding: 0.3rem 0.75rem;
  min-height: unset;
  font-size: var(--font-size-sm);
  font-weight: 500;
}
.api-action-btn:hover {
  background: var(--primary);
  color: var(--text-inverse);
  transform: none;
  box-shadow: none;
}
.api-action-btn:hover::before {
  left: -100%;
}
.btn-history {
  color: var(--info);
  border-color: var(--info);
}
.btn-history:hover {
  background: var(--info);
  color: var(--text-inverse);
}

/* Bulk Sync modal — narrower than Settings (1100px) */
#bulkSyncModal .modal-content {
  max-width: 680px;
}

/* Button color variants — composable with .btn / .api-action-btn */
.btn-action-primary {
  color: var(--success);
  border-color: var(--success);
}
.btn-action-primary:hover {
  background: var(--success);
  color: var(--surface-alt, #fff);
}
.btn-action-neutral {
  color: var(--text-secondary);
  border-color: var(--border);
}
.btn-action-neutral:hover {
  background: var(--bg-tertiary);
}

/* Catalog rows */
.catalog-row {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-tertiary);
  margin-bottom: 10px;
  overflow: hidden;
}
.catalog-row-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  gap: 12px;
  flex-wrap: wrap;
}
.catalog-row-name {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.catalog-row-name strong {
  font-size: var(--font-size-lg);
}
.catalog-row-meta {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}
.catalog-row-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.catalog-row-expand {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  border-top: 1px solid transparent;
  padding: 0 14px;
}
.catalog-row.open .catalog-row-expand {
  max-height: 500px;
  border-top-color: var(--border);
  padding: 12px 14px;
}
.catalog-row.open .chevron {
  transform: rotate(180deg);
}
.chevron {
  transition: transform 0.2s;
}
/* JS hook — no dedicated styling; inherits .btn */
.catalog-expand-btn {
  position: relative;
}
.catalog-expand-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
}

/* Bulk Sync modal — tabs + panels (modal shell reuses existing .modal system) */
.bulk-modal-tabs {
  display: flex;
  gap: 4px;
  padding: 6px 20px 0;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
}
.bulk-tab {
  border: none;
  background: transparent;
  color: var(--text-secondary);
  padding: 10px 14px;
  font: inherit;
  font-size: var(--font-size-base);
  font-weight: 600;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition:
    color 0.15s,
    border-color 0.15s;
}
.bulk-tab:hover {
  color: var(--text-primary);
}
.bulk-tab.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}
.bulk-panel {
  display: none;
}
.bulk-panel.active {
  display: block;
}

/* Overview stats */
.bulk-stat-row {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, 1fr);
  margin-bottom: 16px;
}
@media (min-width: 640px) {
  .bulk-stat-row {
    grid-template-columns: repeat(4, 1fr);
  }
}
.bulk-stat {
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-tertiary);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.bulk-stat-label {
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  font-weight: 700;
}
.bulk-stat strong {
  font-size: var(--font-size-2xl);
  color: var(--text-primary);
  line-height: 1;
  margin-top: 2px;
}
.bulk-stat small {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  margin-top: 2px;
}

/* Bulk progress + controls */
.bulk-progress {
  margin-bottom: 14px;
}
.bulk-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--success), var(--success-hover));
}
.bulk-progress-label {
  display: block;
  margin-top: 4px;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}
.bulk-controls {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.bulk-details {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-tertiary);
  overflow: hidden;
}
.bulk-details summary {
  padding: 10px 14px;
  cursor: pointer;
  font-weight: 600;
  font-size: var(--font-size-base);
  color: var(--text-secondary);
  user-select: none;
}
.bulk-details summary:hover {
  color: var(--text-primary);
}
.bulk-details[open] summary {
  border-bottom: 1px solid var(--border);
}

/* Bulk details table */
.bulk-table-wrap {
  max-height: 200px;
  overflow-y: auto;
}
.bulk-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
}
.bulk-table th,
.bulk-table td {
  padding: 6px 10px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}
.bulk-table th {
  background: var(--bg-secondary);
  font-weight: 600;
  color: var(--text-secondary);
  position: sticky;
  top: 0;
}
.bulk-table tbody tr:last-child td {
  border-bottom: 0;
}

/* Bulk fields tab */
.bulk-field-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 560px) {
  .bulk-field-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 780px) {
  .bulk-field-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
.bulk-field-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-tertiary);
  font-size: var(--font-size-base);
  cursor: pointer;
  transition: border-color 0.15s;
}
.bulk-field-checkbox:hover {
  border-color: var(--border-hover);
}

/* Blacklist tab */
.blacklist-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
  padding: 12px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-lg);
  min-height: 56px;
  background: rgba(0, 0, 0, 0.1);
}
.blacklist-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 4px 4px 10px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  font-size: var(--font-size-sm);
}
.blacklist-chip button {
  background: transparent;
  border: none;
  color: var(--text-muted);
  width: 20px;
  height: 20px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  font-size: var(--font-size-lg);
  line-height: 1;
  padding: 0;
}
.blacklist-chip button:hover {
  background: color-mix(in oklch, var(--danger), transparent 80%);
  color: color-mix(in oklch, var(--danger), var(--text-inverse) 50%);
}

/* Activity tab */
.bulk-activity-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.bulk-log {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-tertiary);
  max-height: 340px;
  overflow-y: auto;
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
}
.bulk-log-line {
  display: flex;
  gap: 12px;
  padding: 6px 12px;
  border-bottom: 1px solid color-mix(in oklch, var(--border), transparent 60%);
  align-items: baseline;
}
.bulk-log-line:last-child {
  border-bottom: 0;
}
.bulk-log-line time {
  color: var(--text-muted);
  flex-shrink: 0;
  width: 64px;
}
.bulk-log-line.ok span {
  color: var(--text-secondary);
}
.bulk-log-line.warn span {
  color: var(--warning);
}
.bulk-log-line.err span {
  color: var(--danger);
}
.bulk-log-line.ok::before,
.bulk-log-line.warn::before,
.bulk-log-line.err::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-right: -4px;
  flex-shrink: 0;
  align-self: center;
}
.bulk-log-line.ok::before {
  background: var(--success);
}
.bulk-log-line.warn::before {
  background: var(--warning);
}
.bulk-log-line.err::before {
  background: var(--danger);
}

/* Standalone usage bar (scoped to catalog expand — kept distinct from .api-usage .usage-bar) */
.catalog-row-expand .usage-bar,
.bulk-modal-body .usage-bar {
  position: relative;
  height: 20px;
  background: var(--bg-secondary);
  border-radius: var(--radius-pill);
  overflow: hidden;
  border: 1px solid var(--border);
  margin-top: 4px;
}
.usage-bar-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: linear-gradient(90deg, var(--success), var(--success-hover));
}
.usage-bar-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-xs);
  color: var(--text-inverse);
  font-weight: 600;
}

/* API-tab help links — no default blue underline */
.gb-input-shell a,
.provider-attribution a {
  color: var(--primary);
  text-decoration: none;
  border-bottom: 1px dashed var(--primary);
  transition:
    color 0.15s,
    border-color 0.15s;
}
.gb-input-shell a:hover,
.provider-attribution a:hover {
  color: var(--primary-hover);
  border-bottom-style: solid;
}

/* Show/hide toggle — square, corners match input field */
.btn-toggle-key {
  background: transparent;
  border: 1px solid var(--primary);
  color: var(--primary);
  padding: 0.35rem 0.5rem;
  min-height: unset;
  font-size: 0;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-lg);
}
.btn-toggle-key svg {
  width: 16px;
  height: 16px;
}
.btn-toggle-key:hover {
  background: var(--primary);
  color: var(--text-inverse);
  transform: none;
  box-shadow: none;
}
.btn-toggle-key:hover::before {
  left: -100%;
}

/* Auto-refresh row — sits below metal checkboxes on same axis */
.auto-refresh-row {
  margin-top: var(--spacing);
  padding-top: var(--spacing);
  border-top: 1px dashed var(--border);
}
.auto-refresh-hint {
  display: block;
  margin-top: 2px;
  margin-left: calc(var(--spacing-xs) + 18px);
}

/* Usage bar empty state */
.usage-bar-label.empty {
  color: var(--text-muted);
  font-weight: 400;
  font-size: var(--font-size-xs);
}

/* end STAK-443 */

/* =============================================================================
   SETTINGS CHANGE LOG PANEL
   ============================================================================= */

.settings-changelog-actions {
  margin-bottom: var(--spacing);
}

.settings-changelog-actions .btn,
.settings-pricehistory-controls .btn,
.settings-log-panel .btn.secondary {
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-primary);
  padding: 0.4rem 1rem;
  font-size: var(--font-size-base);
  font-weight: 600;
  min-height: auto;
}

.settings-changelog-actions .btn:hover,
.settings-pricehistory-controls .btn:hover,
.settings-log-panel .btn.secondary:hover {
  background: var(--bg-tertiary);
  border-color: var(--primary);
}

.settings-changelog-wrap {
  overflow-y: auto;
  max-height: 55vh;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

#settingsChangeLogTable {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
}

#settingsChangeLogTable thead {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--bg-secondary, var(--bg));
}

#settingsChangeLogTable th {
  padding: 0.35rem 0.5rem;
  text-align: left;
  font-weight: 600;
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  border-bottom: 2px solid var(--border);
  white-space: nowrap;
}

#settingsChangeLogTable td {
  padding: 0.3rem 0.5rem;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
}

#settingsChangeLogTable tr {
  cursor: pointer;
  transition: background 0.1s;
}

#settingsChangeLogTable tbody tr:hover {
  background: var(--hover-bg, rgba(0, 0, 0, 0.03));
}

#settingsChangeLogTable .action-btn {
  font-size: var(--font-size-xs);
  padding: 0.15rem 0.45rem;
}

/* Log sub-tabs (inside Activity Log panel) */
.settings-log-tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--border);
  margin: 1rem 0 0 0;
}

.settings-log-tab {
  padding: 0.5rem 1rem;
  border: none;
  background: none;
  color: var(--text-secondary);
  font-size: var(--font-size-base);
  font-weight: 500;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition:
    color 0.15s,
    border-color 0.15s;
}

.settings-log-tab:hover {
  color: var(--text-primary);
}

.settings-log-tab.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
  font-weight: 600;
}

.settings-log-panel {
  padding-top: 1rem;
}

/* Price history filter + clear row */
.settings-pricehistory-controls {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: var(--spacing);
}

.settings-filter-input {
  flex: 1;
  max-width: 280px;
  padding: 0.35rem 0.6rem;
  font-size: var(--font-size-base);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text-primary);
  outline: none;
  transition: border-color 0.15s;
}

.settings-filter-input:focus {
  border-color: var(--primary);
}

/* Shared table styles for all log sub-tab tables */
#settingsSpotHistoryTable,
#settingsCatalogHistoryTable,
#settingsPriceHistoryTable,
#settingsLbmaHistoryTable,
#settingsCloudActivityTable {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
}

#settingsSpotHistoryTable thead,
#settingsCatalogHistoryTable thead,
#settingsPriceHistoryTable thead,
#settingsLbmaHistoryTable thead,
#settingsCloudActivityTable thead {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--bg-secondary, var(--bg));
}

#settingsSpotHistoryTable th,
#settingsCatalogHistoryTable th,
#settingsPriceHistoryTable th,
#settingsLbmaHistoryTable th,
#settingsCloudActivityTable th {
  padding: 0.35rem 0.5rem;
  text-align: left;
  font-weight: 600;
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  border-bottom: 2px solid var(--border);
  white-space: nowrap;
}

#settingsSpotHistoryTable td,
#settingsCatalogHistoryTable td,
#settingsPriceHistoryTable td,
#settingsLbmaHistoryTable td,
#settingsCloudActivityTable td {
  padding: 0.3rem 0.5rem;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
}

/* Empty-state message row */
.settings-log-empty td {
  text-align: center;
  color: var(--text-secondary);
  padding: 2rem 0.5rem;
  font-style: italic;
}

/* =============================================================================
   BULK EDIT MODAL
   ============================================================================= */

.bulk-edit-content {
  width: 95vw;
  max-width: 1400px;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  /* STRK-91 C.5: the default `.modal-content` modalSlideIn animation runs a
     `transform: scale(0.95)`; mid-animation bounding rects are 5% smaller
     than computed dimensions, which breaks WCAG 2.5.8 24x24 visual-size
     checks for the bulk-edit checkboxes. The bulk editor is a large/full-
     screen modal where the slide-and-scale entrance adds little. Skip it. */
  animation: none;
}

.bulk-edit-content .modal-header {
  background: linear-gradient(135deg, var(--primary), var(--primary-hover));
  color: var(--text-inverse);
  padding: var(--spacing) var(--spacing-xl);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  flex-shrink: 0;
}

.bulk-edit-content .modal-header h2 {
  margin: 0;
  color: var(--text-inverse);
  text-align: center;
}

.bulk-edit-body {
  display: flex;
  gap: 1.5rem;
  overflow: hidden;
  padding: var(--spacing);
  flex: 1;
  min-height: 0;
}

.bulk-edit-fields {
  width: 300px;
  flex-shrink: 0;
  overflow-y: auto;
  max-height: 70vh;
  padding-right: var(--spacing);
  border-right: 1px solid var(--border);
}

.bulk-edit-fields h3 {
  margin: 0 0 var(--spacing) 0;
  font-size: var(--font-size-lg);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
}

/* STRK-91 C.4: collapsible field-panel <details>/<summary>.
   Desktop default: forced open via the JS matchMedia breakpoint handler so the
   summary acts as a section header. Mobile: collapses to free vertical space
   for the toolbar/table/footer stack. */
.bulk-edit-fields-details {
  display: block;
}
.bulk-edit-fields-summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--spacing-sm);
  margin: 0 0 var(--spacing) 0;
  padding: 0.35rem 0.25rem;
  cursor: pointer;
  font-size: var(--font-size-lg);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
  list-style: none;
  border-radius: var(--radius);
}
.bulk-edit-fields-summary::-webkit-details-marker {
  display: none;
}
.bulk-edit-fields-summary:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  box-shadow: 0 0 0 3px var(--focus-ring);
}
.bulk-edit-fields-summary-count {
  font-size: var(--font-size-sm);
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
  color: var(--text-primary);
  padding: 0.1rem 0.5rem;
  border-radius: var(--radius);
  background: var(--bg-tertiary, var(--bg));
  border: 1px solid var(--border);
}
.bulk-edit-fields-hint {
  font-size: 0.75rem;
  color: var(--text-secondary);
  margin: 0 0 0.75rem 0;
}
.bulk-edit-fields-content {
  display: block;
}

.bulk-edit-field-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  margin-bottom: 0.5rem;
  padding: 0.35rem 0.5rem;
  border-radius: var(--radius);
  transition: background 0.15s;
}

.bulk-edit-field-row:hover {
  background: var(--hover-bg, rgba(0, 0, 0, 0.03));
}

.bulk-edit-field-row input[type="checkbox"] {
  /* STRK-91 C.5: WCAG 2.5.8 minimum 24x24 target visual size. The base
     `input` rule injects border+padding under universal border-box; zero them
     so 24x24 is the real painted size. */
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  padding: 0;
  border: 0;
  flex-shrink: 0;
  cursor: pointer;
}

.bulk-edit-field-row label {
  flex-shrink: 0;
  width: 90px;
  margin-bottom: 0;
  font-size: var(--font-size-sm);
  font-weight: 500;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bulk-edit-field-row .field-input {
  flex: 1;
  width: auto;
  min-width: 0;
  padding: 0.25rem 0.4rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: var(--font-size-sm);
  background: var(--bg-primary);
  color: var(--text-primary);
  transition:
    opacity 0.15s,
    border-color 0.15s;
}

.bulk-edit-field-row .field-input:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.bulk-edit-field-row .field-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--focus-ring);
}

.bulk-edit-field-row textarea.field-input {
  resize: vertical;
  min-height: 2.4rem;
}

.bulk-edit-items {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.bulk-edit-toolbar {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding-bottom: var(--spacing);
  flex-shrink: 0;
  flex-wrap: wrap;
}

.bulk-edit-toolbar input[type="search"] {
  flex: 1;
  min-width: 150px;
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: var(--font-size-md);
  background: var(--bg-primary);
  color: var(--text-primary);
}

.bulk-edit-toolbar input[type="search"]:focus {
  outline: none;
  border-color: var(--primary);
}

.bulk-edit-toolbar .btn {
  font-size: var(--font-size-sm);
  padding: 0.35rem 0.7rem;
  white-space: nowrap;
}

.bulk-edit-count-badge {
  font-size: var(--font-size-sm);
  font-weight: 600;
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-pill);
  background: var(--primary);
  color: var(--text-inverse);
  white-space: nowrap;
}

.bulk-edit-table-wrap {
  overflow-x: auto;
  overflow-y: auto;
  flex: 1;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  -webkit-overflow-scrolling: touch;
}

.bulk-edit-table {
  width: max-content;
  min-width: 100%;
  table-layout: auto;
  /* STRK-91 C.5: separate + border-spacing 0 required for position: sticky on
     th/td cells (the collapsed border model disables independent positioning).
     Mirrors the #inventoryTable pattern. */
  border-collapse: separate;
  border-spacing: 0;
  /* The global `table { overflow: hidden }` rule turns the table into the
     nearest scrolling ancestor for sticky cells (sticky needs an overflow
     scroll/auto/visible chain). Reset to visible so #bulkEditTableWrap is
     the sticky-scrolling container instead. */
  overflow: visible;
  font-size: var(--font-size-base);
}

.bulk-edit-table thead {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--bg-secondary);
}

/* STRK-91 C.5: sticky identity region — cb (checkbox), img (thumbnail), and
   name columns stay pinned to the left while data columns scroll.
   Stable `data-column` anchors are emitted by buildBulkItemRow() and the
   header builder so generic td:nth-child selectors are not needed (avoids
   sticking pinned colSpan rows).
   Offsets: cb=0, img=44px (cb width), name=120px (cb 44 + img 76). */
.bulk-edit-table thead th[data-column="cb"],
.bulk-edit-table tbody tr[data-serial] > td[data-column="cb"] {
  position: sticky;
  left: 0;
  width: 44px;
  min-width: 44px;
  max-width: 44px;
  background: var(--bg-primary);
  /* Pseudo-element 44x44 hit-area target needs to escape the parent
     td { overflow: hidden } clip — set overflow visible on the sticky
     identity cells so ::before can extend without being chopped. */
  overflow: visible;
}
.bulk-edit-table thead th[data-column="img"],
.bulk-edit-table tbody tr[data-serial] > td[data-column="img"] {
  position: sticky;
  left: 44px;
  width: 76px;
  min-width: 76px;
  max-width: 76px;
  background: var(--bg-primary);
  overflow: visible;
}
.bulk-edit-table thead th[data-column="name"],
.bulk-edit-table tbody tr[data-serial] > td[data-column="name"] {
  position: sticky;
  left: 120px;
  min-width: 9rem;
  background: var(--bg-primary);
  /* Theme-safe right-edge divider marks the sticky boundary in all four
     themes (light, dark, slate, sepia) — replaces a potentially-faint
     shadow with a crisp 1px border. */
  border-right: 1px solid var(--border);
}

/* Three-tier z-index per CLAUDE.md "CSS sticky columns — required setup":
   sticky thead corners (sticky-left + sticky-top) sit above the sticky thead
   strip; sticky body cells sit above other body cells but below thead. */
.bulk-edit-table thead th[data-column="cb"],
.bulk-edit-table thead th[data-column="img"],
.bulk-edit-table thead th[data-column="name"] {
  z-index: 3;
}
.bulk-edit-table tbody tr[data-serial] > td[data-column="cb"],
.bulk-edit-table tbody tr[data-serial] > td[data-column="img"],
.bulk-edit-table tbody tr[data-serial] > td[data-column="name"] {
  z-index: 1;
}

/* Sticky cell background must match the row state — without this the row
   hover/selected/pinned highlights would be hidden behind the default bg. */
.bulk-edit-table tbody tr[data-serial]:hover > td[data-column="cb"],
.bulk-edit-table tbody tr[data-serial]:hover > td[data-column="img"],
.bulk-edit-table tbody tr[data-serial]:hover > td[data-column="name"] {
  background: var(--bg-secondary);
}
.bulk-edit-table tbody tr.bulk-edit-selected > td[data-column="cb"],
.bulk-edit-table tbody tr.bulk-edit-selected > td[data-column="img"],
.bulk-edit-table tbody tr.bulk-edit-selected > td[data-column="name"] {
  background: color-mix(in srgb, var(--primary) 8%, var(--bg-primary));
}
:is([data-theme="dark"], [data-theme="slate"])
  .bulk-edit-table
  tbody
  tr.bulk-edit-selected
  > td[data-column="cb"],
:is([data-theme="dark"], [data-theme="slate"])
  .bulk-edit-table
  tbody
  tr.bulk-edit-selected
  > td[data-column="img"],
:is([data-theme="dark"], [data-theme="slate"])
  .bulk-edit-table
  tbody
  tr.bulk-edit-selected
  > td[data-column="name"] {
  background: color-mix(in srgb, var(--primary) 18%, var(--bg-primary));
}

.bulk-edit-table th {
  padding: 0.5rem 0.6rem;
  text-align: left;
  font-weight: 600;
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  border-bottom: 2px solid var(--border);
  white-space: nowrap;
  min-width: 7rem;
}

.bulk-edit-table input[type="checkbox"] {
  /* STRK-91 C.5: WCAG 2.5.8 minimum 24x24 target visual size. The base
     `input { border: 2px solid; padding: 0.75rem }` rule plus universal
     `box-sizing: border-box` would shrink the inner glyph below 24px —
     zero the padding/border so 24x24 is the real painted size. */
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  padding: 0;
  border: 0;
  cursor: pointer;
}

.bulk-edit-table td {
  padding: 0.4rem 0.6rem;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
  min-width: 7rem;
}

.bulk-edit-table th:first-child,
.bulk-edit-table td:first-child {
  min-width: 2.5rem;
}

.bulk-edit-table tr {
  cursor: pointer;
  transition: background 0.1s;
}

.bulk-edit-table tbody tr:hover {
  background: var(--hover-bg, rgba(0, 0, 0, 0.03));
}

.bulk-edit-selected {
  background: color-mix(in srgb, var(--primary) 8%, transparent) !important;
}

:is([data-theme="dark"], [data-theme="slate"]) .bulk-edit-selected {
  background: color-mix(in srgb, var(--primary) 18%, transparent) !important;
}

/* Pinned section — selected items not matching current search */
.bulk-edit-pinned-header td {
  background: var(--bg-secondary);
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  padding: 0.35rem 0.75rem;
  cursor: default;
}

.bulk-edit-pinned-header:hover {
  background: var(--bg-secondary) !important;
}

.bulk-edit-pinned {
  background: color-mix(in srgb, var(--primary) 4%, transparent);
}

:is([data-theme="dark"], [data-theme="slate"]) .bulk-edit-pinned {
  background: color-mix(in srgb, var(--primary) 7%, transparent);
}

[data-theme="sepia"] .bulk-edit-pinned {
  background: color-mix(in srgb, var(--primary) 5%, transparent);
}

.bulk-pin-icon {
  display: inline-flex;
  align-items: center;
  margin-left: 4px;
  color: var(--text-muted);
  vertical-align: middle;
}

.bulk-pin-icon svg {
  width: 10px;
  height: 10px;
}

.bulk-edit-pinned.bulk-edit-selected {
  background: color-mix(in srgb, var(--primary) 12%, transparent) !important;
}

:is([data-theme="dark"], [data-theme="slate"]) .bulk-edit-pinned.bulk-edit-selected {
  background: color-mix(in srgb, var(--primary) 22%, transparent) !important;
}

.bulk-edit-pinned-divider td {
  height: 2px;
  padding: 0;
  background: var(--border);
}

.bulk-edit-pinned-divider,
.bulk-edit-pinned-divider:hover {
  cursor: default;
  background: none !important;
}

.bulk-edit-footer {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: var(--spacing) var(--spacing-xl);
  border-top: 1px solid var(--border);
  flex-shrink: 0;
  flex-wrap: wrap;
}

.bulk-edit-footer .btn {
  font-size: var(--font-size-md);
  padding: 0.45rem 1rem;
}

.bulk-edit-footer .btn-danger {
  margin-left: auto;
}

.bulk-edit-numista-btn {
  background: none;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: var(--radius);
  padding: 0.35rem 0.7rem;
  font-size: var(--font-size-sm);
  transition:
    border-color 0.15s,
    color 0.15s;
}

.bulk-edit-numista-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
}

/* Sortable column headers */
.bulk-edit-table th.bulk-sortable {
  cursor: pointer;
  user-select: none;
}
.bulk-edit-table th.bulk-sortable:hover {
  color: var(--text-primary);
}
.bulk-edit-table th.bulk-sortable::after {
  content: " ⇅";
  opacity: 0.35;
  font-size: var(--font-size-xs);
}
.bulk-edit-table th.sort-asc::after {
  content: " ↑";
  opacity: 1;
}
.bulk-edit-table th.sort-desc::after {
  content: " ↓";
  opacity: 1;
}

/* Image thumbnail column */
.bulk-img-cell {
  width: 76px;
  min-width: 76px;
  padding: 0.15rem 0.3rem !important;
}
/* Obverse + reverse sit side by side inside the cell */
.bulk-img-cell > img,
.bulk-img-cell > span {
  display: inline-block;
  vertical-align: middle;
  margin-right: 2px;
}
.bulk-img-cell > img:last-child,
.bulk-img-cell > span:last-child {
  margin-right: 0;
}
.bulk-img-thumb {
  width: 32px;
  height: 32px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  display: inline-block;
  vertical-align: middle;
}
.bulk-img-placeholder {
  display: inline-block;
  vertical-align: middle;
  width: 32px;
  height: 32px;
  background: var(--border);
  border-radius: var(--radius-sm);
}

/* Per-row image upload popover */
.bulk-img-popover {
  position: fixed;
  z-index: 9999;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--spacing);
  width: 260px;
}
.bulk-img-popover-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spacing-sm);
}
.bulk-img-popover-title {
  font-size: var(--font-size-base);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
}
.bulk-img-popover-close {
  background: none;
  border: none;
  font-size: var(--font-size-xl);
  color: var(--text-secondary);
  cursor: pointer;
  line-height: 1;
  padding: 0 0.2rem;
}
.bulk-img-popover-close:hover {
  color: var(--text-primary);
}
.bulk-img-popover-sides {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-sm);
}
.bulk-img-popover-side {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.bulk-img-popover-label {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.bulk-img-popover-preview {
  width: 100%;
  aspect-ratio: 1;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bulk-img-popover-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.bulk-img-popover-actions {
  display: flex;
  gap: 0.25rem;
  flex-wrap: wrap;
}
.bulk-img-popover-actions .btn {
  flex: 1;
  font-size: var(--font-size-sm);
  padding: 0.2rem 0.3rem;
  white-space: nowrap;
}

/* Responsive: stack on small screens */
@media (max-width: 768px) {
  .bulk-edit-body {
    flex-direction: column;
  }
  .bulk-edit-fields {
    width: 100%;
    max-height: 200px;
    border-right: none;
    border-bottom: 1px solid var(--border);
    padding-right: 0;
    padding-bottom: var(--spacing);
  }
  /* STRK-91 C.4: when collapsed on mobile, the panel only shows its summary
     (no inner content), so let it shrink instead of holding the 200px slot. */
  .bulk-edit-fields:has(.bulk-edit-fields-details:not([open])) {
    max-height: none;
    padding-bottom: 0;
    border-bottom: 1px solid var(--border);
  }
  .bulk-edit-fields-details:not([open]) {
    border-bottom: none;
  }
  .bulk-edit-content {
    width: 98vw;
    max-height: 95vh;
  }
}

/* =============================================================================
   ADDITIONAL SMALL-VIEWPORT FIXES  (STACK-38)
   Targets zoom-induced short viewports, filter controls, and form grids.
   ============================================================================= */

/* Short viewport (e.g. 300% zoom on 1080p → ~360px height) */
@media (max-height: 500px) {
  .portal-scroll {
    max-height: 50vh;
  }
}

/* Filter controls + form grids at narrow widths */
@media (max-width: 640px) {
  .filter-controls {
    flex-wrap: wrap;
    gap: var(--spacing-xs);
    justify-content: center;
  }

  .grid-2,
  .grid-3,
  .grid-purity-row {
    grid-template-columns: 1fr;
  }
}

/* =============================================================================
   MOBILE-OPTIMIZED MODALS  (STACK-70)
   Full-screen modals, touch-sized inputs, hidden charts, landscape card view.
   ============================================================================= */

/* --- Phase 1: Full-screen modal base ------------------------------------ */
@media (max-width: 768px) {
  .modal {
    padding: 0;
  }

  .modal-content {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    margin: 0;
    border-radius: 0;
    animation: none;
  }

  /* Specificity overrides for modals that set their own width */
  .modal-content.settings-modal-content,
  #itemModal .modal-content,
  #detailsModal .modal-content,
  .bulk-edit-content,
  .about-modal-content {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    margin: 0;
    border-radius: 0;
  }

  /* Remove header border-radius on fullscreen modals */
  .modal-content .modal-header,
  .about-modal-header,
  .bulk-edit-content .modal-header {
    border-radius: 0;
  }

  /* STAK-578: clear iOS notch / status bar / landscape side-notch on
     in-scope fullscreen modal headers. Static fallbacks are PER-MODAL so
     non-notched devices keep their existing padding exactly (R5.2):
     - #itemModal top: inherits desktop var(--spacing); left/right inherits
       desktop var(--spacing-xl) (see line 9152-9158).
     - #viewItemModal top: overrides to var(--spacing-sm) in its own mobile
       rule (line 6057-6060); left/right matches that rule's var(--spacing).
     Footers/action-bars cover all three axes since commit 7def3d3f; headers
     now match. */
  #itemModal .modal-content .modal-header {
    padding-top: max(var(--spacing), env(safe-area-inset-top));
    padding-left: max(var(--spacing-xl), env(safe-area-inset-left));
    padding-right: max(var(--spacing-xl), env(safe-area-inset-right));
  }
  #viewItemModal .modal-header {
    padding-top: max(var(--spacing-sm), env(safe-area-inset-top));
    padding-left: max(var(--spacing), env(safe-area-inset-left));
    padding-right: max(var(--spacing), env(safe-area-inset-right));
  }

  .modal-content::before {
    border-radius: 0;
  }

  /* Exempt small utility modals — keep as centered popups */
  #apiInfoModal .modal-content,
  #notesModal .modal-content,
  #notesViewModal .modal-content,
  #storageOptionsModal .modal-content,
  #cloudSyncModal .modal-content {
    width: 95vw !important;
    max-width: 400px !important;
    height: auto;
    max-height: 90vh;
    max-height: 90dvh;
    border-radius: var(--radius-lg);
  }

  /* --- Phase 3: Item modal — touch-friendly inputs & stacked actions ---- */
  #itemModal .modal-content {
    display: flex;
    flex-direction: column;
  }
  #itemModal .modal-body {
    flex: 1;
    overflow-y: auto;
    padding: var(--spacing);
    -webkit-overflow-scrolling: touch;
  }

  /* Touch-sized inputs: 44px min height (Apple HIG) */
  #itemModal input,
  #itemModal select,
  #itemModal textarea {
    min-height: 44px;
    font-size: var(--font-size-lg);
    padding: 0.45rem 0.65rem;
  }

  #itemModal .btn {
    min-height: 44px;
    font-size: var(--font-size-md);
  }

  /* Stack action rows: Save/Cancel on top, lookup buttons below */
  .item-modal-actions {
    flex-direction: column;
    gap: var(--spacing);
    padding-top: var(--spacing);
    border-top: 1px solid var(--border);
  }
  .item-modal-actions-left {
    justify-content: center;
    order: 2;
  }
  .item-modal-actions-right {
    width: 100%;
  }
  .item-modal-actions-right .btn {
    flex: 1;
  }

  /* --- Phase 4: Details modal — hide charts, stack panels --------------- */
  .chart-canvas-container {
    display: none !important;
  }
  .chart-metric-toggle {
    display: none;
  }

  .details-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing);
  }
  .details-panel {
    padding: var(--spacing);
  }
  #detailsModal .modal-body {
    overflow-y: auto;
    flex: 1;
  }

  /* Breakdown grid: keep 2-col for compact financial data */
  .breakdown-grid {
    grid-template-columns: 1fr 1fr;
    gap: 0.125rem 0.5rem;
  }

  /* --- Phase 6: Bulk edit modal — full-screen stacking ------------------ */
  .bulk-edit-content {
    display: flex;
    flex-direction: column;
  }
  .bulk-edit-body {
    flex-direction: column;
    flex: 1;
    overflow-y: auto;
  }
  .bulk-edit-fields {
    width: 100%;
    max-height: none;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
  /* STRK-91 C.4: collapsed mobile panel shrinks to its summary so the table
     and toolbar can occupy remaining height without overlap. */
  .bulk-edit-fields:has(.bulk-edit-fields-details:not([open])) {
    flex: 0 0 auto;
  }
  .bulk-edit-fields input,
  .bulk-edit-fields select {
    min-height: 44px;
  }
  .bulk-edit-items {
    flex: 1;
    overflow-y: auto;
  }

  /* STRK-91 C.5: safe-area padding on the bulk-edit fullscreen modal header
     and footer — matches the STAK-578 pattern already applied to #itemModal
     and #viewItemModal headers. Closes the iOS notch / home-indicator gap. */
  .bulk-edit-content .modal-header {
    padding-top: max(var(--spacing), env(safe-area-inset-top));
    padding-left: max(var(--spacing-xl), env(safe-area-inset-left));
    padding-right: max(var(--spacing-xl), env(safe-area-inset-right));
  }
  .bulk-edit-footer {
    padding-bottom: max(var(--spacing), env(safe-area-inset-bottom));
    padding-left: max(var(--spacing-xl), env(safe-area-inset-left));
    padding-right: max(var(--spacing-xl), env(safe-area-inset-right));
  }

  /* STRK-91 C.5: 44x44 effective tap targets at <=768px without widening
     the visual checkbox. A transparent pseudo-element on the host cell/row
     gives the WCAG 2.5.5 / Apple HIG 44px touch target while the visible
     checkbox stays at its 24x24 visual size. */
  .bulk-edit-table tbody tr[data-serial] > td[data-column="cb"] {
    min-width: 44px;
    height: 44px;
    overflow: visible;
  }
  .bulk-edit-table tbody tr[data-serial] > td[data-column="cb"]::before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    pointer-events: none;
  }

  .bulk-edit-field-row {
    position: relative;
    min-height: 44px;
  }
  .bulk-edit-field-row::before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    pointer-events: none;
  }
}

/* =============================================================================
   CARD VIEW STYLES — Selectable card designs A/B/C/D (STAK-118)
   ============================================================================= */

/* Card sort bar — sort dropdown + direction toggle + card style toggle (STAK-131) */
.card-sort-bar {
  display: none;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-sm);
  padding: 0.4rem 0.75rem;
  margin: 0 auto 0.5rem;
  max-width: 1400px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.card-sort-left,
.card-sort-right {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.card-sort-bar .control-label {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  white-space: nowrap;
}

.card-sort-bar .control-select {
  min-width: 7rem;
  font-size: var(--font-size-base);
  padding: 0.2rem 1.4rem 0.2rem 0.4rem;
}

.card-sort-dir-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  cursor: pointer;
  transition:
    background 0.15s,
    color 0.15s;
}

.card-sort-dir-btn:hover {
  background: var(--bg-secondary);
}

/* Arrow visibility based on data attribute */
.card-sort-dir-btn .sort-arrow-down {
  display: none;
}
.card-sort-dir-btn .sort-arrow-up {
  display: block;
}
.card-sort-dir-btn[data-dir="desc"] .sort-arrow-up {
  display: none;
}
.card-sort-dir-btn[data-dir="desc"] .sort-arrow-down {
  display: block;
}

/* Mobile: stack sort bar controls */
@media (max-width: 480px) {
  .card-sort-bar {
    justify-content: center;
    gap: var(--spacing-xs);
    padding: 0.35rem 0.5rem;
  }
  .card-sort-left,
  .card-sort-right {
    flex: 1 1 100%;
    justify-content: center;
  }
}

/* Container — hidden by default, JS toggles display */
.card-view-grid {
  display: none;
  flex-wrap: wrap;
  gap: 0.65rem;
  padding: 0 0.25rem;
  max-width: 1400px;
  margin: 0 auto;
}

/* Single column on mobile */
.card-view-grid > article {
  flex: 1 1 100%;
  min-width: 0;
}

/* 2-column grid on tablets */
@media (min-width: 640px) {
  .card-view-grid > article {
    flex: 0 1 calc(50% - 0.35rem);
    max-width: calc(50% - 0.35rem);
  }
}

/* 3-column grid on desktop */
@media (min-width: 1100px) {
  .card-view-grid > article {
    flex: 0 1 calc(33.333% - 0.45rem);
    max-width: calc(33.333% - 0.45rem);
  }
}

/* --- Shared card primitives --- */
.cv-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.1rem 0.45rem;
  border-radius: var(--radius-pill);
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.cv-chip-year {
  background: var(--bg-tertiary);
  color: var(--text-muted);
}
.cv-chip-grade {
  background: var(--primary);
  color: var(--text-inverse);
}
.cv-chip-qty {
  background: var(--bg-tertiary);
  color: var(--text-muted);
}
.cv-chip-weight {
  background: var(--bg-tertiary);
  color: var(--text-muted);
}
.cv-chip-tags {
  background: var(--info);
  color: var(--text-inverse);
  opacity: 0.85;
}
.cv-chip-type {
  font-size: var(--font-size-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.cv-chip-type.coin {
  background: var(--type-coin-bg, #b85f00);
  color: var(--type-coin-text, #fff);
}
.cv-chip-type.bar {
  background: var(--type-bar-bg, #946d00);
  color: var(--type-bar-text, #fff);
}
.cv-chip-type.round {
  background: var(--type-round-bg);
  color: var(--type-round-text, #fff);
}
.cv-chip-type.goldback {
  background: var(--type-goldback-bg);
  color: var(--type-goldback-text, #fff);
}
.cv-chip-type.constitutional {
  background: var(--type-constitutional-bg);
  color: var(--type-constitutional-text);
}
.cv-chip-type.silverback {
  background: var(--type-silverback-bg);
  color: var(--type-silverback-text, #fff);
}
.cv-chip-type.aurum {
  background: var(--type-aurum-bg);
  color: var(--type-aurum-text, #fff);
}
.cv-chip-type.set {
  background: var(--type-set-bg);
  color: var(--type-set-text, #fff);
}
.cv-chip-type.other {
  background: var(--type-other-bg);
  color: var(--type-other-text, #fff);
}
.cv-chip-type.note {
  background: var(--type-note-bg);
  color: var(--type-note-text, #fff);
}
.cv-chip-metal {
  font-weight: 600;
  text-transform: capitalize;
  background: var(--bg-tertiary);
  color: var(--text-muted);
}
.cv-chip-metal.gold {
  background: color-mix(in oklch, var(--gold) 18%, var(--bg-tertiary));
  color: var(--gold);
}
.cv-chip-metal.silver {
  background: color-mix(in oklch, var(--silver) 18%, var(--bg-tertiary));
  color: var(--silver);
}
.cv-chip-metal.platinum {
  background: color-mix(in oklch, var(--platinum) 18%, var(--bg-tertiary));
  color: var(--platinum);
}
.cv-chip-metal.palladium {
  background: color-mix(in oklch, var(--palladium) 18%, var(--bg-tertiary));
  color: var(--palladium);
}
.cv-chip-metal.copper {
  background: color-mix(in oklch, var(--copper) 18%, var(--bg-tertiary));
  color: var(--copper);
}
.cv-chip-attach {
  background: color-mix(in oklch, var(--primary) 14%, var(--bg-tertiary));
  color: var(--primary);
  border: 1px solid color-mix(in oklch, var(--primary) 25%, var(--border));
  gap: 0.25rem;
  cursor: pointer;
}
.cv-chip-attach svg {
  width: 10px;
  height: 10px;
}

.cv-gain {
  color: var(--success);
}
.cv-loss {
  color: var(--danger);
}

.cv-images-row {
  display: flex;
  gap: var(--spacing-md);
  margin-bottom: 0.5rem;
}
.cv-images-center {
  justify-content: center;
}
.cv-chips-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}
.cv-chips-center {
  justify-content: center;
}
.cv-item-name {
  font-size: var(--font-size-md);
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: 0.35rem;
  letter-spacing: -0.01em;
}
.cv-item-name-truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cv-arrow {
  margin: 0 0.2rem;
  opacity: 0.5;
}

/* Metal accent colors */
.metal-silver {
  --metal-color: var(--silver);
}
.metal-gold {
  --metal-color: var(--gold);
}
.metal-platinum {
  --metal-color: var(--platinum);
}
.metal-palladium {
  --metal-color: var(--palladium);
}
.metal-copper {
  --metal-color: var(--copper);
}

/* Coin image in cards */
.card-view-grid .coin-img {
  border-radius: 50%;
  object-fit: cover;
  background: var(--bg-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}
.card-view-grid .coin-img.bar-shape {
  background: transparent;
  border-radius: var(--radius);
}

/* No-image placeholder — metal-tinted glass orb / rect */
.cv-no-image {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background:
    radial-gradient(
      ellipse at 35% 30%,
      rgba(255, 255, 255, 0.25) 0%,
      rgba(255, 255, 255, 0.05) 40%,
      transparent 70%
    ),
    linear-gradient(145deg, var(--metal-color, var(--bg-tertiary)), var(--bg-tertiary));
  box-shadow:
    inset 0 1px 2px rgba(255, 255, 255, 0.18),
    inset 0 -2px 4px rgba(0, 0, 0, 0.15);
  opacity: 0.65;
}
/* Metal-specific tints inherited from parent .metal-* class */
.metal-silver .cv-no-image {
  --metal-color: #c0c0c0;
}
.metal-gold .cv-no-image {
  --metal-color: #ffd700;
}
.metal-platinum .cv-no-image {
  --metal-color: #e5e4e2;
}
.metal-palladium .cv-no-image {
  --metal-color: #ced0dd;
}
.metal-copper .cv-no-image {
  --metal-color: #b87333;
}

/* Table thumbnails — rect items use contain */
.table-thumb.table-thumb-rect {
  object-fit: contain;
}

/* Table placeholder — same glass effect */
.table-thumb-placeholder.table-no-image {
  background:
    radial-gradient(
      ellipse at 35% 30%,
      rgba(255, 255, 255, 0.25) 0%,
      rgba(255, 255, 255, 0.05) 40%,
      transparent 70%
    ),
    linear-gradient(145deg, var(--metal-color, var(--bg-tertiary)), var(--bg-tertiary));
  box-shadow:
    inset 0 0.5px 1px rgba(255, 255, 255, 0.18),
    inset 0 -1px 2px rgba(0, 0, 0, 0.12);
  opacity: 0.55;
}

/* --- Card A: Sparkline Header --- */
.card-a {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  cursor: pointer;
  transition:
    box-shadow 0.2s,
    transform 0.15s;
  position: relative;
}
.card-a:hover {
  box-shadow: var(--shadow);
  transform: translateY(-1px);
}
.card-a:active {
  transform: scale(0.985);
  box-shadow: var(--shadow-sm);
}
.card-a .card-a-chart-wrap {
  position: relative;
  height: 150px;
  padding: 0.25rem 0.5rem 0;
}
.card-a .card-a-chart-wrap canvas {
  width: 100% !important;
  height: 100% !important;
}
.card-a .card-body {
  padding: 0.5rem 0.75rem 0.65rem;
}
.card-a .cv-chips-img-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}
.card-a .cv-chips-row {
  margin-bottom: 0;
}
.card-a .cv-images-sm {
  display: flex;
  gap: 0.25rem;
  flex-shrink: 0;
  align-items: center;
}
.card-a .cv-images-sm .coin-img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}
.card-a .cv-images-sm .coin-img.bar-shape {
  width: 44px;
  height: 44px;
  border-radius: var(--radius);
  background: transparent;
}
.card-a .cv-value-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: var(--font-size-sm);
  gap: var(--spacing-md);
}
.card-a .cv-value-journey {
  color: var(--text-muted);
  font-weight: 400;
}
.card-a .cv-value-gain {
  font-weight: 700;
  font-size: var(--font-size-base);
  white-space: nowrap;
}

/* --- Card B: Full-Bleed Overlay --- */
.card-b {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  cursor: pointer;
  transition:
    box-shadow 0.2s,
    transform 0.15s;
  position: relative;
  min-height: 160px;
}
.card-b:hover {
  box-shadow: var(--shadow);
  transform: translateY(-1px);
}
.card-b:active {
  transform: scale(0.985);
}
.card-b .sparkline-bg {
  position: absolute;
  inset: 0;
  opacity: 0.18;
  pointer-events: none;
}
:is([data-theme="dark"], [data-theme="slate"]) .card-b .sparkline-bg {
  opacity: 0.22;
}
[data-theme="sepia"] .card-b .sparkline-bg {
  opacity: 0.15;
}
.card-b .sparkline-bg svg {
  width: 100%;
  height: 100%;
}
.card-b .card-content {
  position: relative;
  z-index: 1;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.6rem;
}
.card-b .coin-img {
  width: 80px;
  height: 80px;
  border: 2px solid var(--border);
}
.card-b .coin-img.bar-shape {
  width: 80px;
  height: 80px;
  border-radius: var(--radius);
  background: transparent;
  border: none;
}
.card-b .cv-value-hero {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
}
.card-b .cv-value-detail {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
}

/* --- Card C: Split Card --- */
.card-c {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  cursor: pointer;
  transition:
    box-shadow 0.2s,
    transform 0.15s;
  display: flex;
  min-height: 120px;
}
.card-c:hover {
  box-shadow: var(--shadow);
  transform: translateY(-1px);
}
.card-c:active {
  transform: scale(0.985);
}
.card-c .cv-image-col {
  flex: 0 0 100px;
  background: var(--bg-secondary);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.5rem;
  box-shadow: inset -1px 0 3px rgba(0, 0, 0, 0.08);
}
/* Rect items in split card — constrained height */
.card-c .coin-img.bar-shape {
  width: 80px;
  height: 56px;
  border-radius: var(--radius);
  background: transparent;
}
.card-c .coin-img {
  width: 56px;
  height: 56px;
}
.card-c .cv-data-col {
  flex: 1;
  padding: 0.6rem 0.75rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.3rem;
}
.card-c .cv-item-name {
  font-size: var(--font-size-base);
}
.card-c .cv-chips-row {
  gap: 0.2rem;
}
.card-c .cv-value-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: var(--font-size-sm);
  padding-top: 0.2rem;
  border-top: 1px solid var(--border);
  margin-top: 0.15rem;
  gap: var(--spacing-md);
}
.card-c .cv-value-journey {
  color: var(--text-muted);
}
.card-c .cv-value-gain {
  font-weight: 700;
  font-size: var(--font-size-sm);
  white-space: nowrap;
}

/* =============================================================================
   ITEM PRICE HISTORY — Management UI (STAK-109)
   ============================================================================= */

/* Retail Price field history icon link */
.field-history-link {
  cursor: pointer;
  opacity: 0.5;
  font-size: var(--font-size-base);
  margin-left: 0.25rem;
  transition: opacity 0.2s ease;
  vertical-align: middle;
}
.field-history-link:hover {
  opacity: 1;
}

/* Item Price History modal stacks above the edit modal */
#itemPriceHistoryModal {
  z-index: 10000;
}

/* Hide native number-input spinners globally (design-system override) */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"] {
  -moz-appearance: textfield;
}

/* Delete button in price history tables */
.price-history-delete-btn {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 4px);
  color: var(--text-secondary, #888);
  cursor: pointer;
  font-size: var(--font-size-xl);
  line-height: 1;
  padding: 0.15rem 0.45rem;
  transition:
    color 0.2s ease,
    border-color 0.2s ease,
    background 0.2s ease;
}
.price-history-delete-btn:hover {
  color: var(--danger, #dc3545);
  border-color: var(--danger, #dc3545);
  background: rgba(220, 53, 69, 0.08);
}

/* =============================================================================
   ITEM TAGS (STAK-126) — View modal tag section, inline table chips
   ============================================================================= */

/* --- Inline table chip ---------------------------------------------------- */
.tags-inline-chip {
  display: inline-flex;
  align-items: center;
  font-size: var(--font-size-xs);
  font-weight: 500;
  padding: 0.1rem 0.3rem;
  margin-left: 0.25rem;
  border-radius: var(--radius);
  background: var(--tag-bg);
  color: var(--tag-text);
  vertical-align: middle;
  line-height: 1.2;
  white-space: nowrap;
  max-width: 14ch;
  overflow: hidden;
  text-overflow: ellipsis;
}
:is([data-theme="dark"], [data-theme="slate"]) .tags-inline-chip {
  background: var(--tag-bg);
  color: var(--tag-text);
}
[data-theme="sepia"] .tags-inline-chip {
  background: var(--tag-bg);
  color: var(--text-muted);
}

/* --- View modal tag section ----------------------------------------------- */
.view-tags-container {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}

/* --- Tag chips (view modal) ---------------------------------------------- */
.tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  font-size: var(--font-size-sm);
  font-weight: 500;
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius-pill);
  line-height: 1.3;
  white-space: nowrap;
  background: var(--tag-bg);
  color: var(--tag-text);
  border: 1px solid var(--tag-border);
}
:is([data-theme="dark"], [data-theme="slate"]) .tag-chip {
  background: color-mix(in srgb, var(--info) 12%, transparent);
  color: var(--info);
  border-color: color-mix(in srgb, var(--info) 22%, transparent);
}
[data-theme="sepia"] .tag-chip {
  background: color-mix(in srgb, var(--primary) 6%, transparent);
  color: var(--text-secondary);
  border-color: color-mix(in srgb, var(--primary) 14%, transparent);
}

/* --- Tag remove button --------------------------------------------------- */
.tag-chip-remove {
  cursor: pointer;
  font-size: var(--font-size-md);
  line-height: 1;
  opacity: 0.6;
  transition: opacity 0.15s;
  margin-left: 0.1rem;
}
.tag-chip-remove:hover,
.tag-chip-remove:focus-visible {
  opacity: 1;
}

/* --- Add tag button ------------------------------------------------------ */
.tag-add-btn {
  display: inline-flex;
  align-items: center;
  font-size: var(--font-size-sm);
  font-weight: 500;
  padding: 0.18rem 0.45rem;
  border-radius: var(--radius-pill);
  border: 1px dashed rgba(99, 102, 241, 0.35);
  background: transparent;
  color: var(--tag-text);
  cursor: pointer;
  transition:
    background 0.15s,
    border-color 0.15s;
}
.tag-add-btn:hover {
  background: color-mix(in oklch, var(--tag-text), transparent 92%);
  border-color: color-mix(in oklch, var(--tag-text), transparent 50%);
}
:is([data-theme="dark"], [data-theme="slate"]) .tag-add-btn {
  color: var(--tag-text);
  border-color: color-mix(in oklch, var(--tag-text), transparent 70%);
}
:is([data-theme="dark"], [data-theme="slate"]) .tag-add-btn:hover {
  background: color-mix(in oklch, var(--tag-text), transparent 90%);
}
[data-theme="sepia"] .tag-add-btn {
  color: var(--tag-text);
  border-color: color-mix(in oklch, var(--tag-text), transparent 70%);
}
[data-theme="sepia"] .tag-add-btn:hover {
  background: color-mix(in oklch, var(--tag-text), transparent 94%);
}

/* --- Tag input (inline) -------------------------------------------------- */
.tag-input-wrapper {
  display: inline-flex;
  position: relative;
}
.tag-input {
  font-size: var(--font-size-sm);
  padding: 0.15rem 0.4rem;
  border: 1px solid color-mix(in oklch, var(--tag-text), transparent 60%);
  border-radius: var(--radius-pill);
  outline: none;
  background: var(--bg-primary, #fff);
  color: var(--text-primary, #1f2937);
  width: 10ch;
  transition: border-color 0.15s;
}
.tag-input:focus {
  border-color: var(--tag-text);
  box-shadow: 0 0 0 2px color-mix(in oklch, var(--tag-text), transparent 85%);
}
:is([data-theme="dark"], [data-theme="slate"]) .tag-input {
  background: var(--bg-secondary, #1e1e2e);
  color: var(--text-primary);
  border-color: color-mix(in oklch, var(--tag-text), transparent 65%);
}
:is([data-theme="dark"], [data-theme="slate"]) .tag-input:focus {
  border-color: var(--tag-text);
  box-shadow: 0 0 0 2px color-mix(in oklch, var(--tag-text), transparent 85%);
}

/* --- Tag autocomplete dropdown ------------------------------------------- */
.tag-autocomplete-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 200;
  background: var(--bg-primary, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: var(--radius, 4px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  max-height: 160px;
  overflow-y: auto;
  min-width: 12ch;
  margin-top: 2px;
}
.tag-autocomplete-option {
  padding: 0.3rem 0.5rem;
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: background 0.1s;
}
.tag-autocomplete-option:hover {
  background: color-mix(in oklch, var(--tag-text), transparent 92%);
}
:is([data-theme="dark"], [data-theme="slate"]) .tag-autocomplete-dropdown {
  background: var(--bg-secondary, #1e1e2e);
  border-color: color-mix(in oklch, var(--text-inverse), transparent 90%);
}
:is([data-theme="dark"], [data-theme="slate"]) .tag-autocomplete-option:hover {
  background: color-mix(in oklch, var(--tag-text), transparent 88%);
}

/* =============================================================================
   CDN Image Export Progress + Settings Button Row
   ============================================================================= */

#imageCdnProgress {
  /* Break out of the flex button row and sit full-width below it */
  flex: 0 0 100%;
  width: 100%;
  max-width: 480px;
  margin-top: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: var(--bg-secondary, #f1f5f9);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: var(--font-size-base);
  color: var(--text-secondary);
}

#imageCdnProgress progress {
  display: block;
  width: 100%;
  height: 6px;
  margin-top: 0.25rem;
  accent-color: var(--primary);
  /* Reset native appearance so background colour shows in all browsers */
  -webkit-appearance: none;
  appearance: none;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--border);
  overflow: hidden;
}

#imageCdnProgress progress::-webkit-progress-bar {
  background: var(--border);
  border-radius: var(--radius-sm);
}

#imageCdnProgress progress::-webkit-progress-value {
  background: var(--primary);
  border-radius: var(--radius-sm);
  transition: width 0.15s ease;
}

#imageCdnProgress progress::-moz-progress-bar {
  background: var(--primary);
  border-radius: var(--radius-sm);
}

:is([data-theme="dark"], [data-theme="slate"]) #imageCdnProgress {
  background: var(--bg-secondary, #1e1e2e);
}

[data-theme="sepia"] #imageCdnProgress {
  background: var(--bg-secondary, #f5f0e8);
}

.settings-btn-row {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 0.4rem;
}

/* History table in Activity Log */
.retail-history-controls {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.retail-history-label {
  font-size: var(--font-size-md);
  font-weight: 500;
  margin: 0;
}

.retail-history-select {
  width: auto;
  max-width: 220px;
}

.retail-timeframe-tabs {
  display: flex;
  gap: 0.25rem;
}

.retail-tf-btn {
  padding: 0.2rem 0.6rem;
  font-size: var(--font-size-base);
  border: 1px solid var(--border-color, var(--bs-border-color));
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-primary);
  cursor: pointer;
  line-height: 1.4;
}

.retail-tf-btn.active {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--text-inverse);
}

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

.retail-history-table {
  width: 100%;
  font-size: var(--font-size-md);
  border-collapse: collapse;
}

.retail-history-table th,
.retail-history-table td {
  padding: 0.35rem 0.6rem;
  border-bottom: 1px solid var(--border-color-subtle, var(--bs-border-color));
  white-space: nowrap;
}

.retail-history-table td {
  max-width: unset;
  overflow: visible;
  text-overflow: clip;
}

.retail-history-table th {
  font-weight: 600;
  text-align: left;
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  color: var(--text-muted, var(--bs-secondary-color));
}

/* Retail view modal */
.retail-view-section-title {
  font-size: var(--font-size-lg);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted, var(--bs-secondary-color));
  margin: 1.25rem 0 0.5rem;
}

.retail-view-table-wrap {
  overflow-x: auto;
  margin-bottom: 1rem;
}

.retail-view-table {
  width: 100%;
  font-size: var(--font-size-md);
  border-collapse: collapse;
}

.retail-view-table th,
.retail-view-table td {
  padding: 0.35rem 0.6rem;
  border-bottom: 1px solid var(--border-color-subtle, var(--bs-border-color));
  white-space: nowrap;
}

.retail-view-table td {
  max-width: unset;
  overflow: visible;
  text-overflow: clip;
}

.retail-view-table th {
  font-weight: 600;
  text-align: left;
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  color: var(--text-muted, var(--bs-secondary-color));
}

.retail-view-chart-wrap {
  position: relative;
  height: 220px;
  margin-bottom: 1rem;
}

.retail-view-disclaimer {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border-color-subtle, var(--bs-border-color));
}

/* Retail view modal — vendor legend (replaces "Current Prices" table) */
.retail-vendor-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.25rem;
  padding: 0.5rem 0.25rem 0.75rem;
}

.retail-legend-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  text-decoration: none;
  cursor: pointer;
  font-size: var(--font-size-md);
}

.retail-legend-item:hover .retail-legend-name {
  text-decoration: underline;
}

.retail-legend-swatch {
  width: 12px;
  height: 12px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

.retail-legend-name {
  font-weight: 500;
}

.retail-legend-price {
  color: var(--text-primary);
  font-size: var(--font-size-base);
  font-variant-numeric: tabular-nums;
}

/* Retail view modal — tab toggle (pill style) */
.retail-view-tabs {
  display: flex;
  gap: 0.2rem;
  margin: 0 0 0.5rem;
  padding: 0.2rem;
  background: var(--bg-subtle, rgba(0, 0, 0, 0.06));
  border-radius: var(--radius);
}

.retail-view-tab {
  flex: 1;
  text-align: center;
  padding: 0.3rem 0.85rem;
  font-size: var(--font-size-md);
  background: transparent;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  color: var(--text-muted);
  transition:
    color 0.15s,
    background 0.15s,
    box-shadow 0.15s;
}

.retail-view-tab:hover {
  color: var(--text-primary);
}

.retail-view-tab.active {
  color: var(--text-primary);
  background: var(--bg-card, var(--bs-body-bg));
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

/* Retail view modal — intraday/history panels */
#retailViewIntradaySection,
#retailViewHistorySection {
  background: var(--bg-subtle, rgba(0, 0, 0, 0.03));
  border: 1px solid var(--border-color-subtle, var(--bs-border-color));
  border-radius: var(--radius);
  padding: 0.75rem;
}

/* Retail view modal — intraday chart */
.retail-intraday-chart-wrap {
  position: relative;
  height: 200px;
  margin-bottom: 0.75rem;
}

.retail-intraday-chart-wrap canvas {
  width: 100% !important;
  height: 100% !important;
}

/* =============================================================================
   EMPTY STATE COMPONENT
   ============================================================================= */

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 1.5rem;
  text-align: center;
  color: var(--text-secondary);
  background: var(--bg-primary);
  border-radius: var(--radius);
}

.empty-state-icon {
  width: 48px;
  height: 48px;
  margin-bottom: 1rem;
  color: var(--border-hover);
  fill: currentcolor;
}

.empty-state h3 {
  margin: 0 0 0.5rem;
  font-size: var(--font-size-xl);
  font-weight: 600;
  color: var(--text-primary);
}

.empty-state p {
  margin: 0 0 1.5rem;
  font-size: var(--font-size-lg);
  max-width: 400px;
  line-height: 1.5;
}

.empty-state .btn {
  min-width: 140px;
}

/* ── Market Settings Controls ────────── */

/* Metal filter pills */
.market-filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.market-filter-pill {
  background: transparent;
  border: 1px solid var(--border, var(--bs-border-color));
  border-radius: var(--radius-pill);
  padding: 4px 12px;
  font-size: var(--font-size-xs);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
  color: var(--text-muted, #6c757d);
}
.market-filter-pill:hover {
  border-color: var(--border-hover, #475569);
  color: var(--text-primary, var(--bs-body-color));
}
.market-filter-pill.active[data-metal="all"] {
  background: var(--primary);
  color: var(--text-inverse);
  border-color: var(--primary);
}
.market-filter-pill.active[data-metal="gold"] {
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
  border-color: #f59e0b;
}
.market-filter-pill.active[data-metal="silver"] {
  background: rgba(139, 147, 166, 0.15);
  color: var(--bs-secondary-color, #6c757d);
  border-color: #6c757d;
}
.market-filter-pill.active[data-metal="platinum"] {
  background: rgba(6, 182, 212, 0.15);
  color: #06b6d4;
  border-color: #06b6d4;
}
.market-filter-pill.active[data-metal="goldback"] {
  background: rgba(212, 160, 23, 0.15);
  color: #d4a017;
  border-color: #d4a017;
}
.market-filter-pill.active[data-metal="palladium"] {
  background: rgba(148, 163, 184, 0.15);
  color: #94a3b8;
  border-color: #94a3b8;
}
/* Sync button — status-aware: green=current, amber=stale */
.market-sync-btn {
  background: transparent;
  border: 1.5px solid var(--bs-success, #059669);
  color: var(--bs-success, #059669);
  border-radius: var(--radius-pill);
  padding: 6px 16px;
  font-size: var(--font-size-sm);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}
.market-sync-btn:hover {
  background: color-mix(in oklch, var(--success), transparent 90%);
}
.market-sync-btn.stale {
  background: linear-gradient(135deg, var(--warning), var(--warning-hover));
  border-color: transparent;
  color: var(--text-inverse);
  box-shadow: 0 1px 3px color-mix(in oklch, var(--warning-hover), transparent 70%);
}
.market-sync-btn.stale:hover {
  background: linear-gradient(
    135deg,
    color-mix(in oklch, var(--warning), var(--hover-mix) 12%),
    var(--warning)
  );
  box-shadow: 0 2px 6px color-mix(in oklch, var(--warning-hover), transparent 60%);
}
/* Market Filter Matrix (STAK-515) */
.market-settings-header {
  margin-bottom: 0.5rem;
}
.market-filter-matrix-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-top: 0.75rem;
  border: 1px solid var(--border, var(--bs-border-color));
  border-radius: var(--radius);
}
.market-filter-matrix {
  border-collapse: collapse;
  width: 100%;
  font-size: var(--font-size-xs);
}
.market-filter-matrix th,
.market-filter-matrix td {
  padding: 4px 5px;
  text-align: center;
  border-bottom: 1px solid var(--border, var(--bs-border-color));
  white-space: nowrap;
}
.market-filter-matrix th:first-child,
.market-filter-matrix td:first-child {
  text-align: left;
  position: sticky;
  left: 0;
  background: var(--bg-primary, var(--bs-body-bg, #1a1d23));
  z-index: 1;
  padding-left: 10px;
  font-weight: 500;
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.market-filter-matrix thead th {
  font-weight: 600;
  font-size: var(--font-size-xs);
  color: var(--text-muted, #6c757d);
  padding-top: 8px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--border, var(--bs-border-color));
}
.market-filter-matrix thead th:first-child {
  z-index: 2;
}
.market-filter-matrix tbody tr:hover {
  background: color-mix(in oklch, var(--text-primary), transparent 96%);
}
.market-filter-matrix tbody tr:hover td:first-child {
  background: var(--bg-hover, color-mix(in oklch, var(--text-primary), transparent 96%));
}
.market-filter-matrix tbody tr:last-child td {
  border-bottom: none;
}
.market-filter-matrix .vendor-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 4px;
  vertical-align: middle;
  position: relative;
  top: -1px;
}
.market-filter-matrix input[type="checkbox"] {
  cursor: pointer;
  accent-color: var(--bs-primary, #3b82f6);
  width: 15px;
  height: 15px;
  vertical-align: middle;
}
.market-filter-matrix input[type="checkbox"]:disabled {
  opacity: 0.25;
  cursor: not-allowed;
}
.market-filter-matrix .mfm-all-row td {
  border-bottom: 2px solid var(--border, var(--bs-border-color));
  font-weight: 600;
}
.market-filter-matrix .mfm-all-row td:first-child {
  background: var(--bg-primary, var(--bs-body-bg, #1a1d23));
}
.market-filter-matrix th:nth-child(2),
.market-filter-matrix td:nth-child(2) {
  border-right: 1px solid var(--border, var(--bs-border-color));
}
.market-filter-matrix .mfm-product-name {
  font-size: var(--font-size-sm);
  color: var(--text-primary, var(--bs-body-color));
}
.market-filter-matrix .mfm-status-line {
  font-size: var(--font-size-sm);
  color: var(--text-muted, #6c757d);
  padding: 6px 0 2px;
}
.market-filter-matrix .mfm-status-line strong {
  color: var(--text-primary, var(--bs-body-color));
  font-weight: 600;
}
@media (max-width: 640px) {
  .market-filter-matrix {
    font-size: var(--font-size-xs);
  }
  .market-filter-matrix th,
  .market-filter-matrix td {
    padding: 4px 6px;
  }
  .market-filter-matrix th:first-child,
  .market-filter-matrix td:first-child {
    min-width: 130px;
  }
}

/* =============================================================================
   MARKET DATA MODULE — Ticker, Vendor Prices Table, Detail Modal
   STAK-504
   ============================================================================= */

/* ── Best Price Ticker Strip ── */
.market-ticker {
  width: 100%;
  overflow: hidden;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 12px 0;
  position: relative;
  /* STAK-513: Clamp to single row height as visual safety net */
  max-height: 72px;
}
.market-ticker::before,
.market-ticker::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 72px;
  z-index: 2;
  pointer-events: none;
}
.market-ticker::before {
  left: 0;
  background: linear-gradient(to right, var(--bg-card), transparent);
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
}
.market-ticker::after {
  right: 0;
  background: linear-gradient(to left, var(--bg-card), transparent);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}

.ticker-track {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  width: max-content;
  min-width: max-content;
  animation: ticker-scroll var(--ticker-duration, 45s) linear infinite;
  will-change: transform;
}

.ticker-track.static {
  animation: none;
  width: 100%;
  min-width: 0;
  /* STRK-317: full-length names can overflow the static (<4 items) track on
     narrow viewports — plain `center` clips both ends inside the container's
     overflow:hidden, so allow horizontal scroll and use `safe center` (falls
     back to `center` where unsupported) to keep the start edge reachable. */
  justify-content: center;
  justify-content: safe center;
  overflow-x: auto;
}

.ticker-block {
  display: flex;
  flex-shrink: 0;
  flex-wrap: nowrap;
  align-items: center;
  width: max-content;
  min-width: max-content;
  padding: 0 20px;
  gap: 10px;
}

@keyframes ticker-scroll {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(calc(-1 * var(--ticker-loop-distance, 50%)), 0, 0);
  }
}

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

  /* Preserve repeating animations for active-operation indicators at reduced speed */
  .spot-sync-icon.syncing svg,
  .cloud-sync-dot--syncing,
  .pcgs-verify-btn.pcgs-verifying {
    animation-duration: 1.5s !important;
    animation-iteration-count: infinite !important;
  }
}

.ticker-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-shrink: 0;
  gap: 8px;
  padding: 6px 14px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  font-size: var(--font-size-sm);
  white-space: nowrap;
  transition: background 0.2s;
}
.ticker-item:hover {
  background: var(--border);
}

.ticker-item .coin {
  font-weight: 700;
  color: var(--text-primary);
  font-size: var(--font-size-base);
}

.ticker-item .vendor {
  font-weight: 600;
  font-size: var(--font-size-sm);
}

.ticker-item .price {
  font-weight: 700;
  font-size: var(--font-size-base);
  font-family: var(--font-mono);
  color: var(--success);
}

.ticker-item .premium {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
}
.ticker-item .premium.low {
  color: var(--success);
  opacity: 0.8;
}
.ticker-item .premium.mid {
  color: oklch(0.55 0.15 60);
  opacity: 0.8;
}
.ticker-item .premium.high {
  color: var(--danger);
  opacity: 0.8;
}

/* ── Metal Dot Helper ── */
.metal-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 4px;
}
.metal-dot.xau {
  background: var(--gold);
}
.metal-dot.xag {
  background: var(--silver);
}
.metal-dot.xpt {
  background: var(--platinum);
}
.metal-dot.xpd {
  background: var(--palladium);
}

/* ── Vendor Prices Section ── */
.vendor-prices-section {
  background: var(--bg-card);
  padding: var(--spacing-lg);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
}

/* ── Vendor Prices Tab Bar ── */
.vendor-prices-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1rem;
}

.vendor-prices-tabs button {
  padding: 8px 16px;
  font-size: var(--font-size-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  border: none;
  background: transparent;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition:
    color 0.15s ease,
    border-color 0.15s ease;
}

.vendor-prices-tabs button:hover {
  color: var(--text-secondary);
}

.vendor-prices-tabs button.active {
  color: var(--text-primary);
  border-bottom: 2px solid var(--primary);
}

/* ── Vendor Prices Table Area ── */
.vp-table-area {
  min-height: 400px;
}

/* ── Vendor Prices Table ── */
.vendor-prices-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
}

.vendor-prices-table th {
  padding: 8px;
  text-align: center;
  color: var(--text-muted);
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--border);
}

.vendor-prices-table th:first-child {
  text-align: left;
  position: sticky;
  left: 0;
  background: var(--bg-card);
  z-index: 1;
}

.vendor-prices-table td {
  padding: 6px 8px;
  text-align: center;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

.vendor-prices-table td:first-child {
  text-align: left;
  font-weight: 600;
  position: sticky;
  left: 0;
  background: var(--bg-card);
  z-index: 1;
}

.vendor-prices-table .vp-muted {
  color: var(--text-muted, #6c757d);
}
.vendor-prices-table tr:hover td {
  background: var(--bg-secondary);
}

/* ── Price Cell ── */
.vp-price {
  font-family: var(--font-mono);
  font-weight: 600;
  cursor: pointer;
}

.vp-price:hover {
  text-decoration: underline;
  opacity: 0.85;
}

/* ── Premium Badge ── */
.vp-premium {
  display: block;
  font-size: var(--font-size-xs);
  font-weight: 500;
  margin-top: 2px;
}
.vp-premium.low {
  color: var(--success);
}
.vp-premium.mid {
  color: oklch(0.55 0.15 60);
}
.vp-premium.high {
  color: var(--danger);
}

/* ── Best Price Highlight ── */
.vp-best {
  background: color-mix(in srgb, var(--success) 15%, transparent);
  font-weight: 700;
}

/* ── Carried Price ── */
/* .vp-carried border removed — too distracting */

/* ── Out of Stock ── */
.vp-oos {
  color: var(--text-muted);
  font-style: italic;
  opacity: 0.6;
}

/* ── Coin Name Link ── */
.vp-coin-link {
  color: var(--text-primary);
  cursor: pointer;
  transition: color 0.15s ease;
}

.vp-coin-link:hover {
  color: var(--primary);
  text-decoration: underline;
}

/* Market detail: stat values + vendor price cells */
.market-detail-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.65rem, 3vw, 1.5rem);
  margin-bottom: 0.9rem;
}

.market-detail-stat-label {
  margin-bottom: 0.18rem;
  color: var(--text-muted);
  font-size: var(--font-size-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.market-value {
  min-height: 1.25rem;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
}
.market-price {
  font-family: var(--font-mono);
}

/* ── Market Detail Overlay ── */
.market-detail-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.market-detail-overlay[hidden] {
  display: none;
}

/* ── Market Detail Modal ── */
.market-detail-modal {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  max-width: 900px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  padding: 1.5rem;
  position: relative;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

/* ── Modal Close Button ── */
.market-detail-close {
  position: absolute;
  top: 12px;
  right: 12px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  font-size: var(--font-size-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    color 0.15s ease,
    background 0.15s ease;
}

.market-detail-close:hover {
  color: var(--text-primary);
  background: var(--bg-tertiary);
}

/* ── Modal Header ── */
.market-detail-header {
  margin-bottom: 1rem;
}

.market-detail-header h2 {
  font-size: var(--font-size-xl);
  font-weight: 700;
}

/* ── Modal Period Controls ── */
.market-detail-chart-section {
  margin-bottom: 1rem;
}

.market-detail-periods {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-bottom: 0.65rem;
  border: none;
  border-radius: 0;
  overflow: visible;
}

.market-detail-periods .market-detail-period-btn {
  min-width: 3.15rem;
  min-height: 44px;
  padding: 0.4rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
  font-weight: 500;
  transition:
    background 0.14s ease,
    border-color 0.14s ease,
    color 0.14s ease,
    transform 0.14s ease;
}

.market-detail-periods .market-detail-period-btn:hover {
  border-color: var(--primary);
  background: var(--bg-secondary);
  color: var(--text-primary);
  transform: translateY(-1px);
}

.market-detail-periods .market-detail-period-btn:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--primary) 35%, transparent);
  outline-offset: 2px;
}

.market-detail-periods .market-detail-period-btn.active,
.market-detail-periods .market-detail-period-btn[aria-pressed="true"] {
  border-color: var(--primary);
  background: var(--primary);
  color: var(--text-inverse);
}

/* ── Modal Chart Container ── */
.market-detail-chart {
  height: 250px;
  margin-bottom: 1rem;
  border-radius: var(--radius);
  overflow: hidden;
}

.market-detail-chart-unavailable {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--text-muted);
  font-size: var(--font-size-base);
}

/* Reset global table/td rules that leak into LightweightCharts' internal table layout */
.tv-lightweight-charts table,
.tv-lightweight-charts tr,
.tv-lightweight-charts td,
.tv-lightweight-charts th {
  max-width: none;
  overflow: visible;
  white-space: normal;
  padding: 0;
  border: none;
  background: none;
  box-shadow: none;
  font-size: inherit;
  line-height: normal;
  color: inherit;
  text-overflow: clip;
}

/* ── Theme Overrides ── */
:is([data-theme="dark"], [data-theme="slate"]) .vp-best {
  background: color-mix(in srgb, var(--success) 18%, transparent);
}

[data-theme="light"] .vp-best,
:root .vp-best {
  background: rgba(5, 150, 105, 0.12);
}

[data-theme="light"] .market-detail-modal,
:root .market-detail-modal {
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

[data-theme="sepia"] .vp-best {
  background: rgba(5, 150, 105, 0.12);
}

[data-theme="sepia"] .market-detail-modal {
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.2);
}

/* ── Mobile Responsive ── */
@media (max-width: 768px) {
  .vendor-prices-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .ticker-item {
    font-size: var(--font-size-xs);
  }
}

@media (max-width: 560px) {
  .market-detail-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .market-detail-periods {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
  }

  .market-detail-periods .market-detail-period-btn {
    width: 100%;
  }
}

/* ── STRK-45 Attachment UI ──────────────────────────────────────────── */

/* Drop zone */
.attachment-drop-zone {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 0.8rem;
  border: 1.5px dashed var(--border);
  border-radius: var(--radius);
  background: var(--glass-input-bg);
  cursor: pointer;
  transition:
    border-color var(--transition),
    background var(--transition);
  flex-wrap: wrap;
  row-gap: 0.4rem;
  column-gap: 0.6rem;
}
.attachment-drop-zone:hover,
.attachment-drop-zone.drag-over {
  border-color: var(--primary);
  background: color-mix(in oklch, var(--primary) 6%, transparent);
}
.attachment-drop-zone.drag-over {
  border-style: solid;
}
.attachment-drop-icon {
  color: var(--text-muted);
  flex-shrink: 0;
}
.attachment-drop-label {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  flex: 1;
  min-width: 100px;
}
.attachment-browse-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.25rem 0.7rem;
  border-radius: var(--radius-pill);
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-primary);
  font-size: var(--font-size-sm);
  cursor: pointer;
  font-weight: 500;
  transition:
    background var(--transition),
    border-color var(--transition);
  white-space: nowrap;
}
.attachment-browse-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
}

/* Attachment list items */
.attachment-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0;
  margin: 0;
}
.attachment-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.55rem;
  border-radius: var(--radius-sm);
  background: var(--glass-input-bg);
  border: 1px solid var(--border);
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  position: relative;
  min-width: 0;
}
.attachment-item--queued {
  border-color: color-mix(in oklch, var(--primary) 35%, var(--border));
  background: color-mix(in oklch, var(--primary) 5%, var(--glass-input-bg));
}
.attachment-item--missing {
  border-color: color-mix(in oklch, var(--warning) 40%, var(--border));
  background: color-mix(in oklch, var(--warning) 5%, var(--glass-input-bg));
}

/* File type icons */
.attach-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 700;
}
.attach-icon--pdf {
  background: var(--attach-pdf-bg);
  color: var(--attach-pdf-fg);
}
.attach-icon--png {
  background: var(--attach-png-bg);
  color: var(--attach-png-fg);
}
.attach-icon--jpg {
  background: var(--attach-jpg-bg);
  color: var(--attach-jpg-fg);
}
.attach-icon--file {
  background: var(--bg-tertiary);
  color: var(--text-muted);
}

/* Attachment info row */
.attach-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.attach-name {
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.attach-meta {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
}

/* Staging progress bar */
.attach-progress {
  height: 2px;
  background: var(--border);
  border-radius: 99px;
  overflow: hidden;
  margin-top: 0.15rem;
}
.attach-progress-bar {
  height: 100%;
  background: var(--primary);
  border-radius: 99px;
  transition: width 0.4s ease;
}

/* Action buttons */
.attach-actions {
  display: flex;
  gap: 0.25rem;
  flex-shrink: 0;
}
.attach-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  color: var(--text-muted);
  transition:
    background var(--transition),
    color var(--transition);
  font-size: 13px;
}
.attach-btn:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}
.attach-btn.danger:hover {
  background: color-mix(in oklch, var(--danger) 12%, transparent);
  color: var(--danger);
}

/* Missing-binary warning badge */
.attach-badge-warn {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: var(--font-size-xs);
  color: var(--warning);
  background: color-mix(in oklch, var(--warning) 12%, transparent);
  border-radius: var(--radius-pill);
  padding: 0.1rem 0.5rem;
  font-weight: 600;
  white-space: nowrap;
}

/* Sub-list label */
.attach-list-header {
  font-size: var(--font-size-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 0.1rem;
}

/* Table row attachment count chip */
.attach-count-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.05rem 0.4rem;
  border-radius: var(--radius-pill);
  font-size: var(--font-size-xs);
  font-weight: 600;
  background: color-mix(in oklch, var(--primary) 12%, transparent);
  color: var(--primary);
  border: 1px solid color-mix(in oklch, var(--primary) 25%, transparent);
  cursor: pointer;
}

/* Shared attachment list panel (view modal + detail modal) */
.attach-panel {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  overflow: hidden;
}
.attach-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 0.85rem;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border);
}
.attach-panel-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  font-size: var(--font-size-md);
  color: var(--text-primary);
}
.attach-panel-count {
  font-size: var(--font-size-xs);
  font-weight: 700;
  background: var(--primary);
  color: var(--text-inverse);
  border-radius: var(--radius-pill);
  padding: 0.1rem 0.4rem;
}
.attach-panel-body {
  padding: 0.5rem 0.7rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.attach-panel-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1.5rem 1rem;
  color: var(--text-muted);
  font-size: var(--font-size-sm);
  text-align: center;
}
.attach-panel-empty svg {
  opacity: 0.35;
}

/* DiffModal attachment rows */
.diff-attach-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.6rem;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  border: 1px solid transparent;
}
.diff-attach-row--added {
  background: color-mix(in oklch, var(--success) 8%, transparent);
  border-color: color-mix(in oklch, var(--success) 20%, transparent);
}
.diff-attach-row--removed {
  background: color-mix(in oklch, var(--danger) 8%, transparent);
  border-color: color-mix(in oklch, var(--danger) 20%, transparent);
}
.diff-attach-row--changed {
  background: color-mix(in oklch, var(--warning) 7%, transparent);
  border-color: color-mix(in oklch, var(--warning) 20%, transparent);
}
.diff-sign {
  font-weight: 700;
  font-size: 14px;
  flex-shrink: 0;
  width: 14px;
  text-align: center;
}
.diff-sign--added {
  color: var(--success);
}
.diff-sign--removed {
  color: var(--danger);
}
.diff-sign--changed {
  color: var(--warning);
}
.diff-attach-text {
  flex: 1;
  min-width: 0;
  color: var(--text-primary);
}
.diff-attach-meta {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
}
.diff-strikethrough {
  text-decoration: line-through;
  color: var(--text-muted);
}
.diff-arrow {
  color: var(--text-muted);
  margin: 0 0.25rem;
}

/* Mobile: ensure browse button is always visible and tappable */
@media (max-width: 768px) {
  .attachment-browse-btn {
    min-height: 36px;
    padding: 0.4rem 0.9rem;
  }
  .attachment-drop-zone {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ============================================================
   STRK-161 — Spot card ratio chips
   Own-row pill (D-5), JS-fixed tooltip singleton (D-4), responsive
   timestamp (D-9). Pill grammar borrowed from .trade-linked-chip.
   Tokens only — four themes (light/dark/slate/sepia), no hardcoded
   color literals (D-7). Metal accent driven by --metal per card.
   ============================================================ */

/* Own-row ratio/goldback chip: normal flow, centered between
   .spot-card-change and .spot-card-timestamp. When the master toggle is OFF the
   chip is removed and the row collapses; when the toggle is ON but a card has no
   chip, .spot-ratio-chip-spacer (below) reserves the row so every card's
   "Last Synced" line stays on the same plane. */
.spot-ratio-chip {
  position: static;
  align-self: center;
  margin: 2px auto 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px 2px 6px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: color-mix(in oklch, var(--bg-secondary) 80%, transparent);
  font-size: var(--font-size-xs);
  font-weight: 600;
  font-family: var(--font-mono);
  line-height: 1.25;
  color: var(--text-secondary);
  cursor: default;
  white-space: nowrap;
  max-width: calc(100% - 12px);
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative;
  z-index: 2;
}

.spot-ratio-chip:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
  box-shadow: 0 0 0 3px var(--focus-ring);
}

/* Reserves a chip's vertical footprint on cards whose chip is hidden, so every
   card's "Last API Sync" line stays on the same plane (STRK-161 alignment). */
.spot-ratio-chip-spacer {
  display: inline-flex;
  align-items: center;
  margin: 2px auto 0;
  padding: 2px 8px 2px 6px;
  border: 1px solid transparent;
  font-size: var(--font-size-xs);
  line-height: 1.25;
  visibility: hidden;
}

.spot-ratio-chip .glyph {
  display: inline-flex;
  color: var(--metal, var(--text-muted));
}
.spot-ratio-chip .glyph svg {
  width: 12px;
  height: 12px;
  display: block;
}

.spot-ratio-chip .lab {
  color: var(--metal, var(--text-secondary));
  letter-spacing: 0.01em;
}

.spot-ratio-chip .val {
  color: var(--text-primary);
  font-weight: 700;
}

.spot-ratio-chip .est {
  font-size: 9px;
  font-weight: 700;
  color: var(--warning);
  margin-left: 1px;
  text-transform: uppercase;
}

/* Per-metal accent — sets --metal consumed by .glyph + .lab */
.spot-ratio-chip.metal-silver {
  --metal: var(--silver);
}
.spot-ratio-chip.metal-platinum {
  --metal: var(--platinum);
}
.spot-ratio-chip.metal-palladium {
  --metal: var(--palladium);
}
.spot-ratio-chip.metal-copper {
  --metal: var(--copper);
}
.spot-ratio-chip.metal-gold {
  --metal: var(--type-goldback-bg);
}

/* JS-positioned fixed tooltip singleton (D-4): appended to <body> so it
   escapes .spot-card { overflow: hidden }. Themed via tokens only. */
#chipTip {
  position: fixed;
  z-index: 9999;
  max-width: 240px;
  padding: 8px 10px;
  border-radius: var(--radius-sm, 4px);
  background: var(--bg-card);
  color: var(--text-primary);
  border: 1px solid var(--border-hover);
  font-size: var(--font-size-sm);
  line-height: 1.45;
  box-shadow: var(--shadow-lg);
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition:
    opacity 0.12s,
    transform 0.12s;
}
#chipTip.show {
  opacity: 1;
  transform: translateY(0);
}
#chipTip b {
  color: var(--primary);
}

/* D-9: responsive timestamp. Provider + "Last API Sync" on one line at
   desktop; below the 960px grid breakpoint shed the provider and shorten
   the label to "Last Synced {time}" so the line never truncates 2-up. */
.ts-short {
  display: none;
}
@media (max-width: 959px) {
  .ts-provider,
  .ts-full {
    display: none;
  }
  .ts-short {
    display: inline;
  }
}

/* =============================================================================
   RATIOS PANEL (STRK-270) — shared Layout C component, tokens only (D-7).
   Lifted from playground/ratios-panel-playground.html. Rendered by the
   in-app modal host (STRK-271) and the standalone /ratios/ page (STRK-273).
   Accent follows the DENOMINATOR metal — the thing being priced against —
   matching the per-card accent convention the spot chips already use.
   ============================================================================= */
.gsr-panel {
  --gsr-accent: var(--gold);

  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-family: var(--font-sans, inherit);
}
.gsr-panel[data-accent="silver"] {
  --gsr-accent: var(--silver);
}
.gsr-panel[data-accent="platinum"] {
  --gsr-accent: var(--platinum);
}
.gsr-panel[data-accent="copper"] {
  --gsr-accent: var(--copper);
}
.gsr-panel[data-accent="palladium"] {
  --gsr-accent: var(--palladium);
}
.gsr-panel.gsr-empty {
  color: var(--text-muted);
  font-size: var(--font-size-sm, 12.5px);
  text-align: center;
  padding: 28px 16px;
}

/* Pair selector — lives INSIDE the panel: both hosts need it. */
.gsr-pairs {
  display: inline-flex;
  gap: 3px;
  background: var(--bg-tertiary);
  border-radius: var(--radius-pill, 999px);
  padding: 3px;
  flex-wrap: wrap;
}
.gsr-pairs button {
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font-mono, monospace);
  font-size: 11.5px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: var(--radius-pill, 999px);
  cursor: pointer;
  white-space: nowrap;
}
.gsr-pairs button[aria-pressed="true"] {
  background: var(--bg-card);
  color: var(--gsr-accent);
  box-shadow: var(--shadow-sm);
}
.gsr-pairs button:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
}

/* Header */
.gsr-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.gsr-head .eyebrow {
  font-size: var(--font-size-xs, 11px);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.gsr-head .title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  margin-top: 2px;
}
.gsr-live {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: var(--radius-pill, 999px);
  border: 1px solid color-mix(in oklch, var(--success), transparent 55%);
  background: color-mix(in oklch, var(--success), transparent 88%);
  color: var(--success);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.gsr-live .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentcolor;
}
.gsr-live[data-state="stale"] {
  border-color: color-mix(in oklch, var(--warning), transparent 55%);
  background: color-mix(in oklch, var(--warning), transparent 88%);

  /* --warning-text keeps this 10.5px label contrast-safe on the light and
     sepia cards; bare --warning is too light for small text there. */
  color: var(--warning-text, var(--warning));
}

/* Hero readout */
.gsr-hero-num {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-weight: 800;
  line-height: 0.95;
  color: var(--gsr-accent);
  letter-spacing: -0.02em;
  font-size: clamp(38px, 11vw, 60px);
}
.gsr-hero-num .unit {
  font-size: 0.44em;
  color: var(--text-muted);
  font-weight: 700;
  letter-spacing: 0;
}
.gsr-hero-sub {
  font-size: var(--font-size-sm, 12.5px);
  color: var(--text-secondary);
  line-height: 1.5;
  margin-top: 6px;
}
.gsr-delta {
  font-family: var(--font-mono, monospace);
  font-weight: 700;
}
.gsr-delta[data-dir="up"] {
  color: var(--danger);
}
.gsr-delta[data-dir="down"] {
  color: var(--success);
}

/* Trend tiles */
.gsr-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
}
.gsr-tile {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius, 10px);
  padding: 11px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.gsr-tile .k {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-muted);
  line-height: 1.35;
}
.gsr-tile .v {
  font-family: var(--font-mono, monospace);
  font-size: 22px;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}
.gsr-tile .m {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.45;
}

/* 52-week position bar. The bar is a 52-WEEK scale; the .pct figure beside
   it is an ALL-TIME percentile — both labels name their scale on purpose. */
.gsr-range {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius, 10px);
  padding: 12px 13px 13px;
}
.gsr-range .rhead {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 9px;
}
.gsr-range .rhead .k {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.gsr-range .rhead .pct {
  font-family: var(--font-mono, monospace);
  font-size: 12px;
  font-weight: 800;
  color: var(--gsr-accent);
}
.gsr-track {
  position: relative;
  height: 8px;
  border-radius: var(--radius-pill, 999px);
  background: linear-gradient(
    90deg,
    color-mix(in oklch, var(--success), transparent 55%),
    color-mix(in oklch, var(--warning), transparent 60%),
    color-mix(in oklch, var(--danger), transparent 55%)
  );
}
.gsr-track .mark {
  position: absolute;
  top: 50%;
  width: 3px;
  height: 18px;
  border-radius: 2px;
  background: var(--text-primary);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 2px var(--bg-card);
}
.gsr-track .mean-mark {
  position: absolute;
  top: 50%;
  width: 2px;
  height: 12px;
  background: var(--text-muted);
  transform: translate(-50%, -50%);
  opacity: 0.9;
}
.gsr-range .rfoot {
  display: flex;
  justify-content: space-between;
  margin-top: 7px;
  font-family: var(--font-mono, monospace);
  font-size: 10.5px;
  color: var(--text-muted);
}
.gsr-range .rlegend {
  margin-top: 8px;
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* Chart */
.gsr-chartwrap {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius, 10px);
  padding: 10px 10px 6px;
}
.gsr-chartwrap .cbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.gsr-tf {
  display: inline-flex;
  gap: 3px;
  background: var(--bg-tertiary);
  border-radius: var(--radius-pill, 999px);
  padding: 3px;
}
.gsr-tf button {
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: var(--radius-pill, 999px);
  cursor: pointer;
}
.gsr-tf button[aria-pressed="true"] {
  background: var(--bg-card);
  color: var(--gsr-accent);
  box-shadow: var(--shadow-sm);
}
.gsr-tf button:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
}
.gsr-canvas {
  position: relative;
  height: 190px;
}
@media (max-width: 480px) {
  .gsr-canvas {
    height: 158px;
  }
}

/* Footer */
.gsr-foot {
  font-size: 10.5px;
  color: var(--text-muted);
  line-height: 1.6;
  border-top: 1px solid var(--border);
  padding-top: 10px;
}
.gsr-foot code {
  font-family: var(--font-mono, monospace);
  color: var(--text-secondary);
}

/* =============================================================================
   RATIOS PANEL MODAL HOST + CHIP AFFORDANCE (STRK-271)
   The three ratio chips become actionable buttons that open the panel modal;
   the gold card's goldback chip stays passive. Tokens only (D-7).
   ============================================================================= */
.spot-ratio-chip.is-actionable {
  cursor: pointer;
}
.spot-ratio-chip.is-actionable:hover {
  border-color: color-mix(in oklch, var(--metal, var(--border)), transparent 45%);
}
.spot-ratio-chip.is-actionable:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
}
.spot-ratio-chip .caret {
  color: var(--text-muted);
  font-size: 9px;
  line-height: 1;
}

.ratios-modal-content {
  max-width: 720px;
  padding: 0;
}
.ratios-modal-content .modal-header {
  margin: 0;
  padding: 12px 16px 0;
}

/* =============================================================================
   V2 TAB SHELL (STRK-282)

   Header text nav (desktop) + fixed bottom tab bar (mobile) driving
   visibility wrappers around the existing page sections.

   Ported from the STRK-282 prototype branch. The prototype's stand-in rule
   hiding the header quick-links (#headerSyncBtn, #headerTrendBtn, …) is
   deliberately NOT carried over: the header-retirement campaign
   (STRK-283..290) removed that markup outright, so the rule would target
   eight ids that no longer exist.
   ============================================================================= */

/* Desktop header nav — Variant A: text labels, gold underline on active.
   Anchored right so the tabs end at the settings cluster instead of
   floating mid-header. */
.app-tab-nav {
  display: flex;
  gap: 4px;
  margin-left: auto;
  margin-right: var(--spacing-md);
  min-width: 0;
  flex-wrap: wrap;
}

/* With the quick-links retired only Theme + Settings remain, so the 2-col
   grid fallback below 580px just reserves an empty column — flex always. */
.app-header .app-header-actions {
  display: flex;
  align-items: center;
  margin-left: 0;
}

.app-tab-btn {
  position: relative;
  background: none;
  border: none;
  color: var(--text-secondary);
  font-family: inherit;
  font-weight: 600;
  font-size: var(--font-size-md);
  padding: 8px 14px 10px;
  cursor: pointer;
  border-radius: var(--radius);
  transition:
    color 0.15s,
    background 0.15s;
}

.app-tab-btn:hover {
  color: var(--text-primary);
  background: var(--bg-tertiary);
}

.app-tab-btn[aria-selected="true"] {
  color: var(--text-primary);
}

.app-tab-btn[aria-selected="true"]::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 3px;
  height: 2px;
  border-radius: 2px;
  background: var(--gold);
}

/* Tab views — visibility wrappers around the existing page sections.
   min-width: 0 is load-bearing: main.container is display:grid, and a grid
   item's default min-width:auto lets the chart canvases inflate the track
   into a resize feedback loop (same scar the sections carry). */
.tab-view {
  display: none;
  min-width: 0;
}

/* The active view has to REPLICATE .container's grid, not just become visible.
   Section spacing was never a section margin — it came entirely from
   .container's `gap`. Once the sections moved inside these wrappers that gap
   started applying BETWEEN the tab views (of which one is ever visible, so it
   renders nowhere) and the sections inside stacked flush against each other.
   Same gap token, so the tabs are indistinguishable from the old flat layout.
   minmax(0, 1fr) keeps the min-width:0 guarantee for the grid track itself. */
.tab-view.active {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--spacing-xl);
  align-content: start;
}

/* Inventory reads as ONE surface: the search/chips card and the table card are
   a single control-plus-results unit, so they butt together and the seam
   between them is dissolved rather than sitting in a gap. */
#tabViewInventory.active {
  gap: 0;
}

#tabViewInventory > #searchSectionEl {
  /* .search-section carries its own margin-bottom (a legacy of the pre-grid
     layout), so the old spacing here was the container gap PLUS this margin
     stacked. Collapsing the gap alone leaves the margin holding the two cards
     apart. */
  margin-bottom: 0;
  border-bottom: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

#tabViewInventory > #tableSectionEl {
  border-top: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

/* Collections placeholder */
.collections-empty {
  text-align: center;
  padding: 56px 20px;
  border: 1.5px dashed var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  color: var(--text-muted);
}

.collections-empty h2 {
  color: var(--text-primary);
  margin: 0 0 8px;
}

.collections-empty p {
  max-width: 460px;
  margin: 0 auto;
  line-height: 1.6;
}

/* Mobile bottom tab bar — fixed, thumb-reachable; replaces header nav <768px */
.app-bottom-nav {
  display: none;
  position: fixed;
  left: 10px;
  right: 10px;
  bottom: 10px;
  z-index: 900;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 4px;
  justify-content: space-around;
}

/* 0.7rem (~11.2px) rather than the prototype's 0.62rem (~9.9px), and
   --text-secondary rather than --text-muted: this is primary navigation, and
   muted at sub-10px was hard to read across the four themes. */
.bottom-nav-btn {
  flex: 1;
  background: none;
  border: none;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 0.7rem;
  font-weight: 600;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 7px 2px 6px;
  border-radius: var(--radius);
  cursor: pointer;
}

/* Keyboard users move through the tablist with the arrow keys, so the focused
   tab has to be visible — the roving tabindex means only one is ever in the
   page tab order. */
.bottom-nav-btn:focus-visible,
.app-tab-btn:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: -2px;
}

/* STRK-326: hiding a tab in Settings sets [hidden] on its nav buttons. Both
   classes declare their own `display`, which outranks the user-agent
   `[hidden] { display: none }` rule — without this the attribute would be set
   correctly and change nothing on screen. !important is the escape hatch for
   exactly that specificity fight, not a shortcut. */
.app-tab-btn[hidden],
.bottom-nav-btn[hidden] {
  display: none !important;
}

.bottom-nav-btn .bottom-nav-icon {
  font-size: 1.05rem;
  line-height: 1;
}

.bottom-nav-btn[aria-selected="true"] {
  color: var(--gold);
}

@media (max-width: 768px) {
  .app-tab-nav {
    display: none;
  }

  .app-bottom-nav {
    display: flex;
  }

  /* Keep scrollable content clear of the fixed bottom nav */
  main.container {
    padding-bottom: 72px;
  }
}