/* Pastel dark themes: Blue (default), Red, Green, Yellow */
:root{
  /* Default = Blue */
  --bg:#0e1420; --fg:#eaf2ff; --muted:#a7b3c9; --card:#111a2a;
  --border:rgba(255,255,255,0.08);
  --accent:#9ac3ff; --brand1:#a6e3ff; --brand2:#c7d4ff;
}

html[data-theme="blue"]{
  --bg:#0e1420; --fg:#eaf2ff; --muted:#a7b3c9; --card:#111a2a;
  --border:rgba(255,255,255,0.08);
  --accent:#9ac3ff; --brand1:#a6e3ff; --brand2:#c7d4ff;
}
html[data-theme="red"]{
  --bg:#1a0f12; --fg:#ffecec; --muted:#d9b3b7; --card:#241216;
  --border:rgba(255,200,200,0.10);
  --accent:#ffa3a3; --brand1:#ffb3c1; --brand2:#ff9aa2;
}
html[data-theme="green"]{
  --bg:#0f1411; --fg:#e8fff2; --muted:#b0cbbd; --card:#111a15;
  --border:rgba(210,255,230,0.10);
  --accent:#9fe6c3; --brand1:#b8f2d8; --brand2:#c6ffd0;
}
html[data-theme="yellow"]{
  --bg:#171407; --fg:#fff8dc; --muted:#d6caa3; --card:#1c1809;
  --border:rgba(255,240,200,0.10);
  --accent:#ffd88a; --brand1:#ffe8a1; --brand2:#ffd1a1;
}

* { box-sizing: border-box; }
body { margin:0; padding:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; line-height:1.6; background:var(--bg); color:var(--fg); }
header {
  background: linear-gradient(180deg, rgba(0,0,0,0.25), transparent), var(--card);
  color: var(--fg); padding: 12px 16px; border-bottom: 1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px;
}
header a { color:var(--fg); }
.brandbar { display:flex; align-items:center; gap:12px; min-width:280px; }
.brand { display:flex; align-items:center; gap:10px; text-decoration:none; }
.brandname { color:var(--fg); font-weight:700; letter-spacing:0.4px; }
.logo { height:36px; width:auto; filter: drop-shadow(0 0 8px color-mix(in oklab, var(--brand1) 35%, transparent)); }
@keyframes glow { 0%{filter:drop-shadow(0 0 0 transparent);} 50%{filter:drop-shadow(0 0 14px color-mix(in oklab, var(--brand1) 55%, transparent));} 100%{filter:drop-shadow(0 0 0 transparent);} }
.logo:hover { animation: glow 1.8s ease-in-out infinite; }

nav a { color: color-mix(in oklab, var(--fg) 85%, var(--accent) 15%); text-decoration: none; margin: 0 10px; font-size: 0.95rem; }
nav a:hover { text-decoration: underline; }

.controls { display:flex; gap:8px; align-items:center; }
select { background: var(--card); color: var(--fg); border:1px solid var(--border); padding:6px 8px; border-radius:10px; outline:none; }
select:focus{ box-shadow:0 0 0 3px color-mix(in oklab, var(--accent) 30%, transparent); }

.container {
  max-width: 960px; background: var(--card); margin: 24px auto; padding: 24px;
  box-shadow: 0 0 20px rgba(0,0,0,0.35); border: 1px solid var(--border); border-radius: 14px;
}
.container h2 { color: var(--fg); margin-top: 0; }
.container h3 { color: color-mix(in oklab, var(--fg) 85%, var(--muted) 15%); margin-top: 1.2em; }
.container p, .container ul, .container ol { margin-bottom: 1em; }
.container ul { padding-left: 20px; }
.container ul li { margin-bottom: 0.5em; }

img { max-width: 100%; height: auto; display: block; margin: 1em auto; border-radius: 10px; }
a { color: var(--accent); }
a:hover { text-decoration: none; }

.buylink {
  display:inline-block; background: linear-gradient(135deg, var(--brand1), var(--brand2));
  color: #0b0f17; padding: 10px 16px; text-decoration: none; border-radius: 10px; font-weight: 700;
  box-shadow: 0 6px 18px color-mix(in oklab, var(--brand1) 35%, transparent);
}
.buylink:hover { filter: brightness(1.08); }

.btnbar { text-align:center; display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }

.ad {
  background: color-mix(in oklab, var(--card) 82%, var(--fg) 2%); color: var(--muted);
  text-align: center; padding: 10px; margin: 20px 0; font-size: 0.9em; border: 1px dashed var(--border); border-radius: 10px;
}

footer { text-align: center; font-size: 0.9em; color: var(--muted); padding: 24px 0 40px; }

@media (max-width: 640px){ header nav { margin-top:8px; display:flex; flex-wrap:wrap; gap:10px; } }

.sr-only{ position:absolute !important; width:1px !important; height:1px !important; padding:0 !important; margin:-1px !important; overflow:hidden !important; clip:rect(0,0,0,0) !important; border:0 !important; }

.success { background: #11361f; color:#d8ffe9; border:1px solid rgba(184, 242, 216, 0.3); padding:12px; border-radius:10px; margin-top:12px; }
.error   { background: #3a1414; color:#ffe2e2; border:1px solid rgba(255, 154, 162, 0.25); padding:12px; border-radius:10px; margin-top:12px; }