:root {
  color-scheme: light;
  --ink: #172033;
  --muted: #667085;
  --line: #d8dee8;
  --soft: #f3f5f8;
  --canvas: #07111f;
  --paper: #ffffff;
  --navy: #081426;
  --blue: #326ff1;
  --blue-dark: #214eb4;
  --orange: #e56f43;
  --red: #df4d64;
  --green: #24966b;
  --purple: #7b64d8;
  --gold: #e5c56d;
  --dark-text-primary: #f8fbff;
  --dark-text-secondary: #d3deea;
  --dark-orange: #ff9d6c;
  --dark-red: #ff7f94;
  --dark-green: #5bd9a4;
  --dark-blue: #86baff;
  --dark-violet: #baa8ff;
  --shadow: 0 14px 38px rgba(40, 57, 82, .10);
  --shadow-soft: 0 5px 18px rgba(40, 57, 82, .065);
  --radius-card: 14px;
  --radius-control: 9px;
}

* { box-sizing: border-box; }
::selection { color: #fff; background: var(--blue); }
html { background: var(--canvas); scrollbar-color: #a8b3c2 transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 999px; background: #a8b3c2; background-clip: padding-box; }
::-webkit-scrollbar-track { background: transparent; }
html, body { max-width: 100%; overflow-x: hidden; }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  color: var(--ink);
  background:
    radial-gradient(circle at 12% -8%, rgba(50,111,241,.34), transparent 36rem),
    radial-gradient(circle at 88% 14%, rgba(214,184,95,.14), transparent 28rem),
    linear-gradient(160deg, #111d36 0%, #07101e 58%, #030811 100%);
  background-attachment: fixed;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
button, input, select { font: inherit; }
button { cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .12s ease, box-shadow .18s ease; }
button:active { transform: translateY(1px) scale(.985); }
button:disabled { cursor: default; opacity: .48; transform: none; }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid rgba(31,102,165,.72); outline-offset: 2px; }
input::placeholder { color: #7b8493; opacity: 1; }
strong, b, .kpi, .money-cell, .month-values, .attendance-hours { font-variant-numeric: tabular-nums; }
.hidden { display: none !important; }
.skip-link { position: fixed; z-index: 100; top: 8px; left: 8px; padding: 9px 12px; color: #fff; background: var(--navy); border-radius: 8px; transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); }

.login-shell {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 26px;
  background: linear-gradient(145deg, #3d5877 0%, #233a55 48%, #111f31 100%);
}
.login-shell::before, .login-shell::after { position: absolute; border-radius: 50%; content: ""; pointer-events: none; }
.login-shell::before { top: -180px; right: -120px; width: 430px; height: 430px; border: 58px solid rgba(255,255,255,.035); }
.login-shell::after { bottom: -230px; left: -160px; width: 520px; height: 520px; border: 1px solid rgba(214,184,95,.22); box-shadow: inset 0 0 0 44px rgba(214,184,95,.025); }
.login-card {
  position: relative;
  z-index: 1;
  width: min(420px, 100%);
  padding: 40px 36px 34px;
  border: 1px solid rgba(224, 193, 111, .38);
  border-radius: 22px;
  background: linear-gradient(155deg, #1e2d42 0%, #131f30 55%, #0c1522 100%);
  box-shadow: 0 30px 78px rgba(3,10,20,.36), inset 0 1px rgba(255,255,255,.05);
  text-align: center;
}
.brand-mark {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin: 0 auto 18px;
  border-radius: 15px;
  color: #fff;
  background: var(--navy);
  font: 800 25px/1 Georgia, serif;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), 0 8px 22px rgba(31,41,55,.24);
}
.brand-mark.small { width: 34px; height: 34px; margin: 0; border-radius: 10px; font-size: 18px; }
.brand-lockup { display: grid; place-items: center; width: 190px; min-height: 104px; margin: 0 auto 8px; }
.brand-lockup.small { width: 52px; min-height: 38px; margin: 0; }
.brand-lockup > * { grid-area: 1 / 1; }
.brand-logo { display: block; width: 100%; height: 104px; object-fit: contain; }
.brand-lockup.small .brand-logo { width: 52px; height: 38px; }
.brand-lockup.has-logo .logo-fallback { display: none; }
.eyebrow { margin: 0; color: #8a4c26; font-size: 11px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.login-card .eyebrow { color: #d9b961; }
.login-card h1 { margin: 8px 0 5px; color: #fff; font-size: 28px; letter-spacing: .03em; }
.login-subtitle { margin: 0 0 29px; color: #aeb8c6; font-size: 14px; font-weight: 700; letter-spacing: .08em; }
.login-card form { display: grid; gap: 15px; text-align: left; }
.login-card label span { display: block; margin: 0 0 7px; color: #d9dee6; font-size: 12px; font-weight: 800; }
.login-card input { border-color: #465365; background: #f7f5f0; color: #182231; }
.login-card input:focus { border-color: #d9b961; box-shadow: 0 0 0 3px rgba(217,185,97,.16); }
.login-card .button.primary { color: #182231; background: #d9b961; box-shadow: 0 8px 20px rgba(0,0,0,.16); }
.login-card .feedback.error { color: #fda4af; }
input, select {
  width: 100%;
  min-height: 42px;
  border: 1px solid #cfd5dc;
  border-radius: 10px;
  outline: 0;
  background: #fff;
  color: var(--ink);
  padding: 0 12px;
  transition: border-color .15s ease, box-shadow .15s ease;
  caret-color: var(--blue);
}
input:focus, select:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(0,122,255,.12); }
.button {
  min-height: 40px;
  border: 0;
  border-radius: var(--radius-control);
  padding: 0 15px;
  color: #fff;
  background: #64748b;
  font-size: 13px;
  font-weight: 800;
}
.button.primary { background: var(--blue); }
.button.dark { background: var(--navy); }
.button.orange { background: var(--orange); }
.button.wide { width: 100%; margin-top: 4px; }
.button.secondary { color: #374151; background: #e5e7eb; }
.button.is-active { color: #fff; background: var(--navy); }
.feedback { min-height: 18px; margin: 14px 0 0; font-size: 12px; font-weight: 700; }
.feedback.error { color: var(--red); }
.feedback.success { color: var(--green); }
.page-inline-error { position:sticky; z-index:18; top:calc(56px + env(safe-area-inset-top)); display:flex; align-items:center; justify-content:space-between; gap:10px; margin:0 0 10px; border:1px solid #e7b7bf; border-radius:10px; padding:9px 10px 9px 12px; color:#8f2536; background:#fff3f5; box-shadow:0 8px 22px rgba(80,19,31,.12); font-size:12px; font-weight:850; }
.page-inline-error button { flex:0 0 auto; min-height:34px; border:0; border-radius:7px; padding:0 10px; color:#fff; background:#9f3044; font:inherit; font-weight:900; }
#content.is-refreshing .page-shell { opacity:.78; transition:opacity .12s ease-out; }

.reminder-hero-actions { display: flex; align-items: center; gap: 12px; }
.reminder-hero-actions button {
  min-height: 40px; border: 1px solid rgba(255,255,255,.24); border-radius: 9px;
  padding: 0 16px; color: #fff; background: #2d6fce; font-weight: 900;
}

.online-order-dialog { width: min(720px, calc(100vw - 24px)); max-height: min(820px, calc(100dvh - 24px)); padding: 0; border: 0; border-radius: 16px; color: var(--ink); background: #fff; box-shadow: 0 28px 90px rgba(0,0,0,.35); }
.online-order-dialog::backdrop { background: rgba(2,8,20,.72); backdrop-filter: blur(3px); }
.online-order-body { display: grid; gap: 13px; padding: 18px; overflow-y: auto; }
.online-order-body label > span { display: block; margin-bottom: 6px; color: #475569; font-size: 12px; font-weight: 900; }
.online-order-body textarea { width: 100%; resize: vertical; min-height: 112px; border: 1px solid #cfd5dc; border-radius: 10px; padding: 11px 12px; color: var(--ink); background: #f8fafc; font: inherit; line-height: 1.6; }
.online-order-body textarea:focus { outline: 2px solid rgba(50,111,241,.25); border-color: var(--blue); }
.online-order-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 10px; }
.online-customer-field { position: relative; overflow: visible !important; }
.online-customer-suggestions {
  position: absolute; z-index: 12; top: calc(100% + 5px); right: 0; left: 0;
  max-height: min(280px, 42dvh); overflow-y: auto; padding: 5px;
  border: 1px solid #c8d3e1; border-radius: 10px; background: #fff;
  box-shadow: 0 14px 34px rgba(26,42,66,.18);
}
.online-customer-suggestions[hidden] { display: none; }
.online-customer-suggestions button {
  display: block; width: 100%; min-height: 40px; border: 0; border-radius: 7px;
  padding: 8px 10px; color: #203149; background: transparent;
  font: inherit; font-size: 14px; font-weight: 750; text-align: left;
}
.online-customer-suggestions button:hover,
.online-customer-suggestions button:focus-visible { outline: 0; background: #eaf1fa; }
.online-item-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 3px; }
.online-item-toolbar strong,.online-item-toolbar span { display: block; }
.online-item-toolbar strong { color: #26364d; font-size: 14px; }
.online-item-toolbar span { margin-top: 2px; color: #758397; font-size: 10px; }
.online-item-toolbar > div:last-child { display: flex; gap: 7px; }
.online-item-toolbar select { min-width: 230px; }
.online-order-items { overflow: hidden; border: 1px solid #d8dee8; border-radius: 12px; background: #f8fafc; }
.online-order-items > div { display: grid; grid-template-columns: minmax(170px,1fr) 92px 72px 86px 52px; gap: 8px; align-items: end; min-height: 68px; padding: 9px 11px; border-bottom: 1px solid #e6eaf0; }
.online-order-items > div:last-child { border-bottom: 0; }
.online-edit-item label > span { display: block; margin: 0 0 4px; color: #7a8798; font-size: 9px; font-weight: 900; }
.online-edit-item input { width: 100%; height: 38px; border: 1px solid #d2d9e2; border-radius: 7px; padding: 0 8px; color: #1d2b3d; background: #fff; font-size: 13px; font-weight: 800; }
.online-edit-item strong { align-self: center; color: #c2413a; font-size: 13px; font-variant-numeric: tabular-nums; text-align: right; }
.online-edit-item > button { align-self: center; height: 34px; border: 0; border-radius: 7px; color: #a72d3e; background: #fde7ea; font-size: 11px; font-weight: 900; }
.online-order-submit { display: flex; align-items: center; justify-content: flex-end; gap: 14px; padding-top: 4px; }
.online-order-submit > strong { margin-right: auto; color: #c2413a; font-size: 22px; }
.online-order-submit > div { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; }

@media (max-width: 620px) {
  .online-order-dialog { width: calc(100vw - 14px); max-height: calc(100dvh - 14px); border-radius: 13px; }
  .online-order-body { padding: 14px; }
  .online-order-grid { grid-template-columns: 1fr 1fr; }
  .online-order-grid label:first-child { grid-column: 1 / -1; }
  .online-item-toolbar { align-items: stretch; flex-direction: column; }
  .online-item-toolbar > div:last-child { display: grid; grid-template-columns: minmax(0,1fr) 58px; }
  .online-item-toolbar select { min-width: 0; width: 100%; }
  .online-order-items > div { grid-template-columns: minmax(0,1fr) 82px 68px; align-items: end; }
  .online-edit-name { grid-column: 1 / -1; }
  .online-edit-item strong { align-self: center; text-align: left; }
  .online-edit-item > button { align-self: center; }
  .reminder-hero-actions { gap: 8px; }
  .reminder-hero-actions button { padding: 0 11px; }
}

.app {
  min-height: 100vh;
  min-height: 100dvh;
  padding-bottom: 86px;
  background:
    radial-gradient(circle at 9% 0%, rgba(50,111,241,.26), transparent 31rem),
    radial-gradient(circle at 92% 12%, rgba(214,184,95,.12), transparent 24rem),
    linear-gradient(160deg, rgba(14,28,54,.985), rgba(3,8,17,.995));
  background-attachment: fixed;
}
.topbar {
  position: sticky;
  z-index: 30;
  top: 0;
  display: grid;
  grid-template-columns: minmax(150px, 1fr) auto minmax(300px, 1fr);
  align-items: center;
  gap: 16px;
  min-height: 56px;
  padding: 7px max(18px, calc((100vw - 1180px) / 2));
  color: #fff;
  background: linear-gradient(90deg, rgba(5,12,24,.98), rgba(19,41,81,.98) 52%, rgba(5,12,24,.98));
  border-bottom: 1px solid rgba(214,184,95,.36);
  box-shadow: 0 10px 34px rgba(0,0,0,.26);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.topbar-store { min-width: 0; overflow: hidden; color: #fff; font-size: 15px; font-weight: 900; letter-spacing: .02em; white-space: nowrap; text-overflow: ellipsis; }
.topbar-brand { display: flex; align-items: center; min-width: 0; gap: 8px; }
.topbar-logo { width: 42px; height: 34px; flex: 0 0 auto; object-fit: contain; filter: drop-shadow(0 4px 10px rgba(214,184,95,.18)); }
.topbar-page { margin: 0; color: #f4d98e; font-size: 16px; font-weight: 900; letter-spacing: .08em; line-height: 1; text-align: center; white-space: nowrap; }
.top-actions { display: flex; align-items: center; justify-content: flex-end; gap: 7px; min-width: 0; }
.signed-user { display: grid; min-width: 76px; max-width: 150px; line-height: 1.05; }
.signed-user small { color: #c3cedb; font-size: 9px; font-weight: 800; letter-spacing: .08em; }
.signed-user strong { overflow: hidden; margin-top: 3px; color: #fff; font-size: 13px; font-weight: 900; white-space: nowrap; text-overflow: ellipsis; }
.icon-button {
  height: 34px;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 8px;
  padding: 0 12px;
  color: #fff;
  background: rgba(255,255,255,.08);
  font-size: 12px;
  font-weight: 800;
}
.logout-button { color: #fff; border-color: rgba(248,113,113,.68); background: rgba(185,28,28,.18); }
.sync-state { position: absolute; right: max(18px, calc((100vw - 1180px) / 2)); bottom: -19px; display: flex; align-items: center; gap: 6px; padding: 3px 8px; border: 1px solid rgba(255,255,255,.09); border-top: 0; border-radius: 0 0 8px 8px; color: #e0e8f1; background: rgba(8,18,32,.94); box-shadow: 0 6px 16px rgba(0,0,0,.18); font-size: 9px; font-weight: 800; white-space: nowrap; }
#sync-dot { width: 7px; height: 7px; border-radius: 50%; background: #f59e0b; box-shadow: 0 0 0 3px rgba(245,158,11,.13); }

.content { width: min(1180px, 100%); min-height: calc(100vh - 150px); margin: 0 auto; padding: 26px 16px 32px; }
.page-shell { min-width: 0; }
.loading-shell { display: grid; gap: 12px; }
.skeleton { height: 88px; border-radius: 15px; background: linear-gradient(100deg,#fff 25%,#f3f4f6 38%,#fff 55%); background-size: 300% 100%; animation: shimmer 1.2s infinite; }
@keyframes shimmer { to { background-position: -100% 0; } }

.page-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  padding: 12px;
  border: 0;
  border-radius: var(--radius-card);
  color: #fff;
  background: linear-gradient(135deg, rgba(21,49,99,.95), rgba(7,18,37,.96));
  box-shadow: 0 16px 38px rgba(0,0,0,.2), inset 0 1px rgba(255,255,255,.08);
}
.date-nav, .segmented, .filter-row, .search-row { display: flex; align-items: center; gap: 7px; }
.date-nav input { width: 150px; text-align: center; font-weight: 800; }
.date-input-wrap { display: flex; align-items: center; min-width: 0; gap: 6px; }
.nearby-day { flex: 0 0 auto; color: #f3d88f; font-size: 12px; font-weight: 900; white-space: nowrap; }
.step-button {
  min-width: 62px;
  height: 40px;
  border: 0;
  border-radius: var(--radius-control);
  color: #fff;
  background: linear-gradient(145deg, #3c7df5, #214eb4);
  box-shadow: inset 0 1px rgba(255,255,255,.16), 0 6px 16px rgba(1,8,17,.2);
  font-size: 12px;
  font-weight: 800;
}
.step-button:disabled { cursor: default; opacity: .42; }
.toolbar-copy strong { display: block; font-size: 14px; }
.toolbar-copy span { color: var(--dark-text-secondary); font-size: 11px; }

.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 0 0 14px; }
.cake-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kpi {
  position: relative;
  min-width: 0;
  overflow: hidden;
  padding: 15px 16px;
  border-radius: var(--radius-card);
  color: #fff;
  background: linear-gradient(145deg, rgba(29,58,116,.96), rgba(8,22,45,.99));
  border: 0;
  box-shadow: inset 0 1px rgba(255,255,255,.06), 0 14px 34px rgba(0,0,0,.18);
}
.kpi::after { position: absolute; top: -28px; right: -22px; width: 74px; height: 74px; border-radius: 50%; background: rgba(255,255,255,.045); content: ""; }
.kpi span { position: relative; z-index: 1; display: block; margin-bottom: 6px; color: var(--dark-text-secondary); font-size: 11px; font-weight: 800; }
.kpi strong { position: relative; z-index: 1; display: block; overflow: hidden; color: var(--dark-text-primary); font-size: 23px; white-space: nowrap; text-overflow: ellipsis; }
.kpi.orange strong { color: var(--orange); }
.kpi.red strong { color: var(--red); }
.kpi.green strong { color: var(--green); }
.kpi.blue strong { color: #1d4ed8; }
.kpi.violet strong { color: #7c3aed; }
.page-shell:not(.today-page) .kpi.orange strong { color: var(--dark-orange); }
.page-shell:not(.today-page) .kpi.red strong { color: var(--dark-red); }
.page-shell:not(.today-page) .kpi.green strong { color: var(--dark-green); }
.page-shell:not(.today-page) .kpi.blue strong { color: var(--dark-blue); }
.page-shell:not(.today-page) .kpi.violet strong { color: var(--dark-violet); }

.today-page {
  padding: 14px;
  border-radius: 19px;
  background: linear-gradient(150deg, #f4f7fb, #e7edf5);
  box-shadow: 0 30px 76px rgba(0,0,0,.3), inset 0 1px #fff;
}
.today-page .page-toolbar { color: var(--ink); background: rgba(255,255,255,.92); box-shadow: 0 10px 26px rgba(29,49,75,.09); }
.today-page .toolbar-copy span { color: var(--muted); }
.today-page .nearby-day { color: var(--blue-dark); }
.today-page .step-button { color: #1d4776; background: linear-gradient(145deg, #e4eef9, #cfdef0); border: 1px solid #bfd0e3; box-shadow: none; }
.today-page .kpi { color: var(--ink); background: #fff; box-shadow: 0 8px 22px rgba(28,48,73,.08); }
.today-page .kpi::after { background: rgba(50,111,241,.06); }
.today-page .kpi span { color: var(--muted); }
.today-page .kpi strong { color: var(--navy); }
.today-page .kpi.orange strong { color: var(--orange); }
.today-page .kpi.red strong { color: var(--red); }
.today-page .kpi.green strong { color: var(--green); }
.today-page .panel-title h2 { font-size: 17px; }
.today-page .summary-table td { font-size: 15px; }
.today-page .summary-table .qty { font-size: 19px; }
.today-page .summary-table .times { font-size: 14px; }
.today-page .overview-name { font-size: 17px; }
.today-page .pickup { font-size: 13px; }
.today-page .note-inline { font-size: 12px; }
.today-page .overview-item { font-size: 15px; }
.today-page .overview-total { font-size: 14px; }
.today-page .overview-sheet .panel-title { color: #1a3b61; border-bottom: 1px solid #c9d7e6; background: linear-gradient(100deg, #e8f0f8, #d6e4f2); }
.today-page .overview-sheet .panel-title h2 { color: #1a4778; }
.today-page .overview-sheet .panel-title span { color: #62758b; }

.overview-sheet {
  padding: 18px;
  border-radius: 16px;
  background: linear-gradient(145deg, #f7f9fc, #edf2f8);
  box-shadow: 0 28px 70px rgba(0,0,0,.28), inset 0 1px #fff;
}
.sheet-title { margin: 1px 0 17px; color: #12233a; text-align: center; font-size: 24px; font-weight: 900; letter-spacing: -.02em; }
.overview-grid { display: grid; grid-template-columns: minmax(380px, .95fr) minmax(420px, 1.2fr); gap: 14px; align-items: start; }
.panel, .section-card {
  overflow: hidden;
  border: 1px solid #e3e6ea;
  border-radius: var(--radius-card);
  background: #fff;
  box-shadow: none;
}
.panel-title, .section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 50px;
  padding: 12px 15px;
  border-bottom: 1px solid #e5e7eb;
}
.overview-sheet .panel-title { color: #fff; border-bottom: 0; background: linear-gradient(100deg, #10254a, #315fbe); }
.overview-sheet .panel-title h2 { color: #fff; }
.overview-sheet .panel-title span { color: #c5d3e3; }
.panel-title h2, .section-title h2 { margin: 0; color: var(--blue); font-size: 16px; }
.panel-title span, .section-title span { color: var(--muted); font-size: 11px; font-weight: 700; }
.summary-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.summary-table th { padding: 10px; color: #6d7888; background: #edf2f7; border-bottom: 1px solid #dce3eb; font-size: 11px; text-align: left; }
.summary-table td { padding: 12px 10px; border-bottom: 1px solid #f0f1f3; font-size: 14px; vertical-align: top; }
.summary-table tr:last-child td { border-bottom: 0; }
.summary-table .qty { width: 54px; color: var(--red); font-size: 17px; font-weight: 900; }
.summary-table .product { font-weight: 800; overflow-wrap: anywhere; }
.summary-table .times { color: var(--blue-dark); font-size: 13px; font-weight: 800; overflow-wrap: anywhere; }

.order-list { display: grid; gap: 11px; padding: 12px; }
.overview-order {
  overflow: hidden;
  border: 1px solid #e0e3e7;
  border-radius: 10px;
  background: #fafafc;
}
.overview-order.complete { border-color: #b9dfc6; background: #f0faf3; }
.overview-order-head {
  display: grid;
  grid-template-columns: auto auto auto 1fr;
  align-items: center;
  gap: 8px;
  padding: 9px 11px;
  background: #e5e5ea;
}
.overview-order.complete .overview-order-head { background: #d9f0e0; }
.overview-name { font-size: 15px; font-weight: 900; }
.pickup { color: var(--green); font-size: 12px; font-weight: 900; white-space: nowrap; }
.pickup.urgent { color: var(--red); }
.pickup.soon { color: var(--orange); }
.pickup.unknown { color: #8e8e93; }
.pickup.mail { color: var(--purple); }
.serial { color: #718096; font-size: 11px; font-weight: 800; white-space: nowrap; }
.note-inline { overflow: hidden; color: #4a5568; font-size: 11px; white-space: nowrap; text-overflow: ellipsis; }
.overview-items { padding: 7px 12px 4px; }
.overview-item { display: flex; flex-wrap: wrap; align-items: baseline; gap: 5px; margin: 8px 0; font-size: 14px; font-weight: 800; }
.overview-item.done .product-name { color: #8e8e93; }
.item-qty { color: #ff9500; }
.item-state { color: var(--red); font-size: 12px; }
.item-state.done { color: #8e8e93; }
.overview-total { padding: 7px 12px 10px; border-top: 1px dashed #dfe2e6; color: #3a3a3c; text-align: right; font-size: 13px; font-weight: 900; }

.search-panel { display: grid; grid-template-columns: 1fr auto; gap: 8px; flex: 1; }
.search-panel input { min-width: 0; }
.filter-row { flex-wrap: wrap; }
.chip {
  height: 34px;
  border: 1px solid #d7dce2;
  border-radius: 999px;
  padding: 0 13px;
  color: #edf4fb;
  background: rgba(255,255,255,.07);
  font-size: 12px;
  font-weight: 800;
}
.chip.active { color: #172033; border-color: #e6cc82; background: #e6cc82; box-shadow: 0 6px 18px rgba(214,184,95,.18); }
.history-list { display: grid; gap: 9px; padding: 12px; }
.history-kpis { margin-top: 12px; }
.section-spacer { height: 10px; }
.history-row {
  display: grid;
  grid-template-columns: minmax(190px, 1.2fr) 105px 90px 90px minmax(220px, 1.6fr);
  align-items: center;
  gap: 10px;
  min-height: 64px;
  padding: 10px 14px;
  border: 1px solid #e1e5ea;
  border-radius: 12px;
  background: #fff;
  box-shadow: none;
  text-align: left;
}
.history-row:active { border-color: var(--blue); background: #f8fbff; }
.history-main strong { display: block; font-size: 14px; }
.history-main span, .history-cell small { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; }
.history-cell { overflow: hidden; font-size: 12px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.history-note { font-weight: 500; }
.status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: max-content;
  min-width: 54px;
  min-height: 26px;
  border-radius: 7px;
  padding: 0 8px;
  color: #166534;
  background: #dcfce7;
  font-size: 11px;
  font-weight: 900;
}
.status-badge.cancelled { color: #64748b; background: #e5e7eb; }
.status-badge.refunded { color: #9a3412; background: #ffedd5; }
.status-badge.partial-refund { color: #92400e; background: #fef3c7; }
.status-badge.updated { color: #1d4ed8; background: #dbeafe; }
.load-more { display: block; min-width: 150px; margin: 16px auto 4px; }

.kpi-action {
  width: 100%;
  border: 0;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.kpi-action strong { color: #e6cc82; }
.kpi-action:focus-visible { outline: 3px solid #f4d37e; outline-offset: 3px; }
.cake-history-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 10px;
}
.cake-history-title { min-width: 0; text-align: right; }
.cake-history-title strong { display: block; color: #fff; font-size: 22px; }
.cake-history-title span { display: block; margin-top: 3px; color: #b8c6d8; font-size: 12px; font-weight: 800; }
.cake-history-tools {
  display: grid;
  grid-template-columns: minmax(0, 210px) minmax(0, 1fr);
  gap: 10px;
  margin-bottom: 14px;
  padding: 12px;
  background: #202f43;
}
.cake-history-tools > * { min-width: 0; }
.cake-history-tools label,
.cake-history-scope { display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: 9px; min-width: 0; }
.cake-history-tools label > span { color: #dce6f2; font-size: 12px; font-weight: 900; white-space: nowrap; }
.cake-history-scope > button {
  min-height: 36px;
  border: 1px solid #61738a;
  border-radius: 8px;
  color: #f4d37e;
  background: #17253a;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}
.cake-history-scope > button:active { transform: translateY(1px); }
.cake-history-scope > strong {
  min-height: 42px;
  display: grid;
  place-items: center;
  color: #17253a;
  background: #f4d37e;
  border-radius: 10px;
  font-size: 14px;
}
.cake-history-tools input {
  inline-size: 100%;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}
.cake-history-tools input[type="month"] { -webkit-appearance: none; appearance: none; }
.cake-history-tools input[type="month"]::-webkit-date-and-time-value { min-width: 0; margin: 0; text-align: center; }
.cake-history-search-panel { grid-template-columns: minmax(0,1fr) 88px 88px; }
.cake-history-search-panel .button { min-width: 0; padding: 0 8px; white-space: nowrap; }

.month-block { margin-bottom: 24px; }
.month-heading { display: flex; align-items: center; gap: 12px; margin: 0 0 10px; color: #fff; }
.month-heading::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(214,184,95,.62), transparent); }
.month-heading h2 { margin: 0; font-size: 20px; }
.day-block { margin-bottom: 14px; }
.day-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  padding: 0 15px;
  color: #fff;
  background: linear-gradient(100deg, #214eb4, #3c7df5);
  font-size: 15px;
  font-weight: 900;
}
.day-heading.today { background: linear-gradient(100deg, #a94427, #d57738); }
.day-cake-count { flex: 0 0 auto; color: #fff; font-size: 13px; font-weight: 900; }
.cake-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding-top: 10px; }
.cake-card {
  min-width: 0;
  padding: 13px 13px 11px;
  border: 0;
  background: radial-gradient(circle at 100% 0%, rgba(50,111,241,.09), transparent 42%), linear-gradient(150deg, #fff, #f4f7fb);
  box-shadow: 0 15px 34px rgba(0,0,0,.18);
}
.cake-card-main { display: grid; grid-template-columns: minmax(0,1fr) 96px; align-items: stretch; gap: 11px; }
.cake-card-copy { min-width: 0; }
.cake-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cake-customer { margin: 0 0 7px; font-size: 19px; font-weight: 900; }
.cake-time { flex: 0 0 auto; margin-bottom: 8px; color: var(--blue-dark); font-size: 16px; font-weight: 900; font-variant-numeric: tabular-nums; }
.cake-time.unknown { color: var(--muted); font-size: 12px; }
.cake-note { margin: 0 0 9px; color: #374151; font-size: 15px; line-height: 1.48; white-space: pre-wrap; overflow-wrap: anywhere; }
.cake-product { color: #a74423; font-size: 16px; font-weight: 900; line-height: 1.45; }
.cake-thumb { position: relative; display: grid; width: 96px; min-height: 126px; place-items: center; align-self: stretch; overflow: hidden; border: 0; border-radius: 10px; padding: 0; color: #fff; background: #dfe7f1; cursor: pointer; }
.cake-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cake-thumb span { position: absolute; right: 5px; bottom: 5px; border-radius: 5px; padding: 3px 6px; color: #fff; background: rgba(18,35,57,.78); font-size: 9px; font-weight: 900; }
.cake-thumb.empty span { position: static; max-width: 90px; color: #627287; background: transparent; line-height: 1.35; text-align: center; }
.cake-foot { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: 10px; padding-top: 8px; border-top: 1px solid #e3e8ef; color: #7b8797; font-size: 10px; }
.cake-foot strong { color: var(--orange); font-size: 15px; }
.cake-load-sentinel, .ranking-sentinel { min-height: 44px; padding: 14px 8px 8px; color: #aab9ca; text-align: center; font-size: 12px; font-weight: 800; }

.reminder-list { display: grid; gap: 11px; }
.reminder-hero { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px; overflow: hidden; margin-bottom: 12px; padding: 18px 20px; border: 0; border-radius: var(--radius-card); color: #fff; background: linear-gradient(125deg, #132a58, #2b66cd); box-shadow: 0 20px 48px rgba(0,0,0,.24); }
.reminder-hero::after { position: absolute; top: -54px; right: 54px; width: 150px; height: 150px; border: 24px solid rgba(255,255,255,.045); border-radius: 50%; content: ""; }
.reminder-hero .eyebrow { display: none; }
.reminder-hero h2 { margin: 0 0 3px; font-size: 20px; }
.reminder-hero p { margin: 0; color: #e1e9f2; font-size: 13px; }
.reminder-hero > strong { position: relative; z-index: 1; color: #f4d37e; font-size: 38px; line-height: 1; text-shadow: 0 8px 24px rgba(0,0,0,.18); }
.reminder-card {
  display: grid;
  grid-template-columns: 190px 1fr;
  border: 1px solid #d7dce2;
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
}
.reminder-person { padding: 16px; background: #f8fafc; border-right: 1px solid #e2e8f0; }
.reminder-person strong { display: block; font-size: 20px; }
.reminder-person p { margin: 7px 0 0; color: #64748b; font-size: 13px; line-height: 1.45; white-space: pre-wrap; }
.reminder-items { display: grid; gap: 0; padding: 9px 16px; }
.reminder-item { display: flex; justify-content: space-between; gap: 14px; padding: 10px 0; border-bottom: 1px solid #eef0f2; font-size: 15px; font-weight: 800; }
.reminder-item:last-child { border-bottom: 0; }
.reminder-item b { color: var(--orange); }

.chart-card { padding: 16px; border: 1px solid #e1e5ea; border-radius: var(--radius-card); background: #fff; box-shadow: none; }
.chart-card h2 { margin: 0 0 4px; font-size: 17px; }
.chart-card > p { margin: 0 0 15px; color: var(--muted); font-size: 11px; }

.business-nav, .insight-nav { display: flex; gap: 5px; overflow-x: auto; scrollbar-width: none; }
.business-nav::-webkit-scrollbar, .insight-nav::-webkit-scrollbar { display: none; }
.business-nav { margin-bottom: 12px; padding: 5px; border: 1px solid rgba(143,180,219,.18); border-radius: 13px; background: rgba(255,255,255,.07); box-shadow: inset 0 1px rgba(255,255,255,.06); }
.business-nav button, .insight-nav button { flex: 1; min-width: 92px; height: 39px; border: 0; border-radius: 9px; color: #d9e3ee; background: transparent; font-size: 13px; font-weight: 900; white-space: nowrap; }
.business-nav button.active { color: #102036; background: linear-gradient(135deg, #f0d88f, #d2ad4f); box-shadow: 0 7px 18px rgba(0,0,0,.22), inset 0 1px rgba(255,255,255,.45); }
.insight-nav { margin-bottom: 12px; border-bottom: 1px solid rgba(181,201,223,.25); }
.insight-nav button { flex: 0 0 auto; min-width: 105px; border-radius: 0; }
.insight-nav button.active { color: #f1d787; box-shadow: inset 0 -3px #d6b85f; }
.range-toolbar, .attendance-toolbar { display: flex; align-items: end; gap: 8px; margin-bottom: 13px; padding: 12px; border: 0; border-radius: 13px; color: #fff; background: linear-gradient(135deg, rgba(21,48,96,.96), rgba(7,18,37,.97)); box-shadow: 0 14px 34px rgba(0,0,0,.16); }
.range-toolbar > div { width: 155px; }
.range-toolbar span { display: block; margin-bottom: 5px; color: #d8e2ed; font-size: 10px; font-weight: 900; }
.range-toolbar input, .attendance-toolbar input { min-height: 39px; }
.range-toolbar .apply-range { min-width: 104px; border: 1px solid rgba(255,255,255,.7); color: #10233f; background: #dbeafe; box-shadow: 0 7px 18px rgba(48,124,235,.22); font-weight: 900; }
.range-toolbar .apply-range:hover { background: #eff6ff; }
.range-toolbar > p { margin: 0 0 10px 8px; color: #d8e2ed; font-size: 11px; }
.month-picker { display: flex; align-items: center; width: max-content; max-width: 100%; gap: 10px; margin-bottom: 12px; padding: 9px 11px; border: 0; border-radius: 11px; color: #fff; background: linear-gradient(135deg, rgba(21,48,96,.96), rgba(7,18,37,.97)); box-shadow: 0 14px 34px rgba(0,0,0,.16); }
.month-picker label { color: #d1dae5; font-size: 11px; font-weight: 900; white-space: nowrap; }
.month-picker input { width: 150px; min-height: 38px; }
.analytics-stack { display: grid; gap: 13px; }
.month-bars { display: grid; gap: 12px; padding-top: 4px; }
.month-bar-row { display: grid; grid-template-columns: 145px minmax(120px,1fr) 132px; align-items: center; gap: 12px; }
.month-caption strong, .month-caption small { display: block; }
.month-caption small { margin-top: 3px; color: #94a3b8; font-size: 9px; }
.multi-bars { display: grid; gap: 3px; }
.multi-bars i { display: block; width: var(--value); min-width: 2px; height: 6px; border-radius: 6px; }
.multi-bars .gross { background: #2563eb; }
.multi-bars .receipt { background: #d97706; }
.multi-bars .profit { background: #16a34a; }
.chart-legend { display: flex; align-items: center; gap: 10px; margin-top: 5px; }
.chart-legend span { position: relative; max-width: none !important; padding-left: 9px; color: #64748b; font-size: 9px; font-weight: 800; }
.chart-legend span::before { position: absolute; top: 50%; left: 0; width: 6px; height: 6px; border-radius: 50%; content: ""; transform: translateY(-50%); }
.chart-legend .gross::before { background: #2563eb; }
.chart-legend .receipt::before { background: #d97706; }
.chart-legend .profit::before { background: #16a34a; }
.month-values { text-align: right; }
.month-values span, .month-values b { display: block; font-size: 11px; }
.month-values b { margin-top: 3px; color: #16a34a; }
.share-trend { display: flex; gap: 8px; overflow-x: auto; padding: 6px 1px 3px; }
.share-point { flex: 0 0 112px; padding: 12px; border-top: 2px solid #7c3aed; background: #f8f7fc; }
.share-point span, .share-point strong, .share-point small { display: block; }
.share-point span { color: #64748b; font-size: 10px; font-weight: 900; }
.share-point strong { margin: 5px 0; font-size: 16px; }
.share-point small { color: #64748b; font-size: 10px; font-weight: 900; }
.share-point small.up { color: #15803d; }
.share-point small.down { color: #dc2626; }
.line-chart-scroll { overflow-x: auto; overflow-y: hidden; padding: 3px 0 5px; scrollbar-width: thin; scrollbar-color: #c7cfda transparent; }
.line-chart { display: block; max-width: none; }
.line-grid line { stroke: #e4e9f0; stroke-width: 1; }
.line-grid text { fill: #7c8798; font-size: 10px; text-anchor: end; }
.line-month { fill: #526174; font-size: 11px; font-weight: 800; text-anchor: middle; }
.line-series { fill: none; stroke: var(--series); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.line-point circle { fill: #fff; stroke: var(--series); stroke-width: 3; vector-effect: non-scaling-stroke; }
.line-point text { fill: var(--series); font-size: 10px; font-weight: 900; text-anchor: middle; }
.chart-ledger { display: flex; gap: 7px; overflow-x: auto; padding: 9px 1px 2px; scrollbar-width: none; }
.chart-ledger::-webkit-scrollbar { display: none; }
.chart-ledger > div { flex: 0 0 138px; padding: 10px; border: 1px solid #e3e8ef; border-radius: 9px; background: #f8fafc; }
.chart-ledger strong, .chart-ledger span, .chart-ledger small { display: block; }
.chart-ledger strong { margin-bottom: 5px; color: #263548; font-size: 12px; }
.chart-ledger span { color: #526174; font-size: 10px; line-height: 1.55; }
.chart-ledger small { margin-top: 4px; color: #64748b; font-size: 10px; font-weight: 800; }
.share-change-strip { display: flex; gap: 6px; overflow-x: auto; padding: 8px 0 1px; scrollbar-width: none; }
.share-change-strip::-webkit-scrollbar { display: none; }
.share-change-strip span { flex: 0 0 78px; color: #64748b; font-size: 10px; font-weight: 900; text-align: center; }
.share-change-strip b { display: block; margin-bottom: 2px; color: #334155; }
.share-change-strip .up { color: #15803d; }
.share-change-strip .down { color: #dc2626; }
.ranking-card, .attendance-card { border: 1px solid #dfe3e8; border-radius: var(--radius-card); background: #fff; box-shadow: none; overflow: hidden; }
.refund-kpis { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 9px; margin-bottom: 12px; }
.refund-kpis > div { min-width: 0; padding: 14px; border: 1px solid #e1e5ea; border-radius: 12px; background: #fff; }
.refund-kpis span, .refund-kpis strong, .refund-kpis small { display: block; }
.refund-kpis span { color: #64748b; font-size: 12px; font-weight: 850; }
.refund-kpis strong { margin: 7px 0 2px; color: #9a3412; font-size: 24px; font-variant-numeric: tabular-nums; }
.refund-kpis small { color: #64748b; font-size: 12px; }
.refund-analytics-layout { display: grid; grid-template-columns: minmax(260px,.72fr) minmax(420px,1.28fr); gap: 12px; align-items: start; }
.refund-method-list, .refund-event-list { display: grid; }
.refund-method-list > div { display: grid; grid-template-columns: minmax(0,1fr) auto auto; align-items: center; gap: 10px; padding: 13px 15px; border-bottom: 1px solid #edf0f2; }
.refund-method-list > div:last-child, .refund-event-list > div:last-child { border-bottom: 0; }
.refund-method-list span { color: #64748b; font-size: 12px; }
.refund-method-list b { color: #9a3412; font-size: 15px; }
.refund-event-list > div { display: grid; grid-template-columns: 70px minmax(0,1fr) auto; align-items: center; gap: 11px; padding: 12px 15px; border-bottom: 1px solid #edf0f2; }
.refund-event-list i { color: #9a3412; font-size: 12px; font-style: normal; font-weight: 900; }
.refund-event-list strong, .refund-event-list small, .refund-event-list time { display: block; }
.refund-event-list small { margin-top: 3px; color: #64748b; font-size: 11px; overflow-wrap: anywhere; }
.refund-event-list time { color: #475569; font-size: 12px; font-style: normal; text-align: right; }
.repeat-summary { margin-bottom: 13px; overflow: hidden; border: 1px solid #dfe3e8; border-radius: var(--radius-card); background: #fff; }
.repeat-summary > .section-title { padding: 15px 16px; border-bottom: 1px solid #edf0f2; }
.repeat-metrics { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.repeat-metrics > div { min-width: 0; padding: 15px 14px; border-right: 1px solid #edf0f2; }
.repeat-metrics > div:last-child { border-right: 0; }
.repeat-metrics span, .repeat-metrics strong, .repeat-metrics small, .repeat-windows span, .repeat-windows strong, .repeat-windows small { display: block; }
.repeat-metrics span, .repeat-windows span { color: #64748b; font-size: 11px; font-weight: 800; }
.repeat-metrics strong { margin: 6px 0 3px; color: #172033; font-size: 21px; font-variant-numeric: tabular-nums; }
.repeat-metrics small, .repeat-windows small { color: #7c8798; font-size: 10px; line-height: 1.45; }
.repeat-windows { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid #edf0f2; background: #f7f9fc; }
.repeat-windows > div { padding: 12px 14px; border-right: 1px solid #e6eaf0; }
.repeat-windows > div:last-child { border-right: 0; }
.repeat-windows strong { margin: 4px 0 2px; color: #1d4ed8; font-size: 17px; font-variant-numeric: tabular-nums; }
.ranking-card .section-title, .attendance-card .section-title { padding: 15px 16px; border-bottom: 1px solid #edf0f2; }
.ranking-list, .product-ranking, .transaction-list, .attendance-list { display: grid; }
.ranking-row, .product-rank-row { display: grid; grid-template-columns: 38px minmax(0,1fr) auto; align-items: center; gap: 11px; padding: 13px 16px; border-bottom: 1px solid #edf0f2; }
.ranking-row:last-child, .product-rank-row:last-child { border-bottom: 0; }
.rank { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 9px; color: #64748b; background: #eef1f5; font-size: 11px; font-weight: 900; }
.rank.top { color: #fff; background: #c46a27; }
.ranking-row strong, .ranking-row small, .product-rank-row strong, .product-rank-row small { display: block; }
.ranking-row small, .product-rank-row small { margin-top: 3px; color: #64748b; font-size: 10px; }
.ranking-row > b, .product-rank-row > b { color: #c2410c; font-size: 15px; }
.member-layout { display: grid; grid-template-columns: minmax(280px,.85fr) minmax(360px,1.15fr); gap: 12px; }
.member-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; padding: 12px; }
.member-card { position: relative; min-height: 106px; padding: 14px; border: 1px solid #e1e5ea; border-radius: 11px; background: #fafbfc; }
.member-card strong, .member-card small { display: block; }
.member-card strong { font-size: 16px; }
.member-card small { max-height: 38px; margin-top: 4px; overflow: hidden; color: #64748b; font-size: 10px; }
.member-card b { display: block; margin-top: 10px; color: #b91c1c; font-size: 19px; }
.member-card > span { position: absolute; right: 10px; bottom: 8px; color: #a1a7b0; font-size: 8px; }
.transaction-row { display: grid; grid-template-columns: minmax(0,1fr) 62px 88px 104px; align-items: center; gap: 8px; padding: 12px 15px; border-bottom: 1px solid #edf0f2; }
.transaction-row strong, .transaction-row small { display: block; }
.transaction-row small { margin-top: 3px; color: #64748b; font-size: 9px; }
.transaction-row > span, .transaction-row > b, .transaction-row > em { font-size: 12px; text-align: right; }
.transaction-row > em { color: #64748b; font-size: 10px; font-style: normal; }
.transaction-kind { justify-self: end; border-radius: 6px; padding: 4px 7px; background: #f1f5f9; font-size: 10px !important; font-weight: 900; }
.transaction-kind.positive { background: #dcfce7; }
.transaction-kind.negative { background: #fee2e2; }
.transaction-amount { font-size: 13px !important; }
.transaction-row .positive { color: #15803d; }
.transaction-row .negative { color: #dc2626; }
.attendance-toolbar .segmented { margin-right: auto; }
.attendance-toolbar input { width: 150px; }
.attendance-row { display: grid; grid-template-columns: 70px 150px minmax(230px,1fr) 115px; align-items: center; gap: 10px; padding: 13px 16px; border-bottom: 1px solid #edf0f2; }
.attendance-row:last-child { border-bottom: 0; }
.attendance-date strong, .attendance-date span, .attendance-person strong, .attendance-person span, .attendance-hours strong, .attendance-hours span { display: block; }
.attendance-date strong { font-size: 17px; }
.attendance-date span, .attendance-person span, .attendance-hours span { margin-top: 3px; color: #64748b; font-size: 9px; }
.attendance-person strong { font-size: 14px; }
.attendance-times { display: flex; flex-wrap: wrap; gap: 5px 13px; color: #475569; font-size: 11px; }
.attendance-hours { text-align: right; }
.attendance-hours strong { color: #1d4ed8; font-size: 14px; }

.empty-state { padding: 56px 20px; color: #8e8e93; text-align: center; font-size: 14px; font-weight: 700; }
.error-state { padding: 30px 20px; border: 1px solid #fecaca; border-radius: 12px; color: #b91c1c; background: #fff1f2; text-align: center; }

.tabbar {
  position: fixed;
  z-index: 40;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  max-width: 620px;
  margin: 0 auto;
  padding: 7px max(8px, env(safe-area-inset-right)) calc(7px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
  border: 1px solid rgba(143,180,219,.22);
  border-bottom: 0;
  border-radius: 17px 17px 0 0;
  background: rgba(8,18,32,.96);
  box-shadow: 0 -14px 40px rgba(0,0,0,.35), inset 0 1px rgba(255,255,255,.06);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.tabbar button { position: relative; display: grid; min-width: 0; place-content: center; justify-items: center; gap: 3px; height: 52px; border: 0; border-radius: 9px; color: #c5cfdb; background: transparent; font-weight: 900; letter-spacing: .02em; }
.tab-icon { font-size: 18px; line-height: 1; filter: saturate(.82); }
.tab-label { font-size: 12px; line-height: 1.15; white-space: nowrap; }
.tabbar button.active { color: #fff; background: linear-gradient(145deg, #376fe4, #1b3d87); box-shadow: 0 9px 22px rgba(0,0,0,.3), inset 0 1px rgba(255,255,255,.18); }
.tabbar button.active::before { position: absolute; top: 0; right: 18%; left: 18%; height: 2px; border-radius: 0 0 4px 4px; background: #f0d47f; content: ""; box-shadow: 0 0 12px rgba(240,212,127,.65); }
.tabbar button.active .tab-icon { filter: saturate(1.05); }
.tab-badge { position: absolute; top: 3px; right: max(4px,14%); display: grid; min-width: 17px; height: 17px; place-items: center; border: 2px solid #0b1728; border-radius: 9px; padding: 0 3px; color: #fff; background: #e5484d; font-size: 8px; font-weight: 900; line-height: 1; box-shadow: 0 4px 10px rgba(229,72,77,.32); }

.online-page { max-width: 980px; }
.online-entry-hero { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 12px; padding: 22px; border: 1px solid rgba(132,170,220,.18); border-radius: 16px; color: #fff; background: linear-gradient(130deg,#102b56,#173f78 58%,#235999); box-shadow: 0 18px 42px rgba(4,16,34,.24); }
.online-entry-hero span { color: #a9c7ed; font-size: 11px; font-weight: 900; letter-spacing: .12em; }
.online-entry-hero h2 { margin: 4px 0 6px; font-size: 25px; }
.online-entry-hero p { max-width: 600px; margin: 0; color: #dce8f7; font-size: 13px; line-height: 1.55; }
.online-entry-actions { display: flex; flex: 0 0 auto; gap: 7px; }
.online-entry-hero button { flex: 0 0 auto; min-width: 112px; height: 46px; border: 1px solid rgba(255,255,255,.5); border-radius: 10px; color: #173153; background: #fff; font-size: 13px; font-weight: 900; box-shadow: 0 10px 24px rgba(0,0,0,.2); }
.online-entry-hero button + button { color: #fff; background: rgba(255,255,255,.12); }
.online-overview { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin-bottom: 12px; }
.online-overview > div { display: flex; align-items: baseline; justify-content: space-between; padding: 15px 17px; border: 1px solid #dce5ef; border-radius: 12px; background: #fff; }
.online-overview span { color: #69788b; font-size: 12px; font-weight: 800; }
.online-overview strong { color: #153b76; font-size: 26px; }
.online-history-card { overflow: hidden; border: 1px solid #dfe6ee; border-radius: 14px; background: #fff; }
.online-history-card > .section-title { padding: 15px 16px; border-bottom: 1px solid #edf1f5; }
.online-history-list article { display: grid; grid-template-columns: minmax(0,1fr) auto 86px; align-items: center; gap: 12px; padding: 13px 16px; border-bottom: 1px solid #edf1f5; }
.online-history-list article:last-child { border-bottom: 0; }
.online-history-list article div strong,.online-history-list article div span { display: block; }
.online-history-list article div strong { color: #1c2c42; font-size: 15px; }
.online-history-list article div span { margin-top: 3px; color: #738196; font-size: 11px; }
.online-history-list article > b { color: #b44c28; font-size: 15px; }
.online-history-list article > em { border-radius: 6px; padding: 5px 7px; color: #2b5a91; background: #e7f0fa; font-size: 10px; font-style: normal; font-weight: 900; text-align: center; }
.online-history-list article > em.completed { color: #25704e; background: #e5f5ec; }
.online-history-list article > em.rejected { color: #9b3344; background: #fbe8eb; }
.online-history-list article.rejected { background:#fff8f9; }
.online-history-list article div strong i { display:inline-block; margin-right:7px; border-radius:5px; padding:3px 6px; color:#315b88; background:#eaf1f9; font-size:10px; font-style:normal; vertical-align:1px; }
.online-request-title { align-items:flex-start; gap:10px; }
.online-request-filters { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:6px; }
.online-request-filters button { min-height:32px; border:1px solid #d7e1ec; border-radius:7px; padding:0 10px; color:#51667d; background:#f6f8fb; font:inherit; font-size:11px; font-weight:850; }
.online-request-filters button.active { border-color:#487dbd; color:#fff; background:#315f96; }
.menu-admin-page { max-width: 1100px; }
.menu-admin-hero { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 12px; padding: 20px 22px; border: 1px solid rgba(121,164,218,.2); border-radius: 16px; color: #fff; background: linear-gradient(132deg,#102846,#193e69 62%,#245584); box-shadow: 0 18px 44px rgba(2,13,29,.25); }
.menu-admin-hero > div:first-child > span { color: #a9c9ee; font-size: 10px; font-weight: 900; letter-spacing: .13em; }
.menu-admin-hero h2 { margin: 4px 0 5px; font-size: 25px; }
.menu-admin-hero p { margin: 0; color: #d9e7f5; font-size: 12px; }
.menu-admin-hero > div:last-child { display: flex; gap: 7px; }
.menu-admin-tabs { display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr)); min-width:min(360px,45vw); gap:7px; }
.menu-admin-tabs button { min-height:44px; border:1px solid rgba(255,255,255,.28); border-radius:9px; padding:0 14px; color:#d8e7f6; background:rgba(255,255,255,.08); font:inherit; font-size:13px; font-weight:900; }
.menu-admin-tabs button.active { color:#14375e; background:#fff; }
.menu-readonly { margin-bottom: 12px; padding: 11px 14px; border: 1px solid #d9e4ef; border-radius: 10px; color: #52657c; background: #edf3f8; font-size: 12px; font-weight: 800; }
.menu-settings-card { margin-bottom: 12px; overflow: hidden; border: 1px solid #dce4ed; border-radius: 14px; background: #fff; box-shadow: 0 10px 28px rgba(24,45,72,.07); }
.menu-settings-card > .section-title { padding: 14px 16px; border-bottom: 1px solid #edf1f5; }
.menu-settings-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; overflow:hidden; padding: 15px 16px; }
.menu-settings-grid label { min-width:0; overflow:hidden; }
.menu-settings-grid label > span,.menu-product-editor label > span { display: block; margin-bottom: 5px; color: #64748b; font-size: 10px; font-weight: 900; }
.menu-settings-grid .wide,.menu-product-editor .wide { grid-column: 1 / -1; }
.menu-settings-grid input,.menu-settings-grid textarea,.menu-product-editor input,.menu-product-editor select,.menu-category-row input { width: 100%; min-width:0; max-width:100%; box-sizing:border-box; border: 1px solid #d4dce5; border-radius: 8px; padding: 0 10px; color: #1d2a3c; background: #f9fbfd; font: inherit; font-size: 13px; font-weight: 700; }
.menu-settings-grid input,.menu-product-editor input,.menu-product-editor select,.menu-category-row input { height: 40px; }
.menu-settings-grid input:disabled { color: #52657b; background: #edf2f7; border-color: #dbe3ec; opacity: 1; }
.menu-settings-grid textarea { min-height: 78px; padding-top: 9px; padding-bottom: 9px; resize: vertical; }
.menu-settings-grid input:focus,.menu-settings-grid textarea:focus,.menu-product-editor input:focus,.menu-product-editor select:focus,.menu-category-row input:focus { outline: 2px solid rgba(47,111,218,.2); border-color: #4a81cb; }
.menu-settings-grid .menu-check { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 11px; border: 1px solid #dce4ed; border-radius: 8px; background: #f8fafc; }
.menu-settings-grid .menu-check input { flex: 0 0 auto; width: 18px; height: 18px; }
.menu-settings-grid .menu-check span { margin: 0; color: #33445a; font-size: 12px; }
.menu-category-list { display: grid; gap: 8px; padding: 13px 16px 16px; }
.menu-category-row { display: grid; grid-template-columns: 36px 40px minmax(0,1fr) 52px auto; align-items: center; gap: 7px; min-height: 48px; }
.menu-category-row input[type="color"] { width: 40px; padding: 3px; }
.menu-category-row span { color: #7b8797; font-size: 11px; font-weight: 900; text-align: right; }
.menu-drag-handle { display: grid; width: 36px; height: 42px; place-items: center; border: 0; border-radius: 7px; color: #52677e; background: #edf2f7; font-size: 15px; font-weight: 900; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.menu-drag-handle:active { cursor: grabbing; }
.menu-category-delete { width: 52px; height: 38px; border: 0; border-radius: 7px; color: #a33345; background: #fbe7ea; font-size: 11px; font-weight: 900; }
.menu-row-tools { display: flex; gap: 3px; }
.menu-row-tools button { width: 30px; height: 32px; border: 0; border-radius: 6px; color: #385777; background: #eaf0f6; font-size: 11px; font-weight: 900; }
.menu-row-tools button:last-child { color: #a33345; background: #fbe7ea; }
.menu-pos-products { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; padding: 13px 16px 16px; }
.menu-pos-products button { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 4px 8px; border: 1px solid #dce5ef; border-radius: 10px; padding: 11px; color: #21344d; background: #f8fbfe; text-align: left; }
.menu-pos-products span { overflow: hidden; font-size: 12px; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.menu-pos-products b { color: #b54b2a; font-size: 12px; }
.menu-pos-products em { grid-column: 1 / -1; color: #4775ad; font-size: 9px; font-style: normal; font-weight: 900; }
.menu-pos-categories { display:flex; flex-wrap:wrap; gap:8px; padding:13px 16px 16px; }
.menu-pos-categories button { min-height:36px; border:1px solid #cbd9e8; border-radius:8px; padding:0 13px; color:#294f7a; background:#f5f9fd; font:inherit; font-size:12px; font-weight:900; }
.menu-product-list { display: grid; gap: 14px; padding: 12px; }
.menu-product-group { overflow: hidden; border: 1px solid #dce4ec; border-radius: 12px; background: #f7f9fc; }
.menu-product-group-title { display:grid; grid-template-columns:34px 36px minmax(0,1fr) auto auto auto; align-items:center; gap:8px; min-height:54px; padding:7px 10px; border-bottom:1px solid #e1e7ee; color:#31445d; background:#edf2f7; }
.menu-product-group-title strong { font-size: 14px; }
.menu-product-group-title span { color: #748398; font-size: 10px; font-weight: 900; }
.menu-product-group-title > input[type="color"] { width:34px; height:34px; border:0; padding:2px; background:transparent; }
.menu-product-group-title > input:not([type="color"]) { width:100%; min-width:0; height:36px; border:1px solid transparent; border-radius:7px; padding:0 8px; color:#273d58; background:transparent; font:inherit; font-size:14px; font-weight:900; }
.menu-product-group-title > input:not([type="color"]):focus { border-color:#79a3d1; outline:0; background:#fff; box-shadow:inset 0 0 0 1px rgba(47,111,218,.14); }
.menu-product-group-title > strong { grid-column:1 / 4; }
.menu-group-toggle,.menu-category-delete { min-height:32px; border:0; border-radius:7px; padding:0 9px; font:inherit; font-size:11px; font-weight:850; }
.menu-group-toggle { color:#315e90; background:#fff; }
.menu-category-delete { color:#983649; background:#f9e5e9; }
.menu-product-group:not(.expanded) .menu-product-group-title { border-bottom:0; }
.menu-catalog-card .section-title { position:sticky; z-index:3; top:0; background:#fff; }
[data-menu-category-row].dragging { opacity:.55; }
[data-menu-category-row].drag-over { outline:2px solid #4d83ca; outline-offset:2px; }
.menu-product-group-list { display: grid; }
.menu-product-group-list[hidden] { display:none !important; }
.menu-product-card { overflow: hidden; border-bottom: 1px solid #e3e9f0; background: #fff; }
.menu-product-card:last-child { border-bottom: 0; }
.menu-product-row-main { display: grid; grid-template-columns: 36px 46px minmax(0,1fr) auto; align-items: center; gap: 9px; min-height: 68px; padding: 8px 10px; }
.menu-product-open { min-width: 0; border: 0; padding: 4px 0; color: #1f2f44; background: transparent; text-align: left; }
.menu-product-open > strong { display: block; overflow-wrap: anywhere; font-size: 14px; line-height: 1.35; }
.menu-product-subline { display: flex; align-items: center; gap: 7px; margin-top: 5px; }
.menu-product-subline b { color: #6d7c90; font-size: 11px; }
.menu-product-tag { border-radius:5px; padding:3px 6px; font-size:9px; font-style:normal; font-weight:900; line-height:1.2; }
.menu-product-tag.new { color:#875b0f; background:#fff0c8; }
.menu-product-tag.hot { color:#9b3b1e; background:#ffe2d3; }
.menu-product-quick-actions { display: grid; grid-template-columns: repeat(3,46px); gap: 5px; }
.menu-quick-button { position: relative; display: grid; width: 46px; height: 38px; place-items: center; overflow: hidden; border: 1px solid #d5dee9; border-radius: 7px; padding: 0; color: #43566e; background: #f7f9fc; font: inherit; font-size: 10px; font-weight: 900; text-align: center; }
.menu-quick-button input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.menu-quick-button.is-sold { border-color: #e4a7b0; color: #9c3042; background: #fbe8eb; }
.menu-quick-button.is-new { border-color: #e8ca82; color: #875b0f; background: #fff3d5; }
.menu-quick-button:disabled { opacity: .55; }
.menu-product-card > summary { display: grid; grid-template-columns: 30px 46px minmax(0,1fr) auto; align-items: center; gap: 9px; min-height: 62px; padding: 8px 11px; cursor: pointer; list-style: none; }
.menu-product-card > summary::-webkit-details-marker { display: none; }
.menu-product-thumb { display: grid; width: 46px; height: 46px; place-items: center; overflow: hidden; border-radius: 8px; color: #315176; background: #e7eef6; font-size: 20px; }
.menu-product-thumb img { width: 100%; height: 100%; object-fit: cover; }
.menu-product-card summary > div:nth-child(2) strong,.menu-product-card summary > div:nth-child(2) span { display: block; }
.menu-product-card summary > div:nth-child(2) strong { color: #1f2f44; font-size: 14px; }
.menu-product-card summary > div:nth-child(2) span { margin-top: 4px; color: #748398; font-size: 10px; }
.menu-product-state { display: inline-flex; border-radius: 5px; padding: 3px 6px; color: #29704f; background: #e5f4eb; font-size: 9px; font-style: normal; font-weight: 900; line-height: 1.2; }
.menu-product-state.pending { color: #946012; background: #fff2d5; }
.menu-product-group-title span.shared-pending { color:#8a5a0b; }
.menu-product-state.sold,.menu-product-state.off { color: #677587; background: #e9edf2; }
.menu-product-state.removed { color: #9e3345; background: #fbe7eb; }
.menu-category-row.dragging,.menu-product-card.dragging { opacity: .5; }
.menu-category-row.drag-over,.menu-product-card.drag-over { outline: 2px solid #4d83ca; outline-offset: 2px; }
.menu-sort-active { cursor: grabbing; user-select: none; -webkit-user-select: none; }
.menu-product-editor { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 11px; padding: 14px; border-top: 1px solid #e5ebf1; background: #fff; }
.menu-product-options { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 7px; }
.menu-product-options label { display: flex; align-items: center; gap: 5px; min-height: 34px; padding: 0 9px; border: 1px solid #dbe3ec; border-radius: 7px; color: #42546a; background: #f8fafc; font-size: 10px; font-weight: 900; }
.menu-product-options input { width: 16px; height: 16px; padding: 0; }
.menu-availability{margin:0;padding:11px;border:1px solid #dbe3ec;border-radius:10px}.menu-availability legend{padding:0 6px;color:#64748b;font-size:11px;font-weight:900}.menu-availability>div{display:flex;flex-wrap:wrap;gap:7px}.menu-availability label{display:flex!important;align-items:center;gap:5px;min-width:auto!important;padding:7px 9px;border-radius:8px;background:#f4f7fa;color:#42546a;font-size:11px;font-weight:850}.menu-availability input{width:15px!important;height:15px!important;margin:0;padding:0!important}
.menu-sold-date-editor{display:grid;gap:8px;padding:12px;border:1px solid #dbe3ec;border-radius:10px;background:#fbfcfe}.menu-sold-date-editor>span{color:#64748b;font-size:11px;font-weight:900}.menu-sold-date-add{display:grid;grid-template-columns:minmax(170px,240px) 96px;gap:8px}.menu-sold-date-add input{height:40px}.menu-sold-date-add .button{min-height:40px}.menu-sold-date-list{display:flex;flex-wrap:wrap;gap:7px;min-height:31px;align-items:center}.menu-sold-date-list>button{display:flex;align-items:center;gap:8px;min-height:31px;border:1px solid #d5deea;border-radius:7px;padding:0 9px;color:#274766;background:#eef4fa;font-size:12px;font-weight:850}.menu-sold-date-list>button span{color:#a03949;font-size:10px}.menu-sold-date-list>small{color:#8491a1;font-size:11px;font-weight:750}
.order-change-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:14px}.order-change-actions .button{min-height:42px}.order-change-compose{display:grid;gap:14px}.order-change-compose>label>span,.order-change-compose .online-order-grid label>span{display:block;margin-bottom:7px;color:#4b5d73;font-size:14px;font-weight:850}.refund-compose{padding:2px}.refund-compose>p.feedback{margin:0;padding:12px 14px;border-radius:10px;background:#eef4fb;color:#385a7c;font-size:14px;line-height:1.5}.change-item{display:grid;grid-template-columns:minmax(0,1fr) 58px 78px 52px;gap:7px;margin-bottom:8px}.change-item input,.refund-item input[type=number],#order-change-content textarea,#order-change-content input,#order-change-content select{min-width:0;border:1px solid #ccd7e3;border-radius:9px;padding:11px;background:#f9fbfd;color:#1f3047;font:inherit;font-size:16px}.refund-item{display:grid;grid-template-columns:26px minmax(0,1fr) 80px;align-items:center;gap:11px;padding:14px 2px;border-bottom:1px solid #e5ebf1}.refund-item input[type=checkbox]{width:20px;height:20px}.refund-item span{display:grid;gap:4px;min-width:0}.refund-item strong{font-size:16px;line-height:1.35}.refund-item small{color:#64748b;font-size:14px}.order-change-submit{position:sticky;bottom:0;margin:14px -18px -18px;padding:12px 18px max(14px,env(safe-area-inset-bottom));background:#fff;border-top:1px solid #e5ebf1}.order-change-submit .button{width:100%;min-height:46px;font-size:16px}
.refund-history{margin-top:14px;padding:15px;border:1px solid #f3cf92;background:#fff8eb}
.refund-history h3{margin:0 0 9px;font-size:17px;color:#92400e}
.refund-history-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 11px;padding:9px 0;border-top:1px solid #f4dfb9}
.refund-history-row:first-of-type{border-top:0}.refund-history-row strong,.refund-history-row span{font-size:15px;color:#3f2d1d}.refund-history-row small{grid-column:1/-1;font-size:13px;color:#7c6652}
@media(max-width:520px){.change-item{grid-template-columns:minmax(0,1fr) 52px 68px}.change-item .change-remove{grid-column:1/-1}.order-change-actions{grid-template-columns:1fr 1fr}.refund-compose .online-order-grid{grid-template-columns:1fr}.refund-compose .online-order-grid label:first-child{grid-column:auto}.refund-item{grid-template-columns:24px minmax(0,1fr) 76px}}
.menu-product-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 7px; }
.menu-product-actions .button { position: relative; min-height: 38px; }
.menu-product-actions input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.menu-product-actions .danger { color: #a32c3e; background: #fde6ea; }
.menu-upload-state { grid-column: 1 / -1; min-height: 0; margin: 0; color: #a32c3e; font-size: 11px; font-weight: 800; }
.menu-product-card > .menu-upload-state:not(:empty) { padding: 0 10px 8px 101px; }
.menu-admin-page { padding-bottom: calc(82px + env(safe-area-inset-bottom)); }
.menu-save-dock { position: fixed; z-index: 18; right: max(14px,env(safe-area-inset-right)); bottom: calc(10px + env(safe-area-inset-bottom)); left: max(14px,env(safe-area-inset-left)); display: flex; align-items: center; justify-content: space-between; gap: 12px; max-width: 1070px; margin: 0 auto; padding: 10px 12px; border: 1px solid rgba(137,169,209,.3); border-radius: 12px; color: #dbe8f5; background: rgba(9,26,47,.97); box-shadow: 0 12px 34px rgba(0,0,0,.28); backdrop-filter: blur(14px); }
.menu-save-dock span { font-size: 11px; font-weight: 800; }
.reminder-card-action { cursor: pointer; }
.reminder-card-action:active { transform: translateY(1px); }
.reminder-open-hint,.reminder-pending { display: inline-block; margin-top: 9px; border-radius: 6px; padding: 4px 7px; color: #3d6595; background: #e7eff8; font-size: 9px; font-weight: 900; }
.reminder-pending { color: #936115; background: #fff0cf; }
.reminder-edit-dialog { width: min(760px,calc(100% - 20px)); }
.reminder-edit-content { max-height: calc(100dvh - 90px); overflow-y: auto; padding: 15px; }
.reminder-action-notice { margin-bottom: 12px; padding: 10px 12px; border: 1px solid #efdba7; border-radius: 9px; color: #76551a; background: #fff6df; font-size: 11px; font-weight: 800; }
.reminder-edit-head { display: grid; grid-template-columns: minmax(170px,.8fr) minmax(0,1.6fr); gap: 9px; margin-bottom: 11px; }
.reminder-edit-head label > span,.reminder-edit-item label > span { display: block; margin-bottom: 5px; color: #64748b; font-size: 10px; font-weight: 900; }
.reminder-edit-head input,.reminder-edit-head textarea,.reminder-edit-item input { width: 100%; border: 1px solid #d4dde7; border-radius: 8px; padding: 0 9px; color: #203149; background: #f9fbfd; font: inherit; font-size: 13px; font-weight: 700; }
.reminder-edit-head input,.reminder-edit-item input { height: 40px; }
.reminder-edit-head textarea { min-height: 65px; padding-top: 9px; resize: vertical; }
.reminder-edit-items { overflow: hidden; border: 1px solid #dce4ed; border-radius: 11px; background: #fff; }
.reminder-edit-item { display: grid; grid-template-columns: minmax(0,1fr) 78px 104px 52px; align-items: end; gap: 8px; padding: 10px; border-bottom: 1px solid #edf1f5; }
.reminder-edit-item:last-child { border-bottom: 0; }
.reminder-edit-item > button { height: 38px; border: 0; border-radius: 7px; font-size: 10px; font-weight: 900; }
.reminder-fulfill-item { color: #28704f; background: #e3f4ea; }
.reminder-remove-edit { color: #a22f42; background: #fbe6ea; }
.reminder-editor-toolbar,.reminder-editor-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; }
.reminder-editor-toolbar span { color: #7a8798; font-size: 10px; font-weight: 800; }
.reminder-editor-actions { justify-content: flex-end; padding-top: 10px; border-top: 1px solid #e7ecf2; }
.reminder-editor-actions .danger { color: #fff; background: #b93649; }

dialog {
  width: min(700px, calc(100% - 24px));
  max-height: min(820px, calc(100vh - 30px));
  max-height: min(820px, calc(100dvh - 30px));
  padding: 0;
  border: 0;
  border-radius: 17px;
  color: var(--ink);
  background: #f2f2f7;
  box-shadow: 0 32px 100px rgba(0,0,0,.36);
}
.cake-media-dialog { width: min(940px, calc(100% - 24px)); }
#cake-media-content { padding: 14px; }
.cake-media-summary { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-bottom: 12px; color: #34445a; }
.cake-media-summary strong { color: #1e3a5f; font-size: 18px; }
.cake-media-summary span { color: #6b7b8f; font-size: 12px; font-weight: 700; }
.cake-carousel { display: flex; gap: 10px; overflow-x: auto; overscroll-behavior-x: contain; padding: 0 0 8px; scroll-snap-type: x mandatory; scrollbar-color: #8ea5c1 #e5eaf0; }
.cake-slide { position: relative; flex: 0 0 100%; min-width: 0; margin: 0; border-radius: 13px; background: #e9eef5; scroll-snap-align: center; overflow: hidden; }
.cake-photo-stage { position: relative; display: grid; min-height: min(44vh, 390px); place-content: center; padding: 12px; color: #738196; background: #e9eef5; text-align: center; }
.cake-photo-stage img { display: block; width: 100%; height: min(44vh, 390px); object-fit: contain; }
.cake-photo-open { position: relative; display: block; width: 100%; border: 0; padding: 0; background: transparent; cursor: zoom-in; }
.cake-photo-open span { position: absolute; right: 12px; bottom: 12px; border-radius: 7px; padding: 6px 9px; color: #fff; background: rgba(16,31,50,.82); font-size: 11px; font-weight: 900; }
.cake-photo-stage strong { color: #41546c; font-size: 16px; }
.cake-photo-stage small { display: block; margin-top: 7px; line-height: 1.45; }
.cake-slide figcaption { position: absolute; right: 12px; bottom: 12px; border-radius: 7px; padding: 5px 8px; color: #fff; background: rgba(16,31,50,.8); font-size: 11px; font-weight: 900; }
.cake-carousel-empty { display: grid; min-height: 210px; place-items: center; border-radius: 13px; color: #63748a; background: #e7edf4; font-size: 15px; font-weight: 900; }
.cake-slot-editor { display: grid; gap: 7px; margin-top: 12px; }
.cake-slot-row { display: grid; grid-template-columns: 74px minmax(0,1fr) 92px 72px; align-items: center; gap: 8px; min-height: 54px; padding: 8px 10px; border: 1px solid #dce3eb; border-radius: 10px; background: #fff; }
.cake-slot-row > span { color: #68788c; font-size: 12px; font-weight: 800; }
.cake-slot-row.archived { grid-template-columns: 74px 1fr; background: #e8edf3; }
.cake-upload-button, .cake-replace-button, .cake-delete-button { display: grid; min-height: 38px; place-items: center; border: 0; border-radius: 8px; font-size: 12px; font-weight: 900; cursor: pointer; }
.cake-upload-button, .cake-replace-button { color: #fff; background: #2458bd; }
.cake-delete-button { color: #9f2537; background: #fee5e9; }
.cake-upload-button input, .cake-replace-button input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.cake-media-feedback { min-height: 24px; margin: 12px 2px 0; color: #9f2537; font-size: 13px; font-weight: 800; }
.cake-media-feedback.working { color: #2458bd; }
.cake-media-loading { padding: 90px 20px; color: #68788c; text-align: center; font-weight: 800; }
.cake-photo-viewer { width: 100vw; max-width: none; height: 100vh; height: 100dvh; max-height: none; overflow: hidden; border-radius: 0; background: #070a0f; }
.cake-photo-viewer-stage, #cake-photo-viewer-stage { width: 100%; height: 100%; }
#cake-photo-viewer-stage img { width: 100%; height: 100%; object-fit: contain; }
.cake-photo-viewer-close { position: fixed; z-index: 2; top: max(14px, env(safe-area-inset-top)); right: max(14px, env(safe-area-inset-right)); min-width: 64px; height: 38px; border: 1px solid rgba(255,255,255,.42); border-radius: 8px; color: #fff; background: rgba(9,15,24,.78); font-size: 13px; font-weight: 900; }
dialog::backdrop { background: rgba(15,23,42,.55); backdrop-filter: blur(3px); }
.dialog-head { position: sticky; z-index: 2; top: 0; display: flex; align-items: center; justify-content: space-between; min-height: 54px; padding: 0 16px; color: #fff; background: var(--navy); font-weight: 900; }
.dialog-head button { height: 32px; border: 1px solid rgba(255,255,255,.22); border-radius: 7px; color: #fff; background: rgba(255,255,255,.08); }
#detail-content { padding: 14px; }
.detail-hero { padding: 15px; background: #fff; }
.detail-headline-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.detail-hero h2 { margin: 5px 0 4px; font-size: 22px; }
.detail-meta { color: #64748b; font-size: 12px; line-height: 1.7; }
.detail-note { margin: 10px 0 0; padding: 12px; background: #f8fafc; white-space: pre-wrap; line-height: 1.55; }
.money-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin: 10px 0; background: #e5e7eb; }
.money-cell { padding: 10px; background: #fff; text-align: center; }
.money-cell span { display: block; color: #64748b; font-size: 10px; font-weight: 800; }
.money-cell strong { display: block; margin-top: 3px; color: var(--orange); font-size: 17px; }
.money-cell .money-rmb { color: var(--green); }
.money-cell .money-rate { color: var(--blue); }
.detail-items { margin-top: 10px; background: #fff; }
.detail-item { display: grid; grid-template-columns: 1fr auto; gap: 12px; padding: 12px 14px; border-bottom: 1px solid #eef0f2; }
.detail-item:last-child { border-bottom: 0; }
.detail-item strong { font-size: 14px; }
.detail-item small { display: block; margin-top: 4px; color: #64748b; }
.detail-item-side { display: grid; justify-items: end; gap: 7px; }
.detail-cake-button {
  min-height: 34px;
  border: 0;
  border-radius: 8px;
  padding: 0 11px;
  color: #21406a;
  background: #dce8f7;
  font-size: 12px;
  font-weight: 900;
}
.detail-cake-button:focus-visible { outline: 3px solid #7aa7de; outline-offset: 2px; }

@media (max-width: 860px) {
  .overview-grid, .member-layout { grid-template-columns: 1fr; }
  .cake-grid { grid-template-columns: repeat(2, 1fr); }
  .history-row { grid-template-columns: 1fr 88px 74px; }
  .history-row .history-pay, .history-row .history-note { grid-column: 1 / -1; }
  .attendance-row { grid-template-columns: 60px 130px minmax(180px,1fr) 105px; }
}

@media (max-width: 620px) {
  input, select { font-size: 16px; }
  .login-shell { padding: 18px; }
  .login-card { padding: 34px 25px 28px; border-radius: 19px; }
  .login-card h1 { font-size: 25px; }
  .app { min-height: 100dvh; padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  .topbar {
    grid-template-columns: minmax(72px, 1fr) auto minmax(145px, 1fr);
    gap: 6px;
    min-height: calc(49px + env(safe-area-inset-top));
    padding: calc(5px + env(safe-area-inset-top)) max(9px, env(safe-area-inset-right)) 5px max(9px, env(safe-area-inset-left));
  }
  .topbar-store { font-size: 14px; }
  .topbar-brand { gap: 5px; }
  .topbar-logo { width: 38px; height: 32px; }
  .topbar-page { font-size: 16px; }
  .top-actions { gap: 2px; }
  .signed-user { min-width: 54px; max-width: 76px; margin: 0 2px; }
  .signed-user small { font-size: 9px; }
  .signed-user strong { font-size: 13px; }
  .icon-button { height: 32px; padding: 0 8px; border-radius: 7px; font-size: 11px; }
  .sync-state { right: max(9px, env(safe-area-inset-right)); bottom: -15px; font-size: 7px; }
  .tabbar { padding-right: max(4px, env(safe-area-inset-right)); padding-left: max(4px, env(safe-area-inset-left)); }
  .tabbar button { height: 52px; gap: 3px; }
  .tab-icon { font-size: 17px; }
  .tab-label { font-size: 11px; }
  .online-entry-hero { align-items: stretch; flex-direction: column; gap: 15px; padding: 18px; }
  .online-entry-hero h2 { font-size: 22px; }
  .online-entry-hero button { width: 100%; }
  .online-entry-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .online-history-list article { grid-template-columns: minmax(0,1fr) auto; gap: 7px 10px; padding: 12px; }
  .online-history-list article > em { grid-column: 1 / -1; justify-self: start; }
  .menu-admin-hero { align-items: stretch; flex-direction: column; padding: 17px; }
  .menu-admin-hero h2 { font-size: 22px; }
  .menu-admin-hero > div:last-child { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .menu-settings-grid,.menu-product-editor { grid-template-columns: 1fr; }
  .menu-settings-grid .wide,.menu-product-editor .wide,.menu-product-options,.menu-product-actions,.menu-upload-state { grid-column: 1; }
  .menu-pos-products { grid-template-columns: 1fr; }
  .menu-product-list { padding: 8px; }
  .menu-category-row { grid-template-columns: 32px 36px minmax(0,1fr) 48px; }
  .menu-category-row > span { display: none; }
  .menu-category-delete { width: 48px; }
  .menu-sold-date-add { grid-template-columns: minmax(0,1fr) 92px; }
  .menu-row-tools { grid-column: 2 / -1; justify-content: flex-end; }
  .menu-product-row-main { grid-template-columns: 32px 42px minmax(0,1fr); gap: 7px; padding: 8px; }
  .menu-product-thumb { width: 42px; height: 42px; }
  .menu-product-quick-actions { grid-column: 2 / -1; grid-template-columns: repeat(3,minmax(58px,72px)); justify-content: end; }
  .menu-quick-button { width: 100%; min-height: 40px; }
  .menu-product-state { max-width: 58px; text-align: center; }
  .menu-product-card > .menu-upload-state:not(:empty) { padding: 0 8px 8px 81px; }
  .menu-save-dock { bottom: calc(8px + env(safe-area-inset-bottom)); }
  .tab-badge { top: 2px; right: 2px; }
  .reminder-edit-content { padding: 11px; }
  .reminder-edit-head { grid-template-columns: 1fr; }
  .reminder-edit-item { grid-template-columns: minmax(0,1fr) 72px; }
  .reminder-edit-item > button { width: 100%; }
  .reminder-editor-toolbar { align-items: stretch; flex-direction: column; }
  .reminder-editor-toolbar .button { width: 100%; }
  .content { width: 100%; min-height: calc(100dvh - 130px); padding: 18px 9px 20px; }
  .today-page { padding: 9px; border-radius: 15px; }
  .page-toolbar { align-items: stretch; flex-direction: column; padding: 10px; }
  .date-nav { display: grid; grid-template-columns: 58px minmax(0, 1fr) 58px; align-items: start; width: 100%; gap: 6px; }
  .date-input-wrap { width: 100%; min-width: 0; overflow: hidden; flex-direction: column; gap: 3px; }
  .date-nav input { display: block; inline-size: 100%; width: 100%; min-width: 0; max-width: 100%; height: 40px; padding: 0 5px; font-size: 15px; line-height: 40px; -webkit-appearance: none; appearance: none; }
  .date-nav input::-webkit-date-and-time-value { min-width: 0; margin: 0; text-align: center; }
  .date-nav .step-button { width: 100%; min-width: 0; }
  .nearby-day { width: 100%; font-size: 13px; line-height: 16px; text-align: center; }
  .step-button { min-width: 58px; }
  .toolbar-copy { display: none; }
  .kpis { grid-template-columns: repeat(2, 1fr); gap: 7px; }
  .cake-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
  .cake-kpis .kpi { padding: 11px 7px; text-align: center; }
  .cake-kpis .kpi span { min-height: 27px; margin-bottom: 3px; font-size: 10px; line-height: 1.25; }
  .cake-kpis .kpi strong { font-size: clamp(13px, 4vw, 16px); }
  .cake-history-head { align-items: stretch; }
  .cake-history-head .button { min-width: 116px; padding: 0 10px; }
  .cake-history-title strong { font-size: 20px; }
  .cake-history-tools { grid-template-columns: 1fr; padding: 10px; }
  .cake-history-tools label,
  .cake-history-scope { grid-template-columns: 70px minmax(0,1fr); overflow: hidden; }
  .cake-history-tools .cake-history-search-panel { grid-template-columns: minmax(0,1fr) 76px 76px; gap: 6px; }
  .cake-history-tools .cake-history-search-panel input { padding: 0 8px; font-size: 13px; }
  .cake-history-tools .cake-history-search-panel .button { padding: 0 5px; font-size: 12px; }
  .kpi { padding: 12px; }
  .kpi strong { font-size: 19px; }
  .overview-sheet { padding: 10px; border-radius: 15px; }
  .sheet-title { font-size: 18px; }
  .panel-title { min-height: 46px; padding: 10px 12px; }
  .panel-title h2 { font-size: 15px; }
  .summary-table th, .summary-table td { padding-right: 6px; padding-left: 6px; }
  .summary-table .qty { width: 44px; }
  .summary-table .product { width: 42%; font-size: 13px; }
  .summary-table .times { font-size: 12px; }
  .order-list { padding: 8px; }
  .overview-order-head { grid-template-columns: auto auto auto; gap: 5px; }
  .overview-name { font-size: 17px; }
  .pickup { font-size: 13px; }
  .note-inline { grid-column: 1 / -1; white-space: normal; }
  .note-inline { font-size: 13px; line-height: 1.45; }
  .overview-item { font-size: 15px; }
  .overview-total { font-size: 14px; }
  .search-panel { width: 100%; }
  .segmented { width: 100%; }
  .segmented .button { flex: 1; padding: 0 8px; }
  .filter-row { gap: 5px; }
  .chip { height: 31px; padding: 0 10px; font-size: 11px; }
  .history-row { grid-template-columns: 1fr auto auto; gap: 7px; padding: 10px; }
  .history-cell { white-space: normal; }
  .history-main strong { font-size: 16px; }
  .history-main span, .history-cell small { font-size: 11px; }
  .history-cell { font-size: 13px; }
  .cake-grid { grid-template-columns: 1fr; }
  .day-heading { min-height: 48px; gap: 10px; padding: 0 13px; font-size: 16px; line-height: 1.3; }
  .day-cake-count { font-size: 13px; }
  .cake-card { padding: 13px 13px 11px; }
  .cake-card-main { grid-template-columns: minmax(0,1fr) 108px; gap: 12px; }
  .cake-customer { margin-bottom: 7px; font-size: 22px; letter-spacing: -.02em; }
  .cake-time { font-size: 18px; }
  .cake-time.unknown { font-size: 13px; }
  .cake-note { margin-bottom: 9px; color: #2f3b4d; font-size: 16px; font-weight: 600; line-height: 1.5; }
  .cake-product { font-size: 18px; line-height: 1.45; }
  .cake-thumb { width: 108px; min-height: 142px; }
  .cake-foot { align-items: baseline; margin-top: 9px; padding-top: 8px; font-size: 12px; }
  .cake-foot strong { font-size: 18px; }
  .reminder-card { grid-template-columns: 1fr; }
  .reminder-person { border-right: 0; border-bottom: 1px solid #e2e8f0; }
  .reminder-person strong { font-size: 21px; }
  .reminder-person p { font-size: 14px; }
  .reminder-item { font-size: 16px; }
  .reminder-hero { padding: 14px 15px 16px; }
  .reminder-hero h2 { font-size: 20px; }
  .reminder-hero > strong { font-size: 32px; }
  .range-toolbar { align-items: stretch; flex-wrap: wrap; }
  .range-toolbar > div { flex: 1; min-width: 125px; width: auto; }
  .range-toolbar .button { width: 100%; }
  .range-toolbar > p { width: 100%; margin: 1px 0 0; }
  .month-bar-row { grid-template-columns: 100px minmax(70px,1fr) 94px; gap: 7px; }
  .month-bar-row > div:first-child small { display: none; }
  .member-grid { grid-template-columns: 1fr 1fr; }
  .transaction-row { grid-template-columns: minmax(0,1fr) auto auto; }
  .transaction-row > em { grid-column: 2 / -1; color: #64748b; }
  .attendance-toolbar { align-items: stretch; flex-wrap: wrap; }
  .attendance-toolbar .segmented { width: 100%; }
  .attendance-toolbar input { flex: 1; width: auto; }
  .attendance-row { grid-template-columns: 55px minmax(0,1fr) auto; gap: 8px; padding: 12px; }
  .attendance-times { grid-column: 1 / -1; padding-top: 7px; border-top: 1px dashed #e2e8f0; }
  .money-strip { grid-template-columns: 1fr; }
  dialog { max-height: calc(100vh - 14px); max-height: calc(100dvh - 14px); }
  .cake-media-summary { display: block; }
  .cake-media-summary span { display: block; margin-top: 4px; }
  .cake-photo-stage { min-height: min(38vh, 330px); }
  .cake-photo-stage img { height: min(38vh, 330px); }
  .cake-slot-row { grid-template-columns: 58px minmax(0,1fr) 72px 60px; gap: 6px; padding: 7px; }
  .detail-hero h2 { font-size: 24px; }
  .detail-meta { font-size: 13px; }
  .detail-note { font-size: 15px; }
  .money-cell span { font-size: 11px; }
  .money-cell strong { font-size: 18px; }
  .detail-item strong { font-size: 15px; }
  .detail-item small { font-size: 12px; }
  .detail-cake-button { min-height: 38px; font-size: 12px; }

  /* 数据中心在手机上使用紧凑的应用布局，不沿用桌面图表宽度。 */
  .business-shell { min-width: 0; }
  .business-nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; margin-bottom: 8px; padding: 3px; border-radius: 10px; }
  .business-nav button { min-width: 0; height: 38px; border-radius: 7px; font-size: 13px; }
  .insight-nav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-bottom: 8px; overflow: visible; }
  .insight-nav button { min-width: 0; height: 39px; padding: 0 3px; font-size: 13px; }
  .range-toolbar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; gap: 7px; margin-bottom: 10px; padding: 10px; border-radius: 10px; }
  .range-toolbar > div { min-width: 0; width: 100%; overflow: hidden; }
  .range-toolbar .button { grid-column: 1 / -1; min-height: 38px; }
  .range-toolbar > p { grid-column: 1 / -1; }
  .attendance-toolbar { gap: 7px; margin-bottom: 10px; padding: 10px; border-radius: 10px; }
  .range-toolbar span { margin-bottom: 5px; font-size: 11px; }
  .range-toolbar input, .attendance-toolbar input { display: block; width: 100%; min-width: 0; max-width: 100%; height: 36px; min-height: 36px; padding: 0 7px; border-radius: 7px; font-size: 16px; line-height: 36px; -webkit-appearance: none; appearance: none; }
  .range-toolbar input::-webkit-date-and-time-value, .attendance-toolbar input::-webkit-date-and-time-value, .month-picker input::-webkit-date-and-time-value { min-height: 1em; margin: 0; text-align: center; }
  .month-picker { gap: 8px; margin-bottom: 9px; padding: 8px 10px; }
  .month-picker label { font-size: 12px; }
  .month-picker input { width: 138px; min-width: 0; height: 36px; min-height: 36px; padding-top: 0; padding-bottom: 0; font-size: 16px; line-height: 36px; }
  .business-shell .kpis { display: flex; gap: 7px; margin-bottom: 9px; overflow-x: auto; padding: 1px 1px 5px; scroll-snap-type: x proximity; scrollbar-width: none; }
  .business-shell .kpis::-webkit-scrollbar { display: none; }
  .business-shell .kpi { flex: 0 0 184px; min-height: 84px; padding: 12px; border-radius: 10px; scroll-snap-align: start; }
  .business-shell .kpi span { margin-bottom: 6px; font-size: 12px; }
  .business-shell .kpi strong { overflow: visible; font-size: 21px; text-overflow: clip; }
  .analytics-stack { gap: 9px; }
  .chart-card { min-width: 0; padding: 10px; border-radius: 11px; }
  .chart-card .section-title, .ranking-card .section-title, .attendance-card .section-title { min-height: 43px; padding: 9px 10px; }
  .chart-card .section-title { margin: -10px -10px 8px; }
  .section-title h2 { font-size: 16px; }
  .section-title span { max-width: 48%; font-size: 11px; line-height: 1.35; text-align: right; }
  .monthly-performance { padding-bottom: 8px; }
  .monthly-performance .section-title { margin-bottom: 4px; }
  .chart-legend { gap: 9px; }
  .chart-legend span { font-size: 10px; }
  .month-bars { display: flex; gap: 7px; margin: 0 -4px; padding: 7px 4px 3px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; }
  .month-bars::-webkit-scrollbar { display: none; }
  .month-bar-row { display: grid; flex: 0 0 128px; grid-template: "bars" 128px "caption" auto "values" auto / 1fr; gap: 7px; padding: 9px 8px; border: 1px solid #e1e7ef; border-radius: 10px; background: linear-gradient(180deg,#fbfdff,#f3f6fa); scroll-snap-align: start; }
  .month-caption { grid-area: caption; text-align: center; }
  .month-caption strong { color: #334155; font-size: 13px; }
  .month-caption small { display: block; margin-top: 3px; font-size: 10px; white-space: nowrap; }
  .multi-bars { position: relative; grid-area: bars; display: flex; align-items: end; justify-content: center; gap: 7px; height: 128px; padding: 7px 5px 0; border-bottom: 1px solid #cfd7e2; background: repeating-linear-gradient(to bottom,transparent 0,transparent 31px,rgba(148,163,184,.13) 32px); }
  .multi-bars i { width: 10px; min-width: 10px; height: max(2px, var(--value)); border-radius: 5px 5px 1px 1px; }
  .month-values { grid-area: values; min-width: 0; text-align: center; }
  .month-values span { overflow: visible; font-size: 12px; font-weight: 900; white-space: nowrap; text-overflow: clip; }
  .month-values b { margin-top: 3px; font-size: 12px; }
  .share-trend { gap: 6px; margin: 0 -2px; padding: 2px; }
  .share-point { flex-basis: 132px; padding: 11px; }
  .share-point span, .share-point small { font-size: 11px; }
  .share-point strong { font-size: 17px; }
  .line-chart-scroll { margin: 0 -3px; }
  .line-grid text, .line-point text { font-size: 11px; }
  .line-month { font-size: 12px; }
  .chart-ledger > div { flex-basis: 148px; }
  .chart-ledger span, .chart-ledger small { font-size: 11px; }
  .ranking-card, .attendance-card { border-radius: 11px; }
  .refund-kpis { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }
  .refund-kpis > div { padding: 12px; border-radius: 10px; }
  .refund-kpis strong { font-size: 21px; }
  .refund-analytics-layout { grid-template-columns: 1fr; gap: 9px; }
  .refund-event-list > div { grid-template-columns: 66px minmax(0,1fr); padding: 11px 12px; }
  .refund-event-list time { grid-column: 2; text-align: left; }
  .repeat-summary { margin-bottom: 9px; border-radius: 11px; }
  .repeat-summary > .section-title { padding: 10px; }
  .repeat-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .repeat-metrics > div { padding: 12px 10px; border-right: 1px solid #edf0f2; border-bottom: 1px solid #edf0f2; }
  .repeat-metrics > div:nth-child(2n) { border-right: 0; }
  .repeat-metrics > div:last-child { grid-column: 1 / -1; border-bottom: 0; text-align: center; }
  .repeat-metrics span, .repeat-windows span { font-size: 11px; }
  .repeat-metrics strong { font-size: 20px; }
  .repeat-metrics small, .repeat-windows small { font-size: 10px; }
  .repeat-windows > div { padding: 10px 7px; text-align: center; }
  .repeat-windows strong { font-size: 16px; }
  .ranking-list, .product-ranking { gap: 7px; padding: 8px; background: #f3f5f8; }
  .ranking-row, .product-rank-row { grid-template-columns: 36px minmax(0,1fr) auto; gap: 9px; padding: 12px 10px; border: 1px solid #e6eaf0; border-radius: 9px; background: #fff; }
  .rank { width: 30px; height: 30px; border-radius: 8px; font-size: 12px; }
  .ranking-row strong, .product-rank-row strong { font-size: 15px; }
  .ranking-row small, .product-rank-row small { font-size: 11px; line-height: 1.5; }
  .ranking-row > b, .product-rank-row > b { font-size: 15px; }
  .member-layout { gap: 8px; }
  .member-grid { gap: 6px; padding: 8px; }
  .member-card { min-height: 92px; padding: 11px; border-radius: 8px; }
  .member-card strong { font-size: 15px; }
  .member-card small { font-size: 12px; }
  .member-card b { margin-top: 7px; font-size: 18px; }
  .transaction-row { gap: 6px; padding: 11px 10px; }
  .transaction-row strong { font-size: 14px; }
  .transaction-row small { font-size: 11px; }
  .transaction-kind { font-size: 11px !important; }
  .transaction-amount { font-size: 14px !important; }
  .transaction-row > em { font-size: 11px; }
  .attendance-row { padding: 10px; }
  .attendance-date strong { font-size: 18px; }
  .attendance-date span, .attendance-person span, .attendance-hours span { font-size: 10px; }
  .attendance-person strong { font-size: 15px; }
  .attendance-times { font-size: 13px; }
  .attendance-hours strong { font-size: 16px; }
}

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

@media (prefers-reduced-transparency: reduce) {
  .topbar { background: var(--navy); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .tabbar { background: #081220; backdrop-filter: none; -webkit-backdrop-filter: none; }
}

@media (hover: hover) and (pointer: fine) {
  .button:hover { filter: brightness(.96); }
  .login-card .button.primary:hover { background: #e3c879; }
  .logout-button:hover { border-color: rgba(252,165,165,.9); background: rgba(185,28,28,.32); }
  .history-row:hover { border-color: #9dbfe5; transform: translateY(-1px); }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .topbar { background: var(--navy); }
  .tabbar { background: #081220; }
}

@media (max-width: 420px) {
  .topbar { grid-template-columns: minmax(88px, 1fr) auto minmax(137px, 1fr); }
  .topbar-store { font-size: 13px; }
  .topbar-page { font-size: 15px; }
  .signed-user { max-width: 62px; }
  .business-nav button { min-width: 0; font-size: 12px; }
  .member-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ranking-row, .product-rank-row { padding-right: 12px; padding-left: 12px; }
}

/* Mobile operations added in the shared ordering and bookkeeping workflow. */
input[type="date"],input[type="time"],input[type="month"] { min-width: 0; max-width: 100%; }
.online-order-grid > label,.bookkeeping-toolbar label,.purchase-compose label { min-width: 0; overflow: hidden; }
.online-order-grid input[type="date"],.online-order-grid input[type="time"],.bookkeeping-toolbar input[type="month"] { display:block; width:100%; min-width:0; max-width:100%; height:42px; box-sizing:border-box; padding-block:0; line-height:normal; }
.online-order-grid input:focus,.online-order-grid select:focus,.online-order-grid textarea:focus { outline:none; border-color:#4a81cb; box-shadow:inset 0 0 0 1px #4a81cb; }
.online-order-grid > label { min-width: 0; overflow: hidden; }
.online-order-grid input { display: block; width: 100%; min-width: 0; max-width: 100%; }
.online-order-grid input::-webkit-date-and-time-value { min-width: 0; min-height:40px; margin: 0; padding:0; line-height:40px; text-align: center; }
.online-entry-hero.compact { padding-top: 16px; padding-bottom: 16px; }
.reminder-hero-actions #new-mobile-reminder { position:relative; z-index:2; touch-action:manipulation; }
.online-history-list article { cursor: pointer; }
.online-history-list article.locked { cursor: default; opacity: .76; }
.menu-product-card .menu-product-editor { display: none !important; }

.full-screen-dialog { width: min(1180px,100vw); height: 100dvh; max-width: none; max-height: none; margin: 0 auto; border: 0; border-radius: 0; padding: 0; background: #edf2f7; }
.full-screen-dialog-content { height: calc(100dvh - 54px); overflow-y: auto; padding: 14px; }
.menu-product-dialog { width: min(720px,calc(100vw - 18px)); padding: 0; }
.menu-product-modal-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; max-height: calc(100dvh - 72px); overflow-y: auto; padding: 16px; }
.menu-product-modal-grid .wide { grid-column: 1 / -1; }
.menu-product-modal-grid label > span { display: block; margin-bottom: 6px; color: #64748b; font-size: 11px; font-weight: 900; }
.menu-product-modal-grid input,.menu-product-modal-grid select { width: 100%; min-width: 0; height: 42px; border: 1px solid #cfd9e5; border-radius: 8px; padding: 0 10px; color: #1d2a3c; background: #f9fbfd; font: inherit; font-size: 15px; font-weight: 750; }
.menu-modal-actions { display: flex; justify-content: flex-end; gap: 8px; }
.menu-modal-actions label { position: relative; display: inline-flex; align-items: center; margin: 0; }
.menu-modal-actions input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; }

.product-picker-dialog { width: min(760px,100vw); height: min(860px,100dvh); max-width: none; max-height: none; margin: auto; border: 0; border-radius: 14px; padding: 0; overflow: hidden; background: #f3f6fa; }
.product-picker-tools { position: sticky; z-index: 2; top: 54px; display: grid; gap: 8px; padding: 10px 12px; border-bottom: 1px solid #dae2ec; background: rgba(248,250,252,.97); }
.product-picker-tools input { width: 100%; height: 42px; border: 1px solid #cbd7e4; border-radius: 9px; padding: 0 12px; background: #fff; font: inherit; font-size: 16px; }
.product-picker-categories { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.product-picker-categories::-webkit-scrollbar { display: none; }
.product-picker-categories button { flex: 0 0 auto; min-height: 34px; border: 1px solid #d2dce8; border-radius: 7px; padding: 0 11px; color: #50637a; background: #fff; font-weight: 850; }
.product-picker-categories button.active { border-color: #2f6fda; color: #fff; background: #2f6fda; }
.product-picker-list { display: grid; gap: 7px; height: calc(100% - 191px); overflow-y: auto; padding: 10px 12px; }
.product-picker-item { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; min-height: 60px; border: 1px solid #dce4ed; border-radius: 10px; background: #fff; }
.product-picker-item.selected { border-color: #6b9bd9; box-shadow: inset 3px 0 #2f6fda; }
.product-picker-main { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; min-width: 0; min-height: 58px; border: 0; padding: 10px 13px; color: #1f3047; background: transparent; text-align: left; }
.product-picker-main span { overflow-wrap: anywhere; font-size: 15px; font-weight: 850; }
.product-picker-main strong { flex: 0 0 auto; color: #b94a2e; font-size: 14px; }
.product-picker-stepper { display: grid; grid-template-columns: 36px 28px 36px; align-items: center; margin-right: 9px; overflow: hidden; border: 1px solid #cfdae7; border-radius: 8px; }
.product-picker-stepper button { height: 36px; border: 0; color: #214e83; background: #e8f0fa; font-size: 20px; font-weight: 900; }
.product-picker-stepper button:disabled { color: #a9b3bf; background: #f0f2f5; }
.product-picker-stepper b { text-align: center; }
.product-picker-dock { position: sticky; bottom: 0; display: flex; align-items: center; justify-content: space-between; min-height: 66px; padding: 9px 12px max(9px,env(safe-area-inset-bottom)); border-top: 1px solid #d8e1eb; background: #fff; }
.product-picker-dock span { color: #314760; font-size: 14px; font-weight: 900; }

.pending-mobile-orders { margin-bottom: 12px; overflow: hidden; border: 1px solid #e8c57b; border-radius: 12px; background: #fffaf0; }
.pending-mobile-orders .section-title { padding: 12px 14px; border-bottom: 1px solid #f1ddb1; }
.pending-mobile-orders article { display: grid; grid-template-columns: minmax(140px,.7fr) minmax(0,1.5fr) auto; align-items: center; gap: 12px; padding: 11px 14px; border-bottom: 1px solid #f3e5c7; cursor: pointer; }
.pending-mobile-orders article:last-child { border-bottom: 0; }
.pending-mobile-orders article > div:first-child strong,.pending-mobile-orders article > div:first-child span { display: block; }
.pending-mobile-orders article > div:first-child span { margin-top: 3px; color: #86652d; font-size: 11px; }
.pending-mobile-items { display: flex; flex-wrap: wrap; gap: 5px; }
.pending-mobile-items span { border-radius: 6px; padding: 4px 7px; color: #4d6177; background: #fff; font-size: 11px; font-weight: 800; }
.pending-mobile-orders article > b { color: #b14a2c; }

.bookkeeping-page { max-width: 980px; }
.bookkeeping-hero { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 11px; padding: 19px 21px; border: 1px solid rgba(116,164,222,.2); border-radius: 15px; color: #fff; background: linear-gradient(128deg,#15355f,#235a99); box-shadow: 0 17px 40px rgba(3,18,38,.24); }
.bookkeeping-hero span { color: #b9d2ee; font-size: 10px; font-weight: 900; letter-spacing: .12em; }
.bookkeeping-hero h2 { margin: 3px 0; font-size: 24px; }
.bookkeeping-hero p { margin: 0; color: #dfeaf6; font-size: 12px; }
.bookkeeping-toolbar { display: grid; grid-template-columns: minmax(150px,220px) minmax(0,1fr); gap: 9px; overflow:hidden; margin-bottom: 11px; padding: 11px; border: 1px solid #dce5ef; border-radius: 12px; background: #fff; }
.bookkeeping-toolbar span { display: block; margin-bottom: 5px; color: #64748b; font-size: 10px; font-weight: 900; }
.bookkeeping-toolbar input { display:block; width:100%; min-width:0; max-width:100%; height:40px; box-sizing:border-box; border:1px solid #d1dbe7; border-radius:8px; padding:0 8px; font:inherit; font-size:15px; }
.bookkeeping-switch { display:flex; gap:7px; }
.purchase-compose-card { margin-bottom:12px; padding:15px; overflow:hidden; border:1px solid #dce5ef; border-radius:14px; background:#fff; }
.purchase-compose.inline { margin:0; }
.purchase-inline-action { display:flex; align-items:center; gap:12px; margin-top:12px; }
.purchase-inline-action .feedback { margin:0; }
.purchase-entry-amount { display:grid; justify-items:end; gap:2px; min-width:78px; font-variant-numeric:tabular-nums; }
.purchase-entry-amount small { color:#1f5d9a; font-size:10px; font-weight:900; }
.purchase-entry-amount.rmb small { color:#2d8a5d; }
.purchase-entry-amount span { font-size:17px; }
.purchase-summary { display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: 9px; margin-bottom: 11px; }
.purchase-summary article { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:6px 9px; padding:12px; border:1px solid #dce5ee; border-radius:11px; background:#fff; }
.purchase-summary article.selected { border-color:#4d83c3; background:#f4f8fd; box-shadow:inset 0 0 0 1px rgba(77,131,195,.16); }
.purchase-summary article > strong { color: #203752; font-size: 17px; }
.purchase-summary article > strong,.purchase-summary article > small { grid-column:1 / -1; }
.purchase-summary article > div { display:grid; gap:2px; min-width:0; }
.purchase-summary span { color: #708094; font-size: 11px; font-weight: 800; }
.purchase-summary b { color: #1e5c9a; font-size: 16px; }
.purchase-summary .purchase-summary-rmb b { color:#2d8a5d; }
.purchase-pending { margin-bottom: 10px; padding: 10px 12px; border: 1px solid #ecd494; border-radius: 9px; color: #75571b; background: #fff7df; font-size: 12px; font-weight: 800; }
.purchase-history { overflow: hidden; border: 1px solid #dce5ee; border-radius: 12px; background: #fff; }
.purchase-history .section-title { padding: 13px 15px; border-bottom: 1px solid #edf1f5; }
.purchase-filter-summary { display:flex; align-items:center; justify-content:flex-end; gap:7px; min-width:0; font-variant-numeric:tabular-nums; }
.purchase-filter-summary > span { display:flex; align-items:baseline; gap:4px; border:1px solid #dce6f0; border-radius:7px; padding:5px 7px; color:#1e5c9a; background:#f4f8fc; white-space:nowrap; }
.purchase-filter-summary > span.rmb { color:#257552; background:#f1faf5; }
.purchase-filter-summary .purchase-filter-count { color:#52667d; background:#f7f9fb; }
.purchase-filter-summary small { color:inherit; font-size:10px; font-weight:900; }
.purchase-filter-summary b { font-size:13px; font-weight:900; }
.purchase-entry { display: grid; grid-template-columns: 96px minmax(0,1fr) auto; align-items: center; gap: 12px; padding: 13px 14px; border-bottom: 1px solid #edf1f5; cursor: pointer; }
.purchase-entry:last-child { border-bottom: 0; }
.purchase-entry-date strong,.purchase-entry-date span,.purchase-entry > div:nth-child(2) strong,.purchase-entry > div:nth-child(2) span { display: block; }
.purchase-entry-date strong,.purchase-entry-date span { color: #214d7e; font-size: 15px; font-weight: 900; line-height: 1.35; }
.purchase-entry-date span { margin-top: 4px; color: #3f5873; }
.purchase-entry > div:nth-child(2) span { margin-top: 4px; color: #718096; font-size: 11px; font-weight: 800; }
.purchase-entry > div:nth-child(2) strong { color: #24364d; font-size: 16px; line-height: 1.4; }
.purchase-entry > b { color: #1f5d9a; font-size: 17px; }
.purchase-entry > b.rmb { color: #2d8a5d; }
.purchase-entry.deleted { color:#7d8792; background:#f3f5f7; cursor:default; }
.purchase-entry.deleted .purchase-entry-date,.purchase-entry.deleted > div:nth-child(2),.purchase-entry.deleted .purchase-entry-amount { opacity:.68; }
.purchase-entry.deleted > div:nth-child(2) > strong,.purchase-entry.deleted .purchase-entry-amount > span {
  text-decoration-line:line-through; text-decoration-color:#a88d93; text-decoration-thickness:1px;
}
.purchase-deleted-mark { display:inline-flex; align-items:center; min-height:18px; margin-left:6px; border:1px solid #d3b9bf; border-radius:5px; padding:1px 5px; color:#8f5260; background:#faf1f3; font-size:9px; font-style:normal; font-weight:900; line-height:1; vertical-align:middle; }
.purchase-compose { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.purchase-compose .wide,.purchase-default { grid-column: 1 / -1; }
.purchase-compose label > span { display: block; margin-bottom: 6px; color: #64748b; font-size: 11px; font-weight: 900; }
.purchase-compose input,.purchase-compose select { width: 100%; min-width: 0; height: 44px; border: 1px solid #ccd8e5; border-radius: 9px; padding: 0 10px; background: #f9fbfd; font: inherit; font-size: 16px; }
.purchase-compose .purchase-currency-field > span { color: #c8374b; font-weight: 900; }
.purchase-default { display: flex; align-items: center; gap: 8px; min-height: 40px; }
.purchase-default input { width: 18px; height: 18px; }
.purchase-default span { margin: 0 !important; }
.purchase-default-note { grid-column: 1 / -1; min-height: 40px; border: 1px solid #d5e0ec; border-radius: 9px; padding: 10px 12px; color: #496178; background: #eef4fa; font-size: 12px; font-weight: 800; line-height: 1.5; }
.purchase-compose-compact { display:grid; grid-template-columns:1fr; gap:9px; }
.purchase-compose-row { display:grid; align-items:end; gap:8px; min-width:0; }
.purchase-person-row { grid-template-columns:minmax(82px,1fr) 78px minmax(108px,1.12fr); }
.purchase-money-row { grid-template-columns:minmax(86px,.72fr) minmax(96px,1fr) minmax(88px,.8fr); }
.purchase-compose-compact .purchase-default { grid-column:auto; justify-content:center; align-self:end; min-width:0; height:44px; min-height:44px; overflow:hidden; border:1px solid #d5e0ec; border-radius:9px; padding:0 6px; color:#41617e; background:#eef4fa; white-space:nowrap; }
.purchase-compose-compact .purchase-default-fixed { color:#41617e; background:#f2f5f8; }
.purchase-compose-compact .purchase-default input { flex:0 0 auto; width:16px; height:16px; margin:0; }
.purchase-compose-compact .purchase-default span { overflow:hidden; text-overflow:ellipsis; font-size:11px; font-weight:900; }
.purchase-save-inline { align-self:end; width:100%; min-width:0; height:44px; padding:0 7px; white-space:nowrap; }
.purchase-feedback-inline { min-height:0; margin:8px 0 0; }
.purchase-focus-bridge { max-width:620px; margin:0 auto; }
.purchase-focus-bridge label > span { display:block; margin-bottom:6px; color:#64748b; font-size:11px; font-weight:900; }
.purchase-focus-bridge input { width:100%; min-width:0; height:44px; box-sizing:border-box; border:1px solid #4d83c3; border-radius:9px; padding:0 10px; background:#f9fbfd; font:inherit; font-size:16px; }
.purchase-focus-bridge-input { position:fixed; z-index:-1; top:0; left:0; width:1px; height:1px; margin:0; border:0; padding:0; opacity:0; pointer-events:none; caret-color:transparent; }
.purchase-edit-compact { padding: 2px; }
.purchase-edit-actions { justify-content: flex-start; margin-top: 10px; }
.purchase-audit { margin-top:12px; overflow:hidden; border:1px solid #dce4ed; border-radius:11px; background:#fff; }
.purchase-audit h3 { margin:0; padding:11px 13px; border-bottom:1px solid #e8edf3; color:#324860; font-size:13px; }
.purchase-audit-scroll { overflow-x:auto; overscroll-behavior-x:contain; }
.purchase-audit-row { display:grid; grid-template-columns:92px 88px max-content; align-items:center; gap:10px; min-width:max-content; padding:10px 13px; border-bottom:1px solid #eef1f5; white-space:nowrap; }
.purchase-audit-row:last-child { border-bottom:0; }
.purchase-audit-row strong { color:#315b88; font-size:11px; }
.purchase-audit-row b { color:#24364d; font-size:11px; }
.purchase-audit-row span { color:#66768a; font-size:10px; }
.purchase-audit-row.deleted strong,.purchase-audit-row.deleted b,.purchase-audit-row.deleted span { color:#9c3042; }
.purchase-audit-empty { padding:13px; color:#7b8796; font-size:11px; font-weight:800; }
#purchase-dialog-content { max-height:calc(100dvh - 82px); overflow-y:auto; padding:14px; }

@media (max-width:620px) {
  .online-entry-actions { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .online-entry-hero button { min-width: 0; padding: 0 5px; font-size: 12px; }
  .online-order-grid { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .online-order-grid label:first-child { grid-column: 1 / -1; }
  .product-picker-dialog { width: 100vw; height: 100dvh; border-radius: 0; }
  .menu-product-modal-grid { grid-template-columns: 1fr; padding: 12px; }
  .menu-product-modal-grid .wide { grid-column: 1; }
  .pending-mobile-orders article { grid-template-columns: minmax(0,1fr) auto; }
  .pending-mobile-items { grid-column: 1 / -1; }
  .bookkeeping-hero { padding: 15px; }
  .bookkeeping-hero h2 { font-size: 21px; }
  .bookkeeping-hero p { max-width: 220px; }
  .bookkeeping-toolbar { grid-template-columns: minmax(112px,132px) minmax(0,1fr); gap:7px; padding:9px; }
  .purchase-summary { display:flex; gap:8px; overflow-x:auto; scroll-snap-type:x proximity; scrollbar-width:none; }
  .purchase-summary::-webkit-scrollbar { display:none; }
  .purchase-summary article { flex:0 0 calc((100% - 8px) / 2); min-width:0; scroll-snap-align:start; padding:11px; }
  .purchase-summary article > strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:15px; }
  .purchase-summary span { font-size:9px; }
  .purchase-summary b { overflow-wrap:anywhere; font-size:14px; }
  .purchase-history .section-title { flex-wrap:wrap; gap:8px; }
  .purchase-filter-summary { width:100%; justify-content:flex-start; overflow-x:auto; scrollbar-width:none; }
  .purchase-filter-summary::-webkit-scrollbar { display:none; }
  .purchase-entry { grid-template-columns: 88px minmax(0,1fr) auto; gap: 8px; padding: 12px 9px; }
  .purchase-compose:not(.purchase-compose-compact) { grid-template-columns: 1fr; }
  .purchase-compose .wide,.purchase-default { grid-column: 1; }
  .full-screen-dialog-content { padding: 8px; }
}
@media (max-width:480px) {
  .online-order-grid { grid-template-columns: minmax(0,1fr); }
  .online-order-grid label:first-child { grid-column: auto; }
  .online-order-grid input[type="date"],.online-order-grid input[type="time"] {
    width: 100%; min-width: 0; max-width: 100%; -webkit-appearance: none; appearance: none;
  }
}

/* 订单申请、菜单与记账的移动端操作收口 */
.order-change-submit { z-index:4; pointer-events:auto; }
.order-change-submit .button { width:auto; }
.order-change-submit-actions { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:8px; }
.order-change-submit-actions .button { width:100%; }
.order-change-confirm { display:grid; gap:7px; padding:12px; border:1px solid #d7e2ed; border-radius:10px; background:#f6f9fc; }
.order-change-confirm[hidden] { display:none; }
.order-change-confirm strong { color:#1d334d; font-size:15px; }
.order-change-confirm span { color:#607188; font-size:13px; }
.order-change-confirm > div { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:4px; }
.request-detail,.request-rejected-note { display:grid; gap:8px; padding:15px; border:1px solid #dce5ee; border-radius:11px; background:#f8fafc; }
.request-detail strong { color:#1f334b; font-size:18px; }
.request-detail span { color:#315f93; font-weight:850; }
.request-detail p,.request-detail small { margin:0; color:#53667b; line-height:1.55; }
.request-rejected-note { margin-bottom:12px; border-color:#efcbd2; background:#fff5f6; }
.request-rejected-note strong { color:#913247; }
.request-rejected-note span { color:#6d4852; }
.reminder-item.syncing { border-color:#ead39e; background:#fff8e7; }
.reminder-item.syncing b { color:#946515; font-size:10px; }
.reminder-edit-content input:disabled,.reminder-edit-content textarea:disabled { color:#34495f; background:#f3f6f9; opacity:1; -webkit-text-fill-color:#34495f; }
.purchase-compose-card { overflow:visible; }
.purchase-summary article > small { color:#8693a2; font-size:10px; font-weight:800; }
.purchase-compose input:focus,.purchase-compose select:focus { outline:0; border-color:#4d83c3; box-shadow:inset 0 0 0 1px rgba(46,108,178,.25); }
.menu-save-dock > div { display:flex; gap:8px; }
.menu-settings-grid input[type="date"],.menu-settings-grid input[type="time"] { min-width:0; max-width:100%; box-sizing:border-box; }
.menu-settings-grid input[type="date"],.menu-settings-grid input[type="time"],.bookkeeping-toolbar input[type="month"] { inline-size:100%; width:100%; min-inline-size:0; max-inline-size:100%; overflow:hidden; box-sizing:border-box; -webkit-appearance:none; appearance:none; }
@media (max-width:620px) {
  .online-request-title { display:grid; }
  .online-request-filters { justify-content:flex-start; }
  .menu-admin-tabs { min-width:0; width:100%; }
  .menu-product-group-title { grid-template-columns:30px 32px minmax(0,1fr) 48px 48px; gap:5px; padding:7px 8px; }
  .menu-product-group-title > span { display:none; }
  .menu-category-delete { grid-column:4; }
  .menu-group-toggle { grid-column:5; }
  .menu-category-delete,.menu-group-toggle { width:48px; min-height:32px; padding:0 4px; }
  .menu-product-group-title > strong { grid-column:1 / 4; }
  .menu-save-dock { align-items:stretch; }
  .menu-save-dock > span { display:none; }
  .menu-save-dock > div { width:100%; display:grid; grid-template-columns:1fr 1.35fr; }
  .menu-save-dock > div .button:only-child { grid-column:1 / -1; }
}
@media (max-width:360px) {
  .purchase-compose-row { gap:5px; }
  .purchase-person-row { grid-template-columns:minmax(76px,1fr) 70px minmax(100px,1.12fr); }
  .purchase-money-row { grid-template-columns:78px minmax(82px,1fr) 82px; }
  .purchase-compose input,.purchase-compose select { padding-inline:6px; font-size:14px; }
  .purchase-compose-compact .purchase-default span,.purchase-save-inline { font-size:10px; }
}