:root{
      --bg:#0b0b0b;
      --card:#111; 
      --muted:#9b9b9b;
      --accent:#ffffff;
      --glass: rgba(255,255,255,0.04);
    }
    html,body{
      height:100%;}
    body{
      margin:0; 
      font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
      background: 
      radial-gradient(ellipse at center, rgba(255,255,255,0.02), transparent 25%), 
      linear-gradient(180deg,#000 0%, #050505 60%);
      color:var(--accent); 
      display:flex; 
      align-items:center; 
      justify-content:center; 
      padding:28px; 
      box-sizing:border-box;
      -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
    }

    .player-wrap{
      width:360px; 
      max-width:96vw; 
      background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); 
      border-radius:28px; 
      padding:18px; 
      box-shadow: 0 18px 40px rgba(0,0,0,0.7); 
      backdrop-filter: blur(8px);}

    .art{
      width:100%; aspect-ratio:1/1; 
      border-radius:14px; 
      overflow:hidden; 
      background:linear-gradient(180deg,#222,#111);
      display:flex; 
      align-items:center; 
      justify-content:center; 
      margin-bottom:14px;
      position:relative;
    }
    .art img{
      width:100%; 
      height:100%; object-fit:cover; 
      display:block; 
      filter:contrast(1.05) saturate(0.9);}
      
    .meta{
      padding:6px 2px;}
      
    .source{
      color:var(--muted); 
      font-size:12px; 
      margin-bottom:6px}
      
    .title{
      font-weight:700; 
      font-size:20px; 
      margin:0}
      
    .artist{
      color:var(--muted); 
      margin-top:6px; 
      font-size:15px}

    .progress-row{
      display:flex; 
      align-items:center; 
      gap:12px; 
      margin-top:12px}
      
    .time{
      font-size:12px; 
      width:36px;
      color:var(--muted);
      text-align:left}
      
    .time.right{
      text-align:right}
      
    .progress{
      flex:1;
      height:6px; 
      background: rgba(255,255,255,0.08); 
      border-radius:99px;
      position:relative; 
      cursor:pointer}
    .progress > .bar{
      height:100%; 
      width:0%;
      background:linear-gradient(90deg,#fff,#aaa); 
      border-radius:99px}
      
    .progress .thumb{
      position:absolute; 
      top:50%; 
      transform:translate(-50%,-50%); 
      width:14px; 
      height:14px; 
      border-radius:50%;
      background:#fff;
      box-shadow:0 4px 8px rgba(0,0,0,0.6); left:0;
      display:none}

    .controls{
      display:flex; 
      gap:22px;
      align-items:center;
      justify-content:center;
      margin-top:14px}
      
    .btn{
      width:44px; 
      height:44px;
      display:flex; 
      align-items:center;
      justify-content:center; 
      border-radius:12px; 
      background:var(--glass); 
      cursor:pointer}
      
    .btn.play{
    width:56px; 
    height:56px; 
    border-radius:12px}
    
    svg{
      width:20px;
      height:20px;
      fill:var(--accent)}

    .bottom{
      display:flex; 
      align-items:center; 
      gap:12px; 
      margin-top:14px}
      
    .volume{
      flex:1; 
      display:flex; 
      gap:10px; 
      align-items:center}
      
    .vol-slider{
      flex:1;
      height:6px; 
      background:rgba(255,255,255,0.08); 
      border-radius:99px; 
      position:relative}
      
    .vol-slider > .vol-bar{
      height:100%;
      width:60%; 
      background:linear-gradient(90deg,#fff,#ccc); 
      border-radius:99px}

    .small{
      font-size:13px; 
      color:var(--muted)}

    .controls .btn:active{
      transform:translateY(1px)}

    .file-row{
      display:flex; 
      gap:8px;
      align-items:center; 
      margin-top:12px}
      
    .file-row input[type=file]{
      display:none}
      
    .file-label{
      padding:8px 12px; 
      background:rgba(255,255,255,0.03);
      border-radius:10px;
      cursor:pointer; 
      font-size:13px}
   .create{
      color: #fff;
      text-align: center;
      background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
    }
    
    .create a {
      text-decoration: none;
      color: #fff;
        
    /* responsive */
    @media (max-width:420px){
      .player-wrap{padding:14px}
      .title{font-size:18px}
      .create{text-align: center}
    }