*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;color:#303746;background:#d5d9dc}button,input{font:inherit}.app{min-height:100vh;display:flex;flex-direction:column;background:radial-gradient(circle at 0 0,transparent 18px,#63708318 19px,transparent 20px),radial-gradient(circle at 30px 0,transparent 18px,#63708318 19px,transparent 20px),linear-gradient(135deg,#e8e1d5,#ccd5de);background-size:60px 30px,60px 30px,100%}.shell{width:min(1180px,calc(100% - 28px));margin:auto;flex:1}.nav{height:74px;display:flex;align-items:center;justify-content:space-between}.brand{border:0;background:none;font-size:20px;font-weight:900;color:#293044;cursor:pointer}.brand b{display:inline-grid;place-items:center;width:42px;height:42px;border-radius:13px;background:#b6474c;color:#fff;margin-right:9px}.navBadge{padding:8px 13px;border-radius:999px;background:#f1dddd;border:1px solid #d5a3a5;color:#92383e;font-size:12px;font-weight:900;letter-spacing:1px}.layout{display:grid;grid-template-columns:310px minmax(0,1fr);gap:18px;padding:15px 0 34px}.sidebar,.mainCard,.playerDock{background:linear-gradient(145deg,#f5f1e9,#e1e5e9);border:1px solid #9fa9b5;box-shadow:0 14px 35px #4b556326;border-radius:22px}.sidebar{padding:19px;align-self:start;position:sticky;top:12px}.sideTitle{display:flex;justify-content:space-between;align-items:center}.sideTitle h2{margin:0}.count{padding:5px 9px;border-radius:999px;background:#d6dce5;color:#596273;font-size:12px;font-weight:800}.search{width:100%;margin:16px 0;padding:12px 14px;border:1px solid #a8b0bb;border-radius:13px;background:#faf8f3;outline:none}.playlistList{display:grid;gap:9px}.playlistBtn{width:100%;border:1px solid transparent;border-radius:15px;padding:11px;background:transparent;color:#303746;display:flex;gap:11px;align-items:center;text-align:left;cursor:pointer}.playlistBtn:hover{background:#ffffff66}.playlistBtn.active{background:#efdad8;border-color:#c98688}.cover{width:43px;height:43px;flex:0 0 43px;display:grid;place-items:center;border-radius:12px;background:#293044;color:#fff;font-size:20px;font-weight:900}.playlistBtn.active .cover{background:#b6474c}.playlistCopy{min-width:0;flex:1}.playlistCopy b,.playlistCopy small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.playlistCopy small{color:#687386;margin-top:3px}.mainCard{overflow:hidden}.hero{padding:28px;display:flex;gap:20px;align-items:center;background:linear-gradient(130deg,#e7d9d3,#d8e0e7)}.heroArt{width:118px;height:118px;flex:0 0 118px;display:grid;place-items:center;border-radius:25px;background:linear-gradient(145deg,#b6474c,#7e3036);color:#fff;font-size:54px;font-weight:900;box-shadow:0 17px 30px #8c3b4133}.eyebrow{font-size:11px;letter-spacing:2px;font-weight:900;color:#92383e}.hero h1{margin:7px 0;font-size:clamp(26px,4vw,40px)}.hero p{margin:0;color:#687386}.trackHeader,.track{display:grid;grid-template-columns:50px minmax(0,1fr) 80px 46px;gap:10px;align-items:center;padding:12px 20px}.trackHeader{font-size:11px;letter-spacing:1px;color:#687386;border-bottom:1px solid #a8b0bb}.track{border-bottom:1px solid #a8b0bb66;cursor:pointer;transition:.18s}.track:hover{background:#ffffff55}.track.active{background:#efdad8}.trackPlay{width:36px;height:36px;border:0;border-radius:50%;background:#d5dce5;color:#293044;cursor:pointer;font-weight:900}.track.active .trackPlay{background:#b6474c;color:#fff}.trackCopy{min-width:0}.trackCopy b,.trackCopy small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.trackCopy small{color:#687386;margin-top:3px}.duration{text-align:right;color:#687386;font-variant-numeric:tabular-nums}.more{border:0;background:none;font-size:21px;color:#687386;cursor:pointer}.playerDock{margin-top:18px;padding:18px;position:sticky;bottom:10px;z-index:5}.nowRow{display:grid;grid-template-columns:minmax(170px,1fr) auto minmax(170px,1fr);align-items:center;gap:15px}.now{display:flex;align-items:center;gap:12px;min-width:0}.nowIcon{width:45px;height:45px;flex:0 0 45px;display:grid;place-items:center;border-radius:13px;background:#b6474c;color:white;font-weight:900}.nowCopy{min-width:0}.nowCopy b,.nowCopy small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.nowCopy small{color:#687386}.controls{display:flex;align-items:center;gap:7px}.ctrl{width:38px;height:38px;border:0;border-radius:50%;background:transparent;color:#303746;cursor:pointer;font-size:17px}.ctrl:hover,.ctrl.active{background:#d8dce2}.playMain{width:52px;height:52px;background:#293044;color:#fff;font-size:20px}.playMain:hover{background:#b6474c}.volume{display:flex;align-items:center;justify-content:flex-end;gap:8px}.volume input{width:105px}.seekRow{display:grid;grid-template-columns:48px 1fr 48px;gap:10px;align-items:center;margin-top:13px;font:700 12px "Courier New",monospace;color:#596273}.seek,.volume input{accent-color:#b6474c;cursor:pointer}.footer{text-align:center;padding:20px;color:#687386}.empty{padding:50px;text-align:center;color:#687386}.loading{text-align:center;padding:80px}.toast{position:fixed;right:18px;bottom:115px;padding:12px 15px;border-radius:12px;background:#293044;color:white;box-shadow:0 10px 25px #11182744;opacity:0;transform:translateY(10px);transition:.25s;pointer-events:none}.toast.show{opacity:1;transform:none}@media(max-width:850px){.layout{grid-template-columns:1fr}.sidebar{position:static}.playlistList{grid-template-columns:repeat(2,minmax(0,1fr))}.nowRow{grid-template-columns:1fr}.controls{justify-content:center;order:2}.volume{justify-content:center;order:3}.playerDock{bottom:5px}}@media(max-width:560px){.shell{width:min(100% - 18px,1180px)}.playlistList{grid-template-columns:1fr}.hero{align-items:flex-start}.heroArt{width:82px;height:82px;flex-basis:82px;font-size:38px}.trackHeader,.track{grid-template-columns:42px minmax(0,1fr) 55px}.trackHeader>:last-child,.track .more{display:none}.playerDock{padding:14px}.ctrl{width:34px;height:34px}.playMain{width:48px;height:48px}.volume input{width:145px}}

