/* ==========================================================================
   MY VOICE — PERSONALISATION THEMES
   --------------------------------------------------------------------------
   window.applyYouthTheme() (js/profiles.js) adds `has-youth-theme` and
   `theme-<id>` to <body>. Visual rules only apply on the My Voice page
   (body[data-page="youth"]), so the rest of the app is never affected.

   How it works
   1. Each theme only defines CSS custom properties (palette, fonts, scene).
   2. The shared rules further down consume those properties, so every theme
      styles the same hooks: the scene behind the page, the title plaque
      (.mv-hero), the section cards (.mv-panel, .yc-card, .my-progress), inner
      cards (.mv-stmt, .mv-inner), headings and writing boxes.
   3. Scene artwork lives in /img/youth-themes/*.svg (tiles + repeat-x strips).
   4. Dark mode keeps the scene (dimmed) and switches cards to dark glass with
      theme-coloured borders, so Tailwind `dark:` text colours stay readable.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. THEME TOKENS
   Defined on the body class (live page) and on the picker tiles
   (.yt-tile[data-theme]) so each tile can preview its own theme.
   -------------------------------------------------------------------------- */
body.has-youth-theme,
.yt-tile {
    --yt-ground-h: clamp(150px, 30vh, 300px);
    --yt-font-title: inherit;
    --yt-title-weight: 900;
    --yt-font-head: inherit;
    --yt-head-weight: 800;
    --yt-title-ls: 0;
    --yt-title-shadow: none;
    --yt-head-shadow: none;
    --yt-radius-sm: 1.25rem;
    --yt-card-art: none;
    --yt-card-art-pos: right -16px bottom -16px;
    --yt-card-art-size: 130px;
    --yt-card-art-repeat: no-repeat;
    --yt-plaque-image: none;
    --yt-field-style: dashed;
    --yt-sticker: none;
}

