:root {
  --bg: #07080b;
  --card: #14161b;
  --text: #e9edf5;
  --muted: #9ba3b3;
  --faint: #636b7a;
  --line: rgba(255, 255, 255, .08);
  --accent: #2e8bff;
  --accent-2: #00d4ff;
  --accent-bg: rgba(46, 139, 255, .14);
  --ok: #3ddc97;
  --ok-bg: rgba(61, 220, 151, .12);
  --warn: #ffb547;
  --warn-bg: rgba(255, 181, 71, .12);
  --bad: #ff5d6c;
  --bad-bg: rgba(255, 93, 108, .12);
  --radius: 14px;
  --grad-blue: linear-gradient(135deg, #2e8bff 0%, #00c8ff 100%);
  --glass-fill: linear-gradient(150deg, rgba(255, 255, 255, .075) 0%, rgba(255, 255, 255, .025) 55%, rgba(46, 139, 255, .04) 100%);
  --stripe-top: linear-gradient(90deg, transparent 0%, rgba(46, 139, 255, .75) 30%, rgba(0, 212, 255, .75) 60%, transparent 100%);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font: 15px/1.5 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
a { color: var(--accent); }
.wrap { max-width: 980px; margin: 0 auto; padding: 20px 16px 60px; }
header.top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.brand { font-weight: 650; font-size: 18px; letter-spacing: -0.01em; }
.brand small { display: block; font-weight: 400; font-size: 13px; color: var(--muted); }
h1 { font-size: 24px; margin: 0 0 4px; letter-spacing: -0.01em; }
.sub { color: var(--muted); font-size: 14px; margin: 0 0 18px; }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 16px; }
.stat { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; }
.stat .k { font-size: 12.5px; color: var(--muted); }
.stat .v { font-size: 21px; font-weight: 650; margin-top: 2px; font-variant-numeric: tabular-nums; }
.stat.ok .v { color: var(--ok); }
.stat.warn .v { color: var(--warn); }

.bar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.bar .grow { flex: 1 1 200px; }
input[type=search], input[type=text], input[type=email], input[type=password], select {
  font: inherit; color: var(--text); background: var(--card);
  border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; min-height: 38px; width: 100%;
}
input:focus, select:focus, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
button, .btn {
  font: inherit; font-size: 14px; color: var(--text); background: var(--card);
  border: 1px solid var(--line); border-radius: 8px; padding: 7px 12px; min-height: 36px;
  cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
}
button:hover, .btn:hover { border-color: var(--faint); }
button.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
button.ghost { background: transparent; border-color: transparent; color: var(--muted); }
button:disabled { opacity: .5; cursor: default; }

.chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.chip { border-radius: 999px; padding: 6px 12px; font-size: 14px; }
.chip[aria-pressed=true] { background: var(--text); color: var(--bg); border-color: var(--text); }
.chip .n { color: var(--faint); font-size: 12.5px; margin-left: 2px; }
.chip[aria-pressed=true] .n { color: inherit; opacity: .7; }
.chip.alert { border-color: var(--warn); color: var(--warn); }

.table { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.row { display: grid; align-items: center; gap: 10px; padding: 9px 14px; border-top: 1px solid var(--line); }
.row:first-child { border-top: 0; }
.row.head { font-size: 12.5px; color: var(--muted); font-weight: 600; background: color-mix(in srgb, var(--bg) 60%, var(--card)); }
.row .no { color: var(--faint); font-variant-numeric: tabular-nums; font-size: 13px; }
.row .date { color: var(--muted); font-size: 13px; }
.row .title { min-width: 0; overflow-wrap: anywhere; }
.row .price { font-variant-numeric: tabular-nums; }
.row.paid .dim { opacity: .38; }
.row.foot { font-weight: 650; background: color-mix(in srgb, var(--bg) 60%, var(--card)); }
.badge { display: inline-block; font-size: 11.5px; border-radius: 6px; padding: 1px 7px; margin-left: 6px; vertical-align: 1px; }
.badge.ok { background: var(--ok-bg); color: var(--ok); }
.badge.warn { background: var(--warn-bg); color: var(--warn); }
.badge.bad { background: var(--bad-bg); color: var(--bad); }
.badge.muted { background: var(--line); color: var(--muted); }
.paidbtn { width: 100%; justify-content: center; }
.paidbtn.on { background: var(--ok-bg); color: var(--ok); border-color: var(--ok); }
.empty { padding: 28px 14px; text-align: center; color: var(--muted); }
.who { font-size: 12.5px; color: var(--muted); }

.cols-admin { grid-template-columns: 30px 78px minmax(0, 1fr) 146px 100px; }
.cols-view { grid-template-columns: 30px 78px minmax(0, 1fr) 104px 86px; }
.cols-all { grid-template-columns: 92px 78px minmax(0, 1fr); }
.cols-all.prices { grid-template-columns: 92px 78px minmax(0, 1fr) 96px 86px; }

@media (max-width: 640px) {
  .row.head { display: none; }
  .row { grid-template-columns: 1fr auto !important; grid-template-areas: 'title title' 'meta price' 'meta act'; row-gap: 4px; }
  .row .no { display: none; }
  .row .title { grid-area: title; font-weight: 550; }
  .row .date, .row .who { grid-area: meta; }
  .row .price { grid-area: price; justify-self: end; }
  .row .act { grid-area: act; justify-self: end; }
  .row .ops { grid-column: 1 / -1; justify-self: end; }
  .row.foot .ops { display: none; }
  .row.foot { grid-template-areas: 'title price'; }
  .row.foot .title { text-align: left !important; }
  .cols-all .who + .date { grid-area: auto; }
}

.panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; margin-bottom: 14px; }
.panel h2 { font-size: 16px; margin: 0 0 10px; }
.field { display: grid; gap: 4px; margin-bottom: 10px; }
.field label { font-size: 13px; color: var(--muted); }
.login { max-width: 380px; margin: 8vh auto 0; }
.err { color: var(--bad); font-size: 13.5px; min-height: 1.2em; }
.note { color: var(--muted); font-size: 13px; }
.linkbox { display: flex; gap: 6px; }
.linkbox input { font-size: 13px; }
footer { margin-top: 26px; color: var(--faint); font-size: 12.5px; text-align: center; }
.hidden { display: none !important; }

#toast {
  position: fixed; left: 50%; bottom: 18px; transform: translate(-50%, 20px);
  background: var(--text); color: var(--bg); padding: 9px 16px; border-radius: 999px;
  font-size: 14px; opacity: 0; pointer-events: none; transition: .2s;
}
#toast.show { opacity: 1; transform: translate(-50%, 0); }
#toast.bad { background: var(--bad); color: #fff; }

