/*
  辰曦 iOS-style UI system. This layer intentionally sits after the legacy
  stylesheets: it changes presentation and hit areas only, never data, API,
  permissions, validation, or workflow state.
*/
:root {
  --cx-bg: #f5f5f7;
  --cx-surface: #ffffff;
  --cx-surface-muted: #f2f2f7;
  --cx-fill: #e9e9ee;
  --cx-label: #1c1c1e;
  --cx-secondary: #6d6d72;
  --cx-tertiary: #8e8e93;
  --cx-separator: rgba(60, 60, 67, .16);
  --cx-brand: #087b73;   /* 与 App 顶部栏同色 */
  --cx-blue-tint: rgba(10,132,255,.10);
  --cx-blue: #0a84ff;
  --cx-blue-pressed: #0077e6;
  --cx-green: #248a3d;
  --cx-red: #d70015;
  --cx-orange: #c93400;
  --cx-radius-sm: 10px;
  --cx-radius-md: 14px;
  --cx-radius-lg: 18px;
  --cx-radius-xl: 22px;
  --cx-space-1: 4px;
  --cx-space-2: 8px;
  --cx-space-3: 12px;
  --cx-space-4: 16px;
  --cx-space-5: 20px;
  --cx-space-6: 24px;
  --cx-space-8: 32px;
  --cx-shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.05);
  --forest: var(--cx-blue);
  --forest-2: var(--cx-blue);
  --mint: #e7f5eb;
  --cream: var(--cx-bg);
  --paper: var(--cx-surface);
  --ink: var(--cx-label);
  --muted: var(--cx-secondary);
  --line: var(--cx-separator);
  --red: var(--cx-red);
  --amber: var(--cx-orange);
  --shadow: var(--cx-shadow);
}

html { background: var(--cx-bg); color-scheme: light; }
body {
  background: var(--cx-bg);
  color: var(--cx-label);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button, input, select, textarea { font: inherit; }
button, [role="button"], a { -webkit-tap-highlight-color: transparent; }
button { min-width: 44px; min-height: 44px; cursor: pointer; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--cx-blue-tint) !important;
  outline-offset: 2px;
}
button:active:not(:disabled) { opacity: .72; transform: none; }
button:disabled { cursor: default; }
::selection { background: rgba(10,132,255,.2); color: var(--cx-label); }

.shell { width: min(100%, 600px); padding-bottom: 108px; background: var(--cx-bg); box-shadow: none; }
.center-card { padding: max(14vh, calc(env(safe-area-inset-top) + 56px)) 24px 40px; }
.center-card > h1, .login-card h1 { font-size: 34px; line-height: 1.16; font-weight: 700; letter-spacing: -.035em; }
.login { max-width: 440px; margin: auto; }
.login .logo {
  width: 64px; height: 64px; margin-bottom: 20px; border-radius: 18px;
  background: var(--cx-blue); box-shadow: 0 8px 18px rgba(10,132,255,.2); font-size: 28px;
}
.login-card, .form, .period-open, .business-tools, .business-export-panel {
  padding: var(--cx-space-5); border: 0; border-radius: var(--cx-radius-xl); background: var(--cx-surface); box-shadow: var(--cx-shadow);
}
.login-card > p { margin: 8px 0 28px; font-size: 15px; }
.login-card label, .form label, .period-open label, .reject-dialog label { margin-top: 20px; color: var(--cx-label); font-size: 13px; font-weight: 600; }
.login-card input, .form > label > input, .form textarea, .period-open input, .reject-dialog textarea {
  min-height: 48px; margin-top: 8px; padding: 12px 14px; border: 0; border-radius: var(--cx-radius-md); background: var(--cx-surface-muted); color: var(--cx-label); box-shadow: inset 0 0 0 1px transparent;
}
.login-card input:focus, .form input:focus, .form textarea:focus, .period-open input:focus, .reject-dialog textarea:focus {
  border-color: transparent; box-shadow: inset 0 0 0 2px var(--cx-blue); }
.primary, .export-browser-link {
  min-height: 50px; margin-top: 24px; border-radius: var(--cx-radius-md); background: var(--cx-blue); box-shadow: none; font-weight: 650;
}
.primary:hover, .export-browser-link:hover { background: var(--cx-blue-pressed); }
.error, .reject-error { color: var(--cx-red) !important; }

.top { padding: max(20px, env(safe-area-inset-top)) 20px 16px; align-items: center; }
.top small { margin-bottom: 4px; color: var(--cx-secondary); font-size: 13px; font-weight: 500; }
.top h1 { font-size: 34px; line-height: 1.14; font-weight: 700; letter-spacing: -.04em; }
.user b { font-size: 15px; font-weight: 600; }.user span { color: var(--cx-secondary); font-size: 11px; }
.logout { min-height: 32px; margin-top: 2px; padding: 4px 0; color: var(--cx-blue); font-size: 13px; }
.page { padding: 8px 16px 32px; }
.hello { margin: 4px 4px 20px; }.hello h2, .heading h2 { font-size: 27px; line-height: 1.2; font-weight: 700; letter-spacing: -.035em; }
.hello p, .heading p { margin-top: 7px; color: var(--cx-secondary); font-size: 14px; line-height: 1.45; }
.heading { gap: 12px; margin: 4px 0 24px; }.back { width: 44px; height: 44px; min-height: 44px; border: 0; border-radius: 50%; background: var(--cx-surface-muted); color: var(--cx-blue); font-size: 30px; line-height: 1; }