/* ---------- Standard (picker tile only) ---------- */
.yt-tile[data-theme="default"] {
    --yt-preview:
        radial-gradient(circle at 78% 26%, rgba(255, 255, 255, 0.9) 0 14px, transparent 15px),
        linear-gradient(135deg, #bfeae5 0%, #dbf5f1 28%, #faf6f0 52%, #ffe6d3 78%, #fec59c 100%);
}

/* ---------- Block Builder ---------- */
body.theme-minecraft,
.yt-tile[data-theme="minecraft"] {
    --yt-bg-color: #a9dcfb;
    --yt-sky: linear-gradient(180deg, #6fb7f0 0 20%, #7cc0f3 20% 40%, #8ccaf6 40% 60%, #9cd3f9 60% 80%, #a9dcfb 80%);
    --yt-bg-image: url('../img/youth-themes/minecraft-ground.svg'), url('../img/youth-themes/minecraft-feature.svg'), url('../img/youth-themes/minecraft-sky.svg'), var(--yt-sky);
    --yt-bg-size: auto var(--yt-ground-h), 96px 96px, 640px 360px, 100% 100%;
    --yt-bg-pos: center bottom, right 7% top 84px, center top 30px, 0 0;
    --yt-bg-repeat: repeat-x, no-repeat, repeat, no-repeat;
    --yt-preview: url('../img/youth-themes/minecraft-ground.svg') center bottom / auto 62% repeat-x, url('../img/youth-themes/minecraft-feature.svg') right 12px top 10px / 30px no-repeat, url('../img/youth-themes/minecraft-sky.svg') center top / 320px 180px repeat, var(--yt-sky);
    --yt-sticker: url('../img/youth-themes/minecraft-sticker.svg');

    --yt-font-title: 'Pixelify Sans', 'Courier New', monospace;
    --yt-title-weight: 700;
    --yt-font-head: 'Pixelify Sans', 'Courier New', monospace;
    --yt-head-weight: 700;
    --yt-title-ink: #ffffff;
    --yt-title-shadow: 3px 3px 0 #3b2611;
    --yt-heading-ink: #2f6b1e;
    --yt-head-shadow: 2px 2px 0 #d3ecc3;
    --yt-accent: #5aa832;
    --yt-accent-dark: #3f7f22;
    --yt-accent-ink: #2f6b1e;
    --yt-accent-light: #8fdc5f;
    --yt-rule: #7a7a7a;

    --yt-card-bg: #f1f1f1;
    --yt-card-border: 4px solid #2b2b2b;
    --yt-radius: 0px;
    --yt-radius-sm: 0px;
    --yt-card-shadow: inset 4px 4px 0 #ffffff, inset -4px -4px 0 #a3a3a3, 6px 6px 0 rgba(0, 0, 0, 0.35);
    --yt-plaque-bg: #b98d55;
    --yt-plaque-image: repeating-linear-gradient(180deg, #c39a62 0 22px, #8e6838 22px 25px, #b98d55 25px 47px, #8e6838 47px 50px);
    --yt-plaque-border: 4px solid #3b2611;
    --yt-plaque-sub: #fff7e6;
    --yt-inner-bg: #ffffff;
    --yt-inner-border: 3px solid #6b6b6b;
    --yt-field-bg: #ffffff;
    --yt-field-border: #555555;
    --yt-field-style: solid;
    --yt-field-ink: #1f2937;
    --yt-field-radius: 0px;
}

/* ---------- Animal Friends ---------- */
body.theme-pets,
.yt-tile[data-theme="pets"] {
    --yt-bg-color: #f59e0b;
    --yt-sky: linear-gradient(135deg, #fcd34d 0%, #f59e0b 100%);
    --yt-bg-image: url('../img/youth-themes/pets-sky.svg'), var(--yt-sky);
    --yt-bg-size: 80px 80px, 100% 100%;
    --yt-bg-pos: 0 0, 0 0;
    --yt-bg-repeat: repeat, no-repeat;
    --yt-preview: url('../img/youth-themes/pets-sky.svg') 0 0 / 40px 40px repeat, var(--yt-sky);
    --yt-sticker: url('../img/youth-themes/pets-sticker.svg');

    --yt-font-title: 'Fredoka', 'Nunito', sans-serif;
    --yt-title-weight: 700;
    --yt-font-head: 'Fredoka', 'Nunito', sans-serif;
    --yt-head-weight: 600;
    --yt-title-ink: #b45309;
    --yt-title-shadow: 0 3px 0 #fde7c4;
    --yt-heading-ink: #b45f17;
    --yt-accent: #f08c2e;
    --yt-accent-dark: #d0701a;
    --yt-accent-ink: #a0521b;
    --yt-accent-light: #fdba74;
    --yt-rule: #fbd9a8;

    --yt-card-bg: #fffdf8;
    --yt-card-border: 3px solid #f6c77d;
    --yt-radius: 1.75rem;
    --yt-card-shadow: 0 8px 0 -1px #f3d6a6, 0 18px 30px -18px rgba(180, 83, 9, 0.45);
    --yt-card-art: url('../img/youth-themes/pets-card.svg');
    --yt-plaque-bg: #fff7ea;
    --yt-plaque-border: 3px dashed #e8a14f;
    --yt-plaque-sub: #9a6a3a;
    --yt-inner-bg: #fffaf0;
    --yt-inner-border: 2px solid #fbe0b8;
    --yt-field-bg: #fff8ec;
    --yt-field-border: #f2b46b;
    --yt-field-ink: #7c3f12;
    --yt-field-radius: 1.25rem;
}

/* ---------- Flower Power ---------- */
body.theme-flowers,
.yt-tile[data-theme="flowers"] {
    --yt-bg-color: #fdf2f8;
    --yt-sky: linear-gradient(180deg, #ffe4f1 0%, #fdf2f8 50%, #eafbe0 100%);
    --yt-bg-image: url('../img/youth-themes/flowers-ground.svg'), url('../img/youth-themes/flowers-sky.svg'), var(--yt-sky);
    --yt-bg-size: auto var(--yt-ground-h), 420px 420px, 100% 100%;
    --yt-bg-pos: center bottom, 0 0, 0 0;
    --yt-bg-repeat: repeat-x, repeat, no-repeat;
    --yt-preview: url('../img/youth-themes/flowers-ground.svg') center bottom / auto 72% repeat-x, url('../img/youth-themes/flowers-sky.svg') 0 0 / 210px 210px repeat, var(--yt-sky);
    --yt-sticker: url('../img/youth-themes/flowers-sticker.svg');

    --yt-font-title: 'Pacifico', 'Brush Script MT', cursive;
    --yt-title-weight: 400;
    --yt-title-ls: 0.01em;
    --yt-font-head: 'Quicksand', 'Nunito', sans-serif;
    --yt-head-weight: 700;
    --yt-title-ink: #db2777;
    --yt-title-shadow: 0 2px 0 #ffffff, 0 4px 0 #fbcfe8;
    --yt-heading-ink: #be185d;
    --yt-accent: #ec4899;
    --yt-accent-dark: #db2777;
    --yt-accent-ink: #be185d;
    --yt-accent-light: #f9a8d4;
    --yt-rule: #fbcfe8;

    --yt-card-bg: #fffafd;
    --yt-card-border: 3px solid #f9a8d4;
    --yt-radius: 2rem 0.75rem 2rem 0.75rem;
    --yt-radius-sm: 1.5rem 0.5rem 1.5rem 0.5rem;
    --yt-card-shadow: 0 0 0 6px rgba(252, 231, 243, 0.85), 0 16px 32px -16px rgba(219, 39, 119, 0.45);
    --yt-card-art: url('../img/youth-themes/flowers-card.svg');
    --yt-card-art-pos: right -12px top -12px;
    --yt-plaque-bg: #ffffff;
    --yt-plaque-border: 3px solid #f472b6;
    --yt-plaque-sub: #9d4b73;
    --yt-inner-bg: #ffffff;
    --yt-inner-border: 2px solid #fbcfe8;
    --yt-field-bg: #fff5fa;
    --yt-field-border: #f9a8d4;
    --yt-field-ink: #831843;
    --yt-field-radius: 1.25rem;
}

/* ---------- Comic Hero ---------- */
body.theme-hero,
.yt-tile[data-theme="hero"] {
    --yt-bg-color: #ffd23f;
    --yt-sky:
        radial-gradient(circle, rgba(230, 57, 70, 0.26) 2.5px, transparent 3px) 0 0 / 16px 16px,
        repeating-conic-gradient(from 0deg at 50% 38%, rgba(255, 255, 255, 0.3) 0deg 5deg, transparent 5deg 12deg),
        radial-gradient(ellipse at 50% 38%, #fff3b0 0%, #ffd23f 58%, #ffb703 100%);
    --yt-bg-image: url('../img/youth-themes/hero-ground.svg'), url('../img/youth-themes/hero-sky.svg'),
        radial-gradient(circle, rgba(230, 57, 70, 0.26) 2.5px, transparent 3px),
        repeating-conic-gradient(from 0deg at 50% 38%, rgba(255, 255, 255, 0.3) 0deg 5deg, transparent 5deg 12deg),
        radial-gradient(ellipse at 50% 38%, #fff3b0 0%, #ffd23f 58%, #ffb703 100%);
    --yt-bg-size: auto var(--yt-ground-h), 900px 700px, 16px 16px, 100% 100%, 100% 100%;
    --yt-bg-pos: center bottom, center top, 0 0, 0 0, 0 0;
    --yt-bg-repeat: repeat-x, repeat, repeat, no-repeat, no-repeat;
    --yt-preview: url('../img/youth-themes/hero-ground.svg') center bottom / auto 66% repeat-x, url('../img/youth-themes/hero-sky.svg') center top / 450px 350px repeat, var(--yt-sky);
    --yt-sticker: url('../img/youth-themes/hero-sticker.svg');

    --yt-font-title: 'Bangers', Impact, 'Arial Black', sans-serif;
    --yt-title-weight: 400;
    --yt-title-ls: 0.05em;
    --yt-font-head: 'Bangers', Impact, 'Arial Black', sans-serif;
    --yt-head-weight: 400;
    --yt-title-ink: #e63946;
    --yt-title-shadow: 3px 3px 0 #111111, -1px -1px 0 #111111, 1px -1px 0 #111111, -1px 1px 0 #111111;
    --yt-heading-ink: #e63946;
    --yt-head-shadow: 2px 2px 0 #111111;
    --yt-accent: #e63946;
    --yt-accent-dark: #b81d2a;
    --yt-accent-ink: #1d3557;
    --yt-accent-light: #ff8fa3;
    --yt-rule: #111111;

    --yt-card-bg: #ffffff;
    --yt-card-border: 4px solid #111111;
    --yt-radius: 0.4rem;
    --yt-radius-sm: 0.4rem;
    --yt-card-shadow: 8px 8px 0 #111111;
    --yt-plaque-bg: #fff3a3;
    --yt-plaque-border: 4px solid #111111;
    --yt-plaque-sub: #1d3557;
    --yt-inner-bg: #ffffff;
    --yt-inner-border: 3px solid #111111;
    --yt-field-bg: #ffffff;
    --yt-field-border: #111111;
    --yt-field-style: solid;
    --yt-field-ink: #111111;
    --yt-field-radius: 1.25rem;
}

/* ---------- Beach Day ---------- */
body.theme-beach,
.yt-tile[data-theme="beach"] {
    --yt-bg-color: #bfe8fb;
    --yt-sky: linear-gradient(180deg, #6cc6f5 0%, #9ad8f8 40%, #bfe8fb 70%, #fff1c9 100%);
    --yt-bg-image: url('../img/youth-themes/beach-ground.svg'), url('../img/youth-themes/beach-feature.svg'), url('../img/youth-themes/beach-sky.svg'), var(--yt-sky);
    --yt-bg-size: auto var(--yt-ground-h), 150px 150px, 700px 420px, 100% 100%;
    --yt-bg-pos: center bottom, right 6% top 76px, center top 40px, 0 0;
    --yt-bg-repeat: repeat-x, no-repeat, repeat, no-repeat;
    --yt-preview: url('../img/youth-themes/beach-ground.svg') center bottom / auto 74% repeat-x, url('../img/youth-themes/beach-feature.svg') right 8px top 6px / 46px no-repeat, url('../img/youth-themes/beach-sky.svg') center top / 350px 210px repeat, var(--yt-sky);
    --yt-sticker: url('../img/youth-themes/beach-sticker.svg');

    --yt-font-title: 'Lilita One', 'Arial Rounded MT Bold', sans-serif;
    --yt-title-weight: 400;
    --yt-title-ls: 0.01em;
    --yt-font-head: 'Lilita One', 'Arial Rounded MT Bold', sans-serif;
    --yt-head-weight: 400;
    --yt-title-ink: #0369a1;
    --yt-title-shadow: 0 3px 0 #fde68a;
    --yt-heading-ink: #0369a1;
    --yt-accent: #0ea5e9;
    --yt-accent-dark: #0284c7;
    --yt-accent-ink: #075985;
    --yt-accent-light: #7dd3fc;
    --yt-rule: #bae6fd;

    --yt-card-bg: #fffdf6;
    --yt-card-border: 3px solid #7dd3fc;
    --yt-radius: 1.75rem;
    --yt-card-shadow: 0 10px 0 -2px #fde68a, 0 18px 34px -18px rgba(2, 132, 199, 0.45);
    --yt-card-art: url('../img/youth-themes/beach-card.svg');
    --yt-card-art-pos: left bottom 10px;
    --yt-card-art-size: 240px 24px;
    --yt-card-art-repeat: repeat-x;
    --yt-plaque-bg: #fff7dd;
    --yt-plaque-border: 3px solid #fbbf24;
    --yt-plaque-sub: #8a5a14;
    --yt-inner-bg: #ffffff;
    --yt-inner-border: 2px solid #bae6fd;
    --yt-field-bg: #f0f9ff;
    --yt-field-border: #7dd3fc;
    --yt-field-ink: #0c4a6e;
    --yt-field-radius: 1.25rem;
}

/* ---------- Football Pitch ---------- */
body.theme-football,
.yt-tile[data-theme="football"] {
    --yt-bg-color: #3fa34d;
    --yt-sky: repeating-linear-gradient(180deg, #3fa34d 0 90px, #37954a 90px 180px);
    --yt-bg-image: url('../img/youth-themes/football-ground.svg'), url('../img/youth-themes/football-stands.svg'),
        radial-gradient(circle at 50% 58%, transparent 118px, rgba(255, 255, 255, 0.55) 119px 123px, transparent 124px),
        linear-gradient(90deg, transparent calc(50% - 2px), rgba(255, 255, 255, 0.55) calc(50% - 2px) calc(50% + 2px), transparent calc(50% + 2px)),
        var(--yt-sky);
    --yt-bg-size: auto var(--yt-ground-h), auto 150px, 100% 100%, 100% 100%, 100% 100%;
    --yt-bg-pos: center bottom, center top 56px, 0 0, 0 0, 0 0;
    --yt-bg-repeat: repeat-x, repeat-x, no-repeat, no-repeat, no-repeat;
    --yt-preview: url('../img/youth-themes/football-ground.svg') center bottom / auto 62% repeat-x, url('../img/youth-themes/football-stands.svg') center top / auto 42% repeat-x, repeating-linear-gradient(180deg, #3fa34d 0 22px, #37954a 22px 44px);
    --yt-sticker: url('../img/youth-themes/football-sticker.svg');

    --yt-font-title: 'Russo One', 'Arial Black', sans-serif;
    --yt-title-weight: 400;
    --yt-title-ls: 0.02em;
    --yt-font-head: 'Russo One', 'Arial Black', sans-serif;
    --yt-head-weight: 400;
    --yt-title-ink: #facc15;
    --yt-title-shadow: 0 0 12px rgba(250, 204, 21, 0.45);
    --yt-heading-ink: #166534;
    --yt-accent: #16a34a;
    --yt-accent-dark: #15803d;
    --yt-accent-ink: #14532d;
    --yt-accent-light: #86efac;
    --yt-rule: #bbf7d0;

    --yt-card-bg: #ffffff;
    --yt-card-border: 3px solid #14532d;
    --yt-radius: 1rem;
    --yt-radius-sm: 0.85rem;
    --yt-card-shadow: 0 8px 0 #0f3d22, 0 20px 30px -18px rgba(0, 0, 0, 0.45);
    --yt-plaque-bg: #0f172a;
    --yt-plaque-image: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
    --yt-plaque-border: 4px solid #334155;
    --yt-plaque-sub: #cbd5e1;
    --yt-inner-bg: #f7fdf8;
    --yt-inner-border: 2px solid #bbf7d0;
    --yt-field-bg: #f0fdf4;
    --yt-field-border: #4ade80;
    --yt-field-ink: #14532d;
    --yt-field-radius: 1rem;
}

/* ---------- Space Mission ---------- */
body.theme-space,
.yt-tile[data-theme="space"] {
    --yt-bg-color: #1d1757;
    --yt-sky:
        radial-gradient(ellipse at 20% 15%, rgba(236, 72, 153, 0.25), transparent 50%),
        radial-gradient(ellipse at 85% 45%, rgba(56, 189, 248, 0.18), transparent 50%),
        linear-gradient(180deg, #0b1026 0%, #1d1757 55%, #3b1f66 100%);
    --yt-bg-image: url('../img/youth-themes/space-ground.svg'), url('../img/youth-themes/space-feature.svg'), url('../img/youth-themes/space-sky.svg'),
        radial-gradient(ellipse at 20% 15%, rgba(236, 72, 153, 0.25), transparent 50%),
        radial-gradient(ellipse at 85% 45%, rgba(56, 189, 248, 0.18), transparent 50%),
        linear-gradient(180deg, #0b1026 0%, #1d1757 55%, #3b1f66 100%);
    --yt-bg-size: auto var(--yt-ground-h), clamp(170px, 28vmin, 300px) auto, 500px 500px, 100% 100%, 100% 100%, 100% 100%;
    --yt-bg-pos: center bottom, right 4% top 84px, 0 0, 0 0, 0 0, 0 0;
    --yt-bg-repeat: repeat-x, no-repeat, repeat, no-repeat, no-repeat, no-repeat;
    --yt-preview: url('../img/youth-themes/space-ground.svg') center bottom / auto 58% repeat-x, url('../img/youth-themes/space-feature.svg') right 4px top 4px / 64px no-repeat, url('../img/youth-themes/space-sky.svg') 0 0 / 250px 250px repeat, var(--yt-sky);
    --yt-sticker: url('../img/youth-themes/space-sticker.svg');

    --yt-font-title: 'Orbitron', 'Segoe UI', sans-serif;
    --yt-title-weight: 900;
    --yt-title-ls: 0.04em;
    --yt-font-head: 'Orbitron', 'Segoe UI', sans-serif;
    --yt-head-weight: 700;
    --yt-title-ink: #e0e7ff;
    --yt-title-shadow: 0 0 14px rgba(129, 140, 248, 0.9), 0 0 2px #ffffff;
    --yt-heading-ink: #4338ca;
    --yt-accent: #7c3aed;
    --yt-accent-dark: #6d28d9;
    --yt-accent-ink: #4c1d95;
    --yt-accent-light: #c4b5fd;
    --yt-rule: #c7d2fe;

    --yt-card-bg: #f8f9ff;
    --yt-card-border: 3px solid #a5b4fc;
    --yt-radius: 1.25rem;
    --yt-radius-sm: 1rem;
    --yt-card-shadow: 0 0 0 5px rgba(129, 140, 248, 0.22), 0 20px 40px -20px rgba(0, 0, 0, 0.7);
    --yt-plaque-bg: rgba(15, 23, 42, 0.9);
    --yt-plaque-border: 3px solid #a78bfa;
    --yt-plaque-sub: #c7d2fe;
    --yt-inner-bg: #ffffff;
    --yt-inner-border: 2px solid #e0e7ff;
    --yt-field-bg: #f5f3ff;
    --yt-field-border: #a5b4fc;
    --yt-field-ink: #312e81;
    --yt-field-radius: 1rem;
}

/* ---------- Dino Land ---------- */
body.theme-dino,
.yt-tile[data-theme="dino"] {
    --yt-bg-color: #f9e7b5;
    --yt-sky: linear-gradient(180deg, #bfe9e0 0%, #dcefd0 50%, #f9e7b5 100%);
    --yt-bg-image: url('../img/youth-themes/dino-ground.svg'), url('../img/youth-themes/dino-sky.svg'), var(--yt-sky);
    --yt-bg-size: auto var(--yt-ground-h), 800px 420px, 100% 100%;
    --yt-bg-pos: center bottom, center top 30px, 0 0;
    --yt-bg-repeat: repeat-x, repeat, no-repeat;
    --yt-preview: url('../img/youth-themes/dino-ground.svg') center bottom / auto 76% repeat-x, url('../img/youth-themes/dino-sky.svg') center top / 400px 210px repeat, var(--yt-sky);
    --yt-sticker: url('../img/youth-themes/dino-sticker.svg');

    --yt-font-title: 'Luckiest Guy', 'Arial Black', sans-serif;
    --yt-title-weight: 400;
    --yt-title-ls: 0.03em;
    --yt-font-head: 'Luckiest Guy', 'Arial Black', sans-serif;
    --yt-head-weight: 400;
    --yt-title-ink: #4d7c0f;
    --yt-title-shadow: 0 3px 0 #fef08a, 0 5px 0 rgba(0, 0, 0, 0.12);
    --yt-heading-ink: #4d7c0f;
    --yt-accent: #65a30d;
    --yt-accent-dark: #4d7c0f;
    --yt-accent-ink: #3f6212;
    --yt-accent-light: #bef264;
    --yt-rule: #d9f99d;

    --yt-card-bg: #fffbeb;
    --yt-card-border: 3px solid #84cc16;
    --yt-radius: 1.6rem 1.1rem 1.8rem 1.2rem;
    --yt-radius-sm: 1.2rem 0.9rem 1.3rem 1rem;
    --yt-card-shadow: 0 8px 0 rgba(77, 124, 15, 0.25), 0 18px 30px -18px rgba(77, 124, 15, 0.5);
    --yt-card-art: url('../img/youth-themes/dino-card.svg');
    --yt-plaque-bg: #ece6d8;
    --yt-plaque-image: radial-gradient(circle at 30% 40%, rgba(120, 113, 108, 0.16) 0 2px, transparent 3px), radial-gradient(circle at 70% 70%, rgba(120, 113, 108, 0.12) 0 3px, transparent 4px);
    --yt-plaque-border: 4px solid #a8a29e;
    --yt-plaque-sub: #57534e;
    --yt-inner-bg: #ffffff;
    --yt-inner-border: 2px solid #d9f99d;
    --yt-field-bg: #f7fee7;
    --yt-field-border: #a3e635;
    --yt-field-ink: #365314;
    --yt-field-radius: 1.1rem;
}

/* ---------- Sweet Treats ---------- */
body.theme-candy,
.yt-tile[data-theme="candy"] {
    --yt-bg-color: #fff5f9;
    --yt-sky: repeating-linear-gradient(135deg, #ffe4ef 0 34px, #fff5f9 34px 68px);
    --yt-bg-image: url('../img/youth-themes/candy-drip.svg'), url('../img/youth-themes/candy-ground.svg'), url('../img/youth-themes/candy-sky.svg'), var(--yt-sky);
    --yt-bg-size: auto 80px, auto var(--yt-ground-h), 300px 300px, 100% 100%;
    --yt-bg-pos: center top 58px, center bottom, 0 0, 0 0;
    --yt-bg-repeat: repeat-x, repeat-x, repeat, no-repeat;
    --yt-preview: url('../img/youth-themes/candy-drip.svg') center top / auto 26% repeat-x, url('../img/youth-themes/candy-ground.svg') center bottom / auto 66% repeat-x, url('../img/youth-themes/candy-sky.svg') 0 0 / 150px 150px repeat, repeating-linear-gradient(135deg, #ffe4ef 0 12px, #fff5f9 12px 24px);
    --yt-sticker: url('../img/youth-themes/candy-sticker.svg');

    --yt-font-title: 'Sniglet', 'Arial Rounded MT Bold', sans-serif;
    --yt-title-weight: 800;
    --yt-font-head: 'Sniglet', 'Arial Rounded MT Bold', sans-serif;
    --yt-head-weight: 800;
    --yt-title-ink: #db2777;
    --yt-title-shadow: 0 3px 0 #ffffff, 0 5px 0 #a7f3d0;
    --yt-heading-ink: #db2777;
    --yt-accent: #f472b6;
    --yt-accent-dark: #db2777;
    --yt-accent-ink: #9d174d;
    --yt-accent-light: #f9a8d4;
    --yt-rule: #fbcfe8;

    --yt-card-bg: #ffffff;
    --yt-card-border: 3px solid #f9a8d4;
    --yt-radius: 1.75rem;
    --yt-card-shadow: 0 8px 0 #fbcfe8, 0 18px 30px -18px rgba(219, 39, 119, 0.4);
    --yt-plaque-bg: #ecfdf5;
    --yt-plaque-border: 3px solid #6ee7b7;
    --yt-plaque-sub: #047857;
    --yt-inner-bg: #fffafc;
    --yt-inner-border: 2px solid #fbcfe8;
    --yt-field-bg: #fff0f7;
    --yt-field-border: #f9a8d4;
    --yt-field-ink: #831843;
    --yt-field-radius: 1.25rem;
}

/* --------------------------------------------------------------------------
   2. SCENE — Scoped strictly to #content (the child's main page container).
   Themes NEVER touch <body>, sidebars, headers, modals, or pop-ups.
   -------------------------------------------------------------------------- */
body[data-page="youth"].has-youth-theme #content {
    position: relative;
    isolation: isolate;
    background-color: var(--yt-bg-color) !important;
    border: var(--yt-card-border, 1px solid rgba(0, 0, 0, 0.08)) !important;
    border-radius: var(--yt-radius, 1.75rem) !important;
    box-shadow: var(--yt-card-shadow, 0 10px 30px -10px rgba(0, 0, 0, 0.15)) !important;
    overflow: hidden;
    padding-top: 2.25rem !important;
    padding-bottom: clamp(65px, 14vh, 130px) !important;
}

/* Background scene layer inside #content */
body[data-page="youth"].has-youth-theme #content::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background-color: var(--yt-bg-color);
    background-image: var(--yt-bg-image);
    background-size: var(--yt-bg-size);
    background-position: var(--yt-bg-pos);
    background-repeat: var(--yt-bg-repeat);
}

/* Dark mode: dimming layer inside #content */
html.dark body[data-page="youth"].has-youth-theme #content::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(2, 6, 23, 0.55) 0%, rgba(2, 6, 23, 0.7) 100%);
}

/* --------------------------------------------------------------------------
   3. CARDS — light mode (strictly inside #content)
   -------------------------------------------------------------------------- */
html:not(.dark) body[data-page="youth"].has-youth-theme #content :is(.mv-panel, .mv-banner, .yc-card, .my-progress) {
    background-color: var(--yt-card-bg) !important;
    background-image: var(--yt-card-art) !important;
    background-position: var(--yt-card-art-pos) !important;
    background-size: var(--yt-card-art-size) !important;
    background-repeat: var(--yt-card-art-repeat) !important;
    border: var(--yt-card-border) !important;
    border-radius: var(--yt-radius) !important;
    box-shadow: var(--yt-card-shadow) !important;
}
html:not(.dark) body[data-page="youth"].has-youth-theme #content .mv-banner {
    background-image: none !important;
}
/* Inner cards (statements, home feedback items, star moments) */
html:not(.dark) body[data-page="youth"].has-youth-theme #content :is(.mv-stmt, .mv-inner) {
    background-color: var(--yt-inner-bg) !important;
    background-image: none !important;
    border: var(--yt-inner-border) !important;
    border-radius: var(--yt-radius-sm) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
body[data-page="youth"].has-youth-theme #content .yc-blob { display: none; }

/* ---------- Title plaque ---------- */
body[data-page="youth"].has-youth-theme #content .mv-hero {
    position: relative;
    padding: 1.25rem 1.25rem 1.1rem;
    margin-bottom: 1.75rem;
}
@media (min-width: 768px) {
    body[data-page="youth"].has-youth-theme #content .mv-hero { padding: 1.4rem 1.75rem 1.25rem; }
}
html:not(.dark) body[data-page="youth"].has-youth-theme #content .mv-hero {
    background-color: var(--yt-plaque-bg, var(--yt-card-bg)) !important;
    background-image: var(--yt-plaque-image) !important;
    border: var(--yt-plaque-border, var(--yt-card-border)) !important;
    border-radius: var(--yt-radius) !important;
    box-shadow: var(--yt-card-shadow) !important;
}
body[data-page="youth"].has-youth-theme #content .mv-title {
    font-family: var(--yt-font-title) !important;
    font-weight: var(--yt-title-weight) !important;
    letter-spacing: var(--yt-title-ls) !important;
    color: var(--yt-title-ink) !important;
    text-shadow: var(--yt-title-shadow);
    font-size: clamp(1.9rem, 4.6vw, 2.6rem);
    line-height: 1.15;
    padding-bottom: 0.1em;
}
html:not(.dark) body[data-page="youth"].has-youth-theme #content .mv-sub {
    color: var(--yt-plaque-sub) !important;
    font-weight: 700;
}
body[data-page="youth"].has-youth-theme #content .mv-icon {
    background: var(--yt-accent) !important;
    color: #ffffff !important;
    border-radius: var(--yt-radius-sm) !important;
    box-shadow: 0 6px 14px -6px var(--yt-accent-dark);
}
/* Mascot sticker peeking over the top-right of the plaque */
body[data-page="youth"].has-youth-theme #content .mv-hero::after {
    content: '';
    position: absolute;
    top: -28px;
    right: 14px;
    width: 60px;
    height: 60px;
    background: var(--yt-sticker) center / contain no-repeat;
    transform: rotate(8deg);
    filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.22));
    pointer-events: none;
    animation: ytBob 4.5s ease-in-out infinite;
}
@media (min-width: 768px) {
    body[data-page="youth"].has-youth-theme #content .mv-hero::after { width: 70px; height: 70px; top: -34px; right: 20px; }
}
@keyframes ytBob {
    0%, 100% { transform: translateY(0) rotate(8deg); }
    50% { transform: translateY(-5px) rotate(4deg); }
}

/* ---------- Headings ---------- */
body[data-page="youth"].has-youth-theme #content :is(h3, .yc-title, .my-progress__title) {
    font-family: var(--yt-font-head) !important;
    font-weight: var(--yt-head-weight) !important;
    letter-spacing: var(--yt-title-ls);
}
html:not(.dark) body[data-page="youth"].has-youth-theme #content :is(h3, .yc-title, .my-progress__title) {
    color: var(--yt-heading-ink) !important;
    text-shadow: var(--yt-head-shadow);
    background-image: none;
    -webkit-text-fill-color: currentColor;
}
html:not(.dark) body[data-page="youth"].has-youth-theme #content .yc-title--grad {
    background: none !important;
    color: var(--yt-heading-ink) !important;
}
html:not(.dark) body[data-page="youth"].has-youth-theme #content .mv-section-title {
    border-color: var(--yt-rule) !important;
}
html:not(.dark) body[data-page="youth"].has-youth-theme #content .yc-eyebrow { color: var(--yt-accent-ink); }

