/* Color system (tech-focused) */
:root{
  --color-bg:#0B0B10;
  --color-surface:#11121A;
  --color-card:#151724;
  --color-text:#FFFFFF;
  --color-text-dim:#C8C9D1;
  --color-primary:#7C3AED; /* purple */
  --color-accent:#22D3EE;  /* cyan */
  --ring: 0 0 0 3px color-mix(in lab, var(--color-primary) 40%, transparent);

  /* Sizing tokens */
  --radius-lg: 1rem;
  --radius-md: .9rem;
  --radius-sm: .6rem;

  --pad-lg: 1rem;
  --pad-md: .75rem;
  --pad-sm: .5rem;
}

/* Reset-ish */
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height:1.5;
  background: radial-gradient(1200px 800px at 80% -10%, rgba(124,58,237,0.15), transparent 60%),
              linear-gradient(180deg, #0B0B10 0%, #0B0B10 100%);
  color:var(--color-text);
}
::selection{ background: color-mix(in lab, var(--color-primary) 40%, transparent); color:#fff; }

/* A11y */
.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; }
.skip-link{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }
.skip-link:focus{ position:fixed; left:1rem; top:1rem; width:auto; height:auto; background:#000; color:#fff; padding:.5rem .75rem; border-radius:.5rem; z-index:1000; }

/* Header */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(17,18,26,0.7);
  backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid rgba(255,255,255,0.06);
  display:flex; align-items:center; gap:1rem;
  padding:.75rem 1rem;
}
.brand{ display:flex; align-items:center; gap:.6rem; }
.brand-icon{ font-size:1.25rem; }
.brand-title{ font-size:1.1rem; margin:0; font-weight:700; letter-spacing:.2px; }

.hamburger{
  margin-left:auto;
  width:42px; height:38px; border:1px solid rgba(255,255,255,0.12);
  background:transparent; border-radius:.6rem; display:inline-flex; align-items:center; justify-content:center; gap:4px; cursor:pointer;
}
.hamburger span{ display:block; width:18px; height:2px; background:var(--color-text); border-radius:2px; }
.hamburger:focus-visible{ outline: none; box-shadow: var(--ring); }

.site-nav{
  position:fixed; inset:60px 0 auto 0; /* mobile drawer */
  background:var(--color-surface);
  transform: translateY(-8px);
  opacity:0; pointer-events:none;
  transition:.25s ease;
  border-bottom:1px solid rgba(255,255,255,0.06);
}
.site-nav.open{ transform: translateY(0); opacity:1; pointer-events:auto; }

.nav-links, .footer-links{
  list-style:none; margin:0; padding:0; display:flex; gap:1rem; flex-wrap:wrap;
}
.site-nav .nav-links{ padding:1rem; border-bottom:1px solid rgba(255,255,255,0.06); }
.site-nav .nav-links a{
  color:var(--color-text); text-decoration:none; font-weight:600;
}
.site-nav .nav-links a:hover{ color:var(--color-accent); }

.nav-controls{ display:flex; gap:.5rem; padding:1rem; align-items:center; flex-wrap:wrap; }
.select{
  background:var(--color-card); color:var(--color-text);
  border:1px solid rgba(255,255,255,0.12); border-radius:.6rem; padding:.5rem .75rem;
}
.select:focus-visible{ outline:none; box-shadow: var(--ring); }

/* Compact mode toggle */
.btn-ghost{
  display:inline-flex; gap:.5rem; align-items:center;
  background:transparent; color:var(--color-text);
  border:1px solid rgba(255,255,255,0.12); border-radius:.6rem;
  height:38px; padding:0 .6rem; cursor:pointer;
}
.btn-ghost:focus-visible{ outline:none; box-shadow: var(--ring); }
.btn-ghost[aria-pressed="true"]{ border-color: color-mix(in lab, var(--color-accent) 60%, transparent); }
.toggle-dot{
  width:14px; height:14px; border-radius:999px; background:rgba(255,255,255,0.35);
}
.btn-ghost[aria-pressed="true"] .toggle-dot{ background:var(--color-accent); }
.toggle-label{ font-weight:600; font-size:.95rem; }

/* Larger than 900px: inline nav */
@media (min-width: 900px){
  .hamburger{ display:none; }
  .site-header{ padding:.75rem 2rem; }
  .site-nav{
    position:static; background:transparent; transform:none; opacity:1; pointer-events:auto; border:none; display:flex; align-items:center; gap:1.5rem; margin-left:auto;
  }
  .site-nav .nav-links{ border:none; padding:0; }
  .nav-controls{ padding:0; }
}