.summary { border-radius: var(--cx-radius-xl); background: var(--cx-brand); box-shadow: none; }
.business-ledger { border-radius: var(--cx-radius-xl); background: var(--cx-brand); box-shadow: none; }
.summary div { padding: 18px 16px; }.summary div:nth-child(even), .summary div:nth-child(-n+2) { border-color: rgba(255,255,255,.15); }
.summary span, .ledger-main span, .ledger-main small { color: rgba(255,255,255,.68); font-size: 12px; }
.summary strong { margin-top: 6px; font-size: 22px; letter-spacing: -.025em; }
.quick { gap: 12px; margin: 16px 0 32px; }.quick button { min-height: 104px; padding: 18px 16px; border: 0; border-radius: var(--cx-radius-lg); background: var(--cx-surface); box-shadow: var(--cx-shadow); font-size: 16px; }
.quick button:first-child { border: 0; background: #e9f2ff; color: #0057b8; }.quick button span { margin-top: 8px; color: var(--cx-secondary); font-size: 12px; }

.records { gap: 12px; }.card, .period-card { border: 0; border-radius: var(--cx-radius-lg); background: var(--cx-surface); box-shadow: var(--cx-shadow); }
.row { min-height: 72px; padding: 16px; }.icon { width: 40px; height: 40px; flex-basis: 40px; background: #fff0ee; color: var(--cx-red); font-size: 20px; }.icon.income { background: #e7f5eb; color: var(--cx-green); }
.main b { font-size: 16px; font-weight: 620; }.main span, .detail { color: var(--cx-secondary); font-size: 12px; }.money b { font-size: 16px; font-weight: 650; }.status { margin-top: 5px; padding: 3px 8px; background: #fff3df; color: #9a3f00; font-size: 11px; font-weight: 600; }.status.approved { background: #e7f5eb; color: #24743a; }.status.rejected { background: #fff0ee; color: var(--cx-red); }
.detail { padding: 0 16px 16px; }.photos { padding: 0 16px 16px; }.photos button { min-height: 44px; border-radius: var(--cx-radius-sm); }
.review { border-top-color: var(--cx-separator); }.review button { min-height: 52px; background: var(--cx-surface); color: var(--cx-red); font-size: 15px; }.review button:last-child { border-left-color: var(--cx-separator); color: var(--cx-blue); }
.empty, .business-empty { padding: 32px 20px; border: 0; border-radius: var(--cx-radius-lg); background: var(--cx-surface); color: var(--cx-secondary); box-shadow: var(--cx-shadow); }

/* Every visible choice is its control: labels contain the full-size native control. */
.control-wrap, .store-filter, .delivery-filter label, .business-controls label { min-height: 48px; }
.control-wrap { height: 52px; margin-top: 8px; border: 0; border-radius: var(--cx-radius-md); background: var(--cx-surface-muted); overflow: hidden; }
.control-value { padding: 0 46px 0 14px; color: var(--cx-label); font-size: 16px; }
.native-picker { cursor: pointer; }
.control-wrap:focus-within { border-color: transparent; box-shadow: inset 0 0 0 2px var(--cx-blue); }
.store-filter { display: flex; align-items: center; gap: 12px; min-height: 52px; margin: 0 0 16px; padding: 0 14px; border-radius: var(--cx-radius-md); background: var(--cx-surface); color: var(--cx-label); box-shadow: var(--cx-shadow); font-size: 13px; font-weight: 600; }
.store-filter select, .page > label > select { width: 100%; min-height: 44px; padding: 0 30px 0 10px; border: 0; border-radius: var(--cx-radius-sm); background: var(--cx-surface-muted); color: var(--cx-label); font-size: 16px; cursor: pointer; }
.page > label:has(> select) { display: flex; align-items: center; gap: 12px; min-height: 52px; margin: 0 0 12px; padding: 0 14px; border-radius: var(--cx-radius-md); background: var(--cx-surface); color: var(--cx-label); box-shadow: var(--cx-shadow); font-size: 13px; font-weight: 600; }
.upload { min-height: 88px; padding: 18px; border: 0; border-radius: var(--cx-radius-md); background: #eef6ff; color: #0057b8 !important; }.upload input { cursor: pointer; }.upload small { color: var(--cx-secondary); }
.amount { border-bottom-color: var(--cx-blue); }.amount span { color: var(--cx-blue); }.amount input { font-size: 32px; }

.overview h3 { margin: 30px 4px 12px; font-size: 18px; }.store-pending-list { border-top: 0; border-radius: var(--cx-radius-lg); overflow: hidden; background: var(--cx-surface); box-shadow: var(--cx-shadow); }
.store-pending-row { min-height: 56px; padding: 10px 16px; border-bottom-color: var(--cx-separator); }.store-pending-row:hover, .store-pending-row:active { background: #eef6ff; }.pending-count { background: var(--cx-surface-muted); }.pending-count.has-pending { background: #e9f2ff; color: #0057b8; }
.overview-amounts { gap: 12px; }.overview-amounts > div { padding: 16px; border-radius: var(--cx-radius-md); background: var(--cx-surface); box-shadow: var(--cx-shadow); }.overview-amounts strong { font-size: 22px; }
.overview-shortcuts { gap: 10px; }.overview-shortcuts button { min-height: 48px; border: 0; border-radius: var(--cx-radius-md); background: var(--cx-surface); box-shadow: var(--cx-shadow); color: var(--cx-blue); }.overview-shortcuts button:hover { background: #eef6ff; }

.export-tool { min-height: 72px; margin-bottom: 12px; padding: 16px; border-radius: var(--cx-radius-lg); background: var(--cx-blue); }.export-tool small { color: rgba(255,255,255,.76); font-size: 12px; }
.business-page { color: var(--cx-label); }.business-title { margin: 4px 4px 24px; }.business-title h2 { font-size: 28px; letter-spacing: -.035em; }.business-title p, .tools-heading span, .section-heading span { color: var(--cx-secondary); }.business-title > span { border-radius: 999px; background: #e7f5eb; color: #24743a; }
.business-tools, .business-export-panel { margin-bottom: 16px; }.tools-heading h3, .section-heading h3 { font-size: 18px; }
.business-controls { gap: 12px; }.business-controls label, .sync-now { min-height: 72px; padding: 12px 14px; border: 0; border-radius: var(--cx-radius-md); box-shadow: inset 0 0 0 1px var(--cx-separator); }.business-controls label { background: var(--cx-surface-muted); }.business-controls input { min-height: 34px; cursor: pointer; }.business-controls label:focus-within { border-color: transparent; box-shadow: inset 0 0 0 2px var(--cx-blue); }.sync-now { background: var(--cx-blue); box-shadow: none; }.sync-now small { color: rgba(255,255,255,.76); }.sync-now:disabled { background: var(--cx-fill); color: var(--cx-secondary); }.sync-now:disabled small { color: var(--cx-secondary); }
.business-ledger { background: var(--cx-label); border-radius: var(--cx-radius-xl); }.ledger-main { padding: 24px 20px 20px; }.ledger-main strong { font-size: 38px; letter-spacing: -.04em; }.ledger-breakdown { background: rgba(255,255,255,.07); }.ledger-breakdown div { border-right-color: rgba(255,255,255,.13); }.ledger-breakdown span { color: rgba(255,255,255,.62); }
.quality-notice, .business-operation { border-radius: var(--cx-radius-md); }.quality-notice.complete, .business-operation.healthy { background: #e7f5eb; color: #236c37; }.quality-notice.review, .business-operation.attention { background: #fff3df; color: #8c3600; }
.payment-list { border: 0; border-radius: var(--cx-radius-lg); background: var(--cx-separator); box-shadow: var(--cx-shadow); }.payment-list div { background: var(--cx-surface); }.payment-list span, .store-ledger small, .store-ledger span, .sync-time { color: var(--cx-secondary); }.store-ledger { border-top: 0; border-radius: var(--cx-radius-lg); background: var(--cx-surface); box-shadow: var(--cx-shadow); }.store-ledger article { min-height: 72px; padding: 14px 16px; border-bottom-color: var(--cx-separator); }
.business-export-panel { background: var(--cx-surface); }.business-export-actions button, .business-empty button { min-height: 64px; border-radius: var(--cx-radius-md); background: var(--cx-blue); }.business-export-actions small { color: rgba(255,255,255,.76); }

.period-open { gap: 14px; }.period-card { overflow: hidden; }.period-head { padding: 18px 16px; }.period-head small { color: var(--cx-blue); }.period-values { border-top-color: var(--cx-separator); }.period-values div + div { border-left-color: var(--cx-separator); }.period-close { min-height: 52px; background: #e9f2ff; color: #0057b8; }
.install-card { min-height: 68px; border: 0; border-radius: var(--cx-radius-lg); background: var(--cx-surface); box-shadow: var(--cx-shadow); }.install-icon, .guide-phone { background: #e9f2ff; color: var(--cx-blue); }.install-card i { border-radius: 999px; background: var(--cx-blue); }.install-guide, .viewer, .reject-dialog, .export-done, .business-operation-dialog { background: rgba(0,0,0,.38); backdrop-filter: blur(10px); }.install-guide > div { border-radius: 24px 24px 0 0; }.reject-dialog form, .export-done > div, .business-operation-dialog > div, .viewer-box { border-radius: var(--cx-radius-xl); background: var(--cx-surface); box-shadow: 0 20px 50px rgba(0,0,0,.18); }.dialog-actions button { min-height: 48px; border-radius: var(--cx-radius-md); background: var(--cx-surface-muted); color: var(--cx-blue); }.dialog-actions button:last-child { background: var(--cx-red); }.approve-yes { background: var(--cx-blue) !important; }.refresh-toast { bottom: calc(96px + env(safe-area-inset-bottom)); border-radius: 999px; background: rgba(28,28,30,.9); }

.nav { height: calc(76px + env(safe-area-inset-bottom)); padding: 6px 8px max(6px, env(safe-area-inset-bottom)); border-top: 1px solid rgba(60,60,67,.12); background: rgba(249,249,251,.9); backdrop-filter: blur(18px); }
.nav button { min-width: 0; min-height: 52px; border-radius: var(--cx-radius-sm); color: var(--cx-secondary); font-size: 10px; }.nav button.active { background: var(--cx-blue-tint); color: var(--cx-blue); }.nav.admin button { font-size: 9px; }.nav button b { margin-bottom: 2px; }

/* Pending review is a continuous work list, not a dashboard or a card grid. */
.review-page { padding-bottom: 128px; }
.review-heading { display: flex; align-items: center; justify-content: space-between; margin: 4px 0 8px; }
.review-heading h2 { margin: 0; font-size: 28px; letter-spacing: -.035em; }
.review-heading > button, .review-read-link, .review-all-read { min-height: 44px; padding: 0 10px; border: 0; background: transparent; color: var(--cx-blue); font-size: 14px; font-weight: 600; }
.review-stats { padding: 0 2px 18px; color: var(--cx-secondary); font-size: 13px; font-variant-numeric: tabular-nums; }.review-stats i { margin: 0 4px; color: var(--cx-tertiary); font-style: normal; }
.review-store-control { margin: -2px 0 8px; }
.review-store-trigger { display: inline-flex; align-items: center; justify-content: flex-start; gap: 6px; min-height: 44px; padding: 0 2px; border: 0; background: transparent; color: var(--cx-label); font-size: 16px; font-weight: 700; text-align: left; }.review-store-trigger.is-filtered { color: var(--cx-blue); }.review-store-trigger b { color: var(--cx-secondary); font-size: 18px; font-weight: 500; line-height: 1; transform: translateY(-1px); }.review-store-trigger.is-filtered b { color: currentColor; }
.review-store-sheet-backdrop { position: fixed; z-index: 30; inset: 0; display: flex; align-items: flex-end; justify-content: center; padding-top: env(safe-area-inset-top); background: rgba(23,32,51,.42); animation: review-sheet-fade .18s ease-out both; }.review-store-sheet { width: min(100%, 600px); max-height: min(82svh, 680px); padding: 8px 0 max(12px, env(safe-area-inset-bottom)); border-radius: 22px 22px 0 0; background: var(--cx-surface); box-shadow: 0 -12px 36px rgba(0,0,0,.16); animation: review-sheet-rise .24s cubic-bezier(.2,.8,.2,1) both; }.review-store-sheet-handle { width: 36px; height: 5px; margin: 3px auto 10px; border-radius: 999px; background: var(--cx-fill); }.review-store-sheet header { display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: 0 16px; }.review-store-sheet h3 { margin: 0; color: var(--cx-label); font-size: 18px; letter-spacing: -.02em; }.review-store-sheet header button { min-height: 44px; padding: 0 2px; border: 0; background: transparent; color: var(--cx-blue); font-size: 16px; }.review-store-options { overflow-y: auto; max-height: calc(min(82svh, 680px) - 84px - env(safe-area-inset-bottom)); border-top: 1px solid var(--cx-separator); overscroll-behavior: contain; }.review-store-option { display: grid; grid-template-columns: minmax(0,1fr) auto 24px; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 10px 16px; border: 0; border-bottom: 1px solid var(--cx-separator); background: var(--cx-surface); color: var(--cx-label); text-align: left; }.review-store-option:hover, .review-store-option:active { background: var(--cx-surface-muted); }.review-store-option > span { overflow: hidden; font-size: 16px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }.review-store-option small { color: var(--cx-secondary); font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }.review-store-option > b { display: grid; place-items: center; min-width: 24px; color: var(--cx-blue); font-size: 17px; }.review-store-option.selected { background: #e9f2ff; }.review-store-option.zero > span, .review-store-option.zero small { color: var(--cx-tertiary); }.review-store-option.zero.selected > span { color: var(--cx-blue); }
@keyframes review-sheet-fade { from { background: rgba(23,32,51,0); } to { background: rgba(23,32,51,.42); } } @keyframes review-sheet-rise { from { transform: translateY(100%); } to { transform: translateY(0); } }
.review-segments { display: grid; grid-template-columns: repeat(4,1fr); gap: 4px; margin-bottom: 22px; padding: 4px; border-radius: 12px; background: var(--cx-fill); }.review-segments button { min-width: 0; min-height: 40px; border: 0; border-radius: 9px; background: transparent; color: var(--cx-secondary); font-size: 14px; }.review-segments button.active { background: var(--cx-surface); color: var(--cx-label); box-shadow: 0 1px 2px rgba(0,0,0,.08); font-weight: 650; }
.review-section { margin-bottom: 22px; }.review-section-head { display: flex; align-items: center; justify-content: space-between; min-height: 44px; }.review-section-head h3 { margin: 0; font-size: 18px; }.review-section-head h3 b { color: var(--cx-secondary); font-size: 14px; font-weight: 600; }.review-section-head > div { display: flex; align-items: center; }
.review-date-group { overflow: hidden; margin: 0 -16px; background: var(--cx-surface); }.review-date-group + .review-date-group { margin-top: 12px; }.review-date-group h3 { margin: 0; padding: 13px 16px 7px; color: var(--cx-secondary); font-size: 13px; font-weight: 600; }.review-fold { width: 100%; min-height: 48px; border: 0; border-radius: 0; background: var(--cx-surface); color: var(--cx-blue); font-size: 14px; text-align: left; padding: 0 16px; }
.review-row { position: relative; display: flex; align-items: stretch; min-height: 72px; border-bottom: 1px solid var(--cx-separator); background: var(--cx-surface); }.review-row.selected { background: #edf5ff; }.review-row-main { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; flex: 1; min-width: 0; min-height: 72px; padding: 12px 8px 12px 16px; border: 0; background: transparent; color: var(--cx-label); text-align: left; }.review-row-copy { display: grid; gap: 4px; min-width: 0; }.review-row-copy b { overflow: hidden; font-size: 15px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }.review-row-copy small { color: var(--cx-secondary); font-size: 12px; }.review-row-main > strong { padding-left: 12px; font-size: 16px; font-variant-numeric: tabular-nums; white-space: nowrap; }.review-row-main > em { position: absolute; right: 8px; bottom: 3px; color: var(--cx-red); font-size: 11px; font-style: normal; }.review-thumb { display: grid; place-items: center; width: 28px; height: 28px; margin-left: 8px; border-radius: 7px; background: var(--cx-fill); color: var(--cx-secondary); font-size: 10px; }.review-check { display: grid; place-items: center; width: 22px; height: 22px; margin-right: 10px; border: 1.5px solid var(--cx-tertiary); border-radius: 50%; color: #fff; font-size: 13px; }.selected .review-check { border-color: var(--cx-blue); background: var(--cx-blue); }.review-more { min-width: 44px; min-height: 72px; border: 0; background: transparent; color: var(--cx-secondary); font-weight: 700; letter-spacing: 1px; }
.review-menu { position: absolute; z-index: 2; top: 58px; right: 8px; padding: 4px; border-radius: 10px; background: var(--cx-surface); box-shadow: 0 8px 20px rgba(0,0,0,.14); }.review-menu button { min-height: 40px; padding: 0 12px; border: 0; border-radius: 7px; background: transparent; color: var(--cx-label); font-size: 14px; white-space: nowrap; }.review-detail { grid-column: 1 / -1; padding: 0 16px 12px; color: var(--cx-secondary); font-size: 13px; }.review-detail p { margin: 8px 0; }.review-detail .photos { padding: 0; }.review-detail .review { margin: 10px -16px -12px; }.review-remind { width: 100%; min-height: 44px; border: 0; border-radius: 10px; background: #e9f2ff; color: #0057b8; font-weight: 600; }
.review-supplement { overflow: hidden; margin: 0 -16px 20px; background: var(--cx-surface); border-top: 1px solid var(--cx-separator); border-bottom: 1px solid var(--cx-separator); }.review-supplement-head { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 56px; padding: 0 16px; border: 0; background: transparent; color: var(--cx-label); font-size: 15px; text-align: left; }.review-supplement-head b { color: var(--cx-blue); font-size: 13px; }.review-read-list { margin: 0 -16px 12px; overflow: hidden; background: var(--cx-surface); }.review-read-list button { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 48px; padding: 0 16px; border: 0; border-bottom: 1px solid var(--cx-separator); background: transparent; color: var(--cx-label); text-align: left; }.review-read-list span { color: var(--cx-blue); font-size: 13px; }.review-read-list p { padding: 0 16px; color: var(--cx-secondary); }
.review-tools { display: grid; gap: 8px; margin-top: 20px; }.review-tools .export-tool { min-height: 56px; margin: 0; border-radius: 12px; }.review-tools .export-tool + .export-tool { background: var(--cx-surface); color: var(--cx-blue); box-shadow: inset 0 0 0 1px var(--cx-separator); }.review-tools .export-tool + .export-tool small { color: var(--cx-secondary); }
.review-batch-bar { position: fixed; z-index: 5; right: max(12px, calc((100vw - 600px)/2 + 12px)); bottom: calc(76px + env(safe-area-inset-bottom)); left: max(12px, calc((100vw - 600px)/2 + 12px)); display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 60px; padding: 8px 10px 8px 14px; border-radius: 14px; background: var(--cx-label); color: #fff; box-shadow: 0 10px 28px rgba(0,0,0,.2); font-size: 13px; font-variant-numeric: tabular-nums; }.review-batch-bar div { display: flex; gap: 6px; }.review-batch-bar button { min-width: 0; min-height: 44px; padding: 0 10px; border: 0; border-radius: 10px; background: rgba(255,255,255,.16); color: #fff; font-size: 13px; }.review-batch-bar button:last-child { background: var(--cx-blue); }
.review-photo-shortcut { min-width: 40px; min-height: 72px; border: 0; background: transparent; color: var(--cx-secondary); font-size: 11px; }
.review-batch-results { margin: 0 -16px 12px; background: var(--cx-surface); }.review-batch-results p { display: flex; align-items: center; justify-content: space-between; min-height: 40px; margin: 0; padding: 0 16px; border-bottom: 1px solid var(--cx-separator); font-size: 13px; }.review-batch-results .ok span { color: var(--cx-green); }.review-batch-results .failed span { color: var(--cx-red); }
.review-test-category, .review-compat-category { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (min-width: 600px) { body { padding: 22px 0; }.shell { min-height: calc(100svh - 44px); border-radius: 28px; overflow: hidden; box-shadow: 0 18px 50px rgba(0,0,0,.08); }.nav { bottom: 22px; border-radius: 0 0 28px 28px; } }
@media (max-width: 390px) { .top h1 { font-size: 30px; }.nav.admin button { font-size: 8px; }.summary div { padding: 15px 12px; }.quick { grid-template-columns: 1fr; }.business-controls { grid-template-columns: 1fr; }.ledger-breakdown { grid-template-columns: 1fr; }.ledger-breakdown div { display: flex; align-items: center; justify-content: space-between; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.13); }.ledger-breakdown span { min-height: 0; }.review-stats { font-size: 12px; }.review-row-main { padding-left: 12px; }.review-row-copy b { font-size: 14px; }.review-batch-bar { right: 8px; left: 8px; }.review-batch-bar button { padding: 0 8px; font-size: 12px; } }

/* Pending review: one compact decision flow, preserving every existing action. */
#app > .top:has(+ .review-page) { display: none; }
.review-page { padding-top: 18px; padding-bottom: 104px; }
.review-heading { align-items: flex-start; margin: 0 0 14px; }
.review-heading h2 { font-size: 28px; line-height: 1.2; letter-spacing: -.03em; }
.review-heading p { margin: 5px 0 0; color: var(--cx-secondary); font-size: 13px; }
.review-user { display: flex; align-items: center; gap: 8px; padding-top: 2px; }
.review-user span { display: grid; gap: 1px; text-align: right; }
.review-user b { color: var(--cx-label); font-size: 13px; }
.review-user small { color: var(--cx-secondary); font-size: 12px; }
.review-user .logout { min-height: 44px; padding: 0 8px; border: 0; background: transparent; color: var(--cx-secondary); font-size: 13px; }
.review-controls { display: flex; align-items: end; gap: 8px; margin-bottom: 14px; }
.review-filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); flex: 1; gap: 8px; min-width: 0; }
.review-filters > label, .review-filters .store-filter { display: grid; grid-template-columns: 1fr; align-content: center; min-width: 0; min-height: 44px; margin: 0; padding: 4px 10px; border: 1px solid var(--cx-separator); border-radius: 10px; background: var(--cx-surface); box-shadow: none; color: var(--cx-secondary); font-size: 12px; font-weight: 600; }
.review-filters .store-filter select, .review-filters > label > select { min-width: 0; min-height: 22px; padding: 0 18px 0 0; border: 0; border-radius: 0; background-color: transparent; color: var(--cx-label); font-size: 14px; font-weight: 600; }
.review-filters > label:has(> select):focus-within, .review-filters .store-filter:focus-within { box-shadow: inset 0 0 0 2px var(--cx-blue); }
.review-export-menu { position: relative; flex: 0 0 auto; }
.review-export-menu summary { display: flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 11px; border-radius: 10px; background: var(--cx-blue); color: #fff; cursor: pointer; font-size: 14px; font-weight: 650; list-style: none; }
.review-export-menu summary::-webkit-details-marker { display: none; }
.review-export-menu summary span { font-size: 16px; line-height: 1; }
.review-export-menu > div { position: absolute; z-index: 4; top: calc(100% + 6px); right: 0; display: grid; width: 172px; padding: 4px; border-radius: 10px; background: var(--cx-surface); box-shadow: 0 8px 20px rgba(0,0,0,.14); }
.review-export-menu button { min-height: 44px; padding: 0 10px; border: 0; border-radius: 7px; background: transparent; color: var(--cx-label); font-size: 14px; text-align: left; white-space: nowrap; }
.review-export-menu button:hover, .review-export-menu button:active { background: var(--cx-surface-muted); }
.review-records { gap: 9px; }
.review-card { overflow: hidden; border: 1px solid var(--cx-separator); border-radius: 14px; box-shadow: none; }
.review-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 14px 0; }
.review-card-head > div { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; min-width: 0; }
.review-card-head b { color: var(--cx-label); font-size: 16px; line-height: 1.35; }
.review-card-head strong { flex: 0 0 auto; color: var(--cx-label); font-size: 18px; font-variant-numeric: tabular-nums; letter-spacing: -.02em; white-space: nowrap; }
.review-status { display: inline-flex; align-items: center; min-height: 22px; padding: 1px 7px; border-radius: 999px; background: var(--cx-fill); color: var(--cx-secondary); font-size: 11px; font-weight: 600; line-height: 1.2; }
.review-status.overdue { background: #fff0ee; color: var(--cx-red); }
.review-card-meta { margin: 7px 14px 0; color: var(--cx-secondary); font-size: 12px; line-height: 1.45; }
.review-card-body { padding: 7px 14px 0; }
.review-card-body .delivery-detail { margin: 0; }
.review-card-body .delivery-detail p, .review-card-body .detail { margin: 7px 0; padding: 0; color: var(--cx-secondary); font-size: 13px; line-height: 1.5; }
.review-card-body .delivery-detail .delivery-wait { color: var(--cx-secondary); }
.review-card-body .delivery-detail .error { color: var(--cx-red); }
.review-card-body > b, .review-card-body .payment-receipt > b { display: block; margin-top: 9px; color: var(--cx-secondary); font-size: 12px; }
.review-card-body .photos { padding: 7px 0 0; }
.review-card .review { display: flex; gap: 8px; margin-top: 14px; border-top: 1px solid var(--cx-separator); }
.review-card .review button { flex: 1; min-height: 48px; padding: 0 10px; border: 0; border-radius: 0; background: var(--cx-surface); color: var(--cx-secondary); font-size: 14px; }
.review-card .review button + button { border-left: 1px solid var(--cx-separator); }
.review-card .review button:last-child { color: var(--cx-blue); font-weight: 650; }
.review-card .review button:only-child { color: var(--cx-red); }
@media (max-width: 390px) { .review-page { padding-right: 12px; padding-left: 12px; }.review-heading h2 { font-size: 26px; }.review-user b { max-width: 78px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.review-controls { gap: 6px; }.review-filters { gap: 6px; }.review-filters > label, .review-filters .store-filter { padding-right: 7px; padding-left: 8px; }.review-export-menu summary { padding: 0 9px; }.review-card-head, .review-card-body { padding-right: 12px; padding-left: 12px; }.review-card-meta { margin-right: 12px; margin-left: 12px; } }

/* Global relayout: every non-review surface follows the compact review rhythm. */
.top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: max(16px, env(safe-area-inset-top)) 16px 8px; }
.top > div:first-child { min-width: 0; }
.top h1 { margin: 0; color: var(--cx-label); font-size: 28px; line-height: 1.18; letter-spacing: -.03em; }
.top small { display: block; margin: 4px 0 0; color: var(--cx-secondary); font-size: 13px; line-height: 1.4; }
.user { display: grid; grid-template-columns: auto auto; grid-template-areas: 'name exit' 'role exit'; column-gap: 8px; align-items: center; flex: 0 0 auto; padding-top: 2px; }
.user b { grid-area: name; max-width: 112px; overflow: hidden; color: var(--cx-label); font-size: 13px; line-height: 1.2; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.user span { grid-area: role; font-size: 12px; line-height: 1.3; text-align: right; }
.user .logout { grid-area: exit; min-height: 44px; margin: 0; padding: 0 2px; border: 0; background: transparent; color: var(--cx-secondary); }
.page { padding: 4px 16px 104px; }
.page > .heading { align-items: flex-start; margin: 0 0 14px; }
.page > .heading h2, .hello h2 { font-size: 18px; line-height: 1.3; letter-spacing: -.02em; }
.page > .heading p, .hello p { margin-top: 4px; font-size: 13px; }
.page-count { margin: 0 0 10px; color: var(--cx-secondary); font-size: 13px; }
.page-intro { margin: 0 0 10px; color: var(--cx-secondary); font-size: 13px; }
.hello { margin: 2px 0 16px; }
.hello + .summary, .hello + .install-card { margin-top: 0; }

/* Forms retain their fields and handlers, but leave the page with a single, compact action. */
.login-card, .form, .period-open, .business-tools, .business-export-panel { padding: 16px; border: 1px solid var(--cx-separator); border-radius: 14px; box-shadow: none; }
.form label, .period-open label, .login-card label { margin-top: 16px; }
.form .primary, .period-open .primary, .business-tools .primary { width: auto; min-width: 132px; min-height: 46px; margin-top: 20px; padding: 0 16px; border-radius: 10px; }
.login-card .primary { width: 100%; min-height: 48px; margin-top: 20px; }
.upload { min-height: 76px; padding: 14px 16px; border: 1px dashed rgba(32,94,199,.35); border-radius: 10px; background: var(--cx-surface-muted); color: var(--cx-label) !important; }
.upload small { margin-top: 4px; }
.amount input { font-variant-numeric: tabular-nums; }

/* List cards: title/status and amount, quiet metadata, then detail and actions. */
.records, .review-records { gap: 9px; }
.card, .period-card { overflow: hidden; border: 1px solid var(--cx-separator); border-radius: 14px; box-shadow: none; }
.card .row { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; column-gap: 10px; min-height: 0; padding: 14px 14px 0; }
.card .row:not(:has(.icon)) { grid-template-columns: minmax(0,1fr) auto; }
.card .main { min-width: 0; }
.card .main b { display: block; overflow: hidden; color: var(--cx-label); font-size: 16px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.card .main span { display: block; margin-top: 5px; color: var(--cx-secondary); font-size: 12px; line-height: 1.45; }
.card .money { display: grid; justify-items: end; gap: 5px; padding-left: 12px; }
.card .money b { color: var(--cx-label); font-size: 18px; font-variant-numeric: tabular-nums; letter-spacing: -.02em; white-space: nowrap; }
.status, .review-status { display: inline-flex; align-items: center; min-height: 22px; margin: 0; padding: 1px 7px; border-radius: 999px; font-size: 11px; line-height: 1.2; }
.detail { margin: 7px 14px 0; padding: 0; color: var(--cx-secondary); font-size: 13px; line-height: 1.5; }
.rejection-reason { margin: 8px 14px 0; padding: 0; border: 0; background: transparent; color: var(--cx-red); }
.photos { padding: 8px 14px 0; }
.card > .review { display: flex; gap: 8px; margin-top: 14px; border-top: 1px solid var(--cx-separator); }
.card > .review button { flex: 1; min-height: 48px; border: 0; border-radius: 0; background: var(--cx-surface); color: var(--cx-secondary); font-size: 14px; }
.card > .review button + button { border-left: 1px solid var(--cx-separator); }
.card > .review button:last-child { color: var(--cx-blue); font-weight: 650; }

/* Overview, filters, settlement and business use whitespace before extra containers. */
.summary { border-radius: 14px; }
.summary div { padding: 14px; }
.summary strong, .overview-amounts strong, .period-values b { font-variant-numeric: tabular-nums; }
.quick { gap: 8px; margin: 12px 0 24px; }
.quick button { min-height: 72px; padding: 14px; border: 1px solid var(--cx-separator); border-radius: 12px; box-shadow: none; }
.quick button:first-child { background: var(--cx-surface); color: var(--cx-label); }
.quick button:last-child { background: var(--cx-blue); color: #fff; }
.quick button:last-child span { color: rgba(255,255,255,.78); }
.overview h3 { margin: 24px 0 8px; font-size: 18px; }
.store-pending-list, .store-ledger, .payment-list { border: 1px solid var(--cx-separator); border-radius: 14px; box-shadow: none; }
.store-pending-row { min-height: 52px; padding: 8px 14px; }
.overview-amounts { gap: 8px; }
.overview-amounts > div { padding: 14px; border: 1px solid var(--cx-separator); border-radius: 12px; box-shadow: none; }
.overview-shortcuts { gap: 8px; }
.overview-shortcuts button { min-height: 48px; border-radius: 10px; }
.store-filter, .page > label:has(> select) { min-height: 44px; margin-bottom: 10px; padding: 3px 10px; border: 1px solid var(--cx-separator); border-radius: 10px; box-shadow: none; }
.store-filter select, .page > label > select { min-height: 36px; background: transparent; }
.export-tool, .business-export-actions button, .period-close { width: auto; min-height: 44px; padding: 0 14px; border-radius: 10px; }
.export-tool { display: inline-flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; max-width: 100%; min-height: 64px; margin: 0 0 10px; padding: 10px 14px; border: 0; background: var(--cx-blue); color: #fff; box-shadow: none; text-align: left; }
.export-tool small { display: block; color: rgba(255,255,255,.76); font-size: 12px; line-height: 1.35; }
.export-tool:disabled { background: var(--cx-fill); color: var(--cx-secondary); }
.export-tool:disabled small { color: var(--cx-secondary); }
.business-page .business-title h2 { display: none; }
.period-head { padding: 14px 14px 0; }
.period-values { margin-top: 12px; }
.period-values div { padding: 12px 10px; }
.period-close { margin: 12px 14px 14px; background: var(--cx-surface-muted); color: var(--cx-label); }
.business-controls { gap: 8px; }
.business-export-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.business-export-actions button { flex: 0 1 auto; background: var(--cx-blue); }

@media (max-width: 390px) {
  .top { padding-right: 12px; padding-left: 12px; }
  .top h1 { font-size: 26px; }
  .user b { max-width: 76px; }
  .page { padding-right: 12px; padding-left: 12px; }
  .quick { grid-template-columns: 1fr; }
  .card .row { padding-right: 12px; padding-left: 12px; }
  .detail, .rejection-reason { margin-right: 12px; margin-left: 12px; }
  .photos { padding-right: 12px; padding-left: 12px; }
}

/* ==== 角色主题：店长端=青(与顶部栏一致) / 老板端=深蓝(与顶部栏一致) ==== */
body[data-role="employee"] {
  --cx-blue-tint: rgba(8,123,115,.12);
  --cx-blue: #087b73;
  --cx-blue-pressed: #066b64;
  --cx-brand: #087b73;
  --cx-brand-pressed: #066b64;
}
body[data-role="admin"] {
  --cx-blue-tint: rgba(20,33,58,.10);
  --cx-blue: #14213a;
  --cx-blue-pressed: #0e1729;
  --cx-brand: #14213a;
  --cx-brand-pressed: #0e1729;
}
#app:has(.nav.employee) {
  --cx-blue-tint: rgba(8,123,115,.12);
  --cx-blue: #087b73;
  --cx-blue-pressed: #066b64;
  --cx-brand: #087b73;
  --cx-brand-pressed: #066b64;
}
#app:has(.nav.admin) {
  --cx-blue-tint: rgba(20,33,58,.10);
  --cx-blue: #14213a;
  --cx-blue-pressed: #0e1729;
  --cx-brand: #14213a;
  --cx-brand-pressed: #0e1729;
}

/* 旧样式表(style.css)的 .nav button.active 用 --forest 深绿，会盖掉角色主色 —— 这里强制跟随 */
.nav button.active, .nav.admin button.active { color: var(--cx-blue) !important; }
.nav button.active b, .nav.admin button.active b { color: var(--cx-blue) !important; }
.top h1, .hello h2, .heading h2 { color: var(--cx-label); }

/* 旧主题变量 --forest/--forest-2/--mint 全量重映射到角色主色 */
body[data-role="employee"] { --forest: #087b73; --forest-2: #066b64; --mint: #e6f2f0; }
body[data-role="admin"]    { --forest: #14213a; --forest-2: #0e1729; --mint: #e9ecf2; }
#app:has(.nav.employee) { --forest: #087b73; --forest-2: #066b64; --mint: #e6f2f0; }
#app:has(.nav.admin)    { --forest: #14213a; --forest-2: #0e1729; --mint: #e9ecf2; }