:root {
  color-scheme: light;
  --bg: #F3EFE9;
  --surface: #FCFAF6;
  --surface-soft: #ECE6DD;
  --surface2: #ECE6DD;
  --surface3: #E3DCD1;
  --text: #2A2630;
  --ink: #2A2630;
  --ink2: #4E4758;
  --ink3: #8A828E;
  --muted: #8A828E;
  --line: rgba(148,132,110,.18);
  --line-strong: rgba(148,132,110,.32);
  --primary: #3D7BFF;
  --primary-strong: #2A5FE0;
  --primary-soft: #EAF2FF;
  --brand: #3D7BFF;
  --brand600: #2A5FE0;
  --brand050: #EAF2FF;
  --brand100: #D8E6FF;
  --blue: #3D7BFF;
  --blue-soft: #D8E6FF;
  --amber: #F0973A;
  --amber-soft: #FCF1E1;
  --warn: #F0973A;
  --warn050: #FCF1E1;
  --danger: #E0607A;
  --danger-soft: #FBE7EC;
  --danger050: #FBE7EC;
  --success: #27A37E;
  --ok: #27A37E;
  --ok050: #E2F5EE;
  --shadow: 11px 11px 26px rgba(160,144,122,.44), -10px -10px 24px rgba(255,255,255,.98);
  --shadow-soft: 6px 6px 14px rgba(160,144,122,.32), -6px -6px 13px rgba(255,255,255,.95);
  --sh: var(--shadow);
  --sh-s: var(--shadow-soft);
  --sh-in: inset 6px 6px 12px rgba(160,144,122,.32), inset -6px -6px 12px rgba(255,255,255,.95);
  --sh-in-s: inset 3px 3px 7px rgba(160,144,122,.26), inset -3px -3px 7px rgba(255,255,255,.9);
  --sh-brand: 6px 6px 16px rgba(42,95,224,.42), -4px -4px 10px rgba(255,255,255,.95);
  --emb: 0 1px 0 rgba(255,255,255,.85), 0 -1px 1px rgba(160,144,122,.28);
  --radius: 20px;
  --radius-sm: 12px;
  --sidebar: #FCFAF6;
  --sidebar-soft: #ECE6DD;
  --sidebar-text: #4E4758;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); }
body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  color: var(--text);
  background:
    radial-gradient(circle at 90% 4%, rgba(22, 119, 232, .10), transparent 24rem),
    var(--bg);
  font-family: "Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", sans-serif;
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; }
button, select { cursor: pointer; }
button:disabled { cursor: not-allowed; }
a { color: var(--primary); }
code {
  padding: 2px 6px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-soft);
  color: #21424a;
  font-family: Consolas, "Courier New", monospace;
  font-size: .92em;
}
.hidden { display: none !important; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 248px minmax(0, 1fr); }
.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 24px 16px 18px;
  color: var(--sidebar-text);
  background:
    radial-gradient(circle at 20% 10%, rgba(55, 151, 255, .22), transparent 13rem),
    linear-gradient(165deg, #08264b 0%, #0c3f76 55%, #08264b 100%);
  z-index: 20;
}
.brand { display: flex; align-items: center; gap: 12px; padding: 0 8px 26px; }
.brand-mark {
  width: 42px; height: 42px; display: grid; place-items: center;
  border-radius: 14px; background: linear-gradient(145deg, #3f9cff, #0b5ed7);
  color: white; font-size: 20px; font-weight: 800; box-shadow: 0 10px 28px rgba(22, 119, 232, .28);
}
.brand-logo { width: 46px; height: 46px; flex: 0 0 46px; display: block; padding: 2px; border-radius: 14px; object-fit: contain; background: #f2f8ff; box-shadow: 0 8px 20px rgba(22,119,232,.16); }
.auth-brand .brand-logo { width: 56px; height: 56px; flex-basis: 56px; border-radius: 17px; }.brand strong { display: block; font-size: 17px; letter-spacing: .06em; }
.brand span { display: block; color: #b8d1ef; font-size: 12px; margin-top: 1px; }
.nav-list { display: grid; gap: 7px; }
.nav-item {
  width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  border: 0; border-radius: 12px; color: #bcd3d5; background: transparent; text-align: left;
  transition: color .18s ease, background .18s ease, transform .18s ease;
}
.nav-item:hover { color: white; background: rgba(255,255,255,.07); transform: translateX(2px); }
.nav-item.active { color: white; background: linear-gradient(90deg, rgba(51,145,255,.30), rgba(51,145,255,.08)); box-shadow: inset 3px 0 0 #65b0ff; }
.nav-icon { width: 22px; text-align: center; font-size: 18px; opacity: .95; }
.sidebar-footer { margin-top: auto; padding: 14px 8px 2px; border-top: 1px solid rgba(255,255,255,.1); }
.connection { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: #fbbf24; box-shadow: 0 0 0 4px rgba(251,191,36,.12); }
.connection.online .status-dot { background: #34d399; box-shadow: 0 0 0 4px rgba(52,211,153,.12); }
.connection.offline .status-dot { background: #fb7185; box-shadow: 0 0 0 4px rgba(251,113,133,.12); }
.sidebar-meta { margin-top: 8px; color: #9bb8d9; font-size: 11px; }

.main { min-width: 0; }
.topbar {
  min-height: 96px; display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 22px clamp(18px, 3vw, 42px) 16px;
}
.eyebrow { margin: 0 0 2px; color: var(--primary); font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.topbar h1 { margin: 0; font-size: clamp(24px, 3vw, 32px); line-height: 1.2; letter-spacing: -.02em; }
.top-actions { display: flex; gap: 10px; align-items: center; }
.content { padding: 0 clamp(18px, 3vw, 42px) 48px; }
.view { display: none; animation: reveal .22s ease; }
.view.active { display: block; }
@keyframes reveal { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }

.panel {
  border: 1px solid rgba(203, 216, 220, .85);
  border-radius: var(--radius);
  background: rgba(255,255,255,.94);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(10px);
}
.panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 20px 22px 10px; }
.panel-heading.with-action { align-items: center; }
.panel-heading h2 { margin: 0; font-size: 17px; letter-spacing: -.01em; }
.panel-heading p { margin: 3px 0 0; color: var(--muted); font-size: 12px; }
.panel-heading > a { text-decoration: none; }

.button {
  min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 15px; border: 1px solid transparent; border-radius: 11px; font-weight: 700; white-space: nowrap;
  text-decoration: none; transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.button:hover:not(:disabled) { transform: translateY(-1px); }
.button-primary { color: white; background: linear-gradient(145deg, #187bea, #0b58b7); box-shadow: 0 8px 18px rgba(22,119,232,.22); }
.button-primary:hover:not(:disabled) { box-shadow: 0 11px 24px rgba(22,119,232,.28); }
.button-secondary { color: var(--primary-strong); border-color: #b8d6f6; background: #eef5ff; }
.button-secondary:hover:not(:disabled) { background: #ddF4f0; }
.button-ghost { color: #3e545d; border-color: var(--line); background: white; }
.button-ghost:hover:not(:disabled) { border-color: var(--line-strong); background: var(--surface-soft); }
.button:disabled { opacity: .48; }
.text-button { padding: 4px; border: 0; color: var(--primary); background: transparent; font-weight: 700; }
.text-button:hover { text-decoration: underline; }
.icon-button { width: 36px; height: 36px; border: 0; border-radius: 50%; background: #f0f4f5; color: #40545c; font-size: 24px; line-height: 1; }
.icon-button:hover { background: #e3eaec; }

.filter-panel { margin-bottom: 18px; padding: 18px 20px 20px; }
.compact-filter { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 22px; }
.filter-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.filter-heading strong, .compare-intro strong { display: block; font-size: 15px; }
.filter-heading span, .compare-intro span { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; }
.filter-grid { display: grid; grid-template-columns: repeat(4, minmax(140px, 1fr)); gap: 13px; }
.filter-grid.compact { grid-template-columns: 1fr 1fr 1fr auto; margin: 0; }
.filter-grid .wide { grid-column: span 2; }
.filter-grid label, .import-options label, .compare-controls label, .form-grid label { display: grid; gap: 6px; color: #40545c; font-size: 12px; font-weight: 700; }
.filter-grid input, .filter-grid select, .import-options input, .import-options select, .compare-controls select, .form-grid input, .form-grid select, .form-grid textarea, .small-select {
  width: 100%; min-height: 40px; padding: 9px 11px; border: 1px solid var(--line-strong); border-radius: 10px; outline: none;
  color: var(--text); background: white; transition: border .15s ease, box-shadow .15s ease;
}
.filter-grid input:focus, .filter-grid select:focus, .import-options input:focus, .import-options select:focus, .compare-controls select:focus, .form-grid input:focus, .form-grid select:focus, .form-grid textarea:focus, .small-select:focus {
  border-color: #5fa8ff; box-shadow: 0 0 0 3px rgba(22,119,232,.12);
}
.align-end { align-self: end; }

.stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 18px; }
.stat-card { position: relative; overflow: hidden; min-height: 132px; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-soft); }
.stat-card::after { content: ""; position: absolute; width: 90px; height: 90px; right: -28px; bottom: -42px; border-radius: 50%; background: currentColor; opacity: .08; }
.stat-label { display: block; color: var(--muted); font-size: 12px; font-weight: 700; }
.stat-card strong { display: block; margin: 12px 0 4px; font-size: clamp(23px, 2.5vw, 30px); line-height: 1; letter-spacing: -.03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat-card small { color: #8a989e; font-size: 11px; }
.accent-teal { color: var(--primary); }
.accent-blue { color: var(--blue); }
.accent-amber { color: var(--amber); }
.accent-slate { color: #536b75; }

.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(280px, .75fr); gap: 18px; margin-bottom: 18px; }
.chart-panel, .ranking-panel { min-height: 335px; }
.bar-chart { display: grid; gap: 16px; padding: 14px 22px 24px; }
.chart-row { display: grid; grid-template-columns: 54px minmax(0, 1fr) 96px; gap: 11px; align-items: center; }
.chart-year { color: #4b5e66; font-weight: 800; font-size: 12px; }
.chart-track { position: relative; min-height: 26px; border-radius: 8px; background: #eff4f5; overflow: hidden; }
.chart-bar { height: 26px; min-width: 3px; border-radius: 8px; background: linear-gradient(90deg, #56a8ff, #1677e8); transition: width .35s ease; }
.chart-value { text-align: right; color: var(--muted); font-size: 11px; white-space: nowrap; }
.chart-empty { padding: 36px 20px; text-align: center; color: var(--muted); }
.ranking-list { display: grid; gap: 14px; padding: 12px 22px 24px; }
.ranking-item { display: grid; grid-template-columns: 28px minmax(0,1fr) auto; gap: 10px; align-items: center; }
.rank-number { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px; color: #45616a; background: #eef3f4; font-size: 11px; font-weight: 800; }
.ranking-item:nth-child(1) .rank-number { color: #0b5ed7; background: var(--primary-soft); }
.rank-main { min-width: 0; }
.rank-main strong { display: block; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rank-main span { display: block; color: var(--muted); font-size: 11px; }
.rank-value { font-size: 12px; font-weight: 800; color: #38545d; }

.table-wrap { width: 100%; overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; }
.data-table th { padding: 12px 16px; border-bottom: 1px solid var(--line); color: #708087; background: #f8fafb; text-align: left; font-size: 11px; font-weight: 800; letter-spacing: .02em; white-space: nowrap; }
.data-table td { padding: 13px 16px; border-bottom: 1px solid #e8eef0; vertical-align: middle; }
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tbody tr:hover { background: #fbfdfd; }
.data-table .number { text-align: right; font-variant-numeric: tabular-nums; }
.actions-col { width: 120px; text-align: right !important; }
.select-col { width: 42px; text-align: center !important; }
.select-col input, .asset-select-checkbox { width: 16px; height: 16px; accent-color: var(--primary); }
.data-table tbody tr.selected { background: #eef6ff; }
.asset-mobile-title { display: flex; align-items: flex-start; gap: 8px; }
.asset-mobile-card.selected { border-color: #8fc0f4; background: #f5faff; }
.cell-primary { display: block; font-weight: 750; color: #1f343c; }
.cell-secondary { display: block; margin-top: 2px; color: var(--muted); font-size: 11px; }
.code-text { font-family: Consolas, "Courier New", monospace; font-size: 12px; color: #2f515a; }
.year-badge, .status-badge, .type-badge { display: inline-flex; align-items: center; min-height: 23px; padding: 3px 8px; border-radius: 999px; font-size: 11px; font-weight: 800; white-space: nowrap; }
.year-badge { color: #0b5ed7; background: var(--primary-soft); }
.status-badge { color: #315c48; background: #e9f4ee; }
.status-badge.status-idle { color: #835b0a; background: var(--amber-soft); }
.status-badge.status-repair { color: #9a4b12; background: #ffeadc; }
.status-badge.status-retired, .status-badge.status-disposed { color: #8b3e3b; background: var(--danger-soft); }
.type-badge { color: #3d5d9b; background: var(--blue-soft); }
.money { font-variant-numeric: tabular-nums; }
.money-negative { color: var(--danger); }
.row-actions { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.mini-button { min-height: 30px; padding: 5px 9px; border: 1px solid var(--line); border-radius: 8px; color: #40545c; background: white; font-size: 11px; font-weight: 700; }
.mini-button:hover { border-color: #9dc8f5; color: var(--primary); background: #eef6ff; }
.mini-button.danger:hover { border-color: #e3a5a2; color: var(--danger); background: #fff5f4; }

.ledger-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 6px 2px 12px; }
.ledger-toolbar strong { display: block; font-size: 15px; }
.ledger-toolbar span { display: block; color: var(--muted); font-size: 11px; }
.toolbar-actions { display: flex; gap: 8px; }
.small-select { width: auto; min-width: 128px; min-height: 40px; }
.ledger-panel { overflow: hidden; }
.pagination { display: flex; justify-content: center; align-items: center; gap: 6px; min-height: 66px; padding: 12px; border-top: 1px solid var(--line); }
.page-button { width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 9px; background: white; color: #49606a; }
.page-button.active { color: white; border-color: var(--primary); background: var(--primary); }
.page-button:disabled { opacity: .4; }
.page-info { margin: 0 8px; color: var(--muted); font-size: 12px; }
.mobile-list { display: none; }
.empty-state { padding: 46px 24px; text-align: center; color: var(--muted); }
.empty-state h3 { margin: 10px 0 4px; color: var(--text); }
.empty-state p { margin: 0; }
.empty-icon { width: 52px; height: 52px; display: grid; place-items: center; margin: 0 auto; border-radius: 16px; color: var(--primary); background: var(--primary-soft); font-size: 24px; }

.compare-selector { margin-bottom: 18px; padding: 22px; display: grid; grid-template-columns: minmax(200px, 1fr) auto; gap: 28px; align-items: end; }
.compare-controls { display: grid; grid-template-columns: 150px 30px 150px auto; gap: 10px; align-items: end; }
.compare-arrow { display: grid; place-items: center; height: 40px; color: var(--primary); font-size: 20px; }
.compare-summary-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; margin-bottom: 18px; }
.compare-summary-card { padding: 18px 20px; }
.compare-summary-card span { display: block; color: var(--muted); font-size: 12px; }
.compare-summary-card strong { display: block; margin: 8px 0 3px; font-size: 24px; }
.compare-summary-card small { color: #89979d; }
.delta-positive { color: var(--success); }
.delta-negative { color: var(--danger); }
.compare-counts { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; margin-bottom: 18px; }
.compare-count { padding: 15px 18px; border: 1px solid var(--line); border-radius: 14px; background: white; }
.compare-count span { display: block; color: var(--muted); font-size: 11px; }
.compare-count strong { display: block; margin-top: 4px; font-size: 22px; }
.compare-count.added strong { color: var(--success); }
.compare-count.removed strong { color: var(--danger); }
.compare-count.changed strong { color: var(--amber); }
.compare-tabs { display: flex; gap: 6px; padding: 8px 10px 0; border-bottom: 1px solid var(--line); overflow-x: auto; }
.tab-button { padding: 10px 14px; border: 0; border-bottom: 2px solid transparent; color: var(--muted); background: transparent; font-weight: 700; white-space: nowrap; }
.tab-button.active { color: var(--primary); border-bottom-color: var(--primary); }
.tab-content { display: none; }
.tab-content.active { display: block; }
.change-list { display: grid; gap: 12px; padding: 16px; }
.change-card { padding: 15px 16px; border: 1px solid var(--line); border-radius: 13px; background: #fcfdfd; }
.change-head { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.change-head strong { display: block; }
.change-head span { color: var(--muted); font-size: 11px; }
.change-fields { display: grid; gap: 7px; }
.change-field { display: grid; grid-template-columns: 90px 1fr 20px 1fr; gap: 8px; align-items: center; font-size: 12px; }
.change-field-name { color: var(--muted); }
.change-before { color: #7b4d4b; text-decoration: line-through; }
.change-after { color: #126e53; font-weight: 800; }
.compare-table-empty { padding: 36px 20px; text-align: center; color: var(--muted); }

.import-layout { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(280px, .65fr); gap: 18px; align-items: start; }
.import-panel { padding-bottom: 22px; }
.import-options { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 8px 22px 18px; }
.dropzone { display: grid; place-items: center; gap: 8px; margin: 0 22px; padding: 34px 22px; border: 2px dashed #bfd5d4; border-radius: 16px; color: var(--muted); background: #f8fcfb; text-align: center; transition: border .18s ease, background .18s ease, transform .18s ease; }
.dropzone:hover, .dropzone.dragover { border-color: var(--primary); background: #eef5ff; transform: translateY(-1px); }
.dropzone:focus-visible { outline: 3px solid rgba(22,119,232,.18); }
.dropzone strong { color: #28444c; }
.dropzone span { font-size: 12px; }
.drop-icon { width: 50px; height: 50px; display: grid; place-items: center; border-radius: 16px; color: var(--primary); background: var(--primary-soft); font-size: 25px; }
.file-chip { max-width: 100%; padding: 7px 11px; border-radius: 9px; color: #22515a; background: #e6f3f2; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.import-actions { display: flex; align-items: center; gap: 12px; padding: 18px 22px 0; }
.import-actions span { color: var(--muted); font-size: 12px; }
.import-result { margin: 18px 22px 0; padding: 16px; border-radius: 14px; background: #f2faf7; border: 1px solid #cce8df; }
.import-result h3 { margin: 0 0 10px; font-size: 15px; }
.import-result-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.import-result-grid div { padding: 10px; border-radius: 10px; background: white; }
.import-result-grid span { display: block; color: var(--muted); font-size: 11px; }
.import-result-grid strong { display: block; margin-top: 2px; font-size: 18px; }
.import-errors { margin: 14px 0 0; max-height: 190px; overflow: auto; padding: 12px; border-radius: 10px; color: #7d3f3c; background: var(--danger-soft); font-size: 12px; }
.import-guide { padding: 22px; }
.import-guide h2 { margin: 0 0 12px; font-size: 17px; }
.import-guide h3 { margin: 22px 0 8px; font-size: 14px; }
.import-guide ol { margin: 0; padding-left: 20px; color: #50636b; }
.import-guide li { margin-bottom: 8px; }
.import-guide p { margin: 0; color: var(--muted); font-size: 12px; }
.guide-link { display: inline-block; margin-top: 18px; font-weight: 800; text-decoration: none; }

.help-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.help-card { position: relative; overflow: hidden; padding: 25px; }
.help-card.wide-card { grid-column: 1 / -1; }
.help-card h2 { margin: 14px 0 8px; font-size: 18px; }
.help-card p { margin: 0; color: var(--muted); }
.help-number { position: absolute; top: 16px; right: 20px; color: #d6e5e5; font-size: 38px; font-weight: 900; line-height: 1; }

.modal { width: min(840px, calc(100vw - 28px)); max-height: calc(100vh - 28px); padding: 0; border: 0; border-radius: 20px; box-shadow: 0 28px 80px rgba(15, 38, 46, .28); }
.modal::backdrop { background: rgba(10, 29, 34, .48); backdrop-filter: blur(3px); }
.modal form { display: flex; flex-direction: column; max-height: calc(100vh - 28px); }
.modal-header { display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; padding: 22px 24px 16px; border-bottom: 1px solid var(--line); }
.modal-header h2 { margin: 0; }
.modal-body { overflow-y: auto; padding: 20px 24px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 15px; }
.form-grid .wide { grid-column: 1 / -1; }
.form-grid b { color: var(--danger); }
.form-grid textarea { resize: vertical; }
.modal-footer { display: flex; justify-content: flex-end; gap: 10px; padding: 15px 24px 21px; border-top: 1px solid var(--line); background: #fbfdfd; border-radius: 0 0 20px 20px; }

.toast-container { position: fixed; right: 20px; bottom: 20px; z-index: 100; display: grid; gap: 10px; width: min(360px, calc(100vw - 32px)); pointer-events: none; }
.toast { padding: 13px 15px; border: 1px solid #b9dcd5; border-radius: 12px; color: #194d45; background: #eef5ff; box-shadow: var(--shadow); animation: toast-in .22s ease; pointer-events: auto; }
.toast.error { color: #7d3734; border-color: #e3b0ad; background: #fff1f0; }
.toast.info { color: #294e77; border-color: #bfd4ef; background: #eff6ff; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.topbar { margin: 0 0 14px; border-radius: 0 0 24px 24px; color: white; background: linear-gradient(135deg, #0b4d99, #1677e8); box-shadow: 0 14px 32px rgba(22, 105, 205, .2); }
.topbar-brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.topbar-emblem { width: 52px; height: 52px; flex: 0 0 52px; padding: 2px; border-radius: 15px; background: rgba(255,255,255,.94); box-shadow: 0 8px 20px rgba(0,40,100,.16); }.topbar h1, .topbar .eyebrow { color: white; }
.topbar .eyebrow { opacity: .78; }
.topbar .button-ghost { color: white; border-color: rgba(255,255,255,.42); background: rgba(255,255,255,.13); }
.topbar .button-ghost:hover:not(:disabled) { background: rgba(255,255,255,.22); }
.topbar .button-primary { border: 1px solid rgba(255,255,255,.45); background: rgba(255,255,255,.18); box-shadow: none; }
@media (min-width: 801px) {
  .topbar { margin: 0 0 16px; padding-top: 20px; padding-bottom: 18px; border-radius: 0 0 26px 26px; color: white; background: linear-gradient(135deg, #0b4d99, #1677e8); box-shadow: 0 14px 32px rgba(22, 105, 205, .2); }
  .topbar-brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.topbar-emblem { width: 52px; height: 52px; flex: 0 0 52px; padding: 2px; border-radius: 15px; background: rgba(255,255,255,.94); box-shadow: 0 8px 20px rgba(0,40,100,.16); }.topbar h1, .topbar .eyebrow { color: white; }
  .topbar .eyebrow { opacity: .78; }
  .topbar .button-ghost { color: white; border-color: rgba(255,255,255,.42); background: rgba(255,255,255,.13); }
  .topbar .button-ghost:hover:not(:disabled) { background: rgba(255,255,255,.22); }
  .topbar .button-primary { border: 1px solid rgba(255,255,255,.45); background: rgba(255,255,255,.18); box-shadow: none; }
  .stats-grid { grid-template-columns: repeat(4, minmax(0,1fr)); gap: 0; padding: 12px; border: 1px solid var(--line); border-radius: 18px; background: white; box-shadow: var(--shadow-soft); }
  .stat-card { min-height: 118px; padding: 14px 18px; border: 0; border-right: 1px solid var(--line); border-radius: 0; box-shadow: none; background: transparent; }
  .stat-card:last-child { border-right: 0; }
  .stat-card::after { opacity: .04; }
  .data-table tbody tr { cursor: pointer; transition: background .15s ease; }
  .data-table tbody tr:hover { background: #f3f8fd; }
}

@media (max-width: 1180px) {
  .filter-grid { grid-template-columns: repeat(3, minmax(140px,1fr)); }
  .compact-filter { grid-template-columns: 1fr; gap: 12px; }
  .stats-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .dashboard-grid { grid-template-columns: 1fr; }
  .compare-selector { grid-template-columns: 1fr; gap: 18px; }
  .compare-controls { grid-template-columns: 150px 30px 150px auto; justify-content: start; }
  .import-layout { grid-template-columns: 1fr; }
}

@media (max-width: 800px) {
  body { background: var(--bg); }
  .app-shell { display: block; padding-bottom: 74px; }
  .sidebar { position: fixed; top: auto; left: 0; right: 0; bottom: 0; width: 100%; height: 70px; padding: 7px 8px calc(7px + env(safe-area-inset-bottom)); background: rgba(8, 42, 80, .98); backdrop-filter: blur(16px); }
  .brand, .sidebar-footer { display: none; }
  .nav-list { height: 100%; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 2px; }
  .nav-item { flex-direction: column; justify-content: center; gap: 2px; padding: 5px 2px; border-radius: 10px; text-align: center; font-size: 10px; }
  .nav-item:hover { transform: none; }
  .nav-item.active { box-shadow: none; background: rgba(83,164,255,.18); }
  .nav-icon { width: auto; height: 22px; font-size: 18px; line-height: 22px; }
  .topbar { min-height: 84px; padding: 17px 16px 12px; }
  .topbar .eyebrow { display: none; }
  .topbar h1 { font-size: 23px; }
  .top-actions .button-ghost { display: none; }
  .top-actions .button-primary { min-height: 38px; padding: 8px 12px; }
  .content { padding: 0 14px 24px; }
  .panel { border-radius: 15px; }
  .filter-grid, .filter-grid.compact { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
  .filter-grid .wide { grid-column: 1 / -1; }
  .filter-panel { padding: 15px; }
  .stats-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
  .stat-card { min-height: 116px; padding: 15px; border-radius: 15px; }
  .stat-card strong { font-size: 21px; }
  .dashboard-grid { gap: 12px; }
  .chart-row { grid-template-columns: 45px minmax(0,1fr) 72px; gap: 8px; }
  .data-table { display: none; }
  .mobile-list { display: grid; gap: 10px; padding: 12px; }
  .asset-mobile-card { padding: 14px; border: 1px solid var(--line); border-radius: 13px; background: #fff; }
  .asset-mobile-head { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
  .asset-mobile-head strong { display: block; }
  .asset-mobile-meta { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 10px; color: var(--muted); font-size: 11px; }
  .asset-mobile-values { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
  .asset-mobile-values span { display: block; color: var(--muted); font-size: 10px; }
  .asset-mobile-values strong { font-size: 13px; }
  .asset-mobile-actions { display: flex; gap: 8px; margin-top: 12px; }
  .asset-mobile-actions button { flex: 1; }
  .ledger-toolbar { align-items: flex-start; }
  .toolbar-actions { align-items: flex-end; }
  .compare-summary-grid { grid-template-columns: 1fr; gap: 10px; }
  .compare-counts { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 9px; }
  .compare-controls { grid-template-columns: 1fr 26px 1fr; }
  .compare-controls .button { grid-column: 1 / -1; }
  .change-field { grid-template-columns: 72px 1fr 14px 1fr; font-size: 11px; }
  .import-options { grid-template-columns: 1fr; }
  .import-result-grid { grid-template-columns: repeat(2, 1fr); }
  .import-actions { align-items: stretch; flex-direction: column; }
  .import-actions .button { width: 100%; }
  .help-grid { grid-template-columns: 1fr; gap: 12px; }
  .help-card.wide-card { grid-column: auto; }
  .form-grid { grid-template-columns: 1fr; }
  .form-grid .wide { grid-column: auto; }
  .modal { width: calc(100vw - 16px); max-height: calc(100vh - 16px); border-radius: 17px; }
  .modal form { max-height: calc(100vh - 16px); }
  .modal-header, .modal-body { padding-left: 17px; padding-right: 17px; }
  .modal-footer { padding: 13px 17px 17px; }
  .toast-container { bottom: 84px; right: 12px; }
}

@media (max-width: 520px) {
  .filter-grid, .filter-grid.compact { grid-template-columns: 1fr; }
  .filter-grid .wide { grid-column: auto; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .stat-card { min-height: 108px; padding: 13px; }
  .stat-label { font-size: 10px; }
  .stat-card strong { margin-top: 10px; font-size: 18px; }
  .stat-card small { display: none; }
  .ledger-toolbar { display: grid; }
  .toolbar-actions { width: 100%; }
  .toolbar-actions .small-select, .toolbar-actions .button { flex: 1; min-width: 0; }
  .compare-selector { padding: 17px; }
  .compare-controls { grid-template-columns: 1fr; }
  .compare-arrow { height: 20px; transform: rotate(90deg); }
  .compare-controls .button { grid-column: auto; width: 100%; }
  .change-head { display: block; }
  .change-field { grid-template-columns: 1fr; gap: 2px; padding: 8px; border-radius: 8px; background: white; }
  .change-field-name { font-weight: 800; }
  .change-before, .change-after { display: block; }
  .change-field > span:nth-child(3) { display: none; }
}

.photo-count-chip { display: inline-flex; padding: 2px 7px; border-radius: 999px; color: var(--primary-strong); background: var(--primary-soft); font-size: 10px; font-weight: 800; }
.asset-media-editor { padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: #fbfdfd; }
.asset-media-editor-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.asset-media-editor-head strong { display: block; font-size: 14px; }
.asset-media-editor-head span { display: block; margin-top: 2px; color: var(--muted); font-size: 11px; }
.photo-picker-button { position: relative; flex: 0 0 auto; }
.photo-picker-button input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.photo-edit-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 13px; }
.photo-edit-item { position: relative; min-width: 0; margin: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: white; }
.photo-edit-item.pending { border-color: #a9cdf2; box-shadow: 0 0 0 2px rgba(22,119,232,.08); }
.photo-edit-item img { width: 100%; height: 112px; display: block; object-fit: cover; background: #edf2f3; }
.photo-edit-item figcaption { padding: 7px 8px 8px; }
.photo-edit-item figcaption strong { display: block; overflow: hidden; color: #334b53; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.photo-edit-item figcaption span { display: block; margin-top: 1px; color: var(--muted); font-size: 9px; }
.photo-remove { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; padding: 0; border: 1px solid rgba(255,255,255,.8); border-radius: 50%; color: white; background: rgba(167,45,39,.86); font-size: 17px; line-height: 1; box-shadow: 0 3px 10px rgba(0,0,0,.18); }
.photo-edit-empty { grid-column: 1 / -1; padding: 22px 12px; border: 1px dashed var(--line-strong); border-radius: 11px; color: var(--muted); background: white; text-align: center; font-size: 12px; }
.asset-detail-modal { width: min(1040px, calc(100vw - 28px)); }
.asset-detail-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(300px, .95fr); gap: 18px; }
.asset-detail-photo-main { min-height: 310px; display: grid; place-items: center; overflow: hidden; border: 1px solid var(--line); border-radius: 15px; background: #eef3f4; }
.asset-detail-photo-main img { width: 100%; height: 100%; max-height: 520px; display: block; object-fit: contain; background: #eef3f4; }
.asset-detail-thumbs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 7px; margin-top: 9px; }
.asset-detail-thumb { padding: 0; overflow: hidden; border: 2px solid transparent; border-radius: 9px; background: #eef3f4; aspect-ratio: 1; }
.asset-detail-thumb.active { border-color: var(--primary); }
.asset-detail-thumb img { width: 100%; height: 100%; display: block; object-fit: cover; }
.asset-detail-info { padding: 17px; border: 1px solid var(--line); border-radius: 15px; background: #fbfdfd; }
.asset-detail-info-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.asset-detail-info-grid > div { min-width: 0; padding: 9px 10px; border-radius: 10px; background: white; }
.asset-detail-info-grid > div.wide { grid-column: 1 / -1; }
.asset-detail-info-grid span { display: block; color: var(--muted); font-size: 10px; }
.asset-detail-info-grid strong { display: block; margin-top: 2px; overflow-wrap: anywhere; color: #2d444d; font-size: 12px; }
.asset-qr-panel { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 18px; align-items: center; margin-top: 18px; padding: 20px; border: 1px solid #c9e4df; border-radius: 16px; background: linear-gradient(135deg, #f3fbf9, #ffffff); }
.asset-qr-copy h3 { margin: 3px 0 6px; font-size: 20px; }
.asset-qr-copy p:last-child { margin: 0; color: var(--muted); font-size: 12px; }
.asset-qr-output { display: grid; place-items: center; min-height: 220px; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: white; }
.asset-qr-output svg { width: min(230px, 100%); height: auto; display: block; }
.qr-error { color: var(--danger); text-align: center; }
.asset-qr-controls { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(230px, 340px) minmax(0, 1fr); gap: 12px; align-items: end; }
.asset-qr-controls label { display: grid; gap: 6px; color: #40545c; font-size: 11px; font-weight: 700; }
.asset-qr-controls select { width: 100%; min-height: 39px; padding: 8px 10px; border: 1px solid var(--line-strong); border-radius: 10px; background: white; }
.asset-qr-url { min-width: 0; display: flex; gap: 8px; align-items: center; }
.asset-qr-url code { min-width: 0; flex: 1; overflow: auto hidden; padding: 9px 10px; white-space: nowrap; }
.asset-qr-url .mini-button { flex: 0 0 auto; }
.qr-print-area { display: none; }
.qr-print-label { width: 60mm; height: 40mm; display: grid; grid-template-columns: 24mm minmax(0, 1fr); grid-template-rows: 5mm minmax(0, 1fr); gap: 1mm; padding: 3mm; border: .25mm solid #111; color: #111; background: white; font-family: "Microsoft YaHei UI", "Microsoft YaHei", sans-serif; }
.qr-print-head { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; border-bottom: .25mm solid #111; font-size: 10pt; }
.qr-print-head strong { font-size: 8pt; }
.qr-print-head span { max-width: 24mm; overflow: hidden; font-size: 5.5pt; text-overflow: ellipsis; white-space: nowrap; }
.qr-print-label img { width: 24mm; height: 24mm; object-fit: contain; }
.qr-print-text { min-width: 0; display: grid; align-content: center; gap: 1.2mm; }
.qr-print-text strong { display: block; overflow: hidden; font-size: 7pt; line-height: 1.12; }
.qr-print-text span { display: block; overflow: hidden; font-size: 5.8pt; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; }
.qr-print-label.no-qr { grid-template-columns: minmax(0, 1fr); }
.qr-print-label.no-qr img { display: none; }
.qr-print-qr-only { width: 60mm; height: 40mm; display: grid; place-items: center; margin: 0; background: white; }
.qr-print-qr-only img { width: 28mm; height: 28mm; object-fit: contain; }

@media (max-width: 800px) {
  .asset-media-editor-head { align-items: flex-start; }
  .photo-edit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .asset-detail-grid { grid-template-columns: 1fr; }
  .asset-detail-photo-main { min-height: 230px; }
  .asset-detail-info-grid { grid-template-columns: 1fr 1fr; }
  .asset-qr-panel { grid-template-columns: 1fr; padding: 15px; }
  .asset-qr-output { min-height: 190px; }
  .asset-qr-controls { grid-template-columns: 1fr; }
  .asset-qr-url { align-items: stretch; }
  .asset-qr-url code { white-space: normal; overflow-wrap: anywhere; }
  .asset-mobile-actions { flex-wrap: wrap; }
  .asset-mobile-actions button { min-width: 72px; }
}

@media print {
  body.printing-qr > .app-shell,
  body.printing-qr > .auth-screen,
  body.printing-qr > dialog,
  body.printing-qr > .toast-container { display: none !important; }
  body.printing-qr .qr-print-area { position: absolute; inset: 0; display: block !important; padding: 0; background: white; }
  body.printing-qr .qr-print-label, body.printing-qr .qr-print-qr-only { margin: 0; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}

.cluster-banner { margin: 0 clamp(18px, 3vw, 42px) 14px; padding: 12px 16px; border: 1px solid #e6c37d; border-radius: 13px; color: #744b08; background: #fff7e5; box-shadow: var(--shadow-soft); }
.cluster-banner strong { display: block; font-size: 13px; }
.cluster-banner span { display: block; margin-top: 2px; color: #8a651f; font-size: 12px; }
@media (max-width: 800px) { .cluster-banner { margin: 0 14px 12px; } }
.approval-list { display: grid; gap: 12px; padding: 16px 20px 20px; }
.approval-card { padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.approval-card.pending { border-color: #e2c17b; background: #fffdf7; }
.approval-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.approval-card h3 { margin: 5px 0 0; font-size: 15px; }
.approval-type { display: inline-block; padding: 2px 7px; border-radius: 999px; color: #255d73; background: #e8f3f8; font-size: 10px; font-weight: 800; }
.status-pending { color: #8a5a08; background: #fff1d6; }
.status-plan-scrap { color: #9a5a08; background: #fff1d6; }
.status-reached-in-use { color: #9c3d08; background: #ffe9d4; }
.status-approved { color: #13795b; background: #e8f8f1; }
.approval-meta, .approval-summary { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; color: var(--muted); font-size: 11px; }
.approval-summary { padding-top: 9px; border-top: 1px solid var(--line); }
.approval-comment { margin: 10px 0 0; padding: 8px 10px; border-radius: 9px; color: #6a4a13; background: #fff7e5; font-size: 11px; }
.approval-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 13px; }
.approval-actions .button { min-height: 34px; padding: 6px 12px; }
@media (max-width: 800px) { .approval-list { padding: 12px; } .approval-card-head { align-items: flex-start; } }
.stat-card.clickable { cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; }
.stat-card.clickable:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(23,45,54,.12); }
.quick-actions { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; margin-bottom: 18px; padding: 13px; }
.quick-action-card { min-height: 92px; display: grid; place-items: center; align-content: center; gap: 5px; border: 0; border-radius: 14px; color: #24434e; background: #f7fafb; font-weight: 800; }
.quick-action-card span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; font-size: 20px; }
.quick-add span { color: #0b5ed7; background: #e7f1ff; }
.quick-scan span { color: #1d5aa6; background: #e7f0ff; }
.quick-ledger span { color: #9a5a08; background: #fff1d6; }
.quick-approval span { color: #744b08; background: #fff7e5; }
.inventory-layout { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(300px,.85fr); gap: 16px; }
.inventory-scan-panel, .inventory-result-panel { overflow: hidden; }
.inventory-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; margin: 0 20px 14px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--line); }
.inventory-stats div { padding: 11px; text-align: center; background: white; }
.inventory-stats span { display: block; color: var(--muted); font-size: 11px; }
.inventory-stats strong { display: block; margin-top: 2px; font-size: 22px; }
.scanner-box { position: relative; min-height: 290px; display: grid; place-items: center; margin: 0 20px 14px; overflow: hidden; border-radius: 16px; background: #0d2f43; }
#inventoryVideo { width: 100%; height: 100%; min-height: 290px; display: none; object-fit: cover; }
.scanner-box.active #inventoryVideo { display: block; }
.scanner-overlay { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; color: white; text-align: center; background: rgba(5,27,40,.25); }
.scanner-box.active .scanner-overlay { pointer-events: none; background: transparent; }
.scan-corners { width: min(220px,70%); aspect-ratio: 1; border: 2px solid rgba(92,174,255,.98); border-radius: 18px; box-shadow: 0 0 0 9999px rgba(3,20,32,.18); }
.scanner-overlay p { position: absolute; left: 18px; right: 18px; bottom: 16px; margin: 0; font-size: 12px; text-shadow: 0 1px 4px #000; }
.inventory-buttons { display: flex; gap: 8px; justify-content: center; padding: 0 20px 12px; }
.manual-scan-row { display: flex; gap: 8px; padding: 0 20px 20px; }
.manual-scan-row input { flex: 1; min-height: 40px; padding: 8px 10px; border: 1px solid var(--line-strong); border-radius: 10px; }
.inventory-list { display: grid; gap: 8px; padding: 0 18px 18px; }
.inventory-item { display: flex; justify-content: space-between; gap: 10px; padding: 11px; border: 1px solid var(--line); border-radius: 11px; background: white; }
.inventory-item strong { display: block; font-size: 13px; }
.inventory-item span { display: block; margin-top: 2px; color: var(--muted); font-size: 11px; }
.inventory-item.abnormal { border-color: #e3b0ad; background: #fff7f6; }
@media (max-width: 800px) {
  .quick-actions { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; padding: 10px; }
  .quick-action-card { min-height: 78px; }
  .inventory-layout { grid-template-columns: 1fr; gap: 12px; }
  .scanner-box, #inventoryVideo { min-height: 235px; }
  .inventory-buttons { flex-wrap: wrap; }
  .inventory-buttons .button { flex: 1; min-width: 110px; }
  .manual-scan-row { flex-direction: column; }
  .manual-scan-row input, .manual-scan-row .button { width: 100%; }
}
.category-panel { margin-bottom: 18px; }
.category-chart-wrap { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 24px; align-items: center; padding: 16px 22px 24px; }
.donut-chart { position: relative; width: 220px; height: 220px; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(#e5edf5 0 100%); box-shadow: inset 0 0 0 1px rgba(22,119,232,.06); }
.donut-chart::after { content: ""; width: 128px; height: 128px; position: absolute; border-radius: 50%; background: white; box-shadow: 0 0 0 1px #e3edf7; }
.donut-center { position: relative; z-index: 1; display: grid; place-items: center; text-align: center; }
.donut-center strong { font-size: 30px; line-height: 1; color: #173b66; }
.donut-center span { margin-top: 5px; color: var(--muted); font-size: 11px; }
.category-legend { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px 18px; }
.category-legend-item { display: grid; grid-template-columns: 10px minmax(0,1fr) auto; gap: 8px; align-items: center; min-width: 0; font-size: 12px; }
.category-legend-item i { width: 10px; height: 10px; border-radius: 50%; }
.category-legend-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #405762; }
.category-legend-item strong { color: #173b66; font-size: 11px; }
@media (max-width: 800px) { .category-chart-wrap { grid-template-columns: 1fr; justify-items: center; gap: 16px; padding: 12px 16px 20px; } .donut-chart { width: 180px; height: 180px; } .donut-chart::after { width: 104px; height: 104px; } .donut-center strong { font-size: 25px; } .category-legend { width: 100%; grid-template-columns: 1fr; } }
.photo-camera-button span::before { content: "●"; margin-right: 5px; font-size: 9px; }
.photo-edit-empty[data-camera-trigger] { cursor: pointer; }
.completeness-box { margin-bottom: 14px; padding: 13px 14px; border: 1px solid #d5dee8; border-radius: 12px; background: #f7f9fc; }
.completeness-box.low { border-color: #d5dee8; background: #f7f9fc; }
.completeness-box.medium { border-color: #cfe1f6; background: #f3f8ff; }
.completeness-box.high { border-color: #cde9d8; background: #f2fbf6; }
.completeness-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; color: #596b7d; font-size: 12px; font-weight: 800; }
.completeness-head strong { color: #75869a; font-size: 22px; line-height: 1; }
.completeness-box.medium .completeness-head strong { color: #0b5ed7; }
.completeness-box.high .completeness-head strong { color: #13795b; }
.completeness-track { height: 8px; margin-top: 9px; overflow: hidden; border-radius: 99px; background: #e2e8f0; }
.completeness-track i { display: block; height: 100%; border-radius: inherit; background: #94a3b8; }
.completeness-box.medium .completeness-track i { background: linear-gradient(90deg,#56a8ff,#1677e8); }
.completeness-box.high .completeness-track i { background: linear-gradient(90deg,#43c67d,#16a34a); }
.completeness-box small { display: block; margin-top: 6px; color: var(--muted); font-size: 10px; }
.button-warning { color: #9a5a08; border-color: #e6c37d; background: #fff7e5; }
.button-warning:hover:not(:disabled) { color: #7d4907; background: #ffefd0; }
.button-danger { color: #a1332e; border-color: #e4b0ac; background: #fff1f0; }
.button-danger:hover:not(:disabled) { color: #8a2925; background: #ffe5e2; }
.detail-status-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.dual-donut-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; padding: 14px 20px 20px; }
.donut-section { min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: 15px; background: #fbfdff; }
.donut-section h3 { margin: 0 0 9px; color: #173b66; font-size: 14px; }
.donut-section .category-chart-wrap { grid-template-columns: 190px minmax(0,1fr); gap: 14px; padding: 0; }
.donut-section .donut-chart { width: 165px; height: 165px; }
.donut-section .donut-chart::after { width: 94px; height: 94px; }
.donut-section .donut-center strong { font-size: 23px; }
.donut-section .category-legend { grid-template-columns: 1fr; gap: 7px; }
@media (max-width: 800px) { .dual-donut-grid { grid-template-columns: 1fr; gap: 12px; padding: 12px; } .donut-section .category-chart-wrap { grid-template-columns: 1fr; justify-items: center; } .donut-section .donut-chart { width: 170px; height: 170px; } .donut-section .donut-chart::after { width: 98px; height: 98px; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

@media print {
  .sidebar, .top-actions, .filter-panel, .ledger-toolbar, .pagination, .row-actions { display: none !important; }
  .app-shell { display: block; }
  .content { padding: 0; }
  .panel { box-shadow: none; }
}
/* Authentication */
.auth-screen {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(circle at 15% 15%, rgba(55, 151, 255, .28), transparent 24rem),
    linear-gradient(145deg, #08264b, #0c3f76 58%, #08264b);
}
.auth-card {
  width: min(440px, 100%);
  padding: 30px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 24px;
  color: var(--text);
  background: rgba(255,255,255,.97);
  box-shadow: 0 30px 90px rgba(1, 20, 24, .34);
}
.auth-brand { display: flex; align-items: center; gap: 13px; padding-bottom: 25px; border-bottom: 1px solid var(--line); }
.auth-brand strong { display: block; font-size: 17px; }
.auth-brand span { display: block; color: var(--muted); font-size: 12px; }
.auth-panel { padding-top: 24px; }
.auth-panel h2 { margin: 2px 0 5px; font-size: 24px; }
.auth-help { margin: 0 0 20px; color: var(--muted); font-size: 12px; }
.auth-form { display: grid; gap: 14px; }
.auth-form label { display: grid; gap: 6px; color: #40545c; font-size: 12px; font-weight: 700; }
.auth-form input {
  width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--line-strong);
  border-radius: 11px; outline: none; background: white;
}
.auth-form input:focus { border-color: #5fa8ff; box-shadow: 0 0 0 3px rgba(22,119,232,.12); }
.auth-submit { width: 100%; min-height: 44px; margin-top: 3px; }
.auth-message { min-height: 20px; margin: 12px 0 0; color: var(--danger); font-size: 12px; text-align: center; }
.auth-forgot { display: block; margin: 10px auto 0; }
.code-row { display: flex; gap: 8px; align-items: center; }
.code-row input { flex: 1; min-width: 0; }
.code-row .button { flex: 0 0 auto; min-width: 112px; }
.auth-foot { margin-top: 22px; color: #87969c; font-size: 11px; text-align: center; }

/* User menu and message badge */
.current-user { position: relative; display: grid; grid-template-columns: 34px minmax(0,1fr) 28px; gap: 9px; align-items: center; margin-bottom: 12px; padding: 9px; border-radius: 12px; background: rgba(255,255,255,.07); }
.user-avatar { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; color: #0f5e57; background: #d9f7f2; font-weight: 900; }
.current-user strong { display: block; color: white; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.current-user span { display: block; color: #9ebcbe; font-size: 10px; }
.user-menu-button { width: 28px; height: 28px; border: 0; border-radius: 8px; color: #c6dbdc; background: rgba(255,255,255,.07); }
.user-popover { position: absolute; left: 18px; right: 18px; bottom: 96px; z-index: 20; padding: 7px; border-radius: 12px; background: white; box-shadow: var(--shadow); }
.user-popover button { width: 100%; padding: 9px; border: 0; border-radius: 8px; color: #344b54; background: transparent; text-align: left; }
.user-popover button:hover { background: #f1f6f6; }
.nav-badge-wrap { position: relative; }
.nav-badge { position: absolute; top: -4px; right: -7px; min-width: 16px; height: 16px; display: grid; place-items: center; padding: 0 4px; border-radius: 99px; color: white; background: #ef4444; font-size: 9px; font-style: normal; }
.list-panel { overflow: hidden; }
.message-list, .audit-list { display: grid; }
.message-card, .audit-item { padding: 17px 21px; border-bottom: 1px solid var(--line); }
.message-card:last-child, .audit-item:last-child { border-bottom: 0; }
.message-card.unread { background: #eef6ff; box-shadow: inset 3px 0 0 var(--primary); }
.message-card-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.message-card h3 { margin: 0; font-size: 15px; }
.message-card p { margin: 7px 0 0; color: #53666e; }
.message-meta { color: var(--muted); font-size: 11px; white-space: nowrap; }
.audit-item { display: grid; grid-template-columns: 140px minmax(0,1fr) 130px; gap: 14px; align-items: start; }
.audit-main strong { display: block; }
.audit-main p { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
.audit-action { display: inline-flex; padding: 3px 8px; border-radius: 999px; color: #255d73; background: #e8f3f8; font-size: 11px; font-weight: 800; }
.audit-time { color: var(--muted); font-size: 11px; text-align: right; }
.more-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
.more-card { min-height: 130px; padding: 22px; border: 1px solid var(--line); text-align: left; }
.more-card strong { display: block; font-size: 18px; }
.more-card span { display: block; margin-top: 7px; color: var(--muted); font-size: 12px; }
.small-modal { width: min(620px, calc(100vw - 28px)); }
.member-password-row { grid-column: 1 / -1; }
.history-list { display: grid; gap: 12px; }
.history-item { padding: 15px; border: 1px solid var(--line); border-radius: 13px; background: #fcfdfd; }
.history-head { display: flex; justify-content: space-between; gap: 12px; }
.history-head strong { display: block; }
.history-head span { color: var(--muted); font-size: 11px; }
.history-changes { display: grid; gap: 6px; margin-top: 10px; }
.history-change { display: grid; grid-template-columns: 90px 1fr 20px 1fr; gap: 8px; font-size: 12px; }

@media (max-width: 800px) {
  .mobile-more-nav { display: flex !important; }
  .nav-list .nav-item[data-view="messages"], .nav-list .nav-item[data-view="users"], .nav-list .nav-item[data-view="audit"], .nav-list .nav-item[data-view="import"], .nav-list .nav-item[data-view="approvals"], .nav-list .nav-item[data-view="compare"], .nav-list .nav-item[data-view="help"] { display: none; }
  .auth-card { padding: 24px 20px; border-radius: 20px; }
  .more-grid { grid-template-columns: 1fr; }
  .audit-item { grid-template-columns: 1fr; gap: 6px; }
  .audit-time { text-align: left; }
  .history-change { grid-template-columns: 70px 1fr 14px 1fr; font-size: 11px; }
}
.topbar { margin: 0 0 14px; border-radius: 0 0 24px 24px; color: white; background: linear-gradient(135deg, #0b4d99, #1677e8); box-shadow: 0 14px 32px rgba(22, 105, 205, .2); }
.topbar-brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.topbar-emblem { width: 52px; height: 52px; flex: 0 0 52px; padding: 2px; border-radius: 15px; background: rgba(255,255,255,.94); box-shadow: 0 8px 20px rgba(0,40,100,.16); }.topbar h1, .topbar .eyebrow { color: white; }
.topbar .eyebrow { opacity: .78; }
.topbar .button-ghost { color: white; border-color: rgba(255,255,255,.42); background: rgba(255,255,255,.13); }
.topbar .button-ghost:hover:not(:disabled) { background: rgba(255,255,255,.22); }
.topbar .button-primary { border: 1px solid rgba(255,255,255,.45); background: rgba(255,255,255,.18); box-shadow: none; }
@media (min-width: 801px) {
  .mobile-more-nav { display: none !important; }
}
/* Compact refined interface */
body { --radius: 16px; --radius-sm: 11px; }
.button { min-height: 36px; padding: 7px 12px; border-radius: 10px; font-size: 12px; letter-spacing: .01em; }
.icon-button { width: 32px; height: 32px; font-size: 21px; }
.text-button { font-size: 12px; }
.topbar { min-height: 76px; padding-top: 16px; padding-bottom: 14px; }
.topbar h1 { font-size: clamp(22px,2.4vw,28px); }
.top-actions { gap: 8px; }
.content { padding-bottom: 34px; }
.panel-heading { padding: 15px 18px 8px; }
.panel-heading h2 { font-size: 16px; }
.panel-heading p { font-size: 11px; }
.stats-grid { gap: 8px; margin-bottom: 12px; }
.stat-card { min-height: 104px; padding: 15px 17px; border-radius: 15px; }
.stat-card strong { margin: 9px 0 3px; }
.quick-actions { gap: 8px; margin-bottom: 12px; padding: 8px; border-radius: 16px; }
.quick-action-card { min-height: 66px; display: flex; align-items: center; justify-content: flex-start; gap: 10px; padding: 9px 12px; border: 1px solid transparent; border-radius: 12px; text-align: left; }
.quick-action-card span { width: 32px; height: 32px; flex: 0 0 32px; border-radius: 10px; font-size: 17px; }
.quick-action-card div { min-width: 0; }
.quick-action-card strong { display: block; font-size: 13px; line-height: 1.2; }
.quick-action-card small { display: block; margin-top: 3px; color: #70849a; font-size: 10px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.quick-add { border-color: #d6e9ff; background: #f2f8ff; }
.quick-scan { border-color: #cfe5ff; background: #eef5ff; }
.quick-ledger { border-color: #dce9f8; background: #f7faff; }
.quick-approval { border-color: #f1dfb4; background: #fffbef; }
.data-table th { padding: 10px 12px; }
.data-table td { padding: 10px 12px; }
.filter-panel { margin-bottom: 12px; padding: 13px 15px 15px; }
.filter-grid { gap: 9px; }
.filter-grid input, .filter-grid select, .import-options input, .import-options select, .compare-controls select, .form-grid input, .form-grid select, .form-grid textarea, .small-select { min-height: 36px; padding: 7px 9px; border-radius: 9px; }
.modal-header { padding: 17px 19px 12px; }
.modal-body { padding: 15px 19px; }
.modal-footer { padding: 11px 19px 15px; }
.form-grid { gap: 11px; }
.asset-detail-info-grid { gap: 8px; }
.asset-detail-info-grid > div { padding: 7px 9px; }
.asset-mobile-card { padding: 12px; }
.asset-mobile-values { gap: 6px; margin-top: 9px; padding-top: 8px; }
.asset-mobile-actions { margin-top: 9px; }
.approval-card { padding: 13px; }
.inventory-stats { margin-bottom: 10px; }
.scanner-box { min-height: 245px; margin-bottom: 11px; }
#inventoryVideo { min-height: 245px; }
@media (max-width: 800px) {
  .topbar { min-height: 68px; padding: 12px 14px 10px; }
  .topbar h1 { font-size: 22px; }
  .topbar-brand { gap: 9px; }
  .topbar-emblem { width: 40px; height: 40px; flex-basis: 40px; border-radius: 12px; }
  .content { padding: 0 12px 20px; }
  .quick-actions { grid-template-columns: repeat(2,minmax(0,1fr)); padding: 7px; }
  .quick-action-card { min-height: 62px; padding: 8px 9px; }
  .quick-action-card span { width: 29px; height: 29px; flex-basis: 29px; font-size: 15px; }
  .quick-action-card small { font-size: 9px; }
  .stats-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }
  .stat-card { min-height: 94px; padding: 12px; }
  .panel-heading { padding: 13px 14px 7px; }
  .filter-panel { padding: 12px; }
  .modal-header, .modal-body { padding-left: 14px; padding-right: 14px; }
  .modal-footer { padding: 10px 14px 13px; }
  .inventory-buttons .button { min-height: 36px; font-size: 12px; }
  .manual-scan-row { gap: 6px; }
}

/* Mobile compact color-block layout */
@media (max-width: 800px) {
  body { background: #eef4fb; }
  .main { background: #eef4fb; }
  .topbar { margin-bottom: 10px; border-radius: 0 0 20px 20px; }
  .top-actions .button-primary { min-height: 38px; padding: 6px 10px; font-size: 13px; }
  .content { padding: 0 10px 20px; }
  .view .panel { border: 1px solid #d6e5f6; border-radius: 15px; box-shadow: 0 6px 18px rgba(27,91,164,.06); }
  .panel-heading { margin: -1px -1px 0; padding: 11px 13px 8px; border-bottom: 1px solid #dbe9f8; border-radius: 14px 14px 0 0; background: #edf5ff; }
  .panel-heading h2 { font-size: 15px; }
  .panel-heading p { margin-top: 1px; font-size: 10px; }
  .button { min-height: 40px; padding: 6px 11px; font-size: 14px; font-weight: 800; line-height: 1.15; }
  .mini-button { min-height: 34px; padding: 5px 9px; font-size: 12px; border-radius: 9px; }
  .filter-panel { padding: 10px; background: #f0f7ff; }
  .filter-grid, .filter-grid.compact { gap: 7px; }
  .filter-grid label, .form-grid label { font-size: 11px; gap: 4px; }
  .filter-grid input, .filter-grid select, .form-grid input, .form-grid select, .form-grid textarea, .small-select { min-height: 38px; padding: 7px 9px; font-size: 13px; }
  .stats-grid { gap: 6px; padding: 6px; border: 1px solid #cfe3fa; border-radius: 15px; background: #eaf3ff; }
  .stat-card { min-height: 86px; padding: 10px 11px; border: 0; border-radius: 11px; box-shadow: none; background: #fff; }
  .stat-label { font-size: 10px; }
  .stat-card strong { margin: 7px 0 2px; font-size: 20px; }
  .stat-card small { display: none; }
  .quick-actions { gap: 6px; margin-bottom: 10px; padding: 6px; border: 1px solid #cfe3fa; border-radius: 15px; background: #eaf3ff; }
  .quick-action-card { min-height: 60px; padding: 7px 8px; border: 0; border-radius: 11px; background: #fff; box-shadow: 0 2px 8px rgba(27,91,164,.04); }
  .quick-action-card span { width: 32px; height: 32px; flex-basis: 32px; border-radius: 9px; font-size: 17px; }
  .quick-action-card strong { font-size: 15px; font-weight: 850; }
  .quick-action-card small { display: none; }
  .quick-add { background: #e7f2ff; }
  .quick-scan { background: #e3f1ff; }
  .quick-ledger { background: #eef6ff; }
  .quick-approval { background: #fff6e0; }
  .category-panel .panel-heading { background: #e1efff; }
  .category-panel { background: #f7fbff; }
  .inventory-scan-panel .panel-heading { background: #e5f1ff; }
  .inventory-result-panel .panel-heading { background: #fff4df; }
  .inventory-stats { margin: 0 10px 8px; }
  .inventory-stats div { padding: 9px 5px; }
  .inventory-stats strong { font-size: 20px; }
  .scanner-box, #inventoryVideo { min-height: 215px; }
  .inventory-list { padding: 0 10px 12px; }
  .asset-mobile-card { padding: 10px 11px; border-left: 4px solid #1677e8; border-radius: 12px; }
  .asset-mobile-head strong { font-size: 14px; }
  .asset-mobile-meta { gap: 4px 9px; margin-top: 7px; }
  .asset-mobile-values { gap: 5px; margin-top: 7px; padding-top: 7px; }
  .asset-mobile-actions { gap: 5px; margin-top: 7px; }
  .approval-list { padding: 10px; }
  .approval-card { padding: 10px; }
  .empty-state { padding: 28px 14px; }
  .nav-list { gap: 0; }
  .nav-item { padding: 4px 1px; font-size: 10px; }
  .nav-icon { height: 20px; font-size: 17px; line-height: 20px; }
  .modal { border-radius: 16px; }
  .modal-header { padding: 12px 14px 10px; }
  .modal-body { padding: 12px 14px; }
  .modal-footer { padding: 9px 14px 12px; gap: 7px; }
  .modal-footer .button { flex: 1; min-width: 0; }
}

/* Mobile stacked donut interaction */
@media (max-width: 800px) {
  .dual-donut-grid { position: relative; display: block; min-height: 410px; padding: 8px 8px 72px; overflow: visible; }
  .dual-donut-grid .donut-section { position: absolute; left: 8px; right: 8px; top: 0; min-height: 335px; margin: 0; opacity: .8; cursor: pointer; transition: top .28s ease, opacity .28s ease, transform .28s ease, box-shadow .28s ease; }
  .dual-donut-grid .donut-section.active { top: 0; z-index: 3; opacity: 1; transform: scale(1); box-shadow: 0 14px 30px rgba(27,91,164,.14); }
  .dual-donut-grid .donut-section:not(.active) { top: 72px; z-index: 1; opacity: .8; transform: scale(.98); }
  .dual-donut-grid .donut-section .category-chart-wrap { grid-template-columns: 1fr; justify-items: center; gap: 8px; }
  .dual-donut-grid .donut-section .donut-chart { width: 164px; height: 164px; }
  .dual-donut-grid .donut-section .donut-chart::after { width: 94px; height: 94px; }
  .dual-donut-grid .donut-section .category-legend { width: 100%; grid-template-columns: 1fr 1fr; gap: 5px 10px; }
  .dual-donut-grid .donut-section .category-legend-item { font-size: 10px; }
  .category-panel { margin-bottom: 8px; }
  .category-panel .panel-heading { padding-bottom: 5px; }
  #recentMobileList { padding-top: 8px; }
}

/* Hint for the lower layered donut card */
@media (max-width: 800px) {
  .dual-donut-grid .donut-section:not(.active)::after { content: "↕ 点击切换"; position: absolute; right: 16px; bottom: 12px; z-index: 5; padding: 4px 9px; border: 1px solid #bed9f5; border-radius: 999px; color: #0b5ed7; background: rgba(255,255,255,.96); box-shadow: 0 4px 12px rgba(22,119,232,.12); font-size: 10px; font-weight: 800; letter-spacing: .02em; pointer-events: none; animation: hint-float 1.8s ease-in-out infinite; }
  @keyframes hint-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
}

.donut-switch-hint { display: none; }
@media (max-width: 800px) {
  .dual-donut-grid .donut-section:not(.active)::after { content: none !important; }
  .dual-donut-grid .donut-switch-hint { display: block; position: absolute; left: 0; right: 0; bottom: 18px; width: max-content; margin: 0 auto; z-index: 20; padding: 5px 11px; border: 1px solid #b9d8f6; border-radius: 999px; color: #0b5ed7; background: rgba(255,255,255,.98); box-shadow: 0 5px 14px rgba(22,119,232,.15); font-size: 11px; font-weight: 850; letter-spacing: .02em; pointer-events: none; animation: hint-float 1.8s ease-in-out infinite; }
}

/* 2026-09-30 requested refinements */
@media (min-width: 801px) {
  .category-chart-wrap { grid-template-columns: 1fr; justify-items: center; gap: 16px; }
  .category-legend { width: 100%; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px 18px; }
  .dual-donut-grid .donut-section .category-chart-wrap { grid-template-columns: 1fr; justify-items: center; gap: 14px; }
  .dual-donut-grid .donut-section .category-legend { width: 100%; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 7px 12px; }
  .photo-camera-button { display: none !important; }
}

@media (max-width: 800px) {
  #view-dashboard.active { display: flex; flex-direction: column; }
  #view-dashboard .stats-grid { order: 1; }
  #view-dashboard .compact-filter { order: 2; }
  #view-dashboard .category-panel { order: 3; }
  #view-dashboard .quick-actions { order: 4; }
  #view-dashboard .dashboard-grid { order: 5; }
  #view-dashboard .recent-panel { order: 6; }
  .dashboard-grid .chart-panel { min-height: auto; }
  .bar-chart { gap: 8px; padding: 10px 13px 14px; }
  .chart-row { grid-template-columns: 44px minmax(0, 1fr) 78px; gap: 8px; }
  .chart-track, .chart-bar { min-height: 20px; }
  .chart-bar { height: 20px; }
  .chart-value { font-size: 10px; line-height: 1.2; }
  .dual-donut-grid { min-height: 486px; padding: 8px 8px 24px; }
  .dual-donut-grid .donut-section { height: 330px; min-height: 330px; overflow: hidden; }
  .dual-donut-grid .donut-section:not(.active) { top: 132px; }
  .dual-donut-grid .donut-section .category-legend { max-height: 98px; overflow: auto; padding-right: 2px; }
  .dual-donut-grid .donut-switch-hint { pointer-events: auto !important; cursor: pointer; bottom: 8px !important; }
}
/* 2026-09-30 asset detail action layout */
.asset-detail-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.asset-detail-actions .button {
  width: 100%;
  min-width: 0;
  min-height: 40px;
  padding: 8px 6px;
  font-size: 13px;
  font-weight: 850;
  white-space: nowrap;
}
@media (max-width: 800px) {
  .asset-detail-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-bottom: 11px; padding-bottom: 11px; }
  .asset-detail-actions .button { min-height: 42px; padding: 6px 4px; font-size: 14px; }
}
@media (max-width: 420px) {
  .asset-detail-actions .button { font-size: 13px; }
}
/* 2026-09-30 inventory task/report layout */
.inventory-task-panel { margin-bottom: 16px; padding-bottom: 16px; }
.inventory-task-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 12px; padding: 0 18px; }
.inventory-task-grid .wide { grid-column: span 2; }
.inventory-task-grid label { display: grid; gap: 5px; color: #40545c; font-size: 11px; font-weight: 800; }
.inventory-task-grid input, .inventory-task-grid select { width: 100%; min-height: 38px; padding: 7px 9px; border: 1px solid var(--line-strong); border-radius: 9px; background: white; }
.inventory-task-actions { display: flex; align-items: center; gap: 10px; padding: 12px 18px 0; }
.inventory-import-status { color: var(--muted); font-size: 11px; }
.inventory-stats { grid-template-columns: repeat(4, 1fr); }
.inventory-legend { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px; margin: 0 20px 14px; padding: 10px 12px; border: 1px solid #e2edf8; border-radius: 11px; background: #f5faff; color: #526a78; font-size: 11px; }
.inventory-legend b { color: #b45309; }
.inventory-report-actions { display: flex; gap: 8px; justify-content: center; padding: 0 20px 20px; }
.inventory-history-panel { margin-top: 16px; }
.inventory-history-list { display: grid; gap: 8px; padding: 0 18px 18px; }
.inventory-history-item { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: white; }
.inventory-history-main { min-width: 0; }
.inventory-history-main strong { display: block; font-size: 14px; }
.inventory-history-main span, .inventory-history-main small { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; }
.inventory-history-actions { display: flex; gap: 6px; flex: 0 0 auto; }
.inventory-report-modal { width: min(860px, calc(100vw - 28px)); }
.inventory-report-summary { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
.inventory-report-summary div { padding: 11px 8px; border: 1px solid var(--line); border-radius: 11px; background: #f7fbff; text-align: center; }
.inventory-report-summary span { display: block; color: var(--muted); font-size: 11px; }
.inventory-report-summary strong { display: block; margin-top: 3px; color: #173b66; font-size: 23px; }
.inventory-report-legend { margin-bottom: 14px; padding: 10px 12px; border: 1px solid #e5edf7; border-radius: 10px; color: #526a78; background: #f7fbff; font-size: 11px; line-height: 1.6; }
.inventory-report-block { margin-top: 14px; }
.inventory-report-block h3 { margin: 0 0 8px; font-size: 14px; }
.inventory-report-row { display: flex; justify-content: space-between; gap: 10px; padding: 9px 10px; border-bottom: 1px solid var(--line); }
.inventory-report-row strong { font-size: 12px; }
.inventory-report-row span { color: var(--muted); font-size: 11px; text-align: right; }
@media (max-width: 800px) {
  .inventory-task-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0 12px; }
  .inventory-task-grid .wide { grid-column: span 2; }
  .inventory-task-actions { flex-direction: column; align-items: stretch; padding: 10px 12px 0; }
  .inventory-task-actions .button { width: 100%; }
  .inventory-import-status { text-align: center; }
  .inventory-legend { grid-template-columns: 1fr; margin: 0 10px 10px; font-size: 10px; }
  .inventory-report-actions { flex-wrap: wrap; padding: 0 10px 12px; }
  .inventory-report-actions .button { flex: 1; min-width: 120px; }
  .inventory-history-list { padding: 0 10px 12px; }
  .inventory-history-item { align-items: flex-start; flex-direction: column; }
  .inventory-history-actions { width: 100%; }
  .inventory-history-actions .mini-button { flex: 1; }
  .inventory-report-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.inventory-active-task-list { display: flex; flex-wrap: wrap; gap: 7px; padding: 0 18px 10px; }
.inventory-active-task { display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; border: 1px solid #cfe3fa; border-radius: 10px; color: #2b5f91; background: #f3f8ff; font-size: 12px; font-weight: 800; }
.inventory-active-task small { color: #6b8299; font-size: 10px; font-weight: 600; }
.inventory-active-task.active { color: #fff; border-color: #1677e8; background: #1677e8; }
.inventory-active-task.active small { color: #dcecff; }
@media (max-width: 800px) {
  .inventory-active-task-list { padding: 0 12px 8px; }
  .inventory-active-task { flex: 1 1 calc(50% - 7px); justify-content: center; }
}
.inventory-scope-preview { margin: 0 18px 12px; padding: 12px 14px; border: 1px solid #9dc8f5; border-radius: 12px; color: #0b4d99; background: linear-gradient(135deg, #e8f4ff, #f8fcff); box-shadow: 0 5px 14px rgba(22,119,232,.10); text-align: center; font-size: 19px; font-weight: 900; letter-spacing: .02em; }
@media (max-width: 800px) {
  .inventory-scope-preview { margin: 0 10px 9px; padding: 10px 12px; font-size: 17px; }
}
/* 2026-09-30 approval detail */
.approval-changes, .approval-detail-grid { margin-top: 12px; padding: 11px 12px; border: 1px solid #e2edf8; border-radius: 11px; background: #f7fbff; }
.approval-changes > strong, .approval-detail-grid > strong { display: block; margin-bottom: 8px; color: #173b66; font-size: 13px; }
.approval-change-row { display: grid; grid-template-columns: 90px minmax(0,1fr) 22px minmax(0,1fr); gap: 8px; align-items: center; padding: 6px 0; border-top: 1px dashed #d9e8f7; font-size: 12px; }
.approval-change-row:first-of-type { border-top: 0; }
.approval-change-row > span { color: #60758c; font-weight: 800; }
.approval-change-row del { color: #b45309; text-decoration: line-through; overflow-wrap: anywhere; }
.approval-change-row em { color: #8aa0b5; font-style: normal; text-align: center; }
.approval-change-row ins { color: #0b67c2; font-weight: 800; text-decoration: none; overflow-wrap: anywhere; }
.approval-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 6px 12px; }
.approval-detail-grid > strong { grid-column: 1 / -1; }
.approval-detail-grid span { color: #526a78; font-size: 11px; overflow-wrap: anywhere; }
.approval-photo-note { margin-top: 10px; padding: 10px 12px; border: 1px solid #f1dfb4; border-radius: 10px; color: #744b08; background: #fff9e9; font-size: 12px; line-height: 1.6; }
@media (max-width: 800px) { .approval-change-row { grid-template-columns: 70px minmax(0,1fr) 18px minmax(0,1fr); gap: 5px; font-size: 11px; } .approval-detail-grid { grid-template-columns: 1fr; } }
.approval-request-reason { margin-top: 12px; padding: 10px 12px; border: 1px solid #c9e4df; border-radius: 10px; color: #246255; background: #f2fbf7; font-size: 12px; line-height: 1.6; }
.approval-photo-preview { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 9px; margin-top: 10px; }
.approval-photo-preview figure { margin: 0; padding: 6px; border: 1px solid #e5d6b5; border-radius: 10px; background: #fff; }
.approval-photo-preview img { width: 100%; height: 105px; display: block; border-radius: 7px; object-fit: cover; background: #eef3f4; }
.approval-photo-preview figcaption { margin-top: 5px; color: #744b08; font-size: 10px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.approval-reason-tip { margin: 0 0 12px; padding: 10px 12px; border-radius: 10px; color: #526a78; background: #f2f7fc; font-size: 12px; line-height: 1.6; }
@media (max-width: 800px) { .approval-photo-preview { grid-template-columns: repeat(2, minmax(0, 1fr)); } .approval-photo-preview img { height: 92px; } }
/* 2026-09-30 asset loan module */
.loan-heading-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.loan-stats { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 8px; padding: 12px 18px 10px; }
.loan-stats div { padding: 11px; border: 1px solid var(--line); border-radius: 11px; background: #f7fbff; text-align: center; }
.loan-stats span { display: block; color: var(--muted); font-size: 11px; }
.loan-stats strong { display: block; margin-top: 3px; color: #173b66; font-size: 22px; }
.loan-filters { display: grid; grid-template-columns: minmax(240px, 1fr) 170px; gap: 10px; padding: 0 18px 12px; }
.loan-filters input, .loan-filters select { min-height: 38px; padding: 8px 10px; border: 1px solid var(--line-strong); border-radius: 9px; background: white; }
.loan-table td:last-child { min-width: 210px; }
@media (max-width: 800px) {
  .loan-heading-actions { width: 100%; }
  .loan-heading-actions .button { flex: 1; }
  .loan-stats { grid-template-columns: repeat(2, minmax(0,1fr)); padding: 10px 12px 8px; }
  .loan-filters { grid-template-columns: 1fr; padding: 0 12px 10px; }
  .loan-table { display: none; }
  .loan-mobile-list { display: grid; }
}
#loanMobileList { display: none; }
@media (max-width: 800px) { #loanMobileList { display: grid; padding: 0 10px 10px; } }
.loan-asset-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 7px; align-items: center; }
.loan-asset-row select { min-width: 0; }
.loan-camera-modal { width: min(760px, calc(100vw - 28px)); }
.loan-camera-box { position: relative; min-height: 360px; overflow: hidden; border-radius: 14px; background: #0d2f43; }
.loan-camera-box video { width: 100%; min-height: 360px; display: block; object-fit: cover; }
.loan-camera-box p { position: absolute; left: 14px; right: 14px; bottom: 14px; margin: 0; padding: 6px 9px; border-radius: 8px; color: white; background: rgba(0,0,0,.45); text-align: center; font-size: 12px; }
@media (max-width: 800px) { .loan-camera-box, .loan-camera-box video { min-height: 260px; } }
/* 2026-09-30 loan detail + compact mobile navigation */
.loan-detail-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; }
.loan-detail-grid > div { min-width: 0; padding: 9px 10px; border: 1px solid var(--line); border-radius: 10px; background: #f8fbff; }
.loan-detail-grid > div.wide { grid-column: 1 / -1; }
.loan-detail-grid span { display: block; color: var(--muted); font-size: 10px; }
.loan-detail-grid strong { display: block; margin-top: 3px; color: #2d444d; font-size: 12px; overflow-wrap: anywhere; }
.loan-detail-photos { margin-top: 13px; }
@media (max-width: 800px) {
  .app-shell { padding-bottom: calc(62px + env(safe-area-inset-bottom)) !important; }
  .sidebar { height: 60px !important; padding: 4px 4px calc(4px + env(safe-area-inset-bottom)) !important; }
  .nav-list { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; gap: 0 !important; }
  .nav-item { min-width: 0; gap: 0 !important; padding: 3px 0 !important; border-radius: 8px !important; font-size: 9px !important; line-height: 1.05; }
  .nav-icon { height: 17px !important; font-size: 15px !important; line-height: 17px !important; }
  .loan-detail-grid { grid-template-columns: 1fr 1fr; }
  .loan-detail-grid > div.wide { grid-column: 1 / -1; }
}

/* ============================================================
   新拟态 UI 迁移层 v1（2026-10-16）
   依据《固定资产管理-新拟态设计规格-tokens.md》生成。
   保留现有业务类名和 ID，仅覆盖视觉。
   ============================================================ */
body.theme-neumorph {
  color: var(--ink);
  background: radial-gradient(1100px 620px at 8% -12%, rgba(255,255,255,.95), transparent 60%), radial-gradient(900px 560px at 108% 116%, rgba(61,123,255,.07), transparent 55%), var(--bg);
  font-family: "Noto Sans SC", "Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
body.theme-neumorph .app-shell { grid-template-columns: 248px minmax(0,1fr); background: transparent; }
body.theme-neumorph .sidebar { color: var(--ink2); background: linear-gradient(170deg,#FDFCF8,#F8F4EC); box-shadow: var(--sh); border: 0; }
body.theme-neumorph .brand strong { color: var(--ink); text-shadow: var(--emb); }
body.theme-neumorph .brand span { color: var(--ink3); }
body.theme-neumorph .brand-mark, body.theme-neumorph .brand-logo { color: #fff; background: linear-gradient(135deg,var(--brand),var(--brand600)); box-shadow: var(--sh-brand); border: 0; }
body.theme-neumorph .nav-item { color: var(--ink2); border-radius: 12px; }
body.theme-neumorph .nav-item:hover { color: var(--brand600); background: var(--surface2); box-shadow: var(--sh-in-s); transform: none; }
body.theme-neumorph .nav-item.active { color: var(--brand600); background: var(--surface2); box-shadow: var(--sh-in); font-weight: 700; position: relative; }
body.theme-neumorph .nav-item.active::before { content: ""; position: absolute; left: 0; top: 26%; bottom: 26%; width: 4px; border-radius: 2px; background: linear-gradient(180deg,var(--brand),var(--brand600)); }
body.theme-neumorph .nav-icon { color: currentColor; }
body.theme-neumorph .sidebar-footer { border-top-color: var(--line); }
body.theme-neumorph .sidebar-meta, body.theme-neumorph .connection { color: var(--ink3); }
body.theme-neumorph .main { background: transparent; }
body.theme-neumorph .topbar { color: var(--ink); background: var(--surface); border: 0; border-radius: var(--radius); box-shadow: var(--sh); margin: 18px clamp(18px,3vw,42px) 14px; padding: 16px 22px; }
body.theme-neumorph .topbar h1, body.theme-neumorph .topbar .eyebrow { color: var(--ink); text-shadow: var(--emb); }
body.theme-neumorph .topbar .eyebrow { color: var(--brand600); opacity: 1; }
body.theme-neumorph .topbar .button-ghost { color: var(--ink2); border: 0; background: var(--surface); box-shadow: var(--sh-s); }
body.theme-neumorph .topbar .button-primary { color: #fff; border: 0; background: linear-gradient(135deg,var(--brand),var(--brand600)); box-shadow: var(--sh-brand); }
body.theme-neumorph .content { padding-top: 2px; }
body.theme-neumorph .view.active { animation: none; }
body.theme-neumorph .panel { border: 0; border-radius: var(--radius); background: linear-gradient(168deg,#FEFCF7,#F7F2E9); box-shadow: var(--sh-s); backdrop-filter: none; }
body.theme-neumorph .panel-heading h2 { color: var(--ink); text-shadow: var(--emb); }
body.theme-neumorph .panel-heading p { color: var(--ink3); }
body.theme-neumorph .button-primary { color: #fff; border: 0; background: linear-gradient(135deg,var(--brand),var(--brand600)); box-shadow: var(--sh-brand); }
body.theme-neumorph .button-secondary { color: var(--brand600); border: 0; background: var(--brand050); box-shadow: var(--sh-s); }
body.theme-neumorph .button-secondary:hover:not(:disabled) { background: var(--brand100); }
body.theme-neumorph .button-ghost { color: var(--ink2); border: 0; background: var(--surface); box-shadow: var(--sh-s); }
body.theme-neumorph .button-danger { color: var(--danger); border: 0; background: var(--danger050); box-shadow: var(--sh-s); }
body.theme-neumorph .button-warning { color: var(--warn); border: 0; background: var(--warn050); box-shadow: var(--sh-s); }
body.theme-neumorph input:not([type=checkbox]):not([type=radio]), body.theme-neumorph select, body.theme-neumorph textarea { border: 0; border-radius: 12px; background: var(--surface2); box-shadow: var(--sh-in-s); color: var(--ink); }
body.theme-neumorph input:focus, body.theme-neumorph select:focus, body.theme-neumorph textarea:focus { outline: none; box-shadow: var(--sh-in), 0 0 0 2px rgba(61,123,255,.18); }
body.theme-neumorph .filter-panel { background: linear-gradient(168deg,#FEFCF7,#F7F2E9); box-shadow: var(--sh-s); }
body.theme-neumorph .stat-card { border: 0; border-radius: 14px; background: linear-gradient(165deg,#FFFDF9,#F6F1E8); box-shadow: var(--sh-s); }
body.theme-neumorph .stat-card::after { background: radial-gradient(circle, rgba(255,255,255,.9), transparent 72%); opacity: 1; }
body.theme-neumorph .stat-card strong { color: var(--ink); text-shadow: var(--emb); font-variant-numeric: tabular-nums; }
body.theme-neumorph .stat-card small, body.theme-neumorph .stat-card .stat-label { color: var(--ink3); }
body.theme-neumorph .stat-card.clickable:hover { transform: translateY(-3px); box-shadow: var(--sh); }
body.theme-neumorph .ledger-toolbar strong { color: var(--ink); text-shadow: var(--emb); }
body.theme-neumorph .ledger-toolbar span { color: var(--ink3); }
body.theme-neumorph .toolbar-actions .small-select { border: 0; background: var(--surface2); box-shadow: var(--sh-in-s); }
body.theme-neumorph .data-table th { color: var(--ink2); background: var(--surface2); border-bottom: 0; box-shadow: var(--sh-in-s); }
body.theme-neumorph .data-table td { border-bottom-color: var(--line); color: var(--ink2); }
body.theme-neumorph .data-table tbody tr:hover { background: var(--brand050); }
body.theme-neumorph .data-table tbody tr.selected { background: var(--brand050); }
body.theme-neumorph .cell-primary { color: var(--ink); }
body.theme-neumorph .cell-secondary { color: var(--ink3); }
body.theme-neumorph .mini-button { color: var(--ink2); border: 0; background: var(--surface); box-shadow: var(--sh-in-s); }
body.theme-neumorph .mini-button:hover { color: var(--brand600); background: var(--brand050); }
body.theme-neumorph .mini-button.danger { color: var(--danger); background: var(--danger050); }
body.theme-neumorph .page-button { border: 0; background: var(--surface); box-shadow: var(--sh-s); color: var(--ink2); }
body.theme-neumorph .page-button.active { color: #fff; background: linear-gradient(135deg,var(--brand),var(--brand600)); box-shadow: var(--sh-brand); }
body.theme-neumorph .asset-mobile-card { border: 0; border-radius: 18px; background: linear-gradient(168deg,#FEFCF7,#F7F2E9); box-shadow: var(--sh-s); }
body.theme-neumorph .asset-mobile-card.selected { border: 0; background: var(--brand050); box-shadow: var(--sh-in); }
body.theme-neumorph .asset-mobile-values, body.theme-neumorph .asset-mobile-meta { border-color: var(--line); }
body.theme-neumorph .status-badge, body.theme-neumorph .type-badge, body.theme-neumorph .year-badge { border: 0; box-shadow: var(--sh-in-s); }
body.theme-neumorph .modal { border: 0; border-radius: 22px; background: linear-gradient(168deg,#FEFCF7,#F6F0E6); box-shadow: var(--sh); }
body.theme-neumorph .modal-header, body.theme-neumorph .modal-footer { border-color: var(--line); background: transparent; }
body.theme-neumorph .modal-header h2 { color: var(--ink); text-shadow: var(--emb); }
body.theme-neumorph .toast { border: 0; color: var(--ink); background: var(--surface); box-shadow: var(--sh); }
body.theme-neumorph .asset-qr-panel { border: 0; background: linear-gradient(168deg,#FEFCF7,#F6F0E6); box-shadow: var(--sh-s); }
body.theme-neumorph .asset-qr-output { border: 0; background: var(--surface2); box-shadow: var(--sh-in-s); }
body.theme-neumorph .asset-detail-info, body.theme-neumorph .asset-detail-photo-main, body.theme-neumorph .asset-media-editor, body.theme-neumorph .photo-edit-item { border: 0; background: var(--surface); box-shadow: var(--sh-s); }
body.theme-neumorph .auth-screen { background: radial-gradient(1100px 620px at 8% -12%, rgba(255,255,255,.95), transparent 60%), radial-gradient(900px 560px at 108% 116%, rgba(61,123,255,.07), transparent 55%), var(--bg); }
body.theme-neumorph .auth-card { border: 0; border-radius: 24px; background: linear-gradient(168deg,#FEFCF7,#F6F0E6); box-shadow: var(--sh); }
body.theme-neumorph .auth-brand { border-bottom-color: var(--line); }
body.theme-neumorph .auth-form label { color: var(--ink2); }
body.theme-neumorph .auth-help, body.theme-neumorph .auth-foot { color: var(--ink3); }
body.theme-neumorph .auth-message { color: var(--danger); }
body.theme-neumorph .cluster-banner { border: 0; color: var(--warn); background: var(--warn050); box-shadow: var(--sh-s); }
body.theme-neumorph .approval-card, body.theme-neumorph .message-card, body.theme-neumorph .audit-item, body.theme-neumorph .inventory-item, body.theme-neumorph .inventory-history-item, body.theme-neumorph .loan-item, body.theme-neumorph .compare-count, body.theme-neumorph .change-card, body.theme-neumorph .donut-section { border: 0; background: var(--surface); box-shadow: var(--sh-s); }
body.theme-neumorph .more-card { border: 0; background: var(--surface); box-shadow: var(--sh-s); }
body.theme-neumorph .tabular, body.theme-neumorph .money, body.theme-neumorph .number { font-variant-numeric: tabular-nums; }
@media (max-width: 800px) {
  body.theme-neumorph .sidebar { color: var(--ink3); background: var(--surface); box-shadow: var(--sh); }
  body.theme-neumorph .nav-item { color: var(--ink3); }
  body.theme-neumorph .nav-item.active { color: var(--brand600); background: var(--surface2); box-shadow: var(--sh-in); }
  body.theme-neumorph .topbar { margin: 10px 10px 0; padding: 14px 16px; background: var(--surface); color: var(--ink); box-shadow: var(--sh); }
  body.theme-neumorph .topbar h1, body.theme-neumorph .topbar .eyebrow { color: var(--ink); }
  body.theme-neumorph .panel { box-shadow: var(--sh-s); }
  body.theme-neumorph .asset-mobile-card { border-left: 0; }
}
@media print {
  body.theme-neumorph { background: #fff; }
}

/* 登录页双栏布局（新拟态） */
body.theme-neumorph .auth-side { display: none; }
body.theme-neumorph .auth-main { display: block; }
@media (min-width: 901px) {
  body.theme-neumorph .auth-card { width: min(980px, 100%); display: grid; grid-template-columns: 1fr 1.02fr; gap: 0; padding: 16px; }
  body.theme-neumorph .auth-side { display: flex; flex-direction: column; justify-content: center; gap: 18px; padding: 42px 36px; border-radius: 18px; color: #fff; background: linear-gradient(135deg,var(--brand),var(--brand600)); box-shadow: var(--sh-brand); }
  body.theme-neumorph .auth-side-brand { display: flex; align-items: center; gap: 12px; }
  body.theme-neumorph .auth-side-brand .brand-logo { width: 48px; height: 48px; flex-basis: 48px; background: rgba(255,255,255,.18); box-shadow: none; }
  body.theme-neumorph .auth-side-brand strong { display: block; color: #fff; font-size: 15px; }
  body.theme-neumorph .auth-side-brand span { display: block; color: rgba(255,255,255,.78); font-size: 11px; }
  body.theme-neumorph .auth-side h2 { margin: 0; color: #fff; font-size: 25px; line-height: 1.25; text-shadow: 0 1px 0 rgba(0,0,0,.08); }
  body.theme-neumorph .auth-side p { margin: 0; color: rgba(255,255,255,.86); font-size: 12.5px; line-height: 1.7; }
  body.theme-neumorph .auth-side-features { display: flex; flex-wrap: wrap; gap: 8px; }
  body.theme-neumorph .auth-side-features span { padding: 5px 11px; border-radius: 20px; color: #fff; background: rgba(255,255,255,.16); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); font-size: 11px; }
  body.theme-neumorph .auth-main { display: flex; flex-direction: column; justify-content: center; padding: 30px 34px; }
  body.theme-neumorph .auth-main .auth-brand { display: none; }
}
/* 排版规则：短文本单行，长文本完整换行 */
body.theme-neumorph .button,
body.theme-neumorph .nav-item,
body.theme-neumorph .badge,
body.theme-neumorph .status-badge,
body.theme-neumorph .type-badge,
body.theme-neumorph .year-badge,
body.theme-neumorph .mini-button,
body.theme-neumorph .page-button,
body.theme-neumorph .small-select,
body.theme-neumorph .data-table th,
body.theme-neumorph .filter-heading span,
body.theme-neumorph .toolbar-actions .button { white-space: nowrap; }
body.theme-neumorph .cell-primary,
body.theme-neumorph .cell-secondary,
body.theme-neumorph .asset-mobile-meta span,
body.theme-neumorph .panel-heading p,
body.theme-neumorph .auth-help { white-space: normal; overflow-wrap: anywhere; }
body.theme-neumorph .stat-card strong,
body.theme-neumorph .money,
body.theme-neumorph .number { font-variant-numeric: tabular-nums; }
/* 资产台账：表格 / 卡片双视图 */
.view-switch { display: flex; gap: 4px; padding: 4px; border-radius: 12px; background: var(--surface2); box-shadow: var(--sh-in-s); }
.view-switch-button { min-height: 32px; padding: 5px 12px; border: 0; border-radius: 9px; color: var(--ink3); background: transparent; font-size: 12px; font-weight: 700; }
.view-switch-button.active { color: var(--brand600); background: var(--surface); box-shadow: var(--sh-s); }
@media (max-width: 800px) { .view-switch { display: none; } }
@media (min-width: 801px) {
  body.theme-neumorph.ledger-card-mode .ledger-panel .table-wrap { display: none; }
  body.theme-neumorph.ledger-card-mode #ledgerMobileList { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; padding: 16px; }
  body.theme-neumorph.ledger-card-mode #ledgerMobileList .asset-mobile-card { min-width: 0; }
}
/* 手机端底部弹层：资产历史、外借详情、审批/照片等通用弹窗 */
@media (max-width: 800px) {
  body.theme-neumorph dialog.modal {
    width: 100%;
    max-width: 100%;
    max-height: 92dvh;
    margin: auto 0 0;
    padding: 0;
    border-radius: 22px 22px 0 0;
    background: linear-gradient(168deg,#FEFCF7,#F6F0E6);
    box-shadow: 0 -12px 34px rgba(120,104,82,.28);
    overflow: hidden;
  }
  body.theme-neumorph dialog.modal::backdrop {
    background: rgba(58,48,36,.34);
    backdrop-filter: blur(3px);
  }
  body.theme-neumorph dialog.modal .modal-header {
    position: sticky;
    top: 0;
    z-index: 3;
    padding: 16px 18px 12px;
    border-bottom: 1px solid var(--line);
    background: var(--surface);
    border-radius: 22px 22px 0 0;
  }
  body.theme-neumorph dialog.modal .modal-body {
    overflow: auto;
    padding: 14px 16px 16px;
    -webkit-overflow-scrolling: touch;
  }
  body.theme-neumorph dialog.modal .modal-footer {
    position: sticky;
    bottom: 0;
    z-index: 3;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--line);
    background: var(--surface);
    border-radius: 0;
  }
  body.theme-neumorph dialog.modal .modal-footer .button {
    flex: 1;
    min-height: 42px;
  }
  body.theme-neumorph .history-list { gap: 10px; }
  body.theme-neumorph .history-item { padding: 13px; }
  body.theme-neumorph .history-head { align-items: flex-start; }
  body.theme-neumorph .history-change { grid-template-columns: 72px minmax(0,1fr) 16px minmax(0,1fr); gap: 5px; font-size: 11.5px; }
  body.theme-neumorph .loan-detail-grid { grid-template-columns: 1fr 1fr; }
  body.theme-neumorph .loan-detail-grid > div.wide { grid-column: 1 / -1; }
  body.theme-neumorph .approval-card { padding: 14px; }
  body.theme-neumorph .approval-card-head { flex-direction: column; gap: 7px; }
  body.theme-neumorph .approval-actions { position: sticky; bottom: 0; padding-top: 10px; background: linear-gradient(180deg,transparent,var(--surface) 28%); }
}
/* 照片上传失败状态 */
.photo-edit-item.failed { border-color: var(--danger); background: var(--danger050); }
.photo-edit-item.failed img { opacity: .65; }
.photo-edit-item.failed figcaption span { color: var(--danger); white-space: normal; overflow-wrap: anywhere; }
.photo-retry { position: absolute; left: 8px; bottom: 34px; min-height: 28px; padding: 4px 10px; border: 0; border-radius: 8px; color: #fff; background: var(--danger); box-shadow: var(--sh-s); font-size: 11px; font-weight: 700; }
/* 总览快捷入口：新增“扫一扫” */
@media (min-width: 801px) {
  body.theme-neumorph .quick-actions { grid-template-columns: repeat(5, minmax(0,1fr)); }
}
@media (max-width: 800px) {
  body.theme-neumorph .quick-actions { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
body.theme-neumorph .quick-asset-scan span { color: #0b6b5b; background: #e3f7f1; box-shadow: 0 4px 10px rgba(39,163,126,.12); }
body.theme-neumorph .quick-asset-scan { border-color: #cdebe0; background: #f3fbf8; }
/* 左下角用户区和连接状态：提高对比度 */
body.theme-neumorph .current-user { background: var(--surface2); box-shadow: var(--sh-in-s); }
body.theme-neumorph .current-user strong { color: var(--ink); font-size: 12.5px; }
body.theme-neumorph .current-user span { color: var(--ink2); font-size: 11px; font-weight: 600; }
body.theme-neumorph .user-menu-button { color: var(--ink2); background: var(--surface); box-shadow: var(--sh-s); }
body.theme-neumorph .connection { color: var(--ink2); font-size: 12px; font-weight: 600; }
body.theme-neumorph .sidebar-meta { color: var(--ink2); font-size: 11.5px; font-weight: 600; }
/* 手机端资产台账工具栏和详情布局修正 */
@media (max-width: 800px) {
  body.theme-neumorph .toolbar-actions {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    gap: 8px;
    align-items: stretch;
  }
  body.theme-neumorph .toolbar-actions .small-select,
  body.theme-neumorph .toolbar-actions .button {
    flex: 1 1 calc(50% - 4px);
    min-width: 0;
    min-height: 42px;
    white-space: normal;
    line-height: 1.25;
    text-align: center;
    justify-content: center;
  }
  body.theme-neumorph .toolbar-actions .button {
    padding: 7px 6px;
    font-size: 12px;
  }
  body.theme-neumorph .ledger-toolbar {
    gap: 10px;
  }
  body.theme-neumorph #ledgerMobileList .asset-mobile-card {
    cursor: pointer;
  }
  body.theme-neumorph #ledgerMobileList .asset-mobile-card:active {
    transform: scale(.995);
    box-shadow: var(--sh-in);
  }
  body.theme-neumorph #ledgerMobileList .asset-mobile-card .asset-mobile-actions button {
    cursor: pointer;
  }
  body.theme-neumorph .asset-detail-grid {
    display: flex;
    flex-direction: column;
  }
  body.theme-neumorph .asset-detail-info {
    order: 1;
  }
  body.theme-neumorph .asset-detail-photo-panel {
    order: 2;
  }
  body.theme-neumorph .asset-detail-photo-main {
    min-height: 180px;
  }
  body.theme-neumorph .asset-detail-thumbs {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}
/* 手机端弹窗溢出修正：头部固定、内容滚动、底部固定 */
@media (max-width: 800px) {
  body.theme-neumorph dialog.modal[open] {
    display: flex;
    flex-direction: column;
    max-height: 92dvh;
    min-height: 0;
    overflow: hidden;
  }
  body.theme-neumorph dialog.modal > form {
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-height: 92dvh;
    overflow: hidden;
  }
  body.theme-neumorph dialog.modal .modal-header,
  body.theme-neumorph dialog.modal .modal-footer {
    flex: 0 0 auto;
  }
  body.theme-neumorph dialog.modal .modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }
  body.theme-neumorph dialog.modal .form-grid {
    grid-template-columns: 1fr;
  }
  body.theme-neumorph dialog.modal .form-grid .wide {
    grid-column: 1 / -1;
  }
  body.theme-neumorph dialog.modal .asset-detail-body {
    overflow-y: auto;
    max-height: calc(92dvh - 76px);
  }
  body.theme-neumorph dialog.modal .asset-detail-info,
  body.theme-neumorph dialog.modal .asset-detail-photo-panel,
  body.theme-neumorph dialog.modal .asset-qr-panel {
    min-width: 0;
  }
  body.theme-neumorph dialog.modal .history-change {
    grid-template-columns: 64px minmax(0,1fr) 14px minmax(0,1fr);
    gap: 4px;
    overflow-wrap: anywhere;
  }
}

/* 手机端资产台账筛选：两列紧凑排列 */
@media (max-width: 800px) {
  body.theme-neumorph #view-ledger .filter-panel {
    padding: 13px;
  }
  body.theme-neumorph #view-ledger .filter-grid,
  body.theme-neumorph #view-ledger .filter-grid.compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  body.theme-neumorph #view-ledger .filter-grid label {
    min-width: 0;
    gap: 4px;
    font-size: 11px;
  }
  body.theme-neumorph #view-ledger .filter-grid .wide {
    grid-column: 1 / -1;
  }
  body.theme-neumorph #view-ledger .filter-grid input,
  body.theme-neumorph #view-ledger .filter-grid select {
    min-height: 36px;
    padding: 6px 8px;
    font-size: 12px;
  }
}
/* 手机端横向溢出根治 + 弹窗宽度锁定 */
@media (max-width: 800px) {
  html, body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden !important;
  }
  body.theme-neumorph .app-shell,
  body.theme-neumorph .main,
  body.theme-neumorph .content,
  body.theme-neumorph .view,
  body.theme-neumorph .panel,
  body.theme-neumorph .filter-panel,
  body.theme-neumorph .filter-grid,
  body.theme-neumorph .ledger-toolbar,
  body.theme-neumorph .toolbar-actions {
    min-width: 0;
    max-width: 100%;
  }
  body.theme-neumorph .ledger-toolbar,
  body.theme-neumorph .toolbar-actions {
    width: 100%;
    overflow: hidden;
  }
  body.theme-neumorph .toolbar-actions .button,
  body.theme-neumorph .toolbar-actions .small-select {
    flex: 1 1 calc(50% - 4px);
    width: calc(50% - 4px);
    max-width: calc(50% - 4px);
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  body.theme-neumorph dialog.modal[open] {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    bottom: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }
  body.theme-neumorph dialog.modal[open] > form,
  body.theme-neumorph dialog.modal[open] .modal-body,
  body.theme-neumorph dialog.modal[open] .modal-header,
  body.theme-neumorph dialog.modal[open] .modal-footer {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
  body.theme-neumorph dialog.modal[open] .modal-body {
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }
  body.theme-neumorph dialog.modal[open] .modal-body * {
    max-width: 100%;
  }
  body.theme-neumorph .asset-detail-body {
    max-height: calc(92dvh - 76px) !important;
  }
}
/* 公务车辆 */
.vehicle-overview { margin-bottom: 18px; padding: 18px 20px 20px; }
.vehicle-overview-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.vehicle-overview-head h2 { margin: 0; font-size: 20px; letter-spacing: -.02em; }
.vehicle-overview-head > div > p:last-child { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
.vehicle-head-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.vehicle-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.vehicle-stat { min-width: 0; padding: 14px 15px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: var(--sh-in-s); }
.vehicle-stat span { display: block; color: var(--muted); font-size: 11px; font-weight: 700; }
.vehicle-stat strong { display: inline-block; margin-top: 8px; color: var(--ink); font-size: 25px; line-height: 1; letter-spacing: -.03em; }
.vehicle-stat small { margin-left: 4px; color: var(--muted); font-size: 11px; }
.vehicle-stat-warn strong { color: var(--amber); }
.vehicle-stat-danger strong { color: var(--danger); }
.vehicle-stat-ok strong { color: var(--success); }
.vehicle-filters { display: grid; grid-template-columns: minmax(220px, 1.6fr) minmax(150px, .7fr) minmax(160px, .8fr) auto; gap: 11px; align-items: end; margin-top: 15px; }
.vehicle-filters label { display: grid; gap: 6px; color: #40545c; font-size: 12px; font-weight: 700; }
.vehicle-filters input, .vehicle-filters select { width: 100%; min-height: 40px; padding: 9px 11px; border: 1px solid var(--line-strong); border-radius: 10px; color: var(--text); background: white; outline: none; }
.vehicle-filters input:focus, .vehicle-filters select:focus { border-color: #5fa8ff; box-shadow: 0 0 0 3px rgba(22,119,232,.12); }
.vehicle-view-switch { justify-self: end; align-self: end; }
.vehicle-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); align-items: stretch; gap: 16px; }
.vehicle-card { display: flex; min-width: 0; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); box-shadow: var(--shadow-soft); }
.vehicle-card-photo { position: relative; height: 150px; overflow: hidden; background: var(--surface-soft); }
.vehicle-cover, .vehicle-thumb, .vehicle-detail-cover { width: 100%; height: 100%; display: block; object-fit: cover; }
.vehicle-photo-empty { width: 100%; height: 100%; display: grid; place-items: center; padding: 16px; color: var(--muted); background: linear-gradient(145deg, var(--surface-soft), var(--surface)); text-align: center; font-size: 12px; }
.vehicle-plate { position: absolute; left: 11px; bottom: 11px; min-width: 96px; padding: 5px 9px; border: 2px solid rgba(255,255,255,.82); border-radius: 7px; color: white; background: #176fb5; text-align: center; font-size: 13px; font-weight: 800; letter-spacing: .04em; box-shadow: 0 4px 12px rgba(0,0,0,.2); }
.vehicle-plate-green { background: #138454; }
.vehicle-photo-source { position: absolute; right: 10px; bottom: 11px; padding: 4px 7px; border-radius: 7px; color: white; background: rgba(8,31,55,.72); font-size: 10px; backdrop-filter: blur(5px); }
.vehicle-card-body { display: flex; flex: 1; flex-direction: column; padding: 14px 15px 15px; }
.vehicle-card-title { display: flex; min-height: 46px; align-items: flex-start; justify-content: space-between; gap: 9px; }
.vehicle-card-title strong { display: block; font-size: 15px; line-height: 1.35; }
.vehicle-card-title span { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; }
.vehicle-tag { display: inline-flex; align-items: center; min-height: 22px; padding: 3px 8px; border-radius: 999px; color: #355fa6; background: var(--brand050); font-size: 10px; font-weight: 700; white-space: nowrap; }
.vehicle-tag-police { color: #225f9c; background: #e7f1fd; }
.vehicle-tag-retired { color: #7e5b13; background: #fbf3dc; }
.vehicle-tag-lease { color: #7a486f; background: #f6e9f3; }
.vehicle-card-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--line); }
.vehicle-card-meta span { display: block; color: var(--muted); font-size: 10px; }
.vehicle-card-meta b { display: block; margin-top: 3px; color: var(--ink2); font-size: 11px; }
.vehicle-card-flags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 11px; }
.vehicle-flag { display: inline-flex; align-items: center; padding: 4px 7px; border-radius: 7px; color: #4d6661; background: var(--surface-soft); font-size: 10px; }
.vehicle-flag-warn { color: #9a5e08; background: var(--warn050); }
.vehicle-flag-danger { color: #a13e37; background: var(--danger050); }
.vehicle-flag-ok { color: #2d705c; background: var(--ok050); }
.vehicle-card-actions { display: flex; align-items: center; gap: 7px; margin-top: auto; padding-top: 13px; }
.vehicle-card-actions .button { flex: 1; min-height: 36px; }
.vehicle-table-panel { overflow: hidden; }
.vehicle-table-vehicle { display: flex; align-items: center; gap: 11px; min-width: 210px; }
.vehicle-table-photo { width: 72px; height: 50px; flex: 0 0 auto; overflow: hidden; border-radius: 9px; background: var(--surface-soft); }
.vehicle-table-vehicle strong { display: block; font-size: 13px; }
.vehicle-table-vehicle span, .vehicle-table-vehicle small { display: block; margin-top: 2px; color: var(--muted); font-size: 10px; }
.vehicle-table td > span { display: block; }
.vehicle-table .mini-button { white-space: nowrap; }
.field-help { color: var(--muted); font-size: 10px; font-weight: 400; }
.vehicle-form-layout { display: grid; grid-template-columns: minmax(0, 1fr) 210px; gap: 18px; align-items: start; }
.vehicle-form-grid { min-width: 0; }
.vehicle-photo-preview { padding: 13px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-soft); }
.vehicle-photo-preview > strong { display: block; margin-bottom: 9px; font-size: 12px; }
.vehicle-photo-preview > span { display: block; margin-top: 9px; color: var(--muted); font-size: 10px; line-height: 1.55; }
.vehicle-photo-preview img { width: 100%; height: 126px; display: block; border-radius: 10px; object-fit: cover; }
.vehicle-photo-preview .vehicle-photo-empty { height: 126px; border-radius: 10px; background: var(--surface); }
.vehicle-photo-preview #vehicleFormPhotoPreview > span { display: block; margin-top: 7px; color: var(--ink2); font-size: 10px; }
.vehicle-detail-hero { display: grid; grid-template-columns: 235px minmax(0, 1fr); gap: 18px; }
.vehicle-detail-photo { height: 175px; overflow: hidden; border-radius: 14px; background: var(--surface-soft); }
.vehicle-detail-summary { min-width: 0; }
.vehicle-detail-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.vehicle-detail-heading h3 { margin: 0; font-size: 25px; letter-spacing: -.02em; }
.vehicle-detail-heading > div > span { display: block; margin-top: 4px; color: var(--muted); font-size: 12px; }
.vehicle-detail-highlight { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin-top: 15px; }
.vehicle-detail-highlight > div { padding: 11px; border-radius: 10px; background: var(--surface-soft); }
.vehicle-detail-highlight span, .vehicle-detail-highlight small { display: block; color: var(--muted); font-size: 10px; }
.vehicle-detail-highlight strong { display: block; margin: 4px 0 2px; font-size: 13px; }
.vehicle-detail-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 17px; padding: 15px; border: 1px solid var(--line); border-radius: 14px; background: rgba(236,230,221,.35); }
.vehicle-detail-grid > div.wide { grid-column: span 3; }
.vehicle-detail-grid span { display: block; color: var(--muted); font-size: 10px; }
.vehicle-detail-grid strong { display: block; margin-top: 3px; color: var(--ink2); font-size: 12px; word-break: break-word; }
.vehicle-insurance-section { margin-top: 18px; }
.vehicle-section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.vehicle-section-heading h3 { margin: 0; font-size: 15px; }
.vehicle-section-heading p { margin: 3px 0 0; color: var(--muted); font-size: 10px; }
.vehicle-section-heading > span { padding: 3px 8px; border-radius: 999px; color: var(--brand600); background: var(--brand050); font-size: 10px; font-weight: 700; }
.vehicle-insurance-list { display: grid; gap: 9px; margin-top: 11px; }
.vehicle-insurance-item { padding: 11px 12px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); }
.vehicle-insurance-item.vehicle-insurance-soon { border-color: #e8c888; background: var(--warn050); }
.vehicle-insurance-item.vehicle-insurance-expired { border-color: #e4b0ac; background: var(--danger050); }
.vehicle-insurance-main { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.vehicle-insurance-main strong { display: block; font-size: 12px; }
.vehicle-insurance-main span { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; }
.vehicle-insurance-main b { flex: 0 0 auto; color: var(--ink2); font-size: 11px; }
.vehicle-insurance-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px; color: var(--muted); font-size: 10px; }
.vehicle-insurance-item > p { margin: 7px 0 0; color: var(--ink2); font-size: 10px; }
.vehicle-insurance-actions { display: flex; justify-content: flex-end; gap: 6px; margin-top: 7px; }
.vehicle-detail-empty { padding: 22px; border: 1px dashed var(--line-strong); border-radius: 11px; color: var(--muted); text-align: center; font-size: 11px; }
.vehicle-import-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 9px; margin-bottom: 12px; }
.vehicle-import-actions > span { color: var(--muted); font-size: 10px; }
.vehicle-import-dropzone { display: grid; justify-items: center; gap: 6px; padding: 25px 16px; border: 1px dashed #8db7f2; border-radius: 13px; color: #365a9a; background: #f3f7ff; text-align: center; }
.vehicle-import-dropzone.dragover { border-color: var(--primary); background: var(--primary-soft); }
.vehicle-import-dropzone strong { font-size: 13px; }
.vehicle-import-dropzone span { color: var(--muted); font-size: 10px; }
.vehicle-import-file { margin-top: 9px; padding: 7px 10px; border-radius: 8px; color: var(--ink2); background: var(--surface-soft); font-size: 11px; }
.vehicle-import-result { margin-top: 12px; }
.vehicle-import-summary { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 10px; }
.vehicle-import-summary span { padding: 5px 8px; border-radius: 7px; color: #365a9a; background: var(--primary-soft); font-size: 10px; }
.vehicle-import-table { min-width: 760px; font-size: 11px; }
.vehicle-match { color: var(--success); font-weight: 700; }
.vehicle-import-message { min-height: 20px; margin: 9px 0 0; color: var(--muted); font-size: 11px; }
.vehicle-reminder-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--muted); font-size: 11px; }
.vehicle-reminder-count { display: inline-flex; padding: 4px 8px; border-radius: 7px; font-size: 10px; font-weight: 700; }
.vehicle-reminder-warn { color: #9a5e08; background: var(--warn050); }
.vehicle-reminder-danger { color: #a13e37; background: var(--danger050); }
.vehicle-reminder-list { display: grid; gap: 8px; margin-top: 12px; }
.vehicle-reminder-item { width: 100%; display: grid; grid-template-columns: 50px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 11px; border: 1px solid var(--line); border-radius: 11px; color: var(--text); background: var(--surface); text-align: left; }
.vehicle-reminder-item:hover { border-color: var(--line-strong); background: var(--surface-soft); }
.vehicle-reminder-item.is-overdue { border-color: #e4b0ac; background: var(--danger050); }
.vehicle-reminder-type { display: inline-flex; align-items: center; justify-content: center; min-height: 26px; border-radius: 7px; color: #365a9a; background: var(--primary-soft); font-size: 10px; font-weight: 700; }
.vehicle-reminder-main { min-width: 0; }
.vehicle-reminder-main strong { display: block; font-size: 12px; }
.vehicle-reminder-main small, .vehicle-reminder-date small { display: block; margin-top: 2px; color: var(--muted); font-size: 10px; }
.vehicle-reminder-date { color: var(--ink2); text-align: right; font-size: 11px; }
.modal-subtitle { margin: 4px 0 0; color: var(--muted); font-size: 11px; }
@media (max-width: 1000px) {
  .vehicle-filters { grid-template-columns: 1fr 1fr; }
  .vehicle-filters .wide { grid-column: span 2; }
  .vehicle-view-switch { justify-self: start; }
}
@media (max-width: 800px) {
  .vehicle-overview { padding: 14px; margin-bottom: 12px; }
  .vehicle-overview-head { flex-direction: column; gap: 12px; }
  .vehicle-overview-head h2 { font-size: 18px; }
  .vehicle-head-actions { width: 100%; display: grid; grid-template-columns: 1fr 1fr; }
  .vehicle-head-actions .button { min-width: 0; padding-inline: 8px; white-space: normal; }
  .vehicle-stats { grid-template-columns: 1fr 1fr; gap: 9px; }
  .vehicle-stat { padding: 11px 12px; }
  .vehicle-stat strong { font-size: 22px; }
  .vehicle-filters { grid-template-columns: 1fr 1fr; gap: 9px; }
  .vehicle-filters label { min-width: 0; }
  .vehicle-filters .wide { grid-column: span 2; }
  .vehicle-view-switch { display: none; }
  .vehicle-card-grid { grid-template-columns: 1fr; gap: 12px; }
  .vehicle-card-photo { height: 145px; }
  .vehicle-card-title { flex-wrap: wrap; }
  .vehicle-form-layout { grid-template-columns: 1fr; }
  .vehicle-photo-preview { order: -1; }
  .vehicle-photo-preview img, .vehicle-photo-preview .vehicle-photo-empty { height: 150px; }
  .vehicle-detail-hero { grid-template-columns: 1fr; }
  .vehicle-detail-photo { height: 200px; }
  .vehicle-detail-heading { flex-direction: column; }
  .vehicle-detail-highlight, .vehicle-detail-grid { grid-template-columns: 1fr 1fr; }
  .vehicle-detail-grid > div.wide { grid-column: span 2; }
  .vehicle-reminder-item { grid-template-columns: 45px minmax(0, 1fr); }
  .vehicle-reminder-date { grid-column: 2; text-align: left; }
}
@media (max-width: 430px) {
  .vehicle-head-actions { grid-template-columns: 1fr; }
  .vehicle-filters { grid-template-columns: 1fr; }
  .vehicle-filters .wide { grid-column: auto; }
  .vehicle-detail-highlight, .vehicle-detail-grid { grid-template-columns: 1fr; }
  .vehicle-detail-grid > div.wide { grid-column: auto; }
  .vehicle-import-actions { align-items: flex-start; flex-direction: column; }
}
/* 公车照片共享与电子保单识别 */
.vehicle-photo-preview-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.vehicle-photo-preview-head > div:first-child {
  display: grid;
  gap: 3px;
}
.vehicle-photo-preview-head strong {
  font-size: 14px;
}
.vehicle-photo-preview-head span,
.vehicle-photo-sync-note {
  color: var(--text-muted, #667085);
  font-size: 12px;
  line-height: 1.5;
}
.vehicle-photo-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
.vehicle-photo-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  min-height: 92px;
}
.vehicle-photo-grid .vehicle-photo-empty {
  grid-column: 1 / -1;
  min-height: 92px;
}
.vehicle-photo-tile {
  position: relative;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--border, #d9e2ec);
  border-radius: 10px;
  background: var(--surface-muted, #f5f8fb);
  aspect-ratio: 4 / 3;
}
.vehicle-photo-tile img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.vehicle-photo-remove {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(15, 23, 42, .78);
  color: #fff;
  cursor: pointer;
  font-size: 17px;
  line-height: 1;
}
.vehicle-photo-remove:hover {
  background: #b42318;
}
.vehicle-shared-photos {
  margin: 16px 0 14px;
  padding: 14px;
  border: 1px solid var(--border, #d9e2ec);
  border-radius: 14px;
  background: var(--surface-muted, #f8fafc);
}
.vehicle-shared-photos .vehicle-section-heading {
  margin-bottom: 10px;
}
.vehicle-shared-photos .vehicle-section-heading p {
  margin: 3px 0 0;
}
.vehicle-detail-photo-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.insurance-policy-import {
  margin: 0 0 16px;
  padding: 12px;
  border: 1px solid var(--border, #d9e2ec);
  border-radius: 12px;
  background: var(--surface-muted, #f8fafc);
}
.insurance-policy-import > div:first-child {
  display: grid;
  gap: 3px;
  margin-bottom: 10px;
}
.insurance-policy-import > div:first-child span {
  color: var(--text-muted, #667085);
  font-size: 12px;
}
.insurance-policy-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.policy-file-button {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}
.insurance-policy-status {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 9px;
  background: #eef6ff;
  color: #175cd3;
  font-size: 13px;
}
.insurance-policy-status.is-success {
  background: #ecfdf3;
  color: #027a48;
}
.insurance-policy-status.is-warning {
  background: #fffaeb;
  color: #b54708;
}
.insurance-policy-status.is-error {
  background: #fef3f2;
  color: #b42318;
}
.insurance-policy-status ul {
  margin: 6px 0 0 18px;
  padding: 0;
}
.insurance-policy-status li {
  margin: 2px 0;
}
.insurance-policy-raw {
  margin-top: 8px;
}
.insurance-policy-raw summary {
  cursor: pointer;
  font-weight: 600;
}
.insurance-policy-raw pre {
  max-height: 180px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  padding: 8px;
  border-radius: 7px;
  background: rgba(255, 255, 255, .72);
  color: #344054;
  font-size: 11px;
}
.ocr-filled {
  outline: 2px solid #84caff !important;
  outline-offset: 1px;
  background-image: linear-gradient(90deg, rgba(132, 202, 255, .14), transparent);
}
@media (max-width: 800px) {
  .vehicle-photo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vehicle-detail-photo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vehicle-photo-preview-head { flex-direction: column; }
}

.policy-import-preview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 12px;
  padding: 12px;
  border: 1px solid var(--border, #d9e2ec);
  border-radius: 10px;
  background: var(--surface-muted, #f8fafc);
}
.policy-import-preview > div:first-child {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.policy-import-preview > div:first-child span {
  color: var(--text-muted, #667085);
  font-size: 12px;
  overflow-wrap: anywhere;
}
.policy-vehicle-picker {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.policy-vehicle-picker select {
  min-width: 220px;
  padding: 9px 10px;
  border: 1px solid var(--border, #d9e2ec);
  border-radius: 8px;
  background: #fff;
}
@media (max-width: 800px) {
  .policy-import-preview,
  .policy-vehicle-picker { flex-direction: column; align-items: stretch; }
  .policy-vehicle-picker select { min-width: 0; width: 100%; }
}

.vehicle-import-action {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}
.vehicle-import-formats {
  color: var(--text-muted, #667085);
  font-size: 11px;
  line-height: 1.35;
  white-space: nowrap;
}
@media (max-width: 800px) {
  .vehicle-import-action { align-items: stretch; }
  .vehicle-import-formats { white-space: normal; text-align: center; }
}

/* 车辆关联、移动端紧凑表单与可点击卡片 */
.vehicle-card { cursor: pointer; transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.vehicle-card:hover { transform: translateY(-2px); border-color: var(--line-strong); box-shadow: 0 14px 32px rgba(31, 50, 70, .11); }
.vehicle-card:focus-visible { outline: 3px solid rgba(22, 119, 232, .25); outline-offset: 2px; }
.vehicle-stat-clickable { cursor: pointer; transition: transform .16s ease, border-color .16s ease; }
.vehicle-stat-clickable:hover { transform: translateY(-1px); border-color: var(--line-strong); }
.vehicle-asset-link-card {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 14px;
  border: 1px solid #b9d5f6;
  border-radius: 13px;
  background: linear-gradient(135deg, #f4f9ff, #eef5ff);
}
.vehicle-asset-link-copy { display: grid; min-width: 0; gap: 3px; }
.vehicle-asset-link-copy > span { color: #5f7592; font-size: 11px; font-weight: 700; }
.vehicle-asset-link-copy strong { color: #173b66; font-size: 14px; overflow-wrap: anywhere; }
.vehicle-asset-link-copy small { color: #657b97; font-size: 11px; line-height: 1.45; }
.vehicle-asset-link-card .button { flex: 0 0 auto; }
.vehicle-advanced-fields {
  grid-column: 1 / -1;
  padding: 0 12px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-soft);
}
.vehicle-advanced-fields > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 2px;
  cursor: pointer;
  color: var(--ink2);
  font-size: 12px;
  font-weight: 700;
  list-style: none;
}
.vehicle-advanced-fields > summary::-webkit-details-marker { display: none; }
.vehicle-advanced-fields > summary::after { content: "展开"; color: var(--muted); font-size: 10px; font-weight: 400; }
.vehicle-advanced-fields[open] > summary::after { content: "收起"; }
.vehicle-advanced-fields > summary small { margin-left: auto; color: var(--muted); font-size: 10px; font-weight: 400; }
.vehicle-advanced-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; }
.vehicle-unlinked-alert {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 14px 0;
  padding: 12px 14px;
  border: 1px solid #f2c46b;
  border-radius: 12px;
  background: #fffaeb;
}
.vehicle-unlinked-alert div { display: grid; gap: 3px; }
.vehicle-unlinked-alert strong { color: #8d5600; font-size: 13px; }
.vehicle-unlinked-alert span { color: #8b6a34; font-size: 11px; }
.vehicle-asset-search { display: grid; gap: 6px; margin-bottom: 10px; color: var(--ink2); font-size: 12px; font-weight: 700; }
.vehicle-asset-search input { width: 100%; min-height: 42px; padding: 9px 11px; border: 1px solid var(--line-strong); border-radius: 10px; background: #fff; }
.vehicle-asset-picker-list { display: grid; gap: 8px; max-height: min(52vh, 430px); overflow: auto; }
.vehicle-asset-pick-item {
  width: 100%;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 11px;
  color: var(--text);
  background: #fff;
  text-align: left;
  cursor: pointer;
}
.vehicle-asset-pick-item:hover { border-color: #8db7f2; background: #f7fbff; }
.vehicle-asset-pick-item.is-selected { border-color: #4c95f5; background: #eef6ff; }
.vehicle-asset-pick-mark { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #2e7be5; font-size: 11px; }
.vehicle-asset-pick-main { min-width: 0; display: grid; gap: 3px; }
.vehicle-asset-pick-main strong { font-size: 13px; }
.vehicle-asset-pick-main small { color: var(--muted); font-size: 10px; overflow-wrap: anywhere; }
.vehicle-asset-pick-photo { color: var(--muted); font-size: 10px; white-space: nowrap; }
@media (max-width: 800px) {
  .vehicle-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 9px 10px !important; }
  .vehicle-form-grid .wide,
  .vehicle-asset-link-card,
  .vehicle-advanced-fields { grid-column: 1 / -1 !important; }
  .vehicle-form-grid label { gap: 4px; font-size: 11px; }
  .vehicle-form-grid input,
  .vehicle-form-grid select,
  .vehicle-form-grid textarea { min-height: 38px; padding: 7px 9px; font-size: 12px; }
  .vehicle-form-grid textarea { min-height: 66px; }
  .vehicle-photo-preview { order: 2; }
  .vehicle-advanced-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px 10px; }
  .vehicle-advanced-fields > summary small { display: none; }
  .vehicle-asset-link-card { align-items: stretch; flex-direction: column; gap: 9px; padding: 12px; }
  .vehicle-asset-link-card .button { width: 100%; }
  .vehicle-unlinked-alert { align-items: stretch; flex-direction: column; }
  .vehicle-unlinked-alert .button { width: 100%; }
  .vehicle-asset-pick-item { grid-template-columns: 20px minmax(0, 1fr); }
  .vehicle-asset-pick-photo { grid-column: 2; }
}
@media (max-width: 420px) {
  .vehicle-form-grid { gap: 8px !important; }
  .vehicle-form-grid label { font-size: 10px; }
  .vehicle-form-grid input,
  .vehicle-form-grid select { padding-inline: 7px; font-size: 11px; }
}

#vehicleTableBody tr[data-vehicle-card-id] { cursor: pointer; }
#vehicleTableBody tr[data-vehicle-card-id]:hover { background: var(--surface-soft); }

/* 车辆档案详情紧凑排版 */
.vehicle-detail-modal .modal-body { padding-top: 14px; }
.vehicle-detail-hero { gap: 14px; }
.vehicle-detail-photo { height: 158px; }
.vehicle-detail-highlight { gap: 7px; margin-top: 11px; }
.vehicle-detail-highlight > div { padding: 8px 9px; }
.vehicle-detail-highlight strong { margin: 3px 0 1px; font-size: 12px; }
.vehicle-detail-grid { gap: 9px 14px; margin-top: 12px; padding: 11px 13px; }
.vehicle-detail-grid span { line-height: 1.25; }
.vehicle-detail-grid strong { margin-top: 2px; font-size: 11px; line-height: 1.35; }
.vehicle-shared-photos { margin: 12px 0 10px; padding: 11px; }
.vehicle-insurance-section { margin-top: 12px; }
@media (max-width: 800px) {
  .vehicle-detail-hero { gap: 9px; }
  .vehicle-detail-photo { height: 138px; }
  .vehicle-detail-heading h3 { font-size: 22px; }
  .vehicle-detail-highlight { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; margin-top: 8px; }
  .vehicle-detail-highlight > div { padding: 7px 6px; border-radius: 8px; }
  .vehicle-detail-highlight span, .vehicle-detail-highlight small { font-size: 8px; line-height: 1.25; }
  .vehicle-detail-highlight strong { font-size: 10px; }
  .vehicle-detail-grid { grid-template-columns: 1fr 1fr; gap: 6px 10px; margin-top: 9px; padding: 9px 10px; }
  .vehicle-detail-grid > div.wide { grid-column: span 2; }
  .vehicle-detail-grid span { font-size: 9px; }
  .vehicle-detail-grid strong { font-size: 10.5px; }
  .vehicle-shared-photos { margin: 9px 0; padding: 9px; }
  .vehicle-shared-photos .vehicle-section-heading { margin-bottom: 6px; }
  .vehicle-detail-photo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
  .vehicle-insurance-section { margin-top: 10px; }
}

/* 车辆档案底部按钮分组 */
.vehicle-detail-modal .modal-footer { flex-wrap: wrap; gap: 8px; }
.vehicle-detail-modal .modal-footer .button { white-space: nowrap; }
@media (max-width: 800px) {
  .vehicle-detail-modal .modal-footer { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
  .vehicle-detail-modal .modal-footer .button { width: 100%; min-width: 0; }
  #closeVehicleDetailFooter,
  #editVehicleFromDetail { grid-column: 1 / -1; }
  .vehicle-photo-actions { gap: 5px; }
  .vehicle-photo-actions .mini-button { flex: 1 1 auto; }
}

/* 固定资产选择详情 */
.vehicle-asset-picker-summary { display: grid; gap: 3px; padding: 9px 10px; border-radius: 9px; background: #f4f8fd; color: var(--ink2); font-size: 11px; }
.vehicle-asset-picker-summary strong { font-size: 12px; }
.vehicle-asset-picker-summary span { color: var(--muted); line-height: 1.45; }
.vehicle-asset-pick-item { align-items: start; }
.vehicle-asset-pick-main { gap: 2px !important; }
.vehicle-asset-pick-name { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-bottom: 3px; }
.vehicle-asset-pick-name em { padding: 2px 6px; border-radius: 999px; color: #8a5b06; background: #fff4d5; font-size: 9px; font-style: normal; font-weight: 700; }
.vehicle-asset-pick-main small { font-size: 10px; line-height: 1.42; }
.vehicle-asset-pick-item.is-recommended { border-color: #efc66b; background: #fffdf7; }
.vehicle-asset-pick-item.is-recommended:hover { background: #fff9e9; }
.vehicle-asset-pick-photo { align-self: start; padding-top: 3px; }
.vehicle-asset-picker-more { padding: 9px; color: var(--muted); font-size: 10px; text-align: center; }
@media (max-width: 800px) {
  .vehicle-asset-pick-item { padding: 10px; }
  .vehicle-asset-pick-main small { font-size: 9.5px; }
  .vehicle-asset-pick-photo { grid-column: 2; padding-top: 2px; }
}

/* 已关联但无照片的明确标识 */
.vehicle-photo-linked-empty,
.vehicle-photo-unlinked-empty {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 12px;
}
.vehicle-photo-linked-empty {
  border: 1px dashed #8fc5a8;
  background: linear-gradient(145deg, #eefaf3, #f8fffb);
}
.vehicle-photo-unlinked-empty {
  border: 1px dashed #d8b36c;
  background: linear-gradient(145deg, #fff9eb, #fffdf8);
}
.vehicle-photo-watermark {
  position: absolute;
  inset: 0;
  display: grid !important;
  place-items: center;
  color: #1f8a58;
  font-size: clamp(28px, 14vw, 58px);
  font-weight: 900;
  letter-spacing: .12em;
  opacity: .07;
  transform: rotate(-16deg) scale(1.15);
  pointer-events: none;
  white-space: nowrap;
}
.vehicle-photo-linked-badge,
.vehicle-photo-unlinked-badge {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
}
.vehicle-photo-linked-badge { color: #087443; background: #d9f6e7; }
.vehicle-photo-unlinked-badge { color: #8a5b06; background: #fff0c8; }
.vehicle-photo-linked-empty strong,
.vehicle-photo-unlinked-empty strong { position: relative; z-index: 1; font-size: 13px; }
.vehicle-photo-linked-empty small,
.vehicle-photo-unlinked-empty small {
  position: relative;
  z-index: 1;
  max-width: 100%;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.4;
  overflow-wrap: anywhere;
  text-align: center;
}
.vehicle-thumb.vehicle-photo-linked-empty,
.vehicle-thumb.vehicle-photo-unlinked-empty { gap: 0; padding: 3px; }
.vehicle-thumb.vehicle-photo-linked-empty strong,
.vehicle-thumb.vehicle-photo-linked-empty small,
.vehicle-thumb.vehicle-photo-unlinked-empty strong,
.vehicle-thumb.vehicle-photo-unlinked-empty small { display: none; }
.vehicle-thumb .vehicle-photo-linked-badge,
.vehicle-thumb .vehicle-photo-unlinked-badge { padding: 2px 4px; font-size: 7px; white-space: nowrap; }

/* 保险登记入口与车辆详情底栏 */
.insurance-entry-options { display: grid; gap: 10px; }
.insurance-entry-option {
  display: grid;
  gap: 5px;
  width: 100%;
  padding: 14px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  color: var(--text);
  background: var(--surface);
  text-align: left;
  cursor: pointer;
}
.insurance-entry-option:hover { border-color: #8db7f2; background: #f7fbff; }
.insurance-entry-option.primary { border-color: #8bbaf3; background: #f2f8ff; }
.insurance-entry-option strong { font-size: 14px; }
.insurance-entry-option span { color: var(--muted); font-size: 11px; line-height: 1.5; }
.vehicle-detail-footer { display: flex !important; flex-direction: column; align-items: stretch !important; gap: 8px !important; }
.vehicle-detail-footer-actions { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; }
.vehicle-detail-footer-actions .button { flex: 1 1 130px; min-width: 0; }
#addInsuranceButton { order: 1; }
#linkVehicleAsset { order: 2; }
#openVehicleAsset { order: 3; }
#editVehicleFromDetail { order: 4; }
.vehicle-detail-close { width: 100%; }
@media (max-width: 800px) {
  .vehicle-detail-footer-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vehicle-detail-footer-actions .button { width: 100%; }
}

/* 固定资产卡片照片查看 */
.vehicle-asset-pick-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 0;
  align-items: start;
}
.vehicle-asset-pick-select {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  width: 100%;
  padding: 11px 8px 11px 12px;
  border: 0;
  color: var(--text);
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.vehicle-asset-pick-photo {
  align-self: start;
  margin: 11px 12px 0 0;
  padding: 5px 8px;
  border: 1px solid #b9d5f6;
  border-radius: 7px;
  color: #2162ad;
  background: #f1f7ff;
  font-size: 10px;
  white-space: nowrap;
  cursor: pointer;
}
.vehicle-asset-pick-photo.has-photos:hover { border-color: #5fa8ff; background: #e6f2ff; }
.vehicle-asset-pick-photo:disabled { opacity: .48; cursor: default; }
.vehicle-asset-pick-item.is-selected .vehicle-asset-pick-photo { border-color: #4c95f5; }
.vehicle-asset-photo-info { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 12px; margin-bottom: 12px; padding: 10px 11px; border-radius: 10px; background: var(--surface-soft); color: var(--ink2); font-size: 11px; }
.vehicle-asset-photo-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.vehicle-asset-photo-gallery figure { margin: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-soft); }
.vehicle-asset-photo-gallery img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.vehicle-asset-photo-gallery figcaption { padding: 5px 7px; color: var(--muted); font-size: 9px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 800px) {
  .vehicle-asset-pick-item { grid-template-columns: 1fr; }
  .vehicle-asset-pick-select { padding: 10px 10px 5px; }
  .vehicle-asset-pick-photo { justify-self: start; margin: 0 10px 10px 42px; }
  .vehicle-asset-photo-info { grid-template-columns: 1fr; }
  .vehicle-asset-photo-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
}