/* V1.1 - Optically centered play/pause button */
.playMain{display:grid;place-items:center;padding:0;line-height:0}
.playMain .playIcon{display:block;width:0;height:0;border-top:8px solid transparent;border-bottom:8px solid transparent;border-left:13px solid currentColor;transform:translateX(2px)}
.playMain .pauseIcon{display:flex;align-items:center;justify-content:center;gap:4px;transform:none}
.playMain .pauseIcon i{display:block;width:4px;height:16px;border-radius:2px;background:currentColor}
.trackPlay{display:grid;place-items:center;padding:0;line-height:0}
.trackPlay .playIconSmall{display:block;width:0;height:0;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:8px solid currentColor;transform:translateX(1px)}
.trackPlay .pauseIconSmall{display:flex;gap:3px;align-items:center;justify-content:center}
.trackPlay .pauseIconSmall i{display:block;width:3px;height:11px;border-radius:2px;background:currentColor}


/* NIHONGO AUDIO MOBILE FIXED PLAYER V1
   Player selalu terlihat. Playlist dan track memiliki area scroll mandiri. */

:root{
  --audio-player-width: 850px;
  --audio-player-bottom: 10px;
  --audio-player-safe-space: 178px;
}

/* Beri ruang agar konten terakhir tidak tertutup player fixed. */
.shell{
  padding-bottom: var(--audio-player-safe-space);
}

