/* Future Self Mailer — Form CSS (v3.1.0)
   Light + dark themes via tokens defined by the theme.
   Tokens fall back so the plugin still looks acceptable on third-party themes. */

:root {
    --fsm-bg            : var(--fs-bg,           #fbfbff);
    --fsm-bg-canvas     : var(--fs-canvas-bg,    #fafbff);
    --fsm-fg            : var(--fs-fg,           #1f2937);
    --fsm-fg-strong     : var(--fs-fg-strong,    #0f1530);
    --fsm-fg-muted      : var(--fs-fg-muted,     #4b5563);
    --fsm-fg-faint      : var(--fs-fg-faint,     #6b7280);
    --fsm-border        : var(--fs-border,       rgba(15,21,48,0.10));
    --fsm-border-strong : var(--fs-border-strong,rgba(15,21,48,0.18));
    --fsm-glow-purple   : var(--fs-glow-purple,  rgba(124,77,255,0.18));
    --fsm-glow-cyan     : var(--fs-glow-cyan,    rgba(79,195,247,0.18));
    --fsm-glow-aqua     : var(--fs-glow-aqua,    rgba(0,229,255,0.18));
    --fsm-bg-elev       : var(--fs-bg-elev,      #ffffff);
    --fsm-bg-glass      : var(--fs-bg-glass,     rgba(255,255,255,0.55));
    --fsm-brand-purple  : #7c4dff;
    --fsm-brand-cyan    : #4fc3f7;
    --fsm-brand-aqua    : #00e5ff;
    --fsm-brand-violet  : #b388ff;
    --fsm-font-display  : var(--fs-font-display, 'Syne','DM Sans',sans-serif);
    --fsm-font-body     : var(--fs-font-body,    'DM Sans','Inter',sans-serif);
    --fsm-ease          : cubic-bezier(.22,1,.36,1);
}

/* Container */
#fsm-root { display: block; margin: 0; padding: 0; }
#fsm-wrap {
    height: auto; overflow: visible; position: relative;
    background: var(--fsm-bg);
    color: var(--fsm-fg);
    font-family: var(--fsm-font-body);
    -webkit-font-smoothing: antialiased;
    transition: background-color .4s var(--fsm-ease), color .4s var(--fsm-ease);
}

/* Star canvas — fixed to viewport */
#fsm-cv {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none; z-index: 0; display: block;
}

/* Orbs — softer + more blur than v3.0 (user complained) */
.fsm-orb {
    position: fixed; border-radius: 50%; pointer-events: none; z-index: 0;
    opacity: .55;
}
.fsm-orb-1 { width:520px; height:520px; background:radial-gradient(circle, var(--fsm-glow-purple), transparent 70%); top:-140px; left:-160px; filter:blur(110px); animation:fsmOrb 12s ease-in-out infinite; }
.fsm-orb-2 { width:460px; height:460px; background:radial-gradient(circle, var(--fsm-glow-cyan),   transparent 70%); bottom:-110px; right:-140px; filter:blur(110px); animation:fsmOrb 12s ease-in-out -4s infinite; }
.fsm-orb-3 { width:340px; height:340px; background:radial-gradient(circle, var(--fsm-glow-aqua),   transparent 70%); top:35%; left:50%; transform:translateX(-50%); filter:blur(100px); animation:fsmOrb3 12s ease-in-out -7s infinite; }
.fsm-orb-4 { width:240px; height:240px; background:radial-gradient(circle, rgba(236,72,153,.16),   transparent 70%); top:60%; right:5%; filter:blur(90px); animation:fsmOrb 14s ease-in-out -5s infinite; }
.fsm-orb-5 { width:200px; height:200px; background:radial-gradient(circle, rgba(16,185,129,.16),   transparent 70%); top:20%; left:8%; filter:blur(80px); animation:fsmOrb 16s ease-in-out -9s infinite; }
@keyframes fsmOrb  { 0%,100%{transform:translateY(0) scale(1)} 33%{transform:translateY(-35px) scale(1.07)} 66%{transform:translateY(18px) scale(.96)} }
@keyframes fsmOrb3 { 0%,100%{transform:translateX(-50%) translateY(0)} 50%{transform:translateX(-50%) translateY(-22px)} }

/* Subtle grid (kept) */
.fsm-grid {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0;
    background-image:
        linear-gradient(rgba(var(--fs-grid-color, 30, 80, 130), .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(var(--fs-grid-color, 30, 80, 130), .035) 1px, transparent 1px);
    background-size: 60px 60px;
    -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 0%, transparent 100%);
            mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 0%, transparent 100%);
}

/* ── ORBITAL SVG ICONS (replaces the v3.0 concentric rings) ──
   Each orbit element rotates around the viewport centre, with the
   icon counter-rotating so it always reads upright. */
.fsm-orbits {
    position: fixed; inset: 0; pointer-events: none; z-index: 0;
    overflow: hidden;
}
.fsm-orbit {
    position: absolute;
    top: 50%; left: 50%;
    width: var(--orbit-size, 600px);
    height: var(--orbit-size, 600px);
    margin: calc(var(--orbit-size, 600px) / -2) 0 0 calc(var(--orbit-size, 600px) / -2);
    pointer-events: none;
    animation: fsmOrbitSpin var(--orbit-dur, 60s) linear infinite;
    animation-direction: var(--orbit-dir, normal);
    will-change: transform;
}
.fsm-orbit-icon {
    position: absolute;
    top: 0;
    left: 50%;
    width: 30px;
    height: 30px;
    transform: translate(-50%, -50%);
    color: var(--fsm-brand-cyan);
    opacity: var(--orbit-op, 0.45);
    filter: drop-shadow(0 0 12px currentColor) blur(.4px);
    animation: fsmOrbitIconCounter var(--orbit-dur, 60s) linear infinite;
    animation-direction: var(--orbit-dir, normal);
}
.fsm-orbit-icon svg { width: 100%; height: 100%; display: block; }

/* Colour rotation across orbits */
.fsm-orbit:nth-child(5n+1) .fsm-orbit-icon { color: var(--fsm-brand-cyan); }
.fsm-orbit:nth-child(5n+2) .fsm-orbit-icon { color: var(--fsm-brand-violet); }
.fsm-orbit:nth-child(5n+3) .fsm-orbit-icon { color: var(--fsm-brand-aqua); }
.fsm-orbit:nth-child(5n+4) .fsm-orbit-icon { color: var(--fsm-brand-purple); }
.fsm-orbit:nth-child(5n+5) .fsm-orbit-icon { color: #ec4899; }

/* Light-mode: darker pigments, lower opacity, less blur for sharpness */
html[data-theme="light"] .fsm-orbit-icon       { opacity: .22; filter: drop-shadow(0 0 6px currentColor); }
html[data-theme="light"] .fsm-orbit:nth-child(5n+1) .fsm-orbit-icon { color: #0891b2; }
html[data-theme="light"] .fsm-orbit:nth-child(5n+2) .fsm-orbit-icon { color: #6d28d9; }
html[data-theme="light"] .fsm-orbit:nth-child(5n+3) .fsm-orbit-icon { color: #0e7490; }
html[data-theme="light"] .fsm-orbit:nth-child(5n+4) .fsm-orbit-icon { color: #7c3aed; }
html[data-theme="light"] .fsm-orbit:nth-child(5n+5) .fsm-orbit-icon { color: #be185d; }

@keyframes fsmOrbitSpin         { from { transform: rotate(0deg);   } to { transform: rotate(360deg);   } }
@keyframes fsmOrbitIconCounter  { from { transform: translate(-50%, -50%) rotate(0deg);   } to { transform: translate(-50%, -50%) rotate(-360deg);   } }

/* Shrink orbits on small viewports so they don't overflow */
@media (max-width: 900px) {
    .fsm-orbit { transform-origin: center; }
}

/* Sections */
#fsm-hero,
#fsm-form,
#fsm-succ { position: relative; z-index: 2; width: 100%; }

/* Hero: column flex with TWO auto margins (on .fsm-badge and .fsm-scroll).
   This pins the scroll hint to the viewport bottom AND centers the content
   cluster on every viewport size — no media queries needed, never collides. */
#fsm-hero {
    min-height: 100vh; min-height: 100svh;
    display: flex; flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    padding: clamp(60px, 10vh, 100px) clamp(16px, 4vw, 32px) clamp(24px, 3vh, 36px);
    gap: clamp(16px, 2.6vh, 28px);
}
/* First content child consumes available space above → centers cluster */
#fsm-hero > .fsm-badge { margin-top: auto; }
#fsm-form {
    min-height: 92vh; min-height: 92svh;
    display: flex; align-items: center; justify-content: center;
    padding: clamp(60px, 8vh, 100px) clamp(16px, 4vw, 32px) clamp(80px, 10vh, 120px);
}
#fsm-form::before {
    content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: clamp(60px, 30vw, 240px); height: 1px;
    background: linear-gradient(90deg, transparent, var(--fsm-border-strong), transparent);
    pointer-events: none;
}
#fsm-succ {
    min-height: 100vh; display: none;
    flex-direction: column; align-items: center; justify-content: center;
    text-align: center; padding: 80px clamp(16px, 4vw, 32px);
}
#fsm-succ[data-show="1"] { display: flex; }

/* Hero badge */
.fsm-badge {
    display: inline-flex; align-items: center; gap: 8px; padding: 7px 18px;
    border: 1px solid var(--fsm-border-strong); border-radius: 100px;
    font-size: 11px; letter-spacing: .15em; text-transform: uppercase;
    color: var(--fsm-brand-aqua);
    background: var(--fsm-bg-glass);
    backdrop-filter: blur(10px);
    margin: 0 0 clamp(14px, 2vh, 24px);
    font-family: var(--fsm-font-body); font-weight: 500;
    animation: fsmUp .9s ease .15s both;
}
.fsm-bdot { width: 6px; height: 6px; background: var(--fsm-brand-aqua); border-radius: 50%; box-shadow: 0 0 8px var(--fsm-brand-aqua); flex-shrink: 0; animation: fsmPulse 2s ease infinite; }
@keyframes fsmPulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.35;transform:scale(.65)} }

/* Hero title */
.fsm-title {
    font-family: var(--fsm-font-display);
    font-size: clamp(34px, 7vw, 84px); font-weight: 800; line-height: 1.05; letter-spacing: -.03em;
    color: var(--fsm-fg-strong); margin: 0; animation: fsmUp .9s ease .3s both;
    max-width: 900px;
}
.fsm-grad {
    background: linear-gradient(135deg, var(--fsm-brand-cyan) 0%, var(--fsm-brand-violet) 50%, var(--fsm-brand-aqua) 100%);
    background-size: 200% 200%;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    animation: fsmGradShift 10s ease-in-out infinite;
}
@keyframes fsmGradShift { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
.fsm-sub {
    font-size: clamp(15px, 2vw, 18px); font-weight: 400; font-style: italic;
    color: var(--fsm-fg-muted); max-width: 480px; line-height: 1.7;
    margin: 0; animation: fsmUp .9s ease .45s both;
}

/* CTA */
.fsm-cta {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 16px 36px;
    background: linear-gradient(135deg, var(--fsm-glow-cyan), var(--fsm-glow-purple));
    border: 1px solid var(--fsm-border-strong); border-radius: 100px;
    color: var(--fsm-fg-strong);
    font-family: var(--fsm-font-display); font-size: 15px; font-weight: 600; letter-spacing: .02em;
    cursor: pointer;
    transition: box-shadow .3s, transform .3s, border-color .3s, background .3s, color .3s;
    animation: fsmUp .9s ease .6s both;
    -webkit-appearance: none; appearance: none;
    outline: none; text-decoration: none; white-space: nowrap; line-height: 1; box-sizing: border-box;
}
.fsm-cta:hover { box-shadow: 0 0 40px var(--fsm-glow-cyan), 0 0 80px var(--fsm-glow-purple); transform: translateY(-3px); border-color: var(--fsm-brand-cyan); }

/* Scroll hint — second auto-margin pins it to the bottom edge of the hero
   on every device (mobile + desktop). Works alongside the .fsm-badge
   margin-top: auto to vertically distribute remaining space. */
.fsm-scroll {
    position: static;
    transform: none;
    left: auto; bottom: auto;
    margin-top: auto;
    display: flex; flex-direction: column; align-items: center; gap: 7px;
    animation: fsmUp .9s ease 1.1s both;
}
.fsm-slbl  { font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: var(--fsm-fg-faint); font-family: var(--fsm-font-body); }
.fsm-sline { width: 1px; height: 36px; background: linear-gradient(to bottom, var(--fsm-brand-aqua), transparent); animation: fsmScroll 2s ease infinite; }
@keyframes fsmScroll { 0%{transform:scaleY(0);transform-origin:top;opacity:0} 50%{transform:scaleY(1);transform-origin:top;opacity:1} 100%{transform:scaleY(1);transform-origin:bottom;opacity:0} }

@keyframes fsmUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }

/* Form wrapper */
.fsm-fwrap { width: 100%; max-width: 640px; }

/* Step dots — plain divs, no list semantics, no bullet leakage */
.fsm-dots {
    padding: 0;
    margin: 0 0 clamp(28px, 4vh, 52px);
    display: flex; align-items: center; justify-content: center;
}
.fsm-dot  {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--fsm-border-strong);
    transition: all .4s; flex-shrink: 0;
    display: inline-block;
}
.fsm-dot[data-active="1"] { background: var(--fsm-brand-aqua); box-shadow: 0 0 14px var(--fsm-brand-aqua); width: 26px; border-radius: 4px; }
.fsm-dot[data-done="1"]   { background: var(--fsm-brand-violet); box-shadow: 0 0 8px rgba(179,136,255,.55); }
.fsm-dline { width: 40px; height: 1px; background: var(--fsm-border); transition: background .4s; flex-shrink: 0; display: inline-block; }
.fsm-dline[data-done="1"] { background: var(--fsm-brand-violet); }

/* Steps */
.fsm-step { display: none; }
.fsm-step[data-active="1"] { display: block; animation: fsmUp .45s ease both; }

/* Step labels */
.fsm-tag { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--fsm-brand-aqua); margin-bottom: 12px; display: flex; align-items: center; gap: 8px; font-family: var(--fsm-font-body); font-weight: 600; }
.fsm-tag::before { content: ""; display: block; width: 18px; min-width: 18px; height: 1px; background: var(--fsm-brand-aqua); }
.fsm-sh { font-family: var(--fsm-font-display); font-size: clamp(24px, 4vw, 40px); font-weight: 700; letter-spacing: -.025em; color: var(--fsm-fg-strong); margin: 0 0 8px; line-height: 1.1; }
.fsm-sd { font-size: 15px; font-weight: 400; color: var(--fsm-fg-muted); margin: 0 0 28px; line-height: 1.6; }

/* ── GLASS CARD — strong visibility in both modes ── */
.fsm-glass {
    background:
        linear-gradient(135deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.04) 60%, rgba(255,255,255,.02) 100%);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 22px;
    padding: 24px 26px;
    backdrop-filter: blur(28px) saturate(160%);
    -webkit-backdrop-filter: blur(28px) saturate(160%);
    transition: border-color .3s, box-shadow .3s, background .3s;
    position: relative; overflow: hidden;
    box-shadow:
        0 14px 40px rgba(0,0,0,.30),
        inset 0 1px 0 rgba(255,255,255,.10),
        inset 0 -1px 0 rgba(0,0,0,.20);
}
.fsm-glass::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit;
    background: linear-gradient(135deg, var(--fsm-glow-cyan), var(--fsm-glow-purple));
    opacity: 0; transition: opacity .3s; pointer-events: none;
}
.fsm-glass:hover::after        { opacity: .35; }
.fsm-glass:focus-within        { border-color: var(--fsm-brand-cyan); box-shadow: 0 0 0 3px var(--fsm-glow-cyan), 0 20px 60px rgba(0,0,0,.30); }

