:root{
  --bg:#0a0c10;
  --bg-2:#0e1117;
  --panel:#12151d;
  --panel-2:#171b25;
  --line:#232936;
  --line-soft:#1b202a;
  --ink:#e7ebf2;
  --muted:#8b94a6;
  --faint:#5a6273;
  --ember:#ff7a2f;
  --ember-dim:#ff9d5c;
  --ember-glow:rgba(255,122,47,.35);
  --teal:#3dd6c4;
  --teal-dim:#2a9c8f;
  --teal-glow:rgba(61,214,196,.28);
  --danger:#ff5c5c;
  --warn:#f5b642;
  --ok:#57d68d;
  --mono:"Chivo Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --sans:"Chivo","Noto Sans SC",-apple-system,"Segoe UI",sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* ---------- background layers ---------- */
.grain{
  position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.bg-grid{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000 30%,transparent 75%);
          mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000 30%,transparent 75%);
}
.bg-grid::after{
  content:"";position:fixed;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 60% 40% at 78% -10%,rgba(255,122,47,.08),transparent 60%),
             radial-gradient(ellipse 50% 35% at 12% 8%,rgba(61,214,196,.06),transparent 60%);
}

::selection{background:var(--ember);color:#0a0c10}

/* ---------- header ---------- */
.masthead{
  position:sticky;top:0;z-index:50;
  backdrop-filter:blur(14px);
  background:rgba(10,12,16,.72);
  border-bottom:1px solid var(--line-soft);
}
.masthead-inner{
  max-width:1180px;margin:0 auto;padding:14px 24px;
  display:flex;align-items:center;justify-content:space-between;
}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink)}
.brand-mark{
  width:34px;height:34px;display:grid;place-items:center;
  font-size:14px;color:#0a0c10;background:linear-gradient(135deg,var(--ember),#ffb14e);
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  animation:spin-slow 14s linear infinite;
}
@keyframes spin-slow{to{transform:rotate(360deg)}}
.brand-text{font-family:var(--mono);font-weight:700;letter-spacing:.08em;font-size:15px}
.brand-accent{color:var(--ember)}
.masthead-status{display:flex;align-items:center;gap:9px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--muted)}
.pulse-dot{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 0 var(--ok);animation:pulse 2s infinite}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(87,214,141,.6)}
  70%{box-shadow:0 0 0 9px rgba(87,214,141,0)}
  100%{box-shadow:0 0 0 0 rgba(87,214,141,0)}
}

/* ---------- shell ---------- */
.shell{position:relative;z-index:1;max-width:1180px;margin:0 auto;padding:0 24px}

/* ---------- hero ---------- */
.hero{padding:88px 0 56px;text-align:center;max-width:820px;margin:0 auto}
.hero-kicker{
  font-family:var(--mono);font-size:12px;letter-spacing:.4em;color:var(--ember);
  display:inline-block;padding:6px 14px;border:1px solid rgba(255,122,47,.35);
  border-radius:2px;background:rgba(255,122,47,.06);margin-bottom:26px;
}
.hero-title{
  font-family:var(--mono);font-weight:700;font-size:clamp(30px,5vw,52px);
  line-height:1.12;letter-spacing:-.01em;
}
.hero-title em{
  font-style:normal;color:transparent;
  background:linear-gradient(100deg,var(--ember) 10%,#ffb14e 45%,var(--teal) 90%);
  -webkit-background-clip:text;background-clip:text;
}
.hero-sub{color:var(--muted);font-size:16px;margin-top:18px;max-width:600px;margin-inline:auto}
.hero-stats{
  margin-top:30px;display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;
  font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--faint);
}
.hero-stats i{width:5px;height:5px;background:var(--teal);transform:rotate(45deg);display:inline-block}

