/* ==========================================================================
   MAIN — Playtime Booking Marketplace
   Design system produk (hi-fidelity)
   Token warna, jejari, bayang dan tipografi diangkat terus daripada
   app/globals.css dalam source code MAIN sedia ada.
   ========================================================================== */

:root{
  /* Jenama — nilai tepat daripada source code MAIN */
  --purple:#5d2fa5;
  --purple-2:#7c48c5;
  --plum:#241044;
  --plum-soft:#39205d;
  --yellow:#ffe252;
  --coral:#ff785a;
  --pink:#ffc8df;
  --sky:#b9e5ff;
  --mint:#c9f1df;
  --cream:#fffaf0;
  --paper:#fffdf8;
  --lavender:#f0e9fa;
  --ink:#281f31;
  --muted:#716a79;
  --line:#e9e1ee;
  --shadow:0 22px 60px rgba(54,28,88,.12);

  /* Turunan untuk UI aplikasi */
  --line-2:rgba(93,47,165,.1);
  --line-3:rgba(93,47,165,.16);
  --surface:#ffffff;
  --surface-2:#faf7fc;
  --surface-3:#f6f2fa;
  --ink-2:#554d5c;
  --ink-3:#7b7285;

  --ok-bg:#e4f6ec;      --ok-ink:#12704a;   --ok-line:#a9dfc4;
  --warn-bg:#fff5cf;    --warn-ink:#8a6206; --warn-line:#efd587;
  --stop-bg:#ffeee9;    --stop-ink:#c04426; --stop-line:#f7c3b4;
  --info-bg:#e8f4ff;    --info-ink:#1d5c88; --info-line:#b3dcf7;

  --sh-1:0 6px 18px rgba(53,25,90,.06);
  --sh-2:0 14px 35px rgba(53,25,90,.075);
  --sh-3:0 24px 56px rgba(53,25,90,.12);
  --sh-pop:0 30px 70px rgba(24,9,48,.24);

  --r-xs:9px; --r-sm:12px; --r-md:16px; --r-lg:21px; --r-xl:28px; --r-pill:999px;

  --display:"Plus Jakarta Sans","Segoe UI",system-ui,sans-serif;
  --body:"Nunito Sans","Segoe UI",system-ui,sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--body);font-size:15px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5{margin:0;font-family:var(--display);color:var(--plum);font-weight:800;letter-spacing:-.035em;line-height:1.15}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
a{color:var(--purple);text-decoration:none}
a:hover{color:var(--plum)}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none}
img{max-width:100%;display:block}
:focus-visible{outline:3px solid rgba(93,47,165,.3);outline-offset:3px;border-radius:6px}

