:root{
      --bg:#0b0b10; --fg:#e8e8ef; --muted:#a9a9b6; --accent:#7c5cff; --accent-2:#2fd6c9;
      --card:#14141d; --card-2:#1b1b27; --track:#2a2a3a; --shadow:0 10px 30px rgba(0,0,0,.35);
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0; background:radial-gradient(1200px 600px at 10% -10%, #151521, #0b0b10);
      color:var(--fg); font:16px/1.45 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
      display:grid; place-items:center;
    }
    .player{
      width:min(1100px, 95vw); display:grid; gap:20px; grid-template-columns: 1.1fr .9fr;
    }
    @media (max-width: 900px){ .player{ grid-template-columns:1fr; } }

    .artwrap{
      position:relative; aspect-ratio:1/1; border-radius:24px; overflow:hidden; box-shadow:var(--shadow);
      background:var(--card);
      position: relative;
    }
    .artwrap::before{ /* soft glow background using cover */
      content:""; position:absolute; inset:-10%; filter:blur(35px) saturate(1.2) opacity(.35);
      background-size:cover; background-position:center; transform:scale(1.15);
      z-index:0;
    }
    .art{
      position:absolute; inset:0; background-size:cover; background-position:center; z-index:1;
      transition: transform .5s ease;
    }
    .art.is-playing{ transform: scale(1.03) rotate(.2deg); }

    /* Central controls overlay */
    .overlay{
      position:absolute; inset:0; display:grid; place-items:center; z-index:2; pointer-events:none;
      background: linear-gradient(to top, rgba(0,0,0,.55) 0%, rgba(0,0,0,.2) 60%, rgba(0,0,0,0) 100%);
    }
    .bigbtns{ display:flex; gap:18px; align-items:center; pointer-events:auto; }
    .btn{
      appearance:none; border:0; background:var(--card-2); color:var(--fg); cursor:pointer;
      border-radius:999px; width:60px; height:60px; display:grid; place-items:center; box-shadow:var(--shadow);
      transition:transform .15s ease, background .2s ease, opacity .2s ease;
    }
    .btn:hover{ transform:translateY(-2px); background:#222233; }
    .btn:active{ transform:translateY(0); }
    .btn--primary{ width:80px; height:80px; background:linear-gradient(135deg,var(--accent), var(--accent-2)); }

    /* Timeline & meta */
    .panel{ background:var(--card); border-radius:20px; box-shadow:var(--shadow); padding:18px 18px 16px; }
    .panel{
      margin-top: 14px;
    position: absolute;
    bottom: 0;
    width: 100%;
    z-index: 3;
    background: rgba(0, 0, 0, 0.7);
    }
    .title{ font-weight:700; font-size:20px; margin:0 0 4px; letter-spacing:.2px; }
    .artist{ margin:0; color:var(--muted); font-size:14px; }

    .timeline{ margin:14px 0 8px; height:12px; background:var(--track); border-radius:999px; position:relative; cursor:pointer; }
    .timeline .bar{ position:absolute; left:0; top:0; bottom:0; width:0%; background:linear-gradient(90deg,var(--accent),var(--accent-2)); border-radius:999px; }
    .timepair{ display:flex; justify-content:space-between; font-feature-settings:"tnum" on; font-variant-numeric: tabular-nums; color:var(--muted); font-size:12px; }

    .controls{ display:flex; align-items:center; gap:14px; margin-top:8px; flex-wrap:wrap; }
    .vol{ display:flex; align-items:center; gap:8px; }
    input[type="range"]{ -webkit-appearance:none; appearance:none; background:transparent; width:140px; height:18px; }
    input[type="range"]::-webkit-slider-runnable-track{ background:var(--track); height:8px; border-radius:999px; }
    input[type="range"]::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width:16px; height:16px; border-radius:50%; background:var(--fg); margin-top:-4px; box-shadow:0 0 0 3px rgba(255,255,255,.15); }
    input[type="range"]::-moz-range-track{ background:var(--track); height:8px; border-radius:999px; }
    input[type="range"]::-moz-range-thumb{ width:16px; height:16px; border-radius:50%; background:var(--fg); border:0; }

    .tracklist{ background:var(--card); border-radius:24px; box-shadow:var(--shadow); padding:16px; max-height:min(76vh, 680px); overflow:auto; }
    .track{
      display:grid; grid-template-columns: auto 1fr auto auto; gap:12px; align-items:center;
      padding:10px 8px; border-radius:14px; transition: background .15s ease;
    }
    .track:hover{ background:rgba(255,255,255,.04) }
    .track.is-active{ background:linear-gradient(90deg, rgba(124,92,255,.15), rgba(47,214,201,.15)); }
    .track .idx{ width:28px; text-align:right; color:var(--muted); font-variant-numeric: tabular-nums; }
    .track .meta{ overflow:hidden; }
    .track .name{ white-space:nowrap; text-overflow:ellipsis; overflow:hidden; }
    .track .sub{ font-size:12px; color:var(--muted) }

    .iconbtn, .dlbtn{
      appearance:none; border:0; background:transparent; color:var(--fg); cursor:pointer; padding:6px 10px; border-radius:10px;
    }
    .iconbtn:hover{ background:rgba(255,255,255,.08) }
    .dlbtn{ text-decoration:none; background:rgba(255,255,255,.06); }
    .dlbtn:hover{ background:rgba(255,255,255,.12) }

    .albumhead{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px; }
    .albumbtn{ appearance:none; border:0; cursor:pointer; padding:10px 14px; border-radius:12px; color:#0c0c12; background:linear-gradient(135deg,var(--accent), var(--accent-2)); font-weight:700; }
    .albumbtn[disabled]{ opacity:.6; cursor:not-allowed; }
    .hint{ color:var(--muted); font-size:12px; }