/* Hero & Filter bar */
.hero{
  padding: 2.2rem 1rem 1rem;
  background: radial-gradient(800px 400px at 20% -10%, rgba(34,211,238,0.18), transparent 60%);
}
.hero-inner{ max-width:1100px; margin:0 auto; }
.hero h2{ font-size: clamp(1.4rem, 2.6vw + 1rem, 2.6rem); margin:.25rem 0 .5rem; }
.hero-sub{ color:var(--color-text-dim); max-width:60ch; }

.filter-bar{
  margin-top:1rem; display:flex; gap:.6rem; align-items:center; flex-wrap:wrap;
  background: linear-gradient(180deg, rgba(124,58,237,0.08), rgba(21,23,36,0.6));
  border:1px solid rgba(255,255,255,0.08);
  padding:.6rem; border-radius:.8rem;
}
.filter-input{
  flex:1 1 260px;
  background:var(--color-card); color:var(--color-text);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:.6rem; padding:.6rem .75rem; font-size:1rem;
}
.filter-input:focus-visible{ outline:none; box-shadow: var(--ring); }
.filter-meta{ color:var(--color-text-dim); font-size:.95rem; display:flex; gap:.4rem; }

/* Sections */
.section-head h3{ font-size:1.3rem; margin:0 0 .25rem; }
.section-sub{ color:var(--color-text-dim); margin:.25rem 0 0; }

.categories, .about, .contact{ max-width:1100px; margin:0 auto; padding:2rem 1rem; }

/* Grid */
.grid{
  display:grid; gap:1.2rem;
  grid-template-columns: 1fr;
  margin-top:1rem;
}
@media (min-width:640px){ .grid{ grid-template-columns: repeat(2, 1fr); } }
@media (min-width:1024px){ .grid{ grid-template-columns: repeat(3, 1fr); } }

/* Category Section */
.category{
  background: linear-gradient(180deg, rgba(124,58,237,0.10), rgba(21,23,36,0.7));
  border:1px solid rgba(255,255,255,0.10);
  border-radius:var(--radius-lg); padding:var(--pad-lg);
}
.category-head{
  display:flex; align-items:center; justify-content:space-between; gap:.6rem; margin:0 0 .75rem;
}
.category-title{
  display:flex; align-items:center; gap:.6rem; margin:0; font-size:1.05rem;
}
.category-icon{ font-size:1.1rem; }
.pill{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:32px; height:26px; padding:0 .5rem; border-radius:999px;
  background:rgba(34,211,238,0.15); color:var(--color-accent);
  border:1px solid rgba(34,211,238,0.25);
  font-weight:700; font-size:.9rem;
}
.cards{ display:grid; gap:.75rem; }
.empty{ color:var(--color-text-dim); font-style:italic; }

/* Cards */
.card{
  background:var(--color-card);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:var(--radius-md); overflow:hidden;
}
.card-hit{
  display:block; padding:var(--pad-lg); text-decoration:none; color:var(--color-text);
}
.card-hit:focus-visible{ outline:none; box-shadow: var(--ring); }
.card-icon{ font-size:1.4rem; margin-bottom:.45rem; }
.card-title{ margin:.2rem 0; font-size:1rem; }
.card-desc{ margin:.2rem 0 .6rem; color:var(--color-text-dim); }
.card-link{
  display:inline-block; margin-top:.25rem; font-size:.9rem; font-weight:600;
  color:var(--color-accent);
}

/* Footer */
.site-footer{
  border-top:1px solid rgba(255,255,255,0.06);
  padding:1.25rem 1rem; margin-top:2rem; background:var(--color-surface);
}
.site-footer nav{ max-width:1100px; margin:0 auto; }
.footer-links a{ color:var(--color-text); text-decoration:none; }
.footer-links a:hover{ color:var(--color-accent); }
.site-footer .copyright{ max-width:1100px; margin:.75rem auto 0; color:var(--color-text-dim); }

/* -------- Compact Mode (Pro scanning) -------- */
html.compact .grid{ gap:.9rem; }
html.compact .category{ padding:var(--pad-md); border-radius:var(--radius-md); }
html.compact .cards{ gap:.55rem; }
html.compact .card-hit{ padding:var(--pad-md); }
html.compact .card-icon{ font-size:1.1rem; margin-bottom:.25rem; }
html.compact .card-title{ font-size:.95rem; margin:.1rem 0; }
html.compact .card-desc{ margin:.1rem 0 .2rem; font-size:.9rem; }
html.compact .pill{ height:22px; min-width:28px; font-size:.8rem; }

