/* ==========================================================================
   budget-system Modern Financial SaaS Design System (CSS-First)
   遵循 DESIGN.md 规范与 Emil Kowalski 设计工程交互标准
   ========================================================================== */

/* --- 1. Design Tokens --- */
:root {
  /* Slate Neutral Scale */
  --bg-canvas: #f8fafc;
  --surface-card: #ffffff;
  --surface-subtle: #f1f5f9;
  --surface-muted: #e2e8f0;
  --surface-hover: #f8fafc;
  --border-default: #e2e8f0;
  --border-strong: #cbd5e1;
  --border-subtle: #f1f5f9;
  --text-main: #0f172a;
  --text-secondary: #334155;
  --text-muted: #64748b;
  --text-subtle: #94a3b8;

  /* Brand Primary Colors */
  --primary: #1a56db;
  --primary-hover: #1e40af;
  --primary-active: #1e3a8a;
  --primary-light: #eff6ff;
  --primary-border: #bfdbfe;
  --primary-focus-ring: rgba(26, 86, 219, 0.22);

  /* Semantic Feedback Colors */
  --success: #059669;
  --success-bg: #ecfdf5;
  --success-border: #a7f3d0;
  --success-hover: #047857;

  --warning: #d97706;
  --warning-bg: #fffbeb;
  --warning-border: #fde68a;

  --danger: #dc2626;
  --danger-bg: #fef2f2;
  --danger-border: #fecaca;
  --danger-hover: #b91c1c;

  --info: #2563eb;
  --info-bg: #eff6ff;
  --info-border: #bfdbfe;

  /* Elevation & Shadows */
  --shadow-xs: 0 1px 2px 0 rgba(15, 23, 42, 0.04);
  --shadow-sm: 0 1px 3px 0 rgba(15, 23, 42, 0.06), 0 1px 2px -1px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.07), 0 2px 4px -2px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -4px rgba(15, 23, 42, 0.03);
  --shadow-overlay: 0 20px 25px -5px rgba(15, 23, 42, 0.2), 0 8px 10px -6px rgba(15, 23, 42, 0.15);

  /* Border Radii */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-xl: 14px;
  --radius-pill: 9999px;

  /* Motion & Easings (Emil Kowalski Standards) */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 120ms;
  --duration-normal: 180ms;
  --duration-enter: 220ms;
}

/* --- 2. Global Reset & Base Typography --- */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background-color: var(--bg-canvas);
  color: var(--text-main);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* --- 3. Business Gates & Security State Rules (红线保护区，严格保留) --- */
/* Password gate: 登录前完全阻断主界面呈现 */
html.auth-pending,
html.auth-pending body {
  background: #0f172a;
}
html.auth-pending body {
  overflow: hidden;
}
html.auth-pending body > *:not(#pwdOverlay) {
  display: none !important;
  visibility: hidden !important;
}
html.auth-pending #pwdOverlay {
  display: flex !important;
}

html.auth-readonly #mainContent button:not([data-readonly-safe="true"]) {
  display: none !important;
}
html.auth-readonly #mainContent input,
html.auth-readonly #mainContent textarea {
  pointer-events: none;
  opacity: 0.72;
}

/* 即使预绘制授权门先运行，发布闸门的固定阻断态也必须保持可见 */
html.budget-gate-blocked,
html.budget-gate-blocked body {
  background: var(--bg-canvas);
}
html.budget-gate-blocked body {
  overflow: hidden;
}
html.budget-gate-blocked body > *:not([data-budget-gate="blocked"]) {
  display: none !important;
  visibility: hidden !important;
}
html.budget-gate-blocked [data-budget-gate="blocked"] {
  min-height: 100vh;
  display: flex !important;
  visibility: visible !important;
  align-items: center;
  justify-content: center;
  padding: 24px;
  white-space: pre-line;
  text-align: center;
  line-height: 1.6;
  color: var(--text-main);
}

.budget-safe-hidden {
  display: none !important;
}
.budget-safe-text {
  overflow-wrap: anywhere;
}
.tab-hidden {
  display: none !important;
}

/* --- 4. Header & App Chrome --- */
.header {
  background: linear-gradient(135deg, #1e3a8a 0%, #0f172a 100%);
  color: #ffffff;
  padding: 13px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(15, 23, 42, 0.15);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.header h1 {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  color: #ffffff;
}

.header .month-sel {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #ffffff;
  padding: 5px 12px;
  border-radius: var(--radius-md);
  font-size: 13px;
  cursor: pointer;
  outline: none;
  transition: background-color var(--duration-normal) var(--ease-out), border-color var(--duration-normal) var(--ease-out);
}
.header .month-sel:focus {
  border-color: rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.18);
}
.header .month-sel option {
  color: var(--text-main);
  background: #ffffff;
}

.auth-readonly-badge {
  margin-left: 8px;
  padding: 2px 7px;
  border-radius: var(--radius-pill);
  background: rgba(254, 215, 170, 0.16);
  color: #fed7aa;
  border: 1px solid rgba(254, 215, 170, 0.35);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.auth-scope-badge {
  margin-left: 8px;
  padding: 2px 7px;
  border-radius: var(--radius-pill);
  background: rgba(191, 219, 254, 0.14);
  color: #bfdbfe;
  border: 1px solid rgba(191, 219, 254, 0.32);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.sync-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-left: 10px;
  border-radius: var(--radius-pill);
  background: #f59e0b;
  font-size: 12px;
  vertical-align: middle;
  transition: background-color var(--duration-normal) var(--ease-out);
}

.sync-dot.is-synced {
  background: #10b981;
  box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.6);
  animation: syncPulseGreen 2.5s infinite cubic-bezier(0.66, 0, 0, 1);
}

.sync-dot.is-pending,
.sync-dot.is-syncing,
.sync-dot.is-offline-readonly,
.sync-dot.is-unknown-write {
  background: #f59e0b;
  box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.6);
  animation: syncPulseAmber 2s infinite cubic-bezier(0.66, 0, 0, 1);
}

.sync-dot.is-offline {
  background: #ef4444;
}

@keyframes syncPulseGreen {
  0% {
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.6);
  }
  70% {
    box-shadow: 0 0 0 6px rgba(16, 185, 129, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
  }
}

@keyframes syncPulseAmber {
  0% {
    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.6);
  }
  70% {
    box-shadow: 0 0 0 6px rgba(245, 158, 11, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0);
  }
}

.sync-label {
  margin-left: 6px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 12px;
  font-weight: 400;
}

.auth-session {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-width: 0;
}

.auth-current-user {
  padding: 4px 10px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius-pill);
  color: rgba(255, 255, 255, 0.95);
  font-size: 12px;
  line-height: 1.3;
  overflow-wrap: anywhere;
  text-align: right;
}

.btn.auth-logout {
  padding: 4px 12px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  flex: 0 0 auto;
  transition: background-color var(--duration-normal) var(--ease-out), border-color var(--duration-normal) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .btn.auth-logout:hover {
    background: rgba(255, 255, 255, 0.22);
    border-color: rgba(255, 255, 255, 0.4);
  }
}
.btn.auth-logout:active {
  transform: scale(0.97);
}

