/* ============================================================
   SWG Legends Resource Tracker — Cockpit aesthetic
   ============================================================ */

:root[data-theme="dark"] {
  --bg: #0c0e10;
  --bg-elev: #14171a;
  --bg-panel: #181c20;
  --bg-row: #14171a;
  --bg-row-alt: #16191d;
  --bg-row-hover: #1f242a;
  --bg-header-row: #0a0c0e;
  --border: #2a3038;
  --border-strong: #3b434c;
  --border-accent: #c8a04a;
  --text: #d6dde6;
  --text-dim: #8a96a3;
  --text-faint: #4f5862;
  --accent: #c8a04a;
  --accent-glow: rgba(200, 160, 74, 0.35);
  --accent-hot: #e8c46c;
  --signal-grey: #5a6470;
  --signal-green: #5db073;
  --signal-yellow: #d8c248;
  --signal-red: #e85a4f;
  --signal-poor: #6c7480;
  --chip-bg: #1d2228;
  --chip-bg-active: #c8a04a;
  --chip-text-active: #0c0e10;
  --shadow: 0 1px 0 rgba(255,255,255,0.02), 0 4px 18px rgba(0,0,0,0.5);
  --bg-pattern-opacity: 0.005;
  /* Subtle downward-only drop-shadow under the table header line */
  --header-line-glow: 0 6px 8px -4px rgba(0,0,0,0.6);
}

:root[data-theme="light"] {
  --bg: #ece6d6;
  --bg-elev: #f4eedd;
  --bg-panel: #f8f3e3;
  --bg-row: #f4eedd;
  --bg-row-alt: #efe9d6;
  --bg-row-hover: #e2d9bf;
  --bg-header-row: #d8cda8;
  --border: #b8ac84;
  --border-strong: #8a7e58;
  --border-accent: #6f4e1f;
  --text: #1c1a14;
  --text-dim: #574e36;
  --text-faint: #8a7e58;
  --accent: #6f4e1f;
  --accent-glow: rgba(111, 78, 31, 0.25);
  --accent-hot: #5a3f17;
  --signal-grey: #8a7e58;
  --signal-green: #3d7a4a;
  --signal-yellow: #9c7a16;
  --signal-red: #a73524;
  --signal-poor: #9b9277;
  --chip-bg: #e5dec1;
  --chip-bg-active: #6f4e1f;
  --chip-text-active: #f8f3e3;
  --shadow: 0 1px 0 rgba(255,255,255,0.6), 0 4px 14px rgba(0,0,0,0.1);
  --bg-pattern-opacity: 0.0;
  --header-line-glow: 0 6px 8px -4px rgba(0,0,0,0.25);
}

/* ---------- Sith dark: Imperial dark, white-on-red accents, prominent red glow ---------- */
:root[data-theme="sith"] {
  --bg: #07080a;
  --bg-elev: #0e1012;
  --bg-panel: #121417;
  --bg-row: #0e1012;
  --bg-row-alt: #111316;
  --bg-row-hover: #1f1416;             /* faint red wash on hover */
  --bg-header-row: #050608;
  --border: #2a2226;
  --border-strong: #3b3035;
  --border-accent: #ff1f1f;            /* lightsaber red */
  --text: #f3f3f3;                     /* near-white */
  --text-dim: #a8acb3;
  --text-faint: #5f636a;
  --accent: #ffffff;                   /* white as primary accent */
  --accent-glow: rgba(255, 24, 24, 0.85);  /* HEAVY red glow on body bg */
  --accent-hot: #ffffff;
  --signal-grey: #5a6470;
  --signal-green: #5db073;
  --signal-yellow: #d8c248;
  --signal-red: #ff3838;
  --signal-poor: #6c7480;
  --chip-bg: #15171a;
  --chip-bg-active: #d11414;
  --chip-text-active: #ffffff;
  --shadow: 0 1px 0 rgba(255,255,255,0.02), 0 4px 18px rgba(0,0,0,0.7);
  --bg-pattern-opacity: 0.005;
  /* Glow tokens — turned way up */
  --sith-glow-soft:   0 0 12px rgba(255, 28, 28, 0.55), 0 0 4px rgba(255, 80, 80, 0.45);
  --sith-glow-strong: 0 0 22px rgba(255, 28, 28, 0.85), 0 0 8px rgba(255, 80, 80, 0.7);
  /* Header line: thick red line + downward-only glow.
     Negative spread (-2px) keeps the glow from extending sideways past
     adjacent cells, so it reads as a single horizontal beam. */
  --header-line-glow: 0 8px 16px -2px rgba(255, 28, 28, 0.7);
}

