:root {
  --pack-bg: #101113;
  --pack-surface: #18191d;
  --pack-surface-2: #202228;
  --pack-paper: #f4f1ea;
  --pack-paper-2: #ebe7de;
  --pack-text: #f5f3ee;
  --pack-text-muted: #bbb6ad;
  --pack-text-faint: #827c73;
  --pack-ink: #151515;
  --pack-accent: #f5f3ee;
  --pack-accent-2: #d84c4c;
  --pack-accent-soft: rgba(255, 255, 255, 0.08);
  --pack-danger-soft: rgba(216, 76, 76, 0.12);
  --pack-warn-soft: rgba(255, 214, 87, 0.14);
  --pack-line: rgba(255, 255, 255, 0.08);
  --pack-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
  --pack-shadow-strong: 0 18px 48px rgba(0, 0, 0, 0.24);
  --pack-radius: 18px;
  --pack-radius-sm: 12px;
  --font: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: 'JetBrains Mono', monospace;
  --t: .18s ease;

  --bg: var(--pack-bg);
  --card: var(--pack-surface);
  --input: var(--pack-surface-2);
  --text: var(--pack-text);
  --t2: var(--pack-text-muted);
  --t3: var(--pack-text-faint);
  --accent: var(--pack-accent);
  --accent2: var(--pack-accent-2);
  --abg: var(--pack-accent-soft);
  --border: var(--pack-line);
  --sh: var(--pack-shadow);
  --sh2: var(--pack-shadow-strong);
  --r: var(--pack-radius);
  --rs: var(--pack-radius-sm);

  --bg-card: var(--pack-surface);
  --bg-input: var(--pack-surface-2);
  --text-2: var(--pack-text-muted);
  --text-3: var(--pack-text-faint);
  --accent-bg: var(--pack-accent-soft);
  --accent-light: #ffffff;
  --shadow: var(--pack-shadow);
  --shadow-hover: var(--pack-shadow-strong);
  --radius: var(--pack-radius);
  --radius-sm: var(--pack-radius-sm);
  --transition: var(--t);
  --ease: var(--t);
  --particle: rgba(255, 255, 255, 0.06);
  --map-land: rgba(255, 255, 255, 0.05);
  --map-stroke: rgba(255, 255, 255, 0.12);
  --map-grid: rgba(255, 255, 255, 0.04);
  --accent3: var(--text);
  --purple: #8a8a8a;
  --pink: #c76b6b;
}

[data-theme="light"] {
  --bg: var(--pack-paper);
  --card: rgba(255, 255, 255, 0.78);
  --input: var(--pack-paper-2);
  --text: var(--pack-ink);
  --t2: #4c463f;
  --t3: #7d766d;
  --border: rgba(20, 20, 20, 0.1);
  --sh: 0 10px 30px rgba(20, 20, 20, 0.06);
  --sh2: 0 16px 36px rgba(20, 20, 20, 0.1);
  --bg-card: var(--card);
  --bg-input: var(--input);
  --text-2: var(--t2);
  --text-3: var(--t3);
  --accent: #111;
  --accent-bg: rgba(17, 17, 17, 0.05);
  --shadow: var(--sh);
  --shadow-hover: var(--sh2);
  --map-land: rgba(17, 17, 17, 0.05);
  --map-stroke: rgba(17, 17, 17, 0.1);
  --map-grid: rgba(17, 17, 17, 0.03);
  --particle: rgba(17, 17, 17, 0.05);
}

[data-theme="dark"] {
  color-scheme: dark;
}

html, body {
  background: var(--bg);
  color: var(--text);
}

body {
  font-family: var(--font);
}