/* --- 5. Tabs Navigation --- */
.tabs {
  display: flex;
  background: #ffffff;
  padding: 0 24px;
  border-bottom: 1px solid var(--border-default);
  overflow-x: auto;
  gap: 4px;
}

.tab-btn {
  padding: 12px 18px;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  transition: color var(--duration-normal) var(--ease-out), border-color var(--duration-normal) var(--ease-out), background-color var(--duration-normal) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .tab-btn:hover {
    color: var(--primary);
    background-color: var(--primary-light);
  }
}
.tab-btn.active {
  color: var(--primary);
  font-weight: 600;
  border-bottom-color: var(--primary);
  background-color: transparent;
}
.tab-btn:active {
  transform: scale(0.98);
}

/* --- 6. Main Content & Layout Shell --- */
.content {
  padding: 24px;
  max-width: 1440px;
  margin: 0 auto;
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  font-size: 13px;
  color: var(--text-muted);
}
.breadcrumb a,
.breadcrumb-link {
  color: var(--primary);
  cursor: pointer;
  text-decoration: none;
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  font-weight: 500;
  transition: color var(--duration-normal) var(--ease-out);
}
.breadcrumb a:hover,
.breadcrumb-link:hover {
  color: var(--primary-hover);
  text-decoration: underline;
}
.breadcrumb .sep {
  color: var(--text-subtle);
  font-size: 12px;
}

/* --- 7. Cards & Containers --- */
.card {
  background: var(--surface-card);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-default);
  box-shadow: var(--shadow-sm);
  padding: 22px 24px;
  margin-bottom: 16px;
  transition: box-shadow var(--duration-normal) var(--ease-out);
}

.card-title {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 14px;
  color: var(--text-main);
  display: flex;
  align-items: center;
  gap: 8px;
}

.card-title-split {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* --- 8. Company & Department Grid & Cards --- */
.company-grid,
.dept-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}

.company-card,
.dept-card {
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: 22px 18px;
  cursor: pointer;
  text-align: center;
  box-shadow: var(--shadow-xs);
  font: inherit;
  transition: border-color var(--duration-normal) var(--ease-out), box-shadow var(--duration-normal) var(--ease-out), transform var(--duration-normal) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .company-card:hover,
  .dept-card:hover {
    border-color: var(--primary-border);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
  }
}
.company-card:active,
.dept-card:active {
  transform: scale(0.98);
}

.company-card .icon {
  font-size: 34px;
  margin-bottom: 8px;
  line-height: 1;
}
.company-card .name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-main);
}
.company-card .sub {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
}

.dept-card .icon {
  font-size: 28px;
  margin-bottom: 6px;
  line-height: 1;
}
.dept-card .name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-main);
}
.dept-card .sub {
  margin-top: 4px;
  color: var(--text-muted);
  font-size: 12px;
}
.dept-card .sync-flag {
  display: inline-block;
  margin-top: 6px;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 600;
  background: var(--success-bg);
  color: var(--success);
  border: 1px solid var(--success-border);
}

/* --- 8.5 Notes & Callout Banners --- */
.note {
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: var(--radius-md);
  padding: 12px 16px;
  font-size: 13px;
  line-height: 1.5;
  color: #92400e;
  margin-bottom: 20px;
  display: block;
}
.note.note-spaced {
  margin-bottom: 20px;
}
.fill-status-note {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #1e40af;
}
.fill-period-help {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 8px;
}

/* --- 9. Form Controls & Buttons --- */
.form-row {
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
  align-items: flex-start;
}
.form-group {
  flex: 1;
  min-width: 140px;
}
.form-group label {
  display: block;
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 5px;
  font-weight: 500;
}
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
}
.form-group input,
.form-group select,
.form-group textarea,
.exec-input,
.exec-expense-input,
.fill-input-amount,
.fill-input-region,
.fill-input-pricing,
.fill-input-detail,
.fill-input-currency,
.fill-input-date,
.fill-input-remark,
.settings-item .name input,
.settings-name-input,
.timeline-date-input,
.timeline-title-input,
.timeline-org-input,
.timeline-desc-input,
.treasury-password-input,
.company-filter select,
.filter-bar select,
.month-bar select {
  font-family: inherit;
  padding: 6px 10px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  font-size: 13px;
  background: #ffffff;
  color: var(--text-main);
  outline: none;
  transition: border-color var(--duration-normal) var(--ease-out), box-shadow var(--duration-normal) var(--ease-out);
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus,
.exec-input:focus,
.exec-expense-input:focus,
.fill-input-amount:focus,
.fill-input-region:focus,
.fill-input-pricing:focus,
.fill-input-detail:focus,
.fill-input-currency:focus,
.fill-input-date:focus,
.fill-input-remark:focus,
.settings-item .name input:focus,
.settings-name-input:focus,
.timeline-date-input:focus,
.timeline-title-input:focus,
.timeline-org-input:focus,
.timeline-desc-input:focus,
.treasury-password-input:focus,
.company-filter select:focus,
.filter-bar select:focus,
.month-bar select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-focus-ring);
}
.form-group .opt {
  font-size: 11px;
  color: var(--text-muted);
}

/* Button Component Hierarchy */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 16px;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  font-family: inherit;
  transition: background-color var(--duration-normal) var(--ease-out), border-color var(--duration-normal) var(--ease-out), color var(--duration-normal) var(--ease-out), box-shadow var(--duration-normal) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}
.btn:active {
  transform: scale(0.98);
}
.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--primary-focus-ring);
}

.btn-primary {
  background: var(--primary);
  color: #ffffff;
  border-color: var(--primary);
  box-shadow: var(--shadow-xs);
}
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
  }
}

.btn-danger {
  background: var(--danger);
  color: #ffffff;
  border-color: var(--danger);
}
@media (hover: hover) and (pointer: fine) {
  .btn-danger:hover {
    background: var(--danger-hover);
    border-color: var(--danger-hover);
  }
}

.btn-outline {
  background: #ffffff;
  border-color: var(--border-default);
  color: var(--text-secondary);
  box-shadow: var(--shadow-xs);
}
@media (hover: hover) and (pointer: fine) {
  .btn-outline:hover {
    border-color: var(--border-strong);
    background: var(--surface-subtle);
    color: var(--text-main);
  }
}

.btn-success {
  background: var(--success);
  color: #ffffff;
  border-color: var(--success);
}
@media (hover: hover) and (pointer: fine) {
  .btn-success:hover {
    background: var(--success-hover);
    border-color: var(--success-hover);
  }
}

.btn-sm {
  padding: 4px 10px;
  font-size: 12px;
  border-radius: var(--radius-sm);
}

/* --- 10. Financial Data Tables --- */
table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
}

th, td {
  border-bottom: 1px solid var(--border-default);
  border-right: 1px solid var(--border-subtle);
  padding: 7px 10px;
  text-align: center;
}

th {
  background: var(--surface-subtle);
  font-weight: 500;
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
  border-top: 1px solid var(--border-default);
  position: sticky;
  top: 0;
  z-index: 10;
}

