:root {
  color-scheme: light;
  --color-primary: #2563EB;
  --color-primary-light: #DBEAFE;
  --color-action: #F59E0B;
  --color-action-dark: #D97706;
  --color-background: #F8FAFC;
  --color-surface: #ffffff;
  --color-text: #0F172A;
  --color-muted: #64748B;
  --color-muted-text: #64748B;
  --color-focus: #2563EB;
  --color-border: #E2E8F0;
  --color-success: #10B981;
  --color-success-light: #D1FAE5;
  --color-danger: #EF4444;
  --color-danger-light: #FEE2E2;
  --color-warning: #F59E0B;
  --color-warning-light: #FEF3C7;
  --color-info: #3B82F6;
  --color-camera-bg: #111827;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "SF Mono", "Fira Code", monospace;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-full: 9999px;
  --space-1: 4px;
  --space-unit: 4px;
  --content-width: 420px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.05);
  --shadow-md: 0 4px 12px rgba(0,0,0,.08);
  --shadow-lg: 0 8px 24px rgba(0,0,0,.12);
  --nav-height: 56px;
  --header-height: 44px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

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

html {
  background: var(--color-background);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100dvh;
  padding-bottom: calc(var(--nav-height) + var(--safe-bottom) + 8px);
}

body.no-nav { padding-bottom: 0; }

a { color: var(--color-primary); text-decoration: none; }

button, input, select, textarea { font: inherit; }

:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}

/* ── Top Header ── */
.app-header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--space-4);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  font-weight: 600;
  font-size: 16px;
}

.app-header .back-btn {
  position: absolute;
  left: var(--space-3);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  font-size: 20px;
  color: var(--color-text);
  cursor: pointer;
}

.app-header .header-action {
  position: absolute;
  right: var(--space-3);
  font-size: 14px;
  font-weight: 500;
  color: var(--color-primary);
  border: none;
  background: none;
  cursor: pointer;
}

/* ── Bottom Navigation ── */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: calc(var(--nav-height) + var(--safe-bottom));
  padding-bottom: var(--safe-bottom);
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  will-change: transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.bottom-nav a {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-size: 11px;
  color: var(--color-muted);
  text-decoration: none;
  transition: color .15s;
}

.bottom-nav a.active { color: var(--color-primary); font-weight: 600; }
.bottom-nav a .nav-icon { font-size: 22px; line-height: 1; }

/* ── Cards ── */
.card {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin: var(--space-3) var(--space-4);
  box-shadow: var(--shadow-sm);
}

/* ── Buttons ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-sm);
  border: none;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity .15s;
  min-height: 44px;
}

.btn:active { opacity: .7; }
.btn-primary { background: var(--color-primary); color: #fff; }
.btn-action { background: var(--color-action); color: #fff; }
.btn-danger { background: var(--color-danger); color: #fff; }
.btn-outline { background: transparent; border: 1.5px solid var(--color-border); color: var(--color-text); }
.btn-sm { padding: var(--space-1) var(--space-3); font-size: 13px; min-height: 32px; }
.btn-block { width: 100%; }

/* ── Form Elements ── */
.input-group {
  margin-bottom: var(--space-4);
}

.input-group label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-muted);
  margin-bottom: var(--space-1);
}

.input-group input,
.input-group select {
  width: 100%;
  height: 44px;
  padding: 0 var(--space-3);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  font-size: 15px;
  color: var(--color-text);
  transition: border-color .15s;
}

.input-group input:focus,
.input-group select:focus {
  border-color: var(--color-primary);
  outline: none;
}

/* ── Toggle Switch ── */
.toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) 0;
}

.toggle-row .label { font-size: 15px; }
.toggle-row .desc { font-size: 12px; color: var(--color-muted); }

.toggle {
  position: relative;
  width: 48px;
  height: 28px;
  flex-shrink: 0;
}

.toggle input { opacity: 0; width: 0; height: 0; }

.toggle .slider {
  position: absolute;
  inset: 0;
  background: #CBD5E1;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: background .2s;
}

.toggle .slider::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  background: #fff;
  border-radius: 50%;
  transition: transform .2s;
  box-shadow: var(--shadow-sm);
}

.toggle input:checked + .slider { background: var(--color-primary); }
.toggle input:checked + .slider::after { transform: translateX(20px); }

/* ── Badge ── */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 600;
}

