/* PUBGNOTE design system — warm ink, off-white canvas, signal lime.
   Inspired by the supplied editorial fintech specification without copying its brand assets. */
:root {
  --pn-lime: #e5fe54;
  --pn-lime-hover: #d4ed3f;
  --pn-lime-pressed: #c7df34;
  --brand-lime-text: #10140e;
  --pn-lime-100: #f4fcc9;
  --pn-lime-50: #fbfee8;
  --pn-ink: #1c1b17;
  --pn-ink-700: #3d3c37;
  --pn-ink-600: #56554f;
  --pn-canvas: #f7f7f5;
  --pn-surface: #ffffff;
  --pn-grey-500: #74726b;
  --pn-grey-400: #9c9a92;
  --pn-grey-300: #c9c7bf;
  --pn-grey-200: #e3e1da;
  --pn-grey-100: #efeee9;
  --pn-success: #1a7f4b;
  --pn-error: #d93f3f;
  --pn-warning: #e08a1e;
  --pn-info: #2f6fe0;
  --pn-radius-sm: 6px;
  --pn-radius-md: 8px;
  --pn-radius-card: 12px;
  --pn-radius-lg: 16px;
  --pn-shadow-ambient: 0 1px 2px rgba(28,27,23,.05);
  --pn-shadow-float: 0 8px 24px rgba(28,27,23,.18);
  --pn-shadow-modal: 0 12px 40px rgba(28,27,23,.18);
  --pn-ease: cubic-bezier(.4,0,.2,1);
  --bg: var(--pn-canvas);
  --panel: var(--pn-surface);
  --panel-2: var(--pn-grey-100);
  --line: var(--pn-grey-200);
  --text: var(--pn-ink);
  --muted: var(--pn-grey-500);
  --accent: var(--pn-lime);
  --accent-dim: rgba(229,254,84,.18);
  --header-h: 76px;
  --sidebar-w: 344px;
}

html, body { background: var(--pn-canvas); color: var(--pn-ink); }
body { font-family: "Noto Sans KR", "Helvetica Neue", Arial, system-ui, sans-serif; font-size: 15px; }
button, input, textarea, select { font-family: inherit; }
button { transition: background-color 120ms var(--pn-ease), border-color 120ms var(--pn-ease), color 120ms var(--pn-ease), transform 120ms var(--pn-ease), box-shadow 120ms var(--pn-ease); }
button:active:not(:disabled) { transform: scale(.98); }
:where(button, a, input, select, textarea):focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(229,254,84,.48); }
::selection { background: var(--pn-lime); color: var(--brand-lime-text); }