.header,
.nav {
  border-bottom: 1px solid rgba(127, 127, 127, 0.08) !important;
  background: color-mix(in srgb, var(--bg) 82%, transparent) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.card,
.bento-card,
.health-card,
.result-card,
.history-section,
.shortcut-section,
.item-card,
.cocktail-card,
.modal-card,
.bar-modal-card,
.ai-modal-card,
.dmodal-card,
.bar-card,
.vkpi,
.visitor-card,
.vchart-card,
.vlist-card,
.vtable-card,
.rules-toggle,
.rules-content,
.map-toggle,
.map-body,
.game,
.king-card,
.tod-card,
.bomb-range,
.hero,
.toc,
.callout,
.folder,
.table-wrap,
.template,
.warn,
.dropzone {
  border-radius: var(--radius) !important;
  border-color: var(--border) !important;
  box-shadow: var(--shadow) !important;
}

.theme-toggle,
.theme-btn,
.modal-close,
.dmodal-close,
.bar-modal-close,
.small-btn,
.clear-btn,
.tb,
.tp,
.cat-tag,
.base-tag,
.flav-tag,
.bar-city-tab,
.bar-vibe-chip,
.vrange button,
.vstats-export,
.vstats-back,
.vtable .vt-badge,
.theme-go,
.mini-arrow,
.theme-arrow,
.score-tag,
.shortcut-steps code,
.topbar a,
.toc a,
.bookmarklet,
.dice-num,
.tod-btn,
.ai-usage-pill,
.modal-tags span,
.dmodal-tags span,
.dmodal-meta span,
.card-badge,
.vinsight {
  border-radius: 999px !important;
}

/* .page-theme-mark: render as plain emoji/text, not grey pill */
.page-theme-mark {
  display: inline;
  width: auto;
  min-width: 0;
  height: auto;
  border: 0;
  border-radius: 0;
  color: inherit;
  background: transparent;
  font-family: inherit;
  font-size: 1em;
  font-weight: inherit;
  line-height: inherit;
  vertical-align: middle;
  opacity: 1;
  padding: 0;
  box-shadow: none;
  filter: none;
}

/* .site-mark: brand logo image — no border, no background, no frame */
.site-mark,
.brand-icon.site-mark {
  display: inline-block;
  width: 18px;
  height: 28px;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  background-image: none;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  box-shadow: none;
  filter: none;
  padding: 0;
  outline: 0;
  animation: none;
  font-size: unset;
  opacity: 1;
  vertical-align: middle;
  flex: none;
  transform: none;
  transform-origin: center center;
}

.footer-theme-mark {
  width: 1rem;
  min-width: 1rem;
  height: 1rem;
  font-size: .58rem;
  opacity: .46;
}

.brand-name {
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  color: var(--text) !important;
}

.nav-home,
.footer-brand,
.brand-name,
.brand-sub {
  font-weight: 800 !important;
  letter-spacing: .01em;
  text-transform: none;
}

.nav-title,
.section-label,
.ai-usage-label,
.daily-label,
.cocktail-label,
.count-bar,
.footer,
.quote-from {
  letter-spacing: .06em;
  text-transform: uppercase;
}

.big-btn,
.assess-btn,
.ai-modal-actions button[type="submit"],
.tb-accent,
.tb-play,
.bar-map-btn,
.base-tag.active,
.bar-city-tab.active,
.tp.active,
.dice-num.active,
.tab.active,
.tod-truth.active,
.tod-dare.active,
.bookmarklet,
.vrange button.active {
  background: var(--accent) !important;
  color: var(--bg) !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

.flav-tag.active,
.ai-usage-pill,
.score-yellow,
.vinsight,
.card-badge,
.modal-tags span,
.dmodal-tags span,
.dmodal-meta span,
.vt-badge.new,
.bar-tag,
.score-tag,
.ok {
  background: var(--accent-bg) !important;
  color: var(--text) !important;
  border: 1px solid rgba(127, 127, 127, 0.08) !important;
}

.score-yellow {
  background: var(--pack-warn-soft) !important;
}

.score-red,
.bomb-msg.boom,
.warn,
.parse-msg.err,
.trend-delta.down {
  color: var(--accent2) !important;
}

.score-red,
.warn {
  background: var(--pack-danger-soft) !important;
}

.score-green,
.bomb-msg.safe,
.parse-msg.ok,
.trend-delta.up {
  color: var(--text) !important;
}

.score-green,
.vt-badge.ret {
  background: rgba(127, 127, 127, 0.1) !important;
  color: var(--text) !important;
  border: 1px solid rgba(127, 127, 127, 0.08) !important;
}

.search-input,
.tool-input,
.tool-input-sm,
.notes-mini,
.player-input,
.bomb-input,
.ai-form-grid input,
.ai-form-grid select,
.input-group input,
.input-group select,
.vt-search,
.day-switch select,
.pw-len-row input[type="range"] {
  border-radius: var(--radius-sm) !important;
  border-color: rgba(127, 127, 127, 0.08) !important;
  box-shadow: none !important;
}

pre,
code,
.shortcut-steps code,
.template {
  background: var(--bg-input) !important;
  border: 1px solid rgba(127, 127, 127, 0.08) !important;
  box-shadow: none !important;
}

.ai-usage-bar,
.ai-usage-bar i,
.vbar-track,
.vbar-track i,
.vret-bar,
.vret-bar i,
.visitor-map-wrap,
.pack-shadow,
.vlg i,
.vdot,
.dmodal-color {
  border-radius: 999px !important;
}

.ai-usage-bar i,
.vbar-track i,
.vret-ret,
.vdot-ret {
  background: var(--text) !important;
}

.ai-usage-bar.warn i,
.vret-new,
.vdot-new {
  background: var(--accent2) !important;
}

.spark polyline {
  stroke-linejoin: round !important;
  stroke-linecap: round !important;
}

.dropzone:hover,
.dropzone.drag,
.toc a:hover,
.tb:hover,
.tp:hover,
.small-btn:hover,
.clear-btn:hover,
.base-tag:hover,
.flav-tag:hover,
.bar-city-tab:hover,
.rules-toggle:hover,
.map-toggle:hover,
.bookmarklet:hover,
.vstats-export:hover,
.vstats-back:hover,
.vrange button:hover {
  transform: none !important;
  box-shadow: none !important;
  background: var(--accent-bg) !important;
  color: var(--text) !important;
  border-color: transparent !important;
}

.hero,
.bookmarklet,
.big-btn,
.assess-btn,
.tb,
.tp,
.small-btn,
.clear-btn,
.base-tag,
.flav-tag,
.bar-city-tab,
.bar-card,
.cocktail-card,
.item-card,
.bento-card,
.dropzone,
.rules-toggle,
.map-toggle,
.theme-btn,
.theme-toggle,
.modal-close,
.bar-modal-close,
.dmodal-close,
.tod-btn,
.dice-num,
.card,
.ai-modal-card,
.dmodal-card {
  transition: background var(--transition), color var(--transition), border-color var(--transition), box-shadow var(--transition), opacity var(--transition) !important;
}

.header,
.nav,
.ai-modal,
.dmodal,
.modal-overlay,
.bar-modal-overlay {
  -webkit-backdrop-filter: blur(10px) !important;
  backdrop-filter: blur(10px) !important;
}

.ai-modal,
.dmodal,
.modal-overlay,
.bar-modal-overlay {
  background: rgba(12, 12, 14, 0.52) !important;
}

.daily-quote,
.footer,
.bar-card,
.theme-emoji,
.tool-icon,
.mini-icon {
  color: var(--text);
}

.theme-emoji,
.tool-icon,
.mini-icon,
.card-emoji {
  font-style: normal;
}

.theme-emoji,
.tool-icon,
.page-theme-mark {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  padding: 0 !important;
}

::-webkit-scrollbar-thumb {
  background: rgba(127, 127, 127, 0.22);
  border-radius: 999px !important;
}

::selection {
  background: rgba(255, 214, 87, 0.45);
  color: #111;
}

.nav-home, .footer-brand, .daily-label { display: inline-flex; align-items: center; gap: .42rem; }
.nav-home .site-mark,
.nav-home .brand-icon.site-mark,
.brand .site-mark,
.brand .brand-icon.site-mark {
  width: 18px !important;
  height: 28px !important;
  background-size: contain !important;
  background-position: center !important;
  flex: 0 0 auto;
}
.footer-theme-mark { margin-right: 0; }
[data-theme="dark"] #monthFilters .cat-tag,
[data-theme="dark"] #sceneFilters .cat-tag {
  background: #18191d !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: #bbb6ad !important;
}

[data-theme="dark"] #monthFilters .cat-tag.active,
[data-theme="dark"] #sceneFilters .cat-tag.active,
[data-theme="dark"] .cat-tag.active {
  background: #d4a574 !important;
  border-color: #d4a574 !important;
  color: #111 !important;
}

[data-theme="light"] .cat-tag.active {
  background: #b07d4f !important;
  border-color: #b07d4f !important;
  color: #fff !important;
}

.theme-emoji, .tool-icon { align-self: center; }