/* Cilik Pintar Admin: tema */
:root{
  --ink:#13235B;--ink2:#0E1A47;--ink3:#2A3C80;--sun:#F2B705;--sun2:#FFD54A;
  --bg1:#F4F3FD;--bg2:#FFF8EA;--card:#fff;--line:#E6E8F3;--text:#262D4D;--muted:#6A7192;
  --red:#C2362B;--green:#178A5B;--r:18px;--sh:0 6px 24px rgba(30,40,100,.07);
  --c1:#2a78d6;--c2:#eb6834;--c3:#1baf7a;--c4:#eda100;--c5:#e87ba4;--c6:#A3A9C2;
  --k1:#F2B705;--k1b:#FFF7DC;--k2:#6250d6;--k2b:#F2EFFF;--k3:#1baf7a;--k3b:#E6F7EF;--k4:#eb6834;--k4b:#FFF0E8;
  --st-g:#1baf7a;--st-b:#2a78d6;--st-y:#F2B705;--st-r:#e34948
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:linear-gradient(135deg,var(--bg1) 0%,#FBF8FF 45%,var(--bg2) 100%) fixed;font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;color:var(--text);font-size:15px;line-height:1.5}
a{color:var(--ink)}
h1{font-size:24px;color:var(--ink);margin:0;line-height:1.25;letter-spacing:-.01em}
h2{font-size:17px;color:var(--ink);margin:0;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
h3{font-size:15px;color:var(--ink);margin:18px 0 8px}
.muted{color:var(--muted)}.small{font-size:13px}.center{text-align:center}.right{text-align:right}.hide{display:none!important}
.ic{width:20px;height:20px;flex:0 0 auto}
.wrap{max-width:1320px;margin:0 auto;padding:18px 22px}
.wrap.narrow,.narrow{max-width:560px}

/* ---- susun atur: sisi + utama ---- */
.navt{position:absolute;opacity:0;pointer-events:none}
.app{display:flex;min-height:100vh}
.side{width:256px;flex:0 0 256px;background:rgba(255,255,255,.85);backdrop-filter:blur(8px);border-right:1px solid var(--line);padding:22px 16px;position:sticky;top:0;height:100vh;overflow-y:auto;display:flex;flex-direction:column;gap:18px;z-index:40}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);padding:0 8px}
.brand b{display:block;font-size:20px;font-weight:800;letter-spacing:-.01em}.brand small{display:block;color:var(--muted);font-size:12px;margin-top:-2px}
.logo{width:42px;height:42px;border-radius:12px;background:linear-gradient(135deg,var(--sun2),var(--sun));color:var(--ink);display:inline-flex;align-items:center;justify-content:center;font-weight:900;font-size:22px;box-shadow:0 4px 12px rgba(242,183,5,.35)}
.snav{display:flex;flex-direction:column;gap:4px}
.snav a{display:flex;align-items:center;gap:14px;padding:12px 14px;border-radius:12px;color:#3A4268;text-decoration:none;font-weight:600}
.snav a:hover{background:#F1F2FA}
.snav a.on{background:linear-gradient(135deg,var(--ink3),var(--ink));color:#fff;box-shadow:0 6px 16px rgba(19,35,91,.28)}
.promo{margin-top:auto;border-radius:16px;padding:16px;background:linear-gradient(160deg,#13235B 0%,#24357A 70%,#3A4C99 100%);color:#fff;position:relative;overflow:hidden}
.promo:after{content:"";position:absolute;right:-40px;bottom:-40px;width:120px;height:120px;border-radius:50%;background:rgba(242,183,5,.16);pointer-events:none}.promo>*{position:relative;z-index:1}
.promo b{font-size:15px}.promo ul{list-style:none;padding:0;margin:10px 0 8px;font-size:13px}.promo li{display:flex;align-items:center;gap:8px;padding:3px 0;color:#DDE2F6}
.promo .dot{width:8px;height:8px;border-radius:50%;background:#56628F}.promo .dot.on{background:#3DDC97;box-shadow:0 0 0 3px rgba(61,220,151,.2)}
.promo small{color:#B9C2E6}
.closenav,.burger,.scrim{display:none}
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{display:flex;align-items:center;gap:14px;padding:16px 22px 0;max-width:1320px;width:100%;margin:0 auto}
.tsearch{flex:1;max-width:520px;display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:0 16px;box-shadow:var(--sh);color:var(--muted)}
.tsearch input{border:0;background:transparent;min-height:46px;padding:0;outline:none}
.tsearch:focus-within{border-color:var(--ink)}
.me{margin-left:auto;position:relative}
.me summary{list-style:none;display:flex;align-items:center;gap:10px;cursor:pointer;padding:4px 8px;border-radius:999px}
.me summary::-webkit-details-marker{display:none}
.av{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,#FFE7A3,var(--sun));color:var(--ink);font-weight:800;display:inline-flex;align-items:center;justify-content:center;font-size:18px;border:3px solid #fff;box-shadow:var(--sh)}
.who b{display:block;color:var(--ink);font-size:15px;line-height:1.2}.who small{color:var(--muted);font-size:12px}
.me .menu{position:absolute;right:0;top:54px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 12px 30px rgba(20,30,80,.15);padding:6px;min-width:190px;z-index:30}
.me .menu a,.me .menu button{display:flex;gap:10px;align-items:center;width:100%;padding:10px 12px;border-radius:10px;text-decoration:none;color:var(--text);font:inherit;background:none;border:0;cursor:pointer;text-align:left}
.me .menu a:hover,.me .menu button:hover{background:#F3F4FA}.me .menu form{margin:0}
.foot{text-align:center;color:var(--muted);font-size:12px;padding:10px 16px 22px}

/* ---- kad & borang asas ---- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;margin-bottom:18px;box-shadow:var(--sh)}
.card h2{margin-bottom:12px}
.ch{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap}.ch h2{margin:0}
.head{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin:6px 0 16px}
label{display:block;font-weight:700;font-size:13px;margin:12px 0 5px;color:var(--ink)}
input,select,textarea{width:100%;min-height:44px;padding:10px 12px;border:1.5px solid #CFD4E8;border-radius:12px;font:inherit;background:#fff;color:var(--text)}
input:focus,select:focus,textarea:focus{outline:3px solid rgba(242,183,5,.45);border-color:var(--ink)}
label.ck{display:flex;gap:10px;align-items:flex-start;font-weight:500;font-size:14px;color:var(--text);margin:12px 0}
label.ck input,input[type=checkbox]{width:20px;height:20px;min-height:0;margin:1px 0 0;flex:0 0 auto;accent-color:var(--ink)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;border:0;border-radius:12px;padding:10px 18px;font:inherit;font-weight:700;cursor:pointer;text-decoration:none;background:var(--sun);color:var(--ink);margin-top:12px;white-space:nowrap}
.btn:hover{filter:brightness(.97)}.btn:disabled{opacity:.6;cursor:wait}
.btn.pri{background:linear-gradient(135deg,var(--ink3),var(--ink));color:#fff;box-shadow:0 6px 16px rgba(19,35,91,.25)}
.btn.ghost2{background:#fff;color:var(--ink);border:1px solid var(--line);box-shadow:var(--sh)}
.btn.s{background:#ECEFFC;color:var(--ink)}.btn.r{background:#FDE7E5;color:var(--red)}.btn.g{background:var(--green);color:#fff}
.btn.ghost{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.4);margin:0}
.btn.sm{min-height:36px;padding:6px 12px;font-size:14px;margin-top:0}
.btn.full{width:100%}
.row{display:flex;flex-wrap:wrap;align-items:center}.gap{gap:8px}.row .btn{margin-top:0}.row.gap{margin-top:12px}.ch .row.gap{margin-top:0}
.row select{width:auto;min-width:160px}
.filters{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.filters label{margin:0}.filters select{width:auto;flex:1 1 160px}.filters .btn{margin:0}
.seg{display:flex;flex-wrap:wrap;gap:6px;flex:1 1 100%}
.seg label{margin:0;font-weight:600;font-size:14px;color:var(--ink);border:1.5px solid #CFD4E8;border-radius:999px;padding:7px 13px;cursor:pointer;background:#fff}
.seg label.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.seg input{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px}
.range{display:flex;gap:8px;align-items:center}
.range input{flex:1;min-height:40px}
.search{display:flex;gap:8px}.search input{flex:1}.search .btn{margin:0}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;align-items:start}
.grid2 label{margin-top:0}.grid2 .end{display:flex;align-items:flex-end}
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;align-items:center}.grid3 .btn{margin:0}
.msg{padding:12px 14px;border-radius:12px;margin:0 0 14px;font-weight:600;word-break:break-word}
.msg.ok{background:#DFF4E9;color:var(--green)}.msg.err{background:#FDE7E5;color:var(--red)}.msg.info{background:#FFF7DC;color:var(--ink);font-weight:500}
.linkbox{margin-top:10px}.linkbox label{margin:0 0 4px}
.copyrow{display:flex;gap:6px}.copyrow input{flex:1;font-family:ui-monospace,Menlo,monospace;font-size:13px}.copyrow .btn{margin:0}
.empty{color:var(--muted);text-align:center;padding:30px 0}

/* ---- salam & penapis ---- */
.hello{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin:8px 0 18px}
.hello p{margin:4px 0 0}
.hfilter{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.hfilter .btn{margin:0}
.pill{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:0 6px 0 12px;margin:0;box-shadow:var(--sh);color:var(--ink)}
.pill select{border:0;min-height:44px;padding:0 6px;width:auto;font-weight:700;color:var(--ink);background:transparent}
.pill select:focus{outline:none}

/* ---- KPI ---- */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:18px}
.kpi{border-radius:var(--r);padding:16px 18px;border:1px solid var(--line);box-shadow:var(--sh);background:linear-gradient(140deg,#fff 30%,var(--kb) 100%);--kc:var(--k1);--kb:var(--k1b)}
.kpi.k2{--kc:var(--k2);--kb:var(--k2b)}.kpi.k3{--kc:var(--k3);--kb:var(--k3b)}.kpi.k4{--kc:var(--k4);--kb:var(--k4b)}
.kh{display:flex;align-items:center;gap:12px;font-weight:700;color:var(--ink)}
.kic{width:42px;height:42px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;background:var(--kb);color:var(--kc);box-shadow:inset 0 0 0 1px rgba(0,0,0,.03)}
.kic .ic{width:22px;height:22px}
.kb{display:flex;align-items:flex-end;justify-content:space-between;gap:8px;margin-top:12px}.kb>div{min-width:0}
.kb b{display:block;white-space:nowrap;font-size:26px;color:var(--ink);line-height:1.15;letter-spacing:-.02em}
.chg{font-weight:700;font-size:13px;display:block}.vs{display:block;color:var(--muted);font-size:12px}
.chg.up{color:var(--green)}.chg.down{color:var(--red)}.chg.flat{color:var(--muted)}
.spark{width:84px;height:40px;flex:0 0 auto}
.spark .sl{fill:none;stroke:var(--kc);stroke-width:2.4;stroke-linecap:round}
.spark .sf{fill:var(--kc);opacity:.13}

/* ---- grid papan pemuka ---- */
.g2{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);gap:18px}
.g3{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr) minmax(0,1.15fr);gap:18px}
.tabs2{display:flex;gap:6px}
.tabs2 a{padding:6px 14px;border-radius:999px;border:1px solid var(--line);font-size:13px;font-weight:600;text-decoration:none;color:var(--ink);background:#fff}
.tabs2 a.on{background:#FFF3C4;border-color:#F4D46A}

/* carta */
.chart{width:100%;height:auto;display:block;margin:4px auto}
.chart .grid{stroke:#ECEEF6;stroke-width:1}.chart .base{stroke:#A5ACC6;stroke-width:1}
.chart .ax{fill:#7A819E;font-size:11px}
.chart .bar{fill:var(--ink)}.chart .hit{fill:transparent;cursor:pointer}
.chart .hit:hover{fill:rgba(19,35,91,.05)}
.area .g0{stop-color:var(--ink3);stop-opacity:.28}.area .g1{stop-color:var(--ink3);stop-opacity:0}
.area .line{fill:none;stroke:var(--ink);stroke-width:2.5;stroke-linecap:round}
.area .peak{stroke:var(--sun);stroke-width:1.5;stroke-dasharray:4 4}
.area .dot{fill:var(--sun);stroke:#fff;stroke-width:3}
.area .bub{fill:var(--ink)}.area .bubt{fill:#fff;font-size:12px;font-weight:700}
.tip{position:fixed;z-index:60;background:var(--ink2);color:#fff;font-size:13px;padding:6px 10px;border-radius:8px;pointer-events:none;white-space:nowrap;box-shadow:0 4px 14px rgba(0,0,0,.2)}
details.tbl{margin-top:10px}details.tbl summary{cursor:pointer;color:var(--muted);font-size:13px}
.strip{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;background:#F7F7FD;border-radius:14px;padding:12px;margin-top:8px}
.strip>div{display:grid;grid-template-columns:auto 1fr;column-gap:10px;align-items:center}
.strip small{color:var(--muted);font-size:12px;grid-column:2}.strip b{grid-column:2;color:var(--ink);font-size:15px}.strip b em{font-style:normal;color:var(--muted);font-weight:600;font-size:13px;margin-left:4px}
.sic{grid-row:1/3;width:34px;height:34px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center}
.sic.s1{background:var(--k1b);color:#B88700}.sic.s2{background:var(--k2b);color:var(--k2)}.sic.s3{background:var(--k3b);color:var(--k3)}.sic.s4{background:var(--k4b);color:var(--k4)}
.sic .ic{width:18px;height:18px}

/* donut */
.donutwrap{display:grid;grid-template-columns:minmax(120px,160px) 1fr;gap:14px;align-items:center}
.donut{width:100%;height:auto}
.donut .seg{fill:none;stroke-width:30;cursor:pointer}
.donut .c1,.c1.sw,.thumb.c1{stroke:var(--c1);background:var(--c1)}.donut .c2,.c2.sw,.thumb.c2{stroke:var(--c2);background:var(--c2)}
.donut .c3,.c3.sw,.thumb.c3{stroke:var(--c3);background:var(--c3)}.donut .c4,.c4.sw,.thumb.c4{stroke:var(--c4);background:var(--c4)}
.donut .c5,.c5.sw,.thumb.c5{stroke:var(--c5);background:var(--c5)}.donut .c6,.c6.sw,.thumb.c6{stroke:var(--c6);background:var(--c6)}
.donut .dn,.gauge .dn{font-size:34px;font-weight:800;fill:var(--ink)}.donut .dl,.gauge .dl{font-size:12px;fill:var(--muted)}
.legend{list-style:none;margin:0;padding:0}
.legend li{display:flex;gap:10px;align-items:flex-start;padding:6px 0}
.sw{width:12px;height:12px;border-radius:50%;margin-top:5px;flex:0 0 auto}
.ll{flex:1;min-width:0}.ll b{display:block;font-size:13px;color:var(--text);line-height:1.3}.ll small{color:var(--muted);font-size:12px}
.lp{font-weight:800;color:var(--ink)}
.callout{display:flex;gap:12px;align-items:center;background:linear-gradient(135deg,#FFF7DC,#FFFBEF);border:1px solid #F7E3A1;border-radius:14px;padding:12px 14px;margin-top:12px}
.callout .ic{width:30px;height:30px;color:#D99A00}.callout b{display:block;color:#9A6B00;font-size:14px}.callout span{font-size:13px;color:var(--text)}

/* produk terlaris */
.toplist{list-style:none;margin:0;padding:0}
.toplist li{display:flex;align-items:center;gap:12px;padding:9px 0;border-top:1px solid #F0F1F7}.toplist li:first-child{border-top:0}
.rank{width:22px;height:22px;border-radius:50%;font-size:12px;font-weight:800;color:#fff;display:inline-flex;align-items:center;justify-content:center;background:#9AA1BC;flex:0 0 auto}
.rank.r1{background:#e34948}.rank.r2{background:#6250d6}.rank.r3{background:#eda100}.rank.r4{background:#2a78d6}
.thumb{width:42px;height:42px;border-radius:12px;color:#fff;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}.thumb .ic{width:22px;height:22px}
.tn{flex:1;min-width:0}.tn b{display:block;font-size:14px;line-height:1.3}.tn small{color:var(--muted)}
.to{color:var(--muted);font-size:13px;white-space:nowrap}

/* status pesanan */
.gauge{width:100%;max-width:260px;display:block;margin:0 auto}
.gauge .gbg{fill:none;stroke:#EEF0F7;stroke-width:26}
.gauge .gs{fill:none;stroke-width:26}.gauge .gs.g{stroke:var(--st-g)}.gauge .gs.b{stroke:var(--st-b)}.gauge .gs.y{stroke:var(--st-y)}.gauge .gs.r{stroke:var(--st-r)}
.stbox{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:10px}
.sb{border-radius:12px;padding:10px 6px;text-align:center}
.sb b{display:block;font-size:18px}.sb small{display:block;font-size:11px;color:var(--muted)}.sb span{display:block;font-weight:800;color:var(--ink)}
.sb.g{background:#E3F6EE}.sb.g b{color:#12805A}.sb.b{background:#E7F0FC}.sb.b b{color:#1F5FAE}.sb.y{background:#FFF5D6}.sb.y b{color:#9A6B00}.sb.r{background:#FDE9E8}.sb.r b{color:#B9302F}

/* insight */
.ch h2 .ic{color:#E9A800;width:24px;height:24px}
.ins{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ins>*{border:1px solid var(--line);border-radius:14px;padding:12px;text-decoration:none;color:inherit;display:flex;flex-direction:column}
.ins small{color:var(--muted);font-size:12px}.ins b{color:var(--ink);font-size:16px;line-height:1.3}.ins b.chg{font-size:18px}.ins b.chg.up{color:var(--green)}.ins b.chg.down{color:var(--red)}
.ins span{color:var(--muted);font-size:12px}
.cheer{display:flex;gap:10px;align-items:center;margin-top:10px;background:linear-gradient(135deg,#ECEBFF,#FFF4F8);border-radius:12px;padding:10px 12px;font-size:13px;text-decoration:none;color:var(--text)}
.cheer .ic{color:var(--k2)}

/* ---- jadual & lain-lain halaman ---- */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:14px}
.tile{background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px 14px;text-decoration:none;color:inherit;display:block}
a.tile:hover{border-color:var(--ink)}
.tile span{display:block;font-size:12px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.03em}
.tile b{display:block;font-size:24px;color:var(--ink);line-height:1.2;margin:2px 0}.tile b.smb{font-size:16px}
.tile small{color:var(--muted);font-size:12px}
.tile.warn b{color:#A85A00}
.tiles.sm .tile b{font-size:20px}
.tw{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{text-align:left;padding:10px 8px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-size:12px;text-transform:uppercase;color:var(--muted);letter-spacing:.04em}
.num{text-align:right;white-space:nowrap}
tr.grp td{background:#F7F8FD}tr.sub td:first-child{padding-left:22px}
tr.bad td{background:#FFF6F5}
.badge{display:inline-block;padding:2px 10px;border-radius:999px;font-size:12px;font-weight:700;white-space:nowrap;background:#E9EBF3;color:#4A5272}
.badge.g{background:#DFF4E9;color:var(--green)}.badge.b{background:#E7EDFF;color:var(--ink)}.badge.y{background:#FFF3C4;color:#7A5900}.badge.r{background:#FDE7E5;color:var(--red)}
.ptag{display:inline-block;padding:2px 9px;border-radius:6px;font-size:12px;font-weight:700;border-left:4px solid}
.ptag.p0{background:#EEF1FB;border-color:#13235B;color:#13235B}.ptag.p1{background:#FFF6DA;border-color:#B88700;color:#6B4E00}
.ptag.p2{background:#E5F5EC;border-color:#178A5B;color:#155C39}.ptag.p3{background:#FDEBEA;border-color:#C2362B;color:#8C1B12}
.ptag.p4{background:#F1EAFB;border-color:#6B3FB0;color:#4F2D86}.ptag.p5{background:#E6F4F7;border-color:#0F6E80;color:#0B5160}
.custhead{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.custhead h1{margin:6px 0 4px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.custhead .right b{font-size:18px;color:var(--ink)}
ul.orders{list-style:none;margin:10px 0 0;padding:0}
ul.orders li{display:flex;gap:10px;align-items:center;padding:10px 0;border-top:1px solid var(--line)}
ul.orders .oline{flex:1;display:flex;flex-direction:column;text-decoration:none;color:inherit;min-width:0}
ul.orders .oline .muted{font-size:13px}
.ckpad{width:20px;flex:0 0 auto}
dl.kv{display:grid;grid-template-columns:max-content 1fr;gap:4px 14px;margin:12px 0 4px;font-size:14px}
dl.kv dt{color:var(--muted)}dl.kv dd{margin:0;word-break:break-word}
.acts details{border:1px solid var(--line);border-radius:14px;margin-bottom:10px;background:#FBFBFE}
.acts summary{cursor:pointer;padding:13px 14px;font-weight:700;color:var(--ink);list-style:none;display:flex;justify-content:space-between}
.acts summary::-webkit-details-marker{display:none}
.acts summary::after{content:"+";font-weight:800}.acts details[open] summary::after{content:"–"}
.acts summary.danger{color:var(--red)}
.acts form{padding:0 14px 14px}.acts form label:first-of-type{margin-top:0}
.sticky-act:not(.has){position:static}.sticky-act{position:sticky;bottom:0;background:rgba(246,245,253,.96);padding:10px 0;margin-top:0;z-index:5;backdrop-filter:blur(4px)}
.users{list-style:none;padding:0;margin:0}.users li{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:10px 0;border-top:1px solid var(--line)}.users li .btn{margin:0}
.pager{justify-content:center}
.auth{max-width:420px;margin:48px auto}
.brandbig{display:flex;flex-direction:column;align-items:center;gap:6px;margin-bottom:18px;color:var(--ink)}
.brandbig .logo{width:54px;height:54px;font-size:28px;border-radius:15px}.brandbig b{font-size:22px}.brandbig span:last-child{color:var(--muted);font-size:13px}
.auth h1{margin-bottom:8px}
ul.checks{list-style:none;padding:0;margin:0}ul.checks li{display:flex;gap:10px;padding:9px 0;border-top:1px solid var(--line)}ul.checks li:first-child{border-top:0}
ul.checks .ic{width:24px;height:24px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-weight:800;flex:0 0 auto;font-size:13px}
ul.checks .ok .ic{background:#DFF4E9;color:var(--green)}ul.checks .fail .ic{background:#FDE7E5;color:var(--red)}ul.checks .warn .ic{background:#FFF3C4;color:#7A5900}

/* ---- tablet ---- */
@media (max-width:1180px){
  .kpis{grid-template-columns:repeat(2,1fr)}
  .g2{grid-template-columns:1fr}
  .g3{grid-template-columns:1fr 1fr}.g3>section:last-child{grid-column:1/-1}
}
/* ---- menu sisi jadi laci ---- */
@media (max-width:960px){
  .side{position:fixed;left:0;top:0;transform:translateX(-105%);transition:transform .22s ease;box-shadow:0 0 40px rgba(0,0,0,.2);background:#fff}
  .navt:checked~.app .side{transform:none}
  .navt:checked~.app .scrim{display:block;position:fixed;inset:0;background:rgba(14,26,71,.35);z-index:35}
  .closenav{display:inline-flex;position:absolute;right:14px;top:22px;cursor:pointer;color:var(--muted)}
  .burger{display:inline-flex;width:44px;height:44px;border-radius:12px;background:#fff;border:1px solid var(--line);align-items:center;justify-content:center;cursor:pointer;color:var(--ink);box-shadow:var(--sh);flex:0 0 auto}
}
/* ---- telefon ---- */
@media (max-width:640px){
  .wrap{padding:12px}
  .topbar{padding:12px 12px 0;gap:10px}
  .who{display:none}.av{width:40px;height:40px}
  .tsearch{padding:0 12px}.tsearch input{min-height:44px;font-size:15px}
  h1{font-size:21px}
  .hello{margin:4px 0 14px}.hfilter{width:100%}.hfilter .pill{flex:1 1 45%}.hfilter .pill select{width:100%}.hfilter .btn{flex:1 1 45%}
  .range{flex:1 1 100%}
  .kpis{gap:10px}
  .kpi{padding:12px}.kh{gap:8px;font-size:13px}.kic{width:34px;height:34px;border-radius:10px}.kic .ic{width:18px;height:18px}
  .kb{flex-direction:column;align-items:stretch;margin-top:8px}.kb b{font-size:20px}.chg span{display:block}
  .spark{width:100%;height:30px}.kb b{font-size:19px}
  .card{padding:14px;border-radius:16px}
  .g3{grid-template-columns:1fr}
  .strip{grid-template-columns:1fr 1fr}
  .donutwrap{grid-template-columns:1fr}.donut{max-width:220px;margin:0 auto}
  .ins{grid-template-columns:1fr 1fr}
  table.rt thead{display:none}
  table.rt,table.rt tbody,table.rt tr,table.rt td{display:block;width:100%}
  table.rt tr{border-bottom:1px solid var(--line);padding:8px 0}
  table.rt td{border:0;padding:3px 0;display:flex;gap:10px;justify-content:space-between;text-align:right}
  table.rt td::before{content:attr(data-l);color:var(--muted);font-size:12px;font-weight:600;text-align:left;flex:0 0 auto}
  table.rt td[colspan]{display:block;text-align:left}table.rt td[colspan]::before{content:none}
  table.brk{font-size:13px}table.brk th,table.brk td{padding:8px 4px}
  .row select{width:100%}
  .sticky-act select{flex:1 1 100%;min-height:40px}.sticky-act .btn{flex:1}
  .custhead{flex-direction:column}.custhead .right{text-align:left}
}
@media (max-width:640px){.chart .ax{font-size:17px}.area .ax{font-size:16px}}
/* emel gagal & broadcast */
.bad{color:var(--red)}
.gap0{gap:6px}
.btn.wa{background:#E3F6EE;color:#12805A}
textarea{min-height:120px;resize:vertical;line-height:1.5}
.bcform textarea{min-height:220px}
details.hint{margin:8px 0 0}details.hint summary{cursor:pointer;color:var(--muted);font-size:13px}details.hint ul{margin:6px 0 0;padding-left:18px}
details.hint code{background:#F1F2FA;padding:1px 5px;border-radius:5px;font-size:12px}
.bct{font-size:20px;margin:6px 0 4px}
.bar2{height:8px;border-radius:99px;background:#EEF0F7;overflow:hidden;margin:4px 0 6px}.bar2 span{display:block;height:100%;background:linear-gradient(90deg,var(--ink3),var(--k3))}
.mailprev{width:100%;height:560px;border:1px solid var(--line);border-radius:12px;background:#F3F5FB}
.sumh{cursor:pointer;font-weight:700;color:var(--ink)}
@media (max-width:640px){
  table.rt.stack td{display:grid;grid-template-columns:78px 1fr;gap:8px;text-align:left;justify-content:stretch}
  table.rt.stack td>div{min-width:0;word-break:break-word}
}