/* SP Beauty & Spa - Design System v4 (owner-approved, static/flat) */
:root {
  /* Palette */
  --ivory: #F6F7EB;
  --card: #FFFFFF;
  --charcoal: #393E41;
  --blue: #3F88C5;
  --teal: #44BBA4;
  --vermilion: #E94F37;
  --warn: #E8912E; /* amber - urgent rest, pending, caution */
  --dim2: #a0a4a8;

  --text: #393E41;
  --text-2: #6b7075;
  --border: rgba(57, 62, 65, 0.10);

  --radius: 18px;
  --radius-sm: 12px;
  /* Soft UI elevation scale (layered, subtle depth) */
  --shadow-sm: 0 1px 2px rgba(57, 62, 65, 0.05), 0 1px 3px rgba(57, 62, 65, 0.04);
  --shadow: 0 2px 6px rgba(57, 62, 65, 0.05), 0 6px 16px rgba(57, 62, 65, 0.06);
  --shadow-hover: 0 6px 14px rgba(57, 62, 65, 0.08), 0 14px 32px rgba(57, 62, 65, 0.10);
  --tap: 44px;

  /* Category accent colors */
  --cat-hair: #3F88C5;
  --cat-face: #44BBA4;
  --cat-laser: #E94F37;

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  --header-h: 56px;
  --tabbar-h: 64px;
  --sidenav-w: 240px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  background: var(--ivory);
  color: var(--text);
  font-family: "Noto Sans Lao", "Noto Sans", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.75; /* Lao script needs taller line-height */
  -webkit-font-smoothing: antialiased;
}

.num { font-variant-numeric: tabular-nums; font-family: "Noto Sans Lao", "Noto Sans", system-ui, sans-serif; }
input, select, textarea, button, table { font-family: "Noto Sans Lao", "Noto Sans", system-ui, sans-serif; }
h1, h2, h3 { font-weight: 700; line-height: 1.5; color: var(--charcoal); }
button { font-family: inherit; cursor: pointer; }

/* ---- Top utility header ---- */
#topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  height: calc(var(--header-h) + var(--safe-top));
  padding-top: var(--safe-top);
  display: flex; align-items: center; gap: 10px;
  padding-left: 16px; padding-right: 16px;
  background: var(--card);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 8px rgba(57,62,65,.04);
}
#topbar .brand { font-weight: 800; letter-spacing: -.01em; color: var(--charcoal); margin-right: auto; }

.tag {
  font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px;
  border: 1px solid transparent;
}
.tag.active { background: rgba(68,187,164,.15); color: var(--teal); border-color: rgba(68,187,164,.35); }
.tag.locked { background: rgba(233,79,55,.12); color: var(--vermilion); border-color: rgba(233,79,55,.35); }

.sync-dot {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--text-2);
}
.sync-dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--teal); }
.sync-dot.offline::before { background: var(--text-2); }
.sync-dot.pending::before { background: var(--vermilion); }

.user-badge {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--blue); color: #fff; display: grid; place-items: center;
  font-size: 13px; font-weight: 700;
}

/* ---- Layout regions ---- */
#app {
  padding-top: calc(var(--header-h) + var(--safe-top));
  padding-bottom: calc(var(--tabbar-h) + var(--safe-bottom));
  min-height: 100%;
}
.screen { display: none; padding: 16px; max-width: 1100px; margin: 0 auto; }
.screen.is-active { display: block; }

/* ---- Cards ---- */
.card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 20px; margin-bottom: 14px;
}
.stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.stat {
  position: relative; overflow: hidden;
  border-radius: var(--radius); padding: 18px; color: #fff; box-shadow: var(--shadow-sm);
}
.stat .label { font-size: 13px; opacity: .92; font-weight: 500; }
.stat .value { font-size: 28px; font-weight: 800; margin-top: 6px; letter-spacing: -.01em; }
.stat.blue { background: var(--blue); }
.stat.teal { background: var(--teal); }
.stat.charcoal { background: var(--charcoal); }
.stat.vermilion { background: var(--vermilion); }

/* ---- Buttons ---- */
.btn {
  min-height: var(--tap); padding: 0 18px; border: none; border-radius: var(--radius-sm);
  font-weight: 600; font-size: 15px; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  transition: transform .15s ease-out, box-shadow .2s ease, background .15s ease, opacity .15s ease-out;
}
.btn:active { transform: scale(.97); }
.btn.primary { background: var(--vermilion); color: #fff; box-shadow: 0 3px 10px rgba(233,79,55,.28); }
.btn.primary:hover { box-shadow: 0 5px 16px rgba(233,79,55,.36); }
.btn.blue { background: var(--blue); color: #fff; box-shadow: 0 3px 10px rgba(63,136,197,.26); }
.btn.blue:hover { box-shadow: 0 5px 16px rgba(63,136,197,.34); }
.btn.ghost { background: var(--card); color: var(--charcoal); border: 1px solid var(--border); }
.btn.ghost:hover { background: rgba(57,62,65,.04); border-color: rgba(57,62,65,.2); }
.btn.block { width: 100%; }

.field { margin-bottom: 14px; }
.field label { display: block; font-size: 14px; color: var(--text-2); margin-bottom: 6px; }
.field input, .field select, .field textarea {
  width: 100%; min-height: var(--tap); padding: 10px 14px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--card); color: var(--text); font-family: inherit; font-size: 16px;
}
.field input { padding: 0 14px; }
.field textarea { resize: vertical; line-height: 1.6; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--blue); outline-offset: -1px; }

/* ---- Bottom tab bar (mobile/tablet) ---- */
#tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  height: calc(var(--tabbar-h) + var(--safe-bottom));
  padding-bottom: var(--safe-bottom);
  display: flex; background: var(--card); border-top: 1px solid var(--border);
}
#tabbar button {
  flex: 1; background: none; border: none; color: var(--text-2);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  font-size: 11px; min-height: var(--tap);
}
#tabbar button svg { width: 22px; height: 22px; }
#tabbar button.is-active { color: var(--vermilion); }

/* Desktop side nav (>=1024px) */
#sidenav { display: none; }
@media (min-width: 1024px) {
  #tabbar { display: none; }
  #sidenav {
    display: flex; flex-direction: column; gap: 4px;
    position: fixed; top: calc(var(--header-h) + var(--safe-top)); bottom: 0; left: 0;
    width: var(--sidenav-w); background: var(--card);
    border-right: 1px solid var(--border); padding: 12px;
  }
  #sidenav button {
    position: relative;
    display: flex; align-items: center; gap: 12px; width: 100%;
    background: none; border: none; color: var(--text-2);
    padding: 11px 14px; border-radius: var(--radius-sm); font-size: 15px; text-align: left;
    transition: background .15s ease, color .15s ease;
  }
  #sidenav button:hover { background: rgba(57,62,65,.04); color: var(--charcoal); }
  #sidenav button svg { width: 20px; height: 20px; }
  #sidenav button.is-active { background: rgba(63,136,197,.12); color: var(--blue); font-weight: 600; }
  #sidenav button.is-active::before { content: ""; position: absolute; left: 0; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0; background: var(--blue); }
  #app { padding-left: var(--sidenav-w); }
  .stat-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ---- Sheet-style modal ---- */
.sheet-backdrop {
  position: fixed; inset: 0; z-index: 140; background: rgba(57,62,65,.45);
  display: flex; align-items: flex-end; justify-content: center;
  visibility: hidden; pointer-events: none;
}
.sheet-backdrop.open { visibility: visible; pointer-events: auto; }
.sheet {
  background: var(--card); width: 100%; max-width: 560px;
  border-radius: 22px 22px 0 0; padding: 22px;
  padding-bottom: calc(22px + var(--safe-bottom));
  max-height: 92vh; overflow-y: auto;
  box-shadow: 0 -8px 40px rgba(57,62,65,.18);
}
.sheet::before { content: ""; display: block; width: 40px; height: 4px; border-radius: 999px; background: rgba(57,62,65,.16); margin: -4px auto 16px; }
.sheet h2 { font-size: 20px; letter-spacing: -.01em; }
@media (min-width: 1024px) {
  .sheet-backdrop { align-items: center; }
  .sheet { border-radius: 22px; box-shadow: var(--shadow-hover); }
  .sheet::before { display: none; }
}

/* ---- Auth / PIN ---- */
.btn.loading { opacity: .85; cursor: progress; display: inline-flex; align-items: center; justify-content: center; gap: 9px; }
.btn-spinner { width: 15px; height: 15px; border-radius: 50%; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; display: inline-block; animation: btn-spin .7s linear infinite; flex-shrink: 0; }
@keyframes btn-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .btn-spinner { animation-duration: 1.4s; } }
#auth-screen {
  position: fixed; inset: 0; z-index: 80; background: var(--ivory);
  display: none; flex-direction: column; align-items: center; justify-content: center; padding: 24px;
}
#auth-screen.show { display: flex; }
#auth-screen .card { width: 100%; max-width: 380px; }
.pin-row { display: flex; gap: 10px; justify-content: center; margin: 12px 0; }
.pin-dot { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--border); }
.pin-dot.filled { background: var(--charcoal); border-color: var(--charcoal); }
.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.keypad button { min-height: 56px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--card); font-size: 22px; font-weight: 600; }

.muted { color: var(--text-2); font-size: 14px; }
.hidden { display: none !important; }

.screen-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.screen-head h1 { margin: 0; }
.head-actions { display: flex; gap: 8px; }

/* ---- Filter controls (chips + search) ---- */
#menu-filter { display: none; }
@media (min-width: 1024px) { #menu-filter { display: block; } }
.filter-controls {
  display: flex; gap: 18px; flex-wrap: wrap; align-items: flex-end;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); padding: 14px 16px; margin-bottom: 14px;
}
.filter-group { display: flex; flex-direction: column; gap: 8px; }
.filter-label { font-size: 12px; font-weight: 700; color: var(--text-2); text-transform: uppercase; letter-spacing: .04em; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  min-height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--card); color: var(--text-2); font-family: inherit; font-size: 14px; font-weight: 600;
  cursor: pointer; transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.chip:hover { border-color: rgba(57,62,65,.22); color: var(--charcoal); }
.chip.active { background: var(--charcoal); color: #fff; border-color: var(--charcoal); }
.filter-search {
  min-height: 40px; padding: 0 16px; border: 1px solid var(--border); border-radius: 999px;
  font-family: inherit; font-size: 15px; min-width: 220px; background: var(--card); color: var(--text);
}
.filter-search:focus { outline: 2px solid var(--blue); outline-offset: -1px; }
#fsheet .filter-controls, #hfs .filter-controls { flex-direction: column; align-items: stretch; border: none; box-shadow: none; padding: 0; gap: 16px; margin: 0 0 4px; }
#fsheet .filter-search { width: 100%; }

/* ---- Data table (desktop) ---- */
.data-table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); overflow: hidden;
}
.data-table thead th {
  text-align: left; font-size: 12px; font-weight: 700; color: var(--text-2);
  text-transform: uppercase; letter-spacing: .04em; padding: 13px 16px;
  background: #fbfbf5; border-bottom: 1px solid var(--border);
}
.data-table td { padding: 14px 16px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr { transition: background .12s ease; }
.data-table tbody tr:hover { background: rgba(57,62,65,.025); }
.ta-c { text-align: center !important; }
.ta-r { text-align: right !important; }
.td-name { font-weight: 600; display: flex; align-items: center; gap: 6px; }
.td-sub { font-size: 12.5px; color: var(--text-2); margin-top: 3px; max-width: 440px; line-height: 1.5; }
.td-price { font-weight: 700; color: var(--charcoal); font-size: 15px; }
.cat-tag { display: inline-block; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; }
.cat-tag[data-cat="hair"] { background: rgba(63,136,197,.12); color: var(--cat-hair); }
.cat-tag[data-cat="face"] { background: rgba(68,187,164,.15); color: var(--cat-face); }
.cat-tag[data-cat="laser"] { background: rgba(233,79,55,.12); color: var(--cat-laser); }
.data-table .row-actions { display: flex; gap: 6px; justify-content: flex-end; }

/* ---- Filter FAB (mobile, menu screen) ---- */
.fab {
  position: fixed; right: 18px; z-index: 45;
  bottom: calc(var(--tabbar-h) + var(--safe-bottom) + 18px);
  width: 56px; height: 56px; border-radius: 18px; border: none;
  background: var(--vermilion); color: #fff; display: grid; place-items: center;
  box-shadow: 0 6px 18px rgba(233,79,55,.42); transition: transform .15s ease, box-shadow .2s ease;
}
.fab svg { width: 24px; height: 24px; }
.fab:active { transform: scale(.92); }
.fab.hidden { display: none; }
@media (min-width: 1024px) { .fab { display: none !important; } }

/* FAB stack (appointments: add + history) */
.fab-stack { position: fixed; right: 18px; z-index: 45; bottom: calc(var(--tabbar-h) + var(--safe-bottom) + 18px); display: flex; flex-direction: column; align-items: center; gap: 12px; }
.fab-stack.hidden { display: none; }
.fab-stack .fab { position: static; }
.fab-mini { width: 46px; height: 46px; border-radius: 15px; border: 1px solid var(--border); background: var(--card); color: var(--blue); display: grid; place-items: center; box-shadow: 0 4px 14px rgba(57,62,65,.16); transition: transform .15s ease; }
.fab-mini svg { width: 22px; height: 22px; }
.fab-mini:active { transform: scale(.92); }
@media (min-width: 1024px) { .fab-stack { display: none !important; } }
@media (max-width: 1023px) { #screen-appointments .head-actions { display: none; } }

/* ---- Client detail ---- */
.cd-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.cd-avatar { width: 48px; height: 48px; border-radius: 14px; background: var(--blue); color: #fff; display: grid; place-items: center; font-size: 20px; font-weight: 800; flex-shrink: 0; }
.cd-id { flex: 1; min-width: 0; }
.cd-id h2 { margin: 0; font-size: 19px; }
.cd-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 18px; }
.cd-stat { background: rgba(57,62,65,.04); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px; text-align: center; }
.cd-stat-v { font-size: 22px; font-weight: 800; color: var(--charcoal); }
.cd-stat-l { font-size: 12px; color: var(--text-2); margin-top: 4px; }
.cd-section-title { font-size: 13px; font-weight: 700; color: var(--text-2); text-transform: uppercase; letter-spacing: .04em; margin: 18px 0 10px; }
.hist-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--border); }
.hist-row:last-child { border-bottom: none; }
.hist-svc { font-weight: 600; font-size: 14px; }
.hist-meta { font-size: 12px; color: var(--text-2); margin-top: 2px; }
.hist-amt { font-weight: 700; color: var(--charcoal); white-space: nowrap; }

/* Course builder summary */
.course-summary { background: rgba(57,62,65,.04); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px; }
.cs-row { display: flex; align-items: center; justify-content: space-between; padding: 4px 0; font-size: 15px; }
.cs-row.savings { font-weight: 700; color: var(--teal); padding: 6px 2px 0; }
#cf-combined { color: var(--text-2); }

/* Category section header with accent dot + count */
.cat-head { display: flex; align-items: center; gap: 9px; margin: 22px 2px 10px; }
.cat-head:first-child { margin-top: 4px; }
.cat-dot { width: 9px; height: 9px; border-radius: 3px; background: var(--text-2); }
.cat-name { font-size: 13px; font-weight: 700; color: var(--charcoal); text-transform: uppercase; letter-spacing: .05em; }
.cat-count { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--text-2); background: rgba(57,62,65,.06); border-radius: 999px; padding: 2px 9px; min-width: 24px; text-align: center; }
.cat-head[data-cat="hair"] .cat-dot { background: var(--cat-hair); }
.cat-head[data-cat="face"] .cat-dot { background: var(--cat-face); }
.cat-head[data-cat="laser"] .cat-dot { background: var(--cat-laser); }

