:root {
  --bg: #17130f;
  --bg-deep: #100d0a;
  --surface: #221c16;
  --surface-hover: #2b2319;
  --border: rgba(243,236,224,0.12);
  --border-strong: rgba(243,236,224,0.22);
  --text-primary: #f3ece0;
  --text-secondary: #b7a996;
  --text-muted: #8a7d6c;
  --amber: #e8a33d;
  --amber-strong: #f5c169;
  --amber-text: #3a2609;
  --teal: #4fc3b5;
  --teal-text: #063733;
  --blue: #7aa2e3;
  --red: #e05a4f;
  --font-display: "Bricolage Grotesque", "Segoe UI", sans-serif;
  --font-body: "Karla", "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }

html, body {
  overflow-x: hidden;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text-primary);
  font-family: var(--font-body);
  line-height: 1.6;
}

.wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 32px;
}

a { color: inherit; }

/* Header / nav */
header.site-header {
  padding: 28px 0 20px;
}
header.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.logo {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}
.logo-mark {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}
.logo-word {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}
.logo-word span { color: var(--amber); }

nav {
  display: flex;
  align-items: center;
  gap: 28px;
}
nav a {
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  color: var(--text-secondary);
  transition: color .15s ease;
}
nav a:hover { color: var(--text-primary); }
.nav-cta {
  padding: 9px 18px;
  border-radius: 8px;
  border: 1px solid var(--border-strong);
  color: var(--text-primary) !important;
}
.nav-cta:hover { border-color: var(--amber); background: rgba(232,163,61,0.08); }

.user-menu { position: relative; }
.user-menu summary {
  list-style: none;
  cursor: pointer;
  font-size: 15px;
  font-weight: 500;
  color: var(--text-secondary);
  transition: color .15s ease;
}
.user-menu summary::-webkit-details-marker { display: none; }
.user-menu summary::after { content: '▾'; font-size: 10px; margin-left: 5px; opacity: 0.7; }
.user-menu summary:hover { color: var(--text-primary); }
.user-menu[open] summary { color: var(--text-primary); }
.user-menu__menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 170px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  padding: 6px;
  box-shadow: 0 12px 30px -12px rgba(0,0,0,0.6);
  z-index: 20;
}
.user-menu__menu a {
  display: block;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
}
.user-menu__menu a:hover { background: var(--surface-hover); color: var(--text-primary); }

.lang-switch { position: relative; }
.lang-switch summary {
  display: flex;
  align-items: center;
  gap: 6px;
  list-style: none;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--text-secondary);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  padding: 7px 12px;
  transition: color .15s ease, border-color .15s ease;
}
.lang-switch summary::-webkit-details-marker { display: none; }
.lang-switch summary:hover { color: var(--text-primary); border-color: var(--amber); }
.lang-switch[open] summary { color: var(--text-primary); border-color: var(--amber); }
.lang-switch__menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 170px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  padding: 6px;
  box-shadow: 0 12px 30px -12px rgba(0,0,0,0.6);
  z-index: 20;
}
.lang-switch__menu a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  text-decoration: none;
}
.lang-switch__menu a:hover { background: var(--surface-hover); color: var(--text-primary); }
.lang-switch__menu a.is-current { color: var(--amber); font-weight: 600; }

.flag-icon {
  width: 18px;
  height: 13px;
  border-radius: 2px;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.14);
}

/* Quick language switcher: always visible in the header (mobile only, next to the burger),
   so choosing a language never requires opening the nav menu first. Icon-only (no 2-letter
   code) so it stays narrow enough to always leave room for the burger next to it - with both
   visible, the header has no space to spare on small phones. Placed after the burger in the
   markup (burger first, language flush right) so if space ever runs out again, it's this
   switcher that gets crowded out, never the menu button. */
.mobile-controls { display: none; align-items: center; gap: 6px; }
.lang-switch--quick summary {
  width: 40px;
  height: 40px;
  padding: 0;
  justify-content: center;
}
.lang-switch--quick .flag-icon { width: 22px; height: 16px; }

/* Mobile nav toggle: hidden on wide screens, shown below the collapse breakpoint. */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  flex-shrink: 0;
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  cursor: pointer;
}
.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--text-primary);
  border-radius: 2px;
  transition: transform .15s ease, opacity .15s ease, top .15s ease;
}
.nav-toggle-bars { position: relative; }
.nav-toggle-bars::before,
.nav-toggle-bars::after { content: ''; position: absolute; left: 0; }
.nav-toggle-bars::before { top: -6px; }
.nav-toggle-bars::after { top: 6px; }
.site-header.nav-open .nav-toggle-bars { background: transparent; }
.site-header.nav-open .nav-toggle-bars::before { top: 0; transform: rotate(45deg); }
.site-header.nav-open .nav-toggle-bars::after { top: 0; transform: rotate(-45deg); }