html[data-theme="light"] .fsm-glass {
    background:
        linear-gradient(135deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.70) 60%, rgba(255,255,255,.55) 100%);
    border: 1px solid rgba(15,21,48,.12);
    box-shadow:
        0 14px 40px rgba(15,21,48,.08),
        inset 0 1px 0 rgba(255,255,255,.85);
}
html[data-theme="light"] .fsm-glass:focus-within {
    border-color: var(--fsm-brand-purple);
    box-shadow: 0 0 0 3px rgba(124,77,255,.18), 0 16px 40px rgba(15,21,48,.10);
}

/* Textarea */
#fsm-msg {
    display: block; width: 100%; min-height: 220px;
    background: transparent; border: none; outline: none; resize: vertical;
    color: var(--fsm-fg-strong); font-family: var(--fsm-font-body);
    font-size: 16px; font-weight: 400; line-height: 1.8;
    caret-color: var(--fsm-brand-aqua); -webkit-appearance: none; appearance: none;
    box-shadow: none; margin: 0; padding: 0; box-sizing: border-box;
}
#fsm-msg::placeholder { color: var(--fsm-fg-faint); font-style: italic; }
#fsm-msg:focus { outline: none; box-shadow: none; }
html[data-theme="light"] #fsm-msg { caret-color: var(--fsm-brand-purple); }
html[data-theme="light"] #fsm-msg::placeholder { color: #94a3b8; }