.ops { display: flex; gap: 4px; justify-content: flex-end; }
button.mini { min-height: 30px; padding: 3px 9px; font-size: 13px; }
button.mini.danger { color: var(--bad); }
button.mini.danger:hover { border-color: var(--bad); }
dialog { border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--text); padding: 18px; width: min(520px, calc(100vw - 32px)); }
dialog::backdrop { background: rgba(0,0,0,.45); }
.delrow { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); }
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 16px; }
.tab { border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; padding: 10px 14px; font-weight: 600; color: var(--muted); }
.tab[aria-selected=true] { color: var(--text); border-bottom-color: var(--text); }
.group-h { padding: 10px 14px 6px; font-weight: 650; font-size: 14px; background: color-mix(in srgb, var(--bg) 60%, var(--card)); border-top: 1px solid var(--line); display: flex; justify-content: space-between; }
.group-h:first-child { border-top: 0; }
.row.me { background: color-mix(in srgb, var(--accent-bg) 45%, transparent); }
.cols-list { grid-template-columns: 30px 92px minmax(0, 1fr); }

/* Segmen error: bagian yang gagal disembunyikan, diganti pesan */
.seg-failed { display: none !important; }
.seg-err { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  background: var(--warn-bg); color: var(--warn); border: 1px solid var(--warn); border-radius: var(--radius);
  padding: 10px 14px; margin: 0 0 14px; font-size: 14px; }
.seg-err button { min-height: 32px; }

/* ---------- Admin: kerangka dengan sidebar kaca ---------- */
:root {
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --glass: rgba(18, 20, 26, .55);
  --glass-strong: rgba(28, 31, 39, .62);
  --glass-line: rgba(255, 255, 255, .09);
  --glass-shadow: 0 18px 50px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .06) inset;
}
.glass, .side {
  background: var(--glass);
  -webkit-backdrop-filter: blur(22px) saturate(170%);
  backdrop-filter: blur(22px) saturate(170%);
  border: 1px solid var(--glass-line);
  box-shadow: var(--glass-shadow);
}

.wrap.wide { max-width: 1240px; }
.shell { --side-w: 248px; display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); column-gap: 26px; align-items: start;
  transition: grid-template-columns .5s var(--ease-out), column-gap .5s var(--ease-out); }
.shell.collapsed { --side-w: 0px; column-gap: 0px; }

.side { position: sticky; top: 20px; width: 248px; display: flex; flex-direction: column; gap: 4px;
  max-height: calc(100vh - 40px); overflow: auto; border-radius: 18px; padding: 14px 10px 12px;
  transition: transform .5s var(--ease-out), opacity .35s ease, filter .5s var(--ease-out); will-change: transform; }
.shell.collapsed .side { transform: translateX(calc(-100% - 40px)); opacity: 0; filter: blur(6px); pointer-events: none; }
.side-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; padding: 2px 0 12px 10px; }
.side-brand { padding: 0; }
.icon-btn { width: 38px; height: 38px; min-height: 38px; padding: 0; justify-content: center; border-radius: 10px;
  background: transparent; border-color: transparent; color: var(--muted); transition: background .2s, color .2s, transform .25s var(--ease-out); }
.icon-btn:hover { background: var(--glass-strong); color: var(--text); border-color: var(--glass-line); }
.icon-btn:active { transform: scale(.92); }
.side-label { font-size: 11.5px; font-weight: 650; color: var(--faint); text-transform: uppercase; letter-spacing: .08em; padding: 0 10px 4px; }
.side-nav { display: flex; flex-direction: column; gap: 2px; }
.nav-item { display: flex; flex-direction: column; align-items: flex-start; gap: 0; width: 100%; text-align: left;
  border: 1px solid transparent; background: transparent; border-radius: 11px; padding: 8px 12px; min-height: 46px; white-space: normal;
  transition: background .2s, border-color .2s, opacity .4s ease, transform .5s var(--ease-out);
  transition-delay: 0s, 0s, calc(var(--i, 0) * 35ms + 80ms), calc(var(--i, 0) * 35ms + 80ms); }
.nav-item:hover { background: var(--glass-strong); }
.nav-item[aria-current=page] { background: var(--glass-strong); border-color: var(--glass-line);
  box-shadow: inset 3px 0 0 var(--accent), 0 4px 14px rgba(20, 24, 40, .08); }