th:first-child, td:first-child {
  border-left: 1px solid var(--border-default);
}

td.text-left {
  text-align: left;
}

td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

tr.row-l1 td {
  background: #eff6ff;
  font-weight: 600;
  color: #1e40af;
  border-top: 1px solid #bfdbfe;
}
tr.row-l2 td {
  background: #f8fafc;
  font-weight: 500;
  color: #334155;
}
tr.row-total td,
.fill-total-row td,
.exec-total-row td,
.treasury-grand-total td {
  background: #fef3c7;
  font-weight: 700;
  color: #78350f;
}
tr.row-section td {
  background: var(--primary);
  color: #ffffff;
  font-weight: 600;
}

tbody tr:hover:not(.row-section):not(.row-l1):not(.row-l2):not(.row-total):not(.fill-total-row):not(.exec-total-row):not(.exec-row-budget):not(.treasury-grand-total) td:not(.summary-total-col):not(.summary-total-subcol) {
  background: #f8fafc;
}

.entry-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin-top: 12px;
}
.entry-table th {
  background: var(--surface-subtle);
  padding: 8px;
  font-size: 12px;
}
.entry-table td {
  padding: 6px 8px;
  font-size: 13px;
}
.entry-table .del-btn {
  color: var(--danger);
  cursor: pointer;
  border: none;
  background: none;
  font-size: 16px;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  transition: background-color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .entry-table .del-btn:hover {
    background-color: var(--danger-bg);
  }
}
.entry-table .del-btn:active {
  transform: scale(0.94);
}

/* --- 11. KPI Stat Cards & Dashboard Metrics --- */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}
.stat-card {
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: 16px 20px;
  box-shadow: var(--shadow-xs);
}
.stat-card .label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.stat-card .value {
  font-size: 22px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  letter-spacing: -0.02em;
}
.stat-card .value.red {
  color: var(--danger);
}
.stat-card .value.green {
  color: var(--success);
}
.stat-card .value.blue {
  color: var(--primary);
}
.stat-card .value.orange {
  color: var(--warning);
}

/* --- 12. Timeline & Guide --- */
.timeline {
  position: relative;
  padding-left: 32px;
}
.timeline::before {
  content: '';
  position: absolute;
  left: 10px;
  top: 4px;
  bottom: 4px;
  width: 2px;
  background: var(--border-default);
}
.timeline-item {
  position: relative;
  padding-bottom: 24px;
}
.timeline-item::before {
  content: '';
  position: absolute;
  left: -28px;
  top: 4px;
  width: 12px;
  height: 12px;
  border-radius: var(--radius-pill);
  background: var(--primary);
  border: 3px solid #ffffff;
  box-shadow: 0 0 0 2px var(--primary-border);
}
.timeline-item .time {
  font-size: 12px;
  color: var(--primary);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.timeline-item .title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-main);
  margin: 4px 0;
}
.timeline-item .org {
  font-size: 12px;
  color: var(--text-muted);
}
.timeline-item .desc {
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: 4px;
  line-height: 1.5;
}

/* --- 13. Toast Notification --- */
.toast {
  position: fixed;
  top: 50%;
  left: 50%;
  max-width: min(480px, calc(100vw - 32px));
  width: max-content;
  overflow-wrap: anywhere;
  text-align: center;
  background: #0f172a;
  color: #ffffff;
  padding: 10px 18px;
  border-radius: var(--radius-md);
  z-index: 2000;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: opacity var(--duration-normal) var(--ease-out), transform var(--duration-normal) var(--ease-out);
  font-size: 13px;
  font-weight: 500;
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.toast.show {
  opacity: 1;
  transform: translate(-50%, -50%);
}

.app-dialog {
  margin: auto;
  width: min(440px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  padding: 24px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  background: var(--surface-card);
  color: var(--text-main);
  box-shadow: var(--shadow-overlay);
  overflow: auto;
}
.app-dialog::backdrop { background: rgba(15, 23, 42, 0.4); }
.app-dialog h2 { font-size: 18px; margin: 0 0 12px; }
.app-dialog p { line-height: 1.6; overflow-wrap: anywhere; }
.app-dialog label { display: block; margin: 16px 0 8px; }
.app-dialog input {
  width: 100%;
  min-height: 40px;
  padding: 9px 12px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  color: var(--text-main);
  font: inherit;
}
.app-dialog input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-focus-ring); }
.app-dialog-error { color: var(--danger); min-height: 22px; margin-top: 8px; }
.app-dialog-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }
.back-to-top {
  position: fixed;
  right: max(24px, env(safe-area-inset-right));
  bottom: max(24px, env(safe-area-inset-bottom));
  z-index: 100;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--border-default);
  background: var(--surface-card);
  color: var(--text-secondary);
  box-shadow: var(--shadow-md);
  font-size: 24px;
  padding: 0;
}
.back-to-top[hidden] { display: none; }
.back-to-top:hover { color: var(--primary); border-color: var(--primary); }
.back-to-top:focus-visible { outline: 3px solid var(--primary-focus-ring); outline-offset: 3px; }
html:has(.app-dialog[open]) { overflow: hidden; }

/* --- 14. Settings View & Hierarchy --- */
.settings-card {
  padding: 0;
  overflow: hidden;
}
.settings-header {
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--border-default);
  background: var(--surface-card);
}
.settings-header .card-title {
  margin-bottom: 6px;
}
.settings-header .settings-view-note {
  margin-bottom: 0;
}
.settings-body {
  display: flex;
  min-height: 560px;
  align-items: stretch;
}
.settings-sidebar {
  width: 220px;
  flex-shrink: 0;
  background: var(--surface-subtle);
  border-right: 1px solid var(--border-default);
  padding: 12px 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.settings-nav-btn {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  background: transparent;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
  white-space: nowrap;
}
.settings-nav-btn:hover {
  background: var(--surface-hover);
  color: var(--text-main);
}
.settings-nav-btn.active {
  background: var(--primary-light);
  color: var(--primary);
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--primary);
}
.settings-nav-btn:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
}
.settings-content {
  flex: 1;
  min-width: 0;
  padding: 20px 24px;
  background: var(--surface-card);
}
.settings-subpane {
  min-width: 0;
}
.settings-subpane .data-admin,
.settings-subpane .audit-panel {
  margin-top: 0;
}
@media (max-width: 768px) {
  .settings-body {
    flex-direction: column;
  }
  .settings-sidebar {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--border-default);
    flex-direction: row;
    overflow-x: auto;
    padding: 8px 12px;
    gap: 6px;
    -webkit-overflow-scrolling: touch;
  }
  .settings-nav-btn {
    width: auto;
    flex-shrink: 0;
    padding: 8px 12px;
    font-size: 12px;
  }
  .settings-nav-btn.active {
    box-shadow: inset 0 -3px 0 var(--primary);
  }
  .settings-content {
    padding: 16px 12px;
  }
}

