:root {
  --bg: #04020b;
  --mint: #5fffd0;
  --green: #3dff8b;
  --teal: #19c9b5;
  --magenta: #ff3df0;
  --pink: #ff6ad5;
  --ink: #dffcf5;
  --muted: #8fb8b0;
  --panel: rgba(8, 10, 26, 0.68);
  --line: rgba(95, 255, 208, 0.22);
  --font-head: 'Orbitron', 'Arial Black', sans-serif;
  --font-body: 'Exo 2', system-ui, sans-serif;
  --font-mono: 'Share Tech Mono', ui-monospace, monospace;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-body); overflow-x: hidden; }
#sky { position: fixed; inset: 0; z-index: 0; display: block; }
.scanlines { position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(255,255,255,.025) 0 1px, transparent 1px 3px), radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.55) 100%); }
body > *:not(#sky):not(.scanlines) { position: relative; z-index: 2; }
a { color: var(--mint); }
b { font-weight: 600; }

/* ---------- buttons ---------- */
.btn { --c: var(--mint); display: inline-flex; align-items: center; gap: .5em; font: 700 14px/1 var(--font-head); letter-spacing: .12em; text-transform: uppercase;
  padding: 14px 22px; border-radius: 10px; border: 1px solid var(--c); color: var(--ink); background: rgba(10, 20, 30, .5); cursor: pointer; text-decoration: none;
  transition: transform .15s, box-shadow .25s, background .25s; box-shadow: 0 0 0 rgba(0,0,0,0); }
.btn:hover { transform: translateY(-2px); box-shadow: 0 0 22px color-mix(in srgb, var(--c) 55%, transparent), inset 0 0 12px color-mix(in srgb, var(--c) 25%, transparent); }
.btn:active { transform: translateY(0) scale(.98); }
.btn-primary { background: linear-gradient(135deg, rgba(61,255,139,.25), rgba(25,201,181,.25)); box-shadow: 0 0 18px rgba(61,255,139,.35); }
.btn-ghost { --c: var(--magenta); }
.btn-small { padding: 9px 12px; font-size: 11px; }
.icon-btn { background: none; border: 1px solid var(--line); color: var(--ink); border-radius: 8px; padding: 6px 9px; cursor: pointer; font-size: 15px; }
.link-btn { background: none; border: none; color: var(--pink); cursor: pointer; text-decoration: underline; font: inherit; }

/* ---------- nav ---------- */
.nav { position: fixed !important; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center; padding: 10px 22px;
  background: linear-gradient(to bottom, rgba(4,2,11,.85), rgba(4,2,11,0)); backdrop-filter: blur(4px); z-index: 20 !important; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); font: 900 14px var(--font-head); letter-spacing: .14em; }
.brand-icon { width: 38px; height: 38px; filter: drop-shadow(0 0 8px rgba(95,255,208,.6)); }
.brand em { font: 400 22px 'Mr Dafoe', cursive; letter-spacing: 0; color: var(--pink); text-shadow: 0 0 10px var(--magenta); margin-left: 4px; }
.links { display: flex; gap: 18px; align-items: center; }
.links a { color: var(--ink); text-decoration: none; font: 600 12px var(--font-head); letter-spacing: .15em; text-transform: uppercase; opacity: .8; }
.links a:hover { opacity: 1; color: var(--mint); text-shadow: 0 0 10px var(--mint); }

/* ---------- hero ---------- */
.hero { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 90px 16px 60px; overflow: hidden; }
.hero-logo { width: min(620px, 92vw); height: auto; will-change: transform; animation: float 6s ease-in-out infinite; overflow: visible; }
.emb-title { font: 900 92px var(--font-head); letter-spacing: 10px; }
.emb-script { font: 400 64px 'Mr Dafoe', cursive; }
.spin-slow { transform-origin: 300px 170px; animation: spin 30s linear infinite; }
.torch-flame { transform-origin: 300px 150px; animation: flick .18s ease-in-out infinite alternate; }
@keyframes flick { from { transform: scale(1, 1); } to { transform: scale(1.04, .95) skewX(2deg); } }
@keyframes float { 50% { translate: 0 -12px; } }
.hero-glow { position: absolute; width: 900px; height: 900px; left: 50%; top: 45%; translate: -50% -50%; border-radius: 50%; pointer-events: none;
  background: conic-gradient(from 0deg, rgba(61,255,139,.0), rgba(61,255,139,.18), rgba(255,61,240,.16), rgba(25,201,181,.18), rgba(61,255,139,0)); filter: blur(60px); animation: spin 18s linear infinite; }
