/* Catppuccin official palette: https://catppuccin.com/palette/
   Color roles live here; App.css remains responsible for component layout.
   Mocha is also the CSS fallback before the preference bootstrap runs. */
:root,
:root[data-theme='mocha'] {
  color-scheme: dark;
  --ctp-rosewater: #f5e0dc;
  --ctp-flamingo: #f2cdcd;
  --ctp-pink: #f5c2e7;
  --ctp-mauve: #cba6f7;
  --ctp-red: #f38ba8;
  --ctp-maroon: #eba0ac;
  --ctp-peach: #fab387;
  --ctp-yellow: #f9e2af;
  --ctp-green: #a6e3a1;
  --ctp-teal: #94e2d5;
  --ctp-sky: #89dceb;
  --ctp-sapphire: #74c7ec;
  --ctp-blue: #89b4fa;
  --ctp-lavender: #b4befe;
  --ctp-text: #cdd6f4;
  --ctp-subtext1: #bac2de;
  --ctp-subtext0: #a6adc8;
  --ctp-overlay2: #9399b2;
  --ctp-overlay1: #7f849c;
  --ctp-overlay0: #6c7086;
  --ctp-surface2: #585b70;
  --ctp-surface1: #45475a;
  --ctp-surface0: #313244;
  --ctp-base: #1e1e2e;
  --ctp-mantle: #181825;
  --ctp-crust: #11111b;
}

:root[data-theme='macchiato'] {
  color-scheme: dark;
  --ctp-rosewater: #f4dbd6;
  --ctp-flamingo: #f0c6c6;
  --ctp-pink: #f5bde6;
  --ctp-mauve: #c6a0f6;
  --ctp-red: #ed8796;
  --ctp-maroon: #ee99a0;
  --ctp-peach: #f5a97f;
  --ctp-yellow: #eed49f;
  --ctp-green: #a6da95;
  --ctp-teal: #8bd5ca;
  --ctp-sky: #91d7e3;
  --ctp-sapphire: #7dc4e4;
  --ctp-blue: #8aadf4;
  --ctp-lavender: #b7bdf8;
  --ctp-text: #cad3f5;
  --ctp-subtext1: #b8c0e0;
  --ctp-subtext0: #a5adcb;
  --ctp-overlay2: #939ab7;
  --ctp-overlay1: #8087a2;
  --ctp-overlay0: #6e738d;
  --ctp-surface2: #5b6078;
  --ctp-surface1: #494d64;
  --ctp-surface0: #363a4f;
  --ctp-base: #24273a;
  --ctp-mantle: #1e2030;
  --ctp-crust: #181926;
}

:root[data-theme='frappe'] {
  color-scheme: dark;
  --ctp-rosewater: #f2d5cf;
  --ctp-flamingo: #eebebe;
  --ctp-pink: #f4b8e4;
  --ctp-mauve: #ca9ee6;
  --ctp-red: #e78284;
  --ctp-maroon: #ea999c;
  --ctp-peach: #ef9f76;
  --ctp-yellow: #e5c890;
  --ctp-green: #a6d189;
  --ctp-teal: #81c8be;
  --ctp-sky: #99d1db;
  --ctp-sapphire: #85c1dc;
  --ctp-blue: #8caaee;
  --ctp-lavender: #babbf1;
  --ctp-text: #c6d0f5;
  --ctp-subtext1: #b5bfe2;
  --ctp-subtext0: #a5adce;
  --ctp-overlay2: #949cbb;
  --ctp-overlay1: #838ba7;
  --ctp-overlay0: #737994;
  --ctp-surface2: #626880;
  --ctp-surface1: #51576d;
  --ctp-surface0: #414559;
  --ctp-base: #303446;
  --ctp-mantle: #292c3c;
  --ctp-crust: #232634;
}

