:root{
  --bg:#f3f6fb;--bg2:#eef3f8;--ink:#17202b;--muted:#738191;--line:rgba(65,84,105,.13)
}
*{box-sizing:border-box}
html,body{height:100%;overflow:hidden}
body{
  margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,sans-serif;
  background:radial-gradient(circle at 7% 0%,rgba(255,255,255,.98),transparent 34%),
  radial-gradient(circle at 92% 4%,rgba(190,214,238,.48),transparent 30%),
  linear-gradient(145deg,var(--bg),#fafcfe 52%,var(--bg2));
  color:var(--ink);font-weight:300;letter-spacing:-.018em
}
button,input,textarea,select{font:inherit}
button{cursor:pointer}
.music-app{height:100dvh;position:relative;overflow:hidden;padding:16px 24px 18px}
.ambient{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.ring{position:absolute;width:460px;height:460px;left:-190px;top:8%;border-radius:50%;background:conic-gradient(from 20deg,rgba(123,157,196,.07),rgba(143,181,218,.28),rgba(215,195,233,.16),rgba(123,157,196,.07));-webkit-mask:radial-gradient(circle,transparent 60%,#000 61% 64%,transparent 65%);mask:radial-gradient(circle,transparent 60%,#000 61% 64%,transparent 65%)}
.glow{position:absolute;width:500px;height:240px;right:4%;top:5%;border-radius:56% 44% 58% 42%;background:linear-gradient(120deg,rgba(255,255,255,.03),rgba(148,187,225,.16),rgba(221,197,236,.12));filter:blur(20px);opacity:.72}
.line{position:absolute;width:500px;height:500px;right:-160px;bottom:-260px;border:1px solid rgba(117,148,184,.13);border-radius:50%;box-shadow:0 0 0 60px rgba(117,148,184,.024),0 0 0 120px rgba(255,255,255,.035)}
.music-header{height:54px;max-width:1320px;margin:0 auto;position:relative;z-index:5;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);font-weight:500}
.logo{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,#fff,#ccd9e7);box-shadow:inset 0 1px 0 #fff,0 8px 20px rgba(70,96,125,.15);font-size:12px;color:#42566f;font-weight:600}
.page-nav{display:flex;gap:5px;padding:5px;border:1px solid rgba(255,255,255,.88);background:rgba(255,255,255,.46);backdrop-filter:blur(20px);border-radius:15px}
.page-nav a{text-decoration:none;color:#687687;font-size:13px;padding:8px 11px;border-radius:10px}
.page-nav a.active{background:rgba(255,255,255,.88);color:#223244}
.account-link,.admin-button{height:38px;border-radius:12px;padding:0 14px;font-size:12px;text-decoration:none;align-items:center}
.account-link{display:inline-flex;color:#617184;background:rgba(255,255,255,.56);border:1px solid rgba(255,255,255,.9)}
.admin-button{display:none;border:1px solid rgba(255,255,255,.9)}
body.is-owner .admin-button{display:inline-flex}
.admin-button.soft{background:rgba(255,255,255,.8);color:#56687a}
.admin-button.primary{background:#172535;color:#fff;border-color:#172535}
.music-main{height:calc(100% - 54px);max-width:1240px;margin:0 auto;position:relative;z-index:2;display:grid;grid-template-rows:auto 1fr;gap:14px;padding-top:16px}
.hero{display:flex;justify-content:space-between;align-items:end}
.eyebrow{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.58);border:1px solid rgba(255,255,255,.92);color:#66778b;font-size:11px}
.eyebrow i{width:6px;height:6px;border-radius:50%;background:#8ea7c2}
h1{font-size:66px;line-height:.9;letter-spacing:-.064em;font-weight:250;margin:12px 0 10px}
.hero p{margin:0;color:#687583;font-size:14px;line-height:1.45;max-width:560px}
.hero-side{display:flex;flex-direction:column;align-items:flex-end;gap:8px;padding-bottom:3px}
.hero-meta{color:#82909d;font-size:11px}
.hero-admin-actions{display:flex;gap:8px;min-height:38px}
.library{min-height:0;display:grid;grid-template-columns:.95fr 1.45fr;gap:16px}
.section{min-height:0;position:relative;border:1px solid rgba(255,255,255,.9);background:rgba(255,255,255,.5);backdrop-filter:blur(22px);border-radius:24px;padding:14px;box-shadow:0 18px 55px rgba(51,73,98,.05);overflow:hidden}
.section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;padding:0 2px}
.section-head h2{font-size:17px;font-weight:400;letter-spacing:-.035em;margin:0}
.count{font-size:10px;color:#8c98a4}
.albums{height:calc(100% - 31px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.album{position:relative;min-height:0;border-radius:18px;overflow:hidden;background:linear-gradient(145deg,#dbe5ef,#9fb5ca 55%,#6f879e);box-shadow:0 12px 30px rgba(53,70,91,.10)}
.album:nth-child(even){background:linear-gradient(145deg,#e5d9ca,#bea98e 50%,#806f61)}
.album-art{position:absolute;inset:0;background:linear-gradient(180deg,transparent 42%,rgba(12,19,28,.58)),radial-gradient(circle at 72% 30%,rgba(255,255,255,.23),transparent 25%);background-size:cover;background-position:center}
.album-copy{position:absolute;left:14px;right:14px;bottom:12px;color:#fff}
.album-copy small{display:block;font-size:8.5px;text-transform:uppercase;letter-spacing:.12em;opacity:.68;margin-bottom:5px}
.album-copy strong{display:block;font-size:17px;font-weight:400;letter-spacing:-.035em}
.album-copy span{display:block;font-size:9px;opacity:.72;margin-top:3px}
.album-tools{position:absolute;right:10px;top:10px;display:flex;gap:6px;z-index:2}
.icon-btn{width:32px;height:32px;border:1px solid rgba(255,255,255,.24);border-radius:50%;background:rgba(255,255,255,.14);backdrop-filter:blur(10px);color:#fff;font-size:11px}
.edit-only{display:none}
body.is-owner .edit-only{display:inline-grid}
.songs{display:flex;flex-direction:column;gap:7px}
.song{min-height:58px;display:grid;grid-template-columns:40px minmax(0,1fr) auto auto auto;gap:10px;align-items:center;padding:8px 9px;border:1px solid rgba(77,97,119,.09);border-radius:14px;background:rgba(248,250,252,.75)}
.song-index{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;background:linear-gradient(145deg,#e8eef4,#d4e0ea);background-size:cover;background-position:center;color:#657a90;font-size:11px;font-weight:500}
.song-copy strong{display:block;font-size:12.5px;font-weight:500}
.song-copy span{display:block;font-size:9.5px;color:#8a96a2;margin-top:3px}
.song-album{font-size:9.5px;color:#84919d;padding:5px 8px;border-radius:999px;background:#eef3f6;white-space:nowrap}
.song-time{font-size:9.5px;color:#8a96a2}
.song-actions{display:flex;gap:5px}
.song-actions button{height:30px;border-radius:9px;border:1px solid rgba(76,96,118,.10);background:#fff;color:#607080;font-size:10px;padding:0 9px}
.song-actions .play{width:30px;padding:0;border:0;border-radius:50%;background:#172535;color:#fff}
.song-actions .download,.song-actions .edit{display:none}
body.is-owner .song-actions .download,body.is-owner .song-actions .edit{display:inline-flex;align-items:center}
.empty{position:absolute;inset:40px 14px 14px;display:grid;place-items:center;text-align:center;color:#86929e}
.empty.hidden{display:none}
.empty strong{display:block;color:#273442;font-size:21px;font-weight:300;margin-bottom:6px}
.empty span{font-size:12px}
.modal-backdrop{position:fixed;inset:0;z-index:30;display:none;align-items:center;justify-content:center;padding:18px;background:rgba(28,40,53,.15);backdrop-filter:blur(18px) saturate(90%)}
.modal-backdrop.show{display:flex}
.modal{width:min(980px,calc(100vw - 36px));height:min(760px,calc(100vh - 36px));overflow:hidden;border:1px solid rgba(255,255,255,.98);border-radius:30px;background:rgba(255,255,255,.94);box-shadow:0 28px 85px rgba(40,58,79,.14);padding:22px 24px;display:grid;grid-template-rows:auto 1fr;gap:14px}
.modal-head{display:flex;justify-content:space-between;align-items:flex-start}
.kicker{font-size:9px;text-transform:uppercase;letter-spacing:.14em;color:#8a96a3}
.modal h2{font-size:30px;font-weight:300;letter-spacing:-.045em;margin:4px 0 0}
.close{width:34px;height:34px;border:0;border-radius:11px;background:#eef2f6;color:#667687;font-size:20px}
.album-form-shell,.song-form-shell{min-height:0;display:grid;grid-template-rows:1fr auto;gap:14px}
.modal-actions{display:flex;justify-content:flex-end;gap:8px}
.action-btn{height:40px;border-radius:12px;padding:0 15px;border:0;font-size:12px}
.action-btn.soft{background:#edf2f6;color:#5c6e80}
.action-btn.primary{background:#172535;color:#fff}
.label{display:block;color:#6f7d8b;font-size:10.5px;margin-bottom:5px}
.field input,.field textarea,.field select{width:100%;border:1px solid rgba(73,92,114,.14);background:#f7f9fb;border-radius:12px;color:#1c2936;outline:none}
.field input,.field select{height:40px;padding:0 12px}
.field textarea{height:72px;padding:10px 12px;resize:none}
.cover-box{border:1px dashed rgba(87,110,135,.27);border-radius:17px;background:linear-gradient(180deg,#f8fafc,#f1f5f8);display:flex;align-items:center;justify-content:center;text-align:center;cursor:pointer}
.cover-box.square{height:220px}
.cover-box strong{display:block;font-size:11px;font-weight:500;color:#3a4a5c;margin-top:8px}
.cover-box small{display:block;font-size:9.5px;color:#929da8;margin-top:3px}
.cover-icon{width:84px;height:84px;border-radius:18px;background:linear-gradient(145deg,#dbe5ef,#a8bdd1);background-size:cover;background-position:center;display:grid;place-items:center;margin:auto;color:#63788e;font-size:24px}
.album-form{min-height:0;display:grid;grid-template-columns:230px 1fr;gap:18px}
.album-right{display:grid;grid-template-rows:auto auto 1fr;gap:12px;min-height:0}
.two{display:grid;grid-template-columns:1fr 150px;gap:10px}
.song-selector{min-height:0;border:1px solid rgba(73,92,114,.10);border-radius:16px;background:#f8fafc;padding:12px;display:grid;grid-template-rows:auto 1fr auto;gap:8px}
.song-selector-head{display:flex;justify-content:space-between;align-items:center}
.song-selector-head strong{font-size:11px;font-weight:500;color:#3d4c5c}
.song-selector-head span{font-size:9.5px;color:#8c98a4}
.selector-list{display:grid;grid-template-columns:1fr 1fr;gap:7px;align-content:start;min-height:0;overflow:hidden}
.selector-item{display:flex;align-items:center;gap:8px;border:1px solid rgba(78,96,116,.08);background:#fff;border-radius:11px;padding:8px}
.selector-item input{accent-color:#536f91}
.selector-item span{font-size:10.5px;color:#516273}
.upload-card{width:100%;border:1px dashed rgba(87,110,135,.24);border-radius:12px;background:#fff;min-height:62px;display:flex;align-items:center;gap:10px;padding:10px;text-align:left}
.upload-card-icon{width:38px;height:38px;border-radius:10px;background:#edf2f6;display:grid;place-items:center;color:#698199;flex:0 0 auto}
.upload-card strong{display:block;font-size:10.5px;font-weight:500}
.upload-card small{display:block;font-size:9px;color:#8c98a4;margin-top:2px}
.song-form{min-height:0;display:grid;grid-template-columns:220px 1fr;gap:18px}
.song-right{display:grid;grid-template-columns:1fr 1fr;gap:10px 12px;align-content:start;min-height:0}
.full{grid-column:1/-1}
.checkbox{display:flex;align-items:center;gap:8px;font-size:10.5px;color:#5f7080}
.checkbox input{accent-color:#536f91}
.lyrics textarea{height:112px}
.song-file{grid-column:1/-1;border:1px dashed rgba(87,110,135,.25);border-radius:14px;background:#f8fafc;height:76px;display:flex;align-items:center;gap:12px;padding:12px;cursor:pointer}
.song-file .upload-card-icon{width:44px;height:44px}
.player{position:fixed;left:50%;bottom:18px;z-index:25;transform:translate(-50%,20px);width:min(780px,calc(100vw - 40px));height:68px;border:1px solid rgba(255,255,255,.9);border-radius:19px;background:rgba(255,255,255,.9);backdrop-filter:blur(22px);box-shadow:0 16px 45px rgba(43,60,82,.15);display:grid;grid-template-columns:44px 1fr 180px 86px 38px 30px;align-items:center;gap:11px;padding:0 14px;opacity:0;pointer-events:none;transition:.22s}
.player.show{opacity:1;pointer-events:auto;transform:translate(-50%,0)}
.player-cover{width:44px;height:44px;border-radius:11px;display:grid;place-items:center;background:linear-gradient(145deg,#dbe5ef,#a8bdd1);background-size:cover;background-position:center;color:#60758d}
.player-copy strong{display:block;font-size:12px;font-weight:500}
.player-copy span{display:block;font-size:9.5px;color:#8995a1;margin-top:3px}
.player-progress{height:4px;border-radius:999px;background:#e5ebf0;overflow:hidden}
.player-progress i{display:block;height:100%;width:26%;background:#536d89;border-radius:inherit}
.player-time{font-size:9.5px;color:#7e8b98}
.player-control{width:38px;height:38px;border:0;border-radius:50%;background:#172535;color:#fff}
.player-close{border:0;background:transparent;color:#85919c;font-size:18px}
.toast{position:fixed;right:24px;bottom:24px;z-index:40;background:#172535;color:white;border-radius:13px;padding:11px 14px;font-size:12px;opacity:0;transform:translateY(8px);pointer-events:none;transition:.22s}
.toast.show{opacity:1;transform:none}
@media(max-height:760px){
  .music-main{padding-top:10px;gap:10px}
  h1{font-size:54px;margin:8px 0}
  .hero p{font-size:12.5px}
  .section{padding:11px}
  .song{min-height:51px;padding:6px 8px}
  .modal{height:min(700px,calc(100vh - 24px));padding:18px 20px}
  .cover-box.square{height:190px}
  .lyrics textarea{height:92px}
}
@media(max-width:900px){
  .page-nav{display:none}
  .library{grid-template-columns:1fr}
  .albums-section{max-height:230px}
}