@media (max-width: 860px) {
  .site-header { position: relative; z-index: 100; }
  .mobile-controls { display: flex; }
  .nav-toggle { display: flex; }
  header.site-header .wrap { flex-wrap: nowrap; gap: 10px; }

  nav {
    position: absolute;
    z-index: 100;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    background: var(--surface);
    border-bottom: 1px solid var(--border-strong);
    padding: 6px 32px 18px;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height .2s ease, opacity .15s ease;
  }
  .site-header.nav-open nav {
    max-height: 80vh;
    opacity: 1;
    overflow-y: auto;
  }
  nav a { padding: 12px 2px; border-bottom: 1px solid var(--border); }
  .user-menu, nav .lang-switch { width: 100%; }
  .user-menu summary, nav .lang-switch summary { padding: 12px 2px; border-bottom: 1px solid var(--border); }
  .user-menu__menu, nav .lang-switch__menu {
    position: static;
    box-shadow: none;
    width: 100%;
    margin: 2px 0 4px;
    padding: 0;
  }
  .nav-cta { text-align: center; margin-top: 6px; }
}

/* Extra breathing room on very narrow phones (~360px and below): tighten the page gutters so
   the logo + quick language flag + burger row never has to fight for space. */
@media (max-width: 400px) {
  .wrap { padding: 0 16px; }
}

/* Hero */
.hero {
  position: relative;
  padding: 64px 0 88px;
  overflow: hidden;
}
.dial-bg {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1400px;
  height: 1400px;
  transform: translate(-50%, -46%);
  pointer-events: none;
  opacity: 0.55;
}

.hero-inner {
  position: relative;
  text-align: center;
  max-width: 760px;
  margin: 0 auto;
}
.eyebrow {
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--amber);
  margin: 0 0 20px;
}
h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 52px;
  line-height: 1.06;
  letter-spacing: -0.015em;
  margin: 0 0 20px;
  text-wrap: balance;
}
h1 em {
  font-style: normal;
  color: var(--amber);
}
.hero-sub {
  font-size: 17px;
  color: var(--text-secondary);
  max-width: 520px;
  margin: 0 auto 40px;
  text-wrap: balance;
}

/* Tuner-style search bar (reused on the search page too) */
.tuner {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--bg-deep);
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  padding: 6px;
  max-width: 560px;
  margin: 0 auto;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.2), 0 20px 50px -20px rgba(232,163,61,0.25);
}
.tuner-led {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 10px 2px rgba(232,163,61,0.7);
  margin-left: 12px;
  flex-shrink: 0;
}
.tuner input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 15px;
  padding: 14px 10px;
}
.tuner input::placeholder { color: var(--text-muted); }
.tuner button {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14.5px;
  background: var(--amber);
  color: var(--amber-text);
  border: none;
  border-radius: 9px;
  padding: 13px 22px;
  cursor: pointer;
  transition: background .15s ease;
}
.tuner button:hover { background: var(--amber-strong); }

.hero-stats {
  display: flex;
  justify-content: center;
  gap: 36px;
  margin-top: 30px;
  flex-wrap: wrap;
}
.hero-stat {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-muted);
}
.hero-stat b {
  color: var(--text-primary);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* Tiles */
.tiles {
  padding: 8px 0 80px;
}
.tiles-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 26px 22px 24px;
  text-decoration: none;
  color: var(--text-primary);
  transition: border-color .15s ease, transform .15s ease, background .15s ease;
}
.tile:hover {
  border-color: var(--border-strong);
  background: var(--surface-hover);
  transform: translateY(-2px);
}
.tile-icon {
  width: 46px;
  height: 46px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(232,163,61,0.12);
  color: var(--amber);
}
.tile.accent-teal .tile-icon {
  background: rgba(79,195,181,0.14);
  color: var(--teal);
}
.tile-icon svg { width: 24px; height: 24px; }
.tile h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  margin: 0;
  letter-spacing: -0.005em;
}
.tile p {
  font-size: 14px;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.55;
}
.tile-tag {
  position: absolute;
  top: 22px;
  right: 22px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: 3px 9px;
}

