:root {
  --bg: #f5f6f8;
  --card: #ffffff;
  --text: #111827;
  --muted: #687386;
  --border: #e3e7ed;
  --primary: #b4232d;
  --primary-dark: #861922;
  --primary-soft: #fff0f1;
  --success: #18794e;
  --success-soft: #eaf8f0;
  --warning: #9a6700;
  --warning-soft: #fff7dc;
  --danger: #b4232d;
  --shadow: 0 12px 36px rgba(15, 23, 42, 0.08);
  --radius: 20px;
}

* { box-sizing: border-box; }

html { color-scheme: light; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  background:
    radial-gradient(circle at top right, rgba(180, 35, 45, 0.07), transparent 30rem),
    var(--bg);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", "Noto Sans SC", sans-serif;
}

button, input, select, textarea { font: inherit; }
button, .button { touch-action: manipulation; }
.hidden { display: none !important; }
.muted, .hint, .meta { color: var(--muted); }
.hint, .meta { font-size: 13px; line-height: 1.55; }

.gateway {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 28px;
  color: #fff;
  background:
    radial-gradient(circle at 85% 15%, rgba(220, 38, 52, 0.34), transparent 26rem),
    linear-gradient(145deg, #0c1018 0%, #161b25 58%, #240e13 100%);
}

.gateway-shell { width: min(1060px, 100%); }
.gateway-brand { max-width: 760px; margin-bottom: 38px; }
.gateway-kicker { color: #f1b5ba; font-size: 13px; font-weight: 900; letter-spacing: 0.15em; }
.gateway-brand h1 { margin: 12px 0 10px; font-size: clamp(44px, 8vw, 82px); line-height: 0.98; letter-spacing: -0.05em; }
.gateway-brand p { max-width: 650px; margin: 0; color: #bbc2cf; font-size: 17px; line-height: 1.7; }

.entry-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.entry-card {
  min-height: 205px;
  padding: 24px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 20px;
  align-items: end;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 26px;
  text-align: left;
  white-space: normal;
  transition: transform 0.18s, border-color 0.18s, box-shadow 0.18s;
}
.entry-card:hover { transform: translateY(-4px); filter: none; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.28); }
.reservation-entry { color: #111827; background: #fff; }
.backend-entry { color: #fff; background: linear-gradient(145deg, #c22631, #8f1720); }
.entry-index { align-self: start; padding: 5px 8px; border: 1px solid currentColor; border-radius: 999px; font-size: 11px; opacity: 0.65; }
.entry-copy { display: grid; gap: 8px; }
.entry-copy strong { font-size: clamp(27px, 4vw, 38px); line-height: 1.05; }
.entry-copy small { color: inherit; font-size: 14px; font-weight: 600; opacity: 0.68; }
.entry-arrow { font-size: 30px; line-height: 1; }
.gateway-session { min-height: 24px; margin-top: 18px; color: #aeb7c5; font-size: 13px; }

.entry-screen {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 20px;
}

.login-card {
  width: min(440px, 100%);
  padding: 28px;
  border: 1px solid var(--border);
  border-top: 5px solid var(--primary);
  border-radius: 26px;
  background: var(--card);
  box-shadow: var(--shadow);
}

.placeholder-card {
  position: relative;
  width: min(520px, 100%);
  padding: 36px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-top: 5px solid var(--primary);
  border-radius: 26px;
  background: var(--card);
  box-shadow: var(--shadow);
}
.placeholder-card h1 { margin: 12px 0 8px; font-size: clamp(28px, 6vw, 42px); }
.placeholder-card p { margin: 0 0 24px; line-height: 1.75; }
.placeholder-number { position: absolute; top: -24px; right: 14px; color: rgba(180, 35, 45, 0.08); font-size: 132px; font-weight: 950; line-height: 1; }
.login-password-label { margin-top: 13px !important; }
.login-submit { margin-top: 14px; }
.login-submit + button { margin-top: 9px; }

.login-mark {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--primary);
  font-weight: 900;
  letter-spacing: 0.08em;
}

.login-card h1 { margin: 12px 0 8px; font-size: clamp(26px, 7vw, 36px); }
.login-card p { margin: 0 0 22px; }

label.field-label { display: block; font-size: 13px; font-weight: 800; margin: 0 0 7px; }

input, select, textarea {
  width: 100%;
  border: 1px solid #cfd5de;
  border-radius: 14px;
  background: #fff;
  color: var(--text);
  outline: none;
  transition: border-color 0.16s, box-shadow 0.16s;
}

input, select { min-height: 46px; padding: 10px 13px; }
textarea { min-height: 110px; padding: 12px 13px; resize: vertical; line-height: 1.55; }
input:focus, select:focus, textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(180, 35, 45, 0.13); }
input[aria-invalid="true"] { border-color: var(--danger); box-shadow: 0 0 0 3px rgba(180, 35, 45, 0.1); }

button, .button {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 10px 15px;
  border: 0;
  border-radius: 13px;
  color: var(--text);
  background: #edf0f4;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}

button:hover, .button:hover { filter: brightness(0.98); }
button:disabled { opacity: 0.48; cursor: not-allowed; }
.show-button-id::after {
  content: "[" attr(data-button-id) "]";
  display: inline-flex;
  align-items: center;
  min-height: 19px;
  padding: 1px 5px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  opacity: 0.72;
}
.primary { color: #fff; background: var(--primary); }
.primary:hover { background: var(--primary-dark); }
.danger { color: var(--danger); background: var(--primary-soft); }
.ghost { background: transparent; border: 1px solid var(--border); }
.wide { width: 100%; }

.error-text { min-height: 1.5em; margin: 10px 0 0; color: var(--danger); font-size: 14px; }

.app-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid rgba(227, 231, 237, 0.9);
  background: rgba(245, 246, 248, 0.93);
  backdrop-filter: blur(14px);
}

.header-inner {
  width: min(1280px, 100%);
  min-height: 68px;
  margin: 0 auto;
  padding: 10px 18px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}

.header-title { min-width: 0; }
.header-title h1 { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 20px; }
.header-stat { margin-top: 2px; font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.header-actions { display: flex; gap: 8px; }
.header-nav { display: flex; gap: 7px; }
.session-account { align-self: center; max-width: 150px; overflow: hidden; color: var(--muted); font-size: 12px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }

.dashboard {
  width: min(1180px, 100%);
  margin: 0 auto;
  padding: 24px 18px 44px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 15px;
}

.tool-card, .panel, .card, .calc-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow);
}

.tool-card {
  min-height: 175px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 18px;
  cursor: pointer;
  transition: transform 0.16s, border-color 0.16s;
}

.tool-card:hover { transform: translateY(-2px); border-color: #cfd5de; }
.tool-card.accent { background: linear-gradient(145deg, #fff, #fff5f5); border-color: #efc8cc; }
.tool-card.dark-accent { color: #fff; border-color: #111827; background: linear-gradient(145deg, #202836, #10151f); }
.tool-card.dark-accent p { color: #bec6d2; }
.tool-card.dark-accent .tool-badge { color: #fff; background: rgba(255, 255, 255, 0.12); }
.tool-card h2 { margin: 0 0 8px; font-size: 20px; }
.tool-card p { margin: 0; color: var(--muted); line-height: 1.55; }
.tool-badge { display: inline-flex; width: fit-content; margin-bottom: 10px; padding: 4px 8px; border-radius: 999px; color: var(--primary); background: var(--primary-soft); font-size: 12px; font-weight: 900; }

.wrap { width: min(1280px, 100%); margin: 0 auto; padding: 16px 18px 44px; }
.calc-wrap { width: min(760px, 100%); margin: 0 auto; padding: 20px 18px 44px; }
.calc-card { padding: 16px; }

.toolbar {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 170px 130px auto;
  gap: 10px;
  margin-bottom: 10px;
}

.tabs, .chips { display: flex; gap: 8px; overflow-x: auto; padding: 7px 0; }
.tab.active, .chip.active { color: #fff; background: var(--text); }
.tab, .chip { min-height: 38px; border-radius: 999px; }

.media-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  padding: 12px 0 18px;
}

.card { overflow: hidden; display: flex; flex-direction: column; }
.thumb { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-bottom: 1px solid var(--border); background: #edf0f4; }
.card-body { padding: 12px; display: flex; flex: 1; flex-direction: column; gap: 8px; }
.card-title { font-size: 15px; font-weight: 900; line-height: 1.4; overflow-wrap: anywhere; }
.copy-box { padding: 10px; border: 1px solid #eceff3; border-radius: 12px; background: #f8f9fb; white-space: pre-wrap; font-size: 14px; line-height: 1.55; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.actions .button, .actions button { min-height: 38px; padding: 8px 11px; font-size: 13px; }

.empty {
  grid-column: 1 / -1;
  padding: 34px;
  border: 1px dashed #bdc5d0;
  border-radius: var(--radius);
  color: var(--muted);
  background: rgba(255, 255, 255, 0.72);
  text-align: center;
  line-height: 1.7;
}

.pager { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 9px; margin: 5px auto 30px; }
.page-info { min-width: 190px; color: var(--muted); text-align: center; }

.tax-box { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding-bottom: 12px; }
.tax-btn { border: 1px solid var(--border); background: #fff; }
.tax-btn.active { color: var(--primary); border-color: var(--primary); background: var(--primary-soft); }
.calc-row { display: grid; grid-template-columns: minmax(150px, 0.9fr) minmax(0, 1.25fr); gap: 14px; align-items: center; padding: 13px 0; border-top: 1px solid var(--border); }
.calc-output { min-height: 46px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 14px; background: #f4f6f8; text-align: right; font-variant-numeric: tabular-nums; }
.value-line { display: flex; gap: 8px; align-items: center; }
.tag { padding: 4px 8px; border-radius: 999px; color: var(--warning); background: var(--warning-soft); font-size: 12px; font-weight: 900; }

.recon-wrap { width: min(1180px, 100%); margin: 0 auto; padding: 20px 18px 48px; }
.recon-intro { padding: 20px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 0.55fr); gap: 20px; align-items: end; }
.recon-intro h2 { margin: 0 0 7px; font-size: 26px; }
.recon-intro p { margin: 0; color: var(--muted); line-height: 1.55; }
.recon-date-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.store-choice-section { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 18px; align-items: center; margin: -2px 0 18px; padding: 17px 18px; border: 1px solid #f1c8cc; border-radius: 16px; background: linear-gradient(135deg, #fff7f7, #fff); }
.store-choice-section h3 { margin: 0 0 4px; font-size: 18px; }
.store-choice-section h3 span { display: inline-block; margin-left: 6px; padding: 2px 7px; border-radius: 999px; color: #fff; background: var(--primary); font-size: 10px; vertical-align: 2px; }
.store-choice-section p { margin: 0; color: var(--muted); font-size: 12px; }
.store-choice-section label { display: grid; gap: 5px; color: var(--muted); font-size: 11px; font-weight: 850; }
.store-choice-section select { min-height: 46px; border-color: #e3a8ae; background: #fff; font-size: 16px; font-weight: 850; }
.recon-layout { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(300px, 0.75fr); gap: 16px; align-items: start; margin-top: 16px; }
.recon-form-panel, .summary-panel, .history-panel { padding: 18px; }
.recon-group + .recon-group { margin-top: 18px; }
.recon-group h3 { margin: 0 0 10px; padding-bottom: 8px; border-bottom: 2px solid var(--text); font-size: 16px; }
.recon-field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.dynamic-section { padding: 2px 0 20px; }
.dynamic-section + .dynamic-section { padding-top: 20px; border-top: 1px solid var(--border); }
.dynamic-section-head { display: flex; justify-content: space-between; gap: 18px; align-items: end; margin-bottom: 12px; }
.dynamic-section-head h3 { margin: 0 0 5px; font-size: 18px; }
.dynamic-section-head p { margin: 0; color: var(--muted); font-size: 13px; }
.section-actions { display: flex; align-items: center; gap: 10px; }
.section-actions strong { min-width: 90px; color: var(--primary); text-align: right; font-variant-numeric: tabular-nums; }
.add-line { min-height: 36px; padding: 7px 11px; color: var(--primary); background: var(--primary-soft); font-size: 13px; }
.recon-lines { display: grid; gap: 9px; }
.recon-line {
  display: grid;
  grid-template-columns: 32px minmax(130px, 0.62fr) minmax(145px, 0.75fr) auto;
  gap: 9px;
  align-items: end;
  padding: 11px;
  border: 1px solid var(--border);
  border-radius: 15px;
  background: #fafbfc;
}
.recon-line.movement-line { grid-template-columns: 32px 125px 145px minmax(190px, 1fr) auto; }
.recon-line.amount-line { grid-template-columns: 32px minmax(160px, 1fr) auto; }
.line-number { align-self: center; width: 27px; height: 27px; display: grid; place-items: center; border-radius: 50%; color: var(--muted); background: #edf0f4; font-size: 12px; font-weight: 900; }
.line-field { display: grid; gap: 5px; margin: 0; }
.line-field > span { color: var(--muted); font-size: 11px; font-weight: 800; }
.line-field > span b { color: var(--danger); }
.line-field input, .line-field select { min-height: 42px; }
.remove-line { min-height: 42px; padding: 8px 10px; color: var(--danger); background: var(--primary-soft); font-size: 12px; }
.empty-line { padding: 18px; border: 1px dashed #c7ced8; border-radius: 14px; color: var(--muted); text-align: center; }
.money-input { position: relative; }
.money-input input { padding-right: 54px; text-align: right; font-variant-numeric: tabular-nums; }
.money-input span { position: absolute; top: 50%; right: 13px; transform: translateY(-50%); color: var(--muted); font-size: 12px; pointer-events: none; }
.required::after { content: " *"; color: var(--danger); }
.notes-block { margin-top: 18px; }
.form-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }

.summary-panel { position: sticky; top: 84px; }
.summary-panel h3, .history-panel h3 { margin: 0 0 12px; }
.metric-list { display: grid; gap: 9px; }
.metric-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px; border: 1px solid var(--border); border-radius: 14px; background: #f8f9fb; }
.metric-row strong { font-size: 18px; font-variant-numeric: tabular-nums; }
.metric-row.emphasized { color: #fff; border-color: #111827; background: #111827; }
.metric-row.panda-metric { border-color: #efc8cc; background: #fff5f5; }
.metric-sub { display: flex; justify-content: space-between; gap: 10px; margin: -3px 7px 0 20px; padding: 6px 9px; border-left: 2px solid #d8dde5; color: var(--muted); font-size: 12px; }
.metric-sub b { color: var(--text); font-variant-numeric: tabular-nums; }
.formula-note { margin: 12px 2px 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.metric-row.variance.good { color: var(--success); border-color: #b9e1c9; background: var(--success-soft); }
.metric-row.variance.bad { color: var(--danger); border-color: #efc8cc; background: var(--primary-soft); }
.export-state { margin-top: 12px; padding: 11px 12px; border-radius: 13px; color: var(--muted); background: #f1f3f6; font-size: 13px; line-height: 1.5; }
.export-state.success { color: var(--success); background: var(--success-soft); }
.export-state.warning { color: var(--warning); background: var(--warning-soft); }

.history-panel { margin-top: 16px; }
.table-scroll { overflow-x: auto; }
.history-table { width: 100%; border-collapse: collapse; min-width: 1040px; }
.history-table th, .history-table td { padding: 11px 10px; border-bottom: 1px solid var(--border); text-align: left; white-space: nowrap; }
.history-table th { color: var(--muted); font-size: 12px; background: #f7f8fa; }
.history-table td.number { text-align: right; font-variant-numeric: tabular-nums; }
.history-table tr[data-date] { cursor: pointer; }
.history-table tr[data-date]:hover { background: #fafbfc; }
.status-dot { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: #9aa4b2; }
.status-dot.ok { background: var(--success); }

.records-wrap { width: min(1480px, 100%); margin: 0 auto; padding: 20px 18px 48px; }
.records-head { padding: 22px; border-top: 5px solid var(--primary); }
.records-head h2 { margin: 7px 0; font-size: 27px; }
.records-head p { max-width: 900px; margin: 0; color: var(--muted); line-height: 1.65; }
.records-kicker { color: var(--primary); font-size: 11px; font-weight: 950; letter-spacing: 0.14em; }
.records-controls { display: grid; grid-template-columns: 145px 145px auto auto auto auto; gap: 10px; align-items: end; margin-top: 19px; }
.records-controls label { display: grid; gap: 5px; color: var(--muted); font-size: 11px; font-weight: 850; }
.records-controls input { min-height: 42px; }
.records-status { margin-top: 14px; padding: 10px 12px; border-radius: 12px; color: var(--muted); background: #f1f3f6; font-size: 13px; }
.records-status.loading { color: #334155; background: #eef2f7; }
.records-status.success { color: var(--success); background: var(--success-soft); }
.records-status.error { color: var(--danger); background: var(--primary-soft); }
.spreadsheet-panel { margin-top: 16px; overflow: hidden; border-radius: 14px; }
.spreadsheet-bar { min-height: 43px; display: flex; justify-content: space-between; gap: 18px; align-items: center; padding: 9px 14px; color: #e7eaf0; background: #111827; font-size: 12px; font-weight: 800; }
.spreadsheet-scroll { max-height: calc(100vh - 245px); overflow: auto; background: #fff; }
.spreadsheet-table { width: 100%; min-width: 2180px; border-collapse: separate; border-spacing: 0; font-size: 12px; }
.spreadsheet-table th, .spreadsheet-table td { height: 36px; padding: 7px 9px; border-right: 1px solid #dfe3e9; border-bottom: 1px solid #dfe3e9; white-space: nowrap; }
.spreadsheet-table th { position: sticky; top: 0; z-index: 3; color: #fff; background: var(--primary); text-align: center; font-weight: 900; }
.spreadsheet-table th:first-child { left: 0; z-index: 5; }
.spreadsheet-table td:first-child { position: sticky; left: 0; z-index: 2; color: #64748b; background: #f3f5f7; text-align: center; font-weight: 800; }
.spreadsheet-table tbody tr:nth-child(even) td:not(:first-child) { background: #fbfcfd; }
.spreadsheet-table tbody tr:hover td { background: #fff4f4; }
.spreadsheet-table td.number { text-align: right; font-variant-numeric: tabular-nums; }
.spreadsheet-table td.variance-cell { color: var(--primary); font-weight: 900; }
.spreadsheet-table td.long-cell { max-width: none; overflow: visible; text-overflow: clip; white-space: pre; }

.modal-mask {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(15, 23, 42, 0.5);
}

.modal { width: min(430px, 100%); padding: 22px; border-radius: 22px; background: #fff; box-shadow: var(--shadow); }
.modal h2 { margin: 0 0 8px; }
.modal p { margin: 0 0 16px; }
.modal-actions { display: grid; gap: 9px; margin-top: 12px; }

.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 200;
  max-width: min(92vw, 620px);
  padding: 11px 15px;
  border-radius: 999px;
  color: #fff;
  background: #111827;
  box-shadow: var(--shadow);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 8px);
  transition: 0.18s;
  text-align: center;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.error { background: var(--danger); }

@media (max-width: 980px) {
  .entry-grid { grid-template-columns: 1fr; }
  .dashboard { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .media-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .toolbar { grid-template-columns: minmax(0, 1fr) 150px 120px; }
  .toolbar .clear { grid-column: 1 / -1; }
  .recon-layout { grid-template-columns: 1fr; }
  .summary-panel { position: static; }
  .records-controls { grid-template-columns: 1fr 1fr 1fr; }
  .records-controls button:nth-of-type(2), .records-controls button:nth-of-type(3) { grid-column: auto; }
}

@media (max-width: 680px) {
  .gateway { padding: 16px; place-items: start center; }
  .gateway-shell { padding-top: 9vh; }
  .gateway-brand { margin-bottom: 24px; }
  .gateway-brand h1 { font-size: 48px; }
  .gateway-brand p { font-size: 14px; }
  .entry-card { min-height: 154px; padding: 18px; gap: 12px; }
  .entry-copy strong { font-size: 27px; }
  .header-inner { grid-template-columns: auto minmax(0, 1fr) auto; padding: 8px 10px; }
  .header-nav #home, .session-account { display: none; }
  .header-actions #logout { width: 42px; overflow: hidden; color: transparent; position: relative; }
  .header-actions #logout::after { content: "退出"; color: var(--text); position: absolute; inset: 0; display: grid; place-items: center; }
  .dashboard { grid-template-columns: 1fr; padding: 15px 10px 34px; }
  .tool-card { min-height: 145px; }
  .wrap, .calc-wrap, .recon-wrap, .records-wrap { padding-left: 10px; padding-right: 10px; }
  .toolbar { grid-template-columns: 1fr 1fr; }
  .toolbar .search { grid-column: 1 / -1; }
  .media-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .card-body { padding: 9px; }
  .actions { display: grid; }
  .calc-row { grid-template-columns: 1fr; }
  .recon-intro { grid-template-columns: 1fr; padding: 16px; }
  .recon-date-grid, .recon-field-grid { grid-template-columns: 1fr; }
  .store-choice-section { grid-template-columns: 1fr; }
  .recon-form-panel, .summary-panel, .history-panel { padding: 14px; }
  .dynamic-section-head { display: grid; align-items: start; }
  .section-actions { justify-content: space-between; }
  .section-actions strong { text-align: left; }
  .recon-line, .recon-line.movement-line, .recon-line.amount-line { grid-template-columns: 1fr; align-items: stretch; }
  .line-number { display: none; }
  .remove-line { width: 100%; }
  .form-actions { display: grid; }
  .form-actions button { width: 100%; }
  .records-head { padding: 16px; }
  .records-controls { grid-template-columns: 1fr; }
  .spreadsheet-bar { align-items: flex-start; flex-direction: column; gap: 3px; }
  .spreadsheet-scroll { max-height: calc(100vh - 210px); }
  .page-info { width: 100%; order: -1; }
}

.final-switch { display:flex; align-items:center; justify-content:center; gap:8px; }
.switch-track { width:34px; height:20px; border-radius:20px; background:#a4acba; flex-shrink:0; position:relative; }
.switch-track::after { content:""; position:absolute; top:3px; left:3px; width:14px; height:14px; border-radius:50%; background:white; transition:transform .15s; }
.final-switch[aria-checked="true"] .switch-track { background:#b82030; }
.final-switch[aria-checked="true"] .switch-track::after { transform:translateX(14px); }

/* Reconciliation 3.6: generated transfers and three-position store filter */
.store-cycle{display:inline-flex;align-items:center;gap:9px;white-space:nowrap}
.store-cycle-track{position:relative;display:inline-block;width:60px;height:24px;border-radius:20px;background:#e5e7eb;flex:none}
.store-cycle-track:before,.store-cycle-track:after{content:"";position:absolute;top:9px;width:6px;height:6px;border-radius:50%;background:#aab0bc}
.store-cycle-track:before{left:27px}.store-cycle-track:after{left:46px}
.store-cycle-track i{position:absolute;z-index:1;left:3px;top:3px;width:18px;height:18px;background:#b92136;border-radius:50%;transition:transform .18s}
.store-cycle[data-position="1"] i{transform:translateX(18px)}.store-cycle[data-position="2"] i{transform:translateX(36px)}
#recordsBody tr.record-final td { color: #111827; }
#recordsBody tr.record-amended td { color: #c51e30; }
.reward-panel{padding:24px;margin-bottom:18px}.reward-panel h2,.reward-panel h3{margin-top:0}.reward-panel label{display:flex;flex-direction:column;gap:8px;margin-bottom:16px;font-weight:600}.reward-panel input,.reward-panel select{width:100%;padding:12px;border:1px solid #cbd5e1;border-radius:12px;background:white;color:#111827;min-width:0}.reward-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:20px}.reward-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:16px}.reward-admin-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.reward-balance{padding:16px;border:1px solid #ead5a6;background:#fff9ea;border-radius:14px;color:#70511e}.reward-balance small{display:block;margin-top:8px}.reward-table{overflow:auto}.reward-table table{width:100%;border-collapse:collapse}.reward-table td,.reward-table th{padding:12px;text-align:left;border-bottom:1px solid #e2e8f0;vertical-align:top}.reward-table th{background:#f1f5f9}.reward-table .long-cell{min-width:240px;white-space:normal;overflow-wrap:anywhere}@media(max-width:700px){.reward-admin-grid{grid-template-columns:1fr}.reward-heading{flex-direction:column}.reward-panel{padding:18px}}
.auto-transfer{background:#f0f8f4!important;border-color:#b8ddc9!important;display:flex;flex-wrap:wrap;gap:12px;align-items:center;padding:14px;margin-top:10px}
.auto-transfer .auto-amount{font-weight:700;color:#147b4d}.auto-transfer small{color:#577365}
#sumPandaGrossSales{font-size:14px;white-space:normal;overflow-wrap:anywhere;text-align:right}
.platform-line{grid-template-columns:28px minmax(150px,1fr) minmax(130px,1.2fr) auto}

@media(max-width:700px){.platform-line{grid-template-columns:1fr}.recon-line.auto-transfer{display:flex;align-items:center}}
@media(min-width:1000px){.recon-line.movement-line{grid-template-columns:28px 170px 125px minmax(160px,1fr) auto}}

/* Receipt pages use the reconciliation card rhythm and spacing. */
.tool-card.records-card { background:#111827; color:#fff; }
.tool-card.records-card p { color:#c6ced9; }
.tool-card.records-card button { background:#fff; color:#111827; }
.arrival-heading { grid-template-columns:minmax(0,1fr) auto; align-items:center; }
.arrival-heading button { justify-self:end; }
.arrival-form { margin:0; }
.arrival-form fieldset { border:0; padding:0; margin:0; min-width:0; }
.arrival-section h3,.receipt-section-head h3 { margin:0 0 12px; font-size:18px; }
.arrival-section + .arrival-section { margin-top:20px; padding-top:20px; border-top:1px solid var(--border); }
.arrival-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.arrival-fields label,.arrival-note-label { display:flex; flex-direction:column; gap:7px; font-size:13px; font-weight:650; }
.arrival-fields b { color:var(--primary); }
.arrival-fields input,.arrival-fields select { width:100%; min-height:44px; font-size:15px; font-weight:400; }
.arrival-fields input[readonly] { background:#f5f7fa; color:var(--muted); }
.arrival-amount-field { grid-column:1/-1; }
.arrival-amount-field input { font-size:20px; padding-right:38px; }
.arrival-note-label { margin-top:20px; }
.arrival-note-label small { color:var(--muted); font-weight:400; margin-left:5px; }
.arrival-note-label textarea { min-height:92px; font-size:14px; font-weight:400; }
.arrival-cash { display:flex; align-items:center; gap:12px; padding:16px; border:1px solid #edc3c7; border-radius:14px; background:#fff8f8; }
.arrival-cash input { flex:0 0 20px; width:20px; height:20px; margin:0; accent-color:var(--primary); }
.arrival-cash>span { flex:1; font-size:15px; font-weight:700; }
.arrival-cash small { display:block; color:var(--muted); font-size:12px; font-weight:400; line-height:1.6; margin-top:5px; }
.arrival-cash.show-button-id::after { flex:none; align-self:flex-start; }
.receipt-section-head { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; margin-top:22px; padding-top:20px; border-top:1px solid var(--border); }
.receipt-section-head h3 { margin-bottom:5px; }
.receipt-section-head p { margin:0; font-size:13px; line-height:1.6; }
.receipt-actions,.arrival-actions { display:flex; flex-wrap:wrap; gap:8px; }
.receipt-actions button { font-size:13px; min-height:36px; padding:8px 12px; }
.receipt-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:12px; margin:16px 0; }
.receipt-empty { grid-column:1/-1; display:grid; place-content:center; gap:8px; min-height:160px; padding:24px; text-align:center; border:1px dashed #ccd3df; border-radius:14px; background:#f9fafc; }
.receipt-empty strong { font-size:16px; }
.receipt-empty span { font-size:13px; color:var(--muted); line-height:1.7; }
.receipt-empty small { font-size:11px; color:var(--muted); }
.receipt-tile { border:1px solid var(--border); border-radius:12px; padding:8px; background:#f8fafc; }
.receipt-tile>button:last-child { margin-top:6px; }
.receipt-preview { display:flex; flex-direction:column; gap:8px; align-items:center; width:100%; background:#f5f6f8; border:1px solid var(--border); border-radius:10px; padding:8px; overflow:hidden; }
.receipt-preview img { width:100%; height:160px; object-fit:contain; }
.receipt-preview span { font-size:12px; white-space:normal; }
.arrival-summary .metric-row strong { font-size:15px; overflow-wrap:anywhere; text-align:right; }
.arrival-summary .metric-row.emphasis { color:#fff; background:#111827; border-color:#111827; }
.arrival-summary .metric-row.emphasis strong { font-size:23px; }
.arrival-summary-hint { font-size:12px; line-height:1.7; color:var(--muted); }
.arrival-recent { display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:20px; border-top:1px solid var(--border); padding:16px 0; }
.arrival-recent strong { overflow-wrap:anywhere; }
.arrival-recent p { font-size:12px; color:var(--muted); margin:6px 0 0; }
.arrival-recent button { margin:3px; }
.arrival-table { min-width:1400px; }
.receipt-table-thumb { display:flex; align-items:center; gap:8px; font-size:12px; background:white; }
.receipt-table-thumb img { width:42px; height:50px; object-fit:contain; }
.arrival-recon-box { border:1px solid var(--border); border-radius:12px; padding:14px; margin-top:14px; background:#f8fafc; }
.arrival-recon-box h4 { margin:0; }
.arrival-recon-row { display:flex; justify-content:space-between; align-items:center; gap:10px; border-top:1px solid var(--border); padding:10px 0; }
.arrival-recon-row small { display:block; margin-top:5px; color:var(--muted); }
.arrival-recon-row button { font-size:12px; padding:7px 9px; margin:3px; }
.cash-linked { color:#107f54; font-size:12px; margin-left:7px; }
.arrival-out { background:#fff6f6!important; border-color:#efcccc!important; color:#962432!important; flex-wrap:wrap; }
.arrival-out .auto-amount { color:#b52230!important; }
.cash-carry { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:18px; border:1px solid #d7e2dc; border-radius:14px; background:#f3faf6; }
.cash-carry>strong { font-size:24px; white-space:nowrap; font-variant-numeric:tabular-nums; }
.carry-label,.carry-badge { color:#18794e; font-size:12px; font-weight:700; }
.carry-badge { padding:6px 9px; border-radius:8px; background:#eaf8f0; white-space:nowrap; }
.cash-carry p { margin:7px 0 0; font-size:12px; color:var(--muted); line-height:1.7; }
.cash-carry.missing { background:var(--warning-soft); border-color:#f0dbad; }
dialog.receipt-dialog,dialog.arrival-detail-dialog { border:0; border-radius:16px; padding:0; box-shadow:0 20px 100px #0007; }
dialog::backdrop { background:#101623cc; }
.receipt-dialog { width:95vw; max-width:1400px; height:94vh; max-height:94dvh; background:#17202c; color:#fff; }
.receipt-dialog-head { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:12px 18px; border-bottom:1px solid #94a3b838; }
.receipt-dialog-head button { margin:3px; font-size:13px; }
.receipt-viewport { height:calc(100% - 80px); overflow:auto; text-align:center; touch-action:pan-x pan-y pinch-zoom; }
.receipt-viewport img { max-width:100%; max-height:100%; object-fit:contain; }
.receipt-viewport img.zoomed { max-width:none; max-height:none; width:auto; height:auto; min-width:100%; }
.arrival-detail-dialog { width:760px; max-width:94vw; max-height:90dvh; }
.arrival-detail-dialog #arrivalDetailBody { padding:22px; }
.arrival-detail-meta { display:grid; grid-template-columns:1fr 1fr; gap:12px; background:#f5f7fa; padding:14px; border-radius:12px; }
.arrival-detail-meta strong { font-size:23px; color:var(--primary); }
.receipt-notes { white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.7; }
@media(max-width:700px) {
 .arrival-fields { grid-template-columns:1fr; }.arrival-heading { grid-template-columns:1fr; gap:14px; }.arrival-heading button { justify-self:start; }
 .receipt-section-head { align-items:flex-start; }.arrival-recent { grid-template-columns:minmax(0,1fr) auto; gap:10px; }.arrival-recent>div:last-child { grid-column:1/-1; }
 .receipt-dialog-head { flex-wrap:wrap; gap:4px; }.receipt-viewport { height:calc(100% - 110px); }.arrival-recon-row { flex-direction:column; align-items:flex-start; }
 .cash-carry { align-items:flex-start; flex-direction:column; gap:8px; }
}
/* Member-card generator — original card artwork, browser-local image processing. */
.member-intro{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:24px;margin-bottom:22px}.member-kicker{font-size:11px;color:#a3313c;letter-spacing:.12em;font-weight:700}.member-intro h2{margin:5px 0;font-size:26px}.member-intro p,.member-generator-heading p{font-size:13px;color:#738097;line-height:1.7;margin:5px 0}.member-intro button{flex-shrink:0}.member-generator-heading{display:flex;justify-content:space-between;gap:20px;align-items:center;margin:0 0 18px}.member-generator-heading h3{margin:0;font-size:20px}.member-generator-heading button{flex-shrink:0}.member-generator-layout{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(290px,.85fr);gap:20px;align-items:start}.member-card-controls,.member-card-preview-panel{padding:22px}.member-drop{display:flex;flex-direction:column;align-items:center;text-align:center;border:1.5px dashed #dfb6bb;border-radius:14px;padding:26px 16px;background:#fff9fa;transition:background .18s,border-color .18s}.member-drop.dragging{background:#ffecef;border-color:#b42334}.member-drop-icon{width:42px;height:42px;display:grid;place-items:center;font-size:28px;background:#f7e1e4;border-radius:12px;color:#a62232;margin-bottom:14px}.member-drop strong{font-size:18px}.member-drop p{color:#8b7580;font-size:12px;margin:9px 0 18px}.member-field{display:block;font-size:13px;font-weight:600;color:#405068;margin-top:20px}.member-field input{display:block;width:100%;margin-top:8px;min-height:44px}.member-auto{display:flex;align-items:center;gap:9px;font-size:13px;color:#677589;margin:16px 0 22px}.member-auto input{width:17px;height:17px;accent-color:#b52334}.member-list-heading{display:flex;align-items:center;gap:12px;border-top:1px solid #edf0f4;padding-top:18px;margin-bottom:12px}.member-list-heading strong{font-size:15px}.member-list-heading span{font-size:12px;color:#7d899a;flex:1}.member-list-heading button{font-size:12px;padding:7px 10px}.member-queue{max-height:400px;overflow:auto}.member-queue-item{display:flex;align-items:center;gap:10px;justify-content:space-between;padding:12px;margin-bottom:8px;background:#f8f9fb;border:1px solid #edf0f4;border-radius:10px}.member-queue-item.selected{background:#fff7f8;border-color:#e6bfc5}.member-queue-item>div{min-width:0;flex:1}.member-pick{display:block;border:0;background:none;padding:0;text-align:left;color:#25364d;font-size:13px;font-weight:600;overflow-wrap:anywhere;max-width:100%}.member-queue-item small{display:block;font-size:11px;color:#7e8999;margin-top:6px;line-height:1.6;overflow-wrap:anywhere}.member-queue-item>button{padding:6px 9px;font-size:11px;color:#a34d56;flex-shrink:0}.member-empty{padding:24px 10px;text-align:center;color:#8994a5;line-height:1.8;font-size:13px}.member-batch{width:100%;margin-top:16px;min-height:45px}.member-card-preview-panel{position:sticky;top:90px}.member-preview-stage{border-radius:12px;background:#f3f5f8;padding:18px;min-height:340px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px}.member-preview-stage img{width:100%;max-height:440px;object-fit:contain;filter:drop-shadow(0 5px 10px #24334a12)}.member-preview-stage span{font-size:11px;color:#8994a3;text-align:center}.member-card-preview-panel .hint{font-size:12px;line-height:1.7;margin:10px 0 17px}.member-preview-actions{display:flex;gap:10px}.member-preview-actions button{flex:1;min-height:44px}
@media(max-width:800px){.member-generator-layout{grid-template-columns:1fr}.member-card-preview-panel{position:static}.member-preview-stage img{max-height:420px}.member-intro{padding:20px}.member-generator-heading{flex-wrap:wrap}.member-generator-heading button{margin-left:auto}}
@media(max-width:460px){.member-intro{align-items:start}.member-intro h2{font-size:23px}.member-intro p{font-size:12px}.member-intro button{font-size:12px;padding:10px 12px}.member-card-controls,.member-card-preview-panel{padding:16px}.member-preview-stage{min-height:260px}}

/* Reconciliation v7: preserve historical snapshots while new entries use actual noncash receipts. */
.legacy-recon-notice{display:flex;align-items:center;gap:18px;padding:18px;margin:0 0 20px;border:1px solid #e3d3aa;border-radius:14px;background:#fff9eb;color:#644d26}
.legacy-recon-notice p{margin:7px 0 0;font-size:13px;line-height:1.65}.legacy-recon-notice button{flex-shrink:0;background:#fff;border-color:#d8c59a;color:#644d26}
#reportPaymentsSection .dynamic-section-head h3{color:#425b77}#reconForm input:disabled,#reconForm select:disabled,#reconForm textarea:disabled,#reconOperator:disabled{opacity:1;color:#455066;background:#f7f8fa;cursor:default}
.commerce-sheet-upload{border:1px solid #e3e7ed;border-radius:14px;padding:20px;background:#fbfcfd}.commerce-sheet-upload h3{margin:0}.commerce-sheet-upload .required{color:#b12032;font-size:12px}.commerce-sheet-upload p{color:#5b6473}.commerce-sheet-upload .sheet-inputs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.commerce-sheet-upload .sheet-inputs label{display:block;font-weight:600}.commerce-sheet-upload input[type=file]{display:block;width:100%;padding:12px;margin-top:8px;border:1px dashed #aab4c4;border-radius:8px;background:#fff}@media(max-width:650px){.commerce-sheet-upload .sheet-inputs{grid-template-columns:1fr}}
@media(max-width:700px){.legacy-recon-notice{align-items:stretch;flex-direction:column}.legacy-recon-notice button{align-self:flex-start}}

.payment-pair{grid-template-columns:28px minmax(110px,1fr) minmax(120px,1fr) minmax(120px,1fr) auto}.payment-pair.cash-pair{grid-template-columns:28px minmax(110px,1fr) minmax(120px,2fr) auto}.pair-difference{grid-column:2 / -1;color:#64748b}.payment-mismatch{border-color:#ef4444;background:#fff1f2}.payment-mismatch .pair-difference{color:#b91c1c;font-weight:700}.payment-mismatch .money-input input{border-color:#ef4444;background:#fff7f7}@media(max-width:700px){.payment-pair,.payment-pair.cash-pair{grid-template-columns:1fr}.payment-pair .pair-difference{grid-column:1}}