/* Char counter */
.fsm-char { text-align: right; font-size: 12px; color: var(--fsm-fg-faint); margin-top: 10px; font-family: var(--fsm-font-body); font-weight: 500; }
.fsm-char[data-warn="1"] { color: #f59e0b; }

/* Email input */
.fsm-iw { position: relative; }
#fsm-email {
    display: block; width: 100%;
    background: var(--fsm-bg-elev);
    border: 1px solid var(--fsm-border);
    border-radius: 13px; padding: 17px 50px 17px 20px;
    color: var(--fsm-fg-strong);
    font-family: var(--fsm-font-body); font-size: 16px; font-weight: 400; outline: none;
    caret-color: var(--fsm-brand-aqua);
    transition: border-color .3s, box-shadow .3s, background .3s;
    -webkit-appearance: none; appearance: none; box-shadow: none; margin: 0; box-sizing: border-box;
}
#fsm-email::placeholder { color: var(--fsm-fg-faint); }
#fsm-email:focus { border-color: var(--fsm-brand-cyan); box-shadow: 0 0 0 3px var(--fsm-glow-cyan); outline: none; }
#fsm-email[data-ok="1"]  { border-color: var(--fsm-brand-aqua); }
#fsm-email[data-bad="1"] { border-color: #ef4444; }
.fsm-emailck { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); color: var(--fsm-brand-aqua); font-size: 16px; opacity: 0; pointer-events: none; transition: opacity .3s; font-family: sans-serif; }
.fsm-emailck[data-show="1"] { opacity: 1; }

