/* Osmanthus Tea POS - oranye logo + navy tua + krem; huruf Plus Jakarta Sans (OFL), dibundel agar jalan offline */
@font-face { font-family:'Plus Jakarta Sans'; font-weight:400; font-style:normal; font-display:swap; src:url(fonts/plus-jakarta-sans-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family:'Plus Jakarta Sans'; font-weight:500; font-style:normal; font-display:swap; src:url(fonts/plus-jakarta-sans-latin-500-normal.woff2) format('woff2'); }
@font-face { font-family:'Plus Jakarta Sans'; font-weight:600; font-style:normal; font-display:swap; src:url(fonts/plus-jakarta-sans-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family:'Plus Jakarta Sans'; font-weight:700; font-style:normal; font-display:swap; src:url(fonts/plus-jakarta-sans-latin-700-normal.woff2) format('woff2'); }
@font-face { font-family:'Plus Jakarta Sans'; font-weight:800; font-style:normal; font-display:swap; src:url(fonts/plus-jakarta-sans-latin-800-normal.woff2) format('woff2'); }

:root {
  --navy:#10244A; --navy2:#1B3A6B; --navy-soft:#E6ECF6;
  --org:#F28A0C; --org-d:#A85A00; --org-soft:#FFF1DC; --org-mid:#F9D3A0;
  --bg:#FBF8F3; --card:#FFFFFF; --line:#E9E2D6; --sand:#F3EDE2;
  --txt:#1B2A45; --mut:#5B6781;
  --red:#B8372D; --red-bg:#FBE6E3; --green:#23764A; --green-bg:#DDF1E5;
  --c1:#F28A0C; --c2:#10244A; --c3:#1E9C8F; --c4:#F9D3A0;
  --shadow:0 1px 2px rgba(16,36,74,.05), 0 6px 20px rgba(16,36,74,.06);
  --r:18px; --serif:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  /* warna pendukung: turunan harmonis dari oranye & navy */
  --apricot:#FFE3C2; --apricot-d:#8F4B00; --butter:#FFF1B8; --butter-d:#7A5C00; --coral:#FFDAD1; --coral-d:#A33A25;
  --peri:#DCE5FA; --peri-d:#2A4D96; --mint:#D6F1E3; --mint-d:#176847; --lilac:#E8E0F8; --lilac-d:#5B43A6; --teal:#1E9C8F;
}
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body { height:100%; }
body { margin:0; font:16px/1.45 "Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; font-feature-settings:'tnum' 1; background:var(--bg); color:var(--txt); -webkit-font-smoothing:antialiased; }
button, input, select, textarea { font:inherit; color:inherit; }
button { cursor:pointer; border:0; border-radius:12px; padding:10px 16px; background:var(--sand); color:var(--navy); min-height:46px; font-weight:600; transition:transform .06s, background .15s; }
button:active { transform:scale(.98); }
button.pri { background:var(--org); color:var(--navy); font-weight:800; box-shadow:0 4px 14px rgba(242,138,12,.28); }
button.pri:active { background:var(--org-d); }
button.dan { background:var(--red-bg); color:var(--red); }
button.ghost { background:none; color:var(--mut); }
button.sm { min-height:34px; padding:4px 12px; font-size:14px; border-radius:10px; }
button.big { min-height:58px; font-size:17px; border-radius:14px; }
button.wide { width:100%; }
button:disabled { opacity:.4; cursor:not-allowed; box-shadow:none; }
input, select, textarea { width:100%; padding:11px 14px; border:1.5px solid var(--line); border-radius:12px; background:#fff; min-height:48px; }
input:focus, select:focus { outline:3px solid rgba(242,138,12,.22); border-color:var(--org); }
label { display:block; font-size:13px; color:var(--mut); margin:12px 0 5px; font-weight:600; }
label.chk { display:flex; gap:10px; align-items:center; color:var(--txt); font-size:15px; margin-top:14px; } label.chk input { width:22px; height:22px; min-height:0; accent-color:var(--org); }
h1, h2, h3 { margin:0; }
.i { width:22px; height:22px; flex:none; }
.muted { color:var(--mut); } .right { text-align:right; } .bold { font-weight:700; } .hide { display:none !important; }
.row { display:flex; gap:8px; align-items:center; } .row > * { flex:1; } .row > .auto { flex:none; }
.card { background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:18px; box-shadow:var(--shadow); }
.card h3, .insight h3 { font-size:16px; color:var(--navy); margin-bottom:12px; font-weight:800; letter-spacing:-.01em; }
.logo { width:42px; height:42px; border-radius:12px; background:var(--navy); color:var(--org); display:inline-grid; place-items:center; flex:none; }
.logo img { width:70%; height:auto; }
.tile { width:52px; height:52px; border-radius:16px; display:grid; place-items:center; font-size:22px; font-weight:800; flex:none; }
.tile.lg { width:60px; height:60px; font-size:28px; }
.t0 { background:var(--apricot); color:var(--apricot-d); } .t1 { background:var(--peri); color:var(--peri-d); } .t2 { background:var(--mint); color:var(--mint-d); }
.t3 { background:var(--butter); color:var(--butter-d); } .t4 { background:var(--coral); color:var(--coral-d); } .t5 { background:var(--lilac); color:var(--lilac-d); }
.empty { text-align:center; color:var(--mut); padding:30px 8px; }

/* login */
body { background:radial-gradient(900px 480px at 100% -10%, #FFE3BC 0, transparent 60%), radial-gradient(800px 520px at 0% 110%, #E3EAFB 0, transparent 60%), var(--bg); background-attachment:fixed; }
.loginwrap { display:grid; grid-template-columns:1fr; min-height:100vh; min-height:100dvh; }
.lpanel { display:none; }
.login { width:100%; max-width:380px; margin:0 auto; padding:7vh 20px 20px; text-align:center; align-self:center; }
.login .lmobile { width:210px; max-width:70%; margin-bottom:18px; }
.login h1 { color:var(--navy); margin:4px 0 2px; font-size:26px; font-weight:800; letter-spacing:-.02em; }
@media (min-width:900px) {
  .loginwrap { grid-template-columns:minmax(380px,46%) 1fr; }
  .lpanel { display:flex; flex-direction:column; align-items:center; justify-content:center; background:linear-gradient(160deg,var(--navy),var(--navy2)); color:#fff; position:relative; overflow:hidden; padding:40px; text-align:center; }
  .lpanel img { width:min(300px,70%); position:relative; z-index:1; }
  .lpanel p { position:relative; z-index:1; margin:22px 0 0; letter-spacing:.3em; text-transform:uppercase; font-size:13px; color:rgba(255,255,255,.7); }
  .lpanel::after { content:""; position:absolute; left:0; right:0; bottom:0; height:46%; background:#fff; opacity:.16; -webkit-mask:url(img/orn-mask.png) center bottom/cover no-repeat; mask:url(img/orn-mask.png) center bottom/cover no-repeat; }
  .login .lmobile { display:none; }
  .login { padding-top:20px; }
}
.pinpad { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:14px; }
.pinpad button { min-height:64px; font-size:22px; background:#fff; border:1.5px solid var(--line); color:var(--navy); border-radius:16px; }
.pinpad button.pri { border:0; background:var(--org); box-shadow:0 4px 14px rgba(242,138,12,.28); }
.dots { font-size:26px; letter-spacing:8px; min-height:40px; margin:10px 0; color:var(--org); }
.err { color:var(--red); min-height:20px; }

/* ===== kerangka aplikasi ===== */
.app { display:grid; grid-template-columns:248px 1fr; height:100vh; height:100dvh; }
.side { position:relative; overflow:hidden; background:var(--navy); color:#fff; display:flex; flex-direction:column; padding:20px 14px; gap:6px; min-height:0; }
.brand { display:flex; flex-direction:column; align-items:flex-start; gap:10px; padding:4px 8px 22px; }
.brand .bfull { width:156px; max-width:100%; } .brand .bmark { display:none; width:40px; }
.brand small { color:rgba(255,255,255,.6); font-size:11px; letter-spacing:.14em; text-transform:uppercase; }
.navbtns { display:flex; flex-direction:column; gap:4px; flex:1; }
.navbtns button { position:relative; display:flex; align-items:center; gap:12px; background:none; color:rgba(255,255,255,.72); justify-content:flex-start; padding:12px 14px; border-radius:12px; font-size:15px; min-height:48px; font-weight:500; }
.navbtns button:hover { background:rgba(255,255,255,.06); }
.navbtns button.on { background:rgba(255,255,255,.1); color:#fff; font-weight:700; }
.navbtns button.on::before { content:""; position:absolute; left:-14px; top:10px; bottom:10px; width:4px; border-radius:0 4px 4px 0; background:var(--org); }
.sidefoot { border-top:1px solid rgba(255,255,255,.12); padding-top:14px; display:flex; flex-direction:column; gap:8px; }
.who { display:flex; align-items:center; gap:10px; padding:2px 8px; } .who b { display:block; font-size:15px; } .who small { color:rgba(255,255,255,.55); font-size:12px; }
.av { width:38px; height:38px; border-radius:50%; background:var(--org); color:var(--navy); display:grid; place-items:center; font-weight:800; flex:none; }
.sidefoot .ghost { display:flex; align-items:center; justify-content:flex-start; gap:10px; color:rgba(255,255,255,.7); padding:10px 14px; }
.content { display:flex; flex-direction:column; min-width:0; min-height:0; }
.bar { display:flex; align-items:center; gap:12px; padding:22px 28px 6px; padding-top:max(22px, env(safe-area-inset-top)); }
.ttl { flex:1; } .ttl h1 { font-size:28px; font-weight:800; color:var(--navy); letter-spacing:-.025em; } .ttl p { margin:2px 0 0; color:var(--mut); font-size:14px; }
.acts { display:flex; gap:8px; }
.chip { display:inline-flex; align-items:center; gap:8px; background:#fff; border:1.5px solid var(--line); border-radius:999px; min-height:42px; padding:6px 16px; color:var(--navy); font-weight:600; }
.chip.on { background:var(--navy); border-color:var(--navy); color:#fff; }
.main { flex:1; overflow:auto; padding:12px 28px 28px; min-height:0; }
.main > *:not(.pos) { max-width:1180px; margin-left:auto; margin-right:auto; }
.bottom { display:none; }
.only-narrow { display:none; }

@media (max-width:1100px) {
  .app { grid-template-columns:88px 1fr; }
  .brand small, .brand .bfull, .who > div, .sidefoot .ghost span, .side::after { display:none; }
  .brand { align-items:center; padding-left:0; padding-right:0; } .brand .bmark { display:block; }
  .who { justify-content:center; padding-left:0; padding-right:0; }
  .navbtns button { flex-direction:column; gap:4px; padding:10px 4px; justify-content:center; }
  .navbtns button span { display:block; font-size:11px; }
  .navbtns button.on::before { left:-14px; }
  .sidefoot .ghost { justify-content:center; padding:10px 0; }
  .bar { padding:16px 20px 4px; } .main { padding:10px 20px 20px; }
}
@media (max-width:760px) {
  .app { grid-template-columns:1fr; grid-template-rows:1fr auto; }
  .side { display:none; }
  .bottom { display:flex; grid-row:2; background:#fff; border-top:1px solid var(--line); padding:6px 6px max(6px, env(safe-area-inset-bottom)); gap:2px; }
  .bottom button { flex:1; display:flex; flex-direction:column; align-items:center; gap:2px; background:none; color:var(--mut); padding:8px 2px; font-size:11px; min-height:54px; justify-content:center; border-radius:10px; font-weight:500; }
  .bottom button.on { color:var(--navy); font-weight:800; background:var(--org-soft); }
  .only-narrow { display:inline-flex; }
  .bar { padding:14px 16px 2px; } .main { padding:8px 16px 16px; }
  .ttl h1 { font-size:23px; }
}

/* ===== kasir ===== */
.pos { display:grid; grid-template-columns:1fr 400px; gap:20px; height:100%; }
.catalog { display:flex; flex-direction:column; min-height:0; min-width:0; }
.search { position:relative; display:block; margin:0; } .search .i { position:absolute; left:16px; top:50%; transform:translateY(-50%); color:var(--mut); }
.search input { padding-left:46px; border-radius:14px; min-height:52px; font-size:16px; }
.cats { display:flex; gap:8px; overflow-x:auto; padding:14px 0 12px; scrollbar-width:none; } .cats::-webkit-scrollbar { display:none; }
.cats button { white-space:nowrap; min-height:44px; padding:6px 20px; border-radius:999px; background:#fff; border:1.5px solid var(--line); font-size:15px; color:var(--navy); }
.cats button.on { background:var(--navy); border-color:var(--navy); color:#fff; font-weight:700; }
.grid { overflow:auto; display:grid; grid-auto-rows:max-content; grid-template-columns:repeat(auto-fill,minmax(168px,1fr)); gap:14px; align-content:start; padding:2px 2px 90px; flex:1; }
.prod { height:auto; position:relative; background:#fff; border:1px solid var(--line); text-align:left; padding:14px; min-height:150px; display:flex; flex-direction:column; align-items:flex-start; gap:6px; color:var(--txt); box-shadow:var(--shadow); border-radius:var(--r); font-weight:400; }
.prod:active { border-color:var(--org); background:var(--org-soft); }
.prod .nm { font-weight:700; font-size:16px; line-height:1.2; color:var(--navy); }
.prod .pr { color:var(--org-d); font-weight:800; margin-top:auto; }
.prod small { color:var(--mut); font-size:12px; } .prod small.low { color:var(--red); font-weight:700; }
.prod.out { opacity:.4; }
.cnt { position:absolute; right:10px; top:10px; min-width:28px; height:28px; border-radius:14px; background:var(--org); color:var(--navy); font-weight:800; display:grid; place-items:center; padding:0 8px; }
.cart { background:#fff; border:1px solid var(--line); border-radius:20px; box-shadow:var(--shadow); padding:18px; display:flex; flex-direction:column; min-height:0; overflow-y:auto; }
.cart-head { display:flex; align-items:center; gap:8px; margin-bottom:12px; } .cart-head h2 { flex:1; font-size:20px; font-weight:800; color:var(--navy); letter-spacing:-.02em; }
.seg3 { display:flex; background:var(--sand); border-radius:12px; padding:4px; gap:4px; }
.seg3 button { flex:1; background:none; min-height:42px; padding:6px 4px; border-radius:9px; font-size:15px; color:var(--mut); }
.seg3 button.on { background:#fff; box-shadow:var(--shadow); font-weight:800; color:var(--navy); }
.cust { margin-top:10px; }
.lines { flex:1 0 120px; margin:10px 0; overflow:visible; }
.line { display:grid; grid-template-columns:1fr auto auto; gap:6px 10px; align-items:center; padding:12px 0; border-bottom:1px solid var(--sand); }
.lbody { background:none; text-align:left; padding:0; min-height:0; font-weight:400; display:flex; flex-direction:column; gap:3px; color:var(--txt); } .lbody b { font-size:16px; color:var(--navy); }
.lbody small { color:var(--mut); font-size:13px; } .lbody em { font-style:normal; background:var(--navy-soft); color:var(--navy2); border-radius:6px; padding:1px 8px; margin-right:6px; font-weight:700; }
.lp { font-weight:800; min-width:84px; text-align:right; color:var(--navy); }
.stepper { display:inline-flex; align-items:center; gap:10px; } .stepper b { min-width:24px; text-align:center; font-size:18px; }
.stepper button { width:48px; height:48px; min-height:0; padding:0; border-radius:12px; display:grid; place-items:center; background:var(--sand); }
.stepper.sm button { width:38px; height:38px; border-radius:10px; } .stepper.sm b { font-size:16px; min-width:18px; }
.foot { display:flex; flex-direction:column; gap:10px; }
.linkbtn { background:none; color:var(--org-d); text-align:left; padding:4px 0; min-height:32px; font-size:14px; font-weight:600; }
.extra { display:grid; gap:8px; }
.sum div { display:flex; justify-content:space-between; padding:2px 0; color:var(--mut); }
.sum .tot { font-size:28px; font-weight:800; color:var(--navy); letter-spacing:-.02em; }
.cash { display:flex; flex-direction:column; gap:8px; }
.quick { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; } .quick button { min-height:44px; padding:4px; font-size:14px; background:var(--sand); }
.chg { display:flex; justify-content:space-between; align-items:center; padding:10px 14px; border-radius:12px; background:var(--red-bg); color:var(--red); font-weight:700; } .chg.ok { background:var(--green-bg); color:var(--green); } .chg b { font-size:20px; }
#pay { position:sticky; bottom:0; }
.cartbar { display:none; }
.cartclose { display:none; }

@media (max-width:1100px) { .pos { grid-template-columns:1fr 340px; gap:14px; } .grid { grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:10px; } .prod { min-height:0; padding:12px; } .prod .tile { width:44px; height:44px; font-size:20px; } }
@media (max-width:760px) {
  .pos { grid-template-columns:1fr; }
  .cart { position:fixed; inset:0; z-index:30; border-radius:0; padding:14px; padding-top:max(14px, env(safe-area-inset-top)); display:none; background:var(--bg); }
  .cart.open { display:flex; }
  .cartclose { display:block; }
  .cartbar { display:flex; justify-content:space-between; align-items:center; position:fixed; left:16px; right:16px; bottom:calc(76px + env(safe-area-inset-bottom)); z-index:10; min-height:58px; border-radius:14px; }
  .grid { grid-template-columns:repeat(2,1fr); }
}

/* lembar pilihan */
.modal { position:fixed; inset:0; background:rgba(16,36,74,.5); backdrop-filter:blur(3px); display:flex; align-items:flex-end; justify-content:center; z-index:40; }
.sheet { background:#fff; width:100%; max-width:520px; border-radius:22px 22px 0 0; padding:22px; max-height:94vh; overflow:auto; }
@media (min-width:640px) { .modal { align-items:center; } .sheet { border-radius:22px; } }
.sheet h3 { font-size:20px; font-weight:800; color:var(--navy); margin-bottom:2px; letter-spacing:-.02em; }
.sh-head { display:flex; gap:14px; align-items:center; } .sh-head > div { flex:1; } .sh-head .x { width:44px; padding:0; }
.opts { display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); gap:10px; }
.opt { display:flex; flex-direction:column; align-items:center; gap:2px; background:#fff; border:2px solid var(--line); border-radius:14px; min-height:76px; color:var(--navy); } .opt b { font-size:18px; } .opt span { color:var(--mut); font-size:14px; font-weight:600; }
.opt.on { border-color:var(--org); background:var(--org-soft); } .opt.on span { color:var(--org-d); }
.chips { display:flex; flex-wrap:wrap; gap:8px; } .chips .chip { cursor:pointer; min-height:44px; }
.chips .chip.on { background:var(--org); border-color:var(--org); color:var(--navy); font-weight:700; }
.sh-foot { display:flex; gap:14px; align-items:center; margin-top:18px; } .sh-foot .big { flex:1; }
.done { text-align:center; } .done h2 { color:var(--navy); margin:12px 0 2px; font-weight:800; letter-spacing:-.02em; }
.check { width:72px; height:72px; border-radius:50%; background:var(--green-bg); color:var(--green); display:grid; place-items:center; margin:0 auto; animation:pop .35s ease-out; } .check svg { width:38px; height:38px; }
@keyframes pop { from { transform:scale(.4); opacity:0; } to { transform:scale(1); opacity:1; } }
.bigmoney { font-size:42px; font-weight:800; letter-spacing:-.03em; color:var(--navy); line-height:1.1; margin:2px 0 8px; } .bigmoney.sm { font-size:26px; }
.prevs { display:flex; flex-direction:column; gap:12px; align-items:center; background:var(--sand); border-radius:14px; padding:14px; }
.prevs img { background:#fff; box-shadow:0 2px 14px rgba(0,0,0,.14); border-radius:4px; }
.dev { padding:10px 0; border-bottom:1px solid var(--line); }
#toast { position:fixed; left:50%; bottom:28px; transform:translateX(-50%); background:var(--navy); color:#fff; padding:12px 20px; border-radius:12px; opacity:0; pointer-events:none; transition:.2s; z-index:60; max-width:90vw; }
#toast.show { opacity:1; }

/* ===== riwayat, menu, pengaturan ===== */
.filters { display:flex; gap:10px; flex-wrap:wrap; align-items:end; } .filters > div { flex:1; min-width:150px; } .filters label { margin-top:0; }
.hist { display:grid; gap:10px; }
.hrow { display:grid; grid-template-columns:76px 1fr auto; gap:16px; align-items:center; padding:14px 18px; }
.hrow.void { opacity:.55; }
.hno { background:var(--navy); border-radius:12px; text-align:center; padding:8px 4px; color:#fff; } .hno b { display:block; font-size:26px; font-weight:800; line-height:1.1; letter-spacing:-.02em; } .hno small { font-size:11px; color:rgba(255,255,255,.65); }
.hmid > .muted { font-size:14px; } .hmid b { color:var(--navy); }
.hr { text-align:right; } .hr > b { font-size:18px; color:var(--navy); } .hbtn { display:flex; gap:6px; margin-top:6px; justify-content:flex-end; }
.badge { display:inline-block; padding:2px 10px; border-radius:999px; font-size:12px; background:var(--org-soft); color:var(--org-d); font-weight:700; }
.badge.void { background:var(--red-bg); color:var(--red); }
.menugrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:12px; }
.mrow { display:flex; gap:14px; align-items:center; text-align:left; font-weight:400; color:var(--txt); padding:14px; border-radius:var(--r); min-height:0; background:#fff; }
.mi { display:flex; flex-direction:column; gap:4px; flex:1; min-width:0; } .mi b { font-size:16px; color:var(--navy); } .sz { display:flex; flex-wrap:wrap; gap:4px; }
.two { display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:16px; }
.urow { padding:10px 0; border-bottom:1px solid var(--sand); }
.adduser { margin-top:16px; display:grid; gap:8px; }
@media (max-width:760px) { .hrow { grid-template-columns:60px 1fr; } .hr { grid-column:1 / 3; text-align:left; display:flex; align-items:center; justify-content:space-between; } .hno b { font-size:20px; } }

/* ===== dashboard ===== */
.dash-head { display:flex; gap:12px; align-items:center; flex-wrap:wrap; justify-content:space-between; margin-bottom:16px; }
.dash-head .period { color:var(--mut); font-size:15px; font-weight:600; }
.seg { display:inline-flex; background:var(--sand); border-radius:12px; padding:4px; gap:2px; max-width:100%; overflow-x:auto; }
.seg button { background:none; min-height:40px; padding:4px 16px; border-radius:9px; color:var(--mut); white-space:nowrap; }
.seg button.on { background:#fff; font-weight:800; color:var(--navy); box-shadow:var(--shadow); }
.custom { display:flex; gap:8px; margin-bottom:14px; align-items:center; } .custom input { max-width:180px; }
.herogrid { display:grid; grid-template-columns:1.25fr 1fr; gap:16px; margin-bottom:6px; }
.hero { background:linear-gradient(135deg,var(--navy) 0%,var(--navy2) 100%); border:0; color:#fff; position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:center; padding:24px; }
.hero .l { color:rgba(255,255,255,.75); font-size:14px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; }
.hero .v { font-size:clamp(34px,4.6vw,52px); font-weight:800; line-height:1.1; margin:6px 0; letter-spacing:-.035em; }
.hero .sub { color:rgba(255,255,255,.7); font-size:14px; }
.delta { display:inline-block; align-self:flex-start; font-size:13px; font-weight:800; padding:3px 12px; border-radius:999px; background:#fff; margin:6px 0; }
.delta.up { color:var(--green); } .delta.down { color:var(--red); } .delta.flat { color:var(--mut); }
.kpis { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.kpi { padding:16px; display:flex; flex-direction:column; justify-content:center; gap:2px; } .kpi .v { font-size:24px; font-weight:800; line-height:1.15; color:var(--navy); letter-spacing:-.025em; } .kpi .l { color:var(--mut); font-size:13px; }
.kic { width:36px; height:36px; border-radius:10px; background:var(--org-soft); color:var(--org-d); display:grid; place-items:center; margin-bottom:8px; } .kic .i { width:20px; height:20px; }
.note { color:var(--mut); font-size:13px; margin:10px 4px 16px; }
.insight { margin-bottom:16px; }
.insight ul { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:14px 20px; }
.insight li { display:flex; gap:12px; align-items:flex-start; } .insight .ic { width:38px; height:38px; border-radius:10px; background:var(--navy-soft); color:var(--navy2); display:grid; place-items:center; flex:none; } .insight .ic .i { width:20px; height:20px; }
.insight small { display:block; color:var(--mut); font-size:13px; } .insight b { font-size:15px; color:var(--navy); }
.dcard { margin-bottom:16px; }
.chart { display:flex; align-items:flex-end; gap:5px; height:170px; margin-top:6px; }
.chart .col { flex:1; display:flex; flex-direction:column; justify-content:flex-end; height:100%; position:relative; }
.chart .bar { background:var(--c4); border-radius:6px 6px 2px 2px; min-height:3px; transition:background .15s; }
.chart .col:hover .bar { background:#F5B761; } .chart .col.max .bar { background:var(--org); } .chart .col.zero .bar { background:var(--sand); }
.chart .tip { display:none; position:absolute; bottom:calc(100% + 2px); left:50%; transform:translateX(-50%); background:var(--navy); color:#fff; font-size:12px; padding:5px 10px; border-radius:8px; white-space:nowrap; z-index:2; pointer-events:none; }
.chart .col:hover .tip { display:block; } .chart .col:hover { z-index:3; }
.axis { display:flex; gap:5px; font-size:11px; color:var(--mut); margin-top:6px; } .axis span { flex:1; text-align:center; white-space:nowrap; min-width:0; }
.rank { display:grid; grid-template-columns:22px 1fr auto; gap:4px 10px; align-items:center; margin-top:10px; }
.rank .n { color:var(--mut); font-size:13px; font-weight:700; } .rank .t { height:8px; background:var(--sand); border-radius:4px; overflow:hidden; grid-column:2 / 4; margin-top:-2px; margin-bottom:6px; } .rank .t i { display:block; height:100%; background:var(--org); border-radius:4px; }
.stack { display:flex; height:14px; border-radius:7px; overflow:hidden; background:var(--sand); margin:6px 0 10px; } .stack i { display:block; height:100%; }
.legend { display:grid; gap:6px; } .legend div { display:flex; align-items:center; gap:8px; font-size:14px; } .legend .dot { width:11px; height:11px; border-radius:3px; flex:none; } .legend .p { margin-left:auto; color:var(--mut); font-weight:700; }
.alert { display:flex; gap:10px; align-items:center; background:var(--org-soft); border:1px solid var(--org-mid); color:#7A4300; border-radius:12px; padding:12px 16px; margin-bottom:14px; font-size:14px; } .alert .i { width:20px; height:20px; color:var(--org-d); }
@media (max-width:900px) { .herogrid { grid-template-columns:1fr; } }
@media (max-width:760px) { .kpi .v { font-size:19px; } .kpis { gap:8px; } }

/* ===== cetak (hitam putih) ===== */
#receipt { display:none; }
.rc { font-family:"Courier New",monospace; color:#000; font-size:12px; line-height:1.35; width:100%; }
.rc.w80 { font-size:13px; }
.rc .c { text-align:center; } .rc .b { font-weight:700; }
.rc hr { border:0; border-top:1px dashed #000; margin:6px 0; }
.rc .r { display:flex; justify-content:space-between; gap:6px; } .rc .r span:first-child { flex:1; }
.rc .big { font-size:30px; font-weight:800; letter-spacing:1px; }
.rc .box { border:2px solid #000; padding:4px; margin:6px 0; text-align:center; }
img.stk { display:block; width:100%; page-break-after:always; break-after:page; }
@media print {
  body > *:not(#receipt) { display:none !important; }
  #receipt { display:block !important; }
  body { background:#fff !important; }
  @page { margin:0; }
}

/* ===== aksen warna (turunan palet) ===== */
.prod { background:var(--tint,#fff); border-color:var(--tintb,var(--line)); }
.c0 { --tint:#FFF7EC; --tintb:#FADFBB; } .c1 { --tint:#F4F7FD; --tintb:#D3DEF5; } .c2 { --tint:#F1FAF5; --tintb:#C9E8D8; }
.c3 { --tint:#FFFAE6; --tintb:#F2E3A3; } .c4 { --tint:#FFF4F1; --tintb:#F6CFC5; } .c5 { --tint:#F6F2FD; --tintb:#DCD1F2; }
.prod:active { background:var(--org-soft); border-color:var(--org); }
.cats button .dd { display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:8px; vertical-align:1px; }
.cats button.on .dd { box-shadow:0 0 0 2px rgba(255,255,255,.35); }
.h0 { background:var(--org); } .h1 { background:var(--peri-d); } .h2 { background:var(--mint-d); } .h3 { background:#E0B000; } .h4 { background:#E0624A; } .h5 { background:var(--lilac-d); }
.kpi.k0 { background:linear-gradient(160deg,#FFF3E1,#fff 70%); border-color:#FADFBB; } .kpi.k0 .kic { background:var(--apricot); color:var(--apricot-d); }
.kpi.k1 { background:linear-gradient(160deg,#EEF3FD,#fff 70%); border-color:#D3DEF5; } .kpi.k1 .kic { background:var(--peri); color:var(--peri-d); }
.kpi.k2 { background:linear-gradient(160deg,#E9F8F0,#fff 70%); border-color:#C9E8D8; } .kpi.k2 .kic { background:var(--mint); color:var(--mint-d); }
.insight .ic.i0 { background:var(--apricot); color:var(--apricot-d); } .insight .ic.i1 { background:var(--peri); color:var(--peri-d); }
.insight .ic.i2 { background:var(--butter); color:var(--butter-d); } .insight .ic.i3 { background:var(--mint); color:var(--mint-d); }
.hno { background:var(--navy); } .hno.take-away { background:var(--org); color:var(--navy); } .hno.take-away small { color:rgba(16,36,74,.7); } .hno.online { background:var(--teal); }
.badge.p-tunai { background:var(--mint); color:var(--mint-d); } .badge.p-qris { background:var(--peri); color:var(--peri-d); } .badge.p-transfer { background:var(--lilac); color:var(--lilac-d); }
.rank .t i.r0 { background:var(--org); } .rank .t i.r1 { background:var(--navy2); } .rank .t i.r2 { background:var(--teal); } .rank .t i.r3 { background:#E0B000; } .rank .t i.r4 { background:#8F7BD1; }
.rank .n { width:22px; height:22px; border-radius:7px; display:grid; place-items:center; background:var(--sand); color:var(--navy); }
.hero .delta.up { background:#fff; }
.seg3 button.on[data-ty="dine-in"] { box-shadow:inset 0 -3px 0 var(--navy); } .seg3 button.on[data-ty="take-away"] { box-shadow:inset 0 -3px 0 var(--org); } .seg3 button.on[data-ty="online"] { box-shadow:inset 0 -3px 0 var(--teal); }
.cnt { box-shadow:0 3px 8px rgba(242,138,12,.4); }

/* ===== ornamen ilustrasi cangkir (mask: warna mengikuti konteks) ===== */
.side::after { content:""; position:absolute; left:-10px; right:-10px; bottom:96px; height:190px; background:#fff; opacity:.08; pointer-events:none; -webkit-mask:url(img/orn-mask.png) center/cover no-repeat; mask:url(img/orn-mask.png) center/cover no-repeat; }
.hero::after { content:""; position:absolute; width:62%; height:130%; right:-6%; bottom:-15%; opacity:.11; background:#fff; -webkit-mask:url(img/orn-mask.png) right center/cover no-repeat; mask:url(img/orn-mask.png) right center/cover no-repeat; }
.bar { position:relative; }
.bar::after { content:""; position:absolute; right:0; top:0; width:min(520px,60%); height:120px; background:var(--navy); opacity:.06; pointer-events:none; z-index:-1; -webkit-mask:url(img/orn-mask.png) right top/cover no-repeat; mask:url(img/orn-mask.png) right top/cover no-repeat; }
.empty::before { content:""; display:block; width:230px; max-width:80%; height:70px; margin:0 auto 12px; background:var(--navy); opacity:.2; -webkit-mask:url(img/orn-mask.png) center/cover no-repeat; mask:url(img/orn-mask.png) center/cover no-repeat; }
.lines .empty { padding:10px 8px; } .lines .empty::before { height:46px; margin-bottom:6px; }
.lines { flex:1 0 96px; }

.srvrow { display:flex; gap:8px; align-items:center; margin:12px 0 0; } .srvrow input { flex:1; min-width:0; } .srvrow button { flex:none; }

/* ===== topping, kas, offline, QRIS ===== */
.tops { display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:8px; }
.top { display:flex; flex-direction:column; align-items:flex-start; gap:2px; background:#fff; border:2px solid var(--line); border-radius:14px; padding:10px 12px; min-height:62px; color:var(--navy); text-align:left; }
.top span { color:var(--mut); font-size:13px; font-weight:600; }
.top.on { border-color:var(--org); background:var(--org-soft); } .top.on span { color:var(--org-d); }
.top:disabled { opacity:.4; }
.seg3.mini { margin-top:8px; } .seg3.mini button { min-height:36px; font-size:14px; }
.hint { color:var(--mut); font-size:12.5px; margin:2px 2px 0; }
.sheet h4 { margin:16px 0 6px; font-size:13px; text-transform:uppercase; letter-spacing:.06em; color:var(--mut); }
.kv { display:flex; justify-content:space-between; gap:12px; padding:7px 0; border-bottom:1px solid var(--sand); font-size:15px; } .kv b { white-space:nowrap; }
.kv.tot { font-size:17px; font-weight:800; color:var(--navy); border-bottom:2px solid var(--line); } .kv.sub { font-size:14px; color:var(--mut); }
.pos, .pos-n { }
b.pos { color:var(--green); } b.neg, small.neg { color:var(--red); }
.gate { max-width:440px; margin:6vh auto; text-align:center; display:flex; flex-direction:column; gap:10px; } .gate img { width:56px; margin:0 auto; background:var(--navy); border-radius:16px; padding:10px; } .gate h2 { font-size:24px; color:var(--navy); letter-spacing:-.02em; } .gate p { margin:0; }
.denoms { display:grid; grid-template-columns:1fr 1fr; gap:6px 14px; } .dn { display:flex; justify-content:space-between; align-items:center; gap:6px; padding:4px 0; border-bottom:1px solid var(--sand); } .dn > span { font-weight:700; font-size:14px; color:var(--navy); }
.dn .stepper { gap:4px; } .dn .stepper input { width:54px; min-height:38px; padding:4px; text-align:center; font-weight:700; }
@media (max-width:480px) { .denoms { grid-template-columns:1fr; } }
.shrow { display:grid; grid-template-columns:76px 1fr auto; gap:16px; align-items:center; padding:14px 18px; text-align:left; font-weight:400; color:var(--txt); width:100%; min-height:0; background:#fff; }
.kpi.k4 { background:linear-gradient(160deg,#FFEDE9,#fff 70%); border-color:#F6CFC5; } .kpi.k4 .kic { background:var(--coral); color:var(--coral-d); }
.cashcard { display:flex; align-items:center; gap:14px; margin-bottom:16px; padding:14px 18px; } .cashcard > div { flex:1; } .cashcard b { display:block; color:var(--navy); } .cashcard small { color:var(--mut); }
.cashcard.bad { background:#FFF4F1; border-color:#F6CFC5; } .cashcard.good { background:#F1FAF5; border-color:#C9E8D8; }
.cashcard .kic { margin:0; } .cashcard.bad .kic { background:var(--coral); color:var(--coral-d); } .cashcard.good .kic { background:var(--mint); color:var(--mint-d); }
.netbar { display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:8px 24px; background:var(--org-soft); border-bottom:1px solid var(--org-mid); color:#6B3A00; font-size:14px; }
.netbar .nb { display:inline-flex; align-items:center; gap:6px; font-weight:800; } .netbar .nb .i { width:18px; height:18px; } .netbar .nb.off { color:var(--red); }
.netbar button { margin-left:auto; }
.qrisbox { text-align:center; } .qrisbox .bigmoney { margin-bottom:4px; }
.qrframe { display:inline-block; background:#fff; border:2px solid var(--line); border-radius:18px; padding:10px; margin:6px 0 10px; } .qrframe canvas, .qrframe img { display:block; width:260px; height:260px; max-width:70vw; max-height:70vw; image-rendering:pixelated; }
.qrstat { display:flex; gap:10px; align-items:center; justify-content:center; font-weight:700; color:var(--navy); }
.spin { width:16px; height:16px; border:3px solid var(--org-mid); border-top-color:var(--org); border-radius:50%; animation:sp 0.9s linear infinite; } @keyframes sp { to { transform:rotate(360deg); } }
@media (max-width:760px) { .netbar { padding:8px 14px; } .shrow { grid-template-columns:60px 1fr; } .shrow .hr { grid-column:1 / 3; text-align:left; } }