:root {
  --cd-ink: #08171d;
  --cd-ink-2: #102c35;
  --cd-deep: #0d3b39;
  --cd-paper: #f3f1ea;
  --cd-card: #ffffff;
  --cd-line: #d9e1e0;
  --cd-text: #162a31;
  --cd-muted: #688087;
  --cd-teal: #0e6f68;
  --cd-teal-soft: #e6f3f0;
  --cd-copper: #c08a4a;
  --cd-amber: #a97618;
  --cd-red: #b4453b;
  --bs-primary: #0e6f68;
  --bs-primary-rgb: 14, 111, 104;
  --bs-body-bg: #f3f1ea;
  --bs-body-color: #162a31;
  --bs-border-color: #d9e1e0;
  --bs-border-radius: .75rem;
  --bs-border-radius-lg: 1rem;
  --bs-font-sans-serif: ui-sans-serif, -apple-system, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; color: var(--cd-text); background: var(--cd-paper); -webkit-font-smoothing: antialiased; }
body:before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(circle at 90% 2%, rgba(192,138,74,.12), transparent 28%),
              radial-gradient(circle at 2% 35%, rgba(14,111,104,.08), transparent 30%),
              repeating-linear-gradient(90deg, rgba(8,23,29,.035) 0 1px, transparent 1px 64px),
              repeating-linear-gradient(0deg, rgba(8,23,29,.025) 0 1px, transparent 1px 64px); }
