/*
 * 高格客户服务门户 V5｜品牌棕金色系
 * 品牌依据：檀香 #5B2E18、木色 #CC885A、卡其 #F7E3C9
 * 釉色 #83996A 仅保留在必要的完成状态提示中。
 */
:root {
  --ink: #3a2118;
  --green: #73452f;
  --sage: #c4a182;
  --mist: #f7eee4;
  --line: #e5d6c7;
  --gold: #cc885a;
  --muted: #7e7067;
}

body {
  background: #eadfd3;
  color: var(--ink);
}

.phone-shell {
  background: #fcf8f2;
}

.hero {
  background:
    linear-gradient(105deg, #281811ed, #5b2e18da 62%, #9b623fbd),
    url("./assets/service-hero.jpg") center/cover;
}

.hero h1 em,
.hero-card .call-action,
.hero-card strong {
  color: #f0c99d;
}

.hero-card {
  background: #fff8ee1c;
  border-color: #f7e3c950;
}

.pulse {
  background: #dca665;
  box-shadow: 0 0 0 5px #dca66538;
}

.primary-button,
.history-intro button,
.track-search button {
  background: linear-gradient(135deg, #5b2e18, #3a2118);
  color: #fff;
}

.secondary-button,
.history-link,
.ticket,
input,
select,
textarea {
  border-color: var(--line);
  background: #fffdf9;
}

.secondary-button .icon,
.complaint-entry .icon,
.history-empty span {
  color: #a66b43;
}

.secondary-button i,
.history-link i {
  color: #ad9786;
}

.progress-link,
.demo-entry button {
  color: #6f4732;
}

.history-icon,
.camera,
.photo-trigger .camera,
.service-assurance article > span {
  background: #f6e6d6;
  color: #9b603c;
}

.history-intro,
.demo-entry,
.notice-card,
.contact-service,
.staff-card,
.service-path {
  background: #f6eee5;
}

.photo-trigger {
  border-color: #cfb49e;
  background: #fffaf4;
}

.photo-preview span,
.toast {
  background: #3a2118;
}

.form-safety,
.emergency-link {
  background: #fbefe5;
  border-color: #bd7651;
  color: #72452f;
}

.form-safety a,
.emergency-link b {
  color: #6a3823;
}

.service-assurance {
  border-color: #eadccf;
  color: #705b4e;
}

.service-assurance > p {
  color: #5b3725;
}

.service-assurance small,
.service-note,
.home-contact {
  color: #88796f;
}

.global-contact,
.staff-head {
  background: linear-gradient(135deg, #3a2118, #24140f);
}

.global-contact p {
  color: #ead8c8;
}

.global-contact span {
  color: #cdb8a7;
}

.global-contact a {
  border-color: #f7e3c934;
}

.language-toggle {
  border-color: #e8c48c;
  background: linear-gradient(135deg, #e2b96f, #cc885a);
  color: #3a2118;
  box-shadow: 0 7px 18px #28181138;
}

.subhead {
  background: #fcf8f2;
  border-color: var(--line);
}

.check {
  background: #f3dfca;
  color: #6c3e28;
}

.success-wrap .eyebrow {
  color: #9b603c;
}

.ticket button {
  background: #f3e2d1;
  color: #6c3e28;
}

.tag,
.history-status {
  background: #f0e3d5;
  color: #70432d;
}

.timeline-item:not(:last-child)::before {
  background: #e5d7c9;
}

.dot {
  background: #c2a58d;
  box-shadow: 0 0 0 1px #c2a58d;
}

.timeline-item:first-child .dot {
  background: #8b5335;
  box-shadow: 0 0 0 1px #8b5335;
}

.staff-card {
  border-left-color: #cc885a;
}

.staff-dashboard-link {
  border-color: #d8c0ab;
  background: #f7ede3;
  color: #6e412b;
}

.history-type {
  background: #f1e3d5;
  color: #75452e;
}

.history-type.complaint {
  background: #fff0e5;
  color: #995b38;
}

.history-item {
  border-color: var(--line);
  background: #fffdf9;
}

@media (hover: hover) {
  .hero-card:hover {
    background: #fff7e829;
    box-shadow: 0 12px 24px #28181135;
  }

  .primary-button:hover {
    box-shadow: 0 10px 22px #5b2e1838;
  }

  .secondary-button:hover,
  .history-link:hover {
    box-shadow: 0 8px 18px #5b2e1818;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .hero-card .pulse {
    animation: brown-service-pulse 2.1s infinite;
  }

  @keyframes brown-service-pulse {
    0%,
    100% {
      box-shadow: 0 0 0 5px #dca6652c;
    }
    50% {
      box-shadow: 0 0 0 9px #dca6650b;
    }
  }
}