/* ---------- Accents ---------- */
body[data-page="youth"].has-youth-theme #content .mv-score { color: var(--yt-accent) !important; }
body[data-page="youth"].has-youth-theme #content .my-progress__icon {
    background: var(--yt-accent);
    border-radius: var(--yt-radius-sm);
    box-shadow: 0 8px 18px -10px var(--yt-accent-dark);
}
body[data-page="youth"].has-youth-theme #content .my-progress__cta {
    background: var(--yt-accent);
    border-radius: var(--yt-radius-sm);
    font-family: var(--yt-font-head);
    box-shadow: 0 8px 18px -10px var(--yt-accent-dark);
}
body[data-page="youth"].has-youth-theme #content .my-progress__summary:hover .my-progress__cta { background: var(--yt-accent-dark); }
html:not(.dark) body[data-page="youth"].has-youth-theme #content .my-progress__body { border-top-color: var(--yt-rule); }
html:not(.dark) body[data-page="youth"].has-youth-theme #content .mp-pill { border-color: var(--yt-rule); }

/* ---------- Writing boxes (light mode) ---------- */
html:not(.dark) body[data-page="youth"].has-youth-theme #content :is(.mv-panel, .mv-stmt, .mv-inner, .my-progress) textarea {
    background-color: var(--yt-field-bg) !important;
    border-color: var(--yt-field-border) !important;
    border-style: var(--yt-field-style) !important;
    border-radius: var(--yt-field-radius) !important;
    color: var(--yt-field-ink) !important;
}
html:not(.dark) body[data-page="youth"].has-youth-theme #content :is(.mv-panel, .mv-stmt, .mv-inner, .my-progress) textarea::placeholder {
    color: var(--yt-field-ink);
    opacity: 0.5;
}

