/* OGInvoice 3.0 - rupa diilhamkan oleh me. (Manrope, bingkai lembut, nav pil gelap, aksen biru) */
@font-face {
  font-family: "Manrope";
  src: url("fonts/manrope.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}

:root {
  /* permukaan */
  --canvas: #ececee;
  --frame: #f7f7f8;
  --card: #ffffff;
  --card-2: #f4f4f6;
  /* teks */
  --ink: #141416;
  --ink-2: #45454c;
  --muted: #85858d;
  /* garisan */
  --line: #e6e6ea;
  --line-2: #efeff2;
  /* keluarga gelap */
  --night: #161618;
  --night-2: #222226;
  --night-3: #2d2d32;
  --night-ink: #f4f4f5;
  --night-muted: #9b9ba3;
  /* aksen (biru) - tukar di sini sahaja */
  --accent: #2f6bff;
  --accent-hi: #6b9bff;
  --accent-lo: #1d4fd8;
  --accent-soft: #e8efff;
  --accent-rgb: 47 107 255;
  --grad: linear-gradient(135deg, #5b9dff 0%, #2f6bff 52%, #1d43c9 100%);
  /* status */
  --green: #2f9e6e;
  --red: #e5484d;
  --red-soft: #fdecec;
  --wa: #1fa855;
  --wa-2: #178a45;
  /* kedalaman */
  --shadow: 0 1px 2px rgba(20,20,24,.04), 0 6px 20px -10px rgba(20,20,24,.12);
  --shadow-lg: 0 2px 6px rgba(20,20,24,.06), 0 28px 60px -24px rgba(20,20,24,.35);
  /* gerakan */
  --ease: cubic-bezier(.2, .7, .1, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  /* bentuk */
  --r-frame: 30px;
  --r-card: 22px;
  --r-sm: 14px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --canvas: #0c0c0e; --frame: #111113; --card: #19191c; --card-2: #202024;
    --ink: #f3f3f4; --ink-2: #c4c4ca; --muted: #8e8e97;
    --line: #28282d; --line-2: #222226;
    --night: #1f1f23; --night-2: #2a2a2f; --night-3: #35353b;
    --accent-soft: #101a33; --red-soft: #33191a;
    --shadow: 0 1px 2px rgba(0,0,0,.35), 0 8px 24px -12px rgba(0,0,0,.7);
    --shadow-lg: 0 2px 8px rgba(0,0,0,.4), 0 30px 60px -24px rgba(0,0,0,.8);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --canvas: #0c0c0e; --frame: #111113; --card: #19191c; --card-2: #202024;
  --ink: #f3f3f4; --ink-2: #c4c4ca; --muted: #8e8e97;
  --line: #28282d; --line-2: #222226;
  --night: #1f1f23; --night-2: #2a2a2f; --night-3: #35353b;
  --accent-soft: #101a33; --red-soft: #33191a;
  --shadow: 0 1px 2px rgba(0,0,0,.35), 0 8px 24px -12px rgba(0,0,0,.7);
  --shadow-lg: 0 2px 8px rgba(0,0,0,.4), 0 30px 60px -24px rgba(0,0,0,.8);
  color-scheme: dark;
}

/* ---------- Asas ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; background: var(--canvas); }
body {
  margin: 0; min-height: 100vh; background: var(--canvas); color: var(--ink);
  font: 500 14.5px/1.55 "Manrope", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 10px; }
::selection { background: color-mix(in srgb, var(--accent) 25%, transparent); }
h1, h2, h3 { margin: 0; letter-spacing: -.025em; color: var(--ink); }
h1 { font-size: 1.85rem; font-weight: 750; line-height: 1.1; }
h2 { font-size: 1.02rem; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; }
.sub { color: var(--muted); margin: 4px 0 0; font-size: .88rem; font-weight: 500; }
.muted { color: var(--muted); }
.small { font-size: .8rem; }
.icon { flex: none; display: block; }
.num, .amt { font-variant-numeric: tabular-nums; }
code { background: var(--accent-soft); color: var(--accent); padding: 1px 7px; border-radius: 6px; font-size: .9em; }
body.locked { overflow: hidden; }

/* ---------- Bingkai ---------- */
.shell { min-height: 100vh; background: var(--frame); }
@media (min-width: 900px) {
  body.has-nav { padding: 18px; }
  .shell { min-height: calc(100vh - 36px); border-radius: var(--r-frame); box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, var(--shadow); }
}
.wrap { max-width: 1360px; margin: 0 auto; padding: 18px 16px 120px; }
@media (min-width: 900px) { .wrap { padding: 10px 44px 48px; } }
.wrap.read { max-width: 860px; }
.narrow { max-width: 440px; margin: 0 auto; }

.top {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  max-width: 1360px; margin: 0 auto; padding: calc(14px + env(safe-area-inset-top)) 16px 10px;
}
@media (min-width: 900px) { .top { padding: 22px 40px 18px; } }
.brand { display: flex; align-items: center; gap: 11px; }
.logo { display: block; flex: none; filter: drop-shadow(0 6px 10px rgb(var(--accent-rgb) / .28)); }
.brand-txt { display: flex; flex-direction: column; line-height: 1.1; }
.brand-txt b { font-size: 1.12rem; font-weight: 800; letter-spacing: -.03em; }
.brand-txt small { font-size: .7rem; color: var(--muted); font-weight: 600; margin-top: 2px; }
@media (max-width: 380px) { .brand-txt small { display: none; } }
.top-end { display: flex; align-items: center; gap: 8px; }

/* ---------- Nav pil + dok ---------- */
.pillnav {
  position: relative; display: none; align-items: center; gap: 2px; padding: 5px;
  background: var(--night); border-radius: 999px; box-shadow: 0 10px 24px -14px rgba(0,0,0,.55);
}
.pillnav a {
  position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 18px; border-radius: 999px; color: var(--night-muted);
  font-size: .84rem; font-weight: 650; transition: color .25s var(--ease);
}
.pillnav a:hover { color: var(--night-ink); }
.pillnav a.on { color: #fff; }
.pillnav a.on .spark-ic { display: block; animation: twinkle 3.6s ease-in-out infinite; }
.pillnav .spark-ic { display: none; }
@keyframes twinkle { 0%,70%,100% { transform: rotate(0) scale(1); } 80% { transform: rotate(45deg) scale(1.2); } }
.pill-ind, .dock-ind {
  position: absolute; z-index: 0; left: 0; top: 5px; bottom: 5px; width: 0; opacity: 0; border-radius: 999px;
  background: var(--grad); box-shadow: 0 6px 16px -6px rgb(var(--accent-rgb) / .7);
  transition: transform .5s cubic-bezier(.65,0,.25,1.15), width .5s cubic-bezier(.65,0,.25,1.15);
}
.dock {
  position: fixed; z-index: 40; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom));
  display: flex; gap: 2px; padding: 6px; background: var(--night); border-radius: 999px;
  box-shadow: 0 16px 36px -12px rgba(0,0,0,.55); transform: translateX(-50%); max-width: calc(100vw - 20px);
}
.dock-ind { top: 6px; bottom: 6px; }
.dock a {
  position: relative; z-index: 1; display: flex; align-items: center; height: 46px; padding: 0 13px;
  border-radius: 999px; color: var(--night-muted); font-size: .78rem; font-weight: 700; white-space: nowrap;
  transition: color .3s var(--ease), padding .35s var(--ease-out);
}
.dock a span { max-width: 0; overflow: hidden; opacity: 0; transition: max-width .4s var(--ease-out), opacity .3s var(--ease), margin .4s var(--ease-out); }
.dock a.on { color: #fff; padding: 0 16px; }
.dock a.on span { max-width: 110px; opacity: 1; margin-left: 7px; }
@media (max-width: 420px) { .dock a { padding: 0 9px; } .dock a.on { padding: 0 13px; } }
@media (min-width: 1180px) { .pillnav { display: flex; } .dock { display: none; } .wrap { padding-bottom: 48px; } }

.lang { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); font-size: .72rem; font-weight: 750; }
.lang a { padding: 6px 11px; border-radius: 999px; color: var(--muted); }
.lang a.on { background: var(--night); color: #fff; }
:root[data-theme="dark"] .lang a.on { background: var(--accent); }
.avatar {
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
  background: var(--night); color: #fff; font-weight: 800; font-size: .9rem;
  box-shadow: 0 0 0 3px var(--frame), 0 0 0 4px var(--line);
}
@media (max-width: 480px) { .avatar { display: none; } }

/* ---------- Tajuk halaman ---------- */
.title-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin: 14px 0 22px; }
.title-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
@media (min-width: 900px) { h1 { font-size: 2.15rem; } .title-row { margin: 18px 0 26px; } }

/* ---------- Butang ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 20px;
  border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--ink);
  font-size: .86rem; font-weight: 700; white-space: nowrap; cursor: pointer;
  transition: transform .2s var(--ease), box-shadow .3s var(--ease), background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.btn:hover { border-color: var(--muted); }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .6; cursor: wait; }
.btn-primary {
  border: 0; background: var(--grad); color: #fff;
  box-shadow: 0 10px 22px -10px rgb(var(--accent-rgb) / .75), inset 0 1px 0 rgba(255,255,255,.25);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 14px 26px -10px rgb(var(--accent-rgb) / .85), inset 0 1px 0 rgba(255,255,255,.25); }
.btn-primary:active { transform: translateY(0) scale(.97); }
.btn-wa {
  border: 0; background: var(--wa); color: #fff;
  box-shadow: 0 10px 22px -10px rgb(31 168 85 / .75), inset 0 1px 0 rgba(255,255,255,.22);
}
.btn-wa:hover { background: var(--wa-2); border-color: transparent; transform: translateY(-1px); }
.btn-dark { border: 0; background: var(--night); color: #fff; }
.btn-dark:hover { background: var(--night-2); }
.btn-white { border: 0; background: #fff; color: var(--ink); }
.btn-quiet { border-color: transparent; background: transparent; color: var(--ink-2); padding: 0 14px; }
.btn-quiet:hover { background: var(--card-2); }
.btn-block { width: 100%; }
.btn-sm { height: 36px; font-size: .8rem; padding: 0 16px; }
.circle {
  display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--card); color: var(--ink-2); cursor: pointer;
  transition: transform .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), box-shadow .25s var(--ease);
}
.circle:hover { color: var(--ink); border-color: var(--muted); box-shadow: var(--shadow); }
.circle:active { transform: scale(.94); }
.theme-btn { position: relative; }
.theme-btn .icon { position: absolute; }
.theme-btn .icon { transition: transform .5s var(--ease-out), opacity .3s var(--ease); }
.theme-btn .i-sun { opacity: 0; transform: rotate(-90deg) scale(.6); }
:root[data-theme="dark"] .theme-btn .i-sun { opacity: 1; transform: none; }
:root[data-theme="dark"] .theme-btn .i-moon { opacity: 0; transform: rotate(90deg) scale(.6); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-btn .i-sun { opacity: 1; transform: none; }
  :root:not([data-theme="light"]) .theme-btn .i-moon { opacity: 0; transform: rotate(90deg) scale(.6); }
}

/* ---------- Medan borang ---------- */
.field { display: block; margin-bottom: 16px; }
.field > span { display: block; font-size: .78rem; font-weight: 700; color: var(--ink-2); margin-bottom: 7px; }
.field small { display: block; color: var(--muted); font-size: .78rem; margin-top: 6px; line-height: 1.45; font-weight: 500; }
:where(input:not([type=checkbox],[type=radio],[type=hidden],[type=file],[type=color]), select, textarea) {
  display: block; width: 100%; min-height: 46px; padding: 11px 18px;
  font: 600 14.5px/1.4 "Manrope", system-ui, sans-serif; color: var(--ink);
  background: var(--card); border: 1px solid var(--line); border-radius: 999px;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
  -webkit-appearance: none; appearance: none;
}
:where(textarea) { border-radius: 18px; resize: vertical; min-height: 84px; font-weight: 500; }
:where(input[type=date]) { min-width: 0; }
input::placeholder, textarea::placeholder { color: var(--muted); font-weight: 500; }
:where(input, select, textarea):focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent);
}
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.grid3 { display: grid; grid-template-columns: 1fr; gap: 0 12px; }
@media (min-width: 700px) { .grid3 { grid-template-columns: 1.2fr 1fr 1fr; } }

/* ---------- Kad ---------- */
.card {
  position: relative; background: var(--card); border: 1px solid var(--line-2);
  border-radius: var(--r-card); padding: 20px; box-shadow: var(--shadow); margin-bottom: 16px;
}
.card > h2 { margin-bottom: 14px; }
.card .field:last-child { margin-bottom: 0; }
@media (max-width: 899px) { .card { padding: 16px; } }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.card-head h2 { margin: 0; }
.chip { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--card-2); color: var(--ink-2); }
.chip.blue { background: var(--accent-soft); color: var(--accent); }
.pill {
  display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 11px; border-radius: 999px;
  background: var(--card-2); color: var(--ink-2); font-size: .72rem; font-weight: 700;
}
.pill.blue { background: var(--accent-soft); color: var(--accent); }

/* ---------- Kad statistik ---------- */
.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 16px; }
@media (min-width: 900px) { .stats { grid-template-columns: repeat(4, 1fr); gap: 16px; } }
.stat { display: flex; flex-direction: column; min-height: 168px; overflow: hidden; margin: 0; }
.stat .label { font-size: .8rem; font-weight: 700; color: var(--ink-2); }
.stat .value { font-size: 2rem; font-weight: 800; letter-spacing: -.04em; line-height: 1; margin-top: 2px; font-variant-numeric: tabular-nums; }
.stat .value small { font-size: .8rem; font-weight: 700; letter-spacing: 0; color: var(--muted); }
.stat .foot { margin-top: auto; padding-top: 14px; }
@media (max-width: 899px) { .stat { min-height: 150px; } .stat .value { font-size: 1.7rem; } }
.stat-blue { background: var(--grad); border: 0; color: #fff; box-shadow: 0 18px 36px -18px rgb(var(--accent-rgb) / .8); }
.stat-blue .label { color: #fff; }
.stat-blue .chip { background: rgba(255,255,255,.2); color: #fff; }
.stat-blue .pill { background: rgba(255,255,255,.18); color: #fff; }
.stat-blue::after, .glow::after {
  content: ""; position: absolute; right: -40px; top: -40px; width: 160px; height: 160px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.28), transparent 65%); pointer-events: none;
  animation: glow 7s ease-in-out infinite alternate;
}
@keyframes glow { to { transform: translate(-18px, 22px) scale(1.15); opacity: .7; } }
.stat-link { transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out); }
.stat-link:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }

/* ---------- Panel gelap (jumlah) ---------- */
.night {
  position: relative; overflow: hidden; background: var(--night); color: var(--night-ink);
  border-radius: 28px; padding: 18px; box-shadow: var(--shadow-lg); margin-bottom: 16px;
}
.night::before {
  content: ""; position: absolute; right: -80px; top: -120px; width: 340px; height: 340px; border-radius: 50%;
  background: radial-gradient(circle, rgb(var(--accent-rgb) / .38), transparent 65%); pointer-events: none;
}
@media (min-width: 900px) { .night { padding: 22px; } }
.night > * { position: relative; }
.night .label { font-size: .8rem; font-weight: 700; color: var(--night-muted); }
.nw-big { font-size: clamp(2.2rem, 6vw, 3.4rem); font-weight: 800; letter-spacing: -.045em; line-height: 1.05; margin: 10px 0 14px; font-variant-numeric: tabular-nums; }
.bumped { animation: bump .5s cubic-bezier(.34,1.56,.64,1); display: inline-block; }
@keyframes bump { 40% { transform: scale(1.06); color: var(--accent-hi); } }
.nw-split { background: var(--night-2); border-radius: 22px; padding: 6px 18px; }
.nw-split div { display: flex; justify-content: space-between; gap: 10px; padding: 11px 0; font-size: .88rem; font-weight: 650; border-top: 1px solid rgba(255,255,255,.07); }
.nw-split div:first-child { border-top: 0; }
.nw-split dt { color: var(--night-muted); }
.nw-split dd { margin: 0; font-weight: 750; font-variant-numeric: tabular-nums; }
.nw-split { margin: 0; }
.night-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; }
.night h2 { color: var(--night-ink); }

/* ---------- Amaran & toast ---------- */
.alert { padding: 12px 18px; border-radius: 18px; margin-bottom: 16px; font-size: .88rem; font-weight: 650; animation: rise .5s var(--ease-out) both; }
.alert-error { background: var(--red-soft); color: var(--red); border: 1px solid color-mix(in srgb, var(--red) 25%, transparent); }
.alert-ok { background: var(--accent-soft); color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); }
.toast {
  position: fixed; z-index: 90; left: 50%; top: calc(18px + env(safe-area-inset-top)); display: inline-flex; align-items: center; gap: 8px;
  max-width: min(92vw, 460px); padding: 12px 20px; border-radius: 999px; background: var(--night); color: #fff;
  font-size: .84rem; font-weight: 650; box-shadow: var(--shadow-lg); transform: translateX(-50%); animation: toast-in .5s var(--ease-out) both;
}
.toast::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--accent-hi); }
.toast.out { animation: toast-out .4s var(--ease) both; }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, -12px) scale(.96); } }
@keyframes toast-out { to { opacity: 0; transform: translate(-50%, -10px); } }

/* ---------- Tindakan ---------- */
.actions { display: flex; flex-direction: column; gap: 10px; margin: 4px 0 18px; }
@media (min-width: 620px) { .actions { flex-direction: row; } .actions .btn { flex: 1; } }
.actions .btn { height: 50px; font-size: .92rem; }

/* ---------- Iklan ---------- */
.adbox { margin: 18px 0; text-align: center; }
.adbox small { display: block; color: var(--muted); font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 6px; }
.adbox-empty { border: 1.5px dashed var(--line); border-radius: var(--r-card); padding: 26px 10px; color: var(--muted); font-size: .8rem; font-weight: 600; background: transparent; }

/* ---------- Halaman masuk / daftar ---------- */
.auth { position: relative; padding-top: 10px; }
.auth h1 { margin-bottom: 4px; }
.auth .sub { margin-bottom: 20px; }
.auth-orbs { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.auth-orbs i { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .22; }
.auth-orbs i:nth-child(1) { width: 320px; height: 320px; left: -80px; top: 10%; background: #5b9dff; animation: drift 20s ease-in-out infinite alternate; }
.auth-orbs i:nth-child(2) { width: 280px; height: 280px; right: -60px; bottom: 5%; background: var(--accent); animation: drift 24s ease-in-out infinite alternate-reverse; }
@keyframes drift { to { transform: translate(40px, -30px) scale(1.15); } }
.auth > *:not(.auth-orbs) { position: relative; z-index: 1; }

/* ---------- Kad CTA & lain-lain ---------- */
.cta-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; }
.cta-row .muted { color: var(--night-muted); }
.hello { color: var(--muted); font-weight: 600; font-size: .9rem; }
.foot-note { text-align: center; color: var(--muted); font-size: .75rem; font-weight: 600; padding: 8px 0 0; }

/* ---------- Gerakan masuk ---------- */
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes title-in {
  from { clip-path: inset(-20% 100% -20% 0); transform: translateX(-8px); }
  to { clip-path: inset(-20% -5% -20% 0); transform: none; }
}
@keyframes pop-in { from { opacity: 0; transform: scale(.55); } }
.title-row h1, .hero h1 { animation: title-in .8s cubic-bezier(.65,0,.35,1) both; }
.title-row .sub, .hero .sub { animation: rise .6s .12s var(--ease-out) both; }
.title-row .title-actions { animation: rise .6s .16s var(--ease-out) both; }
.reveal > * { animation: rise .7s var(--ease-out) both; animation-delay: calc(.18s + var(--i, 0) * .07s); }
.pill, .stat .pill { animation: pop-in .5s cubic-bezier(.34,1.56,.64,1) both; animation-delay: calc(.6s + var(--i, 0) * .04s); }

/* ---------- Peralihan halaman & tema ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out .16s var(--ease) both; }
::view-transition-new(root) { animation: vt-in .32s var(--ease-out) both; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(6px); } }
.top { view-transition-name: top; }
.dock { view-transition-name: dock; }
::view-transition-group(top), ::view-transition-group(dock) { animation-duration: .2s; }
html.theming::view-transition-old(root), html.theming::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
html.theming .top, html.theming .dock { view-transition-name: none; }

/* ---------- Kurangkan gerakan ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ================= Kertas invois (3.1) ================= */
.paper-wrap { width: 100%; margin: 0 auto; }
@media (min-width: 900px) {
  .paper-wrap, .narrow-page { width: min(70vw, 1040px); margin-left: auto; margin-right: auto; }
}
.narrow-page { max-width: none; }
.paper {
  position: relative; background: var(--card); border: 1px solid var(--line); border-radius: 26px;
  box-shadow: var(--shadow-lg); padding: 22px 18px 24px; margin-bottom: 18px; overflow: hidden;
  animation: rise .7s var(--ease-out) both;
}
.paper::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: var(--grad); }
@media (min-width: 900px) { .paper { padding: 40px 44px 36px; } }
.paper-label { display: block; font-size: .68rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--accent); margin-bottom: 6px; }