/* ── Bar prototaip (bukan sebahagian produk) ───────────────────────────── */
.proto{
  position:sticky;top:0;z-index:200;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:9px 20px;background:var(--plum);color:#efe9f5;
  font-family:var(--display);font-size:11.5px;font-weight:700;letter-spacing:.02em;
}
.proto a{color:#efe9f5;opacity:.82}
.proto a:hover{opacity:1;color:#fff}
.proto-id{display:flex;align-items:center;gap:9px;flex:1 1 auto;min-width:0}
.proto-code{font-family:var(--display);color:rgba(255,255,255,.45);font-weight:800}
.proto-nav{display:flex;gap:16px;flex:0 0 auto}
.proto-tag{
  display:inline-flex;padding:3px 9px;border-radius:var(--r-pill);
  font-size:9px;font-weight:900;letter-spacing:.12em;color:var(--plum);
}
.t-parent{background:var(--pink)}
.t-centre{background:var(--yellow)}
.t-admin{background:var(--mint)}
.t-sys{background:var(--sky)}

/* ── Pentas telefon ────────────────────────────────────────────────────── */
.stage{
  min-height:calc(100vh - 40px);padding:44px 20px 60px;
  display:flex;justify-content:center;align-items:flex-start;gap:40px;flex-wrap:wrap;
  background:
    radial-gradient(circle at 82% 4%,rgba(255,226,82,.32),transparent 26%),
    radial-gradient(circle at 8% 88%,rgba(255,200,223,.34),transparent 28%),
    linear-gradient(160deg,#fffdf8 0%,#fff9ec 52%,#f5edff 100%);
}
.stage-tight{padding-top:30px}

.phone{
  position:relative;width:390px;max-width:100%;flex:0 0 auto;
  border:8px solid var(--plum);border-radius:46px;background:#fff;
  box-shadow:var(--sh-pop),0 0 0 5px rgba(255,255,255,.5);
  overflow:hidden;
}
.phone-scroll{max-height:812px;overflow-y:auto;overscroll-behavior:contain}
.phone-scroll::-webkit-scrollbar{width:0}
.screen{display:flex;flex-direction:column;gap:18px;padding:22px 18px 26px}
.screen-flush{padding:0 0 26px}

/* Beberapa telefon bersebelahan */
.phones{display:flex;gap:34px;flex-wrap:wrap;justify-content:center;align-items:flex-start}
.phone-wrap{display:flex;flex-direction:column;gap:12px;align-items:center}
.phone-label{
  display:inline-flex;align-items:center;gap:7px;padding:6px 13px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.8);border:1px solid var(--line-3);
  color:var(--purple);font-family:var(--display);font-size:10px;font-weight:900;letter-spacing:.12em;
}

@media(max-width:480px){
  .stage{padding:0;background:#fff}
  .phone{width:100%;border:0;border-radius:0;box-shadow:none}
  .phone-scroll{max-height:none}
}

/* ── Tajuk skrin (nota pembentang) ─────────────────────────────────────── */
.brief{max-width:1240px;margin:0 auto;padding:34px 24px 0;display:flex;flex-direction:column;gap:8px}
.brief h1{font-size:26px}
.brief p{max-width:76ch;color:var(--muted);font-size:14px}

/* ── Tipografi produk ──────────────────────────────────────────────────── */
/* Pil dan label sentiasa memeluk kandungan, walaupun dalam susunan lajur */
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;padding:7px 12px;align-self:flex-start;
  border:1px solid var(--line-3);border-radius:var(--r-pill);
  background:rgba(255,255,255,.72);color:var(--purple);
  font-family:var(--display);font-size:9.5px;font-weight:900;letter-spacing:.13em;
}
.kicker{align-self:flex-start;color:var(--purple);font-family:var(--display);font-size:9.5px;font-weight:900;letter-spacing:.14em;text-transform:uppercase}
.hug{align-self:flex-start}
.h-xl{font-size:30px;letter-spacing:-.05em;line-height:1.08}
.h-lg{font-size:24px;letter-spacing:-.045em}
.h-md{font-size:19px;letter-spacing:-.035em}
.h-sm{font-size:16px;letter-spacing:-.03em}
.h-xs{font-size:14px;letter-spacing:-.02em}
.lead{color:var(--muted);font-size:14px;line-height:1.65}
.sub{color:var(--muted);font-size:12.5px;line-height:1.55}
.tiny{color:var(--ink-3);font-size:11.5px;line-height:1.5}
/* Penanda kuning sebagai latar teks — kekal kelihatan dalam mana-mana kad,
   dan mengikut teks apabila ia membalut ke baris baharu. */
.mark{
  color:var(--purple);font-style:normal;font-weight:800;
  background-image:linear-gradient(var(--yellow),var(--yellow));
  background-repeat:no-repeat;background-size:100% .34em;background-position:0 86%;
  box-decoration-break:clone;-webkit-box-decoration-break:clone;
}
.num{font-variant-numeric:tabular-nums}

/* ── Jenama ────────────────────────────────────────────────────────────── */
/* gap:0 supaya "MAIN" dan titik koralnya kekal rapat sebagai satu perkataan */
.brand{display:inline-flex;align-items:center;gap:0;color:var(--plum);font-family:var(--display);font-size:21px;font-weight:800;letter-spacing:-.055em}
.brand-dot{color:var(--coral)}
.brand-mark{position:relative;display:grid;place-items:center;width:34px;height:34px;margin-right:10px;color:#fff;isolation:isolate;flex:0 0 34px}
.brand-mark i{position:absolute;inset:2px 5px 6px 1px;border-radius:55% 45% 38% 62%;background:var(--purple);transform:rotate(-8deg);z-index:-1}
.brand-mark i:nth-child(2){inset:8px 0 1px 10px;background:var(--yellow);transform:rotate(14deg);z-index:-2}
.brand-mark b{font-size:12px;font-weight:900}
.brand-sm{font-size:17px}
.brand-sm .brand-mark{width:29px;height:29px;flex-basis:29px}
.brand-light{color:#fff}

/* ── Butang ────────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:52px;padding:0 22px;border-radius:var(--r-md);
  font-family:var(--display);font-size:14px;font-weight:800;letter-spacing:-.01em;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:linear-gradient(125deg,var(--purple),#7842bc);color:#fff;box-shadow:0 14px 26px rgba(93,47,165,.24)}
.btn-primary:hover{color:#fff;box-shadow:0 18px 32px rgba(93,47,165,.3)}
.btn-plum{background:var(--plum);color:#fff;box-shadow:0 12px 24px rgba(36,16,68,.2)}
.btn-plum:hover{color:#fff}
.btn-yellow{background:var(--yellow);color:var(--plum);box-shadow:0 12px 24px rgba(180,140,10,.24)}
.btn-yellow:hover{color:var(--plum)}
.btn-ghost{border:1px solid var(--line);background:rgba(255,255,255,.9);color:var(--plum);box-shadow:var(--sh-1)}
.btn-ghost:hover{background:#fff;color:var(--plum);border-color:var(--line-3)}
.btn-ok{background:linear-gradient(125deg,#1a7d52,#25946a);color:#fff;box-shadow:0 12px 24px rgba(19,110,72,.24)}
.btn-ok:hover{color:#fff}
.btn-stop{border:1px solid var(--stop-line);background:var(--stop-bg);color:var(--stop-ink)}
.btn-stop:hover{background:#ffe4dc;color:var(--stop-ink)}
.btn-quiet{color:var(--ink-2);background:transparent}
.btn-quiet:hover{background:var(--surface-3);color:var(--plum);transform:none}
.btn-sm{min-height:40px;padding:0 15px;font-size:12.5px;border-radius:var(--r-sm);gap:7px}
.btn-xs{min-height:33px;padding:0 12px;font-size:11.5px;border-radius:10px;gap:6px}
.btn-block{width:100%}
.btn-arrow{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--yellow);color:var(--plum);font-size:11px;flex:0 0 22px}
.btn-primary .btn-arrow,.btn-plum .btn-arrow{background:var(--yellow);color:var(--plum)}
.btn-yellow .btn-arrow{background:var(--plum);color:var(--yellow)}
.btn:disabled,.btn.is-off{opacity:.42;pointer-events:none;box-shadow:none}

.iconbtn{
  display:grid;place-items:center;width:40px;height:40px;border-radius:var(--r-sm);
  background:var(--surface-3);color:var(--purple);transition:.18s ease;flex:0 0 40px;
}
.iconbtn:hover{background:var(--lavender)}
.iconbtn-plain{background:transparent}

/* ── Kad ───────────────────────────────────────────────────────────────── */
.card{
  border:1px solid var(--line-2);border-radius:var(--r-xl);background:var(--surface);
  padding:20px;box-shadow:var(--sh-2);
}
.card-sm{border-radius:var(--r-lg);padding:16px;box-shadow:var(--sh-1)}
.card-flat{box-shadow:none;background:var(--surface-2)}
.card-tint{background:linear-gradient(150deg,#fff 60%,var(--lavender))}
.card-tint-y{background:linear-gradient(150deg,#fff 60%,#fff8d9)}
.card-tint-p{background:linear-gradient(150deg,#fff 60%,#fff1f7)}
.card-tint-s{background:linear-gradient(150deg,#fff 60%,#eff9ff)}
.card-plum{background:linear-gradient(150deg,var(--plum),#4a2277);color:#fff;border-color:rgba(255,255,255,.12)}
.card-plum h1,.card-plum h2,.card-plum h3,.card-plum h4{color:#fff}
.card-plum .sub,.card-plum .lead{color:#cdc0dc}
.card-hot{border-color:var(--stop-line);background:linear-gradient(150deg,#fff 55%,var(--stop-bg))}
.card-warm{border-color:var(--warn-line);background:linear-gradient(150deg,#fff 55%,var(--warn-bg))}
.card-cool{border-color:var(--ok-line);background:linear-gradient(150deg,#fff 55%,var(--ok-bg))}

/* ── Jubin ikon berputar (DNA jenama MAIN) ─────────────────────────────── */
.tile{
  display:grid;place-items:center;width:48px;height:48px;border-radius:var(--r-md);
  color:var(--plum);transform:rotate(-5deg);flex:0 0 48px;
}
.tile svg{transform:rotate(5deg)}
.tile-lg{width:58px;height:58px;border-radius:var(--r-lg);flex-basis:58px}
.tile-sm{width:38px;height:38px;border-radius:var(--r-sm);flex-basis:38px}
.tile-y{background:var(--yellow)}
.tile-p{background:var(--pink)}
.tile-s{background:var(--sky)}
.tile-m{background:var(--mint);color:#12704a}
.tile-c{background:var(--coral);color:#fff}
.tile-v{background:var(--lavender);color:var(--purple)}
.tile-plum{background:var(--plum);color:#fff}

/* ── Cip / lencana ─────────────────────────────────────────────────────── */
.chip{
  display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:var(--r-pill);
  background:var(--surface-3);color:var(--ink-2);border:1px solid transparent;
  font-family:var(--display);font-size:11px;font-weight:800;letter-spacing:-.01em;white-space:nowrap;
}
.chip-ok{background:var(--ok-bg);color:var(--ok-ink);border-color:var(--ok-line)}
.chip-warn{background:var(--warn-bg);color:var(--warn-ink);border-color:var(--warn-line)}
.chip-stop{background:var(--stop-bg);color:var(--stop-ink);border-color:var(--stop-line)}
.chip-info{background:var(--info-bg);color:var(--info-ink);border-color:var(--info-line)}
.chip-purple{background:var(--lavender);color:var(--purple);border-color:rgba(93,47,165,.14)}
.chip-plum{background:var(--plum);color:#fff}
.chip-xs{padding:3px 8px;font-size:10px}
.chip-dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex:0 0 6px}
.chip-live .chip-dot{animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.32}}

.pill-verified{
  display:inline-flex;align-items:center;gap:5px;padding:4px 9px;border-radius:8px;
  background:var(--mint);color:#12704a;font-family:var(--display);font-size:9.5px;font-weight:900;letter-spacing:.06em;
}

/* ── Medan borang ──────────────────────────────────────────────────────── */
.field{display:flex;flex-direction:column;gap:7px}
.field>label,.lab{
  font-family:var(--display);font-size:11px;font-weight:900;letter-spacing:.06em;
  color:var(--ink-2);text-transform:uppercase;display:flex;align-items:center;gap:7px;
}
.input,.select,.textarea{
  display:flex;align-items:center;gap:10px;
  min-height:52px;padding:0 15px;border:1.5px solid var(--line);border-radius:var(--r-md);
  background:var(--surface-2);color:var(--ink);font-size:14px;width:100%;transition:.18s ease;
}
.input:hover,.select:hover{border-color:var(--line-3)}
.input.is-on{border-color:var(--purple);background:#fff;box-shadow:0 0 0 4px rgba(93,47,165,.09)}
.input.is-bad{border-color:var(--stop-line);background:var(--stop-bg)}
.ph{color:var(--ink-3)}
.select::after{content:"";margin-left:auto;width:9px;height:9px;border-right:2px solid var(--purple);border-bottom:2px solid var(--purple);transform:rotate(45deg) translate(-2px,-2px);flex:0 0 9px}
.textarea{min-height:96px;align-items:flex-start;padding-top:15px;line-height:1.5}
.input svg,.select svg{color:var(--purple);flex:0 0 auto}
.hint{color:var(--ink-3);font-size:11.5px;line-height:1.45}
.hint-bad{color:var(--stop-ink)}

.seg{display:flex;padding:4px;border-radius:14px;background:var(--lavender);gap:3px}
.seg>*{
  flex:1;display:flex;align-items:center;justify-content:center;min-height:40px;border-radius:11px;
  color:#6d6478;font-family:var(--display);font-size:12.5px;font-weight:800;transition:.18s ease;
}
.seg>.on{background:#fff;color:var(--purple);box-shadow:0 4px 12px rgba(70,34,112,.1)}

.opts{display:flex;gap:8px;flex-wrap:wrap}
.opt{
  flex:1 1 0;min-width:64px;min-height:52px;display:flex;align-items:center;justify-content:center;
  border:1.5px solid var(--line);border-radius:var(--r-sm);background:var(--surface-2);
  font-family:var(--display);font-size:13px;font-weight:800;color:var(--ink-2);transition:.18s ease;
}
.opt:hover{border-color:var(--line-3)}
.opt.on{border-color:var(--purple);background:var(--lavender);color:var(--purple);box-shadow:0 0 0 3px rgba(93,47,165,.1)}

.check{display:flex;gap:11px;align-items:flex-start;font-size:12.5px;color:var(--ink-2);line-height:1.5}
.box{
  width:22px;height:22px;flex:0 0 22px;border:1.5px solid var(--line);border-radius:7px;
  background:#fff;display:grid;place-items:center;margin-top:1px;color:transparent;
}
.box.on{background:var(--purple);border-color:var(--purple);color:#fff}
.radio{width:21px;height:21px;flex:0 0 21px;border:1.5px solid var(--line);border-radius:50%;background:#fff;transition:.18s ease}
.radio.on{border:6px solid var(--purple)}

/* ── Baris pilihan ─────────────────────────────────────────────────────── */
.pick{
  display:flex;align-items:center;gap:13px;padding:15px;
  border:1.5px solid var(--line);border-radius:var(--r-lg);background:#fff;transition:.18s ease;
}
.pick:hover{border-color:var(--line-3);box-shadow:var(--sh-1)}
.pick.on{border-color:var(--purple);box-shadow:0 0 0 3px rgba(93,47,165,.1)}
.pick-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}

/* ── Amaran ────────────────────────────────────────────────────────────── */
.note{
  display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:var(--r-md);
  border:1px solid var(--line-2);background:var(--surface-3);font-size:12.5px;line-height:1.55;color:var(--ink-2);
}
.note svg{flex:0 0 auto;margin-top:1px}
.note b{color:var(--plum)}
.note-ok{background:var(--ok-bg);border-color:var(--ok-line);color:#155f42}
.note-ok b,.note-ok svg{color:var(--ok-ink)}
.note-warn{background:var(--warn-bg);border-color:var(--warn-line);color:#7a5606}
.note-warn b,.note-warn svg{color:var(--warn-ink)}
.note-stop{background:var(--stop-bg);border-color:var(--stop-line);color:#a83b21}
.note-stop b,.note-stop svg{color:var(--stop-ink)}
.note-info{background:var(--info-bg);border-color:var(--info-line);color:#1b5178}
.note-info b,.note-info svg{color:var(--info-ink)}

/* ── Kira detik ────────────────────────────────────────────────────────── */
.timer{display:flex;flex-direction:column;gap:9px;padding:15px 16px;border-radius:var(--r-lg);background:var(--warn-bg);border:1px solid var(--warn-line)}
.timer-top{display:flex;align-items:center;gap:10px;color:var(--warn-ink)}
.timer-top b{font-family:var(--display);font-size:12.5px;font-weight:800}
.timer-val{margin-left:auto;font-family:var(--display);font-size:22px;font-weight:800;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.bar{height:6px;border-radius:var(--r-pill);background:rgba(138,98,6,.16);overflow:hidden}
.bar>i{display:block;height:100%;border-radius:var(--r-pill);background:var(--warn-ink)}
.bar-ok>i{background:var(--ok-ink)}
.bar-purple{background:var(--lavender)}
.bar-purple>i{background:var(--purple)}

/* ── Garis masa ────────────────────────────────────────────────────────── */
.steps{display:flex;flex-direction:column}
.step{display:flex;gap:14px;padding:11px 0;position:relative}
.step+.step::before{content:"";position:absolute;left:9px;top:-8px;height:16px;width:2px;background:var(--line)}
.step.done+.step::before{background:var(--ok-line)}
.dot{width:20px;height:20px;flex:0 0 20px;border-radius:50%;border:2px solid var(--line);background:#fff;display:grid;place-items:center;margin-top:1px;color:transparent}
.step.done .dot{background:var(--ok-ink);border-color:var(--ok-ink);color:#fff}
.step.now .dot{border-color:var(--warn-ink);border-width:5px}
.step-b{display:flex;flex-direction:column;gap:2px}
.step-b b{font-family:var(--display);font-size:13px;font-weight:800;color:var(--plum)}
.step-b span{font-size:11.5px;color:var(--ink-3)}
.step.wait b{color:var(--ink-3)}
.step.wait{opacity:.62}

/* ── Ringkasan wang ────────────────────────────────────────────────────── */
.money{display:flex;flex-direction:column;gap:10px}
.money-row{display:flex;justify-content:space-between;gap:14px;font-size:13px;color:var(--ink-2)}
.money-row b{color:var(--plum)}
.money-total{
  display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  padding-top:12px;border-top:1px dashed var(--line);
}
.money-total>span{font-family:var(--display);font-size:13px;font-weight:800;color:var(--plum)}
.money-total>strong{font-family:var(--display);font-size:24px;font-weight:800;color:var(--purple);letter-spacing:-.04em}
.money-total.is-ok>strong{color:var(--ok-ink)}
.money-total.is-stop>strong{color:var(--stop-ink)}

/* ── Rangka aplikasi desktop ───────────────────────────────────────────── */
.app{
  max-width:1340px;margin:0 auto;padding:26px 24px 60px;
}
.app-shell{
  display:flex;min-height:760px;border:1px solid var(--line-2);border-radius:var(--r-xl);
  background:var(--surface);box-shadow:var(--sh-3);overflow:hidden;
}
.aside{
  width:236px;flex:0 0 236px;background:linear-gradient(170deg,var(--plum),#3a1a63);
  padding:22px 16px;display:flex;flex-direction:column;gap:22px;color:#cdc0dc;
}
.aside-brand{display:flex;align-items:center;gap:10px;padding:0 6px 18px;border-bottom:1px solid rgba(255,255,255,.11)}
.aside-brand .brand{color:#fff;font-size:19px}
.aside-org{display:flex;align-items:center;gap:10px;padding:11px;border-radius:var(--r-sm);background:rgba(255,255,255,.07)}
.aside-org b{display:block;color:#fff;font-family:var(--display);font-size:12.5px;font-weight:800;line-height:1.25}
.aside-org span{font-size:10px;color:#a898bd}
.nav{display:flex;flex-direction:column;gap:3px}
.nav a{
  display:flex;align-items:center;gap:11px;padding:11px 12px;border-radius:var(--r-sm);
  color:#cdc0dc;font-family:var(--display);font-size:13px;font-weight:700;transition:.18s ease;
}
.nav a:hover{background:rgba(255,255,255,.08);color:#fff}
.nav a.on{background:#fff;color:var(--plum);font-weight:800;box-shadow:0 8px 20px rgba(12,4,26,.28)}
.nav a.on svg{color:var(--purple)}
.nav-count{
  margin-left:auto;min-width:21px;height:21px;padding:0 6px;border-radius:var(--r-pill);
  background:var(--coral);color:#fff;font-size:10.5px;font-weight:900;display:grid;place-items:center;
}
.nav a.on .nav-count{background:var(--coral);color:#fff}
.aside-foot{margin-top:auto;display:flex;align-items:center;gap:10px;padding:12px;border-radius:var(--r-sm);background:rgba(255,255,255,.07)}
.aside-foot b{display:block;color:#fff;font-family:var(--display);font-size:12px;font-weight:800}
.aside-foot span{font-size:10px;color:#a898bd}

.pane{flex:1;min-width:0;display:flex;flex-direction:column;background:var(--surface-2)}
.pane-top{
  display:flex;align-items:center;gap:16px;padding:16px 26px;background:#fff;
  border-bottom:1px solid var(--line-2);flex-wrap:wrap;
}
.pane-top .search{
  flex:1;min-width:180px;max-width:340px;display:flex;align-items:center;gap:9px;
  min-height:42px;padding:0 14px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--surface-2);color:var(--ink-3);font-size:13px;
}
.pane-body{flex:1;padding:24px 26px 30px;display:flex;flex-direction:column;gap:20px;overflow:auto}
.pane-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;flex-wrap:wrap}
.pane-head h2{font-size:23px;letter-spacing:-.045em}
.pane-head .sub{margin-top:4px}
.acts{display:flex;gap:9px;flex-wrap:wrap;align-items:center}

.avatar{
  display:grid;place-items:center;border-radius:var(--r-sm);
  background:var(--lavender);color:var(--purple);
  font-family:var(--display);font-size:13px;font-weight:900;flex:0 0 auto;
  width:38px;height:38px;
}
.avatar-sm{width:31px;height:31px;font-size:11px;border-radius:10px}
.avatar-lg{width:52px;height:52px;font-size:17px;border-radius:var(--r-md)}
.avatar-y{background:var(--yellow);color:var(--plum)}
.avatar-p{background:var(--pink);color:var(--plum)}
.avatar-m{background:var(--mint);color:#12704a}
.avatar-s{background:var(--sky);color:#1d5c88}

/* ── Grid ──────────────────────────────────────────────────────────────── */
.row{display:flex;gap:14px;flex-wrap:wrap}
.row>*{flex:1 1 0;min-width:0}
.g2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.g4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.stack{display:flex;flex-direction:column;gap:14px}
.stack-sm{display:flex;flex-direction:column;gap:9px}
.stack-lg{display:flex;flex-direction:column;gap:22px}
.tween{display:flex;align-items:center;justify-content:space-between;gap:14px}
.wrap{flex-wrap:wrap}
@media(max-width:900px){.g4{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.g4,.g3,.g2{grid-template-columns:minmax(0,1fr)}}

/* ── Statistik ─────────────────────────────────────────────────────────── */
.stat{
  border:1px solid var(--line-2);border-radius:var(--r-lg);background:#fff;
  padding:16px 17px;display:flex;flex-direction:column;gap:5px;box-shadow:var(--sh-1);
}
.stat small{font-family:var(--display);font-size:10px;font-weight:900;letter-spacing:.11em;color:var(--purple);text-transform:uppercase}
.stat strong{font-family:var(--display);font-size:27px;font-weight:800;color:var(--plum);letter-spacing:-.05em;line-height:1.1}
.stat span{font-size:11.5px;color:var(--ink-3);line-height:1.4}
.stat-v{background:linear-gradient(150deg,#fff,var(--lavender))}
.stat-y{background:linear-gradient(150deg,#fff,#fff8d9)}
.stat-m{background:linear-gradient(150deg,#fff,#e9f8f1)}
.stat-p{background:linear-gradient(150deg,#fff,#fff1f7)}
.stat-hot{border-color:var(--stop-line);background:linear-gradient(150deg,#fff,var(--stop-bg))}
.stat-hot small{color:var(--stop-ink)}
.stat-hot strong{color:var(--stop-ink)}
.stat-key{border:2px solid var(--purple);background:linear-gradient(150deg,#fff,var(--lavender))}
.stat-key strong{color:var(--purple)}

/* ── Jadual ────────────────────────────────────────────────────────────── */
.table-card{border:1px solid var(--line-2);border-radius:var(--r-lg);background:#fff;box-shadow:var(--sh-1);overflow:hidden}
.table-head{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:15px 18px;border-bottom:1px solid var(--line-2);flex-wrap:wrap}
.table-head h3{font-size:15px}
.table-scroll{overflow-x:auto}
table.t{width:100%;border-collapse:collapse;font-size:13px}
table.t th,table.t td{padding:13px 16px;text-align:left;vertical-align:middle;border-bottom:1px solid var(--line-2)}
table.t th{
  font-family:var(--display);font-size:10px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);background:var(--surface-2);white-space:nowrap;
}
table.t tbody tr:last-child td{border-bottom:0}
table.t tbody tr:hover{background:var(--surface-2)}
table.t .r{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
table.t .strong{font-family:var(--display);font-weight:800;color:var(--plum)}
table.t .dim{color:var(--ink-3)}
table.t .ref{font-family:var(--display);font-size:11.5px;font-weight:700;color:var(--purple);white-space:nowrap}
table.t tr.is-hot{background:var(--stop-bg)}
table.t tr.is-hot:hover{background:#ffe6de}
table.t tr.is-warm{background:var(--warn-bg)}
table.t tr.is-warm:hover{background:#fff0c0}
.cell{display:flex;flex-direction:column;gap:2px}
.cell b{font-family:var(--display);font-size:13px;font-weight:800;color:var(--plum)}
.cell span{font-size:11.5px;color:var(--ink-3)}
.cell-row{display:flex;align-items:center;gap:11px}

/* ── Tab ───────────────────────────────────────────────────────────────── */
.tabs{display:flex;gap:4px;padding:4px;border-radius:14px;background:var(--surface-3);align-self:flex-start;flex-wrap:wrap}
.tabs>*{
  padding:9px 15px;border-radius:11px;color:var(--ink-2);
  font-family:var(--display);font-size:12.5px;font-weight:800;transition:.18s ease;
}
.tabs>*:hover{color:var(--plum)}
.tabs>.on{background:#fff;color:var(--purple);box-shadow:0 4px 12px rgba(70,34,112,.1)}
.tabs-line{background:transparent;padding:0;gap:0;border-bottom:1px solid var(--line-2);align-self:stretch;border-radius:0}
.tabs-line>*{border-radius:0;padding:11px 16px;border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs-line>.on{background:transparent;box-shadow:none;border-bottom-color:var(--purple)}

/* ── Kad senarai (parent) ──────────────────────────────────────────────── */
.listing{
  display:flex;flex-direction:column;gap:13px;padding:13px;
  border:1px solid var(--line-2);border-radius:var(--r-lg);background:#fff;box-shadow:var(--sh-1);transition:.18s ease;
}
.listing:hover{box-shadow:var(--sh-2);transform:translateY(-2px)}
.listing.is-off{opacity:.55}
.listing-top{display:flex;gap:13px}
.thumb{
  width:82px;height:82px;flex:0 0 82px;border-radius:var(--r-md);
  display:grid;place-items:center;align-content:center;gap:2px;
  background:linear-gradient(145deg,var(--yellow),#ffc957);color:var(--purple);
}
.thumb-p{background:linear-gradient(145deg,var(--pink),#ffb0cf)}
.thumb-s{background:linear-gradient(145deg,var(--sky),#8fd3fa)}
.thumb small{font-family:var(--display);font-size:8px;font-weight:900;letter-spacing:.12em}
.listing-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;padding-top:11px;border-top:1px solid var(--line-2)}
.price{font-family:var(--display);font-size:19px;font-weight:800;color:var(--purple);letter-spacing:-.04em;line-height:1}
.price small{display:block;margin-top:3px;font-size:10px;font-weight:700;color:var(--ink-3);letter-spacing:0}

/* ── Bar melekat bawah (parent) ────────────────────────────────────────── */
.dock{
  position:sticky;bottom:0;margin:4px -18px -26px;padding:14px 18px 18px;
  background:linear-gradient(to top,#fff 72%,rgba(255,255,255,0));
  display:flex;flex-direction:column;gap:11px;
}
.dock-row{display:flex;align-items:center;justify-content:space-between;gap:14px}

/* ── Bar navigasi telefon ──────────────────────────────────────────────── */
.appbar{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:4px 0 2px;
}
.tabbar{
  position:sticky;bottom:0;display:flex;margin:6px -18px -26px;padding:10px 8px 14px;
  background:#fff;border-top:1px solid var(--line-2);
}
.tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 0;color:var(--ink-3);font-family:var(--display);font-size:9.5px;font-weight:800}
.tabbar a.on{color:var(--purple)}

/* ── Hero (halaman utama parent) ───────────────────────────────────────── */
.hero{
  position:relative;overflow:hidden;padding:22px 18px 26px;margin:0 0 0;
  background:
    radial-gradient(circle at 88% 6%,rgba(255,226,82,.5),transparent 34%),
    radial-gradient(circle at 4% 88%,rgba(255,200,223,.5),transparent 32%),
    linear-gradient(155deg,#fffdf8,#fff9ec 52%,#f5edff);
  display:flex;flex-direction:column;gap:16px;
}
.hero::after{content:"";position:absolute;right:-60px;top:60px;width:170px;height:170px;border:34px solid rgba(93,47,165,.05);border-radius:50%}
.hero>*{position:relative;z-index:2}
.doodle{position:absolute;z-index:1;font-family:var(--display);font-weight:900}

/* ── Modal / lapisan ───────────────────────────────────────────────────── */
.sheet{
  border:1px solid var(--line-2);border-radius:var(--r-xl);background:#fff;
  box-shadow:var(--sh-3);padding:22px;display:flex;flex-direction:column;gap:16px;
}
.sheet-tag{
  display:inline-flex;align-items:center;gap:7px;padding:5px 11px;border-radius:var(--r-pill);
  background:var(--lavender);color:var(--purple);font-family:var(--display);font-size:10px;font-weight:900;letter-spacing:.1em;
  align-self:flex-start;
}

/* ── Pemuat ────────────────────────────────────────────────────────────── */
.spinner{
  width:52px;height:52px;border-radius:50%;
  border:5px solid var(--lavender);border-top-color:var(--purple);
  animation:spin 1s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.blob{
  width:76px;height:76px;border-radius:34% 66% 63% 37%/48% 42% 58% 52%;
  background:linear-gradient(145deg,var(--purple),#8051c6);display:grid;place-items:center;color:#fff;
  box-shadow:0 16px 34px rgba(72,31,117,.28);
}
.blob-ok{background:linear-gradient(145deg,#1a7d52,#2fa578);box-shadow:0 16px 34px rgba(19,110,72,.26)}
.blob-stop{background:linear-gradient(145deg,#c04426,var(--coral));box-shadow:0 16px 34px rgba(192,68,38,.26)}
.blob-y{background:linear-gradient(145deg,var(--yellow),#ffc957);color:var(--plum);box-shadow:0 16px 34px rgba(180,140,10,.26)}

/* ── Halaman indeks ────────────────────────────────────────────────────── */
.cover{
  position:relative;overflow:hidden;padding:74px 0 62px;
  background:
    radial-gradient(circle at 86% 10%,rgba(255,226,82,.42),transparent 24%),
    radial-gradient(circle at 6% 84%,rgba(255,200,223,.46),transparent 26%),
    linear-gradient(150deg,#fffdf8,#fff9ec 55%,#f5edff);
}
.cover::before{content:"";position:absolute;left:-140px;top:120px;width:340px;height:340px;border:1px dashed rgba(93,47,165,.2);border-radius:50%}
.cover::after{content:"";position:absolute;right:-70px;bottom:-90px;width:260px;height:260px;border:50px solid rgba(93,47,165,.055);border-radius:50%}
.wrap-c{position:relative;z-index:2;width:min(1240px,calc(100% - 48px));margin:0 auto}
.cover h1{font-size:clamp(40px,5.4vw,62px);letter-spacing:-.06em;line-height:1.03;max-width:17ch;margin:20px 0 18px;font-weight:700}
.cover h1 em{font-style:normal;color:var(--purple);font-weight:800}
.cover p{max-width:66ch;color:var(--muted);font-size:16px;line-height:1.7}
.cover-meta{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}

.gal{width:min(1240px,calc(100% - 48px));margin:0 auto;padding:56px 0 90px;display:flex;flex-direction:column;gap:46px}
.gal-group{display:flex;flex-direction:column;gap:18px}
.gal-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.gal-head h2{font-size:26px;letter-spacing:-.045em}
.gal-head .lead{flex:1 1 260px;font-size:13.5px}
.gal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(248px,1fr));gap:16px}
.gal-card{
  display:flex;flex-direction:column;gap:11px;padding:18px;
  border:1px solid var(--line-2);border-radius:var(--r-xl);background:#fff;
  box-shadow:var(--sh-1);transition:.2s ease;color:inherit;min-height:186px;
}
.gal-card:hover{transform:translateY(-4px) rotate(-.35deg);box-shadow:var(--sh-2);color:inherit}
.gal-card .n{font-family:var(--display);font-size:10.5px;font-weight:900;letter-spacing:.12em;color:rgba(93,47,165,.5)}
.gal-card h3{font-size:16px}
.gal-card p{font-size:12.5px;color:var(--muted);line-height:1.5}
.gal-card .go{margin-top:auto;display:flex;align-items:center;gap:8px;color:var(--purple);font-family:var(--display);font-size:12px;font-weight:800}

.foot{
  width:min(1240px,calc(100% - 48px));margin:0 auto;padding:26px 0 54px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;color:var(--ink-3);font-size:12px;
}

/* ── Ikon ──────────────────────────────────────────────────────────────── */
svg.i{width:18px;height:18px;flex:0 0 auto;stroke:currentColor;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round}
svg.i-sm{width:14px;height:14px;stroke-width:1.9}
svg.i-lg{width:24px;height:24px}
svg.i-xl{width:30px;height:30px;stroke-width:1.5}

/* ── Utiliti ───────────────────────────────────────────────────────────── */
.grow{flex:1;min-width:0}
.center{text-align:center}
.mid{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.rule{height:1px;background:var(--line-2);border:0;margin:2px 0}
.rule-dash{height:0;border:0;border-top:1px dashed var(--line);margin:2px 0}
.pad{padding:20px}
.nowrap{white-space:nowrap}

@media(max-width:1080px){
  .app-shell{flex-direction:column;min-height:0}
  .aside{width:auto;flex:none;flex-direction:row;align-items:center;gap:14px;overflow-x:auto;padding:14px 16px}
  .aside-brand{border-bottom:0;border-right:1px solid rgba(255,255,255,.11);padding:0 16px 0 0;flex:0 0 auto}
  .aside-org,.aside-foot{display:none}
  .nav{flex-direction:row;gap:5px;margin:0}
  .nav a{white-space:nowrap;padding:9px 13px}
  .pane-body{padding:18px}
}
@media print{
  .proto{display:none}
  body{background:#fff}
  .app-shell,.phone{box-shadow:none;break-inside:avoid}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}