:root {
  color: #1d2736;
  background: #f4f6fa;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 14px;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: #f4f6fa; }
body { min-width: 320px; margin: 0; background: #f4f6fa; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .62; }

.app {
  min-height: 100vh;
  padding: 12px 12px calc(20px + env(safe-area-inset-bottom));
}

.loading-panel,
.empty-panel {
  min-height: 56vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #8491a7;
  text-align: center;
}

.loading-panel p { margin: 14px 0 0; }
.spinner {
  width: 28px;
  height: 28px;
  border: 3px solid #d7e7ff;
  border-top-color: #2f86eb;
  border-radius: 50%;
  animation: spin .75s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.environment-panel,
.error-panel {
  width: min(100%, 430px);
  margin: 0 auto;
  padding: 38px 26px;
}
.empty-panel h1 { margin: 17px 0 0; color: #273449; font-size: 19px; }
.empty-panel p { max-width: 390px; margin: 12px 0 22px; color: #7f8b9e; font-size: 13px; line-height: 1.75; }
.empty-icon {
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  color: #2f86eb;
  background: #e8f3ff;
  font-size: 24px;
  font-weight: 700;
}
.empty-icon.error { color: #d65a5a; background: #fff0f0; }

.customer-card,
.panel {
  border: 1px solid rgba(222, 229, 239, .76);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 3px 14px rgba(31, 45, 61, .045);
}

.customer-card { padding: 0 16px 16px; overflow: hidden; }
.brand-row {
  min-height: 38px;
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 -16px 15px;
  padding: 0 16px;
  border-bottom: 1px solid #eef2f6;
  color: #627087;
  font-size: 12px;
  font-weight: 500;
}
.brand-mark {
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  color: #fff;
  background: linear-gradient(135deg, #4a9ff2, #277cd9);
  font-size: 11px;
}
.member-pill {
  max-width: 110px;
  margin-left: auto;
  padding: 3px 7px;
  overflow: hidden;
  border-radius: 10px;
  color: #4e708f;
  background: #f0f6fb;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.customer-head { display: flex; align-items: center; gap: 12px; }
.avatar {
  width: 50px;
  height: 50px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 50%;
  color: #438be6;
  background: linear-gradient(135deg, #dbeaff, #ecf4ff);
  font-size: 19px;
  font-weight: 600;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.customer-main { min-width: 0; flex: 1; }
.customer-name {
  overflow: hidden;
  color: #1d2736;
  font-size: 17px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.customer-meta {
  margin-top: 5px;
  overflow: hidden;
  color: #8491a7;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.customer-status { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.status-badge {
  max-width: 76px;
  padding: 3px 8px;
  overflow: hidden;
  border-radius: 10px;
  color: #357dc8;
  background: #eaf4ff;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.status-badge.intention-high { color: #c75151; background: #fff0f0; }
.status-badge.intention-medium { color: #9b6e20; background: #fff5df; }
.status-badge.intention-low { color: #617287; background: #f0f3f6; }
.status-badge.stage-won { color: #2b8a67; background: #e9f8f2; }
.status-badge.stage-lost { color: #7c8796; background: #f0f2f5; }
.tag-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 13px; }
.tag { padding: 4px 8px; border-radius: 4px; color: #4276aa; background: #edf5ff; font-size: 12px; }

.tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 12px 0;
  padding: 3px;
  border: 1px solid #e8edf3;
  border-radius: 10px;
  background: #edf1f6;
}
.tab {
  min-width: 0;
  min-height: 38px;
  border: 0;
  border-radius: 7px;
  color: #6d7a90;
  background: transparent;
  font-weight: 500;
  white-space: nowrap;
}
.tab.active { color: #267fdc; background: #fff; box-shadow: 0 2px 8px rgba(50, 95, 145, .1); }

.panel { margin-bottom: 12px; padding: 16px; }
.section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
  color: #273449;
  font-size: 15px;
  font-weight: 600;
}
.section-title.compact { margin-bottom: 10px; font-size: 14px; }
.section-note { color: #98a2b2; font-size: 11px; font-weight: 400; text-align: right; }

.stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid #edf0f5;
  border-radius: 9px;
}
.stat-item { min-height: 72px; padding: 12px; border-right: 1px solid #edf0f5; border-bottom: 1px solid #edf0f5; }
.stat-item:nth-child(2n) { border-right: 0; }
.stat-item:last-child:nth-child(odd) { grid-column: 1 / -1; border-right: 0; border-bottom: 0; }
.stat-label { color: #8995a9; font-size: 12px; }
.stat-value { margin-top: 7px; color: #25334a; font-size: 19px; font-weight: 600; }
.stat-value.primary { color: #267fdc; }
.stat-value.refund { color: #c45a5a; }
.stat-value .unit { margin-left: 2px; color: #8995a9; font-size: 12px; font-weight: 400; }

.quick-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 13px; }
.primary-button,
.secondary-button {
  min-height: 38px;
  border-radius: 7px;
  padding: 0 15px;
  white-space: nowrap;
}
.primary-button { border: 0; color: #fff; background: #2f86eb; }
.primary-button:active { background: #2576d2; }
.secondary-button { border: 1px solid #bdd9f7; color: #2a7fd8; background: #eff7ff; }
.secondary-button:active { background: #e3f1ff; }
.text-button { border: 0; padding: 3px 0; color: #2b83dd; background: transparent; font-size: 12px; }

.detail-grid { display: grid; grid-template-columns: 1fr; margin: 0; }
.detail-item { display: flex; align-items: flex-start; gap: 14px; padding: 11px 0; border-bottom: 1px solid #f0f2f5; }
.detail-item:last-child { border-bottom: 0; padding-bottom: 0; }
.detail-item dt { flex: 0 0 82px; color: #7b8798; }
.detail-item dd { min-width: 0; flex: 1; margin: 0; color: #273449; text-align: right; word-break: break-word; white-space: pre-wrap; }
.muted { color: #a5afbd !important; }

.overview-pair { display: grid; grid-template-columns: 1fr; gap: 17px; }
.overview-block + .overview-block { padding-top: 15px; border-top: 1px solid #edf0f5; }
.compact-record { padding: 11px; border-radius: 8px; background: #f8fafc; }
.record-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: #52708f; font-size: 12px; }
.record-meta time { color: #9aa5b4; font-size: 11px; }
.record-content { margin-top: 8px; color: #48566b; line-height: 1.6; word-break: break-word; white-space: pre-wrap; }
.compact-empty { padding: 15px 8px !important; }

.message { margin: 0 0 12px; border-radius: 8px; padding: 11px 13px; font-size: 13px; line-height: 1.5; }
.message.error { color: #b74c4c; background: #fff0f0; }
.message.info { color: #52708e; background: #edf6ff; }
.message.success { color: #287a5f; background: #eaf8f2; }

.form-card { margin: 0; }
.form-grid { display: grid; grid-template-columns: 1fr; gap: 13px; }
.field { display: flex; flex-direction: column; gap: 7px; min-width: 0; color: #5f6d82; font-size: 12px; }
.field.full { margin-top: 13px; }
.field > span b { color: #df5959; font-weight: 500; }
.field input,
.field select,
.field textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid #dfe6ef;
  border-radius: 7px;
  outline: none;
  color: #25334a;
  background: #fbfcfe;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.field input,
.field select { height: 39px; padding: 0 10px; }
.field textarea { resize: vertical; min-height: 72px; padding: 9px 10px; line-height: 1.55; }
.field input:focus,
.field select:focus,
.field textarea:focus { border-color: #65a7ef; background: #fff; box-shadow: 0 0 0 3px rgba(69, 145, 227, .1); }
.field input:disabled,
.field select:disabled,
.field textarea:disabled { color: #8792a3; background: #f2f4f7; }
.field small { color: #9aa5b4; font-size: 11px; line-height: 1.5; }
.money-input { position: relative; }
.money-input > span { position: absolute; z-index: 1; left: 10px; top: 11px; color: #77859a; }
.money-input input { padding-left: 27px; }
.form-tip { margin: 12px 0 0; color: #8a96a7; font-size: 11px; line-height: 1.6; }
.submit-button { width: 100%; min-height: 42px; margin-top: 15px; font-weight: 500; }
.profile-form { padding-top: 2px; }
.form-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 15px; }
.form-actions .primary-button,
.form-actions .secondary-button { min-width: 112px; }

.timeline { margin-left: 4px; }
.timeline-item { position: relative; padding: 0 0 20px 20px; border-left: 1px solid #dfe7f1; }
.timeline-item:last-child { padding-bottom: 0; border-left-color: transparent; }
.timeline-dot { position: absolute; width: 9px; height: 9px; left: -5px; top: 4px; border-radius: 50%; background: #4b95e9; box-shadow: 0 0 0 4px #edf6ff; }
.record-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.record-head time { flex: none; color: #9da7b6; font-size: 11px; }
.record-badges { display: flex; flex-wrap: wrap; gap: 5px; }
.record-type,
.record-stage,
.record-intention { padding: 3px 7px; border-radius: 9px; color: #377fc7; background: #eaf4ff; font-size: 11px; }
.record-stage { color: #566f8a; background: #eff3f7; }
.record-intention.high { color: #bb4d4d; background: #fff0f0; }
.record-intention.medium { color: #966b21; background: #fff5df; }
.record-intention.low { color: #65758a; background: #eff2f5; }
.record-result { margin-top: 9px; border-radius: 7px; padding: 9px 10px; color: #637187; background: #f7f9fb; line-height: 1.55; word-break: break-word; white-space: pre-wrap; }
.record-result span { margin-right: 8px; color: #8794a5; font-size: 11px; }
.record-next { margin-top: 8px; color: #9a712c; font-size: 12px; }
.record-operator { margin-top: 7px; color: #a0a9b6; font-size: 11px; }

.consumption-list { display: flex; flex-direction: column; }
.consumption-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; padding: 14px 0; border-bottom: 1px solid #edf0f5; }
.consumption-item:first-child { padding-top: 0; }
.consumption-item:last-child { padding-bottom: 0; border-bottom: 0; }
.consumption-main { min-width: 0; }
.consumption-title { display: flex; align-items: center; gap: 7px; overflow: hidden; color: #2a3749; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.consumption-title .record-type { flex: none; }
.record-type.refund { color: #bd5151; background: #fff0f0; }
.consumption-meta { margin-top: 6px; overflow: hidden; color: #929dac; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.consumption-amount { align-self: center; color: #26825f; font-size: 15px; font-weight: 600; }
.consumption-amount.refund { color: #c25555; }
.consumption-extra { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 4px; border-radius: 7px; padding: 8px 10px; color: #8793a5; background: #f8fafc; font-size: 11px; line-height: 1.5; word-break: break-word; }

.reminder-list { display: flex; flex-direction: column; }
.reminder-item { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 13px 0; border-bottom: 1px solid #edf0f5; }
.reminder-item:first-child { padding-top: 0; }
.reminder-item:last-child { padding-bottom: 0; border-bottom: 0; }
.reminder-check { width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; border: 1px solid #a7c8ea; border-radius: 50%; color: #fff; font-size: 12px; }
.reminder-item.completed .reminder-check { border-color: #53ad8b; background: #53ad8b; }
.reminder-item.overdue .reminder-check { border-color: #e29b9b; }
.reminder-main { min-width: 0; }
.reminder-title { color: #293649; font-weight: 500; }
.reminder-content { margin-top: 4px; color: #7e8a9d; font-size: 12px; line-height: 1.5; word-break: break-word; }
.reminder-time { margin-top: 5px; color: #9ca6b4; font-size: 11px; }
.reminder-time.overdue { color: #c85b5b; }
.reminder-item.completed .reminder-title,
.reminder-item.completed .reminder-content { color: #a0a9b5; text-decoration: line-through; }
.complete-button { min-height: 31px; border: 1px solid #bcd8f4; border-radius: 6px; padding: 0 10px; color: #2c80d7; background: #eff7ff; font-size: 12px; }

.empty { padding: 28px 12px; color: #9aa4b4; text-align: center; line-height: 1.6; }

@media (min-width: 560px) {
  .app { max-width: 780px; margin: 0 auto; padding: 18px 18px 28px; }
  .customer-card { padding: 0 20px 20px; }
  .brand-row { margin-right: -20px; margin-left: -20px; padding: 0 20px; }
  .panel { padding: 20px; }
  .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 26px; }
  .detail-item:nth-last-child(-n+2) { border-bottom: 0; }
  .overview-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
  .overview-block + .overview-block { padding-top: 0; padding-left: 22px; border-top: 0; border-left: 1px solid #edf0f5; }
}

@media (min-width: 720px) {
  .stat-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .stat-item { border-bottom: 0; }
  .stat-item:nth-child(2n) { border-right: 1px solid #edf0f5; }
  .stat-item:last-child:nth-child(odd) { grid-column: auto; border-right: 0; }
  .quick-actions { width: 320px; margin-left: auto; }
}

@media (max-width: 374px) {
  .app { padding-right: 9px; padding-left: 9px; }
  .panel { padding: 14px 13px; }
  .customer-card { padding-right: 13px; padding-left: 13px; }
  .brand-row { margin-right: -13px; margin-left: -13px; padding: 0 13px; }
  .customer-status { display: none; }
  .section-note { max-width: 130px; }
  .reminder-item { grid-template-columns: 22px minmax(0, 1fr); }
  .complete-button { grid-column: 2; justify-self: start; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}