:root{--ink:#182c2b;--muted:#75817d;--green:#176b55;--green-dark:#115340;--line:#dfe6df;--surface:#fff;--paper:#f4f6ef;--soft:#edf3e9;--warning:#9a681f;--error:#ad3d35;font-family:Inter,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;color:var(--ink);background:var(--paper);font-synthesis:none}*{box-sizing:border-box}body{margin:0;min-width:0}button,input,textarea{font:inherit}button,a,input,textarea{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.55}button,a,input,textarea{outline-offset:4px}button:focus-visible,a:focus-visible{outline:3px solid #83b99d}input:focus,textarea:focus{outline:0;border-color:#6d9e85;box-shadow:0 0 0 3px #176b5510}[hidden]{display:none!important}a{color:inherit;text-decoration:none}.page{max-width:1168px;margin:auto;padding:0 40px}.channel-status{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--muted)}.status-dot{height:6px;width:6px;border-radius:50%;background:#a5ada8}.channel-status.ready .status-dot{background:#369866}.channel-status.unavailable .status-dot{background:#ba8853}.eyebrow{font-size:10px;font-weight:700;letter-spacing:.15em;color:var(--green)}h1{font-size:36px;line-height:1.45;letter-spacing:-.05em;font-weight:650;margin:13px 0 12px}h2,h3,p{margin-top:0}.mobile-break{display:none}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 294px;gap:24px;align-items:start}.main-card{background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:8px 32px 30px;box-shadow:0 8px 24px #18372603;min-width:0}.tabs{display:flex;gap:28px;border-bottom:1px solid var(--line);margin-bottom:26px}.tab{background:none;border:0;padding:22px 0 18px;color:var(--muted);font-size:14px;position:relative;font-weight:600}.tab.active{color:var(--green)}.tab.active:after{content:"";position:absolute;height:3px;border-radius:3px;bottom:-1px;left:0;right:0;background:var(--green)}.field{margin-bottom:22px}.field label{display:block;font-size:13px;font-weight:600;margin-bottom:10px}.field-heading{display:flex;align-items:center;justify-content:space-between;gap:8px}.field-meta{font-size:11px;color:var(--muted);margin-bottom:10px}input[type=text],textarea{width:100%;border:1px solid var(--line);border-radius:10px;background:#fbfcfa;color:var(--ink);padding:14px 15px;transition:border-color .15s,box-shadow .15s}input[type=text]{height:49px;font-size:13px}textarea{min-height:164px;resize:vertical;font-size:12px;line-height:1.8;font-family:ui-monospace,SFMono-Regular,Consolas,"Microsoft YaHei",monospace}input::placeholder,textarea::placeholder{color:#a0a9a2}input:read-only,textarea:read-only{color:#7c8881}.field-help{font-size:11px;color:var(--muted);line-height:1.65;margin:8px 0 0}.privacy-note{display:flex;align-items:flex-start;gap:10px;margin:-2px 0 22px;color:#77837a}.privacy-note>span{display:grid;place-items:center;flex:0 0 17px;height:17px;border:1px solid #a2b3a5;border-radius:50%;font-size:16px;line-height:1;margin-top:2px}.privacy-note p{font-size:13px;line-height:1.85;margin:0}.button{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:46px;padding:12px 18px;border:1px solid transparent;border-radius:10px;font-size:13px;font-weight:600;transition:background .15s}.button.primary{background:var(--green);color:white}.button.primary:not(:disabled):hover{background:var(--green-dark)}.button.secondary{border-color:var(--line);background:white;color:var(--muted)}.button.secondary:not(:disabled):hover{background:#f5f7f2}.button.full{width:100%}.button.full span{margin-left:auto;font-size:18px}.button.full{justify-content:flex-start;padding-left:18px}.under-button{text-align:center;font-size:10px;color:#99a29b;margin:11px 0 0;line-height:1.7}.side-card{background:#eaf0e3;border:1px solid #e0e7d9;border-radius:22px;padding:28px 24px}.aside-symbol{display:grid;place-items:center;width:40px;height:40px;border:1px solid #b7c9ab;border-radius:50%;color:var(--green);font-size:24px;margin-bottom:22px}.side-card h2{font-size:18px;line-height:1.5;margin-bottom:25px;font-weight:600}.guide{list-style:none;margin:0;padding:0}.guide li{display:flex;gap:14px;margin-bottom:26px}.guide li>span{font-size:11px;color:#79916b;padding-top:2px;font-variant-numeric:tabular-nums}.guide h3{font-size:14px;font-weight:600;margin-bottom:7px}.guide p{font-size:14px;line-height:1.85;color:#7a8772;margin:0}.aside-footer{border-top:1px solid #d2dec7;padding-top:20px}.aside-footer strong{font-size:13px;font-weight:600}.aside-footer p{font-size:14px;line-height:1.85;color:#7a8772;margin:7px 0 0}.site-footer{display:flex;justify-content:space-between;gap:16px;padding:30px 0 28px;color:#929b92;font-size:10px;line-height:1.7}.notice{padding:12px 14px;border-radius:9px;font-size:12px;line-height:1.8;background:#f2f5f0;color:var(--green);margin-bottom:22px;overflow-wrap:anywhere}.notice.error{background:#fff2ef;color:var(--error)}.notice.warning{background:#fff7e9;color:var(--warning)}.section-heading{display:flex;gap:12px;align-items:flex-start;margin:4px 0 22px}.check-mark{display:grid;place-items:center;flex:0 0 30px;height:30px;background:var(--soft);border-radius:50%;font-size:16px;color:var(--green)}.section-heading h2,.query-heading h2{font-size:18px;font-weight:600;margin:0 0 8px}.section-heading p,.query-heading p{font-size:12px;line-height:1.7;color:var(--muted);margin:0}.confirmation-info{background:#f6f8f3;border-radius:12px;padding:5px 18px;margin:0 0 22px}.confirmation-info>div{display:flex;gap:16px;justify-content:space-between;border-bottom:1px solid #e8ece5;padding:15px 0;font-size:12px;line-height:1.6}.confirmation-info>div:last-child{border:0}dt{color:var(--muted);flex-shrink:0}dd{margin:0;text-align:right;overflow-wrap:anywhere;min-width:0;font-weight:500}.consent{display:flex;gap:10px;align-items:flex-start;font-size:12px;line-height:1.8;color:#66736c;margin-bottom:23px;cursor:pointer}.consent input{width:16px;height:16px;flex:0 0 16px;accent-color:var(--green);margin:3px 0 0}.confirmation-actions{display:flex;gap:12px}.confirmation-actions .primary{flex:1}.query-heading{margin:6px 0 27px}.query-tip{font-size:11px;color:var(--muted);line-height:1.8;margin:18px 0 0}.result{margin-top:28px;padding-top:26px;border-top:1px solid var(--line)}.result-top{display:flex;align-items:center;gap:12px}.result-icon{height:40px;width:40px;border-radius:12px;background:var(--soft);color:var(--green);font-size:25px;display:grid;place-items:center;flex-shrink:0}.result-top .eyebrow{font-size:11px;letter-spacing:.1em;color:var(--muted)}.result-top h2{font-size:21px;font-weight:600;margin:4px 0 0;line-height:1.5}.badge{font-size:12px;color:var(--green);background:var(--soft);border-radius:20px;line-height:1.5;padding:5px 9px;margin-left:auto;flex-shrink:0}.result-message{font-size:14px;line-height:1.85;color:var(--muted);margin:18px 0;overflow-wrap:anywhere;white-space:pre-wrap}.progress-track{height:3px;border-radius:3px;background:#edf2ea;overflow:hidden;margin-bottom:20px}.progress-track span{display:block;width:35%;height:100%;background:#89b695;border-radius:3px;animation:progress 2s ease-in-out infinite}.result[data-state=completed] .progress-track span{width:100%;animation:none;background:var(--green)}.result[data-state=failed] .result-icon,.result[data-state=failed] .badge{color:var(--error);background:#fff0eb}.result[data-state=requires_action] .result-icon,.result[data-state=manual_review] .result-icon,.result[data-state=requires_action] .badge,.result[data-state=manual_review] .badge,.result[data-state=unknown] .badge{color:var(--warning);background:#fff5e3}.result[data-state=failed] .progress-track,.result[data-state=requires_action] .progress-track,.result[data-state=manual_review] .progress-track,.result[data-state=not_found] .progress-track,.result[data-state=unknown] .progress-track{display:none}.result-details{margin:0}.result-details>div{display:flex;gap:16px;justify-content:space-between;font-size:14px;line-height:1.7;padding:8px 0}.result-bottom{display:flex;align-items:center;justify-content:flex-start;gap:10px;margin-top:15px;border-top:1px solid #edf0e9;padding-top:12px}.result-bottom p{font-size:13px;color:#98a29a;line-height:1.7;margin:0}.button.text-button{background:none;color:var(--green);padding:8px 0;min-height:32px;flex-shrink:0;font-size:11px}.action-help{font-size:14px;color:#8f702c;background:#fff8e9;padding:13px;border-radius:9px;line-height:1.85;margin:15px 0 0}@keyframes progress{0%{transform:translateX(-105%)}100%{transform:translateX(390%)}}@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}.progress-track span{width:50%}}@media(max-width:900px){.page{padding:0 28px}.workspace{grid-template-columns:minmax(0,1fr) 250px;gap:18px}.main-card{padding:8px 24px 26px}.side-card{padding:25px 20px}h1{font-size:32px}}@media(max-width:720px){.page{max-width:580px;padding:0 20px}.channel-status{font-size:10px}.intro h1{font-size:29px;line-height:1.4;margin:12px 0}.workspace{display:block}.main-card{border-radius:18px;padding:5px 21px 25px}.side-card{margin-top:18px;padding:22px;border-radius:18px}.aside-symbol{display:none}.side-card h2{font-size:16px;margin-bottom:18px}.guide{display:flex;gap:16px}.guide li{display:block;flex:1;margin-bottom:0;min-width:0}.guide li>span{display:block;margin-bottom:10px}.guide h3{font-size:14px}.guide p{font-size:14px}.aside-footer{margin-top:20px;padding-top:16px}.site-footer{flex-direction:column;text-align:center;gap:4px;padding:24px 0}.tabs{gap:26px;margin-bottom:23px}.tab{font-size:13px;padding:18px 0 16px}.field-meta{font-size:10px}.privacy-note p{font-size:13px}.result-top h2{font-size:20px}}@media(max-width:380px){.page{padding:0 14px}.main-card{padding:4px 17px 22px}.mobile-break{display:block}.channel-status{font-size:9px}.confirmation-info{padding:4px 12px}}

/* Branded entry points and native, keyboard-accessible tutorial panels. */
.field-link{color:var(--green);text-decoration:underline;text-decoration-color:#b9cbbd;text-underline-offset:3px}.tutorial-card{margin-top:24px;border:1px solid var(--line);border-radius:22px;background:var(--surface);padding:27px 32px 12px;scroll-margin-top:24px}.tutorial-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:18px}.tutorial-heading h2{font-size:21px;font-weight:600;margin:8px 0 0;line-height:1.5}.tutorial-caption{font-size:11px;color:var(--muted)}.tutorial-item{border-top:1px solid var(--line);scroll-margin-top:24px}.tutorial-item summary{display:flex;align-items:center;gap:13px;padding:20px 0;cursor:pointer;list-style:none;font-size:15px;font-weight:600;line-height:1.6}.tutorial-item summary::-webkit-details-marker{display:none}.tutorial-item summary:focus-visible{outline:3px solid #83b99d;outline-offset:3px;border-radius:4px}.tutorial-number{display:grid;place-items:center;flex:0 0 26px;height:26px;border-radius:8px;background:var(--soft);font-size:10px;font-weight:500;color:var(--green)}.details-mark{margin-left:auto;color:var(--green);font-size:19px;font-weight:400;line-height:1}.tutorial-item[open] .details-mark{transform:rotate(45deg)}.tutorial-body{padding:0 39px 22px;color:#66756d;font-size:14px;line-height:1.95}.tutorial-body p{margin:0 0 12px}.tutorial-body p:last-child{margin-bottom:0}.tutorial-body strong{font-weight:600;color:#405c4f}.instruction-list{margin:0;padding-left:18px}.instruction-list li{padding-left:4px;margin-bottom:11px}.instruction-list li:last-child{margin-bottom:0}.tutorial-body code{background:#edf3e9;padding:1px 5px;border-radius:4px;font-size:11px}.tutorial-body a{color:var(--green);text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere}.tutorial-body .tutorial-note{background:#f4f7f0;border-radius:8px;margin-top:17px;padding:11px 14px;font-size:13px;line-height:1.85;color:#73806e}.faq-list h3{font-size:14px;font-weight:600;color:#405c4f;margin:15px 0 4px}.faq-list h3:first-child{margin-top:0}@media(max-width:720px){.tutorial-card{margin-top:18px;padding:23px 21px 8px;border-radius:18px;scroll-margin-top:15px}.tutorial-heading{display:block;margin-bottom:17px}.tutorial-heading h2{font-size:19px;margin-top:6px}.tutorial-caption{display:block;margin-top:7px;font-size:10px}.tutorial-item{scroll-margin-top:15px}.tutorial-item summary{font-size:14px;gap:10px;padding:17px 0}.tutorial-number{flex-basis:23px;height:23px;font-size:9px}.tutorial-body{padding:0 0 20px 2px;font-size:14px}.instruction-list{padding-left:17px}.tutorial-body .tutorial-note{font-size:13px;padding:10px 12px}.faq-list h3{font-size:14px}}@media(max-width:380px){.channel-status{gap:5px}.tutorial-card{padding:21px 17px 6px}.tutorial-item summary{font-size:14px;gap:8px}}

.auto-update-mark{height:6px;width:6px;flex:0 0 6px;border-radius:50%;background:#9aaba0}.result[data-state=pending] .auto-update-mark,.result[data-state=submitted] .auto-update-mark,.result[data-state=processing] .auto-update-mark{background:var(--green)}

.field-link{font-size:14px;white-space:nowrap}@media(max-width:720px){.field-link{font-size:13px}}

/* Compact brand header and a separate help area beside the introduction. */
.site-header {
  height: 88px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 1px solid var(--line);
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: .03em;
}
.brand-icon {
  display: grid;
  place-items: center;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border: 1px solid #d2dec7;
  border-radius: 13px;
  background: var(--soft);
  font-family: "Segoe UI Emoji", "Apple Color Emoji", sans-serif;
  font-size: 30px;
  font-weight: 400;
  line-height: 1;
}
.intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  align-items: center;
  gap: 32px;
  padding: 28px 0;
}
.intro-copy, .intro-tools { min-width: 0; }
.intro p {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.7;
}
.intro-tools {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
.intro-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 12px;
}
.intro-actions > span {
  font-size: 12px;
  line-height: 1.7;
  color: var(--muted);
}
.tutorial-link {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  border: 1px solid #c8d8c7;
  border-radius: 9px;
  padding: 10px 14px;
  background: #eaf0e3;
  color: var(--green);
  font-size: 14px;
  font-weight: 600;
}
.tutorial-link:hover { background: #e1ead8; }
.tutorial-link span { font-size: 16px; }
.contact-links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  max-width: 100%;
  font-size: 14px;
  line-height: 1.7;
}
.shop-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  max-width: 100%;
  padding: 10px 14px;
  border: 1px solid #c8d8c7;
  border-radius: 9px;
  background: var(--surface);
  color: var(--green);
  font-weight: 600;
}
.shop-link:hover { background: var(--soft); }
.shop-link > span { flex-shrink: 0; }
.wechat-contact { color: #566b60; }
.wechat-contact strong {
  font-weight: 600;
  color: var(--ink);
  user-select: all;
  overflow-wrap: anywhere;
}
@media (max-width: 900px) {
  .intro { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}
@media (max-width: 720px) {
  .site-header { height: 78px; gap: 12px; }
  .brand { font-size: 23px; gap: 10px; }
  .intro { padding: 24px 0; }
  .intro p { font-size: 13px; }
  .intro-tools { width: 100%; }
  .contact-links { font-size: 13px; }
}

/* Readable progress steps and a compact recharge form. */
.steps {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 0;
  margin: 0 0 20px;
  list-style: none;
}
.steps li {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #64756b;
  font-size: 16px;
  line-height: 1.5;
  white-space: nowrap;
}
.steps li span {
  display: grid;
  place-items: center;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #f1f3f0;
  font-size: 14px;
}
.steps li.current { color: var(--green); font-weight: 600; }
.steps li.current span { background: var(--green); color: white; }
.steps li.done { color: var(--green); }
.steps li.done span { background: var(--soft); color: var(--green); }
/* Public plan guidance is static and does not make background requests. */
.intro-copy h1 { margin-top: 0; }
.tip-kicker { color: var(--green); font-size: 12px; font-weight: 600; line-height: 1.6; }
.quota-tips h2 { margin: 10px 0 24px; font-size: 20px; }
.tip-list { list-style: none; padding: 0; margin: 0; }
.tip-list li { margin-bottom: 22px; }
.tip-list h3 { margin: 0 0 7px; font-size: 15px; line-height: 1.6; }
.tip-list p { margin: 0; font-size: 14px; line-height: 1.85; color: #586c5d; }
.radar-shortcut { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 18px; border-top: 1px solid #cddbc3; color: var(--green); font-size: 15px; font-weight: 600; }
.radar-card { margin-top: 24px; border: 1px solid var(--line); border-radius: 22px; background: var(--surface); padding: 28px 32px; scroll-margin-top: 24px; }
.radar-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.radar-heading h2 { margin: 7px 0 0; font-size: 26px; line-height: 1.5; }
.radar-stamp { flex-shrink: 0; border-radius: 20px; padding: 7px 11px; background: var(--soft); color: #5d705e; font-size: 12px; line-height: 1.5; }
.radar-lead { margin: 12px 0 22px; color: #65766b; font-size: 15px; line-height: 1.8; }
.plan-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.plan-card { display: flex; flex-direction: column; padding: 22px; border: 1px solid var(--line); border-radius: 14px; background: #f9fbf6; }
.plan-label { color: #5f7564; font-size: 12px; line-height: 1.6; }
.plan-card h3 { margin: 8px 0 12px; color: var(--green); font-size: 26px; line-height: 1.4; }
.plan-card p { margin: 0 0 18px; font-size: 14px; line-height: 1.85; color: #455d50; }
.plan-card .plan-footnote { margin: auto 0 0; padding-top: 14px; border-top: 1px solid #dfe7da; font-size: 13px; color: #68776b; }
.quota-note { display: flex; align-items: baseline; gap: 15px; margin: 20px 0; padding: 15px 18px; background: #f2f5ed; border-radius: 10px; font-size: 14px; line-height: 1.85; color: #53674f; }
.quota-note strong { flex-shrink: 0; color: #3d583e; }
.quota-note p { margin: 0; }
.radar-details { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 28px; }
.radar-details h3 { font-size: 16px; line-height: 1.6; margin: 0 0 7px; }
.radar-details p { margin: 0; font-size: 14px; line-height: 1.85; color: #64746a; }
.radar-links { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 23px; font-size: 14px; color: var(--green); }
.radar-links > a:last-child { text-decoration: underline; text-underline-offset: 4px; }
.radar-caption { margin: 16px 0; font-size: 13px; line-height: 1.85; color: #697a6f; }
.radar-sources { display: flex; flex-wrap: wrap; gap: 8px 18px; border-top: 1px solid var(--line); padding-top: 14px; font-size: 12px; line-height: 1.8; color: #66786c; }
.radar-sources a { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 900px) {
  .plan-grid { gap: 12px; }
  .plan-card { padding: 18px; }
}
@media (max-width: 720px) {
  .quota-tips h2 { font-size: 20px; margin-bottom: 20px; }
  .radar-card { margin-top: 18px; padding: 23px 21px; border-radius: 18px; }
  .radar-heading { display: block; }
  .radar-heading h2 { font-size: 23px; }
  .radar-stamp { display: inline-block; margin-top: 12px; }
  .plan-grid, .radar-details { grid-template-columns: minmax(0,1fr); }
  .plan-card { padding: 20px; }
  .plan-card h3 { font-size: 25px; }
  .quota-note { display: block; padding: 15px; }
  .quota-note strong { display: block; margin-bottom: 5px; }
  .radar-details { gap: 20px; }
  .radar-links { gap: 16px; }
}
@media (max-width: 380px) {
  .radar-card { padding: 21px 17px; }
}
.main-card > .tabs { margin-bottom: 18px; }
#topup-form .field { margin-bottom: 16px; }
#topup-form .privacy-note { margin: 0 0 14px; }
#session-json {
  height: 96px;
  min-height: 80px;
  resize: vertical;
  overflow: auto;
}
@media (max-width: 720px) {
  .steps { gap: 8px; }
  .steps li { gap: 6px; font-size: 14px; }
  .steps li span {
    flex-basis: 24px;
    width: 24px;
    height: 24px;
    font-size: 13px;
  }
}
@media (max-width: 380px) {
  .steps { gap: 4px; }
  .steps li { gap: 3px; font-size: 12px; }
  .steps li span { flex-basis: 22px; width: 22px; height: 22px; }
}