.settings-section {
  margin-bottom: 24px;
}
.settings-section h3 {
  font-size: 14px;
  font-weight: 600;
  color: var(--primary);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--primary-light);
}
.settings-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-subtle);
}
.settings-item .name {
  flex: 1;
  font-size: 13px;
}
.settings-item .actions {
  display: flex;
  gap: 6px;
}
.cat-tree {
  margin-left: 20px;
  border-left: 2px solid var(--primary-light);
  padding-left: 12px;
}
.cat-tree .settings-item {
  border-bottom: 1px solid var(--border-subtle);
}

.empty {
  text-align: center;
  padding: 40px;
  color: var(--text-muted);
  font-size: 14px;
}

.note {
  font-size: 12px;
  color: var(--warning);
  margin-top: 8px;
  padding: 10px 14px;
  background: var(--warning-bg);
  border-radius: var(--radius-md);
  border: 1px solid var(--warning-border);
  line-height: 1.5;
}
.note.green {
  background: var(--success-bg);
  border-color: var(--success-border);
  color: var(--success);
}
.note-spaced {
  margin-bottom: 16px;
}

/* --- 15. Badges, Tags & Semantic Chips --- */
.currency-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.currency-tag.CNY {
  background: #ecfdf5;
  color: #047857;
  border: 1px solid #a7f3d0;
}
.currency-tag.IDR {
  background: #fffbeb;
  color: #b45309;
  border: 1px solid #fde68a;
}
.currency-tag.USD {
  background: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
}
.currency-tag.EUR {
  background: #faf5ff;
  color: #7e22ce;
  border: 1px solid #e9d5ff;
}
.currency-tag.GBP {
  background: #fdf2f8;
  color: #be185d;
  border: 1px solid #fbcfe8;
}
.currency-tag.JPY {
  background: #ecfeff;
  color: #0e7490;
  border: 1px solid #a5f3fc;
}

.region-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
}
.region-tag.cn {
  background: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
}
.region-tag.id {
  background: #fffbeb;
  color: #b45309;
  border: 1px solid #fde68a;
}

.company-filter {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.company-filter label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-main);
}

.sync-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 600;
  background: var(--success-bg);
  color: var(--success);
  border: 1px solid var(--success-border);
}

.exec-input {
  width: 90px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.exec-input:disabled {
  background: var(--surface-subtle);
  color: var(--text-subtle);
}

.exec-rate {
  font-weight: 600;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.exec-rate.high {
  color: var(--danger);
}
.exec-rate.normal {
  color: var(--success);
}
.exec-rate.low {
  color: var(--warning);
}
.exec-rate.none {
  color: var(--text-muted);
}

.ref-panel {
  margin-top: 16px;
  padding: 16px;
  background: #fefce8;
  border-radius: var(--radius-md);
  border: 1px solid #fef08a;
}
.ref-panel .ref-title {
  font-size: 13px;
  font-weight: 600;
  color: #854d0e;
  margin-bottom: 8px;
}
.ref-panel table {
  font-size: 12px;
}
.ref-panel th {
  background: #fef9c3 !important;
}
.ref-panel.collapsed .ref-body {
  display: none;
}
.ref-panel .ref-toggle {
  float: right;
  font-size: 12px;
  color: #854d0e;
  cursor: pointer;
  font-weight: 500;
  user-select: none;
}

.warning-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 600;
}
.warning-tag.over {
  background: var(--danger-bg);
  color: var(--danger);
  border: 1px solid var(--danger-border);
}
.warning-tag.low {
  background: var(--warning-bg);
  color: var(--warning);
  border: 1px solid var(--warning-border);
}
.warning-tag.normal {
  background: var(--success-bg);
  color: var(--success);
  border: 1px solid var(--success-border);
}

.export-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 8px;
}

.filter-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
  padding: 12px 16px;
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
}
.filter-bar label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
}

.month-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--primary-light);
  border: 1px solid var(--primary-border);
  border-radius: var(--radius-md);
  margin-bottom: 16px;
}
.month-bar label {
  font-size: 13px;
  font-weight: 600;
  color: var(--primary);
}

/* --- 16. Password & Auth Overlay (#pwdOverlay) --- */
.pwd-overlay {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  background-color: #f1f5f9;
  background-image:
    radial-gradient(ellipse 90% 60% at 50% -10%, rgba(219, 234, 254, 0.8), transparent),
    radial-gradient(circle at 10% 90%, rgba(241, 245, 249, 0.9), transparent),
    radial-gradient(circle at 90% 90%, rgba(224, 231, 255, 0.4), transparent);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.pwd-box {
  position: relative;
  background: #ffffff;
  border-radius: 16px;
  padding: 40px 36px 36px;
  text-align: center;
  box-shadow:
    0 1px 3px 0 rgba(0, 0, 0, 0.04),
    0 10px 25px -5px rgba(15, 23, 42, 0.08),
    0 20px 25px -5px rgba(15, 23, 42, 0.04),
    0 0 0 1px rgba(15, 23, 42, 0.05);
  border: 1px solid rgba(226, 232, 240, 0.9);
  max-width: 420px;
  width: 100%;
  transition: transform var(--duration-enter) var(--ease-out), opacity var(--duration-enter) var(--ease-out);
}

.pwd-box h2 {
  color: #0f172a;
  margin-bottom: 6px;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.pwd-box p,
#authPrompt {
  color: #64748b;
  font-size: 13px;
  margin-bottom: 22px;
  line-height: 1.5;
}

.auth-field-label {
  display: block;
  margin-bottom: 6px;
  color: #334155;
  font-size: 13px;
  text-align: left;
  font-weight: 600;
}

.auth-email-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  border-radius: var(--radius-md);
  padding: 2px 12px;
  transition: border-color var(--duration-normal) var(--ease-out), box-shadow var(--duration-normal) var(--ease-out), background-color var(--duration-normal) var(--ease-out);
}
.auth-email-row:focus-within {
  background: #ffffff;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-focus-ring);
}
.auth-email-row .auth-field-label {
  flex: 0 0 auto;
  margin-bottom: 0;
  color: #64748b;
  font-size: 13px;
  font-weight: 500;
}
.auth-email-row input {
  flex: 1;
  width: auto;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 8px 6px !important;
  text-align: left !important;
  font-size: 14px;
  color: #0f172a;
  min-width: 0;
  margin-bottom: 0 !important;
  outline: none;
}
.auth-email-row input::placeholder {
  color: #94a3b8;
}

.pwd-box input#authOtp {
  padding: 10px 14px;
  border: 1px solid #cbd5e1;
  border-radius: var(--radius-md);
  background: #f8fafc;
  font-size: 16px;
  letter-spacing: 0.12em;
  font-weight: 600;
  width: 100%;
  text-align: center;
  margin-bottom: 16px;
  outline: none;
  color: #0f172a;
  font-variant-numeric: tabular-nums;
  transition: border-color var(--duration-normal) var(--ease-out), box-shadow var(--duration-normal) var(--ease-out), background-color var(--duration-normal) var(--ease-out);
}

