/* SabIÁ · estilos do portal.
 * Cores: hexadecimais e rgba em :root (claro) e [data-theme="dark"] (escuro). Para mudar uma cor, edite os hexadecimais ou rgbas.
 * Marca: CNP (azul-marinho, arco turquesa, magenta) + degradê Artefact dos slides do plano.
 */

/* -------------------------------------- TEMAS --------------------------------------  */
:root {
  --font: 'IBM Plex Sans', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --display: 'Newsreader', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --r-lg: 24px; --r-md: 18px; --r-sm: 12px;

  --pink: #F0106E; --violet: #6B2C83; --teal: #00A39B; --navy: #0B1A3F; --indigo-brand: #1E2A6B;
  --success: #13A26F; --gold: #C9A227;
  --grad: linear-gradient(90deg, #1E2A6B 0%, #6B2C83 50%, #F0106E 100%);
  --stage-bg: radial-gradient(55% 85% at 80% 40%, rgba(107,44,131,.34) 0%, rgba(107,44,131,0) 70%),
              radial-gradient(45% 65% at 100% 100%, rgba(240,16,110,.20) 0%, rgba(240,16,110,0) 70%),
              radial-gradient(40% 60% at 0% 0%, rgba(0,163,155,.16) 0%, rgba(0,163,155,0) 70%),
              linear-gradient(135deg, #13245A 0%, #0B1A3F 50%, #070F28 100%);
  --stage-art-bg: radial-gradient(70% 70% at 50% 45%, #1A2A5E 0%, #0C1736 60%, #060C20 100%);
  --stage-text: #FFFFFF; --stage-muted: rgba(226,231,255,.74); --stage-line: rgba(255,255,255,.12); --stage-chip: rgba(255,255,255,.07);

  --bg: #F3F5F9; --surface: #FFFFFF; --surface-2: #F9FAFC; --text: #0B1A3F; --muted: #56607A; --faint: #8A93AB;
  --border: #E1E5EE; --soft: #ECEFF6; --indigo: #1E2A6B; --accent-text: #C8005A; --teal-text: #00857E;
  --shadow-sm: 0 1px 2px rgba(11,21,51,.04), 0 2px 8px rgba(11,21,51,.04);
  --shadow-md: 0 2px 6px rgba(11,21,51,.04), 0 12px 32px rgba(11,21,51,.08);
  --stage-border: 1px solid rgba(11,21,51,.06); --stage-shadow: 0 24px 60px -24px rgba(32,18,90,.45);
  --logo-badge-bg: transparent; --logo-badge-pad: 0;
  --track-exec: #1E2A6B; --track-emb: #6B2C83; --track-plat: #A3AAC0; --track-cont: #F0106E;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #070B18; --surface: #0F1529; --surface-2: #121A31; --text: #E9EDFB; --muted: #9CA6C6; --faint: #6F7996;
  --border: #1F2845; --soft: #161E38; --indigo: #8C9BFF; --accent-text: #FF5AA3; --teal-text: #3FD1C8;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.3); --shadow-md: 0 12px 32px rgba(0,0,0,.35);
  --stage-border: 1px solid rgba(255,255,255,.07); --stage-shadow: 0 24px 60px -24px rgba(0,0,0,.8);
  --logo-badge-bg: #FFFFFF; --logo-badge-pad: .3rem;
  --track-exec: #8C9BFF; --track-emb: #B47BD6; --track-plat: #4A5577; --track-cont: #FF3D93;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #070B18; --surface: #0F1529; --surface-2: #121A31; --text: #E9EDFB; --muted: #9CA6C6; --faint: #6F7996;
    --border: #1F2845; --soft: #161E38; --indigo: #8C9BFF; --accent-text: #FF5AA3; --teal-text: #3FD1C8;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.3); --shadow-md: 0 12px 32px rgba(0,0,0,.35);
    --stage-border: 1px solid rgba(255,255,255,.07); --stage-shadow: 0 24px 60px -24px rgba(0,0,0,.8);
    --logo-badge-bg: #FFFFFF; --logo-badge-pad: .3rem;
    --track-exec: #8C9BFF; --track-emb: #B47BD6; --track-plat: #4A5577; --track-cont: #FF3D93;
    color-scheme: dark;
  }
}

/* -------------------------------------- BASE -------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
:root { padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
html { scroll-padding-top: calc(env(safe-area-inset-top, 0px) + 76px); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 16px/1.55 var(--font); font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased; }
img { max-width: 100%; }
button { font: inherit; color: inherit; }
a { color: inherit; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
::selection { background: rgba(240,16,110,.18); }
:focus-visible { outline: 3px solid var(--pink); outline-offset: 2px; border-radius: 6px; }
.skip { position: absolute; left: 1rem; top: -3rem; z-index: 50; background: var(--surface); padding: .5rem .9rem; border-radius: 8px; }
.skip:focus { top: 1rem; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem 4rem; }
.wrap:focus { outline: none; }
.boot { padding: 6rem 0; text-align: center; color: var(--muted); }
.cq { container-type: inline-size; width: 100%; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

/* -------------------------------------- BARRA SUPERIOR -------------------------------------- */
.topbar { position: sticky; top: 0; z-index: 20; padding-top: env(safe-area-inset-top, 0px);
  background: color-mix(in srgb, var(--bg) 84%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent); }
.topbar-in { max-width: 1200px; margin: 0 auto; padding: .7rem 1.5rem; display: flex; align-items: center; gap: 1rem; }
.logo { display: block; height: 52px; width: auto; background: var(--logo-badge-bg); padding: var(--logo-badge-pad); border-radius: 10px; }
.top-right { margin-left: auto; display: flex; align-items: center; gap: .6rem; }
.who { display: flex; align-items: center; gap: .6rem; padding: .25rem .8rem .25rem .3rem; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--border); }
.who .avatar { width: 34px; height: 34px; }
.who b { display: block; font-size: .88rem; line-height: 1.15; }
.who small { display: block; font-size: .72rem; color: var(--accent-text); font-weight: 600; }
@media (max-width: 640px) { .who-text { display: none; } .who { padding: .25rem; } .topbar-in { padding: .6rem 1rem; } .wrap { padding: 0 1rem 3rem; } }
.icon-btn { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border);
  background: var(--surface); color: var(--text); cursor: pointer; }
