/* Themes ride CSS variables from styles.css. Tower is :root with no data-theme.
   Halloween images load only while html[data-theme="halloween"]. */

/* A short, always-on fade for the main surfaces. It is not toggled on at the
   moment of the switch (phones drop that) and it is not on every node
   (that is what stalled the desktop). */
:where(
  body,
  .profile-header,
  .mobile-nav,
  .login-card,
  .profile-loading-card,
  .inspector-hero-card,
  .inspector-status-section,
  .inspector-stat-cell,
  .inspector-stat-tile,
  .inspector-equip-slot,
  .inspector-portrait-frame,
  .inspector-hero-portrait-slot,
  .inspector-hero-guild,
  .inspector-hero-level,
  .inspector-hero-tag,
  .inspector-hero-premium-badge,
  .header-profile-menu,
  .header-profile-trigger,
  .g-card,
  .g-stat,
  .g-cost,
  .g-tabs,
  .toast,
  .inspector-modal-dialog,
  .nav-link
) {
  transition: background-color 0.32s ease, color 0.32s ease, border-color 0.32s ease;
}

.theme-dialog { width: min(440px, 100%); }
.theme-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.theme-card {
  display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 8px;
  border-radius: 16px; border: 1px solid var(--line); background: var(--surface-2);
  color: inherit; font: inherit; text-align: left; cursor: pointer;
  transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.theme-card:hover { transform: translateY(-1px); }
.theme-card.is-on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.theme-card-copy { display: flex; flex-direction: column; gap: 2px; padding: 0 4px 4px; }
.theme-card-title { font-size: 0.86rem; font-weight: 700; color: var(--ink-strong); }
.theme-card-hint { font-size: 0.72rem; color: var(--ink-soft); }
.theme-preview { display: flex; flex-direction: column; gap: 6px; height: 78px; padding: 8px; border-radius: 12px; overflow: hidden; }
.theme-preview-bar { height: 8px; width: 46%; border-radius: 99px; }
.theme-preview-card { height: 16px; border-radius: 6px; }
.theme-preview-card--short { width: 72%; }
.theme-preview--tower { background: #0c121c; }
.theme-preview--tower .theme-preview-bar { background: #6ee7ff; }
.theme-preview--tower .theme-preview-card { background: rgba(255, 255, 255, 0.08); }
.theme-preview--vk-light { background: #edeef0; }
.theme-preview--vk-light .theme-preview-bar { background: #0077ff; }
.theme-preview--vk-light .theme-preview-card { background: #fff; box-shadow: 0 1px 0 #e7e8ec; }
.theme-preview--vk-dark { background: #141414; }
.theme-preview--vk-dark .theme-preview-bar { background: #71aaeb; }
.theme-preview--vk-dark .theme-preview-card { background: #2c2d2e; }
.theme-preview--halloween {
  position: relative;
  background:
    radial-gradient(60% 90% at 50% 120%, rgba(255, 122, 48, 0.22), transparent 70%),
    linear-gradient(180deg, #120e18, #0b0910);
}
.theme-preview--halloween::after {
  content: "";
  position: absolute;
  top: 7px;
  right: 9px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 38%, #fff3dc, #e8cfa4 62%, #c9a676);
  box-shadow: 0 0 12px rgba(255, 206, 150, 0.45);
}
.theme-preview--halloween .theme-preview-bar { background: linear-gradient(90deg, #e2611f, #ffa25a); }
.theme-preview--halloween .theme-preview-card {
  background: #1b1622;
  box-shadow: inset 0 0 0 1px rgba(255, 138, 61, 0.28);
}

/* Photo cards keep light type on the picture. Light theme redraws list cards below. */
html[data-theme="vk-dark"] .class-menu-card,
html[data-theme="vk-dark"] .class-menu-card-text,
html[data-theme="vk-dark"] .g-card,
html[data-theme="halloween"] .class-menu-card,
html[data-theme="halloween"] .class-menu-card-text,
html[data-theme="halloween"] .g-card,
html[data-theme] .g-banner,
html[data-theme] .g-banner-status,
html[data-theme] .g-banner-name,
html[data-theme] .rating-modal-hero,
html[data-theme] .rating-modal-hero-title { color: #f7f4ef; }

/* ---------- VK light ---------- */
html[data-theme="vk-light"] {
  color-scheme: light;
  --bg: #edeef0;
  --text: #1c1e21;
  --text-muted: #3e4651;
  --ink: #1c1e21;
  --ink-strong: #121417;
  --ink-soft: #3e4651;
  --chip-ink: #2c3138;
  --accent-ink: #0066dd;
  --premium-diamond: #0077ff;
  --premium-diamond-border: rgba(0, 87, 194, 0.45);
  --premium-diamond-soft: rgba(0, 119, 255, 0.12);
  --premium-diamond-text: #0057c2;
  --accent: #0077ff;
  --period-accent: #0077ff;
  --period-accent-strong: #0066dd;
  --surface: #ffffff;
  --surface-2: #f4f5f7;
  --surface-3: #ffffff;
  --chip-bg: #eef0f3;
  --input-bg: #ffffff;
  --pill-bg: #eef1f5;
  --pill-ink: #1c1e21;
  --line: #d9dee5;
  --line-soft: #e4e7ec;
  --accent-line: #c9d7ea;
  --card-bg: #ffffff;
  --header-bg: rgba(255, 255, 255, 0.94);
  --menu-bg: #ffffff;
  --trigger-bg: #ffffff;
  --nav-bg: #ffffff;
  --nav-ink: #4b5563;
  --nav-active: #0077ff;
  --nav-active-bg: #e7f1ff;
  --modal-bg: #ffffff;
  --tile-bg: #ffffff;
  --item-bg: #f4f6f8;
  --hover-bg: #eef3f8;
  --hover-line: rgba(0, 119, 255, 0.4);
  --glow-soft: rgba(0, 119, 255, 0.1);
  --icon-accent: #0077ff;
  --load-line: rgba(0, 119, 255, 0.75);
  --load-gem: #0077ff;
  --load-glow: rgba(0, 119, 255, 0.16);
  --glass: rgba(255, 255, 255, 0.86);
  --bg-card: #ffffff;
  --modal-backdrop: rgba(28, 30, 34, 0.4);
}
html[data-theme="vk-light"] body { background: var(--bg); color: var(--text); }
html[data-theme="vk-light"] .login-bg { background: #edeef0; }
html[data-theme="vk-light"] .login-bg::before,
html[data-theme="vk-light"] .login-bg::after { opacity: 0; }
html[data-theme="vk-light"] #panel-guild,
html[data-theme="vk-light"] #guild-info-modal {
  --g-surface: #ffffff;
  --g-surface-2: #f2f3f5;
  --g-line: #e1e4e8;
  --g-gold: #8d6b2f;
  --g-gold-soft: rgba(141, 107, 47, 0.12);
  --g-gold-border: rgba(141, 107, 47, 0.35);
}
html[data-theme="vk-light"] .mobile-nav .nav-link.active,
html[data-theme="vk-light"] .mobile-nav .nav-link[data-tab="guild"].active {
  color: #0077ff;
  background: #e7f1ff;
  border-color: transparent;
  box-shadow: none;
}
html[data-theme="vk-light"] .inspector-inv-filter-chip.is-active,
html[data-theme="vk-light"] .inspector-inv-bulk-chip.is-active {
  color: #fff;
  background: #0077ff;
  border-color: #0077ff;
  box-shadow: none;
}
html[data-theme="vk-light"] .inspector-inv-search,
html[data-theme="vk-light"] textarea,
html[data-theme="vk-light"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]) {
  background: #fff;
  color: #1c1e21;
  border-color: #d5dae1;
}
html[data-theme="vk-light"] .inspector-inv-search::placeholder { color: #7b8490; }
html[data-theme="vk-light"] .inspector-modal-dialog { color: #1c1e21; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.16); }
html[data-theme="vk-light"] .inspector-modal-close { background: #eef0f3; color: #1c1e21; }
html[data-theme="vk-light"] .header-profile-menu { box-shadow: 0 12px 36px rgba(0, 0, 0, 0.12); }
html[data-theme="vk-light"] .header-profile-menu-item--danger { color: #d12626; }
html[data-theme="vk-light"] .inspector-status-section.is-accent,
html[data-theme="vk-light"] .inspector-stat-cell.is-accent { border-color: #d5e4f7; }
html[data-theme="vk-light"] .inspector-hero-card,
html[data-theme="vk-light"] .inspector-status-section,
html[data-theme="vk-light"] .inspector-stat-cell,
html[data-theme="vk-light"] .inspector-item-card,
html[data-theme="vk-light"] .inspector-equip-slot,
html[data-theme="vk-light"] .inspector-portrait-frame,
html[data-theme="vk-light"] .inspector-hero-portrait-slot,
html[data-theme="vk-light"] .login-card {
  background: #fff;
  color: #1c1e21;
  box-shadow: 0 1px 2px rgba(16, 18, 22, 0.06), 0 0 0 1px #e1e4e8;
}
html[data-theme="vk-light"] .inspector-portrait-placeholder,
html[data-theme="vk-light"] .inspector-stat-cell-label,
html[data-theme="vk-light"] .inspector-equip-slot-title,
html[data-theme="vk-light"] .header-profile-name { color: #3a414b; }
html[data-theme="vk-light"] .nav-ink,
html[data-theme="vk-light"] .mobile-nav .nav-link:not(.active) { color: #4b5563; }
html[data-theme="vk-light"] .inspector-implants-stage {
  background: #fff;
  border-color: #e1e4e8;
  box-shadow: none;
}
html[data-theme="vk-light"] .inspector-implants-stage-veil,
html[data-theme="vk-light"] .inspector-implants-stage-art-veil {
  background: none;
}
html[data-theme="vk-light"] .inspector-implants-stage-figure img { filter: none; }
html[data-theme="halloween"] .class-menu-card,
html[data-theme="halloween"] .g-card {
  background: #17121d;
  border-color: rgba(255, 236, 214, 0.08);
}
html[data-theme="vk-dark"] .class-menu-card,
html[data-theme="vk-dark"] .g-card {
  background: #191919;
  border-color: rgba(255, 255, 255, 0.08);
}
html[data-theme="halloween"] .class-menu-card-overlay,
html[data-theme="halloween"] .g-card-overlay {
  background: linear-gradient(90deg, #17121d 0%, #17121d 34%, rgba(23, 18, 29, 0.55) 64%, transparent 100%);
}
html[data-theme="vk-dark"] .class-menu-card-overlay,
html[data-theme="vk-dark"] .g-card-overlay {
  background: linear-gradient(90deg, #191919 0%, #191919 34%, rgba(25, 25, 25, 0.5) 64%, transparent 100%);
}
html[data-theme="vk-light"] .class-menu-card,
html[data-theme="vk-light"] .g-card {
  background: #fff;
  color: #1c1e21;
  border-color: #e1e4e8;
  box-shadow: 0 1px 2px rgba(16, 18, 22, 0.06);
}
html[data-theme="vk-light"] .class-menu-card-overlay,
html[data-theme="vk-light"] .g-card-overlay {
  background: linear-gradient(90deg, #fff 0%, #fff 26%, rgba(255, 255, 255, 0.94) 42%, rgba(255, 255, 255, 0.28) 68%, transparent 100%);
}
html[data-theme="vk-light"] .class-menu-card-title,
html[data-theme="vk-light"] .class-menu-card-text,
html[data-theme="vk-light"] .g-card-title,
html[data-theme="vk-light"] .g-card-text {
  color: #121417;
  text-shadow: none;
}
html[data-theme="vk-light"] .class-menu-card-sub,
html[data-theme="vk-light"] .g-card-status {
  color: #3e4651;
  text-shadow: none;
}
html[data-theme="vk-light"] .class-menu-card-icon svg {
  stroke: #1c1e21;
  filter: none;
}
html[data-theme="vk-light"] .class-menu-card-icon svg.icon-filled,
html[data-theme="vk-light"] .class-menu-card-icon svg.icon-filled path {
  fill: #1c1e21;
  color: #1c1e21;
  stroke: none;
}
html[data-theme="vk-light"] .g-card-icon {
  background: rgba(141, 107, 47, 0.1);
  border-color: rgba(141, 107, 47, 0.28);
}
html[data-theme="vk-light"] .g-card-icon svg { stroke: #8d6b2f; }
html[data-theme="halloween"] .class-mgmt-tile--upgrade {
  border-color: rgba(255, 138, 61, 0.38);
  background: linear-gradient(135deg, rgba(255, 122, 48, 0.16), rgba(23, 18, 29, 0.95));
}
html[data-theme="halloween"] .class-mgmt-tile-icon--upgrade {
  color: #ffc896;
  background: rgba(255, 138, 61, 0.14);
  border-color: rgba(255, 138, 61, 0.34);
}
html[data-theme="halloween"] .class-mgmt-tile--skills {
  border-color: rgba(167, 139, 250, 0.38);
  background: linear-gradient(160deg, rgba(139, 108, 255, 0.14), rgba(23, 18, 29, 0.95));
}
html[data-theme="halloween"] .class-mgmt-tile-icon--skills {
  color: #d7cbff;
  background: rgba(167, 139, 250, 0.16);
  border-color: rgba(167, 139, 250, 0.4);
}
html[data-theme="halloween"] .class-mgmt-tile--danger {
  background: linear-gradient(160deg, rgba(220, 60, 60, 0.14), rgba(23, 18, 29, 0.95));
}
html[data-theme="vk-light"] .class-mgmt-tile--upgrade {
  background: #f4f0ff;
  border-color: #ddd4ff;
}
html[data-theme="vk-light"] .class-mgmt-tile--skills {
  background: #eef5ff;
  border-color: #d3e4fb;
}
html[data-theme="vk-light"] .class-mgmt-tile--danger {
  background: #fff1f1;
  border-color: #f3d0d0;
}
html[data-theme="halloween"] .header-profile-avatar,
html[data-theme="vk-dark"] .header-profile-avatar,
html[data-theme="vk-light"] .header-profile-avatar {
  background: linear-gradient(145deg, color-mix(in srgb, var(--icon-accent) 28%, transparent), transparent);
  border-color: var(--hover-line);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18);
  color: var(--icon-accent);
}
html[data-theme="halloween"] .inspector-implants-stage {
  background: linear-gradient(180deg, #1a1520, #0f0c14);
  border-color: rgba(255, 236, 214, 0.08);
}
html[data-theme="vk-dark"] .inspector-implants-stage {
  background: linear-gradient(180deg, #1a1a1a, #141414);
  border-color: rgba(255, 255, 255, 0.08);
}

/* ---------- VK dark ---------- */
html[data-theme="vk-dark"] {
  color-scheme: dark;
  --bg: #141414;
  --text: #e1e3e6;
  --text-muted: #8b8f96;
  --ink: #e1e3e6;
  --ink-strong: #f2f3f5;
  --ink-soft: #8b8f96;
  --chip-ink: #c4c8d0;
  --accent-ink: #8eb8ea;
  --accent: #71aaeb;
  --period-accent: #71aaeb;
  --period-accent-strong: #8eb8ea;
  --surface: #222222;
  --surface-2: #1c1c1c;
  --surface-3: #262626;
  --chip-bg: #2a2a2a;
  --input-bg: #222;
  --pill-bg: #2a2a2a;
  --pill-ink: #e1e3e6;
  --line: rgba(255, 255, 255, 0.08);
  --line-soft: rgba(255, 255, 255, 0.06);
  --accent-line: rgba(113, 170, 235, 0.35);
  --card-bg: #222222;
  --header-bg: rgba(20, 20, 20, 0.94);
  --menu-bg: #222222;
  --trigger-bg: #222222;
  --nav-bg: #141414;
  --nav-ink: #8b8f96;
  --nav-active: #71aaeb;
  --nav-active-bg: rgba(113, 170, 235, 0.14);
  --modal-bg: #1c1c1c;
  --tile-bg: #262626;
  --item-bg: #1e1e1e;
  --hover-bg: #2c2c2c;
  --hover-line: rgba(113, 170, 235, 0.45);
  --glow-soft: rgba(113, 170, 235, 0.12);
  --icon-accent: #71aaeb;
  --load-line: rgba(113, 170, 235, 0.8);
  --load-gem: #71aaeb;
  --load-glow: rgba(113, 170, 235, 0.18);
  --glass: rgba(28, 28, 28, 0.9);
  --bg-card: #222;
  --modal-backdrop: rgba(0, 0, 0, 0.64);
}
html[data-theme="vk-dark"] body { background: #141414; color: var(--text); }
html[data-theme="vk-dark"] .login-bg {
  background: radial-gradient(ellipse 80% 40% at 50% -10%, rgba(255, 255, 255, 0.04), transparent 58%), #141414;
}
html[data-theme="vk-dark"] .login-bg::before,
html[data-theme="vk-dark"] .login-bg::after { opacity: 0; }
html[data-theme="vk-dark"] #panel-guild,
html[data-theme="vk-dark"] #guild-info-modal {
  --g-surface: #222;
  --g-surface-2: #2a2a2a;
  --g-line: rgba(255, 255, 255, 0.08);
  --g-gold: #c4b08a;
}
html[data-theme="vk-dark"] .mobile-nav .nav-link.active,
html[data-theme="vk-dark"] .mobile-nav .nav-link[data-tab="guild"].active {
  color: #71aaeb;
  background: rgba(113, 170, 235, 0.14);
  border-color: transparent;
  box-shadow: none;
}
html[data-theme="vk-dark"] .inspector-inv-filter-chip.is-active,
html[data-theme="vk-dark"] .inspector-inv-bulk-chip.is-active {
  color: #fff;
  background: #3d6ea8;
  border-color: #71aaeb;
  box-shadow: none;
}
html[data-theme="vk-dark"] .inspector-modal-dialog { box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55); }

/* Light surfaces that were painted for the dark tower. */
html[data-theme="vk-light"] .inspector-hero-premium-badge,
html[data-theme="vk-light"] .inspector-hero-tag--premium {
  background: #e8f2ff;
  color: #0057c2;
  border-color: #8eb8f5;
  box-shadow: 0 1px 0 rgba(0, 87, 194, 0.06);
}
html[data-theme="vk-light"] .inspector-hero-level {
  background: #f3f5f8;
  border-color: #d5dbe3;
}
html[data-theme="vk-light"] .inspector-hero-level.is-premium { border-color: #8eb8f5; }
html[data-theme="vk-light"] .inspector-hero-tag--class {
  color: #8a5a00;
  background: rgba(234, 179, 8, 0.16);
  border-color: rgba(160, 110, 0, 0.38);
}
html[data-theme="vk-light"] .inspector-hero-tag--status.is-online {
  color: #0d7a48;
  background: rgba(16, 185, 129, 0.12);
  border-color: rgba(16, 185, 129, 0.32);
}
html[data-theme="vk-light"] .inspector-hero-guild {
  background: linear-gradient(135deg, #fff8ee, #ffffff);
  border-color: rgba(141, 107, 47, 0.34);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
html[data-theme="vk-light"] .inspector-hero-guild-name { color: #121417; }
html[data-theme="vk-light"] .inspector-hero-guild-level { color: #5c6570; }
html[data-theme="vk-light"] .inspector-hero-guild-role {
  color: #6b4e1e;
  background: rgba(141, 107, 47, 0.12);
  border-color: rgba(141, 107, 47, 0.32);
}
html[data-theme="vk-light"] .inspector-xp-track { background: #e6e9ee; }
html[data-theme="vk-light"] .profile-loading-card {
  background: #fff;
  border-color: #e1e4e8;
  box-shadow: 0 16px 40px rgba(16, 18, 22, 0.08);
}
html[data-theme="vk-light"] .profile-loading-card::after { box-shadow: none; }
html[data-theme="vk-light"] .profile-loading-bar { background: #e6e9ee; }
html[data-theme="vk-light"] .profile-loading-title { color: #1c1e21; }
html[data-theme="vk-light"] .g-btn--primary {
  background: linear-gradient(180deg, #c4a15a, #a6853d);
  border-color: #8d6b2f;
  color: #fffaf0;
}
html[data-theme="vk-light"] .g-btn--ghost {
  background: #fff;
  border-color: #d5dbe3;
  color: #1c1e21;
}
/* Guild screens hardcoded a dark navy fill. Repaint it per theme. */
html[data-theme="vk-light"] .g-cost,
html[data-theme="vk-light"] .g-tabs,
html[data-theme="vk-light"] .g-input,
html[data-theme="vk-light"] .g-item-img {
  background: #f4f5f7;
  border-color: #e1e4e8;
  color: #1c1e21;
}
html[data-theme="vk-light"] .g-cost-title { color: #6b4e1e; }
html[data-theme="vk-light"] .g-cost-need { color: #121417; }
html[data-theme="vk-light"] .g-cost-have { color: #5c6570; }
html[data-theme="vk-light"] .g-cost-row.is-lacking .g-cost-need,
html[data-theme="vk-light"] .g-cost-row.is-lacking .g-cost-have { color: #c24141; }
html[data-theme="vk-light"] .g-tab { color: #5c6570; }
html[data-theme="vk-light"] .g-tab.is-active { color: #6b4e1e; }
html[data-theme="vk-light"] .g-btn:disabled {
  opacity: 1;
  background: #f4f1ea;
  color: #8d8374;
  border-color: #e6dfd2;
}
html[data-theme="vk-dark"] .g-cost,
html[data-theme="vk-dark"] .g-tabs,
html[data-theme="vk-dark"] .g-input,
html[data-theme="vk-dark"] .g-item-img {
  background: #262626;
  border-color: rgba(255, 255, 255, 0.1);
  color: #e1e3e6;
}
html[data-theme="halloween"] .g-cost,
html[data-theme="halloween"] .g-tabs,
html[data-theme="halloween"] .g-input,
html[data-theme="halloween"] .g-item-img {
  background: #1c1723;
  border-color: rgba(255, 138, 61, 0.22);
  color: #f3e6d4;
}
html[data-theme="vk-light"] .toast {
  background: #fff;
  border-color: #e1e4e8;
  box-shadow: 0 16px 40px rgba(16, 18, 22, 0.12);
}
html[data-theme="vk-light"] .toast .toast-title { color: #121417; }
html[data-theme="vk-light"] .toast .toast-message { color: #3e4651; }
html[data-theme="vk-light"] .toast .toast-close { color: #5c6570; }
html[data-theme="vk-dark"] .toast {
  background: #222;
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
}
html[data-theme="vk-dark"] .toast .toast-title { color: #f2f3f5; }
html[data-theme="vk-dark"] .toast .toast-message { color: #c4c8d0; }
html[data-theme="halloween"] .toast {
  background: linear-gradient(180deg, #241c2c, #16121c);
  border-color: rgba(255, 138, 61, 0.28);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
}
html[data-theme="halloween"] .toast .toast-title { color: #f7f1ea; }
html[data-theme="halloween"] .toast .toast-message { color: #d9cfdc; }
html[data-theme="vk-dark"] .g-btn--ghost {
  background: #2a2a2a;
  border-color: rgba(255, 255, 255, 0.16);
  color: #e8eaed;
}
html[data-theme="vk-dark"] .inspector-hero-premium-badge,
html[data-theme="vk-dark"] .inspector-hero-tag--premium {
  background: rgba(113, 170, 235, 0.18);
  color: #e7f2ff;
  border-color: rgba(142, 184, 234, 0.55);
}
html[data-theme="vk-dark"] .inspector-hero-card,
html[data-theme="vk-dark"] .inspector-status-section,
html[data-theme="vk-dark"] .inspector-stat-cell,
html[data-theme="vk-dark"] .inspector-stat-tile,
html[data-theme="vk-dark"] .inspector-equip-slot {
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22);
}
@media (hover: hover) and (pointer: fine) {
  html[data-theme="vk-light"] .inspector-hero-guild,
  html[data-theme="vk-dark"] .inspector-hero-guild,
  html[data-theme="vk-light"] .inspector-hero-premium-badge,
  html[data-theme="vk-dark"] .inspector-hero-premium-badge,
  html[data-theme="vk-light"] .g-btn,
  html[data-theme="vk-dark"] .g-btn,
  html[data-theme="vk-light"] .inspector-stat-cell,
  html[data-theme="vk-light"] .inspector-stat-tile,
  html[data-theme="vk-dark"] .inspector-stat-cell,
  html[data-theme="vk-dark"] .inspector-stat-tile,
  html[data-theme="vk-light"] .inspector-equip-slot,
  html[data-theme="vk-dark"] .inspector-equip-slot,
  html[data-theme="vk-light"] .mobile-nav .nav-link,
  html[data-theme="vk-dark"] .mobile-nav .nav-link {
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease, background 0.22s ease, color 0.22s ease;
  }
  html[data-theme="vk-light"] .inspector-hero-guild:hover,
  html[data-theme="vk-dark"] .inspector-hero-guild:hover,
  html[data-theme="vk-light"] .inspector-stat-cell:hover,
  html[data-theme="vk-light"] .inspector-stat-tile:hover,
  html[data-theme="vk-light"] .inspector-equip-slot:hover,
  html[data-theme="vk-light"] .g-btn:hover:not(:disabled) {
    transform: translateY(-2px);
  }
  html[data-theme="vk-dark"] .inspector-stat-cell:hover,
  html[data-theme="vk-dark"] .inspector-stat-tile:hover,
  html[data-theme="vk-dark"] .inspector-equip-slot:hover,
  html[data-theme="vk-dark"] .g-btn:hover:not(:disabled),
  html[data-theme="vk-dark"] .inspector-hero-guild:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.35);
  }
  html[data-theme="vk-light"] .inspector-stat-cell:hover,
  html[data-theme="vk-light"] .inspector-stat-tile:hover,
  html[data-theme="vk-light"] .inspector-equip-slot:hover {
    border-color: #b7cbe6;
    box-shadow: 0 10px 22px rgba(16, 18, 22, 0.08);
  }
  html[data-theme="vk-light"] .g-btn--primary:hover:not(:disabled) {
    background: linear-gradient(180deg, #d4b06a, #b49248);
  }
  html[data-theme="vk-light"] .g-btn--ghost:hover:not(:disabled) {
    background: #f7f1e6;
    border-color: rgba(141, 107, 47, 0.4);
    color: #6b4e1e;
  }
  html[data-theme="vk-light"] .mobile-nav .nav-link:hover,
  html[data-theme="vk-dark"] .mobile-nav .nav-link:hover {
    transform: translateY(-1px);
  }
}

/* ---------- Halloween: midnight violet, pumpkin ember, bone ink ----------
   Decor layers sit at z-index -1 inside isolated cards, so they paint over the
   card background but under its content without touching child positioning. */
html[data-theme="halloween"] {
  color-scheme: dark;
  --hw-ember: #ff8a3d;
  --hw-ember-hi: #ffb27a;
  --hw-violet: #8b6cff;
  --hw-card: #16121c;
  --bg: #0b0910;
  --text: #ece4da;
  --text-muted: #9a8fa6;
  --ink: #ece4da;
  --ink-strong: #f7f1ea;
  --ink-soft: #ab9fb8;
  --chip-ink: #d9cfdc;
  --accent-ink: #ffb27a;
  --accent: #ff8a3d;
  --period-accent: #ff8a3d;
  --period-accent-strong: #ffa45c;
  --period-accent-soft: rgba(255, 138, 61, 0.18);
  --period-accent-border: rgba(255, 138, 61, 0.4);
  --premium-diamond: #b69cff;
  --premium-diamond-border: rgba(182, 156, 255, 0.42);
  --premium-diamond-soft: rgba(182, 156, 255, 0.12);
  --premium-diamond-text: #cdbbff;
  --surface: #1c1723;
  --surface-2: rgba(22, 18, 28, 0.94);
  --surface-3: #211b29;
  --chip-bg: rgba(255, 236, 214, 0.05);
  --input-bg: #120f17;
  --pill-bg: #221c2a;
  --pill-ink: #f2ebe3;
  --line: rgba(255, 236, 214, 0.08);
  --line-soft: rgba(255, 236, 214, 0.06);
  --accent-line: rgba(255, 138, 61, 0.34);
  --card-bg: linear-gradient(160deg, #1b1622, #120f17);
  --header-bg: rgba(11, 9, 16, 0.8);
  --menu-bg: #18131e;
  --trigger-bg: rgba(28, 23, 35, 0.92);
  --trigger-ink: #ece4da;
  --nav-bg: rgba(11, 9, 16, 0.94);
  --nav-ink: #8a8096;
  --nav-active: #ffb27a;
  --nav-active-bg: rgba(255, 138, 61, 0.12);
  --modal-bg: linear-gradient(170deg, #1a1520, #110e16);
  --tile-bg: var(--hw-card);
  --item-bg: #18131e;
  --hover-bg: #221b2a;
  --hover-line: rgba(255, 138, 61, 0.38);
  --glow-soft: rgba(255, 138, 61, 0.14);
  --icon-accent: #ffa45c;
  --load-line: rgba(255, 164, 92, 0.85);
  --load-gem: #ff8a3d;
  --load-glow: rgba(255, 138, 61, 0.2);
  --glass: rgba(22, 18, 28, 0.9);
  --bg-card: #17121d;
  --modal-backdrop: rgba(5, 4, 8, 0.72);
  --scrollbar-thumb: rgba(255, 190, 140, 0.16);
  --scrollbar-thumb-hover: rgba(255, 170, 110, 0.3);
}
html[data-theme="halloween"] body { background: var(--bg); color: var(--text); }
html[data-theme="halloween"] ::selection { background: rgba(255, 138, 61, 0.35); color: #fff; }
html[data-theme="halloween"] #app { position: relative; z-index: 1; }
html[data-theme="halloween"] #screen-profile::after { content: none; }

/* Scene sits behind the column: moon and bare trees up high, graves only at the edges. */
html[data-theme="halloween"] .login-bg {
  background:
    radial-gradient(ellipse 56% 64% at 50% 40%, rgba(8, 6, 12, 0.42), transparent 74%),
    linear-gradient(180deg, rgba(8, 6, 12, 0.28), transparent 16%, transparent 78%, rgba(8, 6, 12, 0.35)),
    url("/assets/themes/graveyard.webp") right top / cover no-repeat,
    #0b0910;
}
html[data-theme="halloween"] .login-bg::before,
html[data-theme="halloween"] .login-bg::after {
  opacity: 0;
}
.hw-load-sky { display: none; }
html[data-theme="halloween"] .profile-loading-ornament { display: none; }
html[data-theme="halloween"] .profile-loading-card {
  background:
    radial-gradient(80% 70% at 50% 0%, rgba(255, 122, 48, 0.16), transparent 70%),
    linear-gradient(180deg, #1b1622, #100e16);
  border-color: rgba(255, 138, 61, 0.28);
  min-height: 210px;
}
/* One jack-o'-lantern breathing like a candle: halo, flicker, rising embers. */
html[data-theme="halloween"] .hw-load-sky {
  display: block;
  position: relative;
  width: 140px;
  height: 118px;
  margin: 0 auto 8px;
  z-index: 1;
  pointer-events: none;
}
html[data-theme="halloween"] .hw-load-halo {
  position: absolute;
  left: 50%;
  bottom: 2px;
  width: 150px;
  height: 100px;
  margin-left: -75px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 138, 61, 0.55), rgba(255, 110, 40, 0.16) 62%, transparent);
  animation: hw-load-halo 2.4s ease-in-out infinite;
}
html[data-theme="halloween"] .hw-load-sky i {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 92px;
  height: 92px;
  margin-left: -46px;
  background: url("/assets/themes/pumpkin-jack.webp") center / contain no-repeat;
  filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 16px rgba(255, 120, 40, 0.55));
  animation: hw-load-bob 3.2s ease-in-out infinite, hw-load-flicker 1.9s ease-in-out infinite;
}
html[data-theme="halloween"] .hw-load-sky b {
  position: absolute;
  bottom: 62px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #ffc58f;
  box-shadow: 0 0 8px #ff8a3d, 0 0 2px #fff1de;
  opacity: 0;
  animation: hw-load-ember 3s ease-in infinite;
}
html[data-theme="halloween"] .hw-load-sky b:nth-of-type(1) { left: 42%; --dx: -12px; animation-delay: 0s; }
html[data-theme="halloween"] .hw-load-sky b:nth-of-type(2) { left: 55%; --dx: 14px; animation-delay: -0.7s; }
html[data-theme="halloween"] .hw-load-sky b:nth-of-type(3) { left: 48%; --dx: 4px; animation-delay: -1.4s; width: 3px; height: 3px; }
html[data-theme="halloween"] .hw-load-sky b:nth-of-type(4) { left: 60%; --dx: -6px; animation-delay: -2.1s; width: 3px; height: 3px; }
html[data-theme="halloween"] .hw-load-sky b:nth-of-type(5) { left: 38%; --dx: 10px; animation-delay: -2.6s; }
@keyframes hw-load-halo {
  0%, 100% { opacity: 0.55; transform: scale(0.94); }
  50% { opacity: 1; transform: scale(1.06); }
}
@keyframes hw-load-bob {
  0%, 100% { transform: translateY(2px) rotate(-1.5deg); }
  50% { transform: translateY(-5px) rotate(1.5deg); }
}
@keyframes hw-load-flicker {
  0%, 100% { filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 16px rgba(255, 120, 40, 0.5)) brightness(1); }
  22% { filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 24px rgba(255, 140, 50, 0.8)) brightness(1.18); }
  48% { filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 14px rgba(255, 110, 40, 0.42)) brightness(0.94); }
  72% { filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 22px rgba(255, 140, 50, 0.7)) brightness(1.1); }
}
@keyframes hw-load-ember {
  0% { opacity: 0; transform: translate(0, 0) scale(1); }
  15% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx, 8px), -64px) scale(0.35); }
}
html[data-theme="halloween"] .profile-loading-title { color: #f3e6d4; letter-spacing: 0.08em; }
html[data-theme="halloween"] .profile-loading-bar { background: rgba(255, 236, 214, 0.08); }

/* Header stays readable on the left and lets the moon show through on the right. */
html[data-theme="halloween"] .profile-header {
  border-bottom-color: rgba(255, 138, 61, 0.1);
  background: linear-gradient(90deg, rgba(11, 9, 16, 0.9) 0%, rgba(11, 9, 16, 0.66) 34%, rgba(11, 9, 16, 0.16) 100%);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.5), 0 10px 30px rgba(0, 0, 0, 0.25);
}
html[data-theme="halloween"] .profile-header::after { content: none; }
html[data-theme="halloween"] .profile-header::before {
  content: "";
  position: absolute;
  top: 0;
  right: 84px;
  width: 18px;
  height: 88px;
  background: url("/assets/themes/spider.webp") center top / contain no-repeat;
  filter: brightness(1.7) drop-shadow(0 0 5px rgba(255, 138, 61, 0.35));
  transform-origin: 50% 0;
  animation: hw-spider 7s ease-in-out infinite;
  pointer-events: none;
}
@keyframes hw-spider {
  0%, 100% { transform: rotate(-3deg) translateY(-4px); }
  50% { transform: rotate(3deg) translateY(2px); }
}

/*
 * Frames are 9-slice border-images: corners keep their exact shape, rails stretch
 * only along the grain. The outset lets the frame straddle the card edge, so the
 * column gap has to cover two outsets plus the bat over each title.
 * Every container gets its own frame and its own props; only the bats repeat.
 */
html[data-theme="halloween"] .inspector-status-focus { gap: 46px; padding: 24px 18px 8px 10px; overflow: visible; }
html[data-theme="halloween"] .inspector-status-section + .inspector-status-section { margin-top: 0; }

/* Hero plate: chiselled stone, the one stone piece among the wooden ones. */
html[data-theme="halloween"] .inspector-hero-card,
html[data-theme="halloween"] .inspector-hero-card.is-premium {
  isolation: isolate;
  overflow: visible;
  z-index: 3;
  padding: 22px 24px;
  border: 1px solid transparent;
  border-radius: 14px;
  border-image: url("/assets/themes/frame-hero.webp?v=hw7") 86 / 43px / 18px stretch;
  background:
    url("/assets/themes/web-corner-r.webp") right 4px top 4px / 104px auto no-repeat,
    radial-gradient(90% 70% at 100% 0%, rgba(255, 110, 40, 0.07), transparent 60%),
    linear-gradient(180deg, #17131d, #120f17);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55), 0 0 30px rgba(255, 110, 40, 0.06);
}
html[data-theme="halloween"] .inspector-hero-card::before,
html[data-theme="halloween"] .inspector-hero-card.is-premium::before {
  content: "";
  position: absolute;
  top: -36px;
  left: 50%;
  right: auto;
  width: 196px;
  height: 55px;
  transform: translateX(-50%);
  background: url("/assets/themes/bat.webp") center / contain no-repeat;
  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.7));
  opacity: 1;
  z-index: 2;
  pointer-events: none;
}
html[data-theme="halloween"] .inspector-hero-card::after {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 8px;
  background: url("/assets/themes/cracks.webp") center / cover no-repeat;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, transparent 30%, transparent 70%, #000 100%);
  mask-image: linear-gradient(90deg, #000 0%, transparent 30%, transparent 70%, #000 100%);
  opacity: 0.5;
  z-index: -1;
  pointer-events: none;
  animation: hw-ember 5.5s ease-in-out infinite alternate;
}
@keyframes hw-ember {
  from { opacity: 0.34; }
  to { opacity: 0.66; }
}
html[data-theme="halloween"] .inspector-hero-card-inner { position: relative; z-index: 4; }
html[data-theme="halloween"] .inspector-hero-card-inner > * { position: relative; z-index: 2; }
html[data-theme="halloween"] .inspector-hero-card-inner::before,
html[data-theme="halloween"] .inspector-hero-card-inner::after {
  content: "";
  position: absolute;
  z-index: 1;
  pointer-events: none;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}
html[data-theme="halloween"] .inspector-hero-card-inner::before { content: none; }
html[data-theme="halloween"] .inspector-hero-card-inner::after {
  right: -42px;
  top: 16%;
  bottom: auto;
  width: 46px;
  height: 84px;
  background-image: url("/assets/themes/skull-candle.webp");
  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.7)) drop-shadow(0 0 14px rgba(255, 170, 80, 0.45));
}

/* Premium hangs as a sealed parchment tag instead of a pill. */
html[data-theme="halloween"] .inspector-hero-premium-badge {
  position: relative;
  z-index: 3;
  min-width: 112px;
  min-height: 68px;
  margin: -34px -8px -12px 0;
  padding: 22px 22px 12px;
  border: 0;
  border-radius: 0;
  background: url("/assets/themes/parchment.webp") center / 100% 100% no-repeat;
  color: #4a2810;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-shadow: 0 1px 0 rgba(255, 236, 200, 0.45);
  box-shadow: none;
  transform: rotate(-3deg);
  transform-origin: 50% 0;
  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.55));
}

/* Sections: wooden logs, each with its own grain, ivy or moss. */
html[data-theme="halloween"] .inspector-status-section {
  position: relative;
  isolation: isolate;
  z-index: 1;
  padding: 22px;
  border: 1px solid transparent;
  border-radius: 22px;
  border-image: url("/assets/themes/frame-vitals.webp?v=hw7") 84 / 42px / 16px stretch;
  background: linear-gradient(180deg, rgba(22, 18, 28, 0.97), rgba(17, 13, 23, 0.97));
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.45);
}
html[data-theme="halloween"] .inspector-status-section[data-sec="vitals"] {
  z-index: 2;
  background:
    url("/assets/themes/web-corner-r.webp") right 6px top 6px / 96px auto no-repeat,
    linear-gradient(180deg, rgba(22, 18, 28, 0.97), rgba(17, 13, 23, 0.97));
}
html[data-theme="halloween"] .inspector-status-section[data-sec="attrs"] {
  border-image: url("/assets/themes/frame-attrs.webp?v=hw7") 86 / 43px / 16px stretch;
  background:
    url("/assets/themes/web-corner.webp") left 6px top 6px / 92px auto no-repeat,
    linear-gradient(180deg, rgba(22, 18, 28, 0.97), rgba(17, 13, 23, 0.97));
}
html[data-theme="halloween"] .inspector-status-section[data-sec="combat"] {
  border-image: url("/assets/themes/frame-combat.webp?v=hw7") 80 / 40px / 16px stretch;
  background:
    url("/assets/themes/web-corner-r.webp") right 6px top 6px / 110px auto no-repeat,
    url("/assets/themes/web-corner.webp") left 6px top 6px / 70px auto no-repeat,
    radial-gradient(80% 60% at 50% 0%, rgba(139, 108, 255, 0.07), transparent 70%),
    linear-gradient(180deg, rgba(22, 18, 28, 0.97), rgba(16, 12, 22, 0.97));
}
html[data-theme="halloween"] .inspector-status-section[data-sec="res"] {
  border-image: url("/assets/themes/frame-res.webp?v=hw7") 88 / 44px / 16px stretch;
  background:
    url("/assets/themes/web-corner-r.webp") right 6px top 6px / 88px auto no-repeat,
    linear-gradient(180deg, rgba(22, 18, 28, 0.97), rgba(17, 13, 23, 0.97));
}
html[data-theme="halloween"] .inspector-status-section[data-sec="tools"] {
  border-image: url("/assets/themes/frame-tools.webp?v=hw7") 80 / 40px / 16px stretch;
  background:
    url("/assets/themes/web-corner.webp") left 6px top 6px / 84px auto no-repeat,
    linear-gradient(180deg, rgba(22, 18, 28, 0.97), rgba(17, 13, 23, 0.97));
}

/* Props sit on the frames themselves, not on the page background. */
html[data-theme="halloween"] .inspector-status-section[data-sec]::before,
html[data-theme="halloween"] .inspector-status-section[data-sec] > .inspector-status-section-body::before,
html[data-theme="halloween"] .inspector-status-section[data-sec] > .inspector-status-section-head::before {
  content: "";
  position: absolute;
  z-index: 1;
  pointer-events: none;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

/* Vitals: jack-o'-lantern on the corner, skull lantern on a chain, spilled candy. */
html[data-theme="halloween"] .inspector-status-section[data-sec="vitals"] > .inspector-status-section-head::before {
  left: -40px;
  top: -4px;
  width: 54px;
  height: 56px;
  background-image: url("/assets/themes/pumpkin-jack.webp");
  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.7)) drop-shadow(0 0 16px rgba(255, 130, 40, 0.5));
}
html[data-theme="halloween"] .inspector-status-section[data-sec="vitals"]::before {
  right: -36px;
  top: -6px;
  width: 50px;
  height: 148px;
  background-image: url("/assets/themes/skull-lantern.webp");
  transform-origin: 50% 3px;
  filter: brightness(1.15) drop-shadow(0 8px 10px rgba(0, 0, 0, 0.65)) drop-shadow(0 0 20px rgba(255, 150, 50, 0.55));
  animation: hw-lantern 6s ease-in-out infinite;
}
html[data-theme="halloween"] .inspector-status-section[data-sec="vitals"] > .inspector-status-section-body::before {
  left: -22px;
  bottom: -20px;
  width: 78px;
  height: 42px;
  background-image: url("/assets/themes/candy.webp");
  filter: drop-shadow(0 5px 6px rgba(0, 0, 0, 0.7));
}

/* Attributes: blue mushrooms on the left of the top log, a raven, a warty pumpkin. */
html[data-theme="halloween"] .inspector-status-section[data-sec="attrs"] > .inspector-status-section-head::before {
  left: -16px;
  top: -30px;
  width: 62px;
  height: 80px;
  z-index: 5;
  background-image: url("/assets/themes/mushrooms.webp");
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 12px rgba(60, 230, 230, 0.45));
}
html[data-theme="halloween"] .inspector-status-section[data-sec="attrs"]::before {
  right: 54px;
  top: -58px;
  width: 72px;
  height: 66px;
  background-image: url("/assets/themes/raven.webp");
  filter: drop-shadow(0 6px 6px rgba(0, 0, 0, 0.7)) drop-shadow(0 0 1px rgba(170, 160, 255, 0.6));
}
html[data-theme="halloween"] .inspector-status-section[data-sec="attrs"] > .inspector-status-section-body::before {
  right: -30px;
  bottom: -24px;
  width: 76px;
  height: 66px;
  background-image: url("/assets/themes/pumpkin-plain.webp");
  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.7));
}

/* Combat: amber toadstools and an apothecary's bottles. */
html[data-theme="halloween"] .inspector-status-section[data-sec="combat"] > .inspector-status-section-head::before {
  left: -56px;
  top: -64px;
  width: 58px;
  height: 80px;
  background-image: url("/assets/themes/mushrooms-orange.webp");
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 14px rgba(255, 150, 50, 0.45));
}
html[data-theme="halloween"] .inspector-status-section[data-sec="combat"]::before {
  right: -26px;
  bottom: -20px;
  width: 58px;
  height: 88px;
  background-image: url("/assets/themes/potions.webp");
  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.65)) drop-shadow(0 0 14px rgba(170, 90, 255, 0.4));
}

/* Resources: a pile of pumpkins and a cluster of candles. */
html[data-theme="halloween"] .inspector-status-section[data-sec="res"] > .inspector-status-section-head::before {
  left: -60px;
  top: -64px;
  width: 92px;
  height: 80px;
  background-image: url("/assets/themes/pumpkin-pile.webp");
  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.7)) drop-shadow(0 0 14px rgba(255, 130, 40, 0.4));
}
html[data-theme="halloween"] .inspector-status-section[data-sec="res"]::before {
  left: -16px;
  bottom: -16px;
  width: 38px;
  height: 76px;
  background-image: url("/assets/themes/candles.webp");
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 14px rgba(255, 170, 70, 0.55));
}

/* Tools: an old lantern, a spellbook, a burning jack-o'-lantern. */
html[data-theme="halloween"] .inspector-status-section[data-sec="tools"]::before {
  left: -28px;
  top: -18px;
  width: 50px;
  height: 148px;
  background-image: url("/assets/themes/lantern.webp");
  transform-origin: 50% 3px;
  filter: brightness(1.35) drop-shadow(0 8px 10px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 16px rgba(255, 140, 50, 0.55));
  animation: hw-lantern 7s ease-in-out -2s infinite;
}
html[data-theme="halloween"] .inspector-status-section[data-sec="tools"] > .inspector-status-section-head::before {
  right: -50px;
  top: -66px;
  width: 52px;
  height: 74px;
  background-image: url("/assets/themes/pumpkin-flame.webp");
  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.7)) drop-shadow(0 0 18px rgba(255, 130, 40, 0.6));
}
html[data-theme="halloween"] .inspector-status-section[data-sec="tools"] > .inspector-status-section-body::before {
  right: -30px;
  bottom: -22px;
  width: 88px;
  height: 72px;
  background-image: url("/assets/themes/spellbook.webp");
  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.7)) drop-shadow(0 0 10px rgba(160, 100, 255, 0.35));
}
@keyframes hw-lantern {
  0%, 100% { transform: rotate(-2.5deg); }
  50% { transform: rotate(2.5deg); }
}

html[data-theme="halloween"] .inspector-status-section::after {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 14px;
  background: url("/assets/themes/cracks.webp") center / cover no-repeat;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, transparent 22%, transparent 78%, #000 100%);
  mask-image: linear-gradient(90deg, #000 0%, transparent 22%, transparent 78%, #000 100%);
  opacity: 0.22;
  z-index: -1;
  pointer-events: none;
}
html[data-theme="halloween"] .inspector-status-section[data-sec="attrs"]::after,
html[data-theme="halloween"] .inspector-status-section[data-sec="res"]::after { transform: scaleX(-1); }
html[data-theme="halloween"] .inspector-status-section[data-sec="combat"]::after { transform: scaleY(-1); }

html[data-theme="halloween"] .inspector-equip-body-layout .inspector-equip-slot {
  position: relative;
  isolation: isolate;
  border: 1px solid transparent;
  border-radius: 14px;
  border-image: url("/assets/themes/frame-slot.webp?v=hw7") 60 / 24px / 8px stretch;
  background:
    url("/assets/themes/web-corner-r.webp") right 4px top 4px / 44px auto no-repeat,
    var(--surface-2);
}
html[data-theme="halloween"] .inspector-equip-body-layout .inspector-equip-slot::after {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 10px;
  background: url("/assets/themes/cracks.webp") center / cover no-repeat;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, transparent 20%, transparent 80%, #000 100%);
  mask-image: linear-gradient(90deg, #000 0%, transparent 20%, transparent 80%, #000 100%);
  opacity: 0.2;
  z-index: -1;
  pointer-events: none;
}

/* A bat perches on the top log of every section, right above the title. */
html[data-theme="halloween"] .inspector-status-section-head { position: relative; }
html[data-theme="halloween"] .inspector-status-section-body { position: relative; z-index: 2; }
html[data-theme="halloween"] .inspector-status-section-head::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -58px;
  width: 196px;
  height: 55px;
  transform: translateX(-50%);
  background: url("/assets/themes/bat.webp") center / contain no-repeat;
  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.7));
  pointer-events: none;
  z-index: 0;
}
html[data-theme="halloween"] .inspector-status-section-title { position: relative; z-index: 1; color: #d8cbe0; letter-spacing: 0.1em; }

/* Stat cells: silk cobwebs strung across both top corners. */
html[data-theme="halloween"] .inspector-stat-cell,
html[data-theme="halloween"] .inspector-stat-tile {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(70% 60% at 50% 100%, rgba(255, 110, 40, 0.06), transparent 70%),
    linear-gradient(180deg, #1e1825, #17121d);
  border-color: rgba(150, 96, 52, 0.42);
  box-shadow: inset 0 1px 0 rgba(255, 220, 180, 0.04), inset 0 -10px 18px rgba(0, 0, 0, 0.25);
}
html[data-theme="halloween"] .inspector-stat-cell::before,
html[data-theme="halloween"] .inspector-stat-tile::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background:
    url("/assets/themes/web-corner.webp") left top / 48px auto no-repeat,
    url("/assets/themes/web-corner-r.webp") right top / 48px auto no-repeat;
  opacity: 1;
  filter: brightness(1.7) drop-shadow(0 0 3px rgba(150, 190, 255, 0.5));
  z-index: -1;
  pointer-events: none;
}

/* Divider: a lit pumpkin replaces the gem. */
html[data-theme="halloween"] .app-divider__line {
  background: linear-gradient(90deg, transparent, rgba(255, 138, 61, 0.1) 12%, rgba(255, 164, 92, 0.42) 50%, rgba(255, 138, 61, 0.1) 88%, transparent);
}
html[data-theme="halloween"] .app-divider__line--left::after,
html[data-theme="halloween"] .app-divider__line--right::before,
html[data-theme="halloween"] .app-divider__ornament::before,
html[data-theme="halloween"] .app-divider__ornament::after {
  background: rgba(255, 164, 92, 0.6);
  box-shadow: 0 0 6px rgba(255, 138, 61, 0.45);
}
html[data-theme="halloween"] .app-divider__ornament i {
  width: 21px;
  height: 18px;
  transform: none;
  background: url("/assets/themes/pumpkin-jack.webp") center / contain no-repeat;
  box-shadow: none;
  filter: brightness(1.2) drop-shadow(0 0 6px rgba(255, 120, 40, 0.55));
}
html[data-theme="halloween"] .app-divider--compact .app-divider__ornament i { width: 16px; height: 14px; }

/* Empty portrait: a pumpkin in the dark instead of a picture-frame emoji. */
html[data-theme="halloween"] .inspector-portrait-frame,
html[data-theme="halloween"] .inspector-hero-portrait-slot {
  background:
    radial-gradient(70% 60% at 50% 62%, rgba(255, 110, 40, 0.1), transparent 70%),
    linear-gradient(170deg, #1a1520, #0f0c14);
  border-color: rgba(255, 138, 61, 0.28);
  border-radius: 22px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45);
}
html[data-theme="halloween"] .inspector-hero-portrait-slot { border-radius: 16px; box-shadow: none; }
/* The portrait image fills the box, so the plank is an overlay drawn above it. */
html[data-theme="halloween"] .inspector-portrait-frame::after {
  inset: 0;
  z-index: 2;
  border: 1px solid transparent;
  border-radius: 0;
  border-image: url("/assets/themes/frame-portrait.webp?v=hw7") 70 / 35px stretch;
  background: none;
  box-shadow: none;
  pointer-events: none;
}
html[data-theme="halloween"] .inspector-portrait-placeholder-icon,
html[data-theme="halloween"] .inspector-hero-portrait-fallback {
  font-size: 0 !important;
  color: transparent;
  opacity: 1;
  background: url("/assets/themes/pumpkin-jack.webp") center / contain no-repeat;
  filter: drop-shadow(0 0 14px rgba(255, 110, 40, 0.35));
}
html[data-theme="halloween"] .inspector-portrait-placeholder-icon { width: 72px; height: 62px; }
html[data-theme="halloween"] .inspector-portrait-placeholder--inline .inspector-portrait-placeholder-icon { width: 46px; height: 40px; }
html[data-theme="halloween"] .inspector-hero-portrait-fallback { background-size: 58%; }

html[data-theme="halloween"] .inspector-xp-track {
  overflow: visible;
  background: rgba(255, 236, 214, 0.06);
}
html[data-theme="halloween"] .inspector-xp-fill {
  position: relative;
  overflow: visible;
  background: linear-gradient(90deg, #c94a12, #ff8a3d 62%, #ffbe7a);
  box-shadow: 0 0 10px rgba(255, 138, 61, 0.4);
}
html[data-theme="halloween"] .inspector-xp-fill::after {
  content: "";
  position: absolute;
  right: -14px;
  top: 50%;
  width: 28px;
  height: 40px;
  transform: translateY(-66%);
  background: url("/assets/themes/pumpkin-flame.webp") center / contain no-repeat;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 10px rgba(255, 120, 40, 0.8));
  pointer-events: none;
}

html[data-theme="halloween"] .mobile-nav { border-top-color: rgba(255, 138, 61, 0.1); }
html[data-theme="halloween"] .mobile-nav::before {
  background: linear-gradient(180deg, rgba(139, 108, 255, 0.04), rgba(0, 0, 0, 0.3));
}
html[data-theme="halloween"] .mobile-nav .nav-link.active,
html[data-theme="halloween"] .mobile-nav .nav-link[data-tab="guild"].active {
  color: #ffb27a;
  background: rgba(255, 138, 61, 0.12);
  border-color: rgba(255, 138, 61, 0.3);
  box-shadow: inset 0 1px 0 rgba(255, 220, 180, 0.06), 0 0 22px rgba(255, 110, 40, 0.16);
}
html[data-theme="halloween"] .inspector-inv-filter-chip.is-active,
html[data-theme="halloween"] .inspector-inv-bulk-chip.is-active {
  color: #1a0d05;
  background: #ff9a52;
  border-color: #ff9a52;
  box-shadow: 0 0 14px rgba(255, 138, 61, 0.3);
}

html[data-theme="halloween"] #panel-guild,
html[data-theme="halloween"] #guild-info-modal {
  --g-surface: #1a1520;
  --g-surface-2: #221b2a;
  --g-line: rgba(255, 236, 214, 0.08);
  --g-gold: #e9b872;
  --g-gold-soft: rgba(233, 184, 114, 0.12);
  --g-gold-border: rgba(233, 184, 114, 0.36);
}

html[data-theme="halloween"] .login-card {
  background: linear-gradient(165deg, rgba(27, 22, 34, 0.95), rgba(13, 11, 18, 0.97));
  border-color: rgba(255, 236, 214, 0.08);
}
html[data-theme="halloween"] .login-card::before {
  background: radial-gradient(circle, rgba(255, 122, 48, 0.14) 0%, rgba(255, 122, 48, 0) 72%);
}

@media (max-width: 768px) {
  html[data-theme="halloween"] .profile-header {
    background: linear-gradient(90deg, rgba(11, 9, 16, 0.92) 0%, rgba(11, 9, 16, 0.72) 70%, rgba(11, 9, 16, 0.28) 100%);
  }
  html[data-theme="halloween"] .profile-header::before { right: 8px; height: 72px; width: 14px; }
  html[data-theme="halloween"] .inspector-status-focus { gap: 36px; padding: 18px 14px 8px 6px; }
  html[data-theme="halloween"] .inspector-hero-card,
  html[data-theme="halloween"] .inspector-hero-card.is-premium {
    padding: 16px;
    border-radius: 12px;
    border-image-width: 34px;
    border-image-outset: 13px;
    background-size: 76px auto, auto, auto;
  }
  html[data-theme="halloween"] .inspector-hero-card::before,
  html[data-theme="halloween"] .inspector-hero-card.is-premium::before { top: -26px; width: 140px; height: 39px; }
  html[data-theme="halloween"] .inspector-hero-card-inner::before { content: none; }
  html[data-theme="halloween"] .inspector-hero-card-inner::after { width: 32px; height: 58px; right: -22px; top: 14%; bottom: auto; }
  html[data-theme="halloween"] .inspector-status-section,
  html[data-theme="halloween"] .inspector-status-section[data-sec] {
    padding: 16px;
    border-radius: 18px;
    border-image-width: 34px;
    border-image-outset: 13px;
  }
  html[data-theme="halloween"] .inspector-status-section[data-sec="combat"],
  html[data-theme="halloween"] .inspector-status-section[data-sec="tools"] { border-image-width: 32px; }
  html[data-theme="halloween"] .inspector-status-section[data-sec="res"] { border-image-width: 35px; }
  html[data-theme="halloween"] .inspector-status-section[data-sec="vitals"],
  html[data-theme="halloween"] .inspector-status-section[data-sec="attrs"],
  html[data-theme="halloween"] .inspector-status-section[data-sec="res"],
  html[data-theme="halloween"] .inspector-status-section[data-sec="tools"] { background-size: 64px auto, auto; }
  html[data-theme="halloween"] .inspector-status-section[data-sec="combat"] { background-size: 72px auto, 48px auto, auto, auto; }

  html[data-theme="halloween"] .inspector-status-section[data-sec="vitals"] > .inspector-status-section-head::before { width: 40px; height: 42px; left: -22px; top: -2px; }
  html[data-theme="halloween"] .inspector-status-section[data-sec="vitals"]::before { width: 34px; height: 100px; right: -18px; top: -4px; }
  html[data-theme="halloween"] .inspector-status-section[data-sec="vitals"] > .inspector-status-section-body::before { width: 52px; height: 28px; left: -12px; bottom: -12px; }

  html[data-theme="halloween"] .inspector-status-section[data-sec="attrs"] > .inspector-status-section-head::before { width: 46px; height: 60px; left: -10px; top: -20px; }
  html[data-theme="halloween"] .inspector-status-section[data-sec="attrs"]::before { width: 48px; height: 44px; right: 34px; top: -42px; }
  html[data-theme="halloween"] .inspector-status-section[data-sec="attrs"] > .inspector-status-section-body::before { width: 50px; height: 44px; right: -14px; bottom: -14px; }

  html[data-theme="halloween"] .inspector-status-section[data-sec="combat"] > .inspector-status-section-head::before { width: 38px; height: 52px; left: -30px; top: -44px; }
  html[data-theme="halloween"] .inspector-status-section[data-sec="combat"]::before { width: 38px; height: 58px; right: -12px; bottom: -12px; }

  html[data-theme="halloween"] .inspector-status-section[data-sec="res"] > .inspector-status-section-head::before { width: 62px; height: 54px; left: -34px; top: -46px; }
  html[data-theme="halloween"] .inspector-status-section[data-sec="res"]::before { width: 26px; height: 52px; left: -8px; bottom: -10px; }

  html[data-theme="halloween"] .inspector-status-section[data-sec="tools"]::before { width: 34px; height: 100px; left: -12px; top: -12px; }
  html[data-theme="halloween"] .inspector-status-section[data-sec="tools"] > .inspector-status-section-head::before { width: 36px; height: 51px; right: -28px; top: -46px; }
  html[data-theme="halloween"] .inspector-status-section[data-sec="tools"] > .inspector-status-section-body::before { width: 58px; height: 48px; right: -14px; bottom: -14px; }

  html[data-theme="halloween"] .inspector-status-section-head::after { width: 140px; height: 39px; top: -44px; }
  html[data-theme="halloween"] .inspector-stat-cell::before,
  html[data-theme="halloween"] .inspector-stat-tile::before { background-size: 30px auto, 30px auto; }
  html[data-theme="halloween"] .inspector-xp-fill::after { width: 22px; height: 31px; right: -11px; }
  html[data-theme="halloween"] .inspector-equip-body-layout .inspector-equip-slot { border-image-width: 20px; border-image-outset: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-theme="halloween"] .profile-header::before,
  html[data-theme="halloween"] .inspector-hero-card::after,
  html[data-theme="halloween"] .inspector-status-section[data-sec]::before,
  html[data-theme="halloween"] .hw-load-sky i,
  html[data-theme="halloween"] .hw-load-sky b,
  html[data-theme="halloween"] .hw-load-halo { animation: none; }
}

/* ---------- Surfaces that were painted for the purple tower ----------
   Altar modals, auto-scatter chips, guild crystals, empty portrait, mobile menu. */
@media (max-width: 768px) {
  html[data-theme] .header-profile-menu { background: var(--menu-bg); }
  /* Phone cards stack the picture on top; the desktop side fade must not win there. */
  html[data-theme="halloween"] .class-menu-card-overlay {
    background: linear-gradient(180deg, rgba(23, 18, 29, 0.04) 0%, rgba(23, 18, 29, 0.12) 26%, rgba(23, 18, 29, 0.7) 46%, #17121d 56%, #17121d 100%);
  }
  html[data-theme="vk-dark"] .class-menu-card-overlay {
    background: linear-gradient(180deg, rgba(25, 25, 25, 0.04) 0%, rgba(25, 25, 25, 0.12) 26%, rgba(25, 25, 25, 0.7) 46%, #191919 56%, #191919 100%);
  }
  html[data-theme="vk-light"] .class-menu-card-overlay {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.1) 26%, rgba(255, 255, 255, 0.78) 46%, #fff 56%, #fff 100%);
  }
  html[data-theme="vk-light"] .class-menu-card-sub { color: #3e4651; }
  html[data-theme="vk-light"] .ratings-panel-wrap .rating-mode-card .class-menu-card-overlay {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.12) 28%, rgba(255, 255, 255, 0.82) 46%, #fff 56%, #fff 100%);
  }
  html[data-theme="vk-dark"] .ratings-panel-wrap .rating-mode-card .class-menu-card-overlay {
    background: linear-gradient(180deg, rgba(25, 25, 25, 0.04) 0%, rgba(25, 25, 25, 0.16) 28%, rgba(25, 25, 25, 0.78) 46%, #191919 56%, #191919 100%);
  }
  html[data-theme="halloween"] .ratings-panel-wrap .rating-mode-card .class-menu-card-overlay {
    background: linear-gradient(180deg, rgba(23, 18, 29, 0.04) 0%, rgba(23, 18, 29, 0.16) 28%, rgba(23, 18, 29, 0.78) 46%, #17121d 56%, #17121d 100%);
  }
  html[data-theme="vk-light"] .ratings-panel-wrap .rating-mode-card .class-menu-card-title {
    color: #121417;
    text-shadow: none;
  }
  html[data-theme="vk-light"] .ratings-panel-wrap .rating-mode-card .class-menu-card-sub {
    color: #3e4651;
    text-shadow: none;
  }
  html[data-theme="vk-dark"] .ratings-panel-wrap .rating-mode-card .class-menu-card-title,
  html[data-theme="halloween"] .ratings-panel-wrap .rating-mode-card .class-menu-card-title {
    color: #f4f1ea;
    text-shadow: none;
  }
  html[data-theme="vk-dark"] .ratings-panel-wrap .rating-mode-card .class-menu-card-sub {
    color: #c4c8d0;
  }
  html[data-theme="halloween"] .ratings-panel-wrap .rating-mode-card .class-menu-card-sub {
    color: #d9cfdc;
  }
}

/* Light */
html[data-theme="vk-light"] .altar-chances-block,
html[data-theme="vk-light"] .altar-chances-block--rules,
html[data-theme="vk-light"] .altar-chances-block--tree,
html[data-theme="vk-light"] .altar-chances-block--rarities {
  background: #fff;
  border-color: #e1e4e8;
  box-shadow: 0 1px 2px rgba(16, 18, 22, 0.05);
}
html[data-theme="vk-light"] .altar-chances-title { color: #121417; }
html[data-theme="vk-light"] .altar-chances-title-icon { background: #eef3fb; border-color: #d3e0f2; }
html[data-theme="vk-light"] .altar-chances-sub { color: #5b3fb5; }
html[data-theme="vk-light"] .altar-chances-rules { color: #3e4651; }
html[data-theme="vk-light"] .altar-chances-outcome { background: #f6f7f9; border-color: #e4e7ec; }
html[data-theme="vk-light"] .altar-chances-outcome-label,
html[data-theme="vk-light"] .altar-chances-child-label { color: #1c1e21; }
html[data-theme="vk-light"] .altar-chances-outcome-note { color: #5c6570; }
html[data-theme="vk-light"] .altar-chances-outcome-pct,
html[data-theme="vk-light"] .altar-chances-child-pct { color: #4a2fa0; }
html[data-theme="vk-light"] .altar-chances-meter { background: #e6e9ee; }
html[data-theme="vk-light"] .altar-chances-children { border-left-color: #cfd6e0; }
html[data-theme="vk-light"] .altar-scatter-title { color: #3b2764; }
html[data-theme="vk-light"] .altar-scatter-hint,
html[data-theme="vk-light"] .altar-scatter-locked { color: #5c6570; }
html[data-theme="vk-light"] .altar-scatter-chip {
  background: #f4f0ff;
  border-color: #cfc3f2;
  color: #1c1e21;
}
html[data-theme="vk-light"] .altar-scatter-chip-reward { color: #5b3fb5; }
html[data-theme="vk-light"] .altar-scatter-chip.is-on {
  background: #e4d9ff;
  border-color: #7c5ce0;
  color: #2e1065;
  box-shadow: 0 0 0 1px rgba(124, 92, 224, 0.25);
}
html[data-theme="vk-light"] .altar-secondary-btn { color: #3b2764; }
html[data-theme="vk-light"] .altar-secondary-btn.is-active { color: #2e1065; background: #e4d9ff; border-color: #7c5ce0; }
html[data-theme="vk-light"] #panel-guild,
html[data-theme="vk-light"] #guild-info-modal {
  --g-accent: hsl(36 80% 30%);
  --g-accent-soft: hsl(42 85% 52% / 0.2);
  --g-accent-border: hsl(36 60% 36% / 0.45);
}
html[data-theme="vk-light"] .g-stat.is-accent .g-stat-value { color: #7a5214; }
html[data-theme="vk-light"] .g-stat-label { color: #4b5563; }
@media (max-width: 768px) {
  html[data-theme="vk-light"] .class-menu-card-icon,
  html[data-theme="vk-light"] .ratings-panel-wrap .rating-mode-card .class-menu-card-icon {
    background: rgba(255, 255, 255, 0.92);
    border-color: #d9dee5;
  }
  html[data-theme="vk-light"] .class-menu-card--no-image .class-menu-card-icon,
  html[data-theme="vk-light"] .ratings-panel-wrap .rating-mode-card.class-menu-card--no-image .class-menu-card-icon {
    background: transparent;
    border: none;
  }
}

/* Dark: neutral graphite instead of violet glass and cyan-navy portrait. */
html[data-theme="vk-dark"] .altar-chances-block,
html[data-theme="vk-dark"] .altar-chances-block--rules,
html[data-theme="vk-dark"] .altar-chances-block--tree,
html[data-theme="vk-dark"] .altar-chances-block--rarities {
  background: #1f1f1f;
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: none;
}
html[data-theme="vk-dark"] .altar-chances-title { color: #f2f3f5; }
html[data-theme="vk-dark"] .altar-chances-title-icon { background: rgba(113, 170, 235, 0.14); border-color: rgba(113, 170, 235, 0.32); }
html[data-theme="vk-dark"] .altar-chances-sub { color: #8eb8ea; }
html[data-theme="vk-dark"] .altar-chances-outcome,
html[data-theme="vk-dark"] .altar-chances-rarity { background: rgba(255, 255, 255, 0.03); border-color: rgba(255, 255, 255, 0.07); }
html[data-theme="vk-dark"] .altar-chances-outcome-pct,
html[data-theme="vk-dark"] .altar-chances-child-pct { color: #cfe2fb; }
html[data-theme="vk-dark"] .altar-chances-meter span { background: linear-gradient(90deg, #3d6ea8, #71aaeb); }
html[data-theme="vk-dark"] .altar-chances-meter--child span { background: linear-gradient(90deg, #355b88, #8eb8ea); }
html[data-theme="vk-dark"] .altar-chances-children { border-left-color: rgba(255, 255, 255, 0.12); }
html[data-theme="vk-dark"] .altar-scatter-title { color: #f2f3f5; }
html[data-theme="vk-dark"] .altar-scatter-chip { background: #262626; border-color: rgba(255, 255, 255, 0.1); }
html[data-theme="vk-dark"] .altar-scatter-chip-reward { color: #8eb8ea; }
html[data-theme="vk-dark"] .altar-scatter-chip.is-on {
  background: rgba(113, 170, 235, 0.18);
  border-color: #71aaeb;
  color: #f2f8ff;
  box-shadow: 0 0 0 1px rgba(113, 170, 235, 0.25);
}
html[data-theme="vk-dark"] .altar-secondary-btn { background: #2a2a2a; border-color: rgba(255, 255, 255, 0.12); color: #e1e3e6; }
html[data-theme="vk-dark"] .altar-secondary-btn.is-active { background: rgba(113, 170, 235, 0.18); border-color: #71aaeb; color: #f2f8ff; }
html[data-theme="vk-dark"] .altar-history-section,
html[data-theme="vk-dark"] .altar-history-section--scatter,
html[data-theme="vk-dark"] .altar-history-section--empty,
html[data-theme="vk-dark"] .altar-result-items li { background: #222; border-color: rgba(255, 255, 255, 0.08); }
html[data-theme="vk-dark"] .inspector-portrait-frame,
html[data-theme="vk-dark"] .inspector-hero-portrait-slot {
  background: linear-gradient(160deg, #222, #181818);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
}
html[data-theme="vk-dark"] .inspector-portrait-frame::after { border-color: rgba(255, 255, 255, 0.06); }
html[data-theme="vk-dark"] .inspector-portrait-frame.is-premium { border-color: rgba(142, 184, 234, 0.55); }
html[data-theme="vk-light"] .inspector-portrait-frame::after { border-color: rgba(0, 0, 0, 0.05); }

/* Halloween: the same blocks in ember and plum. */
html[data-theme="halloween"] .altar-chances-block,
html[data-theme="halloween"] .altar-chances-block--rules,
html[data-theme="halloween"] .altar-chances-block--tree,
html[data-theme="halloween"] .altar-chances-block--rarities {
  background: linear-gradient(180deg, #1b1622, #141018);
  border-color: rgba(255, 138, 61, 0.22);
}
html[data-theme="halloween"] .altar-chances-title-icon { background: rgba(255, 138, 61, 0.14); border-color: rgba(255, 138, 61, 0.32); }
html[data-theme="halloween"] .altar-chances-sub { color: #ffb27a; }
html[data-theme="halloween"] .altar-chances-outcome-pct,
html[data-theme="halloween"] .altar-chances-child-pct { color: #ffd2ae; }
html[data-theme="halloween"] .altar-chances-meter span { background: linear-gradient(90deg, #c94a12, #ffa45c); }
html[data-theme="halloween"] .altar-chances-meter--child span { background: linear-gradient(90deg, #a8431a, #ffb27a); }
html[data-theme="halloween"] .altar-scatter-chip { background: #1c1723; border-color: rgba(255, 138, 61, 0.22); }
html[data-theme="halloween"] .altar-scatter-chip-reward { color: #ffb27a; }
html[data-theme="halloween"] .altar-scatter-chip.is-on { background: rgba(255, 138, 61, 0.2); border-color: #ff8a3d; color: #fff3e6; }
html[data-theme="halloween"] .altar-secondary-btn { background: rgba(255, 138, 61, 0.08); border-color: rgba(255, 138, 61, 0.28); color: #ffd9bd; }
html[data-theme="halloween"] .altar-secondary-btn.is-active { background: rgba(255, 138, 61, 0.2); border-color: #ff8a3d; color: #fff3e6; }

/* Light theme: panels that stayed navy, and lilac copy that disappeared on white. */
html[data-theme="vk-light"] .class-skill-card,
html[data-theme="vk-light"] .class-lore,
html[data-theme="vk-light"] .class-upgrade-points,
html[data-theme="vk-light"] .altar-history-section,
html[data-theme="vk-light"] .altar-history-section--scatter,
html[data-theme="vk-light"] .altar-history-section--empty,
html[data-theme="vk-light"] .altar-chances-rarity,
html[data-theme="vk-light"] .altar-result-items li {
  background: #fff;
  color: #1c1e21;
  border-color: #e1e4e8;
}
html[data-theme="vk-light"] .class-skill-card--passive,
html[data-theme="vk-light"] .class-upgrade-points,
html[data-theme="vk-light"] .altar-amount-btn,
html[data-theme="vk-light"] .altar-secondary-btn {
  background: #f6f1ff;
  border-color: #ddd4f5;
  color: #3b2764;
}
html[data-theme="vk-light"] .class-skill-card--active {
  background: #f3f8ff;
  border-color: #d3e4fb;
  color: #1c1e21;
}
html[data-theme="vk-light"] .class-upgrade-points-label,
html[data-theme="vk-light"] .class-upgrade-points-value,
html[data-theme="vk-light"] .altar-amount-btn.is-active,
html[data-theme="vk-light"] .altar-secondary-btn.is-active {
  color: #4c1d95;
}
html[data-theme="vk-light"] .altar-amount-btn.is-active,
html[data-theme="vk-light"] .altar-secondary-btn.is-active {
  background: #efe6ff;
  border-color: #c4b5fd;
}
html[data-theme="vk-light"] .class-skill-badge,
html[data-theme="vk-light"] .class-skill-card--passive .class-skill-badge,
html[data-theme="vk-light"] .class-skill-chip,
html[data-theme="vk-light"] .altar-history-item-top,
html[data-theme="vk-light"] .altar-history-section-title,
html[data-theme="vk-light"] .altar-history-detail-title,
html[data-theme="vk-light"] .altar-chances-rarity-name,
html[data-theme="vk-light"] .altar-chances-rarity-pct,
html[data-theme="vk-light"] .altar-result-title {
  color: #4c1d95;
}
html[data-theme="vk-light"] .class-skill-card--active .class-skill-badge,
html[data-theme="vk-light"] .class-skill-chip {
  color: #0066dd;
  background: #e7f1ff;
  border-color: #c9ddf8;
}
html[data-theme="vk-light"] .altar-history-item-preview,
html[data-theme="vk-light"] .altar-chances-rarity-note,
html[data-theme="vk-light"] .altar-history-detail-line,
html[data-theme="vk-light"] .altar-history-detail-line.is-muted {
  color: #3e4651;
}
html[data-theme="vk-light"] .layout-kbd-btn--skill,
html[data-theme="vk-light"] .layout-palette-chip--skill { color: #4c1d95 !important; }
html[data-theme="vk-light"] .inspector-action-btn.is-primary {
  color: #fff;
  background: #0077ff;
  border-color: #0077ff;
}
html[data-theme="vk-light"] .inspector-modal-dialog,
html[data-theme="vk-light"] .inspector-equip-picker-dialog {
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.16);
}

/* Light: uncap, implants, battle keyboard. Inactive is a step dimmer, not a navy slab. */
html[data-theme="vk-light"] .inspector-uncap-pool,
html[data-theme="vk-light"] .inspector-implants-merge-summary {
  background: #eefaf6;
  border-color: #b7e4d6;
  box-shadow: none;
  color: #1c1e21;
}
html[data-theme="vk-light"] .inspector-uncap-pool-value,
html[data-theme="vk-light"] .inspector-uncap-row-next,
html[data-theme="vk-light"] .inspector-uncap-preview,
html[data-theme="vk-light"] .inspector-uncap-preview-gain,
html[data-theme="vk-light"] .inspector-implants-merge-count,
html[data-theme="vk-light"] .inspector-implants-merge-stack-count,
html[data-theme="vk-light"] .layout-validation.is-ok {
  color: #0f766e;
  text-shadow: none;
}
html[data-theme="vk-light"] .inspector-uncap-row,
html[data-theme="vk-light"] .inspector-uncap-controls,
html[data-theme="vk-light"] .inspector-uncap-step,
html[data-theme="vk-light"] .inspector-implants-merge-stack,
html[data-theme="vk-light"] .inspector-implants-item,
html[data-theme="vk-light"] .inspector-implants-pick,
html[data-theme="vk-light"] .inspector-implants-picker,
html[data-theme="vk-light"] .inspector-implant-picker-current,
html[data-theme="vk-light"] .inspector-lvlup-row.is-active {
  background: #fff;
  border-color: #e1e4e8;
  color: #1c1e21;
  box-shadow: none;
}
html[data-theme="vk-light"] .inspector-uncap-row.is-active,
html[data-theme="vk-light"] .inspector-implants-item.is-selected,
html[data-theme="vk-light"] .inspector-implants-merge-chip.is-selected,
html[data-theme="vk-light"] .inspector-lvlup-row.is-active {
  background: #f3fbf8;
  border-color: #7dcec0;
  color: #1c1e21;
}
html[data-theme="vk-light"] .inspector-uncap-row-cur,
html[data-theme="vk-light"] .inspector-uncap-row-hint,
html[data-theme="vk-light"] .inspector-uncap-row-cost,
html[data-theme="vk-light"] .inspector-uncap-pool-label,
html[data-theme="vk-light"] .inspector-uncap-preview-rest,
html[data-theme="vk-light"] .inspector-implants-merge-hint,
html[data-theme="vk-light"] .inspector-implants-merge-stack-hint {
  color: #3e4651;
}
html[data-theme="vk-light"] .inspector-uncap-row-cost strong,
html[data-theme="vk-light"] .inspector-lvlup-pool-value {
  color: #92600a;
}
html[data-theme="vk-light"] .inspector-lvlup-pool {
  background: #fff8e8;
  border-color: #f3e0a8;
}
html[data-theme="vk-light"] .inspector-uncap-preview,
html[data-theme="vk-light"] .layout-validation.is-ok {
  background: #ecfdf5;
  border-color: #a7f3d0;
}
html[data-theme="vk-light"] .inspector-implants-merge-chip.is-maxed,
html[data-theme="vk-light"] .inspector-implants-item.is-maxed,
html[data-theme="vk-light"] .inspector-implants-merge-stack.is-insufficient,
html[data-theme="vk-light"] .layout-palette-chip.is-used,
html[data-theme="vk-light"] .layout-kbd-row-btn:disabled {
  opacity: 0.42;
}
html[data-theme="vk-light"] .vk-kbd-preview,
html[data-theme="vk-light"] .layout-kbd-editor,
html[data-theme="vk-light"] .layout-kbd-editor--live,
html[data-theme="vk-light"] .layout-kbd-row-wrap,
html[data-theme="vk-light"] .inspector-layout-footer,
html[data-theme="vk-light"] .layout-rename-pop {
  background: #f4f5f7;
  border-color: #e1e4e8;
  box-shadow: none;
  color: #1c1e21;
}
html[data-theme="vk-light"] .vk-kbd-btn,
html[data-theme="vk-light"] .layout-kbd-btn,
html[data-theme="vk-light"] .layout-kbd-row-btn,
html[data-theme="vk-light"] .layout-preview-toggle,
html[data-theme="vk-light"] .inspector-layout-tab,
html[data-theme="vk-light"] .layout-kbd-add-row,
html[data-theme="vk-light"] .layout-enable-tactics,
html[data-theme="vk-light"] .layout-palette-search,
html[data-theme="vk-light"] .layout-rename-input,
html[data-theme="vk-light"] .layout-rename-actions button,
html[data-theme="vk-light"] .inspector-implants-merge-chip {
  background: #fff;
  border-color: #d5dae1;
  color: #1c1e21;
  box-shadow: 0 1px 0 #e7e8ec;
}
html[data-theme="vk-light"] .vk-kbd-btn--ghost,
html[data-theme="vk-light"] .layout-kbd-slot--empty {
  background: #e8eaee;
  border-color: #d5dae1;
  color: #6b7280;
  box-shadow: none;
}
html[data-theme="vk-light"] .inspector-layout-tab.is-active,
html[data-theme="vk-light"] .layout-preview-toggle.is-open,
html[data-theme="vk-light"] .layout-palette-chip.is-selected {
  background: #e7f1ff;
  border-color: #93c5fd;
  color: #0066dd;
  box-shadow: none;
}
html[data-theme="vk-light"] .layout-kbd-btn--skill,
html[data-theme="vk-light"] .layout-palette-chip--skill {
  background: #f6f1ff !important;
  border-color: #ddd6fe !important;
  color: #5b21b6 !important;
}
html[data-theme="vk-light"] .vk-kbd-preview-label,
html[data-theme="vk-light"] .layout-kbd-editor-label,
html[data-theme="vk-light"] .layout-section-label,
html[data-theme="vk-light"] .layout-palette-hint,
html[data-theme="vk-light"] .layout-palette-group-label,
html[data-theme="vk-light"] .vk-kbd-empty {
  color: #5c6570;
}
html[data-theme="vk-light"] .layout-rename-actions .is-primary {
  background: #0077ff;
  border-color: #0077ff;
  color: #fff;
}
html[data-theme="vk-light"] .layout-validation.is-warn {
  color: #92600a;
  background: #fff8e8;
  border-color: #f3e0a8;
}
html[data-theme="vk-light"] .inspector-item-card-stats--implant {
  background: #f4f6f8;
  border-color: #e1e4e8;
  color: #2c3138;
}
html[data-theme="vk-light"] .inspector-item-card-stats--implant .inspector-item-card-stat-val {
  color: #121417;
}
html[data-theme="vk-light"] .inspector-item-card-icon--implant {
  background: #eef0f3;
  border-color: #d5dae1;
}
html[data-theme="vk-light"] .inspector-inv-slots {
  background: #fff;
  color: #1c1e21;
  border-color: #d5dae1;
}
html[data-theme="vk-light"] .inspector-inv-slots.is-full {
  background: #fff1f1;
  color: #b42318;
  border-color: #f3d0d0;
}
html[data-theme="vk-light"] .inspector-implants-stage .inspector-equip-slot,
html[data-theme="vk-light"] .inspector-implant-slot,
html[data-theme="vk-light"] .inspector-equip-slot {
  background: #fff;
  border-color: #e1e4e8;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
html[data-theme="vk-light"] .inspector-equip-empty {
  background: #f4f5f7;
  border: 1px dashed #d5dae1;
  color: #5c6570;
  opacity: 1;
}
html[data-theme="vk-light"] .inspector-implant-slot.inspector-equip-slot--empty:hover,
html[data-theme="vk-light"] .inspector-equip-slot--empty:hover {
  background: #f3f7fb;
  border-color: #b9d4fb;
  box-shadow: none;
}
html[data-theme="vk-light"] .inspector-equip-implants-open {
  background: #eefaf6;
  color: #0f766e;
  border-color: #b7e4d6;
}
html[data-theme="vk-light"] .inspector-equip-battle-lock {
  background: #fff1f1;
  color: #b42318;
  border-color: #f3d0d0;
}
html[data-theme="vk-light"] .rating-modal-hero {
  background: #fff;
  border-color: #e1e4e8;
  color: #1c1e21;
}
html[data-theme="vk-light"] .rating-modal-hero-overlay {
  background: linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, 0.92) 42%, rgba(255, 255, 255, 0.2) 100%);
}
html[data-theme="vk-light"] .rating-modal-hero-title,
html[data-theme="vk-light"] .rating-modal-hero-sub {
  color: #1c1e21;
  text-shadow: none;
}
html[data-theme="vk-light"] .rating-modal-tab {
  border-color: #d5dbe3;
  background: #f4f5f7;
  color: #1c1e21;
}
html[data-theme="vk-light"] .rating-modal-tab.is-active {
  color: #0057c2;
  border-color: #8eb8f5;
  background: #e8f2ff;
}
html[data-theme="vk-dark"] .rating-modal-hero {
  background: #191919;
  border-color: rgba(255, 255, 255, 0.1);
}
html[data-theme="vk-dark"] .rating-modal-hero-overlay {
  background: linear-gradient(90deg, rgba(25, 25, 25, 0.94) 0%, rgba(25, 25, 25, 0.55) 55%, rgba(25, 25, 25, 0.12) 100%);
}
html[data-theme="vk-dark"] .rating-modal-hero-title { color: #f2f3f5; }
html[data-theme="vk-dark"] .rating-modal-hero-sub { color: #c4c8d0; }
html[data-theme="vk-dark"] .rating-modal-tab {
  border-color: rgba(255, 255, 255, 0.12);
  background: #262626;
  color: #e1e3e6;
}
html[data-theme="vk-dark"] .rating-modal-tab.is-active {
  color: #d6e8ff;
  border-color: rgba(113, 170, 235, 0.55);
  background: rgba(113, 170, 235, 0.16);
}
html[data-theme="halloween"] .rating-modal-hero {
  background: #17121d;
  border-color: rgba(255, 138, 61, 0.38);
}
html[data-theme="halloween"] .rating-modal-hero-overlay {
  background: linear-gradient(90deg, rgba(23, 18, 29, 0.94) 0%, rgba(23, 18, 29, 0.55) 55%, rgba(23, 18, 29, 0.12) 100%);
}
html[data-theme="halloween"] .rating-modal-hero-title { color: #f7f1ea; }
html[data-theme="halloween"] .rating-modal-hero-sub { color: #d9cfdc; }
html[data-theme="halloween"] .rating-modal-tab {
  border-color: rgba(255, 236, 214, 0.14);
  background: rgba(255, 138, 61, 0.06);
  color: #d9cfdc;
}
html[data-theme="halloween"] .rating-modal-tab.is-active {
  color: #ffd7b8;
  border-color: rgba(255, 138, 61, 0.5);
  background: rgba(255, 138, 61, 0.16);
}

/* Light hovers stay on a pale surface. Dark navy hover made the label disappear. */
html[data-theme="vk-light"] .inspector-equip-implants {
  background: #fff;
  border-color: #e1e4e8;
}
html[data-theme="vk-light"] .inspector-equip-implants::before,
html[data-theme="vk-light"] .inspector-implants-stage-bg {
  display: none;
}
html[data-theme="vk-light"] .inspector-equip-picker-card:hover,
html[data-theme="vk-light"] .inspector-item-card:hover,
html[data-theme="vk-light"] .inspector-inv-bulk-card:hover,
html[data-theme="vk-light"] .class-menu-card:hover,
html[data-theme="vk-light"] .g-card:hover,
html[data-theme="vk-light"] .class-mgmt-tile:hover:not(:disabled),
html[data-theme="vk-light"] .inspector-implants-merge-chip:hover:not(:disabled),
html[data-theme="vk-light"] .altar-history-item:hover,
html[data-theme="vk-light"] .altar-log-item:hover {
  background: #f3f7fb;
  border-color: #93c5fd;
  color: #1c1e21;
  box-shadow: 0 4px 14px rgba(16, 18, 22, 0.06);
}
html[data-theme="vk-light"] .inspector-equip-picker-card:hover .inspector-item-card-name,
html[data-theme="vk-light"] .inspector-equip-picker-card:hover .inspector-implant-desc,
html[data-theme="vk-light"] .inspector-equip-picker-card:hover .inspector-item-card-stats,
html[data-theme="vk-light"] .inspector-equip-picker-card:hover .inspector-item-card-stats--implant,
html[data-theme="vk-light"] .inspector-item-card:hover .inspector-item-card-name,
html[data-theme="vk-light"] .inspector-item-card:hover .inspector-item-card-stats--implant {
  color: #1c1e21;
  background: transparent;
}
html[data-theme="vk-light"] .inspector-hero-guild:hover {
  background: #fff8e8;
  border-color: #e7d3a1;
  box-shadow: none;
  color: #1c1e21;
}
html[data-theme="vk-light"] .inspector-equip-unequip:hover,
html[data-theme="vk-light"] .inspector-inv-action-btn--danger,
html[data-theme="vk-light"] .inspector-inv-action-btn--danger:hover,
html[data-theme="vk-light"] .inspector-topbar-btn:hover {
  background: #fff1f1;
  border-color: #f3d0d0;
  color: #b42318;
}