/* Player tetap berada di bawah viewport, bukan di bawah seluruh konten. */
.playerDock{
  position: fixed !important;
  left: 50%;
  right: auto;
  bottom: calc(var(--audio-player-bottom) + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  width: min(var(--audio-player-width), calc(100% - 28px));
  margin: 0 !important;
  z-index: 1000;
  box-shadow: 0 20px 46px rgba(41,48,68,.28), 0 4px 14px rgba(41,48,68,.18);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* Playlist panjang dibatasi dan bisa di-scroll sendiri. */
.playlistList{
  max-height: min(52vh, 430px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  padding-right: 5px;
}

/* Daftar audio juga dibatasi agar hero dan player tetap mudah dijangkau. */
#tracks{
  max-height: min(54vh, 520px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

/* Header kolom tetap terlihat saat daftar audio di-scroll. */
.trackHeader{
  position: sticky;
  top: 0;
  z-index: 4;
  background: #e6e5e3;
  box-shadow: 0 1px 0 rgba(159,169,181,.75);
}

/* Scrollbar tipis dan tetap sesuai tema. */
.playlistList,
#tracks{
  scrollbar-width: thin;
  scrollbar-color: #b6474c transparent;
}

.playlistList::-webkit-scrollbar,
#tracks::-webkit-scrollbar{
  width: 7px;
}

.playlistList::-webkit-scrollbar-track,
#tracks::-webkit-scrollbar-track{
  background: transparent;
}

.playlistList::-webkit-scrollbar-thumb,
#tracks::-webkit-scrollbar-thumb{
  background: #b6474c;
  border-radius: 999px;
}

.playlistList::-webkit-scrollbar-thumb:hover,
#tracks::-webkit-scrollbar-thumb:hover{
  background: #92383e;
}

@media (max-width: 850px){
  :root{
    --audio-player-bottom: 6px;
    --audio-player-safe-space: 255px;
  }

  .shell{
    width: min(100% - 18px, 1180px);
  }

  /* Playlist tetap satu kolom agar setiap judul mudah dibaca. */
  .playlistList{
    grid-template-columns: 1fr !important;
    max-height: 230px;
  }

  #tracks{
    max-height: 390px;
  }

  .sidebar{
    position: static !important;
  }

  .playerDock{
    width: calc(100% - 14px);
    padding: 13px 14px;
    border-radius: 18px;
  }

  .nowRow{
    grid-template-columns: 1fr !important;
    gap: 9px;
  }

  .now{
    justify-content: center;
  }

  .controls{
    justify-content: center;
    order: 2;
    gap: 6px;
  }

  .volume{
    justify-content: center;
    order: 3;
  }

  .seekRow{
    margin-top: 9px;
  }
}

@media (max-width: 560px){
  :root{
    --audio-player-safe-space: 246px;
  }

  .layout{
    gap: 12px;
  }

  .sidebar{
    padding: 15px;
  }

  .playlistList{
    max-height: 205px;
  }

  #tracks{
    max-height: 340px;
  }

  .playerDock{
    bottom: calc(4px + env(safe-area-inset-bottom, 0px));
    width: calc(100% - 8px);
    padding: 11px 12px;
  }

  .nowIcon{
    width: 39px;
    height: 39px;
    flex-basis: 39px;
  }

  .nowCopy{
    max-width: calc(100vw - 100px);
  }

  .ctrl{
    width: 33px;
    height: 33px;
  }

  .playMain{
    width: 47px;
    height: 47px;
  }

  .volume input{
    width: min(145px, 43vw);
  }

  .footer{
    padding-bottom: calc(var(--audio-player-safe-space) + 18px);
  }
}