:root{
  --bg:#0d1117;
  --panel:#161b22;
  --panel-2:#1b2430;
  --panel-glass:rgba(22,27,34,.94);
  --topbar:rgba(22,27,34,.92);
  --text:#f8fafc;
  --muted:#cbd5e1;
  --line:#2a3340;
  --blue:#3b82f6;
  --blue-2:#2f6fdb;
  --teal:#14b8a6;
  --green:#22c55e;
  --red:#fb7185;
  --wash-bg:
    radial-gradient(circle at left,rgba(124,58,237,.26) 0%,transparent 38%),
    radial-gradient(circle at right,rgba(124,58,237,.26) 0%,transparent 38%);
  --shadow:0 22px 55px rgba(0,0,0,.34);
  --active-bg:rgba(59,130,246,.14);
  --hover-bg:rgba(59,130,246,.16);
  --placeholder:rgba(203,213,225,.68);
  --title-glow:rgba(47,111,219,.22);
}

html[data-theme="light"]{
  --bg:#fafcff;
  --panel:#ffffff;
  --panel-2:#eaf4ff;
  --panel-glass:rgba(255,255,255,.96);
  --topbar:rgba(255,255,255,.94);
  --text:#23324d;
  --muted:#4b5d78;
  --line:#cfe3ff;
  --blue:#2f6fdb;
  --blue-2:#2f6fdb;
  --teal:#14b8a6;
  --green:#15803d;
  --red:#dc2626;
  --wash-bg:
    radial-gradient(circle at left,rgba(207,227,255,.88) 0%,transparent 38%),
    radial-gradient(circle at right,rgba(207,227,255,.88) 0%,transparent 38%);
  --shadow:0 18px 45px rgba(35,50,77,.10);
  --active-bg:#eaf4ff;
  --hover-bg:#eaf4ff;
  --placeholder:rgba(75,93,120,.68);
  --title-glow:rgba(47,111,219,.18);
}

html[data-theme="old"]{
  --bg:#0b0503;
  --panel:#1b0c05;
  --panel-2:#261306;
  --panel-glass:rgba(27,12,5,.95);
  --topbar:rgba(18,7,3,.94);
  --text:#fff1b8;
  --muted:#f4c04f;
  --line:#7f1d1d;
  --blue:#facc15;
  --blue-2:#b91c1c;
  --teal:#f59e0b;
  --green:#facc15;
  --red:#ef4444;
  --wash-bg:
    radial-gradient(circle at left,rgba(185,28,28,.36) 0%,transparent 38%),
    radial-gradient(circle at right,rgba(185,28,28,.34) 0%,transparent 38%);
  --shadow:0 22px 55px rgba(0,0,0,.48);
  --active-bg:rgba(185,28,28,.28);
  --hover-bg:rgba(250,204,21,.18);
  --placeholder:rgba(244,192,79,.62);
  --title-glow:rgba(250,204,21,.24);
}

html[data-theme="terminal"]{
  --bg:#020403;
  --panel:#06130b;
  --panel-2:#0a1f12;
  --panel-glass:rgba(6,19,11,.95);
  --topbar:rgba(2,8,4,.94);
  --text:#c7ffd8;
  --muted:#78d98e;
  --line:#15803d;
  --blue:#22c55e;
  --blue-2:#15803d;
  --teal:#a3e635;
  --green:#86efac;
  --red:#fb7185;
  --wash-bg:
    radial-gradient(circle at left,rgba(34,197,94,.22) 0%,transparent 38%),
    radial-gradient(circle at right,rgba(163,230,53,.18) 0%,transparent 38%);
  --shadow:0 22px 55px rgba(0,0,0,.58);
  --active-bg:rgba(34,197,94,.16);
  --hover-bg:rgba(34,197,94,.18);
  --placeholder:rgba(120,217,142,.66);
  --title-glow:rgba(34,197,94,.28);
}

html[data-theme="galactic"]{
  --bg:#090318;
  --panel:#15102b;
  --panel-2:#211946;
  --panel-glass:rgba(21,16,43,.94);
  --topbar:rgba(13,7,32,.92);
  --text:#eef2ff;
  --muted:#c4b5fd;
  --line:#4c1d95;
  --blue:#8b5cf6;
  --blue-2:#7c3aed;
  --teal:#22d3ee;
  --green:#34d399;
  --red:#fb7185;
  --wash-bg:
    radial-gradient(circle at 18% 18%,rgba(34,211,238,.28) 0%,transparent 28%),
    radial-gradient(circle at 78% 22%,rgba(236,72,153,.24) 0%,transparent 30%),
    radial-gradient(circle at 55% 82%,rgba(139,92,246,.32) 0%,transparent 40%);
  --shadow:0 24px 60px rgba(0,0,0,.48);
  --active-bg:rgba(139,92,246,.20);
  --hover-bg:rgba(34,211,238,.14);
  --placeholder:rgba(196,181,253,.66);
  --title-glow:rgba(139,92,246,.32);
}

