/* SWI 智能营运工作台 — design system.
   Brand (swicos.com.my): navy #1F2B43, gold #BE9663, cream #FAF7F6, aux blue #6B99C3.
   Navy/obsidian = navigation & brand; pearl white = work area; gold = thin details only; ice blue = AI only. */
:root {
  --obsidian: #0E1524; --navy: #1F2B43; --navy-2: #2A3956; --navy-3: #3A4B6E;
  --nav-bg: #141C2E; --nav-ink: #E7EBF3; --nav-muted: #95A0B6; --nav-line: rgba(255, 255, 255, .08); --nav-hover: rgba(255, 255, 255, .06);
  --bg: #F6F4F1; --panel: #FFFFFF; --panel-2: #FBFAF8; --ink: #151A25; --ink-2: #3A4254; --muted: #687083; --line: #E4E0DA; --line-2: #EFECE8; --soft: #F3F0EB;
  --brand: #1F2B43; --brand-ink: #FFFFFF; --brand-soft: #E9EDF4; --brand-hover: #2A3956;
  --gold: #A67C48; --gold-2: #BE9663; --gold-line: #DCC7A8; --gold-soft: #F7F0E6; --gold-ink: #6E4F27;
  --ice: #2C8DBA; --ice-2: #7CC8E8; --ice-soft: #EAF6FB; --ice-line: #BFE3F2; --ice-glow: rgba(124, 200, 232, .32);
  --ok: #1D7A4B; --ok-soft: #E6F4EC; --warn: #955A00; --warn-soft: #FFF3DC; --bad: #B42318; --bad-soft: #FDECEA; --info: #2D5E9C; --info-soft: #E7EFFA;
  --slot: #F8DDBE; --extra: #EBA94F; --off: #ECEAE6; --cut: #F4F2EE;
  --r-lg: 14px; --r: 10px; --r-sm: 8px;
  --shadow-1: 0 1px 2px rgba(16, 24, 40, .05); --shadow-2: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 24px rgba(16, 24, 40, .06); --shadow-3: 0 20px 50px rgba(10, 16, 30, .22);
  --ease: cubic-bezier(.2, .7, .2, 1); --t1: .14s; --t2: .22s;
  --font: "Poppins", "Segoe UI", "Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC", "Noto Sans SC", system-ui, sans-serif;
  --mono: "Cascadia Mono", "Consolas", "SFMono-Regular", monospace;
  font-family: var(--font); color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #0D1320; --panel: #141C2C; --panel-2: #172033; --ink: #E8ECF4; --ink-2: #C3CADA; --muted: #9AA3B7; --line: #263048; --line-2: #1E2739; --soft: #1A2336;
  --brand: #C9D5EE; --brand-ink: #0E1524; --brand-soft: #1E2A42; --brand-hover: #DCE4F5; --nav-bg: #0A101B;
  --gold: #D3B07F; --gold-soft: #2A2216; --gold-line: #5A4628; --gold-ink: #E9D3B4; --ice: #7CC8E8; --ice-soft: #12293A; --ice-line: #1F4A63;
  --ok: #6FCF97; --ok-soft: #12291D; --warn: #F2B65A; --warn-soft: #2E2412; --bad: #F28B82; --bad-soft: #351816; --info: #8DB6EA; --info-soft: #15233A;
  --slot: #4A3718; --extra: #8A621F; --off: #1B2232; --cut: #172031; color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0D1320; --panel: #141C2C; --panel-2: #172033; --ink: #E8ECF4; --ink-2: #C3CADA; --muted: #9AA3B7; --line: #263048; --line-2: #1E2739; --soft: #1A2336;
    --brand: #C9D5EE; --brand-ink: #0E1524; --brand-soft: #1E2A42; --brand-hover: #DCE4F5; --nav-bg: #0A101B;
    --gold: #D3B07F; --gold-soft: #2A2216; --gold-line: #5A4628; --gold-ink: #E9D3B4; --ice: #7CC8E8; --ice-soft: #12293A; --ice-line: #1F4A63;
    --ok: #6FCF97; --ok-soft: #12291D; --warn: #F2B65A; --warn-soft: #2E2412; --bad: #F28B82; --bad-soft: #351816; --info: #8DB6EA; --info-soft: #15233A;
    --slot: #4A3718; --extra: #8A621F; --off: #1B2232; --cut: #172031; color-scheme: dark;
  }
}
:root[data-motion="reduce"] *, :root[data-motion="reduce"] *::before, :root[data-motion="reduce"] *::after { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) { :root:not([data-motion="full"]) *, :root:not([data-motion="full"]) *::before, :root:not([data-motion="full"]) *::after { animation: none !important; transition: none !important; } }

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); font-size: 14.5px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
a { color: var(--info); text-decoration: none; } a:hover { text-decoration: underline; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 2px; }
.ic { flex: none; vertical-align: -3px; }
.num, td.num, th.num, .kpi b, .money { font-variant-numeric: tabular-nums; }
.boot { min-height: 100vh; display: grid; place-items: center; color: var(--muted); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- shell ---------- */
.shell { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100vh; }
.shell > div { min-width: 0; display: flex; flex-direction: column; }
.side { background: var(--nav-bg); color: var(--nav-ink); position: sticky; top: 0; height: 100vh; overflow: auto; display: flex; flex-direction: column; padding: 18px 12px 14px;
  background-image: radial-gradient(120% 50% at 0% 0%, rgba(124, 200, 232, .08), transparent 60%), radial-gradient(80% 40% at 100% 100%, rgba(190, 150, 99, .10), transparent 60%); }
.brandmark { display: flex; align-items: center; gap: 10px; padding: 2px 8px 14px; }
.brandmark img { height: 38px; width: auto; display: block; }
.brandmark .t { font-size: 11px; letter-spacing: .14em; color: var(--nav-muted); text-transform: uppercase; line-height: 1.25; }
.brandmark .t b { display: block; color: var(--gold-line); font-weight: 600; letter-spacing: .06em; font-size: 12.5px; text-transform: none; }
.ctx { margin: 2px 4px 12px; padding: 10px 12px; border: 1px solid var(--nav-line); border-radius: var(--r); background: rgba(255, 255, 255, .03); font-size: 12.5px; }
.ctx .nm { font-weight: 600; font-size: 14px; color: #fff; display: flex; align-items: center; gap: 6px; }
.ctx .ln { color: var(--nav-muted); margin-top: 2px; }
.ctx .chips { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 6px; }
.ctx .chip { border: 1px solid var(--nav-line); color: var(--nav-ink); border-radius: 99px; padding: 0 7px; font-size: 11px; }
.ctx .chip.gold { border-color: rgba(190, 150, 99, .45); color: var(--gold-line); }
.side nav { display: grid; gap: 1px; }
.side nav .grp { font-size: 10.5px; letter-spacing: .14em; color: var(--nav-muted); text-transform: uppercase; padding: 12px 10px 4px; opacity: .8; }
.side nav a { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: var(--r-sm); color: var(--nav-ink); opacity: .86; position: relative; transition: background var(--t1) var(--ease), opacity var(--t1); }
.side nav a:hover { background: var(--nav-hover); opacity: 1; text-decoration: none; }
.side nav a.on { background: rgba(190, 150, 99, .13); opacity: 1; color: #fff; }
.side nav a.on::before { content: ''; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--gold-2); }
.side nav a.on .ic { color: var(--gold-line); }
.side nav a .n { margin-left: auto; background: rgba(255, 255, 255, .1); color: #fff; border-radius: 99px; font-size: 11px; padding: 0 7px; min-width: 20px; text-align: center; }
.side nav a .n.hot { background: #C0473A; }
.side .foot { margin-top: auto; padding: 12px 4px 0; border-top: 1px solid var(--nav-line); display: flex; flex-wrap: wrap; gap: 6px; }
.side .foot .btn { background: transparent; border-color: var(--nav-line); color: var(--nav-ink); }
.side .foot .btn:hover { background: var(--nav-hover); border-color: rgba(255, 255, 255, .2); }

.topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 12px; padding: 10px 24px; min-height: 60px;
  background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line-2); }
.topbar .ttl { display: flex; flex-direction: column; min-width: 0; }
.topbar .ttl b { font-size: 16px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar .ttl span { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar .menu { display: none; }
.searchbtn { margin-left: auto; display: flex; align-items: center; gap: 8px; min-width: 260px; padding: 7px 12px; border: 1px solid var(--line); border-radius: 99px; background: var(--panel); color: var(--muted); cursor: pointer; transition: border-color var(--t1); }
.searchbtn:hover { border-color: var(--gold-line); }
.searchbtn kbd { margin-left: auto; font-family: var(--mono); font-size: 11px; border: 1px solid var(--line); border-radius: 5px; padding: 0 5px; color: var(--muted); background: var(--panel-2); }
.aibtn { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 99px; border: 1px solid var(--ice-line); color: var(--ice); background: var(--ice-soft); cursor: pointer; font-weight: 600; white-space: nowrap;
  transition: box-shadow var(--t2) var(--ease), transform var(--t1); }
.aibtn:hover { box-shadow: 0 0 0 4px var(--ice-glow); }
.aibtn .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); }
.aibtn .dot.on { background: #28B47A; box-shadow: 0 0 0 3px rgba(40, 180, 122, .2); }
.main { padding: 22px 24px 72px; min-width: 0; flex: 1; animation: pagein var(--t2) var(--ease); }
@keyframes pagein { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (max-width: 900px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .side { position: fixed; z-index: 40; left: 0; top: 0; width: 272px; transform: translateX(-102%); transition: transform var(--t2) var(--ease); box-shadow: var(--shadow-3); }
  .side.open { transform: none; }
  .scrim { position: fixed; inset: 0; background: rgba(8, 12, 22, .45); z-index: 35; }
  .topbar { padding: 8px 14px; gap: 8px; min-height: 54px; }
  .topbar .menu { display: inline-flex; }
  .searchbtn { min-width: 0; padding: 7px 10px; }
  .searchbtn .lbl, .searchbtn kbd { display: none; }
  .aibtn .lbl { display: none; }
  .main { padding: 16px 14px 90px; }
}

/* ---------- type & page ---------- */
h1 { font-size: 22px; font-weight: 600; margin: 0; letter-spacing: -.01em; }
h2 { font-size: 16px; font-weight: 600; margin: 0 0 10px; }
h3 { font-size: 13px; font-weight: 600; margin: 16px 0 8px; color: var(--ink-2); letter-spacing: .02em; }
.muted { color: var(--muted); } .small { font-size: 12.5px; } .tiny { font-size: 11.5px; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .grow { flex: 1; min-width: 0; }
.stack { display: grid; gap: 12px; }
.page-head { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.page-head .t { flex: 1; min-width: 220px; }
.page-head .eyebrow { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); font-weight: 600; margin-bottom: 4px; display: flex; gap: 6px; align-items: center; }
.page-head .eyebrow::before { content: ''; width: 18px; height: 1px; background: var(--gold-line); }
.page-head .sub { color: var(--muted); font-size: 13px; margin-top: 4px; }
.page-head .acts { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ---------- surfaces ---------- */
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px; box-shadow: var(--shadow-1); margin-bottom: 14px; min-width: 0; }
.card-head { display: flex; align-items: center; gap: 10px; margin: -2px 0 12px; }
.card-head h2, .card-head h3 { margin: 0; }
.card-head .grow + * { margin-left: auto; }
.card.flat { box-shadow: none; }
.card.tight { padding: 12px; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 14px; }
.kpi { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px; position: relative; min-width: 0; }
.kpi span { font-size: 12px; color: var(--muted); display: block; }
.kpi b { display: block; font-size: 21px; font-weight: 600; letter-spacing: -.01em; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi .foot { font-size: 11.5px; color: var(--muted); margin-top: 4px; }
.kpi.link { cursor: pointer; transition: border-color var(--t1), box-shadow var(--t1); }
.kpi.link:hover { border-color: var(--gold-line); box-shadow: var(--shadow-2); }
.kpi.bad b { color: var(--bad); } .kpi.ok b { color: var(--ok); } .kpi.warn b { color: var(--warn); }
.kpi.gap b { color: var(--muted); font-size: 15px; font-weight: 500; }
.basis { font-size: 11.5px; color: var(--muted); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.basis .ic { color: var(--gold); }

/* ---------- controls ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; text-decoration: none; border: 1px solid var(--line); background: var(--panel); padding: 7px 13px; border-radius: var(--r-sm); cursor: pointer; white-space: nowrap; font-weight: 500; color: var(--ink);
  transition: background var(--t1), border-color var(--t1), box-shadow var(--t1), transform var(--t1); }
.btn:hover { border-color: var(--navy-3); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); }
.btn.primary:hover { background: var(--brand-hover); }
.btn.gold { border-color: var(--gold-line); color: var(--gold-ink); background: var(--gold-soft); }
.btn.ai { border-color: var(--ice-line); color: var(--ice); background: var(--ice-soft); }
.btn.ghost { border-color: transparent; background: transparent; }
.btn.ghost:hover { background: var(--soft); }
.btn.danger { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 45%, var(--line)); }
.btn.small { padding: 4px 9px; font-size: 12.5px; }
.btn.icon { padding: 6px; }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.btn.busy { position: relative; color: transparent !important; }
.btn.busy::after { content: ''; position: absolute; width: 14px; height: 14px; border: 2px solid currentColor; border-color: var(--muted) transparent var(--muted) transparent; border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
input, select, textarea { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 7px 10px; background: var(--panel); min-width: 0; transition: border-color var(--t1), box-shadow var(--t1); }
input:hover, select:hover, textarea:hover { border-color: color-mix(in srgb, var(--navy-3) 40%, var(--line)); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--navy-3); box-shadow: 0 0 0 3px var(--brand-soft); }
input[type="checkbox"] { accent-color: var(--navy); width: 16px; height: 16px; }
label.f { display: grid; gap: 4px; font-size: 12.5px; color: var(--muted); font-weight: 500; }
label.f > input, label.f > select, label.f > textarea, label.f > div > input { color: var(--ink); font-size: 14.5px; font-weight: 400; }
.form { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: 14px; overflow-x: auto; scrollbar-width: thin; }
.tabs button { border: 0; background: none; padding: 9px 13px; cursor: pointer; border-bottom: 2px solid transparent; color: var(--muted); white-space: nowrap; font-weight: 500; transition: color var(--t1), border-color var(--t1); }
.tabs button:hover { color: var(--ink); }
.tabs button.on { color: var(--ink); border-color: var(--gold-2); }
.seg { display: inline-flex; background: var(--soft); border-radius: 99px; padding: 3px; gap: 2px; flex-wrap: wrap; }
.seg button { border: 0; background: transparent; padding: 5px 12px; border-radius: 99px; cursor: pointer; color: var(--muted); font-weight: 500; white-space: nowrap; }
.seg button.on { background: var(--panel); color: var(--ink); box-shadow: var(--shadow-1); }

/* ---------- tables ---------- */
.tbl-wrap { overflow: auto; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); max-width: 100%; }
table { border-collapse: collapse; width: 100%; font-size: 13.5px; }
th, td { padding: 8px 11px; border-bottom: 1px solid var(--line-2); text-align: left; vertical-align: top; }
th { background: var(--panel-2); font-weight: 600; font-size: 12px; color: var(--ink-2); position: sticky; top: 0; z-index: 1; white-space: nowrap; letter-spacing: .02em; }
tbody tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; white-space: nowrap; }
tr.void td { color: var(--muted); text-decoration: line-through; }
tr.click { cursor: pointer; } tr.click:hover td { background: var(--soft); }

/* ---------- tags, alerts, states ---------- */
.tag { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 99px; font-size: 11.5px; background: var(--soft); color: var(--ink-2); white-space: nowrap; font-weight: 500; border: 1px solid transparent; }
.tag.ok { background: var(--ok-soft); color: var(--ok); } .tag.warn { background: var(--warn-soft); color: var(--warn); }
.tag.bad { background: var(--bad-soft); color: var(--bad); } .tag.info { background: var(--info-soft); color: var(--info); }
.tag.brand { background: var(--brand-soft); color: var(--brand); } .tag.gold { background: var(--gold-soft); color: var(--gold-ink); border-color: var(--gold-line); }
.tag.ice { background: var(--ice-soft); color: var(--ice); border-color: var(--ice-line); }
.alert { padding: 10px 12px; border-radius: var(--r-sm); margin: 8px 0; border: 1px solid; display: block; font-size: 13.5px; }
.alert.warn { background: var(--warn-soft); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 30%, transparent); }
.alert.bad { background: var(--bad-soft); color: var(--bad); border-color: color-mix(in srgb, var(--bad) 30%, transparent); }
.alert.ok { background: var(--ok-soft); color: var(--ok); border-color: color-mix(in srgb, var(--ok) 30%, transparent); }
.alert.info { background: var(--info-soft); color: var(--info); border-color: color-mix(in srgb, var(--info) 25%, transparent); }
.empty { display: grid; justify-items: center; gap: 6px; padding: 26px 12px; color: var(--muted); text-align: center; }
.empty .ic { color: var(--gold-line); }
.err-state { border: 1px solid color-mix(in srgb, var(--bad) 30%, transparent); background: var(--bad-soft); color: var(--bad); border-radius: var(--r); padding: 14px; }
.skel { background: linear-gradient(90deg, var(--soft) 0%, var(--line-2) 40%, var(--soft) 80%); background-size: 300% 100%; animation: shimmer 1.3s ease-in-out infinite; border-radius: 6px; min-height: 14px; }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.test-badge { background: var(--warn-soft); color: var(--warn); font-size: 11px; padding: 1px 8px; border-radius: 99px; font-weight: 600; }

/* ---------- work items (todos) ---------- */
.work { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: start; padding: 12px 2px; border-bottom: 1px solid var(--line-2); }
.work:last-child { border-bottom: 0; }
.work .bullet { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: var(--soft); color: var(--ink-2); }
.work.high .bullet { background: var(--bad-soft); color: var(--bad); }
.work .t { font-weight: 600; }
.work .why { font-size: 12.5px; color: var(--muted); margin-top: 2px; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.work .acts { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 640px) { .work { grid-template-columns: auto 1fr; } .work .acts { grid-column: 1 / -1; justify-content: flex-start; } }

/* ---------- appointment grid ---------- */
.appt-grid { overflow: auto; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); max-height: 72vh; }
.appt-grid table { min-width: 720px; table-layout: fixed; }
.appt-grid th { font-size: 12px; text-align: center; }
.appt-grid th.time, .appt-grid td.time { width: 60px; text-align: center; color: var(--muted); font-size: 12px; position: sticky; left: 0; background: var(--panel); z-index: 2; }
.appt-grid td { height: 34px; padding: 2px; border-left: 1px solid var(--line-2); font-size: 12px; }
.appt-grid td.on { background: var(--slot); cursor: pointer; }
.appt-grid td.on:hover { box-shadow: inset 0 0 0 2px var(--gold-line); }
.appt-grid td.noslot { background: var(--panel); }
.appt-lists { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; margin-top: 12px; }
.appt-lists .card { margin: 0; }
.appt-lists .appt { display: inline-block; margin: 3px 6px 3px 0; }
.wait-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line-2); flex-wrap: wrap; }
.wait-row:last-child { border-bottom: 0; }
.appt-grid td.cut { background: var(--cut); color: var(--muted); text-align: center; }
.appt-grid td.off { background: var(--off); color: var(--muted); text-align: center; }
.appt-grid td.extra { background: var(--extra); cursor: pointer; }
.appt-grid td.closed { background: var(--off); }
.appt { background: var(--panel); border-left: 3px solid var(--navy-3); border-radius: 5px; padding: 1px 6px; cursor: pointer; line-height: 1.25; overflow: hidden; font-size: 11.5px; max-height: 30px; white-space: nowrap; text-overflow: ellipsis; box-shadow: var(--shadow-1); }
/* booking colours (POS SYSTEM.pdf): cancelled / no-show = red text, came (arrived, in service, done) = teal text */
.appt.cancelled, .appt.no_show { border-color: var(--appt-red); color: var(--appt-red); text-decoration: line-through; }
.appt.arrived, .appt.in_service, .appt.done { border-color: var(--appt-teal); color: var(--appt-teal); }
.appt.done { opacity: .85; }
.appt.conflict { border-color: var(--bad); background: var(--bad-soft); }
.legend { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -2px; margin-right: 4px; border: 1px solid var(--line); }

/* ---------- roster ---------- */
/* dates go down, names go across (like the Staff Offday sheet); header row and date column stay in view */
.roster { max-height: calc(100vh - 250px); min-height: 320px; }
.roster table { width: auto; border-collapse: separate; border-spacing: 0; }
.roster th, .roster td { padding: 3px 4px; border-bottom: 1px solid var(--line-2); }
.roster thead th { top: 0; z-index: 2; text-align: center; vertical-align: bottom; min-width: 58px; font-size: 12px; line-height: 1.25; white-space: normal; }
.roster thead th .br { color: var(--gold-ink); font-weight: 700; letter-spacing: .04em; }
.roster th.day { position: sticky; left: 0; z-index: 1; background: var(--panel-2); text-align: left; white-space: nowrap; min-width: 62px; padding: 3px 8px; font-weight: 500; }
.roster th.day.corner { z-index: 3; top: 0; }
.roster th.grp, .roster td.grp { border-left: 2px solid var(--gold-line); }
.roster td input { width: 60px; padding: 3px 2px; text-align: center; font-size: 12.5px; text-transform: uppercase; }
.roster td input:disabled { background: transparent; border-color: transparent; color: var(--ink); opacity: 1; }
.roster tr.we td, .roster tr.we th.day { background: var(--soft); }
.roster tr.today th.day { box-shadow: inset 3px 0 0 var(--gold); }
.roster tbody tr:hover td { background: var(--gold-soft); }
.roster td input.changed { border-color: var(--gold-2); background: var(--gold-soft); }
@media (max-width: 700px) { .roster { max-height: calc(100vh - 300px); } .roster td input { width: 46px; } .roster thead th { min-width: 50px; } }

/* ---------- modal, toast, palette ---------- */
.modal-bg { position: fixed; inset: 0; background: rgba(8, 12, 22, .48); display: grid; place-items: center; z-index: 60; padding: 16px; animation: fadein var(--t2) var(--ease); }
.modal { background: var(--panel); border-radius: 16px; width: min(760px, 100%); max-height: 92vh; overflow: auto; padding: 20px; box-shadow: var(--shadow-3); border: 1px solid var(--line); animation: popin var(--t2) var(--ease); }
.modal .mh { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.modal .mh h2 { margin: 0; flex: 1; }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
@keyframes popin { from { opacity: 0; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: none; } }
#toast { position: fixed; bottom: 20px; right: 20px; z-index: 80; display: grid; gap: 8px; justify-items: end; }
#toast div { background: var(--obsidian); color: #F2F4F8; padding: 10px 14px; border-radius: 10px; box-shadow: var(--shadow-3); max-width: min(420px, 90vw); display: flex; gap: 8px; align-items: flex-start; animation: popin var(--t2) var(--ease); border-left: 3px solid var(--gold-2); }
#toast div.err { background: #3A1512; border-left-color: #F28B82; }
@media (max-width: 640px) { #toast { left: 12px; right: 12px; bottom: 76px; justify-items: stretch; } }
.palette { width: min(640px, 100%); padding: 0; overflow: hidden; align-self: start; margin-top: 10vh; }
.palette .pi { display: flex; gap: 10px; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.palette .pi input { border: 0; box-shadow: none; flex: 1; font-size: 16px; padding: 4px 0; background: transparent; }
.palette .res { max-height: 56vh; overflow: auto; padding: 6px; }
.palette .sec { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding: 10px 10px 4px; }
.palette .it { display: flex; gap: 10px; align-items: center; padding: 9px 10px; border-radius: 8px; cursor: pointer; }
.palette .it:hover, .palette .it.sel { background: var(--soft); }
.palette .it .s { color: var(--muted); font-size: 12px; margin-left: auto; text-align: right; }

/* ---------- POS ---------- */
.pos3 { display: grid; grid-template-columns: minmax(280px, 330px) minmax(0, 1fr) minmax(320px, 370px); gap: 14px; align-items: start; }
.pos3 > div { min-width: 0; }
.pos3 .sticky { position: sticky; top: 76px; }
@media (max-width: 1280px) { .pos3 { grid-template-columns: minmax(0, 1fr) minmax(320px, 360px); } .pos3 .col-cust { grid-column: 1 / -1; } }
@media (max-width: 900px) { .pos3 { grid-template-columns: minmax(0, 1fr); } .pos3 .sticky { position: static; } }
.steps { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.steps .st { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); padding: 4px 10px; border-radius: 99px; border: 1px solid var(--line); background: var(--panel); }
.steps .st.done { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 35%, var(--line)); }
.steps .st.now { color: var(--ink); border-color: var(--gold-line); background: var(--gold-soft); }
.cats { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.cats button { border: 1px solid var(--line); background: var(--panel); border-radius: 99px; padding: 5px 11px; cursor: pointer; font-size: 12.5px; color: var(--ink-2); }
.cats button.on { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.cat-hint { font-size: 12px; color: var(--muted); margin: -4px 0 10px; }
.results { display: grid; gap: 6px; max-height: 420px; overflow: auto; padding-right: 2px; }
.result { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; padding: 9px 11px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel); cursor: pointer; text-align: left; transition: border-color var(--t1), box-shadow var(--t1); }
.result:hover { border-color: var(--gold-line); box-shadow: var(--shadow-1); }
.result .nm { font-weight: 600; } .result .meta { font-size: 12px; color: var(--muted); } .result .pr { font-weight: 600; text-align: right; }
.line { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 12px 0; border-bottom: 1px dashed var(--line); }
.line:last-child { border-bottom: 0; }
.line .tot { text-align: right; font-weight: 600; }
.sum { display: flex; justify-content: space-between; padding: 4px 0; } .sum.big { font-size: 20px; font-weight: 600; padding: 8px 0; border-top: 1px solid var(--line); margin-top: 4px; }
.ent { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; padding: 8px 10px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--panel-2); margin-bottom: 6px; font-size: 13px; }
.ent .from { font-size: 11.5px; color: var(--muted); }
.ent .rem { font-weight: 600; text-align: right; }
.check { display: grid; grid-template-columns: auto 1fr; gap: 8px; padding: 7px 0; font-size: 13px; border-bottom: 1px solid var(--line-2); }
.check:last-child { border: 0; }
.check .ic { margin-top: 2px; }
.check.ok .ic { color: var(--ok); } .check.warn .ic { color: var(--warn); } .check.bad .ic { color: var(--bad); } .check.info .ic { color: var(--info); }
.check .why { color: var(--muted); font-size: 12px; }
.paybar { display: none; }
@media (max-width: 900px) {
  .paybar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; background: var(--panel); border-top: 1px solid var(--line); padding: 10px 14px; gap: 10px; align-items: center; box-shadow: 0 -8px 24px rgba(16, 24, 40, .08); }
  .paybar b { font-size: 17px; }
}
.search-results { border: 1px solid var(--line); border-radius: var(--r-sm); max-height: 280px; overflow: auto; background: var(--panel); box-shadow: var(--shadow-2); margin-top: 4px; }
.search-results div { padding: 8px 11px; cursor: pointer; border-bottom: 1px solid var(--line-2); }
.search-results div:hover { background: var(--soft); }
pre.receipt { background: #fff; color: #111; padding: 12px; border-radius: 6px; font-size: 12px; max-width: 420px; overflow: auto; border: 1px solid var(--line); }

/* ---------- customer profile ---------- */
.profile-head { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; padding: 18px; border-radius: var(--r-lg); margin-bottom: 14px; color: #EEF1F7;
  background: linear-gradient(120deg, #172036 0%, #1F2B43 55%, #2A3956 100%); position: relative; overflow: hidden; border: 1px solid #263252; }
.profile-head::after { content: ''; position: absolute; right: -60px; top: -80px; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, rgba(190, 150, 99, .22), transparent 65%); pointer-events: none; }
.profile-head .av { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; font-size: 20px; font-weight: 600; background: rgba(255, 255, 255, .08); border: 1px solid rgba(220, 199, 168, .5); color: var(--gold-line); flex: none; }
.profile-head .nm { font-size: 20px; font-weight: 600; color: #fff; overflow-wrap: anywhere; }
.profile-head .meta { font-size: 12.5px; color: #B9C2D6; display: flex; gap: 10px; flex-wrap: wrap; margin-top: 3px; }
.profile-head .acts { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; position: relative; z-index: 1; }
.profile-head .btn { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .16); color: #fff; }
.profile-head .btn:hover { background: rgba(255, 255, 255, .12); }
.profile-head .btn.primary { background: var(--gold-2); border-color: var(--gold-2); color: #1A1308; }
.timeline { position: relative; padding-left: 22px; }
.timeline::before { content: ''; position: absolute; left: 7px; top: 4px; bottom: 4px; width: 1px; background: var(--line); }
.tl { position: relative; padding: 8px 0 10px; }
.tl::before { content: ''; position: absolute; left: -19px; top: 13px; width: 9px; height: 9px; border-radius: 50%; background: var(--panel); border: 2px solid var(--navy-3); }
.tl.t-pay::before { border-color: var(--ok); } .tl.t-svc::before { border-color: var(--gold-2); } .tl.t-appt::before { border-color: var(--info); } .tl.t-void::before { border-color: var(--bad); }
.tl .when { font-size: 11.5px; color: var(--muted); } .tl .what { font-weight: 500; }

/* ---------- AI panel ---------- */
.ai-panel { position: fixed; top: 0; right: 0; bottom: 0; width: min(440px, 100vw); z-index: 50; background: var(--panel); border-left: 1px solid var(--line); box-shadow: var(--shadow-3); display: flex; flex-direction: column;
  transform: translateX(104%); transition: transform var(--t2) var(--ease); }
.ai-panel.open { transform: none; }
.ai-panel.full { width: min(980px, 100vw); }
.ai-head { padding: 14px 16px 12px; color: #EAF6FB; background: radial-gradient(120% 140% at 100% 0%, rgba(124, 200, 232, .30), transparent 55%), linear-gradient(135deg, #111A2C, #1F2B43); }
.ai-head .t { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; }
.ai-head .t .ic { color: var(--ice-2); }
.ai-head .s { font-size: 12px; color: #A9C4D6; margin-top: 2px; }
.ai-head .btn { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .16); color: #EAF6FB; }
.ai-ctx { display: flex; gap: 6px; flex-wrap: wrap; padding: 10px 16px; border-bottom: 1px solid var(--line-2); background: var(--panel-2); }
.ai-ctx .c { display: inline-flex; gap: 5px; align-items: center; font-size: 12px; padding: 2px 4px 2px 9px; border-radius: 99px; background: var(--ice-soft); color: var(--ice); border: 1px solid var(--ice-line); }
.ai-ctx .c button { border: 0; background: transparent; color: inherit; cursor: pointer; padding: 0 3px; display: inline-flex; }
.ai-msgs { flex: 1; overflow: auto; padding: 14px 16px; display: grid; gap: 12px; align-content: start; }
.msg { max-width: 100%; animation: popin var(--t2) var(--ease); }
.msg.me { justify-self: end; background: var(--brand); color: var(--brand-ink); padding: 8px 12px; border-radius: 14px 14px 4px 14px; max-width: 85%; white-space: pre-wrap; }
.msg.ai { background: var(--panel-2); border: 1px solid var(--line); border-radius: 4px 14px 14px 14px; padding: 10px 12px; }
.msg.ai .body { white-space: pre-wrap; overflow-wrap: anywhere; }
.msg.sys { font-size: 12.5px; color: var(--muted); text-align: center; }
.msg .srcs { display: grid; gap: 6px; margin-top: 10px; }
.src { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; font-size: 12px; border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; background: var(--panel); }
.src .ic { color: var(--gold); }
.src .st { font-size: 11px; }
.msg .links { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.progress { display: grid; gap: 4px; font-size: 12.5px; color: var(--muted); }
.progress .p { display: flex; gap: 6px; align-items: center; }
.progress .p.run::before { content: ''; width: 10px; height: 10px; border: 2px solid var(--ice); border-right-color: transparent; border-radius: 50%; animation: spin .8s linear infinite; }
.progress .p.ok::before { content: '✓'; color: var(--ok); font-size: 11px; }
.ai-input { border-top: 1px solid var(--line); padding: 10px 12px 12px; display: grid; gap: 8px; }
.ai-input textarea { resize: none; min-height: 44px; max-height: 140px; }
.ai-sugs { display: flex; gap: 6px; flex-wrap: wrap; }
.ai-sugs button { border: 1px solid var(--line); background: var(--panel); border-radius: 99px; padding: 4px 10px; font-size: 12px; cursor: pointer; color: var(--ink-2); text-align: left; }
.ai-sugs button:hover { border-color: var(--ice-line); color: var(--ice); }
.ai-off { margin: 10px 16px 0; }
@media (max-width: 640px) { .ai-panel { width: 100vw; } }

/* ---------- login ---------- */
.login-wrap { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(360px, .9fr); }
.login-brand { position: relative; overflow: hidden; color: #E9EDF5; padding: 48px 56px; display: flex; flex-direction: column;
  background: radial-gradient(60% 60% at 85% 15%, rgba(124, 200, 232, .16), transparent 60%), radial-gradient(70% 60% at 10% 100%, rgba(190, 150, 99, .18), transparent 60%), linear-gradient(160deg, #0E1524 0%, #172036 50%, #1F2B43 100%); }
.login-brand::after { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px); background-size: 44px 44px; mask-image: radial-gradient(80% 70% at 60% 40%, #000, transparent); pointer-events: none; }
.login-brand img { height: 58px; width: auto; align-self: flex-start; }
.login-brand .claim { margin-top: auto; position: relative; z-index: 1; max-width: 460px; }
.login-brand .claim .eyebrow { font-size: 11.5px; letter-spacing: .2em; color: var(--gold-line); text-transform: uppercase; }
.login-brand .claim h1 { font-size: 34px; font-weight: 600; color: #fff; margin: 10px 0 12px; line-height: 1.25; }
.login-brand .claim p { color: #AFB9CD; margin: 0; }
.login-brand .feats { display: grid; gap: 8px; margin-top: 22px; font-size: 13px; color: #C9D1E1; }
.login-brand .feats div { display: flex; gap: 8px; align-items: center; }
.login-brand .feats .ic { color: var(--gold-line); }
.login-form { display: grid; place-items: center; padding: 32px 24px; background: var(--bg); }
.login-card { width: min(380px, 100%); }
.login-card h2 { font-size: 22px; margin: 0 0 4px; }
.login-card .f { margin-top: 14px; }
.login-card input { width: 100%; padding: 10px 12px; }
.login-card .btn.primary { width: 100%; padding: 11px; margin-top: 18px; font-size: 15px; }
.login-card .note { font-size: 12px; color: var(--muted); margin-top: 16px; display: flex; gap: 6px; }
@media (max-width: 900px) { .login-wrap { grid-template-columns: 1fr; } .login-brand { padding: 26px 22px 30px; min-height: 0; } .login-brand .claim h1 { font-size: 24px; } .login-brand .feats { display: none; } .login-brand .claim { margin-top: 28px; } }

/* ---------- misc ---------- */
.prefs { display: grid; gap: 8px; }
.dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; font-size: 13.5px; }
.dl dt { color: var(--muted); } .dl dd { margin: 0; }
.bar { height: 6px; border-radius: 99px; background: var(--soft); overflow: hidden; }
.bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--navy-3), var(--gold-2)); border-radius: 99px; }
details > summary { cursor: pointer; color: var(--ink-2); font-weight: 500; margin: 8px 0; }
.ic.flip { transform: rotate(180deg); }
.side { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .14) transparent; }
@media (max-height: 940px) { .side nav a { padding: 6px 10px; } .side nav .grp { padding: 9px 10px 3px; } .ctx { margin-bottom: 8px; } }
.main > h2 { margin-top: 22px; }
.main > h2:first-child { margin-top: 0; }

/* ---------- Daily / Monthly / Yearly 营业报表 ---------- */
.rep-top { margin-bottom: 10px; gap: 12px; }
.rep-crumb { display: flex; align-items: center; gap: 8px; font-size: 15px; flex-wrap: wrap; }
.rep-crumb a { color: var(--gold-ink); text-decoration: none; border-bottom: 1px dashed var(--gold-line); }
.rep-crumb a:hover { color: var(--gold); }
.rep-crumb .sep { color: var(--muted); }
.rep-filters select.on { border-color: var(--gold); background: var(--gold-soft); }
table.rep td .strong, table.rep tfoot td { font-weight: 600; }
table.rep tfoot tr.total td { background: var(--panel-2); border-top: 2px solid var(--line); border-bottom: 0; }
table.rep tr.dim td { color: var(--muted); background: var(--panel-2); }
table.rep td .muted { color: var(--muted); }
table.rep .neg { color: var(--bad); }
table.rep td.clip { max-width: 260px; }
table.rep th, table.rep td { padding: 7px 8px; }
table.rep td:first-child, table.rep th:first-child { white-space: nowrap; }
tr.tx-more > td { background: var(--panel-2); padding: 12px 14px; }
table.tx td:nth-child(2) b, table.tx td:first-child { white-space: nowrap; }
.tx-detail { display: grid; gap: 8px; }
.tx-detail table { font-size: 12.5px; }
.pager { justify-content: center; margin-top: 10px; }
.rep-basis { margin: 4px 0 14px; } .rep-basis ul { margin: 6px 0 0; padding-left: 18px; } .rep-basis li { margin: 3px 0; }
.print-only { display: none; }
@media print {
  .side, .topbar, .no-print, .tabs, .page-head .acts, #toast, .ai-panel, .aibtn, .scrim { display: none !important; }
  .shell { display: block !important; }
  .main { padding: 0 !important; }
  .print-only { display: block !important; }
  .rep-print-head { font-size: 11px; margin-bottom: 8px; line-height: 1.5; }
  .rep-print-head b { font-size: 14px; }
  .card { box-shadow: none !important; break-inside: avoid; border-color: #ccc; }
  .tbl-wrap { overflow: visible !important; border: 0; }
  table { font-size: 10.5px; } th, td { padding: 3px 5px; }
  th { position: static; }
  tr { break-inside: avoid; }
  tr.tx-more[hidden] { display: none; }
  details:not([open]) > :not(summary) { display: none; }
  .kpis { grid-template-columns: repeat(3, 1fr); }
  body { background: #fff !important; color: #000; }
}

/* POS, simpler and easier to tap (Yuki 2026-10-05: fewer buttons, easy to see and press) */
.cats.big { gap: 8px; }
.cats.big button { min-height: 46px; padding: 10px 14px; font-size: 15px; font-weight: 600; flex: 1 1 auto; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; max-height: 560px; overflow: auto; padding: 2px; }
.tile { display: flex; flex-direction: column; justify-content: space-between; gap: 6px; min-height: 78px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel); cursor: pointer; text-align: left; font: inherit; color: inherit; }
.tile:hover, .tile:focus-visible { border-color: var(--gold-line); box-shadow: var(--shadow-1); }
.tile .nm { font-weight: 600; font-size: 14px; line-height: 1.25; overflow-wrap: anywhere; }
.tile .pr { font-weight: 700; font-size: 15px; }
.tile .meta { font-size: 11.5px; color: var(--muted); }
.togs { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.tog { display: inline-flex; align-items: center; gap: 5px; min-height: 40px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 99px; background: var(--panel); font: inherit; font-size: 14px; color: var(--ink-2); cursor: pointer; }
.tog:hover { border-color: var(--gold-line); }
.tog.on { background: var(--gold-soft); border-color: var(--gold-line); color: var(--ink); font-weight: 600; }
.line.simple { grid-template-columns: minmax(0, 1fr); }
.line.simple .top { display: flex; align-items: flex-start; gap: 8px; }
.line.simple .top .nm { flex: 1; font-weight: 600; font-size: 15px; min-width: 0; overflow-wrap: anywhere; }
.line.simple .top .tot { font-size: 16px; white-space: nowrap; }
.line.simple .field { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; font-size: 14px; }
.line.simple .field > .lab { color: var(--muted); min-width: 64px; }
.line.simple .field input, .line.simple .field select { min-height: 40px; font-size: 15px; }
.stepper { display: inline-flex; align-items: center; gap: 4px; }
.stepper button { min-width: 42px; min-height: 40px; justify-content: center; }
.stepper input { width: 58px; text-align: center; }
.more-panel { margin-top: 10px; padding: 10px 12px; border: 1px dashed var(--line); border-radius: var(--r-sm); background: var(--panel-2); }
.linkbtn { justify-self: start; text-align: left; border: 0; background: none; padding: 6px 0; margin-top: 6px; color: var(--muted); font: inherit; font-size: 13px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.linkbtn:hover { color: var(--ink); }
.payq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; }
.payq .payb { min-height: 50px; font-size: 15px; font-weight: 600; justify-content: center; }
.payq select { grid-column: 1 / -1; min-height: 42px; }
.payrow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 0; border-bottom: 1px dashed var(--line); }
.payrow .pm { min-width: 62px; }
.payrow input, .payrow select { min-height: 40px; font-size: 15px; }
.owe { display: flex; justify-content: space-between; align-items: baseline; padding: 6px 0 10px; }
.owe b { font-size: 28px; }
.ent .btn { min-height: 38px; }

/* POS: the short row of groups under the big tabs (same grouping as the Aestivo categories) */
.cats.groups { margin: 10px 0 0; gap: 8px; }
.cats.groups button { min-height: 38px; padding: 7px 14px; font-size: 13.5px; }
.tile .pr .meta { font-weight: 400; }

/* POS: the 礼券 box in front of the payment buttons */
.vbox { border: 1px solid var(--gold-line); background: var(--gold-soft); border-radius: var(--r-sm); padding: 10px 12px; margin-bottom: 12px; }
.vbox .lab { display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: 14px; margin-bottom: 8px; }
.vbox select { width: 100%; min-height: 46px; font-size: 15px; }
.vbox input { width: 100%; min-height: 40px; margin-top: 8px; }

/* customer page: taboos / likes under the name */
.cust-notes { margin: 0 0 12px; }

/* find a customer's bookings */
:root { --appt-red: #C0392B; --appt-teal: #0E8F8F; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --appt-red: #F08A7C; --appt-teal: #5FD0CF; } }
:root[data-theme="dark"] { --appt-red: #F08A7C; --appt-teal: #5FD0CF; }
.find-list { margin-top: 10px; max-height: 60vh; overflow: auto; }
.find-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px; width: 100%; text-align: left; padding: 10px 12px; margin-bottom: 6px; border: 1px solid var(--line); border-left: 4px solid var(--navy-3); border-radius: var(--r-sm); background: var(--panel); font: inherit; color: inherit; cursor: pointer; }
.find-row:hover { border-color: var(--gold-line); }
.find-row .st { margin-left: auto; font-weight: 600; }
.appt-st.cancelled, .appt-st.no_show { border-left-color: var(--appt-red); color: var(--appt-red); }
.appt-st.arrived, .appt-st.in_service, .appt-st.done { border-left-color: var(--appt-teal); color: var(--appt-teal); }

/* stock: low-stock card and the Delivery Order sheet */
.low-stock { border-color: var(--bad); margin-bottom: 14px; }
.do-sheet { color: #111; background: #fff; padding: 18px; border: 1px solid var(--line); border-radius: var(--r-sm); font-size: 13px; }
.do-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; border-bottom: 2px solid #111; padding-bottom: 8px; margin-bottom: 10px; }
.do-title { font-size: 18px; letter-spacing: .04em; }
.do-no { text-align: right; }
.do-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 18px; margin-bottom: 12px; }
.do-meta span { display: inline-block; min-width: 76px; color: #555; }
.do-table { width: 100%; border-collapse: collapse; }
.do-table th, .do-table td { border: 1px solid #999; padding: 6px 8px; text-align: left; vertical-align: top; }
.do-table th { background: #f1f1f1; font-weight: 600; }
.do-table .num { text-align: right; }
.do-sign { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 34px 0 10px; }
.do-sign .line { border-bottom: 1px solid #111; height: 34px; margin-bottom: 4px; }
@media print {
  body.print-doc .shell { display: none !important; }
  body.print-doc .modal-bg { position: static; display: block; background: none; padding: 0; }
  body.print-doc .modal { width: 100%; max-height: none; overflow: visible; box-shadow: none; border: 0; padding: 0; }
  body.print-doc .modal .mh { display: none; }
  body.print-doc .do-sheet { border: 0; padding: 0; }
}

/* Appointment grid header: name, and under it the shift or why away (wraps instead of being cut when there are many columns) */
.appt-grid th span.small { display: block; white-space: normal; overflow-wrap: anywhere; line-height: 1.25; font-weight: 400; }
.appt-grid td.off { font-size: 11px; line-height: 1.2; }

/* POS: long-term promo tiles (wider, they list what is inside) */
.tiles.promos { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.tile.promo { min-height: 96px; border-color: var(--gold-line); }

/* staff page: my tasks */
.task-row { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; border-bottom: 1px dashed var(--line); }
.task-row:last-child { border-bottom: 0; }
.task-row.done b { color: var(--muted); text-decoration: line-through; }
.task-row.late { background: var(--bad-soft); border-radius: var(--r-sm); padding-left: 8px; padding-right: 8px; }

/* Appointment grid header: a long name with OFF / AL beside it wraps instead of being cut ("WAI YEE AL") */
.appt-grid th[data-place] { white-space: normal; overflow-wrap: anywhere; line-height: 1.25; }

/* customer rating screen: covers the whole page while the customer taps */
.rate-screen { position: fixed; inset: 0; z-index: 90; background: var(--bg); display: grid; place-items: center; padding: 16px; overflow: auto; }
.rate-card { position: relative; width: min(620px, 100%); background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 28px 26px; box-shadow: var(--shadow-3); text-align: center; }
.rate-card h3 { margin: 22px 0 8px; font-size: 16px; }
.rate-big { font-size: 26px; font-weight: 700; }
.rate-stars { display: flex; justify-content: center; gap: 8px; }
.rate-stars button { width: 64px; height: 64px; font-size: 44px; line-height: 1; border: 0; background: none; color: var(--line); cursor: pointer; border-radius: 12px; }
.rate-stars button.on { color: #E3A52B; }
.rate-stars button:focus-visible { outline: 2px solid var(--gold-line); }
.rate-who { margin-top: 8px; display: flex; gap: 8px; justify-content: center; align-items: center; }
.rate-card textarea { width: 100%; font: inherit; font-size: 16px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel); color: inherit; }
.rate-send { margin-top: 18px; min-height: 56px; width: 100%; font-size: 18px; justify-content: center; }
.rate-x { position: absolute; top: 10px; right: 12px; border: 0; background: none; color: var(--muted); font-size: 16px; cursor: pointer; padding: 6px; }
.rate-thanks { padding: 60px 26px; }
@media (max-width: 480px) { .rate-stars button { width: 52px; height: 52px; font-size: 36px; } }

/* ---------- appointment page in the real colours of the branch Appt sheet (2026-10-05) ----------
   Every colour here comes from the sheet through CSS variables set on .appt-sheet by web/pages/appt.js (appt.day → sheet):
   --slot light orange, --extra dark orange, --cut, --off, --sg-grid, --sg-head …; the same values in light and dark mode.
   The booking grid has no border set in the sheets: --sg-line is Google Sheets' own thin grey gridline. */
.appt-sheet .appt-grid { background: var(--sg-grid); border-color: var(--sg-line); border-radius: 0; }
.appt-sheet .appt-grid th, .appt-sheet .appt-grid td { border: 1px solid var(--sg-line); color: #000000; }
.appt-sheet .appt-grid td { background: var(--sg-grid); }
.appt-sheet .appt-grid td.on { background: var(--slot); }
.appt-sheet .appt-grid td.extra { background: var(--extra); }
.appt-sheet .appt-grid td.noslot { background: var(--sg-grid); }
.appt-sheet .appt-grid td.on:hover, .appt-sheet .appt-grid td.extra:hover { box-shadow: inset 0 0 0 2px #000000; }
.appt-sheet .appt-grid td.taken:hover { box-shadow: none; }
.appt-sheet .appt-grid td.cut { background: var(--cut); color: #000000; }
.appt-sheet .appt-grid td.off { background: var(--off); color: #000000; }
.appt-sheet .appt-grid th { background: var(--sg-head); color: var(--sg-head-text); font-weight: var(--sg-head-weight); letter-spacing: 0; }
.appt-sheet .appt-grid th span.small, .appt-sheet .appt-grid th span.muted { color: var(--sg-head-text); font-weight: var(--sg-head-weight); }
.appt-sheet .appt-grid th.xhead { background: var(--sg-empty-head); }
.appt-sheet .appt-grid th.time { background: var(--sg-time-head); color: var(--sg-time-head-text); border-color: var(--sg-time-head-line); z-index: 3; }
.appt-sheet .appt-grid td.time { background: var(--sg-grid); color: var(--sg-time-text); font-weight: var(--sg-time-weight); }
.appt-sheet .appt-grid th.datecell { background: var(--sg-date); color: var(--sg-date-text); width: 58px; font-weight: 700; }
.appt-sheet .appt-grid td.datecol { background: var(--sg-cola); width: 58px; }
.appt-sheet .appt-grid td .appt { background: transparent; box-shadow: none; border-left: 0; border-radius: 0; padding: 0 2px; }
.appt-sheet .appt-grid td .appt.conflict { background: transparent; outline: 2px solid #ff0000; }
.appt-sheet .sheet-list-card { border: 3px solid var(--sg-list-line); border-radius: 0; box-shadow: none; }
.appt-sheet .sheet-list-card h3.sheet-list { margin: -14px -14px 8px; padding: 6px 10px; border-bottom: 3px solid var(--sg-list-line); }
.appt-sheet .sheet-list-card .muted, .appt-sheet .sheet-list-card .small { color: #000000; }
.appt-sheet .appt-grid th.datecell { white-space: normal; width: 86px; line-height: 1.2; }
.appt-sheet .appt-grid td.datecol { width: 86px; }

/* ---------- 2026-10-06 colourful & rounded (Yuki: 每个可点击按钮都有清楚、协调的颜色；按钮、卡片、输入框和弹窗更圆润) ----------
   One colour per kind of action, the same everywhere:
     confirm / save / main step  -> vivid blue to teal      (.btn.primary)
     ordinary action, page tabs  -> violet                  (.btn, .tabs)
     category, filter, search, AI, "more" links -> cyan     (.cats, .seg, .btn.ghost, .btn.ai, .linkbtn, .searchbtn)
     switches on a line (ADV, FOC, 1st trial), special -> rose (.tog, .btn.gold)
     cancel / VOID / delete      -> red                     (.btn.danger)
   The appointment sheet grid keeps the Google Sheet's own colours (rules of .appt-sheet are not touched here). */
:root {
  --r-lg: 22px; --r: 18px; --r-sm: 14px; --pill: 999px;
  --bg: #F6F5FC; --panel: #FFFFFF; --panel-2: #FAF9FE; --line: #E4E0F1; --line-2: #EEEBF7; --soft: #F1EFFA;
  --brand: #2B5CF6; --brand-ink: #FFFFFF; --brand-soft: #E6EDFF; --brand-hover: #1F4DE0;
  --c1: #2B5CF6; --c1b: #0A7F80; --c1-glow: rgba(43, 92, 246, .28);
  --vio: #6D3FE0; --vio-ink: #4A2AAE; --vio-soft: #F0EAFF; --vio-line: #D6C8FF;
  --cy: #0A86A8; --cy-ink: #075E77; --cy-soft: #E1F5FB; --cy-line: #B4E3F1;
  --ro: #D6336C; --ro-ink: #A51D4F; --ro-soft: #FFE9F0; --ro-line: #FFC4D6;
  --nav-bg: #2B2A7A; --nav-grad: linear-gradient(180deg, #3A2FA8 0%, #2743A6 55%, #116C82 100%);
  --shadow-1: 0 1px 2px rgba(60, 50, 120, .06); --shadow-2: 0 1px 2px rgba(60, 50, 120, .05), 0 10px 28px rgba(60, 50, 120, .08);
}
:root[data-theme="dark"] {
  --bg: #0E1020; --panel: #171A2E; --panel-2: #1B1F36; --line: #2C3154; --line-2: #232846; --soft: #1E2240;
  --brand: #7C9BFF; --brand-ink: #0B1026; --brand-soft: #1D2750; --brand-hover: #98B1FF;
  --c1: #3D6BFF; --c1b: #0E8F8A; --c1-glow: rgba(61, 107, 255, .35);
  --vio: #9B7BFF; --vio-ink: #D3C4FF; --vio-soft: #251D4A; --vio-line: #47378A;
  --cy: #35B7D9; --cy-ink: #9FE3F5; --cy-soft: #102C3A; --cy-line: #1F566B;
  --ro: #F06595; --ro-ink: #FFB3CB; --ro-soft: #3A1526; --ro-line: #6E2643;
  --nav-bg: #14133A; --nav-grad: linear-gradient(180deg, #1E1A5A 0%, #17285F 55%, #0C3F4D 100%);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #0E1020; --panel: #171A2E; --panel-2: #1B1F36; --line: #2C3154; --line-2: #232846; --soft: #1E2240;
  --brand: #7C9BFF; --brand-ink: #0B1026; --brand-soft: #1D2750; --brand-hover: #98B1FF;
  --c1: #3D6BFF; --c1b: #0E8F8A; --c1-glow: rgba(61, 107, 255, .35);
  --vio: #9B7BFF; --vio-ink: #D3C4FF; --vio-soft: #251D4A; --vio-line: #47378A;
  --cy: #35B7D9; --cy-ink: #9FE3F5; --cy-soft: #102C3A; --cy-line: #1F566B;
  --ro: #F06595; --ro-ink: #FFB3CB; --ro-soft: #3A1526; --ro-line: #6E2643;
  --nav-bg: #14133A; --nav-grad: linear-gradient(180deg, #1E1A5A 0%, #17285F 55%, #0C3F4D 100%);
} }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--c1) 55%, transparent); outline-offset: 2px; }

/* surfaces */
.card { border-radius: var(--r-lg); box-shadow: var(--shadow-2); }
.card.flat { box-shadow: none; }
.kpi { border-radius: var(--r); box-shadow: var(--shadow-1); }
.kpi.link:hover { border-color: var(--vio-line); }
.modal { border-radius: 26px; padding: 22px; }
.tbl-wrap { border-radius: var(--r); }
.page-head .eyebrow { color: var(--vio); } .page-head .eyebrow::before { background: var(--vio-line); height: 2px; border-radius: 2px; }
tr.click:hover td { background: var(--vio-soft); }
#toast div { border-radius: 16px; }

/* inputs */
input, select, textarea { border-width: 1.5px; border-radius: var(--r-sm); padding: 8px 12px; }
input:hover, select:hover, textarea:hover { border-color: var(--vio-line); }
input:focus, select:focus, textarea:focus { border-color: var(--c1); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c1) 18%, transparent); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--c1); width: 18px; height: 18px; padding: 0; }
.roster td input { border-radius: 9px; padding: 3px 2px; border-width: 1px; }
.palette .pi input { border-radius: 0; }

/* buttons: ordinary = violet */
.btn { border-radius: var(--pill); border: 1.5px solid var(--vio-line); background: var(--vio-soft); color: var(--vio-ink); font-weight: 600; padding: 8px 16px; min-height: 38px;
  transition: background var(--t1) var(--ease), border-color var(--t1), box-shadow var(--t1), transform var(--t1), filter var(--t1); }
.btn:hover { background: color-mix(in srgb, var(--vio) 18%, var(--panel)); border-color: var(--vio); text-decoration: none; }
.btn:active { transform: translateY(1px) scale(.985); }
.btn.small { padding: 5px 12px; min-height: 30px; font-size: 12.5px; }
.btn.icon { padding: 7px; min-width: 38px; } .btn.small.icon { padding: 5px; min-width: 30px; }
/* confirm = blue to teal */
.btn.primary { background: linear-gradient(135deg, var(--c1), var(--c1b)); border-color: transparent; color: #fff; box-shadow: 0 6px 16px var(--c1-glow); }
.btn.primary:hover { background: linear-gradient(135deg, var(--c1), var(--c1b)); border-color: transparent; filter: brightness(1.08) saturate(1.05); box-shadow: 0 8px 20px var(--c1-glow); }
/* danger = red */
.btn.danger { background: var(--bad-soft); border-color: color-mix(in srgb, var(--bad) 40%, transparent); color: var(--bad); }
.btn.danger:hover { background: color-mix(in srgb, var(--bad) 18%, var(--panel)); border-color: var(--bad); }
/* light helpers (icons, close, "more"), AI = cyan */
.btn.ghost, .btn.ai { background: var(--cy-soft); border-color: var(--cy-line); color: var(--cy-ink); }
.btn.ghost:hover, .btn.ai:hover { background: color-mix(in srgb, var(--cy) 20%, var(--panel)); border-color: var(--cy); }
/* special = rose */
.btn.gold { background: var(--ro-soft); border-color: var(--ro-line); color: var(--ro-ink); }
.btn.gold:hover { background: color-mix(in srgb, var(--ro) 18%, var(--panel)); border-color: var(--ro); }
/* not available: flat, dashed, grey; the words stay readable */
.btn:disabled, .btn[disabled], .btn.primary:disabled, .btn.danger:disabled { background: var(--soft); border: 1.5px dashed var(--line); color: var(--muted); box-shadow: none; filter: none; opacity: 1; cursor: not-allowed; transform: none; }
.side .foot .btn { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .22); color: #fff; }
.side .foot .btn:hover { background: rgba(255, 255, 255, .2); border-color: rgba(255, 255, 255, .4); }
.linkbtn { display: inline-flex; align-items: center; gap: 6px; background: var(--cy-soft); border: 1.5px solid var(--cy-line); color: var(--cy-ink); border-radius: var(--pill); padding: 6px 13px; text-decoration: none; font-weight: 600; margin-top: 8px; }
.linkbtn:hover { color: var(--cy-ink); background: color-mix(in srgb, var(--cy) 20%, var(--panel)); border-color: var(--cy); }
.searchbtn { border: 1.5px solid var(--cy-line); background: var(--cy-soft); color: var(--cy-ink); }
.searchbtn:hover { border-color: var(--cy); }
.aibtn { border: 1.5px solid var(--cy-line); background: var(--cy-soft); color: var(--cy-ink); font-weight: 600; }

/* page tabs = violet pills */
.tabs { border-bottom: 0; gap: 8px; padding: 2px 2px 8px; }
.tabs button { border: 1.5px solid var(--vio-line); border-radius: var(--pill); background: var(--vio-soft); color: var(--vio-ink); padding: 7px 15px; font-weight: 600; min-height: 36px;
  transition: background var(--t1), color var(--t1), border-color var(--t1), box-shadow var(--t1); }
.tabs button:hover { color: var(--vio-ink); border-color: var(--vio); background: color-mix(in srgb, var(--vio) 18%, var(--panel)); }
.tabs button.on { background: var(--vio); border-color: var(--vio); color: #fff; box-shadow: 0 5px 14px color-mix(in srgb, var(--vio) 30%, transparent); }
/* categories and filters = cyan pills */
.cats button { border: 1.5px solid var(--cy-line); background: var(--cy-soft); color: var(--cy-ink); font-weight: 600; border-radius: var(--pill); }
.cats button:hover { border-color: var(--cy); background: color-mix(in srgb, var(--cy) 20%, var(--panel)); }
.cats button.on { background: var(--cy); border-color: var(--cy); color: #fff; box-shadow: 0 5px 14px color-mix(in srgb, var(--cy) 30%, transparent); }
.seg { background: var(--cy-soft); border: 1.5px solid var(--cy-line); }
.seg button { color: var(--cy-ink); font-weight: 600; }
.seg button.on { background: var(--cy); color: #fff; box-shadow: none; }
.steps .st { border-width: 1.5px; }
.steps .st.now { border-color: var(--vio-line); background: var(--vio-soft); color: var(--vio-ink); }

/* things to tap in a list: tiles */
.tile { border: 1.5px solid var(--vio-line); border-radius: 18px; background: linear-gradient(180deg, var(--panel) 0%, var(--vio-soft) 140%); transition: border-color var(--t1), box-shadow var(--t1), transform var(--t1); }
.tile:hover, .tile:focus-visible { border-color: var(--vio); box-shadow: 0 8px 20px color-mix(in srgb, var(--vio) 18%, transparent); transform: translateY(-1px); }
.tile:active { transform: translateY(0) scale(.985); }
.tile .pr { color: var(--c1); }
.tile.promo { border-color: var(--ro-line); background: linear-gradient(180deg, var(--panel) 0%, var(--ro-soft) 150%); }
.tile.promo:hover, .tile.promo:focus-visible { border-color: var(--ro); box-shadow: 0 8px 20px color-mix(in srgb, var(--ro) 18%, transparent); }

/* side menu: bright, the page you are on is a white pill */
.side { background: var(--nav-grad); }
.side nav a { border-radius: 14px; padding: 9px 12px; }
.side nav a:hover { background: rgba(255, 255, 255, .14); }
.side nav a.on { background: #fff; color: #2A2A8A; box-shadow: 0 6px 16px rgba(10, 10, 60, .25); font-weight: 600; }
.side nav a.on::before { display: none; }
.side nav a.on .ic { color: #6D3FE0; }
.side nav a.on .n { background: #6D3FE0; color: #fff; }
@media (max-width: 640px) {
  .btn { min-height: 42px; } .btn.small { min-height: 34px; padding: 6px 13px; }
  .tabs button { min-height: 40px; }
}
/* switches on a bill line (ADV, FOC, 1st trial, done now) = rose */
.tog { border: 1.5px solid var(--ro-line); background: var(--ro-soft); color: var(--ro-ink); font-weight: 600; }
.tog:hover { border-color: var(--ro); }
.tog.on { background: var(--ro); border-color: var(--ro); color: #fff; box-shadow: 0 5px 14px color-mix(in srgb, var(--ro) 28%, transparent); }

/* ---------- 2026-10-06 Retail Product photo tiles (POS) ---------- */
.tiles.photos { grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 12px; }
.ptile { position: relative; display: flex; flex-direction: column; border: 1.5px solid var(--vio-line); border-radius: 20px; background: var(--panel); overflow: hidden; transition: border-color var(--t1), box-shadow var(--t1), transform var(--t1); }
.ptile:hover, .ptile:focus-within { border-color: var(--vio); box-shadow: 0 10px 22px color-mix(in srgb, var(--vio) 18%, transparent); transform: translateY(-1px); }
.ptile button { border: 0; background: none; font: inherit; color: inherit; cursor: pointer; text-align: left; padding: 0; }
.ptile .pic { aspect-ratio: 1 / 1; width: 100%; display: grid; place-items: center; background: #fff; border-bottom: 1.5px solid var(--line-2); }
.ptile .pic img { width: 100%; height: 100%; object-fit: contain; display: block; }
.ptile .nopic { display: grid; justify-items: center; gap: 6px; color: var(--muted); font-size: 12px; padding: 10px; text-align: center; }
.ptile .body { display: grid; gap: 3px; padding: 10px 12px 12px; background: linear-gradient(180deg, var(--panel) 0%, var(--vio-soft) 160%); flex: 1; align-content: start; }
.ptile .nm { font-weight: 600; font-size: 13.5px; line-height: 1.25; overflow-wrap: anywhere; }
.ptile .meta { font-size: 11.5px; color: var(--muted); min-height: 14px; }
.ptile .pr { font-weight: 700; font-size: 15.5px; color: var(--c1); margin-top: 2px; }
.ptile .zoom { position: absolute; top: 8px; right: 8px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--cy-soft); border: 1.5px solid var(--cy-line); color: var(--cy-ink); }
.ptile .zoom:hover { background: var(--cy); color: #fff; border-color: var(--cy); }
.pzoom { text-align: center; } .pzoom img { max-width: 100%; max-height: 68vh; border-radius: 18px; background: #fff; }
.item-pic { width: 44px; height: 44px; border-radius: 12px; object-fit: contain; background: #fff; border: 1.5px solid var(--line); vertical-align: middle; }
.item-pic.none { display: inline-grid; place-items: center; font-size: 10px; color: var(--muted); }
@media (max-width: 640px) { .tiles.photos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tiles.photos { grid-template-columns: repeat(auto-fill, minmax(122px, 1fr)); gap: 10px; max-height: 640px; }
.ptile .nm { font-size: 12.5px; } .ptile .pr { font-size: 14.5px; } .ptile .body { padding: 8px 10px 10px; }

/* ---------- 2026-10-06 Treatment / Service Point box, Assign Staff & Room box, booking work list ---------- */
.svc-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 12px 14px; border-radius: 18px; background: var(--vio-soft); border: 1.5px solid var(--vio-line); margin-bottom: 12px; }
.svc-name { font-size: 18px; font-weight: 700; flex: 1 1 100%; }
.svc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin: 10px 0 4px; }
.svc-grid .f { display: grid; gap: 6px; font-size: 13px; color: var(--ink-2); align-content: start; }
.svc-grid select, .svc-grid input { min-height: 44px; font-size: 15px; }
.svc-list { display: grid; gap: 8px; }
.svp-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.svp-opt { display: grid; gap: 2px; text-align: left; padding: 12px 14px; min-height: 64px; border-radius: 18px; border: 2px solid var(--ro-line); background: var(--ro-soft); color: var(--ro-ink); cursor: pointer; font: inherit; transition: background var(--t1), border-color var(--t1), box-shadow var(--t1); }
.svp-opt b { font-size: 18px; } .svp-opt span { font-size: 12.5px; }
.svp-opt:hover { border-color: var(--ro); }
.svp-opt.on { background: var(--ro); border-color: var(--ro); color: #fff; box-shadow: 0 6px 16px color-mix(in srgb, var(--ro) 30%, transparent); }
.svc-total { margin-top: 12px; padding: 10px 14px; border-radius: 16px; background: var(--cy-soft); border: 1.5px solid var(--cy-line); color: var(--cy-ink); display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }
.svc-total b { font-size: 18px; }
.svc-go { min-height: 48px; font-size: 16px; padding: 10px 22px; }
.pick-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.pick { display: grid; gap: 2px; text-align: left; padding: 10px 14px; min-height: 58px; border-radius: 16px; border: 2px solid var(--cy-line); background: var(--cy-soft); color: var(--cy-ink); cursor: pointer; font: inherit; }
.pick:hover { border-color: var(--cy); }
.pick.on { background: var(--cy); border-color: var(--cy); color: #fff; box-shadow: 0 6px 16px color-mix(in srgb, var(--cy) 30%, transparent); }
.pick.no, .pick:disabled { background: var(--soft); border: 2px dashed var(--line); color: var(--muted); cursor: not-allowed; }
.pick.no b { text-decoration: line-through; }
.worklist { display: grid; gap: 8px; }
.wl-row { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 12px; border: 1.5px solid var(--line); border-radius: 16px; background: var(--panel); }
.wl-row .tm { font-weight: 700; font-size: 16px; font-variant-numeric: tabular-nums; }
.wl-row .who { min-width: 0; } .wl-row .who b { margin-right: 6px; }
.wl-row .acts { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.wl-row.arrived { border-color: var(--cy-line); background: var(--cy-soft); }
.wl-row.done { opacity: .7; }
.capstrip { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 12px; }
.capstrip button { border: 1.5px solid var(--cy-line); background: var(--cy-soft); color: var(--cy-ink); border-radius: 999px; padding: 7px 13px; font: inherit; font-weight: 600; cursor: pointer; min-height: 38px; }
.capstrip button:hover { border-color: var(--cy); }
.capstrip button.full, .capstrip button:disabled { background: var(--soft); border: 1.5px dashed var(--line); color: var(--muted); cursor: not-allowed; }
@media (max-width: 640px) { .wl-row { grid-template-columns: 54px minmax(0, 1fr); } .wl-row .acts { grid-column: 1 / -1; justify-content: flex-start; } }
[data-worklist] .card-head { flex-wrap: wrap; } [data-worklist] .card-head h2 { flex: 1 1 180px; }
.tiles.photos { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
@media (max-width: 640px) { .tiles.photos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---- 2026-10-06 Chinese + English (web/i18n.js): the English line under a long Chinese text ---- */
.i18n-en { display: block; font-size: .9em; line-height: 1.35; opacity: .86; font-weight: 400; margin-top: 2px; letter-spacing: 0; text-transform: none; }
.btn .i18n-en, .tabs .i18n-en, th .i18n-en { font-size: .82em; }
#toast .i18n-en { opacity: .92; }

/* ---- 2026-10-06 English / 华语 switch ---- */
.lang-switch { display: inline-flex; gap: 6px; }
.lang-switch.login-lang { margin-bottom: 10px; }
.lang-switch.side-lang { margin-bottom: 6px; }
.lang-switch .btn.small { min-width: 64px; }

/* customer portal: online booking form (web/portal.js, 2026-10-06) */
.portal-form label { display: block; margin: 10px 0 4px; font-weight: 600; }
.portal-form select, .portal-form input { width: 100%; }
.portal-times { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.portal-appt { flex-wrap: wrap; } .portal-appt .grow { flex: 1 1 100%; } /* phone width: the booking text on its own line, status and button below */

/* ---------- roster: OFF day in red (Yuki 2026-10-07) ---------- */
.roster td input.off, .roster td input.off:disabled { background: #fde2e2; color: #b00020; font-weight: 700; border-color: #f3b4b4; }

/* ---------- POS layout (Yuki 2026-10-07): customer + what she already has on top, catalogue below-left, this bill + payment on the right ---------- */
@media (min-width: 901px) { .pos3 { grid-template-columns: minmax(0, 1fr) minmax(360px, 440px); } .pos3 .col-cust { grid-column: 1 / -1; } .pos3 .sticky { position: static; } }

/* booked cell in five lines like the branch Excel (Yuki 2026-10-07): code + name / phone / treatments / note / staff */
.appt.lines { white-space: normal; max-height: none; line-height: 1.2; font-size: 11px; text-overflow: clip; }
.appt.lines .l2, .appt.lines .l5 { color: var(--muted); }
.appt.lines .l3 { font-weight: 600; }
.appt.lines .l4 { text-decoration: underline; }
.appt.lines .st { margin-left: 4px; font-size: 10px; opacity: .75; }
.appt-sheet .appt-grid td .appt.lines { color: #000; }
.appt-sheet .appt-grid td .appt.lines.pool { outline: 1px dashed rgba(0,0,0,.45); outline-offset: -1px; } /* no staff yet: drawn where the plan seats it */
.appt.lines .l4 .spend { color: #d00000; font-weight: 700; text-decoration: none; } /* 顾客 spending in red (Yuki 2026-10-07) */

/* ---------- side menu in coloured groups, tap to open (Yuki 2026-10-07) ---------- */
.side nav .grp2 { display: flex; align-items: center; gap: 10px; width: 100%; background: none; border: 0; padding: 12px 8px 8px; margin: 0; cursor: pointer; font: inherit; font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--gc); text-align: left; }
.side nav .grp2 .bar { width: 4px; height: 17px; border-radius: 3px; background: var(--gc); flex: none; }
.side nav .grp2 .t { white-space: nowrap; }
.side nav .grp2 .ln { flex: 1; min-width: 8px; height: 1px; background: var(--gc); opacity: .35; }
.side nav .grp2 svg { flex: none; transition: transform .18s; }
.side nav .grp2.open svg { transform: rotate(90deg); }
.side nav .grp2:hover .ln { opacity: .7; }
.side nav .grp2:focus-visible { outline: 2px solid var(--gc); outline-offset: 2px; border-radius: 8px; }
.side nav .grp-items { display: grid; gap: 1px; padding: 0 0 6px 10px; }
.side nav .grp-items[hidden] { display: none; }

/* Lead 名单 (2026-10-08): the status chip carries the Lead sheet's own fill colour */
.lead-chip { display: inline-block; padding: 1px 8px; border-radius: 99px; font-size: 11.5px; white-space: nowrap; background: var(--lead); color: #1f2937; border: 1px solid rgba(0, 0, 0, .12); }
.lead-chip[style*="transparent"] { color: var(--ink-2); border-color: var(--line, rgba(0, 0, 0, .12)); }
/* a booking spread over its rows like the branch Appt sheet (Yuki 2026-10-11): one line per row, bold, centred, black */
.appt-grid td .appt.lines.row { text-align: center; font-weight: 700; font-size: 12px; color: #000; max-height: none; white-space: normal; padding: 0 2px; }
.appt-grid td .appt.lines.row .l2, .appt-grid td .appt.lines.row .l3 { color: #000; font-weight: 700; }
.appt-grid td .appt.lines.row .l4 { font-weight: 400; text-decoration: none; font-size: 11px; }
.appt-sheet .appt-grid td .appt.lines.row.pool { outline: 0; }
.appt-sheet .appt-grid td[data-appt-cell] { cursor: pointer; }
/* bigger booking cells (Yuki 2026-10-12:「appointment 位子大一点」): wide person / extra columns so code + name, phone and the
   treatments sit on one line like the Appt sheet, taller rows, larger bold text; the grid scrolls sideways when it is wider */
.appt-grid table { width: max-content; min-width: 100%; }
.appt-grid thead th[data-place], .appt-grid thead th.xhead { width: 175px; min-width: 175px; }
.appt-grid td { height: 40px; }
.appt-grid td .appt.lines.row { font-size: 13px; line-height: 1.25; }
.appt-grid td .appt.lines.row .l4 { font-size: 12px; }
@media (max-width: 700px) { .appt-grid thead th[data-place], .appt-grid thead th.xhead { width: 120px; min-width: 120px; } }