/* Dense layout on very large screens when compact */
@media (min-width:1280px){
  html.compact .grid{ grid-template-columns: repeat(4, 1fr); }
}

/* ... keep your existing styles.css content ... */

/* Filter bar (unchanged parts kept) */
.filter-bar{
  margin-top:1rem; display:flex; gap:.6rem; align-items:center; flex-wrap:wrap;
  background: linear-gradient(180deg, rgba(124,58,237,0.08), rgba(21,23,36,0.6));
  border:1px solid rgba(255,255,255,0.08);
  padding:.6rem; border-radius:.8rem;
}
.filter-input{
  flex:1 1 260px;
  background:var(--color-card); color:var(--color-text);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:.6rem; padding:.6rem .75rem; font-size:1rem;
}
.filter-input:focus-visible{ outline:none; box-shadow: var(--ring); }
.filter-meta{ color:var(--color-text-dim); font-size:.95rem; display:flex; gap:.4rem; }

/* Clear filter button */
.btn-clear{
  height:38px; padding:0 .7rem; border-radius:.6rem; cursor:pointer;
  background:transparent; color:var(--color-text);
  border:1px solid rgba(255,255,255,0.12);
  display:inline-flex; align-items:center; gap:.4rem;
  transition: border-color .15s ease, opacity .15s ease;
}
.btn-clear:hover{ border-color: rgba(255,255,255,0.25); }
.btn-clear:focus-visible{ outline:none; box-shadow: var(--ring); }
.btn-clear:disabled{ opacity:.45; cursor:not-allowed; }
.btn-clear.visible{ opacity:1; }

.error-banner{
  position: sticky; top:0; z-index:100;
  background: #3b0d0d; color:#fff;
  border-bottom:1px solid rgba(255,255,255,.2);
  padding:.75rem 1rem; font-size:.95rem;
}
.error-banner .error-detail{
  margin-top:.25rem; opacity:.85; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Courier New", monospace;
  font-size:.85rem;
  word-break: break-word;
}

/* === Grid Overrides: 2 cols (mobile) → 4 cols (desktop) ===
   Scope limited to: sections & grid, category blocks & cards.
   - Mobile/Tablet: 2 columns for main catalog and inner cards
   - Desktop (≥1024px): 4 columns for main catalog and inner cards
   - Categories span full grid width
*/

/* Base: 2-column grid everywhere by default */
.grid{
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 1.2rem !important;
  margin-top: 1rem !important;
  max-width: 100%;
}

/* Categories always take a full row of the outer grid */
.grid > .category{
  grid-column: 1 / -1 !important;
}

/* Cards: follow the same rhythm (2 columns by default) and wrap naturally */
.category .cards{
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: .75rem !important;
}

/* Desktop: upgrade both grids to 4 columns */
@media (min-width: 1024px){
  .grid{
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
  .category .cards{
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

/* Compact mode keeps spacing tighter but preserves column counts */
html.compact .grid{ gap: .9rem !important; }
html.compact .category .cards{ gap: .55rem !important; }

/* === Bright Theme Variant ===
   Activates when .theme-bright is present on <html> or <body>.
   Inverts dark theme to bright while keeping structure and spacing identical.
*/

html.theme-bright {
  --color-bg: #F7F7FA;
  --color-surface: #FFFFFF;
  --color-card: #F0F0F4;
  --color-text: #0B0B10;
  --color-text-dim: #444;
  --color-primary: #7C3AED; /* keep purple */
  --color-accent: #22D3EE;  /* keep cyan */
}

/* Adjust background gradients for bright mode */
html.theme-bright body {
  background: radial-gradient(1200px 800px at 80% -10%, rgba(124,58,237,0.08), transparent 60%),
              linear-gradient(180deg, #F7F7FA 0%, #F7F7FA 100%);
}

/* Adjust header transparency look for bright mode */
html.theme-bright .site-header {
  background: rgba(255, 255, 255, 0.8);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  backdrop-filter: saturate(140%) blur(8px);
}

html.theme-bright .site-footer {
  background: var(--color-surface);
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

/* Inputs, selects, and cards get light backgrounds */
html.theme-bright .select,
html.theme-bright .filter-input,
html.theme-bright .btn-clear,
html.theme-bright .btn-ghost,
html.theme-bright .card,
html.theme-bright .category {
  border: 1px solid rgba(0, 0, 0, 0.12);
}

html.theme-bright .card-link {
  color: var(--color-primary);
}

html.theme-bright .category {
  background: linear-gradient(180deg, rgba(124,58,237,0.04), rgba(240,240,244,0.9));
}


/* Ensure cards stretch to their grid cell width */
.category .cards > .card{ width: 100%; }