/* ---------- Thank-you footer sits on the scene, so give it a card ---------- */
body[data-page="youth"].has-youth-theme #content .mv-footer > p {
    padding: 0.9rem 1.4rem;
}
html:not(.dark) body[data-page="youth"].has-youth-theme #content .mv-footer > p {
    background: var(--yt-card-bg);
    border: var(--yt-card-border);
    border-radius: var(--yt-radius);
    box-shadow: var(--yt-card-shadow);
    color: var(--yt-plaque-sub, #475569);
}

/* --------------------------------------------------------------------------
   4. DARK MODE — dark glass cards with theme-coloured borders (inside #content)
   -------------------------------------------------------------------------- */
html.dark body[data-page="youth"].has-youth-theme #content :is(.mv-hero, .mv-panel, .mv-banner, .yc-card, .my-progress) {
    background: rgba(15, 23, 42, 0.9) !important;
    border: 3px solid var(--yt-accent) !important;
    border-radius: var(--yt-radius) !important;
    box-shadow: 0 18px 40px -20px rgba(0, 0, 0, 0.8) !important;
}
html.dark body[data-page="youth"].has-youth-theme #content :is(.mv-stmt, .mv-inner) {
    background: rgba(30, 41, 59, 0.85) !important;
    border: 2px solid rgba(148, 163, 184, 0.25) !important;
    border-radius: var(--yt-radius-sm) !important;
    backdrop-filter: none !important;
}
html.dark body[data-page="youth"].has-youth-theme #content .mv-title {
    color: var(--yt-accent-light) !important;
    text-shadow: 0 2px 0 rgba(0, 0, 0, 0.5);
}
html.dark body[data-page="youth"].has-youth-theme #content :is(h3, .yc-title, .my-progress__title) {
    color: var(--yt-accent-light) !important;
    background-image: none;
    -webkit-text-fill-color: currentColor;
}
html.dark body[data-page="youth"].has-youth-theme #content .yc-title--grad { background: none !important; }
html.dark body[data-page="youth"].has-youth-theme #content .mv-footer > p {
    background: rgba(15, 23, 42, 0.9);
    border: 2px solid var(--yt-accent);
    border-radius: var(--yt-radius);
}

