@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
*{box-sizing:border-box}body{margin:0;background:#090909;color:#eee;font:13px Inter,Arial;padding-bottom:88px}header{height:70px;border-bottom:1px solid #242424;display:flex;align-items:center;padding:0 38px;gap:55px;position:sticky;top:0;background:#090909ee;z-index:5}.logo{color:#fff;text-decoration:none;font-weight:700;font-size:20px;letter-spacing:.06em}.logo small{display:block;font-size:8px;letter-spacing:.28em;color:#888}nav{display:flex;gap:30px}nav a,.admin{color:#777;text-decoration:none}nav .active,nav a:hover,.admin:hover{color:#fff}.admin{margin-left:auto}.hero{max-width:1500px;margin:auto;padding:82px 38px 70px;position:relative;overflow:hidden}.hero:after{content:"";position:absolute;width:700px;height:360px;left:130px;top:0;background:radial-gradient(circle,rgba(255,70,170,.25),transparent 30%),radial-gradient(circle at 60%,rgba(50,190,255,.2),transparent 35%),radial-gradient(circle at 80%,rgba(255,210,70,.14),transparent 28%);filter:blur(45px);animation:drift 9s ease-in-out infinite alternate}@keyframes drift{to{transform:translate(100px,-20px)}}.hero p,.block>p{font-size:10px;letter-spacing:.2em;color:#666;font-weight:600;position:relative;z-index:1}.hero h1{font-size:clamp(55px,7vw,90px);line-height:.9;letter-spacing:-.065em;margin:18px 0;position:relative;z-index:1}.hero h1 span{background:linear-gradient(90deg,#ff5ba9,#9565ff,#35caff,#ffd45a);background-size:250%;-webkit-background-clip:text;color:transparent;animation:grad 7s infinite}@keyframes grad{50%{background-position:100%}}.sub{color:#777;font-size:16px;position:relative;z-index:1}.tools{max-width:1500px;margin:auto;padding:0 38px}.search{border:1px solid #303030;border-radius:14px;height:48px;width:min(730px,100%);padding:0 16px;display:flex;align-items:center;gap:10px;color:#aaa;font-size:20px}.search input{background:none;border:0;outline:0;color:#fff;width:100%;font-size:13px}.filters{display:flex;gap:28px;align-items:center;border-bottom:1px solid #242424;padding:27px 0 19px}.filters button,.filters select{background:none;border:0;color:#aaa}.filters button{cursor:pointer}.filters i{flex:1}.filters label{color:#888}.filters input{accent-color:#fff}.filters select{outline:0}.filters+div,.tools>div:last-child{display:flex;gap:8px;flex-wrap:wrap}.tools>#menu{padding:14px 0}.tools>#menu:not(:empty){border-bottom:1px solid #242424}.chip,.menuitem{border:1px solid transparent;background:#202020;color:#999;border-radius:18px;padding:8px 13px;cursor:pointer}.chip.active,.chip:hover,.menuitem:hover{border-color:#555;color:#fff}.count{padding:18px 0;color:#555}#tracks{max-width:1500px;margin:auto;padding:0 20px}.track{display:grid;grid-template-columns:58px 34px 1.1fr 150px 60px 2fr 190px;gap:14px;align-items:center;min-height:88px;padding:0 16px;border-bottom:1px solid #171717}.track:hover,.track.active{background:#151515}.cover{width:48px;height:48px;object-fit:cover;background:#1a1a1a}.name b,.name small{display:block}.name small,.tags,.duration{color:#666;font-size:11px;margin-top:6px}.playbtn,.act{background:none;border:0;color:#eee;cursor:pointer}.wave,.pwave{display:flex;align-items:center;height:56px;gap:2px;opacity:1;overflow:hidden;min-width:0}.wave i,.pwave i{display:block;width:2px;min-width:2px;height:20px;background:#bdbdbd;border-radius:3px;opacity:.95;flex:1 1 0}.actions{display:flex;justify-content:flex-end;gap:14px}.license{border:1px solid #777!important;border-radius:20px!important;padding:8px 13px!important}.block{max-width:1500px;margin:70px auto 0;padding:100px 38px;border-top:1px solid #242424}.block h2{font-size:clamp(40px,5vw,64px);line-height:.95;letter-spacing:-.05em;margin:0}.block p{margin-bottom:20px}footer{border-top:1px solid #242424;padding:28px 38px;color:#555}.player{position:fixed;z-index:10;bottom:0;left:0;right:0;height:82px;background:#171717;border-top:1px solid #333;display:flex;align-items:center;gap:14px;padding:0 28px}.player img{width:48px;height:48px;background:#222;object-fit:cover}.player button{background:none;border:0;color:#aaa;cursor:pointer}.player #play{width:42px;height:42px;border-radius:50%;background:#eee;color:#111}.player small{display:block;color:#666;margin-top:5px}.pwave{flex:1;min-width:180px}.player input{width:110px;accent-color:#1688ff;cursor:pointer}.volume-icon{width:24px;height:24px;display:flex;align-items:center;justify-content:center;color:#fff;cursor:pointer;flex:0 0 24px}.volume-icon svg{width:21px;height:21px;fill:currentColor}.volume-icon.muted{color:#777}.player span{font-size:10px;color:#666}@media(max-width:900px){header{padding:0 20px}nav{display:none}.hero,.tools,.block{padding-left:20px;padding-right:20px}.filters{gap:15px;flex-wrap:wrap}.filters i{display:none}.track{grid-template-columns:48px 30px 1fr 65px}.tags,.wave{display:none}.actions{grid-column:3/5;justify-content:flex-start}.player{height:72px;padding:0 10px}.pwave,.player input{display:none}.block{padding-top:70px;padding-bottom:70px}}
/* admin */.adminpage{padding-bottom:0}.adminmain{max-width:1300px;margin:auto;padding:70px 38px}.adminhead{display:flex;justify-content:space-between;align-items:end;margin-bottom:50px}.adminhead h1{font-size:clamp(45px,6vw,75px);line-height:.9;letter-spacing:-.06em;margin:0}.adminhead h1 span{color:#888}.admingrid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.card{background:#111;border:1px solid #242424;padding:30px}.card h2{font-size:25px;margin:0 0 10px}.muted{color:#666;line-height:1.6}.card label{display:block;color:#888;font-size:11px;margin:18px 0}.card input:not([type=file]):not([type=checkbox]){display:block;width:100%;margin-top:8px;background:#090909;border:1px solid #303030;color:#fff;padding:12px;border-radius:8px}.card input[type=file]{display:block;margin-top:8px;color:#777}.twocol{display:grid;grid-template-columns:1fr 1fr;gap:15px}.publish{width:100%;padding:13px;border:0;border-radius:8px;background:#eee;color:#111;font-weight:600;cursor:pointer}.fileinfo,.status{margin-top:12px;color:#666;font-size:11px}.adminitem{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid #222;margin:8px 0}.adminitem img{width:42px;height:42px;object-fit:cover;background:#222}.adminitem div{flex:1}.adminitem small{display:block;color:#666;margin-top:5px}.remove,.reset{background:none;border:1px solid #493030;color:#a88;border-radius:18px;padding:7px 11px;cursor:pointer}@media(max-width:800px){.adminmain{padding:50px 20px}.admingrid{grid-template-columns:1fr}.adminhead{display:block}.twocol{grid-template-columns:1fr}}

.detail-modal{display:none;position:fixed;inset:0;z-index:100}.detail-modal.open{display:block}.detail-backdrop{position:absolute;inset:0;background:#000b;backdrop-filter:blur(7px)}.detail-panel{position:absolute;right:0;top:0;bottom:0;width:min(760px,100%);overflow:auto;background:#111;border-left:1px solid #333;padding:45px}.detail-close{position:absolute;right:22px;top:14px;background:none;border:0;color:#999;font-size:30px;cursor:pointer}.detail-cover{width:170px;height:170px;object-fit:cover;background:#222;margin-bottom:30px}.detail-panel h2{font-size:45px;letter-spacing:-.05em;margin:0 0 8px}.detail-artist{color:#777}.detail-tags{display:flex;flex-wrap:wrap;gap:7px}.detail-tags span{border:1px solid #303030;border-radius:20px;padding:7px 11px;color:#aaa;font-size:11px}.detail-wave-wrap{display:flex;align-items:center;gap:14px;border-top:1px solid #292929;border-bottom:1px solid #292929;padding:18px 0;margin:30px 0}.detail-wave-wrap>button{width:40px;height:40px;border:0;border-radius:50%;background:#eee;color:#111;cursor:pointer}.detail-wave{display:flex;align-items:center;gap:2px;height:38px;flex:1}.detail-wave i{width:2px;background:#777;border-radius:2px;flex:1 1 0}.detail-wave-wrap span{color:#666;font-size:10px}.detail-cols{display:grid;grid-template-columns:1.4fr 1fr;gap:35px;margin-bottom:30px}.detail-copy{color:#777;line-height:1.7}.meta div{display:flex;justify-content:space-between;border-bottom:1px solid #222;padding:10px 0;color:#666}.meta b{color:#999;font-weight:500}.license-box{border:1px solid #292929;padding:24px;margin-top:35px}.license-box h3{font-size:20px;margin:0 0 20px}.licenses{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.licenses button{background:#191919;border:1px solid #333;color:#eee;text-align:left;padding:13px;cursor:pointer}.licenses small,.licenses b{display:block}.licenses small{color:#777;margin-bottom:8px}.licenses b{font-size:15px}@media(max-width:700px){.detail-panel{padding:35px 20px}.detail-cover{width:120px;height:120px}.detail-panel h2{font-size:34px}.detail-cols,.licenses{grid-template-columns:1fr}}

/* Interactive player waveform */
.pwave{cursor:pointer;position:relative;align-items:center}
.pwave i{transition:background-color .08s linear,opacity .08s linear}
.pwave i.played{background:#1688ff!important}
.pwave:hover i{opacity:1}

/* Library sidebar filters + interactive progress waveforms */
.tools{display:grid;grid-template-columns:230px minmax(0,1fr);gap:34px;align-items:start}
.filter-sidebar{grid-column:1;grid-row:1;border-right:1px solid #242424;padding:2px 28px 10px 0;min-height:210px}
.library-area{grid-column:2;grid-row:1;min-width:0}
.filter-label,.filter-group-title{font-size:9px;letter-spacing:.18em;color:#666;font-weight:700;margin:0 0 13px}
.filter-group{margin-bottom:25px}
.filter-chips{display:flex;flex-wrap:wrap;gap:7px}
.sidebar-options{display:flex;flex-direction:column;gap:14px;padding-top:8px;border-top:1px solid #242424}
.sidebar-options label{color:#888;font-size:11px;padding-top:14px}
.sidebar-options input{accent-color:#1688ff;margin-right:7px}
.sidebar-options select{background:#111;border:1px solid #2b2b2b;color:#aaa;border-radius:8px;padding:9px 10px;outline:0;font:inherit}
.chip{font-size:11px;padding:7px 10px}
.track .wave{cursor:pointer}
.wave i.played,.detail-wave i.played{background:#1688ff!important;opacity:1}
.wave i,.pwave i,.detail-wave i{transition:background-color .06s linear,opacity .06s linear}
.detail-wave{cursor:pointer}
@media(max-width:900px){.tools{display:block}.filter-sidebar{border-right:0;border-bottom:1px solid #242424;padding:0 0 20px;margin-bottom:18px;min-height:0}.library-area{width:100%}.filter-chips{gap:6px}.sidebar-options{flex-direction:row;align-items:center;flex-wrap:wrap}.sidebar-options select{margin-left:auto}.track .wave{display:none}}

/* RGMA Music v11 — refined waveform */
.waveform, .player-waveform {
  gap: 2px !important;
}
.waveform .bar, .player-waveform .bar {
  width: 1px !important;
  min-width: 1px !important;
  border-radius: 1px !important;
}
.waveform {
  cursor: pointer;
}
.player-waveform {
  cursor: pointer;
}

/* RGMA Music — play button hover */
.player #play {
  transition: background-color .16s ease, transform .16s ease;
}
.player #play:hover {
  background: #d8d8d8;
}

/* RGMA Music v16 — wider waveform, thin bars without reducing height */
.player .pwave {
  flex: 1 1 auto !important;
  width: min(56vw, 920px) !important;
  min-width: 560px !important;
  max-width: none !important;
  gap: 2px !important;
  justify-content: space-between !important;
}
.player .pwave i {
  width: 2px !important;
  min-width: 2px !important;
  max-width: 2px !important;
  flex: 0 0 2px !important;
  height: 20px !important;
}
.player-icon {
  width: 24px;
  height: 24px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff !important;
  opacity: .82;
  transition: opacity .16s ease, transform .16s ease;
}
.player-icon:hover {
  opacity: 1;
  transform: translateY(-1px);
}
.player-icon svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
}
@media(max-width:900px){
  .player .pwave { min-width: 0 !important; width: auto !important; }
  .player-icon { display:none; }
}

/* RGMA Music v17 — player layout matching the reference */
.player {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
}
.player .pwave {
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  margin-right: 10px !important;
  height: 44px !important;
  align-items: center !important;
  overflow: hidden !important;
}
.player .pwave i {
  width: 2px !important;
  min-width: 2px !important;
  max-width: 2px !important;
  flex: 0 0 2px !important;
  border-radius: 2px !important;
}
.license-pill {
  appearance: none;
  border: 1px solid rgba(255,255,255,.48);
  background: transparent;
  color: #fff;
  border-radius: 999px;
  padding: 7px 16px;
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease;
}
.license-pill:hover {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.75);
}

/* RGMA Music v18 — real amplitude waveform in player */
.player .pwave {
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 54px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 2px !important;
  overflow: hidden !important;
}
.player .pwave i {
  width: 2px !important;
  min-width: 2px !important;
  max-width: 2px !important;
  flex: 0 0 2px !important;
  height: var(--bar-h) !important;
  border-radius: 2px !important;
}
.license-pill {
  appearance: none !important;
  border: 1px solid rgba(255,255,255,.48) !important;
  background: transparent !important;
  color: #fff !important;
  border-radius: 999px !important;
  padding: 7px 16px !important;
  font-size: 12px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  transition: background .16s ease, border-color .16s ease !important;
}
.license-pill:hover {
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(255,255,255,.75) !important;
}