:root { --bg:#0b0b10; --fg:#eaeaf0; --muted:#a5a6ad; --accent:#5ab0ff; --card:#161621; } *{box-sizing:border-box} body{margin:0;background:var(--bg);color:var(--fg);font-family:system-ui,Segoe UI,Roboto,Arial,sans-serif} .wrap{max-width:1100px;margin:0 auto;padding:16px} .topbar{background:#12121a;border-bottom:1px solid #222} .topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap} .brand{color:var(--fg);text-decoration:none;font-weight:700} .topbar nav a,.welcome{color:var(--fg);margin-left:12px;text-decoration:none} .flash{background:#1d3c1d;color:#b8ffb8;padding:10px;border-radius:8px;margin:12px 0} h1,h2,h3{margin:12px 0} .form{display:grid;gap:10px;max-width:480px} .form input,.form textarea,.viz-controls select,.viz-controls input[type="range"], .theme-select{ width:100%;padding:10px;border-radius:8px;border:1px solid #333;background:#0f0f18;color:var(--fg) } .form textarea{min-height:110px} .btn{display:inline-block;background:var(--accent);color:#001a2a;padding:8px 12px;border:none;border-radius:10px;text-decoration:none;cursor:pointer} .btn.danger{background:#ff5a7a;color:#2a0010} .btn:disabled{opacity:.6;cursor:not-allowed} .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px} .card{background:var(--card);border:1px solid #24243a;border-radius:14px;padding:12px} .card .actions{display:flex;gap:8px;flex-wrap:wrap} .player{background:#000;border:1px solid #222;border-radius:14px;padding:12px;margin:12px 0} .viz-controls{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;margin-bottom:10px} .viz-controls label{font-size:.9rem;color:#cfd3ff;display:grid;gap:6px} canvas#viz{display:block;width:100%;height:auto;background:#03030a;border-radius:10px} .cover-wrap{display:flex;align-items:center;gap:12px;margin:8px 0} .cover{width:72px;height:72px;border-radius:8px;background:#111 url('assets/cover_placeholder.svg') center/cover no-repeat;border:1px solid #222} .cover.spin{animation:spin 6s linear infinite} @keyframes spin { from{transform:rotate(0)} to{transform:rotate(360deg)} } .commentlist{list-style:none;padding:0;margin:0;display:grid;gap:10px} .commentlist li{background:#131321;border:1px solid #27273a;border-radius:10px;padding:10px} .footer{border-top:1px solid #222;margin-top:20px} .footer .wrap{display:flex;justify-content:space-between;align-items:center} @media (max-width:600px){ .topbar .wrap{gap:8px} } /* Themes via [data-theme] on */ :root, html[data-theme="default"] { --bg:#0b0b10; --fg:#eaeaf0; --muted:#a5a6ad; --accent:#5ab0ff; --card:#161621; } html[data-theme="neon"] { --bg:#07070b; --fg:#e5f6ff; --muted:#a0b3ff; --accent:#7cffd4; --card:#121228; } html[data-theme="sunset"] { --bg:#120c0d; --fg:#ffe9e2; --muted:#ffb7a4; --accent:#ff8c5a; --card:#2a1310; } html[data-theme="forest"] { --bg:#0a0f0a; --fg:#e8ffe9; --muted:#a5d6a7; --accent:#6ee7a0; --card:#132016; } /* active button state */ .btn.active{outline:2px solid #fff3; box-shadow:0 0 0 2px #000 inset}