/* --------------------------------------------------------------------------
   5. PER-THEME PERSONALITY
   -------------------------------------------------------------------------- */

/* Block Builder: square everything, chunky 3D buttons */
body[data-page="youth"].theme-minecraft #content :is([class*="rounded"], .yc-card, .my-progress, .my-progress__cta, .yc-btn, .mv-icon) {
    border-radius: 0 !important;
}
body[data-page="youth"].theme-minecraft #content :is(.mv-hero button, .mv-hero label, .mv-actions-row button, .yc-btn, .my-progress__cta) {
    font-family: 'Pixelify Sans', 'Courier New', monospace;
    border: 3px solid #1f1f1f !important;
    box-shadow: inset -3px -3px 0 rgba(0, 0, 0, 0.28), inset 3px 3px 0 rgba(255, 255, 255, 0.35), 4px 4px 0 rgba(0, 0, 0, 0.3) !important;
    transition: transform 0.08s, box-shadow 0.08s !important;
}
body[data-page="youth"].theme-minecraft #content :is(.mv-hero button, .mv-hero label, .mv-actions-row button, .yc-btn):active {
    transform: translate(3px, 3px) !important;
    box-shadow: inset -3px -3px 0 rgba(0, 0, 0, 0.28), inset 3px 3px 0 rgba(255, 255, 255, 0.35) !important;
}
body[data-page="youth"].theme-minecraft .mv-hero::after { image-rendering: pixelated; }