:root[data-theme='latte'] {
  color-scheme: light;
  --ctp-rosewater: #dc8a78;
  --ctp-flamingo: #dd7878;
  --ctp-pink: #ea76cb;
  --ctp-mauve: #8839ef;
  --ctp-red: #d20f39;
  --ctp-maroon: #e64553;
  --ctp-peach: #fe640b;
  --ctp-yellow: #df8e1d;
  --ctp-green: #40a02b;
  --ctp-teal: #179299;
  --ctp-sky: #04a5e5;
  --ctp-sapphire: #209fb5;
  --ctp-blue: #1e66f5;
  --ctp-lavender: #7287fd;
  --ctp-text: #4c4f69;
  --ctp-subtext1: #5c5f77;
  --ctp-subtext0: #6c6f85;
  --ctp-overlay2: #7c7f93;
  --ctp-overlay1: #8c8fa1;
  --ctp-overlay0: #9ca0b0;
  --ctp-surface2: #acb0be;
  --ctp-surface1: #bcc0cc;
  --ctp-surface0: #ccd0da;
  --ctp-base: #eff1f5;
  --ctp-mantle: #e6e9ef;
  --ctp-crust: #dce0e8;
}

:root {
  --theme-accent: var(--ctp-mauve);
  --theme-accent-ink: var(--ctp-crust);
  --theme-accent-soft: color-mix(in srgb, var(--theme-accent) 13%, var(--ctp-base));
  --theme-success-soft: color-mix(in srgb, var(--ctp-green) 12%, var(--ctp-base));
  --theme-error-soft: color-mix(in srgb, var(--ctp-red) 10%, var(--ctp-base));
  --theme-border: var(--ctp-surface0);
  --theme-shadow: color-mix(in srgb, var(--ctp-crust) 45%, transparent);
  --theme-scrim: color-mix(in srgb, var(--ctp-crust) 76%, transparent);
  /* Labels on photos must remain readable independently of the chosen flavor. */
  --theme-photo-ink: #cdd6f4;
  --theme-photo-scrim: #11111bbf;
  --theme-photo-border: #cdd6f44d;
  background: var(--ctp-base);
  color: var(--ctp-text);
  accent-color: var(--theme-accent);
  scrollbar-color: var(--ctp-surface2) var(--ctp-base);
}

:root[data-theme='latte'] {
  --theme-accent-ink: var(--ctp-base);
  --theme-shadow: color-mix(in srgb, var(--ctp-text) 16%, transparent);
  --theme-scrim: color-mix(in srgb, var(--ctp-text) 58%, transparent);
}

body { background: var(--ctp-base); color: var(--ctp-text); }
::selection { background: var(--theme-accent); color: var(--theme-accent-ink); }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible {
  outline-color: var(--theme-accent);
}

/* Navigation and flavor selector */
.sidebar { background: var(--ctp-crust); color: var(--ctp-text); border-color: var(--theme-border); }
.brand-dot, .tiny-spark { color: var(--theme-accent); }
.brand-mark { background: var(--theme-accent); color: var(--theme-accent-ink); }
.sidebar-label, .help-link { color: var(--ctp-subtext0); }
.nav-item { color: var(--ctp-subtext1); }
.nav-item:hover { background: var(--ctp-surface0); }
.nav-item.active { color: var(--theme-accent); background: var(--theme-accent-soft); }
.nav-count { border-color: var(--ctp-surface1); }
.sidebar-note { border-color: var(--theme-border); background: linear-gradient(135deg, var(--ctp-surface0), var(--ctp-mantle)); }
.sidebar-note p { color: var(--ctp-subtext0); }
.sidebar-note button { color: var(--theme-accent); }
.sidebar-bottom { color: var(--ctp-subtext1); border-color: var(--theme-border); }
.network-dot { background: var(--ctp-green); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ctp-green) 10%, transparent); }
.disconnected { background: var(--ctp-peach); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ctp-peach) 10%, transparent); }
.prototype { color: var(--ctp-green); background: var(--theme-success-soft); border-color: var(--ctp-surface1); }
.topbar { background: var(--ctp-mantle); border-color: var(--theme-border); }
.breadcrumbs, .network-pill { color: var(--ctp-subtext0); }
.breadcrumbs span { color: var(--ctp-text); }
.wallet-button { background: var(--ctp-base); color: var(--ctp-text); border-color: var(--ctp-surface1); }
.wallet-avatar { background: var(--theme-accent-soft); color: var(--theme-accent); }
.wallet-button > svg { color: var(--ctp-subtext0); }
.theme-picker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--ctp-base);
  border: 1px solid var(--ctp-surface1);
  border-radius: 6px;
  color: var(--theme-accent);
}
.theme-picker select {
  border: 0;
  border-radius: 2px;
  background: var(--ctp-base);
  color: var(--ctp-text);
  font-size: 11px;
  cursor: pointer;
  min-height: 22px;
  max-width: 110px;
}
.theme-picker:focus-within { border-color: var(--theme-accent); }
.theme-picker option { background: var(--ctp-base); color: var(--ctp-text); }

