:root{--bg-overlay: rgba(0,0,0,.72);--card: rgba(0,0,0,.6);--fg: #ffffff;--muted: #b8b8b8;--accent: #c7d3cd;--accent-2: #7dd3fc;--shadow: 0 10px 40px rgba(0,0,0,.55);--radius: 18px;--focus: 0 0 0 3px rgba(199,211,205,.45);--font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"}*,*:before,*:after{box-sizing:border-box}html,body{height:100%}body{margin:0;color:var(--fg);font-family:var(--font);background-color:#000;background-image:linear-gradient(var(--bg-overlay),var(--bg-overlay)),url(/assets/WEBSITE%20BACKGROUND.png);background-position:center;background-size:cover;background-repeat:no-repeat;background-attachment:fixed}@media (max-width: 768px){body{background-image:linear-gradient(var(--bg-overlay),var(--bg-overlay)),url(/assets/WEBSITE%20MOBILE%20BACKGROUND.png);background-attachment:scroll}}.hero{width:100%;padding:20px;text-align:center;background:linear-gradient(180deg,#0000008c,#0000)}.hero__logo{width:clamp(180px,60vw,560px);height:auto;filter:drop-shadow(0 8px 24px rgba(0,0,0,.8));-webkit-user-select:none;user-select:none;-webkit-user-drag:none}.wrap{max-width:1100px;margin:0 auto;padding:24px}.panel{display:grid;gap:24px;grid-template-columns:340px 1fr}@media (max-width: 980px){.panel{grid-template-columns:1fr}}.album{background:var(--card);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}.album__art{width:100%;aspect-ratio:1/1;object-fit:cover;display:block}.album__meta{padding:14px 16px}.album__title{margin:0;font-size:1.25rem}.album__subtitle{margin:6px 0 0;color:var(--muted);font-size:.95rem}.album__np{margin:10px 0 0;color:var(--muted);font-size:.9rem}.zip{display:inline-block;margin-top:8px;padding:10px 14px;border-radius:12px;background:#1f2937;color:#fff;text-decoration:none;border:1px solid transparent}.zip:hover{border-color:#3b3b4a}.player-card{background:var(--card);border-radius:var(--radius);padding:12px;box-shadow:var(--shadow);display:flex;flex-direction:column;max-height:72vh}.controls{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:8px}.controls__spacer{flex:1}.btn{cursor:pointer;border:0;border-radius:12px;padding:8px 12px;background:#1f2937;color:#fff;transition:transform .06s ease,background .2s ease,box-shadow .2s ease}.btn:hover{background:#243041}.btn:active{transform:translateY(1px)}.btn--primary{background:#334155}.btn--primary:hover{background:#3b4b61}.volume{display:flex;gap:8px;align-items:center;color:var(--muted)}.progress{display:grid;grid-template-columns:48px 1fr 48px;gap:8px;align-items:center;padding:10px 8px}.time{color:var(--muted);font-size:.9rem;font-variant-numeric:tabular-nums}.seek__bar,.volume input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:8px;border-radius:999px;background:#ffffff1f;outline:none}.seek__bar::-webkit-slider-thumb,.volume input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:999px;background:#fff;border:2px solid #000;box-shadow:var(--shadow)}.seek__bar::-moz-range-thumb,.volume input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:999px;background:#fff;border:2px solid #000}.list{margin-top:8px;flex:1 1 auto;overflow:auto;min-height:0;padding:4px}.playlist__item{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:8px 10px;border-radius:12px;cursor:pointer;border:1px solid transparent}.playlist__item:hover{background:#ffffff0f}.playlist__item--active{background:#ffffff1a;border-color:#ffffff26}.idx{width:2.6ch;text-align:center;color:var(--muted);font-variant-numeric:tabular-nums}.playlist__title{margin:0;font-weight:600}.playlist__meta{margin:0;color:var(--muted);font-size:.9rem}.row-actions{display:flex;gap:8px;align-items:center}.row-actions .dl{color:#fff;text-decoration:none;background:#1f2937;padding:8px 10px;border-radius:10px;border:1px solid transparent}.row-actions .dl:hover{border-color:#3b3b4a}.site-footer{text-align:center;color:var(--muted);padding:28px 12px}:focus-visible{outline:none;box-shadow:var(--focus);border-radius:8px}.list::-webkit-scrollbar{width:10px}.list::-webkit-scrollbar-track{background:transparent}.list::-webkit-scrollbar-thumb{background:#ffffff26;border-radius:10px}.list::-webkit-scrollbar-thumb:hover{background:#ffffff40}@media (prefers-reduced-motion: reduce){.btn{transition:none}.hero__logo{filter:none}}
