:root {
  --ink: #0c0a08;
  --paper: #e7d7b8;
  --amber: #e4a31a;
  --glow: #2a1c08;
  --live: #2ec9a0;
  --warn: #e35d3a;
  --line: #3a3228;
  --mute: #8a7a64;
  --surface: #16120d;
  --chip: #2a220f;
  --on-accent: #0c0a08;
}
html[data-accent="ember"] { --amber: #ff6a2b; --glow: #2a0c08; --chip: #2a1208; }
html[data-accent="lime"] { --amber: #b6e034; --glow: #1a2a08; --chip: #1a2208; }
html[data-accent="ice"] { --amber: #4ad4e6; --glow: #08222a; --chip: #082028; }
html[data-accent="violet"] { --amber: #b57bff; --glow: #1a082a; --chip: #1a0828; }
html[data-accent="rose"] { --amber: #ff5d8f; --glow: #2a0814; --chip: #2a0814; }
html[data-accent="copper"] { --amber: #e08a3c; --glow: #2a1608; --chip: #2a1a0c; }
html[data-accent="teal"] { --amber: #2ec4a0; --glow: #08221a; --chip: #082018; }
html[data-accent="cobalt"] { --amber: #4d7cff; --glow: #08122a; --chip: #081428; }
html[data-accent="mango"] { --amber: #ffc14d; --glow: #2a1e08; --chip: #2a1c08; }
html[data-accent="plum"] { --amber: #c45ee0; --glow: #1e0824; --chip: #220828; }
html[data-accent="crimson"] { --amber: #e8334a; --glow: #2a080c; --chip: #2a0810; }
html[data-accent="parchment"] {
  --ink: #f4ead4; --paper: #1c160e; --amber: #b07a08; --glow: #ead9a8;
  --line: #d4c4a0; --mute: #6b5c48; --surface: #fff8ea; --chip: #f0e2c4;
  --live: #1a8a6a; --warn: #c43a22;
}
html[data-accent="sand"] {
  --ink: #f6e4d6; --paper: #2a140c; --amber: #d45a28; --glow: #f0c8b0;
  --line: #e0c4b0; --mute: #7a5648; --surface: #fff4ec; --chip: #f3d7c4;
  --live: #1a8a6a; --warn: #c43a22;
}
html[data-accent="sage"] {
  --ink: #e8f0dc; --paper: #14200c; --amber: #5a8a18; --glow: #c8dca8;
  --line: #c4d4a8; --mute: #4a6440; --surface: #f6faee; --chip: #d7e8c8;
  --live: #1a8a6a; --warn: #c43a22;
}
html[data-accent="mist"] {
  --ink: #e6f2f5; --paper: #0c1c22; --amber: #1a8aa0; --glow: #b8dce6;
  --line: #b8d0d8; --mute: #4a6870; --surface: #f4fafc; --chip: #d7e8ef;
  --live: #1a8a6a; --warn: #c43a22;
}
html[data-accent="lilac"] {
  --ink: #efe8f8; --paper: #1a0c28; --amber: #7a4ad0; --glow: #d4c4f0;
  --line: #d0c0e4; --mute: #64548a; --surface: #f8f4fc; --chip: #e4d7f4;
  --live: #1a8a6a; --warn: #c43a22;
}
html[data-accent="blush"] {
  --ink: #f8e8ee; --paper: #280c16; --amber: #d03a6a; --glow: #f0c4d4;
  --line: #e4c0cc; --mute: #8a4860; --surface: #fff4f8; --chip: #f4d7e0;
  --live: #1a8a6a; --warn: #c43a22;
}
html[data-accent="ivory"] {
  --ink: #f7f1dc; --paper: #1c180c; --amber: #9a7a18; --glow: #ece3c4;
  --line: #d4c8a4; --mute: #6a6048; --surface: #fffbf0; --chip: #f3ead0;
  --live: #1a8a6a; --warn: #c43a22;
}
html[data-accent="clay"] {
  --ink: #f6e8dc; --paper: #2a160e; --amber: #b85a32; --glow: #edd4c4;
  --line: #e0c4b4; --mute: #7a5848; --surface: #fff6f0; --chip: #ead3c4;
  --live: #1a8a6a; --warn: #c43a22;
}
html[data-accent="fern"] {
  --ink: #e8f2e0; --paper: #142014; --amber: #3a8a40; --glow: #c8e0bc;
  --line: #c4d4b8; --mute: #4a6448; --surface: #f4faf0; --chip: #dcead0;
  --live: #1a8a6a; --warn: #c43a22;
}
html[data-accent="foam"] {
  --ink: #e4f4f0; --paper: #0c201c; --amber: #1a8a78; --glow: #b8e4d8;
  --line: #b8d8d0; --mute: #4a6c64; --surface: #f4fcfa; --chip: #d4efe8;
  --live: #1a8a6a; --warn: #c43a22;
}
html[data-accent="peri"] {
  --ink: #e8ecf8; --paper: #101428; --amber: #3a58c8; --glow: #c4ccec;
  --line: #c0c8e4; --mute: #4a5478; --surface: #f6f8fc; --chip: #d8def4;
  --live: #1a8a6a; --warn: #c43a22;
}
html[data-accent="petal"] {
  --ink: #f8e8ee; --paper: #280c18; --amber: #c83264; --glow: #f0c8d6;
  --line: #e4c0cc; --mute: #8a4860; --surface: #fff6f8; --chip: #f6dce6;
  --live: #1a8a6a; --warn: #c43a22;
}
html[data-accent="snow"],
html[data-accent="navy"],
html[data-accent="rust"],
html[data-accent="pine"],
html[data-accent="ocean"],
html[data-accent="wine"],
html[data-accent="ochre"],
html[data-accent="slate"],
html[data-accent="iris"],
html[data-accent="coral"] {
  --ink: #ffffff;
  --paper: #1a1a1a;
  --glow: #f0f0f0;
  --line: #d4d4d4;
  --mute: #6a6a6a;
  --surface: #ffffff;
  --chip: #f2f2f2;
  --live: #1a8a6a;
  --warn: #c43a22;
  --on-accent: #ffffff;
}
html[data-accent="snow"] { --amber: #222222; }
html[data-accent="navy"] { --amber: #1a3a8a; }
html[data-accent="rust"] { --amber: #b84420; }
html[data-accent="pine"] { --amber: #1f7a48; }
html[data-accent="ocean"] { --amber: #0d6e8a; }
html[data-accent="wine"] { --amber: #8a2048; }
html[data-accent="ochre"] { --amber: #c99212; --on-accent: #0c0a08; }
html[data-accent="slate"] { --amber: #4a5870; }
html[data-accent="iris"] { --amber: #5b2d9a; }
html[data-accent="coral"] { --amber: #d24a38; }

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  background:
    radial-gradient(1200px 400px at 10% -10%, var(--glow) 0%, transparent 50%),
    var(--ink);
  color: var(--paper);
  font: 15px/1.4 Verdana, Tahoma, Geneva, sans-serif;
}

.mast {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1rem;
  align-items: center;
  padding: 1rem 1.5rem;
  border-bottom: 2px solid var(--amber);
}
.mast-end {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.6rem 1rem;
}
.who { margin: 0; color: var(--mute); font-size: 0.8rem; }
.who-btn {
  background: transparent;
  border: 0;
  color: var(--mute);
  font: inherit;
  font-size: 0.8rem;
  padding: 0;
  cursor: pointer;
  text-align: right;
  width: auto;
}
.who-btn:hover { color: var(--amber); }
.mast-end .ghost { width: auto; }

.gate {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 2rem 1rem;
}
#gate[hidden] { display: none; }
.gate-card {
  width: min(22rem, 100%);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.5rem;
  border: 1px solid var(--line);
  background: var(--surface);
}
.gate-card[hidden] { display: none; }
.gate-card .bug { margin-bottom: 0.2rem; }
.gate-card h1 { font-size: 1.5rem; }
.gate-card button { width: 100%; }
.gate-error { margin: 0; color: var(--warn); }
.gate-note { margin: 0; color: var(--live); }
.pw-field { display: flex; flex-direction: column; gap: 0.4rem; flex: 1; min-width: 12rem; }
.pw-rules {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.15rem;
  font-size: 0.78rem;
  color: var(--mute);
}
.pw-rules li::before { content: "○ "; }
.pw-rules li.ok { color: var(--live); }
.pw-rules li.ok::before { content: "✓ "; }
.pw-rules li.miss { color: var(--warn); }
.pw-rules li.miss::before { content: "× "; }
.gate-nav { display: flex; flex-direction: column; gap: 0.35rem; margin: 0.2rem 0 0; }
.gate-card .link {
  background: transparent;
  color: var(--amber);
  font-weight: 600;
  padding: 0.2rem 0;
  width: auto;
  text-align: left;
}
#shell[hidden] { display: none; }
#desk-main[hidden], #profile[hidden] { display: none; }
.bug {
  width: 3rem;
  height: 3rem;
  display: grid;
  place-items: center;
  background: var(--amber);
  color: var(--on-accent);
  font-weight: 800;
  letter-spacing: 0.08em;
}
.kicker {
  margin: 0;
  color: var(--amber);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 0.7rem;
}
h1 { margin: 0.1rem 0 0; font-size: 1.8rem; font-weight: 800; letter-spacing: -0.03em; }

.profile { padding: 1.25rem 1.5rem 3rem; max-width: 36rem; }
.profile h2 { margin: 0 0 0.4rem; }
.swatch-label {
  margin: 0.6rem 0 0.35rem;
  color: var(--mute);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.swatch-label:first-child { margin-top: 0; }
.accent-picks { display: flex; flex-wrap: wrap; gap: 0.55rem; }
#totp-off[hidden], #totp-setup[hidden], #totp-on[hidden] { display: none; }
#totp-setup { display: flex; flex-direction: column; gap: 0.55rem; }
#totp-qr {
  width: 12rem;
  height: 12rem;
  background: #fff;
  padding: 0.35rem;
}
.totp-secret { margin: 0; color: var(--mute); font-size: 0.78rem; word-break: break-all; }

main {
  display: grid;
  grid-template-columns: 16rem 1fr;
  min-height: calc(100vh - 5rem);
}
.rail {
  border-right: 1px solid var(--line);
  padding: 1rem;
}
.rail button, .desk button, .profile button {
  background: var(--amber);
  color: var(--on-accent);
  border: 0;
  font: inherit;
  font-weight: 700;
  padding: 0.55rem 0.8rem;
  cursor: pointer;
  width: 100%;
}
.desk button, .profile button { width: auto; }
.profile .accent-picks button {
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 999px;
  background: var(--swatch);
  color: transparent;
  border: 2px solid var(--line);
  padding: 0;
}
.profile .accent-picks button[aria-checked="true"] {
  border-color: var(--paper);
  box-shadow: 0 0 0 2px var(--ink);
}
.ghost { background: transparent; color: var(--warn); border: 1px solid var(--warn) !important; }
.rail ul { list-style: none; padding: 0; margin: 1rem 0 0; }
.rail li {
  padding: 0.6rem 0.4rem;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}
.rail li.active { color: var(--amber); }
.rail .meta { display: block; color: var(--mute); font-size: 0.75rem; }

.desk { padding: 1.25rem 1.5rem 3rem; }
.row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 1rem;
  margin-bottom: 1rem;
}
label { display: flex; flex-direction: column; gap: 0.3rem; color: var(--mute); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; }
input, select {
  background: var(--surface);
  color: var(--paper);
  border: 1px solid var(--line);
  padding: 0.45rem 0.5rem;
  font: inherit;
  min-width: 8rem;
}
.check { flex-direction: row; align-items: center; text-transform: none; letter-spacing: 0; }
fieldset {
  border: 1px solid var(--line);
  margin: 0 0 1.25rem;
  padding: 0.8rem;
}
legend { color: var(--amber); padding: 0 0.4rem; }
.chips { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.6rem 0; }
.chip {
  background: var(--chip);
  border: 1px solid var(--amber);
  color: var(--amber);
  padding: 0.15rem 0.45rem;
  font-size: 0.8rem;
  cursor: pointer;
}
.dma-grid {
  max-height: 14rem;
  overflow: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: 0.2rem;
  margin-top: 0.5rem;
}
.dma-grid button {
  background: transparent;
  color: var(--paper);
  text-align: left;
  font-weight: 500;
  padding: 0.3rem 0.4rem;
  width: 100%;
}
.dma-grid button.on { color: var(--amber); }
.status { color: var(--live); }
.empty { color: var(--mute); }
.report table { width: 100%; border-collapse: collapse; }
.report th, .report td {
  text-align: left;
  border-bottom: 1px solid var(--line);
  padding: 0.35rem 0.4rem;
  font-variant-numeric: tabular-nums;
}
#creatives { color: var(--mute); padding-left: 1.1rem; }

@media (max-width: 820px) {
  main { grid-template-columns: 1fr; }
  .rail { border-right: 0; border-bottom: 1px solid var(--line); }
}