.icon-btn:hover { border-color: var(--pink); color: var(--accent-text); }

/* -------------------------------------- BOTÕES -------------------------------------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 2.75rem; padding: 0 1.15rem;
  border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--surface); color: var(--text); font-weight: 600;
  font-size: .94rem; cursor: pointer; text-decoration: none; box-shadow: var(--shadow-sm); transition: border-color .15s, color .15s, filter .15s; }
.btn:hover { border-color: var(--pink); color: var(--accent-text); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; box-shadow: none; background: var(--soft); pointer-events: none; }
.btn.primary { background: var(--grad); background-size: 140% 100%; color: #FFFFFF; border: none; box-shadow: 0 8px 20px -8px rgba(240,16,110,.55); }
.btn.primary:hover { background-position: 100% 0; filter: brightness(1.06); color: #FFFFFF; }
.btn.block { width: 100%; }
.btn.pill { border-radius: 999px; padding: 0 1.6rem; min-height: 3rem; }
.btn.ghost-dark { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.22); color: #FFFFFF; box-shadow: none; }
.btn.ghost-dark:hover { border-color: #FF6FB0; color: #FFFFFF; }
.btn.small { min-height: 2.2rem; padding: 0 .8rem; font-size: .84rem; }
.btn.busy { opacity: .7; pointer-events: none; }

/* --------------------------------------  TOPO (dark) --------------------------------------  */
.hero { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,1fr);
  gap: 2rem; align-items: center; background: var(--stage-bg); border: var(--stage-border); border-radius: var(--r-lg);
  padding: 2.6rem 2.8rem 2.4rem; box-shadow: var(--stage-shadow); margin: 1.4rem 0 1.4rem; color: var(--stage-text); }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
  background-image: radial-gradient(rgba(255,255,255,.22) 1px, transparent 1.4px); background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(55% 75% at 78% 45%, #000 0%, transparent 80%); mask-image: radial-gradient(55% 75% at 78% 45%, #000 0%, transparent 80%); }
@media (max-width: 860px) { .hero { grid-template-columns: 1fr; padding: 1.7rem 1.3rem 1.5rem; gap: 1rem; } }
.eyebrow { display: inline-flex; align-items: center; gap: .55rem; font-size: .86rem; font-weight: 500; color: var(--stage-muted); }
.eyebrow::before { content: ""; width: 28px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--teal), var(--pink)); }
.hero-title { font-family: var(--display); font-weight: 400; font-size: clamp(2.6rem, 5.2vw, 3.9rem); letter-spacing: -.02em;
  line-height: 1.02; margin: .8rem 0 .75rem; }
.hero-title i { font-style: normal; color: var(--pink); font-weight: 600; }
.hero-lead { color: var(--stage-muted); font-size: 1.06rem; line-height: 1.6; max-width: 34rem; }
.hero-lead strong { color: var(--stage-text); font-weight: 700; }
.hero-when { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-top: .55rem; font-size: .88rem; font-weight: 500; }
.hero-when svg { opacity: .75; }
.cd { padding: .1rem .55rem; border-radius: 999px; font-weight: 600; font-size: .78rem; color: #FFFFFF;
  background: rgba(0,163,155,.28); border: 1px solid rgba(63,209,200,.45); }
.chips { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1.2rem; }
.chip { color: var(--stage-text); background: var(--stage-chip); border: 1px solid var(--stage-line); padding: .28rem .8rem;
  border-radius: 999px; font-size: .8rem; font-weight: 500; }
.hp { margin-top: 1.6rem; max-width: 30rem; }
.hp-top { display: flex; justify-content: space-between; font-size: .82rem; color: var(--stage-muted); margin-bottom: .5rem; }
.hp-top b { color: var(--stage-text); font-weight: 700; font-size: .95rem; }
.hp-bar { height: 8px; border-radius: 999px; background: rgba(255,255,255,.1); overflow: hidden; }
.hp-bar i { display: block; height: 100%; width: calc(var(--x) * 100%); border-radius: 999px; background: var(--grad);
  box-shadow: 0 0 16px rgba(240,16,110,.7); transition: width .8s cubic-bezier(.2,.8,.2,1); }
.hatch-hint { display: flex; gap: .7rem; align-items: flex-start; margin: 1.4rem 0 1rem; max-width: 30rem; padding: .85rem 1rem;
  border-radius: 14px; background: rgba(255,255,255,.06); border: 1px dashed rgba(255,255,255,.22); color: var(--stage-muted);
  font-size: .88rem; line-height: 1.5; }