/* Honeypot — visually + assistive-hidden */
.fsm-hp {
    position: absolute !important;
    left: -10000px !important;
    top: auto !important;
    width: 1px !important; height: 1px !important;
    overflow: hidden !important;
}

/* Year grid */
.fsm-yg { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.fsm-yb {
    aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
    border: 1px solid var(--fsm-border); border-radius: 14px;
    background: var(--fsm-bg-elev); cursor: pointer;
    transition: border-color .3s, transform .25s, background .3s, box-shadow .3s;
    position: relative; overflow: hidden; padding: 8px 4px;
    -webkit-appearance: none; appearance: none; outline: none;
    font-family: var(--fsm-font-body); margin: 0; box-sizing: border-box;
}
.fsm-yb:hover { border-color: var(--fsm-brand-cyan); transform: translateY(-3px); background: var(--fsm-bg-glass); }
.fsm-yb[data-sel="1"] { border-color: var(--fsm-brand-cyan); box-shadow: 0 0 24px var(--fsm-glow-cyan), 0 0 8px rgba(79,195,247,.12); background: var(--fsm-bg-glass); }
.fsm-yb[data-sel="1"]::after { content:""; position:absolute; bottom:-8px; left:50%; transform:translateX(-50%); width:36px; height:16px; background: var(--fsm-brand-aqua); filter:blur(10px); opacity:.32; }
.fsm-yn { font-family: var(--fsm-font-display); font-size: clamp(16px, 3.5vw, 24px); font-weight: 800; color: var(--fsm-fg-strong); transition: color .3s; line-height: 1; display: block; }
.fsm-yl { font-size: clamp(8px, 1.4vw, 10px); letter-spacing: .06em; text-transform: uppercase; color: var(--fsm-fg-faint); transition: color .3s; display: block; line-height: 1; font-weight: 500; font-family: var(--fsm-font-body); text-align: center; }
.fsm-yb[data-sel="1"] .fsm-yn { color: var(--fsm-brand-aqua); }
.fsm-yb[data-sel="1"] .fsm-yl { color: var(--fsm-brand-cyan); }

/* Debug year button */
.fsm-ydebug { border-color: rgba(220,38,38,.25) !important; background: rgba(220,38,38,.04) !important; }
.fsm-ydebug .fsm-yn { color: rgba(252,165,165,.85) !important; font-size: 11px !important; }
.fsm-ydebug .fsm-yl { color: rgba(220,38,38,.65) !important; font-size: 8px !important; }
.fsm-ydebug[data-sel="1"] { border-color: rgba(220,38,38,.65) !important; box-shadow: 0 0 16px rgba(220,38,38,.22) !important; }

/* Date tag */
.fsm-dtag {
    display: none; align-items: center; gap: 10px; padding: 13px 17px;
    background: var(--fsm-bg-glass);
    border: 1px solid var(--fsm-border);
    border-radius: 11px; font-size: 14px; color: var(--fsm-fg-muted);
    margin-top: 18px; font-weight: 400; font-family: var(--fsm-font-body);
}
.fsm-dtag[data-show="1"] { display: flex; animation: fsmUp .4s ease both; }
.fsm-dtag strong { color: var(--fsm-brand-aqua); font-weight: 600; }

/* Preview card */
.fsm-prev { background: var(--fsm-bg-elev); border: 1px solid var(--fsm-border); border-radius: 18px; padding: 24px; position: relative; overflow: hidden; margin-bottom: 4px; }
.fsm-prev::before { content:""; position:absolute; top:0; left:0; right:0; height:1px; background: linear-gradient(90deg, transparent, var(--fsm-brand-cyan), transparent); }
.fsm-ptag { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--fsm-brand-violet); margin-bottom: 12px; font-weight: 600; display: block; font-family: var(--fsm-font-body); }
.fsm-pmsg { font-size: 15px; line-height: 1.8; color: var(--fsm-fg-muted); white-space: pre-wrap; max-height: 140px; overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, black 40%, transparent);
            mask-image: linear-gradient(to bottom, black 40%, transparent);
    font-weight: 400; font-family: var(--fsm-font-body);
}
.fsm-pmeta { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px; font-size: 12px; color: var(--fsm-fg-faint); margin-top: 16px; padding-top: 13px; border-top: 1px solid var(--fsm-border); font-family: var(--fsm-font-body); }