/* App chrome */
.topbar {
  border-color: var(--pn-grey-200);
  background: rgba(247,247,245,.96);
  box-shadow: 0 1px 0 rgba(28,27,23,.04);
  backdrop-filter: blur(12px);
}
.brand { gap: 12px; border-color: var(--pn-grey-200); color: var(--pn-ink); }
.brand-mark {
  width: 40px;
  height: 40px;
  border-radius: var(--pn-radius-md);
  background: var(--pn-lime);
  color: var(--brand-lime-text);
  transform: none;
  font-size: 17px;
  letter-spacing: -.02em;
}
.brand-title { color: var(--pn-ink); font-size: 23px; font-weight: 700; letter-spacing: .025em; }
.brand small { margin-top: 5px; color: var(--pn-grey-500); font-size: 9px; letter-spacing: .15em; }
.service-menu { gap: 4px; padding: 10px 12px; scrollbar-color: var(--pn-grey-300) transparent; }
.service-menu-item {
  min-width: 110px;
  height: 52px;
  padding: 6px 10px;
  border-radius: var(--pn-radius-md);
  color: var(--pn-ink-600);
}
.service-menu-item::after { right: 10px; bottom: -12px; left: 10px; height: 2px; background: var(--pn-ink); }
.service-menu-item:hover:not(:disabled) { border-color: var(--pn-grey-300); background: var(--pn-surface); color: var(--pn-ink); }
.service-menu-item.active { border-color: var(--pn-ink); background: var(--pn-ink); color: #fff; box-shadow: var(--pn-shadow-ambient); }
.service-menu-item strong { font-size: 12px; font-weight: 600; }
.service-menu-item i { color: var(--pn-grey-500); font-size: 8px; }
.service-menu-item.active i { color: rgba(255,255,255,.65); }
.service-icon {
  width: 30px;
  height: 30px;
  border: 1px solid var(--pn-grey-300);
  border-radius: var(--pn-radius-sm);
  background: var(--pn-surface);
  box-shadow: none;
  color: var(--pn-ink);
}
.service-menu-item.active .service-icon { border-color: var(--pn-lime); background: var(--pn-lime); color: var(--brand-lime-text); }
.service-menu-item:focus-visible .service-icon,
.service-menu-item:hover:not(:disabled) .service-icon { border-color: var(--pn-ink); }
.top-actions { gap: 8px; padding: 0 16px; }
.icon-button, .auth-trigger {
  min-height: 44px;
  border: 1px solid var(--pn-grey-300);
  border-radius: var(--pn-radius-md);
  background: var(--pn-surface);
  color: var(--pn-ink);
  box-shadow: var(--pn-shadow-ambient);
  font-size: 13px;
  font-weight: 500;
}
.icon-button:hover, .auth-trigger:hover { border-color: var(--pn-ink); background: var(--pn-grey-100); }
.auth-trigger-icon { border-radius: var(--pn-radius-sm); background: var(--pn-grey-100); color: var(--pn-ink); }
.beta-badge, .new-badge { border-radius: var(--pn-radius-sm); background: var(--pn-lime); color: var(--brand-lime-text); }

/* Sidebar: light editorial control plane */
.sidebar {
  border-color: var(--pn-grey-200);
  background: var(--pn-canvas);
  box-shadow: 12px 0 28px rgba(28,27,23,.08);
  scrollbar-color: var(--pn-grey-300) transparent;
}
.sidebar-head { padding: 26px 20px 18px; }
.eyebrow, .records-kicker, .full-leaderboard-title>span, .community-hero>span {
  color: var(--pn-ink-600);
  font-family: "Noto Sans KR", sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.sidebar h2 { color: var(--pn-ink); font-size: 34px; font-weight: 600; }
.map-selector { padding-bottom: 18px; border-color: var(--pn-grey-200); }
.section-title { color: var(--pn-ink-600); font-size: 12px; font-weight: 600; }
.section-title small { color: var(--pn-grey-500) !important; }
.section-title button { color: var(--pn-ink); font-size: 11px; font-weight: 600; }
.map-tabs { gap: 8px; }
.map-tab {
  min-height: 48px;
  border-color: var(--pn-grey-200);
  border-radius: var(--pn-radius-md);
  background: var(--pn-surface);
  color: var(--pn-grey-500);
  font: 600 14px "Noto Sans KR", sans-serif;
  box-shadow: var(--pn-shadow-ambient);
}
.map-tab::before { inset: auto 10px 0; width: auto; height: 3px; border-radius: 3px 3px 0 0; background: var(--pn-ink); transform: scaleX(0); }
.map-tab:hover { border-color: var(--pn-grey-300); background: var(--pn-grey-100); color: var(--pn-ink); }
.map-tab.active { border-color: var(--pn-ink); background: var(--pn-ink); color: #fff; }
.map-tab.active::before { background: var(--pn-lime); transform: scaleX(1); }
.control-shortcut {
  border-color: var(--pn-grey-300);
  border-bottom-color: var(--pn-grey-400);
  border-radius: 4px;
  background: var(--pn-grey-100);
  box-shadow: none;
  color: var(--pn-grey-500);
  font-family: "Noto Sans KR", sans-serif;
}
.map-tab.active .control-shortcut, .layer-toggle.active .control-shortcut { border-color: rgba(229,254,84,.5); background: rgba(229,254,84,.12); color: inherit; }
.search-box {
  height: 46px;
  border-color: var(--pn-grey-300);
  border-radius: var(--pn-radius-md);
  background: var(--pn-surface);
  color: var(--pn-grey-500);
  box-shadow: var(--pn-shadow-ambient);
}
.search-box:focus-within { border-color: var(--pn-ink); box-shadow: 0 0 0 3px rgba(229,254,84,.4); }
.search-box input { color: var(--pn-ink); font-size: 14px; }
.search-box input::placeholder { color: var(--pn-grey-400); }
.panel-section { border-color: var(--pn-grey-200); padding-top: 18px; padding-bottom: 18px; }
.layer-list { gap: 8px; }
.layer-toggle {
  min-height: 54px;
  padding: 9px;
  border-color: var(--pn-grey-200);
  border-radius: var(--pn-radius-md);
  background: var(--pn-surface);
  color: var(--pn-ink-600);
  box-shadow: var(--pn-shadow-ambient);
  font-size: 12px;
}
.layer-toggle:hover { border-color: var(--pn-grey-300); background: var(--pn-grey-100); }
.layer-toggle.active { color: var(--pn-ink); border-color: color-mix(in srgb,var(--category) 58%,var(--pn-grey-300)); background: color-mix(in srgb,var(--category) 10%,white); }
.layer-symbol { color: var(--pn-ink); }
.feedback-mode-toggle {
  min-height: 62px;
  border-color: var(--pn-grey-300);
  border-radius: var(--pn-radius-md);
  background: var(--pn-surface);
  color: var(--pn-ink);
  box-shadow: var(--pn-shadow-ambient);
}
.feedback-mode-toggle:hover { border-color: var(--pn-ink); background: var(--pn-grey-100); }
.feedback-mode-toggle.active { border-color: var(--pn-ink); background: var(--pn-ink); color: #fff; box-shadow: inset 4px 0 var(--pn-lime); }
.feedback-mode-toggle.login-required { border-color: rgba(224,138,30,.34); background: #fffaf2; }
.feedback-mode-icon { border-color: var(--pn-grey-300); border-radius: var(--pn-radius-sm); background: var(--pn-grey-100); color: var(--pn-ink); }
.feedback-mode-toggle small { color: var(--pn-grey-500); font-size: 11px; }
.feedback-mode-toggle i { color: var(--pn-grey-500); font-size: 10px; }
.feedback-clear-all { min-height: 44px; border-radius: var(--pn-radius-md); background: #fff8f7; color: #9d3333; }
.pc-optimized-notice { border-color: rgba(47,111,224,.2); border-radius: var(--pn-radius-md); background: rgba(47,111,224,.06); color: var(--pn-grey-500); font-size: 11px; }
.pc-optimized-notice b { color: var(--pn-info); font-family: inherit; font-size: 10px; }
.site-disclaimer { color: var(--pn-grey-500); font-size: 11px; }
.terrain-contributor-banner, .operator-contact {
  border-color: var(--pn-grey-200);
  border-radius: var(--pn-radius-card);
  background: var(--pn-surface);
  box-shadow: var(--pn-shadow-ambient);
}
.terrain-contributor-banner { box-shadow: inset 4px 0 0 var(--pn-lime), var(--pn-shadow-ambient); }
.terrain-contributor-banner::before { display: none; }
.terrain-contributor-banner:hover { border-color: var(--pn-grey-300); background: var(--pn-lime-50); }
.terrain-contributor-copy>small, .terrain-contributor-arrow { color: var(--pn-ink-600); }
.terrain-contributor-copy>strong, .terrain-contributor-copy>strong b { color: var(--pn-ink); }
.terrain-contributor-copy em { color: var(--pn-grey-500); }
.operator-contact { box-shadow: inset 4px 0 0 #5865f2, var(--pn-shadow-ambient); }
.operator-contact-icon { background: #f4f4ff; }
.operator-contact-copy small { color: #5865f2; }
.operator-contact-copy strong { color: var(--pn-ink); }
.operator-contact-copy span { color: var(--pn-grey-500); }
.sidebar-collapse, .sidebar-expand {
  border-color: var(--pn-grey-300);
  border-left: 0;
  border-radius: 0 var(--pn-radius-md) var(--pn-radius-md) 0;
  background: var(--pn-surface);
  box-shadow: var(--pn-shadow-float);
  color: var(--pn-ink);
}
.sidebar-collapse:hover, .sidebar-expand:hover { background: var(--pn-lime); color: var(--brand-lime-text); }

/* Map stays dark; every floating control uses one precise dark-card contract. */
.map-stage, #map { background: #11130f; }
.map-shade { box-shadow: inset 0 0 54px rgba(28,27,23,.35); }
:where(.zone-frequency-panel,.zone-analysis-panel-shell,.floating-tools,.map-tools,.distance-guide,.drawing-toolbar) {
  border-color: rgba(255,255,255,.16) !important;
  border-radius: var(--pn-radius-lg) !important;
  background: rgba(28,27,23,.96) !important;
  box-shadow: var(--pn-shadow-float) !important;
  color: #fff !important;
}
:where(.zone-frequency-panel,.zone-analysis-panel-shell) > header { border-color: rgba(255,255,255,.12) !important; }
:where(.zone-frequency-panel,.zone-analysis-panel-shell) > header h3 { font-family: "Noto Sans KR", sans-serif !important; font-weight: 600 !important; }
:where(.zone-frequency-panel,.zone-analysis-panel-shell) > header span,
.zone-frequency-drag-area>div>span, .zone-analysis-drag-area>div>span { color: var(--theme-accent-foreground) !important; font-family: inherit !important; letter-spacing: .1em !important; }
.zone-frequency-toggle, .zone-analysis-toggle {
  min-height: 44px !important;
  border: 0 !important;
  border-radius: var(--pn-radius-md) !important;
  background: var(--pn-lime) !important;
  color: var(--brand-lime-text) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}
.zone-frequency-toggle:hover, .zone-analysis-toggle:hover { background: var(--pn-lime-hover) !important; }
.zone-frequency-toggle:active, .zone-analysis-toggle:active { background: var(--pn-lime-pressed) !important; }
.zone-frequency-panel button:not(.zone-frequency-toggle),
.zone-analysis-panel-shell button:not(.zone-analysis-toggle) { border-radius: var(--pn-radius-md); }
.zone-frequency-phase-field button { min-height: 40px; border-color: rgba(255,255,255,.16); background: rgba(255,255,255,.04); }
.zone-frequency-phase-field button[aria-pressed="true"] { border-color: var(--pn-lime); background: var(--pn-lime); color: var(--brand-lime-text); }
.zone-frequency-summary>span, .zone-analysis-size-card { border-color: rgba(255,255,255,.12) !important; border-radius: var(--pn-radius-md) !important; background: rgba(255,255,255,.04) !important; }
.zone-analysis-phase-field select { min-height: 44px; border-color: rgba(255,255,255,.18); border-radius: var(--pn-radius-md); background: #282721; color: #fff; }
.panel-drag-grip { color: rgba(255,255,255,.55); }
.panel-drag-grip:hover { color: var(--theme-accent-foreground); }
.floating-tools .panel-drag-grip { border-color: rgba(255,255,255,.12); background: var(--pn-ink); color: rgba(255,255,255,.7); }
.floating-tools button { border-color: rgba(255,255,255,.12); background: var(--pn-ink); color: #fff; }
.floating-tools button:hover { background: var(--pn-lime); color: var(--brand-lime-text); }
.mobile-panel-button { border-color: rgba(255,255,255,.5); border-radius: var(--pn-radius-md); background: rgba(28,27,23,.94); color: #fff; box-shadow: var(--pn-shadow-float); }
.mobile-panel-button:hover { border-color: var(--pn-lime); background: var(--pn-ink); color: var(--theme-accent-foreground); }
.leaflet-control-zoom, .leaflet-bar { overflow: hidden; border: 1px solid rgba(255,255,255,.16) !important; border-radius: var(--pn-radius-md) !important; box-shadow: var(--pn-shadow-float) !important; }
.leaflet-bar a { background: rgba(28,27,23,.96) !important; color: #fff !important; border-color: rgba(255,255,255,.12) !important; }
.leaflet-bar a:hover { background: var(--pn-lime) !important; color: var(--brand-lime-text) !important; }
.leaflet-popup-content-wrapper {
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--pn-radius-lg);
  background: var(--pn-ink);
  box-shadow: var(--pn-shadow-modal);
}
.toast { border-radius: 10px; background: var(--pn-ink); color: #fff; box-shadow: var(--pn-shadow-float); }

/* Light product canvases */
:where(.records-stage,.leaderboard-stage,.community-stage,.shorts-stage,.buildings-stage) {
  background: var(--pn-canvas) !important;
  color: var(--pn-ink);
}
:where(.records-stage,.leaderboard-stage,.community-stage)::before { background: radial-gradient(circle at 84% 0%, rgba(229,254,84,.2), transparent 30%) !important; mask-image: linear-gradient(#000,transparent 58%); }
:where(.records-scroll,.leaderboard-scroll,.community-scroll,.shorts-scroll) { scrollbar-color: var(--pn-grey-300) transparent; }
:where(.records-hero,.full-leaderboard-hero,.community-hero,.shorts-hero) {
  border-color: var(--pn-grey-200) !important;
  background: var(--pn-canvas) !important;
}
.records-hero h2, .full-leaderboard-title h2, .community-hero h2, .shorts-hero h2 {
  color: var(--pn-ink) !important;
  font-family: "Noto Sans KR", sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: -.025em !important;
}
.records-hero-copy p, .full-leaderboard-title p, .community-hero p { color: var(--pn-grey-500) !important; }
.records-content, .full-leaderboard-content, .community-content { color: var(--pn-ink); }

/* Inputs and segmented controls */
:where(.record-search-form,.full-leaderboard-controls,.board-search,.community-editor-dialog,.profile-form) :where(input,select,textarea) {
  border: 1px solid var(--pn-grey-300) !important;
  border-radius: var(--pn-radius-md) !important;
  background: var(--pn-surface) !important;
  color: var(--pn-ink) !important;
  box-shadow: var(--pn-shadow-ambient);
}
:where(.record-search-form,.full-leaderboard-controls,.board-search,.community-editor-dialog,.profile-form) :where(input,select,textarea):focus {
  border-color: var(--pn-ink) !important;
  box-shadow: 0 0 0 3px rgba(229,254,84,.4) !important;
}
.record-search-form label>span, .leaderboard-filter-group>span, .full-leaderboard-search-label>span { color: var(--pn-ink-600) !important; font-family: inherit !important; font-weight: 600 !important; }
.record-search-form button, .community-primary {
  border: 0 !important;
  border-radius: var(--pn-radius-md) !important;
  background: var(--pn-lime) !important;
  color: var(--brand-lime-text) !important;
  font-weight: 600 !important;
}
.record-search-form button:hover, .community-primary:hover { background: var(--pn-lime-hover) !important; filter: none; }
.leaderboard-platform-tabs, .leaderboard-mode-tabs {
  height: 48px;
  padding: 4px;
  border-color: var(--pn-grey-200);
  border-radius: var(--pn-radius-md);
  background: var(--pn-grey-100);
}
.leaderboard-platform-tabs button, .leaderboard-mode-tabs button { min-height: 40px; border-radius: var(--pn-radius-sm); color: var(--pn-grey-500); font-family: inherit; font-size: 14px; font-weight: 500; }
.leaderboard-platform-tabs button:hover, .leaderboard-mode-tabs button:hover { color: var(--pn-ink); }
.leaderboard-platform-tabs button[aria-selected="true"], .leaderboard-platform-tabs button.active,
.leaderboard-mode-tabs button[aria-selected="true"], .leaderboard-mode-tabs button.active { background: var(--pn-surface); color: var(--pn-ink); box-shadow: var(--pn-shadow-ambient); }

/* Cards and data hierarchy */
:where(.recent-player-searches,.my-records-quick,.record-result-shell,.record-overview,.record-mode-card,.record-match-card,
.full-leaderboard-table,.community-empty,.board-post-detail,.comment-card,.review-card,.comment-form,.review-form,.mypage-card,.shorts-card) {
  border-color: var(--pn-grey-200) !important;
  border-radius: var(--pn-radius-card) !important;
  background: var(--pn-surface) !important;
  box-shadow: var(--pn-shadow-ambient) !important;
  color: var(--pn-ink);
}
.recent-player-searches>header strong, .my-records-quick-copy>strong { color: var(--pn-ink); }
.recent-player-searches>header p, .my-records-quick-copy>p, .recent-player-empty { color: var(--pn-grey-500); }
.recent-player-item, .my-records-quick-actions button {
  border-color: var(--pn-grey-200);
  border-radius: var(--pn-radius-md);
  background: var(--pn-surface);
  color: var(--pn-ink);
}
.recent-player-button { color: var(--pn-ink); }
.recent-player-button small, .my-records-button-copy small { color: var(--pn-grey-500); }
.recent-player-button:hover, .my-records-quick-actions button:hover { border-color: var(--pn-ink); background: var(--pn-grey-100); }
.record-result-shell.pending { border-color: var(--pn-lime); background: var(--pn-lime-50) !important; }
.record-result-shell.error { border-color: rgba(217,63,63,.35); background: #fff8f7 !important; }
.record-preview-grid article {
  border: 0;
  border-radius: var(--pn-radius-lg);
  background: var(--pn-ink);
  box-shadow: var(--pn-shadow-float);
  color: #fff;
}
.record-preview-grid article>span { color: var(--theme-accent-foreground); font-family: inherit; font-weight: 600; }
.record-preview-grid strong { color: #fff; }
.record-preview-grid p { color: rgba(255,255,255,.68); }
.record-profile-card {
  border-color: var(--pn-ink) !important;
  border-radius: var(--pn-radius-lg) var(--pn-radius-lg) 0 0 !important;
  background: var(--pn-ink) !important;
  box-shadow: var(--pn-shadow-float);
}
.record-profile-card::after { border-color: rgba(229,254,84,.16); box-shadow: 0 0 0 46px rgba(229,254,84,.025),0 0 0 92px rgba(229,254,84,.016); }
.record-profile-copy h3 { color: #fff; }
.record-profile-copy p, .record-result-meta { color: rgba(255,255,255,.68); }
.record-profile-badges span, .record-profile-badges i { border-radius: var(--pn-radius-sm); }
.record-stat-card strong, .record-mode-stat strong, .record-result-meta strong, .full-leaderboard-row>span,
.full-leaderboard-row>b { font-variant-numeric: tabular-nums; }
.record-stat-card strong, .record-mode-stat strong { color: var(--pn-ink) !important; }
.record-stat-card span, .record-mode-stat span { color: var(--pn-grey-500) !important; }

/* Leaderboard */
.full-leaderboard-content { width: min(1880px,100%); }
.full-leaderboard-table { overflow: visible; border: 1px solid var(--pn-grey-200); }
.full-leaderboard-table>header {
  position: sticky;
  top: 0;
  z-index: 20;
  border-color: var(--pn-grey-200) !important;
  background: var(--pn-ink) !important;
  color: #fff !important;
}
.full-leaderboard-row { border-color: var(--pn-grey-200) !important; background: var(--pn-surface) !important; }
.full-leaderboard-row:nth-child(even) { background: #fbfbf9 !important; }
.full-leaderboard-row:hover { background: var(--pn-lime-50) !important; }
.full-leaderboard-row>b, .full-leaderboard-row>span { color: var(--pn-ink) !important; }
.full-leaderboard-row>button, .full-leaderboard-actions button, .leaderboard-full-link {
  min-height: 38px;
  border-color: var(--pn-grey-300) !important;
  border-radius: var(--pn-radius-sm) !important;
  background: var(--pn-surface) !important;
  color: var(--pn-ink) !important;
}
.full-leaderboard-row>button:hover, .full-leaderboard-actions button:hover, .leaderboard-full-link:hover { border-color: var(--pn-ink) !important; background: var(--pn-lime) !important; color: var(--brand-lime-text) !important; }
.full-leaderboard-pagination button { min-width: 40px; min-height: 40px; border-radius: var(--pn-radius-sm); }
.leaderboard-top500-badge { border-color: var(--pn-lime); background: var(--pn-lime); color: var(--brand-lime-text); box-shadow: none; }
.leaderboard-tier-fallback { border-color: var(--pn-grey-300); color: var(--pn-grey-500); }

/* Community */
.board-categories { gap: 8px; }
.board-categories button {
  min-height: 44px;
  border-color: var(--pn-grey-200);
  border-radius: var(--pn-radius-md);
  background: var(--pn-surface);
  color: var(--pn-grey-500);
}
.board-categories button:hover { border-color: var(--pn-ink); color: var(--pn-ink); }
.board-categories button.active { border-color: var(--pn-ink); background: var(--pn-ink); color: #fff; }
.board-search>button { min-width: 64px; min-height: 44px; border: 1px solid var(--pn-ink); border-radius: var(--pn-radius-md); background: var(--pn-ink); color: #fff; font-weight: 600; }
.board-search>button:hover { background: var(--pn-ink-700); }
.board-list { overflow: hidden; border: 1px solid var(--pn-grey-200); border-radius: var(--pn-radius-card); background: var(--pn-surface); box-shadow: var(--pn-shadow-ambient); }
.board-post-card { border-color: var(--pn-grey-200); background: var(--pn-surface); color: var(--pn-ink); }
.board-post-card:hover { background: var(--pn-lime-50); }
.user-text { color: var(--pn-ink-600); }
.community-actions button, .tier-vote-form .danger, .review-form .danger { min-height: 38px; border-color: var(--pn-grey-300); border-radius: var(--pn-radius-sm); background: var(--pn-surface); color: var(--pn-ink-600); }
.community-empty { border-style: solid; }
.community-empty>b { border-color: var(--pn-ink); border-radius: var(--pn-radius-md); color: var(--pn-ink); transform: none; }

/* Dialogs */
:where(.community-modal-backdrop,.feature-community-backdrop,.auth-modal-backdrop,.feedback-modal-backdrop) {
  background: rgba(28,27,23,.62) !important;
  backdrop-filter: blur(8px);
}
:where(.community-editor-dialog,.feature-community-dialog,.auth-modal-dialog,.feedback-modal-dialog) {
  border: 1px solid var(--pn-grey-200) !important;
  border-radius: var(--pn-radius-lg) !important;
  background: var(--pn-surface) !important;
  box-shadow: var(--pn-shadow-modal) !important;
  color: var(--pn-ink) !important;
}
.community-modal-close { border-color: var(--pn-grey-200); background: var(--pn-grey-100); color: var(--pn-ink); }
.community-editor-dialog label, .profile-form label { color: var(--pn-ink-600); font-size: 13px; }
.community-editor-dialog form>div button { min-height: 44px; border-color: var(--pn-grey-300); border-radius: var(--pn-radius-md); background: var(--pn-surface); color: var(--pn-ink); }

/* Motion accessibility */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* Desktop scale */
@media (min-width: 1441px) {
  :root { --sidebar-w: 344px; }
  .service-menu-item { min-width: 126px; }
  .service-menu-item small { display: block; margin-top: 2px; color: var(--pn-grey-500); font-size: 10px; }
  .service-menu-item.active small { color: rgba(255,255,255,.62); }
  .records-content, .full-leaderboard-content { padding-right: max(48px,3vw); padding-left: max(48px,3vw); }
}
@media (min-width: 2200px) {
  body { font-size: 16px; }
  :root { --header-h: 78px; --sidebar-w: 376px; }
  .brand { padding-right: 28px; padding-left: 28px; }
  .brand-title { font-size: 25px; }
  .sidebar-head { padding: 30px 24px 20px; }
  .sidebar h2 { font-size: 38px; }
  .map-selector, .panel-section { padding-right: 20px; padding-left: 20px; }
  .service-menu-item { min-width: 150px; height: 56px; }
  .service-menu-item strong { font-size: 13px; }
  .service-menu-item small { font-size: 11px; }
  .layer-toggle { min-height: 58px; font-size: 13px; }
  .records-hero, .full-leaderboard-hero, .community-hero { padding-top: 48px; padding-bottom: 38px; }
  .records-hero h2, .full-leaderboard-title h2, .community-hero h2 { font-size: 46px !important; }
}

/* Mobile and breakpoint safety */
@media (max-width: 900px) {
  :root { --header-h: 68px; }
  .topbar { background: rgba(247,247,245,.98); }
  .brand { padding: 0 12px; border-right: 0; }
  .brand-mark { width: 38px; height: 38px; }
  .brand-title { font-size: 18px; }
  .service-menu-toggle {
    min-height: 48px;
    border: 1px solid var(--pn-grey-300);
    border-radius: var(--pn-radius-md);
    background: var(--pn-surface);
    color: var(--pn-ink);
  }
  .service-menu-toggle small { color: var(--pn-grey-500); }
  .service-menu-toggle-icon i { background: var(--pn-ink); }
  .service-menu {
    border: 1px solid var(--pn-grey-200);
    border-radius: 0 0 var(--pn-radius-lg) var(--pn-radius-lg);
    background: var(--pn-canvas);
    box-shadow: var(--pn-shadow-modal);
  }
  .service-menu-item { min-height: 56px; border-color: var(--pn-grey-200); background: var(--pn-surface); }
  .service-menu-item::after { display: none; }
  .service-menu-item small { display: block; color: var(--pn-grey-500); font-size: 10px; }
  .service-menu-item.active small { color: rgba(255,255,255,.62); }
  .sidebar {
    border-right: 1px solid var(--pn-grey-200);
    background: var(--pn-canvas);
    box-shadow: var(--pn-shadow-modal);
  }
  .mobile-close { width: 44px; height: 44px; border-radius: var(--pn-radius-md); color: var(--pn-ink); }
  .records-hero, .full-leaderboard-hero, .community-hero { padding: 24px 18px 20px !important; }
  .records-hero h2, .full-leaderboard-title h2, .community-hero h2 { font-size: 30px !important; white-space: normal; }
  .records-content, .full-leaderboard-content, .community-content { padding: 20px 16px 56px !important; }
  .record-search-form { gap: 10px; }
  .record-search-form select, .record-search-form input, .record-search-form button { min-height: 48px; border-radius: var(--pn-radius-md); }
  .full-leaderboard-row { border: 1px solid var(--pn-grey-200) !important; border-radius: var(--pn-radius-card) !important; box-shadow: var(--pn-shadow-ambient); }
  .board-post-card { border-bottom-color: var(--pn-grey-200); }
  .community-modal, .feature-community { padding: 12px; }
  .community-editor-dialog { max-height: calc(100dvh - 24px); padding: 22px 18px; }
  :where(button,.service-menu-item,.map-tab,.layer-toggle,.board-categories button) { min-height: 44px; }
}

@media (max-width: 430px) {
  .brand small, .beta-badge { display: none; }
  .brand { gap: 8px; }
  .brand-mark { width: 36px; height: 36px; }
  .top-actions { padding-right: 8px; }
  .auth-trigger { min-width: 44px; padding: 0 10px; }
  .map-tab { min-height: 50px; }
  .layer-toggle { min-height: 56px; }
  .records-hero h2, .full-leaderboard-title h2, .community-hero h2 { font-size: 28px !important; }
}