.hatch-hint svg { color: #FFC2DD; flex: none; margin-top: .1rem; }
.login-head { margin: 1.6rem 0 .7rem; }
.login-head b { display: block; font-size: 1.02rem; }
.login-head span { color: var(--stage-muted); font-size: .88rem; }
.hero-alert { margin: 1.4rem 0 .9rem; max-width: 32rem; padding: .9rem 1rem; border-radius: 14px; background: rgba(240,16,110,.12);
  border: 1px solid rgba(240,16,110,.35); font-size: .92rem; line-height: 1.5; }

/* perfil (primeiro acesso e edição) */
.pf { margin-top: 1.5rem; max-width: 30rem; display: grid; gap: .9rem; }
.pf-field { display: grid; gap: .35rem; }
.pf-label { font-size: .86rem; font-weight: 600; }
.pf select { appearance: none; -webkit-appearance: none; width: 100%; min-height: 3rem; padding: 0 2.6rem 0 1rem; border-radius: var(--r-sm);
  border: 1px solid rgba(255,255,255,.24); color: #FFFFFF; font: 500 .96rem var(--font); cursor: pointer;
  background: rgba(255,255,255,.07) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 1rem center; }
.pf select:hover { border-color: #FF6FB0; }
.pf select:focus-visible { outline: 3px solid var(--pink); outline-offset: 2px; }
.pf option { color: #0B1A3F; background: #FFFFFF; }
.pf input { width: 100%; min-height: 3rem; padding: 0 1rem; border-radius: var(--r-sm); border: 1px solid rgba(255,255,255,.24);
  background: rgba(255,255,255,.07); color: #FFFFFF; font: 500 .96rem var(--font); }
.pf input::placeholder { color: rgba(255,255,255,.45); }
.pf input:hover { border-color: #FF6FB0; }
.pf input:focus-visible { outline: 3px solid var(--pink); outline-offset: 2px; }
.pf-locked { display: flex; flex-direction: column; padding: .65rem 1rem; border-radius: var(--r-sm); background: rgba(255,255,255,.05);
  border: 1px dashed rgba(255,255,255,.2); }
.pf-locked small { color: var(--stage-muted); font-size: .78rem; }
.pf-help { color: var(--stage-muted); font-size: .84rem; line-height: 1.5; }
.pf-error { color: #FF8BC0; font-size: .88rem; min-height: 1.2em; margin: -.3rem 0 0; }
.pf-actions { display: flex; flex-wrap: wrap; gap: .6rem; }

/* o SabIÁ no palco */
.stage { position: relative; display: flex; flex-direction: column; align-items: center; gap: .4rem; }
.stage-art { position: relative; z-index: 0; width: min(100%, 430px); aspect-ratio: 820/746; }
@media (max-width: 860px) { .stage-art { width: min(100%, 300px); } }
.stage-halo { position: absolute; inset: 8% 10% 4%; z-index: -1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(107,44,131,.42), rgba(240,16,110,.16) 55%, transparent 100%); filter: blur(8px); }
.stage-art::after { content: ""; position: absolute; left: 22%; right: 22%; bottom: 2%; height: 9%; z-index: -1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0,163,155,.35), transparent); filter: blur(4px); }
.stage-img { display: block; width: 100%; height: 100%; object-fit: contain; animation: float 6s ease-in-out infinite; user-select: none; }
.stage-art.evolved .stage-img { animation: evolve 1.3s cubic-bezier(.2,.8,.2,1) both, float 6s 1.3s ease-in-out infinite; }
.stage-art.evolved .stage-halo { animation: flash 1.6s ease-out both; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes evolve { 0% { opacity: 0; transform: scale(.82); filter: brightness(2.6) saturate(.4) blur(8px); }
                    55% { opacity: 1; filter: brightness(1.5) blur(0); } 100% { transform: scale(1); filter: none; } }
@keyframes flash { 0% { transform: scale(.6); opacity: 0; } 35% { transform: scale(1.15); opacity: 1; filter: blur(4px) brightness(1.8); }
                   100% { transform: scale(1); opacity: 1; } }
.stage-tag { display: flex; flex-direction: column; align-items: center; gap: .1rem; padding: .55rem 1.2rem; border-radius: 16px;
  background: var(--stage-chip); border: 1px solid var(--stage-line); backdrop-filter: blur(8px); text-align: center; }
.stage-tag span { font-size: .76rem; font-weight: 500; color: var(--stage-muted); }
.stage-tag b { font-family: var(--display); font-size: 1.15rem; font-weight: 500; }
.stage-tag em { font-style: normal; font-size: .8rem; color: var(--stage-muted); max-width: 19rem; line-height: 1.4; margin-top: .1rem; }

/* -------------------------------------- MINIATURAS DAS SKINS -------------------------------------- */
.thumb { --t: 40px; position: relative; display: inline-grid; place-items: center; width: var(--t); height: var(--t); flex: none;
  border-radius: 50%; overflow: hidden; background: var(--stage-art-bg); isolation: isolate; vertical-align: middle; }
.thumb img { width: 128%; max-width: none; height: auto; }
.thumb.xs { --t: 24px; } .thumb.node { --t: 100%; } .thumb.lg { --t: 78px; } .thumb.avatar { --t: 34px; box-shadow: 0 0 0 2px var(--pink); }
.thumb.locked img { filter: grayscale(1) brightness(.55); }
.thumb-lock { position: absolute; inset: 0; display: grid; place-items: center; color: #FFFFFF; }
.thumb-lock svg { width: 34%; height: 34%; min-width: 12px; filter: drop-shadow(0 1px 3px rgba(0,0,0,.6)); }
.thumb.xs .thumb-lock { display: none; }

/* -------------------------------------- BRIEFING -------------------------------------- */
.briefing { display: grid; grid-template-columns: minmax(0,1.45fr) minmax(0,1fr); gap: 1rem; margin: 0 0 1.6rem; }
@container (max-width: 820px) { .briefing { grid-template-columns: 1fr; } }
.ts, .oc { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 1.45rem 1.6rem 1.2rem; box-shadow: var(--shadow-sm); }
.ts { border-top: 3px solid var(--teal); }
.ts-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; padding-bottom: .9rem; border-bottom: 1px solid var(--border); }
.ts-title, .oc-title { font-family: var(--display); font-size: 1.45rem; font-weight: 500; line-height: 1.2; margin: 0; }
.ts-sub { color: var(--muted); font-size: .86rem; margin-top: .2rem; }
.ts-total { text-align: right; flex: none; }
.ts-total b { display: block; font-family: var(--display); font-size: 2.7rem; font-weight: 400; line-height: 1; color: var(--teal-text); letter-spacing: -.02em; }
.ts-total span { font-size: .8rem; color: var(--muted); }
.ts-rows { list-style: none; padding-top: .35rem; }
.ts-rows li { display: flex; align-items: baseline; gap: .6rem; padding: .62rem 0; border-bottom: 1px solid var(--soft); }
.ts-rows li:last-child { border-bottom: none; }
.ts-k { font-weight: 500; font-size: .95rem; }
.ts-dots { flex: 1; min-width: 1.5rem; border-bottom: 1px dotted color-mix(in srgb, var(--faint) 70%, transparent); transform: translateY(-.25em); }
.ts-v { display: flex; flex-direction: column; align-items: flex-end; text-align: right; font-weight: 600; font-size: .95rem; }
.ts-v small { color: var(--muted); font-weight: 400; font-size: .78rem; }
.oc ul { list-style: none; margin-top: .9rem; display: grid; gap: .95rem; }
.oc li { display: flex; gap: .75rem; }
.oc-ic { width: 26px; height: 26px; flex: none; border-radius: 50%; display: grid; place-items: center; color: #FFFFFF; background: var(--grad); margin-top: .1rem; }
.oc b { display: block; font-size: .96rem; font-weight: 600; }
.oc p { margin-top: .1rem; color: var(--muted); font-size: .88rem; line-height: 1.5; }

/* -------------------------------------- ABAS -------------------------------------- */
.tabs { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 61px); z-index: 10; display: flex; gap: 1.4rem;
  border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(10px);
  overflow-x: auto; scrollbar-width: none; margin: 0 -.25rem; padding: 0 .25rem; }
.tabs::-webkit-scrollbar { display: none; }
.tab { position: relative; flex: none; padding: .85rem .1rem .9rem; border: none; background: none; color: var(--muted); font-weight: 600;
  font-size: .97rem; cursor: pointer; white-space: nowrap; }
.tab:hover { color: var(--text); }
.tab[aria-selected="true"] { color: var(--text); }
.tab[aria-selected="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; border-radius: 3px; background: var(--grad); }
.panel[hidden] { display: none; }

/* títulos de seção */
.sec-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; margin: 2rem 0 .85rem; }
.sec-title { font-family: var(--display); font-size: 1.62rem; font-weight: 500; letter-spacing: -.01em; line-height: 1.2; margin: 0; }
.sec-sub { color: var(--muted); font-size: .92rem; margin-top: .25rem; line-height: 1.5; max-width: 52rem; }
.sec-sub b { color: var(--text); font-weight: 600; }
.count { display: inline-block; font-size: .82rem; color: var(--muted); background: var(--surface); border: 1px solid var(--border);
  padding: .32rem .85rem; border-radius: 999px; white-space: nowrap; box-shadow: var(--shadow-sm); }
.count b { color: var(--text); font-weight: 700; }
@media (max-width: 640px) { .sec-head { flex-wrap: wrap; align-items: flex-start; } }

/* -------------------------------------- MAPA DA TRILHA -------------------------------------- */
.journey { --slot: 196px; --node: 54px; position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(0,1fr)); margin: .4rem 0 1.6rem; list-style: none; }
.j-road { position: absolute; top: calc(var(--slot) + var(--node)/2 - 3px); height: 6px; border-radius: 999px;
  left: calc(100% / var(--n) / 2); right: calc(100% / var(--n) / 2); background: var(--border); overflow: hidden; }
.j-fill { position: absolute; inset: 0 auto 0 0; width: calc(var(--frac) * 100%); background: var(--grad); border-radius: 999px;
  box-shadow: 0 0 12px rgba(240,16,110,.45); transition: width .8s cubic-bezier(.2,.8,.2,1); }
.j-step { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.j-slot { height: var(--slot); width: 100%; display: flex; position: relative; }
.j-slot.top { align-items: flex-end; } .j-slot.bottom { align-items: flex-start; }
.j-card { position: relative; width: 184%; margin: 0 -42%; background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
  padding: .8rem .9rem .75rem; box-shadow: var(--shadow-sm); text-align: left; cursor: pointer; transition: box-shadow .2s, border-color .2s; }
.j-card:hover { box-shadow: var(--shadow-md); border-color: color-mix(in srgb, var(--pink) 40%, var(--border)); }
.j-step.first .j-card { width: 142%; margin: 0 -42% 0 0; }
.j-step.last .j-card { width: 142%; margin: 0 0 0 -42%; cursor: default; }
.j-slot.top .j-card { margin-bottom: 14px; } .j-slot.bottom .j-card { margin-top: 14px; }
.j-when { display: flex; flex-wrap: wrap; gap: .15rem .5rem; align-items: baseline; font-size: .76rem; font-weight: 600; color: var(--accent-text); }
.j-meta { color: var(--faint); font-weight: 600; font-size: .72rem; }
.j-title { margin: .2rem 0; font-size: .95rem; font-weight: 700; line-height: 1.3; }
.j-card p { font-size: .8rem; line-height: 1.45; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.j-reward { display: flex; align-items: center; gap: .45rem; margin-top: .55rem; padding-top: .5rem; border-top: 1px dashed var(--border); }
.j-reward span { font-size: .74rem; color: var(--muted); line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.j-reward b { color: var(--text); font-weight: 700; }
.j-reward i { font-style: normal; margin: 0 .3rem; color: var(--faint); }
.j-here { position: absolute; top: -11px; right: 12px; background: var(--grad); color: #FFFFFF; font-size: .68rem; font-weight: 700;
  padding: .16rem .6rem; border-radius: 999px; box-shadow: 0 4px 12px rgba(240,16,110,.35); }
.j-slot.bottom .j-here { top: auto; bottom: -11px; }
.j-node { position: relative; z-index: 1; width: var(--node); height: var(--node); border-radius: 50%; flex: none; display: grid; place-items: center;
  background: var(--surface); border: 2px solid var(--border); color: var(--faint); box-shadow: 0 0 0 6px var(--bg); }
.j-step.done .j-node { background: var(--grad); border-color: transparent; color: #FFFFFF; }
.j-step.current .j-node { border-color: var(--pink); color: var(--pink); animation: pulse 2.2s infinite; }
.j-step.current .j-card { border-color: var(--pink); box-shadow: 0 10px 28px -10px rgba(240,16,110,.35); }
.j-step.selected .j-card { outline: 2px solid var(--teal); outline-offset: 2px; }
.j-step.todo .j-card { background: var(--surface-2); }
.j-step.finish .j-node { padding: 0; border: 2px dashed var(--border); overflow: hidden; background: var(--stage-art-bg); }
.j-step.finish.done .j-node { border: 2px solid var(--gold); box-shadow: 0 0 0 6px var(--bg), 0 0 22px rgba(201,162,39,.45); }
.j-check { position: absolute; right: -3px; bottom: -3px; width: 20px; height: 20px; border-radius: 50%; background: var(--success);
  color: #FFFFFF; display: grid; place-items: center; border: 2px solid var(--bg); }
@keyframes pulse { 0% { box-shadow: 0 0 0 6px var(--bg), 0 0 0 6px rgba(240,16,110,.45); }
                   70% { box-shadow: 0 0 0 6px var(--bg), 0 0 0 20px rgba(240,16,110,0); }
                   100% { box-shadow: 0 0 0 6px var(--bg), 0 0 0 6px rgba(240,16,110,0); } }
@container (max-width: 860px) {
  .journey { display: flex; flex-direction: column; gap: .9rem; }
  .j-road { top: 27px; bottom: 27px; left: 24px; right: auto; width: 6px; height: auto; }
  .j-fill { inset: 0 0 auto 0; width: 100%; height: calc(var(--frac) * 100%); }
  .j-step { flex-direction: row; align-items: center; gap: 1rem; }
  .j-slot { height: auto; } .j-slot:empty { display: none; }
  .j-step .j-slot.top, .j-step .j-slot.bottom { order: 2; }
  .j-card, .j-step.first .j-card, .j-step.last .j-card { width: 100%; margin: 0 !important; }
  .j-card p { -webkit-line-clamp: 3; }
}

/* -------------------------------------- SELETOR DE ETAPAS -------------------------------------- */
.pills-label { font-weight: 600; font-size: .85rem; color: var(--muted); margin: .4rem 0 .5rem; }
.pills { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: 1rem; }
.pill-btn { border: 1px solid var(--border); background: var(--surface); border-radius: 999px; padding: .4rem .95rem; min-height: 2.3rem;
  font-weight: 600; font-size: .86rem; cursor: pointer; box-shadow: var(--shadow-sm); }
.pill-btn:hover { border-color: var(--pink); }
.pill-btn[aria-pressed="true"] { background: var(--grad); color: #FFFFFF; border-color: transparent; box-shadow: 0 6px 16px -6px rgba(240,16,110,.55); }

/* -------------------------------------- PAINEL DA ETAPA -------------------------------------- */
.step-panel { display: grid; grid-template-columns: minmax(0,2.1fr) minmax(250px,1fr); gap: 1.6rem; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r-lg); padding: 1.9rem 2.1rem; box-shadow: var(--shadow-md); }
@media (max-width: 860px) { .step-panel { grid-template-columns: 1fr; padding: 1.3rem 1.2rem; } }
.status { display: inline-flex; align-items: center; gap: .35rem; padding: .22rem .7rem; border-radius: 999px; font-size: .74rem; font-weight: 700; }
.status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status.done { background: rgba(19,162,111,.12); color: var(--success); }
.status.current { background: rgba(240,16,110,.1); color: var(--accent-text); }
.status.todo { background: var(--soft); color: var(--muted); }
.panel-title { font-family: var(--display); font-size: 2rem; font-weight: 500; letter-spacing: -.01em; line-height: 1.15; margin: .7rem 0 .45rem; }
.panel-meta { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; color: var(--muted); font-size: .86rem; }
.panel-meta span { display: inline-flex; align-items: center; gap: .4rem; }
.panel-meta svg { color: var(--faint); }
.panel-lead { font-size: 1.02rem; line-height: 1.65; margin-top: 1rem; }
.panel-h { font-size: .86rem; font-weight: 600; color: var(--muted); margin: 1.5rem 0 .55rem; }
.panel-p { line-height: 1.6; font-size: .95rem; }
.panel-list { list-style: none; display: grid; gap: .4rem; counter-reset: item; }
.panel-list li { position: relative; padding-left: 1.7rem; font-size: .94rem; line-height: 1.5; }
.panel-list li::before { content: ""; position: absolute; left: .45rem; top: .6em; width: 6px; height: 6px; border-radius: 50%; background: var(--pink); }
ol.panel-list li { counter-increment: item; }
ol.panel-list li::before { content: counter(item); left: 0; top: .08em; width: 1.2rem; height: 1.2rem; border-radius: 6px; background: var(--soft);
  color: var(--muted); font-size: .68rem; font-weight: 700; display: grid; place-items: center; }
.panel-note { font-size: .78rem; color: var(--faint); margin-top: .5rem; }
.panel-tool { margin-top: 1.4rem; padding: .2rem 1.1rem 1rem; border-radius: 16px; background: var(--soft); }
.panel-tool .panel-h { margin-top: 1rem; }
.panel-focus { display: inline-flex; align-items: center; gap: .45rem; margin-top: .8rem; padding: .3rem .75rem; border-radius: 999px;
  background: color-mix(in srgb, var(--teal) 12%, transparent); color: var(--teal-text); font-size: .84rem; }
.panel-focus b { font-weight: 600; }
.facts3 { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .5rem; margin-top: 1rem; }
.facts3 div { padding: .6rem .8rem; border-radius: var(--r-sm); background: var(--soft); display: flex; flex-direction: column; }
.facts3 span { font-size: .76rem; color: var(--muted); }
.facts3 b { font-size: .92rem; font-weight: 600; }
.duo { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .6rem; }
@media (max-width: 640px) { .duo, .facts3 { grid-template-columns: 1fr; } }
.duo > div { padding: .8rem .95rem; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface-2); }
.duo > div:first-child { border-left: 3px solid var(--teal); }
.duo small { display: block; font-size: .76rem; font-weight: 600; color: var(--teal-text); }
.duo p { margin-top: .2rem; font-size: .88rem; line-height: 1.5; }
.side { display: flex; flex-direction: column; gap: .55rem; }
.reward { position: relative; isolation: isolate; overflow: hidden; padding: 1.1rem 1.15rem 1rem; border-radius: var(--r-md);
  background: var(--stage-bg); border: var(--stage-border); color: var(--stage-text); margin-bottom: .4rem; }
.reward-top { display: flex; gap: .95rem; align-items: center; }
.reward small { display: block; font-size: .78rem; font-weight: 500; color: var(--stage-muted); }
.reward strong { display: block; font-family: var(--display); font-size: 1.9rem; font-weight: 500; line-height: 1.15; margin-top: .15rem;
  background: linear-gradient(92deg, #FF6FB0, #C59BFF); -webkit-background-clip: text; background-clip: text; color: transparent; }
.reward-rows { display: grid; gap: .55rem; margin-top: .9rem; padding-top: .85rem; border-top: 1px solid var(--stage-line); }
.reward-rows div { display: flex; flex-direction: column; gap: .05rem; }
.reward-rows span { font-size: .74rem; font-weight: 500; color: var(--stage-muted); }
.reward-rows b { font-size: .88rem; font-weight: 600; line-height: 1.35; }
.reward.won .thumb { box-shadow: 0 0 0 2px var(--gold), 0 0 18px rgba(201,162,39,.4); }
.reward .thumb { box-shadow: 0 0 0 1px rgba(255,255,255,.15); }
.side .panel-h { margin: .6rem 0 .1rem; }

/* -------------------------------------- COLEÇÃO DO SABIÁ -------------------------------------- */
.skins { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 1rem; margin: .3rem 0 1rem; list-style: none; }
@container (max-width: 620px) { .skins { grid-template-columns: repeat(2,minmax(0,1fr)); } }
.skin-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: .5rem .5rem .2rem; box-shadow: var(--shadow-sm); }
.skin-art { position: relative; isolation: isolate; overflow: hidden; aspect-ratio: 1; border-radius: 13px; background: var(--stage-art-bg); display: grid; place-items: center; }
.skin-art img { width: 100%; height: auto; }
.skin-num { position: absolute; bottom: .55rem; left: .7rem; z-index: 2; font-size: .7rem; font-weight: 700; color: rgba(255,255,255,.6); }
.skin-tag { position: absolute; bottom: .5rem; right: .5rem; z-index: 2; font-size: .64rem; font-weight: 700; color: #FFFFFF; padding: .16rem .55rem;
  border-radius: 999px; background: var(--grad); box-shadow: 0 4px 12px rgba(240,16,110,.4); }
.skin-card.next .skin-tag { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.28); box-shadow: none; }
.skin-lock { position: absolute; z-index: 2; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: #FFFFFF;
  background: rgba(10,12,30,.55); border: 1px solid rgba(255,255,255,.25); backdrop-filter: blur(4px); }
.skin-card.locked .skin-art img { filter: grayscale(1) brightness(.4) blur(1.5px); }
.skin-card.next .skin-art img { filter: grayscale(.85) brightness(.6) blur(.6px); }
.skin-card.locked, .skin-card.next { background: var(--surface-2); }
.skin-card.current { border-color: transparent; box-shadow: 0 0 0 2px var(--pink), 0 14px 32px -12px rgba(240,16,110,.45); }
.skin-card.next { border-style: dashed; border-color: color-mix(in srgb, var(--pink) 45%, var(--border)); }
.skin-body { padding: .6rem .3rem .45rem; display: flex; flex-direction: column; gap: .2rem; }
.skin-body b { font-size: .86rem; font-weight: 700; line-height: 1.25; min-height: 2.5em; }
.skin-body small { display: flex; align-items: flex-start; gap: .3rem; font-size: .72rem; color: var(--muted); line-height: 1.3; }
.skin-body small svg { flex: none; margin-top: .05rem; }
.skin-card:is(.owned, .current) .skin-body small svg { color: var(--success); }
.skin-card:is(.locked, .next) .skin-body b { color: var(--muted); }

/* -------------------------------------- aba "O programa" -------------------------------------- */
.scale { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-sm); overflow: hidden; }
.sc-cell { padding: 1.3rem 1.4rem 1.2rem; border-left: 1px solid var(--border); display: flex; flex-direction: column; }
.sc-cell:first-child { border-left: none; }
.sc-cell b { font-family: var(--display); font-size: 2.9rem; font-weight: 400; line-height: 1; letter-spacing: -.02em; }
.sc-cell span { margin-top: .35rem; font-weight: 600; font-size: .95rem; }
.sc-cell small { color: var(--muted); font-size: .82rem; line-height: 1.4; margin-top: .15rem; }
@container (max-width: 760px) { .scale { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .sc-cell:nth-child(3) { border-left: none; } .sc-cell:nth-child(n+3) { border-top: 1px solid var(--border); } }
.paths { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; }
@container (max-width: 820px) { .paths { grid-template-columns: 1fr; } }
.pa { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 1.3rem 1.4rem; box-shadow: var(--shadow-sm); }
.pa.mine { box-shadow: 0 0 0 2px var(--teal), var(--shadow-md); border-color: transparent; }
.pa-h { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.pa-h b { font-family: var(--display); font-size: 1.35rem; font-weight: 500; }
.pa-mine { font-size: .74rem; font-weight: 600; color: #FFFFFF; background: var(--teal); padding: .15rem .6rem; border-radius: 999px; }
.pa-steps { list-style: none; margin-top: 1rem; display: grid; gap: .1rem; }
.pa-steps li { display: flex; gap: .7rem; align-items: flex-start; padding: .5rem 0; position: relative; }
.pa-steps li:not(:last-child)::after { content: ""; position: absolute; left: 15px; top: 2.35rem; bottom: -.35rem; width: 2px; background: var(--soft); }
.pa-ic { width: 32px; height: 32px; flex: none; border-radius: 10px; display: grid; place-items: center; background: var(--soft); color: var(--indigo); }
.pa-steps b { display: block; font-size: .92rem; font-weight: 600; }
.pa-steps small { color: var(--muted); font-size: .8rem; }
.fm { margin-top: .9rem; }
.fm > small { font-size: .82rem; font-weight: 600; color: var(--muted); }
.fm .facts3 { margin-top: .35rem; }
.model { list-style: none; display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: .8rem; }
@container (max-width: 900px) { .model { grid-template-columns: 1fr; } }
.model li { padding: 1.1rem 1.1rem 1.15rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); }
.md-n { font-family: var(--display); font-size: 1.9rem; line-height: 1; color: var(--pink); }
.model b { display: block; margin: .5rem 0 .25rem; font-size: .95rem; font-weight: 600; }
.model p { color: var(--muted); font-size: .84rem; line-height: 1.45; }
.tbl-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); }
.tbl { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tbl th { text-align: left; font-weight: 600; font-size: .8rem; color: var(--muted); padding: .85rem 1.1rem; border-bottom: 1px solid var(--border); }
.tbl td { padding: .75rem 1.1rem; border-bottom: 1px solid var(--soft); vertical-align: top; }
.tbl tr:last-child td { border-bottom: none; }
.tbl td:first-child { font-family: var(--display); font-size: 1.15rem; color: var(--faint); width: 3.5rem; }
.tbl tr.mine td { background: color-mix(in srgb, var(--teal) 9%, transparent); }
.tbl tr.mine td:first-child { color: var(--teal-text); box-shadow: inset 3px 0 0 var(--teal); }
.companies { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: .7rem; }
@container (max-width: 620px) { .companies { grid-template-columns: repeat(2,minmax(0,1fr)); } }
.co { padding: 1rem 1.1rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); display: flex; flex-direction: column; }
.co.mine { box-shadow: 0 0 0 2px var(--teal); border-color: transparent; }
.co b { font-weight: 600; }
.co span { font-family: var(--display); font-size: 1.6rem; line-height: 1.2; }
.cont { list-style: none; display: grid; grid-template-columns: repeat(auto-fit,minmax(230px,1fr)); gap: .7rem; }
.cont li { padding: 1rem 1.1rem; border-radius: var(--r-md); background: var(--soft); }
.cont b { font-weight: 600; }
.cont p { margin-top: .2rem; color: var(--muted); font-size: .86rem; line-height: 1.45; }
.note-card { margin: 1rem 0; padding: 1rem 1.2rem; border-radius: var(--r-md); background: var(--soft); font-size: .92rem; line-height: 1.6; }
.note-card .panel-h { margin-top: .1rem; }

/* -------------------------------------- KIT PRÁTICO -------------------------------------- */
.tips { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 1rem; }
@container (max-width: 760px) { .tips { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@container (max-width: 420px) { .tips { grid-template-columns: 1fr; } }
.tip { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 1.15rem 1.2rem 1.2rem; box-shadow: var(--shadow-sm); }
.tip b { display: block; font-family: var(--display); font-size: 1.3rem; font-weight: 500; margin-bottom: .3rem; }
.tip p { color: var(--muted); font-size: .88rem; line-height: 1.5; }
.checklist { list-style: none; display: grid; grid-template-columns: repeat(auto-fit,minmax(300px,1fr)); gap: .6rem; }
.checklist li { display: flex; gap: .75rem; align-items: flex-start; padding: .8rem .95rem; background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; font-size: .92rem; line-height: 1.45; }
.cl-ic { width: 26px; height: 26px; flex: none; border-radius: 8px; display: grid; place-items: center; background: rgba(240,16,110,.1); color: var(--pink); }
.checklist.safe .cl-ic { background: rgba(19,162,111,.12); color: var(--success); }
.prompts { display: grid; gap: .7rem; }
.prompt { position: relative; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); padding: 1rem 7.5rem 1rem 1.1rem;
  font-size: .94rem; line-height: 1.6; white-space: pre-wrap; }
.prompt .btn { position: absolute; top: .7rem; right: .7rem; }
@media (max-width: 640px) { .prompt { padding: 1rem 1rem 3.6rem; } .prompt .btn { top: auto; bottom: .7rem; } }

/* -------------------------------------- CRONOGRAMA -------------------------------------- */
.gantt-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 1.2rem 1.4rem 1rem; box-shadow: var(--shadow-sm); overflow-x: auto; }
.gantt { --label: 15rem; position: relative; min-width: 720px; }
.g-axis, .g-row { display: grid; grid-template-columns: var(--label) 1fr; align-items: center; }
.g-axis { height: 2rem; }
.g-ticks { position: relative; height: 100%; }
.g-tick { position: absolute; top: 0; bottom: 0; font-size: .74rem; color: var(--muted); transform: translateX(-50%); }
.g-row { min-height: 2.4rem; border-top: 1px solid var(--soft); }
.g-label { font-size: .84rem; color: var(--text); padding-right: 1rem; line-height: 1.3; }
.g-lane { position: relative; height: 2.4rem; }
.g-bar { position: absolute; top: 50%; height: 1.15rem; transform: translateY(-50%); border-radius: 6px; min-width: 8px; background: var(--track-exec); }
.g-bar.t-emb { background: var(--track-emb); } .g-bar.t-plat { background: var(--track-plat); } .g-bar.t-cont { background: var(--track-cont); }
.g-ms { position: absolute; top: 50%; width: 13px; height: 13px; transform: translate(-50%,-50%) rotate(45deg); background: var(--track-exec);
  border: 2px solid var(--surface); border-radius: 2px; }
.g-ms.t-emb { background: var(--track-emb); } .g-ms.t-cont { background: var(--track-cont); }
.g-grid { position: absolute; top: 2rem; bottom: 0; width: 1px; background: var(--soft); }
.g-today { position: absolute; top: 1.5rem; bottom: 0; width: 0; border-left: 1.5px dotted var(--pink); z-index: 2; }
.g-today span { position: absolute; top: -1.2rem; left: 50%; transform: translateX(-50%); font-size: .72rem; color: var(--pink); font-weight: 600; }
.g-off { position: absolute; top: 2rem; bottom: 0; background: repeating-linear-gradient(135deg, var(--soft) 0 4px, transparent 4px 8px); opacity: .9; }
.legend { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; margin-top: .9rem; font-size: .8rem; color: var(--muted); }
.legend span { display: inline-flex; align-items: center; gap: .4rem; }
.legend i { width: 12px; height: 12px; border-radius: 3px; background: var(--track-exec); }
.legend i.t-emb { background: var(--track-emb); } .legend i.t-plat { background: var(--track-plat); } .legend i.t-cont { background: var(--track-cont); }
.legend i.off { background: repeating-linear-gradient(135deg, var(--faint) 0 2px, transparent 2px 4px); }
.keydates { list-style: none; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); overflow: hidden; }
.keydates li { display: flex; align-items: center; gap: 1.1rem; padding: .7rem 1.2rem; border-bottom: 1px solid var(--soft); }
.keydates li:last-child { border-bottom: none; }
.kd-d { display: flex; align-items: baseline; gap: .45rem; width: 6.2rem; flex: none; }
.kd-d b { font-family: var(--display); font-size: 1.35rem; font-weight: 500; }
.kd-d small { color: var(--muted); font-size: .8rem; }
.kd-t { font-size: .94rem; }
.keydates li.off { background: var(--surface-2); }
.keydates li.off :is(b, .kd-t) { color: var(--faint); }
.keydates li.past :is(b, .kd-t) { color: var(--faint); text-decoration: line-through; text-decoration-thickness: 1px; }

/* -------------------------------------- DÚVIDAS -------------------------------------- */
.faq { display: grid; gap: .6rem; }
.faq details { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-sm); }
.faq summary { list-style: none; cursor: pointer; padding: 1rem 1.2rem; font-weight: 600; display: flex; justify-content: space-between; gap: 1rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--display); font-size: 1.4rem; line-height: 1; color: var(--faint); }
.faq details[open] summary::after { content: "–"; }
.faq summary:hover { color: var(--accent-text); }
.faq details p { padding: 0 1.2rem 1.1rem; color: var(--muted); line-height: 1.6; }
.contact { margin-top: 1rem; color: var(--muted); font-size: .9rem; }

/* -------------------------------------- AVISOS -------------------------------------- */
.toasts { position: fixed; z-index: 60; right: 1rem; bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); display: grid; gap: .5rem; max-width: min(92vw, 24rem); }
.toast { display: flex; gap: .7rem; align-items: flex-start; padding: .85rem 1rem; border-radius: 14px; background: var(--navy); color: #FFFFFF;
  box-shadow: 0 16px 40px -12px rgba(0,0,0,.45); font-size: .92rem; line-height: 1.45; animation: toast-in .35s cubic-bezier(.2,.8,.2,1) both; }
.toast svg { color: #FF8BC0; flex: none; margin-top: .1rem; }
.toast.out { animation: toast-out .3s ease both; }
.toast.error { background: #7A0E2E; }
@keyframes toast-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateY(8px); } }
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 55; overflow: hidden; }
.confetti i { position: absolute; top: -12px; width: 8px; height: 14px; border-radius: 2px; animation: fall linear forwards; }
@keyframes fall { to { transform: translate3d(var(--dx), 105vh, 0) rotate(var(--r)); } }