.badge-inbound { background: var(--color-success-light); color: #059669; }
.badge-outbound { background: var(--color-danger-light); color: #DC2626; }
.badge-dup { background: #F1F5F9; color: #94A3B8; }
.badge-intercept { background: var(--color-danger-light); color: #DC2626; }
.badge-warning { background: var(--color-warning-light); color: #854D0E; }
.badge-normal { background: var(--color-success-light); color: #059669; }

/* ── Toast ── */
.toast {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0,0,0,.78);
  color: #fff;
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-sm);
  font-size: 14px;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s;
}

.toast.show { opacity: 1; }

/* ── Stats Card ── */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
}

.stat-card {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  text-align: center;
  box-shadow: var(--shadow-sm);
}

.stat-card .value {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.2;
}

.stat-card .label {
  font-size: 12px;
  color: var(--color-muted);
  margin-top: var(--space-1);
}

/* ── Tab Bar (inline) ── */
.tab-bar {
  display: flex;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}

.tab-bar a {
  flex: 1;
  text-align: center;
  padding: var(--space-3) 0;
  font-size: 14px;
  color: var(--color-muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: all .15s;
}

.tab-bar a.active {
  color: var(--color-primary);
  font-weight: 600;
  border-bottom-color: var(--color-primary);
}

/* ── List Items ── */
.list-item {
  display: flex;
  align-items: center;
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  gap: var(--space-3);
}

.list-item .mono {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 500;
  flex: 1;
}

.list-item .meta {
  font-size: 12px;
  color: var(--color-muted);
  text-align: right;
}

.list-item .copy-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: var(--color-background);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 14px;
  flex-shrink: 0;
}

/* ── Section Title ── */
.section-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: .5px;
  padding: var(--space-4) var(--space-4) var(--space-2);
}

/* ── Empty State ── */
.empty-state {
  text-align: center;
  padding: var(--space-10) var(--space-4);
  color: var(--color-muted);
}

.empty-state .icon { font-size: 48px; margin-bottom: var(--space-3); }
.empty-state .text { font-size: 15px; }

/* ── Intercept Overlay ── */
.intercept-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--color-danger);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  padding: var(--space-6);
  text-align: center;
}

.intercept-overlay .alert-icon { font-size: 64px; margin-bottom: var(--space-4); }
.intercept-overlay .alert-title { font-size: 24px; font-weight: 700; margin-bottom: var(--space-4); }
.intercept-overlay .alert-info { font-size: 16px; margin-bottom: var(--space-2); opacity: .9; }
.intercept-overlay .alert-reason { font-size: 18px; font-weight: 600; margin-bottom: var(--space-8); }

.intercept-overlay .alert-actions {
  display: flex;
  gap: var(--space-4);
  width: 100%;
}

.intercept-overlay .alert-actions .btn {
  flex: 1;
  border: 2px solid rgba(255,255,255,.5);
  background: rgba(255,255,255,.15);
  color: #fff;
  font-size: 16px;
  padding: var(--space-4);
}

.intercept-overlay .alert-actions .btn:first-child {
  background: #fff;
  color: var(--color-danger);
  border-color: #fff;
}

/* ── Scan Camera Sim ── */
.camera-area {
  background: var(--color-camera-bg);
  position: relative;
  width: 100%;
  aspect-ratio: 4/3;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.camera-area .scan-frame {
  width: 70%;
  height: 40%;
  border: 2px solid rgba(255,255,255,.3);
  border-radius: var(--radius-sm);
  position: relative;
}

.camera-area .corner {
  position: absolute;
  width: 20px;
  height: 20px;
  border-color: var(--color-action);
  border-style: solid;
}

.camera-area .corner.tl { top: -2px; left: -2px; border-width: 3px 0 0 3px; border-radius: 4px 0 0 0; }
.camera-area .corner.tr { top: -2px; right: -2px; border-width: 3px 3px 0 0; border-radius: 0 4px 0 0; }
.camera-area .corner.bl { bottom: -2px; left: -2px; border-width: 0 0 3px 3px; border-radius: 0 0 0 4px; }
.camera-area .corner.br { bottom: -2px; right: -2px; border-width: 0 3px 3px 0; border-radius: 0 0 4px 0; }

.camera-toolbar {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  display: flex;
  gap: var(--space-2);
}

.camera-toolbar button {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,.15);
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
}

.camera-toolbar button.active {
  background: var(--color-action);
}

.camera-hint {
  position: absolute;
  bottom: var(--space-3);
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255,255,255,.6);
  font-size: 13px;
  white-space: nowrap;
}

/* ── Scan Stats Bar ── */
.scan-stats {
  display: flex;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-2) var(--space-3);
  gap: var(--space-2);
}

.scan-stat {
  flex: 1;
  text-align: center;
  padding: var(--space-1);
}

.scan-stat .val {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
}

.scan-stat .lbl {
  font-size: 11px;
  color: var(--color-muted);
}

/* ── Floating Action ── */
.fab-bar {
  position: fixed;
  bottom: calc(var(--nav-height) + var(--safe-bottom) + 8px);
  left: var(--space-4);
  right: var(--space-4);
  display: flex;
  gap: var(--space-2);
  z-index: 40;
}

