/* Melora: one column of album rows, like a record crate. Dark-first, light follows the device. */
:root{
  --bg:#111317; --surface:#1a1d23; --line:#2a2e36; --fg:#ece7dc; --muted:#8d919b;
  --save:#5fd3b1; --save-bg:#173a31; --dis:#ef8a7a; --dis-bg:#3f1f1b; --know:#8fb6ff; --know-bg:#1d2b45;
  --display:"Bricolage Grotesque","Instrument Sans",system-ui,sans-serif;
  --body:"Instrument Sans",system-ui,-apple-system,sans-serif;
  color-scheme:dark;
}
@media (prefers-color-scheme: light){ :root{
  --bg:#f6f3ec; --surface:#ffffff; --line:#e2ded4; --fg:#1b1a17; --muted:#6d6a62;
  --save:#0f7a5c; --save-bg:#d9f3ea; --dis:#b2402f; --dis-bg:#f9dcd6; --know:#2a5db8; --know-bg:#dbe6fb;
  color-scheme:light;
}}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--fg);font-family:var(--body);font-size:15px;line-height:1.5;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));
  padding-top:max(24px,env(safe-area-inset-top,0px));padding-bottom:max(48px,env(safe-area-inset-bottom,0px))}
main{max-width:720px;margin:0 auto}
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:4px}
.brand{display:flex;align-items:center;gap:10px}
.account{display:flex;align-items:center;gap:10px}
#who{display:flex;align-items:center;gap:8px;font-size:14px}
#who[hidden]{display:none}
.avatar{width:28px;height:28px;border-radius:50%;object-fit:cover}
button.primary{background:var(--fg);color:var(--bg);border:1px solid var(--fg);border-radius:999px;padding:8px 16px;font:inherit;font-weight:500;cursor:pointer}
button.primary:disabled{opacity:.5;cursor:default}
button.link{background:none;border:0;color:var(--muted);font:inherit;font-size:13px;cursor:pointer;padding:4px;text-decoration:underline}
.sub{margin:0 0 24px}
.panel{margin-top:32px}
.panel[hidden]{display:none}
.section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.section-head h2{margin:0}
.section-head .chips{margin-left:0}
h3{font-family:var(--display);font-weight:500;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:22px 0 2px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:14px;margin-top:12px}
.card{text-decoration:none;color:var(--fg);min-width:0}
.card .cover{width:100%;height:auto;aspect-ratio:1;max-width:100%}
.card .cover.round{border-radius:50%}
.card-title{font-weight:600;font-size:14px;margin:8px 0 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card-sub{color:var(--muted);font-size:12px;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:12px 0}
.stat{background:var(--surface);border-radius:8px;padding:12px 14px}
.stat-k{color:var(--muted);font-size:12px;margin:0}
.stat-v{font-family:var(--display);font-weight:700;font-size:20px;margin:2px 0 0;text-transform:capitalize;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.genres{display:flex;flex-wrap:wrap;gap:6px}
.pill{border:1px solid var(--line);border-radius:999px;padding:4px 12px;font-size:13px;color:var(--fg);text-transform:capitalize}
.now-row .row{border-bottom:0}
.ib.is-saved{background:var(--save-bg);color:var(--save);border-color:var(--save)}
.mark{width:28px;height:28px;color:var(--fg)}
h1{font-family:var(--display);font-weight:700;font-size:clamp(28px,5vw,38px);letter-spacing:-.02em;margin:0;text-wrap:balance}
.sub{color:var(--muted);margin:4px 0 0}
.bar{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;margin:4px 0 8px;font-size:13px;color:var(--muted)}
.bar b{color:var(--fg);font-weight:600;font-variant-numeric:tabular-nums}
.chips{display:flex;gap:6px;margin-left:auto}
.chip{border:1px solid var(--line);background:transparent;color:var(--muted);border-radius:999px;padding:4px 12px;font:inherit;font-size:13px;cursor:pointer}
.chip[aria-pressed="true"]{background:var(--fg);color:var(--bg);border-color:var(--fg)}
h2{font-family:var(--display);font-weight:700;font-size:20px;letter-spacing:-.01em;margin:0 0 8px}
.batch-note{color:var(--muted);font-size:13px;margin:0 0 6px}
.row{display:flex;align-items:center;gap:14px;padding:10px 0;border-bottom:1px solid var(--line)}
.row[hidden]{display:none}
.cover{width:64px;height:64px;border-radius:6px;flex:0 0 64px;background:var(--surface);object-fit:cover;display:block}
.ph{display:flex;align-items:center;justify-content:center;color:var(--muted);border:1px solid var(--line)}
.ph svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.info{flex:1;min-width:0}
.title{font-weight:600;font-size:16px;margin:0;color:var(--fg);text-decoration:none;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.title:hover{text-decoration:underline}
.artist{color:var(--muted);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:14px}
.why{color:var(--muted);font-size:13px;margin:2px 0 0;display:none}
@media(min-width:560px){.why{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}
.acts{display:flex;gap:6px;flex:0 0 auto}
.ib{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--muted);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
.ib svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ib:hover{border-color:var(--fg);color:var(--fg)}
.ib:focus-visible,.chip:focus-visible,button:focus-visible{outline:2px solid var(--know);outline-offset:2px}
.row[data-mark="save"] .ib[data-k="save"]{background:var(--save-bg);color:var(--save);border-color:var(--save)}
.row[data-mark="dis"] .ib[data-k="dis"]{background:var(--dis-bg);color:var(--dis);border-color:var(--dis)}
.row[data-mark="know"] .ib[data-k="know"]{background:var(--know-bg);color:var(--know);border-color:var(--know)}
.row[data-mark="dis"] .cover,.row[data-mark="know"] .cover{opacity:.45}
.row[data-mark="dis"] .title,.row[data-mark="know"] .title{color:var(--muted)}
.send{margin-top:36px;padding-top:8px}
.send p{color:var(--muted);margin:0 0 12px}
.send-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:10px}
.send button{border:1px solid var(--line);background:transparent;color:var(--fg);border-radius:999px;padding:8px 16px;font:inherit;font-weight:500;cursor:pointer}
.send h2{margin-bottom:4px}
.copied{color:var(--save);font-size:13px}
textarea{width:100%;max-width:100%;background:var(--surface);color:var(--fg);border:1px solid var(--line);border-radius:8px;padding:10px;font:13px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;resize:vertical}
.foot{display:flex;flex-wrap:wrap;gap:6px 16px;justify-content:space-between;color:var(--muted);font-size:13px;margin-top:32px}
@media(max-width:420px){.cover{width:52px;height:52px;flex-basis:52px}.ib{width:34px;height:34px}.acts{gap:4px}.row{gap:10px}}
@media(prefers-reduced-motion:no-preference){.ib,.chip{transition:background .15s,color .15s,border-color .15s}}