:root{
  --primary:#3569ee;
  --primary2:#2857dc;
  --violet:#745fd2;
  --success:#079762;
  --danger:#ff465d;
  --text:#20242f;
  --muted:#6c778d;
  --line:#dbe8f6;
}
body[data-model="claude"]{
  --primary:#d96f2e;
  --primary2:#bd5826;
  --violet:#9b5a34;
}
body[data-model="grok"]{
  --primary:#343a40;
  --primary2:#1f2328;
  --violet:#5f6670;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden],.hidden{display:none!important}
html{min-width:320px;background:#eaf4ff}
body{
  margin:0;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  padding:104px 18px 26px;
  background:#edf6ff;
  color:var(--text);
  font-family:Inter,"PingFang SC","Microsoft YaHei",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
.mist-bg{
  position:fixed;
  inset:0;
  z-index:-1;
  background:
    radial-gradient(circle at 18% 12%,rgba(116,174,255,.22),transparent 27%),
    radial-gradient(circle at 88% 88%,rgba(131,110,232,.10),transparent 25%),
    linear-gradient(180deg,#f5fbff 0%,#e7f2ff 100%);
}
.ui-icon,.link-icon,.btn-icon{
  width:20px;height:20px;flex:0 0 20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round
}
.link-icon,.btn-icon{width:18px;height:18px;flex-basis:18px}
.app-card{
  width:100%;
  max-width:860px;
  min-height:760px;
  margin-top:-30px;
  position:relative;
  transform:scale(.85);
  transform-origin:center center;
  overflow:hidden;
  padding-bottom:52px;
  border:1px solid #d9e7f5;
  border-radius:28px;
  background:#f8fbff;
  box-shadow:0 24px 64px rgba(64,116,181,.16);
}

.mac-controls{
  position:absolute;
  top:24px;
  left:24px;
  z-index:22;
  display:flex;
  align-items:center;
  gap:9px;
}
.mac-dot{
  width:13px;
  height:13px;
  display:block;
  padding:0;
  border:0;
  border-radius:50%;
  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.09),0 1px 2px rgba(28,30,72,.12);
  transition:transform .18s ease,box-shadow .18s ease,filter .18s ease,opacity .18s ease;
}
.mac-red{background:#ff5f57}
.mac-yellow{background:#febc2e}
.mac-green{background:#28c840}
.mac-dot:hover{transform:scale(1.14);filter:saturate(1.05)}
.mac-dot:focus-visible{
  outline:0;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.09),0 0 0 4px rgba(255,255,255,.55),0 0 0 6px rgba(64,89,163,.24)
}
.mac-dot.active{transform:scale(1.16)}
.mac-dot.mac-red.active{box-shadow:inset 0 0 0 1px rgba(0,0,0,.08),0 0 0 4px rgba(255,95,87,.18),0 6px 14px rgba(255,95,87,.34)}
.mac-dot.mac-yellow.active{box-shadow:inset 0 0 0 1px rgba(0,0,0,.08),0 0 0 4px rgba(254,188,46,.18),0 6px 14px rgba(254,188,46,.34)}
.mac-dot.mac-green.active{box-shadow:inset 0 0 0 1px rgba(0,0,0,.08),0 0 0 4px rgba(40,200,64,.16),0 6px 14px rgba(40,200,64,.3)}

.top-toolbar{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:1000;
  height:74px;
  display:grid;
  grid-template-columns:minmax(24px,1fr) minmax(0,960px) minmax(24px,1fr);
  align-items:center;
  column-gap:24px;
  padding:0;
  border-bottom:1px solid #e6edf6;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(16px);
  box-shadow:0 10px 30px rgba(44,78,130,.08);
}
.model-tabs{grid-column:2;grid-row:1;justify-self:start;display:flex;align-items:center;gap:10px;margin-left:0}
.model-tab{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;height:46px;min-width:112px;padding:0 18px;
  border:1px solid #dfe8f5;border-radius:8px;background:#fff;color:#31405a;font-size:15px;font-weight:800;cursor:pointer;
  box-shadow:0 10px 24px rgba(38,64,118,.08)
}
.model-tab span{width:14px;height:14px;border-radius:50%;box-shadow:0 0 0 6px rgba(255,255,255,.42)}
.model-chatgpt{border-color:#bdd2ff;background:#eef5ff;color:#2563eb}
.model-chatgpt span{background:currentColor;box-shadow:none}
.model-chatgpt.active{border-color:#2e67e8;background:linear-gradient(180deg,#3f7cff,#2458d9);color:#fff}
.model-chatgpt.active span{background:#fff;box-shadow:none}
.model-chatgpt span{
  width:18px;
  height:18px;
  border-radius:0;
  -webkit-mask:url("/assets/icons/openai.svg?v=openai-icon") center/contain no-repeat;
  mask:url("/assets/icons/openai.svg?v=openai-icon") center/contain no-repeat;
}
.model-grok{border-color:#d7dce2;background:#f3f5f7;color:#343a40}
.model-grok span{background:#5f6670;box-shadow:0 0 0 6px rgba(95,102,112,.12)}
.model-grok.active{border-color:#343a40;background:linear-gradient(180deg,#5f6670,#252a30);color:#fff}
.model-grok.active span{background:#eef1f4;box-shadow:0 0 0 6px rgba(255,255,255,.20)}
.model-grok span{
  width:18px;
  height:18px;
  border-radius:0;
  background:currentColor;
  box-shadow:none;
  -webkit-mask:url("/assets/icons/grok.svg?v=grok-icon") center/contain no-repeat;
  mask:url("/assets/icons/grok.svg?v=grok-icon") center/contain no-repeat;
}
.model-grok.active span{background:#fff;box-shadow:none}
.model-claude{border-color:#f2cdb8;background:#fff5ee;color:#c6652c}
.model-claude span{background:#d87535;box-shadow:0 0 0 6px rgba(216,117,53,.14)}
.model-claude.active{border-color:#e08a45;background:linear-gradient(180deg,#f6a45c,#d96f2e);color:#fff}
.model-claude.active span{background:#fff1e7;box-shadow:0 0 0 6px rgba(255,255,255,.20)}
.model-claude span{
  width:18px;
  height:18px;
  border-radius:0;
  background:currentColor;
  box-shadow:none;
  -webkit-mask:url("/assets/icons/claude.svg?v=claude-icon") center/contain no-repeat;
  mask:url("/assets/icons/claude.svg?v=claude-icon") center/contain no-repeat;
}
.model-claude.active span{background:#fff;box-shadow:none}
.language-bar{grid-column:2;grid-row:1;justify-self:end;align-self:center;position:static;z-index:20;margin-right:0}
.language-trigger[hidden]{display:none!important}
.language-menu{
  display:flex;position:static;width:auto;overflow:hidden;border:1px solid #e7edf6;border-radius:8px;
  background:#fff;box-shadow:0 8px 18px rgba(38,64,118,.06)
}
.language-menu.open{display:flex}
.language-menu button{width:58px;height:40px;border:0;background:#fff;cursor:pointer;font-weight:800;color:#516075}
.language-menu button:hover{background:#f3f7ff}
.language-menu button.active{background:#2563eb;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.language-menu .lang-disabled{cursor:default;color:#6a7280}
.hero{
  min-height:390px;
  padding:42px 38px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  background:linear-gradient(135deg,#6e86f4 0%,#7866dd 52%,#765bc9 100%);
}
body[data-model="claude"] .hero{background:linear-gradient(135deg,#f0a15b 0%,#d5753a 52%,#8e573f 100%)}
body[data-model="grok"] .hero{background:linear-gradient(135deg,#737b84 0%,#3f464e 52%,#1f2328 100%)}
.hero-inner{width:100%}
.logo{
  width:145px;height:145px;display:block;margin:10px auto 24px;object-fit:contain;filter:brightness(0) invert(1)
}
.model-strip{display:flex;align-items:center;justify-content:flex-start;gap:34px;margin:0;padding:0;border:0;background:transparent;box-shadow:none}
.top-model-strip{position:absolute;top:19px;left:92px;z-index:24;transform:none}
.hero .model-strip{display:none}
.model-strip span{display:inline-flex;align-items:center;justify-content:center;width:78px;height:38px;padding:0 8px;border:1px solid rgba(255,255,255,.34);border-radius:9px;background:linear-gradient(180deg,rgba(255,255,255,.24),rgba(255,255,255,.12));color:#fff;font-size:15px;font-weight:800;letter-spacing:.015em;text-shadow:0 1px 8px rgba(35,40,120,.18);backdrop-filter:blur(8px);box-shadow:0 8px 20px rgba(38,43,120,.10)}
.model-strip span:nth-child(1){border-color:rgba(255,255,255,.38);background:linear-gradient(180deg,#5f8cff,#2563eb);color:#fff;box-shadow:0 9px 20px rgba(37,99,235,.20)}
.model-strip span:nth-child(2){border-color:rgba(255,255,255,.42);background:linear-gradient(180deg,#ffad4d,#f97316);color:#fff;text-shadow:0 1px 8px rgba(124,45,18,.22);box-shadow:0 9px 20px rgba(249,115,22,.20)}
.model-strip span:nth-child(3){border-color:rgba(255,255,255,.38);background:linear-gradient(180deg,#34d17b,#10a35f);color:#fff;box-shadow:0 9px 20px rgba(16,163,95,.18)}
.hero .hero-model-strip{display:flex;justify-content:center;margin:22px auto 0}
h1{
  margin:0;color:#fff;font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei",Inter,system-ui,sans-serif;font-size:52px;line-height:1.16;font-weight:800;letter-spacing:.035em;
  text-shadow:0 8px 24px rgba(44,45,108,.16)
}
.hero p{margin:20px 0 0;color:rgba(255,255,255,.92);font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei",Inter,system-ui,sans-serif;font-size:23px;font-weight:800;letter-spacing:.08em}
.steps{max-width:660px;margin:38px auto 42px;display:grid;grid-template-columns:repeat(3,1fr)}
.step-model-strip{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);width:100%;justify-self:stretch;gap:0}
.step-model-strip span{justify-self:center}
.step{position:relative;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;color:#7d8798}
.step:not(:last-child):after{
  content:"";position:absolute;z-index:0;left:calc(50% + 32px);top:26px;width:calc(100% - 64px);height:4px;border-radius:999px;background:#d9dfe9
}
.step.done:not(:last-child):after{background:linear-gradient(90deg,#7180e6,#725fd0)}
.step span{
  position:relative;z-index:2;display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;
  background:#e3e7ed;color:#68717f;font-size:23px;font-weight:800
}
.step b{position:relative;z-index:2;color:#7c8595;font-size:17px;line-height:1.2;font-weight:800;white-space:nowrap}
.step.active span,.step.done span{background:linear-gradient(135deg,#7382e8,#705fce);color:#fff;box-shadow:0 10px 22px rgba(108,101,209,.18)}
.step.active b,.step.done b{color:#5668cf}
body[data-model="claude"] .step.active span,body[data-model="claude"] .step.done span{background:linear-gradient(135deg,#f0a15b,#d96f2e);box-shadow:0 10px 22px rgba(217,111,46,.18)}
body[data-model="claude"] .step.active b,body[data-model="claude"] .step.done b{color:#bd5826}
body[data-model="grok"] .step.active span,body[data-model="grok"] .step.done span{background:linear-gradient(135deg,#5f6670,#252a30);box-shadow:0 10px 22px rgba(31,35,40,.18)}
body[data-model="grok"] .step.active b,body[data-model="grok"] .step.done b{color:#343a40}
@media (hover:hover) and (pointer:fine){
  .step span,.step b{transition:transform .2s ease,box-shadow .2s ease}
  .step:hover span,.step:hover b{transform:translateY(-3px)}
  .step:hover span{box-shadow:0 15px 30px rgba(38,50,84,.24)}
}
.pane{max-width:820px;margin:0 auto;padding:0 36px;animation:fade .28s ease both}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.label{display:block;margin:0 0 12px;color:#283248;font-size:17px;font-weight:800}
.card-label{
  display:flex;
  align-items:center;
  gap:9px;
}
.card-label-icon{
  width:18px;
  height:18px;
  flex:0 0 18px;
  fill:none;
  stroke:#ff9f1c;
  stroke-width:2.4;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.label.with-icon{display:flex;align-items:center;gap:12px;margin-top:24px;font-size:21px;color:#222838}
.label.with-icon .ui-icon{color:var(--primary)}
.label em{margin-left:4px;color:var(--danger);font-style:normal}
.input-wrap{
  display:flex;padding:4px;border:1px solid var(--line);border-radius:18px;background:#fff;transition:.2s ease
}
.input-wrap:hover{border-color:#cbdced}
.input-wrap:focus-within{border-color:#b7cef0;box-shadow:0 0 0 4px rgba(53,105,238,.08)}
input,textarea{width:100%;border:0;background:transparent;outline:0;padding:20px;color:#2d2f39;font:700 16px inherit}
input::placeholder,textarea::placeholder{color:#b2bbc8}
textarea{min-height:132px;resize:vertical;line-height:1.6}
.verified{margin-bottom:26px;padding:18px 20px;border:1px solid #e4e9f2;border-radius:16px;background:#fff;color:var(--primary)}
.verified-title{display:flex;align-items:center}.verified p{margin:10px 0 0;color:#4f5a72;font-weight:700}
.row-line{display:grid;grid-template-columns:24px minmax(82px,max-content) minmax(206px,auto);align-items:center;gap:16px;margin:0 0 22px}
.row-line .step-icon{width:22px;height:22px;color:var(--primary);stroke-width:2.4}
.row-line b{white-space:nowrap;color:#222838;font-size:21px;line-height:1;font-weight:800}
.row-line a{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;min-width:206px;max-width:100%;height:54px;padding:0 22px;
  border-radius:12px;color:#fff;text-decoration:none;font-size:17px;font-weight:800;white-space:nowrap;box-shadow:0 14px 28px rgba(47,100,240,.12)
}
.row-line a.green{background:#079762}.row-line a.blue{background:#3569ee}
.warning{display:flex;align-items:flex-start;gap:10px;margin:24px 0 28px;color:#a86a00;font-size:15px;line-height:1.45;font-weight:800}
.warning .warn-icon{width:18px;height:18px;flex-basis:18px;margin-top:1px;color:#ff9f1c}
.confirm-card{margin-bottom:16px;overflow:hidden;border:1px solid #e4e9f2;border-radius:18px;background:#fff}
.confirm-card h3{margin:0;padding:18px;border-bottom:1px solid #eef1f6;font-size:17px}
.confirm-card div{display:flex;justify-content:space-between;gap:16px;padding:16px 18px;border-bottom:1px solid #eef1f6}
.confirm-card div:last-child{border-bottom:0}.confirm-card span{color:#677086;font-weight:800}.confirm-card b{text-align:right;word-break:break-all}
.confirm-card #sumStat.status-success{color:var(--success)}.confirm-card #sumStat.status-failed{color:var(--danger)}.confirm-card #sumStat.status-processing{color:var(--primary)}
body[data-model="claude"] .gpt-plan-row,
body[data-model="grok"] .gpt-plan-row{display:none}
.log-stream{height:160px;padding:18px;overflow-y:auto;border:1px solid #1e293b;border-radius:16px;background:#020617;color:#dbeafe;font:13px/1.7 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.log-stream b{color:#60a5fa}
.actions{max-width:820px;margin:38px auto 0;padding:0 36px;display:grid;grid-template-columns:minmax(112px,32%) minmax(0,1fr);gap:14px}
.actions[hidden]{display:none}
.legal-footer{max-width:820px;margin:-34px auto 0;padding:0 36px;text-align:center;color:#8a95a8;font-size:13px;line-height:1.65;font-weight:400}
.legal-footer p{margin:4px 0}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-width:0;min-height:62px;border:0;border-radius:16px;font-size:19px;font-weight:800;cursor:pointer;white-space:nowrap}
.primary{width:100%;background:linear-gradient(135deg,var(--primary),var(--primary2));color:#fff;box-shadow:0 12px 26px rgba(47,100,240,.2)}
.primary:hover{transform:translateY(-1px);box-shadow:0 16px 30px rgba(47,100,240,.24)}
.primary:disabled{background:#c6d0ef;box-shadow:none;cursor:not-allowed;transform:none}
.ghost{background:#e8ebf3;color:#586074}.app-card[data-step="1"] .actions{grid-template-columns:1fr}.app-card[data-step="1"] .primary{font-size:21px}
.toast-center{position:fixed;top:118px;left:50%;transform:translate(-50%,-50%);z-index:999;display:flex;flex-direction:column;align-items:center;gap:10px}
.toast-pill{padding:12px 28px;border:1px solid #eceef5;border-radius:999px;background:#fff;font-weight:800;box-shadow:0 15px 35px rgba(16,24,40,.16)}
.subscription-confirm-overlay[hidden]{display:none}
.subscription-confirm-overlay{position:fixed;inset:0;z-index:1200;display:grid;place-items:center;padding:24px;background:rgba(28,48,84,.28);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);animation:subscriptionFade .18s ease-out}
.subscription-confirm-dialog{position:relative;width:min(500px,100%);padding:32px;border:1px solid #e2eaff;border-radius:22px;background:#fff;text-align:center;box-shadow:0 24px 64px rgba(35,82,170,.22);animation:subscriptionRise .24s cubic-bezier(.2,.8,.2,1)}
.subscription-confirm-icon{display:grid;place-items:center;width:58px;height:58px;margin:0 auto 18px;border-radius:18px;background:#edf4ff;color:#2f64f0}
.subscription-confirm-icon svg{width:32px;height:32px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.subscription-confirm-copy>span{display:inline-flex;align-items:center;justify-content:center;height:28px;padding:0 12px;border-radius:999px;background:#edf4ff;color:#2f64f0;font-size:13px;font-weight:800;letter-spacing:.04em}
.subscription-confirm-copy h2{margin:14px 0 10px;color:#17233a;font-size:25px;line-height:1.25;letter-spacing:.01em;text-align:center}
.subscription-confirm-copy p{max-width:410px;margin:0 auto;color:#64708a;font-size:15px;line-height:1.75;font-weight:600;text-align:center}
.subscription-confirm-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:26px}
.subscription-confirm-actions button{height:50px;border-radius:14px;font:inherit;font-size:15px;font-weight:800;cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,background .18s ease}
.subscription-confirm-actions button:hover{transform:translateY(-2px)}
.subscription-confirm-actions button:focus-visible{outline:3px solid rgba(47,100,240,.2);outline-offset:2px}
.subscription-confirm-cancel{border:1px solid #dce5f4;background:#f7f9fc;color:#53617a}
.subscription-confirm-cancel:hover{background:#f0f4fa;box-shadow:0 10px 22px rgba(44,62,92,.08)}
.subscription-confirm-continue{border:0;background:linear-gradient(135deg,#3574f4,#2458dc);color:#fff;box-shadow:0 12px 26px rgba(47,100,240,.24)}
.subscription-confirm-continue:hover{box-shadow:0 15px 30px rgba(47,100,240,.32)}
body.subscription-confirm-open{overflow:hidden}
@keyframes subscriptionFade{from{opacity:0}to{opacity:1}}
@keyframes subscriptionRise{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
@media(max-width:540px){
  .subscription-confirm-overlay{padding:16px}
  .subscription-confirm-dialog{padding:26px 22px;border-radius:20px}
  .subscription-confirm-icon{width:54px;height:54px;margin:0 auto 17px;border-radius:16px}
  .subscription-confirm-copy h2{font-size:22px}
  .subscription-confirm-copy p{font-size:14px}
  .subscription-confirm-actions{grid-template-columns:1fr;margin-top:24px}
  .subscription-confirm-continue{grid-row:1}
  .subscription-confirm-cancel{grid-row:2}
}
@media(max-width:640px){
  .toast-center{top:88px;width:calc(100% - 24px)}
  .toast-pill{max-width:100%;text-align:center}
  body{padding:142px 12px 12px}.app-card{min-height:680px;border-radius:22px;margin-top:0}.top-toolbar{height:auto;min-height:118px;grid-template-columns:1fr;gap:10px;justify-items:center;padding:14px}.model-tabs{grid-column:1;gap:8px;margin-left:0}.model-tab{min-width:96px;height:40px;padding:0 12px;font-size:13px}.language-bar{grid-column:1;justify-self:center;margin-right:0}.language-menu button{width:52px;height:36px}.hero{min-height:300px;padding:28px 16px 34px}.logo{width:108px;height:108px}.top-model-strip{top:54px;left:18px}.model-strip{gap:20px}.model-strip span{width:66px;height:32px;padding:0 6px;font-size:13px;border-radius:8px}h1{font-size:38px;letter-spacing:.025em}.hero p{font-size:19px}
  .pane,.actions,.legal-footer{padding:0 14px}.steps{max-width:520px;margin-top:32px}.step{gap:8px}.step span{width:48px;height:48px;font-size:20px}.step b{font-size:15px}.step:not(:last-child):after{top:22px;left:calc(50% + 28px);width:calc(100% - 56px)}
  .row-line{grid-template-columns:18px max-content minmax(0,1fr);gap:10px}.row-line .step-icon{width:17px;height:17px;stroke-width:2.1}.row-line b,.label.with-icon{font-size:19px}
  .label.with-icon .ui-icon{width:17px;height:17px;flex-basis:17px}.warning .warn-icon{width:15px;height:15px;flex-basis:15px}.row-line a{min-width:0;padding:0 12px;font-size:16px}.btn{font-size:17px}
}
@media(max-width:420px){
  body{padding:126px 0 0}.app-card{min-height:100vh;border:0;border-radius:0;margin-top:0}.top-toolbar{min-height:112px;padding:12px 10px}.model-tabs{gap:6px}.model-tab{min-width:88px;height:38px;padding:0 9px;font-size:12px}.model-tab span{width:11px;height:11px}.language-bar{position:static;margin-right:0}.language-menu button{width:50px;height:34px}.hero{min-height:280px}.logo{width:96px;height:96px;margin-bottom:18px}.top-model-strip{top:54px;left:14px}.model-strip{gap:14px}.model-strip span{width:58px;height:30px;padding:0 5px;font-size:12px;border-radius:7px}h1{font-size:32px;letter-spacing:.02em}.hero p{font-size:17px}
  .steps{max-width:390px;margin:28px auto}.step b{font-size:13px}.pane{padding:0 12px}.actions{padding:0 12px;gap:10px}.legal-footer{padding:0 12px;font-size:12px}.btn{min-height:54px;border-radius:14px}.row-line b,.label.with-icon{font-size:17px}.row-line a{height:50px;font-size:14px}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}


/* Card key input emphasis */
#cardKey{
  font-size:16px;
  font-weight:600;
  letter-spacing:0;
}
#cardKey::placeholder{
  color:#aeb8c8;
  font-size:16px;
  font-weight:600;
  opacity:1;
}
@media(max-width:640px){
  #cardKey,#cardKey::placeholder{font-size:15px;font-weight:600}
}

@media(max-width:640px){
  .mac-controls{top:18px;left:18px;gap:7px}
  .mac-dot{width:11px;height:11px}
}


/* Relaxed spacing refinement */
@media (min-width:641px){
  .confirm-card{margin-bottom:22px}
  .confirm-card h3{padding:20px}
  .confirm-card div{padding:18px 20px}
  .log-stream{height:170px;padding:20px}
}
@media (max-width:640px){
  body{padding:142px 16px 16px}
  .hero{padding:34px 18px 40px}
  .steps{margin-top:36px;margin-bottom:34px}
  .pane,.actions{padding-left:18px;padding-right:18px}
  .actions{margin-top:34px}
}


/* Card-key input and validation button — equal dimensions */
#pane1 .input-wrap,
.app-card[data-step="1"] .actions .primary{
  width:100%;
  min-height:62px;
  height:62px;
  box-sizing:border-box;
}
#pane1 .input-wrap{
  padding:4px;
}
#pane1 #cardKey{
  height:52px;
  padding:0 20px;
  line-height:52px;
}
.app-card[data-step="1"] .actions{
  width:100%;
}

@media(max-width:420px){
  #pane1 .input-wrap,
  .app-card[data-step="1"] .actions .primary{
    min-height:54px;
    height:54px;
  }
  #pane1 #cardKey{
    height:44px;
    padding:0 16px;
    line-height:44px;
  }
}


/* Language selector arrow alignment */
.language-trigger{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding-top:0;
  padding-bottom:0;
  line-height:1;
}
.language-trigger span,
.language-trigger b{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:100%;
  margin:0;
}
.lang-arrow{
  width:16px;
  height:16px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 16px;
}
.lang-arrow svg{
  width:14px;
  height:14px;
  display:block;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}


/* Main logo floating animation */
.logo{
  animation:logoFloat 3.8s ease-in-out infinite;
  transform-origin:center;
  transition:transform .28s ease, filter .28s ease;
  will-change:transform;
}
.logo:hover{
  animation-play-state:paused;
  transform:translateY(-5px) scale(1.06);
  filter:brightness(0) invert(1) drop-shadow(0 14px 18px rgba(53,45,130,.24));
}
@keyframes logoFloat{
  0%,100%{
    transform:translateY(0);
    filter:brightness(0) invert(1) drop-shadow(0 8px 12px rgba(53,45,130,.12));
  }
  50%{
    transform:translateY(-10px);
    filter:brightness(0) invert(1) drop-shadow(0 18px 22px rgba(53,45,130,.22));
  }
}
@media(max-width:420px){
  @keyframes logoFloat{
    0%,100%{transform:translateY(0)}
    50%{transform:translateY(-7px)}
  }
}
@media(max-width:640px){
  .app-card{transform:none}
}
@media(max-width:640px){
  body{
    justify-content:flex-start;
    padding:96px 12px 24px;
  }
  .top-toolbar{
    min-height:78px;
    grid-template-columns:1fr;
    grid-template-rows:auto;
    align-content:center;
    justify-items:center;
    gap:0;
    padding:14px 10px;
  }
  .model-tabs{
    grid-column:1;
    grid-row:1;
    width:100%;
    justify-content:center;
    gap:8px;
    margin:0;
  }
  .model-tab{
    min-width:0;
    width:31%;
    max-width:128px;
  }
  .language-bar{
    display:none;
  }
  .app-card{
    min-height:auto;
    padding-bottom:34px;
  }
  .legal-footer{
    width:100%;
    margin:16px auto 0;
    padding:0 18px 14px;
    line-height:1.7;
  }
}
@media(max-width:420px){
  body{
    min-height:100dvh;
    padding:96px 12px 22px;
  }
  .top-toolbar{
    min-height:78px;
    grid-template-columns:1fr;
    grid-template-rows:auto;
    align-content:center;
    gap:0;
    padding:14px 10px;
  }
  .model-tabs{
    grid-column:1;
    grid-row:1;
    width:100%;
    justify-content:center;
    gap:7px;
  }
  .model-tab{
    min-width:0;
    width:31%;
    max-width:116px;
    height:38px;
    padding:0 8px;
    font-size:12px;
  }
  .model-tab span{
    width:15px;
    height:15px;
    flex:0 0 15px;
  }
  .language-bar{
    display:none;
  }
  .language-menu button{
    width:58px;
    height:36px;
  }
  .app-card{
    min-height:auto;
    border:1px solid #d9e7f5;
    border-radius:22px;
  }
  .legal-footer{
    margin-top:14px;
    padding:0 14px 10px;
    font-size:12px;
  }
}
@media(prefers-reduced-motion:reduce){
  .logo{animation:none}
}

/* Claude user ID step */
.claude-risk-warning,
.token-help{
  display:none;
}
body[data-model="claude"] #pane2 .verified{
  margin-bottom:24px;
  padding:22px 24px 24px;
  border:1px solid #a9ccff;
  border-radius:8px;
  background:#edf6ff;
  color:#1f63f2;
}
body[data-model="claude"] #pane2 .verified-title{
  gap:14px;
}
body[data-model="claude"] #pane2 .verified-title:before{
  content:"i";
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:20px;
  height:20px;
  border:2px solid currentColor;
  border-radius:50%;
  font-size:13px;
  font-weight:900;
  line-height:1;
}
body[data-model="claude"] #pane2 .verified-title b{
  font-size:19px;
  line-height:1.2;
}
body[data-model="claude"] #pane2 .verified p{
  margin:14px 0 0 39px;
  color:#1f63f2;
  font-size:18px;
  line-height:1.4;
  font-weight:700;
}
body[data-model="claude"] .claude-risk-warning{
  display:flex;
  align-items:center;
  gap:14px;
  margin:0 0 24px;
  padding:18px 20px;
  border:1px solid #ff5b5b;
  border-radius:8px;
  background:#fff1f1;
  color:#c81e1e;
  font-size:18px;
  line-height:1.45;
  font-weight:900;
}
body[data-model="claude"] .claude-risk-warning .warn-icon{
  width:22px;
  height:22px;
  flex-basis:22px;
  color:#ff4d4f;
  stroke-width:2.1;
}
body[data-model="claude"] .flow-credential-row{
  display:none;
}
body[data-model="claude"] .flow-login-row{
  grid-template-columns:24px max-content minmax(0,auto);
  gap:12px;
  margin:0 0 20px;
}
body[data-model="claude"] .flow-login-row .step-icon{
  color:#2f75ff;
}
body[data-model="claude"] .flow-login-row b{
  font-size:18px;
  color:#1f2937;
}
body[data-model="claude"] .flow-login-row a{
  justify-self:start;
  min-width:250px;
  height:54px;
  border-radius:8px;
  background:linear-gradient(135deg,#f24f0b,#fb8d0a);
  font-size:18px;
  box-shadow:none;
}
body[data-model="claude"] .flow-helper{
  margin:0 0 30px 6px;
  color:#697386;
  font-size:16px;
  line-height:1.55;
  font-weight:500;
}
body[data-model="claude"] .flow-helper .warn-icon{
  color:#ff8a00;
}
body[data-model="claude"] #pane2 .label.with-icon{
  margin:0 0 12px;
  gap:10px;
  color:#1f2937;
  font-size:18px;
}
body[data-model="claude"] #pane2 .label.with-icon .ui-icon{
  color:#8b5cf6;
}
body[data-model="claude"] #pane2 .input-wrap{
  padding:0;
  border-color:#cfd7e3;
  border-radius:9px;
  background:#fff;
}
body[data-model="claude"] #pane2 .input-wrap:focus-within{
  border-color:#f4a35d;
  box-shadow:0 0 0 4px rgba(217,111,46,.08);
}
body[data-model="claude"] #tokenBox{
  min-height:58px;
  height:58px;
  max-height:58px;
  padding:17px 18px;
  resize:none;
  overflow:hidden;
  color:#344054;
  font-size:16px;
  font-weight:700;
  line-height:1.35;
}
body[data-model="claude"] #tokenBox::placeholder{
  color:#98a2b3;
  opacity:1;
}
body[data-model="claude"] .token-help{
  display:flex;
  align-items:center;
  gap:8px;
  margin:12px 0 0 6px;
  color:#98a2b3;
  font-size:15px;
  line-height:1.4;
  font-weight:600;
}
body[data-model="claude"] .token-help .ui-icon{
  width:16px;
  height:16px;
  flex-basis:16px;
}
body[data-model="claude"] .actions{
  margin-top:34px;
}
body[data-model="claude"] .ghost{
  background:#e4e7ec;
  color:#475467;
}
body[data-model="claude"] .primary{
  background:linear-gradient(135deg,#ff6b14,#f7a20b);
  box-shadow:none;
}
@media(max-width:640px){
  body[data-model="claude"] #pane2 .verified{
    padding:18px;
  }
  body[data-model="claude"] #pane2 .verified p{
    margin-left:34px;
    font-size:16px;
  }
  body[data-model="claude"] .claude-risk-warning{
    align-items:flex-start;
    padding:14px 16px;
    font-size:15px;
  }
  body[data-model="claude"] .flow-login-row{
    grid-template-columns:20px max-content 1fr;
    gap:9px;
  }
  body[data-model="claude"] .flow-login-row a{
    min-width:0;
    height:50px;
    font-size:15px;
  }
  body[data-model="claude"] .flow-helper,
  body[data-model="claude"] .token-help{
    margin-left:0;
    font-size:14px;
  }
}

/* Grok uses the same user ID step template as Claude */
body[data-model="grok"] #pane2 .verified{
  margin-bottom:24px;
  padding:22px 24px 24px;
  border:1px solid #cbd2da;
  border-radius:8px;
  background:#f3f5f7;
  color:#343a40;
}
body[data-model="grok"] #pane2 .verified-title{
  gap:14px;
}
body[data-model="grok"] #pane2 .verified-title:before{
  content:"i";
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:20px;
  height:20px;
  border:2px solid currentColor;
  border-radius:50%;
  font-size:13px;
  font-weight:900;
  line-height:1;
}
body[data-model="grok"] #pane2 .verified-title b{
  font-size:19px;
  line-height:1.2;
}
body[data-model="grok"] #pane2 .verified p{
  margin:14px 0 0 39px;
  color:#343a40;
  font-size:18px;
  line-height:1.4;
  font-weight:700;
}
body[data-model="grok"] #pane2 .claude-risk-warning{
  display:flex;
  align-items:center;
  gap:14px;
  margin:0 0 24px;
  padding:18px 20px;
  border:1px solid #ff5b5b;
  border-radius:8px;
  background:#fff1f1;
  color:#c81e1e;
  font-size:18px;
  line-height:1.45;
  font-weight:900;
}
body[data-model="grok"] #pane2 .claude-risk-warning .warn-icon{
  width:22px;
  height:22px;
  flex-basis:22px;
  color:#ff4d4f;
  stroke-width:2.1;
}
body[data-model="grok"] .flow-credential-row{
  display:none;
}
body[data-model="grok"] .flow-login-row{
  grid-template-columns:24px max-content minmax(0,auto);
  gap:12px;
  margin:0 0 20px;
}
body[data-model="grok"] .flow-login-row .step-icon{
  color:#343a40;
}
body[data-model="grok"] .flow-login-row b{
  font-size:18px;
  color:#1f2937;
}
body[data-model="grok"] .flow-login-row a{
  justify-self:start;
  min-width:250px;
  height:54px;
  border-radius:8px;
  background:linear-gradient(135deg,#5f6670,#252a30);
  font-size:18px;
  box-shadow:none;
}
body[data-model="grok"] .flow-helper{
  margin:0 0 30px 6px;
  color:#697386;
  font-size:16px;
  line-height:1.55;
  font-weight:500;
}
body[data-model="grok"] .flow-helper .warn-icon{
  color:#5f6670;
}
body[data-model="grok"] #pane2 .label.with-icon{
  margin:0 0 12px;
  gap:10px;
  color:#1f2937;
  font-size:18px;
}
body[data-model="grok"] #pane2 .label.with-icon .ui-icon{
  color:#343a40;
}
body[data-model="grok"] #pane2 .input-wrap{
  padding:0;
  border-color:#cfd7e3;
  border-radius:9px;
  background:#fff;
}
body[data-model="grok"] #pane2 .input-wrap:focus-within{
  border-color:#5f6670;
  box-shadow:0 0 0 4px rgba(95,102,112,.10);
}
body[data-model="grok"] #tokenBox{
  min-height:58px;
  height:58px;
  max-height:58px;
  padding:17px 18px;
  resize:none;
  overflow:hidden;
  color:#344054;
  font-size:16px;
  font-weight:700;
  line-height:1.35;
}
body[data-model="grok"] #tokenBox::placeholder{
  color:#98a2b3;
  opacity:1;
}
body[data-model="grok"] .token-help{
  display:flex;
  align-items:center;
  gap:8px;
  margin:12px 0 0 6px;
  color:#98a2b3;
  font-size:15px;
  line-height:1.4;
  font-weight:600;
}
body[data-model="grok"] .token-help .ui-icon{
  width:16px;
  height:16px;
  flex-basis:16px;
}
@media(max-width:640px){
  body[data-model="grok"] #pane2 .verified{
    padding:18px;
  }
  body[data-model="grok"] #pane2 .verified p{
    margin-left:34px;
    font-size:16px;
  }
  body[data-model="grok"] #pane2 .claude-risk-warning{
    align-items:flex-start;
    padding:14px 16px;
    font-size:15px;
  }
  body[data-model="grok"] .flow-login-row{
    grid-template-columns:20px max-content 1fr;
    gap:9px;
  }
  body[data-model="grok"] .flow-login-row a{
    min-width:0;
    height:50px;
    font-size:15px;
  }
  body[data-model="grok"] .flow-helper,
  body[data-model="grok"] .token-help{
    margin-left:0;
    font-size:14px;
  }
}

/* Local redemption compatibility: retain the supplied visual system while
   continuing to use the existing validation and task APIs. */
body{
  justify-content:flex-start;
  padding-top:42px;
}
.app-card{
  height:auto;
  margin-top:auto;
  transform:none;
  zoom:.85;
}
.legal-footer{
  margin-top:42px;
  margin-bottom:auto;
}
.risk-warning{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin:0 0 24px;
  padding:13px 15px;
  border-radius:12px;
  background:#fff1f2;
  color:#c44254;
  font-size:14px;
  line-height:1.55;
  font-weight:700;
}
.risk-warning .warn-icon{
  width:19px;
  height:19px;
  flex:0 0 19px;
  margin-top:1px;
  color:#ff6478;
}
.token-help-visible{
  display:flex;
  align-items:center;
  gap:7px;
  margin:10px 4px 0;
  color:#8994a7;
  font-size:12px;
}
.token-help-visible .ui-icon{
  width:15px;
  height:15px;
  flex-basis:15px;
}
.log-stream:empty{display:none}
.log-row{
  display:grid;
  grid-template-columns:72px minmax(0,1fr);
  gap:10px;
  padding:8px 0;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.log-row:last-child{border-bottom:0}
.log-row span{color:#8391a9}
.log-row.succeeded b{color:#55e0aa}
.log-row.failed b{color:#ff8796}
.log-row.processing b{color:#85b0ff}
.reference-notice{
  margin-top:14px;
  padding:13px 15px;
  border-radius:12px;
  background:#fff0f1;
  color:#c73d50;
  font-size:13px;
  font-weight:700;
}
.reference-notice.success{
  background:#e8f8f2;
  color:var(--success);
}
@media(max-width:640px){
  body{padding-top:24px}
  .app-card{margin-top:0;zoom:1}
  .legal-footer{margin-top:16px;margin-bottom:0}
}