.fab-bar .btn { flex: 1; box-shadow: var(--shadow-md); }

/* ── Detail FAB ── */
.detail-fab {
  position: fixed;
  bottom: calc(var(--space-4) + var(--safe-bottom));
  left: var(--space-4);
  right: var(--space-4);
  display: flex;
  gap: var(--space-2);
  z-index: 40;
}

.detail-fab .btn { flex: 1; box-shadow: var(--shadow-md); }

/* ── Segmented Control ── */
.seg-control {
  display: flex;
  background: var(--color-background);
  border-radius: var(--radius-sm);
  padding: 3px;
  margin: var(--space-3) var(--space-4);
}

.seg-control button {
  flex: 1;
  padding: var(--space-2);
  border: none;
  background: transparent;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-muted);
  cursor: pointer;
  transition: all .15s;
}

.seg-control button.active {
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--shadow-sm);
}

/* ── Login Page ── */
.login-page {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-8);
  background: var(--color-surface);
}

.login-page .logo {
  text-align: center;
  margin-bottom: var(--space-10);
}

.login-page .logo .icon { font-size: 56px; }
.login-page .logo .title { font-size: 22px; font-weight: 700; margin-top: var(--space-2); }
.login-page .logo .subtitle { font-size: 14px; color: var(--color-muted); }

/* ── Chart Placeholder ── */
.chart-area {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  margin: var(--space-3) var(--space-4);
  padding: var(--space-4);
  box-shadow: var(--shadow-sm);
}

.chart-area .chart-title {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: var(--space-3);
}

.chart-placeholder {
  width: 100%;
  height: 200px;
  position: relative;
  overflow: hidden;
}

.chart-placeholder svg {
  width: 100%;
  height: 100%;
}