/* Homepage sections below the tiles: featured stations grid + most-liked logo slider */
.section-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 0 0 20px;
}
.section-heading h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 26px;
  margin: 0;
  letter-spacing: -0.01em;
}
.section-heading p {
  font-size: 14px;
  color: var(--text-secondary);
  margin: 0;
}
.featured-section {
  padding: 8px 0 64px;
}

.most-liked-section {
  padding: 0 0 80px;
}
.logo-slider {
  display: flex;
  align-items: center;
  gap: 10px;
}
.logo-slider-track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  padding: 4px 2px;
  flex: 1;
  /* Scrolling still works via the nav buttons (or touch/trackpad); the native scrollbar
     is just visual clutter here since there's no keyboard/mouse-drag use case for it. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.logo-slider-track::-webkit-scrollbar {
  display: none;
}
.logo-slider-item {
  scroll-snap-align: start;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100px;
  text-decoration: none;
  color: var(--text-primary);
}
.logo-slider-logo {
  width: 80px;
  height: 80px;
  border-radius: 14px;
  object-fit: contain;
  background: var(--surface);
  border: 1px solid var(--border);
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.logo-slider-item:hover .logo-slider-logo {
  border-color: var(--border-strong);
  background: var(--surface-hover);
  transform: translateY(-2px);
}
.logo-slider-logo-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
}
.logo-slider-name {
  font-size: 12.5px;
  text-align: center;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.logo-slider-nav {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-primary);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.logo-slider-nav:hover {
  border-color: var(--border-strong);
  background: var(--surface-hover);
}

/* Footer */
footer.site-footer {
  border-top: 1px solid var(--border);
  padding: 26px 0 40px;
}
footer.site-footer .wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
footer.site-footer p {
  margin: 0;
  font-size: 13px;
  color: var(--text-muted);
}
footer.site-footer .footer-copyright {
  display: flex;
  align-items: center;
  gap: 10px;
}
footer.site-footer .footer-version {
  font-family: var(--font-mono);
  font-size: 11px;
  opacity: 0.6;
}
footer.site-footer .links {
  display: flex;
  gap: 20px;
}
footer.site-footer .links a {
  font-size: 13px;
  color: var(--text-muted);
  text-decoration: none;
}
footer.site-footer .links a:hover { color: var(--text-secondary); }

/* Search / detail pages */
.search-page, .detail-page {
  padding: 20px 0 80px;
}
.search-page h1, .detail-page h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 32px;
  margin: 0 0 24px;
}

.filters-bar {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
}
.filters-bar input[type="text"],
.filters-bar select {
  background: var(--bg-deep);
  border: 1px solid var(--border-strong);
  border-radius: 9px;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 14px;
  padding: 10px 12px;
}
.filters-bar__search {
  width: 100%;
}
.filters-bar__row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.filters-bar__row select {
  flex: 1 1 160px;
  min-width: 140px;
}
.filters-bar__row .btn {
  flex: 0 0 auto;
}
.btn {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14.5px;
  background: var(--amber);
  color: var(--amber-text);
  border: none;
  border-radius: 9px;
  padding: 10px 20px;
  cursor: pointer;
}
.btn:hover { background: var(--amber-strong); }

.results-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 18px;
}
.results-count {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-muted);
  margin: 0;
}
.per-page-picker {
  display: flex;
  align-items: center;
  gap: 8px;
}
.per-page-picker label {
  font-size: 13px;
  color: var(--text-muted);
  white-space: nowrap;
}
.per-page-picker select {
  background: var(--bg-deep);
  border: 1px solid var(--border-strong);
  border-radius: 9px;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 14px;
  padding: 6px 10px;
}

.results-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.result-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  text-decoration: none;
  color: var(--text-primary);
  transition: border-color .15s ease, background .15s ease;
}
.result-card:hover {
  border-color: var(--border-strong);
  background: var(--surface-hover);
}
.result-logo {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  object-fit: contain;
  flex-shrink: 0;
  background: var(--bg-deep);
}
.result-logo-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}
.result-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.result-name-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.result-name-row .status-dot {
  flex-shrink: 0;
}
.result-info strong {
  font-size: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.result-meta {
  font-size: 12.5px;
  color: var(--text-muted);
}
.empty-row {
  color: var(--text-muted);
  font-size: 14px;
  grid-column: 1 / -1;
}

.pagination {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
  margin-top: 28px;
  overflow-x: auto;
  padding-bottom: 2px;
}
.pagination a,
.pagination__arrow,
.pagination__ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-width: 34px;
  height: 34px;
  padding: 0 8px;
  border-radius: 8px;
  border: 1px solid var(--border);
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-secondary);
}
.pagination a:hover { border-color: var(--border-strong); color: var(--text-primary); }
.pagination a.active { background: var(--amber); border-color: var(--amber); color: var(--amber-text); }
.pagination__arrow { font-size: 17px; line-height: 1; }
.pagination__arrow--disabled { opacity: 0.35; }
.pagination__ellipsis { border-color: transparent; min-width: 20px; }
.pagination__goto {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  margin-left: 10px;
  padding-left: 10px;
  border-left: 1px solid var(--border);
}
.pagination__goto label {
  font-size: 13px;
  color: var(--text-secondary);
  white-space: nowrap;
}
.pagination__goto input[type="number"] {
  width: 60px;
  height: 34px;
  padding: 0 8px;
  background: var(--bg-deep);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 13px;
}
.pagination__goto .btn {
  height: 34px;
  padding: 0 14px;
  font-size: 13px;
  white-space: nowrap;
}
@media (max-width: 560px) {
  .pagination__goto label { display: none; }
}