@keyframes spin { to { rotate: 360deg; } }
.hero-rings { position: absolute; left: 50%; top: 44%; translate: -50% -50%; pointer-events: none; }
.hero-rings i { position: absolute; left: 50%; top: 50%; border: 1px solid rgba(95,255,208,.25); border-radius: 50%; translate: -50% -50%; animation: ring 6s linear infinite; }
.hero-rings i:nth-child(2) { animation-delay: 2s; border-color: rgba(255,61,240,.25); }
.hero-rings i:nth-child(3) { animation-delay: 4s; }
@keyframes ring { from { width: 300px; height: 300px; opacity: 1; } to { width: 1100px; height: 1100px; opacity: 0; } }
.tagline { font: 700 clamp(18px, 3vw, 28px) var(--font-head); letter-spacing: .08em; margin: 6px 0 22px; text-shadow: 0 0 12px rgba(95,255,208,.6); }
.tagline b { color: var(--green); }
.script { font: 400 clamp(30px, 5vw, 48px) 'Mr Dafoe', cursive; letter-spacing: 0; background: linear-gradient(180deg, #ffd6f6, #ff3df0 55%, #8a0f9a 56%, #ff8de9);
  -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 10px rgba(255,61,240,.8)); padding: 0 6px; }
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.hero-stats { display: flex; gap: clamp(18px, 5vw, 60px); margin-top: 38px; flex-wrap: wrap; justify-content: center; }
.hero-stats div { display: flex; flex-direction: column; }
.hero-stats b { font: 900 30px var(--font-head); color: var(--mint); text-shadow: 0 0 14px var(--teal); }
.hero-stats span { font: 12px var(--font-mono); color: var(--muted); letter-spacing: .1em; text-transform: uppercase; }
.scroll-hint { position: absolute; bottom: 22px; left: 50%; translate: -50% 0; width: 24px; height: 38px; border: 1px solid var(--line); border-radius: 12px; }
.scroll-hint span { position: absolute; left: 50%; top: 7px; width: 3px; height: 8px; border-radius: 2px; background: var(--mint); translate: -50% 0; animation: sh 1.6s infinite; }
@keyframes sh { to { top: 22px; opacity: 0; } }