/* ---------- panels ---------- */
.stage{display:grid;gap:22px}
.panel{
  background:linear-gradient(180deg,var(--panel) 0%,var(--bg-2) 100%);
  border:1px solid var(--line-soft);
  border-radius:6px;
  padding:26px;
  position:relative;
}
.panel::before{
  content:"";position:absolute;inset:0;border-radius:6px;pointer-events:none;
  border:1px solid transparent;
  background:linear-gradient(180deg,rgba(255,255,255,.05),transparent 30%) border-box;
  -webkit-mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
}
.panel-head{
  display:flex;align-items:center;gap:14px;margin-bottom:22px;position:relative;
}
.step-no{
  font-family:var(--mono);font-weight:700;font-size:13px;color:#0a0c10;
  background:linear-gradient(135deg,var(--ember),#ffb14e);
  width:30px;height:30px;display:grid;place-items:center;border-radius:2px;
}
.panel-head h2{font-family:var(--mono);font-size:18px;font-weight:600;letter-spacing:.02em}
.panel-tag{
  margin-left:auto;font-family:var(--mono);font-size:10px;letter-spacing:.18em;
  color:var(--teal);border:1px solid rgba(61,214,196,.35);padding:3px 10px;border-radius:2px;
}

/* ---------- chains ---------- */
.chain-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.chain-card{
  cursor:pointer;position:relative;
  background:var(--panel-2);border:1px solid var(--line-soft);
  border-radius:5px;padding:16px 14px;
  display:flex;flex-direction:column;gap:9px;align-items:flex-start;
  transition:border-color .18s,background .18s,transform .18s;
}
.chain-card:hover{transform:translateY(-2px);border-color:#2e3646}
.chain-card.active{
  border-color:var(--ember);background:rgba(255,122,47,.05);
  box-shadow:0 0 0 1px var(--ember),0 8px 30px -12px var(--ember-glow);
}
.chain-card.active::after{
  content:"✓";position:absolute;top:8px;right:10px;
  font-family:var(--mono);font-size:11px;color:var(--ember);
}
.chain-icon{
  width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--mono);font-weight:700;font-size:13px;color:#0a0c10;
}
.chain-name{font-family:var(--mono);font-size:13px;font-weight:600;letter-spacing:.01em}
.chain-sub{font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:var(--faint)}
.chain-card.testnet{opacity:.85}
.chain-card .net-badge{
  font-family:var(--mono);font-size:9px;letter-spacing:.1em;color:var(--warn);
  border:1px solid rgba(245,182,66,.4);padding:1px 6px;border-radius:2px;
}

/* ---------- fields ---------- */
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.field{display:flex;flex-direction:column;gap:8px}
.field.wide{grid-column:1/-1}
.field-label{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--muted);text-transform:uppercase}
input[type="text"],input[type="number"]{
  width:100%;background:var(--bg-2);border:1px solid var(--line-soft);
  color:var(--ink);font-family:var(--mono);font-size:14px;
  padding:11px 13px;border-radius:4px;outline:none;
  transition:border-color .15s,box-shadow .15s;
}
input[type="text"]:focus,input[type="number"]:focus{
  border-color:var(--teal);box-shadow:0 0 0 3px var(--teal-glow);
}
input::placeholder{color:var(--faint)}
.stepper{display:flex;align-items:stretch}
.stepper .step-btn{
  width:42px;background:var(--panel-2);border:1px solid var(--line-soft);
  color:var(--ink);font-family:var(--mono);font-size:16px;cursor:pointer;transition:all .15s;
}
.stepper .step-btn:first-child{border-radius:4px 0 0 4px}
.stepper .step-btn:last-child{border-radius:0 4px 4px 0}
.stepper .step-btn:hover{background:#232a38;color:var(--ember)}
.stepper input{border-radius:0;text-align:center;flex:1}
.input-suffix{position:relative;display:flex;align-items:center}
.input-suffix input{padding-right:74px}
.input-suffix .suffix{
  position:absolute;right:12px;font-family:var(--mono);font-size:11px;
  letter-spacing:.08em;color:var(--ember);pointer-events:none;
}

/* ---------- features ---------- */
.feature-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.feature{
  background:var(--panel-2);border:1px solid var(--line-soft);border-radius:5px;
  padding:14px 16px;display:flex;align-items:center;gap:13px;cursor:pointer;
  transition:border-color .15s,background .15s,transform .15s;
  user-select:none;
}
.feature:hover{transform:translateY(-1px);border-color:#2e3646}
.feature.on{border-color:rgba(61,214,196,.55);background:rgba(61,214,196,.05)}
.feature-icon{
  width:34px;height:34px;flex:none;border-radius:4px;display:grid;place-items:center;
  font-family:var(--mono);font-size:15px;background:#202634;color:var(--faint);
}
.feature.on .feature-icon{background:rgba(61,214,196,.14);color:var(--teal)}
.feature-info{min-width:0}
.feature-name{font-family:var(--mono);font-size:13px;font-weight:600}
.feature-desc{font-size:12px;color:var(--faint);line-height:1.4;margin-top:2px}
.switch{
  margin-left:auto;flex:none;width:38px;height:22px;border-radius:11px;
  background:#262d3b;position:relative;transition:background .2s;
}
.switch::after{
  content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;
  background:#8b94a6;transition:all .2s;
}
.feature.on .switch{background:rgba(61,214,196,.4)}
.feature.on .switch::after{left:19px;background:var(--teal);box-shadow:0 0 10px var(--teal-glow)}
.feature .badge-required{font-size:9px;font-family:var(--mono);letter-spacing:.1em;color:var(--faint);border:1px dashed var(--line);padding:1px 5px;border-radius:2px}

/* ---------- advanced detail ---------- */
.adv-detail{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:16px}
.adv-block{
  border:1px solid var(--line-soft);border-left:2px solid var(--ember);
  background:var(--bg-2);border-radius:4px;padding:16px;
  animation:slide-in .25s ease;
}
.adv-block h4{font-family:var(--mono);font-size:12px;letter-spacing:.12em;color:var(--ember);margin-bottom:12px;display:flex;align-items:center;gap:8px}
.adv-inner{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.adv-inner .field-label{font-size:10px}
.adv-inner input{padding:9px 11px;font-size:13px}

/* ---------- preview ---------- */
.preview-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:stretch}
.token-card{
  background:
    radial-gradient(ellipse 90% 70% at 20% 0%,rgba(255,122,47,.1),transparent 55%),
    radial-gradient(ellipse 80% 60% at 100% 100%,rgba(61,214,196,.07),transparent 55%),
    var(--panel-2);
  border:1px solid var(--line-soft);border-radius:6px;padding:22px;
  position:relative;overflow:hidden;
}
.token-card::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.03) 45%,transparent 60%);
  background-size:250% 100%;animation:sheen 6s linear infinite;
}
@keyframes sheen{to{background-position:-250% 0}}
.token-card-top{display:flex;align-items:center;gap:16px}
.token-avatar{
  width:58px;height:58px;flex:none;border-radius:14px;display:grid;place-items:center;
  font-family:var(--mono);font-weight:700;font-size:16px;color:#0a0c10;
  background:linear-gradient(135deg,var(--ember) 0%,#ffb14e 50%,var(--teal) 130%);
  box-shadow:0 8px 24px -8px var(--ember-glow);
}
.token-name{font-family:var(--mono);font-size:20px;font-weight:700;letter-spacing:.01em}
.token-symbol{font-family:var(--mono);font-size:12px;color:var(--teal);margin-top:2px;letter-spacing:.06em}
.token-divider{height:1px;background:linear-gradient(90deg,var(--line-soft),transparent);margin:18px 0}
.token-rows{display:grid;grid-template-columns:1fr 1fr;gap:10px 22px}
.trow{display:flex;align-items:baseline;justify-content:space-between;gap:10px;border-bottom:1px dashed var(--line-soft);padding-bottom:8px}
.trow span{font-family:var(--mono);font-size:11px;color:var(--faint);letter-spacing:.08em}
.trow b{font-family:var(--mono);font-size:12px;font-weight:500;text-align:right}
.trow b.teal{color:var(--teal)}.trow b.ember{color:var(--ember)}.trow b.off{color:var(--faint)}

.generate-zone{display:flex;flex-direction:column;justify-content:center;gap:14px;min-width:280px}
.btn-forge{
  position:relative;overflow:hidden;cursor:pointer;
  font-family:var(--mono);font-weight:700;font-size:16px;letter-spacing:.06em;
  color:#0a0c10;background:linear-gradient(135deg,var(--ember) 0%,#ffb14e 100%);
  border:none;border-radius:5px;padding:18px 34px;
  transition:transform .15s,box-shadow .15s,filter .15s;
}
.btn-forge:hover{transform:translateY(-2px);box-shadow:0 14px 40px -10px var(--ember-glow);filter:brightness(1.05)}
.btn-forge:active{transform:translateY(0)}
.btn-glow{position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);background-size:250% 100%;animation:sheen 3.5s linear infinite}
.generate-hint{font-size:12px;color:var(--faint);text-align:center;font-family:var(--mono);letter-spacing:.02em}

