:root{
      --bg:#07111f;
      --card:rgba(255,255,255,.08);
      --card-border:rgba(255,255,255,.14);
      --text:#f5f7fb;
      --muted:#b8c2d1;
      --primary:#00b7ff;
      --primary-2:#3b82f6;
      --shadow:0 25px 60px rgba(0,0,0,.45);
      --radius:28px;
    }

    *{box-sizing:border-box}
    body{
      margin:0;
      min-height:100vh;
      font-family:"Poppins",sans-serif;
      color:var(--text);
      background:
        radial-gradient(circle at 20% 20%, rgba(0,183,255,.25), transparent 30%),
        radial-gradient(circle at 80% 30%, rgba(59,130,246,.22), transparent 35%),
        radial-gradient(circle at 50% 80%, rgba(0,183,255,.18), transparent 40%),
        linear-gradient(135deg,#040b16 0%, #07111f 35%, #0b1830 100%);
      display:grid;
      place-items:center;
      overflow-x:hidden;
      overflow-y:auto;
      padding:20px;
    }

    .bg-orb{
      position:fixed;
      border-radius:50%;
      filter:blur(60px);
      opacity:.45;
      animation:float 10s ease-in-out infinite;
      pointer-events:none;
    }
    .orb1{width:260px;height:260px;background:#00b7ff;top:-60px;left:-40px}
    .orb2{width:320px;height:320px;background:#3b82f6;bottom:-120px;right:-80px;animation-delay:-5s}

    @keyframes float{
      0%,100%{transform:translateY(0) translateX(0)}
      50%{transform:translateY(-18px) translateX(12px)}
    }

    .player{
      width:min(92vw, 420px);
      background:var(--card);
      border:1px solid var(--card-border);
      backdrop-filter:blur(24px);
      -webkit-backdrop-filter:blur(24px);
      border-radius:var(--radius);
      padding:28px;
      box-shadow:var(--shadow);
      position:relative;
      overflow-x:hidden;
      overflow-y:auto;
      padding:20px;
    }

    .player::before{
      content:"";
      position:absolute;
      inset:-1px;
      background:linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,0));
      border-radius:inherit;
      pointer-events:none;
    }

    .top{
      display:flex;
      justify-content:space-between;
      align-items:center;
      margin-bottom:22px;
    }

    .live{
      display:inline-flex;
      align-items:center;
      gap:10px;
      padding:8px 14px;
      border-radius:999px;
      background:rgba(255,255,255,.08);
      border:1px solid rgba(255,255,255,.12);
      font-size:.85rem;
      font-weight:600;
      letter-spacing:.04em;
    }

    .dot{
      width:10px;height:10px;border-radius:50%;
      background:#ff3b30;
      box-shadow:0 0 12px #ff3b30;
      animation:pulse 1.2s infinite;
    }
    @keyframes pulse{
      0%{transform:scale(1);opacity:1}
      70%{transform:scale(1.8);opacity:0}
      100%{transform:scale(1);opacity:0}
    }

    #clock{
      font-size:.9rem;
      color:var(--muted);
      font-weight:500;
    }

    .art{
      display:grid;
      place-items:center;
      margin:8px 0 18px;
    }

    .vinyl{
      width:220px;
      height:220px;
      border-radius:50%;
      position:relative;
      background:
        radial-gradient(circle at center, #111 0 28px, #0f172a 28px 40px, #111 40px 100%);
      box-shadow:
        inset 0 0 0 10px rgba(255,255,255,.03),
        inset 0 0 0 20px rgba(255,255,255,.02),
        0 18px 40px rgba(0,0,0,.45);
      animation:spin 6s linear infinite paused;
    }

    .vinyl.playing{animation-play-state:running}

    @keyframes spin{to{transform:rotate(360deg)}}

    .logo{
      position:absolute;
      width:92px;
      height:92px;
      border-radius:50%;
      object-fit:cover;
      border:3px solid rgba(255,255,255,.18);
      background:#0b1220;
    }

    .title{
      text-align:center;
      margin-top:6px;
    }

    .title h1{
      margin:0;
      font-size:2rem;
      letter-spacing:.08em;
    }

    .title p{
      margin:6px 0 0;
      color:var(--muted);
      font-size:.95rem;
    }

    .eq{
      height:54px;
      display:flex;
      justify-content:center;
      align-items:flex-end;
      gap:6px;
      margin:22px 0 10px;
    }

    .eq span{
      width:7px;
      height:12px;
      border-radius:999px;
      background:linear-gradient(180deg,var(--primary),#6ee7ff);
      animation:bars .9s ease-in-out infinite;
      animation-play-state:paused;
      box-shadow:0 0 12px rgba(0,183,255,.45);
    }

    .eq.playing span{animation-play-state:running}

    .eq span:nth-child(2){animation-delay:.1s}
    .eq span:nth-child(3){animation-delay:.2s}
    .eq span:nth-child(4){animation-delay:.3s}
    .eq span:nth-child(5){animation-delay:.4s}
    .eq span:nth-child(6){animation-delay:.5s}
    .eq span:nth-child(7){animation-delay:.6s}

    @keyframes bars{
      0%,100%{height:10px}
      50%{height:42px}
    }

    .controls{
      display:flex;
      justify-content:center;
      align-items:center;
      gap:18px;
      margin:18px 0 8px;
    }

    .ctrl{
      width:46px;height:46px;
      border-radius:50%;
      border:1px solid rgba(255,255,255,.12);
      background:rgba(255,255,255,.06);
      color:var(--text);
      display:grid;
      place-items:center;
      cursor:pointer;
      transition:.25s ease;
    }

    .ctrl:hover{
      transform:translateY(-2px);
      background:rgba(255,255,255,.12);
    }

    .play{
      width:78px;height:78px;
      border:none;
      border-radius:50%;
      background:linear-gradient(135deg,var(--primary),var(--primary-2));
      color:white;
      font-size:1.5rem;
      box-shadow:0 14px 28px rgba(0,183,255,.35);
    }

    .play:hover{
      transform:scale(1.06);
      box-shadow:0 18px 34px rgba(0,183,255,.45);
    }

    .volume-wrap{
      display:flex;
      align-items:center;
      gap:12px;
      margin-top:16px;
      padding:14px 16px;
      border-radius:18px;
      background:rgba(255,255,255,.05);
      border:1px solid rgba(255,255,255,.08);
    }

    .volume-wrap i{
      color:#cfe8ff;
      width:20px;
      text-align:center;
    }

    input[type=range]{
      -webkit-appearance:none;
      appearance:none;
      width:100%;
      height:6px;
      border-radius:999px;
      background:rgba(255,255,255,.14);
      outline:none;
    }

    input[type=range]::-webkit-slider-thumb{
      -webkit-appearance:none;
      appearance:none;
      width:18px;height:18px;
      border-radius:50%;
      background:white;
      box-shadow:0 0 10px rgba(255,255,255,.5);
      cursor:pointer;
    }

    .footer{
      display:flex;
      justify-content:space-between;
      align-items:center;
      margin-top:18px;
      font-size:.82rem;
      color:var(--muted);
    }

    .footer strong{color:#e7f2ff}

    @media (max-width:992px){
      .player{width:min(94vw,430px);padding:24px;}
      .vinyl{width:200px;height:200px;}
      .logo{width:85px;height:85px;}
      .title h1{font-size:1.8rem;}
    }

    @media (max-width:768px){
      body{padding:20px;overflow-x:hidden;overflow-y:auto;}
      .player{width:100%;max-width:420px;padding:22px;border-radius:24px;}
      .top{margin-bottom:18px;}
      .vinyl{width:170px;height:170px;}
      .logo{width:72px;height:72px;}
      .title h1{font-size:1.6rem;}
      .title p{font-size:.9rem;}
      .controls{gap:14px;}
      .play{width:68px;height:68px;font-size:1.3rem;}
      .ctrl{width:42px;height:42px;}
      .volume-wrap{padding:12px 14px;}
      .footer{flex-direction:column;gap:8px;text-align:center;}
    }

    @media (max-width:420px){
      body{padding:14px;}
      .player{padding:18px;}
      .live{padding:6px 12px;font-size:.75rem;}
      #clock{font-size:.8rem;}
      .vinyl{width:145px;height:145px;}
      .logo{width:62px;height:62px;}
      .title h1{font-size:1.35rem;letter-spacing:.05em;}
      .eq{height:42px;margin:18px 0;}
      .play{width:60px;height:60px;font-size:1.15rem;}
      .ctrl{width:38px;height:38px;}
      .volume-wrap{margin-top:14px;}
    }