@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Sora:wght@600;700&display=swap');

:root{
  --bg:#f5f6f9; --surface:#ffffff; --ink:#161a23; --muted:#697086;
  --border:#e7e9ef; --border-2:var(--border);
  --primary:#0ea672; --primary-d:#0b8a5e; --primary-soft:#e6f7f0;
  --danger:#e23b53; --warn:#f59e0b;
  --surface-2:#f1f3f7; --track:#e7e9ef; --warn-soft:#fff6e6; --danger-soft:#fdecef; --warn-ink:#8a5a12; --info-soft:#e8f0ff;
  --sidebar:#141824; --sidebar-2:#1d2231; --sidebar-ink:#aeb4c4;
  --radius:14px; --radius-sm:10px;
  --shadow:0 1px 2px rgba(16,24,40,.05),0 4px 16px rgba(16,24,40,.06);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:Inter,system-ui,sans-serif;background:var(--bg);color:var(--ink);font-size:14.5px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:Sora,Inter,sans-serif;margin:0}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em}
.muted{color:var(--muted)}
.nowrap{white-space:nowrap}

/* ---------- AUTH ---------- */
.auth-bg{min-height:100vh;display:grid;place-items:center;background:radial-gradient(120% 120% at 0% 0%,#13351f 0%,#141824 45%,#0c0f17 100%);padding:20px}
.auth-card{background:var(--surface);width:100%;max-width:380px;padding:34px 30px;border-radius:18px;box-shadow:0 20px 60px rgba(0,0,0,.35)}
.auth-card h1{font-size:21px;margin:14px 0 4px}
.auth-card .muted{margin:0 0 18px}
.auth-card label{display:block;font-weight:600;font-size:13px;margin:14px 0 6px}
.auth-card input{width:100%}
.brand-mark{display:inline-grid;place-items:center;width:46px;height:46px;border-radius:13px;background:linear-gradient(135deg,var(--primary),#13b981);color:#fff;font-family:Sora;font-weight:700;font-size:18px}
.brand-mark.sm{width:30px;height:30px;border-radius:9px;font-size:13px}
.ok{color:var(--primary-d);font-weight:600}
.alert{background:var(--danger-soft);color:#a11833;padding:10px 12px;border-radius:var(--radius-sm);font-size:13px;margin-bottom:6px}
.alert-ok{background:var(--primary-soft);color:var(--primary-d)}

/* ---------- INPUTS ---------- */
input,select,textarea{font:inherit;color:var(--ink);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:10px 12px;width:100%;outline:none;transition:border .15s,box-shadow .15s}
input:focus,select:focus,textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}
textarea{resize:vertical}
label{font-weight:600;font-size:13px}

/* ---------- BUTTONS ---------- */
.btn{display:inline-flex;align-items:center;gap:6px;justify-content:center;background:var(--surface);color:var(--ink);border:1px solid var(--border);border-radius:var(--radius-sm);padding:9px 15px;font-weight:600;font-size:13.5px;cursor:pointer;transition:.15s;white-space:nowrap}
.btn:hover{background:var(--surface-2);border-color:#d8dbe3}
.btn-primary{background:var(--primary);border-color:var(--primary);color:#fff}
.btn-primary:hover{background:var(--primary-d);border-color:var(--primary-d)}
.btn-danger{background:var(--surface);border-color:var(--border);color:var(--danger)}
.btn-danger:hover{background:var(--danger-soft)}
.btn-sm{padding:6px 11px;font-size:12.5px}
.btn-block{width:100%;margin-top:18px}

/* ---------- APP SHELL ---------- */
.app{display:flex;min-height:100vh}
.sidebar{width:248px;background:var(--sidebar);color:var(--sidebar-ink);display:flex;flex-direction:column;position:fixed;inset:0 auto 0 0;z-index:40}
.side-brand{display:flex;align-items:center;gap:10px;padding:20px 18px;color:#fff;font-family:Sora;font-weight:700;font-size:15px;border-bottom:1px solid var(--sidebar-2)}
.sidebar nav{flex:1;padding:14px 12px;overflow:auto}
.sidebar nav a{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:10px;color:var(--sidebar-ink);font-weight:500;margin-bottom:3px;transition:.15s}
.sidebar nav a:hover{background:var(--sidebar-2);color:#fff}
.sidebar nav a.on{background:var(--primary);color:#fff}
.nav-label{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:#5b6175;margin:16px 12px 6px}
.side-foot{border-top:1px solid var(--sidebar-2);padding:14px}
.who{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.who-name{color:#fff;font-weight:600;font-size:13px;margin-bottom:3px}
.avatar{width:34px;height:34px;border-radius:9px;background:var(--sidebar-2);color:#fff;display:grid;place-items:center;font-weight:700;flex:none}
.logout{display:block;text-align:center;padding:8px;border-radius:9px;font-size:13px;font-weight:600;color:var(--sidebar-ink);border:1px solid var(--sidebar-2)}
.logout:hover{background:var(--sidebar-2);color:#fff}

.content{flex:1;margin-left:248px;min-width:0}
.topbar{display:flex;justify-content:space-between;align-items:center;padding:16px 28px;background:var(--surface);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:20}
.topbar h1{font-size:18px}
.topbar-right{display:flex;align-items:center;gap:12px}
.hello{font-size:13px;color:var(--muted)}
.page{padding:24px 28px;max-width:1180px}

.menu-toggle{display:none}
.scrim{display:none}

/* ---------- BADGES / CHIPS ---------- */
.badge{font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px;letter-spacing:.02em}
.badge-admin{background:var(--warn-soft);color:#b46b00}
.badge-user{background:var(--info-soft);color:#2557c7}
.chip{display:inline-flex;align-items:center;font-size:12px;font-weight:600;padding:4px 10px;border-radius:999px;color:var(--c);background:color-mix(in srgb,var(--c) 13%,var(--surface));border:1px solid color-mix(in srgb,var(--c) 28%,var(--surface))}
.tag{display:inline-flex;font-size:12px;font-weight:600;background:var(--surface-2);color:#525a6e;padding:4px 10px;border-radius:8px}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:7px}

/* ---------- CARDS / KPI ---------- */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow);margin-bottom:20px}
.card-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.card-head h2,.card h2{font-size:16px}
.card h3{font-size:14px;margin-bottom:12px}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:20px}
.kpi{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow)}
.kpi-label{font-size:12.5px;color:var(--muted);font-weight:600}
.kpi-num{font-family:Sora;font-size:30px;font-weight:700;margin-top:6px}
.kpi-warn .kpi-num{color:var(--warn)}

/* ---------- PERIOD CARDS ---------- */
.pcards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:20px}
.pcard{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow)}
.pcard-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:14px}
.pcard-title{font-family:Sora;font-weight:600;font-size:15px}
.pcard-sub{font-size:12px;color:var(--muted);margin-top:2px}
.pcard-num{font-family:Sora;font-size:30px;font-weight:700;line-height:1}
.pcard-num span{font-size:12px;font-weight:600;color:var(--muted);margin-left:4px}
.pbar{height:8px;background:var(--surface-2);border-radius:999px;overflow:hidden;margin-bottom:10px}
.pbar span{display:block;height:100%;background:linear-gradient(90deg,#13b981,var(--primary));border-radius:999px;transition:width .5s}
.pcard-foot{display:flex;align-items:center;gap:14px;font-size:12.5px;font-weight:600}
.pdot{display:inline-flex;align-items:center;gap:6px;color:var(--muted)}
.pdot::before{content:"";width:8px;height:8px;border-radius:50%}
.pdot.done::before{background:var(--primary)}
.pdot.active::before{background:var(--track)}
.ppct{margin-left:auto;color:var(--primary-d);font-weight:700}

/* period toggle */
.seg-toggle{display:inline-flex;background:var(--surface-2);border-radius:10px;padding:3px;gap:2px}
.seg-toggle a{padding:6px 14px;border-radius:8px;font-size:13px;font-weight:600;color:var(--muted)}
.seg-toggle a.on{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgba(16,24,40,.08)}
.period-summary{display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.ps-num{display:flex;flex-direction:column;min-width:130px}
.ps-big{font-family:Sora;font-size:42px;font-weight:700;line-height:1}
.ps-unit{font-size:13px;font-weight:600;color:var(--ink);margin-top:4px}
.ps-sub{font-size:12px;color:var(--muted)}
.ps-bars{flex:1;min-width:220px}
.ps-legend{display:flex;align-items:center;gap:16px;margin-top:10px;font-size:13px;font-weight:600;flex-wrap:wrap}
.pdot{display:inline-flex;align-items:center;gap:6px;color:var(--muted)}
.pdot::before{content:"";width:9px;height:9px;border-radius:50%}
.pdot.done::before{background:var(--primary)}
.pdot.active::before{background:var(--track)}
.pdot.cancel::before{background:#94a3b8}
.pbar{height:9px;background:var(--surface-2);border-radius:999px;overflow:hidden}
.pbar span{display:block;height:100%;background:linear-gradient(90deg,#13b981,var(--primary));border-radius:999px;transition:width .5s}

/* URGENT */
.kpi-urgent{border-color:var(--border);background:linear-gradient(180deg,var(--surface),var(--danger-soft))}
.kpi-urgent .kpi-num{color:var(--danger)}
.badge-urgent{display:inline-block;background:var(--danger);color:#fff;font-size:10px;font-weight:800;letter-spacing:.04em;padding:2px 7px;border-radius:6px;vertical-align:middle}
.row-urgent{background:var(--danger-soft) !important;box-shadow:inset 3px 0 0 var(--danger)}
.row-urgent:hover{background:var(--danger-soft) !important}
.urgent-banner{background:var(--danger-soft);color:#a11833;border:1px solid var(--border);border-left:4px solid var(--danger);padding:11px 14px;border-radius:10px;margin-bottom:16px;font-size:13.5px}
.detail-head.is-urgent{border-left:4px solid var(--danger)}
.urgent-toggle{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--surface-2);border:1px solid var(--border);border-radius:10px;padding:12px 14px;margin-bottom:16px;cursor:pointer}
.urgent-toggle input{width:auto;margin:0}
.urgent-toggle.on{background:var(--danger-soft);border-color:var(--border)}
.urgent-flag{font-weight:700;color:var(--danger);font-size:13px}
.urgent-desc{font-size:12.5px;color:var(--muted)}

/* CANCELLED / Tidak Dilanjutkan */
.cancel-banner{background:var(--surface-2);color:#475569;border:1px solid var(--border);border-left:4px solid #94a3b8;padding:11px 14px;border-radius:10px;margin-bottom:16px;font-size:13.5px}
.detail-head.is-cancel{border-left:4px solid #94a3b8}
.detail-head.is-cancel .item-title{color:#64748b}
.cancel-state{background:var(--surface-2);border:1px dashed var(--border);color:#64748b;border-radius:10px;padding:16px;text-align:center;margin-bottom:16px;font-weight:600}
.row-cancel{opacity:.66}
.row-cancel .mono{text-decoration:line-through;text-decoration-color:var(--border)}
.btn-ghost-danger{background:var(--surface);border-color:var(--border);color:#94a3b8;margin-left:auto}
.btn-ghost-danger:hover{border-color:var(--border);color:#64748b;background:var(--surface-2)}

/* ---------- TREND CHART ---------- */
.chart-wrap{width:100%;overflow:hidden}
.trend-chart{width:100%;height:auto;display:block}

/* ---------- HORIZONTAL BAR RANKING ---------- */
.grid-cards-2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.grid-cards-2 .card{margin-bottom:0}
.hbars{display:flex;flex-direction:column;gap:11px}
.hbar{display:grid;grid-template-columns:130px 1fr auto;align-items:center;gap:12px}
.hbar-label{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hbar-track{height:10px;background:var(--surface-2);border-radius:999px;overflow:hidden}
.hbar-fill{display:block;height:100%;background:linear-gradient(90deg,#13b981,var(--primary));border-radius:999px;min-width:4px;transition:width .4s}
.hbar-val{font-weight:700;font-size:14px;text-align:right;white-space:nowrap}
.hbar-done{display:block;font-weight:500;font-size:11px;color:var(--muted)}
@media(max-width:760px){.grid-cards-2{grid-template-columns:1fr}.hbar{grid-template-columns:96px 1fr auto}}

/* ---------- FUNNEL ---------- */
.funnel{display:flex;flex-direction:column;gap:9px}
.funnel-row{display:grid;grid-template-columns:170px 1fr 40px;align-items:center;gap:12px}
.funnel-row:hover .funnel-name{color:var(--ink)}
.funnel-name{font-size:13px;font-weight:500;color:var(--muted);display:flex;align-items:center}
.funnel-bar{height:9px;background:var(--surface-2);border-radius:999px;overflow:hidden}
.funnel-bar span{display:block;height:100%;border-radius:999px;min-width:3px;transition:width .4s}
.funnel-count{text-align:right;font-weight:700;font-size:13px}

/* ---------- TABLE ---------- */
.table-wrap{overflow-x:auto;margin:-4px}
table{width:100%;border-collapse:collapse;font-size:13.5px}
thead th{text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:700;padding:10px 12px;border-bottom:1px solid var(--border)}
tbody td{padding:12px;border-bottom:1px solid var(--border-2);vertical-align:middle}
tbody tr{cursor:pointer;transition:background .12s}
tbody tr:hover{background:var(--surface-2)}
tbody tr:last-child td{border-bottom:0}
.row-go{color:#c3c8d4;font-size:18px;text-align:right}
.overdue{color:var(--danger);font-weight:600}
.empty{text-align:center;color:var(--muted);padding:34px}

/* mini flow segments in list */
.mini-flow{display:flex;gap:2px;margin-bottom:6px}
.seg{height:5px;width:13px;border-radius:2px;background:var(--track)}
.seg.fill{background:var(--c)}

/* ---------- TOOLBAR / FILTERS ---------- */
.toolbar{display:flex;justify-content:space-between;gap:12px;margin-bottom:16px;align-items:center;flex-wrap:wrap}
.search{display:flex;gap:8px;flex:1;max-width:480px}
.search input{flex:1}
.filters{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:18px}
.pill{font-size:12.5px;font-weight:600;padding:6px 13px;border-radius:999px;background:var(--surface);border:1px solid var(--border);color:var(--muted)}
.pill:hover{border-color:var(--border)}
.pill.on{background:var(--c,var(--ink));border-color:var(--c,var(--ink));color:#fff}

/* list bar + per-page + pagination */
.list-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px;flex-wrap:wrap}
.list-count{font-size:13px;color:var(--muted)}
.per-page{font-size:12.5px;color:var(--muted);display:flex;align-items:center;gap:6px}
.per-opt{display:inline-flex;min-width:30px;justify-content:center;padding:4px 9px;border:1px solid var(--border);border-radius:8px;font-weight:600;color:var(--muted)}
.per-opt:hover{border-color:var(--border)}
.per-opt.on{background:var(--ink);border-color:var(--ink);color:var(--surface)}
.pagination{display:flex;align-items:center;gap:6px;justify-content:center;flex-wrap:wrap;margin-top:4px}
.pg{display:inline-flex;min-width:38px;height:38px;align-items:center;justify-content:center;padding:0 12px;border:1px solid var(--border);border-radius:9px;font-weight:600;font-size:13.5px;background:var(--surface);color:var(--ink)}
.pg:hover{background:var(--surface-2);border-color:var(--border)}
.pg.on{background:var(--primary);border-color:var(--primary);color:#fff}
.pg.disabled{opacity:.45;pointer-events:none}
.pg-gap{padding:0 4px;color:var(--muted)}
@media(max-width:600px){.pg{min-width:34px;height:34px;padding:0 9px}}

/* bulk select + recycle bin */
.chk-cell{width:34px;text-align:center}
.chk-cell input{width:auto;cursor:pointer;width:17px;height:17px}
.bulk-bar{display:none;position:sticky;bottom:14px;z-index:25;align-items:center;gap:14px;background:var(--ink);color:var(--surface);border-radius:12px;padding:10px 16px;box-shadow:0 8px 30px rgba(0,0,0,.25);margin:0 auto 14px;width:fit-content}
.bulk-bar.show{display:flex}
.bulk-count{font-weight:600;font-size:13.5px}
.bulk-clear{color:var(--muted);font-size:13px;font-weight:600}
.bulk-clear:hover{color:#fff}
.bin-note{background:var(--warn-soft);border:1px solid var(--border);border-left:4px solid var(--warn);color:#7a5b00;padding:12px 14px;border-radius:10px;margin-bottom:16px;font-size:13.5px}

/* Butuh Tindakan (worklist) */
.todo-card{border-top:3px solid var(--warn)}
.todo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.todo-h{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;padding-bottom:8px;margin-bottom:6px;border-bottom:1px solid var(--border)}
.todo-h-red{color:#dc2626}.todo-h-orange{color:#d97706}.todo-h-grey{color:#64748b}
.todo-item{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;margin-bottom:4px;transition:background .15s}
.todo-item:hover{background:var(--surface-2)}
.todo-item-t{font-size:13px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.todo-item-m{font-size:11.5px;color:var(--muted);white-space:nowrap}
.todo-item-m.todo-late{color:#dc2626;font-weight:600}
.todo-empty{font-size:12.5px;color:var(--muted);padding:8px 10px}
@media(max-width:760px){.todo-grid{grid-template-columns:1fr;gap:12px}}

/* ---------- LACAK PAKET ---------- */
.track-controls{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.track-controls label{margin:0;font-size:13px;color:var(--muted)}
.track-controls select{width:auto;min-width:150px}
.trk-loading,.trk-error,.trk-advanced,.trk-cached{padding:12px 14px;border-radius:10px;font-size:13.5px;margin-top:14px}
.trk-loading{background:var(--surface-2);color:var(--muted)}
.trk-error{background:var(--danger-soft);color:#a11833;border:1px solid var(--border)}
.trk-advanced{background:var(--primary-soft);color:#0a7d50;border:1px solid #b8ead0}
.trk-cached{background:transparent;color:var(--muted);font-size:12px;padding:8px 0 0}
.trk-status{font-weight:700;font-size:15px;margin:18px 0 4px}
.trk-status.ok{color:var(--primary-d)}

/* progress line pengiriman (4 fase) */
.ship-track{position:relative;display:flex;justify-content:space-between;margin:22px 0 6px;padding:0 4px}
.ship-line{position:absolute;top:11px;left:24px;right:24px;height:4px;background:var(--surface-2);border-radius:999px;overflow:hidden}
.ship-line>span{display:block;height:100%;background:linear-gradient(90deg,#13b981,var(--primary));border-radius:999px;transition:width .7s ease}
.ship-node{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:7px;flex:1}
.ship-dot{width:24px;height:24px;border-radius:50%;background:var(--surface);border:3px solid #d3d8e0;display:flex;align-items:center;justify-content:center;font-size:12px;color:#fff;font-weight:800}
.ship-node.done .ship-dot{background:var(--primary);border-color:var(--primary)}
.ship-node.now .ship-dot{border-color:var(--primary);background:var(--primary);box-shadow:0 0 0 5px rgba(14,166,114,.18)}
.ship-lbl{font-size:11.5px;font-weight:600;color:var(--muted)}
.ship-node.done .ship-lbl,.ship-node.now .ship-lbl{color:var(--ink)}
/* animasi "sedang dikirim" — denyut di node aktif kalau belum delivered */
.ship-track:not(.done) .ship-node.now .ship-dot{animation:shipPulse 1.3s infinite}
@keyframes shipPulse{0%{box-shadow:0 0 0 0 rgba(14,166,114,.35)}70%{box-shadow:0 0 0 9px rgba(14,166,114,0)}100%{box-shadow:0 0 0 0 rgba(14,166,114,0)}}
.ship-track.done .ship-line>span{background:var(--primary)}

/* timeline riwayat */
.trk-timeline{margin-top:14px;border-left:2px solid var(--border);padding-left:0}
.trk-item{position:relative;padding:0 0 16px 22px}
.trk-item:last-child{padding-bottom:0}
.trk-dot{position:absolute;left:-7px;top:3px;width:12px;height:12px;border-radius:50%;background:var(--track);border:2px solid #fff}
.trk-item.first .trk-dot{background:var(--primary);box-shadow:0 0 0 3px rgba(14,166,114,.15)}
.trk-desc{font-size:13.5px;color:var(--ink);line-height:1.45}
.trk-item.first .trk-desc{font-weight:600}
.trk-meta{font-size:12px;color:var(--muted);margin-top:2px}

/* ---------- FORM ---------- */
.form-section{font-family:Sora;font-weight:600;font-size:13px;color:var(--primary-d);text-transform:uppercase;letter-spacing:.04em;margin:22px 0 12px;padding-bottom:7px;border-bottom:1px solid var(--border-2)}
.form-section:first-child{margin-top:0}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.grid-2 label{display:block;margin-bottom:6px}
.col-span{grid-column:1/-1}
.form-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:24px}
#newUser{display:none}
#newUser.show{display:block}

/* ---------- DETAIL + STEPPER ---------- */
.back{display:inline-block;color:var(--muted);font-weight:600;font-size:13px;margin-bottom:14px}
.back:hover{color:var(--ink)}
.detail-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start}
.item-title{font-size:20px;margin:6px 0 12px;line-height:1.3}
.meta-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.detail-actions{display:flex;gap:8px;flex:none}

.stepper{position:relative;display:flex;justify-content:space-between;margin:30px 4px 8px}
.stepper-line{position:absolute;top:15px;left:5%;right:5%;height:3px;background:var(--track);border-radius:2px}
.stepper-line span{display:block;height:100%;background:var(--primary);border-radius:2px;transition:width .5s;position:relative}
.step{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:8px;flex:1;text-align:center}
.step-dot{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:13px;background:var(--surface);border:3px solid #e7e9ef;color:#aeb4c4}
.step-label{font-size:11.5px;font-weight:600;color:var(--muted);max-width:78px}
.step-done .step-dot{background:var(--c);border-color:var(--c);color:#fff}
.step-done .step-label{color:var(--ink)}
.step-current .step-dot{border-color:var(--c);color:var(--c);box-shadow:0 0 0 4px color-mix(in srgb,var(--c) 18%,var(--surface))}
.step-current .step-label{color:var(--ink)}
.stage-quick{display:flex;justify-content:space-between;gap:10px;margin-top:26px;flex-wrap:wrap}
.done-tag{margin-left:auto;color:var(--primary-d);font-weight:700;align-self:center}

.grid-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.grid-cards .card{margin-bottom:0}
.kv{display:grid;grid-template-columns:auto 1fr;gap:8px 14px;margin:0;font-size:13.5px}
.kv dt{color:var(--muted);font-weight:600}
.kv dd{margin:0;text-align:right;word-break:break-word}
.pre{white-space:pre-wrap;color:#3a4150;font-size:13.5px}
.audit{font-size:12.5px;color:var(--muted);padding:4px 2px}
.flow-legend{display:flex;flex-wrap:wrap;gap:8px}

/* ---------- IMAGES ---------- */
.export-row{display:flex;gap:8px;margin:-6px 0 16px;flex-wrap:wrap}
.thumb-cell{width:52px}
.thumb-wrap{position:relative;display:inline-block}
.img-thumb{width:42px;height:42px;object-fit:cover;border-radius:8px;border:1px solid var(--border);display:block}
.thumb-count{position:absolute;right:-6px;bottom:-6px;background:var(--ink);color:var(--surface);font-size:10px;font-weight:700;min-width:17px;height:17px;border-radius:9px;display:grid;place-items:center;padding:0 4px;border:2px solid #fff}
.no-thumb{color:#cfd3dc}

/* detail gallery */
.detail-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px}
.gphoto{display:block;border-radius:10px;overflow:hidden;border:1px solid var(--border);aspect-ratio:1/1}
.gphoto img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .2s}
.gphoto:hover img{transform:scale(1.06)}

/* edit form image grid */
.img-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px;margin-bottom:12px}
.img-cell{position:relative;display:block;cursor:pointer}
.img-cell img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:10px;border:1px solid var(--border);display:block}
.img-cell:has(input:checked) img{outline:2px solid var(--danger);opacity:.5}
.img-del{position:absolute;left:6px;bottom:6px;display:flex;align-items:center;gap:4px;background:rgba(255,255,255,.92);border-radius:7px;padding:2px 7px;font-size:11px;font-weight:600;color:var(--danger)}
.img-del input{width:auto;margin:0}
.hint{display:block;font-size:12px;color:var(--muted);margin-top:6px}
.mig-list{margin:0 0 14px;padding-left:18px;font-size:13.5px;color:#3a4150}
.mig-list li{margin-bottom:4px}

/* storage stats */
.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:6px 0 14px}
.stat{background:var(--surface-2);border:1px solid var(--border-2);border-radius:12px;padding:14px}
.stat-n{display:block;font-family:Sora;font-size:22px;font-weight:700}
.stat-l{display:block;font-size:12px;color:var(--muted);margin-top:3px}
@media(max-width:760px){.stat-row{grid-template-columns:1fr 1fr}}

/* ---------- ICONS (CSS, no deps) ---------- */
i[data-i]{width:17px;height:17px;display:inline-block;flex:none;background:currentColor;-webkit-mask:center/contain no-repeat;mask:center/contain no-repeat;opacity:.9}
i[data-i=grid]{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2'%3E%3Crect x='3' y='3' width='7' height='7' rx='1'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1'/%3E%3C/svg%3E")}
i[data-i=list]{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2'%3E%3Cline x1='8' y1='6' x2='21' y2='6'/%3E%3Cline x1='8' y1='12' x2='21' y2='12'/%3E%3Cline x1='8' y1='18' x2='21' y2='18'/%3E%3Cline x1='3' y1='6' x2='3.01' y2='6'/%3E%3Cline x1='3' y1='12' x2='3.01' y2='12'/%3E%3Cline x1='3' y1='18' x2='3.01' y2='18'/%3E%3C/svg%3E")}
i[data-i=clock]{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpolyline points='12 7 12 12 15 14'/%3E%3C/svg%3E")}
i[data-i=users]{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87'/%3E%3C/svg%3E")}
i[data-i=cog]{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-2.82 1.17V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 8 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.6 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 8.6L4.27 8.5a2 2 0 1 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 6.6 1.65 1.65 0 0 0 10 5.09V5a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 2.82 1.17l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9c.36.14.62.46.6.85V10a2 2 0 0 1 0 4h-.09c-.39 0-.71.26-.85.6z'/%3E%3C/svg%3E")}
i[data-i=chart]{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2'%3E%3Cline x1='18' y1='20' x2='18' y2='10'/%3E%3Cline x1='12' y1='20' x2='12' y2='4'/%3E%3Cline x1='6' y1='20' x2='6' y2='14'/%3E%3C/svg%3E")}
i[data-i=trash]{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2'%3E%3Cpolyline points='3 6 5 6 21 6'/%3E%3Cpath d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3C/svg%3E")}

/* ---------- RESPONSIVE ---------- */
@media(max-width:980px){
  .kpis{grid-template-columns:1fr 1fr}
  .grid-cards{grid-template-columns:1fr}
}
@media(max-width:760px){
  .sidebar{transform:translateX(-100%);transition:transform .25s;box-shadow:0 0 40px rgba(0,0,0,.3)}
  body.nav-open .sidebar{transform:none}
  body.nav-open .scrim{display:block;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:35}
  .content{margin-left:0}
  .menu-toggle{display:grid;place-items:center;position:fixed;top:11px;left:12px;z-index:45;width:40px;height:40px;border:1px solid var(--border);background:var(--surface);border-radius:10px;font-size:18px;cursor:pointer}
  .topbar{padding-left:62px}
  .topbar h1{font-size:16px}
  .hello{display:none}
  .page{padding:16px}
  .grid-2{grid-template-columns:1fr}
  .kpis{grid-template-columns:1fr 1fr;gap:12px}
  .kpi-num{font-size:24px}
  .pcards{grid-template-columns:1fr}
  .funnel-row{grid-template-columns:120px 1fr 32px}
  .stepper{overflow-x:auto;gap:4px;padding-bottom:14px}
  .step{min-width:64px}
  .detail-head{flex-direction:column}
  .step-label{font-size:10px}

  /* ringkasan order + toggle periode */
  .card-head{flex-wrap:wrap;gap:10px}
  .seg-toggle{width:100%;display:flex}
  .seg-toggle a{flex:1;text-align:center;padding:8px 6px;font-size:12.5px}
  .period-summary{gap:16px}
  .ps-num{min-width:0;width:100%;flex-direction:row;align-items:baseline;gap:8px;flex-wrap:wrap}
  .ps-big{font-size:34px}
  .ps-bars{min-width:0;width:100%}
  .ps-legend{gap:12px}

  /* list bar + per-page + pagination */
  .list-bar{flex-direction:column;align-items:flex-start;gap:8px}
  .per-page{flex-wrap:wrap}
  .pagination{gap:5px}
  .pg{min-width:40px;height:40px;font-size:14px}
}

/* ============ ANIMASI & MICRO-INTERAKSI ============ */
@media (prefers-reduced-motion: no-preference){
  @keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
  @keyframes popIn{0%{opacity:0;transform:scale(.95)}100%{opacity:1;transform:none}}
  @keyframes slideDown{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
  @keyframes slideInLeft{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
  @keyframes barGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}

  /* entrance konten halaman (staggered) */
  .page > *{animation:fadeUp .45s cubic-bezier(.22,.61,.36,1) both}
  .page > *:nth-child(1){animation-delay:.03s}
  .page > *:nth-child(2){animation-delay:.08s}
  .page > *:nth-child(3){animation-delay:.13s}
  .page > *:nth-child(4){animation-delay:.18s}
  .page > *:nth-child(5){animation-delay:.23s}
  .page > *:nth-child(6){animation-delay:.28s}
  .page > *:nth-child(7){animation-delay:.33s}
  .page > *:nth-child(n+8){animation-delay:.36s}

  /* topbar + sidebar */
  .topbar{animation:slideDown .5s ease both}
  .nav a{animation:slideInLeft .4s ease both}
  .nav a:nth-child(1){animation-delay:.04s}.nav a:nth-child(2){animation-delay:.08s}
  .nav a:nth-child(3){animation-delay:.12s}.nav a:nth-child(4){animation-delay:.16s}
  .nav a:nth-child(5){animation-delay:.2s}.nav a:nth-child(6){animation-delay:.24s}
  .nav a:nth-child(7){animation-delay:.28s}.nav a:nth-child(n+8){animation-delay:.3s}

  /* KPI pop-in */
  .kpi{animation:popIn .5s cubic-bezier(.34,1.3,.64,1) both}
  .kpi:nth-child(1){animation-delay:.06s}.kpi:nth-child(2){animation-delay:.13s}
  .kpi:nth-child(3){animation-delay:.2s}.kpi:nth-child(4){animation-delay:.27s}

  /* alert & bulk bar */
  .alert{animation:slideDown .4s ease both}
  .bulk-bar.show{animation:slideDown .35s cubic-bezier(.34,1.3,.64,1) both}

  /* bar yang "tumbuh" */
  .funnel-bar>span,.hbar-fill>span,.hbar-fill{transform-origin:left;animation:barGrow .8s cubic-bezier(.22,.61,.36,1) both}

  /* hover lift kartu interaktif */
  .kpi,.funnel-row{transition:transform .18s ease, box-shadow .18s ease}
  .kpi:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(16,24,40,.08)}

  /* tombol & elemen klik */
  .btn{transition:transform .09s ease, box-shadow .18s ease, background .15s, border-color .15s, color .15s}
  .btn:hover{transform:translateY(-1px)}
  .btn:active{transform:translateY(0) scale(.97)}
  .pill,.chip,.per-opt,.pg,.seg-toggle a{transition:all .16s ease}
  .per-opt:hover,.pg:hover{transform:translateY(-1px)}

  /* baris tabel & progress */
  tbody tr{transition:background .16s ease, box-shadow .16s ease}
  .thumb-wrap img{transition:transform .25s ease}
  tbody tr:hover .thumb-wrap img{transform:scale(1.08)}
  .stepper-line>span,.pbar span,.ship-line>span{transition:width .8s cubic-bezier(.22,.61,.36,1)}
  .step-dot,.ship-dot{transition:background .3s ease, border-color .3s ease, box-shadow .3s ease}

  /* spinner loading lacak */
  .trk-loading{position:relative;padding-left:38px}
  .trk-loading::before{content:"";position:absolute;left:14px;top:50%;width:14px;height:14px;margin-top:-7px;border:2px solid var(--border);border-top-color:var(--primary);border-radius:50%;animation:spin .7s linear infinite}
  @keyframes spin{to{transform:rotate(360deg)}}

  /* timeline item muncul berurutan */
  .trk-item{animation:fadeUp .4s ease both}
  .trk-item:nth-child(1){animation-delay:.02s}.trk-item:nth-child(2){animation-delay:.07s}
  .trk-item:nth-child(3){animation-delay:.12s}.trk-item:nth-child(4){animation-delay:.17s}
  .trk-item:nth-child(n+5){animation-delay:.2s}

  /* chart tren: bar tumbuh dari bawah (sweep kiri→kanan) */
  .trend-chart rect.bar{transform-box:fill-box;transform-origin:center bottom;animation:barRise .6s cubic-bezier(.22,.61,.36,1) both}
  @keyframes barRise{from{transform:scaleY(0)}to{transform:scaleY(1)}}
  .trend-chart text{animation:fadeIn .5s ease both;animation-delay:.45s}
  @keyframes fadeIn{from{opacity:0}to{opacity:1}}

  /* garis flow Status PR — cahaya berjalan sepanjang garis saat PR berjalan */
  .stepper-line.active>span{
    background:linear-gradient(90deg,#0c9568 0%,#0ea672 38%,#7bedb4 50%,#0ea672 62%,#0c9568 100%);
    background-size:200% 100%;
    animation:lineFlow 1.4s linear infinite;
  }
  @keyframes lineFlow{0%{background-position:100% 0}100%{background-position:-100% 0}}
  .stepper-line.active>span::after{content:"";position:absolute;right:-4px;top:50%;width:11px;height:11px;margin-top:-5.5px;border-radius:50%;background:var(--primary);animation:dotPulse 1.5s ease-in-out infinite}
  @keyframes dotPulse{0%{box-shadow:0 0 0 0 rgba(14,166,114,.55)}70%{box-shadow:0 0 0 9px rgba(14,166,114,0)}100%{box-shadow:0 0 0 0 rgba(14,166,114,0)}}

  /* garis pengiriman juga mengalir saat paket masih jalan */
  .ship-track:not(.done) .ship-line>span{
    background:linear-gradient(90deg,#0c9568 0%,#0ea672 38%,#7bedb4 50%,#0ea672 62%,#0c9568 100%);
    background-size:200% 100%;
    animation:lineFlow 1.4s linear infinite;
  }
}

/* hormati pengguna yang matikan animasi (aksesibilitas + hemat baterai) */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
}

/* editor alur Status PR */
.stage-editor{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
.stage-row{display:flex;align-items:center;gap:10px}
.stage-num{width:24px;height:24px;flex:none;display:flex;align-items:center;justify-content:center;background:var(--surface-2);border-radius:6px;font-size:12px;font-weight:700;color:var(--muted)}
.stage-color{width:42px;height:38px;flex:none;padding:2px;border:1px solid var(--border);border-radius:8px;cursor:pointer;background:var(--surface)}
.stage-label{flex:1;margin:0}
.stage-del{flex:none;width:32px;height:32px;border:1px solid var(--border);background:var(--surface);border-radius:8px;color:#94a3b8;cursor:pointer;font-size:13px;transition:all .15s}
.stage-del:hover{border-color:var(--border);color:#dc2626;background:var(--danger-soft)}

/* editor multi-item (form) */
.item-editor{display:flex;flex-direction:column;gap:8px;margin-bottom:10px}
.item-row{display:flex;align-items:flex-start;gap:10px}
.item-num{width:24px;height:38px;flex:none;display:flex;align-items:center;justify-content:center;background:var(--surface-2);border-radius:6px;font-size:12px;font-weight:700;color:var(--muted)}
.item-name{flex:1;margin:0;min-height:38px;resize:vertical}
.item-qty{width:110px;flex:none;margin:0}
.item-del{flex:none;width:32px;height:38px;border:1px solid var(--border);background:var(--surface);border-radius:8px;color:#94a3b8;cursor:pointer;font-size:13px;transition:all .15s}
.item-del:hover{border-color:var(--border);color:#dc2626;background:var(--danger-soft)}

/* tabel daftar item (detail) */
.items-table{width:100%;border-collapse:collapse}
.items-table th{text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);padding:8px 10px;border-bottom:1px solid var(--border)}
.items-table td{padding:9px 10px;border-bottom:1px solid var(--border);font-size:13.5px;vertical-align:top}
.items-table tr:last-child td{border-bottom:none}
.items-table .it-no{color:var(--muted);font-weight:600}
.items-table .it-qty{font-weight:600;white-space:nowrap}
.items-table tbody tr:hover{background:var(--surface-2)}

/* badge multi-item */
.multi-badge{display:inline-block;background:var(--info-soft);color:#4f46e5;font-size:11px;font-weight:700;padding:1px 7px;border-radius:999px;margin-left:4px;vertical-align:middle}
.tag-multi{background:var(--info-soft);color:#4f46e5;font-weight:600}

/* ====== DETAIL PR v2: bar persen modern + accordion item ====== */
.mbar{display:flex;align-items:center;gap:10px}
.mbar-track{flex:1;height:10px;background:var(--surface-2);border-radius:999px;overflow:hidden}
.mbar-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,#0c9568,#13b981,#34d399);background-size:200% 100%;animation:lineFlow 1.6s linear infinite;transition:width .8s cubic-bezier(.22,.61,.36,1)}
.mbar-done .mbar-fill{background:#22c55e;animation:none}
.mbar-cancel .mbar-fill{background:var(--track);animation:none}
.mbar-pct{font-weight:800;font-size:14px;min-width:44px;text-align:right;color:var(--ink)}
.mbar-run .mbar-pct{color:var(--primary-d)}
@media (prefers-reduced-motion: reduce){.mbar-fill{animation:none}}

.dh-main{flex:1}
.dh-title{font-size:18px;margin:4px 0 8px}
.dh-progress{display:flex;align-items:center;gap:12px;max-width:460px;margin-top:6px}
.dh-progress .mbar{flex:1}
.dh-prog-label{font-size:11.5px;color:var(--muted);white-space:nowrap}

/* tabel item bisa diklik */
.items-clickable .item-row-main{cursor:pointer;transition:background .15s}
.items-clickable .item-row-main:hover{background:var(--surface-2)}
.items-clickable .item-row-main.open{background:var(--primary-soft)}
.items-clickable .item-row-main td{border-bottom:1px solid var(--border)}
.it-chev{text-align:center}
.chev{display:inline-block;transition:transform .2s;color:#9aa4b2;font-size:18px;font-weight:700}
.item-row-main.open .chev{transform:rotate(90deg);color:var(--primary)}
.chip-sm{font-size:11px;padding:2px 9px}

/* baris detail accordion */
.item-detail-row{display:none}
.item-detail-row.open{display:table-row}
.item-detail-row>td{padding:0!important;background:var(--surface-2)}
.item-detail{padding:18px 16px}
.item-detail-bar{max-width:520px;margin-bottom:6px}

/* flow steps kompak */
.flow-steps{display:flex;flex-wrap:wrap;gap:7px;margin:16px 0}
.fstep{display:flex;align-items:center;gap:7px;padding:5px 12px 5px 6px;border-radius:999px;background:var(--surface-2);font-size:12px;color:#64748b}
.fstep-dot{width:19px;height:19px;flex:none;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;background:var(--track);color:#fff}
.fstep-done{background:var(--primary-soft);color:#0a7d50}
.fstep-done .fstep-dot{background:var(--c)}
.fstep-current{background:var(--surface);color:var(--ink);font-weight:700;box-shadow:0 0 0 2px var(--c) inset}
.fstep-current .fstep-dot{background:var(--c);box-shadow:0 0 0 4px color-mix(in srgb, var(--c) 22%, transparent)}
.item-detail-meta{margin:14px 0}

/* key-value horizontal */
.kv-row{display:grid;grid-template-columns:max-content 1fr max-content 1fr;gap:9px 16px;align-items:baseline;margin:0}
.kv-row dt{color:var(--muted);font-size:12px;font-weight:600}
.kv-row dd{font-size:13.5px;margin:0}
@media(max-width:620px){.kv-row{grid-template-columns:max-content 1fr}}

/* tombol tambah item */
.btn-add-item{margin-top:4px;border:1.5px dashed var(--border);background:var(--surface-2);color:var(--primary-d);font-weight:600}
.btn-add-item:hover{border-color:var(--primary);background:var(--primary-soft)}

/* editor item jadi kartu */
.item-card{border:1px solid var(--border);border-radius:12px;padding:14px;background:var(--surface-2);margin-bottom:10px}
.item-card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.item-card .item-num{width:26px;height:26px;display:flex;align-items:center;justify-content:center;background:var(--primary);color:#fff;border-radius:7px;font-size:12px;font-weight:700}
.item-card .item-name{width:100%;margin-bottom:10px;resize:vertical}
.item-fields{display:grid;grid-template-columns:90px 1fr 1fr 1fr;gap:10px}
.item-fields label{font-size:11.5px;color:var(--muted);margin-bottom:3px}
.item-fields input{width:100%}
.item-del{border:1px solid var(--border);background:var(--surface);border-radius:7px;color:#94a3b8;cursor:pointer;font-size:12px;padding:4px 10px;transition:all .15s}
.item-del:hover{border-color:var(--border);color:#dc2626;background:var(--danger-soft)}
@media(max-width:680px){.item-fields{grid-template-columns:1fr 1fr}}

/* badge role guest */
.badge-guest{background:var(--surface-2);color:#64748b}
.view-only-note{background:var(--surface-2);border:1px solid #dde3ea;color:#5b6675;padding:8px 12px;border-radius:8px;font-size:12.5px;display:inline-block;margin-bottom:12px}

/* ---- Workflow custom per item ---- */
.wf-toggle{margin-top:10px;padding-top:10px;border-top:1px dashed var(--border,var(--border))}
.wf-switch{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:#374151;cursor:pointer}
.wf-switch input{width:16px;height:16px;accent-color:var(--brand,#0ea672);cursor:pointer}
.item-wf{margin-top:10px;padding:12px;background:rgba(14,166,114,.05);border:1px solid rgba(14,166,114,.18);border-radius:10px}
.wf-sub{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--brand,#0ea672);margin:4px 0 8px}
.wf-badge{display:inline-block;font-size:11px;font-weight:700;padding:3px 10px;border-radius:999px;margin:2px 0 8px}
.wf-badge.wf-custom{background:rgba(14,166,114,.12);color:#0a7d56}
.wf-badge.wf-inherit{background:var(--surface-2);color:#64748b}

/* transisi halus saat update status via AJAX */
#itemsCard{transition:opacity .15s ease}
#itemsCard.ajax-busy{opacity:.55;pointer-events:none}

/* ===== Fokus Hari Ini (dashboard) ===== */
.focus-card .focus-chips{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 14px}
.focus-chip{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:999px;border:1.5px solid var(--border);background:var(--surface);color:#475569;font-size:13px;font-weight:600;text-decoration:none;transition:all .12s}
.focus-chip:hover{border-color:var(--c,#0ea672)}
.focus-chip.on{background:var(--c,#0ea672);border-color:var(--c,#0ea672);color:#fff}
.focus-chip .focus-cnt{display:inline-flex;min-width:20px;height:20px;padding:0 6px;align-items:center;justify-content:center;border-radius:999px;background:rgba(0,0,0,.08);font-size:11px;font-weight:700}
.focus-chip.on .focus-cnt{background:rgba(255,255,255,.28)}
.focus-list{display:flex;flex-direction:column;gap:2px}
.focus-row{display:flex;align-items:center;gap:12px;padding:10px 8px;border-radius:8px;text-decoration:none;color:inherit;border-bottom:1px solid var(--border)}
.focus-row:hover{background:var(--surface-2)}
.focus-row-t{flex:1;font-weight:600;font-size:14px;color:#1f2937}
.focus-row-due{font-size:12px;color:#94a3b8;white-space:nowrap}

/* ===== To-Do Hari Ini ===== */
.notif-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:var(--warn-soft);border:1px solid var(--border);color:#92400e;padding:10px 14px;border-radius:10px;margin-bottom:14px;font-size:14px}
.btn-sm{padding:5px 12px;font-size:13px}
.todo-add{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.todo-add .todo-add-title{flex:1;min-width:220px}
.todo-add input,.todo-add button{height:42px}
.todo-list{display:flex;flex-direction:column;gap:6px}
.todo-row{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid var(--border);border-radius:10px;background:var(--surface);transition:background .15s}
.todo-row.is-done{opacity:.55}
.todo-row.is-done .todo-title{text-decoration:line-through}
.todo-row.due-now{border-color:#f59e0b;background:var(--warn-soft);animation:duepulse 1.2s ease-in-out 3}
@keyframes duepulse{0%,100%{box-shadow:0 0 0 0 rgba(245,158,11,.0)}50%{box-shadow:0 0 0 4px rgba(245,158,11,.25)}}
.todo-check{width:26px;height:26px;border-radius:50%;border:2px solid var(--border);background:var(--surface);color:#0ea672;font-weight:800;cursor:pointer;flex-shrink:0;line-height:1}
.todo-row.is-done .todo-check{background:#0ea672;border-color:#0ea672;color:#fff}
.todo-main{flex:1}
.todo-title{font-weight:600;color:#1f2937;font-size:15px}
.todo-time{font-size:12px;color:#64748b;margin-top:2px}
.todo-time.passed{color:#dc2626;font-weight:700}
.todo-del{background:none;border:none;color:var(--muted);font-size:16px;cursor:pointer;padding:4px 8px}
.todo-del:hover{color:#dc2626}
.todo-check-f{margin:0}
/* toast alarm */
.toast-wrap{position:fixed;right:18px;bottom:18px;z-index:9999;display:flex;flex-direction:column;gap:10px}
.toast{background:#1f2937;color:#fff;padding:14px 18px;border-radius:12px;box-shadow:0 8px 30px rgba(0,0,0,.25);font-weight:600;max-width:320px;opacity:0;transform:translateX(30px);transition:all .3s;border-left:4px solid #f59e0b}
.toast.show{opacity:1;transform:translateX(0)}

/* ===== Dashboard v2 — compact & elegant ===== */
.kpi{display:flex;align-items:center;gap:14px}
.kpi-ic{width:42px;height:42px;flex-shrink:0;border-radius:12px;display:flex;align-items:center;justify-content:center;background:var(--primary-soft);color:var(--primary)}
.kpi-ic svg{width:21px;height:21px}
.kpi-ic.is-urgent{background:#fdECEF;color:var(--danger)}
.kpi .kpi-num{font-family:Sora,sans-serif;font-size:26px;font-weight:700;line-height:1.05}
.kpi .kpi-label{font-size:12.5px;color:var(--muted);font-weight:500;margin-top:2px}

.dash-2col{display:grid;grid-template-columns:1.35fr 1fr;gap:20px;margin-bottom:20px}
.dash-2col>.card{margin-bottom:0}
@media(max-width:900px){.dash-2col{grid-template-columns:1fr}}

.sec-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.sec-title{display:flex;align-items:center;gap:10px}
.sec-title h2{font-size:15px;font-weight:650;margin:0}
.sec-ic{width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.sec-ic svg{width:17px;height:17px}
.sec-ic.primary{background:var(--primary-soft);color:var(--primary)}
.sec-ic.warn{background:var(--warn-soft);color:var(--warn)}
.sec-sub{font-size:12px}
.lnk{font-size:12.5px;color:var(--primary);font-weight:600;text-decoration:none}
.lnk:hover{text-decoration:underline}
.pill-count{background:var(--warn-soft);color:var(--warn);font-weight:700;font-size:12px;min-width:22px;height:22px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;padding:0 7px}

/* daftar mewah */
.lux-list{display:flex;flex-direction:column}
.lux-row{display:flex;align-items:center;gap:12px;padding:11px 6px;text-decoration:none;color:inherit;border-bottom:1px solid var(--border-2)}
.lux-row:last-child{border-bottom:none}
.lux-row:hover{background:var(--surface-2)}
.lux-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.att-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.att-overdue{background:var(--danger)} .att-urgent{background:var(--warn)} .att-stuck{background:#94a3b8}
.lux-main{flex:1;min-width:0}
.lux-t{display:block;font-weight:600;font-size:13.8px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lux-sub{display:block;font-size:12px;color:var(--muted);margin-top:1px}
.lux-meta{font-size:12px;color:var(--muted);white-space:nowrap;font-weight:500}
.lux-meta.is-late{color:var(--danger);font-weight:600}
.lux-chev{color:var(--muted);font-size:18px}
.lux-empty{padding:24px 8px;text-align:center;color:var(--muted);font-size:13px}
.u-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--danger);vertical-align:middle}

/* chips fokus – refined */
.focus-chips{display:flex;flex-wrap:wrap;gap:7px;margin:2px 0 14px}
.focus-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:8px;border:1px solid var(--border);background:var(--surface);color:var(--muted);font-size:12.5px;font-weight:600;text-decoration:none;transition:.12s}
.focus-chip:hover{border-color:var(--c,var(--primary));color:var(--ink)}
.focus-chip.on{background:var(--c,var(--primary));border-color:var(--c,var(--primary));color:#fff}
.focus-chip .focus-cnt{display:inline-flex;min-width:18px;height:18px;padding:0 5px;align-items:center;justify-content:center;border-radius:999px;background:rgba(0,0,0,.07);font-size:10.5px;font-weight:700}
.focus-chip.on .focus-cnt{background:rgba(255,255,255,.25)}

.funnel-compact .funnel-row{padding:7px 0}
.ps-num{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.ps-num .ps-big{font-family:Sora,sans-serif;font-size:30px;font-weight:700;line-height:1}

/* ===== Purchase Requests — toolbar & filter (compact/elegant) ===== */
.pr-toolbar{display:flex;align-items:center;gap:14px;margin-bottom:14px;flex-wrap:wrap}
.pr-search{position:relative;flex:1;min-width:240px;display:flex;align-items:center}
.pr-search .pr-search-ic{position:absolute;left:14px;width:17px;height:17px;color:var(--muted);pointer-events:none}
.pr-search input{width:100%;height:44px;padding:0 96px 0 40px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);font-size:14px}
.pr-search input:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}
.pr-search-clear{position:absolute;right:74px;color:var(--muted);text-decoration:none;font-size:13px;width:20px;height:20px;display:flex;align-items:center;justify-content:center;border-radius:50%}
.pr-search-clear:hover{background:var(--border-2);color:var(--ink)}
.pr-search-go{position:absolute;right:6px;height:34px;padding:0 16px;border:none;background:var(--primary);color:#fff;border-radius:8px;font-weight:600;font-size:13px;cursor:pointer;transition:.15s}
.pr-search-go:hover{background:var(--primary-d)}
.pr-actions{display:flex;align-items:center;gap:8px}
.pr-actions .btn{height:44px}
.pr-actions .btn svg{width:16px;height:16px}
.pr-actions .btn-primary svg{width:15px;height:15px}
.btn-ghost{background:var(--surface);border:1px solid var(--border);color:var(--muted);font-weight:600}
.btn-ghost:hover{color:var(--ink);border-color:#d3d7e0;background:var(--surface-2)}

/* filter chips – selaras dashboard */
.filters{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:18px}
.filters .pill{display:inline-flex;align-items:center;padding:6px 13px;border-radius:8px;border:1px solid var(--border);background:var(--surface);color:var(--muted);font-size:12.8px;font-weight:600;text-decoration:none;transition:.12s}
.filters .pill:hover{border-color:var(--c,var(--primary));color:var(--ink)}
.filters .pill.on{background:var(--c,var(--ink));border-color:var(--c,var(--ink));color:#fff}
i[data-i=book]{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2'%3E%3Cpath d='M4 19.5A2.5 2.5 0 0 1 6.5 17H20'/%3E%3Cpath d='M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2'%3E%3Cpath d='M4 19.5A2.5 2.5 0 0 1 6.5 17H20'/%3E%3Cpath d='M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z'/%3E%3C/svg%3E")}

/* ===== Panduan (guide) ===== */
.guide{max-width:1000px}
.g-hero{background:linear-gradient(135deg,#0e1726,#16324a);color:#fff;border-radius:var(--radius);padding:34px 34px 28px;margin-bottom:20px;box-shadow:var(--shadow)}
.g-hero-badge{display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#7fe3bf;background:rgba(14,166,114,.16);padding:5px 11px;border-radius:999px;margin-bottom:14px}
.g-hero h1{font-family:Sora,sans-serif;font-size:30px;line-height:1.15;margin:0 0 12px;font-weight:700}
.g-hero h1 span{color:#4ade9f}
.g-hero p{color:#c4cbd8;max-width:680px;font-size:14.5px;line-height:1.65;margin:0 0 18px}
.g-toc{display:flex;flex-wrap:wrap;gap:8px}
.g-toc a{font-size:13px;font-weight:600;color:#e7ecf3;text-decoration:none;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);padding:7px 13px;border-radius:8px;transition:.15s}
.g-toc a:hover{background:rgba(255,255,255,.16)}
.g-sec{scroll-margin-top:80px}
.g-lead{color:var(--muted);font-size:14px;margin:-4px 0 18px;max-width:760px;line-height:1.6}

/* cara kerja flow */
.g-flow{display:flex;align-items:stretch;gap:6px;flex-wrap:wrap}
.g-flow-node{flex:1;min-width:170px;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:16px;text-align:center}
.g-flow-ic{width:44px;height:44px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;margin-bottom:10px;background:color-mix(in srgb,var(--c) 12%,var(--surface));color:var(--c)}
.g-flow-ic svg{width:22px;height:22px}
.g-flow-node b{display:block;font-size:14px;margin-bottom:4px}
.g-flow-node small{color:var(--muted);font-size:12px;line-height:1.5}
.g-flow-arrow{display:flex;align-items:center;color:var(--muted);flex:none}
.g-flow-arrow svg{width:20px;height:20px}
@media(max-width:720px){.g-flow-arrow{transform:rotate(90deg);width:100%;justify-content:center}}

/* stepper status */
.g-stepper{display:flex;align-items:center;flex-wrap:wrap;gap:8px 4px;padding:8px 0 4px}
.g-step{display:inline-flex;align-items:center;gap:8px;padding:7px 13px 7px 8px;border-radius:999px;background:color-mix(in srgb,var(--c) 9%,var(--surface));border:1px solid color-mix(in srgb,var(--c) 28%,var(--surface))}
.g-step-num{width:22px;height:22px;border-radius:50%;background:var(--c);color:#fff;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center}
.g-step-lbl{font-size:13px;font-weight:600;color:var(--ink)}
.g-step-arr{color:var(--muted);font-weight:700}
.g-branch{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:14px}
.g-step-cancel{background:var(--surface-2);border-color:var(--border)}
.g-note{margin-top:16px;background:var(--primary-soft);border:1px solid color-mix(in srgb,var(--primary) 22%,var(--surface));border-radius:10px;padding:12px 14px;font-size:13px;line-height:1.55;color:#0a6b49}
.g-note b{color:#075239}

/* diagram 1 PR banyak item */
.g-diagram{display:grid;grid-template-columns:300px 1fr;gap:22px;align-items:start}
@media(max-width:720px){.g-diagram{grid-template-columns:1fr}}
.g-pr-box{border:1px solid var(--border);border-radius:12px;overflow:hidden;box-shadow:var(--shadow)}
.g-pr-head{background:#0e1726;color:#fff;padding:12px 14px;font-weight:700;font-size:13.5px;display:flex;justify-content:space-between;align-items:center}
.g-pr-head .muted{color:#9fb0c2}
.g-pr-item{padding:12px 14px;border-top:1px solid var(--border-2);font-size:13px;display:flex;align-items:center;gap:9px}
.g-pr-item em{font-style:normal;font-weight:600}
.g-dot{width:9px;height:9px;border-radius:50%;flex:none}
.g-diagram-note p{font-size:13.5px;line-height:1.65;color:var(--ink);margin:0 0 12px}
.g-diagram-note b{color:var(--primary-d)}

/* role cards */
.g-roles{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:820px){.g-roles{grid-template-columns:1fr}}
.g-role{border:1px solid var(--border);border-radius:12px;padding:18px}
.g-role-h{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.g-role-h b{font-size:16px}
.g-role-ic{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center}
.g-role-ic svg{width:18px;height:18px}
.g-role-ic.admin{background:var(--info-soft);color:#4f46e5}
.g-role-ic.user{background:var(--primary-soft);color:var(--primary)}
.g-role-ic.guest{background:var(--surface-2);color:#64748b}
.g-role>.muted{font-size:12.5px;margin:0 0 10px}
.g-role ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.g-role li{position:relative;padding-left:22px;font-size:13px;color:var(--ink);line-height:1.4}
.g-role li:before{content:"";position:absolute;left:0;top:5px;width:14px;height:14px;background:var(--primary);-webkit-mask:center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");mask:center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E")}
.g-role li.no{color:var(--muted)}
.g-role li.no:before{background:var(--danger);-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E")}

/* fitur grid */
.g-features{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
@media(max-width:720px){.g-features{grid-template-columns:1fr}}
.g-feat{display:flex;gap:13px;padding:15px;border:1px solid var(--border);border-radius:12px;background:var(--surface)}
.g-feat-ic{width:38px;height:38px;flex:none;border-radius:10px;background:var(--primary-soft);color:var(--primary);display:flex;align-items:center;justify-content:center}
.g-feat-ic svg{width:19px;height:19px}
.g-feat b{font-size:14px}
.g-feat p{margin:3px 0 0;font-size:12.8px;color:var(--muted);line-height:1.55}

.g-tips{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:10px}
.g-tips li{font-size:13.5px;line-height:1.6;color:var(--ink)}
.g-tips b{color:var(--primary-d)}
.g-foot{text-align:center;font-size:12.5px;padding:8px 0 4px}

/* ===== Analitik (meeting-ready) ===== */
.an-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:16px}
.an-title{font-family:Sora,sans-serif;font-size:22px;font-weight:700;margin:0}
.an-sub{font-size:12.5px;color:var(--muted);margin:4px 0 0}
.an-head .filters{margin-bottom:0}
.an-kpis{margin-bottom:20px}
.an-card{margin-bottom:20px}
.an-card .sec-head{margin-bottom:12px}
.src-note{font-size:11.5px;color:var(--muted);white-space:nowrap}
.src-foot{margin-top:12px;padding-top:10px;border-top:1px dashed var(--border);font-size:11.5px;color:var(--muted);line-height:1.5}

/* switch grafik / peringkat */
.viz-toggle{display:inline-flex;background:var(--bg);border:1px solid var(--border);border-radius:9px;padding:3px;gap:2px;margin-bottom:14px}
.viz-toggle button{border:none;background:none;padding:5px 14px;border-radius:7px;font-size:12.5px;font-weight:600;color:var(--muted);cursor:pointer;transition:.12s}
.viz-toggle button.on{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgba(16,24,40,.08)}
.viz-pane[hidden]{display:none}

/* peringkat bernomor */
.viz-rank{list-style:none;margin:0;padding:0;counter-reset:none}
.viz-rank li{display:flex;align-items:center;gap:12px;padding:9px 4px;border-bottom:1px solid var(--border-2);font-size:13.5px}
.viz-rank li:last-child{border-bottom:none}
.vr-no{width:24px;height:24px;flex:none;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;background:var(--bg);color:var(--muted)}
.vr-no-1{background:var(--warn-soft);color:var(--warn-ink)}.vr-no-2{background:var(--surface-2);color:#4b5563}.vr-no-3{background:var(--warn-soft);color:#9a3412}
.vr-name{flex:1;font-weight:500;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vr-c{font-weight:700;font-family:Sora,sans-serif;color:var(--ink)}.vr-c small{font-weight:500;color:var(--muted);font-size:11px}
.vr-share{width:44px;text-align:right;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.hbars-item .hbar-label{max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* animasi tren line/area chart */
@media (prefers-reduced-motion: no-preference){
  .trend-line{stroke-dasharray:4000;stroke-dashoffset:4000;animation:trendDraw 1.1s cubic-bezier(.4,0,.2,1) forwards}
  @keyframes trendDraw{to{stroke-dashoffset:0}}
  .trend-chart circle{animation:fadeIn .5s ease both;animation-delay:.7s}
}

/* tooltip interaktif tren chart */
.trend-wrap{position:relative}
.tt-line{position:absolute;top:2px;bottom:24px;width:1px;background:rgba(14,166,114,.5);display:none;pointer-events:none;z-index:2}
.tt-dot{position:absolute;width:11px;height:11px;margin:-5.5px 0 0 -5.5px;border-radius:50%;background:#0b8a5e;border:2.5px solid #fff;box-shadow:0 1px 5px rgba(0,0,0,.25);display:none;pointer-events:none;z-index:3}
.tt-box{position:absolute;display:none;background:#0e1726;color:#fff;padding:7px 12px;border-radius:9px;pointer-events:none;z-index:4;box-shadow:0 8px 22px rgba(0,0,0,.22);white-space:nowrap;text-align:center}
.tt-box b{display:block;font-family:Sora,sans-serif;font-size:15px;font-weight:700;line-height:1.1}
.tt-box i{font-style:normal;color:#9fb0c2;font-size:11px}
.trend-chart{cursor:crosshair}

/* ===== To-Do board (vertikal, per tanggal) ===== */
.tdo-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:16px}
.tdo-h1{font-family:Sora,sans-serif;font-size:22px;font-weight:700;margin:0;display:flex;align-items:center;gap:10px}
.tdo-h1-ic{width:32px;height:32px;border-radius:9px;background:var(--primary-soft);color:var(--primary);display:flex;align-items:center;justify-content:center}
.tdo-h1-ic svg{width:18px;height:18px}
.tdo-sub{font-size:12.5px;color:var(--muted);margin:5px 0 0}
.tdo-head-act{display:flex;gap:8px}
.tdo-head-act svg{width:15px;height:15px;margin-right:2px;vertical-align:-2px}

.tdo-add{display:flex;gap:8px;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:9px;margin-bottom:20px;box-shadow:var(--shadow)}
.tdo-add-title{flex:1;min-width:0;border:1px solid transparent;border-radius:9px;padding:9px 12px;font-size:14px;background:var(--bg)}
.tdo-add-title:focus{background:var(--surface);border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}
.tdo-add-date,.tdo-add-time{border:1px solid var(--border);border-radius:9px;padding:0 10px;font-size:12.5px;color:var(--muted);background:var(--surface)}
.tdo-add .btn-primary{white-space:nowrap}
.tdo-add .btn-primary svg{width:15px;height:15px;margin-right:3px;vertical-align:-2px}

.tdo-board{max-width:720px}
.tdo-group{margin-bottom:22px}
.tdo-ghdr{display:flex;align-items:center;gap:9px;margin-bottom:10px}
.tdo-gdot{width:7px;height:7px;border-radius:50%;background:var(--primary);flex:none}
.tdo-gtag{font-size:12.5px;font-weight:700;color:var(--ink)}
.tdo-gtag.late{color:var(--danger)}
.tdo-gtag.muted{color:var(--muted);font-weight:600}
.tdo-gdate{font-size:12.5px;color:var(--muted)}
.tdo-gline{flex:1;height:1px;background:var(--border)}
.tdo-gcount{font-size:11.5px;color:var(--muted);font-weight:600}

.tdo{display:flex;gap:11px;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:12px 14px;margin-bottom:8px;transition:border-color .12s,box-shadow .12s}
.tdo.is-pin{border-color:color-mix(in srgb,var(--danger) 32%,var(--border))}
.tdo.due-now{border-color:var(--warn);box-shadow:0 0 0 3px rgba(245,158,11,.14)}
.tdo-check-f{flex:none}
.tdo-check{width:21px;height:21px;border-radius:6px;border:1.6px solid var(--border-strong,var(--border));background:var(--surface);color:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;margin-top:1px;transition:.12s}
.tdo-check svg{width:14px;height:14px}
.tdo-check:hover{border-color:var(--primary)}
.tdo.is-done .tdo-check{background:var(--primary);border-color:var(--primary);color:#fff}
.tdo-main{flex:1;min-width:0}
.tdo-row1{display:flex;gap:10px;justify-content:space-between;align-items:flex-start}
.tdo-title{font-size:14px;line-height:1.4;color:var(--ink);word-break:break-word}
.tdo.is-done .tdo-title{text-decoration:line-through;color:var(--muted)}
.tdo-meta{flex:none;display:flex;align-items:center;gap:6px}
.tdo-time{display:inline-flex;align-items:center;gap:3px;font-size:12px;font-weight:600;color:var(--muted);white-space:nowrap}
.tdo-time svg{width:13px;height:13px}
.tdo-time.passed{color:var(--danger)}
.tdo-edit-btn,.tdo-del{width:26px;height:26px;border:none;background:none;color:var(--muted);cursor:pointer;border-radius:7px;display:flex;align-items:center;justify-content:center;padding:0;opacity:0;transition:.12s}
.tdo:hover .tdo-edit-btn,.tdo:hover .tdo-del{opacity:1}
.tdo-edit-btn svg,.tdo-del svg{width:15px;height:15px}
.tdo-edit-btn:hover{background:var(--border-2);color:var(--ink)}
.tdo-del:hover{background:var(--danger-soft);color:var(--danger)}
.tdo-del-f{display:inline-flex}
.tdo-chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.tdo-status{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;padding:2px 10px;border-radius:999px;color:color-mix(in srgb,var(--c) 72%,#3a3f4b);background:color-mix(in srgb,var(--c) 12%,var(--surface));border:1px solid color-mix(in srgb,var(--c) 26%,var(--surface))}
.tdo-status-dot{width:6px;height:6px;border-radius:50%;background:var(--c)}
.tdo-pr{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:600;color:var(--muted);background:var(--bg);border:1px solid var(--border);padding:2px 9px 2px 7px;border-radius:999px;font-family:ui-monospace,monospace}
.tdo-pr svg{width:12px;height:12px}
.tdo-note{display:flex;gap:6px;margin-top:8px;font-size:13px;color:#6a7284;line-height:1.5}
.tdo-note svg{width:14px;height:14px;flex:none;margin-top:2px}

/* progress bar premium (mengkilap) */
.tdo-prog{display:flex;align-items:center;gap:9px;margin-top:9px}
.tdo-prog-track{flex:1;height:8px;border-radius:999px;background:var(--surface-2);overflow:hidden;box-shadow:inset 0 1px 2px rgba(16,24,40,.08)}
.tdo-prog-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,#0b8a5e,#13c78a 55%,#34e0a3);position:relative;transition:width .55s cubic-bezier(.4,0,.2,1);box-shadow:0 1px 3px rgba(14,166,114,.35)}
.tdo-prog-fill::before{content:"";position:absolute;left:0;right:0;top:0;height:50%;border-radius:999px 999px 0 0;background:linear-gradient(180deg,rgba(255,255,255,.45),transparent)}
.tdo-prog-fill::after{content:"";position:absolute;top:0;bottom:0;width:40%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);transform:translateX(-120%)}
@media (prefers-reduced-motion: no-preference){.tdo-prog-fill::after{animation:progSheen 2.6s ease-in-out infinite}}
@keyframes progSheen{0%{transform:translateX(-120%)}55%,100%{transform:translateX(320%)}}
.tdo-prog-pct{font-size:11.5px;font-weight:700;color:var(--primary-d);font-variant-numeric:tabular-nums;min-width:32px;text-align:right}
.tdo-prog.is-full .tdo-prog-pct{color:var(--primary)}

/* checklist (catatan langkah) */
.tdo-checklist{margin-top:10px;padding-top:10px;border-top:1px dashed var(--border)}
.tck-list{display:flex;flex-direction:column;gap:2px;margin-bottom:6px}
.tck{display:flex;align-items:center;gap:8px;padding:4px 2px;border-radius:7px}
.tck:hover{background:var(--bg)}
.tck-box{width:19px;height:19px;flex:none;border-radius:6px;border:1.6px solid var(--border-strong,var(--border));background:var(--surface);color:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;transition:.12s}
.tck-box svg{width:12px;height:12px}
.tck-box:hover{border-color:var(--primary)}
.tck.done .tck-box{background:var(--primary);border-color:var(--primary);color:#fff}
.tck-text{flex:1;font-size:13px;color:var(--ink);line-height:1.4;word-break:break-word}
.tck.done .tck-text{text-decoration:line-through;color:var(--muted)}
.tck-del{width:22px;height:22px;flex:none;border:none;background:none;color:var(--muted);cursor:pointer;border-radius:6px;display:flex;align-items:center;justify-content:center;padding:0;opacity:0;transition:.12s}
.tck:hover .tck-del{opacity:1}
.tck-del svg{width:13px;height:13px}
.tck-del:hover{background:var(--danger-soft);color:var(--danger)}
.tck-input{width:100%;border:1px solid var(--border);border-radius:8px;padding:7px 10px;font-size:12.5px;background:var(--surface)}
.tck-input:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}
.tdo-empty{text-align:center;color:#aab0bd;font-size:13px;padding:14px;border:1px dashed var(--border);border-radius:10px}

.tdo-edit-panel{margin-top:12px;padding-top:12px;border-top:1px dashed var(--border)}
.tep-title{width:100%;border:1px solid var(--border);border-radius:8px;padding:8px 10px;font-size:13.5px;margin-bottom:9px}
.tep-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;margin-bottom:9px}
@media(max-width:560px){.tep-grid{grid-template-columns:1fr}}
.tep-grid label{display:flex;flex-direction:column;gap:4px;font-size:11.5px;font-weight:600;color:var(--muted)}
.tep-grid input,.tep-grid select{border:1px solid var(--border);border-radius:8px;padding:7px 9px;font-size:13px;font-weight:400;color:var(--ink);background:var(--surface)}
.tep-note{width:100%;border:1px solid var(--border);border-radius:8px;padding:8px 10px;font-size:13px;font-family:inherit;resize:vertical;line-height:1.5}
.tep-actions{display:flex;gap:8px;margin-top:9px}

/* editor status pribadi */
.tdo-st-editor{margin-bottom:18px}
.tdo-st-head{display:flex;flex-direction:column;gap:2px;margin-bottom:12px}
.tdo-st-head b{font-size:14px}
.tdo-st-head .muted{font-size:12px}
.st-row{display:flex;align-items:center;gap:9px;margin-bottom:8px}
.st-color{width:34px;height:34px;padding:0;border:1px solid var(--border);border-radius:8px;background:none;cursor:pointer;flex:none}
.st-name{flex:1;min-width:0;border:1px solid var(--border);border-radius:8px;padding:8px 10px;font-size:13px}
.st-pin{display:inline-flex;align-items:center;gap:4px;font-size:12px;color:var(--muted);white-space:nowrap;cursor:pointer;user-select:none}
.st-pin svg{width:13px;height:13px}
.st-del{width:32px;height:32px;flex:none;border:1px solid var(--border);background:var(--surface);color:var(--muted);border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.st-del svg{width:14px;height:14px}
.st-del:hover{background:var(--danger-soft);color:var(--danger);border-color:var(--border)}
.tdo-st-foot{display:flex;justify-content:space-between;gap:8px;margin-top:12px}
.tdo-st-foot svg{width:13px;height:13px;vertical-align:-2px;margin-right:2px}
.tdo-foot{margin-top:14px;font-size:12px}


/* alarm config di settings */
.alarm-cfg{display:flex;gap:16px;align-items:flex-end;flex-wrap:wrap;margin-bottom:8px}
.acfg-item{display:flex;flex-direction:column;gap:5px;font-size:12.5px;font-weight:600;color:var(--ink)}
.acfg-item select,.acfg-item input[type=range]{font-weight:400}
.acfg-item select{border:1px solid var(--border);border-radius:9px;padding:8px 10px;min-width:180px;background:var(--surface)}
.acfg-item input[type=range]{width:170px}
#alarmVolLbl{color:var(--muted);font-weight:700}

/* selector role di halaman Pengguna */
.role-form{margin:0}
.role-select{border:1px solid var(--border);border-radius:8px;padding:5px 9px;font-size:12.5px;font-weight:600;cursor:pointer;background:var(--surface)}
.role-select:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}
.role-select.role-admin{color:#4f46e5}
.role-select.role-user{color:var(--primary-d)}
.role-select.role-guest{color:var(--muted)}

/* filter & badge "Jatuh Tempo" */
.filters .pill-jt{border-color:var(--border);color:var(--danger);font-weight:600}
.filters .pill-jt:hover{border-color:var(--danger);color:var(--danger)}
.filters .pill-jt.on{background:var(--danger);border-color:var(--danger);color:#fff}
.pill-badge{display:inline-flex;align-items:center;justify-content:center;min-width:17px;height:17px;padding:0 5px;border-radius:999px;background:var(--danger);color:#fff;font-size:10.5px;font-weight:700;margin-left:2px;vertical-align:1px}
.filters .pill-jt.on .pill-badge{background:rgba(255,255,255,.25)}
.badge-jt{display:inline-block;font-size:9.5px;font-weight:800;letter-spacing:.03em;color:#fff;background:var(--warn);padding:1px 6px;border-radius:5px;vertical-align:1px;text-transform:uppercase}
tr.row-jt{background:var(--warn-soft)}
tr.row-jt:hover{background:var(--warn-soft)}

/* masa aktif / countdown */
.due-d{display:block}
.masa{display:inline-block;margin-top:4px;font-size:10.5px;font-weight:700;padding:1px 7px;border-radius:6px;letter-spacing:.01em;white-space:nowrap}
.masa-ok{background:var(--primary-soft);color:var(--primary-d)}
.masa-warn{background:var(--warn-soft);color:var(--warn-ink)}
.masa-crit{background:var(--danger-soft);color:var(--danger)}
.masa-over{background:var(--warn);color:#fff}
.meta-row .masa{margin-top:0}

.lux-sub .masa{margin-top:0;vertical-align:1px;font-size:10px;padding:0 6px}

/* panel alarm To-Do (pindahan dari Pengaturan) */
.tdo-alarm-editor{margin-bottom:14px}
.alarm-up{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:12px;padding-top:12px;border-top:1px solid var(--border-2)}
.alarm-file-lbl{display:inline-flex;align-items:center;gap:6px;cursor:pointer;border:1px dashed var(--border);border-radius:var(--radius-sm);padding:7px 12px;font-size:13px;font-weight:600;color:var(--ink);background:var(--surface-2)}
.alarm-file-lbl:hover{border-color:var(--primary);color:var(--primary-d)}
.alarm-file-lbl svg{width:15px;height:15px}
.alarm-up-hint{font-size:12px}
.alarm-fname{font-size:12.5px;font-weight:600;color:var(--primary-d)}
.alarm-cur{flex-basis:100%;display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted);background:var(--primary-soft);border-radius:var(--radius-sm);padding:8px 11px}
.alarm-cur svg{width:14px;height:14px;color:var(--primary-d)}
.alarm-cur b{color:var(--ink)}

/* ===== Papan Kanban To-Do ===== */
.kb-board{display:flex;gap:12px;overflow-x:auto;padding:2px 2px 12px;align-items:flex-start}
.kb-col{flex:1 1 0;min-width:236px;max-width:360px;background:var(--surface-2);border-radius:14px;padding:8px 8px 10px;display:flex;flex-direction:column;max-height:calc(100vh - 210px)}
.kb-col-head{display:flex;align-items:center;gap:8px;padding:5px 8px 9px}
.kb-col-name{font-size:13px;font-weight:700;color:var(--ink)}
.kb-col-count{margin-left:auto;font-size:11px;font-weight:700;color:var(--muted);background:var(--surface);border-radius:20px;padding:1px 9px}
.kb-col-body{display:flex;flex-direction:column;gap:8px;overflow-y:auto;min-height:20px;padding:2px;border-radius:10px;transition:background .12s}
.kb-col-body.over{background:rgba(14,166,114,.09);outline:2px dashed var(--primary);outline-offset:-3px}
.kb-add{margin-top:8px}
.kb-add input{width:100%;border:1px solid transparent;background:transparent;border-radius:9px;padding:8px 10px;font-size:12.5px;color:var(--ink);box-sizing:border-box}
.kb-add input::placeholder{color:var(--muted)}
.kb-add input:focus{background:var(--surface);border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft);outline:none}
/* kartu dalam kolom */
.kb-col-body .tdo{display:block;gap:0;background:var(--surface);border:0.5px solid var(--border);border-radius:10px;padding:9px 10px;margin:0;cursor:grab;box-shadow:0 1px 2px rgba(16,24,40,.04)}
.kb-col-body .tdo:hover{border-color:var(--border-strong,var(--border))}
.kb-col-body .tdo.dragging{opacity:.45;cursor:grabbing}
.kb-col-body .tdo.due-now{border-color:var(--warn);box-shadow:0 0 0 3px rgba(245,158,11,.14)}
.tdo-top{display:flex;align-items:flex-start;gap:8px}
.tdo-top .tdo-title{flex:1;min-width:0}
.tdo-top .tdo-check-f,.tdo-top .tdo-del-f{flex:none}
.kb-col-body .tdo .tdo-edit-btn,.kb-col-body .tdo .tdo-del{opacity:.5}
.kb-col-body .tdo:hover .tdo-edit-btn,.kb-col-body .tdo:hover .tdo-del{opacity:1}
.tdo-note-dot{display:inline-flex;align-items:center;color:var(--muted)}
.tdo-note-dot svg{width:13px;height:13px}

/* ==== kelola list (kolom custom) ==== */
.kb-col-head{cursor:grab;position:relative}
.kb-col-head:active{cursor:grabbing}
.kb-col.col-dragging{opacity:.5}
.kb-col-grip{display:inline-flex;color:var(--muted);opacity:.5}
.kb-col-grip svg{width:14px;height:14px}
.kb-col-name{cursor:text;padding:2px 4px;border-radius:6px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kb-col-name:hover{background:rgba(0,0,0,.05)}
.kb-col-rename{flex:1;min-width:0;margin:0}
.kb-rename-input{width:100%;border:1px solid var(--primary);border-radius:7px;padding:3px 7px;font-size:13px;font-weight:700;color:var(--ink);box-sizing:border-box;outline:none;box-shadow:0 0 0 3px var(--primary-soft)}
.kb-col-del-f{margin:0;display:inline-flex}
.kb-col-del{width:22px;height:22px;border:none;background:none;color:var(--muted);cursor:pointer;border-radius:6px;display:flex;align-items:center;justify-content:center;padding:0;opacity:0;transition:.12s}
.kb-col-head:hover .kb-col-del{opacity:.6}
.kb-col-del:hover{background:var(--danger-soft);color:var(--danger);opacity:1}
.kb-col-del svg{width:14px;height:14px}
/* tambah list */
.kb-addcol{flex:0 0 auto;width:236px;align-self:flex-start}
.kb-addcol-btn{width:100%;text-align:left;background:rgba(255,255,255,.5);border:1px dashed var(--border-strong,var(--border));border-radius:12px;padding:10px 12px;font-size:12.5px;font-weight:600;color:var(--muted);cursor:pointer;display:flex;align-items:center;gap:6px}
.kb-addcol-btn:hover{background:var(--surface);color:var(--ink);border-color:var(--primary)}
.kb-addcol-btn svg{width:14px;height:14px}
.kb-addcol-form{background:var(--surface-2);border-radius:12px;padding:8px;display:flex;flex-direction:column;gap:8px}
.kb-addcol-input{border:1px solid var(--primary);border-radius:8px;padding:8px 10px;font-size:13px;color:var(--ink);box-sizing:border-box;outline:none;box-shadow:0 0 0 3px var(--primary-soft)}
.kb-addcol-act{display:flex;gap:6px}

/* ==== Fase 2: papan wrap ke bawah (bukan scroll horizontal) ==== */
.kb-board{flex-wrap:wrap;overflow-x:visible}
.kb-col{flex:0 0 250px;max-width:250px}
.kb-addcol{flex:0 0 250px}
/* label di kartu */
.tdo-labels{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:7px}
.tdo-label{width:34px;height:7px;border-radius:4px}
/* badge checklist di kartu */
.tdo-cl-badge{display:inline-flex;align-items:center;gap:3px;font-size:11px;font-weight:600;color:var(--muted);background:var(--bg);border:1px solid var(--border);border-radius:999px;padding:1px 8px 1px 6px}
.tdo-cl-badge svg{width:12px;height:12px}
.tdo-cl-badge.is-full{color:var(--primary-d);background:var(--primary-soft);border-color:transparent}
.tdo{cursor:pointer}
.kb-col-body .tdo{cursor:pointer}
.kb-col-body .tdo:active{cursor:grabbing}

/* ==== Modal detail kartu ==== */
body.cm-open{overflow:hidden}
.cardmodal{position:fixed;inset:0;z-index:1000;display:flex;align-items:flex-start;justify-content:center;padding:5vh 16px}
.cm-backdrop{position:fixed;inset:0;background:rgba(16,24,40,.5);backdrop-filter:blur(2px)}
.cm-dialog{position:relative;background:var(--surface);border-radius:16px;width:min(640px,100%);max-height:90vh;overflow-y:auto;padding:22px 24px;box-shadow:0 24px 60px rgba(16,24,40,.28);animation:cmIn .16s ease}
@keyframes cmIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.cm-x{position:absolute;top:14px;right:14px;width:30px;height:30px;border:none;background:var(--bg);color:var(--muted);border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.cm-x:hover{background:var(--border-2);color:var(--ink)}
.cm-x svg{width:16px;height:16px}
.cm-title{width:100%;border:1px solid transparent;border-radius:9px;padding:8px 10px;font-family:Sora,sans-serif;font-size:19px;font-weight:600;color:var(--ink);box-sizing:border-box;margin:0 34px 4px 0}
.cm-title:hover{background:var(--bg)}
.cm-title:focus{background:var(--surface);border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft);outline:none}
.cm-meta{display:flex;flex-wrap:wrap;gap:14px;margin:6px 0 4px;padding:10px;background:var(--bg);border-radius:10px}
.cm-inline{display:flex;flex-direction:column;gap:4px;font-size:11.5px;font-weight:600;color:var(--muted)}
.cm-inline select,.cm-inline input{border:1px solid var(--border);border-radius:8px;padding:6px 9px;font-size:13px;color:var(--ink);background:var(--surface)}
.cm-section{margin-top:16px}
.cm-lbl{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;color:var(--ink);margin-bottom:8px}
.cm-lbl svg{width:15px;height:15px;color:var(--muted)}
.cm-prog{margin-left:auto;font-size:11.5px;font-weight:600;color:var(--muted)}
.cm-labels{display:flex;gap:8px;flex-wrap:wrap}
.cm-lab{width:44px;height:26px;border-radius:7px;border:none;cursor:pointer;background:var(--lc);opacity:.55;position:relative;transition:.12s}
.cm-lab:hover{opacity:.8}
.cm-lab.on{opacity:1;box-shadow:0 0 0 2px #fff,0 0 0 4px var(--lc)}
#cmNote{width:100%;border:1px solid var(--border);border-radius:10px;padding:10px 12px;font-size:14px;font-family:inherit;color:var(--ink);box-sizing:border-box;resize:vertical;line-height:1.55}
#cmNote:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft);outline:none}
.cm-checks{display:flex;flex-direction:column;gap:4px;margin-bottom:8px}
.cm-check{display:flex;align-items:center;gap:9px;padding:5px 6px;border-radius:8px}
.cm-check:hover{background:var(--bg)}
.cm-check-box{width:20px;height:20px;flex:none;border:1.6px solid var(--border-strong,var(--border));background:var(--surface);color:transparent;border-radius:6px;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
.cm-check-box svg{width:13px;height:13px}
.cm-check.done .cm-check-box{background:var(--primary);border-color:var(--primary);color:#fff}
.cm-check-text{flex:1;font-size:14px;color:var(--ink);word-break:break-word}
.cm-check.done .cm-check-text{text-decoration:line-through;color:var(--muted)}
.cm-check-del{flex:none;border:none;background:none;color:var(--muted);font-size:20px;line-height:1;cursor:pointer;width:24px;height:24px;border-radius:6px;opacity:0}
.cm-check:hover .cm-check-del{opacity:.6}
.cm-check-del:hover{background:var(--danger-soft);color:var(--danger);opacity:1}
.cm-check-add{width:100%;border:1px solid var(--border);border-radius:8px;padding:8px 10px;font-size:13.5px;box-sizing:border-box;background:var(--bg)}
.cm-check-add:focus{background:var(--surface);border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft);outline:none}
.cm-actions{display:flex;gap:8px;margin-top:20px;padding-top:16px;border-top:1px solid var(--border-2)}
.cm-del{color:var(--danger)}
.cm-del:hover{background:var(--danger-soft)}
@media (max-width:560px){.cm-dialog{padding:18px 16px}.cm-meta{gap:10px}}

/* paksa atribut [hidden] selalu menang (fix modal & form yg keliatan terus) */
[hidden]{display:none!important}

/* ==== Fase 3: badge lampiran/komentar di kartu ==== */
.tdo-mini{display:inline-flex;align-items:center;gap:3px;font-size:11px;font-weight:600;color:var(--muted)}
.tdo-mini svg{width:13px;height:13px}
/* lampiran di modal */
.cm-atts{display:flex;flex-direction:column;gap:6px;margin-bottom:8px}
.cm-att{display:flex;align-items:center;gap:10px;background:var(--bg);border:1px solid var(--border);border-radius:9px;padding:8px 11px}
.cm-att-link{flex:1;min-width:0;font-size:13.5px;font-weight:600;color:var(--primary-d);text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cm-att-link:hover{text-decoration:underline}
.cm-att-size{font-size:11.5px;color:var(--muted);flex:none}
.cm-att-del{flex:none;border:none;background:none;color:var(--muted);font-size:20px;line-height:1;cursor:pointer;width:24px;height:24px;border-radius:6px}
.cm-att-del:hover{background:var(--danger-soft);color:var(--danger)}
.cm-att-add{display:inline-flex;align-items:center;gap:6px;cursor:pointer;border:1px dashed var(--border-strong,var(--border));border-radius:9px;padding:7px 12px;font-size:12.5px;font-weight:600;color:var(--ink);background:var(--surface-2)}
.cm-att-add:hover{border-color:var(--primary);color:var(--primary-d)}
.cm-att-add svg{width:14px;height:14px}
.cm-att-hint{margin-left:8px;font-size:11.5px}
/* komentar + aktivitas */
.cm-cmt-add{display:flex;gap:8px;margin-bottom:12px}
#cmCmtInput{flex:1;border:1px solid var(--border);border-radius:9px;padding:8px 11px;font-size:13.5px;font-family:inherit;color:var(--ink);box-sizing:border-box;resize:vertical}
#cmCmtInput:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft);outline:none}
.cm-cmt-add .btn{align-self:flex-start}
.cm-feed{display:flex;flex-direction:column;gap:10px}
.cm-feed-item.is-act{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted)}
.cm-feed-dot{width:6px;height:6px;border-radius:50%;background:var(--border-strong,var(--border));flex:none}
.cm-feed-item.is-cmt{background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:9px 12px}
.cm-feed-body{font-size:14px;color:var(--ink);line-height:1.5;word-break:break-word}
.cm-feed-meta{display:flex;gap:8px;align-items:center;font-size:11.5px;color:var(--muted);margin-top:5px}
.cm-feed-del{border:none;background:none;color:var(--muted);font-size:11.5px;cursor:pointer;padding:0;text-decoration:underline}
.cm-feed-del:hover{color:var(--danger)}

/* ==== Finishing: label bernama ==== */
.tdo-label.named{width:auto;height:auto;padding:2px 8px;border-radius:5px;font-size:10px;font-weight:700;color:#fff;line-height:1.5;letter-spacing:.02em;text-shadow:0 1px 1px rgba(0,0,0,.15)}
.cm-mini-link{margin-left:auto;border:none;background:none;color:var(--primary-d);font-size:11.5px;font-weight:600;cursor:pointer;text-decoration:underline}
.cm-lab{color:#fff;font-size:11px;font-weight:700;padding:0 8px;min-width:44px;text-shadow:0 1px 1px rgba(0,0,0,.15);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cm-lab.has-name{width:auto}
.cm-lab-edit{display:flex;flex-direction:column;gap:7px;margin-top:12px;padding:12px;background:var(--bg);border-radius:10px}
.cm-lab-edit-row{display:flex;align-items:center;gap:9px}
.cm-lab-sw{width:26px;height:20px;border-radius:5px;flex:none}
.cm-lab-edit-row input{flex:1;border:1px solid var(--border);border-radius:7px;padding:6px 9px;font-size:13px;background:var(--surface)}
.cm-lab-edit-row input:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft);outline:none}
/* thumbnail lampiran */
.cm-att-thumb{flex:none;width:44px;height:44px;border-radius:7px;overflow:hidden;display:block}
.cm-att-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.cm-att-ico{flex:none;width:38px;height:44px;display:flex;align-items:center;justify-content:center;color:var(--muted)}
.cm-att-ico svg{width:22px;height:22px}
/* modal kecil + arsip */
.cm-dialog-sm{width:min(460px,100%)}
.cm-title-static{display:flex;align-items:center;gap:8px;font-family:Sora,sans-serif;font-size:17px;font-weight:600;color:var(--ink);margin:2px 30px 14px 0}
.cm-title-static svg{width:18px;height:18px;color:var(--muted)}
.ar-list{display:flex;flex-direction:column;gap:8px}
.ar-item{display:flex;align-items:center;gap:10px;background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:9px 12px}
.ar-info{flex:1;min-width:0}
.ar-title{font-size:13.5px;font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ar-col{font-size:11.5px;margin-top:2px}
.ar-act{display:flex;gap:6px;flex:none}
.ar-del{color:var(--danger)}
.ar-empty{text-align:center;padding:24px;font-size:13px}

/* ==================================================================
   Papan Kanban — refresh visual (biar gak butek, lebih crisp & pop)
   ================================================================== */
.kb-board{gap:14px;padding:4px 0 16px}
/* KOLOM: panel bersih dengan border tegas + bayangan halus */
.kb-col{
  flex:0 0 264px;max-width:264px;
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:16px;
  padding:10px 10px 12px;
  box-shadow:0 1px 2px rgba(16,24,40,.04);
  max-height:calc(100vh - 200px);
}
.kb-col-head{padding:5px 6px 10px;cursor:grab}
.kb-col-grip{opacity:.35}
.kb-col-head:hover .kb-col-grip{opacity:.6}
.kb-col-name{font-size:13.5px;font-weight:700;letter-spacing:-.01em;color:#1d2433}
.kb-col-count{
  min-width:22px;text-align:center;font-size:11px;font-weight:700;
  color:#5b6478;background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:2px 8px;
}
.kb-col-body{gap:9px;padding:2px 2px 0}
.kb-col-body:empty{min-height:8px}

/* KARTU: putih bersih, sudut lebih bulat, angkat pas hover */
.kb-col-body .tdo{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:12px;
  padding:11px 12px;
  box-shadow:0 1px 2px rgba(16,24,40,.05);
  transition:box-shadow .15s ease,transform .12s ease,border-color .15s ease;
  cursor:pointer;
}
.kb-col-body .tdo:hover{
  border-color:#d7dbe6;
  box-shadow:0 6px 16px rgba(16,24,40,.10);
  transform:translateY(-1px);
}
.kb-col-body .tdo:active{cursor:grabbing;transform:none}
.kb-col-body .tdo.dragging{opacity:.5;box-shadow:0 12px 24px rgba(16,24,40,.16);transform:rotate(1.5deg)}
.tdo-title{font-size:13.5px;font-weight:600;line-height:1.4;color:#222836}
.tdo-chips{gap:6px;margin-top:9px}
.tdo-labels{margin-bottom:8px}
.tdo-label{height:8px;border-radius:5px}

/* TAMBAH KARTU: tombol lembut full-width */
.kb-add{margin-top:9px}
.kb-add input{
  border-radius:10px;padding:9px 11px;font-size:13px;
  color:#556170;background:transparent;transition:.12s;
}
.kb-add input:hover{background:rgba(255,255,255,.7)}
.kb-add input:focus{background:var(--surface);border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}
.kb-add input::placeholder{color:#8a92a4;font-weight:500}

/* DRAG target lebih jelas */
.kb-col-body.over{background:rgba(14,166,114,.06);outline:2px dashed var(--primary);outline-offset:2px;border-radius:12px}

/* TAMBAH LIST */
.kb-addcol-btn{
  background:rgba(255,255,255,.55);border:1px dashed #ccd2df;border-radius:14px;
  padding:12px 14px;color:#6b7385;font-weight:600;
}
.kb-addcol-btn:hover{background:var(--surface);color:#1d2433;border-color:var(--primary)}

/* count pill kebawa warna pas ada isi */
.kb-col-body .tdo:first-child{margin-top:0}

/* ==================================================================
   Kanban v3 — KOLOM PUTIH (no abu), kartu ngambang pakai shadow
   ================================================================== */
.kb-board{gap:14px;padding:4px 0 16px}
.kb-col{
  flex:0 0 266px;max-width:266px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:16px;
  padding:12px 11px 14px;
  box-shadow:0 2px 6px rgba(16,24,40,.05);
  max-height:calc(100vh - 200px);
}
.kb-col-head{padding:2px 6px 12px;cursor:grab}
.kb-col-grip{opacity:.3}
.kb-col-head:hover .kb-col-grip{opacity:.55}
.kb-col-name{font-size:14px;font-weight:700;letter-spacing:-.01em;color:var(--ink)}
.kb-col-count{
  min-width:22px;text-align:center;font-size:11px;font-weight:700;
  color:var(--primary-d);background:var(--primary-soft);border:none;border-radius:999px;padding:2px 9px;
}
.kb-col-body{gap:9px;padding:2px}

/* KARTU: putih + shadow biar kepisah dari kolom putih */
.kb-col-body .tdo{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:12px;
  padding:11px 12px;
  box-shadow:0 1px 2px rgba(16,24,40,.06), 0 1px 8px rgba(16,24,40,.04);
  transition:box-shadow .15s ease,transform .12s ease,border-color .15s ease;
  cursor:pointer;
}
.kb-col-body .tdo:hover{
  border-color:var(--border);
  box-shadow:0 8px 20px rgba(16,24,40,.13);
  transform:translateY(-2px);
}
.kb-col-body .tdo:active{cursor:grabbing;transform:none}
.kb-col-body .tdo.dragging{opacity:.5;box-shadow:0 14px 28px rgba(16,24,40,.18);transform:rotate(1.5deg)}
.tdo-title{font-size:13.5px;font-weight:600;line-height:1.4;color:#212736}

/* separator halus di bawah header kolom biar rapi */
.kb-col-head{border-bottom:1px solid var(--border);margin-bottom:6px}

/* tambah kartu */
.kb-add{margin-top:9px}
.kb-add input{border-radius:10px;padding:9px 11px;font-size:13px;color:#556170;background:transparent;transition:.12s}
.kb-add input:hover{background:var(--surface-2)}
.kb-add input:focus{background:var(--surface);border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}
.kb-add input::placeholder{color:#9199ab;font-weight:500}

/* drop target */
.kb-col-body.over{background:var(--primary-soft);outline:2px dashed var(--primary);outline-offset:2px;border-radius:12px}

/* tambah list */
.kb-addcol{flex:0 0 266px}
.kb-addcol-btn{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:12px 14px;color:#6b7385;font-weight:600;box-shadow:0 1px 3px rgba(16,24,40,.04)}
.kb-addcol-btn:hover{color:var(--ink);border-color:var(--primary);box-shadow:0 2px 8px rgba(16,24,40,.08)}

/* ==== Panduan singkat To-Do ==== */
.tdo-guide{margin-top:22px;background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:16px 18px;box-shadow:0 1px 3px rgba(16,24,40,.04)}
.tdo-guide-head{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:700;color:var(--ink);margin-bottom:12px}
.tdo-guide-head svg{width:16px;height:16px;color:var(--primary)}
.tdo-guide-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px 20px}
.tg-item{display:flex;gap:10px;align-items:flex-start}
.tg-ic{flex:none;width:30px;height:30px;border-radius:9px;background:var(--primary-soft);color:var(--primary-d);display:flex;align-items:center;justify-content:center}
.tg-ic svg{width:15px;height:15px}
.tg-item>div{display:flex;flex-direction:column;gap:1px;min-width:0}
.tg-item b{font-size:12.5px;color:#212736}
.tg-item span{font-size:12px;color:#6b7385;line-height:1.5}
.tg-item em{font-style:normal;color:#414a5c;font-weight:600}
.tg-item kbd{font-family:inherit;font-size:10.5px;font-weight:700;background:var(--surface-2);border:1px solid var(--border);border-bottom-width:2px;border-radius:5px;padding:0 5px;color:#414a5c}

/* ==== Sidebar collapse + tombol toggle (nempel di tepi sidebar) ==== */
.side-edge-toggle{
  position:fixed;top:50%;left:248px;transform:translate(-50%,-50%);z-index:60;
  width:30px;height:30px;border-radius:50%;background:var(--primary);border:2px solid #fff;
  box-shadow:0 3px 10px rgba(14,166,114,.4);display:grid;place-items:center;cursor:pointer;
  color:#fff;transition:left .22s ease,transform .22s ease,background .12s,color .12s,border-color .12s;
}
.side-edge-toggle:hover{background:var(--primary-d);box-shadow:0 4px 14px rgba(14,166,114,.55)}
.side-edge-toggle svg{width:15px;height:15px;transition:transform .22s ease}
@media(min-width:761px){
  .sidebar{transition:transform .22s ease}
  .content{transition:margin-left .22s ease}
  html.sb-collapsed .sidebar{transform:translateX(-100%)}
  html.sb-collapsed .content{margin-left:0}
  html.sb-collapsed .side-edge-toggle{left:14px;transform:translate(0,-50%)}
  html.sb-collapsed .side-edge-toggle svg{transform:rotate(180deg)}
}
@media(max-width:760px){ .side-edge-toggle{display:none} }
/* badge SOON di nav + teks nav */
.sidebar nav a .nav-txt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-soon{flex:none;font-size:9px;font-weight:800;letter-spacing:.04em;background:#e23b53;color:#fff;padding:2px 6px;border-radius:5px;line-height:1}
/* ikon search (mask) untuk Tool Scraping */
i[data-i=search]{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E")}

/* ==== Halaman Tool Scraping (segera hadir) ==== */
.scrape{max-width:960px}
.scrape-hero{background:linear-gradient(135deg,#0ea672 0%,#0b8a5e 100%);color:#fff;border-radius:18px;padding:30px 32px;box-shadow:0 8px 24px rgba(14,166,114,.25)}
.scrape-badge{display:inline-block;background:#e23b53;color:#fff;font-size:10px;font-weight:800;letter-spacing:.08em;padding:4px 10px;border-radius:6px;margin-bottom:12px}
.scrape-title{font-family:Sora,sans-serif;font-size:28px;font-weight:700;margin:0 0 10px}
.scrape-lead{font-size:14.5px;line-height:1.65;color:rgba(255,255,255,.92);max-width:680px;margin:0}
.scrape-section-title{font-size:15px;font-weight:700;color:var(--ink);margin:26px 0 14px}
.scrape-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.scrape-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:18px;box-shadow:0 1px 3px rgba(16,24,40,.04)}
.scrape-card-ic{display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:11px;margin-bottom:12px}
.scrape-card-ic svg{width:21px;height:21px}
.ic-green{background:var(--primary-soft);color:var(--primary-d)}
.ic-blue{background:var(--info-soft);color:#1d6fd8}
.ic-amber{background:var(--warn-soft);color:var(--warn-ink)}
.scrape-card h3{font-size:14.5px;font-weight:700;color:var(--ink);margin:0 0 6px}
.scrape-card p{font-size:13px;line-height:1.6;color:var(--muted);margin:0}
.scrape-how{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:20px 24px;margin-top:8px}
.scrape-how .scrape-section-title{margin-top:0}
.scrape-steps{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:9px}
.scrape-steps li{font-size:13.5px;line-height:1.6;color:var(--muted)}
.scrape-steps li b{color:var(--ink)}
.scrape-note{display:flex;gap:12px;align-items:flex-start;background:var(--warn-soft);border:1px solid var(--border);border-radius:12px;padding:14px 16px;margin-top:20px}
.scrape-note svg{width:20px;height:20px;color:var(--warn);flex:none;margin-top:1px}
.scrape-note div{font-size:13.5px;line-height:1.6;color:var(--warn-ink)}
.scrape-note b{color:var(--warn-ink)}

/* badge "Segera" di daftar fitur panduan */
.g-soon{display:inline-block;font-size:9px;font-weight:800;letter-spacing:.04em;background:#e23b53;color:#fff;padding:1px 6px;border-radius:5px;vertical-align:2px;margin-left:5px}

/* ============================================================
   OPTIMASI MOBILE — menyeluruh (≤760px & ≤480px)
   ============================================================ */
@media(max-width:760px){
  .page{padding:14px}
  .topbar{padding:14px 16px 14px 62px}

  /* --- Papan Kanban To-Do: kolom full-width, tumpuk ke bawah --- */
  .kb-board{gap:12px}
  .kb-col{flex:0 0 100%;max-width:100%;max-height:none}
  .kb-col-body{max-height:none}
  .kb-addcol{flex:0 0 100%;width:auto}
  .kb-add input{background:var(--surface-2)}

  /* --- Modal detail kartu --- */
  .cardmodal{padding:2vh 8px;align-items:flex-start}
  .cm-dialog{padding:18px 15px;border-radius:14px;max-height:94vh}
  .cm-title{font-size:17px;margin-right:34px}
  .cm-meta{flex-direction:column;gap:10px;padding:12px}
  .cm-inline{width:100%}
  .cm-inline select,.cm-inline input{width:100%;box-sizing:border-box}
  .cm-cmt-add{flex-direction:column}
  .cm-cmt-add .btn{align-self:stretch}
  .cm-actions{flex-wrap:wrap}
  .cm-actions .btn{flex:1 1 auto}
  .cm-att-hint{margin-left:0;display:block;margin-top:4px}

  /* --- Panel alarm --- */
  .alarm-cfg{flex-direction:column;align-items:stretch;gap:12px}
  .acfg-item{width:100%}
  .acfg-item select,.acfg-item input{width:100%;box-sizing:border-box}
  .alarm-up{flex-direction:column;align-items:flex-start;gap:8px}

  /* --- Toolbar & filter Purchase Requests --- */
  .pr-toolbar{flex-wrap:wrap;gap:8px}
  .pr-search{flex:1 1 100%}
  .pr-actions{flex-wrap:wrap;width:100%}
  .filters{flex-wrap:wrap;gap:6px}

  /* --- Tabel item di detail PR: bisa digeser --- */
  #itemsCard{overflow-x:auto}
  .items-table{min-width:560px}

  /* --- Halaman Panduan --- */
  .g-hero{padding:22px 18px}
  .g-hero h1{font-size:22px}
  .g-toc{flex-wrap:wrap}
  .g-flow{flex-direction:column;gap:6px}
  .g-flow-arrow{transform:rotate(90deg);align-self:center}
  .g-roles{grid-template-columns:1fr}
  .g-features{grid-template-columns:1fr}
  .g-diagram{grid-template-columns:1fr}
  .g-stepper{overflow-x:auto;padding-bottom:10px;flex-wrap:nowrap}
  .g-sec{padding:18px 16px}

  /* --- Halaman Tool Scraping --- */
  .scrape-hero{padding:22px 18px}
  .scrape-title{font-size:22px}
  .scrape-cards{grid-template-columns:1fr}
  .scrape-how{padding:18px 16px}

  /* --- Panduan singkat To-Do --- */
  .tdo-guide-grid{grid-template-columns:1fr}

  /* --- Analitik --- */
  .an-kpis{grid-template-columns:1fr 1fr}
  .range-pills{flex-wrap:wrap}

  /* --- Pengguna: kolom role tetap muat --- */
  .role-select{max-width:130px}
}

@media(max-width:480px){
  .kpis{grid-template-columns:1fr}
  .an-kpis{grid-template-columns:1fr}
  .kpi-num{font-size:22px}
  .topbar h1{font-size:15px}
  .cm-labels{gap:6px}
  .cm-lab{min-width:38px}
  .g-hero h1{font-size:20px}
  .btn{padding:8px 12px}
  .tdo-h1{font-size:20px}
}

/* ikon sidebar: database (Backup) */
i[data-i=database]{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='12' cy='5' rx='9' ry='3'/%3E%3Cpath d='M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5'/%3E%3Cpath d='M3 12c0 1.66 4 3 9 3s9-1.34 9-3'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='12' cy='5' rx='9' ry='3'/%3E%3Cpath d='M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5'/%3E%3Cpath d='M3 12c0 1.66 4 3 9 3s9-1.34 9-3'/%3E%3C/svg%3E")}

/* ==== Halaman Backup ==== */
.bk{max-width:820px}
.bk-hero{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:20px 22px;box-shadow:0 1px 3px rgba(16,24,40,.04);margin-bottom:18px}
.bk-title{font-family:Sora,sans-serif;font-size:20px;font-weight:700;color:var(--ink);margin:0 0 6px}
.bk-lead{font-size:13.5px;line-height:1.6;color:var(--muted);margin:0;max-width:600px}
.bk-hero-ic{flex:none;width:52px;height:52px;border-radius:13px;background:var(--primary-soft);color:var(--primary-d);display:flex;align-items:center;justify-content:center}
.bk-hero-ic svg{width:26px;height:26px}
.bk-month{margin-bottom:18px}
.bk-month-h{font-size:12px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin:0 2px 8px}
.bk-weeks{display:flex;flex-direction:column;gap:8px}
.bk-week{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:12px 14px;box-shadow:0 1px 2px rgba(16,24,40,.04);transition:.14s}
.bk-week:hover{border-color:var(--border);box-shadow:0 4px 12px rgba(16,24,40,.08)}
.bk-week-info{display:flex;align-items:center;gap:12px;min-width:0}
.bk-week-ic{flex:none;width:38px;height:38px;border-radius:10px;background:var(--bg);color:var(--primary-d);display:flex;align-items:center;justify-content:center}
.bk-week-ic svg{width:19px;height:19px}
.bk-week-lbl{font-size:13.5px;font-weight:600;color:var(--ink)}
.bk-week-sub{font-size:11.5px;color:var(--muted);margin-top:1px}
.bk-badge-now{font-size:9px;font-weight:800;letter-spacing:.03em;background:var(--primary-soft);color:var(--primary-d);padding:1px 6px;border-radius:5px;vertical-align:1px}
.bk-dl{flex:none;display:inline-flex;align-items:center;gap:6px}
.bk-dl svg{width:15px;height:15px}
.bk-note{display:flex;gap:12px;align-items:flex-start;background:var(--bg);border:1px solid var(--border);border-radius:12px;padding:13px 16px;margin-top:6px}
.bk-note svg{width:20px;height:20px;color:var(--muted);flex:none;margin-top:1px}
.bk-note div{font-size:13px;line-height:1.6;color:var(--muted)}
@media(max-width:760px){.bk-hero{flex-direction:column}.bk-week{flex-wrap:wrap}.bk-dl{width:100%;justify-content:center}}

/* ==== Footer sidebar: aksi (ubah pw + keluar) ==== */
.side-foot-act{display:flex;flex-direction:column;gap:7px;margin-top:10px}
.side-pw{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:#aeb6c6;text-decoration:none;padding:7px 10px;border-radius:9px;transition:.12s}
.side-pw:hover{background:rgba(255,255,255,.06);color:#fff}
.side-pw svg{width:15px;height:15px}

/* ==== Halaman Ubah Password ==== */
.pw-wrap{max-width:460px;margin:0 auto}
.pw-card{padding:24px}
.pw-head{display:flex;gap:13px;align-items:flex-start;margin-bottom:18px}
.pw-ic{flex:none;width:44px;height:44px;border-radius:12px;background:var(--primary-soft);color:var(--primary-d);display:flex;align-items:center;justify-content:center}
.pw-ic svg{width:22px;height:22px}
.pw-head h2{font-size:18px;font-weight:700;margin:0 0 3px;color:var(--ink)}
.pw-head p{font-size:12.5px;margin:0}
.pw-form label{display:block;font-size:12.5px;font-weight:600;color:var(--ink);margin:14px 0 6px}
.pw-form input{width:100%;box-sizing:border-box;border:1px solid var(--border);border-radius:9px;padding:10px 12px;font-size:14px}
.pw-form input:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft);outline:none}
.pw-form .btn-block{margin-top:20px}
.alert-ok{background:var(--primary-soft);border:1px solid #b6e6d3;color:var(--primary-d)}

/* ==== Reset password (admin, di tabel pengguna) ==== */
.u-acts{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pw-reset{position:relative}
.pw-reset>summary{list-style:none;cursor:pointer;display:inline-flex}
.pw-reset>summary::-webkit-details-marker{display:none}
.pw-reset-form{position:absolute;z-index:30;top:calc(100% + 6px);left:0;background:var(--surface);border:1px solid var(--border);border-radius:10px;box-shadow:0 8px 22px rgba(16,24,40,.16);padding:10px;display:flex;gap:6px;align-items:center;width:max-content}
.pw-reset-form input[type=password]{border:1px solid var(--border);border-radius:8px;padding:7px 9px;font-size:13px;width:180px}
.pw-reset-form input:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft);outline:none}
@media(max-width:760px){.pw-reset-form{right:0;left:auto}}

/* ==== Lonceng notifikasi (topbar) ==== */
.notif-wrap{position:relative;display:flex;align-items:center}
.notif-bell{position:relative;width:38px;height:38px;border:1px solid var(--border);background:var(--surface);border-radius:10px;cursor:pointer;color:var(--muted);display:grid;place-items:center;transition:.12s}
.notif-bell:hover{color:var(--ink);border-color:var(--border-strong,var(--border));background:var(--bg)}
.notif-bell.has-unread{color:var(--primary-d);border-color:var(--primary)}
.notif-bell svg{width:19px;height:19px}
.notif-badge{position:absolute;top:-5px;right:-5px;min-width:17px;height:17px;padding:0 4px;background:var(--danger);color:#fff;font-size:10px;font-weight:800;border-radius:999px;display:flex;align-items:center;justify-content:center;border:2px solid #fff;box-sizing:content-box}
.notif-panel{position:absolute;top:calc(100% + 10px);right:0;width:340px;max-width:88vw;background:var(--surface);border:1px solid var(--border);border-radius:14px;box-shadow:0 16px 44px rgba(16,24,40,.20);z-index:80;overflow:hidden}
.notif-panel-h,.notif-panel-f{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--border-2)}
.notif-panel-f{border-bottom:none;border-top:1px solid var(--border-2)}
.notif-link{border:none;background:none;color:var(--primary-d);font-size:12.5px;font-weight:600;cursor:pointer;text-decoration:none;padding:0}
.notif-link:hover{text-decoration:underline}
.notif-link-muted{color:var(--muted)}
.notif-list{max-height:min(60vh,420px);overflow-y:auto}
.notif-empty{padding:28px 14px;text-align:center;color:var(--muted);font-size:13px}
.notif-item{display:flex;gap:10px;padding:11px 14px;border-bottom:1px solid var(--border-2);text-decoration:none;color:inherit;transition:background .1s}
.notif-item:last-child{border-bottom:none}
.notif-item:hover{background:var(--bg)}
.notif-item.unread{background:var(--primary-soft)}
.notif-item.unread:hover{background:var(--primary-soft)}
.notif-dot{flex:none;width:8px;height:8px;border-radius:50%;background:transparent;margin-top:6px}
.notif-item.unread .notif-dot{background:var(--primary)}
.notif-title{font-size:13px;font-weight:600;color:var(--ink);line-height:1.35}
.notif-sub{font-size:12px;color:var(--muted);margin-top:2px;line-height:1.4}
.notif-time{font-size:11px;color:#9aa1b1;margin-top:3px}
@media(max-width:760px){.notif-panel{right:-6px}}

/* ==== Halaman Pengaturan Notifikasi ==== */
.nt{max-width:720px}
.nt-hero{display:flex;gap:14px;align-items:flex-start;margin-bottom:16px}
.nt-hero-ic{flex:none;width:46px;height:46px;border-radius:12px;background:var(--primary-soft);color:var(--primary-d);display:flex;align-items:center;justify-content:center}
.nt-hero-ic svg{width:23px;height:23px}
.nt-hero h2{font-size:19px;font-weight:700;margin:0 0 4px;color:var(--ink)}
.nt-hero p{font-size:13px;margin:0;max-width:520px}
.nt-sec{margin-bottom:14px}
.nt-sec-h{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--ink);margin-bottom:12px}
.nt-sec-h svg{width:17px;height:17px;color:var(--primary-d)}
.nt-desc{font-size:12.5px;margin:-4px 0 12px}
.nt-sound-row{display:flex;flex-wrap:wrap;align-items:flex-end;gap:14px}
.nt-field{display:flex;flex-direction:column;gap:5px;font-size:12px;font-weight:600;color:var(--muted)}
.nt-field select{border:1px solid var(--border);border-radius:9px;padding:8px 11px;font-size:13.5px;background:var(--surface);min-width:200px}
.nt-check{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--ink)}
.nt-toggle-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 0;border-top:1px solid var(--border-2)}
.nt-toggle-row:first-of-type{border-top:none}
.nt-toggle-row div b{display:block;font-size:13.5px;color:var(--ink)}
.nt-toggle-row div span{font-size:12px}
.nt-switch{flex:none;width:44px;height:26px;border-radius:999px;border:none;background:var(--track);cursor:pointer;padding:0;position:relative;transition:.18s}
.nt-switch span{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:var(--surface);box-shadow:0 1px 3px rgba(0,0,0,.2);transition:.18s}
.nt-switch.on{background:var(--primary)}
.nt-switch.on span{left:21px}
.nt-add{display:flex;gap:8px;margin-bottom:12px}
.nt-add input{flex:1;border:1px solid var(--border);border-radius:9px;padding:9px 12px;font-size:13.5px}
.nt-add input:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft);outline:none}
.nt-chips{display:flex;flex-wrap:wrap;gap:8px}
.nt-chip{display:inline-flex;align-items:center;gap:6px;background:var(--primary-soft);color:var(--primary-d);border-radius:999px;padding:5px 6px 5px 12px;font-size:13px;font-weight:600}
.nt-chip.mono{font-family:ui-monospace,monospace;font-size:12px}
.nt-chip-x{border:none;background:rgba(0,0,0,.08);color:inherit;width:18px;height:18px;border-radius:50%;cursor:pointer;font-size:14px;line-height:1;display:flex;align-items:center;justify-content:center}
.nt-chip-x:hover{background:var(--danger);color:#fff}
.nt-empty{font-size:12.5px}
@media(max-width:760px){.nt-add{flex-wrap:wrap}.nt-add input{flex:1 1 100%}.nt-sound-row{gap:10px}.nt-field select{min-width:0;width:100%}}

/* ==== Drag-drop To-Do di layar sentuh ==== */
.tdo-clone{position:fixed;z-index:2000;pointer-events:none;box-shadow:0 16px 34px rgba(16,24,40,.28);transform:rotate(2deg);opacity:.96;margin:0!important;border-radius:12px}
.tdo-ph{background:var(--primary-soft);border:2px dashed var(--primary);border-radius:12px;margin-bottom:9px}
body.kb-touch-dnd{overflow:hidden;-webkit-user-select:none;user-select:none;touch-action:none}

/* ==== Banner pasang aplikasi (PWA) ==== */
.pwa-banner{position:fixed;left:12px;right:12px;bottom:12px;z-index:1500;display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:12px 14px;box-shadow:0 10px 30px rgba(16,24,40,.18)}
.pwa-banner-ic{flex:none;width:40px;height:40px;border-radius:11px;background:var(--primary-soft);color:var(--primary-d);display:flex;align-items:center;justify-content:center}
.pwa-banner-ic svg{width:20px;height:20px}
.pwa-banner-txt{flex:1;min-width:0;display:flex;flex-direction:column}
.pwa-banner-txt b{font-size:13.5px;color:var(--ink)}
.pwa-banner-txt span{font-size:12px;color:var(--muted)}
.pwa-banner-x{flex:none;border:none;background:none;color:var(--muted);font-size:22px;line-height:1;cursor:pointer;width:28px;height:28px}
@media(min-width:761px){.pwa-banner{left:auto;right:20px;max-width:360px}}

/* ==== Instruksi pasang iPhone ==== */
.pwa-ios{position:fixed;inset:0;z-index:1600;background:rgba(16,24,40,.5);display:flex;align-items:flex-end;justify-content:center}
.pwa-ios-card{background:var(--surface);border-radius:18px 18px 0 0;width:100%;max-width:460px;padding:22px 22px 30px;position:relative;animation:cmIn .18s ease}
.pwa-ios-x{position:absolute;top:14px;right:14px;border:none;background:var(--bg);width:30px;height:30px;border-radius:8px;font-size:18px;cursor:pointer;color:var(--muted)}
.pwa-ios-h{display:flex;align-items:center;gap:8px;font-family:Sora,sans-serif;font-size:17px;font-weight:700;color:var(--ink);margin-bottom:14px}
.pwa-ios-h svg{width:20px;height:20px;color:var(--primary-d)}
.pwa-ios-steps{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:10px}
.pwa-ios-steps li{font-size:14px;line-height:1.55;color:var(--ink)}
.ios-share{width:18px;height:18px;vertical-align:-4px;color:#0a84ff}
@media(min-width:561px){.pwa-ios{align-items:center}.pwa-ios-card{border-radius:18px}}

/* ==== Panduan: pasang di HP ==== */
.ps-req{background:var(--warn-soft);border:1px solid var(--border);border-radius:12px;padding:14px 16px;margin:14px 0}
.ps-req>b{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--warn-ink);margin-bottom:8px}
.ps-req>b svg{width:16px;height:16px;color:var(--warn)}
.ps-req ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px}
.ps-req li{font-size:13px;line-height:1.55;color:var(--warn-ink)}
.ps-req li b{color:var(--warn-ink)}
.ps-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ps-card{border:1px solid var(--border);border-radius:14px;padding:16px 18px;background:var(--surface)}
.ps-card-h{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700;color:var(--ink);margin-bottom:10px;padding-bottom:10px;border-bottom:1px solid var(--border-2)}
.ps-card-h svg{width:18px;height:18px}
.ps-android svg{color:#3ddc84}
.ps-ios svg{color:#0a84ff}
.ps-card ol{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:8px}
.ps-card li{font-size:13px;line-height:1.55;color:var(--muted)}
.ps-card li b{color:var(--ink)}
@media(max-width:760px){.ps-grid{grid-template-columns:1fr}}

/* ==== Notifikasi background (di halaman notif) ==== */
.nt-bg-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.nt-bg-status{font-size:13px;color:var(--muted)}
.nt-bg-status.ok{color:var(--primary-d);font-weight:600}
.nt-bg-status.warn{color:var(--danger)}
.nt-ios-note{font-size:12px;margin:12px 0 0;line-height:1.55;background:var(--bg);border:1px solid var(--border-2);border-radius:10px;padding:10px 12px}

/* ==== Toleransi jatuh tempo ==== */
.badge-tol{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;background:var(--primary-soft);color:var(--primary-d);padding:3px 9px;border-radius:6px;white-space:nowrap}
.tol-toggle{display:inline-flex;margin:0}
.tol-switch{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--border);background:var(--surface);border-radius:999px;padding:4px 12px 4px 6px;cursor:pointer;font-size:11.5px;font-weight:600;color:var(--muted);transition:.15s}
.tol-switch:hover{border-color:var(--border-strong,var(--border));color:var(--ink)}
.tol-dot{width:15px;height:15px;border-radius:50%;background:var(--track);transition:.15s;flex:none}
.tol-switch.on{border-color:var(--primary);color:var(--primary-d);background:var(--primary-soft)}
.tol-switch.on .tol-dot{background:var(--primary)}

/* ==== Bulk update status item (slider) ==== */
.it-chk{width:30px;text-align:center}
.it-chk input,#itSelAll{width:16px;height:16px;cursor:pointer;accent-color:var(--primary)}
.item-row-main.sel-on{background:var(--primary-soft)}
.it-bulk{position:fixed;left:50%;transform:translateX(-50%);bottom:16px;z-index:200;display:flex;align-items:center;gap:16px;background:var(--surface);border:1px solid var(--border);border-radius:13px;box-shadow:0 12px 30px rgba(16,24,40,.20);padding:10px 16px;flex-wrap:wrap;max-width:calc(100vw - 24px)}
.it-bulk-info{font-size:13px;color:var(--ink);white-space:nowrap}
.it-bulk-badge{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 7px;background:var(--primary);color:#fff;border-radius:999px;font-size:12px;font-weight:800;margin-right:4px}
.it-bulk-slider{display:flex;align-items:center;gap:11px;min-width:230px}
.it-bulk-lbl{font-size:12px;font-weight:600;color:var(--muted);white-space:nowrap}
.it-bulk-chip{min-width:96px;justify-content:center}
.it-bulk-act{display:flex;gap:8px;flex-wrap:wrap}
.it-bulk-cancel{color:var(--danger)}
/* range ala volume */
.itrk{position:relative;flex:1 1 auto;min-width:150px;height:24px;display:flex;align-items:center}
.itrk-base{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);height:5px;border-radius:999px;background:var(--track)}
.itrk-fill{position:absolute;left:0;top:50%;transform:translateY(-50%);height:5px;border-radius:999px;background:var(--primary);width:0}
.itrk-knob{position:absolute;top:50%;left:0;width:15px;height:15px;border-radius:50%;background:var(--primary);box-shadow:0 1px 3px rgba(16,24,40,.3);transform:translate(-50%,-50%);pointer-events:none;z-index:3;transition:transform .1s ease}
#itStageRange{position:absolute;left:0;top:0;width:100%;height:24px;margin:0;-webkit-appearance:none;appearance:none;background:transparent;cursor:pointer;z-index:2}
#itStageRange:focus{outline:none}
#itStageRange::-webkit-slider-runnable-track{height:24px;background:transparent}
#itStageRange::-moz-range-track{height:24px;background:transparent}
#itStageRange::-moz-range-progress{background:transparent}
#itStageRange::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;margin-top:2px;background:transparent;border:none;box-shadow:none;cursor:grab}
#itStageRange::-webkit-slider-thumb:active{cursor:grabbing}
#itStageRange::-moz-range-thumb{width:20px;height:20px;background:transparent;border:none;cursor:grab}
#itStageRange:active ~ .itrk-knob{transform:translate(-50%,-50%) scale(1.18)}
@media(max-width:760px){.it-bulk{flex-direction:column;align-items:stretch;left:12px;right:12px;transform:none;max-width:none;gap:12px}.it-bulk-slider{min-width:0}.it-bulk-act{justify-content:center}}

/* ==== Versi aplikasi ==== */
.side-brand{display:flex;align-items:center;gap:9px}
.side-brand-txt{display:flex;flex-direction:column;line-height:1.12;min-width:0}
.side-brand-txt b{font-weight:700}
.app-ver{font-size:9px;font-weight:800;letter-spacing:.08em;color:#8b93a7;text-transform:uppercase;margin-top:1px}
.app-ver-badge{display:inline-block;font-size:11px;font-weight:700;color:var(--primary-d);background:var(--primary-soft);padding:2px 8px;border-radius:6px;vertical-align:middle;letter-spacing:.03em;margin-left:4px}

/* ==================== DEMO INTERAKTIF ==================== */
.demo-launch{display:flex;align-items:center;justify-content:center;gap:8px;width:calc(100% - 28px);margin:2px 14px 10px;padding:9px 12px;border:1px solid rgba(255,255,255,.14);background:linear-gradient(135deg,rgba(14,166,114,.22),rgba(14,166,114,.10));color:#eafff6;font-size:12.5px;font-weight:700;border-radius:10px;cursor:pointer;transition:.15s;font-family:inherit}
.demo-launch:hover{background:linear-gradient(135deg,rgba(14,166,114,.34),rgba(14,166,114,.18));border-color:var(--primary)}
.demo-launch-ic{display:flex}.demo-launch-ic svg{width:15px;height:15px}
/* overlay & spotlight */
.demo-overlay{position:fixed;inset:0;z-index:3000;background:rgba(15,23,42,.55)}
.demo-overlay.demo-overlay-clear{background:transparent;pointer-events:none}
.demo-hole{position:fixed;z-index:3001;border-radius:10px;box-shadow:0 0 0 9999px rgba(15,23,42,.58);pointer-events:none;transition:.2s ease}
.demo-target{outline:2px solid var(--primary);outline-offset:3px;border-radius:8px}
/* tooltip */
.demo-tip{position:fixed;z-index:3005;width:340px;max-width:calc(100vw - 24px);background:var(--surface);border-radius:14px;box-shadow:0 18px 48px rgba(15,23,42,.34);padding:16px 18px;animation:demoPop .18s ease}
.demo-tip-center{top:50%;left:50%;transform:translate(-50%,-50%)}
@keyframes demoPop{from{opacity:0;transform:translateY(6px) scale(.98)}to{opacity:1}}
.demo-tip-center{animation:none}
.demo-tip-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:9px}
.demo-badge{font-size:10px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;background:var(--primary-soft);color:var(--primary-d);padding:2px 8px;border-radius:6px}
.demo-count{font-size:11px;color:var(--muted);font-weight:600}
.demo-tip-title{font-family:Sora,sans-serif;font-size:16px;font-weight:700;color:var(--ink);margin:0 0 6px}
.demo-tip-body{font-size:13.5px;line-height:1.6;color:var(--ink);margin-bottom:14px}
.demo-tip-body b{color:var(--ink)}
.demo-tip-act{display:flex;align-items:center;justify-content:space-between;gap:10px}
.demo-btn-next,.demo-btn-skip{border:none;background:var(--primary);color:#fff;font-weight:700;font-size:13px;padding:8px 16px;border-radius:9px;cursor:pointer;font-family:inherit;transition:.14s}
.demo-btn-next:hover,.demo-btn-skip:hover{background:var(--primary-d)}
.demo-btn-skip{background:var(--surface-2);color:var(--muted)}
.demo-btn-skip:hover{background:var(--surface-2);color:var(--ink)}
.demo-btn-exit{border:none;background:none;color:var(--muted);font-size:12.5px;cursor:pointer;font-family:inherit;padding:6px 2px}
.demo-btn-exit:hover{color:var(--danger)}
/* modal (picker / resume / kesimpulan) */
.demo-modal{position:fixed;inset:0;z-index:3100;background:rgba(15,23,42,.55);display:flex;align-items:center;justify-content:center;padding:16px;animation:demoPop .16s ease}
.demo-modal-card{background:var(--surface);border-radius:18px;box-shadow:0 24px 60px rgba(15,23,42,.4);padding:24px;width:440px;max-width:100%}
.demo-modal-card h3{font-family:Sora,sans-serif;font-size:19px;font-weight:700;color:var(--ink);margin:0 0 6px}
.demo-modal-card>p{font-size:13.5px;line-height:1.6;color:var(--muted);margin:0 0 16px}
.demo-modal-act{display:flex;justify-content:flex-end;gap:8px;margin-top:6px}
.demo-pick-h{display:flex;gap:13px;align-items:flex-start;margin-bottom:16px}
.demo-pick-ic{flex:none;width:46px;height:46px;border-radius:12px;background:var(--primary-soft);color:var(--primary-d);display:flex;align-items:center;justify-content:center}
.demo-pick-ic svg{width:22px;height:22px}
.demo-pick-h h3{margin:0 0 3px}.demo-pick-h p{font-size:12.5px;color:var(--muted);margin:0;line-height:1.5}
.demo-roles{display:flex;flex-direction:column;gap:10px;margin-bottom:8px}
.demo-role{text-align:left;border:1.5px solid var(--border);background:var(--surface);border-radius:12px;padding:13px 15px;cursor:pointer;transition:.14s;font-family:inherit}
.demo-role:hover{border-color:var(--primary);background:var(--primary-soft);transform:translateY(-1px)}
.demo-role b{display:block;font-size:14px;color:var(--ink);margin-bottom:2px}
.demo-role span{font-size:12px;color:var(--muted);line-height:1.45}
.demo-done{text-align:center}
.demo-done-ic{width:60px;height:60px;margin:0 auto 12px;border-radius:50%;background:var(--primary-soft);color:var(--primary-d);display:flex;align-items:center;justify-content:center}
.demo-done-ic svg{width:32px;height:32px}
.demo-done .demo-modal-act{justify-content:center;margin-top:14px}
.demo-guide-link{display:inline-block;margin-top:12px;font-size:12.5px;color:var(--primary-d);text-decoration:none;font-weight:600}
.demo-guide-link:hover{text-decoration:underline}
@media(max-width:760px){.demo-launch{margin:2px 12px 8px;width:calc(100% - 24px)}}

/* ==================== PANDUAN PRESENTASI (gp-*) ==================== */
.gp{max-width:940px;margin:0 auto}
.gp-cover{background:linear-gradient(150deg,#0e1726 0%,#13233a 55%,#0e2d24 100%);color:#fff;border-radius:20px;padding:38px 36px;margin-bottom:10px;box-shadow:0 16px 44px rgba(15,23,42,.24)}
.gp-cover-badge{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;background:rgba(14,166,114,.25);color:#7ff0c4;padding:4px 12px;border-radius:999px;margin-bottom:16px}
.gp-cover-title{font-family:Sora,sans-serif;font-size:30px;line-height:1.15;font-weight:800;margin:0 0 12px;color:#fff}
.gp-cover-sub{font-size:14.5px;line-height:1.7;color:#c4cdda;max-width:680px;margin:0 0 24px}
.gp-toc{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px}
.gp-toc a{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10);border-radius:11px;padding:11px 14px;color:#e7ecf3;text-decoration:none;font-size:13.5px;font-weight:600;transition:.15s}
.gp-toc a:hover{background:rgba(14,166,114,.22);border-color:var(--primary)}
.gp-toc a span{font-family:Sora,sans-serif;font-size:12px;font-weight:800;color:#7ff0c4;background:rgba(14,166,114,.20);width:26px;height:26px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex:none}
.gp-chapter{display:flex;align-items:center;gap:14px;margin:40px 4px 14px}
.gp-chap-no{font-family:Sora,sans-serif;font-size:16px;font-weight:800;color:#fff;background:var(--primary);width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;flex:none;box-shadow:0 6px 16px rgba(14,166,114,.35)}
.gp-chap-title{font-family:Sora,sans-serif;font-size:23px;font-weight:800;color:var(--ink);margin:0}
.gp-sec{padding:24px 26px;margin-bottom:16px}
.gp-h3{display:flex;align-items:center;gap:9px;font-family:Sora,sans-serif;font-size:16px;font-weight:700;color:var(--ink);margin:0 0 12px}
.gp-h3 svg{width:19px;height:19px;color:var(--primary-d);flex:none}
.gp-sec .gp-h3:not(:first-child){margin-top:8px}
/* konsep */
.gp-concept{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin-top:16px}
.gp-concept-card{border:1px solid var(--border);border-radius:14px;padding:18px}
.gp-concept-ic{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:12px}
.gp-concept-ic svg{width:22px;height:22px}
.gp-concept-ic.ic-green{background:var(--primary-soft);color:var(--primary-d)}
.gp-concept-ic.ic-blue{background:var(--info-soft);color:#3b5bdb}
.gp-concept-ic.ic-amber{background:var(--warn-soft);color:#c47f0a}
.gp-concept-ic.ic-purple{background:var(--info-soft);color:#6f42c1}
.gp-concept-card h3{font-size:14.5px;font-weight:700;color:var(--ink);margin:0 0 5px}
.gp-concept-card p{font-size:12.5px;line-height:1.55;color:var(--muted);margin:0}
/* 2col info */
.gp-2col{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;margin-top:8px}
.gp-2col>div{background:var(--bg);border:1px solid var(--border-2);border-radius:12px;padding:14px 15px;font-size:13px;line-height:1.6;color:var(--ink)}
.gp-2col>div b{color:var(--ink)}
/* peran */
.gp-role{border:1px solid var(--border);border-radius:16px;padding:20px 22px;margin-top:16px}
.gp-role:first-of-type{margin-top:18px}
.gp-role-head{display:flex;align-items:center;gap:13px;margin-bottom:12px}
.gp-role-ic{width:48px;height:48px;border-radius:13px;display:flex;align-items:center;justify-content:center;flex:none}
.gp-role-ic svg{width:24px;height:24px}
.gp-role-ic.admin{background:var(--warn-soft);color:#c47f0a}
.gp-role-ic.user{background:var(--primary-soft);color:var(--primary-d)}
.gp-role-ic.guest{background:var(--surface-2);color:#697086}
.gp-role-head h3{font-family:Sora,sans-serif;font-size:18px;font-weight:700;margin:0;color:var(--ink)}
.gp-role-head p{margin:2px 0 0;font-size:12.5px}
.gp-role-desc{font-size:13.5px;line-height:1.65;color:var(--ink);margin:0 0 14px}
.gp-role-cols{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.gp-role-cols>div>b{display:block;font-size:12.5px;color:var(--ink);margin-bottom:8px}
.gp-role-cols ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:6px}
.gp-role-cols li{font-size:12.5px;line-height:1.5;color:var(--muted)}
.gp-role-cols li.no{list-style:none;margin-left:-18px;padding-left:22px;position:relative;color:#9aa1b1}
.gp-role-cols li.no::before{content:"✕";position:absolute;left:4px;color:var(--danger);font-weight:800;font-size:11px}
/* menu list */
.gp-menu{display:flex;flex-direction:column;gap:2px;margin-top:14px}
.gp-menu-item{display:flex;gap:14px;padding:14px 6px;border-bottom:1px solid var(--border-2)}
.gp-menu-item:last-child{border-bottom:none}
.gp-menu-ic{flex:none;width:40px;height:40px;border-radius:11px;background:var(--bg);color:var(--primary-d);display:flex;align-items:center;justify-content:center}
.gp-menu-ic svg{width:20px;height:20px}
.gp-menu-title{font-size:14px;font-weight:700;color:var(--ink);margin-bottom:3px}
.gp-menu-body p{font-size:12.5px;line-height:1.6;color:var(--muted);margin:0}
.gp-adm-tag{font-size:9px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;background:var(--warn-soft);color:#c47f0a;padding:2px 7px;border-radius:5px;vertical-align:1px}
.gp-soon{font-size:9px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;background:var(--danger);color:#fff;padding:2px 7px;border-radius:5px;margin-right:4px}
.gp-end{text-align:center;font-size:12.5px;color:var(--muted);padding:24px 10px 8px}
@media(max-width:760px){.gp-cover{padding:28px 22px}.gp-cover-title{font-size:24px}.gp-2col{grid-template-columns:1fr}.gp-role-cols{grid-template-columns:1fr;gap:14px}.gp-chap-title{font-size:20px}}

/* ==== Logo brand (tas belanja P) ==== */
.brand-logo{width:46px;height:46px;display:block;flex:none}
.brand-logo-sm{width:32px;height:32px}

/* ==================== DARK MODE ==================== */
html.dark{
  color-scheme:dark;
  --bg:#0e1218; --surface:#171d27; --surface-2:#1e2530;
  --ink:#e6eaf1; --muted:#9aa3b4;
  --border:#2a323f; --border-2:#222a35;
  --primary:#12b981; --primary-d:#0e9f6e; --primary-soft:#123329;
  --danger:#f2596f; --warn:#f5b23f;
  --track:#2a323f; --warn-soft:#33280f; --danger-soft:#3a1a25; --warn-ink:#f0c674; --info-soft:#182741;
  --sidebar:#0b0e14; --sidebar-2:#161d27;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.45);
}
html.dark input,html.dark select,html.dark textarea,html.dark .tep-grid input,html.dark .tep-grid select{background:var(--surface-2);color:var(--ink);border-color:var(--border)}
/* permukaan putih hardcoded -> gelap */
html.dark .notif-panel,html.dark .notif-bell,html.dark .it-bulk,html.dark .pwa-banner,html.dark .pwa-ios-card,
html.dark .demo-tip,html.dark .demo-modal-card,html.dark .demo-role,html.dark .pw-reset-form,
html.dark .kb-col-body,html.dark .tdo,html.dark .filters,html.dark .pr-search,html.dark .item-card,
html.dark .ps-card,html.dark .ps-req,html.dark .scrape-card,html.dark .scrape-how,html.dark .scrape-note,html.dark .scrape-hero,
html.dark .bk-hero,html.dark .bk-week,html.dark .tt-box,html.dark .tck-box,html.dark .tep-grid,html.dark .g-hero,html.dark .g-note,
html.dark .tdo-guide,html.dark .theme-toggle,html.dark .cm-inline,html.dark .cm-lab-edit-row,html.dark .nt-field,
html.dark .seg-toggle,html.dark .viz-toggle,html.dark .role-select,html.dark .bin-note,html.dark .kb-add,html.dark .pg,html.dark .tck-input,html.dark .g-step{background:var(--surface);border-color:var(--border);color:var(--ink)}
html.dark .kb-col-body{background:var(--bg)}
/* teks gelap hardcoded -> terang */
html.dark .demo-tip-body,html.dark .demo-role span,html.dark .gp-role-desc,html.dark .gp-cover-sub,html.dark .gp-2col>div,html.dark .gp-menu-body p,html.dark .ps-card li,html.dark .g-lead,html.dark .bk-lead,html.dark .nt-desc{color:var(--muted)}
html.dark .demo-tip-title,html.dark .demo-role b,html.dark .demo-modal-card h3,html.dark .gp-chap-title,html.dark .gp-concept-card h3,html.dark .gp-menu-title,html.dark .notif-title,html.dark .bk-title,html.dark .nt-hero h2,html.dark .pw-head h2{color:var(--ink)}
html.dark .itrk-base{background:#2a323f}
html.dark .notif-item.unread{background:#12241d}
html.dark .notif-item:hover,html.dark .demo-role:hover{background:var(--surface-2)}
html.dark .table-wrap table tr:hover,html.dark tbody tr:hover{background:var(--surface-2)}
html.dark .btn-ghost{background:var(--surface-2);border-color:var(--border);color:var(--ink)}
html.dark .demo-overlay,html.dark .demo-modal,html.dark .pwa-ios,html.dark .cardmodal{background:rgba(0,0,0,.6)}

/* ==================== TOAST ==================== */
.toast-wrap{position:fixed;bottom:20px;right:20px;z-index:9998;display:flex;flex-direction:column;gap:10px;align-items:flex-end;pointer-events:none}
.toast{display:flex;align-items:center;gap:10px;background:var(--surface);color:var(--ink);border:1px solid var(--border);border-radius:12px;padding:11px 15px 11px 12px;box-shadow:0 10px 30px rgba(16,24,40,.20);font-size:13.5px;font-weight:500;transform:translateY(14px) scale(.97);opacity:0;transition:transform .26s cubic-bezier(.34,1.3,.64,1),opacity .26s ease;max-width:340px;pointer-events:auto}
.toast.show{transform:none;opacity:1}
.toast-ic{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px;font-weight:800;flex:none;background:var(--primary)}
.toast-err .toast-ic{background:var(--danger)}
.toast-info .toast-ic{background:#3b82f6;font-style:italic;font-family:Georgia,serif}
@media(max-width:600px){.toast-wrap{left:12px;right:12px;bottom:12px;align-items:stretch}.toast{max-width:none}}

/* ==================== LOADING BAR ==================== */
#ldbar{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,var(--primary),#34d399);z-index:10000;opacity:0;box-shadow:0 0 8px rgba(14,166,114,.6);transition:width .35s ease}
#ldbar.active{opacity:1}
#ldbar.done{transition:width .2s ease,opacity .3s ease .1s;opacity:0}

/* ==================== THEME TOGGLE (topbar) ==================== */
.theme-toggle{width:38px;height:38px;border:1px solid var(--border);background:var(--surface);border-radius:10px;cursor:pointer;color:var(--muted);display:grid;place-items:center;transition:.12s;padding:0}
.theme-toggle:hover{color:var(--ink);background:var(--bg)}
.theme-toggle svg{width:18px;height:18px}

/* knob & marker tetap putih (di atas elemen berwarna) */
.nt-switch span,.ship-dot,.step-dot,.fstep-dot,.tol-dot.on{background:#fff}
html.dark .nt-switch span,html.dark .ship-dot,html.dark .step-dot,html.dark .fstep-dot{background:#f4f6fa}

/* cursor pointer di elemen yang bisa diklik */
.focus-row,.lux-row,.tdo,.kb-col-head,.per-opt,.range-pills a,.viz-toggle a,.seg-toggle a,.tag-multi,.thumb,.pr-thumb,.notif-item,.demo-role,.range-pill{cursor:pointer}

/* ==== Filter Per PR / Per Item ==== */
.pr-mode-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 10px}
.pr-mode{display:inline-flex;background:var(--surface-2);border:1px solid var(--border);border-radius:9px;padding:3px;gap:2px}
.pr-mode-btn{padding:5px 14px;border-radius:7px;font-size:12.5px;font-weight:600;color:var(--muted);text-decoration:none;transition:.12s;cursor:pointer}
.pr-mode-btn.on{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgba(16,24,40,.12)}
.pr-mode-btn:not(.on):hover{color:var(--ink)}
.pr-mode-hint{font-size:12px;color:var(--muted)}
.pr-mode-hint b{color:var(--primary);font-weight:600}
.item-match{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;padding:2px 8px;border-radius:999px;color:var(--c);background:color-mix(in srgb,var(--c) 14%,var(--surface));border:1px solid color-mix(in srgb,var(--c) 30%,var(--surface));white-space:nowrap;margin-left:4px}


/* ==== Avatar foto & Halaman Profil ==== */
.avatar img{width:100%;height:100%;object-fit:cover;border-radius:inherit}
.prof-wrap{max-width:720px;margin:0 auto;display:flex;flex-direction:column;gap:16px}
.prof-hero{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.prof-ava-lg{width:88px;height:88px;border-radius:22px;background:var(--sidebar-2);color:#fff;display:grid;place-items:center;font-size:34px;font-weight:700;flex:none;overflow:hidden}
.prof-ava-lg img,.prof-ava-md img{width:100%;height:100%;object-fit:cover}
.prof-hero-info h1{margin:0 0 6px;font-size:22px}
.prof-meta-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.prof-uname{color:var(--muted);font-size:13px}
.prof-tenure{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:var(--primary);background:var(--primary-soft);border:1px solid color-mix(in srgb,var(--primary) 25%,var(--surface));padding:6px 12px;border-radius:999px}
.prof-tenure svg{width:16px;height:16px}
.prof-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.prof-fact{display:flex;flex-direction:column;gap:4px;padding:14px;background:var(--surface-2);border-radius:12px}
.prof-fact-lbl{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-weight:600}
.prof-fact-val{font-size:15px;font-weight:600;color:var(--ink)}
.prof-form-photo{display:flex;align-items:center;gap:16px;margin-bottom:18px}
.prof-ava-md{width:64px;height:64px;border-radius:16px;background:var(--sidebar-2);color:#fff;display:grid;place-items:center;font-size:24px;font-weight:700;flex:none;overflow:hidden}
.prof-hint{margin:6px 0 0;font-size:12px}
.prof-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.prof-actions{margin-top:18px}
.field{display:flex;flex-direction:column;gap:6px}
.field>span{font-size:12.5px;font-weight:600;color:var(--ink)}
.badge-role{font-size:11px;font-weight:700;padding:3px 10px;border-radius:999px;background:var(--surface-2);color:var(--muted);border:1px solid var(--border)}
.badge-role.role-admin{background:color-mix(in srgb,var(--warn) 15%,var(--surface));color:var(--warn-ink);border-color:color-mix(in srgb,var(--warn) 30%,var(--surface))}
.badge-role.role-user{background:var(--primary-soft);color:var(--primary);border-color:color-mix(in srgb,var(--primary) 25%,var(--surface))}
@media(max-width:600px){.prof-facts{grid-template-columns:1fr}.prof-grid{grid-template-columns:1fr}}

/* ==== Account dropdown (pojok kanan atas) ==== */
.acct-wrap{position:relative}
.acct-btn{width:38px;height:38px;border-radius:10px;border:1px solid var(--border);background:var(--surface);padding:0;cursor:pointer;overflow:hidden;display:grid;place-items:center;transition:.12s}
.acct-btn:hover{border-color:color-mix(in srgb,var(--primary) 40%,var(--border))}
.acct-ava{width:100%;height:100%;display:grid;place-items:center;font-weight:700;font-size:14px;color:#fff;background:var(--sidebar-2);border-radius:inherit;overflow:hidden}
.acct-ava img{width:100%;height:100%;object-fit:cover}
.acct-menu{position:absolute;right:0;top:calc(100% + 8px);width:236px;background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:0 12px 34px rgba(16,24,40,.18);padding:6px;z-index:200}
.acct-head{display:flex;align-items:center;gap:10px;padding:8px 8px 12px;border-bottom:1px solid var(--border);margin-bottom:6px}
.acct-ava-lg{width:42px;height:42px;border-radius:11px;flex:none;font-size:17px}
.acct-head-txt{min-width:0}
.acct-head-txt b{display:block;font-size:14px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acct-head-txt .badge-role{margin-top:4px;display:inline-block}
.acct-item{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;color:var(--ink);text-decoration:none;font-size:13.5px;font-weight:500;transition:.1s;cursor:pointer}
.acct-item svg{width:17px;height:17px;color:var(--muted);flex:none}
.acct-item:hover{background:var(--surface-2)}
.acct-logout{color:var(--danger)}
.acct-logout svg{color:var(--danger)}
.side-foot:empty{display:none;padding:0;border:0;margin:0}

/* ==== Performa Tim ==== */
.perf-num{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin:6px 0 10px}
.perf-big{font-size:38px;font-weight:800;color:var(--ink);line-height:1}
.perf-unit{font-size:13px;color:var(--muted);font-weight:600}
.perf-sub{font-size:13px;color:var(--muted)}
.perf-sub b{color:var(--ink);font-weight:700}
.ot-bar{display:flex;height:9px;border-radius:999px;overflow:hidden;background:var(--track);margin:4px 0 10px}
.ot-on{background:var(--primary)}.ot-late{background:var(--danger)}
.ot-leg{font-weight:600}.ot-leg.on{color:var(--primary)}.ot-leg.late{color:var(--danger)}

/* ==== Banner ultah & anniversary ==== */
.celebrate{display:flex;align-items:center;gap:14px;padding:14px 18px;border-radius:16px;margin-bottom:16px;background:linear-gradient(120deg,color-mix(in srgb,var(--primary) 14%,var(--surface)),color-mix(in srgb,var(--warn) 14%,var(--surface)));border:1px solid color-mix(in srgb,var(--primary) 22%,var(--border))}
.celebrate-emoji{font-size:30px;flex:none;line-height:1}
.celebrate-body{display:flex;flex-direction:column;gap:6px;min-width:0}
.celebrate-line{display:flex;align-items:center;gap:9px;font-size:14px;color:var(--ink)}
.celebrate-line b{font-weight:700}
.celebrate-ava{width:30px;height:30px;border-radius:50%;flex:none;display:grid;place-items:center;font-size:13px;font-weight:700;color:#fff;background:var(--sidebar-2);overflow:hidden}
.celebrate-ava img{width:100%;height:100%;object-fit:cover}
.celebrate-cta{color:var(--primary);font-weight:600}

/* fallback inisial saat foto avatar gagal dimuat */
.ava-fb{width:100%;height:100%;display:grid;place-items:center;font-weight:700;color:#fff;border-radius:inherit}

/* ==== Filter row rapi (Opsi A) ==== */
.filter-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 12px}
.stat-dd{position:relative}
.stat-dd-btn{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 12px;border:1px solid var(--border);background:var(--surface);border-radius:9px;font-size:13px;font-weight:600;color:var(--ink);cursor:pointer;transition:.12s;min-width:150px}
.stat-dd-btn:hover{border-color:color-mix(in srgb,var(--primary) 40%,var(--border))}
.stat-dd-cur{flex:1;text-align:left;white-space:nowrap}
.stat-dd-chev{width:15px;height:15px;color:var(--muted);flex:none}
.stat-dot{width:9px;height:9px;border-radius:50%;flex:none}
.stat-dd-menu{position:fixed;width:230px;max-height:min(340px,70vh);overflow:auto;background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:0 12px 34px rgba(16,24,40,.28);padding:6px;z-index:1000}
.stat-dd-item{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:8px;color:var(--ink);text-decoration:none;font-size:13px;font-weight:500;white-space:nowrap;transition:.1s}
.stat-dd-item:hover{background:var(--surface-2)}
.stat-dd-item.on{background:var(--primary-soft);color:var(--primary);font-weight:600}

/* ==== Performa Tim (enriched) ==== */
.perf-delta{font-size:12px;font-weight:700;padding:3px 9px;border-radius:999px}
.perf-delta.up{color:var(--primary);background:var(--primary-soft)}
.perf-delta.down{color:var(--danger);background:var(--danger-soft)}
.perf-chips{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:2px}
.perf-chip{display:flex;flex-direction:column;gap:1px;padding:8px 12px;background:var(--surface-2);border-radius:10px;min-width:80px}
.perf-chip span{font-size:11px;color:var(--muted);font-weight:600}
.perf-chip b{font-size:15px;color:var(--ink);font-weight:700}
.perf-spark{margin-top:16px}
.spark-title{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-weight:600;margin-bottom:16px}
.spark-bars{display:flex;align-items:flex-end;gap:10px;height:84px}
.spark-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:7px;height:100%;justify-content:flex-end}
.spark-bar{width:100%;max-width:32px;background:linear-gradient(180deg,var(--primary),#34d399);border-radius:6px 6px 0 0;min-height:2px;position:relative;transition:height .5s cubic-bezier(.22,.61,.36,1)}
.spark-bar>span{position:absolute;top:-17px;left:50%;transform:translateX(-50%);font-size:11px;font-weight:700;color:var(--ink);white-space:nowrap}
.spark-bar.ot{background:linear-gradient(180deg,#3b82f6,#60a5fa)}
.spark-col:not(.cur) .spark-bar{opacity:.5}
.spark-col.cur .spark-lbl{color:var(--primary);font-weight:700}
.spark-lbl{font-size:11px;color:var(--muted)}

/* icon bulb (Analisa Produk) */
i[data-i=bulb]{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='9' y1='18' x2='15' y2='18'/%3E%3Cline x1='10' y1='22' x2='14' y2='22'/%3E%3Cpath d='M15.09 14c.18-.98.65-1.74 1.41-2.5A4.65 4.65 0 0 0 18 8 6 6 0 0 0 6 8c0 1 .23 2.23 1.5 3.5.76.76 1.23 1.52 1.41 2.5'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='9' y1='18' x2='15' y2='18'/%3E%3Cline x1='10' y1='22' x2='14' y2='22'/%3E%3Cpath d='M15.09 14c.18-.98.65-1.74 1.41-2.5A4.65 4.65 0 0 0 18 8 6 6 0 0 0 6 8c0 1 .23 2.23 1.5 3.5.76.76 1.23 1.52 1.41 2.5'/%3E%3C/svg%3E")}

/* ==== Analisa Produk ==== */
.pa-wrap{display:flex;flex-direction:column;gap:16px}
.pa-hero{display:flex;align-items:flex-start;gap:16px}
.pa-hero-ic{width:46px;height:46px;border-radius:13px;background:var(--primary-soft);color:var(--primary);display:grid;place-items:center;flex:none}
.pa-hero-ic i{width:22px;height:22px}
.pa-hero h1{margin:0 0 4px;font-size:20px}
.pa-narr{margin:8px 0 0;font-size:14px;color:var(--ink);line-height:1.5}
.pa-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.pa-bars{display:flex;flex-direction:column;gap:11px;margin-top:6px}
.pa-bar-row{display:grid;grid-template-columns:130px 1fr 34px;align-items:center;gap:12px}
.pa-bar-lbl{font-size:13px;color:var(--ink);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pa-bar{height:9px;border-radius:999px;background:var(--track);overflow:hidden}
.pa-bar>span{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--primary),#34d399);transition:width .5s cubic-bezier(.22,.61,.36,1)}
.pa-bar.mat>span{background:linear-gradient(90deg,#6366f1,#818cf8)}
.pa-bar-val{font-size:13px;font-weight:700;color:var(--ink);text-align:right}
.pa-items{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.pa-item{display:inline-flex;align-items:center;gap:8px;background:var(--surface-2);border:1px solid var(--border);border-radius:999px;padding:6px 8px 6px 14px;font-size:13px;color:var(--ink);font-weight:500}
.pa-item-cnt{background:var(--primary-soft);color:var(--primary);font-weight:700;font-size:12px;padding:2px 8px;border-radius:999px}
.pa-ai-soon{display:flex;align-items:flex-start;gap:16px;background:linear-gradient(120deg,color-mix(in srgb,var(--primary) 8%,var(--surface)),color-mix(in srgb,#6366f1 9%,var(--surface)));border:1px dashed color-mix(in srgb,var(--primary) 30%,var(--border))}
.pa-ai-ic{font-size:26px;flex:none;line-height:1}
.pa-ai-body b{font-size:15px}
.pa-ai-body p{margin:5px 0 10px}
.pa-ai-badge{display:inline-block;font-size:11px;font-weight:700;color:var(--primary);background:var(--primary-soft);padding:4px 10px;border-radius:999px}
@media(max-width:820px){.pa-grid{grid-template-columns:1fr}.pa-bar-row{grid-template-columns:110px 1fr 30px}}

/* ==== Fokus Hari Ini: mode hint & match ==== */
.focus-hint{font-size:11.5px;color:var(--muted);margin:1px 0 12px}
.focus-hint b{color:var(--ink);font-weight:600}
.focus-match{color:var(--primary);font-weight:600}

/* ==== Sinyal komersial (Analisa Produk) ==== */
.pa-signals{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.pa-sig{display:flex;flex-direction:column;gap:3px;padding:16px;background:var(--surface);border:1px solid var(--border);border-radius:14px}
.pa-sig-lbl{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-weight:600}
.pa-sig-val{font-size:26px;font-weight:800;color:var(--ink);line-height:1.1}
.pa-sig-sub{font-size:11.5px;color:var(--muted)}
.pa-bar.seg>span{background:linear-gradient(90deg,#f59e0b,#fbbf24)}
.pa-trend{display:flex;flex-direction:column;gap:9px;margin-top:6px}
.pa-trend-row{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:10px}
.pa-trend-dir{font-size:11.5px;font-weight:700;padding:2px 9px;border-radius:999px}
.pa-trend-dir.up{color:var(--primary);background:var(--primary-soft)}
.pa-trend-dir.down{color:var(--danger);background:var(--danger-soft)}
.pa-trend-dir.flat{color:var(--muted);background:var(--surface-2)}
.pa-trend-num{font-size:12px;color:var(--muted);min-width:52px;text-align:right}
.pa-trend-num b{color:var(--ink)}

/* ==== Radar Produk ==== */
.rdr-wrap{display:flex;flex-direction:column;gap:16px}
.rdr-hero{display:flex;align-items:flex-start;gap:16px}
.rdr-hero-ic{font-size:30px;flex:none;line-height:1}
.rdr-hero h1{margin:0 0 4px;font-size:20px}
.rdr-badge{display:inline-block;margin-top:8px;font-size:11px;font-weight:700;color:var(--warn-ink);background:var(--warn-soft);padding:4px 10px;border-radius:999px}
.rdr-debug{font-size:13px}
.rdr-debug-row{display:grid;grid-template-columns:110px 1fr;gap:10px;margin-top:6px;align-items:baseline}
.rdr-debug-row span{color:var(--muted);font-size:12px}
.rdr-debug-row code{font-size:12px;word-break:break-all;color:var(--ink)}
.rdr-debug .ok{color:var(--primary)}.rdr-debug .bad{color:var(--danger)}
.rdr-add summary{cursor:pointer;font-weight:600;font-size:14px}
.rdr-form{margin-top:14px;display:flex;flex-direction:column;gap:12px}
.rdr-form-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.rdr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.rdr-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;transition:.15s}
.rdr-card:hover{box-shadow:var(--shadow)}
.rdr-card.is-skip{opacity:.5}
.rdr-img{position:relative;aspect-ratio:4/3;background:var(--surface-2);display:grid;place-items:center;overflow:hidden}
.rdr-img img{width:100%;height:100%;object-fit:contain}
.rdr-noimg{font-size:12px;color:var(--muted)}
.rdr-tag{position:absolute;top:8px;left:8px;font-size:10.5px;font-weight:700;padding:3px 9px;border-radius:999px;color:#fff;background:var(--primary)}
.rdr-body{padding:13px 14px 14px;display:flex;flex-direction:column;gap:7px;flex:1}
.rdr-name{font-size:14px;font-weight:700;color:var(--ink);line-height:1.35}
.rdr-meta{display:flex;gap:6px;flex-wrap:wrap}
.rdr-brand,.rdr-cat{font-size:11px;font-weight:600;padding:2px 8px;border-radius:999px;background:var(--surface-2);color:var(--muted)}
.rdr-brand{background:var(--info-soft);color:#4f46e5}
.rdr-price{font-size:14px;font-weight:700;color:var(--ink);display:flex;align-items:baseline;gap:7px;flex-wrap:wrap}
.rdr-est{font-size:10.5px;font-weight:600;color:var(--muted);background:var(--surface-2);padding:2px 7px;border-radius:999px}
.rdr-margin{font-size:12px;color:var(--muted)}
.rdr-margin b{color:var(--ink)}
.rdr-warn{font-size:10px;color:var(--warn-ink);background:var(--warn-soft);padding:1px 6px;border-radius:999px;margin-left:3px}
.rdr-reason{font-size:12px;color:var(--muted);line-height:1.5;background:var(--surface-2);padding:8px 10px;border-radius:9px}
.rdr-act{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:auto;padding-top:4px}
.rdr-link{font-size:12px;font-weight:600;color:var(--primary);text-decoration:none;margin-right:auto}
.rdr-inline{display:inline-flex;gap:5px}
.rdr-btn{border:1px solid var(--border);background:var(--surface);color:var(--muted);border-radius:7px;padding:4px 9px;font-size:11.5px;font-weight:600;cursor:pointer;transition:.12s}
.rdr-btn:hover{color:var(--ink);background:var(--surface-2)}
.rdr-btn.keep:hover{color:var(--primary);border-color:var(--primary)}
.rdr-btn.skip:hover,.rdr-btn.del:hover{color:var(--danger);border-color:var(--danger)}
@media(max-width:820px){.pa-signals{grid-template-columns:1fr}.rdr-form-grid{grid-template-columns:1fr}}

/* ==== Tab Analitik ==== */
.an-tabs{display:inline-flex;gap:3px;background:var(--surface-2);border:1px solid var(--border);border-radius:11px;padding:4px;margin-bottom:18px;flex-wrap:wrap}
.an-tab{display:inline-flex;align-items:center;gap:7px;padding:7px 16px;border-radius:8px;font-size:13.5px;font-weight:600;color:var(--muted);text-decoration:none;transition:.12s;cursor:pointer}
.an-tab:hover{color:var(--ink)}
.an-tab.on{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgba(16,24,40,.12)}
.an-tab-soon{font-size:9px;font-weight:800;letter-spacing:.03em;color:#fff;background:var(--danger);padding:2px 5px;border-radius:4px;line-height:1}

/* ==== Radar: opsi gambar cadangan ==== */
.rdr-imgopt{border:1px dashed var(--border);border-radius:11px;padding:12px 14px;background:var(--surface-2)}
.rdr-imgopt-h{font-size:12.5px;font-weight:600;color:var(--ink);margin-bottom:10px;line-height:1.5}
.rdr-form-grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.rdr-fiximg{margin-top:8px;border-top:1px solid var(--border);padding-top:8px}
.rdr-fiximg summary{font-size:11.5px;color:var(--muted);cursor:pointer;font-weight:600}
.rdr-fiximg-form{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.rdr-fiximg-form input{font-size:12px;padding:6px 9px}
@media(max-width:820px){.rdr-form-grid2{grid-template-columns:1fr}}

/* ==== Radar: penanda gambar ilustrasi ==== */
.rdr-tag.illu{left:auto;right:8px;background:var(--warn);color:#3d2a06}
.rdr-illu-note{font-size:11px;line-height:1.5;color:var(--warn-ink);background:var(--warn-soft);border:1px solid color-mix(in srgb,var(--warn) 28%,var(--surface));padding:6px 9px;border-radius:8px}
.rdr-illu-note a{color:var(--warn-ink);font-weight:700}
.rdr-chk{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);margin-top:10px;cursor:pointer}
.rdr-chk input{width:15px;height:15px;cursor:pointer}

/* ==== Radar: panel AI & skor ==== */
.rdr-ai{display:flex;align-items:flex-start;gap:16px;background:linear-gradient(120deg,color-mix(in srgb,var(--primary) 8%,var(--surface)),color-mix(in srgb,#6366f1 9%,var(--surface)));border:1px dashed color-mix(in srgb,var(--primary) 30%,var(--border))}
.rdr-ai-ic{font-size:26px;flex:none;line-height:1}
.rdr-ai-body b{font-size:15px}
.rdr-ai-body p{margin:5px 0 0;font-size:13px;line-height:1.55}
.rdr-ai-form{display:flex;gap:8px;align-items:center;margin-top:12px;flex-wrap:wrap}
.rdr-ai-form select{height:34px;padding:0 10px;font-size:13px}
.rdr-top{display:flex;align-items:flex-start;gap:9px;justify-content:space-between}
.rdr-score{flex:none;min-width:34px;height:26px;padding:0 8px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:800}
.rdr-score.hi{background:var(--primary);color:#fff}
.rdr-score.mid{background:var(--warn-soft);color:var(--warn-ink)}
.rdr-score.low{background:var(--surface-2);color:var(--muted)}
.rdr-notes{display:flex;flex-direction:column;gap:4px}
.rdr-note-i{font-size:11.5px;color:var(--muted);line-height:1.45}
.rdr-conf{font-size:11px;color:var(--muted)}
.rdr-dots{letter-spacing:2px;color:var(--primary)}

/* ==== Perbaikan dark mode: pill periode & tab aktif ==== */
/* pill periode tidak punya --c, jadi teksnya harus ikut membalik biar tetap terbaca */
.pill.pill-range.on,.filters .pill.pill-range.on{background:var(--ink);border-color:var(--ink);color:var(--surface)}
.pill.pill-range:hover{border-color:color-mix(in srgb,var(--primary) 45%,var(--border));color:var(--ink)}
/* tab aktif: di mode gelap dibuat lebih terang dari wadahnya biar jelas */
html.dark .an-tab.on{background:var(--track);color:var(--ink);box-shadow:none}
html.dark .an-tabs{background:var(--bg)}
html.dark .pr-mode{background:var(--bg)}
html.dark .pr-mode-btn.on{background:var(--track);color:var(--ink);box-shadow:none}