:root{
  --bg:#f2f4f9; --surface:#fff; --surface2:#e8ecf4; --line:#d3d9e6; --fg:#0c1330; --muted:#566080;
  --accent:#0a6c86; --accent-fg:#fff; --accent-soft:#dff1f5;
  --ok:#17794a; --ok-bg:#d5efdf; --warn:#8a5a00; --warn-bg:#fbe7b0; --bad:#b3261e; --bad-bg:#f9d3cf;
  --tile:#02021f; --bar-fg:#eef0ff; --bar-muted:#9aa3c7; --bar-accent:#45d2e2; --bar-line:#2a3060;
  --c1:#0b7f9e; --c2:#d95926; --grid:#e3e7f0;
  --display:"Red Hat Display",system-ui,sans-serif; --body:"Red Hat Text",system-ui,sans-serif; --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
}
@media (prefers-color-scheme: dark){ :root{
  --bg:#05071a; --surface:#0c102b; --surface2:#151a3c; --line:#252c54; --fg:#e9ecf8; --muted:#929bbd;
  --accent:#45d2e2; --accent-fg:#03141a; --accent-soft:#0e2c3d;
  --ok:#5ad695; --ok-bg:#0e3324; --warn:#f2c14e; --warn-bg:#3a2c08; --bad:#ff8a80; --bad-bg:#47161a;
  --c1:#1fa3b6; --c2:#e0682f; --grid:#1c2248; color-scheme:dark } }
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--fg);font:15px/1.5 var(--body)}
.app{display:flex;flex-direction:column;min-height:100vh}
.wrap{width:100%;max-width:1080px;margin-inline:auto;padding-inline:16px}
h1,h2,h3{font-family:var(--display);margin:0;text-wrap:balance}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.bar{background:var(--tile);color:var(--bar-fg);position:sticky;top:0;z-index:20;box-shadow:0 2px 14px rgba(2,2,31,.35)}
.bar .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px}
.brand{display:flex;align-items:baseline;gap:10px;min-width:0}
.brand b{font:900 20px/1 var(--display);letter-spacing:.04em;white-space:nowrap}
.brand b i{font-style:normal;color:var(--bar-accent)}
.brand span{font:600 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--bar-accent);border:1px solid var(--bar-line);padding:5px 8px;border-radius:999px;white-space:nowrap}
.lamp{display:inline-flex;align-items:center;gap:8px;padding:6px 12px 6px 10px;border-radius:999px;border:1px solid var(--bar-line);
  color:var(--bar-fg);text-decoration:none;font:700 11.5px/1 var(--mono);letter-spacing:.08em;white-space:nowrap;margin-left:auto}
