*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;color:#26334b}body{background:radial-gradient(circle at 20% 20%,rgba(202,218,255,.38),transparent 30%),radial-gradient(circle at 90% 75%,rgba(229,211,255,.38),transparent 35%),linear-gradient(145deg,#f4f7ff,#f8f6ff);font-size:16px}.page{max-width:820px;margin:auto;padding:138px 20px 28px}.view{display:none}.view.active{display:block}.card{background:rgba(255,255,255,.94);border-radius:30px;padding:42px 34px;box-shadow:0 16px 42px rgba(91,111,164,.07);margin-bottom:40px}.hero{text-align:center;padding:54px 24px}.hero h1{margin:0;font-size:50px;font-weight:800;background:linear-gradient(90deg,#5b8ff6,#8354e9);-webkit-background-clip:text;color:transparent}.hero p{font-size:25px;color:#56657b;margin:24px 0 28px}.hero i{display:block;width:200px;height:8px;border-radius:8px;margin:auto;background:linear-gradient(90deg,#378cf4,#8b4fea)}.hero.compact{padding:78px 20px}.hero.compact h1{font-size:54px}.menu{text-align:center;padding:50px 40px}.menu h2{font-size:35px;margin:0 0 28px}.menu>p{font-size:25px;color:#68768c;margin-bottom:48px}.service{width:100%;border:0;border-radius:14px;padding:26px 20px;margin:0 0 31px;color:#fff;font-size:27px;font-weight:700;box-shadow:0 8px 18px rgba(76,102,180,.08)}.service span{display:inline-block;width:55px}.grad-main{background:linear-gradient(90deg,#3c83f3,#8d42eb)}.grad-blue{background:linear-gradient(90deg,#3888ee,#226fe1)}.grad-purple{background:linear-gradient(90deg,#a235ec,#8c23df)}.grad-green{background:linear-gradient(90deg,#1cb9b0,#0bab99)}.grad-violet{background:linear-gradient(90deg,#536ee8,#6744d5)}.grad-orange,.orange-btn{background:linear-gradient(90deg,#ff6820,#fb4b0d)}footer{text-align:center;color:#6c7b93;font-size:22px;line-height:2;padding:15px 10px 65px}footer span{font-size:19px}.toolbar{display:flex;justify-content:space-between;align-items:center;margin:0 0 30px}.toolbar select,.outline,.back{background:#fff;border:1px solid #cfd6e2;border-radius:11px;padding:17px 28px;font-size:22px;color:#29354a}.outline.orange{border-color:#e89974;color:#dd6e38}.flow{padding:40px 32px}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:44px}.step{border:2px solid #cfd5df;border-radius:15px;padding:14px 5px;text-align:center;color:#8b95a6;position:relative}.step b{display:grid;place-items:center;margin:0 auto 9px;width:52px;height:52px;border-radius:50%;background:#a6aebb;color:#fff;font-size:25px}.step span{font-size:20px}.step.done,.step.current{border-color:#3a8bf0;color:#3484e9}.step.done b,.step.current b{background:#388cf1}.status{display:flex;gap:24px;align-items:center;padding:28px;border-radius:15px;margin-bottom:28px}.status.ok{background:#effbf7;border:2px solid #9bdfc8;color:#087a5a}.status>b{display:grid;place-items:center;flex:0 0 58px;height:58px;border-radius:50%;background:#20b485;color:#fff;font-size:30px}.status strong,.status span{display:block}.status strong{font-size:27px}.status span{font-size:20px;margin-top:6px}.verified{background:#f5f7fb;border:1px solid #d8dde7;border-radius:14px;padding:24px 28px;margin-bottom:26px;line-height:1.5}.verified small{display:block;color:#8c97aa;font-size:17px}.verified b{font-size:25px}.verified span{display:block;color:#657188;font-size:20px}label{display:block;font-size:22px;margin:22px 0 12px}em{color:#d64c4c;font-style:normal}input,textarea{width:100%;border:2px solid #d5dae4;border-radius:14px;padding:20px 24px;font:inherit;font-size:21px;color:#28344a;background:#fff;outline:0}textarea{min-height:180px;resize:vertical;line-height:1.5}.gradient-btn,.orange-btn{width:100%;border:0;border-radius:13px;padding:22px;color:#fff;font-size:24px;font-weight:700;margin-top:24px;background:linear-gradient(90deg,#388af1,#8748ed)}.instruction{border:1px solid #d7dce5;border-radius:14px;padding:26px 30px;margin:28px 0}.instruction h3{font-size:27px;margin:0 0 18px}.instruction p,.refresh p,.simple p{font-size:20px;color:#68758a}.outline.blue{border:2px solid #3889ed;color:#3484e9;margin-top:18px}.hint{color:#7d899e;font-size:18px;line-height:1.5}.check{display:flex;align-items:center;gap:16px;font-weight:700}.check input{width:32px;height:32px}.two{display:grid;grid-template-columns:1fr 1fr;gap:22px}.two .back,.two .gradient-btn{margin-top:20px}.refresh h2{font-size:30px;margin:0}.refresh>p{margin:10px 0 25px}.simple{padding:38px}.result{margin-top:25px;padding:20px;border-radius:13px;background:#f5f7fb;line-height:1.6;word-break:break-all}.result.success{background:#effbf7;color:#087a5a}.result.error{background:#fff2f2;color:#a23d3d}.hidden{display:none!important}.toast{position:fixed;left:50%;bottom:30px;transform:translate(-50%,20px);opacity:0;background:#273246;color:#fff;padding:12px 20px;border-radius:10px;transition:.2s;z-index:99}.toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:600px){.page{padding:68px 10px 20px}.card{border-radius:22px;margin-bottom:22px;padding:28px 20px}.hero{padding:36px 16px}.hero h1{font-size:36px}.hero p{font-size:18px;margin:18px 0 22px}.hero i{width:100px;height:5px}.menu{padding:32px 20px}.menu h2{font-size:26px}.menu>p{font-size:18px;margin-bottom:28px}.service{font-size:20px;padding:18px 12px;margin-bottom:18px}.service span{width:38px}.toolbar{margin-bottom:16px}.toolbar select,.outline,.back{font-size:16px;padding:12px 16px}.hero.compact{padding:44px 15px}.hero.compact h1{font-size:38px}.flow{padding:24px 16px}.steps{gap:8px;margin-bottom:28px}.step{padding:10px 3px}.step b{width:42px;height:42px;font-size:20px}.step span{font-size:14px}.status{padding:18px;gap:14px}.status>b{flex-basis:46px;height:46px}.status strong{font-size:20px}.status span{font-size:14px}.verified{padding:17px 20px}.verified b{font-size:19px}.verified span{font-size:15px}label{font-size:17px}input,textarea{font-size:17px;padding:16px;min-height:auto}textarea{min-height:150px}.instruction{padding:20px;margin:20px 0}.instruction h3{font-size:20px}.instruction p,.refresh p,.simple p{font-size:16px}.gradient-btn,.orange-btn{font-size:18px;padding:17px}.hint{font-size:14px}.check input{width:26px;height:26px}.two{gap:12px}footer{font-size:16px;padding-bottom:35px}footer span{font-size:14px}}