/* ---------- Sith-only text glows on key labels ---------- */
:root[data-theme="sith"] .brand-name span,
:root[data-theme="sith"] .brand-mark {
  text-shadow: 0 0 10px rgba(255,40,40,0.7), 0 0 4px rgba(255,140,140,0.6);
}
:root[data-theme="sith"] .resource-table thead th.sorted {
  text-shadow: 0 0 8px rgba(255,40,40,0.5);
}
:root[data-theme="sith"] .filter-summary strong {
  text-shadow: 0 0 6px rgba(255,40,40,0.5);
}
:root[data-theme="sith"] a {
  text-shadow: 0 0 6px rgba(255,40,40,0.45);
}

/* Default the Sith-glow tokens to `none` so non-Sith themes can use them
   without conditionals. Sith theme overrides above. */
:root {
  --sith-glow-soft: none;
  --sith-glow-strong: none;
}

/* ============================================================ */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'JetBrains Mono', 'SF Mono', Consolas, Monaco, monospace;
  font-size: 13px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  min-height: 100vh;
  background-image:
    radial-gradient(ellipse 100% 70% at 50% -20%, var(--accent-glow), transparent 70%),
    repeating-linear-gradient(0deg, transparent 0, transparent 2px, rgba(255,255,255,var(--bg-pattern-opacity)) 2px, rgba(255,255,255,var(--bg-pattern-opacity)) 3px);
  background-attachment: fixed;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ============================================================
   Topbar
   ============================================================ */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-elev);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: var(--shadow);
}

.brand {
  display: flex;
  align-items: center;
  gap: 14px;
}

.brand-mark {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  color: var(--accent);
  /* No border, no background, no padding — just the icon */
  position: relative;
}
.brand-mark svg {
  width: 100%;
  height: 100%;
  display: block;
}

.brand-name {
  font-family: 'Orbitron', 'JetBrains Mono', monospace;
  font-weight: 900;
  font-size: 16px;
  letter-spacing: 0.18em;
  color: var(--text);
  /* Match galaxy-select padding-left so they align flush */
  padding-left: 6px;
}
.brand-name span { color: var(--accent); }
.brand-text { position: relative; }

/* Galaxy selector — secondary in hierarchy: smaller text, dimmer treatment */
.galaxy-select {
  font-family: 'Orbitron', 'JetBrains Mono', monospace;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text);
  cursor: pointer;
  margin-top: 4px;
  /* Flush-left with .brand-name (same left padding) */
  padding: 3px 6px;
  transition: all 0.12s ease;
  letter-spacing: 0.18em;
  font-weight: 700;
}
.galaxy-select:hover {
  border-color: var(--border-accent);
  background: var(--bg-panel);
}
.galaxy-select .galaxy-label {
  font-size: 9px;
  letter-spacing: 0.3em;
  color: var(--text-faint);
  font-weight: 500;
}
.galaxy-select .galaxy-name {
  /* Clearly subordinate to .brand-name (16px) */
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--accent);
  font-weight: 700;
}
.galaxy-select .galaxy-chevron {
  color: var(--text-dim);
  transition: transform 0.12s ease;
}
.galaxy-select[aria-expanded="true"] .galaxy-chevron {
  transform: rotate(180deg);
}

