/* ==========================================================================
   SFF.GG DATABASE MASTER STYLESHEET MANIFEST (/database/css/style.css)
   ========================================================================== */

/* 1. System Reset, CSS Variables, Typography & Base 3-Column Grid */

/* css/core.css */
/* ==========================================================================
   1. CORE FOUNDATIONS & WORKSTATION LAYOUT GRID (/database/css/core.css)
   ========================================================================== */

@font-face {
  font-family: "JetBrains Mono";
  src: url("/assets/fonts/JetBrainsMono.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
}

:root {
  --sff-blue: #007dec;
  --sff-sky: #38bdf8;
  --sff-emerald: #10b981;
  --sff-rose: #f43f5e;
  --sff-amber: #f59e0b;
  --sff-purple: #c084fc;

  /* Foreground-only semantic inks. Keep accent fills bright while allowing
     high-contrast text in light mode. Root values preserve current dark mode. */
  --sff-sky-text: #38bdf8;
  --sff-sky-bright-text: #7dd3fc;
  --sff-cyan-text: #00bcd4;
  --sff-emerald-text: #10b981;
  --sff-emerald-bright-text: #34d399;
  --sff-rose-text: #f43f5e;
  --sff-rose-bright-text: #f87171;
  --sff-amber-text: #f59e0b;
  --sff-amber-bright-text: #fbbf24;
  --sff-purple-text: #c084fc;
  --sff-indigo-text: #818cf8;
  --sff-zinc-text: #a1a1aa;
  --sff-text-dim: #71717a;
  --sff-review-copy-text: #b8b8c2;
  --sff-review-spec-text: #c3c3cb;
  
  --sff-bg-global: #050608;
  --sff-bg-panel: #0e1015;
  --sff-bg-control: #000000;
  --sff-bg-card: #0a0b0e;
  --sff-bg-drawer: #050608;
  --sff-bg-media: #171b22;
  
  --sff-border: rgba(255, 255, 255, 0.15);
  --sff-border-subtle: rgba(255, 255, 255, 0.06);
  --sff-border-accent: rgba(56, 189, 248, 0.35);
  
  --sff-text-dark: #f4f4f5;
  --sff-text-muted: #a1a1aa;
  --sff-text-active: #38bdf8;
  
  --sff-slider-track: #18181b;
  --sff-shadow: 0 16px 32px rgba(0, 0, 0, 0.85);
  --sff-link-direct: #10b981;
  --sff-link-affiliate: #38bdf8;
  
  --sff-radius: 4px;
  --sff-radius-sm: 2px;
}

[data-theme="light"] {
  --sff-bg-global: #f1f5f9;
  --sff-bg-panel: #ffffff;
  --sff-bg-control: #e2e8f0;
  --sff-bg-card: #ffffff;
  --sff-bg-drawer: #f1f5f9;
  --sff-bg-media: #dfe6ee;
  
  --sff-border: #cbd5e1;
  --sff-border-subtle: #e2e8f0;
  --sff-border-accent: #0284c7;
  
  --sff-text-dark: #0f172a;
  --sff-text-muted: #475569;
  --sff-text-active: #0369a1;

  --sff-sky-text: #0369a1;
  --sff-sky-bright-text: #0369a1;
  --sff-cyan-text: #0e7490;
  --sff-emerald-text: #047857;
  --sff-emerald-bright-text: #047857;
  --sff-rose-text: #be123c;
  --sff-rose-bright-text: #be123c;
  --sff-amber-text: #b45309;
  --sff-amber-bright-text: #b45309;
  --sff-purple-text: #7e22ce;
  --sff-indigo-text: #4338ca;
  --sff-zinc-text: #52525b;
  --sff-text-dim: #475569;
  --sff-review-copy-text: #334155;
  --sff-review-spec-text: #475569;
  
  --sff-slider-track: #cbd5e1;
  --sff-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
  --sff-link-direct: #047857;
  --sff-link-affiliate: #0369a1;
}

/* Native Database breakout. Do not style WordPress html/body/theme wrappers. */
body.sff-site-database .sff-native-app-frame {
  padding: 0 !important;
  background-color: var(--sff-bg-global) !important;
  overflow-x: hidden;
}

body.sff-site-database .x-breadcrumb-wrap,
body.sff-site-database .entry-featured { display: none !important; }
body.sff-site-database .x-column { z-index: 0; }

/* WP Admin Bar Fixed Top Offsets */
/* WordPress admin-bar geometry is owned centrally by the Theme. */

/* Custom Industrial Scrollbars */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--sff-bg-control); }
::-webkit-scrollbar-thumb { background: var(--sff-border); border-radius: var(--sff-radius-sm); }
::-webkit-scrollbar-thumb:hover { background: var(--sff-text-muted); }

/* Typography & Helpers */
.font-mono { font-family: 'JetBrains Mono', SFMono-Regular, Consolas, monospace !important; }

.sff-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

.pulse-emerald { background: #10b981; box-shadow: 0 0 8px rgba(16, 185, 129, 0.8); animation: pulseGlow 2s infinite; }
.pulse-sky { background: #38bdf8; box-shadow: 0 0 8px rgba(56, 189, 248, 0.8); animation: pulseGlow 2s infinite; }
.pulse-purple { background: #c084fc; box-shadow: 0 0 8px rgba(192, 132, 252, 0.8); animation: pulseGlow 2s infinite; }

@keyframes pulseGlow {
  0% { transform: scale(0.95); opacity: 0.8; }
  50% { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(0.95); opacity: 0.8; }
}

.sff-group-label {
  display: block;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--sff-text-muted);
  margin-bottom: 5px;
  text-transform: uppercase;
}

.sff-card-label {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--sff-sky-text);
  margin-bottom: 8px;
  text-transform: uppercase;
  border-bottom: 1px dashed var(--sff-border-subtle);
  padding-bottom: 4px;
}

.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;
}

/* 3-Column Workstation Layout Container */
.sff-explorer-container, .sff-workstation-container {
  display: grid;
  grid-template-columns: 320px 1fr 340px;
  gap: 12px;
  width: 100vw;
  min-height: calc(100dvh - var(--labs-admin-bar-height, 0px));
  padding: 10px;
  box-sizing: border-box;
  background: var(--sff-bg-global);
  color: var(--sff-text-dark);
}

.sff-inputs, .sff-inputs-sidebar, .sff-telemetry-sidebar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: sticky;
  height: calc(100dvh - var(--labs-admin-bar-height, 0px) - 20px);
  overflow-y: auto;
  box-sizing: border-box;
}

.sff-results-column {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.sff-section-card {
  background: var(--sff-bg-panel);
  border: 1px solid var(--sff-border);
  border-radius: var(--sff-radius);
  padding: 12px;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
  position: relative;
}

.sff-header-box { gap: 10px; }

.sff-docked-header-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--sff-bg-control);
  border-bottom: 1px solid var(--sff-border);
  margin: -12px -12px 6px -12px;
  padding: 8px 12px;
  width: calc(100% + 24px);
  box-sizing: border-box;
  border-top-left-radius: var(--sff-radius);
  border-top-right-radius: var(--sff-radius);
}

.sff-title-with-dot { display: flex; align-items: center; gap: 6px; }
.sff-main-title, .sff-telemetry-title {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  margin: 0;
  color: var(--sff-text-dark);
  text-transform: uppercase;
}

/* Header Action Buttons & SVG Normalize */
.sff-header-actions-3col { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; width: 100%; }
.sff-header-actions-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; width: 100%; }

.sff-header-actions button, 
.sff-reset-btn, 
.sff-theme-toggle-btn, 
.sff-csv-btn, 
.sff-report-btn,
.sff-clear-top-btn {
  height: 30px;
  padding: 0 8px;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  box-sizing: border-box;
  border-radius: var(--sff-radius-sm);
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  line-height: 1 !important;
  transition: all 0.12s ease;
}

.sff-clear-top-btn {
  width: auto;
  flex-shrink: 0;
  height: 26px;
  padding: 0 8px;
  font-size: 9px;
}

.sff-report-btn {
  background: #10b981;
  color: #000000;
  border: 1px solid #10b981;
  font-weight: 800;
}
.sff-report-btn:hover:not(:disabled) {
  filter: brightness(1.15);
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.4);
}
.sff-report-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  background: var(--sff-bg-control);
  color: var(--sff-text-muted);
  border-color: var(--sff-border);
  box-shadow: none;
}

.sff-csv-btn, .sff-theme-toggle-btn, .sff-reset-btn {
  background: var(--sff-bg-control);
  border: 1px solid var(--sff-border);
  color: var(--sff-text-dark);
}
.sff-csv-btn:hover, .sff-theme-toggle-btn:hover, .sff-reset-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--sff-sky);
  color: var(--sff-sky-text);
}

.sff-header-actions svg, 
.sff-reset-btn svg, 
.sff-theme-toggle-btn svg, 
.sff-csv-btn svg, 
.sff-report-btn svg,
.sff-bolt-svg, 
.sff-csv-svg, 
.sff-reset-svg, 
.sff-sun-moon-svg,
.sff-validate-card-btn svg, 
.sff-3d-hook-btn svg,
.sff-pin-card-btn svg {
  width: 13px !important;
  height: 13px !important;
  min-width: 13px !important;
  min-height: 13px !important;
  max-width: 13px !important;
  max-height: 13px !important;
  flex-shrink: 0 !important;
  display: inline-block !important;
  vertical-align: middle !important;
  margin: 0 !important;
}

#themeToggleIcon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 13px;
  width: 13px;
}

/* Light Theme Overrides */
[data-theme="light"] body.sff-site-database .sff-native-app-frame { background-color: #f1f5f9; color: #0f172a; }
[data-theme="light"] .sff-section-card { background: #ffffff; border-color: #cbd5e1; }
[data-theme="light"] .sff-docked-header-bar { background: #e2e8f0; border-bottom-color: #cbd5e1; }

/* Mobile Layout Responsive Breakpoints */
@media (max-width: 1400px) {
  .sff-explorer-container, .sff-workstation-container {
    grid-template-columns: 300px 1fr;
  }
  .sff-telemetry-sidebar { display: none !important; }
}

.sff-mobile-toolbar, .sff-drawer-header { display: none !important; }

.sff-drawer-backdrop {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(5, 6, 8, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 9999998;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.sff-drawer-backdrop.active { display: block !important; opacity: 1 !important; pointer-events: auto !important; }

@media (max-width: 1024px) {
  .sff-mobile-toolbar {
    display: block !important;
    position: fixed !important;
    bottom: 20px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 9999990 !important;
    width: auto !important;
    max-width: 92vw !important;
  }

  .sff-mobile-toolbar-group {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    background: var(--sff-bg-panel);
    border: 1px solid var(--sff-border);
    padding: 4px;
    border-radius: 24px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

  .sff-mobile-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--sff-bg-control);
    border: 1px solid var(--sff-border-subtle);
    color: var(--sff-text-dark);
    padding: 7px 14px;
    border-radius: 18px;
    font-size: 10px;
    font-weight: 800;
    font-family: 'JetBrains Mono', monospace;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
  }

  .sff-mobile-filter-btn.active {
    border-color: var(--sff-sky);
    background: rgba(56, 189, 248, 0.15);
    color: var(--sff-sky-text);
  }

  .sff-explorer-container, .sff-workstation-container {
    grid-template-columns: 1fr;
    padding: 6px;
  }

  .sff-inputs, .sff-inputs-sidebar {
    display: flex !important;
    position: fixed !important;
    top: var(--labs-admin-bar-height, 0px) !important;
    left: 0 !important;
    width: 86vw !important;
    max-width: 86vw !important;
    height: calc(100dvh - var(--labs-admin-bar-height, 0px)) !important;
    z-index: 9999999 !important;
    background: var(--sff-bg-drawer) !important;
    border-right: 1px solid var(--sff-border) !important;
    border-radius: 0 !important;
    box-shadow: 20px 0 50px rgba(0, 0, 0, 0.9) !important;
    overflow-y: auto !important;
    transform: translateX(-100%) !important;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    padding: 10px !important;
  }

  .sff-inputs.mobile-drawer-open, .sff-inputs-sidebar.mobile-drawer-open {
    transform: translateX(0) !important;
  }

  .sff-telemetry-sidebar {
    display: flex !important;
    position: fixed !important;
    top: var(--labs-admin-bar-height, 0px) !important;
    right: 0 !important;
    width: 86vw !important;
    max-width: 86vw !important;
    height: calc(100dvh - var(--labs-admin-bar-height, 0px)) !important;
    z-index: 9999999 !important;
    background: var(--sff-bg-drawer) !important;
    border-left: 1px solid var(--sff-border) !important;
    border-radius: 0 !important;
    box-shadow: -20px 0 50px rgba(0, 0, 0, 0.9) !important;
    overflow-y: auto !important;
    transform: translateX(100%) !important;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    padding: 10px !important;
  }

  .sff-telemetry-sidebar.mobile-drawer-open {
    transform: translateX(0) !important;
  }

  .sff-drawer-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding-bottom: 8px !important;
    border-bottom: 1px solid var(--sff-border) !important;
    margin-bottom: 8px !important;
  }
  .sff-drawer-title-group { display: flex; align-items: center; gap: 6px; }
  .sff-drawer-label { font-size: 10.5px; font-weight: 800; color: var(--sff-text-dark); }
  .sff-drawer-close-btn {
    background: var(--sff-bg-control);
    border: 1px solid var(--sff-border);
    color: var(--sff-text-muted);
    width: 26px;
    height: 26px;
    border-radius: 2px;
    font-size: 16px;
    cursor: pointer;
    line-height: 19px;
  }
}

/* FEED NAVIGATION & PAGE FOOTERS /* 

Breadcrumb Navigation */
.sff-breadcrumb-nav { 
  padding: 10px 0 0 14px; 
  margin: 0px -14px 14px -14px; 
  font-size: 10.5px; 
}
.sff-breadcrumb-nav .breadcrumb-link { 
  color: var(--sff-text-active); 
  text-decoration: none; 
  font-weight: 700; 
}
.sff-breadcrumb-nav .breadcrumb-separator { 
  margin: 0 6px; 
  color: var(--sff-text-muted); 
}
.sff-breadcrumb-nav .breadcrumb-current { 
  color: var(--sff-text-dark); 
  font-weight: 700; 
}

/* Pagination / Load More Footer */
.sff-load-more-footer {
  margin: 0px -12px -12px -12px;
  padding: 12px 14px;
  background: var(--sff-bg-control);
  border-top: 1px solid var(--sff-border);
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  border-bottom-left-radius: var(--sff-radius);
  border-bottom-right-radius: var(--sff-radius);
}
.sff-load-more-btn {
  background: var(--sff-bg-panel);
  border: 1px solid var(--sff-border);
  color: var(--sff-text-active);
  font-size: 10.5px;
  font-weight: 800;
  font-family: 'JetBrains Mono', monospace;
  padding: 4px 12px;
  border-radius: var(--sff-radius-sm);
  cursor: pointer;
  transition: all 0.15s ease;
  text-transform: uppercase;
}
.sff-load-more-btn:hover { 
  border-color: var(--sff-text-active); 
  color: var(--sff-text-dark); 
}

/* Page Footnote Links & Sync Status */
.sff-explorer-footnote-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
}
.sff-explorer-footnote, #sync-status {
  font-size: 9.5px;
  font-weight: 700;
  color: var(--sff-text-muted);
  text-transform: uppercase;
  text-decoration: none;
}
.sff-explorer-footnote:hover { 
  color: var(--sff-sky-text); 
  text-decoration: underline; 
}

@media (max-width: 768px) {
  .sff-explorer-footnote-container { 
    flex-direction: column !important; 
    gap: 8px !important; 
    text-align: center !important; 
  }
}

/* Container Gap Overrides */
.sff-right-box-top, 
.sff-right-box-main { 
  gap: 0; 
}

/* Feed Container Base Scroll Region */
.sff-results-feed {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 4px 12px 12px 0;
  max-height: calc(100vh - 180px);
  overflow-y: auto;
}



/* 2. Form Inputs, Comboboxes, Telemetry Deck & Sidebars */

/* css/ui.css */
/* ==========================================================================
   2. FORM CONTROLS, COMBOBOXES & TELEMETRY PANELS (/database/css/ui.css)
   ========================================================================== */

/* Docked Tab Bars */
.sff-docked-tab-bar {
  display: flex;
  align-items: center;
  background: var(--sff-bg-control);
  border-bottom: 1px solid var(--sff-border);
  margin: -12px -12px 8px -12px;
  padding: 0;
  width: calc(100% + 24px);
  box-sizing: border-box;
  overflow-x: auto;
  border-top-left-radius: var(--sff-radius);
  border-top-right-radius: var(--sff-radius);
}

.sff-docked-tab {
  flex: 1 1 0px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 8px;
  font-size: 10px;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  color: var(--sff-text-muted);
  background: transparent;
  border: none;
  border-right: 1px solid var(--sff-border-subtle);
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
  border-radius: 0;
}
.sff-docked-tab:last-child { border-right: none; }
.sff-docked-tab:hover { color: var(--sff-text-dark); background: rgba(255, 255, 255, 0.04); }
.sff-docked-tab.active {
  background: var(--sff-bg-panel);
  color: var(--sff-text-active);
  border-bottom: 2px solid var(--sff-text-active);
}

/* Segmented Controls */
.segmented-control {
  display: flex;
  background: var(--sff-bg-control);
  padding: 2px;
  border-radius: var(--sff-radius-sm);
  border: 1px solid var(--sff-border);
  gap: 2px;
  width: 100%;
  box-sizing: border-box;
}

.segment-btn:not(.sff-docked-tab) {
  flex: 1 1 auto;
  background: transparent;
  border: none;
  padding: 4px 6px;
  font-size: 9.5px;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  color: var(--sff-text-muted);
  border-radius: 2px;
  cursor: pointer;
  transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
  text-align: center;
  white-space: nowrap;
  text-transform: uppercase;
}
.segment-btn:not(.sff-docked-tab):hover { color: var(--sff-text-dark); background: rgba(255, 255, 255, 0.04); }
.segment-btn:not(.sff-docked-tab).active {
  background: rgba(255, 255, 255, 0.08);
  color: var(--sff-sky-text);
  border: 1px solid var(--sff-border-accent);
}

/* Form Inputs & Combobox Engine */
.input-group { position: relative; width: 100%; box-sizing: border-box; }
.input-group label {
  display: block;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--sff-text-muted);
  margin-bottom: 4px;
  text-transform: uppercase;
}

.combobox-input, .sff-dropdown-select, .sff-text-input {
  width: 100%;
  height: 30px !important;
  padding: 4px 8px !important;
  border: 1px solid var(--sff-border) !important;
  border-radius: var(--sff-radius-sm);
  font-size: 11px !important;
  font-weight: 600;
  font-family: 'JetBrains Mono', monospace;
  background-color: var(--sff-bg-control) !important;
  color: var(--sff-text-dark) !important;
  outline: none;
  transition: border-color 0.12s ease;
  box-sizing: border-box;
}
.sff-dropdown-select { width: auto; flex-shrink: 0; }
.case-search-input { background: #000000; color: #f4f4f5; border: 1px solid rgb(255 255 255 / 10%); border-radius: 6px; font-weight: 600; width: auto; min-width: 100%; }
.combobox-input:focus, .sff-dropdown-select:focus, .sff-text-input:focus {
  border-color: var(--sff-sky);
}

.combobox-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  max-height: 220px;
  overflow-y: auto;
  background: var(--sff-bg-panel);
  border: 1px solid var(--sff-border);
  border-radius: var(--sff-radius-sm);
  margin-top: 2px;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.9);
  z-index: 99999;
  display: none;
  padding: 2px 0;
}
.combobox-dropdown.active { display: block; }

.sff-searchable-combobox { position: relative; width: 100%; flex: 1; min-width: 0; }
.sff-searchable-combobox input { padding-right: 32px; }
.sff-searchable-combobox .combobox-input { padding-right: 32px; }

.combobox-clear-btn { 
  position: absolute; 
  right: 8px; 
  top: 40%; 
  transform: translateY(-50%); 
  width: 20px; 
  height: 20px; 
  padding: 0; 
  margin: 0; 
  background: transparent; 
  border: none; 
  border-radius: 50%; 
  color: var(--sff-text-muted); 
  cursor: pointer; 
  z-index: 10; 
  display: none; 
  align-items: center; 
  justify-content: center; 
  box-sizing: border-box; 
  transition: color 0.15s ease, background-color 0.15s ease; 
}
.combobox-clear-btn .sff-clear-icon { width: 12px; height: 12px; min-width: 12px; min-height: 12px; max-width: 12px; max-height: 12px; display: block; stroke: currentColor; pointer-events: none; }
.combobox-clear-btn:hover { color: var(--sff-rose-text, #f43f5e); background-color: rgba(244, 63, 94, 0.15); }

.combobox-dropdown .combobox-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 600;
  color: var(--sff-text-dark);
  cursor: pointer;
  font-family: 'JetBrains Mono', monospace;
}
.combobox-dropdown .combobox-item:hover,
.combobox-dropdown .combobox-item.active-keyboard-option { background: rgba(56, 189, 248, 0.15); color: var(--sff-sky-text); }
.combobox-dropdown .combobox-item.hidden { display: none; }

.combobox-ai-badge {
  font-family: monospace;
  font-size: 9px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 2px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  white-space: nowrap;
  margin-left: 8px;
  flex-shrink: 0;
}
.combobox-ai-badge.fit-pass {
  background: rgba(16, 185, 129, 0.15);
  color: var(--sff-emerald-text, #10b981);
  border: 1px solid rgba(16, 185, 129, 0.4);
}
.combobox-ai-badge.fit-fail {
  background: rgba(244, 63, 94, 0.15);
  color: var(--sff-rose-text, #f43f5e);
  border: 1px solid rgba(244, 63, 94, 0.4);
}

/* Range Sliders */
.label-wrapper { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2px; }
.slider-badge {
  background: rgba(56, 189, 248, 0.15);
  color: var(--sff-sky-text);
  border: 1px solid rgba(56, 189, 248, 0.3);
  font-size: 9px;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 2px;
  font-family: 'JetBrains Mono', monospace;
}
.sff-slider {
  -webkit-appearance: none;
  width: 100%;
  height: 3px;
  border-radius: 2px;
  outline: none;
  margin: 6px 0;
  background: var(--sff-slider-track);
}
.sff-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 11px;
  height: 11px;
  background: var(--sff-sky);
  border-radius: 50%;
  cursor: pointer;
}
.range-labels { display: flex; justify-content: space-between; font-size: 8.5px; color: var(--sff-text-muted); }

.cooling-subpanel { display: none; }
.cooling-subpanel.active { display: block; }
.layout-warning-box {
  display: none;
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.3);
  color: var(--sff-amber-bright-text, #fbbf24);
  padding: 5px 6px;
  border-radius: 2px;
  font-size: 9px;
  font-weight: 600;
  margin-top: 4px;
}
.layout-warning-box.active { display: block; }

/* Search and Sort Control Header Row */
.search-and-stats-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 0 0 0;
}
.search-and-sort-controls-group { display: flex; gap: 6px; align-items: center; }
.fit-stats { font-size: 10px; font-weight: 700; color: var(--sff-text-muted); }

/* Right Telemetry Sidebar Components */
.sff-telemetry-sidebar {
  gap: 10px;
  font-size: 10px;
  line-height: 1.45;
}

.sff-telemetry-audit-btn {
  width: 100%;
  height: 30px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}

.sff-telemetry-display {
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-height: 120px;
  background: var(--sff-bg-control);
  border: 1px solid var(--sff-border-subtle);
  border-radius: var(--sff-radius-sm);
  padding: 11px;
  box-sizing: border-box;
  font-size: 10px;
  line-height: 1.45;
}

.telemetry-case-header {
  display: flex;
  flex-direction: column;
  gap: 5px;
  border-bottom: 1px solid var(--sff-border-subtle);
  padding-bottom: 8px;
  min-width: 0;
}

.telemetry-case-title {
  display: block;
  min-width: 0;
  color: var(--sff-text-dark);
  font-size: 12px;
  line-height: 1.3;
  font-weight: 800;
  letter-spacing: .015em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.telemetry-case-subrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.telemetry-case-meta {
  min-width: 0;
  color: var(--sff-text-muted);
  font-size: 10px;
  line-height: 1.25;
}

.sff-telemetry-display .audit-status-badge {
  flex: 0 0 auto;
  padding: 4px 8px;
  font-size: 9.5px;
  line-height: 1;
}

.sff-telemetry-display .audit-pill {
  font-size: 10px;
  line-height: 1.15;
  padding: 4px 8px;
}

.telemetry-mode-row {
  margin-top: 2px;
  padding: 4px 7px;
  border: 1px solid var(--sff-border-accent);
  border-radius: 2px;
  background: var(--sff-bg-panel);
  font-size: 10px;
  line-height: 1.3;
}

.telemetry-mode-active { color: var(--sff-amber-bright-text, #fbbf24); }
.telemetry-spine-active { color: var(--sff-sky-text); }

.telemetry-clearance-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-top: 2px;
  font-size: 10px;
  line-height: 1.4;
}

.telemetry-info-row {
  display: grid;
  grid-template-columns: minmax(118px, .9fr) minmax(0, 1.35fr);
  align-items: center;
  gap: 10px;
  min-height: 30px;
  padding: 5px 7px;
  border: 1px solid var(--sff-border);
  border-radius: 2px;
  background: rgba(255,255,255,0.03);
  font-size: 10px;
  line-height: 1.4;
}

.telemetry-info-label {
  min-width: 0;
  color: var(--sff-text-muted);
}

.telemetry-info-value {
  min-width: 0;
  font-weight: 800;
  text-align: right;
  overflow-wrap: anywhere;
}

.telemetry-evidence-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 7px;
  border: 1px solid var(--sff-border);
  border-radius: 2px;
  background: rgba(255,255,255,0.025);
}

.telemetry-evidence-card .telemetry-info-row {
  padding: 0;
  min-height: 0;
  border: 0;
  background: transparent;
}

.telemetry-evidence-detail {
  color: var(--sff-text-muted);
  font-size: 10px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.telemetry-cable-risk,
.telemetry-relational-row {
  padding: 5px 7px;
  border-radius: 2px;
  font-size: 10px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.telemetry-cable-risk {
  color: var(--sff-amber-bright-text, #fbbf24);
  background: rgba(245,158,11,0.1);
  border: 1px solid rgba(245,158,11,0.3);
}

.telemetry-relational-row {
  color: var(--sff-purple-text, #c084fc);
  background: rgba(192,132,252,0.08);
  border: 1px solid rgba(192,132,252,0.28);
}

.telemetry-diagnostic {
  padding: 7px;
  border-radius: 2px;
  font-size: 10px;
  line-height: 1.45;
}

.telemetry-diagnostic-title {
  display: block;
  margin-bottom: 3px;
  font-size: 10px;
}

.telemetry-diagnostic-list {
  margin: 0;
  padding-left: 15px;
  font-size: 10px;
  line-height: 1.5;
}

.telemetry-diagnostic-fail {
  color: var(--sff-rose-bright-text, #f87171);
  background: rgba(244,63,94,0.1);
  border: 1px solid rgba(244,63,94,0.3);
}
.telemetry-diagnostic-fail .telemetry-diagnostic-title { color: var(--sff-rose-text, #f43f5e); }

.telemetry-diagnostic-warn {
  color: var(--sff-amber-bright-text, #fbbf24);
  background: rgba(245,158,11,0.1);
  border: 1px solid rgba(245,158,11,0.3);
}

.telemetry-diagnostic-unknown {
  color: var(--sff-sky-bright-text, #7dd3fc);
  background: rgba(56,189,248,0.08);
  border: 1px solid rgba(56,189,248,0.25);
}
.telemetry-diagnostic-unknown .telemetry-diagnostic-title { color: var(--sff-sky-text, #38bdf8); }

.telemetry-empty-state {
  text-align: center;
  color: var(--sff-text-muted);
  font-size: 10px;
  padding: 16px 4px;
}
.telemetry-empty-state span {
  display: block;
  font-weight: 800;
  color: var(--sff-text-dark);
  margin-bottom: 4px;
}

.sff-pin-tray {
  background: var(--sff-bg-control);
  border: 1px solid var(--sff-border-subtle);
  border-radius: var(--sff-radius-sm);
  padding: 8px;
  min-height: 60px;
}
.pin-empty-notice { font-size: 9.5px; color: var(--sff-text-muted); text-align: center; }

/* Popular Hardware Deck */
.sff-popular-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--sff-bg-control);
  border: 1px solid var(--sff-border-subtle);
  border-radius: var(--sff-radius-sm);
  padding: 8px 10px;
  box-sizing: border-box;
}

.pop-group-block { display: flex; flex-direction: column; gap: 4px; }
.pop-section-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: var(--sff-purple-text);
  text-transform: uppercase;
  border-bottom: 1px dashed var(--sff-border-subtle);
  padding-bottom: 3px;
  margin-bottom: 2px;
}

.pop-list { display: flex; flex-direction: column; gap: 3px; margin: 0; padding: 0; list-style: none; }
.pop-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 6px;
  background: var(--sff-bg-panel);
  border: 1px solid var(--sff-border-subtle);
  border-radius: 2px;
  font-size: 9.5px;
  cursor: pointer;
  transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.pop-item:hover {
  border-color: var(--sff-purple);
  background: rgba(192, 132, 252, 0.08);
  transform: translateX(2px);
}
.pop-item-title { color: var(--sff-text-dark); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; }
.pop-item-meta { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.pop-spec-tag { color: var(--sff-text-muted); font-weight: 700; font-size: 8.5px; }

.pop-ai-badge { font-size: 8px; font-weight: 800; padding: 1px 4px; border-radius: 2px; text-transform: uppercase; }
.pop-ai-badge.fit-pass { background: rgba(16, 185, 129, 0.15); color: var(--sff-emerald-text); border: 1px solid rgba(16, 185, 129, 0.3); }
.pop-ai-badge.fit-fail { background: rgba(244, 63, 94, 0.15); color: var(--sff-rose-text); border: 1px solid rgba(244, 63, 94, 0.3); }
.pop-ai-badge.fit-warn { background: rgba(245, 158, 11, 0.12); color: var(--sff-amber-text, #f59e0b); border: 1px solid rgba(245, 158, 11, 0.3); }

/* Recommendations */
.sff-recommendations-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--sff-bg-control);
  border: 1px solid var(--sff-border-subtle);
  border-radius: var(--sff-radius-sm);
  padding: 8px 10px;
  box-sizing: border-box;
}
.sff-rec-groups-wrapper { display: flex; flex-direction: column; gap: 10px; }

.rec-section-title {
  display: block;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
  text-transform: uppercase;
}

.rec-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.rec-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 3px 6px;
  background: var(--sff-bg-panel);
  border: 1px solid var(--sff-border-subtle);
  border-radius: 2px;
  font-size: 9.5px;
}

.rec-item-name {
  color: var(--sff-text-dark);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}

.rec-item-spec {
  color: var(--sff-text-muted);
  font-weight: 700;
  font-size: 8.5px;
  flex-shrink: 0;
}

/* Light Theme Overrides for UI components */
[data-theme="light"] .sff-docked-tab-bar { background: #e2e8f0; border-bottom-color: #cbd5e1; }
[data-theme="light"] .sff-docked-tab { color: #526173; border-right-color: #cbd5e1; }
[data-theme="light"] .sff-docked-tab.active { background: #ffffff; color: var(--sff-text-active); border-bottom-color: #0284c7; }
[data-theme="light"] .segmented-control, [data-theme="light"] .combobox-input, [data-theme="light"] .sff-dropdown-select { background: #e2e8f0; border-color: #cbd5e1; color: #0f172a; }
[data-theme="light"] .segment-btn:not(.sff-docked-tab).active { background: #ffffff; color: var(--sff-text-active); border-color: #cbd5e1; }
[data-theme="light"] .sff-telemetry-display, [data-theme="light"] .sff-pin-tray { background: #f8fafc; border-color: #e2e8f0; }
[data-theme="light"] .sff-card-label,
[data-theme="light"] .sff-group-label,
[data-theme="light"] .input-group > label,
[data-theme="light"] .label-wrapper > label,
[data-theme="light"] .range-labels,
[data-theme="light"] .fit-stats,
[data-theme="light"] .telemetry-info-label,
[data-theme="light"] .telemetry-case-meta,
[data-theme="light"] .sff-insight-reference,
[data-theme="light"] .sff-near-fit-topology,
[data-theme="light"] .sff-collapse-title,
[data-theme="light"] .sff-collapse-summary-right {
  color: var(--sff-text-muted);
}

@media (max-width: 1024px) {
  input[type="text"], input[type="number"], input[type="search"], select, textarea, .combobox-input, .sff-dropdown-select, .sff-text-input, .case-search-input {
    font-size: 11px !important;
    touch-action: manipulation;
  }
}


/* ==========================================================================
   COLLAPSIBLE CONFIGURATOR DOCKS + HARDWARE INSIGHTS (DBUIBRIDGE3)
   ========================================================================== */
.sff-collapse-card { padding: 0 !important; overflow: visible; }
.sff-collapse-summary {
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  box-sizing: border-box;
}
.sff-collapse-summary::-webkit-details-marker { display: none; }
.sff-collapse-summary::marker { content: ''; }
.sff-collapse-title {
  color: var(--sff-text-muted);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.sff-collapse-summary-right { display: inline-flex; align-items: center; gap: 7px; color: var(--sff-text-muted); font-size: 8.5px; font-weight: 800; white-space: nowrap; }
.sff-collapse-chevron { width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .15s ease; }
.sff-collapse-card[open] > .sff-collapse-summary { border-bottom: 1px solid var(--sff-border-subtle); }
.sff-collapse-card[open] > .sff-collapse-summary .sff-collapse-chevron { transform: rotate(225deg) translate(-1px,-1px); }
.sff-collapse-summary:hover .sff-collapse-title, .sff-collapse-summary:hover .sff-collapse-summary-right { color: var(--sff-sky-text); }
.sff-collapse-body { display: flex; flex-direction: column; gap: 10px; padding: 10px; box-sizing: border-box; }
.sff-collapse-body .sff-pin-tray { margin: 0; }
.sff-drawer-footnote { color: var(--sff-text-muted); font-size: 8px; line-height: 1.45; padding-top: 2px; }

.sff-hardware-insights-card { overflow: hidden; }
.sff-insights-header-bar { align-items: stretch; gap: 6px; padding-right: 0; }
.sff-insights-title-area { min-width: 0; flex: 1 1 auto; overflow: hidden; }
.sff-insight-header-tabs { display: flex; align-self: stretch; flex: 0 0 auto; min-width: 0; margin: -8px 0; border-left: 1px solid var(--sff-border-subtle); }
.sff-insight-mode-tab {
  min-width: 64px;
  padding: 0 8px;
  box-sizing: border-box;
  white-space: nowrap;
  border: 0;
  border-left: 1px solid var(--sff-border-subtle);
  background: var(--sff-bg-control);
  color: var(--sff-text-muted);
  font: 800 9.5px/1 'JetBrains Mono', monospace;
  letter-spacing: .04em;
  cursor: pointer;
}
.sff-insight-mode-tab:first-child { border-left: 0; }
.sff-insight-mode-tab:hover { color: var(--sff-text-dark); }
.sff-insight-mode-tab.active { color: var(--sff-sky-text); background: var(--sff-bg-panel); box-shadow: inset 0 -2px 0 var(--sff-sky); }
.sff-insight-panel[hidden] { display: none !important; }
.sff-insight-panel { display: flex; flex-direction: column; gap: 6px; }
.sff-near-fit-toolbar { display: flex; align-items: center; gap: 5px; }
.sff-near-fit-tabs { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 3px; flex: 1; }
.sff-popular-tabs { grid-template-columns: repeat(4,minmax(0,1fr)); }
.sff-near-fit-tab, .sff-near-fit-refresh, .sff-near-fit-load {
  border: 1px solid var(--sff-border);
  background: var(--sff-bg-control);
  color: var(--sff-text-muted);
  border-radius: 3px;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 800;
  cursor: pointer;
  box-sizing: border-box;
}
.sff-near-fit-tab { height: 27px; padding: 0 3px; font-size: 9.5px; }
.sff-near-fit-tab.active { color: #000; background: var(--sff-sky); border-color: var(--sff-sky); }
.sff-near-fit-refresh { flex: 0 0 auto; height: 27px; padding: 0 7px; font-size: 9px; }
.sff-near-fit-refresh:hover, .sff-near-fit-load:hover { color: var(--sff-sky-text); border-color: var(--sff-sky); }
.sff-insight-reference { color: var(--sff-text-muted); font-size: 10px; line-height: 1.5; overflow-wrap: anywhere; }
.sff-near-fit-results { display: flex; flex-direction: column; gap: 7px; }
.sff-near-fit-empty { padding: 10px 8px; border: 1px dashed var(--sff-border); border-radius: 4px; color: var(--sff-text-muted); font-size: 10px; line-height: 1.5; text-align: center; }
.sff-near-fit-result { background: var(--sff-bg-control); border: 1px solid var(--sff-border); border-radius: 4px; padding: 9px; }
.sff-near-fit-result-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 7px; }
.sff-near-fit-result-label { min-width: 0; color: var(--sff-text-dark); font-size: 10px; font-weight: 800; line-height: 1.4; overflow-wrap: anywhere; }
.sff-near-fit-load { flex: 0 0 auto; height: 24px; padding: 0 7px; font-size: 9px; color: var(--sff-emerald-text); border-color: rgba(16,185,129,.35); }
.sff-near-fit-metrics { color: var(--sff-emerald-text); font-size: 9.5px; line-height: 1.45; margin-top: 5px; }
.sff-near-fit-topology { color: var(--sff-text-muted); font-size: 9px; line-height: 1.35; margin-top: 4px; text-transform: uppercase; letter-spacing: .025em; }
.sff-near-fit-topology .fit-pass { color: var(--sff-emerald-text); }
.sff-near-fit-topology .fit-warn { color: var(--sff-amber-text); }
.sff-near-fit-topology .fit-fail { color: var(--sff-rose-text); }

.ws-support-lines { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ws-support-line { color: var(--sff-text-muted); font-size: 11px; line-height: 1.35; overflow-wrap: anywhere; }
.ws-support-line strong { color: var(--sff-text-dark); font-weight: 700; }
.ws-support-line.ws-rad-location strong { color: var(--sff-emerald-text); }

[data-theme="light"] .sff-insight-mode-tab { background: #f1f5f9; border-color: #e2e8f0; }
[data-theme="light"] .sff-insight-mode-tab.active { background: #fff; color: var(--sff-text-active); box-shadow: inset 0 -2px 0 #0284c7; }
[data-theme="light"] .sff-near-fit-result, [data-theme="light"] .sff-near-fit-tab, [data-theme="light"] .sff-near-fit-refresh, [data-theme="light"] .sff-near-fit-load { background: #f8fafc; border-color: #e2e8f0; }
[data-theme="light"] .sff-near-fit-tab.active { background: #0369a1; color: #fff; border-color: #0369a1; }

@media (max-width: 1200px) {
  .sff-insight-header-tabs { margin-left: auto; }
  .sff-insight-mode-tab { min-width: 58px; padding: 0 6px; }
}

/* Light-theme foreground normalization for legacy standalone case search. */
[data-theme="light"] .case-search-input {
  background: #e2e8f0;
  border-color: #cbd5e1;
  color: var(--sff-text-dark);
}


/* 3. Fullscreen Audit Modals, Diff Boxes & Spec Popups */

/* css/modals.css */
/* ==========================================================================
   3. AUDIT REPORT MODAL & SPEC NOTES MODAL (/database/css/modals.css)
   ========================================================================== */

/* Audit Report Modal Backdrop & Frame */
.sff-modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(5, 6, 8, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999999 !important;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease-in-out;
}
.sff-modal-backdrop.active { opacity: 1; pointer-events: auto; }

.sff-modal-container {
  width: 92%;
  max-width: 980px;
  height: 85vh;
  max-height: 820px;
  background: var(--sff-bg-global);
  border: 1px solid var(--sff-border);
  border-radius: var(--sff-radius);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.95);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-family: 'JetBrains Mono', SFMono-Regular, Consolas, monospace;
}

.sff-modal-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: var(--sff-bg-panel);
  border-bottom: 1px solid var(--sff-border);
}

.sff-modal-status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  color: var(--sff-text-muted);
}
.sff-modal-tagline { color: var(--sff-text-dark); letter-spacing: 0.5px; }
.sff-modal-build-hash { color: var(--sff-text-active); font-family: inherit; }

.sff-modal-top-actions { display: flex; align-items: center; gap: 12px; }

.sff-modal-tabs {
  display: flex;
  background: var(--sff-bg-control);
  border-radius: var(--sff-radius-sm);
  padding: 2px;
  border: 1px solid var(--sff-border);
}

.sff-tab-btn {
  background: transparent;
  border: none;
  color: var(--sff-text-muted);
  padding: 4px 12px;
  font-size: 10px;
  font-weight: 700;
  border-radius: 2px;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, opacity 0.15s ease, transform 0.15s ease;
  text-transform: uppercase;
}
.sff-tab-btn.active { background: var(--sff-blue); color: #ffffff; }

.sff-modal-close-icon {
  background: none;
  border: none;
  color: var(--sff-text-muted);
  font-size: 18px;
  cursor: pointer;
  line-height: 1;
}
.sff-modal-close-icon:hover { color: var(--sff-text-dark); }

.sff-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  background: var(--sff-bg-global);
  color: var(--sff-text-dark);
}

.sff-modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: var(--sff-bg-panel);
  border-top: 1px solid var(--sff-border);
}

/* Modal Content Blocks */
.audit-header-block {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-bottom: 1px solid var(--sff-border);
  padding-bottom: 12px;
}
.audit-header-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
}
.audit-title-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.audit-main-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--sff-text-dark);
  margin: 0;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
.audit-subtitle {
  font-size: 11px;
  color: var(--sff-text-muted);
  margin: 4px 0 0 0;
  line-height: 1.4;
}

.audit-stack-summary {
  background: var(--sff-bg-control);
  border: 1px solid var(--sff-border-subtle);
  border-radius: var(--sff-radius-sm);
  padding: 8px 10px;
  margin-top: 4px;
}
.audit-section-label {
  display: block;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--sff-text-muted);
  text-transform: uppercase;
  margin-bottom: 4px;
}
.audit-summary-text {
  font-size: 11px;
  font-weight: 700;
  color: var(--sff-text-dark);
  margin: 0;
  line-height: 1.45;
}

/* Additional Audit Status Badges */
.badge-indigo { 
  background: rgba(129, 140, 248, 0.12); 
  color: var(--sff-indigo-text, #818cf8); 
  border-color: rgba(129, 140, 248, 0.3); 
}

.badge-zinc { 
  background: rgba(161, 161, 170, 0.12); 
  color: var(--sff-zinc-text, #a1a1aa); 
  border-color: rgba(161, 161, 170, 0.3); 
}

/* Additional Border Accents */
.accent-zinc { border-left-color: #a1a1aa; }
.accent-indigo { border-left-color: #818cf8; }

/* Additional Audit Card Color Variants */
.card-sky { border-color: rgba(56, 189, 248, 0.3); }
.card-indigo { border-color: rgba(129, 140, 248, 0.3); }
.card-zinc { border-color: var(--sff-border-subtle); }

.audit-pills-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.audit-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: var(--sff-radius-sm);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border: 1px solid transparent;
  white-space: nowrap;
}
.pill-sky { background: rgba(56, 189, 248, 0.12); color: var(--sff-sky-text, #38bdf8); border-color: rgba(56, 189, 248, 0.3); }
.pill-blue { background: rgba(0, 125, 236, 0.15); color: var(--sff-sky-text, #38bdf8); border-color: rgba(0, 125, 236, 0.35); }
.pill-zinc { background: rgba(161, 161, 170, 0.12); color: var(--sff-zinc-text, #a1a1aa); border-color: rgba(161, 161, 170, 0.25); }
.pill-amber { background: rgba(245, 158, 11, 0.12); color: var(--sff-amber-bright-text, #fbbf24); border-color: rgba(245, 158, 11, 0.3); }
.pill-indigo { background: rgba(129, 140, 248, 0.12); color: var(--sff-indigo-text, #818cf8); border-color: rgba(129, 140, 248, 0.3); }

.audit-metadata-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 8px;
  margin-top: 4px;
}
.audit-card {
  background: var(--sff-bg-control);
  border: 1px solid var(--sff-border-subtle);
  border-radius: var(--sff-radius-sm);
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.audit-card-key { font-size: 9.5px; font-weight: 700; color: var(--sff-text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.audit-card-val { font-size: 11.5px; font-weight: 800; }

.text-emerald { color: var(--sff-emerald-bright-text, #34d399); }
.text-amber { color: var(--sff-amber-bright-text, #fbbf24); }
.text-rose { color: var(--sff-rose-bright-text, #f87171); }
.text-sky { color: var(--sff-sky-text, #38bdf8); }
.text-indigo { color: var(--sff-indigo-text, #818cf8); }
.text-zinc { color: var(--sff-zinc-text, #a1a1aa); }

.audit-status-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: var(--sff-radius-sm);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border: 1px solid transparent;
}
.badge-emerald { background: rgba(16, 185, 129, 0.12); color: var(--sff-emerald-bright-text, #34d399); border-color: rgba(16, 185, 129, 0.3); }
.badge-rose { background: rgba(244, 63, 94, 0.12); color: var(--sff-rose-bright-text, #f87171); border-color: rgba(244, 63, 94, 0.3); }
.badge-amber { background: rgba(245, 158, 11, 0.12); color: var(--sff-amber-bright-text, #fbbf24); border-color: rgba(245, 158, 11, 0.3); }

.audit-findings-section { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.audit-findings-grid { display: flex; flex-direction: column; gap: 10px; }
.sff-audit-report-container { display: flex; flex-direction: column; gap: 14px; color: var(--sff-text-dark); background: var(--sff-bg-global); }

.finding-card {
  background: var(--sff-bg-control);
  border: 1px solid var(--sff-border-subtle);
  border-left-width: 4px;
  border-radius: var(--sff-radius-sm);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.audit-code-grid { display: grid; gap: 8px; margin-top: 8px; }
.audit-code-grid.dual-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.audit-code-box {
  background: var(--sff-bg-control);
  border: 1px solid var(--sff-border);
  border-radius: var(--sff-radius-sm);
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow: hidden;
}
.audit-code-box.defective { border-color: rgba(244, 63, 94, 0.4); }
.audit-code-box.refactored { border-color: rgba(16, 185, 129, 0.4); }

#sffReportViewFormatted.hidden, #sffReportViewRaw.hidden, .sff-tab-content.hidden, .hidden { display: none !important; }

/* Centered Spec Notes Modal (.spec-dropdown-box) */
.spec-dropdown-box {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 340px;
  max-width: 88vw;
  max-height: 75vh;
  overflow-y: auto;
  background: var(--sff-bg-panel);
  border: 1px solid var(--sff-border);
  border-left: 3px solid var(--sff-sky);
  padding: 12px 14px;
  border-radius: var(--sff-radius);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.95);
  z-index: 99999999;
  box-sizing: border-box;
  color: var(--sff-text-dark);
}
.spec-dropdown-box.active { display: block; }
.spec-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
  border-bottom: 1px dashed var(--sff-border);
  padding-bottom: 4px;
}
.spec-modal-title { font-size: 11px; font-weight: 800; color: var(--sff-sky-text); font-family: 'JetBrains Mono', monospace; }
.spec-modal-content { font-size: 10.5px; font-weight: 600; font-family: 'JetBrains Mono', monospace; line-height: 1.4; }
.spec-modal-close { background: none; border: none; color: var(--sff-text-muted); cursor: pointer; font-size: 16px; font-weight: 700; line-height: 1; }

/* AUDIT REPORT INTERNAL COMPONENTS & CODE BOXES */

/* Status Badges & Color Helpers */
.badge-sky { background: rgba(56, 189, 248, 0.12); color: var(--sff-sky-text, #38bdf8); border-color: rgba(56, 189, 248, 0.3); }

/* Accent Border Modifiers */
.accent-rose { border-left-color: #f43f5e; }
.accent-amber { border-left-color: #f59e0b; }
.accent-sky { border-left-color: #38bdf8; }
.accent-emerald { border-left-color: #10b981; }

.card-rose { border-color: rgba(244, 63, 94, 0.3); }
.card-amber { border-color: rgba(245, 158, 11, 0.3); }
.card-emerald { border-color: rgba(16, 185, 129, 0.3); }

/* Checklist Boxes */
.audit-checks-box {
  background: var(--sff-bg-control);
  border: 1px solid var(--sff-border-subtle);
  border-radius: var(--sff-radius-sm);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.check-group { font-size: 11px; }
.check-group-title { font-weight: 800; font-size: 10px; letter-spacing: 0.05em; display: block; margin-bottom: 4px; }
.check-group ul { margin: 0; padding-left: 16px; list-style: none; }
.check-group ul li { margin-bottom: 3px; font-weight: 600; color: var(--sff-text-dark); }

/* Audit Finding Cards */
.finding-header { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.finding-tags { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.finding-index { font-size: 10px; font-weight: 800; color: var(--sff-text-muted); }
.finding-title { font-size: 12px; font-weight: 800; color: var(--sff-text-dark); margin: 4px 0; }
.finding-desc { font-size: 11px; color: var(--sff-text-muted); margin: 0; line-height: 1.45; }

/* Code Diff Boxes & Raw Payload Viewer */
.audit-code-grid.single-grid { grid-template-columns: 1fr; }
.audit-code-header { display: flex; justify-content: space-between; align-items: center; padding-bottom: 4px; border-bottom: 1px solid var(--sff-border-subtle); }
.audit-code-title { font-size: 9px; font-weight: 800; letter-spacing: 0.04em; }
.audit-copy-btn {
  background: var(--sff-bg-panel);
  border: 1px solid var(--sff-border);
  color: var(--sff-text-muted);
  font-size: 9px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 2px;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.audit-copy-btn:hover { color: var(--sff-text-dark); border-color: var(--sff-sky); }
.audit-copy-btn.copied { background: rgba(16, 185, 129, 0.2); color: var(--sff-emerald-bright-text, #34d399); border-color: rgba(16, 185, 129, 0.4); }
.audit-code-pre { margin: 0; white-space: pre-wrap; word-break: break-all; font-size: 10.5px; color: var(--sff-text-dark); line-height: 1.45; }

.sff-payload-debug-code {
  background: var(--sff-bg-control);
  border: 1px solid var(--sff-border);
  border-radius: var(--sff-radius-sm);
  padding: 12px;
  color: var(--sff-emerald-bright-text, #34d399);
  font-size: 11px;
  white-space: pre-wrap;
  word-break: break-all;
}

#sffReportViewFormatted { width: 100%; box-sizing: border-box; }
#sffReportViewRaw {
  width: 100%;
  max-height: 60vh;
  overflow-y: auto;
  background-color: var(--sff-bg-control);
  color: var(--sff-text-dark);
  padding: 16px;
  border-radius: var(--sff-radius-sm);
  border: 1px solid var(--sff-border);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  white-space: pre-wrap;
  word-break: break-all;
  box-sizing: border-box;
}

/* Modal Footer Actions */
.sff-footer-status { display: flex; align-items: center; gap: 8px; font-size: 11px; }
.sff-footer-label { color: var(--sff-text-muted); font-weight: 600; }
.sff-status-pill.completed {
  background: rgba(16, 185, 129, 0.15);
  color: var(--sff-emerald-text, #10b981);
  border: 1px solid rgba(16, 185, 129, 0.3);
  padding: 2px 6px;
  border-radius: 2px;
  font-weight: 800;
  font-size: 10px;
}
.sff-footer-actions { display: flex; align-items: center; gap: 6px; }
.sff-action-pill, .sff-export-pill {
  background: var(--sff-bg-control);
  border: 1px solid var(--sff-border);
  color: var(--sff-text-dark);
  padding: 4px 8px;
  border-radius: 2px;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
}
.sff-action-pill:hover, .sff-export-pill:hover { border-color: var(--sff-sky); color: var(--sff-sky-text); }
.sff-modal-btn-close {
  background: var(--sff-bg-control);
  border: 1px solid var(--sff-border);
  color: var(--sff-text-dark);
  padding: 4px 12px;
  border-radius: 2px;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
}

/* ==========================================================================
   GIANT IMAGE GALLERY WORKSPACE COMPONENTS
   ========================================================================== */
.gallery-workspace {
  display: flex;
  flex-direction: column;
  gap: 14px;
  height: 100%;
}

/* Gallery Category Tab Group Extensions */
.gallery-tab-group {
  display: flex;
  background: var(--sff-bg-control, #121318);
  border-radius: 2px;
  padding: 2px;
  border: 1px solid var(--sff-border, rgba(255, 255, 255, 0.12));
}

.gallery-tab-btn {
  background: transparent;
  border: none;
  color: var(--sff-text-muted, #71717a);
  padding: 4px 12px;
  font-size: 10px;
  font-weight: 700;
  border-radius: 2px;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, opacity 0.15s ease, transform 0.15s ease;
  text-transform: uppercase;
  font-family: 'JetBrains Mono', monospace;
}

.gallery-tab-btn.active {
  background: var(--sff-sky, #38bdf8);
  color: #000000;
}

/* Hero Stage (Large Active Photo) */
.gallery-hero-stage {
  position: relative;
  width: 100%;
  height: 380px;
  min-height: 320px;
  background: #000000;
  border: 1px solid var(--sff-border, rgba(255, 255, 255, 0.12));
  border-radius: var(--sff-radius-sm, 2px);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.gallery-hero-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}

.gallery-hero-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(5, 6, 8, 0.92));
  padding: 14px 18px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
}

.gallery-hero-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.gallery-hero-title {
  font-size: 13px;
  font-weight: 800;
  color: #ffffff;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: -0.2px;
}

.gallery-hero-meta {
  font-size: 10.5px;
  color: var(--sff-text-muted, #71717a);
  display: flex;
  align-items: center;
  gap: 8px;
}

.gallery-hero-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(13, 17, 28, 0.85);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  width: 36px;
  height: 36px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 20px;
  font-weight: 800;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, opacity 0.15s ease, transform 0.15s ease;
  z-index: 5;
}

.gallery-hero-nav:hover {
  background: var(--sff-sky, #38bdf8);
  color: #000000;
  border-color: var(--sff-sky, #38bdf8);
}

.gallery-hero-prev { left: 12px; }
.gallery-hero-next { right: 12px; }

/* Sprawling Thumbnail Grid Viewport */
.gallery-grid-viewport {
  flex: 1;
  overflow-y: auto;
  border: 1px solid var(--sff-border-subtle, rgba(255, 255, 255, 0.08));
  border-radius: var(--sff-radius-sm, 2px);
  padding: 10px;
  background: var(--sff-bg-control, #121318);
}

.gallery-sprawling-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(115px, 1fr));
  gap: 8px;
}

.gallery-thumb-card {
  aspect-ratio: 16 / 11;
  background: #000000;
  border: 1px solid var(--sff-border, rgba(255, 255, 255, 0.12));
  border-radius: 3px;
  overflow: hidden;
  cursor: pointer;
  opacity: 0.55;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, opacity 0.15s ease, transform 0.15s ease;
  position: relative;
}

.gallery-thumb-card.active,
.gallery-thumb-card:hover {
  opacity: 1;
  border-color: var(--sff-sky, #38bdf8);
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.35);
}

.gallery-thumb-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gallery-thumb-badge {
  position: absolute;
  bottom: 3px;
  right: 3px;
  background: rgba(0, 0, 0, 0.85);
  color: var(--sff-sky, #38bdf8);
  font-size: 8px;
  font-weight: 800;
  padding: 1px 4px;
  border-radius: 2px;
}

/* Centered Spec Notes Modal */

/* ==========================================================================
   LIGHT THEME CONTRAST — MODAL CHROME
   ========================================================================== */
.gallery-case-title {
  color: #ffffff;
  font-weight: 800;
  font-size: 12px;
}
.gallery-topbar-meta {
  color: #38bdf8;
  font-weight: 700;
  font-size: 11px;
  margin-left: 8px;
}
.gallery-footer-page {
  color: #71717a;
  font-weight: 700;
  font-size: 10.5px;
}
.gallery-empty-message {
  color: #38bdf8;
  font-weight: 800;
  font-size: 13px;
}
[data-theme="light"] #sffGalleryModal .gallery-case-title {
  color: var(--sff-text-dark);
}
[data-theme="light"] #sffGalleryModal .gallery-topbar-meta,
[data-theme="light"] #sffGalleryModal .gallery-empty-message {
  color: var(--sff-sky-text);
}
[data-theme="light"] #sffGalleryModal .gallery-footer-page {
  color: var(--sff-text-muted);
}
/* The hero remains a dark media surface in both themes. */
[data-theme="light"] #sffGalleryModal .gallery-hero-meta {
  color: #cbd5e1;
}
[data-theme="light"] #sffGalleryModal .gallery-hero-overlay .pill-sky {
  color: #38bdf8;
}

[data-theme="light"] .sff-tab-btn.active {
  background: #0369a1;
  color: #ffffff;
}


/* 4. Shared Card Borders, Buttons, Status Badges & Canvas */

/* css/card-core.css */
/* ==========================================================================
   CARD CORE FOUNDATIONS (/database/css/card-core.css)
   ========================================================================== */

/* Base Card Shell & State Borders */
.case-card {
  background: var(--sff-bg-card);
  border: 1px solid var(--sff-border);
  border-left: 4px solid var(--sff-emerald);
  border-radius: var(--sff-radius);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.case-card.incompatible { border-left-color: var(--sff-rose); }
.case-card.amber-warning { border-left-color: var(--sff-amber); }

.case-card.selected-case {
  border-color: var(--sff-emerald);
  box-shadow: 0 0 15px rgba(16, 185, 129, 0.15);
}

.case-card.pinned-case {
  border-color: var(--sff-sky);
}

/* ==========================================================================
   TAG & BADGE SYSTEM
   ========================================================================== */
.status-badge, 
.tag-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'JetBrains Mono', monospace, sans-serif;
  font-size: 9.5px;
  font-weight: 800;
  height: 22px;
  padding: 0 8px;
  border-radius: 2px;
  text-transform: uppercase;
  line-height: 1.2;
  white-space: nowrap;
  box-sizing: border-box;
}

/* Compatibility Status Badges */
.status-badge.fits { 
  background: rgba(16, 185, 129, 0.15); 
  color: var(--sff-emerald-text, #10b981); 
  border: 1px solid rgba(16, 185, 129, 0.35); 
}

.status-badge.nofit { 
  background: rgba(244, 63, 94, 0.15); 
  color: var(--sff-rose-text, #f43f5e); 
  border: 1px solid rgba(244, 63, 94, 0.35); 
}

.status-badge.warning { 
  background: rgba(245, 158, 11, 0.15); 
  color: var(--sff-amber-text, #f59e0b); 
  border: 1px solid rgba(245, 158, 11, 0.35); 
}

/* Spec & Metadata Tags */
.tag-badge.volume-display-tag { 
  background: rgba(56, 189, 248, 0.15); 
  color: var(--sff-sky-text, #38bdf8); 
  border: 1px solid rgba(56, 189, 248, 0.35); 
}

.status-badge.purple-layout { 
  background: rgba(192, 132, 252, 0.12); 
  color: var(--sff-purple-text, #c084fc); 
  border: 1px solid rgba(192, 132, 252, 0.3); 
}

.status-badge.spine-badge { 
  background: rgba(129, 140, 248, 0.15); 
  color: var(--sff-indigo-text, #818cf8); 
  border: 1px solid rgba(129, 140, 248, 0.35); 
}

.status-badge.mode-badge {
  background: #00bcd44f;
  color: var(--sff-cyan-text, #00bcd4);
  border: 1px solid #00bcd459;
}

.status-badge.legacy-badge { 
  background: rgba(156, 163, 175, 0.15); 
  color: var(--sff-text-muted, #9ca3af); 
  border: 1px solid rgba(156, 163, 175, 0.3); 
}

/* Sidebar Badge Grid */
.sidebar-badge-stack { 
  display: grid; 
  grid-template-columns: repeat(2, 1fr); 
  gap: 4px; 
  width: 100%; 
  margin-top: 6px; 
}

.sidebar-badge-stack .status-badge, 
.sidebar-badge-stack .tag-badge {
  width: 100%;
  text-align: center;
  padding: 2px 0;
  font-size: 8.5px;
}

/* ==========================================================================
   BUTTON & ACTION TOOLBAR CONTROLS
   ========================================================================== */
.sff-pin-card-btn, 
.sff-validate-card-btn, 
.sff-3d-hook-btn, 
.sff-community-builds-toggle-btn,
.case-external-action-link {
  background: var(--sff-bg-control);
  border: 1px solid var(--sff-border);
  color: var(--sff-text-dark);
  font-size: 9.5px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 2px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
  line-height: 1.2;
  box-sizing: border-box;
  height: 23px;
  font-family: 'JetBrains Mono', monospace;
  white-space: nowrap;
}

/* Broad navigation applies only to normal live-feed cards. Explicit controls
   remain individually interactive and are excluded by delegated JS. */
.case-card[data-card-nav-slug] { cursor: pointer; }
.ws-case-nav-link { color: inherit; text-decoration: none; }

.sff-pin-card-btn:hover,
.sff-validate-card-btn:hover,
.sff-3d-hook-btn:hover,
.sff-community-builds-toggle-btn:hover {
  border-color: var(--sff-sky);
  color: #ffffff;
}

.sff-pin-card-btn.active-pin { 
  background: var(--sff-sky); 
  color: #000000; 
  border-color: var(--sff-sky);
}

.sff-validate-card-btn.selected { 
  background: var(--sff-emerald); 
  color: #000000; 
  border-color: var(--sff-emerald);
}

.sff-community-builds-toggle-btn.active {
  background: rgba(56, 189, 248, 0.15);
  color: var(--sff-sky-text);
  border-color: var(--sff-sky);
}

.sff-validate-card-btn:disabled { 
  opacity: 0.35; 
  cursor: not-allowed; 
}

.case-external-action-link { 
  font-size: 9.5px; 
  font-weight: 700; 
  text-decoration: none; 
}
.case-external-action-link.direct-link-type { color: var(--sff-link-direct); }
.case-external-action-link.affiliate-link-type { color: var(--sff-link-affiliate); }

/* Dynamic Spine Status Bar */
.spine-status-bar-restored {
  display: none;
  background: var(--sff-bg-control);
  border: 1px solid var(--sff-border);
  border-radius: var(--sff-radius-sm);
  padding: 6px 10px;
  margin-top: 6px;
  justify-content: space-between;
  align-items: center;
  font-size: 9.5px;
  font-weight: 800;
  font-family: 'JetBrains Mono', monospace;
  text-transform: uppercase;
  width: 100%;
  box-sizing: border-box;
}
.spine-status-bar-restored.active { display: flex; }

/* Micro Blueprint Canvas & Footer Stack */
.card-footer-stack { width: 100%; margin-top: 6px; }

.sff-blueprint-wrapper {
  background: #000000;
  border: 1px solid var(--sff-border);
  border-radius: var(--sff-radius-sm);
  padding: 4px;
  font-size: 115%;
}

.sff-blueprint-wrapper text,
.sff-blueprint-canvas {
  font-size: 1.15em;
}

.spec-micro-toggle {
  display: inline-flex;
  align-items: center;
  color: var(--sff-text-muted);
  background: var(--sff-bg-control);
  border: 1px solid var(--sff-border);
  padding: 2px 6px;
  border-radius: 2px;
  font-size: 8.5px;
  font-weight: 800;
  font-family: 'JetBrains Mono', monospace;
  cursor: pointer;
  transition: border-color 0.12s ease, color 0.12s ease, background-color 0.12s ease;
  margin-top: 2px;
}
.spec-micro-toggle:hover { color: var(--sff-sky-text); border-color: var(--sff-sky); }

.extra-specs-toggle-btn {
  display: block;
  width: 100%;
  background: var(--sff-bg-control);
  border: 1px solid var(--sff-border);
  border-radius: var(--sff-radius-sm);
  color: var(--sff-text-dark);
  font-size: 9.5px;
  font-weight: 800;
  text-align: center;
  padding: 5px 8px;
  margin-top: 15px;
  cursor: pointer;
}

/* Color-Coded Diagnostic Log Messages */
.diagnostic-log {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  margin: 0px 0 0 0;
  padding: 4px 0px;
  border-radius: var(--sff-radius-sm, 2px);
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}

.diagnostic-log:empty {
  display: none;
}

.diagnostic-log.pass,
.diagnostic-log.fits,
.diagnostic-log.success {
  color: var(--sff-emerald-text, #10b981);
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.diagnostic-log.warn,
.diagnostic-log.warning {
  color: var(--sff-amber-text, #f59e0b);
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.diagnostic-log.fail,
.diagnostic-log.nofit,
.diagnostic-log.error,
.diagnostic-log.incompatible {
  color: var(--sff-rose-text, #f43f5e);
  background: rgba(244, 63, 94, 0.12);
  border: 1px solid rgba(244, 63, 94, 0.3);
}

[data-theme="light"] .sff-pin-card-btn:hover:not(.active-pin),
[data-theme="light"] .sff-validate-card-btn:hover:not(.selected):not(:disabled),
[data-theme="light"] .sff-3d-hook-btn:hover,
[data-theme="light"] .sff-community-builds-toggle-btn:hover:not(.active),
[data-theme="light"] .case-external-action-link:hover {
  background: #e0f2fe;
  border-color: #38bdf8;
  color: #0369a1;
}

[data-theme="light"] .sff-pin-card-btn.active-pin:hover {
  background: var(--sff-sky);
  border-color: var(--sff-sky);
  color: #000;
}

[data-theme="light"] .sff-validate-card-btn.selected:hover {
  background: var(--sff-emerald);
  border-color: var(--sff-emerald);
  color: #000;
}

[data-theme="light"] .sff-community-builds-toggle-btn.active:hover {
  background: rgba(56, 189, 248, 0.18);
  border-color: var(--sff-sky);
  color: #0369a1;
}

[data-theme="light"] .ws-layer-btn:hover:not(.disabled-layer) {
  background: #e0f2fe;
  border-color: #38bdf8;
  color: #0369a1;
}

/* ==========================================================================
   CASE LAYER CONTROL SECTION
   ========================================================================== */
.ws-layer-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--sff-bg-panel, #0d111c);
  border: 1px solid var(--sff-border-subtle, rgba(255, 255, 255, 0.08));
  border-radius: 3px;
  padding: 6px 12px;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.ws-layer-label {
  font-size: 11px;
  font-weight: 800;
  color: var(--sff-text-muted, #71717a);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ws-layer-buttons {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.ws-layer-btn {
  background: var(--sff-bg-control, #121318);
  border: 1px solid var(--sff-border, rgba(255, 255, 255, 0.12));
  color: var(--sff-text-dark, #f4f4f5);
  font-size: 9.5px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 3px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
  font-family: 'JetBrains Mono', monospace;
  height: 24px;
  box-sizing: border-box;
}

.ws-layer-btn:hover:not(.disabled-layer) {
  border-color: var(--sff-sky, #38bdf8);
  color: #ffffff;
  background: rgba(56, 189, 248, 0.1);
}

.ws-layer-btn.active {
  background: rgba(56, 189, 248, 0.18);
  color: var(--sff-sky-text, #38bdf8);
  border-color: var(--sff-sky, #38bdf8);
}

.ws-layer-btn.disabled-layer {
  opacity: 0.35;
  cursor: not-allowed;
}

/* ==========================================================================
   COMMUNITY BUILDS DRAWER FEED & CARD MATRIX
   ========================================================================== */

.ws-community-builds-drawer {
  background: var(--sff-bg-control);
  border: 1px solid var(--sff-border);
  padding: 16px;
  box-sizing: border-box;
  width: 100%;
  margin-top:10px;
}

.community-builds-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
  width: 100%;
}

.community-build-card {
  background: var(--sff-bg-card, #121318);
  border: 1px solid var(--sff-border, rgba(255, 255, 255, 0.12));
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.community-build-card:hover {
  transform: translateY(-3px);
  border-color: var(--sff-sky, #38bdf8);
}

/* Fixed Image Cover Wrapper */
.community-card-cover-wrapper {
  position: relative;
  width: 100%;
  height: 160px;
  min-height: 160px;
  flex-shrink: 0;
  background: #000000;
  overflow: hidden;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.community-card-lightbox-anchor {
  display: block;
  width: 100%;
  height: 100%;
}

.community-card-cover-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.25s ease;
}

.community-card-cover-wrapper:hover .community-card-cover-img {
  transform: scale(1.03);
}

/* Gallery Photo Counter Badge */
.community-photo-count {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(12, 13, 18, 0.85);
  color: var(--sff-sky, #38bdf8);
  border: 1px solid rgba(56, 189, 248, 0.4);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 800;
  font-family: 'JetBrains Mono', monospace;
  display: flex;
  align-items: center;
  gap: 4px;
  z-index: 2;
  pointer-events: none;
}

/* Gallery Slider Navigation Arrows */
.community-card-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.75);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease, background 0.15s ease;
  z-index: 3;
  padding: 0;
  line-height: 1;
}

.community-card-cover-wrapper:hover .community-card-nav {
  opacity: 1;
}

.community-card-nav:hover {
  background: #0083bd;
  border-color: #38bdf8;
}

.community-nav-prev { left: 6px; }
.community-nav-next { right: 6px; }

/* Interactive Thumbnail Strip */
.community-thumb-strip {
  display: flex;
  gap: 4px;
  padding: 6px 10px;
  background: #000000;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  overflow-x: auto;
}

.community-thumb-dot {
  width: 28px;
  height: 28px;
  border-radius: 3px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: #121318;
  padding: 0;
  cursor: pointer;
  overflow: hidden;
  opacity: 0.5;
  transition: opacity 0.15s, border-color 0.15s;
  flex-shrink: 0;
}

.community-thumb-dot.active,
.community-thumb-dot:hover {
  opacity: 1;
  border-color: #38bdf8;
}

.community-thumb-dot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Card Body & Specs Matrix */
.community-card-link {
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.community-card-body {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
  flex: 1;
}

.community-card-title {
  font-size: 13px;
  font-weight: 800;
  color: var(--sff-text-dark, #f4f4f5);
  margin: 0 0 2px 0;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: -0.2px;
}

.community-specs-matrix {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 4px;
  margin-bottom: 6px;
  border-top: 1px dashed rgba(255, 255, 255, 0.1);
  padding-top: 6px;
}

.community-spec-row {
  display: flex;
  gap: 6px;
  font-size: 11px;
  align-items: center;
}

.community-spec-lbl {
  font-weight: 700;
  color: var(--sff-text-dim, #71717a);
  text-transform: uppercase;
  font-size: 9.5px;
  width: 32px;
  flex-shrink: 0;
}

.community-spec-val {
  color: var(--sff-sky-text, #38bdf8);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
  font-size: 10.5px;
}

.community-card-footer {
  font-size: 10px;
  color: var(--sff-text-dim, #71717a);
  font-weight: 600;
  margin-top: auto;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 6px;
}

/* ==========================================================================
   EDITORIAL REVIEWS DRAWER — NATIVE REVIEW API V2 RENDERER
   ========================================================================== */
.ws-reviews-drawer {
  background: var(--sff-bg-control, #0d111c);
  border: 1px solid var(--sff-border, rgba(255, 255, 255, 0.08));
  padding: 14px;
  box-sizing: border-box;
  width: 100%;
  margin-top: 10px;
}

.review-v2-status {
  text-align: center;
  padding: 14px;
  color: var(--sff-text-muted, #71717a);
  font-size: 11px;
  font-family: 'JetBrains Mono', monospace;
}

.review-summary-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.1);
  font-size: 10.5px;
}

.review-summary-title {
  color: var(--sff-sky-text, #38bdf8);
  font-weight: 800;
}

.review-summary-source {
  color: var(--sff-text-muted, #71717a);
  font-weight: 700;
}

.review-articles-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.review-post-card {
  min-width: 0;
}

.review-post-card + .review-post-card {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 16px;
}

.review-post-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 10px;
}

.review-post-heading-wrap {
  min-width: 0;
}

.review-post-title {
  margin: 0 0 4px 0;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--sff-text-dark, #f4f4f5);
  text-transform: uppercase;
}

.review-post-byline {
  display: block;
  font-size: 10.5px;
  color: var(--sff-text-muted, #71717a);
}

.review-full-article-link {
  flex: 0 0 auto;
  text-decoration: none;
}

.review-sections-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.review-v2-section {
  min-width: 0;
  overflow: hidden;
  background: var(--sff-bg-panel, #090d16);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 5px;
  padding: 12px;
  color: var(--sff-text-dark, #f4f4f5);
}

.review-v2-section-title {
  margin: 0 0 10px 0;
  padding: 0 0 7px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  color: var(--sff-sky-text, #38bdf8);
  font-size: 11px;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

.review-v2-blocks {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.review-v2-copy {
  color: var(--sff-review-copy-text, #b8b8c2);
  font-size: 11.5px;
  line-height: 1.65;
  text-align: left;
  overflow-wrap: anywhere;
}

.review-v2-copy > :first-child { margin-top: 0; }
.review-v2-copy > :last-child { margin-bottom: 0; }
.review-v2-copy p { margin: 0 0 8px 0; }
.review-v2-copy ul,
.review-v2-copy ol { margin: 6px 0 8px 18px; padding: 0; }
.review-v2-copy li { margin: 2px 0; }
.review-v2-copy table { width: 100%; border-collapse: collapse; font-size: 11px; }
.review-v2-copy th,
.review-v2-copy td { padding: 6px 8px; border: 1px solid rgba(255,255,255,.08); text-align: left; }

.review-inline-link,
.review-v2-copy a,
.review-v2-spec-link {
  color: var(--sff-sky-text, #38bdf8);
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 700;
}

.review-inline-link:hover,
.review-v2-copy a:hover,
.review-v2-spec-link:hover {
  color: #ffffff;
}

/* Native repeated hardware/fact grid translated from Cornerstone rows. */
.review-v2-spec-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
  gap: 6px;
  width: 100%;
}

.review-v2-spec-item {
  min-width: 0;
  padding: 9px 10px;
  background: rgba(255, 255, 255, 0.018);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 3px;
}

.review-v2-spec-label {
  display: block;
  margin-bottom: 4px;
  color: var(--sff-sky-text, #38bdf8);
  font-size: 9px;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.review-v2-spec-value {
  color: var(--sff-review-spec-text, #c3c3cb);
  font-size: 10.5px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.review-v2-spec-value p { margin: 0; }

.review-v2-spec-link {
  display: inline-block;
  margin-top: 5px;
  font-size: 9px;
}

/* Standalone and static image grids. */
.review-v2-single-image,
.review-v2-grid-image,
.review-v2-carousel-image-btn,
.review-v2-carousel-thumb,
.review-v2-gallery-card,
.review-v2-gallery-fallback,
.review-v2-lightbox-thumb {
  font: inherit;
}

.review-v2-single-image,
.review-v2-grid-image,
.review-v2-carousel-image-btn {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: #05070c;
  cursor: zoom-in;
}

.review-v2-single-image {
  max-width: 720px;
  margin: 0 auto;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 4px;
  overflow: hidden;
}

.review-v2-image {
  display: block;
  width: 100%;
  max-height: 430px;
  object-fit: contain;
  background: #05070c;
}

.review-v2-image-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 6px;
  width: 100%;
}

.review-v2-grid-image {
  min-height: 150px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 3px;
  overflow: hidden;
}

.review-v2-grid-image .review-v2-image {
  height: 100%;
  min-height: 150px;
  max-height: 260px;
  object-fit: cover;
  transition: transform .18s ease;
}

.review-v2-grid-image:hover .review-v2-image {
  transform: scale(1.02);
}

/* Lightweight native carousel. Cornerstone runtime is never loaded in /db. */
.review-v2-carousel {
  width: 100%;
  min-width: 0;
}

.review-v2-carousel-stage {
  position: relative;
  display: flex;
  align-items: stretch;
  justify-content: center;
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 220px;
  max-height: 460px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 4px;
  background: #05070c;
}

.review-v2-carousel-image-btn {
  flex: 1 1 auto;
  min-width: 0;
}

.review-v2-carousel-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #05070c;
}

.review-v2-carousel-nav {
  position: absolute;
  top: 50%;
  z-index: 2;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 38px;
  padding: 0;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 3px;
  background: rgba(5,7,12,.82);
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.review-v2-carousel-prev { left: 7px; }
.review-v2-carousel-next { right: 7px; }
.review-v2-carousel-nav:hover { border-color: rgba(56,189,248,.55); color: var(--sff-sky-text, #38bdf8); }

.review-v2-carousel-counter {
  position: absolute;
  right: 8px;
  bottom: 8px;
  z-index: 2;
  padding: 3px 6px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 2px;
  background: rgba(5,7,12,.84);
  color: #c8c8d0;
  font-size: 9px;
  font-weight: 800;
}

.review-v2-carousel-thumbs {
  display: flex;
  gap: 5px;
  margin-top: 5px;
  overflow-x: auto;
  scrollbar-width: thin;
  padding-bottom: 2px;
}

.review-v2-carousel-thumb {
  flex: 0 0 70px;
  height: 48px;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 2px;
  background: #05070c;
  opacity: .62;
  cursor: pointer;
}

.review-v2-carousel-thumb.active {
  border-color: var(--sff-sky, #38bdf8);
  opacity: 1;
}

.review-v2-carousel-thumb-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Deferred Cornerstone lightboxes become compact local gallery cards. */
.review-v2-gallery-card,
.review-v2-gallery-fallback {
  width: 100%;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(56,189,248,.22);
  border-radius: 4px;
  background: rgba(56,189,248,.025);
  color: inherit;
  cursor: pointer;
  text-align: left;
}

.review-v2-gallery-card {
  display: grid;
  grid-template-columns: minmax(180px, 34%) 1fr;
  min-height: 116px;
}

.review-v2-gallery-preview {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  min-width: 0;
  background: #05070c;
}

.review-v2-gallery-preview-1 { grid-template-columns: 1fr; }
.review-v2-gallery-preview-2 { grid-template-columns: repeat(2, 1fr); }

.review-v2-gallery-thumb {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 114px;
  object-fit: cover;
}

.review-v2-gallery-meta {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
  padding: 12px 14px;
}

.review-v2-gallery-meta > span,
.review-v2-gallery-fallback > span {
  color: var(--sff-zinc-text, #a1a1aa);
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
}

.review-v2-gallery-meta strong,
.review-v2-gallery-fallback strong {
  color: var(--sff-sky-text, #38bdf8);
  font-size: 10.5px;
  letter-spacing: .02em;
}

.review-v2-gallery-card:hover,
.review-v2-gallery-fallback:hover {
  border-color: rgba(56,189,248,.5);
  background: rgba(56,189,248,.055);
}

.review-v2-gallery-fallback {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
}

/* Safe provider-normalized video embed. */
.review-v2-video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 4px;
  background: #05070c;
}

.review-v2-video iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.review-v2-verdict {
  background: rgba(103, 58, 183, 0.10);
  border-color: rgba(103, 58, 183, 0.38);
  border-left: 3px solid var(--sff-purple, #673AB7);
}

.review-v2-verdict .review-v2-section-title {
  color: var(--sff-amber-text, #f59e0b);
}

/* Review-local image lightbox — no Cornerstone JS/CSS dependency. */
.review-v2-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.88);
}

.review-v2-lightbox-shell {
  display: flex;
  flex-direction: column;
  width: min(1100px, 96vw);
  max-height: 94vh;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 5px;
  background: var(--sff-bg-control, #0d111c);
  box-shadow: 0 24px 80px rgba(0,0,0,.5);
}

.review-v2-lightbox-header {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 38px;
  padding: 0 10px 0 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  font-family: 'JetBrains Mono', monospace;
}

.review-v2-lightbox-title {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--sff-sky-text, #38bdf8);
  font-size: 10px;
  font-weight: 800;
}

.review-v2-lightbox-counter {
  color: var(--sff-text-muted, #71717a);
  font-size: 9.5px;
  font-weight: 700;
}

.review-v2-lightbox-close {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.review-v2-lightbox-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  flex: 1 1 auto;
  background: #030407;
}

.review-v2-lightbox-image {
  display: block;
  max-width: 100%;
  max-height: calc(94vh - 125px);
  object-fit: contain;
}

.review-v2-lightbox-nav {
  position: absolute;
  top: 50%;
  z-index: 2;
  transform: translateY(-50%);
  width: 34px;
  height: 46px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 3px;
  background: rgba(5,7,12,.78);
  color: #fff;
  font-size: 25px;
  cursor: pointer;
}

.review-v2-lightbox-prev { left: 10px; }
.review-v2-lightbox-next { right: 10px; }

.review-v2-lightbox-thumbs {
  display: flex;
  gap: 5px;
  min-height: 58px;
  padding: 6px 8px;
  overflow-x: auto;
  border-top: 1px solid rgba(255,255,255,.08);
  background: var(--sff-bg-panel, #090d16);
}

.review-v2-lightbox-thumb {
  flex: 0 0 68px;
  height: 44px;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 2px;
  background: #05070c;
  opacity: .58;
  cursor: pointer;
}

.review-v2-lightbox-thumb.active {
  border-color: var(--sff-sky, #38bdf8);
  opacity: 1;
}

.review-v2-lightbox-thumb-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Staggered-deploy fallback for the previous API shape. */
.review-v2-legacy-html {
  color: var(--sff-review-copy-text, #b8b8c2);
  font-size: 11.5px;
  line-height: 1.6;
}

.review-v2-legacy-html .x-section,
.review-v2-legacy-html .x-div {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  float: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.review-v2-legacy-html .x-row,
.review-v2-legacy-html .x-row-inner {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
  gap: 8px !important;
  width: 100% !important;
  margin: 8px 0 !important;
  padding: 0 !important;
}

.review-v2-legacy-html .x-col {
  width: 100% !important;
  padding: 8px !important;
  box-sizing: border-box !important;
}

/* Legacy image-grid classes can still appear during a staggered deployment. */
.sff-review-image-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 6px;
  margin: 8px 0;
  width: 100%;
}

.sff-review-img-frame {
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 3px;
  background: #05070c;
}

.sff-review-grid-img {
  display: block;
  width: 100%;
  max-height: 320px;
  object-fit: contain;
}

@media (max-width: 720px) {
  .ws-reviews-drawer { padding: 10px; }

  .review-post-header {
    flex-direction: column;
    align-items: stretch;
  }

  .review-full-article-link {
    align-self: flex-start;
  }

  .review-v2-section { padding: 10px; }

  .review-v2-spec-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .review-v2-carousel-stage {
    aspect-ratio: 4 / 3;
    min-height: 180px;
  }

  .review-v2-gallery-card {
    grid-template-columns: 1fr;
  }

  .review-v2-gallery-preview {
    height: 120px;
  }

  .review-v2-gallery-thumb { min-height: 120px; }

  .review-v2-lightbox {
    padding: 8px;
  }

  .review-v2-lightbox-shell {
    width: 100%;
    max-height: 96vh;
  }

  .review-v2-lightbox-image {
    max-height: calc(96vh - 120px);
  }
}

@media (max-width: 460px) {
  .review-summary-source { display: none; }
  .review-v2-spec-grid { grid-template-columns: 1fr; }
  .review-v2-image-grid { grid-template-columns: 1fr; }
  .review-v2-carousel-thumb { flex-basis: 58px; height: 42px; }
  .review-v2-lightbox-nav { width: 30px; height: 42px; }
}

/* ==========================================================================
   DOCUMENTED BUILD FILTERS (COMMUNITY BUILDS + MASTER GALLERY)
   ========================================================================== */
.sff-build-filter-bar {
  width: 100%;
  box-sizing: border-box;
  margin: 0 0 14px 0;
  padding: 10px;
  background: rgba(5, 7, 12, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  font-family: 'JetBrains Mono', monospace;
}

.sff-build-filter-head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  margin-bottom: 8px;
}

.sff-build-filter-title {
  color: var(--sff-sky-text, #38bdf8);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.sff-build-filter-status {
  margin-left: auto;
  color: var(--sff-text-muted, #71717a);
  font-size: 8.5px;
  font-weight: 700;
  white-space: nowrap;
}

.sff-build-filter-clear {
  flex: 0 0 auto;
  height: 24px;
  padding: 0 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 2px;
  background: var(--sff-bg-control, #0d111c);
  color: var(--sff-text-muted, #71717a);
  font-family: 'JetBrains Mono', monospace;
  font-size: 8.5px;
  font-weight: 800;
  cursor: pointer;
}

.sff-build-filter-clear:hover {
  border-color: var(--sff-sky, #38bdf8);
  color: var(--sff-sky-text, #38bdf8);
}

.sff-build-filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
  gap: 7px;
  width: 100%;
}

.sff-build-filter-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  color: var(--sff-text-muted, #71717a);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.03em;
}

.sff-build-filter-select {
  width: 100%;
  min-width: 0;
  height: 27px;
  box-sizing: border-box;
  padding: 0 24px 0 7px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  background: var(--sff-bg-control, #0d111c);
  color: var(--sff-text-dark, #f4f4f5);
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  font-weight: 700;
  text-overflow: ellipsis;
  cursor: pointer;
}

.sff-build-filter-select:hover,
.sff-build-filter-select:focus {
  border-color: rgba(56, 189, 248, 0.55);
  outline: none;
}

.sff-build-filter-empty {
  margin-top: 10px;
  padding: 10px;
  border: 1px dashed rgba(255, 255, 255, 0.1);
  color: var(--sff-text-muted, #71717a);
  font-size: 9px;
  font-weight: 700;
  text-align: center;
}

.sff-build-filter-empty[hidden] {
  display: none;
}

/* Gallery uses the same filter controls, but as a flush toolbar between the
   modal topbar and image workspace. */
.gallery-build-filter-bar {
  flex: 0 0 auto;
  margin: 0;
  padding: 8px 12px;
  border-width: 0 0 1px 0;
  border-radius: 0;
  background: rgba(5, 7, 12, 0.88);
}

.gallery-build-filter-bar .sff-build-filter-head {
  margin-bottom: 6px;
}

.gallery-build-filter-bar .sff-build-filter-grid {
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
}

@media (max-width: 760px) {
  .sff-build-filter-head {
    flex-wrap: wrap;
  }

  .sff-build-filter-status {
    order: 3;
    width: 100%;
    margin-left: 0;
  }

  .sff-build-filter-grid,
  .gallery-build-filter-bar .sff-build-filter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ==========================================================================
   LIGHT THEME CONTRAST — CONTENT LAYERS
   Dark-theme declarations above remain the source of truth.
   ========================================================================== */
[data-theme="light"] .community-build-card {
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.10);
}
[data-theme="light"] .community-specs-matrix,
[data-theme="light"] .community-card-footer,
[data-theme="light"] .review-summary-bar,
[data-theme="light"] .review-post-card + .review-post-card,
[data-theme="light"] .review-post-header {
  border-color: var(--sff-border-subtle);
}
[data-theme="light"] .review-v2-section {
  border-color: var(--sff-border);
}
[data-theme="light"] .review-v2-copy th,
[data-theme="light"] .review-v2-copy td {
  border-color: var(--sff-border-subtle);
}
[data-theme="light"] .review-v2-spec-item {
  background: #f8fafc;
  border-color: var(--sff-border-subtle);
}
[data-theme="light"] .review-inline-link:hover,
[data-theme="light"] .review-v2-copy a:hover,
[data-theme="light"] .review-v2-spec-link:hover {
  color: var(--sff-text-active);
}
[data-theme="light"] .sff-build-filter-bar {
  background: #f8fafc;
  border-color: var(--sff-border);
}
[data-theme="light"] .gallery-build-filter-bar {
  background: #f8fafc;
  border-color: var(--sff-border);
}
[data-theme="light"] .sff-build-filter-clear,
[data-theme="light"] .sff-build-filter-select,
[data-theme="light"] .sff-build-filter-empty {
  border-color: var(--sff-border);
}
[data-theme="light"] .review-v2-lightbox-close {
  color: var(--sff-text-dark);
}


/* 5. Original Untouched Mobile Card Layouts & Touch Breakpoints */

/* css/card-mobile.css */
/* ==========================================================================
   ISOLATED MOBILE CASE CARD LAYOUT (/database/css/card-mobile.css)
   Desktop-parity data/features with mobile-specific geometry.
   ========================================================================== */

/* Main Mobile Row & Left Media Column */
.card-main-row { display: flex; gap: 14px; align-items: flex-start; width: 100%; }
.card-left-column { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; width: 150px; }

.card-image-wrapper {
  width: 150px;
  height: 150px;
  border: 1px solid var(--sff-border);
  border-radius: var(--sff-radius-sm);
  background: var(--sff-bg-media, #171b22);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  box-sizing: border-box;
  cursor: pointer;
}
.card-image-wrapper img { width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
[data-theme="light"] .card-image-wrapper img { filter: drop-shadow(0 2px 4px rgba(15, 23, 42, 0.28)); }
.card-mobile.single-case-focus .card-image-wrapper:not(a) { cursor: default; }

.card-core-details { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.case-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--sff-border);
  padding-bottom: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;
  gap: 8px;
}
.case-name-static {
  font-size: 14px;
  font-weight: 800;
  color: var(--sff-text-dark);
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  cursor: pointer;
  text-decoration: none;
}
.case-name-static:hover { color: var(--sff-sky-text); }

/* Header controls mirror desktop actions, sized for touch. */
.mobile-card-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  width: 100%;
}

.card-mobile .mobile-card-toolbar .sff-pin-card-btn,
.card-mobile .mobile-card-toolbar .sff-validate-card-btn,
.card-mobile .mobile-card-toolbar .case-external-action-link {
  min-height: 28px;
  height: 28px;
  padding: 0 8px;
  box-sizing: border-box;
}

.card-mobile .mobile-card-toolbar svg,
.card-mobile .ws-layer-btn svg {
  width: 12px;
  height: 12px;
  flex: 0 0 12px;
}

/* Desktop-parity mode/form-factor/clearance blocks. Prefix with .card-mobile so
   these responsive rules keep priority even though card-desktop.css loads last. */
.card-mobile .ws-mode-select-box {
  margin-top: 10px;
}

.card-mobile .ws-form-factor-bar {
  margin-top: 10px;
  flex-wrap: wrap;
  gap: 8px 10px;
}

.card-mobile .ws-ff-pill {
  min-width: 0;
  flex: 1 1 auto;
  flex-wrap: wrap;
}

.card-mobile .ws-ff-val {
  overflow-wrap: anywhere;
}

.card-mobile .ws-clearance-panel {
  margin-top: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.card-mobile .ws-metric-box { min-width: 0; }
.card-mobile .ws-metric-head,
.card-mobile .ws-metric-foot { gap: 6px; }
.card-mobile .ws-metric-val,
.card-mobile .gauge-delta,
.card-mobile .ws-sub-note { overflow-wrap: anywhere; }

.card-mobile .ws-data-grid {
  margin-top: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.card-mobile .ws-data-cell:nth-child(2n) {
  border-right: none;
  padding-right: 0;
}

.card-mobile .ws-layer-bar {
  margin-top: 10px;
}

.card-mobile .ws-layer-buttons {
  flex: 1 1 auto;
  justify-content: flex-end;
}

.card-mobile .ws-layer-btn {
  min-height: 30px;
  height: 30px;
  padding: 4px 9px;
}

/* Legacy metric-grid rules retained for backwards-compatible injected cards. */
.card-metrics-grid-restored {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 10px;
  gap: 8px 10px;
  background: var(--sff-bg-control);
  padding: 10px;
  border: 1px solid var(--sff-border-subtle);
  border-radius: var(--sff-radius-sm);
}

.metric-block { display: flex; flex-direction: column; border-bottom: 1px dashed var(--sff-border); padding-bottom: 4px; position: relative; min-width: 0; }
.metric-label { font-size: 9.5px; font-weight: 700; font-family: 'JetBrains Mono', monospace; color: var(--sff-text-muted); text-transform: uppercase; margin-bottom: 2px; }
.metric-value { font-size: 11.5px; font-weight: 700; color: var(--sff-text-dark); word-break: break-word; font-family: 'JetBrains Mono', monospace; }

/* Technical Specs Drawer */
.extra-specs-drawer {
  display: none;
  background: var(--sff-bg-control);
  border: 1px solid var(--sff-border);
  border-radius: var(--sff-radius-sm);
  padding: 10px;
  margin-top: 15px;
}
.extra-specs-drawer.active { display: block; }

.drawer-specs-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 14px; }
.drawer-metric-item {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  padding: 3px 0;
  border-bottom: 1px dashed var(--sff-border-subtle);
}
.drawer-metric-label { color: var(--sff-text-muted); }
.drawer-metric-value { font-weight: 700; color: var(--sff-text-dark); display: inline-flex; align-items: center; gap: 6px; }

/* Tablet/mobile cards (the JS mobile renderer is active through 1024px). */
@media (max-width: 1024px) {
  .card-mobile .ws-form-factor-bar,
  .card-mobile .ws-data-grid,
  .card-mobile .ws-clearance-panel,
  .card-mobile .ws-layer-bar {
    box-sizing: border-box;
    width: 100%;
  }

  .card-mobile .ws-community-builds-drawer,
  .card-mobile .ws-reviews-drawer {
    width: 100%;
    box-sizing: border-box;
  }
}

/* Mobile Touch Screen Adjustments (<= 768px)
   One authoritative compact-mobile geometry. Phone-only changes are defined
   once at <=520px below instead of overriding an earlier <=520px block. */
@media (max-width: 768px) {
  #caseSortOrder,
  .case-sort-order,
  .sff-dropdown-select,
  .sff-searchable-combobox,
  .case-mode-selector-wrapper,
  .ws-mode-select-box,
  .sff-mode-select {
    width: 100%;
    max-width: 100%;
    flex: 1 1 100%;
    box-sizing: border-box;
  }

  .search-and-sort-controls-group,
  .search-and-stats-row {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 8px;
  }

  .case-mode-selector-wrapper { margin-top: 10px; }

  .card-mobile {
    height: auto;
    width: 100%;
    box-sizing: border-box;
  }

  .card-mobile .card-main-row {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
  }

  .card-mobile .card-core-details { display: contents; }

  .card-mobile .card-left-column {
    grid-column: 1;
    grid-row: 1;
    width: 150px;
    flex-direction: column;
    align-items: center;
  }

  .card-mobile .card-image-wrapper {
    width: 150px;
    height: 150px;
  }

  .card-mobile .sidebar-badge-stack {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
    margin-top: 6px;
  }

  .card-mobile .sidebar-badge-stack .status-badge,
  .card-mobile .sidebar-badge-stack .tag-badge {
    width: 100%;
    box-sizing: border-box;
  }

  .card-mobile .sidebar-badge-stack > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  .card-mobile .case-title-row {
    grid-column: 2;
    grid-row: 1;
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
    align-content: start;
  }

  .card-mobile .mobile-card-toolbar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
  }

  .card-mobile .mobile-card-toolbar .sff-pin-card-btn,
  .card-mobile .mobile-card-toolbar .sff-validate-card-btn {
    width: 100%;
    min-width: 0;
    justify-content: center;
    text-align: center;
  }

  .card-mobile .mobile-card-toolbar .case-external-action-link {
    grid-column: 1 / -1;
    justify-content: center;
  }

  .card-mobile .ws-form-factor-bar { padding: 7px 9px; }

  .card-mobile .ws-clearance-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .card-mobile .ws-clearance-panel .ws-metric-box:last-child {
    grid-column: 1 / -1;
  }

  .card-mobile .ws-data-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 8px 9px;
  }

  .card-mobile .ws-layer-bar {
    align-items: stretch;
    flex-direction: column;
    padding: 7px 9px;
  }

  .card-mobile .ws-layer-buttons {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    gap: 6px;
  }

  .card-mobile .ws-layer-btn {
    width: 100%;
    justify-content: center;
  }

  .card-mobile .card-metrics-grid-restored {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px 12px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--sff-border);
  }

  .card-mobile .drawer-specs-grid {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}

/* Phone geometry begins exactly where the thumbnail reduces to 112px. */
@media (max-width: 520px) {
  .card-mobile {
    --phone-thumb-size: 112px;
    --phone-header-gap: 10px;
  }

  /* Normal header flow at phone width: image left, title/actions right. */
  .card-mobile .card-main-row {
    display: flex;
    gap: var(--phone-header-gap);
    align-items: flex-start;
    width: 100%;
  }

  .card-mobile .card-left-column {
    width: var(--phone-thumb-size);
    flex: 0 0 var(--phone-thumb-size);
    align-items: center;
  }

  .card-mobile .card-image-wrapper {
    width: var(--phone-thumb-size);
    height: var(--phone-thumb-size);
  }

  .card-mobile .card-core-details {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
  }

  .card-mobile .case-title-row {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    border-bottom: 0;
  }

  .card-mobile .case-name-static {
    display: block;
    width: 100%;
    min-width: 0;
    margin: 0 0 4px;
    padding: 0;
    font-size: 12px;
    line-height: 1.2;
  }

  /* Full-width actions prevent VALIDATE -> GENERATE REPORT from squashing. */
  .card-mobile .mobile-card-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
    width: 100%;
    min-width: 0;
    margin: 0;
  }

  .card-mobile .mobile-card-toolbar > * {
    grid-column: 1;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  .card-mobile .mobile-card-toolbar .sff-pin-card-btn,
  .card-mobile .mobile-card-toolbar .sff-validate-card-btn,
  .card-mobile .mobile-card-toolbar .case-external-action-link {
    grid-column: 1;
    justify-content: center;
    text-align: center;
    white-space: nowrap;
  }

  .card-mobile .mobile-card-toolbar .sff-pin-card-btn,
  .card-mobile .mobile-card-toolbar .sff-validate-card-btn {
    font-size: 9px;
  }

  /* Badges remain in normal vertical flow, then escape the narrow detail
     column to consume the full card width beneath image + actions. */
  .card-mobile .sidebar-badge-stack {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
    width: calc(100% + var(--phone-thumb-size) + var(--phone-header-gap));
    max-width: none;
    margin-left: calc((var(--phone-thumb-size) + var(--phone-header-gap)) * -1);
    margin-top: 8px;
    margin-bottom: 0;
    box-sizing: border-box;
  }

  .card-mobile .sidebar-badge-stack .status-badge,
  .card-mobile .sidebar-badge-stack .tag-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    text-align: center;
  }

  .card-mobile .sidebar-badge-stack > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  .card-mobile .ws-form-factor-bar {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .card-mobile .ws-ff-divider { display: none; }
  .card-mobile .ws-ff-pill { justify-content: space-between; width: 100%; }

  .card-mobile .ws-clearance-panel { grid-template-columns: 1fr; }
  .card-mobile .ws-clearance-panel .ws-metric-box:last-child { grid-column: auto; }
}

/* Very narrow phones: secondary metadata finally collapses to one column. */
@media (max-width: 400px) {
  .card-mobile .ws-data-grid { grid-template-columns: 1fr; }

  .card-mobile .ws-data-cell,
  .card-mobile .ws-data-cell:nth-child(2n) {
    border-right: none;
    border-bottom: 1px dashed var(--sff-border-subtle);
    padding: 0 0 7px 0;
  }

  .card-mobile .ws-data-cell:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }
}

/* Mobile renderer ends at 1024px; desktop comparison begins at 1025px. */
@media (max-width: 1024px) {
  .sff-results-feed.side-by-side-comparison {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-height: none;
  }

  .sff-results-feed.side-by-side-comparison .case-card {
    width: 100%;
    height: auto;
    box-sizing: border-box;
  }
}



/* 6. Desktop Workstation 3-Zone Cards, Gauges & HUD Tabs */

/* css/card-desktop.css */
/* ==========================================================================
   DESKTOP CASE CARDS (/database/css/card-desktop.css)
   Namespace: .ws-* 
   ========================================================================== */

.ws-card-feed {
  background: var(--sff-bg-card, #090d16);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.4);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  min-height: min-content;
  flex-shrink: 0;     
}

.ws-card-feed:hover {
  border-color: rgba(56, 189, 248, 0.4);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.55);
}

.ws-card-feed.selected-case {
  border: 1px solid var(--sff-emerald);
  box-shadow: 0 0 18px rgba(16, 185, 129, 0.25);
}

.ws-card-feed.pinned-case {
  border: 1px solid var(--sff-sky);
}

/* Card Header Bar */
.ws-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--sff-bg-media, #171b22);
  border-bottom: 1px solid var(--sff-border-subtle, rgba(255, 255, 255, 0.08));
  padding: 8px 14px;
  flex-wrap: wrap;
  gap: 10px;
  border-radius: 2px;
}

.ws-header-title-block {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.ws-case-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--sff-text-dark, #f4f4f5);
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-decoration: none;
}

.ws-case-title:hover { color: var(--sff-sky-text, #38bdf8); }

.ws-header-badges {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.ws-header-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

/* Card Body Layout */
.ws-card-body {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 16px;
  padding: 14px;
  background: var(--sff-bg-card, #090d16);
}

/* Media Column */
.ws-media-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ws-thumb-container {
  width: 100%;
  height: 180px;
  border: 1px solid var(--sff-border-subtle, rgba(255, 255, 255, 0.08));
  border-radius: 3px;
  background: var(--sff-bg-panel, #0d111c);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  box-sizing: border-box;
  box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.5);
}

.ws-thumb-container img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.6));
}
[data-theme="light"] .ws-thumb-container img {
  filter: drop-shadow(0 2px 4px rgba(15, 23, 42, 0.28));
}

.ws-mode-select-box {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 10px;
}

.ws-mode-lbl {
  font-size: 10px;
  font-weight: 800;
  color: var(--sff-sky-text, #38bdf8);
  letter-spacing: 0.04em;
}

.ws-mode-input {
  width: 100%;
  height: 26px;
  background: var(--sff-bg-panel, #080c14);
  color: var(--sff-text-dark, #f4f4f5);
  border: 1px solid var(--sff-border-accent, rgba(56, 189, 248, 0.3));
  font-size: 11.5px;
  padding: 0 6px;
  border-radius: 2px;
  cursor: pointer;
}

/* Spec Column */
.ws-spec-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Form Factor Bar */
.ws-form-factor-bar {
  display: flex;
  align-items: center;
  background: var(--sff-bg-panel, #0d111c);
  border: 1px solid var(--sff-border-subtle, rgba(255, 255, 255, 0.08));
  border-radius: 3px;
  padding: 6px 12px;
  gap: 12px;
}

.ws-ff-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
}

.ws-ff-lbl {
  color: var(--sff-text-muted, #9ca3af);
  font-weight: 700;
  letter-spacing: 0.03em;
}

.ws-ff-val {
  color: var(--sff-sky-text, #38bdf8);
  font-weight: 800;
}

.ws-ff-divider {
  width: 1px;
  height: 14px;
  background: rgba(255, 255, 255, 0.12);
}

/* Clearance Gauges Panel */
.ws-clearance-panel {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.ws-metric-box {
  background: var(--sff-bg-panel, #0d111c);
  border: 1px solid var(--sff-border-subtle, rgba(255, 255, 255, 0.08));
  border-radius: 3px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ws-metric-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
}

.ws-metric-lbl {
  color: var(--sff-text-muted, #9ca3af);
  font-weight: 700;
  letter-spacing: 0.02em;
}

.ws-metric-val {
  color: var(--sff-text-dark, #f4f4f5);
  font-weight: 800;
}

.gauge-track {
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 2px;
  overflow: hidden;
  margin: 3px 0;
  display: block;
}

.gauge-fill {
  height: 100%;
  width: 0%;
  border-radius: 2px;
  transition: width 0.3s ease, background 0.3s ease;
  display: block;
}

.gauge-cpu-fill { background: var(--sff-sky, #38bdf8); box-shadow: 0 0 6px rgba(56, 189, 248, 0.4); }
.gauge-gpu-fill { background: #f59e0b; box-shadow: 0 0 6px rgba(245, 158, 11, 0.4); }
.gauge-aio-fill { background: #10b981; box-shadow: 0 0 6px rgba(16, 185, 129, 0.4); }

.ws-metric-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
}

.ws-sub-note {
  color: var(--sff-text-muted, #9ca3af);
  font-size: 11px;
}

/* Secondary Technical Data Grid */
.ws-data-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  background: var(--sff-bg-panel, #0d111c);
  border: 1px solid var(--sff-border-subtle, rgba(255, 255, 255, 0.08));
  border-radius: 3px;
  padding: 8px 12px;
  box-sizing: border-box;
}

.ws-data-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-right: 1px dashed rgba(255, 255, 255, 0.06);
  padding-right: 8px;
}

.ws-data-cell:last-child {
  border-right: none;
  padding-right: 0;
}

.ws-cell-label {
  font-size: 10px;
  font-weight: 800;
  color: var(--sff-sky-text, #38bdf8);
  letter-spacing: 0.05em;
  margin-bottom: 2px;
  text-transform: uppercase;
}

.ws-cell-val {
  font-size: 11px;
  color: var(--sff-text-muted, #9ca3af);
  line-height: 1.35;
}

.ws-cell-val strong {
  color: var(--sff-text-dark, #f4f4f5);
  font-weight: 700;
}

/* Side-by-Side Comparison Mode (> 1024px) */
@media (min-width: 1025px) {
  .sff-results-feed.side-by-side-comparison {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    max-height: none;
    width: 100%;
  }

  .side-by-side-comparison .ws-card-feed .ws-card-body {
    grid-template-columns: 140px 1fr;
    gap: 10px;
    padding: 10px;
  }

  .side-by-side-comparison .ws-card-feed .ws-thumb-container {
    height: 100px;
  }

  .side-by-side-comparison .ws-card-feed .ws-form-factor-bar {
    padding: 4px 8px;
    gap: 8px;
    flex-wrap: wrap;
  }

  .side-by-side-comparison .ws-card-feed .ws-ff-pill {
    font-size: 10.5px;
    gap: 4px;
  }

  .side-by-side-comparison .ws-card-feed .ws-clearance-panel {
    gap: 6px;
  }

  .side-by-side-comparison .ws-card-feed .ws-metric-box {
    padding: 6px 8px;
  }

  .side-by-side-comparison .ws-card-feed .ws-data-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    padding: 6px 8px;
  }

  .side-by-side-comparison .ws-card-feed .ws-header-toolbar {
    gap: 4px;
  }

  .side-by-side-comparison .ws-card-feed .sff-pin-card-btn,
  .side-by-side-comparison .ws-card-feed .sff-validate-card-btn,
  .side-by-side-comparison .ws-card-feed .sff-3d-hook-btn,
  .side-by-side-comparison .ws-card-feed .sff-community-builds-toggle-btn,
  .side-by-side-comparison .ws-card-feed .case-external-action-link {
    padding: 0 6px;
    height: 24px;
    font-size: 10px;
  }
}

/* Spine Status Bar & Canvas Stack */
.spine-status-bar-restored {
  display: none;
  justify-content: space-between;
  align-items: center;
  background: rgb(255 255 255 / 5%);
  border: 1px solid rgb(111 111 111 / 20%);
  padding: 4px 12px;
  font-family: monospace;
  font-size: 11.5px;
  margin-top: 0px;
}

.spine-status-bar-restored.active {
  display: flex;
}

.spine-mode-title { font-weight: 800; color: var(--sff-sky-text, #38bdf8); }
.spine-mode-specs { color: var(--sff-text-dark, #f4f4f5); }

.card-footer-stack {
  padding: 0px 0px 0px 0px;
}

.sff-blueprint-wrapper {
  width: 100%;
  height: 45px;
  background: rgb(255 255 255 / 5%);
  border: 1px solid var(--sff-border-subtle, rgb(111 111 111 / 20%));
  border-radius: 2px;
  overflow: hidden;
}

.sff-blueprint-canvas {
  width: 100%;
  height: 100%;
  display: block;
}



@font-face {
    font-family: "JetBrains Mono";
    src: url("/assets/fonts/JetBrainsMono.woff2") format("woff2");
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
}