/* ===== v1.24.0 — Tema Screamous (gaya mockup "TikTok Hub Overview v-next", skill screamous-hub-design) =====
   Dimuat TERAKHIR (setelah app.css & m.css). Hanya mengganti tampilan: warna, font, sudut, sidebar, tombol, gerak.
   Struktur halaman & data tidak berubah. Hapus <link> file ini di index.html untuk kembali ke gaya lama. */
:root{
  --bg:#F5F5F7;--card:#fff;--ink:#1D1D1F;--mut:#6E6E73;--line:#E5E5EA;--fill:rgba(118,118,128,.12);
  --blue:#0071E3;--link:#0066CC;--red:#D0011B;--green:#248A3D;--orange:#C93400;--purple:#8944AB;--teal:#0071A4;
  --sans:-apple-system,BlinkMacSystemFont,'SF Pro Text','Helvetica Neue',Geist,system-ui,sans-serif;
  --disp:'SF Pro Display',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Geist,sans-serif;
  --num:ui-rounded,'SF Pro Rounded',-apple-system,BlinkMacSystemFont,Geist,sans-serif;
  --spring:linear(0,0.186,0.465,0.682,0.821,0.903,0.949,0.973,0.986,0.993,0.997,1);
  --sheet:linear(0,0.222,0.565,0.813,0.947,1.001,1.015,1.013,1.008,1.004,1.001,1);
}

