:root{color-scheme:dark;--bg:#0b0d16;--panel:#151825;--panel2:#1c2030;--line:#2b3041;--text:#f7f6fb;--muted:#989db0;--accent:#af8cff;--accent2:#6656d8;--danger:#fa8499;font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text)}body{overflow-x:hidden}.glow{position:fixed;pointer-events:none;filter:blur(75px);opacity:.22;border-radius:50%;z-index:0}.glow-one{width:370px;height:370px;top:-190px;right:-120px;background:#815cef}.glow-two{width:270px;height:270px;top:290px;left:-210px;background:#526de9}.shell{position:relative;z-index:1;max-width:720px;margin:auto;padding:calc(22px + env(safe-area-inset-top)) 20px calc(42px + env(safe-area-inset-bottom))}.topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:38px}.brand{display:flex;align-items:center;gap:10px;font-size:17px;font-weight:850;letter-spacing:.15em}.brand-icon{width:34px;height:34px;display:grid;place-items:center;border-radius:10px;color:white;background:linear-gradient(140deg,#ba8cff,#6954d8);font-size:22px;letter-spacing:0;box-shadow:0 7px 22px #9e75fd55}.brand-dot{color:var(--accent)}.top-tag{border:1px solid #393446;background:#211d32;color:#bea5f7;border-radius:999px;padding:7px 10px;font-size:9px;font-weight:800;letter-spacing:.15em}.hero{padding:9px 0 34px}.eyebrow,.section-kicker{color:#b69bf5;font-size:10px;font-weight:800;letter-spacing:.18em}.spark{display:inline-block;width:7px;height:7px;border-radius:50%;background:#b69bf5;margin-right:6px;box-shadow:0 0 13px #b69bf5}.hero h1{font-size:clamp(36px,8vw,58px);line-height:1.04;letter-spacing:-.055em;margin:17px 0 15px;font-weight:850}.hero h1 em{font-style:normal;background:linear-gradient(90deg,#cbabff,#7a83ff);background-clip:text;color:transparent}.hero p{color:var(--muted);line-height:1.6;font-size:14px;max-width:490px;margin:0}.hero-stats{display:flex;align-items:center;gap:14px;margin-top:25px;color:#a9adc0;font-size:11px}.hero-stats b{color:#ede9f5;font-size:13px}.stat-divider{height:15px;width:1px;background:#3e4050}.tabs{display:grid;grid-template-columns:1fr 1fr;padding:5px;background:#171a27;border:1px solid #292d3a;border-radius:15px;gap:5px;margin-bottom:31px}.tab{min-height:43px;border:0;border-radius:11px;color:#9398aa;background:transparent;font-weight:700;cursor:pointer;font-size:13px}.tab.active{background:#2b2544;color:#e0d1ff;box-shadow:inset 0 0 0 1px #514171}.tab-icon{font-size:17px;vertical-align:-1px;margin-right:5px}.tab-count{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 5px;border-radius:7px;background:#3b315b;color:#d7c2ff;font-size:11px;margin-left:3px}.section-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:18px}.section-head h2{font-size:25px;letter-spacing:-.035em;margin:7px 0 0}.text-button{border:0;background:none;color:#bd9aff;font-weight:700;cursor:pointer;padding:8px 0;font-size:12px}.track-list{display:grid;gap:9px}.track{display:flex;align-items:center;gap:12px;min-height:75px;padding:10px;border-radius:16px;background:linear-gradient(120deg,#191c2a,#171a25);border:1px solid #2a2e3b}.track.selected{border-color:#8569bd;background:#211d31}.select-track{display:flex;align-items:center;gap:12px;min-width:0;flex:1;text-align:left;background:none;border:0;color:inherit;cursor:pointer;padding:0}.checkbox{flex:none;width:17px;height:17px;border:1px solid #555b70;border-radius:6px;display:grid;place-items:center;font-size:12px;color:#fff}.track.selected .checkbox{background:#9a77e2;border-color:#9a77e2}.cover-thumb{flex:none;width:52px;height:52px;border-radius:11px;object-fit:cover;background:linear-gradient(140deg,#594e9b,#2b2e53);display:grid;place-items:center;color:#d2b8ff;font-size:24px}.cover-thumb img{width:100%;height:100%;object-fit:cover;border-radius:11px}.track-meta{display:block;min-width:0;flex:1}.track-meta strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px}.track-meta small{display:block;color:#8e93a6;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:11px}.track-actions{display:flex;align-items:center;gap:4px}.icon-button{width:32px;height:32px;border:0;background:transparent;color:#a7adc3;border-radius:8px;cursor:pointer;font-size:17px}.icon-button:hover{background:#343145;color:white}.icon-button.delete:hover{color:var(--danger)}.hint,.form-note{font-size:11px;color:#7e8496;line-height:1.55;margin-top:18px}.empty{text-align:center;padding:29px 24px 36px;border:1px dashed #35394c;border-radius:20px;background:#171a26}.empty-art{display:grid;place-items:center;margin:0 auto 13px;width:64px;height:64px;border-radius:18px;background:linear-gradient(140deg,#4c3c81,#282b50);font-size:35px;color:#c5a5ff}.empty h3{margin:0 0 6px;font-size:19px}.empty p{font-size:12px;color:var(--muted);line-height:1.55;margin:0 auto 18px;max-width:260px}.primary-button{display:flex;align-items:center;justify-content:space-between;gap:20px;border:0;border-radius:12px;padding:13px 17px;background:linear-gradient(100deg,#bb93ff,#7968e7);color:#171026;font-weight:850;cursor:pointer;font-size:13px;box-shadow:0 9px 27px #7757c83b}.primary-button span{font-size:18px}.primary-button:disabled{opacity:.5;cursor:wait}.empty .primary-button{margin:auto}.selection-bar{position:sticky;bottom:13px;display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:15px;border:1px solid #795fba;border-radius:14px;background:#2c2444;padding:10px 12px;color:#e8dcff;font-size:12px;box-shadow:0 14px 30px #0008}.selection-bar button{border:0;border-radius:9px;background:#b994ff;color:#211431;padding:10px 13px;font-weight:800;cursor:pointer;font-size:11px}#upload-form{display:grid;gap:14px}.cover-picker,.audio-picker{display:flex;align-items:center;gap:14px;border:1px dashed #56526a;background:#191b2a;border-radius:16px;padding:12px;cursor:pointer}.cover-picker:hover,.audio-picker:hover{border-color:#ab88f6}.cover-preview{flex:none;width:82px;height:82px;display:grid;place-items:center;border-radius:11px;background:linear-gradient(135deg,#5e4e94,#32355e);color:#dac9ff;font-size:37px;overflow:hidden}.cover-preview img{height:100%;width:100%;object-fit:cover}.cover-copy{display:grid;gap:4px;min-width:0}.cover-copy strong,.audio-picker strong{font-size:13px}.cover-copy span,.cover-copy small,.audio-picker small{color:#8e93a6;font-size:10px}.cover-arrow{margin-left:auto;color:#bd9aff;font-size:23px}.field{display:grid;gap:8px}.field label{color:#aaaec0;font-size:10px;font-weight:800;letter-spacing:.12em}.field label span{color:#74798b;font-weight:500;letter-spacing:.04em;margin-left:4px}.field input{height:48px;border:1px solid #34384a;background:#1b1e2d;border-radius:11px;color:#f5f1fb;padding:0 14px;outline:0;font-size:13px}.field input:focus{border-color:#a680f2;box-shadow:0 0 0 3px #a680f220}.field input::placeholder{color:#656b7f}.audio-picker{border-style:solid;min-height:70px}.audio-symbol{width:43px;height:43px;flex:none;border-radius:10px;display:grid;place-items:center;background:#343057;color:#c6a9ff;font-size:25px}.audio-picker>span:nth-child(2){display:grid;gap:5px}.submit{width:100%;height:49px;margin-top:5px}.form-note{text-align:center;margin:0}.notice{position:fixed;bottom:calc(20px + env(safe-area-inset-bottom));left:20px;right:20px;max-width:680px;margin:auto;background:#2d2544;color:#f2ebff;border:1px solid #6d599d;border-radius:12px;padding:13px 16px;font-size:12px;box-shadow:0 15px 35px #0009;z-index:5}[hidden]{display:none!important}@media(max-width:420px){.shell{padding-left:16px;padding-right:16px}.topbar{margin-bottom:28px}.hero{padding-bottom:28px}.hero h1{font-size:40px}.track{gap:9px}.select-track{gap:9px}.cover-thumb{width:45px;height:45px}.track-actions{gap:0}}

/* Keep the collection inside the Mini App viewport. */
.track-list { grid-template-columns: minmax(0, 1fr); min-width: 0; }
.track { width: 100%; min-width: 0; }
.select-track { flex: 1 1 0; width: 0; }
.track-meta { flex: 1 1 0; }
.track-actions { flex: none; }
.icon-button { flex: none; }
.track.unavailable .track-meta small,
.track.unavailable .track-actions .icon-button:first-child { color: #e4af72; }

@media (max-width: 520px) {
  .shell { padding: calc(16px + env(safe-area-inset-top)) 16px calc(32px + env(safe-area-inset-bottom)); }
  .topbar { margin-bottom: 28px; }
  .hero { display: block; padding: 9px 0 28px; }
  .hero h1 { font-size: clamp(34px, 9.5vw, 40px); }
  .hero-stats { margin-top: 20px; }
  .tabs { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin-bottom: 24px; }
  .tab { min-width: 0; padding: 0 5px; }
  .section-head { gap: 8px; margin-bottom: 14px; }
  .section-head h2 { font-size: 23px; }
  .text-button { flex: none; white-space: nowrap; }
  .track { gap: 6px; padding: 9px; }
  .select-track { gap: 8px; }
  .cover-thumb { width: 44px; height: 44px; }
  .track-meta strong { white-space: normal; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; line-height: 1.3; }
  .track-actions { gap: 0; }
  .icon-button { width: 38px; height: 40px; }
}

@media (max-width: 360px) {
  .track-meta strong { -webkit-line-clamp: 3; }
}

/* iOS zooms the whole WebView when a focused text field has a smaller font. */
.field input { font-size: 16px; }
.cover-copy .optional { color: #8e93a6; font-size: 10px; font-weight: 500; }