a { color: var(--cd-teal); text-decoration: none; }
a:hover { color: #0b5752; text-decoration: underline; }
[hidden] { display: none !important; }

.app-shell { min-height: 100vh; }
.sidebar { width: 264px; position: fixed; inset: 0 auto 0 0; z-index: 1040; color: #dbe8e6;
  background: linear-gradient(160deg, #08171d 0%, #102c35 55%, #0d3b39 100%);
  border-right: 1px solid rgba(255,255,255,.08); display: flex; flex-direction: column; padding: 22px 16px;
  transition: transform .22s ease; }
.sidebar:after { content: ""; position: absolute; right: -70px; top: 60px; width: 240px; height: 150px;
  border: 1px solid rgba(192,138,74,.18); border-radius: 50%; transform: rotate(-24deg); pointer-events: none; }
.brand { display: flex; align-items: center; gap: 11px; padding: 2px 8px 22px; position: relative; z-index: 1; }
.brand svg { width: 34px; height: 34px; color: var(--cd-copper); flex: none; }
.brand-name { font-size: 16px; letter-spacing: .08em; white-space: nowrap; font-weight: 700; color: #fff; line-height: 1.2; }
.brand-sub { font-size: 10px; color: #a9c5c5; letter-spacing: .14em; margin-top: 3px; }
.side-label { font-size: 10px; letter-spacing: .17em; color: #7f9da0; padding: 10px 12px 6px; }
.side-nav { display: flex; flex-direction: column; gap: 4px; position: relative; z-index: 1; }
.side-link { display: flex; align-items: center; gap: 11px; padding: 10px 12px; color: #b9cfcd; border-radius: 10px;
  font-size: 13.5px; font-weight: 500; transition: background .15s, color .15s; }
.side-link:hover { color: #fff; background: rgba(255,255,255,.07); text-decoration: none; }
.side-link.active { color: #fff; background: rgba(192,138,74,.18); box-shadow: inset 2px 0 0 var(--cd-copper); }
.side-link svg { width: 18px; height: 18px; opacity: .9; flex: none; }
.side-foot { margin-top: auto; padding: 16px 12px 0; font-size: 10.5px; color: #769194; line-height: 1.7; position: relative; z-index: 1; }
.main-area { margin-left: 264px; min-height: 100vh; }
.topbar { height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 0 30px; background: rgba(255,255,255,.82); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--cd-line); position: sticky; top: 0; z-index: 1020; }
.page-eyebrow { font-size: 10px; letter-spacing: .18em; color: var(--cd-muted); text-transform: uppercase; }
.page-title { font-size: 20px; font-weight: 650; margin: 2px 0 0; letter-spacing: .01em; }
.user-chip { display: flex; align-items: center; gap: 9px; font-size: 12px; color: var(--cd-muted); }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--cd-teal-soft); color: var(--cd-teal);
  display: grid; place-items: center; font-weight: 700; font-size: 12px; }
.view { padding: 26px 30px 70px; max-width: 1440px; }
.sidebar-backdrop { position: fixed; inset: 0; background: rgba(8,23,29,.45); z-index: 1035; display: none; }
.sidebar-backdrop.show { display: block; }
.menu-btn { display: none; }

.card { border-color: var(--cd-line); border-radius: 16px; box-shadow: 0 14px 34px rgba(8,23,29,.055); }
.card-header { background: transparent; border-bottom: 1px solid #eef1f0; padding: 16px 20px; }
.card-body { padding: 20px; }
.section-title { font-size: 15px; font-weight: 650; margin: 0; }
.section-sub { font-size: 12px; color: var(--cd-muted); margin-top: 3px; }
.stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.stat { background: #fff; border: 1px solid var(--cd-line); border-radius: 14px; padding: 16px 18px; box-shadow: 0 10px 24px rgba(8,23,29,.04); }
.stat-label { font-size: 11px; color: var(--cd-muted); letter-spacing: .08em; text-transform: uppercase; }
.stat-value { font-size: 26px; font-weight: 700; margin-top: 6px; letter-spacing: -.01em; }
.stat-note { font-size: 11px; color: var(--cd-muted); margin-top: 2px; }
.badge-soft { background: var(--cd-teal-soft); color: var(--cd-teal); font-weight: 600; }
.badge-draft { background: #eef1f1; color: #5f7479; }
.badge-red { background: #fbece9; color: var(--cd-red); }
.badge-amber { background: #fbf1de; color: var(--cd-amber); }
.chip { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; padding: 4px 9px; border-radius: 999px; background: #f2f0e9; color: var(--cd-muted); }
.table { --bs-table-bg: transparent; margin-bottom: 0; font-size: 13px; }
.table > :not(caption) > * > * { padding: 11px 12px; border-bottom-color: #edf1f0; vertical-align: middle; }
.table thead th { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--cd-muted); font-weight: 600; }
.table-hover > tbody > tr:hover > * { background: #faf9f4; }
.vehicle-row { cursor: pointer; }
.btn { border-radius: 9px; font-size: 13px; font-weight: 600; padding: 7px 13px; }
.btn-primary { background: var(--cd-teal); border-color: var(--cd-teal); }
.btn-primary:hover { background: #0b5752; border-color: #0b5752; }
.btn-outline-primary { color: var(--cd-teal); border-color: #9fc7c2; }
.btn-outline-primary:hover { background: var(--cd-teal); border-color: var(--cd-teal); }
.btn-light-soft { background: var(--cd-teal-soft); color: var(--cd-teal); border: 1px solid transparent; }
.btn-light-soft:hover { background: #d7ebe7; color: #0b5752; }
.btn-icon { width: 32px; height: 32px; padding: 0; display: inline-grid; place-items: center; }
.form-control, .form-select { border-radius: 9px; border-color: #cbd6d5; background-color: #fbfaf6; font-size: 13.5px; padding: 9px 11px; }
.form-control:focus, .form-select:focus { border-color: var(--cd-teal); box-shadow: 0 0 0 .2rem rgba(14,111,104,.12); background-color: #fff; }
.form-label { font-size: 12px; color: var(--cd-muted); font-weight: 600; margin-bottom: 5px; }
.hero-band { position: relative; overflow: hidden; border-radius: 18px; color: #fff; padding: 24px 26px;
  background: linear-gradient(130deg, #08171d, #102c35 58%, #0d3b39); margin-bottom: 18px; }
.hero-band:before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 1px, transparent 1px 58px), repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 1px, transparent 1px 58px); }
.hero-band h2 { position: relative; font-size: 24px; font-weight: 650; margin: 0 0 6px; }
.hero-band p { position: relative; color: #b9cfcd; font-size: 12.5px; margin: 0; }
.hero-band .hero-car { position: absolute; right: 18px; bottom: -12px; width: 260px; opacity: .35; color: var(--cd-copper); }
.breadcrumb { font-size: 12px; margin-bottom: 10px; --bs-breadcrumb-divider-color: #a7b6b5; }
.detail-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.detail-title { font-size: 24px; font-weight: 700; margin: 0; letter-spacing: .01em; }
.detail-price { font-size: 24px; font-weight: 700; color: var(--cd-teal); margin-top: 4px; }
.meta-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; }
.meta-item { background: #faf9f4; border: 1px solid #edf1f0; border-radius: 11px; padding: 10px 12px; }
.meta-item .label { font-size: 10px; letter-spacing: .08em; color: var(--cd-muted); text-transform: uppercase; }
.meta-item .value { font-size: 14px; font-weight: 600; margin-top: 2px; }
.nav-pills { gap: 6px; border-bottom: 1px solid var(--cd-line); padding-bottom: 10px; margin-bottom: 18px; flex-wrap: wrap; }
.nav-pills .nav-link { color: var(--cd-muted); border-radius: 999px; font-size: 12.5px; font-weight: 600; padding: 7px 13px; }
.nav-pills .nav-link:hover { background: #f2f0e9; color: var(--cd-text); }
.nav-pills .nav-link.active { background: var(--cd-ink); color: #fff; }
.insp-row { display: grid; grid-template-columns: minmax(180px,1fr) 120px 100px minmax(130px,.8fr); gap: 8px; align-items: center; padding: 9px 0; border-bottom: 1px solid #edf1f0; }
.insp-row .form-select, .insp-row .form-control { margin: 0; }
.insp-name { font-size: 12.5px; font-weight: 600; }
.insp-criteria { font-size: 10.5px; color: var(--cd-muted); line-height: 1.45; margin-top: 2px; }
.insp-summary { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; }
.result-pill { font-size: 10.5px; padding: 4px 8px; border-radius: 999px; font-weight: 650; white-space: nowrap; }
.result-pill.ok { background: var(--cd-teal-soft); color: var(--cd-teal); }
.result-pill.defect { background: #fbece9; color: var(--cd-red); }
.result-pill.uninspectable { background: #fbf1de; color: var(--cd-amber); }
.result-pill.pending { background: #eef1f1; color: #5f7479; }
.empty-state { border: 1px dashed #cfd9d7; background: #fbfaf6; border-radius: 12px; padding: 22px; text-align: center; color: var(--cd-muted); font-size: 12.5px; }
.qr-box { background: #fff; border: 1px solid var(--cd-line); border-radius: 12px; padding: 8px; width: 150px; height: 150px; }
.toast-container { z-index: 2000; }
.toast { border: 0; background: var(--cd-ink); color: #fff; border-radius: 11px; box-shadow: 0 16px 34px rgba(8,23,29,.25); }
.login-screen { min-height: 100vh; display: grid; place-items: center; padding: 32px 16px;
  background: radial-gradient(circle at 76% 12%, rgba(192,138,74,.2), transparent 28%), linear-gradient(135deg, #08171d, #102c35 60%, #0d3b39); position: relative; overflow: hidden; }
.login-screen:before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 1px, transparent 1px 64px), repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 1px, transparent 1px 64px); }
.login-card { position: relative; width: min(520px, 100%); background: #fff; border-radius: 20px; padding: 26px; box-shadow: 0 30px 80px rgba(0,0,0,.35); border-top: 3px solid var(--cd-copper); }
.login-brand { display: flex; align-items: center; gap: 11px; margin-bottom: 20px; }
.login-brand svg { width: 34px; height: 34px; color: var(--cd-copper); }
.login-brand .name { font-size: 18px; font-weight: 700; letter-spacing: .12em; }
.login-brand .sub { font-size: 10px; color: var(--cd-muted); letter-spacing: .12em; margin-top: 2px; }
.hint-box { background: #fff8dc; border: 1px dashed #c9a227; border-radius: 12px; padding: 12px; font-size: 12px; }
.hint-box code { background: #f6efd8; color: #6b5314; }
.login-note { font-size: 11.5px; color: var(--cd-muted); line-height: 1.7; }
.table-actions { display: flex; gap: 5px; flex-wrap: wrap; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; }
.small-muted { font-size: 11px; color: var(--cd-muted); }
.fact-value { font-weight: 600; }
.doc-link { font-size: 12px; }
.ai-card { background: #f3f8f6; border: 1px solid #d7ebe7; border-radius: 12px; padding: 12px; font-size: 12.5px; }
.dropdown-menu { font-size: 13px; border-color: var(--cd-line); border-radius: 10px; box-shadow: 0 14px 34px rgba(8,23,29,.12); }
.modal-content { border: 0; border-radius: 15px; }
.modal-header, .modal-footer { border-color: #edf1f0; }
.modal-title { font-size: 16px; font-weight: 650; }
.offcanvas { background: var(--cd-ink); color: #fff; }

@media (max-width: 1100px) {
  .stat-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .meta-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .insp-row { grid-template-columns: minmax(150px,1fr) 110px 90px; }
  .insp-row .note-input { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .sidebar { transform: translateX(-100%); }
  .sidebar.open { transform: translateX(0); }
  .main-area { margin-left: 0; }
  .menu-btn { display: inline-grid; }
  .topbar { padding: 0 18px; }
  .view { padding: 20px 16px 60px; }
  .user-chip .user-role { display: none; }
}
@media (max-width: 620px) {
  .stat-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .stat-value { font-size: 22px; }
  .meta-grid { grid-template-columns: 1fr 1fr; }
  .insp-row { grid-template-columns: 1fr 1fr; }
  .insp-name { grid-column: 1 / -1; }
  .hero-band .hero-car { width: 180px; opacity: .22; }
  .detail-title { font-size: 20px; }
}

@media (min-width: 901px) { .menu-btn { display: none !important; } }

@media (max-width: 620px) { .table-responsive .table { min-width: 620px; } }
.qr-thumb{width:44px!important;height:44px!important;object-fit:contain;display:block;border:1px solid #e2e8e7;border-radius:6px;background:#fff}
.usage-cell{min-width:200px}.usage-row{display:flex;align-items:center;gap:6px;font-size:10px;color:var(--muted);margin:4px 0}.usage-row>span:first-child{width:30px;flex:none}.usage-row b{width:58px;text-align:right;font-size:10px;color:var(--text);font-weight:600}.usage-bar{flex:1;height:5px;border-radius:999px;background:#e7eceb;overflow:hidden}.usage-bar i{display:block;height:5px;background:linear-gradient(90deg,#0e6f68,#4de8ff);border-radius:999px}.usage-bar i.warn{background:linear-gradient(90deg,#d99a2b,#ffb86b)}.usage-bar i.danger{background:linear-gradient(90deg,#b4453b,#ff7b6b)}