/* Station detail page */
.detail-header {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.detail-logo {
  width: 84px;
  height: 84px;
  border-radius: 14px;
  object-fit: contain;
  background: var(--surface);
  border: 1px solid var(--border);
  flex-shrink: 0;
}
.detail-logo-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
}
.detail-meta {
  font-size: 14px;
  color: var(--text-secondary);
  margin: 6px 0 0;
}
.detail-profile {
  color: var(--text-secondary);
  font-size: 15px;
  max-width: 680px;
  margin-bottom: 32px;
}
.detail-section {
  margin-bottom: 28px;
}
.detail-section h2 {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  margin: 0 0 12px;
}
.detail-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.detail-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 14px;
}
.detail-row a {
  color: var(--amber-strong);
  text-decoration: none;
  word-break: break-all;
}
.detail-row .flex-1 {
  flex: 1;
}
.detail-row a:hover { text-decoration: underline; }

.status-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}
.status-dot--ok { background: var(--teal); }
.status-dot--warning { background: var(--amber-strong); }
.status-dot--down { background: var(--red); }

.status-legend {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  font-size: 13px;
  color: var(--text-muted);
  line-height: 2;
}
.status-legend .status-dot { margin-right: 6px; vertical-align: middle; }
.claim-station {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  padding: 18px;
}
.claim-station > p:first-child {
  margin: 0 0 14px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text-primary);
}
.claim-station form { margin: 0; }
.claim-station__hint {
  margin: 14px 0 0;
  font-size: 12.5px;
  color: var(--text-muted);
  max-width: 52ch;
}
.detail-row .tag {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: 2px 9px;
  flex-shrink: 0;
}

.detail-featured-badge {
  vertical-align: middle;
  margin-left: 10px;
  font-family: var(--font-body);
  font-weight: 600;
}

/* "Copy link" / "random station" call-to-action row at the bottom of a station page. */
.detail-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

/* "Similar stations" section: sits right after .detail-actions, so it needs its own
   breathing room rather than just the default .detail-section bottom margin - same
   divider pattern as .detail-actions/.status-legend above it. */
.detail-section--similar {
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}

/* "Le mie stazioni" list on list_stations.php: whole row is a link into add-station.php's edit mode. */
.my-stations-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.my-station-row {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 18px;
  text-decoration: none;
  color: var(--text-primary);
  transition: border-color .15s ease, background .15s ease;
}
.my-station-row:hover {
  border-color: var(--border-strong);
  background: var(--surface-hover);
}
.my-station-logo {
  width: 56px;
  height: 56px;
  border-radius: 10px;
  object-fit: contain;
  flex-shrink: 0;
  background: var(--bg-deep);
}
.my-station-logo-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
}
.my-station-name {
  flex: 1;
  min-width: 0;
  font-size: 17px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.my-station-chevron {
  color: var(--text-muted);
  font-size: 20px;
  flex-shrink: 0;
}
.tags-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.tags-row .tag-pill {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-secondary);
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: 5px 12px;
}
.not-found {
  text-align: center;
  padding: 60px 0;
}
.not-found h1 { font-size: 28px; }
.not-found p { color: var(--text-secondary); }