.shell.collapsed .nav-item { opacity: 0; transform: translateX(-14px); transition-delay: 0s; }
.nav-name { font-weight: 600; font-size: 15px; }
.nav-meta { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.nav-item .badge { margin-left: 4px; }
.side-sep { height: 1px; background: var(--glass-line); margin: 8px 10px; }
.side-foot { display: flex; gap: 6px; flex-wrap: wrap; padding: 12px 10px 0; margin-top: 8px; border-top: 1px solid var(--glass-line); }
.side-foot .btn { background: var(--glass-strong); border-color: var(--glass-line); }

.maintop { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; min-height: 40px; }
.maintop .grow { flex: 1; }
.menu-btn { opacity: 0; transform: translateX(-10px) scale(.9); pointer-events: none;
  transition: opacity .3s ease .15s, transform .45s var(--ease-out) .15s; }
.shell.collapsed .menu-btn { opacity: 1; transform: none; pointer-events: auto; background: var(--glass); border-color: var(--glass-line);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.hint { margin: 8px 2px 0; }
.side-backdrop { position: fixed; inset: 0; z-index: 55; background: rgba(8, 10, 18, .32); opacity: 0; visibility: hidden;
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); transition: opacity .35s ease, visibility 0s linear .35s; }

@media (max-width: 860px) {
  .shell { display: block; }
  .menu-btn, .shell.collapsed .menu-btn { opacity: 1; transform: none; pointer-events: auto; background: var(--glass); border-color: var(--glass-line);
    -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
  .side, .shell.collapsed .side { position: fixed; z-index: 60; top: 10px; left: 10px; bottom: 10px; width: min(290px, 84vw); max-height: none;
    background: var(--glass-strong); transform: translateX(calc(-100% - 24px)); opacity: 1; filter: none; pointer-events: auto; }
  .side.open, .shell.collapsed .side.open { transform: none; }
  .side .nav-item, .shell.collapsed .side .nav-item { opacity: 0; transform: translateX(-14px); transition-delay: 0s; }
  .side.open .nav-item, .shell.collapsed .side.open .nav-item { opacity: 1; transform: none;
    transition-delay: 0s, 0s, calc(var(--i, 0) * 35ms + 90ms), calc(var(--i, 0) * 35ms + 90ms); }
  .side-backdrop.show { opacity: 1; visibility: visible; transition: opacity .35s ease, visibility 0s; }
}
@media (prefers-reduced-motion: reduce) {
  .shell, .side, .nav-item, .menu-btn, .side-backdrop { transition: none !important; }
}

/* Kartu & tabel admin ikut sedikit transparan di atas latar bergradasi */
.glass-bg .stat, .glass-bg .panel, .glass-bg .table, .glass-bg .ctxmenu {
  background: var(--glass-strong);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  border-color: var(--glass-line);
}
.glass-bg .row.head, .glass-bg .row.foot { background: color-mix(in srgb, var(--card) 40%, transparent); }

/* Harga custom */
.price-input { font: inherit; width: 100%; min-height: 38px; padding: 8px 10px; border: 1px solid var(--accent);
  border-radius: 8px; background: var(--card); color: var(--text); font-variant-numeric: tabular-nums; }

/* Judul lagu admin: bisa klik kanan / tekan lama */
.cols-admin .title[data-menu] { cursor: context-menu; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }

/* Menu klik kanan */
.ctxmenu { position: fixed; z-index: 80; min-width: 200px; background: var(--card); border: 1px solid var(--line);
  border-radius: 10px; padding: 5px; box-shadow: 0 10px 30px rgba(0,0,0,.18); }
.ctxmenu .ctx-title { font-size: 12.5px; color: var(--muted); padding: 6px 10px 6px; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ctxmenu button { display: flex; width: 100%; border: 0; background: transparent; border-radius: 6px; padding: 9px 10px; min-height: 40px; }
.ctxmenu button:hover, .ctxmenu button:focus-visible { background: var(--bg); outline: none; }
.ctxmenu button.danger { color: var(--bad); }

/* ---------- Vokalis: tombol play di songlist ---------- */
.cols-list.play { grid-template-columns: 30px 92px minmax(0, 1fr) 44px; }
.playbtn { width: 36px; height: 36px; min-height: 36px; padding: 0; border-radius: 999px; justify-content: center;
  background: var(--accent-bg); color: var(--accent); border-color: transparent; font-size: 13px; text-decoration: none; }
.playbtn:hover { border-color: var(--accent); }
@media (max-width: 640px) {
  .cols-list.play { grid-template-areas: 'title play' 'meta play' !important; grid-template-columns: 1fr auto !important; }
  .cols-list.play .pl { grid-area: play; align-self: center; }
}

/* ---------- Media player ---------- */
.player { max-width: 560px; margin: 0 auto; }
.back { display: inline-flex; gap: 6px; color: var(--muted); text-decoration: none; font-size: 14px; margin-bottom: 18px; }
.cover { aspect-ratio: 1; width: min(300px, 70vw); margin: 4px auto 22px; border-radius: 18px; display: grid; place-items: center;
  background: linear-gradient(140deg, var(--accent-bg), color-mix(in srgb, var(--accent) 35%, var(--card)));
  color: var(--accent); font-size: 64px; font-weight: 700; letter-spacing: -0.03em; }
.p-title { font-size: 24px; font-weight: 700; text-align: center; margin: 0; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.p-sub { text-align: center; color: var(--muted); margin: 4px 0 22px; }
.p-bar { height: 6px; border-radius: 99px; background: var(--line); overflow: hidden; }
.p-times { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--faint); margin: 6px 0 14px; font-variant-numeric: tabular-nums; }
.p-ctrls { display: flex; justify-content: center; align-items: center; gap: 22px; }
.p-ctrls button { width: 52px; height: 52px; border-radius: 999px; justify-content: center; font-size: 18px; padding: 0; }
.p-ctrls .p-main { width: 72px; height: 72px; font-size: 26px; background: var(--accent); color: #fff; border-color: var(--accent); }
.p-soon { margin: 22px 0 0; padding: 12px 14px; border-radius: var(--radius); background: var(--card); border: 1px dashed var(--line);
  color: var(--muted); font-size: 14px; text-align: center; }
.p-queue { margin-top: 26px; }
.p-queue h2 { font-size: 15px; margin: 0 0 8px; }
.p-queue .row { display: flex !important; gap: 12px; cursor: pointer; text-decoration: none; color: inherit; }
.p-queue .row .no { display: inline !important; min-width: 22px; }
.p-queue .row.cur { background: var(--accent-bg); }
.p-queue .row.cur .title { font-weight: 650; color: var(--accent); }

/* =====================================================================
   TEMA: hitam–abu, garis biru elektrik, gradasi, panel & tombol kaca
   ===================================================================== */
html { background: #07080b; }
body {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  background:
    radial-gradient(1100px 620px at 88% -12%, rgba(46, 139, 255, .24), transparent 62%),
    radial-gradient(820px 520px at -12% 28%, rgba(0, 212, 255, .10), transparent 60%),
    radial-gradient(1000px 760px at 50% 125%, rgba(70, 80, 100, .38), transparent 62%),
    linear-gradient(162deg, #0d0f14 0%, #07080b 46%, #121419 100%);
  background-attachment: fixed;
}
/* Garis-garis diagonal biru elektrik di latar */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(118deg, transparent 0 36%, rgba(46, 139, 255, .30) 36.1%, transparent 36.5%,
      transparent 38.2%, rgba(0, 212, 255, .20) 38.3%, transparent 38.55%),
    linear-gradient(118deg, transparent 0 71%, rgba(46, 139, 255, .20) 71.1%, transparent 71.35%),
    repeating-linear-gradient(118deg, transparent 0 58px, rgba(255, 255, 255, .025) 58px 59px);
  -webkit-mask-image: radial-gradient(140% 100% at 70% 0%, #000 40%, transparent 92%);
  mask-image: radial-gradient(140% 100% at 70% 0%, #000 40%, transparent 92%);
}
/* Garis biru tipis bercahaya di paling atas layar */
body::after {
  content: ""; position: fixed; left: 0; right: 0; top: 0; height: 2px; z-index: 100; pointer-events: none;
  background: var(--stripe-top); box-shadow: 0 0 18px rgba(46, 139, 255, .7);
}
::selection { background: rgba(46, 139, 255, .45); color: #fff; }
a { color: #6fb2ff; }

h1 {
  background: linear-gradient(100deg, #ffffff 0%, #dbe7ff 45%, #7fb8ff 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.brand { letter-spacing: -0.01em; }
.brand::first-line { color: #fff; }

/* ---------- Panel kaca ---------- */
.panel, .table, .stat, .side, .ctxmenu, dialog, .p-soon, .empty-card {
  background: var(--stripe-top) top / 100% 1px no-repeat, var(--glass-fill), var(--glass);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid var(--glass-line);
  box-shadow: var(--glass-shadow);
}
.glass-bg .stat, .glass-bg .panel, .glass-bg .table, .glass-bg .ctxmenu {
  background: var(--stripe-top) top / 100% 1px no-repeat, var(--glass-fill), var(--glass);
}
.side { background: var(--stripe-top) top / 100% 1px no-repeat, linear-gradient(170deg, rgba(46, 139, 255, .08), rgba(255, 255, 255, .02) 40%, rgba(255, 255, 255, .03)), var(--glass); }
@media (max-width: 860px) {
  .side, .shell.collapsed .side { background: var(--stripe-top) top / 100% 1px no-repeat, linear-gradient(170deg, rgba(46, 139, 255, .10), rgba(255, 255, 255, .02) 40%), rgba(14, 16, 21, .78); }
}
dialog { background: var(--stripe-top) top / 100% 1px no-repeat, var(--glass-fill), rgba(16, 18, 24, .9); }
dialog::backdrop { background: rgba(3, 5, 10, .6); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.p-soon { border-style: dashed; }

/* Tabel */
.row { border-top-color: rgba(255, 255, 255, .06); transition: background .2s; }
.row.head, .glass-bg .row.head { background: linear-gradient(90deg, rgba(46, 139, 255, .10), rgba(255, 255, 255, .02) 60%); color: #a9b9d6; letter-spacing: .02em; }
.row.foot, .glass-bg .row.foot { background: linear-gradient(90deg, rgba(255, 255, 255, .02), rgba(46, 139, 255, .12)); }
.row.foot .price { color: #fff; text-shadow: 0 0 14px rgba(46, 139, 255, .6); }
.row:not(.head):not(.foot):hover { background: linear-gradient(90deg, rgba(46, 139, 255, .08), transparent 70%); }
.row.me { background: linear-gradient(90deg, rgba(46, 139, 255, .14), transparent 75%); box-shadow: inset 2px 0 0 var(--accent); }
.group-h { background: linear-gradient(90deg, rgba(46, 139, 255, .12), rgba(255, 255, 255, .02) 70%); border-top-color: rgba(255, 255, 255, .06); }

/* ---------- Tombol kaca ---------- */
button, .btn {
  color: var(--text);
  background: linear-gradient(180deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .03));
  border: 1px solid rgba(255, 255, 255, .11);
  border-radius: 10px;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .07) inset, 0 4px 14px rgba(0, 0, 0, .25);
  transition: border-color .2s, box-shadow .25s, background .25s, transform .15s;
}
button:hover:not(:disabled), .btn:hover {
  border-color: rgba(46, 139, 255, .55);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .08) inset, 0 0 0 3px rgba(46, 139, 255, .12), 0 6px 22px rgba(46, 139, 255, .18);
}
button:active:not(:disabled), .btn:active { transform: translateY(1px); }
button.primary, .p-ctrls .p-main {
  background: var(--grad-blue); border-color: rgba(120, 190, 255, .6); color: #fff;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset, 0 8px 26px rgba(46, 139, 255, .45);
}
button.primary:hover:not(:disabled) { box-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset, 0 0 0 3px rgba(46, 139, 255, .25), 0 10px 32px rgba(46, 139, 255, .6); }
button.ghost, .icon-btn { background: transparent; border-color: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
button.ghost:hover:not(:disabled) { color: var(--text); background: rgba(255, 255, 255, .05); box-shadow: none; }
.paidbtn.on { background: linear-gradient(180deg, rgba(61, 220, 151, .22), rgba(61, 220, 151, .08)); color: var(--ok); border-color: rgba(61, 220, 151, .5);
  box-shadow: 0 0 18px rgba(61, 220, 151, .18); }
.playbtn { background: linear-gradient(135deg, rgba(46, 139, 255, .35), rgba(0, 200, 255, .18)); color: #fff; border-color: rgba(46, 139, 255, .45);
  box-shadow: 0 0 16px rgba(46, 139, 255, .25); }
.playbtn:hover { box-shadow: 0 0 0 3px rgba(46, 139, 255, .2), 0 0 24px rgba(46, 139, 255, .5) !important; }

/* Chip & tab */
.chip[aria-pressed=true] { background: var(--grad-blue); color: #fff; border-color: rgba(120, 190, 255, .6); box-shadow: 0 6px 20px rgba(46, 139, 255, .35); }
.chip[aria-pressed=true] .n { color: #fff; opacity: .8; }
.tabs { border-bottom-color: rgba(255, 255, 255, .08); }
.tab, .tab:hover:not(:disabled) { background: transparent; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.tab { position: relative; }
.tab[aria-selected=true] { color: #fff; border-bottom-color: transparent; }
.tab[aria-selected=true]::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; border-radius: 2px;
  background: var(--grad-blue); box-shadow: 0 0 12px rgba(46, 139, 255, .8); }

/* Input */
input[type=search], input[type=text], input[type=email], input[type=password], select, .price-input {
  background: linear-gradient(180deg, rgba(0, 0, 0, .25), rgba(255, 255, 255, .03));
  border: 1px solid rgba(255, 255, 255, .10); border-radius: 10px; color: var(--text);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
input:focus, select:focus, .price-input:focus { outline: none; border-color: rgba(46, 139, 255, .8); box-shadow: 0 0 0 3px rgba(46, 139, 255, .2), 0 0 18px rgba(46, 139, 255, .25); }
button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
select option { background: #12141a; color: var(--text); }
select:disabled { opacity: .5; }

/* Sidebar */
.nav-item, .nav-item:hover:not(:disabled) { -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
.nav-item { background: transparent; border-color: transparent; }
.nav-item:hover:not(:disabled) { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .06); }
.nav-item[aria-current=page], .nav-item[aria-current=page]:hover:not(:disabled) {
  background: linear-gradient(90deg, rgba(46, 139, 255, .26), rgba(0, 200, 255, .06) 70%, transparent);
  border-color: rgba(46, 139, 255, .35);
  box-shadow: inset 3px 0 0 var(--accent), 0 0 22px rgba(46, 139, 255, .15);
}
.nav-item[aria-current=page] .nav-name { color: #fff; }
.side-label { color: #6f8fc0; }
.side-sep, .side-foot { border-color: rgba(255, 255, 255, .07); }
.side-sep { background: linear-gradient(90deg, transparent, rgba(46, 139, 255, .4), transparent); }
.icon-btn:hover:not(:disabled) { background: rgba(46, 139, 255, .14); border-color: rgba(46, 139, 255, .35); color: #fff; }
.shell.collapsed .menu-btn, .menu-btn { background: linear-gradient(180deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .03)); border-color: rgba(255, 255, 255, .11); }

/* Menu klik kanan */
.ctxmenu button { background: transparent; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.ctxmenu button:hover, .ctxmenu button:focus-visible { background: linear-gradient(90deg, rgba(46, 139, 255, .22), transparent); }

/* Badge */
.badge.muted { background: rgba(255, 255, 255, .08); color: var(--muted); }
.badge.ok { box-shadow: 0 0 10px rgba(61, 220, 151, .15); }

/* Toast */
#toast { background: rgba(20, 24, 32, .85); color: #fff; border: 1px solid rgba(46, 139, 255, .4);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 8px 30px rgba(0, 0, 0, .5), 0 0 20px rgba(46, 139, 255, .25); }
#toast.bad { background: rgba(80, 20, 28, .9); border-color: rgba(255, 93, 108, .6); }

/* Pesan segmen error */
.seg-err { background: linear-gradient(90deg, rgba(255, 181, 71, .16), rgba(255, 181, 71, .05)); border-color: rgba(255, 181, 71, .5);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }

/* ---------- Player ---------- */
.cover {
  position: relative; overflow: hidden; color: #fff; border: 1px solid rgba(255, 255, 255, .1);
  background:
    linear-gradient(118deg, transparent 0 30%, rgba(0, 212, 255, .35) 30.5%, transparent 33%, transparent 40%, rgba(46, 139, 255, .3) 40.5%, transparent 42%),
    repeating-linear-gradient(118deg, transparent 0 14px, rgba(255, 255, 255, .03) 14px 15px),
    radial-gradient(120% 90% at 20% 0%, rgba(46, 139, 255, .55), transparent 60%),
    linear-gradient(160deg, #1b2130 0%, #0b0d12 70%);
  box-shadow: 0 30px 60px rgba(0, 0, 0, .55), 0 0 60px rgba(46, 139, 255, .22), 0 1px 0 rgba(255, 255, 255, .1) inset;
  text-shadow: 0 0 30px rgba(46, 139, 255, .9);
}
.p-title { color: #fff; background: none; }
.p-bar { background: rgba(255, 255, 255, .08); }
#pFill { background: var(--grad-blue) !important; box-shadow: 0 0 12px rgba(46, 139, 255, .8); }
.p-ctrls .p-main:disabled { opacity: .55; }
.p-queue .row.cur { background: linear-gradient(90deg, rgba(46, 139, 255, .25), transparent 80%); box-shadow: inset 3px 0 0 var(--accent); }
.p-queue .row.cur .title { color: #fff; }

/* Login */
.login .brand { font-size: 22px; }

/* =====================================================================
   PLAYER — bar bawah (mini) + tampilan penuh
   ===================================================================== */
body.has-player .wrap { padding-bottom: 120px; }
.minibar {
  position: fixed; z-index: 70; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom));
  max-width: 980px; margin: 0 auto; display: grid; align-items: center; gap: 12px;
  grid-template-columns: 52px minmax(0, 1fr) auto auto; padding: 10px 14px 10px 10px; border-radius: 18px; cursor: pointer;
  background: var(--stripe-top) top / 100% 1px no-repeat, linear-gradient(120deg, rgba(46, 139, 255, .16), rgba(255, 255, 255, .03) 45%, rgba(0, 200, 255, .06)), rgba(14, 16, 22, .72);
  -webkit-backdrop-filter: blur(22px) saturate(170%); backdrop-filter: blur(22px) saturate(170%);
  border: 1px solid rgba(255, 255, 255, .10);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .6), 0 0 30px rgba(46, 139, 255, .14), 0 1px 0 rgba(255, 255, 255, .07) inset;
  animation: mb-in .5s var(--ease-out) both; overflow: hidden;
}
.minibar[hidden] { display: none; }
@keyframes mb-in { from { transform: translateY(130%); opacity: 0; } to { transform: none; opacity: 1; } }
.mb-prog { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255, 255, 255, .07); }
.mb-prog i { display: block; height: 100%; background: var(--grad-blue); box-shadow: 0 0 10px rgba(46, 139, 255, .9); transition: width .25s linear; }
.mb-art {
  width: 52px; height: 52px; border-radius: 12px; display: grid; place-items: center; font-weight: 800; font-size: 17px; color: #fff;
  background:
    linear-gradient(118deg, transparent 0 34%, rgba(0, 212, 255, .45) 35%, transparent 40%),
    radial-gradient(120% 90% at 20% 0%, rgba(46, 139, 255, .7), transparent 60%), linear-gradient(160deg, #1b2130, #0b0d12);
  border: 1px solid rgba(255, 255, 255, .12); text-shadow: 0 0 14px rgba(46, 139, 255, .9);
  transition: transform .3s var(--ease-out);
}
.minibar:hover .mb-art { transform: scale(1.05); }
.mb-info { min-width: 0; }
.mb-title { font-weight: 650; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mb-sub { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mb-ctrls, .fp-ctrls { display: flex; align-items: center; gap: 6px; cursor: default; }
.mb-vol { cursor: default; }

/* Tombol kontrol player */
.pc {
  width: 40px; height: 40px; min-height: 40px; padding: 0; justify-content: center; border-radius: 999px;
  background: transparent; border: 1px solid transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; color: #cfd7e6;
}
/* Hover hanya mengubah warna — ukuran tidak pernah berubah (sebelumnya tombol mengecil/membesar saat disentuh kursor) */
.pc:hover:not(:disabled) { color: #fff; background: rgba(255, 255, 255, .07); border-color: transparent; box-shadow: none; }
.pc:active:not(:disabled) { transform: scale(.94); }
.pc:disabled { opacity: .3; }
.pc.sm { width: 34px; height: 34px; min-height: 34px; }
.pc.pp {
  width: 46px; height: 46px; color: #fff; background: var(--grad-blue); border-color: rgba(140, 200, 255, .6);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset, 0 6px 20px rgba(46, 139, 255, .5);
}
.pc.pp:hover:not(:disabled) { color: #fff; background: var(--grad-blue); border-color: rgba(160, 210, 255, .8);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset, 0 0 0 4px rgba(46, 139, 255, .2), 0 8px 26px rgba(46, 139, 255, .7); }
.pc.pp.soon { filter: saturate(.55) brightness(.85); }
.pc.tog.on { color: #4fb0ff; }
.pc.tog.on::after { content: ""; position: absolute; bottom: 4px; width: 4px; height: 4px; border-radius: 9px; background: #4fb0ff; box-shadow: 0 0 8px #4fb0ff; }
.pc.tog { position: relative; }

/* Volume */
.pvol { display: flex; align-items: center; gap: 4px; }
.pvol input[type=range] {
  -webkit-appearance: none; appearance: none; width: 110px; height: 4px; border-radius: 9px; cursor: pointer; margin: 0 4px;
  background: linear-gradient(90deg, #2e8bff 0, #00c8ff var(--v, 80%), rgba(255, 255, 255, .14) var(--v, 80%));
}
.pvol input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px rgba(46, 139, 255, .9); border: 0; }
.pvol input[type=range]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px rgba(46, 139, 255, .9); border: 0; }
.pvol input[type=range]:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

/* Tampilan penuh */
html.player-open, html.player-open body { overflow: hidden; }
.fullplayer {
  position: fixed; inset: 0; z-index: 90; overflow-y: auto; overscroll-behavior: contain;
  background:
    linear-gradient(118deg, transparent 0 30%, rgba(46, 139, 255, .16) 30.2%, transparent 30.8%, transparent 33%, rgba(0, 212, 255, .10) 33.2%, transparent 33.6%),
    radial-gradient(900px 600px at 50% -10%, rgba(46, 139, 255, .35), transparent 60%),
    linear-gradient(180deg, rgba(14, 18, 28, .97), rgba(6, 7, 10, .99));
  -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
  transform: translateY(100%); visibility: hidden;
  transition: transform .55s var(--ease-out), visibility 0s linear .55s;
}
.fullplayer.open { transform: none; visibility: visible; transition: transform .55s var(--ease-out), visibility 0s; }
.fp-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: calc(12px + env(safe-area-inset-top)) 16px 10px; max-width: 560px; margin: 0 auto; }
.fp-from { text-align: center; font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.fp-from b { display: block; text-transform: none; letter-spacing: 0; font-size: 13.5px; color: #fff; font-weight: 600; margin-top: 1px; }
.fp-body { max-width: 560px; margin: 0 auto; padding: 4px 16px calc(40px + env(safe-area-inset-bottom)); }
.fp-cover { width: min(340px, 78vw); margin: 10px auto 26px; transform: scale(.92); opacity: 0; transition: transform .6s var(--ease-out) .12s, opacity .4s ease .12s; }
.fullplayer.open .fp-cover { transform: none; opacity: 1; }
.fp-meta .p-title { text-align: left; font-size: 24px; }
.fp-meta .p-sub { text-align: left; margin: 2px 0 16px; }
.fp-prog .p-fill { height: 100%; background: var(--grad-blue); box-shadow: 0 0 12px rgba(46, 139, 255, .8); }
.fp-ctrls { justify-content: space-between; margin: 4px 0 14px; }
.fp-ctrls .pc { width: 48px; height: 48px; }
.fp-ctrls .pc svg { width: 24px; height: 24px; }
.fp-ctrls .pc.tog svg { width: 20px; height: 20px; }
.fp-ctrls .pc.pp { width: 72px; height: 72px; }
.fp-ctrls .pc.pp svg { width: 30px; height: 30px; }
.fp-vol .pvol { justify-content: center; }
.fp-vol .pvol input[type=range] { width: min(260px, 60vw); }
.fullplayer .p-soon { margin-top: 18px; }
.qrow { width: 100%; text-align: left; border: 0; border-radius: 0; min-height: 0; background: transparent; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none; white-space: normal; }
.qrow:hover:not(:disabled) { box-shadow: none; border: 0; }

/* Songlist: lagu yang sedang dibuka */
.row.playing .title { color: #6fb6ff; font-weight: 600; }
.row.playing { background: linear-gradient(90deg, rgba(46, 139, 255, .14), transparent 75%); }
.eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
.eq i { width: 3px; background: var(--accent); border-radius: 2px; height: 40%; box-shadow: 0 0 6px rgba(46, 139, 255, .8); }
body.is-playing .eq i { animation: eq 0.9s ease-in-out infinite; }
.eq i:nth-child(2) { height: 90%; animation-delay: -.3s; } .eq i:nth-child(3) { height: 60%; animation-delay: -.6s; }
@keyframes eq { 0%, 100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }
.eq i { transform-origin: bottom; }

@media (max-width: 640px) {
  .minibar { grid-template-columns: 46px minmax(0, 1fr) auto; left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom)); gap: 10px; padding: 8px 10px 8px 8px; }
  .mb-art { width: 46px; height: 46px; font-size: 15px; }
  .mb-vol { display: none; }
  .mb-ctrls { gap: 2px; }
  .mb-ctrls .pc { width: 36px; height: 36px; min-height: 36px; }
  .mb-ctrls .pc.pp { width: 42px; height: 42px; }
}
@media (prefers-reduced-motion: reduce) {
  .minibar, .fullplayer, .fp-cover { animation: none !important; transition: none !important; }
}

/* Tombol Send to FC (kiri tombol ▶) */
.cols-list.play { grid-template-columns: 30px 92px minmax(0, 1fr) auto; }
.pl { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.sendbtn {
  min-height: 36px; height: 36px; padding: 0 12px; border-radius: 999px; font-size: 13px; font-weight: 600; gap: 6px; color: #d7e6ff;
  background: linear-gradient(135deg, rgba(255, 255, 255, .09), rgba(46, 139, 255, .10)); border-color: rgba(120, 170, 255, .28);
}
.sendbtn svg { color: #6fb6ff; transition: transform .3s var(--ease-out); }
.sendbtn:hover:not(:disabled) svg { transform: translate(2px, -2px); }
@media (max-width: 640px) {
  .sendbtn { padding: 0 10px; font-size: 12.5px; }
}
@media (max-width: 360px) {
  .sendbtn span { display: none; }
  .sendbtn { width: 36px; padding: 0; justify-content: center; }
}

/* =====================================================================
   ALL SONGS — tampilan spreadsheet: kolom per vokalis, judul ke bawah
   ===================================================================== */
.sheet { max-height: min(72vh, 900px); overflow: auto; overscroll-behavior: contain; border-radius: inherit; }
.sheet:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.sheet table { border-collapse: separate; border-spacing: 0; width: 100%; min-width: calc(44px + var(--cols) * 190px); table-layout: fixed; font-size: 14px; }
.sheet th, .sheet td { text-align: left; vertical-align: top; padding: 9px 12px; border-bottom: 1px solid rgba(255, 255, 255, .06); border-right: 1px solid rgba(255, 255, 255, .05); }
.sheet th:last-child, .sheet td:last-child { border-right: 0; }
.sheet .rn { width: 44px; text-align: center; color: var(--faint); font-variant-numeric: tabular-nums; font-size: 12.5px; padding-left: 4px; padding-right: 4px; }
.sheet thead th {
  position: sticky; top: 0; z-index: 2; white-space: nowrap; font-size: 13px; font-weight: 650; color: #cfe0ff;
  background: linear-gradient(180deg, rgba(30, 38, 56, .96), rgba(18, 22, 32, .96));
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: inset 0 -1px 0 rgba(46, 139, 255, .45);
}
.sheet thead th.me { color: #fff; background: linear-gradient(180deg, rgba(36, 72, 140, .96), rgba(20, 34, 62, .96)); box-shadow: inset 0 -2px 0 var(--accent), 0 6px 18px rgba(46, 139, 255, .2); }
.sheet .rn { position: sticky; left: 0; z-index: 1; background: rgba(14, 16, 22, .94); }
.sheet thead th.rn { z-index: 3; }
.sheet .vn { margin-right: 6px; }
.sheet .vc { float: right; font-size: 12px; font-weight: 500; color: var(--faint); font-variant-numeric: tabular-nums; }
.sheet thead th.me .vc { color: #a9cbff; }
.sheet td .st { display: block; color: var(--text); overflow-wrap: anywhere; line-height: 1.35; }
.sheet td .sd { display: block; font-size: 11.5px; color: var(--faint); margin-top: 2px; }
.sheet td.me { background: linear-gradient(90deg, rgba(46, 139, 255, .08), rgba(46, 139, 255, .03)); }
.sheet tbody tr:hover td:not(.blank):not(.rn) { background: rgba(46, 139, 255, .10); }
.sheet tbody tr:nth-child(even) td.blank, .sheet tbody tr:nth-child(even) td:not(.me):not(.rn) { background-color: rgba(255, 255, 255, .012); }
@media (max-width: 640px) {
  .sheet table { min-width: calc(36px + var(--cols) * 160px); font-size: 13.5px; }
  .sheet .rn { width: 36px; }
  .sheet th, .sheet td { padding: 8px 10px; }
}

/* =====================================================================
   VOKALIS — header & laci (side panel)
   ===================================================================== */
header.top.vtop { justify-content: flex-start; gap: 10px; margin-bottom: 14px; }
.menu-open { background: linear-gradient(180deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .03)); border-color: rgba(255, 255, 255, .11);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); color: #dbe6f7; }
.sub:empty { display: none; }
.view-h { font-size: 20px; margin: 4px 0 12px; color: #fff; }
.drawer {
  position: fixed; z-index: 85; top: 10px; left: 10px; bottom: 10px; width: min(300px, 84vw);
  display: flex; flex-direction: column; gap: 4px; overflow: auto; border-radius: 20px; padding: 14px 10px 12px;
  background: var(--stripe-top) top / 100% 1px no-repeat, linear-gradient(170deg, rgba(46, 139, 255, .12), rgba(255, 255, 255, .02) 45%), rgba(14, 16, 21, .78);
  -webkit-backdrop-filter: blur(22px) saturate(170%); backdrop-filter: blur(22px) saturate(170%);
  border: 1px solid var(--glass-line); box-shadow: var(--glass-shadow), 0 0 40px rgba(46, 139, 255, .12);
  transform: translateX(calc(-100% - 24px)); visibility: hidden;
  transition: transform .5s var(--ease-out), visibility 0s linear .5s;
}
.drawer.open { transform: none; visibility: visible; transition: transform .5s var(--ease-out), visibility 0s; }
.drawer .nav-item { opacity: 0; transform: translateX(-14px); transition: background .2s, border-color .2s, opacity .35s ease, transform .5s var(--ease-out); }
.drawer.open .nav-item { opacity: 1; transform: none; transition-delay: 0s, 0s, calc(var(--i, 0) * 40ms + 100ms), calc(var(--i, 0) * 40ms + 100ms); }
.drawer .nav-item.soon .nav-name { color: var(--muted); }
#drawerBackdrop { z-index: 80; }
@media (min-width: 861px) { .side-backdrop.show { opacity: 1; visibility: visible; transition: opacity .35s ease, visibility 0s; } }
@media (prefers-reduced-motion: reduce) { .drawer, .drawer .nav-item { transition: none !important; } }
.paid-price { color: var(--faint); padding-left: 12px; }

/* Total "Belum dibayar" di samping filter (hanya tampil kalau ada yang belum dibayar) */
.due[hidden] { display: none; }
.due {
  display: inline-flex; align-items: baseline; gap: 8px; min-height: 38px; padding: 7px 14px; border-radius: 10px; white-space: nowrap;
  background: linear-gradient(135deg, rgba(255, 181, 71, .16), rgba(255, 181, 71, .05)); border: 1px solid rgba(255, 181, 71, .38);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); animation: due-in .35s var(--ease-out);
}
.due-k { font-size: 12.5px; color: #e9c48a; }
.due-v { font-weight: 700; color: #ffcf85; font-variant-numeric: tabular-nums; }
@keyframes due-in { from { opacity: 0; transform: translateY(-4px); } }
@media (max-width: 640px) { .due { flex: 1 1 100%; justify-content: space-between; } }

/* Accept (sebelum Send to FC) */
.acceptbtn {
  min-height: 36px; height: 36px; padding: 0 14px; border-radius: 999px; font-size: 13px; font-weight: 650; gap: 6px; color: #eafff5;
  background: linear-gradient(135deg, rgba(61, 220, 151, .30), rgba(0, 200, 160, .12)); border-color: rgba(61, 220, 151, .5);
  box-shadow: 0 0 16px rgba(61, 220, 151, .15);
}
.acceptbtn svg { color: #3ddc97; }
.acceptbtn:hover:not(:disabled) { border-color: rgba(61, 220, 151, .8); box-shadow: 0 0 0 3px rgba(61, 220, 151, .15), 0 0 22px rgba(61, 220, 151, .3); }
@media (max-width: 360px) { .acceptbtn span { display: none; } .acceptbtn { width: 36px; padding: 0; justify-content: center; } }
.badge.acc { background: rgba(61, 220, 151, .14); color: var(--ok); border: 1px solid rgba(61, 220, 151, .35); }
.freebadge { display: inline-flex; justify-content: center; width: 100%; margin-left: 0; padding: 6px 0; font-size: 13px; }
.ctxmenu button:disabled { opacity: .45; }
dialog.confirm { width: min(420px, calc(100vw - 32px)); }
dialog.confirm h2 { margin: 0 0 6px; font-size: 18px; color: #fff; }
dialog.confirm .cf-title { margin: 0 0 8px; font-weight: 650; color: #9fd0ff; }