/* SCS Sistem — token & komponen */
:root{
  --bg:#f5f5f4; --surface:#ffffff; --ink:#151515; --muted:#5f5d5b; --line:#dedbd8;
  --red:#d3202b; --red-soft:#fbe5e6;
  --ok:#1d7a46; --ok-soft:#e1f2e8; --warn:#a65f00; --warn-soft:#fbefd9; --info:#2357a6; --info-soft:#e3ebf8;
  --display:"Barlow Condensed","Arial Narrow",sans-serif;
  --body:"IBM Plex Sans",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#121212; --surface:#1c1c1c; --ink:#f0eeec; --muted:#a3a09c; --line:#333130;
  --red:#ef4651; --red-soft:#3a1a1c; --ok:#4cc27f; --ok-soft:#173225; --warn:#e9a640; --warn-soft:#3a2c14; --info:#7aa7ee; --info-soft:#1a2740; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#121212; --surface:#1c1c1c; --ink:#f0eeec; --muted:#a3a09c; --line:#333130;
  --red:#ef4651; --red-soft:#3a1a1c; --ok:#4cc27f; --ok-soft:#173225; --warn:#e9a640; --warn-soft:#3a2c14; --info:#7aa7ee; --info-soft:#1a2740; color-scheme:dark}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:15px;line-height:1.45}
.wrap{max-width:1180px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:16px 48px}
.logo{font-family:var(--display);font-weight:700;font-size:40px;letter-spacing:1px;line-height:1}
.logo .c{color:var(--red)}
.logo-sub{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.brand{display:flex;align-items:center;gap:12px}
.today{font-family:var(--mono);font-size:13px;color:var(--muted)}
button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.notice{display:flex;gap:10px;align-items:center;flex-wrap:wrap;background:var(--warn-soft);color:var(--ink);border:1px solid var(--warn);border-radius:8px;padding:10px 14px;margin-bottom:16px;font-size:14px}
.notice b{color:var(--warn)}
.btn{font:600 14px var(--body);border-radius:6px;padding:9px 14px;cursor:pointer;border:1px solid var(--line);background:var(--surface);color:var(--ink)}
.btn.primary{background:var(--red);border-color:var(--red);color:#fff}
.btn.small{padding:5px 10px;font-size:13px}
.btn.danger{color:var(--red);border-color:var(--red)}
.btn:disabled{opacity:.5;cursor:default}
h2{font-family:var(--display);font-weight:700;font-size:24px;letter-spacing:.02em;text-transform:uppercase;margin:0 0 10px;text-wrap:balance}
.sec{margin-bottom:24px}
.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:20px}
.tile{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:14px;min-width:0}
.k{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.tile .v{font-family:var(--display);font-weight:700;font-size:34px;line-height:1.1;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.tile .s{font-size:13px;color:var(--muted)}
.tile.net{border-color:var(--ink);border-width:2px}
.pos{color:var(--ok)} .neg{color:var(--red)}
.target{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:16px;margin-bottom:20px}
.target .row{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
.target .big{font-family:var(--display);font-size:34px;font-weight:700;font-variant-numeric:tabular-nums}
.facts{display:flex;gap:24px;flex-wrap:wrap}
.facts .v{font-family:var(--display);font-size:24px;font-weight:700;font-variant-numeric:tabular-nums}
.bar{position:relative;height:14px;background:var(--line);border-radius:7px;margin-top:12px;overflow:hidden}
.bar i{position:absolute;inset:0 auto 0 0;background:var(--red);border-radius:7px}
.bar.done i{background:var(--ok)}
.grid2{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:16px;margin-bottom:20px}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:16px;min-width:0}
.panel h3{margin:0 0 12px;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
svg text{fill:var(--muted);font-family:var(--mono);font-size:11px}
.hbar{display:grid;grid-template-columns:minmax(0,8rem) minmax(0,1fr) auto;gap:8px;align-items:center;margin-bottom:10px;font-size:14px}
.hbar .t{height:10px;background:var(--line);border-radius:5px;overflow:hidden}
.hbar .t i{display:block;height:100%;background:var(--ink)}
.hbar .n{font-family:var(--mono);font-size:13px}
.stmt{width:100%;border-collapse:collapse;font-size:14px}
.stmt td{padding:7px 0;border-bottom:1px solid var(--line)}
.stmt td:last-child{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums}
.stmt tr.sub td{color:var(--muted);padding-left:14px}
.stmt tr.tot td{font-weight:600;border-bottom:2px solid var(--ink)}
.board{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.col{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:12px;min-width:0}
.col h4{margin:0 0 10px;display:flex;justify-content:space-between;font-size:13px;letter-spacing:.06em;text-transform:uppercase}
.mini{border-top:1px solid var(--line);padding-block:8px;font-size:13px}
.plate{font-family:var(--mono);font-weight:500;background:var(--ink);color:var(--surface);padding:1px 6px;border-radius:3px;letter-spacing:.04em;white-space:nowrap}
.pill{display:inline-block;font-size:12px;font-weight:600;padding:2px 8px;border-radius:999px;white-space:nowrap}
.p-Menunggu{background:var(--warn-soft);color:var(--warn)}
.p-Dalam{background:var(--info-soft);color:var(--info)}
.p-Siap{background:var(--ok-soft);color:var(--ok)}
.p-Diambil{background:var(--line);color:var(--muted)}
.p-Untung{background:var(--ok-soft);color:var(--ok)}
.p-Rugi{background:var(--red-soft);color:var(--red)}
form.grid{background:var(--surface);border:1px solid var(--line);border-top:4px solid var(--red);border-radius:8px;padding:16px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:20px}
form.grid.editing{border-top-color:var(--info)}
.fl{display:flex;flex-direction:column;gap:4px;font-size:13px;font-weight:600;color:var(--muted);min-width:0}
input,select{font:15px var(--body);padding:9px 10px;border:1px solid var(--line);border-radius:6px;background:var(--bg);color:var(--ink);width:100%}
.full{grid-column:1/-1}
.rowbtns{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.mekbox{display:flex;flex-wrap:wrap;gap:6px}
.mekbox label{display:inline-flex;align-items:center;gap:6px;font-weight:500;color:var(--ink);border:1px solid var(--line);border-radius:999px;padding:5px 12px;cursor:pointer;background:var(--bg)}
.mekbox input{width:auto;margin:0}
.mekbox label:has(input:checked){border-color:var(--ink);background:var(--ink);color:var(--surface)}
.money{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:12px;border:1px dashed var(--line);border-radius:8px}
.hint{font-size:12px;font-weight:400;color:var(--muted)}
.msg{font-size:14px}
.msg.err{color:var(--red)}
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px;align-items:center}
.seg button{font:600 13px var(--body);padding:6px 12px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--surface);border-color:var(--ink)}
.seg{display:flex;gap:6px;flex-wrap:wrap}
.filters input{width:auto}
.tablewrap{overflow-x:auto;background:var(--surface);border:1px solid var(--line);border-radius:8px}
table.list{border-collapse:collapse;width:100%;min-width:820px;font-size:14px}
table.list th,table.list td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
table.list th{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:600}
table.list td:first-child{min-width:150px}
td.num,th.num{font-family:var(--mono);text-align:right!important;font-variant-numeric:tabular-nums}
.sm{font-size:12px;color:var(--muted)}
.empty{padding:28px;text-align:center;color:var(--muted)}
.actions{display:flex;gap:6px;flex-wrap:wrap}
.warnline{background:var(--warn-soft);border-left:4px solid var(--warn);padding:8px 12px;border-radius:4px;font-size:14px;margin-bottom:16px}
.setrow{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr) auto;gap:8px;align-items:center;padding-block:6px;border-bottom:1px solid var(--line)}
.setrow.kos{grid-template-columns:minmax(0,2fr) minmax(0,1fr) auto}
footer{margin-top:28px;font-size:13px;color:var(--muted)}
@media (max-width:820px){
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid2{grid-template-columns:minmax(0,1fr)}
  .board{grid-template-columns:repeat(2,minmax(0,1fr))}
  form.grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:520px){
  .board,form.grid,.money{grid-template-columns:minmax(0,1fr)}
  .tile .v{font-size:26px}
  .setrow{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .setrow.kos{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
.sechead{font-family:var(--display);font-weight:700;font-size:17px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);border-bottom:1px solid var(--line);padding-bottom:4px;margin-top:6px}
.seg.big button{font-size:15px;padding:9px 18px}
.p-Return{background:var(--red-soft);color:var(--red)}
.p-New{background:var(--info-soft);color:var(--info)}
.retbox{border:1px solid var(--red);background:var(--red-soft);border-radius:8px;padding:12px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.picbox{font-weight:600;color:var(--ink);padding:9px 0}
.suggest{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;background:var(--warn-soft);border:1px solid var(--warn);border-radius:8px;padding:10px 12px;font-size:14px;color:var(--ink)}
.media{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.slot{position:relative;aspect-ratio:4/3;max-width:100%;border:1.5px dashed var(--line);border-radius:8px;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;overflow:hidden;font-size:12px;color:var(--muted);text-align:center;padding:4px}
.slot.need{border-color:var(--red)}
.slot.done{border-style:solid;border-color:var(--ok)}
.slot .ico{font-size:22px;line-height:1;color:var(--ink)}
.slot .req{font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--red)}
.slot img,.slot video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.slot input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%;padding:0}
.slot .cap{position:absolute;left:0;right:0;bottom:0;background:rgba(0,0,0,.6);color:#fff;font-size:11px;padding:2px 4px}
/* butang Padam pada gambar (borang job card & tab Gambar): tekan dua kali untuk sahkan */
.pdm{position:absolute;top:5px;right:5px;z-index:2;min-height:30px;padding:5px 11px;border:0;border-radius:999px;background:#c41f2a;color:#fff;font:600 12px/1.2 var(--body);letter-spacing:.02em;cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.35)}
.pdm:hover{background:#a3161f}
.pdm.armed{background:#7d0f16;outline:2px solid #fff;outline-offset:-3px}
.pdm:disabled{opacity:.75;cursor:default}
.k.mk{margin:14px 0 6px}.k.mk .sm{text-transform:none;letter-spacing:0}
.k.gk{margin:12px 0 6px}.k.gk:first-child{margin-top:0}
.gallery .gitem{position:relative;min-width:0}
.slot.busy{opacity:.7}
.setrow{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) auto}
.setrow.head{border-bottom:1px solid var(--line);font-weight:600}
.setrow.st{grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr) auto}
.opsin{display:grid;grid-template-columns:repeat(2,minmax(0,12rem));gap:12px;margin-bottom:14px}
.ops{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.ops div{min-width:0}
.ops .v{font-family:var(--display);font-weight:700;font-size:26px;font-variant-numeric:tabular-nums}
.ops.strip{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:12px 16px;margin-bottom:20px}
.p-Repeat{background:var(--ok-soft);color:var(--ok)}
.suggest.ok{background:var(--ok-soft);border-color:var(--ok)}
@media (max-width:820px){.ops{grid-template-columns:repeat(2,minmax(0,1fr))}.setrow.st.head{display:none}}
@media (max-width:520px){.setrow.st{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.opsin{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
@media (max-width:820px){.media{grid-template-columns:repeat(3,minmax(0,1fr))}.retbox{grid-template-columns:repeat(2,minmax(0,1fr))}.setrow.head{display:none}.setrow{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr)}}
@media (max-width:520px){.retbox{grid-template-columns:minmax(0,1fr)}.media{grid-template-columns:repeat(2,minmax(0,1fr))}.setrow{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
@media (prefers-reduced-motion:no-preference){.bar i,.hbar .t i{transition:width .4s ease}}

/* ===== tambahan sistem rasmi ===== */
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh}
:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
.auth{max-width:420px;margin:8vh auto 0;background:var(--surface);border:1px solid var(--line);border-top:4px solid var(--red);border-radius:10px;padding:24px;display:grid;gap:14px}
.auth .logo{font-size:56px}
.auth h1{font-family:var(--display);font-size:26px;text-transform:uppercase;margin:0}
.auth p{margin:0;color:var(--muted);font-size:14px}
.loading{padding:60px 16px;text-align:center;color:var(--muted)}
.drawer-bg{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:40}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(760px,100%);background:var(--bg);z-index:41;overflow-y:auto;box-shadow:-8px 0 30px rgba(0,0,0,.2);padding:calc(env(safe-area-inset-top,0px) + 12px) max(16px,env(safe-area-inset-right,0px)) calc(env(safe-area-inset-bottom,0px) + 40px) 16px}
.drawer .dhead{display:flex;justify-content:space-between;align-items:center;gap:8px;position:sticky;top:-12px;background:var(--bg);padding-block:8px;z-index:2;border-bottom:1px solid var(--line);margin-bottom:12px}
.kv{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 16px;font-size:14px}
.kv div{min-width:0}.kv .k{margin-bottom:2px}
.gallery{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.gallery a{display:block;aspect-ratio:4/3;border-radius:6px;overflow:hidden;background:var(--line);position:relative}
.gallery img,.gallery video{width:100%;height:100%;object-fit:cover;display:block}
.gallery a span{position:absolute;left:0;right:0;bottom:0;background:rgba(0,0,0,.6);color:#fff;font-size:11px;padding:2px 4px}
.items{width:100%;border-collapse:collapse;font-size:14px}
.items th{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);text-align:left;padding:6px 4px;border-bottom:1px solid var(--line)}
.items td{padding:4px;border-bottom:1px solid var(--line);vertical-align:middle}
.items input,.items select{padding:7px 8px;font-size:14px}
.items .n{width:5.5rem}.items .q{width:4.2rem}
.tot{display:grid;grid-template-columns:1fr auto;gap:4px 16px;max-width:360px;margin-left:auto;font-size:14px;margin-top:10px}
.tot b{font-family:var(--mono)}.tot .g{font-size:18px;font-weight:700;border-top:2px solid var(--ink);padding-top:6px}
.invbox{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(env(safe-area-inset-bottom,0px) + 20px);background:var(--ink);color:var(--surface);padding:10px 16px;border-radius:8px;z-index:60;font-size:14px;max-width:90vw}
.toast.err{background:var(--red);color:#fff}
.pill.p-Inv{background:var(--ok-soft);color:var(--ok)}
.pill.p-NoInv{background:var(--warn-soft);color:var(--warn)}
@media (max-width:820px){.kv{grid-template-columns:repeat(2,minmax(0,1fr))}.gallery{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:520px){.items .hide-sm{display:none}}
@media print{body *{visibility:hidden}#printArea,#printArea *{visibility:visible}#printArea{position:absolute;inset:0}}
details.panel summary{cursor:pointer;list-style:revert}
@media (max-width:820px){#i2-map{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
/* inventori */
.drawer.inv-m{width:min(680px,100%)}
.inv-m form.grid{margin-bottom:0}
form.grid .w2{grid-column:span 2}
table.inv td{vertical-align:top}
table.inv tfoot td{border-top:2px solid var(--ink);padding-top:10px}
.stokh{margin-top:2px;line-height:1.2}.stokh .sm{font-size:11px}
#i-kat{max-width:200px}
@media (max-width:520px){form.grid .w2{grid-column:1/-1}table.inv .hide-sm{display:none}#i-kat{max-width:none}}
@media (max-width:520px){
  #i-modal{font-size:22px}
  table.inv thead{display:none}
  table.inv,table.inv tbody,table.inv tfoot{display:block;min-width:0!important;width:100%}
  table.inv tr{display:grid;grid-template-columns:auto auto minmax(0,1fr);gap:6px 14px;align-items:center;padding:12px;border-bottom:1px solid var(--line)}
  table.inv td{border:0!important;padding:0!important;text-align:left}
  table.inv td:first-child,table.inv td:last-child{grid-column:1/-1}
  table.inv td:nth-child(6)::before{content:"Modal RM ";font-family:var(--body);font-weight:400;font-size:12px;color:var(--muted)}
  table.inv td:nth-child(7){justify-self:end}
  table.inv td.empty{grid-column:1/-1;text-align:center}
  table.inv tfoot tr{grid-template-columns:minmax(0,1fr) auto;border-bottom:0}
  table.inv tfoot td:last-child{display:none}
}
/* bayaran & pejabat */
table.list.bay{min-width:560px}
.bayf{margin-bottom:0}
#pj-cari{flex:1;min-width:180px;max-width:320px}
@media (max-width:820px){form.grid .w2{grid-column:1/-1}}
/* dialog kebenaran pemilik */
.lulus-m{position:fixed;z-index:51;left:50%;top:50%;transform:translate(-50%,-50%);width:min(440px,calc(100% - 32px));max-height:calc(100% - 32px);overflow:auto;background:var(--surface);border:1px solid var(--line);border-top:4px solid var(--red);border-radius:10px;padding:18px;box-shadow:0 20px 50px rgba(0,0,0,.35)}
.lulus-m input{width:100%}
/* panduan */
.pd-rutin label{display:flex;gap:10px;align-items:flex-start;padding:8px 0;border-bottom:1px solid var(--line);font-size:14px;cursor:pointer}
.pd-rutin label:last-child{border-bottom:0}
.pd-rutin input{width:20px;height:20px;flex:0 0 auto;margin-top:1px;accent-color:var(--ok)}
.pd-rutin input:checked+span{color:var(--muted);text-decoration:line-through}
.pd-aras td{vertical-align:top}
.pd-aras td:last-child{font-weight:600;text-align:right;white-space:normal;max-width:45%}
.pd-cara{margin-top:10px}
.pd-cara ol,.pd-ul{margin:10px 0 0;padding-left:20px;font-size:14px}
.pd-cara li,.pd-ul li{margin-bottom:6px}
/* log aktiviti */
#la-box .filters{flex-wrap:wrap;align-items:center}
#la-box .filters select{width:auto;flex:0 1 240px;min-width:160px}
#la-box .filters input[type=date]{width:auto}
@media (max-width:520px){#la-box .filters select{flex:1 1 100%}}
/* prestasi mekanik */
.pr-saya{border-left:4px solid var(--red)}
.pr-saya .tiles{margin-bottom:0}
.pr-tab tr.saya td{background:var(--info-soft)}
.pr-tab td{vertical-align:top}
.pr-hari{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:2px;height:110px;align-items:end;margin:6px 0 4px}
.pr-hari div{height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;min-width:0}
.pr-hari i{display:block;width:100%;background:var(--ink);opacity:.7;border-radius:2px 2px 0 0;min-height:1px}
.pr-hari i.capai{background:var(--ok);opacity:1}
.pr-hari .kini i{outline:2px solid var(--red)}
.pr-hari span{font-size:10px;color:var(--muted);height:14px;line-height:14px}
/* popup notis tempahan & reminder */
.nt-m{width:min(520px,calc(100% - 32px));border-top-color:var(--info)}
.nt-list{border:1px solid var(--line);border-radius:8px;overflow:hidden}
.nt-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;padding:8px 10px;border-bottom:1px solid var(--line);font-size:14px}
.nt-row:last-child{border-bottom:0}
.nt-masa{font-family:var(--mono);font-size:15px}
#btnNotis{border-color:var(--info);color:var(--info)}
.nt-bil{display:inline-block;min-width:18px;padding:0 5px;border-radius:9px;background:var(--red);color:#fff;font-size:11px;line-height:18px;text-align:center;margin-left:4px}
@media (max-width:520px){.nt-row{grid-template-columns:auto minmax(0,1fr)}.nt-row .pill{grid-column:2;justify-self:start}}
/* baucar & pelanggan */
.bc-kad{border:1px dashed var(--ok);background:var(--ok-soft);border-radius:8px;padding:8px 12px;margin-top:8px;font-size:14px;display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center}
.bc-kad .sm{flex-basis:100%}
.bc-kad.pilih{border-style:solid;border-color:var(--info);background:var(--info-soft)}
.bc-kad.batal{border-color:var(--line);background:var(--surface);opacity:.7}
#view-plg .filters{flex-wrap:wrap}
/* cadangan harga & margin */
.mg{display:flex;flex-wrap:wrap;gap:4px 6px;align-items:center;margin-top:3px;font-size:11px}
.mg-lbl{color:var(--muted);font-size:11px}
.mg-chip{font:600 11px var(--body);border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:999px;padding:2px 8px;cursor:pointer;white-space:nowrap}
.mg-chip small{color:var(--muted);font-weight:400}
.mg-chip:hover{border-color:var(--ink)}
.mg-chip.lepas{border-style:dashed}
.mg-tanda{font-size:11px;font-weight:600;padding:1px 7px;border-radius:999px;white-space:nowrap}
.mg-tanda.rendah{background:var(--red-soft);color:var(--red)}
.mg-tanda.sederhana{background:var(--warn-soft);color:var(--warn)}
.mg-tanda.baik{background:var(--ok-soft);color:var(--ok)}
.mg-tanda.kos{background:var(--bg);color:var(--muted);font-weight:400}
.mg-ring{margin-top:6px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}

/* ===================== v2.2 susun atur: menu sisi, bar bawah, halaman Utama ===================== */
:root{--side:#151515;--side-ink:#e9e6e3;--side-muted:#8f8b87;--side-hover:rgba(255,255,255,.06);--side-on:rgba(255,255,255,.1);--side-w:244px;--bnav-h:62px;--r:10px;
  --shadow:0 1px 2px rgba(20,20,20,.05),0 1px 1px rgba(20,20,20,.03)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--side:#0b0b0b;--shadow:none}}
:root[data-theme="dark"]{--side:#0b0b0b;--shadow:none}

.shell{min-height:100vh;min-height:100dvh}
.side{position:fixed;inset:0 auto 0 0;width:var(--side-w);background:var(--side);color:var(--side-ink);display:flex;flex-direction:column;z-index:30;
  padding:calc(env(safe-area-inset-top,0px) + 18px) 12px calc(env(safe-area-inset-bottom,0px) + 12px) max(12px,env(safe-area-inset-left,0px));border-right:1px solid rgba(255,255,255,.06)}
.side-brand{display:flex;align-items:center;gap:10px;padding:0 8px 14px;border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:10px}
.side-brand .logo{font-size:34px;color:#fff}
.side-nama{font-weight:600;font-size:13px;line-height:1.25;color:#fff}
.side .logo-sub{color:var(--side-muted);font-size:10.5px;letter-spacing:.1em}
.side-brand .iconbtn{margin-left:auto;color:var(--side-ink)}
nav.tabs{display:flex;flex-direction:column;gap:1px;overflow-y:auto;flex:1;margin:0;padding:0 0 12px;scrollbar-width:thin}
nav.tabs .grp{font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--side-muted);padding:14px 10px 4px}
nav.tabs button{display:flex;align-items:center;gap:11px;width:100%;text-align:left;font:500 14px var(--body);color:var(--side-ink);background:none;border:0;border-radius:8px;padding:7px 10px;cursor:pointer;position:relative;min-height:38px}
nav.tabs button svg{width:19px;height:19px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;opacity:.75}
nav.tabs button:hover{background:var(--side-hover)}
nav.tabs button[aria-selected="true"]{background:var(--side-on);color:#fff;font-weight:600}
nav.tabs button[aria-selected="true"] svg{opacity:1;color:var(--red)}
nav.tabs button[aria-selected="true"]::before{content:"";position:absolute;left:-12px;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:var(--red)}
nav.tabs button.owner::after{content:"PEMILIK";margin-left:auto;font-size:9.5px;font-weight:600;letter-spacing:.08em;padding:1px 5px;border-radius:3px;border:1px solid rgba(255,255,255,.22);color:var(--side-muted)}
nav.tabs button:focus-visible{outline:2px solid var(--red);outline-offset:-2px}
.side-user{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:4px 10px;align-items:center;padding:12px 8px 0;border-top:1px solid rgba(255,255,255,.08)}
.side-user .av{width:36px;height:36px;border-radius:50%;background:var(--red);color:#fff;display:grid;place-items:center;font-weight:600;font-size:13px;letter-spacing:.04em}
.side-who{min-width:0;font-size:14px;font-weight:600;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.side-who .role{font-size:10.5px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--side-muted)}
.side-user .btn{background:transparent;color:var(--side-ink);border-color:rgba(255,255,255,.18)}
.side-user .btn:hover{background:var(--side-hover)}

.main{margin-left:var(--side-w);min-width:0}
header.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:12px;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--line);padding:calc(env(safe-area-inset-top,0px) + 14px) max(28px,env(safe-area-inset-right,0px)) 14px 28px}
.pg{min-width:0;flex:1}
.pg h1{font-family:var(--display);font-weight:700;font-size:28px;line-height:1.05;letter-spacing:.02em;text-transform:uppercase;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pg-sub{font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top-acts{display:flex;gap:8px;align-items:center}
.main .wrap{padding:22px 28px 56px;padding-right:max(28px,env(safe-area-inset-right,0px))}
.iconbtn{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:8px;border:0;background:none;color:var(--ink);cursor:pointer;flex:none}
.iconbtn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.iconbtn:hover{background:var(--line)}
.only-m{display:none!important}
.bnav{display:none}
.side-bg{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:29}

/* gaya seragam */
.btn{border-radius:8px;transition:background-color .15s,border-color .15s}
.btn:hover:not(:disabled){border-color:var(--ink)}
.btn.primary:hover:not(:disabled){background:color-mix(in srgb,var(--red) 88%,#000);border-color:color-mix(in srgb,var(--red) 88%,#000)}
.tile,.panel,.col,.tablewrap,.target,.card{border-radius:var(--r);box-shadow:var(--shadow)}
.tile{padding:16px 18px}
.tile .k{font-size:11.5px;font-weight:600;letter-spacing:.09em}
.tile .s{margin-top:2px}
.tile.net{border-width:1px;border-color:var(--line);border-top:3px solid var(--red)}
table.list th{background:color-mix(in srgb,var(--bg) 60%,var(--surface))}
table.list tbody tr:hover td{background:color-mix(in srgb,var(--bg) 50%,var(--surface))}
.card{background:var(--surface);border:1px solid var(--line);min-width:0;display:flex;flex-direction:column}
.card-h{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line)}
.card-h h3{margin:0;font-size:12.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
footer{border-top:1px solid var(--line);padding-top:14px}

/* Utama */
.u-head{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.u-salam{font-size:22px;font-weight:600;letter-spacing:-.01em;text-wrap:balance}
#u-isi > .tiles{grid-template-columns:repeat(4,minmax(0,1fr))}
#u-isi > .tiles.u-tiles3{grid-template-columns:repeat(3,minmax(0,1fr))}
#u-kutip{white-space:nowrap;font-size:clamp(24px,2.3vw,34px)}
@media (max-width:700px){#u-isi > .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}#u-isi > .tiles.u-tiles3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.u-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:16px;align-items:start}
.u-list{list-style:none;margin:0;padding:6px}
.u-list li+li{border-top:1px solid var(--line)}
.u-list button{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:none;border:0;color:var(--ink);font:inherit;padding:11px 10px;border-radius:8px;cursor:pointer;min-height:52px}
.u-list button:hover{background:var(--bg)}
.u-l-isi{flex:1;min-width:0;display:flex;flex-direction:column}
.u-l-isi b{font-weight:600;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.u-l-isi .sm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.u-n{min-width:38px;height:38px;padding:0 8px;border-radius:9px;display:grid;place-items:center;font-family:var(--display);font-weight:700;font-size:20px;font-variant-numeric:tabular-nums;background:var(--bg)}
.u-n.tinggi{background:var(--red-soft);color:var(--red)}
.u-n.sederhana{background:var(--warn-soft);color:var(--warn)}
.u-n.rendah{background:var(--info-soft);color:var(--info)}
.u-tags{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.u-anak{font-size:22px;color:var(--muted);line-height:1}
.u-kosong{padding:26px 16px;text-align:center;color:var(--muted);font-size:14px}
.u-kosong.ok::before{content:"✓";display:block;width:36px;height:36px;margin:0 auto 8px;border-radius:50%;background:var(--ok-soft);color:var(--ok);font-weight:700;line-height:36px}

/* ---------- telefon & tablet kecil ---------- */
@media (max-width:1023px){
  .only-m{display:inline-grid!important}
  .side{transform:translateX(-105%);transition:transform .22s ease,visibility .22s;visibility:hidden;width:min(300px,86vw);z-index:50}
  body.menu-buka .side{transform:none;visibility:visible;box-shadow:8px 0 30px rgba(0,0,0,.3)}
  .side-bg{z-index:49}
  .main{margin-left:0}
  header.top{padding:calc(env(safe-area-inset-top,0px) + 8px) max(12px,env(safe-area-inset-right,0px)) 8px max(8px,env(safe-area-inset-left,0px));gap:6px}
  .pg h1{font-size:22px}
  .pg-sub{font-size:12px}
  .main .wrap{padding:16px max(16px,env(safe-area-inset-right,0px)) calc(var(--bnav-h) + env(safe-area-inset-bottom,0px) + 28px) max(16px,env(safe-area-inset-left,0px))}
  .bnav{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));position:fixed;left:0;right:0;bottom:0;z-index:25;background:var(--surface);border-top:1px solid var(--line);
    padding:0 max(4px,env(safe-area-inset-right,0px)) env(safe-area-inset-bottom,0px) max(4px,env(safe-area-inset-left,0px));box-shadow:0 -4px 16px rgba(0,0,0,.05);
    transform:translate3d(0,0,0);-webkit-transform:translate3d(0,0,0);will-change:transform;-webkit-backface-visibility:hidden;backface-visibility:hidden} /* v2.86.71: lapisan GPU sendiri — bar kekal melekat di tepi bawah semasa skrol & bar Safari mengecut */
  .bnav button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;height:var(--bnav-h);background:none;border:0;color:var(--muted);font:600 11px var(--body);cursor:pointer;position:relative;min-width:0}
  .bnav button span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  .bnav svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .bnav button[aria-current]{color:var(--red)}
  .bnav button[aria-current]::before{content:"";position:absolute;top:0;left:28%;right:28%;height:3px;border-radius:0 0 3px 3px;background:var(--red)}
  .toast{bottom:calc(var(--bnav-h) + env(safe-area-inset-bottom,0px) + 14px)}
  .u-grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:520px){
  #u-kutip{font-size:24px}
  .u-head .rowbtns{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .u-head .rowbtns .btn.primary{grid-column:1/-1}
  .u-salam{font-size:19px}
  .u-head .rowbtns:has(.btn.primary) .btn:last-child:nth-child(even),.u-head .rowbtns:not(:has(.btn.primary)) .btn:last-child:nth-child(odd){grid-column:1/-1}
  #view-utama .u-list button[data-open]{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 12px}
  #view-utama .u-list button[data-open] .u-tags{grid-column:2;justify-content:flex-start}
  .tile{padding:13px 14px}
}
@media (prefers-reduced-motion:reduce){.side{transition:none}}
@media print{.side,.bnav,header.top{display:none}}

/* Tetapan: seksyen lipat */
.set-alat{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
#view-set .sec.lipat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);margin-bottom:12px;overflow:hidden}
.sec-k{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:none;border:0;color:var(--ink);font:inherit;padding:16px 18px;cursor:pointer}
.sec-k:hover{background:color-mix(in srgb,var(--bg) 55%,var(--surface))}
.sec-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.sec-h{font-family:var(--display);font-weight:700;font-size:20px;letter-spacing:.03em;text-transform:uppercase;line-height:1.1}
.sec-r{font-size:13px;color:var(--muted)}
.sec-k svg{width:20px;height:20px;flex:none;fill:none;stroke:var(--muted);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.sec.buka > .sec-k svg{transform:rotate(180deg)}
.sec.lipat > .sec-isi{display:none;padding:4px 18px 18px;border-top:1px solid var(--line)}
.sec.lipat.buka > .sec-isi{display:block}
.sec.lipat > .sec-isi > .panel,.sec.lipat > .sec-isi > form.panel{border:0;box-shadow:none;padding:12px 0 0}
@media (max-width:520px){.sec-k{padding:14px}.sec.lipat > .sec-isi{padding:4px 14px 14px}.sec-h{font-size:18px}}

/* Semak Harga */
.hg-cari{position:relative;margin-bottom:14px}
.hg-cari svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:20px;height:20px;fill:none;stroke:var(--muted);stroke-width:2;stroke-linecap:round;pointer-events:none}
.hg-cari input{font-size:17px;padding:14px 14px 14px 44px;border-radius:var(--r);background:var(--surface);box-shadow:var(--shadow)}
.hg-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:16px;align-items:start}
.hg-senarai{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.hg-item{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 16px;padding:14px 16px}
.hg-nama{font-weight:600;font-size:16px;overflow-wrap:anywhere}
.hg-stok{font-size:12.5px;font-weight:600;color:var(--muted);margin-top:4px}
.hg-stok.ada{color:var(--ok)}
.hg-kanan{text-align:right}
.hg-harga{font-family:var(--display);font-weight:700;font-size:28px;line-height:1.05;font-variant-numeric:tabular-nums;white-space:nowrap}
.hg-harga.besar{font-size:38px;color:var(--red)}
.hg-lbl{font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.hg-nota{grid-column:1/-1;font-size:13px;background:var(--warn-soft);color:var(--warn);border-radius:6px;padding:6px 10px}
.hg-aksi{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px;align-items:center;border-top:1px solid var(--line);padding-top:10px;margin-top:4px}
.hg-enjin{display:flex;flex-wrap:wrap;gap:6px}
.hg-enjin .btn,.hg-aksi .btn{text-decoration:none}
.btn.hg-utama{border-color:var(--ink);font-weight:700}
.hg-kira{position:sticky;top:96px}
.hg-kira-isi{padding:14px 16px 16px}
.hg-hasil{margin-top:14px;display:grid;gap:10px}
.hg-h-utama{border:2px solid var(--red);border-radius:var(--r);padding:12px 14px;background:var(--red-soft)}
.hg-h-dua{border:1px solid var(--line);border-radius:var(--r);padding:10px 14px}
@media (max-width:1023px){.hg-grid{grid-template-columns:minmax(0,1fr)}.hg-kira{position:static}}
@media (max-width:520px){.hg-item{grid-template-columns:minmax(0,1fr)}.hg-kanan{text-align:left}.hg-harga{font-size:26px}}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
#btnBunyi[aria-pressed="false"]{color:var(--muted)}
#btnBunyi[aria-pressed="true"] svg{stroke:var(--ink)}
.hg-lompat{margin:-4px 0 12px;width:100%;justify-content:center}

/* Permintaan barang & Order Part */
.pp-list{display:grid;gap:0;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);overflow:hidden}
.pp-row{display:flex;gap:12px;align-items:flex-start;justify-content:space-between;padding:11px 14px;border-top:1px solid var(--line)}
.pp-row:first-child{border-top:0}
.pp-isi{min-width:0;flex:1}
.pp-kanan{text-align:right;flex:none}
.pp-quo{margin-top:10px;padding:12px 14px;border:1px dashed var(--line);border-radius:var(--r);background:var(--surface)}
.pp-borang{margin-top:12px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.pp-borang summary{cursor:pointer;padding:12px 14px;font-weight:600;color:var(--red);list-style:none}
.pp-borang summary::-webkit-details-marker{display:none}
.pp-borang[open] summary{border-bottom:1px solid var(--line)}
.pp-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 12px;padding:12px 14px}
.pp-w2{grid-column:1/-1}
.or-pad{padding:14px 16px}
.or-pilih{cursor:pointer;align-items:center}
.or-pilih input{width:20px;height:20px;flex:none;accent-color:var(--red)}
.or-hantar{display:grid;gap:10px;margin-top:14px}
/* v2.86.27: Cadangan Tuan AJ — kemungkinan order berganda */
.or-aj{border:1px solid color-mix(in srgb,#e0a21b 55%,var(--line));background:color-mix(in srgb,#e0a21b 12%,var(--surface));color:var(--ink);border-radius:14px;padding:12px 14px;margin:0 0 14px;display:grid;gap:8px}
.or-aj[hidden]{display:none}
.or-aj-k{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.or-aj-ik{font-size:20px}
.or-aj-l{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.or-aj-l li{background:var(--surface);border:1px solid color-mix(in srgb,#e0a21b 30%,var(--line));border-radius:10px;padding:10px;display:grid;gap:8px}
.or-aj-l .rowbtns{flex-wrap:wrap}
/* SCS_WHATSAPP_REMINDER_2JAM: kad Reminder Tempahan (AI Center → WhatsApp AI) */
.rt-hos:empty{display:none}
.rt{margin-bottom:14px}
.rt>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.rt>summary::-webkit-details-marker{display:none}
.rt-pil{display:flex;gap:6px;flex-wrap:wrap;margin-left:auto}
.rt-isi{padding:0 16px 16px;display:grid;gap:10px}
.rt-isi h4{margin:8px 0 0;font-size:14px}
.rt-amaran{border-left:4px solid var(--red);background:color-mix(in srgb,var(--red) 9%,var(--surface));border-radius:8px;padding:8px 10px;font-size:14px}
.rt-amaran.rt-uji{border-left-color:#e0a21b;background:color-mix(in srgb,#e0a21b 11%,var(--surface))}
.rt-ring{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.rt-ring>div{border:1px solid var(--line);border-radius:10px;padding:6px 8px;background:var(--surface)}
.rt-ring b{font-size:18px}
.rt-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
.rt-grid .fl input,.rt-grid .fl select,.rt-isi textarea{width:100%}
.rt-lebar{grid-column:1/-1}
.rt-sw{display:flex;align-items:center;gap:8px;font-size:14px;cursor:pointer}
.rt-sw input{width:20px;height:20px;accent-color:var(--red);flex:none}
.rt-kod{font-family:var(--mono,ui-monospace,monospace);font-size:12px;overflow-wrap:anywhere}
.rt-pra{white-space:pre-wrap;font:13px/1.45 var(--body);background:#dcf8c6;color:#111;border-radius:10px;padding:10px 12px;margin:0;max-height:320px;overflow:auto}
.rt-l{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.rt-l li{display:flex;gap:10px;align-items:center;border:1px solid var(--line);border-radius:10px;padding:8px 10px;background:var(--surface)}
.rt-i{flex:1;min-width:0}
.rt-b{display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
@media (max-width:560px){.rt-ring{grid-template-columns:repeat(3,minmax(0,1fr))}.rt-l li{flex-wrap:wrap}.rt-b{width:100%;justify-content:flex-start}}
.rt-st{border:1px solid var(--line);border-left:4px solid var(--info);border-radius:10px;padding:10px 12px;background:var(--surface);display:grid;gap:6px}
.rt-st.ok{border-left-color:var(--green,#2e9d5b)}
.rt-st.gagal{border-left-color:var(--red)}
.rt-st-k{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.rt-st-l{margin:0;padding:0;list-style:none;display:grid;gap:4px;counter-reset:rt}
.rt-st-l li{display:flex;justify-content:space-between;gap:8px;color:var(--muted);font-size:13px}
.rt-st-l li::before{counter-increment:rt;content:counter(rt);flex:none;width:20px;height:20px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;font-size:11px;margin-right:6px}
.rt-st-l li>span:first-child{flex:1}
.rt-st-l li.siap{color:var(--ink)}
.rt-st-l li.siap::before{content:"✓";background:var(--green,#2e9d5b);border-color:var(--green,#2e9d5b);color:#fff}
.rt-st.gagal .rt-st-l li:last-child.siap::before{content:"✗";background:var(--red);border-color:var(--red)}
.rt-log-k{display:flex;align-items:center;justify-content:space-between;gap:8px}
.rt-lp{display:grid;gap:10px}
.rt-tab{display:flex;flex-wrap:wrap;gap:6px}
.rt-tab button{display:inline-flex;align-items:center;gap:6px}
.rt-lamp{border:1px dashed var(--line);border-radius:12px;padding:10px 12px;display:grid;gap:6px}
.rt-lamp-g{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
.rt-lamp-i{display:grid;gap:6px;align-content:start}
.rt-lamp-p img,.rt-lamp-p video{display:block;max-width:100%;max-height:220px;border-radius:8px;background:#000}
.rt-lamp-p audio{width:100%}
.rt-lp textarea,.rt-lp input{width:100%}
.rt-st.belum{border-left-color:#e0a21b}
.rt-belum{color:var(--ink);background:color-mix(in srgb,#e0a21b 10%,transparent);border-radius:8px;padding:6px 8px}
/* v2.86.33: Analisis Pakar Tuan AJ (job card) */
.pk{margin-top:16px;border:1px solid var(--line);border-radius:14px;padding:12px 14px;display:grid;gap:10px;background:var(--surface)}
.pk-k{display:flex;align-items:center;gap:8px;font-size:15px}
.pk textarea{width:100%;font:inherit}
.pk-amaran{border-left:4px solid #d64545;background:color-mix(in srgb,#d64545 10%,var(--surface));padding:8px 10px;border-radius:8px}
.pk-hasil{display:grid;gap:10px;border-top:1px solid var(--line);padding-top:10px}
.pk-atas{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pk-ring{margin:0;font-weight:600}
.pk-bah ul,.pk-bah ol{margin:4px 0 0;padding-left:20px;display:grid;gap:4px}
.pk-punca{list-style:none;padding-left:0!important}
.pk-punca li{border:1px solid var(--line);border-radius:8px;padding:8px}
.pk-nota{opacity:.8}
.or-wa{white-space:pre-wrap;font:13px/1.45 var(--body);background:#dcf8c6;color:#111;border-radius:10px;padding:10px 12px;margin:0;max-height:220px;overflow:auto}
.or-terima{margin-top:6px}
.or-kos{display:grid;grid-template-columns:minmax(0,1fr) 110px;align-items:center;gap:10px;font-size:13px;margin-top:4px}
.or-kd{display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:10px;align-items:end;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.or-grid{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}
@media (max-width:1023px){.or-grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){.or-kd{grid-template-columns:minmax(0,1fr)}.pp-row{flex-wrap:wrap}.pp-kanan{text-align:left;width:100%}.pp-kanan .rowbtns{justify-content:flex-start!important}.pp-grid{grid-template-columns:minmax(0,1fr)}}

/* ===================== v2.6 menu ringkas, tugas ikut jawatan, job bertab, petunjuk ===================== */
header.top{flex-wrap:wrap;row-gap:0}
.top-acts #hdrAksi:empty{display:none}
#hdrAksi .btn{display:inline-flex;align-items:center;gap:6px}
#hdrAksi .btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
#btnPetua{color:var(--muted)}
.subtab{flex-basis:100%;display:flex;gap:4px;margin:10px 0 -14px;overflow-x:auto;scrollbar-width:none}
.subtab::-webkit-scrollbar{display:none}
.subtab button{display:inline-flex;align-items:center;gap:7px;font:600 14px var(--body);color:var(--muted);background:none;border:0;border-bottom:3px solid transparent;padding:8px 12px 10px;cursor:pointer;white-space:nowrap;position:relative}
.subtab button svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.subtab button:hover{color:var(--ink)}
.subtab button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--red)}
.subtab .bn-b{position:static;margin-left:2px}
/* lencana bilangan */
.mn-b,.bn-b{display:inline-grid;place-items:center;min-width:19px;height:19px;padding:0 5px;border-radius:999px;background:var(--red);color:#fff;font:700 11px var(--body);font-style:normal}
nav.tabs .mn-b{margin-left:auto}
nav.tabs button.owner .mn-b + *{margin-left:6px}
.bnav .bn-b{position:absolute;top:6px;left:calc(50% + 6px)}
/* petunjuk skrin */
.petua{display:flex;gap:10px;align-items:flex-start;background:var(--info-soft);color:var(--ink);border:1px solid color-mix(in srgb,var(--info) 35%,transparent);border-radius:var(--r);padding:10px 12px;margin-bottom:16px;font-size:14px}
.petua > svg{width:20px;height:20px;flex:none;fill:none;stroke:var(--info);stroke-width:1.8;stroke-linecap:round;margin-top:1px}
.petua-t{flex:1;min-width:0}
.petua-x{border:0;background:none;color:var(--muted);font-size:20px;line-height:1;cursor:pointer;padding:0 4px}
.petua.kelip{animation:kelip .9s ease}
@keyframes kelip{0%,100%{box-shadow:none}40%{box-shadow:0 0 0 4px color-mix(in srgb,var(--info) 35%,transparent)}}
/* lawatan ringkas */
.lw-bg{z-index:70}
.lw{position:fixed;z-index:71;left:50%;top:50%;transform:translate(-50%,-50%);width:min(460px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;background:var(--surface);border-radius:16px;padding:24px 22px 18px;box-shadow:0 20px 60px rgba(0,0,0,.35)}
.lw h2{font-size:22px;margin:6px 0 8px}
.lw p{margin:0 0 10px;color:var(--ink);font-size:15px}
.lw-ikon{width:46px;height:46px;border-radius:12px;background:var(--red-soft);display:grid;place-items:center}
.lw-ikon svg{width:24px;height:24px;fill:none;stroke:var(--red);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.lw-menu{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:6px}
.lw-menu li{display:flex;gap:10px;align-items:center;font-size:14px}
.lw-menu svg{width:18px;height:18px;flex:none;fill:none;stroke:var(--muted);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.lw-langkah{margin:6px 0 0;padding-left:20px;display:grid;gap:8px;font-size:15px}
.lw-titik{display:flex;gap:6px;justify-content:center;margin:16px 0 12px}
.lw-titik i{width:8px;height:8px;border-radius:50%;background:var(--line)}
.lw-titik i.on{background:var(--red);width:22px;border-radius:4px}
.lw-btn{display:flex;justify-content:space-between;gap:8px;align-items:center}
.lw-btn span{display:flex;gap:8px}
/* borang job card */
.borang-hd{margin-bottom:12px}
/* Utama: kereta mekanik */
.kk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px;padding:14px 16px 16px}
.kk{border:1px solid var(--line);border-left:4px solid var(--warn);border-radius:var(--r);padding:12px 14px;background:var(--surface)}
.kk.on{border-left-color:var(--info)}
.kk-h{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-bottom:6px}
.kk-h .pill:last-child{margin-left:auto}
.kk-m{font-size:15px}
.kk-nota{margin-top:6px;font-size:13px;background:var(--bg);border-radius:6px;padding:6px 8px}
.kk-a{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.kk-a .btn{flex:1 1 auto}
.u-pr{padding:14px 16px 16px}
.u-pr-g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.u-pr-g .v{font-family:var(--display);font-weight:700;font-size:24px;font-variant-numeric:tabular-nums}
.u-agih-r{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;align-items:center;padding:10px 10px}
.u-agih-r .sm{grid-column:1}
.u-agih-r .pill{grid-row:1/3;grid-column:2}
.u-agih-bar{grid-column:1;display:flex;gap:3px;margin-top:2px}
.u-agih-bar i{width:14px;height:6px;border-radius:3px;background:var(--warn-soft);border:1px solid var(--warn)}
.u-agih-bar i.k{background:var(--info);border-color:var(--info)}
.u-bisnes{margin-bottom:16px}
/* paparan job: langkah status & tab */
.d-sub{margin-top:4px}
.stepper{list-style:none;margin:6px 0 12px;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}
.stepper li{display:flex;flex-direction:column;align-items:center;text-align:center;gap:3px;font-size:12px;color:var(--muted);position:relative}
.stepper li::before{content:"";position:absolute;top:13px;left:-50%;right:50%;height:2px;background:var(--line);z-index:0}
.stepper li:first-child::before{display:none}
.stepper li.done::before,.stepper li.on::before{background:var(--ok)}
.stepper i{position:relative;z-index:1;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-weight:700;font-size:13px;background:var(--surface);border:2px solid var(--line);color:var(--muted)}
.stepper li.done i{background:var(--ok);border-color:var(--ok);color:#fff}
.stepper li.on i{background:var(--red);border-color:var(--red);color:#fff;box-shadow:0 0 0 4px var(--red-soft)}
.stepper li.on span{color:var(--ink);font-weight:700}
.stepper small{font-size:11px;min-height:14px}
.d-aksi{margin-bottom:14px}
.dtabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin:0 -2px 14px;overflow-x:auto;scrollbar-width:none;position:sticky;top:calc(env(safe-area-inset-top,0px) - 12px);background:var(--bg);z-index:2}
.dtabs::-webkit-scrollbar{display:none}
.dtabs button{font:600 14px var(--body);color:var(--muted);background:none;border:0;border-bottom:3px solid transparent;padding:10px 12px;cursor:pointer;white-space:nowrap;display:inline-flex;gap:6px;align-items:center}
.dtabs button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--red)}
.dt-b{font-size:11px;font-weight:700;padding:1px 7px;border-radius:999px;background:var(--line);color:var(--ink)}
.dt-b.amaran{background:var(--warn-soft);color:var(--warn)}
.dt-b.ok{background:var(--ok-soft);color:var(--ok)}
.dpanel{min-height:120px}
@media (max-width:1023px){
  .subtab{margin:6px -12px -8px -8px;padding:0 8px}
  .subtab button{padding:8px 10px 9px;font-size:13px}
  #hdrAksi .btn span{display:none}
  #hdrAksi .btn{padding:7px 9px}
}
@media (max-width:520px){
  .kk-grid{grid-template-columns:minmax(0,1fr);padding:12px}
  .u-pr-g .v{font-size:20px}
  .stepper span{font-size:11px}
  .lw{padding:20px 18px 16px}
}
.kk-a{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1.25fr) minmax(0,.8fr)}
@media (max-width:520px){
  #u-isi > .tiles.u-tiles3{gap:8px}
  #u-isi > .tiles.u-tiles3 .tile{padding:10px 10px}
  #u-isi > .tiles.u-tiles3 .tile .k{font-size:10.5px;letter-spacing:.05em}
  #u-isi > .tiles.u-tiles3 .tile .s{display:none}
  #u-isi > .tiles.u-tiles3 .tile .v{font-size:24px}
}
@media (max-width:520px){
  #u-isi > .tiles{gap:8px;margin-bottom:14px}
  #u-isi > .tiles .tile{padding:10px 12px}
  #u-isi > .tiles .tile .k{font-size:10.5px;letter-spacing:.05em}
  #u-isi > .tiles .tile .v{font-size:22px}
  #u-isi > .tiles .tile .s{font-size:11.5px;line-height:1.3}
}
#c-kutip.ops{grid-template-columns:repeat(5,minmax(0,1fr))}
#c-kutip.ops .v{font-size:24px}
@media (max-width:1100px){#c-kutip.ops{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:820px){#c-kutip.ops{grid-template-columns:repeat(2,minmax(0,1fr))}}
.u-pr-g{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:520px){.u-pr-g{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* v2.7 — tempahan: catatan, servis percuma, berganda, notis tidak bertindih */
textarea{font:15px var(--body);padding:9px 10px;border:1px solid var(--line);border-radius:6px;background:var(--bg);color:var(--ink);width:100%;resize:vertical}
textarea:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.p-Percuma{background:var(--ok);color:var(--surface)}
.p-War{background:var(--info-soft);color:var(--info)}
.p-Ai{background:color-mix(in srgb,#7c3aed 16%,transparent);color:#7c3aed}
:root[data-theme="dark"] .p-Ai{color:#c4b5fd}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .p-Ai{color:#c4b5fd}}
.t-ai[aria-pressed="true"]{background:#7c3aed;border-color:#7c3aed;color:#fff}
.apa{border-left:4px solid var(--line);background:var(--bg);border-radius:6px;padding:8px 12px;margin-top:8px;font-size:13.5px;line-height:1.45;color:var(--ink)}
.apa.merah{border-color:var(--red);background:var(--red-soft)}
.apa.hijau{border-color:var(--ok);background:var(--ok-soft)}
.apa.biru{border-color:var(--info);background:var(--info-soft)}
.apa.kuning{border-color:var(--warn);background:var(--warn-soft)}
.apa-buat{margin-top:4px}
.apa-amaran{margin-top:4px;color:var(--red);font-weight:600}
.apa-senarai{list-style:none;margin:6px 0 2px;padding:0;display:grid;gap:6px}
.apa-senarai li{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:6px 10px}
.pautan{font:inherit;color:var(--info);background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.tmp-cat{margin-top:4px;font-size:13.5px;color:var(--ink)}
.tmp-nota{margin-top:2px}
.tmp-kad{transition:background .4s}
.tmp-kad.sorot{background:var(--warn-soft);border-radius:6px}
.tmp-edit{margin-top:10px;border:1px solid var(--line);border-top:3px solid var(--info);border-radius:8px;padding:12px;background:var(--surface)}
.tmp-edit-g{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.cek{display:flex;gap:8px;align-items:center;font-size:13.5px;margin-top:8px;cursor:pointer}
.cek input{width:auto}
#f-tmp-info .apa{margin-top:0}
.nt-cat{font-size:12.5px;color:var(--ink);margin-top:2px}
.nt-tanda{display:inline-flex;gap:4px;flex-wrap:wrap;vertical-align:middle}
.nt-apa{margin-top:12px}
#toastRoot{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(env(safe-area-inset-bottom,0px) + 20px);z-index:60;display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none;width:max-content;max-width:90vw}
#toastRoot .toast{position:static;transform:none;left:auto;bottom:auto;max-width:90vw;pointer-events:auto}
@media (max-width:820px){.tmp-edit-g{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:1023px){#toastRoot{bottom:calc(var(--bnav-h) + env(safe-area-inset-bottom,0px) + 14px)}}
@media (max-width:520px){.tmp-edit-g{grid-template-columns:minmax(0,1fr)}.apa-senarai li .btn{width:100%}}
#tm-plat{text-transform:uppercase}
/* v2.8 — Tampal dari WhatsApp */
.tampal{border:1px dashed var(--ok);border-radius:8px;padding:12px;background:var(--ok-soft);display:grid;gap:8px;min-width:0}
.tampal-hd{display:flex;flex-wrap:wrap;gap:2px 10px;align-items:baseline;color:var(--ink)}
.tampal textarea{background:var(--surface)}
.wa-dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:3px 12px;margin:6px 0 0}
.wa-dl dt{color:var(--muted);font-weight:600;font-size:12.5px}
.wa-dl dd{margin:0;min-width:0;overflow-wrap:anywhere}
.wa-sebab{color:var(--muted);font-size:12px}
.wa-ul{margin:4px 0 0;padding-left:18px;display:grid;gap:2px}
#tm-wa-hasil .apa:first-child{margin-top:0}
/* v2.9 — pemilih bahasa */
.side-bahasa{display:flex;align-items:center;gap:8px;margin:0 0 10px;padding:8px 8px 0;border-top:1px solid rgba(255,255,255,.08);color:var(--side-muted)}
.side-bahasa svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.side-bahasa select{flex:1;min-width:0;width:auto;background:transparent;color:var(--side-ink);border:1px solid rgba(255,255,255,.18);border-radius:8px;padding:6px 8px;font:500 13px var(--body)}
.side-bahasa select option{color:#151515;background:#fff}
.bahasa-login select{font-size:14px}
[data-bahasa="en"] nav.tabs button.owner::after{content:"OWNER"}
[data-bahasa="en"] table.inv td:nth-child(6)::before{content:"Capital RM "}
/* v2.9: logo syarikat (Tetapan → Logo & bahasa) */
.logo.logo-ada{display:inline-flex;align-items:center;line-height:0}
.logo.logo-ada img{display:block;max-height:56px;max-width:180px;width:auto;height:auto;object-fit:contain}
.auth .logo.logo-ada img{max-height:72px;max-width:220px}
.side-brand .logo.logo-ada{background:#fff;border-radius:8px;padding:4px 6px;flex:none}
.side-brand .logo.logo-ada img{max-height:28px;max-width:64px}
.jb-pv{display:flex;align-items:center;gap:12px;min-height:92px;padding:10px 12px;margin:10px 0 12px;border:1px dashed var(--line);border-radius:10px;background:repeating-conic-gradient(#0000 0 25%,#8881 0 50%) 0 0/16px 16px}
.jb-pv img{max-height:80px;max-width:240px;object-fit:contain}
.jb-pv .logo{font-size:40px}
/* v2.9: kemaskan paparan telefon */
.pautan{display:inline;text-align:left;white-space:normal}
[data-bahasa="en"] .bnav button{font-size:10.5px}
.bnav button{padding:0 2px}
@media (max-width:340px){.bnav button,[data-bahasa] .bnav button{font-size:9.5px;padding:0}}
.card-h>.btn{flex:none;white-space:nowrap}
.btn{text-wrap:balance}
@media (max-width:520px){
  /* tajuk skrin tidak terpotong: butang Notis menjadi ikon loceng dengan bilangan */
  #btnNotis{font-size:0;width:40px;height:40px;padding:0;border:0;background:none;display:inline-grid;place-items:center;position:relative;color:var(--info);flex:none}
  #btnNotis[hidden]{display:none}
  #btnNotis::before{content:"";width:22px;height:22px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8a6 6 0 10-12 0c0 7-3 9-3 9h18s-3-2-3-9'/%3E%3Cpath d='M13.7 21a2 2 0 01-3.4 0'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8a6 6 0 10-12 0c0 7-3 9-3 9h18s-3-2-3-9'/%3E%3Cpath d='M13.7 21a2 2 0 01-3.4 0'/%3E%3C/svg%3E") center/contain no-repeat}
  #btnNotis .nt-bil{position:absolute;top:1px;right:-2px;margin:0;font-size:11px}
  header.top .iconbtn{width:34px;height:36px}
  header.top{gap:4px}
  .top-acts{gap:2px}
  #hdrAksi{margin-right:2px}
  /* baris butang: memenuhi lebar dan sejajar */
  .rowbtns>.btn,.rowbtns>a.btn,.actions>.btn{flex:1 1 auto;display:inline-flex;align-items:center;justify-content:center;text-align:center}
  .tmp-kad .actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .tmp-kad .actions>.btn{width:100%}
  .tmp-kad .actions>.btn.primary,.tmp-kad .actions>.btn:only-child{grid-column:1/-1}
  .tmp-kad .actions>.sm{grid-column:1/-1}
  .dpanel .rowbtns>.btn{flex-basis:100%}
  .d-aksi>.btn{flex:1 1 40%}
  /* tab dalam paparan job: tanda boleh ditolak ke kiri */
  .dtabs{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
  .dtabs button{padding:10px 10px;font-size:13.5px}
}

/* ===================== v2.10 rupa 3D eksklusif & butang berkilat ===================== */
html.t3d{--bayang1:0 1px 2px rgba(0,0,0,.06),0 4px 12px -4px rgba(0,0,0,.16);--bayang2:0 2px 4px rgba(0,0,0,.08),0 10px 24px -8px rgba(0,0,0,.24);--kilat:rgba(255,255,255,.75)}
html.t3d.kuat{--bayang1:0 2px 3px rgba(0,0,0,.08),0 8px 18px -6px rgba(0,0,0,.26);--bayang2:0 3px 6px rgba(0,0,0,.1),0 16px 32px -10px rgba(0,0,0,.32)}
html.t3d body{background:linear-gradient(180deg,color-mix(in srgb,var(--bg) 92%,#fff) 0%,var(--bg) 320px) fixed,var(--bg)}
/* kad timbul */
html.t3d :is(.card,.tile,.panel,.target,.tablewrap,form.grid,.dpanel>.panel,.sec>.sec-k){box-shadow:inset 0 1px 0 var(--kilat),var(--bayang1);background-image:linear-gradient(180deg,color-mix(in srgb,var(--surface) 96%,#fff),var(--surface) 60%)}
html.t3d .tile{border-radius:12px}
html.t3d .card{border-radius:12px;overflow:hidden}
html.t3d.kuat :is(.card,.tile){box-shadow:inset 0 1px 0 var(--kilat),var(--bayang2)}
/* butang biasa: timbul, tekan ke dalam */
html.t3d .btn:where(:not(#btnNotis)){position:relative;background-image:linear-gradient(180deg,color-mix(in srgb,var(--surface) 70%,#fff) 0%,var(--surface) 55%,color-mix(in srgb,var(--surface) 94%,#000) 100%);
  box-shadow:inset 0 1px 0 var(--kilat),0 1px 0 rgba(0,0,0,.05),0 3px 6px -2px rgba(0,0,0,.18);transition:transform .08s,box-shadow .12s,filter .15s}
html.t3d .btn:where(:not(#btnNotis)):active:not(:disabled){transform:translateY(1px);box-shadow:inset 0 2px 4px rgba(0,0,0,.14)}
/* butang utama: merah berkilat */
html.t3d .btn.primary{border-color:color-mix(in srgb,var(--red) 70%,#000);
  background-image:linear-gradient(180deg,color-mix(in srgb,var(--red) 72%,#fff) 0%,var(--red) 48%,color-mix(in srgb,var(--red) 80%,#000) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -2px 0 rgba(0,0,0,.18),0 4px 10px -3px color-mix(in srgb,var(--red) 70%,transparent);text-shadow:0 1px 1px rgba(0,0,0,.25)}
html.t3d.kuat .btn.primary{box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -3px 0 rgba(0,0,0,.2),0 8px 18px -5px color-mix(in srgb,var(--red) 80%,transparent)}
html.t3d .btn.primary{overflow:hidden}
html.t3d .btn.primary::after{content:"";position:absolute;top:-50%;left:-60%;width:40%;height:200%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);animation:t3dKilat 5s ease-in-out infinite;pointer-events:none}
html.t3d .btn.primary:hover::after{animation-duration:1.4s}
@keyframes t3dKilat{0%,70%{left:-60%}100%{left:130%}}
@media (prefers-reduced-motion:reduce){html.t3d .btn.primary::after{animation:none;display:none}}
/* lencana & pil berkilat sedikit */
html.t3d .pill{box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 1px 2px rgba(0,0,0,.08)}
html.t3d .plate{box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 2px 4px rgba(0,0,0,.25)}
/* header kaca & bar bawah terapung */
html.t3d header.top{box-shadow:0 6px 18px -12px rgba(0,0,0,.35)}
html.t3d .bnav{box-shadow:0 -8px 24px -10px rgba(0,0,0,.25)}
html.t3d .bnav button[aria-current]{color:var(--red);text-shadow:0 0 12px color-mix(in srgb,var(--red) 45%,transparent)}
html.t3d .bnav button[aria-current] svg{filter:drop-shadow(0 2px 4px color-mix(in srgb,var(--red) 55%,transparent))}
/* nombor tugas & ikon bulat timbul */
html.t3d :is(.u-n,.stepper i){box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 2px 5px -1px rgba(0,0,0,.2)}
/* ===== dashboard eksklusif (html.t3d) ===== */
html.t3d .tile{position:relative;overflow:hidden;border-radius:14px}
html.t3d .tile{background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 75%,#fff) 0%,var(--surface) 45%,color-mix(in srgb,var(--surface) 97%,#000) 100%)}
/* jubin utama: hitam berkilat, garis merah bercahaya */
html.t3d .tile.net{background:linear-gradient(150deg,#323232 0%,#161616 55%,#0b0b0b 100%);border:1px solid #000;border-top:0;color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),inset 0 3px 0 var(--red),0 10px 24px -8px rgba(0,0,0,.55),0 4px 18px -6px color-mix(in srgb,var(--red) 55%,transparent)}
html.t3d .tile.net::after{content:"";position:absolute;top:-60%;left:-40%;width:35%;height:220%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.16),transparent);transform:skewX(-20deg);animation:t3dKilat 7s ease-in-out infinite;pointer-events:none}
html.t3d .tile.net .k,html.t3d .tile.net .s,html.t3d .tile.net .sm{color:rgba(255,255,255,.72)}
html.t3d .tile.net .v{color:#fff;text-shadow:0 2px 10px rgba(255,255,255,.18)}
html.t3d .tile.net .v.neg{color:#ff6b73}html.t3d .tile.net .v.pos{color:#5fd08f}
/* kad dashboard: kepala bergradien */
html.t3d .card{border-radius:14px}
html.t3d .card-h{background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 80%,#fff),color-mix(in srgb,var(--surface) 96%,#000))}
/* nombor tugas: gelembung 3D */
html.t3d .u-n{border-radius:12px;color:#fff;text-shadow:0 1px 1px rgba(0,0,0,.3);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -2px 0 rgba(0,0,0,.18),0 3px 8px -2px rgba(0,0,0,.3)}
html.t3d .u-n.tinggi{background:linear-gradient(180deg,color-mix(in srgb,var(--red) 70%,#fff),var(--red) 55%,color-mix(in srgb,var(--red) 80%,#000))}
html.t3d .u-n.sederhana{background:linear-gradient(180deg,#f5c56b,#e39b24 55%,#b97611)}
html.t3d .u-n.rendah{background:linear-gradient(180deg,#8fb4f0,#3d78d8 55%,#2a5bb0)}
html.t3d .u-list button{transition:transform .12s,box-shadow .12s,background .12s}
html.t3d .u-list button:active{transform:scale(.99)}
@media (hover:hover){html.t3d .u-list button:hover{background:var(--surface);box-shadow:0 6px 16px -8px rgba(0,0,0,.3);transform:translateY(-1px)}}
/* langkah status job: bulatan 3D */
html.t3d .stepper li.on i{background:linear-gradient(180deg,color-mix(in srgb,var(--red) 70%,#fff),var(--red) 55%,color-mix(in srgb,var(--red) 80%,#000))}
html.t3d .stepper li.done i{background:linear-gradient(180deg,#5fd08f,#1f8f4e 55%,#17703c)}

/* ===================== v2.10 gambar profil ===================== */
.pf-av{overflow:hidden}
.pf-av img{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit}
button.av{border:0;padding:0;cursor:pointer;font:inherit}
.side-user button.av{font-weight:600;font-size:13px}
.side-user .av.pf-ada,.u-saya .av.pf-ada{background:#ddd}
.u-saya{display:flex;align-items:center;gap:12px;min-width:0}
.u-saya .av{width:48px;height:48px;flex:none;border-radius:50%;background:var(--red);color:#fff;display:grid;place-items:center;font-weight:700;font-size:16px;letter-spacing:.04em;
  box-shadow:0 0 0 3px var(--surface),0 0 0 4px color-mix(in srgb,var(--red) 55%,transparent),0 6px 14px -4px rgba(0,0,0,.35)}
.pf-btn{border:0;background:none;padding:0;cursor:pointer;flex:none;border-radius:50%}
.pf-baris{display:flex;align-items:center;gap:10px}
.pf-baris .av{width:36px;height:36px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-weight:600;font-size:12.5px;box-shadow:0 2px 6px -1px rgba(0,0,0,.3)}
.pf-m{max-width:420px}
.pf-isi{display:flex;align-items:center;gap:16px;margin:6px 0 16px}
.pf-isi .av.pf-besar{width:96px;height:96px;border-radius:50%;background:var(--red);color:#fff;display:grid;place-items:center;font-size:30px;font-weight:700;flex:none;
  box-shadow:0 0 0 4px var(--surface),0 0 0 5px var(--line),0 10px 24px -8px rgba(0,0,0,.4)}
.pf-m .hint{margin-top:10px}
/* rupa 3D: mod gelap */
@media (prefers-color-scheme:dark){
  :root.t3d:not([data-theme="light"]){--kilat:rgba(255,255,255,.07)}
  :root.t3d:not([data-theme="light"]) body{background:var(--bg)}
  :root.t3d:not([data-theme="light"]) :is(.card,.tile,.panel,.target,.tablewrap,form.grid,.sec>.sec-k):not(.net){background-image:linear-gradient(180deg,#262626,#1c1c1c 45%,#191919)}
  :root.t3d:not([data-theme="light"]) .btn:where(:not(#btnNotis)):not(.primary){background-image:linear-gradient(180deg,#2c2c2c,#1f1f1f 55%,#191919)}
  :root.t3d:not([data-theme="light"]) .card-h{background:linear-gradient(180deg,#262626,#1e1e1e)}
}
:root.t3d[data-theme="dark"]{--kilat:rgba(255,255,255,.07)}
:root.t3d[data-theme="dark"] body{background:var(--bg)}
:root.t3d[data-theme="dark"] :is(.card,.tile,.panel,.target,.tablewrap,form.grid,.sec>.sec-k):not(.net){background-image:linear-gradient(180deg,#262626,#1c1c1c 45%,#191919)}
:root.t3d[data-theme="dark"] .btn:where(:not(#btnNotis)):not(.primary){background-image:linear-gradient(180deg,#2c2c2c,#1f1f1f 55%,#191919)}
:root.t3d[data-theme="dark"] .card-h{background:linear-gradient(180deg,#262626,#1e1e1e)}
html.t3d .side .btn{background-image:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,0));box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 2px 6px -2px rgba(0,0,0,.6)}
html.t3d .side-user button.av{box-shadow:0 0 0 2px #151515,0 0 0 3px color-mix(in srgb,var(--red) 60%,transparent)}

.kk-a .btn{padding-inline:8px;overflow-wrap:anywhere}

/* ===================== v2.10 butang Tempahan manual / Walk-in di atas ===================== */
#tm-details.tm-utama{margin:0 0 16px;padding:0;overflow:hidden;border:0;background:none;box-shadow:none}
#tm-details .tm-butang{list-style:none;display:flex;align-items:center;gap:14px;cursor:pointer;padding:14px 16px;border-radius:14px;color:#fff;position:relative;overflow:hidden;
  background:linear-gradient(180deg,color-mix(in srgb,var(--red) 72%,#fff) 0%,var(--red) 48%,color-mix(in srgb,var(--red) 80%,#000) 100%);border:1px solid color-mix(in srgb,var(--red) 70%,#000);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -3px 0 rgba(0,0,0,.2),0 8px 18px -6px color-mix(in srgb,var(--red) 75%,transparent);text-shadow:0 1px 1px rgba(0,0,0,.25);user-select:none}
#tm-details .tm-butang::-webkit-details-marker{display:none}
#tm-details .tm-butang::after{content:"";position:absolute;top:-50%;left:-60%;width:30%;height:200%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);transform:skewX(-20deg);animation:t3dKilat 5s ease-in-out infinite;pointer-events:none}
@media (prefers-reduced-motion:reduce){#tm-details .tm-butang::after{display:none}}
#tm-details .tm-butang:active{transform:translateY(1px)}
.tm-ikon{width:38px;height:38px;flex:none;border-radius:50%;display:grid;place-items:center;font-size:26px;font-weight:700;line-height:1;background:rgba(255,255,255,.2);box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 2px 6px -2px rgba(0,0,0,.35)}
.tm-teks{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.tm-teks b{font-size:17px;letter-spacing:.01em}
.tm-teks small{font-size:12.5px;opacity:.9}
.tm-anak{width:10px;height:10px;border-right:2.5px solid #fff;border-bottom:2.5px solid #fff;transform:rotate(45deg);margin:0 6px 4px 0;flex:none;transition:transform .2s}
#tm-details[open] .tm-anak{transform:rotate(-135deg);margin-bottom:-4px}
#tm-details[open]{background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--bayang2,0 10px 24px -8px rgba(0,0,0,.24))}
#tm-details[open] .tm-butang{border-radius:14px 14px 0 0}
#tm-details[open] > form{padding:14px 16px 16px!important}
#tm-details[open] > :not(summary):not(form){margin-inline:16px}
#tm-form{box-shadow:none!important}

/* ===================== v2.11 Pusat data ===================== */
body:not([data-peranan="pemilik"]) .pemilik-sahaja{display:none!important}
.pd-set{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.pd-c{display:flex;gap:8px;align-items:flex-start;padding:7px 9px;border:1px solid var(--line);border-radius:8px;cursor:pointer;background:var(--surface)}
.pd-c input{margin-top:3px;flex:none}
.pd-c span{display:flex;flex-direction:column;min-width:0}
.pd-c b{font-size:13.5px;font-weight:600}
.pd-c small{font-size:11.5px;color:var(--muted)}
.pd-ring{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:14px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface)}
@media (max-width:520px){.pd-set{grid-template-columns:minmax(0,1fr)}}
.pd-info{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:6px 0 8px}
.pd-c input[type=checkbox]{width:18px;height:18px;padding:0;margin:2px 0 0;flex:none;accent-color:var(--red)}
.pd-c span{flex:1}
#pd-box .filters input[type=date]{width:auto}

/* ===================== v2.12 job selesai tanpa caj ===================== */
.tc-kad{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;justify-content:space-between;margin-top:12px;padding:12px 14px;border:1px dashed color-mix(in srgb,var(--ok) 55%,var(--line));border-radius:12px;background:color-mix(in srgb,var(--ok-soft) 55%,var(--surface))}
.tc-kad>div{flex:1 1 260px;min-width:0}
.tc-baris{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}
.tc-baris select{flex:1 1 180px;width:auto}
.tc-baris input{flex:1 1 160px;width:auto}
.tc-btn{background-image:linear-gradient(180deg,#5fd08f,#1f8f4e 55%,#17703c)!important;color:#fff!important;border-color:#15653a!important;text-shadow:0 1px 1px rgba(0,0,0,.25);font-weight:700}
.tc-kad.tc-siap{border-style:solid;background:var(--ok-soft)}
.tc-kad.tc-siap b{color:var(--ok)}
@media (max-width:520px){.tc-btn{width:100%}}

/* ===================== v2.13 Pemantauan sistem ===================== */
.pm-kad{padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:var(--surface);margin-bottom:10px}
.pm-kad.ok{border-color:color-mix(in srgb,var(--ok) 45%,var(--line));background:var(--ok-soft)}
.pm-kad.ok b{color:var(--ok)}
.pm-kad.rosak{border-color:color-mix(in srgb,var(--red) 45%,var(--line));background:var(--red-soft)}
.pm-kad.rosak b{color:var(--red)}
.pm-senarai{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:6px}
.pm-baris{display:flex;gap:10px;align-items:flex-start;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--surface)}
.pm-baris span{display:flex;flex-direction:column;min-width:0}
.pm-baris small{font-size:12px;color:var(--muted);overflow-wrap:anywhere}
.pm-kod{font-size:12px;white-space:pre-wrap;overflow-wrap:anywhere}

/* ===== v2.14 Foreman: Progress & QC ===== */
.fm-amaran{display:grid;gap:8px;margin:0 0 14px}
.fm-am{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow);font-size:14px}
.fm-am b{display:block}
.fm-am .ik{flex:0 0 26px;height:26px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:14px;color:#fff;background:#b45309}
.fm-am.merah .ik{background:#b91c1c}
.fm-am.biru .ik{background:#1d4ed8}
.fm-am .btn{margin-left:auto;flex:0 0 auto}
.fm-papan{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.fm-mek{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:12px;min-width:0}
.fm-mek h4{margin:0 0 4px;display:flex;align-items:center;gap:8px;font-size:15px}
.fm-mek h4 .av{width:28px;height:28px;border-radius:50%;background:#e5e7eb;display:grid;place-items:center;font-size:12px;font-weight:800;color:#374151}
.fm-mek .muat{font-size:12px;color:var(--muted);margin:0 0 8px}
.fm-kad{border:1px solid var(--line);border-left:5px solid #16a34a;border-radius:10px;padding:9px 10px;margin-top:8px;font-size:13px;background:var(--bg)}
.fm-kad.kuning{border-left-color:#d97706}
.fm-kad.merah{border-left-color:#dc2626;background:color-mix(in srgb,#dc2626 6%,var(--bg))}
.fm-kad.qc{border-left-color:#2563eb}
.fm-kad .r1{display:flex;justify-content:space-between;gap:6px;align-items:center}
.fm-kad .plate{font-weight:800;letter-spacing:.03em}
.fm-kad .masa{font-weight:700;font-variant-numeric:tabular-nums}
.fm-kad.merah .masa{color:#b91c1c}
.fm-kad.kuning .masa{color:#b45309}
.fm-kad .bar{height:5px;border-radius:3px;background:#e5e7eb;margin:7px 0 6px;overflow:hidden}
.fm-kad .bar i{display:block;height:100%;background:#16a34a}
.fm-kad.kuning .bar i{background:#d97706}
.fm-kad.merah .bar i{background:#dc2626}
.fm-kad .tb{display:flex;gap:6px;margin-top:7px;flex-wrap:wrap}
.fm-kad .tb .btn{padding:5px 9px;font-size:12px}
.fm-sec{margin-top:18px}
.fm-sec>h3{margin:0 0 8px;font-size:15px;text-transform:uppercase;letter-spacing:.06em}
.fm-cek{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.fm-cek li{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface);font-size:14px}
.fm-cek li .t{flex:1;min-width:0}
.fm-cek li .t small{display:block;color:var(--muted);font-size:12px}
.fm-yt{display:flex;gap:6px;flex:0 0 auto}
.fm-yt button{min-width:44px;height:36px;border-radius:9px;border:1px solid var(--line);background:var(--bg);font-weight:800;font-size:15px}
.fm-yt button.ok{background:#16a34a;border-color:#16a34a;color:#fff}
.fm-yt button.tk{background:#dc2626;border-color:#dc2626;color:#fff}
.fm-cek li.gagal{border-color:#fca5a5;background:color-mix(in srgb,#dc2626 5%,var(--surface));flex-wrap:wrap}
.fm-cek li .nota{flex-basis:100%;display:flex;gap:8px;align-items:center;font-size:13px;color:#991b1b}
.fm-cek li .nota .foto{width:54px;height:40px;border-radius:6px;background:linear-gradient(135deg,#9ca3af,#4b5563);flex:0 0 auto}
.fm-kemajuan{display:flex;align-items:center;gap:10px;margin:0 0 10px;font-size:13px}
.fm-kemajuan .bar{flex:1;height:8px;border-radius:4px;background:#e5e7eb;overflow:hidden}
.fm-kemajuan .bar i{display:block;height:100%;background:#16a34a}
.fm-dua{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.fm-dua>*{min-width:0}
.fm-sec .list{width:100%}
.fm-st{display:inline-block;padding:2px 8px;border-radius:999px;font-size:12px;font-weight:700}
.fm-st.baik{background:#dcfce7;color:#166534}.fm-st.rosak{background:#fee2e2;color:#991b1b}.fm-st.baiki{background:#fef3c7;color:#92400e}.fm-st.hilang{background:#e5e7eb;color:#374151}
.fm-st.lewat{background:#fee2e2;color:#991b1b}.fm-st.dekat{background:#fef3c7;color:#92400e}
@media (max-width:1023px){.fm-papan{grid-template-columns:1fr}.fm-dua{grid-template-columns:1fr}}
table.list.fm-t,.fm-sec table.list{min-width:0}
.fm-nota{margin-top:6px;padding:6px 9px;border-radius:8px;background:color-mix(in srgb,#dc2626 8%,var(--surface));color:#991b1b;font-size:13px;border:1px solid color-mix(in srgb,#dc2626 30%,transparent)}
.fm-m{max-width:520px}
.fm-m .fm-cek li{padding:8px 10px}
.fm-gbr{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:8px}
.fm-gb{position:relative;display:inline-flex;align-items:center;gap:6px;padding:6px 26px 6px 10px;border:1px solid var(--line);border-radius:8px;font-size:13px;background:var(--bg)}
.fm-gb .x{position:absolute;right:4px;top:50%;transform:translateY(-50%);border:0;background:none;font-size:18px;line-height:1;cursor:pointer;color:var(--muted)}
.fm-pm{display:flex;align-items:center;gap:10px;width:100%;cursor:pointer}
.fm-pm input{width:20px;height:20px;flex:0 0 auto}
.fm-tet{margin-top:22px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);padding:12px 14px}
.fm-tet>summary{cursor:pointer;font-weight:700;font-size:15px}
.fm-tf{display:grid;gap:12px;margin-top:12px}
.fm-tf textarea{width:100%;font:inherit}
.fm-cb{display:flex;gap:10px;align-items:flex-start;cursor:pointer}
.fm-cb input{width:20px;height:20px;margin-top:2px;flex:0 0 auto}
.fm-cb small{display:block;color:var(--muted);font-size:12px;font-weight:400}
.fm-tf3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.fm-sas{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px}
.fm-sas>.k{grid-column:1/-1;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:600}
.fm-tf .fl input{width:100%}
.kk-qc{align-self:center}
.fm-kad .masa,.fm-kad .plate{white-space:nowrap}
@media (max-width:640px){.fm-tf3{grid-template-columns:1fr}}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .fm-kad .bar,:root:not([data-theme="light"]) .fm-kemajuan .bar{background:#374151}:root:not([data-theme="light"]) .fm-nota{color:#fca5a5}:root:not([data-theme="light"]) .fm-mek h4 .av{background:#374151;color:#e5e7eb}}
:root[data-theme="dark"] .fm-kad .bar,:root[data-theme="dark"] .fm-kemajuan .bar{background:#374151}:root[data-theme="dark"] .fm-nota{color:#fca5a5}:root[data-theme="dark"] .fm-mek h4 .av{background:#374151;color:#e5e7eb}

.fm-m .dhead h2{font-size:17px;text-transform:none;letter-spacing:0;line-height:1.35}
.kk-a .kk-qc{grid-column:1/-1;flex:1 1 100%;display:flex;justify-content:center;padding:9px 10px;font-size:13px;white-space:normal;text-align:center}

/* ===== v2.16: Semakan harian & Peralatan ===== */
.smk-amaran{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 14px;padding:10px 12px;border-radius:10px;border:1px solid #fca5a5;background:color-mix(in srgb,#dc2626 9%,var(--surface));color:var(--ink);font-size:14px}
.smk-amaran .ik{flex:0 0 26px;height:26px;border-radius:50%;display:grid;place-items:center;font-weight:800;color:#fff;background:#b91c1c}
.smk-amaran .t{flex:1;min-width:180px}
.smk-amaran .btn{flex:0 0 auto;white-space:nowrap}
@media (max-width:520px){.smk-amaran .t{flex:1 1 calc(100% - 40px)}.smk-amaran .btn{flex:1 1 100%;white-space:normal;height:auto;min-height:36px}}
.smk-hari{font-weight:700;margin:0 0 10px}
.smk-dua{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.smk-kad{background:var(--surface);border:1px solid var(--line);border-left:5px solid #9ca3af;border-radius:var(--r);box-shadow:var(--shadow);padding:14px 16px;min-width:0}
.smk-kad .k{font-size:11.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.smk-kad .v{font-family:var(--display);font-weight:700;font-size:26px;line-height:1.15;margin:2px 0}
.smk-kad .rowbtns{margin-top:10px}
.smk-kad.ok{border-left-color:#16a34a}.smk-kad.ok .v{color:#15803d}
.smk-kad.masalah{border-left-color:#d97706}.smk-kad.masalah .v{color:#b45309}
.smk-kad.lewat{border-left-color:#dc2626;background:color-mix(in srgb,#dc2626 6%,var(--surface))}.smk-kad.lewat .v{color:#b91c1c}
.smk-sel{border:0;background:none;padding:0;font:inherit;color:inherit;text-align:left;cursor:pointer;text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px}
.smk-sel.masalah{color:#b45309;font-weight:600}
.smk-cek li{flex-wrap:wrap}
.smk-x{flex-basis:100%;display:grid;gap:8px;margin-top:4px}
.smk-x textarea,.smk-borang textarea{width:100%;font:inherit;font-weight:400;color:var(--ink)}
.fl>span b{color:var(--ink)}
.smk-rosak{font-size:13px}
.smk-tanda{flex:0 0 auto;width:32px;height:32px;border-radius:8px;display:grid;place-items:center;font-weight:800;color:#fff;background:#16a34a}
.smk-tanda.tk{background:#dc2626}
.smk-borang{display:grid;gap:12px;margin-top:12px}
.lp-tahap{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:4px}
.lp-r{display:flex;gap:8px;align-items:flex-start;padding:10px;border:1px solid var(--line);border-radius:10px;background:var(--bg);cursor:pointer;font-weight:400}
.lp-r input[type=radio]{width:18px;height:18px;flex:0 0 18px;margin:2px 0 0;padding:0}
.lp-r small{display:block;color:var(--muted);font-size:12px}
.lp-r.on{border-color:#d97706;background:color-mix(in srgb,#d97706 8%,var(--surface))}
.lp-r.on.rosak{border-color:#dc2626;background:color-mix(in srgb,#dc2626 8%,var(--surface))}
.alat-tiles .v.warn{color:#b45309}
.isu-senarai{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.isu-kad{border:1px solid var(--line);border-left:5px solid #d97706;border-radius:10px;padding:10px 12px;background:var(--surface);box-shadow:var(--shadow);font-size:14px;min-width:0}
.isu-kad.rosak{border-left-color:#dc2626}
.isu-kad .r1{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.isu-kad .isu-pill{margin-left:auto;display:flex;gap:4px;flex-wrap:wrap}
.isu-ket{margin:6px 0 4px;white-space:pre-wrap;overflow-wrap:anywhere}
.isu-kad .rowbtns{margin-top:8px}
.isu-gbr{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0}
.isu-g{display:block;width:72px;height:54px;border-radius:6px;overflow:hidden;background:var(--line);font-size:11px;color:var(--muted);text-align:center;line-height:54px}
.isu-g img{width:100%;height:100%;object-fit:cover;display:block}
.alat-senarai{list-style:none;margin:0 0 6px;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.alat-b{display:flex;align-items:center;gap:8px;padding:9px 10px;border:1px solid var(--line);border-radius:10px;background:var(--surface);min-width:0}
.alat-b.rosak{border-color:#fca5a5;background:color-mix(in srgb,#dc2626 5%,var(--surface))}
.alat-b.perhatian{border-color:#fcd34d;background:color-mix(in srgb,#d97706 5%,var(--surface))}
.alat-n{flex:1;min-width:0}
.alat-n b{display:block;overflow-wrap:anywhere}
.alat-tb{display:flex;gap:6px;flex:0 0 auto}
.alat-tb .btn{padding:5px 9px;font-size:12px}
.alat-tf{grid-template-columns:2fr 1fr 1fr;align-items:end}
.alat-tf .rowbtns{grid-column:1/-1}
@media (max-width:1023px){.smk-dua,.isu-senarai,.alat-senarai{grid-template-columns:1fr}.alat-tf{grid-template-columns:1fr}}
@media (max-width:520px){.lp-tahap{grid-template-columns:1fr}.smk-t td{white-space:normal}}
.smk-m textarea{width:100%;font:inherit;font-weight:400;color:var(--ink)}
/* v2.17 Aset & keselamatan */
.aset-tiles{grid-template-columns:repeat(4,minmax(0,1fr))}
.fm-am-senarai{display:grid;gap:8px}
.fm-am-senarai .fm-am>div{flex:1;min-width:0}
.fm-am-senarai .fm-am .btn{flex:0 0 auto;align-self:center}
.aset-t td{vertical-align:middle}
.aset-t .m-l{display:none}
@media (min-width:721px){.aset-t.sv{table-layout:fixed}.aset-t.sv th:nth-child(1){width:34%}.aset-t.sv th:nth-child(2),.aset-t.sv th:nth-child(3){width:15%}.aset-t.sv th:nth-child(4){width:14%}.aset-t.sv th:nth-child(5){width:22%}}
.aset-t .aset-tb{text-align:right;white-space:nowrap}
.aset-t .aset-tb .btn+.btn{margin-left:6px}
@media (max-width:720px){
  .aset-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .aset-t thead{display:none}
  .aset-t tr{display:grid;grid-template-columns:1fr auto;gap:6px 10px;padding:12px 14px;border-bottom:1px solid var(--line)}
  .aset-t .m-l{display:inline;color:var(--muted);font-size:12px}
  .aset-t.sv td:nth-child(4){grid-column:1/-1}
  table.list.aset-t td{padding:0;border:0;background:none}
  .aset-t td:first-child{grid-column:1/-1}
  .aset-t td:nth-child(2):not(:last-child){font-size:13px}
  .aset-t .aset-tb{grid-column:1/-1;text-align:left;white-space:normal}
  .fm-am-senarai .fm-am{flex-wrap:wrap}
  .fm-am-senarai .fm-am .btn{margin-left:36px}
}
/* v2.18 Developer */
.kd-nota{display:flex;gap:6px;align-items:center;margin:6px 0 10px;padding:8px 12px;border-radius:8px;background:color-mix(in srgb,#64748b 10%,var(--surface));border:1px dashed var(--line);color:var(--muted);font-size:13px}
.bukan-dev [data-dev]{opacity:.7}
.bukan-dev [data-dev] :is(input,select,textarea){cursor:not-allowed}
/* v2.18 jadual: desktop lebih kemas, telefon jadi kad berlabel */
table.list.kad tbody tr:nth-child(even) td{background:color-mix(in srgb,var(--ink) 2.5%,transparent)}
table.list.kad td.num,table.list.kad th.num{font-variant-numeric:tabular-nums;white-space:nowrap}
table.list.kad thead th{position:sticky;top:0;z-index:1}
@media (max-width:720px){
  .tablewrap:has(> table.list.kad){overflow:visible;border:0;box-shadow:none;background:none}
  table.list.kad,table.list.kad tbody,table.list.kad tr,table.list.kad td{display:block;width:100%}
  table.list.kad{border:0;background:none;min-width:0}
  table.list.kad thead{display:none}
  table.list.kad tbody tr{border:1px solid var(--line);border-radius:12px;margin:0 0 10px;padding:8px 12px;background:var(--surface);box-shadow:var(--shadow)}
  table.list.kad tbody tr:nth-child(even) td{background:none}
  table.list.kad td{display:block;position:relative;padding:7px 0 7px 40%;min-height:30px;border:0;text-align:right;min-width:0;overflow-wrap:anywhere}
  table.list.kad td+td{border-top:1px dashed color-mix(in srgb,var(--line) 70%,transparent)}
  table.list.kad td::before{content:attr(data-l);position:absolute;left:0;top:8px;width:37%;text-align:left;color:var(--muted);font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase}
  table.list.kad td[data-l=""]{padding-left:0;text-align:left}
  table.list.kad tfoot,table.list.kad tfoot tr{display:block}
  table.list.kad tfoot tr{border:1px solid var(--line);border-radius:12px;padding:8px 12px;background:var(--surface);font-weight:700}
  table.list.kad tfoot td{display:block;position:relative;padding:7px 0 7px 40%;border:0;text-align:right}
  table.list.kad tfoot td::before{content:attr(data-l);position:absolute;left:0;top:8px;width:37%;text-align:left;color:var(--muted);font-size:11px;letter-spacing:.05em;text-transform:uppercase}
  table.list.kad tfoot td:empty{display:none}
  table.list.kad td[data-l=""]::before{display:none}
  table.list.kad td:first-child{font-size:15px}
  table.list.kad td:empty{display:none}
  table.list.kad td > :is(input,select){max-width:100%}
  table.list.kad td .pf-baris,table.list.kad td .actions{justify-content:flex-end}
  table.list.kad td .actions,table.list.kad td .rowbtns{justify-content:flex-end;flex-wrap:wrap}
}
/* v2.19 lupa kata laluan */
.pautan-lupa{background:none;border:0;padding:6px 0;color:var(--accent,#d3202b);font:inherit;font-size:14px;font-weight:600;cursor:pointer;text-align:left}
.pautan-lupa:hover{text-decoration:underline}
.rk-panel{margin:0 0 14px;display:grid;gap:8px}
.rk-panel .fm-am>div{flex:1;min-width:0}
.rk-tb{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-left:auto}
.kw-m{max-width:440px}
@media (max-width:720px){.rk-panel .fm-am{flex-wrap:wrap}.rk-panel .fm-am>div{flex:1 1 calc(100% - 40px)}.rk-tb{margin-left:36px}}
/* v2.20 laporan pemeriksaan */
.pmk-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.pmk-kad{border:1px solid var(--line);border-radius:12px;padding:12px;background:var(--surface);display:grid;gap:8px;align-content:start}
.pmk-kad.ada-merah{border-color:#fca5a5;box-shadow:inset 4px 0 0 #dc2626}
.pmk-h{display:flex;gap:10px;justify-content:space-between;align-items:flex-start}
.pmk-h .btn{flex:0 0 auto}
.pmk-h .btn.disabled{opacity:.5;pointer-events:none}
.pmk-st{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:14px}
.pmk-pusing{width:16px;height:16px;border-radius:50%;border:2px solid var(--line);border-top-color:#d3202b;animation:pmkp 0.8s linear infinite}
@keyframes pmkp{to{transform:rotate(360deg)}}
.pmk-gagal{padding:8px 10px;border-radius:8px;background:color-mix(in srgb,#dc2626 8%,var(--surface));color:#b91c1c;font-size:13px}
.pmk-kira{display:flex;gap:6px;flex-wrap:wrap}
.pmk-tahap{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-top:2px}
.pmk-tahap.merah{color:#b91c1c}.pmk-tahap.kuning{color:#b45309}
.pmk-l{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.pmk-i{display:flex;gap:8px;align-items:flex-start;font-size:14px}
.pmk-dot{flex:0 0 10px;height:10px;border-radius:50%;margin-top:5px;background:#d97706}
.pmk-i.merah .pmk-dot{background:#dc2626}
.pmk-cd{font-size:13px;color:var(--ink);margin-top:2px}
.pmk-cd::before{content:"→ ";color:var(--muted)}
.pmk-rg{font-size:13px;color:var(--muted);border-top:1px dashed var(--line);padding-top:6px}
.pmk-part{margin-top:6px;border:1px dashed color-mix(in srgb,#2563eb 40%,var(--line));border-radius:10px;padding:8px;display:grid;gap:6px;background:color-mix(in srgb,#2563eb 4%,var(--surface))}
.pmk-part-h{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#2563eb}
.pmk-pt{display:grid;gap:2px}
.pmk-calon{display:flex;gap:8px;align-items:center;justify-content:space-between;padding:5px 0;border-top:1px solid var(--line)}
.pmk-calon-n{min-width:0;font-size:13px}
.pmk-calon .btn,.pmk-calon .pill{flex:0 0 auto}
.pmk-awas{color:#b45309;font-weight:600}
.pmk-kaji{margin-top:6px;border:1px solid color-mix(in srgb,#7c3aed 35%,var(--line));border-radius:10px;padding:8px;display:grid;gap:4px;background:color-mix(in srgb,#7c3aed 5%,var(--surface))}
.pmk-kaji .pmk-part-h{color:#7c3aed;display:flex;gap:6px;align-items:center}
.pmk-kaji a{color:#2563eb;word-break:break-all}
.pmk-pt .rowbtns{margin-top:4px}
.kenal{margin-top:14px;border:1px solid color-mix(in srgb,#2563eb 35%,var(--line));border-radius:10px;padding:10px;display:grid;gap:6px;background:color-mix(in srgb,#2563eb 4%,var(--surface))}
.kenal > .k{display:flex;gap:6px;align-items:center}
.kenal-g{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:6px 12px}
.kenal-g > div{display:grid;gap:1px;min-width:0}
.kenal-g b{overflow-wrap:anywhere}
.pmk-gbr{display:flex;gap:6px;flex-wrap:wrap}
.pmk-g{width:56px;height:56px;border-radius:8px;overflow:hidden;border:1px solid var(--line);display:grid;place-items:center;font-size:11px;background:var(--bg)}
.pmk-g img{width:100%;height:100%;object-fit:cover}
@media (max-width:720px){.pmk-grid{grid-template-columns:1fr}}
/* v2.21 imbas AI */
.ai-imbas{border:1px dashed color-mix(in srgb,#2563eb 45%,var(--line));border-radius:12px;padding:12px;background:color-mix(in srgb,#2563eb 5%,var(--surface));display:grid;gap:8px}
.ai-kepala{display:flex;gap:12px;align-items:center;justify-content:space-between}
.ai-kepala .btn{flex:0 0 auto;white-space:nowrap}
.ai-kepala .btn.disabled{opacity:.6;pointer-events:none}
.ai-hasil{display:grid;gap:6px}
.ai-chip{display:inline-block;padding:2px 8px;border-radius:999px;background:#dbeafe;color:#1e3a8a;font-size:12px;font-weight:600;margin:2px 2px 0 0}
.ai-masalah{display:grid;gap:4px}
#jobForm .ai-isi{background:color-mix(in srgb,#60a5fa 14%,var(--surface)) !important;border-color:#60a5fa !important;box-shadow:0 0 0 2px color-mix(in srgb,#60a5fa 35%,transparent)}
.apa.merah{border-color:#dc2626;background:color-mix(in srgb,#dc2626 7%,var(--surface))}
@media (max-width:720px){.ai-kepala{flex-wrap:wrap}.ai-kepala .btn{width:100%;justify-content:center;text-align:center}}
.ai-isi{background:color-mix(in srgb,#60a5fa 14%,var(--surface)) !important;border-color:#60a5fa !important;box-shadow:0 0 0 2px color-mix(in srgb,#60a5fa 35%,transparent)}
.ai-nota{margin-top:4px}
.ai-nota.err{color:#b91c1c}
/* v2.21 senarai tempahan hari ini (Bengkel) */
.ltm-kepala{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.ltm-bil{color:var(--muted);font-weight:600;font-size:13px}
.ltm-senarai{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.ltm-b{display:grid;grid-template-columns:auto auto 1fr auto;gap:10px;align-items:center;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:var(--bg)}
.ltm-b.lewat{border-left:4px solid #d97706}
.ltm-masa{font-family:var(--mono);font-weight:700;font-size:15px;min-width:3.2em}
.ltm-info{min-width:0;font-size:14px}
.ltm-info small{display:block;color:var(--muted);font-size:12px;margin-top:2px}
@media (max-width:520px){.ltm-b{grid-template-columns:auto 1fr auto;grid-template-areas:"masa plat btn" "info info info"}.ltm-masa{grid-area:masa}.ltm-b .plate{grid-area:plat;justify-self:start}.ltm-b .btn{grid-area:btn}.ltm-info{grid-area:info}}

/* Reminder Servis — papan WhatsApp reminder */
.wa-dash{margin-bottom:14px}
.wa-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.wa-head h3{margin:0}
.wa-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.wa-card{display:flex;flex-direction:column;gap:10px;min-width:0;padding:14px;border:1px solid var(--line);border-radius:8px;background:var(--bg)}
.wa-card > .k{font-size:11.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.wa-big{font-family:var(--display);font-weight:700;font-size:22px;line-height:1.2;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.wa-dari{font-family:var(--body);font-weight:400;font-size:14px;color:var(--muted)}
.wa-card .bar{margin-top:0}
.wa-act{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:auto}
.wa-qr{display:grid;gap:6px;justify-items:start}
.wa-qr img{background:#fff;padding:8px;border-radius:8px;max-width:100%;height:auto}
.wa-dua{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;align-items:end}
.wa-suis{display:inline-flex;align-items:center;gap:10px;font-weight:600;cursor:pointer;width:max-content}
.wa-suis input{position:absolute;opacity:0;width:1px;height:1px}
.wa-suis-t{position:relative;width:42px;height:24px;border-radius:12px;background:var(--line);transition:background .2s}
.wa-suis-t::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:var(--surface);box-shadow:0 1px 2px rgba(0,0,0,.3);transition:transform .2s}
.wa-suis input:checked + .wa-suis-t{background:var(--ok)}
.wa-suis input:checked + .wa-suis-t::after{transform:translateX(18px)}
.wa-suis input:focus-visible + .wa-suis-t{outline:2px solid var(--ink);outline-offset:2px}
.wa-nota{margin-top:10px}
.wa-nota ul{margin:6px 0 0;padding-left:18px;display:grid;gap:4px}
@media (max-width:820px){.wa-grid{grid-template-columns:minmax(0,1fr)}}

/* Reminder Servis — templat dengan gambar / video */
.tp-versi{display:grid;gap:8px;padding:12px;border:1px solid var(--line);border-radius:8px;background:var(--bg)}
.tp-teks{font:15px var(--body);padding:10px;border:1px solid var(--line);border-radius:6px;background:var(--surface);color:var(--ink);width:100%}
.tp-media{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.tp-media .tp-pra{width:96px;height:96px;object-fit:cover;border-radius:6px;border:1px solid var(--line);background:#000}
.tp-media input[type=file]{position:absolute;width:1px;height:1px;opacity:0}
.tp-butang{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:10px}
@media (max-width:520px){.tp-butang{grid-template-columns:minmax(0,1fr)}}
.tp-nota{margin:0;padding-left:18px;display:grid;gap:4px}
.wa-dua select{width:100%}

/* Reminder Servis — susun atur seksyen yang seragam */
.wa-amaran{color:var(--warn)}
.rm-seksyen{margin-bottom:14px}
.rm-seksyen .filters{margin-top:0}
.rm-pager{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px}
.rm-bantu{margin:10px 0 0;color:var(--muted)}
.rm-lipat{margin-bottom:14px}
.rm-lipat > summary{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.rm-lipat[open] > summary{margin-bottom:12px}
.rm-isi{display:grid;gap:12px;margin:0}
.rm-isi .rm-bantu{margin:0}
.rm-dua{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.rm-act{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.rm-act .btn.danger{margin-left:auto}
.rm-fail{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.rm-fail input[type=file]{position:absolute;width:1px;height:1px;opacity:0}
.rm-ringkas{display:flex;flex-wrap:wrap;gap:6px}
@media (max-width:520px){.rm-dua{grid-template-columns:minmax(0,1fr)}}

/* Reminder Servis — tab Automatik / Manual / Nombor & mesej, giliran & status mesej */
.rm-giliran{display:grid;gap:8px;margin-bottom:14px}
.rm-giliran-k{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap}
.rm-giliran .bar{margin-top:0}
.rm-tab{margin-bottom:14px;flex-wrap:wrap}
.rm-tabisi[hidden]{display:none}
.wa-grid.dua{grid-template-columns:repeat(2,minmax(0,1fr))}
.st-tanda{font-weight:700;letter-spacing:-.12em;margin-right:6px}
.st-dibaca .st-tanda{color:var(--info)}
.st-sampai .st-tanda,.st-dihantar .st-tanda{color:var(--muted)}
.st-gagal{color:var(--red)}
.st-balas{max-width:28ch;overflow-wrap:anywhere}
@media (max-width:820px){.wa-grid.dua{grid-template-columns:minmax(0,1fr)}}
.rm-uji{display:flex;flex-wrap:wrap;align-items:end;gap:10px;margin-top:10px}
.rm-uji .fl{flex:1 1 14rem;max-width:22rem}
.rm-sekat{color:var(--warn)}

/* Reminder Servis — senarai automatik / manual berasingan, contoh mesej tersembunyi */
.mn-hantar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;padding:12px;border:1px solid var(--line);border-radius:8px;background:var(--bg)}
.mn-hantar .wa-big{margin-left:6px}
.mn-hantar .btn{margin-left:auto}
.sn-contoh-l > summary{cursor:pointer;color:var(--muted);width:max-content}
.sn-contoh{white-space:pre-wrap;font-size:14px;margin-top:8px}
@media (max-width:520px){.mn-hantar .btn{margin-left:0;width:100%}}

/* Reminder Servis — Laporan status nombor */
.lp-julat{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:10px;margin-bottom:12px}
.lp-julat .seg{flex-wrap:wrap}
.lp-tarikh{display:flex;gap:10px}
.lp-tarikh .fl{min-width:9.5rem}
.lp-tiles{margin-bottom:0}
.lp-tiles .tile .s{min-height:1em}
.lp-bar{display:inline-block;height:8px;border-radius:4px;background:var(--red);vertical-align:middle;margin-left:6px}
@media (max-width:520px){.lp-tarikh{width:100%}.lp-tarikh .fl{flex:1;min-width:0}}

/* Reminder Servis — beberapa akaun WhatsApp */
.wa-sub{margin:4px 0 8px;font-size:11.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.wa-akaun{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.wa-akaun .wa-card{gap:8px}
.wa-akaun-k{display:flex;align-items:center;justify-content:space-between;gap:8px}
.wa-akaun .wa-big{font-size:20px}
.wa-akaun .fl input,.wa-akaun .fl select{width:100%}
.wa-tambah{margin:10px 0 14px}
.wa-grid.satu{grid-template-columns:minmax(0,1fr)}

/* Laporan: bar alat ringkas (nombor, tempoh, tarikh, muat turun) */
.lp-alat{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) auto;align-items:end;gap:10px;margin-bottom:12px}
.lp-alat select,.lp-alat input{width:100%}
.lp-alat .btn{white-space:nowrap}
@media (max-width:820px){.lp-alat{grid-template-columns:repeat(2,minmax(0,1fr))}.lp-alat .btn{grid-column:1 / -1}}
/* kad akaun: butang utama di kiri, padam di kanan */
.wa-akaun .wa-act [data-ak="padam"]{margin-left:auto}
.lp-pilihan td{background:var(--info-soft)}

/* Home: kad Tracker Device Report */
.u-tdr{margin-top:16px}
.u-tdr-kad .card-h{display:flex;align-items:center;justify-content:space-between;gap:10px}
.u-tdr-isi{display:flex;flex-wrap:wrap;gap:6px;padding:0 16px 10px}
.u-tdr-tiles{padding:0 16px 16px;margin:0}
/* menu khas developer */
nav.tabs button.dev::after{content:"DEV";margin-left:auto;font-size:9.5px;font-weight:600;letter-spacing:.08em;padding:1px 5px;border-radius:3px;border:1px solid rgba(255,255,255,.22);color:var(--side-muted)}
nav.tabs button.dev .mn-l{white-space:normal;line-height:1.25}

/* v2.44: butang Notis di Home */
[data-nt-buka]{border-color:var(--info);color:var(--info)}
[data-nt-buka] .nt-bil{margin-left:6px}
/* v2.44: Tracker — dashboard ikut nombor bersambung */
.lp-nombor{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px;margin-bottom:14px}
.lp-no{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:0;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink);text-align:left;cursor:pointer;font:inherit}
.lp-no[aria-pressed="true"]{border-color:var(--red);box-shadow:inset 0 0 0 1px var(--red)}
.lp-no-t{display:flex;align-items:center;gap:6px;min-width:0}
.lp-no-t b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lp-titik{width:8px;height:8px;border-radius:50%;background:var(--green,#2e9e5b);flex:none}
@media (min-width:821px){.lp-alat{grid-template-columns:repeat(3,minmax(0,1fr)) auto}}
/* v2.44: Blaster */
.bl-pilih{display:flex;flex-wrap:wrap;align-items:end;gap:10px;margin-bottom:12px}
.bl-pilih .fl{flex:1 1 16rem}
.bl-tiles{margin:4px 0 10px}
.bl-kawal{margin-top:10px}
.bl-form{display:grid;gap:0}
.bl-no{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--red);color:#fff;font-size:13px;margin-right:4px;vertical-align:1px}
.bl-sub{margin:12px 0 6px}
.bl-akaun{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px}
.bl-ak{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:var(--bg);cursor:pointer}
.bl-ak>span{display:flex;flex-direction:column;min-width:0}
.bl-ak input{margin-top:3px;width:18px;height:18px;flex:none;padding:0}
.bl-ak>span{flex:1 1 auto}
.bl-ak b{overflow-wrap:anywhere}
.bl-ak.putus{opacity:.6}
.bl-ak:has(input:checked){border-color:var(--red)}
.bl-ayat{display:grid;gap:10px;margin-bottom:10px}
.bl-ayat-v{display:grid;gap:6px}
.bl-ayat-v .btn{justify-self:start}
.bl-media{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px;margin-bottom:10px}
.bl-m{display:grid;gap:6px;padding:6px;border:1px solid var(--line);border-radius:8px;background:var(--bg)}
.bl-m img,.bl-m video{width:100%;aspect-ratio:1;object-fit:cover;border-radius:6px;background:#000}
.bl-masa{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:8px}
.bl-masa select,.bl-masa input{width:100%}
.bl-cek{display:flex;gap:8px;align-items:flex-start;margin-top:12px;font-size:14px}
.bl-cek input{margin-top:3px;width:18px;height:18px;flex:none;padding:0}
.bl-simpan{margin:0 0 16px}
#bl-nombor{width:100%;font-family:ui-monospace,monospace;margin-bottom:8px}
@media (max-width:520px){.bl-masa,.tp-butang{grid-template-columns:1fr}.lp-nombor{grid-template-columns:1fr 1fr}}
/* v2.45: pelanggan baru — carian, Excel, tambah ke kempen Blaster */
.pb-alat{display:grid;grid-template-columns:minmax(0,2fr) auto minmax(0,1.5fr) auto;align-items:end;gap:10px;margin:10px 0 6px}
.pb-alat input,.pb-alat select{width:100%}
.pb-alat .btn{white-space:nowrap}
@media (max-width:820px){.pb-alat{grid-template-columns:1fr}}
/* v2.46: Blaster — seksyen boleh dilipat ikut kategori, ujian bersama ayat & media */
.bl-lipat{padding:0;margin-bottom:12px;overflow:hidden}
.bl-lipat>summary{display:flex;align-items:center;gap:10px;padding:14px 16px;cursor:pointer;list-style:none;min-height:56px}
.bl-lipat>summary::-webkit-details-marker{display:none}
.bl-lipat>summary::after{content:"";margin-left:auto;flex:none;width:9px;height:9px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);transition:transform .15s}
.bl-lipat[open]>summary::after{transform:rotate(-135deg)}
.bl-lipat[open]>summary{border-bottom:1px solid var(--line)}
.bl-lipat .bl-no{margin:0;flex:none}
.bl-sum{display:flex;flex-direction:column;gap:2px;min-width:0}
.bl-sum .sm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bl-isi{padding:14px 16px 16px;display:grid;gap:10px}
.bl-isi>.k.bl-sub{margin:8px 0 0}
.bl-isi>.btn,.bl-isi>label.btn{justify-self:start}
.bl-uji{margin-top:8px;padding:12px;border:1px dashed var(--line);border-radius:8px;display:grid;gap:8px}
ul.bl-isi{margin:0;padding-left:34px}

/* v2.46.6: dashboard Tracker — tempoh penuh, Dari | Hingga sebaris, Excel penuh; input tarikh iPhone tidak melimpah */
.lp-alat label.fl{min-width:0}
.lp-alat input[type=date]{-webkit-appearance:none;appearance:none;display:block;min-width:0;max-width:100%;box-sizing:border-box;text-align:left;min-height:44px}
.lp-alat input[type=date]::-webkit-date-and-time-value{text-align:left}
@media (max-width:820px){.lp-alat .lp-tempoh{grid-column:1 / -1}}
.lp-banding{margin-top:4px;font-size:12px;color:var(--muted)}
.lp-banding .naik{color:var(--green,#2e9e5b);font-weight:600}
.lp-banding .turun{color:var(--red);font-weight:600}
/* v2.48: Blaster — panduan, bar kemajuan, log penghantaran, ujian semua akaun */
.bl-panduan>summary .bl-no{background:var(--info,#3b82f6)}
.bl-panduan ol.bl-isi,.bl-panduan ul.bl-isi{margin:0;padding-left:34px;display:grid;gap:6px}
.bl-kemajuan{display:grid;gap:6px;margin:4px 0 10px}
.bl-kemajuan-k{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.bl-kemajuan .bar{margin:0}
.bl-keadaan{margin:6px 0 2px}
.bl-log-kini td{background:color-mix(in srgb,var(--info,#3b82f6) 10%,transparent)}
.bl-uji-senarai{display:grid;gap:6px}
.bl-uji-b{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--bg)}
.bl-uji-b.putus{opacity:.6}
.bl-uji-b .pos{color:var(--green,#2e9e5b)}
.bl-uji-b .neg{color:var(--red)}
/* v2.49: Blaster — log ikut akaun, keputusan & muat turun, pangkalan nombor; Akaun — ubah profil */
.bl-log-mod{margin-bottom:8px}
.bl-log-akaun{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.bl-lk{display:grid;gap:6px;padding:12px;border:1px solid var(--line);border-radius:10px;background:var(--bg)}
.bl-lk.giliran{border-color:var(--red);box-shadow:inset 0 0 0 1px var(--red)}
.bl-lk.putus{opacity:.65}
.bl-lk-h{display:flex;justify-content:space-between;align-items:center;gap:8px}
.bl-lk-g{color:var(--red);font-weight:600}
.bl-lk-n{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;text-align:center}
.bl-lk-n>span{display:flex;flex-direction:column;padding:6px 2px;border-radius:6px;background:var(--surface)}
.bl-lk-n b{font-size:18px}
.bl-lk-t{display:flex;flex-wrap:wrap;gap:4px;font-size:12px}
.bl-lk-t>span{padding:2px 6px;border-radius:999px;background:var(--surface)}
.bl-hasil{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:10px}
.bl-hasil-k{display:grid;gap:4px;padding:10px;border:1px solid var(--line);border-radius:8px;background:var(--bg)}
.bl-hasil-k .v{font-size:22px}
.bl-hasil-k .btn{justify-self:start}
.bl-db{margin-top:14px;padding-top:12px;border-top:1px dashed var(--line);display:grid;gap:8px}
.bl-db-pilih{display:flex;flex-wrap:wrap;align-items:end;gap:8px}
.bl-db-pilih .fl{flex:1 1 16rem}
.bl-db-baru{display:grid;gap:8px}
.bl-db-baru>summary{cursor:pointer;color:var(--info,#3b82f6);font-weight:600;margin-bottom:6px}
.wa-profil{border-top:1px dashed var(--line);padding-top:8px}
.wa-profil>summary{cursor:pointer;color:var(--info,#3b82f6);font-weight:600}
.wa-profil-isi{display:grid;gap:8px;margin-top:8px}
.wa-pf-hasil .pos{color:var(--green,#2e9e5b)} .wa-pf-hasil .neg{color:var(--red)}
@media (max-width:520px){.bl-hasil{grid-template-columns:1fr}}
/* v2.50: laporan WhatsApp & rangkaian akaun */
#bl-lapor-hasil .pos{color:var(--green,#2e9e5b)} #bl-lapor-hasil .neg{color:var(--red)}
.wa-ak-rangkaian b{font-weight:600}
.lp-titik.semua{background:var(--info,#3b82f6)}

/* v2.52 Blaster 3 langkah & popup */
.bl-atas{margin-bottom:12px}
.bl-atas .bl-pilih{margin-bottom:10px}
.bl-langkah{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;counter-reset:l}
.bl-langkah button{display:flex;align-items:center;gap:10px;text-align:left;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--ink);cursor:pointer;font:inherit;min-width:0;position:relative}
.bl-langkah button .bl-no{background:var(--muted);flex:none;margin:0}
.bl-langkah button[aria-pressed="true"]{border-color:var(--red);box-shadow:inset 0 0 0 1px var(--red);background:var(--surface)}
.bl-langkah button[aria-pressed="true"] .bl-no{background:var(--red)}
.bl-langkah button.siap .bl-no{background:var(--ok)}
.bl-langkah .bl-sum b{font-size:14px}
.bl-langkah-isi{display:grid;gap:0}
.bl-simpan{position:sticky;bottom:12px;z-index:5;display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap;margin:0 0 16px;padding:10px 12px;background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:0 8px 24px -12px rgba(0,0,0,.35)}
.bl-simpan .msg{margin-right:auto}
.bl-nombor-p{margin-bottom:12px}
.bl-nombor-p .bl-isi{padding:0}
.bl-nav{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.bl-status-p{margin-bottom:12px}
.bl-pop{width:min(480px,calc(100% - 32px));border-top-color:var(--ok)}
.bl-pop.amaran{border-top-color:var(--red)}
.bl-pop h2{margin:0 0 6px;font-size:20px}
.bl-pop-isi{display:grid;gap:6px;font-size:14px}
.bl-pop-ring{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 12px;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:var(--bg);font-size:14px}
.bl-pop-ring>span:nth-child(odd){color:var(--muted)}
.bl-pop-ring b{overflow-wrap:anywhere}
.bl-pop .rowbtns{margin-top:16px;display:flex;flex-wrap:wrap;gap:8px}
.bl-pop .rowbtns .btn{flex:1 1 auto}
@media (max-width:1023px){.bl-simpan{bottom:calc(var(--bnav-h) + env(safe-area-inset-bottom,0px) + 10px)}}
@media (max-width:620px){.bl-langkah{grid-template-columns:1fr}.bl-langkah button{padding:8px 10px}}
.bl-form .bl-lipat>summary .bl-no{background:none;color:var(--red);box-shadow:inset 0 0 0 1.5px var(--red)}
#view-tdr label.btn{position:relative;overflow:hidden;cursor:pointer}
#view-tdr label.btn input[type=file]{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
@media (max-width:620px){.bl-tiles{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.bl-tiles .tile{padding:8px 10px}.bl-tiles .tile .v{font-size:20px}.bl-tiles .tile .k{font-size:10px;line-height:1.2}}
/* v2.53: tempahan baru masuk (popup paksa) & jalur aktifkan bunyi */
.nt-baru{border-top-color:var(--red)}
.nt-masuk{border:2px solid var(--red);border-radius:8px;padding:8px 10px;margin-top:10px;background:var(--surface)}
.nt-masuk .nt-row{padding:6px 0}
.nt-aktif{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(env(safe-area-inset-bottom,0px) + 72px);z-index:90;background:var(--red);color:#fff;border:0;border-radius:24px;padding:10px 16px;font-weight:600;font-size:14px;box-shadow:0 8px 24px rgba(0,0,0,.3);max-width:calc(100% - 24px);cursor:pointer}
@media (min-width:1024px){.nt-aktif{bottom:24px}}

/* v2.54 Blaster: status media, variasi automatik & senarai semak "Sedia untuk hantar" */
.bl-pusing{display:inline-block;width:12px;height:12px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:bl-putar .8s linear infinite;flex:none}
@keyframes bl-putar{to{transform:rotate(360deg)}}
.bl-lencana{display:flex;flex-wrap:wrap;align-items:center;gap:2px 5px;font-size:12px;line-height:1.35}
.bl-lencana>span{overflow-wrap:anywhere}
.bl-lencana.proses{color:var(--info,#3b82f6)}
.bl-lencana.siap{color:var(--ok)}
.bl-lencana.gagal{color:var(--red)}
.bl-lencana .btn{margin-left:auto}
.bl-m-kerja{align-content:center;min-height:120px;border-style:dashed}
.bl-mini{height:4px;border-radius:2px;background:var(--line);overflow:hidden}
.bl-mini i{display:block;height:100%;background:var(--info,#3b82f6);transition:width .3s}
.bl-ayat-act{margin:0}
.bl-sedia{margin-top:12px;border:1px solid var(--line);border-radius:10px;background:var(--bg)}
.bl-sedia>summary{display:flex;align-items:center;gap:10px;padding:10px 12px;cursor:pointer;list-style:none}
.bl-sedia>summary::-webkit-details-marker{display:none}
.bl-sedia-ikon{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--warn,#d97706);color:#fff;font-weight:700;flex:none}
.bl-sedia.sedia{border-color:var(--ok)}
.bl-sedia.sedia .bl-sedia-ikon{background:var(--ok)}
.bl-sedia.sedia .bl-sedia-bar i{background:var(--ok)}
.bl-sedia.proses .bl-sedia-ikon{background:var(--info,#3b82f6)}
.bl-sedia-bar{margin:0 12px 6px}
.bl-sedia-bantu{margin:0 12px 6px}
.bl-sedia-l{list-style:none;margin:0;padding:0 10px 10px;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:6px}
.bl-sedia-i{display:flex;align-items:center;gap:8px;width:100%;text-align:left;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);cursor:pointer;font:inherit;min-height:44px}
.bl-sedia-i .bl-sum .sm{white-space:normal}
.bl-sedia-ik{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;font-size:12px;font-weight:700;flex:none;background:var(--line);color:var(--ink)}
.bl-sedia-i.ok .bl-sedia-ik{background:var(--ok);color:#fff}
.bl-sedia-i.wajib{border-color:var(--red)}
.bl-sedia-i.wajib .bl-sedia-ik{background:var(--red);color:#fff}
.bl-sedia-i.saran .bl-sedia-ik{background:var(--warn,#d97706);color:#fff}
.bl-sedia-i.proses .bl-sedia-ik{background:var(--info,#3b82f6);color:#fff}
.bl-sedia-i.pilihan{opacity:.75}
.bl-langkah button.kurang::after{content:"";position:absolute;top:8px;right:8px;width:9px;height:9px;border-radius:50%;background:var(--red)}
.bl-kilat{animation:bl-kilat 1.8s ease}
@keyframes bl-kilat{0%,55%{box-shadow:0 0 0 3px var(--red)}100%{box-shadow:0 0 0 0 transparent}}
@media (prefers-reduced-motion:reduce){.bl-pusing{animation-duration:2.4s}.bl-kilat{animation:none;outline:3px solid var(--red)}}
@media (max-width:620px){.bl-sedia-l{grid-template-columns:1fr}}
/* v2.54.1: beza jelas — BOLEH DITEKAN (anak panah merah, sorotan) · MAKLUMAT (rata) · KOSONG (pudar, garis putus-putus) */
.boleh{cursor:pointer}
.boleh:focus-visible,.u-list button:focus-visible,.tile-pautan:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.tile.tile-pautan{position:relative;cursor:pointer;transition:border-color .15s,transform .12s,box-shadow .15s}
.tile.tile-pautan::before{content:"›";position:absolute;top:8px;right:12px;font-size:24px;line-height:1;font-weight:700;color:var(--red);z-index:2;pointer-events:none}
.tile.tile-pautan .k{padding-right:20px}
@media (hover:hover){.tile.tile-pautan:hover{border-color:var(--red);transform:translateY(-2px);box-shadow:0 10px 24px -12px rgba(0,0,0,.45)}}
.tile.tile-pautan:active{transform:scale(.985)}
.tile:not(.tile-pautan){cursor:default}
.tile.kosong{opacity:.5;border-style:dashed;box-shadow:none;cursor:not-allowed;transform:none!important;filter:saturate(.3)}
.tile.kosong::before{content:none}
.u-list button[data-open]{position:relative;padding-right:30px}
.u-list button[data-open]::after{content:"›";position:absolute;right:10px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:22px;line-height:1;pointer-events:none}
.u-list button[data-open]:hover::after{color:var(--red)}
.btn:disabled,button:disabled{opacity:.45;cursor:not-allowed;filter:saturate(.4)}
.mini.boleh{position:relative;padding:8px 26px 8px 8px;margin-inline:-4px;border-radius:8px;transition:background-color .12s}
.mini.boleh::after{content:"›";position:absolute;right:8px;top:50%;transform:translateY(-50%);font-size:20px;line-height:1;color:var(--muted);pointer-events:none}
@media (hover:hover){.mini.boleh:hover{background:var(--bg);box-shadow:inset 0 0 0 1px var(--red)}.mini.boleh:hover::after{color:var(--red)}}
/* label status (pill) = maklumat: rata, bukan butang; butang kecil kekal ada bingkai & bayang supaya jelas boleh ditekan */
.pill,html.t3d .pill{box-shadow:none;cursor:inherit;user-select:none}
.btn.small:not(:disabled){box-shadow:0 1px 0 rgba(0,0,0,.35)}
/* v2.55: Khas Developer — disorok daripada semua peranan lain; dikumpul di hujung Tetapan */
body:not(.dev) [data-dev-sahaja],body:not(.dev) #view-set [data-dev]{display:none!important}
.dev-kumpulan{margin-top:28px;padding:16px;border:2px dashed var(--red);border-radius:14px;background:color-mix(in srgb,var(--red) 4%,transparent)}
.dev-kumpulan>.sec:last-child{margin-bottom:0}
.dev-tajuk{display:flex;gap:12px;align-items:flex-start;margin-bottom:14px}
.dev-tajuk b{font-size:17px}
.dev-lencana{flex:0 0 auto;font:700 11px var(--mono);letter-spacing:.08em;padding:4px 8px;border-radius:6px;background:var(--red);color:#fff}
/* penggunaan platform & bil */
.plat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:12px}
.plat-kad{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:8px;min-width:0}
.plat-kad.merah{border:2px solid var(--red);box-shadow:0 0 0 4px color-mix(in srgb,var(--red) 15%,transparent)}
.plat-kad.kuning{border:2px solid #d99a1e}
.plat-h{display:flex;justify-content:space-between;gap:8px;align-items:flex-start}
.plat-h b{font-size:15px}
.plat-b{display:flex;flex-direction:column;gap:4px}
.plat-bk{display:flex;justify-content:space-between;gap:10px;font-size:13px}
.plat-bk b{text-align:right;overflow-wrap:anywhere}
.plat-bar{height:8px;border-radius:4px;background:var(--line);overflow:hidden}
.plat-bar i{display:block;height:100%;background:#2e9e5b;border-radius:4px}
.plat-bar.kuning i{background:#d99a1e}.plat-bar.merah i{background:var(--red)}
.plat-nota{margin-top:auto}
.plat-aksi{margin-top:4px}
.plat-aksi .btn{text-decoration:none}
.plat-amaran{margin-bottom:12px}
.plat-amaran.merah{border-left-color:var(--red)}
nav.tabs button.plat-awas .mn-l::after{content:"!";display:inline-grid;place-items:center;width:16px;height:16px;margin-left:6px;border-radius:50%;background:var(--red);color:#fff;font-size:11px;font-weight:700}

/* v2.54.3 Blaster: senarai nombor kempen & butang Selesai */
.bl-pen{margin-top:14px;padding-top:12px;border-top:1px dashed var(--line);display:grid;gap:8px}
.bl-pen-t td{vertical-align:middle}
.bl-pen-t input{width:100%;min-width:7rem}
.bl-pen-t .bl-pen-act{white-space:nowrap;text-align:right}
.bl-pen-t .bl-pen-act .btn{margin-left:4px}
#bl-selesai{order:-1}

/* v2.55.3 Blaster: senarai simpanan & kenalan pelanggan baru boleh diedit */
.bl-dbp{display:grid;gap:8px;margin-top:6px;padding:12px;border:1px solid var(--line);border-radius:10px;background:var(--bg)}
.pb-kenalan{display:grid;gap:4px}
.pb-kenalan input{width:100%;min-width:9rem}
.pb-kenalan .wa-act{margin:0}
/* v2.55.4: komitmen bulanan — Ubah / Buang setiap baris; butang Log staf hanya untuk Developer (Log aktiviti khas Developer) */
.setrow.kos .kos-aksi{display:flex;gap:6px;justify-content:flex-end;flex-wrap:wrap}
.setrow.kos-ubah input{min-width:0}
@media (max-width:820px){.setrow.kos .kos-aksi{grid-column:1/-1;justify-content:flex-start}}
body:not(.dev) [data-log-staf]{display:none!important}
/* v2.55.5: komitmen bulanan — susun atur kemas (nama kiri, amaun kanan, butang sama saiz, borang tambah & jumlah) */
.kos-kepala{display:flex;justify-content:space-between;padding:0 2px 6px;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--line)}
.kos-kepala span:last-child{margin-right:170px}
.kos-baris{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 14px;align-items:center;padding:12px 2px;border-bottom:1px solid var(--line)}
.kos-isi{display:flex;justify-content:space-between;align-items:baseline;gap:12px;min-width:0}
.kos-nama{font-weight:600;overflow-wrap:anywhere}
.kos-amt{font-family:var(--mono);font-weight:700;white-space:nowrap}
.kos-aksi{display:flex;gap:6px;justify-content:flex-end}
.kos-aksi .btn{min-width:78px}
.kos-ubah .kos-isi{gap:8px}
.kos-ubah .kos-isi input:first-child{flex:1 1 auto;min-width:0}
.kos-ubah .kos-isi input:last-child{width:120px;flex:0 0 auto;text-align:right}
.kos-tambah{display:grid;grid-template-columns:minmax(0,1fr) 140px auto;gap:8px;margin-top:14px}
.kos-tambah input[type=number]{text-align:right}
.kos-jumlah{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:14px;padding:10px 12px;border-radius:8px;background:var(--bg);border:1px solid var(--line);font-size:14px}
.kos-jumlah b{font-family:var(--mono);font-size:17px}
.kos-kosong{padding:12px 2px}
@media (max-width:640px){
  .kos-kepala span:last-child{margin-right:2px}
  .kos-baris{grid-template-columns:minmax(0,1fr)}
  .kos-aksi .btn{min-width:72px;padding:6px 12px}
  .kos-baris{padding:10px 2px;gap:6px}
  .kos-tambah{grid-template-columns:minmax(0,1fr) 120px}
  .kos-tambah .btn{grid-column:1/-1}
}

/* v2.55.6 Kualiti lead: tiga lajur bercahaya (Tinggi / Sederhana / Rendah) */
.lq{margin-top:14px;padding-top:12px;border-top:1px solid var(--line);display:grid;gap:12px}
.lq-h{display:flex;justify-content:space-between;align-items:center;gap:10px}
.lq-t{font-size:16px}
.lq-skor{font:700 13px var(--body);padding:5px 12px;border-radius:999px;color:#fff;white-space:nowrap}
.lq-skor.tinggi{background:var(--ok);box-shadow:0 0 18px -2px var(--ok)}
.lq-skor.sederhana{background:var(--warn,#d97706);box-shadow:0 0 18px -2px var(--warn,#d97706)}
.lq-skor.rendah{background:var(--red);box-shadow:0 0 18px -2px var(--red)}
.lq-kol{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.lq-k{--w:var(--ok);position:relative;overflow:hidden;display:grid;gap:4px;padding:14px 12px;border-radius:12px;border:1px solid color-mix(in srgb,var(--w) 55%,transparent);
  background:linear-gradient(160deg,color-mix(in srgb,var(--w) 22%,var(--surface)),var(--surface) 70%);box-shadow:0 0 22px -6px var(--w),inset 0 1px 0 color-mix(in srgb,#fff 25%,transparent)}
.lq-k.sederhana{--w:var(--warn,#d97706)}
.lq-k.rendah{--w:var(--red)}
.lq-k::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,color-mix(in srgb,#fff 22%,transparent) 48%,transparent 66%);transform:translateX(-120%);animation:lq-kilau 4s ease-in-out infinite}
.lq-k.sederhana::after{animation-delay:.6s}
.lq-k.rendah::after{animation-delay:1.2s}
@keyframes lq-kilau{0%,55%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
.lq-k .k{color:var(--w);font-weight:700;letter-spacing:.04em}
.lq-k .v{font:700 30px var(--display,inherit);line-height:1}
.lq-k .lq-pct{font-weight:700}
.lq-k .bar{height:6px;margin:4px 0 0}
.lq-k .bar i{background:var(--w)}
.lq-k.kosong{opacity:.55;box-shadow:none}
.lq-pecah{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px}
.lq-p{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 10px;border-radius:8px;background:var(--bg);border-left:4px solid var(--w,var(--line));font-size:13px}
.lq-p b{font-size:16px}
.lq-p.tinggi{--w:var(--ok)}.lq-p.sederhana{--w:var(--warn,#d97706)}.lq-p.rendah{--w:var(--red)}
@media (prefers-reduced-motion:reduce){.lq-k::after{animation:none}}
@media (max-width:520px){.lq-kol{gap:6px}.lq-k{padding:10px 8px}.lq-k .v{font-size:24px}}

/* v2.56: PIN Developer */
.dp-bar{margin:0 0 16px;padding:12px 14px;border:1px solid var(--line);border-left:4px solid var(--red);border-radius:10px;background:var(--surface)}
.dp-bar[data-keadaan="buka"]{border-left-color:var(--green,#1a7f37)}
.dp-bar[data-keadaan="tiada"]{border-left-color:var(--amber,#b7791f)}
.dp-baris{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.dp-ikon{font-size:22px;line-height:1}
.dp-teks{flex:1 1 220px;min-width:0}
.dp-teks b{font-size:15px}
.dp-f{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;align-items:end;margin-top:12px}
.dp-f .rowbtns,.dp-f .msg{grid-column:1/-1}
.dp-f input{width:100%}
.dp-m{border-top-color:var(--ink)}

/* v2.56.1 laporan: butang Excel & Import nombor baru sebaris; pilihan status lead dalam popup */
.lp-act{display:grid;grid-template-columns:1fr 1fr;gap:8px;grid-column:1/-1}
.lp-act .btn{width:100%}
.lq-pilih{display:grid;gap:6px;margin:6px 0}
.lq-pilih label{display:flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--bg);font-size:14px;cursor:pointer}
.lq-pilih input{width:18px;height:18px;flex:none;padding:0}
.lq-pilih b{margin-left:auto}
.lq-pilih label:has(input:disabled){opacity:.5}
@media (max-width:520px){.lp-act{grid-template-columns:1fr}}

/* v2.56.4 laporan: penunjuk segar automatik */
.lp-segar{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;grid-column:1/-1}
.lp-segar .sm{color:var(--muted)}

/* v2.56.6: kad Tracker di atas Perlu perhatian */
#u-isi>.u-tdr{margin:16px 0}

/* v2.56.7: Kualiti lead dalam kad Tracker di Home */
.u-tdr-kad .u-lq{margin:0 16px 16px;padding-top:12px}

/* v2.56.9 Dalam Bengkel: senarai tempahan Hari ini & Esok (nama > model > plat > jam) */
#l-tmp .ltm-hari+.ltm-hari{margin-top:12px}
#l-tmp .ltm-sub{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:6px}
#l-tmp .ltm-lajur,#l-tmp .ltm-b{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1.2fr) auto 3.4em auto;gap:10px;align-items:center}
#l-tmp .ltm-lajur{padding:0 10px 4px;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
#l-tmp .ltm-lajur::after{content:""}
#l-tmp .ltm-b{grid-template-areas:none}
#l-tmp .ltm-nama{font-weight:700;min-width:0;overflow-wrap:anywhere}
#l-tmp .ltm-model{min-width:0;color:var(--muted);overflow-wrap:anywhere}
#l-tmp .ltm-masa{text-align:right}
#l-tmp .ltm-tanda{grid-column:1/-1;display:flex;gap:6px;flex-wrap:wrap;align-items:center}
#l-tmp .ltm-b .btn{grid-column:5;grid-row:1}
#l-tmp .ltm-kosong{padding:6px 10px}
@media (max-width:520px){
  #l-tmp .ltm-lajur{display:none}
  #l-tmp .ltm-b{grid-template-columns:minmax(0,1fr) auto auto;grid-template-areas:none;gap:4px 10px}
  #l-tmp .ltm-nama{grid-column:1;grid-row:1}
  #l-tmp .ltm-model{grid-column:1;grid-row:2;font-size:13px}
  #l-tmp .ltm-b .plate{grid-column:2;grid-row:1/3;align-self:center}
  #l-tmp .ltm-masa{grid-column:3;grid-row:1/3;align-self:center}
  #l-tmp .ltm-b .btn{grid-column:1/-1;grid-row:auto;justify-self:start}
  #l-tmp .ltm-tanda{grid-row:auto}
}

/* v2.56.10: sumber tempahan dalam senarai tempahan Bengkel */
.ltm-dari{display:inline-flex;gap:3px;margin-left:8px;padding:1px 7px;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.02em;vertical-align:middle;white-space:nowrap;background:color-mix(in srgb,var(--w) 14%,transparent);color:var(--w);--w:var(--muted,#6b7280)}
.ltm-dari.web{--w:#2563eb}
.ltm-dari.wa{--w:var(--ok,#16a34a)}
/* v2.56.11: label sumber di baris sendiri bawah model (sejajar), tajuk Hari ini / Esok diserlahkan */
#l-tmp .ltm-model{display:flex;flex-direction:column;align-items:flex-start;gap:4px}
#l-tmp .ltm-model .ltm-dari{margin-left:0}
#l-tmp .ltm-hari .ltm-sub{--h:var(--red);align-items:center;margin:0 0 8px;padding:9px 12px;border-radius:10px;border-left:4px solid var(--h);background:color-mix(in srgb,var(--h) 10%,transparent)}
#l-tmp .ltm-hari.esok .ltm-sub{--h:#2563eb}
#l-tmp .ltm-sub>b{font-size:16px;color:var(--h)}
#l-tmp .ltm-sub .ltm-bil{margin-left:auto;padding:2px 10px;border-radius:999px;background:var(--h);color:#fff;font-size:12px}

/* v2.56.12: Statistik website (Tetapan) */
#sw-box .filters{margin-bottom:12px}
.sw-tiles{grid-template-columns:repeat(3,minmax(0,1fr));margin-bottom:12px}
@media (max-width:640px){.sw-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
.sw-ringkas{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-bottom:14px}
.sw-ringkas>div{display:flex;flex-direction:column;gap:2px;padding:8px 10px;border-radius:8px;background:var(--bg);border:1px solid var(--line);font-size:12px;color:var(--muted)}
.sw-ringkas b{font:700 18px var(--mono);color:var(--ink)}
.sw-grid{gap:12px}
.sw-grid h3{margin:0 0 10px;font-size:14px}
.sw-carta{display:flex;align-items:flex-end;gap:2px;height:110px;padding-bottom:1px;border-bottom:1px solid var(--line)}
.sw-bar{flex:1 1 0;min-width:0;height:100%;display:flex;align-items:flex-end;cursor:default}
.sw-bar i{display:block;width:100%;background:#2563eb;border-radius:4px 4px 0 0}
.sw-bar:hover i{background:#1d4ed8}
.sw-paksi{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);margin-top:4px}
.sw-kosong{padding:10px 0}
.sw-servis{margin:0;padding-left:20px;display:grid;gap:6px}
.sw-servis li{padding-left:2px}
.sw-servis li span{display:inline-block;max-width:calc(100% - 3em)}
.sw-servis li b{float:right;font-family:var(--mono)}
.sw-sihat{display:grid;gap:8px;font-size:13px}
.sw-sihat>div{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.sw-sihat>div>span:first-child{color:var(--muted)}
.sw-gagal{justify-content:flex-start!important;color:var(--red)}

/* v2.57.0 Blaster: mesej suara, sejarah kempen; Home: akaun bersambung */
.bl-suara{margin:6px 0}
.bl-suara-k{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:var(--bg)}
.bl-suara-k audio{flex:1 1 220px;min-width:0;height:36px}
.bl-suara-rakam{display:flex;align-items:center;gap:8px;color:#b91c1c;font-weight:700}
.bl-suara-rakam::before{content:"";width:10px;height:10px;border-radius:50%;background:#dc2626;animation:bl-kelip 1s infinite}
@keyframes bl-kelip{50%{opacity:.25}}
#bl-suara-rakam.rakam{background:#dc2626;color:#fff;border-color:#dc2626}
.bl-sej{display:grid;gap:8px;margin:6px 0}
.bl-sej-k{border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:var(--bg)}
.bl-sej-k.kini{border-color:var(--accent,#c81e1e);box-shadow:0 0 0 1px var(--accent,#c81e1e) inset}
.bl-sej-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.bl-sej-h b{min-width:0;overflow-wrap:anywhere}
.bl-sej-h .sm{margin-left:auto}
.bl-sej-n{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin:8px 0}
.bl-sej-n span{display:flex;flex-direction:column;font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.03em}
.bl-sej-n b{font-size:16px;color:var(--ink,inherit);text-transform:none;letter-spacing:0}
.bl-sej-a{display:flex;gap:6px;flex-wrap:wrap}
.bl-sej-n small{font-size:11px;color:var(--muted);margin-left:3px}
@media (max-width:520px){.bl-sej-n{grid-template-columns:repeat(3,minmax(0,1fr))}}
.bl-kn{display:grid;gap:6px;margin:8px 0}
.bl-kn label{display:grid;grid-template-columns:auto 1fr auto;gap:4px 10px;align-items:center;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--bg);font-size:14px;cursor:pointer}
.bl-kn input{width:18px;height:18px;padding:0}
.bl-kn small{grid-column:2/-1;color:var(--muted);font-size:12px}
.u-tdr-ak{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;padding:12px 16px 4px}
.u-tdr-a{display:grid;grid-template-columns:auto 1fr;gap:0 8px;align-items:center;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:var(--bg);min-width:0}
.u-tdr-a i{width:9px;height:9px;border-radius:50%;background:#16a34a;box-shadow:0 0 0 3px rgba(22,163,74,.18);grid-row:1/3}
.u-tdr-a.putus i{background:#9ca3af;box-shadow:none}
.u-tdr-a b{font-size:13px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.u-tdr-a small{font-size:11px;color:var(--muted);min-width:0;line-height:1.35}
.u-tdr-ak + .u-tdr-tiles{padding-top:8px}

/* v2.57.2: imbas job card & Inspection ikut prompt pemilik */
.ai-luar{margin:4px 0 0;padding-left:18px;display:grid;gap:4px;font-size:13px}
.ai-luar li.merah{color:var(--red)}
.ai-luar li.sangsi{color:var(--muted)}
.pmk-bukti{margin:4px 0 2px;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.pmk-lap{margin-top:10px;border:1px solid var(--line);border-radius:10px;padding:8px 12px;background:var(--bg)}
.pmk-lap>summary{cursor:pointer;font-weight:700;font-size:14px}
.pmk-lap-b{margin-top:10px;font-size:13px}
.pmk-lap-t{font-weight:700;font-size:12px;letter-spacing:.03em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.pmk-lap-l{margin:0;padding-left:18px;display:grid;gap:6px}

/* v2.57.3 import kenalan WhatsApp: jumlah & pilihan nama */
.bl-kn-jum{display:flex;align-items:baseline;gap:6px;padding:8px 10px;border-radius:8px;background:var(--bg);border:1px dashed var(--line);margin:4px 0 8px}
.bl-kn-jum b{font-size:22px}
.bl-kn-nama label{grid-template-columns:auto auto 1fr}
.bl-kn-nama .sm{justify-self:end;text-align:right;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#blPopRoot .bl-pop .rowbtns{flex-wrap:wrap}

/* v2.57.4: pelawat website (Google Analytics) dalam Statistik website */
.sw-ga-t{margin:6px 0 10px;display:flex;align-items:baseline;gap:6px}
.sw-ga-t~.sw-ga-t{margin-top:18px}
.sw-ga-setup ol{margin:8px 0;padding-left:20px;display:grid;gap:6px}
.sw-ga-setup code{font-size:12px}

/* v2.57.5 Kenalan disimpan: senarai satu kolum */
.kns-akaun{flex-wrap:wrap}
.kns-kad .card-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap}
.kns-l{list-style:none;margin:0;padding:0 16px 8px;counter-reset:kns}
.kns-l li{display:flex;flex-direction:column;gap:2px;padding:10px 0 10px 34px;border-bottom:1px solid var(--line);position:relative;counter-increment:kns;min-width:0}
.kns-l li:last-child{border-bottom:0}
.kns-l li::before{content:counter(kns);position:absolute;left:0;top:11px;width:26px;text-align:right;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.kns-l b{font-size:15px;overflow-wrap:anywhere}
.kns-l .sm{color:var(--muted)}
#view-kns .filters input[type=search]{flex:1 1 200px}

/* v2.57.6: kad Website hari ini di Home pemilik */
#u-isi>.u-web{margin:16px 0}
.u-web-kad .card-h{display:flex;align-items:center;justify-content:space-between;gap:10px}
.u-web-tiles{padding:0 16px 16px;margin:0}

/* v2.57.7: susun atur kemas butang kecil (telefon) — butang pilihan sama lebar dalam grid, baris tarikh / bulan / carian penuh */
@media (max-width:640px){
  .seg{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:6px}
  .seg:has(>:nth-child(5)){grid-auto-flow:row;grid-template-columns:repeat(3,minmax(0,1fr))}
  .seg button{display:flex;align-items:center;justify-content:center;text-align:center;min-height:36px;padding:6px 8px;line-height:1.2;white-space:normal}
  .filters>.seg{flex:1 1 100%}
  .filters>label.sm{flex:1 1 100%;white-space:nowrap;display:grid!important;grid-template-columns:minmax(3.6em,auto) minmax(0,1fr)}
  .filters>label.sm input{flex:1 1 auto;min-width:0;width:100%}
  .filters>input[type=month],.filters>input[type=date]{flex:1 1 140px;min-width:0}
  .filters>select,.filters>input[type=search],.filters>input[type=text]{flex:1 1 100%;width:100%}
  .filters>.btn{flex:1 1 100%;margin-left:0!important;justify-content:center}
  label.sm[style*="display:flex"]{white-space:nowrap}
  .rowbtns>input[type=search]{flex:1 1 100%;width:100%}
}

/* v2.57.8: tiada zoom ketuk dua kali; tetingkap pengesahan butang penting */
html,body{touch-action:manipulation}
.sahkan-m{border-top-color:var(--ink)}
.sahkan-m.bahaya{border-top-color:var(--red)}
.sahkan-p{margin:0 0 16px;line-height:1.5}
.sahkan-b{justify-content:flex-end}
.sahkan-b .btn{min-width:110px;justify-content:center}
@media (max-width:640px){.sahkan-b{display:grid;grid-template-columns:1fr 1fr}.sahkan-b .btn{min-width:0}}

/* v2.58.0 Blaster: butang tindakan tersusun (grid sama lebar, satu baris penuh di telefon) */
#view-tdr .bl-langkah-isi .bl-isi > .wa-act,#view-tdr .bl-kawal,#view-tdr .bl-db-pilih{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;align-items:stretch}
#view-tdr .bl-langkah-isi .bl-isi > .wa-act > .btn,#view-tdr .bl-kawal > .btn,#view-tdr .bl-db-pilih > .btn{width:100%;margin:0;justify-content:center;text-align:center;min-height:42px}
#view-tdr .bl-langkah-isi .bl-isi > .wa-act > .msg,#view-tdr .bl-kawal > .msg{grid-column:1/-1}
#view-tdr .bl-kawal > [hidden]{display:none}
#view-tdr .bl-db-pilih > .fl{grid-column:1/-1}
#view-tdr .bl-langkah-isi .bl-isi > .wa-act > .btn.danger{grid-column:1/-1}
@media (max-width:520px){
  #view-tdr .bl-langkah-isi .bl-isi > .wa-act,#view-tdr .bl-kawal,#view-tdr .bl-db-pilih{grid-template-columns:1fr 1fr}
  #view-tdr .bl-langkah-isi .bl-isi > .wa-act > .btn.primary:first-child,#view-tdr .bl-kawal > .btn.primary:first-child{grid-column:1/-1}
}

/* v2.58.1: amaran pendua dalam tetingkap pengesahan */
.sahkan-amaran{display:block;margin-top:10px;padding:8px 10px;border-radius:8px;background:color-mix(in srgb,var(--red) 12%,transparent);color:var(--red);font-weight:600;font-size:13px}
.bl-ai-nota{margin-top:6px;font-size:12px;line-height:1.5}
.bl-ai-nota ul{margin:2px 0 0;padding-left:18px}

/* v2.58.2: Blaster langkah demi langkah */
.bl-seterus{display:flex;align-items:center;justify-content:flex-end;gap:10px;padding:12px 16px;border-top:1px solid var(--line);background:var(--bg)}
.bl-seterus .sm{margin-right:auto;color:var(--muted)}
.bl-form .bl-lipat{scroll-margin-top:72px}
@media (max-width:620px){
  .bl-langkah{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .bl-langkah button{flex-direction:column;align-items:center;text-align:center;gap:4px;padding:8px 4px}
  .bl-langkah button .bl-sum .sm{display:none}
  .bl-langkah .bl-sum b{font-size:12.5px;line-height:1.25}
  .bl-seterus .btn{flex:1}
}

/* v2.58.3: kad jualan vs target — susun atur grid & graf latar (jualan terkumpul vs laju target) */
.tg-kad{position:relative;overflow:hidden;padding:18px}
.tg-kad>:not(.tg-graf){position:relative;z-index:1}
.tg-kad .row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);align-items:start;gap:16px 24px}
.tg-kad .big{font-size:40px;line-height:1.05;margin:4px 0 2px}
.tg-kad .facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 16px}
.tg-kad .facts .v{font-size:clamp(18px,4.6vw,24px);line-height:1.15;margin-top:2px;overflow-wrap:anywhere}
.tg-kad .facts .sm{margin-top:2px}
.tg-graf{position:absolute;left:0;right:0;bottom:0;height:52%;pointer-events:none;z-index:0}
.tg-graf svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.tg-graf .tg-garis{fill:none;stroke:var(--red);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.tg-graf .tg-laju{fill:none;stroke:var(--muted);stroke-width:1.5;stroke-dasharray:5 5;opacity:.45}
.tg-titik{position:absolute;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:var(--red);box-shadow:0 0 0 2px var(--surface)}
.tg-kad .bar{overflow:visible}
.tg-penanda{position:absolute;top:-4px;bottom:-4px;width:2px;margin-left:-1px;background:var(--ink);border-radius:1px;opacity:.8}
.tg-petunjuk{display:flex;gap:16px;flex-wrap:wrap;margin-top:8px;color:var(--muted)}
.tg-petunjuk span{display:inline-flex;align-items:center;gap:6px}
.tg-p-jual::before{content:"";width:14px;height:2px;border-radius:1px;background:var(--red)}
.tg-p-laju::before{content:"";width:14px;height:0;border-top:2px dashed var(--muted)}
@media (max-width:720px){
  .tg-kad .row{grid-template-columns:1fr}
  .tg-kad .big{font-size:36px}
  .tg-kad .facts{gap:10px 12px}
  .tg-kad .facts .k{font-size:11px;letter-spacing:.04em;line-height:1.3}
  .tg-kad .facts .sm{font-size:12px}
  .tg-graf{height:44%}
}

/* ---------- v2.62.0: AI Center ---------- */
.ac-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between;margin:0 0 14px}
.ac-status{display:flex;flex-wrap:wrap;gap:6px}
.ac-nota{margin:6px 0 14px;flex-basis:100%}
/* v2.65.3: bar status & pautan kemas di telefon — satu status satu baris, butang Hentikan penuh lebar, pautan 2 × 2 */
@media (max-width:640px){
  .ac-bar{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;padding:10px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
  .ac-status{display:grid;grid-template-columns:minmax(0,1fr);gap:6px}
  .ac-status .pill{display:flex;align-items:center;width:100%;min-height:32px;padding:6px 12px;border-radius:8px;font-size:13px;white-space:normal;text-align:left}
  .ac-bar>.btn{width:100%;justify-content:center;min-height:40px}
  .ac-bar>.ac-nota{margin:2px 0 0}
  .ac-v .ac-pautan{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ac-pautan .btn{min-height:44px}
}
.ac-keadaan{display:flex;flex-direction:column;gap:2px;padding:14px 16px;border-radius:10px;border:1px dashed var(--line);margin:0 0 14px;background:var(--surface)}
.ac-keadaan b{font-size:14px}.ac-keadaan span{font-size:13px;color:var(--muted)}
.ac-k-belum{border-color:var(--warn)}.ac-k-belum b{color:var(--warn)}
.ac-k-tiada b{color:var(--muted)}
.ac-k-kosong b{color:var(--muted)}
.ac-k-ralat{border-color:var(--red);border-style:solid}.ac-k-ralat b{color:var(--red)}
/* v2.64.2: maksimum 4 kolum seragam (komputer), 2 kolum di telefon; tajuk kumpulan, nombor sejajar, nota di dasar kad */
.ac-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(max(150px,calc((100% - 36px) / 4)),1fr));gap:12px;margin-bottom:16px}
.ac-kad{display:flex;flex-direction:column;gap:4px;min-height:104px;background:var(--surface);border:1px solid var(--line);border-left:4px solid #9ca3af;border-radius:10px;padding:12px 14px;min-width:0}
.ac-kad .k{font-size:11.5px;font-weight:600;line-height:1.35;letter-spacing:.05em;color:var(--muted);overflow-wrap:anywhere}
.ac-kad .v{font-weight:700;font-size:26px;line-height:1.15;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ac-kad .v small{font-size:15px;font-weight:600;color:var(--muted)}
.ac-kad>.sm{margin-top:auto;font-size:12px;line-height:1.35;color:var(--muted)}
.ac-sek{margin:0 0 6px}
.ac-sek-h{display:flex;align-items:center;gap:10px;margin:4px 0 10px;font-size:15px;font-weight:700;color:var(--ink)}.ac-sek-h::after{content:"";flex:1;height:1px;background:var(--line)}
.ac-tidur{margin:0 16px 14px;color:var(--muted);line-height:1.5}
@media (max-width:640px){
  .ac-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .ac-kad{min-height:92px;padding:10px 12px}
  .ac-kad .k{font-size:11px;letter-spacing:.03em}
  .ac-kad .v{font-size:22px}
  .ac-akaun-l{grid-template-columns:minmax(0,1fr)}
}
.ac-kad.amaran{border-left-color:var(--warn)}.ac-kad.bahaya{border-left-color:var(--red)}.ac-kad.pudar{opacity:.75;border-style:dashed}
.ac-kad .ac-k{display:block;font-size:14px;line-height:1.3;white-space:normal;color:var(--warn)}
.ac-blok{margin-bottom:16px}
.ac-blok>.ac-p,.ac-blok>p,.ac-blok>table,.ac-blok>.empty{margin:12px 16px}
/* v2.81.4: jadual AI Center muat dalam kad (lebar ditolak margin) — dahulu terkeluar 32px di telefon */
.ac-blok>table.list{width:calc(100% - 32px)}
@media (max-width:720px){
  .ac-blok>table.list.kad{width:calc(100% - 32px);margin:12px 16px}
  .ac-v table.list.kad td:first-child{padding-left:0;text-align:left;font-weight:700;font-size:15px}
  .ac-v table.list.kad td:first-child::before{display:none}
  .ac-v table.list.kad td select,.ac-v table.list.kad td input:not([type=checkbox]){width:100%;max-width:100%}
}
.ac-p{line-height:1.55}.ac-ol{padding-left:20px}
.ac-akaun-l{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px;padding:12px 16px}
.ac-akaun{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:8px 10px;border:1px solid var(--line);border-radius:8px}
.ac-akaun b{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ac-mod-OFF{background:var(--line);color:var(--muted)}.ac-mod-DRAFT{background:var(--info-soft);color:var(--info)}.ac-mod-AUTO{background:var(--red-soft);color:var(--red)}
.ac-pautan{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:4px 0 8px}
.ac-pautan .btn{width:100%;min-width:0;justify-content:center;text-align:center;white-space:normal;line-height:1.25}
.ac-inbox{display:grid;grid-template-columns:minmax(240px,320px) minmax(0,1fr);gap:12px;align-items:start}
.ac-senarai{max-height:72vh;overflow:auto}
.ac-pl{list-style:none;margin:0;padding:0}
.ac-pl button{display:flex;flex-direction:column;gap:3px;width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--line);padding:10px 12px;cursor:pointer;color:var(--ink);font:inherit}
.ac-pl button[aria-current="true"]{background:var(--info-soft)}
.ac-pl-a{display:flex;justify-content:space-between;gap:8px}
.ac-pl-m{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ac-lencana{font-style:normal;background:var(--red);color:#fff;border-radius:999px;padding:0 7px;font-size:12px;font-weight:700}
.ac-chat-h{flex-wrap:wrap;align-items:flex-start}
.ac-chat-h .rowbtns select{width:auto}
.ac-ambil{color:var(--info)}
.ac-chat-b{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;padding:12px 16px}
@media (min-width:1400px){.ac-chat-b{grid-template-columns:minmax(0,1fr) minmax(200px,260px)}}
@media (max-width:1199px){.ac-inbox{grid-template-columns:minmax(0,1fr)}.ac-senarai{max-height:40vh}}
.ac-mesej{display:flex;flex-direction:column;gap:8px;max-height:52vh;overflow:auto}
.ac-m{max-width:82%;padding:8px 10px;border-radius:10px;border:1px solid var(--line);background:var(--surface)}
.ac-m-masuk{align-self:flex-start}
.ac-m-keluar{align-self:flex-end;background:var(--ok-soft)}
.ac-m-keluar.ac-p-ai{background:var(--info-soft)}
.ac-m-nota{align-self:center;background:var(--warn-soft);max-width:92%}
.ac-m-h{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:4px}
.ac-m-t{white-space:pre-wrap;overflow-wrap:anywhere}
.ac-sisi h4{margin:0 0 6px;font-size:13px}
.ac-pd{margin:6px 0}.ac-pd ul{margin:4px 0;padding-left:18px}
.ac-link{background:none;border:0;padding:0;color:var(--info);text-decoration:underline;cursor:pointer;font:inherit}
.ac-draf-l{display:grid;gap:8px;padding:0 16px}
.ac-draf{border:1px solid var(--line);border-left:4px solid var(--info);border-radius:8px;padding:10px;display:grid;gap:6px}
.ac-draf.perlu{border-left-color:var(--red)}
.ac-draf textarea,.ac-tulis textarea{width:100%;font:inherit}
.ac-amaran{background:var(--warn-soft);border-radius:8px;padding:8px 10px;font-size:13px}
.ac-amaran ul{margin:4px 0 0;padding-left:18px}
.ac-ralat{color:var(--red)}
.ac-tulis{display:grid;gap:8px;padding:12px 16px 16px}
.ac-tulis input{flex:1;min-width:160px}
.ac-akaun-g{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px}
.ac-ak-b,.ac-borang{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:12px 16px}
.ac-penuh{grid-column:1/-1}
.ac-jam{display:flex;gap:6px;align-items:center}.ac-jam input{width:80px}
/* v2.65.2: pilihan dalam div grid (bukan fieldset grid — WebKit/Safari) + label grid 2 kolum: kotak 18 px | teks */
.ac-penuh fieldset,fieldset.ac-penuh{display:block;border:1px solid var(--line);border-radius:8px;padding:6px 12px 12px;margin:0;min-width:0}
fieldset.ac-penuh>legend{padding:0 6px;font-size:13px;font-weight:600}
.ac-pilihan{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px 16px;margin-top:4px}
.ac-v label.ac-cek{display:grid!important;grid-template-columns:18px minmax(0,1fr);column-gap:10px;align-items:start;justify-items:start;width:100%;margin:0;font-size:13px;line-height:1.4;text-align:left;cursor:pointer}
.ac-v label.ac-cek>span{min-width:0;overflow-wrap:anywhere;text-align:left}
.ac-v input[type=checkbox]{-webkit-appearance:checkbox;appearance:auto;display:block;flex:0 0 18px;width:18px;height:18px;min-width:18px;max-width:18px;min-height:18px;margin:1px 0 0;padding:0;accent-color:var(--red)}
@media (max-width:420px){.ac-pilihan{grid-template-columns:minmax(0,1fr)}}
.ac-hasil{display:grid;gap:10px;padding:0 16px 16px}
.ac-var{border:1px solid var(--line);border-radius:8px;padding:10px 12px}
.ac-var pre,.ac-pr pre{white-space:pre-wrap;overflow-wrap:anywhere;font:inherit;margin:6px 0}
.ac-kb{border-top:1px solid var(--line);padding:10px 16px;display:grid;gap:6px}
.ac-suis-l{display:grid;gap:10px;padding:12px 16px}
.ac-v label.ac-suis{display:grid!important;grid-template-columns:18px minmax(0,1fr);column-gap:10px;align-items:start;text-align:left}
.ac-v .ac-suis input{margin-top:2px}
.ac-suis>span{display:flex;flex-direction:column;gap:2px}
.ac-pr{border-top:1px solid var(--line);padding:10px 16px}
.ac-pr-v{padding:6px 0;border-bottom:1px dashed var(--line)}
@media (max-width:1023px){
  .ac-inbox,.ac-chat-b{grid-template-columns:minmax(0,1fr)}
  .ac-senarai{max-height:40vh}
  .ac-ak-b,.ac-borang{grid-template-columns:minmax(0,1fr)}
  .ac-akaun-g{grid-template-columns:minmax(0,1fr)}
  .ac-m{max-width:94%}
}
/* v2.76.0: lampiran WhatsApp dalam Inbox */
.ac-lampiran{margin-top:6px}
.ac-lampiran img{display:block;max-width:min(100%,260px);max-height:320px;border-radius:8px;border:1px solid var(--line);object-fit:cover}
.ac-lampiran video{display:block;max-width:min(100%,260px);max-height:360px;border-radius:8px;background:#000}
.ac-lampiran audio{width:min(100%,280px)}
/* v2.74.0: baris gilir semakan imbasan */
.ac-bendera{margin:0;padding-left:16px;font-size:12.5px;color:var(--warn)}
/* v2.73.0: media AI Content Studio (latar poster & klip video fal.ai) */
.ac-media{margin:8px 0}
.ac-media img{display:block;width:min(100%,360px);aspect-ratio:1/1;object-fit:cover;border-radius:10px;border:1px solid var(--line)}
.ac-media-v video{display:block;width:min(100%,260px);aspect-ratio:9/16;border-radius:10px;background:#000}
.ac-media-r td{padding-top:0;border-top:0}
.ac-media-r:has(.ac-media[hidden]){display:none}
/* v2.69.0: Tanya AI — tekan & tahan 3 saat pada ikon maskot; panel chat (bottom sheet di telefon, panel sisi di komputer) */
.ait-cincin{position:fixed;z-index:57;pointer-events:none;display:grid;place-items:center}
.ait-cincin[hidden]{display:none}
.ait-cincin svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.ait-cincin circle{fill:none;stroke-width:5}
.ait-cl{stroke:rgba(127,127,127,.35)}
.ait-cj{stroke:var(--red);stroke-linecap:round;stroke-dasharray:182.2;stroke-dashoffset:182.2}
.ait-cincin.jalan .ait-cj{transition:stroke-dashoffset 2.75s linear;stroke-dashoffset:0}
.ait-cincin-t{position:absolute;bottom:calc(100% + 6px);white-space:nowrap;background:var(--ink);color:var(--surface);font-size:12px;font-weight:700;padding:4px 10px;border-radius:999px;opacity:0;transition:opacity .3s .4s}
.ait-cincin.jalan .ait-cincin-t{opacity:1}
.ait-latar{position:fixed;inset:0;z-index:58;background:rgba(0,0,0,.55)}
.ait-latar[hidden],.ait-panel[hidden]{display:none}
.ait-panel{position:fixed;z-index:60;right:max(16px,env(safe-area-inset-right,0px));bottom:calc(env(safe-area-inset-bottom,0px) + 16px);width:min(440px,calc(100vw - 32px));height:min(680px,calc(100dvh - 32px));display:grid;grid-template-rows:auto minmax(0,1fr) auto;background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:0 18px 48px rgba(0,0,0,.45);overflow:hidden;animation:mt-pudar .2s}
.ait-h{display:grid;grid-template-columns:auto minmax(0,1fr);grid-auto-flow:column;grid-auto-columns:auto;gap:10px;align-items:center;padding:12px 14px;border-bottom:1px solid var(--line)}
.ait-ikon{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--red);color:#fff;font-size:13px;font-weight:800;letter-spacing:.02em}
.ait-sumber{display:grid;gap:4px;margin-top:8px;padding-top:8px;border-top:1px dashed var(--line);font-size:12px}
.ait-sumber>span{font-weight:700;color:var(--muted);letter-spacing:.05em}
.ait-sumber a{color:var(--info);overflow-wrap:anywhere;text-decoration:underline}
.ait-tajuk{display:grid;min-width:0}.ait-tajuk b{font-size:16px}.ait-tajuk span{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ait-x{width:34px;height:34px;border-radius:10px;border:1px solid var(--line);background:none;color:var(--ink);font-size:16px;cursor:pointer}
.ait-senarai{overflow:auto;padding:14px;display:flex;flex-direction:column;gap:10px;overscroll-behavior:contain}
.ait-senarai>.ac-keadaan{margin:0}
.ait-kosong{color:var(--muted);text-align:center;padding:24px 0}
.ait-alu p{margin:0 0 8px;line-height:1.5}.ait-alu .sm{color:var(--muted)}
.ait-contoh{display:grid;gap:8px;margin-top:10px}
.ait-chip{text-align:left;border:1px solid var(--line);background:var(--bg);color:var(--ink);border-radius:10px;padding:9px 12px;font:inherit;font-size:13px;line-height:1.35;cursor:pointer}
.ait-m{max-width:88%;padding:9px 12px;border-radius:14px;line-height:1.5;font-size:14px}
.ait-m-saya{align-self:flex-end;background:var(--ok-soft);border-bottom-right-radius:4px}
.ait-m-ai{align-self:flex-start;background:var(--bg);border:1px solid var(--line);border-bottom-left-radius:4px}
.ait-ralat{border-color:var(--red);background:var(--red-soft)}
.ait-siapa{display:block;font-size:11px;font-weight:700;letter-spacing:.05em;color:var(--muted);margin-bottom:2px}
.ait-t{white-space:pre-wrap;overflow-wrap:anywhere}
.ait-titik{display:flex;gap:4px;padding:6px 0}
.ait-titik i{width:7px;height:7px;border-radius:50%;background:var(--muted);animation:ait-lompat 1s infinite}
.ait-titik i:nth-child(2){animation-delay:.15s}.ait-titik i:nth-child(3){animation-delay:.3s}
@keyframes ait-lompat{0%,60%,100%{opacity:.35;transform:none}30%{opacity:1;transform:translateY(-3px)}}
.ait-borang{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:end;padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line)}
.ait-borang textarea{width:100%;min-height:44px;max-height:140px;resize:none;font:inherit;font-size:16px;line-height:1.4;padding:10px 12px;border-radius:12px}
.ait-borang .btn{min-height:44px}
@media (max-width:640px){
  .ait-panel{left:8px;right:8px;width:auto;bottom:8px;height:min(680px,calc(100dvh - 16px));border-radius:16px}
  .ait-h .btn{padding-left:10px;padding-right:10px}
}

/* pengesahan berbilang baris (contoh: penerima, akaun, plat & kandungan sebelum Lulus & hantar) */
.sahkan-p{white-space:pre-line}

/* v2.58.4: kad jualan vs target — graf dalam barisnya sendiri di bawah bar kemajuan (tidak lagi bertindih dengan teks / keluar kad) */
.tg-kad{display:flex;flex-direction:column}
.tg-kad>.row{order:0}
.tg-kad>.bar{order:1;margin-top:14px}
.tg-kad>.tg-graf{order:2;position:relative;left:auto;right:auto;bottom:auto;height:84px;margin-top:12px;border-radius:8px;background:linear-gradient(to top,rgba(127,127,127,.06),transparent);z-index:0;overflow:visible}
.tg-kad>.tg-petunjuk{order:3}
@media (max-width:720px){.tg-kad>.tg-graf{height:72px}}

/* v2.58.4 Blaster: seksyen Gambar & Video, editor media (main, potong masa, crop) */
.bl-mk{border:1px solid var(--line);border-radius:12px;padding:12px;margin:10px 0;background:var(--bg)}
.bl-mk-h{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.bl-mk-h b{font-size:15px}
.bl-mk .bl-media{margin:8px 0}
.bl-m video{width:100%;max-height:260px;background:#000;border-radius:8px;display:block}
.bl-m-act{display:grid;grid-template-columns:repeat(auto-fit,minmax(88px,1fr));gap:6px;margin-top:6px}
.bl-m-act .btn{width:100%;justify-content:center;margin:0}
.bl-m-act .btn.danger{grid-column:1/-1}
.bls{max-width:560px;width:calc(100% - 24px);max-height:calc(100vh - 24px);overflow:auto}
.bls-pentas{display:flex;justify-content:center;background:#000;border-radius:10px;padding:6px;margin:6px 0 10px}
.bls-bingkai{position:relative;display:inline-block;line-height:0;overflow:hidden;max-width:100%}
.bls-bingkai img,.bls-bingkai video{display:block;max-width:100%;max-height:44vh}
.bls-crop{position:absolute;border:2px solid #fff;box-shadow:0 0 0 9999px rgba(0,0,0,.55);border-radius:2px;pointer-events:none;transition:all .08s}
.bls-main{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.bls-baris{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px 12px;margin:6px 0}
.bls-baris label{display:grid;grid-template-columns:1fr auto;gap:2px 8px;font-size:13px;align-items:center}
.bls-baris label input{grid-column:1/-1;width:100%;padding:0}
.bls-set{grid-template-columns:1fr 1fr}
.bls-set .btn{width:100%;justify-content:center}
.bls-nisbah{flex-wrap:wrap}
.bls .rowbtns{flex-wrap:wrap;margin-top:12px}

/* ===== v2.59.0 Meeting room: butang terapung, panel chat, lencana & amaran ===== */
.mt-fab{position:fixed;right:max(16px,env(safe-area-inset-right,0px));bottom:calc(env(safe-area-inset-bottom,0px) + 20px);z-index:35;width:56px;height:56px;border-radius:50%;border:0;background:var(--ink);color:var(--surface);
  display:grid;place-items:center;cursor:pointer;box-shadow:0 8px 24px rgba(0,0,0,.28);transition:transform .15s}
.mt-fab:hover{transform:scale(1.05)}
.mt-fab:focus-visible{outline:3px solid var(--info);outline-offset:3px}
.mt-fab-i{font-size:24px;line-height:1}
.mt-fab.ada{background:var(--red);color:#fff;animation:mt-denyut 2s infinite}
.mt-fab.mt-baru{animation:mt-goyang .6s 3,mt-denyut 2s infinite}
.mt-fab-n{position:absolute;top:-4px;right:-4px;min-width:22px;height:22px;padding:0 6px;border-radius:11px;background:#fff;color:var(--red);border:2px solid var(--red);font:700 12px/18px var(--body);text-align:center}
@keyframes mt-denyut{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--red) 55%,transparent),0 8px 24px rgba(0,0,0,.28)}70%{box-shadow:0 0 0 14px transparent,0 8px 24px rgba(0,0,0,.28)}100%{box-shadow:0 0 0 0 transparent,0 8px 24px rgba(0,0,0,.28)}}
@keyframes mt-goyang{0%,100%{transform:rotate(0)}25%{transform:rotate(-14deg)}75%{transform:rotate(14deg)}}
.mt-intai{position:fixed;right:calc(max(16px,env(safe-area-inset-right,0px)) + 66px);bottom:calc(env(safe-area-inset-bottom,0px) + 24px);z-index:36;max-width:min(280px,calc(100vw - 110px));display:grid;gap:2px;text-align:left;
  background:var(--surface);color:var(--ink);border:1px solid var(--line);border-left:4px solid var(--red);border-radius:12px;padding:8px 12px;box-shadow:0 8px 24px rgba(0,0,0,.2);cursor:pointer;font:13px var(--body)}
.mt-intai span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted)}
.mt-panel{position:fixed;z-index:45;right:max(16px,env(safe-area-inset-right,0px));bottom:calc(env(safe-area-inset-bottom,0px) + 88px);width:min(420px,calc(100vw - 32px));height:min(640px,calc(100dvh - 120px));
  display:flex;flex-direction:column;background:var(--bg);border:1px solid var(--line);border-radius:16px;box-shadow:0 20px 50px rgba(0,0,0,.35);overflow:hidden}
.mt-panel[hidden]{display:none}
.mt-h{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;background:var(--surface);border-bottom:1px solid var(--line)}
.mt-h h2{margin:0;font:700 20px var(--display);letter-spacing:.02em}
.mt-h p{margin:2px 0 0}
.mt-senarai{flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:6px;overscroll-behavior:contain}
.mt-hari{align-self:center;margin:6px 0;font-size:11px;font-weight:700;color:var(--muted);background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:2px 10px}
.mt-m{max-width:82%;align-self:flex-start;display:grid;gap:2px}
.mt-m.saya{align-self:flex-end}
.mt-m.samb{margin-top:-3px}
.mt-dari{font-size:12px;margin:4px 4px 0}
.mt-m.saya .mt-dari{text-align:right}
.mt-jaw{color:var(--muted);font-size:11px}
.mt-isi{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:7px 10px 18px;min-width:76px;overflow-wrap:anywhere}
.mt-m.saya .mt-isi{background:var(--info-soft);border-color:color-mix(in srgb,var(--info) 30%,transparent)}
.mt-isi.mt-gambar,.mt-isi.mt-video{padding:4px 4px 18px}
.mt-teks{font-size:14px;line-height:1.4}
.mt-masa{position:absolute;right:8px;bottom:3px;font-size:10px;color:var(--muted)}
.mt-gbr{display:block;border:0;padding:0;background:none;cursor:zoom-in}
.mt-gbr img,.mt-isi video{display:block;max-width:100%;width:260px;max-height:320px;object-fit:cover;border-radius:10px;background:#000}
.mt-isi video{object-fit:contain}
.mt-isi audio{display:block;width:240px;max-width:100%;height:40px}
.mt-transkrip{margin-top:6px;max-width:240px;font-size:13px;line-height:1.35;color:var(--ink);opacity:.85;white-space:pre-wrap;overflow-wrap:anywhere}
.mt-muat{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--muted)}
.mt-isi.mt-muat{padding:8px 12px}
.mt-pusing{width:14px;height:14px;border-radius:50%;border:2px solid var(--line);border-top-color:var(--info);animation:bl-putar .8s linear infinite}
.mt-kosong{margin:auto;text-align:center;color:var(--muted);max-width:300px}
.mt-kosong div{font-size:40px}
.mt-kosong p{margin:6px 0}
.mt-rakam{display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--red-soft);border-top:1px solid var(--line)}
.mt-rakam[hidden]{display:none}
.mt-rakam .bl-suara-rakam{flex:1}
.mt-tulis{display:flex;align-items:flex-end;gap:6px;padding:8px;padding-bottom:max(8px,env(safe-area-inset-bottom,0px));background:var(--surface);border-top:1px solid var(--line)}
.mt-tulis textarea{flex:1;min-width:0;resize:none;min-height:38px;max-height:140px;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--ink);font:16px/1.35 var(--body)}
.mt-lihat{position:absolute;inset:0;z-index:2;background:rgba(0,0,0,.92);display:grid;place-items:center;cursor:zoom-out}
.mt-lihat[hidden]{display:none}
.mt-lihat img{max-width:100%;max-height:100%;object-fit:contain}
@media (max-width:1023px){
  .mt-fab{bottom:calc(var(--bnav-h) + env(safe-area-inset-bottom,0px) + 14px);width:52px;height:52px}
  .mt-intai{bottom:calc(var(--bnav-h) + env(safe-area-inset-bottom,0px) + 18px)}
  #toastRoot{max-width:calc(100vw - 96px)}
}
@media (max-width:640px){
  body.mt-buka{overflow:hidden}
  .mt-m{max-width:88%}
}
/* v2.59.1: butang boleh diseret (chat head) & panel "pop" dari butang seperti Messenger */
.mt-fab{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;transition:left .28s cubic-bezier(.3,1.3,.5,1),top .28s cubic-bezier(.3,1.3,.5,1),transform .15s}
body.mt-seret{-webkit-user-select:none;user-select:none;cursor:grabbing}
.mt-fab.seret{transition:none;transform:scale(1.12);cursor:grabbing;box-shadow:0 14px 34px rgba(0,0,0,.4)}
.mt-fab.terbuka{animation:none;outline:3px solid color-mix(in srgb,var(--info) 55%,transparent);outline-offset:2px}
.mt-intai.kiri{border-left:1px solid var(--line);border-right:4px solid var(--red)}
.mt-panel.masuk{animation:mt-masuk .24s cubic-bezier(.2,.9,.3,1.15)}
.mt-panel.keluar{animation:mt-keluar .16s ease-in forwards;pointer-events:none}
@keyframes mt-masuk{from{opacity:0;transform:scale(.15)}to{opacity:1;transform:scale(1)}}
@keyframes mt-keluar{to{opacity:0;transform:scale(.15)}}
.mt-ukur{position:fixed;top:0;left:0;width:0;height:0;visibility:hidden;pointer-events:none;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
.mt-panel.bawah-butang{overflow:visible;border:1px solid var(--line);border-radius:16px}
.mt-panel.bawah-butang::before{content:"";position:absolute;top:-8px;left:calc(var(--panah-x,50%) - 8px);width:16px;height:16px;background:var(--surface);border-left:1px solid var(--line);border-top:1px solid var(--line);transform:rotate(45deg)}
.mt-panel.bawah-butang .mt-h{border-radius:16px 16px 0 0;position:relative}
.mt-panel.bawah-butang .mt-tulis{border-radius:0 0 16px 16px}
.mt-panel.bawah-butang .mt-lihat{border-radius:16px}
@media (prefers-reduced-motion:reduce){.mt-fab,.mt-panel.masuk,.mt-panel.keluar{transition:none;animation:none}}
.mt-latar{position:fixed;inset:0;z-index:34;background:rgba(0,0,0,.55);animation:mt-pudar .2s}
.mt-latar[hidden]{display:none}
@keyframes mt-pudar{from{opacity:0}}
/* v2.59.2: kotak taip seperti WhatsApp — kotak bujur [teks 📎 📷] + butang bulat hijau 🎙 / ➤; panel kekal di atas papan kekunci telefon */
.mt-tulis{align-items:flex-end;gap:6px;padding:6px 8px;padding-bottom:max(6px,env(safe-area-inset-bottom,0px));background:transparent;border-top:0}
.mt-pil{flex:1;min-width:0;display:flex;align-items:flex-end;gap:2px;background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:3px 6px 3px 14px;box-shadow:0 1px 2px rgba(0,0,0,.12)}
.mt-pil[hidden]{display:none}
.mt-pil textarea,.mt-tulis .mt-pil textarea{flex:1;min-width:0;border:0;background:transparent;padding:9px 0;min-height:40px;max-height:140px;border-radius:0;outline:none;box-shadow:none}
.mt-ik{flex:none;width:38px;height:40px;border:0;background:none;border-radius:50%;font-size:19px;line-height:1;cursor:pointer;color:var(--muted);display:grid;place-items:center;padding:0}
.mt-ik:hover{background:color-mix(in srgb,var(--ink) 7%,transparent)}
.mt-ik:focus-visible,.mt-bulat:focus-visible{outline:2px solid var(--info);outline-offset:1px}
.mt-bulat{flex:none;width:48px;height:48px;border-radius:50%;border:0;background:#00a884;color:#fff;display:grid;place-items:center;cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,.25);transition:transform .12s}
.mt-bulat:active{transform:scale(.92)}
.mt-rakam{flex:1;min-width:0;display:flex;align-items:center;gap:6px;min-height:48px;padding:0 12px 0 4px;background:var(--surface);border:1px solid var(--line);border-top:1px solid var(--line);border-radius:24px}
.mt-rakam .bl-suara-rakam{flex:1;font-variant-numeric:tabular-nums}
.mt-rakam .sm{font-weight:400;color:var(--muted)}
.mt-panel .mt-senarai{background:color-mix(in srgb,var(--bg) 92%,#00a884)}
.mt-m.saya .mt-isi{background:#d9fdd3;border-color:#c5ecbe;color:#111b21}
.mt-m.saya .mt-masa{color:#667781}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .mt-m.saya .mt-isi{background:#005c4b;border-color:#005c4b;color:#e9edef}:root:not([data-theme="light"]) .mt-m.saya .mt-masa{color:#a7c4bd}}
:root[data-theme="dark"] .mt-m.saya .mt-isi{background:#005c4b;border-color:#005c4b;color:#e9edef}
:root[data-theme="dark"] .mt-m.saya .mt-masa{color:#a7c4bd}
.mt-panel.bawah-butang .mt-tulis{border-radius:0 0 16px 16px}
.mt-fab.sorok{display:none}
.mt-panel.papan{animation:none}
.mt-panel.papan::before{display:none}
/* ===== v2.63.0 ikon Meeting room: maskot mekanik SCS badan penuh (PNG lutsinar) — berjalan bebas, condong memerhati, gaya ikut suasana ===== */
.mt-fab{width:56px;height:56px;padding:0;overflow:visible;color:inherit;background:transparent;border:0;border-radius:14px;box-shadow:none}
.mt-fab:hover{transform:none}
.mt-fab::before{content:"";position:absolute;left:8%;right:8%;bottom:-3px;height:10px;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.5),rgba(0,0,0,0));pointer-events:none;transition:transform .3s}
.mt-fab.jalan,.mt-fab.seret{transition:transform .15s}
.mt-fab.ada{background:transparent;animation:none}
.mt-fab.ada::after{content:"";position:absolute;left:-10%;right:-10%;bottom:-9px;height:20px;border-radius:50%;border:3px solid var(--red);animation:mt-cincin 1.6s ease-out infinite;pointer-events:none}
.mt-fab.mt-baru{animation:mt-goyang .6s 3}
.mt-fab.terbuka{outline:none}
.mt-fab.terbuka::before{background:radial-gradient(closest-side,color-mix(in srgb,var(--info) 80%,transparent),transparent);transform:scale(1.25)}
.mt-fab:focus-visible{outline:3px solid var(--info);outline-offset:3px}
@keyframes mt-cincin{0%{transform:scale(1);opacity:.9}100%{transform:scale(1.4);opacity:0}}
.mt-fab-c{position:absolute;left:-10px;bottom:2px;width:22px;height:22px;border-radius:50%;background:var(--surface);border:1px solid var(--line);display:grid;place-items:center;font-size:12px;line-height:1;box-shadow:0 2px 5px rgba(0,0,0,.25);z-index:2}
.mt-fab-n{z-index:3;top:-88%;right:-8px}
@media (max-width:1023px){.mt-fab{width:52px;height:52px}}

/* maskot: lebih tinggi daripada kotak butang (kepala di atas), kaki di atas bayang */
.mtk{position:absolute;left:11%;bottom:2px;width:78%;height:190%;transform-origin:50% 100%;transition:transform .35s ease}
.mtk-condong{position:absolute;inset:0;transform-origin:50% 100%;transform:rotate(calc(var(--lx,0) * 5deg)) translateY(calc(var(--ly,0) * 1.5px));transition:transform .35s cubic-bezier(.3,.8,.4,1)}
.mtk-badan{position:absolute;inset:0;transform-origin:50% 100%;animation:mtk-nafas 3.4s ease-in-out infinite}
.mtk-zzz,.mtk-fikir,.mtk-seru{position:absolute;opacity:0;transition:opacity .4s;pointer-events:none}
/* skrol: condong sedikit mengikut arah skrol */
/* duduk / rehat: mencangkung sedikit, bernafas perlahan */
/* termenung: condong, gelembung fikir */
.mt-fab[data-pose="termenung"] .mtk-fikir{opacity:1}
.mtk-fikir{right:-34%;top:-6%;width:52%;height:24%}
.mtk-fikir i{position:absolute;border-radius:50%;background:#fff;border:1px solid #9aa3ad;animation:mtk-fikir 2.4s ease-in-out infinite}
.mtk-fikir i:nth-child(1){width:18%;aspect-ratio:1;left:4%;bottom:6%}
.mtk-fikir i:nth-child(2){width:28%;aspect-ratio:1;left:28%;bottom:30%;animation-delay:.3s}
.mtk-fikir i:nth-child(3){width:42%;aspect-ratio:1;left:56%;bottom:56%;animation-delay:.6s}
/* baring: mengantuk — terlentok, Zzz, tidak berjalan */
.mt-fab[data-pose="baring"] .mtk-zzz{opacity:1}
.mtk-zzz{right:-46%;top:-10%;width:60%;height:30%;font:900 12px/1 Arial,sans-serif;color:#2f6fd6;text-shadow:0 1px 2px rgba(0,0,0,.3)}
.mtk-zzz b{position:absolute;opacity:0;animation:mtk-zzz 2.7s ease-in-out infinite}
.mtk-zzz b:nth-child(1){left:4%;bottom:6%;font-size:9px}
.mtk-zzz b:nth-child(2){left:36%;bottom:34%;font-size:11px;animation-delay:.9s}
.mtk-zzz b:nth-child(3){left:66%;bottom:62%;font-size:14px;animation-delay:1.8s}
/* teruja: mesej baharu — melompat, "!" */
.mt-fab[data-pose="teruja"] .mtk-seru{opacity:1;animation:mtk-seru .55s ease-in-out infinite alternate}
.mtk-seru{right:-30%;top:-4%;width:20px;height:20px;border-radius:50%;background:var(--red);color:#fff;font:900 14px/20px Arial,sans-serif;text-align:center;box-shadow:0 2px 6px rgba(0,0,0,.3)}
@keyframes mtk-nafas{50%{transform:scaleY(1.012) translateY(-.4px)}}
@keyframes mtk-fikir{0%,100%{opacity:.35;transform:scale(.85)}50%{opacity:1;transform:scale(1)}}
@keyframes mtk-zzz{0%{opacity:0;transform:translate(0,3px) scale(.7)}35%{opacity:1}100%{opacity:0;transform:translate(3px,-5px) scale(1.1)}}
@keyframes mtk-seru{from{transform:scale(.9) rotate(-8deg)}to{transform:scale(1.1) rotate(8deg)}}
@media (prefers-reduced-motion:reduce){.mtk *,.mtk{animation:none!important;transition:none!important}}
/* v2.66.0: maskot 3 pandangan (11 lapisan) — depan: diam, isyarat dua tangan, duduk bersila, baring; sisi kiri / kanan: berjalan
   (kaki dekat & kaki belakang melangkah depan-belakang dari pinggul, badan melantun, tangan berayun). Bulatan chat di atas kepala. */
.mt-fab{--kitar:.82s}
.mt-fab[data-pose="kerja"]{--kitar:.58s}
.mtk{left:2.5%;width:95%;transition:transform .7s cubic-bezier(.4,.1,.3,1)}
.mtk-badan{animation:none;filter:drop-shadow(0 0 1px #fff) drop-shadow(0 0 1.6px rgba(255,255,255,.35)) drop-shadow(0 1.5px 1.2px rgba(0,0,0,.35))}
.mtk-condong{transform:rotate(calc(var(--lx,0) * 2deg))}
/* engsel pandangan depan: pinggul, bahu, leher */
/* engsel pandangan sisi */
/* kepala menoleh / mendongak ke arah tetikus, jari & skrol */
/* diam (depan): bernafas, menoleh, tangan bergoyang sedikit */
/* berjalan (sisi): kaki melangkah depan-belakang silih ganti, badan melantun, tangan berayun berlawanan */
/* kerja (sibuk) bila berhenti: menghayun sepanar */
/* isyarat: regang dua tangan · angkat & turunkan sepanar · lambai (juga teruja: dua tangan melambai) */
/* duduk bersila (rehat / penat / termenung): badan turun, kaki dilipat ke sisi, tangan di atas lutut */
/* termenung: menggaru kepala, mendongak */
/* baring (penat / mengantuk): berbaring di lantai, kepala ke arah ruang lapang, Zzz */
/* bulatan chat di atas kepala: 💬, merah dengan bilangan bila ada mesej belum dibaca */
.mtk-gel{position:absolute;left:47%;top:-15%;width:26px;height:26px;margin-left:-13px;border-radius:50%;background:#fff;border:2px solid #d5dbe2;pointer-events:none;
  display:grid;place-items:center;font-size:13px;line-height:1;color:#111;box-shadow:0 3px 8px rgba(0,0,0,.3);transition:transform .6s,background .3s;animation:mt-gel-apung 3s ease-in-out infinite}
.mtk-gel::after{content:"";position:absolute;left:50%;bottom:-6px;margin-left:-4px;border:4px solid transparent;border-top:5px solid #fff;border-bottom:0}
.mtk-gel .mt-fab-n{position:static;inset:auto;min-width:0;height:auto;padding:0;border:0;background:none;color:#fff;font:800 12px/1 var(--body);box-shadow:none}
.mt-fab.ada .mtk-gel{background:var(--red);border-color:#fff;color:#fff;animation:mt-gel-denyut 1.3s ease-in-out infinite}
.mt-fab.ada .mtk-gel::after{border-top-color:var(--red)}
.mt-fab.ada .mtk-gel-i{display:none}
@keyframes mt-gel-apung{0%,100%{translate:0 0}50%{translate:0 -3px}}
@keyframes mt-gel-denyut{0%,100%{scale:1;box-shadow:0 0 0 0 color-mix(in srgb,var(--red) 60%,transparent),0 3px 8px rgba(0,0,0,.3)}50%{scale:1.12;box-shadow:0 0 0 7px transparent,0 3px 8px rgba(0,0,0,.3)}}
/* v2.67.0: bulatan di kepala hanya bila ada mesej belum dibaca (merah + bilangan); reaksi kepada job — terkejut & berlari kelam-kabut bila job baharu masuk */
.mtk-gel{display:none}
.mt-fab.ada .mtk-gel{display:grid}
/* terkejut: melompat tinggi, dua tangan terangkat, kepala tersentak, "!" */
.mt-fab:is([data-pose="terkejut"],[data-pose="lari"]) .mtk-seru{opacity:1;animation:mtk-seru .3s ease-in-out infinite alternate}
/* lari kelam-kabut: langkah laju & besar, condong ke depan, tangan berhayun kuat, berpeluh */
.mt-fab[data-pose="lari"]{--kitar:.34s}
.mt-fab[data-pose="lari"] .mtk-hias::after{content:"💦";position:absolute;top:2%;left:66%;font-size:13px;animation:mtk-peluh .5s ease-in infinite}
@keyframes mtk-peluh{0%{opacity:0;transform:translateY(0)}30%{opacity:1}100%{opacity:0;transform:translate(4px,10px)}}
@media (prefers-reduced-motion:reduce){.mt-fab[data-pose="terkejut"] .mtk-badan,.mt-fab[data-pose="lari"] .mtk-hias::after{animation:none!important}}
/* v2.68.0: gerakan lebih licin & real — anjakan berat badan semasa diam, kepala ikut melantun; mood sedih · gembira · excited (bahasa badan + emote) */
/* emote di sisi kepala */
.mtk-emo{position:absolute;right:-30%;top:-2%;width:46%;height:30%;opacity:0;transition:opacity .4s;pointer-events:none;font:700 13px/1 Arial,sans-serif}
.mtk-emo b{position:absolute;opacity:0}
.mt-fab:is([data-pose="sedih"],[data-pose="gembira"],[data-pose="teruja"]) .mtk-emo{opacity:1}
/* SEDIH: kepala tunduk, bahu jatuh, nafas perlahan, berjalan perlahan; titisan air mata */
.mt-fab[data-pose="sedih"]{--kitar:1.25s}
.mt-fab[data-pose="sedih"].jalan[data-arah="kiri"]{--tunduk:-4deg}
.mt-fab[data-pose="sedih"].jalan[data-arah="kanan"]{--tunduk:4deg}
.mt-fab[data-pose="sedih"] .mtk-emo b{left:18%;top:30%;font-size:12px;animation:mtk-titis 2.2s ease-in infinite}
.mt-fab[data-pose="sedih"] .mtk-emo b::before{content:"💧"}
.mt-fab[data-pose="sedih"] .mtk-emo b:nth-child(2){left:44%;animation-delay:.75s}
.mt-fab[data-pose="sedih"] .mtk-emo b:nth-child(3){left:6%;top:0;font-size:15px;animation:mtk-awan 3s ease-in-out infinite;opacity:.9}
.mt-fab[data-pose="sedih"] .mtk-emo b:nth-child(3)::before{content:"☁️"}
/* GEMBIRA: melompat kecil berirama, tangan berayun keluar, kepala bergoyang; nota muzik */
.mt-fab[data-pose="gembira"]{--kitar:.62s}
.mt-fab[data-pose="gembira"] .mtk-emo b{left:10%;bottom:0;color:#2f9e5b;font-size:14px;animation:mtk-nota 2s ease-out infinite}
.mt-fab[data-pose="gembira"] .mtk-emo b::before{content:"♪"}
.mt-fab[data-pose="gembira"] .mtk-emo b:nth-child(2){left:42%;animation-delay:.66s;color:#e0a100}
.mt-fab[data-pose="gembira"] .mtk-emo b:nth-child(2)::before{content:"♫"}
.mt-fab[data-pose="gembira"] .mtk-emo b:nth-child(3){left:70%;animation-delay:1.33s;color:#d3202b}
/* EXCITED (mesej baharu): lompat tinggi berulang, dua tangan dihentak ke atas, berkilau */
.mt-fab[data-pose="teruja"] .mtk-emo b{font-size:13px;animation:mtk-kilau 1s ease-in-out infinite}
.mt-fab[data-pose="teruja"] .mtk-emo b::before{content:"✨"}
.mt-fab[data-pose="teruja"] .mtk-emo b:nth-child(1){left:0;top:40%}
.mt-fab[data-pose="teruja"] .mtk-emo b:nth-child(2){left:46%;top:0;animation-delay:.33s}
.mt-fab[data-pose="teruja"] .mtk-emo b:nth-child(3){left:-150%;top:20%;animation-delay:.66s}
@keyframes mtk-titis{0%{opacity:0;transform:translateY(0) scale(.7)}20%{opacity:1}100%{opacity:0;transform:translateY(16px) scale(1)}}
@keyframes mtk-awan{0%,100%{transform:translateX(0)}50%{transform:translateX(3px)}}
@keyframes mtk-nota{0%{opacity:0;transform:translate(0,4px) rotate(-10deg)}25%{opacity:1}100%{opacity:0;transform:translate(6px,-16px) rotate(12deg)}}
@keyframes mtk-kilau{0%,100%{opacity:0;transform:scale(.5) rotate(0)}50%{opacity:1;transform:scale(1.15) rotate(25deg)}}
/* v2.71.0: skrol dalam Meeting room tidak melimpah ke halaman di belakang */
.mt-panel{overscroll-behavior:contain}
.mt-senarai{overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch;touch-action:pan-y}
.mt-latar{touch-action:none;overscroll-behavior:contain}
/* v2.86.59: Meeting room lutsinar & sedikit kabur (kaca) — latar panel separa telus dengan blur; buih mesej kekal pejal supaya mudah dibaca */
.mt-panel{background:color-mix(in srgb,var(--bg) 58%,transparent);-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);border-color:color-mix(in srgb,var(--line) 70%,transparent)}
.mt-panel .mt-h,.mt-panel .mt-tulis{background:color-mix(in srgb,var(--surface) 55%,transparent)}
.mt-panel .mt-senarai{background:transparent}
.mt-panel.bawah-butang::before{background:color-mix(in srgb,var(--surface) 55%,transparent)}
.mt-latar{background:rgba(0,0,0,.28)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.mt-panel{background:color-mix(in srgb,var(--bg) 94%,transparent)}}
/* v2.75.0: butang suara seperti WhatsApp (tahan · tolak ke atas kunci · tolak ke kiri batal), stiker maskot SCS & GIF */
.mt-utama-k{position:relative;flex:none;display:grid}
.mt-bulat{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;transition:transform .15s,background .2s}
.mt-bulat.tahan{background:#e53935;transform:translate(var(--gx,0),var(--gy,0)) scale(1.5);box-shadow:0 0 0 8px color-mix(in srgb,#e53935 22%,transparent),0 6px 16px rgba(0,0,0,.3);transition:background .2s,box-shadow .2s}
.mt-kunci{position:absolute;left:50%;bottom:calc(100% + 22px);width:38px;margin-left:-19px;padding:8px 0 6px;border-radius:20px;background:var(--surface);border:1px solid var(--line);
  box-shadow:0 4px 12px rgba(0,0,0,.25);display:grid;justify-items:center;gap:2px;font-size:15px;line-height:1;z-index:3;animation:mt-kunci-muncul .2s ease-out}
.mt-kunci[hidden]{display:none}
.mt-kunci i{font-style:normal;color:var(--muted);font-size:14px;animation:mt-kunci-naik 1s ease-in-out infinite}
@keyframes mt-kunci-muncul{from{opacity:0;transform:translateY(10px)}}
@keyframes mt-kunci-naik{0%,100%{transform:translateY(2px);opacity:.5}50%{transform:translateY(-3px);opacity:1}}
.mt-rakam .mt-tolak{flex:1;text-align:center;color:var(--muted);font-size:13px;transform:translateX(var(--gx,0));white-space:nowrap;overflow:hidden}
.mt-rakam .mt-tolak span{display:inline-block;animation:mt-tolak 1.4s ease-in-out infinite}
@keyframes mt-tolak{0%,100%{transform:translateX(0)}50%{transform:translateX(-6px)}}
.mt-rakam .mt-masa-r{font-variant-numeric:tabular-nums}
#mtStiker.on{color:var(--info);background:color-mix(in srgb,var(--info) 14%,transparent)}
/* panel stiker */
.mt-stkp{flex:none;max-height:min(46%,300px);overflow-y:auto;overscroll-behavior:contain;background:var(--surface);border-top:1px solid var(--line);padding:6px 8px 10px}
.mt-stkp[hidden]{display:none}
.mt-stk-tab{position:sticky;top:-6px;z-index:2;display:flex;gap:6px;padding:4px 0 8px;background:var(--surface)}
.mt-stk-tab button{border:1px solid var(--line);background:var(--bg);color:var(--ink);border-radius:999px;padding:5px 14px;font:600 13px var(--body);cursor:pointer}
.mt-stk-tab button.on{background:var(--ink);color:var(--surface);border-color:var(--ink)}
.mt-stk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:6px}
.mt-stk-pilih{display:grid;justify-items:center;align-content:end;gap:4px;padding:40px 4px 6px;border:1px solid var(--line);border-radius:12px;background:var(--bg);color:var(--ink);cursor:pointer;font:600 11px/1.2 var(--body);text-align:center;min-height:118px}
.mt-stk-pilih:hover{border-color:var(--info)}
.mt-stk-pilih:active{transform:scale(.96)}
.mt-gif-k{display:grid;justify-items:center;gap:6px;padding:14px 6px;text-align:center}
/* maskot mini (stiker) — guna lapisan & pose butang Meeting room */
.mt-fab.mt-stk{position:relative!important;left:auto!important;top:auto!important;right:auto!important;bottom:auto!important;z-index:auto;width:40px;height:40px;flex:none;cursor:inherit;pointer-events:none;transition:none}
.mt-stk .mtk-gel,.mt-stk.ada::after{display:none!important}
.mt-stk.diam *,.mt-stk.diam{animation-play-state:paused!important}
.mt-stk[data-lelap] .mtk-zzz{opacity:1}
.mt-stk[data-lelap] .mtk-zzz b{animation:mtk-zzz 2.7s ease-in-out infinite}
.mt-stk[data-lelap] .mtk-zzz b:nth-child(2){animation-delay:.9s}
.mt-stk[data-lelap] .mtk-zzz b:nth-child(3){animation-delay:1.8s}
/* stiker dalam chat: tiada gelembung, maskot bergerak + ungkapan */
.mt-isi.mt-stiker{background:none!important;border:0!important;padding:0 0 16px;min-width:0}
.mt-stk-k{display:flex;align-items:flex-end;gap:8px;padding-top:44px}
.mt-stk-k .mt-stk{width:52px;height:52px}
.mt-stk-t{background:var(--surface);border:2px solid var(--ink);border-radius:14px 14px 14px 4px;padding:6px 10px;font:800 14px/1.25 var(--body);color:var(--ink);box-shadow:2px 3px 0 rgba(0,0,0,.25);max-width:170px}
.mt-m.saya .mt-stk-k{flex-direction:row-reverse}
.mt-m.saya .mt-stk-t{border-radius:14px 14px 4px 14px;background:#d9fdd3;color:#111b21}
.mt-gbr{position:relative}
.mt-gif-l{position:absolute;left:6px;top:6px;background:rgba(0,0,0,.6);color:#fff;font:800 10px/1 var(--body);padding:3px 5px;border-radius:4px}
/* v2.80.0: siapa sudah baca (gambar profil bulat di hujung mesej), pautan aktif, butang bahagian sistem, mesej Tuan AJ */
.mt-seen{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:2px;margin-top:3px;padding:0 2px}
.mt-m:not(.saya) .mt-seen{justify-content:flex-start}
.mt-seen .mt-seen-av,.mt-seen .av{width:16px;height:16px;min-width:16px;border-radius:50%;font-size:8px;line-height:16px;display:inline-grid;place-items:center;overflow:hidden;
  background:var(--info-soft);color:var(--info);font-weight:700;border:1.5px solid var(--surface);box-shadow:0 0 0 .5px var(--line);margin:0}
.mt-seen .av img{width:100%;height:100%;object-fit:cover;display:block}
.mt-seen-lagi{font:700 10px/16px var(--body);color:var(--muted);padding:0 3px}
.mt-teks a{color:var(--info);text-decoration:underline;word-break:break-all}
.mt-m.saya .mt-teks a{color:#0b57d0}
.mt-btn-tab{display:inline-flex;align-items:center;gap:2px;margin:6px 4px 0 0;padding:6px 11px;border-radius:999px;border:1px solid color-mix(in srgb,var(--info) 45%,transparent);
  background:color-mix(in srgb,var(--info) 12%,var(--surface));color:var(--info);font:700 12.5px var(--body);cursor:pointer}
.mt-btn-tab:hover{background:color-mix(in srgb,var(--info) 22%,var(--surface))}
.mt-m.ai .mt-isi{background:linear-gradient(180deg,color-mix(in srgb,#7c4dff 10%,var(--surface)),var(--surface));border-color:color-mix(in srgb,#7c4dff 35%,var(--line))}
.mt-m.ai .mt-dari b{color:#7c4dff}
.mt-ai-ik{font-size:12px}

/* v2.60.1: halaman tidak boleh ditolak ke kiri / kanan — kandungan dipotong pada lebar skrin; input tarikh tidak melebihi kotaknya */
html,body{overflow-x:clip;max-width:100%}
input[type=date],input[type=month],input[type=time],select{min-width:0;max-width:100%;box-sizing:border-box}
/* Sejarah Invois: penapis kemas di telefon — Dari & Hingga sebaris, butang & pilihan selebar skrin */
@media (max-width:720px){
  #view-sej .filters{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;align-items:end}
  #view-sej .filters>.seg,#view-sej .filters>.btn,#view-sej .filters>select,#view-sej .filters>input[type=search]{grid-column:1/-1;width:100%!important;min-width:0}
  #view-sej .filters>label.sm{display:grid!important;grid-template-columns:minmax(0,1fr);gap:4px;min-width:0;margin:0}
  #view-sej .filters>label.sm input{width:100%;min-width:0;text-align:center}
  #view-sej .filters>.seg{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr))}
  #view-sej .filters>.seg button{min-width:0;padding-left:6px;padding-right:6px}
}

/* v2.81.3: semakan menyeluruh butang — saiz sentuh seragam di skrin sentuh (butang kecil ≥ 36px, butang biasa ≥ 40px, teks di tengah) */
@media (pointer:coarse), (max-width:720px){
  button.btn,a.btn{min-height:40px}
  button.btn.small,a.btn.small{min-height:36px}
  a.btn{display:inline-flex;align-items:center;justify-content:center;text-align:center;vertical-align:middle;text-decoration:none}
  .ac-link{min-height:32px;padding:6px 0;text-align:left}
}
/* v2.81.3: butang harga pasaran sama lebar di telefon (2 kolum, Kira selebar penuh) */
@media (max-width:720px){
  .hg-aksi{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .hg-aksi>.sm{grid-column:1/-1}
  .hg-aksi>.btn{width:100%;margin:0}
  .hg-aksi>[data-hg-kira]{grid-column:1/-1}
}

/* v2.81.4: pemilih bahasa dalam Tetapan & panel profil (bukan lagi di menu sisi) */
.set-bahasa .fl{max-width:360px}
.pf-bahasa{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}

/* v2.83.0: maskot — 8 pose PNG penuh (gembira, menunduk, marah, mengamuk, lompat, duduk, baring, tidur); berjalan kekal rig berlapis */
.mt-fab[data-pose="tidur"] .mtk-zzz{opacity:1}
/* marah: dengus nafas; mengamuk: menggeletar */
.mt-fab:is([data-pose="marah"],[data-pose="mengamuk"]) .mtk-emo{opacity:1}
.mt-fab:is([data-pose="marah"],[data-pose="mengamuk"]) .mtk-emo b{left:8%;top:6%;font-size:14px;animation:mtk-nota 1.4s ease-out infinite}
.mt-fab:is([data-pose="marah"],[data-pose="mengamuk"]) .mtk-emo b::before{content:"💢"}
.mt-fab[data-pose="marah"] .mtk-emo b:nth-child(n+2){display:none}
.mt-fab[data-pose="mengamuk"] .mtk-emo b:nth-child(2){left:52%;animation-delay:.45s}
.mt-fab[data-pose="mengamuk"] .mtk-emo b:nth-child(3){left:-150%;animation-delay:.9s}
/* melompat: cangkung → lonjak → terbang (gambar teruja) → mendarat (hentakan) → pulih */
/* stiker: gambar penuh juga; pose baring / tidur lebih lebar */

/* v2.84.0: SCS AI Guide — bubble atas kepala watak, sorotan sasaran, butang panggil; aksi watak (cakap, tunjuk, tekan, panjat) */
.ag-btn{position:fixed;z-index:36;width:30px;height:30px;border-radius:50%;border:2px solid #fff;background:var(--ink);color:#fff;font-size:15px;line-height:1;display:grid;place-items:center;
  box-shadow:0 3px 10px rgba(0,0,0,.3);cursor:pointer;padding:0;transition:left .3s,top .3s}
.ag-btn[hidden]{display:none}
.ag-btn:focus-visible{outline:3px solid var(--info);outline-offset:2px}
.ag-bub{position:fixed;z-index:37;max-width:calc(100vw - 16px);background:var(--surface);color:var(--ink);border:2px solid var(--ink);border-radius:16px;padding:10px 12px 8px;
  box-shadow:0 10px 30px rgba(0,0,0,.28);font:14px/1.45 var(--body);animation:ag-muncul .22s ease-out}
.ag-bub[hidden]{display:none}
.ag-bub::after{content:"";position:absolute;left:var(--ekor-x,50%);width:14px;height:14px;background:var(--surface);border:2px solid var(--ink);transform:translateX(-50%) rotate(45deg)}
.ag-bub[data-ekor="bawah"]::after{bottom:-9px;border-top:0;border-left:0}
.ag-bub[data-ekor="atas"]::after{top:-9px;border-bottom:0;border-right:0}
.ag-bub[data-ekor="kanan"]::after,.ag-bub[data-ekor="kiri"]::after,.ag-bub[data-ekor=""]::after{display:none}
.ag-k{display:flex;align-items:center;gap:6px;margin-bottom:4px}
.ag-k b{font:800 13px var(--body);letter-spacing:.02em}
.ag-mod{flex:1;font-size:11px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.ag-x{border:0;background:none;color:var(--muted);font:700 15px/1 var(--body);width:26px;height:26px;border-radius:50%;cursor:pointer}
.ag-x:hover{background:var(--bg)}
.ag-teks{min-height:20px;overflow-wrap:anywhere}
.ag-teks[data-jenis="proses"]::before{content:"";display:inline-block;width:11px;height:11px;margin-right:6px;border:2px solid var(--muted);border-top-color:transparent;border-radius:50%;vertical-align:-1px;animation:ag-pusing .8s linear infinite}
.ag-teks[data-jenis="fikir"]::before{content:"💭 "}
.ag-teks[data-jenis="keliru"]::before{content:"🤔 "}
.ag-nota{margin-top:6px;padding:6px 8px;border-radius:8px;background:color-mix(in srgb,var(--info) 12%,transparent);font-size:12.5px}
.ag-langkah{margin:8px 0 2px;font:700 11.5px var(--body);color:var(--muted)}
.ag-langkah span{display:block;height:4px;margin-top:4px;border-radius:2px;background:linear-gradient(90deg,var(--info) var(--k,0%),var(--line) var(--k,0%))}
.ag-aksi{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.ag-aksi:empty{display:none}
.ag-tanya{display:flex;gap:6px;margin-top:8px}
.ag-tanya input{flex:1;min-width:0;border:1px solid var(--line);border-radius:999px;padding:7px 12px;background:var(--bg);color:var(--ink);font:13.5px var(--body)}
.ag-kaki{display:flex;justify-content:flex-end;margin-top:4px}
.ag-pautan{border:0;background:none;color:var(--muted);font:12px var(--body);text-decoration:underline;cursor:pointer;padding:2px}
.ag-sorot{position:fixed;z-index:36;pointer-events:none;border:3px solid #e53935;border-radius:12px;box-shadow:0 0 0 4px rgba(229,57,53,.22),0 0 18px rgba(229,57,53,.45);animation:ag-denyut 1.2s ease-in-out infinite;transition:left .2s,top .2s,width .2s,height .2s}
.ag-sorot[hidden]{display:none}
@keyframes ag-muncul{from{opacity:0;transform:translateY(6px) scale(.97)}}
@keyframes ag-pusing{to{transform:rotate(360deg)}}
@keyframes ag-denyut{0%,100%{box-shadow:0 0 0 4px rgba(229,57,53,.22),0 0 18px rgba(229,57,53,.45)}50%{box-shadow:0 0 0 9px rgba(229,57,53,.08),0 0 26px rgba(229,57,53,.55)}}
/* saiz watak (tetapan AI Guide) */
body[data-ag-saiz="kecil"] #mtFab{width:46px;height:46px}
body[data-ag-saiz="besar"] #mtFab{width:68px;height:68px}
.mt-fab.pandu-gerak{transition:none!important}
/* aksi watak semasa memandu (rig berlapis: lkanan = kiri skrin, lkiri = kanan skrin) */
/* tanpa animasi (tetapan) & pengguna yang memilih kurang gerakan */
body.ag-statik .ag-sorot{animation:none}
@media (prefers-reduced-motion:reduce){.ag-bub,.ag-sorot,.ag-teks::before,.mt-fab[data-aksi] *{animation:none!important}.ag-btn,.ag-sorot{transition:none}}
@media print{.ag-btn,.ag-bub,.ag-sorot{display:none!important}}
.ac-set{border:1px solid var(--line);border-radius:10px;padding:8px 10px;margin:0;display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center}
.ac-set legend{font-weight:700;font-size:13px;padding:0 4px}

/* v2.84.2: uji bunyi dalam panel profil */
.pf-bunyi{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.pf-bunyi .k{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.pf-bunyi-b{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.pf-bunyi-b .btn{width:100%;margin:0}

/* v2.84.4: ringkasan bahagian Blaster di telefon dibalut hingga 2 baris (maklumat seperti "tiada had harian" tidak terpotong) */
@media (max-width:720px){
  .bl-lipat>summary .bl-sum .sm{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
}

/* v2.84.5: maskot lebih licin — sprite 1.5× (WebP), peralihan duduk / bangun, berpaling badan, lompat condong, tekan butang dengan tangan */
.mtk,.mtk-badan{will-change:transform}
/* duduk / baring: mencangkung dahulu, gambar bertukar pada titik paling rendah; bangun: tolak badan naik, sedikit melantun */
/* berpaling: badan berpusing (menipis) — pandangan depan / sisi bertukar ketika paling nipis */
/* lompat: badan condong ke arah lompatan */
.mt-fab[data-arah="kiri"]{--condong:-7deg}
.mt-fab[data-arah="kanan"]{--condong:7deg}
/* tekan butang: tangan sebelah sasaran dihulur, ditolak (lengan memanjang), kemudian ditarik balik; badan condong ke butang */
@keyframes ag-tolak{0%,40%{transform:translateY(0)}58%{transform:translateY(3.5%)}75%{transform:translateY(2.5%)}100%{transform:translateY(0)}}
@keyframes ag-condong{0%,100%{transform:none}55%{transform:translateX(var(--geser,0)) rotate(var(--lean,0deg))}}
@keyframes ag-jengket{0%,100%{transform:none}55%{transform:translateY(-4%)}}
/* butang app "terbenam" sekejap ketika ditekan watak (visual sahaja) */
.ag-ditekan{transform:translateY(1px) scale(.95)!important;filter:brightness(.92);transition:transform .1s,filter .1s}

/* v2.84.7: siri bingkai sebenar 4 arah daripada pemilik (duduk-bangun, tekan butang, lompat; depan / kanan / kiri / belakang).
/* arah: depan 0 · kanan 1 · kiri 2 · belakang 3 */
/* bila siri dimainkan: lapisan lain disorok serta-merta (tiada dua badan bertindih) */
/* duduk: berdiri → separuh → cangkung → bersila; bangun: sebaliknya (badan tidak lagi dipicit) */
/* lompat: cangkung → lonjak → di udara → mendarat; watak naik turun mengikut bingkai */
/* tekan butang: berdiri → angkat jari → hulur & tekan (paling lama) → tarik balik → berdiri */
/* memanjat: pandangan belakang, tangan mencapai & kaki ditarik silih berganti */

/* v2.84.7: bubble AWAN di atas kepala AJ — saiz ikut huraian (lebar diubah oleh js/aiguide.js), kembang bila bercakap; titik-titik fikiran ke kepala */
.ag-bub{background:none;border:0;box-shadow:none;isolation:isolate;padding:14px 18px 10px;border-radius:30px;
  transition:width .38s cubic-bezier(.3,1.3,.5,1),left .25s ease,top .25s ease;transform-origin:var(--ekor-x,50%) 100%}
.ag-bub[data-ekor="atas"]{transform-origin:var(--ekor-x,50%) 0}
.ag-bub::after{display:none!important}
.ag-awan{position:absolute;inset:0;z-index:-1;border-radius:30px;background:var(--surface);pointer-events:none;
  filter:drop-shadow(2px 0 0 var(--ink)) drop-shadow(-2px 0 0 var(--ink)) drop-shadow(0 2px 0 var(--ink)) drop-shadow(0 -2px 0 var(--ink)) drop-shadow(0 10px 18px rgba(0,0,0,.28))}
/* gumpalan awan di tepi (kekal bulat walau saiz berubah) */
.ag-awan::before{content:"";position:absolute;inset:-13px -9px;pointer-events:none;
  background:radial-gradient(circle at 12% 16px,var(--surface) 17px,transparent 17.5px),radial-gradient(circle at 31% 11px,var(--surface) 21px,transparent 21.5px),
    radial-gradient(circle at 53% 9px,var(--surface) 23px,transparent 23.5px),radial-gradient(circle at 76% 12px,var(--surface) 20px,transparent 20.5px),
    radial-gradient(circle at 91% 21px,var(--surface) 15px,transparent 15.5px),radial-gradient(circle at 15% calc(100% - 13px),var(--surface) 17px,transparent 17.5px),
    radial-gradient(circle at 39% calc(100% - 9px),var(--surface) 21px,transparent 21.5px),radial-gradient(circle at 65% calc(100% - 10px),var(--surface) 20px,transparent 20.5px),
    radial-gradient(circle at 87% calc(100% - 14px),var(--surface) 16px,transparent 16.5px),radial-gradient(circle at 9px 50%,var(--surface) 17px,transparent 17.5px),
    radial-gradient(circle at calc(100% - 9px) 50%,var(--surface) 17px,transparent 17.5px)}
.ag-titik{position:absolute;z-index:-1;border-radius:50%;background:var(--surface);pointer-events:none;
  filter:drop-shadow(1.5px 0 0 var(--ink)) drop-shadow(-1.5px 0 0 var(--ink)) drop-shadow(0 1.5px 0 var(--ink)) drop-shadow(0 -1.5px 0 var(--ink))}
.ag-t1{width:15px;height:15px;left:calc(var(--ekor-x,50%) - 4px);bottom:-22px}
.ag-t2{width:8px;height:8px;left:calc(var(--ekor-x,50%) + 1px);bottom:-36px}
.ag-bub[data-ekor="atas"] .ag-t1{bottom:auto;top:-22px}
.ag-bub[data-ekor="atas"] .ag-t2{bottom:auto;top:-36px}
.ag-bub:is([data-ekor="kanan"],[data-ekor="kiri"],[data-ekor=""]) .ag-titik{display:none}
.ag-bub.kembang{animation:ag-kembang .42s cubic-bezier(.3,1.4,.5,1)}
@keyframes ag-kembang{0%{transform:scale(.88)}60%{transform:scale(1.035)}100%{transform:scale(1)}}
.ag-bub .ag-k b{font-size:13.5px}
.ag-bub .ag-teks{font-size:14.5px;line-height:1.5}
/* awan kecil statik "Tahan 3s · Tanya AJ" (tiada animasi) */
.ag-btn{width:auto;height:auto;padding:6px 13px;border-radius:999px;border:2px solid var(--ink);background:var(--surface);color:var(--ink);
  font:800 11.5px/1.2 var(--body);white-space:nowrap;box-shadow:0 4px 10px rgba(0,0,0,.22);transition:none;isolation:isolate}
.ag-btn::before{content:"";position:absolute;z-index:-1;left:14%;top:-7px;width:22px;height:16px;border-radius:50%;background:var(--surface);border:2px solid var(--ink);border-bottom-color:transparent;border-right-color:transparent;transform:rotate(18deg)}
.ag-btn::after{content:"";position:absolute;left:50%;bottom:-11px;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:var(--surface);border:2px solid var(--ink)}
.ag-btn:hover{background:var(--bg)}
@media (prefers-reduced-motion:reduce){.ag-bub{transition:none}.ag-bub.kembang{animation:none}}
/* awan SVG (meregang ikut saiz huraian; garis tepi kekal 2px) */
.ag-bub{padding:24px 30px 24px}
.ag-awan{inset:-14px -16px;background:none;border-radius:0;filter:drop-shadow(0 10px 16px rgba(0,0,0,.28))}
.ag-awan::before{display:none}
.ag-awan svg{display:block;width:100%;height:100%;overflow:visible}
.ag-awan path{stroke:var(--ink);stroke-width:2.2;stroke-linejoin:round}
.ag-t1{bottom:-30px}.ag-t2{bottom:-44px}
.ag-bub[data-ekor="atas"] .ag-t1{top:-30px}.ag-bub[data-ekor="atas"] .ag-t2{top:-44px}
.ag-bub{padding:30px 40px 30px}

/* v2.84.9: GAMBAR BAHARU PEMILIK UNTUK SEMUA POSE BIASA — rig lama tidak lagi dipapar.
   Berdiri / bercakap / menunjuk / berfikir / berjalan memakai bingkai siri 4 arah (tekan & lompat); pose penuh (gembira, sedih, marah,
   mengamuk, duduk, baring, tidur) kekal gambar 8 pose; aksi khas (duduk-bangun, lompat, tekan, panjat) seperti v2.84.7. */
/* bercakap: jari diangkat menerangkan; berfikir (termenung): tangan di dada */
/* menunjuk: lengan dihulur ke arah sasaran (sisi kiri / kanan, belakang untuk butang di atas) */
/* tangan ke atas (terkejut, regang, angkat sepanar): bingkai lonjak siri lompat */
/* berjalan / berlari: pandangan sisi, langkah melantun & badan berayun */
#mtFab.jalan .mtk-hias{animation:none}

/* v2.85.2: RIG BERJALAN DARIPADA GAMBAR BAHARU — badan atas (termasuk tangan) + kaki depan & kaki belakang berayun dari pinggul,
   badan melantun dua kali setiap kitaran dan berayun sedikit. Menggantikan gambar sisi statik v2.84.9 (kaki tidak melangkah). */
/* berlari: langkah lebih besar & badan condong ke depan */
/* v2.85.3: bertukar lapisan badan serta-merta (tiada dua badan bertindih semasa pudar) */

/* v2.85.5: AWAN PUTIH di hujung kiri / kanan kepala Tuan AJ (awan besar & awan kecil "Tahan 3 saat"), huraian ditaip huruf demi huruf */
.ag-bub,.ag-btn{--surface:#fff;--ink:#16181b;--muted:#5f6670;--bg:#f2f4f6;--line:#d5dae0;color:#16181b;color-scheme:light}
.ag-awan path{stroke:#16181b}
.ag-titik{background:#fff;filter:drop-shadow(1.5px 0 0 #16181b) drop-shadow(-1.5px 0 0 #16181b) drop-shadow(0 1.5px 0 #16181b) drop-shadow(0 -1.5px 0 #16181b)}
/* titik-titik awan menghala ke kepala: awan di kiri kepala → titik di bawah kanan; awan di kanan kepala → titik di bawah kiri */
.ag-bub[data-ekor="ke-kanan"] .ag-t1{left:auto;right:-6px;bottom:-4px;top:auto}
.ag-bub[data-ekor="ke-kanan"] .ag-t2{left:auto;right:-20px;bottom:-16px;top:auto}
.ag-bub[data-ekor="ke-kiri"] .ag-t1{right:auto;left:-6px;bottom:-4px;top:auto}
.ag-bub[data-ekor="ke-kiri"] .ag-t2{right:auto;left:-20px;bottom:-16px;top:auto}
.ag-bub[data-ekor="ke-kanan"]{transform-origin:100% 100%}
.ag-bub[data-ekor="ke-kiri"]{transform-origin:0 100%}
/* teks taip: salinan penuh untuk pembaca skrin, paparan ditaip */
.ag-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ag-taip{display:block}
/* awan kecil statik (tiada animasi) */
.ag-btn{position:fixed;padding:11px 18px 12px;border:0;background:none;box-shadow:none;border-radius:0;font:800 11.5px/1.15 var(--body);isolation:isolate;transition:none;filter:drop-shadow(0 4px 8px rgba(0,0,0,.25))}
.ag-btn::before,.ag-btn::after{display:none!important}
.ag-btn .ag-awan{inset:-3px -5px}
.ag-btn .ag-titik{display:block;position:absolute}
.ag-btn .ag-t1{width:9px;height:9px;bottom:-5px}
.ag-btn .ag-t2{width:5px;height:5px;bottom:-12px}
.ag-btn[data-sisi="kanan"] .ag-t1{left:-3px}.ag-btn[data-sisi="kanan"] .ag-t2{left:-10px}
.ag-btn[data-sisi="kiri"] .ag-t1{left:auto;right:-3px}.ag-btn[data-sisi="kiri"] .ag-t2{left:auto;right:-10px}
.ag-btn:hover{background:none}
.ag-btn .ag-btn-t{position:relative;white-space:nowrap}

/* v2.85.6: awan 3D (kecerunan dalam SVG, garis lembut, bayang berlapis) & 3 titik fikiran 3D yang menurun ke atas kepala */
.ag-awan{filter:drop-shadow(0 10px 12px rgba(0,0,0,.26)) drop-shadow(0 2px 2px rgba(0,0,0,.16))}
.ag-awan path.ag-awan-b{stroke:rgba(28,32,38,.5);stroke-width:1.4}
.ag-awan path:not(.ag-awan-b){stroke:none}
.ag-titik{position:absolute;display:block!important;border-radius:50%;filter:none;z-index:-1;
  background:radial-gradient(circle at 34% 30%,#fff 0,#f5f6f8 45%,#cdd3da 100%);border:1px solid rgba(28,32,38,.42);box-shadow:0 3px 5px rgba(0,0,0,.24)}
.ag-bub .ag-t1{width:16px;height:16px}.ag-bub .ag-t2{width:11px;height:11px}.ag-bub .ag-t3{width:7px;height:7px}
.ag-btn .ag-t1{width:9px;height:9px}.ag-btn .ag-t2{width:6px;height:6px}.ag-btn .ag-t3{width:4px;height:4px}
.ag-bub[data-ekor=""] .ag-titik{display:none!important}
/* v2.86.2: dua atlas resolusi tinggi — mekanik-pose.webp (sel 280x400, 4 lajur x 7 baris, tinggi berdiri 360 px untuk skrin dpr 3)
   dan mekanik-jalan.webp (12 bingkai x 2 arah: kaki berayun dari pinggul, kaki yang melangkah diangkat). */
/* v2.86.0: maskot Tuan AJ baharu — SCS_Gerak_Reaksi_28_Bingkai (7 siri x 4 pose) + 2 x 6 bingkai berjalan dalam SATU atlas
   /icons/mekanik/mekanik-atlas.webp (sel 200x290, 6 lajur x 9 baris; skala, tapak kaki & pusat kaki disamakan). Satu lapisan .mtg sahaja
   (tiada rig berlapis / pusingan 3D — punca badan nipis & berganda di iPhone); bingkai ditukar dengan background-position berlangkah.
   Baris: 0 lompat · 1 tekan kiri · 2 tekan kanan · 3 duduk→bangun · 4 berehat · 5 terkejut · 6 marah · 7 jalan kiri · 8 jalan kanan */
.mtg{position:absolute;left:-27.78%;width:155.56%;height:111.11%;bottom:-2.78%;pointer-events:none;background:url(/icons/mekanik/mekanik-pose.webp) no-repeat;background-size:400% 700%;background-position:100% 50%;animation-timing-function:steps(1,end);animation-fill-mode:both}
:is(#mtFab,.mt-stk):not(.jalan) .mtk-badan{animation:mtk-nafas 3.6s ease-in-out infinite}
.mt-fab.seret .mtk{transform:scale(1.08) rotate(-4deg)}
/* pose diam */
:is(#mtFab,.mt-stk)[data-pose="gembira"] .mtg{background-position:100% 83.333%}
:is(#mtFab,.mt-stk):is([data-pose="termenung"],[data-pose="sedih"]) .mtg{background-position:0% 66.667%}
:is(#mtFab,.mt-stk)[data-pose="duduk"] .mtg{background-position:0% 50%}
:is(#mtFab,.mt-stk)[data-pose="baring"] .mtg{background-position:66.667% 66.667%}
:is(#mtFab,.mt-stk)[data-pose="tidur"] .mtg{background-position:100% 66.667%}
:is(#mtFab,.mt-stk):is([data-pose="duduk"],[data-pose="baring"],[data-pose="tidur"])::before{transform:scaleX(1.6)}
:is(#mtFab,.mt-stk)[data-pose="marah"] .mtg{animation-name:mtg-marah;animation-duration:.9s}
:is(#mtFab,.mt-stk)[data-pose="mengamuk"] .mtg{animation:mtg-amuk .5s steps(1,end) infinite}
:is(#mtFab,.mt-stk)[data-pose="mengamuk"] .mtk-badan{animation:mtg-goncang .25s linear infinite}
:is(#mtFab,.mt-stk)[data-pose="terkejut"] .mtg{animation-name:mtg-kejut;animation-duration:1.4s}
:is(#mtFab,.mt-stk)[data-pose="terkejut"] .mtk-badan{animation:mtg-sentak .5s cubic-bezier(.25,.7,.35,1) 1}
/* gerak isyarat & Guide */
:is(#mtFab,.mt-stk)[data-aksi="regang"] .mtg{background-position:33.333% 0%}
:is(#mtFab,.mt-stk):is([data-aksi="angkat"],[data-aksi="lambai"]) .mtg{background-position:33.333% 33.333%}
:is(#mtFab,.mt-stk)[data-aksi="tunjuk"] .mtg,:is(#mtFab,.mt-stk)[data-aksi="tunjuk"][data-tunjuk="kanan"] .mtg{background-position:66.667% 33.333%}
:is(#mtFab,.mt-stk)[data-aksi="tunjuk"][data-tunjuk="kiri"] .mtg{background-position:66.667% 16.667%}
:is(#mtFab,.mt-stk)[data-aksi="tekan"] .mtg{background-position:0% 33.333%}
:is(#mtFab,.mt-stk)[data-aksi="tekan"][data-tunjuk="kiri"] .mtg{background-position:0% 16.667%}
/* v2.86.1: tunjuk / tekan ke atas = jari telunjuk diangkat (bukan pose lompat tangan ke atas yang nampak beku) */
:is(#mtFab,.mt-stk):is([data-aksi="tunjuk"],[data-aksi="tekan"])[data-tunjuk="atas"] .mtg{background-position:33.333% 33.333%}
#mtFab[data-aksi="tunjuk"] .mtk-badan{animation:mtg-isyarat 1.2s ease-in-out infinite}
@keyframes mtg-isyarat{0%,100%{transform:none}50%{transform:translateY(-2.5%)}}
#mtFab.tekan-main[data-aksi="tekan"] .mtg{animation:mtg-tekan-kanan .9s steps(1,end) both}
#mtFab.tekan-main[data-aksi="tekan"][data-tunjuk="kiri"] .mtg{animation-name:mtg-tekan-kiri}
#mtFab.tekan-main[data-aksi="tekan"][data-tunjuk="atas"] .mtg{animation:none}
#mtFab.tekan-main[data-aksi="tekan"][data-tunjuk="atas"] .mtk{animation:mtg-jengket .7s ease-in-out 1}
:is(#mtFab,.mt-stk)[data-aksi="panjat"] .mtg{animation:mtg-panjat .5s steps(1,end) infinite}
/* melompat: mencangkung → melonjak → di udara → mendarat, badan naik turun */
:is(#mtFab,.mt-stk)[data-g="lompat"]:not(.jalan) .mtg{animation:mtg-lompat 1.1s steps(1,end) infinite}
:is(#mtFab,.mt-stk)[data-g="lompat"]:not(.jalan) .mtk{animation:mtg-naik 1.1s ease-in-out infinite}
:is(#mtFab,.mt-stk)[data-g="lompat"]:not(.jalan)::before{animation:mtg-bayang 1.1s ease-in-out infinite}
.mt-stk.diam[data-g="lompat"] .mtg{animation:none;background-position:66.667% 0%}
/* peralihan: duduk / bangun berperingkat, rebah ke posisi rehat */
#mtFab[data-peralihan="turun"] .mtg{animation:mtg-turun .8s steps(1,end) both}
#mtFab[data-peralihan="turun"]:is([data-pose="baring"],[data-pose="tidur"]) .mtg{animation-name:mtg-rebah}
#mtFab[data-peralihan="bangun"] .mtg{animation:mtg-bangun .75s steps(1,end) both}
/* berjalan: 6 bingkai (kaki berayun dari pinggul, badan melantun) ikut arah */
:is(#mtFab,.mt-stk).jalan .mtg{background-image:url(/icons/mekanik/mekanik-jalan.webp);background-size:600% 200%;animation:mtg-jalan-kanan var(--kitar,.82s) steps(1,end) infinite}
:is(#mtFab,.mt-stk).jalan[data-arah="kiri"] .mtg{animation-name:mtg-jalan-kiri}
#mtFab.jalan[data-pose="lari"][data-arah="kiri"] .mtk{transform:rotate(-6deg)}
#mtFab.jalan[data-pose="lari"][data-arah="kanan"] .mtk{transform:rotate(6deg)}
#mtFab[data-pose="lari"]::before{transform:scaleX(1.2)}
@keyframes mtg-lompat{0%{background-position:0% 0%}18%{background-position:33.333% 0%}34%{background-position:66.667% 0%}74%{background-position:100% 0%}92%,100%{background-position:0% 0%}}
@keyframes mtg-naik{0%,18%{transform:translateY(0)}34%{transform:translateY(-9%)}54%{transform:translateY(-15%)}74%{transform:translateY(-3%)}80%,100%{transform:translateY(0)}}
@keyframes mtg-bayang{0%,18%,80%,100%{transform:scaleX(1);opacity:1}54%{transform:scaleX(.55);opacity:.45}}
@keyframes mtg-jalan-kiri{0%{background-position:0% 0%}16.667%{background-position:20% 0%}33.333%{background-position:40% 0%}50%{background-position:60% 0%}66.667%{background-position:80% 0%}83.333%,100%{background-position:100% 0%}}
@keyframes mtg-jalan-kanan{0%{background-position:0% 100%}16.667%{background-position:20% 100%}33.333%{background-position:40% 100%}50%{background-position:60% 100%}66.667%{background-position:80% 100%}83.333%,100%{background-position:100% 100%}}
@keyframes mtg-turun{0%{background-position:100% 50%}25%{background-position:66.667% 50%}50%{background-position:33.333% 50%}75%,100%{background-position:0% 50%}}
@keyframes mtg-rebah{0%{background-position:0% 66.667%}33%{background-position:33.333% 66.667%}66%,100%{background-position:66.667% 66.667%}}
@keyframes mtg-bangun{0%{background-position:0% 50%}25%{background-position:33.333% 50%}50%{background-position:66.667% 50%}75%,100%{background-position:100% 50%}}
@keyframes mtg-kejut{0%{background-position:0% 83.333%}12%{background-position:33.333% 83.333%}26%,100%{background-position:66.667% 83.333%}}
@keyframes mtg-marah{0%{background-position:0% 100%}28%{background-position:33.333% 100%}56%,100%{background-position:66.667% 100%}}
@keyframes mtg-amuk{0%{background-position:33.333% 100%}50%,100%{background-position:66.667% 100%}}
@keyframes mtg-tekan-kanan{0%{background-position:0% 33.333%}15%{background-position:33.333% 33.333%}35%{background-position:66.667% 33.333%}70%{background-position:100% 33.333%}90%,100%{background-position:0% 33.333%}}
@keyframes mtg-tekan-kiri{0%{background-position:0% 16.667%}15%{background-position:33.333% 16.667%}35%{background-position:66.667% 16.667%}70%{background-position:100% 16.667%}90%,100%{background-position:0% 16.667%}}
@keyframes mtg-panjat{0%{background-position:33.333% 0%}50%,100%{background-position:66.667% 0%}}
@keyframes mtg-goncang{0%,100%{transform:translateX(0)}25%{transform:translateX(-1.5%)}75%{transform:translateX(1.5%)}}
@keyframes mtg-sentak{0%{transform:none}20%{transform:translateY(-4%) scale(.98,1.03)}55%{transform:translateY(0) scale(1.02,.98)}100%{transform:none}}
@keyframes mtg-jengket{0%,100%{transform:none}45%{transform:translateY(-6%)}}
@media (prefers-reduced-motion:reduce){.mtg,.mtk,.mtk-badan{animation:none!important}}
body.ag-statik .mtg,body.ag-statik #mtFab .mtk{animation:none!important}
/* pose duduk / rehat: kepala lebih rendah — hiasan (Zzz, gelembung chat, emosi) ikut turun */
:is(#mtFab,.mt-stk):is([data-pose="duduk"],[data-pose="baring"],[data-pose="tidur"]) :is(.mtk-zzz,.mtk-emo,.mtk-fikir){top:24%}
:is(#mtFab,.mt-stk):is([data-pose="duduk"],[data-pose="baring"],[data-pose="tidur"]) .mtk-gel{top:20%}
/* v2.86.3 (Fasa A) mod kawal app: label keadaan tugas, baris kawalan (Jeda / Sambung / Saya ambil alih / Tunjukkan sahaja / Hentikan),
   huraian panjang diskrol dalam awan (tiada teks terpotong) */
.ag-keadaan{font:800 10px/1 var(--body);text-transform:uppercase;letter-spacing:.05em;padding:4px 7px;border-radius:999px;background:color-mix(in srgb,var(--info) 16%,transparent);color:var(--info);white-space:nowrap}
.ag-keadaan[hidden]{display:none}
.ag-keadaan[data-k="paused"],.ag-keadaan[data-k="needs_confirmation"]{background:color-mix(in srgb,#e0a100 20%,transparent);color:#8a6200}
.ag-keadaan[data-k="completed"]{background:color-mix(in srgb,#2f9e5b 18%,transparent);color:#1f7a44}
.ag-keadaan[data-k="failed"]{background:color-mix(in srgb,var(--red) 16%,transparent);color:var(--red)}
.ag-kawal{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;padding-top:8px;border-top:1px dashed var(--line)}
.ag-kawal[hidden]{display:none}
.ag-bub .ag-teks{max-height:min(38vh,260px);overflow-y:auto;overscroll-behavior:contain}
.ag-k:has(.ag-keadaan:not([hidden])) .ag-mod{display:none}
.ag-k:has(.ag-keadaan:not([hidden])) .ag-keadaan{margin-right:auto}
/* v2.86.5: kitaran berjalan baharu (AJ_Rujukan_Pose_Berjalan: 6 pose — contact, down, passing x2; lutut membengkok & kasut terangkat
   semasa passing, tangan berayun bertentangan). #mtFab: pose dipilih oleh JS ikut JARAK dilalui (--jf), bukan jam — tiada gelinciran tapak,
   tiada berjalan setempat. Pusingan arah: sisi → depan → sisi. Stiker Meeting room kekal beranimasi ikut masa. */
#mtFab.jalan .mtg{animation:none;background-image:url(/icons/mekanik/mekanik-jalan.webp);background-size:600% 200%;background-position:calc(var(--jf,0) * 20%) 100%}
#mtFab.jalan[data-arah="kiri"] .mtg{animation:none;background-position:calc(var(--jf,0) * 20%) 0%}
#mtFab.berpusing .mtg,#mtFab.berpusing.jalan[data-arah] .mtg{animation:none;background-image:url(/icons/mekanik/mekanik-pose.webp);background-size:400% 700%;background-position:100% 50%}
@media (prefers-reduced-motion:reduce){#mtFab.jalan .mtg{background-position:0% 100%}#mtFab.jalan[data-arah="kiri"] .mtg{background-position:0% 0%}}
/* v2.86.9: pose diam sisi (AJ_Idle_Sisi; kanan = cermin sementara dengan patch SCS dicerminkan semula) — selepas berjalan AJ kekal
   menghadap arah terakhir; isyarat, lompat, duduk, peralihan dan pose bukan berdiri memakai bingkai masing-masing */
#mtFab.diam-sisi:not(.jalan):not([data-g]):not([data-peralihan]):not([data-aksi]):is([data-pose="berdiri"],[data-pose="kerja"],[data-pose="gembira"],[data-pose="sedih"]) .mtg{animation:none;background-image:url(/icons/mekanik/mekanik-diam-sisi.webp);background-size:200% 100%;background-position:100% 0}
#mtFab.diam-sisi[data-arah="kiri"]:not(.jalan):not([data-g]):not([data-peralihan]):not([data-aksi]):is([data-pose="berdiri"],[data-pose="kerja"],[data-pose="gembira"],[data-pose="sedih"]) .mtg{background-position:0 0}
/* v2.86.10: tangan bergerak semasa diam — bercakap (Guide / Tuan AJ): AJ berpaling ke depan dan tangan naik-turun (siri Terkejut T0/T1/T3
   + berdiri); isyarat "angkat" & "lambai" kini beranimasi, bukan satu gambar beku */
@keyframes mtg-cakap{0%{background-position:100% 50%}22%{background-position:33.333% 83.333%}50%{background-position:100% 83.333%}74%{background-position:33.333% 83.333%}90%,100%{background-position:100% 50%}}
@keyframes mtg-angkat{0%{background-position:100% 50%}14%{background-position:33.333% 83.333%}40%{background-position:100% 83.333%}66%{background-position:33.333% 83.333%}86%,100%{background-position:100% 50%}}
@keyframes mtg-lambai{0%{background-position:33.333% 83.333%}50%,100%{background-position:100% 83.333%}}
#mtFab[data-aksi="cakap"]:not(.jalan):not([data-g]) .mtg{animation:mtg-cakap 2.6s steps(1,end) infinite}
#mtFab[data-aksi="angkat"]:not(.jalan):not([data-g]) .mtg{animation:mtg-angkat 3s steps(1,end) 1 both}
:is(#mtFab,.mt-stk)[data-aksi="lambai"]:not(.jalan):not([data-g]) .mtg{animation:mtg-lambai .7s steps(1,end) infinite}
.mt-stk.diam[data-aksi="lambai"] .mtg{animation:none;background-position:33.333% 83.333%}
@media (prefers-reduced-motion:reduce){#mtFab[data-aksi] .mtg,.mt-stk[data-aksi] .mtg{animation:none!important}}
body.ag-statik #mtFab[data-aksi] .mtg{animation:none!important}

/* v2.86.11: Dalam bengkel — senarai tempahan Hari ini & Esok dilipat (tekan tajuk untuk buka) */
#l-tmp details.ltm-hari>summary{cursor:pointer;list-style:none}
#l-tmp details.ltm-hari>summary::-webkit-details-marker{display:none}
#l-tmp details.ltm-hari:not([open])>summary{margin-bottom:0}
#l-tmp .ltm-anak{width:9px;height:9px;flex:none;margin-left:6px;border-right:2px solid var(--h);border-bottom:2px solid var(--h);transform:rotate(45deg);transition:transform .15s}
#l-tmp details[open]>summary .ltm-anak{transform:rotate(-135deg)}
/* v2.86.14: rig 2D Tuan AJ (pilihan peranti) — lapisan SVG dalam kotak watak; sprite lama disorok hanya semasa keadaan yang disokong rig */
.mtr{position:absolute;inset:0;pointer-events:none;display:none;overflow:visible}
#mtFab.rig-aktif .mtr{display:block}
#mtFab.rig-aktif .mtg{visibility:hidden}

/* v2.86.15: Home — kolum kad seragam */
/* kad kosong (nilai 0) kekal sebagai kad biasa: sempadan penuh, tidak pudar; hanya nombor dikelabukan */
#u-isi .tile.kosong{opacity:1;border-style:solid;filter:none;cursor:default}
#u-isi .tile.kosong .v{color:var(--muted)}
#u-isi .tile.net.kosong{background:var(--surface);color:var(--ink);border:1px solid var(--line);border-top:3px solid var(--line)}
html.t3d #u-isi .tile.net.kosong{background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 75%,#fff) 0%,var(--surface) 45%,color-mix(in srgb,var(--surface) 97%,#000) 100%);border:1px solid var(--line);color:var(--ink)}
html.t3d #u-isi .tile.net.kosong::after{content:none}
html.t3d #u-isi .tile.net.kosong .k,html.t3d #u-isi .tile.net.kosong .s,html.t3d #u-isi .tile.net.kosong .sm{color:var(--muted)}
html.t3d #u-isi .tile.net.kosong .v{color:var(--muted);text-shadow:none}
/* kad kecil dalam kad Laman web & Tracker: label sama tinggi supaya nombor sebaris merentas kolum */
.u-web-tiles .tile,.u-tdr-tiles .tile{display:flex;flex-direction:column}
.u-web-tiles .tile .k,.u-tdr-tiles .tile .k{flex:1 0 auto;min-height:2.7em;line-height:1.35}
/* akaun Tracker: nama tidak dipotong; satu kotak sahaja = selebar penuh */
.u-tdr-a b{white-space:normal;overflow-wrap:anywhere;line-height:1.3}
.u-tdr-ak>.u-tdr-a:only-child{grid-column:1/-1}

/* v2.86.19: Senarai Kerja dikumpul ikut status (tajuk kumpulan boleh dilipat) */
#view-job table.list tr.j-kump>td{padding:0;border:0;background:none}
#view-job table.list tr.j-kump>td::before{content:none}
#view-job table.list.kad tr.j-kump{border:0;background:none;box-shadow:none;padding:0;margin:14px 0 6px}
#view-job table.list.kad tbody tr.j-kump:first-child{margin-top:0}
.j-kump-b{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:10px 14px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink);font:inherit;cursor:pointer;text-align:left}
.j-kump-b .pill{font-size:13px}
.j-kump-n{color:var(--muted);font-size:13px}
.j-kump-n b{color:var(--ink)}
.j-kump-a{margin-left:auto;width:9px;height:9px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);transition:transform .15s}
.j-kump-b[aria-expanded="true"] .j-kump-a{transform:rotate(-135deg)}
#view-job table.list:not(.kad) tr.j-kump>td{padding:10px 0 6px}
#view-job table.list tr[hidden]{display:none!important}
/* v2.86.23: pergerakan tangan seperti rig baharu, rupa asal dikekalkan — menunjuk butang: tangan di sisi → diangkat ke dada → dihulur ke
   butang (0.6 s) dan kekal menunjuk sambil badan bergerak sedikit; selepas itu tangan ditarik balik (0.38 s) sebelum rehat */
@keyframes mtg-tunjuk-kanan{0%{background-position:0% 33.333%}30%{background-position:33.333% 33.333%}60%,100%{background-position:66.667% 33.333%}}
@keyframes mtg-tunjuk-kiri{0%{background-position:0% 16.667%}30%{background-position:33.333% 16.667%}60%,100%{background-position:66.667% 16.667%}}
@keyframes mtg-tunjuk-atas{0%{background-position:0% 33.333%}45%,100%{background-position:33.333% 33.333%}}
#mtFab[data-aksi="tunjuk"][data-tunjuk="kanan"]:not(.jalan) .mtg{animation:mtg-tunjuk-kanan .6s steps(1,end) both}
#mtFab[data-aksi="tunjuk"][data-tunjuk="kiri"]:not(.jalan) .mtg{animation:mtg-tunjuk-kiri .6s steps(1,end) both}
#mtFab[data-aksi="tunjuk"][data-tunjuk="atas"]:not(.jalan) .mtg{animation:mtg-tunjuk-atas .5s steps(1,end) both}
#mtFab#mtFab[data-tarik="kanan"]:not(.jalan):not([data-aksi]) .mtg{animation:none;background-image:url(/icons/mekanik/mekanik-pose.webp);background-size:400% 700%;background-position:100% 33.333%}
#mtFab#mtFab[data-tarik="kiri"]:not(.jalan):not([data-aksi]) .mtg{animation:none;background-image:url(/icons/mekanik/mekanik-pose.webp);background-size:400% 700%;background-position:100% 16.667%}
@media (prefers-reduced-motion:reduce){#mtFab[data-aksi="tunjuk"] .mtg{animation:none!important}}
/* v2.86.24: bar notifikasi Meeting room (hidupkan notifikasi / cara di iPhone / disekat) */
.mt-notis-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 12px;margin:0 10px 6px;border-radius:10px;background:color-mix(in srgb,var(--info) 12%,var(--surface));color:var(--ink);font:13px/1.4 var(--body)}
.mt-notis-bar[hidden]{display:none}
.mt-notis-bar span{flex:1;min-width:160px}

/* v2.86.29: laporan jualan (PNL) kemas — kawalan sebaris, bahagian panjang boleh dilipat */
#view-pnl details.pnl-lipat>summary{display:flex;align-items:center;gap:10px;cursor:pointer;list-style:none;min-height:44px}
#view-pnl details.pnl-lipat>summary::-webkit-details-marker{display:none}
#view-pnl details.pnl-lipat>summary>h2,#view-pnl details.pnl-lipat>summary>h3{margin:0;flex:1}
#view-pnl details.pnl-lipat>summary::after{content:"";flex:none;width:9px;height:9px;margin-right:4px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);transition:transform .15s}
#view-pnl details.pnl-lipat[open]>summary::after{transform:rotate(-135deg)}
#view-pnl details.pnl-lipat[open]>summary{margin-bottom:10px}
#view-pnl details.sec.pnl-lipat:not([open]){padding-bottom:0}
#view-pnl .grid2{align-items:start}
@media (max-width:720px){
  #view-pnl .filters{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}
  #view-pnl .filters>.seg{grid-column:1/-1}
  #view-pnl .filters>input{width:100%;margin:0}
  #view-pnl .filters>#p-excel{margin:0!important;white-space:nowrap}
}
/* kad bernilai 0 dalam PNL: kad biasa (sama seperti Home) */
#view-pnl .tile.kosong{opacity:1;border-style:solid;filter:none;cursor:default}
#view-pnl .tile.kosong .v{color:var(--muted)}
#view-pnl details.panel.pnl-lipat{margin-bottom:16px}

/* v2.86.34: Setor Tunai — kad Caj & Invois dan laporan jualan */
.setor-kad{margin-bottom:12px}
.setor-kepala{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap}
.setor-kepala h3{margin:0 0 2px}
.setor-kv{margin-top:10px}
.setor-lipat{margin-top:10px}
.setor-lipat>summary{cursor:pointer;font-weight:600;min-height:40px;display:flex;align-items:center}
.setor-h{margin:14px 0 6px;font-size:14px}
.setor-t td.rowbtns{display:flex;gap:6px;flex-wrap:wrap}
.setor-f{margin-top:12px;border-top-color:var(--ok)}
.setor-f-kepala{display:flex;justify-content:space-between;align-items:center;gap:8px}
.setor-slip{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.setor-slip .hint.err{color:var(--red)}

/* v2.86.35: tempahan tak hadir — lewat 30 min, butang WhatsApp, peringatan esok, susulan */
#l-tmp .ltm-b.lewat30{border-left-color:var(--red);background:color-mix(in srgb,var(--red) 6%,var(--bg))}
#l-tmp .ltm-tindak{grid-column:1/-1;display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;align-items:center}
#l-tmp .ltm-tindak .btn{grid-column:auto;grid-row:auto}
#l-tmp .ltm-ingat-bil{font-size:12px;color:var(--muted);font-weight:600}
#l-tmp .ltm-ingat-nota{margin:0 0 8px}
.ltm-sus{border:0;cursor:pointer;font:inherit;font-size:12px}
.tk-sus{margin-bottom:12px;border-left:4px solid var(--red)}
.tk-sus h3{display:flex;gap:8px;align-items:baseline;margin:0 0 4px}
.tk-sus-l{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.tk-sus-l li{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:var(--bg)}
.tk-sus-l .rowbtns{margin-left:auto}
@media (max-width:520px){#l-tmp .ltm-tindak{justify-content:flex-start}.tk-sus-l .rowbtns{margin-left:0}}

/* v2.86.36: Bil bulanan & PNL Anggaran / Sebenar / Beza */
.stmt td.st-a,.stmt td.st-b{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--muted);padding-left:10px;white-space:nowrap}
.stmt td:nth-child(3){text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums;padding-left:10px;white-space:nowrap}
.stmt tr.st-kepala td{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);font-family:inherit}
.stmt .st-ang{font-size:11px;color:var(--warn)}
#st-status .apa{margin:0 0 10px}
.bil-hari{width:4.5em}
.bil-t td.rowbtns{display:flex;gap:6px;flex-wrap:wrap}
.bil-f{margin-top:12px;border-top-color:var(--ok)}
.bil-f-kepala{display:flex;justify-content:space-between;align-items:center;gap:8px}
.bil-slip{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.bil-slip .hint.err{color:var(--red)}
@media (max-width:520px){.stmt td.st-a,.stmt td.st-b{font-size:12px}}
.stmt tr.tot{display:table-row;max-width:none;margin:0}
#view-pnl details[data-lipat="penyata"]{grid-column:1/-1}

/* v2.86.38: senarai susulan & hasil WhatsApp tempahan — susun atur seragam (plat · nama & butiran · status / butang) */
.tk-sus-l li,.tk-wa-l li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:6px 12px;align-items:center}
.tk-sus-l li .plate,.tk-wa-l li .plate{align-self:start;margin-top:2px}
.tk-i{min-width:0}.tk-i b{display:block;overflow-wrap:anywhere}.tk-i .sm{margin-top:2px;display:flex;flex-wrap:wrap;gap:4px 6px;align-items:center}
.tk-b{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;align-items:center}
.tk-sus-l .rowbtns{margin-left:0}
.tk-wa{margin-bottom:12px}
.tk-wa>summary{display:flex;align-items:center;gap:10px;cursor:pointer;list-style:none;min-height:44px;flex-wrap:wrap}
.tk-wa>summary::-webkit-details-marker{display:none}.tk-wa>summary h3{margin:0}
.tk-wa-r{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:8px 0 12px}
.tk-wa-r .k{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}.tk-wa-r b{font-size:20px;font-family:var(--mono)}
.tk-wa-l{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.tk-wa-l li{padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:var(--bg)}
.tk-kotak{border:1px solid var(--line);border-radius:14px;background:var(--panel,var(--bg));color:var(--ink);padding:0;width:min(560px,calc(100vw - 32px))}
.tk-kotak::backdrop{background:rgba(0,0,0,.55)}
.tk-kotak-f{display:flex;flex-direction:column;gap:10px;padding:16px}
.tk-kotak-k{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.tk-kotak textarea{width:100%;font:14px var(--body);padding:10px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink);resize:vertical}
.tpl-wa{margin-top:6px}
@media (max-width:520px){
  .tk-sus-l li,.tk-wa-l li{grid-template-columns:auto minmax(0,1fr)}
  .tk-b{grid-column:1/-1;justify-content:flex-start}
  .tk-wa-r{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Tracker › Keputusan: hasil Blaster ikut kempen, akaun & tarikh */
#rm-tab{flex-wrap:wrap}
.kp-tapis{display:grid;gap:10px}
.kp-julat{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.kp-julat button{min-width:0}
.kp-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px 12px}
.kp-grid .fl{min-width:0}
.kp-grid input,.kp-grid select{width:100%;min-width:0}
.kp-tiles{grid-template-columns:repeat(3,minmax(0,1fr));margin:12px 0}
.kp-tiles .tile.kosong{opacity:.55}
.kp-senarai{display:grid;gap:12px}
.kp-kad{padding:12px}
.kp-kad-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.kp-kad-h .sm{flex-basis:100%;color:var(--muted)}
.kp-t td,.kp-t th{white-space:nowrap}
.kp-kosong{padding:16px}
@media (max-width:720px){.kp-grid{grid-template-columns:1fr 1fr}.kp-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* v2.86.40: kos beli — senarai kos kosong dalam PNL, lajur kos di telefon */
.kos-kosong>summary{cursor:pointer;list-style:none}.kos-kosong>summary::-webkit-details-marker{display:none}
.kos-kosong>summary b{margin-left:6px;text-decoration:underline}
.kos-l{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.kos-l li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;align-items:center;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:var(--bg)}
.kos-i b{display:block;overflow-wrap:anywhere}.kos-f{display:flex;gap:6px;align-items:center}.kos-f input{width:9em}
.items input.kos-tiada{border-color:var(--red);background:color-mix(in srgb,var(--red) 8%,transparent)}
@media (max-width:520px){.kos-l li{grid-template-columns:1fr}.kos-f input{flex:1;width:auto}}

/* Tracker › Log: sejarah penghantaran setiap akaun WhatsApp */
#lg-cari{width:100%}
.lg-ring{display:grid;gap:6px;margin:12px 0}
.lg-ring-j b{font-size:22px}
.lg-cip{display:flex;flex-wrap:wrap;gap:6px}
.lg-cip .pill{display:inline-flex;align-items:center;gap:6px}
.lg-senarai{display:grid;gap:8px}
.lg-b{border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:var(--surface);min-width:0}
.lg-b-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.lg-ak{margin-left:auto;font-size:12px;color:var(--muted)}
.lg-b-k{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-top:6px}
.lg-st{margin-left:auto;font-size:13px}
.lg-b-m{margin-top:6px;font-size:13px;color:var(--muted);white-space:pre-wrap;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* v2.86.42: Parts & Stock — kos belum diisi */
.i-kos{margin-bottom:12px;border-left:4px solid var(--red)}
.i-kos>summary{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;min-height:44px}
.i-kos>summary b{text-decoration:none;margin-left:0}

/* v2.86.43: Home — Kos & kewangan perlu diisi (admin / foreman / pemilik) */
#u-kos:empty{display:none}
.u-kos-kad{margin:0 0 14px}
.u-kos-k{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.u-kos-l{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.u-kos-l li{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:6px 12px;align-items:center;padding:10px 12px;border:1px solid var(--line);border-left:4px solid var(--warn);border-radius:10px;background:var(--bg)}
.u-kos-i b{display:block}.u-kos-i .sm{margin-top:2px;overflow-wrap:anywhere}
.u-kos-n{font-family:var(--mono);font-weight:700;font-size:18px;min-width:2ch;text-align:right}
.u-kos-nota{margin-top:8px}
@media (max-width:520px){.u-kos-l li{grid-template-columns:minmax(0,1fr) auto}.u-kos-l li .btn{grid-column:1/-1;justify-self:start}}

/* v2.86.47: Tetapan → Eksport data (pemilik) — satu baris setiap jenis data borang, dikumpul ikut jabatan */
.ek-atas{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;margin:4px 0 2px}
.ek-atas label{display:flex;gap:6px;align-items:center}
.ek-atas input{min-width:0}
.ek-senarai{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px;margin-top:10px}
.ek-kump{border:1px solid var(--line);border-radius:var(--r,10px);background:var(--surface);padding:8px 10px}
.ek-kump h3{margin:2px 0 6px;font:700 13px var(--body);text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.ek-baris{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 0;border-top:1px solid var(--line)}
.ek-kump h3+.ek-baris{border-top:0}
.ek-t{display:grid;gap:1px;min-width:0}
.ek-t b{font-size:14px}
.ek-t small{color:var(--muted);font-size:12px}
.ek-baris .btn{flex:none;white-space:nowrap}
.ek-sedang{opacity:.6;cursor:progress}
@media (max-width:640px){
  .ek-senarai{grid-template-columns:minmax(0,1fr)}
  .ek-atas{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .ek-atas label{display:grid;grid-template-columns:auto minmax(0,1fr)}
  .ek-atas .btn{grid-column:1/-1;justify-content:center}
}

/* v2.86.48: notis versi baharu — kad kecil, tidak menghalang skrin, tiada kiraan paksa */
.versi-notis{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(env(safe-area-inset-bottom,0px) + 18px);z-index:70;width:min(420px,calc(100vw - 24px));background:var(--surface);color:var(--ink);border:1px solid var(--line);border-left:4px solid var(--ok,#16a34a);border-radius:12px;box-shadow:0 8px 28px rgba(0,0,0,.28);padding:12px 14px}
.versi-notis p{margin:0 0 6px}.versi-notis .rowbtns{margin-top:8px;gap:8px}
@media (max-width:1023px){.versi-notis{bottom:calc(var(--bnav-h,64px) + env(safe-area-inset-bottom,0px) + 12px)}}


/* v2.86.51: awan ucapan Tuan AJ (sambutan, reaksi peristiwa, mood) — ikut kepala maskot, saiz ikut teks */
.aj-awan{position:fixed;z-index:38;max-width:280px;padding:9px 13px;border-radius:18px;background:var(--surface);color:var(--ink);border:2px solid var(--ink);
  box-shadow:0 8px 22px rgba(0,0,0,.22);font:600 14px/1.35 var(--body);cursor:pointer;pointer-events:auto}
.aj-awan[hidden]{display:none}
.aj-awan::after{content:"";position:absolute;left:calc(var(--ekor-x,50%) - 7px);width:12px;height:12px;background:var(--surface);border:2px solid var(--ink);transform:rotate(45deg)}
.aj-awan[data-ekor="bawah"]::after{bottom:-8px;border-top:0;border-left:0}
.aj-awan[data-ekor="atas"]::after{top:-8px;border-bottom:0;border-right:0}
.aj-awan>span{position:relative;z-index:1}
.aj-awan.aj-gerak{animation:aj-muncul .32s cubic-bezier(.2,.9,.3,1.25)}
@keyframes aj-muncul{from{opacity:0;transform:translateY(6px) scale(.9)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.aj-awan{animation:none!important}}

/* v2.86.55: Mod Developer AJ — senarai tugasan agen kod */
.ac-dev-l2{display:grid;gap:10px;padding:0 16px 16px}
.ac-dev-t{border:1px solid var(--line);border-left:4px solid var(--info);border-radius:10px;padding:10px 12px;display:grid;gap:6px}
.ac-dev-k{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.ac-dev-a{white-space:pre-wrap;overflow-wrap:anywhere}
.ac-dev-t .rowbtns{gap:8px;align-items:center;flex-wrap:wrap}

/* ================= v2.86.57: tema moden ringkas (html.moden) =================
   Ikut tetapan telefon: mod cerah = putih (siang), mod gelap = gelap kebiruan (malam).
   Kad rata bersudut bulat, sempadan halus, butang rata; kad jualan ada peta dunia bertitik
   + titik berkelip di Malaysia, Singapura & Brunei. */
html.moden:root{--bg:#f6f7f9;--surface:#ffffff;--ink:#111418;--muted:#667085;--line:#e7e9ee;
  --red:#e0313c;--red-soft:#fdecee;--ok:#16794a;--ok-soft:#e5f5ec;--warn:#a35d00;--warn-soft:#fdf2e1;--info:#2759b8;--info-soft:#e8effb;
  --side:#ffffff;--side-ink:#111418;--side-muted:#667085;--side-hover:rgba(17,20,24,.05);--side-on:rgba(224,49,60,.09);--shadow:none;--r:14px;
  --bnav-bg:rgba(255,255,255,.88);--kad-bayang:0 1px 2px rgba(16,24,40,.04),0 4px 14px -8px rgba(16,24,40,.08);color-scheme:light}
@media (prefers-color-scheme:dark){html.moden:root:not([data-theme="light"]){--bg:#0d0f13;--surface:#151920;--ink:#eef1f5;--muted:#97a0ad;--line:#242a33;
  --red:#f0505a;--red-soft:#33181c;--ok:#4cc27f;--ok-soft:#173225;--warn:#e9a640;--warn-soft:#3a2c14;--info:#7aa7ee;--info-soft:#1a2740;
  --side:#0a0c10;--side-ink:#eef1f5;--side-muted:#8a93a0;--side-hover:rgba(255,255,255,.05);--side-on:rgba(240,80,90,.14);
  --bnav-bg:rgba(21,25,32,.88);--kad-bayang:0 1px 2px rgba(0,0,0,.2),0 8px 24px -16px rgba(0,0,0,.5);color-scheme:dark}}
html.moden:root[data-theme="dark"]{--bg:#0d0f13;--surface:#151920;--ink:#eef1f5;--muted:#97a0ad;--line:#242a33;
  --red:#f0505a;--red-soft:#33181c;--ok:#4cc27f;--ok-soft:#173225;--warn:#e9a640;--warn-soft:#3a2c14;--info:#7aa7ee;--info-soft:#1a2740;
  --side:#0a0c10;--side-ink:#eef1f5;--side-muted:#8a93a0;--side-hover:rgba(255,255,255,.05);--side-on:rgba(240,80,90,.14);
  --bnav-bg:rgba(21,25,32,.88);--kad-bayang:0 1px 2px rgba(0,0,0,.2),0 8px 24px -16px rgba(0,0,0,.5);color-scheme:dark}
html.moden body{background:var(--bg);color:var(--ink)}
html.moden :is(.card,.tile,.panel,.target,.tablewrap,form.grid,.sec>.sec-k){border-radius:16px;border:1px solid var(--line);box-shadow:var(--kad-bayang);background:var(--surface);background-image:none}
html.moden .card{overflow:hidden}
html.moden .btn{border-radius:10px;box-shadow:none;background-image:none;transition:background-color .15s,border-color .15s,transform .1s}
html.moden .btn:not(.primary):not(.danger){background:var(--surface);border-color:var(--line);color:var(--ink)}
html.moden .btn:not(.primary):hover{background:color-mix(in srgb,var(--ink) 5%,var(--surface))}
html.moden .btn.primary{background:var(--red);border-color:var(--red);color:#fff;box-shadow:none}
html.moden .btn:active:not(:disabled){transform:translateY(1px)}
html.moden .pill{border-radius:999px}
html.moden input,html.moden select,html.moden textarea{border-radius:10px}
html.moden .u-n{border-radius:12px;box-shadow:none;text-shadow:none}
html.moden .side{border-right:1px solid var(--line)}
html.moden .side-brand{border-bottom-color:var(--line)}
html.moden .side-brand .logo,html.moden .side-nama,html.moden .side-who{color:var(--side-ink)}
html.moden nav.tabs button[aria-selected="true"]{color:var(--red)}
html.moden .side-user{border-top-color:var(--line)}
html.moden .bnav{background:var(--bnav-bg);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--line)}
/* kad jualan (Home & P&L): peta dunia bertitik; Malaysia jatuh pada titik sauh (--ax, --ay) — KL = 78.25% lebar, 55.48% tinggi peta */
html.moden .tg-kad{--pw:1100px;--ax:84%;--ay:56%;background:var(--surface)}
html.moden .tg-kad::before{content:"";position:absolute;z-index:0;pointer-events:none;width:var(--pw);height:calc(var(--pw) / 2);
  left:calc(var(--ax) - var(--pw) * .7825);top:calc(var(--ay) - var(--pw) * .2774);background:url(/icons/peta-dunia.svg) center/100% 100% no-repeat}
/* titik berkelip (CSS — berfungsi di semua telefon): Kuala Lumpur, Singapura, Bandar Seri Begawan */
html.moden .tg-kad::after{content:"";position:absolute;z-index:0;pointer-events:none;left:var(--ax);top:var(--ay);width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;
  background:var(--red);box-shadow:calc(var(--pw) * .005917) calc(var(--pw) * .004917) 0 0 var(--red),calc(var(--pw) * .03675) calc(var(--pw) * -.005) 0 0 var(--red);
  animation:scs-kelip 1.4s ease-in-out infinite}
@keyframes scs-kelip{0%,100%{opacity:1}50%{opacity:.15}}
@media (prefers-reduced-motion:reduce){html.moden .tg-kad::after{animation-duration:3s}}
@media (max-width:720px){html.moden .tg-kad{--pw:620px;--ax:80%;--ay:19%}}
html.moden .tg-kad .tg-graf{opacity:.6}

/* v2.86.58: Mod Developer dalam chat maskot Tuan AJ (developer sahaja) */
.ait-mod-dev .ait-ikon{background:var(--info)}
.ait-dev-alu .rowbtns{gap:8px;flex-wrap:wrap}
.ait-senarai .ac-dev-t{background:var(--surface)}
.ait-senarai .ac-dev-t .rowbtns{gap:8px;align-items:center;flex-wrap:wrap}
/* v2.86.74: Mod Developer lebih tersusun — kepala ringkas, kad dengan butang padam, fail sebagai cip, sebab gagal boleh dilipat */
.ait-dev-alu p{margin:0 0 6px;font-size:14px}
.ait-dev-ring{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px}
.ait-dev-ring span{border:1px solid var(--line);border-radius:999px;padding:2px 10px;background:var(--surface)}
.ait-dev-alat{display:flex;gap:6px}
.ait-dev-alat .btn{flex:1 1 0;min-width:0;padding-left:6px;padding-right:6px;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ait-senarai .ait-dev-t{gap:8px;padding:10px 12px 12px}
.ait-dev-t .ac-dev-k{gap:6px;flex-wrap:nowrap;min-width:0}
.ait-dev-t .ac-dev-k b{font-family:var(--mono,ui-monospace,monospace);font-size:13px}
.ait-dev-masa{margin-left:auto;white-space:nowrap;color:var(--muted)}
.ait-dev-padam{flex:none;width:32px;height:32px;border-radius:8px;border:1px solid var(--line);background:transparent;color:var(--muted);cursor:pointer;font-size:15px;line-height:1}
.ait-dev-padam:hover,.ait-dev-padam:focus-visible{border-color:var(--red);color:var(--red);background:color-mix(in srgb,var(--red) 10%,transparent)}
.ait-dev-padam:disabled{opacity:.5}
.ait-dev-t .ac-dev-a{font-weight:600;line-height:1.45;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.ait-dev-fail{display:flex;flex-wrap:wrap;gap:4px}
.ait-dev-fail span{font:12px/1.4 var(--mono,ui-monospace,monospace);background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:1px 6px;color:var(--muted)}
.ait-dev-ralat{border:1px solid color-mix(in srgb,var(--red) 35%,var(--line));background:color-mix(in srgb,var(--red) 7%,transparent);border-radius:8px;padding:6px 10px}
.ait-dev-ralat summary{cursor:pointer;color:var(--red);font-size:13px;font-weight:600}
.ait-dev-ralat .sm{margin-top:6px;overflow-wrap:anywhere;max-height:9em;overflow:auto}
.ait-dev-t .rowbtns{border-top:1px solid var(--line);padding-top:8px}
.ait-dev-t .rowbtns a{font-size:13px}
.ait-dev-t.ait-st-gagal{border-left-color:var(--red)}
.ait-dev-t.ait-st-digabung{border-left-color:var(--green,#2e9d5b)}
.ait-dev-t.ait-st-dibatal{border-left-color:var(--muted);opacity:.85}
.ait-dev-t.ait-st-sedia{border-left-color:var(--info)}

/* v2.86.60: peta hidup kad jualan (js/peta.js + icons/peta-hidup.svg) — zoom ke Malaysia (14 negeri berkelip) & keluar (3 negara), 5 s */
html.moden .tg-kad:has(> .peta-hidup)::before,html.moden .tg-kad:has(> .peta-hidup)::after{content:none}
html.moden .tg-kad>.peta-hidup,.tg-kad>.peta-hidup{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;border-radius:inherit}
.peta-hidup svg{display:block;width:100%;height:100%}
.peta-hidup .pd{fill:none;stroke:#8b93a1;stroke-opacity:.55;stroke-width:2.6px;stroke-linecap:round} /* v2.86.61: lebih terang */
.peta-hidup .pm-isi{fill:var(--red);fill-opacity:.18}
.peta-hidup .pm-garis{fill:none;stroke:var(--red);stroke-width:1.6px;stroke-linejoin:round}
.peta-hidup .pm-jiran{fill:none;stroke:var(--muted);stroke-opacity:.55;stroke-width:1px;stroke-linejoin:round}
.peta-hidup .pn,.peta-hidup .p3,.peta-hidup .p3c{fill:var(--red)}

/* v2.86.63: menu tepi berlatar kaca seperti Meeting room — separa telus + blur; teks kekal jelas */
html.moden .side{background:color-mix(in srgb,var(--side) 62%,transparent);-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);border-right:1px solid color-mix(in srgb,var(--line) 70%,transparent)}
html.moden .side-bg{background:rgba(0,0,0,.28)}
html.moden .side-brand .logo.logo-ada{background:transparent;padding:0}
html.moden .side-brand .logo.logo-ada img{max-height:34px;max-width:96px}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){html.moden .side{background:var(--side)}}

/* v2.86.64: latar peta bersambung log masuk ↔ Home (js/latar.js) — latar awam sahaja, kamera = viewBox SVG vektor */
#peta-latar{position:fixed;inset:0;z-index:-1;background:var(--bg);overflow:hidden;transition:opacity .55s ease}
#peta-latar svg{display:block;width:100%;height:100%}
#peta-latar::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at center,color-mix(in srgb,var(--bg) 45%,transparent) 0%,transparent 65%)}
#peta-latar.pudar{opacity:0}
body.latar-awam .auth{background:color-mix(in srgb,var(--surface) 82%,transparent);-webkit-backdrop-filter:blur(10px) saturate(1.3);backdrop-filter:blur(10px) saturate(1.3);box-shadow:0 20px 60px -30px rgba(0,0,0,.45);transition:opacity .35s ease,transform .35s ease}
body.kad-keluar .auth{opacity:0;transform:scale(.97) translateY(6px);pointer-events:none}
body.kad-tunggu .auth{opacity:0;transform:translateY(8px)}
body.latar-awam #screen-app{transition:opacity .45s ease}
body.app-masuk #screen-app{opacity:0}
body.app-keluar #screen-app,body.sedang-keluar #screen-app{opacity:0;pointer-events:none;transition:opacity .35s ease}
#l-btn.memuat{opacity:.75;cursor:progress}
@media (prefers-reduced-motion:reduce){#peta-latar,body.latar-awam .auth,body.latar-awam #screen-app{transition-duration:.15s}body.kad-keluar .auth,body.kad-tunggu .auth{transform:none}}
@media (min-width:2400px){.auth{max-width:640px;padding:40px;gap:20px;font-size:19px}.auth .logo{font-size:76px}.auth h1{font-size:34px}.auth input,.auth select,.auth .btn{font-size:19px;padding:14px 16px}}
/* latar peta log masuk: gaya peta-hidup dengan kamera skrip (--mz = 0 dunia → 1 Malaysia) */
#peta-latar .pd{fill:none;stroke:#8b93a1;stroke-opacity:.6;stroke-width:max(2.4px,.17vw);stroke-linecap:round} /* titik ikut saiz skrin (tajam & jelas pada 4K) */
#peta-latar .pm{opacity:var(--mz,0)}
#peta-latar .pm-isi{fill:var(--red);fill-opacity:.16}
#peta-latar .pm-garis{fill:none;stroke:var(--red);stroke-width:1.8px;stroke-linejoin:round}
#peta-latar .pm-jiran{fill:none;stroke:var(--muted);stroke-opacity:.55;stroke-width:1px}
#peta-latar .pn{fill:var(--red);opacity:var(--mz,0)}
body.latar-mys #peta-latar .pn{animation:scs-kelip 1.2s ease-in-out infinite}
#peta-latar .p3,#peta-latar .p3c{fill:var(--red);opacity:max(0,calc(1 - 2.5 * var(--mz,0)))} /* 3 titik negara hilang awal semasa zoom masuk */
#peta-latar .p3c{opacity:max(0,calc(.45 - 1.1 * var(--mz,0)))}

/* v2.86.65: kunci skrol berpusat — skrol tidak bersambung ke halaman belakang; lapisan bawah dibekukan */
.drawer,.lulus-m,dialog,nav.tabs,.mt-senarai,.mt-stkp,.ait-senarai,.side{overscroll-behavior:contain}
.drawer{-webkit-overflow-scrolling:touch}
.skrol-beku{pointer-events:none}
html.kunci-skrol{overflow:hidden}
/* lapisan Meeting room / panel AI yang dibekukan turun ke bawah drawer yang dibuka kemudian */
.mt-panel.skrol-beku,.ait-panel.skrol-beku{z-index:40}

/* v2.86.65: popup amaran Tuan AJ (js/ajamaran.js) — tengah, ikon segi tiga "!", kuning = perhatian, merah = kritikal */
.amaran-bg{position:fixed;inset:0;z-index:2147483000;background:rgba(10,14,20,.42);opacity:0;transition:opacity .25s ease}
.amaran-bg.masuk{opacity:1}
.amaran-m{--am:#b26a00;--am-bg:#fff7e6;position:fixed;left:50%;top:50%;z-index:2147483001;width:min(420px,calc(100vw - 32px));max-height:min(560px,calc(100dvh - 48px));display:flex;flex-direction:column;background:var(--surface,#fff);color:var(--ink,#111);border-radius:18px;border-top:5px solid var(--am);box-shadow:0 24px 70px -20px rgba(0,0,0,.5);opacity:0;transform:translate(calc(-50% + var(--am-ox,0px)),calc(-50% + var(--am-oy,0px))) scale(.18);transition:opacity .28s ease,transform .32s cubic-bezier(.2,.9,.3,1.1)}
.amaran-m.am-merah{--am:#c62828;--am-bg:#fdecec}
.amaran-m.masuk{opacity:1;transform:translate(-50%,-50%) scale(1)}
.amaran-m.ke-maskot{opacity:0;transform:translate(calc(-50% + var(--am-ox,0px)),calc(-50% + var(--am-oy,0px))) scale(.12);transition:opacity .3s ease,transform .3s ease-in}
.amaran-m.keluar{opacity:0;transform:translate(-50%,-50%) scale(.96)}
.am-isi{overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:22px 22px 8px;text-align:center}
.am-ikon{width:64px;height:58px;color:var(--am);display:block;margin:0 auto 10px}
.am-tajuk{margin:0 0 8px;font-size:17px;letter-spacing:.02em;color:var(--am)}
.am-teks p{margin:0 0 8px;line-height:1.5;font-size:14.5px}
.am-cadangan{background:var(--am-bg);color:#3a2a00;border-radius:10px;padding:8px 10px;font-weight:600}
.am-merah .am-cadangan{color:#5a1010}
.am-butiran{margin:6px 0 4px;text-align:left;font-size:13px}
.am-butiran summary{cursor:pointer;color:var(--muted,#666);text-align:center}
.am-butiran p{margin:6px 0 0;padding:8px 10px;border-radius:8px;background:color-mix(in srgb,var(--ink,#111) 6%,transparent);word-break:break-word}
.am-aksi{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;padding:12px 18px 18px;border-top:1px solid color-mix(in srgb,var(--ink,#111) 8%,transparent);flex:none}
.am-aksi .btn{flex:1 1 140px;min-height:44px}
.am-merah .am-aksi .btn.primary{background:#c62828;border-color:#c62828;color:#fff}
.amaran-m:not(.am-merah) .am-aksi .btn.primary{background:#b26a00;border-color:#b26a00;color:#fff}
.am-penunjuk{position:absolute;top:-4px;left:-4px;min-width:22px;height:22px;border-radius:11px;display:grid;place-items:center;font:700 14px/1 system-ui,sans-serif;color:#fff;background:#b26a00;border:2px solid var(--surface,#fff);cursor:pointer;z-index:2}
.am-penunjuk.am-merah{background:#c62828}
@media (prefers-color-scheme:dark){.amaran-m{--am-bg:rgba(255,183,77,.14)}.amaran-m.am-merah{--am-bg:rgba(239,83,80,.16)}.am-cadangan,.am-merah .am-cadangan{color:inherit}.amaran-m{--am:#ffb74d}.amaran-m.am-merah{--am:#ef5350}}
@media (prefers-reduced-motion:reduce){.amaran-m,.amaran-m.masuk,.amaran-m.ke-maskot,.amaran-m.keluar{transition:opacity .12s linear;transform:translate(-50%,-50%)}}
/* Tuan AJ — notifikasi chat-head (js/ajnotis.js): popup keluar / masuk semula ke AJ, loceng + badge, sejarah, persediaan */
.ajn-btn{position:relative}
.ajn-badge{position:absolute;top:-3px;right:-4px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--red);color:#fff;font:700 11px/18px var(--body);text-align:center;box-shadow:0 0 0 2px var(--bg)}
.ajn-denyut{animation:ajnDenyut .9s ease-out 2}
@keyframes ajnDenyut{0%{transform:scale(1)}30%{transform:scale(1.18)}60%{transform:scale(.96)}100%{transform:scale(1)}}
#ajnPop,#ajnSedia{position:fixed;z-index:85;will-change:transform,opacity}
#ajnSedia{right:12px;bottom:calc(env(safe-area-inset-bottom,0px) + 96px);width:min(360px,calc(100% - 24px))}
@media (min-width:1024px){#ajnSedia{bottom:24px}}
.ajn-kad{background:linear-gradient(var(--surface),var(--surface)),var(--bg);color:var(--ink);border:1px solid var(--line);border-top:3px solid var(--red);border-radius:14px;padding:12px 14px;box-shadow:0 18px 40px -12px rgba(0,0,0,.45)}
.ajn-kepala{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.ajn-siapa{display:flex;flex-direction:column;min-width:0;flex:1}
.ajn-siapa b{font-size:13px}
.ajn-av{flex:0 0 auto;width:38px;height:38px;border-radius:50%;background:var(--bg) url(/icons/mekanik/mekanik-pose.webp) no-repeat;background-size:280% 490%;background-position:100% 42%;border:2px solid var(--red)}
.ajn-x{flex:0 0 auto;width:30px;height:30px;border-radius:50%;border:1px solid var(--line);background:var(--bg);color:var(--ink);font-size:18px;line-height:1;cursor:pointer}
.ajn-x:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.ajn-tajuk{font-weight:700;font-size:15px;margin:2px 0 4px}
.ajn-isi{font-size:14px;color:var(--ink);margin-bottom:6px;overflow-wrap:anywhere}
.ajn-aksi{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
#ajnPanel{position:fixed;inset:0;z-index:86}
#ajnPanel .drawer-bg{z-index:0}
.ajn-p{position:absolute;top:0;right:0;bottom:0;width:min(460px,100%);overflow-x:hidden;background:var(--bg);background-color:var(--bg);overflow-y:auto;padding:calc(env(safe-area-inset-top,0px) + 14px) 16px calc(env(safe-area-inset-bottom,0px) + 24px);box-shadow:-8px 0 30px rgba(0,0,0,.3)}
.ajn-p-h{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.ajn-p-h>div{flex:1}
.ajn-p-h h2{margin:0;font-size:18px}
.ajn-seg{margin-bottom:8px}
.ajn-p-aksi{margin-bottom:8px}
.ajn-rem-f{border:1px solid var(--line);border-radius:10px;padding:10px;margin-bottom:10px;background:var(--surface)}
.ajn-sen{list-style:none;margin:0 0 12px;padding:0}
.ajn-sen li{display:flex;gap:10px;padding:10px 4px;border-bottom:1px solid var(--line)}
.ajn-sen li.ajn-belum{background:color-mix(in srgb,var(--red) 6%,transparent);border-left:3px solid var(--red);padding-left:8px}
.ajn-sen li.ajn-belum b{font-weight:800}
.ajn-ik{font-size:20px;line-height:1.2}
.ajn-sen-isi{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.ajn-tet{border:1px solid var(--line);border-radius:10px;padding:10px;background:var(--surface)}
.ajn-tet summary{cursor:pointer}
.ajn-status{margin:8px 0}
.ajn-st{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:4px 0;font-size:14px}
.ajn-panduan{background:var(--bg);border-left:3px solid var(--red);padding:8px 10px;border-radius:6px}
.ajn-cek{display:flex;align-items:center;justify-content:flex-start;gap:10px;margin:10px 0;font-size:14px;width:auto}
.ajn-cek input{width:auto;min-width:0;flex:0 0 auto;margin:0;height:18px;width:18px}
.ajn-cek span{flex:1;text-align:left}
.ajn-senyap{display:grid;grid-template-columns:1fr 1fr;gap:8px}
@media (prefers-reduced-motion:reduce){.ajn-denyut{animation:none}}

/* v2.86.67: logo PNG — log masuk: besar di tengah; menu tepi: kemas sebaris dengan nama; "bingkai" halus pada tulisan logo supaya tidak tenggelam pada latar */
.auth .logo{justify-self:center;margin:4px 0 2px}
.auth .logo.logo-ada img{width:min(250px,64vw);max-width:none;max-height:120px}
.auth h1,.auth>p{text-align:center}
.auth>p{margin-top:-6px}
.auth h1{padding-top:12px;border-top:1px solid var(--line)}
.logo.logo-ada img{filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.18))}
html.moden .side-brand{display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px 8px;padding:8px 12px 16px}
html.moden .side-brand .logo{justify-self:start}
html.moden .side-brand .logo.logo-ada img{height:38px;max-height:none;width:auto;max-width:170px}
html.moden .side-brand>div:not(.logo){grid-column:1 / -1;grid-row:2;min-width:0;padding-top:10px;border-top:1px solid var(--line)}
html.moden .side-brand .side-nama{font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.moden .side-brand .logo-sub{margin-top:3px;font-size:10px;white-space:nowrap}
html.moden .side-brand .iconbtn{grid-column:2;grid-row:1;margin-left:0}
@media (prefers-color-scheme:dark){
  .logo.logo-ada img{filter:drop-shadow(1px 0 0 rgba(255,255,255,.9)) drop-shadow(-1px 0 0 rgba(255,255,255,.9)) drop-shadow(0 1px 0 rgba(255,255,255,.9)) drop-shadow(0 -1px 0 rgba(255,255,255,.9)) drop-shadow(0 0 8px rgba(255,255,255,.18))}
}
.auth .pautan-lupa{justify-self:center;text-align:center}
.auth #l-msg:empty{display:none}

/* v2.86.68: ranking prestasi mekanik — badge emas/perak/gangsa, trend dengan anak panah + nilai (bukan warna sahaja) */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.pr-kepala{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.pr-kepala input[type=search]{max-width:240px;flex:1 1 180px}
.pr-rank th,.pr-rank td{vertical-align:middle}
.pr-rank td.num,.pr-rank th.num{text-align:right;font-variant-numeric:tabular-nums}
.pr-rk{width:62px;white-space:nowrap}
.rk{display:inline-grid;place-items:center;min-width:30px;height:30px;padding:0 6px;border-radius:15px;font:800 14px/1 var(--body);border:2px solid transparent}
.rk-emas{background:linear-gradient(135deg,#ffe58a,#e0a800);color:#4a3400;border-color:#c99400}
.rk-perak{background:linear-gradient(135deg,#f3f4f6,#b7bcc4);color:#2b2f36;border-color:#9aa0a9}
.rk-gangsa{background:linear-gradient(135deg,#f6c39a,#b8682e);color:#3d1d06;border-color:#a65a25}
.rk-biasa{background:var(--surface);color:var(--ink);border-color:var(--line)}
.rk-tiada{background:transparent;color:var(--muted);border:2px dashed var(--line)}
.rk-seri{display:block;margin-top:2px;font-size:10.5px;text-align:center}
.pr-rank tr.atas td.pr-rk{box-shadow:inset 3px 0 0 #e0a800}
.pr-skor b{font-size:15px}
.pr-bar{height:6px;margin-top:4px;min-width:60px}
.pr-bar i{background:var(--ink)}
.tr{font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}
.tr-naik{color:#15803d}.tr-turun{color:#b91c1c}.tr-kekal{color:var(--muted)}
.pr-cad{min-width:150px;max-width:230px}
.pr-rank td:nth-child(2){min-width:130px}
.pr-rank td:nth-child(8) .pill{white-space:normal;line-height:1.3;display:inline-block;max-width:120px}
.pr-skor .sm{white-space:normal;display:inline-block;max-width:90px;line-height:1.3}
.pr-rank th{white-space:nowrap}
.pr-cad .btn{margin-top:2px}
.pr-cad .sm{display:block;margin-bottom:4px}
.pr-nasihat-r td{background:color-mix(in srgb,var(--ink) 3%,transparent)}
.pr-cara{margin-top:12px}
.pr-cara summary,.pr-jualan>summary{cursor:pointer;font-weight:700}
.pr-cara ul{margin:6px 0;padding-left:18px}
.aj-nasihat{margin-top:14px;border:1px solid var(--line);border-left:4px solid #e0a800;border-radius:10px;padding:10px 12px;background:var(--surface)}
.aj-n-h{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:6px}
.aj-nasihat ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.aj-nasihat li{padding:8px 10px;border-radius:8px;background:color-mix(in srgb,var(--ink) 4%,transparent);display:grid;gap:3px;font-size:13.5px;line-height:1.45}
.aj-n-l{display:inline-block;min-width:92px;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.aj-n-had{margin-top:8px}
@media (prefers-color-scheme:dark){.tr-naik{color:#4ade80}.tr-turun{color:#f87171}}
/* telefon: jadual ranking jadi kad tersusun */
@media (max-width:720px){
  .tablewrap:has(> .pr-rank){overflow:visible}
  .pr-rank{min-width:0!important;width:100%!important}
  .pr-rank tr{width:100%}
  .pr-rank td{min-width:0!important;max-width:none!important;width:auto!important;box-shadow:none!important}
  .pr-rank tr.atas{box-shadow:inset 3px 0 0 #e0a800}
  .pr-rank .rk-seri{margin-top:4px}
  .pr-rank thead{display:none}
  .pr-rank,.pr-rank tbody{display:block}
  .pr-rank tr:not(.pr-nasihat-r){display:grid;grid-template-columns:44px 1fr auto;grid-template-areas:"rk nama skor" "rk kerja trend" "rk sasar sasar" "graf graf graf" "cad cad cad";gap:2px 10px;padding:12px;border-bottom:1px solid var(--line)}
  .pr-rank td{display:block;border:0!important;padding:0!important;text-align:left!important}
  .pr-rank td:nth-child(1){grid-area:rk;align-self:start}
  .pr-rank td:nth-child(2){grid-area:nama}
  .pr-rank td:nth-child(3){grid-area:graf;margin-top:8px!important}
  .pr-rank td:nth-child(4){grid-area:kerja;font-size:12.5px;color:var(--muted)}
  .pr-rank td:nth-child(5){display:none!important}
  .pr-rank td:nth-child(6){grid-area:skor;text-align:right!important}
  .pr-rank td:nth-child(7){grid-area:trend;text-align:right!important}
  .pr-rank td:nth-child(8){grid-area:sasar;margin-top:4px!important}
  .pr-rank td:nth-child(9){grid-area:cad;margin-top:8px!important}
  .pr-rank tr.pr-nasihat-r{display:block}
  .pr-rank tr.pr-nasihat-r td{padding:0 12px 12px!important}
  .pr-cad .sm{display:inline}
}

/* v2.86.68: indikator proses — bahagian dikemas kini, jalur muat semula, kad upload / import / export */
.proses-pusing{display:inline-block;width:14px;height:14px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:ps-pusing .8s linear infinite;vertical-align:-2px;flex:none}
@keyframes ps-pusing{to{transform:rotate(360deg)}}
.proses-muat{display:flex;gap:8px;align-items:center;padding:12px 0}
.dikemas{position:relative}
.dikemas>*:not(.proses-cip){opacity:.62;transition:opacity .2s}
.proses-cip{position:sticky;top:8px;z-index:5;display:flex;width:max-content;gap:8px;align-items:center;margin:0 auto 8px;padding:6px 12px;border-radius:999px;background:var(--ink);color:var(--surface);font-size:13px;font-weight:600;box-shadow:0 6px 18px -8px rgba(0,0,0,.5)}
#prosesJalur{position:fixed;left:0;right:0;top:0;z-index:2147482000;pointer-events:none;transition:opacity .35s}
#prosesJalur.pudar{opacity:0}
.pj-bar{height:3px;background:color-mix(in srgb,var(--red) 18%,transparent);overflow:hidden;position:relative}
.pj-bar i{display:block;height:100%;width:0;background:var(--red);transition:width .3s ease}
.pj-label{position:absolute;top:6px;left:50%;transform:translateX(-50%);padding:3px 10px;border-radius:999px;background:var(--surface);color:var(--ink);border:1px solid var(--line);font-size:12px;font-weight:600;white-space:nowrap;box-shadow:0 4px 12px -6px rgba(0,0,0,.4)}
.tentu-tidak i{width:35%!important;position:absolute;left:0;animation:ps-gelongsor 1.3s ease-in-out infinite}
@keyframes ps-gelongsor{0%{transform:translateX(-110%)}100%{transform:translateX(300%)}}
#prosesTimbun{position:fixed;left:max(12px,env(safe-area-inset-left,0px));bottom:calc(env(safe-area-inset-bottom,0px) + 84px);z-index:2147481000;display:grid;gap:8px;width:min(360px,calc(100vw - 24px))}
#prosesTimbun:empty{display:none}
.proses-kad{background:var(--surface);color:var(--ink);border:1px solid var(--line);border-left:4px solid var(--ink);border-radius:12px;padding:10px 12px;box-shadow:0 14px 36px -18px rgba(0,0,0,.5);display:grid;gap:5px;transition:opacity .25s,transform .25s}
.proses-kad.selesai{border-left-color:#16a34a}
.proses-kad.gagal{border-left-color:#dc2626}
.proses-kad.keluar{opacity:0;transform:translateY(8px)}
.pk-h{display:flex;justify-content:space-between;align-items:center;gap:8px}
.pk-x{background:none;border:0;font-size:20px;line-height:1;cursor:pointer;color:var(--muted);padding:0 4px}
.pk-fail{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pk-status{font-size:13.5px;font-weight:600}
.proses-kad.gagal .pk-status{color:#b91c1c}
.pk-bar{position:relative;height:6px;border-radius:3px;background:var(--line);overflow:hidden}
.pk-bar i{display:block;height:100%;width:0;background:var(--ink);border-radius:3px;transition:width .25s ease}
.proses-kad.selesai .pk-bar i{background:#16a34a}
.proses-kad.gagal .pk-bar i{background:#dc2626}
.pk-kira:empty,.pk-ring:empty,.pk-aksi:empty{display:none}
.pk-ring{display:flex;flex-wrap:wrap;gap:10px;font-size:13px}
.pk-aksi{display:flex;gap:6px;flex-wrap:wrap}
.slot-bar{position:absolute;left:8px;right:8px;bottom:6px;height:4px;border-radius:2px;background:rgba(255,255,255,.35);overflow:hidden}
.slot-bar i{display:block;height:100%;width:0;background:#fff;transition:width .2s}
@media (prefers-color-scheme:dark){.proses-kad.gagal .pk-status{color:#f87171}}
@media (prefers-reduced-motion:reduce){.proses-pusing{animation-duration:2.4s}.tentu-tidak i{animation:none;width:100%!important;opacity:.45}.pj-bar i,.pk-bar i{transition:none}}
/* Butang sedang memproses (v2.86.69, js/butang-muat.js): teks disembunyikan tanpa mengubah saiz, pemutar di tengah */
.btn-muat{--bm:var(--ink);color:transparent!important;cursor:progress!important;text-shadow:none!important}
.btn-muat.primary,.btn-muat.danger.primary{--bm:#fff}
.btn-muat.danger:not(.primary){--bm:var(--red)}
.btn-muat>*{visibility:hidden}
.btn-muat-rel{position:relative}
html .btn-muat.btn-muat.btn-muat::after{content:"";display:block;right:auto;bottom:auto;background:none;transform:none;font-size:0;position:absolute;left:50%;top:50%;width:16px;height:16px;margin:-8px 0 0 -8px;box-sizing:border-box;border-radius:50%;border:2px solid color-mix(in srgb,var(--bm) 28%,transparent);border-top-color:var(--bm);animation:btn-putar .7s linear infinite;pointer-events:none}
html .btn-muat.btn-muat.small::after{width:14px;height:14px;margin:-7px 0 0 -7px}
@keyframes btn-putar{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){html .btn-muat.btn-muat.btn-muat::after{animation:btn-denyut 1.6s ease-in-out infinite}}
@keyframes btn-denyut{50%{opacity:.35}}

/* v2.86.75: mention @nama dalam Meeting room */
.mt-tulis{position:relative}
.mt-sebut-box{position:absolute;left:8px;right:8px;bottom:calc(100% + 6px);z-index:5;display:grid;gap:2px;padding:6px;max-height:260px;overflow-y:auto;overscroll-behavior:contain;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:12px;box-shadow:0 14px 36px -16px rgba(0,0,0,.45)}
.mt-sb{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border:0;border-radius:8px;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer;min-height:44px}
.mt-sb b{font-size:14px}
.mt-sb span:last-child{margin-left:auto;font-size:11.5px;color:var(--muted)}
.mt-sb.aktif,.mt-sb:hover{background:color-mix(in srgb,var(--red) 12%,transparent)}
.mt-sb-av{display:inline-grid;place-items:center;width:28px;height:28px;flex:none;border-radius:50%;background:var(--line);font-size:14px;font-weight:700;overflow:hidden}
.mt-sb-av img{width:100%;height:100%;object-fit:cover}
.mt-sebut{font-weight:700;color:var(--red);background:color-mix(in srgb,var(--red) 10%,transparent);border-radius:5px;padding:0 3px}
.mt-sebut.saya{color:#fff;background:var(--red)}
.mt-m.disebut .mt-isi{box-shadow:0 0 0 2px var(--red) inset}
/* v2.86.77: graf jualan harian dalam Ranking (sasaran sehari = garis menegak; semalam & hari ini = bar) */
.pr-hg{display:grid;gap:4px;min-width:230px}
.pr-hg-s{line-height:1.2}
.pr-hg-r{display:grid;grid-template-columns:62px minmax(70px,1fr) 64px;grid-template-areas:"l b v" ". n n";align-items:center;column-gap:8px;font-size:12.5px}
.pr-hg-l{grid-area:l;color:var(--muted);white-space:nowrap}
.pr-hg-r.kini .pr-hg-l{color:var(--ink);font-weight:700}
.pr-hg-b{grid-area:b;position:relative;height:12px;border-radius:6px;background:color-mix(in srgb,var(--ink) 10%,transparent)}
.pr-hg-b i{position:absolute;inset:0 auto 0 0;border-radius:6px;background:var(--warn)}
.pr-hg-r:not(.kini) .pr-hg-b i{opacity:.7}
.pr-hg-b i.capai{background:var(--ok);opacity:1}
.pr-hg-b s{position:absolute;top:-3px;bottom:-3px;width:2px;margin-left:-1px;background:var(--ink);border-radius:1px}
.pr-hg-v{grid-area:v;text-align:right;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.pr-hg-n{grid-area:n;line-height:1.25}
.pr-hg-n:empty{display:none}
.pr-hg-ok{color:var(--ok);font-weight:700;font-size:12px}
@media (prefers-reduced-motion:no-preference){.pr-hg-b i{transition:width .4s ease}}
@media (max-width:720px){.pr-hg{min-width:0}}

/* v2.86.78: Tetapan → Galeri resit */
.gr-atas{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end;margin:10px 0}
.gr-atas label{display:grid;gap:4px}
.gr-chip{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0}
.gr-c{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:6px 12px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink);font:inherit;font-size:13px;cursor:pointer}
.gr-c b{font-size:11px;min-width:18px;padding:1px 6px;border-radius:9px;background:var(--line)}
.gr-c.on{background:var(--ink);color:var(--surface);border-color:var(--ink)}
.gr-c.on b{background:color-mix(in srgb,var(--surface) 25%,transparent)}
.gr-belum{display:flex!important;flex-direction:row;gap:8px;align-items:center;margin:4px 0 8px;width:auto}
.gr-belum input{width:auto;margin:0}
.gr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px;margin-top:8px}
.gr-k{margin:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--surface);display:flex;flex-direction:column}
.gr-k.belum{border-color:#d97706;box-shadow:0 0 0 1px #d97706 inset}
.gr-gbr{display:block;width:100%;aspect-ratio:4/5;padding:0;border:0;background:color-mix(in srgb,var(--ink) 6%,transparent);cursor:zoom-in;overflow:hidden}
.gr-gbr img{width:100%;height:100%;object-fit:cover;display:block}
.gr-pdf{display:grid;place-items:center;width:100%;height:100%;font:800 22px/1 var(--body);color:var(--muted)}
.gr-k figcaption{padding:8px 10px 10px;display:grid;gap:4px;font-size:13px}
.gr-t{display:flex;flex-wrap:wrap;gap:4px}
.gr-b{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.gr-k .btn{justify-self:start;margin-top:4px}
@media (max-width:720px){.gr-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.gr-atas label{flex:1 1 140px}}
/* v2.86.79: kad dashboard jualan peribadi (gaya kad jualan Home + peta) — Prestasi & Home mekanik / foreman */
.pr-dash{margin-bottom:0}
.pr-dash-muat{min-height:140px;display:flex;align-items:center;justify-content:center}
.pr-dash .k{letter-spacing:.06em;text-transform:uppercase}
.pr-dash .big,.pr-dash .facts .v{text-shadow:0 1px 10px var(--surface),0 0 2px var(--surface)}
.pr-dash .row>div:first-child .sm,.pr-dash .facts .sm{text-shadow:0 0 6px var(--surface)}
.u-pr-dash{margin-bottom:16px}
.u-pr-dash-b{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;margin-top:8px}
.pr-unjuran{margin-top:8px}
.pr-pdk{display:none}
@media (max-width:520px){
  .pr-dash .facts{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 10px}
  .pr-dash .facts .k{font-size:10.5px;letter-spacing:.05em;white-space:nowrap}
  .pr-dash .facts .v{font-size:19px}
  .pr-dash .facts .sm{font-size:11.5px;line-height:1.3}
  .pr-pjg{display:none}.pr-pdk{display:inline}
}

/* v2.86.80: Tuan AJ memerhati skrol — emoji ikut bahagian yang dilihat (data-lihat), mengatasi emoji pose biasa */
#mtFab[data-lihat] .mtk-emo{opacity:1}
#mtFab[data-lihat] .mtk-emo b{left:10%;bottom:0;top:auto;font-size:15px;color:inherit;animation:mtk-nota 2s ease-out infinite}
#mtFab[data-lihat] .mtk-emo b:nth-child(2){left:44%;animation-delay:.66s}
#mtFab[data-lihat] .mtk-emo b:nth-child(3){left:76%;animation-delay:1.32s}
#mtFab[data-lihat="jualan"] .mtk-emo b::before{content:"💰"}
#mtFab[data-lihat="order"] .mtk-emo b::before{content:"📦"}
#mtFab[data-lihat="job"] .mtk-emo b::before{content:"🔧"}
#mtFab[data-lihat="kutip"] .mtk-emo b::before{content:"💵"}
@media (prefers-reduced-motion:reduce){#mtFab[data-lihat] .mtk-emo b{animation:none;opacity:1}}

/* v2.86.81: butang Imbas semula (AI teliti) */
.ai-ulang{margin-top:8px}

/* v2.86.83: Galeri bengkel (Tetapan & Bengkel → Senarai Kerja) — guna gaya .gr-* Galeri resit */
.gb-panel{margin-top:16px}
.gb-panel>summary{cursor:pointer;display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.gb-cari-l{flex:1 1 200px}
.gb-btn{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px}
/* v2.86.83: Petty cash (Pejabat → Belanja) & remark resit */
.pc-kad{margin-bottom:16px;border-left:4px solid var(--ok)}
.pc-kad.rendah{border-left-color:var(--red);background:linear-gradient(0deg,var(--red-soft),var(--red-soft)) top/100% 4px no-repeat,var(--surface)}
.pc-atas{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.pc-atas>div:first-child{flex:1 1 180px;min-width:0}
.pc-baki{font:700 28px var(--body);line-height:1.15;margin:2px 0}
.pc-bulan{display:flex;gap:16px;flex-wrap:wrap}
.pc-bulan>div{display:flex;flex-direction:column;gap:2px;min-width:110px}
.pc-borang{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.pc-borang .pc-w2{grid-column:1/-1}
.pc-borang .rowbtns{grid-column:1/-1;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.pc-gerak{margin-top:12px;display:flex;flex-direction:column;gap:2px}
.pc-g{display:flex;gap:10px;align-items:center;padding:8px 0;border-top:1px solid var(--line)}
.pc-g .pc-t{flex:1;min-width:0;overflow-wrap:anywhere}
.pc-g .pc-a{white-space:nowrap}
.pc-ik{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:13px;flex:none;background:var(--line)}
.pc-g.masuk .pc-ik{background:var(--ok-soft);color:var(--ok)}
.pc-gerak>.btn{align-self:flex-start;margin-top:6px}
.pj-petty-cb{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid var(--line);border-radius:8px;cursor:pointer}
.pj-petty-cb span{display:flex;flex-direction:column;gap:2px}
.pj-petty-cb small{color:var(--muted)}
.pj-petty-cb:has(input:checked){border-color:var(--ok);background:var(--ok-soft)}
.pj-remark{color:var(--muted);overflow-wrap:anywhere;margin-top:2px}
@media (max-width:560px){.pc-atas>.btn{width:100%}.pc-baki{font-size:24px}}
.setor-petty{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;align-items:end;padding:12px;border:1px dashed var(--ok);border-radius:8px;background:var(--ok-soft)}
.setor-petty-k{grid-column:1/-1;display:flex;flex-direction:column;gap:2px}
.setor-petty>.btn{justify-self:start}
/* v2.86.83: Tetapan — cari, lompat ke bahagian & susun atur seragam */
.set-cari{position:relative;flex:1 1 260px;min-width:0}
.set-cari svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:18px;height:18px;fill:none;stroke:var(--muted);stroke-width:2;stroke-linecap:round;pointer-events:none}
.set-cari input{width:100%;padding:10px 12px 10px 38px;border-radius:999px;background:var(--surface)}
.set-alat-b{display:flex;gap:8px}
.set-nav{flex:1 1 100%;display:flex;gap:6px;overflow-x:auto;scrollbar-width:thin;padding-bottom:2px}
.set-nav:empty{display:none}
.set-chip{flex:none;font:600 12.5px var(--body);padding:6px 12px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;white-space:nowrap}
.set-chip:hover{border-color:var(--ink)}
#view-set .set-sorok{display:none!important}
#view-set .sec.lipat{scroll-margin-top:120px}
#view-set .sec-isi>p.sm,#view-set .sec-isi>p.hint{margin:12px 0 10px;max-width:75ch}
#view-set .sec-isi>.rowbtns,#view-set .sec-isi form .rowbtns,#view-set .sec-isi .panel .rowbtns{margin-top:12px}
#view-set .sec-isi form.grid{border-top:1px solid var(--line)!important;padding-top:14px;margin-top:14px}
#view-set .sec-isi h3,#view-set .sec-isi .sechead{margin:18px 0 8px}
#view-set .sec-isi .panel{margin-top:12px}
#view-set .sec-isi .panel h3{margin-top:0}
#view-set .sec-isi .filters{margin-top:10px}
#view-set .sec-isi .filters label{display:flex;gap:6px;align-items:center}
#view-set .sec-isi .btn.small{min-height:34px}
#view-set .sec-isi .rowbtns .btn{min-height:40px}
#view-set .sec-isi .tablewrap{margin-top:8px}
#view-set .dev-kumpulan .sec.lipat{box-shadow:none}
@media (max-width:560px){.set-alat-b{width:100%}.set-alat-b .btn{flex:1}#view-set .sec-isi .rowbtns .btn{flex:1 1 auto}}
/* v2.86.84: Tetapan → Had & limit */
.hd-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px;margin-top:12px}
.hd-k{border:1px solid var(--line);border-radius:10px;padding:12px 14px 14px;margin:0;min-width:0;display:flex;flex-direction:column;gap:12px;background:var(--surface)}
.hd-k legend{font-weight:700;font-size:14px;padding:0 6px;display:flex;gap:6px;align-items:center}
.hd-k[disabled]{opacity:.75}
.hd-f{display:flex;flex-direction:column;gap:4px;font-size:13px;font-weight:600}
.hd-in{display:flex;align-items:center;gap:8px}
.hd-in input{flex:1;min-width:0}
.hd-u{font-size:12px;font-weight:600;color:var(--muted);white-space:nowrap;min-width:64px}
.hd-btn{margin-top:14px}
.linkbtn{background:none;border:0;padding:0;font:inherit;color:var(--info);text-decoration:underline;cursor:pointer}
/* v2.86.85: menu Galeri (sidebar) */
#gal-isi{display:flex;flex-direction:column;gap:16px}
#gal-isi .gal-sec{margin:0}
#gal-isi .gal-sec>h2{margin-bottom:6px}
/* v2.86.86: Galeri — tab, bar penapis, ringkasan, album, kad & paparan besar */
.gl-tab{display:inline-flex;gap:4px;padding:4px;border:1px solid var(--line);border-radius:999px;background:var(--surface);box-shadow:var(--shadow);margin-bottom:14px;max-width:100%;overflow-x:auto}
.gl-t{display:inline-flex;align-items:center;gap:6px;border:0;background:none;color:var(--muted);font:600 14px var(--body);padding:9px 18px;border-radius:999px;cursor:pointer;white-space:nowrap}
.gl-t:hover{color:var(--ink)}
.gl-t.on{background:var(--ink);color:var(--surface)}
.gl-desk{margin:0 0 12px;color:var(--muted);font-size:13px;max-width:80ch}
.gl-bar{display:flex;flex-direction:column;gap:10px;padding:12px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);box-shadow:var(--shadow)}
.gl-julat{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}
.gl-julat::-webkit-scrollbar{display:none}
.gl-jb{flex:none;border:1px solid var(--line);background:var(--bg);color:var(--ink);font:600 12.5px var(--body);padding:6px 12px;border-radius:999px;cursor:pointer}
.gl-jb.on{background:var(--ink);border-color:var(--ink);color:var(--surface)}
.gl-medan{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end}
.gl-tarikh{display:flex;flex-direction:column;gap:3px;flex:0 1 150px;min-width:130px}
.gl-cari{position:relative;flex:1 1 220px;min-width:0}
.gl-cari svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);width:17px;height:17px;fill:none;stroke:var(--muted);stroke-width:2;stroke-linecap:round;pointer-events:none}
.gl-cari input{width:100%;padding-left:34px}
.gl-ring{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px;margin:12px 0 4px}
.gl-ring:empty{display:none}
.gl-st{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);padding:10px 12px;display:flex;flex-direction:column;gap:2px;min-width:0}
.gl-st b{font:700 20px/1.1 var(--display);letter-spacing:.01em;overflow-wrap:anywhere}
.gl-st span{font-size:12px;color:var(--muted)}
.gl-st.amaran{border-color:var(--warn);background:var(--warn-soft)}
.gl-st.amaran b{color:var(--warn)}
.gl-penapis{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;justify-content:space-between;margin-top:6px}
.gl-album{margin-top:18px}
.gl-ah{display:flex;gap:10px;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;padding:0 2px 8px;margin-bottom:10px;border-bottom:1px solid var(--line)}
.gl-at{min-width:0}
.gl-at>b{font-size:15px}
.gl-no{color:var(--muted);font-weight:600}
.gl-aa{display:flex;gap:10px;align-items:center}
.gl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.gl-grid-dok{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
.gl-k{position:relative;margin:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--surface);display:flex;flex-direction:column;transition:box-shadow .15s,transform .15s}
.gl-k:hover{box-shadow:0 6px 18px rgba(0,0,0,.12);transform:translateY(-1px)}
.gl-k.belum{border-color:var(--warn);box-shadow:0 0 0 1px var(--warn) inset}
.gl-gbr{display:block;width:100%;aspect-ratio:1/1;padding:0;border:0;background:color-mix(in srgb,var(--ink) 6%,transparent);cursor:zoom-in;overflow:hidden}
.gl-dok .gl-gbr{aspect-ratio:4/3}
.gl-gbr img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .25s}
.gl-k:hover .gl-gbr img{transform:scale(1.03)}
.gl-ph{display:grid;place-items:center;width:100%;height:100%;font:800 26px/1 var(--body);color:var(--muted)}
.gl-vid{font-size:30px;color:#fff;background:linear-gradient(135deg,#1f2937,#111)}
.gl-pdf{font-size:20px;letter-spacing:.08em;background:repeating-linear-gradient(135deg,transparent 0 10px,color-mix(in srgb,var(--ink) 4%,transparent) 10px 20px)}
.gl-lenc{position:absolute;top:8px;left:8px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:14px;background:rgba(255,255,255,.92);box-shadow:0 1px 3px rgba(0,0,0,.25);pointer-events:none}
.gl-bendera{position:absolute;top:8px;right:8px;font:700 11px var(--body);padding:3px 8px;border-radius:999px;background:var(--warn);color:#fff;pointer-events:none}
.gl-k figcaption{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:7px 8px 7px 10px;font-size:12.5px;font-weight:600;min-height:40px}
.gl-k figcaption.gl-cap{flex-direction:column;align-items:stretch;gap:4px;padding:9px 10px 8px}
.gl-c1{display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.gl-c1 b{font-size:14px;white-space:nowrap}
.gl-jn{color:var(--muted);font-size:12px}
.gl-b{font-weight:400;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.gl-rem{-webkit-line-clamp:1}
.gl-c2{display:flex;justify-content:space-between;align-items:center;gap:6px;margin-top:2px}
.gl-ak{display:inline-flex;gap:4px;flex:none}
.gl-ib{width:32px;height:32px;display:grid;place-items:center;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink);cursor:pointer;font-size:14px;padding:0}
.gl-ib:hover{border-color:var(--ink)}
.gl-del:hover{border-color:var(--red);color:var(--red);background:var(--red-soft)}
.gl-kosong{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;padding:40px 16px;border:1px dashed var(--line);border-radius:var(--r);margin-top:16px;color:var(--muted)}
.gl-kosong>span:first-child{font-size:34px}
.gl-kosong b{color:var(--ink)}
.gl-rangka{margin-top:16px}
.gl-rangka span{aspect-ratio:1/1;border-radius:12px;background:linear-gradient(90deg,var(--line) 0%,color-mix(in srgb,var(--line) 50%,var(--surface)) 50%,var(--line) 100%);background-size:200% 100%;animation:gl-kilat 1.2s infinite linear}
.gl-grid-dok.gl-rangka span{aspect-ratio:4/3}
@keyframes gl-kilat{to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.gl-rangka span{animation:none}.gl-k,.gl-gbr img{transition:none}}
/* paparan besar */
html.gl-lb-buka{overflow:hidden}
.gl-lb{position:fixed;inset:0;z-index:55;background:rgba(8,8,8,.94);display:grid;grid-template-columns:64px minmax(0,1fr) 64px;grid-template-rows:auto minmax(0,1fr) auto;color:#f3f3f3}
.gl-lb-atas{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;padding:calc(env(safe-area-inset-top,0px) + 10px) 14px 8px}
.gl-lb-n{font:600 13px var(--body);opacity:.8}
.gl-lb-x{width:42px;height:42px;border-radius:50%;border:0;background:rgba(255,255,255,.12);color:#fff;font-size:18px;cursor:pointer}
.gl-lb-media{grid-column:2;grid-row:2;display:grid;place-items:center;min-height:0;padding:4px}
.gl-lb-media img,.gl-lb-media video{max-width:100%;max-height:100%;object-fit:contain;border-radius:8px;box-shadow:0 10px 40px rgba(0,0,0,.5)}
.gl-lb-nav{grid-row:2;align-self:center;justify-self:center;width:46px;height:46px;border-radius:50%;border:0;background:rgba(255,255,255,.12);color:#fff;font-size:30px;line-height:1;cursor:pointer}
.gl-lb-nav.kiri{grid-column:1}.gl-lb-nav.kanan{grid-column:3}
.gl-lb-nav:hover,.gl-lb-x:hover{background:rgba(255,255,255,.22)}
.gl-lb-info{grid-column:1/-1;grid-row:3;padding:10px 16px calc(env(safe-area-inset-bottom,0px) + 14px);display:flex;flex-direction:column;gap:3px;align-items:center;text-align:center}
.gl-lb-t{font-weight:700;font-size:15px}
.gl-lb-s,.gl-lb-m{opacity:.8;max-width:70ch;overflow-wrap:anywhere}
.gl-lb-ak{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:8px}
.gl-lb-ak .btn{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.25)}
.gl-lb-ak .btn.danger{color:#ff9a9a;border-color:rgba(255,120,120,.5)}
.gl-lb-pdf{display:flex;flex-direction:column;align-items:center;gap:14px;font:800 30px var(--body)}
.gl-lb-pdf span:last-child{font:400 14px var(--body)}
.gl-lb-muat{width:36px;height:36px;border-radius:50%;border:3px solid rgba(255,255,255,.2);border-top-color:#fff;animation:gl-pusing .8s linear infinite}
@keyframes gl-pusing{to{transform:rotate(360deg)}}
@media (max-width:720px){
  .gl-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .gl-grid-dok{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .gl-k figcaption{padding:6px;font-size:11.5px;min-height:34px}
  .gl-grid:not(.gl-grid-dok) .gl-ak{display:none}
  .gl-lenc{width:24px;height:24px;font-size:12px;top:6px;left:6px}
  .gl-tarikh{flex:1 1 130px}
  .gl-medan .btn{flex:1 1 auto}
  .gl-lb{grid-template-columns:0 minmax(0,1fr) 0}
  .gl-lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;font-size:26px}
  .gl-lb-nav.kiri{left:8px}.gl-lb-nav.kanan{right:8px}
  .gl-tab{display:flex;width:100%}.gl-t{flex:1;justify-content:center;padding:9px 10px}
}
/* v2.86.87: Prestasi — graf bar perbandingan mekanik */
.pr-gb{border:1px solid var(--line);border-radius:var(--r);padding:14px;margin:4px 0 16px;background:var(--surface)}
.pr-gb-k{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.pr-gb-seg button{font-size:13px}
.pr-gb-l{display:flex;flex-direction:column;gap:8px}
.pr-gb-r{display:grid;grid-template-columns:minmax(110px,26%) minmax(0,1fr) 72px;gap:10px;align-items:center;font-size:13px}
.pr-gb-n{display:flex;align-items:center;gap:8px;min-width:0}
.pr-gb-rk{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font:700 11px var(--body);background:var(--bg);border:1px solid var(--line);color:var(--muted)}
.pr-gb-nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.pr-gb-anda{flex:none;font:700 10px var(--body);padding:1px 6px;border-radius:999px;background:var(--red);color:#fff}
.pr-gb-b{position:relative;height:14px;border-radius:4px;background:color-mix(in srgb,var(--line) 55%,transparent)}
.pr-gb-b i{display:block;height:100%;border-radius:0 4px 4px 0;background:var(--muted);min-width:2px}
.pr-gb-r.saya .pr-gb-b i{background:var(--red)}
.pr-gb-r.saya .pr-gb-nm{color:var(--red)}
.pr-gb-b s{position:absolute;top:-4px;bottom:-4px;width:0;border-left:2px dashed var(--ink);opacity:.7}
.pr-gb-x{position:absolute;left:8px;top:50%;transform:translateY(-50%);white-space:nowrap}
.pr-gb-v{text-align:right;font-variant-numeric:tabular-nums}
.pr-js{display:none}
@media (max-width:720px){
  .pr-gb{padding:12px}
  .pr-gb-k{flex-direction:column}
  .pr-gb-seg{width:100%;display:flex}.pr-gb-seg button{flex:1}
  .pr-gb-r{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"n v" "b b";gap:4px 8px;font-size:12.5px}
  .pr-gb-n{grid-area:n}.pr-gb-v{grid-area:v}.pr-gb-b{grid-area:b;height:10px}
  .pr-gb-l{gap:10px}
  .pr-gb-rk{width:20px;height:20px}
  .pr-js{display:inline}
}
/* v2.86.88: Pejabat — ringkasan & tindakan pantas admin */
.pj-hub{margin-bottom:14px}
.pj-hub:empty{display:none}
.pj-hub-k{display:flex;justify-content:space-between;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.pj-hub-k>div>b{font:700 18px var(--display);letter-spacing:.03em;text-transform:uppercase}
.pj-hub-t{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.pj-ht{display:flex;flex-direction:column;gap:3px;text-align:left;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);box-shadow:var(--shadow);color:var(--ink);font:inherit;cursor:pointer;min-width:0;transition:border-color .15s,transform .15s}
.pj-ht:hover{border-color:var(--ink);transform:translateY(-1px)}
.pj-ht.on{border-color:var(--ink);box-shadow:inset 0 -3px 0 var(--red),var(--shadow)}
.pj-ht.amaran{border-color:var(--warn);background:var(--warn-soft)}
.pj-ht .k{font-size:12px;font-weight:600;color:var(--muted)}
.pj-ht>b{font:700 22px/1.15 var(--display);letter-spacing:.01em;overflow-wrap:anywhere}
.pj-ht .s{font-size:12px;color:var(--muted);overflow-wrap:anywhere}
.pj-hub-a{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.pj-hub-a .btn{display:inline-flex;align-items:center;gap:6px}
#view-pej #pj-inv > .tiles,#view-pej #pj-bel > .tiles{display:none}
.pj-cip{display:flex;gap:6px;margin-top:6px}
.pj-cb{border:1px solid var(--line);background:var(--bg);color:var(--ink);font:600 12px var(--body);padding:4px 10px;border-radius:999px;cursor:pointer}
.pj-cb:hover{border-color:var(--ink)}
@media (max-width:720px){
  .pj-hub-t{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .pj-ht{padding:10px 12px}.pj-ht>b{font-size:19px}
  .pj-hub-a{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .pj-hub-a .btn{flex-direction:column;justify-content:center;gap:2px;font-size:12px;padding:8px 4px;text-align:center;min-height:56px}
}
/* v2.86.89: Prestasi — bar bulan & Segar semula satu baris */
.pr-atas{display:flex;gap:10px;align-items:center;margin-bottom:14px;padding:8px 8px 8px 14px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);box-shadow:var(--shadow)}
.pr-bln{display:flex;align-items:center;gap:10px;flex:1;min-width:0}
.pr-bln input{flex:1;min-width:0;border:0;background:transparent;font:600 15px var(--body);padding:6px 0;color:var(--ink)}
.pr-segar{display:inline-flex;align-items:center;gap:6px;flex:none}
.pr-segar svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pr-segar:disabled svg{animation:gl-pusing .8s linear infinite}
/* v2.86.89: sidebar — skrin yang sedang dilihat lebih jelas */
nav.tabs button[aria-selected="true"]{background:color-mix(in srgb,var(--red) 20%,transparent);color:#fff;font-weight:700;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--red) 45%,transparent)}
nav.tabs button[aria-selected="true"]::before{left:0;top:6px;bottom:6px;width:4px;border-radius:0 4px 4px 0}
nav.tabs button[aria-selected="true"] .mn-l::after{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--red);margin-left:8px;vertical-align:middle;box-shadow:0 0 0 3px color-mix(in srgb,var(--red) 25%,transparent)}

/* v2.86.91: AI Center — susun atur ringkas (Perlu tindakan, senarai modul padat, bahagian Tetapan & Audit) */
.ac-tin-l{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px;margin-bottom:16px}
.ac-tin{display:flex;align-items:center;gap:12px;text-align:left;font:inherit;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--warn);border-radius:10px;padding:12px 14px;cursor:pointer;min-width:0}
.ac-tin.bahaya{border-left-color:var(--red)}
.ac-tin b{font-size:22px;line-height:1;font-variant-numeric:tabular-nums}
.ac-tin span{flex:1;min-width:0;font-size:13.5px;line-height:1.35}
.ac-tin i,.ac-baris i{font-style:normal;color:var(--muted);font-size:18px}
.ac-tin:hover,.ac-baris:hover{border-color:var(--info)}
.ac-beres{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--ok);border-radius:10px;padding:12px 14px;margin-bottom:16px;font-size:14px}
.ac-beres b{color:var(--ok);font-size:18px}
.ac-dua{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;align-items:start}
.ac-dua>.ac-blok{margin-bottom:0}
.ac-baris-l{display:grid;padding:6px 8px 10px}
.ac-baris{display:flex;align-items:center;gap:10px;width:100%;text-align:left;font:inherit;color:var(--ink);background:none;border:1px solid transparent;border-bottom-color:var(--line);border-radius:8px;padding:10px 8px;cursor:pointer}
.ac-baris:last-child{border-bottom-color:transparent}
.ac-baris-t{flex:1;min-width:0;display:grid;gap:2px;padding:0;font-size:14px}
.ac-baris-t small{font-size:12px;color:var(--muted)}
.ac-baris>b{font-size:18px;font-variant-numeric:tabular-nums}
.ac-titik{width:9px;height:9px;border-radius:50%;flex:none;background:var(--muted)}
.ac-titik.hidup{background:var(--ok)}.ac-titik.mati{background:var(--warn)}
.ac-seg{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:0 0 14px;padding:4px;background:var(--surface);border:1px solid var(--line);border-radius:12px}
.ac-seg::-webkit-scrollbar{display:none}
.ac-seg button{flex:none;font:inherit;font-size:13.5px;font-weight:600;color:var(--muted);background:none;border:0;border-radius:9px;padding:8px 14px;cursor:pointer;white-space:nowrap}
.ac-seg button[aria-selected="true"]{background:var(--ink);color:var(--surface)}
[data-sek][hidden]{display:none}
@media (max-width:640px){.ac-tin-l{grid-template-columns:1fr}.ac-dua{grid-template-columns:1fr}}
/* v2.86.91: Pemantauan sistem — kelajuan app */
.pm-lks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:10px}
.pm-lk{position:relative;border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;background:var(--surface);display:flex;flex-direction:column;gap:3px;min-width:0}
.pm-lk .k{font-size:12px;font-weight:600;color:var(--muted)}
.pm-lk>b{font:700 26px/1.1 var(--display)}
.pm-lk.ok{border-left:4px solid var(--ok)}.pm-lk.sederhana{border-left:4px solid var(--warn)}.pm-lk.perlahan{border-left:4px solid var(--red)}
.pm-lk-t{position:absolute;top:10px;right:10px;font:700 11px var(--body);padding:2px 8px;border-radius:999px}
.pm-lk.ok .pm-lk-t{background:var(--ok-soft);color:var(--ok)}.pm-lk.sederhana .pm-lk-t{background:var(--warn-soft);color:var(--warn)}.pm-lk.perlahan .pm-lk-t{background:var(--red-soft);color:var(--red)}
.pm-lk-n{color:var(--muted)}
.pm-lh{margin:14px 0 6px;font-size:14px}
.pm-t.ok{color:var(--ok)}.pm-t.sederhana{color:var(--warn)}.pm-t.perlahan{color:var(--red);font-weight:700}
@media (max-width:720px){.pm-lks{grid-template-columns:1fr}}
/* v2.86.93: Tunjuk lagi (senarai panjang & galeri) */
.lagi-bar{display:flex;justify-content:center;align-items:center;gap:12px;flex-wrap:wrap;margin:12px 0 4px}
.gl-lagi{margin-top:18px}
/* v2.86.94: Tetapan — tab Pemilik / Khas Developer, kategori & kawalan wajib */
.set-tab{display:none;gap:4px;padding:4px;border:1px solid var(--line);border-radius:999px;background:var(--surface);box-shadow:var(--shadow);margin-bottom:12px;width:fit-content;max-width:100%}
body.dev .set-tab{display:flex}
.set-tab button{display:inline-flex;align-items:center;gap:6px;border:0;background:none;color:var(--muted);font:600 14px var(--body);padding:9px 16px;border-radius:999px;cursor:pointer;white-space:nowrap}
.set-tab button[aria-selected="true"]{background:var(--ink);color:var(--surface)}
.set-tab .dev-lencana{font-size:10px;padding:2px 6px}
body.dev #view-set[data-tab="dev"] > .sec{display:none!important}
body.dev #view-set[data-tab="pemilik"] #set-dev{display:none}
body.dev #view-set[data-tab="dev"] #set-dev{margin-top:0}
.dev-kat{margin-top:16px}
.dev-kat-h{display:flex;gap:10px;align-items:center;margin:0 2px 8px}
.dev-kat-ik{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-size:17px;background:var(--surface);border:1px solid var(--line);flex:none}
.dev-kat-h b{font-size:15px}
.dev-wajib{margin-bottom:6px}
.dev-wajib:empty{display:none}
.dev-wajib-h{display:flex;justify-content:space-between;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.dev-wajib-g{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:8px}
.dev-w{display:flex;align-items:center;gap:10px;text-align:left;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);color:var(--ink);font:inherit;cursor:pointer;min-width:0}
.dev-w:hover{border-color:var(--ink)}
.dev-w-ik{font-size:20px;flex:none}
.dev-w-t{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.dev-w-t .sm{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.dev-w-s{flex:none;font:700 12px var(--body);padding:3px 9px;border-radius:999px;background:var(--line);color:var(--ink);white-space:nowrap}
.dev-w-s.buka{background:transparent;color:var(--muted);padding:0}
.dev-w.hijau .dev-w-s{background:var(--ok-soft);color:var(--ok)}.dev-w.kuning .dev-w-s{background:var(--warn-soft);color:var(--warn)}.dev-w.merah{border-color:var(--red)}.dev-w.merah .dev-w-s{background:var(--red-soft);color:var(--red)}
@media (max-width:560px){.set-tab{width:100%}.set-tab button{flex:1;justify-content:center;padding:9px 8px;font-size:13px}}

/* v2.86.95: Tuan AJ 3D (pilihan Rupa Tuan AJ, beta) — kanvas WebGL menggantikan sprite dalam kotak yang sama */
#mtFab .mtr-3d{inset:auto;left:-27.78%;width:155.56%;height:111.11%;bottom:-2.78%}
.aj3d{position:absolute;inset:0;display:block;pointer-events:none}
.aj3d canvas{width:100%!important;height:100%!important;display:block;pointer-events:none!important}
/* v2.86.96: PNL — Kesihatan syarikat (js/pnlsihat.js) */
.ps{margin:0 0 16px;border-left:5px solid var(--muted)}
.ps-sihat,.ps-positif{border-left-color:var(--ok)}.ps-nipis{border-left-color:var(--warn)}.ps-negatif,.ps-bahaya{border-left-color:var(--red)}
.ps-bahaya{background:linear-gradient(180deg,color-mix(in srgb,var(--red) 9%,var(--surface)),var(--surface) 40%)}
.ps-h{display:flex;justify-content:space-between;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.ps-h h2{margin:0}
.ps-atas{display:grid;grid-template-columns:minmax(220px,300px) 1fr;gap:16px 24px;align-items:center}
.ps-status{text-align:center}
.ps-meter{width:100%;max-width:240px;display:block;margin:0 auto}
.ps-meter text{font-size:10px;fill:var(--muted)}
.ps-lencana{display:inline-block;margin-top:2px;padding:6px 14px;border-radius:999px;font:800 15px/1.1 var(--display);letter-spacing:.06em;color:#fff;background:var(--w)}
.ps-bahaya .ps-lencana{animation:ps-denyut 1.6s ease-in-out infinite}
@keyframes ps-denyut{50%{box-shadow:0 0 0 8px color-mix(in srgb,var(--red) 25%,transparent)}}
@media (prefers-reduced-motion:reduce){.ps-bahaya .ps-lencana{animation:none}}
.ps-s{margin:8px auto 0;max-width:300px;font-size:13.5px;line-height:1.45}
.ps-kpi{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 18px}
.ps-kpi .k{font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.ps-kpi .v{font:700 24px/1.15 var(--display);font-variant-numeric:tabular-nums;margin:2px 0}
.ps-kpi .sm{line-height:1.35}
.ps-pm .bar{height:8px;margin:6px 0 4px}
.ps-pm .bar i{background:var(--warn)}.ps-pm .bar.done i{background:var(--ok)}
.ps-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;margin-top:16px}
.ps-kad{border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-top:16px;background:var(--surface)}
.ps-grid .ps-kad{margin-top:0}
.ps-kad h3{margin:0 0 10px;font-size:15px}
.ps-pai{display:grid;grid-template-columns:150px 1fr;gap:14px;align-items:center}
.ps-pai svg{width:150px;height:150px}
.ps-pai-v{font:800 22px var(--display);fill:var(--ok)}.ps-pai-v.neg{fill:var(--red)}
.ps-pai-k{font-size:9.5px;fill:var(--muted)}
.ps-leg{list-style:none;margin:0;padding:0;display:grid;gap:5px;font-size:13px}
.ps-leg li{display:grid;grid-template-columns:12px 1fr auto;column-gap:8px;align-items:center}
.ps-leg i{width:12px;height:12px;border-radius:3px}
.ps-leg b{font-variant-numeric:tabular-nums;text-align:right}
.ps-leg .sm{grid-column:2/4;margin-top:-2px}
.ps-am-l{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.ps-am{display:grid;grid-template-columns:26px 1fr;gap:10px;align-items:start;padding:9px 10px;border-radius:10px;font-size:13.5px;line-height:1.4;border:1px solid var(--line)}
.ps-am-i{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;font-weight:800;color:#fff;background:var(--muted)}
.ps-am.merah{background:color-mix(in srgb,var(--red) 10%,var(--surface));border-color:color-mix(in srgb,var(--red) 45%,var(--line))}.ps-am.merah .ps-am-i{background:var(--red)}
.ps-am.kuning{background:color-mix(in srgb,var(--warn) 12%,var(--surface));border-color:color-mix(in srgb,var(--warn) 45%,var(--line))}.ps-am.kuning .ps-am-i{background:var(--warn)}
.ps-am.biru .ps-am-i{background:var(--info)}
.ps-am.hijau{background:color-mix(in srgb,var(--ok) 10%,var(--surface))}.ps-am.hijau .ps-am-i{background:var(--ok)}
.ps-am .sm{margin-top:2px}
.ps-wt,.ps-tr{width:100%;height:auto;display:block}
.ps-wt text,.ps-tr text{font-size:11px;fill:var(--muted)}
.ps-wt .ps-wt-v{font-size:11.5px;font-weight:700;fill:var(--ink)}.ps-wt .ps-wt-v.neg{fill:var(--red)}
.ps-l-j::before,.ps-l-u::before,.ps-l-r::before{content:"";width:12px;height:10px;border-radius:2px}
.ps-l-j::before{background:var(--muted);opacity:.45}.ps-l-u::before{background:var(--ok)}.ps-l-r::before{background:var(--red)}
@media (max-width:820px){.ps-atas{grid-template-columns:1fr}.ps-grid{grid-template-columns:1fr}}
@media (max-width:520px){
  .ps-kpi{grid-template-columns:1fr 1fr}.ps-pm{grid-column:1/3}
  .ps-kpi .v{font-size:21px}
  .ps-pai{grid-template-columns:1fr}.ps-pai svg{margin:0 auto}
}
.ps-tr .ps-tr-v{font-size:11px;font-weight:700;fill:var(--ok)}.ps-tr .ps-tr-v.neg{fill:var(--red)}
.ps-pai-k{font-family:var(--body)}
.ps-wth,.ps-tr-tel{display:none}
.ps-wth{gap:7px}
.ps-wth-r{display:grid;grid-template-columns:minmax(0,7.5em) 1fr auto;gap:8px;align-items:center;font-size:13px}
.ps-wth-r .l{color:var(--muted);line-height:1.2}.ps-wth-r.j .l{color:var(--ink);font-weight:700}
.ps-wth-r .t{position:relative;height:14px;border-radius:4px;background:color-mix(in srgb,var(--ink) 6%,transparent)}
.ps-wth-r .t i{position:absolute;top:0;bottom:0;border-radius:3px}
.ps-wth-r b{font-variant-numeric:tabular-nums;min-width:5.5em;text-align:right}.ps-wth-r b.neg{color:var(--red)}
@media (max-width:560px){.ps-wt,.ps-tr:not(.ps-tr-tel){display:none}.ps-wth{display:grid}.ps-tr-tel{display:block}}
/* v2.86.97: kos operasi PNL di bawah pemilih Bulanan / Harian — padat */
.pnl-ops{padding:10px 14px;margin:0 0 16px;gap:10px 16px}
.pnl-ops .k{font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);line-height:1.25}
.pnl-ops .v{font-size:20px;line-height:1.2;margin-top:2px}
@media (max-width:820px){.pnl-ops{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px 10px;padding:10px 12px}
  .pnl-ops .k{font-size:9.5px;letter-spacing:.03em}.pnl-ops .v{font-size:15px}}
.pnl-ops>div:not(.sm){display:flex;flex-direction:column;justify-content:space-between}
/* ===== v2.86.97: Tema DOTLINK (docs/SCS_DOTLINK.txt) — hanya bila html.dotlink; Klasik tidak terjejas ===== */
/* token dot: saiz, jarak & warna seragam; dekorasi tidak menangkap klik (latar / pseudo-elemen sahaja) */
html.dotlink{--dl-dot:color-mix(in srgb,var(--ink) 26%,transparent);--dl-dot-side:rgba(255,255,255,.22);--dl-on:var(--red);--dl-g:5px;--dl-r:1px}
/* menu sisi: kelompok 3 titik pada sisi dalam kanan; aktif = titik merah */
html.dotlink nav.tabs button{padding-right:24px;background-image:radial-gradient(circle,var(--dl-dot-side) var(--dl-r),transparent calc(var(--dl-r) + .6px)),radial-gradient(circle,var(--dl-dot-side) var(--dl-r),transparent calc(var(--dl-r) + .6px)),radial-gradient(circle,var(--dl-dot-side) var(--dl-r),transparent calc(var(--dl-r) + .6px));background-size:4px 4px;background-repeat:no-repeat;background-position:right 10px top calc(50% - 5px),right 10px center,right 10px top calc(50% + 5px)}
html.dotlink nav.tabs button[aria-selected="true"]{background-image:radial-gradient(circle,var(--dl-on) 2.4px,transparent 3px),linear-gradient(color-mix(in srgb,var(--red) 20%,transparent),color-mix(in srgb,var(--red) 20%,transparent));background-size:8px 8px,100% 100%;background-position:right 8px center,0 0}
html.dotlink nav.tabs button[aria-selected="true"] .mn-l::after{display:none}
/* bar bawah telefon: titik merah kecil di atas ikon aktif */
html.dotlink .bnav button[aria-current]{background-image:radial-gradient(circle,var(--dl-on) 2px,transparent 2.6px);background-size:6px 6px;background-repeat:no-repeat;background-position:center 5px}
/* CTA utama: grid titik 2×3 pada sisi dalam kanan */
html.dotlink .btn.primary:not(.small){padding-right:34px}
html.dotlink .btn.primary:not(.small){background-image:linear-gradient(90deg,var(--red) calc(100% - 26px),transparent calc(100% - 26px)),radial-gradient(circle,rgba(255,255,255,.6) var(--dl-r),transparent calc(var(--dl-r) + .6px));background-size:100% 100%,var(--dl-g) var(--dl-g);background-position:0 0,right 7px top 50%;background-repeat:no-repeat,repeat-y;background-color:var(--red)}
html.dotlink .btn.primary:not(.small):hover:not(:disabled){background-color:color-mix(in srgb,var(--red) 88%,#000);background-image:linear-gradient(90deg,color-mix(in srgb,var(--red) 88%,#000) calc(100% - 26px),transparent calc(100% - 26px)),radial-gradient(circle,rgba(255,255,255,.75) var(--dl-r),transparent calc(var(--dl-r) + .6px))}
/* kad yang boleh dibuka / angka ringkasan: grid titik 3×2 samar di penjuru kanan atas */
html.dotlink :is(.tile,.pj-ht,.gl-st,.pm-lk,.dev-w){position:relative}
html.dotlink :is(.tile,.pj-ht,.gl-st,.pm-lk,.dev-w)::after{content:"";position:absolute;top:10px;right:10px;width:14px;height:9px;background:radial-gradient(circle,var(--dl-dot) var(--dl-r),transparent calc(var(--dl-r) + .6px)) 0 0/var(--dl-g) var(--dl-g);pointer-events:none}
html.dotlink :is(.pj-ht,.dev-w):hover::after,html.dotlink :is(.pj-ht.on)::after{background-image:radial-gradient(circle,var(--dl-on) var(--dl-r),transparent calc(var(--dl-r) + .6px))}
html.dotlink .pm-lk .pm-lk-t{right:30px}
/* permukaan kandungan tenang: panel graphite, sudut seragam */
html.dotlink{--r:12px}
html.dotlink[data-warna="gelap"]{--bg:#0e0e0f;--surface:#18181a;--line:#2b2a2c}
/* transisi: titik butang = asal zoom (0.97 → 1 + fade), garis sambungan 1px ringkas */
html.dotlink [id^="view-"].dl-masuk{animation:dl-zoom .3s cubic-bezier(.2,.7,.2,1) both;transform-origin:var(--dl-ox,50%) var(--dl-oy,0)}
html.dotlink #screen-app.dl-login{animation:dl-zoom .55s cubic-bezier(.2,.7,.2,1) both;transform-origin:50% 30%}
@keyframes dl-zoom{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
.dl-garis{position:fixed;height:1px;transform-origin:0 50%;pointer-events:none;z-index:30;opacity:0;background:linear-gradient(90deg,var(--red),color-mix(in srgb,var(--red) 0%,transparent))}
.dl-garis.jalan{animation:dl-garis .36s ease-out both}
@keyframes dl-garis{0%{opacity:.9;clip-path:inset(0 100% 0 0)}60%{opacity:.8;clip-path:inset(0 0 0 0)}100%{opacity:0;clip-path:inset(0 0 0 0)}}
@media (prefers-reduced-motion:reduce){html.dotlink [id^="view-"].dl-masuk,html.dotlink #screen-app.dl-login,.dl-garis.jalan{animation:none}}
/* pemilih tema & mod warna */
.tema-set,.tema-login{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:10px}
.tema-login{margin-top:8px}
@media (max-width:420px){.tema-set{grid-template-columns:1fr}}
/* v2.86.102: cip penapis galeri satu baris boleh leret (tiada ruang kosong bila cip berbalut) */
.gr-chip{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:2px;margin-inline:-2px;padding-inline:2px;scroll-snap-type:x proximity}
.gr-chip::-webkit-scrollbar{display:none}
.gr-chip .gr-c{flex:none;scroll-snap-align:start}
@media (max-width:720px){.gr-chip{-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}}
/* v2.86.102: kad angka (.tiles) — nombor & keterangan sebaris walaupun label 1–3 baris (tiada jurang tidak sekata) */
@media (max-width:720px){.tiles>.tile>.k{min-height:2.5em}}
/* v2.86.115: makluman tengah skrin (Berjaya / Gagal / Makluman) — seluruh sistem */
.pop-root{position:fixed;inset:0;z-index:70;display:none;align-items:center;justify-content:center;padding:24px;pointer-events:none}
.pop-root.buka{display:flex}
.pop-root.boleh-tekan .pop{pointer-events:auto;cursor:pointer}
.pop{display:flex;align-items:center;gap:14px;min-width:min(260px,86vw);max-width:min(420px,90vw);padding:16px 18px;border-radius:16px;background:var(--surface);color:var(--ink);border:1px solid var(--line);box-shadow:0 18px 50px rgba(0,0,0,.35),0 2px 6px rgba(0,0,0,.2);animation:pop-masuk .22s cubic-bezier(.2,.8,.2,1) both}
.pop-root.keluar .pop{animation:pop-keluar .2s ease-in both}
.pop-ik{flex:none;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;font:800 20px/1 var(--body);color:#fff}
.pop-ok .pop-ik{background:var(--ok);box-shadow:0 0 0 6px var(--ok-soft)}
.pop-gagal .pop-ik{background:var(--red);box-shadow:0 0 0 6px var(--red-soft)}
.pop-info .pop-ik{background:var(--info);box-shadow:0 0 0 6px var(--info-soft);font-family:Georgia,serif;font-style:italic}
.pop-ok{border-color:color-mix(in srgb,var(--ok) 40%,var(--line))}
.pop-gagal{border-color:color-mix(in srgb,var(--red) 50%,var(--line))}
.pop-t{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.pop-t b{font-size:15px}
.pop-t span{font-size:13.5px;color:var(--muted);overflow-wrap:anywhere;line-height:1.4}
.pop-x{flex:none;color:var(--muted);font-size:14px;align-self:flex-start}
@keyframes pop-masuk{from{opacity:0;transform:scale(.92) translateY(6px)}to{opacity:1;transform:none}}
@keyframes pop-keluar{to{opacity:0;transform:scale(.96)}}
@media (prefers-reduced-motion:reduce){.pop,.pop-root.keluar .pop{animation:none}}

/* v2.86.118: SCS AI Guide — mod ajar langkah demi langkah: AJ dibesarkan dari tapak kaki, latar digelapkan di luar sorotan,
   riak "tekan" pada sorotan (visual sahaja), popup / kad AJ lain ditangguhkan supaya awan pengajaran tidak tertutup */
#mtFab{transition:scale .3s ease}
body.ag-ajar #mtFab{scale:1.6;transform-origin:50% 100%;z-index:38}
body.ag-ajar .ag-sorot{box-shadow:0 0 0 4px rgba(229,57,53,.25),0 0 18px rgba(229,57,53,.5),0 0 0 200vmax rgba(8,10,14,.42)}
body.ag-ajar #ajnSedia,body.ag-ajar #ajnPop,body:has(#agBub:not([hidden])) #ajnSedia,body:has(#agBub:not([hidden])) #ajnPop{display:none!important}
.ag-sorot.ag-riak{animation:ag-riak .9s ease-out 1}
@keyframes ag-riak{0%{transform:scale(1);background:transparent}35%{transform:scale(.95);background:rgba(229,57,53,.22)}100%{transform:scale(1);background:transparent}}
@media (prefers-reduced-motion:reduce){#mtFab{transition:none}.ag-sorot.ag-riak{animation:none}}
/* ===== v2.86.117: Peranti log masuk (Tetapan & Profil) ===== */
.lgp-ring{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:10px 0 12px}
.lgp-st{border:1px solid var(--line);border-radius:var(--r);padding:10px 12px;background:var(--surface);display:flex;flex-direction:column;gap:2px;min-width:0}
.lgp-st b{font-size:22px;line-height:1.1}.lgp-st span{font-size:12px;color:var(--muted)}
.lgp-st.amaran{border-color:color-mix(in srgb,var(--warn) 55%,var(--line))}.lgp-st.amaran b{color:var(--warn)}
.lgp-g{border:1px solid var(--line);border-radius:var(--r);margin-top:12px;overflow:hidden;background:var(--surface)}
.lgp-gh{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;background:color-mix(in srgb,var(--ink) 4%,transparent);border-bottom:1px solid var(--line)}
.lgp-row{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 12px;border-top:1px solid var(--line)}
.lgp-g .lgp-row:first-of-type,.pf-lgp .lgp-row:first-child{border-top:0}
.lgp-row.baru{background:color-mix(in srgb,var(--warn) 8%,transparent)}
.lgp-row.lama{opacity:.72}
.lgp-ik{font-size:20px;text-align:center}
.lgp-t{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.lgp-t b{overflow-wrap:anywhere}
.lgp-meta{margin-top:2px;overflow-wrap:anywhere}
.lgp-ak{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}
.pill.lgp-live{background:var(--ok-soft);color:var(--ok)}
.pill.lgp-aktif{background:color-mix(in srgb,var(--ink) 8%,transparent);color:var(--ink)}
.pill.lgp-lama{background:color-mix(in srgb,var(--ink) 5%,transparent);color:var(--muted)}
.lgp-tag{font-size:11px;font-weight:600;padding:1px 7px;border-radius:999px;border:1px solid var(--line);color:var(--muted);white-space:nowrap}
.lgp-tag.lgp-ini{border-color:color-mix(in srgb,var(--ok) 50%,var(--line));color:var(--ok)}
.lgp-tag.lgp-baru{border-color:color-mix(in srgb,var(--warn) 60%,var(--line));color:var(--warn)}
.lgp-tag.lgp-kenal{color:var(--ok)}
.lgp-ks{padding:10px 12px;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--red) 5%,transparent)}
.lgp-ks .fl{max-width:320px}
#lgp-lama{margin-top:12px}
.pf-lgp .lgp-row{padding:8px 0;grid-template-columns:24px minmax(0,1fr)}
.pf-lgp .lgp-ak{grid-column:1/-1;justify-content:flex-start}
@media (max-width:560px){.lgp-row{grid-template-columns:24px minmax(0,1fr)}.lgp-ak{grid-column:1/-1;justify-content:flex-start}.lgp-st b{font-size:18px}}

/* v2.86.120: Tuan AJ kesedaran paparan — emoji mod ikut bacaan halaman (aj-pemerhati.js) */
#mtFab[data-lihat="masalah"] .mtk-emo b::before{content:"😟"}
#mtFab[data-lihat="baik"] .mtk-emo b::before{content:"🎉"}
#mtFab[data-lihat="kosong"] .mtk-emo b::before{content:"💭"}
#mtFab[data-lihat="borang"] .mtk-emo b::before{content:"✍️"}
#mtFab[data-lihat="tempahan"] .mtk-emo b::before{content:"📅"}
#mtFab[data-lihat="pelanggan"] .mtk-emo b::before{content:"👥"}
#mtFab[data-lihat="galeri"] .mtk-emo b::before{content:"📸"}
#mtFab[data-lihat="ai"] .mtk-emo b::before{content:"🤖"}
#mtFab[data-lihat="tetapan"] .mtk-emo b::before{content:"⚙️"}
/* v2.86.122: bukti wajib sebelum Siap */
.bk-kad{border:1px solid var(--line);border-left:4px solid #f59e0b;border-radius:12px;padding:12px 14px;margin:0 0 14px;display:grid;gap:6px}
.bk-kad.lengkap{border-left-color:#16a34a}
.bk-h{display:flex;align-items:center;justify-content:space-between;gap:8px}
.bk-sen{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.bk-i{display:flex;gap:8px;align-items:flex-start}
.bk-i.ok .bk-tj{opacity:.75}
.bk-t{font-size:16px;line-height:1.3}
.bk-isi{display:grid;gap:4px;min-width:0;flex:1}
.bk-isi .rowbtns{margin-top:2px}
.bk-borang{display:grid;gap:6px;margin-top:4px}
.bk-borang input{width:100%}
/* v2.86.124: sorotan bukti wajib (Tuan AJ tunjuk) */
@keyframes bkSorot{0%,100%{box-shadow:0 0 0 2px #f59e0b,0 0 0 6px rgba(245,158,11,.25)}50%{box-shadow:0 0 0 3px #f59e0b,0 0 18px 8px rgba(245,158,11,.45)}}
.bk-sorot{animation:bkSorot 1.4s ease-in-out infinite;border-radius:10px;position:relative;z-index:1}
.bk-i.bk-sorot{padding:6px;margin:-6px}
@media (prefers-reduced-motion:reduce){.bk-sorot{animation:none;box-shadow:0 0 0 3px #f59e0b}}
/* v2.86.126: part yang ditukar */
.bk-pt{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.bk-pt li{display:flex;gap:8px;align-items:center;justify-content:space-between;font-size:14px}
.bk-pt-f{display:grid;grid-template-columns:1fr 80px;gap:6px}
.bk-pt-f input{width:100%}
.bk-pt-lagi summary{cursor:pointer}

/* ===== v2.86.127: Status pangkalan data (Utama Developer) & Server & integrasi (Tetapan) ===== */
.u-db{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);padding:12px 14px;margin:0 0 16px}
.dbs-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.dbs-tog{all:unset;cursor:pointer;display:flex;align-items:center;gap:10px;flex:1;min-width:0}
.dbs-tog:focus-visible{outline:2px solid var(--red);outline-offset:3px;border-radius:6px}
.dbs-tog::after{content:"▾";color:var(--muted);transition:transform .2s}
.dbs-tog[aria-expanded="false"]::after{transform:rotate(-90deg)}
.dbs-st{font-size:12px;font-weight:700;padding:2px 9px;border-radius:999px;background:color-mix(in srgb,var(--ink) 7%,transparent)}
.dbs-st.ok{background:var(--ok-soft);color:var(--ok)}.dbs-st.perhatian{background:var(--warn-soft);color:var(--warn)}.dbs-st.kritikal{background:var(--red-soft);color:var(--red)}
.dbs-masa{margin-left:auto}
.dbs-sebab{margin-top:8px;font-size:13px;font-weight:600;padding:6px 10px;border-radius:8px}
.dbs-sebab.perhatian{background:var(--warn-soft);color:var(--warn)}.dbs-sebab.kritikal{background:var(--red-soft);color:var(--red)}
.dbs-renew{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.dbs-rc{font:inherit;font-size:12px;font-weight:600;border-radius:999px;padding:3px 10px;cursor:pointer;border:1px solid var(--line);background:transparent;color:var(--ink)}
.dbs-rc.kuning{border-color:color-mix(in srgb,var(--warn) 60%,var(--line));color:var(--warn)}.dbs-rc.merah{border-color:color-mix(in srgb,var(--red) 60%,var(--line));color:var(--red)}
.dbs-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:12px}
.dbs-k{border:1px solid var(--line);border-radius:10px;padding:8px 10px;display:flex;flex-direction:column;gap:1px;min-width:0}
.dbs-k span{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.dbs-k b{font-size:19px;line-height:1.2}
.dbs-k small{font-size:11px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dbs-k.kuning{border-color:color-mix(in srgb,var(--warn) 55%,var(--line))}.dbs-k.kuning b{color:var(--warn)}
.dbs-k.merah{border-color:color-mix(in srgb,var(--red) 60%,var(--line))}.dbs-k.merah b{color:var(--red)}
.dbs-graf{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:8px}
.dbs-g{border:1px solid var(--line);border-radius:10px;padding:8px 10px;min-width:0}
.dbs-gh{display:flex;justify-content:space-between;gap:6px;font-size:11px;color:var(--muted)}
.dbs-gh b{color:var(--ink);font-size:12px}.dbs-gh small{font-weight:400;color:var(--muted)}
.dbs-gk{padding:10px 0 4px}
.dbs-svg{width:100%;height:40px;display:block;margin-top:4px}
.dbs-svg polyline{fill:none;stroke:var(--info);stroke-width:1.6;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.dbs-svg polyline.lama{stroke:var(--muted);opacity:.45}
.dbs-svg .dbs-mula{stroke:var(--muted);stroke-width:1;stroke-dasharray:2 2;vector-effect:non-scaling-stroke;opacity:.8}
.dbs-gh b.kuning{color:var(--warn)}.dbs-gh b.merah{color:var(--red)}
.dbs-gs{font-size:10.5px;color:var(--muted);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dbs-nota{margin-top:8px;color:var(--muted);line-height:1.45}
.dbs-svg .dbs-had{stroke:var(--warn);stroke-width:1;stroke-dasharray:3 3;vector-effect:non-scaling-stroke;opacity:.7}
.dbs-jalur{display:flex;gap:1px;height:8px;margin-top:10px;border-radius:4px;overflow:hidden}
.dbs-jalur i{flex:1;background:var(--ok);opacity:.55}.dbs-jalur i.perhatian{background:var(--warn);opacity:.85}.dbs-jalur i.kritikal{background:var(--red);opacity:1}
.dbs-kaki{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin-top:10px}
.dbs-kaki .btn{margin-left:auto}
.dbs-mr{color:var(--warn)}
@media (max-width:760px){.dbs-grid,.dbs-graf{grid-template-columns:repeat(2,minmax(0,1fr))}.dbs-masa{margin-left:0}.dbs-kaki .btn{margin-left:0}}
.itg-ring{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:10px 0 12px}
.itg-st{border:1px solid var(--line);border-radius:var(--r);padding:10px 12px;background:var(--surface);display:flex;flex-direction:column;gap:2px;min-width:0}
.itg-st b{font-size:20px;line-height:1.15}.itg-st span{font-size:12px;color:var(--muted)}
.itg-st.kuning{border-color:color-mix(in srgb,var(--warn) 55%,var(--line))}.itg-st.kuning b{color:var(--warn)}
.itg-st.merah{border-color:color-mix(in srgb,var(--red) 60%,var(--line))}.itg-st.merah b{color:var(--red)}
.itg-g{margin-top:14px}
.itg-kad{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);padding:10px 12px;margin-top:8px}
.itg-kad.kuning{border-left:3px solid var(--warn)}.itg-kad.merah{border-left:3px solid var(--red)}
.itg-t{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.itg-t b{overflow-wrap:anywhere}
.itg-meta,.itg-nota{margin-top:3px;overflow-wrap:anywhere}
.itg-nota{color:var(--muted)}
.itg-ak{margin-top:8px}
.pill.itg-ok{background:var(--ok-soft);color:var(--ok)}.pill.itg-kuning{background:var(--warn-soft);color:var(--warn)}.pill.itg-merah{background:var(--red-soft);color:var(--red)}
.pill.itg-tiada{background:color-mix(in srgb,var(--ink) 6%,transparent);color:var(--muted)}
.itg-tag{font-size:11px;font-weight:600;padding:1px 7px;border-radius:999px;border:1px solid var(--line);color:var(--muted)}
.itg-borang{border:1px solid color-mix(in srgb,var(--red) 35%,var(--line));border-radius:var(--r);padding:12px;margin-top:10px;background:var(--surface)}
.itg-fg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 12px;margin-bottom:10px}
.itg-luas{grid-column:1/-1}
.itg-kos{display:flex;gap:6px}.itg-kos select{width:auto;flex:0 0 auto}.itg-kos input{flex:1;min-width:0}
.itg-cek{display:flex;align-items:center;justify-content:flex-start;gap:8px;font-size:13px;grid-column:1/-1;cursor:pointer}
.itg-cek input{width:18px;height:18px;margin:0;flex:0 0 auto}
.itg-st b.itg-kos-b{font-size:15px;line-height:1.3}
@media (max-width:640px){.itg-ring{grid-template-columns:repeat(2,minmax(0,1fr))}.itg-fg{grid-template-columns:1fr}}

/* ===== v2.86.129: notis versi baharu — kad kemas (ikon, versi semasa → baharu, status memuat) ===== */
.versi-notis{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;background:linear-gradient(var(--surface),var(--surface)),var(--bg);border-left-width:1px;border-color:color-mix(in srgb,var(--ok,#16a34a) 45%,var(--line));box-shadow:0 12px 34px rgba(0,0,0,.28);animation:vn-naik .32s cubic-bezier(.2,.7,.2,1) both}
.versi-notis[hidden]{display:none}
.vn-ik{flex:0 0 34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:18px;font-weight:700;background:var(--ok-soft);color:var(--ok)}
.vn-isi{flex:1;min-width:0}
.versi-notis .vn-t{margin:0 0 2px;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px}
.vn-v{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}.vn-v b{color:var(--ok)}
.versi-notis .vn-s{margin:0;color:var(--muted)}
.versi-notis .rowbtns{margin-top:10px;display:grid;grid-template-columns:1fr auto;gap:8px}
.versi-notis .btn.memuat{opacity:.85;cursor:progress}
@keyframes vn-naik{from{opacity:0;transform:translate(-50%,12px)}to{opacity:1;transform:translate(-50%,0)}}
@media (prefers-reduced-motion:reduce){.versi-notis{animation:none}}

/* v2.86.130: mod AUTO WhatsApp — bahagian tetapan akaun & sebab tidak dihantar AUTO dalam Inbox */
.ac-auto{border:1px dashed var(--info);border-radius:10px;padding:8px 12px 12px}
.ac-auto>p.sm{margin:0 0 8px;color:var(--muted);line-height:1.45}
.ac-auto-sebab{color:var(--muted);margin:4px 0}

/* ===== v2.86.131: Untung Rugi → Iklan & ROI ===== */
.ik-panel{margin-top:12px}
.ik-ring{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:12px 0}
.ik-st{border:1px solid var(--line);border-radius:var(--r);padding:10px 12px;background:var(--surface);display:flex;flex-direction:column;gap:2px;min-width:0}
.ik-st span{font-size:12px;color:var(--muted)}.ik-st b{font-size:20px;line-height:1.2}.ik-st small{font-size:12px;font-weight:600}
.ik-st.hijau{border-color:color-mix(in srgb,var(--ok) 55%,var(--line))}.ik-st.hijau b{color:var(--ok)}
.ik-st.kuning{border-color:color-mix(in srgb,var(--warn) 55%,var(--line))}.ik-st.kuning b{color:var(--warn)}
.ik-st.merah{border-color:color-mix(in srgb,var(--red) 60%,var(--line))}.ik-st.merah b{color:var(--red)}
.ik-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.ik-kad{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);padding:12px;display:flex;flex-direction:column;gap:5px}
.ik-kad.hijau{border-top:3px solid var(--ok)}.ik-kad.kuning{border-top:3px solid var(--warn)}.ik-kad.merah{border-top:3px solid var(--red)}
.ik-kh{display:flex;justify-content:space-between;align-items:center;gap:6px}
.ik-kp{font-size:12px;font-weight:700;color:var(--muted)}.ik-kp.hijau{color:var(--ok)}.ik-kp.kuning{color:var(--warn)}.ik-kp.merah{color:var(--red)}
.ik-roi{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;padding:4px 0 6px;border-bottom:1px solid var(--line)}
.ik-roi span{font-size:12px;color:var(--muted)}.ik-roi b{font-size:24px}.ik-roi small{font-size:12px;color:var(--muted)}
.ik-kad.hijau .ik-roi b{color:var(--ok)}.ik-kad.kuning .ik-roi b{color:var(--warn)}.ik-kad.merah .ik-roi b{color:var(--red)}
.ik-b{display:flex;justify-content:space-between;gap:8px;font-size:13px}.ik-b span{color:var(--muted)}
.ik-borang{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px 12px;border:1px solid color-mix(in srgb,var(--red) 35%,var(--line));border-radius:var(--r);padding:12px;margin:10px 0;background:var(--surface)}
.ik-luas{grid-column:1/-1}
.ik-bl{display:flex;flex-direction:column;gap:6px}
.ik-bi{display:grid;grid-template-columns:minmax(0,1fr) auto auto auto auto;gap:10px;align-items:center;border:1px solid var(--line);border-radius:10px;padding:8px 10px}
.ik-pautan{margin-top:14px;border:1px solid var(--line);border-radius:var(--r);padding:10px 12px}
.ik-pautan summary{cursor:pointer;font-weight:700}
.ik-pt{display:grid;grid-template-columns:120px minmax(0,1fr) auto;gap:8px;align-items:center;margin-top:6px}
.ik-pt code{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:4px 6px;border-radius:6px;background:color-mix(in srgb,var(--ink) 6%,transparent)}
.ik-wa{max-width:320px;margin-top:6px}
/* v2.88.6: upload resit Meta & laporan AI iklan */
.ik-butang{display:flex;flex-wrap:wrap;gap:6px;margin-left:auto}
.ik-julat{white-space:nowrap}
/* v2.88.7: sambungan Meta Ads */
.ik-bi.ik-bi-meta{grid-template-columns:minmax(0,1fr) auto auto}
.ik-bi-abai{opacity:.6}.ik-bi-abai > b{text-decoration:line-through}
.ik-metaapi summary .pill{margin-left:6px;font-weight:600}
.ik-metaapi .apa{margin:10px 0}
.ik-cek{display:flex;align-items:center;gap:8px;flex-direction:row}.ik-cek input{width:auto}
.ik-akaun{display:flex;flex-direction:column;gap:8px}.ik-akaun .ik-cek{align-items:flex-start;border:1px solid var(--line);border-radius:10px;padding:8px 10px}
.ik-langkah{margin-top:8px}.ik-langkah summary{cursor:pointer;font-weight:600}.ik-langkah ol{padding-left:20px;margin:6px 0}.ik-langkah li{margin:3px 0}
#view-pnl .ik-panel .filters{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.ik-ainota{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:8px 10px;border-radius:10px;background:color-mix(in srgb,var(--blue,#3b82f6) 8%,var(--surface))}
.ik-lap{border:1px solid color-mix(in srgb,var(--blue,#3b82f6) 35%,var(--line));border-radius:var(--r);padding:12px 14px;margin:10px 0;background:var(--surface)}
.ik-lap-h{display:flex;align-items:center;gap:10px}.ik-lap-h .sm{margin-right:auto}
.ik-lap h4{margin:10px 0 4px;font-size:16px}.ik-lap p{margin:6px 0}.ik-lap ol{margin:6px 0 8px;padding-left:20px}.ik-lap li{margin:3px 0}
.ik-lap-p{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px;margin:8px 0}
.ik-lap-r{border:1px solid var(--line);border-radius:10px;padding:8px 10px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px}.ik-lap-r .sm{flex-basis:100%}
.ik-lap-r.hijau{border-left:3px solid var(--ok)}.ik-lap-r.kuning{border-left:3px solid var(--warn)}.ik-lap-r.merah{border-left:3px solid var(--red)}
@media (max-width:760px){.ik-panel .filters .seg{flex:1 1 100%}.ik-julat{width:100%}.ik-butang{margin-left:0;width:100%}.ik-butang .btn{flex:1 1 auto}}
@media (max-width:760px){.ik-ring{grid-template-columns:repeat(2,minmax(0,1fr))}.ik-borang{grid-template-columns:1fr 1fr}.ik-pt{grid-template-columns:1fr auto}.ik-pt b{grid-column:1/-1}.ik-bi{grid-template-columns:minmax(0,1fr) auto auto auto}.ik-bi .sm{grid-column:1/-1;order:5}}
/* v2.86.137: upload poster promo */
.ac-promo{border-left:4px solid var(--brand,#d63a3a)}
.ac-kb-poster{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0}
.ac-kb-poster img{width:72px;height:110px;object-fit:cover;border-radius:8px;border:1px solid var(--line)}
.ac-kb-baru{outline:2px solid #f59e0b;border-radius:10px}

/* ===== v2.86.148: notifikasi — cara selesaikan ===== */
.ajn-cad{font-size:12px;margin-top:4px;padding:6px 8px;border-radius:8px;background:color-mix(in srgb,var(--warn) 10%,transparent);color:var(--ink);line-height:1.4}
.ajn-cad b{color:var(--warn)}
/* v2.86.150: WhatsApp Inbox gaya WhatsApp — penapis berkiraan, senarai | chat setinggi skrin, telefon: chat skrin penuh */
.ac-jalur{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;width:100%;margin:0 0 12px;padding:10px 14px;border:1px solid var(--warn);border-left:5px solid var(--warn);border-radius:12px;background:var(--warn-soft);color:var(--ink);font:600 14px var(--body);cursor:pointer;text-align:left}
.ac-jalur>span:last-child{color:var(--warn);white-space:nowrap}
.ac-ib-atas{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;justify-content:space-between;margin-bottom:10px}
.ac-ib-st{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;max-width:100%}
.ac-ib-st::-webkit-scrollbar{display:none}
.ac-ib-st button{white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.ac-kira{font-style:normal;font-size:11px;font-weight:700;min-width:18px;padding:0 6px;border-radius:999px;background:var(--line);color:var(--muted);line-height:18px;text-align:center}
.ac-kira:empty{display:none}
.ac-st-perlu .ac-kira.ada{background:var(--red);color:#fff}
.ac-ib-st button[aria-pressed="true"] .ac-kira{background:color-mix(in srgb,var(--surface) 25%,transparent);color:inherit}
.ac-ib-cari{display:flex;gap:6px;align-items:center;flex:1 1 280px;justify-content:flex-end}
.ac-ib-cari input{flex:1 1 160px;min-width:0;width:auto}
.ac-ib-cari select{width:auto;max-width:170px}
#view-aiw .ac-inbox{grid-template-columns:minmax(270px,340px) minmax(0,1fr);gap:12px;height:calc(100dvh - 200px);min-height:560px;align-items:stretch}
#view-aiw .ac-senarai{max-height:none;height:100%;overflow:auto;margin:0}
#view-aiw .ac-pl button{flex-direction:row;align-items:flex-start;gap:10px;padding:10px 12px}
#view-aiw .ac-pl button.belum b{font-weight:800}
#view-aiw .ac-pl button.perlu{box-shadow:inset 4px 0 0 var(--red)}
.ac-pl-i{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.ac-pl-i .ac-pl-a{align-items:center}
.ac-pl-i .ac-pl-a>b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ac-pl-i .ac-pl-a>.sm{flex:none}
.ac-pl-p{display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.ac-pl-p:empty{display:none}
.ac-av{flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--info-soft);color:var(--info);font:700 13px var(--body)}
#view-aiw .ac-chat{display:flex;flex-direction:column;height:100%;min-height:0;overflow:hidden;margin:0}
.ac-chat-kosong{margin:auto;display:grid;gap:6px;justify-items:center;text-align:center;padding:24px;color:var(--muted)}
.ac-chat-kosong>div{font-size:40px}
.ac-ch{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.ac-ch-id{flex:1 1 180px;min-width:0}
.ac-ch-id>b{display:block;font-size:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ac-ch-aksi{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.ac-ch-aksi select{width:auto}
.ac-btn-ambil{border-color:var(--info);color:var(--info)}
.ac-balik{display:none;font-size:18px;padding:4px 10px}
#view-aiw .ac-ambil{padding:6px 14px;background:var(--info-soft)}
.ac-maklumat{border-bottom:1px solid var(--line);padding:6px 14px;font-size:13px}
.ac-maklumat>summary{cursor:pointer;font-weight:600;color:var(--muted)}
.ac-maklumat-b{display:grid;gap:4px;padding:6px 0}
#view-aiw .ac-mesej{flex:1 1 auto;min-height:0;max-height:none;overflow:auto;padding:14px 16px;gap:6px;background:color-mix(in srgb,var(--ok-soft) 35%,var(--bg))}
#view-aiw .ac-m{max-width:78%;border:0;border-radius:12px;padding:7px 10px 5px;box-shadow:0 1px 1px rgba(0,0,0,.08)}
#view-aiw .ac-m-masuk{background:var(--surface);border:1px solid var(--line);border-top-left-radius:4px}
#view-aiw .ac-m-keluar{background:#d9fdd3;color:#111;border-top-right-radius:4px}
#view-aiw .ac-m-keluar.ac-p-ai{background:#dbeafe;color:#111}
#view-aiw .ac-m-nota{background:var(--warn-soft);color:var(--ink);max-width:90%}
#view-aiw .ac-m-h{margin-bottom:2px}
.ac-m-s{font-size:12px;font-weight:700;color:var(--info)}
.ac-m-keluar .ac-m-s{color:#1d7a46}
.ac-m-w{font-size:11px;color:var(--muted);text-align:right;margin-top:2px}
#view-aiw .ac-m-keluar .ac-m-w,#view-aiw .ac-m-keluar .sm{color:#4b5563}
#view-aiw .ac-draf-l{flex:0 1 auto;max-height:34%;overflow:auto;padding:8px 14px;border-top:1px solid var(--line);background:var(--surface)}
.ac-draf.aktif{border-left-color:var(--red);box-shadow:0 0 0 1px color-mix(in srgb,var(--red) 30%,transparent)}
.ac-draf-t{color:var(--red);font-size:13px}
.ac-draf-b{align-items:center}
.ac-btn-lulus{font-size:15px;padding:9px 18px;box-shadow:0 4px 14px -6px color-mix(in srgb,var(--red) 70%,transparent)}
.ac-btn-batal{color:var(--muted)}
.ac-draf-dulu>summary{cursor:pointer;font-size:13px;color:var(--muted);padding:4px 0}
.ac-draf-dulu{display:grid;gap:8px}
#view-aiw .ac-tulis{flex:none;padding:10px 14px 12px;border-top:1px solid var(--line);gap:6px}
.ac-tulis-b{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.ac-btn-ai{border-color:var(--info);color:var(--info)}
.ac-nota-d{margin-left:auto}
.ac-nota-d>summary{cursor:pointer;font-size:13px;color:var(--muted);list-style:none}
.ac-nota-b{display:flex;gap:6px;margin-top:6px}
.ac-nota-b input{flex:1;min-width:140px}
@media (max-width:1023px){
  #view-aiw .ac-inbox{display:block;height:auto;min-height:0}
  #view-aiw .ac-senarai{height:auto;max-height:none}
  #view-aiw .ac-chat{display:none}
  #view-aiw .ac-inbox.ac-buka .ac-chat{display:flex;position:fixed;inset:0;z-index:40;height:100dvh;border-radius:0;border:0;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
  .ac-balik{display:inline-flex}
  .ac-ch{flex-wrap:nowrap;padding:8px 10px}
  .ac-ch .ac-av{display:none}
  .ac-ch-aksi select{max-width:110px}
  #view-aiw .ac-m{max-width:88%}
  .ac-ib-cari{flex-basis:100%}
  .ac-nota-d{margin-left:0;flex-basis:100%}
}
/* v2.86.152: butang AI ON / OFF setiap nombor WhatsApp */
.ac-ai-suis{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;margin-bottom:10px}
.ac-ai-suis:empty{display:none}
.ac-suis-ak{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;padding:4px 4px 4px 10px;border:1px solid var(--line);border-radius:999px;background:var(--surface)}
.ac-suis-ai{display:inline-flex;align-items:center;gap:6px;font:700 12px var(--body);padding:5px 10px 5px 6px;border-radius:999px;border:1px solid var(--line);background:var(--line);color:var(--muted);cursor:pointer;white-space:nowrap}
.ac-suis-ai i{width:26px;height:14px;border-radius:999px;background:color-mix(in srgb,var(--muted) 45%,transparent);position:relative;flex:none;transition:background .2s}
.ac-suis-ai i::after{content:"";position:absolute;top:2px;left:2px;width:10px;height:10px;border-radius:50%;background:#fff;transition:left .2s}
.ac-suis-ai.on{background:var(--ok-soft);border-color:var(--ok);color:var(--ok)}
.ac-suis-ai.on i{background:var(--ok)}
.ac-suis-ai.on i::after{left:14px}
.ac-suis-ai b{font-size:10px;font-weight:800;opacity:.8}
.ac-suis-ai:disabled{opacity:.5;cursor:wait}
.ac-ak .card-h .ac-suis-ai{margin-left:auto}
/* v2.86.153: bar atas Inbox padat — carian + akaun + 🤖 AI + segar, panel suis AI boleh dibuka, penapis Belum dibaca & Draf */
#view-aiw .ac-ib-atas{display:grid;gap:8px;margin-bottom:10px}
#view-aiw .ac-ib-cari{flex:none;justify-content:flex-start;flex-wrap:nowrap}
#view-aiw .ac-ib-cari input{flex:1 1 auto}
.ac-ai-btn{white-space:nowrap;border-color:var(--ok);color:var(--ok)}
.ac-ai-btn b{font-size:11px}
.ac-ai-btn.ada-off{border-color:var(--warn);color:var(--warn);background:var(--warn-soft)}
.ac-ai-btn[aria-expanded="true"]{box-shadow:0 0 0 2px color-mix(in srgb,var(--ok) 30%,transparent)}
#view-aiw .ac-ai-suis{margin:0;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
#view-aiw .ac-ai-suis[hidden]{display:none}
#view-aiw .ac-ib-st button{padding:6px 11px}

/* ===== v2.86.154: Tempahan — bilangan pada butang Hari ini / Esok / Lusa ===== */
#t-hari .t-bil:not(:empty){display:inline-block;margin-left:6px;min-width:18px;padding:0 6px;border-radius:999px;font-size:11px;line-height:18px;background:color-mix(in srgb,var(--red) 18%,transparent);color:inherit}
#t-hari button[aria-pressed="true"] .t-bil:not(:empty){background:color-mix(in srgb,#fff 28%,transparent)}
/* v2.86.154: transkrip mesej suara WhatsApp */
.ac-transkrip{margin-top:6px;padding:6px 8px;border-radius:8px;background:color-mix(in srgb,var(--info-soft) 70%,transparent);font-size:13px;line-height:1.4;overflow-wrap:anywhere}
/* v2.86.157: skrol WhatsApp Inbox lebih lancar — gelembung di luar skrin tidak dilukis, tiada bayang, skrol tidak "bocor" ke halaman */
#view-aiw .ac-mesej,#view-aiw .ac-senarai{overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
#view-aiw .ac-m{box-shadow:none;content-visibility:auto;contain-intrinsic-size:auto 64px}
#view-aiw .ac-pl li{content-visibility:auto;contain-intrinsic-size:auto 76px}
#view-aiw .ac-lampiran img{max-height:260px;max-width:100%;height:auto;border-radius:8px}
#view-aiw .ac-lama{align-self:center;margin:4px 0 8px}

/* auto simpan kenalan ikut akaun WhatsApp (AI Center → Akaun WhatsApp) */
.ac-kenalan{border:1px dashed var(--line);border-radius:10px;padding:8px 12px 12px;display:grid;gap:8px}
.ac-kenalan .ac-nota{margin:0}
.ac-kenalan .rowbtns{gap:8px;flex-wrap:wrap;align-items:center}
.ac-k-tel{flex:1 1 180px;min-width:0}
/* v2.87.0 / v2.87.4: Posting media sosial — kad ringkasan, jalur sambungan, grid kad */
.pos-ringkasan{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-bottom:12px}
.pos-r{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:12px 14px;border-radius:var(--r,10px);border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;text-align:left;box-shadow:var(--shadow);border-left-width:4px;font:inherit}
.pos-r[aria-pressed="true"]{outline:2px solid var(--ink);outline-offset:-1px}
.pos-r-n{font-size:26px;font-weight:700;line-height:1.1;font-variant-numeric:tabular-nums}
.pos-r-l{font-size:12px;color:var(--muted);font-weight:600}
.pos-r-kuning{border-left-color:var(--warn)}.pos-r-biru{border-left-color:var(--info)}.pos-r-hijau{border-left-color:var(--ok)}.pos-r-merah{border-left-color:var(--red)}.pos-r-kelabu{border-left-color:var(--line)}
.pos-jalur{flex-direction:row;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;margin-bottom:12px;flex-wrap:wrap}
.pos-jalur-s{display:flex;gap:8px;flex-wrap:wrap}
.pos-jalur-c{display:inline-flex;align-items:center;gap:8px;padding:6px 10px 6px 6px;border-radius:999px;border:1px solid var(--line);background:var(--bg)}
.pos-jalur-c>span:last-child{display:flex;flex-direction:column;line-height:1.15}
.pos-jalur-c b{font-size:13px}.pos-jalur-c small{font-size:11px;font-weight:600}
.pos-j-ok small{color:var(--ok)}.pos-j-tindakan small{color:var(--red)}.pos-j-manual small{color:var(--warn)}.pos-j-muat small{color:var(--muted)}
.pos-pl{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;font:700 11px var(--body);color:#fff;flex:none}
.pos-pl-fb{background:#1877f2}.pos-pl-ig{background:linear-gradient(45deg,#f58529,#dd2a7b,#8134af)}.pos-pl-th{background:#111;border:1px solid #444}.pos-pl-tt{background:#010101;box-shadow:inset -2px 0 #fe2c55,inset 2px 0 #25f4ee}
.pos-alat{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.pos-alat-k{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.pos-alat-k input{width:220px}
.pos-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:14px;align-items:start}
.pos-k{overflow:hidden}
.pos-k-media{position:relative;aspect-ratio:16/10;background:var(--bg);display:flex;align-items:center;justify-content:center;border-bottom:1px solid var(--line);overflow:hidden}
.pos-k-media img,.pos-k-media video{width:100%;height:100%;object-fit:cover}
.pos-k-ikon{font-size:34px;color:var(--muted)}
.pos-k-teks{aspect-ratio:auto;min-height:96px;padding:16px;font-size:15px;line-height:1.45;white-space:pre-wrap;word-break:break-word;align-items:flex-start;justify-content:flex-start}
.pos-k-teks span{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.pos-k-lencana{position:absolute;left:8px;bottom:8px;background:rgba(0,0,0,.62);color:#fff;font-size:11px;font-weight:600;padding:3px 8px;border-radius:999px}
.pos-k-badan{padding:12px 14px;display:flex;flex-direction:column;gap:8px;min-width:0}
.pos-k-atas{display:flex;justify-content:space-between;align-items:center;gap:8px}
.pos-k-tajuk{margin:0;font-size:15px;font-weight:700;line-height:1.3;word-break:break-word}
.pos-k-kapsyen{margin:0;font-size:13px;color:var(--muted);white-space:pre-wrap;word-break:break-word;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.pos-k-plat{display:flex;flex-wrap:wrap;gap:6px}
.pos-k-pl{display:inline-flex;align-items:center;gap:5px;font-size:12px;padding:2px 8px 2px 2px;border:1px solid var(--line);border-radius:999px;background:var(--bg)}
.pos-k-pl .pos-pl{width:20px;height:20px;font-size:9px}
.pos-k-pl a{font-weight:600}
.pos-k-ralat{font-size:12px;color:var(--red);background:var(--red-soft);border-radius:6px;padding:6px 8px;word-break:break-word}
.pos-k-ulasan{font-size:12px;background:var(--warn-soft);border-left:3px solid var(--warn);border-radius:4px;padding:6px 8px}
.pos-k-oleh:empty{display:none}
.pos-ralat-n{color:var(--warn);margin:6px 0 0}
.pos-k-kaki{border-top:1px solid var(--line);padding:10px 14px;display:flex;flex-direction:column;gap:6px}
.pos-k-b1{display:flex;gap:6px;flex-wrap:wrap}
.pos-k-b2{display:flex;gap:14px;flex-wrap:wrap}
.pos-pautan{background:none;border:0;padding:0;font:600 12px var(--body);color:var(--muted);cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.pos-pautan:hover{color:var(--ink)}
.pos-k-gagal{border-color:var(--red)}
.pos-kosong{display:flex;flex-direction:column;align-items:center;gap:6px;padding:40px 16px;border:1px dashed var(--line);border-radius:var(--r,10px);text-align:center}
.pos-kosong-i{font-size:30px;color:var(--muted)}
.pos-samb-kad{margin-bottom:12px}
.pos-samb{display:grid;gap:8px;padding:12px 16px}
.pos-samb-r{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.pos-samb-r b{min-width:84px}
@media (max-width:900px){.pos-ringkasan{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:600px){.pos-ringkasan{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.pos-r{padding:10px}.pos-r-n{font-size:20px}.pos-r-l{font-size:11px}.pos-alat-k,.pos-alat-k input{width:100%}.pos-alat-k .btn{flex:1}.pos-grid{grid-template-columns:minmax(0,1fr)}}
.pos-media{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.pos-m{position:relative;width:104px;height:104px;border-radius:8px;overflow:hidden;border:1px solid var(--line);background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:12px;text-align:center}
.pos-m img,.pos-m video{width:100%;height:100%;object-fit:cover}
.pos-m-x,.pos-m-k{position:absolute;top:4px;width:24px;height:24px;border-radius:50%;border:0;background:rgba(0,0,0,.6);color:#fff;cursor:pointer;font-size:13px;line-height:24px;padding:0}
.pos-m-x{right:4px}.pos-m-k{left:4px}
.pos-m-tambah{cursor:pointer;font-size:26px;color:var(--muted);border-style:dashed}
.pos-m-kerja span:first-child{padding:0 6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
/* v2.88.1: kepala, panduan "Cara posting" & borang 4 langkah */
.pos-kepala{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.pos-kepala-t{display:flex;flex-direction:column;gap:2px;min-width:0}
.pos-kepala-t b{font-size:17px}
.pos-kepala-b{display:flex;gap:8px;flex-wrap:wrap}
.pos-btn-utama{font-weight:700;padding-inline:18px}
.pos-panduan{padding:14px 16px;margin-bottom:14px;border-left:4px solid var(--info)}
.pos-panduan-h{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:10px}
.pos-langkah-senarai{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.pos-langkah-senarai li{display:flex;gap:10px;align-items:flex-start;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.pos-langkah-senarai li>div{display:flex;flex-direction:column;gap:3px;min-width:0}
.pos-langkah-senarai li span:not(.pos-no){font-size:12.5px;color:var(--muted);line-height:1.45}
.pos-no{flex:none;width:26px;height:26px;border-radius:50%;background:var(--ink);color:var(--surface);display:inline-flex;align-items:center;justify-content:center;font:700 13px var(--body)}
.pos-panduan-nota{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:10px;font-size:12px;color:var(--muted)}
.pos-panduan-nota span{display:inline-flex;align-items:center;gap:4px;flex-wrap:wrap}
.pos-panduan-nota .pos-pl{width:18px;height:18px;font-size:8px}
.pos-ed{padding:0}
.pos-ed-atas{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--line)}
.pos-ed-atas b{font-size:16px}
.pos-ed-borang{display:flex;flex-direction:column}
.pos-langkah{padding:16px 18px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:12px}
.pos-langkah-h{display:flex;gap:10px;align-items:flex-start}
.pos-langkah-h>div{display:flex;flex-direction:column;gap:2px}
.pos-langkah-h b{font-size:15px}.pos-langkah-h small{font-size:12px;color:var(--muted)}
.pos-ai-bar{display:flex;gap:8px;flex-wrap:wrap}
.pos-ai-bar input{flex:1 1 220px;width:auto}.pos-ai-bar select{width:auto}
.pos-pl-pilih{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.pos-pl-kad{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--bg);cursor:pointer;position:relative}
.pos-pl-kad input{position:absolute;opacity:0;pointer-events:none}
.pos-pl-kad>span{display:flex;flex-direction:column;min-width:0}
.pos-pl-kad b{font-size:14px}.pos-pl-kad small{font-size:11px;color:var(--muted)}
.pos-pl-kad:has(input:checked){border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.pos-pl-kad:has(input:checked)::after{content:"✓";position:absolute;top:6px;right:9px;font-weight:700;font-size:13px}
.pos-pl-kad:has(input:focus-visible){outline:2px solid var(--info);outline-offset:2px}
.pos-dua{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.pos-ed-kaki{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;padding:14px 18px;position:sticky;bottom:0;background:var(--surface);border-radius:0 0 var(--r,10px) var(--r,10px);z-index:2}
.pos-ed-b{display:flex;gap:8px;flex-wrap:wrap}
@media (max-width:900px){.pos-langkah-senarai{grid-template-columns:repeat(2,minmax(0,1fr))}.pos-pl-pilih{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.pos-langkah-senarai{grid-template-columns:minmax(0,1fr)}.pos-dua{grid-template-columns:minmax(0,1fr)}.pos-kepala-b{width:100%}.pos-kepala-b .btn{flex:1}.pos-ed-b{width:100%}.pos-ed-b .btn{flex:1 1 40%}.pos-langkah,.pos-ed-atas,.pos-ed-kaki{padding-inline:14px}}
.pos-ai-v{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:8px;margin-top:8px}
.pos-ai-k{border:1px solid var(--line);border-radius:8px;padding:10px;display:flex;flex-direction:column;gap:6px;background:var(--bg)}
.pos-ai-k p{margin:0;white-space:pre-wrap;font-size:13px}
.pos-ed textarea{width:100%;font:15px var(--body);padding:9px 10px;border:1px solid var(--line);border-radius:6px;background:var(--bg);color:var(--ink);resize:vertical}

/* ===== v2.87.1: Tema SCS Soft Glass V2 (js/tema.js) — hanya bila html.softglass; Klasik & DOTLINK tidak terjejas =====
   Kaca (blur 18px) pada sidebar, bar bawah, header, popup, amaran & toast; kad, jadual, borang & angka kewangan kekal legap.
   Tahap: data-kaca="lembut" (lalai) / "penuh" (kad separa telus) / "solid" (tiada blur, tiada animasi). Teks & ikon tidak dipudarkan. */
.sg-kaca{display:none}
html.softglass .sg-kaca{display:flex}
html.softglass .tema-set,html.softglass .tema-login{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:420px){html.softglass .tema-set{grid-template-columns:1fr}}
html.softglass:root{--bg:#f4f3f5;--surface:#fff;--ink:#1d1d21;--muted:#66646b;--line:#e6e3e8;--r:16px;
  --sg-kaca:rgba(255,255,255,.66);--sg-kaca-kuat:rgba(255,255,255,.82);--sg-tepi:rgba(255,255,255,.7);--sg-blur:blur(18px) saturate(1.5);
  --sg-bayang:0 1px 2px rgba(30,20,30,.04),0 8px 24px -12px rgba(30,20,30,.14);
  --side:var(--sg-kaca);--side-ink:#2a292e;--side-muted:#86838b;--side-hover:rgba(20,20,30,.05);--side-on:#fff}
html.softglass:root[data-warna="gelap"]{--bg:#111114;--surface:#1b1b1f;--ink:#f1eff2;--muted:#a6a3aa;--line:#2e2d33;
  --sg-kaca:rgba(26,26,31,.62);--sg-kaca-kuat:rgba(30,30,36,.82);--sg-tepi:rgba(255,255,255,.08);
  --sg-bayang:0 1px 2px rgba(0,0,0,.3),0 10px 28px -14px rgba(0,0,0,.6);
  --side:var(--sg-kaca);--side-ink:#ebe8ee;--side-muted:#8f8b94;--side-hover:rgba(255,255,255,.06);--side-on:rgba(255,255,255,.09)}
/* latar dekorasi lembut (statik, tidak mengganggu data) */
html.softglass body{background:radial-gradient(60vmax 40vmax at 8% -6%,rgba(211,32,43,.10),transparent 60%),radial-gradient(50vmax 40vmax at 104% 18%,rgba(211,32,43,.08),transparent 62%),radial-gradient(70vmax 50vmax at 70% 110%,rgba(120,110,140,.08),transparent 60%),var(--bg);background-attachment:fixed}
html.softglass[data-warna="gelap"] body{background:radial-gradient(60vmax 40vmax at 8% -6%,rgba(239,70,81,.10),transparent 60%),radial-gradient(70vmax 50vmax at 80% 110%,rgba(90,80,120,.12),transparent 60%),var(--bg);background-attachment:fixed}
/* sidebar kaca cerah */
html.softglass .side{background:var(--sg-kaca);-webkit-backdrop-filter:var(--sg-blur);backdrop-filter:var(--sg-blur);border-right:1px solid var(--sg-tepi);box-shadow:var(--sg-bayang)}
html.softglass .side-brand{border-bottom-color:var(--line)}
html.softglass .side-brand .logo,html.softglass .side-nama,html.softglass .side-who{color:var(--ink)}
html.softglass .side-user{border-top-color:var(--line)}
html.softglass .side-user .btn{border-color:var(--line)}
html.softglass :is(nav.tabs button.owner,nav.tabs button.dev)::after{border-color:var(--line)}
html.softglass nav.tabs button{border-radius:12px;transition:background-color .2s ease,color .2s ease}
html.softglass nav.tabs button[aria-selected="true"]{background:color-mix(in srgb,var(--red) 10%,var(--surface));color:var(--red);box-shadow:0 1px 2px rgba(0,0,0,.04),inset 0 0 0 1px color-mix(in srgb,var(--red) 18%,transparent)}
html.softglass[data-warna="gelap"] nav.tabs button[aria-selected="true"]{background:color-mix(in srgb,var(--red) 18%,transparent);color:#fff}
html.softglass nav.tabs button[aria-selected="true"] .mn-l::after{display:none}
html.softglass .side-bg,html.softglass .drawer-bg{background:rgba(20,18,24,.32)}
/* header melekat & bar bawah */
html.softglass header.top{background:var(--sg-kaca);border-bottom-color:var(--sg-tepi);-webkit-backdrop-filter:var(--sg-blur);backdrop-filter:var(--sg-blur)}
@media (max-width:1023px){
  html.softglass .bnav{background:var(--sg-kaca-kuat);-webkit-backdrop-filter:var(--sg-blur);backdrop-filter:var(--sg-blur);border-top:1px solid var(--sg-tepi);box-shadow:0 -8px 24px -12px rgba(30,20,30,.18);border-radius:18px 18px 0 0}
  html.softglass .bnav button[aria-current]{color:var(--red)}
}
/* kad & kotak legap (data jelas), sudut 14–16px */
html.softglass :is(.tile,.card,.auth){border-radius:16px;border-color:var(--line);box-shadow:var(--sg-bayang)}
html.softglass .auth{border-top:1px solid var(--line);background:var(--sg-kaca-kuat);-webkit-backdrop-filter:var(--sg-blur);backdrop-filter:var(--sg-blur)}
html.softglass .auth .btn.primary{width:100%;padding:12px 14px}
html.softglass .btn{border-radius:10px;transition:background-color .15s ease,box-shadow .15s ease}
html.softglass .btn.primary{box-shadow:0 6px 16px -8px color-mix(in srgb,var(--red) 70%,transparent)}
html.softglass :is(input,select,textarea){border-radius:10px;background:var(--surface)}
html.softglass .drawer{background:var(--bg);border-radius:18px 0 0 18px;box-shadow:-16px 0 40px -12px rgba(20,10,20,.28)}
html.softglass .drawer .dhead{background:var(--bg)}
/* popup, amaran & toast kaca — tulisan kekal legap */
html.softglass .pop{background:var(--sg-kaca-kuat);-webkit-backdrop-filter:var(--sg-blur);backdrop-filter:var(--sg-blur);border:1px solid var(--sg-tepi);border-radius:18px;box-shadow:0 24px 60px -20px rgba(20,10,20,.4)}
html.softglass .amaran-m{background:var(--sg-kaca-kuat);-webkit-backdrop-filter:var(--sg-blur);backdrop-filter:var(--sg-blur);border-radius:18px}
html.softglass .amaran-bg{background:rgba(20,18,24,.3)}
html.softglass .toast{background:var(--sg-kaca-kuat);color:var(--ink);-webkit-backdrop-filter:var(--sg-blur);backdrop-filter:var(--sg-blur);border:1px solid var(--sg-tepi);border-radius:14px;box-shadow:var(--sg-bayang)}
html.softglass .toast.err{background:var(--red);color:#fff}
/* Full Glass: kad juga separa telus (jadual & borang di dalamnya kekal di atas permukaan kad) */
html.softglass[data-kaca="penuh"] :is(.tile,.card){background:var(--sg-kaca-kuat);-webkit-backdrop-filter:var(--sg-blur);backdrop-filter:var(--sg-blur);border-color:var(--sg-tepi)}
/* Solid / pelayar tanpa blur: permukaan legap */
html.softglass:root[data-kaca="solid"]{--sg-kaca:var(--surface);--sg-kaca-kuat:var(--surface);--sg-tepi:var(--line)}
html.softglass[data-kaca="solid"] *{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){html.softglass:root{--sg-kaca:var(--surface);--sg-kaca-kuat:var(--surface)}}
/* gerakan: halaman fade + 10px; log masuk zoom lembut; makluman berkembang dari butang & kembali ke butang */
html.softglass [id^="view-"].sg-masuk{animation:sg-naik .26s cubic-bezier(.2,.7,.2,1) both}
html.softglass #screen-app.sg-login{animation:sg-zoom .5s cubic-bezier(.2,.7,.2,1) both;transform-origin:50% 30%}
html.softglass .pop{animation:sg-pop-masuk .28s cubic-bezier(.2,.8,.2,1) both}
html.softglass .pop-root.keluar .pop{animation:sg-pop-keluar .22s cubic-bezier(.4,0,1,1) both}
@keyframes sg-naik{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes sg-zoom{from{opacity:0;transform:scale(1.04)}to{opacity:1;transform:none}}
@keyframes sg-pop-masuk{from{opacity:0;transform:translate(var(--sg-dx,0px),var(--sg-dy,0px)) scale(var(--sg-s,.94))}to{opacity:1;transform:none}}
@keyframes sg-pop-keluar{to{opacity:0;transform:translate(var(--sg-dx,0px),var(--sg-dy,0px)) scale(var(--sg-s,.96))}}
html.softglass[data-kaca="solid"] :is([id^="view-"].sg-masuk,#screen-app.sg-login,.pop,.pop-root.keluar .pop){animation:none}
@media (prefers-reduced-motion:reduce){html.softglass :is([id^="view-"].sg-masuk,#screen-app.sg-login,.pop,.pop-root.keluar .pop){animation:none}html.softglass nav.tabs button{transition:none}}
/* v2.88.5: nombor ganti (auto switch) bila nombor WhatsApp terputus */
.ac-btn-ganti{background:color-mix(in srgb,var(--info) 14%,transparent);color:var(--info);border-color:color-mix(in srgb,var(--info) 40%,transparent)}
.ac-putus{margin:6px 10px}
.ac-ganti .ac-cek{margin-bottom:6px}
/* v2.88.9: mod DEMO (demo.servicecenterspecialist.com) */
#demo-jalur{position:sticky;top:0;z-index:9999;display:flex;flex-wrap:wrap;gap:4px 10px;justify-content:center;align-items:center;padding:6px 12px;
  background:#f59e0b;color:#1c1917;font-size:13px;line-height:1.3;text-align:center}
#demo-peranan{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:4px 0 12px}
#demo-peranan .demo-tajuk{grid-column:1/-1;margin:0;font-weight:700}#demo-peranan .sm{grid-column:1/-1;margin:2px 0 0}
.demo-btn{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;padding:10px 12px;min-height:64px;white-space:normal}
.demo-btn span{font-size:12px;color:var(--muted);font-weight:400}
@media (max-width:420px){#demo-peranan{grid-template-columns:1fr}}