/* Hero and actions */
.hero { background: linear-gradient(125deg, var(--ctp-mantle), var(--theme-accent-soft)); border-color: var(--theme-border); }
.eyebrow { color: var(--ctp-subtext1); }
.eyebrow > span { background: var(--theme-accent); }
.hero h1 { color: var(--ctp-text); }
.hero h1 > span { color: var(--theme-accent); }
.hero-copy > p, .hero-foot { color: var(--ctp-subtext0); }
.button.dark { background: var(--theme-accent); color: var(--theme-accent-ink); }
.button.dark:hover { background: color-mix(in srgb, var(--theme-accent) 80%, var(--ctp-text)); }
.text-button { color: var(--ctp-subtext1); }
.text-button:hover { color: var(--theme-accent); }
.orbit { border-color: color-mix(in srgb, var(--theme-accent) 20%, transparent); }
.orbit-spark { color: var(--ctp-lavender); }
.hero-card .wiki-card { box-shadow: 0 12px 25px var(--theme-shadow); }
.floating-label { background: var(--ctp-surface0); color: var(--ctp-subtext1); border-color: var(--ctp-surface1); box-shadow: 0 3px 12px var(--theme-shadow); }
.label-bottom svg:first-child { color: var(--ctp-yellow); }

/* Network metrics and opt-in miner */
.metrics > div { border-color: var(--theme-border); }
.metric-icon { background: var(--ctp-surface0); color: var(--ctp-lavender); }
.metrics > div > div > span, .metrics small { color: var(--ctp-subtext0); }
.metric-icon.leaf { color: var(--ctp-green); background: var(--theme-success-soft); }
.mining-panel { background: var(--ctp-mantle); border-color: var(--theme-border); }
.section-eyebrow, .mining-description p, .mining-meta, .miner-display span { color: var(--ctp-subtext0); }
.idle-dot { background: var(--ctp-overlay1); }
.miner-controls { border-color: var(--theme-border); }
.signal-bars i { background: var(--ctp-surface2); }
.signal-bars i:nth-child(3n) { background: var(--ctp-mauve); }
.signal-bars.running i { background: var(--ctp-green); }
.intensity, .consent { color: var(--ctp-subtext1); }
.intensity select { background: var(--ctp-base); color: var(--ctp-text); border-color: var(--ctp-surface1); }
.consent input { accent-color: var(--ctp-green); }
.lime { background: var(--ctp-green); color: var(--theme-accent-ink); }
.lime:hover { background: color-mix(in srgb, var(--ctp-green) 80%, var(--ctp-text)); }
.miner-footnote { color: var(--ctp-subtext0); }
.mining-stop { background: var(--theme-error-soft); color: var(--ctp-red); border-color: var(--ctp-surface1); }
.hash-line { color: var(--ctp-green); background: var(--ctp-base); }