@media (max-width: 860px) {
  .results-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .results-grid { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  /* Native touch-scroll on the track is enough at this width; drop the round nav
     buttons so the logos get the full row width. */
  .logo-slider-nav { display: none; }
  .logo-slider-logo { width: 68px; height: 68px; }
  .logo-slider-item { width: 84px; }
}

@media (max-width: 860px) {
  h1 { font-size: 38px; }
  .tiles-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .tiles-grid { grid-template-columns: 1fr; }
  .tuner { flex-wrap: wrap; }
  .tuner-led { display: none; }
  .tuner button { width: 100%; margin-top: 4px; }
}

/* Auth pages (login / register / activate) */
.auth-page {
  padding: 40px 0 100px;
  display: flex;
  justify-content: center;
}
.auth-box {
  width: 100%;
  max-width: 380px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 32px 28px;
}
.auth-box h1 {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 800;
  margin: 0 0 8px;
}
.auth-box .auth-sub {
  font-size: 14px;
  color: var(--text-secondary);
  margin: 0 0 24px;
}
.auth-box .btn { width: 100%; text-align: center; }
.auth-links {
  margin-top: 20px;
  font-size: 13.5px;
  color: var(--text-secondary);
  text-align: center;
}
.auth-links a { color: var(--amber-strong); text-decoration: none; }
.auth-links a:hover { text-decoration: underline; }

/* Flash / error messages */
.flash, .error-msg {
  padding: 11px 14px;
  border-radius: 9px;
  font-size: 13.5px;
  margin-bottom: 18px;
}
.flash-success { background: rgba(79,195,181,0.12); border: 1px solid var(--teal); color: var(--teal); }
.flash-error, .error-msg { background: rgba(224,90,79,0.12); border: 1px solid #e05a4f; color: #f0958b; }

/* Form fields (shared by auth pages and add-station) */
.field { margin-bottom: 16px; }
.field label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 6px;
}
.field input[type="text"],
.field input[type="email"],
.field input[type="password"],
.field input[type="url"],
.field input[type="tel"],
.field input[type="file"],
.field select,
.field textarea {
  width: 100%;
  padding: 11px 13px;
  background: var(--bg-deep);
  border: 1px solid var(--border-strong);
  border-radius: 9px;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 14px;
}
.field textarea { resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--amber);
}
.field input[type="file"] { padding: 8px 10px; color: var(--text-secondary); }
.field-hint { font-size: 12px; color: var(--text-muted); margin-top: 5px; }
.field-row { display: flex; gap: 16px; flex-wrap: wrap; }
.field-row .field { flex: 1; min-width: 160px; }

.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 28px;
  margin-bottom: 24px;
}

.btn-secondary {
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text-primary);
}
.btn-secondary:hover { background: var(--surface-hover); }

.link-btn {
  background: none;
  border: none;
  color: var(--amber-strong);
  font-size: 13px;
  padding: 0;
  cursor: pointer;
  font-family: var(--font-body);
}
.link-btn:hover { text-decoration: underline; }
.link-btn-danger { color: #e05a4f; }

.danger-zone {
  margin-top: 28px;
  padding: 18px 20px;
  max-width: 480px;
  background: rgba(224,90,79,0.06);
  border: 1px solid rgba(224,90,79,0.35);
  border-radius: 12px;
}
.danger-zone h3 {
  margin: 0 0 6px;
  font-size: 15px;
  color: #e05a4f;
}
.btn-danger {
  background: transparent;
  border: 1px solid #e05a4f;
  color: #e05a4f;
}
.btn-danger:hover { background: rgba(224,90,79,0.12); }

.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
}
.badge-status-active { background: rgba(79,195,181,0.15); color: var(--teal); }
.badge-status-inactive { background: rgba(224,90,79,0.15); color: #f0958b; }
.badge-status-pending { background: rgba(232,163,61,0.15); color: var(--amber-strong); }
.badge-featured { background: rgba(232,163,61,0.18); color: var(--amber-strong); }

/* Dynamic frequency / stream rows (add-station page) */
.freq-rows, .stream-rows { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; }
.freq-row {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-deep);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 10px;
}
.freq-row select, .freq-row input[type="text"] {
  width: auto;
  padding: 9px 10px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 7px;
  color: var(--text-primary);
  font-size: 13.5px;
}
.freq-row input[type="text"] { flex: 1; }

.stream-row, .check-box {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  background: var(--bg-deep);
  border: 1px solid var(--border);
  border-radius: 9px;
}
.stream-row input[type="url"], .check-box input[type="url"] {
  width: 100%;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 7px;
  color: var(--text-primary);
  font-size: 14px;
}
.stream-row-meta { display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap; }
.stream-row-meta select, .stream-row-meta input[type="text"] {
  width: auto;
  padding: 8px 10px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 7px;
  color: var(--text-primary);
  font-size: 13px;
}
.stream-row-meta input[type="text"].stream-provider-other { flex: 1; min-width: 120px; }