/* medan "tulis terus di atas kertas" */
.paper .ink, .paper :where(input.ink, textarea.ink) {
  display: block; width: 100%; min-height: 0; padding: 7px 8px; margin: 0; background: transparent;
  border: 0; border-bottom: 1.5px dashed transparent; border-radius: 8px;
  font: 600 14.5px/1.4 "Manrope", system-ui, sans-serif; color: var(--ink);
  transition: border-color .2s var(--ease), background-color .2s var(--ease), box-shadow .2s var(--ease);
}
.paper textarea.ink { resize: none; min-height: 0; font-weight: 500; color: var(--ink-2); }
.paper .ink:hover { background: var(--card-2); }
.paper .ink:focus { background: var(--accent-soft); border-bottom-color: var(--accent); box-shadow: none; outline: none; }
.paper .ink::placeholder { color: var(--muted); font-weight: 500; opacity: .85; }
.ink-title { font-size: 1.3rem !important; font-weight: 800 !important; letter-spacing: -.03em; }
.ink-bold { font-weight: 750 !important; }
.ink-r { text-align: right; }
.paper input[type=number] { -moz-appearance: textfield; appearance: textfield; }
.paper input[type=number]::-webkit-outer-spin-button, .paper input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.paper input[type=date].ink { text-align: right; }