/* Collection filters and encyclopedia cards */
.section-heading p { color: var(--ctp-subtext0); }
.section-heading > .text-button { color: var(--theme-accent); }
.count-badge { color: var(--ctp-subtext1); border-color: var(--ctp-surface1); }
.filter-bar { border-color: var(--theme-border); }
.category-tabs button { color: var(--ctp-subtext0); }
.category-tabs button:hover { background: var(--ctp-surface0); }
.category-tabs button.selected { color: var(--theme-accent); background: var(--theme-accent-soft); }
.search-input { background: var(--ctp-mantle); color: var(--ctp-subtext0); border-color: var(--ctp-surface1); }
.search-input input { color: var(--ctp-text); }
.search-input input::placeholder { color: var(--ctp-subtext0); }
.wiki-card { --rarity-color: var(--ctp-green); background: var(--ctp-mantle); color: var(--ctp-text); border-color: var(--ctp-surface1); box-shadow: 0 3px 4px var(--theme-shadow); }
.wiki-card.legendary { --rarity-color: var(--ctp-yellow); border-color: color-mix(in srgb, var(--ctp-yellow) 55%, var(--ctp-surface0)); }
.wiki-card.epic { --rarity-color: var(--ctp-mauve); }
.wiki-card.rare { --rarity-color: var(--ctp-blue); }
.wiki-card:hover { border-color: var(--rarity-color); box-shadow: 0 9px 20px var(--theme-shadow); }
.wiki-card .card-top { color: var(--rarity-color); background: color-mix(in srgb, var(--rarity-color) 12%, var(--ctp-mantle)); }
.card-top > span:last-child { color: var(--ctp-subtext0); }
.card-art { color: var(--ctp-teal); background: radial-gradient(ellipse at top right, var(--ctp-surface1), var(--ctp-crust)); }
.art-space { background: var(--ctp-crust); }
.art-people { background: var(--ctp-surface0); }
.art-science { background: var(--ctp-base); }
.art-nature { background: color-mix(in srgb, var(--ctp-teal) 15%, var(--ctp-crust)); }
.card-art::after { background: linear-gradient(transparent 70%, var(--theme-photo-scrim)); }
.card-category { color: var(--theme-photo-ink); background: var(--theme-photo-scrim); border-color: var(--theme-photo-border); }
.card-title > svg { color: var(--ctp-subtext0); }
.card-content > p { color: var(--ctp-subtext0); }
.card-stats { color: var(--ctp-subtext1); border-color: var(--theme-border); }
.card-stats svg { color: var(--ctp-lavender); }
.card-bottom { background: var(--ctp-crust); color: var(--ctp-subtext0); border-color: var(--theme-border); }
.card-list-caption, .card-list-caption > span:first-child { color: var(--ctp-subtext0); }
.caption-dot { background: var(--ctp-green); }
.empty-state { background: var(--ctp-mantle); color: var(--ctp-subtext0); border-color: var(--ctp-surface1); }
.empty-state > svg { color: var(--ctp-lavender); }
.empty-state h3 { color: var(--ctp-text); }