.lamp i{width:12px;height:12px;border-radius:50%;background:#7a809e;flex:none}
.lamp.green i{background:#2fe089;box-shadow:0 0 6px #2fe089,0 0 14px rgba(47,224,137,.75);animation:lamp-pulse 2.4s ease-in-out infinite}
.lamp.amber i{background:#ffc53d;box-shadow:0 0 6px #ffc53d,0 0 12px rgba(255,197,61,.6)}
.lamp.red i{background:#ff4d4f;box-shadow:0 0 6px #ff4d4f,0 0 14px rgba(255,77,79,.75);animation:lamp-pulse 1.2s ease-in-out infinite}
.lamp.green{border-color:rgba(47,224,137,.55)} .lamp.amber{border-color:rgba(255,197,61,.5)} .lamp.red{border-color:rgba(255,77,79,.6)}
@keyframes lamp-pulse{0%,100%{opacity:1}50%{opacity:.45}}
@media (prefers-reduced-motion:reduce){.lamp i{animation:none!important}}
.payout-head{display:flex;align-items:center;gap:14px}
.payout-head .lamp{margin-left:0;font-size:13px;padding:8px 14px;color:var(--fg);border-color:var(--line)}
.payout-head .lamp.green{border-color:var(--ok)} .payout-head .lamp.amber{border-color:var(--warn)} .payout-head .lamp.red{border-color:var(--bad)}
.who{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--bar-muted);min-width:0}
.who span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar button{background:transparent;border:1px solid var(--bar-line);color:var(--bar-fg);border-radius:8px;padding:6px 12px;cursor:pointer}

main{flex:1;padding-block:20px 40px;display:grid;gap:16px}
.banner{border-radius:12px;padding:12px 16px;font-weight:600;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.banner.bad{background:var(--bad-bg);color:var(--bad)} .banner.warn{background:var(--warn-bg);color:var(--warn)}
.banner small{font-weight:400}

.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.tile{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px 16px;min-width:0}
.tile .k{font:600 11px/1.2 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.tile .v{font:700 22px/1.2 var(--display);margin-top:8px;overflow-wrap:anywhere}
.tile .s{font-size:12.5px;color:var(--muted);margin-top:2px}
.tile.ok .v{color:var(--ok)} .tile.bad .v{color:var(--bad)}

.card{background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.card>header{padding:16px 18px 0;display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.card>header h2{font-size:17px}
.card>header p{margin:2px 0 0;color:var(--muted);font-size:13.5px;flex-basis:100%}
.card>.body{padding:14px 18px 18px;display:grid;gap:14px}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end}
.f{display:grid;gap:5px;min-width:0;flex:1 1 220px}
.f>span{font-size:12.5px;font-weight:600;color:var(--muted)}
input[type=text],input[type=number],input[type=email],input[type=password],input[type=search],select,textarea{
  background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:9px 11px;min-height:40px;width:100%}
input.mono{font-family:var(--mono);font-size:14px}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--bg);flex-wrap:wrap}
.seg button{border:0;background:transparent;padding:9px 14px;cursor:pointer;min-height:40px}
.seg button[aria-pressed=true]{background:var(--accent);color:var(--accent-fg);font-weight:600}
.btn{border:1px solid var(--line);background:var(--surface2);border-radius:10px;padding:9px 16px;min-height:40px;cursor:pointer;font-weight:600;white-space:nowrap}
.btn.pri{background:var(--accent);border-color:var(--accent);color:var(--accent-fg)}
.btn.danger-outline{border-color:var(--bad);color:var(--bad)}
.btn.danger{background:var(--bad);border-color:var(--bad);color:#fff}
.btn:disabled{opacity:.5;cursor:not-allowed}
.note{font-size:13px;color:var(--muted);margin:0}
.result{font:14px/1.4 var(--mono);padding:10px 12px;border-radius:10px;background:var(--bg);border:1px solid var(--line);overflow-wrap:anywhere}
.result.ok{border-color:var(--ok);color:var(--ok)} .result.bad{border-color:var(--bad);color:var(--bad)}

.scroll{overflow-x:auto;margin-inline:-18px;padding-inline:18px}
table{border-collapse:collapse;width:100%;font-size:14px}
th{font:600 11px/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);text-align:left;padding:8px 10px 8px 0;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:10px 10px 10px 0;border-bottom:1px solid var(--line);vertical-align:middle}
tr:last-child td{border-bottom:0}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
td .sub{display:block;font-size:12.5px;color:var(--muted)}
td input[type=number]{width:96px}
.pill{display:inline-block;font:600 11px/1 var(--mono);padding:5px 8px;border-radius:999px;background:var(--surface2);white-space:nowrap}
.pill.ok{background:var(--ok-bg);color:var(--ok)} .pill.bad{background:var(--bad-bg);color:var(--bad)} .pill.warn{background:var(--warn-bg);color:var(--warn)}
.bars{display:grid;gap:8px}
.bars .b{display:grid;grid-template-columns:150px 1fr 48px;gap:10px;align-items:center;font-size:13.5px}
.bars .t{height:10px;border-radius:5px;background:var(--surface2);overflow:hidden}
.bars .t i{display:block;height:100%;background:var(--accent);border-radius:5px}
.bars .t i.bad{background:var(--bad)} .bars .t i.ok{background:var(--ok)}
.bars .n{text-align:right;font-variant-numeric:tabular-nums}
.list{max-height:420px;overflow-y:auto;overscroll-behavior:contain;border:1px solid var(--line);border-radius:12px;padding:0 14px;scrollbar-gutter:stable}
.list thead th{position:sticky;top:0;background:var(--surface);z-index:1;padding-top:12px}
.listfoot{padding:12px 0;text-align:center;color:var(--muted);font-size:13.5px}
.row>.note{flex:0 0 auto;padding-bottom:10px}
.empty{color:var(--muted);font-size:14px;padding:6px 0}

.login{max-width:420px;margin:48px auto;display:grid;gap:14px}
.login h1{font-size:24px}
.login img.qr{width:200px;height:200px;background:#fff;border-radius:10px;padding:8px;justify-self:center}
.err{color:var(--bad);font-weight:600;font-size:14px;margin:0}

.dlg{border:1px solid var(--line);border-radius:16px;background:var(--surface);color:var(--fg);padding:20px;width:min(480px,calc(100vw - 32px))}
.dlg::backdrop{background:rgba(2,2,31,.55)}
.dlg h3{font-size:18px;margin-bottom:6px}
.dlg .chg{font:14px/1.4 var(--mono);background:var(--bg);border-radius:10px;padding:10px 12px;margin:10px 0;overflow-wrap:anywhere}
.dlg .acts{display:flex;justify-content:flex-end;gap:10px;margin-top:14px}

footer{border-top:1px solid var(--line);padding:16px 0;color:var(--muted);font-size:13px}
footer .wrap{display:flex;align-items:center;justify-content:center;gap:10px}
footer img{height:26px;border-radius:6px}


/* ── Navigasi bahagian ── */
[hidden]{display:none !important}
.nav{border-top:1px solid var(--bar-line)}
.nav .wrap{display:flex;gap:4px;min-height:0;overflow-x:auto;justify-content:flex-start;scrollbar-width:none}
.nav .wrap::-webkit-scrollbar{display:none}
.nav a{color:var(--bar-muted);text-decoration:none;font-weight:600;font-size:14px;padding:11px 12px 9px;border-bottom:2px solid transparent;white-space:nowrap;display:flex;align-items:center;gap:6px}
.nav a:hover{color:var(--bar-fg)}
.nav a[aria-current=page]{color:var(--bar-fg);border-bottom-color:var(--bar-accent)}
.nav a:focus-visible{outline-offset:-2px}
.badge{background:var(--bad);color:#fff;font:600 11px/1 var(--mono);padding:3px 6px;border-radius:999px;min-width:20px;text-align:center}
@media (prefers-color-scheme: dark){ .badge{color:#2a0606} }
main>.banner:not(.bad):not(.warn){background:var(--surface2);color:var(--muted)}
main>.note{margin:0}

/* ── Kepingan kongsi ── */
.tiles.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.row.spread{justify-content:space-between;align-items:center}
.row.toolbar,.row.mid{align-items:center}
.row.toolbar .stamp{margin-left:auto;font-family:var(--mono);padding:0}
.f.narrow{flex:0 1 200px}
.wrap-any{overflow-wrap:anywhere}
.mono{font-family:var(--mono);font-size:13px}
.btn.mini{min-height:30px;padding:4px 10px;font-size:12.5px}
.pill.big{font-size:14px;padding:8px 12px}
.warn-text{color:var(--warn);font-weight:600}
.list.tall{max-height:640px}
.state{display:flex;gap:14px;align-items:flex-start;padding:12px 14px;border-radius:12px;background:var(--bg);border:1px solid var(--line)}
.state.ok{border-color:var(--ok)} .state.warn{border-color:var(--warn)} .state.bad{border-color:var(--bad)}
.meter{height:12px;border-radius:6px;background:var(--surface2);overflow:hidden}
.meter i{display:block;height:100%;border-radius:6px;background:var(--ok)}
.meter.warn i{background:var(--warn)} .meter.bad i{background:var(--bad)}
.price{font-size:20px;font-weight:600}
.switch{display:flex;gap:14px;align-items:flex-start;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--line)}
.switch:last-child{border-bottom:0;padding-bottom:0} .switch:first-child{padding-top:0}
.switch .note{margin-top:4px}
table.params td input[type=text]{width:150px;text-align:right}
.steps{margin:0;padding-left:20px;display:grid;gap:6px;font-size:14px}

/* ── Penebusan, amaran, daftar undang-undang: satu kepingan bagi setiap rekod ── */
.rq,.alert,.lg{padding:14px 0;border-bottom:1px solid var(--line);display:grid;gap:8px;min-width:0}
.rq:last-child,.alert:last-child,.lg:last-child{border-bottom:0}
.rq>header,.alert>header,.lg>header{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.alert>header,.lg>header{justify-content:flex-start}
.rq .sub{display:block;font-size:12.5px;color:var(--muted)}
.rq-state{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.rq-wallet{display:flex;gap:10px;align-items:center;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:6px 10px;min-width:0}
.rq-wallet .mono{flex:1;min-width:0}
.rq-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px 14px;margin:0}
.rq-facts dt{font:600 11px/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.rq-facts dd{margin:2px 0 0;overflow-wrap:anywhere}
.rq .banner,.card .banner{font-size:14px}
.alert .msg,.lg p,.lg h3{margin:0}
.lg h3{font-size:15.5px}
.alert.done{opacity:.75}
.alert .code,.lg .code{font-weight:600}

/* ── Carta ── */
.charts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 26px}
.chart{margin:0;display:grid;gap:6px;min-width:0}
.chart figcaption{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.chart figcaption b{font-family:var(--display);font-size:15px}
.chart figcaption span{font-size:12.5px;color:var(--muted)}
.chart .plot{position:relative;height:230px;min-width:0}
.chart svg.viz{display:block;overflow:visible}
.chart svg.viz:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
.viz .grid{stroke:var(--grid);stroke-width:1}
.viz .axis{fill:var(--muted);font:11px var(--mono);font-variant-numeric:tabular-nums}
.viz .line{stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.viz .line.s1{stroke:var(--c1)} .viz .line.s2{stroke:var(--c2);stroke-dasharray:7 4}
.viz .pt,.viz .end{stroke:var(--surface);stroke-width:2}
.viz .s1.pt,.viz .s1.end{fill:var(--c1)} .viz .s2.pt,.viz .s2.end{fill:var(--c2)}
.viz .limit{stroke:var(--muted);stroke-width:1;stroke-dasharray:2 4}
.viz .limit-label{fill:var(--muted);font:600 10.5px var(--mono);paint-order:stroke;stroke:var(--surface);stroke-width:3px}
.viz .end-label{fill:var(--fg);font:600 12px var(--body);paint-order:stroke;stroke:var(--surface);stroke-width:3px}
.viz .hair{stroke:var(--muted);stroke-width:1}
.legend{list-style:none;margin:0;padding:0;display:flex;gap:6px 16px;flex-wrap:wrap;font-size:12.5px;color:var(--muted)}
.legend li{display:flex;align-items:center;gap:6px}
.key{display:inline-block;width:18px;height:0;border-top:2px solid var(--c1);flex:none}
.key.k2{border-top:2px dashed var(--c2)}
.tip{position:absolute;z-index:2;pointer-events:none;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:8px 10px;font-size:12.5px;box-shadow:0 6px 20px rgba(2,2,31,.18);display:grid;gap:3px;white-space:nowrap;color:var(--muted)}
.tip b{font:600 11px var(--mono);color:var(--muted)}
.tip strong{color:var(--fg);font-size:13.5px}
.tip div{display:flex;align-items:center;gap:6px}
.chart .summary{font-size:12.5px}
.chart details summary{cursor:pointer;font-size:12.5px;color:var(--muted)}
.chart details .scroll{margin-top:6px;max-height:240px;overflow-y:auto}
.chart-empty{display:grid;place-items:center;height:100%;border:1px dashed var(--line);border-radius:12px;text-align:center;padding:12px}
.chart-empty .btn{margin-top:8px}

/* ── Dialog dengan medan ── */
.dlg.wide{width:min(640px,calc(100vw - 32px))}
.dlg{max-height:calc(100vh - 32px);overflow-y:auto}
.dlg .dfields{display:grid;gap:10px;margin:12px 0}
.dlg .chg{display:grid;gap:6px}
.dlg .chg .note{font-family:var(--body)}

@media (max-width:760px){
  .tiles.three{grid-template-columns:1fr}
  .charts{grid-template-columns:1fr}
  .rq-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .switch{flex-direction:column}
  .f.narrow{flex:1 1 140px}
  .row.toolbar .stamp{margin-left:0;flex-basis:100%;order:5}
  table.params td input[type=text]{width:120px}
  table.stack.params,table.stack.params tbody{display:block}
  table.stack.params tr{grid-template-columns:minmax(0,1fr) auto}
  table.stack.params td.num::after{white-space:normal;min-width:0}
  table.stack.params td.num{min-width:0}
  .nav a{padding-inline:10px}
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tile .v{font-size:18px}
  .scroll table:not(.stack){min-width:620px}          /* jadual lebar ditatal di dalam kad, bukan dihimpit */
  .scroll table:not(.stack) td{white-space:nowrap}
  .scroll table:not(.stack) td:last-child{white-space:normal;min-width:180px}
  table.stack thead{display:none}
  table.stack tr{display:grid;grid-template-columns:1fr auto;gap:8px 10px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
  table.stack tr:last-child{border-bottom:0}
  table.stack td{padding:0;border:0}
  table.stack td:first-child{grid-column:1 / -1}
  table.stack td.num{text-align:left;display:flex;align-items:center;gap:10px}
  table.stack td.hint,table.stack td .bal{display:none}
  table.stack tr{grid-template-columns:1fr 1fr auto}
  table.stack td.num::after{content:attr(data-range);font-size:12.5px;color:var(--muted);white-space:nowrap}
  .brand span{display:none}
  .lamp span{display:none} .lamp{padding:8px}
  .bars .b{grid-template-columns:110px 1fr 40px}
}
@media (prefers-reduced-motion:no-preference){ .bars .t i{transition:width .3s} }

/* ══ Gaya futuristik premium (sama dengan aplikasi: heksagon, litar, garis cahaya TILDE) ═════════════════════════════ */
:root{
  --tilde:linear-gradient(90deg,#e04bd6,#45d2e2 50%,#2fe0a0);
  --hex:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='48.5' viewBox='0 0 28 48.5'%3E%3Cpath d='M14 1.2l12.5 7.2v14.4L14 30 1.5 22.8V8.4zM14 30v18.5' fill='none' stroke='%2345d2e2' stroke-opacity='.16' stroke-width='1'/%3E%3C/svg%3E");
  --hex-light:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='48.5' viewBox='0 0 28 48.5'%3E%3Cpath d='M14 1.2l12.5 7.2v14.4L14 30 1.5 22.8V8.4zM14 30v18.5' fill='none' stroke='%230a6c86' stroke-opacity='.07' stroke-width='1'/%3E%3C/svg%3E");
  --circuit:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='160' viewBox='0 0 360 160'%3E%3Cg fill='none' stroke='%2345d2e2' stroke-opacity='.45' stroke-width='1.3'%3E%3Cpath d='M360 40H300l-30-28H210'/%3E%3Cpath d='M360 92H280l-26 26h-74'/%3E%3Cpath d='M330 160v-30l-24-24h-46'/%3E%3C/g%3E%3Cg fill='%2345d2e2'%3E%3Ccircle cx='210' cy='12' r='3'/%3E%3Ccircle cx='180' cy='118' r='3'/%3E%3Ccircle cx='260' cy='106' r='3'/%3E%3C/g%3E%3C/svg%3E");
  --glow:0 10px 30px rgba(11,17,80,.10);
}
@media (prefers-color-scheme: dark){ :root{ --hex-light:var(--hex); --glow:0 10px 30px rgba(0,0,0,.45) } }

/* bar atas: garis cahaya di bawah */
.bar{background:linear-gradient(180deg,#030427,#02021f)}
.bar::after{content:"";display:block;height:2px;background:var(--tilde);opacity:.9}
.nav a{position:relative;transition:color .2s}
.nav a[aria-current=page]{border-bottom-color:transparent}
.nav a[aria-current=page]::after{content:"";position:absolute;left:10px;right:10px;bottom:0;height:2px;border-radius:2px;background:var(--tilde);box-shadow:0 0 10px rgba(69,210,226,.7)}

/* kepala bahagian bercorak dengan cahaya yang mengikut tetikus */
.hero{position:relative;overflow:hidden;color:#fff;--mx:78%;--my:30%;
  background:radial-gradient(520px circle at var(--mx) var(--my),rgba(69,210,226,.22),transparent 60%),
    var(--circuit) right 0 top 0/360px 160px no-repeat, var(--hex) 0 0/28px 48.5px,
    linear-gradient(120deg,#0b1150 0%,#030427 55%,#02021f 100%)}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--tilde)}
.hero .wrap{padding-block:22px 24px;display:grid;gap:6px;position:relative}
.hero .eyebrow{font:700 11px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:#45d2e2}
.hero h1{font:900 30px/1.1 var(--display);letter-spacing:.01em;background:linear-gradient(90deg,#fff,#c9f6fb);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{margin:0;color:#9aa3c7;font-size:14px;max-width:760px}
.hero .chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.chip{font:600 11px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;padding:6px 10px;border-radius:999px;color:#45d2e2;
  background:rgba(69,210,226,.10);border:1px solid rgba(69,210,226,.45)}
.chip.ok{color:#2fe0a0;background:rgba(47,224,160,.10);border-color:rgba(47,224,160,.45)}
.chip.bad{color:#ff8a80;background:rgba(255,77,79,.12);border-color:rgba(255,77,79,.5)}

/* kad: garis cahaya di atas, corak halus, bayang lembut, angkat semasa hover */
.card{position:relative;box-shadow:var(--glow);transition:box-shadow .25s,border-color .25s,transform .25s;
  background-image:linear-gradient(var(--surface),var(--surface));}
.card::before{content:"";display:block;height:3px;background:var(--tilde)}
.card:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--line));box-shadow:0 14px 38px rgba(10,108,134,.16)}
.card>header h2{font-size:18px;display:flex;align-items:center;gap:10px}
.card>header h2::before{content:"";width:9px;height:9px;transform:rotate(45deg);border-radius:2px;background:var(--tilde);box-shadow:0 0 8px rgba(69,210,226,.8);flex:none}

/* jubin statistik: corak heksagon, jalur warna kiri, cahaya semasa hover */
.tile{position:relative;overflow:hidden;background:var(--hex-light) 0 0/28px 48.5px,var(--surface);box-shadow:var(--glow);
  transition:transform .2s,box-shadow .2s,border-color .2s}
.tile::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--tilde)}
.tile:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--accent) 50%,var(--line));box-shadow:0 12px 30px rgba(10,108,134,.18)}
.tile .v{font-size:26px;font-weight:900;letter-spacing:.01em}

/* butang dan segmen */
.btn{transition:transform .15s,box-shadow .2s,background .2s,border-color .2s}
.btn:not(:disabled):hover{transform:translateY(-1px);border-color:var(--accent)}
.btn.pri{background:linear-gradient(135deg,#0a6c86,#0b8fa8);border-color:#0a6c86}
.btn.pri:not(:disabled):hover{box-shadow:0 6px 18px rgba(10,108,134,.38)}
.seg{box-shadow:inset 0 1px 0 rgba(255,255,255,.4)}
.seg button{transition:background .2s,color .2s}
.seg button:not([aria-pressed=true]):hover{background:var(--accent-soft)}
.seg button[aria-pressed=true]{background:linear-gradient(135deg,#0a6c86,#0b8fa8);color:#fff;box-shadow:0 0 0 1px rgba(69,210,226,.35) inset}
input[type=text],input[type=number],input[type=email],input[type=password],input[type=search],select,textarea{transition:border-color .2s,box-shadow .2s}
input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent);outline:none}

/* jadual: baris bercahaya semasa hover */
tbody tr{transition:background .15s}
tbody tr:hover{background:color-mix(in srgb,var(--accent) 7%,transparent)}
th{color:color-mix(in srgb,var(--accent) 70%,var(--muted))}

/* rekod (penebusan, amaran, daftar): jalur cahaya kiri semasa hover */
.rq,.alert,.lg{position:relative;padding-inline:12px;margin-inline:-12px;border-radius:10px;transition:background .2s}
.rq::before,.alert::before,.lg::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:3px;background:var(--tilde);opacity:0;transition:opacity .2s}
.rq:hover,.alert:hover,.lg:hover{background:color-mix(in srgb,var(--accent) 5%,transparent)}
.rq:hover::before,.alert:hover::before,.lg:hover::before{opacity:1}
.lg .code,.alert .code{color:var(--accent)}

/* panel seret: senarai ditatal di dalam panel, pemegang di bawah untuk mengubah tinggi */
.drag{display:grid;gap:0}
.list.dragbox{max-height:none;border-radius:12px 12px 0 0;border-bottom:0;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--accent) 55%,transparent) transparent;
  background:var(--hex-light) 0 0/28px 48.5px,var(--surface)}
.list.dragbox::-webkit-scrollbar{width:9px}
.list.dragbox::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--accent) 50%,transparent);border-radius:9px}
.list.dragbox .scroll{margin-inline:0;padding-inline:0}
.list.dragbox thead th{position:sticky;top:0;z-index:1;background:var(--surface);box-shadow:0 1px 0 var(--line)}
.grip{display:flex;align-items:center;justify-content:center;gap:10px;height:30px;cursor:ns-resize;user-select:none;touch-action:none;
  border:1px solid var(--line);border-radius:0 0 12px 12px;background:linear-gradient(180deg,var(--surface2),var(--surface));
  color:var(--muted);font:600 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;transition:color .2s,border-color .2s,box-shadow .2s}
.grip i{width:46px;height:5px;border-radius:5px;background:var(--tilde);opacity:.75;transition:opacity .2s,box-shadow .2s}
.grip:hover,.grip.on,.grip:focus-visible{color:var(--accent);border-color:var(--accent)}
.grip:hover i,.grip.on i{opacity:1;box-shadow:0 0 10px rgba(69,210,226,.9)}
.grip.on{box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}

/* pil dan lencana */
.pill{border:1px solid transparent}
.pill.ok{border-color:color-mix(in srgb,var(--ok) 35%,transparent)} .pill.warn{border-color:color-mix(in srgb,var(--warn) 35%,transparent)} .pill.bad{border-color:color-mix(in srgb,var(--bad) 35%,transparent)}
.banner{border:1px solid transparent}
.banner.warn{border-color:color-mix(in srgb,var(--warn) 40%,transparent);background:linear-gradient(90deg,var(--warn-bg),color-mix(in srgb,var(--warn-bg) 60%,var(--surface)))}
.banner.bad{border-color:color-mix(in srgb,var(--bad) 40%,transparent)}
.state{background:var(--hex-light) 0 0/28px 48.5px,var(--bg)}
.meter i{background:var(--tilde)}
.bars .t i{background:linear-gradient(90deg,#0a6c86,#45d2e2)}
footer{background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--accent) 5%,transparent))}

/* log masuk: kad bercorak */
.login{align-self:start;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:26px;box-shadow:var(--glow);position:relative;overflow:hidden}
.login::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--tilde)}

@media (max-width:760px){
  .hero h1{font-size:24px} .hero .wrap{padding-block:16px 18px}
  .hero{background-size:auto,0 0,28px 48.5px,auto}
  .grip span{display:none}
}
@media (prefers-reduced-motion:reduce){
  .tile,.card,.btn,.grip,.rq,.alert,.lg{transition:none!important}
  .tile:hover,.btn:not(:disabled):hover{transform:none}
}

/* ── Kewangan (0028) ── */
.f.inline{flex:0 1 auto;grid-auto-flow:column;align-items:center;gap:8px}
input[type=month]{min-width:150px}
table.ledger tr.indent td:first-child{padding-left:26px;color:var(--muted)}
table.ledger tr.total td{border-top:1px solid var(--line);font-weight:600}
table.ledger tr.total.bad td:last-child,td.num.bad{color:var(--bad)}
table.ledger tr.total.ok td:last-child,td.num.ok{color:var(--ok)}
.costform{align-items:flex-end;margin-bottom:14px}
.costform .f{flex:1 1 160px}
.cost{padding:12px;margin-inline:-12px;border-radius:10px;border-bottom:1px solid var(--line);display:grid;gap:8px;min-width:0;transition:background .2s}
.cost:last-child{border-bottom:0}
.cost:hover{background:color-mix(in srgb,var(--accent, #45d2e2) 6%,transparent)}
.cost .sub{display:block;font-size:12.5px;color:var(--muted);overflow-wrap:anywhere}
.cost.done{opacity:.7}
.row>.note.grow{flex:1 1 240px;min-width:0;padding-bottom:0}
table.ledger{width:100%}
table.ledger td .sub{overflow-wrap:anywhere}
.scroll table.ledger td:first-child{white-space:normal}
.scroll table.ledger td:last-child{white-space:nowrap;min-width:0;padding-left:12px}
.ledger{display:grid}
.ledger .lrow{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:9px 0;border-bottom:1px solid var(--line)}
.ledger .lrow:last-child{border-bottom:0}
.ledger .lrow>div:first-child{min-width:0}
.ledger .sub{display:block;font-size:12.5px;color:var(--muted);overflow-wrap:anywhere}
.ledger .amt{white-space:nowrap;text-align:right;flex:0 0 auto}
.ledger .lrow.indent>div:first-child{padding-left:16px;color:var(--muted)}
.ledger .lrow.total{border-top:1px solid var(--line);font-weight:600}
.ledger .lrow.total.bad .amt{color:var(--bad)} .ledger .lrow.total.ok .amt{color:var(--ok)}
@media (max-width:480px){#bahagian-kewangan .tile .v{font-size:22px}}

/* ── Cadangan AI daftar undang-undang (0030) ── */
.pill.ai{background:linear-gradient(90deg,#e04bd633,#45d2e233);color:var(--fg);border:1px solid #45d2e266}
.lg.cand.done{opacity:.7}
.ai-out{display:grid;gap:12px;margin-top:12px}
.ai-out:empty{display:none}

/* Maklum balas */
.fbdist{display:grid;gap:6px;margin-top:14px;max-width:520px}
.fbrow{display:grid;grid-template-columns:34px 1fr 44px;align-items:center;gap:10px;font-size:13px}
.fbbar{height:8px;border-radius:999px;background:var(--surface2);overflow:hidden}
.fbbar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#ffc53d,#ffe08a)}
.fbstars{color:#f2a60d;letter-spacing:1px;font-size:15px}
.fbquote{margin:0;padding:8px 12px;border-left:3px solid var(--line);color:var(--fg, inherit);white-space:pre-wrap;overflow-wrap:anywhere}

/* Galeri */
.gprog{width:100%;height:12px;accent-color:#45d2e2}
.gitem .sha{overflow-wrap:anywhere;font-size:11.5px}
.gdesc{margin:0;white-space:pre-wrap;color:var(--muted);font-size:13px}
.glist{margin:8px 0 0 18px;font-size:12px;max-height:220px;overflow:auto}