:root { --bg:#0f172a; --fg:#e5e7eb; --muted:#9ca3af; --card:#111827; --btn:#1f2937; }
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body { margin:0; height:100%; background:var(--bg); color:var(--fg); font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; }
.wrap { max-width:480px; margin:0 auto; padding:16px; }
.top { text-align:center; margin:16px 0 8px; }
.top .logo { width:64px; height:64px; object-fit:contain; filter:drop-shadow(0 2px 8px rgba(0,0,0,.6)); background:#0b1020; border-radius:12px; }
.top h1 { margin:8px 0 4px; font-size:1.4rem; }
.top .sub { margin:0; color:var(--muted); font-size:.9rem; }
.card { background:var(--card); border-radius:16px; padding:16px; box-shadow:0 8px 24px rgba(0,0,0,.4); }
.artwork { display:flex; justify-content:center; }
.artwork img { width:min(80vw,360px); height:min(80vw,360px); border-radius:12px; object-fit:cover; background:#0b1020; }
.meta { text-align:center; margin:12px 0 8px; }
.title { font-weight:700; font-size:1.1rem; }
.artist { color:var(--muted); font-size:.95rem; }
.controls { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:8px; }
.btn { appearance:none; border:1px solid rgba(255,255,255,.08); background:var(--btn); color:var(--fg); padding:12px 16px; border-radius:12px; font-weight:600; font-size:1rem; }
.btn.primary { background:linear-gradient(180deg,#0ea5b7,#046c7a); border-color:rgba(255,255,255,.15); }
.btn.ghost { background:transparent; }
.btn.small { font-size:.9rem; padding:10px 12px; }
.foot { margin:14px 4px; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.hint { color:var(--muted); font-size:.8rem; }