/* Explorer, notices, and footer */
.outline { background: var(--ctp-mantle); color: var(--theme-accent); border-color: var(--ctp-surface1); }
.explorer-note { background: var(--theme-accent-soft); color: var(--ctp-subtext1); border-color: var(--ctp-surface1); }
.table-scroll { border-color: var(--theme-border); }
table { background: var(--ctp-mantle); }
th { color: var(--ctp-subtext1); background: var(--ctp-surface0); }
td { color: var(--ctp-subtext1); border-color: var(--theme-border); }
td strong { color: var(--ctp-text); }
td small { color: var(--ctp-subtext0); }
tbody tr:hover { background: var(--ctp-surface0); }
.rarity-tag { color: var(--ctp-green); background: var(--theme-success-soft); }
.rarity-tag.legendary { color: var(--ctp-yellow); background: color-mix(in srgb, var(--ctp-yellow) 12%, var(--ctp-base)); }
.rarity-tag.epic { color: var(--ctp-mauve); background: var(--theme-accent-soft); }
.rarity-tag.rare { color: var(--ctp-blue); background: color-mix(in srgb, var(--ctp-blue) 12%, var(--ctp-base)); }
.journal > div { color: var(--ctp-subtext1); background: var(--ctp-mantle); border-color: var(--theme-border); }
.muted { color: var(--ctp-subtext0); }
.error-banner { background: var(--theme-error-soft); color: var(--ctp-red); border-color: color-mix(in srgb, var(--ctp-red) 35%, var(--ctp-surface0)); }
.error-banner button { color: var(--ctp-red); }
.transfer-error { color: var(--ctp-red); background: var(--theme-error-soft); }
footer { color: var(--ctp-subtext0); border-color: var(--theme-border); }
footer > a > svg, .footer-star { color: var(--ctp-lavender); }
footer > p { color: var(--ctp-subtext0); }
.toast { background: var(--ctp-surface0); color: var(--ctp-text); border-color: var(--ctp-surface2); box-shadow: 0 6px 35px var(--theme-shadow); }
.toast > span { color: var(--ctp-green); background: var(--theme-success-soft); }
.toast > button { color: var(--ctp-subtext1); }

/* Wallet, guide, transfers, and card details */
.modal-backdrop { background: var(--theme-scrim); }
.modal { background: var(--ctp-base); color: var(--ctp-text); border-color: var(--ctp-surface1); box-shadow: 0 20px 70px var(--theme-shadow); }
.modal-close { background: var(--ctp-surface0); color: var(--ctp-subtext1); }
.modal-icon { background: var(--theme-accent-soft); color: var(--theme-accent); }
.guide-steps > div > span { color: var(--ctp-lavender); }
.guide-steps p { color: var(--ctp-subtext0); }
.info-box { background: var(--ctp-mantle); border-color: var(--theme-border); }
.info-box strong { color: var(--ctp-lavender); }
.info-box p { color: var(--ctp-subtext0); }
.field-label { color: var(--ctp-subtext0); }
.address-box { color: var(--ctp-subtext1); background: var(--ctp-mantle); border-color: var(--ctp-surface1); }
.wallet-count { color: var(--ctp-lavender); }
.recipient-input { color: var(--ctp-text); background: var(--ctp-mantle); border-color: var(--ctp-surface1); }
.recipient-input::placeholder { color: var(--ctp-subtext0); }
.detail-copy > p { color: var(--ctp-subtext1); }
.detail-facts { color: var(--ctp-subtext0); border-color: var(--theme-border); }
.detail-facts strong { color: var(--ctp-text); }
.detail-links a { color: var(--ctp-blue); }
.detail-copy p.attribution { color: var(--ctp-subtext0); }

/* Latte's green/yellow accents need darker ink for small labels and buttons. */
:root[data-theme='latte'] .lime {
  color: var(--ctp-text);
  background: color-mix(in srgb, var(--ctp-green) 18%, var(--ctp-base));
}
:root[data-theme='latte'] .lime:hover {
  background: color-mix(in srgb, var(--ctp-green) 26%, var(--ctp-base));
}
:root[data-theme='latte'] .wiki-card .card-top {
  color: color-mix(in srgb, var(--rarity-color) 45%, var(--ctp-text));
}
:root[data-theme='latte'] .rarity-tag {
  color: var(--ctp-text);
}

@media (max-width: 1000px) {
  .top-actions { gap: 10px; }
  .theme-picker { padding: 6px 8px; gap: 6px; }
  .theme-picker select { font-size: 10px; }
  .top-actions .network-pill { display: none; }
}
@media (max-width: 560px) {
  .topbar .breadcrumbs { display: none; }
  .topbar .top-actions { width: 100%; justify-content: space-between; }
  .theme-picker { min-height: 36px; }
  .theme-picker select { font-size: 12px; }
}