html{scroll-behavior:smooth}

body{
  background:var(--bg) !important;
  color:var(--text) !important;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  background:var(--wash-bg) !important;
  opacity:1 !important;
  pointer-events:none;
}

body > *{
  position:relative;
}

.topbar{
  background:var(--topbar) !important;
  border-bottom:1px solid var(--line) !important;
  box-shadow:0 14px 34px rgba(0,0,0,.22);
  backdrop-filter:blur(14px);
}

.logo h1,
.logo p,
h1,
h1.page,
.tagline,
.warning,
#longest,
#progress,
footer{
  color:var(--text) !important;
}

.logo h1,
.container > h1,
h1.page{
  color:var(--blue) !important;
  text-shadow:0 4px 18px rgba(47,111,219,.18);
}

.logo p,
.tagline,
.warning,
footer,
.muted{
  color:var(--muted) !important;
}

nav{
  gap:10px !important;
  flex-wrap:wrap;
}

nav a{
  color:var(--muted) !important;
  border:1px solid transparent;
  border-radius:10px;
  padding:9px 11px;
}

nav a:hover,
nav a[aria-current="page"]{
  color:var(--text) !important;
  border-color:var(--blue);
  background:var(--active-bg);
}

.container,
.card,
.art-card{
  background:var(--panel-glass) !important;
  border-color:var(--line) !important;
  box-shadow:var(--shadow) !important;
}

.prompt-box,
.mode-btn,
.choice,
.tab,
.rate-btn,
.side input[type="text"],
input[type="text"],
input,
#pixelCanvas,
.art-card canvas{
  background:var(--panel-2) !important;
  color:var(--text) !important;
  border-color:var(--line) !important;
}

input::placeholder{
  color:var(--placeholder);
}

.mode-btn:hover,
.mode-btn.active,
.choice:hover,
.tab.active,
.tab:hover,
.rate-btn:hover{
  background:var(--hover-bg) !important;
  border-color:var(--blue) !important;
  box-shadow:0 10px 24px var(--title-glow) !important;
}

.progressBar{
  background:var(--line) !important;
}

#progressFill{
  background:linear-gradient(90deg,var(--blue),var(--teal)) !important;
}

button,
.action,
.tool{
  background:var(--blue-2) !important;
  color:#fff !important;
}

button:hover,
.action:hover,
.tool:hover{
  background:var(--teal) !important;
}

.action.ghost{
  background:transparent !important;
  border-color:var(--line) !important;
  color:var(--text) !important;
}

.action.ghost:hover{
  border-color:var(--teal) !important;
  background:rgba(20,184,166,.14) !important;
}

.success{color:var(--green) !important}
.danger{color:var(--red) !important}

.swatch{
  background:var(--swatch) !important;
}

.home-shell{
  width:min(980px,92%);
  text-align:center;
  padding:56px 0;
}

.home-title{
  font-size:clamp(3rem,8vw,5.5rem);
  color:var(--blue) !important;
  text-shadow:0 4px 18px var(--title-glow);
  margin-bottom:10px;
}

.home-subtitle{
  color:var(--muted);
  font-size:1.15rem;
  margin-bottom:44px;
  opacity:.95;
}

.home-menu{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
  align-items:stretch;
}

.home-card{
  min-height:190px;
  text-decoration:none;
  background:var(--panel-glass);
  border:1px solid var(--line);
  border-radius:16px;
  padding:26px 22px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  transition:transform .25s,border-color .25s,box-shadow .25s,background .25s;
  box-shadow:var(--shadow);
}

.home-card:hover{
  transform:translateY(-6px);
  border-color:var(--blue);
  box-shadow:0 0 34px rgba(59,130,246,.28);
  background:var(--panel-2);
}

.home-card h2{
  color:var(--text);
  margin-bottom:10px;
  font-size:1.45rem;
}

.home-card p{
  color:var(--muted);
  line-height:1.55;
  font-size:.98rem;
}

.home-footer{
  margin-top:46px;
  color:var(--muted);
  opacity:.7;
  font-size:.9rem;
}

.theme-picker{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:1000;
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--topbar);
  box-shadow:var(--shadow);
  backdrop-filter:blur(14px);
}

.theme-picker label{
  color:var(--muted);
  font-size:.8rem;
  font-weight:bold;
}

.theme-picker select{
  appearance:none;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--panel-2);
  color:var(--text);
  cursor:pointer;
  font:inherit;
  font-weight:bold;
  padding:8px 34px 8px 10px;
  outline:none;
}

.theme-picker::after{
  content:"v";
  position:absolute;
  right:20px;
  color:var(--muted);
  pointer-events:none;
}

@media(max-width:800px){
  .home-menu{grid-template-columns:1fr}
  .home-card{min-height:150px}
  .theme-picker{
    left:12px;
    right:12px;
    bottom:12px;
    justify-content:center;
  }
}