/* List rows - soft card with left category accent + hover elevation */
.list-row {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 12px;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 14px 16px; margin-bottom: 9px; box-shadow: var(--shadow-sm);
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.list-row::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: transparent; }
.list-row[data-cat="hair"]::before { background: var(--cat-hair); }
.list-row[data-cat="face"]::before { background: var(--cat-face); }
.list-row[data-cat="laser"]::before { background: var(--cat-laser); }
.list-row.is-course { background: #FDF6F4; }
@media (hover: hover) { .list-row:hover { box-shadow: var(--shadow-hover); transform: translateY(-1px); border-color: rgba(57,62,65,.16); } }
.list-row .main { flex: 1; min-width: 0; }
.list-row .title { font-weight: 600; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.list-row .sub { font-size: 13px; color: var(--text-2); margin-top: 3px; line-height: 1.5; }
.list-row .price { font-weight: 700; font-size: 16px; color: var(--charcoal); white-space: nowrap; }
.price-wrap { text-align: right; }
.price-orig { font-size: 12px; color: var(--text-2); text-decoration: line-through; }
.list-row .row-actions { display: flex; gap: 6px; }
.icon-btn {
  width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--card); display: grid; place-items: center; color: var(--text-2);
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.icon-btn svg { width: 17px; height: 17px; }
.icon-btn:hover { background: rgba(57,62,65,.05); }
.icon-btn.danger { color: var(--vermilion); }
.icon-btn.danger:hover { background: rgba(233,79,55,.08); border-color: rgba(233,79,55,.3); }

.empty-state { color: var(--text-2); font-size: 14px; padding: 14px 16px; background: rgba(57,62,65,.03); border: 1px dashed var(--border); border-radius: var(--radius-sm); margin-bottom: 9px; }

.pill { font-size: 11.5px; font-weight: 600; padding: 3px 10px; border-radius: 999px; line-height: 1.4; white-space: nowrap; }
.pill.vip { background: rgba(233,79,55,.12); color: var(--vermilion); }
.pill.regular { background: rgba(63,136,197,.12); color: var(--blue); }
.pill.first, .pill.save { background: rgba(68,187,164,.15); color: var(--teal); }
.pill.bundle { background: rgba(57,62,65,.08); color: var(--charcoal); }
.pill.promo { background: rgba(233,79,55,.12); color: var(--vermilion); }

/* Promo / danger buttons */
.btn.promo { color: var(--vermilion); border: 1px solid rgba(233,79,55,.35); background: rgba(233,79,55,.05); }
.btn.promo:hover { background: rgba(233,79,55,.1); }
.btn.danger { color: var(--vermilion); border: 1px solid rgba(233,79,55,.35); background: var(--card); }
.btn.danger:hover { background: rgba(233,79,55,.06); }

/* Menu item detail popup */
.md-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 4px; }
.md-av { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; font-size: 18px; font-weight: 800; color: #fff; flex-shrink: 0; background: var(--blue); }
.md-av[data-cat="face"] { background: var(--teal); }
.md-av[data-cat="laser"] { background: var(--vermilion); }
.md-title { flex: 1; min-width: 0; }
.md-title h2 { font-size: 18px; font-weight: 800; line-height: 1.35; }
.md-head .x { width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--border); background: var(--card); color: var(--text-2); font-size: 18px; line-height: 1; cursor: pointer; flex-shrink: 0; }
.md-head .x:hover { background: rgba(57,62,65,.05); }
.md-rows { margin: 14px 0 0; }
.md-rows .drow { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 14px; }
.md-rows .drow:last-child { border-bottom: none; }
.md-rows .drow .l { color: var(--text-2); }
.md-rows .drow .v { font-weight: 700; text-align: right; }
.md-desc { font-size: 13px; color: var(--text-2); background: rgba(57,62,65,.04); border-radius: 10px; padding: 11px 13px; margin-top: 12px; line-height: 1.6; }

/* Customer row extras */
.cust-av { width: 40px; height: 40px; border-radius: 12px; color: #fff; display: grid; place-items: center; font-size: 16px; font-weight: 800; flex-shrink: 0; }
.mini-stat { text-align: center; padding: 0 6px; }
.mini-stat .lab { display: block; font-size: 10.5px; font-weight: 700; color: var(--text-2); text-transform: uppercase; letter-spacing: .04em; }
.mini-stat b { display: block; font-size: 15px; font-weight: 800; color: var(--charcoal); margin-top: 2px; font-variant-numeric: tabular-nums; }
.sold-mini { display: inline-block; background: rgba(233,79,55,.10); color: var(--vermilion); font-weight: 700; font-size: 11px; padding: 1px 8px; border-radius: 999px; margin-left: 6px; }

/* Settings layout: user card + nav sidebar + content pane */
.user-card { display: flex; align-items: center; gap: 12px; background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 12px 14px; box-shadow: var(--shadow-sm); margin-bottom: 14px; }
.uc-av { width: 44px; height: 44px; border-radius: 12px; color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 16px; flex-shrink: 0; }
.uc-info { flex: 1; min-width: 0; }
.uc-name { font-weight: 700; font-size: 15px; }
.uc-role { font-size: 12px; color: var(--text-2); margin-top: 3px; }
.role-pill { display: inline-block; font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 6px; text-transform: uppercase; letter-spacing: .04em; }

.set-layout { display: block; }
.set-nav { display: flex; flex-direction: column; gap: 6px; background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 6px; }
.sn-btn { display: flex; align-items: center; gap: 12px; padding: 12px 12px; border: none; background: transparent; border-radius: 10px; font-family: inherit; text-align: left; cursor: pointer; color: var(--text); transition: background .12s ease; }
.sn-btn:hover { background: rgba(57,62,65,.04); }
.sn-ic { width: 34px; height: 34px; border-radius: 10px; background: rgba(63,136,197,.1); color: var(--blue); display: grid; place-items: center; flex-shrink: 0; }
.sn-ic svg { width: 18px; height: 18px; }
.sn-lab { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sn-lab b { font-size: 14px; font-weight: 700; color: var(--charcoal); }
.sn-lab span { font-size: 12px; color: var(--text-2); line-height: 1.4; }
.sn-chev { color: var(--text-2); font-size: 20px; flex-shrink: 0; }

.set-content { display: none; }
.sec-card { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 18px; box-shadow: var(--shadow-sm); }
.sec-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.sec-head h2 { font-size: 17px; font-weight: 800; }
.sec-desc { font-size: 13px; color: var(--text-2); margin-top: 3px; line-height: 1.5; }
.sec-empty { border: 1px dashed var(--border); background: rgba(57,62,65,.03); border-radius: 11px; padding: 24px; color: var(--text-2); text-align: center; font-size: 13.5px; }
.sec-note { font-size: 12px; color: var(--text-2); font-weight: 600; background: rgba(63,136,197,.06); border: 1px solid rgba(63,136,197,.2); border-radius: 11px; padding: 11px 13px; margin-top: 12px; }
.sec-note b { color: var(--charcoal); }
.biz-view { display: flex; flex-direction: column; }
.bv-row { display: grid; grid-template-columns: 130px 1fr; gap: 12px; align-items: center; padding: 13px 2px; border-bottom: 1px solid var(--border); }
.bv-row:last-child { border-bottom: none; }
.bv-row .l { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--text-2); }
.bv-row .v { font-size: 15px; font-weight: 700; color: var(--charcoal); }
.bv-row .v.dim { color: var(--dim2); font-weight: 500; font-style: italic; }

@media (min-width: 1024px) {
  .set-layout { display: grid; grid-template-columns: 280px 1fr; gap: 18px; align-items: start; }
  .set-content { display: block; position: sticky; top: 16px; }
  .sn-btn.active { background: rgba(63,136,197,.1); }
  .sn-btn.active .sn-lab b { color: var(--blue); }
  .sn-chev { display: none; }
}

/* Drag-to-reorder (tiers) */
.tier-row { cursor: grab; user-select: none; position: relative; transition: opacity .15s, transform .15s; }
.tier-row.dragging { opacity: .5; cursor: grabbing; }
.tier-row .grip { width: 24px; display: grid; place-items: center; color: var(--text-2); cursor: grab; flex-shrink: 0; }
.tier-row .grip svg { width: 16px; height: 16px; }
.tier-row.drop-above { box-shadow: inset 0 3px 0 var(--vermilion); }
.tier-row.drop-below { box-shadow: inset 0 -3px 0 var(--vermilion); }

/* Promotion section in item forms */
.promo-sec { border: 1px dashed rgba(233,79,55,.4); background: rgba(233,79,55,.04); border-radius: var(--radius-sm); padding: 14px; margin-bottom: 14px; }
.promo-sec-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.promo-sec-head span { font-size: 13px; font-weight: 700; color: var(--vermilion); text-transform: uppercase; letter-spacing: .04em; }
.promo-sec-head .btn { min-height: 32px; padding: 0 12px; font-size: 13px; }
.promo-sec .field:last-child { margin-bottom: 0; }

/* ---- Appointment Kanban board ---- */
.kanban { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: start; }
.kan-col { background: rgba(57,62,65,.035); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; }
.kan-col-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; padding: 2px 4px; }
.kan-dot { width: 9px; height: 9px; border-radius: 50%; }
.kan-title { font-size: 13px; font-weight: 700; color: var(--charcoal); text-transform: uppercase; letter-spacing: .04em; }
.kan-count { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--text-2); background: var(--card); border: 1px solid var(--border); border-radius: 999px; padding: 2px 9px; min-width: 24px; text-align: center; }
.kan-body { min-height: 40px; }
.kan-empty { text-align: center; font-size: 12px; color: var(--dim, #5b6890); opacity: .5; padding: 18px 0; }
.appt-card {
  background: var(--card); border: 1px solid var(--border); border-left: 3px solid var(--blue);
  border-radius: 12px; padding: 12px 14px; margin-bottom: 9px; box-shadow: var(--shadow-sm);
  transition: box-shadow .2s ease, transform .2s ease;
}
@media (hover: hover) { .appt-card:hover { box-shadow: var(--shadow); transform: translateY(-1px); } }
.appt-card.done { opacity: .62; }

/* ===== Appointment card v3 (name / time / service focus) ===== */
.appt-card.nc { border-left: 1px solid var(--border); border-radius: 14px; padding: 13px 14px; position: relative; overflow: hidden; }
.appt-card.nc::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--blue); }
.appt-card.nc.prog::before { background: var(--warn); }
.appt-card.nc.done::before { background: var(--teal); }
.appt-card.nc.done { opacity: 1; }
.nc-head { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; }
.nc-time { text-align: center; background: rgba(63,136,197,.09); border-radius: 10px; padding: 8px 10px; min-width: 60px; }
.nc-time .hh { font-size: 19px; font-weight: 800; color: var(--blue); font-variant-numeric: tabular-nums; letter-spacing: -.02em; line-height: 1; font-family: 'Noto Sans Lao', sans-serif; }
.nc-time .dd { font-size: 9.5px; color: var(--text-2); font-weight: 700; margin-top: 3px; font-variant-numeric: tabular-nums; text-transform: uppercase; letter-spacing: .03em; }
.appt-card.nc.prog .nc-time { background: rgba(255,179,71,.14); } .appt-card.nc.prog .nc-time .hh { color: #c47f1d; }
.appt-card.nc.done .nc-time { background: rgba(68,187,164,.11); } .appt-card.nc.done .nc-time .hh { color: #1e9078; }
.nc-name { font-size: 18px; font-weight: 800; color: var(--charcoal); line-height: 1.15; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nc-status { font-size: 9.5px; font-weight: 800; padding: 4px 9px; border-radius: 6px; text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; }
.nc-status.b { background: rgba(63,136,197,.12); color: var(--blue); }
.nc-status.w { background: rgba(255,179,71,.16); color: #c47f1d; }
.nc-status.g { background: rgba(68,187,164,.14); color: #1e9078; }
.nc-svc { display: flex; align-items: center; gap: 8px; margin-top: 11px; padding: 9px 11px; background: rgba(57,62,65,.04); border-radius: 9px; }
.nc-svc .ico { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; font-size: 13px; flex-shrink: 0; }
.nc-svc .ico.h { background: rgba(63,136,197,.14); color: var(--blue); }
.nc-svc .ico.f { background: rgba(68,187,164,.16); color: var(--teal); }
.nc-svc .ico.l { background: rgba(233,79,55,.14); color: var(--vermilion); }
.nc-svc .txt { min-width: 0; flex: 1; }
.nc-svc .nm { font-size: 13.5px; font-weight: 700; color: var(--charcoal); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nc-svc .sub { font-size: 11px; color: var(--text-2); font-weight: 600; margin-top: 1px; font-variant-numeric: tabular-nums; }
.nc-svc-cnt { font-size: 10.5px; font-weight: 700; color: var(--text-2); background: var(--card); border: 1px solid var(--border); padding: 2px 7px; border-radius: 5px; white-space: nowrap; flex-shrink: 0; }
.nc-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
.nc-staff { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--text-2); font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nc-av { width: 20px; height: 20px; border-radius: 6px; color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 9.5px; flex-shrink: 0; }
.ac-btn.nc-btn { background: var(--blue); color: #fff; border: none; font-weight: 700; font-size: 12.5px; padding: 8px 18px; border-radius: 9px; white-space: nowrap; min-height: 34px; }
.appt-card.nc.prog .ac-btn.nc-btn { background: var(--warn); }
.ac-btn.nc-btn.ghost { background: var(--card); color: var(--text-2); border: 1px solid var(--border); }

.ac-name { font-weight: 600; font-size: 15px; }
.ac-meta { font-size: 12px; color: var(--text-2); margin-top: 2px; }
.appt-actions { display: flex; gap: 6px; margin-top: 11px; flex-wrap: wrap; }
.ac-btn { min-height: 34px; padding: 0 12px; border-radius: 9px; border: none; font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: background .15s ease, box-shadow .2s ease; }
.ac-btn.blue { background: var(--blue); color: #fff; }
.ac-btn.ghost { background: rgba(57,62,65,.06); color: var(--charcoal); }
.ac-btn:active { transform: scale(.96); }
@media (max-width: 1023px) {
  .kanban { display: flex; overflow-x: auto; gap: 12px; padding-bottom: 10px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
  .kan-col { min-width: 80%; scroll-snap-align: start; flex-shrink: 0; }
}

/* Mobile appointment status tabs + single list */
.appt-tabs { display: flex; gap: 6px; background: rgba(57,62,65,.06); padding: 4px; border-radius: 12px; margin-bottom: 12px; }
.appt-tab { flex: 1; min-width: 0; min-height: 46px; border: none; background: transparent; border-radius: 9px; font-family: inherit; font-weight: 700; font-size: 13.5px; color: var(--text-2); display: flex; align-items: center; justify-content: center; gap: 5px; cursor: pointer; }
.appt-tab.active { background: var(--card); color: var(--charcoal); box-shadow: 0 1px 3px rgba(57,62,65,.12); }
.appt-tab .at-lab { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.at-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.at-count { font-size: 12px; font-weight: 800; background: rgba(57,62,65,.10); border-radius: 999px; padding: 1px 7px; min-width: 20px; text-align: center; flex-shrink: 0; }
.appt-list-m { display: flex; flex-direction: column; gap: 10px; }

/* Mobile: hide top bar, tighten spacing, bump text ~20% */
@media (max-width: 1023px) {
  #topbar { display: none; }
  #app { padding-top: calc(var(--safe-top) + 6px); }
  .screen { padding: 12px; }
  .screen-head { margin-bottom: 10px; }
  .screen-head h1 { font-size: 26px; }
  /* Compact action buttons on mobile: single-line, smaller, horizontally scrollable */
  .head-actions { gap: 6px; overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; max-width: 100%; padding-bottom: 2px; }
  .head-actions::-webkit-scrollbar { display: none; }
  .head-actions .btn { white-space: nowrap; font-size: 12.5px; min-height: 38px; padding: 0 12px; flex: 0 0 auto; }
  /* Standard list-card sizing (matches customer/employee/payroll cards) */
  .appt-card { padding: 13px 14px; border-radius: 14px; margin-bottom: 8px; }
  .appt-card .ac-name { font-size: 15px; }
  .appt-card .ac-meta { font-size: 12px; margin-top: 3px; }
  .appt-card .ac-items { font-size: 12.5px; margin-top: 6px; padding-top: 6px; }
  .appt-card .tag-mini { font-size: 10.5px; }
  .ac-btn { min-height: 36px; font-size: 13px; padding: 0 14px; }
}

.checkin-total { display: flex; align-items: baseline; justify-content: space-between; margin: 6px 0 14px; }
.checkin-total .amt { font-size: 28px; font-weight: 700; color: var(--charcoal); }
.seg { display: flex; gap: 6px; background: rgba(57,62,65,.06); padding: 4px; border-radius: 12px; margin-bottom: 14px; }
.seg button { flex: 1; min-height: 38px; border: none; background: transparent; border-radius: 9px; font-family: inherit; font-weight: 600; color: var(--text-2); transition: background .15s ease, color .15s ease; }
.seg button.active { background: var(--card); color: var(--charcoal); box-shadow: 0 1px 3px rgba(57,62,65,.12); }
.course-pick { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; margin-bottom: 8px; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.course-pick.sel { border-color: var(--vermilion); background: rgba(233,79,55,.05); }
.sess-bar { height: 6px; border-radius: 999px; background: rgba(57,62,65,.10); overflow: hidden; margin-top: 6px; }
.sess-bar > i { display: block; height: 100%; background: var(--teal); }

/* ---- Wide two-column modal (booking) ---- */
.sheet.wide { max-width: 940px; padding: 0; overflow: hidden; }
.sheet.wide::before { display: none; }
.bkm { display: flex; flex-direction: column; max-height: 92vh; }
.m-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.m-head h2 { font-size: 20px; font-weight: 800; letter-spacing: -.01em; }
.m-head .x { width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--border); background: var(--card); color: var(--text-2); display: grid; place-items: center; cursor: pointer; font-size: 20px; line-height: 1; }
.m-head .x:hover { background: rgba(57,62,65,.05); }
.m-body { display: grid; grid-template-columns: 1fr 1.1fr; overflow: hidden; flex: 1; min-height: 0; }
.m-body .col { overflow-y: auto; padding: 14px 18px; -webkit-overflow-scrolling: touch; }
/* --- compact form density inside wide modal (desktop only; mobile keeps 44px tap) --- */
@media (min-width: 720px) {
  .sheet.wide .field { margin-bottom: 10px; }
  .sheet.wide .field label { font-size: 12.5px; margin-bottom: 4px; font-weight: 600; }
  .sheet.wide .field input,
  .sheet.wide .field select,
  .sheet.wide .field textarea,
  .sheet.wide .sp-trigger { min-height: 36px; padding: 6px 12px; font-size: 14px; border-radius: 9px; }
  .sheet.wide .field input { padding: 0 12px; }
  .sheet.wide .field textarea { min-height: 52px; padding: 8px 12px; line-height: 1.5; }
  .sheet.wide .sec-explain { padding: 10px 12px; margin-bottom: 10px; line-height: 1.55; }
  .sheet.wide .sec-explain-h { font-size: 12.5px; margin-bottom: 5px; }
  .sheet.wide .sec-explain p { font-size: 11.5px; margin-bottom: 5px; }
  .sheet.wide .sec-explain p.mini { font-size: 11px; padding-top: 5px; }
  .sheet.wide .seg { min-height: 36px; }
  .sheet.wide .seg button { font-size: 12.5px; padding: 6px 10px; }
  .sheet.wide .m-head { padding: 12px 18px; }
  .sheet.wide .m-head h2 { font-size: 17px; }
  .sheet.wide .m-foot { padding: 10px 18px calc(10px + var(--safe-bottom)); }
  .sheet.wide .course-summary { margin-top: 8px !important; }
  .sheet.wide .cs-row { padding: 8px 12px; font-size: 13px; }
  .sheet.wide .picker-count-row { margin: 4px 0; }
  .sheet.wide .svc-picker { gap: 4px; }
  .sheet.wide .svc-pick { padding: 8px 10px; }
}
.m-body .col.left { border-right: 1px solid var(--border); background: #fcfcf7; }
.m-foot { border-top: 1px solid var(--border); padding: 14px 22px calc(14px + var(--safe-bottom)); background: #fcfcf7; flex-shrink: 0; }
.bk-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; max-height: 92px; overflow-y: auto; }
.bk-chips-empty { font-size: 13px; color: var(--text-2); }
.bk-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--card); border: 1px solid var(--border); border-radius: 999px; padding: 6px 8px 6px 13px; font-size: 13px; white-space: nowrap; }
.bk-chip b { font-weight: 700; }
.bk-chip.redeem { border-color: rgba(68,187,164,.4); background: rgba(68,187,164,.08); }
.bk-chip .rm { width: 22px; height: 22px; border: none; background: transparent; color: var(--text-2); cursor: pointer; display: grid; place-items: center; border-radius: 50%; }
.bk-chip .rm:hover { background: rgba(57,62,65,.08); color: var(--vermilion); }
.bk-chip .rm svg { width: 13px; height: 13px; }
.bk-footrow { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.bk-footrow .sheet-actions .btn { flex: 0 0 auto; }
.bk-total { font-size: 14px; color: var(--text-2); }
.bk-total b { font-size: 22px; font-weight: 800; color: var(--charcoal); margin-left: 8px; font-variant-numeric: tabular-nums; }
@media (max-width: 560px) { .bk-footrow { flex-direction: column; align-items: stretch; gap: 10px; } .bk-footrow .sheet-actions .btn { flex: 1; } }
.sheet.wide .bk-items { max-height: 300px; }
@media (max-width: 820px) {
  .m-body { grid-template-columns: 1fr; overflow-y: auto; }
  .m-body .col { overflow: visible; }
  .m-body .col.left { border-right: none; border-bottom: 1px solid var(--border); }
}

/* ---- Booking modal ---- */
.bk-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bk-items { max-height: 240px; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: 14px; -webkit-overflow-scrolling: touch; }
.bk-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px 12px; background: transparent; border: none; border-bottom: 1px solid var(--border); font-family: inherit; font-size: 15px; text-align: left; cursor: pointer; transition: background .12s ease; }
.bk-item:last-child { border-bottom: none; }
.bk-item:hover { background: rgba(57,62,65,.03); }
.bk-item.sel { background: rgba(68,187,164,.08); }
.bk-check { width: 22px; height: 22px; border-radius: 6px; border: 1.5px solid var(--border); display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 13px; flex-shrink: 0; }
.bk-item.sel .bk-check { background: var(--teal); border-color: var(--teal); }
.bk-item-main { flex: 1; min-width: 0; }
.bk-item-name { font-weight: 500; }
.bk-item-price { font-weight: 700; color: var(--charcoal); white-space: nowrap; }
.bk-active { margin-bottom: 14px; }
.pkg-badge { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 10px 12px; border: 1px solid rgba(233,79,55,.3); background: rgba(233,79,55,.05); border-radius: var(--radius-sm); font-family: inherit; font-size: 13px; cursor: pointer; margin-bottom: 6px; text-align: left; }
.pkg-badge.sel { border-color: var(--teal); background: rgba(68,187,164,.1); }
.pkg-act { font-weight: 700; color: var(--vermilion); white-space: nowrap; }
.pkg-badge.sel .pkg-act { color: var(--teal); }

/* Redeem HERO card (booking modal) */
.redeem-hero { background: rgba(68,187,164,.08); border: 2px solid var(--teal); border-radius: 14px; padding: 14px 16px; margin-bottom: 12px; }
.redeem-hero.sel { background: rgba(68,187,164,.14); }
.redeem-hero .rh-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 8px; }
.redeem-hero .rh-title { font-weight: 800; font-size: 15px; color: var(--charcoal); }
.redeem-hero .rh-sub { font-size: 12px; color: var(--teal); font-weight: 700; margin-top: 3px; }
.redeem-hero .bar { height: 6px; background: rgba(68,187,164,.2); border-radius: 99px; overflow: hidden; margin-bottom: 10px; }
.redeem-hero .bar > i { display: block; height: 100%; background: var(--teal); }
.redeem-btn { width: 100%; background: var(--teal); color: #fff; border: none; border-radius: 10px; font-family: inherit; font-weight: 800; font-size: 14px; padding: 12px; cursor: pointer; display: flex; justify-content: center; align-items: center; gap: 8px; box-shadow: 0 3px 10px rgba(68,187,164,.28); transition: transform .12s ease; }
.redeem-btn:active { transform: scale(.98); }
.redeem-btn .credit { background: rgba(255,255,255,.22); padding: 2px 10px; border-radius: 99px; font-size: 11.5px; font-weight: 800; font-variant-numeric: tabular-nums; }
.divider-or { display: flex; align-items: center; gap: 10px; margin: 12px 0 10px; color: var(--text-2); font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.divider-or::before, .divider-or::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.course-pick .btn { flex-shrink: 0; }
.bk-summary { background: rgba(57,62,65,.04); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px; margin-bottom: 6px; }
.bk-sum-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-2); margin-bottom: 8px; }
.bk-sum-row { display: flex; align-items: center; gap: 10px; padding: 5px 0; font-size: 14px; }
.bk-sum-name { flex: 1; min-width: 0; }
.bk-sum-x { width: 28px; height: 28px; border: none; background: transparent; color: var(--text-2); cursor: pointer; display: grid; place-items: center; }
.bk-sum-x svg { width: 15px; height: 15px; }
.bk-sum-total { display: flex; justify-content: space-between; font-weight: 800; font-size: 16px; color: var(--charcoal); border-top: 1px solid var(--border); margin-top: 8px; padding-top: 10px; }
.ac-items { font-size: 12px; color: var(--text-2); margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--border); line-height: 1.5; }

/* Card mini tags */
.ac-tags { display: flex; gap: 5px; margin-bottom: 7px; flex-wrap: wrap; }
.tag-mini { font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 6px; text-transform: uppercase; letter-spacing: .03em; }
.tag-mini.booked { background: rgba(68,187,164,.15); color: var(--teal); }
.tag-mini.walkin { background: rgba(57,62,65,.1); color: var(--charcoal); }
.tag-mini.cash { background: rgba(68,187,164,.15); color: var(--teal); }
.tag-mini.transfer { background: rgba(63,136,197,.12); color: var(--blue); }
.ac-btn.primary { background: var(--vermilion); color: #fff; }

/* Appointment detail meta */
.ad-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }

/* Payment choice buttons (cash / transfer) */
.pay-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pay-choice button { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; border: 1.5px solid var(--border); background: var(--card); border-radius: var(--radius-sm); font-family: inherit; font-size: 15px; font-weight: 600; color: var(--text-2); cursor: pointer; transition: border-color .15s ease, color .15s ease, background .15s ease, box-shadow .15s ease; }
.pay-choice button.active { border-color: var(--charcoal); color: var(--charcoal); background: rgba(57,62,65,.04); box-shadow: inset 0 0 0 1px var(--charcoal); }
.pc-dot { width: 10px; height: 10px; border-radius: 50%; }

/* Confirm dialog */
.confirm-box .confirm-msg { font-size: 16px; font-weight: 600; color: var(--charcoal); margin-bottom: 18px; line-height: 1.6; }

/* Toast */
#toast-host { position: fixed; left: 0; right: 0; bottom: calc(var(--tabbar-h) + var(--safe-bottom) + 16px); z-index: 200; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
@media (min-width: 1024px) { #toast-host { bottom: 24px; } }
.toast { pointer-events: auto; max-width: 90%; background: var(--charcoal); color: #fff; padding: 12px 18px; border-radius: 12px; font-size: 14px; font-weight: 600; box-shadow: 0 8px 24px rgba(57,62,65,.28); opacity: 0; transform: translateY(12px); transition: opacity .25s ease, transform .25s ease; }
.toast.show { opacity: 1; transform: none; }
.toast.warn { background: var(--vermilion); }
.toast.success { background: var(--teal); }

/* History overlay */
.overlay { position: fixed; inset: 0; z-index: 120; background: var(--ivory); display: flex; flex-direction: column; }
.overlay.hidden { display: none; }
.overlay-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: calc(var(--safe-top) + 14px) 18px 14px; background: var(--card); border-bottom: 1px solid var(--border); box-shadow: 0 1px 8px rgba(57,62,65,.04); }
.overlay-head h2 { margin: 0; font-size: 19px; }
.overlay-body { flex: 1; overflow-y: auto; padding: 16px; -webkit-overflow-scrolling: touch; }
.data-table tfoot td { padding: 14px 16px; border-top: 2px solid var(--border); background: #fbfbf5; font-size: 15px; }

/* History: mobile cards + sticky total + filter FAB */
.hist-foot { display: none; }
#hist-fab { display: none; }
@media (max-width: 1023px) {
  #hist-filter { display: none; }
  .overlay-body { padding: 14px 14px 96px; }
  .hist-foot { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px calc(16px + var(--safe-bottom)); background: var(--card); border-top: 1px solid var(--border); box-shadow: 0 -4px 18px rgba(57,62,65,.06); flex-shrink: 0; }
  .hist-foot.hidden { display: none; }
  .hist-foot .lab { font-size: 13px; font-weight: 700; color: var(--text-2); text-transform: uppercase; letter-spacing: .04em; }
  .hist-foot .tot { font-size: 24px; font-weight: 800; color: var(--charcoal); }
  #hist-fab { display: grid; position: fixed; right: 16px; bottom: calc(var(--safe-bottom) + 92px); z-index: 130; }
}
.txn-card { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 14px 15px; box-shadow: 0 1px 3px rgba(57,62,65,.05); margin-bottom: 10px; }
.tc-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.tc-who { font-size: 16px; font-weight: 700; }
.tc-amt { font-size: 17px; font-weight: 800; white-space: nowrap; }
.tc-svc { font-size: 14px; color: var(--text); margin-top: 3px; }
.tc-meta { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 12.5px; color: var(--text-2); flex-wrap: wrap; }
.pill-c { font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 999px; }
.pill-c.cash { background: rgba(68,187,164,.15); color: var(--teal); }
.pill-c.tf { background: rgba(63,136,197,.12); color: var(--blue); }
.pill-c.rd { background: rgba(57,62,65,.08); color: var(--charcoal); }

/* Help overlay (menu how-it-works) */
.help-btn { color: #7f5af0; border-color: rgba(127,90,240,.4); background: rgba(127,90,240,.06); }
.help-btn:hover { background: rgba(127,90,240,.1); }
@media (max-width: 1023px) { .help-btn { display: none; } }
/* Help tabs (sticky under the overlay header) */
.help-tabs { display: flex; gap: 6px; margin-bottom: 12px; background: rgba(57,62,65,.06); padding: 4px; border-radius: 12px; }
.help-tab { flex: 1; background: transparent; border: none; border-radius: 9px; font-family: inherit; font-weight: 700; font-size: 13px; color: var(--text-2); padding: 10px 8px; display: flex; align-items: center; justify-content: center; gap: 7px; cursor: pointer; transition: background .12s ease, color .12s ease; }
.help-tab .hlt-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.help-tab.svc .hlt-dot { background: var(--blue); }
.help-tab.buffet .hlt-dot { background: var(--vermilion); }
.help-tab.combo .hlt-dot { background: var(--teal); }
.help-tab.active { background: var(--card); color: var(--charcoal); box-shadow: 0 1px 3px rgba(57,62,65,.14); }

.help-toolbar { display: flex; gap: 8px; align-items: center; margin-bottom: 14px; }
.help-toolbar .btn.primary { background: var(--vermilion); color: #fff; border: none; }
.help-intro { background: rgba(127,90,240,.06); border-left: 3px solid #7f5af0; border-radius: 9px; padding: 12px 14px; font-size: 13.5px; line-height: 1.75; margin-bottom: 16px; }
.help-intro b { color: #7f5af0; }
.help-lane { background: var(--ivory); border: 1px solid var(--border); border-radius: 14px; padding: 16px 18px; margin-bottom: 14px; }
.hl-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 8px; }
.hl-head .hl-ico { width: 38px; height: 38px; border-radius: 11px; color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 14px; flex-shrink: 0; }
.hl-head h3 { font-size: 16px; font-weight: 800; margin-bottom: 3px; }
.hl-head .hl-sub { font-size: 12.5px; color: var(--text-2); line-height: 1.6; }
.help-lane.svc .hl-ico { background: var(--blue); } .help-lane.svc { border-left: 4px solid var(--blue); }
.help-lane.buffet .hl-ico { background: var(--vermilion); } .help-lane.buffet { border-left: 4px solid var(--vermilion); }
.help-lane.combo .hl-ico { background: var(--teal); } .help-lane.combo { border-left: 4px solid var(--teal); }
.hl-explain { background: rgba(57,62,65,.04); border-radius: 9px; padding: 11px 13px; font-size: 12.5px; line-height: 1.75; margin: 8px 0 14px; }
.hl-steps { display: grid; gap: 8px; grid-template-columns: repeat(5, 1fr); }
.help-lane.buffet .hl-steps { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 820px) { .hl-steps, .help-lane.buffet .hl-steps { grid-template-columns: 1fr; } }
.hl-step { background: var(--card); border: 1.5px solid var(--border); border-radius: 11px; padding: 12px; position: relative; transition: all .35s cubic-bezier(.2,.9,.25,1); opacity: .55; }
.hl-step.on { opacity: 1; transform: translateY(-3px); box-shadow: 0 6px 18px rgba(63,136,197,.18); }
.help-lane.svc .hl-step.on { background: rgba(63,136,197,.08); border-color: var(--blue); }
.help-lane.buffet .hl-step.on { background: rgba(233,79,55,.08); border-color: var(--vermilion); box-shadow: 0 6px 18px rgba(233,79,55,.18); }
.help-lane.combo .hl-step.on { background: rgba(68,187,164,.08); border-color: var(--teal); box-shadow: 0 6px 18px rgba(68,187,164,.18); }
.hl-step.done { opacity: .85; background: rgba(68,187,164,.05); border-color: rgba(68,187,164,.4); }
.hl-n { position: absolute; top: -8px; left: 10px; background: var(--charcoal); color: #fff; font-size: 10.5px; font-weight: 800; padding: 2px 8px; border-radius: 99px; }
.hl-step.on .hl-n { background: var(--vermilion); }
.hl-step.done .hl-n { background: var(--teal); }
.hl-t { font-weight: 800; font-size: 13px; margin: 5px 0 4px; }
.hl-d { font-size: 11.5px; color: var(--text-2); line-height: 1.55; }
.hl-d b { color: var(--text); }
.hl-live { margin-top: 12px; background: rgba(57,62,65,.04); border-radius: 10px; padding: 10px 12px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; min-height: 38px; }
.hl-badge { padding: 4px 10px; border-radius: 99px; font-size: 11.5px; font-weight: 700; background: var(--card); border: 1px solid var(--border); opacity: 0; transform: translateY(4px); transition: .35s; }
.hl-badge.show { opacity: 1; transform: none; }
.hl-badge.money { background: rgba(233,79,55,.12); color: var(--vermilion); border-color: transparent; }
.hl-badge.credit { background: rgba(127,90,240,.12); color: #7f5af0; border-color: transparent; }
.hl-badge.warn { background: rgba(255,183,71,.15); color: #d99000; border-color: transparent; }
.hl-badge.ok { background: rgba(68,187,164,.15); color: var(--teal); border-color: transparent; }
.hl-cur { color: var(--text-2); font-size: 11.5px; margin-left: auto; font-variant-numeric: tabular-nums; }

/* Explainer panel inside item forms (right column) */
.sec-explain { background: rgba(127,90,240,.06); border: 1px solid rgba(127,90,240,.22); border-radius: 12px; padding: 14px 16px; margin-bottom: 14px; line-height: 1.75; }
.sec-explain-h { font-weight: 800; font-size: 13.5px; color: #7f5af0; margin-bottom: 8px; }
.sec-explain p { font-size: 12.5px; color: var(--text); margin-bottom: 8px; }
.sec-explain p:last-child { margin-bottom: 0; }
.sec-explain p b { color: var(--charcoal); font-weight: 700; }
.sec-explain p.mini { font-size: 11.5px; color: var(--text-2); border-top: 1px dashed rgba(127,90,240,.25); padding-top: 8px; }

/* Multi-select service picker (Combo course builder) */
.picker-count-row { display: flex; justify-content: flex-end; margin-bottom: 6px; }
.picker-count-pill { font-size: 11.5px; font-weight: 800; padding: 3px 10px; border-radius: 999px; background: rgba(68,187,164,.15); color: var(--teal); }
.svc-picker { display: flex; flex-direction: column; gap: 6px; max-height: 320px; overflow-y: auto; padding-right: 4px; -webkit-overflow-scrolling: touch; }
.svc-pick { display: flex; align-items: center; gap: 12px; padding: 11px 12px 11px 14px; background: var(--card); border: 1.5px solid var(--border); border-radius: 11px; cursor: pointer; position: relative; transition: border-color .15s ease, background .15s ease, transform .15s ease; }
.svc-pick::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; border-radius: 11px 0 0 11px; background: var(--text-2); }
.svc-pick[data-cat="hair"]::before { background: var(--cat-hair); }
.svc-pick[data-cat="face"]::before { background: var(--cat-face); }
.svc-pick[data-cat="laser"]::before { background: var(--cat-laser); }
.svc-pick:hover { border-color: rgba(57,62,65,.22); }
.svc-pick.on { background: rgba(68,187,164,.06); border-color: var(--teal); box-shadow: 0 2px 8px rgba(68,187,164,.14); }
.svc-badge { display: flex; flex-direction: column; align-items: center; gap: 2px; flex-shrink: 0; min-width: 42px; }
.svc-ico { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; font-size: 15px; color: #fff; background: var(--text-2); }
.svc-pick[data-cat="hair"] .svc-ico { background: var(--cat-hair); }
.svc-pick[data-cat="face"] .svc-ico { background: var(--cat-face); }
.svc-pick[data-cat="laser"] .svc-ico { background: var(--cat-laser); }
.svc-blbl { font-size: 9.5px; font-weight: 800; color: var(--text-2); text-transform: uppercase; letter-spacing: .05em; }
.svc-main { flex: 1; min-width: 0; }
.svc-name { font-weight: 700; font-size: 13.5px; line-height: 1.35; }
.svc-cmp { display: inline-block; font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 5px; background: rgba(127,90,240,.14); color: #7f5af0; margin-left: 6px; vertical-align: middle; letter-spacing: .02em; }
.svc-meta { display: flex; gap: 8px; align-items: center; margin-top: 4px; flex-wrap: wrap; }
.svc-tpill { font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: 5px; }
.svc-pick[data-cat="hair"] .svc-tpill { background: rgba(63,136,197,.12); color: var(--cat-hair); }
.svc-pick[data-cat="face"] .svc-tpill { background: rgba(68,187,164,.15); color: var(--cat-face); }
.svc-pick[data-cat="laser"] .svc-tpill { background: rgba(233,79,55,.12); color: var(--cat-laser); }
.svc-price { font-weight: 800; font-size: 13px; color: var(--charcoal); }
.svc-check { width: 24px; height: 24px; border: 2px solid var(--border); border-radius: 7px; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 13px; flex-shrink: 0; transition: .15s; }
.svc-pick.on .svc-check { background: var(--teal); border-color: var(--teal); }

/* Combo source-tabs (all/hair/face/laser filter view) */
.src-tabs { display: flex; gap: 4px; padding: 4px; background: rgba(57,62,65,.06); border-radius: 10px; margin-bottom: 8px; overflow-x: auto; }
.src-tab { flex: 1; min-width: 0; padding: 8px 8px; border: none; background: transparent; border-radius: 8px; font-family: inherit; font-weight: 700; font-size: 12px; color: var(--text-2); cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 5px; white-space: nowrap; }
.src-tab.on { background: var(--card); color: var(--charcoal); box-shadow: 0 1px 3px rgba(57,62,65,.14); }
.src-tab .d { width: 7px; height: 7px; border-radius: 50%; }

/* Selected chips preview under combo picker */
.sel-prev { margin-top: 10px; background: rgba(68,187,164,.06); border: 1px dashed rgba(68,187,164,.4); border-radius: 10px; padding: 9px 11px; }
.sel-prev.hidden { display: none; }
.sel-prev .st { font-size: 10.5px; font-weight: 800; color: var(--teal); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px; }
.sel-prev .sel-chip { display: inline-flex; align-items: center; gap: 5px; background: var(--card); border: 1px solid var(--border); border-radius: 99px; padding: 3px 9px; font-size: 11.5px; margin: 2px 3px 2px 0; }
.sel-prev .sel-chip .dot { width: 7px; height: 7px; border-radius: 50%; }

/* Remove native number spinners everywhere; use design-system styling */
input[type=number] { -moz-appearance: textfield; appearance: textfield; }
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.bundle-line { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.bundle-line select { flex: 1; }
.bundle-line input {
  width: 66px; min-height: var(--tap); padding: 0 10px; text-align: center;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--card); color: var(--text); font-family: inherit; font-size: 16px;
}
.bundle-line input:focus { outline: 2px solid var(--blue); outline-offset: -1px; }
.sheet h2 { margin-bottom: 14px; }
.sheet-actions { display: flex; gap: 10px; margin-top: 8px; }
.sheet-actions .btn { flex: 1; }

/* ============================================================
   Animated components (sp-ui): select, calendar, skeleton
   Body-portaled panels so they never clip inside scroll areas.
   ============================================================ */

/* ---- Custom select / calendar trigger ---- */
.sp-select { position: relative; width: 100%; }
.sp-trigger {
  display: flex; align-items: center; gap: 8px; width: 100%;
  min-height: var(--tap); padding: 0 14px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--card); color: var(--text); font-family: inherit; font-size: 16px;
  cursor: pointer; text-align: left; transition: border-color .15s ease, box-shadow .15s ease;
}
.sp-trigger:hover { border-color: rgba(57,62,65,.22); }
.sp-trigger.is-open, .sp-trigger:focus-visible {
  border-color: var(--blue); box-shadow: 0 0 0 3px rgba(63,136,197,.15); outline: none;
}
.sp-trigger .sp-val { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-trigger .sp-val.placeholder { color: var(--text-2); }
.sp-trigger .sp-arrow { flex-shrink: 0; width: 18px; height: 18px; color: var(--text-2); transition: transform .2s ease; }
.sp-trigger.is-open .sp-arrow { transform: rotate(180deg); }
.sp-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }

/* ---- Portaled panel (fixed, positioned by JS) ---- */
.sp-panel {
  position: fixed; z-index: 9999;
  background: var(--card); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: 0 12px 30px rgba(57,62,65,.16), 0 3px 8px rgba(57,62,65,.08);
  overflow: hidden; transform-origin: top center;
  animation: sp-drop-in .16s cubic-bezier(.2,.8,.2,1);
}
.sp-panel.flip-up { transform-origin: bottom center; animation-name: sp-drop-up; }
@keyframes sp-drop-in { from { opacity: 0; transform: translateY(-8px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes sp-drop-up { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }

.sp-search-wrap { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--border); }
.sp-search-wrap svg { width: 18px; height: 18px; color: var(--text-2); flex-shrink: 0; }
.sp-search { flex: 1; border: none; outline: none; font-family: inherit; font-size: 15px; background: transparent; color: var(--text); }
.sp-scroll { max-height: 260px; overflow-y: auto; padding: 6px; -webkit-overflow-scrolling: touch; }
.sp-opt {
  display: flex; align-items: center; gap: 10px; width: 100%;
  min-height: 44px; padding: 8px 12px; border: none; border-radius: 10px;
  background: transparent; font-family: inherit; font-size: 15px; color: var(--text);
  cursor: pointer; text-align: left; transition: background .12s ease;
}
.sp-opt:hover, .sp-opt.active { background: rgba(57,62,65,.05); }
.sp-opt.is-selected { background: rgba(63,136,197,.10); font-weight: 600; }
.sp-opt .sp-check { margin-left: auto; width: 18px; height: 18px; color: var(--blue); }
.sp-opt .sp-empty { color: var(--text-2); }

/* ---- Calendar ---- */
.sp-cal { width: 300px; padding: 14px; }
.sp-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.sp-cal-title { font-weight: 700; font-size: 15px; color: var(--charcoal); }
.sp-cal-nav { width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--border); background: var(--card); display: grid; place-items: center; color: var(--charcoal); transition: background .12s ease; }
.sp-cal-nav:hover { background: rgba(57,62,65,.05); }
.sp-cal-nav:active { transform: scale(.94); }
.sp-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.sp-cal-dow { display: grid; place-items: center; height: 28px; font-size: 11px; color: var(--text-2); font-weight: 600; }
.sp-cal-day {
  width: 100%; aspect-ratio: 1; border: none; background: transparent; border-radius: 9px;
  font-family: inherit; font-size: 13.5px; color: var(--text); cursor: pointer;
  display: grid; place-items: center;
  transition: background .12s ease, transform .1s ease;
}
.sp-cal-day:hover { background: rgba(57,62,65,.06); }
.sp-cal-day.other { color: var(--text-2); opacity: .4; }
.sp-cal-day.today { box-shadow: inset 0 0 0 1.5px var(--teal); font-weight: 700; }
.sp-cal-day.selected { background: var(--vermilion); color: #fff; font-weight: 700; box-shadow: none; }
.sp-cal-day:active { transform: scale(.9); }

/* ---- Time-slot picker grid ---- */
.sp-timegrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 10px; width: 234px; max-height: 280px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.sp-time { min-height: 40px; border: 1px solid var(--border); border-radius: 9px; background: var(--card); font-family: inherit; font-size: 14px; font-variant-numeric: tabular-nums; color: var(--text); cursor: pointer; transition: border-color .12s ease, background .12s ease, color .12s ease; }
.sp-time:hover { border-color: var(--blue); }
.sp-time.sel { background: var(--vermilion); color: #fff; border-color: var(--vermilion); font-weight: 700; }

/* ---- Skeleton loaders ---- */
.skeleton { position: relative; overflow: hidden; background: rgba(57,62,65,.07); border-radius: 8px; }
.skeleton::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  animation: sp-shimmer 1.2s infinite;
}
@keyframes sp-shimmer { 100% { transform: translateX(100%); } }
.skel-row { display: flex; align-items: center; gap: 12px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px; margin-bottom: 8px; }
.skel-row .skel-main { flex: 1; }
.skel-line { height: 12px; margin: 4px 0; }
.skel-line.w60 { width: 60%; } .skel-line.w40 { width: 40%; } .skel-line.w30 { width: 30%; }
.skel-pill { width: 56px; height: 22px; border-radius: 999px; }

/* ---- Motion: screens, lists, sheet ---- */
.screen.is-active { animation: sp-screen-in .28s ease-out; }
@keyframes sp-screen-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.list-row, .cat-title { animation: sp-row-in .3s ease-out both; }
@keyframes sp-row-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.sheet-backdrop { transition: opacity .22s ease, visibility .22s ease; opacity: 0; }
.sheet-backdrop.open { opacity: 1; }
.sheet { transform: translateY(100%); transition: transform .3s cubic-bezier(.2,.9,.25,1); will-change: transform; }
.sheet-backdrop.open .sheet { transform: none; }
@media (min-width: 1024px) {
  .sheet { transform: translateY(24px) scale(.97); opacity: .6; transition: transform .28s cubic-bezier(.2,.9,.25,1), opacity .28s ease; }
  .sheet-backdrop.open .sheet { transform: none; opacity: 1; }
}

#tabbar button, #sidenav button { transition: color .15s ease, background .15s ease; }
#tabbar button:active svg { transform: scale(.88); transition: transform .1s ease; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* More sheet (mobile overflow nav) */
.more-grid { display: flex; flex-direction: column; gap: 6px; }
.more-item { display: grid; grid-template-columns: 36px 1fr auto; gap: 12px; align-items: center; padding: 14px 16px; background: var(--card); border: 1px solid var(--border); border-radius: 12px; cursor: pointer; font-family: inherit; text-align: left; transition: .12s; }
.more-item:hover { border-color: var(--charcoal); background: rgba(57,62,65,.03); }
.more-ico { width: 36px; height: 36px; border-radius: 10px; background: rgba(63,136,197,.1); color: var(--blue); display: grid; place-items: center; }
.more-ico svg { width: 20px; height: 20px; }
.more-lb { font-size: 14px; font-weight: 700; color: var(--charcoal); }
.more-arr { color: var(--dim2); font-size: 20px; font-weight: 700; }

/* Dev / seed panel */
.dev-panel { margin-top: 14px; padding: 16px; border: 1.5px dashed rgba(127,90,240,.35); border-radius: 12px; background: rgba(127,90,240,.05); }
.dev-h { font-size: 14px; font-weight: 800; color: #6b4fd6; margin-bottom: 6px; }
.dev-desc { font-size: 12.5px; color: var(--text-2); line-height: 1.6; margin-bottom: 12px; }
.dev-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.dev-status { margin-bottom: 10px; padding: 9px 12px; border-radius: 9px; font-size: 12px; font-weight: 600; font-family: 'Noto Sans Lao', monospace; word-break: break-word; background: rgba(57,62,65,.06); color: var(--text-2); }
.dev-status.hidden { display: none; }
.dev-status.ok { background: rgba(68,187,164,.12); color: #1e9078; }
.dev-status.err { background: rgba(233,79,55,.1); color: var(--vermilion); }

/* ============== Stage 6 · Reports (P&L tree) ============== */
.rep-app { color: var(--text); }
.rep-nav { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; flex-wrap: wrap; gap: 10px; }
.rep-nav h3 { font-size: 17px; font-weight: 800; color: var(--charcoal); }
.rep-nav .r { display: flex; gap: 8px; align-items: center; }
.rep-nav .nav { display: flex; gap: 6px; }
.rep-nav .nav button { background: var(--card); border: 1px solid var(--border); width: 30px; height: 30px; border-radius: 8px; font-weight: 700; color: var(--text-2); cursor: pointer; font-family: inherit; }
.rep-nav .nav .cur { background: var(--charcoal); color: #fff; border: none; padding: 0 14px; width: auto; font-size: 12px; }
.rep-exp { background: var(--card); border: 1px solid var(--border); color: var(--text-2); font-size: 12px; font-weight: 700; padding: 7px 12px; border-radius: 8px; cursor: pointer; font-family: inherit; }

.rep-sum { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 1px; background: var(--border); border-radius: 12px; overflow: hidden; margin-bottom: 14px; }
@media (max-width: 720px) { .rep-sum { grid-template-columns: 1fr 1fr; } }
.rsc { background: var(--card); padding: 13px 16px; }
.rsc .k { font-size: 10.5px; font-weight: 700; color: var(--text-2); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 5px; }
.rsc .v { font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.01em; color: var(--charcoal); font-family: 'Noto Sans Lao', sans-serif; }
.rsc.hero { background: linear-gradient(135deg, rgba(68,187,164,.06), transparent); }
.rsc.hero .v { font-size: 22px; color: var(--teal); }
.rsc.cash .v { color: var(--teal); } .rsc.tr .v { color: var(--blue); }
.rsc .f { font-size: 10.5px; color: var(--text-2); margin-top: 4px; font-weight: 600; }

.rep-tbl { background: var(--card); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.rep-thead { display: grid; grid-template-columns: 1fr 130px 130px 60px 150px; gap: 8px; padding: 11px 14px; background: rgba(57,62,65,.04); border-bottom: 1.5px solid var(--border); font-size: 10.5px; font-weight: 800; color: var(--text-2); text-transform: uppercase; letter-spacing: .05em; }
.rep-thead .rt { text-align: right; }
.rep-row { display: grid; grid-template-columns: 1fr 130px 130px 60px 150px; gap: 8px; align-items: stretch; border-bottom: 1px solid var(--border); cursor: pointer; transition: background .1s ease; }
.rep-row:last-child { border-bottom: none; }
.rep-row:hover:not(.leaf) { background: rgba(57,62,65,.02); }
.rep-row.leaf { cursor: default; }
.rep-row .tc { padding: 11px 14px; display: flex; align-items: center; font-variant-numeric: tabular-nums; }
.rep-row .tc.rt { justify-content: flex-end; }
.tname { display: flex; align-items: center; gap: 8px; min-width: 0; }
.tw { width: 16px; color: var(--dim2); font-size: 11px; flex-shrink: 0; text-align: center; transition: transform .15s; }
.tw.open { transform: rotate(90deg); }
.tw.none { visibility: hidden; }
.tdot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.tlabel { font-weight: 700; color: var(--charcoal); font-size: 13px; }
.tsub { font-size: 11px; color: var(--text-2); font-weight: 500; margin-top: 1px; font-variant-numeric: tabular-nums; }
.tamt { font-weight: 800; color: var(--charcoal); font-size: 13.5px; font-family: 'Noto Sans Lao', sans-serif; }
.tamt.pos { color: var(--teal); } .tamt.neg { color: var(--vermilion); }
.tcash { color: var(--teal); font-weight: 700; font-size: 12.5px; } .ttr { color: var(--blue); font-weight: 700; font-size: 12.5px; }
.tpct { color: var(--text-2); font-weight: 700; font-size: 12px; }
.tmuted { color: var(--dim2); font-size: 12px; }
.rbadge { font-size: 10px; font-weight: 800; padding: 2px 7px; border-radius: 5px; background: rgba(127,90,240,.12); color: #7f5af0; margin-left: 6px; }
.rep-row.d1 .tname { padding-left: 20px; } .rep-row.d2 .tname { padding-left: 40px; } .rep-row.d3 .tname { padding-left: 60px; } .rep-row.d4 .tname { padding-left: 80px; }
.rep-row.d1 { background: rgba(57,62,65,.015); } .rep-row.d2 { background: rgba(57,62,65,.03); } .rep-row.d3 { background: rgba(57,62,65,.045); } .rep-row.d4 { background: rgba(57,62,65,.06); }
.rep-row.section { background: rgba(57,62,65,.05); }
.rep-row.section .tlabel { font-size: 13.5px; font-weight: 800; }
.rep-row.net { background: linear-gradient(90deg, rgba(68,187,164,.07), transparent); cursor: default; }
.rep-row.net .tlabel { font-weight: 800; font-size: 14px; } .rep-row.net .tamt { color: var(--charcoal); font-size: 16px; }
/* Mobile: drop cash/transfer/% columns, keep label + total */
@media (max-width: 720px) {
  .rep-thead { grid-template-columns: 1fr 120px; }
  .rep-thead .col-ch, .rep-thead .col-pct { display: none; }
  .rep-row { grid-template-columns: 1fr 120px; }
  .rep-row .col-ch, .rep-row .col-pct { display: none; }
  .rep-row.d1 .tname { padding-left: 14px; } .rep-row.d2 .tname { padding-left: 28px; } .rep-row.d3 .tname { padding-left: 42px; } .rep-row.d4 .tname { padding-left: 56px; }
}

/* ---- Reports v2: Overview / Income / Costs ---- */
.rep-head2 { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.rep-head2 h1 { font-size: 24px; font-weight: 800; color: var(--charcoal); letter-spacing: -.01em; }
.rep-head2 .nav { display: flex; gap: 6px; }
.rep-head2 .nav button { width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--border); background: var(--card); color: var(--charcoal); font-size: 16px; cursor: pointer; font-family: inherit; }
.rep-head2 .nav .cur { width: auto; padding: 0 14px; font-size: 12.5px; font-weight: 700; background: var(--charcoal); color: #fff; border-color: var(--charcoal); }
.rep-herorow { display: grid; grid-template-columns: 1.6fr 1fr; gap: 12px; margin-bottom: 14px; }
@media (max-width: 720px) { .rep-herorow { grid-template-columns: 1fr; } }
.rep-hero, .rep-donutcard { background: var(--card); border: 1px solid var(--border); border-radius: 18px; padding: 18px 20px; }
.rep-hero .k, .rep-donutcard .k { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text2); }
.rep-hero .v { font-size: 34px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; margin: 2px 0; font-variant-numeric: tabular-nums; }
.rep-hero .v.pos { color: var(--teal); } .rep-hero .v.warn { color: var(--warn); } .rep-hero .v.neg { color: var(--vermilion); }
.rep-hero .f { font-size: 12px; font-weight: 700; color: var(--text2); font-variant-numeric: tabular-nums; }
.rep-hero .f b { color: var(--charcoal); }
.rep-spark { display: flex; align-items: flex-end; gap: 3px; height: 32px; margin: 12px 0; }
.rep-spark i { flex: 1; min-width: 2px; background: rgba(63,136,197,.28); border-radius: 2px 2px 0 0; transition: height .7s cubic-bezier(.2,.8,.2,1); }
.rep-spark i.hot { background: var(--teal); }
.rep-wf { display: flex; flex-direction: column; gap: 8px; }
.rep-wf .wfr { display: grid; grid-template-columns: 70px 1fr auto; align-items: center; gap: 10px; }
.rep-wf .wl { font-size: 11px; font-weight: 700; color: var(--text2); }
.rep-wf .wft { height: 22px; border-radius: 6px; background: rgba(57,62,65,.05); overflow: hidden; }
.rep-wf .wft i { display: block; height: 100%; border-radius: 6px; transition: width .9s cubic-bezier(.2,.8,.2,1); }
.rep-wf .rev i { background: linear-gradient(90deg,#5aa0d8,var(--blue)); }
.rep-wf .cost i { background: linear-gradient(90deg,#f07a63,var(--vermilion)); }
.rep-wf .prof i { background: linear-gradient(90deg,#55c9b0,var(--teal)); }
.rep-wf .wv { font-size: 12px; font-weight: 800; color: var(--charcoal); white-space: nowrap; font-variant-numeric: tabular-nums; }
.rep-donutcard { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.rep-donut { width: 120px; height: 120px; border-radius: 50%; position: relative; }
.rep-donut::after { content: ""; position: absolute; inset: 18px; border-radius: 50%; background: var(--card); }
.rep-donut .mid { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; z-index: 1; }
.rep-donut .mid .n { font-size: 22px; font-weight: 800; color: var(--charcoal); font-variant-numeric: tabular-nums; }
.rep-donut .mid .s { font-size: 10px; color: var(--text2); font-weight: 600; }
.rep-dleg { display: flex; gap: 16px; }
.rep-dleg div { font-size: 11.5px; font-weight: 700; color: var(--text2); display: flex; align-items: center; gap: 6px; }
.rep-dleg .dot { width: 10px; height: 10px; border-radius: 3px; }
.rep-seg { display: flex; background: rgba(57,62,65,.06); border-radius: 12px; padding: 4px; margin-bottom: 14px; gap: 4px; }
.rep-seg button { flex: 1; border: none; background: transparent; font-family: inherit; font-size: 13px; font-weight: 700; color: var(--text2); padding: 9px 6px; border-radius: 9px; cursor: pointer; transition: .15s; }
.rep-seg button.on { background: var(--card); color: var(--charcoal); box-shadow: 0 1px 3px rgba(57,62,65,.12); }
.rep-pane { display: none; }
.rep-pane.on { display: block; animation: sp-screen-in .24s ease-out; }
.rep-blk { background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 16px 18px; margin-bottom: 14px; }
.rep-bh { font-size: 12.5px; font-weight: 800; color: var(--charcoal); text-transform: uppercase; letter-spacing: .03em; margin-bottom: 12px; display: flex; justify-content: space-between; }
.rep-bh span { color: var(--text2); font-weight: 600; text-transform: none; }
.rep-cat { display: flex; flex-direction: column; gap: 13px; }
.rep-catr { cursor: pointer; }
.rep-catr .top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 5px; }
.rep-catr .nm { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--charcoal); }
.rep-catr .dot { width: 9px; height: 9px; border-radius: 50%; }
.rep-catr .amt { font-size: 13px; font-weight: 800; color: var(--charcoal); font-variant-numeric: tabular-nums; }
.rep-catr .amt .p { font-size: 11px; color: var(--dim2); font-weight: 600; margin-left: 6px; }
.rep-catr .bar { height: 9px; border-radius: 5px; background: rgba(57,62,65,.06); overflow: hidden; }
.rep-catr .bar i { display: block; height: 100%; border-radius: 5px; transition: width .8s cubic-bezier(.2,.8,.2,1); }
.rep-catr .prev { font-size: 11px; color: var(--text2); margin-top: 4px; font-weight: 600; }
.rep-catr .prev b { color: var(--charcoal); }
.rep-ern { display: flex; flex-direction: column; }
.rep-ernr { display: grid; grid-template-columns: 32px 1fr auto; gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--border); cursor: pointer; }
.rep-ernr:last-child { border-bottom: none; }
.rep-ernr .av { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 13px; }
.rep-ernr .en { font-size: 13px; font-weight: 700; color: var(--charcoal); }
.rep-ernr .es { font-size: 11px; color: var(--text2); }
.rep-ernr .ev { font-size: 13px; font-weight: 800; text-align: right; color: var(--charcoal); font-variant-numeric: tabular-nums; }
.rep-ernr .ev.neg { color: var(--vermilion); }
.rep-ernr .ev small { display: block; font-size: 10px; color: var(--dim2); font-weight: 600; }
.rep-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.rep-toolbar .rep-chips { margin-bottom: 0; }
.rep-tb-lbl { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--text2); }
.rep-exp { border: 1px solid var(--border); background: var(--card); border-radius: 999px; padding: 6px 14px; font-size: 12px; font-weight: 700; color: var(--charcoal); cursor: pointer; font-family: inherit; transition: .15s; white-space: nowrap; }
.rep-exp:hover { border-color: var(--charcoal); }
.rep-chips { display: flex; gap: 7px; margin-bottom: 12px; }
.rep-chips .chip { border: 1px solid var(--border); background: var(--card); border-radius: 999px; padding: 6px 14px; font-size: 12px; font-weight: 700; color: var(--text2); cursor: pointer; font-family: inherit; transition: .15s; }
.rep-chips .chip.on { background: var(--charcoal); color: #fff; border-color: var(--charcoal); }
.rep-empty { padding: 18px; text-align: center; color: var(--dim2); font-weight: 600; font-size: 12.5px; }

/* ---- Stage 6 · Month Lock ---- */
.lk-net { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--border); background: var(--card); border-radius: 999px; padding: 6px 13px; font-size: 12px; font-weight: 700; color: var(--text-2); }
.lk-net .d { width: 9px; height: 9px; border-radius: 50%; background: var(--teal); }
.lk-net.off { color: var(--vermilion); border-color: rgba(233,79,55,.3); }
.lk-net.off .d { background: var(--vermilion); }
.lk-remind { display: flex; gap: 12px; align-items: center; padding: 13px 16px; border-radius: 14px; background: rgba(232,145,46,.09); border: 1px solid rgba(232,145,46,.35); margin-bottom: 14px; }
.lk-remind .ic { font-size: 20px; }
.lk-remind .t { font-size: 13.5px; font-weight: 800; color: var(--charcoal); }
.lk-remind .s { font-size: 11.5px; color: var(--text-2); font-weight: 600; }
.lk-off { display: flex; gap: 8px; align-items: center; background: rgba(233,79,55,.08); border: 1px solid rgba(233,79,55,.25); border-radius: 12px; padding: 11px 14px; font-size: 12.5px; font-weight: 700; color: var(--vermilion); margin-bottom: 14px; }
.lk-info { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; padding: 15px 17px; border-radius: 16px; background: linear-gradient(135deg, rgba(233,79,55,.05), rgba(233,79,55,.01)); border: 1px solid rgba(233,79,55,.16); margin-bottom: 16px; }
.lk-info .ic { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; font-size: 18px; background: rgba(233,79,55,.12); }
.lk-info h3 { font-size: 13.5px; font-weight: 800; color: var(--charcoal); margin-bottom: 3px; }
.lk-info p { font-size: 12px; color: var(--text-2); } .lk-info p b { color: var(--charcoal); }
.lk-list { display: flex; flex-direction: column; gap: 9px; }
.lk-m { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 14px 15px; position: relative; overflow: hidden; }
.lk-m::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; }
.lk-m.open::before { background: var(--teal); } .lk-m.ready::before { background: var(--warn); } .lk-m.blocked::before { background: var(--dim2); } .lk-m.locked::before { background: var(--vermilion); }
.lk-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.lk-mn { font-size: 16px; font-weight: 800; color: var(--charcoal); }
.lk-pill { font-size: 10.5px; font-weight: 800; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.lk-pill.open { background: rgba(68,187,164,.12); color: var(--teal); }
.lk-pill.ready { background: rgba(232,145,46,.13); color: var(--warn); }
.lk-pill.blocked { background: rgba(160,164,168,.16); color: var(--text-2); }
.lk-pill.locked { background: rgba(233,79,55,.12); color: var(--vermilion); }
.lk-stats { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-bottom: 11px; }
.lk-st { background: rgba(57,62,65,.03); border-radius: 10px; padding: 9px 11px; }
.lk-st .l { font-size: 10px; font-weight: 700; text-transform: uppercase; color: var(--text-2); }
.lk-st .v { font-size: 14px; font-weight: 800; color: var(--charcoal); margin-top: 2px; } .lk-st.profit .v { color: var(--teal); }
.lk-gate { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 11px; }
.lk-g { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; padding: 5px 10px; border-radius: 8px; background: rgba(57,62,65,.04); color: var(--text-2); }
.lk-g.ok { background: rgba(68,187,164,.1); color: var(--teal); }
.lk-g.no { background: rgba(232,145,46,.1); color: var(--warn); }
.lk-act { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.lk-meta { font-size: 11px; color: var(--dim2); font-weight: 600; }
.lk-hint { font-size: 11.5px; color: var(--text-2); font-weight: 600; }
.lk-lockedtag { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; color: var(--vermilion); }
.lk-rgt { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.lk-lockbtn { border: none; background: var(--vermilion); color: #fff; font-family: inherit; font-size: 12.5px; font-weight: 800; padding: 9px 16px; border-radius: 10px; cursor: pointer; }
.lk-lockbtn:disabled { background: rgba(57,62,65,.1); color: var(--dim2); cursor: not-allowed; }
.lk-paybtn { border: none; background: var(--blue); color: #fff; font-family: inherit; font-size: 12.5px; font-weight: 800; padding: 9px 15px; border-radius: 10px; cursor: pointer; }
.lk-ovr { background: none; border: none; color: var(--text-2); font-family: inherit; font-size: 11.5px; font-weight: 700; text-decoration: underline; cursor: pointer; padding: 0; }
.lk-ovr:disabled { color: var(--dim2); cursor: not-allowed; text-decoration: none; }

/* ---- Stage 7 · Promotions page ---- */
.add-promo { border: none; background: var(--vermilion); color: #fff; font-family: inherit; font-size: 13px; font-weight: 800; padding: 10px 17px; border-radius: 11px; cursor: pointer; }
.pr-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
@media (max-width: 560px) { .pr-strip { grid-template-columns: 1fr; } }
.pr-strip .kc { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 14px; border-left: 3px solid; }
.pr-strip .kc.a { border-left-color: var(--teal); } .pr-strip .kc.b { border-left-color: var(--vermilion); } .pr-strip .kc.c { border-left-color: var(--purple); }
.pr-strip .kc .k { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-2); }
.pr-strip .kc .v { font-size: 19px; font-weight: 800; color: var(--charcoal); margin-top: 3px; font-variant-numeric: tabular-nums; }
.pr-strip .kc.a .v { color: var(--teal); } .pr-strip .kc.b .v { color: var(--vermilion); } .pr-strip .kc.c .v { color: var(--purple); }
.pr-strip .kc .c { font-size: 10.5px; color: var(--dim2); margin-top: 2px; font-weight: 600; }
.pr-seg { display: flex; background: rgba(57,62,65,.06); border-radius: 12px; padding: 4px; margin-bottom: 14px; gap: 4px; }
.pr-seg button { flex: 1; border: none; background: transparent; font-family: inherit; font-size: 13px; font-weight: 700; color: var(--text-2); padding: 9px 6px; border-radius: 9px; cursor: pointer; }
.pr-seg button.on { background: var(--card); color: var(--charcoal); box-shadow: 0 1px 3px rgba(57,62,65,.12); }
.pr-list { display: flex; flex-direction: column; gap: 10px; }
.pr-c { background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 15px 16px; position: relative; overflow: hidden; }
.pr-c::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; }
.pr-c.active::before { background: var(--teal); } .pr-c.sched::before { background: var(--warn); } .pr-c.ended::before { background: var(--dim2); }
.pr-top { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 11px; }
.pr-ico { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-size: 21px; flex-shrink: 0; background: rgba(57,62,65,.05); }
.pr-nm { font-size: 16px; font-weight: 800; color: var(--charcoal); line-height: 1.2; }
.pr-nm small { display: block; font-size: 11.5px; color: var(--text-2); font-weight: 600; margin-top: 2px; }
.pr-disc { margin-left: auto; text-align: right; flex-shrink: 0; }
.pr-disc .d { font-size: 20px; font-weight: 800; color: var(--vermilion); letter-spacing: -.01em; }
.pr-stat { font-size: 10.5px; font-weight: 800; padding: 4px 10px; border-radius: 999px; white-space: nowrap; display: inline-block; margin-top: 4px; }
.pr-stat.active { background: rgba(68,187,164,.12); color: var(--teal); }
.pr-stat.sched { background: rgba(232,145,46,.13); color: var(--warn); }
.pr-stat.ended { background: rgba(160,164,168,.16); color: var(--text-2); }
.pr-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 11px; }
.pr-tg { font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 8px; background: rgba(57,62,65,.05); color: var(--text-2); }
.pr-tg.cat { background: rgba(63,136,197,.1); color: var(--blue); }
.pr-tg.tier { background: rgba(127,90,240,.1); color: var(--purple); }
.pr-tg.staff { background: rgba(233,79,55,.09); color: var(--vermilion); }
.pr-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-top: 1px solid var(--border); padding-top: 11px; flex-wrap: wrap; }
.pr-mini { display: flex; gap: 16px; }
.pr-mini .m .l { font-size: 10px; font-weight: 700; text-transform: uppercase; color: var(--text-2); }
.pr-mini .m .v { font-size: 14px; font-weight: 800; color: var(--charcoal); font-variant-numeric: tabular-nums; }
.pr-acts { display: flex; gap: 8px; }
.pr-acts button { border: 1px solid var(--border); background: var(--card); color: var(--text-2); font-family: inherit; font-size: 12px; font-weight: 700; padding: 7px 13px; border-radius: 9px; cursor: pointer; }
.pr-acts .end { color: var(--vermilion); border-color: rgba(233,79,55,.25); }
.pr-gift { font-size: 12px; font-weight: 700; color: var(--teal); background: rgba(68,187,164,.08); border: 1px solid rgba(68,187,164,.25); border-radius: 9px; padding: 8px 11px; margin-bottom: 11px; }

/* Promo-window visual: calendar chips (desktop) + countdown ring (mobile) */
.pr-tl { --tl: var(--teal); background: rgba(57,62,65,.03); border: 1px solid var(--border); border-radius: 12px; padding: 11px 12px; margin-bottom: 11px; }
.pr-tl.tone-amber { --tl: var(--warn); } .pr-tl.tone-blue { --tl: var(--blue); } .pr-tl.tone-grey { --tl: var(--dim2); }
.pr-tl .tl-ringwrap { display: none; }
.pr-tl .tl-chips { display: flex; align-items: center; gap: 7px; }
.tl-chip { flex: none; width: 46px; border-radius: 9px; background: rgba(57,62,65,.05); text-align: center; padding: 6px 0; border: 1px solid transparent; }
.tl-chip .mo { font-size: 9px; font-weight: 700; text-transform: uppercase; color: var(--text-2); }
.tl-chip .dy { font-size: 16px; font-weight: 800; color: var(--charcoal); line-height: 1.1; font-variant-numeric: tabular-nums; }
.tl-chip .tg { font-size: 9px; font-weight: 600; color: var(--text-2); }
.tl-chip.start { background: rgba(68,187,164,.12); border-color: rgba(68,187,164,.3); } .tl-chip.start .dy { color: var(--teal); }
.tl-chip.end { background: rgba(233,79,55,.09); border-color: rgba(233,79,55,.28); } .tl-chip.end .dy { color: var(--vermilion); }
.tl-chip.today { background: var(--tl); transform: scale(1.1); }
.tl-chip.today .mo, .tl-chip.today .dy, .tl-chip.today .tg { color: #fff; }
.tl-arw { color: var(--dim2); font-size: 17px; }
.tl-cd { margin-left: auto; text-align: right; }
.tl-cd b { display: block; font-size: 18px; font-weight: 800; color: var(--tl); line-height: 1; font-variant-numeric: tabular-nums; }
.tl-cd small { font-size: 9.5px; color: var(--text-2); }
/* infinity band */
.pr-tl.inf { display: flex; align-items: center; gap: 12px; }
.tl-ring-inf { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-size: 20px; font-weight: 800; background: rgba(127,90,240,.12); color: var(--purple); flex: none; }
.tl-inf-tx b { font-size: 14px; font-weight: 800; color: var(--charcoal); }
.tl-inf-tx span { display: block; font-size: 11px; color: var(--text-2); margin-top: 1px; }

@media (max-width: 1023px) {
  .pr-tl:not(.inf) .tl-chips { display: none; }
  .pr-tl:not(.inf) .tl-ringwrap { display: flex; align-items: center; gap: 14px; }
  .tl-ring { --p: 0; width: 66px; height: 66px; border-radius: 50%; flex: none; position: relative; display: grid; place-items: center;
    background: conic-gradient(var(--tl) calc(var(--p) * 1%), rgba(57,62,65,.1) 0); }
  .tl-ring::before { content: ""; position: absolute; width: 50px; height: 50px; border-radius: 50%; background: var(--card); }
  .tl-ring span { position: relative; text-align: center; line-height: 1; }
  .tl-ring b { font-size: 17px; font-weight: 800; color: var(--charcoal); }
  .tl-ring small { display: block; font-size: 8px; color: var(--text-2); font-weight: 600; }
  .tl-ring-info b { font-size: 15px; font-weight: 800; color: var(--charcoal); }
  .tl-ring-info b em { font-style: normal; color: var(--tl); }
  .tl-ring-info span { display: block; font-size: 11px; color: var(--text-2); margin-top: 3px; font-variant-numeric: tabular-nums; }
}
.pw-giftwrap.hidden, .pw-amtwrap.hidden { display: none; }
.pw-gl { display: block; font-size: 12px; font-weight: 700; color: var(--text-2); margin-bottom: 8px; }
.pw-gifts { display: flex; flex-direction: column; gap: 2px; max-height: 240px; overflow-y: auto; border: 1px solid var(--border); border-radius: 12px; padding: 6px; }
.pw-gitem { display: flex; align-items: center; gap: 9px; padding: 9px 8px; border-radius: 9px; font-size: 13px; font-weight: 600; color: var(--charcoal); cursor: pointer; }
.pw-gitem:hover { background: rgba(57,62,65,.03); }
.pw-gitem input { width: 17px; height: 17px; accent-color: var(--teal); }
.pw-gitem small { color: var(--text-2); font-weight: 500; margin-left: auto; }

/* ---- Stage 7 · Promo wizard (pw-*) ---- */
.pw-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.pw-head .pw-t { font-size: 16px; font-weight: 800; color: var(--charcoal); }
.pw-steps { display: flex; gap: 6px; padding: 12px 18px 0; flex-shrink: 0; }
.pw-steps .d { flex: 1; height: 5px; border-radius: 99px; background: rgba(57,62,65,.1); }
.pw-steps .d.on { background: var(--vermilion); } .pw-steps .d.done { background: var(--teal); }
.pw-stepn { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--vermilion); padding: 8px 18px 0; flex-shrink: 0; }
.pw-body { padding: 6px 18px 16px; overflow-y: auto; flex: 1; min-height: 0; }
.pw-pane { display: none; } .pw-pane.on { display: block; animation: sp-screen-in .2s ease-out; }
.pw-q { font-size: 19px; font-weight: 800; color: var(--charcoal); letter-spacing: -.01em; margin: 10px 0 16px; }
.pw-opts { display: flex; flex-direction: column; gap: 10px; }
.pw-opt { display: flex; align-items: center; gap: 13px; border: 1.5px solid var(--border); border-radius: 14px; padding: 14px; cursor: pointer; transition: .15s; }
.pw-opt.sel { border-color: var(--vermilion); background: rgba(233,79,55,.04); }
.pw-opt .e { width: 40px; height: 40px; border-radius: 11px; background: rgba(57,62,65,.05); display: grid; place-items: center; font-size: 19px; flex-shrink: 0; }
.pw-opt.sel .e { background: rgba(233,79,55,.1); }
.pw-opt .tt { font-size: 14.5px; font-weight: 800; color: var(--charcoal); }
.pw-opt .ss { font-size: 11.5px; color: var(--text-2); font-weight: 500; }
.pw-opt .ck { margin-left: auto; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--border); display: grid; place-items: center; color: #fff; font-size: 12px; }
.pw-opt.sel .ck { background: var(--vermilion); border-color: var(--vermilion); }
.pw-target { margin-top: 12px; } .pw-target .hidden { display: none; }
.pw-sub label { font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--text-2); display: block; margin-bottom: 6px; }
.pw-select { width: 100%; border: 1px solid var(--border); border-radius: 11px; padding: 11px 13px; font-family: inherit; font-size: 14px; background: var(--card); color: var(--charcoal); }
.pw-pop .toggle { display: flex; gap: 6px; background: rgba(57,62,65,.05); padding: 4px; border-radius: 11px; margin-bottom: 14px; }
.pw-pop .toggle button { flex: 1; border: none; background: transparent; font-family: inherit; font-size: 12.5px; font-weight: 700; color: var(--text-2); padding: 10px 4px; border-radius: 8px; cursor: pointer; }
.pw-pop .toggle button.on { background: var(--card); color: var(--charcoal); box-shadow: 0 1px 3px rgba(57,62,65,.12); }
.pw-amtwrap { position: relative; } .pw-amtwrap.hidden { display: none; }
.pw-amt { width: 100%; border: 1.5px solid var(--border); border-radius: 12px; padding: 14px; font-family: inherit; font-size: 22px; font-weight: 800; color: var(--charcoal); text-align: center; }
.pw-amtwrap .suf { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); color: var(--text-2); font-weight: 800; pointer-events: none; }
.pw-pop .chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pw-pop .chip { border: 1px solid var(--border); background: var(--card); border-radius: 999px; padding: 8px 15px; font-size: 12.5px; font-weight: 700; color: var(--text-2); cursor: pointer; }
.pw-pop .chip.on { background: var(--charcoal); color: #fff; border-color: var(--charcoal); }
.pw-pop .chip.cat.on { background: var(--blue); border-color: var(--blue); }
.pw-pop .chip.tier.on { background: var(--purple); border-color: var(--purple); }
.pw-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pw-row2 label { font-size: 11px; font-weight: 700; color: var(--text-2); display: block; margin-bottom: 5px; }
.pw-row2 input { width: 100%; border: 1px solid var(--border); border-radius: 11px; padding: 11px; font-family: inherit; font-size: 14px; }
.pw-swrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 1px solid var(--border); border-radius: 13px; padding: 13px 15px; margin-bottom: 12px; }
.pw-swrow .t { font-size: 13.5px; font-weight: 800; color: var(--charcoal); }
.pw-swrow .t small { display: block; font-size: 11px; color: var(--text-2); font-weight: 500; }
.pw-sw { width: 46px; height: 27px; border-radius: 99px; background: rgba(57,62,65,.15); position: relative; cursor: pointer; transition: .2s; flex-shrink: 0; }
.pw-sw.on { background: var(--teal); }
.pw-sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 21px; height: 21px; border-radius: 50%; background: #fff; transition: .2s; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.pw-sw.on::after { left: 22px; }
.pw-name-fld label { font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--text-2); display: block; margin-bottom: 5px; }
.pw-name-fld input { width: 100%; border: 1px solid var(--border); border-radius: 11px; padding: 11px 13px; font-family: inherit; font-size: 14px; margin-bottom: 12px; }
.pw-review { background: rgba(57,62,65,.03); border-radius: 14px; padding: 6px 15px; }
.pw-review .rr { display: flex; justify-content: space-between; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.pw-review .rr:last-child { border-bottom: none; }
.pw-review .rr .l { color: var(--text-2); font-weight: 600; } .pw-review .rr .v { font-weight: 800; color: var(--charcoal); text-align: right; } .pw-review .rr .v.hl { color: var(--vermilion); }
.pw-nav { display: flex; gap: 10px; padding: 14px 18px calc(14px + var(--safe-bottom)); border-top: 1px solid var(--border); background: rgba(57,62,65,.02); flex-shrink: 0; }
.pw-nav .b { flex: 1; background: var(--card); border: 1px solid var(--border); color: var(--text-2); font-weight: 700; padding: 13px; border-radius: 12px; font-family: inherit; font-size: 14px; cursor: pointer; }
.pw-nav .n { flex: 1.7; background: var(--vermilion); color: #fff; border: none; font-weight: 800; padding: 13px; border-radius: 12px; font-family: inherit; font-size: 14px; cursor: pointer; }

/* ---- Stage 7 · Settings: Users & Permissions ---- */
.usr-seg { display: flex; background: rgba(57,62,65,.06); border-radius: 12px; padding: 4px; margin: 14px 0; gap: 4px; }
.usr-seg button { flex: 1; border: none; background: transparent; font-family: inherit; font-size: 13px; font-weight: 700; color: var(--text-2); padding: 9px 6px; border-radius: 9px; cursor: pointer; }
.usr-seg button.on { background: var(--card); color: var(--charcoal); box-shadow: 0 1px 3px rgba(57,62,65,.12); }
.usr-pane { display: none; } .usr-pane.on { display: block; }
.usr-c { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 13px 14px; display: grid; grid-template-columns: 44px 1fr auto; gap: 13px; align-items: center; margin-bottom: 9px; }
.usr-av { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 16px; }
.usr-nm { font-size: 15px; font-weight: 800; color: var(--charcoal); }
.usr-mt { font-size: 11.5px; color: var(--text-2); font-weight: 600; margin-top: 1px; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.usr-role { font-size: 10px; font-weight: 800; padding: 3px 9px; border-radius: 999px; }
.usr-role.owner { background: rgba(233,79,55,.12); color: var(--vermilion); }
.usr-role.cashier { background: rgba(63,136,197,.12); color: var(--blue); }
.usr-off { font-size: 10px; font-weight: 800; padding: 3px 8px; border-radius: 999px; background: rgba(160,164,168,.18); color: var(--text-2); }
.usr-acts { display: flex; gap: 7px; flex-wrap: wrap; justify-content: flex-end; }
.usr-acts button { border: 1px solid var(--border); background: var(--card); color: var(--text-2); font-family: inherit; font-size: 11.5px; font-weight: 700; padding: 6px 11px; border-radius: 9px; cursor: pointer; }
.usr-acts .del { color: var(--vermilion); border-color: rgba(233,79,55,.25); }
.usr-active { display: flex; align-items: center; gap: 9px; font-size: 13.5px; font-weight: 700; color: var(--charcoal); margin: 6px 0 12px; cursor: pointer; }
.usr-active input { width: 18px; height: 18px; accent-color: var(--teal); }
.pinm { text-align: center; }
.pinm-code { font-size: 40px; font-weight: 800; letter-spacing: .3em; color: var(--vermilion); font-variant-numeric: tabular-nums; margin: 14px 0 18px; }
.perm-roles { display: flex; gap: 8px; margin-bottom: 12px; }
.perm-roles .rchip { border: 1px solid var(--border); background: var(--card); border-radius: 999px; padding: 7px 15px; font-size: 12.5px; font-weight: 700; color: var(--text-2); cursor: pointer; }
.perm-roles .rchip.on { background: var(--charcoal); color: #fff; border-color: var(--charcoal); }
.perm-note { font-size: 12px; color: var(--text-2); font-weight: 600; background: rgba(63,136,197,.06); border: 1px solid rgba(63,136,197,.2); border-radius: 11px; padding: 11px 13px; margin-bottom: 14px; }
.perm-note b { color: var(--charcoal); }
.perm-mtx { background: var(--card); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
.perm-row { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; padding: 11px 14px; border-bottom: 1px solid var(--border); }
.perm-row:last-child { border-bottom: none; }
.perm-l { font-size: 13.5px; font-weight: 700; color: var(--charcoal); display: flex; align-items: center; gap: 9px; }
.perm-l svg { width: 17px; height: 17px; stroke: var(--text-2); }
.perm-lvl { display: flex; background: rgba(57,62,65,.05); border-radius: 9px; padding: 3px; gap: 2px; }
.perm-lvl button { border: none; background: transparent; font-family: inherit; font-size: 11.5px; font-weight: 700; color: var(--text-2); padding: 6px 11px; border-radius: 7px; cursor: pointer; white-space: nowrap; }
.perm-lvl button.on.none { background: var(--card); color: var(--text-2); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.perm-lvl button.on.read { background: var(--blue); color: #fff; }
.perm-lvl button.on.edit { background: var(--teal); color: #fff; }
.perm-locked { font-size: 11.5px; font-weight: 700; color: var(--dim2); }

/* ---- Reports v3: tap-to-popup cards + detail popup + bills list ---- */
.rep-cards { display: flex; flex-direction: column; gap: 10px; }
.rep-card { background: var(--card); border: 1px solid var(--border); border-radius: 15px; padding: 14px 15px; cursor: pointer; transition: .14s; }
.rep-card:hover { border-color: var(--charcoal); transform: translateY(-1px); }
.rep-card .rc-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 9px; }
.rep-card .rc-nm { display: flex; align-items: center; gap: 9px; font-size: 14.5px; font-weight: 800; color: var(--charcoal); }
.rep-card .rc-nm small { color: var(--text-2); font-weight: 600; font-size: 11.5px; }
.rep-card .rc-nm .dot { width: 10px; height: 10px; border-radius: 50%; }
.rep-card .rc-av { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 14px; }
.rep-card .rc-amt { font-size: 15px; font-weight: 800; color: var(--charcoal); font-variant-numeric: tabular-nums; }
.rep-card .rc-amt.neg { color: var(--vermilion); }
.rep-card .rc-amt .rc-p { font-size: 11px; color: var(--dim2); font-weight: 600; margin-left: 6px; }
.rep-card .rc-bar { height: 8px; border-radius: 5px; background: rgba(57,62,65,.06); overflow: hidden; margin-bottom: 9px; }
.rep-card .rc-bar i { display: block; height: 100%; border-radius: 5px; }
.rep-card .rc-foot { display: flex; gap: 14px; font-size: 11.5px; font-weight: 600; color: var(--text-2); font-variant-numeric: tabular-nums; }
.rep-card .rc-go { margin-left: auto; color: var(--blue); font-weight: 800; }
.rep-card.cost .rc-go { color: var(--vermilion); }
/* detail popup */
#sheet-body.rd-pop, #sheet-body.rb-pop { max-width: 520px; padding: 0; display: flex; flex-direction: column; max-height: 92vh; overflow: hidden; }
#sheet-body.rd-pop::before, #sheet-body.rb-pop::before { display: none; }
.rd-head { display: grid; grid-template-columns: auto 1fr auto; gap: 13px; align-items: center; padding: 16px 18px; border-bottom: 1px solid var(--border); border-top: 4px solid var(--blue); flex-shrink: 0; }
.rd-ic { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; font-size: 22px; color: var(--charcoal); font-weight: 800; }
.rd-nm { font-size: 18px; font-weight: 800; color: var(--charcoal); }
.rd-nm small { display: block; font-size: 11.5px; color: var(--text-2); font-weight: 600; }
.rd-x { width: 32px; height: 32px; border-radius: 9px; border: 1px solid var(--border); background: var(--card); color: var(--text-2); font-size: 15px; cursor: pointer; }
.rd-body { overflow-y: auto; flex: 1; min-height: 0; padding: 16px 18px; }
.rd-hero { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.rd-hero .big { font-size: 33px; font-weight: 800; color: var(--charcoal); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.rd-hero .u { font-size: 14px; color: var(--text-2); font-weight: 700; }
.rd-delta { font-size: 12px; font-weight: 800; padding: 3px 9px; border-radius: 8px; }
.rd-delta.up { background: rgba(68,187,164,.14); color: var(--teal); }
.rd-delta.dn { background: rgba(233,79,55,.12); color: var(--vermilion); }
.rd-kpi { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--border); border-radius: 13px; overflow: hidden; margin-bottom: 18px; }
@media (max-width: 520px) { .rd-kpi { grid-template-columns: 1fr 1fr; } }
.rd-k { background: var(--card); padding: 12px 13px; }
.rd-k .l { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--text-2); }
.rd-k .v { font-size: 16px; font-weight: 800; color: var(--charcoal); margin-top: 3px; font-variant-numeric: tabular-nums; }
.rd-k.cash .v { color: var(--teal); } .rd-k.tr .v { color: var(--blue); }
.rd-k .s { font-size: 10px; color: var(--dim2); font-weight: 600; margin-top: 1px; }
.rd-subh { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--text-2); margin: 6px 0 12px; display: flex; justify-content: space-between; }
.rd-subh span { color: var(--dim2); font-weight: 600; text-transform: none; }
.rd-bars { display: flex; gap: 10px; align-items: flex-end; height: 118px; margin-bottom: 6px; }
.rd-bcol { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; cursor: pointer; }
.rd-bar { width: 100%; max-width: 34px; border-radius: 6px 6px 0 0; background: var(--bc); min-height: 3px; transition: .3s; }
.rd-bcol.cur .rd-bar { box-shadow: 0 0 0 2px rgba(233,79,55,.25) inset; }
.rd-bcol:hover .rd-bar { filter: brightness(1.08); }
.rd-bx { font-size: 10.5px; font-weight: 700; color: var(--text-2); }
.rd-bcol.cur .rd-bx { color: var(--vermilion); }
.rd-brk { display: flex; flex-direction: column; gap: 11px; margin-bottom: 16px; }
.rd-bk .top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px; }
.rd-bk .nm { font-size: 13px; font-weight: 700; color: var(--charcoal); }
.rd-bk .nm small { color: var(--text-2); font-weight: 500; font-size: 11px; }
.rd-bk .amt { font-size: 13px; font-weight: 800; color: var(--charcoal); font-variant-numeric: tabular-nums; }
.rd-bk .amt .p { font-size: 11px; color: var(--dim2); font-weight: 600; margin-left: 5px; }
.rd-bk .track { height: 8px; border-radius: 5px; background: rgba(57,62,65,.06); overflow: hidden; }
.rd-bk .track i { display: block; height: 100%; border-radius: 5px; transition: width .8s cubic-bezier(.2,.8,.2,1); }
.rd-split { display: flex; height: 12px; border-radius: 6px; overflow: hidden; margin-bottom: 6px; }
.rd-split i { transition: .4s; }
.rd-splleg { display: flex; justify-content: space-between; font-size: 11.5px; font-weight: 700; color: var(--text-2); }
.rd-foot { padding: 12px 18px calc(12px + var(--safe-bottom)); border-top: 1px solid var(--border); background: rgba(57,62,65,.02); display: flex; gap: 9px; flex-shrink: 0; }
.rd-fg { flex: 1; background: var(--card); border: 1px solid var(--border); color: var(--text-2); font-weight: 700; padding: 12px; border-radius: 11px; font-family: inherit; font-size: 13.5px; cursor: pointer; }
.rd-fp { flex: 1.4; background: var(--blue); color: #fff; border: none; font-weight: 800; padding: 12px; border-radius: 11px; font-family: inherit; font-size: 13.5px; cursor: pointer; }
.rd-tip { position: fixed; pointer-events: none; background: var(--charcoal); color: #fff; font-size: 11px; font-weight: 700; padding: 5px 9px; border-radius: 7px; opacity: 0; transition: .1s; transform: translate(-50%,-135%); white-space: nowrap; z-index: 300; font-variant-numeric: tabular-nums; }
.rd-tip.on { opacity: 1; }
/* bills list */
.rb-head { display: grid; grid-template-columns: auto 1fr auto; gap: 11px; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--border); border-top: 4px solid var(--blue); flex-shrink: 0; }
.rb-bk { width: 32px; height: 32px; border-radius: 9px; background: rgba(57,62,65,.06); border: 1px solid var(--border); color: var(--text-2); font-size: 18px; cursor: pointer; font-family: inherit; }
.rb-t { font-size: 15px; font-weight: 800; color: var(--charcoal); }
.rb-tools { display: flex; gap: 7px; padding: 12px 16px 4px; flex-shrink: 0; }
.rb-tools .chip { border: 1px solid var(--border); background: var(--card); border-radius: 999px; padding: 7px 14px; font-size: 12.5px; font-weight: 700; color: var(--text-2); cursor: pointer; font-family: inherit; }
.rb-tools .chip.on { background: var(--charcoal); color: #fff; border-color: var(--charcoal); }
.rb-list { overflow-y: auto; flex: 1; min-height: 0; padding: 8px 12px; }
.rb-day { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--dim2); padding: 10px 6px 6px; }
.rb-b { display: grid; grid-template-columns: 38px 1fr auto; gap: 11px; align-items: center; padding: 11px 8px; border-radius: 12px; }
.rb-b:hover { background: rgba(57,62,65,.03); }
.rb-av { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 14px; }
.rb-nm { font-size: 13.5px; font-weight: 700; color: var(--charcoal); }
.rb-mt { font-size: 11.5px; color: var(--text-2); margin-top: 1px; }
.rb-rt { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.rb-amt { font-size: 14px; font-weight: 800; color: var(--charcoal); font-variant-numeric: tabular-nums; }
.rb-ch { font-size: 9.5px; font-weight: 800; padding: 2px 8px; border-radius: 5px; text-transform: uppercase; }
.rb-ch.cash { background: rgba(68,187,164,.13); color: var(--teal); }
.rb-ch.tr { background: rgba(63,136,197,.13); color: var(--blue); }
.rb-ch.t1 { background: rgba(63,136,197,.12); color: var(--blue); }
.rb-ch.t2 { background: rgba(127,90,240,.12); color: var(--purple); }
.rb-foot { padding: 13px 18px calc(13px + var(--safe-bottom)); border-top: 1px solid var(--border); background: rgba(57,62,65,.02); display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; }
.rb-foot .rb-l { font-size: 12px; font-weight: 700; color: var(--text-2); }
.rb-foot .rb-v { font-size: 19px; font-weight: 800; color: var(--charcoal); font-variant-numeric: tabular-nums; }

/* ============== Stage 5 · Payroll ============== */
.pay-app { color: var(--text); }
.pay-nav { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; flex-wrap: wrap; gap: 10px; }
.pay-nav h3 { font-size: 17px; font-weight: 800; color: var(--charcoal); letter-spacing: -.01em; }
.pay-nav .nav { display: flex; gap: 6px; }
.pay-nav .nav button { background: var(--card); border: 1px solid var(--border); color: var(--text-2); width: 30px; height: 30px; border-radius: 8px; font-weight: 700; cursor: pointer; font-family: inherit; font-size: 13px; }
.pay-nav .nav .cur { background: var(--charcoal); color: #fff; border: none; padding: 0 14px; width: auto; font-size: 12px; }

.pay-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 14px; }
@media (max-width: 720px) { .pay-strip { grid-template-columns: repeat(2, 1fr); } }
.pm { padding: 12px 14px; border-radius: 11px; background: var(--card); border: 1px solid var(--border); }
.pm .k { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--text-2); text-transform: uppercase; letter-spacing: .1em; margin-bottom: 5px; }
.pm .v { font-weight: 800; font-size: 17px; font-variant-numeric: tabular-nums; line-height: 1.05; color: var(--charcoal); letter-spacing: -.01em; font-family: 'Noto Sans Lao', sans-serif; }
.pm.a { border-left: 3px solid var(--vermilion); } .pm.a .v { color: var(--vermilion); }
.pm.b { border-left: 3px solid var(--teal); } .pm.b .v { color: var(--teal); }
.pm.c { border-left: 3px solid var(--blue); } .pm.c .v { color: var(--blue); }
.pm.d { border-left: 3px solid #7f5af0; } .pm.d .v { color: #7f5af0; }
.pm .c { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--dim2); margin-top: 5px; }

.pay-list .prow { display: grid; grid-template-columns: auto 1fr 80px 60px 130px 150px 22px; gap: 14px; align-items: center; padding: 14px 16px; background: var(--card); border: 1px solid var(--border); border-radius: 14px; margin-bottom: 8px; cursor: pointer; transition: .12s; }
.pay-list .prow:hover { border-color: var(--charcoal); }
.pay-due-banner { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border-radius: 14px; margin-bottom: 14px; cursor: pointer; border: 1px solid; transition: .12s; }
.pay-due-banner:hover { transform: translateY(-1px); }
.pay-due-banner.soon { background: rgba(232,145,46,.08); border-color: rgba(232,145,46,.4); }
.pay-due-banner.overdue { background: rgba(233,79,55,.08); border-color: rgba(233,79,55,.45); animation: sc-pulse 2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .pay-due-banner.overdue { animation: none; } }
.pay-due-banner .pdb-ic { font-size: 22px; line-height: 1; }
.pay-due-banner .pdb-tx { flex: 1; min-width: 0; }
.pay-due-banner .pdb-t { font-size: 14px; font-weight: 800; color: var(--charcoal); }
.pay-due-banner .pdb-s { font-size: 12px; font-weight: 600; color: var(--text-2); margin-top: 2px; }
.pay-due-banner.soon .pdb-go { color: var(--warn); }
.pay-due-banner.overdue .pdb-go { color: var(--vermilion); }
.pay-due-banner .pdb-go { font-size: 13px; font-weight: 800; white-space: nowrap; }
.pay-list .prow.is-paid { border-color: rgba(68,187,164,.45); background: linear-gradient(180deg, rgba(68,187,164,.06), transparent); }
.paid-badge { display: inline-block; font-size: 10px; font-weight: 800; color: var(--teal); background: rgba(68,187,164,.12); border: 1px solid rgba(68,187,164,.3); padding: 1px 7px; border-radius: 999px; vertical-align: middle; margin-left: 6px; letter-spacing: .01em; }
.pay-foot .primary.paid { background: var(--teal); }
/* Pay timing warning strip (in detail popup, above footer) */
.pay-timing { display: flex; align-items: center; gap: 8px; padding: 10px 20px; font-size: 12.5px; font-weight: 700; flex-shrink: 0; }
.pay-timing.early { background: rgba(63,136,197,.08); color: var(--blue); }
.pay-timing.due { background: rgba(232,145,46,.1); color: var(--warn); }
.pay-timing.overdue { background: rgba(233,79,55,.1); color: var(--vermilion); }
/* Payroll-due confirm popup */
.pdc-body { padding: 16px 18px; overflow-y: auto; flex: 1; }
.pdc-strip { display: grid; grid-template-columns: 1fr auto; gap: 12px; padding: 14px 16px; border-radius: 14px; background: rgba(57,62,65,.03); border: 1px solid var(--border); margin-bottom: 12px; }
.pdc-strip .k { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text2); }
.pdc-strip .v { font-size: 20px; font-weight: 800; color: var(--charcoal); margin-top: 3px; font-variant-numeric: tabular-nums; }
.pdc-strip .r { text-align: right; }
.pdc-row { display: grid; grid-template-columns: 34px 1fr auto; gap: 11px; align-items: center; padding: 11px 4px; border-bottom: 1px solid var(--border); }
.pdc-row:last-child { border-bottom: none; }
.pdc-row .av { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 14px; }
.pdc-row .nm { font-size: 13.5px; font-weight: 700; color: var(--charcoal); }
.pdc-row .sb { font-size: 11px; color: var(--text2); margin-top: 1px; font-variant-numeric: tabular-nums; }
.pdc-row .amt { font-size: 14px; font-weight: 800; color: var(--charcoal); font-variant-numeric: tabular-nums; }
.pdc-empty { text-align: center; padding: 24px; color: var(--teal); font-weight: 700; }
.pdc-note { text-align: center; padding: 10px; color: var(--text2); font-size: 12px; font-weight: 600; }
.pay-list .av { width: 40px; height: 40px; border-radius: 11px; color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 15px; }
.pay-list .nm { font-size: 14.5px; font-weight: 800; color: var(--charcoal); line-height: 1.2; }
.pay-list .sp { font-size: 11px; color: var(--text-2); font-weight: 600; margin-top: 2px; text-transform: uppercase; letter-spacing: .03em; }
.pay-list .mini { text-align: right; }
.pay-list .mini .l { font-size: 9.5px; color: var(--text-2); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.pay-list .mini .v { font-size: 14px; font-weight: 800; color: var(--charcoal); font-variant-numeric: tabular-nums; margin-top: 2px; letter-spacing: -.01em; }
.pay-list .mini.att .v { color: var(--teal); }
.pay-list .mini.job .v { color: var(--blue); }
.pay-list .mini.com .v { color: #7f5af0; }
.pay-list .total { text-align: right; padding-left: 14px; border-left: 1px solid var(--border); }
.pay-list .total .n { font-size: 18px; font-weight: 800; color: var(--vermilion); font-variant-numeric: tabular-nums; letter-spacing: -.02em; line-height: 1; font-family: 'Noto Sans Lao', sans-serif; }
.pay-list .arr { color: var(--text-2); font-size: 16px; text-align: center; }
@media (max-width: 900px) {
  .pay-list .prow { grid-template-columns: auto 1fr auto 22px; gap: 10px; }
  .pay-list .mini { display: none; }
  .pay-list .total { padding-left: 0; border-left: none; }
}

/* Detail popup */
#sheet-body.pay-pop { max-width: 680px; padding: 0; display: flex; flex-direction: column; max-height: 92vh; overflow: hidden; }
#sheet-body.pay-pop::before { display: none; }
.pay-head { padding: 18px 20px; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--border); background: var(--card); border-top: 4px solid var(--vermilion); flex-shrink: 0; }
.pay-l { min-width: 0; flex: 1; display: flex; gap: 14px; align-items: flex-start; }
.pay-av { width: 48px; height: 48px; border-radius: 13px; color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 20px; flex-shrink: 0; }
.pay-info { min-width: 0; flex: 1; }
.pay-info .top-row { display: flex; align-items: center; gap: 6px; margin-bottom: 5px; flex-wrap: wrap; }
.pay-info .cat { background: rgba(233,79,55,.14); color: var(--vermilion); font-size: 10px; font-weight: 800; padding: 2px 8px; border-radius: 5px; text-transform: uppercase; letter-spacing: .04em; }
.pay-info .idp { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: var(--text-2); font-weight: 600; }
.pay-info .pn { font-size: 18px; font-weight: 800; color: var(--charcoal); letter-spacing: -.01em; line-height: 1.2; font-family: 'Noto Sans Lao', sans-serif; }
.pay-info .pm2 { font-size: 11.5px; color: var(--text-2); margin-top: 3px; font-weight: 600; font-variant-numeric: tabular-nums; }
.pay-x { width: 34px; height: 34px; border-radius: 10px; background: transparent; border: none; color: var(--text-2); cursor: pointer; font-size: 15px; font-family: inherit; }
.pay-x:hover { background: rgba(57,62,65,.06); color: var(--charcoal); }

.pay-kpi { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 1px; background: var(--border); padding: 0 20px; flex-shrink: 0; }
@media (max-width: 600px) { .pay-kpi { grid-template-columns: 1fr; padding: 0 12px; } }
.pay-kpi .kpi { padding: 16px 18px; background: var(--card); }
.pay-kpi .kpi.hero { background: linear-gradient(135deg, rgba(233,79,55,.05), transparent); }
.pay-kpi .kpi .k { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--text-2); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 6px; }
.pay-kpi .kpi .v { font-size: 16px; font-weight: 800; color: var(--charcoal); font-variant-numeric: tabular-nums; letter-spacing: -.02em; line-height: 1; font-family: 'Noto Sans Lao', sans-serif; }
.pay-kpi .kpi.hero .v { font-size: 24px; color: var(--vermilion); }
.pay-kpi .kpi.b .v { color: var(--teal); }
.pay-kpi .kpi.c .v { color: var(--blue); }
.pay-kpi .kpi .f { font-size: 10.5px; color: var(--text-2); margin-top: 6px; font-weight: 600; font-variant-numeric: tabular-nums; }

.pay-body { padding: 16px 20px; overflow-y: auto; flex: 1; min-height: 0; }
.pay-subh { font-size: 10.5px; font-weight: 800; color: var(--text-2); text-transform: uppercase; letter-spacing: .06em; margin: 14px 0 8px; padding-bottom: 5px; border-bottom: 1px solid var(--border); }
.pay-subh:first-child { margin-top: 0; }

.tier-band { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--border); border-radius: 11px; overflow: hidden; margin: 8px 0; }
.tier-band .tc { padding: 12px 14px; background: var(--card); }
.tier-band .tc.a { background: rgba(63,136,197,.06); }
.tier-band .tc.b { background: rgba(196,168,255,.06); }
.tier-band .tl { font-size: 9.5px; font-weight: 800; color: var(--text-2); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; }
.tier-band .tv { font-size: 14px; font-weight: 800; color: var(--charcoal); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.tier-band .ts { font-size: 11.5px; color: var(--text-2); font-weight: 700; margin-top: 3px; font-variant-numeric: tabular-nums; font-family: 'Noto Sans Lao', sans-serif; }
.tier-band .tc.a .tv { color: var(--blue); }
.tier-band .tc.b .tv { color: #7f5af0; }

.drow2 { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 11px 13px; border: 1px solid var(--border); border-radius: 10px; margin-bottom: 6px; background: var(--card); }
.drow2 .icx { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; font-size: 15px; flex-shrink: 0; }
.drow2 .icx.t { background: rgba(68,187,164,.14); color: var(--teal); }
.drow2 .icx.b { background: rgba(63,136,197,.14); color: var(--blue); }
.drow2 .icx.p { background: rgba(127,90,240,.14); color: #7f5af0; }
.drow2 .icx.o { background: rgba(255,179,71,.16); color: var(--warn); }
.drow2 .t { font-size: 13px; font-weight: 800; color: var(--charcoal); }
.drow2 .s { font-size: 11px; color: var(--text-2); font-weight: 600; margin-top: 2px; font-variant-numeric: tabular-nums; }
.drow2 .r { text-align: right; min-width: 120px; }
.drow2 .r .n { font-size: 14.5px; font-weight: 800; color: var(--charcoal); font-variant-numeric: tabular-nums; letter-spacing: -.01em; font-family: 'Noto Sans Lao', sans-serif; }
.drow2 .r .n.g { color: var(--teal); }
.drow2 .r .n.b { color: var(--blue); }
.drow2 .r .l { font-size: 10px; color: var(--text-2); font-weight: 600; margin-top: 1px; }

/* Collapsible drill toggle inside scrollable body */
.pay-drill-toggle { display: flex; align-items: center; gap: 8px; width: 100%; margin-top: 12px; padding: 12px 14px; background: rgba(63,136,197,.06); border: 1px solid rgba(63,136,197,.2); border-radius: 10px; cursor: pointer; font-family: inherit; font-size: 12.5px; font-weight: 800; color: var(--charcoal); }
.pay-drill-toggle:hover { background: rgba(63,136,197,.1); }
.pay-drill-toggle .tw { color: var(--blue); font-size: 12px; transition: transform .15s; }
.pay-drill-toggle .tw.open { transform: rotate(90deg); }
.pay-drill-toggle .pay-drill-tot { margin-left: auto; color: var(--blue); font-variant-numeric: tabular-nums; }
.pay-drill-body { margin-top: 8px; }
.pay-drill-body.hidden { display: none; }
.pay-drill { padding: 12px 20px 4px; background: rgba(57,62,65,.02); border-top: 1px solid var(--border); }
.pay-drill-body .drill-hd { display: grid; grid-template-columns: 70px 1fr 120px 52px 130px; gap: 10px; padding: 8px 12px; font-size: 10px; font-weight: 800; color: var(--text-2); text-transform: uppercase; letter-spacing: .05em; font-family: 'JetBrains Mono', monospace; }
.pay-drill-body .drill-hd .rt { text-align: right; }
.pay-drill-body .drill-hd .ct { text-align: center; }
.pay-drill-body .jrow { display: grid; grid-template-columns: 70px 1fr 120px 52px 130px; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--border); border-radius: 9px; margin-bottom: 5px; font-variant-numeric: tabular-nums; background: var(--card); }
.pay-drill-body .jrow .d { color: var(--text-2); font-weight: 600; font-size: 12px; font-family: 'JetBrains Mono', monospace; }
.pay-drill-body .jrow .svc { color: var(--charcoal); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; font-family: 'Noto Sans Lao', sans-serif; }
.pay-drill-body .jrow .rev { text-align: right; color: var(--charcoal); font-weight: 700; font-size: 13px; }
.pay-drill-body .jrow .rate { background: #7f5af0; color: #fff; padding: 3px 8px; border-radius: 5px; font-size: 10.5px; font-weight: 800; text-align: center; letter-spacing: .03em; justify-self: center; }
.pay-drill-body .jrow .rate.hi { background: var(--accent); color: #0a3a17; }
.pay-drill-body .jrow .cm { text-align: right; color: var(--blue); font-weight: 800; font-size: 13px; font-family: 'Noto Sans Lao', sans-serif; }
.pay-drill-body .sep-lb { font-size: 10px; font-weight: 800; color: #7f5af0; text-transform: uppercase; letter-spacing: .06em; margin: 8px 0 4px 12px; padding: 4px 0; border-top: 1px dashed rgba(127,90,240,.4); border-bottom: 1px dashed rgba(127,90,240,.4); text-align: center; background: rgba(127,90,240,.06); border-radius: 6px; }
.pay-drill .drill-total { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; padding: 11px 14px; margin-top: 6px; background: linear-gradient(90deg, rgba(63,136,197,.06), transparent); border: 1.5px solid rgba(63,136,197,.28); border-radius: 10px; }
.pay-drill .drill-total .l { font-size: 11px; font-weight: 800; color: var(--text-2); text-transform: uppercase; letter-spacing: .05em; }
.pay-drill .drill-total .c { font-size: 11px; color: var(--text-2); font-weight: 600; font-variant-numeric: tabular-nums; font-family: 'JetBrains Mono', monospace; }
.pay-drill .drill-total .v { font-size: 17px; font-weight: 800; color: var(--blue); font-variant-numeric: tabular-nums; letter-spacing: -.01em; font-family: 'Noto Sans Lao', sans-serif; }

.pay-foot { padding: 14px 20px calc(14px + var(--safe-bottom)); display: flex; gap: 8px; border-top: 1px solid var(--border); background: rgba(57,62,65,.02); flex-shrink: 0; }
/* Mobile full-screen payroll detail (Option B: appbar + tabs) */
@media (max-width: 1023px) {
  #sheet-body.pay-pop.pay-fs { max-width: 100%; width: 100%; height: 100%; max-height: 100%; border-radius: 0; }
}
.pay-appbar { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 12px 14px calc(12px + var(--safe-top, 0px)); background: var(--charcoal); color: #fff; flex-shrink: 0; }
.pay-appbar .pay-bk { width: 32px; height: 32px; border-radius: 9px; background: rgba(255,255,255,.14); border: none; color: #fff; font-size: 20px; line-height: 1; cursor: pointer; font-family: inherit; }
.pay-appbar .ttl { font-size: 15px; font-weight: 800; min-width: 0; overflow: hidden; }
.pay-appbar .ttl small { display: block; font-size: 10.5px; color: rgba(255,255,255,.65); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pay-appbar .pay-chip { background: rgba(255,255,255,.16); padding: 6px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pay-tabs { display: flex; gap: 4px; padding: 8px 12px 0; background: var(--card); flex-shrink: 0; border-bottom: 1px solid var(--border); }
.pay-tabs button { flex: 1; border: none; background: rgba(57,62,65,.05); font-family: inherit; font-size: 12.5px; font-weight: 700; color: var(--text-2); padding: 10px 4px; border-radius: 9px 9px 0 0; cursor: pointer; }
.pay-tabs button.on { background: var(--card); color: var(--charcoal); box-shadow: 0 -2px 0 var(--vermilion) inset; }
.pay-pane { display: none; }
.pay-pane.on { display: block; animation: sp-screen-in .22s ease-out; }
.pay-fs .pay-kpi { grid-template-columns: 1fr 1fr; }
.pay-fs .pay-kpi .kpi.hero { grid-column: 1 / -1; }
.pay-foot .ghost { flex: 1; background: var(--card); border: 1px solid var(--border); color: var(--text-2); font-weight: 700; padding: 12px; border-radius: 10px; cursor: pointer; font-family: inherit; font-size: 13px; }
.pay-foot .primary { flex: 1.8; background: var(--vermilion); color: #fff; border: none; font-weight: 800; padding: 12px; border-radius: 10px; cursor: pointer; font-family: inherit; font-size: 13.5px; font-variant-numeric: tabular-nums; }

/* ============== Stage 4.5 · Month view ============== */
.view-toggle { display: flex; gap: 3px; background: rgba(57,62,65,.06); border-radius: 9px; padding: 3px; }
.view-toggle button { padding: 7px 14px; background: transparent; border: none; border-radius: 7px; font-weight: 700; font-size: 12.5px; color: var(--text-2); cursor: pointer; font-family: inherit; }
.view-toggle button.on { background: var(--card); color: var(--charcoal); box-shadow: 0 1px 3px rgba(57,62,65,.14); }

/* Desktop month grid */
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--border); border-radius: 11px; }
.mgrid { display: grid; min-width: 1180px; gap: 1px; background: rgba(57,62,65,.06); }
.mh-cell { background: var(--card); padding: 6px 2px; text-align: center; font-size: 10px; font-weight: 700; color: var(--text-2); text-transform: uppercase; letter-spacing: .04em; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; }
.mh-cell.we { background: rgba(233,79,55,.05); color: var(--vermilion); }
.mh-cell.today { background: rgba(63,136,197,.12); color: var(--blue); }
.mh-cell.sum-hd { background: rgba(68,187,164,.08); color: var(--teal); }
.mh-cell .dn { font-size: 13px; font-weight: 800; color: var(--charcoal); font-family: 'Noto Sans Lao', sans-serif; letter-spacing: -.01em; line-height: 1; }
.mh-cell.we .dn { color: var(--vermilion); }
.mh-cell.today .dn { color: var(--blue); }
.mh-cell.nm { background: var(--card); padding: 8px 12px; }
.mh-cell .dow { font-size: 9px; }
.mnm { background: var(--card); padding: 7px 10px; display: flex; align-items: center; gap: 8px; min-width: 0; }
.mav { width: 24px; height: 24px; border-radius: 7px; color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 11px; flex-shrink: 0; }
.mn { font-size: 11.5px; font-weight: 700; color: var(--charcoal); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mcell { background: var(--card); padding: 7px 2px; text-align: center; font-size: 12px; font-weight: 800; color: var(--dim2); cursor: pointer; min-height: 32px; display: flex; align-items: center; justify-content: center; transition: filter .1s ease; }
.mcell:hover { filter: brightness(.94); }
.mcell.work { background: rgba(68,187,164,.06); color: #a0a4a8; font-size: 14px; }
.mcell.conf { background: var(--teal); color: #fff; font-size: 11px; }
.mcell.rn { background: rgba(57,62,65,.09); color: #5b6068; font-size: 11px; }
.mcell.ru { background: linear-gradient(135deg, var(--warn), #d4741d); color: #fff; font-size: 11px; }
.mcell.rm { background: rgba(127,90,240,.18); color: #5b3fc4; font-size: 12px; }
.mcell.pending { background: rgba(255,179,71,.22); color: #b8791d; animation: sc-pulse 2s ease-in-out infinite; }
.mcell.absent { background: linear-gradient(135deg, var(--vermilion), #c73520); color: #fff; font-size: 10px; }
.mcell.we { filter: none; }
.mcell.we:not(.conf):not(.rn):not(.ru):not(.rm):not(.pending):not(.absent) { background: rgba(233,79,55,.03); }
.mcell.today { outline: 2px solid var(--blue); outline-offset: -2px; z-index: 1; position: relative; }
.msum { background: rgba(68,187,164,.08); text-align: center; padding: 6px 4px; font-size: 12.5px; font-weight: 800; color: var(--teal); font-variant-numeric: tabular-nums; display: flex; flex-direction: column; justify-content: center; line-height: 1.15; }
.msum .sub { font-size: 9px; color: var(--text-2); font-weight: 600; }
.mfoot-lb { background: var(--card); padding: 8px 10px; font-size: 10.5px; font-weight: 700; color: var(--text-2); text-transform: uppercase; letter-spacing: .04em; display: flex; align-items: center; border-top: 2px solid var(--border); }
.mfoot-c { background: var(--card); padding: 7px 2px; text-align: center; font-size: 11.5px; font-weight: 800; color: var(--charcoal); font-variant-numeric: tabular-nums; border-top: 2px solid var(--border); }
.mfoot-c.we { background: rgba(233,79,55,.03); }
.mfoot-c.low { color: var(--vermilion); }
.mfoot-c.high { color: var(--teal); }
.mfoot-c.today { outline: 2px solid var(--blue); outline-offset: -2px; position: relative; }
.mfoot-sum { background: var(--charcoal); color: #fff; padding: 8px 4px; text-align: center; font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; border-top: 2px solid var(--border); }

/* Mobile month stat cards */
.mo-nav { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px; background: var(--card); border-radius: 11px; border: 1px solid var(--border); margin-bottom: 10px; font-size: 13px; font-weight: 700; color: var(--charcoal); }
.mo-nav button { background: transparent; border: 1px solid var(--border); border-radius: 7px; width: 30px; height: 30px; font-family: inherit; font-weight: 700; color: var(--text-2); font-size: 14px; cursor: pointer; }
.mstat-card { background: var(--card); border: 1px solid var(--border); border-radius: 13px; padding: 12px 14px; margin-bottom: 10px; cursor: pointer; }
.mst-top { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; margin-bottom: 10px; }
.mst-av { width: 38px; height: 38px; border-radius: 11px; color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 15px; }
.mst-nm { font-size: 14.5px; font-weight: 800; color: var(--charcoal); line-height: 1.2; }
.mst-fr { font-size: 11.5px; color: var(--text-2); font-weight: 600; margin-top: 2px; font-variant-numeric: tabular-nums; }
.mst-pct { text-align: right; }
.mst-pct .mst-n { font-size: 24px; font-weight: 800; color: var(--teal); font-variant-numeric: tabular-nums; letter-spacing: -.02em; line-height: 1; }
.mst-pct .mst-s { font-size: 9.5px; font-weight: 700; color: var(--text-2); text-transform: uppercase; letter-spacing: .04em; margin-top: 3px; }
.mst-pct.mid .mst-n { color: var(--warn); }
.mst-pct.low .mst-n { color: var(--vermilion); }
.mst-dots { display: grid; grid-template-columns: repeat(31, 1fr); gap: 2px; margin-bottom: 10px; padding: 2px; }
.mst-d { aspect-ratio: 1; border-radius: 2px; background: rgba(57,62,65,.08); }
.mst-d.conf { background: var(--teal); }
.mst-d.rn { background: rgba(57,62,65,.28); }
.mst-d.ru { background: var(--warn); }
.mst-d.rm { background: #7f5af0; }
.mst-d.absent { background: var(--vermilion); }
.mst-d.pending { background: rgba(255,179,71,.6); }
.mst-foot { display: flex; gap: 10px; flex-wrap: wrap; font-size: 11px; color: var(--text-2); font-weight: 600; }
.mst-foot span { display: flex; align-items: center; gap: 4px; }
.mst-foot span b { color: var(--charcoal); font-weight: 800; font-variant-numeric: tabular-nums; }
.mst-sw { width: 8px; height: 8px; border-radius: 2px; }
.mst-sw.rn { background: rgba(57,62,65,.28); }
.mst-sw.ru { background: var(--warn); }
.mst-sw.ab { background: var(--vermilion); }
.mst-sw.pd { background: rgba(255,179,71,.6); }

/* Mini-calendar detail sheet */
.mcal-head { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding-bottom: 12px; border-bottom: 1px solid var(--border); margin: -6px 0 12px; }
.mcal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.mcal-dh { font-size: 10px; font-weight: 700; color: var(--text-2); text-align: center; text-transform: uppercase; letter-spacing: .04em; padding: 4px 0; }
.mcal-c { aspect-ratio: 1; border-radius: 7px; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; color: var(--charcoal); background: var(--card); border: 1px solid var(--border); cursor: pointer; }
.mcal-c.pad { border: none; background: transparent; }
.mcal-c .day { font-size: 10.5px; color: var(--text-2); font-weight: 700; margin-bottom: 1px; }
.mcal-c.conf { background: var(--teal); color: #fff; border-color: var(--teal); }
.mcal-c.conf .day { color: rgba(255,255,255,.75); }
.mcal-c.rn { background: rgba(57,62,65,.14); border-color: transparent; color: #5b6068; }
.mcal-c.ru { background: linear-gradient(135deg, var(--warn), #d4741d); color: #fff; border-color: transparent; }
.mcal-c.ru .day { color: rgba(255,255,255,.75); }
.mcal-c.absent { background: linear-gradient(135deg, var(--vermilion), #c73520); color: #fff; border-color: transparent; }
.mcal-c.absent .day { color: rgba(255,255,255,.75); }
.mcal-c.pending { background: rgba(255,179,71,.22); color: #b8791d; border-color: rgba(255,179,71,.4); }
.mcal-c.rm { background: rgba(127,90,240,.18); color: #5b3fc4; border-left: 3px solid #7f5af0; }
.mcal-c.today { outline: 2px solid var(--blue); outline-offset: -2px; }
.mcal-sum { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 14px; }
.mcal-sum .ss { background: rgba(57,62,65,.04); border-radius: 9px; padding: 10px 12px; text-align: center; }
.mcal-sum .ss .l { font-size: 10px; font-weight: 700; color: var(--text-2); text-transform: uppercase; letter-spacing: .04em; }
.mcal-sum .ss .v { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; margin-top: 3px; color: var(--charcoal); }
.mcal-sum .ss.t .v { color: var(--teal); }
.mcal-sum .ss.r .v { color: var(--vermilion); }

/* ============== Stage 4.3 · Attendance popups ============== */
.att-hero { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 14px 18px; background: linear-gradient(135deg, rgba(122,184,255,.08), transparent); border-bottom: 1px solid var(--border); margin: -18px -18px 0; }
.mh-av { width: 44px; height: 44px; border-radius: 12px; color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 19px; }
.mh-id .mh-n { font-size: 15px; font-weight: 800; color: var(--charcoal); line-height: 1.2; }
.mh-id .mh-d { font-size: 11.5px; color: var(--text-2); margin-top: 3px; font-weight: 600; font-variant-numeric: tabular-nums; }
.mh-id .mh-d b { color: var(--charcoal); font-weight: 700; }
.mh-x { width: 32px; height: 32px; border-radius: 9px; background: transparent; border: none; color: var(--text-2); cursor: pointer; font-size: 15px; font-family: inherit; }
.mh-x:hover { background: rgba(57,62,65,.06); color: var(--charcoal); }
.att-body { padding: 16px 4px 8px; }
.att-q { font-size: 13px; color: var(--text-2); font-weight: 600; margin-bottom: 12px; text-align: center; }
.att-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
.att-opt { padding: 16px 12px; border-radius: 11px; border: 2px solid; cursor: pointer; text-align: center; transition: .12s; background: var(--card); font-family: inherit; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.att-opt.y { border-color: rgba(68,187,164,.4); background: rgba(68,187,164,.04); }
.att-opt.y:hover, .att-opt.y.sel { background: rgba(68,187,164,.14); border-color: var(--teal); }
.att-opt.n { border-color: rgba(233,79,55,.35); background: rgba(233,79,55,.03); }
.att-opt.n:hover, .att-opt.n.sel { background: rgba(233,79,55,.12); border-color: var(--vermilion); }
.att-opt .em { font-size: 22px; line-height: 1; }
.att-opt .lb { font-size: 12.5px; font-weight: 800; }
.att-opt.y .lb { color: var(--teal); } .att-opt.n .lb { color: var(--vermilion); }
.att-note-wrap { padding: 0 4px; }
.att-note-wrap label { display: block; font-size: 11.5px; font-weight: 700; color: var(--text-2); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px; }
.att-note-wrap input { width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 9px; font-size: 13px; font-family: inherit; background: var(--card); }
.att-foot { padding: 12px 4px 4px; display: flex; gap: 8px; margin-top: 6px; border-top: 1px solid var(--border); }
.att-foot .cli-fbtn { font-family: inherit; }

.cam-body { padding: 12px 4px; }
.cam-item { width: 100%; display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 12px 14px; margin-bottom: 6px; border: 1px solid var(--border); border-radius: 10px; background: var(--card); cursor: pointer; font-family: inherit; text-align: left; transition: .12s; }
.cam-item:hover { border-color: var(--charcoal); background: rgba(57,62,65,.02); }
.cam-item:last-child { margin-bottom: 0; }
.cam-item .em { font-size: 18px; width: 24px; text-align: center; }
.cam-item .cam-t { font-size: 13px; font-weight: 700; color: var(--charcoal); }
.cam-item .cam-t b { color: var(--vermilion); }
.cam-item .cam-s { font-size: 11px; color: var(--text-2); font-weight: 500; margin-top: 2px; }
.cam-item .cam-tag { font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }

.sc-cell.has-note::after { content: '💬'; position: absolute; top: 2px; right: 3px; font-size: 8px; }

/* ============== Stage 4 mobile · staff cards + day-first schedule ============== */
.emp-card { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 14px; margin-bottom: 10px; cursor: pointer; }
.emp-hd { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; margin-bottom: 12px; }
.emp-av { width: 42px; height: 42px; border-radius: 12px; color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 17px; flex-shrink: 0; }
.emp-nm { font-size: 15px; font-weight: 800; color: var(--charcoal); line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.emp-ph { font-size: 12.5px; color: var(--text-2); font-weight: 600; margin-top: 3px; font-variant-numeric: tabular-nums; }
.emp-tog { width: 38px; height: 22px; background: var(--teal); border-radius: 99px; position: relative; flex-shrink: 0; }
.emp-tog::after { content: ''; position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; background: #fff; border-radius: 50%; }
.emp-tog.off { background: rgba(57,62,65,.18); }
.emp-tog.off::after { right: auto; left: 2px; }
.emp-specs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.em-tag { font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 6px; text-transform: uppercase; letter-spacing: .03em; }
.em-tag.h { background: rgba(63,136,197,.14); color: var(--blue); }
.em-tag.f { background: rgba(68,187,164,.16); color: var(--teal); }
.em-tag.l { background: rgba(233,79,55,.14); color: var(--vermilion); }
.em-rest { font-size: 12px; font-weight: 700; color: #6b4fd6; background: rgba(127,90,240,.1); padding: 3px 10px; border-radius: 6px; }
.emp-info { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding-top: 10px; border-top: 1px solid var(--border); }
.emp-info .cell { background: rgba(57,62,65,.04); border-radius: 9px; padding: 9px 12px; }
.emp-info .lb { font-size: 10.5px; font-weight: 700; color: var(--text-2); text-transform: uppercase; letter-spacing: .04em; }
.emp-info .vl { font-size: 15px; font-weight: 800; color: var(--charcoal); font-variant-numeric: tabular-nums; margin-top: 3px; }
.emp-info .vl.sal { color: var(--teal); }
.emp-info .vl.com { color: var(--blue); }

/* Mobile schedule (day-first) */
.sched-nav-m { display: flex; gap: 6px; margin-bottom: 10px; }
.sched-nav-m button { flex: 1; padding: 9px 6px; background: var(--card); border: 1px solid var(--border); border-radius: 9px; font-weight: 700; font-size: 12px; color: var(--text-2); cursor: pointer; font-family: inherit; }
.sched-nav-m button:hover { border-color: var(--charcoal); color: var(--charcoal); }
.sched-nav-m button:nth-child(2) { background: var(--charcoal); color: #fff; border: none; flex: 0 0 auto; padding: 9px 18px; }
.day-strip { display: flex; gap: 6px; padding: 10px 4px; overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 8px; }
.day-strip::-webkit-scrollbar { display: none; }
.day-chip { flex: 0 0 auto; padding: 10px 14px; border-radius: 11px; background: var(--card); border: 1px solid var(--border); text-align: center; min-width: 58px; cursor: pointer; position: relative; }
.day-chip.today { background: var(--charcoal); color: #fff; border-color: var(--charcoal); }
.day-chip .dow { font-size: 11px; font-weight: 700; color: var(--text-2); text-transform: uppercase; letter-spacing: .04em; }
.day-chip.today .dow { color: rgba(255,255,255,.7); }
.day-chip .dn { font-size: 19px; font-weight: 800; color: var(--charcoal); font-variant-numeric: tabular-nums; letter-spacing: -.01em; margin-top: 2px; }
.day-chip.today .dn { color: #fff; }
.day-chip .dot { position: absolute; top: 4px; right: 6px; width: 7px; height: 7px; background: var(--vermilion); border-radius: 50%; }
.day-hd { padding: 4px 4px 8px; font-size: 13px; font-weight: 800; color: var(--charcoal); }
.day-hd .cnt { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text-2); font-weight: 600; margin-left: 6px; text-transform: none; letter-spacing: 0; }
.sr-row { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 12px 14px; background: var(--card); border: 1px solid var(--border); border-radius: 14px; margin-bottom: 6px; cursor: pointer; }
.sr-row:active { transform: scale(.99); }
.sr-av { width: 40px; height: 40px; border-radius: 11px; color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 15px; flex-shrink: 0; }
.sr-nm { font-size: 14.5px; font-weight: 800; color: var(--charcoal); }
.sr-sp { font-size: 11px; color: var(--text-2); font-weight: 600; margin-top: 2px; text-transform: uppercase; letter-spacing: .04em; }
.sr-state { padding: 10px 16px; border-radius: 10px; font-weight: 800; font-size: 15px; min-width: 62px; text-align: center; font-family: inherit; }
.sr-state.work { background: rgba(68,187,164,.08); color: #a0a4a8; font-size: 18px; }
.sr-state.conf { background: var(--teal); color: #fff; box-shadow: inset 0 -2px 0 rgba(0,0,0,.15); }
.sr-state.rn { background: rgba(57,62,65,.14); color: #5b6068; font-size: 17px; }
.sr-state.ru { background: linear-gradient(135deg, var(--warn), #d4741d); color: #fff; }
.sr-state.rm { background: rgba(127,90,240,.18); color: #5b3fc4; border-left: 3px solid #7f5af0; }
.sr-state.pending { background: rgba(255,179,71,.22); color: #b8791d; animation: sr-pulse 2s ease-in-out infinite; }
.sr-state.absent { background: linear-gradient(135deg, var(--vermilion), #c73520); color: #fff; }
@keyframes sr-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .7; } }

/* Mobile employee form fixes - drop 2-col wide sheet, single col + scroll */
@media (max-width: 720px) {
  .sheet.wide.ef-sheet, #sheet-body.wide:has(.ef-sheet) { max-width: none; width: 100%; }
  .ef-sheet .m-body { grid-template-columns: 1fr !important; overflow-y: auto; }
  .ef-sheet .m-body .col { overflow: visible !important; padding: 12px 14px !important; border-right: none !important; }
  .ef-sheet .m-body .col.left { border-bottom: 1px solid var(--border); background: var(--card); }
  .ef-head { padding: 12px 14px !important; }
  .ef-hero-nm { font-size: 15px !important; }
  .ef-sheet .m-foot { padding: 10px 14px calc(10px + var(--safe-bottom)) !important; }
  .ef-sheet .field { margin-bottom: 12px !important; }
  .ef-sheet .field label { font-size: 12px !important; margin-bottom: 5px !important; }
  .ef-sheet .field input { font-size: 15px !important; padding: 11px 12px !important; }
  .ef-sec-h { font-size: 11px !important; margin: 4px 0 8px !important; }
  .ef-preview { padding: 10px 12px !important; }
  .rp-row { gap: 4px; }
  .rp-row .d { padding: 10px 2px; font-size: 12px; }
  .spec-picks label { padding: 9px 14px; font-size: 13px; }
}

/* ============== Stage 4.2 · Schedule grid ============== */
.sched-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 12px; }
@media (max-width: 720px) { .sched-strip { grid-template-columns: repeat(2, 1fr); } }
.ss-m { background: var(--card); border: 1px solid var(--border); border-radius: 11px; padding: 12px 14px; }
.ss-m .k { font-size: 10.5px; font-weight: 700; color: var(--text-2); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 5px; }
.ss-m .v { font-size: 22px; font-weight: 800; color: var(--charcoal); font-variant-numeric: tabular-nums; letter-spacing: -.01em; line-height: 1; }
.ss-m .v .sub { font-size: 12px; font-weight: 600; color: var(--text-2); margin-left: 2px; }
.ss-m.a { border-top: 3px solid var(--blue); } .ss-m.a .v { color: var(--blue); }
.ss-m.b { border-top: 3px solid var(--teal); } .ss-m.b .v { color: var(--teal); }
.ss-m.c { border-top: 3px solid var(--warn); } .ss-m.c .v { color: var(--warn); }
.ss-m.d { border-top: 3px solid #7f5af0; } .ss-m.d .v { color: #7f5af0; }

.sched-app { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 14px; }
.sched-hd { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; flex-wrap: wrap; gap: 10px; }
.sched-hd h3 { font-size: 15px; font-weight: 800; color: var(--charcoal); letter-spacing: -.01em; }
.sched-nav { display: flex; gap: 6px; align-items: center; }
.sched-nav button { background: var(--card); border: 1px solid var(--border); color: var(--text-2); width: 32px; height: 32px; border-radius: 8px; cursor: pointer; font-weight: 700; font-size: 15px; font-family: inherit; }
.sched-nav button:hover { border-color: var(--charcoal); color: var(--charcoal); }
.sched-nav button.today { background: var(--charcoal); color: #fff; border: none; padding: 0 14px; width: auto; font-size: 12px; }

.sched-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--border); border-radius: 11px; }
.sched-grid { min-width: 720px; }
.sc-thd { display: grid; grid-template-columns: 140px repeat(7, 1fr); gap: 1px; background: rgba(57,62,65,.06); font-size: 10.5px; font-weight: 700; color: var(--text-2); text-transform: uppercase; letter-spacing: .05em; }
.sc-thd > div { background: var(--card); padding: 10px 4px; text-align: center; }
.sc-thd .today { background: rgba(63,136,197,.08); color: var(--blue); }
.sc-thd .dn { font-size: 13px; font-weight: 800; color: var(--charcoal); letter-spacing: -.01em; margin-top: 3px; font-family: 'Noto Sans Lao', sans-serif; }
.sc-tr { display: grid; grid-template-columns: 140px repeat(7, 1fr); gap: 1px; background: rgba(57,62,65,.06); border-top: 1px solid var(--border); }
.sc-nm { background: var(--card); padding: 10px 12px; display: flex; align-items: center; gap: 9px; min-width: 0; }
.sc-av { width: 28px; height: 28px; border-radius: 9px; color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 13px; flex-shrink: 0; }
.sc-n { font-size: 12.5px; font-weight: 700; color: var(--charcoal); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-sp { font-size: 10px; color: var(--text-2); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; margin-top: 2px; }
.sc-cell { background: var(--card); padding: 9px 4px; text-align: center; font-size: 15px; font-weight: 800; min-height: 48px; display: flex; align-items: center; justify-content: center; color: var(--dim2); position: relative; letter-spacing: -.01em; }
.sc-cell.work { color: #a0a4a8; background: rgba(68,187,164,.06); font-weight: 700; font-size: 18px; }
.sc-cell.work.confirmed { background: var(--teal); color: #fff; box-shadow: inset 0 -3px 0 rgba(0,0,0,.15); font-size: 15px; font-weight: 800; }
.sc-cell.rest-normal { color: #5b6068; background: rgba(57,62,65,.09); font-size: 14px; }
.sc-cell.rest-urgent { color: #fff; background: linear-gradient(135deg, var(--warn), #d4741d); box-shadow: inset 0 -2px 0 rgba(0,0,0,.15); font-size: 16px; }
.sc-cell.rest-moved { color: #5b3fc4; background: rgba(127,90,240,.18); border-left: 3px solid #7f5af0; font-size: 16px; }
.sc-cell.pending { color: #b8791d; background: rgba(255,179,71,.22); animation: sc-pulse 2s ease-in-out infinite; }
.sc-cell.absent { color: #fff; background: linear-gradient(135deg, var(--vermilion), #c73520); font-size: 15px; }
.sc-cell.today { outline: 3px solid var(--blue); outline-offset: -3px; z-index: 1; }
.sc-cell:hover:not(.today) { filter: brightness(.96); }
@keyframes sc-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .7; } }
@media (prefers-reduced-motion: reduce) { .sc-cell.pending { animation: none; } }

.sched-legend { display: flex; gap: 12px; margin-top: 10px; font-size: 11px; color: var(--text-2); flex-wrap: wrap; padding: 4px 0 0; }
.sched-legend .lg { display: flex; align-items: center; gap: 5px; font-weight: 600; }
.sched-legend .sw { width: 14px; height: 14px; border-radius: 3px; }
.sched-legend .sw.w { background: rgba(68,187,164,.06); border: 1px solid rgba(68,187,164,.3); }
.sched-legend .sw.cf { background: var(--teal); }
.sched-legend .sw.rn { background: rgba(57,62,65,.14); }
.sched-legend .sw.ru { background: linear-gradient(135deg, var(--warn), #d4741d); }
.sched-legend .sw.rm { background: rgba(127,90,240,.18); border-left: 3px solid #7f5af0; }
.sched-legend .sw.p { background: rgba(255,179,71,.22); border: 1px solid rgba(255,179,71,.5); }
.sched-legend .sw.a { background: linear-gradient(135deg, var(--vermilion), #c73520); }

/* ============== Stage 4.1 · Staff CRUD ============== */
.staff-tbl { background: var(--card); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.st-thead, .st-row { display: grid; grid-template-columns: 1.4fr 130px 110px 70px 100px 60px; gap: 12px; padding: 10px 14px; align-items: center; }
.st-thead { font-size: 11px; font-weight: 700; color: var(--text-2); text-transform: uppercase; letter-spacing: .05em; background: rgba(57,62,65,.03); border-bottom: 1px solid var(--border); }
.st-row { border-bottom: 1px solid var(--border); cursor: pointer; transition: background .12s ease; }
.st-row:last-child { border-bottom: none; }
.st-row:hover { background: rgba(57,62,65,.03); }
.st-nm { display: flex; align-items: center; gap: 10px; min-width: 0; }
.st-av { width: 32px; height: 32px; border-radius: 10px; color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 14px; flex-shrink: 0; }
.st-n { font-weight: 700; font-size: 13.5px; color: var(--charcoal); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-p { font-size: 11.5px; color: var(--text-2); font-weight: 500; font-variant-numeric: tabular-nums; margin-top: 1px; }
.st-spec { display: flex; gap: 4px; flex-wrap: wrap; }
.st-spec-tag { font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 5px; text-transform: uppercase; letter-spacing: .03em; }
.st-sal { font-weight: 700; font-size: 13px; color: var(--charcoal); font-variant-numeric: tabular-nums; text-align: right; }
.st-sal .k { font-size: 10.5px; color: var(--text-2); font-weight: 600; margin-left: 2px; }
.st-com { font-weight: 700; font-size: 13px; color: var(--teal); font-variant-numeric: tabular-nums; }
.st-rest { font-size: 12px; font-weight: 700; color: #7f5af0; font-family: 'Noto Sans Lao', sans-serif; }
.st-tog { width: 36px; height: 20px; background: var(--teal); border-radius: 99px; position: relative; display: inline-block; transition: background .15s; cursor: pointer; }
.st-tog::after { content: ''; position: absolute; top: 2px; right: 2px; width: 16px; height: 16px; background: #fff; border-radius: 50%; transition: .15s; }
.st-tog.off { background: rgba(57,62,65,.18); }
.st-tog.off::after { right: auto; left: 2px; }

/* Employee form v2 - premium wide sheet */
.ef-sheet { display: flex; flex-direction: column; max-height: 92vh; height: 92vh; }
.ef-head { display: grid !important; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 16px 20px !important; background: linear-gradient(135deg, rgba(233,79,55,.06), transparent); flex-shrink: 0; }
.ef-hero-av { width: 52px; height: 52px; border-radius: 14px; background: linear-gradient(135deg, #E94F37, #f57855); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 22px; }
.ef-hero-nm { font-size: 18px; font-weight: 800; color: var(--charcoal); letter-spacing: -.01em; line-height: 1.2; }
.ef-hero-sub { font-size: 11.5px; color: var(--text-2); margin-top: 3px; font-weight: 600; }
.ef-sec-h { font-size: 10.5px; font-weight: 800; color: var(--text-2); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 10px; padding-bottom: 6px; border-bottom: 1px solid var(--border); }
.hint-inline { font-size: 10.5px; color: var(--text-2); font-weight: 500; margin-left: 6px; text-transform: none; letter-spacing: 0; }
.ef-money-wrap { position: relative; display: flex; align-items: center; }
.ef-money-wrap input { flex: 1; padding-right: 34px !important; font-family: 'Noto Sans Lao', 'Noto Sans', sans-serif; font-variant-numeric: tabular-nums; font-weight: 700; letter-spacing: -.01em; font-size: 15px !important; }
.ef-money-suffix { position: absolute; right: 12px; color: var(--text-2); font-weight: 700; font-size: 13px; pointer-events: none; }
.ef-active-card { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; padding: 12px 14px; background: rgba(68,187,164,.05); border: 1px solid rgba(68,187,164,.22); border-radius: 11px; }
.ef-active-lb { font-size: 13px; font-weight: 800; color: var(--charcoal); }
.ef-active-sub { font-size: 11px; color: var(--text-2); font-weight: 500; margin-top: 2px; }
.ef-preview { padding: 12px 14px; background: linear-gradient(135deg, rgba(63,136,197,.06), transparent); border: 1px dashed rgba(63,136,197,.28); border-radius: 10px; margin-top: 10px; }
.ef-pv-h { font-size: 10.5px; font-weight: 700; color: var(--blue); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 6px; }
.ef-pv-r { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; padding: 3px 0; color: var(--text-2); font-weight: 500; }
.ef-pv-r b { color: var(--charcoal); font-weight: 700; font-variant-numeric: tabular-nums; }
.ef-pv-r b.pv-full { color: var(--teal); font-size: 13px; }
.ef-pv-r b.pv-part { color: var(--warn); font-size: 13px; }
.spec-picks label[data-id] { position: relative; }
.spec-picks label[data-id].on { background: color-mix(in oklab, var(--cc) 12%, transparent); border-color: var(--cc); color: var(--cc); }

/* Employee form controls */
.spec-picks { display: flex; gap: 6px; flex-wrap: wrap; }
.spec-picks label { display: flex; align-items: center; padding: 8px 14px; border: 1.5px solid var(--border); border-radius: 9px; cursor: pointer; font-size: 12.5px; font-weight: 700; color: var(--text-2); }
.spec-picks label.on { background: rgba(233,79,55,.08); border-color: var(--vermilion); color: var(--vermilion); }
.rp-row { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.rp-row .d { padding: 9px 2px; text-align: center; font-size: 11px; font-weight: 700; border: 1.5px solid var(--border); border-radius: 8px; cursor: pointer; color: var(--text-2); background: var(--card); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp-row .d.on { background: rgba(127,90,240,.12); border-color: #7f5af0; color: #6b4fd6; }
.field .hint { font-size: 11px; color: var(--text-2); margin-top: 4px; font-weight: 500; }
@media (max-width: 780px) {
  .st-thead, .st-row { grid-template-columns: 1fr 90px 80px 40px; gap: 8px; }
  .st-thead .col-comm, .st-thead .col-rest, .st-row .st-com, .st-row .st-rest { display: none; }
}

/* ============== Stage 3 · Dashboard ============== */
#dash-body { padding: 0; }
.dash-head { margin-bottom: 16px; }
.dash-head h1 { font-size: 24px; font-weight: 800; letter-spacing: -.02em; color: var(--charcoal); }
.dash-sub { font-size: 12px; color: var(--text-2); font-weight: 500; margin-top: 3px; }

/* Owner */
.dash-owner { display: grid; grid-template-columns: 1fr; gap: 10px; max-width: 1200px; }
@media (min-width: 900px) {
  .dash-owner {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "hero hero"
      "split mtd"
      "cat trend"
      "cashref cashref";
    gap: 14px;
  }
  .dash-hero { grid-area: hero; }
  .dash-split { grid-area: split; }
  .dash-mtd { grid-area: mtd; }
  .dash-cat { grid-area: cat; }
  .dash-trend { grid-area: trend; }
  .dash-cashref { grid-area: cashref; }
  .dash-hero .dh-vl { font-size: 52px; }
}
@media (min-width: 900px) {
  .dash-cashier { grid-template-columns: 1fr 1fr; grid-template-areas: "kstrip kstrip" "now money" "apts apts"; gap: 14px; max-width: 1200px; }
  .dc-kstrip { grid-area: kstrip; }
  .dc-now, .dc-now.empty { grid-area: now; }
  .dc-money { grid-area: money; }
  .dc-apts { grid-area: apts; }
}
.dash-hero { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 18px 20px; border-top: 4px solid var(--vermilion); }
.dh-lb { font-size: 11.5px; font-weight: 700; color: var(--text-2); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 8px; display: flex; justify-content: space-between; align-items: center; }
.dh-delta { font-size: 11px; padding: 3px 8px; border-radius: 5px; font-weight: 700; text-transform: none; letter-spacing: .01em; }
.dh-delta.up { background: rgba(68,187,164,.14); color: var(--teal); }
.dh-delta.dn { background: rgba(233,79,55,.12); color: var(--vermilion); }
.dh-vl { font-size: 40px; font-weight: 800; color: var(--charcoal); font-variant-numeric: tabular-nums; letter-spacing: -.03em; line-height: 1; }
.dh-vl .k { font-size: 16px; font-weight: 600; color: var(--text-2); margin-left: 2px; }
.dh-sub { font-size: 12px; color: var(--text-2); margin-top: 8px; font-weight: 500; font-variant-numeric: tabular-nums; }
.dash-split { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dsp { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; }
.dsp.cash { border-left: 3px solid var(--teal); }
.dsp.tr { border-left: 3px solid var(--blue); }
.dsp-lb { font-size: 11px; font-weight: 700; color: var(--text-2); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; }
.dsp-pct { float: right; font-size: 11px; color: var(--text-2); font-weight: 700; font-variant-numeric: tabular-nums; }
.dsp-vl { font-size: 22px; font-weight: 800; color: var(--charcoal); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.dsp-vl .k { font-size: 11px; font-weight: 600; color: var(--text-2); margin-left: 2px; }
.dsp.cash .dsp-vl { color: var(--teal); } .dsp.tr .dsp-vl { color: var(--blue); }
.dsp-sub { font-size: 11px; color: var(--text-2); margin-top: 3px; font-variant-numeric: tabular-nums; font-weight: 500; }
.dash-mtd { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; }
.dm-h { font-size: 11px; font-weight: 700; color: var(--text-2); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 8px; }
.dm-vl { font-size: 28px; font-weight: 800; color: var(--charcoal); font-variant-numeric: tabular-nums; letter-spacing: -.02em; line-height: 1; }
.dm-vl .k { font-size: 13px; font-weight: 600; color: var(--text-2); margin-left: 2px; }
.dm-cmp { font-size: 12px; color: var(--text-2); margin-top: 8px; font-weight: 500; font-variant-numeric: tabular-nums; }
.dm-cmp b { font-weight: 700; }
.dm-cmp b.up { color: var(--teal); } .dm-cmp b.dn { color: var(--vermilion); }
.dash-cat { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; }
.dc-h { font-size: 11px; font-weight: 700; color: var(--text-2); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 12px; }
.dc-row { display: grid; grid-template-columns: 60px 1fr 110px; gap: 10px; align-items: center; margin-bottom: 8px; font-size: 12.5px; }
.dc-row:last-child { margin-bottom: 0; }
.dc-nm { font-weight: 700; color: var(--charcoal); display: flex; align-items: center; gap: 6px; }
.dc-d { width: 7px; height: 7px; border-radius: 50%; }
.dc-bar { height: 8px; background: rgba(57,62,65,.06); border-radius: 99px; overflow: hidden; }
.dc-bar > i { display: block; height: 100%; border-radius: 99px; }
.dc-amt { text-align: right; font-weight: 700; color: var(--charcoal); font-variant-numeric: tabular-nums; font-size: 12.5px; }
.dc-p { font-size: 10.5px; color: var(--text-2); font-weight: 500; margin-left: 4px; }
.dash-trend { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; }
.dt-h { font-size: 11px; font-weight: 700; color: var(--text-2); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 12px; display: flex; justify-content: space-between; }
.dt-h > span { color: rgba(57,62,65,.35); font-weight: 500; text-transform: none; letter-spacing: 0; }
.dt-bars { display: grid; grid-template-columns: repeat(7,1fr); gap: 6px; align-items: end; height: 100px; }
.dt-b { display: flex; flex-direction: column; justify-content: end; gap: 1px; align-items: stretch; }
.dt-p1 { background: var(--teal); border-radius: 3px 3px 0 0; }
.dt-p2 { background: var(--blue); border-radius: 0 0 3px 3px; }
.dt-l { font-size: 9.5px; color: var(--text-2); text-align: center; margin-top: 4px; font-weight: 600; line-height: 1.25; }
.dt-l .dt-dnum { display: block; font-size: 8.5px; color: var(--dim2); font-weight: 700; }
.dt-b.today .dt-l { color: var(--charcoal); font-weight: 800; }
.dash-cashref { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.dcr-lb { font-size: 11px; font-weight: 700; color: var(--text-2); text-transform: uppercase; letter-spacing: .05em; }
.dcr-vl { font-size: 20px; font-weight: 800; color: var(--teal); font-variant-numeric: tabular-nums; letter-spacing: -.01em; margin-top: 3px; }
.dcr-vl .k { font-size: 11px; font-weight: 600; color: var(--text-2); }
.dcr-note { font-size: 10.5px; color: var(--text-2); text-align: right; font-weight: 500; font-variant-numeric: tabular-nums; }

/* Cashier */
.dash-cashier { display: grid; grid-template-columns: 1fr; gap: 10px; }
.dc-kstrip { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; }
.dc-kc { background: var(--card); border: 1px solid var(--border); border-radius: 11px; padding: 12px 8px; text-align: center; cursor: pointer; transition: border-color .12s ease; }
.dc-kc:hover { border-color: var(--charcoal); }
.dc-kn { font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--charcoal); letter-spacing: -.01em; line-height: 1; }
.dc-kl { font-size: 10.5px; color: var(--text-2); font-weight: 700; margin-top: 5px; text-transform: uppercase; letter-spacing: .03em; }
.dc-kc.booked { border-top: 3px solid var(--blue); } .dc-kc.booked .dc-kn { color: var(--blue); }
.dc-kc.prog { border-top: 3px solid var(--vermilion); background: rgba(233,79,55,.03); } .dc-kc.prog .dc-kn { color: var(--vermilion); }
.dc-kc.done { border-top: 3px solid var(--teal); } .dc-kc.done .dc-kn { color: var(--teal); }
.dc-kc.cancel { border-top: 3px solid rgba(57,62,65,.35); } .dc-kc.cancel .dc-kn { color: rgba(57,62,65,.35); }

.dc-now { background: linear-gradient(135deg, rgba(233,79,55,.08), transparent); border: 1.5px solid rgba(233,79,55,.32); border-radius: 12px; padding: 14px 16px; display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; cursor: pointer; }
.dc-now.empty { display: block; text-align: center; padding: 18px; color: var(--text-2); font-size: 13px; font-weight: 500; background: rgba(57,62,65,.02); border: 1px dashed var(--border); border-radius: 12px; cursor: default; }
.dcn-av { width: 44px; height: 44px; border-radius: 12px; color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 19px; }
.dcn-lb { font-size: 10px; font-weight: 700; color: var(--vermilion); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 3px; }
.dcn-nm { font-size: 15px; font-weight: 800; color: var(--charcoal); line-height: 1.2; }
.dcn-m { font-size: 11.5px; color: var(--text-2); margin-top: 3px; font-weight: 500; }
.dcn-btn { background: var(--vermilion); color: #fff; font-weight: 700; font-size: 12px; padding: 8px 14px; border-radius: 9px; border: none; cursor: pointer; font-family: inherit; white-space: nowrap; }

.dc-apts { background: var(--card); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.dc-apts-h { padding: 11px 14px; font-size: 11px; font-weight: 700; color: var(--text-2); text-transform: uppercase; letter-spacing: .05em; background: rgba(57,62,65,.03); border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; }
.dc-apts-h > span { color: rgba(57,62,65,.4); font-weight: 500; text-transform: none; letter-spacing: 0; }
.dc-apt { display: grid; grid-template-columns: 56px auto 1fr auto; gap: 10px; align-items: center; padding: 11px 14px; border-bottom: 1px solid var(--border); cursor: pointer; transition: background .12s ease; }
.dc-apt:last-child { border-bottom: none; }
.dc-apt:hover { background: rgba(57,62,65,.02); }
.dca-tm { font-size: 14px; font-weight: 800; color: var(--charcoal); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.dca-av { width: 30px; height: 30px; border-radius: 9px; color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 13px; }
.dca-m { min-width: 0; }
.dca-nm { font-weight: 700; font-size: 13px; color: var(--charcoal); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dca-svc { font-size: 11px; color: var(--text-2); font-weight: 500; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dca-st { font-size: 9.5px; font-weight: 700; padding: 3px 8px; border-radius: 5px; text-transform: uppercase; letter-spacing: .04em; }
.dca-st.b { background: rgba(63,136,197,.12); color: var(--blue); }
.dc-empty { padding: 18px; text-align: center; color: var(--text-2); font-size: 13px; font-weight: 500; }

.dc-money { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.dcm { background: var(--card); border: 1px solid var(--border); border-radius: 11px; padding: 10px 12px; }
.dcm.cash { border-left: 3px solid var(--teal); } .dcm.cash .dcm-v { color: var(--teal); }
.dcm.tr { border-left: 3px solid var(--blue); } .dcm.tr .dcm-v { color: var(--blue); }
.dcm-l { font-size: 10px; font-weight: 700; color: var(--text-2); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 3px; }
.dcm-v { font-size: 17px; font-weight: 800; color: var(--charcoal); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.dcm-v .k { font-size: 10px; font-weight: 600; color: var(--text-2); margin-left: 2px; }
.dcm-s { font-size: 10px; color: var(--text-2); margin-top: 2px; font-weight: 500; font-variant-numeric: tabular-nums; }

/* ============== Customer list v2 ============== */
.cust-table { background: var(--card); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.cust-thead, .cust-trow { display: grid; grid-template-columns: 1fr 90px 100px 110px 100px 28px; gap: 12px; padding: 10px 16px; align-items: center; }
.cust-thead { font-size: 11px; font-weight: 700; color: var(--text-2); text-transform: uppercase; letter-spacing: .06em; background: rgba(57,62,65,.03); border-bottom: 1px solid var(--border); }
.cust-trow { border-bottom: 1px solid var(--border); cursor: pointer; transition: background .12s ease; }
.cust-trow:last-child { border-bottom: none; }
.cust-trow:hover { background: rgba(57,62,65,.03); }
.cust-cli { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cust-av2 { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; font-weight: 800; font-size: 14px; color: #fff; flex-shrink: 0; }
.cust-nm { font-weight: 700; font-size: 13.5px; color: var(--charcoal); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cust-ph { font-size: 11.5px; color: var(--text-2); font-weight: 500; font-variant-numeric: tabular-nums; }
.cust-cnt { display: flex; align-items: center; justify-content: flex-end; gap: 6px; font-weight: 700; font-size: 13px; color: var(--charcoal); font-variant-numeric: tabular-nums; }
.cust-cnt.on { color: var(--teal); }
.cust-cnt .cdot { width: 6px; height: 6px; border-radius: 50%; background: var(--teal); }
.cust-num { font-weight: 700; font-size: 13px; color: var(--charcoal); text-align: right; font-variant-numeric: tabular-nums; }
.cust-num.zero { color: rgba(57,62,65,.35); font-weight: 500; }
.cust-num .k { font-size: 10.5px; color: var(--text-2); font-weight: 600; margin-left: 2px; }
.cust-lv { font-size: 11.5px; color: var(--text-2); text-align: right; font-weight: 500; font-variant-numeric: tabular-nums; }
.cust-lv.old { color: rgba(57,62,65,.35); }
.cust-ind { width: 6px; height: 6px; border-radius: 50%; background: var(--teal); margin-left: auto; }
.cust-ind.dim { background: rgba(57,62,65,.25); }
.tier-pill { font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 5px; text-transform: uppercase; letter-spacing: .03em; display: inline-block; }

/* Mobile customer card */
.cust-card2 { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 12px 14px; background: var(--card); border: 1px solid var(--border); border-radius: 14px; margin-bottom: 8px; cursor: pointer; }
.cust-card2 .r { text-align: right; }
.cust-card2 .r .cust-num { font-size: 13px; }
.cust-card2 .r .cust-lv { font-size: 11px; margin-top: 3px; }

/* ============== Customer detail popup v3 ============== */
#sheet-body.cli-pop { padding: 0; overflow: hidden; max-width: 520px; display: flex; flex-direction: column; max-height: 92vh; }
#sheet-body.cli-pop::before { display: none; }
.cli-pop .cli-hero { flex-shrink: 0; }
.cli-pop .cli-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.cli-pop .cli-foot { flex-shrink: 0; }

/* Mobile: customer page uses FABs instead of header button + inline filter bar */
@media (max-width: 1023px) {
  #screen-customers > .screen-head #cust-add-btn { display: none; }
  #screen-customers > #cust-filter { display: none; }
}

/* Prevent tags/pills/status/small buttons from wrapping to 2 rows inside their chip */
.tier-pill, .tag, .pill, .chip, .cam-tag, .rbadge, .paid-badge, .svc-tpill,
.status, .ad-tag, .k-tag, .sr-state, .mcell, .pdb-go, .rep-exp,
.btn.ghost, .btn.primary, .cli-fbtn, .pay-x, .mh-x {
  white-space: nowrap;
}
.tier-pill, .tag, .pill, .chip, .rbadge, .paid-badge, .svc-tpill { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.cli-hero { padding: 18px 20px; background: linear-gradient(135deg, rgba(233,79,55,.08), rgba(233,79,55,.02)); display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; border-bottom: 1px solid var(--border); }
.cli-av { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; font-weight: 800; font-size: 22px; color: #fff; }
.cli-id .n { font-size: 17px; font-weight: 800; color: var(--charcoal); letter-spacing: -.01em; line-height: 1.2; }
.cli-id .row2 { display: flex; align-items: center; gap: 8px; margin-top: 5px; flex-wrap: wrap; }
.cli-id .ph { font-size: 12px; color: var(--text-2); font-weight: 600; font-variant-numeric: tabular-nums; }
.cli-close { width: 34px; height: 34px; border-radius: 10px; background: transparent; border: none; color: var(--text-2); cursor: pointer; font-size: 17px; display: grid; place-items: center; }
.cli-close:hover { background: rgba(57,62,65,.06); color: var(--charcoal); }
.cli-kpi { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; padding: 14px 20px; background: rgba(57,62,65,.02); }
.cli-k { padding: 10px 12px; background: var(--card); border: 1px solid var(--border); border-radius: 11px; }
.cli-k .lb { font-size: 10px; font-weight: 700; color: var(--text-2); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 4px; }
.cli-k .vl { font-size: 17px; font-weight: 800; color: var(--charcoal); font-variant-numeric: tabular-nums; letter-spacing: -.01em; line-height: 1.1; }
.cli-k .vl .u { font-size: 10.5px; font-weight: 600; color: var(--text-2); margin-left: 2px; }
.cli-k .sub { font-size: 10.5px; color: var(--text-2); margin-top: 3px; font-weight: 500; }
.cli-k.a .vl { color: var(--vermilion); } .cli-k.b .vl { color: var(--teal); } .cli-k.c .vl { color: var(--charcoal); }
.cli-sec { padding: 12px 20px 4px; }
.cli-sec-h { font-size: 11px; font-weight: 700; color: var(--text-2); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 8px; display: flex; align-items: center; justify-content: space-between; }
.cli-sec-h .cnt2 { font-size: 10.5px; color: rgba(57,62,65,.4); text-transform: none; letter-spacing: 0; font-weight: 600; }
.cli-crs { padding: 12px; border: 1px solid var(--border); border-radius: 11px; background: var(--card); margin-bottom: 8px; }
.cli-crs.act { border-color: rgba(68,187,164,.35); background: linear-gradient(180deg, rgba(68,187,164,.05), transparent); }
.cli-crs.exp { opacity: .55; }
.cli-crs-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.cli-crs-nm { font-size: 12.5px; font-weight: 700; color: var(--charcoal); flex: 1; }
.cli-crs-tag { font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 5px; text-transform: uppercase; letter-spacing: .03em; }
.cli-bar-row { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.cli-bar { flex: 1; height: 6px; background: rgba(57,62,65,.08); border-radius: 99px; overflow: hidden; }
.cli-bar > i { display: block; height: 100%; background: var(--teal); border-radius: 99px; }
.cli-prog-txt { font-size: 11px; color: var(--teal); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cli-crs-meta { font-size: 11.5px; color: var(--text-2); font-weight: 600; font-variant-numeric: tabular-nums; }
.cli-crs-meta .expw { color: var(--vermilion); margin-left: 6px; font-weight: 700; }
.cli-hist { padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--card); margin-bottom: 6px; display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; }
.cli-h-ico { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; font-size: 12px; flex-shrink: 0; }
.cli-h-nm { font-size: 12.5px; font-weight: 700; color: var(--charcoal); }
.cli-h-meta { font-size: 11px; color: var(--text-2); margin-top: 1px; font-weight: 500; font-variant-numeric: tabular-nums; }
.cli-h-amt { font-weight: 700; font-size: 13px; color: var(--charcoal); font-variant-numeric: tabular-nums; text-align: right; }
.cli-h-amt .k { font-size: 10.5px; color: var(--text-2); font-weight: 600; }
.cli-foot { padding: 12px 20px calc(12px + var(--safe-bottom)); display: flex; gap: 8px; border-top: 1px solid var(--border); background: rgba(57,62,65,.02); }
.cli-fbtn { flex: 1; font-size: 13px; font-weight: 700; padding: 11px 14px; border-radius: 10px; cursor: pointer; transition: .12s; font-family: inherit; }
.cli-fbtn.g { background: var(--card); border: 1px solid var(--border); color: var(--text-2); }
.cli-fbtn.g:hover { border-color: var(--charcoal); color: var(--charcoal); }
.cli-fbtn.p { background: var(--vermilion); color: #fff; border: none; flex: 1.5; }
.cli-fbtn.d { background: var(--card); border: 1px solid rgba(233,79,55,.35); color: var(--vermilion); }
@media (max-width: 720px) {
  .cust-thead, .cust-trow { grid-template-columns: 1fr 70px 80px 90px 24px; }
  .cust-thead .col-cnt, .cust-trow .cust-cnt { display: none; }
}

/* ============== Onboarding tour (spotlight coach-marks) ============== */
.tour-ov { position: fixed; inset: 0; z-index: 9997; pointer-events: auto; }
.tour-ov.dim { background: rgba(10,16,26,.6); }
.tour-halo { position: fixed; border: 2px solid var(--teal); border-radius: 12px; box-shadow: 0 0 0 4000px rgba(10,16,26,.6); z-index: 9998; pointer-events: none; transition: all .3s cubic-bezier(.4,0,.2,1); }
.tour-tip { position: fixed; width: 260px; max-width: calc(100vw - 24px); background: #fff; color: var(--charcoal); border-radius: 14px; padding: 16px 17px; box-shadow: 0 18px 44px rgba(0,0,0,.4); z-index: 9999; font-family: 'Noto Sans Lao', sans-serif; transition: left .3s, top .3s; }
.tour-tip .tt-step { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: .1em; color: var(--text-2); margin-bottom: 6px; }
.tour-tip .tt-title { font-size: 15px; font-weight: 800; margin-bottom: 6px; }
.tour-tip .tt-body { font-size: 12.5px; color: #55607a; line-height: 1.55; }
.tour-tip .tt-link { display: block; font-size: 11.5px; color: var(--teal); background: rgba(68,187,164,.09); border: 1px solid rgba(68,187,164,.22); border-radius: 8px; padding: 7px 9px; margin-top: 10px; line-height: 1.45; }
.tour-tip .tt-acts { display: flex; align-items: center; justify-content: space-between; margin-top: 13px; gap: 10px; }
.tour-tip .tt-skip { font-size: 11.5px; color: var(--text-2); cursor: pointer; background: none; border: 0; font-family: inherit; }
.tour-tip .tt-nav { display: flex; gap: 7px; }
.tour-tip .tt-back { font-size: 12px; font-weight: 700; color: var(--text-2); background: #f0f2f5; border: 0; border-radius: 8px; padding: 8px 12px; cursor: pointer; font-family: inherit; }
.tour-tip .tt-next { font-size: 12px; font-weight: 700; color: #fff; background: var(--vermilion); border: 0; border-radius: 8px; padding: 8px 15px; cursor: pointer; font-family: inherit; }
.tour-tip .tt-dots { display: flex; gap: 5px; margin-top: 11px; justify-content: center; }
.tour-tip .tt-dots i { width: 6px; height: 6px; border-radius: 50%; background: #d7dce4; }
.tour-tip .tt-dots i.on { background: var(--vermilion); width: 16px; border-radius: 3px; }

/* onboarding overview modal */
.onb-back { position: fixed; inset: 0; z-index: 9996; background: rgba(10,16,26,.7); display: grid; place-items: center; padding: 18px; }
.onb-card { background: #fff; color: var(--charcoal); width: 460px; max-width: 100%; max-height: 90vh; overflow-y: auto; border-radius: 18px; padding: 24px; box-shadow: 0 24px 60px rgba(0,0,0,.5); font-family: 'Noto Sans Lao', sans-serif; }
.onb-card h2 { font-size: 20px; font-weight: 800; margin-bottom: 4px; }
.onb-card .sub { font-size: 12.5px; color: var(--text-2); margin-bottom: 16px; }
.onb-flow { display: flex; flex-direction: column; gap: 9px; margin-bottom: 18px; }
.onb-lane { border: 1px solid var(--border); border-radius: 12px; padding: 12px 13px; background: #fafbfc; }
.onb-lane .lh { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); margin-bottom: 7px; }
.onb-lane .lr { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 12.5px; font-weight: 600; }
.onb-chip { display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; border-radius: 8px; background: rgba(63,136,197,.1); color: var(--blue); }
.onb-chip.g { background: rgba(68,187,164,.12); color: var(--teal); }
.onb-chip.o { background: rgba(233,79,55,.1); color: var(--vermilion); }
.onb-chip.p { background: rgba(127,90,240,.1); color: var(--purple); }
.onb-arw { color: var(--dim2); font-weight: 700; }
.onb-card .onb-btns { display: flex; gap: 9px; }
.onb-card .onb-btns button { flex: 1; font-family: inherit; font-size: 13px; font-weight: 700; padding: 11px; border-radius: 10px; cursor: pointer; border: 1px solid var(--border); background: #fff; color: var(--text-2); }
.onb-card .onb-btns button.pri { background: var(--vermilion); color: #fff; border-color: var(--vermilion); }
@media (prefers-reduced-motion: reduce) { .tour-halo, .tour-tip { transition: none; } }