/* "Streaming Media Service" field: disabled + grey label by default, only enabled
   (writable input, white label) when the adjacent provider select is set to "Altro". */
.stream-field { display: flex; flex-direction: column; gap: 4px; }
.stream-field-label {
  font-size: 11px;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.stream-provider-other-field:not(.is-disabled) .stream-field-label { color: var(--text-primary); }
.stream-row-meta input[type="text"].stream-provider-other:read-only {
  color: var(--text-secondary);
  cursor: not-allowed;
  opacity: 0.7;
}

.autocomplete-wrap { position: relative; }
.autocomplete-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 10;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 9px;
  max-height: 220px;
  overflow-y: auto;
  margin-top: 4px;
}
.autocomplete-item { padding: 9px 13px; font-size: 13.5px; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.autocomplete-item:hover { background: var(--surface-hover); }
.autocomplete-item.is-selected { color: var(--teal); }
.autocomplete-item .tag-check { color: var(--teal); font-size: 12px; }

/* Tag chip input (add-station.php tags field) - typed/selected tags render as removable
   pills inside the same bordered box the other text fields use, with a plain borderless
   text input trailing them for typing the next one. */
.tag-input {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 7px 9px;
  background: var(--bg-deep);
  border: 1px solid var(--border-strong);
  border-radius: 9px;
}
.tag-input:focus-within { border-color: var(--amber); }
.tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 6px 4px 12px;
  background: rgba(232,163,61,0.15);
  color: var(--amber-strong);
  border-radius: 999px;
  font-size: 13px;
  line-height: 1.4;
  white-space: nowrap;
}
.tag-chip button {
  background: none;
  border: none;
  padding: 2px;
  color: inherit;
  opacity: 0.75;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  font-family: var(--font-body);
}
.tag-chip button:hover { opacity: 1; color: var(--text-primary); }
.tag-input__field {
  flex: 1 1 90px;
  min-width: 90px;
  border: none;
  background: none;
  outline: none;
  padding: 5px 4px;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 14px;
}
.tag-input__field::placeholder { color: var(--text-muted); }

.form-panel.type-radio { border-color: var(--border-radio, var(--border)); }
.form-panel.type-tv { border-color: var(--border-tv, var(--border)); }
.form-panel.type-tv .freq-row select[name="freq_unit[]"] { display: none; }
.form-panel.type-tv .stream-row-meta select[name="stream_codec_id[]"],
.form-panel.type-tv .stream-row-meta select[name="stream_bitrate[]"] { display: none; }
.form-panel.type-radio .stream-row-meta select[name="stream_video_codec_id[]"] { display: none; }

.page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

/* Stats page */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 16px;
  margin-bottom: 28px;
}
.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px 20px;
}
.stat-card .stat-value {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 30px;
  color: var(--text-primary);
  line-height: 1.1;
}
.stat-card .stat-label {
  font-size: 12.5px;
  color: var(--text-muted);
  margin-top: 6px;
}

.chart-panel h2 {
  font-family: var(--font-display);
  font-size: 19px;
  margin: 0 0 6px;
}
.chart-panel .chart-note {
  color: var(--text-secondary);
  font-size: 13.5px;
  margin: 0 0 22px;
  max-width: 60ch;
}
.chart-body {
  display: flex;
  gap: 36px;
  flex-wrap: wrap;
  align-items: center;
}
.chart-body svg { max-width: 100%; height: auto; }

.bar-chart-svg text {
  font-family: var(--font-body);
  fill: var(--text-secondary);
  font-size: 13px;
}
.bar-chart-svg text.bar-value {
  fill: var(--text-primary);
  font-family: var(--font-mono);
}

.donut-svg text.donut-total {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 30px;
  fill: var(--text-primary);
}
.donut-svg text.donut-caption {
  font-family: var(--font-body);
  font-size: 12px;
  fill: var(--text-muted);
}

.chart-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
  min-width: 220px;
  flex: 1;
}
.chart-legend li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--text-secondary);
}
.chart-legend .swatch {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  flex-shrink: 0;
}
.swatch-teal { background: var(--teal); }
.swatch-amber { background: var(--amber); }
.swatch-blue { background: var(--blue); }
.swatch-red { background: var(--red); }
.chart-legend b {
  color: var(--text-primary);
  font-family: var(--font-mono);
  margin-left: auto;
  padding-left: 12px;
  font-weight: 500;
}

