:root {
  --bg: #121214;
  --panel: #1b1b1e;
  --ink: #eeece7;
  --dim: #aaa8ae;
  --acid: #c9cf9e;
  --line: #303034;
}

.cover-main { background: radial-gradient(circle at 22% 74%, #e3e3bd 0 6%, transparent 6.5%), radial-gradient(circle at 69% 30%, #e6e3c8 0 3%, transparent 3.5%), linear-gradient(135deg, #bfc69c, #d5d6ad 45%, #93a889); }
.cover-main:after { background: #9986b2; }
.c2 { background: linear-gradient(135deg, #c98c7d, #ddc39b); }
.c3 { background: linear-gradient(145deg, #607d94, #bbd0cc); }
.c4 { background: linear-gradient(140deg, #8478b1, #d5a7c8); }
.c4:before { background: #d7c28a; }
.bar.active { background: #c9cf9e; }

.resume-note { min-height: 16px; margin: 12px 0 0; color: var(--dim); font: 9px "DM Mono", monospace; letter-spacing: .04em; }
.mix-detail { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(260px, .72fr); gap: clamp(28px, 7vw, 104px); padding: 62px 0; border-bottom: 1px solid var(--line); }
.detail-head { display: flex; align-items:baseline; justify-content:space-between; border-bottom:1px solid var(--line); padding-bottom:14px; }
.detail-head .eyebrow { margin:0; }.detail-head span { color:var(--dim); font:10px "DM Mono",monospace; }
.tracklist ol { padding: 0; margin: 0; list-style: none; }.tracklist li { padding:9px 0; border-bottom:1px solid #26262a; font-size:13px; color:#d3d1cc; }
.show-all,.download { margin-top:18px; background:transparent; border:0; color:var(--ink); padding:0; font:10px "DM Mono",monospace; letter-spacing:.08em; cursor:pointer; }.show-all span,.download span { color:var(--acid); font-size:16px; margin-left:6px; }
.member-panel { background:#19191c; padding:25px; align-self:start; }.member-panel .eyebrow { margin-bottom:15px; }.member-panel > p:nth-child(2) { max-width:290px; margin:0; font-size:15px; line-height:1.55; color:#d3d1cc; }.download { display:block; border-bottom:1px solid #4b4b4e; padding:20px 0 16px; width:100%; text-align:left; }
.comments-gate { display:flex; gap:13px; padding-top:20px; color:var(--dim); }.lock { color:var(--acid); font-size:22px; }.comments-gate strong { font:10px "DM Mono",monospace; letter-spacing:.06em; color:var(--ink); }.comments-gate p { font-size:11px; line-height:1.55; margin:8px 0 0; }
.filters { display:flex; flex-wrap:wrap; gap:7px; margin: -10px 0 28px; }.filter { border:1px solid #414146; background:transparent; color:var(--dim); padding:8px 11px; font:9px "DM Mono",monospace; letter-spacing:.06em; cursor:pointer; }.filter.active,.filter:hover { border-color:var(--acid); color:#1a1a1b; background:var(--acid); }.mix-card[hidden] { display:none; }
.sign-in,.add-mix { border:1px solid #4a4a4f; background:transparent; color:var(--ink); padding:9px 12px; font:9px "DM Mono",monospace; letter-spacing:.07em; cursor:pointer; }.sign-in { margin-left:auto; border-color:transparent; color:var(--dim); }.add-mix { margin-left:8px; margin-right:25px; }.sign-in:hover,.add-mix:hover { border-color:var(--acid); color:var(--acid); }
.mix-dialog { width:min(720px,calc(100vw - 28px)); max-height:92vh; overflow:auto; border:1px solid #414146; background:#151518; color:var(--ink); padding:0; }.mix-dialog::backdrop { background:rgba(4,4,6,.76); backdrop-filter:blur(5px); }.dialog-card { padding:30px; }.dialog-head { display:flex; justify-content:space-between; }.dialog-head .eyebrow { margin-bottom:10px; }.dialog-head h2 { margin:0; font-size:44px; line-height:.78; letter-spacing:-.08em; }.close-dialog { border:0; background:transparent; color:var(--ink); font-size:30px; line-height:1; cursor:pointer; }.dialog-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:33px; }.dialog-grid label,.upload-box { display:flex; flex-direction:column; gap:8px; color:var(--dim); font:9px "DM Mono",monospace; letter-spacing:.06em; }.dialog-grid input { width:100%; border:0; border-bottom:1px solid #444449; background:transparent; color:var(--ink); padding:9px 0; font:14px Manrope,sans-serif; outline:none; }.dialog-grid input:focus { border-color:var(--acid); }.dialog-grid input[type="date"] { color-scheme:dark; }.upload-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:27px; }.upload-box { min-height:120px; justify-content:center; align-items:center; border:1px dashed #4a4a4e; cursor:pointer; color:var(--ink); }.upload-box input { position:absolute; width:1px; height:1px; opacity:0; }.upload-box span { font-size:22px; color:var(--acid); }.upload-box small,.wave-option small { color:var(--dim); font:9px "DM Mono",monospace; letter-spacing:.03em; }.wave-option { display:flex; gap:10px; align-items:center; margin-top:22px; cursor:pointer; }.wave-option input { position:absolute; opacity:0; }.checkbox { width:16px; height:16px; border:1px solid #5a5a60; }.wave-option input:checked + .checkbox { background:var(--acid); border-color:var(--acid); box-shadow:inset 0 0 0 4px #151518; }.wave-option strong { display:block; font:10px "DM Mono",monospace; letter-spacing:.06em; }.wave-option small { display:block; margin-top:4px; }.dialog-actions { display:flex; justify-content:flex-end; gap:20px; border-top:1px solid #343438; margin-top:28px; padding-top:20px; }.cancel,.publish { border:0; background:transparent; color:var(--dim); font:10px "DM Mono",monospace; letter-spacing:.07em; cursor:pointer; }.publish { color:#151518; background:var(--acid); padding:12px 16px; }.publish span { margin-left:8px; }
@media(max-width:700px){.add-mix{margin-right:14px;padding:8px 9px}.dialog-card{padding:22px}.dialog-grid,.upload-row{grid-template-columns:1fr}.dialog-head h2{font-size:38px}.upload-box{min-height:92px}}
.auth-dialog { width:min(390px,calc(100vw - 28px)); border:1px solid #414146; background:#151518; color:var(--ink); padding:0; }.auth-dialog::backdrop{background:rgba(4,4,6,.76);backdrop-filter:blur(5px)}.auth-card{position:relative;padding:30px;display:flex;flex-direction:column;gap:14px}.auth-card .close-dialog{position:absolute;right:18px;top:16px}.auth-card .eyebrow{margin:0}.auth-card h2{font-size:42px;line-height:.78;letter-spacing:-.08em;margin:6px 0 18px}.auth-card label{font:9px "DM Mono",monospace;letter-spacing:.06em;color:var(--dim);display:flex;flex-direction:column;gap:8px}.auth-card input{background:transparent;border:0;border-bottom:1px solid #444449;color:var(--ink);padding:9px 0;font:14px Manrope,sans-serif;outline:none}.auth-card input:focus{border-color:var(--acid)}.auth-message{min-height:14px;margin:0;color:#d6a3a3;font:10px "DM Mono",monospace}.auth-card .publish{align-self:flex-start;margin-top:8px}.auth-switch{background:transparent;border:0;color:var(--dim);padding:4px 0;font:9px "DM Mono",monospace;letter-spacing:.06em;text-align:left;cursor:pointer}.tracklist-input{display:flex;flex-direction:column;gap:8px;margin-top:24px;color:var(--dim);font:9px "DM Mono",monospace;letter-spacing:.06em}.tracklist-input small{color:#77767d;font-size:9px}.tracklist-input textarea{resize:vertical;min-height:95px;border:1px solid #444449;background:transparent;color:var(--ink);padding:10px;font:13px/1.55 Manrope,sans-serif;outline:none}.tracklist-input textarea:focus{border-color:var(--acid)}.empty-mixes{grid-column:1/-1;margin:10px 0 20px;color:var(--dim);font:10px "DM Mono",monospace;letter-spacing:.08em}
@media(max-width:700px){.mix-detail{grid-template-columns:1fr;padding:42px 0;gap:22px}.member-panel{padding:21px}.tracklist li{grid-template-columns:64px 1fr;font-size:13px}}
.waveform{gap:1px}.bar{min-width:1px}