:root{
  color-scheme:dark;
  --bg:#0d0f12;
  --surface:#15181c;
  --surface-raised:#1c2025;
  --ink:#ece8e3;
  --muted:#a29d98;
  --line:#343941;
  --soft:#262a30;
  --haunted:#ff7a18;
  --haunted-soft:#3a2112;
  --damned:#28aaff;
  --damned-soft:#102a3b;
  --active-faction:#aaa1a1;
  --active-faction-soft:#282b31;
}

html,
body{
  background:var(--bg)!important;
  color:var(--ink)!important;
}

/* Prevent a flash of placeholder text, default SVG geometry, or pre-theme chrome while
   the bottom-of-page scripts transform the app DOM. front-ui.js releases this cloak
   after two animation frames, once the page's remaining classic scripts ran. */
body[data-page]:not(.app-ready) > *{visibility:hidden!important}

body{accent-color:var(--active-faction)}

.devbar{
  background:#111419!important;
  border-color:var(--line)!important;
  color:var(--muted)!important;
}

.devbar button,
.devbar a,
.panel,
.tabs,
.tab,
.list-item,
.button,
.bottom-nav,
.floating-bubble,
.pet-card,
.stat-card,
.hp-cell{
  background:var(--surface)!important;
  border-color:var(--line)!important;
  color:var(--ink)!important;
}

.panel,
.pet-card,
.stat-card{box-shadow:0 10px 28px rgb(0 0 0 / 20%)}

.feed-controls{background:var(--bg)!important}

.tabs{border-color:#424954!important}
.tab[aria-selected="true"],
.bottom-nav a[aria-current="page"],
.faction-chip{
  background:color-mix(in srgb,var(--active-faction) 15%,var(--surface))!important;
  border-color:var(--active-faction)!important;
  color:var(--active-faction)!important;
}
.tab[aria-selected="true"]{box-shadow:inset 0 -2px 0 var(--active-faction),0 0 12px color-mix(in srgb,var(--active-faction) 14%,transparent)}
.bottom-nav a[aria-current="page"]{box-shadow:inset 0 2px 0 var(--active-faction);text-shadow:0 0 9px color-mix(in srgb,var(--active-faction) 35%,transparent)}

.bottom-nav a+a{border-color:var(--line)!important}

.button.primary,
.camera-bubble,
.shutter{
  background:var(--active-faction)!important;
  border-color:var(--active-faction)!important;
  color:#071017!important;
  box-shadow:0 0 16px color-mix(in srgb,var(--active-faction) 38%,transparent);
}
.camera-bubble{box-shadow:0 0 20px color-mix(in srgb,var(--active-faction) 46%,transparent)}

.button.secondary,
.button.danger{background:var(--surface-raised)!important}

.field input,
.field select{
  background:var(--surface-raised)!important;
  border-color:var(--line)!important;
  color:var(--ink)!important;
}

.empty,
.slot,
.notice,
.pet-down{
  background:var(--surface-raised)!important;
  border-color:var(--line)!important;
  color:var(--muted)!important;
}

.capture-stage{
  background:#090b0e!important;
  border-color:var(--line)!important;
}
.live-camera,
.captured-camera-image{background:#0b0d10!important}
.camera-status{
  background:rgb(21 24 28 / 92%)!important;
  border-color:var(--line)!important;
  color:var(--muted)!important;
}

/* Battle Pet HUD accents. */
.hp-cell.is-empty,
.stat-tick{background:#2a2e35!important}
.hp-cell.is-full,
.stat-tick.on{
  background:var(--active-faction)!important;
  box-shadow:0 0 8px color-mix(in srgb,var(--active-faction) 45%,transparent)
}
.pet-art{
  background:var(--surface-raised)!important;
  border-color:var(--line)!important;
  color:var(--active-faction)!important;
}
.chev{color:var(--muted)!important}