:root {
  --bg: #f4f6f8;
  --surface: #ffffff;
  --ink: #17212b;
  --muted: #66727f;
  --line: #dfe4e8;
  --green: #13795b;
  --green-soft: #e7f4ef;
  --red: #c63b35;
  --red-soft: #fbeceb;
  --amber: #9a6400;
  --amber-soft: #fff4d6;
  --blue: #1769aa;
  --blue-soft: #e9f3fb;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 14px/1.5 "Microsoft YaHei", Arial, sans-serif; letter-spacing: 0; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
.topbar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; padding: 18px max(22px, calc((100vw - 1440px)/2)); background: rgba(255,255,255,.96); border-bottom: 1px solid var(--line); }
.eyebrow { color: var(--green); font-size: 12px; font-weight: 700; }
h1 { margin: 1px 0 0; font-size: 22px; }
h2 { margin: 0; font-size: 16px; }
.icon-btn { width: 40px; height: 40px; border: 1px solid var(--line); background: var(--surface); font-size: 24px; }
.icon-btn.primary { color: white; background: var(--green); border-color: var(--green); }
.top-actions { display: flex; align-items: center; gap: 8px; }
main { max-width: 1440px; margin: 0 auto; padding: 18px 22px 92px; }
.view { display: none; }
.view.active { display: block; }
.metrics { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-bottom: 26px; }
.metric { padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; }
.metric strong { display: block; margin-top: 6px; font-size: 24px; }
.metric.alert strong { color: var(--red); }
.month-board { margin-bottom: 22px; }
.dashboard-range { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.store-board { display: grid; gap: 12px; margin-bottom: 22px; }
.store-board-card { margin: 0; }
.month-board-card { padding: 14px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); }
.month-board-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.month-board-head strong { font-size: 16px; }
.month-board-head span { color: var(--muted); font-size: 12px; }
.month-board-grid { display: grid; grid-template-columns: repeat(9, minmax(118px, 1fr)); gap: 8px; overflow-x: auto; }
.month-board-grid div { padding: 12px 10px; border-radius: 5px; background: var(--bg); }
.month-board-grid span { color: var(--muted); font-size: 12px; }
.month-board-grid strong { display: block; margin-top: 6px; font-size: 22px; }
.insurer-board { display: grid; gap: 8px; margin-bottom: 22px; }
.insurer-row { display: grid; grid-template-columns: 34px 1.4fr repeat(5, minmax(82px, .7fr)); align-items: center; gap: 8px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); text-align: left; }
.insurer-row:hover { border-color: #9caaa5; }
.insurer-row span { color: var(--muted); }
.insurer-row strong { font-size: 15px; }
.insurer-row em { color: var(--muted); font-size: 12px; font-style: normal; }
.referral-board { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-bottom: 22px; }
.referral-row { display: grid; grid-template-columns: 24px 1fr auto; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); }
.referral-row span { color: var(--muted); font-size: 12px; }
.referral-row strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.referral-row em { color: var(--green); font-size: 13px; font-style: normal; font-weight: 700; }
.person-board { display: grid; gap: 16px; margin-bottom: 22px; }
.person-group { display: grid; gap: 8px; }
.person-group-head { display: flex; align-items: center; justify-content: space-between; }
.person-group-head h3 { margin: 0; font-size: 15px; }
.person-group-head span { color: var(--muted); font-size: 12px; }
.person-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 10px; }
.person-card { display: grid; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); text-align: left; }
.person-card:hover { border-color: #9caaa5; }
.person-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.person-head strong { font-size: 16px; }
.person-head span { color: var(--muted); font-size: 12px; }
.person-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.person-stats div { padding: 8px 6px; border-radius: 5px; background: var(--bg); }
.person-stats span, .person-foot { color: var(--muted); font-size: 11px; }
.person-stats strong { display: block; margin-top: 3px; font-size: 18px; }
.person-foot { display: flex; flex-wrap: wrap; gap: 10px; }
.section-head { display: flex; align-items: center; justify-content: space-between; margin: 18px 0 10px; }
.text-btn { border: 0; background: transparent; color: var(--green); }
.list { display: grid; gap: 8px; }
.item { display: grid; grid-template-columns: 1.3fr .8fr .7fr auto; align-items: center; gap: 12px; padding: 14px 15px; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; text-align: left; }
.item:hover { border-color: #9caaa5; }
.item-title { font-weight: 700; }
.sub, .muted { color: var(--muted); font-size: 12px; }
.badge { display: inline-block; width: fit-content; padding: 3px 7px; border-radius: 4px; background: var(--blue-soft); color: var(--blue); font-size: 12px; font-weight: 700; }
.badge.danger { color: var(--red); background: var(--red-soft); }
.badge.warn { color: var(--amber); background: var(--amber-soft); }
.badge.good { color: var(--green); background: var(--green-soft); }
.badge.dark { color: #1f2933; background: #e5e7eb; }
.filters { display: flex; flex-wrap: wrap; gap: 7px; overflow: visible; margin-bottom: 14px; padding-bottom: 4px; }
.chip { white-space: nowrap; padding: 7px 12px; border: 1px solid var(--line); border-radius: 5px; background: var(--surface); }
.chip.active { color: white; background: var(--green); border-color: var(--green); }
.month-filter, .owner-filter, .plate-filter, .referrer-filter, .phone-filter { display: flex; align-items: center; gap: 7px; white-space: nowrap; padding: 4px 8px; border: 1px solid var(--line); border-radius: 5px; background: var(--surface); color: var(--muted); }
.month-filter input, .owner-filter select, .plate-filter input, .referrer-filter input, .phone-filter input { min-width: 122px; border: 0; outline: 0; background: transparent; color: var(--ink); }
.scorebar { width: 150px; height: 7px; overflow: hidden; background: #edf0f2; border-radius: 3px; }
.scorebar span { display: block; height: 100%; background: var(--green); }
.loss-analysis-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 18px; }
.analysis-panel { padding: 14px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); }
.analysis-panel h3 { margin: 0 0 12px; font-size: 15px; }
.analysis-row { display: grid; gap: 7px; padding: 9px 0; border-top: 1px solid var(--line); }
.analysis-row:first-child { border-top: 0; }
.analysis-row div:first-child { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.analysis-row span { color: var(--muted); font-size: 12px; }
.analysis-bar { height: 6px; overflow: hidden; border-radius: 3px; background: var(--bg); }
.analysis-bar span { display: block; height: 100%; background: var(--green); }
.bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; z-index: 5; display: flex; justify-content: center; gap: 4px; padding: 8px; background: var(--surface); border-top: 1px solid var(--line); overflow-x: auto; }
.nav-item { min-width: 110px; padding: 6px 10px; border: 0; background: transparent; color: var(--muted); }
.nav-item span { display: block; font-size: 18px; }
.nav-item.active { color: var(--green); font-weight: 700; }
.nav-item { position: relative; }
.nav-item i { position: absolute; top: 2px; right: 18px; min-width: 17px; padding: 1px 4px; border-radius: 9px; color: white; background: var(--red); font-size: 10px; font-style: normal; }
dialog { width: min(680px, calc(100% - 24px)); max-height: 90vh; overflow: auto; border: 0; border-radius: 7px; box-shadow: 0 20px 70px #0004; padding: 0; }
dialog::backdrop { background: #17212b88; }
form, #detail { padding: 20px; }
.dialog-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
label { display: grid; gap: 5px; color: var(--muted); font-size: 12px; }
.check-field { display: flex; align-items: center; gap: 8px; min-height: 42px; color: var(--ink); font-size: 14px; }
.check-field input { width: 18px; height: 18px; padding: 0; }
input, select, textarea { width: 100%; padding: 10px; border: 1px solid var(--line); border-radius: 4px; color: var(--ink); background: white; }
.wide { grid-column: 1 / -1; }
.submit-btn { width: 100%; margin-top: 18px; padding: 12px; border: 0; border-radius: 4px; color: white; background: var(--green); font-weight: 700; }
.detail-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 14px 0; }
.detail-cell { padding: 10px; background: var(--bg); }
.actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; }
.action { padding: 9px 12px; border: 1px solid var(--line); background: white; border-radius: 4px; }
.action.primary { color: white; background: var(--green); border-color: var(--green); }
.action.danger { color: var(--red); border-color: #e9b8b5; }
.owner-select { min-width: 145px; padding: 8px; }
.timeline { border-left: 2px solid var(--line); padding-left: 14px; }
.timeline-entry { margin: 10px 0; }
.phone-link { color: var(--green); font-weight: 700; text-decoration: none; }
.quick-actions { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 12px 0; }
.quick-action { padding: 12px 8px; border: 1px solid var(--line); border-radius: 4px; background: white; }
.report-page { min-height: 100vh; background: white; }
.report-head { padding: 26px 18px 20px; background: #f1f7f4; border-bottom: 1px solid var(--line); }
.report-head p { margin: 6px 0 0; color: var(--muted); }
.report-workbench-link { display: inline-block; margin-top: 10px; color: var(--green); font-weight: 700; text-decoration: none; }
.report-main { max-width: 540px; padding: 18px; }
.quick-form { display: grid; gap: 14px; padding: 0; }
.quick-form label { font-size: 13px; color: var(--ink); font-weight: 700; }
.quick-form input, .quick-form select, .quick-form textarea { font-size: 16px; font-weight: 400; }
.smart-paste { padding: 12px; border: 1px solid #b9d7ca; border-radius: 6px; background: var(--green-soft); }
.smart-actions { display: flex; align-items: center; gap: 10px; margin-top: 9px; }
.smart-actions .action { flex: 0 0 auto; }
.success-panel { padding: 28px 16px; text-align: center; }
.success-mark { width: 64px; height: 64px; margin: 10px auto 18px; padding-top: 10px; border-radius: 50%; color: white; background: var(--green); font-size: 30px; }
.login-main { margin: 10vh auto 0; }
.login-error { color: var(--red); }
@media (max-width: 760px) {
  .metrics { grid-template-columns: repeat(2, 1fr); }
  .metric:last-child { grid-column: 1 / -1; }
  .month-board-grid { grid-template-columns: repeat(9, minmax(118px, 1fr)); }
  .month-board-head { align-items: flex-start; flex-direction: column; gap: 4px; }
  .insurer-row { grid-template-columns: 28px 1fr 1fr; }
  .insurer-row em:nth-of-type(n+3) { display: none; }
  .loss-analysis-grid { grid-template-columns: 1fr; }
  .item { grid-template-columns: 1fr auto; }
  .item > :nth-child(2), .item > :nth-child(3) { display: none; }
  .form-grid, .detail-grid { grid-template-columns: 1fr; }
  .person-grid { grid-template-columns: 1fr; }
  .wide { grid-column: auto; }
  .nav-item { min-width: 90px; }
}

.mobile-page { min-height: 100vh; background: #f3f6f5; }
.mobile-head { position: sticky; top: 0; z-index: 8; display: flex; align-items: center; justify-content: space-between; min-height: 68px; padding: 12px 16px; color: white; background: var(--green); }
.mobile-head .eyebrow { color: #cce9de; }
.mobile-head h1 { font-size: 20px; }
.mobile-user { max-width: 120px; overflow: hidden; padding: 8px 10px; border: 1px solid #ffffff66; border-radius: 5px; color: white; background: #ffffff18; text-overflow: ellipsis; white-space: nowrap; }
.mobile-main { max-width: 620px; padding: 14px 12px 88px; }
.mobile-view { display: none; }
.mobile-view.active { display: block; }
.mobile-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.mobile-stats div { padding: 12px 10px; border: 1px solid var(--line); border-radius: 6px; background: white; }
.mobile-stats span { display: block; color: var(--muted); font-size: 11px; }
.mobile-stats strong { display: block; margin-top: 3px; font-size: 22px; }
.mobile-person-card { display: grid; gap: 11px; margin-bottom: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 7px; background: white; }
.mobile-person-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.mobile-person-head strong { font-size: 18px; }
.mobile-person-head span { color: var(--muted); font-size: 12px; }
.mobile-person-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.mobile-person-grid div { padding: 11px 9px; border-radius: 6px; background: var(--bg); }
.mobile-person-grid span { display: block; color: var(--muted); font-size: 11px; }
.mobile-person-grid strong { display: block; margin-top: 5px; font-size: 20px; }
.mobile-person-foot { display: flex; flex-wrap: wrap; gap: 8px 12px; color: var(--muted); font-size: 12px; }
.mobile-filter-row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 10px 0; }
.mobile-card-reminder-actions { display: flex; justify-content: flex-end; margin-top: 9px; }
.mobile-snooze { padding: 7px 10px; border: 1px solid var(--line); border-radius: 4px; color: var(--green); background: white; }
.mobile-snooze-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mobile-snooze-grid .mobile-action:last-child { grid-column: 1 / -1; }
.mobile-filter { padding: 9px; border: 1px solid var(--line); border-radius: 5px; color: var(--muted); background: white; }
.mobile-filter.active { color: white; border-color: var(--green); background: var(--green); }
.mobile-leads { display: grid; gap: 9px; }
.mobile-lead-card { padding: 13px; border: 1px solid var(--line); border-radius: 7px; background: white; }
.mobile-card-top, .mobile-card-bottom { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mobile-card-top strong { font-size: 16px; }
.mobile-card-top span:not(.badge) { margin-left: 8px; color: var(--muted); font-size: 12px; }
.mobile-card-meta { margin-top: 6px; color: var(--muted); font-size: 11px; }
.mobile-card-action { margin: 10px 0; padding: 8px; color: var(--ink); background: var(--bg); font-size: 13px; }
.mobile-card-action.warn { border-left: 3px solid var(--amber); color: #8a4b00; background: #fff7e6; font-weight: 700; }
.mobile-card-bottom { border-top: 1px solid var(--line); padding-top: 9px; color: var(--muted); font-size: 12px; }
.mobile-card-bottom a { color: var(--green); font-weight: 700; text-decoration: none; }
.mobile-nav { position: fixed; right: 0; bottom: 0; left: 0; z-index: 9; display: grid; grid-template-columns: repeat(3, 1fr); padding: 6px max(6px, calc((100vw - 620px) / 2)); padding-bottom: max(6px, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: white; }
.mobile-nav button { position: relative; min-height: 52px; border: 0; color: var(--muted); background: transparent; font-size: 11px; }
.mobile-nav button span { display: block; margin: 0 auto 2px; color: inherit; font-size: 20px; font-weight: 700; }
.mobile-nav button.active { color: var(--green); }
.mobile-nav i { position: absolute; top: 1px; left: calc(50% + 8px); min-width: 16px; padding: 1px 4px; border-radius: 9px; color: white; background: var(--red); font-size: 9px; font-style: normal; }
.mobile-form { display: grid; gap: 12px; padding: 0; }
.mobile-form label, .mobile-dialog-body label { color: var(--ink); font-size: 13px; font-weight: 700; }
.mobile-form input, .mobile-form select, .mobile-form textarea, .mobile-dialog-body input, .mobile-dialog-body select, .mobile-dialog-body textarea { font-size: 16px; font-weight: 400; }
.mobile-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mobile-field-group { display: grid; gap: 7px; }
.mobile-field-title { color: var(--ink); font-size: 13px; font-weight: 700; }
.mobile-segment { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.mobile-segment label { display: block; }
.mobile-segment input { position: absolute; opacity: 0; pointer-events: none; }
.mobile-segment span { display: flex; align-items: center; justify-content: center; min-height: 44px; border: 1px solid var(--line); border-radius: 5px; background: white; color: var(--muted); font-size: 15px; font-weight: 700; }
.mobile-segment input:checked + span { border-color: var(--green); background: var(--green); color: white; }
.mobile-panel { padding: 12px; border-radius: 7px; }
.mobile-primary, .mobile-secondary, .mobile-action, .owner-choice { min-height: 44px; border-radius: 5px; font-weight: 700; }
.mobile-primary { width: 100%; border: 0; color: white; background: var(--green); }
.mobile-secondary { width: 100%; margin-top: 8px; border: 1px solid #9bc7b5; color: var(--green); background: white; }
.mobile-success, .mobile-empty { padding: 24px 14px; border: 1px solid var(--line); border-radius: 7px; text-align: center; background: white; }
.mobile-success strong { color: var(--green); font-size: 20px; }
.mobile-search { position: sticky; top: 80px; z-index: 4; margin-bottom: 10px; }
.mobile-search input { box-shadow: 0 2px 10px #17212b18; font-size: 16px; }
.mobile-dialog { width: min(560px, calc(100% - 18px)); max-height: 92vh; border-radius: 7px; }
.mobile-dialog-body { padding: 16px; }
.owner-list { display: grid; gap: 8px; }
.owner-choice { display: flex; align-items: center; justify-content: space-between; padding: 11px; border: 1px solid var(--line); background: white; }
.owner-choice span { color: var(--muted); font-size: 12px; }
.owner-choice.active { border-color: var(--green); color: var(--green); background: var(--green-soft); }
.mobile-detail-status { display: flex; gap: 6px; margin-bottom: 10px; }
.mobile-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.mobile-detail-grid div, .mobile-detail-grid label { padding: 9px; background: var(--bg); }
.mobile-detail-grid span { display: block; color: var(--muted); font-size: 11px; }
.mobile-detail-grid input { width: 100%; margin-top: 4px; padding: 0; border: 0; background: transparent; color: var(--ink); font-size: 18px; font-weight: 800; }
.mobile-detail-grid a { color: var(--green); font-weight: 700; text-decoration: none; }
.mobile-action-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin: 14px 0; }
.mobile-action { display: flex; align-items: center; justify-content: center; border: 1px solid var(--line); color: var(--ink); background: white; text-align: center; text-decoration: none; }
.mobile-action.primary { color: white; border-color: var(--green); background: var(--green); }
.mobile-section-title { margin: 18px 0 8px; }
.mobile-timeline { border-left: 2px solid var(--line); padding-left: 12px; }
.mobile-timeline > div { margin: 0 0 12px; }
.mobile-timeline p { margin: 3px 0; }
.mobile-timeline span { color: var(--muted); font-size: 11px; }
.mobile-photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 8px 0; }
.mobile-photo-grid img { width: 100%; aspect-ratio: 1; border: 1px solid var(--line); border-radius: 4px; object-fit: cover; }
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; margin: 10px 0 14px; }
.photo-grid img { width: 100%; aspect-ratio: 1; border: 1px solid var(--line); border-radius: 5px; object-fit: cover; background: white; }
.mobile-check { display: flex !important; grid-template-columns: auto 1fr; align-items: center; gap: 8px; margin: 12px 0; }
.mobile-check input { width: 18px; height: 18px; }

.site-footer {
  margin: 18px auto 78px;
  padding: 12px 16px;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}

.site-footer a {
  color: var(--muted);
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--green);
  text-decoration: underline;
}

.mobile-page .site-footer {
  max-width: 620px;
  margin: 4px auto 76px;
}

.report-page .site-footer {
  margin-bottom: 28px;
}

@media (max-width: 380px) {
  .mobile-form-grid, .mobile-detail-grid, .mobile-action-grid { grid-template-columns: 1fr; }
}

/* dock_fit_mobile_20260807 */
.bottom-nav {
  justify-content: stretch;
  gap: 0;
  overflow-x: hidden;
  padding: 6px 2px calc(6px + env(safe-area-inset-bottom));
}

.nav-item {
  flex: 1 1 20%;
  min-width: 0;
  max-width: none;
  padding: 5px 1px;
  font-size: 12px;
  line-height: 1.15;
  white-space: nowrap;
}

.nav-item span {
  margin-bottom: 1px;
  font-size: 17px;
}

.nav-item i {
  top: 1px;
  right: 14%;
}

@media (max-width: 390px) {
  .nav-item {
    font-size: 11px;
  }

  .nav-item span {
    font-size: 16px;
  }
}