/* Button row */
.fsm-row { display: flex; align-items: center; gap: 10px; margin-top: 24px; flex-wrap: wrap; }

.fsm-cta, .fsm-next, .fsm-back, .fsm-submit, .fsm-restart {
    -webkit-appearance: none; appearance: none;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; outline: none; background: none; margin: 0;
    text-decoration: none; white-space: nowrap; line-height: 1; vertical-align: middle;
    transition: all .3s; box-sizing: border-box;
}
.fsm-cta:focus, .fsm-next:focus, .fsm-back:focus, .fsm-submit:focus, .fsm-restart:focus { outline: none; }

.fsm-next {
    gap: 9px; padding: 14px 30px;
    background: linear-gradient(135deg, var(--fsm-glow-cyan), var(--fsm-glow-purple));
    border: 1px solid var(--fsm-border-strong); border-radius: 100px;
    color: var(--fsm-fg-strong); font-family: var(--fsm-font-display);
    font-size: 14px; font-weight: 600; letter-spacing: .02em;
}
.fsm-next:hover { border-color: var(--fsm-brand-cyan); box-shadow: 0 0 24px var(--fsm-glow-cyan); transform: translateY(-2px); }
.fsm-next:disabled { opacity: .28; pointer-events: none; }

.fsm-back {
    gap: 7px; padding: 13px 22px;
    background: transparent;
    border: 1px solid var(--fsm-border);
    border-radius: 100px; color: var(--fsm-fg-muted);
    font-family: var(--fsm-font-display); font-size: 13px; font-weight: 500;
}
.fsm-back:hover { border-color: var(--fsm-border-strong); color: var(--fsm-fg-strong); }

