/* =====================================================================================================
   FamlyUp – Design (nach dem Entwurf im Artifact "FamlyUp App-Design")
   Gilt für PWA und MAUI-App gleichermaßen. Eingebunden als "_content/FamlyUp.App.UI/famlyup.css".

   Aufbau:
   - Farben, Radien und Schriften als CSS-Variablen ("Tokens") in :root
   - .theme-kid überschreibt die Tokens für die verspielte Kinderansicht, .kid-ocean usw. die Farben je Thema
   - darunter die Bausteine: Seite, Karten, Kacheln, Buttons, Formulare, Navigation

   Schriften: bewusst Systemschriften (kein Google-Fonts-CDN, DSGVO). ui-rounded = runde Systemschrift
   auf iPhone/Mac für die Kinderansicht. Eigene Schriftdateien können später selbst ausgeliefert werden.
   ===================================================================================================== */

:root {
    --bg: #F5F6FA;
    --surface: #FFFFFF;
    --ink: #1B1E2B;
    --muted: #5B6070;
    --line: #E6E8EF;
    --primary: #1B1E2B;
    --primary-ink: #FFFFFF;
    --danger: #B42318;
    --danger-bg: #FDECEA;
    --success: #17714A;

    /* Farbe pro Funktion (Hintergrund, Symbol, Schrift) */
    --money-bg: #FFF1E3;  --money-fg: #B4520A;  --money-ink: #6E4A2A;
    --vocab-bg: #E8F0FF;  --vocab-fg: #2456C9;  --vocab-ink: #34477A;
    --family-bg: #E3F5EC; --family-fg: #17714A; --family-ink: #2A5A43;
    --plan-bg: #F1ECFF;   --plan-fg: #6B3FD1;   --plan-ink: #4F3A86;
    --quest-bg: #FFE9F0;  --quest-fg: #B4235A;  --quest-ink: #7A2848;
    --wish-bg: #E2F4F6;   --wish-fg: #0E7C86;   --wish-ink: #1F5A60;
    --coin: #FFC83D;      --coin-ink: #6B4A00;

    --radius: 22px;
    --radius-sm: 14px;
    --shadow: 0 1px 2px rgba(20, 24, 40, 0.06);
    --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-size: 16px;
}

/* Kinderansicht: wärmer, runder, größer. Wird vom Layout gesetzt, wenn ein Kind angemeldet ist. */
.theme-kid {
    --bg: #F3F0FF;
    --ink: #22184D;
    --muted: #5A4E8C;
    --line: #E6E0FF;
    --primary: #6C4BFF;
    --primary-ink: #FFFFFF;
    --primary-shade: #4A2FD1;   /* dunklere Akzentfarbe für die "gedrückten" Schatten unter Knöpfen und Karten */
    --hero-soft: #E4DDFF;       /* helle Schrift auf der Akzentfläche */
    --radius: 26px;
    --shadow: 0 4px 0 #DDD5FF;
    --font: ui-rounded, "SF Pro Rounded", "Arial Rounded MT Bold", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-size: 18px;
}

/* Themen der Kinderansicht (von den Eltern in den Kindereinstellungen gewählt, vom Layout zusätzlich zu .theme-kid
   gesetzt; Klassen aus ChildRules.ThemeCssClass). Bewusst nur Farb-Tokens – das große Redesign kommt später.
   Lila ist das vordefinierte Thema und entspricht .theme-kid ohne Änderungen. Neues Thema: KidTheme-Wert anhängen,
   ThemeName/ThemeCssClass ergänzen und hier einen Block mit denselben Tokens anlegen. */
.kid-purple { }
.kid-ocean {
    --bg: #EAF6FF; --ink: #0F2A44; --muted: #44617D; --line: #D3EAFB;
    --primary: #1C7ED6; --primary-shade: #125AA0; --hero-soft: #D6ECFF;
    --shadow: 0 4px 0 #CBE4FA;
}
.kid-forest {
    --bg: #EEF8EE; --ink: #173622; --muted: #4A6B53; --line: #D8EED9;
    --primary: #2F9E44; --primary-shade: #1F7330; --hero-soft: #DDF3E0;
    --shadow: 0 4px 0 #CDE8D0;
}
.kid-sun {
    --bg: #FFF6E8; --ink: #3D2408; --muted: #7A5A33; --line: #FBE6C8;
    --primary: #E8590C; --primary-shade: #B24308; --hero-soft: #FFE8D2;
    --shadow: 0 4px 0 #F7DDBA;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font);
    font-size: var(--font-size);
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
}