/* Homepage "on air now" pick */
.hero-pick {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 24px;
  flex-wrap: wrap;
}
.hero-pick-label {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--teal);
}
.play-station-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Persistent player bar */
body.has-player {
  padding-bottom: 84px;
}
.player-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  background: var(--surface);
  border-top: 1px solid var(--border-strong);
  box-shadow: 0 -12px 30px -18px rgba(0,0,0,0.5);
  padding: 12px 24px;
}
.player-bar[hidden] { display: none; }

/* Toast: brief, dismiss-itself confirmation message (e.g. "Link copiato!" after copying a
   station link). Anchored just above the player bar (fixed at the bottom) so it appears right
   next to whichever player-bar icon the visitor just pressed, instead of the far side of the
   viewport. Reused across the site via #toast in layout_footer.php. */
.toast {
  position: fixed;
  bottom: 96px;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  z-index: 300;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 12px 22px;
  border-radius: 10px;
  box-shadow: 0 12px 30px -12px rgba(0,0,0,0.6);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.toast--error {
  border-color: var(--red);
  color: var(--red);
}
.player-bar__station {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.player-bar__logo {
  width: 42px;
  height: 42px;
  border-radius: 8px;
  object-fit: contain;
  background: var(--bg-deep);
  border: 1px solid var(--border);
  flex-shrink: 0;
}
.player-bar__meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.player-bar__description {
  font-size: 12px;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 40vw;
}
.player-bar__description:empty { display: none; }
.player-bar__name {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 40vw;
}

/* Center transport block: play/stop buttons with the status line tucked underneath, so it
   reads as a caption for the controls rather than competing with the station name. */
.player-bar__transport {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.player-bar__transport-buttons {
  display: flex;
  align-items: center;
  gap: 14px;
}
.player-bar__status {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--teal);
}
.player-bar__status--warning {
  color: var(--amber-strong);
}
.player-bar__status--warning::before {
  content: "\26A0 ";
}
.player-bar__external {
  font-size: 12px;
  color: var(--amber-strong);
  text-decoration: none;
  white-space: nowrap;
}
.player-bar__external:hover { text-decoration: underline; }
.player-bar__open-direct {
  font-size: 12px;
  color: var(--amber-strong);
  text-decoration: none;
  white-space: nowrap;
}
.player-bar__open-direct:hover { text-decoration: underline; }

.player-bar__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: none;
  background: var(--amber);
  color: var(--amber-text);
  font-size: 16px;
  cursor: pointer;
  flex-shrink: 0;
}
.player-bar__btn:hover { background: var(--amber-strong); }
.player-bar__stop {
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text-secondary);
}
.player-bar__stop:hover { background: var(--surface-hover); color: var(--text-primary); }

/* Right-hand action cluster: volume (icon + popover slider), like, copy-link - all rendered
   as the same plain icon-button style so they read as one coherent group. */
.player-bar__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.player-bar__actions .player-bar__btn {
  width: 40px;
  height: 40px;
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text-secondary);
  font-size: 17px;
}
.player-bar__actions .player-bar__btn:hover {
  background: var(--surface-hover);
  color: var(--text-primary);
}

.player-bar__volume-wrap {
  position: relative;
}
/* Volume icon: speaker shape + up to 3 "wave" bars + a mute X, all in one inline SVG so the
   icon can react to the slider instead of relying on one static glyph. Bar 1 shows by default
   (the "low" level); data-level (set from player.js, driven by the slider's value) reveals
   bar 2/3 as the level rises to mid/high, or swaps every bar for the mute X at level 0. */
.player-bar__volume-icon { width: 20px; height: 20px; flex-shrink: 0; }
.player-bar__volume-icon .player-bar__volume-speaker { fill: currentColor; }
.player-bar__volume-icon .player-bar__volume-bar,
.player-bar__volume-icon .player-bar__volume-mute line {
  fill: none;
  stroke: currentColor;
  stroke-width: 2px;
  stroke-linecap: round;
}
.player-bar__volume-icon .player-bar__volume-bar--2,
.player-bar__volume-icon .player-bar__volume-bar--3,
.player-bar__volume-icon .player-bar__volume-mute { display: none; }
.player-bar__volume-toggle[data-level="mid"] .player-bar__volume-bar--2 { display: inline; }
.player-bar__volume-toggle[data-level="high"] .player-bar__volume-bar--2,
.player-bar__volume-toggle[data-level="high"] .player-bar__volume-bar--3 { display: inline; }
.player-bar__volume-toggle[data-level="mute"] .player-bar__volume-bar--1 { display: none; }
.player-bar__volume-toggle[data-level="mute"] .player-bar__volume-mute { display: inline; }
.player-bar__volume-popover {
  position: absolute;
  bottom: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 120px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  box-shadow: 0 12px 30px -12px rgba(0,0,0,0.6);
  padding: 10px 0;
}
.player-bar__volume-popover[hidden] { display: none; }
.player-bar__volume {
  width: 90px;
  accent-color: var(--amber);
  transform: rotate(-90deg);
}

