:root {
  --radius: 1rem;
  --background: #ffffff;
  --foreground: #0a0a0a;
  --card: #ffffff;
  --card-foreground: #0a0a0a;
  --muted: #f5f5f5;
  --muted-foreground: #737373;
  --border: #e5e5e5;
  --accent: #f5f5f5;
  --primary: #171717;
  --primary-foreground: #fafafa;
  --destructive: #df2225;
  --chart-1: #1447e6;
  --chart-2: #60a8fb;
  --chart-3: #3b86f7;
  --chart-4: #90c7fe;
  --chart-5: #bedcfe;
}

:root.dark {
  --background: #0a0a0a;
  --foreground: #fafafa;
  --card: #171717;
  --card-foreground: #fafafa;
  --muted: #262626;
  --muted-foreground: #a1a1a1;
  --border: #ffffff1a;
  --accent: #262626;
  --primary: #d4d4d4;
  --primary-foreground: #171717;
  --destructive: #ff6568;
}

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-var.woff2') format('woff2-variations'), url('/fonts/inter-var.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

* { box-sizing: border-box; }
/* overflow-x: clip, not just hidden: hidden on BOTH html and body makes body its own
   scroll container, so position: sticky (site header, /asn rail, /minecraft toolbar)
   stuck to a box that never scrolls and never engaged. clip cuts the overflow without
   creating a scroll container; hidden stays first as the fallback for old browsers. */
html, body { margin: 0; padding: 0; max-width: 100%; overflow-x: hidden; overflow-x: clip; }

/* Respected globally by every transition/animation added below - a user who
   asked their OS for reduced motion never sees fade/slide/shake effects,
   only the instant end state. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Visible keyboard-focus ring for interactive elements that only had the
   browser default (or none) before - buttons/links styled with
   background:none;border:none lose their native focus affordance, which is
   a real barrier for keyboard/screen-reader users (Sam). Mouse users never
   see this, since it's gated on :focus-visible. */
.tab-btn:focus-visible,
.explorer-item:focus-visible,
.pill-item:focus-visible,
.fav-star:focus-visible,
.resource-select-btn:focus-visible,
button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--chart-1);
  outline-offset: 2px;
  border-radius: 4px;
}
body {
  background: var(--background);
  color: var(--foreground);
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'cv11', 'ss01';
  font-variant-numeric: tabular-nums;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
.icon { flex-shrink: 0; display: inline-block; vertical-align: middle; }

.icon-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem; border-radius: 0.75rem; margin-bottom: 1rem;
  background: color-mix(in srgb, var(--chart-1) 12%, transparent); color: var(--chart-1);
}

.container { width: 100%; max-width: 1152px; margin: 0 auto; padding: 0 1.5rem; }

/* Header */
.site-header {
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--background) 85%, transparent);
  backdrop-filter: blur(8px);
}
.site-header .inner { display: flex; align-items: center; justify-content: space-between; height: 4rem; }
.brand { display: flex; align-items: center; gap: 0.5rem; font-weight: 600; font-size: 1.05rem; }
.brand-logo { width: 1.15rem; height: 1.27rem; object-fit: contain; }
.nav-links { display: flex; align-items: center; gap: 1.1rem; font-size: 0.825rem; color: var(--muted-foreground); flex-wrap: wrap; }
.nav-links > a { display: inline-flex; align-items: center; gap: 0.35rem; }
.nav-links > a:hover { color: var(--foreground); }
.header-actions { display: flex; align-items: center; gap: 0.6rem; }
.nav-mobile-toggle { display: none; }

/* "Daha Fazla" dropdown - groups secondary/utility links so the desktop nav
   doesn't read as a crowded wall of links (Kaynaklar/Favorilerim/Uyarilar/
   Nerzen Guard/API), matching how the rest of the site already uses a small
   floating panel for filters/drawers. */
.nav-dropdown { position: relative; }
.nav-dropdown-trigger {
  display: inline-flex; align-items: center; gap: 0.3rem;
  background: none; border: none; cursor: pointer;
  font: inherit; color: var(--muted-foreground); padding: 0;
}
.nav-dropdown-trigger:hover { color: var(--foreground); }
.nav-dropdown-caret { transition: transform 0.15s ease; }
.nav-dropdown.open .nav-dropdown-caret { transform: rotate(180deg); }
.nav-dropdown-menu {
  position: absolute; top: calc(100% + 0.85rem); right: 0; z-index: 30;
  min-width: 200px; padding: 0.4rem;
  background: var(--card); border: 1px solid var(--border); border-radius: 0.75rem;
  box-shadow: 0 12px 28px -8px rgb(0 0 0 / 0.35);
  display: flex; flex-direction: column; gap: 0.1rem;
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity 0.12s ease, transform 0.12s ease, visibility 0.12s;
}
.nav-dropdown.open .nav-dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-dropdown-menu a {
  display: flex; align-items: center; gap: 0.55rem;
  padding: 0.5rem 0.6rem; border-radius: 0.5rem;
  color: var(--foreground); font-size: 0.85rem; white-space: nowrap;
}
.nav-dropdown-menu a:hover { background: var(--accent); }
.nav-dropdown-divider { height: 1px; background: var(--border); margin: 0.3rem 0.2rem; }

/* Site-wide quick search (Ctrl+K) - see partials/header.ejs */
.quick-search-trigger {
  display: inline-flex; align-items: center; gap: 0.45rem;
  background: var(--background); border: 1px solid var(--border); cursor: pointer;
  border-radius: 999px; padding: 0.35rem 0.55rem 0.35rem 0.7rem;
  color: var(--muted-foreground); font: inherit; font-size: 0.8rem;
}
.quick-search-trigger:hover { border-color: color-mix(in srgb, var(--chart-1) 45%, var(--border)); color: var(--foreground); }
.quick-search-trigger-text { white-space: nowrap; }
.quick-search-kbd {
  font-family: inherit; font-size: 0.65rem; font-weight: 600; letter-spacing: 0.03em;
  background: var(--muted); color: var(--muted-foreground);
  border-radius: 0.35rem; padding: 0.1rem 0.35rem; white-space: nowrap;
}
.quick-search-overlay {
  position: fixed; inset: 0; z-index: 60; display: none;
  background: rgba(0,0,0,0.55); backdrop-filter: blur(3px);
  padding: 12vh 1rem 1rem;
}
.quick-search-overlay.open { display: block; }
.quick-search-panel {
  max-width: 560px; margin: 0 auto; background: var(--card);
  border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: 0 24px 60px -12px rgb(0 0 0 / 0.5); overflow: hidden;
}
.quick-search-input-row {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.85rem 1rem; border-bottom: 1px solid var(--border); color: var(--muted-foreground);
}
.quick-search-input-row input {
  flex: 1; min-width: 0; background: none; border: none; outline: none;
  color: var(--foreground); font: inherit; font-size: 0.95rem;
}
.quick-search-results { max-height: 55vh; overflow-y: auto; padding: 0.4rem; }
.quick-search-hint { padding: 1.5rem 1rem; text-align: center; color: var(--muted-foreground); font-size: 0.85rem; }
.quick-search-item {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  padding: 0.6rem 0.7rem; border-radius: calc(var(--radius) - 4px); color: var(--foreground);
}
.quick-search-item:hover, .quick-search-item.active { background: var(--accent); }
.quick-search-item-name { font-size: 0.88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.quick-search-item-meta { font-size: 0.72rem; color: var(--muted-foreground); white-space: nowrap; flex-shrink: 0; }
.theme-toggle {
  border: 1px solid var(--border); background: transparent; color: var(--foreground);
  border-radius: 999px; width: 2.25rem; height: 2.25rem; display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 1rem;
}
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
  border-radius: calc(var(--radius) - 2px); font-size: 0.875rem; font-weight: 500;
  padding: 0.5rem 1rem; border: 1px solid transparent; cursor: pointer; white-space: nowrap;
}
.btn-primary { background: var(--chart-1); color: #fff; box-shadow: 0 2px 8px color-mix(in srgb, var(--chart-1) 40%, transparent); transition: filter 0.15s, transform 0.15s; }
.btn-primary:hover { filter: brightness(1.08); transform: translateY(-1px); }
.btn-outline { background: transparent; border-color: var(--border); color: var(--foreground); }
.btn-outline:hover { background: var(--accent); }
.btn-outline.active { background: var(--chart-1); border-color: var(--chart-1); color: #fff; }
.btn-sm { padding: 0.35rem 0.75rem; font-size: 0.8rem; }

main { flex: 1; }

/* Hero */
.hero { padding: 5rem 0 4rem; text-align: center; position: relative; overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(60% 50% at 50% 0%, color-mix(in srgb, var(--chart-1) 18%, transparent), transparent 70%);
}
.badge {
  display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.75rem; font-weight: 500;
  padding: 0.3rem 0.75rem; border-radius: 999px; border: 1px solid var(--border); color: var(--muted-foreground);
  margin-bottom: 1.5rem;
}
.hero h1 {
  font-size: 3.25rem; line-height: 1.08; font-weight: 800; margin: 0 0 1.25rem; letter-spacing: -0.03em;
  background: linear-gradient(180deg, var(--foreground), color-mix(in srgb, var(--foreground) 75%, var(--chart-1)));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.hero p.lead { max-width: 42rem; margin: 0 auto 2rem; color: var(--muted-foreground); font-size: 1.05rem; line-height: 1.6; }
.hero-actions { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; }

/* Stat row */
.stats-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; padding: 3rem 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
/* Classes (not inline styles) for the 2/4-column variants some pages use
   (/minecraft, /ozel, /asn) - an inline style="grid-template-columns:..."
   has higher specificity than any stylesheet media query, so those pages'
   stat rows silently ignored the mobile breakpoint below and stayed a fixed
   multi-column grid too narrow to read on a phone. */
.stats-row-2 { grid-template-columns: repeat(2, 1fr); }
.stats-row-4 { grid-template-columns: repeat(4, 1fr); }
.stat { text-align: center; min-width: 0; }
.stat .num { overflow-wrap: break-word; }
.stat-icon { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 0.6rem; margin-bottom: 0.5rem; background: color-mix(in srgb, var(--chart-1) 12%, transparent); color: var(--chart-1); }
.stat .num { font-size: 2.25rem; font-weight: 700; color: var(--chart-1); }
.stat .label { color: var(--muted-foreground); font-size: 0.875rem; margin-top: 0.25rem; }

/* Feature grid */
.features { padding: 4rem 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.feature-card {
  border: none; box-shadow: 0 0 0 1px var(--border), 0 1px 3px rgba(0,0,0,0.06);
  border-radius: var(--radius); padding: 1.75rem; background: var(--card);
  transition: box-shadow 0.15s, transform 0.15s;
}
.feature-card:hover { box-shadow: 0 0 0 1px color-mix(in srgb, var(--chart-1) 40%, var(--border)), 0 6px 16px rgba(0,0,0,0.08); transform: translateY(-2px); }
.feature-card h3 { margin: 0 0 0.5rem; font-size: 1.1rem; }
.feature-card p { color: var(--muted-foreground); font-size: 0.9rem; line-height: 1.6; margin: 0 0 1rem; }
.feature-card ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.4rem; }
.feature-card li { font-size: 0.825rem; color: var(--muted-foreground); display: flex; align-items: center; gap: 0.5rem; }
.feature-card li::before { content: "✓"; color: var(--chart-1); font-weight: 700; }

/* Server cards grid */
.server-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; min-width: 0; }
/* Denser variant for drill-down lists (e.g. /asn's "Bu ASN'deki Sunucular")
   where each card is just name + player count + bar, no icon/tags - a fixed
   3-column split leaves those short cards looking sparse, so this fits as
   many ~180px cards per row as the container allows instead, and stays a
   single column on mobile same as the regular grid. */
.server-grid-compact { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 0.85rem; }
.server-card-compact { padding: 0.85rem 1rem; gap: 0.5rem; }
.server-card {
  position: relative;
  border: none; box-shadow: 0 0 0 1px var(--border), 0 1px 3px rgba(0,0,0,0.05);
  border-radius: var(--radius); padding: 1.25rem; background: var(--card);
  display: flex; flex-direction: column; gap: 0.75rem;
  transition: box-shadow 0.15s, transform 0.15s;
  min-width: 0; max-width: 100%; overflow: hidden;
}
.server-card:hover { box-shadow: 0 0 0 1px color-mix(in srgb, var(--chart-1) 45%, var(--border)), 0 8px 20px rgba(0,0,0,0.1); transform: translateY(-2px); }
.fav-star {
  position: absolute; top: 0.6rem; right: 0.6rem; z-index: 2;
  width: 28px; height: 28px; border-radius: 50%; border: none; cursor: pointer;
  background: color-mix(in srgb, var(--card) 70%, transparent);
  color: var(--muted-foreground); font-size: 1rem; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: color 0.15s, transform 0.15s;
}
.fav-star:hover { color: #f5b800; transform: scale(1.15); }
.fav-star-active { color: #f5b800; }
.server-card-top { display: flex; align-items: center; gap: 0.75rem; min-width: 0; }
.server-icon { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; background: var(--muted); flex-shrink: 0; }
.server-icon-fallback {
  width: 44px; height: 44px; border-radius: 10px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--chart-1) 25%, var(--muted)), var(--muted));
  display: flex; align-items: center; justify-content: center; font-size: 1.2rem; flex-shrink: 0;
}
.server-name { font-weight: 600; font-size: 0.95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.server-sub { font-size: 0.75rem; color: var(--muted-foreground); }
.server-asn {
  font-size: 0.68rem; color: var(--muted-foreground); opacity: 0.8; margin-top: 0.15rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
}
.server-meta-row { display: flex; align-items: center; justify-content: space-between; font-size: 0.8rem; }
.player-count { font-weight: 600; }
.tag-pill {
  display: inline-flex; font-size: 0.7rem; padding: 0.15rem 0.55rem; border-radius: 999px;
  background: var(--accent); color: var(--muted-foreground); border: 1px solid var(--border);
}
.tag-row { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.progress-bar { height: 5px; border-radius: 999px; background: var(--muted); overflow: hidden; }
.progress-bar > div { height: 100%; background: var(--chart-1); }

/* 7-hour mini trend on server cards (see partials/server-card.ejs) - a plain
   inline SVG, so a full page of cards costs no JS and no extra requests.
   Green/red only encodes direction over the window, deliberately not a
   judgement about the server. */
.spark-row { display: flex; align-items: center; gap: 0.5rem; margin-top: -0.15rem; }
.spark { flex: 1; height: 24px; min-width: 0; opacity: 0.9; }
.spark-up { color: #22c55e; }
.spark-down { color: #ef4444; }
.spark-label { font-size: 0.62rem; color: var(--muted-foreground); flex-shrink: 0; letter-spacing: 0.03em; }

/* Section heading */
.section-heading { text-align: center; max-width: 40rem; margin: 0 auto 2.5rem; }
.section-heading .kicker { color: var(--chart-1); font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
.section-heading h2 { font-size: 1.85rem; margin: 0.5rem 0 0.75rem; }
.section-heading p { color: var(--muted-foreground); }

/* FAQ */
.faq { padding: 4rem 0; max-width: 42rem; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--border); padding: 1.1rem 0; }
.faq-item summary { cursor: pointer; font-weight: 500; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item p { color: var(--muted-foreground); margin: 0.75rem 0 0; font-size: 0.9rem; line-height: 1.6; }

/* Footer */
.site-footer { border-top: 1px solid var(--border); padding: 2.5rem 0; margin-top: 3rem; }
.site-footer .inner { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1.5rem; }
.site-footer .cols { display: flex; gap: 3rem; }
.site-footer nav { display: flex; flex-direction: column; gap: 0.5rem; font-size: 0.875rem; color: var(--muted-foreground); }
.site-footer .fine-print { color: var(--muted-foreground); font-size: 0.75rem; margin-top: 2rem; border-top: 1px solid var(--border); padding-top: 1.5rem; }

/* Explorer / filters */
.page-header { padding: 2.5rem 0 1.5rem; }
.page-header h1 { font-size: 1.75rem; margin: 0 0 0.5rem; }
.page-header p { color: var(--muted-foreground); margin: 0; }
.filter-bar { display: flex; gap: 0.75rem; flex-wrap: wrap; padding: 1rem 0 1.5rem; align-items: center; }
.filter-bar input, .filter-bar select {
  background: var(--card); border: 1px solid var(--border); color: var(--foreground);
  border-radius: calc(var(--radius) - 2px); padding: 0.5rem 0.75rem; font-size: 0.875rem;
}
.filter-bar input[type="text"] { min-width: 220px; flex: 1; }
.search-wrap { position: relative; flex: 1; min-width: 220px; }
.search-wrap input[type="text"] { width: 100%; }
.search-suggest {
  position: absolute; top: calc(100% + 0.4rem); left: 0; right: 0; z-index: 40;
  background: var(--card); border-radius: var(--radius); box-shadow: 0 0 0 1px var(--border), 0 8px 24px rgba(0,0,0,0.15);
  max-height: 320px; overflow-y: auto; display: none;
}
.search-suggest.open { display: block; }
.search-suggest-item {
  display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.75rem; cursor: pointer; text-decoration: none; color: var(--foreground);
}
.search-suggest-item:hover { background: var(--accent); }
.search-suggest-item img { width: 24px; height: 24px; border-radius: 6px; object-fit: cover; flex-shrink: 0; background: var(--muted); }
.search-suggest-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.85rem; }
.search-suggest-count { font-size: 0.75rem; color: var(--muted-foreground); flex-shrink: 0; }
.tag-cloud { display: flex; flex-wrap: wrap; gap: 0.4rem; padding-bottom: 1.5rem; }
.tag-cloud a.tag-pill:hover { border-color: var(--chart-1); color: var(--foreground); }
.tag-cloud a.tag-pill.active { background: var(--chart-1); color: #fff; border-color: var(--chart-1); }
.pagination { display: flex; gap: 0.5rem; justify-content: center; padding: 2.5rem 0; }
.pagination a, .pagination span { padding: 0.4rem 0.8rem; border: 1px solid var(--border); border-radius: calc(var(--radius) - 2px); font-size: 0.85rem; }
.pagination .current { background: var(--chart-1); color: #fff; border-color: var(--chart-1); }
.page-jump { margin-left: 0.25rem; }
.page-jump input {
  width: 4.5rem; padding: 0.4rem 0.6rem; border: 1px solid var(--border); border-radius: calc(var(--radius) - 2px);
  background: var(--card); color: var(--foreground); font-size: 0.85rem;
}
.page-jump input:focus { outline: none; border-color: var(--chart-1); }
.empty-state {
  display: flex; flex-direction: column; align-items: center; gap: 0.75rem;
  text-align: center; padding: 4rem 0; color: var(--muted-foreground);
}
.empty-state .icon { color: var(--chart-1); opacity: 0.6; }
.empty-state p { margin: 0; max-width: 26rem; }

/* Server detail page */
.detail-header {
  display: flex; gap: 1.1rem; margin: 1.75rem 0 1.25rem; align-items: center; flex-wrap: wrap;
  background: var(--card); box-shadow: 0 0 0 1px var(--border), 0 1px 3px rgba(0,0,0,0.06);
  border-radius: var(--radius); padding: 1.1rem 1.25rem;
}
.detail-icon { width: 60px; height: 60px; border-radius: 14px; object-fit: cover; background: var(--muted); }
.detail-icon-fallback {
  width: 60px; height: 60px; border-radius: 14px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--chart-1) 25%, var(--muted)), var(--muted));
  display: flex; align-items: center; justify-content: center; font-size: 1.4rem;
}
.detail-title-block { flex: 1; min-width: 200px; }
.detail-title-block h1 { font-size: 1.15rem; font-weight: 600; margin: 0 0 0.3rem; line-height: 1.3; }
.detail-title-block .motto { color: var(--muted-foreground); font-size: 0.825rem; margin-bottom: 0.5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.detail-players { text-align: right; }
.detail-players .num { font-size: 1.5rem; font-weight: 700; }
.detail-players .label { color: var(--muted-foreground); font-size: 0.72rem; }

/* Live rank + all-time record, right under the player count (see
   getServerRank/getServerRecord). Rank is the one thing a raw player count
   can't tell an owner; the record sits next to it so "biggest ever" is always
   read alongside "where you are now". */
.rank-row { display: flex; gap: 0.35rem; justify-content: flex-end; margin-top: 0.5rem; flex-wrap: wrap; }
.rank-badge {
  display: inline-flex; align-items: center; gap: 0.3rem;
  background: var(--accent); border-radius: 999px; padding: 0.2rem 0.55rem;
  font-size: 0.72rem; font-weight: 600; color: var(--foreground); white-space: nowrap;
}
.rank-badge-region { background: color-mix(in srgb, var(--chart-1) 16%, transparent); color: var(--chart-1); }
/* display:flex (not inline-flex) so it always claims its own row - as an
   inline element it shared a line with the Join/Discord buttons that follow
   it, which read as one cramped run-on strip. */
.record-line {
  display: flex; align-items: center; gap: 0.3rem; justify-content: flex-end;
  margin-top: 0.45rem; font-size: 0.72rem; color: var(--muted-foreground); white-space: nowrap;
}
.record-line strong { color: var(--foreground); }
.record-date { opacity: 0.75; }

.tabs { display: flex; gap: 0.25rem; border-bottom: 1px solid var(--border); margin-bottom: 1.5rem; }
.tab-btn {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.6rem 1.1rem; font-size: 0.875rem; font-weight: 500; color: var(--muted-foreground);
  border: none; background: none; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color 0.15s;
}
.tab-btn:hover { color: var(--foreground); }
.tab-btn.active { color: var(--foreground); border-bottom-color: var(--chart-1); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* Scrolls horizontally instead of wrapping or clipping - a page with 6-7
   range options (7 gun/30 gun/90 gun/1 yil...) doesn't fit a 375px phone
   screen at all, and wrapping to a second row pushes the chart down
   awkwardly every time the active pill changes width; a scrollable strip
   (the same pattern used for pill/chip rows everywhere on mobile web) keeps
   every option reachable with a swipe instead of silently cutting the last
   ones off past the edge. */
.range-select { display: flex; gap: 0.4rem; margin-bottom: 1rem; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
/* At narrow widths the pill row (1 saat/6 saat/.../1 yil) overflows and used
   to hard-cut the last pill mid-label with no hint there was more to scroll
   to. A right-edge fade signals "keep scrolling" without needing JS to track
   scroll position. */
@media (max-width: 640px) {
  .range-select {
    mask-image: linear-gradient(to right, black calc(100% - 28px), transparent 100%);
    -webkit-mask-image: linear-gradient(to right, black calc(100% - 28px), transparent 100%);
    padding-right: 28px;
  }
}
.range-select a {
  padding: 0.3rem 0.7rem; border: 1px solid var(--border); border-radius: 999px; font-size: 0.8rem; color: var(--muted-foreground);
  white-space: nowrap; flex-shrink: 0;
}
.range-select a.active { background: var(--chart-1); color: #fff; border-color: var(--chart-1); }
@keyframes card-rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.chart-card {
  position: relative; overflow: hidden;
  border: none; box-shadow: 0 0 0 1px var(--border), 0 1px 3px rgba(0,0,0,0.06);
  border-radius: var(--radius); background: var(--card); padding: 1.25rem;
  animation: card-rise 0.4s ease-out both;
}
/* Cards below the first screenful stagger in slightly as the page settles,
   rather than all popping in at once - capped at 6 so a long page (view.ejs
   stacks 9+ chart-cards) doesn't keep the last card invisible for a
   noticeable beat. */
.chart-card:nth-of-type(2) { animation-delay: 0.05s; }
.chart-card:nth-of-type(3) { animation-delay: 0.1s; }
.chart-card:nth-of-type(4) { animation-delay: 0.15s; }
.chart-card:nth-of-type(5) { animation-delay: 0.2s; }
.chart-card:nth-of-type(n+6) { animation-delay: 0.25s; }
.chart-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--chart-1), var(--chart-3), var(--chart-2));
  opacity: 0.8;
}
.chart-card canvas { max-height: 320px; }
/* Global safety net: Chart.js sets an inline pixel width/height on <canvas>
   for devicePixelRatio-correct rendering - max-width always wins over width
   in the box-model regardless of which one is inline, so this guarantees no
   canvas can ever force itself (and therefore its grid/flex container)
   wider than whatever space it's actually given. */
canvas { max-width: 100%; }

.alert {
  border: 1px solid var(--border); background: var(--card); border-radius: var(--radius);
  padding: 0.85rem 1.1rem; margin-bottom: 1.25rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.5rem;
}
.alert .k { color: var(--muted-foreground); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.03em; }
.alert .v { font-family: ui-monospace, monospace; font-size: 0.85rem; margin-top: 0.1rem; }
.protected-badge {
  display: inline-flex; align-items: center; gap: 0.3rem; margin-top: 0.35rem;
  font-size: 0.7rem; color: var(--chart-1); font-family: ui-sans-serif, system-ui, sans-serif;
}
.asn-badge {
  display: inline-flex; align-items: center; gap: 0.3rem; margin-top: 0.35rem;
  font-size: 0.7rem; color: var(--muted-foreground); font-family: ui-sans-serif, system-ui, sans-serif;
}

.mini-stat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.mini-stat-grid .card { position: relative; overflow: hidden; box-shadow: 0 0 0 1px var(--border), 0 1px 3px rgba(0,0,0,0.06); border-radius: var(--radius); padding: 1.25rem; background: var(--card); animation: card-rise 0.4s ease-out both; }
.mini-stat-grid .card:nth-child(2) { animation-delay: 0.05s; }
.mini-stat-grid .card:nth-child(3) { animation-delay: 0.1s; }
.mini-stat-grid .card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--chart-1), var(--chart-3), var(--chart-2)); opacity: 0.7;
}
.mini-stat-grid .card h4 { margin: 0 0 0.75rem; font-size: 0.85rem; color: var(--muted-foreground); text-transform: uppercase; letter-spacing: 0.03em; display: flex; align-items: center; gap: 0.45rem; }

.support-badge {
  display: inline-flex; align-items: center; padding: 0.1rem 0.5rem; border-radius: 999px;
  font-size: 0.68rem; font-weight: 600; background: var(--accent); color: var(--muted-foreground);
}
.support-supported { background: rgba(34,197,94,0.15); color: #22c55e; }

.search-input {
  width: 100%; background: var(--background); border: 1px solid var(--border); color: var(--foreground);
  border-radius: 999px; padding: 0.5rem 0.9rem; font-size: 0.85rem; margin-bottom: 0.75rem;
}
.count-badge { background: var(--accent); color: var(--muted-foreground); border-radius: 999px; padding: 0.05rem 0.5rem; font-size: 0.7rem; text-transform: none; letter-spacing: normal; }

.kv-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; max-height: 280px; display: block; overflow-y: auto; }
.kv-table thead, .kv-table tbody, .kv-table tr { display: table; width: 100%; table-layout: fixed; }
.kv-table thead { color: var(--muted-foreground); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.03em; }
.kv-table th { text-align: left; padding: 0.35rem 0.5rem; font-weight: 500; }
.kv-table td { padding: 0.4rem 0.5rem; border-top: 1px solid var(--border); }
.kv-table-key { color: var(--muted-foreground); width: 32%; }
.kv-table-val { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kv-table th:last-child, .kv-table td:last-child { width: 2.5rem; }
.copy-btn {
  background: none; border: none; color: var(--muted-foreground); cursor: pointer;
  border-radius: 6px; padding: 0.25rem; display: inline-flex; font-size: 0.7rem; font-weight: 600;
}
.copy-btn:hover { background: var(--accent); color: var(--foreground); }

.resource-list { max-height: 280px; }
.empty-inline { color: var(--muted-foreground); font-size: 0.85rem; }

.resource-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin: 1.5rem 0; }
.resource-card {
  position: relative;
  border: none; box-shadow: 0 0 0 1px var(--border), 0 1px 3px rgba(0,0,0,0.05);
  border-radius: var(--radius); padding: 1rem 1.1rem; background: var(--card);
  min-width: 0;
  transition: box-shadow 0.15s, transform 0.15s;
}
.resource-card:hover { box-shadow: 0 0 0 1px color-mix(in srgb, var(--chart-1) 45%, var(--border)), 0 8px 20px rgba(0,0,0,0.1); transform: translateY(-2px); }
.resource-card-link { display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; text-decoration: none; color: inherit; padding-right: 1.6rem; }
.resource-card-name { font-weight: 600; font-size: 0.9rem; font-family: ui-monospace, monospace; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.resource-card-stats { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.78rem; color: var(--muted-foreground); }
.resource-card-stats span { display: flex; align-items: center; gap: 0.4rem; }
.resource-select-btn {
  position: absolute; top: 0.6rem; right: 0.6rem; z-index: 2;
  width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--border); cursor: pointer;
  background: var(--card); color: var(--muted-foreground); font-size: 0.85rem; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.resource-select-btn:hover { border-color: var(--chart-1); color: var(--chart-1); }
.resource-select-btn.active { background: var(--chart-1); border-color: var(--chart-1); color: #fff; }
.resource-selection-bar {
  position: sticky; bottom: 1rem; z-index: 20; margin-top: 1.5rem;
  display: flex; align-items: center; gap: 0.75rem; justify-content: center;
  padding: 0.75rem 1rem; border-radius: 999px; width: fit-content; margin-left: auto; margin-right: auto;
  background: var(--card); box-shadow: 0 0 0 1px var(--border), 0 8px 24px rgba(0,0,0,0.15);
  font-size: 0.85rem;
}
@media (max-width: 900px) { .resource-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .resource-grid { grid-template-columns: 1fr; } }

.explorer-layout { display: grid; grid-template-columns: 320px 1fr; gap: 1.25rem; margin-top: 1.5rem; align-items: start; }
/* Grid tracks default to a minimum of their content's max-content size, not
   0 - a <canvas> can't shrink on its own, so without this a chart-card
   (or anything else non-shrinkable) inside a grid column silently forces
   that whole column, and everything alongside it, wider than the viewport
   instead of respecting grid-template-columns. This was locking the /asn
   chart column to ~1317px wide on a 375px-wide phone. */
.explorer-layout > * { min-width: 0; }
.explorer-panel {
  border: none; box-shadow: 0 0 0 1px var(--border), 0 1px 3px rgba(0,0,0,0.05);
  border-radius: var(--radius); background: var(--card); padding: 1rem;
  display: flex; flex-direction: column; gap: 0.6rem;
}
.explorer-panel-meta { display: flex; justify-content: space-between; font-size: 0.75rem; color: var(--muted-foreground); }
@keyframes shake-limit {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-3px); }
  40%, 60% { transform: translateX(3px); }
}
#explorerSelectedCount.shake-limit { animation: shake-limit 0.4s; color: var(--destructive); }
.explorer-panel-actions { display: flex; justify-content: space-between; gap: 0.5rem; }
.explorer-panel-actions .btn img.flag-icon { width: 14px; height: 14px; margin-right: 0.2rem; vertical-align: -2px; }
.explorer-list { display: flex; flex-direction: column; gap: 0.3rem; max-height: 520px; overflow-y: auto; }
.explorer-item {
  display: flex; justify-content: space-between; align-items: center; gap: 0.5rem;
  padding: 0.5rem 0.65rem; border: 1px solid transparent; border-radius: calc(var(--radius) - 4px);
  background: transparent; color: var(--foreground); font-size: 0.82rem; text-align: left; cursor: pointer;
  width: 100%;
}
.explorer-item:hover { background: var(--accent); }
.explorer-item.active { background: color-mix(in srgb, var(--chart-1) 14%, transparent); border-color: var(--chart-1); }
.explorer-item-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.explorer-item-clients { color: var(--muted-foreground); font-variant-numeric: tabular-nums; flex-shrink: 0; }
@media (max-width: 900px) { .explorer-layout { grid-template-columns: 1fr; } .explorer-list { max-height: 300px; } }

/* "Nerzen" (our own hosting ASN) pinned to the top of the /asn sidebar -
   subtle border so it's findable at a glance even when not the active
   selection, plus a small badge next to its name. */
.explorer-item.explorer-item-self { border-color: color-mix(in srgb, var(--chart-1) 40%, transparent); }
.self-badge {
  display: inline-flex; align-items: center; font-size: 0.62rem; font-weight: 700;
  padding: 0.05rem 0.4rem; border-radius: 999px; margin-left: 0.3rem;
  background: color-mix(in srgb, var(--chart-1) 20%, transparent); color: var(--chart-1);
  text-transform: uppercase; letter-spacing: 0.02em; vertical-align: middle;
}

/* ASN-switch loading feedback: only applied after a short delay (see JS) so
   fast (~1h range) switches never flash it - it's reserved for the slower
   24h/large-ASN fetches where the click would otherwise look like a freeze.
   Class toggles on .explorer-layout (the shared ancestor) so it can dim the
   chart column while also blocking re-clicks in the sidebar list. */
.explorer-layout.chart-loading .explorer-chart-area { opacity: 0.55; cursor: wait; transition: opacity 0.15s ease; }
.explorer-layout.chart-loading .explorer-item { pointer-events: none; }

.metric-toggle { display: flex; gap: 0.25rem; background: var(--muted); border-radius: 999px; padding: 0.2rem; flex-shrink: 0; }
.metric-toggle-btn {
  border: none; background: none; padding: 0.35rem 0.8rem; border-radius: 999px; font-size: 0.78rem;
  color: var(--muted-foreground); cursor: pointer;
}
.metric-toggle-btn.active { background: var(--card); color: var(--foreground); box-shadow: 0 0 0 1px var(--border); }

.game-split-row {
  display: flex; gap: 1.5rem; padding: 0.75rem 1.1rem; margin: -0.5rem 0 1.5rem;
  border-radius: var(--radius); background: var(--card); box-shadow: 0 0 0 1px var(--border);
}
.game-split-item { display: flex; align-items: baseline; gap: 0.4rem; font-size: 0.85rem; }
.game-split-item .k { color: var(--muted-foreground); }
.game-split-item .v { font-weight: 600; }

.growth-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; white-space: nowrap; }
.growth-table th { text-align: left; padding: 0.5rem 0.75rem; color: var(--muted-foreground); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.03em; font-weight: 500; }
.growth-table td { padding: 0.55rem 0.75rem; border-top: 1px solid var(--border); }
.gain-pos { color: #22c55e; }
.gain-neg { color: #f87171; }

.details-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.25rem; }
.details-grid .card {
  position: relative; overflow: hidden;
  border: none; box-shadow: 0 0 0 1px var(--border), 0 1px 3px rgba(0,0,0,0.06);
  border-radius: var(--radius); padding: 1.25rem; background: var(--card);
}
.details-grid .card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--chart-1), var(--chart-3), var(--chart-2)); opacity: 0.7;
}
.details-grid .card h4 { margin: 0 0 0.75rem; font-size: 0.9rem; color: var(--muted-foreground); text-transform: uppercase; letter-spacing: 0.03em; display: flex; align-items: center; gap: 0.45rem; }
.details-grid .card h4 .icon { color: var(--chart-1); }
.kv-row { display: flex; justify-content: space-between; font-size: 0.875rem; padding: 0.4rem 0; border-bottom: 1px solid var(--border); }
.kv-row:last-child { border-bottom: none; }
.kv-row .k { color: var(--muted-foreground); }
.resource-list { display: flex; flex-wrap: wrap; gap: 0.35rem; max-height: 180px; overflow-y: auto; }

/* Extended metrics: monthly/yearly/clock/comparison grid */
.metrics-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.25rem; margin-top: 1.5rem; }
.chart-card-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 0.9rem; gap: 0.5rem; }
.chart-card-header .title-row { display: flex; align-items: center; gap: 0.6rem; }
.chart-icon-badge {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 2rem; height: 2rem; border-radius: 0.6rem;
  background: color-mix(in srgb, var(--chart-1) 12%, transparent); color: var(--chart-1);
}
.chart-card-header h3 { margin: 0; font-size: 1rem; }
.chart-card-header .sub { color: var(--muted-foreground); font-size: 0.78rem; margin-top: 0.15rem; }

.alert { align-items: flex-start; gap: 0.75rem; }
.alert-icon { color: var(--chart-1); margin-top: 0.1rem; }

.clock-wrap { display: flex; gap: 1.5rem; align-items: center; flex-wrap: wrap; }
.clock-canvas-box { position: relative; width: 170px; height: 170px; flex-shrink: 0; }
.clock-stats { flex: 1; min-width: 160px; display: flex; flex-direction: column; gap: 0.85rem; }
.clock-stat .num { font-size: 1.3rem; font-weight: 700; }
.clock-stat .label { font-size: 0.75rem; color: var(--muted-foreground); }
.peak-period-box {
  border: 1px solid var(--border); border-radius: calc(var(--radius) - 2px); padding: 0.55rem 0.85rem;
  display: flex; justify-content: space-between; align-items: center; margin-top: 0.25rem;
}
.badge-time { padding: 0.2rem 0.6rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600; background: var(--accent); color: var(--foreground); }

.kpi-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; }
.kpi-tile {
  border: none; box-shadow: 0 0 0 1px var(--border);
  border-radius: calc(var(--radius) - 4px); padding: 0.9rem 1rem; background: var(--background);
}
.kpi-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.35rem; gap: 0.5rem; }
.kpi-label { font-size: 0.78rem; color: var(--muted-foreground); }
.kpi-num { font-size: 1.5rem; font-weight: 700; }
.kpi-sub { font-size: 0.72rem; color: var(--muted-foreground); }
.trend-badge { display: inline-flex; align-items: center; gap: 0.2rem; font-size: 0.72rem; font-weight: 600; padding: 0.15rem 0.5rem; border-radius: 999px; white-space: nowrap; }
.trend-up { background: rgba(34,197,94,0.15); color: #22c55e; }
.trend-down { background: rgba(223,34,37,0.15); color: var(--destructive); }
.trend-flat { background: var(--accent); color: var(--muted-foreground); }

/* Veri Butunlugu (integrity heuristics) - see getIntegritySignals() in
   services/queries.js. Colour carries the verdict, but every signal also
   shows its own number and a plain-language explanation, so the card is
   never just an unexplained badge. */
.integrity-verdict {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.85rem 1rem; border-radius: calc(var(--radius) - 4px);
  margin-bottom: 1rem; box-shadow: 0 0 0 1px var(--border);
}
.integrity-dot { width: 10px; height: 10px; border-radius: 999px; flex-shrink: 0; }
.integrity-verdict-label { font-weight: 600; font-size: 0.95rem; }
.integrity-verdict-sub { font-size: 0.75rem; color: var(--muted-foreground); margin-top: 0.1rem; }
.integrity-low { background: color-mix(in srgb, #22c55e 10%, transparent); }
.integrity-low .integrity-dot { background: #22c55e; box-shadow: 0 0 0 4px color-mix(in srgb, #22c55e 20%, transparent); }
.integrity-low .integrity-verdict-label { color: #22c55e; }
.integrity-watch { background: color-mix(in srgb, #f59e0b 10%, transparent); }
.integrity-watch .integrity-dot { background: #f59e0b; box-shadow: 0 0 0 4px color-mix(in srgb, #f59e0b 20%, transparent); }
.integrity-watch .integrity-verdict-label { color: #f59e0b; }
.integrity-high { background: color-mix(in srgb, #ef4444 10%, transparent); }
.integrity-high .integrity-dot { background: #ef4444; box-shadow: 0 0 0 4px color-mix(in srgb, #ef4444 20%, transparent); }
.integrity-high .integrity-verdict-label { color: #ef4444; }
.integrity-unknown { background: var(--muted); }
.integrity-unknown .integrity-dot { background: var(--muted-foreground); }

.integrity-badge-low { background: color-mix(in srgb, #22c55e 14%, transparent) !important; color: #22c55e !important; }
.integrity-badge-watch { background: color-mix(in srgb, #f59e0b 14%, transparent) !important; color: #f59e0b !important; }
.integrity-badge-high { background: color-mix(in srgb, #ef4444 14%, transparent) !important; color: #ef4444 !important; }

.integrity-signals { display: grid; gap: 0.75rem; }
.integrity-signal {
  padding: 0.75rem 0.9rem; border-radius: calc(var(--radius) - 4px);
  background: var(--background); box-shadow: 0 0 0 1px var(--border);
}
.integrity-signal-head { display: flex; justify-content: space-between; align-items: center; font-size: 0.82rem; font-weight: 600; gap: 0.5rem; }
.integrity-signal-state { font-size: 0.72rem; font-weight: 600; color: var(--muted-foreground); }
.integrity-signal.signal-hit .integrity-signal-state { color: #f59e0b; }
.integrity-bar { height: 5px; border-radius: 999px; background: var(--muted); overflow: hidden; margin: 0.5rem 0 0.45rem; }
.integrity-bar > div { height: 100%; background: var(--muted-foreground); opacity: 0.55; }
.integrity-signal.signal-hit .integrity-bar > div { background: #f59e0b; opacity: 1; }
.integrity-signal-sub { font-size: 0.72rem; color: var(--muted-foreground); line-height: 1.45; }
.integrity-disclaimer {
  display: flex; align-items: flex-start; gap: 0.5rem; margin-top: 1rem;
  font-size: 0.72rem; color: var(--muted-foreground); line-height: 1.5;
}
.integrity-disclaimer .icon { flex-shrink: 0; margin-top: 0.1rem; }

.data-note {
  font-size: 0.78rem; color: var(--muted-foreground); background: var(--muted);
  border-radius: calc(var(--radius) - 2px); padding: 0.65rem 0.9rem; margin-bottom: 1.25rem;
}

.ip-list { display: flex; flex-direction: column; gap: 0.35rem; font-family: ui-monospace, monospace; font-size: 0.85rem; }
.raw-flags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.5rem; }

@media (max-width: 860px) {
  .metrics-grid, .kpi-grid, .mini-stat-grid { grid-template-columns: 1fr; }
}

/* Filters drawer (region + tags), fexmetrics-style pill list with flags */
.drawer-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.55); z-index: 40;
  opacity: 0; pointer-events: none; transition: opacity 0.2s;
  backdrop-filter: blur(2px);
}
.filters-drawer {
  position: fixed; top: 0; right: 0; height: 100%; width: 360px; max-width: 92vw;
  background: var(--card); box-shadow: -8px 0 32px rgba(0,0,0,0.25); z-index: 41;
  transform: translateX(100%); transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
  display: flex; flex-direction: column;
}
.filters-drawer-header {
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 1.25rem 1.25rem 1rem; border-bottom: 1px solid var(--border);
}
.filters-drawer-header h3 { margin: 0; font-size: 1.05rem; }
.filters-drawer-header .sub { color: var(--muted-foreground); font-size: 0.8rem; margin-top: 0.2rem; }
.drawer-close {
  background: none; border: none; color: var(--muted-foreground); font-size: 1.4rem; line-height: 1;
  cursor: pointer; padding: 0.2rem 0.4rem; border-radius: 999px;
}
.drawer-close:hover { background: var(--accent); color: var(--foreground); }

.filters-drawer-body { flex: 1; overflow-y: auto; padding: 1.25rem; }
.filter-section h4 {
  margin: 0 0 0.6rem; font-size: 0.8rem; font-weight: 600; color: var(--muted-foreground);
  display: flex; align-items: center; gap: 0.4rem; text-transform: uppercase; letter-spacing: 0.03em;
}
.filter-section h4 .icon { color: var(--chart-1); }
.filter-divider { height: 1px; background: var(--border); margin: 1.25rem 0; }

#regionSearch {
  width: 100%; background: var(--background); border: 1px solid var(--border); color: var(--foreground);
  border-radius: 999px; padding: 0.5rem 0.9rem; font-size: 0.875rem; margin-bottom: 0.6rem;
}

.pill-list { display: flex; flex-direction: column; gap: 0.2rem; max-height: 15rem; overflow-y: auto; }
.pill-list-flow { flex-direction: row; flex-wrap: wrap; max-height: none; overflow: visible; }
.pill-item {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  background: none; border: 1px solid transparent; border-radius: 999px; padding: 0.5rem 0.75rem;
  font-size: 0.875rem; color: var(--foreground); cursor: pointer; text-align: left; white-space: nowrap;
  transition: background 0.1s;
}
.pill-item-sm { padding: 0.35rem 0.7rem; font-size: 0.8rem; width: auto; }
.pill-item-label { display: flex; align-items: center; gap: 0.5rem; overflow: hidden; text-overflow: ellipsis; }
.pill-item:hover { background: var(--accent); }
.pill-item.active { background: var(--chart-1); color: #fff; }
.pill-count { color: var(--muted-foreground); font-size: 0.75rem; flex-shrink: 0; }
.pill-item.active .pill-count { color: rgba(255,255,255,0.85); }

.flag-icon { width: 20px; height: 20px; border-radius: 999px; object-fit: cover; flex-shrink: 0; }
.flag-icon-fallback { background: var(--muted); display: inline-block; }

.tag-section-header { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; }
.tag-legend { display: flex; gap: 0.6rem; font-size: 0.7rem; }
.tag-legend-inc { color: #22c55e; }
.tag-legend-exc { color: #f87171; }
.tag-toggle.tag-include { background: color-mix(in srgb, #22c55e 18%, transparent); border-color: #22c55e; color: #22c55e; }
.tag-toggle.tag-exclude { background: color-mix(in srgb, #f87171 18%, transparent); border-color: #f87171; color: #f87171; text-decoration: line-through; }
.tag-toggle.tag-include .pill-count, .tag-toggle.tag-exclude .pill-count { color: inherit; opacity: 0.75; }

.filter-chip-include { background: color-mix(in srgb, #22c55e 14%, var(--accent)); color: #22c55e; }
.filter-chip-exclude { background: color-mix(in srgb, #f87171 14%, var(--accent)); color: #f87171; }

.offline-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.switch {
  position: relative; width: 2.5rem; height: 1.4rem; border-radius: 999px; border: none;
  background: var(--muted); cursor: pointer; flex-shrink: 0; padding: 0; transition: background 0.15s;
}
.switch.on { background: var(--chart-1); }
.switch-knob {
  position: absolute; top: 0.15rem; left: 0.15rem; width: 1.1rem; height: 1.1rem; border-radius: 999px;
  background: #fff; transition: transform 0.15s;
}
.switch.on .switch-knob { transform: translateX(1.1rem); }

.filters-drawer-footer {
  display: flex; gap: 0.75rem; padding: 1rem 1.25rem; border-top: 1px solid var(--border);
}
.filters-drawer-footer .btn { flex: 1; }

.active-filters { display: flex; gap: 0.5rem; flex-wrap: wrap; padding-bottom: 1rem; }
.filter-chip {
  display: inline-flex; align-items: center; gap: 0.4rem; background: var(--accent); border-radius: 999px;
  padding: 0.3rem 0.4rem 0.3rem 0.7rem; font-size: 0.8rem;
}
.chip-x { color: var(--muted-foreground); font-weight: 700; padding: 0 0.3rem; border-radius: 999px; }
.chip-x:hover { background: var(--border); color: var(--foreground); }

@media (max-width: 860px) {
  .stats-row, .features, .server-grid { grid-template-columns: 1fr; }
  .details-grid { grid-template-columns: 1fr; }
  .hero h1 { font-size: 2rem; }

  /* Nav collapses into a hamburger-triggered panel instead of vanishing
     outright - the "Daha Fazla" dropdown flattens into plain stacked links
     here too, since a nested dropdown inside a mobile panel is just extra
     taps for no benefit at this width. */
  .nav-cta { display: none; }
  /* Trigger collapses to an icon-only button - the label and the Ctrl+K hint
     are both meaningless on a phone (no physical keyboard) and would crowd
     out the hamburger. */
  .quick-search-trigger-text, .quick-search-trigger .quick-search-kbd { display: none; }
  .quick-search-trigger { padding: 0.45rem; border-radius: 0.6rem; }
  .quick-search-overlay { padding-top: 6vh; }
  .nav-mobile-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.25rem; height: 2.25rem; border-radius: 0.6rem;
    background: none; border: 1px solid var(--border); color: var(--foreground); cursor: pointer;
  }
  .nav-mobile-toggle .nav-mobile-icon-close { display: none; }
  .nav-mobile-toggle.is-open .nav-mobile-icon-open { display: none; }
  .nav-mobile-toggle.is-open .nav-mobile-icon-close { display: inline-flex; }
  .nav-links {
    display: none; flex-direction: column; align-items: stretch; gap: 0; flex-wrap: nowrap;
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--card); border-bottom: 1px solid var(--border);
    padding: 0.5rem 1rem 1rem; box-shadow: 0 12px 28px -8px rgb(0 0 0 / 0.35);
  }
  .nav-links.mobile-open { display: flex; }
  .nav-links > a { padding: 0.65rem 0.2rem; border-bottom: 1px solid var(--border); }
  .nav-dropdown { width: 100%; }
  .nav-dropdown-trigger { display: none; }
  .nav-dropdown-menu {
    position: static; opacity: 1; visibility: visible; transform: none;
    background: none; border: none; box-shadow: none; padding: 0;
  }
  .nav-dropdown-menu a { padding: 0.65rem 0.2rem; border-radius: 0; border-bottom: 1px solid var(--border); }
  .nav-dropdown-divider { display: none; }
}

/* Sistem Durumu (/durum) */
.status-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; margin-top: 1.25rem; }
.status-pill {
  padding: 0.25rem 0.7rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600; white-space: nowrap;
}
.status-ok { background: color-mix(in srgb, #22c55e 18%, transparent); color: #16a34a; }
.status-error { background: color-mix(in srgb, #ef4444 18%, transparent); color: #dc2626; }
.status-error-msg {
  margin-top: 0.75rem; padding: 0.5rem 0.65rem; border-radius: 0.5rem; font-size: 0.78rem;
  background: color-mix(in srgb, #ef4444 10%, transparent); color: #dc2626; word-break: break-word;
}
.status-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.status-table th { text-align: left; color: var(--muted-foreground); font-weight: 600; padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--border); }
.status-table td { padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--border); white-space: nowrap; }
.status-table tr:last-child td { border-bottom: none; }

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

/* ==========================================================================
   Explorer v2 (/explorer) - full-bleed, fexmetrics-inspired two-pane layout.
   All rules below are scoped to "xp-" prefixed classes on purpose: the
   older .explorer-item / .explorer-panel / .explorer-layout / .explorer-list
   rules further up this file are shared with views/asn-network.ejs (the
   /asn sidebar), which this redesign must not touch or visually change.
   ========================================================================== */

/* Breaks out of the standard 1152px .container - the whole point of this
   layout is an edge-to-edge sidebar+chart pane, not another boxed page
   section. Height fills the viewport below the sticky 4rem .site-header;
   body is already `display:flex; flex-direction:column; min-height:100vh`
   with `main { flex:1 }` (see top of this file), so this is the only page
   that needs an explicit height instead of just flowing with content -
   the footer still exists below it, reachable by scrolling past it. */
.xp-shell {
  height: calc(100vh - 4rem - 1px); /* -1px accounts for .site-header's border-bottom */
  display: flex;
  flex-direction: column;
  background: var(--background);
}

/* Slim top bar: title + Beta pill + one-line description on the left,
   refresh countdown on the right - replaces the old fat .page-header block
   this page used to open with. */
.xp-topbar {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
  padding: 0.85rem 1.5rem; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.xp-topbar-title { display: flex; align-items: center; gap: 0.55rem; }
.xp-topbar-title h1 { font-size: 1.15rem; margin: 0; font-weight: 700; }
.xp-icon-badge {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 1.9rem; height: 1.9rem; border-radius: 0.6rem;
  background: color-mix(in srgb, var(--chart-1) 14%, transparent); color: var(--chart-1);
}
.xp-icon-badge-lg { width: 3.25rem; height: 3.25rem; border-radius: 1rem; }
.xp-beta-pill {
  display: inline-flex; align-items: center; font-size: 0.62rem; font-weight: 700;
  padding: 0.15rem 0.5rem; border-radius: 999px; background: var(--primary); color: var(--primary-foreground);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.xp-topbar-desc { margin: 0.35rem 0 0; color: var(--muted-foreground); font-size: 0.8rem; max-width: 40rem; }
.xp-topbar-desc strong { color: var(--foreground); font-weight: 600; }
.xp-topbar-right { flex-shrink: 0; padding-top: 0.3rem; display: flex; align-items: center; gap: 0.5rem; }
.xp-refresh-countdown { font-size: 0.78rem; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.xp-refresh-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.6rem; height: 1.6rem; border-radius: 999px; border: 1px solid var(--border);
  background: transparent; color: var(--muted-foreground); cursor: pointer; flex-shrink: 0;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.xp-refresh-btn:hover { color: var(--chart-1); border-color: color-mix(in srgb, var(--chart-1) 45%, var(--border)); }
.xp-refresh-btn.spin-once svg { animation: xp-spin 0.5s ease; }
@keyframes xp-spin { to { transform: rotate(360deg); } }

/* Per-row player-count delta since the last list refresh (search keystroke,
   "Sadece TR" toggle, the 60s auto-refresh, or the manual refresh button) -
   fexmetrics shows the same "+N / -N" next to each server's count. */
.xp-row-delta {
  flex-shrink: 0; font-size: 0.68rem; font-weight: 600; font-variant-numeric: tabular-nums;
  display: inline-flex; align-items: center; gap: 0.1rem;
}
.xp-row-delta.up { color: var(--hm-up); }
.xp-row-delta.down { color: var(--destructive); }
/* Subtle up/down tint on the row border itself, unselected rows only -
   selected rows already use their assigned chart color for the border via
   --xp-row-accent (see .xp-row.active above), which takes priority. */
.xp-row.trend-up { border-color: color-mix(in srgb, #22c55e 35%, transparent); }
.xp-row.trend-down { border-color: color-mix(in srgb, var(--destructive) 30%, transparent); }

.xp-body { flex: 1; min-height: 0; display: flex; }

/* Sidebar: full height, internally scrolling list - never the page itself. */
.xp-sidebar {
  width: 320px; flex-shrink: 0; min-height: 0;
  display: flex; flex-direction: column;
  border-right: 1px solid var(--border);
}
.xp-sidebar-top {
  padding: 0.9rem 0.9rem 0.75rem; border-bottom: 1px solid var(--border); flex-shrink: 0;
  display: flex; flex-direction: column; gap: 0.65rem;
}
.xp-search-row { position: relative; display: flex; align-items: center; }
.xp-search-row svg { position: absolute; left: 0.75rem; color: var(--muted-foreground); pointer-events: none; }
.xp-search-input {
  width: 100%; background: var(--muted); border: 1px solid transparent; color: var(--foreground);
  border-radius: 999px; padding: 0.5rem 0.9rem 0.5rem 2.2rem; font-size: 0.84rem; font: inherit;
}
.xp-search-input::placeholder { color: var(--muted-foreground); }
.xp-search-input:focus-visible, .xp-search-input:focus {
  outline: none; border-color: var(--chart-1); background: var(--background);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--chart-1) 18%, transparent);
}
.xp-meta-row { display: flex; align-items: center; justify-content: space-between; font-size: 0.72rem; color: var(--muted-foreground); }
/* #explorerSelectedCount's .shake-limit animation is already defined above
   (keyframes shake-limit, near the old .explorer-panel rules) as an ID
   selector, so it keeps working here unchanged - no redefinition needed. */
.xp-action-row { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.xp-chip {
  display: inline-flex; align-items: center; gap: 0.3rem; font: inherit;
  font-size: 0.7rem; font-weight: 600; padding: 0.32rem 0.7rem; border-radius: 999px;
  background: var(--accent); color: var(--foreground); border: 1px solid var(--border); cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.xp-chip:hover { border-color: color-mix(in srgb, var(--chart-1) 45%, var(--border)); }
.xp-chip.active {
  background: color-mix(in srgb, var(--chart-1) 16%, transparent);
  border-color: var(--chart-1); color: var(--chart-1);
}
.xp-chip img.flag-icon { width: 12px; height: 12px; border-radius: 2px; }

.xp-list { flex: 1; min-height: 0; overflow-y: auto; padding: 0.5rem; display: flex; flex-direction: column; gap: 0.2rem; }
.xp-row {
  display: flex; align-items: center; gap: 0.6rem; width: 100%;
  padding: 0.4rem 0.55rem; border-radius: 0.6rem; border: 1px solid transparent;
  background: transparent; color: var(--foreground); text-align: left; cursor: pointer; font: inherit; font-size: 0.8rem;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.xp-row:hover { background: var(--accent); }
/* Selected rows get the same color as their line on the chart (set inline
   as --xp-row-accent by renderList()): a soft tint background plus a
   matching border, so the sidebar reads as a legend, not just a checklist. */
.xp-row.active {
  background: color-mix(in srgb, var(--xp-row-accent, var(--chart-1)) 12%, transparent);
  border-color: color-mix(in srgb, var(--xp-row-accent, var(--chart-1)) 45%, var(--border));
}
.xp-row-icon {
  width: 1.7rem; height: 1.7rem; border-radius: 0.5rem; flex-shrink: 0; overflow: hidden;
  background: var(--muted); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.7rem; font-weight: 700; color: var(--muted-foreground);
}
.xp-row-icon img { width: 100%; height: 100%; object-fit: cover; display: block; }
.xp-row-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xp-row.active .xp-row-name { font-weight: 600; }
.xp-row-clients { flex-shrink: 0; font-variant-numeric: tabular-nums; font-size: 0.72rem; color: var(--muted-foreground); }
.xp-row-indicator { flex-shrink: 0; width: 1rem; height: 1rem; display: flex; align-items: center; justify-content: center; }
.xp-row-indicator.xp-row-plus { color: var(--muted-foreground); font-size: 0.95rem; line-height: 1; opacity: 0.55; }
.xp-row:hover .xp-row-indicator.xp-row-plus { opacity: 1; color: var(--chart-1); }
.xp-row-indicator.xp-row-dot::after {
  content: ""; display: block; width: 0.5rem; height: 0.5rem; border-radius: 50%;
  background: var(--xp-row-accent, var(--chart-1));
}

/* Chart pane: no card border, no padding frame - fills 100% of the
   remaining width and height, edge-to-edge. */
.xp-chart-pane { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.xp-chart-empty {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.85rem; color: var(--muted-foreground); text-align: center; padding: 2rem;
}
.xp-chart-empty p { margin: 0; font-size: 0.92rem; max-width: 22rem; }
.xp-chart-statusbar { padding: 0.85rem 1.5rem 0; font-size: 0.8rem; color: var(--muted-foreground); flex-shrink: 0; }
.xp-chart-canvas-wrap { flex: 1; min-height: 0; padding: 0.5rem 1.5rem 1.25rem; box-sizing: border-box; }
.xp-chart-canvas-inner { position: relative; height: 100%; width: 100%; }

@media (max-width: 900px) {
  /* Stack sidebar above chart instead of side-by-side; the fixed viewport
     height stops being useful once everything is a single column, so let
     the section grow with its content (list gets its own scroll cap,
     chart gets a fixed workable height) instead of fighting for space. */
  .xp-shell { height: auto; }
  .xp-body { flex-direction: column; }
  .xp-sidebar { width: 100%; max-height: 320px; border-right: none; border-bottom: 1px solid var(--border); }
  .xp-chart-pane { flex: 0 0 420px; height: 420px; }
  .xp-topbar-desc { display: none; }
  /* Two countdowns + refresh button no longer fit next to the title at 375px. */
  .xp-topbar { flex-wrap: wrap; row-gap: 0.35rem; }
  .xp-topbar-right { flex-shrink: 1; min-width: 0; flex-wrap: wrap; padding-top: 0; }
}

/* ==========================================================================
   Polish v3 - site-wide motion & visual refinement
   --------------------------------------------------------------------------
   Appended as its own block so nothing above is reflowed. Ground rules this
   section holds itself to, because the pages it lands on render large tables
   and 10+ Chart.js canvases on a CPU-constrained box:

     - CSS only. No library, no rAF loop, no scroll-jacking.
     - Only `transform` and `opacity` are animated, plus `color` /
       `background-color` / `border-color` / `filter` on hover-active states.
       Nothing here touches width/height/top/left/margin/padding over time,
       so no animation in this file can trigger layout.
     - Entrance animations use `backwards` (not `both`) fill: once the
       animation is done the element goes back to the normal cascade, so a
       later `:hover { transform: ... }` still wins. `both` would freeze the
       end transform and silently kill every hover lift on the same element.
     - Only one looping animation exists in this file (the loading shimmer),
       and it only runs while an element actually carries `.is-loading` /
       `.chart-loading`.
     - Nothing here selects `.xp-*` (Explorer v2 owns that block untouched).

   The global `@media (prefers-reduced-motion: reduce)` block near the top of
   this file zeroes animation-duration and transition-duration, but it does
   NOT zero the *delays* - so a staggered element stayed invisible for its
   delay even for a user who asked for no motion. The block below closes that
   gap for everything on the site, including the pre-existing .chart-card /
   .mini-stat-grid stagger.
   ========================================================================== */

:root {
  /* Motion tokens only - no colour is (re)defined here, the theme system
     above stays the single source of truth for colour. */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.32, 0.72, 0, 1);
  --dur-1: 0.12s;
  --dur-2: 0.2s;
  --dur-3: 0.34s;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-delay: 0.001ms !important;
    transition-delay: 0.001ms !important;
  }
}

html {
  scroll-behavior: smooth;          /* neutralised by the reduce block above */
  scroll-padding-top: 5rem;         /* clears the sticky header on anchor jumps */
}

::selection {
  background: color-mix(in srgb, var(--chart-1) 32%, transparent);
  color: var(--foreground);
}

/* --------------------------------------------------------------------------
   Shared keyframes. `card-rise` (defined further up) stays the one entrance
   motif; everything below is either that same 10px rise at a different
   amplitude, or a pure fade - deliberately not a fourth card style.
   -------------------------------------------------------------------------- */
@keyframes rise-in       { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes rise-in-sm    { from { opacity: 0; transform: translateY(6px); }  to { opacity: 1; transform: none; } }
@keyframes pop-in        { from { opacity: 0; transform: translateY(-8px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes fade-in       { from { opacity: 0; } to { opacity: 1; } }
@keyframes stat-rise     { from { opacity: 0; transform: translateY(12px) scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes pulse-ring    { from { opacity: 0.5; transform: scale(0.8); } to { opacity: 0; transform: scale(2.1); } }
@keyframes bar-fill      { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes shimmer-sweep { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

/* --------------------------------------------------------------------------
   Focus-visible coverage for the controls the original ring rule missed.
   Keyboard users get the same 2px ring everywhere; mouse users never see it.
   -------------------------------------------------------------------------- */
summary:focus-visible,
.switch:focus-visible,
.chip-x:focus-visible,
.faq-item summary:focus-visible,
.filter-bar input:focus-visible,
.filter-bar select:focus-visible,
.search-input:focus-visible,
#regionSearch:focus-visible,
.page-jump input:focus-visible,
.metric-toggle-btn:focus-visible,
.drawer-close:focus-visible,
.copy-btn:focus-visible {
  outline: 2px solid var(--chart-1);
  outline-offset: 2px;
  border-radius: 6px;
}

/* --------------------------------------------------------------------------
   Interactive feedback. One shared transition contract for every control on
   the site, so a button on /servers reacts exactly like a pill on /view.
   -------------------------------------------------------------------------- */
.btn,
.tab-btn,
.range-select a,
.pill-item,
.metric-toggle-btn,
.theme-toggle,
.nav-mobile-toggle,
.quick-search-trigger,
.quick-search-item,
.copy-btn,
.drawer-close,
.fav-star,
.resource-select-btn,
.pagination a,
.tag-cloud a.tag-pill,
.chip-x,
.search-suggest-item,
.nav-dropdown-menu a,
.site-footer nav a {
  transition:
    background-color var(--dur-1) ease,
    border-color var(--dur-1) ease,
    color var(--dur-1) ease,
    filter var(--dur-2) ease,
    opacity var(--dur-1) ease,
    transform var(--dur-1) var(--ease-out);
}

/* Press feedback - the whole point is that a click feels like it landed. */
.btn:active,
.tab-btn:active,
.range-select a:active,
.pill-item:active,
.metric-toggle-btn:active,
.theme-toggle:active,
.nav-mobile-toggle:active,
.quick-search-trigger:active,
.pagination a:active,
.tag-cloud a.tag-pill:active,
.resource-select-btn:active {
  transform: scale(0.96);
}
.server-card:active,
.feature-card:active,
.resource-card:active { transform: translateY(-1px) scale(0.995); }

.btn-outline:hover { border-color: color-mix(in srgb, var(--chart-1) 40%, var(--border)); }
.theme-toggle:hover { background: var(--accent); transform: rotate(-14deg) scale(1.06); }
.nav-mobile-toggle:hover { background: var(--accent); }
.copy-btn:active { transform: scale(0.9); }
.chip-x:hover { transform: rotate(90deg); }
.fav-star:active { transform: scale(0.92); }
.drawer-close:hover { transform: rotate(90deg); }

/* --------------------------------------------------------------------------
   Header / nav
   -------------------------------------------------------------------------- */
.site-header { backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%); }
.brand-logo { transition: transform var(--dur-3) var(--ease-out); }
.brand:hover .brand-logo { transform: scale(1.12) rotate(-8deg); }

@media (min-width: 861px) {
  /* Underline grows from the left on hover instead of the link just changing
     colour - gives the nav a readable hover target at 0.825rem. */
  .nav-links > a { position: relative; transition: color var(--dur-1) ease; }
  .nav-links > a::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -0.3rem; height: 2px;
    background: var(--chart-1); border-radius: 2px;
    transform: scaleX(0); transform-origin: left center;
    transition: transform var(--dur-2) var(--ease-out);
  }
  .nav-links > a:hover::after { transform: scaleX(1); }

  .nav-dropdown-trigger { transition: color var(--dur-1) ease; }
  .nav-dropdown-menu { transition: opacity var(--dur-2) ease, transform var(--dur-2) var(--ease-out), visibility var(--dur-2); }
  .nav-dropdown-menu { transform: translateY(-6px) scale(0.985); transform-origin: top right; }
  .nav-dropdown.open .nav-dropdown-menu { transform: none; }

  /* Items ladder in behind the panel. Delays only exist on the open state,
     so closing snaps back instantly instead of dribbling out. */
  .nav-dropdown-menu a { opacity: 0; transform: translateY(-5px); }
  .nav-dropdown.open .nav-dropdown-menu a { opacity: 1; transform: none; }
  .nav-dropdown.open .nav-dropdown-menu a:nth-child(1) { transition-delay: 0.02s; }
  .nav-dropdown.open .nav-dropdown-menu a:nth-child(2) { transition-delay: 0.045s; }
  .nav-dropdown.open .nav-dropdown-menu a:nth-child(3) { transition-delay: 0.07s; }
  .nav-dropdown.open .nav-dropdown-menu a:nth-child(4) { transition-delay: 0.095s; }
  .nav-dropdown.open .nav-dropdown-menu a:nth-child(5) { transition-delay: 0.12s; }
  .nav-dropdown.open .nav-dropdown-menu a:nth-child(n+6) { transition-delay: 0.145s; }
}

@media (max-width: 860px) {
  .nav-mobile-toggle .nav-mobile-icon-open,
  .nav-mobile-toggle .nav-mobile-icon-close { transition: transform var(--dur-2) var(--ease-out); }
  .nav-mobile-toggle.is-open .nav-mobile-icon-close { transform: rotate(90deg); }

  /* In the mobile panel the primary links inherited .nav-links' muted colour
     while the flattened "Daha Fazla" links were full-contrast, so one list
     read as two. Same weight for both here. */
  .nav-links.mobile-open > a { color: var(--foreground); }

  .nav-links.mobile-open { animation: rise-in-sm var(--dur-2) var(--ease-out) backwards; }
  .nav-links.mobile-open > a,
  .nav-links.mobile-open .nav-dropdown-menu a { animation: rise-in-sm 0.26s var(--ease-out) backwards; }
  .nav-links.mobile-open > a:nth-child(2) { animation-delay: 0.03s; }
  .nav-links.mobile-open > a:nth-child(3) { animation-delay: 0.06s; }
  .nav-links.mobile-open > a:nth-child(4) { animation-delay: 0.09s; }
  .nav-links.mobile-open .nav-dropdown-menu a:nth-child(1) { animation-delay: 0.12s; }
  .nav-links.mobile-open .nav-dropdown-menu a:nth-child(2) { animation-delay: 0.14s; }
  .nav-links.mobile-open .nav-dropdown-menu a:nth-child(3) { animation-delay: 0.16s; }
  .nav-links.mobile-open .nav-dropdown-menu a:nth-child(n+4) { animation-delay: 0.18s; }
}

/* Quick search (Ctrl+K) - the panel now arrives instead of appearing. */
.quick-search-overlay.open { animation: fade-in 0.15s ease-out backwards; }
.quick-search-overlay.open .quick-search-panel { animation: pop-in 0.24s var(--ease-out) backwards; }
.quick-search-item.active { box-shadow: inset 2px 0 0 var(--chart-1); }

/* --------------------------------------------------------------------------
   Hero + headline typography
   -------------------------------------------------------------------------- */
.hero h1, .section-heading h2, .page-header h1, .chart-card-header h3 { text-wrap: balance; }
.hero p.lead, .section-heading p, .page-header p { text-wrap: pretty; }

.hero { padding-bottom: 3.5rem; }
.hero .badge      { animation: rise-in 0.5s var(--ease-out) backwards; }
.hero h1          { animation: rise-in 0.55s var(--ease-out) 0.06s backwards; }
.hero p.lead      { animation: rise-in 0.55s var(--ease-out) 0.12s backwards; }
.hero-actions     { animation: rise-in 0.55s var(--ease-out) 0.18s backwards; }
.hero .badge { transition: border-color var(--dur-2) ease, color var(--dur-2) ease; }
.hero .badge:hover { border-color: color-mix(in srgb, var(--chart-1) 45%, var(--border)); color: var(--foreground); }

.section-heading { margin-bottom: 2.25rem; }
.section-heading h2 { font-size: clamp(1.55rem, 1.15rem + 1.3vw, 2.05rem); letter-spacing: -0.022em; line-height: 1.2; }
.section-heading .kicker { display: inline-block; }

.page-header { padding: 2.75rem 0 1.25rem; }
.page-header h1 { font-size: clamp(1.6rem, 1.3rem + 1.1vw, 2rem); letter-spacing: -0.022em; line-height: 1.2; }
.page-header p { max-width: 46rem; font-size: 0.95rem; line-height: 1.55; }
.page-header { animation: rise-in 0.45s var(--ease-out) backwards; }

/* --------------------------------------------------------------------------
   Hero / page stat figures. The big numbers are the first thing the page is
   selling, so they get their own entrance and a single expanding ring behind
   the icon - one-shot, never a loop.
   -------------------------------------------------------------------------- */
.stats-row .stat { animation: stat-rise 0.5s var(--ease-out) backwards; }
.stats-row .stat:nth-child(2) { animation-delay: 0.08s; }
.stats-row .stat:nth-child(3) { animation-delay: 0.16s; }
.stats-row .stat:nth-child(4) { animation-delay: 0.24s; }

.stat .num { letter-spacing: -0.03em; line-height: 1.1; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  /* --chart-1/--chart-3 are identical in both themes (the dark override does
     not touch the chart ramp), so this gradient is theme-safe by definition. */
  .stat .num {
    background: linear-gradient(135deg, var(--chart-1), var(--chart-3));
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  /* A stat figure can carry its own meaning-bearing colour inside it - /asn's
     "Aralik basina gore degisim" wraps its value in .gain-pos / .gain-neg.
     The transparent text-fill above is inherited, so without this the green
     (or red) that encodes direction was being replaced by the brand gradient.
     Restoring the fill to the span's own colour keeps the signal. */
  .stat .num .gain-pos,
  .stat .num .gain-neg {
    -webkit-text-fill-color: currentColor;
    background: none;
  }
}
.stat .label { font-size: 0.82rem; letter-spacing: 0.01em; }

.stat-icon { position: relative; transition: transform var(--dur-3) var(--ease-out); }
.stat-icon::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  border: 1px solid color-mix(in srgb, var(--chart-1) 55%, transparent);
  animation: pulse-ring 1.5s var(--ease-out) 0.35s backwards;
}
.stats-row .stat:nth-child(2) .stat-icon::after { animation-delay: 0.43s; }
.stats-row .stat:nth-child(3) .stat-icon::after { animation-delay: 0.51s; }
.stats-row .stat:nth-child(4) .stat-icon::after { animation-delay: 0.59s; }
.stats-row .stat:hover .stat-icon { transform: translateY(-2px) scale(1.06); }

/* --------------------------------------------------------------------------
   Card grids - staggered entrance + richer hover. Capped at 12 so a 24-card
   /servers page never leaves the bottom row waiting.
   -------------------------------------------------------------------------- */
.server-grid > *,
.features > *,
.resource-grid > * { animation: card-rise 0.42s var(--ease-out) backwards; }
.server-grid > :nth-child(2),  .features > :nth-child(2),  .resource-grid > :nth-child(2)  { animation-delay: 0.035s; }
.server-grid > :nth-child(3),  .features > :nth-child(3),  .resource-grid > :nth-child(3)  { animation-delay: 0.07s; }
.server-grid > :nth-child(4),  .resource-grid > :nth-child(4)  { animation-delay: 0.105s; }
.server-grid > :nth-child(5),  .resource-grid > :nth-child(5)  { animation-delay: 0.14s; }
.server-grid > :nth-child(6),  .resource-grid > :nth-child(6)  { animation-delay: 0.175s; }
.server-grid > :nth-child(7),  .resource-grid > :nth-child(7)  { animation-delay: 0.21s; }
.server-grid > :nth-child(8),  .resource-grid > :nth-child(8)  { animation-delay: 0.245s; }
.server-grid > :nth-child(9),  .resource-grid > :nth-child(9)  { animation-delay: 0.28s; }
.server-grid > :nth-child(n+10), .resource-grid > :nth-child(n+10) { animation-delay: 0.3s; }

.server-icon, .server-icon-fallback { transition: transform var(--dur-3) var(--ease-out); }
.server-card:hover .server-icon,
.server-card:hover .server-icon-fallback { transform: scale(1.07); }
.spark { transition: opacity var(--dur-2) ease; }
.server-card:hover .spark { opacity: 1; }
.server-card .fav-star { opacity: 0.55; }
.server-card:hover .fav-star, .fav-star:focus-visible, .fav-star-active { opacity: 1; }
.server-name { transition: color var(--dur-1) ease; }
.server-card:hover .server-name { color: var(--chart-1); }
.tag-pill { transition: background-color var(--dur-1) ease, border-color var(--dur-1) ease, color var(--dur-1) ease; }
.server-card:hover .tag-pill { border-color: color-mix(in srgb, var(--chart-1) 30%, var(--border)); }

.icon-badge { transition: transform var(--dur-3) var(--ease-out); }
.feature-card:hover .icon-badge { transform: translateY(-2px) scale(1.06); }
.feature-card li::before { transition: transform var(--dur-2) var(--ease-out); display: inline-block; }
.feature-card:hover li::before { transform: scale(1.2); }

.resource-card-name { transition: color var(--dur-1) ease; }
.resource-card:hover .resource-card-name { color: var(--chart-1); }

/* Capacity bars sweep out from the left instead of being painted flat.
   transform:scaleX, never width - the inline percentage width stays the
   single source of truth for how full the bar actually is. */
.progress-bar > div { transform-origin: left center; animation: bar-fill 0.65s var(--ease-out) 0.1s backwards; }

/* --------------------------------------------------------------------------
   Tabs - the active marker slides instead of blinking, and the panel fades.
   -------------------------------------------------------------------------- */
.tab-btn { position: relative; }
.tab-btn::after {
  content: ""; position: absolute; left: 0.5rem; right: 0.5rem; bottom: -1px; height: 2px;
  background: var(--chart-1); border-radius: 2px 2px 0 0;
  transform: scaleX(0); transform-origin: center;
  transition: transform var(--dur-2) var(--ease-out), opacity var(--dur-1) ease;
}
.tab-btn:hover::after { transform: scaleX(0.5); opacity: 0.55; }
.tab-btn.active::after { transform: scaleX(1); opacity: 1; }
.tab-btn.active { border-bottom-color: transparent; }  /* ::after is the marker now */
.tab-panel.active { animation: rise-in-sm 0.24s var(--ease-out) backwards; }

/* Range / metric pills */
.range-select a:hover { border-color: color-mix(in srgb, var(--chart-1) 50%, var(--border)); color: var(--foreground); }
.range-select a.active { box-shadow: 0 2px 10px color-mix(in srgb, var(--chart-1) 32%, transparent); }
.metric-toggle-btn:hover { color: var(--foreground); }
.pill-item.active .pill-item-label { font-weight: 600; }
.filter-chip { animation: rise-in-sm 0.28s var(--ease-out) backwards; }
.filter-chip:nth-child(2) { animation-delay: 0.04s; }
.filter-chip:nth-child(3) { animation-delay: 0.08s; }
.filter-chip:nth-child(n+4) { animation-delay: 0.12s; }

/* --------------------------------------------------------------------------
   Chart cards. On /view these stack 9 deep in one scroll, so the header now
   reads as a real panel head (hairline rule) and the nested grid cards carry
   a quieter version of the same top stripe - same motif, two weights, so the
   eye can tell "primary chart" from "supporting chart" while scrolling.
   -------------------------------------------------------------------------- */
.chart-card-header {
  padding-bottom: 0.8rem;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
}
.chart-card-header h3 { letter-spacing: -0.012em; }
.chart-icon-badge { transition: transform var(--dur-3) var(--ease-out); }
.chart-card:hover .chart-icon-badge { transform: scale(1.08); }
.metrics-grid .chart-card::before { opacity: 0.45; }
.chart-card { scroll-margin-top: 5rem; }

/* Charts fade up rather than snapping in when Chart.js finishes its first
   paint - a graceful arrival with zero JS and no loop. */
.chart-card canvas,
.clock-canvas-box canvas { animation: fade-in 0.45s ease-out 0.12s backwards; }

/* KPI tiles read as one rhythm with the cards around them. */
.kpi-num, .clock-stat .num, .detail-players .num { letter-spacing: -0.025em; }
.kpi-tile { transition: transform var(--dur-2) var(--ease-out), border-color var(--dur-1) ease; }
.kpi-tile:hover { transform: translateY(-2px); }
.trend-badge { transition: transform var(--dur-2) var(--ease-out); }
.kpi-tile:hover .trend-badge { transform: scale(1.05); }

/* Server detail header arrives with the page. */
.detail-header { animation: card-rise 0.42s var(--ease-out) backwards; }
.detail-icon, .detail-icon-fallback { transition: transform var(--dur-3) var(--ease-out); }
.detail-header:hover .detail-icon,
.detail-header:hover .detail-icon-fallback { transform: scale(1.05); }
.rank-badge { transition: transform var(--dur-2) var(--ease-out); }
.rank-badge:hover { transform: translateY(-1px); }

/* --------------------------------------------------------------------------
   Tables at scale - the widest readability gap on the site. Header gets a
   real rule under it, rows get a hover tint so the eye can track across a
   wide row, and the first handful ladder in with the card.
   -------------------------------------------------------------------------- */
.growth-table th, .status-table th { border-bottom: 1px solid var(--border); }
.growth-table tbody tr,
.status-table tbody tr,
.kv-table tbody tr { transition: background-color var(--dur-1) ease; }
.growth-table tbody tr:hover,
.status-table tbody tr:hover,
.kv-table tbody tr:hover { background: color-mix(in srgb, var(--accent) 75%, transparent); }
.growth-table tbody tr, .status-table tbody tr { animation: rise-in-sm 0.3s var(--ease-out) backwards; }
.growth-table tbody tr:nth-child(2), .status-table tbody tr:nth-child(2) { animation-delay: 0.03s; }
.growth-table tbody tr:nth-child(3), .status-table tbody tr:nth-child(3) { animation-delay: 0.06s; }
.growth-table tbody tr:nth-child(4), .status-table tbody tr:nth-child(4) { animation-delay: 0.09s; }
.growth-table tbody tr:nth-child(5), .status-table tbody tr:nth-child(5) { animation-delay: 0.12s; }
.growth-table tbody tr:nth-child(6), .status-table tbody tr:nth-child(6) { animation-delay: 0.15s; }
.growth-table tbody tr:nth-child(n+7), .status-table tbody tr:nth-child(n+7) { animation-delay: 0.17s; }
.growth-table td:first-child, .status-table td:first-child { font-weight: 500; }
.kv-row { transition: background-color var(--dur-1) ease; }

/* --------------------------------------------------------------------------
   Empty states - previously bare centred text with no container.
   -------------------------------------------------------------------------- */
.empty-state {
  border: 1px dashed color-mix(in srgb, var(--border) 90%, var(--muted-foreground));
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--muted) 40%, transparent);
  padding: 3.25rem 1.5rem;
  animation: card-rise 0.42s var(--ease-out) backwards;
}
.empty-state .icon { animation: stat-rise 0.5s var(--ease-out) 0.08s backwards; }
.empty-state p { line-height: 1.6; }

/* --------------------------------------------------------------------------
   Loading state. The only looping animation in this file, and it only runs
   while the element actually carries the loading class (see the /asn ASN
   switch handler, which adds .chart-loading after a short delay).
   -------------------------------------------------------------------------- */
.skeleton {
  position: relative; overflow: hidden;
  background: var(--muted); border-radius: calc(var(--radius) - 6px);
}
.skeleton::after,
.explorer-layout.chart-loading .explorer-chart-area::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--foreground) 9%, transparent), transparent);
  animation: shimmer-sweep 1.3s linear infinite;
}
.explorer-layout.chart-loading .explorer-chart-area { position: relative; overflow: hidden; }

/* --------------------------------------------------------------------------
   FAQ - the bare "+" now turns into a close mark and the answer slides in.
   -------------------------------------------------------------------------- */
.faq-item { transition: border-color var(--dur-2) ease; }
.faq-item summary { transition: color var(--dur-1) ease; gap: 1rem; }
.faq-item summary:hover { color: var(--chart-1); }
.faq-item summary > span {
  display: inline-block; flex-shrink: 0;
  font-size: 1.25rem; line-height: 1; color: var(--muted-foreground);
  transition: transform var(--dur-2) var(--ease-out), color var(--dur-1) ease;
}
.faq-item[open] summary > span { transform: rotate(45deg); color: var(--chart-1); }
.faq-item[open] { border-color: color-mix(in srgb, var(--chart-1) 30%, var(--border)); }
.faq-item[open] p { animation: rise-in-sm 0.26s var(--ease-out) backwards; }

/* --------------------------------------------------------------------------
   Filters drawer + overlay: smoother curve, and the chips/sections settle in.
   -------------------------------------------------------------------------- */
.drawer-overlay { transition: opacity var(--dur-3) ease; }
.filters-drawer { transition: transform 0.34s var(--ease-soft); }
.switch-knob { transition: transform var(--dur-2) var(--ease-out); }
.switch { transition: background-color var(--dur-2) ease; }

/* --------------------------------------------------------------------------
   Footer + misc chrome
   -------------------------------------------------------------------------- */
.site-footer nav a:hover { color: var(--foreground); }
.game-split-row { animation: rise-in-sm 0.35s var(--ease-out) backwards; }
.data-note { animation: rise-in-sm 0.35s var(--ease-out) backwards; }
.alert { animation: rise-in-sm 0.35s var(--ease-out) backwards; }
.pagination { animation: fade-in 0.4s ease-out 0.15s backwards; }

/* Themed, unobtrusive scrollbars for the site's many internal scroll panes.
   Scoped to named containers on purpose - Explorer v2 keeps its own. */
.pill-list, .kv-table, .resource-list, .quick-search-results,
.search-suggest, .filters-drawer-body, .range-select, .explorer-list {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--muted-foreground) 45%, transparent) transparent;
}
.pill-list::-webkit-scrollbar, .kv-table::-webkit-scrollbar, .resource-list::-webkit-scrollbar,
.quick-search-results::-webkit-scrollbar, .search-suggest::-webkit-scrollbar,
.filters-drawer-body::-webkit-scrollbar, .range-select::-webkit-scrollbar,
.explorer-list::-webkit-scrollbar { width: 8px; height: 8px; }
.pill-list::-webkit-scrollbar-thumb, .kv-table::-webkit-scrollbar-thumb, .resource-list::-webkit-scrollbar-thumb,
.quick-search-results::-webkit-scrollbar-thumb, .search-suggest::-webkit-scrollbar-thumb,
.filters-drawer-body::-webkit-scrollbar-thumb, .range-select::-webkit-scrollbar-thumb,
.explorer-list::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--muted-foreground) 38%, transparent);
  border-radius: 999px;
}
.pill-list::-webkit-scrollbar-track, .kv-table::-webkit-scrollbar-track, .resource-list::-webkit-scrollbar-track,
.quick-search-results::-webkit-scrollbar-track, .search-suggest::-webkit-scrollbar-track,
.filters-drawer-body::-webkit-scrollbar-track, .range-select::-webkit-scrollbar-track,
.explorer-list::-webkit-scrollbar-track { background: transparent; }

/* --------------------------------------------------------------------------
   Mobile (<=860px) refinements. Everything above already collapses; this is
   about vertical rhythm on a 375px screen, where the stat column and hero
   were the two tallest offenders.
   -------------------------------------------------------------------------- */
@media (max-width: 860px) {
  .hero { padding: 3.25rem 0 2.5rem; }
  .hero p.lead { font-size: 0.98rem; }
  .hero-actions .btn { flex: 1; min-width: 10rem; }

  /* Two across instead of one tall column - the numbers stay legible and the
     row stops eating a full screen. The 3rd stat centres itself underneath. */
  .stats-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 1rem; padding: 2.25rem 0; }
  .stats-row-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* An odd trailing stat (the 3-up rows) spans the full width instead of
     sitting alone in the left column with a hole beside it. */
  .stats-row .stat:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .stat .num { font-size: 1.85rem; }

  .section-heading { margin-bottom: 1.75rem; }
  .page-header { padding: 2rem 0 1rem; }
  .chart-card-header { margin-bottom: 0.75rem; }
  .tabs { overflow-x: auto; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .tab-btn { flex-shrink: 0; }
}

/* ==========================================================================
   Signature v4 - depth, material & atmosphere
   --------------------------------------------------------------------------
   Appended as its own block; nothing above is reflowed. Polish v3 gave the
   site motion. It did not give it a *material* or a *signature* - the visual
   system underneath was still stock shadcn: flat cards on a flat background,
   one blue, no depth, nothing that says "DDoS-protected game-server
   infrastructure". This block adds that, under Polish v3's ground rules plus
   two of its own:

     - CSS only. No JS, no markup change, nothing here selects `.xp-*`
       (Explorer v2 owns that block, untouched).
     - Only `transform` / `opacity` / `filter` / colour are ever animated.
       Where a hover wants a glow, the glow is either a pseudo-element faded
       with `opacity`, or an extra layer inside a `box-shadow` that was
       ALREADY in that selector's transition list before this block existed -
       no new animated property is introduced anywhere. Nothing here can
       trigger layout, which matters on /view, where 9+ Chart.js canvases
       share one scroll.
     - Every new colour is a token defined in BOTH `:root` and `:root.dark`,
       or a `color-mix()` over the existing theme tokens.
     - Scroll reveals use `animation-timeline: view()` behind `@supports` AND
       `prefers-reduced-motion: no-preference`. Content is visible by
       default; the reveal is purely additive, so a browser without scroll
       timelines (and a user who asked for no motion) simply never sees it
       and nothing is ever left hidden.

   Accent story. The theme shipped five blues and nothing else. Rather than
   invent a palette this block pairs the brand blue with one violet and one
   cyan (--nz-accent-2 / --nz-accent-3) used only in gradients, glows and
   meshes - plus --nz-accent-text, which fixes a real accessibility bug on
   the way: small accent text was --chart-1 (#1447e6) in BOTH themes, and
   #1447e6 on #0a0a0a is 2.9:1. In dark it now resolves to --chart-2
   (measured 8.0:1 in-browser). The big stat figures had the same problem at
   their darkest gradient stop and now run --chart-3 -> violet (7.2:1).
   ========================================================================== */

:root {
  /* Companion accents - gradients, glows and meshes only, never body text. */
  --nz-accent-2: #5b34e8;          /* violet */
  --nz-accent-3: #0091c2;          /* cyan   */
  /* Small accent text: kickers, badge labels, icon glyphs. */
  --nz-accent-text: var(--chart-1);
  /* Primary-button gradient end. Deep enough that white text clears 8:1 on
     it in either theme, so the button never depends on which theme won. */
  --nz-btn-2: #2f1bc4;

  /* Material. A card is a lit surface, not a rectangle: the hairline is the
     light catching its top edge, the wash is the surface picking up a trace
     of the brand hue as it falls away. */
  --nz-hairline: rgb(255 255 255 / 0.9);
  --nz-card-wash: linear-gradient(180deg, rgb(255 255 255 / 0.6), color-mix(in srgb, var(--chart-1) 3.5%, transparent));

  /* Layered elevation - a tight contact shadow plus a wide soft one, tinted
     toward the brand hue rather than neutral grey. */
  --nz-elev-1: 0 1px 2px rgb(23 31 56 / 0.06), 0 8px 18px -12px rgb(23 31 56 / 0.26);
  --nz-elev-2: 0 2px 5px rgb(23 31 56 / 0.06), 0 18px 34px -18px rgb(23 31 56 / 0.3);
  --nz-elev-3: 0 4px 10px rgb(23 31 56 / 0.07), 0 30px 56px -24px rgb(23 31 56 / 0.34);

  /* Atmosphere */
  --nz-grid-line: rgb(20 71 230 / 0.06);
  --nz-mesh-1: color-mix(in srgb, var(--chart-1) 26%, transparent);
  --nz-mesh-2: color-mix(in srgb, var(--nz-accent-2) 20%, transparent);
  --nz-mesh-3: color-mix(in srgb, var(--nz-accent-3) 16%, transparent);
  --nz-glow: color-mix(in srgb, var(--chart-1) 40%, transparent);
  --nz-sheen: rgb(255 255 255 / 0.4);
}

:root.dark {
  --nz-accent-2: #a78bfa;
  --nz-accent-3: #22d3ee;
  --nz-accent-text: var(--chart-2);
  --nz-btn-2: #3a22d6;

  --nz-hairline: rgb(255 255 255 / 0.075);
  --nz-card-wash: linear-gradient(180deg, rgb(255 255 255 / 0.035), transparent 55%);

  --nz-elev-1: 0 1px 2px rgb(0 0 0 / 0.5), 0 10px 22px -14px rgb(0 0 0 / 0.8);
  --nz-elev-2: 0 2px 6px rgb(0 0 0 / 0.55), 0 22px 40px -20px rgb(0 0 0 / 0.85);
  --nz-elev-3: 0 4px 12px rgb(0 0 0 / 0.6), 0 34px 62px -26px rgb(0 0 0 / 0.9);

  /* The mesh has to work much harder against #0a0a0a than against white -
     these are the values that read as atmosphere rather than as nothing.
     Checked on screen in both themes, not reasoned about. */
  --nz-grid-line: rgb(255 255 255 / 0.05);
  --nz-mesh-1: color-mix(in srgb, var(--chart-1) 62%, transparent);
  --nz-mesh-2: color-mix(in srgb, var(--nz-accent-2) 30%, transparent);
  --nz-mesh-3: color-mix(in srgb, var(--nz-accent-3) 24%, transparent);
  --nz-glow: color-mix(in srgb, var(--chart-2) 40%, transparent);
  --nz-sheen: rgb(255 255 255 / 0.16);
}

/* --------------------------------------------------------------------------
   Keyframes. Two are ambient loops (the hero's two atmosphere layers) and
   everything else is one-shot. Both loops are transform/opacity only, each
   sits on a single pseudo-element, and both are switched off outright by the
   reduced-motion guard at the end of this block.
   -------------------------------------------------------------------------- */
@keyframes nz-aurora-a {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(3%, 2%, 0) scale(1.12); }
}
@keyframes nz-aurora-b {
  0%   { transform: translate3d(0, 0, 0) scale(1.06); opacity: 0.75; }
  100% { transform: translate3d(-4%, 1%, 0) scale(1); opacity: 1; }
}
@keyframes nz-sheen {
  0%   { opacity: 0; transform: translateX(-150%) skewX(-18deg); }
  18%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(320%) skewX(-18deg); }
}
@keyframes nz-scan {
  0%   { opacity: 0.25; transform: translateY(-100%); }
  55%  { opacity: 0.6; }
  100% { opacity: 0;    transform: translateY(100%); }
}
@keyframes nz-reveal {
  from { opacity: 0; transform: translateY(26px) scale(0.988); }
  to   { opacity: 1; transform: none; }
}
@keyframes nz-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* --------------------------------------------------------------------------
   Accent-text swap - see the note at the top of this block. Small blue-on-
   black text was the worst contrast offender on the site; it all resolves
   through --nz-accent-text now.
   -------------------------------------------------------------------------- */
.section-heading .kicker,
.protected-badge,
.stat-icon,
.icon-badge,
.chart-icon-badge,
.alert-icon,
.empty-state .icon,
.self-badge,
.details-grid .card h4 .icon,
.filter-section h4 .icon,
.feature-card li::before { color: var(--nz-accent-text); }

.server-card:hover .server-name,
.resource-card:hover .resource-card-name,
.faq-item summary:hover { color: var(--nz-accent-text); }

/* --------------------------------------------------------------------------
   Card material. One shared surface definition: an inner top highlight, the
   existing 1px ring, and a two-part elevation. The `background-image` wash
   layers over each card's own `background-color`, so --card stays the single
   source of truth for the fill and neither theme can be broken by it.
   -------------------------------------------------------------------------- */
.feature-card,
.server-card,
.resource-card,
.chart-card,
.mini-stat-grid .card,
.details-grid .card,
.detail-header,
.explorer-panel,
.game-split-row,
.integrity-signal,
.search-suggest,
.nav-dropdown-menu,
.resource-selection-bar {
  background-image: var(--nz-card-wash);
  box-shadow:
    inset 0 1px 0 0 var(--nz-hairline),
    0 0 0 1px var(--border),
    var(--nz-elev-1);
}

/* The three interactive card types lift further, take an accent ring, and
   cast a coloured glow. `box-shadow` is already in all three selectors'
   transition list from the base rules further up this file, so this adds no
   newly-animated property. */
.server-card:hover,
.feature-card:hover,
.resource-card:hover {
  transform: translateY(-4px);
  box-shadow:
    inset 0 1px 0 0 var(--nz-hairline),
    0 0 0 1px color-mix(in srgb, var(--chart-1) 45%, var(--border)),
    var(--nz-elev-3),
    0 20px 46px -26px var(--nz-glow);
}
/* Chart / stat cards acknowledge the cursor but never lift: on /view they're
   full-width panels wrapping a canvas, and a moving panel under a chart you
   are reading is noise, not feedback. They also have no `transition` of
   their own, so instead of introducing a box-shadow transition the accent
   ring is a pseudo-element faded with opacity. `pointer-events: none` is
   load-bearing - without it this layer would sit over the canvas and swallow
   Chart.js's hover tooltips. */
.chart-card::after,
.mini-stat-grid .card::after,
.details-grid .card::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--chart-1) 32%, transparent);
  opacity: 0;
  transition: opacity var(--dur-2) ease;
}
.chart-card:hover::after,
.mini-stat-grid .card:hover::after,
.details-grid .card:hover::after { opacity: 1; }

/* Interior light, faded in with opacity on a composited layer. z-index:0 on
   the layer + z-index:1 on the real children keeps it strictly behind the
   content; .fav-star is excluded because it is `position: absolute` and a
   blanket `position: relative` on the children would drop it back into flow
   (it did - it landed top-left instead of top-right). */
.server-card::before,
.feature-card::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  border-radius: inherit;
  background:
    radial-gradient(75% 60% at 12% 0%, color-mix(in srgb, var(--chart-1) 12%, transparent), transparent 70%),
    radial-gradient(60% 55% at 100% 100%, color-mix(in srgb, var(--nz-accent-2) 10%, transparent), transparent 70%);
  opacity: 0;
  transition: opacity var(--dur-3) var(--ease-out);
}
.server-card:hover::before,
.feature-card:hover::before { opacity: 1; }
.server-card > *:not(.fav-star),
.feature-card > * { position: relative; z-index: 1; }
.server-card .fav-star { z-index: 3; }

/* The rest of the server-card hover. The icon's 1px ring is static and the
   hover lift is a `filter: drop-shadow` rather than a second box-shadow -
   drop-shadow follows the icon's rounded-rect clip, and it keeps this block
   from introducing a box-shadow transition that wasn't already there. */
.server-card .server-icon,
.server-card .server-icon-fallback {
  box-shadow: 0 0 0 1px var(--border);
  transition: transform var(--dur-3) var(--ease-out), filter var(--dur-2) ease;
}
.server-card:hover .server-icon,
.server-card:hover .server-icon-fallback {
  filter: drop-shadow(0 4px 9px var(--nz-glow));
}
.spark { transition: opacity var(--dur-2) ease, filter var(--dur-2) ease; }
.server-card:hover .spark { filter: drop-shadow(0 0 5px currentColor); }
.progress-bar > div {
  background: linear-gradient(90deg, var(--chart-1), color-mix(in srgb, var(--nz-accent-2) 70%, var(--chart-1)));
  transition: filter var(--dur-2) ease;
}
.server-card:hover .progress-bar > div { filter: brightness(1.12) saturate(1.15); }

/* --------------------------------------------------------------------------
   Primary button - gradient body, lit top edge, coloured cast shadow, and a
   one-shot shine that sweeps across on hover or keyboard focus. `left` and
   `width` on the shine are static; only transform and opacity move.
   -------------------------------------------------------------------------- */
.btn-primary {
  position: relative; overflow: hidden; isolation: isolate;
  background: linear-gradient(135deg, var(--chart-1) 0%, var(--nz-btn-2) 100%);
  box-shadow:
    inset 0 1px 0 0 rgb(255 255 255 / 0.22),
    0 1px 2px rgb(23 31 56 / 0.2),
    0 10px 22px -10px var(--nz-glow);
}
.btn-primary:hover { filter: brightness(1.1) saturate(1.05); transform: translateY(-2px); }
.btn-primary::after {
  content: ""; position: absolute; top: -20%; bottom: -20%; left: 0; width: 42%;
  z-index: -1; pointer-events: none; opacity: 0;
  background: linear-gradient(100deg, transparent, var(--nz-sheen), transparent);
  transform: translateX(-150%) skewX(-18deg);
}
.btn-primary:hover::after,
.btn-primary:focus-visible::after { animation: nz-sheen 0.9s var(--ease-out); }

.btn-outline {
  background-image: var(--nz-card-wash);
  box-shadow: inset 0 1px 0 0 var(--nz-hairline);
}
.btn-outline:hover { transform: translateY(-1px); }

/* --------------------------------------------------------------------------
   Hero atmosphere. Two stacked layers behind the copy, both at z-index:-1 and
   both clipped by the hero's existing `overflow: hidden`:

     ::before  a three-point mesh (blue / violet / cyan) drifting on a slow
               alternating transform. The layer is inset well past the hero's
               edges so the drift never exposes a seam, the radial centres
               are offset to compensate for that inset, and a linear mask
               fades the whole thing out before the hero's bottom edge so the
               clip never reads as a hard horizontal line.
     ::after   a fine grid, radially masked so it dissolves before it reaches
               the headline. It reads as telemetry/infrastructure rather than
               decoration, which is the point on this site specifically.

   Text contrast is unaffected - both layers paint behind the content and the
   masks keep them off the type. Verified on screen in both themes.
   -------------------------------------------------------------------------- */
.hero::before {
  inset: -34% -15% -12%;
  background:
    radial-gradient(38% 34% at 15% 34%, var(--nz-mesh-2), transparent 70%),
    radial-gradient(34% 30% at 85% 28%, var(--nz-mesh-3), transparent 70%),
    radial-gradient(52% 44% at 50% 24%, var(--nz-mesh-1), transparent 72%);
  -webkit-mask-image: linear-gradient(180deg, #000 0 58%, transparent 92%);
  mask-image: linear-gradient(180deg, #000 0 58%, transparent 92%);
  animation: nz-aurora-a 19s var(--ease-soft) infinite alternate;
  will-change: transform;
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(to right, var(--nz-grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--nz-grid-line) 1px, transparent 1px);
  background-size: 58px 58px;
  -webkit-mask-image: radial-gradient(64% 58% at 50% 6%, #000 0%, transparent 76%);
  mask-image: radial-gradient(64% 58% at 50% 6%, #000 0%, transparent 76%);
  animation: nz-aurora-b 24s var(--ease-soft) infinite alternate;
}

.hero h1 {
  background: linear-gradient(168deg, var(--foreground) 18%, color-mix(in srgb, var(--foreground) 62%, var(--nz-accent-2)) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

/* Hero eyebrow: a glass pill instead of a bordered label. */
.badge {
  position: relative;
  background: color-mix(in srgb, var(--card) 62%, transparent);
  border-color: color-mix(in srgb, var(--chart-1) 22%, var(--border));
  box-shadow: inset 0 1px 0 0 var(--nz-hairline), 0 4px 14px -10px var(--nz-glow);
  color: var(--foreground);
  transition: transform var(--dur-2) var(--ease-out), border-color var(--dur-2) ease, color var(--dur-2) ease;
}
.badge .icon { color: var(--nz-accent-text); }
.hero .badge:hover { transform: translateY(-1px); }

/* --------------------------------------------------------------------------
   Stat figures. The big numbers are what these pages are selling, so they
   get a glow behind them and a two-hue gradient instead of a flat blue.

   Note the shape of the rules below: the gradient is set with
   `background-image`, NOT the `background` shorthand, and the clip lives in
   the same rule. The shorthand resets `background-clip` to border-box, and
   the dark override (`:root.dark .stat .num`) outranks any later,
   lower-specificity attempt to set it back - which renders the number as a
   solid gradient bar with invisible text. This is the version that works.
   -------------------------------------------------------------------------- */
.stats-row {
  /* The full-bleed 1px rules top and bottom now fade out at both ends
     instead of running edge to edge. border-image, so no extra box and no
     pseudo-element inside a grid container (which would become a grid item
     and add a phantom column). */
  border-image: linear-gradient(90deg, transparent, var(--border) 18%, var(--border) 82%, transparent) 1;
}
.stat { position: relative; }
.stat::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: 50%; top: 0.5rem; width: 13rem; height: 8rem;
  transform: translateX(-50%);
  background: radial-gradient(50% 50% at 50% 50%, var(--nz-glow), transparent 72%);
  opacity: 0.32;
  transition: opacity var(--dur-3) ease;
}
.stats-row .stat:hover::before { opacity: 0.55; }

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .stat .num {
    background-image: linear-gradient(135deg, var(--chart-1), var(--nz-accent-2));
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  :root.dark .stat .num { background-image: linear-gradient(135deg, var(--chart-3), var(--nz-accent-2)); }
  /* /asn's "Aralik basina gore degisim" wraps its value in .gain-pos /
     .gain-neg - that green/red carries meaning, so it keeps its own fill
     rather than inheriting the brand gradient (same guard Polish v3 added). */
  .stat .num .gain-pos,
  .stat .num .gain-neg { -webkit-text-fill-color: currentColor; background: none; }

  /* /view's live player count is the hero metric on that page; the KPI tiles
     around it are supporting detail and stay quiet. They read at identical
     weight today. */
  .detail-players .num {
    background-image: linear-gradient(135deg, var(--chart-1), var(--nz-accent-2));
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  :root.dark .detail-players .num { background-image: linear-gradient(135deg, var(--chart-3), var(--nz-accent-2)); }
}
.detail-players .num { font-size: 1.75rem; }

.stat-icon {
  background: linear-gradient(140deg, color-mix(in srgb, var(--chart-1) 18%, transparent), color-mix(in srgb, var(--nz-accent-2) 14%, transparent));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--chart-1) 24%, transparent);
}
.icon-badge,
.chart-icon-badge {
  background: linear-gradient(140deg, color-mix(in srgb, var(--chart-1) 16%, transparent), color-mix(in srgb, var(--nz-accent-2) 12%, transparent));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--chart-1) 20%, transparent);
}

/* --------------------------------------------------------------------------
   Section rhythm. The kicker is a pill now (it was 0.8rem uppercase blue text
   floating alone over every heading), and page headers get the hero's
   atmosphere at a fraction of the strength plus a hairline that fades out at
   both ends - so a long page reads as a sequence of sections instead of one
   continuous scroll.
   -------------------------------------------------------------------------- */
.section-heading .kicker {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.28rem 0.7rem 0.28rem 0.6rem; border-radius: 999px;
  background: color-mix(in srgb, var(--chart-1) 9%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--chart-1) 20%, transparent);
  margin-bottom: 0.15rem;
}
.section-heading .kicker::before {
  content: ""; width: 5px; height: 5px; border-radius: 999px; flex-shrink: 0;
  background: currentColor;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--chart-1) 18%, transparent);
}

.page-header { position: relative; }
.page-header::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  top: -2.5rem; left: -10%; right: -10%; height: 15rem;
  background:
    radial-gradient(40% 60% at 22% 0%, var(--nz-mesh-1), transparent 70%),
    radial-gradient(34% 55% at 78% 0%, var(--nz-mesh-2), transparent 70%);
  opacity: 0.6;
}
.page-header::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--chart-1) 40%, var(--border)) 30%, color-mix(in srgb, var(--nz-accent-2) 35%, var(--border)) 70%, transparent);
  opacity: 0.7;
}

.faq { position: relative; }
.faq::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  top: 0; left: -20%; right: -20%; height: 18rem;
  background: radial-gradient(45% 55% at 50% 0%, var(--nz-mesh-1), transparent 72%);
  opacity: 0.45;
}

/* --------------------------------------------------------------------------
   "Protected By Nerzen" - the company's entire product story, rendering as
   0.7rem body text. It is a trust mark now: a blue-to-cyan pill with a lit
   ring and a soft glow, and a scan line that sweeps down it once on hover.
   -------------------------------------------------------------------------- */
.protected-badge,
.asn-badge {
  position: relative; overflow: hidden;
  padding: 0.26rem 0.65rem; border-radius: 999px;
  font-weight: 600; letter-spacing: 0.01em;
  transition: transform var(--dur-2) var(--ease-out);
}
.protected-badge {
  background: linear-gradient(135deg, color-mix(in srgb, var(--chart-1) 15%, transparent), color-mix(in srgb, var(--nz-accent-3) 13%, transparent));
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--chart-1) 34%, transparent),
    0 4px 14px -8px var(--nz-glow);
}
.protected-badge::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--nz-accent-3) 45%, transparent), transparent);
}
.protected-badge:hover { transform: translateY(-1px); }
.protected-badge:hover::after { animation: nz-scan 1.1s var(--ease-out); }
/* The ASN line next to it is the same shape at a quieter weight - it's the
   factual counterpart, not a claim. */
.asn-badge {
  background: color-mix(in srgb, var(--muted) 70%, transparent);
  box-shadow: inset 0 0 0 1px var(--border);
}

/* The glow on the detail header is a background layer, not a pseudo-element:
   backgrounds are clipped to the border box for free, so this needs no
   `overflow: hidden` - which would have clipped the 2px focus ring on the
   "Sunucuya Katil" / "Discord" buttons that live inside it. */
.detail-header {
  background-image:
    radial-gradient(36% 130% at 88% 0%, color-mix(in srgb, var(--chart-1) 10%, transparent), transparent 72%),
    var(--nz-card-wash);
}

/* The chart-card stripe picks up the companion accents. The supporting cards
   inside .metrics-grid keep the quieter opacity Polish v3 gave them, so the
   "primary chart vs supporting chart" read still holds while scrolling. */
.chart-card::before,
.mini-stat-grid .card::before,
.details-grid .card::before {
  background: linear-gradient(90deg, var(--chart-1), var(--nz-accent-2) 45%, var(--nz-accent-3));
}

/* --------------------------------------------------------------------------
   Header: glass, a hairline that fades at both ends, and a scroll-progress
   line (further down, with the other scroll-timeline rules).
   -------------------------------------------------------------------------- */
.site-header {
  border-bottom-color: transparent;
  background: color-mix(in srgb, var(--background) 78%, transparent);
  box-shadow: 0 1px 0 0 color-mix(in srgb, var(--border) 85%, transparent);
}
.site-header::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--chart-1) 45%, transparent) 25%, color-mix(in srgb, var(--nz-accent-2) 40%, transparent) 75%, transparent);
  opacity: 0.55;
}

/* Blur is only spent where it earns it: three small, short-lived panels. It
   is deliberately NOT applied to any scrolling element that contains a
   canvas. */
.nav-dropdown-menu,
.quick-search-panel,
.resource-selection-bar {
  background: color-mix(in srgb, var(--card) 88%, transparent);
  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
}

/* --------------------------------------------------------------------------
   Pills, chips and tags - glassy instead of flat grey, and every "selected"
   state across the site now carries the same accent gradient, so an active
   range pill on /view, an active tag on /servers and the current page number
   in the pagination all read as one language.
   -------------------------------------------------------------------------- */
.tag-pill,
.filter-chip,
.badge-time,
.support-badge,
.count-badge { background-image: linear-gradient(180deg, var(--nz-hairline), transparent); }

.range-select a.active,
.tag-cloud a.tag-pill.active,
.pill-item.active,
.btn-outline.active,
.pagination .current,
.resource-select-btn.active {
  background: linear-gradient(135deg, var(--chart-1), var(--nz-btn-2));
  border-color: transparent;
  box-shadow: inset 0 1px 0 0 rgb(255 255 255 / 0.2), 0 6px 16px -8px var(--nz-glow);
}
.switch.on { background: linear-gradient(135deg, var(--chart-1), var(--nz-btn-2)); }

/* --------------------------------------------------------------------------
   Loading / idle signature. The shimmer is the site's one pre-existing loop;
   it sweeps a brand-tinted band now instead of a grey one, so a loading pane
   looks like this product rather than a generic skeleton.
   -------------------------------------------------------------------------- */
.skeleton::after,
.explorer-layout.chart-loading .explorer-chart-area::after {
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--chart-1) 14%, transparent) 40%,
    color-mix(in srgb, var(--nz-accent-2) 12%, transparent) 60%,
    transparent
  );
}
.skeleton { box-shadow: inset 0 0 0 1px var(--border); }

.empty-state {
  background-image: radial-gradient(60% 70% at 50% 0%, color-mix(in srgb, var(--chart-1) 5%, transparent), transparent 70%);
  border-color: color-mix(in srgb, var(--chart-1) 22%, var(--border));
}

/* Footer: closes the page instead of trailing off into the background. */
.site-footer {
  position: relative;
  border-top-color: transparent;
  background-image: linear-gradient(180deg, color-mix(in srgb, var(--chart-1) 3.5%, transparent), transparent 55%);
}
.site-footer::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--chart-1) 45%, var(--border)) 30%, color-mix(in srgb, var(--nz-accent-2) 40%, var(--border)) 70%, transparent);
}

/* --------------------------------------------------------------------------
   Scroll-driven reveals, and the header's scroll-progress line.

   Both are wrapped in `@supports` AND `prefers-reduced-motion: no-preference`.
   Content is visible by default: if the browser has no scroll timelines, or
   the user asked for no motion, none of these rules exist at all and nothing
   is ever left hidden. No JS, no scroll listener.

   Deliberately NOT applied to anything containing a <canvas> - /view stacks
   9+ Chart.js canvases in one scroll and a reveal on those cards would
   repaint the charts on every scroll frame. The first row of a card grid
   keeps its existing load stagger; only the rows past the fold reveal on
   scroll, which is the case the load stagger never served anyway (it had
   already finished before the user got there).
   -------------------------------------------------------------------------- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .section-heading,
    .faq-item,
    .features > :nth-child(n),
    .server-grid > :nth-child(n + 4),
    .resource-grid > :nth-child(n + 9),
    .site-footer .inner {
      /* :nth-child(n) / :nth-child(n+4) are not decoration - the per-card
         `animation-delay` stagger further up this file is (0,2,0), so a plain
         `.features > *` (0,1,0) would lose the cascade to it. Matching the
         specificity is what lets the shorthand here win. */
      animation: nz-reveal linear both;
      animation-timeline: view();
      animation-range: entry 2% entry 68%;
    }
  }
}

@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .site-header::after {
      content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
      pointer-events: none; transform-origin: left center; transform: scaleX(0);
      background: linear-gradient(90deg, var(--chart-1), var(--nz-accent-2) 55%, var(--nz-accent-3));
      animation: nz-progress linear both;
      animation-timeline: scroll(root block);
    }
  }
}

/* --------------------------------------------------------------------------
   Reduced motion. The global guard at the top of this file zeroes durations
   and delays, but an `infinite` animation with a ~0 duration still cycles -
   so the ambient hero loops are switched off outright here, and every
   scroll-driven element is pinned to its visible end state. Belt and braces:
   the rules above are already inside a no-preference query. Verified by
   simulating the reduce branch in-browser - hero animation-name resolves to
   `none` and every reveal target reports opacity 1.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .hero::before,
  .hero::after,
  .btn-primary::after,
  .protected-badge::after,
  .site-header::after,
  .skeleton::after,
  .explorer-layout.chart-loading .explorer-chart-area::after {
    animation: none !important;
  }
  .section-heading,
  .faq-item,
  .features > :nth-child(n),
  .server-grid > :nth-child(n + 4),
  .resource-grid > :nth-child(n + 9),
  .site-footer .inner {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* --------------------------------------------------------------------------
   Mobile (<=860px). The atmosphere is sized for a 1440px canvas; at 375px the
   same values read as a solid blue band across the whole hero with grid lines
   crossing the headline. Measured on a 375px screen in both themes, not
   scaled by formula.
   -------------------------------------------------------------------------- */
@media (max-width: 860px) {
  .hero::before { inset: -26% -32% -14%; opacity: 0.62; }
  .hero::after {
    background-size: 42px 42px; opacity: 0.5;
    -webkit-mask-image: radial-gradient(78% 36% at 50% 0%, #000 0%, transparent 72%);
    mask-image: radial-gradient(78% 36% at 50% 0%, #000 0%, transparent 72%);
  }
  .page-header::before { height: 11rem; left: -20%; right: -20%; }
  .stat::before { width: 9rem; height: 6rem; }
  .server-card:hover, .feature-card:hover, .resource-card:hover { transform: translateY(-2px); }
}

/* ==========================================================================
   ASN v2 (/asn) - ranked leaderboard + market-position dashboard.
   --------------------------------------------------------------------------
   Scoped to "asnv-" prefixed classes on purpose, exactly like Explorer v2's
   "xp-" block: the older .explorer-layout / .explorer-panel / .explorer-list /
   .explorer-item rules further up this file are what /asn used to share with
   /explorer, and leaving them untouched keeps this rewrite reversible and
   keeps Explorer v2 out of the blast radius.

   Ground rules inherited from Polish v3 / Signature v4 and held to here:
     - Only transform / opacity / filter / colour are ever animated.
     - Entrance animations use `backwards` fill, never `both`.
     - No new looping animation. The shimmer stays the file's only loop.
     - Every colour is an existing theme token or a color-mix() over one.
   ========================================================================== */

:root {
  --asnv-rail: 300px;
  --asnv-chart-h: 360px;
  /* The /asn accent is orange because NC.ASN is - a provider total must never
     read as "a server" (blue). Two values, same reason --nz-accent-text
     exists: #f97316 is 2.8:1 on white, fine as a bar, unreadable as a label. */
  --asnv-accent: #f97316;
  --asnv-accent-text: #c2410c;   /* 5.2:1 on --background (light) */
}
:root.dark {
  --asnv-accent: #f97316;
  --asnv-accent-text: #fb923c;   /* 8.7:1 on --background (dark) */
}

/* --------------------------------------------------------------------------
   Shell. Full-bleed (no .container) like Explorer, but only the RAIL is
   viewport-locked - the right pane stays in normal document flow so the page
   scrolls normally and the footer is reachable, which Explorer's fully locked
   shell does not manage.
   -------------------------------------------------------------------------- */
.asnv-shell {
  display: grid;
  grid-template-columns: var(--asnv-rail) minmax(0, 1fr);
  align-items: start;
  background: var(--background);
}
/* A <canvas> cannot shrink below its intrinsic size; without this the chart
   column forces the whole grid wider than the viewport. Same bug, same fix as
   `.explorer-layout > *` further up this file. */
.asnv-shell > * { min-width: 0; }

.asnv-rail {
  position: sticky;
  top: 4rem;                          /* clears the 4rem sticky .site-header */
  height: calc(100vh - 4rem);
  z-index: 10;                        /* strictly under .site-header's z-index: 20 */
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-right: 1px solid var(--border);
  background: var(--card);
  background-image: var(--nz-card-wash);
}

.asnv-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
  padding: 0 1.5rem 2.5rem;
  min-width: 0;
}

/* --------------------------------------------------------------------------
   Shared surface. Re-states the Signature v4 card material so this block owns
   its own look without editing that block's selector list.
   -------------------------------------------------------------------------- */
.asnv-card {
  position: relative;
  border-radius: var(--radius);
  background: var(--card);
  background-image: var(--nz-card-wash);
  box-shadow:
    inset 0 1px 0 0 var(--nz-hairline),
    0 0 0 1px var(--border),
    var(--nz-elev-1);
}

/* --------------------------------------------------------------------------
   Topbar + hero
   -------------------------------------------------------------------------- */
.asnv-topbar {
  grid-column: 1 / -1;
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem;
  margin: 0 -1.5rem 0.25rem;
  padding: 0.85rem 1.5rem 0.9rem;
  border-bottom: 1px solid var(--border);
}
.asnv-topbar-title { display: flex; align-items: center; gap: 0.55rem; }
.asnv-topbar-title h1 { margin: 0; font-size: 1.15rem; font-weight: 700; letter-spacing: -0.018em; }
.asnv-icon-badge {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 1.9rem; height: 1.9rem; border-radius: 0.6rem;
  color: var(--asnv-accent-text);
  background: linear-gradient(140deg,
    color-mix(in srgb, var(--asnv-accent) 18%, transparent),
    color-mix(in srgb, var(--nz-accent-2) 10%, transparent));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--asnv-accent) 26%, transparent);
}
.asnv-topbar-desc { margin: 0.35rem 0 0; font-size: 0.8rem; color: var(--muted-foreground); max-width: 46rem; }
.asnv-topbar-desc strong { color: var(--foreground); font-weight: 600; }
.asnv-topbar-right {
  flex-shrink: 0; padding-top: 0.3rem;
  font-size: 0.78rem; color: var(--muted-foreground); font-variant-numeric: tabular-nums;
}

.asnv-hero {
  display: flex; align-items: flex-end; justify-content: space-between;
  flex-wrap: wrap; gap: 1rem 1.5rem;
  padding: 1.15rem 1.25rem;
}
.asnv-hero-id { min-width: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.asnv-hero-asn {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--asnv-accent-text);
}
.asnv-hero-name {
  margin: 0; font-size: 1.35rem; font-weight: 700; letter-spacing: -0.02em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.asnv-hero-figure { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; }
.asnv-hero-num {
  font-size: clamp(2.1rem, 1.5rem + 2vw, 3rem);
  font-weight: 700; line-height: 1; letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  /* background-image, NOT the `background` shorthand - the shorthand resets
     background-clip and renders the figure as a solid bar. Same trap
     documented on .stat .num in Signature v4. */
  .asnv-hero-num {
    background-image: linear-gradient(135deg, var(--asnv-accent), var(--nz-accent-2));
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}
.asnv-hero-unit { font-size: 0.85rem; color: var(--muted-foreground); }

/* --------------------------------------------------------------------------
   Metric tiles
   -------------------------------------------------------------------------- */
.asnv-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 0.85rem;
}
.asnv-tile {
  padding: 0.85rem 0.95rem;
  display: flex; flex-direction: column; gap: 0.3rem;
  border-radius: calc(var(--radius) - 4px);
  transition: transform var(--dur-2) var(--ease-out);
}
.asnv-tile:hover { transform: translateY(-2px); }
.asnv-tile-label {
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--muted-foreground);
  display: inline-flex; align-items: center; gap: 0.35rem;
}
.asnv-tile-label svg { color: var(--asnv-accent-text); }
.asnv-tile-num {
  font-size: 1.5rem; font-weight: 700; line-height: 1.1;
  letter-spacing: -0.025em; font-variant-numeric: tabular-nums;
}
.asnv-tile-sub { font-size: 0.72rem; color: var(--muted-foreground); line-height: 1.45; }
.asnv-tile-sub strong { color: var(--foreground); font-weight: 600; }

/* Direction badge. Colour is NEVER the only cue - the arrow glyph carries the
   same information for a colour-blind reader. */
.asnv-delta {
  display: inline-flex; align-items: center; gap: 0.18rem;
  font-size: 0.72rem; font-weight: 600; padding: 0.14rem 0.5rem; border-radius: 999px;
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
.asnv-delta.up   { background: rgb(34 197 94 / 0.15); color: #22c55e; }
.asnv-delta.down { background: rgb(223 34 37 / 0.15); color: var(--destructive); }
.asnv-delta.flat { background: var(--accent); color: var(--muted-foreground); }

/* Inline micro share-bar inside the "Pazar payi" tile. */
.asnv-microbar {
  height: 4px; border-radius: 999px; background: var(--muted); overflow: hidden;
  margin-top: 0.15rem;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border) 80%, transparent);
}
.asnv-microbar > span {
  display: block; height: 100%; width: 100%;
  transform: scaleX(var(--asnv-bar, 0)); transform-origin: left center;
  background: linear-gradient(90deg, var(--asnv-accent), color-mix(in srgb, var(--nz-accent-2) 60%, var(--asnv-accent)));
  animation: bar-fill 0.6s var(--ease-out) 0.1s backwards;
  transition: transform var(--dur-3) var(--ease-out);
}

/* --------------------------------------------------------------------------
   Rail: search, chips, list
   -------------------------------------------------------------------------- */
.asnv-rail-top {
  flex-shrink: 0; padding: 0.9rem 0.9rem 0.75rem;
  border-bottom: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 0.6rem;
}
.asnv-search-row { position: relative; display: flex; align-items: center; }
.asnv-search-row > svg { position: absolute; left: 0.72rem; color: var(--muted-foreground); pointer-events: none; }
.asnv-search-input {
  width: 100%; padding: 0.45rem 0.7rem 0.45rem 2.1rem;
  background: var(--background); color: var(--foreground);
  border: 1px solid var(--border); border-radius: 999px; font-size: 0.82rem;
}
.asnv-search-input::placeholder { color: var(--muted-foreground); }
.asnv-search-input:focus-visible, .asnv-search-input:focus {
  outline: none; border-color: color-mix(in srgb, var(--chart-1) 55%, var(--border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--chart-1) 14%, transparent);
}
.asnv-meta-row {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 0.72rem; color: var(--muted-foreground); font-variant-numeric: tabular-nums;
}
.asnv-chip-row { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.asnv-chip {
  padding: 0.24rem 0.55rem; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border); background: transparent;
  background-image: linear-gradient(180deg, var(--nz-hairline), transparent);
  color: var(--muted-foreground); font-size: 0.7rem; font-weight: 600;
  font-family: inherit;
  transition: background-color var(--dur-1) ease, border-color var(--dur-1) ease,
              color var(--dur-1) ease, transform var(--dur-1) var(--ease-out);
}
.asnv-chip:hover  { border-color: color-mix(in srgb, var(--chart-1) 45%, var(--border)); color: var(--foreground); }
.asnv-chip:active { transform: scale(0.96); }
.asnv-chip[aria-pressed="true"] {
  background-image: linear-gradient(135deg, var(--chart-1), var(--nz-btn-2));
  border-color: transparent; color: #fff;
  box-shadow: inset 0 1px 0 0 rgb(255 255 255 / 0.2), 0 6px 16px -8px var(--nz-glow);
}

.asnv-list {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 0.45rem; display: flex; flex-direction: column; gap: 0.15rem;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--muted-foreground) 45%, transparent) transparent;
  transition: opacity var(--dur-1) ease;
}
.asnv-list::-webkit-scrollbar { width: 8px; }
.asnv-list::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--muted-foreground) 38%, transparent); border-radius: 999px;
}
.asnv-list::-webkit-scrollbar-track { background: transparent; }
/* Re-sort feedback. Deliberately a fade, NOT a FLIP: 74 rows x (read + write)
   per sort would fight Chart.js for the main thread on this box. */
.asnv-list.is-resorting { opacity: 0.35; }
/* .asnv-row sets display:grid, which beats the UA [hidden] rule - the search
   filter set `hidden` on 69/70 rows and all 70 stayed visible. */
.asnv-list [hidden] { display: none !important; }

/* --------------------------------------------------------------------------
   Leaderboard row
   -------------------------------------------------------------------------- */
.asnv-row {
  position: relative;
  display: grid;
  grid-template-columns: 1.85rem minmax(0, 1fr) auto;
  grid-template-areas:
    "rank name  count"
    "rank bar   meta";
  align-items: center;
  column-gap: 0.55rem; row-gap: 0.25rem;
  width: 100%; padding: 0.45rem 0.6rem 0.5rem;
  text-align: left; cursor: pointer;
  border: 1px solid transparent; border-radius: calc(var(--radius) - 5px);
  background: transparent; color: var(--foreground);
  font-family: inherit;
  animation: rise-in-sm 0.3s var(--ease-out) backwards;
  transition: background-color var(--dur-1) ease, border-color var(--dur-1) ease;
}
.asnv-row:nth-child(2)  { animation-delay: 0.02s; }
.asnv-row:nth-child(3)  { animation-delay: 0.04s; }
.asnv-row:nth-child(4)  { animation-delay: 0.06s; }
.asnv-row:nth-child(5)  { animation-delay: 0.08s; }
.asnv-row:nth-child(6)  { animation-delay: 0.10s; }
.asnv-row:nth-child(7)  { animation-delay: 0.12s; }
.asnv-row:nth-child(8)  { animation-delay: 0.14s; }
.asnv-row:nth-child(9)  { animation-delay: 0.16s; }
/* Capped at 10 - a 74-row ladder would leave the bottom of the list waiting. */
.asnv-row:nth-child(n+10) { animation-delay: 0.18s; }
.asnv-row:hover { background: var(--accent); }
/* The list scrolls, so an outside ring gets clipped at the container edge. */
.asnv-row:focus-visible { outline: 2px solid var(--chart-1); outline-offset: -2px; }

.asnv-row[aria-selected="true"] {
  background: color-mix(in srgb, var(--asnv-accent) 12%, transparent);
  border-color: color-mix(in srgb, var(--asnv-accent) 45%, var(--border));
}
.asnv-row[aria-selected="true"]::before {
  content: ""; position: absolute; left: 0; top: 0.35rem; bottom: 0.35rem; width: 3px;
  border-radius: 999px; background: var(--asnv-accent);
  transform: scaleY(0); transform-origin: center;
  animation: asnv-stripe var(--dur-2) var(--ease-out) forwards;
}
@keyframes asnv-stripe { to { transform: scaleY(1); } }

.asnv-row-rank {
  grid-area: rank; align-self: center; justify-self: center;
  font-size: 0.72rem; font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--muted-foreground); min-width: 1.6rem; text-align: center;
  padding: 0.12rem 0; border-radius: 6px;
}
/* Top three get weight, not a medal - this is telemetry, not a game. */
.asnv-row-rank.is-top {
  color: var(--asnv-accent-text);
  background: color-mix(in srgb, var(--asnv-accent) 14%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--asnv-accent) 26%, transparent);
}

.asnv-row-name {
  grid-area: name; min-width: 0;
  font-size: 0.8rem; line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.asnv-row[aria-selected="true"] .asnv-row-name { font-weight: 600; }
.asnv-row-name .asnv-row-asn { color: var(--muted-foreground); font-variant-numeric: tabular-nums; }

.asnv-row-count {
  grid-area: count; justify-self: end;
  font-size: 0.8rem; font-weight: 600; font-variant-numeric: tabular-nums;
}

.asnv-row-bar {
  grid-area: bar; height: 4px; border-radius: 999px;
  background: var(--muted); overflow: hidden;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border) 80%, transparent);
}
.asnv-row-bar > span {
  display: block; height: 100%; width: 100%;
  /* --asnv-bar is the share RELATIVE TO THE LEADER (see buildField). Scaled to
     100% instead, every row past #3 would be an invisible stub. The printed
     percentage next to it is the true market share, so nothing is distorted. */
  transform: scaleX(var(--asnv-bar, 0)); transform-origin: left center;
  background: linear-gradient(90deg,
    var(--asnv-accent),
    color-mix(in srgb, var(--nz-accent-2) 55%, var(--asnv-accent)));
  animation: bar-fill 0.55s var(--ease-out) 0.08s backwards;
  transition: transform var(--dur-3) var(--ease-out);
}
.asnv-row-meta {
  grid-area: meta; justify-self: end;
  font-size: 0.66rem; color: var(--muted-foreground); font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Nerzen's own ASN. It is PINNED to the top but its rank slot shows its real
   position, and the separator below says so - the old list silently implied
   Nerzen was #1. The badge text, not the colour, is the marker. */
.asnv-row.is-self { border-color: color-mix(in srgb, var(--chart-1) 40%, var(--border)); }
.asnv-row.is-self .asnv-row-rank { color: var(--nz-accent-text); }
.asnv-self-badge {
  display: inline-flex; align-items: center; vertical-align: middle;
  margin-left: 0.3rem; padding: 0.04rem 0.38rem; border-radius: 999px;
  font-size: 0.6rem; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase;
  background: color-mix(in srgb, var(--chart-1) 20%, transparent); color: var(--nz-accent-text);
}
.asnv-pin-sep {
  display: flex; align-items: center; gap: 0.5rem;
  margin: 0.3rem 0.2rem 0.35rem;
  font-size: 0.62rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted-foreground);
}
.asnv-pin-sep::before, .asnv-pin-sep::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, var(--border), transparent);
}

/* --------------------------------------------------------------------------
   "Alandaki Yeri" - rank ladder. Deliberately NOT a chart: this box already
   paints two Chart.js canvases on /asn and the information is five rows.
   -------------------------------------------------------------------------- */
.asnv-field { padding: 1rem 1.15rem 1.1rem; }
.asnv-field-head {
  display: flex; align-items: center; gap: 0.6rem;
  padding-bottom: 0.7rem; margin-bottom: 0.65rem;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
}
.asnv-field-head h3 { margin: 0; font-size: 0.95rem; letter-spacing: -0.012em; }
.asnv-field-head .sub { font-size: 0.75rem; color: var(--muted-foreground); margin-top: 0.1rem; }

.asnv-ladder { display: flex; flex-direction: column; gap: 0.1rem; }
.asnv-ladder-row {
  display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto auto;
  align-items: center; gap: 0.6rem;
  padding: 0.4rem 0.5rem; border-radius: calc(var(--radius) - 6px);
  font-size: 0.8rem; color: var(--muted-foreground);
  transition: background-color var(--dur-1) ease;
}
.asnv-ladder-row:hover { background: color-mix(in srgb, var(--accent) 75%, transparent); }
.asnv-ladder-row .r { font-variant-numeric: tabular-nums; font-weight: 700; text-align: center; }
.asnv-ladder-row .n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.asnv-ladder-row .p { font-variant-numeric: tabular-nums; font-weight: 600; justify-self: end; }
.asnv-ladder-row .g { font-variant-numeric: tabular-nums; font-size: 0.72rem; justify-self: end; min-width: 4.5rem; text-align: right; }
.asnv-ladder-row.is-current {
  color: var(--foreground);
  background: color-mix(in srgb, var(--asnv-accent) 12%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--asnv-accent) 32%, transparent);
}
.asnv-ladder-row.is-current .r { color: var(--asnv-accent-text); }
.asnv-field-foot {
  margin-top: 0.75rem; padding-top: 0.7rem;
  border-top: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
  font-size: 0.75rem; color: var(--muted-foreground); line-height: 1.55;
}
.asnv-field-foot strong { color: var(--foreground); font-weight: 600; }

/* --------------------------------------------------------------------------
   Chart heights + server grid. The chart panels reuse .chart-card, so they
   inherit the Signature v4 stripe, ring and elevation for free.
   -------------------------------------------------------------------------- */
.asnv-canvas-wrap { position: relative; height: var(--asnv-chart-h); }
.asnv-canvas-wrap-sm { position: relative; height: calc(var(--asnv-chart-h) * 0.52); }
/* `.chart-card canvas` has a global max-height: 320px further up this file;
   these panels are explicitly taller, so it is lifted for them only. */
.asnv-canvas-wrap canvas,
.asnv-canvas-wrap-sm canvas { max-height: none; }

.asnv-server-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.85rem; margin-top: 1rem;
}
.asnv-server-card {
  position: relative; display: flex; flex-direction: column; gap: 0.45rem;
  padding: 0.8rem 0.9rem; border-radius: calc(var(--radius) - 4px);
  color: inherit; min-width: 0; text-decoration: none;
  transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) ease, opacity var(--dur-2) ease;
}
.asnv-server-card:hover {
  transform: translateY(-3px);
  box-shadow:
    inset 0 1px 0 0 var(--nz-hairline),
    0 0 0 1px color-mix(in srgb, var(--asnv-accent) 45%, var(--border)),
    var(--nz-elev-2);
}
.asnv-server-top { display: flex; align-items: baseline; gap: 0.45rem; min-width: 0; }
.asnv-server-rank {
  flex-shrink: 0; font-size: 0.66rem; font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--muted-foreground);
}
.asnv-server-name {
  flex: 1; min-width: 0; font-size: 0.82rem; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: color var(--dur-1) ease;
}
.asnv-server-card:hover .asnv-server-name { color: var(--asnv-accent-text); }
.asnv-server-nums {
  display: flex; align-items: baseline; gap: 0.35rem; flex-wrap: wrap;
  font-size: 0.75rem; color: var(--muted-foreground); font-variant-numeric: tabular-nums;
}
.asnv-server-nums b { font-size: 0.95rem; font-weight: 700; color: var(--foreground); }
.asnv-server-bar { height: 5px; border-radius: 999px; background: var(--muted); overflow: hidden; }
.asnv-server-bar > span {
  display: block; height: 100%; width: 100%;
  transform: scaleX(var(--asnv-bar, 0)); transform-origin: left center;
  background: linear-gradient(90deg, var(--asnv-accent), color-mix(in srgb, var(--nz-accent-2) 60%, var(--asnv-accent)));
  animation: bar-fill 0.6s var(--ease-out) 0.1s backwards;
  transition: transform var(--dur-3) var(--ease-out), filter var(--dur-2) ease;
}
.asnv-server-card:hover .asnv-server-bar > span { filter: brightness(1.12) saturate(1.15); }
.asnv-server-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 0.4rem;
  font-size: 0.68rem; color: var(--muted-foreground); font-variant-numeric: tabular-nums;
}
.asnv-game-chip {
  padding: 0.08rem 0.4rem; border-radius: 999px; font-size: 0.62rem; font-weight: 600;
  background: var(--accent); color: var(--muted-foreground);
  background-image: linear-gradient(180deg, var(--nz-hairline), transparent);
}
/* An empty server is not a failure state, just noise - it recedes instead of
   being styled identically to a full one, which is what v1 did. */
.asnv-server-card.is-empty { opacity: 0.5; }
.asnv-server-card.is-empty:hover { opacity: 1; }

/* Value that just changed on an ASN/range switch. */
@keyframes asnv-flip { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.asnv-flip { animation: asnv-flip var(--dur-2) var(--ease-out); }

/* Loading feedback - retarget of the pattern /asn already had; the shimmer is
   still the only looping animation in this file. */
.asnv-shell.chart-loading .asnv-main { opacity: 0.55; cursor: wait; transition: opacity 0.15s ease; }
.asnv-shell.chart-loading .asnv-row { pointer-events: none; }

.asnv-empty { color: var(--muted-foreground); font-size: 0.85rem; padding: 0.6rem; }

/* --------------------------------------------------------------------------
   Breakpoints
   -------------------------------------------------------------------------- */
@media (min-width: 1440px) {
  :root { --asnv-rail: 340px; --asnv-chart-h: 460px; }
  .asnv-main { padding-inline: 2rem; gap: 1.5rem; }
  .asnv-topbar { margin-inline: -2rem; padding-inline: 2rem; }
}

/* Ultrawide. Past 2560px the extra width becomes gutter, not content: a
   2200px-wide, 460px-tall line chart flattens every trend into a straight
   line, and a single-row server grid 14 cards across is unreadable. */
@media (min-width: 2200px) {
  :root { --asnv-rail: 380px; --asnv-chart-h: 520px; }
  .asnv-shell { max-width: 2560px; margin-inline: auto; }
  .asnv-main { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; padding-inline: 2.5rem; }
  .asnv-topbar { margin-inline: -2.5rem; padding-inline: 2.5rem; }
  .asnv-topbar, .asnv-hero, .asnv-tiles, .asnv-primary, .asnv-servers { grid-column: 1 / -1; }
  /* Drops chart and the rank ladder sit side by side instead of stacked. */
  .asnv-server-grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); max-width: 2000px; }
}

@media (max-width: 900px) {
  .asnv-shell { grid-template-columns: minmax(0, 1fr); }
  .asnv-rail {
    position: static; height: auto; z-index: auto;
    border-right: none; border-bottom: 1px solid var(--border);
  }
  .asnv-list { max-height: 340px; }
  .asnv-main { padding-inline: 1.25rem; padding-top: 1rem; }
  .asnv-topbar { margin-inline: -1.25rem; padding-inline: 1.25rem; }
  :root { --asnv-chart-h: 300px; }
  .asnv-tiles { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .asnv-server-grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
}

@media (max-width: 560px) {
  :root { --asnv-chart-h: 240px; }
  .asnv-main { padding-inline: 1rem; }
  .asnv-topbar { flex-direction: column; gap: 0.4rem; margin-inline: -1rem; padding-inline: 1rem; }
  .asnv-topbar-desc { display: none; }
  .asnv-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* An odd trailing tile spans instead of sitting alone with a hole beside it -
     same treatment .stats-row .stat already gets in the mobile block above. */
  .asnv-tile:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .asnv-hero { padding: 1rem; }
  .asnv-hero-num { font-size: 2.1rem; }
  .asnv-list { max-height: 300px; }
  .asnv-server-grid { grid-template-columns: minmax(0, 1fr); }
  .asnv-ladder-row { grid-template-columns: 1.75rem minmax(0, 1fr) auto; }
  .asnv-ladder-row .g { display: none; }   /* gap column drops; rank + count stay */
}

/* --------------------------------------------------------------------------
   Reduced motion. The global guard at the top of this file already zeroes
   durations and delays and this block adds no infinite animation, so only the
   keyframed bars/stripe need pinning - and they pin to their END state, which
   is the inline --asnv-bar scale, NOT `transform: none` (that would zero every
   bar to nothing).
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .asnv-row,
  .asnv-row[aria-selected="true"]::before,
  .asnv-row-bar > span,
  .asnv-microbar > span,
  .asnv-server-bar > span,
  .asnv-flip { animation: none !important; }
  .asnv-row { opacity: 1 !important; }
  .asnv-row[aria-selected="true"]::before { transform: scaleY(1) !important; }
}

/* --------------------------------------------------------------------------
   ASN v2.1 - chart toolbar (compare / CSV / copy link). Sits at the right of
   the main chart card header and wraps below the title on narrow screens.
   -------------------------------------------------------------------------- */
.asnv-primary .chart-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem 1rem; flex-wrap: wrap; }
.asnv-tools { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.asnv-compare {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.72rem; font-weight: 600; color: var(--muted-foreground);
}
.asnv-compare select {
  max-width: 13rem; padding: 0.3rem 0.55rem; border-radius: 999px;
  border: 1px solid var(--border); background: var(--background); color: var(--foreground);
  font: inherit; font-weight: 500; cursor: pointer;
  transition: border-color var(--dur-1) ease, box-shadow var(--dur-1) ease;
}
.asnv-compare select:focus-visible {
  outline: none; border-color: color-mix(in srgb, #22c55e 60%, var(--border));
  box-shadow: 0 0 0 3px color-mix(in srgb, #22c55e 16%, transparent);
}
.asnv-tool-btn {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.3rem 0.65rem; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border); background: transparent;
  background-image: linear-gradient(180deg, var(--nz-hairline), transparent);
  color: var(--muted-foreground); font: inherit; font-size: 0.72rem; font-weight: 600;
  transition: color var(--dur-1) ease, border-color var(--dur-1) ease, transform var(--dur-1) var(--ease-out);
}
.asnv-tool-btn:hover { color: var(--foreground); border-color: color-mix(in srgb, var(--asnv-accent) 50%, var(--border)); }
.asnv-tool-btn:active { transform: scale(0.96); }
.asnv-tool-btn.is-done { color: #22c55e; border-color: color-mix(in srgb, #22c55e 55%, var(--border)); }
@media (max-width: 560px) {
  .asnv-compare select { max-width: 9.5rem; }
  .asnv-tool-btn span { display: none; }   /* icon-only on phones; title attr keeps the meaning */
}

/* ==========================================================================
   Home v2 (/) - live-pulse hero, TR pulse strip, leaderboard, discover.
   --------------------------------------------------------------------------
   Scoped to "hm-" classes, appended as its own block like ASN v2. Rules:
     - Only transform / opacity animate (colour/filter on hover states).
     - Entrances use `backwards` fill. Scroll reveals sit on WRAPPERS
       (li / .hm-reveal) so no element's own hover transform is frozen by a
       `both` fill.
     - Exactly ONE infinite animation: .hm-dot::after (the live dot). It
       stops when data is stale and is killed outright under reduced motion.
     - Bars = static inline width + the shared bar-fill scaleX sweep (the
       .progress-bar pattern). Never scaleX(var()) + bar-fill: bar-fill ends
       at scaleX(1), so that combination overshoots to 100% and snaps back.
   ========================================================================== */

:root {
  --hm-max: 1240px;
  --hm-gap: 1.25rem;
  --hm-chart-h: 190px;
  --hm-up: #166534;               /* clears 4.5:1 even on its own 14% chip tint */
  --hm-down: #b91c1c;             /* 4.5:1+ on its own 13% chip tint in light */
  --hm-live: #16a34a;
  --hm-mc: #15803d;               /* Minecraft accent TEXT */
  --hm-mc-line: #22c55e;          /* Minecraft strokes/fills only */
  --hm-rdr: var(--nz-accent-2);
}
:root.dark {
  --hm-up: #4ade80;
  --hm-down: var(--destructive);
  --hm-live: #22c55e;
  --hm-mc: #4ade80;
}

/* --------------------------------------------------------------------------
   ASN v2 fixes found in review.
   1. The share bars combined transform: scaleX(var(--asnv-bar)) with the
      shared bar-fill keyframe, which ENDS at scaleX(1) - so every bar swept
      to full width and then snapped back to its real length. A keyframe
      with only a `from` animates to the element's own transform instead.
   2. .asnv-delta.up used #22c55e in both themes, about 2.3:1 on white.
   -------------------------------------------------------------------------- */
@keyframes asnv-grow { from { transform: scaleX(0); } }
.asnv-row-bar > span,
.asnv-microbar > span,
.asnv-server-bar > span { animation-name: asnv-grow; }
.asnv-delta.up { color: var(--hm-up); background: color-mix(in srgb, var(--hm-up) 14%, transparent); }

/* --------------------------------------------------------------------------
   Shared
   -------------------------------------------------------------------------- */
.container.hm-wrap { max-width: var(--hm-max); }
.hm-sr {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.hm-card {
  position: relative; min-width: 0;
  border-radius: var(--radius);
  background-color: var(--card);
  background-image: var(--nz-card-wash);
  box-shadow: inset 0 1px 0 0 var(--nz-hairline), 0 0 0 1px var(--border), var(--nz-elev-1);
}
.hm-band { margin-top: 3.5rem; }
.hm-pulse { margin-top: 0.75rem; }

.hm-sec-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  flex-wrap: wrap; gap: 0.75rem 1.5rem; margin-bottom: 1.1rem;
}
.hm-sec-head h2 {
  margin: 0.55rem 0 0; font-size: clamp(1.3rem, 1.05rem + 0.8vw, 1.7rem);
  line-height: 1.2; letter-spacing: -0.022em; text-wrap: balance;
}
.hm-sec-head p { margin: 0.35rem 0 0; font-size: 0.85rem; color: var(--muted-foreground); max-width: 40rem; text-wrap: pretty; }
.hm-kicker {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.26rem 0.7rem 0.26rem 0.6rem; border-radius: 999px;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--nz-accent-text);
  background: color-mix(in srgb, var(--chart-1) 9%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--chart-1) 20%, transparent);
}
.hm-kicker::before {
  content: ""; width: 5px; height: 5px; border-radius: 999px; flex-shrink: 0;
  background: currentColor; box-shadow: 0 0 0 3px color-mix(in srgb, var(--chart-1) 18%, transparent);
}
.hm-more {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-size: 0.82rem; font-weight: 600; color: var(--nz-accent-text);
  border-radius: 6px; transition: color var(--dur-1) ease;
}
.hm-more > span { display: inline-block; transition: transform var(--dur-2) var(--ease-out); }
.hm-more:hover > span { transform: translateX(3px); }
.hm-eyebrow {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--muted-foreground);
}
.hm-eyebrow svg { color: var(--nz-accent-text); }
.hm-empty { margin: 0.75rem 0 0; font-size: 0.8rem; color: var(--muted-foreground); }

/* Direction chip - the glyph carries direction too, never colour alone. */
.hm-delta {
  display: inline-flex; align-items: center; gap: 0.2rem;
  padding: 0.16rem 0.55rem; border-radius: 999px;
  font-size: 0.72rem; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.hm-delta.up   { color: var(--hm-up);   background: color-mix(in srgb, var(--hm-up) 14%, transparent); }
.hm-delta.down { color: var(--hm-down); background: color-mix(in srgb, var(--hm-down) 13%, transparent); }
.hm-delta.flat { color: var(--muted-foreground); background: var(--accent); }

/* Bars: static width carries the value, bar-fill only sweeps it in. */
.hm-microbar, .hm-bar, .hm-fill { height: 4px; border-radius: 999px; background: var(--muted); overflow: hidden; }
.hm-microbar > span, .hm-bar > span, .hm-fill > span {
  display: block; height: 100%; border-radius: inherit;
  background: linear-gradient(90deg, var(--chart-1), color-mix(in srgb, var(--nz-accent-2) 70%, var(--chart-1)));
  transform-origin: left center;
  animation: bar-fill 0.65s var(--ease-out) 0.3s backwards;
}

/* --------------------------------------------------------------------------
   Hero. Keeps `.hero` for the Signature v4 atmosphere, re-laid-out as a split.
   -------------------------------------------------------------------------- */
.hero.hm-hero { text-align: left; padding: 3.75rem 0 3.25rem; }
.hm-hero-grid {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 3rem; align-items: center;
}
.hm-hero h1 { font-size: clamp(2rem, 1.25rem + 2.7vw, 3.4rem); line-height: 1.06; margin: 0 0 1.1rem; }
.hm-hero p.lead { margin: 0 0 1.6rem; max-width: 34rem; font-size: 1.05rem; }
.hm-hero p.lead strong { color: var(--foreground); font-weight: 600; font-variant-numeric: tabular-nums; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  /* background-image, not the shorthand (the Signature v4 clip trap). */
  .hm-h1-accent {
    background-image: linear-gradient(120deg, var(--chart-3), var(--nz-accent-2) 55%, var(--nz-accent-3));
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  }
}

.hm-live-badge { gap: 0.45rem; font-variant-numeric: tabular-nums; }
.hm-badge-sep { opacity: 0.5; }
.hm-dot {
  position: relative; flex-shrink: 0; width: 8px; height: 8px; border-radius: 999px;
  background: var(--hm-live);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--hm-live) 22%, transparent);
}
/* The page's ONE loop: compositor-only, 8px, and it means something. */
.hm-dot::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: var(--hm-live);
  animation: pulse-ring 2.4s var(--ease-out) infinite;
}
.hm-live-badge.is-stale .hm-dot {
  background: var(--muted-foreground);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--muted-foreground) 20%, transparent);
}
.hm-live-badge.is-stale .hm-dot::after { animation: none; opacity: 0; }

.hm-search {
  display: flex; align-items: center; gap: 0.55rem;
  max-width: 32rem; padding: 0.3rem 0.3rem 0.3rem 1rem; border-radius: 999px;
  background-color: color-mix(in srgb, var(--card) 86%, transparent);
  background-image: var(--nz-card-wash);
  box-shadow: inset 0 1px 0 0 var(--nz-hairline), 0 0 0 1px var(--border), var(--nz-elev-1);
  animation: rise-in 0.55s var(--ease-out) 0.18s backwards;
}
.hm-search > svg { color: var(--muted-foreground); flex-shrink: 0; }
.hm-search input {
  flex: 1; min-width: 0; height: 2.5rem; border: 0; background: transparent;
  color: var(--foreground); font: inherit; font-size: 0.95rem;
}
.hm-search input::placeholder { color: var(--muted-foreground); }
.hm-search input:focus, .hm-search input:focus-visible { outline: none; }
/* The visible focus indicator for the input lives on the container. */
.hm-search:focus-within {
  box-shadow:
    inset 0 1px 0 0 var(--nz-hairline),
    0 0 0 1px color-mix(in srgb, var(--chart-1) 60%, var(--border)),
    0 0 0 4px color-mix(in srgb, var(--chart-1) 18%, transparent),
    var(--nz-elev-2);
}
.hm-search .btn { border-radius: 999px; height: 2.4rem; padding: 0 1.15rem; flex-shrink: 0; }

.hm-actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin-top: 1rem;
  animation: rise-in 0.55s var(--ease-out) 0.24s backwards;
}
.hm-kbd-hint {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.45rem 0.6rem; border: 0; border-radius: 0.6rem; cursor: pointer;
  background: transparent; color: var(--muted-foreground); font: inherit; font-size: 0.8rem;
  transition: color var(--dur-1) ease, background-color var(--dur-1) ease;
}
.hm-kbd-hint:hover { color: var(--foreground); background: var(--accent); }
@media (hover: none) { .hm-kbd-hint { display: none; } }

/* Live card. No backdrop-filter: it holds a canvas (Signature v4 rule). */
.hm-live {
  padding: 1.25rem 1.25rem 1rem;
  background-color: color-mix(in srgb, var(--card) 90%, transparent);
  box-shadow:
    inset 0 1px 0 0 var(--nz-hairline),
    0 0 0 1px color-mix(in srgb, var(--chart-1) 24%, var(--border)),
    var(--nz-elev-3),
    0 30px 60px -36px var(--nz-glow);
  animation: stat-rise 0.6s var(--ease-out) 0.1s backwards;
}
.hm-live::before {
  content: ""; position: absolute; top: 0; left: 1.25rem; right: 1.25rem; height: 2px;
  border-radius: 0 0 2px 2px; pointer-events: none; opacity: 0.9;
  background: linear-gradient(90deg, var(--chart-1), var(--nz-accent-2) 50%, var(--nz-accent-3));
}
.hm-live-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem 0.75rem; }
.hm-live-figure { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.3rem 0.7rem; margin-top: 0.55rem; }
.hm-live-num {
  display: inline-block;
  font-size: clamp(2.6rem, 1.9rem + 2.3vw, 3.75rem); font-weight: 750; line-height: 1;
  letter-spacing: -0.04em; font-variant-numeric: tabular-nums;
  color: var(--nz-accent-text);
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .hm-live-num {
    background-image: linear-gradient(135deg, var(--chart-1), var(--nz-accent-2));
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  }
  :root.dark .hm-live-num { background-image: linear-gradient(135deg, var(--chart-3), var(--nz-accent-2)); }
}
.hm-live-unit { font-size: 0.88rem; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.hm-live-unit b { color: var(--foreground); font-weight: 600; }

.hm-split { margin-top: 0.9rem; }
.hm-split-bar { display: flex; gap: 2px; height: 6px; border-radius: 999px; overflow: hidden; background: var(--muted); }
.hm-split-bar > span {
  display: block; height: 100%; transform-origin: left center;
  animation: bar-fill 0.7s var(--ease-out) 0.35s backwards;
}
.hm-split-bar > .is-gta { background: linear-gradient(90deg, var(--chart-1), var(--chart-3)); }
.hm-split-bar > .is-rdr { background: var(--hm-rdr); animation-delay: 0.5s; }
.hm-split-legend {
  display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; margin-top: 0.45rem;
  font-size: 0.75rem; color: var(--muted-foreground); font-variant-numeric: tabular-nums;
}
.hm-split-legend b { color: var(--foreground); font-weight: 600; }
.hm-split-legend i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 0.35rem; }
.hm-split-legend i.is-gta { background: var(--chart-3); }
.hm-split-legend i.is-rdr { background: var(--hm-rdr); }

.hm-chart-head {
  display: flex; justify-content: space-between; gap: 0.5rem;
  margin-top: 1.1rem; padding-top: 0.85rem;
  border-top: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
  font-size: 0.72rem; color: var(--muted-foreground);
}
.hm-chart { position: relative; height: var(--hm-chart-h); margin: 0.4rem -0.25rem 0; }
.hm-chart canvas { max-height: none; animation: fade-in 0.45s ease-out 0.3s backwards; }

.hm-live-foot {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem;
  margin: 0.75rem 0 0; padding-top: 0.75rem;
  border-top: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
}
.hm-live-foot dt { font-size: 0.66rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted-foreground); }
.hm-live-foot dd { margin: 0.15rem 0 0; font-size: 0.75rem; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.hm-live-foot dd b { font-size: 0.95rem; font-weight: 650; color: var(--foreground); }

/* --------------------------------------------------------------------------
   Pulse tiles
   -------------------------------------------------------------------------- */
.hm-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.9rem; }
.hm-tile {
  display: flex; flex-direction: column; gap: 0.35rem;
  padding: 1rem 1.05rem 1.05rem; border-radius: calc(var(--radius) - 4px);
  animation: rise-in-sm 0.45s var(--ease-out) 0.2s backwards;
  transition: transform var(--dur-2) var(--ease-out);
}
.hm-tile:nth-child(2) { animation-delay: 0.26s; }
.hm-tile:nth-child(3) { animation-delay: 0.32s; }
.hm-tile:nth-child(4) { animation-delay: 0.38s; }
.hm-tile:hover { transform: translateY(-2px); }
.hm-tile-label {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--muted-foreground);
}
.hm-tile-label svg { color: var(--nz-accent-text); }
.hm-tile-num { font-size: 1.65rem; font-weight: 700; line-height: 1.1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.hm-tile-sub { font-size: 0.74rem; color: var(--muted-foreground); line-height: 1.45; }
.hm-tile-sub strong { color: var(--foreground); font-weight: 600; }
.hm-tile .hm-microbar { margin-top: 0.15rem; }

/* --------------------------------------------------------------------------
   Leaderboard + regions
   -------------------------------------------------------------------------- */
.hm-board-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: var(--hm-gap); align-items: start; }
.hm-board, .hm-regions { padding: 0.5rem; }

.hm-lb-head, .hm-row {
  display: grid;
  grid-template-columns: 2rem 2.5rem minmax(0, 1fr) 7.5rem 7rem 5rem;
  grid-template-areas: "rank icon main spark players delta";
  align-items: center; column-gap: 0.8rem;
}
.hm-lb-head {
  padding: 0.55rem 0.75rem 0.5rem; margin-bottom: 0.3rem;
  font-size: 0.66rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--muted-foreground);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
}
.hm-lb-head > :nth-child(5), .hm-lb-head > :nth-child(6) { text-align: right; }
.hm-lb, .hm-reg-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.1rem; }

.hm-row {
  min-height: 3.6rem; padding: 0.5rem 0.75rem;
  border-radius: calc(var(--radius) - 5px); color: inherit; text-decoration: none;
  transition: background-color var(--dur-1) ease;
}
.hm-row:hover { background: color-mix(in srgb, var(--accent) 80%, transparent); }
.hm-row:focus-visible, .hm-reg:focus-visible { outline: 2px solid var(--chart-1); outline-offset: -2px; }

.hm-rank {
  grid-area: rank; justify-self: center; min-width: 1.75rem; padding: 0.18rem 0; border-radius: 7px;
  text-align: center; font-size: 0.74rem; font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--muted-foreground);
}
/* Weight, not medals - telemetry, same call /asn made. */
.hm-rank.is-top {
  color: var(--nz-accent-text);
  background: color-mix(in srgb, var(--chart-1) 13%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--chart-1) 26%, transparent);
}
.hm-rank.is-first {
  color: #fff;
  background-image: linear-gradient(135deg, var(--chart-1), var(--nz-btn-2));
  box-shadow: inset 0 1px 0 0 rgb(255 255 255 / 0.2), 0 6px 14px -8px var(--nz-glow);
}

.hm-row-icon { grid-area: icon; width: 2.5rem; height: 2.5rem; }
.hm-row-icon img, .hm-icon-fb {
  display: block; width: 100%; height: 100%; border-radius: 10px; object-fit: cover;
  background: var(--muted); box-shadow: 0 0 0 1px var(--border);
  transition: transform var(--dur-3) var(--ease-out);
}
.hm-icon-fb {
  display: flex; align-items: center; justify-content: center; font-size: 1.05rem;
  background: linear-gradient(135deg, color-mix(in srgb, var(--chart-1) 25%, var(--muted)), var(--muted));
}
.hm-row:hover .hm-row-icon img, .hm-row:hover .hm-icon-fb { transform: scale(1.06); }

.hm-row-main { grid-area: main; min-width: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.hm-row-name {
  font-size: 0.9rem; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: color var(--dur-1) ease;
}
.hm-row:hover .hm-row-name { color: var(--nz-accent-text); }
.hm-row-sub {
  display: flex; align-items: center; gap: 0.45rem; min-width: 0;
  font-size: 0.72rem; color: var(--muted-foreground); white-space: nowrap; overflow: hidden;
}
.hm-row-asn, .hm-row-tags { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.hm-row-asn + .hm-row-tags::before, .hm-guard-chip + .hm-row-tags::before { content: "\00B7"; margin-right: 0.45rem; }
.hm-guard-chip {
  display: inline-flex; align-items: center; gap: 0.25rem; flex-shrink: 0;
  padding: 0.04rem 0.45rem; border-radius: 999px; font-weight: 600;
  color: var(--nz-accent-text);
  background: color-mix(in srgb, var(--chart-1) 13%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--chart-1) 28%, transparent);
}

.hm-row-spark {
  grid-area: spark; height: 28px; color: var(--chart-3); opacity: 0.85;
  transition: opacity var(--dur-1) ease, filter var(--dur-2) ease;
}
.hm-row-spark svg { display: block; width: 100%; height: 100%; overflow: visible; }
.hm-row:hover .hm-row-spark { opacity: 1; filter: drop-shadow(0 0 4px color-mix(in srgb, var(--chart-3) 60%, transparent)); }

.hm-row-players {
  grid-area: players; display: flex; flex-direction: column; align-items: flex-end; gap: 0.3rem;
  font-size: 0.74rem; color: var(--muted-foreground); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.hm-row-players b { font-size: 0.95rem; font-weight: 700; color: var(--foreground); }
.hm-row-players .hm-fill { width: 100%; }
.hm-row .hm-delta { grid-area: delta; justify-self: end; }

.hm-panel-head {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.55rem 0.75rem 0.8rem; margin-bottom: 0.3rem;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
}
.hm-panel-head h3 { margin: 0; font-size: 0.98rem; letter-spacing: -0.012em; }
.hm-panel-head .sub { margin-top: 0.1rem; font-size: 0.75rem; color: var(--muted-foreground); }
.hm-panel-foot { margin: 0.55rem 0.75rem 0.4rem; }

.hm-reg {
  display: grid; grid-template-columns: 1.4rem minmax(0, 1fr) auto;
  grid-template-areas: "flag name val" "flag bar share";
  align-items: center; column-gap: 0.65rem; row-gap: 0.3rem;
  padding: 0.5rem 0.75rem; border-radius: calc(var(--radius) - 5px);
  color: inherit; transition: background-color var(--dur-1) ease;
}
.hm-reg:hover { background: color-mix(in srgb, var(--accent) 80%, transparent); }
.hm-reg-flag { grid-area: flag; display: flex; }
.hm-reg-name { grid-area: name; min-width: 0; font-size: 0.84rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hm-reg-rank { font-size: 0.74rem; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.hm-reg-val { grid-area: val; font-size: 0.84rem; font-variant-numeric: tabular-nums; }
.hm-reg-val b { font-weight: 650; }
.hm-reg .hm-bar { grid-area: bar; height: 5px; }
.hm-reg-share { grid-area: share; font-size: 0.68rem; color: var(--muted-foreground); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hm-reg.is-home {
  background: color-mix(in srgb, var(--chart-1) 10%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--chart-1) 32%, transparent);
}
.hm-reg.is-home .hm-reg-name { font-weight: 650; }
.hm-reg-gap { text-align: center; line-height: 1; padding: 0.1rem 0; font-size: 0.8rem; color: var(--muted-foreground); }

/* --------------------------------------------------------------------------
   Discover
   -------------------------------------------------------------------------- */
.hm-discover {
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--hm-gap); align-items: stretch;
}
.hm-discover > .hm-reveal { display: flex; min-width: 0; }
.hm-discover > .hm-reveal > * { flex: 1; min-width: 0; }

.hm-tags { padding: 0.5rem 0.5rem 1rem; }
.hm-cloud { display: flex; flex-wrap: wrap; gap: 0.45rem; padding: 0.5rem 0.75rem 0; }
.hm-tag {
  display: inline-flex; align-items: center; gap: 0.4rem;
  min-height: 2.1rem; padding: 0.3rem 0.8rem; border-radius: 999px;
  font-size: 0.8rem; font-weight: 500; color: var(--foreground);
  background-color: var(--accent);
  background-image: linear-gradient(180deg, var(--nz-hairline), transparent);
  box-shadow: inset 0 0 0 1px var(--border);
  transition: transform var(--dur-1) var(--ease-out), color var(--dur-1) ease, background-color var(--dur-1) ease;
}
.hm-tag:hover {
  transform: translateY(-1px); color: var(--nz-accent-text);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--chart-1) 45%, var(--border));
}
.hm-tag:active { transform: scale(0.96); }
.hm-tag small { font-size: 0.68rem; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.hm-tag.t2 { font-size: 0.86rem; }
.hm-tag.t3 {
  font-size: 0.93rem; font-weight: 600;
  background-color: color-mix(in srgb, var(--chart-1) 12%, var(--accent));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--chart-1) 28%, var(--border));
}

.hm-promo {
  display: flex; flex-direction: column; gap: 0.4rem; overflow: hidden;
  padding: 1.15rem 1.2rem 1.1rem; color: inherit; text-decoration: none;
  transition: transform var(--dur-2) var(--ease-out);
}
.hm-promo > * { position: relative; z-index: 1; }
/* Hover ring: an opacity-faded layer, not a box-shadow transition. */
.hm-promo::after {
  content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--chart-1) 45%, transparent);
  opacity: 0; transition: opacity var(--dur-2) ease;
}
.hm-promo:hover { transform: translateY(-3px); }
.hm-promo:hover::after { opacity: 1; }
.hm-promo:active { transform: translateY(-1px) scale(0.995); }
.hm-promo-head { display: flex; align-items: center; gap: 0.55rem; }
.hm-promo-icon {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 2rem; height: 2rem; border-radius: 0.6rem;
  color: var(--nz-accent-text);
  background: linear-gradient(140deg, color-mix(in srgb, var(--chart-1) 16%, transparent), color-mix(in srgb, var(--nz-accent-2) 12%, transparent));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--chart-1) 20%, transparent);
}
.hm-promo-num {
  margin-top: 0.35rem; font-size: 1.7rem; font-weight: 700; line-height: 1.1;
  letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
}
.hm-promo-num small { font-size: 0.8rem; font-weight: 500; letter-spacing: 0; color: var(--muted-foreground); }
.hm-promo-sub { font-size: 0.78rem; color: var(--muted-foreground); line-height: 1.5; }
.hm-promo-spark { display: block; width: 100%; height: 34px; margin-top: auto; color: var(--hm-mc-line); }
.hm-promo-cta { display: inline-flex; align-items: center; gap: 0.3rem; margin-top: 0.5rem; font-size: 0.82rem; font-weight: 600; color: var(--nz-accent-text); }
.hm-promo-cta > span { display: inline-block; transition: transform var(--dur-2) var(--ease-out); }
.hm-promo:hover .hm-promo-cta > span { transform: translateX(3px); }

.hm-promo.is-mc .hm-promo-icon {
  color: var(--hm-mc);
  background: color-mix(in srgb, var(--hm-mc-line) 16%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--hm-mc-line) 30%, transparent);
}
.hm-promo.is-mc .hm-promo-cta { color: var(--hm-mc); }
.hm-promo.is-mc::after { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--hm-mc-line) 50%, transparent); }

.hm-promo.is-guard {
  background-image:
    radial-gradient(90% 80% at 100% 0%, color-mix(in srgb, var(--chart-1) 14%, transparent), transparent 70%),
    var(--nz-card-wash);
}
/* One-shot scan on hover - reuses the Protected-By-Nerzen motif. */
.hm-promo.is-guard::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--nz-accent-3) 22%, transparent), transparent);
}
.hm-promo.is-guard:hover::before { animation: nz-scan 1.1s var(--ease-out); }

/* Features: reuses .features/.feature-card (and their Signature v4 reveal). */
.hm-band .features { padding: 0; }
.hm-band .feature-card p strong { color: var(--foreground); font-weight: 600; font-variant-numeric: tabular-nums; }
.hm-feat-link { margin-top: 1rem; }

/* --------------------------------------------------------------------------
   Scroll reveals. Additive only: without scroll-timeline support, or with
   reduced motion, none of this exists and everything is simply visible.
   -------------------------------------------------------------------------- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .hm-band > .hm-sec-head,
    .hm-lb > li,
    .hm-reg-list > li,
    .hm-reveal {
      animation: rise-in linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 55%;
    }
    .hm-bar > span,
    .hm-fill > span {
      animation: bar-fill linear both;
      animation-timeline: view();
      animation-range: entry 15% cover 35%;
    }
  }
}

/* --------------------------------------------------------------------------
   Breakpoints
   -------------------------------------------------------------------------- */
@media (min-width: 1600px) {
  :root { --hm-max: 1400px; --hm-chart-h: 220px; }
}
/* Ultrawide (owner's 3440px): cap at 1760 - beyond that a 24h line just
   flattens and a leaderboard row becomes a 1500px-wide eye-track. */
@media (min-width: 2200px) {
  :root { --hm-max: 1760px; --hm-chart-h: 250px; --hm-gap: 1.5rem; }
  .hm-hero-grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 4rem; }
  .hm-hero h1 { font-size: 3.8rem; }
  .hm-board-grid { grid-template-columns: minmax(0, 2.3fr) minmax(0, 1fr); }
  /* Ten rows become two columns of five, still ranked top-to-bottom. */
  .hm-lb { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(5, auto); grid-auto-flow: column; column-gap: 1rem; }
  .hm-lb-head { display: none; }
}

@media (max-width: 1100px) {
  .hm-hero-grid { gap: 2rem; }
  .hm-board-grid { grid-template-columns: minmax(0, 1fr); }
  .hm-reg-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 0.5rem; }
  .hm-reg-gap { display: none; }
  .hm-discover { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hm-discover > .hm-disc-tags { grid-column: 1 / -1; }
}

@media (max-width: 860px) {
  :root { --hm-chart-h: 170px; }
  .hero.hm-hero { padding: 2.5rem 0 2rem; }
  .hm-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
  .hm-hero p.lead { font-size: 0.98rem; margin-bottom: 1.25rem; }
  .hm-search { max-width: none; }
  .hm-actions .btn { flex: 1 1 10rem; }
  .hm-band { margin-top: 2.5rem; }
  .hm-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem; }
  .hm-lb-head { display: none; }
  /* Two-line row: nothing is dropped, spark + delta move under the name. */
  .hm-row {
    grid-template-columns: 1.6rem 2.25rem minmax(0, 1fr) auto;
    grid-template-areas: "rank icon main players" "rank icon spark delta";
    column-gap: 0.6rem; row-gap: 0.3rem; padding: 0.6rem;
  }
  .hm-row-icon { width: 2.25rem; height: 2.25rem; }
  .hm-row-spark { height: 20px; }
  .hm-row-players .hm-fill { display: none; }
}

@media (max-width: 560px) {
  .hm-reg-list { grid-template-columns: minmax(0, 1fr); }
  .hm-discover { grid-template-columns: minmax(0, 1fr); }
  .hm-live { padding: 1rem 1rem 0.85rem; }
  .hm-live-foot dd span { display: block; }
  .hm-tile { padding: 0.85rem 0.9rem; }
  .hm-tile-num { font-size: 1.4rem; }
  .hm-row-tags, .hm-row-max { display: none; }
  .hm-chart-head > span:last-child { display: none; }
}

/* --------------------------------------------------------------------------
   Reduced motion. The global guard zeroes durations and delays; an infinite
   loop with ~0 duration still cycles, so the dot is killed outright, and
   every scroll-driven element is pinned to its visible end state.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .hm-dot::after { animation: none !important; opacity: 0 !important; }
  .hm-promo.is-guard:hover::before { animation: none !important; }
  .hm-band > .hm-sec-head,
  .hm-lb > li,
  .hm-reg-list > li,
  .hm-reveal { animation: none !important; opacity: 1 !important; transform: none !important; }
  .hm-split-bar > span,
  .hm-microbar > span,
  .hm-bar > span,
  .hm-fill > span { animation: none !important; transform: none !important; }
}


/* ==========================================================================
   Minecraft v2 (/minecraft, /minecraft/:id) - "mcv-" block.
   --------------------------------------------------------------------------
   Same contract as ASN v2: own prefix, nothing above is edited, only
   transform / opacity animate (colour on hover/pressed states), entrance
   animations use `backwards`, and the page adds exactly ONE loop - the live
   dot's ring - which the reduced-motion block at the end switches off.

   Accent. Minecraft gets a grass green so a Minecraft figure never reads as
   "a FiveM server" (blue) or "a provider" (orange). Two values, same reason
   --asnv-accent-text exists: #16a34a is 3.3:1 on white - fine for a bar, a
   dot or a 2px chart line, too weak for small text.
   ========================================================================== */

:root {
  --mcv-accent: #16a34a;
  --mcv-accent-text: #15803d;       /* 5.0:1 on #fff */
  --mcv-accent-2: var(--nz-accent-3);   /* "diamond" cyan - gradients only */
  /* Pressed chips / switches carry white 0.7rem text: both stops clear 5:1. */
  --mcv-btn-1: #15803d;
  --mcv-btn-2: #0e6f86;
  /* The MOTD "screen". Dark in BOTH themes: Minecraft colour codes were
     designed for a dark list background, and §e/§f on white are invisible. */
  --mcv-motd-bg: #101216;
  --mcv-motd-fg: #aaaaaa;           /* MC default MOTD grey, 8.0:1 on the panel */
  --mcv-motd-muted: #8b8f98;        /* 5.6:1 on the panel */
  --mcv-down-text: #b91c1c;         /* 5.9:1 on #fff (--destructive is 4.6:1, 4.0:1 on its tint) */
  --mcv-grid-min: 280px;
  --mcv-aside: 320px;
  --mcv-chart-h: 220px;
}
:root.dark {
  --mcv-accent: #22c55e;
  --mcv-accent-text: #4ade80;       /* 11.4:1 on #0a0a0a, 10.3:1 on #171717 */
  --mcv-motd-bg: #0c0e11;           /* a step under --card so it reads as inset */
  --mcv-down-text: #ff6568;
}

/* `hidden` must beat every display rule in this block. */
.mcv-page [hidden], .mcv-scope [hidden] { display: none !important; }

.mcv-sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Page frame + shared surface
   -------------------------------------------------------------------------- */
.mcv-page {
  width: 100%; max-width: 1360px; margin: 0 auto;
  padding: 0 1.5rem 3rem;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem;
}
.mcv-page > * { min-width: 0; }

.mcv-surface {
  position: relative;
  border-radius: var(--radius);
  background: var(--card);
  background-image: var(--nz-card-wash);
  box-shadow: inset 0 1px 0 0 var(--nz-hairline), 0 0 0 1px var(--border), var(--nz-elev-1);
}

.mcv-icon-badge {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 1.9rem; height: 1.9rem; border-radius: 0.6rem;
  color: var(--mcv-accent-text);
  background: linear-gradient(140deg,
    color-mix(in srgb, var(--mcv-accent) 18%, transparent),
    color-mix(in srgb, var(--mcv-accent-2) 10%, transparent));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mcv-accent) 26%, transparent);
}

/* --------------------------------------------------------------------------
   Topbar
   -------------------------------------------------------------------------- */
.mcv-topbar {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
  padding: 1.1rem 0 0.2rem;
  animation: fade-in var(--dur-3) ease backwards;
}
.mcv-topbar-title { display: flex; align-items: center; gap: 0.55rem; }
.mcv-topbar-title h1 { margin: 0; font-size: 1.3rem; font-weight: 700; letter-spacing: -0.02em; }
.mcv-topbar-desc { margin: 0.4rem 0 0; font-size: 0.82rem; color: var(--muted-foreground); max-width: 48rem; text-wrap: pretty; }
.mcv-topbar-desc strong { color: var(--foreground); font-weight: 600; }
.mcv-topbar-right {
  flex-shrink: 0; padding-top: 0.35rem;
  font-size: 0.75rem; color: var(--muted-foreground); font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   Live indicator - the page's ONE looping animation.
   -------------------------------------------------------------------------- */
.mcv-live {
  display: inline-flex; align-items: center; gap: 0.4rem;
  /* No text-transform: with <html lang="tr"> an uppercased "i" renders as a
     dotted capital I - the page keeps its ASCII-only convention by writing
     labels in sentence case instead. */
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.01em;
  color: var(--mcv-accent-text);
}
.mcv-live-dot {
  position: relative; width: 0.5rem; height: 0.5rem; border-radius: 50%;
  background: var(--mcv-accent); flex-shrink: 0;
}
.mcv-live-dot::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 1.5px solid var(--mcv-accent); opacity: 0;
  animation: pulse-ring 2.4s var(--ease-out) infinite;
}
.mcv-live.is-stale { color: var(--muted-foreground); }
.mcv-live.is-stale .mcv-live-dot { background: var(--muted-foreground); }
.mcv-live.is-stale .mcv-live-dot::after { animation: none; }

/* --------------------------------------------------------------------------
   Hero: live network figure + 24h area chart
   -------------------------------------------------------------------------- */
.mcv-hero {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem 1.75rem;
  padding: 1.15rem 1.25rem; overflow: hidden; isolation: isolate;
  animation: rise-in 0.42s var(--ease-out) backwards;
}
/* Static atmosphere: a green bloom and a faint block grid fading out from the
   top-left corner. No loop - Signature v4 already owns the site's ambient motion. */
.mcv-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(70% 90% at 0% 0%, color-mix(in srgb, var(--mcv-accent) 16%, transparent), transparent 70%),
    linear-gradient(var(--nz-grid-line) 1px, transparent 1px) 0 0 / 16px 16px,
    linear-gradient(90deg, var(--nz-grid-line) 1px, transparent 1px) 0 0 / 16px 16px;
  -webkit-mask-image: radial-gradient(80% 100% at 0% 0%, #000 30%, transparent 75%);
          mask-image: radial-gradient(80% 100% at 0% 0%, #000 30%, transparent 75%);
}
.mcv-hero-figure { display: flex; flex-direction: column; gap: 0.55rem; min-width: 0; }
.mcv-kicker { margin: 0; display: flex; align-items: center; gap: 0.6rem; font-size: 0.72rem; color: var(--muted-foreground); }
.mcv-hero-line { display: flex; align-items: baseline; gap: 0.55rem; flex-wrap: wrap; }
.mcv-hero-num {
  font-size: clamp(2.4rem, 1.7rem + 2.4vw, 3.4rem);
  font-weight: 800; line-height: 1; letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  animation: stat-rise 0.5s var(--ease-out) 0.08s backwards;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  /* background-image, never the `background` shorthand (resets background-clip). */
  .mcv-hero-num {
    background-image: linear-gradient(135deg, var(--mcv-accent), var(--mcv-accent-2));
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}
.mcv-hero-unit { font-size: 0.88rem; color: var(--muted-foreground); }
.mcv-trend {
  display: inline-flex; align-items: center; gap: 0.2rem; align-self: flex-start;
  padding: 0.16rem 0.55rem; border-radius: 999px; white-space: nowrap;
  font-size: 0.74rem; font-weight: 600; font-variant-numeric: tabular-nums;
}
/* Own badge rather than .asnv-delta: that one's #22c55e text is 2.2:1 in the
   light theme. Arrow glyph + colour, never colour alone. */
.mcv-trend.up   { color: var(--mcv-accent-text); background: color-mix(in srgb, var(--mcv-accent) 14%, transparent); }
.mcv-trend.down { color: var(--mcv-down-text);   background: color-mix(in srgb, var(--destructive) 12%, transparent); }
.mcv-trend.flat { color: var(--muted-foreground); background: var(--accent); }

.mcv-mini { margin: auto 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
.mcv-mini > div {
  min-width: 0; padding: 0.55rem 0.65rem; border-radius: calc(var(--radius) - 6px);
  background: color-mix(in srgb, var(--accent) 65%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border) 80%, transparent);
  animation: rise-in-sm 0.34s var(--ease-out) backwards;
}
.mcv-mini > div:nth-child(1) { animation-delay: 0.14s; }
.mcv-mini > div:nth-child(2) { animation-delay: 0.18s; }
.mcv-mini > div:nth-child(3) { animation-delay: 0.22s; }
.mcv-mini dt {
  font-size: 0.68rem; font-weight: 600;
  color: var(--muted-foreground); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mcv-mini dd {
  margin: 0.2rem 0 0; font-size: 1.05rem; font-weight: 700; font-variant-numeric: tabular-nums;
  display: flex; align-items: baseline; gap: 0.3rem; flex-wrap: wrap;
}
.mcv-mini dd small { font-size: 0.68rem; font-weight: 500; color: var(--muted-foreground); }

.mcv-hero-chart { display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; }
.mcv-hero-chart-head {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap;
  font-size: 0.75rem; color: var(--muted-foreground);
}
.mcv-hero-chart-head strong { color: var(--foreground); font-weight: 600; }
.mcv-legend { display: inline-flex; align-items: center; gap: 0.35rem 0.8rem; flex-wrap: wrap; }
.mcv-legend i { display: inline-block; width: 14px; height: 0; vertical-align: middle; margin-right: 0.3rem; border-top: 2px solid var(--mcv-accent); }
.mcv-legend i.is-peak { border-top: 2px dashed color-mix(in srgb, var(--mcv-accent) 55%, transparent); }
.mcv-chart { position: relative; height: var(--mcv-chart-h); min-width: 0; }
.mcv-chart canvas { max-height: none; }
.mcv-chart-empty { display: none; margin: 0; position: absolute; inset: 0; place-items: center; font-size: 0.8rem; color: var(--muted-foreground); }
.mcv-chart.is-empty canvas { display: none; }
.mcv-chart.is-empty .mcv-chart-empty { display: grid; }

/* --------------------------------------------------------------------------
   "Yeni tespit edilenler" strip
   -------------------------------------------------------------------------- */
.mcv-new { padding: 0.9rem 1rem 1rem; animation: rise-in 0.42s var(--ease-out) 0.06s backwards; }
.mcv-section-head { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.75rem; }
.mcv-section-head h2 { margin: 0; font-size: 0.95rem; letter-spacing: -0.012em; }
.mcv-section-head p { margin: 0.1rem 0 0; font-size: 0.74rem; color: var(--muted-foreground); }
.mcv-new-track {
  list-style: none; margin: 0; padding: 0 0 0.3rem;
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, 1fr); gap: 0.7rem;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--muted-foreground) 40%, transparent) transparent;
}
.mcv-new-track > li {
  scroll-snap-align: start; min-width: 0;
  animation: rise-in-sm 0.3s var(--ease-out) backwards;
  animation-delay: calc(0.1s + min(var(--i, 0), 8) * 0.04s);
}
.mcv-new-item {
  display: flex; align-items: center; gap: 0.65rem; height: 100%;
  padding: 0.55rem 0.7rem; border-radius: calc(var(--radius) - 6px);
  background: var(--mcv-motd-bg); color: var(--mcv-motd-fg); text-decoration: none;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.06);
  transition: transform var(--dur-2) var(--ease-out);
}
.mcv-new-item:hover { transform: translateY(-2px); }
.mcv-new-item:focus-visible { outline: 2px solid var(--mcv-accent); outline-offset: 2px; }
.mcv-new-item img, .mcv-new-fav { width: 40px; height: 40px; border-radius: 7px; flex-shrink: 0; }
.mcv-new-text { min-width: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.mcv-new-motd {
  font-size: 0.82rem; font-weight: 600; line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  text-shadow: 0.08em 0.08em 0 rgb(0 0 0 / 0.55);
}
.mcv-new-meta { font-size: 0.68rem; color: var(--mcv-motd-muted); font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   Layout: [main | aside]. The aside is FIRST in the DOM (filters before
   results for keyboard / screen-reader order) and moves right at >=1200px.
   -------------------------------------------------------------------------- */
.mcv-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.mcv-layout > * { min-width: 0; }

/* --------------------------------------------------------------------------
   Toolbar
   -------------------------------------------------------------------------- */
.mcv-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.55rem 0.6rem;
  padding: 0.6rem 0.7rem; margin-bottom: 0.9rem;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--card) 88%, transparent);
  -webkit-backdrop-filter: blur(12px) saturate(150%); backdrop-filter: blur(12px) saturate(150%);
  box-shadow: inset 0 1px 0 0 var(--nz-hairline), 0 0 0 1px var(--border), var(--nz-elev-1);
  scroll-margin-top: 5rem;
}
.mcv-search { position: relative; display: flex; align-items: center; flex: 1 1 260px; min-width: 0; margin: 0; }
.mcv-search > svg { position: absolute; left: 0.75rem; color: var(--muted-foreground); pointer-events: none; }
.mcv-search input {
  width: 100%; padding: 0.5rem 2.2rem 0.5rem 2.2rem;
  background: var(--background); color: var(--foreground);
  border: 1px solid var(--border); border-radius: 999px; font: inherit; font-size: 0.84rem;
  transition: border-color var(--dur-1) ease;
}
.mcv-search input::placeholder { color: var(--muted-foreground); }
.mcv-search input::-webkit-search-cancel-button { display: none; }
.mcv-search input:focus, .mcv-search input:focus-visible {
  outline: none; border-color: color-mix(in srgb, var(--mcv-accent) 60%, var(--border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mcv-accent) 16%, transparent);
}
.mcv-kbd {
  position: absolute; right: 0.6rem; padding: 0 0.35rem; border-radius: 5px;
  font: 600 0.66rem/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--muted-foreground); border: 1px solid var(--border); background: var(--card);
  pointer-events: none; transition: opacity var(--dur-1) ease;
}
.mcv-search input:focus ~ .mcv-kbd, .mcv-search input:not(:placeholder-shown) ~ .mcv-kbd { opacity: 0; }

.mcv-chips { display: flex; gap: 0.35rem; overflow-x: auto; scrollbar-width: none; min-width: 0; }
.mcv-chips::-webkit-scrollbar { display: none; }
.mcv-sort {
  flex-shrink: 0; padding: 0.32rem 0.7rem; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border); background: transparent;
  background-image: linear-gradient(180deg, var(--nz-hairline), transparent);
  color: var(--muted-foreground); font: inherit; font-size: 0.74rem; font-weight: 600; white-space: nowrap;
  transition: background-color var(--dur-1) ease, border-color var(--dur-1) ease,
              color var(--dur-1) ease, transform var(--dur-1) var(--ease-out);
}
.mcv-sort:hover { border-color: color-mix(in srgb, var(--mcv-accent) 50%, var(--border)); color: var(--foreground); }
.mcv-sort:active { transform: scale(0.96); }
.mcv-sort:focus-visible { outline: 2px solid var(--mcv-accent); outline-offset: 2px; }
.mcv-sort[aria-pressed="true"] {
  background-image: linear-gradient(135deg, var(--mcv-btn-1), var(--mcv-btn-2));
  border-color: transparent; color: #fff;
  box-shadow: inset 0 1px 0 0 rgb(255 255 255 / 0.2), 0 6px 16px -8px color-mix(in srgb, var(--mcv-accent) 70%, transparent);
}

/* Switch - thumb moves with transform only. */
.mcv-switch {
  display: inline-flex; align-items: center; gap: 0.45rem; flex-shrink: 0;
  padding: 0.25rem 0.35rem; border: 0; background: transparent; cursor: pointer;
  color: var(--muted-foreground); font: inherit; font-size: 0.74rem; font-weight: 600; white-space: nowrap;
  border-radius: 999px;
}
.mcv-switch:hover { color: var(--foreground); }
.mcv-switch:focus-visible { outline: 2px solid var(--mcv-accent); outline-offset: 2px; }
.mcv-switch-track {
  position: relative; width: 30px; height: 18px; border-radius: 999px; flex-shrink: 0;
  background: var(--muted); box-shadow: inset 0 0 0 1px var(--border);
  transition: background-color var(--dur-2) ease;
}
.mcv-switch-thumb {
  position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / 0.35);
  transition: transform var(--dur-2) var(--ease-out);
}
.mcv-switch[aria-checked="true"] { color: var(--foreground); }
.mcv-switch[aria-checked="true"] .mcv-switch-track { background: var(--mcv-btn-1); box-shadow: none; }
.mcv-switch[aria-checked="true"] .mcv-switch-thumb { transform: translateX(12px); }
.mcv-switch-count { font-weight: 500; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }

.mcv-facet {
  display: inline-flex; align-items: center; gap: 0.4rem; flex-shrink: 0;
  padding: 0.28rem 0.6rem; border-radius: 999px; cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--mcv-accent) 45%, var(--border));
  background: color-mix(in srgb, var(--mcv-accent) 12%, transparent);
  color: var(--mcv-accent-text); font: inherit; font-size: 0.72rem; font-weight: 700;
  animation: pop-in var(--dur-2) var(--ease-out) backwards;
}
.mcv-facet:focus-visible { outline: 2px solid var(--mcv-accent); outline-offset: 2px; }
.mcv-result { margin-left: auto; font-size: 0.72rem; color: var(--muted-foreground); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* --------------------------------------------------------------------------
   Server grid
   -------------------------------------------------------------------------- */
.mcv-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--mcv-grid-min), 1fr)); gap: 0.9rem;
  transition: opacity var(--dur-1) ease;
}
.mcv-grid > li {
  min-width: 0;
  /* ~200 cards: skip layout/paint for the ones far off-screen. */
  content-visibility: auto; contain-intrinsic-size: auto 176px;
  animation: rise-in-sm 0.32s var(--ease-out) backwards;
}
.mcv-grid > li:nth-child(2)  { animation-delay: 0.03s; }
.mcv-grid > li:nth-child(3)  { animation-delay: 0.06s; }
.mcv-grid > li:nth-child(4)  { animation-delay: 0.09s; }
.mcv-grid > li:nth-child(5)  { animation-delay: 0.12s; }
.mcv-grid > li:nth-child(6)  { animation-delay: 0.15s; }
.mcv-grid > li:nth-child(7)  { animation-delay: 0.18s; }
.mcv-grid > li:nth-child(8)  { animation-delay: 0.21s; }
.mcv-grid > li:nth-child(9)  { animation-delay: 0.24s; }
.mcv-grid > li:nth-child(10) { animation-delay: 0.27s; }
.mcv-grid > li:nth-child(11) { animation-delay: 0.30s; }
.mcv-grid > li:nth-child(n+12) { animation-delay: 0.33s; }
/* After first paint the entrance is switched off: re-inserting a node (sort)
   or un-hiding it (filter) would otherwise replay it on every keystroke. */
.mcv-grid.is-settled > li { animation: none; }
/* Re-sort feedback: a fade, NOT a FLIP - 200 cards x (read + write) would
   fight Chart.js for the main thread. Same call as /asn. */
.mcv-grid.is-resorting { opacity: 0.35; }

.mcv-card {
  position: relative; display: flex; flex-direction: column; height: 100%;
  border-radius: var(--radius); color: inherit; text-decoration: none;
  background: var(--card); background-image: var(--nz-card-wash);
  box-shadow: inset 0 1px 0 0 var(--nz-hairline), 0 0 0 1px var(--border), var(--nz-elev-1);
  transition: transform var(--dur-2) var(--ease-out), opacity var(--dur-2) ease;
}
/* Hover glow on a pseudo-element faded with opacity - box-shadow never animates. */
.mcv-card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--mcv-accent) 50%, var(--border)),
    var(--nz-elev-2),
    0 14px 30px -20px color-mix(in srgb, var(--mcv-accent) 60%, transparent);
  opacity: 0; transition: opacity var(--dur-2) ease;
}
.mcv-card:hover { transform: translateY(-3px); }
.mcv-card:hover::after { opacity: 1; }
.mcv-card:active { transform: translateY(-1px) scale(0.995); }
.mcv-card:focus-visible { outline: 2px solid var(--mcv-accent); outline-offset: 3px; }
/* Empty / unreachable servers recede instead of looking identical to full ones. */
.mcv-card.is-empty { opacity: 0.72; }
.mcv-card.is-off { opacity: 0.5; }
.mcv-card.is-empty:hover, .mcv-card.is-off:hover,
.mcv-card.is-empty:focus-visible, .mcv-card.is-off:focus-visible { opacity: 1; }

/* The "server list entry" - Minecraft's own list row, rebuilt. */
.mcv-entry {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  /* Line 1 (the server's name) gets the full width; the count shares the
     row with the tagline, which is the line that can afford to truncate. */
  grid-template-areas: "fav l1 l1" "fav l2 cnt";
  align-items: center; column-gap: 0.75rem; row-gap: 0.15rem;
  margin: 0.45rem 0.45rem 0; padding: 0.6rem 0.7rem;
  border-radius: calc(var(--radius) - 6px);
  background-color: var(--mcv-motd-bg);
  background-image: linear-gradient(180deg, rgb(255 255 255 / 0.045), transparent 60%);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.06),
              inset 0 -14px 26px -20px color-mix(in srgb, var(--mcv-accent) 55%, transparent);
  color: var(--mcv-motd-fg);
}
/* One-shot sheen per hover (Signature v4's nz-sheen keyframe, reused). */
.mcv-entry::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 45%; z-index: 1;
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / 0.09), transparent);
  opacity: 0; transform: translateX(-150%) skewX(-18deg); pointer-events: none;
}
.mcv-card:hover .mcv-entry::after { animation: nz-sheen 0.9s var(--ease-out) 1; }

.mcv-fav {
  grid-area: fav; display: block; width: 64px; height: 64px; border-radius: 9px; flex-shrink: 0;
  background: rgb(255 255 255 / 0.05); object-fit: cover;
  transition: transform var(--dur-3) var(--ease-out);
}
.mcv-card:hover .mcv-fav { transform: scale(1.06); }
/* No favicon: a pixel grass block instead of an emoji. */
.mcv-fav-fallback {
  display: block;
  background:
    linear-gradient(180deg, #6fb13f 0 31%, #4f8a2c 31% 40%, transparent 40%),
    repeating-linear-gradient(90deg, #8b5a2b 0 12.5%, #7a4e25 12.5% 25%),
    #8b5a2b;
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.3);
  image-rendering: pixelated;
}

.mcv-motd-l1, .mcv-motd-l2 {
  margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  text-shadow: 0.08em 0.08em 0 rgb(0 0 0 / 0.55);       /* Minecraft's drop shadow */
}
.mcv-motd-l1 { grid-area: l1; font-size: 0.9rem; font-weight: 600; line-height: 1.3; }
.mcv-motd-l2 { grid-area: l2; font-size: 0.78rem; font-weight: 500; line-height: 1.3; }

/* Legacy palette, lifted where the original fails 4.5:1 on the panel
   (§0 §1 §4 §5 §8 §9). Hex colours are lifted server-side (liftHex). */
.mcv-c-0 { color: #808080; } .mcv-c-1 { color: #6b6bff; } .mcv-c-2 { color: #00aa00; } .mcv-c-3 { color: #00aaaa; }
.mcv-c-4 { color: #e05555; } .mcv-c-5 { color: #d05ad0; } .mcv-c-6 { color: #ffaa00; } .mcv-c-7 { color: #aaaaaa; }
.mcv-c-8 { color: #8a8a8a; } .mcv-c-9 { color: #7777ff; } .mcv-c-a { color: #55ff55; } .mcv-c-b { color: #55ffff; }
.mcv-c-c { color: #ff5555; } .mcv-c-d { color: #ff55ff; } .mcv-c-e { color: #ffff55; } .mcv-c-f { color: #ffffff; }
.mcv-b { font-weight: 800; }
.mcv-i { font-style: italic; }
.mcv-u { text-decoration: underline; }
.mcv-s { text-decoration: line-through; }
.mcv-u.mcv-s { text-decoration: underline line-through; }

/* "472/1000" on the right of the entry, as in the game's server list. */
.mcv-entry-count {
  grid-area: cnt; align-self: center; justify-self: end;
  display: inline-flex; align-items: center; gap: 0.35rem; white-space: nowrap;
  font-size: 0.78rem; font-variant-numeric: tabular-nums; color: #aaaaaa;
  text-shadow: 0.08em 0.08em 0 rgb(0 0 0 / 0.55);
}
.mcv-entry-count b { color: #fff; font-weight: 700; }
.mcv-dot {
  width: 0.45rem; height: 0.45rem; border-radius: 50%; flex-shrink: 0;
  background: #55ff55; box-shadow: 0 0 0 3px rgb(85 255 85 / 0.16);
}
.mcv-dot.is-off { background: #6b6f78; box-shadow: none; }

/* Analytics half of the card */
.mcv-body { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.7rem 0.95rem 0.85rem; flex: 1; }
.mcv-stat-row { display: flex; align-items: center; gap: 0.45rem; min-width: 0; font-variant-numeric: tabular-nums; }
.mcv-rank {
  flex-shrink: 0; font-size: 0.68rem; font-weight: 700; padding: 0.1rem 0.42rem; border-radius: 6px;
  color: var(--muted-foreground); background: var(--accent);
}
/* Top three get weight, not a medal - same rule as /asn. */
.mcv-rank.is-top {
  color: var(--mcv-accent-text);
  background: color-mix(in srgb, var(--mcv-accent) 14%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mcv-accent) 28%, transparent);
}
.mcv-share { font-size: 0.74rem; color: var(--muted-foreground); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mcv-share strong { color: var(--foreground); font-weight: 600; }
.mcv-delta {
  flex-shrink: 0; font-size: 0.66rem; font-weight: 700; padding: 0.06rem 0.4rem; border-radius: 999px;
  animation: rise-in-sm 0.3s var(--ease-out) backwards;
  transition: opacity 0.6s ease;
}
.mcv-delta.up   { color: var(--mcv-accent-text); background: color-mix(in srgb, var(--mcv-accent) 14%, transparent); }
.mcv-delta.down { color: var(--mcv-down-text); background: color-mix(in srgb, var(--destructive) 12%, transparent); }
.mcv-delta.is-fading { opacity: 0; }
.mcv-spark { margin-left: auto; flex-shrink: 0; width: 60px; height: 18px; color: var(--mcv-accent-text); opacity: 0.9; overflow: visible; }
.mcv-spark path { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }

.mcv-bar {
  height: 5px; border-radius: 999px; background: var(--muted); overflow: hidden;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border) 80%, transparent);
}
.mcv-bar > span {
  display: block; height: 100%; width: 100%;
  /* --mcv-bar = players / leader's players (see buildMcListPayload). */
  transform: scaleX(var(--mcv-bar, 0)); transform-origin: left center;
  background: linear-gradient(90deg, var(--mcv-accent), color-mix(in srgb, var(--mcv-accent-2) 60%, var(--mcv-accent)));
  animation: mcv-grow 0.6s var(--ease-out) 0.12s backwards;
  transition: transform var(--dur-3) var(--ease-out), filter var(--dur-2) ease;
}
.mcv-card:hover .mcv-bar > span { filter: brightness(1.1) saturate(1.15); }
/* FROM-only keyframe: the implicit end state is the element's own
   scaleX(var(--mcv-bar)). `bar-fill` runs to scaleX(1) and would overshoot
   every fractional bar to full width, then snap back. */
@keyframes mcv-grow { from { transform: scaleX(0); } }

.mcv-foot { display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; min-width: 0; }
.mcv-chip {
  max-width: 11rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: 0.08rem 0.45rem; border-radius: 999px; font-size: 0.64rem; font-weight: 600;
  background: var(--accent); background-image: linear-gradient(180deg, var(--nz-hairline), transparent);
  color: var(--muted-foreground);
}
.mcv-chip.is-proxy { color: var(--mcv-accent-text); }
.mcv-chip.is-new { color: #fff; background-image: linear-gradient(135deg, var(--mcv-btn-1), var(--mcv-btn-2)); }
.mcv-shield { display: inline-flex; color: var(--muted-foreground); margin-left: auto; }

.mcv-empty {
  display: flex; flex-direction: column; align-items: center; gap: 0.75rem;
  padding: 2.5rem 1rem; text-align: center; color: var(--muted-foreground); font-size: 0.88rem;
  animation: fade-in var(--dur-3) ease backwards;
}
.mcv-empty p { margin: 0; }

/* --------------------------------------------------------------------------
   Aside: version / software distribution (facets)
   -------------------------------------------------------------------------- */
.mcv-aside { display: grid; gap: 1rem; align-content: start; }
.mcv-panel { padding: 0.9rem 1rem 1rem; animation: rise-in 0.42s var(--ease-out) 0.1s backwards; }
.mcv-panel > summary {
  display: flex; align-items: center; gap: 0.6rem; cursor: pointer; list-style: none;
  border-radius: calc(var(--radius) - 6px);
}
.mcv-panel > summary::-webkit-details-marker { display: none; }
.mcv-panel > summary:focus-visible { outline: 2px solid var(--mcv-accent); outline-offset: 3px; }
.mcv-panel-title { display: block; font-size: 0.95rem; font-weight: 700; letter-spacing: -0.012em; }
.mcv-panel-sub { display: block; font-size: 0.72rem; color: var(--muted-foreground); margin-top: 0.1rem; }
.mcv-chev { margin-left: auto; color: var(--muted-foreground); transition: transform var(--dur-2) var(--ease-out); }
.mcv-panel[open] .mcv-chev { transform: rotate(180deg); }
.mcv-panel[open] > summary { margin-bottom: 0.8rem; }

.mcv-tabs {
  display: inline-flex; gap: 0.2rem; padding: 0.2rem; border-radius: 999px;
  background: var(--accent); box-shadow: inset 0 0 0 1px var(--border);
}
.mcv-tab {
  min-height: 28px; padding: 0.28rem 0.8rem; border: 0; border-radius: 999px; cursor: pointer;
  background: transparent; color: var(--muted-foreground); font: inherit; font-size: 0.74rem; font-weight: 600;
  transition: background-color var(--dur-1) ease, color var(--dur-1) ease;
}
.mcv-tab:hover { color: var(--foreground); }
.mcv-tab:focus-visible { outline: 2px solid var(--mcv-accent); outline-offset: 1px; }
.mcv-tab[aria-selected="true"] { background: var(--card); color: var(--foreground); box-shadow: 0 1px 3px rgb(0 0 0 / 0.18), inset 0 0 0 1px var(--border); }

.mcv-dist-list { list-style: none; margin: 0.7rem 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.15rem; }
.mcv-dist-row {
  width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "name count" "bar bar"; gap: 0.3rem 0.6rem;
  padding: 0.45rem 0.55rem; text-align: left; cursor: pointer;
  border: 1px solid transparent; border-radius: calc(var(--radius) - 6px);
  background: transparent; color: var(--foreground); font: inherit;
  transition: background-color var(--dur-1) ease, border-color var(--dur-1) ease;
}
.mcv-dist-row:hover { background: var(--accent); }
.mcv-dist-row:focus-visible { outline: 2px solid var(--mcv-accent); outline-offset: -2px; }
.mcv-dist-row[aria-pressed="true"] {
  background: color-mix(in srgb, var(--mcv-accent) 12%, transparent);
  border-color: color-mix(in srgb, var(--mcv-accent) 45%, var(--border));
}
.mcv-dist-name { grid-area: name; font-size: 0.8rem; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mcv-dist-name small { font-weight: 500; color: var(--muted-foreground); margin-left: 0.3rem; }
.mcv-dist-count { grid-area: count; font-size: 0.7rem; color: var(--muted-foreground); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mcv-dist-bar { grid-area: bar; height: 4px; border-radius: 999px; background: var(--muted); overflow: hidden; }
.mcv-dist-bar > span {
  display: block; height: 100%; width: 100%;
  transform: scaleX(var(--mcv-bar, 0)); transform-origin: left center;
  background: linear-gradient(90deg, var(--mcv-accent), color-mix(in srgb, var(--mcv-accent-2) 55%, var(--mcv-accent)));
  animation: mcv-grow 0.55s var(--ease-out) backwards;
  animation-delay: calc(0.15s + min(var(--i, 0), 10) * 0.03s);
}

/* Proxy / sunucu / bilinmiyor split - static flex widths, nothing animates width. */
.mcv-split { display: flex; height: 8px; margin-top: 0.8rem; border-radius: 999px; overflow: hidden; gap: 2px; background: var(--muted); }
.mcv-split > span { display: block; min-width: 0; }
.mcv-split > .is-proxy  { background: var(--mcv-accent); }
.mcv-split > .is-server { background: var(--mcv-accent-2); }
.mcv-split > .is-unknown { background: color-mix(in srgb, var(--muted-foreground) 45%, transparent); }
.mcv-split-legend { display: flex; flex-wrap: wrap; gap: 0.3rem 0.8rem; margin-top: 0.45rem; font-size: 0.7rem; color: var(--muted-foreground); }
.mcv-split-legend i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 0.3rem; vertical-align: -1px; }
.mcv-panel-foot {
  margin: 0.8rem 0 0; padding-top: 0.7rem; border-top: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
  font-size: 0.7rem; color: var(--muted-foreground); line-height: 1.5;
}

/* Value that just changed on the 60s refresh - reuses ASN v2's keyframe. */
.mcv-flip { animation: asnv-flip var(--dur-2) var(--ease-out); }

/* --------------------------------------------------------------------------
   Detail page (/minecraft/:id) - wrapped in .mcv-scope
   -------------------------------------------------------------------------- */
.mcv-scope .chart-card::before { background: linear-gradient(90deg, var(--mcv-accent), var(--mcv-accent-2)); }
.mcv-scope .chart-icon-badge {
  color: var(--mcv-accent-text);
  background: linear-gradient(140deg, color-mix(in srgb, var(--mcv-accent) 16%, transparent), color-mix(in srgb, var(--mcv-accent-2) 10%, transparent));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mcv-accent) 22%, transparent);
}
.mcv-scope .range-select a.active {
  background: linear-gradient(135deg, var(--mcv-btn-1), var(--mcv-btn-2)); border-color: transparent;
  box-shadow: inset 0 1px 0 0 rgb(255 255 255 / 0.2), 0 6px 16px -8px color-mix(in srgb, var(--mcv-accent) 70%, transparent);
}

.mcv-detail {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem;
  margin: 1.5rem 0 1rem; padding: 0.75rem; overflow: hidden; isolation: isolate;
  animation: rise-in 0.42s var(--ease-out) backwards;
}
.mcv-detail::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 120% at 100% 0%, color-mix(in srgb, var(--mcv-accent) 14%, transparent), transparent 70%);
}
.mcv-entry-lg { margin: 0; padding: 0.9rem 1rem; column-gap: 1rem; grid-template-areas: "fav l1 l1" "fav l2 l2"; }
.mcv-entry-lg .mcv-motd-l1 { font-size: 1.15rem; font-weight: 700; white-space: normal; text-wrap: balance; }
.mcv-entry-lg .mcv-motd-l2 { font-size: 0.88rem; white-space: normal; }
.mcv-detail-side { display: flex; flex-direction: column; align-items: flex-start; gap: 0.55rem; padding: 0 0.35rem 0.35rem; }
.mcv-detail-figure { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; }
.mcv-detail-figure .mcv-hero-num { font-size: clamp(2rem, 1.5rem + 2vw, 2.8rem); }
.mcv-tag-row { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.mcv-tag {
  display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.18rem 0.55rem; border-radius: 999px;
  font-size: 0.72rem; font-weight: 600; color: var(--muted-foreground);
  background: var(--accent); background-image: linear-gradient(180deg, var(--nz-hairline), transparent);
  box-shadow: inset 0 0 0 1px var(--border);
}
.mcv-tag.is-accent { color: var(--mcv-accent-text); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mcv-accent) 35%, var(--border)); }

.mcv-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr)); gap: 0.75rem; margin-bottom: 1.25rem; }
.mcv-kpi {
  display: flex; flex-direction: column; gap: 0.3rem; padding: 0.8rem 0.9rem;
  border-radius: calc(var(--radius) - 4px);
  animation: rise-in-sm 0.34s var(--ease-out) backwards;
  animation-delay: calc(0.1s + min(var(--i, 0), 6) * 0.04s);
}
.mcv-kpi-label { font-size: 0.72rem; font-weight: 600; color: var(--muted-foreground); }
.mcv-kpi-num { font-size: 1.3rem; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.mcv-kpi-num.gain-pos { color: var(--mcv-accent-text); }
.mcv-kpi-sub { font-size: 0.7rem; color: var(--muted-foreground); }

/* --------------------------------------------------------------------------
   Breakpoints (375 / 768 / 1200 / 1440 / 2200+)
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  .mcv-hero { grid-template-columns: minmax(250px, 300px) minmax(0, 1fr); align-items: stretch; }
  .mcv-toolbar { position: sticky; top: 4.5rem; z-index: 5; }   /* clears the 4rem .site-header */
  .mcv-dist-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 0.75rem; }
  .mcv-entry-lg .mcv-fav { width: 128px; height: 128px; border-radius: 16px; image-rendering: pixelated; }
  .mcv-entry-lg .mcv-motd-l1 { font-size: 1.45rem; }
  .mcv-entry-lg .mcv-motd-l2 { font-size: 0.98rem; }
}
@media (min-width: 900px) {
  .mcv-detail { grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding: 0.85rem; }
  .mcv-detail-side { align-items: flex-end; text-align: right; padding: 0 0.6rem 0 0; }
  .mcv-detail-side .mcv-tag-row { justify-content: flex-end; }
}
@media (min-width: 1200px) {
  .mcv-layout { grid-template-columns: minmax(0, 1fr) var(--mcv-aside); }
  .mcv-aside { grid-column: 2; grid-row: 1; position: sticky; top: 5rem; max-height: calc(100vh - 6rem); overflow-y: auto; scrollbar-width: thin; }
  .mcv-main { grid-column: 1; grid-row: 1; }
  .mcv-dist-list { grid-template-columns: minmax(0, 1fr); }
  .mcv-panel > summary { cursor: default; }
  .mcv-chev { display: none; }
}
@media (min-width: 1440px) {
  :root { --mcv-chart-h: 240px; }
  .mcv-page { max-width: 1560px; padding-inline: 2rem; }
  .mcv-hero { grid-template-columns: 340px minmax(0, 1fr); padding: 1.3rem 1.5rem; }
}
/* Ultrawide (3440px): wider frame, one more column of cards, taller chart -
   past 2560px extra width only becomes gutter. */
@media (min-width: 2200px) {
  :root { --mcv-aside: 360px; --mcv-grid-min: 300px; --mcv-chart-h: 280px; }
  .mcv-page { max-width: 2560px; padding-inline: 2.5rem; gap: 1.5rem; }
  .mcv-hero { grid-template-columns: 400px minmax(0, 1fr); }
  .mcv-new-track { grid-auto-columns: minmax(260px, 1fr); }
}
@media (max-width: 767px) {
  .mcv-page { padding: 0 1rem 2.5rem; gap: 1rem; }
  .mcv-topbar { flex-direction: column; gap: 0.3rem; padding-top: 0.9rem; }
  .mcv-topbar-right { padding-top: 0; }
  .mcv-hero { padding: 1rem; }
  :root { --mcv-chart-h: 160px; }
  .mcv-toolbar { padding: 0.55rem; }
  .mcv-search { flex-basis: 100%; }
  .mcv-chips { flex: 1 1 100%; }
  .mcv-result { margin-left: 0; }
  .mcv-new-track { grid-auto-columns: 78%; }
}
@media (max-width: 420px) {
  .mcv-fav { width: 48px; height: 48px; border-radius: 8px; }
  .mcv-entry { column-gap: 0.6rem; padding: 0.55rem 0.6rem; }
  .mcv-mini dd { font-size: 0.95rem; }
  .mcv-grid { gap: 0.75rem; }
}

/* --------------------------------------------------------------------------
   Reduced motion. The global guard zeroes durations/delays; this pins the
   keyframed pieces to their END state (the bar's own scaleX, not `none`)
   and stops the one loop outright.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .mcv-live-dot::after { animation: none !important; opacity: 0 !important; }
  .mcv-bar > span, .mcv-dist-bar > span, .mcv-grid > li, .mcv-new-track > li,
  .mcv-entry::after, .mcv-flip, .mcv-delta, .mcv-facet, .mcv-topbar,
  .mcv-hero, .mcv-hero-num, .mcv-mini > div, .mcv-panel, .mcv-new, .mcv-detail, .mcv-kpi { animation: none !important; }
  .mcv-card:hover, .mcv-new-item:hover { transform: none; }
}


/* ==========================================================================
   Servers v2 (/servers) - "sv-" block.
   --------------------------------------------------------------------------
   Appended as its own block, same contract as Home v2 / ASN v2 / Minecraft v2:
     - Own prefix. Nothing above is edited. The old .server-card /
       .filters-drawer / .filter-bar rules stay for the pages that still use
       them (/nerzen-guard, /favoriler); /servers no longer renders them.
     - Only transform / opacity animate (colour / filter on hover states).
       Width changes exactly once a minute (live refresh), un-transitioned.
     - Entrances use `backwards` fill. Scroll reveals sit on the .sv-item
       WRAPPER, never on .sv-card, so the card's hover transform is never
       frozen by a `both` fill.
     - Exactly ONE infinite animation: .sv-dot::after (the live dot). It stops
       when data is stale and is killed outright under reduced motion. The
       hero atmosphere is static on purpose - .hero's two aurora loops are
       NOT reused here.
     - Bars = static inline width + the shared bar-fill sweep. Never
       scaleX(var()) + bar-fill (bar-fill ends at scaleX(1): overshoot + snap).
     - No text-transform: uppercase anywhere: with <html lang="tr"> an
       uppercased "i" becomes a dotted capital I. Labels are sentence case.
     - Every text colour that carries meaning is a light/dark token pair.
   ========================================================================== */

:root {
  --sv-max: 1240px;
  --sv-rail: 300px;
  --sv-cols: 1;
  --sv-gap: 1rem;
  --sv-top: 4.5rem;                 /* sticky offset: clears the 4rem .site-header */
  --sv-up: #166534;                 /* 7.1:1 on #fff, 5.7:1 on its 14% chip tint (#15803d was 4.1:1 there) */
  --sv-down: #b91c1c;               /* 6.5:1 on #fff */
  --sv-live: #16a34a;               /* dot fill only, never text */
  --sv-full: #92400e;               /* "Dolu" text: 7.1:1 on #fff, 6.2:1 on its chip tint */
  --sv-full-line: #f59e0b;          /* bar fill only */
  --sv-star: #c2410c;               /* active favourite, 5.2:1 on #fff (was #f5b800, 1.9:1) */
}
:root.dark {
  --sv-up: #4ade80;
  --sv-down: #ff6568;
  --sv-live: #22c55e;
  --sv-full: #fbbf24;
  --sv-star: #fbbf24;
}

.sv-page [hidden] { display: none !important; }
.sv-sr {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
body.sv-lock { overflow: hidden; }

.sv-page {
  width: 100%; max-width: var(--sv-max); margin: 0 auto;
  padding: 0 1.5rem 3rem;
}
.sv-page > * { min-width: 0; }

/* Shared material - same surface as .hm-card / .mcv-surface. */
.sv-pulse, .sv-card, .sv-rail, .sv-empty {
  border-radius: var(--radius);
  background-color: var(--card);
  background-image: var(--nz-card-wash);
  box-shadow: inset 0 1px 0 0 var(--nz-hairline), 0 0 0 1px var(--border), var(--nz-elev-1);
}

/* Direction / state chip. The glyph carries direction too, never colour alone. */
.sv-chip {
  display: inline-flex; align-items: center; gap: 0.2rem; white-space: nowrap;
  padding: 0.14rem 0.5rem; border-radius: 999px;
  font-size: 0.7rem; font-weight: 650; font-variant-numeric: tabular-nums;
}
.sv-chip.up    { color: var(--sv-up);   background: color-mix(in srgb, var(--sv-up) 14%, transparent); }
.sv-chip.down  { color: var(--sv-down); background: color-mix(in srgb, var(--sv-down) 12%, transparent); }
.sv-chip.flat  { color: var(--muted-foreground); background: var(--accent); }
.sv-chip.full  { color: var(--sv-full); background: color-mix(in srgb, var(--sv-full-line) 16%, transparent); }
.sv-chip.boost { color: var(--nz-accent-text); background: color-mix(in srgb, var(--chart-1) 12%, transparent); }

@keyframes sv-flip { from { opacity: 0; transform: translateY(-4px); } }

/* --------------------------------------------------------------------------
   Hero: title + search | live pulse
   -------------------------------------------------------------------------- */
.sv-hero {
  /* z-index 12 > the sticky toolbar (11): the suggestion list hangs out of
     the hero over the toolbar. isolation keeps ::before (z -1) inside it. */
  position: relative; z-index: 12; isolation: isolate;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem;
  padding: 2rem 0 1.25rem;
}
/* Static atmosphere - a bloom and a faint telemetry grid, no loop. */
.sv-hero::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  inset: -1.5rem -12% 0;
  background:
    radial-gradient(42% 70% at 12% 10%, var(--nz-mesh-1), transparent 70%),
    radial-gradient(34% 60% at 88% 0%, var(--nz-mesh-2), transparent 70%),
    linear-gradient(var(--nz-grid-line) 1px, transparent 1px) 0 0 / 44px 44px,
    linear-gradient(90deg, var(--nz-grid-line) 1px, transparent 1px) 0 0 / 44px 44px;
  -webkit-mask-image: radial-gradient(70% 90% at 30% 0%, #000 25%, transparent 78%);
          mask-image: radial-gradient(70% 90% at 30% 0%, #000 25%, transparent 78%);
  opacity: 0.55;
}
.sv-hero-copy { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.sv-hero-copy > * { animation: rise-in 0.5s var(--ease-out) backwards; }
.sv-hero-copy > :nth-child(2) { animation-delay: 0.05s; }
.sv-hero-copy > :nth-child(3) { animation-delay: 0.1s; }
.sv-hero-copy > :nth-child(4) { animation-delay: 0.15s; }
.sv-hero-copy > :nth-child(5) { animation-delay: 0.2s; }

.sv-live {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.28rem 0.7rem; border-radius: 999px;
  font-size: 0.74rem; font-weight: 600; font-variant-numeric: tabular-nums;
  color: var(--foreground);
  background: color-mix(in srgb, var(--card) 62%, transparent);
  box-shadow: inset 0 1px 0 0 var(--nz-hairline), 0 0 0 1px color-mix(in srgb, var(--chart-1) 22%, var(--border));
}
.sv-live-sep { opacity: 0.5; }
.sv-dot {
  position: relative; flex-shrink: 0; width: 8px; height: 8px; border-radius: 999px;
  background: var(--sv-live);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sv-live) 22%, transparent);
}
/* The page's ONE loop: compositor-only, 8px, and it means "data is live". */
.sv-dot::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: var(--sv-live);
  animation: pulse-ring 2.4s var(--ease-out) infinite;
}
.sv-live.is-stale .sv-dot { background: var(--muted-foreground); box-shadow: 0 0 0 3px color-mix(in srgb, var(--muted-foreground) 20%, transparent); }
.sv-live.is-stale .sv-dot::after { animation: none; opacity: 0; }

.sv-hero h1 {
  margin: 0.85rem 0 0.55rem;
  font-size: clamp(1.9rem, 1.35rem + 1.9vw, 2.9rem); font-weight: 800;
  line-height: 1.08; letter-spacing: -0.035em; text-wrap: balance;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  /* background-image, never the shorthand (it resets background-clip). */
  .sv-h1-accent {
    background-image: linear-gradient(120deg, var(--chart-3), var(--nz-accent-2) 55%, var(--nz-accent-3));
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  }
}
.sv-lead { margin: 0 0 1.1rem; max-width: 40rem; font-size: 0.98rem; line-height: 1.6; color: var(--muted-foreground); text-wrap: pretty; }
.sv-lead strong { color: var(--foreground); font-weight: 650; font-variant-numeric: tabular-nums; }
.sv-hint { margin: 0.55rem 0 0 1rem; font-size: 0.72rem; color: var(--muted-foreground); }

/* Search pill. The visible focus ring lives on the container. */
.sv-search {
  position: relative; z-index: 12;
  display: flex; align-items: center; gap: 0.5rem;
  width: 100%; max-width: 38rem; margin: 0;
  padding: 0.3rem 0.3rem 0.3rem 1rem; border-radius: 999px;
  background-color: color-mix(in srgb, var(--card) 88%, transparent);
  background-image: var(--nz-card-wash);
  box-shadow: inset 0 1px 0 0 var(--nz-hairline), 0 0 0 1px var(--border), var(--nz-elev-2);
}
.sv-search:focus-within {
  box-shadow:
    inset 0 1px 0 0 var(--nz-hairline),
    0 0 0 1px color-mix(in srgb, var(--chart-1) 60%, var(--border)),
    0 0 0 4px color-mix(in srgb, var(--chart-1) 18%, transparent),
    var(--nz-elev-2);
}
.sv-search-ico { display: inline-flex; color: var(--muted-foreground); flex-shrink: 0; }
.sv-search input[type="search"] {
  flex: 1; min-width: 0; height: 2.6rem; border: 0; background: transparent;
  color: var(--foreground); font: inherit; font-size: 0.98rem;
}
.sv-search input::placeholder { color: var(--muted-foreground); }
.sv-search input:focus, .sv-search input:focus-visible { outline: none; }
.sv-kbd {
  flex-shrink: 0; padding: 0 0.4rem; border-radius: 5px;
  font: 600 0.68rem/1.55 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--muted-foreground); border: 1px solid var(--border); background: var(--card);
  transition: opacity var(--dur-1) ease;
}
.sv-search input:focus ~ .sv-kbd, .sv-search input:not(:placeholder-shown) ~ .sv-kbd { opacity: 0; }
@media (hover: none) { .sv-kbd { display: none; } }
.sv-search .btn { flex-shrink: 0; height: 2.45rem; padding: 0 1.2rem; border-radius: 999px; }

/* Suggestions. Built with DOM methods only (names are untrusted). */
.sv-suggest {
  position: absolute; top: calc(100% + 0.45rem); left: 0; right: 0;
  margin: 0; padding: 0.35rem; list-style: none;
  max-height: min(24rem, 60vh); overflow-y: auto; overscroll-behavior: contain;
  border-radius: calc(var(--radius) - 2px);
  background: color-mix(in srgb, var(--card) 94%, transparent);
  -webkit-backdrop-filter: blur(12px) saturate(150%); backdrop-filter: blur(12px) saturate(150%);
  box-shadow: inset 0 1px 0 0 var(--nz-hairline), 0 0 0 1px var(--border), var(--nz-elev-3);
  scrollbar-width: thin;
  animation: pop-in 0.2s var(--ease-out) backwards;
}
.sv-sg-item {
  display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 0.6rem;
  padding: 0.45rem 0.55rem; border-radius: calc(var(--radius) - 7px);
  color: var(--foreground); text-decoration: none;
  transition: background-color var(--dur-1) ease;
}
.sv-sg-item img, .sv-sg-fb { width: 28px; height: 28px; border-radius: 7px; object-fit: cover; background: var(--muted); }
.sv-sg-fb { display: block; background: linear-gradient(135deg, color-mix(in srgb, var(--chart-1) 28%, var(--muted)), var(--muted)); }
.sv-sg-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.86rem; font-weight: 550; }
.sv-sg-meta { font-size: 0.72rem; color: var(--muted-foreground); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sv-sg-item:hover, .sv-suggest [aria-selected="true"] > .sv-sg-item { background: color-mix(in srgb, var(--accent) 85%, transparent); }
.sv-suggest [aria-selected="true"] > .sv-sg-item { box-shadow: inset 2px 0 0 var(--chart-1); }

/* Live pulse card. No backdrop-filter (nothing behind it moves). */
.sv-pulse {
  position: relative; display: flex; flex-direction: column; gap: 0.6rem; min-width: 0;
  padding: 1.1rem 1.15rem 1rem;
  box-shadow:
    inset 0 1px 0 0 var(--nz-hairline),
    0 0 0 1px color-mix(in srgb, var(--chart-1) 22%, var(--border)),
    var(--nz-elev-2),
    0 26px 52px -34px var(--nz-glow);
  animation: stat-rise 0.55s var(--ease-out) 0.08s backwards;
}
.sv-pulse::before {
  content: ""; position: absolute; top: 0; left: 1.15rem; right: 1.15rem; height: 2px;
  border-radius: 0 0 2px 2px; pointer-events: none; opacity: 0.9;
  background: linear-gradient(90deg, var(--chart-1), var(--nz-accent-2) 50%, var(--nz-accent-3));
}
.sv-pulse-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.4rem 0.75rem; }
.sv-eyebrow { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.74rem; font-weight: 600; color: var(--muted-foreground); }
.sv-eyebrow svg { color: var(--nz-accent-text); }
.sv-pulse-fig { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.2rem 0.6rem; }
.sv-pulse-num {
  display: inline-block;
  font-size: clamp(2.2rem, 1.7rem + 1.6vw, 3rem); font-weight: 780; line-height: 1;
  letter-spacing: -0.04em; font-variant-numeric: tabular-nums;
  color: var(--nz-accent-text);
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .sv-pulse-num {
    background-image: linear-gradient(135deg, var(--chart-1), var(--nz-accent-2));
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  }
  :root.dark .sv-pulse-num { background-image: linear-gradient(135deg, var(--chart-3), var(--nz-accent-2)); }
}
.sv-pulse-unit { font-size: 0.85rem; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.sv-pulse-unit b { color: var(--foreground); font-weight: 600; }

.sv-split { display: flex; gap: 2px; height: 6px; border-radius: 999px; overflow: hidden; background: var(--muted); }
.sv-split > span { display: block; height: 100%; transform-origin: left center; animation: bar-fill 0.7s var(--ease-out) 0.35s backwards; }
.sv-split > .is-gta { background: linear-gradient(90deg, var(--chart-1), var(--chart-3)); }
.sv-split > .is-rdr { background: var(--nz-accent-2); animation-delay: 0.5s; }
.sv-split-legend { display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; font-size: 0.74rem; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.sv-split-legend b { color: var(--foreground); font-weight: 600; }
.sv-split-legend i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 0.35rem; }
.sv-split-legend i.is-gta { background: var(--chart-3); }
.sv-split-legend i.is-rdr { background: var(--nz-accent-2); }

.sv-pulse-spark {
  margin-top: 0.2rem; padding-top: 0.65rem;
  border-top: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
  animation: fade-in 0.5s ease-out 0.45s backwards;
}
.sv-pulse-spark svg { display: block; width: 100%; height: 38px; overflow: visible; color: var(--chart-3); }
.sv-pulse-spark path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.sv-pulse-cap { display: block; margin-top: 0.35rem; font-size: 0.7rem; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.sv-pulse-cap b { color: var(--foreground); font-weight: 600; }

/* --------------------------------------------------------------------------
   Quick region row (only while the rail is a drawer, i.e. < 1440px)
   -------------------------------------------------------------------------- */
.sv-quick { margin: 0.25rem 0 0.9rem; }
.sv-quick-track {
  display: flex; gap: 0.45rem; margin: 0; padding: 0.15rem 1.75rem 0.35rem 0.1rem; list-style: none;
  overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 2.25rem), transparent);
          mask-image: linear-gradient(90deg, #000 calc(100% - 2.25rem), transparent);
}
.sv-quick-track::-webkit-scrollbar { display: none; }
.sv-quick-track > li { flex-shrink: 0; animation: rise-in-sm 0.3s var(--ease-out) backwards; animation-delay: calc(0.12s + min(var(--i, 0), 8) * 0.03s); }
.sv-qchip {
  display: inline-flex; align-items: center; gap: 0.4rem; white-space: nowrap;
  min-height: 2.25rem; padding: 0.3rem 0.8rem; border-radius: 999px;
  font-size: 0.8rem; font-weight: 550; color: var(--foreground); text-decoration: none;
  background-color: var(--card);
  background-image: linear-gradient(180deg, var(--nz-hairline), transparent);
  box-shadow: inset 0 0 0 1px var(--border);
  transition: transform var(--dur-1) var(--ease-out), color var(--dur-1) ease;
}
.sv-qchip small { font-size: 0.68rem; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.sv-qchip svg { color: var(--nz-accent-text); }
.sv-qchip:hover { transform: translateY(-1px); color: var(--nz-accent-text); }
.sv-qchip:active { transform: scale(0.96); }
.sv-qchip.is-on {
  color: #fff; background-image: linear-gradient(135deg, var(--chart-1), var(--nz-btn-2));
  box-shadow: inset 0 1px 0 0 rgb(255 255 255 / 0.2), 0 6px 16px -8px var(--nz-glow);
}
.sv-qchip.is-on small, .sv-qchip.is-on svg { color: rgb(255 255 255 / 0.85); }
.sv-flag { width: 16px; height: 16px; border-radius: 999px; object-fit: cover; flex-shrink: 0; display: inline-block; }
.sv-flag-fb { background: var(--muted); }

/* --------------------------------------------------------------------------
   Toolbar
   -------------------------------------------------------------------------- */
.sv-toolbar {
  position: relative; z-index: 11;
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.55rem;
  padding: 0.5rem 0.55rem; border-radius: var(--radius);
  background: color-mix(in srgb, var(--card) 86%, transparent);
  -webkit-backdrop-filter: blur(12px) saturate(150%); backdrop-filter: blur(12px) saturate(150%);
  box-shadow: inset 0 1px 0 0 var(--nz-hairline), 0 0 0 1px var(--border), var(--nz-elev-1);
  animation: fade-in var(--dur-3) ease 0.1s backwards;
}
.sv-tool {
  display: inline-flex; align-items: center; gap: 0.4rem; flex-shrink: 0;
  height: 2.2rem; padding: 0 0.8rem; border-radius: 999px; cursor: pointer;
  border: 0; background: transparent; color: var(--foreground);
  font: inherit; font-size: 0.8rem; font-weight: 600; text-decoration: none; white-space: nowrap;
  box-shadow: inset 0 0 0 1px var(--border);
  transition: color var(--dur-1) ease, background-color var(--dur-1) ease, transform var(--dur-1) var(--ease-out);
}
.sv-tool:hover { background: var(--accent); }
.sv-tool:active { transform: scale(0.96); }
.sv-tool svg { color: var(--nz-accent-text); }
.sv-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.2rem; height: 1.2rem; padding: 0 0.3rem; border-radius: 999px;
  font-size: 0.66rem; font-weight: 700; color: #fff;
  background-image: linear-gradient(135deg, var(--chart-1), var(--nz-btn-2));
}
.sv-guard.is-on {
  color: #fff; box-shadow: inset 0 1px 0 0 rgb(255 255 255 / 0.2), 0 6px 16px -8px var(--nz-glow);
  background-image: linear-gradient(135deg, var(--chart-1), var(--nz-btn-2));
}
.sv-guard.is-on svg { color: #fff; }

.sv-seg {
  display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; flex-shrink: 0;
  background: var(--accent); box-shadow: inset 0 0 0 1px var(--border);
  overflow-x: auto; scrollbar-width: none; max-width: 100%;
}
.sv-seg::-webkit-scrollbar { display: none; }
.sv-seg-item {
  flex-shrink: 0; padding: 0.34rem 0.8rem; border-radius: 999px;
  font-size: 0.78rem; font-weight: 600; color: var(--muted-foreground); text-decoration: none; white-space: nowrap;
  transition: color var(--dur-1) ease, background-color var(--dur-1) ease;
}
.sv-seg-item:hover { color: var(--foreground); }
.sv-seg-item[aria-current="true"] {
  color: var(--foreground); background: var(--card);
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.18), inset 0 0 0 1px var(--border);
}

.sv-select {
  position: relative; display: inline-flex; align-items: center; gap: 0.45rem; margin-left: auto; flex-shrink: 0;
  font-size: 0.76rem; color: var(--muted-foreground);
}
.sv-select select {
  appearance: none; -webkit-appearance: none;
  height: 2.2rem; padding: 0 2rem 0 0.85rem; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border); background: var(--card); color: var(--foreground);
  font: inherit; font-size: 0.8rem; font-weight: 600;
  transition: border-color var(--dur-1) ease;
}
.sv-select select:hover { border-color: color-mix(in srgb, var(--chart-1) 45%, var(--border)); }
.sv-select select:focus-visible { outline: 2px solid var(--chart-1); outline-offset: 2px; }
.sv-select-chev { position: absolute; right: 0.7rem; pointer-events: none; display: inline-flex; color: var(--muted-foreground); }

.sv-view { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--accent); box-shadow: inset 0 0 0 1px var(--border); flex-shrink: 0; }
.sv-view-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 1.75rem; border: 0; border-radius: 999px; cursor: pointer;
  background: transparent; color: var(--muted-foreground);
  transition: color var(--dur-1) ease, background-color var(--dur-1) ease;
}
.sv-view-btn:hover { color: var(--foreground); }
.sv-view-btn[aria-pressed="true"] { color: var(--foreground); background: var(--card); box-shadow: 0 1px 3px rgb(0 0 0 / 0.18), inset 0 0 0 1px var(--border); }

/* Active filter chips */
.sv-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin: 0.75rem 0 0; padding: 0; list-style: none; }
.sv-chips > li { animation: rise-in-sm 0.28s var(--ease-out) backwards; }
.sv-chips > li:nth-child(2) { animation-delay: 0.04s; }
.sv-chips > li:nth-child(3) { animation-delay: 0.08s; }
.sv-chips > li:nth-child(n+4) { animation-delay: 0.12s; }
.sv-fchip {
  display: inline-flex; align-items: center; gap: 0.35rem; max-width: 22rem;
  padding: 0.22rem 0.25rem 0.22rem 0.7rem; border-radius: 999px;
  font-size: 0.78rem; font-weight: 550; color: var(--foreground);
  background-color: var(--accent);
  background-image: linear-gradient(180deg, var(--nz-hairline), transparent);
  box-shadow: inset 0 0 0 1px var(--border);
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.sv-fchip svg { color: var(--nz-accent-text); flex-shrink: 0; }
.sv-fchip.is-inc { color: var(--sv-up);   box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sv-up) 40%, var(--border)); }
.sv-fchip.is-exc { color: var(--sv-down); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sv-down) 40%, var(--border)); }
.sv-fchip-x {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 1.45rem; height: 1.45rem; border-radius: 999px;
  color: var(--muted-foreground); font-size: 1rem; line-height: 1; text-decoration: none;
  transition: background-color var(--dur-1) ease, color var(--dur-1) ease, transform var(--dur-2) var(--ease-out);
}
.sv-fchip-x:hover { background: var(--border); color: var(--foreground); transform: rotate(90deg); }
.sv-clear { font-size: 0.78rem; font-weight: 600; color: var(--nz-accent-text); padding: 0.25rem 0.4rem; border-radius: 6px; }
.sv-clear:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   Layout: [rail | results]. The rail is FIRST in the DOM (filters before
   results in keyboard / screen-reader order).
   -------------------------------------------------------------------------- */
.sv-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; margin-top: 1.1rem; align-items: start; }
.sv-layout > * { min-width: 0; }

/* Rail = off-canvas drawer below 1440px. visibility (a discrete toggle, not
   an animation) takes the closed drawer out of the tab order. */
.sv-rail {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 41;
  width: min(380px, 92vw); border-radius: 0;
  display: flex; flex-direction: column;
  box-shadow: -14px 0 40px rgb(0 0 0 / 0.3), inset 1px 0 0 var(--border);
  transform: translateX(100%); visibility: hidden;
  transition: transform 0.34s var(--ease-soft), visibility 0s linear 0.34s;
}
.sv-rail.is-open { transform: none; visibility: visible; transition: transform 0.34s var(--ease-soft), visibility 0s linear 0s; }
.sv-overlay {
  position: fixed; inset: 0; z-index: 40; pointer-events: none; opacity: 0;
  background: rgb(0 0 0 / 0.5);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  transition: opacity var(--dur-3) ease;
}
.sv-overlay.is-open { opacity: 1; pointer-events: auto; }

.sv-rail-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem;
  padding: 1.1rem 1.1rem 0.85rem; border-bottom: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
}
.sv-rail-head h2 { margin: 0; font-size: 1rem; letter-spacing: -0.012em; }
.sv-rail-head p { margin: 0.15rem 0 0; font-size: 0.74rem; color: var(--muted-foreground); }
.sv-rail-close {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 2.25rem; height: 2.25rem; border: 0; border-radius: 999px; cursor: pointer;
  background: transparent; color: var(--muted-foreground);
  transition: background-color var(--dur-1) ease, color var(--dur-1) ease, transform var(--dur-2) var(--ease-out);
}
.sv-rail-close:hover { background: var(--accent); color: var(--foreground); transform: rotate(90deg); }
.sv-rail-body {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: 0.9rem 1.1rem 1rem; display: grid; gap: 1.1rem; align-content: start;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--muted-foreground) 40%, transparent) transparent;
}
.sv-rail-foot { display: flex; gap: 0.6rem; padding: 0.8rem 1.1rem; border-top: 1px solid color-mix(in srgb, var(--border) 75%, transparent); }
.sv-rail-foot .btn { flex: 1; border-radius: 999px; }

.sv-facet { display: grid; gap: 0.5rem; min-width: 0; }
.sv-facet + .sv-facet { padding-top: 1.1rem; border-top: 1px solid color-mix(in srgb, var(--border) 70%, transparent); }
.sv-facet h3 { display: flex; align-items: center; gap: 0.4rem; margin: 0; font-size: 0.8rem; font-weight: 650; }
.sv-facet h3 svg { color: var(--nz-accent-text); }
.sv-facet-row { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; }
.sv-facet-note { margin: 0; font-size: 0.68rem; color: var(--muted-foreground); }
.sv-legend { display: inline-flex; gap: 0.6rem; font-size: 0.68rem; font-weight: 600; }
.sv-legend .is-inc { color: var(--sv-up); }
.sv-legend .is-exc { color: var(--sv-down); }
.sv-facet-search {
  width: 100%; height: 2.1rem; padding: 0 0.85rem; border-radius: 999px;
  border: 1px solid var(--border); background: var(--background); color: var(--foreground);
  font: inherit; font-size: 0.8rem;
}
.sv-facet-search:focus-visible { outline: 2px solid var(--chart-1); outline-offset: 1px; }

.sv-pills {
  position: relative;               /* offsetParent for revealPressed() */
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; margin: 0; padding: 0; list-style: none;
  max-height: 13.5rem; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--muted-foreground) 40%, transparent) transparent;
}
.sv-pill {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  min-height: 2.1rem; padding: 0.3rem 0.65rem; border: 0; border-radius: 999px; cursor: pointer;
  background: transparent; color: var(--foreground); font: inherit; font-size: 0.82rem; text-align: left;
  transition: background-color var(--dur-1) ease, color var(--dur-1) ease;
}
.sv-pill:hover { background: var(--accent); }
.sv-pill:focus-visible { outline: 2px solid var(--chart-1); outline-offset: -2px; }
.sv-pill-label { display: flex; align-items: center; gap: 0.5rem; min-width: 0; overflow: hidden; }
/* text-overflow does nothing on a flex container's anonymous text - the
   ellipsis needs its own inline box. */
.sv-pill-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sv-pill-label svg { color: var(--nz-accent-text); flex-shrink: 0; }
.sv-asn-no { font-variant-numeric: tabular-nums; font-weight: 600; }
.sv-pill-count { flex-shrink: 0; font-size: 0.72rem; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.sv-pill[aria-pressed="true"] {
  color: #fff; font-weight: 600;
  background-image: linear-gradient(135deg, var(--chart-1), var(--nz-btn-2));
  box-shadow: inset 0 1px 0 0 rgb(255 255 255 / 0.2);
}
.sv-pill[aria-pressed="true"] .sv-pill-count,
.sv-pill[aria-pressed="true"] svg { color: rgb(255 255 255 / 0.85); }

.sv-tagcloud { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.sv-tagtog {
  display: inline-flex; align-items: center; gap: 0.25rem;
  min-height: 1.95rem; padding: 0.2rem 0.65rem; border: 0; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 0.76rem; font-weight: 550; color: var(--foreground);
  background: var(--accent); box-shadow: inset 0 0 0 1px var(--border);
  transition: color var(--dur-1) ease, background-color var(--dur-1) ease, transform var(--dur-1) var(--ease-out);
}
.sv-tagtog:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--chart-1) 45%, var(--border)); }
.sv-tagtog:active { transform: scale(0.95); }
.sv-tagtog small { font-size: 0.66rem; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.sv-tagtog-mark { font-weight: 800; }
.sv-tagtog-mark:empty { display: none; }
.sv-tagtog[data-state="include"] {
  color: var(--sv-up); background: color-mix(in srgb, var(--sv-up) 13%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sv-up) 50%, transparent);
}
.sv-tagtog[data-state="exclude"] {
  color: var(--sv-down); background: color-mix(in srgb, var(--sv-down) 11%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sv-down) 45%, transparent);
  text-decoration: line-through;
}
.sv-tagtog[data-state="include"] small, .sv-tagtog[data-state="exclude"] small { color: inherit; opacity: 0.8; }

.sv-facet-switch { display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-size: 0.82rem; }
.sv-switch {
  position: relative; flex-shrink: 0; width: 2.4rem; height: 1.4rem; padding: 0;
  border: 0; border-radius: 999px; cursor: pointer;
  background: var(--muted); box-shadow: inset 0 0 0 1px var(--border);
  transition: background-color var(--dur-2) ease;
}
.sv-switch-thumb {
  position: absolute; top: 0.15rem; left: 0.15rem; width: 1.1rem; height: 1.1rem; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / 0.35);
  transition: transform var(--dur-2) var(--ease-out);
}
.sv-switch[aria-checked="true"] { background: linear-gradient(135deg, var(--chart-1), var(--nz-btn-2)); box-shadow: none; }
.sv-switch[aria-checked="true"] .sv-switch-thumb { transform: translateX(1rem); }
.sv-switch:focus-visible { outline: 2px solid var(--chart-1); outline-offset: 2px; }

/* --------------------------------------------------------------------------
   Results header
   -------------------------------------------------------------------------- */
.sv-resbar { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 0.35rem 1rem; margin: 0 0 0.8rem; }
.sv-res-title { margin: 0; font-size: 0.95rem; font-weight: 500; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.sv-res-title > b { font-size: 1.15rem; font-weight: 750; color: var(--foreground); letter-spacing: -0.02em; }
.sv-res-meta { display: inline-flex; flex-wrap: wrap; gap: 0.1rem 0; margin-left: 0.25rem; font-size: 0.8rem; }
.sv-res-meta > span::before { content: "\00B7"; margin: 0 0.45rem; opacity: 0.6; }
.sv-res-meta b { color: var(--foreground); font-weight: 650; }
.sv-res-page { font-size: 0.76rem; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.sv-res-page b { color: var(--foreground); }

/* --------------------------------------------------------------------------
   Grid + card. One DOM, two layouts: html[data-sv-view="list"] re-maps the
   same grid areas into a dense row.
   -------------------------------------------------------------------------- */
.sv-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(var(--sv-cols), minmax(0, 1fr)); gap: var(--sv-gap);
  transition: opacity var(--dur-1) ease;
}
.sv-grid.is-switching { opacity: 0.35; }
.sv-item {
  min-width: 0; display: flex;
  animation: rise-in-sm 0.34s var(--ease-out) backwards;
  animation-delay: calc(0.12s + min(var(--i, 0), 12) * 0.03s);
}

.sv-card {
  position: relative; isolation: isolate; flex: 1; min-width: 0;
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr) auto;
  grid-template-rows: auto auto auto auto 1fr;
  grid-template-areas:
    "ico   id    acts"
    "num   num   trend"
    "spark spark spark"
    "fill  fill  fill"
    "tags  tags  tags";
  column-gap: 0.8rem; row-gap: 0.55rem;
  padding: 1rem 1rem 0.95rem;
  transition: transform var(--dur-2) var(--ease-out), opacity var(--dur-2) ease;
}
/* Hover ring + interior light: ONE layer faded with opacity, painted under
   the content (isolation + z-index:-1). box-shadow never animates. */
.sv-card::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background:
    radial-gradient(70% 55% at 10% 0%, color-mix(in srgb, var(--chart-1) 11%, transparent), transparent 70%),
    radial-gradient(60% 50% at 100% 100%, color-mix(in srgb, var(--nz-accent-2) 9%, transparent), transparent 70%);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--chart-1) 45%, var(--border)),
    var(--nz-elev-3),
    0 20px 44px -26px var(--nz-glow);
  opacity: 0; transition: opacity var(--dur-2) ease;
}
.sv-card:hover { transform: translateY(-3px); }
.sv-card:hover::before, .sv-card:focus-within::before { opacity: 1; }
.sv-card:active { transform: translateY(-1px) scale(0.995); }
.sv-card.is-empty { opacity: 0.78; }
.sv-card.is-off { opacity: 0.56; }
.sv-card.is-empty:hover, .sv-card.is-off:hover, .sv-card:focus-within { opacity: 1; }

/* Stretched link: the whole card opens /view/:id, while the tag links and
   the favourite / compare buttons (z-index 2) stay independently clickable -
   no nested interactive content, and the link's name is just the server name. */
.sv-link { color: inherit; text-decoration: none; }
.sv-link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.sv-link:focus-visible { outline: none; }
.sv-link:focus-visible::after { outline: 2px solid var(--chart-1); outline-offset: 3px; }

.sv-ico { grid-area: ico; position: relative; width: 3rem; height: 3rem; align-self: center; }
.sv-ico img, .sv-ico-fb {
  display: block; width: 100%; height: 100%; border-radius: 12px; object-fit: cover;
  background: var(--muted); box-shadow: 0 0 0 1px var(--border);
  transition: transform var(--dur-3) var(--ease-out), filter var(--dur-2) ease;
}
.sv-ico-fb {
  background:
    radial-gradient(60% 60% at 30% 25%, color-mix(in srgb, var(--nz-accent-3) 35%, transparent), transparent 70%),
    linear-gradient(135deg, color-mix(in srgb, var(--chart-1) 38%, var(--muted)), color-mix(in srgb, var(--nz-accent-2) 22%, var(--muted)));
}
.sv-card:hover .sv-ico img, .sv-card:hover .sv-ico-fb { transform: scale(1.06); filter: drop-shadow(0 4px 9px var(--nz-glow)); }
.sv-rank {
  position: absolute; left: -0.4rem; bottom: -0.35rem; z-index: 1;
  min-width: 1.45rem; height: 1.2rem; padding: 0 0.3rem; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.64rem; font-weight: 750; font-variant-numeric: tabular-nums;
  color: var(--muted-foreground); background: var(--card);
  box-shadow: 0 0 0 1px var(--border), 0 2px 6px rgb(0 0 0 / 0.2);
}
/* Weight, not medals - telemetry, same call /asn and / made. */
.sv-rank.is-top { color: var(--nz-accent-text); box-shadow: 0 0 0 1px color-mix(in srgb, var(--chart-1) 40%, var(--border)), 0 2px 6px rgb(0 0 0 / 0.2); }
.sv-rank.is-first { color: #fff; background-image: linear-gradient(135deg, var(--chart-1), var(--nz-btn-2)); box-shadow: 0 4px 12px -4px var(--nz-glow); }

.sv-id { grid-area: id; min-width: 0; align-self: center; }
/* Two lines in card view (FiveM names are long; one line cut most of them
   to "FAM 2.0 @RE..."), one line in list view. */
.sv-name {
  margin: 0; font-size: 0.95rem; font-weight: 650; line-height: 1.3; letter-spacing: -0.01em;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
  overflow: hidden; overflow-wrap: anywhere;
  transition: color var(--dur-1) ease;
}
[data-sv-view="list"] .sv-name { display: block; white-space: nowrap; text-overflow: ellipsis; }
.sv-card:hover .sv-name { color: var(--nz-accent-text); }
.sv-sub {
  display: flex; align-items: center; gap: 0.35rem; min-width: 0; margin: 0.2rem 0 0;
  font-size: 0.72rem; color: var(--muted-foreground); white-space: nowrap; overflow: hidden;
}
.sv-sub .sv-flag { width: 14px; height: 14px; }
.sv-dotsep { opacity: 0.6; }
.sv-asn { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* Hosting line, separate from the region/game row so it is never cut off.
   The short provider name gets the room; the AS number is secondary and is
   the first thing dropped if a very long name still needs the space. */
.sv-host {
  display: flex; align-items: center; gap: 0.3rem; min-width: 0; margin: 0.25rem 0 0;
  font-size: 0.72rem; color: var(--muted-foreground); white-space: nowrap;
}
.sv-host > svg { flex-shrink: 0; opacity: 0.8; }
.sv-host .sv-asn { color: var(--foreground); font-weight: 550; flex: 0 1 auto; }
.sv-asn-num { flex: 0 100 auto; min-width: 0; overflow: hidden; text-overflow: clip; opacity: 0.7; font-variant-numeric: tabular-nums; }
.sv-host .sv-guard-chip { margin-left: 0; }
.sv-guard-chip {
  display: inline-flex; align-items: center; gap: 0.25rem; flex-shrink: 0; margin-left: 0.15rem;
  padding: 0.03rem 0.45rem; border-radius: 999px; font-weight: 650;
  color: var(--nz-accent-text);
  background: linear-gradient(135deg, color-mix(in srgb, var(--chart-1) 15%, transparent), color-mix(in srgb, var(--nz-accent-3) 12%, transparent));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--chart-1) 30%, transparent);
}

.sv-acts { grid-area: acts; align-self: start; display: flex; gap: 0.3rem; margin: -0.2rem -0.25rem 0 0; }
.sv-act,
.sv-acts .fav-star {
  position: relative; z-index: 2; top: auto; right: auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.9rem; height: 1.9rem; border: 0; border-radius: 999px; cursor: pointer;
  background: color-mix(in srgb, var(--accent) 70%, transparent); color: var(--muted-foreground);
  font-size: 0.95rem; line-height: 1; opacity: 0.7;
  transition: opacity var(--dur-1) ease, color var(--dur-1) ease, background-color var(--dur-1) ease, transform var(--dur-1) var(--ease-out);
}
.sv-card:hover .sv-act, .sv-act:focus-visible, .sv-acts .fav-star-active, .sv-cmp[aria-pressed="true"] { opacity: 1; }
.sv-act:hover { color: var(--foreground); transform: scale(1.08); }
.sv-act:active { transform: scale(0.92); }
.sv-acts .fav-star-active, .sv-acts .fav-star-active:hover { color: var(--sv-star); }
.sv-cmp[aria-pressed="true"] { color: #fff; background-image: linear-gradient(135deg, var(--chart-1), var(--nz-btn-2)); }
@media (pointer: coarse) { .sv-act, .sv-acts .fav-star { width: 2.35rem; height: 2.35rem; opacity: 1; } }

.sv-num { grid-area: num; display: flex; align-items: baseline; gap: 0.2rem; min-width: 0; font-variant-numeric: tabular-nums; }
.sv-num b { font-size: 1.5rem; font-weight: 760; line-height: 1.1; letter-spacing: -0.03em; }
.sv-max { font-size: 0.8rem; color: var(--muted-foreground); }
.sv-livedelta {
  align-self: center; margin-left: 0.35rem; padding: 0.05rem 0.4rem; border-radius: 999px;
  font-size: 0.66rem; font-weight: 700;
  animation: sv-flip var(--dur-2) var(--ease-out) backwards;
  transition: opacity 0.6s ease;
}
.sv-livedelta.up   { color: var(--sv-up);   background: color-mix(in srgb, var(--sv-up) 14%, transparent); }
.sv-livedelta.down { color: var(--sv-down); background: color-mix(in srgb, var(--sv-down) 12%, transparent); }
.sv-livedelta.is-fading { opacity: 0; }

.sv-trend { grid-area: trend; justify-self: end; align-self: center; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.3rem; }

.sv-spark { grid-area: spark; display: flex; align-items: center; gap: 0.5rem; min-width: 0; height: 30px; color: var(--chart-3); }
.sv-spark svg {
  flex: 1; min-width: 0; height: 28px; overflow: visible; opacity: 0.85;
  animation: fade-in 0.45s ease-out 0.35s backwards;
  transition: opacity var(--dur-1) ease, filter var(--dur-2) ease;
}
.sv-spark path { fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.sv-card:hover .sv-spark svg { opacity: 1; filter: drop-shadow(0 0 4px color-mix(in srgb, var(--chart-3) 60%, transparent)); }
.sv-spark-cap { flex-shrink: 0; font-size: 0.62rem; color: var(--muted-foreground); }

.sv-fill { grid-area: fill; display: flex; align-items: center; gap: 0.6rem; min-width: 0; }
.sv-bar { flex: 1; min-width: 0; height: 5px; border-radius: 999px; background: var(--muted); overflow: hidden; }
.sv-bar > span {
  display: block; height: 100%; border-radius: inherit;
  background: linear-gradient(90deg, var(--chart-1), color-mix(in srgb, var(--nz-accent-2) 70%, var(--chart-1)));
  transform-origin: left center;
  animation: bar-fill 0.65s var(--ease-out) backwards;
  animation-delay: calc(0.3s + min(var(--i, 0), 12) * 0.03s);
  transition: filter var(--dur-2) ease;
}
.sv-card:hover .sv-bar > span { filter: brightness(1.12) saturate(1.15); }
.sv-card.is-full .sv-bar > span { background: linear-gradient(90deg, color-mix(in srgb, var(--sv-full-line) 70%, var(--chart-1)), var(--sv-full-line)); }
.sv-pct { flex-shrink: 0; min-width: 2.4rem; text-align: right; font-size: 0.7rem; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }

.sv-tags { grid-area: tags; align-self: end; display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0; padding: 0; list-style: none; min-width: 0; }
.sv-tag {
  position: relative; z-index: 2;
  display: inline-flex; max-width: 10rem; padding: 0.12rem 0.55rem; border-radius: 999px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 0.68rem; font-weight: 550; color: var(--muted-foreground); text-decoration: none;
  background-color: var(--accent);
  background-image: linear-gradient(180deg, var(--nz-hairline), transparent);
  box-shadow: inset 0 0 0 1px var(--border);
  transition: color var(--dur-1) ease, background-color var(--dur-1) ease;
}
.sv-tag:hover { color: var(--nz-accent-text); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--chart-1) 45%, var(--border)); }

/* ---- List view ----------------------------------------------------------- */
[data-sv-view="list"] .sv-grid { grid-template-columns: minmax(0, 1fr); gap: 0.4rem; }
[data-sv-view="list"] .sv-card {
  grid-template-columns: 2.5rem minmax(0, 1.6fr) minmax(5rem, 8rem) 7.5rem 6.5rem minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  grid-template-areas:
    "ico id spark num  trend tags acts"
    "ico id spark fill trend tags acts";
  column-gap: 1rem; row-gap: 0.2rem; align-items: center;
  padding: 0.55rem 0.8rem;
}
[data-sv-view="list"] .sv-card:hover { transform: translateY(-1px); }
[data-sv-view="list"] .sv-ico { width: 2.5rem; height: 2.5rem; }
[data-sv-view="list"] .sv-ico img, [data-sv-view="list"] .sv-ico-fb { border-radius: 10px; }
[data-sv-view="list"] .sv-rank { left: -0.35rem; bottom: -0.3rem; height: 1.05rem; font-size: 0.6rem; }
[data-sv-view="list"] .sv-name { font-size: 0.88rem; }
[data-sv-view="list"] .sv-num { justify-content: flex-end; }
[data-sv-view="list"] .sv-num b { font-size: 1rem; }
[data-sv-view="list"] .sv-num { position: relative; }
[data-sv-view="list"] .sv-num .sv-livedelta { position: absolute; right: 0; bottom: 100%; margin: 0 0 0.1rem; }
[data-sv-view="list"] .sv-spark { height: 26px; }
[data-sv-view="list"] .sv-spark-cap, [data-sv-view="list"] .sv-pct { display: none; }
[data-sv-view="list"] .sv-fill { align-self: start; }
[data-sv-view="list"] .sv-bar { height: 4px; }
[data-sv-view="list"] .sv-trend { justify-self: end; }
[data-sv-view="list"] .sv-tags { align-self: center; flex-wrap: nowrap; overflow: hidden; }
[data-sv-view="list"] .sv-acts { align-self: center; margin: 0; }

/* --------------------------------------------------------------------------
   Empty state + pager + compare tray
   -------------------------------------------------------------------------- */
.sv-empty {
  display: flex; flex-direction: column; align-items: center; gap: 0.75rem;
  padding: 3rem 1.25rem; text-align: center; color: var(--muted-foreground); font-size: 0.9rem;
  background-image: radial-gradient(60% 70% at 50% 0%, color-mix(in srgb, var(--chart-1) 7%, transparent), transparent 70%), var(--nz-card-wash);
  animation: rise-in 0.42s var(--ease-out) backwards;
}
.sv-empty p { margin: 0; max-width: 32rem; line-height: 1.6; }
.sv-empty strong { color: var(--foreground); }
.sv-empty-ico {
  display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: 1rem;
  color: var(--nz-accent-text);
  background: linear-gradient(140deg, color-mix(in srgb, var(--chart-1) 16%, transparent), color-mix(in srgb, var(--nz-accent-2) 12%, transparent));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--chart-1) 22%, transparent);
  animation: stat-rise 0.5s var(--ease-out) 0.08s backwards;
}
.sv-empty-acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin-top: 0.25rem; }
.sv-empty-acts .btn { border-radius: 999px; }

.sv-pager {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.45rem;
  margin-top: 2rem; animation: fade-in 0.4s ease-out 0.2s backwards;
}
.sv-pg-list { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; margin: 0; padding: 0; list-style: none; }
.sv-pg {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.3rem;
  min-width: 2.3rem; height: 2.3rem; padding: 0 0.7rem; border-radius: 999px; border: 0; cursor: pointer;
  font: inherit; font-size: 0.82rem; font-weight: 600; font-variant-numeric: tabular-nums;
  color: var(--foreground); text-decoration: none; background: var(--card);
  box-shadow: inset 0 0 0 1px var(--border);
  transition: background-color var(--dur-1) ease, color var(--dur-1) ease, transform var(--dur-1) var(--ease-out);
}
a.sv-pg:hover, button.sv-pg:hover { background: var(--accent); color: var(--nz-accent-text); }
a.sv-pg:active, button.sv-pg:active { transform: scale(0.95); }
.sv-pg.is-cur {
  color: #fff; background-image: linear-gradient(135deg, var(--chart-1), var(--nz-btn-2));
  box-shadow: inset 0 1px 0 0 rgb(255 255 255 / 0.2), 0 6px 16px -8px var(--nz-glow);
}
.sv-pg.is-off { opacity: 0.4; cursor: default; }
.sv-pg-gap { padding: 0 0.2rem; color: var(--muted-foreground); }
.sv-jump { display: inline-flex; align-items: center; gap: 0.35rem; margin: 0 0 0 0.4rem; font-size: 0.78rem; color: var(--muted-foreground); }
.sv-jump input {
  width: 4.4rem; height: 2.3rem; padding: 0 0.7rem; border-radius: 999px;
  border: 1px solid var(--border); background: var(--card); color: var(--foreground); font: inherit; font-size: 0.82rem;
}
.sv-jump input:focus-visible { outline: 2px solid var(--chart-1); outline-offset: 1px; }

.sv-tray {
  position: fixed; left: 50%; bottom: 1rem; z-index: 30;
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.5rem 0.55rem 0.5rem 1rem; border-radius: 999px;
  font-size: 0.84rem; white-space: nowrap;
  background: color-mix(in srgb, var(--card) 88%, transparent);
  -webkit-backdrop-filter: blur(12px) saturate(150%); backdrop-filter: blur(12px) saturate(150%);
  box-shadow: inset 0 1px 0 0 var(--nz-hairline), 0 0 0 1px color-mix(in srgb, var(--chart-1) 30%, var(--border)), var(--nz-elev-3);
  opacity: 0; transform: translate(-50%, 16px);
  transition: opacity var(--dur-2) ease, transform var(--dur-3) var(--ease-out);
}
.sv-tray.is-open { opacity: 1; transform: translate(-50%, 0); }
.sv-tray-count b { font-variant-numeric: tabular-nums; }
.sv-tray-note { font-size: 0.74rem; color: var(--sv-down); }
.sv-tray-note:empty { display: none; }
.sv-tray-clear {
  border: 0; background: transparent; cursor: pointer; padding: 0.3rem 0.5rem; border-radius: 999px;
  font: inherit; font-size: 0.78rem; font-weight: 600; color: var(--muted-foreground);
}
.sv-tray-clear:hover { color: var(--foreground); background: var(--accent); }
.sv-tray .btn { border-radius: 999px; }

/* --------------------------------------------------------------------------
   Scroll reveal for cards past the first two rows. Additive only: without
   scroll timelines, or with reduced motion, none of this exists.
   -------------------------------------------------------------------------- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .sv-grid > .sv-item:nth-child(n + 7) {
      animation: rise-in-sm linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 45%;
    }
  }
}

/* --------------------------------------------------------------------------
   Breakpoints: 375 / 640 / 768 / 1024 / 1440 (rail) / 1800 / 2400 (3440 UW).
   Column counts always divide the 24-card page: 1, 2, 3, 4, 6.
   -------------------------------------------------------------------------- */
@media (min-width: 640px) {
  :root { --sv-cols: 2; }
}
@media (min-width: 768px) {
  /* Sticky toolbar from tablet up (a sticky bar on a 375px phone eats the list).
     The extra 0.5rem box-shadow layer fills the gap to the header with the
     page background, so list rows never peek through between the two bars. */
  .sv-toolbar {
    position: sticky; top: var(--sv-top);
    box-shadow: inset 0 1px 0 0 var(--nz-hairline), 0 0 0 1px var(--border), var(--nz-elev-1), 0 -0.5rem 0 0 var(--background);
  }
}
@media (min-width: 1024px) {
  :root { --sv-cols: 3; }
  .sv-hero { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); align-items: center; gap: 2.5rem; padding-top: 2.5rem; }
}
@media (min-width: 1440px) {
  :root { --sv-max: 1560px; }
  .sv-page { padding-inline: 2rem; }
  .sv-quick, .sv-filters-btn { display: none; }
  .sv-layout { grid-template-columns: var(--sv-rail) minmax(0, 1fr); gap: 1.5rem; }
  /* The drawer becomes a sticky sidebar - same element, same controls. */
  .sv-rail {
    position: sticky; top: calc(var(--sv-top) + 3.9rem); z-index: 1;
    width: auto; max-height: calc(100vh - var(--sv-top) - 5rem);
    border-radius: var(--radius);
    box-shadow: inset 0 1px 0 0 var(--nz-hairline), 0 0 0 1px var(--border), var(--nz-elev-1);
    transform: none; visibility: visible; transition: none;
    animation: rise-in 0.45s var(--ease-out) 0.12s backwards;
  }
  .sv-rail-close { display: none; }
  .sv-overlay { display: none; }
}
/* 4 columns only once the frame can give each card ~330px next to the rail. */
@media (min-width: 1800px) {
  :root { --sv-max: 1760px; --sv-cols: 4; }
}
/* Ultrawide (owner's 3440px): 2560px frame, wider rail, six columns (four
   rows of the 24-card page), list view splits into two ranked columns. Past
   2560 extra width only becomes gutter - a card row 3300px wide is an
   eye-track, not a layout. */
@media (min-width: 2400px) {
  :root { --sv-max: 2560px; --sv-rail: 340px; --sv-cols: 6; --sv-gap: 1.15rem; }
  .sv-page { padding-inline: 2.5rem; }
  .sv-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 34rem); gap: 4rem; }
  .sv-hero h1 { font-size: 3.2rem; }
  [data-sv-view="list"] .sv-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(12, auto);
    grid-auto-flow: column; column-gap: 1.25rem;
  }
}

@media (max-width: 1439px) {
  /* Tablet list row: tags drop out, everything else stays. */
  [data-sv-view="list"] .sv-card {
    grid-template-columns: 2.5rem minmax(0, 1fr) minmax(4.5rem, 7rem) 6.5rem 6rem auto;
    grid-template-areas:
      "ico id spark num  trend acts"
      "ico id spark fill trend acts";
  }
  [data-sv-view="list"] .sv-tags { display: none; }
}
@media (max-width: 767px) {
  .sv-page { padding: 0 1rem 5.5rem; }          /* 16px gutter; bottom room for the tray */
  .sv-hero { padding: 1.4rem 0 1rem; gap: 1rem; }
  .sv-lead { font-size: 0.92rem; margin-bottom: 0.9rem; }
  .sv-hint { display: none; }
  .sv-search { padding-left: 0.85rem; }
  .sv-search .btn { padding: 0 0.95rem; }
  /* The pulse becomes a one-row strip on phones: the list is what a phone
     visitor came for, and the full card pushed the first server ~1600px down. */
  .sv-pulse { padding: 0.8rem 0.9rem; gap: 0.35rem; }
  .sv-pulse::before { left: 0.9rem; right: 0.9rem; }
  .sv-pulse-num { font-size: 1.9rem; }
  .sv-split, .sv-split-legend, .sv-pulse-spark { display: none; }
  .sv-toolbar { padding: 0.45rem; }
  .sv-select { margin-left: 0; order: 3; flex: 1 1 auto; }
  .sv-select select { width: 100%; }
  .sv-select-label { display: none; }
  .sv-view { order: 4; }
  .sv-seg { order: 5; flex: 1 1 100%; }
  .sv-seg-item { flex: 1; text-align: center; }
  .sv-res-meta { display: flex; gap: 0.1rem 0.9rem; margin: 0.15rem 0 0; }
  .sv-res-meta > span::before { content: none; }
  .sv-tray { left: 1rem; right: 1rem; bottom: 0.75rem; transform: translateY(16px); justify-content: space-between; }
  .sv-tray.is-open { transform: none; }
}
@media (max-width: 639px) {
  .sv-card { padding: 0.9rem 0.9rem 0.85rem; }
  .sv-num b { font-size: 1.35rem; }
  /* Phone list row: two lines, spark / bar / tags drop out. */
  [data-sv-view="list"] .sv-card {
    grid-template-columns: 2.5rem minmax(0, 1fr) auto auto;
    grid-template-rows: auto auto;
    grid-template-areas:
      "ico id num   acts"
      "ico id trend acts";
    column-gap: 0.65rem;
  }
  [data-sv-view="list"] .sv-spark, [data-sv-view="list"] .sv-fill { display: none; }
  [data-sv-view="list"] .sv-acts { flex-direction: column; gap: 0.2rem; }
  .sv-pg-list { display: none; }
  .sv-jump { margin-left: 0; }
}
@media (max-width: 380px) {
  .sv-tool { padding: 0 0.65rem; }
  .sv-tray-clear { display: none; }
}

/* --------------------------------------------------------------------------
   Reduced motion. The global guard zeroes durations and delays; an infinite
   loop with ~0 duration still cycles, so the dot is killed outright, every
   entrance is removed (end state = the element's own styles, so bars keep
   their real width) and the scroll reveal is pinned visible.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .sv-dot::after { animation: none !important; opacity: 0 !important; }
  .sv-hero-copy > *, .sv-pulse, .sv-pulse-spark, .sv-split > span, .sv-quick-track > li,
  .sv-toolbar, .sv-chips > li, .sv-suggest, .sv-item, .sv-spark svg, .sv-bar > span,
  .sv-livedelta, .sv-empty, .sv-empty-ico, .sv-pager, .sv-rail {
    animation: none !important;
  }
  .sv-grid > .sv-item:nth-child(n + 7) { animation: none !important; opacity: 1 !important; transform: none !important; }
  .sv-card:hover, .sv-card:active, .sv-qchip:hover, [data-sv-view="list"] .sv-card:hover { transform: none; }
}

/* ==========================================================================
   FiveM server detail v2 (/view/:id) - "vw-" block.
   --------------------------------------------------------------------------
   Appended as its own block, after "mcv-". Nothing above is edited. Same
   contract as ASN v2 / Home v2 / Minecraft v2:
     - Only transform / opacity animate (colour / filter on hover states).
     - Entrances use `backwards` fill, never `both`, so a later :hover
       transform still wins.
     - Exactly ONE infinite animation: .vw-live-dot::after. It stops when the
       data is stale and is killed outright under reduced motion.
     - Bars: static inline width + the shared bar-fill sweep. The one bar
       whose value changes live (.vw-meter) uses transform: scaleX(var()) and
       the FROM-ONLY vw-grow keyframe - never scaleX(var()) + bar-fill, which
       ends at scaleX(1) and overshoots to 100% before snapping back.
     - No backdrop-filter on anything holding a canvas (Signature v4 rule).
     - No text-transform: uppercase anywhere (lang="tr" dotted-I trap).
     - Green TEXT is the #15803d / #4ade80 pair, never #22c55e on white.

   Accent. FiveM stays the site's brand blue (--chart-1) with the Signature v4
   violet/cyan companions, so it never reads as Minecraft (green) or a
   provider (orange).
   ========================================================================== */

:root {
  --vw-accent: var(--chart-1);
  --vw-accent-2: var(--nz-accent-2);
  --vw-accent-3: var(--nz-accent-3);
  --vw-accent-text: var(--nz-accent-text);
  --vw-heat: #1447e6;                 /* calendar cells: fill only */
  --vw-good: #15803d;                 /* text, 5.0:1 on #fff */
  --vw-bad: #b91c1c;                  /* text, 5.9:1 on #fff */
  --vw-warn: #b45309;                 /* text, 5.0:1 on #fff */
  --vw-good-fill: #16a34a;            /* fills only (3.3:1 non-text) */
  --vw-warn-fill: #d97706;
  --vw-bad-fill: #dc2626;
  --vw-star: #b45309;                 /* active favourite icon, 5.0:1 */
  --vw-max: 1320px;
  --vw-gutter: 1.5rem;
  --vw-chart-h: 300px;
  --vw-chart-sm: 230px;
  --vw-cell: 11px;
  --vw-cell-max: 20px;
}
:root.dark {
  --vw-heat: #3b86f7;                 /* #1447e6 is 2.9:1 on #171717 */
  --vw-good: #4ade80;
  --vw-bad: #ff6568;
  --vw-warn: #fbbf24;
  --vw-good-fill: #22c55e;
  --vw-warn-fill: #f59e0b;
  --vw-bad-fill: #ef4444;
  --vw-star: #fbbf24;
}

/* `hidden` must beat every display rule in this block. */
.vw-page [hidden] { display: none !important; }

.vw-sr {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Page frame + shared surface
   -------------------------------------------------------------------------- */
.vw-page {
  width: 100%; max-width: var(--vw-max); margin: 0 auto;
  padding: 0 var(--vw-gutter) 3rem;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.1rem;
}
.vw-page > * { min-width: 0; }

.vw-surface {
  position: relative; min-width: 0;
  border-radius: var(--radius);
  background-color: var(--card);
  background-image: var(--nz-card-wash);
  box-shadow: inset 0 1px 0 0 var(--nz-hairline), 0 0 0 1px var(--border), var(--nz-elev-1);
}

.vw-muted { color: var(--muted-foreground); }
.vw-t-good { color: var(--vw-good); }
.vw-t-bad { color: var(--vw-bad); }
.vw-page code, .vw-code {
  font: 500 0.8rem/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  overflow-wrap: anywhere;
}

/* --------------------------------------------------------------------------
   Breadcrumb
   -------------------------------------------------------------------------- */
.vw-crumbs {
  display: flex; align-items: center; gap: 0.45rem; min-width: 0;
  padding-top: 1.1rem; font-size: 0.76rem; color: var(--muted-foreground);
  animation: fade-in var(--dur-3) ease backwards;
}
.vw-crumbs a { border-radius: 4px; transition: color var(--dur-1) ease; }
.vw-crumbs a:hover { color: var(--foreground); }
.vw-crumb-current { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--foreground); }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.vw-hero {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem 2rem;
  padding: 1.25rem; overflow: hidden; isolation: isolate;
  animation: rise-in 0.42s var(--ease-out) backwards;
}
/* Static atmosphere: brand bloom top-left, violet counter-light bottom-right,
   a faint grid that fades out. No loop - the live dot is the page's one. */
.vw-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60% 90% at 0% 0%, color-mix(in srgb, var(--vw-accent) 18%, transparent), transparent 70%),
    radial-gradient(45% 80% at 100% 100%, color-mix(in srgb, var(--vw-accent-2) 12%, transparent), transparent 72%),
    linear-gradient(var(--nz-grid-line) 1px, transparent 1px) 0 0 / 18px 18px,
    linear-gradient(90deg, var(--nz-grid-line) 1px, transparent 1px) 0 0 / 18px 18px;
  -webkit-mask-image: radial-gradient(90% 110% at 0% 0%, #000 35%, transparent 80%);
          mask-image: radial-gradient(90% 110% at 0% 0%, #000 35%, transparent 80%);
}
/* Top accent stripe - the same motif as the chart cards, one weight up. */
.vw-hero::after {
  content: ""; position: absolute; top: 0; left: 1.25rem; right: 1.25rem; height: 2px;
  border-radius: 0 0 2px 2px; pointer-events: none;
  background: linear-gradient(90deg, var(--vw-accent), var(--vw-accent-2) 50%, var(--vw-accent-3));
}

.vw-hero-id { display: flex; align-items: flex-start; gap: 1rem; min-width: 0; }
.vw-avatar {
  position: relative; flex-shrink: 0; width: 72px; height: 72px; border-radius: 18px; overflow: hidden;
  background: linear-gradient(140deg, color-mix(in srgb, var(--vw-accent) 30%, var(--muted)), color-mix(in srgb, var(--vw-accent-2) 22%, var(--muted)));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--vw-accent) 30%, var(--border)), 0 12px 28px -14px var(--nz-glow);
  animation: stat-rise 0.5s var(--ease-out) 0.05s backwards;
}
.vw-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vw-avatar-fallback {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 1.8rem; font-weight: 800; color: #fff; letter-spacing: -0.02em;
  text-shadow: 0 2px 8px rgb(0 0 0 / 0.35);
}

.vw-hero-text { display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; }
.vw-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; font-size: 0.72rem; font-weight: 600; }
.vw-game {
  padding: 0.12rem 0.5rem; border-radius: 999px; color: var(--vw-accent-text);
  background: color-mix(in srgb, var(--vw-accent) 12%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--vw-accent) 26%, transparent);
}
.vw-status { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--muted-foreground); }
.vw-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--muted-foreground); }
.vw-status.is-on { color: var(--vw-good); }
.vw-status.is-on::before { background: var(--vw-good-fill); }
.vw-support { display: inline-flex; padding: 0.1rem 0.5rem; border-radius: 999px; font-size: 0.68rem; font-weight: 600; background: var(--accent); color: var(--muted-foreground); }
.vw-support.is-ok { color: var(--vw-good); background: color-mix(in srgb, var(--vw-good-fill) 13%, transparent); }
.vw-support.is-warn { color: var(--vw-warn); background: color-mix(in srgb, var(--vw-warn-fill) 14%, transparent); }
.vw-support.is-bad { color: var(--vw-bad); background: color-mix(in srgb, var(--vw-bad-fill) 13%, transparent); }

.vw-title {
  margin: 0; font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem); font-weight: 750; line-height: 1.2;
  letter-spacing: -0.022em; text-wrap: balance; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
}
.vw-desc {
  margin: 0; font-size: 0.86rem; line-height: 1.5; color: var(--muted-foreground); text-wrap: pretty;
  overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.vw-chips { list-style: none; margin: 0.15rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.35rem; }
.vw-chip {
  display: inline-flex; align-items: center; gap: 0.35rem; max-width: 14rem;
  padding: 0.2rem 0.6rem; border-radius: 999px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-size: 0.72rem; font-weight: 600; color: var(--muted-foreground);
  background: var(--accent); background-image: linear-gradient(180deg, var(--nz-hairline), transparent);
  box-shadow: inset 0 0 0 1px var(--border);
  transition: color var(--dur-1) ease, background-color var(--dur-1) ease, transform var(--dur-1) var(--ease-out);
}
.vw-chip:hover { color: var(--foreground); transform: translateY(-1px); }
.vw-chip.is-accent { color: var(--vw-accent-text); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--vw-accent) 35%, var(--border)); }
.vw-chip.is-more { color: var(--vw-accent-text); }
.vw-flag { width: 14px; height: 14px; border-radius: 3px; flex-shrink: 0; display: inline-block; }

/* Live side */
.vw-hero-live { display: flex; flex-direction: column; gap: 0.55rem; min-width: 0; }
.vw-live-row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; }
.vw-live { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.74rem; font-weight: 700; color: var(--vw-good); }
.vw-live-dot { position: relative; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--vw-good-fill); box-shadow: 0 0 0 3px color-mix(in srgb, var(--vw-good-fill) 22%, transparent); }
/* THE page's one loop: compositor-only, 8px, and it means "data is fresh". */
.vw-live-dot::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: var(--vw-good-fill); opacity: 0;
  animation: pulse-ring 2.4s var(--ease-out) infinite;
}
.vw-live.is-stale { color: var(--muted-foreground); }
.vw-live.is-stale .vw-live-dot { background: var(--muted-foreground); box-shadow: 0 0 0 3px color-mix(in srgb, var(--muted-foreground) 18%, transparent); }
.vw-live.is-stale .vw-live-dot::after { animation: none; }
.vw-updated { font-size: 0.72rem; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }

.vw-figure { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; }
.vw-num {
  display: inline-block;
  font-size: clamp(2.5rem, 1.8rem + 2.6vw, 3.6rem); font-weight: 800; line-height: 1;
  letter-spacing: -0.04em; font-variant-numeric: tabular-nums; color: var(--vw-accent-text);
  animation: stat-rise 0.5s var(--ease-out) 0.1s backwards;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  /* background-image, never the `background` shorthand (resets background-clip). */
  .vw-num {
    background-image: linear-gradient(135deg, var(--chart-1), var(--vw-accent-2));
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  }
  :root.dark .vw-num { background-image: linear-gradient(135deg, var(--chart-3), var(--vw-accent-2)); }
}
.vw-unit { font-size: 0.9rem; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }

.vw-meter { height: 8px; border-radius: 999px; overflow: hidden; background: var(--muted); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border) 80%, transparent); }
.vw-meter > span {
  display: block; height: 100%; width: 100%; border-radius: inherit;
  transform: scaleX(var(--vw-fill, 0)); transform-origin: left center;
  background: linear-gradient(90deg, var(--vw-accent), var(--vw-accent-2) 70%, var(--vw-accent-3));
  animation: vw-grow 0.8s var(--ease-out) 0.2s backwards;
  transition: transform 0.6s var(--ease-out);
}
@keyframes vw-grow { from { transform: scaleX(0); } }
.vw-meter-legend { display: flex; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; font-size: 0.74rem; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.vw-meter-legend strong { color: var(--foreground); font-weight: 650; }

.vw-ranks { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.vw-rank {
  display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.2rem 0.6rem; border-radius: 999px;
  font-size: 0.74rem; font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--foreground); background: var(--accent); box-shadow: inset 0 0 0 1px var(--border);
}
.vw-rank.is-accent { color: var(--vw-accent-text); background: color-mix(in srgb, var(--vw-accent) 12%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--vw-accent) 30%, transparent); }

.vw-actions { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 0.2rem; }
.vw-actions .btn { display: inline-flex; align-items: center; gap: 0.4rem; }
.vw-join { box-shadow: 0 8px 22px -12px var(--nz-glow); }
.vw-fav svg { transition: transform var(--dur-2) var(--ease-out), color var(--dur-1) ease; }
.vw-fav:hover svg { transform: scale(1.12); }
.vw-fav.fav-star-active { color: var(--foreground); border-color: color-mix(in srgb, var(--vw-star) 45%, var(--border)); }
.vw-fav.fav-star-active svg { color: var(--vw-star); fill: currentColor; }

/* --------------------------------------------------------------------------
   Connect strip
   -------------------------------------------------------------------------- */
.vw-connect {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.75rem 1.25rem;
  padding: 0.85rem 1.1rem;
  animation: rise-in-sm 0.34s var(--ease-out) 0.08s backwards;
}
.vw-connect-item { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.vw-k { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.7rem; font-weight: 600; color: var(--muted-foreground); }
.vw-k svg { color: var(--vw-accent-text); }
.vw-code-row { display: flex; align-items: center; gap: 0.4rem; min-width: 0; }
.vw-code-row .vw-code { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vw-protected { align-self: flex-start; margin-top: 0; font-size: 0.74rem; }
.vw-asn { font-size: 0.8rem; font-weight: 600; color: var(--vw-accent-text); border-radius: 4px; overflow-wrap: anywhere; }
.vw-asn:hover { text-decoration: underline; }

.vw-copy {
  display: inline-flex; align-items: center; gap: 0.3rem; flex-shrink: 0;
  padding: 0.22rem 0.55rem; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border); background: transparent;
  color: var(--muted-foreground); font: inherit; font-size: 0.7rem; font-weight: 600; white-space: nowrap;
  transition: color var(--dur-1) ease, border-color var(--dur-1) ease, background-color var(--dur-1) ease, transform var(--dur-1) var(--ease-out);
}
.vw-copy:hover { color: var(--foreground); border-color: color-mix(in srgb, var(--vw-accent) 45%, var(--border)); }
.vw-copy:active { transform: scale(0.94); }
.vw-copy.is-icon { padding: 0.28rem; }
.vw-copy.is-copied, .vw-copy-btn.is-copied { color: var(--vw-good); border-color: color-mix(in srgb, var(--vw-good-fill) 50%, var(--border)); }

/* --------------------------------------------------------------------------
   KPI strip
   -------------------------------------------------------------------------- */
.vw-kpis { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem; }
.vw-kpi {
  display: flex; flex-direction: column; gap: 0.3rem; padding: 0.8rem 0.9rem;
  border-radius: calc(var(--radius) - 4px);
  animation: rise-in-sm 0.34s var(--ease-out) backwards;
  animation-delay: calc(0.1s + min(var(--i, 0), 6) * 0.04s);
  transition: transform var(--dur-2) var(--ease-out);
}
.vw-kpi:hover { transform: translateY(-2px); }
.vw-kpi-label { font-size: 0.72rem; font-weight: 600; color: var(--muted-foreground); }
.vw-kpi-line { display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; }
.vw-kpi-num {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-size: 1.35rem; font-weight: 750; line-height: 1.15; letter-spacing: -0.025em; font-variant-numeric: tabular-nums;
}
.vw-kpi-sub { font-size: 0.7rem; line-height: 1.45; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }

/* Direction chip: glyph + sign carry direction, colour is never alone. */
.vw-delta {
  display: inline-flex; align-items: center; gap: 0.2rem; padding: 0.12rem 0.5rem; border-radius: 999px;
  font-size: 0.7rem; font-weight: 650; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.vw-delta.up { color: var(--vw-good); background: color-mix(in srgb, var(--vw-good-fill) 14%, transparent); }
.vw-delta.down { color: var(--vw-bad); background: color-mix(in srgb, var(--vw-bad-fill) 13%, transparent); }
.vw-delta.flat { color: var(--muted-foreground); background: var(--accent); }

/* Static width carries the value; bar-fill (scaleX 0 -> 1) only sweeps it in. */
.vw-bar { display: block; height: 5px; border-radius: 999px; overflow: hidden; background: var(--muted); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border) 80%, transparent); }
.vw-bar > span {
  display: block; height: 100%; border-radius: inherit; transform-origin: left center;
  background: linear-gradient(90deg, var(--vw-accent), color-mix(in srgb, var(--vw-accent-2) 65%, var(--vw-accent)));
  animation: bar-fill 0.65s var(--ease-out) 0.25s backwards;
}

/* --------------------------------------------------------------------------
   Tabs - sticky, glass (no canvas inside, so blur is allowed here)
   -------------------------------------------------------------------------- */
.vw-tabbar-wrap {
  position: sticky; top: 4rem; z-index: 6;          /* clears the 4rem .site-header (z 20) */
  margin: 0.35rem calc(var(--vw-gutter) * -1) 0; padding: 0 var(--vw-gutter);
  background: color-mix(in srgb, var(--background) 82%, transparent);
  -webkit-backdrop-filter: blur(12px) saturate(150%); backdrop-filter: blur(12px) saturate(150%);
  border-bottom: 1px solid var(--border);
  animation: fade-in var(--dur-3) ease 0.15s backwards;
}
.vw-tabbar {
  position: relative; display: flex; gap: 0.15rem; overflow-x: auto; overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.vw-tabbar::-webkit-scrollbar { display: none; }
.vw-tab {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.8rem 0.95rem; border: 0; background: transparent; cursor: pointer;
  color: var(--muted-foreground); font: inherit; font-size: 0.86rem; font-weight: 600; white-space: nowrap;
  border-radius: 8px 8px 0 0;
  transition: color var(--dur-1) ease, background-color var(--dur-1) ease;
}
.vw-tab:hover { color: var(--foreground); background: color-mix(in srgb, var(--accent) 60%, transparent); }
.vw-tab[aria-selected="true"] { color: var(--foreground); }
.vw-tab[aria-selected="true"] svg { color: var(--vw-accent-text); }
.vw-tab:focus-visible { outline: 2px solid var(--vw-accent); outline-offset: -3px; }
.vw-tab-count {
  display: inline-flex; padding: 0.02rem 0.45rem; border-radius: 999px;
  font-size: 0.68rem; font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--muted-foreground); background: var(--accent);
}
.vw-tab[aria-selected="true"] .vw-tab-count { color: var(--vw-accent-text); background: color-mix(in srgb, var(--vw-accent) 13%, transparent); }
/* The ink: a 100px bar moved with translateX + scaleX (width = scale * 100).
   Hidden until JS has measured once, so it never slides in from x=0. */
.vw-tabs-ink {
  position: absolute; left: 0; bottom: 0; width: 100px; height: 2px; border-radius: 2px 2px 0 0;
  transform-origin: 0 0; opacity: 0; pointer-events: none;
  background: linear-gradient(90deg, var(--vw-accent), var(--vw-accent-2));
}
.vw-tabs-ink.is-ready { opacity: 1; transition: transform var(--dur-3) var(--ease-out), opacity var(--dur-2) ease; }

.vw-tabpanel { min-width: 0; padding-top: 0.25rem; animation: rise-in-sm 0.24s var(--ease-out) backwards; }
.vw-tabpanel:focus-visible { outline: 2px solid var(--vw-accent); outline-offset: 4px; border-radius: var(--radius); }

/* --------------------------------------------------------------------------
   Metrics toolbar
   -------------------------------------------------------------------------- */
.vw-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem 1rem; flex-wrap: wrap; margin: 0.6rem 0 0.9rem; }
.vw-range {
  display: flex; gap: 0.2rem; padding: 0.22rem; border-radius: 999px; min-width: 0; max-width: 100%;
  overflow-x: auto; scrollbar-width: none;
  background: var(--accent); box-shadow: inset 0 0 0 1px var(--border);
}
.vw-range::-webkit-scrollbar { display: none; }
.vw-range a {
  flex-shrink: 0; padding: 0.32rem 0.8rem; border-radius: 999px; white-space: nowrap;
  font-size: 0.78rem; font-weight: 600; color: var(--muted-foreground);
  transition: color var(--dur-1) ease, background-color var(--dur-1) ease, transform var(--dur-1) var(--ease-out);
}
.vw-range a:hover { color: var(--foreground); }
.vw-range a:active { transform: scale(0.96); }
.vw-range a[aria-current="page"] {
  color: #fff;
  background-image: linear-gradient(135deg, var(--chart-1), var(--nz-btn-2));
  box-shadow: inset 0 1px 0 0 rgb(255 255 255 / 0.2), 0 6px 16px -8px var(--nz-glow);
}
.vw-refresh { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.74rem; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.vw-refresh strong { color: var(--foreground); font-weight: 650; min-width: 3.2em; }

/* --------------------------------------------------------------------------
   Metrics grid. DOM order: main, drops, clock, daily, cal, integ, monthly,
   yearly, stab, perf - chosen so 1, 2 and 4 columns all pack without holes.
   -------------------------------------------------------------------------- */
.vw-mgrid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.vw-mgrid > * { min-width: 0; }

.vw-card {
  display: flex; flex-direction: column; gap: 0.9rem; padding: 1.05rem 1.15rem 1.15rem;
  animation: rise-in-sm 0.36s var(--ease-out) backwards;
  animation-delay: calc(0.05s + min(var(--i, 0), 6) * 0.04s);
}
/* Accent ring on hover as an opacity-faded layer - never a moving panel
   under a chart you are reading. pointer-events:none keeps Chart.js tooltips. */
.vw-card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--vw-accent) 32%, transparent);
  opacity: 0; transition: opacity var(--dur-2) ease;
}
.vw-card:hover::after { opacity: 1; }

.vw-card-head {
  display: flex; align-items: flex-start; gap: 0.65rem; flex-wrap: wrap;
  padding-bottom: 0.75rem; border-bottom: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
}
.vw-card-icon {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 2rem; height: 2rem; border-radius: 0.6rem; color: var(--vw-accent-text);
  background: linear-gradient(140deg, color-mix(in srgb, var(--vw-accent) 16%, transparent), color-mix(in srgb, var(--vw-accent-2) 10%, transparent));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--vw-accent) 24%, transparent);
  transition: transform var(--dur-3) var(--ease-out);
}
.vw-card:hover .vw-card-icon { transform: scale(1.08); }
.vw-card-icon.is-danger, .vw-card-icon.is-high { color: var(--vw-bad); background: color-mix(in srgb, var(--vw-bad-fill) 13%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--vw-bad-fill) 28%, transparent); }
.vw-card-icon.is-watch { color: var(--vw-warn); background: color-mix(in srgb, var(--vw-warn-fill) 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--vw-warn-fill) 28%, transparent); }
.vw-card-icon.is-low { color: var(--vw-good); background: color-mix(in srgb, var(--vw-good-fill) 13%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--vw-good-fill) 28%, transparent); }
.vw-card-titles { flex: 1 1 12rem; min-width: 0; }
.vw-card-title { margin: 0; font-size: 1rem; font-weight: 700; letter-spacing: -0.012em; display: flex; align-items: center; gap: 0.45rem; }
.vw-card-sub { margin: 0.15rem 0 0; font-size: 0.76rem; color: var(--muted-foreground); }

.vw-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.3rem 0.9rem; align-self: center; font-size: 0.72rem; color: var(--muted-foreground); }
.vw-legend li { display: inline-flex; align-items: center; gap: 0.35rem; }
.vw-legend i { display: inline-block; width: 16px; height: 0; border-top: 2px solid var(--vw-accent); }
.vw-legend i.is-dash { border-top: 2px dashed color-mix(in srgb, var(--vw-accent) 60%, transparent); }
.vw-legend i.is-mark { width: 0; height: 0; border-top: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 8px solid #ef4444; }

.vw-inline-stats { display: flex; gap: 1.1rem; margin: 0; align-self: center; }
.vw-inline-stats dt { font-size: 0.66rem; font-weight: 600; color: var(--muted-foreground); }
.vw-inline-stats dd { margin: 0.1rem 0 0; font-size: 0.85rem; font-weight: 700; font-variant-numeric: tabular-nums; }

.vw-main-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.9rem; }
.vw-chart { position: relative; height: var(--vw-chart-sm); min-width: 0; }
.vw-chart-main { height: var(--vw-chart-h); }
.vw-chart canvas { max-height: none; animation: fade-in 0.45s ease-out 0.12s backwards; }
.vw-chart-empty { display: none; position: absolute; inset: 0; margin: 0; place-items: center; font-size: 0.8rem; color: var(--muted-foreground); }
/* !important: Chart.js writes an inline display:block on its canvas. */
.vw-chart.is-empty canvas { display: none !important; }
.vw-chart.is-empty .vw-chart-empty { display: grid; }

.vw-stats { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
.vw-stats > div, .vw-mini-stats > div, .vw-cal-stats > div {
  min-width: 0; padding: 0.55rem 0.7rem; border-radius: calc(var(--radius) - 6px);
  background: color-mix(in srgb, var(--accent) 65%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border) 80%, transparent);
}
.vw-stats dt, .vw-mini-stats dt, .vw-cal-stats dt { font-size: 0.68rem; font-weight: 600; color: var(--muted-foreground); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vw-stats dd, .vw-mini-stats dd, .vw-cal-stats dd { margin: 0.2rem 0 0; font-size: 1.05rem; font-weight: 700; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.vw-cal-stats dd { font-size: 0.88rem; }

/* Clock */
.vw-clock { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.vw-clock-box { position: relative; width: 180px; height: 180px; flex-shrink: 0; margin: 0 auto; }
.vw-clock-box canvas { max-height: none; animation: fade-in 0.45s ease-out 0.12s backwards; }
.vw-clock-stats { flex: 1 1 12rem; margin: 0; display: grid; gap: 0.65rem; }
.vw-clock-stats dt { font-size: 0.7rem; font-weight: 600; color: var(--muted-foreground); }
.vw-clock-stats dd { margin: 0.1rem 0 0; font-size: 1.2rem; font-weight: 750; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.vw-clock-stats small { font-size: 0.72rem; font-weight: 500; color: var(--muted-foreground); letter-spacing: 0; }
.vw-time-pill { display: inline-flex; padding: 0.2rem 0.6rem; border-radius: 999px; font-size: 0.82rem; font-weight: 650; color: var(--vw-accent-text); background: color-mix(in srgb, var(--vw-accent) 12%, transparent); }

/* Activity calendar */
.vw-cal-legend { display: inline-flex; align-items: center; gap: 3px; align-self: center; font-size: 0.68rem; color: var(--muted-foreground); }
.vw-cal-legend span { margin: 0 0.25rem; }
.vw-cal-legend i { width: 11px; height: 11px; border-radius: 3px; }
.vw-cal-scroll { overflow-x: auto; overscroll-behavior-x: contain; padding-bottom: 0.3rem; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--muted-foreground) 40%, transparent) transparent; }
.vw-cal-grid {
  display: grid; grid-auto-flow: column;
  grid-template-rows: auto repeat(7, auto);
  grid-template-columns: 2rem repeat(var(--vw-weeks, 53), minmax(var(--vw-cell), 1fr));
  gap: 3px; min-height: 9rem;
  /* Fills the card up to a max cell size; below the min cell size the
     scroller takes over (phones) instead of cells shrinking to specks. */
  min-width: calc(2rem + var(--vw-weeks, 53) * (var(--vw-cell) + 3px));
  max-width: calc(2rem + var(--vw-weeks, 53) * (var(--vw-cell-max) + 3px));
}
.vw-cal-grid.is-ready { animation: fade-in 0.45s ease-out backwards; }
.vw-cal-m { height: 1rem; font-size: 0.64rem; line-height: 1rem; color: var(--muted-foreground); white-space: nowrap; overflow: visible; }
.vw-cal-wd { font-size: 0.6rem; line-height: 1; color: var(--muted-foreground); align-self: center; }
.vw-cal-d, .vw-cal-legend i { display: block; aspect-ratio: 1; border-radius: 3px; background: var(--muted); }
.vw-cal-d[data-l="x"] { background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border) 80%, transparent); }
.vw-cal-d[data-l="f"] { visibility: hidden; }
.vw-page [data-l="0"] { background: var(--muted); }
.vw-page [data-l="1"] { background: color-mix(in srgb, var(--vw-heat) 28%, var(--muted)); }
.vw-page [data-l="2"] { background: color-mix(in srgb, var(--vw-heat) 50%, var(--muted)); }
.vw-page [data-l="3"] { background: color-mix(in srgb, var(--vw-heat) 74%, var(--muted)); }
.vw-page [data-l="4"] { background: var(--vw-heat); }
.vw-cal-d.is-today { box-shadow: 0 0 0 1.5px var(--foreground); }
.vw-cal-stats { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }

/* Integrity */
.vw-verdict { display: flex; align-items: center; gap: 0.8rem; padding: 0.7rem 0.85rem; border-radius: calc(var(--radius) - 6px); background: color-mix(in srgb, var(--accent) 65%, transparent); }
.vw-verdict-meter { display: inline-flex; gap: 3px; flex-shrink: 0; }
.vw-verdict-meter i { width: 8px; height: 22px; border-radius: 3px; background: var(--muted); box-shadow: inset 0 0 0 1px var(--border); }
.vw-verdict.is-low .vw-verdict-meter i { background: var(--vw-good-fill); box-shadow: none; }
.vw-verdict.is-watch .vw-verdict-meter i.is-on { background: var(--vw-warn-fill); box-shadow: none; }
.vw-verdict.is-high .vw-verdict-meter i.is-on { background: var(--vw-bad-fill); box-shadow: none; }
.vw-verdict-label { display: block; font-size: 0.95rem; }
.vw-verdict.is-low .vw-verdict-label { color: var(--vw-good); }
.vw-verdict.is-watch .vw-verdict-label { color: var(--vw-warn); }
.vw-verdict.is-high .vw-verdict-label { color: var(--vw-bad); }
.vw-verdict-sub { display: block; font-size: 0.72rem; color: var(--muted-foreground); margin-top: 0.1rem; }
.vw-signals { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.vw-signal p { margin: 0.35rem 0 0; font-size: 0.72rem; line-height: 1.45; color: var(--muted-foreground); }
.vw-signal-head { display: flex; justify-content: space-between; gap: 0.5rem; font-size: 0.8rem; font-weight: 600; margin-bottom: 0.4rem; }
.vw-signal-state { font-size: 0.72rem; color: var(--muted-foreground); }
.vw-signal.is-hit .vw-signal-state { color: var(--vw-warn); }
.vw-bar.is-signal > span { background: color-mix(in srgb, var(--muted-foreground) 55%, transparent); }
.vw-signal.is-hit .vw-bar.is-signal > span { background: var(--vw-warn-fill); }

/* Uptime ribbon */
.vw-ribbon { list-style: none; margin: 0; padding: 0; display: flex; gap: 3px; height: 34px; }
.vw-ribbon > li {
  flex: 1 1 0; min-width: 0; border-radius: 3px; background: var(--muted);
  transform-origin: bottom center;
  animation: vw-rise-y 0.4s var(--ease-out) backwards;
  animation-delay: calc(0.15s + var(--i, 0) * 12ms);
  transition: filter var(--dur-1) ease;
}
.vw-ribbon > li:hover { filter: brightness(1.15); }
@keyframes vw-rise-y { from { opacity: 0; transform: scaleY(0.25); } }
.vw-ribbon .is-ok, .vw-ribbon-key .is-ok { background: var(--vw-good-fill); }
.vw-ribbon .is-warn, .vw-ribbon-key .is-warn { background: var(--vw-warn-fill); }
.vw-ribbon .is-bad, .vw-ribbon-key .is-bad { background: var(--vw-bad-fill); }
.vw-ribbon .is-none, .vw-ribbon-key .is-none { background: transparent; box-shadow: inset 0 0 0 1px var(--border); }
.vw-ribbon .is-today { opacity: 0.75; }
.vw-ribbon-foot { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; flex-wrap: wrap; font-size: 0.66rem; color: var(--muted-foreground); }
.vw-ribbon-key { display: inline-flex; align-items: center; gap: 0.3rem; flex-wrap: wrap; }
.vw-ribbon-key i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-left: 0.35rem; }
.vw-mini-stats { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }

/* Performance tiles */
.vw-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
.vw-tile {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.3rem;
  padding: 0.75rem 0.85rem; border-radius: calc(var(--radius) - 6px);
  background: var(--background); box-shadow: inset 0 0 0 1px var(--border);
  transition: transform var(--dur-2) var(--ease-out);
}
.vw-tile:hover { transform: translateY(-2px); }
.vw-tile-label { font-size: 0.72rem; color: var(--muted-foreground); }
.vw-tile-num { font-size: 1.35rem; font-weight: 750; letter-spacing: -0.025em; font-variant-numeric: tabular-nums; }
.vw-tile-sub { font-size: 0.68rem; color: var(--muted-foreground); }

.vw-note { display: flex; align-items: flex-start; gap: 0.4rem; margin: 0; font-size: 0.7rem; line-height: 1.5; color: var(--muted-foreground); }
.vw-note svg { flex-shrink: 0; margin-top: 0.15rem; color: var(--vw-accent-text); }
.vw-empty-inline { margin: 0; font-size: 0.8rem; color: var(--muted-foreground); }

/* --------------------------------------------------------------------------
   Players / resources / vars shared list tools
   -------------------------------------------------------------------------- */
.vw-listtools { display: flex; flex-wrap: wrap; align-items: center; gap: 0.55rem 0.75rem; }
.vw-search { position: relative; display: flex; align-items: center; flex: 1 1 240px; min-width: 0; max-width: 26rem; margin: 0; }
.vw-search > svg { position: absolute; left: 0.75rem; color: var(--muted-foreground); pointer-events: none; }
.vw-search input {
  width: 100%; padding: 0.5rem 0.9rem 0.5rem 2.2rem;
  background: var(--background); color: var(--foreground);
  border: 1px solid var(--border); border-radius: 999px; font: inherit; font-size: 0.84rem;
  transition: border-color var(--dur-1) ease;
}
.vw-search input::placeholder { color: var(--muted-foreground); }
.vw-search input:focus, .vw-search input:focus-visible {
  outline: none; border-color: color-mix(in srgb, var(--vw-accent) 60%, var(--border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--vw-accent) 18%, transparent);
}
.vw-seg { display: inline-flex; gap: 0.2rem; padding: 0.2rem; border-radius: 999px; background: var(--accent); box-shadow: inset 0 0 0 1px var(--border); }
.vw-seg button {
  padding: 0.28rem 0.75rem; border: 0; border-radius: 999px; cursor: pointer; background: transparent;
  color: var(--muted-foreground); font: inherit; font-size: 0.74rem; font-weight: 600; white-space: nowrap;
  transition: background-color var(--dur-1) ease, color var(--dur-1) ease;
}
.vw-seg button:hover { color: var(--foreground); }
.vw-seg button:focus-visible { outline: 2px solid var(--vw-accent); outline-offset: 1px; }
.vw-seg button[aria-pressed="true"] { background: var(--card); color: var(--foreground); box-shadow: 0 1px 3px rgb(0 0 0 / 0.18), inset 0 0 0 1px var(--border); }
.vw-list-count { margin-left: auto; font-size: 0.74rem; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }

/* Players */
.vw-pings { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.75rem; padding: 0.8rem 0.9rem; border-radius: calc(var(--radius) - 6px); background: color-mix(in srgb, var(--accent) 60%, transparent); }
.vw-pings-median { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; font-size: 0.74rem; color: var(--muted-foreground); }
.vw-pings-median strong { font-size: 1.3rem; font-weight: 750; color: var(--foreground); font-variant-numeric: tabular-nums; }
.vw-pings ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.vw-pings li { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr) 5.5rem; align-items: center; gap: 0.6rem; font-size: 0.72rem; }
.vw-pings-label { color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.vw-pings-count { text-align: right; font-weight: 650; font-variant-numeric: tabular-nums; }
.vw-pings-count small { font-weight: 500; color: var(--muted-foreground); }
.vw-pings .is-good .vw-bar > span { background: var(--vw-good-fill); }
.vw-pings .is-ok .vw-bar > span { background: var(--vw-heat); }
.vw-pings .is-slow .vw-bar > span { background: var(--vw-warn-fill); }
.vw-pings .is-bad .vw-bar > span { background: var(--vw-bad-fill); }

.vw-plist {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 0.4rem;
}
.vw-player {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 0.5rem;
  padding: 0.45rem 0.65rem; border-radius: calc(var(--radius) - 7px);
  background: var(--background); box-shadow: inset 0 0 0 1px var(--border);
  font-size: 0.8rem; line-height: 1.35; height: 2.3rem; overflow: hidden;   /* zalgo / emoji names cannot grow the row */
  content-visibility: auto; contain-intrinsic-size: auto 2.3rem;
  transition: box-shadow var(--dur-1) ease;
}
.vw-player:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--vw-accent) 40%, var(--border)); }
.vw-player-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; unicode-bidi: isolate; }
.vw-player-id { font-size: 0.68rem; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.vw-ping { min-width: 3.9rem; text-align: right; font-size: 0.7rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.vw-ping::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 0.3rem; vertical-align: 1px; background: var(--muted-foreground); }
.vw-ping.is-good::before { background: var(--vw-good-fill); }
.vw-ping.is-ok::before { background: var(--vw-heat); }
.vw-ping.is-slow::before { background: var(--vw-warn-fill); }
.vw-ping.is-bad::before { background: var(--vw-bad-fill); }
.vw-ping.is-slow { color: var(--vw-warn); }
.vw-ping.is-bad { color: var(--vw-bad); }
.vw-more { align-self: center; }

/* Honest empty states */
.vw-empty {
  display: flex; flex-direction: column; align-items: center; gap: 0.55rem;
  max-width: 34rem; margin: 0 auto; padding: 2rem 1rem 1.5rem; text-align: center;
  font-size: 0.84rem; line-height: 1.55; color: var(--muted-foreground);
  animation: fade-in var(--dur-3) ease backwards;
}
.vw-empty p { margin: 0; text-wrap: pretty; }
.vw-empty strong { color: var(--foreground); }
.vw-empty-title { font-size: 1rem; font-weight: 700; color: var(--foreground); }
.vw-empty-icon {
  display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: 1rem;
  color: var(--vw-accent-text); background: color-mix(in srgb, var(--vw-accent) 12%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--vw-accent) 24%, transparent);
}

/* Resources */
.vw-stack { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.vw-stack-chip {
  display: inline-flex; flex-direction: column; gap: 0.05rem; padding: 0.4rem 0.75rem; border-radius: 0.7rem;
  background: linear-gradient(140deg, color-mix(in srgb, var(--vw-accent) 12%, transparent), color-mix(in srgb, var(--vw-accent-2) 8%, transparent));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--vw-accent) 26%, transparent);
  transition: transform var(--dur-2) var(--ease-out);
}
.vw-stack-chip:hover { transform: translateY(-2px); }
.vw-stack-chip span { font-size: 0.64rem; font-weight: 600; color: var(--muted-foreground); }
.vw-stack-chip strong { font-size: 0.84rem; color: var(--vw-accent-text); }
.vw-prefixes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.4rem 1rem; }
.vw-prefixes li { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) 2.5rem; align-items: center; gap: 0.5rem; font-size: 0.74rem; }
.vw-prefixes code { color: var(--vw-accent-text); font-size: 0.74rem; }
.vw-prefix-count { text-align: right; font-weight: 650; font-variant-numeric: tabular-nums; }
.vw-res-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.35rem; }
.vw-res {
  display: inline-flex; align-items: center; gap: 0.4rem; max-width: 20rem;
  padding: 0.25rem 0.35rem 0.25rem 0.65rem; border-radius: 999px;
  font: 500 0.76rem/1.35 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: var(--background); box-shadow: inset 0 0 0 1px var(--border);
  transition: box-shadow var(--dur-1) ease, transform var(--dur-1) var(--ease-out);
}
.vw-res:hover { transform: translateY(-1px); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--vw-accent) 45%, var(--border)); }
.vw-res-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vw-res-count {
  flex-shrink: 0; padding: 0.02rem 0.42rem; border-radius: 999px;
  font: 600 0.64rem/1.5 'Inter', ui-sans-serif, system-ui, sans-serif; font-variant-numeric: tabular-nums;
  color: var(--muted-foreground); background: var(--accent);
}
.vw-res.is-rare .vw-res-count { color: var(--vw-accent-text); background: color-mix(in srgb, var(--vw-accent-2) 14%, transparent); }

/* Details */
.vw-dgrid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.vw-kv { margin: 0; display: grid; }
.vw-kv > div {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; min-width: 0;
  padding: 0.5rem 0; border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  font-size: 0.82rem;
}
.vw-kv > div:last-child { border-bottom: 0; }
.vw-kv dt { flex-shrink: 0; color: var(--muted-foreground); }
.vw-kv dd { margin: 0; min-width: 0; display: inline-flex; align-items: center; gap: 0.4rem; justify-content: flex-end; text-align: right; overflow-wrap: anywhere; }
.vw-kv a { color: var(--vw-accent-text); border-radius: 4px; display: inline-flex; align-items: center; gap: 0.25rem; }
.vw-kv a:hover { text-decoration: underline; }
.vw-owner { display: inline-flex; align-items: center; gap: 0.4rem; }
.vw-owner img { width: 20px; height: 20px; border-radius: 50%; }
.vw-specs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 0.5rem; }
.vw-spec { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.6rem 0.75rem; border-radius: calc(var(--radius) - 6px); background: var(--background); box-shadow: inset 0 0 0 1px var(--border); min-width: 0; }
.vw-spec-label { font-size: 0.68rem; font-weight: 600; color: var(--muted-foreground); }
.vw-spec-value { font-size: 0.9rem; font-weight: 700; overflow-wrap: anywhere; }
.vw-spec.is-ok .vw-spec-value { color: var(--vw-good); }
.vw-spec.is-warn .vw-spec-value { color: var(--vw-warn); }
.vw-protected-note { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0; font-size: 0.8rem; color: var(--muted-foreground); }
.vw-protected-note .protected-badge { margin-top: 0; }
.vw-eplist { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.3rem; }
.vw-table-wrap { overflow-x: auto; max-height: 30rem; overflow-y: auto; border-radius: calc(var(--radius) - 6px); box-shadow: inset 0 0 0 1px var(--border); scrollbar-width: thin; }
.vw-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.vw-table thead th { position: sticky; top: 0; z-index: 1; background: var(--card); text-align: left; font-size: 0.7rem; font-weight: 600; color: var(--muted-foreground); padding: 0.55rem 0.75rem; border-bottom: 1px solid var(--border); }
.vw-table tbody th { text-align: left; font: 600 0.76rem/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--vw-accent-text); white-space: nowrap; }
.vw-table tbody th, .vw-table tbody td { padding: 0.45rem 0.75rem; border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent); vertical-align: middle; }
.vw-table tbody td:nth-child(2) { max-width: 36rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vw-table tbody td:last-child { width: 1%; text-align: right; }
.vw-toolbar { scroll-margin-top: 7.5rem; }       /* ?range=..#aralik lands below header + sticky tabs */
.vw-table tbody tr:hover { background: color-mix(in srgb, var(--accent) 55%, transparent); }

/* --------------------------------------------------------------------------
   Tools + similar
   -------------------------------------------------------------------------- */
.vw-section { margin-top: 1.5rem; min-width: 0; }
.vw-sec-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 0.3rem 1rem; margin-bottom: 0.85rem; }
.vw-sec-head h2 { margin: 0; font-size: 1.15rem; letter-spacing: -0.018em; }
.vw-sec-head p { margin: 0; font-size: 0.78rem; color: var(--muted-foreground); }

.vw-tools { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 0.85rem; }
.vw-tool { display: flex; flex-direction: column; gap: 0.55rem; padding: 1rem 1.05rem; }
.vw-tool h3 { margin: 0; display: flex; align-items: center; gap: 0.45rem; font-size: 0.92rem; }
.vw-tool h3 svg { color: var(--vw-accent-text); }
.vw-tool p { margin: 0; font-size: 0.76rem; line-height: 1.5; color: var(--muted-foreground); }
.vw-tool-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: auto; padding-top: 0.2rem; }
.vw-badge-img { align-self: flex-start; height: 20px; width: auto; }

/* Always 6 items: 1 / 2 / 3 / 6 columns, never a 5+1 orphan row. */
.vw-similar { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.8rem; }
.vw-similar > li { min-width: 0; animation: rise-in-sm 0.32s var(--ease-out) backwards; animation-delay: calc(0.05s + min(var(--i, 0), 6) * 0.04s); }
.vw-sim {
  display: flex; align-items: center; gap: 0.75rem; height: 100%; padding: 0.8rem 0.9rem;
  color: inherit; transition: transform var(--dur-2) var(--ease-out);
}
.vw-sim::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--vw-accent) 45%, var(--border)), var(--nz-elev-2), 0 16px 34px -22px var(--nz-glow);
  opacity: 0; transition: opacity var(--dur-2) ease;
}
.vw-sim:hover { transform: translateY(-3px); }
.vw-sim:hover::after { opacity: 1; }
.vw-sim:active { transform: translateY(-1px) scale(0.995); }
.vw-sim-icon {
  position: relative; flex-shrink: 0; width: 40px; height: 40px; border-radius: 10px; overflow: hidden;
  display: grid; place-items: center; font-weight: 800; color: #fff;
  background: linear-gradient(140deg, color-mix(in srgb, var(--vw-accent) 55%, var(--muted)), color-mix(in srgb, var(--vw-accent-2) 45%, var(--muted)));
}
.vw-sim-icon img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vw-sim-body { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; flex: 1; }
.vw-sim-name { font-size: 0.84rem; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color var(--dur-1) ease; }
.vw-sim:hover .vw-sim-name { color: var(--vw-accent-text); }
.vw-sim-meta { font-size: 0.72rem; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.vw-sim-meta strong { color: var(--foreground); }

/* Value that just changed on the 60s refresh. */
@keyframes vw-flip { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.vw-flip { animation: vw-flip var(--dur-2) var(--ease-out); }

/* --------------------------------------------------------------------------
   Scroll reveals - additive only, wrappers without a canvas.
   -------------------------------------------------------------------------- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .vw-tools > li,
    .vw-similar > li {
      animation: rise-in linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 55%;
    }
  }
}

/* --------------------------------------------------------------------------
   Breakpoints: 375 (base) / 600 / 768 / 900 / 1100 / 1440 / 1600 / 2200+
   -------------------------------------------------------------------------- */
@media (min-width: 600px) {
  .vw-connect { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vw-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .vw-stats { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .vw-cal-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .vw-mini-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .vw-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .vw-similar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
  .vw-avatar { width: 96px; height: 96px; border-radius: 22px; }
  .vw-avatar-fallback { font-size: 2.3rem; }
  .vw-dgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vw-d-wide { grid-column: 1 / -1; }
  .vw-pings { grid-template-columns: 10rem minmax(0, 1fr); align-items: center; }
  .vw-pings-median { flex-direction: column; align-items: flex-start; }
}
@media (min-width: 900px) {
  .vw-hero { grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); padding: 1.5rem 1.6rem; align-items: center; }
  .vw-hero-live { padding-left: 1.75rem; border-left: 1px solid color-mix(in srgb, var(--border) 80%, transparent); }
  .vw-connect { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
  .vw-mgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vw-c-main, .vw-c-drops, .vw-c-cal, .vw-c-integ { grid-column: span 2; }
  .vw-similar { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .vw-signals { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
  .vw-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vw-mini-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .vw-kpis { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .vw-dgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .vw-d-tags { grid-column: 1 / -1; }            /* 3 cols: info/config/endpoints, then tags full row */
  .vw-mini-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .vw-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1440px) {
  :root { --vw-max: 1440px; --vw-gutter: 2rem; --vw-chart-h: 320px; --vw-chart-sm: 240px; --vw-cell-max: 22px; }
}
@media (min-width: 1600px) {
  :root { --vw-max: 1560px; }
}
/* Ultrawide (owner's 3440px). 2400px frame, 4-column metrics grid: the main
   chart takes the full row with its stats as a side rail (a 2400px-wide line
   at 300px tall just flattens), everything else packs 2+1+1 / 3+1 / 2+2. */
@media (min-width: 2200px) {
  :root { --vw-max: 2400px; --vw-gutter: 2.5rem; --vw-chart-h: 360px; --vw-chart-sm: 270px; --vw-cell-max: 30px; }
  .vw-page { gap: 1.35rem; }
  .vw-hero { grid-template-columns: minmax(0, 1fr) 460px; padding: 1.8rem 2rem; }
  .vw-avatar { width: 112px; height: 112px; border-radius: 26px; }
  .vw-title { font-size: 2rem; }
  .vw-num { font-size: 4.2rem; }
  .vw-mgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
  .vw-c-main { grid-column: 1 / -1; }
  .vw-main-body { grid-template-columns: minmax(0, 1fr) 300px; align-items: stretch; }
  .vw-main-body .vw-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; }
  .vw-c-drops { grid-column: span 2; }
  .vw-c-clock, .vw-c-daily { grid-column: span 1; }
  .vw-mgrid.is-daily .vw-c-daily { grid-column: span 3; }
  .vw-c-cal { grid-column: span 3; }
  .vw-c-integ { grid-column: span 1; }
  .vw-c-integ .vw-signals { grid-template-columns: minmax(0, 1fr); }
  .vw-c-monthly, .vw-c-yearly, .vw-c-stab, .vw-c-perf { grid-column: span 2; }
  .vw-dgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .vw-d-wide { grid-column: 1 / -1; }
  .vw-d-tags { grid-column: auto; }             /* 4 cols: all four cards in one row */
  .vw-plist { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
  .vw-similar { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .vw-tools { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  :root { --vw-gutter: 1rem; --vw-chart-h: 230px; --vw-chart-sm: 200px; --vw-cell: 12px; }
  .vw-page { gap: 0.9rem; padding-bottom: 2.5rem; }
  .vw-hero { padding: 1.05rem 1rem 1.1rem; }
  .vw-hero-id { gap: 0.8rem; }
  .vw-avatar { width: 56px; height: 56px; border-radius: 14px; }
  .vw-avatar-fallback { font-size: 1.4rem; }
  .vw-actions .btn { flex: 1 1 auto; justify-content: center; }
  .vw-actions .vw-join { flex-basis: 100%; }
  .vw-card { padding: 0.9rem 0.9rem 1rem; }
  .vw-card-head .vw-legend, .vw-card-head .vw-inline-stats, .vw-card-head .vw-cal-legend { flex-basis: 100%; }
  .vw-toolbar { margin-top: 0.4rem; }
  .vw-range { flex: 1 1 100%;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
            mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent); }
  .vw-tab { padding: 0.75rem 0.7rem; font-size: 0.82rem; }
  .vw-clock-box { width: 160px; height: 160px; }
  .vw-plist { grid-template-columns: minmax(0, 1fr); }
  .vw-search { max-width: none; flex-basis: 100%; }
  .vw-list-count { margin-left: 0; }
  .vw-kv > div { flex-wrap: wrap; }
  .vw-table tbody td:nth-child(2) { max-width: 12rem; }
  /* 375px: key column was 205px nowrap -> 444px table in a 314px box, copy column off-screen */
  .vw-table tbody th { white-space: normal; word-break: break-all; max-width: 8.5rem; }
  /* WCAG 2.2 target size (24px min); measured 20-23px */
  .vw-chip, .vw-copy, .vw-seg button { min-height: 28px; }
  .vw-chip, .vw-seg button { display: inline-flex; align-items: center; }
}
@media (max-width: 380px) {
  .vw-kpi-num { font-size: 1.15rem; }
  .vw-stats dd { font-size: 0.95rem; }
}

/* --------------------------------------------------------------------------
   Reduced motion. The global guard zeroes durations and delays; an infinite
   animation with ~0 duration still cycles, so the dot is killed outright and
   every keyframed piece is pinned to its END state (the meter keeps its own
   scaleX(var(--vw-fill)) - `animation: none` restores exactly that).
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .vw-live-dot::after { animation: none !important; opacity: 0 !important; }
  .vw-crumbs, .vw-hero, .vw-avatar, .vw-num, .vw-meter > span, .vw-connect, .vw-kpi,
  .vw-bar > span, .vw-tabbar-wrap, .vw-tabpanel, .vw-card, .vw-chart canvas, .vw-clock-box canvas,
  .vw-cal-grid.is-ready, .vw-ribbon > li, .vw-empty, .vw-flip,
  .vw-tools > li, .vw-similar > li { animation: none !important; opacity: 1 !important; }
  .vw-meter > span, .vw-tabs-ink.is-ready { transition: none !important; }
  .vw-kpi:hover, .vw-tile:hover, .vw-sim:hover, .vw-chip:hover, .vw-stack-chip:hover, .vw-res:hover { transform: none; }
}

/* ==========================================================================
   Global Metrikler v2 (/global) - "gl-" block.
   --------------------------------------------------------------------------
   Appended as its own block at the END of style.css, after "vw-". Nothing
   above is edited. Same contract as Home v2 / Servers v2 / View v2:
     - Own prefix. The old .stats-row / .game-split-row / .growth-table /
       .range-select / .metric-toggle rules stay for any page still using
       them; /global no longer renders them.
     - Only transform / opacity animate (colour / filter on hover states).
       Widths are static and change at most once a minute, un-transitioned.
     - Entrances use `backwards` fill. Scroll reveals (view() timelines) sit
       on list items / cards that have NO hover transform of their own.
     - Exactly ONE infinite animation: .gl-dot::after (the live dot). It stops
       when data is stale and is killed outright under reduced motion. The
       Turkiye ripple on the map is a finite 2-iteration one-shot.
     - Bars: static inline width + the shared bar-fill sweep. The one bar
       whose value changes live without a re-render (.gl-meter) uses
       transform: scaleX(var(--gl-fill)) with the FROM-ONLY gl-grow keyframe -
       never scaleX(var()) + bar-fill (bar-fill ends at scaleX(1): overshoot
       then snap back).
     - No backdrop-filter on anything holding a canvas (Signature v4 rule).
     - No text-transform: uppercase anywhere (lang="tr" dotted-I trap).
     - Every text colour that carries meaning is a light/dark token pair;
       green TEXT is #166534 (light) / #4ade80 (dark).
   ========================================================================== */

:root {
  --gl-max: 1320px;
  --gl-gutter: 1.5rem;
  --gl-gap: 1rem;
  --gl-chart-h: 300px;
  --gl-cell: 11px;
  --gl-cell-max: 20px;

  --gl-up: #166534;                 /* text: 7.1:1 on #fff, 5.7:1 on its chip tint */
  --gl-down: #b91c1c;               /* text: 6.5:1 on #fff */
  --gl-up-fill: #16a34a;            /* fills only */
  --gl-down-fill: #dc2626;          /* fills only */
  --gl-live: #16a34a;               /* dot fill only, never text */
  --gl-heat: #1447e6;               /* sequential fills (calendar, size buckets) */
  --gl-pt: #1447e6;                 /* map dots */
  --gl-pt-hi: #7ea2ff;
  --gl-home: var(--nz-accent-2);    /* Turkiye on the map */
  --gl-land-dot: rgb(15 23 42 / 0.2);
  --gl-land-base: rgb(20 71 230 / 0.035);
  --gl-prev: #8b8b98;               /* previous-period line (matches the chart) */
}
:root.dark {
  --gl-up: #4ade80;
  --gl-down: #ff6568;
  --gl-up-fill: #22c55e;
  --gl-down-fill: #ef4444;
  --gl-live: #22c55e;
  --gl-heat: #3b86f7;               /* #1447e6 is 2.9:1 on #171717 */
  --gl-pt: #3b86f7;
  --gl-pt-hi: #a5c8ff;
  --gl-land-dot: rgb(255 255 255 / 0.17);
  --gl-land-base: rgb(255 255 255 / 0.022);
}

/* `hidden` must beat every display rule in this block. */
.gl-page [hidden] { display: none !important; }
.gl-sr {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* FROM-only keyframes: each ends at the element's own transform/opacity. */
@keyframes gl-grow   { from { transform: scaleX(0); } }
@keyframes gl-grow-y { from { transform: scaleY(0); } }
@keyframes gl-pop    { from { opacity: 0; transform: scale(0.25); } }
@keyframes gl-ripple { from { opacity: 0.55; transform: scale(1); } to { opacity: 0; transform: scale(2.6); } }
@keyframes gl-flip   { from { opacity: 0; transform: translateY(-4px); } }
.gl-flip { animation: gl-flip var(--dur-2) var(--ease-out); }

/* --------------------------------------------------------------------------
   Frame + shared surface
   -------------------------------------------------------------------------- */
.gl-page {
  width: 100%; max-width: var(--gl-max); margin: 0 auto;
  padding: 0 var(--gl-gutter) 3rem;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.1rem;
}
.gl-page > * { min-width: 0; }

.gl-surface {
  position: relative; min-width: 0;
  border-radius: var(--radius);
  background-color: var(--card);
  background-image: var(--nz-card-wash);
  box-shadow: inset 0 1px 0 0 var(--nz-hairline), 0 0 0 1px var(--border), var(--nz-elev-1);
}
.gl-muted { color: var(--muted-foreground); }
.gl-t-up { color: var(--gl-up); font-weight: 650; }
.gl-t-down { color: var(--gl-down); font-weight: 650; }

/* Direction chip - the glyph carries direction too, never colour alone. */
.gl-delta {
  display: inline-flex; align-items: center; gap: 0.2rem;
  padding: 0.14rem 0.52rem; border-radius: 999px;
  font-size: 0.7rem; font-weight: 650; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.gl-delta.up   { color: var(--gl-up);   background: color-mix(in srgb, var(--gl-up-fill) 14%, transparent); }
.gl-delta.down { color: var(--gl-down); background: color-mix(in srgb, var(--gl-down-fill) 13%, transparent); }
.gl-delta.flat { color: var(--muted-foreground); background: var(--accent); }

/* Bars: static width carries the value, bar-fill only sweeps it in. */
.gl-bar { display: block; height: 5px; border-radius: 999px; overflow: hidden; background: var(--muted); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border) 80%, transparent); }
.gl-bar > span {
  display: block; height: 100%; border-radius: inherit; transform-origin: left center;
  background: linear-gradient(90deg, var(--chart-1), color-mix(in srgb, var(--nz-accent-2) 65%, var(--chart-1)));
  animation: bar-fill 0.65s var(--ease-out) 0.25s backwards;
}

.gl-tag-new {
  display: inline-flex; padding: 0.02rem 0.42rem; border-radius: 999px; vertical-align: 1px;
  font-size: 0.64rem; font-weight: 700; color: var(--nz-accent-text);
  background: color-mix(in srgb, var(--chart-1) 12%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--chart-1) 26%, transparent);
}
.gl-flag { width: 14px; height: 14px; border-radius: 3px; flex-shrink: 0; display: inline-block; }

/* --------------------------------------------------------------------------
   Hero: title + jump nav | live pulse card
   -------------------------------------------------------------------------- */
.gl-hero {
  position: relative; isolation: isolate;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem 2.5rem; align-items: center;
  padding: 2rem 0 0.25rem;
}
/* Static atmosphere - bloom + faint telemetry grid, no loop. */
.gl-hero::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  inset: -1.5rem -12% -1rem;
  background:
    radial-gradient(40% 70% at 10% 8%, var(--nz-mesh-1), transparent 70%),
    radial-gradient(34% 60% at 92% 10%, var(--nz-mesh-2), transparent 70%),
    radial-gradient(30% 50% at 60% 100%, var(--nz-mesh-3), transparent 72%),
    linear-gradient(var(--nz-grid-line) 1px, transparent 1px) 0 0 / 44px 44px,
    linear-gradient(90deg, var(--nz-grid-line) 1px, transparent 1px) 0 0 / 44px 44px;
  -webkit-mask-image: radial-gradient(75% 95% at 35% 0%, #000 25%, transparent 80%);
          mask-image: radial-gradient(75% 95% at 35% 0%, #000 25%, transparent 80%);
  opacity: 0.55;
}
.gl-hero-copy { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.gl-hero-copy > * { animation: rise-in 0.5s var(--ease-out) backwards; }
.gl-hero-copy > :nth-child(2) { animation-delay: 0.05s; }
.gl-hero-copy > :nth-child(3) { animation-delay: 0.1s; }
.gl-hero-copy > :nth-child(4) { animation-delay: 0.16s; }

.gl-live {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.28rem 0.7rem; border-radius: 999px;
  font-size: 0.74rem; font-weight: 600; font-variant-numeric: tabular-nums;
  color: var(--foreground);
  background: color-mix(in srgb, var(--card) 62%, transparent);
  box-shadow: inset 0 1px 0 0 var(--nz-hairline), 0 0 0 1px color-mix(in srgb, var(--chart-1) 22%, var(--border));
}
.gl-sep { opacity: 0.5; }
.gl-dot {
  position: relative; flex-shrink: 0; width: 8px; height: 8px; border-radius: 999px;
  background: var(--gl-live);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gl-live) 22%, transparent);
}
/* THE page's one loop: compositor-only, 8px, and it means "data is live". */
.gl-dot::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: var(--gl-live);
  animation: pulse-ring 2.4s var(--ease-out) infinite;
}
.gl-live.is-stale .gl-dot { background: var(--muted-foreground); box-shadow: 0 0 0 3px color-mix(in srgb, var(--muted-foreground) 20%, transparent); }
.gl-live.is-stale .gl-dot::after { animation: none; opacity: 0; }

.gl-hero h1 {
  margin: 0.85rem 0 0.55rem;
  font-size: clamp(2rem, 1.35rem + 2.2vw, 3.2rem); font-weight: 800;
  line-height: 1.05; letter-spacing: -0.038em; text-wrap: balance;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  /* background-image, never the shorthand (it resets background-clip). */
  .gl-h1-accent {
    background-image: linear-gradient(120deg, var(--chart-3), var(--nz-accent-2) 55%, var(--nz-accent-3));
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  }
}
.gl-lead { margin: 0 0 1.1rem; max-width: 40rem; font-size: 0.98rem; line-height: 1.6; color: var(--muted-foreground); text-wrap: pretty; }
.gl-lead strong { color: var(--foreground); font-weight: 650; font-variant-numeric: tabular-nums; }

.gl-jump { display: flex; flex-wrap: wrap; gap: 0.4rem; max-width: 100%; }
.gl-jump a {
  display: inline-flex; align-items: center; gap: 0.35rem; flex-shrink: 0;
  padding: 0.34rem 0.75rem; border-radius: 999px;
  font-size: 0.78rem; font-weight: 600; color: var(--muted-foreground);
  background-color: color-mix(in srgb, var(--card) 70%, transparent);
  background-image: linear-gradient(180deg, var(--nz-hairline), transparent);
  box-shadow: inset 0 0 0 1px var(--border);
  transition: color var(--dur-1) ease, transform var(--dur-1) var(--ease-out);
}
.gl-jump a svg { color: var(--nz-accent-text); }
.gl-jump a:hover { color: var(--foreground); transform: translateY(-1px); }
.gl-jump a:active { transform: scale(0.96); }

/* Live pulse card. No backdrop-filter (nothing behind it moves). */
.gl-pulse {
  display: flex; flex-direction: column; gap: 0.6rem; min-width: 0;
  padding: 1.15rem 1.2rem 1rem;
  box-shadow:
    inset 0 1px 0 0 var(--nz-hairline),
    0 0 0 1px color-mix(in srgb, var(--chart-1) 24%, var(--border)),
    var(--nz-elev-3),
    0 30px 60px -36px var(--nz-glow);
  animation: stat-rise 0.55s var(--ease-out) 0.08s backwards;
}
.gl-pulse::before {
  content: ""; position: absolute; top: 0; left: 1.2rem; right: 1.2rem; height: 2px;
  border-radius: 0 0 2px 2px; pointer-events: none; opacity: 0.9;
  background: linear-gradient(90deg, var(--chart-1), var(--nz-accent-2) 50%, var(--nz-accent-3));
}
.gl-pulse-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.4rem 0.75rem; }
.gl-eyebrow { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.74rem; font-weight: 600; color: var(--muted-foreground); }
.gl-eyebrow svg { color: var(--nz-accent-text); }
.gl-pulse-fig { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.2rem 0.6rem; }
.gl-pulse-num {
  display: inline-block;
  font-size: clamp(2.5rem, 1.8rem + 2.4vw, 3.6rem); font-weight: 800; line-height: 1;
  letter-spacing: -0.04em; font-variant-numeric: tabular-nums;
  color: var(--nz-accent-text);
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .gl-pulse-num {
    background-image: linear-gradient(135deg, var(--chart-1), var(--nz-accent-2));
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  }
  :root.dark .gl-pulse-num { background-image: linear-gradient(135deg, var(--chart-3), var(--nz-accent-2)); }
}
.gl-pulse-unit { font-size: 0.86rem; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.gl-pulse-unit b { color: var(--foreground); font-weight: 600; }

.gl-split { display: flex; gap: 2px; height: 6px; border-radius: 999px; overflow: hidden; background: var(--muted); }
.gl-split > span { display: block; height: 100%; transform-origin: left center; animation: bar-fill 0.7s var(--ease-out) 0.35s backwards; }
.gl-split > .is-gta { background: linear-gradient(90deg, var(--chart-1), var(--chart-3)); }
.gl-split > .is-rdr { background: var(--nz-accent-2); animation-delay: 0.5s; }
.gl-split-legend { display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; font-size: 0.74rem; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.gl-split-legend b { color: var(--foreground); font-weight: 600; }
.gl-split-legend small { font-size: 0.68rem; }
.gl-split-legend i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 0.35rem; }
.gl-split-legend i.is-gta { background: var(--chart-3); }
.gl-split-legend i.is-rdr { background: var(--nz-accent-2); }
.gl-split-total { margin-left: auto; }

.gl-record { display: flex; flex-direction: column; gap: 0.35rem; padding-top: 0.6rem; border-top: 1px solid color-mix(in srgb, var(--border) 75%, transparent); }
.gl-record-line { display: flex; justify-content: space-between; gap: 0.3rem 0.75rem; flex-wrap: wrap; font-size: 0.74rem; font-variant-numeric: tabular-nums; }
.gl-record-line strong { font-weight: 700; color: var(--foreground); }
.gl-record-line b { color: var(--foreground); font-weight: 600; }
.gl-meter { height: 8px; border-radius: 999px; overflow: hidden; background: var(--muted); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border) 80%, transparent); }
.gl-meter > span {
  display: block; height: 100%; width: 100%; border-radius: inherit;
  transform: scaleX(var(--gl-fill, 0)); transform-origin: left center;
  background: linear-gradient(90deg, var(--chart-1), var(--nz-accent-2) 70%, var(--nz-accent-3));
  animation: gl-grow 0.9s var(--ease-out) 0.35s backwards;
  transition: transform 0.6s var(--ease-out);
}

.gl-pulse-foot {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem;
  margin: 0; padding-top: 0.7rem;
  border-top: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
}
.gl-pulse-foot dt { font-size: 0.66rem; font-weight: 600; color: var(--muted-foreground); }
.gl-pulse-foot dd { margin: 0.15rem 0 0; font-size: 0.7rem; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.gl-pulse-foot dd b { display: block; font-size: 0.98rem; font-weight: 700; color: var(--foreground); letter-spacing: -0.01em; }

/* --------------------------------------------------------------------------
   KPI strip - always 6: 2 / 3 / 6 columns, never an orphan row.
   -------------------------------------------------------------------------- */
.gl-kpis { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem; }
.gl-kpi {
  display: flex; flex-direction: column; gap: 0.35rem; padding: 0.85rem 0.95rem 0.9rem;
  border-radius: calc(var(--radius) - 4px);
  animation: rise-in-sm 0.36s var(--ease-out) backwards;
  animation-delay: calc(0.12s + min(var(--i, 0), 6) * 0.045s);
  transition: transform var(--dur-2) var(--ease-out);
}
.gl-kpi:hover { transform: translateY(-2px); }
.gl-kpi-label { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.72rem; font-weight: 600; color: var(--muted-foreground); }
.gl-kpi-label svg { color: var(--nz-accent-text); }
.gl-kpi-line { display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; }
.gl-kpi-num { font-size: 1.4rem; font-weight: 750; line-height: 1.15; letter-spacing: -0.025em; font-variant-numeric: tabular-nums; }
.gl-kpi-num small { font-size: 0.72rem; font-weight: 500; letter-spacing: 0; color: var(--muted-foreground); }
.gl-kpi-sub { font-size: 0.7rem; line-height: 1.45; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.gl-kpi-sub b { color: var(--foreground); font-weight: 650; }
.gl-kpi .gl-bar { margin-top: 0.1rem; }

/* --------------------------------------------------------------------------
   Card grid. DOM order: trend, week, records, cal, monthly, movers, map,
   regions, comp, tags - chosen so 1, 2 and 4 columns all pack without holes.
   -------------------------------------------------------------------------- */
.gl-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gl-gap); }
.gl-grid > * { min-width: 0; }

.gl-card {
  display: flex; flex-direction: column; gap: 0.9rem; padding: 1.05rem 1.15rem 1.15rem;
  scroll-margin-top: 5rem;
  animation: rise-in-sm 0.36s var(--ease-out) backwards;
  animation-delay: calc(0.08s + min(var(--i, 0), 4) * 0.04s);
}
/* Accent ring on hover as an opacity-faded layer - never a moving panel
   under a chart you are reading. pointer-events:none keeps tooltips. */
.gl-card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--chart-1) 32%, transparent);
  opacity: 0; transition: opacity var(--dur-2) ease;
}
.gl-card:hover::after { opacity: 1; }
.gl-c-trend::before {
  content: ""; position: absolute; top: 0; left: 1.15rem; right: 1.15rem; height: 2px;
  border-radius: 0 0 2px 2px; pointer-events: none; opacity: 0.85;
  background: linear-gradient(90deg, var(--chart-1), var(--nz-accent-2) 50%, var(--nz-accent-3));
}

.gl-card-head {
  display: flex; align-items: flex-start; gap: 0.65rem; flex-wrap: wrap;
  padding-bottom: 0.75rem; border-bottom: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
}
.gl-card-icon {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 2rem; height: 2rem; border-radius: 0.6rem; color: var(--nz-accent-text);
  background: linear-gradient(140deg, color-mix(in srgb, var(--chart-1) 16%, transparent), color-mix(in srgb, var(--nz-accent-2) 10%, transparent));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--chart-1) 24%, transparent);
  transition: transform var(--dur-3) var(--ease-out);
}
.gl-card:hover .gl-card-icon { transform: scale(1.08); }
.gl-card-titles { flex: 1 1 12rem; min-width: 0; }
.gl-card-title { margin: 0; font-size: 1rem; font-weight: 700; letter-spacing: -0.012em; text-wrap: balance; }
.gl-card-sub { margin: 0.15rem 0 0; font-size: 0.76rem; line-height: 1.45; color: var(--muted-foreground); text-wrap: pretty; }
.gl-card-sub strong { color: var(--foreground); }

.gl-insight { margin: 0; font-size: 0.84rem; line-height: 1.55; color: var(--muted-foreground); text-wrap: pretty; }
.gl-insight strong { color: var(--foreground); font-weight: 650; font-variant-numeric: tabular-nums; }
/* Block, not flex: notes carry inline <strong>/<b>, which flex would split into columns. */
.gl-note { display: block; margin: 0; padding-left: 1.2rem; text-indent: -1.2rem; font-size: 0.7rem; line-height: 1.5; color: var(--muted-foreground); text-wrap: pretty; }
.gl-note svg { display: inline-block; vertical-align: -2px; margin-right: 0.4rem; color: var(--nz-accent-text); }
.gl-note strong { color: var(--foreground); font-weight: 650; font-variant-numeric: tabular-nums; }
.gl-empty-inline { margin: 0; font-size: 0.8rem; color: var(--muted-foreground); }
.gl-empty {
  display: flex; flex-direction: column; align-items: center; gap: 0.55rem;
  max-width: 30rem; margin: 0 auto; padding: 1.5rem 1rem 1rem; text-align: center;
  font-size: 0.84rem; line-height: 1.55; color: var(--muted-foreground);
}
.gl-empty p { margin: 0; text-wrap: pretty; }
.gl-empty-icon {
  display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: 0.9rem;
  color: var(--nz-accent-text); background: color-mix(in srgb, var(--chart-1) 12%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--chart-1) 24%, transparent);
}
.gl-more {
  display: inline-flex; align-items: center; gap: 0.3rem; align-self: flex-start;
  font-size: 0.8rem; font-weight: 600; color: var(--nz-accent-text); border-radius: 6px;
}
.gl-more > span { display: inline-block; transition: transform var(--dur-2) var(--ease-out); }
.gl-more:hover > span { transform: translateX(3px); }

/* --------------------------------------------------------------------------
   Trend card
   -------------------------------------------------------------------------- */
.gl-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.3rem 0.9rem; align-self: center; font-size: 0.72rem; color: var(--muted-foreground); }
.gl-legend li { display: inline-flex; align-items: center; gap: 0.35rem; }
.gl-legend i { display: inline-block; width: 16px; height: 0; border-top: 2.5px solid var(--chart-3); border-radius: 2px; }
.gl-legend i.is-dash { border-top: 2px dashed var(--gl-prev); }

.gl-toolbar { display: flex; align-items: center; gap: 0.55rem 0.6rem; flex-wrap: wrap; }
.gl-range {
  display: flex; gap: 0.2rem; padding: 0.22rem; border-radius: 999px; min-width: 0; max-width: 100%;
  overflow-x: auto; scrollbar-width: none;
  background: var(--accent); box-shadow: inset 0 0 0 1px var(--border);
}
.gl-range::-webkit-scrollbar { display: none; }
.gl-range a {
  flex-shrink: 0; padding: 0.32rem 0.8rem; border-radius: 999px; white-space: nowrap;
  font-size: 0.78rem; font-weight: 600; color: var(--muted-foreground);
  transition: color var(--dur-1) ease, transform var(--dur-1) var(--ease-out);
}
.gl-range a:hover { color: var(--foreground); }
.gl-range a:active { transform: scale(0.96); }
.gl-range a[aria-current="page"] {
  color: #fff;
  background-image: linear-gradient(135deg, var(--chart-1), var(--nz-btn-2));
  box-shadow: inset 0 1px 0 0 rgb(255 255 255 / 0.2), 0 6px 16px -8px var(--nz-glow);
}
.gl-seg { display: inline-flex; gap: 0.2rem; padding: 0.2rem; border-radius: 999px; background: var(--accent); box-shadow: inset 0 0 0 1px var(--border); }
.gl-seg button {
  padding: 0.3rem 0.75rem; border: 0; border-radius: 999px; cursor: pointer; background: transparent;
  color: var(--muted-foreground); font: inherit; font-size: 0.76rem; font-weight: 600; white-space: nowrap;
  transition: background-color var(--dur-1) ease, color var(--dur-1) ease;
}
.gl-seg button:hover { color: var(--foreground); }
.gl-seg button:focus-visible { outline: 2px solid var(--chart-1); outline-offset: 1px; }
.gl-seg button[aria-pressed="true"] { background: var(--card); color: var(--foreground); box-shadow: 0 1px 3px rgb(0 0 0 / 0.18), inset 0 0 0 1px var(--border); }
.gl-chipbtn {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.36rem 0.75rem; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border); background: transparent;
  color: var(--muted-foreground); font: inherit; font-size: 0.76rem; font-weight: 600; white-space: nowrap;
  transition: color var(--dur-1) ease, border-color var(--dur-1) ease, background-color var(--dur-1) ease, transform var(--dur-1) var(--ease-out);
}
.gl-chipbtn:hover { color: var(--foreground); border-color: color-mix(in srgb, var(--chart-1) 45%, var(--border)); }
.gl-chipbtn:active { transform: scale(0.95); }
.gl-chipbtn[aria-pressed="true"] { color: var(--foreground); background: color-mix(in srgb, var(--accent) 80%, transparent); }
.gl-chipbtn-dash { width: 14px; height: 0; border-top: 2px dashed var(--gl-prev); opacity: 0.45; transition: opacity var(--dur-1) ease; }
.gl-chipbtn[aria-pressed="true"] .gl-chipbtn-dash { opacity: 1; }
.gl-refresh { display: inline-flex; align-items: center; gap: 0.35rem; margin-left: auto; font-size: 0.72rem; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.gl-refresh strong { color: var(--foreground); font-weight: 650; min-width: 3.2em; }

.gl-chart { position: relative; height: var(--gl-chart-h); min-width: 0; transition: opacity var(--dur-2) ease; }
.gl-chart canvas { max-height: none; animation: fade-in 0.45s ease-out 0.12s backwards; }
.gl-chart.is-loading { opacity: 0.55; }
.gl-chart-empty { display: none; position: absolute; inset: 0; margin: 0; place-items: center; text-align: center; padding: 1rem; font-size: 0.8rem; color: var(--muted-foreground); }
/* !important: Chart.js writes an inline display:block on its canvas. */
.gl-chart.is-empty canvas { display: none !important; }
.gl-chart.is-empty .gl-chart-empty { display: grid; }

.gl-stats { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
.gl-stats > div, .gl-rec {
  min-width: 0; padding: 0.55rem 0.7rem; border-radius: calc(var(--radius) - 6px);
  background: color-mix(in srgb, var(--accent) 65%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border) 80%, transparent);
}
.gl-stats dt { font-size: 0.68rem; font-weight: 600; color: var(--muted-foreground); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gl-stats dd { margin: 0.2rem 0 0; font-size: 1.05rem; font-weight: 700; font-variant-numeric: tabular-nums; display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.1rem 0.35rem; }
.gl-stats dd small { font-size: 0.7rem; font-weight: 500; color: var(--muted-foreground); }

/* --------------------------------------------------------------------------
   Weekday rhythm - diverging bars around the weekly mean
   -------------------------------------------------------------------------- */
.gl-week { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.35rem; flex: 1; min-height: 11rem; }
.gl-wk { display: grid; grid-template-rows: minmax(7rem, 1fr) auto auto; gap: 0.25rem; min-width: 0; text-align: center; }
.gl-wk-plot {
  position: relative; border-radius: 8px;
  background:
    linear-gradient(color-mix(in srgb, var(--border) 90%, transparent), color-mix(in srgb, var(--border) 90%, transparent)) center / 100% 1px no-repeat,
    color-mix(in srgb, var(--accent) 45%, transparent);
}
.gl-wk-bar {
  position: absolute; left: 22%; right: 22%; border-radius: 5px;
  animation: gl-grow-y 0.6s var(--ease-out) backwards;
  animation-delay: calc(0.2s + var(--i, 0) * 45ms);
}
.gl-wk.is-pos .gl-wk-bar { bottom: 50%; transform-origin: bottom center; background: linear-gradient(0deg, var(--chart-1), color-mix(in srgb, var(--nz-accent-2) 60%, var(--chart-3))); }
.gl-wk.is-neg .gl-wk-bar { top: 50%; transform-origin: top center; background: color-mix(in srgb, var(--muted-foreground) 45%, transparent); }
.gl-wk-val {
  position: absolute; left: 0; right: 0; font-size: 0.64rem; font-weight: 650; font-variant-numeric: tabular-nums;
  color: var(--muted-foreground); white-space: nowrap;
}
.gl-wk.is-pos .gl-wk-val { top: 0.3rem; }
.gl-wk.is-neg .gl-wk-val { bottom: 0.3rem; }
.gl-wk.is-max .gl-wk-val { color: var(--nz-accent-text); }
.gl-wk-day { font-size: 0.74rem; font-weight: 650; }
.gl-wk.is-max .gl-wk-day { color: var(--nz-accent-text); }
.gl-wk-avg { font-size: 0.62rem; color: var(--muted-foreground); font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --------------------------------------------------------------------------
   Records
   -------------------------------------------------------------------------- */
.gl-recs { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.gl-rec { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label num" "sub num"; align-items: center; column-gap: 0.75rem; padding: 0.7rem 0.85rem; transition: transform var(--dur-2) var(--ease-out); }
.gl-rec:hover { transform: translateY(-2px); }
.gl-rec-label { grid-area: label; font-size: 0.74rem; font-weight: 600; color: var(--muted-foreground); }
.gl-rec-sub { grid-area: sub; font-size: 0.72rem; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.gl-rec-num { grid-area: num; font-size: 1.35rem; font-weight: 780; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.gl-rec:first-child .gl-rec-num { color: var(--nz-accent-text); }
.gl-rec.is-low .gl-rec-num { color: var(--muted-foreground); }
/* Fill the row height the weekday card sets, instead of leaving a void. */
.gl-c-records .gl-recs { flex: 1; grid-auto-rows: 1fr; }

/* --------------------------------------------------------------------------
   Calendar
   -------------------------------------------------------------------------- */
.gl-cal-legend { display: inline-flex; align-items: center; gap: 3px; align-self: center; font-size: 0.68rem; color: var(--muted-foreground); }
.gl-cal-legend span { margin: 0 0.25rem; }
.gl-cal-legend i { width: 11px; height: 11px; border-radius: 3px; }
.gl-cal-scroll { overflow-x: auto; overscroll-behavior-x: contain; padding-bottom: 0.3rem; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--muted-foreground) 40%, transparent) transparent; }
.gl-cal-grid {
  display: grid; grid-auto-flow: column;
  grid-template-rows: auto repeat(7, auto);
  grid-template-columns: 2rem repeat(var(--gl-weeks, 53), minmax(var(--gl-cell), 1fr));
  gap: 3px;
  min-width: calc(2rem + var(--gl-weeks, 53) * (var(--gl-cell) + 3px));
  max-width: calc(2rem + var(--gl-weeks, 53) * (var(--gl-cell-max) + 3px));
  animation: fade-in 0.5s ease-out 0.15s backwards;
}
.gl-cal-m { height: 1rem; font-size: 0.64rem; line-height: 1rem; color: var(--muted-foreground); white-space: nowrap; overflow: visible; }
.gl-cal-wd { font-size: 0.6rem; line-height: 1; color: var(--muted-foreground); align-self: center; }
.gl-cal-d, .gl-cal-legend i { display: block; aspect-ratio: 1; border-radius: 3px; background: var(--muted); }
.gl-cal-d { transition: transform var(--dur-1) var(--ease-out); }
.gl-cal-d:hover { transform: scale(1.25); }
.gl-cal-d[data-l="x"] { background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border) 80%, transparent); }
.gl-cal-d[data-l="f"] { visibility: hidden; }
.gl-c-cal [data-l="1"] { background: color-mix(in srgb, var(--gl-heat) 24%, var(--muted)); }
.gl-c-cal [data-l="2"] { background: color-mix(in srgb, var(--gl-heat) 48%, var(--muted)); }
.gl-c-cal [data-l="3"] { background: color-mix(in srgb, var(--gl-heat) 74%, var(--muted)); }
.gl-c-cal [data-l="4"] { background: var(--gl-heat); }
.gl-cal-d.is-today { box-shadow: 0 0 0 1.5px var(--foreground); }

/* --------------------------------------------------------------------------
   Tables (monthly growth, size buckets)
   -------------------------------------------------------------------------- */
.gl-table-wrap { overflow-x: auto; border-radius: calc(var(--radius) - 6px); box-shadow: inset 0 0 0 1px var(--border); scrollbar-width: thin; }
.gl-table-wrap.is-flat { box-shadow: none; border-radius: 0; }
.gl-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; font-variant-numeric: tabular-nums; }
.gl-table thead th { text-align: left; font-size: 0.7rem; font-weight: 600; color: var(--muted-foreground); padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--border); white-space: nowrap; background: color-mix(in srgb, var(--accent) 45%, transparent); }
.gl-table tbody th { text-align: left; font-weight: 600; white-space: nowrap; }
.gl-table tbody th, .gl-table tbody td { padding: 0.55rem 0.75rem; border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent); vertical-align: middle; }
.gl-table tbody tr:last-child > * { border-bottom: 0; }
.gl-table tbody tr { transition: background-color var(--dur-1) ease; }
.gl-table tbody tr:hover { background: color-mix(in srgb, var(--accent) 55%, transparent); }
.gl-growth td:not(.gl-col-bar), .gl-growth thead th:not(:first-child) { text-align: right; }
.gl-growth .gl-col-bar { width: 22%; min-width: 7rem; }
.gl-growth tr.is-rolling { background: color-mix(in srgb, var(--chart-1) 7%, transparent); }
.gl-growth tr.is-rolling th { color: var(--nz-accent-text); }
.gl-comp-table td, .gl-comp-table thead th:not(:first-child) { text-align: right; }
.gl-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 0.5rem; vertical-align: -1px; }
.gl-table abbr { text-decoration: none; }

/* --------------------------------------------------------------------------
   Weekly movers
   -------------------------------------------------------------------------- */
.gl-movers { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem 1.5rem; }
.gl-mv-col { min-width: 0; }
.gl-mv-title { display: flex; align-items: center; gap: 0.45rem; margin: 0 0 0.45rem; font-size: 0.86rem; font-weight: 700; }
.gl-mv-col.is-up .gl-mv-title svg { color: var(--gl-up); }
.gl-mv-col.is-down .gl-mv-title svg { color: var(--gl-down); }
.gl-mv-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.1rem; }
.gl-mv {
  display: grid; grid-template-columns: 1.6rem minmax(0, 1fr) 4.5rem auto; align-items: center; column-gap: 0.7rem;
  min-height: 3.2rem; padding: 0.45rem 0.6rem; border-radius: calc(var(--radius) - 6px);
  color: inherit; transition: background-color var(--dur-1) ease;
}
.gl-mv:hover { background: color-mix(in srgb, var(--accent) 80%, transparent); }
.gl-mv:focus-visible { outline: 2px solid var(--chart-1); outline-offset: -2px; }
.gl-mv-rank { justify-self: center; font-size: 0.72rem; font-weight: 700; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.gl-mv-main { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.gl-mv-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.86rem; font-weight: 600; unicode-bidi: isolate; transition: color var(--dur-1) ease; }
.gl-mv:hover .gl-mv-name { color: var(--nz-accent-text); }
.gl-mv-sub { display: flex; align-items: center; gap: 0.35rem; min-width: 0; font-size: 0.7rem; color: var(--muted-foreground); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; }
.gl-mv-sub b { color: var(--foreground); font-weight: 600; }
.gl-mv-bar { height: 4px; border-radius: 999px; overflow: hidden; background: var(--muted); }
.gl-mv-bar > span { display: block; height: 100%; border-radius: inherit; transform-origin: left center; animation: bar-fill 0.65s var(--ease-out) 0.3s backwards; }
.gl-mv-col.is-up .gl-mv-bar > span { background: var(--gl-up-fill); }
.gl-mv-col.is-down .gl-mv-bar > span { background: var(--gl-down-fill); }
.gl-mv .gl-delta { justify-self: end; }

/* --------------------------------------------------------------------------
   World map
   -------------------------------------------------------------------------- */
.gl-map {
  position: relative; border-radius: calc(var(--radius) - 6px); overflow: hidden;
  background:
    radial-gradient(60% 80% at 50% 45%, color-mix(in srgb, var(--chart-1) 7%, transparent), transparent 75%),
    color-mix(in srgb, var(--accent) 35%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border) 80%, transparent);
}
.gl-map-svg { display: block; width: 100%; height: auto; }
.gl-land-dot { fill: var(--gl-land-dot); }
.gl-land-base { fill: var(--gl-land-base); }
.gl-land { fill: url(#glDots); }
.gl-map-eq { stroke: var(--border); stroke-width: 1; stroke-dasharray: 3 4; }
.gl-pt-stop-a { stop-color: var(--gl-pt-hi); }
.gl-pt-stop-b { stop-color: var(--gl-pt); }
.gl-pt { cursor: pointer; transition: opacity var(--dur-2) ease; }
.gl-pt:focus { outline: none; }
.gl-pt-core, .gl-pt-halo, .gl-pt-ring { transform-box: fill-box; transform-origin: center; }
.gl-pt-core {
  fill: url(#glPtGrad); stroke: var(--gl-pt); stroke-width: 1; stroke-opacity: 0.9;
  transition: transform var(--dur-2) var(--ease-out), stroke-width var(--dur-1) ease;
}
.gl-pt-halo { fill: var(--gl-pt); opacity: 0.1; transition: opacity var(--dur-2) ease; }
.gl-pt.is-home .gl-pt-core { fill: var(--gl-home); fill-opacity: 0.85; stroke: var(--gl-home); }
.gl-pt.is-home .gl-pt-halo { fill: var(--gl-home); opacity: 0.16; }
.gl-pt-ring { fill: none; stroke: var(--gl-home); stroke-width: 1.5; opacity: 0; }
.gl-pt:hover .gl-pt-core, .gl-pt.is-hot .gl-pt-core, .gl-pt:focus-visible .gl-pt-core { transform: scale(1.14); stroke-width: 2; }
.gl-pt:hover .gl-pt-halo, .gl-pt.is-hot .gl-pt-halo { opacity: 0.22; }
.gl-pt:focus-visible .gl-pt-core { stroke: var(--foreground); }
.gl-map.has-hot .gl-pt:not(.is-hot) { opacity: 0.35; }
.gl-pt-labels text {
  font: 650 11px/1 'Inter', ui-sans-serif, system-ui, sans-serif;
  fill: var(--foreground); paint-order: stroke; stroke: var(--card); stroke-width: 3px; stroke-linejoin: round;
}
.gl-pt-labels text.is-home { fill: var(--gl-home); }

/* Entrance, released on first view by the page script. Armed = hidden only
   while the JS that will un-hide it is known to be running (3s net). */
.gl-map[data-reveal="armed"] .gl-pt,
.gl-map[data-reveal="armed"] .gl-pt-labels { opacity: 0; }
.gl-map[data-reveal="in"] .gl-pt-core,
.gl-map[data-reveal="in"] .gl-pt-halo {
  animation: gl-pop 0.6s var(--ease-out) backwards;
  animation-delay: calc(0.05s + var(--i, 0) * 30ms);
}
.gl-map[data-reveal="in"] .gl-pt-labels { animation: fade-in 0.45s ease-out 0.6s backwards; }
/* One-shot, finite: two ripples over Turkiye once the dots have landed. */
.gl-map[data-reveal="in"] .gl-pt-ring,
.gl-map:not([data-reveal]) .gl-pt-ring { animation: gl-ripple 1.6s var(--ease-out) 1s 2 backwards; }

/* --------------------------------------------------------------------------
   Regions list
   -------------------------------------------------------------------------- */
.gl-reg-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.1rem; }
.gl-reg {
  display: grid; grid-template-columns: 1.4rem minmax(0, 1fr) auto;
  grid-template-areas: "flag name val" "flag bar bar" "flag share share";
  align-items: center; column-gap: 0.65rem; row-gap: 0.25rem;
  padding: 0.5rem 0.65rem; border-radius: calc(var(--radius) - 6px);
  color: inherit; transition: background-color var(--dur-1) ease;
}
.gl-reg:hover, .gl-reg.is-hot { background: color-mix(in srgb, var(--accent) 80%, transparent); }
.gl-reg:focus-visible { outline: 2px solid var(--chart-1); outline-offset: -2px; }
.gl-reg-flag { grid-area: flag; display: flex; align-self: start; padding-top: 0.1rem; }
.gl-reg-name { grid-area: name; min-width: 0; font-size: 0.84rem; font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gl-reg-rank { font-size: 0.72rem; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.gl-reg-val { grid-area: val; font-size: 0.84rem; font-variant-numeric: tabular-nums; }
.gl-reg-val b { font-weight: 700; }
.gl-reg .gl-bar { grid-area: bar; height: 4px; }
.gl-reg-share { grid-area: share; font-size: 0.68rem; color: var(--muted-foreground); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gl-reg.is-home { background: color-mix(in srgb, var(--chart-1) 9%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--chart-1) 30%, transparent); }
.gl-reg.is-home .gl-reg-name { font-weight: 700; }
.gl-reg-gap { text-align: center; line-height: 1; padding: 0.1rem 0; font-size: 0.8rem; color: var(--muted-foreground); }

/* --------------------------------------------------------------------------
   Size composition
   -------------------------------------------------------------------------- */
.gl-stack-block { display: grid; gap: 0.55rem; }
.gl-stack-row { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); align-items: center; gap: 0.75rem; }
.gl-stack-label { font-size: 0.72rem; font-weight: 600; color: var(--muted-foreground); }
.gl-stack {
  display: flex; gap: 2px; height: 14px; border-radius: 999px; overflow: hidden; background: var(--muted);
  transform-origin: left center; animation: gl-grow 0.8s var(--ease-out) 0.25s backwards;
}
.gl-stack > span { display: block; height: 100%; min-width: 2px; }
.gl-conc { display: grid; gap: 0.55rem; padding-top: 0.85rem; border-top: 1px solid color-mix(in srgb, var(--border) 75%, transparent); }
.gl-conc-title { margin: 0; font-size: 0.82rem; font-weight: 700; }
.gl-conc-row { display: grid; grid-template-columns: minmax(8rem, 12rem) minmax(0, 1fr) 3.6rem; align-items: center; gap: 0.75rem; }
.gl-conc-label { font-size: 0.74rem; color: var(--muted-foreground); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gl-conc-val { font-size: 0.84rem; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.gl-conc .gl-bar { height: 6px; }

.gl-seg-0 { background: color-mix(in srgb, var(--muted-foreground) 32%, var(--muted)); }
.gl-seg-1 { background: color-mix(in srgb, var(--gl-heat) 26%, var(--muted)); }
.gl-seg-2 { background: color-mix(in srgb, var(--gl-heat) 50%, var(--muted)); }
.gl-seg-3 { background: color-mix(in srgb, var(--gl-heat) 76%, var(--muted)); }
.gl-seg-4 { background: linear-gradient(90deg, var(--gl-heat), var(--nz-accent-2)); }

/* --------------------------------------------------------------------------
   Tags
   -------------------------------------------------------------------------- */
.gl-tags { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 0.45rem; }
.gl-tags > li { min-width: 0; }
.gl-tag {
  display: flex; flex-direction: column; gap: 0.25rem; height: 100%;
  padding: 0.55rem 0.75rem 0.6rem; border-radius: calc(var(--radius) - 6px);
  color: var(--foreground);
  background-color: var(--accent);
  background-image: linear-gradient(180deg, var(--nz-hairline), transparent);
  box-shadow: inset 0 0 0 1px var(--border);
  transition: transform var(--dur-1) var(--ease-out), color var(--dur-1) ease;
}
.gl-tag:hover { transform: translateY(-2px); color: var(--nz-accent-text); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--chart-1) 45%, var(--border)); }
.gl-tag:active { transform: scale(0.97); }
.gl-tag-name { font-size: 0.86rem; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gl-tag.t2 .gl-tag-name { font-size: 0.9rem; }
.gl-tag.t3 { background-color: color-mix(in srgb, var(--chart-1) 10%, var(--accent)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--chart-1) 28%, var(--border)); }
.gl-tag.t3 .gl-tag-name { font-size: 0.95rem; font-weight: 700; }
.gl-tag-meta { font-size: 0.68rem; color: var(--muted-foreground); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gl-tag-meta b { color: var(--foreground); font-weight: 650; }
.gl-tag-bar { display: block; height: 3px; border-radius: 999px; overflow: hidden; background: color-mix(in srgb, var(--muted-foreground) 14%, transparent); }
.gl-tag-bar > span { display: block; height: 100%; border-radius: inherit; background: var(--chart-3); transform-origin: left center; animation: bar-fill 0.6s var(--ease-out) 0.3s backwards; }
.gl-tags.by-players .gl-tag-bar > span { background: linear-gradient(90deg, var(--chart-1), var(--nz-accent-2)); }
/* Re-sort feedback: a fade, NOT a FLIP (20 x read+write for no information). */
.gl-resort > li { animation: fade-in 0.28s ease-out backwards; }

.gl-method { display: flex; align-items: flex-start; justify-content: center; gap: 0.4rem; margin: 0.5rem 0 0; text-align: center; font-size: 0.72rem; line-height: 1.5; color: var(--muted-foreground); }
.gl-method svg { flex-shrink: 0; margin-top: 0.15rem; }

/* --------------------------------------------------------------------------
   Scroll reveals - additive only. Without scroll-timeline support, or with
   reduced motion, none of this exists and everything is simply visible.
   Targets have no hover transform of their own, so `both` freezes nothing.
   -------------------------------------------------------------------------- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .gl-grid > .gl-card:not(.gl-c-trend) {
      animation: rise-in linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 35%;
    }
    .gl-mv-list > li,
    .gl-reg-list > li,
    .gl-growth tbody tr {
      animation: rise-in-sm linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 60%;
    }
    .gl-reg .gl-bar > span,
    .gl-growth .gl-bar > span,
    .gl-mv-bar > span,
    .gl-tag-bar > span {
      animation: bar-fill linear both;
      animation-timeline: view();
      animation-range: entry 15% cover 35%;
    }
    .gl-wk-bar {
      animation: gl-grow-y linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 40%;
    }
    .gl-stack {
      animation: gl-grow linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 35%;
    }
  }
}

/* --------------------------------------------------------------------------
   Breakpoints: 375 (base) / 600 / 768 / 900 / 1100 / 1440 / 1600 / 2200+
   -------------------------------------------------------------------------- */
@media (min-width: 600px) {
  .gl-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gl-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
  .gl-movers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gl-mv-col + .gl-mv-col { padding-left: 1.5rem; border-left: 1px solid color-mix(in srgb, var(--border) 75%, transparent); }
}
@media (min-width: 900px) {
  .gl-hero { grid-template-columns: minmax(0, 1fr) minmax(340px, 420px); padding-top: 2.5rem; }
  .gl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gl-c-trend, .gl-c-cal, .gl-c-monthly, .gl-c-movers, .gl-c-map, .gl-c-regions { grid-column: span 2; }
  /* Full-width regions card: the ranked list reads top-to-bottom in two columns. */
  .gl-c-regions .gl-reg-list { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(var(--gl-reg-rows, 6), auto); grid-auto-flow: column; column-gap: 1.25rem; }
}
@media (min-width: 1100px) {
  .gl-kpis { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (min-width: 1440px) {
  :root { --gl-max: 1440px; --gl-gutter: 2rem; --gl-chart-h: 320px; --gl-cell-max: 22px; }
}
@media (min-width: 1600px) {
  :root { --gl-max: 1560px; }
}
/* Ultrawide (owner's 3440px): 2400px frame like /view, 4-column grid.
   trend 3 + week 1 / records 1 + cal 3 / monthly 2 + movers 2 /
   map 3 + regions 1 / comp 2 + tags 2 - every row sums to 4. */
@media (min-width: 2200px) {
  :root { --gl-max: 2400px; --gl-gutter: 2.5rem; --gl-chart-h: 380px; --gl-gap: 1.25rem; --gl-cell-max: 30px; }
  .gl-page { gap: 1.35rem; }
  .gl-hero { grid-template-columns: minmax(0, 1fr) 520px; gap: 1.25rem 4rem; }
  .gl-hero h1 { font-size: 3.8rem; }
  .gl-pulse-num { font-size: 4.2rem; }
  .gl-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .gl-c-trend, .gl-c-cal, .gl-c-map { grid-column: span 3; }
  .gl-c-week, .gl-c-records, .gl-c-regions { grid-column: span 1; }
  .gl-c-regions .gl-reg-list { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-flow: row; }
  .gl-c-monthly, .gl-c-movers, .gl-c-comp, .gl-c-tags { grid-column: span 2; }
  .gl-movers { grid-template-columns: minmax(0, 1fr); }
  .gl-mv-col + .gl-mv-col { padding-left: 0; border-left: 0; padding-top: 1rem; border-top: 1px solid color-mix(in srgb, var(--border) 75%, transparent); }
  .gl-tags { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
}
/* Below 1100px the map is drawn narrower than its 900-unit viewBox, so its
   labels are set larger in viewBox units to stay ~10px on screen. */
@media (max-width: 1099px) {
  .gl-pt-labels text { font-size: 14px; }
}
@media (max-width: 767px) {
  :root { --gl-gutter: 1rem; --gl-chart-h: 230px; --gl-cell: 12px; }
  .gl-page { gap: 0.9rem; padding-bottom: 2.5rem; }
  .gl-hero { padding-top: 1.5rem; }
  .gl-jump { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: calc(var(--gl-gutter) * -1); padding-right: var(--gl-gutter);
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
            mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); }
  .gl-jump::-webkit-scrollbar { display: none; }
  .gl-pulse { padding: 1rem 1rem 0.9rem; }
  .gl-card { padding: 0.9rem 0.9rem 1rem; }
  .gl-card-head .gl-legend, .gl-card-head .gl-cal-legend, .gl-card-head .gl-seg { flex-basis: 100%; }
  .gl-card-head .gl-seg { flex-basis: auto; }
  .gl-range { flex: 1 1 100%;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 20px), transparent);
            mask-image: linear-gradient(to right, #000 calc(100% - 20px), transparent); }
  .gl-refresh { margin-left: 0; }
  .gl-growth .gl-col-bar, .gl-growth .gl-col-gain { display: none; }
  /* The map stays legible on phones: it scrolls sideways (JS centres it on
     Turkiye) instead of shrinking labels to 4px. */
  .gl-map { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; }
  .gl-map-svg { width: 680px; max-width: none; }
  .gl-mv { grid-template-columns: 1.3rem minmax(0, 1fr) auto; column-gap: 0.55rem; }
  .gl-mv-bar { display: none; }
  .gl-stack-row { grid-template-columns: 4.5rem minmax(0, 1fr); gap: 0.5rem; }
  .gl-conc-row { grid-template-columns: 7.5rem minmax(0, 1fr) 3.2rem; gap: 0.5rem; }
  .gl-tags { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 420px) {
  .gl-pulse-foot { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gl-pulse-foot > div:last-child { grid-column: 1 / -1; }
  .gl-split-total { margin-left: 0; }
  .gl-kpi { padding: 0.75rem 0.8rem; }
  .gl-kpi-num { font-size: 1.2rem; }
  .gl-stats dd { font-size: 0.95rem; }
  .gl-wk-avg { display: none; }
  .gl-tags { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   Reduced motion. The global guard zeroes durations and delays; an infinite
   animation with ~0 duration still cycles, so the dot is killed outright and
   every keyframed piece is pinned to its END state (the meter keeps its own
   scaleX(var(--gl-fill)) - `animation: none` restores exactly that).
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .gl-dot::after { animation: none !important; opacity: 0 !important; }
  .gl-hero-copy > *, .gl-pulse, .gl-kpi, .gl-card, .gl-chart canvas, .gl-cal-grid, .gl-flip,
  .gl-mv-list > li, .gl-reg-list > li, .gl-growth tbody tr, .gl-resort > li,
  .gl-pt-core, .gl-pt-halo, .gl-pt-labels { animation: none !important; opacity: 1 !important; }
  .gl-pt-ring { animation: none !important; opacity: 0 !important; }
  .gl-split > span, .gl-meter > span, .gl-bar > span, .gl-mv-bar > span, .gl-tag-bar > span,
  .gl-wk-bar, .gl-stack { animation: none !important; }
  .gl-meter > span, .gl-pt-core, .gl-chart { transition: none !important; }
  .gl-kpi:hover, .gl-rec:hover, .gl-tag:hover, .gl-jump a:hover, .gl-cal-d:hover { transform: none; }
  .gl-pt:hover .gl-pt-core, .gl-pt.is-hot .gl-pt-core, .gl-pt:focus-visible .gl-pt-core { transform: none; }
}

/* ==========================================================================
   Shell v5 (header, mobile sheet, Ctrl+K palette, footer, page transitions)
   --------------------------------------------------------------------------
   Append to the END of public/css/style.css. Scoped to "sh-" classes (plus the
   existing shell selectors it deliberately refines). Pairs with
   views/partials/{head,header,footer}.ejs and public/js/shell.js.

   Ground rules, same as Polish v3 / Signature v4 / the page blocks:
     - Only transform / opacity animate (colour/background on hover states).
     - Entrances use `backwards` fill. No infinite animation anywhere here.
     - The header stays exactly 4rem + 1px tall: .xp-shell, .sv/.mcv/.asnv
       sticky offsets and scroll-padding-top all assume it.
     - No backdrop-filter is added (the header already has one from v3/v4).
     - Reduced motion: every entrance below is killed in the block at the end,
       and cross-document view transitions only exist under no-preference.
   ========================================================================== */

:root {
  --sh-h: 4rem;
  --sh-live: #15803d;               /* 5.0:1 on white */
  --sh-warn: #b45309;               /* 5.0:1 on white */
  --sh-wait: var(--muted-foreground);
  --sh-ring: color-mix(in srgb, var(--chart-1) 22%, transparent);
  --sh-tint: color-mix(in srgb, var(--chart-1) 10%, transparent);
  --sh-tint-strong: color-mix(in srgb, var(--chart-1) 16%, transparent);
}
:root.dark {
  --sh-live: #4ade80;
  --sh-warn: #fbbf24;
  --sh-tint: color-mix(in srgb, var(--chart-2) 12%, transparent);
  --sh-tint-strong: color-mix(in srgb, var(--chart-2) 19%, transparent);
  --sh-ring: color-mix(in srgb, var(--chart-2) 26%, transparent);
}

/* --------------------------------------------------------------------------
   Shell width follows the page it sits on. Each redesigned page frame has
   its own max width / gutter; the header and footer line up with it instead
   of floating as a 1152px strip above a 2560px page on the 3440px screen.
   A new page opts in with one rule: body:has(.xx-page) { --sh-max: ...; }
   (or by passing `bodyClass` to the render and targeting that class).
   -------------------------------------------------------------------------- */
body:has(.hm-wrap)     { --sh-max: var(--hm-max); }
body:has(.sv-page)     { --sh-max: var(--sv-max); }
body:has(.vw-page)     { --sh-max: var(--vw-max); --sh-pad: var(--vw-gutter); }
body:has(.mcv-page)    { --sh-max: 1360px; }
body:has(.asnv-shell),
body:has(.xp-shell)    { --sh-max: 100%; }
@media (max-width: 767px) {
  body:has(.sv-page),
  body:has(.mcv-page)  { --sh-pad: 1rem; }       /* both pages drop to a 16px gutter here */
}
@media (min-width: 1440px) {
  body:has(.sv-page)   { --sh-pad: 2rem; }
  body:has(.mcv-page)  { --sh-max: 1560px; --sh-pad: 2rem; }
}
@media (min-width: 2200px) {
  body:has(.mcv-page)   { --sh-max: 2560px; --sh-pad: 2.5rem; }
  body:has(.asnv-shell) { --sh-max: 2560px; }
}
@media (min-width: 2400px) {
  body:has(.sv-page)   { --sh-pad: 2.5rem; }
}

.site-header > .sh-bar,
.site-footer > .sh-foot {
  max-width: var(--sh-max, 1152px);
  padding-inline: var(--sh-pad, 1.5rem);
}

/* --------------------------------------------------------------------------
   Skip link, top sentinel, navigation progress
   -------------------------------------------------------------------------- */
.sh-skip {
  position: absolute; left: 1rem; top: 0.6rem; z-index: 90;
  padding: 0.55rem 0.9rem; border-radius: 0.6rem;
  background: var(--card); color: var(--foreground); font-size: 0.85rem; font-weight: 600;
  box-shadow: 0 0 0 1px var(--border), var(--nz-elev-2, 0 8px 20px rgb(0 0 0 / 0.3));
  transform: translateY(-170%);
}
.sh-skip:focus, .sh-skip:focus-visible { transform: none; }
main:focus { outline: none; }

.sh-top-sentinel {
  position: absolute; top: 0; left: 0; width: 1px; height: 8px;
  pointer-events: none; visibility: hidden;
}

.sh-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 85;
  pointer-events: none; opacity: 0;
  transition: opacity 0.2s ease;
}
.sh-progress > span {
  display: block; height: 100%;
  transform: scaleX(0); transform-origin: left center;
  background: linear-gradient(90deg, var(--chart-1), var(--nz-accent-2, var(--chart-3)) 60%, var(--nz-accent-3, var(--chart-2)));
  box-shadow: 0 0 10px var(--nz-glow, transparent);
}
.sh-progress.is-on { opacity: 1; }
/* One transition, decelerating toward 92% - it never "finishes" on its own,
   the next page replaces it. Not a loop. */
.sh-progress.is-on > span { transform: scaleX(0.92); transition: transform 9s cubic-bezier(0.08, 0.7, 0.15, 1); }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
/* Scrolled state: a denser surface + shadow fades in on its own layer, so
   only opacity animates (the header background itself never transitions). */
.sh-header-bg {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  opacity: 0;
  background: color-mix(in srgb, var(--background) 90%, transparent);
  box-shadow: 0 10px 28px -20px rgb(0 0 0 / 0.55);
  transition: opacity var(--dur-3, 0.34s) ease;
}
.sh-header.is-scrolled .sh-header-bg,
.sh-header.sh-sheet-open .sh-header-bg { opacity: 1; }

.site-header > .sh-bar { justify-content: flex-start; gap: 0.75rem; }
.sh-brand { flex-shrink: 0; border-radius: 0.6rem; }
.sh-actions { margin-left: auto; gap: 0.5rem; }

/* Desktop nav: pill links. The Polish v3 hover underline is replaced by a
   tinted pill - the same language as the page blocks' kickers and chips. */
.sh-nav { margin-left: 1.25rem; gap: 0.15rem; flex-wrap: nowrap; }
.sh-nav > a,
.sh-nav .nav-dropdown-trigger {
  position: relative;
  display: inline-flex; align-items: center; gap: 0.3rem;
  min-height: 2.1rem; padding: 0 0.75rem; border-radius: 999px;
  color: var(--muted-foreground); white-space: nowrap;
  transition: color var(--dur-1, 0.12s) ease, background-color var(--dur-1, 0.12s) ease;
}
.sh-nav > a::after { content: none; }
.sh-nav > a:hover,
.sh-nav .nav-dropdown-trigger:hover,
.sh-nav .nav-dropdown.open .nav-dropdown-trigger { color: var(--foreground); background: var(--accent); }
.sh-nav > a[aria-current="page"],
.sh-nav .nav-dropdown-trigger.sh-has-current {
  color: var(--nz-accent-text, var(--chart-1));
  background: var(--sh-tint);
  box-shadow: inset 0 0 0 1px var(--sh-ring);
}
.sh-nav .nav-dropdown-trigger.sh-has-current::before {
  content: ""; width: 5px; height: 5px; border-radius: 999px; background: currentColor; flex-shrink: 0;
}
.nav-dropdown-menu a[aria-current="page"] {
  color: var(--nz-accent-text, var(--chart-1));
  background: var(--sh-tint);
}
.nav-dropdown-menu { top: calc(100% + 0.6rem); }

/* Search trigger: label length follows the header's own width (container
   query), not the viewport - the header is 1152px on some pages and 2560px
   on others at the same viewport. */
.site-header > .sh-bar { container: sh-bar / inline-size; }
.sh-search { min-height: 2.25rem; padding-inline: 0.7rem 0.45rem; gap: 0.5rem; }
.sh-search .sh-search-long { display: none; }
.sh-search .quick-search-trigger-text { color: var(--muted-foreground); }
.sh-search:hover .quick-search-trigger-text { color: var(--foreground); }
.sh-cta { min-height: 2.25rem; }
.sh-cta-2 { display: none; }
@container sh-bar (min-width: 1100px) {
  .sh-search { min-width: 15.5rem; justify-content: flex-start; }
  .sh-search .sh-search-long { display: inline; }
  .sh-search .sh-search-short { display: none; }
  .sh-search .quick-search-kbd { margin-left: auto; }
}
@container sh-bar (min-width: 1240px) {
  .sh-cta-2 { display: inline-flex; }
}

/* Theme toggle: sun in dark (the way out), moon in light. */
.sh-theme { flex-shrink: 0; }
.sh-theme .sh-theme-sun, .sh-theme .sh-theme-moon,
.sh-sheet-grid [data-sh-theme] .sh-theme-sun,
.sh-sheet-grid [data-sh-theme] .sh-theme-moon { display: none; line-height: 0; }
:root.dark .sh-theme-sun, :root:not(.dark) .sh-theme-moon { display: inline-flex !important; }
.sh-theme:hover { transform: rotate(-14deg) scale(1.06); }

.sh-burger { flex-shrink: 0; }

/* --------------------------------------------------------------------------
   Collapse: <=1023px uses the hamburger + sheet. The old <=860px rules keep
   working underneath (they only hide #navLinks and style the toggle); this
   range extends the same behaviour up to tablet-landscape widths, where the
   full nav no longer fits beside the actions.
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .sh-nav { display: none !important; }
  .sh-actions .nav-cta { display: none; }
  .sh-search .quick-search-trigger-text,
  .sh-search .quick-search-kbd { display: none; }
  .sh-search { width: 2.25rem; height: 2.25rem; min-height: 0; padding: 0; justify-content: center; border-radius: 0.65rem; }
  .sh-burger {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.25rem; height: 2.25rem; border-radius: 0.65rem;
    background: none; border: 1px solid var(--border); color: var(--foreground); cursor: pointer;
  }
  .sh-burger .nav-mobile-icon-close { display: none; }
  .sh-burger.is-open .nav-mobile-icon-open { display: none; }
  .sh-burger.is-open .nav-mobile-icon-close { display: inline-flex; }
  .sh-theme { width: 2.25rem; height: 2.25rem; }
}
@media (min-width: 1024px) {
  .sh-burger, .sh-sheet { display: none !important; }
}

/* --------------------------------------------------------------------------
   Mobile / tablet sheet - hangs off the sticky header, fills the viewport
   below it, scrolls on its own.
   -------------------------------------------------------------------------- */
.sh-sheet {
  position: absolute; top: 100%; left: 0; right: 0;
  height: calc(100vh - var(--sh-h) - 1px);
  height: calc(100dvh - var(--sh-h) - 1px);
  overflow-y: auto; overscroll-behavior: contain;
  background: var(--background);
  border-top: 1px solid var(--border);
  animation: fade-in 0.18s ease-out backwards;
}
.sh-sheet[hidden] { display: none; }
.sh-sheet-inner:focus { outline: none; }
.sh-sheet-inner {
  max-width: 40rem; margin: 0 auto;
  padding: 1rem max(16px, env(safe-area-inset-right)) calc(1.5rem + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  display: flex; flex-direction: column; gap: 0.4rem;
}
.sh-sheet-inner > *,
.sh-sheet-list > a,
.sh-sheet-grid > * { animation: rise-in-sm 0.26s var(--ease-out, ease-out) backwards; animation-delay: calc(var(--i, 0) * 22ms); }

.sh-sheet-search {
  display: flex; align-items: center; gap: 0.65rem;
  width: 100%; min-height: 3rem; padding: 0 1rem; margin-bottom: 0.5rem;
  border-radius: 0.85rem; border: 1px solid var(--border);
  background: var(--card); color: var(--muted-foreground);
  font: inherit; font-size: 0.95rem; text-align: left; cursor: pointer;
  box-shadow: inset 0 1px 0 0 var(--nz-hairline, transparent);
}
.sh-sheet-search:active { transform: scale(0.99); }
.sh-sheet-label {
  margin: 0.9rem 0.25rem 0.25rem; font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.04em; color: var(--muted-foreground);
}
.sh-sheet-list {
  display: flex; flex-direction: column;
  border-radius: 0.9rem; overflow: hidden;
  background: var(--card); box-shadow: 0 0 0 1px var(--border);
}
.sh-sheet-list > a {
  display: flex; align-items: center; gap: 0.8rem;
  min-height: 3.1rem; padding: 0 0.9rem;
  font-size: 0.95rem; color: var(--foreground);
  border-bottom: 1px solid var(--border);
}
.sh-sheet-list > a:last-child { border-bottom: 0; }
.sh-sheet-list > a > span:nth-child(2) { flex: 1; min-width: 0; }
.sh-sheet-list > a > .icon:last-child { color: var(--muted-foreground); }
.sh-sheet-list > a:active { background: var(--accent); }
.sh-sheet-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; border-radius: 0.6rem; flex-shrink: 0;
  background: var(--accent); color: var(--muted-foreground);
}
.sh-sheet-list > a[aria-current="page"] { background: var(--sh-tint); color: var(--nz-accent-text, var(--chart-1)); font-weight: 600; }
.sh-sheet-list > a[aria-current="page"] .sh-sheet-ico { background: var(--sh-tint-strong); color: inherit; }

.sh-sheet-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
.sh-sheet-grid > a,
.sh-sheet-grid > button {
  display: flex; align-items: center; gap: 0.6rem;
  min-height: 3.1rem; padding: 0 0.85rem; border-radius: 0.85rem;
  background: var(--card); color: var(--foreground);
  border: 0; box-shadow: 0 0 0 1px var(--border);
  font: inherit; font-size: 0.9rem; text-align: left; cursor: pointer;
}
.sh-sheet-grid > * > .icon, .sh-sheet-grid > * > span > .icon { color: var(--muted-foreground); }
.sh-sheet-grid > a[aria-current="page"] { background: var(--sh-tint); color: var(--nz-accent-text, var(--chart-1)); box-shadow: 0 0 0 1px var(--sh-ring); }
.sh-sheet-grid > *:active { transform: scale(0.98); }
.sh-sheet-foot { margin-top: 1rem; display: grid; }
.sh-sheet-foot .btn { min-height: 3rem; font-size: 0.95rem; }

@media (min-width: 640px) {
  .sh-sheet-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------------------
   Ctrl+K palette
   -------------------------------------------------------------------------- */
.sh-pal { padding: 11vh 1rem 1rem; }
.sh-pal-panel {
  max-width: 640px; display: flex; flex-direction: column;
  max-height: min(78vh, 680px);
}
.sh-pal-input { padding: 0 0.6rem 0 1.1rem; min-height: 3.5rem; flex-shrink: 0; }
.sh-pal-input input { font-size: 1rem; min-height: 3.4rem; }
.sh-pal-input input::placeholder { color: var(--muted-foreground); }
.sh-pal-close {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.75rem; min-height: 2.75rem; padding: 0; border: 0; border-radius: 0.6rem;
  background: none; cursor: pointer; color: inherit;
}
.sh-pal-close:hover .quick-search-kbd { color: var(--foreground); }
.sh-pal-results { flex: 1; min-height: 0; max-height: none; padding: 0.35rem 0.45rem 0.5rem; overscroll-behavior: contain; }

.sh-group + .sh-group { margin-top: 0.35rem; padding-top: 0.35rem; border-top: 1px solid color-mix(in srgb, var(--border) 70%, transparent); }
.sh-group-head {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  padding: 0.45rem 0.6rem 0.3rem;
}
.sh-group-label { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.04em; color: var(--muted-foreground); }
.sh-group-action {
  border: 0; background: none; cursor: pointer; font: inherit;
  font-size: 0.7rem; color: var(--muted-foreground); padding: 0.2rem 0.4rem; border-radius: 0.4rem;
}
.sh-group-action:hover { color: var(--foreground); background: var(--accent); }
.sh-pal-note { padding: 0.5rem 0.75rem 0.1rem; font-size: 0.75rem; color: var(--muted-foreground); }

.sh-opt {
  display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto auto; align-items: center; gap: 0.7rem;
  width: 100%; min-height: 2.9rem; padding: 0.4rem 0.6rem;
  border: 0; background: none; font: inherit; text-align: left; cursor: pointer;
  scroll-margin: 0.4rem;
}
.sh-opt-ico {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; border-radius: 0.55rem; overflow: hidden;
  background: var(--accent); color: var(--muted-foreground);
}
.sh-opt-ico img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: var(--card); }
.sh-opt-text { display: flex; flex-direction: column; min-width: 0; gap: 0.05rem; }
.sh-opt-name { display: block; font-size: 0.88rem; font-weight: 500; }
.sh-opt-sub { font-size: 0.72rem; color: var(--muted-foreground); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh-opt-meta { font-variant-numeric: tabular-nums; }
.sh-opt-go {
  display: inline-flex; color: var(--muted-foreground);
  opacity: 0; transform: translateX(-3px);
  transition: opacity var(--dur-1, 0.12s) ease, transform var(--dur-2, 0.2s) var(--ease-out, ease-out);
}
.sh-opt.active .sh-opt-go { opacity: 1; transform: none; }
.sh-opt.active { background: var(--sh-tint); }
.sh-opt.active .sh-opt-ico { background: var(--sh-tint-strong); color: var(--nz-accent-text, var(--chart-1)); }
.sh-opt-here .sh-opt-sub::after { content: " \00b7  buradasin"; }
.sh-opt-all .sh-opt-name { color: var(--nz-accent-text, var(--chart-1)); }

.sh-pal-foot {
  display: flex; align-items: center; flex-wrap: wrap; gap: 0.35rem 1rem;
  padding: 0.55rem 0.9rem; flex-shrink: 0;
  border-top: 1px solid var(--border);
  font-size: 0.7rem; color: var(--muted-foreground);
}
.sh-pal-foot > span { display: inline-flex; align-items: center; gap: 0.3rem; }
.sh-pal-foot-end { margin-left: auto; }
.sh-pal-foot kbd {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.35rem; height: 1.25rem; padding: 0 0.3rem; border-radius: 0.3rem;
  font-family: inherit; font-size: 0.65rem; font-weight: 600;
  background: var(--muted); color: var(--muted-foreground);
  box-shadow: inset 0 -1px 0 0 color-mix(in srgb, var(--foreground) 12%, transparent);
}

.sh-sr {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

@media (hover: none) {
  .sh-pal-foot { display: none; }
}
@media (max-width: 767px) {
  /* Phone: the palette is a top sheet, full width, as tall as it needs. */
  .sh-pal { padding: 0; }
  .sh-pal-panel {
    max-width: none; max-height: 100vh; max-height: 100dvh;
    border-radius: 0 0 var(--radius) var(--radius);
    border-top: 0;
  }
  .sh-pal-input { padding-left: 16px; }
  .sh-pal-results { padding-inline: 0.35rem; }
  .sh-opt { min-height: 3.25rem; }
}
@media (min-width: 2200px) {
  .sh-pal-panel { max-width: 720px; }
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer.sh-footer { padding: 3rem 0 2rem; }
.site-footer .sh-foot-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  gap: 2.5rem 3rem; align-items: start;
}
.sh-foot-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 0.9rem; min-width: 0; }
.sh-foot-tag { margin: 0; color: var(--muted-foreground); font-size: 0.875rem; max-width: 24rem; line-height: 1.55; }

.sh-status {
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 0.6rem; row-gap: 0.15rem;
  padding: 0.7rem 0.9rem; border-radius: 0.85rem; max-width: 26rem;
  background: var(--card); background-image: var(--nz-card-wash, none);
  box-shadow: inset 0 1px 0 0 var(--nz-hairline, transparent), 0 0 0 1px var(--border);
  font-size: 0.8rem;
}
.sh-status p { margin: 0; }
.sh-status-dot {
  grid-row: 1; align-self: center;
  width: 8px; height: 8px; border-radius: 999px;
  background: var(--sh-live);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sh-live) 22%, transparent);
}
.sh-status[data-state="stale"] .sh-status-dot { background: var(--sh-warn); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sh-warn) 22%, transparent); }
.sh-status[data-state="wait"] .sh-status-dot { background: var(--sh-wait); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sh-wait) 22%, transparent); }
.sh-status-main { color: var(--muted-foreground); display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.4rem; }
.sh-status-main strong { color: var(--sh-live); font-weight: 600; }
.sh-status[data-state="stale"] .sh-status-main strong { color: var(--sh-warn); }
.sh-status[data-state="wait"] .sh-status-main strong { color: var(--muted-foreground); }
.sh-status-main time { color: var(--foreground); font-variant-numeric: tabular-nums; }
.sh-status-sub { grid-column: 2; color: var(--muted-foreground); font-size: 0.74rem; line-height: 1.45; }

.sh-foot-search {
  display: inline-flex; align-items: center; gap: 0.5rem;
  min-height: 2.5rem; padding: 0 0.5rem 0 0.8rem; border-radius: 999px;
  border: 1px solid var(--border); background: var(--background); color: var(--muted-foreground);
  font: inherit; font-size: 0.8rem; cursor: pointer;
  transition: color var(--dur-1, 0.12s) ease, border-color var(--dur-1, 0.12s) ease;
}
.sh-foot-search:hover { color: var(--foreground); border-color: color-mix(in srgb, var(--chart-1) 45%, var(--border)); }

.site-footer .sh-foot-cols {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem 2rem;
}
.sh-foot-cols nav { gap: 0.15rem; }
.sh-foot-cols nav strong { color: var(--foreground); font-size: 0.8rem; font-weight: 600; margin-bottom: 0.45rem; }
.sh-foot-cols nav a {
  display: inline-flex; align-items: center; gap: 0.3rem; align-self: flex-start;
  min-height: 2rem; font-size: 0.875rem;
}

.site-footer .sh-fine {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; flex-wrap: wrap;
  margin-top: 2.5rem;
}
.sh-fine p { margin: 0; line-height: 1.6; }
.sh-totop {
  display: inline-flex; align-items: center; gap: 0.35rem; flex-shrink: 0;
  min-height: 2.25rem; padding: 0 0.8rem; border-radius: 999px;
  border: 1px solid var(--border); background: none; color: var(--muted-foreground);
  font: inherit; font-size: 0.75rem; cursor: pointer;
  transition: color var(--dur-1, 0.12s) ease, border-color var(--dur-1, 0.12s) ease;
}
.sh-totop:hover { color: var(--foreground); }
.sh-totop .icon { transition: transform var(--dur-2, 0.2s) var(--ease-out, ease-out); }
.sh-totop:hover .icon { transform: translateY(-2px); }

@media (max-width: 900px) {
  .site-footer .sh-foot-top { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .site-footer.sh-footer { padding-top: 2.25rem; }
  .site-footer .sh-foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sh-status { max-width: none; width: 100%; }
  .site-footer .sh-fine { flex-direction: column; align-items: flex-start; }
}

/* --------------------------------------------------------------------------
   Focus rings for the new controls (mouse users never see them).
   -------------------------------------------------------------------------- */
.sh-sheet-search:focus-visible,
.sh-sheet-grid > button:focus-visible,
.sh-pal-close:focus-visible,
.sh-group-action:focus-visible,
.sh-foot-search:focus-visible,
.sh-totop:focus-visible {
  outline: 2px solid var(--chart-1);
  outline-offset: 2px;
}
.sh-nav > a:focus-visible,
.sh-nav .nav-dropdown-trigger:focus-visible { outline-offset: 1px; border-radius: 999px; }

/* --------------------------------------------------------------------------
   Cross-document view transitions (Chrome/Edge 126+, Safari 18.2+). Both
   pages opt in through this same stylesheet; browsers without support simply
   navigate as before. A short root cross-fade only - the header is identical
   on both sides, so it reads as "the shell stays, the page changes". Nothing
   is named: a named, backdrop-filtered sticky header snapshots without its
   blur for the duration. Pure client-side compositing - zero server cost.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-group(root) { animation-duration: 0.18s; }
  ::view-transition-old(root),
  ::view-transition-new(root) { animation-timing-function: ease-out; }
}

/* --------------------------------------------------------------------------
   Reduced motion: entrances off outright (the global guard only zeroes
   durations), progress bar becomes a static indicator.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .sh-sheet,
  .sh-sheet-inner > *,
  .sh-sheet-list > a,
  .sh-sheet-grid > * { animation: none !important; }
  .sh-opt-go { transform: none; }
  .sh-theme:hover { transform: none; }
}


/* ==========================================================================
   Nerzen Guard v2 (/nerzen-guard) - "ng-" block, and
   Kaynak Atlasi v2 (/resources) - "rs-" block.
   --------------------------------------------------------------------------
   Appended as ONE block at the end of style.css. Same contract as Home v2 /
   ASN v2 / Minecraft v2 / Servers v2 / View v2:
     - Own prefixes. Nothing above is edited. The old .server-card /
       .resource-card / .resource-grid / .resource-selection-bar rules stay
       for whatever else still uses them; these two pages no longer do.
       /nerzen-guard's Minecraft cards reuse .mcv-entry / .mcv-fav /
       .mcv-motd-* / .mcv-c-* on purpose: renderMotd() emits .mcv-c-* spans,
       and one MOTD look site-wide is the point.
     - Only transform / opacity animate (colour on hover / pressed states).
       Entrances use `backwards` fill. Scroll reveals (animation-timeline:
       view()) sit on WRAPPERS, never on a hoverable card, and are additive:
       without support or with reduced motion, nothing is hidden.
     - Exactly ONE infinite animation per page: .ng-dot::after (Guard live
       data) and .rs-dot::after (crawler running). Both stop when stale and
       are killed outright under reduced motion.
     - Bars = static inline width + the shared bar-fill sweep (scaleX 0 -> 1
       over a box whose WIDTH carries the value). Never scaleX(var(--x)) +
       bar-fill: bar-fill ends at scaleX(1) and would overshoot, then snap.
     - No text-transform anywhere (with <html lang="tr"> an uppercased "i"
       becomes a dotted capital I). Labels are written in sentence case.
     - Every text colour that carries meaning is a light/dark token pair;
       green text is #166534 / #4ade80.
   ========================================================================== */

:root {
  --ng-max: 1360px;
  --ng-grid-min: 290px;
  --ng-mc-min: 300px;
  --ng-chart-h: 240px;
  --ng-fivem: var(--chart-1);
  --ng-mc: #16a34a;                 /* fills / lines only, never small text */
  --ng-mc-text: #166534;            /* 7.1:1 on #fff */
  --ng-up: #166534;
  --ng-down: #b91c1c;               /* 6.5:1 on #fff */
  --ng-live: #16a34a;               /* dot fill only */

  --rs-max: 1240px;
  --rs-accent: var(--nz-accent-2);  /* violet - fills / gradients only */
  --rs-accent-text: #5b21b6;        /* 8.6:1 on #fff */
  --rs-live: #16a34a;
  --rs-up: #166534;
}
:root.dark {
  --ng-mc: #22c55e;
  --ng-mc-text: #4ade80;            /* 11.4:1 on #0a0a0a, 10.3:1 on #171717 */
  --ng-up: #4ade80;
  --ng-down: #ff6568;
  --ng-live: #22c55e;
  --rs-accent-text: #c4b5fd;        /* 11.9:1 on #0a0a0a, 10.6:1 on #171717 */
  --rs-live: #22c55e;
  --rs-up: #4ade80;
}

.ng-page [hidden], .rs-page [hidden] { display: none !important; }
.ng-sr, .rs-sr {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

@keyframes ng-flip { from { opacity: 0; transform: translateY(-4px); } }
@keyframes ng-mask-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-6px); } }
@keyframes rs-sheet-in { from { opacity: 0; transform: translateX(28px); } }
@keyframes rs-sheet-up { from { opacity: 0; transform: translateY(28px); } }

/* ==========================================================================
   NERZEN GUARD
   ========================================================================== */
.ng-page {
  width: 100%; max-width: var(--ng-max); margin: 0 auto;
  padding: 0 1.5rem 3.5rem;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.4rem;
}
.ng-page > * { min-width: 0; }

/* Shared material - same surface as .mcv-surface / .sv-card. */
.ng-surface, .ng-pulse, .ng-kpi, .ng-card, .ng-step, .ng-band, .ng-toolbar {
  border-radius: var(--radius);
  background-color: var(--card);
  background-image: var(--nz-card-wash);
  box-shadow: inset 0 1px 0 0 var(--nz-hairline), 0 0 0 1px var(--border), var(--nz-elev-1);
}

.ng-ico-badge {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 1.9rem; height: 1.9rem; border-radius: 0.6rem;
  color: var(--nz-accent-text);
  background: linear-gradient(140deg, color-mix(in srgb, var(--chart-1) 16%, transparent), color-mix(in srgb, var(--nz-accent-2) 12%, transparent));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--chart-1) 24%, transparent);
}
.ng-ico-badge.is-mc {
  color: var(--ng-mc-text);
  background: linear-gradient(140deg, color-mix(in srgb, var(--ng-mc) 18%, transparent), color-mix(in srgb, var(--nz-accent-3) 10%, transparent));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ng-mc) 26%, transparent);
}

.ng-chip {
  display: inline-flex; align-items: center; gap: 0.2rem; align-self: flex-start; white-space: nowrap;
  padding: 0.14rem 0.5rem; border-radius: 999px;
  font-size: 0.72rem; font-weight: 650; font-variant-numeric: tabular-nums;
}
.ng-chip.up   { color: var(--ng-up);   background: color-mix(in srgb, var(--ng-up) 14%, transparent); }
.ng-chip.down { color: var(--ng-down); background: color-mix(in srgb, var(--ng-down) 12%, transparent); }
.ng-chip.flat { color: var(--muted-foreground); background: var(--accent); }

.ng-flip { animation: ng-flip var(--dur-2) var(--ease-out); }

.ng-textlink {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-size: 0.82rem; font-weight: 600; color: var(--nz-accent-text);
  text-underline-offset: 3px;
}
.ng-textlink:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.ng-hero {
  position: relative; isolation: isolate;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem;
  padding: 2.2rem 0 0.4rem;
}
/* Static atmosphere: brand bloom, violet counter-light and a faint grid that
   fades out - the shield-network motif. No loop (the live dot is the page's
   one), so .hero's aurora is deliberately not reused. */
.ng-hero::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  inset: -1.5rem -14% -1rem;
  background:
    radial-gradient(40% 70% at 10% 8%, var(--nz-mesh-1), transparent 70%),
    radial-gradient(36% 64% at 92% 4%, var(--nz-mesh-2), transparent 72%),
    radial-gradient(30% 50% at 70% 100%, var(--nz-mesh-3), transparent 70%),
    linear-gradient(var(--nz-grid-line) 1px, transparent 1px) 0 0 / 40px 40px,
    linear-gradient(90deg, var(--nz-grid-line) 1px, transparent 1px) 0 0 / 40px 40px;
  -webkit-mask-image: radial-gradient(75% 95% at 35% 0%, #000 28%, transparent 80%);
          mask-image: radial-gradient(75% 95% at 35% 0%, #000 28%, transparent 80%);
  opacity: 0.6;
}
.ng-hero-copy { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.ng-hero-copy > * { animation: rise-in 0.5s var(--ease-out) backwards; }
.ng-hero-copy > :nth-child(2) { animation-delay: 0.05s; }
.ng-hero-copy > :nth-child(3) { animation-delay: 0.1s; }
.ng-hero-copy > :nth-child(4) { animation-delay: 0.15s; }
.ng-hero-copy > :nth-child(5) { animation-delay: 0.2s; }

.ng-live, .rs-live {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.28rem 0.7rem; border-radius: 999px;
  font-size: 0.74rem; font-weight: 600; font-variant-numeric: tabular-nums;
  color: var(--foreground);
  background: color-mix(in srgb, var(--card) 62%, transparent);
  box-shadow: inset 0 1px 0 0 var(--nz-hairline), 0 0 0 1px color-mix(in srgb, var(--chart-1) 22%, var(--border));
}
.ng-live-sep, .rs-live-sep { opacity: 0.5; }
.ng-dot, .rs-dot {
  position: relative; flex-shrink: 0; width: 8px; height: 8px; border-radius: 999px;
  background: var(--ng-live);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ng-live) 22%, transparent);
}
/* THE page's one loop: compositor-only, 8px, and it means "data is live". */
.ng-dot::after, .rs-dot::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: var(--ng-live);
  animation: pulse-ring 2.4s var(--ease-out) infinite;
}
.ng-live.is-stale .ng-dot, .rs-live.is-stale .rs-dot {
  background: var(--muted-foreground);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--muted-foreground) 20%, transparent);
}
.ng-live.is-stale .ng-dot::after, .rs-live.is-stale .rs-dot::after { animation: none; opacity: 0; }

.ng-hero h1 {
  margin: 0.9rem 0 0.6rem;
  font-size: clamp(2.1rem, 1.4rem + 2.4vw, 3.4rem); font-weight: 800;
  line-height: 1.04; letter-spacing: -0.04em; text-wrap: balance;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  /* background-image, never the shorthand (it resets background-clip). */
  .ng-h1-accent, .rs-h1-accent {
    background-image: linear-gradient(120deg, var(--chart-3), var(--nz-accent-2) 55%, var(--nz-accent-3));
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  }
}
.ng-lead { margin: 0 0 1.1rem; max-width: 40rem; font-size: 0.98rem; line-height: 1.62; color: var(--muted-foreground); text-wrap: pretty; }
.ng-lead strong { color: var(--foreground); font-weight: 650; }

/* "connect ...:30120" -> "Protected By Nerzen". One-shot, on first paint.
   Rest state = the END state (dots gone, text shown); the keyframes only
   describe the way in, with `backwards` fill holding the start during the
   delay. Reduced motion simply sees the rest state. */
.ng-mask {
  display: inline-flex; align-items: center; gap: 0.6rem; max-width: 100%;
  margin: 0 0 1.25rem; padding: 0.45rem 0.8rem 0.45rem 0.7rem; border-radius: 0.7rem;
  font: 600 0.8rem/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: color-mix(in srgb, var(--card) 70%, transparent);
  box-shadow: inset 0 1px 0 0 var(--nz-hairline), 0 0 0 1px var(--border);
  overflow: hidden;
}
.ng-mask-cmd { color: var(--muted-foreground); }
.ng-mask-slot { position: relative; display: inline-grid; min-width: 0; }
.ng-mask-slot > * { grid-area: 1 / 1; white-space: nowrap; }
.ng-mask-ip {
  color: var(--muted-foreground); letter-spacing: 0.04em;
  opacity: 0;                       /* rest = end state */
  animation: ng-mask-out 0.35s var(--ease-out) 1.1s backwards;
}
.ng-mask-text {
  position: relative; display: inline-flex; align-items: center; gap: 0.35rem;
  color: var(--nz-accent-text); font-weight: 700;
  animation: rise-in-sm 0.4s var(--ease-out) 1.35s backwards;
}
.ng-mask-text::after {
  content: ""; position: absolute; top: -4px; bottom: -4px; left: 0; width: 45%;
  background: linear-gradient(90deg, transparent, var(--nz-sheen), transparent);
  opacity: 0; transform: translateX(-150%) skewX(-18deg); pointer-events: none;
  animation: nz-sheen 1s var(--ease-out) 1.6s 1;
}

.ng-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 0.9rem; }
.ng-cta .btn { border-radius: 999px; }

/* Live pulse card. No backdrop-filter (nothing behind it moves). */
.ng-pulse {
  position: relative; display: flex; flex-direction: column; gap: 0.7rem; min-width: 0;
  padding: 1.2rem 1.25rem 1.1rem; align-self: start;
  box-shadow:
    inset 0 1px 0 0 var(--nz-hairline),
    0 0 0 1px color-mix(in srgb, var(--chart-1) 24%, var(--border)),
    var(--nz-elev-2),
    0 30px 60px -36px var(--nz-glow);
  animation: stat-rise 0.55s var(--ease-out) 0.08s backwards;
}
.ng-pulse::before {
  content: ""; position: absolute; top: 0; left: 1.2rem; right: 1.2rem; height: 2px;
  border-radius: 0 0 2px 2px; pointer-events: none; opacity: 0.9;
  background: linear-gradient(90deg, var(--chart-1), var(--nz-accent-2) 50%, var(--ng-mc));
}
.ng-eyebrow { margin: 0; display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.75rem; font-weight: 600; color: var(--muted-foreground); }
.ng-eyebrow svg { color: var(--nz-accent-text); }
.ng-pulse-fig { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.2rem 0.6rem; }
.ng-pulse-num {
  display: inline-block;
  font-size: clamp(2.6rem, 1.9rem + 2.2vw, 3.8rem); font-weight: 800; line-height: 1;
  letter-spacing: -0.045em; font-variant-numeric: tabular-nums;
  color: var(--nz-accent-text);
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .ng-pulse-num {
    background-image: linear-gradient(135deg, var(--chart-1), var(--nz-accent-2) 60%, var(--ng-mc));
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  }
  :root.dark .ng-pulse-num { background-image: linear-gradient(135deg, var(--chart-3), var(--nz-accent-2) 60%, var(--ng-mc)); }
}
.ng-pulse-unit { font-size: 0.88rem; color: var(--muted-foreground); }

.ng-split { display: flex; gap: 2px; height: 8px; border-radius: 999px; overflow: hidden; background: var(--muted); }
.ng-split > span { display: block; min-width: 3px; height: 100%; transform-origin: left center; animation: bar-fill 0.8s var(--ease-out) 0.35s backwards; }
.ng-split > .is-fivem { background: linear-gradient(90deg, var(--chart-1), var(--chart-3)); }
.ng-split > .is-mc { background: linear-gradient(90deg, var(--ng-mc), color-mix(in srgb, var(--nz-accent-3) 55%, var(--ng-mc))); animation-delay: 0.5s; }
.ng-split-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 1rem; font-size: 0.75rem; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.ng-split-legend b { color: var(--foreground); font-weight: 650; }
.ng-split-legend i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 0.35rem; }
.ng-split-legend i.is-fivem, .ng-legend i.is-fivem { background: var(--chart-1); }
.ng-split-legend i.is-mc, .ng-legend i.is-mc { background: var(--ng-mc); }
.ng-split-pct { margin-left: auto; }

.ng-mini {
  margin: 0.1rem 0 0; padding-top: 0.8rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem;
  border-top: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
}
.ng-mini > div { min-width: 0; animation: rise-in-sm 0.34s var(--ease-out) backwards; }
.ng-mini > div:nth-child(1) { animation-delay: 0.2s; }
.ng-mini > div:nth-child(2) { animation-delay: 0.25s; }
.ng-mini > div:nth-child(3) { animation-delay: 0.3s; }
.ng-mini dt { font-size: 0.68rem; font-weight: 600; color: var(--muted-foreground); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ng-mini dd { margin: 0.2rem 0 0; font-size: 1.1rem; font-weight: 700; font-variant-numeric: tabular-nums; display: flex; align-items: baseline; gap: 0.3rem; flex-wrap: wrap; }
.ng-mini dd small { font-size: 0.7rem; font-weight: 500; color: var(--muted-foreground); }

/* --------------------------------------------------------------------------
   KPI strip
   -------------------------------------------------------------------------- */
.ng-kpis {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0.8rem;
}
.ng-kpi {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center;
  column-gap: 0.6rem; row-gap: 0.15rem; padding: 0.85rem 0.95rem;
  animation: rise-in-sm 0.36s var(--ease-out) backwards;
  animation-delay: calc(0.12s + var(--i, 0) * 0.05s);
}
.ng-kpi-ico {
  grid-row: 1; display: inline-flex; align-items: center; justify-content: center;
  width: 1.7rem; height: 1.7rem; border-radius: 0.55rem;
  color: var(--nz-accent-text); background: color-mix(in srgb, var(--chart-1) 12%, transparent);
}
.ng-kpi-ico.is-mc { color: var(--ng-mc-text); background: color-mix(in srgb, var(--ng-mc) 14%, transparent); }
.ng-kpi-label { grid-row: 1; font-size: 0.74rem; font-weight: 600; color: var(--muted-foreground); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ng-kpi-num {
  grid-column: 1 / -1; margin-top: 0.35rem;
  font-size: 1.55rem; font-weight: 750; letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
  display: flex; align-items: baseline; gap: 0.3rem;
}
.ng-kpi-num small { font-size: 0.8rem; font-weight: 500; color: var(--muted-foreground); }
.ng-kpi-sub { grid-column: 1 / -1; font-size: 0.72rem; color: var(--muted-foreground); line-height: 1.45; }
.ng-kpi.is-accent {
  box-shadow: inset 0 1px 0 0 var(--nz-hairline), 0 0 0 1px color-mix(in srgb, var(--chart-1) 35%, var(--border)), var(--nz-elev-1), 0 18px 36px -26px var(--nz-glow);
}
.ng-kpi.is-accent .ng-kpi-num { color: var(--nz-accent-text); }

/* --------------------------------------------------------------------------
   Section heads, chart
   -------------------------------------------------------------------------- */
.ng-sec-head, .ng-block-head { display: flex; align-items: center; gap: 0.65rem; flex-wrap: wrap; }
.ng-sec-head > div, .ng-block-head > div { min-width: 0; flex: 1 1 14rem; }
.ng-sec-head h2 { margin: 0; font-size: 1rem; letter-spacing: -0.015em; }
.ng-sec-head p, .ng-block-head p { margin: 0.12rem 0 0; font-size: 0.76rem; color: var(--muted-foreground); }
.ng-block-head p strong { color: var(--foreground); font-weight: 650; font-variant-numeric: tabular-nums; }
.ng-block-head h2 { margin: 0; font-size: clamp(1.15rem, 1rem + 0.5vw, 1.4rem); letter-spacing: -0.02em; }
.ng-block-link { margin-left: auto; }

.ng-chart-card { padding: 1.05rem 1.15rem 0.9rem; display: flex; flex-direction: column; gap: 0.8rem; animation: rise-in 0.42s var(--ease-out) 0.1s backwards; }
.ng-legend { display: inline-flex; align-items: center; gap: 0.35rem 0.9rem; font-size: 0.74rem; color: var(--muted-foreground); margin-left: auto; }
.ng-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 0.35rem; vertical-align: -1px; }
.ng-chart { position: relative; height: var(--ng-chart-h); min-width: 0; }
/* !important: Chart.js writes an inline display:block on its canvas. */
.ng-chart canvas { max-height: none; }
.ng-chart-empty { display: none; margin: 0; position: absolute; inset: 0; place-items: center; font-size: 0.82rem; color: var(--muted-foreground); }
.ng-chart.is-empty canvas { display: none !important; }
.ng-chart.is-empty .ng-chart-empty { display: grid; }

/* --------------------------------------------------------------------------
   How it works
   -------------------------------------------------------------------------- */
.ng-how-title { margin: 0.4rem 0 0.8rem; font-size: clamp(1.15rem, 1rem + 0.5vw, 1.4rem); letter-spacing: -0.02em; }
.ng-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.85rem; }
.ng-steps > li { min-width: 0; }
.ng-step { position: relative; overflow: hidden; padding: 1rem 1.1rem 1.05rem; isolation: isolate; }
.ng-step::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(70% 90% at 100% 0%, color-mix(in srgb, var(--chart-1) 10%, transparent), transparent 70%);
}
.ng-step-n {
  position: absolute; top: 0.4rem; right: 0.9rem;
  font-size: 2.6rem; font-weight: 800; line-height: 1; letter-spacing: -0.05em;
  color: color-mix(in srgb, var(--foreground) 8%, transparent); font-variant-numeric: tabular-nums;
}
.ng-step h3 { margin: 0.7rem 0 0.35rem; font-size: 0.95rem; letter-spacing: -0.012em; }
.ng-step p { margin: 0; font-size: 0.82rem; line-height: 1.55; color: var(--muted-foreground); }
.ng-step p b { color: var(--foreground); font-weight: 650; }

/* --------------------------------------------------------------------------
   FiveM block: toolbar + card grid
   -------------------------------------------------------------------------- */
.ng-block { display: flex; flex-direction: column; gap: 0.9rem; min-width: 0; }
.ng-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.55rem 0.6rem;
  padding: 0.6rem 0.7rem;
  background-color: color-mix(in srgb, var(--card) 88%, transparent);
  -webkit-backdrop-filter: blur(12px) saturate(150%); backdrop-filter: blur(12px) saturate(150%);
  scroll-margin-top: 5rem;
}
.ng-search { position: relative; display: flex; align-items: center; flex: 1 1 260px; min-width: 0; margin: 0; }
.ng-search > svg { position: absolute; left: 0.75rem; color: var(--muted-foreground); pointer-events: none; }
.ng-search input {
  width: 100%; padding: 0.5rem 2.2rem; font: inherit; font-size: 0.85rem;
  background: var(--background); color: var(--foreground);
  border: 1px solid var(--border); border-radius: 999px;
  transition: border-color var(--dur-1) ease;
}
.ng-search input::placeholder { color: var(--muted-foreground); }
.ng-search input::-webkit-search-cancel-button { display: none; }
.ng-search input:focus, .ng-search input:focus-visible {
  outline: none; border-color: color-mix(in srgb, var(--chart-1) 60%, var(--border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--chart-1) 18%, transparent);
}
.ng-kbd, .rs-kbd {
  padding: 0 0.35rem; border-radius: 5px;
  font: 600 0.66rem/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--muted-foreground); border: 1px solid var(--border); background: var(--card);
  pointer-events: none; transition: opacity var(--dur-1) ease;
}
.ng-kbd { position: absolute; right: 0.6rem; }
.ng-search input:focus ~ .ng-kbd, .ng-search input:not(:placeholder-shown) ~ .ng-kbd { opacity: 0; }
@media (hover: none) { .ng-kbd, .rs-kbd { display: none; } }

.ng-chips { display: flex; gap: 0.35rem; overflow-x: auto; scrollbar-width: none; min-width: 0; }
.ng-chips::-webkit-scrollbar { display: none; }
.ng-sort {
  flex-shrink: 0; padding: 0.32rem 0.72rem; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border); background: transparent;
  background-image: linear-gradient(180deg, var(--nz-hairline), transparent);
  color: var(--muted-foreground); font: inherit; font-size: 0.75rem; font-weight: 600; white-space: nowrap;
  transition: background-color var(--dur-1) ease, border-color var(--dur-1) ease, color var(--dur-1) ease, transform var(--dur-1) var(--ease-out);
}
.ng-sort:hover { border-color: color-mix(in srgb, var(--chart-1) 50%, var(--border)); color: var(--foreground); }
.ng-sort:active { transform: scale(0.96); }
.ng-sort[aria-pressed="true"] {
  background-image: linear-gradient(135deg, var(--chart-1), var(--nz-btn-2));
  border-color: transparent; color: #fff;
  box-shadow: inset 0 1px 0 0 rgb(255 255 255 / 0.2), 0 6px 16px -8px var(--nz-glow);
}

/* Switch - thumb moves with transform only. */
.ng-switch, .rs-switch {
  display: inline-flex; align-items: center; gap: 0.45rem; flex-shrink: 0;
  padding: 0.25rem 0.35rem; border: 0; background: transparent; cursor: pointer; border-radius: 999px;
  color: var(--muted-foreground); font: inherit; font-size: 0.75rem; font-weight: 600; white-space: nowrap;
  text-decoration: none;
}
.ng-switch:hover, .rs-switch:hover { color: var(--foreground); }
.ng-switch-track, .rs-switch-track {
  position: relative; width: 30px; height: 18px; border-radius: 999px; flex-shrink: 0;
  background: var(--muted); box-shadow: inset 0 0 0 1px var(--border);
  transition: background-color var(--dur-2) ease;
}
.ng-switch-thumb, .rs-switch-thumb {
  position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / 0.35);
  transition: transform var(--dur-2) var(--ease-out);
}
.ng-switch[aria-checked="true"], .rs-switch[data-on="true"] { color: var(--foreground); }
.ng-switch[aria-checked="true"] .ng-switch-track { background: var(--chart-1); box-shadow: none; }
.rs-switch[data-on="true"] .rs-switch-track { background: var(--rs-accent); box-shadow: none; }
.ng-switch[aria-checked="true"] .ng-switch-thumb, .rs-switch[data-on="true"] .rs-switch-thumb { transform: translateX(12px); }
.ng-switch-count, .rs-switch-count { font-weight: 500; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.ng-result { margin-left: auto; font-size: 0.72rem; color: var(--muted-foreground); font-variant-numeric: tabular-nums; white-space: nowrap; }

.ng-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--ng-grid-min), 1fr)); gap: 0.9rem;
  transition: opacity var(--dur-1) ease;
}
.ng-grid > li {
  min-width: 0;
  content-visibility: auto; contain-intrinsic-size: auto 168px;
  animation: rise-in-sm 0.32s var(--ease-out) backwards;
}
.ng-grid > li:nth-child(2)  { animation-delay: 0.03s; }
.ng-grid > li:nth-child(3)  { animation-delay: 0.06s; }
.ng-grid > li:nth-child(4)  { animation-delay: 0.09s; }
.ng-grid > li:nth-child(5)  { animation-delay: 0.12s; }
.ng-grid > li:nth-child(6)  { animation-delay: 0.15s; }
.ng-grid > li:nth-child(7)  { animation-delay: 0.18s; }
.ng-grid > li:nth-child(8)  { animation-delay: 0.21s; }
.ng-grid > li:nth-child(n+9) { animation-delay: 0.24s; }
.ng-grid.is-settled > li { animation: none; }
.ng-grid.is-resorting { opacity: 0.35; }

.ng-card {
  position: relative; display: flex; flex-direction: column; gap: 0.65rem; height: 100%;
  padding: 0.85rem 0.95rem 0.8rem; color: inherit; text-decoration: none;
  transition: transform var(--dur-2) var(--ease-out), opacity var(--dur-2) ease;
}
/* Hover ring: an opacity-faded layer - box-shadow itself never animates. */
.ng-card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--chart-1) 50%, var(--border)), var(--nz-elev-2), 0 14px 30px -20px var(--nz-glow);
  opacity: 0; transition: opacity var(--dur-2) ease;
}
.ng-card:hover { transform: translateY(-3px); }
.ng-card:hover::after { opacity: 1; }
.ng-card:active { transform: translateY(-1px) scale(0.995); }
.ng-card:focus-visible { outline: 2px solid var(--chart-1); outline-offset: 3px; }
.ng-card.is-empty { opacity: 0.72; }
.ng-card.is-empty:hover, .ng-card.is-empty:focus-visible { opacity: 1; }

.ng-card-top { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 0.7rem; }
.ng-card-icon { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; background: var(--muted); transition: transform var(--dur-3) var(--ease-out); }
.ng-card:hover .ng-card-icon { transform: scale(1.06); }
.ng-card-icon-fb {
  display: inline-flex; align-items: center; justify-content: center; color: var(--nz-accent-text);
  background: linear-gradient(135deg, color-mix(in srgb, var(--chart-1) 26%, var(--muted)), var(--muted));
}
.ng-card-id { min-width: 0; display: flex; flex-direction: column; gap: 0.2rem; }
.ng-card-name {
  font-size: 0.9rem; font-weight: 650; line-height: 1.3; letter-spacing: -0.01em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere;
}
.ng-endpoint {
  position: relative; overflow: hidden; align-self: flex-start;
  display: inline-flex; align-items: center; gap: 0.25rem;
  padding: 0.06rem 0.45rem; border-radius: 999px;
  font: 600 0.66rem/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: nowrap;
  color: var(--nz-accent-text); background: color-mix(in srgb, var(--chart-1) 10%, transparent);
}
/* One-shot sheen on card hover - Signature v4's nz-sheen, reused. */
.ng-endpoint::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 50%;
  background: linear-gradient(90deg, transparent, var(--nz-sheen), transparent);
  opacity: 0; transform: translateX(-150%) skewX(-18deg); pointer-events: none;
}
.ng-card:hover .ng-endpoint::after { animation: nz-sheen 0.9s var(--ease-out) 1; }
.ng-endpoint.is-inline { margin-left: auto; }

.ng-rank {
  flex-shrink: 0; align-self: start; font-size: 0.68rem; font-weight: 700; padding: 0.1rem 0.42rem; border-radius: 6px;
  color: var(--muted-foreground); background: var(--accent); font-variant-numeric: tabular-nums;
}
/* Top three get weight, not a medal - same rule as /asn and /minecraft. */
.ng-rank.is-top {
  color: var(--nz-accent-text); background: color-mix(in srgb, var(--chart-1) 14%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--chart-1) 28%, transparent);
}
.ng-rank.is-top.is-mc { color: var(--ng-mc-text); background: color-mix(in srgb, var(--ng-mc) 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ng-mc) 28%, transparent); }

.ng-card-row { display: flex; align-items: center; gap: 0.45rem; min-width: 0; font-variant-numeric: tabular-nums; }
.ng-count { font-size: 1.25rem; font-weight: 750; letter-spacing: -0.02em; }
.ng-count-max { font-size: 0.8rem; font-weight: 500; color: var(--muted-foreground); }
.ng-delta {
  flex-shrink: 0; font-size: 0.66rem; font-weight: 700; padding: 0.06rem 0.4rem; border-radius: 999px;
  animation: rise-in-sm 0.3s var(--ease-out) backwards; transition: opacity 0.6s ease;
}
.ng-delta.up   { color: var(--ng-up);   background: color-mix(in srgb, var(--ng-up) 14%, transparent); }
.ng-delta.down { color: var(--ng-down); background: color-mix(in srgb, var(--ng-down) 12%, transparent); }
.ng-delta.is-fading { opacity: 0; }
.ng-spark { margin-left: auto; flex-shrink: 0; width: 64px; height: 20px; color: var(--chart-3); overflow: visible; }
.ng-spark path { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }

.ng-bar { height: 5px; border-radius: 999px; background: var(--muted); overflow: hidden; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border) 80%, transparent); }
/* Static width carries the value; bar-fill (scaleX 0 -> 1) only sweeps it in. */
.ng-bar > span {
  display: block; height: 100%; border-radius: inherit; transform-origin: left center;
  background: linear-gradient(90deg, var(--chart-1), var(--nz-accent-2));
  animation: bar-fill 0.7s var(--ease-out) 0.15s backwards;
}
.ng-card-foot { display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; min-width: 0; }
.ng-tag {
  max-width: 10rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: 0.08rem 0.45rem; border-radius: 999px; font-size: 0.64rem; font-weight: 600;
  background: var(--accent); background-image: linear-gradient(180deg, var(--nz-hairline), transparent);
  color: var(--muted-foreground);
}
.ng-tag.is-mc { color: var(--ng-mc-text); }
.ng-share { margin-left: auto; font-size: 0.7rem; color: var(--muted-foreground); font-variant-numeric: tabular-nums; white-space: nowrap; }

.ng-empty {
  display: flex; flex-direction: column; align-items: center; gap: 0.75rem;
  padding: 2.5rem 1rem; text-align: center; color: var(--muted-foreground); font-size: 0.88rem;
  animation: fade-in var(--dur-3) ease backwards;
}
.ng-empty p { margin: 0; }

/* --------------------------------------------------------------------------
   Insight panels
   -------------------------------------------------------------------------- */
.ng-panels { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.ng-panel { padding: 1rem 1.1rem 1.05rem; display: flex; flex-direction: column; gap: 0.85rem; }
.ng-panel-empty { margin: 0; font-size: 0.82rem; color: var(--muted-foreground); }
.ng-panel-foot { margin: auto 0 0; padding-top: 0.7rem; border-top: 1px solid color-mix(in srgb, var(--border) 75%, transparent); font-size: 0.72rem; color: var(--muted-foreground); line-height: 1.5; }
.ng-panel-foot a { color: var(--nz-accent-text); font-weight: 600; }
.ng-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.15rem; }
.ng-bars > li { min-width: 0; }
.ng-bars-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name val" "bar bar"; gap: 0.3rem 0.6rem;
  padding: 0.45rem 0.55rem; border-radius: calc(var(--radius) - 6px); color: inherit; text-decoration: none;
  transition: background-color var(--dur-1) ease;
}
a.ng-bars-row:hover { background: var(--accent); }
.ng-bars-name { grid-area: name; font-size: 0.82rem; font-weight: 650; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ng-bars-val { grid-area: val; font-size: 0.72rem; color: var(--muted-foreground); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ng-bars-track { grid-area: bar; height: 6px; border-radius: 999px; background: var(--muted); overflow: hidden; }
.ng-bars-track > span {
  display: block; height: 100%; border-radius: inherit; transform-origin: left center;
  background: linear-gradient(90deg, var(--chart-1), var(--nz-accent-2));
  animation: bar-fill 0.6s var(--ease-out) backwards;
  animation-delay: calc(0.15s + var(--i, 0) * 0.05s);
}
.ng-bars-row.is-mc .ng-bars-track > span { background: linear-gradient(90deg, var(--ng-mc), color-mix(in srgb, var(--nz-accent-3) 55%, var(--ng-mc))); }
.ng-bars-track.is-muted > span { background: color-mix(in srgb, var(--muted-foreground) 45%, transparent); }

/* --------------------------------------------------------------------------
   Minecraft list (entry look = /minecraft's .mcv-entry)
   -------------------------------------------------------------------------- */
.ng-mc-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--ng-mc-min), 1fr)); gap: 0.8rem;
}
.ng-mc-grid > li { min-width: 0; animation: rise-in-sm 0.32s var(--ease-out) backwards; animation-delay: calc(0.05s + var(--i, 0) * 0.03s); }
.ng-mc-grid.is-rest { margin-top: 0.8rem; }
.ng-mc-grid.is-rest > li { content-visibility: auto; contain-intrinsic-size: auto 118px; animation: none; }
.ng-mc {
  position: relative; display: flex; flex-direction: column; height: 100%;
  border-radius: var(--radius); color: inherit; text-decoration: none;
  background: var(--card); background-image: var(--nz-card-wash);
  box-shadow: inset 0 1px 0 0 var(--nz-hairline), 0 0 0 1px var(--border), var(--nz-elev-1);
  transition: transform var(--dur-2) var(--ease-out), opacity var(--dur-2) ease;
}
.ng-mc::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ng-mc) 50%, var(--border)), var(--nz-elev-2), 0 14px 30px -20px color-mix(in srgb, var(--ng-mc) 60%, transparent);
  opacity: 0; transition: opacity var(--dur-2) ease;
}
.ng-mc:hover { transform: translateY(-3px); }
.ng-mc:hover::after { opacity: 1; }
.ng-mc:focus-visible { outline: 2px solid var(--ng-mc); outline-offset: 3px; }
.ng-mc.is-empty { opacity: 0.74; }
.ng-mc.is-off { opacity: 0.5; }
.ng-mc.is-empty:hover, .ng-mc.is-off:hover, .ng-mc.is-empty:focus-visible, .ng-mc.is-off:focus-visible { opacity: 1; }
.ng-mc-entry .mcv-fav { width: 52px; height: 52px; }
.ng-mc:hover .mcv-fav { transform: scale(1.06); }
.ng-mc:hover .mcv-entry::after { animation: nz-sheen 0.9s var(--ease-out) 1; }
.ng-mc-foot { display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; padding: 0.55rem 0.8rem 0.7rem; min-width: 0; }

.ng-more { margin-top: 0.8rem; }
.ng-more > summary {
  display: flex; align-items: center; justify-content: center; gap: 0.4rem; cursor: pointer; list-style: none;
  padding: 0.6rem 1rem; border-radius: 999px; font-size: 0.82rem; font-weight: 650;
  color: var(--foreground); background: var(--accent); box-shadow: inset 0 0 0 1px var(--border);
  transition: background-color var(--dur-1) ease;
}
.ng-more > summary::-webkit-details-marker { display: none; }
.ng-more > summary:hover { background: color-mix(in srgb, var(--accent) 70%, var(--card)); }
.ng-more > summary:focus-visible { outline: 2px solid var(--ng-mc); outline-offset: 2px; }
.ng-more > summary svg { transition: transform var(--dur-2) var(--ease-out); }
.ng-more[open] > summary svg { transform: rotate(180deg); }
.ng-more[open] .ng-more-label::after { content: " - gizle"; }
.ng-more-count { color: var(--muted-foreground); font-weight: 500; font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   CTA band
   -------------------------------------------------------------------------- */
.ng-band {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem;
  padding: 1.6rem 1.5rem;
  box-shadow: inset 0 1px 0 0 var(--nz-hairline), 0 0 0 1px color-mix(in srgb, var(--chart-1) 26%, var(--border)), var(--nz-elev-2);
}
.ng-band::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60% 140% at 0% 0%, var(--nz-mesh-1), transparent 70%),
    radial-gradient(50% 120% at 100% 100%, var(--nz-mesh-2), transparent 70%);
  opacity: 0.8;
}
.ng-band h2 { margin: 0 0 0.35rem; font-size: clamp(1.2rem, 1rem + 0.8vw, 1.6rem); letter-spacing: -0.025em; }
.ng-band p { margin: 0; max-width: 36rem; font-size: 0.88rem; color: var(--muted-foreground); line-height: 1.55; }
.ng-band-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.ng-band-actions .btn { border-radius: 999px; }

/* Scroll reveals - wrappers only, additive only. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .ng-steps > li, .ng-panels > .ng-panel, .ng-band, .ng-how-title {
      animation: rise-in linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 50%;
    }
  }
}

/* --------------------------------------------------------------------------
   Guard breakpoints: 375 (base) / 480 / 768 / 1024 / 1440 / 2200+ (3440 UW)
   -------------------------------------------------------------------------- */
@media (min-width: 480px) {
  .ng-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
  .ng-toolbar { position: sticky; top: 4.5rem; z-index: 5; }     /* clears the 4rem .site-header */
  .ng-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ng-kpis { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
}
@media (min-width: 900px) {
  .ng-panels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .ng-hero { grid-template-columns: minmax(0, 1.25fr) minmax(340px, 0.75fr); align-items: center; gap: 2.5rem; padding-top: 2.8rem; }
}
@media (min-width: 1440px) {
  :root { --ng-max: 1560px; --ng-chart-h: 270px; }
  .ng-page { padding-inline: 2rem; gap: 1.6rem; }
}
@media (min-width: 2200px) {
  :root { --ng-max: 2560px; --ng-grid-min: 320px; --ng-mc-min: 320px; --ng-chart-h: 320px; }
  .ng-page { padding-inline: 2.5rem; gap: 1.8rem; }
  .ng-hero { grid-template-columns: minmax(0, 1.4fr) minmax(460px, 0.6fr); }
  .ng-lead { max-width: 50rem; font-size: 1.05rem; }
  .ng-kpis { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
  .ng-panels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .ng-page { padding: 0 1rem 2.5rem; gap: 1.1rem; }
  .ng-hero { padding-top: 1.4rem; }
  :root { --ng-chart-h: 180px; }
  .ng-toolbar { padding: 0.55rem; }
  .ng-search { flex-basis: 100%; }
  .ng-chips { flex: 1 1 100%; }
  .ng-result { margin-left: 0; }
  .ng-legend { margin-left: 0; }
  .ng-block-link { margin-left: 0; }
  .ng-mask { font-size: 0.74rem; }
  .ng-band { padding: 1.25rem 1.1rem; }
}
@media (max-width: 420px) {
  .ng-mini dd { font-size: 0.98rem; }
  .ng-kpi-num { font-size: 1.35rem; }
  .ng-grid, .ng-mc-grid { gap: 0.75rem; }
  :root { --ng-grid-min: 260px; --ng-mc-min: 260px; }
}

/* ==========================================================================
   KAYNAK ATLASI (/resources)
   ========================================================================== */
.rs-page {
  width: 100%; max-width: var(--rs-max); margin: 0 auto;
  padding: 0 1.5rem 3.5rem;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.6rem;
}
.rs-page > * { min-width: 0; }
body.rs-has-tray .rs-page { padding-bottom: 7rem; }

.rs-dot { background: var(--rs-live); box-shadow: 0 0 0 3px color-mix(in srgb, var(--rs-live) 22%, transparent); }
.rs-dot::after { background: var(--rs-live); }

.rs-pod-card, .rs-eco-card, .rs-den-row, .rs-row, .rs-note, .rs-stats > div, .rs-empty {
  border-radius: var(--radius);
  background-color: var(--card);
  background-image: var(--nz-card-wash);
  box-shadow: inset 0 1px 0 0 var(--nz-hairline), 0 0 0 1px var(--border), var(--nz-elev-1);
}

.rs-ico-badge {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 1.9rem; height: 1.9rem; border-radius: 0.6rem;
  color: var(--rs-accent-text);
  background: linear-gradient(140deg, color-mix(in srgb, var(--rs-accent) 18%, transparent), color-mix(in srgb, var(--nz-accent-3) 10%, transparent));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rs-accent) 26%, transparent);
}
.rs-sec-head { display: flex; align-items: center; gap: 0.65rem; flex-wrap: wrap; margin-bottom: 0.9rem; }
.rs-sec-head > div { min-width: 0; flex: 1 1 16rem; }
.rs-sec-head h2 { margin: 0; font-size: clamp(1.1rem, 1rem + 0.45vw, 1.35rem); letter-spacing: -0.02em; }
.rs-sec-head p { margin: 0.12rem 0 0; font-size: 0.76rem; color: var(--muted-foreground); }
.rs-textlink { margin-left: auto; font-size: 0.8rem; font-weight: 650; color: var(--rs-accent-text); text-underline-offset: 3px; }
.rs-textlink:hover { text-decoration: underline; }
.rs-foot { margin: 0.8rem 0 0; font-size: 0.72rem; line-height: 1.55; color: var(--muted-foreground); }
.rs-foot.is-center { text-align: center; }

.rs-chip {
  display: inline-flex; align-items: center; gap: 0.25rem; white-space: nowrap;
  padding: 0.06rem 0.45rem; border-radius: 999px; font-size: 0.64rem; font-weight: 650;
  color: var(--muted-foreground); background: var(--accent);
  background-image: linear-gradient(180deg, var(--nz-hairline), transparent);
}
.rs-chip.is-cat { color: var(--rs-accent-text); background-color: color-mix(in srgb, var(--rs-accent) 12%, transparent); }
.rs-chip.is-sys { color: var(--muted-foreground); }
.rs-chip.is-single { color: var(--muted-foreground); box-shadow: inset 0 0 0 1px var(--border); background: transparent; }
.rs-chip.is-filter {
  padding: 0.28rem 0.65rem; font-size: 0.74rem; text-decoration: none;
  color: var(--rs-accent-text); background: color-mix(in srgb, var(--rs-accent) 12%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rs-accent) 40%, var(--border));
  animation: pop-in var(--dur-2) var(--ease-out) backwards;
}
.rs-chip.is-filter:hover { background: color-mix(in srgb, var(--rs-accent) 20%, transparent); }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.rs-hero {
  position: relative; isolation: isolate;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.4rem;
  padding: 2.2rem 0 0.2rem;
}
.rs-hero::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  inset: -1.5rem -14% -1rem;
  background:
    radial-gradient(40% 70% at 8% 6%, var(--nz-mesh-2), transparent 70%),
    radial-gradient(34% 60% at 90% 0%, var(--nz-mesh-3), transparent 72%),
    radial-gradient(30% 50% at 60% 100%, var(--nz-mesh-1), transparent 70%),
    linear-gradient(var(--nz-grid-line) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(90deg, var(--nz-grid-line) 1px, transparent 1px) 0 0 / 28px 28px;
  -webkit-mask-image: radial-gradient(75% 95% at 30% 0%, #000 28%, transparent 80%);
          mask-image: radial-gradient(75% 95% at 30% 0%, #000 28%, transparent 80%);
  opacity: 0.6;
}
.rs-hero-copy { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.rs-hero-copy > * { animation: rise-in 0.5s var(--ease-out) backwards; }
.rs-hero-copy > :nth-child(2) { animation-delay: 0.05s; }
.rs-hero-copy > :nth-child(3) { animation-delay: 0.1s; }
.rs-hero-copy > :nth-child(4) { animation-delay: 0.15s; }
.rs-hero-copy > :nth-child(5) { animation-delay: 0.2s; }
.rs-hero h1 {
  margin: 0.9rem 0 0.6rem;
  font-size: clamp(2rem, 1.4rem + 2.2vw, 3.2rem); font-weight: 800;
  line-height: 1.05; letter-spacing: -0.04em; text-wrap: balance;
}
.rs-h1-accent { color: var(--rs-accent-text); }
.rs-lead { margin: 0 0 1.1rem; max-width: 42rem; font-size: 0.98rem; line-height: 1.62; color: var(--muted-foreground); text-wrap: pretty; }
.rs-lead strong { color: var(--foreground); font-weight: 650; font-variant-numeric: tabular-nums; }

/* Search pill. The visible focus ring lives on the container. */
.rs-search {
  position: relative; display: flex; align-items: center; gap: 0.5rem;
  width: 100%; max-width: 40rem; margin: 0;
  padding: 0.3rem 0.3rem 0.3rem 1rem; border-radius: 999px;
  background-color: color-mix(in srgb, var(--card) 88%, transparent);
  background-image: var(--nz-card-wash);
  box-shadow: inset 0 1px 0 0 var(--nz-hairline), 0 0 0 1px var(--border), var(--nz-elev-2);
}
.rs-search:focus-within {
  box-shadow: inset 0 1px 0 0 var(--nz-hairline), 0 0 0 1px color-mix(in srgb, var(--rs-accent) 60%, var(--border)),
              0 0 0 4px color-mix(in srgb, var(--rs-accent) 18%, transparent), var(--nz-elev-2);
}
.rs-search-ico { display: inline-flex; color: var(--muted-foreground); flex-shrink: 0; }
.rs-search input[type="search"] { flex: 1; min-width: 0; height: 2.6rem; border: 0; background: transparent; color: var(--foreground); font: inherit; font-size: 0.96rem; }
.rs-search input::placeholder { color: var(--muted-foreground); }
.rs-search input:focus, .rs-search input:focus-visible { outline: none; }
.rs-kbd { flex-shrink: 0; }
.rs-search input:focus ~ .rs-kbd, .rs-search input:not(:placeholder-shown) ~ .rs-kbd { opacity: 0; }
.rs-search .btn { flex-shrink: 0; height: 2.45rem; padding: 0 1.2rem; border-radius: 999px; }

.rs-families { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin-top: 0.95rem; max-width: 46rem; }
.rs-families-label { font-size: 0.72rem; font-weight: 600; color: var(--muted-foreground); margin-right: 0.15rem; }
.rs-fam {
  display: inline-flex; align-items: baseline; gap: 0.35rem;
  padding: 0.26rem 0.6rem; border-radius: 999px; text-decoration: none;
  font: 600 0.74rem/1.3 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--foreground); background: color-mix(in srgb, var(--card) 70%, transparent);
  box-shadow: inset 0 0 0 1px var(--border);
  transition: background-color var(--dur-1) ease, box-shadow var(--dur-1) ease, transform var(--dur-1) var(--ease-out);
  animation: rise-in-sm 0.3s var(--ease-out) backwards;
  animation-delay: calc(0.2s + min(var(--i, 0), 13) * 0.025s);
}
.rs-fam b { font-family: 'Inter', ui-sans-serif, system-ui, sans-serif; font-size: 0.66rem; font-weight: 600; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.rs-fam:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rs-accent) 55%, var(--border)); }
.rs-fam:active { transform: scale(0.96); }
.rs-fam.is-on { color: #fff; background: linear-gradient(135deg, #6d28d9, var(--nz-btn-2)); box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--rs-accent) 70%, transparent); }
.rs-fam.is-on b { color: rgb(255 255 255 / 0.8); }

.rs-stats { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem; align-self: start; }
.rs-stats > div {
  min-width: 0; padding: 0.85rem 0.95rem; display: flex; flex-direction: column; gap: 0.2rem;
  animation: stat-rise 0.5s var(--ease-out) backwards;
  animation-delay: calc(0.1s + var(--i, 0) * 0.06s);
}
.rs-stats dt { font-size: 0.72rem; font-weight: 600; color: var(--muted-foreground); }
.rs-stats dd { margin: 0; font-size: 1.55rem; font-weight: 780; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }
.rs-stats > div:first-child dd { color: var(--rs-accent-text); }
.rs-stat-sub { font-size: 0.7rem; color: var(--muted-foreground); }
.rs-progress { display: block; height: 5px; margin: 0.25rem 0 0.1rem; border-radius: 999px; background: var(--muted); overflow: hidden; }
.rs-progress > span {
  display: block; height: 100%; border-radius: inherit; transform-origin: left center;
  background: linear-gradient(90deg, var(--rs-accent), var(--nz-accent-3));
  animation: bar-fill 0.9s var(--ease-out) 0.4s backwards;
}

/* --------------------------------------------------------------------------
   Podium
   -------------------------------------------------------------------------- */
.rs-podium-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.9rem; }
.rs-pod { min-width: 0; animation: rise-in 0.45s var(--ease-out) backwards; animation-delay: calc(0.15s + var(--i, 0) * 0.07s); }
.rs-pod-card {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.9rem;
  height: 100%; padding: 1rem 1.1rem; color: inherit; text-decoration: none;
  transition: transform var(--dur-2) var(--ease-out);
}
.rs-pod-card::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(80% 120% at 0% 0%, color-mix(in srgb, var(--rs-accent) 14%, transparent), transparent 70%);
}
.rs-pod-card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--rs-accent) 50%, var(--border)), var(--nz-elev-2), 0 16px 34px -22px color-mix(in srgb, var(--rs-accent) 70%, transparent);
  opacity: 0; transition: opacity var(--dur-2) ease;
}
.rs-pod-card:hover { transform: translateY(-3px); }
.rs-pod-card:hover::after { opacity: 1; }
.rs-pod-card:focus-visible { outline: 2px solid var(--rs-accent); outline-offset: 3px; }
.rs-pod-rank {
  font-size: 2.8rem; font-weight: 850; line-height: 1; letter-spacing: -0.06em; font-variant-numeric: tabular-nums;
  color: var(--rs-accent-text);
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .rs-pod-rank {
    background-image: linear-gradient(160deg, var(--rs-accent), var(--nz-accent-3));
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  }
}
.rs-pod:nth-child(n+2) .rs-pod-rank { opacity: 0.75; }
.rs-pod-body { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 0.25rem; }
.rs-pod-kicker { font-size: 0.7rem; font-weight: 600; color: var(--muted-foreground); }
.rs-pod-name {
  max-width: 100%; font: 700 1.05rem/1.25 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: -0.02em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rs-pod-meta { font-size: 0.74rem; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.rs-pod-meta b { color: var(--foreground); font-weight: 650; }
.rs-ring { position: relative; width: 64px; height: 64px; flex-shrink: 0; display: grid; place-items: center; }
.rs-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.rs-ring circle { fill: none; stroke-width: 6; }
.rs-ring-bg { stroke: var(--muted); }
.rs-ring-fg { stroke: var(--rs-accent); stroke-linecap: round; }
.rs-ring-val { font-size: 0.8rem; font-weight: 750; font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   Ecosystem
   -------------------------------------------------------------------------- */
.rs-eco-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.9rem; }
.rs-eco-card { min-width: 0; padding: 0.95rem 1rem 0.85rem; display: flex; flex-direction: column; gap: 0.6rem; }
.rs-eco-card header h3 { margin: 0; font-size: 0.95rem; letter-spacing: -0.012em; }
.rs-eco-card header p { margin: 0.1rem 0 0; font-size: 0.72rem; color: var(--muted-foreground); }
.rs-eco-card.is-feature {
  box-shadow: inset 0 1px 0 0 var(--nz-hairline), 0 0 0 1px color-mix(in srgb, var(--rs-accent) 32%, var(--border)), var(--nz-elev-2);
}
.rs-eco-card.is-feature header h3 { color: var(--rs-accent-text); }
.rs-eco-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.1rem; }
.rs-eco-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name val" "bar bar"; gap: 0.3rem 0.6rem;
  padding: 0.4rem 0.5rem; border-radius: calc(var(--radius) - 6px); color: inherit; text-decoration: none;
  transition: background-color var(--dur-1) ease;
}
.rs-eco-row:hover { background: var(--accent); }
.rs-eco-row.is-zero { opacity: 0.55; }
.rs-eco-name { grid-area: name; font-size: 0.82rem; font-weight: 650; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rs-eco-name sup { color: var(--muted-foreground); margin-left: 0.1rem; }
.rs-eco-val { grid-area: val; font-size: 0.72rem; color: var(--muted-foreground); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rs-eco-val b { color: var(--foreground); font-weight: 650; }
.rs-eco-track, .rs-den-track, .rs-row-track { height: 5px; border-radius: 999px; background: var(--muted); overflow: hidden; }
.rs-eco-track { grid-area: bar; }
.rs-eco-track > span, .rs-den-track > span, .rs-row-track > span {
  display: block; height: 100%; border-radius: inherit; transform-origin: left center;
  background: linear-gradient(90deg, var(--rs-accent), var(--nz-accent-3));
  animation: bar-fill 0.6s var(--ease-out) backwards;
}
.rs-eco-track > span { animation-delay: calc(0.2s + var(--i, 0) * 0.05s + var(--j, 0) * 0.04s); }
.rs-eco-card.is-feature .rs-eco-track { height: 7px; }

/* --------------------------------------------------------------------------
   Density
   -------------------------------------------------------------------------- */
.rs-den-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.6rem; }
.rs-den-list > li { min-width: 0; }
.rs-den-row {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name val" "bar bar"; gap: 0.4rem 0.8rem;
  padding: 0.7rem 0.85rem; color: inherit; text-decoration: none;
  transition: transform var(--dur-2) var(--ease-out);
}
.rs-den-row:hover { transform: translateY(-2px); }
.rs-den-row:focus-visible { outline: 2px solid var(--rs-accent); outline-offset: 2px; }
.rs-den-name { grid-area: name; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 650 0.84rem/1.3 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.rs-den-val { grid-area: val; font-size: 0.72rem; color: var(--muted-foreground); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rs-den-val b { color: var(--rs-up); font-weight: 700; }
.rs-den-track { grid-area: bar; }
.rs-den-track > span { animation-delay: calc(0.1s + var(--i, 0) * 0.04s); }

/* --------------------------------------------------------------------------
   Board (the paginated list)
   -------------------------------------------------------------------------- */
.rs-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.55rem 0.8rem; margin-bottom: 0.9rem; }
.rs-tabs { display: inline-flex; gap: 0.2rem; padding: 0.2rem; border-radius: 999px; background: var(--accent); box-shadow: inset 0 0 0 1px var(--border); max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.rs-tabs::-webkit-scrollbar { display: none; }
.rs-tab {
  flex-shrink: 0; padding: 0.3rem 0.85rem; border-radius: 999px; text-decoration: none; white-space: nowrap;
  color: var(--muted-foreground); font-size: 0.76rem; font-weight: 650;
  transition: background-color var(--dur-1) ease, color var(--dur-1) ease;
}
.rs-tab:hover { color: var(--foreground); }
.rs-tab[aria-current="true"] { background: var(--card); color: var(--foreground); box-shadow: 0 1px 3px rgb(0 0 0 / 0.18), inset 0 0 0 1px var(--border); }
.rs-active { display: flex; flex-wrap: wrap; gap: 0.35rem; }

.rs-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.5rem; }
.rs-row {
  position: relative; min-width: 0;
  display: grid; grid-template-columns: 2.4rem minmax(0, 1fr) auto; grid-template-areas: "rank main act" "rank stats stats";
  align-items: center; gap: 0.35rem 0.75rem;
  padding: 0.7rem 0.75rem 0.7rem 0.6rem;
  animation: rise-in-sm 0.32s var(--ease-out) backwards;
  animation-delay: calc(0.04s + var(--i, 0) * 0.025s);
  transition: box-shadow var(--dur-2) ease;
}
.rs-row.is-selected {
  box-shadow: inset 0 1px 0 0 var(--nz-hairline), 0 0 0 1.5px color-mix(in srgb, var(--rs-accent) 70%, var(--border)), var(--nz-elev-1);
}
.rs-rank {
  grid-area: rank; align-self: center; justify-self: center;
  font-size: 0.9rem; font-weight: 750; color: var(--muted-foreground); font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
}
.rs-row.is-top .rs-rank { color: var(--rs-accent-text); font-size: 1.05rem; }
.rs-row-main { grid-area: main; min-width: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.rs-row-name {
  min-width: 0; max-width: 100%; align-self: flex-start;
  font: 650 0.9rem/1.3 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: -0.01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--foreground); text-decoration: none;
}
.rs-row-name:hover { color: var(--rs-accent-text); text-decoration: underline; text-underline-offset: 3px; }
.rs-row-chips { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.rs-row-chips:empty { display: none; }
.rs-row-track > span { animation-delay: calc(0.12s + var(--i, 0) * 0.025s); }
.rs-row-stats { grid-area: stats; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.9rem; font-size: 0.74rem; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.rs-stat b { color: var(--foreground); font-weight: 700; }
.rs-stat em { font-style: normal; margin-left: 0.2rem; padding: 0.02rem 0.35rem; border-radius: 999px; font-size: 0.68rem; font-weight: 650; color: var(--rs-accent-text); background: color-mix(in srgb, var(--rs-accent) 12%, transparent); }
.rs-row-actions { grid-area: act; display: flex; gap: 0.3rem; }
.rs-sel, .rs-more {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; border-radius: 0.6rem; cursor: pointer;
  border: 1px solid var(--border); background: transparent; color: var(--muted-foreground);
  font-family: inherit; font-size: 0.95rem; font-weight: 700; line-height: 1;
  transition: background-color var(--dur-1) ease, color var(--dur-1) ease, border-color var(--dur-1) ease, transform var(--dur-1) var(--ease-out);
}
.rs-sel:hover, .rs-more:hover { color: var(--foreground); border-color: color-mix(in srgb, var(--rs-accent) 50%, var(--border)); }
.rs-sel:active, .rs-more:active { transform: scale(0.92); }
.rs-sel[aria-pressed="true"] { color: #fff; border-color: transparent; background: linear-gradient(135deg, #6d28d9, var(--nz-btn-2)); }
.rs-more svg { transform: rotate(-90deg); }

.rs-exact { margin-bottom: 0.8rem; display: flex; flex-direction: column; gap: 0.35rem; }
.rs-exact-label { font-size: 0.72rem; font-weight: 650; color: var(--muted-foreground); }
.rs-row.is-exact { box-shadow: inset 0 1px 0 0 var(--nz-hairline), 0 0 0 1px color-mix(in srgb, var(--rs-accent) 40%, var(--border)), var(--nz-elev-1); }

.rs-empty { display: flex; flex-direction: column; align-items: center; gap: 0.8rem; padding: 2.5rem 1rem; text-align: center; color: var(--muted-foreground); font-size: 0.88rem; }
.rs-empty p { margin: 0; max-width: 32rem; }

.rs-pager { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.3rem; margin-top: 1.2rem; }
.rs-pg {
  min-width: 2.2rem; height: 2.2rem; padding: 0 0.6rem; border-radius: 0.65rem;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.8rem; font-weight: 650; font-variant-numeric: tabular-nums; text-decoration: none;
  color: var(--muted-foreground); box-shadow: inset 0 0 0 1px var(--border);
  transition: background-color var(--dur-1) ease, color var(--dur-1) ease;
}
a.rs-pg:hover { color: var(--foreground); background: var(--accent); }
.rs-pg.is-current { color: #fff; box-shadow: none; background: linear-gradient(135deg, #6d28d9, var(--nz-btn-2)); }
.rs-pg.is-gap { box-shadow: none; }

.rs-note { padding: 1.1rem 1.2rem; }
.rs-note h2 { margin: 0 0 0.4rem; font-size: 0.95rem; letter-spacing: -0.012em; }
.rs-note p { margin: 0; font-size: 0.8rem; line-height: 1.65; color: var(--muted-foreground); max-width: 60rem; }
.rs-note b { color: var(--foreground); font-weight: 650; }

/* --------------------------------------------------------------------------
   Selection tray (bottom-centre, never over the right-edge controls)
   -------------------------------------------------------------------------- */
.rs-tray {
  position: fixed; left: 50%; bottom: max(1rem, env(safe-area-inset-bottom)); z-index: 30;
  width: min(960px, calc(100% - 2rem)); transform: translateX(-50%);
  animation: rs-sheet-up 0.3s var(--ease-out) backwards;
}
.rs-tray-inner {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.7rem;
  padding: 0.6rem 0.7rem 0.6rem 1rem; border-radius: 1.1rem;
  background: color-mix(in srgb, var(--card) 92%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%);
  box-shadow: inset 0 1px 0 0 var(--nz-hairline), 0 0 0 1px color-mix(in srgb, var(--rs-accent) 40%, var(--border)), var(--nz-elev-3);
}
.rs-tray-count { font-size: 0.78rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.rs-tray-chips { list-style: none; margin: 0; padding: 0; display: flex; gap: 0.3rem; flex: 1 1 12rem; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.rs-tray-chips::-webkit-scrollbar { display: none; }
.rs-tray-chip {
  display: inline-flex; align-items: center; gap: 0.3rem; max-width: 14rem;
  padding: 0.2rem 0.55rem; border: 0; border-radius: 999px; cursor: pointer;
  font: 600 0.72rem/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--rs-accent-text); background: color-mix(in srgb, var(--rs-accent) 14%, transparent);
  animation: pop-in var(--dur-2) var(--ease-out) backwards;
}
.rs-tray-chip > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rs-tray-x { opacity: 0.7; }
.rs-tray-clear { border: 0; background: transparent; cursor: pointer; font: inherit; font-size: 0.76rem; font-weight: 600; color: var(--muted-foreground); padding: 0.3rem 0.5rem; border-radius: 999px; }
.rs-tray-clear:hover { color: var(--foreground); background: var(--accent); }
.rs-tray .btn { border-radius: 999px; }

/* --------------------------------------------------------------------------
   Drawer (native <dialog>): right sheet >=768px, bottom sheet below.
   -------------------------------------------------------------------------- */
.rs-drawer {
  margin: 0; padding: 1.2rem 1.2rem 1.1rem; border: 0; color: var(--foreground);
  background: var(--card); background-image: var(--nz-card-wash);
  box-shadow: 0 0 0 1px var(--border), var(--nz-elev-3);
  position: fixed; inset: auto 0 0 0; width: 100%; max-width: 100%; max-height: 88vh;
  border-radius: 1.2rem 1.2rem 0 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
}
.rs-drawer[open] { display: flex; flex-direction: column; gap: 1rem; animation: rs-sheet-up 0.3s var(--ease-out) backwards; }
.rs-drawer::backdrop { background: rgb(0 0 0 / 0.45); animation: fade-in 0.2s ease backwards; }
.rs-dr-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.rs-dr-head > div { min-width: 0; }
.rs-drawer > * { min-width: 0; }
.rs-dr-kicker { font-size: 0.72rem; font-weight: 650; color: var(--rs-accent-text); }
.rs-dr-name { margin: 0.2rem 0 0.25rem; font: 750 1.2rem/1.25 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.rs-dr-raw { display: block; font-size: 0.7rem; color: var(--muted-foreground); overflow-wrap: anywhere; }
.rs-dr-close {
  flex-shrink: 0; width: 2.2rem; height: 2.2rem; border-radius: 0.7rem; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); background: transparent; color: var(--muted-foreground);
}
.rs-dr-close:hover { color: var(--foreground); background: var(--accent); }
.rs-dr-stats { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
.rs-dr-stats > div { padding: 0.6rem 0.7rem; border-radius: 0.8rem; background: color-mix(in srgb, var(--accent) 65%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border) 80%, transparent); }
.rs-dr-stats dt { font-size: 0.68rem; font-weight: 600; color: var(--muted-foreground); }
.rs-dr-stats dd { margin: 0.15rem 0 0; font-size: 1.1rem; font-weight: 750; font-variant-numeric: tabular-nums; }
.rs-dr-sub { margin: 0.2rem 0 0; font-size: 0.82rem; }
.rs-dr-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.35rem; }
.rs-dr-list > li { min-width: 0; animation: rise-in-sm 0.28s var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * 0.04s); }
.rs-dr-srv {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  padding: 0.55rem 0.7rem; border-radius: 0.75rem; color: inherit; text-decoration: none;
  box-shadow: inset 0 0 0 1px var(--border); transition: background-color var(--dur-1) ease;
}
.rs-dr-srv:hover { background: var(--accent); }
.rs-dr-srv-n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.82rem; font-weight: 600; }
.rs-dr-srv-m { flex-shrink: 0; display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.74rem; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.rs-dr-srv-m b { color: var(--foreground); }
.rs-dr-tag { padding: 0.04rem 0.4rem; border-radius: 999px; font-size: 0.64rem; font-weight: 650; background: var(--accent); }
.rs-dr-tag.is-guard { color: var(--nz-accent-text); background: color-mix(in srgb, var(--chart-1) 12%, transparent); }
.rs-dr-state { margin: 0; font-size: 0.78rem; color: var(--muted-foreground); }
.rs-dr-state:empty { display: none; }
.rs-dr-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: auto; }
.rs-dr-actions .btn { border-radius: 999px; }

/* Scroll reveals - wrappers only, additive only. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .rs-eco-grid > .rs-eco-card, .rs-den-list > li, .rs-note {
      animation: rise-in linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 50%;
    }
  }
}

/* --------------------------------------------------------------------------
   Resources breakpoints: 375 (base) / 640 / 768 / 1100 / 1440 / 2200+
   -------------------------------------------------------------------------- */
@media (min-width: 640px) {
  .rs-eco-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rs-row { grid-template-columns: 2.6rem minmax(0, 1fr) auto auto; grid-template-areas: "rank main stats act"; }
  .rs-row-stats { flex-direction: column; align-items: flex-end; gap: 0.1rem; text-align: right; }
  .rs-row-stats .rs-stat.is-main { font-size: 0.82rem; }
}
@media (min-width: 768px) {
  .rs-podium-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rs-pod-card { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "rank ring" "body body"; align-items: start; }
  .rs-pod-rank { grid-area: rank; }
  .rs-ring { grid-area: ring; justify-self: end; }
  .rs-pod-body { grid-area: body; }
  .rs-den-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rs-drawer {
    inset: 0 0 0 auto; width: min(460px, 92vw); height: 100%; max-height: 100%;
    border-radius: 1.2rem 0 0 1.2rem;
  }
  .rs-drawer[open] { animation-name: rs-sheet-in; }
}
@media (min-width: 1100px) {
  .rs-hero { grid-template-columns: minmax(0, 1.35fr) minmax(360px, 0.65fr); align-items: end; gap: 2.5rem; padding-top: 2.8rem; }
  .rs-eco-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rs-row-stats { flex-direction: row; align-items: baseline; gap: 0.2rem 1.2rem; }
  .rs-row-stats .rs-stat { min-width: 5.5rem; text-align: right; }
  .rs-row-stats .rs-stat.is-main { min-width: 9rem; }
}
@media (min-width: 1440px) {
  :root { --rs-max: 1480px; }
  .rs-page { padding-inline: 2rem; }
}
@media (min-width: 2200px) {
  :root { --rs-max: 2400px; }
  .rs-page { padding-inline: 2.5rem; gap: 1.9rem; }
  .rs-eco-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .rs-den-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .rs-lead { max-width: 52rem; font-size: 1.05rem; }
  /* Two-column leaderboard, filled top-to-bottom (1-12 left, 13-24 right). */
  .rs-list { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(12, auto); grid-auto-flow: column; column-gap: 1rem; }
}
@media (max-width: 767px) {
  .rs-page { padding: 0 1rem 2.5rem; gap: 1.2rem; }
  .rs-hero { padding-top: 1.4rem; }
  .rs-stats dd { font-size: 1.3rem; }
  .rs-search { padding-left: 0.8rem; }
  .rs-search .btn { padding: 0 0.9rem; }
  .rs-textlink { margin-left: 0; }
}
@media (max-width: 420px) {
  .rs-row { padding: 0.65rem 0.6rem 0.65rem 0.45rem; column-gap: 0.55rem; grid-template-columns: 2rem minmax(0, 1fr) auto; }
  .rs-pod-rank { font-size: 2.3rem; }
  .rs-tray-inner { padding: 0.55rem; }
  .rs-tray .btn { flex: 1 1 100%; }
}

/* --------------------------------------------------------------------------
   Reduced motion. The global guard zeroes durations / delays; this pins the
   keyframed pieces to their END state and stops both pages' one loop.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .ng-dot::after, .rs-dot::after { animation: none !important; opacity: 0 !important; }
  .ng-hero-copy > *, .ng-pulse, .ng-mini > div, .ng-split > span, .ng-kpi, .ng-chart-card,
  .ng-grid > li, .ng-mc-grid > li, .ng-bar > span, .ng-bars-track > span, .ng-delta, .ng-flip,
  .ng-mask-ip, .ng-mask-text, .ng-mask-text::after, .ng-endpoint::after, .ng-empty,
  .ng-steps > li, .ng-panels > .ng-panel, .ng-band, .ng-how-title,
  .rs-hero-copy > *, .rs-stats > div, .rs-progress > span, .rs-fam, .rs-pod, .rs-eco-card,
  .rs-eco-track > span, .rs-den-track > span, .rs-row-track > span, .rs-row, .rs-den-list > li,
  .rs-note, .rs-chip.is-filter, .rs-tray, .rs-tray-chip, .rs-drawer[open], .rs-drawer::backdrop,
  .rs-dr-list > li { animation: none !important; }
  .ng-card:hover, .ng-mc:hover, .rs-pod-card:hover, .rs-den-row:hover { transform: none; }
  .ng-card:hover .ng-card-icon, .ng-mc:hover .mcv-fav { transform: none; }
}

/* ==========================================================================
   Utility pages v2 - "ut-" block
   (/favoriler, /uyarilar, /durum, /api-docs, 404)
   --------------------------------------------------------------------------
   Append verbatim at the END of public/css/style.css. Same contract as the
   hm- / sv- / vw- / asnv- / mcv- blocks:
     - Own prefix. Nothing above is edited or re-selected.
     - Only transform / opacity animate (colour / background-color /
       border-color on hover). Nothing here animates width, height, top,
       left, margin, padding, box-shadow or stroke-dashoffset.
     - Entrances use `backwards` fill, so a later :hover transform still wins.
       Scroll reveals sit on WRAPPERS (.ut-fav-item, .ut-reveal), never on a
       card that also has a hover transform.
     - Exactly ONE infinite animation per page: .ut-dot::after (the live dot).
       It stops when data is stale (.is-stale / .is-idle) and is killed
       outright under reduced motion. /api-docs and 404 render no dot at all.
     - Bars: static inline width/height carries the value; the shared
       bar-fill (scaleX 0 -> 1) or the from-only ut-rise-y only sweeps it in.
       Never scaleX(var()) + bar-fill.
     - No text-transform: uppercase (lang="tr": i -> dotted I). Sentence case.
     - Every text colour that carries meaning is a light/dark token pair;
       green text is #166534 / #4ade80.
     - No backdrop-filter on anything that holds a canvas (Signature v4 rule).
   Breakpoints: 375 / 640 / 768 / 1024 / 1440 / 1800 / 2400 (3440 UW).
   ========================================================================== */

:root {
  --ut-max: 1180px;          /* page frame; re-set per page on body (see "Frame") */
  --ut-pad: 1.5rem;          /* side gutter */
  --ut-gap: 1rem;
  --ut-up: #166534;          /* 7.1:1 on #fff */
  --ut-down: #b91c1c;        /* 6.5:1 on #fff */
  --ut-live: #16a34a;        /* dot / bar fill only, never text */
  --ut-warn: #92400e;        /* 7.1:1 on #fff */
  --ut-warn-line: #f59e0b;   /* fill only */
  --ut-star: #c2410c;        /* 5.2:1 on #fff */
  --ut-code-bg: #0e1424;     /* code panels are dark in both themes */
  --ut-code-fg: #dfe6f6;     /* 14.6:1 on --ut-code-bg */
  --ut-code-mute: #93a0b8;   /* 6.9:1 */
  --ut-code-key: #93c5fd;    /* 9.9:1 */
  --ut-code-str: #4ade80;    /* 9.6:1 */
  --ut-code-num: #fcd34d;    /* 12.4:1 */
  --ut-code-lit: #c4b5fd;    /* 9.1:1 */
  --ut-code-line: rgb(255 255 255 / 0.08);
}
:root.dark {
  --ut-up: #4ade80;
  --ut-down: #ff6568;
  --ut-live: #22c55e;
  --ut-warn: #fbbf24;
  --ut-star: #fbbf24;
  --ut-code-bg: #0b1020;
}

@keyframes ut-rise-y { from { opacity: 0; transform: scaleY(0); } }
@keyframes ut-flip   { from { opacity: 0; transform: translateY(-4px); } }
@keyframes ut-sweep  { from { transform: rotate(-90deg); opacity: 0; } 30% { opacity: 1; } to { transform: rotate(270deg); opacity: 0; } }
@keyframes ut-leave  { to { opacity: 0; transform: scale(0.96); } }

.ut-page [hidden], .ut-toast[hidden] { display: none !important; }
.ut-sr {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

.ut-page {
  width: 100%; max-width: var(--ut-max); margin: 0 auto;
  padding: 0 var(--ut-pad) 3.5rem;
}

/* --------------------------------------------------------------------------
   Frame. Widths live on <body> (via :has) rather than on .ut-page so Shell
   v5's header/footer can line up with the page: it reads --sh-max/--sh-pad
   from body, exactly the opt-in its block documents. Data pages (favorites,
   status) widen on big screens; the alerts FORM never does.
   -------------------------------------------------------------------------- */
body:has(.ut-page) { --sh-max: var(--ut-max); --sh-pad: var(--ut-pad); }
@media (max-width: 767px) {
  :root { --ut-pad: 1rem; }
}
@media (min-width: 1440px) {
  :root { --ut-max: 1400px; --ut-pad: 2rem; }
  body:has(.ut-page.is-wide) { --ut-max: 1560px; }
}
@media (min-width: 1800px) {
  body:has(.ut-page.is-wide), body:has(.ut-page.is-docs) { --ut-max: 1760px; }
}
@media (min-width: 2400px) {
  :root { --ut-pad: 2.5rem; }
  body:has(.ut-page.is-wide) { --ut-max: 2560px; }
  body:has(.ut-page.is-docs), body:has(.ut-page.is-status) { --ut-max: 2200px; }
  body:has(.ut-page.is-alerts) { --ut-max: 2000px; }
}
.ut-page > * { min-width: 0; }

/* Shared material - same surface as .sv-card / .hm-card / .mcv-surface. */
.ut-surface {
  border-radius: var(--radius);
  background-color: var(--card);
  background-image: var(--nz-card-wash);
  box-shadow: inset 0 1px 0 0 var(--nz-hairline), 0 0 0 1px var(--border), var(--nz-elev-1);
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.ut-hero {
  position: relative; isolation: isolate;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; align-items: center;
  padding: 2.25rem 0 1.5rem;
}
/* Static atmosphere - bloom + faint telemetry grid, no loop. */
.ut-hero::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  inset: -1.5rem -12% 0;
  background:
    radial-gradient(42% 70% at 12% 10%, var(--nz-mesh-1), transparent 70%),
    radial-gradient(34% 60% at 88% 0%, var(--nz-mesh-2), transparent 70%),
    linear-gradient(var(--nz-grid-line) 1px, transparent 1px) 0 0 / 44px 44px,
    linear-gradient(90deg, var(--nz-grid-line) 1px, transparent 1px) 0 0 / 44px 44px;
  -webkit-mask-image: radial-gradient(70% 90% at 30% 0%, #000 25%, transparent 78%);
          mask-image: radial-gradient(70% 90% at 30% 0%, #000 25%, transparent 78%);
  opacity: 0.55;
}
.ut-hero-copy { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.ut-hero-copy > * { animation: rise-in 0.5s var(--ease-out) backwards; }
.ut-hero-copy > :nth-child(2) { animation-delay: 0.05s; }
.ut-hero-copy > :nth-child(3) { animation-delay: 0.1s; }
.ut-hero-copy > :nth-child(4) { animation-delay: 0.15s; }
.ut-hero-copy > :nth-child(5) { animation-delay: 0.2s; }
.ut-hero h1 {
  margin: 0.85rem 0 0.55rem;
  font-size: clamp(1.9rem, 1.35rem + 1.9vw, 2.9rem); font-weight: 800;
  line-height: 1.08; letter-spacing: -0.035em; text-wrap: balance;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  /* background-image, never the shorthand (it resets background-clip). */
  .ut-h1-accent {
    background-image: linear-gradient(120deg, var(--chart-3), var(--nz-accent-2) 55%, var(--nz-accent-3));
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  }
}
.ut-lead { margin: 0; max-width: 42rem; font-size: 0.98rem; line-height: 1.6; color: var(--muted-foreground); text-wrap: pretty; }
.ut-lead strong { color: var(--foreground); font-weight: 650; }
.ut-lead code, .ut-help code, .ut-note code {
  font: 600 0.84em/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  padding: 0.12rem 0.32rem; border-radius: 5px; background: var(--accent); color: var(--foreground);
}

/* Live pill + the page's ONE loop. */
.ut-live {
  display: inline-flex; align-items: center; gap: 0.45rem; max-width: 100%;
  padding: 0.28rem 0.7rem; border-radius: 999px;
  font-size: 0.74rem; font-weight: 600; font-variant-numeric: tabular-nums;
  color: var(--foreground);
  background: color-mix(in srgb, var(--card) 62%, transparent);
  box-shadow: inset 0 1px 0 0 var(--nz-hairline), 0 0 0 1px color-mix(in srgb, var(--chart-1) 22%, var(--border));
}
.ut-live-sep { opacity: 0.5; }
.ut-live .ut-mute { color: var(--muted-foreground); font-weight: 500; }
.ut-dot {
  position: relative; flex-shrink: 0; width: 8px; height: 8px; border-radius: 999px;
  background: var(--ut-live);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ut-live) 22%, transparent);
}
.ut-dot::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: var(--ut-live);
  animation: pulse-ring 2.4s var(--ease-out) infinite;
}
.ut-live.is-stale .ut-dot, .ut-live.is-idle .ut-dot { background: var(--muted-foreground); box-shadow: 0 0 0 3px color-mix(in srgb, var(--muted-foreground) 20%, transparent); }
.ut-live.is-warn .ut-dot { background: var(--ut-warn-line); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ut-warn-line) 24%, transparent); }
.ut-live.is-down .ut-dot { background: var(--ut-down); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ut-down) 22%, transparent); }
.ut-live.is-stale .ut-dot::after, .ut-live.is-idle .ut-dot::after { animation: none; opacity: 0; }
.ut-live.is-warn .ut-dot::after { background: var(--ut-warn-line); }
.ut-live.is-down .ut-dot::after { background: var(--ut-down); }
/* Static pill (docs / 404) - same shape, no dot, no loop. */
.ut-pill {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.28rem 0.7rem; border-radius: 999px;
  font-size: 0.74rem; font-weight: 600; color: var(--muted-foreground);
  background: color-mix(in srgb, var(--card) 62%, transparent);
  box-shadow: inset 0 1px 0 0 var(--nz-hairline), 0 0 0 1px var(--border);
}
.ut-pill svg { color: var(--nz-accent-text); }

/* --------------------------------------------------------------------------
   KPI tiles
   -------------------------------------------------------------------------- */
.ut-kpis {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; margin: 0;
}
.ut-kpi {
  position: relative; min-width: 0; margin: 0; padding: 0.85rem 0.95rem 0.8rem;
  animation: stat-rise 0.5s var(--ease-out) backwards;
  animation-delay: calc(0.08s + var(--i, 0) * 0.05s);
}
.ut-kpi dt { font-size: 0.72rem; font-weight: 600; color: var(--muted-foreground); display: flex; align-items: center; gap: 0.35rem; }
.ut-kpi dt svg { color: var(--nz-accent-text); }
.ut-kpi dd {
  margin: 0.3rem 0 0; font-size: 1.45rem; font-weight: 760; line-height: 1.1;
  letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ut-kpi dd.is-text { font-size: 0.98rem; font-weight: 650; letter-spacing: -0.01em; line-height: 1.35; padding-top: 0.2rem; }
.ut-kpi small { display: block; margin-top: 0.2rem; font-size: 0.7rem; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.ut-kpi.is-lead::before {
  content: ""; position: absolute; top: 0; left: 0.95rem; right: 0.95rem; height: 2px;
  border-radius: 0 0 2px 2px; pointer-events: none; opacity: 0.9;
  background: linear-gradient(90deg, var(--chart-1), var(--nz-accent-2) 50%, var(--nz-accent-3));
}
.ut-kpi.is-lead dd { color: var(--nz-accent-text); }
.ut-flip { animation: ut-flip 0.32s var(--ease-out) backwards; }

/* --------------------------------------------------------------------------
   Chips, section heads, buttons, inputs
   -------------------------------------------------------------------------- */
.ut-chip {
  display: inline-flex; align-items: center; gap: 0.25rem; white-space: nowrap;
  padding: 0.14rem 0.5rem; border-radius: 999px;
  font-size: 0.7rem; font-weight: 650; font-variant-numeric: tabular-nums;
  color: var(--muted-foreground); background: var(--accent);
}
.ut-chip.ok   { color: var(--ut-up);   background: color-mix(in srgb, var(--ut-up) 14%, transparent); }
.ut-chip.down { color: var(--ut-down); background: color-mix(in srgb, var(--ut-down) 12%, transparent); }
.ut-chip.warn { color: var(--ut-warn); background: color-mix(in srgb, var(--ut-warn-line) 16%, transparent); }
.ut-chip.info { color: var(--nz-accent-text); background: color-mix(in srgb, var(--chart-1) 12%, transparent); }
.ut-chip.idle { color: var(--muted-foreground); background: var(--accent); }
.ut-chip.ok::before, .ut-chip.down::before, .ut-chip.warn::before, .ut-chip.idle::before {
  content: ""; width: 6px; height: 6px; border-radius: 999px; background: currentColor; flex-shrink: 0;
}

.ut-sec { margin-top: 2.25rem; }
.ut-sec-head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem 1rem; margin-bottom: 0.9rem; }
.ut-sec-head h2 { margin: 0; font-size: 1.2rem; font-weight: 750; letter-spacing: -0.02em; display: flex; align-items: center; gap: 0.5rem; }
.ut-sec-head h2 svg { color: var(--nz-accent-text); }
.ut-sec-head p { margin: 0.25rem 0 0; font-size: 0.84rem; color: var(--muted-foreground); max-width: 44rem; line-height: 1.5; }
.ut-sec-acts { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.ut-sec-acts .btn { border-radius: 999px; }

.ut-btn-ghost {
  display: inline-flex; align-items: center; gap: 0.35rem; min-height: 2rem;
  padding: 0.3rem 0.7rem; border-radius: 999px; border: 0; cursor: pointer;
  font: inherit; font-size: 0.78rem; font-weight: 600; color: var(--muted-foreground);
  background: transparent;
  transition: color var(--dur-1) ease, background-color var(--dur-1) ease, transform var(--dur-1) var(--ease-out);
}
.ut-btn-ghost:hover { color: var(--foreground); background: var(--accent); }
.ut-btn-ghost:active { transform: scale(0.96); }
.ut-btn-ghost.is-danger:hover { color: var(--ut-down); background: color-mix(in srgb, var(--ut-down) 10%, transparent); }
.ut-btn-ghost.is-armed { color: #fff; background: var(--ut-down); }
.ut-btn-ghost[disabled] { opacity: 0.5; cursor: not-allowed; }

.ut-label { display: block; margin: 0 0 0.35rem; font-size: 0.76rem; font-weight: 650; color: var(--foreground); }
.ut-label small { font-weight: 500; color: var(--muted-foreground); margin-left: 0.25rem; }
.ut-input, .ut-select, .ut-textarea {
  width: 100%; min-height: 2.6rem; padding: 0.55rem 0.8rem; border-radius: calc(var(--radius) - 6px);
  border: 1px solid var(--border); background: var(--background); color: var(--foreground);
  font: inherit; font-size: 0.9rem;
  transition: border-color var(--dur-1) ease, background-color var(--dur-1) ease;
}
.ut-textarea { min-height: 6rem; resize: vertical; font: 500 0.8rem/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; }
.ut-input::placeholder, .ut-textarea::placeholder { color: var(--muted-foreground); }
.ut-input:focus-visible, .ut-select:focus-visible, .ut-textarea:focus-visible {
  outline: 2px solid var(--chart-1); outline-offset: 1px; border-color: color-mix(in srgb, var(--chart-1) 60%, var(--border));
}
.ut-input.is-valid { border-color: color-mix(in srgb, var(--ut-live) 70%, var(--border)); }
.ut-input.is-invalid { border-color: color-mix(in srgb, var(--ut-down) 70%, var(--border)); }
.ut-help { margin: 0.35rem 0 0; font-size: 0.74rem; line-height: 1.5; color: var(--muted-foreground); }
.ut-help.is-ok { color: var(--ut-up); }
.ut-help.is-err { color: var(--ut-down); }
.ut-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.92em; }

/* Segmented control: real radios, the label is the hit area. */
.ut-seg {
  display: inline-flex; flex-wrap: wrap; gap: 0.2rem; margin: 0; padding: 0.22rem; border: 0;
  border-radius: 999px; background: var(--muted);
}
.ut-seg legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.ut-seg label { position: relative; }
.ut-seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.ut-seg span {
  display: inline-flex; align-items: center; gap: 0.35rem; min-height: 2rem;
  padding: 0.3rem 0.85rem; border-radius: 999px;
  font-size: 0.8rem; font-weight: 600; color: var(--muted-foreground); white-space: nowrap;
  transition: color var(--dur-1) ease, background-color var(--dur-1) ease;
}
.ut-seg label:hover span { color: var(--foreground); }
.ut-seg input:checked + span {
  color: var(--foreground); background: var(--card);
  box-shadow: inset 0 1px 0 0 var(--nz-hairline), 0 0 0 1px var(--border), 0 2px 6px -2px rgb(0 0 0 / 0.25);
}
.ut-seg input:focus-visible + span { outline: 2px solid var(--chart-1); outline-offset: 1px; }
.ut-seg input:disabled + span { opacity: 0.45; cursor: not-allowed; }

/* Copy button */
.ut-copy {
  display: inline-flex; align-items: center; gap: 0.3rem; flex-shrink: 0;
  min-height: 1.9rem; padding: 0.25rem 0.6rem; border-radius: 7px; cursor: pointer;
  border: 1px solid var(--border); background: var(--card); color: var(--muted-foreground);
  font: inherit; font-size: 0.72rem; font-weight: 600;
  transition: color var(--dur-1) ease, border-color var(--dur-1) ease, transform var(--dur-1) var(--ease-out);
}
.ut-copy:hover { color: var(--foreground); border-color: color-mix(in srgb, var(--chart-1) 40%, var(--border)); }
.ut-copy:active { transform: scale(0.95); }
.ut-copy.is-done { color: var(--ut-up); border-color: color-mix(in srgb, var(--ut-up) 45%, var(--border)); }

/* Toast (undo / confirmations). One node per page, aria-live. */
.ut-toast {
  position: fixed; z-index: 40; left: 50%; bottom: 1.25rem;
  display: flex; align-items: center; gap: 0.75rem; max-width: min(34rem, calc(100vw - 2rem));
  padding: 0.6rem 0.6rem 0.6rem 1rem; border-radius: 999px;
  font-size: 0.84rem; color: var(--foreground);
  background: color-mix(in srgb, var(--card) 94%, transparent);
  -webkit-backdrop-filter: blur(12px) saturate(150%); backdrop-filter: blur(12px) saturate(150%);
  box-shadow: inset 0 1px 0 0 var(--nz-hairline), 0 0 0 1px var(--border), var(--nz-elev-3);
  transform: translateX(-50%);
  animation: pop-in 0.22s var(--ease-out) backwards;
}
.ut-toast-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ut-toast .btn { border-radius: 999px; flex-shrink: 0; }

/* Empty state */
.ut-empty {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.75rem;
  padding: 3rem 1.5rem; color: var(--muted-foreground);
  animation: rise-in 0.45s var(--ease-out) 0.1s backwards;
}
.ut-empty h2 { margin: 0.25rem 0 0; font-size: 1.25rem; font-weight: 750; color: var(--foreground); letter-spacing: -0.02em; }
.ut-empty p { margin: 0; max-width: 34rem; line-height: 1.6; font-size: 0.9rem; }
.ut-empty-art { width: 7rem; height: 7rem; color: var(--nz-accent-text); }
.ut-empty-art .is-star { transform-origin: 50% 50%; animation: stat-rise 0.6s var(--ease-out) 0.25s backwards; }
.ut-empty-acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin-top: 0.5rem; }
.ut-empty-acts .btn { border-radius: 999px; }

/* Banner (import / notices) */
.ut-banner {
  display: flex; align-items: center; flex-wrap: wrap; gap: 0.75rem 1rem;
  margin: 0 0 1rem; padding: 0.9rem 1rem;
  box-shadow: inset 0 1px 0 0 var(--nz-hairline), 0 0 0 1px color-mix(in srgb, var(--chart-1) 35%, var(--border)), var(--nz-elev-1);
  animation: rise-in-sm 0.3s var(--ease-out) backwards;
}
.ut-banner-ico { display: inline-flex; width: 2.2rem; height: 2.2rem; align-items: center; justify-content: center; border-radius: 10px; color: var(--nz-accent-text); background: color-mix(in srgb, var(--chart-1) 12%, transparent); flex-shrink: 0; }
.ut-banner-body { flex: 1 1 16rem; min-width: 0; font-size: 0.86rem; line-height: 1.5; }
.ut-banner-body b { font-weight: 700; }
.ut-banner-names { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.35rem; }
.ut-banner-names span { max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ut-banner-acts { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.ut-banner-acts .btn { border-radius: 999px; }

/* ==========================================================================
   /favoriler
   ========================================================================== */
.ut-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem;
  margin: 0 0 0.9rem; padding: 0.5rem;
  animation: rise-in-sm 0.35s var(--ease-out) 0.1s backwards;
}
.ut-search { position: relative; flex: 1 1 14rem; min-width: 0; display: flex; align-items: center; }
.ut-search svg { position: absolute; left: 0.75rem; color: var(--muted-foreground); pointer-events: none; }
.ut-search .ut-input { padding-left: 2.2rem; border-radius: 999px; min-height: 2.4rem; background: color-mix(in srgb, var(--background) 60%, transparent); }
.ut-tool-select { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.76rem; color: var(--muted-foreground); }
.ut-tool-select .ut-select { width: auto; min-height: 2.4rem; border-radius: 999px; padding: 0.35rem 0.9rem; font-size: 0.82rem; }

.ut-res { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 0.3rem 1rem; margin: 0 0 0.75rem; font-size: 0.82rem; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.ut-res b { color: var(--foreground); font-weight: 700; }

.ut-fav-grid {
  --ut-cols: 1;
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(var(--ut-cols), minmax(0, 1fr)); gap: var(--ut-gap);
}
.ut-fav-item {
  min-width: 0; display: flex;
  animation: rise-in-sm 0.34s var(--ease-out) backwards;
  animation-delay: calc(0.1s + min(var(--i, 0), 12) * 0.035s);
}
/* After the first paint, re-renders (refresh, sort, filter) never replay. */
.ut-fav-grid.is-settled > .ut-fav-item { animation: none; }
.ut-fav-item.is-leaving { animation: ut-leave 0.2s var(--ease-out) forwards; pointer-events: none; }

.ut-fav {
  position: relative; isolation: isolate; flex: 1; min-width: 0;
  display: grid; grid-template-columns: 3rem minmax(0, 1fr) auto; gap: 0.7rem 0.8rem;
  grid-template-areas:
    "ico  id   act"
    "now  now  now"
    "bar  bar  bar"
    "week week week"
    "foot foot foot";
  padding: 1rem 1rem 0.9rem;
  transition: transform var(--dur-2) var(--ease-out), opacity var(--dur-2) ease;
}
.ut-fav::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background:
    radial-gradient(70% 55% at 10% 0%, color-mix(in srgb, var(--chart-1) 11%, transparent), transparent 70%),
    radial-gradient(60% 50% at 100% 100%, color-mix(in srgb, var(--nz-accent-2) 9%, transparent), transparent 70%);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--chart-1) 45%, var(--border)), var(--nz-elev-3), 0 20px 44px -26px var(--nz-glow);
  opacity: 0; transition: opacity var(--dur-2) ease;
}
.ut-fav:hover { transform: translateY(-3px); }
.ut-fav:hover::before, .ut-fav:focus-within::before { opacity: 1; }
.ut-fav:active { transform: translateY(-1px) scale(0.995); }
.ut-fav.is-off { opacity: 0.62; }
.ut-fav.is-off:hover, .ut-fav.is-off:focus-within { opacity: 1; }

.ut-fav-ico { grid-area: ico; width: 3rem; height: 3rem; align-self: center; }
.ut-fav-ico img, .ut-fav-ico-fb {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; border-radius: 12px; object-fit: cover;
  background: var(--muted); box-shadow: 0 0 0 1px var(--border);
  font-size: 1.1rem; font-weight: 800; color: #fff;
  transition: transform var(--dur-3) var(--ease-out);
}
.ut-fav-ico-fb {
  background:
    radial-gradient(60% 60% at 30% 25%, color-mix(in srgb, var(--nz-accent-3) 35%, transparent), transparent 70%),
    linear-gradient(135deg, color-mix(in srgb, var(--chart-1) 70%, var(--muted)), color-mix(in srgb, var(--nz-accent-2) 55%, var(--muted)));
}
.ut-fav:hover .ut-fav-ico img, .ut-fav:hover .ut-fav-ico-fb { transform: scale(1.06); }

.ut-fav-id { grid-area: id; min-width: 0; align-self: center; }
.ut-fav-name {
  margin: 0; font-size: 0.95rem; font-weight: 650; line-height: 1.3; letter-spacing: -0.01em;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
  overflow: hidden; overflow-wrap: anywhere;
  transition: color var(--dur-1) ease;
}
.ut-fav:hover .ut-fav-name { color: var(--nz-accent-text); }
/* Stretched link: the card opens /view/:id; buttons/links above it (z 2). */
.ut-fav-link { color: inherit; text-decoration: none; }
.ut-fav-link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.ut-fav-link:focus-visible { outline: none; }
.ut-fav-link:focus-visible::after { outline: 2px solid var(--chart-1); outline-offset: 3px; }
.ut-fav-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 0.2rem 0.45rem; margin: 0.3rem 0 0; font-size: 0.74rem; color: var(--muted-foreground); }
.ut-fav-meta img { width: 14px; height: 14px; border-radius: 2px; }
.ut-fav-meta .ut-sep::before { content: "\00B7"; opacity: 0.6; }

.ut-fav-act { grid-area: act; position: relative; z-index: 2; align-self: start; margin: -0.25rem -0.3rem 0 0; }
.ut-star {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.1rem; height: 2.1rem; border: 0; border-radius: 999px; cursor: pointer;
  color: var(--ut-star); background: transparent;
  transition: background-color var(--dur-1) ease, transform var(--dur-1) var(--ease-out);
}
.ut-star svg { fill: currentColor; }
.ut-star:hover { background: color-mix(in srgb, var(--ut-star) 12%, transparent); transform: scale(1.08); }
.ut-star:active { transform: scale(0.9); }

.ut-fav-now { grid-area: now; display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.2rem 0.5rem; }
.ut-fav-now b { font-size: 1.6rem; font-weight: 780; letter-spacing: -0.035em; line-height: 1; font-variant-numeric: tabular-nums; }
.ut-fav-now span { font-size: 0.78rem; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.ut-fav-now .ut-chip { margin-left: auto; }

.ut-bar { grid-area: bar; height: 6px; border-radius: 999px; overflow: hidden; background: var(--muted); }
.ut-bar > span {
  display: block; height: 100%; border-radius: inherit; transform-origin: left center;
  background: linear-gradient(90deg, var(--chart-1), var(--chart-3));
  animation: bar-fill 0.7s var(--ease-out) 0.3s backwards;
}
.ut-bar > span.is-full { background: linear-gradient(90deg, var(--ut-warn-line), #f97316); }
.ut-fav-grid.is-settled .ut-bar > span { animation: none; }

.ut-week { grid-area: week; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; align-items: end; min-height: 3.6rem; }
.ut-week-col { display: flex; flex-direction: column; align-items: stretch; gap: 3px; min-width: 0; }
.ut-week-slot { position: relative; height: 2.5rem; display: flex; align-items: flex-end; }
.ut-week-slot > i {
  display: block; width: 100%; min-height: 2px; border-radius: 3px 3px 1px 1px;
  background: color-mix(in srgb, var(--chart-3) 55%, transparent);
  transform-origin: bottom center;
  animation: ut-rise-y 0.5s var(--ease-out) backwards;
  animation-delay: calc(0.3s + var(--d, 0) * 0.04s);
}
.ut-week-col.is-today .ut-week-slot > i { background: linear-gradient(180deg, var(--chart-1), var(--chart-3)); }
.ut-week-col.is-gap .ut-week-slot > i { background: var(--muted); }
.ut-week-col small { text-align: center; font-size: 0.62rem; color: var(--muted-foreground); line-height: 1; }
.ut-fav-grid.is-settled .ut-week-slot > i { animation: none; }

.ut-fav-foot { grid-area: foot; position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.4rem 0.75rem; font-size: 0.72rem; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.ut-fav-foot b { color: var(--foreground); font-weight: 650; }
.ut-fav-foot a {
  display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.2rem 0.55rem; border-radius: 999px;
  color: var(--nz-accent-text); font-weight: 600;
  background: color-mix(in srgb, var(--chart-1) 9%, transparent);
  transition: background-color var(--dur-1) ease;
}
.ut-fav-foot a:hover { background: color-mix(in srgb, var(--chart-1) 16%, transparent); }

/* Skeleton - static on purpose (a shimmer would be a second infinite loop). */
.ut-skel { min-height: 13.5rem; opacity: 0.7; }
.ut-skel::after {
  content: ""; display: block; margin: 1rem; height: 3rem; width: 60%;
  border-radius: 10px; background: var(--muted);
}

.ut-missing {
  display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem 1rem; margin-top: 1rem;
  padding: 0.7rem 0.9rem; border-radius: calc(var(--radius) - 4px);
  font-size: 0.8rem; color: var(--muted-foreground);
  border: 1px dashed var(--border);
}

/* ==========================================================================
   /uyarilar
   ========================================================================== */
.ut-al-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.ut-al-form { padding: 1.25rem; display: grid; gap: 1.15rem; animation: rise-in 0.45s var(--ease-out) 0.12s backwards; }
.ut-al-step { display: grid; gap: 0.55rem; min-width: 0; margin: 0; padding: 0; border: 0; }
.ut-al-step > legend, .ut-al-step-title {
  display: flex; align-items: center; gap: 0.55rem; padding: 0; margin: 0 0 0.1rem;
  font-size: 0.86rem; font-weight: 700; color: var(--foreground);
}
.ut-al-num {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 1.45rem; height: 1.45rem; border-radius: 999px;
  font-size: 0.72rem; font-weight: 800; color: #fff;
  background-image: linear-gradient(135deg, var(--chart-1), var(--nz-btn-2));
}
.ut-al-row { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }

/* Server picker (combobox) */
.ut-pick { position: relative; }
.ut-pick-list {
  position: absolute; z-index: 15; top: calc(100% + 0.35rem); left: 0; right: 0;
  margin: 0; padding: 0.3rem; list-style: none;
  max-height: min(20rem, 55vh); overflow-y: auto; overscroll-behavior: contain;
  border-radius: calc(var(--radius) - 4px);
  background: color-mix(in srgb, var(--card) 96%, transparent);
  -webkit-backdrop-filter: blur(12px) saturate(150%); backdrop-filter: blur(12px) saturate(150%);
  box-shadow: inset 0 1px 0 0 var(--nz-hairline), 0 0 0 1px var(--border), var(--nz-elev-3);
  animation: pop-in 0.18s var(--ease-out) backwards;
}
.ut-pick-opt {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0.6rem;
  padding: 0.5rem 0.6rem; border-radius: 8px; cursor: pointer; font-size: 0.85rem;
  transition: background-color var(--dur-1) ease;
}
.ut-pick-opt[aria-selected="true"], .ut-pick-opt:hover { background: var(--accent); box-shadow: inset 2px 0 0 var(--chart-1); }
.ut-pick-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 550; }
.ut-pick-meta { font-size: 0.72rem; color: var(--muted-foreground); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ut-pick-hint { padding: 0.55rem 0.6rem; font-size: 0.78rem; color: var(--muted-foreground); }

.ut-picked {
  display: flex; align-items: center; gap: 0.75rem; padding: 0.65rem 0.75rem;
  border-radius: calc(var(--radius) - 4px);
  background: color-mix(in srgb, var(--chart-1) 6%, var(--card));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--chart-1) 30%, var(--border));
  animation: rise-in-sm 0.25s var(--ease-out) backwards;
}
.ut-picked-body { flex: 1; min-width: 0; }
.ut-picked-name { display: block; font-weight: 650; font-size: 0.9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ut-picked-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.5rem; margin-top: 0.2rem; font-size: 0.74rem; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }

/* Condition cards: radios as tiles */
.ut-cond { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.5rem; }
.ut-cond label { position: relative; display: block; cursor: pointer; }
.ut-cond input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.ut-cond-card {
  display: flex; align-items: flex-start; gap: 0.65rem; height: 100%;
  padding: 0.7rem 0.8rem; border-radius: calc(var(--radius) - 4px);
  border: 1px solid var(--border); background: var(--background);
  transition: border-color var(--dur-1) ease, background-color var(--dur-1) ease;
}
.ut-cond-card svg { flex-shrink: 0; margin-top: 0.1rem; color: var(--muted-foreground); transition: color var(--dur-1) ease; }
.ut-cond-card b { display: block; font-size: 0.84rem; font-weight: 650; }
.ut-cond-card small { display: block; margin-top: 0.15rem; font-size: 0.72rem; color: var(--muted-foreground); line-height: 1.4; }
.ut-cond label:hover .ut-cond-card { border-color: color-mix(in srgb, var(--chart-1) 35%, var(--border)); }
.ut-cond input:checked + .ut-cond-card { border-color: color-mix(in srgb, var(--chart-1) 70%, var(--border)); background: color-mix(in srgb, var(--chart-1) 7%, var(--background)); }
.ut-cond input:checked + .ut-cond-card svg { color: var(--nz-accent-text); }
.ut-cond input:focus-visible + .ut-cond-card { outline: 2px solid var(--chart-1); outline-offset: 2px; }
.ut-cond input:disabled + .ut-cond-card { opacity: 0.45; cursor: not-allowed; }

.ut-thr { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem 0.75rem; animation: rise-in-sm 0.25s var(--ease-out) backwards; }
.ut-thr .ut-input { width: 8rem; font-variant-numeric: tabular-nums; }

.ut-al-submit { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem 0.9rem; padding-top: 0.25rem; border-top: 1px solid var(--border); }
.ut-al-submit .btn { border-radius: 999px; min-height: 2.6rem; padding-inline: 1.3rem; }
.ut-al-submit .btn[disabled] { opacity: 0.6; cursor: progress; }
.ut-form-msg { font-size: 0.82rem; }
.ut-form-msg.is-err { color: var(--ut-down); }
.ut-form-msg.is-ok { color: var(--ut-up); }

.ut-details { border-radius: calc(var(--radius) - 6px); background: var(--muted); }
.ut-details summary { cursor: pointer; padding: 0.55rem 0.75rem; font-size: 0.78rem; font-weight: 600; color: var(--muted-foreground); list-style: none; display: flex; align-items: center; gap: 0.4rem; }
.ut-details summary::-webkit-details-marker { display: none; }
.ut-details summary::before { content: "\203A"; display: inline-block; transition: transform var(--dur-1) ease; }
.ut-details[open] summary::before { transform: rotate(90deg); }
.ut-details ol, .ut-details > div { margin: 0; padding: 0 0.9rem 0.8rem 2rem; font-size: 0.78rem; line-height: 1.7; color: var(--muted-foreground); }
.ut-details > div { padding-left: 0.9rem; }

/* Side column: preview + how it works */
.ut-al-side { display: grid; gap: 1rem; min-width: 0; animation: rise-in 0.45s var(--ease-out) 0.2s backwards; }
.ut-preview { padding: 1rem; }
.ut-preview-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.75rem; font-size: 0.74rem; font-weight: 650; color: var(--muted-foreground); }
.ut-discord {
  display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); gap: 0.2rem 0.75rem;
  padding: 0.75rem 0.85rem; border-radius: 10px;
  /* Discord's own dark chat surface, in both themes - it IS a preview of Discord. */
  background: #313338; color: #dbdee1;
  font-family: "gg sans", "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.ut-discord + .ut-discord { margin-top: 0.5rem; }
.ut-discord-av { grid-row: span 2; width: 2.4rem; height: 2.4rem; border-radius: 999px; background: #5865f2; display: flex; align-items: center; justify-content: center; color: #fff; }
.ut-discord-who { font-size: 0.84rem; font-weight: 600; color: #f2f3f5; }
.ut-discord-who small { margin-left: 0.35rem; padding: 0 0.3rem; border-radius: 3px; font-size: 0.62rem; font-weight: 600; background: #5865f2; color: #fff; vertical-align: 1px; }
.ut-discord-who time { margin-left: 0.35rem; font-size: 0.68rem; font-weight: 500; color: #949ba4; }
.ut-discord-msg { font-size: 0.86rem; line-height: 1.45; overflow-wrap: anywhere; }
.ut-discord-msg strong { color: #f2f3f5; }
.ut-discord-msg a { color: #00a8fc; }
.ut-notif {
  display: grid; grid-template-columns: 2.2rem minmax(0, 1fr); gap: 0.15rem 0.7rem; align-items: center;
  padding: 0.75rem 0.85rem; border-radius: 12px;
  background: color-mix(in srgb, var(--card) 92%, var(--foreground) 4%);
  box-shadow: 0 0 0 1px var(--border), var(--nz-elev-2);
}
.ut-notif img { grid-row: span 2; width: 2.2rem; height: 2.2rem; }
.ut-notif b { font-size: 0.84rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ut-notif span { font-size: 0.78rem; color: var(--muted-foreground); }
.ut-notif small { grid-column: 2; font-size: 0.68rem; color: var(--muted-foreground); }

.ut-how { padding: 1rem 1.1rem; }
.ut-how h3 { margin: 0 0 0.6rem; font-size: 0.86rem; font-weight: 700; display: flex; align-items: center; gap: 0.4rem; }
.ut-how h3 svg { color: var(--nz-accent-text); }
.ut-how ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; counter-reset: ut-how; }
.ut-how li { position: relative; padding-left: 1.9rem; font-size: 0.8rem; line-height: 1.5; color: var(--muted-foreground); counter-increment: ut-how; }
.ut-how li b { color: var(--foreground); font-weight: 650; }
.ut-how li::before {
  content: counter(ut-how); position: absolute; left: 0; top: 0.05rem;
  width: 1.3rem; height: 1.3rem; border-radius: 999px; display: flex; align-items: center; justify-content: center;
  font-size: 0.66rem; font-weight: 800; color: var(--nz-accent-text);
  background: color-mix(in srgb, var(--chart-1) 12%, transparent);
}

/* Watch list (Discord + push) */
.ut-watch-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.6rem; }
.ut-watch-list > li { min-width: 0; display: flex; animation: rise-in-sm 0.3s var(--ease-out) backwards; animation-delay: calc(0.05s + min(var(--i, 0), 10) * 0.03s); }
.ut-watch-list.is-settled > li { animation: none; }
.ut-watch {
  position: relative; flex: 1; min-width: 0;
  display: grid; grid-template-columns: 2.4rem minmax(0, 1fr) auto; align-items: center; gap: 0.3rem 0.85rem;
  padding: 0.8rem 0.9rem;
}
.ut-watch.is-new { box-shadow: inset 0 1px 0 0 var(--nz-hairline), 0 0 0 1px color-mix(in srgb, var(--chart-1) 60%, var(--border)), var(--nz-elev-2); }
.ut-watch-ico {
  display: flex; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem; border-radius: 11px;
  color: var(--muted-foreground); background: var(--muted);
}
.ut-watch.is-alert .ut-watch-ico { color: var(--ut-down); background: color-mix(in srgb, var(--ut-down) 12%, transparent); }
.ut-watch.is-ok .ut-watch-ico { color: var(--ut-up); background: color-mix(in srgb, var(--ut-up) 12%, transparent); }
.ut-watch-main { min-width: 0; }
.ut-watch-name { margin: 0; font-size: 0.92rem; font-weight: 650; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ut-watch-name a { color: inherit; }
.ut-watch-name a:hover { color: var(--nz-accent-text); }
.ut-watch-cond { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0.3rem 0 0; }
.ut-watch-meta { display: flex; flex-wrap: wrap; gap: 0.15rem 0.8rem; margin: 0.35rem 0 0; font-size: 0.72rem; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.ut-watch-side { display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; justify-content: flex-end; }

.ut-perm { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem 0.9rem; margin: 0 0 0.8rem; padding: 0.7rem 0.9rem; font-size: 0.82rem; }
.ut-perm p { margin: 0; flex: 1 1 18rem; color: var(--muted-foreground); line-height: 1.5; }

/* ==========================================================================
   /durum
   ========================================================================== */
.ut-st-banner {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.25rem 1rem; align-items: center;
  padding: 1.15rem 1.25rem;
  animation: stat-rise 0.5s var(--ease-out) 0.08s backwards;
}
.ut-st-banner::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 120% at 0% 50%, color-mix(in srgb, var(--ut-live) 16%, transparent), transparent 70%);
}
.ut-st-banner.is-warn::before { background: radial-gradient(60% 120% at 0% 50%, color-mix(in srgb, var(--ut-warn-line) 18%, transparent), transparent 70%); }
.ut-st-banner.is-down::before { background: radial-gradient(60% 120% at 0% 50%, color-mix(in srgb, var(--ut-down) 18%, transparent), transparent 70%); }
.ut-st-mark {
  grid-row: span 2; display: flex; align-items: center; justify-content: center;
  width: 3rem; height: 3rem; border-radius: 14px; color: #fff;
  background: linear-gradient(135deg, #16a34a, #15803d);
  box-shadow: 0 8px 22px -10px #16a34a;
}
.ut-st-banner.is-warn .ut-st-mark { background: linear-gradient(135deg, #f59e0b, #b45309); box-shadow: 0 8px 22px -10px #f59e0b; }
.ut-st-banner.is-down .ut-st-mark { background: linear-gradient(135deg, #ef4444, #b91c1c); box-shadow: 0 8px 22px -10px #ef4444; }
.ut-st-banner h2 { margin: 0; font-size: 1.2rem; font-weight: 780; letter-spacing: -0.02em; }
.ut-st-banner p { margin: 0; font-size: 0.84rem; color: var(--muted-foreground); line-height: 1.5; }

.ut-st-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ut-gap); }
.ut-svc {
  position: relative; min-width: 0; display: flex; flex-direction: column; gap: 0.7rem;
  padding: 1rem 1.05rem 0.95rem;
  animation: rise-in-sm 0.36s var(--ease-out) backwards;
  animation-delay: calc(0.12s + var(--i, 0) * 0.05s);
}
.ut-svc::before {
  content: ""; position: absolute; top: 0; left: 1.05rem; right: 1.05rem; height: 2px; border-radius: 0 0 2px 2px;
  background: var(--ut-live); opacity: 0.85;
}
.ut-svc.is-warn::before { background: var(--ut-warn-line); }
.ut-svc.is-down::before { background: var(--ut-down); }
.ut-svc.is-idle::before { background: var(--muted-foreground); opacity: 0.4; }
.ut-svc-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.ut-svc-head h3 { margin: 0; font-size: 0.92rem; font-weight: 700; display: flex; align-items: center; gap: 0.45rem; min-width: 0; }
.ut-svc-head h3 svg { color: var(--nz-accent-text); flex-shrink: 0; }
.ut-svc-last { font-size: 0.78rem; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.ut-svc-last b { color: var(--foreground); font-weight: 650; }
.ut-svc dl { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.55rem 0.75rem; }
.ut-svc dl > div { min-width: 0; }
.ut-svc dt { font-size: 0.68rem; color: var(--muted-foreground); }
.ut-svc dd { margin: 0.1rem 0 0; font-size: 0.92rem; font-weight: 680; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ut-svc-foot { margin-top: auto; padding-top: 0.6rem; border-top: 1px solid color-mix(in srgb, var(--border) 75%, transparent); display: flex; flex-wrap: wrap; gap: 0.2rem 0.8rem; font-size: 0.72rem; color: var(--muted-foreground); }
.ut-svc-note { margin: 0; font-size: 0.76rem; color: var(--ut-warn); line-height: 1.45; }
.ut-err {
  margin: 0; padding: 0.5rem 0.65rem; border-radius: 8px;
  font: 500 0.72rem/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere;
  color: var(--ut-down); background: color-mix(in srgb, var(--ut-down) 8%, transparent);
}

.ut-ribbon-card { padding: 1rem 1.1rem 0.95rem; animation: rise-in 0.45s var(--ease-out) 0.18s backwards; }
.ut-ribbon-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 0.3rem 1rem; margin-bottom: 0.8rem; }
.ut-ribbon-head h3 { margin: 0; font-size: 0.92rem; font-weight: 700; }
.ut-ribbon-head p { margin: 0; font-size: 0.76rem; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.ut-ribbon { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(48, minmax(0, 1fr)); gap: 2px; height: 2.6rem; align-items: stretch; }
.ut-ribbon li {
  border-radius: 3px; background: var(--ut-live); opacity: 0.9;
  transform-origin: bottom center;
  animation: ut-rise-y 0.45s var(--ease-out) backwards;
  animation-delay: calc(0.25s + min(var(--i, 0), 47) * 0.012s);
  transition: opacity var(--dur-1) ease;
}
.ut-ribbon li.is-part { background: var(--ut-warn-line); }
.ut-ribbon li.is-bad { background: var(--ut-down); }
.ut-ribbon li.is-none { background: var(--muted); }
.ut-ribbon li.is-now { opacity: 0.55; }
.ut-ribbon:hover li { opacity: 0.55; }
.ut-ribbon li:hover { opacity: 1; }
.ut-ribbon-axis { display: flex; justify-content: space-between; margin-top: 0.35rem; font-size: 0.66rem; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.ut-ribbon-read { min-height: 1.2rem; margin: 0.45rem 0 0; font-size: 0.76rem; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.ut-legend { display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; font-size: 0.72rem; color: var(--muted-foreground); }
.ut-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 0.35rem; vertical-align: -1px; }
.ut-legend .is-ok { background: var(--ut-live); }
.ut-legend .is-part { background: var(--ut-warn-line); }
.ut-legend .is-bad { background: var(--ut-down); }
.ut-legend .is-none { background: var(--muted); box-shadow: 0 0 0 1px var(--border); }
.ut-spark { margin-top: 0.9rem; padding-top: 0.8rem; border-top: 1px solid color-mix(in srgb, var(--border) 75%, transparent); animation: fade-in 0.5s ease-out 0.5s backwards; }
.ut-spark svg { display: block; width: 100%; height: 56px; overflow: visible; color: var(--chart-3); }
.ut-spark path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.ut-spark p { margin: 0.35rem 0 0; font-size: 0.72rem; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.ut-spark p b { color: var(--foreground); font-weight: 650; }

.ut-st-tables { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ut-gap); }
.ut-table-card { padding: 0.35rem 0.35rem 0.5rem; min-width: 0; }
.ut-table-card h3 { margin: 0.7rem 0.75rem 0.6rem; font-size: 0.9rem; font-weight: 700; }
.ut-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; font-variant-numeric: tabular-nums; }
.ut-table th { text-align: left; font-size: 0.7rem; font-weight: 600; color: var(--muted-foreground); padding: 0.45rem 0.75rem; border-bottom: 1px solid var(--border); white-space: nowrap; }
.ut-table td { padding: 0.55rem 0.75rem; border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent); vertical-align: top; }
.ut-table tr:last-child td { border-bottom: 0; }
.ut-table tbody tr { transition: background-color var(--dur-1) ease; }
.ut-table tbody tr:hover { background: color-mix(in srgb, var(--accent) 70%, transparent); }
.ut-table .ut-err { margin-top: 0.35rem; }
.ut-table .is-num { text-align: right; }

.ut-sched { list-style: none; margin: 0; padding: 0.4rem 0.2rem; display: grid; grid-template-columns: minmax(0, 1fr); }
.ut-sched li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.5rem 0.75rem; font-size: 0.8rem; border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent); }
.ut-sched li:last-child { border-bottom: 0; }
.ut-sched span { color: var(--muted-foreground); }
.ut-sched b { font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* The 30s partial swap re-inserts #utStLive: its entrances must not replay. */
#utStLive.is-settled .ut-kpi, #utStLive.is-settled .ut-svc, #utStLive.is-settled .ut-st-banner,
#utStLive.is-settled .ut-ribbon-card, #utStLive.is-settled .ut-ribbon li, #utStLive.is-settled .ut-spark { animation: none; }

/* ==========================================================================
   /api-docs
   ========================================================================== */
.ut-doc-hero { align-items: start; }
.ut-doc-facts { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 1rem; }
.ut-base {
  display: flex; align-items: center; gap: 0.5rem; max-width: 100%; margin-top: 1rem;
  padding: 0.35rem 0.35rem 0.35rem 0.85rem; border-radius: 999px;
  background-color: color-mix(in srgb, var(--card) 88%, transparent); background-image: var(--nz-card-wash);
  box-shadow: inset 0 1px 0 0 var(--nz-hairline), 0 0 0 1px var(--border), var(--nz-elev-1);
}
.ut-base code { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 0.84rem/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; }
.ut-base .ut-copy { border-radius: 999px; }

.ut-key { position: relative; padding: 1.15rem; display: grid; gap: 0.75rem; animation: stat-rise 0.55s var(--ease-out) 0.1s backwards;
  box-shadow: inset 0 1px 0 0 var(--nz-hairline), 0 0 0 1px color-mix(in srgb, var(--chart-1) 22%, var(--border)), var(--nz-elev-2), 0 26px 52px -34px var(--nz-glow);
}
.ut-key::before {
  content: ""; position: absolute; top: 0; left: 1.15rem; right: 1.15rem; height: 2px; border-radius: 0 0 2px 2px; opacity: 0.9;
  background: linear-gradient(90deg, var(--chart-1), var(--nz-accent-2) 50%, var(--nz-accent-3));
}
.ut-key h2 { margin: 0; font-size: 1rem; font-weight: 750; display: flex; align-items: center; gap: 0.45rem; }
.ut-key h2 svg { color: var(--nz-accent-text); }
.ut-key p { margin: 0; font-size: 0.8rem; color: var(--muted-foreground); line-height: 1.5; }
.ut-key-row { display: flex; gap: 0.45rem; flex-wrap: wrap; }
.ut-key-row .ut-input { flex: 1 1 12rem; }
.ut-key-row .btn { border-radius: calc(var(--radius) - 6px); min-height: 2.6rem; }
.ut-key-out {
  display: flex; align-items: center; gap: 0.5rem; padding: 0.55rem 0.55rem 0.55rem 0.8rem; border-radius: 10px;
  background: var(--ut-code-bg); color: var(--ut-code-str);
  animation: pop-in 0.25s var(--ease-out) backwards;
}
.ut-key-out code { flex: 1; min-width: 0; overflow-wrap: anywhere; font: 600 0.8rem/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; }
.ut-key-out .ut-copy { background: rgb(255 255 255 / 0.06); border-color: rgb(255 255 255 / 0.14); color: var(--ut-code-fg); }
.ut-key-warn { font-size: 0.74rem !important; color: var(--ut-warn) !important; }
.ut-key-use { border-top: 1px dashed var(--border); padding-top: 0.75rem; }

.ut-doc-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.ut-doc-nav { min-width: 0; }
.ut-doc-nav ul { list-style: none; margin: 0; padding: 0.25rem; display: flex; gap: 0.3rem; overflow-x: auto; scrollbar-width: none; }
.ut-doc-nav ul::-webkit-scrollbar { display: none; }
.ut-doc-nav a {
  display: flex; align-items: center; gap: 0.45rem; padding: 0.4rem 0.75rem; border-radius: 999px; white-space: nowrap;
  font-size: 0.8rem; font-weight: 550; color: var(--muted-foreground); background: var(--muted);
  transition: color var(--dur-1) ease, background-color var(--dur-1) ease;
}
.ut-doc-nav a:hover { color: var(--foreground); }
.ut-doc-nav a[aria-current="true"] { color: var(--foreground); background: color-mix(in srgb, var(--chart-1) 14%, var(--card)); }
.ut-doc-nav .ut-method { font-size: 0.58rem; padding: 0.05rem 0.3rem; }
.ut-doc-nav-title { display: none; }

.ut-doc-main { min-width: 0; display: grid; gap: 1.25rem; }
.ut-doc-sec { min-width: 0; }   /* html already has scroll-padding-top: 5rem */
.ut-doc-sec > h2 { margin: 0 0 0.35rem; font-size: 1.25rem; font-weight: 760; letter-spacing: -0.02em; }
.ut-doc-sec > p { margin: 0 0 0.9rem; font-size: 0.88rem; line-height: 1.65; color: var(--muted-foreground); max-width: 48rem; }
.ut-reveal { animation: rise-in-sm 0.4s var(--ease-out) backwards; }
/* Docs are reading material: only the first screenful rises in, and there is
   deliberately no scroll-driven reveal on long sections. */
.ut-doc-main > .ut-reveal:nth-child(n + 3) { animation: none; }

.ut-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.75rem; counter-reset: ut-step; }
.ut-steps > li { position: relative; padding: 1rem 1rem 1rem 3.2rem; counter-increment: ut-step; min-width: 0; }
.ut-steps > li::before {
  content: counter(ut-step); position: absolute; left: 1rem; top: 1rem;
  width: 1.6rem; height: 1.6rem; border-radius: 999px; display: flex; align-items: center; justify-content: center;
  font-size: 0.78rem; font-weight: 800; color: #fff; background-image: linear-gradient(135deg, var(--chart-1), var(--nz-btn-2));
}
.ut-steps h3 { margin: 0 0 0.25rem; font-size: 0.92rem; font-weight: 700; }
.ut-steps p { margin: 0 0 0.6rem; font-size: 0.8rem; line-height: 1.55; color: var(--muted-foreground); }

.ut-method {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  padding: 0.14rem 0.45rem; border-radius: 6px;
  font: 800 0.66rem/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.02em;
  color: var(--ut-up); background: color-mix(in srgb, var(--ut-up) 14%, transparent);
}
.ut-method.is-post { color: var(--nz-accent-text); background: color-mix(in srgb, var(--chart-1) 14%, transparent); }

/* Endpoint card */
.ut-ep { padding: 0; overflow: hidden; }
.ut-ep-head { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem 0.75rem; padding: 0.9rem 1.1rem; border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--muted) 45%, transparent); }
.ut-ep-path { min-width: 0; flex: 1 1 14rem; font: 650 0.88rem/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; }
.ut-ep-path em { font-style: normal; color: var(--nz-accent-text); }
.ut-ep-anchor { color: var(--muted-foreground); opacity: 0.7; font-size: 0.8rem; }
.ut-ep-anchor:hover { color: var(--nz-accent-text); opacity: 1; }
.ut-ep-body { display: grid; grid-template-columns: minmax(0, 1fr); }
.ut-ep-doc, .ut-ep-code { padding: 1rem 1.1rem 1.1rem; min-width: 0; }
.ut-ep-code { border-top: 1px solid var(--border); display: grid; gap: 0.75rem; align-content: start; }
.ut-ep-doc h3 { margin: 0 0 0.35rem; font-size: 1.02rem; font-weight: 720; letter-spacing: -0.01em; }
.ut-ep-doc > p { margin: 0 0 0.9rem; font-size: 0.85rem; line-height: 1.6; color: var(--muted-foreground); }
.ut-ep-doc h4 { margin: 1rem 0 0.4rem; font-size: 0.74rem; font-weight: 700; color: var(--muted-foreground); }
.ut-notes { margin: 0.6rem 0 0; padding-left: 1.1rem; font-size: 0.78rem; line-height: 1.6; color: var(--muted-foreground); }
.ut-codes { display: flex; flex-wrap: wrap; gap: 0.3rem; }

.ut-ptable { width: 100%; border-collapse: collapse; font-size: 0.78rem; }
.ut-ptable th { text-align: left; font-size: 0.68rem; font-weight: 600; color: var(--muted-foreground); padding: 0.35rem 0.5rem; border-bottom: 1px solid var(--border); }
.ut-ptable td { padding: 0.5rem; border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent); vertical-align: top; line-height: 1.5; }
.ut-ptable tr:last-child td { border-bottom: 0; }
.ut-ptable code { font: 650 0.78rem/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--foreground); }
.ut-ptable .ut-type { display: block; font-size: 0.68rem; color: var(--muted-foreground); }
.ut-ptable .ut-req { font-size: 0.62rem; font-weight: 700; color: var(--ut-down); margin-left: 0.3rem; }
.ut-ptable-wrap { overflow-x: auto; margin: 0 -0.5rem; padding: 0 0.5rem; }

/* Code panels */
.ut-code {
  position: relative; min-width: 0; border-radius: 12px; overflow: hidden;
  background: var(--ut-code-bg); color: var(--ut-code-fg);
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.06), var(--nz-elev-1);
}
.ut-code-bar { display: flex; align-items: center; gap: 0.25rem; padding: 0.35rem 0.4rem 0.35rem 0.5rem; border-bottom: 1px solid var(--ut-code-line); }
.ut-code-bar .ut-code-title { flex: 1; min-width: 0; padding-left: 0.3rem; font-size: 0.72rem; font-weight: 600; color: var(--ut-code-mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ut-code-bar .ut-copy { background: rgb(255 255 255 / 0.05); border-color: rgb(255 255 255 / 0.12); color: var(--ut-code-fg); margin-left: auto; }
.ut-code-bar .ut-copy:hover { border-color: rgb(255 255 255 / 0.3); }
.ut-code-bar .ut-copy.is-done { color: var(--ut-code-str); border-color: color-mix(in srgb, var(--ut-code-str) 45%, transparent); }
.ut-tabs { display: flex; gap: 0.15rem; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.ut-tab {
  padding: 0.3rem 0.65rem; border: 0; border-radius: 7px; cursor: pointer; white-space: nowrap;
  font: inherit; font-size: 0.74rem; font-weight: 600; line-height: 1.3; color: var(--ut-code-mute); background: transparent;
  transition: color var(--dur-1) ease, background-color var(--dur-1) ease;
}
.ut-tab:hover { color: var(--ut-code-fg); }
.ut-tab[aria-selected="true"] { color: #fff; background: rgb(255 255 255 / 0.1); }
.ut-tab:focus-visible { outline: 2px solid var(--ut-code-key); outline-offset: 1px; }
.ut-code pre {
  margin: 0; padding: 0.85rem 1rem 0.95rem; overflow-x: auto; tab-size: 2;
  font: 500 0.78rem/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  scrollbar-width: thin; scrollbar-color: rgb(255 255 255 / 0.2) transparent;
}
.ut-code pre:focus-visible { outline: 2px solid var(--ut-code-key); outline-offset: -2px; }
.ut-code [role="tabpanel"][hidden] { display: none; }
.ut-code.is-clamped pre { max-height: 17rem; overflow-y: hidden; -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent); mask-image: linear-gradient(180deg, #000 70%, transparent); }
.ut-code-more {
  display: block; width: 100%; padding: 0.45rem; border: 0; border-top: 1px solid var(--ut-code-line); cursor: pointer;
  font: inherit; font-size: 0.74rem; font-weight: 600; color: var(--ut-code-key); background: rgb(255 255 255 / 0.03);
}
.ut-code-more:hover { background: rgb(255 255 255 / 0.07); }
.ut-code-more:focus-visible { outline: 2px solid var(--ut-code-key); outline-offset: -2px; }
.ut-code-meta { padding: 0 1rem 0.7rem; font-size: 0.68rem; color: var(--ut-code-mute); }
.ut-j-k { color: var(--ut-code-key); }
.ut-j-s { color: var(--ut-code-str); }
.ut-j-n { color: var(--ut-code-num); }
.ut-j-l { color: var(--ut-code-lit); }
.ut-j-p { color: var(--ut-code-mute); }
.ut-c-cmd { color: var(--ut-code-key); }
.ut-c-str { color: var(--ut-code-str); }
.ut-c-com { color: var(--ut-code-mute); }

/* "Dene" console */
.ut-try { border-radius: 12px; padding: 0.85rem; background: color-mix(in srgb, var(--muted) 60%, transparent); box-shadow: 0 0 0 1px var(--border); display: grid; gap: 0.6rem; }
.ut-try-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; font-size: 0.78rem; font-weight: 700; }
.ut-try-head svg { color: var(--nz-accent-text); }
.ut-try-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: 0.5rem; }
.ut-try-grid label { display: grid; gap: 0.2rem; font-size: 0.68rem; font-weight: 650; color: var(--muted-foreground); }
.ut-try-grid .ut-input { min-height: 2.2rem; padding: 0.35rem 0.6rem; font-size: 0.8rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.ut-try-go { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem 0.75rem; }
.ut-try-go .btn { border-radius: 999px; }
.ut-try-go .btn[disabled] { opacity: 0.55; cursor: not-allowed; }
.ut-try-status { font-size: 0.74rem; color: var(--muted-foreground); font-variant-numeric: tabular-nums; display: flex; flex-wrap: wrap; gap: 0.3rem 0.6rem; align-items: center; }

.ut-rl { display: grid; gap: 0.35rem; }
.ut-rl-bar { height: 6px; border-radius: 999px; background: var(--muted); overflow: hidden; }
.ut-rl-bar > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--chart-1), var(--chart-3)); transform-origin: left center; animation: bar-fill 0.6s var(--ease-out) backwards; }

.ut-err-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.6rem; }
.ut-err-card { padding: 0.85rem 0.95rem; min-width: 0; display: grid; gap: 0.45rem; }
.ut-err-card header { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.ut-err-card code.is-code { font: 700 0.8rem/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; }
.ut-err-card p { margin: 0; font-size: 0.78rem; color: var(--muted-foreground); line-height: 1.5; }
.ut-err-card pre { margin: 0; padding: 0.5rem 0.65rem; border-radius: 8px; overflow-x: auto; font: 500 0.72rem/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--ut-code-bg); color: var(--ut-code-fg); }

.ut-badge-demo { display: flex; align-items: center; flex-wrap: wrap; gap: 0.75rem 1rem; padding: 1rem 1.1rem; }
.ut-badge-demo img { height: 20px; width: auto; }

/* ==========================================================================
   404
   ========================================================================== */
.ut-nf { text-align: center; }
.ut-nf .ut-hero { justify-items: center; padding: 3.5rem 0 1.5rem; }
.ut-nf .ut-hero::before { -webkit-mask-image: radial-gradient(60% 80% at 50% 10%, #000 25%, transparent 78%); mask-image: radial-gradient(60% 80% at 50% 10%, #000 25%, transparent 78%); }
.ut-nf .ut-hero-copy { align-items: center; }
.ut-nf-code {
  display: flex; align-items: center; justify-content: center; gap: 0.1em;
  font-size: clamp(5rem, 3.5rem + 7vw, 9.5rem); font-weight: 850; line-height: 0.9; letter-spacing: -0.06em;
  font-variant-numeric: tabular-nums;
}
.ut-nf-code > span { display: inline-block; animation: stat-rise 0.6s var(--ease-out) backwards; }
.ut-nf-code > span:nth-child(2) { animation-delay: 0.08s; }
.ut-nf-code > span:nth-child(3) { animation-delay: 0.16s; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .ut-nf-digit {
    background-image: linear-gradient(160deg, var(--chart-3), var(--nz-accent-2) 70%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  }
}
.ut-nf-radar { position: relative; width: 0.78em; height: 0.78em; }
.ut-nf-radar svg { display: block; width: 100%; height: 100%; overflow: visible; }
.ut-nf-radar .ring { fill: none; stroke: color-mix(in srgb, var(--chart-3) 55%, transparent); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.ut-nf-radar .ring.is-outer { stroke: var(--chart-3); stroke-width: 2.4; }
.ut-nf-radar .blip { fill: var(--nz-accent-3); }
.ut-nf-sweep { transform-origin: 50px 50px; transform-box: view-box; animation: ut-sweep 1.6s var(--ease-soft) 0.45s backwards; opacity: 0; }
.ut-nf .ut-lead { margin-inline: auto; text-align: center; }
.ut-nf-path { display: inline-block; max-width: 100%; margin-top: 0.75rem; padding: 0.2rem 0.55rem; border-radius: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; font: 600 0.8rem/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--muted-foreground); background: var(--muted); }
.ut-nf-search {
  display: flex; align-items: center; gap: 0.5rem; width: 100%; max-width: 34rem; margin: 1.4rem auto 0;
  padding: 0.3rem 0.3rem 0.3rem 1rem; border-radius: 999px;
  background-color: color-mix(in srgb, var(--card) 88%, transparent); background-image: var(--nz-card-wash);
  box-shadow: inset 0 1px 0 0 var(--nz-hairline), 0 0 0 1px var(--border), var(--nz-elev-2);
}
.ut-nf-search:focus-within { box-shadow: inset 0 1px 0 0 var(--nz-hairline), 0 0 0 1px color-mix(in srgb, var(--chart-1) 60%, var(--border)), 0 0 0 4px color-mix(in srgb, var(--chart-1) 18%, transparent), var(--nz-elev-2); }
.ut-nf-search svg { color: var(--muted-foreground); flex-shrink: 0; }
.ut-nf-search input { flex: 1; min-width: 0; height: 2.5rem; border: 0; background: transparent; color: var(--foreground); font: inherit; font-size: 0.95rem; }
.ut-nf-search input:focus { outline: none; }
.ut-nf-search .btn { border-radius: 999px; height: 2.4rem; padding: 0 1.2rem; flex-shrink: 0; }
.ut-nf-alt { margin: 0.8rem 0 0; font-size: 0.8rem; color: var(--muted-foreground); }
.ut-nf-alt button { border: 0; background: none; padding: 0.2rem 0.35rem; border-radius: 6px; cursor: pointer; color: var(--nz-accent-text); font: inherit; font-weight: 600; }
.ut-nf-alt button:hover { background: var(--accent); }
.ut-nf-alt kbd { padding: 0 0.35rem; border-radius: 5px; border: 1px solid var(--border); background: var(--card); font: 600 0.7rem/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--muted-foreground); }
@media (hover: none) { .ut-nf-alt { display: none; } }
.ut-nf-links { list-style: none; margin: 1.5rem auto 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.6rem; max-width: 60rem; text-align: left; }
.ut-nf-links > li { min-width: 0; display: flex; animation: rise-in-sm 0.34s var(--ease-out) backwards; animation-delay: calc(0.3s + var(--i, 0) * 0.04s); }
.ut-nf-link {
  position: relative; isolation: isolate; flex: 1; display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); gap: 0.15rem 0.8rem; align-items: center;
  padding: 0.85rem 0.95rem; color: inherit;
  transition: transform var(--dur-2) var(--ease-out);
}
.ut-nf-link::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--chart-1) 45%, var(--border)), var(--nz-elev-2);
  opacity: 0; transition: opacity var(--dur-2) ease;
}
.ut-nf-link:hover { transform: translateY(-2px); }
.ut-nf-link:hover::before, .ut-nf-link:focus-visible::before { opacity: 1; }
.ut-nf-link .ico { grid-row: span 2; width: 2.4rem; height: 2.4rem; border-radius: 11px; display: flex; align-items: center; justify-content: center; color: var(--nz-accent-text); background: color-mix(in srgb, var(--chart-1) 11%, transparent); }
.ut-nf-link b { font-size: 0.88rem; font-weight: 650; }
.ut-nf-link small { font-size: 0.74rem; color: var(--muted-foreground); line-height: 1.4; }

/* --------------------------------------------------------------------------
   Scroll reveal (additive only: without scroll timelines or with reduced
   motion none of this exists and everything is simply visible).
   -------------------------------------------------------------------------- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .ut-fav-grid:not(.is-settled) > .ut-fav-item:nth-child(n + 7) {
      animation: rise-in-sm linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 40%;
    }
  }
}

/* --------------------------------------------------------------------------
   Breakpoints
   -------------------------------------------------------------------------- */
@media (min-width: 640px) {
  .ut-fav-grid { --ut-cols: 2; }
  .ut-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ut-cond { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ut-st-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ut-err-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ut-nf-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ut-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ut-sched { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 0.5rem; }
}
@media (min-width: 768px) {
  .ut-watch-list.is-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .ut-fav-grid { --ut-cols: 3; }
  .ut-hero.has-side { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.9fr); gap: 2.5rem; padding-top: 2.75rem; }
  /* Beside the title the tiles get half the width: 2 x 2, never 4 cramped. */
  .ut-hero.has-side .ut-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ut-al-layout { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 1.5rem; }
  .ut-al-side { position: sticky; top: 5rem; }
  .ut-nf-links { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ut-st-tables { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
  /* Schedule card spans the row under the two tables, list in 4 columns. */
  .ut-st-tables > :last-child { grid-column: 1 / -1; }
  .ut-st-tables > :last-child .ut-sched { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* Docs: sticky side nav from here up. */
  .ut-doc-layout { grid-template-columns: 13.5rem minmax(0, 1fr); gap: 2rem; }
  .ut-doc-nav { position: sticky; top: 5rem; max-height: calc(100vh - 6rem); overflow-y: auto; scrollbar-width: thin; }
  .ut-doc-nav ul { flex-direction: column; overflow: visible; padding: 0; gap: 0.1rem; }
  .ut-doc-nav a { background: transparent; border-radius: 8px; padding: 0.4rem 0.6rem; }
  .ut-doc-nav a[aria-current="true"] { box-shadow: inset 2px 0 0 var(--chart-1); }
  .ut-doc-nav-title { display: block; margin: 0.9rem 0.6rem 0.3rem; font-size: 0.68rem; font-weight: 700; color: var(--muted-foreground); }
  .ut-doc-nav-title:first-child { margin-top: 0; }
}
@media (min-width: 1440px) {
  .ut-page.is-wide .ut-fav-grid { --ut-cols: 4; }
  .ut-st-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ut-watch-list.is-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Docs: side-by-side "explain | code" endpoint cards once the code column
   can be ~560px wide - the Stripe-style reading pattern. */
@media (min-width: 1800px) {
  .ut-ep-body { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
  .ut-ep-code { border-top: 0; border-left: 1px solid var(--border); }
  .ut-page.is-wide .ut-fav-grid { --ut-cols: 5; }
}
/* Ultrawide (owner's 3440px). Data pages get a 2560px frame; the alerts
   FORM keeps its readable width (only the side column grows) and docs cap
   at 2200 - a 3300px-wide line of prose is an eye-track, not a layout. */
@media (min-width: 2400px) {
  .ut-page.is-wide .ut-fav-grid { --ut-cols: 6; --ut-gap: 1.15rem; }
  .ut-doc-layout { grid-template-columns: 15rem minmax(0, 1fr); gap: 3rem; }
  .ut-hero.has-side { grid-template-columns: minmax(0, 1fr) minmax(0, 36rem); gap: 4rem; }
  .ut-hero h1 { font-size: 3.2rem; }
  .ut-st-tables { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 0.7fr); }
  .ut-st-tables > :last-child { grid-column: auto; }
  .ut-st-tables > :last-child .ut-sched { grid-template-columns: minmax(0, 1fr); }
  .ut-al-layout { grid-template-columns: minmax(0, 52rem) minmax(0, 1fr); }
}

@media (max-width: 767px) {
  .ut-page { padding-bottom: 5rem; }
  .ut-hero { padding: 1.4rem 0 1rem; gap: 1rem; }
  .ut-lead { font-size: 0.92rem; }
  .ut-kpi dd { font-size: 1.25rem; }
  .ut-toolbar { padding: 0.45rem; }
  .ut-toolbar .ut-seg { order: 3; flex: 1 1 100%; }
  .ut-toolbar .ut-seg label { flex: 1; }
  .ut-toolbar .ut-seg span { justify-content: center; width: 100%; }
  .ut-tool-select { order: 2; }
  .ut-tool-select > span { display: none; }
  .ut-al-form { padding: 1rem; }
  .ut-watch { grid-template-columns: 2.2rem minmax(0, 1fr); }
  .ut-watch-ico { width: 2.2rem; height: 2.2rem; }
  .ut-watch-side { grid-column: 1 / -1; justify-content: space-between; }
  .ut-toast { left: 1rem; right: 1rem; transform: none; border-radius: 16px; }
  /* Status tables become stacked cards. */
  .ut-table thead { display: none; }
  .ut-table, .ut-table tbody, .ut-table tr, .ut-table td { display: block; width: 100%; }
  .ut-table tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1rem; padding: 0.5rem 0.4rem; border-bottom: 1px solid var(--border); }
  .ut-table td.is-full { grid-column: 1 / -1; }
  .ut-table td:first-child:not(.is-full) { grid-column: 1 / -1; justify-content: flex-start; font-weight: 650; }
  .ut-table td:first-child:not(.is-full)::before { content: none; }
  .ut-table tr:last-child { border-bottom: 0; }
  .ut-table td { display: flex; justify-content: space-between; gap: 1rem; padding: 0.2rem 0.45rem; border: 0; text-align: right; }
  .ut-table td::before { content: attr(data-label); color: var(--muted-foreground); font-size: 0.72rem; text-align: left; }
  .ut-table td.is-full { display: block; text-align: left; }
  .ut-table td.is-full::before { content: none; }
  .ut-ribbon { gap: 1px; height: 2.2rem; }
  .ut-steps > li { padding-left: 3rem; }
  .ut-ep-head, .ut-ep-doc, .ut-ep-code { padding-inline: 0.9rem; }
  .ut-doc-sec { scroll-margin-top: 3.25rem; }   /* + html scroll-padding: clears the sticky chip strip */
  .ut-doc-nav { position: sticky; top: 4rem; z-index: 5; margin: 0 -1rem; padding: 0.4rem 1rem; background: color-mix(in srgb, var(--background) 92%, transparent); border-bottom: 1px solid var(--border); }
  .ut-nf .ut-hero { padding-top: 2.25rem; }
}
@media (max-width: 400px) {
  .ut-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.45rem; }
  .ut-kpi { padding: 0.7rem 0.75rem; }
  .ut-fav { padding: 0.9rem 0.85rem 0.8rem; }
  .ut-fav-now b { font-size: 1.4rem; }
}
@media (pointer: coarse) {
  .ut-star, .ut-copy, .ut-btn-ghost { min-height: 2.75rem; min-width: 2.75rem; justify-content: center; }
  .ut-seg span { min-height: 2.5rem; }
  .ut-tab { min-height: 2.5rem; }
}

/* --------------------------------------------------------------------------
   Reduced motion. The global guard zeroes durations and delays; an infinite
   loop with ~0 duration still cycles, so the dot is killed outright, every
   entrance is removed (end state = the element's own styles, so bars keep
   their real width/height) and the scroll reveal is pinned visible.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .ut-dot::after { animation: none !important; opacity: 0 !important; }
  .ut-hero-copy > *, .ut-kpi, .ut-flip, .ut-toast, .ut-empty, .ut-empty-art .is-star, .ut-banner,
  .ut-toolbar, .ut-fav-item, .ut-bar > span, .ut-week-slot > i, .ut-al-form, .ut-al-side,
  .ut-pick-list, .ut-picked, .ut-thr, .ut-watch-list > li, .ut-st-banner, .ut-svc, .ut-ribbon-card,
  .ut-ribbon li, .ut-spark, .ut-key, .ut-key-out, .ut-reveal, .ut-rl-bar > span, .ut-nf-code > span,
  .ut-nf-sweep, .ut-nf-links > li {
    animation: none !important;
  }
  .ut-fav-item.is-leaving { opacity: 0; }
  .ut-fav-grid > .ut-fav-item { opacity: 1 !important; transform: none !important; }
  .ut-fav:hover, .ut-fav:active, .ut-nf-link:hover, .ut-star:hover, .ut-star:active { transform: none; }
}


/* ==========================================================================
   Explorer features (/explorer) - "xpf-" block
   --------------------------------------------------------------------------
   Append to the END of public/css/style.css. Pairs with views/explorer.ejs
   (range switch, summary table, CSV export). Scoped to "xpf-" classes plus
   the three existing "xp-" pane selectors it has to re-lay-out
   (.xp-chart-pane, .xp-chart-statusbar, .xp-chart-canvas-wrap), nothing else.

   Ground rules, same as Polish v3 / Shell v5:
     - Only transform / opacity animate (colour/background on hover states).
     - Entrances use `backwards` fill; no infinite animation.
     - Reduced motion: the entrance is removed outright at the end.
     - No text-transform anywhere in this block.
   ========================================================================== */

:root {
  --xpf-up: #166534;      /* green TEXT on light - 7.1:1 on white */
  --xpf-seg-bg: var(--muted);
  --xpf-seg-on: var(--card);
}
:root.dark {
  --xpf-up: #4ade80;      /* green TEXT on dark */
  --xpf-seg-bg: #1f1f1f;
  --xpf-seg-on: #333333;
}

/* ---- Pane layout -------------------------------------------------------
   The pane now holds toolbar + chart + summary, so it scrolls internally on
   desktop (.xp-shell stays viewport-tall; the page itself never scrolls
   because of this block). The chart keeps a generous floor and grows into
   any spare height; the summary sits under it. */
.xp-chart-pane { overflow-y: auto; overscroll-behavior: contain; }
.xpf-stage { flex: 1 0 auto; min-height: 0; display: flex; flex-direction: column; }
.xpf-stage .xp-chart-canvas-wrap {
  flex: 1 0 auto;
  min-height: clamp(280px, 52vh, 760px);
  transition: opacity 0.2s ease;
}
/* Range / selection switch in flight: dim the old chart + table instead of
   blanking them (opacity only). */
.xpf-stage.is-loading .xp-chart-canvas-wrap,
.xpf-stage.is-loading .xpf-summary { opacity: 0.5; }
.xpf-summary { transition: opacity 0.2s ease; }

/* ---- Toolbar: status text | range switch + CSV -------------------------- */
.xpf-toolbar {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: 0.6rem 1rem; padding: 0.75rem 1.5rem 0;
}
.xpf-status { min-width: 0; font-variant-numeric: tabular-nums; }
.xpf-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; }

.xpf-range {
  display: inline-grid; grid-auto-flow: column; gap: 2px;
  padding: 3px; border-radius: 999px; background: var(--xpf-seg-bg); border: 1px solid var(--border);
}
.xpf-range-btn {
  font: inherit; font-size: 0.72rem; font-weight: 600; font-variant-numeric: tabular-nums;
  padding: 0.3rem 0.7rem; border: 0; border-radius: 999px; background: transparent;
  color: var(--muted-foreground); cursor: pointer; white-space: nowrap; position: relative;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.xpf-range-btn:hover { color: var(--foreground); }
.xpf-range-btn[aria-pressed="true"] {
  background: var(--xpf-seg-on); color: var(--foreground);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 0 0 1px var(--border);
}
/* Hairline between the minute group (saat) and the daily group (gun). */
.xpf-range-btn.xpf-range-split { margin-left: 5px; }
.xpf-range-btn.xpf-range-split::before {
  content: ""; position: absolute; left: -4px; top: 22%; bottom: 22%; width: 1px; background: var(--border);
}

.xpf-csv-btn {
  display: inline-flex; align-items: center; gap: 0.35rem; font: inherit;
  font-size: 0.72rem; font-weight: 600; padding: 0.36rem 0.8rem; border-radius: 999px;
  background: var(--accent); color: var(--foreground); border: 1px solid var(--border); cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}
.xpf-csv-btn:hover:not(:disabled) { border-color: color-mix(in srgb, var(--chart-1) 45%, var(--border)); color: var(--chart-1); }
.xpf-csv-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.xpf-csv-btn svg { flex-shrink: 0; }

/* ---- Summary table ---------------------------------------------------------- */
.xpf-summary { flex: 0 0 auto; padding: 0 1.5rem 1.5rem; }
.xpf-summary[hidden] { display: none; }
.xpf-summary-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.25rem 0.75rem; margin-bottom: 0.5rem; }
.xpf-summary-title { margin: 0; font-size: 0.9rem; font-weight: 700; }
.xpf-summary-note { margin: 0; font-size: 0.72rem; color: var(--muted-foreground); max-width: 60rem; }

.xpf-table-wrap {
  overflow-x: auto; border: 1px solid var(--border); border-radius: 0.75rem;
  background: var(--card); -webkit-overflow-scrolling: touch;
}
.xpf-table-wrap:focus-visible { outline: 2px solid var(--chart-1); outline-offset: 2px; }
.xpf-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.8rem; }
.xpf-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.xpf-table th, .xpf-table td {
  padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--border); text-align: left;
  white-space: nowrap; vertical-align: middle;
}
.xpf-table tbody tr:last-child th, .xpf-table tbody tr:last-child td { border-bottom: 0; }
.xpf-table thead th {
  font-size: 0.7rem; font-weight: 600; color: var(--muted-foreground);
  background: color-mix(in srgb, var(--muted) 55%, var(--card)); padding-top: 0.35rem; padding-bottom: 0.35rem;
}
.xpf-table .xpf-num { text-align: right; font-variant-numeric: tabular-nums; }
.xpf-table tbody tr { transition: background-color 0.12s ease; }
.xpf-table tbody tr:hover { background: var(--accent); }
.xpf-table tbody th { font-weight: 500; }

/* Sort buttons fill the header cell; the arrow shows only on the sorted column. */
.xpf-sort {
  font: inherit; color: inherit; background: none; border: 0; padding: 0.15rem 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: 0.25rem;
}
.xpf-num .xpf-sort { flex-direction: row-reverse; }
.xpf-sort::after { content: ""; display: inline-block; width: 0.6rem; font-size: 0.7rem; line-height: 1; opacity: 0; transition: opacity 0.15s ease; }
.xpf-sort:hover { color: var(--foreground); }
.xpf-sort:hover::after { content: "\2195"; opacity: 0.45; }
th[aria-sort] .xpf-sort { color: var(--foreground); }
th[aria-sort="ascending"] .xpf-sort::after { content: "\2191"; opacity: 1; }
th[aria-sort="descending"] .xpf-sort::after { content: "\2193"; opacity: 1; }

.xpf-name { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
.xpf-dot { flex-shrink: 0; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--xpf-dot, var(--chart-1)); }
.xpf-name-link {
  color: var(--foreground); text-decoration: none; overflow: hidden; text-overflow: ellipsis;
  max-width: 26rem; display: inline-block; vertical-align: middle;
}
.xpf-name-link:hover { text-decoration: underline; text-underline-offset: 2px; }
.xpf-strong { font-weight: 600; }
.xpf-muted { color: var(--muted-foreground); }
.xpf-behind { color: var(--muted-foreground); }
.xpf-sub { display: block; font-size: 0.66rem; color: var(--muted-foreground); font-weight: 500; margin-top: 0.1rem; }
.xpf-leader {
  display: inline-flex; align-items: center; font-size: 0.68rem; font-weight: 700;
  padding: 0.12rem 0.5rem; border-radius: 999px; color: var(--xpf-up);
  background: color-mix(in srgb, var(--xpf-up) 13%, transparent);
}

/* Entrance on user-initiated renders only (never on the 60s quiet refresh). */
@keyframes xpf-rise { from { opacity: 0; transform: translateY(6px); } }
.xpf-summary.is-entering { animation: xpf-rise 0.28s cubic-bezier(0.2, 0.7, 0.2, 1) backwards; }

/* ---- Ultra-wide (3440px class): summary moves beside the chart -----------
   Full-width under the chart, six numeric columns would sit 400px apart on a
   3000px pane. Beside it, the table reads as the chart's legend and the
   chart gets the whole height. */
@media (min-width: 2000px) {
  .xp-chart-pane { overflow: hidden; }
  .xpf-stage {
    flex: 1 1 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(38rem, 46rem);
    grid-template-rows: minmax(0, 1fr);
  }
  /* Before the first response there is no table yet - don't reserve its column. */
  .xpf-stage:has(> .xpf-summary[hidden]) { grid-template-columns: minmax(0, 1fr); }
  .xpf-stage .xp-chart-canvas-wrap { min-height: 0; }
  .xpf-summary { overflow-y: auto; padding: 0.75rem 1.5rem 1.25rem 1.25rem; border-left: 1px solid var(--border); }
  .xpf-name-link { max-width: 13rem; }
}

/* ---- Tablet / phone --------------------------------------------------------- */
@media (max-width: 900px) {
  /* The stacked layout from the xp- block gave the pane a fixed 420px; with a
     summary table under the chart it now flows with its content instead. */
  .xp-chart-pane { flex: none; height: auto; overflow: visible; }
  .xp-chart-empty { min-height: 320px; }
  .xpf-stage { flex: none; }
  .xpf-stage .xp-chart-canvas-wrap { flex: none; height: 360px; min-height: 0; padding: 0.5rem 1rem 1rem; }
  .xpf-toolbar { padding: 0.75rem 1rem 0; }
  .xpf-summary { padding: 0 1rem 1.25rem; }
  /* The name column stays put while the numbers scroll sideways. */
  .xpf-table .xpf-col-name { position: sticky; left: 0; z-index: 1; background: var(--card); }
  .xpf-table thead .xpf-col-name { background: color-mix(in srgb, var(--muted) 55%, var(--card)); }
  .xpf-name-link { max-width: 11rem; }
}
@media (max-width: 600px) {
  /* Status text + a compact CSV button share the first row; the range
     switch gets the full width below them. .xpf-tools steps out of the way
     (display: contents) so both of its children join this grid. */
  .xpf-toolbar {
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "status csv" "range range"; align-items: center; gap: 0.6rem 0.75rem;
  }
  .xpf-status { grid-area: status; line-height: 1.35; }
  .xpf-tools { display: contents; }
  .xpf-csv-btn { grid-area: csv; }
  /* Two rows: the three "saat" ranges over the three "gun" ranges. */
  .xpf-range {
    grid-area: range; display: grid; grid-auto-flow: row;
    grid-template-columns: repeat(3, minmax(0, 1fr)); border-radius: 0.9rem;
  }
  .xpf-range-btn { border-radius: 0.7rem; padding: 0.45rem 0.4rem; }
  .xpf-range-btn.xpf-range-split { margin-left: 0; }
  .xpf-range-btn.xpf-range-split::before { display: none; }
  .xpf-stage .xp-chart-canvas-wrap { height: 300px; padding: 0.5rem 0.5rem 0.75rem; }
  .xpf-table th, .xpf-table td { padding: 0.5rem 0.6rem; }
  .xpf-name-link { max-width: 8.5rem; }
}
@media (pointer: coarse) {
  .xpf-range-btn { min-height: 2.5rem; }
  .xpf-csv-btn { min-height: 2.5rem; }
  .xpf-sort { min-height: 2rem; }
}

@media (prefers-reduced-motion: reduce) {
  .xpf-summary.is-entering { animation: none !important; }
  .xpf-stage .xp-chart-canvas-wrap, .xpf-summary { transition: none; }
}