/* Nirwana Carwash - styles built on the Nirwana design system tokens (tokens.json in the design system).
   Colours are set once here; pages use the variables, never raw hex values. */
:root {
  /* surfaces and text */
  --bg: #eef1f6;          /* surface-page */
  --card: #ffffff;        /* surface-card */
  --sunken: #e3e8f1;      /* surface-sunken */
  --ink: #1f3659;         /* ink (brand navy) */
  --muted: #4a5b78;       /* ink-muted */
  --line: #e3e8f1;        /* hairlines inside cards */
  --border: #cbd5e4;      /* decorative borders between cards */
  --field: #72849f;       /* border-control: inputs and outline buttons */
  /* actions */
  --primary: #2b6cc4;
  --primary-dk: #1f59a8;  /* primary-hover, text on primary-tint */
  --primary-bg: #e3edfb;  /* primary-tint */
  --primary-ink: #ffffff;
  --focus: #2b6cc4;
  /* brand artwork */
  --navy: #1f3659;
  --navy-muted: #afc0dd;  /* secondary text on navy */
  --sky: #56add7;
  --red: #ed1c24;         /* graphic accent only, never text */
  --accent: #ed1c24;
  /* status pairs */
  --ok: #0b7a5a;   --ok-bg: #dcf5ec;
  --busy: #9a5b00; --busy-bg: #fff1d6; --busy-line: #f2d79c;
  --wash: #1f59a8; --wash-bg: #e3edfb; --wash-bar: #2b6cc4;
  --late: #c8101a; --late-bg: #fde4e5;
  /* shape */
  --radius: 20px;   /* radius-lg: cards */
  --radius-md: 12px;
  --radius-sm: 8px;
  --shadow: 0 1px 3px rgba(20, 35, 63, .12), 0 4px 12px rgba(20, 35, 63, .06);
  --shadow-pop: 0 8px 24px rgba(20, 35, 63, .18);
  --nav-h: 68px;
  /* tokens for things that used raw values before (same light values) */
  --input-bg: #ffffff;
  --hover: #f6f8fb;        /* row hover, calendar day */
  --topbar-bg: rgba(238, 241, 246, .92);
  --sel-bg: #1f3659;       /* selected chip / pill / day */
  --sel-ink: #ffffff;
  --plate-bg: #ffffff;     /* licence plates stay white in every theme */
  --plate-ink: #1f3659;
  --plate-ph: #8a98ae;
  --brand-blue: #2b6cc4;   /* featured price card: artwork colour, fixed */
  --star: #c27c00;         /* rating stars: 3:1 on white */
  --star-off: #7d8ba3;
  --gold-bg: #fffaf0; --gold-line: #f5d27a;
  --deal-bg: #fff1f1; --deal-ink: #b4121a; --deal-line: #f19ca0;
  --wa-bg: #e7f8ee; --wa-ink: #137a3b; --wa-line: #25d366; --wa-line-soft: #9fdcb6;
  --cal1: #e3edfb; --cal2: #c6daf6; --cal3: #a6c5ef;
  --chart-bar: rgba(86, 173, 215, .45);
  --on-navy: #ffffff;
  --on-danger: #ffffff;
  /* motion: strong ease-out for anything that responds or enters (starts fast, settles), ease-in-out only for things
     moving across the screen. The old --ease (.2, 0, 0, 1) started at zero speed, so a 120ms press began late. */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease: var(--ease-out);
  --t-fast: 120ms;
  --font: 'Plus Jakarta Sans', system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: 'Montserrat', 'Poppins', system-ui, sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 16px/1.5 var(--font); -webkit-font-smoothing: antialiased;
  padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 16px);
}
body.role-guest { padding-bottom: 24px; }
a { color: var(--primary); }
@media (hover: hover) and (pointer: fine) { a:hover { color: var(--primary-dk); } }
h1, h2, h3 { line-height: 1.25; margin: 0 0 .5rem; }
h2 { font-size: 1.05rem; font-weight: 700; }
.muted { color: var(--muted); }
.r { text-align: right; }
.num, .money { font-variant-numeric: tabular-nums; }
.hint { font-size: .85rem; color: var(--muted); margin: -4px 0 10px; }
.hint.ok { color: var(--ok); }
.hint.warn { color: var(--late); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.disp { font-family: var(--display); font-weight: 800; font-style: italic; letter-spacing: -.01em; }
.ico { width: 24px; height: 24px; flex-shrink: 0; }
.ico.s { width: 18px; height: 18px; }
.ico.xs { width: 14px; height: 14px; }

/* brand slash motif: two red parallelograms */
.slash { display: inline-flex; gap: 5px; vertical-align: middle; }
.slash i { display: block; width: 8px; height: 15px; background: var(--red); transform: skewX(-24deg); }

/* ---------------------------------------------------------------- top bar */
.topbar {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 10px 16px; padding-top: calc(10px + env(safe-area-inset-top));
  background: var(--topbar-bg); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  color: var(--ink);
}
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-weight: 700; min-width: 0; }
.brand img { width: 40px; height: 40px; border-radius: 12px; display: block; flex-shrink: 0; box-shadow: var(--shadow); }
.brand .bt { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.brand .bt small { font-size: .75rem; font-weight: 500; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand .bt span { font-size: 1.02rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top-right { display: flex; align-items: center; gap: 8px; }
.icb {
  width: 44px; height: 44px; border-radius: 999px; border: 0; background: var(--card); color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; box-shadow: var(--shadow);
  text-decoration: none; cursor: pointer; padding: 0; flex-shrink: 0; font: 700 .8rem var(--font);
}
@media (hover: hover) and (pointer: fine) { .icb:hover { color: var(--primary-dk); } }
.icb .ico { width: 20px; height: 20px; }
.icb.av { background: var(--navy); color: #fff; letter-spacing: .02em; }

.wrap { max-width: 760px; margin: 0 auto; padding: 8px 16px 16px; }
body.wide .wrap { max-width: 1100px; }
.pagetitle { font-family: var(--display); font-weight: 800; font-style: italic; font-size: 1.85rem; letter-spacing: -.01em; margin: 6px 0 16px; display: flex; align-items: center; gap: 14px; }

/* ---------------------------------------------------------------- cards & forms */
.card { background: var(--card); border-radius: var(--radius); padding: 16px; margin-bottom: 12px; box-shadow: var(--shadow); }
.card h2 { margin-bottom: .6rem; }
.form label, label.block { display: block; font-weight: 500; font-size: .9rem; margin-bottom: 12px; }
.form label.check { display: flex; font-weight: 500; margin-bottom: 0; }
.form label.pill { margin-bottom: 0; font-weight: 700; }
.form label input, .form label select, .form label textarea,
input.in, select.in { margin-top: 5px; }
input, select, textarea {
  width: 100%; font: inherit; color: inherit; padding: 11px 13px; border: 1.5px solid var(--field); border-radius: var(--radius-sm);
  background: var(--input-bg); min-height: 48px;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--focus); outline-offset: 1px; border-color: var(--primary); }
input[type=checkbox], input[type=radio] { width: auto; min-height: 0; accent-color: var(--primary); }
.plate-input {
  font-size: 1.5rem; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; text-align: center;
  background: var(--plate-bg); color: var(--plate-ink); border: 3px solid var(--plate-ink); border-radius: 10px;
}
.plate-input::placeholder { color: var(--plate-ph); }
.plate-input:focus { border-color: var(--plate-ink); }
fieldset.field { border: 0; padding: 0; margin: 0 0 12px; }
fieldset.field legend { font-weight: 500; font-size: .9rem; padding: 0; margin-bottom: 6px; }
details.more { margin: 8px 0 4px; }
details.more > summary { cursor: pointer; font-weight: 700; padding: 10px 0; color: var(--primary); min-height: 44px; }

/* toggle switch: <input type="checkbox" class="toggle"> */
input.toggle {
  appearance: none; -webkit-appearance: none; width: 52px; height: 32px; min-height: 0; padding: 0; margin: 6px 0;
  border: 0; border-radius: 999px; background: var(--field); position: relative; cursor: pointer; flex-shrink: 0;
  transition: background .12s;
}
input.toggle::after {
  content: ''; position: absolute; top: 4px; left: 4px; width: 24px; height: 24px; border-radius: 999px; background: #fff;
  box-shadow: 0 1px 3px rgba(20, 35, 63, .3); transition: transform .12s;
}
input.toggle:checked { background: var(--primary); }
input.toggle:checked::after { transform: translateX(20px); }
.switchrow { display: flex; align-items: center; gap: 12px; padding: 6px 0; margin-bottom: 12px; }
.switchrow .tx { flex: 1; }
.switchrow .tx b { display: block; font-weight: 700; }
.switchrow .tx span { font-size: .85rem; color: var(--muted); }

/* ---------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 10px 18px;
  border-radius: var(--radius-md); border: 1.5px solid var(--field); background: var(--card); color: var(--ink); font: inherit; font-weight: 700;
  font-size: .95rem; text-decoration: none; cursor: pointer; transition: background-color .12s;
}
@media (hover: hover) and (pointer: fine) { .btn:hover { color: var(--ink); } }
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); }
.btn.primary:active { background: var(--primary-dk); border-color: var(--primary-dk); color: var(--primary-ink); }
@media (hover: hover) and (pointer: fine) { .btn.primary:hover { background: var(--primary-dk); border-color: var(--primary-dk); color: var(--primary-ink); } }
.btn.soft { background: var(--primary-bg); border-color: var(--primary-bg); color: var(--primary-dk); }
.btn.dark { background: var(--navy); border-color: var(--navy); color: #fff; }
@media (hover: hover) and (pointer: fine) { .btn.dark:hover { color: #fff; } }
.btn.danger { background: var(--card); border-color: var(--late); color: var(--late); }
.btn.small { min-height: 44px; padding: 5px 14px; font-size: .9rem; }
.btn.big { min-height: 54px; font-size: 1.02rem; }
.btn.full { width: 100%; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn svg, .ico-s { width: 20px; height: 20px; flex-shrink: 0; }
.actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: stretch; }
.actions form { display: contents; }
.actions.grid2 { display: grid; grid-template-columns: 1fr 1fr; }
.actions.grid2 form { display: block; }
.actions.grid2 .btn { width: 100%; }
.actions .btn.big { flex: 1; }
.row { display: flex; gap: 10px; align-items: center; }
.row.between { justify-content: space-between; }

/* floating action button */
.fab {
  position: fixed; right: 16px; bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 16px); z-index: 25;
  height: 56px; padding: 0 22px 0 18px; border-radius: 999px; background: var(--primary); color: var(--primary-ink);
  display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: .95rem; text-decoration: none; box-shadow: var(--shadow-pop);
}
@media (hover: hover) and (pointer: fine) { .fab:hover { background: var(--primary-dk); color: var(--primary-ink); } }
@media (min-width: 800px) { .fab { right: calc(50% - 364px); } }

/* ---------------------------------------------------------------- pills (radio chips) */
.pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.pills.two .pill { flex: 1; }
.pill { position: relative; }
.pill input { position: absolute; opacity: 0; inset: 0; }
.pill span {
  display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 10px 14px;
  border: 1.5px solid var(--field); border-radius: var(--radius-md); background: var(--card); font-weight: 700; text-align: center;
}
.pills.two .pill span { padding: 14px 10px; font-size: 1.02rem; }
.pill input:checked + span { background: var(--sel-bg); border-color: var(--sel-bg); color: var(--sel-ink); }
.pill input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
.checks { display: grid; gap: 8px; }
.check { display: flex; align-items: center; gap: 10px; padding: 11px 13px; border: 1.5px solid var(--border); border-radius: var(--radius-md); background: var(--card); cursor: pointer; }
.check input { width: 22px; height: 22px; }
.check .nm { flex: 1; font-weight: 700; }
.check .pr { color: var(--muted); font-variant-numeric: tabular-nums; }
.check:has(input:checked) { border-color: var(--primary); background: var(--primary-bg); }

/* filter chips (links or buttons) */
.chips-nav { display: flex; gap: 8px; margin-bottom: 12px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.chips-nav::-webkit-scrollbar { display: none; }
.chips-nav a, .chips-nav button {
  flex-shrink: 0; padding: 0 16px; border-radius: 999px; background: var(--card); text-decoration: none; font: 700 .9rem var(--font);
  color: var(--ink); min-height: 44px; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border); cursor: pointer; white-space: nowrap;
}
.chips-nav a.on, .chips-nav button.on { background: var(--sel-bg); border-color: var(--sel-bg); color: var(--sel-ink); }
.chips-nav .n { font-weight: 500; opacity: .8; }

/* vehicle colour swatches */
.swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.sw { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; width: 56px; margin: 0 !important; font-weight: 500 !important; cursor: pointer; }
.sw input { position: absolute; opacity: 0; inset: 0; }
.sw span { width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--border); display: flex; align-items: center; justify-content: center; font-weight: 700; color: var(--muted); }
.sw em { font-style: normal; font-size: .75rem; color: var(--muted); text-align: center; line-height: 1.1; }
.sw input:checked + span { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-bg); }
.sw input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }

/* payment proof picker */
.proofpick { margin-bottom: 12px; }
.proofpick .lbl { font-weight: 500; font-size: .9rem; margin-bottom: 6px; }
.filebtn { position: relative; overflow: hidden; }
.filebtn input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; min-height: 0; padding: 0; }
.proofpick img.proof { max-height: 220px; }

/* flash */
.flash { padding: 12px 14px; border-radius: var(--radius-md); margin-bottom: 12px; font-weight: 700; }
.flash.ok { background: var(--ok-bg); color: var(--ok); }
.flash.err { background: var(--late-bg); color: var(--late); }

/* login */
.login { max-width: 380px; margin: 6vh auto 0; }
.login .lockup { display: block; width: 240px; max-width: 80%; margin: 0 auto 8px; }
.login h1 { text-align: center; color: var(--ink); }
.login .muted { text-align: center; margin-bottom: 16px; }

/* ---------------------------------------------------------------- bottom nav */
.bottomnav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; background: var(--card); border-top: 1px solid var(--border);
  padding: 4px 6px env(safe-area-inset-bottom);
}
.bottomnav a {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: var(--nav-h); font-size: .75rem; color: var(--muted); text-decoration: none; font-weight: 500;
}
.bottomnav a .ni { width: 56px; height: 32px; border-radius: 999px; display: flex; align-items: center; justify-content: center; transition: background .12s; }
.bottomnav a .ico { width: 22px; height: 22px; }
.bottomnav a.on { color: var(--ink); font-weight: 700; }
.bottomnav a.on .ni { background: var(--primary-bg); color: var(--primary-dk); }