/* ===== Desktop layout matched to the original site ===== */
.home-toolbar{display:none}
.instruction-grid{display:block}
@media (min-width:650px){
  body{font-size:14px}
  .page{max-width:980px;padding:42px 20px 24px}
  .home-toolbar{display:flex;justify-content:flex-end;margin:0 0 12px}
  .home-toolbar select{background:#fff;border:1px solid #cfd6e2;border-radius:9px;padding:9px 14px;font-size:14px;color:#29354a}
  .card{border-radius:18px;margin-bottom:22px;box-shadow:0 10px 30px rgba(91,111,164,.06)}
  .hero{padding:34px 24px}
  .hero h1{font-size:34px}
  .hero p{font-size:14px;margin:12px 0 16px}
  .hero i{width:76px;height:4px}

  .menu{padding:28px 32px 30px}
  .menu h2{font-size:20px;margin:0 0 12px}
  .menu>p{font-size:14px;margin:0 0 18px}
  .menu{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
  .menu h2,.menu>p{grid-column:1/-1}
  .service{margin:0;padding:12px 10px;border-radius:7px;font-size:14px;box-shadow:none}
  .service span{width:28px}
  footer{font-size:12px;line-height:1.8;padding:0 10px 28px}
  footer span{font-size:11px}

  .toolbar{margin:0 0 18px}
  .toolbar select,.outline,.back{border-radius:8px;padding:10px 16px;font-size:14px}
  .hero.compact{padding:34px 20px}
  .hero.compact h1{font-size:34px}
  .flow{padding:24px 28px}
  .steps{gap:16px;margin-bottom:20px}
  .step{border-width:1px;border-radius:9px;padding:10px 5px}
  .step b{width:34px;height:34px;font-size:15px;margin-bottom:5px}
  .step span{font-size:13px}
  .status{gap:14px;padding:14px 16px;border-width:1px;border-radius:9px;margin-bottom:16px}
  .status>b{flex-basis:36px;height:36px;font-size:19px}
  .status strong{font-size:16px}
  .status span{font-size:12px;margin-top:2px}
  .verified{border-radius:8px;padding:13px 16px;margin-bottom:14px}
  .verified small{font-size:11px}
  .verified b{font-size:15px}
  .verified span{font-size:12px}
  label{font-size:14px;margin:14px 0 7px}
  input,textarea{border-width:1px;border-radius:8px;padding:11px 13px;font-size:14px}
  textarea{min-height:110px}
  .instruction-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:14px 0}
  .instruction{margin:0;padding:16px 18px;border-radius:8px}
  .instruction h3{font-size:16px;margin:0 0 9px}
  .instruction p,.refresh p,.simple p{font-size:12px;margin:0}
  .outline.blue{margin-top:13px;border-width:1px;padding:9px 13px}
  .hint{font-size:11px;margin:8px 0}
  .check{gap:9px;font-size:13px}
  .check input{width:18px;height:18px}
  .two{gap:12px}
  .two .back,.two .gradient-btn{margin-top:12px}
  .gradient-btn,.orange-btn{border-radius:8px;padding:11px;font-size:14px;margin-top:13px}
  .refresh{padding:24px 28px}
  .refresh h2{font-size:18px}
  .refresh>p{font-size:12px;margin:5px 0 14px}
  .simple{padding:24px 28px}
  .result{font-size:12px;margin-top:14px;padding:12px}
}


/* ===== Desktop breakpoint safety override ===== */
@media (min-width:650px){
  #homeView .menu{
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:12px !important;
  }
  #homeView .menu>h2,
  #homeView .menu>p{
    grid-column:1 / -1 !important;
  }
  #homeView .service{
    width:100% !important;
    margin:0 !important;
  }
  #rechargeView .instruction-grid{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:12px !important;
  }
}