:root {
  color-scheme: light;
  --page: #eff6ff;
  --page-end: #f7fbff;
  --card: rgba(255, 255, 255, .96);
  --text: #172033;
  --muted: #738096;
  --line: #dce6f2;
  --field: #fbfdff;
  --blue: #3d9af5;
  --blue-dark: #2585e5;
  --blue-soft: #eaf5ff;
  --green: #14aa75;
  --green-soft: #eafaf4;
  --red: #e25d66;
  --red-soft: #fff1f2;
  --manual-copy-font-family: KaiTi, "STKaiti", serif;
  --hero-brand-size: 17px;
  --hero-brand-weight: 900;
  --hero-brand-color: #4f756c;
  --hero-copy-size: 20px;
  --hero-copy-weight: 900;
  --hero-copy-color: #65766f;
  --assurance-text-size: 17px;
  --assurance-text-weight: 800;
  --assurance-text-color: #176bd0;
  --step-text-size: 18px;
  --step-text-weight: 900;
  --step-text-color: #8593a7;
  --card-step-size: 17px;
  --card-step-weight: 900;
  --card-step-color: #2585e5;
  --card-title-size: 38px;
  --card-title-weight: 700;
  --card-title-color: #172033;
  --card-copy-size: 18px;
  --card-copy-weight: 900;
  --card-copy-color: #738096;
  --field-label-size: 18px;
  --field-label-weight: 900;
  --field-label-color: #5d697c;
  --field-input-size: 22px;
  --field-input-weight: 900;
  --field-placeholder-color: #a7b2c0;
  --button-text-size: 18px;
  --button-text-weight: 750;
  --button-text-color: #ffffff;
  --verified-text-size: 20px;
  --verified-text-weight: 700;
  --verified-text-color: #49695e;
  --guide-text-size: 18px;
  --guide-text-weight: 900;
  --guide-text-color: #536d64;
  --renewal-text-size: 22px;
  --renewal-text-weight: 700;
  --renewal-text-color: #177b5a;
  --support-text-size: 20px;
  --support-text-weight: 700;
  --support-text-color: #2585e5;
  --help-title-size: 17px;
  --help-title-weight: 900;
  --help-title-color: #5c687a;
  --help-copy-size: 16px;
  --help-copy-weight: 900;
  --help-copy-color: #738096;
  --footer-text-size: 16px;
  --footer-text-weight: 900;
  --footer-text-color: #97a4b5;
  --shadow: 0 22px 56px rgba(70, 103, 140, .16), 0 3px 12px rgba(70, 103, 140, .08);
  font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
button, input, textarea { font: inherit; }
button { cursor: pointer; }
button, a { touch-action: manipulation; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
#tokenTitle:focus, #statusTitle:focus { outline: none; }

body.manual-body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  color: var(--text);
  background-color: var(--page);
  background-image:
    linear-gradient(rgba(71, 135, 124, .065) 1px, transparent 1px),
    linear-gradient(90deg, rgba(71, 135, 124, .065) 1px, transparent 1px),
    radial-gradient(circle at 15% 5%, rgba(119, 205, 188, .14), transparent 29%),
    radial-gradient(circle at 84% 34%, rgba(126, 190, 255, .12), transparent 35%),
    linear-gradient(135deg, #f2faf8, var(--page-end));
  background-size: 46px 46px, 46px 46px, auto, auto, auto;
  background-position: -1px -1px, -1px -1px, 0 0, 0 0, 0 0;
}

.manual-shell { width: min(820px, calc(100% - 36px)); margin: 0 auto; padding: 58px 0 46px; }
.manual-hero { text-align: left; }
.hero-brand { display: inline-flex; min-height: 34px; align-items: center; gap: 9px; margin-bottom: 15px; padding: 4px 11px 4px 5px; border: 1px solid rgba(43, 139, 117, .16); border-radius: 999px; color: var(--hero-brand-color); background: rgba(255, 255, 255, .66); box-shadow: 0 7px 20px rgba(67, 121, 111, .07); font-size: var(--hero-brand-size); font-weight: var(--hero-brand-weight); backdrop-filter: blur(10px); }
.hero-mark { display: block; width: 26px; height: 26px; border: 2px solid rgba(255, 255, 255, .92); border-radius: 9px; object-fit: cover; box-shadow: 0 4px 12px rgba(56, 112, 102, .16); }
.manual-hero h1 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .22em; margin: 0; font-size: clamp(39px, 6.2vw, 54px); font-weight: 950; line-height: 1.08; letter-spacing: -.052em; }
.hero-product { color: #101d29; text-shadow: -1.2px 1px 0 rgba(241, 144, 67, .72), 1.2px 0 0 rgba(16, 142, 133, .36); }
.hero-action { color: #07836d; text-shadow: -1px 1px 0 rgba(241, 159, 82, .45); }
.manual-hero p { margin: 14px 0 0; color: var(--hero-copy-color); font-size: var(--hero-copy-size); font-weight: var(--hero-copy-weight); line-height: 1.7; }
.hero-assurances { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.hero-assurances span { display: inline-flex; min-height: 38px; align-items: center; gap: 7px; padding: 0 16px; border: 1px solid rgba(93, 157, 203, .25); border-radius: 999px; color: var(--assurance-text-color); background: rgba(255, 255, 255, .78); box-shadow: 0 7px 20px rgba(62, 118, 153, .06); font-size: var(--assurance-text-size); font-weight: var(--assurance-text-weight); backdrop-filter: blur(10px); }
.hero-assurances svg { width: 17px; height: 17px; fill: none; stroke: #2484ee; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

.hero-brand,
.manual-hero p,
.hero-assurances span,
.step strong,
.card-step,
.card-heading h2,
.status-card h2,
.card-heading p,
.status-card > p,
.manual-form label,
.manual-form input,
.manual-form textarea,
.manual-primary,
.manual-secondary,
.help-strip strong,
.help-strip p,
.manual-footer { font-family: var(--manual-copy-font-family); }

.stepper { display: flex; align-items: center; width: min(590px, 100%); margin: 34px auto 22px; }
.stepper > i { height: 2px; flex: 1; margin: 0 10px; background: linear-gradient(#5bc69e, #5bc69e) left center / 0% 100% no-repeat #dbe7f4; transition: background-size .45s ease; }
.step { display: flex; align-items: center; gap: 8px; color: var(--step-text-color); white-space: nowrap; }
.step span { display: grid; width: 28px; height: 28px; place-items: center; border: 2px solid #d6e2ef; border-radius: 50%; background: #f7fbff; font-size: 12px; font-weight: 800; }
.step strong { font-size: var(--step-text-size); font-weight: var(--step-text-weight); }
.step.active { color: var(--blue-dark); }
.step.active span { border-color: var(--blue); color: #fff; background: var(--blue); box-shadow: 0 5px 16px rgba(61, 154, 245, .25); }
.step.complete { color: var(--green); }
.step.complete span { border-color: var(--green); color: #fff; background: var(--green); }
.stepper > i.complete { background-size: 100% 100%; }

.manual-card {
  padding: clamp(30px, 6vw, 54px);
  font-family: var(--manual-copy-font-family);
  border: 1px solid rgba(255, 255, 255, .86);
  border-radius: 23px;
  background: var(--card);
  box-shadow: var(--shadow);
  animation: panel-in .32s cubic-bezier(.22, .8, .36, 1);
}
@keyframes panel-in { from { opacity: 0; transform: translateY(12px); } }
.card-heading { margin-bottom: 24px; }
.card-step { display: inline-flex; align-items: center; min-height: 25px; padding: 0 10px; border-radius: 999px; color: var(--card-step-color); background: var(--blue-soft); font-size: var(--card-step-size); font-weight: var(--card-step-weight); }
.success-step { color: var(--green); background: var(--green-soft); }
.card-heading h2, .status-card h2 { margin: 10px 0 5px; color: var(--card-title-color); font-size: var(--card-title-size); font-weight: var(--card-title-weight); letter-spacing: -.025em; }
.card-heading p, .status-card > p { margin: 0; color: var(--card-copy-color); font-size: var(--card-copy-size); font-weight: var(--card-copy-weight); line-height: 1.7; }

.manual-form { display: grid; gap: 10px; }
.manual-form label { color: var(--field-label-color); font-size: var(--field-label-size); font-weight: var(--field-label-weight); }
.manual-form label em { color: var(--red); font-style: normal; }
.input-shell { position: relative; }
.input-shell svg { position: absolute; top: 50%; left: 15px; width: 20px; height: 20px; transform: translateY(-50%); fill: none; stroke: #a1adbd; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.manual-form input, .manual-form textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--text);
  background: var(--field);
  outline: none;
  font-size: var(--field-input-size);
  font-weight: var(--field-input-weight);
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.manual-form input { min-height: 50px; padding: 0 15px 0 45px; }
.manual-form textarea { min-height: 155px; padding: 14px 15px; line-height: 1.6; resize: vertical; }
.manual-form input::placeholder, .manual-form textarea::placeholder { color: var(--field-placeholder-color); opacity: 1; }
.manual-form input:focus, .manual-form textarea:focus { border-color: var(--blue); background: #fff; box-shadow: 0 0 0 4px rgba(61, 154, 245, .12); }
.manual-form input.invalid, .manual-form textarea.invalid { border-color: #ff8a91; box-shadow: 0 0 0 4px rgba(226, 93, 102, .08); }
.field-error { min-height: 18px; margin: -3px 0 0; color: #cf3a46; font-size: 13px; }
.field-shake { animation: field-shake .3s ease; }
@keyframes field-shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }

.manual-primary, .manual-secondary {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 18px;
  border-radius: 8px;
  font-size: var(--button-text-size);
  font-weight: var(--button-text-weight);
  transition: transform .16s ease, box-shadow .16s ease, opacity .16s ease;
}
.manual-primary { justify-self: start; border: 0; color: var(--button-text-color); background: linear-gradient(135deg, #4aa7ff, #318fe9); box-shadow: 0 8px 20px rgba(49, 143, 233, .2); }
.manual-primary svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) {
  .manual-primary:hover:not(:disabled), .manual-secondary:hover:not(:disabled) { transform: translateY(-1px); }
  .manual-primary:hover:not(:disabled) { box-shadow: 0 12px 24px rgba(49, 143, 233, .27); }
}
.manual-primary:active:not(:disabled), .manual-secondary:active:not(:disabled),
.support-copy-button:active, .session-link-row button:active, .session-link-row a:active,
.verified-key button:active, .theme-toggle:active { transform: scale(.97); }
.manual-primary:disabled, .manual-secondary:disabled { cursor: wait; opacity: .62; }
.manual-primary:disabled svg { display: none; }
.manual-primary:disabled::before { content: ""; width: 16px; height: 16px; flex: 0 0 auto; border: 2px solid rgba(255, 255, 255, .35); border-top-color: #fff; border-radius: 50%; animation: btn-spin .7s linear infinite; }
@keyframes btn-spin { to { transform: rotate(360deg); } }
.manual-secondary { border: 1px solid var(--line); color: #617086; background: #fff; }

.verified-key { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: -4px 0 22px; padding: 13px 15px; border: 1px solid #ccebdc; border-radius: 11px; color: var(--verified-text-color); background: #f3fcf8; font-family: var(--manual-copy-font-family); font-size: var(--verified-text-size); font-weight: var(--verified-text-weight); }
.verified-key span { display: block; margin-bottom: 3px; color: color-mix(in srgb, var(--verified-text-color) 72%, #809087); font-size: .85em; font-weight: inherit; }
.verified-key strong { color: var(--verified-text-color); font-family: inherit; font-size: 1em; font-weight: inherit; line-height: 1.4; word-break: break-all; }
.verified-key button { display: inline-flex; min-height: 38px; flex: 0 0 auto; align-items: center; padding: 0 12px; border: 1px solid #cde5da; border-radius: 9px; color: color-mix(in srgb, var(--verified-text-color) 25%, var(--blue-dark)); background: rgba(255, 255, 255, .7); font-family: inherit; font-size: .92em; font-weight: inherit; }
.credential-account { display: flex; align-items: center; gap: 13px; margin: 3px 0 2px; padding: 14px 15px; border: 1px solid #bfe7d7; border-radius: 11px; color: #49695e; background: linear-gradient(145deg, #effbf6, #f8fdfb); }
.credential-account svg { width: 24px; height: 24px; flex: 0 0 auto; fill: none; stroke: var(--green); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.credential-account > div { min-width: 0; }
.credential-account span { display: block; color: #5f7f73; font-size: 12px; font-weight: 750; }
.credential-account strong { display: block; margin-top: 3px; color: #167b59; font-size: 16px; line-height: 1.4; overflow-wrap: anywhere; }
.credential-account p { margin: 3px 0 0; color: #758d84; font-size: 12px; line-height: 1.6; }
.credential-account[data-state="warning"] { border-color: #f0d98a; color: #78631e; background: linear-gradient(145deg, #fffbea, #fffdf5); }
.credential-account[data-state="warning"] svg, .credential-account[data-state="warning"] strong { color: #a87f00; stroke: #c69a08; }
.credential-account[data-state="warning"] span, .credential-account[data-state="warning"] p { color: #897641; }
.retry-notice { margin: -8px 0 18px; padding: 11px 13px; border: 1px solid #ffd6d9; border-radius: 9px; color: #a64b53; background: var(--red-soft); font-size: 12px; line-height: 1.6; }
.status-reason { margin: -8px 0 18px; padding: 11px 13px; border: 1px solid #cbdff5; border-radius: 9px; color: #326bc8; background: #edf4ff; font-size: 12px; line-height: 1.6; }
.status-reason[data-tone="success"] { border-color: #bfe7d7; color: #177b5a; background: #effbf6; }
.status-reason[data-tone="failed"] { border-color: #ffd6d9; color: #a64b53; background: var(--red-soft); }

.token-guide { margin: 0 0 23px; padding: 17px 18px; border: 1px solid #bfe7d7; border-radius: 12px; color: var(--guide-text-color); background: linear-gradient(145deg, #f3fcf8, #f8fdfb); font-family: var(--manual-copy-font-family); font-size: var(--guide-text-size); font-weight: var(--guide-text-weight); }
.token-guide-title { display: flex; align-items: center; gap: 8px; }
.token-guide-title svg { width: 18px; height: 18px; fill: none; stroke: var(--green); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.token-guide-title h3 { margin: 0; color: var(--guide-text-color); font-size: 1.18em; font-weight: inherit; }
.token-guide ol { margin: 11px 0 0; padding-left: 22px; font-size: 1em; font-weight: inherit; line-height: 1.75; }
.token-guide li + li { margin-top: 4px; }
.token-guide strong { color: color-mix(in srgb, var(--guide-text-color) 82%, #173c31); font-weight: inherit; }
.token-guide li code { padding: 1px 4px; border-radius: 4px; color: #087e58; background: #e3f7ef; font: inherit; }
.session-link-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 7px; margin: 11px 0 2px; }
.session-link-row > code { display: flex; min-height: 38px; align-items: center; overflow: auto; padding: 0 11px; border: 1px solid #d6e6df; border-radius: 8px; color: #dcefe7; background: #17211d; white-space: nowrap; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 1em; font-weight: inherit; line-height: 1; }
.session-link-row button, .session-link-row a { display: inline-flex; min-height: 42px; align-items: center; justify-content: center; padding: 0 12px; border: 1px solid #cfe2da; border-radius: 8px; color: var(--guide-text-color); background: #fff; font-family: inherit; font-size: .92em; font-weight: inherit; text-decoration: none; white-space: nowrap; }
.session-link-row button:hover, .session-link-row a:hover { border-color: #83c9ae; color: #167a58; }
.token-guide-tip { margin: 11px 0 0; padding-top: 10px; border-top: 1px dashed #cae6db; color: color-mix(in srgb, var(--guide-text-color) 66%, #9aa7a2); font-size: .92em; font-weight: inherit; line-height: 1.6; }

.status-card { position: relative; overflow: hidden; isolation: isolate; text-align: center; }
.status-icon { display: grid; width: 64px; height: 64px; margin: 0 auto 18px; place-items: center; border-radius: 50%; color: #fff; background: linear-gradient(145deg, #4bdaa8, #12ab75); box-shadow: 0 12px 28px rgba(20, 170, 117, .24); font-size: 30px; font-weight: 800; animation: status-pop .4s cubic-bezier(.34, 1.4, .5, 1); }
@keyframes status-pop { from { opacity: 0; transform: scale(.4); } }
.status-card[data-tone="processing"] .status-icon { background: linear-gradient(145deg, #64b8ff, #318fe9); box-shadow: 0 12px 28px rgba(49, 143, 233, .24); animation: status-pop .4s cubic-bezier(.34, 1.4, .5, 1), icon-breathe 1.8s ease-in-out .5s infinite; }
@keyframes icon-breathe { 50% { transform: scale(1.06); } }
.status-card[data-tone="failed"] .status-icon { background: linear-gradient(145deg, #ff8d94, #df5962); box-shadow: 0 12px 28px rgba(223, 89, 98, .2); }
.status-queue { width: min(420px, 100%); margin: 23px auto 4px; padding: 21px 24px 18px; border: 1px solid #d6e2ef; border-radius: 18px; background: linear-gradient(155deg, #fbfdff, #f4f8fd); box-shadow: 0 4px 14px rgba(65, 94, 130, .08); text-align: center; }
.queue-caption { display: block; color: #8b98a9; font-size: 12px; font-weight: 750; }
.status-queue > strong { display: block; margin-top: 15px; font-size: 14px; }
.status-queue > em { display: block; margin-top: 3px; color: var(--blue-dark); font-size: 12px; font-style: normal; font-weight: 750; }
.queue-progress { position: relative; height: 6px; overflow: hidden; margin: 15px 0 13px; border-radius: 999px; background: #e4ebf3; }
.queue-progress i { position: absolute; inset: 0 auto 0 -28%; width: 28%; border-radius: inherit; background: linear-gradient(90deg, #65b9ff, #278cef); box-shadow: 0 0 12px rgba(39, 140, 239, .4); animation: queue-sweep 1.7s linear infinite; }
.queue-live-lines { display: grid; gap: 8px; padding-top: 12px; border-top: 1px solid #e5ebf2; text-align: left; }
.queue-live-lines p { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 0; color: #6f7c8e; font-size: 12px; }
.queue-live-lines p i { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: #25bf80; box-shadow: 0 0 0 4px rgba(37, 191, 128, .1); animation: live-pulse 1.15s ease-in-out infinite; }
.queue-live-lines p + p i { animation-delay: .45s; }
.queue-live-lines b { color: #526276; font-weight: 750; }
@keyframes queue-sweep { to { transform: translateX(457.15%); } }
@keyframes live-pulse { 0%, 100% { opacity: .35; transform: scale(.82); } 50% { opacity: 1; transform: scale(1); } }
.completion-info-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(230px, .65fr); gap: 12px; margin: -4px 0 18px; text-align: left; }
.renewal-estimate, .renewal-support { display: flex; min-width: 0; align-items: center; gap: 13px; padding: 14px 16px; border-radius: 12px; }
.renewal-estimate { border: 1px solid #bfe7d7; color: var(--renewal-text-color); background: linear-gradient(135deg, rgba(239, 252, 247, .96), rgba(247, 253, 255, .96)); font-family: var(--manual-copy-font-family); font-size: var(--renewal-text-size); font-weight: var(--renewal-text-weight); }
.renewal-support { border: 1px solid #cbdff5; color: var(--support-text-color); background: linear-gradient(135deg, rgba(244, 249, 255, .97), rgba(250, 252, 255, .97)); font-family: var(--manual-copy-font-family); font-size: var(--support-text-size); font-weight: var(--support-text-weight); }
.processing-support { width: min(420px, 100%); margin: -4px auto 18px; text-align: left; box-shadow: 0 4px 14px rgba(49, 143, 233, .07); transition: border-color .2s ease, background .2s ease, box-shadow .2s ease; }
.processing-support > div:last-child { min-width: 0; flex: 1; }
.processing-support[data-urgent="true"] { border-color: #f0c56f; background: linear-gradient(135deg, rgba(255, 250, 235, .98), rgba(255, 246, 224, .98)); box-shadow: 0 6px 16px rgba(218, 145, 25, .14); }
.processing-support[data-urgent="true"] .renewal-support-icon { background: linear-gradient(145deg, #ffbd55, #e18c19); box-shadow: 0 8px 20px rgba(225, 140, 25, .24); animation: support-attention 1.5s ease-in-out infinite; }
.processing-support[data-urgent="true"] span { color: #a96b08; }
.processing-support[data-urgent="true"] strong { color: #d57208; }
.processing-support[data-urgent="true"] p { color: #8c6b37; }
.support-copy-button { min-height: 38px; margin-top: 9px; padding: 0 14px; border: 1px solid #bcd9f5; border-radius: 7px; color: inherit; background: rgba(255, 255, 255, .9); font-family: inherit; font-size: .72em; font-weight: inherit; }
.support-copy-button:hover { border-color: #69aeea; color: #176fbe; background: #fff; }
.processing-support[data-urgent="true"] .support-copy-button { border-color: #e8ba62; color: #b66d05; }
@keyframes support-attention { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
.renewal-estimate-icon, .renewal-support-icon { display: grid; width: 42px; height: 42px; flex: 0 0 auto; place-items: center; border-radius: 12px; color: #fff; }
.renewal-estimate-icon { background: linear-gradient(145deg, #46d09e, #13aa75); box-shadow: 0 8px 18px rgba(20, 170, 117, .18); }
.renewal-support-icon { background: linear-gradient(145deg, #62b5ff, #2f8ee9); box-shadow: 0 8px 18px rgba(49, 143, 233, .18); }
.renewal-estimate-icon svg, .renewal-support-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.renewal-estimate span, .renewal-support span { display: block; font-size: .72em; font-weight: inherit; }
.renewal-estimate span { color: color-mix(in srgb, var(--renewal-text-color) 56%, #7f918a); }
.renewal-support span { color: color-mix(in srgb, var(--support-text-color) 42%, #8493a4); }
.renewal-estimate strong, .renewal-support strong { display: block; margin-top: 3px; font-size: 1.14em; font-weight: inherit; line-height: 1.35; }
.renewal-estimate strong { color: var(--renewal-text-color); }
.renewal-support strong { color: var(--support-text-color); }
.renewal-estimate p, .renewal-support p { margin: 3px 0 0; font-size: .72em; font-weight: inherit; line-height: 1.5; }
.renewal-estimate p { color: color-mix(in srgb, var(--renewal-text-color) 42%, #8a9792); }
.renewal-support p { color: color-mix(in srgb, var(--support-text-color) 34%, #929eaa); }
.xianyu-safety-card { display: flex; width: min(420px, 100%); align-items: center; gap: 13px; margin: 0 auto 18px; padding: 14px 16px; border: 1px solid #f2c6a8; border-radius: 12px; color: #754620; background: linear-gradient(135deg, #fff8f1, #fffdf9); box-shadow: 0 4px 14px rgba(187, 105, 39, .08); font-family: var(--manual-copy-font-family); font-size: var(--support-text-size); font-weight: var(--support-text-weight); text-align: left; }
.status-card[data-tone="success"] .xianyu-safety-card { width: 100%; }
.xianyu-safety-card > div:last-child { min-width: 0; flex: 1; }
.xianyu-safety-icon { display: grid; width: 42px; height: 42px; flex: 0 0 auto; place-items: center; border-radius: 12px; color: #fff; background: linear-gradient(145deg, #ff9d55, #e46e22); box-shadow: 0 8px 18px rgba(228, 110, 34, .2); font-size: 1em; font-weight: 850; }
.xianyu-safety-card strong { display: block; margin-top: 3px; color: #bd4f16; font-size: 1.14em; font-weight: inherit; line-height: 1.35; }
.xianyu-safety-card p { margin: 3px 0 0; color: #805b3b; font-size: .72em; font-weight: inherit; line-height: 1.5; }
.xianyu-safety-card b { color: #c85218; font-weight: 850; }
.xianyu-safety-card .support-copy-button { border-color: #ecc29e; color: #b5541b; }
.xianyu-safety-card .support-copy-button:hover { border-color: #df8b4d; color: #9f4010; }
.status-reason { margin: 0 0 18px; text-align: left; }
.status-actions { display: flex; align-items: stretch; justify-content: center; gap: 10px; }
.status-actions .manual-primary { justify-self: auto; }

.help-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 20px; }
.help-strip > div { display: flex; gap: 10px; padding: 15px; border: 1px solid rgba(206, 222, 239, .78); border-radius: 13px; background: rgba(255, 255, 255, .54); }
.help-strip > div > span { display: grid; width: 25px; height: 25px; flex: 0 0 auto; place-items: center; border-radius: 50%; color: var(--blue-dark); background: var(--blue-soft); font-size: 11px; font-weight: 800; }
.help-strip p { margin: 0; color: var(--help-copy-color); font-size: var(--help-copy-size); font-weight: var(--help-copy-weight); line-height: 1.55; }
.help-strip strong { display: block; margin-bottom: 2px; color: var(--help-title-color); font-size: var(--help-title-size); font-weight: var(--help-title-weight); }
.manual-footer { padding: 0 20px 30px; color: var(--footer-text-color); text-align: center; font-size: var(--footer-text-size); font-weight: var(--footer-text-weight); }

.manual-toasts { position: fixed; right: 20px; bottom: 20px; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); z-index: 50; display: grid; gap: 8px; }
.manual-toast { max-width: min(360px, calc(100vw - 40px)); padding: 12px 15px; border: 1px solid var(--line); border-radius: 10px; color: #58667a; background: #fff; box-shadow: 0 12px 34px rgba(62, 86, 114, .17); font-size: 12px; animation: toast-in .25s cubic-bezier(.22, .8, .36, 1), toast-out .3s ease 3.65s forwards; }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px) scale(.97); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(6px); } }
.copy-flash { animation: copy-flash .5s ease; }
@keyframes copy-flash { 30% { transform: scale(.94); } }
.manual-toast.success { border-color: #bfead7; color: #167b59; }
.manual-toast.error { border-color: #ffd0d4; color: #a8414a; }

.typography-editor-toggle { position: fixed; right: 18px; bottom: 18px; z-index: 120; min-height: 42px; padding: 0 16px; border: 1px solid rgba(37, 133, 229, .2); border-radius: 999px; color: #fff; background: linear-gradient(135deg, #43a3ff, #2585e5); box-shadow: 0 12px 30px rgba(37, 133, 229, .28); font: 750 13px/1 Inter, "Microsoft YaHei", sans-serif; }
.typography-editor-toggle:hover { transform: translateY(-1px); box-shadow: 0 15px 34px rgba(37, 133, 229, .34); }
.typography-editor { position: fixed; top: 14px; right: 14px; bottom: 70px; z-index: 121; width: min(350px, calc(100vw - 28px)); overflow: auto; padding: 17px; border: 1px solid rgba(188, 211, 232, .9); border-radius: 18px; color: #27364a; background: rgba(250, 253, 255, .96); box-shadow: 0 24px 70px rgba(42, 72, 104, .25); font: 400 12px/1.5 Inter, "Microsoft YaHei", sans-serif; backdrop-filter: blur(18px); }
.typography-editor-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding-bottom: 13px; border-bottom: 1px solid #e1eaf3; }
.typography-editor-header strong { display: block; font-size: 16px; }
.typography-editor-header p { margin: 3px 0 0; color: #7d8998; font-size: 11px; }
.typography-editor-close { width: 30px; height: 30px; flex: 0 0 auto; border: 1px solid #dae5ef; border-radius: 8px; color: #738196; background: #fff; font-size: 18px; line-height: 1; }
.typography-editor-global { display: grid; gap: 9px; padding: 14px 0; border-bottom: 1px solid #e1eaf3; }
.typography-editor-global label, .typography-control label { color: #5d6a7d; font-size: 11px; font-weight: 700; }
.typography-editor select, .typography-editor input[type="text"] { width: 100%; min-height: 36px; padding: 0 10px; border: 1px solid #d6e2ed; border-radius: 8px; color: #334258; background: #fff; outline: none; }
.typography-editor select:focus, .typography-editor input[type="text"]:focus { border-color: #5aaaf4; box-shadow: 0 0 0 3px rgba(61, 154, 245, .11); }
.typography-editor-groups { display: grid; gap: 10px; padding: 13px 0; }
.typography-control { padding: 11px; border: 1px solid #dde7f0; border-radius: 11px; background: rgba(255, 255, 255, .78); transition: border-color .16s ease, box-shadow .16s ease; }
.typography-control:hover, .typography-control:focus-within { border-color: #8bc3f4; box-shadow: 0 7px 18px rgba(61, 154, 245, .08); }
.typography-control h3 { margin: 0 0 9px; color: #34445a; font-size: 12px; }
.typography-control-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 54px; gap: 9px; align-items: end; }
.typography-control-field { display: grid; gap: 5px; }
.typography-range-row { display: flex; min-height: 26px; align-items: center; gap: 7px; }
.typography-range-row input[type="range"] { width: 100%; min-width: 0; accent-color: #318fe9; }
.typography-range-row output { width: 36px; flex: 0 0 auto; color: #317fc9; text-align: right; font-size: 10px; font-weight: 750; }
.typography-editor input[type="color"] { width: 100%; height: 30px; padding: 2px; border: 1px solid #d6e2ed; border-radius: 7px; background: #fff; cursor: pointer; }
.typography-editor-actions { position: sticky; bottom: -17px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 -17px -17px; padding: 13px 17px 17px; border-top: 1px solid #e1eaf3; background: rgba(250, 253, 255, .97); backdrop-filter: blur(14px); }
.typography-editor-actions button { min-height: 38px; border-radius: 8px; font: 750 11px/1 Inter, "Microsoft YaHei", sans-serif; }
.typography-copy { border: 0; color: #fff; background: #318fe9; }
.typography-reset { border: 1px solid #d7e2ed; color: #627086; background: #fff; }
.typography-editor-status { grid-column: 1 / -1; min-height: 16px; color: #23805f; text-align: center; font-size: 10px; }
.typography-preview-target { outline: 2px dashed rgba(49, 143, 233, .68) !important; outline-offset: 4px; border-radius: 4px; }

/* ===== 深浅色主题切换按钮 ===== */
.theme-toggle { position: fixed; top: 14px; right: 14px; z-index: 60; display: grid; width: 42px; height: 42px; padding: 0; place-items: center; border: 1px solid rgba(93, 157, 203, .28); border-radius: 50%; color: #33608f; background: rgba(255, 255, 255, .92); box-shadow: 0 8px 22px rgba(62, 118, 153, .14); transition: transform .16s ease, box-shadow .16s ease; }
@media (hover: hover) {
  .theme-toggle:hover { transform: translateY(-1px); box-shadow: 0 11px 26px rgba(62, 118, 153, .2); }
}
.theme-toggle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.theme-icon-sun { display: none; }
[data-theme="dark"] .theme-toggle .theme-icon-sun { display: block; }
[data-theme="dark"] .theme-toggle .theme-icon-moon { display: none; }
[data-theme="dark"] .theme-toggle { border-color: rgba(126, 166, 206, .26); color: #ffcf6e; background: rgba(15, 24, 39, .94); box-shadow: 0 8px 22px rgba(0, 0, 0, .42); }
@media (hover: hover) {
  [data-theme="dark"] .theme-toggle:hover { box-shadow: 0 11px 26px rgba(0, 0, 0, .5); }
}

/* ===== 深色主题 =====
   只做配色覆盖：不改任何布局、字号与文案。
   缺省（无 data-theme 或 data-theme="light"）保持原有亮色样式不变。 */
:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #0b131f;
  --page-end: #0e1826;
  --card: rgba(17, 26, 40, .94);
  --text: #e8eef8;
  --muted: #93a2b8;
  --line: #263850;
  --field: #0f1a2a;
  --blue: #4aa3ff;
  --blue-dark: #6cb4ff;
  --blue-soft: rgba(74, 163, 255, .16);
  --green: #2ec792;
  --green-soft: rgba(46, 199, 146, .16);
  --red: #ff8a93;
  --red-soft: rgba(255, 122, 132, .12);
  --hero-brand-color: #9fd4c4;
  --hero-copy-color: #a9bcb0;
  --assurance-text-color: #8ec2ff;
  --step-text-color: #6d7f96;
  --card-step-color: #79bcff;
  --card-title-color: #eaf1fb;
  --card-copy-color: #93a2b8;
  --field-label-color: #a6b4c8;
  --field-placeholder-color: #5c6c82;
  --verified-text-color: #8ed6bb;
  --guide-text-color: #a3cabb;
  --renewal-text-color: #57caa0;
  --support-text-color: #7db8f5;
  --help-title-color: #b7c4d6;
  --help-copy-color: #8b9ab0;
  --footer-text-color: #62738b;
  --shadow: 0 22px 56px rgba(0, 0, 0, .46), 0 3px 12px rgba(0, 0, 0, .3);
}

[data-theme="dark"] body.manual-body {
  background-image:
    linear-gradient(rgba(122, 168, 158, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(122, 168, 158, .05) 1px, transparent 1px),
    radial-gradient(circle at 15% 5%, rgba(52, 142, 124, .16), transparent 30%),
    radial-gradient(circle at 84% 34%, rgba(56, 118, 196, .13), transparent 36%),
    linear-gradient(135deg, #0d1723, var(--page-end));
}

[data-theme="dark"] .hero-brand { border-color: rgba(126, 214, 188, .18); background: rgba(15, 26, 38, .72); box-shadow: 0 7px 20px rgba(0, 0, 0, .3); }
[data-theme="dark"] .hero-mark { border-color: rgba(255, 255, 255, .26); box-shadow: 0 4px 12px rgba(0, 0, 0, .4); }
[data-theme="dark"] .hero-product { color: #f2f7ff; text-shadow: -1.2px 1px 0 rgba(255, 170, 96, .34), 1.2px 0 0 rgba(52, 208, 196, .26); }
[data-theme="dark"] .hero-action { color: #3fd0ac; text-shadow: -1px 1px 0 rgba(255, 170, 96, .24); }
[data-theme="dark"] .hero-assurances span { border-color: rgba(93, 157, 203, .3); background: rgba(15, 26, 38, .74); box-shadow: 0 7px 20px rgba(0, 0, 0, .26); }
[data-theme="dark"] .hero-assurances svg { stroke: #6fb2ff; }

[data-theme="dark"] .stepper > i { background: linear-gradient(#2c8a68, #2c8a68) left center / 0% 100% no-repeat #24344a; }
[data-theme="dark"] .stepper > i.complete { background-size: 100% 100%; }
[data-theme="dark"] .step span { border-color: #31445e; background: #101c2c; }
[data-theme="dark"] .step.active span { border-color: var(--blue); background: var(--blue); box-shadow: 0 5px 16px rgba(74, 163, 255, .3); }
[data-theme="dark"] .step.complete span { border-color: var(--green); background: var(--green); }

[data-theme="dark"] .manual-card { border-color: rgba(255, 255, 255, .07); }
[data-theme="dark"] .input-shell svg { stroke: #5f7189; }
[data-theme="dark"] .manual-form input:focus, [data-theme="dark"] .manual-form textarea:focus { background: #101d30; box-shadow: 0 0 0 4px rgba(74, 163, 255, .16); }
[data-theme="dark"] .manual-form input.invalid, [data-theme="dark"] .manual-form textarea.invalid { border-color: #a25560; box-shadow: 0 0 0 4px rgba(255, 122, 132, .1); }
[data-theme="dark"] .manual-primary { background: linear-gradient(135deg, #3f96ec, #2276cd); box-shadow: 0 8px 20px rgba(0, 0, 0, .34); }
@media (hover: hover) {
  [data-theme="dark"] .manual-primary:hover:not(:disabled) { box-shadow: 0 12px 24px rgba(0, 0, 0, .42); }
}
[data-theme="dark"] .manual-secondary { border-color: var(--line); color: #b9c6d9; background: #14202f; }

[data-theme="dark"] .verified-key { border-color: #23453a; background: rgba(46, 199, 146, .09); }
[data-theme="dark"] .verified-key button { border-color: #2b4c40; background: rgba(15, 26, 38, .6); }
[data-theme="dark"] .field-error { color: var(--red); }
[data-theme="dark"] .credential-account { border-color: #2b4c40; color: #9fcdb9; background: linear-gradient(145deg, #0f1e1a, #101a26); }
[data-theme="dark"] .credential-account svg { stroke: var(--green); }
[data-theme="dark"] .credential-account span { color: #7ea595; }
[data-theme="dark"] .credential-account strong { color: #4ad39f; }
[data-theme="dark"] .credential-account p { color: #7b968a; }
[data-theme="dark"] .credential-account[data-state="warning"] { border-color: #6b5a25; color: #d9c07a; background: linear-gradient(145deg, #221d0f, #1c1912); }
[data-theme="dark"] .credential-account[data-state="warning"] svg, [data-theme="dark"] .credential-account[data-state="warning"] strong { color: #e0b54a; stroke: #d3a729; }
[data-theme="dark"] .credential-account[data-state="warning"] span, [data-theme="dark"] .credential-account[data-state="warning"] p { color: #b3a172; }

[data-theme="dark"] .retry-notice { border-color: #5c333a; color: #ff9aa2; }
[data-theme="dark"] .status-reason { border-color: #2b4361; color: #8fb8f0; background: rgba(74, 163, 255, .1); }
[data-theme="dark"] .status-reason[data-tone="success"] { border-color: #2b5d4a; color: #52caa0; background: rgba(46, 199, 146, .1); }
[data-theme="dark"] .status-reason[data-tone="failed"] { border-color: #5c333a; color: #ff9aa2; background: var(--red-soft); }

[data-theme="dark"] .token-guide { border-color: #24463b; background: linear-gradient(145deg, #0f1e1a, #101a26); }
[data-theme="dark"] .token-guide li code { color: #52d6a5; background: rgba(46, 199, 146, .15); }
[data-theme="dark"] .session-link-row > code { border-color: #233830; }
[data-theme="dark"] .session-link-row button, [data-theme="dark"] .session-link-row a { border-color: #2c4a40; background: #101c2a; }
[data-theme="dark"] .session-link-row button:hover, [data-theme="dark"] .session-link-row a:hover { border-color: #3f8a6d; color: #52caa0; }
[data-theme="dark"] .token-guide-tip { border-top-color: #24463b; }

[data-theme="dark"] .status-queue { border-color: #26364c; background: linear-gradient(155deg, #101a29, #0d1622); box-shadow: 0 4px 14px rgba(0, 0, 0, .3); }
[data-theme="dark"] .queue-caption { color: #7488a0; }
[data-theme="dark"] .queue-progress { background: #1c2a3d; }
[data-theme="dark"] .queue-live-lines { border-top-color: #22334a; }
[data-theme="dark"] .queue-live-lines p { color: #8fa0b6; }
[data-theme="dark"] .queue-live-lines b { color: #c3d0e2; }

[data-theme="dark"] .renewal-estimate { border-color: #24463b; background: linear-gradient(135deg, rgba(15, 30, 26, .96), rgba(16, 26, 38, .96)); }
[data-theme="dark"] .renewal-support { border-color: #24405e; background: linear-gradient(135deg, rgba(15, 26, 41, .97), rgba(13, 22, 34, .97)); }
[data-theme="dark"] .processing-support { box-shadow: 0 4px 14px rgba(0, 0, 0, .26); }
[data-theme="dark"] .processing-support[data-urgent="true"] { border-color: #6b5122; background: linear-gradient(135deg, rgba(37, 29, 14, .98), rgba(30, 24, 12, .98)); box-shadow: 0 6px 16px rgba(0, 0, 0, .36); }
[data-theme="dark"] .processing-support[data-urgent="true"] span { color: #d9a53f; }
[data-theme="dark"] .processing-support[data-urgent="true"] strong { color: #f0b246; }
[data-theme="dark"] .processing-support[data-urgent="true"] p { color: #b39a6b; }
[data-theme="dark"] .support-copy-button { border-color: #2c4a68; background: rgba(16, 28, 42, .9); }
[data-theme="dark"] .support-copy-button:hover { border-color: #4f8ecb; color: #79bcff; background: #14243a; }
[data-theme="dark"] .processing-support[data-urgent="true"] .support-copy-button { border-color: #7a5c22; color: #dfa93f; background: rgba(37, 29, 14, .7); }

[data-theme="dark"] .xianyu-safety-card { border-color: #5c4126; color: #d8a97c; background: linear-gradient(135deg, #221709, #1c1410); box-shadow: 0 4px 14px rgba(0, 0, 0, .26); }
[data-theme="dark"] .xianyu-safety-card strong { color: #ff9a58; }
[data-theme="dark"] .xianyu-safety-card p { color: #b78d63; }
[data-theme="dark"] .xianyu-safety-card b { color: #ff8b45; }
[data-theme="dark"] .xianyu-safety-card .support-copy-button { border-color: #5c4126; color: #e09955; background: rgba(30, 21, 11, .9); }
[data-theme="dark"] .xianyu-safety-card .support-copy-button:hover { border-color: #a0642c; color: #ffb173; background: #241809; }

[data-theme="dark"] .help-strip > div { border-color: rgba(53, 73, 99, .6); background: rgba(15, 24, 38, .56); }

[data-theme="dark"] .manual-toast { color: #b7c4d6; background: #131e2e; box-shadow: 0 12px 34px rgba(0, 0, 0, .44); }
[data-theme="dark"] .manual-toast.success { border-color: #2b5d4a; color: #52caa0; }
[data-theme="dark"] .manual-toast.error { border-color: #5c333a; color: #ff9aa2; }

@media (max-width: 680px) {
  .manual-shell { width: min(100% - 22px, 820px); padding-top: 34px; }
  .theme-toggle { top: 10px; right: 10px; width: 38px; height: 38px; }
  .hero-brand { margin-bottom: 13px; }
  .manual-hero h1 { gap: 0 .18em; font-size: clamp(36px, 11vw, 45px); }
  .manual-hero p { max-width: 350px; margin-top: 11px; line-height: 1.7; }
  .hero-assurances { gap: 8px; margin-top: 17px; }
  .hero-assurances span { min-height: 34px; padding: 0 12px; font-size: var(--assurance-text-size); }
  .step strong { display: none; }
  .step.active strong { display: inline; font-size: 15px; }
  .stepper { width: min(340px, 100%); margin-top: 28px; }
  .manual-card { padding: 27px 20px; border-radius: 18px; }
  .card-heading h2, .status-card h2 { font-size: min(var(--card-title-size), 24px); }
  .manual-primary { width: 100%; justify-self: stretch; }
  .verified-key { align-items: flex-start; }
  .token-guide { padding: 15px; }
  .session-link-row { grid-template-columns: 1fr 1fr; }
  .session-link-row > code { grid-column: 1 / -1; }
  .status-queue { padding: 19px 16px 16px; }
  .queue-live-lines p { align-items: flex-start; justify-content: flex-start; }
  .completion-info-grid { grid-template-columns: 1fr; }
  .status-actions { flex-direction: column; }
  .help-strip { grid-template-columns: 1fr; }
  .manual-toasts { right: 50%; transform: translateX(50%); justify-items: center; }
  .typography-editor-toggle { right: 12px; bottom: 12px; }
  .typography-editor { top: 10px; right: 10px; bottom: 62px; width: calc(100vw - 20px); padding: 14px; }
  .typography-control-grid { grid-template-columns: 1fr 1fr 48px; }
  .typography-editor-actions { bottom: -14px; margin: 0 -14px -14px; padding: 12px 14px 14px; }
}

/* ===== 跟随系统"减少动画"偏好 =====
   按钮加载转圈是必要的状态反馈，保留；装饰性动画全部关闭。 */
@media (prefers-reduced-motion: reduce) {
  .manual-card,
  .status-icon,
  .status-card[data-tone="processing"] .status-icon,
  .manual-toast,
  .queue-progress i,
  .queue-live-lines p i,
  .processing-support[data-urgent="true"] .renewal-support-icon,
  .copy-flash,
  .field-shake { animation: none !important; }
  .queue-progress i { left: 0; width: 100%; }
  .stepper > i { transition: none; }
}