/* ---------- sections ---------- */
.section { padding: 110px clamp(16px, 4vw, 48px) 80px; max-width: 1280px; margin: 0 auto; }
.section-head { text-align: center; margin-bottom: 36px; }
.section-head p, .sky-head p { color: var(--muted); max-width: 640px; margin: 10px auto 0; font-size: 17px; }
.chrome-title { margin: 0; font: 900 clamp(30px, 5vw, 54px) var(--font-head); letter-spacing: .06em; text-transform: uppercase;
  background: linear-gradient(180deg, #f2fffb 0%, #9dffe0 40%, #0e7f68 50%, #3dff8b 58%, #d6fff2 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(-2px 0 0 rgba(255,61,240,.55)) drop-shadow(2px 0 0 rgba(0,229,255,.45)) drop-shadow(0 0 18px rgba(61,255,139,.35)); }
.solid { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.reveal { opacity: 0; transform: translateY(30px); transition: opacity .9s, transform .9s cubic-bezier(.2,.8,.2,1); }
.reveal.in { opacity: 1; transform: none; }

/* ---------- builder ---------- */
.builder { display: grid; grid-template-columns: minmax(300px, 1fr) minmax(320px, 1.15fr); gap: 22px; align-items: start; }
.pad-wrap { position: relative; overflow: hidden; aspect-ratio: 4 / 5; position: sticky; top: 80px; box-shadow: 0 0 40px rgba(25,201,181,.15), inset 0 0 60px rgba(255,61,240,.08); }
#padCanvas { width: 100%; height: 100%; display: block; }
.pad-hud { position: absolute; left: 12px; right: 12px; bottom: 10px; text-align: center; pointer-events: none; }
.cfg-desc { font: 11px var(--font-mono); color: var(--muted); letter-spacing: .05em; }
.countdown { position: fixed !important; inset: 0; z-index: 35 !important; display: grid; place-content: center; text-align: center; pointer-events: none; color: #fff; }
.countdown.pop { animation: pop 1s ease-out both; }
.cd-t { font: 600 14px var(--font-mono); letter-spacing: .6em; color: var(--mint); text-shadow: 0 0 10px var(--teal); }
.cd-num { font: 900 clamp(110px, 22vw, 220px)/1 var(--font-head); background: linear-gradient(180deg, #fff 0%, #ffd6f6 45%, #ff3df0 52%, #8a0f9a 60%, #ffb3f1 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 18px rgba(255,61,240,.9)) drop-shadow(-5px 0 0 rgba(0,229,255,.6)) drop-shadow(5px 0 0 rgba(255,61,240,.6)); }
.countdown.lift .cd-num { font-size: clamp(56px, 11vw, 130px); background: linear-gradient(180deg, #fff, #fff6d8 40%, #ffb347 55%, #ff3df0); -webkit-background-clip: text; background-clip: text; }
.cd-cap { font: 700 clamp(12px, 1.6vw, 18px) var(--font-head); letter-spacing: .5em; color: #fff; text-shadow: 0 0 12px var(--magenta); margin-top: 8px; }
@keyframes pop { 0% { transform: scale(1.8); opacity: 0; filter: blur(8px); } 18% { transform: scale(1); opacity: 1; filter: blur(0); } 80% { opacity: 1; } 100% { transform: scale(.92); opacity: 0; } }
body::before, body::after { content: ''; position: fixed; left: 0; right: 0; height: 0; background: #000; z-index: 34; transition: height .9s cubic-bezier(.7,0,.2,1); pointer-events: none; }
body::before { top: 0; } body::after { bottom: 0; }
body.cinematic::before, body.cinematic::after { height: 10vh; }
body.cinematic .sky-head, body.cinematic .feed, body.cinematic .sky-again, body.cinematic .nav, body.cinematic .auto-layer { opacity: 0 !important; pointer-events: none; }
.sky-head, .feed, .sky-again, .nav { transition: opacity .8s; }
body.flash #sky { animation: flashA .7s ease-out; }
@keyframes flashA { 0% { filter: brightness(2.6) saturate(1.4); } 100% { filter: none; } }
.icon-btn.on { border-color: var(--magenta); box-shadow: 0 0 12px rgba(255,61,240,.5); }
.auto-layer { position: fixed !important; inset: 0; z-index: 6 !important; pointer-events: none; transition: opacity .6s; }
.auto-label { position: absolute; left: 0; top: 0; max-width: 260px; }
.al-in { position: relative; display: flex; gap: 8px; align-items: center; padding: 7px 10px 7px 6px; border-radius: 12px;
  background: rgba(6,8,22,.72); border: 1px solid rgba(95,255,208,.35); box-shadow: 0 0 18px rgba(95,255,208,.18);
  animation: alIn 1.4s cubic-bezier(.22,.8,.3,1) both; }
.auto-label.out .al-in { animation: alOut 2.6s cubic-bezier(.4,0,.2,1) forwards; }
@keyframes alIn { from { opacity: 0; filter: blur(8px); transform: translateY(8px) scale(.97); } to { opacity: 1; filter: blur(0); transform: none; } }
@keyframes alOut { 0% { opacity: 1; filter: blur(0); transform: none; } 100% { opacity: 0; filter: blur(10px); transform: translateY(-14px) scale(1.04); letter-spacing: .08em; } }
.mote { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #c8fff0; box-shadow: 0 0 6px #5fffd0; opacity: 0; animation: mote 2.2s ease-out forwards; pointer-events: none; }
@keyframes mote { 0% { opacity: 0; transform: translate(0,0); } 20% { opacity: .9; } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.3); } }
.auto-label::before { content: ''; position: absolute; left: -14px; top: 22px; width: 14px; height: 1px; background: linear-gradient(90deg, transparent, rgba(95,255,208,.8)); }
.auto-label canvas { width: 24px; height: 36px; flex: none; }
.auto-label b { display: block; font: 700 12px var(--font-head); color: var(--mint); letter-spacing: .05em; }
.auto-label i { display: block; font-size: 13px; color: #fff; margin: 2px 0; }
.auto-label small { font: 10px var(--font-mono); color: var(--muted); }

.pad-wrap.shake { animation: shake .09s linear infinite; }
@keyframes shake { 25% { translate: 2px -1px; } 50% { translate: -2px 1px; } 75% { translate: 1px 2px; } }

.controls { padding: 18px; }
.tabs { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 12px; }
.tab { font: 700 11px var(--font-head); letter-spacing: .1em; text-transform: uppercase; padding: 10px 4px; border-radius: 8px; border: 1px solid var(--line);
  background: rgba(255,255,255,.02); color: var(--muted); cursor: pointer; transition: all .2s; }
.tab[aria-selected="true"] { color: #031; background: linear-gradient(135deg, var(--green), var(--mint)); border-color: transparent; box-shadow: 0 0 16px rgba(61,255,139,.5); }
.slot-head { display: flex; justify-content: space-between; align-items: center; font: 600 13px var(--font-mono); color: var(--muted); margin: 4px 2px 10px; gap: 10px; flex-wrap: wrap; }
.lock { display: flex; align-items: center; gap: 6px; cursor: pointer; font-size: 12px; }
.lock input { accent-color: var(--magenta); }
.part-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.part { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 2px 6px; border-radius: 10px; border: 1px solid rgba(95,255,208,.12);
  background: radial-gradient(circle at 50% 30%, rgba(95,255,208,.08), transparent 70%); cursor: pointer; color: var(--ink); transition: transform .15s, border-color .2s, box-shadow .2s; }
.part:hover { transform: translateY(-3px); border-color: var(--mint); box-shadow: 0 0 14px rgba(95,255,208,.3); }
.part[aria-pressed="true"] { border-color: var(--magenta); box-shadow: 0 0 16px rgba(255,61,240,.45), inset 0 0 14px rgba(255,61,240,.15); }
.part canvas { width: 56px; height: 80px; }
.part .ai-tile { width: 72px; height: 72px; object-fit: contain; filter: drop-shadow(0 0 6px rgba(95,255,208,.35)); }
.part span { font: 10px var(--font-mono); text-align: center; line-height: 1.15; min-height: 2.3em; }
.part.swatch canvas { width: 56px; height: 80px; }
.random-row { display: flex; align-items: center; justify-content: space-between; margin: 16px 0; gap: 10px; flex-wrap: wrap; }
.btn-random { --c: var(--magenta); background: linear-gradient(135deg, rgba(255,61,240,.25), rgba(123,61,255,.25)); }
.btn-random .dice { display: inline-block; font-size: 18px; transition: transform .6s; }
.btn-random.rolling .dice { animation: roll .35s linear infinite; }
@keyframes roll { to { transform: rotate(360deg); } }
.combos { font: 12px var(--font-mono); color: var(--muted); }
.combos b { color: var(--pink); }
.form { display: grid; gap: 10px; }
label { font: 12px var(--font-mono); color: var(--muted); letter-spacing: .05em; display: block; }
input, textarea { display: block; width: 100%; margin-top: 5px; padding: 11px 12px; border-radius: 10px; border: 1px solid var(--line); background: rgba(0,0,0,.35);
  color: var(--ink); font: 15px var(--font-body); outline: none; transition: border-color .2s, box-shadow .2s; resize: none; }
input:focus, textarea:focus { border-color: var(--mint); box-shadow: 0 0 12px rgba(95,255,208,.35); }
.count { float: right; }
.invalid { animation: nope .4s; border-color: var(--magenta) !important; }
@keyframes nope { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.wallet { margin-top: 14px; padding: 14px; border-radius: 12px; border: 1px dashed rgba(255,61,240,.4); background: rgba(255,61,240,.04); }
.wallet.flash { animation: flash 1s; }
@keyframes flash { 30% { box-shadow: 0 0 30px rgba(255,61,240,.6); } }
.wallet-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; }
.wl-label { font: 700 12px var(--font-head); letter-spacing: .12em; }
.wl-addr { font: 12px var(--font-mono); color: var(--muted); margin-top: 3px; }
.demo-badge { font: 9px var(--font-mono); padding: 2px 5px; border-radius: 4px; background: var(--magenta); color: #fff; margin-left: 4px; vertical-align: middle; }
.alt-meter { height: 6px; border-radius: 3px; background: rgba(255,255,255,.07); margin-top: 10px; overflow: hidden; }
.alt-fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--teal), var(--green), var(--magenta)); box-shadow: 0 0 10px var(--green); transition: width .6s cubic-bezier(.2,.8,.2,1); }
.alt-text { font: 12px var(--font-mono); color: var(--muted); margin-top: 6px; }
.btn-launch { width: 100%; justify-content: center; margin-top: 16px; padding: 18px; font-size: 20px; letter-spacing: .35em; --c: var(--green);
  background: linear-gradient(135deg, #0f6b4c, #19c9b5 40%, #ff3df0); background-size: 200% 200%; animation: grad 4s ease infinite; border: none; color: #fff;
  text-shadow: 0 0 8px rgba(0,0,0,.6); box-shadow: 0 0 30px rgba(61,255,139,.35); }
.btn-launch:disabled { filter: grayscale(.6) brightness(.7); cursor: wait; }
@keyframes grad { 50% { background-position: 100% 50%; } }

/* ---------- sky section ---------- */
.sky-section { min-height: 100vh; padding: 86px 16px 24px; display: flex; flex-direction: column; align-items: center; }
.sky-head { text-align: center; }
.sky-head p { text-shadow: 0 0 8px #000; }
.sky-stats { display: inline-flex; gap: 18px; padding: 8px 16px; margin-top: 12px; font: 13px var(--font-mono); border-radius: 999px; flex-wrap: wrap; justify-content: center; }
.sky-stats b { color: var(--mint); }
.feed { position: absolute !important; right: 18px; bottom: 22%; width: 270px; padding: 12px 14px; font: 12px var(--font-mono); }
.feed-title { font: 700 11px var(--font-head); letter-spacing: .15em; color: var(--pink); margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: #ff3d6e; box-shadow: 0 0 8px #ff3d6e; animation: blink 1s infinite; }
@keyframes blink { 50% { opacity: .3; } }
.feed ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.feed li { display: flex; justify-content: space-between; gap: 8px; animation: slidein .5s ease-out; color: var(--ink); }
.feed li span:last-child { color: var(--mint); white-space: nowrap; }
.feed li.mine span:first-child { color: var(--pink); }
@keyframes slidein { from { opacity: 0; transform: translateX(20px); } }
.sky-again { position: absolute !important; left: 50%; bottom: 3%; translate: -50% 0; }

/* ---------- tokenomics ---------- */
.toko { display: grid; grid-template-columns: 1fr 1.3fr 1fr; gap: 20px; align-items: stretch; }
.donut-card { padding: 22px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.donut { width: 100%; max-width: 240px; }
.ring-bg { fill: none; stroke: rgba(255,255,255,.05); stroke-width: 20; }
.ring { fill: none; stroke-width: 20; transform: rotate(-90deg); transform-origin: 100px 100px; transition: stroke-dasharray 1.6s cubic-bezier(.2,.8,.2,1); }
.ring-burn { stroke: url(#gBurn); filter: drop-shadow(0 0 6px rgba(255,61,240,.6)); }
.ring-rest { stroke: rgba(143,184,176,.45); }
.d-big { font: 900 44px var(--font-head); fill: #fff; text-anchor: middle; }
.d-small { font: 12px var(--font-mono); fill: var(--muted); text-anchor: middle; letter-spacing: .3em; }
.legend { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 8px; font-size: 14px; }
.sw { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 8px; vertical-align: -1px; }
.sw.burn { background: linear-gradient(135deg, var(--magenta), var(--green)); }
.sw.rest { background: rgba(143,184,176,.45); }
.cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.t-card { padding: 18px; transition: transform .25s, box-shadow .25s; }
.t-card:hover { transform: translateY(-4px) rotate(-.4deg); box-shadow: 0 0 26px rgba(95,255,208,.25); }
.t-num { font: 900 34px var(--font-head); color: var(--mint); text-shadow: 0 0 14px var(--teal); }
.burn-txt { color: var(--pink) !important; text-shadow: 0 0 14px var(--magenta) !important; }
.t-card h3, .calc h3 { font: 700 14px var(--font-head); letter-spacing: .1em; text-transform: uppercase; margin: 8px 0 6px; }
.t-card p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.45; }
.calc { padding: 20px; }
.calc-rows { margin-top: 14px; display: grid; gap: 8px; font-size: 14px; }
.calc-rows div { display: flex; justify-content: space-between; border-bottom: 1px dashed rgba(95,255,208,.12); padding-bottom: 6px; }
.calc-rows b { font-family: var(--font-mono); color: var(--mint); }
.calc-rows .total b { color: #fff; font-size: 16px; }
.fine { font-size: 12px; color: var(--muted); }

.footer { margin: 40px auto 30px; max-width: 900px; text-align: center; padding: 24px; }
.footer-icon { width: 54px; height: 54px; filter: drop-shadow(0 0 10px rgba(95,255,208,.6)); }
.footer p { color: var(--muted); font-size: 14px; }

/* ---------- tooltip / toast ---------- */
.tooltip { position: fixed !important; z-index: 30 !important; display: flex; gap: 10px; align-items: center; max-width: 300px; padding: 10px 12px; pointer-events: none;
  border-radius: 12px; border: 1px solid rgba(95,255,208,.45); background: rgba(6,8,22,.88); backdrop-filter: blur(8px);
  box-shadow: 0 0 24px rgba(95,255,208,.25), inset 0 0 18px rgba(255,61,240,.08); animation: tt .2s ease-out; }
.tooltip[hidden] { display: none; }
@keyframes tt { from { opacity: 0; transform: translateY(6px) scale(.96); } }
#ttRocket { width: 40px; height: 60px; flex: none; }
.tt-name { font: 700 14px var(--font-head); color: var(--mint); letter-spacing: .05em; }
.tt-msg { font-size: 14px; margin: 4px 0; color: #fff; font-style: italic; word-break: break-word; }
.tt-meta { font: 11px var(--font-mono); color: var(--muted); }
.you-badge { font: 9px var(--font-mono); background: var(--magenta); color: #fff; padding: 2px 5px; border-radius: 4px; vertical-align: middle; }
.toast { position: fixed !important; left: 50%; bottom: 26px; translate: -50% 140%; z-index: 40 !important; padding: 12px 18px; border-radius: 12px; font: 14px var(--font-body);
  background: rgba(6,8,22,.92); border: 1px solid var(--magenta); box-shadow: 0 0 24px rgba(255,61,240,.4); transition: translate .4s cubic-bezier(.2,.8,.2,1); max-width: calc(100vw - 32px); }
.toast.show { translate: -50% 0; }

/* ---------- responsive ---------- */
@media (max-width: 980px) {
  .builder { grid-template-columns: 1fr; }
  .pad-wrap { position: relative; top: 0; max-height: 70vh; margin: 0 auto; width: min(100%, 460px); }
  .toko { grid-template-columns: 1fr; }
  .feed { position: relative !important; right: auto; bottom: auto; margin-top: auto; width: min(100%, 340px); }
  .sky-again { position: relative !important; left: auto; translate: none; margin-top: 12px; bottom: auto; }
}
@media (max-width: 640px) {
  .links a { display: none; }
  .tabs { grid-template-columns: repeat(4, 1fr); }
  .part-grid { grid-template-columns: repeat(5, 1fr); gap: 5px; }
  .part canvas { width: 44px; height: 64px; }
  .part span { font-size: 9px; }
  .part .ai-tile { width: 52px; height: 52px; }
  .cards { grid-template-columns: 1fr; }
  .brand span { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; }
  html { scroll-behavior: auto; }
}

/* ---------- customize ---------- */
.custom { margin-top: 14px; padding: 12px; border-radius: 12px; border: 1px solid rgba(95,255,208,.18); background: linear-gradient(135deg, rgba(95,255,208,.05), rgba(255,61,240,.05)); }
.cust-title { font: 700 12px var(--font-head); letter-spacing: .15em; text-transform: uppercase; margin-bottom: 8px; color: var(--mint); }
.cust-row { display: grid; grid-template-columns: repeat(3, 1fr) auto; gap: 8px; align-items: end; }
.cust-row2 { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: end; margin-top: 10px; }
input[type=color] { height: 38px; padding: 3px; cursor: pointer; }
.logo-box { display: flex; align-items: center; gap: 8px; }
.logo-prev { width: 38px; height: 38px; border-radius: 50%; border: 1px dashed var(--line); background: center/cover no-repeat rgba(0,0,0,.3); }
@media (max-width: 640px) { .cust-row { grid-template-columns: repeat(3, 1fr); } .cust-row .btn { grid-column: 1 / -1; } .cust-row2 { grid-template-columns: 1fr; } }
input[hidden] { display: none !important; }
.countdown { place-content: start center; padding-top: 13vh; }

/* ---------- premium vehicles ---------- */
.premium-title { font: 700 12px var(--font-head); letter-spacing: .15em; text-transform: uppercase; color: #ffd84f; margin: 0 2px 8px; display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.premium-title span { font: 11px var(--font-mono); letter-spacing: .03em; text-transform: none; color: var(--muted); }
.premium { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.pv { position: relative; display: flex; gap: 10px; align-items: center; padding: 10px; border-radius: 12px; cursor: pointer; text-align: left; color: var(--ink);
  border: 1px solid rgba(255,216,79,.35); background: linear-gradient(135deg, rgba(255,216,79,.08), rgba(255,61,240,.06)); transition: transform .15s, box-shadow .25s, border-color .25s; font: inherit; }
.pv:hover { transform: translateY(-2px); box-shadow: 0 0 22px rgba(255,216,79,.3); }
.pv canvas { width: 54px; height: 70px; flex: none; }
.pv b { display: block; font: 800 13px var(--font-head); letter-spacing: .06em; color: #ffe27a; text-shadow: 0 0 10px rgba(255,216,79,.5); }
.pv small { display: block; font: 11px var(--font-mono); color: var(--muted); margin-top: 4px; line-height: 1.35; }
.pv .st { display: inline-block; margin-top: 6px; font: 700 10px var(--font-mono); padding: 2px 6px; border-radius: 4px; background: rgba(255,255,255,.08); }
.pv.locked { filter: saturate(.55); }
.pv.locked .st { color: #ffb3b3; }
.pv.ok .st { color: #031; background: var(--green); }
.pv[aria-pressed="true"] { border-color: #ffd84f; box-shadow: 0 0 26px rgba(255,216,79,.55), inset 0 0 18px rgba(255,216,79,.15); }
.wl-btns { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.btn-verify { --c: #ffd84f; }
.btn-verify.done { --c: var(--green); color: var(--green); }
.wl-usd { font: 12px var(--font-mono); color: #ffe27a; margin-top: 4px; }
@media (max-width: 640px) { .premium { grid-template-columns: 1fr; } }

.hero-wrap { will-change: transform; display: flex; justify-content: center; }
.hero-wrap { position: relative; }
.hero-img { position: relative; width: min(400px, 70vw); height: auto; animation: float 6s ease-in-out infinite, neonPulse 3.2s ease-in-out infinite;
  filter: brightness(1.12) drop-shadow(0 0 2px #c9ffd8) drop-shadow(0 0 10px rgba(110,240,140,.95)) drop-shadow(0 0 28px rgba(61,255,139,.7)) drop-shadow(0 0 70px rgba(61,255,160,.4)); }
.hero-glow { position: absolute; left: 50%; top: 42%; width: 70%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(61,255,139,.28), rgba(61,255,208,.12) 40%, rgba(255,61,240,.08) 62%, transparent 72%); filter: blur(20px); animation: glowBreath 3.2s ease-in-out infinite; }
@keyframes neonPulse { 0%, 100% { opacity: 1; } 46% { opacity: 1; } 48% { opacity: .82; } 50% { opacity: 1; } 52% { opacity: .9; } 54% { opacity: 1; } }
@keyframes glowBreath { 0%, 100% { opacity: .75; transform: translate(-50%, -50%) scale(.95); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.05); } }
@media (prefers-reduced-motion: reduce) { .hero-img, .hero-glow { animation: none; } }
.hero-img[hidden], .brand-img[hidden] { display: none; }
.brand-img { width: 40px; height: 40px; object-fit: contain; filter: brightness(1.15) drop-shadow(0 0 3px rgba(110,240,140,.9)) drop-shadow(0 0 10px rgba(61,255,139,.6)); }

/* ---------- tax banner ---------- */
.tax-banner { position: fixed !important; top: 0; left: 0; right: 0; z-index: 21 !important; padding: 7px 16px; text-align: center; font: 13px var(--font-body); line-height: 1.35;
  background: linear-gradient(90deg, #3a0624, #5a0a3f 50%, #3a0624); border-bottom: 1px solid #ff3df0; box-shadow: 0 0 22px rgba(255,61,240,.45); color: #fff; }
.tax-banner .tb-warn { font: 800 13px var(--font-head); letter-spacing: .06em; color: #ffd84f; text-shadow: 0 0 10px rgba(255,216,79,.7); animation: blink 1.6s infinite; }
.tax-banner b { color: #7dffcf; }
.tax-banner .tb-why { color: #f2d6ec; }
.nav { top: 34px !important; }
@media (max-width: 760px) { .tax-banner .tb-why { display: none; } .nav { top: 30px !important; } }

/* ---------- thank-you + certificate ---------- */
.thanks { position: fixed !important; inset: 0; z-index: 50 !important; display: grid; place-items: center; padding: 16px; background: rgba(2,1,8,.72); backdrop-filter: blur(6px); animation: thIn .6s ease-out; overflow: auto; }
.thanks.out { opacity: 0; transition: opacity .4s; }
@keyframes thIn { from { opacity: 0; } }
.th-card { position: relative; display: grid; grid-template-columns: 1.1fr .9fr; gap: 22px; align-items: center; max-width: 980px; width: 100%; padding: 26px; box-shadow: 0 0 60px rgba(255,61,240,.3), 0 0 30px rgba(95,255,208,.2); animation: thPop .8s cubic-bezier(.2,.9,.2,1.1); }
@keyframes thPop { from { transform: scale(.9) translateY(20px); opacity: 0; } }
.th-x { position: absolute; top: 10px; right: 12px; background: none; border: none; color: var(--muted); font-size: 18px; cursor: pointer; }
.th-kicker { font: 700 12px var(--font-mono); letter-spacing: .4em; color: var(--mint); }
.th-title { margin: 6px 0 10px; font: 900 clamp(26px, 4vw, 40px) var(--font-head); background: linear-gradient(180deg, #fff, #ffd6f6 50%, #ff3df0); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 12px rgba(255,61,240,.6)); }
.th-text p { color: #e6f7f2; line-height: 1.55; }
.th-small { font-size: 13px; color: var(--muted) !important; }
.th-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.th-btns .btn { padding: 10px 14px; font-size: 11px; }
.th-mint { --c: #ffd84f; }
.th-share { margin-top: 18px; padding-top: 14px; border-top: 1px dashed rgba(95,255,208,.25); }
.th-share-title { font: 700 12px var(--font-head); letter-spacing: .15em; text-transform: uppercase; color: #ffe27a; }
.th-sharex { margin-top: 18px; padding: 16px 30px; font-size: 15px; letter-spacing: .08em; background: #000; color: #fff; border: 1px solid rgba(255,255,255,.5); box-shadow: 0 0 22px rgba(95,255,208,.35); }
.th-sharex:hover { background: #111; box-shadow: 0 0 34px rgba(95,255,208,.6); }
.th-hint:empty { display: none; }
.th-cert canvas { width: 100%; height: auto; border-radius: 12px; box-shadow: 0 0 30px rgba(95,255,208,.3); display: block; }
.th-spark { position: absolute; top: -10px; width: 4px; height: 10px; border-radius: 2px; animation: fall 3s linear forwards; opacity: .9; }
@keyframes fall { to { transform: translateY(105vh) rotate(540deg); opacity: 0; } }
@media (max-width: 800px) { .th-card { grid-template-columns: 1fr; } .th-cert { max-width: 340px; margin: 0 auto; } }

.sky-notice { margin: 10px auto 0; max-width: 640px; padding: 10px 14px; border-radius: 12px; font-size: 14px; color: #ffe9a8; background: rgba(40,20,4,.55); border: 1px solid rgba(255,216,79,.35); }
.sky-notice code { color: #5fffd0; }