a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin: 0; }
button, input { font: inherit; color: inherit; }

/* ---- Seite ---------------------------------------------------------------------------------------- */

.app {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font);
    font-size: var(--font-size);
}

/* Hinweis oben, solange der Server nicht erreichbar ist (AppLayout). Bleibt beim Scrollen sichtbar. */
.offline-banner {
    position: sticky;
    top: 0;
    z-index: 10;
    padding: calc(8px + env(safe-area-inset-top)) 20px 8px;
    background: #FFF4D1;
    color: #6B4A00;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
}

.page {
    flex: 1;
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    /* env(safe-area-inset-*) = Abstand zur Notch / zum Home-Balken auf dem iPhone */
    padding: calc(24px + env(safe-area-inset-top)) 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.page-header { display: flex; align-items: center; gap: 12px; }
.page-header h1 { flex: 1; font-size: 26px; font-weight: 800; letter-spacing: -0.02em; }
/* Logo auf der Anmeldeseite: mittig, auf kleinen Handys schmaler. Der Bildhintergrund hat dieselbe Farbe wie --bg. */
.login-logo { display: block; width: min(260px, 70%); height: auto; margin: -8px auto 8px; }
.eyebrow { font-size: 14px; font-weight: 600; color: var(--muted); }
.muted { color: var(--muted); }
.small { font-size: 13px; }

.section { display: flex; flex-direction: column; gap: 12px; }
.section h2 { font-size: 17px; font-weight: 700; }

/* ---- Karten und Kacheln --------------------------------------------------------------------------- */

.card {
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.card-dark { background: var(--ink); color: #FFFFFF; }
.card-dark .muted { color: #C9CCD8; }
.card-dark .streak-subtle { color: #A9AEC0; }   /* Serien auf der dunklen Kinderkarte: dezent, aber lesbar */

.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.span-2 { grid-column: span 2; }

.tile {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-height: 140px;
    padding: 18px;
    border-radius: var(--radius);
    background: var(--tile-bg, var(--surface));
}
.tile.wide { min-height: 0; flex-direction: row; align-items: center; }
.tile-icon {
    width: 44px; height: 44px; flex-shrink: 0;
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--tile-fg, var(--ink));
    display: flex; align-items: center; justify-content: center;
}
.tile-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.tile-title { font-weight: 700; }
.tile-sub { font-size: 13px; color: var(--tile-ink, var(--muted)); }
.tile.locked { opacity: 0.6; }

.tile-money  { --tile-bg: var(--money-bg);  --tile-fg: var(--money-fg);  --tile-ink: var(--money-ink); }
.tile-vocab  { --tile-bg: var(--vocab-bg);  --tile-fg: var(--vocab-fg);  --tile-ink: var(--vocab-ink); }
.tile-family { --tile-bg: var(--family-bg); --tile-fg: var(--family-fg); --tile-ink: var(--family-ink); }
.tile-plan   { --tile-bg: var(--plan-bg);   --tile-fg: var(--plan-fg);   --tile-ink: var(--plan-ink); }
.tile-quest  { --tile-bg: var(--quest-bg);  --tile-fg: var(--quest-fg);  --tile-ink: var(--quest-ink); }
.tile-wish   { --tile-bg: var(--wish-bg);   --tile-fg: var(--wish-fg);   --tile-ink: var(--wish-ink); }

.badge {
    min-width: 28px; height: 28px; padding: 0 8px;
    border-radius: 999px;
    background: var(--tile-fg, var(--primary)); color: #FFFFFF;
    font-size: 13px; font-weight: 800;
    display: inline-flex; align-items: center; justify-content: center;
}

.avatar {
    width: 40px; height: 40px; flex-shrink: 0;
    border-radius: 13px;
    background: #F6A04D; color: #1B1E2B;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 800;
}

/* Avatar als Bild aus dem Pool (wwwroot/avatars): füllt die Fläche ganz, die Ecken rundet .avatar ab. */
.avatar-img { overflow: hidden; background: transparent; }
.avatar-img img { width: 100%; height: 100%; display: block; object-fit: cover; }

/* Avatar-Auswahl in den Kindereinstellungen: Raster aus Bild-Knöpfen, der gewählte ist umrandet. */
.avatar-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); gap: 10px; }
.avatar-choice {
    aspect-ratio: 1; padding: 0; border: 3px solid transparent; border-radius: 16px;
    background: var(--bg); cursor: pointer; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 20px; color: var(--muted);
}
.avatar-choice img { width: 100%; height: 100%; display: block; object-fit: cover; }
.avatar-choice.active { border-color: var(--primary); }

.amount { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; }
.amount.negative { color: #FF9C8F; }

.list { display: flex; flex-direction: column; background: var(--surface); border-radius: var(--radius); overflow: hidden; }
.list-row { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.list-row:last-child { border-bottom: 0; }
.list-row .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }

/* ---- Buttons -------------------------------------------------------------------------------------- */

.btn {
    min-height: 48px;
    padding: 0 18px;
    border: 0;
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--ink);
    font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    cursor: pointer;
}
.btn:disabled { opacity: 0.5; cursor: default; }
.btn-primary { background: var(--primary); color: var(--primary-ink); }
.btn-outline { background: transparent; border: 1px solid var(--line); }
.btn-block { width: 100%; min-height: 56px; border-radius: 18px; font-size: 16px; }
.btn-danger { color: var(--danger); }
.icon-btn {
    width: 44px; height: 44px; border: 0; border-radius: var(--radius-sm);
    background: var(--surface); box-shadow: var(--shadow);
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.theme-kid .btn-primary { box-shadow: 0 4px 0 var(--primary-shade); }

/* ---- Formulare ------------------------------------------------------------------------------------ */

.form { display: flex; flex-direction: column; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 14px; font-weight: 700; }
.input {
    height: 52px;
    padding: 0 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface);
    font-size: 16px; /* 16px verhindert das automatische Hineinzoomen auf dem iPhone */
}
.input:focus { outline: 2px solid var(--primary); outline-offset: 1px; }

/* FocusOnNavigate (Routes.razor) setzt nach jedem Seitenwechsel den Fokus auf die Überschrift, damit Screenreader
   die neue Seite ansagen. Den Fokusrahmen dort nicht zeichnen – sonst wirkt die Titelzeile "markiert". */
h1:focus, h1:focus-visible { outline: none; }
.input.code { font-size: 28px; letter-spacing: 0.2em; text-align: center; font-weight: 800; height: 64px; }
.field-error { color: var(--danger); font-size: 13px; font-weight: 600; }
.alert { padding: 12px 14px; border-radius: var(--radius-sm); background: var(--danger-bg); color: var(--danger); font-weight: 600; font-size: 14px; }
.hint { padding: 12px 14px; border-radius: var(--radius-sm); background: var(--quest-bg); color: var(--quest-ink); font-size: 14px; font-weight: 600; }
.check { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; }
.check input { width: 22px; height: 22px; margin-top: 2px; flex-shrink: 0; }

.code-display {
    font-size: 40px; font-weight: 800; letter-spacing: 0.12em;
    text-align: center; padding: 18px; border-radius: var(--radius);
    background: var(--surface); box-shadow: var(--shadow);
    font-variant-numeric: tabular-nums;
}

/* ---- Start- und Anmeldeseiten --------------------------------------------------------------------- */

.hero { display: flex; flex-direction: column; gap: 10px; padding-top: 24px; }
.hero .logo {
    width: 64px; height: 64px; border-radius: 20px;
    background: var(--primary); color: #FFFFFF;
    display: flex; align-items: center; justify-content: center;
    font-size: 30px; font-weight: 800;
}
.hero h1 { font-size: 34px; font-weight: 800; letter-spacing: -0.02em; }

.choice {
    display: flex; align-items: center; gap: 14px;
    padding: 18px; border-radius: var(--radius);
    background: var(--surface); box-shadow: var(--shadow);
}
.choice .grow { flex: 1; display: flex; flex-direction: column; gap: 2px; }

/* ---- Navigation unten ----------------------------------------------------------------------------- */

.bottom-nav {
    position: sticky; bottom: 0;
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
    padding: 8px 8px calc(10px + env(safe-area-inset-bottom));
    background: var(--surface);
    border-top: 1px solid var(--line);
}
.bottom-nav a {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 6px 0; font-size: 12px; font-weight: 600; color: var(--muted);
}
.bottom-nav a.active { color: var(--ink); font-weight: 800; }
.theme-kid .bottom-nav { border-radius: 28px 28px 0 0; border-top: 0; box-shadow: 0 -2px 0 var(--line); }
.theme-kid .bottom-nav a { font-size: 14px; }
.theme-kid .bottom-nav a.active { color: var(--primary); }

/* ---- Kinder-Dashboard ----------------------------------------------------------------------------- */

.kid-hero {
    margin: calc(-24px - env(safe-area-inset-top)) -20px 0;
    padding: calc(28px + env(safe-area-inset-top)) 20px 24px;
    background: var(--primary); color: #FFFFFF;
    border-radius: 0 0 36px 36px;
    display: flex; flex-direction: column; gap: 16px;
}
.kid-hero h1 { font-size: 32px; font-weight: 800; }
.kid-hero .eyebrow { color: var(--hero-soft); }
.coin-card {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px; border-radius: 22px;
    background: #FFFFFF; color: var(--ink); box-shadow: 0 4px 0 var(--primary-shade);
}
.coin { width: 36px; height: 36px; border-radius: 50%; background: var(--coin); border: 3px solid #B07A00; flex-shrink: 0; }

/* "Fakt des Tages" (Kinder-Dashboard): Karte mit Glühbirne, Kategorie als kleines Etikett. Nutzt nur die
   Theme-Tokens (--primary, --hero-soft), passt sich also jedem Kinderthema an. */
.fact-card { flex-direction: row; align-items: flex-start; gap: 14px; }
.fact-icon {
    width: 44px; height: 44px; border-radius: 16px; flex-shrink: 0;
    display: grid; place-items: center;
    background: var(--coin); color: var(--coin-ink);
}
.fact-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.fact-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fact-head strong { font-size: 15px; color: var(--primary); }
.fact-tag {
    font-size: 12px; font-weight: 700; padding: 2px 10px; border-radius: 999px;
    background: var(--hero-soft, var(--line)); color: var(--ink);
}
.fact-text { font-size: 17px; line-height: 1.4; overflow-wrap: anywhere; }

/* Serien "Tage in Folge" (StreakBadge): Lernen und Quests. Flamme in Orange, sonst nur Theme-Tokens.
   .streak-pill = kompakt im farbigen Kopf des Kinder-Dashboards, .streak-card = Karte auf "Lernen"/"Quests",
   .streak-subtle = Eltern: klein und grau, nur als Info. "done" = heute schon geschafft (Flamme leuchtet). */
.streak-row { display: flex; gap: 10px; flex-wrap: wrap; }
.streak-pill {
    flex: 1 1 140px; display: flex; align-items: center; gap: 8px;
    padding: 8px 12px; border-radius: 999px;
    background: rgba(255, 255, 255, 0.16); color: #FFFFFF; font-size: 14px;
}
.streak-pill strong { font-size: 20px; line-height: 1; }
.streak-flame { display: grid; place-items: center; color: #FDBA74; }
.streak-pill.done .streak-flame, .streak-card.done .streak-flame { color: #F97316; }
.streak-pill.done .streak-flame { color: #FFD43B; }
.streak-card { flex-direction: row; align-items: center; gap: 14px; }
.streak-flame.big { width: 44px; height: 44px; border-radius: 16px; flex-shrink: 0; background: #FFF4E6; color: #FDBA74; }
.streak-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.streak-subtle { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; color: var(--muted); white-space: nowrap; }
.streak-subtle .icon, .streak-subtle svg { color: #F59F00; opacity: 0.8; }

/* Lade- und Leerzustände */
.loading { padding: 24px; text-align: center; color: var(--muted); }
.empty { padding: 18px; border-radius: var(--radius); background: var(--surface); color: var(--muted); text-align: center; font-size: 14px; }

/* Fehleranzeige von Blazor (unerwarteter Fehler) */
#blazor-error-ui {
    display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 1000;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: #FFF4D1; color: #6B4A00; font-weight: 600;
}
#blazor-error-ui .reload { text-decoration: underline; margin-left: 8px; }
#blazor-error-ui .dismiss { float: right; cursor: pointer; }

/* ---- Auswahl-Chips (z. B. Kind wählen, Wochentag) ------------------------------------------------- */

.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
    min-height: 44px; padding: 0 16px;
    border: 1px solid var(--line); border-radius: 999px;
    background: var(--surface); color: var(--ink);
    font-weight: 600; font-size: 14px; cursor: pointer;
}
.chip.active { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); font-weight: 700; }
.chip.small { min-height: 40px; min-width: 44px; padding: 0 10px; }

/* ---- Taschengeld ---------------------------------------------------------------------------------- */

.balance { font-size: 40px; font-weight: 800; letter-spacing: -0.03em; }
.balance.negative { color: #FF9C8F; }
.plus { color: var(--success); font-weight: 700; white-space: nowrap; }
.minus { color: var(--ink); font-weight: 700; white-space: nowrap; }
.btn-income { background: #F6A04D; color: #1B1E2B; }
.btn-expense { background: #2E3245; color: #FFFFFF; }
.order { background: var(--money-bg); }
.order .tile-icon { color: var(--money-fg); }
.row-actions { display: flex; gap: 8px; }
.link-btn { border: 0; background: none; padding: 4px 0; color: var(--muted); font-size: 13px; font-weight: 700; cursor: pointer; text-decoration: underline; }
.warning { padding: 12px 14px; border-radius: var(--radius-sm); background: #FFF4D1; color: #6B4A00; font-weight: 600; font-size: 14px; }

/* ---- Shop ----------------------------------------------------------------------------------------- */

.price { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--coin-ink); }
.price::before { content: ""; width: 16px; height: 16px; border-radius: 50%; background: var(--coin); border: 2px solid #B07A00; }
.progress { height: 10px; border-radius: 999px; background: var(--line); overflow: hidden; }
.progress > span { display: block; height: 100%; border-radius: 999px; background: var(--coin); }
.btn-coin { background: var(--primary); color: var(--primary-ink); }

/* ---- Vokabeltrainer ------------------------------------------------------------------------------- */

.progress.vocab > span { background: var(--vocab-fg); }
.progress-label { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); font-weight: 600; }
.textarea { min-height: 140px; padding: 12px 16px; resize: vertical; font-family: inherit; line-height: 1.5; }
.learn-card {
    display: flex; flex-direction: column; align-items: center; gap: 14px;
    padding: 28px 20px; border-radius: 30px; background: var(--surface);
    box-shadow: 0 10px 30px rgba(36, 86, 201, 0.10); text-align: center;
}
.learn-card .lang { font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.learn-card .prompt { font-size: 32px; font-weight: 800; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.option {
    width: 100%; min-height: 56px; padding: 0 16px;
    border: 2px solid var(--line); border-radius: 18px;
    background: var(--surface); color: var(--ink);
    font: inherit; font-size: 18px; font-weight: 700; cursor: pointer;
}
.option.correct { border-color: #15803D; background: #DDF5E6; color: #0E5A2B; }
.option.wrong { border-color: #B42318; background: #FDECEA; color: #8A1C12; }
.feedback { padding: 14px 16px; border-radius: 18px; font-weight: 700; text-align: center; }
.feedback.ok { background: #DDF5E6; color: #0E5A2B; }
.feedback.bad { background: #FDECEA; color: #8A1C12; }
.dots { display: flex; gap: 6px; justify-content: center; }
.dots span { width: 12px; height: 12px; border-radius: 50%; background: var(--line); }
.dots span.on { background: var(--vocab-fg); }
/* Vorlesen (Text-to-Speech): runde Lautsprecher-Knöpfe an der Vokabel und an der Rückmeldung */
.speak-btn {
    flex: none; width: 44px; height: 44px; border: 0; border-radius: 50%;
    background: var(--vocab-bg); color: var(--vocab-fg);
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.learn-card .prompt-row { display: flex; align-items: center; justify-content: center; gap: 12px; }
.feedback.speakable { display: flex; align-items: center; justify-content: center; gap: 12px; }
.feedback .speak-btn { background: rgba(255, 255, 255, 0.75); color: inherit; }

/* ---- Wunschzettel --------------------------------------------------------------------------------- */
/* Balken mit zwei Teilen: links das Gesparte (orange), rechts der feste Elternanteil (lila, gestreift).
   margin-left: auto schiebt den Elternanteil an das rechte Ende; die Lücke dazwischen ist "fehlt noch". */

.wish-balance { flex-direction: row; align-items: center; gap: 14px; background: var(--wish-bg); }
.wish-balance .tile-icon, .wish-icon { color: var(--wish-fg); background: var(--wish-bg); }
.progress.wish { display: flex; height: 14px; }
.progress.wish > span { border-radius: 0; }
.progress.wish > .saved { background: #F6A04D; }
.progress.wish > .parents { margin-left: auto; background: repeating-linear-gradient(45deg, var(--plan-fg) 0 6px, #8A66E0 6px 12px); }
.wish-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; color: var(--muted); }
.wish-legend .dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.wish-legend .dot.saved { background: #F6A04D; }
.wish-legend .dot.parents { background: var(--plan-fg); }
.success-box { padding: 12px 14px; border-radius: var(--radius-sm); background: var(--family-bg); color: var(--success); font-weight: 700; font-size: 14px; text-align: center; }