/* Shared look for RetroView's secondary pages (beta, privacy, admin).
   Tokens mirror the app's inline styles in index.html. */
:root {
    --obsidian: #050508;
    --surface: rgba(255, 255, 255, 0.03);
    --inset: rgba(0, 0, 0, 0.55);
    --line: rgba(255, 255, 255, 0.08);
    --daylight: #FFFFFF;
    --dim: rgba(255, 255, 255, 0.66);
    --faint: rgba(255, 255, 255, 0.42);
    --daylight-glow: 0 0 8px rgba(255, 255, 255, 0.55), 0 0 24px rgba(255, 255, 255, 0.25);
    --amethyst: #6B2FA0;
    --lapis: #0033CC;
    --gold: #C8960C;
    --crimson: #CC2200;
    --fuchsia: #CC0077;
    --terminal: #00FFA3;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    color: var(--daylight); background: var(--obsidian); line-height: 1.6;
    min-height: 100vh; display: flex; flex-direction: column;
}
body::before {
    content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background:
        linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px) 0 0 / 48px 48px,
        linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px) 0 0 / 48px 48px,
        radial-gradient(ellipse 50% 40% at 0% 0%, rgba(107, 47, 160, 0.16), transparent 70%),
        radial-gradient(ellipse 50% 40% at 100% 100%, rgba(0, 51, 204, 0.16), transparent 70%),
        var(--obsidian);
}
h1, h2, h3, .logo { font-family: 'Michroma', 'Inter', sans-serif; font-weight: 400; letter-spacing: 0.04em; }
a { color: var(--terminal); }
header {
    display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap;
    padding: 1rem 1.5rem; border-bottom: 1px solid var(--line); background: rgba(0, 0, 0, 0.6);
    box-shadow: 0 1px 0 rgba(204, 0, 119, 0.25), 0 6px 24px -12px rgba(204, 0, 119, 0.35);
}
.logo { font-size: 1.15rem; letter-spacing: 0.12em; text-shadow: var(--daylight-glow); color: var(--daylight); text-decoration: none; }
.k-fuchsia { color: var(--fuchsia); text-shadow: 0 0 6px rgba(255, 40, 160, 0.85), 0 0 20px rgba(204, 0, 119, 0.5); }
.k-gold { color: var(--gold); text-shadow: 0 0 6px rgba(229, 180, 40, 0.8), 0 0 20px rgba(200, 150, 12, 0.45); }
.k-green { color: var(--terminal); text-shadow: 0 0 6px rgba(0, 255, 163, 0.7), 0 0 18px rgba(0, 255, 163, 0.35); }
.k-amethyst { color: #C9A2FF; text-shadow: 0 0 3px var(--amethyst), 0 0 10px var(--amethyst), 0 0 22px rgba(107, 47, 160, 0.9); }
.k-lapis { color: #8EA9FF; text-shadow: 0 0 3px var(--lapis), 0 0 10px var(--lapis), 0 0 22px rgba(0, 51, 204, 0.9); }
main { flex: 1; width: 100%; max-width: 760px; margin: 0 auto; padding: 2.2rem 1.25rem 3rem; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 1.5rem; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35); }
.muted { color: var(--dim); }
.tiny { color: var(--faint); font-size: 0.8rem; }
.btn {
    border: none; cursor: pointer; border-radius: 10px; font: inherit; font-weight: 600;
    padding: 0.85rem 1.6rem; color: var(--daylight); text-decoration: none; display: inline-block;
    background: linear-gradient(135deg, var(--fuchsia), var(--amethyst) 45%, var(--lapis));
    box-shadow: 0 0 22px rgba(204, 0, 119, 0.4), 0 0 40px rgba(0, 51, 204, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.15);
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-ghost { background: transparent; box-shadow: inset 0 0 0 1px var(--line); }
label { display: block; font-size: 0.85rem; font-weight: 600; margin: 1.1rem 0 0.4rem; }
input[type="text"], input[type="email"], select, textarea {
    width: 100%; font: inherit; font-size: 1rem; color: var(--daylight);
    background: var(--inset); border: 1px solid var(--line); border-radius: 10px; padding: 0.7rem 0.8rem;
}
select option { background: #0B0B10; }
input:focus, select:focus, textarea:focus { outline: none; border-color: rgba(255, 255, 255, 0.3); box-shadow: 0 0 14px rgba(204, 0, 119, 0.25); }
textarea { resize: vertical; min-height: 90px; }
.check { display: flex; gap: 0.6rem; align-items: flex-start; font-weight: 400; color: var(--dim); }
.check input { margin-top: 0.3rem; accent-color: var(--fuchsia); width: 18px; height: 18px; flex: none; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.notice { border-radius: 10px; padding: 0.8rem 1rem; margin-top: 1rem; font-size: 0.92rem; }
.notice.error { border: 1px dashed rgba(204, 34, 0, 0.8); color: #FF8A70; }
footer { text-align: center; padding: 1.5rem 1rem 2rem; color: var(--faint); font-size: 0.78rem; }
footer a { color: var(--dim); }
@media (max-width: 600px) { header { padding: 0.9rem 1rem; } .card { padding: 1.15rem; } }