/* kepala */
.paper-head { display: grid; gap: 22px; grid-template-columns: 1fr; padding-bottom: 22px; border-bottom: 2px solid var(--ink); }
@media (min-width: 900px) { .paper-head { grid-template-columns: auto 1fr minmax(240px, 300px); gap: 28px; align-items: start; } }
.logo-wrap { position: relative; flex: none; width: 96px; height: 96px; }
.logo-slot {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  width: 100%; height: 100%; border: 1.5px dashed var(--line); border-radius: 18px; color: var(--muted); overflow: hidden;
  font-size: .68rem; font-weight: 700; text-align: center; line-height: 1.2; padding: 6px; cursor: pointer;
  transition: border-color .2s var(--ease), background-color .2s var(--ease), color .2s var(--ease);
}
.logo-slot:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.logo-slot .logo-ph { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.logo-slot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 4px; background: #fff; }
.logo-slot.has { border-style: solid; }
.logo-del { position: absolute; right: -8px; top: -8px; width: 26px; height: 26px; border-radius: 50%; border: 0; background: var(--night); color: #fff; font-size: 16px; line-height: 1; cursor: pointer; box-shadow: var(--shadow); z-index: 2; }
.logo-del:hover { background: var(--red); }

.shop-block { min-width: 0; }
.inv-block { min-width: 0; }
.inv-word { font-size: 2rem; font-weight: 800; letter-spacing: .08em; line-height: 1; color: var(--accent); margin-bottom: 12px; }
@media (min-width: 900px) { .inv-word { text-align: right; font-size: 2.3rem; } }
.meta-row { display: grid; grid-template-columns: 90px 1fr; align-items: center; gap: 8px; }
.meta-row > span { font-size: .78rem; font-weight: 700; color: var(--muted); }

/* bil kepada */
.billto { padding: 20px 0 8px; max-width: 460px; }

/* jadual item */
.items-head, .item { display: grid; grid-template-columns: minmax(0, 1fr) 84px 112px 112px 34px; gap: 8px; align-items: center; }
.items-head {
  margin-top: 18px; padding: 10px 10px; background: var(--night); color: #fff; border-radius: 14px;
  font-size: .72rem; font-weight: 750; letter-spacing: .06em; text-transform: uppercase;
}
.items-head .r { text-align: right; }
.items-head span:nth-child(2), .items-head span:nth-child(3) { padding-left: 8px; }
#items { display: block; }
.item { padding: 6px 10px; border-bottom: 1px solid var(--line-2); animation: rise .4s var(--ease-out) both; }
.item .cell { display: block; min-width: 0; margin: 0; }
.item .cap { display: none; }
.item .i-qty, .item .i-price { text-align: left; }
.item .i-total { text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; padding: 7px 4px; }
.item .i-del {
  width: 32px; height: 32px; border-radius: 50%; border: 0; background: transparent; color: var(--muted);
  font-size: 20px; line-height: 1; cursor: pointer; transition: background .2s var(--ease), color .2s var(--ease);
}
.item .i-del:hover { color: var(--red); background: var(--red-soft); }
.add-item { margin: 14px 0 6px 10px; border-style: dashed; color: var(--accent); }
@media (max-width: 699px) {
  .items-head { display: none; }
  .item {
    grid-template-columns: 1fr 1fr 1fr; gap: 6px 10px; padding: 14px 12px; margin-top: 10px; position: relative;
    background: var(--card-2); border: 1px solid var(--line-2); border-radius: 18px;
  }
  .item .c-desc { grid-column: 1 / -1; padding-right: 34px; }
  .item .cap { display: block; font-size: .66rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 0 8px; }
  .item .ink { background: var(--card); }
  .item .i-del { position: absolute; right: 8px; top: 8px; }
}

/* kaki: bayaran + jumlah */
.paper-foot { display: grid; gap: 24px; grid-template-columns: 1fr; margin-top: 22px; }
@media (min-width: 900px) { .paper-foot { grid-template-columns: 1fr minmax(300px, 380px); gap: 40px; } }
.foot-field { display: block; margin-bottom: 14px; }
.foot-right { align-self: start; }
.tot-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 8px; font-size: .9rem; font-weight: 600; color: var(--ink-2); border-bottom: 1px solid var(--line-2); min-height: 44px; }
.tot-row b { color: var(--ink); font-weight: 750; font-variant-numeric: tabular-nums; }
.tot-row .ink { width: 120px; }
.tax-rate { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-weight: 700; }
.tax-rate .ink { width: 70px; }
.check { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; color: var(--ink); font-weight: 700; }
.check input { position: absolute; opacity: 0; pointer-events: none; }
.check i {
  position: relative; flex: none; width: 22px; height: 22px; border-radius: 7px; border: 1.5px solid var(--line);
  background: var(--card); transition: background .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.check i::after { content: ""; position: absolute; left: 7px; top: 3px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg) scale(0); transition: transform .25s cubic-bezier(.34,1.56,.64,1); }
.check input:checked + i { background: var(--grad); border-color: transparent; }
.check input:checked + i::after { transform: rotate(45deg) scale(1); }
.check input:focus-visible + i { outline: 2px solid var(--accent); outline-offset: 2px; }
.check:active i { transform: scale(.92); }
.grand {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; padding: 16px 18px;
  background: var(--accent-soft); border-radius: 18px; color: var(--accent);
}
.grand span { font-size: .8rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.grand b { font-size: clamp(1.5rem, 4.5vw, 2rem); font-weight: 800; letter-spacing: -.04em; font-variant-numeric: tabular-nums; color: var(--accent); }
:root[data-theme="dark"] .grand { background: var(--accent-soft); }

.paper-wrap .alert, .paper-wrap .actions { }
.grand b { white-space: nowrap; }
@media (max-width: 480px) { .grand { padding: 14px; } .grand span { font-size: .68rem; letter-spacing: .05em; } .grand b { font-size: 1.45rem; } }

/* 3.2: telefon */
.paper input[type=date].ink { -webkit-appearance: none; appearance: none; display: block; width: 100%; text-align: right; min-height: 34px; }
.paper input[type=date].ink::-webkit-date-and-time-value { text-align: right; margin: 0; }
.paper input[type=date].ink::-webkit-calendar-picker-indicator { margin-left: 6px; opacity: .6; }
@media (max-width: 899px) {
  :where(input, select, textarea), .paper .ink, .paper :where(input.ink, textarea.ink) { font-size: 16px; }
  .ink-title { font-size: 1.2rem !important; }
  .paper-head { grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: start; }
  .logo-wrap { width: 84px; height: 84px; }
  .inv-block { grid-column: 1 / -1; padding-top: 4px; }
  .inv-word { font-size: 1.7rem; margin-bottom: 8px; }
  .meta-row { grid-template-columns: 90px minmax(0, 1fr); }
}

/* ================= 3.3: Tetapan, Invois, Jualan ================= */
.settings { max-width: 980px; }
.set-shop { display: grid; gap: 22px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .set-shop { grid-template-columns: 150px 1fr; gap: 32px; } }
.set-logo { display: flex; flex-direction: column; gap: 10px; }
.set-logo .logo-wrap { width: 120px; height: 120px; }
.layouts { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .layouts { grid-template-columns: repeat(3, 1fr); } }
.lay { display: block; cursor: pointer; }
.lay input { position: absolute; opacity: 0; pointer-events: none; }
.lay-box {
  display: flex; flex-direction: column; gap: 4px; padding: 14px; border: 1.5px solid var(--line); border-radius: 20px; background: var(--card);
  transition: border-color .2s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease-out);
}
.lay:hover .lay-box { transform: translateY(-2px); box-shadow: var(--shadow); }
.lay input:checked + .lay-box { border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent); }
.lay input:focus-visible + .lay-box { outline: 2px solid var(--accent); outline-offset: 2px; }
.lay-box b { font-size: .95rem; font-weight: 750; margin-top: 8px; }
.lay-box small { color: var(--muted); font-size: .78rem; line-height: 1.4; }
.thumb { position: relative; display: block; height: 130px; border-radius: 10px; background: #fff; border: 1px solid #e6e6ea; overflow: hidden; }
.thumb i { position: absolute; display: block; background: #d9dce2; border-radius: 2px; }
.thumb .t-head { left: 10px; top: 10px; width: 36%; height: 8px; background: #1f2937; }
.thumb .t-l1 { left: 10px; top: 24px; width: 44%; height: 4px; }
.thumb .t-l2 { left: 10px; top: 32px; width: 30%; height: 4px; }
.thumb .t-th { left: 10px; right: 10px; top: 52px; height: 10px; background: #1d4ed8; border-radius: 3px; }
.thumb .t-r { left: 10px; right: 10px; height: 4px; background: #eceef2; }
.thumb .t-r:nth-of-type(5) { top: 72px; } .thumb .t-r:nth-of-type(6) { top: 84px; } .thumb .t-r:nth-of-type(7) { top: 96px; }
.thumb .t-tot { right: 10px; bottom: 10px; width: 38%; height: 12px; background: #1d4ed8; border-radius: 3px; }
.thumb::after { content: ""; position: absolute; right: 10px; top: 10px; width: 24%; height: 10px; background: #1d4ed8; opacity: .85; border-radius: 2px; }
.thumb-modern .t-th { background: transparent; border-bottom: 1.5px solid #111827; border-radius: 0; height: 8px; }
.thumb-modern .t-tot { background: transparent; border-top: 1.5px solid #111827; border-radius: 0; height: 2px; }
.thumb-modern::after { background: var(--accent); height: 7px; opacity: .8; }
.thumb-compact { border-top: 4px solid #111; }
.thumb-compact .t-th { background: #e7e7e9; border: 1px solid #bbb; border-radius: 0; }
.thumb-compact .t-r { background: #fff; border: 1px solid #ccc; height: 8px; border-radius: 0; }
.thumb-compact .t-tot { background: #fff; border: 1.5px solid #111; border-radius: 0; }
.thumb-compact::after { background: #111; }
.account .acc-row { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line-2); font-size: .9rem; }

/* kepala kedai (baca sahaja) dalam pembuat invois */
.shop-static { padding: 4px 8px; }
.shop-static .s-name { font-size: 1.25rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.2; }
.shop-static .s-line { color: var(--ink-2); font-weight: 500; font-size: .9rem; white-space: pre-line; margin-top: 3px; }
.shop-static .s-edit { display: inline-flex; gap: 5px; align-items: center; margin-top: 8px; font-size: .75rem; font-weight: 700; color: var(--accent); }
.shop-static .s-edit:hover { text-decoration: underline; }
.shop-warn { padding: 10px 14px; border-radius: 14px; background: var(--accent-soft); color: var(--accent); font-size: .85rem; font-weight: 650; margin-bottom: 8px; }
.logo-wrap.static .logo-slot { cursor: default; border-style: solid; }
.logo-wrap.static .logo-slot:hover { border-color: var(--line); color: var(--muted); background: transparent; }
.inv-static { display: flex; justify-content: flex-end; font-weight: 750; padding: 7px 8px; }

/* senarai invois */
.list-card { padding: 6px 0; overflow: hidden; }
.inv-table { width: 100%; border-collapse: collapse; }
.inv-table th { text-align: left; font-size: .7rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); padding: 14px 18px 10px; }
.inv-table td { padding: 14px 18px; border-top: 1px solid var(--line-2); font-weight: 600; vertical-align: middle; }
.inv-table .r { text-align: right; }
.inv-table .no { font-weight: 800; }
.inv-table .amt { font-weight: 800; }
.inv-table tbody tr { transition: background .2s var(--ease); }
.inv-table tbody tr:hover { background: var(--card-2); }
.row-actions { display: inline-flex; gap: 6px; justify-content: flex-end; }
.row-actions form { margin: 0; }
.circle.sm { width: 36px; height: 36px; }
.circle.danger:hover { color: var(--red); border-color: var(--red); background: var(--red-soft); }
.empty { text-align: center; padding: 48px 16px; color: var(--muted); font-weight: 600; }
.empty .btn { margin-top: 14px; }
@media (max-width: 699px) {
  .inv-table thead { display: none; }
  .inv-table, .inv-table tbody, .inv-table tr, .inv-table td { display: block; width: 100%; }
  .inv-table tr { padding: 14px 16px; border-top: 1px solid var(--line-2); position: relative; }
  .inv-table tr:first-child { border-top: 0; }
  .inv-table td { padding: 2px 0; border: 0; }
  .inv-table .r { text-align: left; }
  .inv-table .amt { font-size: 1.1rem; margin-top: 4px; }
  .inv-table .row-actions { position: absolute; right: 12px; top: 12px; }
  .inv-table td.cust, .inv-table td.date { color: var(--muted); font-size: .85rem; }
}

/* jualan */
.bars { display: grid; gap: 10px; }
.bar-row { display: grid; grid-template-columns: 46px 1fr 110px; gap: 10px; align-items: center; font-size: .82rem; font-weight: 650; }
.bar-row .m { color: var(--muted); }
.bar-row .v { text-align: right; font-weight: 750; font-variant-numeric: tabular-nums; }
.bar-track { height: 12px; border-radius: 999px; background: var(--card-2); overflow: hidden; }
.bar-fill { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--grad); animation: grow 1s var(--ease-out) forwards; animation-delay: calc(.3s + var(--i, 0) * .04s); }
@keyframes grow { to { width: var(--w); } }
.top-list { display: grid; gap: 4px; }
.top-row { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line-2); font-weight: 650; }
.top-row b { font-variant-numeric: tabular-nums; }
.locked { text-align: center; padding: 44px 20px; }
.locked .chip { margin: 0 auto 14px; width: 52px; height: 52px; }
.locked p { color: var(--muted); max-width: 420px; margin: 6px auto 0; }
.two-col { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .two-col { grid-template-columns: 1.5fr 1fr; } }

/* dashboard: kad CTA dalam baris statistik */
.stat-cta { margin: 0; min-height: 168px; display: flex; flex-direction: column; justify-content: space-between; gap: 14px; padding: 20px; border-radius: var(--r-card); }
.stat-cta h2 { font-size: 1.05rem; line-height: 1.25; }
.stat-cta p { margin: 6px 0 0; color: var(--night-muted); font-size: .82rem; font-weight: 500; line-height: 1.45; }
.stat-cta .btn { align-self: flex-start; }

@media (min-width: 900px) { .paper-head.no-logo { grid-template-columns: 1fr minmax(240px, 300px); } }
@media (max-width: 899px) { .paper-head.no-logo { grid-template-columns: 1fr; } }
.dash-note { }
.account { max-width: 980px; }

/* ================= 4.0 ================= */
.page-narrow { max-width: 980px; margin-left: auto; margin-right: auto; }
.settings, .account { max-width: none; }
.title-row.page-narrow { margin-left: auto; margin-right: auto; }

/* avatar: logo (tengah, penuh) atau huruf pertama */
.avatar { overflow: hidden; padding: 0; text-decoration: none; }
.avatar img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
@media (max-width: 480px) {
  .avatar { display: grid; width: 38px; height: 38px; font-size: .82rem; }
  .top-end { gap: 6px; }
  .circle { width: 38px; height: 38px; }
  .lang a { padding: 6px 9px; }
}
@media (max-width: 380px) { .brand-txt { display: none; } }

/* pilihan portrait / landscape */
.layouts { grid-template-columns: 1fr; }
@media (min-width: 560px) { .layouts { grid-template-columns: repeat(2, 1fr); } }
.sheet-wrap { display: grid; place-items: center; height: 150px; background: var(--card-2); border-radius: 12px; }
.sheet { position: relative; display: block; background: #fff; border: 1px solid #dcdfe5; border-radius: 4px; box-shadow: 0 2px 8px rgba(20,20,24,.12); }
.sheet-portrait { width: 84px; height: 118px; }
.sheet-landscape { width: 150px; height: 106px; }
.sheet i { position: absolute; display: block; background: #d9dce2; border-radius: 2px; }
.sheet .s-head { left: 8px; top: 8px; width: 34%; height: 6px; background: #1f2937; }
.sheet .s-l1 { left: 8px; top: 19px; width: 42%; height: 3px; }
.sheet .s-l2 { left: 8px; top: 26px; width: 30%; height: 3px; }
.sheet .s-th { left: 8px; right: 8px; top: 42px; height: 8px; background: #1d4ed8; border-radius: 2px; }
.sheet .s-r1 { left: 8px; right: 8px; top: 58px; height: 3px; background: #e5e7eb; }
.sheet .s-r2 { left: 8px; right: 8px; top: 68px; height: 3px; background: #e5e7eb; }
.sheet .s-tot { right: 8px; bottom: 8px; width: 38%; height: 9px; background: #1d4ed8; border-radius: 2px; }
.sheet::after { content: ""; position: absolute; right: 8px; top: 8px; width: 22%; height: 7px; background: #1d4ed8; border-radius: 2px; }
.sheet-landscape .s-th { top: 40px; } .sheet-landscape .s-r1 { top: 54px; } .sheet-landscape .s-r2 { top: 62px; }

/* kemas & kecil: pembuat invois */
@media (min-width: 900px) {
  .paper-wrap, .narrow-page { width: min(60vw, 840px); }
  .page-invoice h1 { font-size: 1.6rem; }
  .page-invoice .title-row { margin: 10px auto 16px; }
  .paper { padding: 26px 32px 24px; border-radius: 22px; }
  .paper .ink, .paper :where(input.ink, textarea.ink) { font-size: 13px; padding: 5px 8px; }
  .ink-title { font-size: 1.1rem !important; }
  .inv-word { font-size: 1.7rem !important; margin-bottom: 8px; }
  .logo-wrap { width: 76px; height: 76px; }
  .paper-head { padding-bottom: 16px; gap: 22px; }
  .shop-static .s-name { font-size: 1.1rem; }
  .shop-static .s-line { font-size: .82rem; }
  .billto { padding: 14px 0 2px; }
  .items-head { margin-top: 12px; padding: 7px 8px; font-size: .66rem; }
  .item { padding: 3px 8px; }
  .add-item { margin: 8px 0 2px 8px; }
  .paper-foot { margin-top: 14px; gap: 28px; }
  .tot-row { min-height: 36px; padding: 5px 8px; font-size: .84rem; }
  .grand { padding: 11px 14px; margin-top: 10px; }
  .grand b { font-size: 1.45rem; }
  .paper-label { margin-bottom: 3px; }
}
.actions .btn { height: 46px; font-size: .88rem; }
@media (min-width: 620px) { .actions.three { flex-direction: row; } .actions.three .btn { flex: 1; } }

/* paparan invois (baca sahaja) */
.view-item .vtxt { padding: 6px 8px; font-weight: 600; }
.view-item .i-total { padding: 6px 4px; }
.paper.view .shop-static { padding: 0; }

/* senarai & borang umum */
.list-tools { padding: 14px 18px 4px; }
.list-tools input { max-width: 340px; }
.btn-danger { color: var(--red); border-color: color-mix(in srgb, var(--red) 40%, transparent); }
.btn-danger:hover { background: var(--red-soft); border-color: var(--red); }

/* admin */
.admin-boxes { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .admin-boxes { grid-template-columns: repeat(2, 1fr); } }
.admin-box { display: block; padding: 24px; transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out); }
.admin-box:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.admin-box h2 { font-size: 1.25rem; margin: 14px 0 6px; }
.admin-box p { color: var(--muted); margin: 0 0 14px; font-weight: 500; }
.admin-stats { display: flex; gap: 16px; flex-wrap: wrap; font-size: .85rem; color: var(--ink-2); font-weight: 600; }
.admin-stats b { color: var(--accent); font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.admin-extend { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.admin-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: 12px; }
.inline-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.inline-form input { min-width: 220px; }
.reveal:not(.stats) > .card { margin-bottom: 16px; }

/* ================= 5.0 ================= */
/* kad statistik: semua sama saiz */
.stats > * { margin: 0 !important; min-height: 168px; height: 100%; }
.stats .stat, .stats .stat-cta { display: flex; flex-direction: column; }

/* pemilih tarikh */
.dp-btn {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 8px; cursor: pointer; text-align: left;
  font: 600 14.5px/1.4 "Manrope", system-ui, sans-serif; color: var(--ink);
}
.dp-btn.empty { color: var(--muted); font-weight: 500; }
.dp-btn .dp-ic { flex: none; color: var(--muted); opacity: .8; }
.dp-btn.ink-r { justify-content: flex-end; text-align: right; }
.filters .dp-btn {
  min-height: 40px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); min-width: 150px; font-size: 13.5px;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.filters .dp-btn:hover { border-color: var(--muted); }
.field .dp-btn { width: 100%; min-height: 46px; padding: 11px 18px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); }
.dp-pop {
  position: fixed; z-index: 120; width: 300px; padding: 14px; background: var(--card); color: var(--ink);
  border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow-lg);
  animation: dp-in .28s var(--ease-out) both; transform-origin: top right;
}
@keyframes dp-in { from { opacity: 0; transform: translateY(-6px) scale(.96); } }
.dp-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 10px; }
.dp-nav { display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 50%; background: var(--card-2); color: var(--ink-2); cursor: pointer; transition: background .2s var(--ease), transform .2s var(--ease); }
.dp-nav:hover { background: var(--accent-soft); color: var(--accent); }
.dp-nav:active { transform: scale(.92); }
.dp-title { border: 0; background: transparent; font: 800 .95rem "Manrope", sans-serif; letter-spacing: -.01em; color: var(--ink); padding: 6px 12px; border-radius: 999px; cursor: pointer; }
.dp-title:hover { background: var(--card-2); }
.dp-week, .dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.dp-week span { text-align: center; font-size: .68rem; font-weight: 800; color: var(--muted); padding: 4px 0 6px; letter-spacing: .04em; }
.dp-day { height: 36px; border: 0; border-radius: 50%; background: transparent; color: var(--ink); font: 650 .84rem "Manrope", sans-serif; cursor: pointer; transition: background .15s var(--ease), color .15s var(--ease), transform .15s var(--ease); font-variant-numeric: tabular-nums; }
.dp-day:hover { background: var(--accent-soft); color: var(--accent); }
.dp-day.out { color: var(--muted); opacity: .55; }
.dp-day.today { box-shadow: inset 0 0 0 1.5px var(--accent); color: var(--accent); font-weight: 800; }
.dp-day.sel { background: var(--grad); color: #fff; box-shadow: 0 6px 14px -6px rgb(var(--accent-rgb) / .8); opacity: 1; }
.dp-day:active { transform: scale(.9); }
.dp-months { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.dp-mon { height: 44px; border: 0; border-radius: 14px; background: var(--card-2); color: var(--ink); font: 700 .85rem "Manrope", sans-serif; cursor: pointer; transition: background .15s var(--ease); }
.dp-mon:hover { background: var(--accent-soft); color: var(--accent); }
.dp-mon.sel { background: var(--grad); color: #fff; }
.dp-foot { display: flex; justify-content: space-between; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line-2); }
.dp-link { border: 0; background: transparent; color: var(--accent); font: 750 .8rem "Manrope", sans-serif; padding: 6px 10px; border-radius: 999px; cursor: pointer; }
.dp-link:hover { background: var(--accent-soft); }
.dp-link.muted { color: var(--muted); }
.dp-back { position: fixed; inset: 0; z-index: 119; background: rgba(0,0,0,.35); animation: rise .25s var(--ease-out) both; }
.dp-pop.sheet { left: 0 !important; right: 0; top: auto !important; bottom: 0; width: auto; border-radius: 26px 26px 0 0; padding: 18px 18px calc(18px + env(safe-area-inset-bottom)); animation: sheet-in .35s var(--ease-out) both; }
@keyframes sheet-in { from { transform: translateY(40px); opacity: 0; } }
.dp-pop.sheet .dp-day { height: 42px; }

/* penapis senarai invois */
.filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-bottom: 12px; }
.filters .f-search { position: relative; display: flex; align-items: center; flex: 1 1 240px; min-width: 200px; color: var(--muted); }
.filters .f-search .icon { position: absolute; left: 14px; pointer-events: none; }
.filters .f-search input { min-height: 40px; padding: 8px 16px 8px 38px; font-size: 13.5px; }
.f-dates { display: inline-flex; align-items: center; gap: 6px; }
.f-presets { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.chipbtn { display: inline-flex; align-items: center; height: 32px; padding: 0 13px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); font-size: .76rem; font-weight: 700; color: var(--ink-2); transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease); }
.chipbtn:hover { border-color: var(--muted); }
.chipbtn.on { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.found { margin: -2px 4px 10px; }
@media (max-width: 699px) { .filters .f-search { flex-basis: 100%; } .f-dates { flex: 1 1 100%; } .f-dates > * { flex: 1; } .filters .dp-btn { min-width: 0; width: 100%; } }

/* senarai lebih nipis */
.inv-table td { padding: 7px 16px; font-size: .86rem; }
.inv-table th { padding: 11px 16px 7px; }
.inv-table .no { font-size: .86rem; }
.inv-table .amt { font-size: .88rem; }
.circle.sm { width: 30px; height: 30px; }
.circle.sm .icon { width: 14px; height: 14px; }
.row-actions { gap: 4px; }
.inv-table td .small { font-size: .72rem; line-height: 1.25; }
@media (max-width: 699px) {
  .inv-table tr { padding: 9px 12px; }
  .inv-table .amt { font-size: .95rem; margin-top: 0; }
  .inv-table .row-actions { top: 8px; right: 8px; }
}

/* paparan invois ikut orientasi */
.view-portrait.paper-wrap, .view-portrait.narrow-page { width: min(100%, 700px); }
.view-landscape.paper-wrap, .view-landscape.narrow-page { width: min(100%, 1040px); }
@media (min-width: 900px) {
  .view-portrait.paper-wrap, .view-portrait.narrow-page { width: min(60vw, 700px); }
  .view-landscape.paper-wrap, .view-landscape.narrow-page { width: min(72vw, 1040px); }
}
.view-portrait .paper.view { aspect-ratio: 210 / 297; }
.view-landscape .paper.view { aspect-ratio: 297 / 210; }
.paper.view { display: flex; flex-direction: column; }
.paper.view .paper-foot { margin-top: auto; padding-top: 18px; }

/* =====================================================================
   OGInvoice 6.0 - dashboard kotak panjang, chat, inbox, item, cart, plan
   ===================================================================== */

/* ---------- Titik merah belum dibaca ---------- */
.dot { position: absolute; top: -2px; right: -2px; width: 11px; height: 11px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 3px var(--card); animation: dot-pulse 2s ease-in-out infinite; }
.dot.inline { position: static; display: inline-block; width: 9px; height: 9px; margin-right: 8px; vertical-align: middle; box-shadow: none; }
@keyframes dot-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }
.lb-icon { position: relative; }

/* ---------- Dashboard: kotak panjang ---------- */
.long-boxes { display: grid; gap: 14px; }
.long-boxes > .card { margin: 0; }
.long-box { display: flex; align-items: center; gap: 16px; padding: 20px 22px; color: var(--ink); transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out); }
.long-box:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.long-box .lb-icon { width: 46px; height: 46px; flex: none; }
.long-box .lb-txt { flex: 1; min-width: 0; display: block; }
.long-box h2 { font-size: 1.08rem; margin: 0 0 3px; }
.long-box .lb-txt .muted { display: block; font-size: .86rem; font-weight: 550; }
.long-box .lb-end { display: inline-flex; align-items: center; gap: 10px; color: var(--muted); flex: none; }
.long-box.is-locked { opacity: .82; }
.long-box.is-locked .lb-icon { filter: grayscale(.4); }
@media (max-width: 560px) { .long-box { padding: 16px; gap: 12px; } .long-box .lb-end .pill { display: none; } }
.long-boxes .night .cta-row { gap: 16px; }
.long-boxes .night h2 { margin-bottom: 4px; }

/* ---------- Kunci Pro ---------- */
.lock-card { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 36px 20px; }
.lock-card .chip { width: 52px; height: 52px; }
.lock-card .muted { max-width: 380px; margin: 0 0 6px; }

/* ---------- Chat ---------- */
.chat-card { padding: 0; overflow: hidden; }
.chat { display: flex; flex-direction: column; height: min(70vh, 620px); min-height: 360px; }
.chat-log { flex: 1; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 10px; scroll-behavior: smooth; }
.chat-empty { margin: auto; text-align: center; max-width: 260px; }
.msg { display: flex; flex-direction: column; max-width: 82%; gap: 3px; }
.msg.me { align-self: flex-end; align-items: flex-end; }
.msg.them { align-self: flex-start; align-items: flex-start; }
.bubble { padding: 10px 15px; border-radius: 20px; font-weight: 550; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; font-size: .93rem; }
.msg.me .bubble { background: var(--grad); color: #fff; border-bottom-right-radius: 6px; }
.msg.them .bubble { background: var(--card-2); color: var(--ink); border-bottom-left-radius: 6px; }
.msg small { color: var(--muted); font-size: .68rem; font-weight: 650; padding: 0 6px; }
.chat-form { display: flex; gap: 10px; align-items: flex-end; padding: 12px; border-top: 1px solid var(--line-2); background: var(--card); }
.chat-form textarea { flex: 1; resize: none; max-height: 140px; min-height: 46px; border-radius: 24px; padding: 12px 18px; font: 600 14.5px/1.4 "Manrope", system-ui, sans-serif; color: var(--ink); background: var(--card-2); border: 1px solid var(--line); }
.chat-form textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.chat-form .btn { height: 46px; flex: none; }
@media (max-width: 480px) { .chat-form .btn { padding: 0 16px; font-size: 0; gap: 0; } .chat-form .btn .icon { margin: 0; } }
.thread-list { display: flex; flex-direction: column; }
.thread { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.6fr) auto; gap: 14px; align-items: center; padding: 15px 20px; border-top: 1px solid var(--line-2); color: var(--ink); transition: background .2s var(--ease); }
.thread:first-child { border-top: 0; }
.thread:hover { background: var(--card-2); }
.thread-who { display: flex; flex-direction: column; min-width: 0; }
.thread-who b, .thread-last { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thread.is-new .thread-last { color: var(--ink); font-weight: 750; }
.thread-meta { text-align: right; white-space: nowrap; }
@media (max-width: 640px) { .thread { grid-template-columns: 1fr auto; } .thread-last { grid-column: 1 / -1; grid-row: 2; } }

/* ---------- Inbox ---------- */
.inbox-list .card { margin-bottom: 12px; }
.inbox-item.is-new { border-color: color-mix(in srgb, var(--accent) 35%, transparent); background: linear-gradient(0deg, var(--card), var(--card)) padding-box; box-shadow: var(--shadow), 0 0 0 3px var(--accent-soft); }
.inbox-item .card-head { margin-bottom: 8px; align-items: flex-start; }
.inbox-item h2 { font-size: 1rem; }
.inbox-body { margin: 0; color: var(--ink-2); font-weight: 550; line-height: 1.6; overflow-wrap: anywhere; }
.card.empty { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.card.empty p { margin: 0; }

/* ---------- Item ---------- */
.item-rows { padding: 4px 0 6px; }
.item-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 12px 20px; border-top: 1px solid var(--line-2); }
.item-row:first-child { border-top: 0; }
.item-row .ir-price { font-variant-numeric: tabular-nums; font-weight: 800; }
.item-row.editing { grid-template-columns: 1fr 1.4fr 110px auto; }
.item-row.editing input { min-width: 0; }
@media (max-width: 700px) { .item-row.editing { grid-template-columns: 1fr 1fr; } .item-row.editing .row-actions { grid-column: 1 / -1; justify-content: flex-start; } }
.card form > .btn { margin-top: 4px; }

/* ---------- Shopping Cart: ikon navbar + popup ---------- */
.cart-btn { position: relative; }
.cart-btn .badge { position: absolute; top: -5px; right: -5px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px; background: var(--red); color: #fff; font-size: .68rem; font-weight: 800; display: grid; place-items: center; box-shadow: 0 0 0 2px var(--frame); }
.cart-pop[hidden] { display: none; }
.cart-pop { position: fixed; inset: 0; z-index: 90; display: flex; justify-content: flex-end; align-items: flex-start; padding: 70px 16px 16px; }
.cart-backdrop { position: absolute; inset: 0; background: rgba(10, 10, 14, .45); backdrop-filter: blur(3px); animation: fade-in .25s var(--ease) both; }
.cart-sheet { position: relative; width: min(440px, 100%); max-height: calc(100vh - 100px); overflow: auto; background: var(--card); border: 1px solid var(--line); border-radius: 26px; padding: 20px; box-shadow: var(--shadow-lg); animation: rise .4s var(--ease-out) both; }
.cart-sheet .card-head h2 { display: flex; align-items: center; gap: 8px; font-size: 1.1rem; }
@keyframes fade-in { from { opacity: 0; } }
@media (max-width: 640px) { .cart-pop { align-items: flex-end; padding: 0; } .cart-sheet { width: 100%; max-height: 82vh; border-radius: 26px 26px 0 0; padding-bottom: calc(20px + env(safe-area-inset-bottom)); } }
body.cart-open { overflow: hidden; }
.cart-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.cart-list li { display: grid; grid-template-columns: minmax(0, 1fr) 78px auto auto; gap: 10px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line-2); }
.cart-list li:first-child { border-top: 0; }
.cl-name { display: flex; flex-direction: column; min-width: 0; }
.cl-name b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-qty input { width: 100%; height: 38px; padding: 0 10px; text-align: center; border-radius: 999px; }
.cl-sub { font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.cart-list form { margin: 0; }
@media (max-width: 420px) { .cart-list li { grid-template-columns: minmax(0, 1fr) 64px auto; } .cart-list li > form:last-child { grid-column: 3; grid-row: 1; } .cl-sub { grid-column: 1 / -1; text-align: left; } }
.cart-total { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 0 4px; border-top: 2px solid var(--ink); margin-top: 6px; font-weight: 750; }
.cart-total b { font-size: 1.4rem; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.cart-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 12px; }
.cart-actions form { margin: 0; }
.cart-empty { text-align: center; padding: 22px 0; font-weight: 600; }
.cart-more { margin-top: 12px; }

/* ---------- My Plan ---------- */
.plan-usage { min-width: 200px; }
.plan-usage b { font-size: 1.6rem; letter-spacing: -.03em; }
.plan-usage .bar-track { display: block; margin-top: 8px; background: var(--night-3); }
.plan-table th.c, .plan-table td.c { text-align: center; }
.plan-table th.me { color: var(--accent); }
.plan-table .tick { color: var(--green); display: inline-grid; }
.plan-table .cross { color: var(--muted); opacity: .6; display: inline-grid; }
.price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.price-box { display: flex; flex-direction: column; gap: 3px; padding: 16px; border: 1px solid var(--line); border-radius: 20px; background: var(--card-2); }
.price-box b { font-size: 1.35rem; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.price-box.best { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
@media (max-width: 520px) { .price-grid { grid-template-columns: 1fr; } }

/* ---------- Paid ---------- */
.pill.paid { background: color-mix(in srgb, var(--green) 16%, transparent); color: var(--green); }
.pill.unpaid { background: var(--red-soft); color: var(--red); }
.paid-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.inline-form-btn { margin: 0; display: inline-flex; }
.btn-paid { border-color: color-mix(in srgb, var(--green) 45%, transparent); color: var(--green); }
.btn-paid:hover { background: color-mix(in srgb, var(--green) 12%, transparent); }
.paid-stamp { justify-self: end; margin-top: 8px; padding: 4px 16px; border: 2.5px solid var(--green); color: var(--green); border-radius: 10px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; transform: rotate(-6deg); text-align: center; }
.inv-table .no .pill { margin-left: 6px; height: 22px; font-size: .66rem; vertical-align: middle; }

/* ---------- Admin: notifikasi ---------- */
.radio-row { display: flex; gap: 22px; flex-wrap: wrap; }
.pick-users { margin-bottom: 16px; }
.pick-users input[type=search] { margin-bottom: 10px; }
.pick-list { max-height: 280px; overflow: auto; border: 1px solid var(--line); border-radius: 18px; padding: 6px 14px; display: flex; flex-direction: column; }
.pick-row { padding: 9px 0; border-top: 1px solid var(--line-2); font-weight: 600; }
.pick-row:first-child { border-top: 0; }
.pick-row[hidden] { display: none; }
.sent-list { display: flex; flex-direction: column; }
.sent-row { display: flex; justify-content: space-between; gap: 14px; padding: 14px 20px; border-top: 1px solid var(--line-2); }
.sent-row:first-child { border-top: 0; }
.sent-body { color: var(--ink-2); font-weight: 550; margin-top: 6px; font-size: .88rem; }
.sent-row form { margin: 0; }

/* ---------- Toast kecil ---------- */
.v6-toast { position: fixed; z-index: 120; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom)); transform: translate(-50%, 20px); opacity: 0; pointer-events: none; max-width: min(92vw, 460px); padding: 12px 20px; border-radius: 999px; background: var(--night); color: #fff; font-size: .86rem; font-weight: 650; text-align: center; box-shadow: var(--shadow-lg); transition: opacity .3s var(--ease), transform .4s var(--ease-out); }
.v6-toast.on { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) { .dot { animation: none; } .cart-sheet, .cart-backdrop { animation: none; } }
/* butang putih sentiasa ada teks gelap (juga dalam mod gelap) */
.btn-white, .btn-white:hover { color: #141416; }
/* chat di telefon/tablet: biar kotak taip berada di atas dok bawah */
@media (max-width: 1179px) { .chat { height: calc(100dvh - 330px); min-height: 320px; max-height: 620px; } }

/* =====================================================================
   OGInvoice 7.0
   ===================================================================== */

/* ---------- Dashboard: baris kotak sama panjang ---------- */
.dash-row { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; }
.dash-row > .card { margin: 0; }
@media (max-width: 899px) { .dash-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 559px) { .dash-row { grid-template-columns: 1fr; } }

.tile { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; min-height: 168px; padding: 20px; color: var(--ink); transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out); }
a.tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.tile .lb-icon { width: 44px; height: 44px; flex: none; }
.tile-txt { display: block; flex: 1; min-width: 0; width: 100%; }
.tile-txt h2 { font-size: 1.05rem; margin: 0 0 4px; line-height: 1.25; }
.tile-txt .muted { display: block; font-size: .84rem; font-weight: 550; line-height: 1.45; }
.tile-end { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; color: var(--muted); }
.tile.is-locked { opacity: .82; }
.tile.is-locked .lb-icon { filter: grayscale(.4); }
.tile-cta { color: var(--night-ink); justify-content: space-between; }
.tile-cta .tile-txt .muted { color: var(--night-muted); }
.tile-cta .tile-end { justify-content: flex-start; }
.btn-white { color: #141416; }
@media (max-width: 559px) {
  .tile { min-height: 0; flex-direction: row; align-items: center; padding: 16px; gap: 12px; }
  .tile-txt { flex: 1; width: auto; }
  .tile-end { width: auto; flex: none; }
  .tile-end .pill { display: none; }
  .tile-cta { flex-direction: column; align-items: flex-start; }
  .tile-cta .tile-txt { width: 100%; }
}

/* ---------- Item: grid kategori / item (5 sebaris) ---------- */
.tile-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 4px; }
@media (min-width: 640px) { .tile-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 980px) { .tile-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.page-narrow:has(.tile-grid) { max-width: none; }
.cat-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-height: 150px; padding: 18px; margin: 0; color: var(--ink); transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out); }
a.cat-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.cat-tile h2 { font-size: 1rem; line-height: 1.3; margin: 0; word-break: break-word; }
.cat-tile .tile-end { margin-top: auto; }
.item-tile .amt { font-size: 1.15rem; font-weight: 800; letter-spacing: -.02em; }
.item-tile .row-actions { margin-top: auto; display: flex; gap: 8px; align-items: center; }
.item-tile .row-actions form { margin: 0; }
.inline-card { margin-bottom: 16px; }
.inline-card[hidden] { display: none; }
.form-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 14px; }
.danger-zone { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding-top: 18px; border-top: 1px dashed var(--line); }
.danger-zone form { margin: 0; }

/* ---------- Invoice maker: Paid ---------- */
.paid-box { margin-top: 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--card-2); text-align: left; }
.paid-box .check { font-size: .9rem; }
.paid-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.paid-fields[hidden] { display: none; }
.paid-fields label { display: block; }
.paid-fields label > span { display: block; font-size: .72rem; font-weight: 700; color: var(--ink-2); margin-bottom: 5px; }
.paid-fields select, .paid-fields input { width: 100%; }
.pm-link { display: block; margin-top: 8px; }
.pm-link a { color: var(--accent); text-decoration: underline; }
@media (max-width: 520px) { .paid-fields { grid-template-columns: 1fr; } }
.paid-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-top: 14px; }
.paid-form label > span { display: block; font-size: .72rem; font-weight: 700; color: var(--ink-2); margin-bottom: 5px; }

/* ---------- Settings: cara bayaran ---------- */
.pm-list { display: grid; gap: 8px; margin: 12px 0 16px; }
.pm-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--card-2); font-weight: 650; }
.pm-row form { margin: 0; }

/* ---------- Sales Today ---------- */
.stat-btn { appearance: none; -webkit-appearance: none; width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.pop-wide { width: min(560px, 100%); }
.day-pick { margin-bottom: 14px; }
.sp-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.sp-kpi { padding: 12px 14px; border-radius: var(--r-sm); background: var(--card-2); }
.sp-kpi span { display: block; font-size: .74rem; font-weight: 700; color: var(--ink-2); }
.sp-kpi b { display: block; font-size: 1.35rem; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.sp-h { font-size: .8rem; font-weight: 800; color: var(--ink-2); margin: 14px 0 8px; text-transform: uppercase; letter-spacing: .04em; }
.sp-row { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line-2); font-size: .9rem; }
.sp-row:last-child { border-bottom: 0; }
.sp-row .muted { font-weight: 550; }
.sp-row b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.sp-note { margin-top: 12px; font-size: .8rem; }

/* ---------- Cash Drawer ---------- */
.store-bar { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; flex-wrap: wrap; }
.store-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.open-card { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 26px; max-width: 520px; margin-left: auto; margin-right: auto; }
.open-card h2 { margin: 6px 0 0; font-size: 1.3rem; }
.open-card p { margin: 0 0 6px; }
.open-card .field { width: 100%; }
.close-form { margin-top: 20px; }
.kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 6px 0 4px; }
.kpi { padding: 12px 14px; border-radius: var(--r-sm); background: var(--card-2); }
.kpi b { display: block; font-size: 1.25rem; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
@media (max-width: 520px) { .kpis { grid-template-columns: 1fr; } }
.sec-h { font-size: .8rem; font-weight: 800; color: var(--ink-2); margin: 20px 0 8px; text-transform: uppercase; letter-spacing: .04em; }
.chan-list, .drawer-box { border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; }
.chan-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 11px 14px; border-bottom: 1px solid var(--line-2); font-variant-numeric: tabular-nums; }
.chan-row:last-child { border-bottom: 0; }
.chan-total, .drawer-expected { background: var(--card-2); font-weight: 800; }
.drawer-expected { background: var(--accent-soft); color: var(--accent); }
.diff-ok b, .diff-ok { color: var(--green); }
.diff-over b, .diff-over { color: var(--accent); }
.diff-short b, .diff-short { color: var(--red); }

/* 7.0 kemasan */
.paid-fields input, .paid-fields select, .paid-fields .dp-btn { text-align: left; text-align-last: left; justify-content: flex-start; }
.page-cart .card-head h2, .page-sales .card-head h2 { display: flex; align-items: center; gap: 8px; }
.page-cart .inv-table th, .page-cart .inv-table td { padding-left: 16px; padding-right: 16px; }

/* =====================================================================
   OGInvoice 7.1
   ===================================================================== */

/* Invoice maker: kotak Paid yang jelas */
.paid-fields { display: grid; grid-template-columns: 1fr; gap: 12px; }
.pf { display: block; }
.pf > span { display: block; font-size: .74rem; font-weight: 750; color: var(--ink-2); margin-bottom: 6px; }
.pf .req { color: var(--red); font-style: normal; }
.pf-input { width: 100%; min-height: 44px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--ink); font: inherit; font-weight: 650; text-align: left; }
.pf-input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
.pf-select { appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 38px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2385858d' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; }
.pf-select.is-bad { border-color: var(--red); background-color: var(--red-soft); }
.paid-fields .dp-btn { width: 100%; min-height: 44px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); justify-content: flex-start; text-align: left; padding: 10px 14px; }
.paid-fields .pm-link { grid-column: 1 / -1; margin-top: 0; }

/* Shopping Cart */
.page-wide { max-width: none; }
.store-pill { display: flex; align-items: center; gap: 14px; margin: 0; padding: 12px 16px; }
@media (min-width: 900px) { .title-row:has(.store-pill) .store-pill { min-width: 480px; } }
.cart-layout { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: start; }
@media (min-width: 1100px) { .cart-layout { grid-template-columns: minmax(0, 1fr) 360px; } .cart-side { position: sticky; top: 92px; } }
.cart-side { margin: 0; }
.picker-tools { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.cart-cat { margin: 0; padding: 0; overflow: hidden; transition: box-shadow .2s, transform .2s; }
.cart-cat.dragging { opacity: .75; box-shadow: var(--shadow-lg); transform: scale(1.02); z-index: 5; }
.cart-cat header { display: flex; align-items: center; gap: 8px; padding: 14px 16px 10px; border-bottom: 1px solid var(--line-2); background: var(--card-2); }
.cart-cat header h2 { font-size: .98rem; margin: 0; line-height: 1.3; flex: 1; min-width: 0; word-break: break-word; }
.cat-grip { display: grid; place-items: center; width: 26px; height: 30px; border-radius: 8px; color: var(--muted); cursor: grab; touch-action: none; flex: none; }
.cat-grip:hover { background: var(--line); color: var(--ink); }
.cat-grip:active { cursor: grabbing; }
.cat-grip .icon { fill: currentColor; stroke: none; }
.cart-items { display: grid; gap: 6px; padding: 10px; }
.cart-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--ink); font: inherit; text-align: left; cursor: pointer; transition: background .15s, border-color .15s, transform .15s; }
.cart-item:hover { border-color: var(--accent); background: var(--accent-soft); }
.cart-item:active { transform: scale(.98); }
.cart-item.is-added { background: var(--accent-soft); border-color: var(--accent); }
.ci-name { flex: 1; min-width: 0; font-weight: 650; font-size: .9rem; line-height: 1.3; }
.cart-item b { font-size: .85rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ci-plus { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); flex: none; }
.v6-toast.bad { background: var(--red); }

/* Customer summary + Top customers */
.cv-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 16px; }
@media (max-width: 720px) { .cv-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.top-link { color: var(--ink); text-decoration: none; border-bottom: 1px dashed var(--muted); }
.top-link:hover { color: var(--accent); border-bottom-color: var(--accent); }
.inv-table .no a { color: var(--ink); text-decoration: none; font-weight: 700; }
.inv-table .no a:hover { color: var(--accent); }

/* =====================================================================
   OGInvoice 8.0
   ===================================================================== */
@font-face { font-family: 'Signature'; src: url('fonts/dancing-script-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
.sig { font-family: 'Signature', 'Segoe Script', 'Brush Script MT', cursive; font-weight: 600; letter-spacing: .01em; }

/* Butang kembali yang jelas */
.back-link { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px 0 12px; margin-bottom: 8px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--ink); font-size: .84rem; font-weight: 700; text-decoration: none; box-shadow: var(--shadow); transition: transform .2s var(--ease-out), border-color .2s, color .2s; }
.back-link:hover { border-color: var(--accent); color: var(--accent); transform: translateX(-2px); }

/* Shopping Cart: kotak kategori (nama sahaja) */
.cat-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.cart-cat { position: relative; padding: 0; overflow: visible; will-change: transform; }
.cart-cat .cat-open { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; width: 100%; min-height: 128px; padding: 16px; border: 0; background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer; border-radius: var(--r-card); transition: background .2s; }
.cart-cat .cat-open:hover { background: var(--accent-soft); }
.cart-cat .cat-open h2 { font-size: 1rem; line-height: 1.3; margin: 0; word-break: break-word; }
.cart-cat .cat-open .pill { margin-top: auto; }
.cart-cat .cat-grip { position: absolute; top: 10px; right: 10px; z-index: 2; }
.cart-cat.dragging { z-index: 30; opacity: 1; background: var(--card); box-shadow: 0 24px 50px -14px rgba(20,20,24,.35); cursor: grabbing; transition: none; pointer-events: none; }
body:has(.cart-cat.dragging) { cursor: grabbing; user-select: none; -webkit-user-select: none; }
.cart-cat.dragging .cat-open { background: var(--card); }

/* Popup item ikut kategori */
.cat-pop[hidden] { display: none; }
.cat-pop { position: fixed; inset: 0; z-index: 95; display: flex; align-items: center; justify-content: center; padding: 16px; }
.cat-pop-bg { position: absolute; inset: 0; background: rgba(12,12,14,.5); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); animation: fade-in .2s ease both; }
.cat-pop-sheet { position: relative; width: min(520px, 100%); max-height: min(78vh, 720px); overflow: auto; background: var(--card); border: 1px solid var(--line); border-radius: 26px; padding: 20px; box-shadow: var(--shadow-lg); animation: pop-up .32s var(--ease-out) both; }
.cat-pop-sheet .card-head h2 { display: flex; align-items: center; gap: 8px; font-size: 1.1rem; }
.pop-search { width: 100%; margin: 4px 0 10px; }
.cat-pop .cart-items { padding: 0; }
.cart-item[hidden] { display: none; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop-up { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
@media (max-width: 640px) { .cat-pop { align-items: flex-end; padding: 0; } .cat-pop-sheet { width: 100%; max-height: 82vh; border-radius: 26px 26px 0 0; padding-bottom: calc(20px + env(safe-area-inset-bottom)); } }
@media (prefers-reduced-motion: reduce) { .cat-pop-bg, .cat-pop-sheet { animation: none; } }

/* Bulk Add Item */
.bulk-h { margin: 0 0 6px; font-size: 1.05rem; }
#bulkText { width: 100%; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .88rem; line-height: 1.6; resize: vertical; }
.bulk-preview { margin: 0 0 14px; }
.bp-head { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; font-size: .88rem; }
.bp-skip { color: var(--red); font-weight: 650; }
.bp-rows { max-height: 240px; overflow: auto; border: 1px solid var(--line); border-radius: var(--r-sm); }
.bp-row { display: flex; justify-content: space-between; gap: 12px; padding: 8px 12px; border-bottom: 1px solid var(--line-2); font-size: .88rem; }
.bp-row:last-child { border-bottom: 0; }
.bp-row b { font-variant-numeric: tabular-nums; }
.bp-row.bad { background: var(--red-soft); color: var(--red); }

/* Settings */
.set-profile { display: grid; grid-template-columns: 1fr; gap: 0 18px; align-items: end; }
@media (min-width: 760px) { .set-profile { grid-template-columns: 1fr 1fr auto; } }
.set-email { padding: 11px 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--card-2); color: var(--ink-2); font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.set-logout { margin-bottom: 16px; }
.set-pair { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: stretch; margin-bottom: 16px; }
@media (min-width: 900px) { .set-pair { grid-template-columns: 1fr 1fr; } }
.set-pair > .card { margin: 0; height: 100%; }
.set-pair .layouts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.set-pair .lay-box small { display: none; }
@media (max-width: 560px) { .set-pair .layouts { grid-template-columns: 1fr; } }
.staff-list { display: flex; flex-wrap: wrap; gap: 10px; }
.staff-chip { display: inline-flex; align-items: center; gap: 10px; padding: 6px 8px 6px 18px; border: 1px solid var(--line); border-radius: 999px; background: var(--card-2); }
.staff-chip .sig { font-size: 1.35rem; color: var(--accent); line-height: 1.2; }
.staff-chip form { margin: 0; }
.set-save { max-width: 360px; margin: 18px 0 8px; }

/* Invois: Prepared by */
.staff-row select { text-align: right; }
.prepared { display: flex; flex-direction: column; align-items: flex-end; margin-top: 8px; }
.prepared span { font-size: .72rem; font-weight: 700; color: var(--muted); }
.prepared .sig { font-size: 1.5rem; color: var(--accent); line-height: 1.15; }

/* Amaran payment method */
.pay-warn { position: fixed; z-index: 130; left: 50%; top: 18px; transform: translate(-50%, -140%); max-width: min(92vw, 520px); padding: 14px 22px; border-radius: 16px; background: var(--red); color: #fff; font-weight: 700; font-size: .92rem; line-height: 1.4; text-align: center; box-shadow: var(--shadow-lg); transition: transform .4s var(--ease-out); pointer-events: none; }
.pay-warn.on { transform: translate(-50%, 0); }
.pf-select.shake { animation: shake .45s ease; }
@keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }

/* Komen pelanggan */
.cust-notes { margin-bottom: 16px; }
.note-form { display: flex; gap: 10px; align-items: flex-start; flex-wrap: wrap; }
.note-form textarea { flex: 1; min-width: 220px; resize: vertical; }
.note-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
.note-list li { padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--card-2); }
.note-body { font-size: .92rem; line-height: 1.5; word-break: break-word; }
.note-meta { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 8px; }
.note-meta form { margin: 0; }
.note-peek { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; margin-top: 4px; padding: 3px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: .75rem; font-weight: 650; text-decoration: none; }
.note-peek span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 300px; }
.note-peek i { font-style: normal; opacity: .75; }

/* ===== 9.0 ===== */
/* popup cart terbang ke navbar */
.cat-pop.leaving { pointer-events: none; }
.cat-pop.leaving .cat-pop-sheet { visibility: hidden; }
.cat-pop.leaving .cat-pop-bg { opacity: 0; transition: opacity .42s ease; animation: none; }
.cart-btn.bump { animation: cart-bump .7s cubic-bezier(.3,1.4,.5,1); }
.cart-btn.bump .badge { animation: badge-pop .6s cubic-bezier(.3,1.6,.5,1); }
@keyframes cart-bump { 0% { transform: scale(1) rotate(0); } 30% { transform: scale(1.28) rotate(-8deg); } 60% { transform: scale(.94) rotate(4deg); } 100% { transform: scale(1) rotate(0); } }
@keyframes badge-pop { 0% { transform: scale(1); } 40% { transform: scale(1.5); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .cart-btn.bump, .cart-btn.bump .badge { animation: none; } }

/* staf wajib */
.staff-row .req, .pf .req { color: var(--red); font-style: normal; }
.meta-row select.ink { cursor: pointer; }
.ink.is-bad { border-color: var(--red); background: var(--red-soft); border-radius: 10px; }
.ink.shake { animation: shake .45s ease; }
.staff-add-link { display: block; text-align: right; font-size: .78rem; font-weight: 700; color: var(--accent); margin-top: 4px; }

/* baris item kedai gadget: Category > Item > IMEI */
.item-gadget { align-items: start; }
.item-gadget .c-desc { display: flex; flex-direction: column; gap: 4px; }
.item-gadget .i-cat { font-size: .7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); padding-top: 6px; padding-bottom: 2px; }
.item-gadget .i-cat::placeholder { color: var(--muted); font-weight: 700; }
.item-gadget .i-desc { font-weight: 700; padding-top: 2px; }
.item-gadget .i-imei { font-size: .86rem; border-top: 1px dashed var(--line); border-radius: 0; padding-top: 8px; }
.item-gadget .imei-btn { align-self: flex-start; margin: 2px 8px 6px; padding: 5px 12px; border: 1px dashed var(--line); border-radius: 999px; background: transparent; color: var(--accent); font: inherit; font-size: .76rem; font-weight: 700; cursor: pointer; transition: background .2s, border-color .2s; }
.item-gadget .imei-btn:hover { background: var(--accent-soft); border-color: var(--accent); }
.item-gadget .imei-btn[hidden], .item-gadget .i-imei[hidden], .item-gadget .war-note[hidden] { display: none; }
.item-gadget .war-note { margin: 0 8px 4px; font-size: .72rem; font-weight: 700; color: var(--green); }
.item-gadget .c-qty, .item-gadget .c-price, .item-gadget .c-total { padding-top: 14px; }
.item-gadget .i-del { margin-top: 12px; }
@media (max-width: 700px) { .item-gadget .c-qty, .item-gadget .c-price, .item-gadget .c-total { padding-top: 0; } .item-gadget .i-del { margin-top: 0; } }

/* item pada invois (viewer / ringkasan pelanggan) */
.it-cat { display: block; font-size: .68rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.it-sub { display: block; font-size: .76rem; color: var(--muted); font-weight: 600; margin-top: 2px; }
.it-war { color: var(--green); }
.war-pill { margin-right: 6px; }

/* Settings: Specialization */
.spec-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.spec-opt { position: relative; cursor: pointer; }
.spec-opt input { position: absolute; opacity: 0; inset: 0; }
.spec-box { display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 14px 16px; border: 1.5px solid var(--line); border-radius: var(--r-sm); background: var(--card-2); transition: border-color .2s, background .2s, transform .2s; }
.spec-box b { font-size: .98rem; }
.spec-box small { color: var(--muted); font-size: .76rem; line-height: 1.35; }
.spec-opt:hover .spec-box { transform: translateY(-2px); }
.spec-opt input:checked + .spec-box { border-color: var(--accent); background: var(--accent-soft); }
.spec-opt input:focus-visible + .spec-box { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Halaman pelanggan: 60% / 40% */
.cv-split { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 16px; align-items: start; margin-bottom: 16px; }
.cv-main { display: grid; gap: 16px; min-width: 0; }
.cv-side { min-width: 0; position: sticky; top: 16px; }
.cv-side .cust-notes { margin-bottom: 0; }
.cv-side .note-form textarea { min-width: 0; width: 100%; flex-basis: 100%; }
.cv-side .note-list { max-height: 460px; overflow: auto; padding-right: 2px; }
.dev-now { display: flex; flex-direction: column; gap: 2px; margin-bottom: 12px; }
.dev-now b { font-size: 1.35rem; letter-spacing: -.02em; }
.dev-form { display: flex; gap: 10px; flex-wrap: wrap; }
.dev-form input { flex: 1; min-width: 180px; }
.hist-list { list-style: none; margin: 10px 0 0; padding: 0; max-height: 420px; overflow: auto; }
.hist-list li { display: grid; grid-template-columns: 82px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line-2); }
.hist-list li:first-child { border-top: 0; }
.h-date { font-size: .8rem; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.h-what { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.h-what b { font-weight: 700; word-break: break-word; }
@media (max-width: 900px) {
  .cv-split { grid-template-columns: 1fr; }
  .cv-side { position: static; }
}
@media (max-width: 520px) { .hist-list li { grid-template-columns: 1fr auto; } .h-date { grid-column: 1 / -1; } }

/* senarai invois: kolum Staff */
.inv-table td.staff { color: var(--muted); font-size: .84rem; }
@media (max-width: 700px) { .inv-table td.staff::before { content: attr(data-l) ": "; } }
.cv-split .card-head h2 { display: flex; align-items: center; gap: 8px; }
.cv-split .card-head h2 svg { flex: none; }

/* ===== 10.0 ===== */
/* nama category: hitam biasa */
.it-cat, .item-gadget .i-cat { color: var(--ink); }
.item-gadget .i-cat::placeholder { color: var(--muted); }

/* paparan invois: berbilang helai */
.paper.view { overflow: visible; }
.paper.view::before { border-radius: 26px 26px 0 0; }
.paper-wrap.view-wrap .paper.view + .paper.view { margin-top: 22px; }
.page-head { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; padding-bottom: 10px; margin-bottom: 4px; border-bottom: 2px solid var(--ink); }
.page-no { margin-top: auto; padding-top: 12px; text-align: right; font-size: .72rem; font-weight: 700; color: var(--muted); }
.paper.view .foot-left { display: flex; flex-direction: column; justify-content: space-between; gap: 18px; min-height: 100%; }
.paper.view .foot-right { align-self: end; }
.paper.view .prepared { align-items: flex-start; margin-top: 0; }
.paper.view .prepared .sig { font-size: 1.7rem; color: var(--ink); }
.paper.view .prepared span { font-size: .72rem; }
.qr-strip { display: flex; align-items: center; gap: 14px; margin-top: 18px; }
.qr-strip .qr-svg { width: 84px; height: 84px; flex: none; border-radius: 8px; border: 1px solid var(--line); background: #fff; }
.qr-strip div { display: flex; flex-direction: column; gap: 2px; font-size: .88rem; }
.sig-lock { display: inline-flex; align-items: center; gap: 6px; justify-content: flex-end; width: 100%; color: var(--muted); }
.sig-lock .sig { font-size: 1.4rem; color: var(--ink); }
.staff-lock-note { font-size: .72rem; color: var(--muted); text-align: right; line-height: 1.4; margin-top: 4px; }

/* Sorting Box */
.box-note { display: flex; align-items: center; gap: 14px; padding: 16px 18px; margin-bottom: 14px; flex-wrap: wrap; }
.box-note > div { flex: 1; min-width: 200px; }
.box-list { display: grid; }
.box-row { border-top: 1px solid var(--line-2); }
.box-row:first-child { border-top: 0; }
.box-row summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 150px minmax(0, 1.2fr) minmax(0, .8fr) 120px minmax(0, 1fr) 24px; gap: 12px; align-items: center; padding: 14px 18px; font-weight: 600; }
.box-row summary::-webkit-details-marker { display: none; }
.box-row summary:hover { background: var(--card-2); }
.box-row .b-no { font-weight: 800; }
.box-row .b-amt { font-weight: 800; text-align: right; }
.box-row .b-chev { transition: transform .25s var(--ease-out); color: var(--muted); }
.box-row[open] .b-chev { transform: rotate(90deg); }
.box-detail { padding: 4px 18px 18px; }
.box-meta { margin-bottom: 10px; }
.box-items { width: 100%; border-collapse: collapse; font-size: .88rem; }
.box-items th { text-align: left; font-size: .68rem; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); padding: 6px 8px; }
.box-items td { padding: 8px; border-top: 1px solid var(--line-2); vertical-align: top; }
.box-items .r { text-align: right; }
.box-del { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.box-del input { flex: 1; min-width: 180px; max-width: 280px; }
.pass-form { display: grid; gap: 12px; max-width: 420px; }
@media (max-width: 760px) {
  .box-row summary { grid-template-columns: 1fr auto 24px; row-gap: 2px; }
  .box-row .b-cust, .box-row .b-staff, .box-row .b-when { grid-column: 1 / 3; }
}

/* Dashboard 10.0 */
.dash-top { grid-template-columns: 2fr 1fr 1fr 2fr; }
@media (max-width: 899px) { .dash-top { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 559px) { .dash-top { grid-template-columns: 1fr; } }
.tile-empty { min-height: 168px; border: 2px dashed var(--line); border-radius: var(--r, 26px); background: transparent; }
@media (max-width: 559px) { .tile-empty { display: none; } }
.tile-plan { position: relative; overflow: hidden; background: linear-gradient(135deg, var(--accent) 0%, var(--accent-lo) 100%); color: #fff; border-color: transparent; }
.tile-plan .chip { background: rgba(255,255,255,.18); color: #fff; }
.tile-plan .tile-txt h2 { color: #fff; }
.tile-plan .tile-txt > span { color: rgba(255,255,255,.82); font-size: .84rem; font-weight: 550; line-height: 1.45; display: block; }
.tile-plan .plan-hit { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.tile-plan > .chip, .tile-plan > .tile-txt, .tile-plan > .tile-end { position: relative; z-index: 2; pointer-events: none; }
.tile-plan .plan-btn { pointer-events: auto; z-index: 3; position: relative; }
.tile-plan:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.plan-deco { position: absolute; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.22); pointer-events: none; }
.plan-deco.d1 { width: 170px; height: 170px; right: -60px; top: -70px; }
.plan-deco.d2 { width: 110px; height: 110px; right: 18px; top: 12px; border-style: dashed; opacity: .7; }
.plan-deco.d3 { width: 60px; height: 60px; right: -18px; bottom: 26px; background: rgba(255,255,255,.1); border: 0; }
.btn-white { background: #fff; color: var(--accent-lo); }
.list-card .empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 36px 16px; text-align: center; color: var(--muted); }
.list-card .empty p { margin: 0; }

/* ===== 10.1 : mobile lebih kemas ===== */
@media (max-width: 640px) {
  html { font-size: 13.5px; }
  body { font-size: 13px; }
  h1 { font-size: 1.45rem; }
  h2 { font-size: .95rem; }
  .sub { font-size: .8rem; }
  .btn { height: 38px; padding: 0 14px; font-size: .8rem; gap: 6px; }
  .btn .icon { width: 15px; height: 15px; }
  .btn-sm { height: 32px; font-size: .74rem; padding: 0 12px; }
  .circle { width: 36px; height: 36px; }
  .brand-txt b { font-size: 1rem; }
  .brand-txt small { font-size: .62rem; }
  .card { border-radius: 20px; }
  .tile { min-height: 0; padding: 16px; gap: 10px; }
  .tile-txt h2 { font-size: .95rem; }
  .tile-txt .muted, .tile-plan .tile-txt > span { font-size: .76rem; }
  .pill { font-size: .66rem; }
  .title-row { gap: 10px; }
  .title-actions { gap: 6px; }

  /* senarai invois: baris nipis, jumlah di bawah butang */
  .inv-table .hide-m { display: none; }
  .inv-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; align-items: center; padding: 9px 12px; }
  .inv-table tr > td { width: auto; min-width: 0; }
  .inv-table td.no { grid-column: 1; grid-row: 1; font-size: .82rem; }
  .inv-table td.date { grid-column: 1; grid-row: 2; font-size: .74rem; }
  .inv-table td.cust { grid-column: 1; grid-row: 3; font-size: .78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .inv-table td:has(.row-actions) { grid-column: 2; grid-row: 1; padding: 0; }
  .inv-table .row-actions { position: static; justify-content: flex-end; }
  .inv-table td.amt { grid-column: 2; grid-row: 2 / 4; align-self: start; text-align: right; font-size: .9rem; margin-top: 4px; }
  .circle.sm { width: 28px; height: 28px; }

  /* butang atas paparan invois */
  .view-actions { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; width: 100%; }
  .view-actions .btn { height: 34px; padding: 0 8px; font-size: .74rem; gap: 5px; min-width: 0; }
  .view-actions .btn .icon { width: 14px; height: 14px; }
  .view-actions .va-back { grid-column: span 2; order: 1; }
  .view-actions .va-edit { grid-column: span 2; order: 2; }
  .view-actions .va-copy { grid-column: span 2; order: 3; }
  .view-actions .va-wa { grid-column: span 3; order: 4; }
  .view-actions .va-dl { grid-column: span 3; order: 5; }
}
@media (max-width: 640px) {
  :where(input, select, textarea), .paper .ink, .paper :where(input.ink, textarea.ink) { font-size: 14px; }
  .ink-title { font-size: 1.05rem !important; }
}

/* ===== 11.0 : butang daftar/masuk + halaman utama ===== */
.auth-btns { display: flex; align-items: center; gap: 6px; margin-right: 4px; }
.auth-btns .btn { white-space: nowrap; }
@media (max-width: 520px) { .auth-btns { margin-right: 0; gap: 2px; } .auth-btns .btn { padding: 0 10px; font-size: .72rem; } .top-end { gap: 6px; } .brand-txt small { display: none; } .top:has(.auth-btns) .brand-txt { display: none; } }

.lp-hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 36px; align-items: center; padding: 28px 0 18px; }
.lp-hero h1 { font-size: clamp(2rem, 4.6vw, 3.4rem); line-height: 1.06; letter-spacing: -.035em; }
.lp-accent { color: var(--accent); }
.lp-sub { color: var(--muted); font-size: 1.04rem; line-height: 1.6; max-width: 540px; margin: 16px 0 0; }
.lp-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.lp-big { height: 50px; padding: 0 24px; font-size: .92rem; }
.lp-chips { display: flex; flex-wrap: wrap; gap: 8px 18px; list-style: none; padding: 0; margin: 20px 0 0; color: var(--muted); font-size: .84rem; font-weight: 650; }
.lp-chips li { display: inline-flex; align-items: center; gap: 6px; }
.lp-chips .icon { color: var(--green, #1fa855); }

.lp-mock { position: relative; display: grid; place-items: center; padding: 18px; }
.lp-mock::before { content: ""; position: absolute; inset: 6% 4%; border-radius: 36px; background: linear-gradient(135deg, var(--accent) 0%, var(--accent-lo) 100%); opacity: .13; transform: rotate(-3deg); }
.mk-card { position: relative; width: min(100%, 380px); background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: 20px; box-shadow: var(--shadow-lg, 0 30px 60px -24px rgba(0,0,0,.3)); transform: rotate(1.5deg); }
.mk-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; border-radius: 22px 22px 0 0; background: var(--grad); }
.mk-top { display: flex; justify-content: space-between; align-items: baseline; margin-top: 6px; }
.mk-top b { font-size: 1rem; }
.mk-title { color: var(--accent); font-weight: 800; letter-spacing: .1em; font-size: 1.1rem; }
.mk-lines { margin: 10px 0 14px; display: grid; gap: 6px; }
.mk-lines i { display: block; height: 7px; width: 55%; border-radius: 6px; background: var(--card-2); }
.mk-lines i.s { width: 35%; }
.mk-head { display: flex; justify-content: space-between; background: var(--night, #141416); color: #fff; font-size: .62rem; font-weight: 800; letter-spacing: .08em; padding: 7px 12px; border-radius: 999px; }
.mk-row { display: flex; justify-content: space-between; gap: 10px; padding: 10px 4px; border-bottom: 1px solid var(--line-2); font-size: .82rem; font-weight: 600; }
.mk-row small { font-size: .58rem; font-weight: 800; letter-spacing: .06em; }
.mk-foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; margin-top: 14px; }
.mk-qr { display: flex; align-items: center; gap: 8px; color: var(--ink); }
.mk-qr small { color: var(--muted); font-size: .64rem; font-weight: 700; max-width: 70px; line-height: 1.25; }
.mk-tot { background: var(--accent-soft); border-radius: 14px; padding: 8px 12px; text-align: right; }
.mk-tot small { display: block; font-size: .56rem; font-weight: 800; letter-spacing: .08em; color: var(--accent); }
.mk-tot b { font-size: 1.05rem; color: var(--accent); }
.mk-paid { position: absolute; right: 18px; top: 56px; border: 2px solid #15803d; color: #15803d; font-weight: 800; letter-spacing: .18em; font-size: .7rem; padding: 3px 10px; border-radius: 6px; transform: rotate(-8deg); background: var(--card); }

.lp-sec { margin-top: 56px; }
.lp-sec-head { margin-bottom: 20px; max-width: 640px; }
.lp-sec-head h2 { font-size: clamp(1.4rem, 2.6vw, 2rem); letter-spacing: -.03em; }
.lp-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.lp-feat { padding: 20px; display: grid; gap: 8px; align-content: start; }
.lp-feat h3, .lp-steps h3, .lp-plan h3 { font-size: 1rem; }
.lp-feat p, .lp-steps p { margin: 0; color: var(--muted); font-size: .86rem; line-height: 1.55; }
.lp-steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.lp-steps li { display: flex; gap: 14px; padding: 20px; align-items: flex-start; }
.lp-num { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); font-weight: 800; }
.lp-plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; max-width: 860px; }
.lp-plan { padding: 24px; display: grid; gap: 10px; align-content: start; }
.lp-plan p { margin: 0; }
.lp-price { font-size: .9rem; }
.lp-price b { font-size: 2rem; letter-spacing: -.03em; }
.lp-plan ul { list-style: none; padding: 0; margin: 4px 0 8px; display: grid; gap: 8px; font-size: .88rem; font-weight: 600; }
.lp-plan li { display: flex; align-items: center; gap: 8px; }
.lp-plan li .icon { color: var(--green, #1fa855); flex: none; }
.lp-pro { background: linear-gradient(135deg, var(--accent) 0%, var(--accent-lo) 100%); color: #fff; border-color: transparent; }
.lp-pro h3, .lp-pro .lp-price b { color: #fff; }
.lp-pro li .icon { color: #fff; }
.lp-end { margin-top: 56px; padding: 40px 24px; text-align: center; background: var(--night, #141416); color: #fff; border-color: transparent; display: grid; gap: 10px; justify-items: center; }
.lp-end h2 { color: #fff; font-size: clamp(1.3rem, 2.6vw, 1.9rem); }
.lp-end p { margin: 0 0 8px; color: rgba(255,255,255,.7); }

@media (max-width: 980px) { .lp-hero { grid-template-columns: 1fr; } .lp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lp-steps { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .lp-hero { padding-top: 6px; gap: 16px; }
  .lp-hero h1 { font-size: 1.9rem; }
  .lp-sub { font-size: .9rem; }
  .lp-big { height: 44px; padding: 0 18px; font-size: .84rem; }
  .lp-cta .btn { flex: 1 1 auto; }
  .lp-grid { grid-template-columns: 1fr; }
  .lp-feat { padding: 16px; grid-template-columns: auto 1fr; column-gap: 12px; }
  .lp-feat .chip { grid-row: span 2; }
  .lp-plans { grid-template-columns: 1fr; }
  .lp-sec, .lp-end { margin-top: 36px; }
}

/* ===== 12.0 ===== */
/* Login / Daftar: betul-betul di tengah */
.wrap:has(> .auth) { min-height: calc(100dvh - 190px); display: flex; flex-direction: column; justify-content: center; }
.auth.narrow { width: 100%; max-width: 420px; margin: 0 auto; padding: 0; text-align: center; }
.auth h1 { margin-bottom: 18px; }
.auth > .card { text-align: left; padding: 24px; }
.auth > .alert { text-align: left; }
.auth > .muted { margin: 18px 0 0; }
.auth .btn-block { margin-top: 6px; }
@media (max-width: 640px) { .wrap:has(> .auth) { min-height: calc(100dvh - 150px); } .auth > .card { padding: 18px; } }

/* Live chat: status admin */
.admin-status { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: 999px; font-size: .8rem; font-weight: 750; border: 1px solid var(--line); background: var(--card); white-space: nowrap; }
.admin-status .blink { width: 10px; height: 10px; border-radius: 50%; background: #9ca3af; flex: none; }
.admin-status.is-on { color: #15803d; background: color-mix(in srgb, #22c55e 12%, var(--card)); border-color: color-mix(in srgb, #22c55e 35%, var(--line)); }
.admin-status.is-on .blink { background: #22c55e; animation: blink-green 1.4s ease-in-out infinite; }
.admin-status.is-off { color: var(--muted); }
@keyframes blink-green { 0% { box-shadow: 0 0 0 0 rgba(34,197,94,.7); opacity: 1; } 50% { opacity: .45; } 70% { box-shadow: 0 0 0 8px rgba(34,197,94,0); } 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .admin-status.is-on .blink { animation: none; } }

/* Admin: suis Online / Offline */
.admin-online { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 16px 20px; margin-bottom: 16px; }
.admin-online .ao-txt { display: grid; flex: 1; min-width: 180px; }
.switch { position: relative; display: inline-flex; align-items: center; gap: 0; height: 40px; padding: 4px; border: 1px solid var(--line); border-radius: 999px; background: var(--card-2); cursor: pointer; }
.switch .sw-lbl { position: relative; z-index: 1; width: 74px; text-align: center; font-size: .8rem; font-weight: 750; color: var(--muted); }
.switch .sw-knob { position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 4px; width: 74px; border-radius: 999px; background: #6b7280; transition: transform .25s var(--ease-out), background-color .25s; }
.switch .sw-lbl.off { color: #fff; }
.switch.on .sw-knob { transform: translateX(74px); background: #22c55e; }
.switch.on .sw-lbl.off { color: var(--muted); }
.switch.on .sw-lbl.on { color: #fff; }

/* Dashboard: kotak Specialization */
.tile-spec.is-empty { border: 1.5px dashed color-mix(in srgb, var(--accent) 45%, var(--line)); background: color-mix(in srgb, var(--accent) 4%, var(--card)); }
.tile-spec.is-empty .tile-txt .muted { color: var(--accent); font-weight: 700; }

/* Pricing */
.pr-head { text-align: center; padding: 22px 0 22px; }
.pr-head h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); letter-spacing: -.035em; }
.pr-head .sub { font-size: 1rem; }
.pr-plans { margin: 0 auto; }
.pr-block { max-width: 860px; margin: 18px auto 0; }
.pr-block .plan-table { margin-top: 6px; }
@media (max-width: 640px) { .pr-head { padding: 6px 0 16px; } .admin-online .switch { width: 100%; justify-content: center; } }
@media (max-width: 699px) {
  .plan-table thead { display: block; }
  .plan-table, .plan-table tbody { display: block; width: 100%; }
  .plan-table tr { display: grid !important; grid-template-columns: minmax(0, 1fr) 74px 74px; align-items: center; column-gap: 4px; padding: 10px 14px; }
  .plan-table th, .plan-table td { display: block; width: auto; padding: 0; text-align: center; font-size: .8rem; }
  .plan-table th:first-child, .plan-table td:first-child { text-align: left; }
  .plan-table .no { font-size: .8rem; }
  .plan-table thead tr { border-top: 0; padding-bottom: 4px; }
}

/* ===== 13.0 ===== */
/* Titik merah bernafas + butang hijau "Online" bernafas (kotak Live chat) */
.dot { animation: dot-breathe 2.2s ease-in-out infinite; }
@keyframes dot-breathe { 0%, 100% { transform: scale(1); opacity: 1; box-shadow: 0 0 0 3px var(--card), 0 0 0 3px rgba(239,68,68,.0); } 50% { transform: scale(1.3); opacity: .8; box-shadow: 0 0 0 3px var(--card), 0 0 0 8px rgba(239,68,68,.22); } }
.tile-badges { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.live-btn { display: inline-flex; align-items: center; gap: 7px; height: 26px; padding: 0 11px; border-radius: 999px; font-size: .72rem; font-weight: 800; color: #fff; background: #22a559; box-shadow: 0 6px 14px -6px rgba(34,165,89,.8); animation: live-breathe 2.4s ease-in-out infinite; }
.live-btn i { width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: live-dot 2.4s ease-in-out infinite; }
@keyframes live-breathe { 0%, 100% { transform: scale(1); box-shadow: 0 6px 14px -6px rgba(34,165,89,.8), 0 0 0 0 rgba(34,165,89,.0); } 50% { transform: scale(1.06); box-shadow: 0 6px 14px -6px rgba(34,165,89,.8), 0 0 0 7px rgba(34,165,89,.2); } }
@keyframes live-dot { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .dot, .live-btn, .live-btn i { animation: none; } }

/* Popup tawaran Pro percuma */
.offer-pop { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; padding: 16px; }
.offer-pop[hidden] { display: none; }
.offer-bg { position: absolute; inset: 0; background: rgba(10, 10, 14, .5); backdrop-filter: blur(4px); animation: fade-in .3s var(--ease) both; }
.offer-sheet { position: relative; width: min(100%, 440px); background: var(--card); border: 1px solid var(--line); border-radius: 28px; padding: 28px 24px 22px; text-align: center; box-shadow: var(--shadow-lg, 0 30px 70px -20px rgba(0,0,0,.45)); animation: rise .45s var(--ease-out) both; }
.offer-sheet h2 { font-size: 1.25rem; letter-spacing: -.02em; margin: 14px 0 8px; }
.offer-sheet p { margin: 0 0 8px; line-height: 1.55; }
.offer-ic { margin: 0 auto; width: 52px; height: 52px; background: linear-gradient(135deg, var(--accent), var(--accent-lo)); color: #fff; }
.offer-actions { display: grid; gap: 8px; margin-top: 18px; }
.offer-actions .btn { width: 100%; height: 46px; }
.offer-inline { display: flex; gap: 8px; margin-top: 12px; }
@media (max-width: 640px) { .offer-pop { align-items: end; padding: 0; } .offer-sheet { width: 100%; border-radius: 28px 28px 0 0; padding-bottom: calc(22px + env(safe-area-inset-bottom)); } }
.dot.inline { margin-right: 12px; }

/* ===== 14.0: dialog pengesahan + dropdown bertema ===== */
.og-lock { overflow: hidden; }
.og-dlg { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; padding: 20px; }
.og-dlg-bg { position: absolute; inset: 0; background: rgba(10,10,14,.5); backdrop-filter: blur(3px); opacity: 0; transition: opacity .2s; }
.og-dlg-box { position: relative; width: min(400px, 100%); background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: 26px; padding: 26px 24px 22px; text-align: center; box-shadow: var(--shadow-lg); transform: translateY(14px) scale(.96); opacity: 0; transition: transform .26s cubic-bezier(.2,.9,.3,1.2), opacity .2s; }
.og-dlg.in .og-dlg-bg { opacity: 1; }
.og-dlg.in .og-dlg-box { transform: none; opacity: 1; }
.og-dlg-ic { width: 46px; height: 46px; margin: 0 auto 12px; border-radius: 50%; background: var(--red-soft); color: var(--red); font-weight: 800; font-size: 1.4rem; display: grid; place-items: center; }
.og-dlg-box h3 { margin: 0 0 6px; font-size: 1.12rem; }
.og-dlg-box p { margin: 0 0 20px; color: var(--ink-2); line-height: 1.5; font-size: .95rem; }
.og-dlg-act { display: flex; gap: 10px; }
.og-dlg-act .btn { flex: 1; justify-content: center; }
.og-dlg-act .btn-primary { background: var(--red); border-color: var(--red); background-image: none; }
@media (max-width: 640px) { .og-dlg { align-items: flex-end; padding: 0; } .og-dlg-box { width: 100%; border-radius: 26px 26px 0 0; padding-bottom: calc(22px + env(safe-area-inset-bottom)); transform: translateY(40px); } }

.og-sel { position: relative; display: block; width: 100%; }
.og-sel-native { position: absolute !important; opacity: 0 !important; pointer-events: none !important; width: 1px !important; height: 1px !important; left: 0; bottom: 0; margin: 0 !important; padding: 0 !important; border: 0 !important; }
.og-sel-btn { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; text-align: left; cursor: pointer; font: inherit; color: inherit; background-image: none !important; appearance: none; -webkit-appearance: none; }
.og-sel-r .og-sel-btn { text-align: right; justify-content: flex-end; }
.og-sel-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.og-sel-btn.is-ph .og-sel-txt { color: var(--muted); }
.og-sel-car { flex: none; color: var(--muted); transition: transform .2s; }
.og-sel-btn[aria-expanded=true] .og-sel-car { transform: rotate(180deg); }
.og-sel-btn:disabled { opacity: .55; cursor: not-allowed; }
.og-pop { position: fixed; z-index: 1100; background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-lg); padding: 6px; overflow: auto; opacity: 0; transform: translateY(-6px) scale(.98); transform-origin: top; transition: opacity .15s, transform .18s; }
.og-pop.in { opacity: 1; transform: none; }
.og-opt { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 11px; cursor: pointer; font-size: .95rem; font-weight: 600; }
.og-opt.is-hi { background: var(--card-2); }
.og-opt.is-sel { color: var(--accent); }
.og-opt-ck { visibility: hidden; flex: none; }
.og-opt.is-sel .og-opt-ck { visibility: visible; }
.og-opt.is-dis { opacity: .4; cursor: not-allowed; }
.og-grp { padding: 8px 12px 4px; font-size: .75rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.og-pop-bg { position: fixed; inset: 0; z-index: 1099; background: rgba(10,10,14,.5); }
.og-pop-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 8px 8px 12px; }
.og-pop-sheet { left: 0 !important; right: 0; bottom: 0; top: auto !important; width: 100%; max-height: 70vh; border-radius: 26px 26px 0 0; padding: 8px 10px calc(14px + env(safe-area-inset-bottom)); transform: translateY(100%); transform-origin: bottom; transition: transform .26s cubic-bezier(.2,.8,.3,1), opacity .2s; }
.og-pop-sheet.in { transform: none; }
.og-pop-sheet .og-pop-list { max-height: calc(70vh - 70px); overflow: auto; }
.og-pop-sheet .og-opt { padding: 14px 12px; font-size: 1rem; }

/* 14.0: seret kategori - kotak terapung + ruang kosong */
.cart-cat.drag-slot { background: transparent; border: 2px dashed rgb(var(--accent-rgb) / .5); box-shadow: none; }
.cart-cat.drag-slot > * { visibility: hidden; }
.drag-ghost { background: var(--card); border-radius: var(--r, 22px); box-shadow: 0 30px 60px -16px rgba(20,20,24,.45), 0 4px 12px rgba(20,20,24,.12); cursor: grabbing; will-change: transform; }
.drag-ghost .cat-open { background: var(--card); }
html.is-sorting, html.is-sorting * { cursor: grabbing !important; user-select: none; -webkit-user-select: none; }
.cust-link { color: inherit; font-weight: 600; text-decoration: none; border-bottom: 1px dashed var(--line); }
.cust-link:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* 14.0: jumlah melekat di bawah kertas; cop PAID di kiri kotak jumlah */
.paper.view .paper-foot ~ .page-no { margin-top: 0; }
.paper.view .foot-right { display: flex; align-items: flex-end; gap: 18px; }
.paper.view .foot-right .tot-col { flex: 1; min-width: 0; }
.paper.view .paid-wrap { flex: none; padding: 0 6px 12px 0; }
.paper.view .paid-stamp { margin: 0; justify-self: auto; font-size: 1.05rem; }
@media (max-width: 640px) { .paper.view .foot-right { gap: 10px; } .paper.view .paid-stamp { font-size: .85rem; padding: 3px 10px; } }

/* 14.1: 4 kotak sebaris (Cart & Item Management); anchor sebagai kotak kategori */
.cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 760px) { .cat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cart-cat a.cat-open { text-decoration: none; box-sizing: border-box; }
.cart-cat a.cat-open .pill { margin-top: auto; }
.cart-cat a.cat-open .war-pill { margin-top: 0; }
.page-narrow:has(.cat-grid) { max-width: none; }

/* 14.2: tambah banyak item - baris nama + harga */
.bulk-rows { display: grid; gap: 8px; margin-bottom: 14px; }
.bulk-row { display: grid; grid-template-columns: 26px minmax(0, 1fr) 130px; gap: 8px; align-items: center; }
.bulk-row-head { font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.bulk-no { text-align: center; font-size: .8rem; font-weight: 700; color: var(--muted); }
.bulk-row input { width: 100%; }
@media (max-width: 640px) { .bulk-row { grid-template-columns: 22px minmax(0, 1fr) 96px; } }

.og-dlg-ic.ok { background: var(--accent-soft); color: var(--accent); }
.og-dlg[hidden] { display: none; }

.admin-name { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.sv-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.sv-stat { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; margin: 0; }
.sv-stat b { font-size: 1.3rem; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { .sv-stats { grid-template-columns: 1fr; } .sv-stat { flex-direction: row; align-items: baseline; justify-content: space-between; } }

/* 14.2: Sales by Staff */
.staff-card { display: flex; align-items: center; gap: 14px; width: 100%; margin: 0 0 16px; padding: 16px 18px; text-align: left; cursor: pointer; font: inherit; color: var(--ink); transition: transform .3s var(--ease-out), box-shadow .3s; }
.staff-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.staff-card .sc-txt { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sp-box { text-align: left; width: min(560px, 100%); max-height: min(86vh, 760px); overflow: auto; padding: 20px; }
.sp-box .card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.sp-box .card-head h2 { display: flex; align-items: center; gap: 8px; font-size: 1.1rem; margin: 0; }
.sp-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.sp-staff { border: 1px solid var(--line); border-radius: 16px; margin-bottom: 8px; overflow: hidden; background: var(--card); }
.sp-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 12px 14px; border: 0; background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.sp-head:hover { background: var(--card-2); }
.sp-who { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.sp-amt { font-variant-numeric: tabular-nums; }
.sp-body { padding: 4px 14px 14px; border-top: 1px solid var(--line-2); }
.sp-sub { font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin: 10px 0 4px; }
.sp-item { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px dashed var(--line); font-size: .92rem; }
.sp-body .btn { margin-top: 12px; }
@media (max-width: 640px) { .og-staffpop { align-items: flex-end; padding: 0; } .sp-box { width: 100%; border-radius: 26px 26px 0 0; } }
.og-ask .og-dlg-act .btn-primary { background: var(--grad); border-color: transparent; }

/* 14.3 */
.pill.closed { background: var(--red); color: #fff; font-weight: 800; box-shadow: 0 6px 14px -6px color-mix(in srgb, var(--red) 70%, transparent); }
.open-card .pill.closed { align-self: flex-start; }
.pill.war-none { background: var(--card-2); color: var(--muted); }

/* senarai item (Item Management) */
.item-list { padding: 6px 0; margin: 0 0 16px; }
.il-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 18px; }
.il-row { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-top: 1px solid var(--line-2); }
.il-name { flex: 1; min-width: 0; font-weight: 600; word-break: break-word; }
.il-price { font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.il-in { min-height: 40px; padding: 8px 14px; }
.il-row .il-in:not(.il-pin) { flex: 1; min-width: 0; }
.il-pin { width: 140px; flex: none; text-align: right; }
.il-edit { display: none !important; }
.item-list.is-editing .il-edit { display: block !important; }
.item-list.is-editing .il-bar .il-edit { display: inline-flex !important; gap: 8px; }
.item-list.is-editing .il-view { display: none !important; }
.il-foot.is-edit, .item-list.is-editing .il-foot { display: flex !important; justify-content: flex-end; gap: 10px; border-top: 1px solid var(--line-2); padding-top: 14px; }
.il-row .circle { flex: none; }
@media (max-width: 560px) { .il-pin { width: 108px; } .il-row { padding: 12px 14px; } }

/* troli: nama item penuh (boleh bungkus), kuantiti/jumlah/padam di baris bawah */
.cart-list li { grid-template-columns: 84px minmax(0, 1fr) auto; gap: 8px 10px; }
.cart-list .cl-name { grid-column: 1 / -1; }
.cart-list .cl-name b { overflow: visible; text-overflow: clip; white-space: normal; word-break: break-word; line-height: 1.3; }
.cart-list .cl-sub { text-align: right; }
@media (max-width: 420px) { .cart-list li { grid-template-columns: 84px minmax(0, 1fr) auto; } .cart-list li > form:last-child { grid-column: auto; grid-row: auto; } .cl-sub { grid-column: auto; text-align: right; } }

/* dropdown bertema: rupa asas bila tiada kelas input */
.og-sel-btn:not(.ink):not(.pf-input) { min-height: 46px; padding: 10px 16px 10px 18px; font: 600 14.5px/1.4 "Manrope", system-ui, sans-serif; color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: 999px; transition: border-color .2s, box-shadow .2s; }
.og-sel-btn:not(.ink):not(.pf-input):hover { border-color: var(--muted); }
.og-sel-btn:focus-visible, .og-sel-btn[aria-expanded=true] { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent); }
.filters .og-sel, .is-filters .og-sel { width: auto; flex: 0 0 auto; min-width: 180px; }
.filters .og-sel-btn:not(.ink):not(.pf-input), .is-filters .og-sel-btn:not(.ink):not(.pf-input) { min-height: 40px; font-size: 13.5px; }
.og-pop { z-index: 1300; }
.og-pop-bg { z-index: 1299; }
@media (max-width: 699px) { .filters .og-sel { flex: 1 1 100%; } }

/* Item Sales */
.is-filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; align-items: center; }
.is-list { display: flex; flex-direction: column; }
.is-row { display: grid; grid-template-columns: minmax(0, 1fr) auto 110px; gap: 12px; align-items: baseline; padding: 9px 2px; border-bottom: 1px dashed var(--line); font-size: .93rem; }
.is-name { word-break: break-word; }
.is-qty { text-align: right; white-space: nowrap; }
.is-amt { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.is-sum .is-row { border-top: 2px solid var(--ink); border-bottom: 0; padding-top: 12px; font-weight: 800; }
.is-sum .is-amt { color: var(--ink); }
.dp-pop { z-index: 1400 !important; }
.dp-back { z-index: 1399; }
.is-filters .dp-btn { min-height: 40px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); min-width: 140px; font-size: 13.5px; }
.is-filters .dp-btn:hover { border-color: var(--muted); }
.is-row { grid-template-columns: minmax(0, 1fr) 64px 110px; }
@media (max-width: 640px) { .is-filters .f-dates { flex: 1 1 100%; } .is-filters .og-sel { flex: 1 1 100%; } .is-filters .dp-btn { min-width: 0; width: 100%; } .is-row { grid-template-columns: minmax(0, 1fr) 48px 92px; } }

/* 14.4 */
.box-banner { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; padding: 9px 14px; border-radius: 14px; background: var(--red-soft); color: var(--red); font-size: .85rem; font-weight: 700; }

/* 14.4: tab Settings + Data Control */
.set-tabs { display: flex; gap: 6px; flex-wrap: wrap; padding: 6px; margin-bottom: 18px; background: var(--card); border: 1px solid var(--line); border-radius: 999px; width: fit-content; max-width: 100%; }
.set-tab { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border: 0; border-radius: 999px; background: transparent; color: var(--ink-2); font: 700 .88rem "Manrope", sans-serif; cursor: pointer; transition: background .2s, color .2s; }
.set-tab:hover { background: var(--card-2); }
.set-tab.on { background: var(--grad); color: #fff; box-shadow: 0 8px 18px -10px rgb(var(--accent-rgb) / .9); }
.set-panel[hidden] { display: none; }
.set-panel > .card, .set-panel > .set-pair { margin-bottom: 16px; }
.set-save[hidden] { display: none; }
@media (max-width: 640px) { .set-tabs { width: 100%; border-radius: 22px; display: grid; grid-template-columns: 1fr 1fr; } .set-tab { justify-content: center; padding: 10px 8px; font-size: .8rem; } }
.data-list { display: flex; flex-direction: column; }
.data-row { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-top: 1px solid var(--line-2); }
.data-txt { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.data-range { margin-bottom: 6px; }
.data-range .f-dates { max-width: 420px; }
@media (max-width: 560px) { .data-row { flex-wrap: wrap; } .data-dl { width: 100%; justify-content: center; } }
.data-range .f-dates { max-width: 600px; } .data-range .f-dates input { min-width: 180px; }

/* 14.5: logo rasmi */
.brand img.logo { width: auto; height: 34px; filter: none; }
.brand .logo-d { display: none; }
:root[data-theme="dark"] .brand .logo-l { display: none; }
:root[data-theme="dark"] .brand .logo-d { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .brand .logo-l { display: none; }
  :root:not([data-theme="light"]) .brand .logo-d { display: block; }
}

/* 14.7: Admin Panel */
.tile.is-soon { opacity: .72; border-style: dashed; cursor: default; }
.tile.is-soon .lb-icon { filter: grayscale(.5); }
.check-row { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; cursor: pointer; }
.check-row input { margin-top: 4px; width: 18px; height: 18px; accent-color: var(--accent); flex: none; }
.check-row span { display: flex; flex-direction: column; gap: 2px; }
.tp-urls { display: flex; flex-direction: column; gap: 10px; margin: 6px 0; }
.tp-urls code { display: block; padding: 10px 12px; border-radius: 12px; background: var(--card-2); border: 1px solid var(--line); font-size: .82rem; word-break: break-all; user-select: all; }
.seg { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0; }
.seg label { cursor: pointer; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg i { display: inline-block; font-style: normal; font-weight: 700; font-size: .88rem; padding: 10px 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); }
.seg input:checked + i { background: var(--grad); color: #fff; border-color: transparent; }

/* 14.8: bayar Pro */
.pay-form { margin-top: 10px; }
.btn-block { width: 100%; justify-content: center; }

/* 14.9: Google login */
.g-or { display: flex; align-items: center; gap: 12px; margin: 18px 0 14px; color: var(--muted); font-weight: 600; font-size: .85rem; }
.g-or::before, .g-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.g-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 13px 16px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: #1f1f1f; font: 700 .95rem "Manrope", sans-serif; transition: box-shadow .2s, transform .2s; }
.g-btn:hover { box-shadow: var(--shadow); transform: translateY(-1px); }

.fin-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.fin-card { display: flex; flex-direction: column; gap: 4px; padding: 18px; margin: 0; }
.fin-card b { font-size: 1.35rem; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.fin-filter { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.fin-filter .field { margin: 0; }
@media (max-width: 760px) { .fin-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.g-btn { margin-bottom: 0; }
.auth .g-or { margin: 16px 0 18px; }
.auth .g-btn { margin-top: 16px; }

/* 14.10: panduan pengguna baharu */
.tour { position: fixed; inset: 0; z-index: 1200; }
.tour-block { position: absolute; inset: 0; background: transparent; }
.tour-spot { position: fixed; border-radius: 16px; box-shadow: 0 0 0 9999px rgba(8, 10, 20, .62), 0 0 0 3px var(--accent); pointer-events: none; transition: left .3s var(--ease-out), top .3s var(--ease-out), width .3s var(--ease-out), height .3s var(--ease-out); }
.tour-card { position: fixed; background: var(--card); color: var(--ink); border-radius: 22px; padding: 20px; box-shadow: var(--shadow-lg); border: 1px solid var(--line); transition: left .3s var(--ease-out), top .3s var(--ease-out); }
.tour-count { font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); margin-bottom: 6px; }
.tour-title { margin: 0 0 6px; font-size: 1.1rem; }
.tour-body { margin: 0 0 16px; color: var(--muted); font-weight: 550; line-height: 1.5; font-size: .92rem; }
.tour-actions { display: flex; align-items: center; gap: 8px; }
.tour-sp { flex: 1; }
.tour-replay { text-align: center; margin: 22px 0 0; font-size: .85rem; }
.tour-replay a { color: var(--muted); font-weight: 600; display: inline-flex; gap: 6px; align-items: center; }
.tour-replay a:hover { color: var(--accent); }
@media (prefers-reduced-motion: reduce) { .tour-spot, .tour-card { transition: none; } }

/* ===== 15.0: panduan lebih gelap + negara/matawang ===== */
.tour-spot { box-shadow: 0 0 0 9999px rgba(6, 8, 18, .78), 0 0 0 3px var(--accent); }
.tour.dim .tour-block { background: rgba(6, 8, 18, .78); }
.cty-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 14px; padding: 10px 12px; border: 1px solid var(--line, rgba(128,128,128,.25)); border-radius: 12px; font-size: .92rem; }
.cty-bar span { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cty-bar select { padding: 6px 10px; border-radius: 10px; border: 1px solid var(--line, rgba(128,128,128,.35)); background: var(--card, transparent); color: inherit; font: inherit; max-width: 100%; }
.tour { pointer-events: none; }
.tour-block, .tour-card { pointer-events: auto; }

/* ===== 17.0: starter items ===== */
.starter-box { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 14px; margin-top: 16px; padding: 14px; border: 1px dashed var(--line, rgba(128,128,128,.4)); border-radius: 16px; }
.starter-txt { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.starter-txt b { display: inline-flex; gap: 6px; align-items: center; }
.starter-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.starter-pop { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; padding: 16px; }
.starter-pop[hidden] { display: none; }
.starter-sheet { position: relative; width: min(100%, 560px); max-height: 92vh; overflow: auto; background: var(--card); border: 1px solid var(--line); border-radius: 24px; padding: 24px 22px 20px; box-shadow: var(--shadow-lg, 0 30px 70px -20px rgba(0,0,0,.45)); animation: rise .35s var(--ease-out) both; }
.starter-sheet h2 { font-size: 1.2rem; letter-spacing: -.02em; margin: 0 0 6px; }
.st-set { border: 0; padding: 0; margin: 16px 0 0; min-width: 0; }
.st-set[hidden] { display: none; }
.st-set legend { font-weight: 700; margin-bottom: 8px; padding: 0; }
.st-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.st-opt { position: relative; cursor: pointer; }
.st-opt input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.st-opt span { display: block; padding: 9px 14px; border: 1px solid var(--line, rgba(128,128,128,.35)); border-radius: 999px; background: var(--card); }
.st-opt input:checked + span { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); }
.st-opt input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.st-range { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.st-count { margin: 16px 0 6px; font-weight: 700; }
.st-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.st-setprice { color: var(--accent); }
@media (max-width: 640px) { .starter-pop { align-items: end; padding: 0; } .starter-sheet { width: 100%; border-radius: 24px 24px 0 0; padding-bottom: calc(20px + env(safe-area-inset-bottom)); } .st-range { grid-template-columns: 1fr; } }

/* ===== 18.0: panduan Shopping Cart ===== */
.cg { position: fixed; inset: 0; z-index: 1300; pointer-events: none; }
.cg-b { position: fixed; background: rgba(6, 8, 18, .78); pointer-events: auto; }
.cg-ring { position: fixed; display: none; border-radius: 14px; box-shadow: 0 0 0 3px var(--accent); pointer-events: none; transition: left .2s, top .2s, width .2s, height .2s; }
.cg-card { position: fixed; pointer-events: auto; background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: 20px; padding: 16px 16px 14px; box-shadow: var(--shadow-lg, 0 30px 70px -20px rgba(0,0,0,.45)); }
.cg-count { font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); margin-bottom: 6px; }
.cg-count:empty { display: none; }
.cg-text { margin: 0 0 12px; line-height: 1.5; font-weight: 600; font-size: .94rem; }
.cg-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cg-sp { flex: 1; }
.cg-chip { position: fixed; z-index: 90; left: 12px; right: 12px; bottom: 12px; max-width: 460px; margin: 0 auto; display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-lg, 0 20px 50px -20px rgba(0,0,0,.45)); font-size: .88rem; font-weight: 600; }
.cg-chip span { flex: 1; min-width: 0; }

/* ===== 18.1 ===== */
.cat-grid > .cart-cat { display: flex; flex-direction: column; }   /* hover biru memenuhi seluruh kotak */
.cat-grid > .cart-cat > .cat-open { flex: 1 1 auto; }
.h1-ic { display: inline-grid; vertical-align: middle; margin-right: 4px; }
.icon-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); gap: 8px; margin: 6px 0 4px; }
.ip-opt { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 48px; border: 1px solid var(--line); border-radius: 14px; cursor: pointer; background: var(--card); }
.ip-opt input { position: absolute; opacity: 0; inset: 0; cursor: pointer; margin: 0; }
.ip-opt .ip-ic { display: grid; place-items: center; color: var(--ink); }
.ip-opt em { font-size: .66rem; font-style: normal; font-weight: 700; color: var(--muted); }
.ip-opt:hover { background: var(--accent-soft); }
.ip-opt:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); background: var(--accent-soft); }
.ip-opt:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.ip-auto { grid-column: span 2; flex-direction: row; gap: 8px; }
.setup-sheet { text-align: left; }
.setup-sheet h2, .setup-sheet > p { text-align: center; }
.setup-sheet .offer-ic { display: grid; margin: 0 auto; }
.setup-sheet .field { display: block; margin: 10px 0 0; }
.setup-sheet .field span { display: block; font-weight: 700; font-size: .85rem; margin-bottom: 4px; }
.setup-sheet .field input { width: 100%; box-sizing: border-box; }
.setup-sheet .field small { display: block; margin-top: 4px; }
.su-error { color: #c62828; font-weight: 700; font-size: .88rem; margin: 10px 0 0; text-align: center; }
.zip-bar { height: 10px; border-radius: 99px; background: var(--line-2, rgba(128,128,128,.25)); overflow: hidden; margin: 12px 0 4px; }
.zip-bar i { display: block; height: 100%; width: 0; background: var(--accent); border-radius: 99px; transition: width .3s; }

/* ===== 19.0: Quick Sale ===== */
.qs { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; align-items: start; }
.qs-main { min-width: 0; }
.qs-find { display: flex; align-items: center; gap: 8px; padding: 0 14px; height: 46px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); margin-bottom: 12px; }
.qs-find input { flex: 1; border: 0; background: transparent; color: inherit; font: inherit; outline: none; min-width: 0; }
.qs-tabs { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 10px; scrollbar-width: thin; }
.qs-tab { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px; border: 1px solid var(--line); border-radius: 99px; background: var(--card); color: var(--ink); font: inherit; font-weight: 700; cursor: pointer; white-space: nowrap; }
.qs-tab.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.qs-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.qs-item { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 8px; min-height: 92px; padding: 12px; text-align: left; border: 1px solid var(--line); border-radius: 16px; background: var(--card); color: var(--ink); font: inherit; cursor: pointer; transition: transform .1s, background .2s; -webkit-tap-highlight-color: transparent; }
.qs-item:hover { background: var(--accent-soft); }
.qs-item:active { transform: scale(.97); }
.qs-item .qn { font-weight: 700; line-height: 1.25; word-break: break-word; }
.qs-item b { color: var(--accent); font-size: .95rem; }
.qs-set { font-style: normal; font-size: .75rem; color: var(--muted); font-weight: 700; }
.qs-item .qc { position: absolute; top: 8px; right: 8px; min-width: 24px; height: 24px; padding: 0 6px; display: grid; place-items: center; border-radius: 99px; background: var(--accent); color: #fff; font-style: normal; font-size: .8rem; font-weight: 800; }
.qs-none { grid-column: 1 / -1; padding: 24px 0; text-align: center; }
.qs-order { position: sticky; top: 12px; }
.qs-empty { text-align: center; padding: 14px 0; }
.qs-line { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line-2, rgba(128,128,128,.2)); }
.ql-n { display: flex; flex-direction: column; font-weight: 700; min-width: 0; word-break: break-word; }
.ql-q { display: inline-flex; align-items: center; gap: 8px; }
.ql-t { min-width: 76px; text-align: right; }
.qs-total { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 0 8px; font-size: 1.05rem; }
.qs-total b { font-size: 1.5rem; }
.qs-staff { display: flex; flex-direction: column; gap: 4px; margin: 6px 0; font-size: .85rem; font-weight: 700; }
.qs-staff select { height: 42px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); color: inherit; padding: 0 10px; font: inherit; }
.qs-pay-t { margin: 8px 0 6px; }
.qs-pay { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.qs-pbtn { height: 54px; font-size: 1rem; font-weight: 800; }
.qs-pbtn:disabled { opacity: .45; }
.qs-bar { position: fixed; z-index: 60; left: 12px; right: 12px; bottom: 84px; max-width: 520px; margin: 0 auto; display: none; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px 10px 16px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-lg, 0 20px 50px -20px rgba(0,0,0,.45)); font-weight: 800; }
.qs-recent { margin-top: 18px; }
.qs-row { display: grid; grid-template-columns: 60px 1fr auto auto auto auto auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line-2, rgba(128,128,128,.2)); }
@media (max-width: 900px) {
  .qs { grid-template-columns: 1fr; }
  .qs-order { position: static; }
  .qs-bar:not([hidden]) { display: flex; }
  .qs-items { grid-template-columns: repeat(2, 1fr); }
}

/* ===== 19.1 ===== */
.pillnav a { gap: 0; }
.qs-warn { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 14px; padding: 12px 14px; border-radius: 18px; background: color-mix(in srgb, #f59e0b 14%, var(--card)); border: 1px solid color-mix(in srgb, #f59e0b 40%, transparent); }
.qs-warn > svg { flex: none; color: #d97706; }
.qs-warn span { flex: 1 1 200px; font-size: .9rem; line-height: 1.45; }
.sd-sheet { max-height: 92vh; overflow: auto; }
.sd-lines { margin: 10px 0 6px; text-align: left; border-top: 1px solid var(--line); }
.sd-l, .sd-m, .sd-tot { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; }
.sd-l { border-bottom: 1px dashed var(--line); font-size: .95rem; }
.sd-tot { font-size: 1.35rem; padding: 12px 0 8px; }
.sd-tot b { letter-spacing: -.02em; }
.sd-meta { text-align: left; padding-bottom: 6px; font-size: .88rem; }
.sd-meta .sd-m { padding: 3px 0; }
.sd-meta span { color: var(--muted); }
.sd-ok { background: linear-gradient(135deg, #16a34a, #15803d); }
.sd-sheet .offer-actions .btn { height: 52px; font-size: 1.05rem; }
.ss-step { display: block; margin-bottom: 4px; }
.ss-in { width: 100%; height: 46px; margin-top: 8px; text-align: center; font-size: 1.05rem; letter-spacing: .08em; text-transform: uppercase; border: 1px solid var(--line); border-radius: 14px; background: var(--card); color: inherit; }
.pillnav a { white-space: nowrap; padding: 9px 16px; }

/* ===== 19.2: warna tema ===== */
:root[data-accent="teal"] { --accent: #0d9488; --accent-hi: #2dd4bf; --accent-lo: #0f766e; --accent-soft: #e0f5f2; --accent-rgb: 13 148 136; --grad: linear-gradient(135deg, #2dd4bf 0%, #0d9488 52%, #0f766e 100%); }
:root[data-accent="teal"][data-theme="dark"] { --accent-soft: #0c2220; }
@media (prefers-color-scheme: dark) { :root[data-accent="teal"]:not([data-theme="light"]) { --accent-soft: #0c2220; } }
:root[data-accent="green"] { --accent: #16a34a; --accent-hi: #4ade80; --accent-lo: #15803d; --accent-soft: #e3f6ea; --accent-rgb: 22 163 74; --grad: linear-gradient(135deg, #4ade80 0%, #16a34a 52%, #15803d 100%); }
:root[data-accent="green"][data-theme="dark"] { --accent-soft: #0e2217; }
@media (prefers-color-scheme: dark) { :root[data-accent="green"]:not([data-theme="light"]) { --accent-soft: #0e2217; } }
:root[data-accent="orange"] { --accent: #ea580c; --accent-hi: #fb923c; --accent-lo: #c2410c; --accent-soft: #fdeedd; --accent-rgb: 234 88 12; --grad: linear-gradient(135deg, #fb923c 0%, #ea580c 52%, #c2410c 100%); }
:root[data-accent="orange"][data-theme="dark"] { --accent-soft: #2a1708; }
@media (prefers-color-scheme: dark) { :root[data-accent="orange"]:not([data-theme="light"]) { --accent-soft: #2a1708; } }
:root[data-accent="red"] { --accent: #dc2626; --accent-hi: #f87171; --accent-lo: #b91c1c; --accent-soft: #fde8e8; --accent-rgb: 220 38 38; --grad: linear-gradient(135deg, #f87171 0%, #dc2626 52%, #b91c1c 100%); }
:root[data-accent="red"][data-theme="dark"] { --accent-soft: #2b1111; }
@media (prefers-color-scheme: dark) { :root[data-accent="red"]:not([data-theme="light"]) { --accent-soft: #2b1111; } }
:root[data-accent="pink"] { --accent: #db2777; --accent-hi: #f472b6; --accent-lo: #be185d; --accent-soft: #fde7f1; --accent-rgb: 219 39 119; --grad: linear-gradient(135deg, #f472b6 0%, #db2777 52%, #be185d 100%); }
:root[data-accent="pink"][data-theme="dark"] { --accent-soft: #2b1020; }
@media (prefers-color-scheme: dark) { :root[data-accent="pink"]:not([data-theme="light"]) { --accent-soft: #2b1020; } }
:root[data-accent="purple"] { --accent: #7c3aed; --accent-hi: #a78bfa; --accent-lo: #6d28d9; --accent-soft: #efe8fe; --accent-rgb: 124 58 237; --grad: linear-gradient(135deg, #a78bfa 0%, #7c3aed 52%, #6d28d9 100%); }
:root[data-accent="purple"][data-theme="dark"] { --accent-soft: #1c1233; }
@media (prefers-color-scheme: dark) { :root[data-accent="purple"]:not([data-theme="light"]) { --accent-soft: #1c1233; } }
:root[data-accent="slate"] { --accent: #475569; --accent-hi: #94a3b8; --accent-lo: #334155; --accent-soft: #e8ecf1; --accent-rgb: 71 85 105; --grad: linear-gradient(135deg, #94a3b8 0%, #475569 52%, #334155 100%); }
:root[data-accent="slate"][data-theme="dark"] { --accent-soft: #151a21; }
@media (prefers-color-scheme: dark) { :root[data-accent="slate"]:not([data-theme="light"]) { --accent-soft: #151a21; } }
@media (prefers-color-scheme: dark) { :root[data-accent]:not([data-theme="light"]) .tile-plan { filter: none; } }
.acc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px; }
.acc-opt { position: relative; cursor: pointer; }
.acc-opt input { position: absolute; opacity: 0; inset: 0; }
.acc-box { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 8px; border: 1.5px solid var(--line); border-radius: 16px; font-size: .8rem; font-weight: 650; transition: border-color .2s, box-shadow .2s; }
.acc-box i { width: 30px; height: 30px; border-radius: 50%; display: block; box-shadow: inset 0 0 0 2px rgba(255,255,255,.35); }
.acc-opt input:checked + .acc-box { border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent); }
.acc-opt input:focus-visible + .acc-box { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ===== 19.2: susun semula kotak ===== */
.rb-hint { margin: -10px 0 14px; }
.is-edit .tile { cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; transition: none; animation: rb-wiggle .45s ease-in-out infinite alternate; outline: 2px dashed color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: 2px; }
.is-edit a.tile:hover { transform: none; }
.is-edit .tile * { pointer-events: none; }
.is-edit .tile.rb-drag { z-index: 50; cursor: grabbing; animation: none; box-shadow: var(--shadow-lg); opacity: .95; position: relative; }
.is-edit .tile.is-empty { display: flex; }
@keyframes rb-wiggle { from { rotate: -.35deg; } to { rotate: .35deg; } }
@media (prefers-reduced-motion: reduce) { .is-edit .tile { animation: none; } }
html.rb-on .dock, html.rb-on .qs-bar { }

.qe-sel { width: 100%; height: 44px; margin: 8px 0; padding: 0 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); color: inherit; }
#qsEdit .qs-staff { display: grid; gap: 4px; margin-top: 8px; }
#qsEdit .qs-staff select { height: 44px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); color: inherit; padding: 0 12px; }

/* ===== 19.3 ===== */
.dash-row5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1099px) { .dash-row5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 559px) { .dash-row5 { grid-template-columns: 1fr; } }
.fb-form { display: grid; gap: 12px; }
.fb-kinds { display: flex; gap: 8px; flex-wrap: wrap; }
.fb-kind { position: relative; cursor: pointer; }
.fb-kind input { position: absolute; opacity: 0; inset: 0; }
.fb-kind span { display: inline-block; padding: 9px 16px; border: 1.5px solid var(--line); border-radius: 999px; font-weight: 650; font-size: .88rem; }
.fb-kind input:checked + span { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.fb-kind input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.fb-form textarea { width: 100%; min-height: 150px; padding: 14px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); color: inherit; font: inherit; resize: vertical; }
.fb-left { font-size: .85rem; }
.fb-item { padding: 14px 0; border-bottom: 1px solid var(--line-2, rgba(128,128,128,.2)); }
.fb-item:last-child { border-bottom: 0; }
.fb-meta { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 6px; font-size: .8rem; }
.fb-body { white-space: pre-wrap; word-break: break-word; margin: 0; line-height: 1.55; }
.fb-reply { margin-top: 8px; padding: 10px 12px; border-radius: 14px; background: var(--accent-soft); font-size: .92rem; white-space: pre-wrap; }
.fb-admin-form { display: grid; gap: 8px; margin-top: 10px; }
.fb-admin-form textarea { width: 100%; min-height: 80px; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: inherit; font: inherit; }

/* ===== 19.3b ===== */
.qs-recent .card-head h2, .qs-order .card-head h2 { display: flex; align-items: center; gap: 8px; }
.qs-recent .card-head h2 svg, .qs-order .card-head h2 svg { flex: none; }
.qs-row { grid-template-columns: 84px 1fr auto auto auto auto auto; }

/* ===== 19.5: pilihan kaedah bayar ===== */
.pay-choice { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 640px) { .pay-choice { grid-template-columns: 1fr; } }
.pay-opt { display: flex; flex-direction: column; gap: 14px; padding: 22px; }
.pay-opt .btn { margin-top: auto; }

/* ---- 20.0: kuota, resit, sejarah bayaran ---- */
.quota-note { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin: 0 0 16px; padding: 14px 18px; border-radius: 18px; background: color-mix(in srgb, var(--accent, #2f6bff) 9%, var(--card, #fff)); border: 1px solid color-mix(in srgb, var(--accent, #2f6bff) 25%, transparent); }
.quota-note[hidden] { display: none; }
.quota-note div { display: flex; flex-direction: column; gap: 2px; }
.quota-note b { font-size: 1.05rem; letter-spacing: -.01em; }
.quota-note span { font-size: .85rem; color: var(--muted); }
.quota-note.full { background: color-mix(in srgb, #dc2626 9%, var(--card, #fff)); border-color: color-mix(in srgb, #dc2626 30%, transparent); }
.receipt { padding: 24px; }
.rc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--line-2); }
.rc-head > div { display: flex; flex-direction: column; gap: 2px; }
.rc-head b { font-size: 1.15rem; }
.rc-paid { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; letter-spacing: .08em; }
.rc-list { margin: 0; }
.rc-list > div { display: flex; justify-content: space-between; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--line-2); }
.rc-list dt { color: var(--muted); font-weight: 600; }
.rc-list dd { margin: 0; text-align: right; font-weight: 700; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; word-break: break-word; }
.rc-list dd small { font-weight: 500; }
.rc-list .rc-total { border-bottom: 0; font-size: 1.25rem; }
.rc-list .rc-total dt { color: inherit; font-weight: 800; }
.rc-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.pay-hist td, .pay-hist th { white-space: nowrap; }
#payHistory { overflow-x: auto; }
.stat .value.split { display: flex; flex-direction: column; gap: 4px; font-size: 1.1rem; }
.stat .value.split b { font-size: 1.6rem; letter-spacing: -.03em; }
@media (max-width: 640px) { .quota-note { padding: 12px 14px; } .receipt { padding: 18px; } }

/* ---- 21.0: filter specialization + setup wizard ---- */
.spec-filter { display: grid; gap: 10px; margin: 0 0 14px; }
.spec-search { display: flex; align-items: center; gap: 8px; padding: 0 12px; border: 1px solid var(--line, #e3e6ee); border-radius: 12px; background: var(--card, #fff); }
.spec-search input { flex: 1; border: 0; outline: 0; background: transparent; padding: 11px 0; font: inherit; color: inherit; min-width: 0; }
.spec-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.spec-chip { border: 1px solid var(--line, #e3e6ee); background: var(--card, #fff); color: inherit; border-radius: 999px; padding: 7px 14px; font: inherit; font-size: 14px; cursor: pointer; }
.spec-chip.on { background: var(--accent, #2563eb); border-color: var(--accent, #2563eb); color: #fff; }
.wz { max-width: 640px; margin: 0 auto; padding-bottom: 40px; }
.wz-top { margin: 6px 0 14px; display: grid; gap: 8px; }
.wz-bar { height: 8px; border-radius: 99px; background: var(--line, #e3e6ee); overflow: hidden; }
.wz-bar i { display: block; height: 100%; background: var(--accent, #2563eb); border-radius: 99px; transition: width .4s ease; }
.wz-card h1 { margin: 0 0 6px; font-size: 24px; }
.wz-lang { display: grid; gap: 12px; margin: 18px 0; }
.wz-big { font-size: 20px; padding: 18px; }
.wz-specs { display: grid; gap: 10px; margin: 14px 0; }
.wz-spec { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--line, #e3e6ee); border-radius: 14px; cursor: pointer; }
.wz-spec[hidden] { display: none; }
.wz-spec span { display: grid; gap: 2px; }
.wz-spec:has(input:checked) { border-color: var(--accent, #2563eb); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent, #2563eb) 25%, transparent); }
.wz-nav { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; margin-top: 18px; }
.wz-nav .btn-quiet { margin-right: auto; }
.wz-cat { margin: 14px 0 4px; font-size: 14px; color: var(--muted, #6b7280); }
.wz-price { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line, #e3e6ee); }
.wz-price span { flex: 1; min-width: 0; }
.wz-price input[name="price[]"] { width: 110px; text-align: right; }
.wz-sum { list-style: none; padding: 0; margin: 12px 0; display: grid; gap: 6px; }
.wz-offer { margin: 14px 0; padding: 14px; border-radius: 14px; background: color-mix(in srgb, var(--accent, #2563eb) 10%, transparent); }
.wz-offer h2 { margin: 0 0 6px; font-size: 18px; }
.wz-resume { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 12px 0; }
.wz-resume-txt { display: grid; flex: 1; min-width: 180px; }
.wz-resume-act { display: flex; gap: 8px; align-items: center; }
.wz-resume-act form { margin: 0; }

/* ---- 21.2: resit WhatsApp + padam Quick Sale ---- */
.qwa { margin: 4px 0 8px; text-align: center; }
.qwa-open { display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; color: var(--muted); font: inherit; font-size: .86rem; padding: 6px 10px; border-radius: 999px; cursor: pointer; }
.qwa-open:hover { background: var(--line-2, rgba(128,128,128,.12)); color: inherit; }
.qwa-form { display: grid; gap: 8px; margin-top: 6px; }
.qwa-form input { width: 100%; height: 44px; text-align: center; border: 1px solid var(--line); border-radius: 14px; background: var(--card); color: inherit; font: inherit; }
.qwa-btns { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.qwa-err { color: var(--red); margin: 4px 0 0; min-height: 1.2em; }
.qs-wa { color: var(--muted); }
.qs-wa[data-has="1"] { color: #16a34a; }
.qd-ic { background: linear-gradient(135deg, #ef4444, #b91c1c); }
.qd-info { display: flex; justify-content: space-between; gap: 12px; margin: 10px 0 4px; padding: 10px 14px; border-radius: 14px; background: var(--line-2, rgba(128,128,128,.1)); font-size: .95rem; }
.btn-danger-solid { background: linear-gradient(135deg, #ef4444, #b91c1c); color: #fff; border-color: transparent; }
.btn-danger-solid:hover { filter: brightness(1.06); transform: translateY(-1px); }
.btn-danger-solid:disabled { opacity: .6; }
.qd-ic { display: grid; margin-left: auto; margin-right: auto; }

.qs-prac { margin: 0 0 6px; padding: 6px 12px; border-radius: 999px; background: color-mix(in srgb, #f59e0b 16%, transparent); color: #b45309; font-size: .85rem; display: inline-block; }

/* 22.0: halaman pengesahan e-mel - sembunyikan menu (pengguna belum boleh guna apl) */
body.page-verify .dock, body.page-verify .pillnav, body.page-verify .avatar { display: none; }

/* 22.1: kategori yang ada item belum diberi harga */
.cart-cat.cat-unpriced { box-shadow: 0 0 0 2px #f59e0b inset, var(--shadow, 0 1px 3px rgba(0,0,0,.08)); }
.pill.pill-warn { display: inline-flex; align-items: center; gap: 5px; background: #fef3c7; color: #92400e; font-weight: 700; }
:root[data-theme="dark"] .pill.pill-warn { background: #4a3410; color: #fcd34d; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pill.pill-warn { background: #4a3410; color: #fcd34d; } }

/* 22.1: Payment Gateway (Toyyibpay + Stripe) */
.gw-jump { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 auto 12px; }
.gw-jump .pill { text-decoration: none; color: inherit; }
.gw-jump .pill b { margin-left: 4px; }
#toyyibpay, #stripe { scroll-margin-top: 90px; }

/* ===== 23.0: footer, halaman dokumen, landing, admin Statistics / Live / Data / SEO ===== */
.site-foot { margin: 56px auto 0; max-width: 1100px; padding: 0 4px; }
.sf-in { display: grid; grid-template-columns: 1.6fr repeat(3, minmax(0, 1fr)); gap: 28px; padding: 32px 0 24px; border-top: 1px solid var(--line); }
.sf-brand p { margin: 10px 0 0; color: var(--muted); font-size: .86rem; line-height: 1.55; max-width: 300px; }
.sf-logo { display: inline-flex; }
.sf-logo .logo-d { display: none; }
:root[data-theme="dark"] .sf-logo .logo-l { display: none; }
:root[data-theme="dark"] .sf-logo .logo-d { display: block; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sf-logo .logo-l { display: none; } :root:not([data-theme="light"]) .sf-logo .logo-d { display: block; } }
.sf-col { display: grid; gap: 9px; align-content: start; }
.sf-col h3 { font-size: .74rem; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); margin: 0 0 2px; }
.sf-col a { color: var(--ink-2); font-size: .88rem; font-weight: 600; width: fit-content; }
.sf-col a:hover { color: var(--accent); }
.sf-bar { display: flex; justify-content: space-between; gap: 8px 18px; flex-wrap: wrap; padding: 16px 0 8px; border-top: 1px solid var(--line); color: var(--muted); font-size: .78rem; font-weight: 600; }
@media (max-width: 820px) { .sf-in { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sf-brand { grid-column: 1 / -1; } }
@media (max-width: 899px) { body.has-nav .site-foot { margin-bottom: 78px; } }

.doc { max-width: 780px; margin: 0 auto; padding: 10px 0 0; }
.doc-head { margin-bottom: 18px; }
.doc-head h1 { font-size: clamp(1.7rem, 4vw, 2.4rem); letter-spacing: -.03em; }
.doc-sec { margin-top: 26px; }
.doc-sec h2 { font-size: 1.12rem; margin: 0 0 8px; }
.doc-sec p { color: var(--ink-2); line-height: 1.7; margin: 0 0 10px; font-size: .94rem; }
.doc-sec ul { margin: 0 0 10px; padding-left: 20px; display: grid; gap: 6px; color: var(--ink-2); font-size: .94rem; line-height: 1.6; }
.doc-cta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 28px; }
.ct-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.ct-form, .ct-side { padding: 22px; }
.ct-form form { display: grid; gap: 12px; }
.ct-side h2 { font-size: 1.05rem; margin: 0 0 12px; }
.ct-list { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 14px; }
.ct-list li { display: flex; gap: 12px; align-items: flex-start; }
.ct-list small { display: block; color: var(--muted); font-weight: 700; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; }
.ct-list a { font-weight: 700; word-break: break-all; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 760px) { .ct-grid { grid-template-columns: 1fr; } }
.err-page { max-width: 460px; margin: 40px auto; padding: 36px 24px; text-align: center; display: grid; gap: 10px; justify-items: center; }
.err-code { font-size: 3.6rem; font-weight: 800; letter-spacing: -.05em; color: var(--accent); line-height: 1; }
.err-page p { margin: 0 0 8px; }

/* landing /mula */
body.page-landing .pillnav, body.page-landing .dock { display: none; }
body.page-landing { padding-bottom: 84px; }
.lp-grid3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.chip.red { background: var(--red-soft); color: var(--red); }
.lp-tags { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.lp-tags li { padding: 9px 16px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); font-weight: 700; font-size: .88rem; }
.lp-faq { display: grid; gap: 10px; max-width: 760px; }
.lp-faq details { padding: 0; }
.lp-faq summary { cursor: pointer; padding: 16px 18px; font-weight: 750; list-style: none; display: flex; justify-content: space-between; gap: 10px; }
.lp-faq summary::-webkit-details-marker { display: none; }
.lp-faq summary::after { content: "+"; color: var(--accent); font-weight: 800; font-size: 1.2rem; line-height: 1; }
.lp-faq details[open] summary::after { content: "\2212"; }
.lp-faq p { margin: 0; padding: 0 18px 16px; color: var(--muted); line-height: 1.6; font-size: .92rem; }
.lp-legal { text-align: center; color: var(--muted); font-size: .78rem; margin: 22px 0 0; }
.lp-legal a { text-decoration: underline; }
.lp-sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--card) 92%, transparent); backdrop-filter: blur(10px); border-top: 1px solid var(--line); display: none; }
@media (max-width: 760px) { .lp-sticky { display: block; } .lp-grid3 { grid-template-columns: 1fr; } }
@media (min-width: 761px) { body.page-landing { padding-bottom: 0; } }

/* admin 23.0 */
.stat-row .fin-card b { font-size: 1.3rem; }
.st-h { font-size: .8rem; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); margin: 18px 0 10px; }
.st-chart { width: 100%; height: 150px; display: block; }
.st-rect { fill: var(--accent); }
.st-rect:hover { opacity: .75; }
.st-base { fill: var(--line); }
.st-axis { display: flex; justify-content: space-between; color: var(--muted); font-size: .74rem; font-weight: 650; margin-top: 4px; }
.st-bars { display: grid; gap: 9px; }
.st-bar { display: grid; grid-template-columns: minmax(80px, 1.1fr) 2fr auto; gap: 10px; align-items: center; font-size: .84rem; font-weight: 600; }
.st-bar i { display: block; height: 8px; border-radius: 6px; background: var(--card-2); overflow: hidden; }
.st-bar u { display: block; height: 100%; border-radius: 6px; background: var(--accent); text-decoration: none; }
.st-two { gap: 14px; }
.live-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--green); margin-right: 8px; box-shadow: 0 0 0 0 rgba(47,158,110,.5); animation: ogPulse 1.8s infinite; }
@keyframes ogPulse { 70% { box-shadow: 0 0 0 7px rgba(47,158,110,0); } 100% { box-shadow: 0 0 0 0 rgba(47,158,110,0); } }
.dc-btns { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.dc-btns form { margin: 0; }
.dc-counts { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
.dc-counts div { background: var(--card-2); border-radius: 14px; padding: 10px 12px; display: grid; gap: 2px; }
.dc-form { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin: 8px 0; }
.dc-form .field { margin: 0; max-width: 160px; }
.dc-list { margin: 6px 0 10px; padding-left: 18px; font-size: .88rem; display: grid; gap: 3px; }
.dc-msg { border-top: 1px solid var(--line); padding: 12px 0; display: grid; gap: 6px; }
.dc-msg:first-child { border-top: 0; }
.dc-msg-h { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.dc-msg p { margin: 0; font-size: .92rem; line-height: 1.55; }
.seo-pg { border-top: 1px solid var(--line); padding: 10px 0; }
.seo-pg summary { cursor: pointer; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.seo-lang { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 10px; }
.seo-lang h3 { font-size: .8rem; margin: 0 0 6px; color: var(--muted); }
.seo-lang .field { margin-bottom: 8px; }
@media (max-width: 700px) { .seo-lang { grid-template-columns: 1fr; } }
.seo-steps { display: grid; gap: 8px; padding-left: 20px; line-height: 1.55; font-size: .92rem; margin: 0 0 14px; }
.seo-row-h { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.seo-row-h h2 { margin: 0; }
.seo-act { display: flex; gap: 6px; justify-content: flex-end; margin: 0; }
.seo-noise { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
tr.is-res { opacity: .55; }
.sf-logo { align-items: center; gap: 10px; } .sf-name { font-size: 1.05rem; letter-spacing: -.02em; }

/* ===== 23.1: kotak bertindan (Live chat + Inbox) ===== */
.tile-stack { display: grid; grid-template-rows: 1fr 1fr; gap: 14px; min-width: 0; }
.tile-stack .tile-mini { min-height: 0; padding-block: 12px; }
.tile-stack .tile-mini .tile-txt .muted { display: none; }
.tile-stack .tile-mini .tile-txt h2 { font-size: 1rem; margin: 0; }
.is-edit .tile-stack { cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; outline: 2px dashed color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: 2px; animation: rb-wiggle .45s ease-in-out infinite alternate; }
.is-edit .tile-stack * { pointer-events: none; }
.is-edit .tile-stack .tile { outline: 0; animation: none; }
.is-edit .tile-stack.rb-drag { z-index: 50; cursor: grabbing; animation: none; opacity: .95; position: relative; }
.staff-chip a.sig { text-decoration: none; }

/* ===== 23.2: warna kuning ===== */
:root[data-accent="yellow"] { --accent: #ca8a04; --accent-hi: #facc15; --accent-lo: #a16207; --accent-soft: #fef6d6; --accent-rgb: 202 138 4; --grad: linear-gradient(135deg, #facc15 0%, #ca8a04 52%, #a16207 100%); }
:root[data-accent="yellow"][data-theme="dark"] { --accent-soft: #2a2208; }
@media (prefers-color-scheme: dark) { :root[data-accent="yellow"]:not([data-theme="light"]) { --accent-soft: #2a2208; } }

/* ===== 23.2: tarikh 'From' dan 'To' (mobile) ===== */
@media (max-width: 699px) {
  .f-dates { display: flex; align-items: center; gap: 8px; width: 100%; max-width: none; }
  .f-dates > span.muted { flex: 0 0 auto; }
  .f-dates > .dp-btn, .filters .f-dates .dp-btn, .field .f-dates .dp-btn { flex: 1 1 0; min-width: 0; width: auto; min-height: 42px; padding: 8px 12px; font-size: 13.5px; }
  .f-dates > input[type=date][hidden], .f-dates > input.dp-hidden { display: none; }
  .data-range .f-dates { max-width: none; }
  .data-range .f-dates input { min-width: 0; }
}
/* ===== 23.3: Dashboard — tajuk di sebelah ikon, kotak nipis, jarak sama ===== */
#dashTiles { --dg: 14px; }
#dashTiles .dash-row { gap: var(--dg); margin-bottom: var(--dg); }
#dashTiles .tile:not(.tile-cta):not(.tile-mini) { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: 14px; row-gap: 10px; align-items: center; align-content: start; min-height: 0; padding: 18px; }
#dashTiles .tile:not(.tile-cta):not(.tile-mini) .lb-icon { grid-column: 1; grid-row: 1; }
#dashTiles .tile:not(.tile-cta):not(.tile-mini) .tile-txt { display: contents; }
#dashTiles .tile:not(.tile-cta):not(.tile-mini) .tile-txt h2 { grid-column: 2; grid-row: 1; margin: 0; font-size: 1.02rem; line-height: 1.22; }
#dashTiles .tile:not(.tile-cta):not(.tile-mini) .tile-txt .muted, #dashTiles .tile-plan .tile-txt > span { grid-column: 1 / -1; grid-row: 2; align-self: start; }
#dashTiles .tile:not(.tile-cta):not(.tile-mini) .tile-end { grid-column: 1 / -1; grid-row: 3; align-self: end; width: 100%; }
#dashTiles .tile-stack { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: 1fr 1fr; gap: 10px; min-width: 0; }
#dashTiles .tile-stack .tile-mini { display: flex; flex-direction: row; align-items: center; gap: 12px; min-height: 0; min-width: 0; padding: 12px 16px; }
#dashTiles .tile-stack .tile-mini .lb-icon { width: 40px; height: 40px; }
#dashTiles .tile-stack .tile-mini .tile-txt { flex: 1 1 auto; width: auto; min-width: 0; }
#dashTiles .tile-stack .tile-mini .tile-txt h2 { margin: 0; font-size: .98rem; line-height: 1.2; }
#dashTiles .tile-stack .tile-mini .tile-txt .muted { display: none; }
#dashTiles .tile-stack .tile-mini .tile-end { width: auto; flex: none; gap: 6px; }
#dashTiles .tile-stack .tile-mini.is-locked .tile-end .pill { display: none; }
@media (max-width: 899px) {
  #dashTiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  #dashTiles > .dash-row { display: contents; }
  #dashTiles [data-tile] { grid-column: span 1; min-width: 0; margin: 0; }
  #dashTiles [data-tile="cta"], #dashTiles [data-tile="plan"], #dashTiles [data-tile="chat"] { grid-column: 1 / -1; }
  #dashTiles [data-tile="cta"] { order: 1; }
  #dashTiles [data-tile="cart"] { order: 2; }
  #dashTiles [data-tile="items"] { order: 3; }
  #dashTiles [data-tile="drawer"] { order: 4; }
  #dashTiles [data-tile="staff"] { order: 5; }
  #dashTiles [data-tile="chat"] { order: 6; }
  #dashTiles [data-tile="plan"] { order: 7; }
  #dashTiles [data-tile="spec"] { order: 8; }
  #dashTiles [data-tile="feedback"] { order: 9; }
  #dashTiles .tile:not(.tile-cta):not(.tile-mini) { padding: 14px; column-gap: 10px; row-gap: 8px; }
  #dashTiles .tile:not(.tile-cta):not(.tile-mini) .lb-icon { width: 38px; height: 38px; }
  #dashTiles .tile:not(.tile-cta):not(.tile-mini) .tile-txt h2 { font-size: .95rem; }
  #dashTiles .tile .tile-txt .muted { font-size: .78rem; line-height: 1.4; }
  #dashTiles .tile .tile-end .pill { display: inline-flex; }
  #dashTiles .tile-stack { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; gap: 12px; }
  #dashTiles .tile-stack .tile-mini { padding: 10px 12px; gap: 8px; }
  #dashTiles .tile-stack .tile-mini .lb-icon { width: 34px; height: 34px; }
  #dashTiles .tile-stack .tile-mini .tile-txt h2 { font-size: .86rem; }
  #dashTiles .tile-stack .tile-mini .tile-badges, #dashTiles .tile-stack .tile-mini .pill { display: none; }
  #dashTiles .tile-stack .tile-mini .tile-end .icon { width: 15px; height: 15px; }
  #dashTiles .tile-cta { min-height: 0; }
}
#dashTiles .tile-stack .tile-mini .live-btn { font-size: 0; gap: 0; height: auto; padding: 5px; }
#dashTiles .tile-stack .tile-mini .tile-badges { gap: 4px; }
#dashTiles .tile-stack .tile-mini .tile-txt h2 { white-space: nowrap; }

/* ===== 23.3b: kotak Live chat / Inbox lebih tebal, jarak rapat ===== */
#dashTiles .tile-stack { gap: 6px; align-content: stretch; align-items: stretch; }
#dashTiles .tile-stack .tile-mini { align-self: stretch; height: auto; padding: 18px 18px; }
@media (max-width: 899px) {
  #dashTiles .tile-stack { gap: 12px; }
  #dashTiles .tile-stack .tile-mini { padding: 16px 12px; }
}

/* ===== 23.4b: betulkan kotak Live chat / Inbox (margin .reveal > .card menyebabkan tepi terpotong) ===== */
#dashTiles .tile-stack > .card, .reveal:not(.stats).tile-stack > .card { margin: 0; }
#dashTiles .tile-stack { overflow: visible; }

/* ===== 23.6: lencana mesej baharu pada kotak Live chat / Inbox ===== */
#dashTiles .tile-stack .tile-mini .lb-icon .dot { top: -5px; right: -6px; }
#dashTiles .tile-stack .tile-mini .lb-icon .dot.num { width: auto; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; display: grid; place-items: center; font: 800 .68rem/1 "Manrope", sans-serif; color: #fff; animation: none; }
#dashTiles .tile-stack .tile-mini .tile-end .pill { display: none; }
#dashTiles .tile-stack .tile-mini { position: relative; padding-inline: 16px; }
#dashTiles .tile-stack .tile-mini .live-btn { position: absolute; left: 49px; top: calc(50% + 6px); width: 12px; height: 12px; padding: 0; gap: 0; font-size: 0; border-radius: 50%; box-shadow: 0 0 0 3px var(--card); animation: none; }
#dashTiles .tile-stack .tile-mini .live-btn i { display: none; }
@media (max-width: 899px) { #dashTiles .tile-stack .tile-mini .live-btn { left: 38px; } }

/* ===== 23.6: tarikh From / To (Data Control & Invois, komputer) ===== */
.f-dates .dp-btn, .f-dates .dp-btn span { white-space: nowrap; }
.data-range .f-dates { max-width: 480px; }
.data-range .f-dates > .dp-btn { flex: 1 1 0; min-width: 0; min-height: 46px; }

/* ===== 23.8: butiran kenderaan / sewa di sebelah Bill To ===== */
.billto-row.has-extra { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 32px; align-items: start; }
.billto-row.has-extra .billto { max-width: none; }
.billto-extra .ink { display: block; width: 100%; }
.billto-extra .x-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.billto-extra .x-row > span { flex: none; font-size: .82rem; color: var(--muted); font-weight: 650; }
.billto-extra .x-row .ink { width: auto; flex: 1; text-align: right; min-width: 0; }
@media (max-width: 699px) { .billto-row.has-extra { grid-template-columns: 1fr; } }

/* ===== 23.9: Car Rental — lajur Unit ===== */
@media (min-width: 700px) { .items-head.rental, .item.rental { grid-template-columns: minmax(0, 1fr) 76px 96px 112px 112px 34px; } }
@media (max-width: 699px) { .item.rental { grid-template-columns: 1fr 1fr; } .item.rental .c-total { text-align: right; } .item.rental .c-total .cap { text-align: right; } }
.item .i-unit { width: 100%; padding-left: 8px; cursor: pointer; }
.items-head.rental span:nth-child(4) { padding-left: 8px; }

/* 25.2 - butang dalam dialog tidak terkeluar kotak walau teks panjang */
.og-dlg-act { flex-wrap: wrap; }
.og-dlg-act .btn { flex: 1 1 150px; min-width: 0; max-width: 100%; white-space: normal; text-align: center; line-height: 1.25; }

/* 25.2 - dua line pada huruf G mengikut warna tema */
.brand .logo-x { position: relative; display: block; flex: none; line-height: 0; }
.brand .logo-lines { position: absolute; inset: 0; background: #0054f9; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; pointer-events: none; }
:root[data-accent] .brand .logo-lines { background: var(--accent); }

/* 25.4 - tab Semua / Invois / Quick Sale pada senarai invois */
.inv-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.qs-items { font-size: .9rem; }
td.cust .qs-items { display: inline-block; max-width: 340px; vertical-align: bottom; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 640px) { td.cust .qs-items { max-width: 200px; } }

/* 25.5 - Sales by Item */
.ip-dates { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.ip-dates input { flex: 1; min-width: 0; }
.ip-sum { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 2px; font-size: .95rem; }
.ip-sum b { font-size: 1.25rem; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ip-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px dashed var(--line); }
.ip-rank { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: .78rem; font-weight: 800; background: var(--accent-soft); color: var(--accent); }
.ip-row:nth-child(-n+3) .ip-rank { background: var(--accent); color: #fff; }
.ip-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ip-mid b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .95rem; }
.ip-bar { display: block; height: 5px; border-radius: 99px; background: var(--card-2); overflow: hidden; }
.ip-bar i { display: block; height: 100%; border-radius: 99px; background: var(--grad, var(--accent)); }
.ip-amt { flex: none; font-variant-numeric: tabular-nums; }
.ip-note { margin: 12px 0 8px; }

/* 26.1 - Articles (admin) */
.art-adm { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.art-adm-img { width: 120px; height: 63px; border-radius: 10px; object-fit: cover; flex: none; background: #eef2ff; display: grid; place-items: center; color: #8a97bd; }
.art-adm-t { flex: 1 1 220px; min-width: 0; } .art-adm-t h3 { margin: 0 0 2px; font-size: 1rem; overflow-wrap: anywhere; }
.art-adm-a { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .art-adm-a form { margin: 0; }
.art-tb { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0; } .art-tb button { font: inherit; font-size: .8rem; padding: 5px 10px; border-radius: 8px; border: 1px solid rgba(120,140,200,.4); background: transparent; color: inherit; cursor: pointer; }
.art-ta { min-height: 320px; line-height: 1.55; } .art-save { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }

/* 26.4: bar jadual invois (web view) ikut warna tema */
.paper.view .items-head { background: var(--accent-lo); }