/* Comic Hero: inked buttons and sticker-label section headings */
body[data-page="youth"].theme-hero #content :is(.mv-hero button, .mv-hero label, .mv-actions-row button, .yc-btn, .my-progress__cta) {
    border: 3px solid #111111 !important;
    box-shadow: 4px 4px 0 #111111 !important;
    letter-spacing: 0.02em;
}
body[data-page="youth"].theme-hero #content :is(.mv-hero button, .mv-actions-row button, .my-progress__cta) {
    font-family: 'Bangers', Impact, sans-serif !important;
    font-weight: 400 !important;
    font-size: 1.1rem;
    letter-spacing: 0.06em;
}
html:not(.dark) body[data-page="youth"].theme-hero .mv-section-title {
    display: inline-block;
    background: #e63946;
    color: #ffffff !important;
    text-shadow: 2px 2px 0 #111111;
    border: 3px solid #111111 !important;
    box-shadow: 5px 5px 0 #111111;
    padding: 0.15rem 1rem 0.05rem;
    transform: rotate(-1.5deg);
}
html:not(.dark) body[data-page="youth"].theme-hero .mv-banner {
    background-color: #ffffff !important;
}

/* Football: scoreboard plaque */
html:not(.dark) body[data-page="youth"].theme-football .mv-hero {
    box-shadow: inset 0 0 0 2px #1e293b, 0 10px 0 #0b1220, 0 22px 34px -18px rgba(0, 0, 0, 0.6) !important;
}

