.recall-page { min-height: 100vh; background: radial-gradient(circle at 85% 12%, #fff0e9 0, transparent 32%), linear-gradient(160deg, #f8fbfd, #f7f3f2); color: #254157; }
.recall-page .customer-header { border-bottom-color: #f0e5e5; }
.recall-page .customer-header a { color: #415c70; }
.recall-page .customer-header a[aria-current] { color: #c81738; font-weight: 700; }
.recall-page .customer-main { max-width: 640px; margin-top: clamp(48px, 10vh, 110px); padding: 34px 28px; border: 1px solid #f1e4e3; border-radius: 22px; background: rgba(255,255,255,.92); box-shadow: 0 22px 60px rgba(71, 92, 111, .08); }
.recall-page .customer-main::before { content: "车主服务  /  RECALL SERVICE"; display: inline-block; margin-bottom: 20px; color: #bf2844; font-size: 11px; font-weight: 700; letter-spacing: .14em; }
.recall-page .customer-main h1 { color: #264359; }
.recall-page .customer-lead { color: #657e90; }
.recall-page .customer-status { color: #658094; }
.recall-page .customer-status[data-error="true"] { color: #b31e39; }
.recall-page .customer-main .customer-button { margin-top: 12px; background: linear-gradient(110deg, #d4002c, #ed344c); border-radius: 10px; box-shadow: 0 8px 18px rgba(212, 0, 44, .16); }
.recall-page .customer-footer { color: #8195a2; }

.recall-dialog { width: min(480px, calc(100% - 24px)); max-height: calc(100dvh - 24px); padding: 0; border: 1px solid #f5dfe2; border-radius: 18px; background: #fff; color: #2e4b60; box-shadow: 0 24px 70px rgba(28, 48, 66, .23); }
.recall-dialog::backdrop { background: rgba(36, 53, 68, .57); backdrop-filter: blur(3px); }
.recall-dialog-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px 17px; border-bottom: 1px solid #f0e8e8; background: linear-gradient(105deg, #fff, #fff7f7); }
.recall-eyebrow { display: block; margin-bottom: 4px; color: #c34056; font-size: 10px; font-weight: 700; letter-spacing: .16em; }
.recall-dialog h2 { margin: 0; color: #254157; font-size: 17px; font-weight: 700; }
.recall-close { display: grid; place-items: center; flex: none; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: #f4edf0; color: #986574; font: inherit; font-size: 24px; line-height: 1; cursor: pointer; }
.recall-close:hover, .recall-close:focus-visible { background: #ffe1e7; color: #b51a37; }
.recall-dialog-body { padding: 0 24px 22px; }
.recall-state { display: flex; align-items: center; gap: 10px; padding: 20px 0 17px; border-bottom: 1px solid #f0e8e8; color: #c91c3c; font-size: 17px; font-weight: 700; }
.recall-state::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 5px #fff0f2; }
.recall-fields { display: grid; gap: 0; margin: 12px 0 18px; }
.recall-fields > div { display: grid; grid-template-columns: 104px minmax(0, 1fr); align-items: baseline; gap: 10px; padding: 6px 2px; }
.recall-fields dt { color: #7890a0; font-size: 13px; }
.recall-fields dd { margin: 0; color: #37576c; font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.recall-fields #recallStateDetail { color: #c91c3c; }
.recall-explanation { padding: 15px 17px; border: 1px solid #f8dfe4; border-left: 3px solid #dc415a; border-radius: 12px; background: linear-gradient(135deg, #fff4f5, #fff8f7); }
.recall-explanation h3 { margin: 0 0 8px; color: #ab2845; font-size: 13px; }
.recall-explanation p { margin: 0; color: #a4485a; font-size: 12px; line-height: 1.8; }
.recall-contact.customer-button { display: flex; justify-content: center; gap: 8px; width: 100%; box-sizing: border-box; margin-top: 20px; border-radius: 9px; background: linear-gradient(110deg, #d9002e, #ed2444); box-shadow: 0 7px 16px rgba(217, 0, 46, .16); font-weight: 700; }
.recall-contact span { font-size: 17px; line-height: 1; }
.recall-dialog[data-state="not_affected"] .recall-state, .recall-dialog[data-state="not_affected"] #recallStateDetail { color: #188769; }
.recall-dialog[data-state="not_affected"] .recall-state::before { box-shadow: 0 0 0 5px #e8f7f0; }
.recall-dialog[data-state="completed"] .recall-state, .recall-dialog[data-state="completed"] #recallStateDetail { color: #307bbb; }
.recall-dialog[data-state="completed"] .recall-state::before { box-shadow: 0 0 0 5px #ebf4ff; }
.recall-dialog[data-state="unknown"] .recall-state, .recall-dialog[data-state="unknown"] #recallStateDetail { color: #a87125; }
.recall-dialog[data-state="unknown"] .recall-state::before { box-shadow: 0 0 0 5px #fff3de; }
@media (max-width: 560px) {
  .recall-page .customer-main { margin: 30px 16px; padding: 28px 20px; }
  .recall-dialog-header { padding: 17px 18px 14px; }
  .recall-dialog-body { padding: 0 18px 18px; }
  .recall-fields > div { grid-template-columns: 90px minmax(0, 1fr); padding: 5px 0; }
  .recall-explanation { padding: 12px 13px; }
}