:root {
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
  color: #18332e;
  background: #f5f8f7;
  font-synthesis: none;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { background: #f5f8f7; }
[hidden] { display: none !important; }
button, input { font: inherit; }

.appeal-page {
  --primary: #087b67;
  --primary-soft: #e9f6f2;
  --ink: #18332e;
  --muted: #70827e;
  min-height: 100vh;
  overflow-x: hidden;
  background: linear-gradient(180deg, #e7f5f1 0, #f5f8f7 280px, #f5f8f7 100%);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

.appeal-hero {
  position: relative;
  min-height: 226px;
  overflow: hidden;
  background: linear-gradient(135deg, #076e5f 0%, #0a8e74 58%, #36aa8d 100%);
  color: #fff;
}

.appeal-hero::after {
  content: "";
  position: absolute;
  left: -5%;
  right: -5%;
  bottom: -46px;
  height: 82px;
  border-radius: 50% 50% 0 0;
  background: #f5f8f7;
}

.appeal-hero__inner {
  position: relative;
  z-index: 2;
  width: min(680px, calc(100% - 40px));
  margin: 0 auto;
  padding: 44px 0 62px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.appeal-mark {
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 12px 30px rgba(0, 64, 52, 0.2);
  backdrop-filter: blur(8px);
  font-size: 26px;
  font-weight: 800;
}

.appeal-eyebrow { margin: 0 0 6px; color: rgba(255, 255, 255, 0.8); font-size: 12px; letter-spacing: 3px; }
.appeal-hero h1 { margin: 0; font-size: clamp(23px, 6vw, 32px); line-height: 1.25; letter-spacing: 1px; }
.appeal-subtitle { margin: 9px 0 0; color: rgba(255, 255, 255, 0.82); font-size: 13px; }
.appeal-hero__orb { position: absolute; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 50%; }
.appeal-hero__orb--one { width: 190px; height: 190px; right: -65px; top: -85px; }
.appeal-hero__orb--two { width: 110px; height: 110px; left: -55px; bottom: -5px; }

.appeal-main {
  position: relative;
  z-index: 3;
  width: min(680px, calc(100% - 28px));
  margin: -34px auto 0;
  padding-bottom: 28px;
}

.appeal-search-card,
.appeal-card,
.appeal-latest-card,
.appeal-empty {
  border: 1px solid rgba(16, 80, 69, 0.08);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 9px 30px rgba(30, 70, 62, 0.08);
}

.appeal-search-card { padding: 20px; }
.appeal-search-card label { display: block; margin-bottom: 10px; font-size: 14px; font-weight: 700; }
.appeal-search-row { display: flex; gap: 10px; }
.appeal-input-wrap { position: relative; flex: 1; min-width: 0; }
.appeal-input-wrap span { position: absolute; left: 14px; top: 50%; transform: translateY(-52%); color: #829994; font-size: 24px; }
.appeal-input-wrap input {
  width: 100%;
  height: 48px;
  padding: 0 13px 0 42px;
  border: 1px solid #d7e4e0;
  border-radius: 12px;
  outline: none;
  background: #f8fbfa;
  color: var(--ink);
  font-size: 16px;
  transition: 0.2s;
}

.appeal-input-wrap input:focus { border-color: #42a48f; background: #fff; box-shadow: 0 0 0 4px rgba(8, 123, 103, 0.09); }
.appeal-input-wrap input::placeholder { color: #a4b3b0; }
.appeal-search-row button {
  min-width: 108px;
  height: 48px;
  padding: 0 20px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--primary), #169a7f);
  box-shadow: 0 7px 16px rgba(8, 123, 103, 0.22);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}

.appeal-search-row button:disabled { opacity: 0.72; cursor: wait; }
.appeal-search-tip { margin: 10px 1px 0; color: #899995; font-size: 11px; line-height: 1.6; }
.appeal-error { margin-top: 13px; padding: 11px 13px; border-radius: 10px; background: #fff1ef; color: #b84235; font-size: 13px; }
.appeal-spinner { width: 20px; height: 20px; display: inline-block; border: 2px solid rgba(255, 255, 255, 0.4); border-top-color: #fff; border-radius: 50%; animation: appeal-spin 0.8s linear infinite; }

.appeal-empty { margin-top: 16px; padding: 32px 20px 28px; text-align: center; }
.appeal-empty__icon { width: 54px; height: 54px; margin: 0 auto 14px; display: grid; place-items: center; border-radius: 50%; background: var(--primary-soft); color: var(--primary); font-size: 25px; font-weight: 800; }
.appeal-empty h2 { margin: 0; font-size: 18px; }
.appeal-empty p { max-width: 430px; margin: 8px auto 24px; color: var(--muted); font-size: 13px; line-height: 1.7; }
.appeal-empty__steps { display: flex; align-items: center; justify-content: center; color: #66807a; font-size: 11px; }
.appeal-empty__steps i { width: 25px; height: 1px; margin: 0 5px; background: #c5d9d4; }

.appeal-results { display: grid; gap: 14px; margin-top: 15px; }
.appeal-status-card { overflow: hidden; border-radius: 18px; color: #fff; box-shadow: 0 10px 28px rgba(16, 95, 80, 0.15); }
.appeal-status-card--processing { background: linear-gradient(135deg, #087b67, #27a186); }
.appeal-status-card--waiting { background: linear-gradient(135deg, #b47718, #d49b34); }
.appeal-status-card--finished { background: linear-gradient(135deg, #236f54, #4b9677); }
.appeal-status-card--rejected { background: linear-gradient(135deg, #a1433d, #c86155); }
.appeal-status-card__top { padding: 20px 20px 18px; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.appeal-status-card__top p { margin: 0 0 5px; color: rgba(255, 255, 255, 0.76); font-size: 12px; }
.appeal-status-card__top h2 { margin: 0; font-size: 25px; letter-spacing: 1px; }
.appeal-status-badge { padding: 6px 10px; border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 999px; background: rgba(255, 255, 255, 0.12); font-size: 11px; white-space: nowrap; }
.appeal-duration { padding: 14px 20px 16px; display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 4px 14px; background: rgba(0, 45, 37, 0.15); }
.appeal-duration span { color: rgba(255, 255, 255, 0.72); font-size: 12px; }
.appeal-duration strong { font-size: clamp(17px, 5vw, 22px); text-align: right; }
.appeal-duration small { grid-column: 1 / -1; color: rgba(255, 255, 255, 0.66); font-size: 10px; text-align: right; }

.appeal-card { padding: 20px; }
.appeal-card__title { display: flex; align-items: center; gap: 9px; margin-bottom: 17px; }
.appeal-card__title-icon { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; background: var(--primary-soft); color: var(--primary); font-size: 13px; font-weight: 800; }
.appeal-card__title h2 { margin: 0; font-size: 17px; }
.appeal-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px 18px; margin: 0; }
.appeal-info-grid div { min-width: 0; }
.appeal-info-grid__wide { grid-column: 1 / -1; padding-top: 14px; border-top: 1px dashed #e4ecea; }
.appeal-info-grid dt { margin-bottom: 5px; color: #879792; font-size: 11px; }
.appeal-info-grid dd { margin: 0; color: #29433e; font-size: 13px; line-height: 1.7; overflow-wrap: anywhere; }
.appeal-info-grid audio { width: 100%; height: 38px; }

.appeal-latest-card { position: relative; padding: 22px 20px 18px; border-left: 4px solid var(--primary); }
.appeal-latest-card__label { margin-bottom: 10px; color: var(--primary); font-size: 12px; font-weight: 700; }
.appeal-latest-card p { margin: 0; color: #2a4640; font-size: 14px; line-height: 1.85; }
.appeal-latest-card > div:last-child { margin-top: 13px; display: flex; justify-content: space-between; gap: 10px; color: #899a96; font-size: 11px; }

.appeal-timeline-card { padding-bottom: 8px; }
.appeal-timeline { margin: 0; padding: 0; list-style: none; }
.appeal-timeline li { position: relative; display: grid; grid-template-columns: 25px 1fr; gap: 12px; min-height: 102px; }
.appeal-timeline li:last-child { min-height: 82px; }
.appeal-timeline__rail { position: relative; display: flex; justify-content: center; }
.appeal-timeline__rail::after { content: ""; position: absolute; top: 20px; bottom: 0; width: 2px; background: #dce9e5; }
.appeal-timeline li:last-child .appeal-timeline__rail::after { display: none; }
.appeal-timeline__rail span { position: relative; z-index: 1; width: 18px; height: 18px; display: grid; place-items: center; border: 4px solid #c8dcd6; border-radius: 50%; background: #fff; color: #fff; font-size: 10px; }
.appeal-timeline li.is-latest .appeal-timeline__rail span { border: 0; background: var(--primary); box-shadow: 0 0 0 5px var(--primary-soft); }
.appeal-timeline__content { padding: 0 0 22px; }
.appeal-timeline__heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.appeal-timeline__heading strong { color: #42615a; font-size: 14px; }
.appeal-timeline li.is-latest .appeal-timeline__heading strong { color: var(--primary); }
.appeal-timeline__heading time { color: #93a29e; font-size: 10px; white-space: nowrap; }
.appeal-timeline__content p { margin: 0 0 6px; color: #5c706b; font-size: 13px; line-height: 1.7; }
.appeal-timeline__content small { color: #98a6a3; font-size: 10px; }
.appeal-footer { padding: 4px 20px max(24px, env(safe-area-inset-bottom)); color: #94a49f; font-size: 11px; text-align: center; }

@keyframes appeal-spin { to { transform: rotate(360deg); } }

@media (max-width: 520px) {
  .appeal-hero { min-height: 214px; }
  .appeal-hero__inner { width: calc(100% - 32px); padding-top: 36px; align-items: flex-start; }
  .appeal-mark { width: 48px; height: 48px; flex-basis: 48px; border-radius: 15px; font-size: 22px; }
  .appeal-subtitle { font-size: 12px; line-height: 1.55; }
  .appeal-main { width: calc(100% - 24px); }
  .appeal-search-card, .appeal-card { padding: 17px; }
  .appeal-search-row { display: grid; grid-template-columns: 1fr; }
  .appeal-search-row button { width: 100%; }
  .appeal-empty__steps { font-size: 10px; }
  .appeal-empty__steps i { width: 10px; margin: 0 3px; }
  .appeal-status-card__top { padding: 18px; }
  .appeal-info-grid { grid-template-columns: 1fr; }
  .appeal-info-grid__wide { grid-column: auto; }
  .appeal-info-grid div:nth-child(n + 2) { padding-top: 12px; border-top: 1px dashed #e4ecea; }
  .appeal-timeline__heading { display: block; }
  .appeal-timeline__heading time { display: block; margin-top: 3px; }
}

@media (prefers-reduced-motion: reduce) {
  .appeal-spinner { animation: none; }
}