.onboarding-page { position: relative; min-height: 100svh; overflow-x: hidden; background: var(--cream); color: var(--navy); }
.onboarding-page::before, .onboarding-page::after { display: none; }
.onboarding-page > * { position: relative; z-index: 1; }
.onboarding-content { display: flex; flex-direction: column; align-items: center; width: min(100%, 40rem); margin: 0 auto; padding: 2.5rem 1rem 2rem; text-align: center; }
.onboarding-back { position: absolute; z-index: 2; top: 1.25rem; left: 1rem; display: grid; place-items: center; width: 3.25rem; height: 3.25rem; border: 0; border-radius: 50%; background: rgba(255,255,255,.65); color: var(--navy); cursor: pointer; }
.onboarding-back svg { width: 2rem; height: 2rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.3; }
.onboarding-brand { justify-content: center; margin: 0 auto .4rem; width: fit-content; }
.onboarding-brand .brand-name { font-size: clamp(3rem, 12vw, 5.3rem); }
.onboarding-progress { margin: 0 0 .35rem; color: var(--coral-dark); font-size: .76rem; font-weight: 500; letter-spacing: 0; text-transform: none; }
.onboarding-heading h1 { max-width: 36rem; margin: 0 auto; font-size: clamp(2rem, 7.5vw, 2.8rem); line-height: 1.05; letter-spacing: -.06em; }
.onboarding-heading p { max-width: 42rem; margin: .65rem auto 0; color: var(--muted); font-size: clamp(1rem, 3.7vw, 1.45rem); line-height: 1.25; }
.onboarding-mascot { display: flex; align-items: end; justify-content: center; height: clamp(12rem, 46vw, 20rem); margin: .6rem auto -1px; }
.onboarding-mascot img { width: min(92%, 30rem); height: 100%; object-fit: contain; object-position: center bottom; }
.onboarding-mascot--currency img { width: min(90%, 28rem); }
.onboarding-panel { position: relative; width: min(100%, 56rem); margin: 0 auto; padding: 1.35rem 1rem 1.15rem; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--white); box-shadow: var(--shadow-card); }
.onboarding-panel::before { content: ''; position: absolute; top: -2px; left: 0; right: 0; height: 3px; border-radius: 50%; background: rgba(255,255,255,.92); }
.currency-search { width: 100%; min-height: 3.6rem; border: 2px solid #d7d8de; border-radius: var(--radius-pill); padding: .7rem 1.2rem .7rem 3.2rem; background: rgba(255,255,255,.38); color: var(--navy); font: inherit; font-size: 1rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%23647187' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='10' cy='10' r='6'/%3E%3Cpath d='m15 15 6 6'/%3E%3C/svg%3E"); background-position: 1rem center; background-repeat: no-repeat; }
.currency-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin: 1rem 0; }
.currency-card { display: flex; align-items: center; gap: .7rem; min-height: 5.3rem; border: 2px solid transparent; border-radius: 1.5rem; padding: .7rem; background: rgba(255,255,255,.74); color: var(--navy); text-align: left; cursor: pointer; box-shadow: 0 5px 14px rgba(33,43,64,.05); }
.currency-card.is-selected { border-color: var(--mint); background: #e2fbf4; }
.currency-card strong, .currency-card small { display: block; }
.currency-card strong { font-size: 1.15rem; }
.currency-card small { margin-top: .2rem; color: var(--muted); font-size: .75rem; line-height: 1.15; }
.currency-flag { display: block; width: 3.4rem; height: 2.15rem; flex: 0 0 auto; border-radius: .65rem; box-shadow: inset 0 0 0 1px rgba(16,43,76,.08); }
.flag-mad { background: #e32636; position: relative; }
.flag-mad::after { content: '★'; position: absolute; inset: 0; display: grid; place-items: center; color: #006233; font-size: 1.1rem; }
.flag-xof { background: linear-gradient(90deg, #f5a400 0 33%, #fff 33% 66%, #009b4d 66%); }
.flag-eur { background: #17469e; position: relative; }
.flag-eur::after { content: '✦'; position: absolute; inset: 0; display: grid; place-items: center; color: #ffd42a; font-size: 1.2rem; }
.flag-usd { background: repeating-linear-gradient(0deg, #b22234 0 10%, #fff 10% 20%); position: relative; }
.flag-usd::after { content: '✦'; position: absolute; top: 0; left: 0; width: 44%; height: 55%; background: #3c3b6e; color: #fff; font-size: .8rem; text-align: center; }
.flag-gbp { background: #1e3f95; }
.flag-cad { background: linear-gradient(90deg, #d52b1e 0 25%, #fff 25% 75%, #d52b1e 75%); }
.flag-chf { background: #d52b1e; }
.flag-jpy { background: radial-gradient(circle at center, #bc002d 0 25%, #fff 27%); }
.flag-cny { background: #de2910; }
.flag-ngn { background: linear-gradient(90deg, #008751 0 33%, #fff 33% 66%, #008751 66%); }
.onboarding-primary, .onboarding-secondary { width: 100%; min-height: 3.7rem; border-radius: var(--radius-pill); font: inherit; font-size: 1.1rem; font-weight: 800; cursor: pointer; }
.onboarding-primary { border: 0; background: #c94532; color: #fff; box-shadow: var(--shadow-button); }
.onboarding-primary:hover { background: #b73b29; }
.onboarding-secondary { border: 2px solid #cdd0d5; background: transparent; color: #45515e; }
.finance-panel { padding: 1.5rem 1rem 1.15rem; }
.amount-label { display: block; margin-bottom: .55rem; color: #45515e; font-size: 1.1rem; font-weight: 700; }
.amount-row { display: flex; align-items: center; min-height: 4rem; border: 2px solid var(--coral); border-radius: var(--radius-pill); background: rgba(255,255,255,.42); }
.amount-row input { min-width: 0; width: 100%; border: 0; outline: 0; padding: .6rem 1rem; background: transparent; color: var(--navy); font: inherit; font-size: clamp(1.8rem, 7vw, 3rem); font-weight: 800; text-align: center; }
.amount-row input::placeholder { color: #8d96a1; }
.amount-currency { min-width: 3.5rem; margin-right: .8rem; color: var(--navy); font-size: 1.05rem; font-weight: 800; }
.onboarding-error { min-height: 1.15rem; margin: .4rem .5rem 0; color: #b33e32; font-size: .85rem; }
.onboarding-visualization { min-height: 16rem; display: grid; place-items: center; }
.donut-wrap { position: relative; width: 19rem; max-width: 100%; height: 19rem; display: grid; place-items: center; }
.onboarding-page .donut-wrap { width: min(100%, 20rem); height: 20rem; }
.donut { width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.donut-segment { pointer-events: none; }
.donut-center { position: absolute; display: grid; justify-items: center; gap: .1rem; max-width: 70%; text-align: center; }
.donut-center strong { font-size: clamp(1.35rem, 6vw, 2rem); line-height: 1; }
.donut-center span { color: #45515e; font-size: 1.05rem; font-weight: 700; }
.onboarding-page .donut-center { inset: 0; width: 72%; max-width: 72%; margin: auto; overflow-wrap: anywhere; }
.onboarding-page .donut-center strong { max-width: 100%; font-size: clamp(1rem, 5vw, 1.65rem); line-height: 1.05; overflow-wrap: anywhere; }
.onboarding-page .donut-center span { font-size: .9rem; }
.donut-center small { color: #45515e; font-size: .85rem; }
.remaining-budget { margin: -.25rem 0 .6rem; color: #45515e; font-size: 1rem; font-weight: 700; }
.onboarding-actions { display: grid; gap: .75rem; }
.onboarding-page button:focus-visible, .onboarding-page input:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }
.onboarding-heading h1:focus { outline: none; }
@keyframes donut-in { from { opacity: .2; stroke-dashoffset: 0; } to { opacity: 1; } }
@media (min-width: 600px) { .onboarding-content { padding-top: 3.5rem; } .onboarding-panel { padding: 1.8rem 2.5rem 1.5rem; } .onboarding-mascot { height: clamp(13rem, 28vw, 20rem); } .currency-card { min-height: 6rem; padding: 1rem; } .onboarding-visualization { min-height: 20rem; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }