@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,500;0,600;1,500;1,600&display=swap');
:root{--bg:#08090b;--panel:#111317;--line:#292a2d;--gold:#d8b66f;--pale:#f1d99e;--muted:#92949a}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 50% -20%,#24201a 0,#08090b 55%);color:#f3f0e9;font-family:'DM Sans',sans-serif;min-height:100vh}.topbar{height:76px;border-bottom:1px solid #242326;display:flex;align-items:center;justify-content:space-between;padding:0 max(5vw,22px)}.brand{display:flex;align-items:center;gap:10px;color:#eee;text-decoration:none;font-size:13px;font-weight:700;letter-spacing:3px}.brand i{color:var(--gold);font-style:normal}.mark{display:grid;place-items:center;border:1px solid var(--gold);border-radius:50%;width:34px;height:34px;color:var(--gold);font-family:Georgia;font-size:20px}.shell{width:min(1000px,90%);margin:0 auto 80px}.intro{padding:68px 0 38px}.eyebrow{font-size:10px;letter-spacing:2.8px;color:var(--gold);font-weight:700}.intro h1,.login-card h1{font:500 clamp(38px,6vw,66px)/1.1 'Playfair Display',serif;margin:15px 0}.intro h1 em,.login-card h1 em{color:var(--pale);font-weight:500}.muted{color:var(--muted);font-size:13px}.panel{background:linear-gradient(145deg,#15171b,#0e0f12);border:1px solid var(--line);border-radius:16px;padding:25px;margin-bottom:22px;box-shadow:0 18px 60px #0005}.upload{display:flex;justify-content:space-between;align-items:center;gap:25px}.upload h2,.library-head h2{font:500 25px 'Playfair Display',serif;margin:7px 0}.gold{background:linear-gradient(120deg,#b18b43,#f1d99e);color:#17130c;border:0;border-radius:7px;padding:13px 20px;font-weight:700;cursor:pointer}.dropzone{border:1px dashed #655536;border-radius:9px;padding:15px;margin-top:12px;color:#b9aa89;font-size:12px;text-align:center;min-width:230px}.dropzone.drag{background:#332817;border-color:var(--pale)}progress{width:100%;margin-top:10px;accent-color:var(--gold)}.library-head{display:flex;align-items:end;justify-content:space-between;margin:42px 0 15px}.count{font:13px 'DM Sans';color:var(--gold);margin-left:8px}.search,input[type=password]{background:#111317;border:1px solid #33343a;color:#fff;border-radius:7px;padding:12px 14px;outline:none}.player{padding:22px}.now{display:flex;align-items:center;gap:16px;margin-bottom:15px}.disc{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,#6e5427,#e5c77f);color:#17130c;font-size:23px}.now h3{margin:5px 0;font-size:16px}audio,video{width:100%;margin:12px 0}video{max-height:480px;background:#000}.controls{display:flex;justify-content:space-between}.quiet{background:transparent;border:1px solid #393a3d;border-radius:7px;color:#c6c4bd;padding:9px 13px;cursor:pointer}.playlist{display:grid;gap:8px}.media-row{width:100%;display:flex;align-items:center;gap:15px;text-align:left;background:#101216;border:1px solid #26282c;border-radius:9px;padding:14px;color:#eee;cursor:pointer}.media-row:hover,.media-row.active{border-color:#9b7b43;background:#191713}.file-icon{color:var(--gold);width:25px;text-align:center}.file-name{overflow-wrap:anywhere;flex:1}.file-type{font-size:9px;letter-spacing:1.5px;color:#9c8a64}.empty{text-align:center;color:var(--muted);padding:35px}.login{display:grid;place-items:center;padding:25px}.login-card{width:min(440px,100%);padding:42px;background:#111317;border:1px solid #343036;border-radius:16px;box-shadow:0 25px 90px #0009}.login-card .brand{margin-bottom:42px}.login-card label{display:block;font-size:12px;color:#c5c1b7;margin:22px 0 8px}.login-card input[type=password]{width:100%;padding:14px}.full{width:100%;margin-top:18px}.error{color:#ff9c91;background:#3a1c1b;padding:10px;border-radius:6px;font-size:13px}@media(max-width:650px){.upload{display:block}.upload form{margin-top:18px}.dropzone{min-width:0}.library-head{align-items:start;gap:12px;flex-direction:column}.search{width:100%}.intro{padding-top:48px}.panel{padding:18px}}