.fsm-submit {
    gap: 10px; padding: 15px 38px;
    background: linear-gradient(135deg, var(--fsm-brand-purple), var(--fsm-brand-aqua));
    border: none; border-radius: 100px; color: #fff;
    font-family: var(--fsm-font-display); font-size: 15px; font-weight: 700; letter-spacing: .02em;
    position: relative; min-width: 185px; text-shadow: none;
    box-shadow: 0 4px 24px var(--fsm-glow-purple);
}
.fsm-submit:hover { transform: translateY(-2px); box-shadow: 0 10px 40px var(--fsm-glow-purple), 0 0 60px var(--fsm-glow-cyan); }
.fsm-submit:active { transform: translateY(0); }
.fsm-submit[data-loading="1"] .fsm-stxt { opacity: 0; }
.fsm-submit[data-loading="1"] .fsm-spin { display: block; }
.fsm-stxt { display: flex; align-items: center; gap: 8px; }
.fsm-spin { display:none; width:18px; height:18px; border:2px solid rgba(255,255,255,.25); border-top-color:#fff; border-radius:50%; animation:fsmSpin .7s linear infinite; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); margin:0; padding:0; box-sizing:border-box; }
@keyframes fsmSpin { to { transform: translate(-50%, -50%) rotate(360deg); } }

/* Errors */
.fsm-err { display: none; font-size: 13px; color: #ef4444; margin-top: 10px; padding-left: 4px; font-weight: 500; line-height: 1.4; font-family: var(--fsm-font-body); }
.fsm-err[data-show="1"] { display: block; }

/* ── SMART-MESSAGE QUALITY TOAST — Apple Dynamic Island style ──
   Always dark (Apple's hardware is always black), pinned to the top of the
   viewport, bouncy enter, quick clean exit. Stays as a true pill on mobile
   instead of wrapping into an oval (messages are kept short in JS). */
.fsm-qtoast {
    position: fixed;
    top: clamp(18px, 3.5vh, 32px);
    left: 50%;
    /* Resting (hidden) state — also the exit state */
    transform: translateX(-50%) translateY(-22px) scale(.72);
    transform-origin: top center;

    background: #0d0d18;
    color: #f0f4ff;
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 9999px;
    padding: 9px 16px 9px 9px;

    font-family: var(--fsm-font-body);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: 0.005em;

    box-shadow:
        0 16px 44px rgba(0,0,0,.55),
        0 0 36px rgba(124,77,255,.30),
        inset 0 1px 0 rgba(255,255,255,.06);
    backdrop-filter: blur(22px) saturate(180%);
    -webkit-backdrop-filter: blur(22px) saturate(180%);

    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: max-content;
    max-width: min(94vw, 440px);
    white-space: normal;

    opacity: 0;
    pointer-events: none;
    z-index: 9999;

    /* Default (exit) transition — quick + clean */
    transition:
        opacity .25s ease-out,
        transform .35s cubic-bezier(.4,0,.2,1);
}
.fsm-qtoast[data-show="1"] {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
    pointer-events: auto;
    /* Enter transition — bouncy spring */
    transition:
        opacity .35s ease-out,
        transform .6s cubic-bezier(.34, 1.56, .64, 1);
}

/* Offset for WP admin bar */
body.admin-bar .fsm-qtoast { top: calc(32px + clamp(14px, 3vh, 28px)); }
@media screen and (max-width: 782px) {
    body.admin-bar .fsm-qtoast { top: calc(46px + clamp(14px, 3vh, 28px)); }
}

.fsm-qtoast-icon {
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    width: 30px; height: 30px;
    border-radius: 50%;
    background: linear-gradient(135deg, #7c4dff, #00e5ff);
    color: #fff;
    font-size: 15px;
    box-shadow: 0 0 14px rgba(124,77,255,.55);
}
.fsm-qtoast-msg {
    flex: 1 1 auto;
    text-align: left;
}
.fsm-qtoast-close {
    background: none; border: none; cursor: pointer;
    color: rgba(255,255,255,.42);
    font-size: 18px; line-height: 1;
    padding: 0 2px 0 6px;
    flex-shrink: 0;
    transition: color .2s, transform .2s;
}
.fsm-qtoast-close:hover { color: #fff; transform: scale(1.15); }

/* In light mode keep the toast dark — that IS the Dynamic Island look */
html[data-theme="light"] .fsm-qtoast {
    background: #0d0d18;
    color: #f0f4ff;
    box-shadow:
        0 16px 44px rgba(15,21,48,.28),
        0 0 28px rgba(124,77,255,.22);
}

/* Reduce motion: skip the spring, just fade */
@media (prefers-reduced-motion: reduce) {
    .fsm-qtoast,
    .fsm-qtoast[data-show="1"] {
        transition: opacity .25s ease !important;
        transform: translateX(-50%) translateY(0) scale(1) !important;
    }
    .fsm-qtoast { opacity: 0; }
    .fsm-qtoast[data-show="1"] { opacity: 1; }
}

/* Success */
.fsm-sorb { width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(circle, var(--fsm-glow-aqua), var(--fsm-glow-purple) 40%, transparent 70%); filter: blur(36px); margin: 0 auto 28px; animation: fsmPop 3s ease infinite; }
@keyframes fsmPop { 0%,100%{transform:scale(1);opacity:.75} 50%{transform:scale(1.22);opacity:1} }
.fsm-sico { width:80px; height:80px; border-radius:50%; background:linear-gradient(135deg, var(--fsm-glow-aqua), var(--fsm-glow-purple)); border:1px solid var(--fsm-border-strong); display:flex; align-items:center; justify-content:center; font-size:30px; color: var(--fsm-fg-strong); margin:0 auto 28px; box-shadow:0 0 30px var(--fsm-glow-aqua), 0 0 60px var(--fsm-glow-purple); animation:fsmIco .6s ease .2s both; }
@keyframes fsmIco { from{opacity:0;transform:scale(.3)} to{opacity:1;transform:scale(1)} }
.fsm-stitle { font-family: var(--fsm-font-display); font-size: clamp(26px, 5vw, 52px); font-weight: 800; letter-spacing: -.02em; line-height: 1.1; color: var(--fsm-fg-strong); margin: 0 0 14px; animation: fsmUp .7s ease .4s both; }
.fsm-sgrade { background: linear-gradient(135deg, var(--fsm-brand-aqua), var(--fsm-brand-violet)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.fsm-ssub { font-size: 17px; font-weight: 400; color: var(--fsm-fg-muted); max-width: 420px; line-height: 1.7; margin: 0 auto 40px; animation: fsmUp .7s ease .6s both; font-family: var(--fsm-font-body); }
.fsm-sdet { display: flex; flex-direction: column; gap: 10px; max-width: 380px; width: 100%; margin: 0 auto 32px; animation: fsmUp .7s ease .8s both; }
.fsm-srow { display: flex; justify-content: space-between; align-items: center; padding: 13px 18px; background: var(--fsm-bg-elev); border: 1px solid var(--fsm-border); border-radius: 11px; font-size: 14px; font-weight: 400; flex-wrap: wrap; gap: 4px; font-family: var(--fsm-font-body); }
.fsm-sval-lbl { color: var(--fsm-fg-faint); font-weight: 400; }
.fsm-sval     { color: var(--fsm-fg); font-weight: 500; }
.fsm-sval-c   { color: var(--fsm-brand-aqua); font-family: var(--fsm-font-display); font-weight: 700; }
.fsm-restart {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 12px 24px; border: 1px solid var(--fsm-border); border-radius: 100px;
    color: var(--fsm-fg-muted); background: transparent;
    font-size: 14px; font-family: var(--fsm-font-body); font-weight: 500;
    animation: fsmUp .7s ease 1s both;
}
.fsm-restart:hover { border-color: var(--fsm-border-strong); color: var(--fsm-fg-strong); }

/* Shooting stars (separate canvas) */
#fsm-shoot-cv { position: fixed; top:0; left:0; width:100%; height:100%; pointer-events:none; z-index: 0; }

/* Responsive */
@media (max-width: 640px) {
    /* Mobile: keep min-height = 100svh + tight bottom padding so the scroll
       hint sits right at the viewport edge (auto-margin logic handles the
       vertical centering). */
    #fsm-hero { padding: clamp(50px, 8vh, 70px) 18px clamp(18px, 2.5vh, 26px); min-height: 100svh; }
    #fsm-form { padding: 60px 18px 80px; }
    #fsm-succ { padding: 60px 18px; }
    .fsm-fwrap { max-width: 100%; }
    .fsm-yg { gap: 7px; }
    .fsm-yb { border-radius: 10px; padding: 6px 3px; }
    .fsm-yn { font-size: 18px; }
    .fsm-yl { font-size: 8px; letter-spacing: 0; }
    .fsm-row { gap: 8px; }
    .fsm-next { padding: 13px 22px; font-size: 13px; }
    .fsm-back { padding: 12px 16px; font-size: 12px; }
    .fsm-submit { padding: 14px 28px; font-size: 14px; min-width: 160px; }
    .fsm-cta { padding: 14px 28px; font-size: 14px; }
    .fsm-dots { margin-bottom: 28px; }
    .fsm-dline { width: 22px; }
    .fsm-sh { font-size: clamp(22px, 6vw, 32px); }
    .fsm-title { font-size: clamp(30px, 9vw, 60px); }
    .fsm-orbit-icon { width: 22px; height: 22px; }
}
@media (max-width: 380px) {
    .fsm-yg { gap: 5px; }
    .fsm-yn { font-size: 15px; }
    .fsm-yl { display: none; }
    .fsm-submit { min-width: 140px; padding: 13px 20px; }
    .fsm-next { padding: 12px 18px; }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
    .fsm-orb, .fsm-grad, .fsm-sgrade, .fsm-sorb, .fsm-bdot, .fsm-sline,
    .fsm-orbit, .fsm-orbit-icon { animation: none !important; }
    .fsm-title, .fsm-sub, .fsm-cta, .fsm-badge, .fsm-scroll, .fsm-step, .fsm-stitle, .fsm-ssub, .fsm-sdet, .fsm-restart { animation: none !important; }
    #fsm-cv, #fsm-shoot-cv { display: none; }
}

/* Light-mode visibility boosts */
html[data-theme="light"] #fsm-wrap { background: linear-gradient(180deg, #f7f8fc 0%, #fbfbff 100%); }
html[data-theme="light"] .fsm-badge { color: #6d28d9; border-color: rgba(124,77,255,.25); background: rgba(255,255,255,.7); }
html[data-theme="light"] .fsm-bdot  { background: #7c4dff; box-shadow: 0 0 6px rgba(124,77,255,.6); }
html[data-theme="light"] .fsm-tag   { color: #6d28d9; }
html[data-theme="light"] .fsm-tag::before { background: #6d28d9; }
html[data-theme="light"] .fsm-yb[data-sel="1"] .fsm-yn { color: #6d28d9; }
html[data-theme="light"] .fsm-yb[data-sel="1"] .fsm-yl { color: #7c4dff; }
html[data-theme="light"] .fsm-emailck { color: #7c4dff; }
html[data-theme="light"] .fsm-sval-c  { color: #6d28d9; }
html[data-theme="light"] .fsm-ptag    { color: #6d28d9; }
html[data-theme="light"] .fsm-grid    { opacity: .55; }
html[data-theme="light"] .fsm-orb     { opacity: .35; }
html[data-theme="light"] .fsm-scroll .fsm-slbl { color: #94a3b8; }

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) #fsm-wrap { background: #040408; }
}