.player-bar__actions .player-bar__like {
  width: auto;
  padding: 0 12px;
  border-radius: 20px;
  gap: 7px;
}
.player-bar__like-icon {
  width: 19px;
  height: 19px;
  fill: var(--red);
  flex-shrink: 0;
}
.player-bar__like-count {
  font-family: var(--font-mono);
  font-size: 13px;
}
.player-bar__like:active {
  transform: scale(0.9);
}

/* Floating video tile, expandable in place */
.player-video-backdrop {
  position: fixed;
  inset: 0;
  z-index: 210;
  background: rgba(16,13,10,0.75);
}
.player-video-backdrop[hidden] { display: none; }
.player-video-tile {
  position: fixed;
  right: 24px;
  bottom: 100px;
  z-index: 220;
  width: 320px;
  background: var(--bg-deep);
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 20px 50px -20px rgba(0,0,0,0.6);
}
.player-video-tile[hidden] { display: none; }
.player-video-tile__bar {
  display: flex;
  justify-content: flex-end;
  gap: 4px;
  padding: 6px;
  background: var(--surface);
}
.player-video-tile__expand,
.player-video-tile__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 13px;
}
.player-video-tile__expand:hover,
.player-video-tile__close:hover {
  background: var(--surface-hover);
  color: var(--text-primary);
}
.player-video-tile__stage {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
}
.player-video-tile__stage iframe,
.player-video-tile__stage video {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.player-video-tile.expanded {
  right: 50%;
  bottom: 50%;
  transform: translate(50%, 50%);
  width: min(920px, 90vw);
}

@media (max-width: 640px) {
  .player-bar { padding: 10px 14px; gap: 10px; }
  .player-bar__name { max-width: 32vw; }
  .player-bar__description { max-width: 32vw; }
  .player-bar__status { display: none; }
  .player-bar__volume-wrap { display: none; }
  .player-bar__like-count { display: none; }
  .player-video-tile { right: 12px; bottom: 92px; width: 220px; }
}

/* Content pages (brand kit, link-to-us) */
.content-page { padding: 40px 0 100px; }
.content-page .wrap { max-width: 860px; }
.content-page h1 {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 800;
  margin: 0 0 14px;
}
.content-page h2 {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 800;
  margin: 44px 0 6px;
}
.content-page p { color: var(--text-secondary); font-size: 15px; margin: 0 0 16px; max-width: 62ch; }
.content-page .lede { font-size: 17px; color: var(--text-primary); max-width: 62ch; }
.content-page ul { color: var(--text-secondary); font-size: 15px; padding-left: 22px; margin: 0 0 16px; max-width: 62ch; }
.content-page li { margin-bottom: 6px; }
.content-page .section-hint { font-size: 13.5px; color: var(--text-muted); margin: -10px 0 20px; }

.brand-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 18px;
  margin: 18px 0 8px;
}
.brand-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.brand-card .brand-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  padding: 18px;
  min-height: 80px;
}
.brand-card .brand-preview.on-dark { background: #17130f; }
.brand-card .brand-preview.on-light { background: #ffffff; }
.brand-card .brand-preview.on-orange { background: #f4c98a; }
.brand-card .brand-preview img { max-width: 100%; height: auto; display: block; }
.brand-card h3 { font-size: 14px; margin: 0; color: var(--text-primary); }
.brand-card .brand-meta { font-size: 12px; color: var(--text-muted); margin-top: -8px; }
.brand-card .brand-links { display: flex; gap: 12px; flex-wrap: wrap; font-size: 13px; margin-top: auto; }
.brand-card .brand-links a { color: var(--amber-strong); text-decoration: none; }
.brand-card .brand-links a:hover { text-decoration: underline; }

.hp-field {
  position: absolute;
  left: -9999px;
  top: -9999px;
  height: 0;
  overflow: hidden;
}

.form-microcopy {
  font-size: 9px;
  color: var(--text-muted);
  margin: 10px 0 0;
  letter-spacing: 0.02em;
}

.code-block {
  background: var(--bg-deep);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--text-secondary);
  overflow-x: auto;
  white-space: pre;
  margin: 0 0 22px;
}