/* 总看板访问密码步骤：支持粘贴与显示/隐藏 */
.auth-password-row {
  display: flex;
  align-items: stretch;
  gap: 8px;
  margin-bottom: 16px;
}
.auth-password-row input#authBoardPassword {
  flex: 1;
  min-width: 0;
  padding: 10px 14px;
  border: 1px solid #cbd5e1;
  border-radius: var(--radius-md);
  background: #f8fafc;
  font-size: 16px;
  letter-spacing: 0.14em;
  font-weight: 600;
  outline: none;
  color: #0f172a;
  font-variant-numeric: tabular-nums;
  transition: border-color var(--duration-normal) var(--ease-out), box-shadow var(--duration-normal) var(--ease-out), background-color var(--duration-normal) var(--ease-out);
}
.auth-password-row input#authBoardPassword:focus {
  background: #ffffff;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-focus-ring);
}
.auth-password-toggle {
  flex: 0 0 auto;
  background: #ffffff;
  color: #334155;
  border: 1px solid #cbd5e1;
  border-radius: var(--radius-md);
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  box-shadow: var(--shadow-xs);
  transition: background-color var(--duration-normal) var(--ease-out), border-color var(--duration-normal) var(--ease-out), color var(--duration-normal) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .auth-password-toggle:hover {
    background: #f8fafc;
    border-color: #94a3b8;
    color: #0f172a;
  }
}
.auth-password-toggle:active {
  transform: scale(0.98);
}
.pwd-box .auth-dev-hint {
  margin: 12px 0 0;
  padding: 8px 12px;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: var(--radius-md);
  color: #92400e;
  font-size: 12px;
  text-align: left;
  line-height: 1.6;
}
.pwd-box input#authOtp:focus {
  background: #ffffff;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-focus-ring);
}

.pwd-box button[type="submit"],
#authSendOtp,
#authVerifyOtp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%);
  color: #ffffff;
  border: 1px solid #1d4ed8;
  padding: 10px 24px;
  border-radius: var(--radius-md);
  font-size: 14px;
  cursor: pointer;
  font-weight: 600;
  width: 100%;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.06), inset 0 1px 0 0 rgba(255, 255, 255, 0.2);
  transition: background var(--duration-normal) var(--ease-out), transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-normal) var(--ease-out), opacity var(--duration-normal) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .pwd-box button[type="submit"]:hover,
  #authSendOtp:hover,
  #authVerifyOtp:hover {
    background: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25), inset 0 1px 0 0 rgba(255, 255, 255, 0.25);
  }
}
.pwd-box button[type="submit"]:active,
#authSendOtp:active,
#authVerifyOtp:active {
  transform: scale(0.98);
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
}
.pwd-box button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.pwd-box .auth-secondary {
  background: #ffffff;
  color: #334155;
  border: 1px solid #cbd5e1;
  padding: 9px 18px;
  border-radius: var(--radius-md);
  margin-top: 10px;
  font-size: 13px;
  font-weight: 500;
  width: 100%;
  box-shadow: var(--shadow-xs);
  cursor: pointer;
  transition: background-color var(--duration-normal) var(--ease-out), border-color var(--duration-normal) var(--ease-out), color var(--duration-normal) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .pwd-box .auth-secondary:hover {
    background: #f8fafc;
    border-color: #94a3b8;
    color: #0f172a;
  }
}
.pwd-box .auth-secondary:active {
  transform: scale(0.98);
}

.pwd-box .auth-identity {
  font-size: 13px;
  color: #1e40af;
  margin: -4px 0 16px;
  overflow-wrap: anywhere;
  font-weight: 600;
  padding: 8px 12px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: var(--radius-md);
}

.pwd-error {
  color: var(--danger);
  font-size: 12px;
  margin-top: 10px;
  min-height: 18px;
  font-weight: 500;
  line-height: 1.4;
}
.pwd-error:not(:empty) {
  padding: 8px 12px;
  background: var(--danger-bg);
  border: 1px solid var(--danger-border);
  border-radius: var(--radius-md);
}

/* --- 17. Fill, Summary, Detail, Exec Specific Layouts --- */
.render-error-card {
  padding: 40px;
  text-align: center;
}
.render-error-title {
  color: var(--danger);
}
.render-error-detail {
  max-height: 200px;
  margin-top: 12px;
  overflow: auto;
  color: var(--text-muted);
  font-size: 12px;
  text-align: left;
  white-space: pre-wrap;
}

.fill-table-wrap {
  margin-top: 12px;
}
.fill-filter-row {
  align-items: flex-end;
  margin-bottom: 12px;
}
.fill-filter-group {
  max-width: 220px;
}
.fill-filter-note {
  padding-bottom: 8px;
  color: var(--text-muted);
  font-size: 12px;
}
.scroll-x {
  overflow-x: auto;
}

