:root {
  font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  color: #1c253c; background: #f5f7fc; font-synthesis: none; line-height: 1.65;
  color-scheme: light; --accent: #5056d8; --accent-dark: #3e43b8;
  --muted: #65718a; --line: #e6eaf3; --green: #167b65;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 24px; }
body { margin: 0; min-height: 100vh; }
button, input, textarea { font: inherit; letter-spacing: 0; }
button, a, input, summary { -webkit-tap-highlight-color: transparent; }
button, a, summary { touch-action: manipulation; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
svg { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
button:focus-visible, a:focus-visible, summary:focus-visible { outline: 3px solid #989cf0; outline-offset: 4px; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .45; }
h1, h2, h3, p { margin: 0; }
h2 { font-size: 19px; line-height: 1.45; font-weight: 700; }
h3 { font-size: 15px; line-height: 1.5; font-weight: 650; }
[hidden] { display: none !important; }
.skip-link { position: fixed; top: -60px; left: 16px; padding: 10px 16px; background: #fff; border: 1px solid var(--accent); border-radius: 8px; z-index: 10; }
.skip-link:focus { top: 10px; }
.topbar { background: #fff; border-bottom: 1px solid #e7eaf4; }
.topbar-inner { max-width: 1160px; margin: auto; padding: 0 32px; height: 76px; display: flex; align-items: center; gap: 40px; }
.brand { display: flex; align-items: center; gap: 11px; font-size: 18px; font-weight: 700; white-space: nowrap; }
.topnav { display: flex; gap: 28px; margin-left: auto; align-items: center; }
.topnav a { font-size: 13px; color: #606d87; white-space: nowrap; }
.topnav a:hover { color: var(--accent); }
.topbar-label { display: flex; align-items: center; gap: 7px; white-space: nowrap; font-size: 11px; color: #65718a; padding-left: 26px; border-left: 1px solid var(--line); }
.topbar-label > span { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
main { max-width: 1160px; margin: auto; padding: 0 32px; }
.hero { padding: 47px 0 32px; }
.eyebrow { font-size: 10px; letter-spacing: 1.6px; font-weight: 700; color: var(--accent); display: flex; align-items: center; gap: 8px; }
.eyebrow-line { width: 22px; height: 2px; background: var(--accent); }
h1 { margin-top: 15px; font-size: 42px; line-height: 1.3; letter-spacing: -1px; font-weight: 750; }
h1 > span { color: var(--accent); }
.hero-description { margin-top: 15px; font-size: 14px; line-height: 1.9; color: var(--muted); }
.mobile-break { display: none; }
.service-notes { display: flex; flex-wrap: wrap; gap: 25px; margin-top: 21px; }
.service-notes > span { display: flex; align-items: center; gap: 7px; font-size: 11px; color: #65718a; }
.service-notes svg { height: 16px; width: 16px; color: var(--accent); }
.workspace { display: grid; grid-template-columns: minmax(0, 1fr) 322px; gap: 24px; align-items: start; }
.panel { background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 8px 30px #34375d04; overflow: hidden; }
.panel-heading { padding: 26px 30px 23px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.panel-heading p { font-size: 12px; color: var(--muted); margin-top: 5px; }
.panel-tag { font-size: 10px; padding: 5px 10px; background: #f0f1fc; color: #5d63bd; border-radius: 6px; white-space: nowrap; }
.steps { list-style: none; margin: 0; padding: 23px 30px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; border-top: 1px solid #eef0f7; border-bottom: 1px solid #eef0f7; background: #fafbff; }
.steps li { min-width: 0; display: flex; align-items: center; gap: 10px; position: relative; color: #69758d; }
.steps li:not(:last-child)::after { content: ""; position: absolute; height: 1px; width: 18px; right: -8px; background: #e3e7f1; }
.step-number { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: #f0f2f7; color: #748099; border: 1px solid #e3e7f1; font-size: 12px; font-weight: 650; flex: 0 0 32px; }
.step-copy { display: grid; gap: 1px; min-width: 0; }
.step-copy strong { font-size: 12px; font-weight: 600; white-space: nowrap; }
.step-copy small { font-size: 10px; white-space: nowrap; font-weight: 400; color: #727e95; }
.steps .active { color: var(--accent); }
.active .step-number { color: #fff; background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 4px #ebedfc; }
.active .step-copy small { color: #6269ad; }
.steps .complete { color: #6268a7; }
.complete .step-number { color: var(--accent); background: #eceefc; border-color: #e5e7fb; }
form { padding: 28px 30px 29px; }
.form-intro { display: flex; align-items: center; gap: 10px; margin-bottom: 23px; }
.section-index { font-size: 10px; font-weight: 700; color: #687099; background: #f1f2fa; border: 1px solid #e8eaf4; padding: 2px 6px; border-radius: 4px; letter-spacing: .5px; }
label { display: block; margin-bottom: 9px; font-size: 13px; font-weight: 600; color: #48516c; }
.code-row { display: grid; grid-template-columns: minmax(0, 1fr) 110px; gap: 10px; align-items: stretch; }
.code-input { position: relative; min-width: 0; }
input[type=password], input[type=text], textarea { width: 100%; min-width: 0; border: 1px solid #dce1ed; border-radius: 8px; background: #fff; color: #26304b; outline: none; padding: 13px 14px; font-size: 13px; line-height: 1.65; transition: border-color .15s, box-shadow .15s; height: 48px; }
input:focus, textarea:focus { border-color: #757ce2; box-shadow: 0 0 0 3px #5056d810; }
input::placeholder, textarea::placeholder { color: #77829a; font-size: 12px; }
#code { padding-right: 54px; letter-spacing: .2px; }
.reveal-code { position: absolute; top: 1px; right: 5px; height: 46px; border: 0; background: transparent; color: #6c7790; font-size: 11px; padding: 0 9px; }
.reveal-code:hover { color: var(--accent); }
.primary, .secondary { min-height: 44px; border-radius: 8px; border: 1px solid transparent; padding: 11px 16px; display: inline-flex; justify-content: center; align-items: center; text-align: center; font-size: 13px; font-weight: 600; line-height: 1.6; transition: background .15s; }
.primary { background: var(--accent); color: #fff; }
.primary:hover:not(:disabled) { background: var(--accent-dark); }
.secondary { background: #fff; color: #5f6794; border-color: #dce1ed; }
.secondary:hover:not(:disabled) { background: #f7f8fd; }
.field-hint { font-size: 12px; line-height: 1.85; color: #6a7690; margin-top: 11px; }
.card-summary { display: flex; align-items: center; gap: 12px; padding: 17px 16px; margin-top: 22px; background: #f5f6fd; border: 1px solid #e9eafa; border-radius: 10px; min-width: 0; }
.plan-icon { display: grid; place-items: center; width: 38px; height: 40px; border: 1px solid #e4e6f9; border-radius: 8px; background: #fff; color: #7076cd; flex: 0 0 38px; }
.plan-icon svg { height: 21px; width: 21px; }
.plan-copy { flex: 1; min-width: 0; }
.field-caption { display: block; font-size: 10px; color: #6e7894; margin-bottom: 2px; }
#plan-label { font-size: 14px; overflow-wrap: anywhere; color: #343d68; }
.card-status { font-size: 10px; color: var(--green); background: #e8f5ee; padding: 4px 8px; border-radius: 5px; white-space: nowrap; flex: 0 0 auto; }
.card-status.pending { color: #565fbd; background: #e9ecfc; }
.card-status.review { color: #8b6326; background: #fff1da; }
.session-section { margin-top: 27px; padding-top: 25px; border-top: 1px solid var(--line); }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 20px; }
.section-heading .form-intro { margin-bottom: 0; }
.section-heading a { font-size: 11px; white-space: nowrap; }
.inline-help { margin-top: 13px; padding: 11px 13px; background: #fafbfe; border: 1px solid #edf0f7; border-radius: 8px; font-size: 12px; color: #66728c; }
.inline-help summary { color: #6269b6; cursor: pointer; font-size: 11px; list-style: none; }
.inline-help summary::before { content: "+"; margin-right: 7px; font-size: 14px; line-height: 1; }
.inline-help[open] summary::before { content: "−"; }
.inline-help ol { margin: 12px 0 0; padding-left: 17px; display: grid; gap: 7px; line-height: 1.9; }
.inline-help p { margin-top: 10px; }
.caption { font-size: 12px; line-height: 1.9; color: #6e7a91; margin-top: 12px; }
.privacy-note { display: flex; align-items: flex-start; gap: 6px; }
.privacy-note svg { width: 13px; height: 13px; margin-top: 4px; color: #7682a2; }
.input-feedback { font-size: 12px; line-height: 1.8; color: #a05240; margin-top: 8px; overflow-wrap: anywhere; }
.account-summary { display: flex; gap: 11px; align-items: flex-start; padding: 17px 14px; background: #f6faf8; border: 1px solid #e2eee7; border-radius: 9px; }
.account-check { color: #218b6e; font-size: 13px; display: grid; place-items: center; width: 22px; height: 22px; background: #e4f4ea; border-radius: 50%; flex: 0 0 22px; }
.account-summary dl { margin: 0; flex: 1; min-width: 0; grid-template-columns: 57px minmax(0, 1fr); gap: 8px 10px; font-size: 12px; }
.account-summary dt { color: #647f70; }
.account-summary dd { color: #425d50; font-weight: 500; }
.session-token-section { margin-top: 21px; }
.session-token-section .inline-help { margin-top: 12px; }
.inline-help code, .faq-list code { font-size: .94em; overflow-wrap: anywhere; }
.text-button { padding: 0; border: 0; background: transparent; color: var(--accent); font-size: 11px; white-space: nowrap; margin-top: 2px; }
.text-button:hover { text-decoration: underline; }
#submit { width: 100%; margin-top: 23px; min-height: 48px; }
.consent-note { font-size: 10px; text-align: center; line-height: 1.8; margin-top: 10px; color: #6e7991; }
.result { margin-top: 24px; border: 1px solid #e4e7f5; border-radius: 10px; padding: 20px; background: #fafbff; }
.result[data-tone=success] { border-color: #dbece3; background: #f6fbf8; }
.result[data-tone=review] { border-color: #eee4d4; background: #fdfaf5; }
.result-title { display: flex; align-items: center; gap: 9px; }
.result-title h3 { font-size: 15px; }
.status-dot { width: 9px; height: 9px; border-radius: 50%; background: #6e76d2; flex: 0 0 9px; box-shadow: 0 0 0 4px #e9ecfb; }
.status-dot.success { background: #1e906b; box-shadow: 0 0 0 4px #e3f3e9; }
.status-dot.error { background: #b58a49; box-shadow: 0 0 0 4px #f7eddd; }
#message { margin-top: 11px; font-size: 12px; line-height: 1.9; color: #69768f; overflow-wrap: anywhere; }
.failure-reason { color: #8f6836; font-size: 12px; margin-top: 9px; overflow-wrap: anywhere; }
.processing-indicator { height: 4px; border-radius: 5px; background: #e7eafa; overflow: hidden; margin-top: 17px; }
.processing-indicator > span { height: 100%; width: 35%; display: block; background: #8188df; border-radius: 5px; animation: progress-travel 2.4s ease-in-out infinite; }
@keyframes progress-travel { 0% { transform: translateX(-105%); } 100% { transform: translateX(390%); } }
dl { display: grid; grid-template-columns: 65px minmax(0, 1fr); font-size: 11px; gap: 8px 12px; margin: 17px 0 0; }
dl:empty { display: none; } dt { color: #6e7b94; } dd { margin: 0; color: #5e6a84; overflow-wrap: anywhere; }
.result-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.result-actions .primary, .result-actions .secondary { margin-top: 18px; min-height: 38px; padding: 8px 12px; font-size: 11px; }
.query-time { font-size: 10px; color: #758098; margin-top: 10px; }
.tool-footer { padding: 15px 25px; background: #fcfcfe; border-top: 1px solid #edf0f6; display: flex; align-items: center; justify-content: center; gap: 7px; color: #6b7691; }
.tool-footer svg { width: 14px; height: 14px; color: #727cba; }
.redemption-policy { font-size: 10px; text-align: center; line-height: 1.8; }
.help-column { min-width: 0; }
.guide { padding: 25px 23px; }
.guide-heading { display: flex; align-items: center; gap: 12px; }
.guide-symbol { display: grid; place-items: center; width: 39px; height: 41px; background: #f1f2fd; border-radius: 9px; color: #7d83d4; flex: 0 0 39px; }
.guide-symbol svg { width: 20px; height: 20px; }
.guide-heading .eyebrow { font-size: 8px; letter-spacing: 1.1px; color: #6e79a0; margin-bottom: 4px; }
.guide-heading h2 { font-size: 16px; }
.guide-steps { list-style: none; margin: 25px 0 0; padding: 0; display: grid; gap: 22px; }
.guide-steps li { display: flex; align-items: flex-start; gap: 12px; position: relative; }
.guide-steps li:not(:last-child)::after { content: ""; position: absolute; left: 10px; top: 29px; bottom: -15px; width: 1px; background: #e9ecf5; }
.guide-number { height: 22px; width: 22px; border-radius: 50%; border: 1px solid #e2e6f5; color: #65709a; display: grid; place-items: center; font-size: 10px; flex: 0 0 22px; background: #fcfcff; }
.guide-steps h3 { font-size: 13px; line-height: 1.8; color: #505b77; font-weight: 600; }
.guide-steps p { font-size: 13px; line-height: 1.95; color: #6b7790; margin-top: 6px; }
.guide-link { font-size: 12px; line-height: 1.8; display: inline-block; margin-top: 10px; }
.copy-tip { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; margin-top: 12px; color: #717c96; font-size: 10px; }
.copy-tip > span:first-child { flex-basis: 100%; margin-bottom: 2px; }
kbd { font-family: inherit; font-size: 10px; border: 1px solid #e1e5ef; border-radius: 3px; background: #f8f9fc; color: #6b7690; padding: 0 4px; }
.guide-reminder { margin-top: 25px; padding: 13px 14px; background: #f8f9fd; border: 1px solid #edf0f8; border-radius: 8px; }
.guide-reminder strong { font-size: 11px; color: #626e90; font-weight: 600; }
.guide-reminder p { font-size: 11px; color: #6d7891; line-height: 1.9; margin-top: 5px; }
.before-start { padding: 23px 23px 0; }
.before-start h2 { font-size: 12px; color: #65718b; font-weight: 600; }
.before-start ul { margin: 11px 0 0; padding-left: 14px; display: grid; gap: 9px; font-size: 11px; line-height: 1.9; color: #69768f; }
.before-start li::marker { color: #a7b0c8; }
.faq { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 40px; margin: 48px 0 52px; padding-top: 30px; border-top: 1px solid #e2e6f1; }
.faq-heading .eyebrow { font-size: 9px; letter-spacing: 1.1px; color: #717da2; }
.faq-heading h2 { font-size: 23px; margin-top: 9px; }
.faq-heading > p:last-child { font-size: 12px; color: #6a7790; line-height: 1.9; margin-top: 11px; max-width: 225px; }
.faq-list { border-top: 1px solid #e4e8f2; }
.faq-list details { border-bottom: 1px solid #e4e8f2; padding: 16px 0; }
.faq-list summary { cursor: pointer; list-style: none; font-size: 14px; color: #56637f; padding-right: 28px; position: relative; font-weight: 500; }
.faq-list summary::-webkit-details-marker, .inline-help summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; position: absolute; right: 2px; top: -2px; font-size: 18px; color: #737f9d; font-weight: 400; }
.faq-list details[open] summary::after { content: "−"; }
.faq-list details p { font-size: 13px; color: #69768f; line-height: 2; margin-top: 12px; max-width: 95%; }
footer { max-width: 1096px; margin: 0 auto 27px; display: flex; justify-content: space-between; gap: 18px; border-top: 1px solid #e2e6f0; padding-top: 20px; color: #6f7c95; font-size: 10px; }
@media (min-width:1450px) { .hero { padding-top: 58px; padding-bottom: 36px; } h1 { font-size: 46px; } }
@media (max-width:1000px) {
  .topbar-inner { gap: 22px; } .topbar-label { display: none; }
  .workspace { grid-template-columns: minmax(0,1fr) 286px; gap: 20px; }
  .panel-heading { padding: 24px; } .steps { padding: 23px 24px; gap: 12px; }
  .step-copy small { display: none; } .steps li:not(:last-child)::after { width: 10px; right: -6px; }
  form { padding: 25px 24px; } .guide { padding: 23px 20px; } .guide-heading h2 { font-size: 14px; }
  .before-start { padding-left: 20px; padding-right: 20px; } .section-heading { flex-wrap: wrap; gap: 9px; }
  .faq { grid-template-columns: 230px minmax(0,1fr); gap: 30px; } footer { margin-left: 32px; margin-right: 32px; }
}
@media (max-width:800px) {
  .topbar-inner { height: 68px; padding: 0 24px; } .brand { font-size: 16px; } .topnav { gap: 20px; } .topnav a { font-size: 11px; }
  main { padding: 0 24px; } .hero { padding: 38px 0 29px; } h1 { font-size: 36px; } .workspace { grid-template-columns: 1fr; }
  .steps { padding: 23px 30px; gap: 20px; } .step-copy small { display: block; } .steps li:not(:last-child)::after { width: 25px; right: 0; }
  .panel-heading { padding: 25px 30px; } form { padding: 27px 30px; }
  .help-column { display: grid; grid-template-columns: minmax(0,1fr) 220px; gap: 22px; } .guide { padding: 25px; }
  .guide-heading h2 { font-size: 16px; } .guide-steps { gap: 20px; } .before-start { padding: 23px 8px 0; }
  .faq { margin-top: 36px; grid-template-columns: 190px minmax(0,1fr); gap: 22px; } .faq-heading h2 { font-size: 21px; }
  footer { margin-left: 24px; margin-right: 24px; }
}
@media (max-width:560px) {
  html { scroll-padding-top: 16px; } .topbar-inner { height: 64px; padding: 0 20px; gap: 15px; }
  .brand { font-size: 15px; gap: 9px; } .brand img { width: 30px; height: 30px; } .topnav { gap: 15px; }
  .topnav a { font-size: 11px; } .topnav a:first-child { display: none; }
  main { padding: 0 18px; } .hero { padding: 31px 2px 25px; } .eyebrow { font-size: 8px; letter-spacing: 1.3px; }
  h1 { font-size: 31px; letter-spacing: -.5px; margin-top: 14px; } .hero-description { font-size: 13px; line-height: 1.95; margin-top: 13px; }
  .mobile-break { display: block; } .service-notes { gap: 14px; margin-top: 18px; } .service-notes > span { font-size: 10px; gap: 4px; }
  .service-notes svg { width: 13px; height: 13px; } .workspace { gap: 18px; } .panel { border-radius: 13px; }
  .panel-heading { padding: 22px 20px 20px; } .panel-heading h2 { font-size: 17px; } .panel-heading p { font-size: 11px; margin-top: 5px; }
  .panel-tag { font-size: 10px; padding: 4px 8px; } .steps { padding: 22px 20px; gap: 12px; } .steps li { gap: 7px; }
  .step-number { width: 27px; height: 27px; flex-basis: 27px; font-size: 11px; } .step-copy strong { font-size: 11px; } .step-copy small { font-size: 9px; }
  .steps li:not(:last-child)::after { width: 7px; right: -4px; } form { padding: 24px 20px; } .form-intro { margin-bottom: 20px; gap: 8px; }
  .form-intro h3 { font-size: 14px; } .section-index { font-size: 9px; padding: 1px 5px; } .code-row { grid-template-columns: 1fr; gap: 10px; }
  .code-row .primary { min-height: 44px; font-size: 13px; } input[type=password], input[type=text] { font-size: 16px; height: 48px; }
  input::placeholder { font-size: 13px; } .field-hint { font-size: 12px; line-height: 1.9; } .card-summary { padding: 14px 12px; gap: 9px; }
  .plan-icon { width: 32px; height: 35px; flex-basis: 32px; } .plan-icon svg { width: 18px; height: 18px; }
  .field-caption { font-size: 10px; } #plan-label { font-size: 13px; } .card-status { font-size: 10px; padding: 3px 6px; }
  .section-heading { gap: 10px; } .section-heading a { font-size: 11px; } .session-section { margin-top: 22px; padding-top: 23px; }
  .caption { font-size: 12px; } .inline-help { font-size: 13px; } .inline-help summary { font-size: 12px; }
  .account-summary { flex-wrap: wrap; gap: 10px; padding: 14px 12px; } .account-summary dl { font-size: 12px; grid-template-columns: 52px minmax(0,1fr); gap: 7px 9px; }
  .account-summary .text-button { margin-left: 32px; font-size: 11px; } .account-check { height: 21px; width: 21px; flex-basis: 21px; }
  .consent-note { font-size: 10px; } .result { padding: 17px 15px; } .result-title h3 { font-size: 14px; }
  #message { font-size: 12px; } .result dl { font-size: 11px; } .query-time { font-size: 10px; }
  .tool-footer { padding: 14px 18px; gap: 6px; } .redemption-policy { font-size: 10px; } .tool-footer svg { height: 13px; width: 13px; }
  .help-column { display: block; } .guide { padding: 23px 21px; } .guide-heading h2 { font-size: 15px; }
  .guide-steps h3 { font-size: 13px; } .guide-steps p { font-size: 13px; } .guide-reminder p { font-size: 12px; }
  .before-start { padding: 20px 20px 0; } .before-start ul { font-size: 11px; gap: 6px; }
  .faq { display: block; margin: 31px 0 34px; padding-top: 25px; } .faq-heading { margin-bottom: 22px; }
  .faq-heading .eyebrow { font-size: 8px; } .faq-heading h2 { font-size: 21px; margin-top: 7px; }
  .faq-heading > p:last-child { font-size: 11px; max-width: none; margin-top: 7px; }
  .faq-list details { padding: 15px 0; } .faq-list summary { font-size: 13px; } .faq-list details p { font-size: 13px; max-width: 100%; }
  footer { margin: 0 18px 22px; padding-top: 17px; font-size: 10px; flex-direction: column; gap: 5px; text-align: center; }
}
@media (max-width:360px) {
  .topbar-inner { padding: 0 16px; } .topnav { gap: 12px; } .topnav a { font-size: 10px; } .brand { font-size: 14px; }
  main { padding: 0 14px; } h1 { font-size: 28px; } .service-notes { gap: 10px; } .service-notes > span { font-size: 9px; }
  .panel-heading { padding: 20px 16px; } .steps { padding: 20px 16px; gap: 8px; } .steps li { gap: 6px; }
  .step-copy small { display: none; } .steps li:not(:last-child)::after { display: none; } form { padding: 22px 16px; }
  .plan-icon { display: none; } .section-heading { align-items: flex-start; } .guide { padding: 22px 18px; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; }
  .processing-indicator > span { width: 100%; opacity: .5; }
}