/* =====================================================================
   DIGIMEMBER — Dashboard Admin (Workspace OS)
   ===================================================================== */
body.admin { background:var(--bg-canvas); min-height:100vh; }
.boot { position:fixed; inset:0; display:grid; place-items:center; background:var(--bg-canvas); z-index:50; }
.boot .logo-mark { width:56px; height:56px; font-size:24px; border-radius:18px; animation:bootP 1.2s ease-in-out infinite; }
@keyframes bootP { 50% { transform:scale(.9); } }

/* ---------- Shell ---------- */
.topbar { position:sticky; top:0; z-index:60; padding:14px 24px 10px; background:linear-gradient(var(--bg-canvas) 70%, rgba(243,245,249,0)); }
.topbar-in { height:68px; background:#fff; border-radius:var(--radius-pill); display:flex; align-items:center; gap:16px; padding:0 12px 0 14px; box-shadow:0 1px 2px rgba(16,27,59,.03); }
.topbar .logo-mark { width:42px; height:42px; border-radius:50%; font-size:17px; }
.topbar .logo { gap:12px; font-size:18px; }
.topnav { display:flex; gap:2px; background:var(--surface-muted); border-radius:var(--radius-pill); padding:4px; margin-left:8px; overflow:hidden; }
.topnav a { height:40px; padding:0 16px; display:inline-flex; align-items:center; border-radius:var(--radius-pill); font-weight:500; color:var(--muted); font-size:14px; white-space:nowrap; transition:background .25s, color .25s; }
.topnav a:hover { color:var(--navy); }
.topnav a.on { background:var(--ink); color:#fff; }
.top-right { margin-left:auto; display:flex; align-items:center; gap:10px; }
.top-search { position:relative; width:240px; }
.top-search .input { height:42px; border-radius:99px; padding-left:42px; font-size:13px; }
.top-search .ic { position:absolute; left:15px; top:50%; transform:translateY(-50%); color:var(--muted); }
.avatar-btn { display:flex; align-items:center; gap:10px; padding:4px 10px 4px 4px; border-radius:99px; transition:background .2s; }
.avatar-btn:hover { background:var(--surface-muted); }
.avatar-btn .avatar { width:40px; height:40px; background:var(--ink); color:#fff; }
.avatar-btn .who { text-align:left; line-height:1.2; }
.avatar-btn .who strong { display:block; font-size:13px; color:var(--navy); }
.avatar-btn .who span { font-size:12px; color:var(--muted); text-transform:capitalize; }
.layout { display:flex; gap:24px; padding:6px 24px 120px; max-width:1480px; margin:0 auto; }
.sidebar { position:sticky; top:100px; align-self:flex-start; width:72px; flex:none; background:#fff; border-radius:var(--radius-pill); padding:18px 0;
  display:flex; flex-direction:column; align-items:center; gap:10px; min-height:calc(100vh - 140px); }
.side-link { width:46px; height:46px; border-radius:50%; display:grid; place-items:center; color:var(--navy); transition:background .2s, color .2s, transform .15s; position:relative; }
.side-link:hover { background:var(--surface-muted); }
.side-link.on { background:var(--ink); color:#fff; }
.side-link:active { transform:scale(.92); }
.side-link[data-tip]:hover::after { content:attr(data-tip); position:absolute; left:58px; top:50%; transform:translateY(-50%); background:var(--ink); color:#fff; font-size:12px; font-weight:600;
  padding:6px 10px; border-radius:99px; white-space:nowrap; z-index:5; pointer-events:none; }
.side-sp { flex:1; }
.main { flex:1; min-width:0; }
.bottomnav { display:none; }

/* ---------- Header halaman ---------- */
.ph { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin:6px 0 22px; }
.ph-left { display:flex; align-items:center; gap:14px; min-width:0; }
.ph-title { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.ph h1 { font-size:32px; font-weight:600; letter-spacing:-.02em; color:var(--navy); }
.ph .crumb { font-size:12px; color:var(--muted); margin-bottom:2px; }
.ph .crumb b { color:var(--navy); font-weight:600; }
.ph .desc { color:var(--muted); font-size:14px; margin-top:4px; max-width:640px; }
.ph-actions { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.date-pill { white-space:nowrap; display:inline-flex; align-items:center; gap:10px; height:44px; padding:0 18px; border-radius:99px; background:#fff; font-size:13px; font-weight:600; color:var(--navy); box-shadow:inset 0 0 0 1px var(--border); }
.date-pill:hover { background:#fafbfd; }
.date-pop { position:absolute; z-index:70; background:#fff; border-radius:20px; padding:16px; box-shadow:var(--shadow-modal); width:300px; }
.date-pop .presets { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-bottom:12px; }
.date-pop .presets button { height:36px; border-radius:12px; background:var(--surface-muted); font-size:13px; font-weight:600; }
.date-pop .presets button:hover { background:#e6e9f0; }
.date-pop .row { display:flex; gap:8px; }
.date-pop .input { height:40px; font-size:13px; padding:0 10px; }
.dropdown { position:absolute; z-index:80; background:#fff; border-radius:18px; padding:8px; box-shadow:var(--shadow-modal); min-width:220px; }
.dropdown button, .dropdown a { display:flex; width:100%; align-items:center; gap:10px; padding:10px 12px; border-radius:12px; font-size:14px; font-weight:500; text-align:left; color:var(--text); }
.dropdown button:hover, .dropdown a:hover { background:var(--surface-muted); }
.dropdown .dd-head { padding:10px 12px; border-bottom:1px solid var(--border); margin-bottom:6px; }
.dropdown .danger { color:var(--danger); }

/* ---------- Grid & kartu ---------- */
.grid { display:grid; gap:20px; }
.g-12 { grid-template-columns:repeat(12, 1fr); }
.c-3 { grid-column:span 3; } .c-4 { grid-column:span 4; } .c-5 { grid-column:span 5; } .c-6 { grid-column:span 6; } .c-7 { grid-column:span 7; } .c-8 { grid-column:span 8; } .c-12 { grid-column:span 12; }
.stack { display:flex; flex-direction:column; gap:20px; }
.card.tight { padding:20px; }
.card.dark { background:var(--ink); color:#fff; }
.card.dark .card-title { color:#fff; } .card.dark .muted, .card.dark .card-sub { color:#A9AFBF; }
.card.lime { background:var(--lime); color:var(--ink); }
.card.lime .card-title, .card.lime .kpi-num { color:var(--ink); }
.card.lime .muted { color:#4a5a10; }
.kpi { position:relative; min-height:150px; display:flex; flex-direction:column; }
.kpi .kpi-top { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:auto; }
.kpi .kpi-ic { width:44px; height:44px; border-radius:50%; display:grid; place-items:center; background:var(--surface-muted); color:var(--navy); }
.card.dark .kpi-ic { background:#1E1E25; color:var(--lime); }
.card.lime .kpi-ic { background:rgba(255,255,255,.55); color:var(--ink); }
.kpi .kpi-lbl { font-size:13px; color:var(--muted); margin-top:16px; }
.card.dark .kpi-lbl { color:#A9AFBF; } .card.lime .kpi-lbl { color:#4a5a10; }
.kpi-num { font-size:36px; font-weight:700; color:var(--navy); letter-spacing:-.02em; line-height:1.15; }
.card.dark .kpi-num { color:#fff; }
.kpi-num.red { color:var(--danger); }
.kpi .kpi-foot { margin-top:12px; }
.trend { display:inline-flex; align-items:center; gap:4px; height:24px; padding:0 9px; border-radius:99px; font-size:12px; font-weight:700; }
.trend.up { background:var(--success-soft); color:var(--success); }
.trend.down { background:var(--danger-soft); color:var(--danger); }
.trend.lime { background:var(--lime); color:var(--ink); }
.trend.ink { background:var(--ink); color:#fff; }
.card.dark .trend.up { background:#1E2A12; color:var(--lime); }
.mini-kpis { display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; }
.mini-kpi { background:var(--surface-muted); border-radius:16px; padding:16px; text-align:center; }
.mini-kpi b { display:block; font-size:24px; color:var(--navy); font-weight:700; }
.mini-kpi span { font-size:12px; color:var(--muted); }

/* ---------- Tumpukan kartu peringkat ---------- */
.rank-stack { display:flex; flex-direction:column; }
.rank { display:flex; align-items:center; gap:12px; padding:16px; border-radius:20px; position:relative; }
.rank + .rank { margin-top:-12px; padding-top:26px; }
.rank.r1 { background:var(--ink); color:#fff; z-index:3; }
.rank.r2 { background:var(--lime); color:var(--ink); z-index:2; }
.rank.r3 { background:var(--surface-muted); color:var(--navy); z-index:1; }
.rank .r-ic { width:40px; height:40px; border-radius:50%; display:grid; place-items:center; flex:none; overflow:hidden; }
.rank.r1 .r-ic { background:var(--danger); color:#fff; } .rank.r2 .r-ic, .rank.r3 .r-ic { background:var(--ink); color:#fff; }
.rank .r-ic img { width:100%; height:100%; object-fit:cover; }
.rank .r-nm { flex:1; min-width:0; }
.rank .r-nm strong { display:block; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rank .r-nm span { font-size:12px; opacity:.7; }
.rank .r-pc { text-align:right; font-size:11px; opacity:.85; }
.rank .r-pc .trend { display:flex; margin-bottom:4px; }
.rank.r1 .trend { background:#1E1E25; color:var(--lime); }
.rank.r2 .trend { background:rgba(255,255,255,.6); color:var(--ink); }

/* ---------- Grafik batang kapsul ---------- */
.chart { position:relative; }
.bars { position:relative; overflow-x:clip; height:220px; display:flex; align-items:flex-end; justify-content:space-around; gap:8px; padding:0 4px 26px 30px; }
.bars .gl { position:absolute; left:30px; right:0; border-top:1px dashed #E3E7EE; font-size:11px; color:var(--muted); }
.bars .gl span { position:absolute; left:-28px; top:-8px; width:22px; text-align:right; }
.bar { position:relative; flex:1; max-width:46px; display:flex; flex-direction:column; align-items:center; height:100%; justify-content:flex-end; cursor:pointer; }
.bar i { display:block; width:100%; border-radius:99px; min-height:8px; transform-origin:bottom; animation:grow .6s var(--ease) both;
  background:repeating-linear-gradient(135deg, var(--bar) 0 5px, #8DBBFF 5px 7px); transition:filter .2s; }
.bar.top i { background:repeating-linear-gradient(135deg, var(--bar-active) 0 5px, #3B82F6 5px 7px); }
.bar:hover i { filter:brightness(.92); }
.bar .lb { position:absolute; bottom:-24px; font-size:12px; color:var(--muted); white-space:nowrap; }
.bar.top .lb { color:var(--navy); font-weight:700; }
.bar .tip { position:absolute; top:-36px; left:50%; transform:translate(-50%, 4px); background:var(--ink); color:#fff; font-size:12px; font-weight:600; padding:5px 10px; border-radius:99px; white-space:nowrap;
  opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; z-index:3; display:flex; align-items:center; gap:6px; }
.bar .tip::before { content:''; width:7px; height:7px; border-radius:50%; background:var(--lime); }
.bar:hover .tip, .bar.top .tip.show { opacity:1; transform:translate(-50%, 0); }
@keyframes grow { from { transform:scaleY(0); } }
.line-chart { width:100%; height:220px; display:block; overflow:visible; }
.legend { display:flex; gap:16px; flex-wrap:wrap; font-size:12px; color:var(--text); }
.legend span { display:inline-flex; align-items:center; gap:6px; }
.legend i { width:10px; height:10px; border-radius:50%; display:inline-block; }
.donut-wrap { display:flex; align-items:center; gap:24px; flex-wrap:wrap; }
.donut-legend { flex:1; min-width:200px; display:flex; flex-direction:column; gap:14px; font-size:14px; }
.donut-legend div { display:flex; align-items:center; gap:10px; }
.donut-legend i { width:12px; height:12px; border-radius:50%; flex:none; }
.donut-legend b { margin-left:auto; color:var(--navy); }
.donut-legend small { color:var(--muted); width:56px; text-align:right; }

/* ---------- Progres dengan kenop ---------- */
.prog { position:relative; height:28px; background:var(--surface-muted); border-radius:99px; }
.prog .fill { position:absolute; left:0; top:0; bottom:0; background:var(--lime); border-radius:99px; transition:width .8s var(--ease); min-width:28px; }
.prog .knob { position:absolute; top:2px; width:24px; height:24px; border-radius:50%; background:#fff; box-shadow:0 1px 4px rgba(16,27,59,.2); display:grid; place-items:center; transform:translateX(-26px); transition:left .8s var(--ease); }
.prog .knob::before { content:''; width:2px; height:10px; background:linear-gradient(var(--muted) 0 2px, transparent 2px 4px, var(--muted) 4px 6px, transparent 6px 8px, var(--muted) 8px 10px); }
.bar-mini { height:8px; background:var(--surface-muted); border-radius:99px; overflow:hidden; }
.bar-mini i { display:block; height:100%; background:var(--lime); border-radius:99px; transition:width .8s var(--ease); }
.rank-list { display:flex; flex-direction:column; gap:14px; }
.rank-list .rl-row { display:flex; justify-content:space-between; align-items:center; gap:10px; font-size:14px; margin-bottom:6px; }
.rank-list .num { width:22px; height:22px; border-radius:50%; display:inline-grid; place-items:center; font-size:11px; font-weight:700; background:var(--surface-muted); margin-right:8px; }
.rank-list .num.n1 { background:var(--ink); color:#fff; } .rank-list .num.n2 { background:var(--lime); color:var(--ink); }

/* ---------- Tab pil konten ---------- */
.tabs { display:inline-flex; gap:4px; background:#fff; border-radius:99px; padding:6px; flex-wrap:wrap; }
.tabs a, .tabs button { height:42px; padding:0 18px; border-radius:99px; display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:500; color:var(--muted); white-space:nowrap; transition:background .2s, color .2s; }
.tabs a:hover, .tabs button:hover { color:var(--navy); }
.tabs a.on, .tabs button.on { background:var(--ink); color:#fff; font-weight:600; }
.tabbar { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:22px; padding-bottom:20px; border-bottom:1px solid var(--border); }
.chip-tabs { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:18px; }
.chip-tabs button { height:44px; padding:0 8px 0 16px; border-radius:99px; background:#fff; display:inline-flex; align-items:center; gap:10px; font-weight:600; color:var(--navy); transition:background .2s; }
.chip-tabs button .n { height:26px; min-width:26px; padding:0 8px; border-radius:99px; background:var(--surface-muted); display:inline-grid; place-items:center; font-size:12px; }
.chip-tabs button.on { background:var(--lime); }
.chip-tabs button.on .n { background:var(--ink); color:#fff; }
.chip-tabs button.muted-chip { color:var(--muted); }

/* ---------- Toolbar & filter ---------- */
.toolbar { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.toolbar .input-wrap { flex:1; min-width:220px; }
.toolbar .select { width:auto; min-width:170px; }
.toolbar.card { padding:14px; }

/* ---------- Tabel admin ---------- */
.tbl-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; }
.td-name { display:flex; align-items:center; gap:12px; min-width:0; }
.td-name strong { display:block; color:var(--navy); font-size:14px; font-weight:600; }
.td-name span { font-size:12px; color:var(--muted); }
.td-thumb { width:60px; height:48px; border-radius:12px; overflow:hidden; background:var(--surface-muted); flex:none; }
.td-thumb img { width:100%; height:100%; object-fit:cover; }
.row-fail td { background:#FFF4F4 !important; }
.row-off td { opacity:.5; }
.row-off td:last-child, .row-off td:nth-last-child(2) { opacity:1; }
.drag { cursor:grab; color:#B4BACA; padding:4px; }
tr.dragging td { background:var(--lime-soft) !important; }
tr.drop-target td { box-shadow:inset 0 2px 0 var(--ink); }
.act { display:flex; gap:6px; justify-content:flex-end; }
.act .btn-icon { width:36px; height:36px; box-shadow:none; background:var(--surface-muted); }
.act .btn-icon:hover { background:#e6e9f0; }
.act .btn-icon.del { color:var(--danger); }
.pager { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:14px; font-size:13px; color:var(--muted); flex-wrap:wrap; }
.pager .pg { display:flex; gap:6px; align-items:center; }
.pager .pg button { width:36px; height:36px; border-radius:50%; font-weight:600; color:var(--navy); font-size:13px; }
.pager .pg button.on { background:var(--ink); color:#fff; }
.pager .pg button.nav { box-shadow:inset 0 0 0 1px var(--border); }
.pager .pg button:disabled { opacity:.35; }
.status-sel { appearance:none; -webkit-appearance:none; border:0; height:28px; border-radius:99px; padding:0 26px 0 12px; font-size:12px; font-weight:700; cursor:pointer;
  background-repeat:no-repeat; background-position:right 8px center; background-size:12px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B0B0F' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
.st-Baru { background-color:var(--lime); color:var(--ink); }
.st-Dihubungi { background-color:var(--blue-soft); color:#1B6EF3; }
.st-Closing { background-color:var(--success-soft); color:var(--success); }
.st-Batal { background-color:var(--surface-muted); color:var(--muted); }
.mob-cards { display:none; }

/* ---------- Bar aksi massal ---------- */
.bulkbar { position:fixed; left:50%; bottom:24px; z-index:300; transform:translate(-50%, 140%); transition:transform .35s var(--ease); background:var(--ink); color:#fff;
  border-radius:99px; padding:10px 10px 10px 22px; display:flex; align-items:center; gap:10px; box-shadow:0 20px 50px rgba(11,11,15,.35); max-width:calc(100vw - 24px); }
.bulkbar.show { transform:translate(-50%, 0); }
.bulkbar:not(.show), .savebar:not(.show) { visibility:hidden; transition:transform .35s var(--ease), visibility 0s .35s; }
.bulkbar .cnt { display:flex; align-items:center; gap:8px; font-weight:700; white-space:nowrap; margin-right:6px; }
.bulkbar .btn { --h:40px; padding:0 14px; font-size:13px; }
.bulkbar .b-dark { background:#1E1E25; color:#fff; }
.bulkbar .b-dark:hover { background:#2a2a33; }
.bulkbar .x { width:36px; height:36px; border-radius:50%; background:#1E1E25; display:grid; place-items:center; flex:none; }

/* ---------- Form admin ---------- */
.form-card .field:last-child { margin-bottom:0; }
.sec-title { display:flex; align-items:center; gap:10px; font-size:18px; font-weight:600; color:var(--navy); }
.sec-title .dot-live { width:9px; height:9px; }
.two { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.counter { font-size:12px; color:var(--muted); font-weight:500; }
.info-box { display:flex; gap:10px; align-items:flex-start; background:var(--surface-muted); border-radius:16px; padding:12px 14px; font-size:13px; color:var(--text); }
.info-box .ic { color:var(--blue); flex:none; margin-top:1px; }
.info-box.err { background:var(--danger-soft); color:#9F1D21; } .info-box.err .ic { color:var(--danger); }
.info-box.warn { background:var(--warning-soft); color:#92400E; } .info-box.warn .ic { color:var(--warning); }
.info-box.ok { background:var(--success-soft); color:#166534; } .info-box.ok .ic { color:var(--success); }
.switch-row { display:flex; align-items:center; justify-content:space-between; gap:14px; background:var(--surface-muted); border-radius:18px; padding:14px 16px; }
.switch-row .t strong { display:block; font-size:14px; color:var(--navy); }
.switch-row .t span { font-size:12px; color:var(--muted); }
.switch-row .ic-box { width:40px; height:40px; border-radius:50%; background:#fff; display:grid; place-items:center; flex:none; }
.uploader { border:2px dashed #D5DAE3; border-radius:20px; padding:24px; text-align:center; cursor:pointer; transition:border-color .2s, background .2s; }
.uploader:hover, .uploader.drag { border-color:var(--ink); background:#fafbfd; }
.uploader .u-ic { width:48px; height:48px; border-radius:50%; background:var(--surface-muted); display:grid; place-items:center; margin:0 auto 10px; }
.uploader b { display:block; color:var(--navy); font-size:14px; }
.uploader small { color:var(--muted); font-size:12px; }
.img-list { display:flex; flex-direction:column; gap:8px; margin-top:12px; }
.img-item { display:flex; align-items:center; gap:12px; background:var(--surface-muted); border-radius:16px; padding:8px 10px 8px 8px; }
.img-item img { width:64px; height:48px; border-radius:10px; object-fit:cover; background:#fff; flex:none; }
.img-item .nm { flex:1; min-width:0; font-size:13px; }
.img-item .nm b { display:block; color:var(--navy); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-weight:600; }
.img-item .nm span { font-size:12px; color:var(--muted); }
.img-item .first { background:var(--lime); color:var(--ink); }
.savebar { position:fixed; left:50%; bottom:22px; transform:translate(-50%, 160%); z-index:250; background:#fff; border-radius:99px; padding:8px 8px 8px 22px;
  display:flex; align-items:center; gap:14px; box-shadow:0 18px 50px rgba(16,27,59,.18); transition:transform .35s var(--ease); max-width:calc(100vw - 24px); }
.savebar.show { transform:translate(-50%, 0); }
.savebar .st { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--navy); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.savebar .st small { color:var(--muted); font-weight:500; }
.rating-in { display:flex; gap:4px; }
.rating-in button { color:#C9CED9; } .rating-in button.on { color:var(--ink); }
.rating-in .ic { width:26px; height:26px; }
.rating-in button.on .ic { fill:currentColor; }
.stars-sm { display:inline-flex; gap:1px; color:var(--ink); } .stars-sm .ic { width:13px; height:13px; fill:currentColor; } .stars-sm .ic.off { fill:none; color:#C9CED9; }

/* ---------- Pratinjau kartu produk (gaya sama dengan landing) ---------- */
.pv-card { background:#fff; border-radius:24px; padding:16px; display:flex; flex-direction:column; gap:14px; box-shadow:inset 0 0 0 1px var(--border); }
.pv-card.unggulan { background:var(--ink); color:#fff; box-shadow:none; } .pv-card.unggulan h3 { color:#fff; } .pv-card.unggulan .muted { color:#A9AFBF; }
.pv-card.promo { background:var(--lime); box-shadow:none; } .pv-card.promo .muted { color:#3f4a12; }
.pv-media { aspect-ratio:4/3; border-radius:16px; overflow:hidden; background:var(--surface-muted); position:relative; }
.pv-media img { width:100%; height:100%; object-fit:cover; }
.pv-card h3 { font-size:18px; font-weight:700; }
.pv-card .price { font-size:24px; font-weight:800; }
.pv-card.unggulan .num-dim { color:#7c8396; }

/* ---------- Hero slide cards ---------- */
.slide-list { display:flex; flex-direction:column; gap:12px; }
.slide-item { display:flex; gap:16px; align-items:center; background:#fff; border-radius:20px; padding:12px; transition:box-shadow .2s, opacity .2s; }
.slide-item.off { opacity:.55; }
.slide-item .thumbs-row { display:flex; gap:6px; flex:none; }
.slide-item .thumbs-row img { width:96px; height:72px; border-radius:12px; object-fit:cover; background:var(--surface-muted); }
.slide-item .meta { flex:1; min-width:0; }
.slide-item .meta strong { display:block; font-size:15px; color:var(--navy); }
.slide-item .meta p { font-size:13px; color:var(--muted); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin-top:2px; }
.slide-item.dragging { box-shadow:0 0 0 2px var(--lime); }
.mod-item { display:flex; align-items:center; gap:12px; background:var(--surface-muted); border-radius:20px; padding:14px; transition:box-shadow .2s; }
.mod-item .acc-num, .num-lime { width:34px; height:34px; border-radius:50%; background:var(--lime); color:var(--ink); display:grid; place-items:center; font-weight:800; font-size:13px; flex:none; }
.mod-item .meta { flex:1; min-width:0; }
.mod-item .meta strong { display:block; font-size:15px; color:var(--navy); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mod-item .meta span { font-size:12px; color:var(--muted); display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mod-edit { background:#fff; border-radius:20px; padding:18px; box-shadow:inset 0 0 0 2px var(--surface-muted); }

/* ---------- WA preview & template ---------- */
.wa-sim { background:#E8F5E1; border-radius:20px; padding:18px; min-height:240px; position:relative;
  background-image:radial-gradient(rgba(16,27,59,.05) 1px, transparent 1px); background-size:14px 14px; }
.wa-bubble-sim { background:#D9FDD3; border-radius:4px 16px 16px 16px; padding:12px 14px 22px; font-size:13px; line-height:1.55; color:#111b21; position:relative; white-space:pre-wrap; word-break:break-word; max-width:95%; box-shadow:0 1px 1px rgba(0,0,0,.08); }
.wa-bubble-sim .tm { position:absolute; right:10px; bottom:6px; font-size:10px; color:#667781; }
.var-chips { display:flex; gap:8px; flex-wrap:wrap; }
.var-chips button { height:30px; padding:0 12px; border-radius:99px; background:var(--lime); color:var(--ink); font-family:ui-monospace, monospace; font-size:12px; font-weight:700; }
.code-area { font-family:ui-monospace, 'SF Mono', Menlo, monospace; font-size:13px; min-height:220px; }
.wa-badge { display:inline-flex; align-items:center; gap:4px; height:22px; padding:0 8px; border-radius:99px; font-size:11px; font-weight:700; }
.wa-badge.ya { background:var(--success-soft); color:var(--success); } .wa-badge.tidak { background:var(--danger-soft); color:var(--danger); } .wa-badge.belum { background:var(--surface-muted); color:var(--muted); }
.nf { display:inline-flex; align-items:center; gap:4px; height:24px; padding:0 9px; border-radius:99px; font-size:11px; font-weight:700; margin-right:4px; white-space:nowrap; }
.nf.Terkirim { background:var(--lime); color:var(--ink); } .nf.Gagal { background:var(--danger-soft); color:var(--danger); }
.nf.Antri, .nf.Proses { background:var(--warning-soft); color:#B45309; } .nf.Nonaktif, .nf.Kosong { background:var(--surface-muted); color:var(--muted); } .nf.Batal { background:var(--surface-muted); color:var(--muted); }

/* ---------- Pengaturan ---------- */
.set-layout { display:grid; grid-template-columns:240px 1fr; gap:20px; align-items:start; }
.set-nav { position:sticky; top:100px; display:flex; flex-direction:column; gap:16px; }
.set-nav .card { padding:16px; }
.set-nav a { display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:99px; font-size:14px; font-weight:500; color:var(--text); }
.set-nav a:hover { background:var(--surface-muted); }
.set-nav a.on { background:var(--ink); color:#fff; font-weight:600; }
.set-nav a.on::after { content:''; margin-left:auto; width:8px; height:8px; border-radius:50%; background:var(--lime); }
.kv { display:flex; justify-content:space-between; gap:10px; font-size:13px; padding:5px 0; }
.kv span:first-child { color:var(--muted); }
.kv b { color:var(--navy); font-weight:600; text-align:right; }
.kv .ok { color:var(--success); } .kv .no { color:var(--danger); }

/* ---------- Login & akses ditolak ---------- */
.auth-page { min-height:100vh; display:flex; flex-direction:column; padding:24px; background:radial-gradient(900px 500px at 55% -10%, rgba(216,255,62,.25), transparent 60%), var(--bg-canvas); }
.auth-top { display:flex; justify-content:space-between; align-items:center; }
.auth-top .logo-mark { border-radius:50%; background:var(--ink); color:var(--lime); width:44px; height:44px; }
.auth-center { flex:1; display:grid; place-items:center; padding:24px 0; }
.auth-card { background:#fff; border-radius:28px; padding:40px; width:100%; max-width:520px; box-shadow:0 30px 80px -40px rgba(16,27,59,.25); }
.auth-brand { display:flex; align-items:center; gap:14px; margin-bottom:28px; }
.auth-brand .logo-mark { width:54px; height:54px; border-radius:16px; font-size:24px; }
.auth-brand strong { display:block; font-size:20px; color:var(--navy); letter-spacing:-.01em; }
.auth-brand span { font-size:13px; color:var(--muted); }
.auth-card h1 { font-size:32px; font-weight:600; letter-spacing:-.02em; }
.auth-card .lead { color:var(--muted); font-size:15px; margin:10px 0 26px; }
.gbtn-wrap { display:flex; justify-content:center; min-height:48px; }
.or { display:flex; align-items:center; gap:12px; color:var(--muted); font-size:13px; margin:20px 0; }
.or::before, .or::after { content:''; flex:1; height:1px; background:var(--border); }
.auth-foot { display:flex; justify-content:space-between; align-items:center; margin-top:28px; font-size:14px; }
.auth-err { display:flex; gap:12px; background:var(--danger-soft); border-radius:20px; padding:16px; margin-bottom:16px; }
.auth-err .i { width:36px; height:36px; border-radius:50%; background:#fff; display:grid; place-items:center; color:var(--danger); flex:none; }
.auth-err strong { color:var(--danger); display:block; font-size:15px; }
.auth-err p { font-size:13px; color:#5b2125; margin-top:4px; }
.email-bad { display:flex; align-items:center; gap:10px; height:48px; border-radius:16px; background:var(--surface-muted); padding:0 16px; margin-bottom:14px; font-weight:500; }
.email-bad b { margin-left:auto; color:var(--danger); font-size:12px; letter-spacing:.04em; }
.deny { max-width:500px; margin:30px auto; text-align:center; }
.deny .card { padding:40px 44px; position:relative; }
.deny .card::before { content:''; position:absolute; top:0; left:50%; transform:translateX(-50%); width:76px; height:4px; border-radius:0 0 4px 4px; background:var(--lime); }
.deny .shield { width:96px; height:96px; border-radius:50%; background:var(--ink); color:#fff; display:grid; place-items:center; margin:0 auto 22px; }
.deny .shield .ic { width:36px; height:36px; }
.deny h2 { font-size:28px; font-weight:600; margin:14px 0 10px; }
.deny .who { text-align:left; background:var(--surface-muted); border-radius:20px; padding:16px 20px; margin:22px 0; }
.deny .who .tiers { display:grid; grid-template-columns:1fr 1fr; gap:10px; border-top:1px solid var(--border); margin-top:12px; padding-top:12px; font-size:14px; }
.deny .who small { display:block; color:var(--muted); font-size:12px; }
.deny .evt { display:inline-flex; gap:8px; align-items:center; background:#fff; border-radius:99px; padding:8px 16px; font-size:13px; color:var(--muted); margin-top:22px; }
.deny .guard { margin-top:26px; font-size:13px; color:var(--muted); }
.deny .guard b { display:flex; gap:8px; justify-content:center; align-items:center; letter-spacing:.06em; color:var(--muted); font-weight:600; margin-bottom:6px; }

/* ---------- Responsif ---------- */
@media (max-width:1560px) { .topnav a.opt { display:none; } }
@media (max-width:1280px) { .top-search { width:180px; } }
@media (max-width:1100px) {
  .g-12 > [class*="c-"] { grid-column:span 12; }
  .g-12 > .c-3 { grid-column:span 6; }
  .set-layout { grid-template-columns:1fr; }
  .set-nav { position:static; }
  .set-nav .card:first-child { display:flex; overflow-x:auto; gap:4px; padding:8px; }
  .set-nav .card:first-child a { white-space:nowrap; }
  .set-nav .card:first-child .eyebrow-s { display:none; }
  .top-search { display:none; }
}
@media (max-width:900px) { .topnav { display:none; } }
@media (max-width:760px) {
  .topbar { padding:10px 12px 8px; }
  .topbar-in { height:60px; }
  .avatar-btn .who { display:none; }
  .layout { padding:4px 14px 120px; }
  .sidebar { display:none; }
  .bottomnav { display:flex; position:fixed; left:50%; bottom:14px; transform:translateX(-50%); z-index:200; background:#fff; border-radius:99px; padding:8px; gap:6px;
    box-shadow:var(--shadow-float); }
  .bottomnav a, .bottomnav button { width:50px; height:50px; border-radius:50%; display:grid; place-items:center; color:var(--navy); }
  .bottomnav .on { background:var(--ink); color:#fff; }
  .ph h1 { font-size:26px; }
  .ph-actions { width:100%; }
  .ph-actions .date-pill { flex:1; justify-content:center; }
  .g-12 > .c-3 { grid-column:span 12; }
  .table-wrap.cardify { display:none; }
  .mob-cards { display:flex; flex-direction:column; gap:10px; }
  .mcard { background:var(--surface-muted); border-radius:18px; padding:14px; display:flex; flex-direction:column; gap:10px; }
  .mcard .top { display:flex; align-items:center; gap:10px; }
  .mcard .top .grow { flex:1; min-width:0; }
  .mcard .row2 { display:flex; flex-wrap:wrap; gap:6px; align-items:center; font-size:12px; color:var(--muted); }
  .two { grid-template-columns:1fr; }
  .bulkbar { flex-wrap:wrap; border-radius:24px; justify-content:center; bottom:84px; padding:12px; }
  .savebar { bottom:84px; padding-left:14px; }
  .savebar .st small { display:none; }
  .auth-card { padding:26px 20px; }
  .tabs { display:flex; flex-wrap:nowrap; overflow-x:auto; border-radius:20px; scrollbar-width:none; }
  .slide-item { flex-wrap:wrap; }
  .card { padding:18px; }
}

/* ---------- Pengaman lebar layar kecil ---------- */
html, body.admin { overflow-x:clip; }
.set-layout > * { min-width:0; }
.seg { max-width:100%; overflow-x:auto; scrollbar-width:none; }
.seg::-webkit-scrollbar { display:none; }
.slide-item .meta .badge { max-width:100%; overflow:hidden; text-overflow:ellipsis; }
@media (max-width:1100px) { .set-layout { grid-template-columns:minmax(0, 1fr); } }
@media (max-width:760px) {
  .grid.g-12 { grid-template-columns:minmax(0, 1fr); }
  .g-12 > [class*="c-"] { grid-column:auto !important; min-width:0; }
  #exGo { width:100%; }
  .ph-actions > * { max-width:100%; }
}

/* v2 */
.checks { display:flex; flex-wrap:wrap; gap:8px; }
.chip-check { background:var(--surface-muted); border-radius:12px; padding:8px 12px; font-size:13px; font-weight:600; }
.chip-check:has(input:checked) { background:var(--lime-soft); box-shadow:inset 0 0 0 1.5px var(--ink); }
.has-count { position:relative; }
.has-count::after { content:attr(data-count); position:absolute; top:2px; right:2px; min-width:18px; height:18px; padding:0 5px; border-radius:99px; background:var(--danger); color:#fff; font-size:10px; font-weight:700; display:grid; place-items:center; line-height:18px; box-shadow:0 0 0 2px #fff; }
/* ---------- v2: Sales, Akses Produk, Pembayaran, Redeem, Member ---------- */
.sb { background:var(--surface-muted); color:var(--text); }
.sb-Lunas { background:var(--success-soft); color:var(--success); }
.sb-Menunggu-Verifikasi { background:var(--blue-soft); color:#1B6EF3; }
.sb-Menunggu-Pembayaran { background:var(--warning-soft); color:#B45309; }
.sb-Ditolak { background:var(--danger-soft); color:var(--danger); }
.sb-Kedaluwarsa, .sb-Dibatalkan { background:var(--surface-muted); color:var(--muted); }
tr.clickable { cursor:pointer; }
.mono { font-family:ui-monospace, SFMono-Regular, Menlo, monospace; }
.kv-list { background:var(--surface-muted); border-radius:16px; padding:8px 14px; }
.kv-list .kv + .kv { border-top:1px solid var(--border); }
a.kv:hover b { text-decoration:underline; }
.bukti-box { margin-top:12px; background:var(--surface-muted); border-radius:16px; padding:10px; display:flex; align-items:center; justify-content:center; gap:10px; min-height:80px; font-size:13px; color:var(--muted); }
.bukti-box img { max-height:360px; width:100%; object-fit:contain; border-radius:12px; cursor:zoom-in; background:#fff; }
.tl { list-style:none; margin:0; padding:0; }
.tl li { position:relative; padding:0 0 14px 22px; font-size:13px; }
.tl li::before { content:''; position:absolute; left:4px; top:6px; width:8px; height:8px; border-radius:50%; background:var(--ink); }
.tl li::after { content:''; position:absolute; left:7.5px; top:16px; bottom:0; width:1px; background:var(--border); }
.tl li:last-child::after { display:none; }
.tl b { display:block; color:var(--navy); font-weight:600; } .tl span { font-size:12px; color:var(--muted); }
.drawer-actions { position:sticky; bottom:-28px; background:#fff; margin:20px -28px -28px; padding:16px 28px 24px; border-top:1px solid var(--border); display:flex; flex-direction:column; gap:8px; }
.btn.glow:hover { box-shadow:0 0 0 4px rgba(216,255,62,.4), 0 12px 30px -8px rgba(150,190,10,.7); }
.ak-card { display:flex; flex-direction:column; gap:8px; transition:transform .25s var(--ease), box-shadow .25s; }
a.ak-card:hover { transform:translateY(-3px); box-shadow:0 0 0 1.5px var(--lime), 0 18px 44px -20px rgba(150,190,10,.6); }
.ak-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; }
.ak-ic { width:46px; height:46px; border-radius:14px; background:var(--lime); color:var(--ink); display:grid; place-items:center; overflow:hidden; }
.ak-ic img { width:100%; height:100%; object-fit:contain; background:#fff; }
.ak-card strong { font-size:16px; color:var(--navy); }
.ak-foot { display:flex; justify-content:space-between; align-items:center; margin-top:auto; padding-top:12px; border-top:1px solid var(--border); font-size:13px; }
.rek-card.off { opacity:.55; }
.add-row { display:flex; flex-wrap:wrap; gap:8px; }
.mi { display:flex; align-items:center; gap:12px; background:#fff; box-shadow:inset 0 0 0 1px var(--border); border-radius:16px; padding:10px 12px; }
.mi.dragging { opacity:.5; }
.mi .drag { cursor:grab; color:var(--muted); }
.mi-ic { width:36px; height:36px; border-radius:12px; background:var(--surface-muted); display:grid; place-items:center; color:var(--navy); flex:none; }
.mi-t { flex:1; min-width:0; } .mi-t b { display:block; color:var(--navy); font-size:14px; } .mi-t span { font-size:12px; color:var(--muted); }
.mi-bab { background:var(--ink); box-shadow:none; } .mi-bab .mi-t b { color:#fff; } .mi-bab .mi-t span, .mi-bab .drag { color:#A9AFBF; }
.mi-bab .mi-ic { background:var(--lime); color:var(--ink); } .mi-bab .btn-icon { background:#1E1E25; color:#fff; box-shadow:none; }
.mi-child { margin-left:28px; }
.lis-list { margin-top:12px; max-height:260px; overflow:auto; display:flex; flex-direction:column; gap:6px; }
.lis-row { display:flex; justify-content:space-between; align-items:center; gap:8px; background:var(--surface-muted); border-radius:10px; padding:6px 10px; font-size:13px; }
.kupon-code { background:var(--lime-soft); color:var(--ink); padding:3px 8px; border-radius:8px; letter-spacing:.04em; }
.flow { margin:0; padding-left:20px; display:flex; flex-direction:column; gap:10px; font-size:14px; }
.flow li::marker { font-weight:800; color:var(--navy); }
@media (max-width:640px) { .mi-child { margin-left:12px; } .drawer-actions { margin:20px -20px -20px; padding:14px 20px 20px; } }
.uji-form .field { margin-bottom:10px; }