/* Space Mission: glowing plaque */
html:not(.dark) body[data-page="youth"].theme-space .mv-hero {
    box-shadow: 0 0 0 4px rgba(167, 139, 250, 0.25), 0 0 32px rgba(129, 140, 248, 0.45) !important;
}

/* Animal Friends: seamless repeating wallpaper padding */
body[data-page="youth"].theme-pets #content {
    padding-bottom: 2.25rem !important;
}

/* --------------------------------------------------------------------------
   6. THEME PICKER TILES (Personalise modal)
   -------------------------------------------------------------------------- */
.yt-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem;
}
@media (min-width: 640px) { .yt-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .yt-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.1rem; } }

.yt-tile {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    padding: 0;
    border-radius: 1.25rem;
    border: 3px solid #e5e7eb;
    overflow: hidden;
    cursor: pointer;
    text-align: left;
    background: #f8fafc;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s, border-color 0.2s;
}
.dark .yt-tile { border-color: #374151; }
.yt-tile:hover { transform: translateY(-3px); box-shadow: 0 14px 28px -14px rgba(15, 23, 42, 0.45); }
.yt-tile:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.55); }
.yt-tile.is-selected {
    border-color: #6366f1;
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.3), 0 16px 30px -16px rgba(79, 70, 229, 0.6);
    transform: translateY(-3px);
}
.yt-tile__scene {
    position: absolute;
    inset: 0;
    background: var(--yt-preview, #e5e7eb);
}
.yt-tile__scene::after {
    content: '';
    position: absolute;
    top: 8px;
    left: 8px;
    width: 38px;
    height: 38px;
    background: var(--yt-sticker) center / contain no-repeat;
    filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.25));
}
.yt-tile__label {
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: 8px;
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    padding: 0.4rem 0.65rem 0.45rem;
    border-radius: 0.8rem;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 6px 14px -8px rgba(0, 0, 0, 0.35);
}
.yt-tile__name {
    font-family: var(--yt-font-title, inherit);
    font-weight: var(--yt-title-weight, 900);
    font-size: 1.05rem;
    line-height: 1.15;
    color: #111827;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.yt-tile__tag {
    font-size: 0.72rem;
    font-weight: 700;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.yt-tile__check {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    border-radius: 9999px;
    display: grid;
    place-items: center;
    background: #6366f1;
    color: #ffffff;
    font-weight: 900;
    font-size: 0.95rem;
    box-shadow: 0 0 0 3px #ffffff;
    opacity: 0;
    transform: scale(0.4);
    transition: opacity 0.2s, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.yt-tile.is-selected .yt-tile__check { opacity: 1; transform: scale(1); }
.yt-tile__new {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 0.12rem 0.5rem;
    border-radius: 9999px;
    background: #f43f5e;
    color: #ffffff;
    font-size: 0.65rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    box-shadow: 0 4px 10px -4px rgba(244, 63, 94, 0.8);
}
.yt-tile.is-selected .yt-tile__new { display: none; }

/* --------------------------------------------------------------------------
   7. MOTION & PRINT
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    body[data-page="youth"].has-youth-theme #content .mv-hero::after { animation: none; }
    .yt-tile, .yt-tile__check { transition: none; }
}
@media print {
    body[data-page="youth"].has-youth-theme #content::before,
    body[data-page="youth"].has-youth-theme #content::after,
    body[data-page="youth"].has-youth-theme #content .mv-hero::after { display: none !important; }
}

/* --------------------------------------------------------------------------
   8. STRICT ISOLATION GUARDS
   Themes must ONLY affect #content (the child's page).
   Sidebars, sticky topbars, slide-outs, modals, dialogs, toasts,
   and popups are completely protected from theme styling.
   -------------------------------------------------------------------------- */
#app-sidebar,
#app-sidebar *,
#main-header,
#main-header *,
#sidebar-backdrop,
#settings-panel,
#settings-panel *,
#notifications-panel,
#notifications-panel *,
#profile-panel,
#profile-panel *,
#unapproved-screen,
#terms-modal,
#mandatory-terms-gate,
#workload-landing-screen,
#home-selection-screen,
#profile-gate-screen,
#pin-lock-screen,
#support-ticket-modal,
#acknowledge-modal,
#risk-signoff-warning-modal,
#my-voice-warning-modal,
#personalization-modal,
[id*="modal"]:not(#content),
.modal-content,
#toast-container {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* Ensure modal buttons, inputs, and text don't inherit theme fonts or theme radius */
#personalization-modal button:not(.theme-btn),
#personalization-modal input,
#personalization-modal select,
#my-voice-warning-modal button,
.modal-content button,
.modal-content input,
.modal-content select {
    font-family: inherit;
    letter-spacing: normal;
}