.fill-label-cell {
  vertical-align: top;
  font-size: 12px;
  text-align: left;
  white-space: nowrap;
}
.fill-detail-cell {
  vertical-align: top;
  font-size: 12px;
  text-align: left;
}
.fill-history-cell {
  vertical-align: top;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.fill-rate-cell {
  vertical-align: top;
}
.muted {
  color: var(--text-muted);
}
.fx-pending {
  color: var(--danger);
  font-size: 12px;
}
.fx-value {
  color: var(--primary);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.fill-input-amount {
  width: 110px;
  padding: 4px 6px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.fill-input-region,
.fill-input-pricing {
  min-width: 90px;
  padding: 4px 6px;
}
.fill-input-detail {
  width: 120px;
  padding: 4px 6px;
}
.fill-input-currency {
  width: 70px;
  padding: 4px 6px;
}
.fill-input-date {
  padding: 4px 6px;
}
.fill-input-remark {
  width: 120px;
  padding: 4px 6px;
}
.fill-actions {
  white-space: nowrap;
}

.fill-status-note {
  margin-bottom: 12px;
}
.fill-status-note.is-readonly {
  border-color: var(--warning-border);
  background: var(--warning-bg);
  color: var(--warning);
}
.fill-status-note.is-writable {
  border-color: var(--success-border);
  background: var(--success-bg);
  color: var(--success);
}
.fill-lock-note {
  margin-bottom: 12px;
  border-color: var(--danger-border);
  background: var(--danger-bg);
  color: var(--danger);
}

.scope-badge {
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: var(--primary-light);
  color: var(--primary);
  font-size: 11px;
  font-weight: 600;
}
.month-value {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.month-help {
  margin-left: 8px;
  color: var(--text-muted);
  font-size: 12px;
}
.fill-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.readonly-label {
  color: var(--warning);
  font-size: 12px;
  font-weight: 500;
}
.ts-fx-rates {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-left: 12px;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.fx-source {
  color: var(--text-muted);
}
.fill-empty-spaced {
  margin-top: 16px;
}
.projection-total {
  margin-top: 4px;
  color: var(--text-main);
  font-size: 13px;
  font-weight: 600;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.projection-remark {
  color: var(--text-muted);
  font-size: 12px;
  text-align: left;
}
.detail-help {
  margin-bottom: 8px;
  color: var(--text-muted);
  font-size: 12px;
}
.aggregate-badge {
  color: var(--primary);
  font-size: 11px;
  font-weight: 600;
}
.detail-remark {
  color: var(--text-muted);
  font-size: 12px;
  text-align: left;
}
.region-total,
.grand-total {
  margin-top: 4px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.region-total {
  color: var(--text-muted);
  font-size: 13px;
}
.grand-total {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-main);
}

.review-bar {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--border-default);
}
.review-panel {
  min-width: 280px;
  text-align: right;
}
.review-note {
  margin-bottom: 10px;
  color: var(--danger);
  font-size: 13px;
  font-weight: 600;
}
.review-options {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
}
.review-option {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-secondary);
}

.summary-stats {
  margin-bottom: 12px;
}
.summary-table {
  min-width: 600px;
}
.summary-project {
  min-width: 180px;
  text-align: left;
}
.summary-subproject {
  padding-left: 20px;
  text-align: left;
}
.summary-total-col {
  background: #fef3c7;
}
.summary-total-subcol {
  background: #fef9c3;
}
.positive {
  color: var(--success);
}
.negative {
  color: var(--danger);
}

.fill-period-month,
.fill-period-date {
  max-width: 160px;
}
.fill-period-enabled {
  max-width: 100px;
  padding-top: 20px;
}
.fill-period-enabled label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  margin-bottom: 0;
  padding: 6px 10px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 13px;
  background: #ffffff;
}
.fill-period-enabled input[type="checkbox"] {
  width: auto;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  cursor: pointer;
  accent-color: var(--primary);
}
.fill-period-enabled input[type="checkbox"]:focus {
  outline: 2px solid var(--primary-focus-ring);
  outline-offset: 2px;
  box-shadow: none;
}
.fill-period-action {
  max-width: 120px;
}
.fill-period-status {
  margin-top: 8px;
  color: var(--text-muted);
  font-size: 13px;
}
.fill-period-help {
  margin-top: 4px;
  color: var(--text-subtle);
  font-size: 12px;
}

.ts-fill-badge {
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  font-size: 11px;
}
.ts-fill-badge {
  margin-left: 6px;
  background: rgba(255, 255, 255, 0.2);
}

.report-filter-gap {
  margin-left: 16px;
}
.report-export-meta {
  color: var(--text-muted);
  font-size: 13px;
}
.report-export-actions,
.detail-totals {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.report-export-actions {
  gap: 8px;
}
.report-note-spaced {
  margin-bottom: 10px;
}
.summary-l3-label {
  padding-left: 40px;
  color: var(--text-muted);
  font-size: 12px;
  text-align: left;
}
.summary-l3-value {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.summary-profit-value {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.summary-net-total {
  background: var(--primary);
  color: #ffffff;
}
.detail-totals {
  margin-top: 12px;
}
.detail-region-totals {
  margin-top: 8px;
}
.detail-total-chip {
  padding: 6px 14px;
  border-radius: var(--radius-md);
  background: var(--surface-subtle);
  border: 1px solid var(--border-default);
  font-size: 13px;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

.exec-ytd-card {
  padding: 16px 20px;
}
.exec-ytd-title {
  margin-bottom: 12px;
}
.exec-ytd-grid {
  margin-bottom: 0;
}
.exec-row-budget {
  background: #eff6ff;
}
.exec-detail-filter {
  margin-bottom: 12px;
}
.exec-detail-filter-label {
  color: var(--text-main);
  font-size: 13px;
  font-weight: 600;
}
.exec-detail-text {
  font-size: 12px;
  text-align: left;
}
.exec-source-tag {
  padding: 1px 5px;
  border-radius: var(--radius-sm);
  font-size: 10px;
  font-weight: 600;
}
.exec-source-budget {
  background: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
}
.exec-source-projection {
  background: #ecfdf5;
  color: #047857;
  border: 1px solid #a7f3d0;
}
.exec-source-aggregate {
  background: #fffbeb;
  color: #b45309;
  border: 1px solid #fde68a;
}
.exec-diff-over,
.exec-count-over {
  color: var(--danger);
}
.exec-diff-under {
  color: var(--success);
}
.exec-diff-even {
  color: var(--text-subtle);
}
.exec-count-low {
  color: var(--warning);
}
.exec-expense-input {
  width: 100px;
  padding: 4px 8px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: #ffffff;
  font-size: 13px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.exec-daily-card {
  margin-top: 16px;
}
.exec-locked-note {
  margin-bottom: 12px;
  border-color: var(--danger-border);
  background: var(--danger-bg);
  color: var(--danger);
}
.exec-detail-note {
  margin-top: 12px;
}

.treasury-summary,
.treasury-warning {
  margin-bottom: 10px;
}
.treasury-summary {
  color: var(--text-muted);
  font-size: 12px;
}
.treasury-warning {
  border-color: var(--warning-border);
  background: var(--warning-bg);
  color: var(--warning);
}
.treasury-row-start {
  border-top: 2px solid var(--primary-border);
}
.treasury-cell-top {
  vertical-align: top;
}
.treasury-detail {
  vertical-align: top;
  font-size: 12px;
  text-align: left;
}
.treasury-total {
  vertical-align: top;
  color: var(--primary);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.treasury-currency {
  color: var(--text-muted);
  font-size: 11px;
}
.treasury-fx {
  color: var(--text-secondary);
  font-size: 11px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.treasury-password-panel {
  padding: 16px;
  border-radius: var(--radius-md);
  background: #fffbeb;
  border: 1px solid #fef08a;
}
.treasury-password-copy {
  margin-bottom: 8px;
  color: var(--warning);
  font-size: 13px;
}
.treasury-password-row {
  align-items: flex-end;
  gap: 8px;
  margin-bottom: 0;
}
.treasury-password-group {
  max-width: 220px;
  margin: 0;
}
.treasury-password-input {
  width: 100%;
  padding: 6px 8px;
}
.treasury-error {
  margin-top: 8px;
  color: var(--danger);
  font-size: 12px;
}
.treasury-error-card {
  color: var(--danger);
}

.guide-filter-row {
  align-items: flex-end;
  margin-bottom: 12px;
}
.guide-filter-l1 {
  max-width: 240px;
}
.guide-filter-l2 {
  max-width: 260px;
}
.guide-count {
  padding-bottom: 8px;
  color: var(--text-muted);
  font-size: 12px;
}
.guide-project-col {
  width: 40%;
}
.guide-level-1 {
  color: var(--primary);
  font-weight: 700;
  text-align: left;
}
.guide-level-2 {
  padding-left: 28px;
  color: var(--text-main);
  font-weight: 600;
  text-align: left;
}
.guide-level-3 {
  padding-left: 44px;
  color: var(--text-secondary);
  font-weight: 400;
  text-align: left;
}
.guide-note {
  color: var(--text-muted);
  text-align: left;
}
.guide-note-empty {
  color: var(--text-subtle);
}
.guide-note-text {
  white-space: pre-line;
  line-height: 1.6;
}
.guide-note-editing {
  min-width: 320px;
}
.guide-note-editor {
  width: 100%;
  min-height: 84px;
  padding: 10px 12px;
  border: 1px solid var(--primary-border);
  border-radius: var(--radius-md);
  background: var(--primary-light);
  color: #1e3a8a;
  box-sizing: border-box;
  font-size: 13px;
  line-height: 1.6;
  resize: vertical;
}
.guide-note-editor:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-focus-ring);
}
.guide-note-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.guide-note-edit-btn {
  margin-top: 6px;
}
.notes-card-spaced,
.guide-card {
  margin-top: 16px;
}
.notes-heading {
  margin: 4px 0 12px;
  color: var(--primary);
  font-weight: 600;
}
.fill-method-heading {
  margin: 20px 0 10px;
  color: var(--primary);
  font-size: 16px;
  font-weight: 700;
}
.fill-method-help {
  margin-bottom: 8px;
  color: var(--text-muted);
  font-size: 12px;
}
.fill-method-editor {
  width: 100%;
  min-height: 110px;
  padding: 12px 14px;
  border: 1px solid var(--primary-border);
  border-radius: var(--radius-md);
  background: var(--primary-light);
  color: #1e3a8a;
  box-sizing: border-box;
  font-size: 14px;
  line-height: 1.6;
  resize: vertical;
}
.fill-method-editor:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-focus-ring);
}
.fill-method-action {
  margin-top: 8px;
}
.fill-method-readonly {
  margin: 0 0 12px;
  padding: 12px 16px;
  border: 1px solid var(--primary-border);
  border-radius: var(--radius-md);
  background: var(--primary-light);
  color: #1e3a8a;
  font-size: 14px;
  line-height: 1.65;
  white-space: pre-line;
}
.notes-reminder {
  margin: 16px 0;
  white-space: pre-line;
  line-height: 1.6;
}
.guide-intro {
  margin-bottom: 12px;
}

.settings-view-note {
  margin-bottom: 16px;
}
.settings-help {
  margin-bottom: 8px;
  color: var(--text-muted);
  font-size: 12px;
}
.settings-child {
  margin-left: 24px;
}
.settings-add {
  margin-top: 8px;
}
.settings-name-input {
  width: 100%;
}
.settings-name-primary {
  font-weight: 600;
}
.settings-readonly-value {
  color: var(--text-main);
  overflow-wrap: anywhere;
}
.settings-sync-note {
  margin-left: 6px;
  color: var(--success);
  font-size: 11px;
}
.settings-data-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.timeline-fields {
  flex: 1;
}
.timeline-date-input {
  display: inline-block;
  width: 120px;
  margin-right: 8px;
}
.timeline-title-input {
  display: inline-block;
  width: 180px;
  margin-right: 8px;
}
.timeline-org-input {
  display: inline-block;
  width: 140px;
}
.timeline-desc-input {
  width: 100%;
  margin-top: 4px;
}

.fill-period-readonly-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  color: var(--text-secondary);
  font-size: 13px;
}

/* --- 18. Responsive Breakpoints --- */
@media (max-width: 640px) {
  .header {
    padding: 10px 16px;
    gap: 8px;
  }
  .header h1 {
    font-size: 15px;
    flex-wrap: wrap;
    gap: 4px 6px;
  }
  .sync-label {
    font-size: 11px;
    margin-left: 2px;
  }
  .auth-session {
    gap: 6px;
  }
  .auth-current-user {
    font-size: 11px;
    padding: 3px 8px;
    max-width: 140px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }
  .btn.auth-logout {
    padding: 3px 8px;
    font-size: 11px;
  }
  .tabs {
    padding: 0 12px;
    gap: 2px;
  }
  .tab-btn {
    padding: 10px 12px;
    font-size: 12px;
  }
  .content {
    padding: 14px 10px;
  }
  .card {
    padding: 16px 14px;
    border-radius: var(--radius-md);
  }
  .company-grid,
  .dept-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .stat-grid {
    gap: 10px;
  }
  .stat-card {
    padding: 12px 14px;
  }
  .stat-card .value {
    font-size: 18px;
  }
}

@media (max-width: 400px) {
  .stat-grid {
    grid-template-columns: 1fr;
  }
}

/* --- 19. Accessibility & Reduced Motion --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .sync-dot.is-synced,
  .sync-dot.is-pending,
  .sync-dot.is-syncing,
  .sync-dot.is-offline-readonly,
  .sync-dot.is-unknown-write {
    animation: none !important;
  }
  .company-card:hover,
  .dept-card:hover,
  .btn:active,
  .pwd-box button:active,
  .auth-logout:active,
  .tab-btn:active,
  .entry-table .del-btn:active {
    transform: none !important;
  }
}

/* 后台账号列表沿用现有表单和颜色令牌，窄屏按账号顺序展开。 */
.admin-filter-bar,.admin-membership-row,.admin-row-actions { display:flex; flex-wrap:wrap; align-items:end; gap:10px; }
.admin-filter-bar { margin:16px 0; }
.admin-field { display:flex; flex-direction:column; gap:5px; min-width:130px; color:var(--text-secondary); }
.admin-field input,.admin-field select { height:40px; min-height:40px; max-width:100%; padding:8px 10px; border:1px solid var(--border-default); border-radius:var(--radius-md); background:var(--surface-card); color:var(--text-main); font:inherit; box-sizing:border-box; }
.admin-field input:focus,.admin-field select:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-focus-ring); }
.admin-account-row { display:grid; grid-template-columns:minmax(180px,1fr) minmax(120px,0.8fr) minmax(200px,1.4fr) minmax(210px,1fr); gap:16px; padding:16px 0; border-top:1px solid var(--border-default); align-items:start; }
.admin-account-header { padding:10px 0 6px; border-top:none; color:var(--text-muted); font-size:13px; font-weight:600; letter-spacing:.02em; user-select:none; }
.admin-account-nickname { overflow-wrap:anywhere; }
.admin-account-nickname-empty { color:var(--text-subtle); }
.admin-account-row strong { overflow-wrap:anywhere; }
.admin-account-row .admin-help { margin:6px 0 0; }
.admin-help { margin:8px 0; color:var(--text-muted); font-size:13px; line-height:1.7; }
.admin-row-actions { align-items:start; }
.admin-accounts .btn { min-height:40px; }
.admin-account-editor:empty { display:none; }
.admin-edit-form { padding:16px; margin-top:16px; background:var(--surface-subtle); border-radius:var(--radius-md); }
.admin-membership-row { margin:12px 0; }
.admin-message { color:var(--text-secondary); overflow-wrap:anywhere; }
.admin-message .btn { margin-left:10px; }
.admin-pager { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; margin-top:20px; padding-top:14px; border-top:1px solid var(--border-subtle); font-variant-numeric:tabular-nums; }
.admin-pager-summary { color:var(--text-muted); font-size:13px; line-height:1.5; user-select:none; }
.admin-pager-nav { display:inline-flex; align-items:center; gap:6px; user-select:none; }
.admin-pager-btn { display:inline-flex; align-items:center; justify-content:center; min-width:32px; height:32px; padding:0 6px; border:1px solid transparent; border-radius:var(--radius-md); background:transparent; color:var(--text-secondary); font-size:14px; font-family:inherit; font-weight:400; line-height:1; cursor:pointer; transition:color var(--duration-fast) var(--ease-out),background-color var(--duration-fast) var(--ease-out),border-color var(--duration-fast) var(--ease-out); box-sizing:border-box; }
.admin-pager-btn:hover:not(:disabled):not(.is-active) { color:var(--primary); }
.admin-pager-btn:active:not(:disabled):not(.is-active) { transform:scale(0.96); }
.admin-pager-btn.is-active { background-color:var(--surface-card); color:var(--primary); border-color:var(--primary); font-weight:600; cursor:default; }
.admin-pager-btn:disabled { color:var(--text-subtle); cursor:not-allowed; opacity:0.45; }
.admin-pager-btn.admin-pager-prev, .admin-pager-btn.admin-pager-next { font-size:16px; padding:0 8px; }
.admin-pager-ellipsis { display:inline-flex; align-items:center; justify-content:center; min-width:24px; height:32px; color:var(--text-muted); font-size:14px; letter-spacing:1px; }
.admin-pager-size-select { height:32px; min-width:95px; padding:0 24px 0 10px; margin-left:8px; border:1px solid var(--border-default); border-radius:var(--radius-md); background:var(--surface-card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat right 8px center; background-size:12px; color:var(--text-secondary); font-size:13px; font-family:inherit; font-variant-numeric:tabular-nums; line-height:30px; cursor:pointer; outline:none; appearance:none; -webkit-appearance:none; box-sizing:border-box; transition:border-color var(--duration-fast) var(--ease-out),box-shadow var(--duration-fast) var(--ease-out); }
.admin-pager-size-select:hover { border-color:var(--primary); }
.admin-pager-size-select:focus { border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-focus-ring); }
@media (max-width:760px) {
  .admin-pager { flex-direction:column; align-items:center; gap:12px; }
  .admin-pager-summary { order:2; }
  .admin-pager-nav { order:1; flex-wrap:wrap; justify-content:center; }
}
@media (max-width:760px) { .admin-account-row { grid-template-columns:1fr; gap:10px; } .admin-field { flex:1 1 140px; min-width:0; } .admin-field input,.admin-field select { width:100%; box-sizing:border-box; } }
.account-email-notice:empty { display:none; }
.account-email-notice { margin:16px 24px 0; padding:12px 16px; background:var(--info-bg); color:var(--text-secondary); border:1px solid var(--info-border); border-radius:var(--radius-md); display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
@media (max-width:760px) { .account-email-notice { margin:12px 10px 0; } }
.data-admin { margin-top:24px; }
.data-admin-section { min-width:0; }
.data-admin-export { margin-bottom:0; }
.data-admin-actions { margin-top:12px; }
.data-admin-import { margin-top:36px; padding-top:28px; border-top:1px solid var(--border-default); }
.data-admin-templates { margin:12px 0 16px; }
.data-admin-form { margin:16px 0; }
.data-admin-panel { min-width:0; }
.admin-field input[type=file],.data-admin input[type=file] {
  height:40px;
  min-height:40px;
  max-width:100%;
  padding:4px 8px;
  display:inline-flex;
  align-items:center;
  box-sizing:border-box;
  cursor:pointer;
}
.admin-field input[type=file]::file-selector-button,.data-admin input[type=file]::file-selector-button {
  height:28px;
  padding:0 10px;
  margin-right:10px;
  border:1px solid var(--border-default);
  border-radius:var(--radius-sm);
  background:var(--surface-subtle);
  color:var(--text-secondary);
  font:inherit;
  font-size:13px;
  cursor:pointer;
  line-height:26px;
  box-sizing:border-box;
  transition:all var(--duration-fast) var(--ease-out);
}
.admin-field input[type=file]::file-selector-button:hover,.data-admin input[type=file]::file-selector-button:hover {
  background:var(--surface-hover);
  border-color:var(--border-strong);
  color:var(--text-main);
}
.admin-field input[type=file]::-webkit-file-upload-button,.data-admin input[type=file]::-webkit-file-upload-button {
  height:28px;
  padding:0 10px;
  margin-right:10px;
  border:1px solid var(--border-default);
  border-radius:var(--radius-sm);
  background:var(--surface-subtle);
  color:var(--text-secondary);
  font:inherit;
  font-size:13px;
  cursor:pointer;
  line-height:26px;
  box-sizing:border-box;
  transition:all var(--duration-fast) var(--ease-out);
}
.admin-field input[type=file]::-webkit-file-upload-button:hover,.data-admin input[type=file]::-webkit-file-upload-button:hover {
  background:var(--surface-hover);
  border-color:var(--border-strong);
  color:var(--text-main);
}
@media (max-width:760px) {
  .data-admin-import { margin-top:28px; padding-top:20px; }
}
.data-preview-table { width:100%; margin-top:16px; border-collapse:collapse; table-layout:fixed; }
.data-preview-table th,.audit-table th { position:sticky; top:0; z-index:10; background:rgba(248,250,252,.96); backdrop-filter:blur(8px); color:#334155; font-weight:600; }
.data-preview-table th,.audit-table th { border-bottom:2px solid var(--border-strong); }
.data-preview-table th,.data-preview-table td { padding:6px 10px; border-bottom:1px solid var(--border-default); vertical-align:top; overflow-wrap:anywhere; }
.data-preview-table th { border-bottom:2px solid var(--border-strong); }
.data-preview-table tbody tr:nth-child(even) td,.audit-table tbody tr:nth-child(even) td { background:var(--surface-subtle); }
.data-preview-table th:first-child { width:110px; }.data-preview-table th:nth-child(2) { width:60px; }
.data-preview-table details div { margin:6px 0; color:var(--text-secondary); font-size:13px; }
.data-admin input[type=file] { max-width:100%; }
@media (hover: hover) and (pointer: fine) {
  .data-preview-table tbody tr:hover td,.audit-table tbody tr:hover td { background:var(--surface-hover); }
}
@media(max-width:760px){.data-preview-table th:first-child{width:65px}.data-preview-table th:nth-child(2){width:40px}.data-preview-table th,.data-preview-table td{padding:6px 4px}}
.audit-panel { margin-top:24px; }
.audit-table { width:100%; min-width:900px; border-collapse:collapse; }
.audit-table th,.audit-table td { padding:6px 10px; border-bottom:1px solid var(--border-default); text-align:left; vertical-align:top; max-width:260px; overflow-wrap:anywhere; }
.audit-table th { font-size:13px; border-bottom:2px solid var(--border-strong); }
.audit-table td { font-size:13px; }
.admin-field input[type=number],.admin-field input[type=date],.admin-field input[type=datetime-local],.admin-field input[type=month],.financial-number,.financial-date { font-variant-numeric:tabular-nums; }
.admin-field input[type=number],.financial-number { text-align:right; }
.audit-table td:first-child { font-variant-numeric:tabular-nums; }
.audit-detail { margin-top:16px; }
.audit-detail details { padding:10px 0; border-top:1px solid var(--border-default); }
.audit-detail p { overflow-wrap:anywhere; }