/* ==========================================================
   Sky theme — blue sky, soft clouds, sun, a starry night panel.
   Loaded after style.css (and app.css) on every page.
   ========================================================== */
:root {
  --ink: #1e3555;
  --ink-2: #4d6585;
  --ink-3: #8aa0bb;
  --bg: #eaf5ff;
  --card: #ffffff;
  --line: #d6e8f8;
  --violet: #3b8fe8;        /* sky blue (primary) */
  --violet-2: #64a9f0;
  --violet-soft: #e2f0ff;
  --mint: #2bb59a;
  --sun: #ffc65a;           /* sunshine */
  --coral: #ff8a7a;
  --sky: #3b8fe8;
  --peach: #ffb38a;
  --night: #1b2a5c;
  --r: 26px;
  --r-sm: 16px;
  --b: 1.5px solid #cfe3f6;
  --sh: 0 18px 40px -22px rgba(30, 80, 150, .45), 0 2px 6px rgba(30, 80, 150, .06);
  --sh-sm: 0 6px 16px -8px rgba(30, 80, 150, .35);
  --display: 'Fredoka', 'Nunito', system-ui, sans-serif;
  --body: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* ---------- the sky ---------- */
body { background: var(--bg); }
body.dots {
  background:
    radial-gradient(circle 260px at 92% 0, rgba(255, 236, 170, .9), rgba(255, 220, 130, .35) 45%, transparent 100%),
    linear-gradient(180deg, #8fcaff 0, #b9deff 520px, #dff0ff 1100px, #eef7ff 1700px, #f5faff 100%);
  background-repeat: no-repeat;
}
::selection { background: var(--violet); color: #fff; }
h1, h2, h3, h4 { font-weight: 600; letter-spacing: -.005em; }

/* drifting clouds behind everything */
.sky { position: fixed; inset: 0; pointer-events: none; z-index: -1; overflow: hidden; }
.sky i { position: absolute; display: block; aspect-ratio: 2 / 1; background: url(sky/cloud.svg) center / contain no-repeat;
  filter: drop-shadow(0 10px 18px rgba(80, 140, 210, .18)); animation: drift linear infinite; }
.sky i:nth-child(1) { width: 260px; top: 9%;  animation-duration: 95s;  animation-delay: -10s; opacity: .95; }
.sky i:nth-child(2) { width: 170px; top: 28%; animation-duration: 120s; animation-delay: -70s; opacity: .7; }
.sky i:nth-child(3) { width: 320px; top: 52%; animation-duration: 140s; animation-delay: -35s; opacity: .55; }
.sky i:nth-child(4) { width: 140px; top: 70%; animation-duration: 105s; animation-delay: -88s; opacity: .6; }
.sky i:nth-child(5) { width: 220px; top: 86%; animation-duration: 130s; animation-delay: -5s;  opacity: .5; }
@keyframes drift { from { transform: translateX(-30vw); } to { transform: translateX(130vw); } }
@media (prefers-reduced-motion: reduce) { .sky i { animation: none; left: 10%; } .sky i:nth-child(even) { left: 65%; } }

/* ---------- buttons & chips ---------- */
.btn { border-radius: 999px; font-weight: 700; border: 1.5px solid #cfe3f6; background: #fff; box-shadow: var(--sh-sm); }
.btn:hover { box-shadow: 0 12px 22px -10px rgba(30, 80, 150, .45); }
.btn:active { box-shadow: 0 2px 6px -2px rgba(30, 80, 150, .4); }
.btn:disabled { box-shadow: none; }
.btn.primary { background: linear-gradient(180deg, #5aa8f5, #2f80dd); color: #fff; border-color: #2f7bd4; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 10px 20px -10px rgba(47, 128, 221, .8); }
.btn.primary:hover { background: linear-gradient(180deg, #67b1f8, #2a77d2); }
.btn.sun { background: linear-gradient(180deg, #ffd47a, #ffb43c); color: #4a3200; border-color: #f0a630; }
.btn.ghost { background: transparent; box-shadow: none; border-color: transparent; }
.btn.ghost:hover { background: rgba(255, 255, 255, .7); box-shadow: none; }
.chip { border-radius: 999px; letter-spacing: .06em; background: var(--violet-soft); color: #2470c6; }
.chip.free { background: #dcf7ef; color: #13876f; }
.chip.holder { background: #fff2d1; color: #8a5d00; }
.chip.soon { background: #ffe8e0; color: #c4513c; }
.chip.plan { background: #eef2f7; color: #5b6b80; }
.type { border-radius: 999px; border: 0; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .12); }

/* ---------- nav ---------- */
.nav { background: rgba(255, 255, 255, .55); backdrop-filter: blur(16px) saturate(1.3); border-bottom: 1px solid transparent; }
.nav.scrolled { background: rgba(255, 255, 255, .82); border-bottom-color: rgba(180, 210, 240, .7); box-shadow: 0 8px 24px -18px rgba(30, 80, 150, .5); }
.logo { font-weight: 700; }
.logo small { background: linear-gradient(180deg, #ffd47a, #ffb43c); color: #4a3200; border-radius: 999px; padding: 2px 8px; }
.nav-links a { border-radius: 999px; font-weight: 700; color: var(--ink-2); }
.nav-links a:hover { background: rgba(255, 255, 255, .85); color: var(--violet); }

/* ---------- hero ---------- */
.hero { overflow: visible; padding-bottom: 0; }
.hero h1 { font-weight: 700; color: #16325a; }
.hero h1 .hl { color: #2f80dd; }
.hero h1 .hl::after { background: rgba(255, 255, 255, .75); height: .2em; bottom: .06em; border-radius: 999px; transform: none; }
.hero .lead { color: #35527a; }
.eyebrow { border-radius: 999px; border: 1px solid rgba(255, 255, 255, .9); background: rgba(255, 255, 255, .7); backdrop-filter: blur(8px); }
.stat { background: rgba(255, 255, 255, .6); border: 1px solid rgba(255, 255, 255, .9); border-radius: 18px; padding: 10px 14px; backdrop-filter: blur(6px); }
.stat b { color: #2f80dd; font-family: var(--display); }

.stage .orb { border: 0; border-radius: 50%; overflow: hidden;
  background: radial-gradient(circle at 70% 27%, #fff7d6 0 26px, #ffd56b 27px 44px, rgba(255, 255, 255, .4) 45px 66px, transparent 67px),
    linear-gradient(180deg, #6db7ff 0, #a9d6ff 55%, #e3f2ff 100%);
  box-shadow: 0 0 0 10px rgba(255, 255, 255, .55), 0 0 0 22px rgba(255, 255, 255, .25), 0 40px 70px -30px rgba(30, 90, 170, .6); }
.stage .orb::before { border-radius: 0; inset: auto -8% -6% -8%; height: 46%;
  background: url(sky/cloud.svg) 0 100% / 55% auto no-repeat, url(sky/cloud.svg) 100% 90% / 60% auto no-repeat, url(sky/cloud.svg) 45% 120% / 70% auto no-repeat; }
.stage .ring { border: 2px dotted rgba(255, 255, 255, .9); }
.stage .mon { filter: drop-shadow(0 14px 14px rgba(30, 80, 150, .22)); }
.bubble { border-radius: 22px; border: 1px solid rgba(255, 255, 255, .95); background: rgba(255, 255, 255, .92); box-shadow: 0 14px 30px -14px rgba(30, 80, 150, .5); backdrop-filter: blur(8px); font-weight: 600; }
.bubble.three { background: linear-gradient(180deg, #4f9ff0, #2f80dd); color: #fff; border-color: transparent; }
.bubble.two .thumb { border-radius: 12px; border: 0; background: radial-gradient(circle at 72% 30%, #ffd56b 0 16%, transparent 17%), url(sky/cloud.svg) 20% 95% / 80% auto no-repeat, linear-gradient(180deg, #7fc0ff, #d4ebff); }

/* the cloud bank that closes the hero */
.marquee { position: relative; margin-top: 70px; padding: 26px 0 30px; background: #fff; color: var(--ink); border: 0; overflow: visible; }
.marquee::before { content: ''; position: absolute; left: 0; right: 0; top: -58px; height: 60px; background: url(sky/edge.svg) left bottom / 240px 60px repeat-x; }
.marquee .track { font-weight: 600; }
.marquee .track span small { color: var(--ink-3); opacity: 1 !important; }
.hero + section { background: linear-gradient(180deg, #fff, rgba(255, 255, 255, 0) 240px); }

/* ---------- section heads ---------- */
.sec-head h2 { font-weight: 700; color: #16325a; }
.sec-head .chip { background: #fff; box-shadow: var(--sh-sm); }

/* ---------- cards: clouds ---------- */
.card { border-radius: var(--r); border: 1px solid rgba(255, 255, 255, .95); background: rgba(255, 255, 255, .86); backdrop-filter: blur(10px); box-shadow: var(--sh); }
.feat .ic { border-radius: 18px; background: linear-gradient(180deg, #e8f4ff, #d4eaff) !important; }
.feat .ic svg { stroke: #2f80dd; }
.feat:nth-child(3n+2) .ic { background: linear-gradient(180deg, #fff6dc, #ffe8b3) !important; }
.feat:nth-child(3n+2) .ic svg { stroke: #d48a00; }
.feat:nth-child(3n) .ic { background: linear-gradient(180deg, #e2faf3, #c8f0e4) !important; }
.feat:nth-child(3n) .ic svg { stroke: var(--mint); }

.tabs { border-radius: 999px; border: 1px solid #fff; background: rgba(255, 255, 255, .7); box-shadow: var(--sh-sm); }
.tabs button { border-radius: 999px; font-weight: 700; }
.tabs button.on { background: linear-gradient(180deg, #5aa8f5, #2f80dd); color: #fff; }
.mon-card { border-radius: var(--r); border: 1px solid #fff; box-shadow: var(--sh); }
.mon-card:hover { transform: translateY(-6px); }
.mon-card .art { border-bottom: 0; }
.mon-card .art::before { background: url(sky/cloud.svg) -14% 112% / 60% auto no-repeat, url(sky/cloud.svg) 118% 104% / 52% auto no-repeat, radial-gradient(circle at 50% 0%, rgba(255, 255, 255, .45), transparent 60%); opacity: .95; }
.mon-card .no { color: rgba(30, 53, 85, .5); }
.tags span { border-radius: 999px; }

.step .num { border-radius: 50%; border: 0; background: linear-gradient(180deg, #ffd47a, #ffb43c); color: #4a3200; font-family: var(--display); font-weight: 700; box-shadow: 0 0 0 6px rgba(255, 198, 90, .25); }

.tier-card.gold { background: linear-gradient(170deg, #fff3d2, rgba(255, 255, 255, .9) 60%); }

/* ---------- token: night sky ---------- */
.token-box { background: url(sky/stars.svg) 0 0 / 220px 220px, radial-gradient(circle at 88% 12%, rgba(255, 236, 180, .35) 0 6%, transparent 22%), linear-gradient(160deg, #2b3f86, var(--night) 60%, #141e45); color: #eef4ff; border: 0; }
.token-box::after { content: ''; width: auto; height: 120px; inset: auto 0 -1px 0; border-radius: 0; opacity: .12; background: url(sky/edge.svg) left bottom / 240px 60px repeat-x; transform: none; }
.token-box > * { position: relative; z-index: 1; }
.token-box p { color: #c3d0f0; }
.coin { border: 3px solid #fff; box-shadow: 0 0 0 10px rgba(255, 255, 255, .1), 0 0 60px rgba(150, 190, 255, .45); }
.coin::before { border: 2px dashed rgba(255, 255, 255, .35); }
.status { border-radius: 999px; border-color: rgba(255, 255, 255, .25); }
.status.soon { color: #ffd77a; }
.ca .addr { border-radius: 16px; border-color: rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .08); }
.ca .addr span, .token-facts div, .warn { color: #9fb1dc; }
.token-facts b { color: #fff; }
.warn { border-top-color: rgba(255, 255, 255, .15); }
.token-box .btn:not(.sun) { background: rgba(255, 255, 255, .12); color: #fff; border-color: rgba(255, 255, 255, .25); }

/* ---------- plans / community / faq ---------- */
.card.dashed { background: rgba(255, 255, 255, .5); box-shadow: none; border: 2px dashed rgba(59, 143, 232, .3); }
.plan .pi { border-radius: 16px; background: #eef5fc; color: var(--ink-2); }
.social .si { border-radius: 18px; }
.faq details { border-radius: 20px; border: 1px solid #fff; background: rgba(255, 255, 255, .86); box-shadow: var(--sh-sm); }
.faq summary::after { color: var(--violet); }
.faq details[open] { box-shadow: var(--sh); }

/* ---------- cta: sunset + footer cloud bank ---------- */
.cta-band { border-radius: 32px; border: 0; color: #fff; overflow: hidden; position: relative;
  background: radial-gradient(circle at 82% 110%, #fff1c2 0 10%, #ffd27a 10.5% 17%, transparent 30%), linear-gradient(170deg, #4f9ff0 0, #8fb8f0 40%, #ffb38a 82%, #ffc98f 100%);
  box-shadow: 0 30px 60px -30px rgba(40, 90, 170, .6); }
.cta-band::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 60px; background: url(sky/edge.svg) left bottom / 240px 60px repeat-x; opacity: .75; pointer-events: none; }
.cta-band > * { position: relative; z-index: 1; }
.cta-band h2 { color: #fff; text-shadow: 0 2px 12px rgba(30, 60, 120, .3); }
.cta-band p { color: #f2f7ff; }
footer { position: relative; background: #fff; border-top: 0; margin-top: 90px; }
footer::before { content: ''; position: absolute; left: 0; right: 0; top: -58px; height: 60px; background: url(sky/edge.svg) left bottom / 240px 60px repeat-x; }
footer a:hover { color: var(--violet); }
.legal { border-top-color: var(--line); }
.soc:hover { background: var(--violet-soft); color: var(--violet); }
.ca-pill { border-radius: 999px; border: 1px solid #cfe3f6; background: #fff; }
.ca-pill span { background: var(--violet); color: #fff; border-radius: 999px; }
.foot-ca code { border-radius: 12px; }

/* ---------- toasts & modals ---------- */
.toast { border-radius: 999px; background: var(--ink); color: #fff; }
.toast.err { background: #d4553f; }
.toast.ok { background: #1f9a80; }
.modal { background: rgba(30, 53, 85, .4); backdrop-filter: blur(4px); }
.modal .x { border-radius: 50%; }
.wallet-btn { border-radius: 18px; }
.wallet-btn .wi { border-radius: 12px; }

/* ==========================================================
   App
   ========================================================== */
.app-body .main { background: radial-gradient(circle 200px at 96% 0, rgba(255, 236, 170, .8), transparent 100%), url(sky/cloud.svg) 104% 96% / 340px auto no-repeat, url(sky/cloud.svg) -60px 70% / 220px auto no-repeat, linear-gradient(180deg, #b7dcff 0, #e2f1ff 50%, #f4f9ff 100%); }
.side { background: rgba(255, 255, 255, .94); border-right: 1px solid var(--line); box-shadow: 8px 0 30px -24px rgba(30, 80, 150, .5); }
.modes { border-radius: 999px; background: #eef6ff; }
.modes button { border-radius: 999px; }
.modes button.on { background: #fff; color: #2f80dd; box-shadow: var(--sh-sm); outline: 0; }
.seg button { border-radius: 999px; }
.hist-item { border-radius: 14px; }
.hist-item.on { background: var(--violet-soft); box-shadow: none; }
.hist-imgs img { border-radius: 12px; }
.meter .bar { border-radius: 999px; }
.meter .bar i { border-radius: 999px; background: linear-gradient(90deg, #64b5ff, #2f80dd); }
.meter.full .bar i { background: linear-gradient(90deg, #ffb38a, #ff8a7a); }
.top { background: rgba(255, 255, 255, .6); backdrop-filter: blur(14px); }
.picker { border-radius: 999px; border: 1px solid #cfe3f6; background: #fff; }
.picker .pa { border-radius: 50%; }
.usage-pill { border-radius: 999px; }
.notice { border-radius: 18px; border-color: #ffd98a; background: #fff6df; color: #6e4c00; }
.msg .av { border-radius: 50%; border: 0; background: #fff; box-shadow: var(--sh-sm); }
.msg.bot .content { border-radius: 6px 22px 22px 22px; border: 1px solid #fff; background: rgba(255, 255, 255, .92); box-shadow: var(--sh-sm); }
.msg.me .content { border-radius: 22px 6px 22px 22px; border: 0; background: linear-gradient(180deg, #5aa8f5, #2f80dd); color: #fff; }
.msg.me .content a { color: #fff; }
.msg.me .av { background: var(--sun); }
.content code { background: var(--violet-soft); border-radius: 6px; }
.content blockquote { border-left-color: var(--violet); }
.code { border-radius: 16px; background: #1b2a4a; color: #e6eeff; }
.code .ch { color: #9fb1dc; }
.sugg button { border-radius: 18px; background: rgba(255, 255, 255, .85); border-color: #fff; }
.sugg button:hover { border-color: var(--violet); }
.comp-box { border-radius: 26px; border: 1px solid #fff; background: rgba(255, 255, 255, .95); box-shadow: var(--sh); }
.comp-box:focus-within { box-shadow: 0 0 0 3px rgba(59, 143, 232, .25), var(--sh); }
.send { border-radius: 50%; border: 0; background: linear-gradient(180deg, #5aa8f5, #2f80dd); color: #fff; }
.artist { border-radius: 18px; }
.artist.on { background: var(--violet-soft); border-color: var(--violet); }
#prompt { border-radius: 18px; }
.ideas button { border-radius: 999px; }
.styles button, .shapes button { border-radius: 999px; }
.styles button.on, .shapes button.on { background: var(--violet); color: #fff; border-color: var(--violet); }
.canvas { background: repeating-conic-gradient(#eaf3fc 0 25%, #fff 0 50%) 0 0 / 28px 28px; border-radius: 20px; }
.progress { border-radius: 999px; border: 0; background: #e2eefb; }
.progress i { border-radius: 999px; background: linear-gradient(90deg, #64b5ff, #ffc65a); }
.gallery figure { border-radius: 18px; border: 1px solid #fff; box-shadow: var(--sh-sm); }
.gal-empty, .drop { border-radius: 20px; }
.gate { background: rgba(225, 240, 255, .7); backdrop-filter: blur(6px); }
.pick { border-radius: 18px; }
.pick .pav { border-radius: 14px; }
.lb-card img { background: #eaf3fc; }
.wallet-pop .addr { border-radius: 12px; }
.md-t th { background: var(--violet-soft); }

@media (max-width: 860px) {
  .nav-links { background: rgba(255, 255, 255, .97); }
}
@media (max-width: 560px) {
  .sky i:nth-child(n+4) { display: none; }
  .marquee { margin-top: 50px; }
}
.burger { flex: none; }
@media (max-width: 420px) { .nav .wrap { gap: 10px; } .nav-cta .btn.primary { padding: 7px 11px; font-size: 14px; } }