:root{
      --bg:#070812;
      --card:rgba(14, 16, 34, .72);
      --stroke:rgba(255,255,255,.10);
      --txt:#e9e9ff;
      --muted:rgba(233,233,255,.72);
      --neon1:#7c3aed;
      --neon2:#22d3ee;
      --neon3:#fb7185;
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      color:var(--txt);
      background: radial-gradient(1200px 700px at 20% 10%, rgba(124,58,237,.35), transparent 60%),
                  radial-gradient(900px 600px at 80% 30%, rgba(34,211,238,.25), transparent 60%),
                  radial-gradient(900px 700px at 50% 90%, rgba(251,113,133,.18), transparent 60%),
                  var(--bg);
      font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      overflow-x:hidden;
    }

    .bg{
      position: fixed;
      inset: 0;
      background:
        radial-gradient(900px 600px at 15% 20%, rgba(124,58,237,.35), transparent 60%),
        radial-gradient(800px 600px at 85% 30%, rgba(34,211,238,.30), transparent 60%),
        radial-gradient(900px 700px at 50% 90%, rgba(251,113,133,.22), transparent 65%),
        linear-gradient(180deg, #070812 0%, #0b0f2a 40%, #070812 100%);
      background-attachment: fixed;
      z-index: -3;
    }

    .city-bg{
      position: fixed;
      inset: 0;
      background-image: url("https://images.unsplash.com/photo-1519608487953-e999c86e7455?auto=format&fit=crop&w=1920&q=80");
      background-size: cover;
      background-position: center;
      opacity: .12;
      filter: saturate(1.4) contrast(1.1) blur(1px);
      z-index: -2;
    }

    .noise{
      position:fixed; inset:0;
      background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
      mix-blend-mode:overlay;
      opacity:.18;
      z-index:-1;
      pointer-events:none;
    }

    .wrap{
      min-height:100%;
      display:flex;
      align-items:center;
      justify-content:center;
      padding:32px 16px;
    }

    .card{
      width:min(980px, 100%);
      background:var(--card);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      border:1px solid var(--stroke);
      border-radius:24px;
      box-shadow: 0 20px 70px rgba(0,0,0,.45);
      overflow:hidden;
      position:relative;
    }

    .top{
      padding:26px 26px 18px;
      display:flex;
      gap:18px;
      align-items:center;
      border-bottom:1px solid var(--stroke);
      background:linear-gradient(90deg, rgba(124,58,237,.18), rgba(34,211,238,.10), rgba(251,113,133,.12));
    }

    .logo-img{
      width: 88px;
      height: 88px;
      border-radius: 22px;
      overflow: hidden;
      border: 1px solid rgba(255,255,255,.18);
      background: rgba(0,0,0,.28);
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow:
        0 0 18px rgba(34,211,238,.22),
        0 0 34px rgba(124,58,237,.18);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
    }
    .logo-img img{
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transform: scale(1.08);
      filter:
        drop-shadow(0 0 10px rgba(34,211,238,.22))
        drop-shadow(0 0 18px rgba(124,58,237,.16));
    }

    h1{
      margin:0;
      font-family: Orbitron, monospace;
      font-weight:700;
      letter-spacing:.04em;
      font-size: clamp(22px, 3.5vw, 34px);
      line-height:1.1;
    }
    .sub{
      margin:6px 0 0;
      color:var(--muted);
      font-size:14px;
    }

    .grid{
      display:grid;
      grid-template-columns: 1.15fr .85fr;
      gap:18px;
      padding:22px;
    }
    @media (max-width: 860px){
      .grid{grid-template-columns:1fr}
    }

    .panel{
      border:1px solid var(--stroke);
      border-radius:20px;
      padding:18px;
      background:rgba(255,255,255,.05);
    }

    /* LEFT panel only */
    .player-panel{
      position: relative;
      overflow: hidden;
    }
    .player-panel .ambient{
      position: absolute;
      inset: -20px;
      background-size: cover;
      background-position: center;
      filter: blur(22px) saturate(1.25) contrast(1.05);
      opacity: .18;
      transform: scale(1.12);
      z-index: 0;
    }
    .player-panel::after{
      content:"";
      position:absolute;
      inset:0;
      background:
        radial-gradient(600px 260px at 20% 10%, rgba(34,211,238,.10), transparent 60%),
        radial-gradient(600px 260px at 85% 30%, rgba(251,113,133,.10), transparent 60%),
        linear-gradient(180deg, rgba(10,12,26,.55), rgba(10,12,26,.78));
      z-index: 1;
      pointer-events:none;
    }
    .player-panel > *{
      position: relative;
      z-index: 2;
    }

    .now{
      display:flex;
      gap:16px;
      align-items:center;
    }
    .cover{
      width:104px; height:104px;
      border-radius:20px;
      border:1px solid rgba(255,255,255,.14);
      overflow:hidden;
      background:rgba(0,0,0,.25);
      flex:0 0 auto;
      box-shadow: 0 0 0 rgba(34,211,238,0);
      transition: .25s transform, .25s box-shadow;
    }
    .cover.playing{
      transform: translateY(-1px);
      box-shadow: 0 0 32px rgba(34,211,238,.18);
    }
    .cover img{width:100%;height:100%;object-fit:cover;display:block}

    .meta .label{color:var(--muted);font-size:12px}
    .meta .title{font-weight:600;font-size:18px;margin-top:4px}
    .meta .artist{color:var(--muted);font-size:13px;margin-top:3px}

    .subline{
      margin-top: 8px;
      font-size: 12px;
      color: rgba(233,233,255,.62);
      letter-spacing: .02em;
    }

    .controls{
      margin-top:16px;
      display:grid;
      grid-template-columns: 1fr;
      gap:12px;
    }

    .controlsRow{
      display:flex;
      gap:12px;
      align-items:center;
      flex-wrap:wrap;
    }

    .volRow{
      display:flex;
      align-items:center;
      gap:12px;
      margin-top: 11px;
      padding:10px 12px;
      border:1px solid rgba(255,255,255,.10);
      background:rgba(0,0,0,.16);
      border-radius:14px;
    }

    .volRow .volLabel{
      color:var(--muted);
      font-size:12px;
      font-family: Orbitron, monospace;
      letter-spacing:.08em;
      text-transform:uppercase;
      white-space:nowrap;
    }

    .volRow input[type="range"]{
      width: 280px;
      max-width: 52vw;
    }

    @media (max-width: 520px){
      .volRow{ width:100%; }
      .volRow input[type="range"]{
        width:100%;
        max-width:none;
      }
    }

    /* bitno: više nam ne treba “guranje udesno” */
    .vol{ margin-left:0; }

    .btn{
      appearance:none;
      border:1px solid rgba(255,255,255,.16);
      background:rgba(0,0,0,.25);
      color:var(--txt);
      padding:12px 14px;
      border-radius:14px;
      cursor:pointer;
      font-weight:600;
      display:inline-flex;
      gap:10px;
      align-items:center;
      transition:.15s transform, .15s background, .15s border;
      user-select:none;
      text-decoration:none;
    }
    .btn:hover{
      transform:translateY(-1px);
      background:rgba(0,0,0,.35);
      border-color:rgba(255,255,255,.26);
    }

    /* PLAY / PAUSE HERO BUTTON */
    .btn.primary{
      position: relative;
      min-width: 140px;
      justify-content: center;
      font-family: Orbitron, monospace;
      letter-spacing: .12em;
      text-transform: uppercase;
      background: linear-gradient(90deg, rgba(124,58,237,.9), rgba(34,211,238,.9));
      color: #fff;
      border: none;
      border-radius: 16px;
      box-shadow: 0 0 18px rgba(124,58,237,.45), 0 0 32px rgba(34,211,238,.35);
      transition: transform .15s ease, box-shadow .25s ease, background .25s ease;
    }
    .btn.primary:hover{
      transform: translateY(-1px);
      box-shadow: 0 0 22px rgba(124,58,237,.65), 0 0 44px rgba(34,211,238,.55);
    }
    .btn.primary:active{
      transform: translateY(0);
      box-shadow: 0 0 12px rgba(124,58,237,.45), 0 0 22px rgba(34,211,238,.35);
    }
    .btn.primary.pause{
      background: linear-gradient(90deg, rgba(251,113,133,.9), rgba(124,58,237,.9));
      box-shadow: 0 0 18px rgba(251,113,133,.45), 0 0 34px rgba(124,58,237,.35);
    }

    input[type="range"]{width:170px}

    /* --- NEW: mute + share buttons look a bit tighter --- */
    .btn.icon{
      padding: 12px 12px;
      min-width: 0;
      width: 46px;
      justify-content:center;
      font-size: 16px;
      line-height: 1;
    }

    .right h2{
      margin:0 0 10px;
      font-size:14px;
      color:var(--muted);
      font-weight:600;
      letter-spacing:.03em;
      text-transform:uppercase;
    }

    .kv{
      display:grid;
      grid-template-columns: 115px 1fr;
      gap:8px 10px;
      font-size:13px;
      color:var(--muted);
    }
    .kv b{color:var(--txt);font-weight:600}

    .badge{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:6px 10px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.14);
      background:rgba(0,0,0,.22);
      width:max-content;
      margin-top:10px;
      font-size:12px;
      color:var(--muted);
    }
    .dot{
      width:8px;height:8px;border-radius:50%;
      background:rgba(255,255,255,.35);
      box-shadow:0 0 0 rgba(34,211,238,0);
    }
    .dot.live{
      background:var(--neon3);
      box-shadow:0 0 18px rgba(251,113,133,.35);
    }
    .dot.dj{
      background:var(--neon2);
      box-shadow:0 0 18px rgba(34,211,238,.28);
    }

    .time{
      margin-top: 4px;
      font-size: 12px;
      color: rgba(233,233,255,.72);
      letter-spacing: .02em;
    }

    .bar{
      margin-top: 8px;
      width: 100%;
      height: 6px;
      border-radius: 999px;
      background: rgba(255,255,255,.10);
      overflow: hidden;
      border: 1px solid rgba(255,255,255,.10);
    }
    .barFill{
      height: 100%;
      width: 0%;
      border-radius: 999px;
      background: linear-gradient(90deg, rgba(34,211,238,.85), rgba(251,113,133,.75));
      box-shadow: 0 0 18px rgba(34,211,238,.20);
      transition: width .4s ease;
    }

    .np-h{
      font-size: 12px;
      color: rgba(233,233,255,.65);
      letter-spacing: .06em;
      text-transform: uppercase;
      margin-bottom: 6px;
    }
    .np-v{
      font-size: 13px;
      color: rgba(233,233,255,.92);
      line-height: 1.35;
      word-break: break-word;
    }
    .np-list{
      margin: 0;
      padding-left: 18px;
      color: rgba(233,233,255,.82);
      font-size: 13px;
      line-height: 1.35;
    }
    .np-list li{ margin: 6px 0; color: rgba(233,233,255,.80); }
    .np-list .when{ color: rgba(233,233,255,.55); font-size: 12px; margin-left: 6px; }

    .right-col{
      display: grid;
      grid-template-rows: auto 1fr;
      gap: 18px;
    }
    @media (max-width: 860px){
      .right-col{ grid-template-rows: auto; }
    }

    .panel.queue .np-next{
      padding-bottom: 12px;
      border-bottom: 1px solid rgba(255,255,255,.10);
      margin-bottom: 12px;
    }

    .footer{
      padding:16px 22px 22px;
      border-top:1px solid var(--stroke);
      display:grid;
      grid-template-columns: 1fr auto;
      align-items:center;
      width:100%;
      color:var(--muted);
      font-size:12px;
    }
    .pill{
      border:1px solid rgba(255,255,255,.14);
      background:rgba(0,0,0,.22);
      padding:6px 10px;
      border-radius:999px;
      width: max-content;
    }
    .designer{
      justify-self: end;
      text-align: right;
      font-family: Orbitron, monospace;
      font-size: 12px;
      letter-spacing: 0.08em;
      color: rgba(233,233,255,.65);
      text-transform: uppercase;
      cursor: default;
    }
    .designer span{
      background: linear-gradient(90deg, #7c3aed, #22d3ee, #fb7185);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      font-weight: 700;
      text-shadow: 0 0 6px rgba(34,211,238,.18), 0 0 12px rgba(124,58,237,.12);
      transition: text-shadow .35s ease, letter-spacing .35s ease;
    }
    .designer:hover span{
      letter-spacing: 0.12em;
      text-shadow:
        0 0 10px rgba(34,211,238,.45),
        0 0 18px rgba(124,58,237,.35),
        0 0 28px rgba(251,113,133,.25);
    }

    @media (max-width: 640px){
      .footer{
        grid-template-columns: 1fr;
        gap: 10px;
        text-align: center;
      }
      .designer{
        justify-self: center;
        text-align: center;
      }
      .pill{ margin: 0 auto; }
    }

    /* Hide native audio (keep custom UI) */
    audio{ display:none; }

    /* === VIBE PANEL (Opcija 1 + 2) === */
    .vibe{
      margin-top: 16px;
      padding: 14px 14px 12px;
      border: 1px solid rgba(255,255,255,.10);
      background: rgba(0,0,0,.18);
      border-radius: 16px;
      display: grid;
      gap: 10px;
    }

    .vibeTop{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
    }

    .vibeTitle{
      font-family: Orbitron, monospace;
      font-size: 12px;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: rgba(233,233,255,.82);
    }

    .vibeClock{
      font-family: Orbitron, monospace;
      font-size: 12px;
      letter-spacing: .06em;
      color: rgba(233,233,255,.70);
      padding: 6px 10px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.10);
      background: rgba(0,0,0,.20);
    }

    .vibeText{
      color: rgba(233,233,255,.74);
      font-size: 12.5px;
      line-height: 1.45;
    }

    .vibeTags{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
    }

    .tag{
      font-size: 12px;
      color: rgba(233,233,255,.72);
      padding: 6px 10px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.06);
    }

    /* === MINI EQUALIZER (Opcija 2) === */
    .eq{
      display:flex;
      align-items:flex-end;
      gap:6px;
      height: 26px;
      margin-top: 2px;
    }

    .eq span{
      width: 6px;
      height: 6px;
      border-radius: 999px;
      background: linear-gradient(180deg, rgba(34,211,238,.95), rgba(251,113,133,.75));
      box-shadow: 0 0 14px rgba(34,211,238,.18);
      opacity:.95;
      transform-origin: bottom;
      animation: eqBounce 1.05s ease-in-out infinite;
    }

    .eq span:nth-child(1){ animation-duration: .95s; }
    .eq span:nth-child(2){ animation-duration: 1.20s; }
    .eq span:nth-child(3){ animation-duration: .85s; }
    .eq span:nth-child(4){ animation-duration: 1.10s; }
    .eq span:nth-child(5){ animation-duration: .90s; }
    .eq span:nth-child(6){ animation-duration: 1.25s; }
    .eq span:nth-child(7){ animation-duration: .88s; }

    @keyframes eqBounce{
      0%,100% { height: 6px; opacity:.65; }
      50%     { height: 24px; opacity:1; }
    }

    .eq.paused span{
      animation-play-state: paused;
      height: 8px;
      opacity:.45;
    }

    .vibeDivider{
      height:1px;
      background: rgba(255,255,255,.08);
    }