body {
    height: 100%;
    font-family: menlo, fixedsys, courier, system-ui, -apple-system, Segoe UI, arial; /*silom*/
    line-height: 0.7;
    margin: 0;
    background: #000;
    color: #00ffff;
  }

input, button {font-family: menlo, fixedsys, courier, system-ui, -apple-system, Segoe UI, arial; /*silom*/ margin: 8px; padding: 8px 10px; border: none; border-radius: 6px; font-size: 14px; }
  button { background: #000; color: #009999; cursor: pointer; transition: 0.2s; opacity:95%}
  button:hover { color: #00ffff; }

  canvas {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 0;
  }


  .player {
    max-width: 980px;
    z-index: 2;
    background: #333;
    opacity: 95%;
    border: 1px solid #009999;
    margin: 50px auto;
    border-radius: 4px;
    padding: 9px;
    box-shadow: 0 0 30px 7px #00ffff;
    position: relative;
  }

  h1{margin:0 0 12px;font-size:16px}
  .controls{display:flex;gap:0px;align-items:center;margin-bottom:12px}
  button.primary{background:#000;color:#00ffff;border:1px solid rgba(0,0,0,0.15)}
  .progress{flex:1;height:10px;background:#000;border-radius:6px;position:relative;cursor:pointer;display:flex;align-items:center;margin-left:12px}
  .filled{height:100%;background:#00ffff;border-radius:6px;width:0;}
 
  .time{width:92px;text-align:right;font-size:13px;color:#00ffff;margin-left:8px;white-space:nowrap;margin-right:22px}
  .playlist{margin-top:8px}

  .row{display:flex;align-items:center;gap:12px;padding-left:6px;border-radius:5px;border:1px solid transparent;background:#333;min-height: 30px; overflow:hidden; text-overflow: ellipsis; white-space: nowrap;justify-content:space-between}
  .row:hover{background:#000}
  .row.playing{background:#000;border-color:#333}
  .title{font-size:16px;font-weight:bold;padding-right:10px;flex:1;display:flex;flex-direction:row;align-items:center; text-overflow: ellipsis; white-space: nowrap;}
  .meta{font-size:10px;color:#009999;align-items:center}
  .star{font-size:17px;user-select:none;padding-left:7px;cursor:pointer}
  .buy{padding:3px 3px;background:none;border:none;font-weight:bold; cursor:pointer;}
  .badge{font-size:11px;padding:2px 6px;border-radius:6px;background:none;color:#009999;border:1px transparent}
  .arrow{cursor:pointer;user-select:none;font-size:18px;margin-left:8px}
  .extra{font-size:11px;color:#009999;margin-top:2px;display:none}

  select{background:none;color:#00ffff;font-size:13px;text-align:right}
  select,input[type=range],input[type=text]{padding:0px;border-radius:0;border:0 solid transparent}
  .sort{background:none;color:#009999}
  .small{font-size:11px;color:#009999;text-align:left;white-space:nowrap;}
  .small2{font-size:11px;color:#00ffff;text-align:left;white-space:nowrap;}
  .fav-filter:before{content: '☆';font-size:17px}
  .favesonly{font-size:11px;color:#009999;text-align:left;white-space:nowrap;}
  input[type="checkbox"]:checked ~ .fav-filter:before{content: '';font-size:17px}
  input[type="checkbox"]:checked ~ .fav-filter:after{content: '★';font-size:17px;color:#00ffff}
  

  #cartBtn{height:50px;width:50px;background-color:#009999;position:relative;margin-right:4px;display:flex;align-items:center;justify-content:center;}
  .cart-count{color:#000;font-size:16px;font-weight:bold}
  .controls-row{align-items:center;margin-bottom:8px}
/*  input[type="checkbox"]:checked ~ .starbutton:after{content: '★';font-size:16px;margin-right:-14px}
  input[type="checkbox"]:before ~ .starbutton:before{content: '☆';font-size:16px} */
  input[type="checkbox"]{opacity:0;margin-right:-20px}
  .hidden{background:none;color:#009999}
  .filters-row{width:100%;max-height:18px;position:relative;display:flex;margin-bottom:0px;align-items:center;white-space: nowrap}
  #prevBtn, #nextBtn{width:30px;height:30px;border-radius:50%;font-size:12px;} 
  #prevBtn:active, #nextBtn:active{box-shadow:0px 0px 7px 4px #009999}
  #playBtn{width:60px;height:60px;border-radius:50%;font-size:24px;}
  #onlyFavs{margin-left:11px}
  
  #sortSelect{margin-left:20px;background-color:transparent;color:#00ffff;font-family: menlo, fixedsys, courier, system-ui, -apple-system, Segoe UI, arial; /*silom*/}
  #filter1Type{background-color:transparent;color:#00ffff;font-family: menlo, fixedsys, courier, system-ui, -apple-system, Segoe UI, arial; /*silom*/}
  #filter2Type{background-color:transparent;color:#00ffff;font-family: menlo, fixedsys, courier, system-ui, -apple-system, Segoe UI, arial; /*silom*/}
    .filters{float:right;display:flex}
  .filter-block{}
  #clearFilters{position:absolute;right:-6px}
  
  
  
  #cartOverlay {
    max-width: 980px;
    z-index: 2;
    background: #333;
    opacity: 95%;
    border: 1px solid #009999;
    margin: 50px auto;
    border-radius: 4px;
    padding: 9px;
    box-shadow: 0 0 30px 7px #00ffff;
    position: relative;
  }

#cartContent {
  background: #333; padding: 20px; border-radius:8px;
  width: 100%; overflow-y: auto;
  box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

.cartItem {display:flex;align-items:center;gap:12px;padding-left:6px;border-radius:5px;border:1px solid transparent;background:#333;min-height: 30px; overflow:hidden; text-overflow: ellipsis; white-space: nowrap;justify-content:space-between}

.cartItem select { margin-left:10px; }
.cartItem button { margin-left:10px; cursor:pointer; }
  
  
  
  
  
  #fileInput, #songUrl, #loadSong {
  position: absolute;
  top: 0px;  /* adjust */
  left: 0px; /* adjust */
  z-index: 10;
}