/* ---------------------------------------------------------------- hero (navy) cards */
.hero {
  background: var(--navy); color: #fff; border-radius: var(--radius); padding: 20px; margin-bottom: 16px;
  display: flex; flex-direction: column; gap: 4px;
}
.hero .hl { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: .9rem; color: var(--navy-muted); font-weight: 500; }
.hero .hl .tag { color: var(--sky); font-weight: 700; font-size: .78rem; display: inline-flex; align-items: center; gap: 4px; }
.hero .hv { display: flex; align-items: center; gap: 14px; }
.hero .hv b { font-family: var(--display); font-weight: 800; font-style: italic; font-size: 2.15rem; line-height: 1.25; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.hero .hsplit { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; border-top: 1px solid rgba(255, 255, 255, .16); margin-top: 10px; padding-top: 12px; }
.hero .hsplit span { display: flex; align-items: center; gap: 6px; font-size: .78rem; color: var(--navy-muted); font-weight: 500; }
.hero .hsplit b { display: block; font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.hero a { color: #fff; }
.hero .btn-ghost { align-self: flex-start; margin-top: 12px; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1.5px solid rgba(255,255,255,.7); color: #fff; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: .9rem; }

/* status badges (stage pairs from the design system) */
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; font-weight: 700; font-size: .78rem; line-height: 1.35; background: var(--sunken); color: var(--muted); white-space: nowrap; }
.badge .ico { width: 13px; height: 13px; }
.badge.st-waiting { background: var(--sunken); color: var(--muted); }
.badge.st-washing { background: var(--wash-bg); color: var(--wash); }
.badge.st-drying { background: var(--busy-bg); color: var(--busy); }
.badge.st-awaiting_payment { background: var(--late-bg); color: var(--late); }
.badge.st-paid { background: var(--ok-bg); color: var(--ok); }
.badge.st-cancelled { background: var(--sunken); color: var(--muted); text-decoration: line-through; }
.badge.ok { background: var(--ok-bg); color: var(--ok); }
.badge.navy { background: var(--navy); color: #fff; }

/* ---------------------------------------------------------------- station board */
.counts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
.counts .c { background: var(--card); border-radius: 14px; padding: 10px 12px; box-shadow: var(--shadow); }
.counts .c span { display: block; font-size: .8rem; color: var(--muted); font-weight: 500; }
.counts .c b { font-size: 1.5rem; font-weight: 700; line-height: 1.2; }
.ledger .lday { display: flex; justify-content: space-between; align-items: baseline; padding: 10px 0 4px; font-size: .82rem; font-weight: 700; color: var(--muted); border-bottom: 2px solid var(--line); }
.ledger .lday b { color: var(--ink); font-variant-numeric: tabular-nums; }

.sec-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 10px; min-height: 32px; }
.sec-head h2 { margin: 0; font-size: 1.05rem; }
.sec-head small { color: var(--muted); font-weight: 500; }
.section { margin-top: 20px; }

.stations { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 8px; }
@media (min-width: 700px) { .stations { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stations .moto { grid-column: 1 / -1; }
.stcard {
  display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: var(--radius); background: var(--card);
  color: var(--ink); text-decoration: none; box-shadow: var(--shadow); min-width: 0;
}
@media (hover: hover) and (pointer: fine) { a.stcard:hover { color: var(--ink); box-shadow: var(--shadow-pop); } }
.stcard.free { box-shadow: none; border: 2px dashed var(--border); background: transparent; align-items: center; justify-content: center; text-align: center; min-height: 128px; }
.st-top { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.st-ic { width: 32px; height: 32px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.st-ic .ico { width: 17px; height: 17px; }
.st-ic.wash { background: var(--wash-bg); color: var(--wash); }
.st-ic.dry { background: var(--busy-bg); color: var(--busy); }
.st-ic.free { width: 38px; height: 38px; background: var(--primary-bg); color: var(--primary-dk); }
.st-ic.idle { width: 38px; height: 38px; background: var(--sunken); color: var(--muted); }
.st-name { font-weight: 700; font-size: .92rem; }
.st-sub { font-size: .78rem; color: var(--muted); font-weight: 500; }
.st-line { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-width: 0; }
.st-next { font-size: .8rem; font-weight: 700; color: var(--primary); margin-top: 2px; }
.chipx { font-size: .75rem; font-weight: 700; padding: 2px 9px; border-radius: 999px; white-space: nowrap; background: var(--sunken); color: var(--muted); }
.chipx.wash { background: var(--wash-bg); color: var(--wash); }
.chipx.dry { background: var(--busy-bg); color: var(--busy); }
.chipx.pay { background: var(--late-bg); color: var(--late); }
.chipx.free { background: var(--sunken); color: var(--muted); }

/* Indonesian plate (white since 2022): ink on white with a dark border */
.plt {
  display: inline-block; background: var(--plate-bg); color: var(--plate-ink); font-weight: 700; letter-spacing: .07em; font-size: 1.05rem; line-height: 1.3;
  padding: 1px 10px; border-radius: 7px; border: 2.5px solid var(--plate-ink); white-space: nowrap; font-variant-numeric: tabular-nums;
}
.plt.sm { font-size: .78rem; padding: 0 6px; border-width: 2px; border-radius: 6px; }
.plt.lg { font-size: 1.4rem; padding: 2px 16px; border-width: 3px; border-radius: 9px; }
.pgroup { display: flex; flex-direction: column; gap: 5px; }
.pgroup .lbl { display: flex; justify-content: space-between; align-items: baseline; font-size: .78rem; color: var(--muted); font-weight: 500; }
.pgroup .lbl .pl { display: inline-flex; align-items: center; }
.pgroup .lbl { white-space: nowrap; }
.pgroup .lbl b { color: var(--ink); font-size: .82rem; font-variant-numeric: tabular-nums; }
.pbar { display: block; height: 6px; border-radius: 99px; background: var(--sunken); overflow: hidden; }
.pbar > i { display: block; height: 100%; width: 100%; background: var(--wash-bar); border-radius: 99px; transform: translateX(-100%); transition: transform .3s var(--ease-out); }
.stcard.dry .pbar > i { background: var(--busy); }
.pbar.late > i { background: var(--late) !important; }
.timer { font-variant-numeric: tabular-nums; font-weight: 700; }
.timer.late { color: var(--late); }
.go { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; border-radius: var(--radius-md); background: var(--primary); color: var(--primary-ink); font-weight: 700; font-size: .9rem; padding: 0 14px; text-decoration: none; }
.go.full { width: 100%; }
.go.soft { background: var(--primary-bg); color: var(--primary-dk); }
.stcard.moto { gap: 10px; align-items: stretch; text-align: left; }
.stcard.moto.free { flex-direction: row; justify-content: space-between; min-height: 0; padding: 12px 14px; }
.mrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: var(--radius-md); background: var(--wash-bg); text-decoration: none; color: var(--ink); }
.mrow .sub { font-size: .78rem; color: var(--muted); display: block; }
.mrow .timer { color: var(--wash); }
.mrow .timer.late { color: var(--late); }
.mgrid { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }

/* awaiting payment cards */
.paycards { display: grid; gap: 10px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .paycards { grid-template-columns: 1fr 1fr; } }
.paycard { min-width: 0; background: var(--card); border-radius: var(--radius); padding: 14px; display: flex; flex-direction: column; gap: 12px; box-shadow: var(--shadow); border: 1.5px solid var(--late-bg); }
.paycard a.top { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); }
.paycard form { margin: 0; }
.payrow { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.payrow .btn { width: 100%; }

/* list rows with an icon avatar (board today list, customers, menu) */
.list { padding: 4px 0; overflow: hidden; }
.li { display: flex; align-items: center; gap: 12px; padding: 12px 16px; text-decoration: none; color: var(--ink); min-height: 56px; }
@media (hover: hover) and (pointer: fine) { a.li:hover { background: var(--hover); color: var(--ink); } }
.li + .li { border-top: 1px solid var(--line); }
.li .av { width: 44px; height: 44px; border-radius: 999px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--sunken); color: var(--muted); font-weight: 700; font-size: .85rem; }
.li .av .ico { width: 20px; height: 20px; }
.li .av.waiting { background: var(--sunken); color: var(--muted); }
.li .av.washing { background: var(--wash-bg); color: var(--wash); }
.li .av.drying { background: var(--busy-bg); color: var(--busy); }
.li .av.awaiting_payment { background: var(--late-bg); color: var(--late); }
.li .av.paid { background: var(--ok-bg); color: var(--ok); }
.li .av.cancelled { background: var(--sunken); color: var(--muted); }
.li .mid { flex: 1; min-width: 0; }
.li .t1 { font-weight: 700; font-size: 1rem; letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.li .t2 { font-size: .84rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.li .end { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.li .end b { font-variant-numeric: tabular-nums; }
.li .chev { color: var(--muted); width: 18px; height: 18px; }
.empty-note { padding: 14px 16px; color: var(--muted); }

.queue { padding: 4px 14px; }
.qrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 52px; text-decoration: none; color: var(--ink); border-bottom: 1px solid var(--line); }
.qrow:last-child { border-bottom: 0; }
.qrow .sub { font-size: .8rem; color: var(--muted); }

/* ---------------------------------------------------------------- job page */
.jobtop { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 4px 0 8px; }
.jobtop .cap { font-weight: 700; }
.jobhead { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; margin-bottom: 18px; }
.jobhead .sub { color: var(--muted); font-size: .9rem; margin: 0; }
.jobhead .amt { font-family: var(--display); font-weight: 800; font-style: italic; font-size: 2.6rem; line-height: 1.2; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.jobhead .meta { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; font-size: .85rem; color: var(--muted); }
.bigmoney { font-size: 1.4rem; font-weight: 700; }
.roundacts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 0 0 18px; }
.roundacts form { display: contents; }
.ract { display: flex; flex-direction: column; align-items: center; gap: 6px; border: 0; background: transparent; padding: 0; font: 500 .82rem var(--font); color: var(--ink); text-decoration: none; cursor: pointer; }
.ract .c { width: 56px; height: 56px; border-radius: 999px; background: var(--card); box-shadow: var(--shadow); display: flex; align-items: center; justify-content: center; }
.ract .c .ico { width: 22px; height: 22px; }
.ract.pri .c { background: var(--primary); color: var(--primary-ink); box-shadow: 0 0 0 6px var(--primary-bg); }
@media (hover: hover) and (pointer: fine) { .ract:hover { color: var(--ink); } }
.ract[disabled] { opacity: .4; cursor: not-allowed; }
.custcard { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .custcard:hover { color: var(--ink); } }
.custcard .ic { width: 44px; height: 44px; border-radius: 999px; background: var(--primary-bg); color: var(--primary-dk); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.custcard .mid { flex: 1; min-width: 0; }
.custcard small { display: block; font-size: .78rem; color: var(--muted); font-weight: 500; }
.custcard b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.svclist { list-style: none; padding: 0; margin: 4px 0 0; }
.svclist li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; font-size: .95rem; }
.svclist li span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; }
.svclist li.tot { border-top: 1.5px dashed var(--border); margin-top: 6px; padding-top: 10px; font-weight: 700; font-size: 1.02rem; }
.stage-timer { font-weight: 700; }
.proof { max-width: 100%; border-radius: var(--radius-md); margin-top: 10px; border: 1px solid var(--border); }

/* vertical timeline */
.tline { list-style: none; margin: 4px 0 0; padding: 0; position: relative; }
.tline li { display: flex; gap: 14px; position: relative; padding-bottom: 16px; }
.tline li:last-child { padding-bottom: 0; }
.tline li:not(:last-child)::before { content: ''; position: absolute; left: 11px; top: 24px; bottom: 0; width: 2px; background: var(--border); }
.tline .d { width: 24px; height: 24px; border-radius: 999px; background: var(--navy); color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; position: relative; z-index: 1; }
.tline .d .ico { width: 14px; height: 14px; }
.tline li.todo .d { background: var(--bg); border: 2px dashed var(--field); }
.tline li.todo .t { color: var(--muted); }
.tline .t { font-weight: 700; }
.tline .s { font-size: .85rem; color: var(--muted); display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tline-total { display: flex; justify-content: space-between; border-top: 1px solid var(--line); margin-top: 14px; padding-top: 10px; font-weight: 700; }

/* ---------------------------------------------------------------- tables */
.tbl { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tbl th, .tbl td { padding: 9px 6px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl th { font-size: .78rem; color: var(--muted); font-weight: 500; background: transparent; }
.tbl td.r, .tbl th.r { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tbl.small { font-size: .84rem; }
.tbl tr.sum td { font-weight: 700; border-top: 2px solid var(--line); }
.tscroll { overflow-x: auto; margin: 0 -16px; padding: 0 16px; }
.tscroll .tbl { min-width: 520px; }
.tscroll .tbl.narrow { min-width: 0; }

/* ---------------------------------------------------------------- KPI tiles & bars */
.kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 12px; }
@media (min-width: 640px) { .kpis { grid-template-columns: repeat(4, 1fr); } }
.kpi { background: var(--card); border-radius: 16px; padding: 13px 14px; box-shadow: var(--shadow); }
.kpi .l { font-size: .8rem; color: var(--muted); font-weight: 500; }
.kpi .v { font-size: 1.3rem; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.kpi .s { font-size: .8rem; color: var(--muted); }
.kpi.good .v { color: var(--ok); }
.kpi.bad .v { color: var(--late); }
.kpi.hero { grid-column: 1 / -1; background: var(--navy); color: #fff; box-shadow: none; padding: 20px; display: block; margin: 0; gap: 0; }
.kpi.hero .l, .kpi.hero .s { color: var(--navy-muted); }
.kpi.hero .v { font-family: var(--display); font-style: italic; font-weight: 800; font-size: 2.1rem; display: flex; align-items: center; gap: 14px; }
.kpi.hero a { color: #fff; }
.bar { height: 10px; background: var(--sunken); border-radius: 999px; overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--primary); border-radius: 999px; }
.bars .brow { display: grid; grid-template-columns: 70px 1fr 110px; gap: 8px; align-items: center; font-size: .85rem; margin: 6px 0; }
.bars .brow .n { text-align: right; font-variant-numeric: tabular-nums; font-weight: 500; }
.splitbar { display: flex; height: 14px; border-radius: 999px; overflow: hidden; gap: 3px; background: var(--sunken); }
.splitbar i { display: block; height: 100%; }
.legend { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: .9rem; margin-top: 10px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.legend b { font-variant-numeric: tabular-nums; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; margin-bottom: 12px; }
.filters label { font-size: .82rem; font-weight: 500; flex: 1; min-width: 130px; }
.filters .btn { min-height: 48px; }

/* ---------------------------------------------------------------- menu / settings list */
.menulist { display: grid; gap: 8px; }
.menulist a { display: flex; justify-content: space-between; align-items: center; padding: 15px 16px; background: var(--card); border-radius: 14px; text-decoration: none; color: var(--ink); font-weight: 700; box-shadow: var(--shadow); min-height: 54px; }
.grouplabel { font-size: .9rem; font-weight: 500; color: var(--muted); margin: 18px 4px 8px; }
.setlist { padding: 4px 0; }
.setlist .sr { display: flex; align-items: center; gap: 12px; padding: 8px 14px 8px 12px; min-height: 58px; text-decoration: none; color: var(--ink); background: transparent; border: 0; width: 100%; font: inherit; cursor: pointer; text-align: left; }
.setlist .sr + .sr, .setlist form + .sr, .setlist .sr + form .sr { border-top: 1px solid var(--line); }
.setlist form { margin: 0; }
@media (hover: hover) and (pointer: fine) { .setlist .sr:hover { background: var(--hover); color: var(--ink); } }
.setlist .sr .ic { width: 40px; height: 40px; border-radius: 999px; background: var(--bg); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.setlist .sr .ic .ico { width: 20px; height: 20px; }
.setlist .sr .tt { flex: 1; font-weight: 500; }
.setlist .sr .vv { font-size: .9rem; color: var(--muted); white-space: nowrap; }
.setlist .sr .chev { width: 18px; height: 18px; color: var(--muted); }
.setlist .sr.danger, .setlist .sr.danger .ic { color: var(--late); }
.bizcard { display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--ink); }
.bizcard img { width: 60px; height: 60px; border-radius: 18px; display: block; flex-shrink: 0; }
.bizcard .mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.bizcard .mid > b { font-size: 1.12rem; }
.bizcard .tags { display: flex; flex-wrap: wrap; gap: 6px; }

.warnbox { background: var(--busy-bg); border: 1px solid var(--busy-line); border-radius: 14px; padding: 12px 14px; margin-bottom: 12px; font-size: .92rem; color: var(--busy); }
.infobox { display: flex; gap: 12px; align-items: flex-start; background: var(--sunken); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 12px; font-size: .92rem; }
.pricegrid th, .pricegrid td { padding: 6px 4px; }
.pricegrid input { min-height: 44px; padding: 6px 8px; min-width: 78px; text-align: right; }
.inline { display: inline; }

/* ---------------------------------------------------------------- cashflow ledger and cash card */
.ledger .lrow { display: grid; grid-template-columns: 44px 1fr auto; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--line); align-items: start; }
.ledger .lrow:last-child { border-bottom: 0; }
.ledger .ld { color: var(--muted); font-size: .82rem; padding-top: 1px; font-weight: 500; }
.ledger .lm { min-width: 0; overflow-wrap: anywhere; font-weight: 500; font-size: .92rem; }
.ledger .lm form.inline { display: inline-block; margin-left: 6px; }
.ledger .la { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; font-size: .92rem; }
.ledger .la.in { color: var(--ok); }
.ledger .la.out { color: var(--late); }
.ledger .la small { display: block; font-weight: 500; color: var(--muted); font-size: .75rem; }
a.cashcard { display: block; text-decoration: none; color: inherit; }
.cashcard .cashrow { display: flex; justify-content: space-between; padding: 5px 0; }
.cashcard .cashrow.tot { border-top: 2px solid var(--line); margin-top: 4px; padding-top: 9px; font-size: 1.05rem; }
.ledger .lm a { color: inherit; text-decoration: none; border-bottom: 1px dotted var(--muted); }
.kpi.dark { background: var(--navy); color: #fff; box-shadow: none; }
.kpi.dark .l { color: var(--navy-muted); }
.balhero { grid-column: 1 / -1; background: var(--navy); color: #fff; border-radius: var(--radius); padding: 20px; }
.balhero .l { font-size: .85rem; color: var(--navy-muted); font-weight: 500; }
.balhero .v { font-family: var(--display); font-style: italic; font-size: 2rem; font-weight: 800; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.balsplit { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.balsplit div { background: rgba(255, 255, 255, .08); border-radius: 14px; padding: 10px 12px; }
.balsplit span { display: block; font-size: .78rem; color: var(--navy-muted); }
.balsplit b { font-size: 1.02rem; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- attendance calendar */
.cal { margin-bottom: 12px; }
.cal-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.cal-head b { font-size: 1.02rem; font-weight: 700; }
.cal-head a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 999px; background: var(--primary-bg); color: var(--primary-dk); text-decoration: none; font-size: 1.3rem; font-weight: 700; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal-dow { text-align: center; font-size: .75rem; font-weight: 500; color: var(--muted); padding: 2px 0 4px; }
.cal-day {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 2px;
  min-height: 56px; padding: 5px 2px 4px; border-radius: 12px; background: var(--hover); text-decoration: none; color: var(--ink);
  border: 2px solid transparent;
}
.cal-day.out { background: transparent; opacity: .35; pointer-events: none; }
.cal-day .d { font-size: .8rem; font-weight: 700; }
.cal-day.today .d { background: var(--sel-bg); color: var(--sel-ink); border-radius: 999px; min-width: 22px; text-align: center; padding: 0 4px; }
.cal-day.sel { border-color: var(--primary); background: var(--card); }
.cal-day .n { font-size: 1rem; font-weight: 700; line-height: 1; }
.cal-day .o { font-size: .75rem; font-weight: 700; color: var(--busy); background: var(--busy-bg); border-radius: 999px; padding: 0 6px; }
.cal-day.lv1 { background: var(--cal1); }
.cal-day.lv2 { background: var(--cal2); }
.cal-day.lv3 { background: var(--cal3); }
.cal-day.low .n { color: var(--late); }
.cal-day.zero .n { color: var(--muted); }
.cal-key { display: flex; flex-wrap: wrap; gap: 10px; font-size: .78rem; color: var(--muted); margin-top: 8px; }
.cal-key i { display: inline-block; width: 12px; height: 12px; border-radius: 4px; vertical-align: -1px; margin-right: 4px; }
.offweek { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.offweek:last-child { border-bottom: 0; }
.offweek .nm { font-weight: 700; }
.offweek .ct { font-weight: 700; font-variant-numeric: tabular-nums; padding: 2px 12px; border-radius: 999px; background: var(--primary-bg); color: var(--primary-dk); }
.offweek .ct.zero { background: var(--sunken); color: var(--muted); }
.offweek .ct.many { background: var(--busy-bg); color: var(--busy); }

/* ---------------------------------------------------------------- column charts */
.cols { display: flex; align-items: flex-end; gap: 8px; height: 160px; }
.cols .col { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; min-width: 0; }
.cols .col i { display: block; width: 100%; background: var(--chart-bar); border-radius: 4px 4px 0 0; min-height: 3px; }
.cols .col.now i { background: var(--sel-bg); }
.cols .amt { font-size: .75rem; font-weight: 500; color: var(--muted); height: 16px; white-space: nowrap; }
.cols .dn { font-size: .75rem; font-weight: 500; color: var(--muted); }
.cols .col.now .dn, .cols .col.now .amt { color: var(--ink); font-weight: 700; }
.cols .col .amt, .cols .col .dn { flex: none; }
.cols .col i { flex: 0 0 auto; }

.filterbox .frow { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 480px) { .filterbox .frow { grid-template-columns: 1fr; } }
.stmt td, .stmt th { padding: 7px 6px; font-size: .84rem; vertical-align: top; }
.stmt td.in { color: var(--ok); } .stmt td.out { color: var(--late); }
.stmt tr.open td { background: var(--bg); }

/* top services */
.track { height: 6px; border-radius: 999px; background: var(--sunken); overflow: hidden; margin-top: 6px; }
.track i { display: block; height: 100%; background: var(--primary); border-radius: 999px; }

/* ---------------------------------------------------------------- report page */
.report-head { display: none; align-items: center; justify-content: space-between; gap: 16px; padding: 4px 4px 16px; }
.report-head img { height: 44px; width: auto; display: block; }
.report-head div { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.report-head b { font-size: 1rem; }
.report-head span { font-size: .78rem; color: var(--muted); }
.mgrid4 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; border-top: 1px solid rgba(255, 255, 255, .16); margin-top: 10px; padding-top: 12px; }
@media (min-width: 640px) { .mgrid4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.mgrid4 span { display: block; font-size: .78rem; color: var(--navy-muted); font-weight: 500; }
.mgrid4 b { display: block; font-size: 1.02rem; font-variant-numeric: tabular-nums; }
.hero .balance { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 14px; padding: 12px 14px; border-radius: 14px; background: rgba(255, 255, 255, .1); }
.hero .balance span { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: .92rem; }
.hero .balance b { font-size: 1.3rem; font-variant-numeric: tabular-nums; }
.hero .balance.neg b { color: #ffb3b6; }
.cols.many { gap: 3px; }
.cols.many .amt { overflow: visible; position: relative; z-index: 1; }
.weekstrip { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.weekstrip .day { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.weekstrip .dl { font-size: .75rem; color: var(--muted); font-weight: 500; }
.weekstrip .dd { width: 38px; height: 38px; border-radius: 999px; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .9rem; background: var(--sunken); }
.weekstrip .dc { font-size: .8rem; font-weight: 700; display: inline-flex; align-items: center; gap: 2px; }
.weekstrip .today .dl { color: var(--ink); font-weight: 700; }
.weekstrip .today .dd { background: var(--sel-bg); color: var(--sel-ink); }
.weekstrip .today .dc { color: var(--primary-dk); }
.weekstrip .fut .dd { background: transparent; border: 1.5px dashed var(--border); color: var(--muted); }
.weekstrip .fut .dc { color: var(--muted); font-weight: 500; }
.rsec-h { margin-top: 4px; }

/* Export to image: a fixed-width, chrome-free copy of the report */
body.exporting #report { width: 640px; max-width: none; background: var(--bg); padding: 20px; }
body.exporting .report-head, .printing .report-head { display: flex; }
body.exporting #report .noprint { display: none !important; }
body.exporting .disp, body.exporting .hero .hv b { letter-spacing: 0; }

@media print {
  @page { size: A4; margin: 12mm; }
  html, body { background: #fff !important; }
  body { padding: 0 !important; font-size: 12px; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .topbar, .bottomnav, .fab, .noprint, .flash { display: none !important; }
  .wrap { max-width: none; padding: 0; }
  .report-head { display: flex; }
  .card { box-shadow: none; border: 1px solid var(--border); break-inside: avoid; }
  .hero, .rsec, .rsec-h { break-inside: avoid; }
  .rsec-h { break-after: avoid; page-break-after: avoid; }
  .tscroll { overflow: visible; margin: 0; padding: 0; }
  .tscroll .tbl { min-width: 0; }
  a { color: inherit; text-decoration: none; }
}
.li .mid .row b.num { white-space: nowrap; flex-shrink: 0; }
.li .mid .row b:first-child { min-width: 0; }

/* ---------------------------------------------------------------- board: next-step buttons on station tiles */
.stcard { position: relative; }
.st-link { display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: var(--ink); min-width: 0; }
@media (hover: hover) and (pointer: fine) { .st-link:hover { color: var(--ink); } }
.stcard form { margin: 4px 0 0; }
.st-act {
  width: 100%; min-height: 52px; border: 0; border-radius: var(--radius-md); background: var(--primary); color: var(--primary-ink); cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px; padding: 6px 10px; font: 700 .9rem/1.2 var(--font); text-align: left;
}
.st-act span { display: flex; flex-direction: column; }
.st-act small { font-weight: 500; font-size: .75rem; opacity: .9; }
@media (hover: hover) and (pointer: fine) { .st-act:hover { background: var(--primary-dk); } }
.st-act:active { transform: translateY(1px); }
.st-act[disabled] { background: var(--sunken); color: var(--muted); cursor: not-allowed; }
.st-act.sm { width: auto; min-height: 44px; padding: 0 14px; font-size: .85rem; flex-shrink: 0; }
.st-due { display: none; align-items: center; gap: 4px; font-size: .78rem; font-weight: 700; color: var(--late); }
/* the stage passed its target time: a soft red frame and a small label; the button itself stays the normal blue */
.stcard.due { box-shadow: 0 0 0 2px rgba(200, 16, 26, .4), var(--shadow); }
.stcard.due .st-due { display: inline-flex; }
.mrow { gap: 8px; }
.mrow .mlink { display: flex; flex-direction: column; gap: 2px; text-decoration: none; color: var(--ink); min-width: 0; flex: 1; }
.mrow.due { box-shadow: 0 0 0 1.5px rgba(200, 16, 26, .4); }

/* ---------------------------------------------------------------- expenses & stock lists */
.li .av.exp { border-radius: 14px; background: var(--busy-bg); color: var(--busy); }
.li .av.stk { border-radius: 14px; background: var(--primary-bg); color: var(--primary-dk); }
.li .av.stk.warn { background: var(--busy-bg); color: var(--busy); }
.li .av.stk.out { background: var(--late-bg); color: var(--late); }
.dayhead { margin-top: 18px; }
.dayhead b { font-size: .95rem; }
.icb.sm { width: 44px; height: 44px; box-shadow: none; background: var(--bg); }
.icb.sm .ico { width: 18px; height: 18px; }
.icb.danger { color: var(--late); }

/* ---------------------------------------------------------------- stock alerts & purchase links */
.icb { position: relative; }
.dotnum { position: absolute; top: 2px; right: 0; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--late); color: var(--on-danger); font-size: .75rem; font-weight: 700; display: flex; align-items: center; justify-content: center; border: 2px solid var(--card); line-height: 1; }
.alertbar { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: 14px; border-radius: var(--radius); background: var(--busy-bg); color: var(--busy); text-decoration: none; border: 1px solid var(--busy-line); }
@media (hover: hover) and (pointer: fine) { .alertbar:hover { color: var(--busy); } }
.alertbar .ic { width: 36px; height: 36px; border-radius: 999px; background: var(--card); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.alertbar .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.alertbar .tx span { font-size: .84rem; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.buyrow { display: flex; flex-wrap: wrap; gap: 6px; width: 100%; padding-left: 56px; }
.buylink { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: 999px; background: var(--primary); color: var(--primary-ink); text-decoration: none; font-weight: 700; font-size: .85rem; }
@media (hover: hover) and (pointer: fine) { .buylink:hover { background: var(--primary-dk); color: var(--primary-ink); } }
.buylink.sm { background: var(--primary-bg); color: var(--primary-dk); min-height: 36px; }
@media (hover: hover) and (pointer: fine) { .buylink.sm:hover { color: var(--primary-dk); } }
.alertlist .li { border-left: 0; }
.itemedit { border-top: 1px solid var(--line); padding: 14px 0; }
.linkbox { margin-top: 10px; padding: 12px; border-radius: var(--radius-md); background: var(--bg); display: flex; flex-direction: column; gap: 8px; }
.linkbox > b { display: inline-flex; align-items: center; gap: 6px; font-size: .9rem; }
.linkrow { display: flex; align-items: center; gap: 8px; margin: 0; min-width: 0; }
.linkrow a { font-weight: 700; white-space: nowrap; }
.linkrow .u { flex: 1; min-width: 0; font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.linkadd { display: grid; grid-template-columns: 1fr; gap: 8px; margin: 0; }
@media (min-width: 560px) { .linkadd { grid-template-columns: 2fr 1fr auto; } }
.linkadd input { min-height: 44px; }

/* ---------------------------------------------------------------- install as app */
.installbar { display: flex; align-items: center; gap: 10px; max-width: 728px; margin: 4px auto 0; padding: 10px 10px 10px 12px; background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); width: calc(100% - 32px); }
.installbar[hidden] { display: none; }
.installbar img { border-radius: 10px; flex-shrink: 0; }
.installbar .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.installbar .tx b { font-size: .92rem; }
.installbar .tx span { font-size: .78rem; color: var(--muted); }
.installhero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 18px 8px 22px; }
.installhero img { border-radius: 24px; box-shadow: var(--shadow-pop); }
.installhero h1 { font-size: 1.9rem; margin: 6px 0 0; }
.installhero p { margin: 0; color: var(--muted); max-width: 420px; }
.installhero .btn { margin-top: 6px; min-width: 260px; }
.installed-note { display: inline-flex; align-items: center; gap: 6px; color: var(--ok) !important; font-weight: 700; }
.install-steps ol, .install-steps ul { margin: 6px 0 0; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; }
.install-steps h2 { display: flex; align-items: center; gap: 8px; }
.kbd { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 8px; background: var(--sunken); font-weight: 700; font-size: .85rem; white-space: nowrap; }
.kbd .ico { width: 14px; height: 14px; }
@media (display-mode: standalone) { [data-standalone-hide] { display: none; } }
.mrow .mlink .plt { align-self: flex-start; }
.cal-day .o.s { color: var(--late); background: var(--late-bg); }
.weekstrip .dm { display: flex; gap: 2px; min-height: 16px; }
.weekstrip .dm .o { font-style: normal; font-size: .75rem; font-weight: 700; padding: 0 5px; border-radius: 999px; background: var(--busy-bg); color: var(--busy); }
.weekstrip .dm .o.s { background: var(--late-bg); color: var(--late); }
.weekstrip .payday .dd { box-shadow: 0 0 0 2px var(--primary); }

/* ---------------------------------------------------------------- price list (follows the "Daftar harga" design) */
.pricelist { display: flex; flex-direction: column; gap: 16px; }
.pl-head { background: var(--navy); color: #fff; border-radius: var(--radius); padding: 20px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; }
.pl-head img { height: 52px; width: auto; display: block; }
.pl-title { display: flex; flex-direction: column; gap: 6px; }
@media (min-width: 640px) { .pl-head { padding: 26px 32px; } .pl-head img { height: 72px; } .pl-title { align-items: flex-end; text-align: right; } }
.pl-title h1 { margin: 0; display: flex; align-items: center; gap: 12px; font-family: var(--display); font-style: italic; font-weight: 800; font-size: 2rem; line-height: 1.15; letter-spacing: -.01em; color: #fff; }
.pl-title p { margin: 0; font-size: .92rem; font-weight: 500; color: var(--navy-muted); }
.pl-sec { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; margin-top: 4px; }
.pl-label { font-family: var(--display); font-style: italic; font-weight: 800; font-size: .95rem; letter-spacing: .3em; color: var(--primary); text-transform: uppercase; }
.pl-sub { font-size: .88rem; font-weight: 700; color: var(--muted); }
.pl-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 600px) { .pl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .pl-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } }
.pl-card { background: var(--card); border: 2px solid var(--border); border-radius: var(--radius); padding: 18px 20px 16px; display: flex; flex-direction: column; gap: 10px; }
.pl-card .pl-tag { min-height: 24px; display: flex; align-items: center; gap: 10px; font-size: .85rem; font-weight: 700; color: var(--muted); }
.pl-card h2 { margin: 0; font-family: var(--display); font-style: italic; font-weight: 800; font-size: 1.55rem; line-height: 1.2; }
.pl-card .pl-tagline { margin: -4px 0 0; font-size: .85rem; font-weight: 500; opacity: .85; }
.pl-card ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; font-size: .98rem; }
.pl-card li { display: flex; gap: 8px; align-items: flex-start; }
.pl-card li .ico { color: var(--primary); margin-top: 2px; }
.pl-card li.b { font-weight: 700; }
.pl-fill { flex: 1; }
.pl-price { margin: 0; padding-top: 12px; border-top: 1px solid var(--border); font-family: var(--display); font-style: italic; font-weight: 800; font-size: 2.2rem; line-height: 1.15; font-variant-numeric: tabular-nums; }
.pl-price small { font-size: 1rem; }
.pl-sizes { padding-top: 10px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 4px; }
.pl-sizes div { display: flex; justify-content: space-between; gap: 8px; font-size: .95rem; }
.pl-sizes b { font-variant-numeric: tabular-nums; }
.pl-card.featured { background: var(--brand-blue); border-color: var(--brand-blue); color: #fff; box-shadow: var(--shadow-pop); }
.pl-card.featured li .ico { color: #fff; }
.pl-card.featured .pl-price, .pl-card.featured .pl-sizes { border-top-color: #7fa6dc; }
.pl-card .pill-hot { padding: 3px 12px; border-radius: 999px; background: #fff; color: #1f3659; font-size: .8rem; font-weight: 700; }
.pl-grid2 { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 700px) { .pl-grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }
.pl-list { background: var(--card); border: 2px solid var(--border); border-radius: var(--radius); padding: 16px 20px 8px; }
.pl-list.dark { background: var(--navy); border-color: var(--navy); color: #fff; }
.pl-list-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding-bottom: 6px; }
.pl-list-h h3 { margin: 0; font-family: var(--display); font-style: italic; font-weight: 800; font-size: 1.25rem; }
.pl-list-h span { font-size: .85rem; font-weight: 700; color: var(--muted); }
.pl-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 9px 0; border-top: 1px solid var(--border); font-size: 1rem; }
.pl-list.dark .pl-row { border-top-color: #34507e; }
.pl-row b { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pl-row small { font-weight: 500; opacity: .8; }
.svcmore { margin: 6px 0 0; }
.svcmore > summary { font-size: .85rem; padding: 6px 0; min-height: 0; }
.svcmore label { display: block; font-size: .82rem; font-weight: 500; margin: 6px 0; text-align: left; }
.svcmore select, .svcmore textarea { min-height: 40px; padding: 6px 8px; font-size: 1rem; text-align: left; }
body.exporting .pricelist { gap: 14px; }
@media print { .pl-card, .pl-list { break-inside: avoid; } .pl-head, .pl-card.featured, .pl-list.dark { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }

/* ---------------------------------------------------------------- QRIS payment steps */
.qs-step { display: flex; align-items: center; gap: 8px; margin: 4px 0 10px; font-weight: 700; }
.qs-step span { width: 24px; height: 24px; border-radius: 999px; background: var(--navy); color: #fff; font-size: .8rem; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.qrisstep { display: flex; flex-direction: column; gap: 12px; margin-top: 6px; }
.qs-img { position: relative; display: block; width: 100%; max-width: 250px; margin: 0 auto; padding: 12px; border: 2px solid var(--border); border-radius: var(--radius); background: #fff; color: var(--plate-ink); cursor: zoom-in; }
.qs-img img { display: block; width: 100%; height: auto; border-radius: 8px; }
.qs-zoom { position: absolute; right: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; background: rgba(31, 54, 89, .85); color: #fff; font-size: .75rem; font-weight: 700; }
.qs-amount { display: flex; justify-content: space-between; align-items: baseline; padding: 10px 14px; border-radius: var(--radius-md); background: var(--bg); }
.qs-amount span { color: var(--muted); font-weight: 500; }
.qs-amount b { font-family: var(--display); font-style: italic; font-weight: 800; font-size: 1.6rem; font-variant-numeric: tabular-nums; }
.qris-full { position: fixed; inset: 0; z-index: 60; background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 24px; }
.qris-full img { width: min(92vw, 70vh); width: min(92vw, 70svh); height: auto; }
.qris-full b { font-family: var(--display); font-style: italic; font-weight: 800; font-size: 2rem; color: var(--plate-ink); }
.qris-thumb { display: block; width: 180px; height: auto; border: 1px solid var(--border); border-radius: var(--radius-md); margin: 4px 0 12px; background: #fff; padding: 6px; }

/* ---------------------------------------------------------------- drinks: on a vehicle's bill and sold at the counter */
.hero .hsub { font-size: .8rem; color: var(--navy-muted); font-weight: 500; margin-top: -2px; }
.jobhead .billsplit { margin-top: -4px; }
.svclist li.sub { color: var(--muted); }
.drinkline { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.drinkline .nm { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.drinkline .nm b { line-height: 1.3; }
.drinkline .nm small { color: var(--muted); font-size: .8rem; }
.drinkline .amt { min-width: 76px; text-align: right; }
.stepper { display: inline-flex; align-items: center; gap: 4px; }
.stepper form { display: contents; }
.stp {
  width: 44px; height: 44px; border-radius: 999px; border: 1.5px solid var(--field); background: var(--card); color: var(--ink);
  font: 700 1.3rem/1 var(--font); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0;
}
.stp:active { background: var(--primary-bg); }
.stp[disabled] { opacity: .35; cursor: not-allowed; }
.stepper .q { min-width: 28px; text-align: center; font-variant-numeric: tabular-nums; }
.stepper input.q { width: 48px; min-height: 44px; border: 1.5px solid var(--border); border-radius: var(--radius-sm); font: 700 1rem var(--font); color: var(--ink); background: var(--card); -moz-appearance: textfield; }
.stepper input.q::-webkit-inner-spin-button, .stepper input.q::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.prodgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; margin-top: 12px; }
.prodgrid form { display: block; }
.prod {
  position: relative; width: 100%; min-height: 60px; display: grid; grid-template-columns: 34px 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center;
  text-align: left; padding: 10px 40px 10px 10px; border: 1.5px solid var(--border); border-radius: var(--radius-md); background: var(--card); color: var(--ink); font: inherit; cursor: pointer;
}
@media (hover: hover) and (pointer: fine) { .prod:hover { border-color: var(--primary); } }
.prod:active { background: var(--primary-bg); }
.prod[disabled] { opacity: .5; cursor: not-allowed; }
.prod .pi { grid-row: 1 / 3; }
.sellitem .pi { grid-row: 1 / 4; }
.prod .pi, .sellitem .pi { width: 34px; height: 34px; border-radius: 10px; background: var(--primary-bg); color: var(--primary-dk); display: flex; align-items: center; justify-content: center; }
.prod .pi .ico, .sellitem .pi .ico { width: 18px; height: 18px; }
.prod .pn, .sellitem .pn { font-weight: 700; font-size: .92rem; line-height: 1.25; }
.prod .pp, .sellitem .pp { font-variant-numeric: tabular-nums; font-size: .9rem; }
.ps { font-size: .76rem; color: var(--muted); }
.ps.low { color: var(--busy); font-weight: 700; }
.ps.out { color: var(--late); font-weight: 700; }
.prod .plus { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border-radius: 999px; background: var(--primary); color: var(--primary-ink); display: flex; align-items: center; justify-content: center; }
.sellgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 10px; margin-bottom: 14px; }
.sellitem {
  display: grid; grid-template-columns: 34px 1fr auto; grid-template-rows: auto auto auto; column-gap: 10px; align-items: center;
  padding: 10px 12px; border: 1.5px solid var(--border); border-radius: var(--radius-md); background: var(--card); min-width: 0;
}
.sellitem.on { border-color: var(--primary); background: var(--primary-bg); }
.sellitem.out { opacity: .55; }
.sellitem .pn, .sellitem .pp, .sellitem .ps { grid-column: 2; }
.sellitem .stepper { grid-column: 3; grid-row: 1 / 4; }
.form .sellitem .stepper input.q { width: 48px; padding: 0; margin: 0; }
.targets { display: flex; flex-wrap: wrap; gap: 8px; }
.target { position: relative; margin: 0 !important; }
.target input { position: absolute; opacity: 0; inset: 0; }
.target > span {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-height: 56px; padding: 8px 12px; border: 1.5px solid var(--field);
  border-radius: var(--radius-md); background: var(--card); font-weight: 500; cursor: pointer;
}
.target > span small { font-size: .76rem; color: var(--muted); font-weight: 500; }
.target input:checked + span { border-color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); background: var(--primary-bg); }
.target input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
.target.direct > span b { font-size: .95rem; }
#paybox { margin-top: 14px; }
.sellbar {
  position: sticky; bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 8px); z-index: 5; margin-top: 14px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 10px 10px 16px;
  background: var(--navy); color: #fff; border-radius: var(--radius-md); box-shadow: var(--shadow-pop);
}
.sellbar small { display: block; color: var(--navy-muted); font-size: .76rem; }
.sellbar b { font-family: var(--display); font-style: italic; font-weight: 800; font-size: 1.45rem; font-variant-numeric: tabular-nums; }
.sellbar .btn { flex-shrink: 0; }
.sellbar .btn[disabled] { opacity: .6; }
.receipt { align-items: flex-start; }
.receipt .t2.rline { display: flex; justify-content: space-between; gap: 10px; white-space: normal; }
.rline.void span:first-child, .receipt.void .t1 { text-decoration: line-through; }
.linkbtn { border: 0; background: none; padding: 0 2px; min-height: 32px; font: 700 .8rem var(--font); color: var(--late); cursor: pointer; text-decoration: underline; }
.prodinfo { display: block; font-size: .8rem; color: var(--ok); font-weight: 700; }
.badge.warn { background: var(--busy-bg); color: var(--busy); }

/* ---------------------------------------------------------------- staff earnings: payment status, recap, slip */
.kpis.k3 .kpi:first-child { grid-column: 1 / -1; }
@media (min-width: 640px) { .kpis.k3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .kpis.k3 .kpi:first-child { grid-column: auto; } }
body.exporting .kpis.k3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
body.exporting .kpis.k3 .kpi:first-child { grid-column: auto; }
.cl { display: flex; flex-direction: column; }
.cl-row { padding: 12px 0; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; }
.cl-row:last-child { border-bottom: 0; }
.cl-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.cl-name { font-weight: 700; font-size: 1.02rem; color: var(--ink); text-decoration: none; }
.cl-name::after { content: ' ›'; color: var(--muted); font-weight: 500; }
.cl-amt { font-size: 1.08rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cl-sub { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: .84rem; color: var(--muted); }
.cl-pay { display: flex; align-items: center; gap: 6px 14px; flex-wrap: wrap; font-size: .84rem; color: var(--muted); }
.cl-pay b { color: var(--ink); font-variant-numeric: tabular-nums; }
.cl-pay b.neg { color: var(--late); }
.cl-pay .btn { margin-left: auto; }
.cl-total { border-top: 2px solid var(--line); }
.cl-total .cl-top span { font-weight: 700; }
.tbl b.neg { color: var(--late); }
.tbl td.cst-cell { white-space: nowrap; }
.tbl td.cst-cell .btn { margin-left: 6px; }
.tbl.recap th small, .tbl.recap td small { display: block; font-size: .75rem; font-weight: 600; color: var(--muted); }
.tbl.recap th a, .tbl.recap td a { color: inherit; text-decoration: none; }
.tbl.recap small.cst.ok { color: var(--ok); }
.tbl.recap small.cst.warn { color: var(--busy); }
.tbl.recap small.cst.navy { color: var(--primary); }
.tbl.recap td:first-child { white-space: nowrap; font-weight: 600; }
body.exporting #report.wide { width: max-content; min-width: 640px; }
body.exporting #report .tscroll { overflow: visible; margin: 0; padding: 0; }
.slip { display: flex; flex-direction: column; gap: 12px; }
.slip .card { margin: 0; }
.slip-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; background: var(--navy); color: #fff; border-radius: var(--radius); padding: 18px 20px; }
.slip-head img { height: 40px; width: auto; display: block; }
.slip-t { display: flex; flex-direction: column; align-items: flex-end; text-align: right; min-width: 0; }
.slip-t span { font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--sky); font-weight: 700; }
.slip-t b { font-family: var(--display); font-style: italic; font-weight: 800; font-size: 1.5rem; line-height: 1.15; }
.slip-t small { color: var(--navy-muted); font-size: .8rem; }
.slip-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.slip-stats div { background: var(--card); border-radius: 16px; padding: 10px 12px; box-shadow: var(--shadow); text-align: center; }
.slip-stats span { display: block; font-size: .78rem; color: var(--muted); }
.slip-stats b { font-size: 1.35rem; font-variant-numeric: tabular-nums; }
.slip-foot { font-size: .78rem; margin: 0; }
@media (max-width: 420px) { .slip-head { flex-direction: column; align-items: flex-start; } .slip-t { align-items: flex-start; text-align: left; } }
@media print { .slip-head { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }

/* ---------------------------------------------------------------- job page: promos, member rewards, WhatsApp */
.disccard .num.neg { color: var(--ok); }
.discline { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.discline .nm { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.discline .nm small { color: var(--muted); font-size: .8rem; }
.discline .num { color: var(--ok); white-space: nowrap; }
.discline form { margin: 0; }
.discopts { display: flex; flex-direction: column; gap: 8px; margin: 4px 0; }
.discopts form { margin: 0; }
.discopt { width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border: 1.5px dashed var(--primary); border-radius: var(--radius-md); background: var(--card); color: var(--ink); font: inherit; text-align: left; cursor: pointer; min-height: 52px; }
.discopt .t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.discopt .t small { color: var(--muted); font-size: .8rem; }
.discopt .a { font-weight: 700; color: var(--primary); white-space: nowrap; }
.discopt.rw { border-color: var(--ok); background: var(--ok-bg); }
.discopt.rw .a { color: var(--ok); }
.discopt:disabled { border-color: var(--border); opacity: .55; cursor: not-allowed; }
.discopt:disabled .a { color: var(--muted); font-weight: 500; }
.memline { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 10px 0 6px; font-size: .92rem; }
.svclist li.disc { color: var(--ok); }
.wa-btn { margin: 0 0 12px; background: var(--wa-bg); border-color: var(--wa-line); color: var(--wa-ink); }
@media (hover: hover) and (pointer: fine) { .wa-btn:hover { color: var(--wa-ink); } }

/* ---------------------------------------------------------------- promos, members, feedback (owner pages) */
.fset { border: 0; padding: 0; margin: 0 0 12px; min-width: 0; }
.fset legend { font-weight: 700; font-size: .92rem; padding: 0; margin-bottom: 2px; }
.fset .hint { margin: 0 0 8px; }
.checkgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; }
.daypick { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.daypick label { position: relative; }
.daypick input { position: absolute; opacity: 0; inset: 0; }
.daypick span { display: flex; align-items: center; justify-content: center; min-height: 44px; border: 1.5px solid var(--border); border-radius: var(--radius-md); font-weight: 700; font-size: .85rem; background: var(--card); cursor: pointer; }
.daypick input:checked + span { background: var(--sel-bg); border-color: var(--sel-bg); color: var(--sel-ink); }
.daypick input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
.promolist { display: flex; flex-direction: column; gap: 10px; }
.promo { border: 1.5px solid var(--border); border-radius: var(--radius-md); padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; }
.promo.off { opacity: .6; }
.pm-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.pm-top b { font-size: 1.02rem; }
.pm-val { font-weight: 700; color: var(--primary); }
.pm-meta { font-size: .84rem; color: var(--muted); display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.pm-note { font-size: .88rem; }
.pm-act { display: flex; align-items: center; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.pm-act form { margin: 0; }
.pm-act form:first-child { margin-right: auto; }
.bar.low > i { background: var(--busy); }
.bars .brow .r { text-align: right; font-variant-numeric: tabular-nums; }
.stamps { display: grid; grid-template-columns: repeat(10, 1fr); gap: 5px; margin: 12px 0 8px; }
.stamp { aspect-ratio: 1; border-radius: 999px; border: 2px dashed var(--border); display: flex; align-items: center; justify-content: center; font-size: .78rem; font-weight: 700; color: var(--muted); background: var(--card); }
.stamp .ico { width: 15px; height: 15px; }
.stamp.gift { border-style: solid; border-color: var(--sky); color: var(--sky); }
.stamp.on { background: var(--navy); border: 2px solid var(--navy); color: #fff; }
.stamp.on.gift { background: var(--red, #ed1c24); border-color: var(--red, #ed1c24); }
.fbitem { border-bottom: 1px solid var(--line); padding: 12px 0; display: flex; flex-direction: column; gap: 6px; }
.fbitem:last-child { border-bottom: 0; }
.fb-top { display: flex; justify-content: space-between; gap: 8px; align-items: center; flex-wrap: wrap; }
.fb-stars { color: var(--star); letter-spacing: 1px; font-size: 1rem; }
.fb-msg { white-space: pre-wrap; }
.fb-meta { font-size: .82rem; color: var(--muted); }
.fb-act { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.fb-act form { margin: 0; flex: 1; display: flex; gap: 8px; min-width: 220px; }
.fb-act input { flex: 1; min-width: 0; }
.hourgrid { display: flex; flex-direction: column; gap: 8px; }
.hourrow { display: grid; grid-template-columns: 74px auto 1fr 1fr; gap: 8px; align-items: center; }
.hourrow input[type=time] { min-width: 0; }
.qrbox { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 16px; border: 1.5px solid var(--border); border-radius: var(--radius); background: #fff; --muted: #4a5b78; color: var(--plate-ink); }
.qrbox canvas, .qrbox img { width: 220px; height: 220px; image-rendering: pixelated; }
.qrbox .u { font-size: .8rem; color: var(--muted); word-break: break-all; text-align: center; }
.form .frow { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.form .frow label { min-width: 0; }
.rwrule { border-bottom: 1px solid var(--line); padding: 10px 0; }
.rw-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rw-h .muted { font-size: .85rem; }
.rwform { margin-top: 8px; }
.memlist { display: flex; flex-direction: column; }
.memrow { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.memrow:last-child { border-bottom: 0; }
.memrow .mid { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.memrow .mid small { color: var(--muted); font-size: .8rem; }

/* ---------------------------------------------------------------- public customer page */
body.pub { padding-bottom: 24px; }
.pub .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.pub-hero { background: var(--navy); color: #fff; padding: calc(14px + env(safe-area-inset-top)) 16px 18px; border-radius: 0 0 28px 28px; }
.pub-hero > * { max-width: 760px; margin-left: auto; margin-right: auto; }
.pub-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pub-logo { height: 46px; width: auto; display: block; }
.pub-lang { color: #fff; font-weight: 700; font-size: .85rem; border: 1.5px solid rgba(255, 255, 255, .35); border-radius: 999px; padding: 6px 12px; text-decoration: none; }
.pub-closed-note { margin: 18px auto 4px; color: var(--navy-muted); }
.pub-open { display: flex; align-items: center; gap: 10px; margin-top: 18px; font-size: 1rem; flex-wrap: wrap; }
.pub-open .dot { width: 12px; height: 12px; border-radius: 999px; background: #3ddc84; box-shadow: 0 0 0 5px rgba(61, 220, 132, .22); flex-shrink: 0; }
.pub-open.off .dot { background: #ff8a8f; box-shadow: 0 0 0 5px rgba(255, 138, 143, .2); }
.pub-open b { font-family: var(--display); font-style: italic; font-weight: 800; font-size: 1.35rem; }
.pub-open span { color: var(--navy-muted); }
.pub-queue { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
.pub-queue div { background: rgba(255, 255, 255, .08); border-radius: 16px; padding: 10px 12px; display: flex; flex-direction: column; }
.pub-queue b { font-family: var(--display); font-style: italic; font-weight: 800; font-size: 1.7rem; line-height: 1.1; }
.pub-queue span { font-size: .78rem; color: var(--navy-muted); }
.pub-qline { margin: 10px auto 0; font-size: .92rem; color: #dbe6f5; }
.pub-notice { display: flex; gap: 8px; align-items: flex-start; background: rgba(86, 173, 215, .18); border-radius: 12px; padding: 10px 12px; margin-top: 12px; font-size: .9rem; }
.pub-quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 16px; }
.pub-quick a { display: flex; flex-direction: column; align-items: center; gap: 6px; color: #fff; text-decoration: none; font-size: .78rem; font-weight: 700; text-align: center; }
.pub-quick a .ico { width: 46px; height: 46px; padding: 12px; border-radius: 999px; background: rgba(255, 255, 255, .12); }
.pub-main { padding-top: 6px; }
.pub-sec { margin-top: 26px; scroll-margin-top: 12px; }
.pub-h { font-family: var(--display); font-style: italic; font-weight: 800; font-size: 1.4rem; margin: 0 0 12px; display: flex; align-items: center; gap: 10px; }
.pub-h .slash { margin: 0; }
.pub-form { display: flex; flex-direction: column; gap: 10px; }
.pub-form label { display: flex; flex-direction: column; gap: 4px; font-weight: 700; font-size: .9rem; }
.pub-form .frow { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pub-promos { display: flex; flex-direction: column; gap: 10px; }
.pub-promo { display: flex; gap: 14px; align-items: center; background: var(--card); border-radius: var(--radius); padding: 14px; box-shadow: var(--shadow); border-left: 6px solid var(--red); }
.pp-val { font-family: var(--display); font-style: italic; font-weight: 800; font-size: 1.6rem; color: var(--ink); min-width: 74px; text-align: center; }
.pp-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pp-tx span { font-size: .9rem; }
.pp-tx small { color: var(--muted); font-size: .8rem; }
.pub-status { margin-top: 12px; }
.ps-big { font-family: var(--display); font-style: italic; font-weight: 800; font-size: 1.35rem; margin: 0 0 14px; color: var(--ink); }
.pub-status[data-stage="awaiting_payment"] .ps-big { color: var(--ok); }
.ps-steps { list-style: none; padding: 0; margin: 0 0 14px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; counter-reset: s; }
.ps-steps li { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: .74rem; text-align: center; color: var(--muted); position: relative; }
.ps-steps li span { width: 22px; height: 22px; border-radius: 999px; background: var(--sunken); border: 2px solid var(--border); z-index: 1; }
.ps-steps li::before { content: ''; position: absolute; top: 10px; left: -50%; width: 100%; height: 3px; background: var(--border); }
.ps-steps li:first-child::before { display: none; }
.ps-steps li.done { color: var(--ink); font-weight: 700; }
.ps-steps li.done span { background: var(--primary); border-color: var(--primary); }
.ps-steps li.done::before { background: var(--primary); }
.ps-steps li.now span { box-shadow: 0 0 0 5px var(--primary-bg); }
.ps-notify { display: flex; flex-direction: column; gap: 6px; }
.ps-notify .hint { margin: 0; }
.pub-card .pc-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pub-card .pc-name { font-weight: 700; }
.pc-count { margin: 12px 0 0; font-size: .95rem; }
.pc-count b { font-family: var(--display); font-style: italic; font-weight: 800; font-size: 2rem; color: var(--ink); }
.pc-ready { display: flex; gap: 10px; align-items: flex-start; background: var(--ok-bg); color: var(--ok); border-radius: var(--radius-md); padding: 12px; margin: 8px 0; }
.pc-ready div { display: flex; flex-direction: column; gap: 2px; }
.pc-ready small { color: var(--ink); }
.pc-next { margin: 8px 0; font-weight: 700; }
.pc-next.hot { color: var(--primary); }
.pub-reg { margin-top: 10px; }
.pub-reg summary { cursor: pointer; display: flex; flex-direction: column; gap: 2px; list-style: none; }
.pub-reg summary::-webkit-details-marker { display: none; }
.pub-reg summary span { color: var(--muted); font-size: .88rem; }
.pub-reg summary b::after { content: ' ›'; color: var(--primary); }
.pub-perks { list-style: none; padding: 0; margin: 12px 0; display: flex; flex-direction: column; gap: 6px; }
.pub-perks li { display: flex; gap: 8px; align-items: flex-start; font-size: .92rem; }
.pub-perks .ico { color: var(--primary); flex-shrink: 0; margin-top: 2px; }
.pub-loc .pl-addr { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 12px; }
.pub-btns { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.pub-hours tr.today td { font-weight: 700; color: var(--primary); }
.stars { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 4px; }
.stars input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.stars label { font-size: 2.2rem; line-height: 1; color: var(--star-off); cursor: pointer; padding: 2px 3px; min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.stars input:checked ~ label { color: var(--star); }
@media (hover: hover) and (pointer: fine) { .stars label:hover, .stars label:hover ~ label { color: var(--star); } }
.stars input:focus-visible + label { outline: 2px solid var(--focus); border-radius: 6px; }
.pub-review { display: flex; align-items: center; gap: 12px; margin-top: 12px; color: var(--ink); text-decoration: none; }
.pub-review .g { width: 44px; height: 44px; border-radius: 999px; background: var(--gold-bg); color: var(--star); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; flex-shrink: 0; }
.pub-review .tx { flex: 1; display: flex; flex-direction: column; }
.pub-review small { color: var(--muted); }
.pub-thanks b { font-size: 1.05rem; }
.pub-foot { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 32px 0 8px; color: var(--muted); font-size: .85rem; }
.pub #prices .pricelist { margin: 0; }
.form label.switchrow { display: flex; }
.form label.switchrow input.toggle { width: 52px; margin: 6px 0; }
.hourrow { grid-template-columns: 1fr auto; grid-template-areas: 'd c' 'o x'; }
.hourrow b { grid-area: d; }
.hourrow .check { grid-area: c; }
.hourrow input[type=time]:first-of-type { grid-area: o; }
.hourrow input[type=time]:last-of-type { grid-area: x; }
@media (min-width: 560px) { .hourrow { grid-template-columns: 90px auto 1fr 1fr; grid-template-areas: 'd c o x'; } }
.tbl td:first-child.src, .tbl th.nw { white-space: nowrap; }
.pub-topr { display: flex; gap: 8px; align-items: center; margin: 0; }
.pub-topr .pub-lang { display: inline-flex; align-items: center; gap: 5px; }
.pub-topr .pub-lang[hidden] { display: none; }
.pub-app { display: grid; grid-template-columns: 56px 1fr; gap: 10px 14px; align-items: center; }
.pub-app img { border-radius: 14px; }
.pa-tx { display: flex; flex-direction: column; }
.pa-tx span { color: var(--muted); font-size: .88rem; }
.pub-app > .btn, .pa-how, .pa-done { grid-column: 1 / -1; }
.pa-how summary { cursor: pointer; font-weight: 700; color: var(--primary); padding: 6px 0; }
.pa-steps { margin-top: 8px; font-size: .9rem; }
.pa-steps ol { margin: 6px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.pa-done { margin: 0; color: var(--ok); font-weight: 700; display: flex; align-items: center; gap: 6px; }
.pub-map { margin: -2px -2px 14px; border-radius: var(--radius-md); overflow: hidden; background: var(--sunken); aspect-ratio: 4 / 3; }
.pub-map iframe { display: block; width: 100%; height: 100%; border: 0; }
@media (min-width: 640px) { .pub-map { aspect-ratio: 16 / 9; } }
.pub-loc .pub-review { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin: 4px 0 6px; border: 1.5px solid var(--gold-line); background: var(--gold-bg); border-radius: var(--radius-md); color: var(--ink); text-decoration: none; }
.pub-loc .pub-review .g { width: auto; height: auto; background: none; font-size: .95rem; letter-spacing: 1px; color: var(--star); }
.pub-fb-link { font-size: .88rem; color: var(--muted); margin: 8px 0 10px; }
.ps-done { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--line); padding-top: 12px; }
.ps-done[hidden], .ps-notify[hidden] { display: none; }
.ps-done p { margin: 0; font-weight: 700; }

/* ---------------------------------------------------------------- digital member card */
.mcard {
  position: relative; overflow: hidden; isolation: isolate; aspect-ratio: 1.586; width: 100%; max-width: 420px; margin: 0 auto 12px;
  border-radius: 20px; padding: 18px 20px; color: #fff; display: flex; flex-direction: column; justify-content: space-between;
  background: linear-gradient(135deg, #2b4a78 0%, #1f3659 48%, #142540 100%);
  box-shadow: 0 14px 30px -12px rgba(20, 37, 64, .55), inset 0 1px 0 rgba(255, 255, 255, .14);
}
.mcard::before { content: ''; position: absolute; inset: 0; z-index: -1; background: repeating-linear-gradient(115deg, rgba(255, 255, 255, .035) 0 2px, transparent 2px 14px); }
.mc-glow { position: absolute; z-index: -1; width: 70%; aspect-ratio: 1; right: -22%; top: -38%; border-radius: 50%; background: radial-gradient(circle, rgba(86, 173, 215, .55), rgba(86, 173, 215, 0) 68%); }
.mc-slash { position: absolute; z-index: -1; right: 18px; bottom: 58px; display: flex; gap: 8px; opacity: .9; }
.mc-slash i { width: 10px; height: 46px; background: var(--red); transform: skewX(-24deg); border-radius: 2px; }
.mc-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.mc-top img { height: 38px; width: auto; }
.mc-tag { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .25); font-size: .75rem; font-weight: 700; letter-spacing: .12em; }
.mc-tag .ico { color: #ffd166; }
.mc-plate { font-family: var(--display); font-style: italic; font-weight: 800; font-size: clamp(1.6rem, 8vw, 2.2rem); letter-spacing: .04em; text-shadow: 0 2px 10px rgba(0, 0, 0, .25); }
.mc-bottom { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 14px; }
.mc-bottom div { min-width: 0; display: flex; flex-direction: column; }
.mc-bottom small { font-size: .75rem; text-transform: uppercase; letter-spacing: .1em; color: var(--navy-muted); }
.mc-bottom b { font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.pub-card .pc-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.pub-card .pc-head .pc-count { margin: 0; }
.pc-promo { display: flex; gap: 10px; align-items: flex-start; background: var(--primary-bg); color: var(--primary); border-radius: var(--radius-md); padding: 12px; margin: 8px 0; border: 1.5px dashed var(--primary); }
.pc-promo div { display: flex; flex-direction: column; gap: 2px; }
.pc-promo span, .pc-promo small { color: var(--ink); }
.memcard-in .mcard { max-width: 360px; margin-left: 0; }

/* ---------------------------------------------------------------- price list: add-on details, today's promos, picking at the counter */
.pl-row.addon { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 10px; }
.pl-row.addon .nm { display: flex; flex-direction: column; gap: 2px; font-weight: 700; }
.pl-row.addon .nm small { font-weight: 500; font-size: .8rem; color: var(--muted); opacity: 1; }
.pl-plus { width: 24px; height: 24px; border-radius: 999px; background: var(--primary-bg); color: var(--primary); display: inline-flex; align-items: center; justify-content: center; margin-top: 1px; }
.pl-plus .ico { width: 14px; height: 14px; }
.pl-price s, .pl-sizes s, .pl-row s { font-family: var(--font); font-style: normal; font-weight: 500; font-size: .9rem; opacity: .65; margin-right: 6px; }
.pl-price s { display: block; font-size: 1rem; }
.pl-deal { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; padding: 6px 10px; border-radius: 10px; background: var(--deal-bg); color: var(--deal-ink); font-size: .82rem; border: 1.5px dashed var(--deal-line); }
.pl-deal b { font-weight: 800; }
.pl-deal.mem { background: var(--primary-bg); color: var(--primary-dk); border-color: var(--primary); }
.pl-card.featured .pl-deal { background: #fff; color: #b4121a; border-color: #f19ca0; }
.pl-card.featured .pl-deal.mem { color: #1f59a8; border-color: #9fbfe8; }
.pl-card.has-deal { border-color: var(--deal-line); }
.pl-card.featured.has-deal { border-color: var(--primary); }
.pl-mini { font-style: normal; font-size: .75rem; font-weight: 700; color: var(--deal-ink); background: var(--deal-bg); border-radius: 999px; padding: 1px 8px; white-space: nowrap; }
.pl-promostrip { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.pl-pchip { display: flex; align-items: center; gap: 12px; background: var(--card); border-radius: var(--radius-md); padding: 10px 14px; border-left: 6px solid var(--red); box-shadow: var(--shadow); }
.pl-pchip .v { font-family: var(--display); font-style: italic; font-weight: 800; font-size: 1.35rem; color: var(--ink); white-space: nowrap; }
.pl-pchip .tx { display: flex; flex-direction: column; min-width: 0; }
.pl-pchip small { color: var(--muted); font-size: .78rem; }

.plshow-open { margin: 0 0 12px; border-style: dashed; border-color: var(--primary); color: var(--primary); }
body.noscroll { overflow: hidden; }
.plshow { position: fixed; inset: 0; z-index: 70; background: var(--bg); display: flex; flex-direction: column; }
.plshow[hidden] { display: none; }
.plshow-body { flex: 1; overflow-y: auto; padding: 16px 16px 24px; -webkit-overflow-scrolling: touch; }
.plshow-body .pricelist { max-width: 1280px; margin: 0 auto; }
.plshow-bar { display: flex; align-items: center; gap: 10px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: var(--card); box-shadow: 0 -6px 20px rgba(20, 35, 63, .12); flex-wrap: wrap; }
.plshow-bar .sel { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; }
.plshow-bar .sel span { font-size: .88rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plshow-bar .sel b { font-family: var(--display); font-style: italic; font-weight: 800; font-size: 1.4rem; }
.plshow-bar .btn { flex: 0 0 auto; }
.picking [data-pick] { cursor: pointer; position: relative; transition: transform .12s; -webkit-tap-highlight-color: transparent; }
.picking [data-pick]:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.picking .pl-card:active { transform: scale(.985); }
.pl-check { position: absolute; top: 12px; right: 12px; width: 30px; height: 30px; border-radius: 999px; border: 2px solid var(--border); background: var(--card); color: transparent; display: flex; align-items: center; justify-content: center; }
.pl-check .ico { width: 18px; height: 18px; }
.picking .pl-card.picked { box-shadow: 0 0 0 4px var(--red), var(--shadow-pop); }
.picking .pl-card.picked .pl-check { background: var(--red); border-color: var(--red); color: #fff; }
.picking .pl-row.picked { background: var(--primary-bg); border-radius: 10px; margin: 0 -10px; padding-left: 10px; padding-right: 10px; }
.picking .pl-row.addon .pl-plus { background: var(--card); border: 2px solid var(--border); color: transparent; }
.picking .pl-row.addon.picked .pl-plus { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); }
.picking .pl-list.dark .pl-row.picked { background: rgba(255, 255, 255, .14); }
.picking .pl-list.dark .pl-row.picked span::before { content: '✓ '; font-weight: 800; }
.ordgrp { font-weight: 700; font-size: .85rem; color: var(--muted); margin: 12px 0 4px; text-transform: uppercase; letter-spacing: .06em; }
.ordlist { list-style: none; margin: 0; padding: 0; }
.ordlist li { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.ordlist li.off { opacity: .55; }
.ordlist .no { width: 26px; height: 26px; border-radius: 999px; background: var(--sunken); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: .82rem; flex-shrink: 0; }
.ordlist .nm { flex: 1; min-width: 0; font-weight: 700; }
.ordlist form { margin: 0; }
.ordlist .btn { min-width: 44px; }

/* ---------------------------------------------------------------- commission by clock-in time / per person */
.sharecell { font-size: .86rem; }
.sharecell span { display: block; white-space: nowrap; }
.sharecell small { color: var(--muted); }
.pplbox { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.pp-h { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.pplist { display: flex; flex-direction: column; gap: 8px; margin: 8px 0 12px; }
.form label.pprow { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0; padding: 8px 0; border-bottom: 1px solid var(--line); }
.pprow .nm { display: flex; flex-direction: column; font-weight: 700; }
.pprow .nm small { font-weight: 500; color: var(--muted); }
.pprow .pin { display: flex; align-items: center; gap: 6px; }
.form label.pprow input { width: 92px; margin: 0; text-align: right; }
.pprow i { font-style: normal; font-weight: 700; color: var(--muted); }

/* ---------------------------------------------------------------- stock item: photo, details, WhatsApp restock */
.av.stk.photo { padding: 0; overflow: hidden; background: var(--sunken); }
.av.stk.photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.av.stk.photo.out { box-shadow: 0 0 0 2px var(--late); }
.av.stk.photo.warn { box-shadow: 0 0 0 2px var(--busy); }
.thumblink { display: contents; }
.itemlink { color: var(--ink); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
.itemlink .ico { color: var(--muted); flex-shrink: 0; }
.itemdesc { display: block; white-space: normal; }
.buylink.wa { background: var(--wa-bg); color: var(--wa-ink); box-shadow: inset 0 0 0 1px var(--wa-line-soft); }
.itemhero { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 14px 16px; align-items: center; }
.ih-photo { width: 112px; height: 112px; border-radius: var(--radius-md); overflow: hidden; background: var(--sunken); display: flex; align-items: center; justify-content: center; }
.ih-photo.out { box-shadow: 0 0 0 3px var(--late); }
.ih-photo.warn { box-shadow: 0 0 0 3px var(--busy); }
.ih-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ih-photo a { display: block; width: 100%; height: 100%; }
.ih-icon .ico { width: 48px; height: 48px; color: var(--primary); }
.ih-name { margin: 0 0 4px; font-family: var(--display); font-style: italic; font-weight: 800; font-size: 1.45rem; line-height: 1.2; }
.ih-stock { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.ih-stock b { font-family: var(--display); font-style: italic; font-weight: 800; font-size: 1.8rem; }
.ih-desc { grid-column: 1 / -1; margin: 0; font-size: .95rem; white-space: normal; }
@media (min-width: 640px) { .itemhero { grid-template-columns: 180px minmax(0, 1fr); } .ih-photo { width: 180px; height: 180px; } }
.rs-list { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 8px; }
.rs-contact { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.rs-contact .nm { display: flex; flex-direction: column; min-width: 0; }
.rs-contact .nm small { color: var(--muted); }
.rs-preview { white-space: pre-wrap; font: inherit; font-size: .9rem; background: var(--sunken); border-radius: var(--radius-md); padding: 12px; margin: 6px 0 0; }

/* ---------------------------------------------------------------- WhatsApp messages */
.wa-btn .wa-l { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.wa-btn .wa-sent { display: inline-flex; align-items: center; gap: 3px; margin-left: auto; padding-left: 8px; font-size: .78rem; font-weight: 600; opacity: .85; white-space: nowrap; }
.wa-btn.was-sent { background: var(--card); border-style: dashed; }
.wa-btn.soft { background: var(--card); }
.wa-inline { margin: 0; }
.payrow.has-wa { grid-template-columns: 48px 1fr 1fr; }
.payrow.has-wa .wa-btn { padding: 0; justify-content: center; }
.wathanks .li { gap: 10px; }
.wathanks .end { display: flex; flex: none; }
.wathanks .wa-btn { padding-left: 12px; padding-right: 12px; }
.wabtns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.wabtns .btn { min-width: 0; }
.wabtns .wa-btn { margin: 0; }
.walog { display: flex; flex-direction: column; gap: 2px; margin-top: 10px; font-size: .84rem; color: var(--muted); }
.walog b { color: var(--ink); font-weight: 600; }
.waremind { margin-top: 6px; }
.waremind .memrow { display: flex; align-items: center; gap: 10px; }
.waremind .memrow .mid { flex: 1; min-width: 0; }
.pm-share { margin: 8px 0 0; align-self: flex-start; }
.wahow .steps { margin: 0 0 8px; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: .92rem; }
.wahow .tips { margin: 8px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; font-size: .9rem; }
.watpl-grid { display: grid; grid-template-columns: 1fr; gap: 12px; margin-bottom: 8px; }
@media (min-width: 760px) { .watpl-grid { grid-template-columns: 1fr 1fr; } }
.watpl textarea { width: 100%; font-size: 1rem; line-height: 1.45; }
.wachips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.wachips .chip { border: 1px solid var(--border); background: var(--sunken); color: var(--ink); border-radius: 999px; padding: 4px 10px; font: 600 .78rem/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .wachips .chip:hover { border-color: var(--wa-line); background: var(--wa-bg); } }
.wapreview { min-width: 0; background: #efe7dd; border-radius: var(--radius-md); padding: 10px 12px 14px; }
.wapreview small { display: block; color: #6b5f52; font-weight: 600; margin-bottom: 6px; }
.wa-bubble { background: #d9fdd3; color: #111b21; border-radius: 10px 10px 10px 2px; padding: 8px 10px; font-size: .9rem; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; box-shadow: 0 1px 1px rgba(0,0,0,.08); max-width: 100%; }
.wa-bubble:empty::after { content: '…'; color: #667781; }
.wavars dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; margin: 10px 0; font-size: .88rem; }
.wavars dt { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 600; }
.wavars dd { margin: 0; color: var(--muted); }
.stickybar { position: sticky; bottom: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px) + 8px); z-index: 5; margin-top: 8px; }
.stickybar .btn { box-shadow: var(--shadow-pop); }
.pills.three .pill { flex: 1 1 30%; min-width: 0; }
.pills.three .pill span { padding: 10px 8px; font-size: .9rem; text-align: center; }

/* ---------------------------------------------------------------- kasbon */
.kbhist { display: flex; flex-direction: column; }
.kbrow { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.kbrow:last-child { border-bottom: 0; }
.kb-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.kb-main small { color: var(--muted); }
.kb-act { display: flex; gap: 4px; }
.kb-act form { margin: 0; }
.num.pos { color: var(--ok); }
.kbedit { background: var(--sunken); border-radius: var(--radius-md); padding: 12px; margin: 0 0 10px; }
.kbold { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 0; border-bottom: 1px solid var(--line); margin: 0; }
.kbold:last-child { border-bottom: 0; }
.kbold select { flex: 1 1 140px; min-width: 0; }
.kbcut { background: var(--sunken); border-radius: var(--radius-md); padding: 12px; margin-bottom: 12px; }
.kbcut .hint { margin: 4px 0 8px; }
.kbcut-sum { display: flex; justify-content: space-between; align-items: center; font-size: .95rem; }
.kbtag { color: var(--late); font-weight: 600; }
.tbl tr.on td { background: var(--primary-bg); }
.kblist { display: flex; flex-direction: column; }
.kbperson { display: flex; align-items: center; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.kbperson:last-child { border-bottom: 0; }
.kbperson.on { background: var(--primary-bg); margin: 0 -12px; padding-left: 12px; padding-right: 12px; border-radius: var(--radius-sm); }
.kb-left { display: flex; flex-direction: column; align-items: flex-end; }
.kb-left small { color: var(--muted); font-size: .78rem; }
.kb-left b.neg { color: var(--late); }
.kbold { display: grid; grid-template-columns: 1fr auto; }
.kbold .kb-main { grid-column: 1 / -1; }
.kbold select { width: 100%; }


/* ================================================================ design pass (Oct 2026): themes, motion, touch, desktop
   Tokens follow the Nirwana design system (tokens.json, light + dark). */

/* ---------------------------------------------------------------- dark theme: follows the phone, or Akun saya → Tampilan */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
  --bg: #14233f; --card: #1b2e50; --sunken: #0f1b33;
  --ink: #f2f6fc; --muted: #afc0dd;
  --line: #2a4268; --border: #34507e; --field: #6c86b0;
  --primary: #5b9ce8; --primary-dk: #7db2f0; --primary-bg: #1f3b66; --primary-ink: #0b1730; --focus: #8dbcf5;
  --navy: #23477e; --navy-muted: #c3d2ea;
  --ok: #43d0a0; --ok-bg: #0f3a2f;
  --busy: #ffc857; --busy-bg: #3d2e0a; --busy-line: #6b5418;
  --wash: #7db2f0; --wash-bg: #1f3b66; --wash-bar: #5b9ce8;
  --late: #ff8a8f; --late-bg: #4a1a1f; --on-danger: #1a0a0c;
  --sky: #8fd0f0;
  --shadow: 0 0 0 1px #2a4268;
  --shadow-pop: 0 10px 28px rgba(0, 0, 0, .45), 0 0 0 1px #34507e;
  --input-bg: #0f1b33; --hover: #22385f;
  --topbar-bg: rgba(20, 35, 63, .92);
  --sel-bg: #f2f6fc; --sel-ink: #14233f;
  --star: #f5a400; --star-off: #6c86b0;
  --gold-bg: #3a2f12; --gold-line: #6b5418;
  --deal-bg: #4a1a1f; --deal-ink: #ff8a8f; --deal-line: #7a2a31;
  --wa-bg: #10362a; --wa-ink: #6fe3a9; --wa-line: #25d366; --wa-line-soft: #1f6b48;
  --cal1: #1f3b66; --cal2: #28508a; --cal3: #3466ad;
  --chart-bar: rgba(86, 173, 215, .55);
  color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #14233f; --card: #1b2e50; --sunken: #0f1b33;
  --ink: #f2f6fc; --muted: #afc0dd;
  --line: #2a4268; --border: #34507e; --field: #6c86b0;
  --primary: #5b9ce8; --primary-dk: #7db2f0; --primary-bg: #1f3b66; --primary-ink: #0b1730; --focus: #8dbcf5;
  --navy: #23477e; --navy-muted: #c3d2ea;
  --ok: #43d0a0; --ok-bg: #0f3a2f;
  --busy: #ffc857; --busy-bg: #3d2e0a; --busy-line: #6b5418;
  --wash: #7db2f0; --wash-bg: #1f3b66; --wash-bar: #5b9ce8;
  --late: #ff8a8f; --late-bg: #4a1a1f; --on-danger: #1a0a0c;
  --sky: #8fd0f0;
  --shadow: 0 0 0 1px #2a4268;
  --shadow-pop: 0 10px 28px rgba(0, 0, 0, .45), 0 0 0 1px #34507e;
  --input-bg: #0f1b33; --hover: #22385f;
  --topbar-bg: rgba(20, 35, 63, .92);
  --sel-bg: #f2f6fc; --sel-ink: #14233f;
  --star: #f5a400; --star-off: #6c86b0;
  --gold-bg: #3a2f12; --gold-line: #6b5418;
  --deal-bg: #4a1a1f; --deal-ink: #ff8a8f; --deal-line: #7a2a31;
  --wa-bg: #10362a; --wa-ink: #6fe3a9; --wa-line: #25d366; --wa-line-soft: #1f6b48;
  --cal1: #1f3b66; --cal2: #28508a; --cal3: #3466ad;
  --chart-bar: rgba(86, 173, 215, .55);
  color-scheme: dark;
}
:root[data-theme="light"] { color-scheme: light; }
/* exported images and printouts are always light, so slips and price lists look the same for everyone */
body.exporting {
  --bg: #eef1f6; --card: #ffffff; --sunken: #e3e8f1;
  --ink: #1f3659; --muted: #4a5b78;
  --line: #e3e8f1; --border: #cbd5e4; --field: #72849f;
  --primary: #2b6cc4; --primary-dk: #1f59a8; --primary-bg: #e3edfb; --primary-ink: #ffffff; --focus: #2b6cc4;
  --navy: #1f3659; --navy-muted: #afc0dd;
  --ok: #0b7a5a; --ok-bg: #dcf5ec;
  --busy: #9a5b00; --busy-bg: #fff1d6; --busy-line: #f2d79c;
  --wash: #1f59a8; --wash-bg: #e3edfb; --wash-bar: #2b6cc4;
  --late: #c8101a; --late-bg: #fde4e5; --on-danger: #ffffff;
  --sky: #56add7;
  --shadow: 0 1px 3px rgba(20, 35, 63, .12), 0 4px 12px rgba(20, 35, 63, .06);
  --shadow-pop: 0 8px 24px rgba(20, 35, 63, .18);
  --input-bg: #ffffff; --hover: #f6f8fb;
  --topbar-bg: rgba(238, 241, 246, .92);
  --sel-bg: #1f3659; --sel-ink: #ffffff;
  --star: #c27c00; --star-off: #7d8ba3;
  --gold-bg: #fffaf0; --gold-line: #f5d27a;
  --deal-bg: #fff1f1; --deal-ink: #b4121a; --deal-line: #f19ca0;
  --wa-bg: #e7f8ee; --wa-ink: #137a3b; --wa-line: #25d366; --wa-line-soft: #9fdcb6;
  --cal1: #e3edfb; --cal2: #c6daf6; --cal3: #a6c5ef;
  --chart-bar: rgba(86, 173, 215, .45);
  color-scheme: light;
}
@media print { :root, :root[data-theme] {
  --bg: #eef1f6; --card: #ffffff; --sunken: #e3e8f1;
  --ink: #1f3659; --muted: #4a5b78;
  --line: #e3e8f1; --border: #cbd5e4; --field: #72849f;
  --primary: #2b6cc4; --primary-dk: #1f59a8; --primary-bg: #e3edfb; --primary-ink: #ffffff; --focus: #2b6cc4;
  --navy: #1f3659; --navy-muted: #afc0dd;
  --ok: #0b7a5a; --ok-bg: #dcf5ec;
  --busy: #9a5b00; --busy-bg: #fff1d6; --busy-line: #f2d79c;
  --wash: #1f59a8; --wash-bg: #e3edfb; --wash-bar: #2b6cc4;
  --late: #c8101a; --late-bg: #fde4e5; --on-danger: #ffffff;
  --sky: #56add7;
  --shadow: 0 1px 3px rgba(20, 35, 63, .12), 0 4px 12px rgba(20, 35, 63, .06);
  --shadow-pop: 0 8px 24px rgba(20, 35, 63, .18);
  --input-bg: #ffffff; --hover: #f6f8fb;
  --topbar-bg: rgba(238, 241, 246, .92);
  --sel-bg: #1f3659; --sel-ink: #ffffff;
  --star: #c27c00; --star-off: #7d8ba3;
  --gold-bg: #fffaf0; --gold-line: #f5d27a;
  --deal-bg: #fff1f1; --deal-ink: #b4121a; --deal-line: #f19ca0;
  --wa-bg: #e7f8ee; --wa-ink: #137a3b; --wa-line: #25d366; --wa-line-soft: #9fdcb6;
  --cal1: #e3edfb; --cal2: #c6daf6; --cal3: #a6c5ef;
  --chart-bar: rgba(86, 173, 215, .45);
  color-scheme: light;
} }
/* a logo or picture made for one background */
.on-dark-only { display: none !important; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .on-light-only { display: none !important; } :root:not([data-theme="light"]) .on-dark-only { display: block !important; } }
:root[data-theme="dark"] .on-light-only { display: none !important; }
:root[data-theme="dark"] .on-dark-only { display: block !important; }
/* dark: cards are told apart by a hairline instead of a shadow; navy blocks get a lighter navy so they stand out */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .stcard.free { border-color: var(--border); }
  :root:not([data-theme="light"]) .brand img { box-shadow: none; }
}
:root[data-theme="dark"] .brand img { box-shadow: none; }

/* ---------------------------------------------------------------- motion: one quick rhythm, nothing for people who turn motion off */
a, button, .btn, .icb, .pill span, .chips-nav a, .chips-nav button, .li, .sr, .stcard, .prod, .discopt, .check, .target > span, .daypick span {
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease),
    transform var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
}
.btn:active, .icb:active, .go:active, .fab:active, .st-act:active, .stp:active, .buylink:active, .chips-nav a:active, .chips-nav button:active { transform: scale(.97); }
a.li:active, .setlist .sr:active, a.stcard:active, .memrow:active, .kbperson:active { background: var(--hover); }
.ract:active .c { transform: scale(.94); }
html { -webkit-tap-highlight-color: transparent; }
button, a, label, summary, input, select { touch-action: manipulation; }
@media (prefers-reduced-motion: reduce) {
  /* fewer and gentler, not zero: colour and fade feedback stay, anything that moves or scales goes */
  *, *::before, *::after { scroll-behavior: auto !important; }
  .btn:active, .icb:active, .go:active, .fab:active, .st-act:active, .stp:active, .ract:active .c,
  .chips-nav a:active, .chips-nav button:active, .buylink:active, .picking .pl-card:active { transform: none; }
  .pbar > i { transition: none; }
}

/* ---------------------------------------------------------------- a sent form shows it is working and cannot be sent twice */
form.is-busy button[type=submit]:not(.no-busy), form.is-busy .btn[type=submit] { cursor: progress; }
.btn.is-busy, button.is-busy { position: relative; color: transparent !important; pointer-events: none; }
.btn.is-busy > *, button.is-busy > * { visibility: hidden; }
.btn.is-busy::after, button.is-busy::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 999px;
  border: 2.5px solid currentColor; border-color: var(--busy-ring, rgba(127, 140, 160, .45)); border-top-color: var(--busy-ring-top, var(--primary));
  animation: cwspin .7s linear infinite; visibility: visible;
}
.btn.primary.is-busy::after, .st-act.is-busy::after { --busy-ring: rgba(255, 255, 255, .35); --busy-ring-top: var(--primary-ink); }
@keyframes cwspin { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------- accessibility helpers */
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: var(--radius-md); background: var(--primary); color: var(--primary-ink); font-weight: 700; text-decoration: none; }
.skip:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.btn[disabled], .btn[aria-disabled=true], button[disabled] { cursor: not-allowed; }
small { font-size: max(12px, .82em); }

/* ---------------------------------------------------------------- touch targets: links inside tables and lists get room to tap */
.tbl td a:not(.btn):not(.icb) { display: inline-flex; align-items: center; min-height: 44px; margin: -12px 0; padding: 0 2px; }
.tbl td { vertical-align: middle; }
.tbl th { vertical-align: bottom; }
.chips-nav a.nav-arrow { padding: 0; width: 44px; justify-content: center; }
.chips-nav a.nav-arrow .ico { width: 20px; height: 20px; }
.wachips .chip { min-height: 36px; padding: 6px 12px; }
.itemlink, .cl-name { min-height: 44px; display: inline-flex; align-items: center; }
.btn.small { min-width: 44px; }
.btn.small.ic-only { padding: 0; width: 44px; }
.btn.small.ic-only .ico, .btn.small.ic-only svg { width: 18px; height: 18px; }
.memrow > .plt.sm, .waremind .plt.sm { padding: 3px 8px; }
.pub-lang { min-height: 44px; display: inline-flex; align-items: center; padding: 6px 14px; }
.pub-reg summary { min-height: 44px; justify-content: center; }
.brand { min-height: 44px; }
.buylink { min-height: 44px; }
.buylink.sm { min-height: 40px; }
.cal-day { min-height: 56px; }

/* ---------------------------------------------------------------- tables on phones: a soft edge shows there is more to the side */
.tscroll {
  background:
    linear-gradient(to right, var(--card) 30%, transparent) left / 24px 100% no-repeat local,
    linear-gradient(to left, var(--card) 30%, transparent) right / 24px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(20, 35, 63, .14), transparent) left / 10px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(20, 35, 63, .14), transparent) right / 10px 100% no-repeat scroll;
}
body.exporting .tscroll, .printing .tscroll { background: none; }

/* ---------------------------------------------------------------- titles: the red slashes follow the last word, also when it wraps */
.pagetitle { display: block; text-wrap: balance; }
.pagetitle .slash { margin-left: 12px; vertical-align: .08em; }
h1, h2, .pub-h { text-wrap: balance; }
.disp, .pagetitle, .jobhead .amt, .hero .hv b { overflow-wrap: anywhere; }

/* ---------------------------------------------------------------- login */
.login .btn.primary { width: 100%; min-height: 52px; }
.login .lockup { width: 220px; }

/* ---------------------------------------------------------------- KPI tiles: an odd last tile spans the row */
.kpis > .kpi:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (min-width: 640px) { .kpis > .kpi:last-child:nth-child(odd) { grid-column: auto; } }
.kpis.k3 > .kpi:last-child:nth-child(odd) { grid-column: auto; }

/* ---------------------------------------------------------------- tablets and computers: navigation moves to a rail on the left */
@media (min-width: 1024px) {
  :root { --rail-w: 96px; }
  body:not(.role-guest):not(.pub) { padding-left: var(--rail-w); padding-bottom: 32px; --nav-h: 0px; }
  .bottomnav {
    top: 0; right: auto; width: var(--rail-w); flex-direction: column; justify-content: flex-start; gap: 6px;
    padding: calc(84px + env(safe-area-inset-top)) 8px 16px; border-top: 0; border-right: 1px solid var(--border);
  }
  .bottomnav a { flex: none; min-height: 72px; font-size: .78rem; }
  .bottomnav a .ni { width: 56px; height: 36px; }
  .topbar { padding-left: 20px; padding-right: 24px; }
  body:not(.role-guest):not(.pub) .topbar { margin-left: calc(-1 * var(--rail-w)); padding-left: 20px; z-index: 35; }
  .wrap { padding: 12px 32px 32px; }
  .fab { right: max(24px, calc(50% - 380px - var(--rail-w) / 2)); bottom: 28px; }
  .sellbar, .stickybar { bottom: 16px; }
  @media (hover: hover) and (pointer: fine) { a.li:hover, .setlist .sr:hover { background: var(--hover); } }
  .installbar { max-width: 760px; }
}
@media (min-width: 1280px) { body.wide .wrap { max-width: 1160px; } }

/* segmented choice (theme) */
.segmented { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: var(--radius-md); background: var(--sunken); }
.segmented a { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; border-radius: 9px; color: var(--muted); font-weight: 700; font-size: .9rem; text-decoration: none; }
.segmented a .ico { width: 18px; height: 18px; }
.segmented a.on { background: var(--card); color: var(--ink); box-shadow: var(--shadow); }
.tbl th a:not(.btn) { display: inline-flex; align-items: center; min-height: 44px; margin: -12px 0; }
.tbl td a:not(.btn):not(.icb) { min-width: 32px; }
.tbl td.r a:not(.btn) { justify-content: flex-end; }
.kpi a { display: inline-flex; align-items: center; min-height: 32px; }
.buyrow > a.muted { display: inline-flex; align-items: center; min-height: 44px; }
.pa-how summary { min-height: 44px; display: flex; align-items: center; }
.kpis > .kpi.hero:first-child ~ .kpi:last-child:nth-child(odd) { grid-column: auto; }
.kpis > .kpi.hero:first-child ~ .kpi:last-child:nth-child(even) { grid-column: 1 / -1; }
@media (min-width: 640px) {
  .kpis:has(> .kpi.hero:first-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kpis > .kpi.hero:first-child ~ .kpi:last-child:nth-child(even) { grid-column: auto; }
}

/* ================================================================ dashboard and report (Oct 2026)
   Short answers first; every chart has its values in the line under it (tap, hover or keyboard). */
.dash { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.dash .card, .dash .hero { margin: 0; }
.dash-2 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 1024px) {
  .dash { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .dash > .dhero, .dash > .live3, .dash > .dash-full { grid-column: 1 / -1; }
  .dash-2 { display: contents; }
}
.dhero .tag { text-decoration: none; min-height: 32px; }
.dh-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; color: var(--navy-muted); font-size: .88rem; }
.dh-pace { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.dh-pace-t { display: flex; justify-content: space-between; gap: 10px; font-size: .85rem; color: var(--navy-muted); }
.dh-pace-t b { color: var(--on-navy); }
.pace { height: 8px; border-radius: 999px; background: var(--sunken); overflow: hidden; }
.pace > i { display: block; height: 100%; border-radius: 999px; background: var(--primary); }
.hero .pace { background: rgba(255, 255, 255, .16); }
.hero .pace > i { background: var(--sky); }

.delta { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; font-size: .82rem; font-weight: 500; color: var(--muted); }
.delta b { white-space: nowrap; }
.delta b { font-weight: 700; }
.delta .ico { width: 14px; height: 14px; }
.delta.good b, .delta.good .ico { color: var(--ok); }
.delta.bad b, .delta.bad .ico { color: var(--late); }
.hero .delta { color: var(--navy-muted); }
.hero .delta.good b, .hero .delta.good .ico { color: #7ee0b8; }
.hero .delta.bad b, .hero .delta.bad .ico { color: #ffb3b6; }

.live3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.lt { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 12px; border-radius: 16px; background: var(--card); box-shadow: var(--shadow); color: var(--ink); text-decoration: none; }
@media (hover: hover) and (pointer: fine) { a.lt:hover { color: var(--ink); background: var(--hover); } }
.lt-l { display: flex; align-items: center; gap: 5px; font-size: .78rem; font-weight: 500; color: var(--muted); }
.lt-l .ico { width: 15px; height: 15px; flex-shrink: 0; }
.lt b { font-size: 1.5rem; line-height: 1.2; }
.lt small { color: var(--muted); font-size: .75rem; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lt small.neg { color: var(--late); font-weight: 700; }

.insights { list-style: none; margin: 0; padding: 0; }
.ins { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.ins:last-child { border-bottom: 0; padding-bottom: 0; }
.ins:first-child { padding-top: 0; }
.ins-ic { width: 36px; height: 36px; border-radius: 999px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--primary-bg); color: var(--primary-dk); }
.ins.warn .ins-ic { background: var(--busy-bg); color: var(--busy); }
.ins.idea .ins-ic { background: var(--ok-bg); color: var(--ok); }
.ins-tx { flex: 1; min-width: 0; font-size: .92rem; line-height: 1.4; }
.ins .btn { flex: none; }
.allgood { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--ok); font-weight: 700; }
.go-link { display: inline-flex; align-items: center; gap: 2px; min-height: 44px; font-weight: 700; font-size: .9rem; text-decoration: none; }
.go-link .ico { width: 14px; height: 14px; }

.mtd-main { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.mtd-main > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mtd .lbl { font-size: .8rem; color: var(--muted); font-weight: 500; }
.mtd .big { font-size: 1.4rem; line-height: 1.25; overflow-wrap: anywhere; }
.mtd .big.neg { color: var(--late); }
.proj { margin: 14px 0; padding: 12px; border-radius: var(--radius-md); background: var(--sunken); display: flex; flex-direction: column; gap: 6px; }
.proj-t { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: .9rem; }
.proj .pace { background: var(--card); }
.mtd-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.mtd-grid > div { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); min-width: 0; }
.mtd-grid span { font-size: .78rem; color: var(--muted); }
.mtd-grid b { font-size: 1.1rem; }
.mtd-grid small { color: var(--muted); font-size: .75rem; }
.segmented.sm { display: inline-grid; grid-template-columns: repeat(2, auto); width: auto; }
.segmented.sm a { padding: 0 12px; font-size: .85rem; }
.insight-line { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 12px; padding: 10px 12px; border-radius: 12px; background: var(--primary-bg); color: var(--ink); font-size: .9rem; }
.insight-line .ico { color: var(--primary-dk); flex-shrink: 0; margin-top: 1px; }

/* column chart */
.chartbox { position: relative; }
.ccols { position: relative; display: flex; align-items: flex-end; gap: 6px; height: calc(var(--ch, 140px) + 44px); }
.ccols.many { gap: 2px; }
.ccol { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; border: 0; background: none; padding: 0; margin: 0; cursor: pointer; font: inherit; color: var(--muted); border-radius: 6px; }
.ccol i { display: block; width: 100%; max-width: 24px; background: var(--chart-bar); border-radius: 4px 4px 0 0; transition: background-color var(--t-fast) var(--ease); }
.ccol.now i { background: var(--sel-bg); }
.ccol.is-active i { background: var(--primary); }
@media (hover: hover) and (pointer: fine) { .ccol:hover i { background: var(--primary); } }
.ccol.is-active { background: var(--hover); }
.ccol.now.is-active i { background: var(--sel-bg); }
.ccol .cv { font-size: .75rem; font-weight: 700; color: var(--ink); white-space: nowrap; min-height: 16px; line-height: 16px; }
.ccol .cl { font-size: .75rem; white-space: nowrap; min-height: 16px; line-height: 16px; }
.ccol.now .cl { color: var(--ink); font-weight: 700; }
.cavg { position: absolute; left: 0; right: 0; border-top: 1.5px dashed var(--field); pointer-events: none; z-index: 1; }
.cavg em { position: absolute; right: 0; bottom: 2px; font-style: normal; font-size: .75rem; font-weight: 500; color: var(--muted); background: var(--card); padding: 0 4px; border-radius: 4px; }
.readout { margin: 8px 0 0; min-height: 22px; font-size: .88rem; font-weight: 700; color: var(--ink); }

/* busy hours */
.heat { display: grid; grid-template-columns: 34px repeat(12, minmax(0, 1fr)); gap: 3px; align-items: center; }
.heat .hh { font-size: .75rem; color: var(--muted); text-align: center; }
.heat .hd { font-size: .75rem; color: var(--muted); font-weight: 600; }
.hc { aspect-ratio: 1; min-height: 24px; width: 100%; border: 0; border-radius: 6px; padding: 0; margin: 0; font: 700 .75rem var(--font); display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--ink); background: var(--sunken); }
.hc.l1 { background: color-mix(in srgb, var(--primary) 20%, var(--card)); }
.hc.l2 { background: color-mix(in srgb, var(--primary) 40%, var(--card)); }
.hc.l3 { background: color-mix(in srgb, var(--primary) 60%, var(--card)); }
.hc.l4 { background: var(--primary); color: var(--primary-ink); }
.hc.is-active { box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--ink); }
.heatkey { display: flex; align-items: center; justify-content: flex-end; gap: 4px; margin-top: 8px; font-size: .75rem; color: var(--muted); }
.heatkey .hc { width: 16px; height: 16px; min-height: 0; aspect-ratio: auto; border-radius: 4px; cursor: default; display: inline-block; }
@media (min-width: 640px) { .heat { grid-template-columns: 44px repeat(12, minmax(0, 1fr)); gap: 4px; } .hc { aspect-ratio: auto; height: 32px; } }

/* ranked bars */
.hbars { display: flex; flex-direction: column; gap: 12px; }
.hb-t { display: flex; justify-content: space-between; gap: 10px; font-size: .92rem; }
.hb-t span { min-width: 0; overflow-wrap: anywhere; }
.hb-t b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.hb-bar { height: 10px; margin-top: 5px; border-radius: 999px; background: var(--sunken); overflow: hidden; }
.hb-bar > i { display: block; height: 100%; border-radius: 999px; background: var(--primary); }
.hb small { display: block; margin-top: 3px; color: var(--muted); font-size: .78rem; }
.paymix { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.paymix small { color: var(--muted); }
.cashcard .sec-head .ico { color: var(--muted); }
.cashcard .cashrow span { display: inline-flex; align-items: center; gap: 6px; }
.hero .hv b, .mtd .big, .lt b { font-variant-numeric: proportional-nums; }

/* report: KPI deltas, profit and loss rows */
.rkpis .kpi { display: flex; flex-direction: column; gap: 2px; }
.rkpis .kpi .v.neg { color: var(--late); }
@media (min-width: 640px) { .rkpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.plrows { display: flex; flex-direction: column; gap: 10px; }
.plr { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; align-items: center; gap: 10px; font-size: .92rem; }
.plr-bar { height: 10px; border-radius: 999px; background: var(--sunken); overflow: hidden; }
.plr-bar > i { display: block; height: 100%; border-radius: 999px; background: var(--primary); }
.plr.out .plr-bar > i { background: var(--field); }
.plr b { text-align: right; white-space: nowrap; }
.plr.total { border-top: 2px solid var(--line); padding-top: 10px; font-weight: 700; font-size: 1rem; }
.plr.total.neg b { color: var(--late); }
@media (max-width: 420px) { .plr { grid-template-columns: minmax(0, 1fr) auto; } .plr-bar { grid-column: 1 / -1; order: 3; } .plr.total > span:nth-child(2) { display: none; } }
.subh { font-size: .92rem; margin: 16px 0 10px; }
.cgrid { margin-bottom: 4px; }
@media (min-width: 640px) { .cgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.star { color: var(--star); }
body.exporting .readout, body.exporting .chart-hint { display: none; }

/* ---------------------------------------------------------------- customers & stock */
.searchbar { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; position: relative; }
.searchbar .sb-ico { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; display: flex; }
.searchbar .sb-ico .ico { width: 18px; height: 18px; }
.searchbar input[type=search] { flex: 1; min-width: 0; min-height: 48px; padding-left: 42px; }
.searchbar .btn { min-height: 48px; flex: none; }
.searchbar .icb.sm { flex: none; }

.segtiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
@media (min-width: 640px) { .segtiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.segtiles .st { display: flex; flex-direction: column; gap: 1px; min-width: 0; padding: 11px 12px; border-radius: 16px; background: var(--card); box-shadow: var(--shadow);
  color: var(--ink); text-decoration: none; border: 2px solid transparent; transition: background-color .15s, border-color .15s; }
@media (hover: hover) and (pointer: fine) { .segtiles .st:hover { background: var(--hover); color: var(--ink); } }
.segtiles .st.on { border-color: var(--primary); background: var(--primary-bg); }
.st-l { display: flex; align-items: center; gap: 6px; font-size: .8rem; font-weight: 600; color: var(--muted); }
.st-l .ico { width: 15px; height: 15px; flex-shrink: 0; }
.segtiles .st b { font-size: 1.45rem; line-height: 1.25; font-variant-numeric: proportional-nums; }
.segtiles .st b.money { font-size: 1.1rem; line-height: 1.6; overflow-wrap: anywhere; }
.segtiles .st small { font-size: .74rem; color: var(--muted); line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.segtiles .st.warn b, .segtiles .st.warn .st-l { color: var(--busy); }
.segtiles .st.bad b, .segtiles .st.bad .st-l { color: var(--late); }
.segtiles.stk { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.segtiles.stk:has(.st:nth-child(4)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) { .segtiles.stk, .segtiles.stk:has(.st:nth-child(4)) { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.segmented.s3 { grid-template-columns: repeat(3, auto); }
.badge.sm { padding: 1px 7px; font-size: .7rem; vertical-align: 2px; letter-spacing: .02em; }
.badge.sm .ico { width: 11px; height: 11px; }
.btn.block { display: flex; width: 100%; justify-content: center; margin-bottom: 12px; }

.custlist .li { color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .custlist .li:hover { background: var(--hover); } }
.li .av.mem { background: var(--navy); color: #fff; }
.li .t3 { display: flex; align-items: center; gap: 4px; font-size: .78rem; color: var(--muted); }
.li .t3 .ico { width: 13px; height: 13px; }
.li .t3.gone { color: var(--busy); font-weight: 700; }
.custlist .end b { font-size: 1rem; }
.custlist .end .t2 { font-variant-numeric: tabular-nums; }

.cust-hero { display: flex; flex-direction: column; gap: 12px; }
.ch-top { display: flex; align-items: center; gap: 12px; }
.ch-top .av { width: 52px; height: 52px; border-radius: 999px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--sunken); color: var(--muted); }
.ch-top .av.mem { background: var(--navy); color: #fff; }
.ch-top .av .ico { width: 24px; height: 24px; }
.ch-id { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ch-name { font-size: 1.15rem; line-height: 1.3; }
.ch-sub { color: var(--muted); font-size: .88rem; overflow-wrap: anywhere; }
.ch-note { display: flex; gap: 6px; align-items: flex-start; margin: 0; padding: 8px 10px; border-radius: var(--radius-md); background: var(--sunken); font-size: .88rem; }
.ch-note .ico { width: 14px; height: 14px; margin-top: 3px; flex-shrink: 0; color: var(--muted); }
.ch-actions { display: flex; gap: 8px; }
.ch-actions .btn { flex: 1; margin: 0; min-height: 48px; }
.ch-actions .icb { flex: none; width: 48px; height: 48px; box-shadow: none; background: var(--sunken); }

.cstats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
@media (min-width: 768px) { .cstats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cstats > div { display: flex; flex-direction: column; gap: 1px; min-width: 0; padding: 11px 12px; border-radius: 16px; background: var(--card); box-shadow: var(--shadow); }
.cstats span { font-size: .78rem; color: var(--muted); font-weight: 500; }
.cstats b { font-size: 1.15rem; line-height: 1.35; font-variant-numeric: proportional-nums; overflow-wrap: anywhere; }
.cstats small { font-size: .74rem; color: var(--muted); }
.cinsights .insight-line { align-items: center; }
.insight-line .btn { margin: 0 0 0 auto; flex: none; min-height: 40px; }
.insight-line.warn { background: var(--busy-bg); }
.insight-line.warn > .ico { color: var(--busy); }

.nomember { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.nomember .av { width: 40px; height: 40px; border-radius: 999px; display: flex; align-items: center; justify-content: center; background: var(--sunken); color: var(--muted); flex-shrink: 0; }
.nomember > div { flex: 1; min-width: 160px; display: flex; flex-direction: column; gap: 2px; }
.nomember .hint { margin: 0; }
.nomember form { margin: 0; }

details.editbox { padding: 0 16px; }
details.editbox > summary { display: flex; align-items: center; gap: 8px; min-height: 52px; cursor: pointer; font-weight: 700; color: var(--primary); list-style: none; }
details.editbox > summary::-webkit-details-marker { display: none; }
details.editbox > summary::after { content: ''; margin-left: auto; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .2s; }
details.editbox[open] > summary::after { transform: rotate(225deg); }
details.editbox[open] { padding-bottom: 16px; }

.vmonth { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 8px 16px; background: var(--sunken); font-size: .8rem; color: var(--muted); }
.vmonth b { color: var(--ink); font-size: .85rem; }
.vmonth + .li { border-top: 0; }
.vd { width: 40px; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; line-height: 1.15; }
.vd b { font-size: 1.1rem; }
.vd small { font-size: .7rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.visits .li { color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .visits .li:hover { background: var(--hover); } }
.visits .t1 { font-size: .92rem; letter-spacing: 0; }

.stklist .li { flex-wrap: wrap; }
.stklist .t2 { display: flex; align-items: center; gap: 4px; white-space: normal; }
.stklist .t2 .ico { width: 13px; height: 13px; flex-shrink: 0; }
.stklist .eta { font-weight: 700; }
.stklist .eta.out { color: var(--late); }
.stklist .eta.low { color: var(--busy); }
.stklist .alertlist .track i, .stklist .track i { background: var(--primary); }
.addlink { display: inline-flex; align-items: center; gap: 4px; min-height: 40px; font-size: .85rem; font-weight: 600; }
.addlink .ico { width: 13px; height: 13px; }

.recform .kinds { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 6px; margin: 4px 0 12px; }
.recform .kinds .pill span { display: flex; align-items: center; justify-content: center; gap: 6px; }
.recform .kinds .pill span .ico { width: 14px; height: 14px; }
.recform .qtyrow { align-items: flex-end; margin-bottom: 12px; }
.recform .qtyrow label { flex: 1; margin: 0; }
.recform [hidden] { display: none !important; }

.moves .li { min-height: 52px; padding-top: 8px; padding-bottom: 8px; }
.moves .t1 { font-size: .92rem; letter-spacing: 0; }
.mk { width: 32px; height: 32px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--sunken); color: var(--muted); }
.mk .ico { width: 16px; height: 16px; }
.mk.in { background: var(--ok-bg); color: var(--ok); }
.mk.adjust { background: var(--primary-bg); color: var(--primary-dk); }
.mq { white-space: nowrap; font-variant-numeric: tabular-nums; font-size: .9rem; }
.mq.pos { color: var(--ok); }
.custlist .mid, .visits .mid, .moves .mid { display: flex; flex-direction: column; gap: 1px; }
.custlist .t1, .custlist .t2, .visits .t1, .visits .t2, .moves .t1, .moves .t2 { display: block; }
.ch-actions .btn { padding: 0 10px; white-space: nowrap; }
.recform .kinds .pill span { white-space: nowrap; padding: 12px 6px; font-size: .92rem; }
.stklist .track { display: block; }

/* ---------------------------------------------------------------- customer page (go/) */
.pub-live { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 6px 16px; margin-top: 14px; padding: 14px 16px; border-radius: 18px; background: rgba(255, 255, 255, .08); }
.pl-wait { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pl-wait > span { font-size: .8rem; color: var(--navy-muted); font-weight: 500; }
.pl-wait b { font-family: var(--display); font-style: italic; font-weight: 800; font-size: 2.3rem; line-height: 1.05; }
.pl-wait b small { font-family: var(--font, inherit); font-style: normal; font-weight: 700; font-size: .95rem; color: var(--navy-muted); }
.pl-nums { display: flex; flex-direction: column; gap: 4px; font-size: .85rem; color: var(--navy-muted); text-align: right; padding-bottom: 4px; }
.pl-nums b { color: #fff; font-size: 1.05rem; }
.pub-live .pub-qline { grid-column: 1 / -1; margin: 4px 0 0; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, .12); font-size: .88rem; }
.pub-quick a .ico { transition: background-color .15s; }
.pub-quick a:focus-visible .ico { background: rgba(255, 255, 255, .22); }
@media (hover: hover) and (pointer: fine) { .pub-quick a:hover .ico { background: rgba(255, 255, 255, .22); } }

.pub-check label { font-weight: 500; font-size: .92rem; color: var(--muted); }
.pc-row { display: flex; gap: 8px; }
.pc-row input { flex: 1; min-width: 0; min-height: 52px; font-size: 1.1rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.pc-row input::placeholder { font-weight: 500; letter-spacing: .02em; }
.pc-row .btn { min-height: 52px; flex: none; padding: 0 18px; }
.ps-plate { display: flex; align-items: center; gap: 6px; margin: 0 0 4px; font-size: .85rem; font-weight: 700; color: var(--muted); letter-spacing: .03em; }

.pub-promos { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 640px) { .pub-promos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pub-promo { flex-direction: column; align-items: flex-start; gap: 4px; padding: 14px 16px; }
.pp-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 2px; }
.pp-val { min-width: 0; text-align: left; font-size: 1.45rem; line-height: 1.2; }
.pp-tag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; background: var(--sunken); color: var(--muted); font-size: .74rem; font-weight: 700; }
.pp-tag .ico { width: 12px; height: 12px; }
.pp-title { font-size: 1.02rem; }
.pp-what { font-size: .9rem; }
.pp-note { font-size: .88rem; color: var(--muted); }
.pub-promo small { display: flex; align-items: center; gap: 5px; color: var(--muted); font-size: .8rem; margin-top: 2px; }
.pub-promo small .ico { width: 13px; height: 13px; flex-shrink: 0; }

.pub-memtabs { position: relative; }
.mt-r { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.mt-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 14px; }
.mt-tabs label { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; border-radius: 9px; color: var(--muted); font-weight: 700; font-size: .9rem; cursor: pointer; text-align: center; }
.mt-tabs label .ico { width: 16px; height: 16px; flex-shrink: 0; }
#mt-join:checked ~ .mt-tabs label[for=mt-join], #mt-card:checked ~ .mt-tabs label[for=mt-card] { background: var(--card); color: var(--ink); box-shadow: var(--shadow); }
#mt-join:focus-visible ~ .mt-tabs label[for=mt-join], #mt-card:focus-visible ~ .mt-tabs label[for=mt-card] { outline: 2px solid var(--focus); outline-offset: 2px; }
#mt-join:checked ~ .mt-card, #mt-card:checked ~ .mt-join { display: none; }
.mt-lead { margin: 0 0 4px; }
.mt-join .pub-perks { margin: 8px 0 14px; padding: 12px; border-radius: var(--radius-md); background: var(--primary-bg); }
.pc-forget { display: inline-flex; align-items: center; min-height: 44px; }

.pub-btns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pub-btns .btn { margin: 0; }
.pub-btns .btn:only-child { grid-column: 1 / -1; }
.pub-hoursbox { border-top: 1px solid var(--line); margin-top: 4px; }
.pub-hoursbox > summary { display: flex; align-items: center; gap: 8px; min-height: 52px; cursor: pointer; list-style: none; }
.pub-hoursbox > summary::-webkit-details-marker { display: none; }
.pub-hoursbox > summary .ico { color: var(--primary); flex-shrink: 0; }
.pub-hoursbox > summary small { margin-left: auto; color: var(--primary); font-weight: 700; font-size: .82rem; white-space: nowrap; }
.pub-hoursbox[open] > summary small { opacity: .6; }
.pub-hoursbox .pub-hours { margin-bottom: 6px; }
.pub-loc .pub-review { padding-top: 12px; border-top: 1px solid var(--line); }
.pub-btns .btn { white-space: nowrap; padding: 0 10px; }

/* ---------------------------------------------------------------- feel native on phones
   Inputs: iOS zooms into any field under 16px and never zooms back (labels are .9rem, fields inherited it). */
input, select, textarea { font-size: max(1rem, 1em); }
/* Controls are not text: no selection or copy callout on long-press. Content text stays selectable. */
button, .btn, .icb, .fab, .pill, .segmented a, .mt-tabs label, .chips-nav a, .chips-nav button, .bottomnav a, summary,
.buylink, .segtiles .st, .lt, .pub-quick a, .stars label, .ccol, .st-act, .stp, .ract {
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
/* Sideways scrollers keep the swipe to themselves instead of triggering browser back/forward at the edge. */
.chips-nav, .tscroll { overscroll-behavior-x: contain; }
.plshow-body { overscroll-behavior: contain; }
/* Press feedback for tiles and rows that only had a hover state. */
.segtiles .st:active, .custlist .li:active, .visits .li:active, a.lt:active, .wachips .chip:active, .pub-quick a:active .ico { background: var(--hover); }
.pub-quick a:active .ico { background: rgba(255, 255, 255, .22); }
.segtiles .st, a.lt { transition: background-color .12s ease-out, border-color .12s ease-out; }
/* worst-case data: long names and units wrap instead of squeezing each other */
.stklist .mid .row.between { flex-wrap: wrap; column-gap: 10px; row-gap: 2px; }
.stklist .mid .row.between .itemlink { flex: 1 1 110px; min-width: 0; }
.stklist .mid .row.between .num { margin-left: auto; }
.moves .t1 { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.moves .mq { flex-shrink: 0; }
.discopt { flex-wrap: wrap; text-align: left; }
.discopt .t { flex: 1 1 180px; }
.discopt .a { margin-left: auto; }
.pl-pchip { flex-wrap: wrap; }
.pl-pchip .tx { flex: 1 1 170px; }
@media (max-width: 359px) {
  .recform .kinds .pill span { padding: 12px 4px; font-size: .88rem; }
  .recform .kinds .pill span .ico { display: none; }
}
/* month-to-date money stays on one line ("Rp" never separated from the number) and scales down on small phones */
.mtd .big { white-space: nowrap; overflow-wrap: normal; font-size: clamp(1.05rem, 4.6vw, 1.4rem); }
.proj-t b, .ins b, .cstats b, .li .end b { white-space: nowrap; }
/* ---------------------------------------------------------------- staff SOPs */
.setlist .sr .ic.sopnum { font-family: var(--display); font-style: italic; font-weight: 800; font-size: .95rem; color: var(--primary-dk); background: var(--primary-bg); }
.setlist .sr .tt { min-width: 0; }
.setlist .sr .badge { flex-shrink: 0; }
.sopsum { display: flex; flex-direction: column; gap: 10px; }
.sopbar { height: 10px; border-radius: 999px; background: var(--sunken); overflow: hidden; }
.sopbar i { display: block; height: 100%; background: var(--ok); border-radius: 999px; }
.sopfig { margin: 0 0 14px; }
.sopfig img { display: block; width: 100%; max-width: 540px; height: auto; aspect-ratio: 9 / 16; margin: 0 auto; border-radius: var(--radius); background: var(--sunken); box-shadow: var(--shadow); }
.sopdone { display: flex; align-items: center; gap: 6px; margin: 0 0 12px; font-weight: 700; }
.sopdone .ico { width: 18px; height: 18px; }
.sopnav { margin: 12px 0 10px; }
.sopdl { margin-bottom: 8px; }
a.sopnote { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); background: var(--busy-bg); box-shadow: none; border: 1px solid var(--busy-line); }
a.sopnote .ic { width: 40px; height: 40px; border-radius: 999px; background: var(--card); color: var(--busy); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
a.sopnote .ic .ico { width: 20px; height: 20px; }
a.sopnote .tx { flex: 1; min-width: 0; }
a.sopnote .tx b { display: block; }
a.sopnote .tx span { font-size: .88rem; color: var(--muted); }
a.sopnote .chev { width: 18px; height: 18px; color: var(--muted); }

/* ---------------------------------------------------------------- page changes feel like one app, not a new website
   Every tap loads a new page. Without this the whole screen blanks and redraws, top bar and tab bar included.
   With it (Chrome on Android, Safari 18.2+): the bars stay where they are, the content swaps in a quick fade, and on the
   board a car's plate glides from the hydraulic tile to the drying tile (and on to "awaiting payment").
   Browsers without support simply load the page as before. */
@view-transition { navigation: auto; }
.topbar { view-transition-name: vt-top; }
.bottomnav { view-transition-name: vt-nav; }
.fab { view-transition-name: vt-fab; }
::view-transition-group(*) { animation-duration: 160ms; animation-timing-function: var(--ease-out); }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 140ms; animation-timing-function: var(--ease-out); }
/* the bars do not move between pages: no slide, no flicker, only their contents (title, active tab) cross-fade */
::view-transition-group(vt-top), ::view-transition-group(vt-nav), ::view-transition-group(vt-fab) { animation-duration: 120ms; }
/* a car moving between stations travels across the screen: ease-in-out, a little longer so the eye can follow it */
[style*="view-transition-name:car-"] { view-transition-class: car; }
::view-transition-group(.car) { animation-duration: 280ms; animation-timing-function: var(--ease-in-out); }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* ---------------------------------------------------------------- full-screen panels open and close instead of popping
   Price list shown to the customer (new vehicle) and the big QRIS (payment): rise and fade in, leave the same way, a
   little faster. "hidden" still switches them off completely; display is allowed to wait for the fade. */
.plshow, .qris-full {
  transition: opacity 240ms var(--ease-out), transform 240ms var(--ease-out), display 240ms allow-discrete;
}
.plshow[hidden] { opacity: 0; transform: translateY(24px); transition-duration: 160ms; }
.qris-full[hidden] { opacity: 0; transform: scale(.96); transition-duration: 160ms; }
@starting-style {
  .plshow:not([hidden]) { opacity: 0; transform: translateY(24px); }
  .qris-full:not([hidden]) { opacity: 0; transform: scale(.96); }
}
@media (prefers-reduced-motion: reduce) {
  .plshow[hidden], .qris-full[hidden] { transform: none; }
  @starting-style {
    .plshow:not([hidden]), .qris-full:not([hidden]) { transform: none; }
  }
}
/* Installed on an iPhone the status bar is see-through: full-screen panels pad themselves out from under it. */
.plshow-body {
  padding-top: calc(16px + env(safe-area-inset-top, 0px));
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.qris-full {
  padding: max(24px, env(safe-area-inset-top, 0px)) max(24px, env(safe-area-inset-right, 0px))
    max(24px, env(safe-area-inset-bottom, 0px)) max(24px, env(safe-area-inset-left, 0px));
}

/* ---------------------------------------------------------------- board tiles answer the finger like buttons
   The big tile link (opens the car) had no press state at all, so a tap felt ignored until the next page appeared.
   Tiles, motorcycle rows, pay cards and the today list are controls: a long-press must not select the plate text or
   pop the iPhone link-preview menu over the board. */
.st-link:active, .mrow .mlink:active, .paycard .top:active { opacity: .62; }
.stations a, .st-link, .mrow .mlink, .paycard .top, #today-list .li {
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}

/* ---------------------------------------------------------------- facilities and member Wifi */
.pub-fac { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.pf-h { font-size: .78rem; font-weight: 700; color: var(--navy-muted); letter-spacing: .04em; text-transform: uppercase; }
.pub-fac ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.pub-fac li, .pub-fac li a { display: inline-flex; align-items: center; gap: 6px; font-size: .84rem; font-weight: 600; color: #fff; }
.pub-fac li { padding: 5px 11px; border-radius: 999px; background: rgba(255, 255, 255, .1); }
.pub-fac li a { text-decoration: none; }
.pub-fac li:has(a) { background: rgba(255, 255, 255, .18); }
.pub-fac .ico { width: 15px; height: 15px; flex-shrink: 0; opacity: .9; }
.pc-wifi { display: flex; align-items: center; gap: 12px; margin: 10px 0 4px; padding: 12px; border-radius: var(--radius-md); background: var(--primary-bg); }
.pw-ic { width: 40px; height: 40px; border-radius: 999px; display: flex; align-items: center; justify-content: center; background: var(--card); color: var(--primary-dk); flex-shrink: 0; }
.pw-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; font-size: .9rem; }
.pw-tx strong { font-weight: 700; overflow-wrap: anywhere; user-select: all; -webkit-user-select: all; }
.pc-wifi .btn { flex: none; margin: 0; }
.facgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.facgrid .check { gap: 8px; padding: 9px 11px; }
.facgrid .check .ico { color: var(--primary); flex-shrink: 0; }
.facgrid .check .nm { font-weight: 500; font-size: .9rem; }
.facgrid .check { justify-content: flex-start; text-align: left; }

/* ---------------------------------------------------------------- KPIs and targets */
.kpi-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-bottom: 12px; }
.kpi-top p { margin: 0; font-size: .85rem; }
.tgs { display: flex; flex-direction: column; gap: 14px; }
.tg-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: .9rem; }
.tg-h b { font-size: 1.05rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tg-h small { color: var(--muted); font-weight: 500; font-size: .8rem; }
.tg-bar { position: relative; height: 10px; margin: 6px 0 5px; border-radius: 99px; background: var(--sunken); }
.tg-bar i { position: absolute; inset: 0 auto 0 0; border-radius: 99px; background: var(--primary); }
.tg.behind .tg-bar i { background: var(--busy); }
.tg.done .tg-bar i { background: var(--ok); }
.tg-bar em { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; background: var(--ink); border-radius: 2px; opacity: .55; }
.tg-s { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-size: .8rem; color: var(--muted); }
.tg-s .st { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; }
.tg-s .ico { width: 13px; height: 13px; }
.tg.ok .tg-s .st, .tg.done .tg-s .st { color: var(--ok); }
.tg.behind .tg-s .st { color: var(--busy); }
.tg-levels { list-style: none; margin: 0; padding: 12px 0 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.tg-levels li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: .88rem; }
.tg-levels li > span { flex: 1; min-width: 0; }
.tg-levels li small { color: var(--muted); font-size: .8rem; }
.tg-levels .ico { width: 15px; height: 15px; flex-shrink: 0; }
.tg-levels li.met .ico { color: var(--ok); }
.tg-levels li.miss .ico { color: var(--late); }
.tgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0 10px; }
.tg-cta { text-decoration: none; align-items: center; }
.tg-cta span { flex: 1; }

.kgroup h2 { margin-bottom: 4px; }
.krows { display: flex; flex-direction: column; }
.krow { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.krow:first-child { border-top: 0; }
.kr-l { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.kr-l b { font-size: .95rem; }
.kr-l small { color: var(--muted); font-size: .78rem; line-height: 1.35; }
.kr-r { display: grid; grid-template-columns: auto; justify-items: end; gap: 3px; flex-shrink: 0; max-width: 55%; }
.kv { font-size: 1.15rem; font-weight: 700; font-variant-numeric: proportional-nums; white-space: nowrap; }
.kr-r .delta { font-size: .75rem; }
.kspark { display: flex; align-items: flex-end; gap: 3px; height: 22px; }
.kspark i { display: block; width: 7px; min-height: 2px; border-radius: 2px 2px 0 0; background: var(--chart-bar); }
.kspark i.now { background: var(--primary); opacity: .55; }
.ktg { display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; margin-top: 3px; padding: 1px 8px; border-radius: 999px; font-size: .74rem; font-weight: 700; }
.ktg .ico { width: 12px; height: 12px; }
.ktg.met { background: var(--ok-bg); color: var(--ok); }
.ktg.miss { background: var(--late-bg); color: var(--late); }
.tbl.punct td { vertical-align: top; }
.tbl.punct td small { font-size: .74rem; }
.pp { display: inline-block; min-width: 46px; padding: 1px 8px; border-radius: 999px; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }
.pp.good { background: var(--ok-bg); color: var(--ok); }
.pp.mid { background: var(--busy-bg); color: var(--busy); }
.pp.bad { background: var(--late-bg); color: var(--late); }
.plist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.plist li { padding: 12px 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; }
.plist li:first-child { border-top: 0; padding-top: 4px; }
.pl-top { display: flex; align-items: center; gap: 10px; }
.pl-n { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pl-n small { color: var(--muted); font-size: .78rem; }
.plist .pp { display: inline-flex; flex-direction: column; align-items: center; line-height: 1.2; padding: 4px 10px; border-radius: 12px; font-size: 1rem; }
.plist .pp small { font-size: .7rem; font-weight: 600; opacity: .8; }
.pl-f { display: flex; flex-wrap: wrap; gap: 2px 6px; font-size: .82rem; color: var(--muted); }
.pl-f b { color: var(--ink); font-variant-numeric: tabular-nums; }
.pl-f i { font-style: normal; opacity: .6; }
.mypunct { display: flex; align-items: center; gap: 12px; }
.mypunct .pp { font-size: 1.1rem; padding: 6px 12px; }
.mypunct div { display: flex; flex-direction: column; gap: 2px; }
/* KPI v2: months, RASCI, per person */
.monthnav { display: flex; align-items: center; gap: 8px; }
.monthnav b { min-width: 120px; text-align: center; }
.icb.sm.off { opacity: .35; pointer-events: none; }
.kmeta { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; margin-top: 3px; }
.kmeta .ktg { margin-top: 0; }
.ktg.na { background: var(--sunken); color: var(--muted); }
.krc { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 3px 4px; font-size: .74rem; color: var(--muted); }
.rc { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 18px; padding: 0 4px; border-radius: 5px; font-size: .68rem; font-weight: 800; letter-spacing: .02em; background: var(--sunken); color: var(--muted); }
.krc .rc { margin-left: 4px; }
.krc .rc:first-child { margin-left: 0; }
.rc-r { background: var(--primary); color: var(--primary-ink); }
.rc-a, .rc-ar { background: var(--navy); color: #fff; }
.rc-s { background: var(--primary-bg); color: var(--primary-dk); }
.rc-c { background: var(--busy-bg); color: var(--busy); }
.rc-i { background: var(--sunken); color: var(--muted); }
.kv.off { color: var(--late); }
.ktip { display: flex; gap: 6px; align-items: flex-start; margin: -4px 0 10px; padding: 8px 10px; border-radius: var(--radius-md); background: var(--primary-bg); font-size: .82rem; }
.ktip .ico { width: 14px; height: 14px; color: var(--primary-dk); flex-shrink: 0; margin-top: 2px; }
.kpeople { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.kpeople li { padding: 10px 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; }
.kchips { display: flex; flex-wrap: wrap; gap: 6px; }
.kc { display: inline-flex; flex-direction: column; min-width: 64px; padding: 5px 9px; border-radius: 10px; background: var(--sunken); line-height: 1.25; }
.kc small { font-size: .7rem; color: var(--muted); }
.kc b { font-size: .92rem; font-variant-numeric: tabular-nums; }
.kc.met { background: var(--ok-bg); }
.kc.met b { color: var(--ok); }
.kc.miss { background: var(--late-bg); }
.kc.miss b { color: var(--late); }
.tgsug { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 4px 0 12px; }
.tgsug .hint { margin: 0; }
.tg-score { margin: 0; font-size: .88rem; }
.tgform .fset { margin-bottom: 12px; }
.rlegend { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: .84rem; }
.rlegend li { display: flex; align-items: center; gap: 8px; }
.tbl.rasci th.c, .tbl.rasci td.c { text-align: center; width: 1%; }
.tbl.rasci td { padding-top: 6px; padding-bottom: 6px; }
.tbl.rasci tr.rg td { font-weight: 700; font-size: .8rem; color: var(--muted); background: var(--sunken); }
.rsel { width: auto; min-width: 64px; min-height: 40px; padding: 4px 8px; font-weight: 700; text-align: center; }
.tbl.rasci { width: 100%; table-layout: fixed; }
.tbl.rasci th.c, .tbl.rasci td.c { width: 62px; padding-left: 2px; padding-right: 2px; }
.tbl.rasci td:first-child { white-space: normal; font-size: .86rem; }
.rsel { min-width: 0; width: 58px; padding: 4px 2px; font-size: .85rem; }
.tscroll .tbl.rasci { min-width: 0; }
@media (max-width: 359px) { .tbl.rasci th.c, .tbl.rasci td.c { width: 54px; } .rsel { width: 52px; font-size: .8rem; } }
.kshow { padding: 0 16px; }
.kshow > summary { display: flex; align-items: center; gap: 8px; min-height: 52px; cursor: pointer; font-weight: 700; color: var(--primary); list-style: none; }
.kshow > summary::-webkit-details-marker { display: none; }
.kshow > summary span { flex: 1; }
.kshow > summary small { color: var(--muted); font-weight: 600; font-size: .8rem; }
.kshow[open] { padding-bottom: 16px; }
.kshow-g { margin-bottom: 12px; }
.kshow-g .switchrow { margin-bottom: 0; padding: 8px 0; border-top: 1px solid var(--line); }
.kshow-g .switchrow:first-of-type { border-top: 0; }
.kshow-g .switchrow .tx span { display: block; line-height: 1.35; }
.kshow-g .switchrow input.toggle { margin: 0; }
.kscope { display: inline-flex; align-items: center; padding: 1px 8px; border-radius: 999px; font-size: .72rem; font-weight: 700; background: var(--primary-bg); color: var(--primary-dk); }
.kr-l .kchips { margin-top: 6px; }
.kr-l .kc { min-width: 56px; padding: 3px 8px; }
/* price list: the short label always sits under the package name; an empty badge row only keeps titles level side by side */
.pl-card .pl-tagline { margin: -6px 0 0; font-size: .9rem; font-weight: 700; color: var(--primary-dk); opacity: 1; }
.pl-card.featured .pl-tagline { color: #fff; opacity: .92; }
@media (max-width: 599px) { .pl-card .pl-tag:empty { display: none; } }