/* ---------- output ---------- */
.output{margin-top:44px}
.output-head{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  background:linear-gradient(180deg,var(--panel),var(--bg-2));
  border:1px solid var(--line-soft);border-bottom:none;border-radius:6px 6px 0 0;padding:18px 22px;
}
.output-title{display:flex;align-items:center;gap:14px}
.output-title h2{font-family:var(--mono);font-size:18px;font-weight:600}
.output-actions{display:flex;gap:10px;flex-wrap:wrap}
.btn-ghost{
  cursor:pointer;font-family:var(--mono);font-size:12px;letter-spacing:.05em;
  color:var(--teal);background:transparent;border:1px solid rgba(61,214,196,.4);
  border-radius:4px;padding:9px 16px;transition:all .15s;
}
.btn-ghost:hover{background:rgba(61,214,196,.08);box-shadow:0 0 0 3px var(--teal-glow)}
.btn-ghost.ember{color:var(--ember);border-color:rgba(255,122,47,.4)}
.btn-ghost.ember:hover{background:rgba(255,122,47,.08);box-shadow:0 0 0 3px var(--ember-glow)}
.btn-ghost.done{color:var(--ok);border-color:rgba(87,214,141,.5)}
.tabbar{display:flex;gap:4px;background:var(--bg-2);border:1px solid var(--line-soft);border-bottom:none;padding:10px 14px 0;border-radius:0}
.tab{
  cursor:pointer;font-family:var(--mono);font-size:12px;letter-spacing:.1em;
  color:var(--faint);background:transparent;border:1px solid transparent;border-bottom:none;
  padding:9px 18px;border-radius:4px 4px 0 0;
}
.tab.active{color:var(--ember);background:var(--panel);border-color:var(--line-soft)}
.code-wrap{border:1px solid var(--line-soft);border-radius:0 0 6px 6px;overflow:hidden;background:#0b0e13}
.code-scroll{max-height:640px;overflow:auto;padding:20px;font-family:var(--mono);font-size:13px;line-height:1.7;white-space:pre;color:#c8d0dd}
.code-scroll::-webkit-scrollbar,.code-scroll::-webkit-scrollbar,.deploy-view::-webkit-scrollbar{width:10px;height:10px}
.code-scroll::-webkit-scrollbar-thumb,.deploy-view::-webkit-scrollbar-thumb{background:#232a38;border-radius:5px}
.code-scroll::-webkit-scrollbar-thumb:hover{background:#2e3646}
.deploy-view{max-height:640px;overflow:auto;padding:20px;font-size:14px;line-height:1.8;color:#c8d0dd}
.deploy-view h4{font-family:var(--mono);font-size:13px;letter-spacing:.12em;color:var(--ember);margin:22px 0 8px}
.deploy-view h4:first-child{margin-top:0}
.deploy-view p{color:var(--muted);margin-bottom:8px}
.deploy-view code.inline{font-family:var(--mono);font-size:12px;background:#171b25;border:1px solid var(--line-soft);padding:1px 7px;border-radius:3px;color:var(--teal)}
.deploy-view pre{font-family:var(--mono);font-size:12px;background:#0d1016;border:1px solid var(--line-soft);border-radius:4px;padding:14px 16px;overflow:auto;margin:8px 0 14px;color:#aeb7c6;white-space:pre}
.deploy-view ul{padding-left:20px;margin:6px 0 12px}
.deploy-view li{margin-bottom:6px;color:var(--muted)}
.deploy-view .warn-box{border:1px solid rgba(245,182,66,.35);background:rgba(245,182,66,.05);border-radius:4px;padding:12px 14px;color:var(--warn);font-size:13px;margin:12px 0}
.deploy-view .ok-box{border:1px solid rgba(87,214,141,.35);background:rgba(87,214,141,.05);border-radius:4px;padding:12px 14px;color:var(--ok);font-size:13px;margin:12px 0}

/* highlight colors */
.hl-kw{color:#ff8a55}.hl-type{color:#5ad1ff}.hl-fn{color:#ffd479}.hl-num{color:#c9a7ff}
.hl-str{color:#8ee7c8}.hl-com{color:#556072}.hl-prag{color:#ff8a55;font-weight:600}

/* ---------- footer ---------- */
.foot{padding:48px 0 40px;text-align:center;font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--faint)}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(16px);animation:reveal .6s cubic-bezier(.22,1,.36,1) forwards;animation-delay:var(--d,0s)}
@keyframes reveal{to{opacity:1;transform:none}}
@keyframes slide-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

@media (max-width:860px){
  .form-grid,.adv-detail,.preview-row{grid-template-columns:1fr}
  .generate-zone{min-width:0}
  .hero{padding:60px 0 40px}
  .panel{padding:20px}
}