/* Shared theme tokens for tracker + account pages */
:root,
[data-theme="stormreach-night"] {
  color-scheme: dark;
  --bg: #1a1612;
  --bg-2: #241f19;
  --panel: #2c261f;
  --panel-2: #243044;
  --panel-edge: #4a3f32;
  --border: #4a3f32;
  --parchment: #efe6d4;
  --parchment-2: #e4d8c0;
  --ink: #1c1712;
  --ink-soft: #5a4e42;
  --gold: #c9a227;
  --gold-dim: #8a7020;
  --gold-bright: #e6c86a;
  --accent: #2f6b4f;
  --accent-2: #245541;
  --accent-hover: #3a8260;
  --danger: #a33b3b;
  --ok: #3d9a6a;
  --heroic: #1a8a8a;
  --raid: #f0c4c4;
  --solo: #c8ebe8;
  --text: #f3ebe0;
  --muted: #b5a894;
  --topbar-from: #3a3127;
  --topbar-to: #241f19;
  --banner-from: #322a22;
  --banner-to: #241f19;
  --btn-hover: #3a3228;
  --glow-1: rgba(201, 162, 39, 0.12);
  --glow-2: rgba(47, 107, 79, 0.15);
  --shadow: rgba(0, 0, 0, 0.35);
  --completed-bg: #d8efd8;
  --completed-ink: #4a5a4a;
  --control-border: #b9a888;
  --note-bg: #fff8e6;
  --note-muted: #7a6a50;
  --table-rule: #d2c4a8;
  --table-rule-strong: #b9a888;
  --wiki-link: #6b4a12;
  --danger-soft: #ffb4b4;
  --danger-panel: #4a1c1c;
  --ghost-border: #6a3a3a;
  --slider-track: linear-gradient(90deg, #3d342a, #5a4a30);
  --slider-knob-border: #fff3c4;
  --pack-required: #8dffb8;
  --pack-heroic: #7ef0f0;
  --pack-reset: #ff9b9b;
  --card-bottom: #151c27;
  --font-display: "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --font-ui: Verdana, Geneva, sans-serif;
}

[data-theme="sharn-skyline"] {
  color-scheme: dark;
  --bg: #0d1520;
  --bg-2: #121c2b;
  --panel: #182536;
  --panel-2: #1e2f44;
  --panel-edge: #2f4560;
  --border: #2f4560;
  --parchment: #e8eef6;
  --parchment-2: #d9e3f0;
  --ink: #122033;
  --ink-soft: #4a6078;
  --gold: #7eb6ff;
  --gold-dim: #4d82c4;
  --gold-bright: #b7d7ff;
  --accent: #3d8bfd;
  --accent-2: #2a6fd6;
  --accent-hover: #5aa0ff;
  --danger: #d64545;
  --ok: #3d9a6a;
  --heroic: #3aa0c8;
  --raid: #f0c8d0;
  --solo: #c8e4f5;
  --text: #e8eef7;
  --muted: #9aabbf;
  --topbar-from: #1a2a40;
  --topbar-to: #101a28;
  --banner-from: #162234;
  --banner-to: #101a28;
  --btn-hover: #22344c;
  --glow-1: rgba(61, 139, 253, 0.18);
  --glow-2: rgba(30, 80, 140, 0.2);
  --shadow: rgba(0, 0, 0, 0.4);
  --completed-bg: #d5ebe0;
  --completed-ink: #355545;
  --control-border: #8aa0b8;
  --note-bg: #eef5ff;
  --note-muted: #5a7088;
  --table-rule: #c5d2e2;
  --table-rule-strong: #8aa0b8;
  --wiki-link: #1f4f8a;
  --danger-soft: #ffb0b0;
  --danger-panel: #4a1c1c;
  --ghost-border: #6a3a3a;
  --slider-track: linear-gradient(90deg, #1a2a40, #3d5a80);
  --slider-knob-border: #d6e8ff;
  --pack-required: #8dffb8;
  --pack-heroic: #7ec8ff;
  --pack-reset: #ff9b9b;
  --card-bottom: #0f1724;
  --font-display: "Trebuchet MS", "Segoe UI", sans-serif;
  --font-ui: "Segoe UI", "Trebuchet MS", sans-serif;
}

[data-theme="xendrik-canopy"] {
  color-scheme: dark;
  --bg: #0f1a14;
  --bg-2: #15241c;
  --panel: #1b2e24;
  --panel-2: #234033;
  --panel-edge: #355a46;
  --border: #355a46;
  --parchment: #e9f0e4;
  --parchment-2: #d8e4d0;
  --ink: #142018;
  --ink-soft: #4a6354;
  --gold: #9fd27a;
  --gold-dim: #6f9a52;
  --gold-bright: #c5ef9f;
  --accent: #3d9a6a;
  --accent-2: #2d7a52;
  --accent-hover: #4db57f;
  --danger: #c45a4a;
  --ok: #4db57f;
  --heroic: #2f9e8a;
  --raid: #efd0c8;
  --solo: #d0ebe0;
  --text: #e6f2ea;
  --muted: #9bb5a6;
  --topbar-from: #1f3a2c;
  --topbar-to: #13241b;
  --banner-from: #1a3226;
  --banner-to: #13241b;
  --btn-hover: #274636;
  --glow-1: rgba(63, 154, 106, 0.18);
  --glow-2: rgba(120, 160, 60, 0.12);
  --shadow: rgba(0, 0, 0, 0.4);
  --completed-bg: #d5efd8;
  --completed-ink: #355545;
  --control-border: #8aab90;
  --note-bg: #eef8ee;
  --note-muted: #567060;
  --table-rule: #c5d8c4;
  --table-rule-strong: #8aab90;
  --wiki-link: #2a5a38;
  --danger-soft: #ffb4a8;
  --danger-panel: #4a221c;
  --ghost-border: #6a3a3a;
  --slider-track: linear-gradient(90deg, #1a3226, #3d6a4a);
  --slider-knob-border: #e4ffd4;
  --pack-required: #9dffc0;
  --pack-heroic: #7ef0d8;
  --pack-reset: #ff9b9b;
  --card-bottom: #101a14;
  --font-display: Georgia, "Palatino Linotype", serif;
  --font-ui: Verdana, Geneva, sans-serif;
}

[data-theme="cannith-forge"] {
  color-scheme: dark;
  --bg: #161210;
  --bg-2: #211a16;
  --panel: #2a211c;
  --panel-2: #352820;
  --panel-edge: #5a4030;
  --border: #5a4030;
  --parchment: #f2e6d6;
  --parchment-2: #e6d5bf;
  --ink: #1c1410;
  --ink-soft: #6a5040;
  --gold: #e08a3c;
  --gold-dim: #a85f24;
  --gold-bright: #ffb06a;
  --accent: #c45a28;
  --accent-2: #9a3f18;
  --accent-hover: #e07038;
  --danger: #c43b3b;
  --ok: #6a9a4a;
  --heroic: #c87838;
  --raid: #f0d0c0;
  --solo: #ebe0d0;
  --text: #f4ebe2;
  --muted: #b8a090;
  --topbar-from: #3a2a20;
  --topbar-to: #1c1512;
  --banner-from: #30241c;
  --banner-to: #1c1512;
  --btn-hover: #3f2e24;
  --glow-1: rgba(224, 138, 60, 0.16);
  --glow-2: rgba(160, 60, 20, 0.14);
  --shadow: rgba(0, 0, 0, 0.45);
  --completed-bg: #e4efd0;
  --completed-ink: #4a5535;
  --control-border: #b89878;
  --note-bg: #fff0e0;
  --note-muted: #7a5a40;
  --table-rule: #d8c4ac;
  --table-rule-strong: #b89878;
  --wiki-link: #8a4010;
  --danger-soft: #ffb0a0;
  --danger-panel: #4a1c18;
  --ghost-border: #6a3a30;
  --slider-track: linear-gradient(90deg, #2a1c14, #8a4a20);
  --slider-knob-border: #ffd4a8;
  --pack-required: #c8ef8a;
  --pack-heroic: #ffc080;
  --pack-reset: #ff9b9b;
  --card-bottom: #120e0c;
  --font-display: "Trebuchet MS", "Segoe UI", sans-serif;
  --font-ui: Verdana, Geneva, sans-serif;
}

[data-theme="reapers-vigil"] {
  color-scheme: dark;
  --bg: #100c0e;
  --bg-2: #1a1216;
  --panel: #24181e;
  --panel-2: #302028;
  --panel-edge: #5a3040;
  --border: #5a3040;
  --parchment: #f0e6e8;
  --parchment-2: #e2d4d8;
  --ink: #1a1014;
  --ink-soft: #6a4854;
  --gold: #e85a6a;
  --gold-dim: #a83848;
  --gold-bright: #ff8a98;
  --accent: #c43b55;
  --accent-2: #8a2840;
  --accent-hover: #e05068;
  --danger: #ff4d5e;
  --ok: #5a9a6a;
  --heroic: #b05070;
  --raid: #f0c8d0;
  --solo: #e8d8e0;
  --text: #f5e8ec;
  --muted: #b898a0;
  --topbar-from: #3a1c28;
  --topbar-to: #160e12;
  --banner-from: #2c1620;
  --banner-to: #160e12;
  --btn-hover: #3a2230;
  --glow-1: rgba(232, 90, 106, 0.16);
  --glow-2: rgba(80, 20, 40, 0.25);
  --shadow: rgba(0, 0, 0, 0.5);
  --completed-bg: #dfead8;
  --completed-ink: #3f4f3a;
  --control-border: #b88898;
  --note-bg: #ffe8ec;
  --note-muted: #7a4858;
  --table-rule: #d8c0c8;
  --table-rule-strong: #b88898;
  --wiki-link: #8a2038;
  --danger-soft: #ffb0b8;
  --danger-panel: #4a1018;
  --ghost-border: #6a3040;
  --slider-track: linear-gradient(90deg, #2a1018, #8a3048);
  --slider-knob-border: #ffd0d8;
  --pack-required: #9dffc0;
  --pack-heroic: #ffb0c0;
  --pack-reset: #ff8088;
  --card-bottom: #0e080a;
  --font-display: Georgia, "Times New Roman", serif;
  --font-ui: Verdana, Geneva, sans-serif;
}

[data-theme="feywild-glade"] {
  color-scheme: dark;
  --bg: #0e1a1c;
  --bg-2: #142426;
  --panel: #1a3034;
  --panel-2: #223c42;
  --panel-edge: #3a6068;
  --border: #3a6068;
  --parchment: #e6f4f2;
  --parchment-2: #d2e8e4;
  --ink: #102022;
  --ink-soft: #4a6870;
  --gold: #5fd0c0;
  --gold-dim: #3a9a8e;
  --gold-bright: #9aefe4;
  --accent: #2f9e8a;
  --accent-2: #217868;
  --accent-hover: #3fbaa2;
  --danger: #d06060;
  --ok: #4db58a;
  --heroic: #3aa8b8;
  --raid: #e8d0d8;
  --solo: #c8ebe8;
  --text: #e4f6f4;
  --muted: #96b8b4;
  --topbar-from: #1e3a40;
  --topbar-to: #102226;
  --banner-from: #183236;
  --banner-to: #102226;
  --btn-hover: #264850;
  --glow-1: rgba(95, 208, 192, 0.14);
  --glow-2: rgba(40, 120, 140, 0.16);
  --shadow: rgba(0, 0, 0, 0.4);
  --completed-bg: #d4efe8;
  --completed-ink: #2f554c;
  --control-border: #88b0aa;
  --note-bg: #e8faf6;
  --note-muted: #4a7070;
  --table-rule: #c0d8d4;
  --table-rule-strong: #88b0aa;
  --wiki-link: #1f6a60;
  --danger-soft: #ffb0b0;
  --danger-panel: #4a1c1c;
  --ghost-border: #6a3a3a;
  --slider-track: linear-gradient(90deg, #183236, #3a8a80);
  --slider-knob-border: #d0fff6;
  --pack-required: #9dffc8;
  --pack-heroic: #7ef0f0;
  --pack-reset: #ff9b9b;
  --card-bottom: #0c1618;
  --font-display: "Palatino Linotype", Palatino, Georgia, serif;
  --font-ui: Verdana, Geneva, sans-serif;
}

[data-theme="morninglord"] {
  color-scheme: light;
  --bg: #f4efe6;
  --bg-2: #ebe3d6;
  --panel: #fffaf2;
  --panel-2: #f7f0e4;
  --panel-edge: #d2c4a8;
  --border: #d2c4a8;
  --parchment: #fffdf8;
  --parchment-2: #f3eadc;
  --ink: #2a2218;
  --ink-soft: #6a5a48;
  --gold: #9a7018;
  --gold-dim: #7a5810;
  --gold-bright: #b88820;
  --accent: #2f6b4f;
  --accent-2: #245541;
  --accent-hover: #3a8260;
  --danger: #a33b3b;
  --ok: #2f7a52;
  --heroic: #1a7a7a;
  --raid: #f5d4d4;
  --solo: #d4efec;
  --text: #2a2218;
  --muted: #6e5f4e;
  --topbar-from: #fff8ec;
  --topbar-to: #f0e6d4;
  --banner-from: #faf4e8;
  --banner-to: #efe4d0;
  --btn-hover: #efe4d0;
  --glow-1: rgba(154, 112, 24, 0.1);
  --glow-2: rgba(47, 107, 79, 0.08);
  --shadow: rgba(60, 40, 20, 0.12);
  --completed-bg: #d8efd8;
  --completed-ink: #355545;
  --control-border: #c4b090;
  --note-bg: #fff6e0;
  --note-muted: #7a6a50;
  --table-rule: #e0d4bc;
  --table-rule-strong: #c4b090;
  --wiki-link: #6b4a12;
  --danger-soft: #a33b3b;
  --danger-panel: #f8e0e0;
  --ghost-border: #c08080;
  --slider-track: linear-gradient(90deg, #e0d4bc, #c9a227);
  --slider-knob-border: #fff8e0;
  --pack-required: #2f7a52;
  --pack-heroic: #1a7a7a;
  --pack-reset: #a33b3b;
  --card-bottom: #f3eadc;
  --font-display: "Palatino Linotype", Palatino, Georgia, serif;
  --font-ui: Verdana, Geneva, sans-serif;
}

[data-theme="morgrave-archives"] {
  color-scheme: light;
  --bg: #eef1f5;
  --bg-2: #e2e7ee;
  --panel: #ffffff;
  --panel-2: #f5f7fa;
  --panel-edge: #c5ced9;
  --border: #c5ced9;
  --parchment: #ffffff;
  --parchment-2: #f3f6fa;
  --ink: #1a2430;
  --ink-soft: #5a6a7a;
  --gold: #2f5f9a;
  --gold-dim: #244a78;
  --gold-bright: #3d7ac4;
  --accent: #2f6f9a;
  --accent-2: #245878;
  --accent-hover: #3d88b8;
  --danger: #b03a3a;
  --ok: #2f7a52;
  --heroic: #2a7a8a;
  --raid: #f0d8dc;
  --solo: #d8eaf2;
  --text: #1a2430;
  --muted: #5a6a7a;
  --topbar-from: #ffffff;
  --topbar-to: #e8eef5;
  --banner-from: #f8fafc;
  --banner-to: #e8eef5;
  --btn-hover: #e4ebf3;
  --glow-1: rgba(47, 95, 154, 0.1);
  --glow-2: rgba(40, 80, 120, 0.08);
  --shadow: rgba(20, 40, 60, 0.1);
  --completed-bg: #d8efd8;
  --completed-ink: #355545;
  --control-border: #a8b8c8;
  --note-bg: #eef5ff;
  --note-muted: #5a7088;
  --table-rule: #d5dee8;
  --table-rule-strong: #a8b8c8;
  --wiki-link: #1f4f8a;
  --danger-soft: #b03a3a;
  --danger-panel: #f8e4e4;
  --ghost-border: #c08080;
  --slider-track: linear-gradient(90deg, #d0dae6, #3d7ac4);
  --slider-knob-border: #ffffff;
  --pack-required: #2f7a52;
  --pack-heroic: #2a7a8a;
  --pack-reset: #b03a3a;
  --card-bottom: #eef2f7;
  --font-display: "Trebuchet MS", "Segoe UI", sans-serif;
  --font-ui: "Segoe UI", "Trebuchet MS", sans-serif;
}

[data-theme="miseries-peak"],
[data-theme="winters-peak"] {
  color-scheme: light;
  --bg: #eef4f8;
  --bg-2: #e2ecf3;
  --panel: #f8fcff;
  --panel-2: #eef6fb;
  --panel-edge: #b8cddc;
  --border: #b8cddc;
  --parchment: #fbfeff;
  --parchment-2: #eef6fb;
  --ink: #163040;
  --ink-soft: #4a6878;
  --gold: #3a7ea0;
  --gold-dim: #2c6280;
  --gold-bright: #4e9abc;
  --accent: #2f7a8a;
  --accent-2: #246068;
  --accent-hover: #3a94a4;
  --danger: #b03a3a;
  --ok: #2f7a62;
  --heroic: #2a8090;
  --raid: #ecd8e0;
  --solo: #d4ecec;
  --text: #163040;
  --muted: #4a6878;
  --topbar-from: #f8fcff;
  --topbar-to: #dfeaf2;
  --banner-from: #f2f8fc;
  --banner-to: #dfeaf2;
  --btn-hover: #d8e6f0;
  --glow-1: rgba(58, 126, 160, 0.12);
  --glow-2: rgba(180, 210, 230, 0.5);
  --shadow: rgba(30, 60, 80, 0.1);
  --completed-bg: #d4efe8;
  --completed-ink: #2f554c;
  --control-border: #9ab4c4;
  --note-bg: #e8f4fa;
  --note-muted: #4a6878;
  --table-rule: #d0e0ea;
  --table-rule-strong: #9ab4c4;
  --wiki-link: #1f5a78;
  --danger-soft: #b03a3a;
  --danger-panel: #f8e4e4;
  --ghost-border: #c08080;
  --slider-track: linear-gradient(90deg, #c8dce8, #3a7ea0);
  --slider-knob-border: #ffffff;
  --pack-required: #2f7a62;
  --pack-heroic: #2a8090;
  --pack-reset: #b03a3a;
  --card-bottom: #e8f0f6;
  --font-display: Georgia, "Palatino Linotype", serif;
  --font-ui: Verdana, Geneva, sans-serif;
}

[data-theme="thrane-flame"] {
  color-scheme: light;
  --bg: #f7f0e8;
  --bg-2: #efe4d6;
  --panel: #fffaf4;
  --panel-2: #f8efe4;
  --panel-edge: #d8c0a0;
  --border: #d8c0a0;
  --parchment: #fffdf8;
  --parchment-2: #f6ebdc;
  --ink: #2a1c12;
  --ink-soft: #6a4e38;
  --gold: #c45a18;
  --gold-dim: #9a4010;
  --gold-bright: #e07028;
  --accent: #b84820;
  --accent-2: #8a3010;
  --accent-hover: #d05828;
  --danger: #a33b3b;
  --ok: #3d7a40;
  --heroic: #a85820;
  --raid: #f5d4c8;
  --solo: #efe0d0;
  --text: #2a1c12;
  --muted: #6e5644;
  --topbar-from: #fff4e8;
  --topbar-to: #f0dcc4;
  --banner-from: #faf0e4;
  --banner-to: #f0dcc4;
  --btn-hover: #f0dcc4;
  --glow-1: rgba(196, 90, 24, 0.12);
  --glow-2: rgba(180, 80, 30, 0.08);
  --shadow: rgba(80, 40, 10, 0.12);
  --completed-bg: #e4efd0;
  --completed-ink: #4a5535;
  --control-border: #c8a888;
  --note-bg: #fff0e0;
  --note-muted: #7a5a40;
  --table-rule: #e4d0b8;
  --table-rule-strong: #c8a888;
  --wiki-link: #8a4010;
  --danger-soft: #a33b3b;
  --danger-panel: #f8e0e0;
  --ghost-border: #c08080;
  --slider-track: linear-gradient(90deg, #e0c8a8, #c45a18);
  --slider-knob-border: #fff4e8;
  --pack-required: #3d7a40;
  --pack-heroic: #a85820;
  --pack-reset: #a33b3b;
  --card-bottom: #f3e6d6;
  --font-display: "Palatino Linotype", Palatino, Georgia, serif;
  --font-ui: Verdana, Geneva, sans-serif;
}

.theme-picker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.theme-picker label {
  margin: 0;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  font-family: var(--font-ui);
}

.theme-picker select {
  font-family: var(--font-ui);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid var(--panel-edge);
  background: var(--panel);
  color: var(--text);
  max-width: min(200px, 55vw);
  cursor: pointer;
}

/* Shared site navigation (burger menu) */
.ddo-nav-menu {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.ddo-nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.ddo-nav-toggle svg {
  display: block;
  flex-shrink: 0;
}

.ddo-nav-panel {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 200px;
  padding: 6px;
  border-radius: 10px;
  border: 1px solid var(--border, var(--panel-edge));
  background: var(--panel);
  box-shadow: 0 12px 32px var(--shadow, rgba(0, 0, 0, 0.35));
  z-index: 50;
}

.ddo-nav-menu.is-open .ddo-nav-panel {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ddo-nav-item {
  display: block;
  padding: 10px 12px;
  border-radius: 8px;
  color: var(--text);
  text-decoration: none !important;
  font-family: var(--font-ui);
  font-size: 0.92rem;
  font-weight: 600;
  white-space: nowrap;
}

.ddo-nav-item:hover,
.ddo-nav-item:focus-visible {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--text);
  outline: none;
}

.ddo-nav-item.is-active,
.ddo-nav-item[aria-current="page"] {
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  color: var(--gold-bright, var(--accent));
}

.ddo-nav-menu-topbar .ddo-nav-panel {
  background: var(--banner-to, var(--panel));
  border-color: var(--panel-edge);
}

@media (max-width: 520px) {
  .ddo-nav-toggle-label {
    display: none;
  }
}

.header-user-row,
.topbar-user-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  flex-wrap: wrap;
}

.account-chip,
.logout-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--border, var(--panel-edge));
  background: color-mix(in srgb, var(--panel-2, var(--panel)) 88%, transparent);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none !important;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.account-chip:hover,
.account-chip:focus-visible,
.logout-chip:hover,
.logout-chip:focus-visible {
  background: color-mix(in srgb, var(--accent) 16%, var(--panel));
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border, var(--panel-edge)));
  color: var(--text);
  outline: none;
}

.account-chip.is-active,
.account-chip[aria-current="page"] {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border, var(--panel-edge)));
  background: color-mix(in srgb, var(--accent) 18%, var(--panel));
  color: var(--gold-bright, var(--accent));
}

.account-chip-icon,
.logout-chip svg {
  display: inline-flex;
  flex-shrink: 0;
  opacity: 0.9;
}

.account-chip-icon svg,
.logout-chip svg {
  display: block;
}

.logout-chip {
  color: var(--muted);
}

.account-chip-topbar,
.logout-chip-topbar {
  font-size: 0.78rem;
  padding: 5px 9px;
}

#user-label[hidden],
#topbar-user[hidden] {
  display: none !important;
}