/* Galaxy dropdown menu — styled to match the class-tree-panel for consistency */
.galaxy-menu {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 4px;
  background: var(--bg-panel);
  border: 1px solid var(--border-accent);
  padding: 8px;
  z-index: 200;
  min-width: 260px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.galaxy-menu[hidden] {
  display: none;
}
.galaxy-menu-item {
  display: flex;
  flex-direction: column;
  padding: 8px 10px;
  cursor: pointer;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.05em;
  color: var(--text-dim);
  border: 1px solid transparent;
  transition: all 0.12s ease;
}
.galaxy-menu-item:hover {
  background: var(--bg-row-hover);
  color: var(--text);
  border-color: var(--border);
}
.galaxy-menu-item.active {
  color: var(--accent);
  border-color: var(--border-accent);
  background: var(--bg-row-hover);
  font-weight: 700;
}
.galaxy-menu-item .galaxy-menu-name {
  font-size: 13px;
  letter-spacing: 0.08em;
  font-family: 'Orbitron', 'JetBrains Mono', monospace;
  font-weight: 700;
}
.galaxy-menu-item .galaxy-menu-hint {
  font-size: 9px;
  color: var(--text-faint);
  letter-spacing: 0.2em;
  margin-top: 3px;
  font-weight: 500;
  text-transform: uppercase;
}

.topbar-controls {
  display: flex;
  align-items: center;
  gap: 14px;
}

.status-block {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 12px;
  border: 1px solid var(--border);
  background: var(--bg-panel);
}
.status-row {
  display: flex;
  gap: 10px;
  font-size: 11px;
  align-items: baseline;
}
.status-label {
  color: var(--text-faint);
  letter-spacing: 0.15em;
  font-weight: 500;
  min-width: 100px;
}
.status-val {
  color: var(--accent);
  font-weight: 700;
  letter-spacing: 0.05em;
}

.btn-refresh {
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--accent);
  background: var(--bg-panel);
  border: 1px solid var(--border-accent);
  box-shadow: none;                       /* explicit: no glow at rest */
  padding: 10px 18px;
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.btn-refresh:hover:not(:disabled) {
  /* Brighten the accent text color and add the glow.
     Background stays the same as resting state — never flip to white. */
  background: var(--bg-panel);            /* explicit: stay transparent-ish */
  color: var(--accent-hot);
  border-color: var(--border-accent);
  box-shadow: var(--sith-glow-strong, 0 0 12px var(--accent-glow));
}
.btn-refresh:disabled {
  cursor: not-allowed;
  opacity: 0.55;
  color: var(--text-faint);
  border-color: var(--border);
}
.btn-refresh .cooldown {
  font-size: 9px;
  letter-spacing: 0.1em;
  color: var(--text-faint);
  font-weight: 500;
  height: 11px;
}
.btn-refresh:disabled .cooldown { color: var(--signal-yellow); }

.btn-icon {
  /* Explicit fixed size — using aspect-ratio + stretch caused the button
     to balloon and inflate the topbar in some browser configurations. */
  width: 50px;
  height: 50px;
  align-self: center;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  color: var(--text-dim);
  cursor: pointer;
  transition: all 0.15s ease;
  padding: 10px;
}
.btn-icon:hover {
  color: var(--accent);
  border-color: var(--border-accent);
}
.btn-icon #theme-icon {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
}
.btn-icon #theme-icon svg {
  width: 100%;
  height: 100%;
  display: block;
  max-width: 100%;
  max-height: 100%;
}

/* ============================================================
   Filter panel (sticky under topbar)
   ============================================================ */

.filter-panel {
  padding: 14px 24px;
  background: var(--bg-elev);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 4px 8px -3px rgba(0,0,0,0.5);
  position: sticky;
  top: var(--topbar-offset, 67px);    /* matches actual topbar height */
  z-index: 90;
}

/* (The opaque mask strip that used to sit below the filter panel was
   removed in v0.3.0.7 — the JS-driven floating header handles the
   sticky behavior, and the mask was covering part of the floater.) */