/* ---- dasar ---- */
body{font-family:var(--sans);color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased}
a{color:var(--link)}a:hover{color:#004C99}
.muted,.mini,.sub{color:var(--mut)}
.mono{font-family:var(--num);font-variant-numeric:tabular-nums;letter-spacing:0}
.lbl{font-family:var(--sans);font-size:12.5px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:var(--mut)}
.big{font-family:var(--num);font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.up{color:var(--green)}.down{color:#C4001A}
h1,.ph h1{font-family:var(--disp);font-weight:700;letter-spacing:-.025em}
.ph h1{font-size:34px}

/* ---- kerangka ---- */
.app{background:var(--bg);padding:0}
.frame{background:var(--bg);border:0;border-radius:0;min-height:100vh}
aside.side{background:#ECECEF;border-right:1px solid #DEDEE3;height:100vh;padding:18px 12px}
main.main{height:100vh;background:var(--bg)}
.topbar{background:rgba(245,245,247,.72);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border-bottom:0;box-shadow:0 1px 0 rgba(0,0,0,.06);position:relative;z-index:5}
.content{padding:24px 36px 56px}

/* ---- sidebar ala System Settings: ikon dalam kotak berwarna ---- */
.navgrp{font:600 12px var(--sans);color:var(--mut);padding:16px 10px 6px}
.navbtn{height:40px;padding:0 10px;border:0;border-radius:9px;color:var(--ink);font:400 14px var(--sans);gap:10px}
.navbtn:hover{background:rgba(0,0,0,.05);color:var(--ink)}
.navbtn.on{background:rgba(0,0,0,.08);border:0;box-shadow:none;font-weight:500}
.nbic{width:26px;height:26px;border-radius:7px;display:inline-flex;align-items:center;justify-content:center;flex:none;background:#8E8E93;color:#fff}
.nbic svg.i{width:15px;height:15px;stroke:#fff;stroke-width:2}
.nbic[data-k="overview"]{background:#007AFF}
.nbic[data-k="promo"]{background:#FF9500}
.nbic[data-k="live"]{background:#FF2D55}
.nbic[data-k="video"]{background:#AF52DE}
.nbic[data-k="affiliate"]{background:#34C759}
.nbic[data-k="upload"]{background:#30B0C7}
.nbic[data-k="pengiriman"]{background:#A2845E}
.nbic[data-k="scan"]{background:#5AC8FA}
.nbic[data-k="report"]{background:#5856D6}
.nbic[data-k="products"]{background:#FF9500}
.nbic[data-k="settings"]{background:#8E8E93}

/* ---- kartu: putih di atas latar abu, radius 18, tanpa bingkai ---- */
.panel,.kpi{background:var(--card);border:0;border-radius:18px;padding:0;box-shadow:none}
.panel-h{padding:14px 18px 4px}
.panel-b{border:0;border-radius:0 0 18px 18px;background:transparent;padding:12px 18px 18px}
.kpi-b{border:0;background:transparent;border-radius:18px 18px 0 0;padding:16px 18px 8px}
.kpi-f{padding:4px 18px 16px;color:var(--mut)}
.card,.kcard,.upcard{border:0;border-radius:14px}
.kcard{background:#F7F7F9}
.panel .kcard{background:#F7F7F9}
.empty{background:var(--card);border:0;border-radius:14px;color:var(--mut)}

/* ---- kontrol ---- */
.btn{height:36px;padding:0 16px;border:0;border-radius:999px;background:var(--fill);color:var(--link);font:600 13px var(--sans)}
.btn:hover{background:rgba(118,118,128,.18);color:var(--link)}
.btn-dark{background:var(--blue);color:#fff}
.btn-dark:hover{background:#0077ED;color:#fff}
.btn-sm{height:30px;padding:0 12px;font-size:12.5px;border-radius:999px}
.seg{background:var(--fill);border:0;border-radius:9px;padding:2px}
.seg button{border-radius:7px;font:500 13px var(--sans);color:var(--ink)}
.seg button.on{background:#fff;font-weight:600;box-shadow:0 3px 8px rgba(0,0,0,.12),0 0 0 .5px rgba(0,0,0,.04)}
.tabs{border-bottom:1px solid var(--line)}
.tab{font:500 13px var(--sans);color:var(--mut)}
.tab.on{color:var(--ink);border-bottom-color:var(--blue)}
.in{border:0;background:var(--fill);border-radius:10px;font:400 14px var(--sans);color:var(--ink)}
.in:focus{background:#fff;box-shadow:0 0 0 3px rgba(0,113,227,.35)}
.pill{border:0;background:var(--fill);font:500 12px var(--sans)}
.lab{border-radius:6px;font:600 12px var(--sans)}
.c-green{background:var(--green)}.c-blue{background:#0071E3}.c-orange{background:var(--orange)}.c-red{background:var(--red)}.c-purple{background:var(--purple)}
.av{background:var(--ink);font-family:var(--sans)}
.bar{background:#EDEDF0}
.xl{font-family:var(--num)}
.toast{background:rgba(29,29,31,.86);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border-radius:22px;padding:12px 20px;font:500 14px var(--sans)}
.toast.err{background:rgba(196,0,26,.92)}
.modal{border-radius:22px}
.modal-h,.modal-f{border-color:var(--line)}
button:focus-visible,a:focus-visible,.in:focus-visible{outline:3px solid rgba(0,113,227,.5);outline-offset:2px}

/* ---- gerak: respons saat ditekan (spring, bisa dipotong) ---- */
.btn,.navbtn,.kcard,.mcard,.seg button,.bnav button,.mcta{transition:transform .55s var(--spring),background-color .2s}
.btn:active,.navbtn:active,button.kcard:active,button.mcard:active,.seg button:active,.bnav button:active,.mcta:active{transform:scale(.97);transition-duration:.08s}
@media (prefers-reduced-motion: reduce){.btn,.navbtn,.kcard,.mcard,.seg button,.bnav button,.mcta{transition:none}.btn:active,.navbtn:active,button.kcard:active,button.mcard:active,.seg button:active,.bnav button:active,.mcta:active{transform:none}}
@media (prefers-reduced-transparency: reduce){.topbar,.toast{background:#fff!important;-webkit-backdrop-filter:none;backdrop-filter:none}.toast{background:#1D1D1F!important}}

/* ---- Overview v1.23.0 menyesuaikan tema ---- */
.ovdata,.ovdef{border:0;border-radius:14px}
.ovchip{background:var(--fill)}
.ovlink{color:var(--link);font-family:var(--sans)}
.ovcal span{background:var(--red);font-family:var(--sans)}
.ovcal b{font-family:var(--num)}
.ovcal{border-color:var(--line)}
.ovphase{color:var(--orange)}
.ovcd{background:var(--ink);font-family:var(--num)}
.ovcbars .ovcb span,.ovdays span{font-family:var(--num)}
.ovact,.ovwk{border-color:var(--line)}
.ovstale{color:var(--orange);background:#FFF1E6}

/* ---- HP ---- */
@media (max-width: 760px){
  :root{--bg:#F2F2F7}
  body,.frame,.app,main.main{background:var(--bg)!important}
  .content{padding:14px 16px 96px}
  .ph h1{font-size:30px}
  .topbar{background:rgba(242,242,247,.72)!important;border-bottom:0!important;box-shadow:0 1px 0 rgba(0,0,0,.06)}
  .bnav{background:rgba(249,249,249,.86)!important;-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border-top:0!important;box-shadow:0 -1px 0 rgba(0,0,0,.08)}
  .bnav button{font:500 10.5px var(--sans);color:#8E8E93}
  .bnav button.on{color:var(--blue);background:transparent}
  .mcard,.mcta{border:0!important;border-radius:16px!important}
  .mcta{background:var(--blue)!important;color:#fff!important}
  .panel-h{padding:12px 14px 2px}
  .panel-b{padding:10px 14px 14px}
  .kpi-b{padding:14px 14px 6px}
  .kpi-f{padding:4px 14px 14px}
  aside.side{height:100%}
}

/* ===== v1.27.1 / v1.29.0 — semua halaman (panel, tabel, kanban) mengikuti gaya Overview =====
   Hanya tampilan (scope .dvx). Judul panel jadi judul seksi, tabel tanpa huruf mono kapital, kanban & kartu kecil abu lembut. */
.content .page:not(.ov2){gap:22px}
.content .panel{border-radius:18px;background:#fff}
.content .panel-h{padding:16px 20px 6px;align-items:flex-end}
.content .panel-h > .lbl:first-child,.content .panel-h > div > .lbl:first-child{font-family:var(--disp);font-size:20px;font-weight:700;letter-spacing:-.02em;text-transform:none;color:var(--ink);line-height:1.25}
.content .panel-b{padding:10px 20px 20px}
.content .panel > .tbl,.content .panel-b > .tbl{border:0;border-radius:0 0 18px 18px}
.content .tbl{border:0;border-radius:14px;background:#fff}
.content .th{background:#F5F5F7!important}
.content .th > div{font:600 12.5px var(--sans);letter-spacing:0;text-transform:none;color:var(--mut)}
.content .tr{border-color:var(--line)}
.content .td{font-variant-numeric:tabular-nums}
.content .kcol{background:#E9E9EE;border:0;border-radius:14px;padding:10px}
.content .panel .kcol{background:#F5F5F7}
.content .kcard{background:#fff;border:0;border-radius:12px;box-shadow:0 1px 2px rgba(0,0,0,.06)}
.content .panel .kcard{background:#F5F5F7;box-shadow:none}
.content .panel .kcol .kcard{background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.06)}
.content .kpi{border-radius:18px}
.content .kpi .lbl{text-transform:none;letter-spacing:0;font-size:13px;color:var(--ink)}
.content .kpi .big{font-size:28px}
.content .grid2,.content .grid3,.content .grid4{gap:16px;align-items:stretch}
.content .empty{background:#fff;border:0;border-radius:18px}
.content .in{border-radius:10px}
.content .lbl{letter-spacing:.01em}
@media (max-width: 760px){.content .panel-h > .lbl:first-child,.content .panel-h > div > .lbl:first-child{font-size:18px}.content .panel-h{padding:12px 14px 4px}.content .panel-b{padding:10px 14px 14px}}
.content .msec-h > .lbl{font-family:var(--disp);font-size:18px;font-weight:700;letter-spacing:-.02em;text-transform:none;color:var(--ink)}
.content .mkv i{font:600 11.5px var(--sans);letter-spacing:0;text-transform:none;color:var(--mut)}
.content .panel-b .lbl,.content .mcard .lbl,.content .kcard .lbl{text-transform:none;letter-spacing:0;font-size:12.5px}
.content .mcard,.content .msums{border-radius:18px}

.content .panel-h > .lbl:first-child{white-space:nowrap;flex:none}
.content .panel-h > .mini{text-align:right}
.content .mono,.content .td.num{font-family:var(--num);font-variant-numeric:tabular-nums;letter-spacing:0}

/* v1.30.3 — panah dropdown: semua <select> memakai chevron sendiri dengan jarak proporsional dari tepi kanan */
select,select.in{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding-right:38px!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236E6E73' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:12px 12px;text-overflow:ellipsis;cursor:pointer}
select::-ms-expand{display:none}
select[multiple],select[size]:not([size="1"]){background-image:none;padding-right:12px!important}
select:disabled{opacity:.55;cursor:default}