/* ── Menu List ── */
.menu-list {
  background: var(--color-surface);
  margin: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.menu-item {
  display: flex;
  align-items: center;
  padding: var(--space-4);
  border-bottom: 1px solid var(--color-border);
  text-decoration: none;
  color: var(--color-text);
  gap: var(--space-3);
}

.menu-item:last-child { border-bottom: none; }
.menu-item .menu-icon { font-size: 20px; width: 28px; text-align: center; }
.menu-item .menu-text { flex: 1; font-size: 15px; }
.menu-item .menu-arrow { color: var(--color-muted); font-size: 14px; }
.menu-item .menu-value { font-size: 14px; color: var(--color-muted); }

/* ── Scrollable list area ── */
.scroll-list {
  max-height: 35vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* ── Utility ── */
.text-center { text-align: center; }
.text-muted { color: var(--color-muted); }
.text-danger { color: var(--color-danger); }
.text-success { color: var(--color-success); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mb-3 { margin-bottom: var(--space-3); }
.px-4 { padding-left: var(--space-4); padding-right: var(--space-4); }
.hidden { display: none !important; }

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

[hidden] { display: none !important; }
.permission-description { margin: 16px 0; color: var(--color-muted); line-height: 1.8; }

@media (min-width:600px) {
  main, .bottom-nav { max-width:480px; margin-inline:auto; }
  .bottom-nav { left:0; right:0; width:100%; transform:none; }
}

.file-copy-actions { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; }
.file-copy-actions .btn { min-height:44px; }
.file-record { display:flex; align-items:center; gap:8px; padding:12px 0; border-bottom:1px solid var(--color-border); }
.file-record .mono { flex:1; min-width:0; overflow-wrap:anywhere; }
.file-record input { width:20px; height:20px; flex-shrink:0; }
.file-record .copy-btn { min-width:44px; min-height:44px; }

#adminContent form { display:grid; gap:12px; }
#adminContent input:not([type=checkbox]) { min-width:0; width:100%; min-height:44px; font-size:16px; padding:8px; }

.login-page { padding-bottom:0; }
.login-main { min-height:100dvh; display:flex; align-items:center; padding:24px 16px; }
.login-card { width:100%; margin:0; padding:28px 24px; }
.login-brand { font-weight:600; color:var(--color-primary); margin-bottom:24px; }
.login-card h1 { font-size:28px; }
.login-card .input-group { margin:20px 0; }
.login-card input { width:100%; min-height:48px; font-size:16px; }
.login-divider { display:flex; align-items:center; gap:16px; margin:24px 0; color:var(--color-muted); }
.login-divider::before,.login-divider::after { content:''; height:1px; flex:1; background:var(--color-border); }
.login-note { margin-top:16px; color:var(--color-muted); font-size:12px; line-height:1.8; }
#adminContent form { display:grid; gap:16px; }
#adminContent label { display:grid; gap:8px; font-size:14px; }
#adminContent select { width:100%; min-height:44px; padding:8px; font-size:16px; }
#adminContent .mail-report-form input[type=email] { border:1px solid var(--color-border); background:var(--color-surface); border-radius:var(--radius-sm); }
#adminContent .mail-report-toggle { display:flex; align-items:center; gap:10px; min-height:44px; cursor:pointer; }
.mail-report-toggle input { width:20px; height:20px; margin:0; flex-shrink:0; accent-color:var(--color-primary); }
.member-item { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 0; border-bottom:1px solid var(--color-border); }
.member-item p { margin:6px 0; }

.manual-entry h2 { font-size:18px; }
.manual-entry .permission-description { margin:8px 0 16px; font-size:13px; }
.manual-entry form { display:grid; gap:8px; }
.manual-entry label { font-size:14px; font-weight:500; }
.manual-entry select,.manual-entry input { min-width:0; min-height:44px; padding:10px 12px; border:1px solid var(--color-border); border-radius:var(--radius-sm); font-size:16px; background:var(--color-surface); color:var(--color-text); }
.manual-entry select { width:100%; margin-bottom:8px; }
.manual-input-row { display:flex; gap:8px; }
.manual-input-row input { flex:1; width:0; }
.manual-input-row .btn { flex-shrink:0; padding-inline:16px; }
.manual-photo-actions { display:flex; align-items:center; flex-wrap:wrap; gap:12px; margin-top:8px; }
.manual-photo-preview { display:flex; align-items:center; flex-wrap:wrap; gap:12px; }
.manual-photo-preview[hidden] { display:none; }
#manualPhotoView { padding:0; border:1px solid var(--color-border); border-radius:12px; background:var(--color-surface); overflow:hidden; cursor:pointer; }
#manualPhotoImage { display:block; width:128px; height:96px; object-fit:cover; }
#manualPhotoStatus:empty { display:none; }
#manualError:empty { display:none; }

.swipe-batch { position:relative; overflow:hidden; border-radius:var(--radius-lg); margin:16px 0; background:var(--color-danger); }
#adminContent .swipe-batch-content { position:relative; z-index:1; margin:0; width:100%; transition:transform .18s ease; touch-action:pan-y; user-select:none; }
.swipe-batch.revealed .swipe-batch-content { transform:translateX(-88px); }
.swipe-delete { position:absolute; inset:0 0 0 auto; width:88px; border:0; background:var(--color-danger); color:#fff; font-size:16px; font-weight:600; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:8px; cursor:pointer; visibility:hidden; }
.swipe-delete::before { content:'×'; font-size:32px; line-height:1; }
.swipe-batch.revealed .swipe-delete { visibility:visible; }
#adminContent .card .btn + .btn { margin-left:8px; }
#adminContent textarea { width:100%; min-height:100px; padding:12px; font-size:16px; border:1px solid var(--color-border); border-radius:var(--radius-sm); resize:vertical; }
.bottom-nav a { position:relative; }
.approval-badge { position:absolute; top:4px; left:calc(50% + 8px); min-width:18px; padding:2px 5px; border-radius:12px; background:var(--color-danger); color:white; font-size:11px; line-height:14px; }
@media (prefers-reduced-motion:reduce) { #adminContent .swipe-batch-content { transition:none; } }

/* 运单号独占一行，较长内容横向滚动查看，避免截断或换行误读。 */
#historyList .list-item { grid-template-columns:minmax(0,1fr) auto; gap:6px 12px; }
#historyList .mono { grid-column:1; grid-row:1; font-size:16px; white-space:nowrap; overflow-x:auto; overflow-wrap:normal; }
#historyList .record-details { grid-column:1; grid-row:2; display:flex; gap:10px; align-items:center; }
#historyList .copy-btn { grid-column:2; grid-row:1 / span 2; width:auto; min-width:44px; min-height:44px; }
#historyList .record-details .badge { font-size:11px; padding:3px 7px; }
.file-record-info { flex:1; min-width:0; display:flex; flex-direction:column; gap:5px; }
.file-record .mono { display:block; white-space:nowrap; overflow-x:auto; overflow-wrap:normal; font-size:16px; }
.file-record .meta { font-size:12px; }
.batch-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.batch-heading h3 { margin:0; min-width:0; overflow-wrap:anywhere; font-size:18px; }
.batch-status { color:#2563eb; font-size:12px; background:#eff6ff; border-radius:6px; padding:4px 8px; white-space:nowrap; }
.batch-metrics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; padding:14px 0; margin:12px 0; border-block:1px solid var(--color-border); }
.batch-metrics div { display:flex; flex-direction:column; gap:4px; }
.batch-metrics strong { font-size:22px; line-height:1.2; }
.batch-metrics span { color:var(--color-muted); font-size:12px; }
#adminContent:has(.swipe-batch) { background:transparent; border:0; box-shadow:none; padding:0 16px; }
#adminContent .swipe-batch { margin:12px 0; }
#adminContent .swipe-batch-content { padding:18px; box-shadow:none; }
#adminContent .swipe-batch-content > .meta { margin-top:10px; font-size:12px; line-height:1.5; }
#adminContent .swipe-batch-content > button:not(.swipe-delete) { margin-right:8px; }
.batch-photos { margin:16px 0; }
.batch-snapshot-list { display:flex; flex-wrap:wrap; gap:8px; padding:12px 0; }
.batch-snapshot-list button { max-width:100%; overflow-wrap:anywhere; }
#snapshotSaveStatus:empty { display:none; }
/* 统一平台排版：保留五项业务导航与既有权限。 */
:root { --color-primary:#0066cc; --color-primary-light:#e8f2ff; --color-background:#f5f5f7; --color-text:#1d1d1f; --color-muted:#6e6e73; --color-muted-text:#6e6e73; --color-border:rgba(0,0,0,.08); }
body { letter-spacing:.01em; }
.app-header { height:52px; font-size:18px; }
h1,h2,h3,strong,.btn { font-weight:600; }
.card { box-shadow:none; border:1px solid var(--color-border); }
.btn { min-height:44px; border-radius:12px; }
input,select,textarea { font-size:16px; border-radius:10px; }
.bottom-nav { background:rgba(255,255,255,.97); border-top:1px solid var(--color-border); box-shadow:none; }
.bottom-nav a { font-size:11px; gap:3px; }
.bottom-nav .nav-icon { font-size:22px; }
.guest-bar { padding:12px 20px; font-size:14px; }
.sync-status { margin:0; padding:10px 20px; background:#edf4fc; color:#315f8f; font-size:12px; }
.mode-pick { min-height:0; padding:32px 20px 24px; }
.mode-pick .hint { margin-bottom:16px; color:var(--color-muted); font-size:14px; }
.mode-pick .btn-row { gap:12px; }
.mode-pick .mode-card { padding:24px 10px; border-width:1px; border-radius:16px; background:white; min-height:164px; }
.mode-pick .mode-card .icon { font-size:30px; margin-bottom:12px; }
.mode-pick .mode-card .name { font-size:17px; font-weight:600; }
.mode-pick .mode-card .desc { font-size:12px; line-height:1.6; margin-top:8px; }
.manual-entry { margin:0 20px 24px; padding:20px; }
.manual-entry h2 { font-size:18px; }
.manual-entry .permission-description { margin:8px 0 16px; font-size:13px; }
.manual-entry label { font-size:13px; color:var(--color-muted); }
.manual-entry select { margin-bottom:12px; }
.top-control-bar { gap:8px; padding:12px 16px; }
.top-control-bar .btn { font-size:13px; }
.scan-stats { padding:20px 12px; border-bottom:1px solid var(--color-border); }
.scan-stat .val { font-size:28px; font-weight:600; font-variant-numeric:tabular-nums; }
.scan-stat .lbl { font-size:12px; margin-top:4px; }
.history-section { padding:16px; }
.history-header { gap:10px; padding:0 0 12px; align-items:flex-start; }
.history-header .title { font-size:17px; font-weight:600; }
#currentBatchName { padding:0; text-align:right; background:transparent; font-size:12px; }
#historyList { border:1px solid var(--color-border); border-radius:12px; overflow:hidden; background:white; }
#historyList .list-item { padding:14px 12px; }
#historyList .list-item:last-child { border-bottom:0; }
#copyCurrentBtn { margin-top:12px; }
.camera-note { font-size:12px; line-height:1.7; }
.history-section > .camera-note { padding:12px 0 0; background:transparent; }
.finish-bar { padding:16px; }
.batch-actions .btn { font-size:14px; }
.file-copy-actions { gap:8px; margin:16px 0; }
#businessPanel { padding-top:16px; }
#businessPanel #adminContent:not(:has(.swipe-batch)) { margin:0 16px; padding:20px; }
#adminContent > h2 { margin:16px 0 8px; font-size:22px; }
#adminContent > .permission-description { margin:8px 0 16px; font-size:14px; line-height:1.7; }
#adminContent > .meta { margin:10px 0 18px; font-size:12px; line-height:1.7; }
#adminContent > .btn-block { margin-top:10px; }
#adminContent form { display:grid; gap:12px; margin:16px 0 24px; }
#adminContent form label { display:grid; gap:8px; font-size:14px; }
#adminContent > .card { margin:12px 0; padding:16px; }
#adminContent > .card > .btn { margin:8px 8px 0 0; }
#adminContent > .card > .permission-description { margin:8px 0; line-height:1.7; }
#adminContent > .card .mono { display:block; overflow-wrap:anywhere; }
.statistics-card { margin-top:16px; padding-top:20px; border-top:1px solid var(--color-border); }
.statistics-card h3 { font-size:16px; margin:0 0 16px; }
.statistics-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 24px; }
.statistics-grid div { display:flex; flex-direction:column; gap:4px; }
.statistics-grid strong { font-size:24px; font-variant-numeric:tabular-nums; }
.statistics-grid span { font-size:12px; color:var(--color-muted); }
@media(min-width:768px) { .mode-pick { padding-top:40px; } .statistics-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:360px) { .manual-entry { margin-inline:12px; padding:16px; } #historyList .mono,.file-record .mono { font-size:14px; } }
.swipe-batch { background:var(--color-surface); }
.swipe-batch.revealed { background:var(--color-danger); }
.toast { transform:translateX(-50%); bottom:calc(var(--nav-height) + var(--safe-bottom) + 20px); top:auto; max-width:calc(100vw - 40px); white-space:normal; }
.file-record .copy-btn { border:0; border-radius:10px; background:#f5f5f7; padding:8px 12px; cursor:pointer; }
.swipe-record { position:relative; overflow:hidden; border-bottom:1px solid var(--color-border); background:white; }
.swipe-record:last-child { border-bottom:0; }
.swipe-record-content { position:relative; z-index:1; width:100%; background:white; transition:transform .18s ease; touch-action:pan-y; }
.swipe-record.revealed .swipe-record-content { transform:translateX(-80px); }
.record-delete { position:absolute; inset:0 0 0 auto; width:80px; border:0; background:var(--color-danger); color:white; font-size:15px; font-weight:600; cursor:pointer; visibility:hidden; }
.swipe-record.revealed .record-delete { visibility:visible; }
.record-delete:disabled { opacity:.7; }
.record-menu { width:32px; min-height:44px; flex-shrink:0; border:0; border-radius:8px; background:transparent; color:var(--color-muted); font-size:23px; cursor:pointer; }
.record-menu:focus-visible,.record-delete:focus-visible { outline:2px solid var(--color-primary); outline-offset:-3px; }
#historyList .swipe-record .list-item { grid-template-columns:minmax(0,1fr) auto 32px; border:0; gap:6px 8px; }
#historyList .record-menu { grid-column:3; grid-row:1 / span 2; }
.swipe-record .file-record { border:0; padding:12px 8px; }
@media(prefers-reduced-motion:reduce) { .swipe-record-content { transition:none; } }
#adminContent > .batch-status { display:inline-block; margin:4px 0 12px; }
.snapshot-file-button { width:calc(50% - 4px); border:1px solid var(--color-border); border-radius:12px; overflow:hidden; background:white; font-size:12px; text-align:left; padding:10px; cursor:pointer; overflow-wrap:anywhere; min-height:44px; }
.snapshot-file-button img { width:100%; aspect-ratio:4/3; object-fit:cover; display:block; border-radius:6px; margin-bottom:8px; }
/* Export date controls wrap on narrow mobile viewports. */
.statistics-export-form { display:flex; flex-wrap:wrap; align-items:flex-end; gap:12px; margin-bottom:12px; }
.statistics-export-form label { flex:1 1 145px; min-width:0; display:flex; flex-direction:column; gap:6px; font-size:14px; }
.statistics-export-form input { box-sizing:border-box; min-width:0; width:100%; }
.statistics-export-form > button { flex:1 1 100%; }
.stats-toolbar,.stats-datebar { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:16px; }
.stats-tabs { display:flex; gap:4px; padding:4px; background:#f5f5f7; border-radius:12px; }
.stats-tab,.stats-today,.stats-arrow,.stats-date { border:0; background:transparent; font:inherit; cursor:pointer; min-height:44px; border-radius:10px; }
.stats-tab { padding:8px 24px; color:var(--color-muted); }
.stats-tab[aria-pressed=true] { color:var(--color-primary); background:white; font-weight:600; }
.stats-today { padding:8px 12px; color:var(--color-primary); }
.stats-arrow { min-width:44px; font-size:28px; background:#f5f5f7; }
.stats-date { flex:1; font-size:18px; font-weight:600; }
.stats-calendar { border-top:1px solid var(--color-border); padding-top:16px; margin-bottom:24px; }
.stats-month-label { display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:14px; }
#adminContent .stats-month-label input { box-sizing:border-box; width:100%; min-width:0; max-width:none; }
.stats-calendar-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:4px; margin-top:12px; }
.stats-weekday { text-align:center; font-size:12px; color:var(--color-muted); padding:8px 0; }
.stats-calendar-day { border:0; background:transparent; min-height:48px; padding:4px 0; border-radius:10px; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:4px; color:var(--color-text); font:inherit; }
.stats-calendar-day small { font-size:10px; color:var(--color-muted); }
.stats-calendar-day[aria-pressed=true] { color:white; background:var(--color-primary); }
.stats-calendar-day[aria-pressed=true] small { color:white; }
.stats-overview { border-block:1px solid var(--color-border); padding:24px 0; }
.stats-total { display:block; font-size:48px; line-height:1.2; font-weight:600; font-variant-numeric:tabular-nums; margin:8px 0; }
.stats-overview .statistics-grid { margin-top:24px; }
.stats-people { padding:24px 0; }
.stats-people h3 { font-size:18px; font-weight:600; margin:0 0 8px; }
.stats-person { display:flex; align-items:center; gap:12px; justify-content:space-between; width:100%; border:0; border-bottom:1px solid var(--color-border); background:transparent; padding:16px 0; text-align:left; font:inherit; color:var(--color-text); cursor:pointer; }
.stats-person div { min-width:0; display:flex; flex-direction:column; gap:6px; }
.stats-person div:first-child { flex:1; }
.stats-person strong { font-weight:600; overflow-wrap:anywhere; }
.stats-person small { color:var(--color-muted); font-size:12px; overflow-wrap:anywhere; }
.stats-person div:nth-child(2) { text-align:right; }
.stats-empty { color:var(--color-muted); padding:24px 0; font-size:14px; }
.stats-export-panel { border-top:1px solid var(--color-border); padding-top:8px; }
.stats-export-panel summary { cursor:pointer; min-height:44px; padding:12px 0; font-weight:600; }
.stats-export-panel .meta,.stats-calendar .meta { font-size:12px; line-height:1.7; color:var(--color-muted); margin-top:8px; }
.stats-record { padding:16px 0; border-bottom:1px solid var(--color-border); }
.stats-record .mono { display:block; white-space:nowrap; overflow-x:auto; max-width:100%; }
.stats-record .meta { font-size:12px; line-height:1.7; margin:8px 0; white-space:pre-line; overflow-wrap:anywhere; }
.stats-record-actions { display:flex; flex-wrap:wrap; gap:8px; }
.stats-trace { padding:16px; border:1px solid var(--color-border); border-radius:16px; background:var(--color-surface); margin-bottom:24px; }
.stats-trace h2 { font-size:18px; margin:0 0 12px; }
#adminContent .stats-trace .stats-search-form { margin:0; }
.file-record.record-highlight { background:#eef6ff; box-shadow:inset 3px 0 0 var(--color-primary); border-radius:8px; scroll-margin:100px; }
.stats-batch-link { color:var(--color-primary); background:transparent; border:0; min-height:44px; font:inherit; text-align:left; padding:0; cursor:pointer; overflow-wrap:anywhere; }
.stats-refresh-bar { display:flex; gap:8px; align-items:center; justify-content:space-between; margin-bottom:8px; }
.stats-refresh-bar .meta { color:var(--color-muted); font-size:12px; line-height:1.6; }
.stats-sync-note { color:var(--color-muted); font-size:12px; line-height:1.7; margin-bottom:16px; }
.stats-sync-note.stats-sync-pending { padding:12px; background:#fff7e8; border-radius:10px; color:#865400; }
#adminContent .stats-search-form { grid-template-columns:minmax(0,1fr) auto; align-items:end; margin:16px 0 24px; }
.stats-search-form input { box-sizing:border-box; border:1px solid var(--color-border); background:var(--color-surface); }
.stats-search-form .meta { grid-column:1/-1; color:var(--color-muted); font-size:12px; line-height:1.7; }
.stats-export-shortcuts { display:flex; flex-wrap:wrap; gap:8px; margin:12px 0; }
.stats-export-shortcuts button { min-height:44px; }
.stats-query-description { overflow-wrap:anywhere; color:var(--color-muted); font-size:13px; line-height:1.7; margin:12px 0; }
.cross-batch-warning { margin:8px 0; padding:10px 12px; border-radius:10px; color:#854d0e; background:#fef3c7; font-size:13px; line-height:1.6; overflow-wrap:anywhere; text-align:left; }
#historyList .cross-batch-warning { grid-column:1 / -1; margin:0; }

/* 未完成批次入口保持可见，按钮在窄屏可换行。 */
.unfinished-batches { margin:16px 20px 0; }
.unfinished-batches h2 { font-size:18px; }
.unfinished-batch { padding:14px 0; border-top:1px solid var(--color-border); }
.unfinished-batch strong { overflow-wrap:anywhere; }
.unfinished-batch .btn-row { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.unfinished-batch .btn-row .btn { flex:1 1 120px; min-height:44px; }
.unfinished-batch .unfinished-delete { color:var(--color-error, #dc2626); border-color:#fecaca; }

/* 员工常用流程优先；扫码设置、筛选和批次操作按需展开。 */
#modePick { align-items:stretch; gap:16px; padding:32px 20px 24px; }
.scan-start-heading h1 { font-size:26px; line-height:1.3; }
.scan-start-heading p { margin-top:8px; font-size:14px; line-height:1.6; color:var(--color-muted); }
.scan-start-type { display:flex; align-items:center; gap:16px; font-size:14px; color:var(--color-muted); }
.scan-start-type select { flex:1; min-width:0; min-height:44px; padding:8px 12px; background:var(--color-surface); border:1px solid var(--color-border); color:var(--color-text); }
#startScanBtn { min-height:58px; font-size:18px; }
.scan-start-alternatives,.scan-capture-actions { display:flex; gap:12px; }
.scan-start-alternatives .btn,.scan-capture-actions .btn { flex:1; padding-inline:8px; }
.scan-options summary,.camera-controls summary,.scan-photo-details summary,.scan-more-actions summary,.manual-entry summary,.batch-extra summary { min-height:44px; display:flex; align-items:center; gap:8px; cursor:pointer; font-size:14px; font-weight:600; list-style:none; }
.scan-options summary::after,.camera-controls summary::after,.scan-photo-details summary::after,.scan-more-actions summary::after,.manual-entry summary::after,.batch-extra summary::after { content:'＋'; margin-left:auto; color:var(--color-muted); }
details[open]>summary::after { content:'−'; }
.scan-options { border-top:1px solid var(--color-border); padding-top:8px; }
.scan-options label { display:block; margin-block:8px; font-size:13px; color:var(--color-muted); }
.scan-options input { width:100%; min-height:44px; padding:10px 12px; border:1px solid var(--color-border); background:var(--color-surface); color:var(--color-text); }
.scan-options>.btn { margin-top:12px; }
.camera-controls[open]>summary { margin-bottom:8px; }
.scan-capture-actions { padding:12px 16px; background:var(--color-surface); }
.scan-photo-details { padding-inline:16px; background:var(--color-surface); border-bottom:1px solid var(--color-border); }
.scan-photo-details .snapshot-bar,.scan-photo-details .snap-gallery { padding-inline:0; }
#nativeShotStatus:empty { display:none; }
.manual-entry { scroll-margin-top:64px; }
.manual-entry summary { font-size:16px; }
.scan-more-actions { margin-top:8px; }
.finish-issue { display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:12px 0; border-top:1px solid var(--color-border); }
.finish-issue .mono { flex:1 1 100%; overflow-wrap:anywhere; }
.scan-workspace { scroll-margin-top:52px; }
.finish-bar { position:sticky; top:52px; z-index:30; }
.all-batches-entry { margin-top:24px; padding:20px 0 4px; border-top:1px solid var(--color-border); }
.all-batches-entry .meta { margin-bottom:12px; }
.batch-extra { padding:4px 0; border-bottom:1px solid var(--color-border); margin-bottom:12px; }
#adminContent .batch-filter-form { grid-template-columns:repeat(2,minmax(0,1fr)); }
.batch-filter-form .file-copy-actions { grid-column:1 / -1; margin:0; }
.record-photo { flex:0 0 44px; width:44px; height:56px; padding:0; border:1px solid var(--color-border); border-radius:8px; overflow:hidden; background:#f5f5f7; color:var(--color-muted); font-size:10px; cursor:pointer; }
.record-photo img { width:100%; height:100%; display:block; object-fit:cover; }
.file-record-info .mono { font-size:15px; letter-spacing:0; }
#adminContent[data-view='batch-list'] { background:transparent; border:0; box-shadow:none; }
#adminContent[data-view='batch-list'] .file-copy-actions { margin:12px 0 0; }
#adminContent[data-view='batch-list'] .card { padding:16px; }
#finishIssues>p { font-size:14px; margin:8px 0; }
#finishIssues>.btn { margin:12px 0; }
@media(max-width:360px) { .file-record-info .mono { font-size:13px; } .record-photo { flex-basis:40px; width:40px; } .file-record .copy-btn { padding-inline:8px; } }
#historyList .list-item > .btn { grid-column:1 / -1; justify-self:start; }
#historyList .record-details { flex-wrap:wrap; }

/* 扫描界面里的系统相机拍照入口。 */
.mode-pick .btn-row { flex-wrap:wrap; }
.mode-pick .mode-card { flex:1 1 140px; }
.native-shot { display:flex; flex-direction:column; gap:8px; margin-top:12px; padding-top:12px; border-top:1px solid var(--color-border); }
.native-shot .btn-block { min-height:48px; }
.native-shot .meta { margin:0; font-size:12px; line-height:1.6; }
.camera-capability { margin:8px 0 0; font-size:12px; color:var(--color-muted); line-height:1.6; }
#nativeShotStatus { min-height:20px; margin:0; font-size:13px; font-weight:500; }
#nativeChoices { display:flex; flex-direction:column; gap:8px; }
#nativeChoices .meta { margin:0; font-size:13px; }
#nativeChoices .btn { min-height:44px; }