.filter-groups {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.filter-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.filter-label {
  font-size: 10px;
  letter-spacing: 0.25em;
  color: var(--text-faint);
  font-weight: 500;
}

/* Class dropdown + clear-all + summary on one row */
.class-tree-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.filter-summary {
  font-size: 11px;
  color: var(--text-dim);
  letter-spacing: 0.05em;
  margin-left: auto;
}
.filter-summary strong {
  color: var(--accent);
  font-weight: 700;
}

.btn-link {
  font-family: inherit;
  font-size: 11px;
  letter-spacing: 0.18em;
  background: none;
  border: 1px solid var(--border);
  color: var(--text-dim);
  cursor: pointer;
  padding: 5px 10px;
  font-weight: 500;
  transition: all 0.15s ease;
}
.btn-link:hover {
  color: var(--accent);
  border-color: var(--border-accent);
}

.chip-container {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  min-height: 28px;
  align-content: flex-start;
}

.chip {
  font-family: inherit;
  font-size: 11px;
  letter-spacing: 0.05em;
  padding: 4px 10px;
  background: var(--chip-bg);
  color: var(--text-dim);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: all 0.12s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  text-transform: capitalize;
}
.chip:hover {
  border-color: var(--border-accent);
  color: var(--text);
}
.chip.active {
  background: var(--chip-bg-active);
  color: var(--chip-text-active);
  border-color: var(--chip-bg-active);
  box-shadow: var(--sith-glow-soft);
  font-weight: 700;
}
.chip-x {
  display: none;
  font-size: 11px;
  font-weight: 700;
  margin-left: 2px;
  opacity: 0.7;
}
.chip.active .chip-x { display: inline; }

.class-tree-wrapper { position: relative; }

.class-tree-toggle {
  font-family: inherit;
  font-size: 11px;
  letter-spacing: 0.05em;
  background: var(--chip-bg);
  color: var(--text);
  border: 1px solid var(--border);
  padding: 5px 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.class-tree-toggle:hover { border-color: var(--border-accent); }

.class-tree-panel {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 4px;
  background: var(--bg-panel);
  border: 1px solid var(--border-accent);
  padding: 14px;
  z-index: 50;
  width: min(560px, 90vw);
  max-height: 60vh;
  overflow-y: auto;
  box-shadow: var(--shadow);
}

.tree-search {
  width: 100%;
  font-family: inherit;
  font-size: 12px;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  padding: 6px 10px;
  margin-bottom: 10px;
  outline: none;
}
.tree-search:focus { border-color: var(--border-accent); }

.tree-node-children {
  margin-left: 14px;
  border-left: 1px dashed var(--border);
  padding-left: 10px;
}
.tree-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 4px;
  cursor: pointer;
  font-size: 12px;
  color: var(--text-dim);
  user-select: none;
}
.tree-row:hover { color: var(--text); background: var(--bg-row-hover); }
.tree-row.selected { color: var(--accent); font-weight: 700; }
.tree-toggle {
  width: 14px;
  display: inline-block;
  text-align: center;
  font-size: 10px;
  color: var(--text-faint);
}
.tree-leaf-mark {
  width: 14px;
  display: inline-block;
  color: var(--text-faint);
  font-size: 9px;
}

/* ============================================================
   Resource table
   ============================================================ */

main {
  padding: 0 24px 80px;
  min-height: calc(100vh - 200px);
}

.empty-state {
  margin: 80px auto;
  text-align: center;
  max-width: 480px;
  padding: 40px 24px;
  border: 1px dashed var(--border);
  background: var(--bg-elev);
}
.empty-title {
  font-family: 'Orbitron', monospace;
  font-size: 18px;
  letter-spacing: 0.3em;
  color: var(--accent);
  margin-bottom: 12px;
}
.empty-msg { color: var(--text-dim); font-size: 13px; }

.loading {
  margin: 80px auto;
  text-align: center;
  max-width: 360px;
}
.loading-bar {
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  background-size: 200% 100%;
  animation: scan 1.4s linear infinite;
  margin-bottom: 14px;
}
@keyframes scan {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
.loading-text {
  font-size: 11px;
  letter-spacing: 0.3em;
  color: var(--text-dim);
}

.table-wrapper {
  margin-top: 18px;            /* detached look */
  border: 1px solid var(--border);
  background: var(--bg-elev);
}

.resource-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 12px;
}

/* Real <thead> in the table flow. We do NOT use position:sticky here
   because it's unreliable in this layout (the floating-header JS handles
   the actual sticky behavior). The real thead still occupies its space
   for column-width measurement and initial display. */
.resource-table thead th {
  background: var(--bg-header-row);
  border-bottom: 3px solid var(--border-accent);
  border-top: 1px solid var(--border);
  box-shadow: var(--header-line-glow, none);
  color: var(--text-dim);
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  padding: 10px 8px;
  text-align: left;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
/* When the floating header is active, hide the real one's visual content
   (but keep its layout space so the column widths don't reflow).
   IMPORTANT: scoped via :not(.floating-header) so it does NOT also hide
   the floating clone's cells. */
body.floating-active .table-wrapper .resource-table thead th {
  visibility: hidden;
}

/* Floating header (JS-driven fallback when CSS sticky doesn't pin correctly).
   This is a fixed-position clone of the real thead, shown while scrolling. */
.floating-header {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: auto;
  background: var(--bg-elev);
  /* Subtle drop shadow indicating this is detached from the table flow */
  box-shadow: 0 8px 12px -6px rgba(0,0,0,0.5);
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
}

/* Mask strip occupying ONLY the 18px gap between the filter panel bottom
   and the floating header top. Mirrors the body background (fixed
   attachment) so the glow shows through, but blocks scrolling row content
   from being briefly visible in that gap. */
.gap-mask {
  position: fixed;
  left: 0;
  right: 0;
  top: var(--sticky-offset, 200px);
  height: 18px;
  z-index: 79;
  pointer-events: none;
  /* Match the body background so the glow continues seamlessly */
  background: var(--bg);
  background-image:
    radial-gradient(ellipse 100% 70% at 50% -20%, var(--accent-glow), transparent 70%),
    repeating-linear-gradient(0deg, transparent 0, transparent 2px, rgba(255,255,255,var(--bg-pattern-opacity)) 2px, rgba(255,255,255,var(--bg-pattern-opacity)) 3px);
  background-attachment: fixed;
  display: none;
}
body.floating-active .gap-mask {
  display: block;
}
.floating-header table.resource-table {
  width: 100%;
}
.floating-header thead th {
  /* In the floating clone, the cells are normally positioned (not sticky). */
  position: static;
  background: var(--bg-header-row);
  border-bottom: 3px solid var(--border-accent);
  border-top: 1px solid var(--border);
  box-shadow: var(--header-line-glow, none);
  color: var(--text-dim);
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  padding: 10px 8px;
  text-align: left;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.floating-header thead th.sorted {
  color: var(--accent);
  background: var(--bg-panel);
}
.floating-header thead th.col-stat {
  text-align: right;
}

/* Breathing room between sticky header line and the first row of resources.
   Achieved by giving the first body row extra top padding. */
.resource-table tbody tr:first-child td {
  padding-top: 16px;
}
.resource-table thead th:hover { color: var(--accent); }
.resource-table thead th.sorted {
  color: var(--accent);
  background: var(--bg-panel);
}
.resource-table thead th .sort-arrow {
  display: inline-block;
  width: 10px;
  margin-left: 4px;
  color: var(--accent);
  opacity: 0;
}
.resource-table thead th.sorted .sort-arrow { opacity: 1; }

.resource-table thead th.col-stat {
  text-align: right;
  width: 52px;
  padding: 10px 4px;
}
.resource-table thead th.col-name { width: 14%; min-width: 130px; }
.resource-table thead th.col-class { width: 16%; min-width: 140px; }
.resource-table thead th.col-planets { width: 14%; min-width: 130px; }
.resource-table thead th.col-date,
.resource-table thead th.col-age { width: 90px; white-space: nowrap; }

.resource-table tbody tr {
  background: var(--bg-row);
  border-bottom: 1px solid var(--border);
}
.resource-table tbody tr:nth-child(even) { background: var(--bg-row-alt); }
.resource-table tbody tr:hover { background: var(--bg-row-hover); }

.resource-table tbody td {
  padding: 7px 8px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

.resource-table .col-stat {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  padding: 7px 4px;
}

.cell-name {
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.02em;
}
.cell-class {
  color: var(--text-dim);
  font-size: 11px;
}
.cell-planets {
  font-size: 11px;
  color: var(--text-dim);
  text-transform: capitalize;
}
.cell-planets .planet-tag {
  display: inline-block;
  margin-right: 4px;
  padding: 1px 5px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
}

.cell-date, .cell-age {
  font-size: 11px;
  color: var(--text-dim);
  white-space: nowrap;
}

/* Stat cells */
.stat-cell { color: var(--signal-poor); font-weight: 500; cursor: help; }
.stat-cell.poor { color: var(--signal-poor); }
.stat-cell.fair { color: var(--signal-green); font-weight: 500; }
.stat-cell.good { color: var(--signal-yellow); font-weight: 600; }
.stat-cell.great { color: var(--signal-red); font-weight: 700; }
.stat-cell.na { color: var(--text-faint); cursor: default; }

/* ============================================================
   Footer
   ============================================================ */

.footer {
  padding: 18px 24px;
  border-top: 1px solid var(--border);
  background: var(--bg-elev);
  font-size: 11px;
  color: var(--text-faint);
  letter-spacing: 0.05em;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}
.footer-version {
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.1em;
  color: var(--accent);
  font-weight: 700;
  opacity: 0.8;
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 900px) {
  .topbar { flex-direction: column; align-items: flex-start; gap: 12px; }
  .topbar-controls { width: 100%; flex-wrap: wrap; }
  .filter-groups { grid-template-columns: 1fr; }
  main { padding: 0 12px 40px; }
  .footer { padding: 14px 12px; flex-direction: column; }
  body { font-size: 12px; }
}

/* Custom scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border-strong); }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }