/* ============================================================
   FULUS GEN — app.css
   Version: 1.0 | SQUAD © 2026
   Themes: Sunny Adventure ☀️ | Ocean Explorer 🌊
   Stack: Laravel 12 + Vue 3 + Inertia.js + Tailwind CSS
   ============================================================ */

/* ============================================================
   1. GOOGLE FONTS IMPORT
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;700;800;900&family=Tajawal:wght@400;700;800&display=swap');

/* ============================================================
   2. CSS CUSTOM PROPERTIES — THEME A: SUNNY ADVENTURE ☀️
   Default theme — applied when data-theme="sunny" or no theme set
   ============================================================ */
:root,
[data-theme="sunny"] {

    /* Background layers */
    --color-bg:            transparent;
    --color-surface:       rgba(0, 0, 0, 0.12);
    --color-surface-alt:   rgba(0, 0, 0, 0.08);

    /* Brand Primary — Orange */
    --color-primary:       #FF6B35;
    --color-primary-light: #FF8C5A;
    --color-primary-dark:  #E55A28;
    --color-primary-soft:  #FFFFFF;

    /* Accent — Gold */
    --color-accent:        #FFD166;
    --color-accent-dark:   #F0B429;
    --color-accent-soft:   #FFF3C4;

    /* Jars */
    --color-jar-spend-bg:     #FFF9C4;
    --color-jar-spend-border: #FFD166;
    --color-jar-spend-text:   #8a5e00;
    --color-jar-save-bg:      #E8F5E9;
    --color-jar-save-border:  #06D6A0;
    --color-jar-save-text:    #065f46;
    --color-jar-give-bg:      #FCE4EC;
    --color-jar-give-border:  #EF476F;
    --color-jar-give-text:    #9b1239;

    /* Semantic */
    --color-success:       #06D6A0;
    --color-success-soft:  #D1FAF0;
    --color-danger:        #EF476F;
    --color-danger-soft:   #FFFFFF;
    --color-warning:       #FFD166;
    --color-warning-soft:  #FFFFFF;
    --color-info:          #4ECDC4;
    --color-info-soft:     #E0FAF8;

    /* Text */
    --color-text-primary:   #1A1A1A;
    --color-text-secondary: #FFFFFF;
    --color-text-muted:     #FFFFFF;
    --color-text-inverse:   #FFFFFF;
    --color-text-on-primary:#FFFFFF;
    --color-text-on-accent: #8a5e00;

    /* Borders */
    --color-border:         #FFD166;
    --color-border-light:   #FFFFFF;
    --color-border-input:   #FFFFFF;

    /* Progress / XP bar */
    --color-bar-bg:         #FFFFFF;
    --color-bar-fill:       #FF6B35;

    /* Header */
    --color-header-bg:      #FF6B35;
    --color-header-text:    #FFFFFF;
    --color-header-accent:  #FFD166;

    /* Badge / Level */
    --color-badge-bg:       #FFD166;
    --color-badge-text:     #FF6B35;

    /* Shadows */
    --shadow-card:   0 2px 12px rgba(255, 107, 53, 0.10);
    --shadow-button: 0 4px 14px rgba(255, 107, 53, 0.30);
    --shadow-float:  0 8px 30px rgba(255, 107, 53, 0.15);
}

/* ============================================================
   3. CSS CUSTOM PROPERTIES — THEME B: OCEAN EXPLORER 🌊
   Applied when data-theme="ocean"
   ============================================================ */
[data-theme="ocean"] {

    /* Background layers */
    --color-bg:            transparent;
    --color-surface:       rgba(0, 0, 0, 0.12);
    --color-surface-alt:   rgba(0, 0, 0, 0.08);

    /* Brand Primary — Deep Blue */
    --color-primary:       #1565C0;
    --color-primary-light: #0288D1;
    --color-primary-dark:  #0D47A1;
    --color-primary-soft:  #BBDEFB;

    /* Accent — Sunshine Yellow */
    --color-accent:        #FDD835;
    --color-accent-dark:   #F9A825;
    --color-accent-soft:   #FFF9C4;

    /* Jars */
    --color-jar-spend-bg:     #FFF9C4;
    --color-jar-spend-border: #FDD835;
    --color-jar-spend-text:   #5a4700;
    --color-jar-save-bg:      #E8F5E9;
    --color-jar-save-border:  #66BB6A;
    --color-jar-save-text:    #1b5e20;
    --color-jar-give-bg:      #FCE4EC;
    --color-jar-give-border:  #F48FB1;
    --color-jar-give-text:    #880e4f;

    /* Semantic */
    --color-success:       #66BB6A;
    --color-success-soft:  #E8F5E9;
    --color-danger:        #EF5350;
    --color-danger-soft:   #FFEBEE;
    --color-warning:       #FDD835;
    --color-warning-soft:  #FFF9C4;
    --color-info:          #29B6F6;
    --color-info-soft:     #E1F5FE;

    /* Text */
    --color-text-primary:   #0D1B2A;
    --color-text-secondary: #546E7A;
    --color-text-muted:     #90A4AE;
    --color-text-inverse:   #FFFFFF;
    --color-text-on-primary:#FFFFFF;
    --color-text-on-accent: #5a4700;

    /* Borders */
    --color-border:         #90CAF9;
    --color-border-light:   #BBDEFB;
    --color-border-input:   #CFE2FF;

    /* Progress / XP bar */
    --color-bar-bg:         #BBDEFB;
    --color-bar-fill:       #1565C0;

    /* Header */
    --color-header-bg:      #1565C0;
    --color-header-text:    #FFFFFF;
    --color-header-accent:  #FDD835;

    /* Badge / Level */
    --color-badge-bg:       #FDD835;
    --color-badge-text:     #1565C0;

    /* Shadows */
    --shadow-card:   0 2px 12px rgba(21, 101, 192, 0.10);
    --shadow-button: 0 4px 14px rgba(21, 101, 192, 0.30);
    --shadow-float:  0 8px 30px rgba(21, 101, 192, 0.15);
}

/* ============================================================
   4. SHARED DESIGN TOKENS (Both themes)
   ============================================================ */
:root {
    /* Border radius */
    --radius-sm:     8px;
    --radius-md:     12px;
    --radius-lg:     16px;
    --radius-xl:     20px;
    --radius-pill:   999px;

    /* Spacing scale */
    --space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  20px;
    --space-6:  24px;
    --space-8:  32px;
    --space-10: 40px;
    --space-12: 48px;

    /* Typography scale */
    --text-xs:   11px;
    --text-sm:   12px;
    --text-base: 14px;
    --text-md:   16px;
    --text-lg:   18px;
    --text-xl:   22px;
    --text-2xl:  28px;
    --text-3xl:  36px;
    --text-4xl:  48px;

    /* Font weights */
    --fw-regular: 400;
    --fw-bold:    700;
    --fw-heavy:   800;
    --fw-black:   900;

    /* Transitions */
    --transition-fast:  0.15s ease;
    --transition-base:  0.25s ease;
    --transition-slow:  0.4s ease;
    --transition-theme: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;

    /* Touch targets */
    --touch-target: 44px;

    /* Z-index scale */
    --z-base:    1;
    --z-dropdown: 100;
    --z-modal:   200;
    --z-toast:   300;
    --z-top:     400;
}

/* ============================================================
   5. BASE RESET & GLOBAL STYLES
   ============================================================ */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 14px;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    font-family: 'Nunito', sans-serif;
    font-weight: var(--fw-bold);
    background-color: #0a0a0a;
    color: var(--color-text-primary);
    line-height: 1.6;
    min-height: 100vh;
    transition: var(--transition-theme);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* PWA — prevent iOS rubber-band overscroll */
    overscroll-behavior: none;
    /* PWA — prevent accidental text selection on game UI */
    -webkit-user-select: none;
    user-select: none;
}

/* Arabic / RTL language support */
[lang="ar"],
[dir="rtl"] {
    font-family: 'Tajawal', 'Nunito', sans-serif;
    direction: rtl;
    text-align: right;
}

[dir="rtl"] .fk-header__logo {
    flex-direction: row-reverse;
}

img, svg, video {
    display: block;
    max-width: 100%;
}

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: opacity var(--transition-fast);
}

a:hover { opacity: 0.8; }

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
}

input, select, textarea {
    font-family: inherit;
}

/* ============================================================
   6. TYPOGRAPHY
   ============================================================ */
.fk-h1 {
    font-size: var(--text-4xl);
    font-weight: var(--fw-black);
    color: var(--color-text-primary);
    line-height: 1.1;
}

.fk-h2 {
    font-size: var(--text-3xl);
    font-weight: var(--fw-black);
    color: var(--color-text-primary);
    line-height: 1.2;
}

.fk-h3 {
    font-size: var(--text-xl);
    font-weight: var(--fw-black);
    color: var(--color-text-primary);
    line-height: 1.3;
}

.fk-h4 {
    font-size: var(--text-lg);
    font-weight: var(--fw-heavy);
    color: var(--color-text-primary);
}

.fk-label {
    font-size: var(--text-xs);
    font-weight: var(--fw-heavy);
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--color-text-secondary);
}

.fk-body {
    font-size: var(--text-base);
    font-weight: var(--fw-bold);
    color: var(--color-text-primary);
    line-height: 1.6;
}

.fk-body-sm {
    font-size: var(--text-sm);
    font-weight: var(--fw-bold);
    color: var(--color-text-secondary);
    line-height: 1.5;
}

.fk-muted {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

/* ============================================================
   7. LAYOUT — APP SHELL
   ============================================================ */
.fk-app {
    min-height: 100vh;
    background-color: var(--color-bg);
    transition: var(--transition-theme);
    display: flex;
    flex-direction: column;
}

.fk-container {
    width: 100%;
    max-width: 480px;       /* Mobile-first: max width for mobile shell */
    margin: 0 auto;
    padding: 0 var(--space-4);
}

.fk-container--wide {
    max-width: 960px;       /* Parent dashboard on desktop */
    margin: 0 auto;
    padding: 0 var(--space-6);
}

.fk-page {
    flex: 1;
    padding: var(--space-4) 0 var(--space-12);
}

/* ============================================================
   8. HEADER / NAVIGATION BAR
   ============================================================ */
.fk-header {
    background-color: var(--color-header-bg);
    padding: var(--space-4) var(--space-5);
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 0 0 var(--radius-xl) var(--radius-xl);
    transition: background-color var(--transition-slow);
    position: sticky;
    top: 0;
    z-index: var(--z-base);
}

.fk-header__logo {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.fk-header__logo-text {
    font-size: var(--text-xl);
    font-weight: var(--fw-black);
    color: var(--color-header-text);
    font-family: 'Nunito', sans-serif;
}

.fk-header__logo-text span {
    color: var(--color-header-accent);
}

.fk-header__actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

/* ============================================================
   9. CARDS
   ============================================================ */
.fk-card {
    background: var(--color-surface);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-4) var(--space-5);
    box-shadow: var(--shadow-card);
    transition: var(--transition-theme);
}

.fk-card--primary {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-text-inverse);
}

.fk-card--primary .fk-label,
.fk-card--primary .fk-body,
.fk-card--primary .fk-body-sm,
.fk-card--primary .fk-muted {
    color: rgba(255, 255, 255, 0.85);
}

.fk-card--soft {
    background: var(--color-primary-soft);
    border-color: var(--color-border-light);
}

.fk-card:hover {
    box-shadow: var(--shadow-float);
    transform: translateY(-1px);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

/* ============================================================
   10. WALLET CARD
   ============================================================ */
.fk-wallet {
    background: var(--color-primary);
    border-radius: var(--radius-lg);
    padding: var(--space-5) var(--space-5);
    margin-bottom: var(--space-4);
    transition: background-color var(--transition-slow);
}

.fk-wallet__label {
    font-size: var(--text-xs);
    font-weight: var(--fw-heavy);
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.80);
    margin-bottom: var(--space-1);
}

.fk-wallet__amount {
    font-size: var(--text-4xl);
    font-weight: var(--fw-black);
    color: #FFFFFF;
    line-height: 1.1;
    margin-bottom: var(--space-1);
}

.fk-wallet__sub {
    font-size: var(--text-sm);
    color: var(--color-primary-soft);
}

/* Ocean theme wallet override — white card instead of colored */
[data-theme="ocean"] .fk-wallet {
    background: var(--color-surface);
    border: 2px solid var(--color-border);
    box-shadow: var(--shadow-card);
}

[data-theme="ocean"] .fk-wallet__label {
    color: var(--color-primary);
}

[data-theme="ocean"] .fk-wallet__amount {
    color: var(--color-primary);
}

[data-theme="ocean"] .fk-wallet__sub {
    color: var(--color-text-muted);
}

/* ============================================================
   11. JARS SYSTEM (3-Jar)
   ============================================================ */
.fk-jars {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.fk-jar {
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-2);
    text-align: center;
    border: 2px solid;
    transition: transform var(--transition-base), box-shadow var(--transition-base);
    cursor: pointer;
}

.fk-jar:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-float);
}

.fk-jar--spend {
    background: var(--color-jar-spend-bg);
    border-color: var(--color-jar-spend-border);
}

.fk-jar--save {
    background: var(--color-jar-save-bg);
    border-color: var(--color-jar-save-border);
}

.fk-jar--give {
    background: var(--color-jar-give-bg);
    border-color: var(--color-jar-give-border);
}

.fk-jar__icon {
    font-size: 26px;
    margin-bottom: var(--space-1);
    display: block;
}

.fk-jar__label {
    font-size: var(--text-xs);
    font-weight: var(--fw-heavy);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-text-secondary);
    margin-bottom: var(--space-1);
}

.fk-jar__amount {
    font-size: 15px;
    font-weight: var(--fw-black);
    color: var(--color-text-primary);
}

/* ============================================================
   12. PROGRESS BAR
   ============================================================ */
.fk-progress {
    background: var(--color-bar-bg);
    border-radius: var(--radius-pill);
    height: 12px;
    overflow: hidden;
    transition: var(--transition-theme);
}

.fk-progress__fill {
    height: 100%;
    background: var(--color-bar-fill);
    border-radius: var(--radius-pill);
    transition: width 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), background var(--transition-slow);
}

/* XP Progress — thinner */
.fk-progress--xp {
    height: 10px;
}

/* ============================================================
   13. GOAL CARD
   ============================================================ */
.fk-goal {
    background: var(--color-surface);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-4) var(--space-4);
    margin-bottom: var(--space-4);
    transition: var(--transition-theme);
}

.fk-goal__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-3);
}

.fk-goal__title {
    font-size: var(--text-base);
    font-weight: var(--fw-heavy);
    color: var(--color-text-primary);
}

.fk-goal__percent {
    font-size: var(--text-base);
    font-weight: var(--fw-black);
    color: var(--color-primary);
}

.fk-goal__meta {
    display: flex;
    justify-content: space-between;
    margin-top: var(--space-2);
}

.fk-goal__amount {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}

/* ============================================================
   14. BUTTONS
   ============================================================ */
.fk-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    font-family: inherit;
    font-weight: var(--fw-heavy);
    font-size: var(--text-base);
    border-radius: var(--radius-pill);
    padding: 0 var(--space-5);
    min-height: var(--touch-target);
    min-width: var(--touch-target);
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), opacity var(--transition-fast);
    text-decoration: none;
    white-space: nowrap;
}

.fk-btn:active {
    transform: scale(0.97);
}

.fk-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Primary button */
.fk-btn--primary {
    background: var(--color-primary);
    color: var(--color-text-on-primary);
    box-shadow: var(--shadow-button);
}

.fk-btn--primary:hover {
    background: var(--color-primary-dark);
    box-shadow: var(--shadow-float);
}

/* Accent button */
.fk-btn--accent {
    background: var(--color-accent);
    color: var(--color-text-on-accent);
}

.fk-btn--accent:hover {
    background: var(--color-accent-dark);
}

/* Outline button */
.fk-btn--outline {
    background: transparent;
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.fk-btn--outline:hover {
    background: var(--color-primary-soft);
}

/* Ghost button */
.fk-btn--ghost {
    background: transparent;
    border-color: var(--color-border);
    color: var(--color-text-secondary);
}

.fk-btn--ghost:hover {
    background: var(--color-surface-alt);
}

/* Danger button */
.fk-btn--danger {
    background: var(--color-danger);
    color: #fff;
}

/* Small button */
.fk-btn--sm {
    font-size: var(--text-sm);
    padding: 0 var(--space-3);
    min-height: 34px;
}

/* Full width */
.fk-btn--full {
    width: 100%;
}

/* ============================================================
   15. BADGES & CHIPS
   ============================================================ */
.fk-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-xs);
    font-weight: var(--fw-heavy);
    padding: 4px var(--space-3);
    border-radius: var(--radius-pill);
    white-space: nowrap;
}

/* Level badge */
.fk-badge--level {
    background: var(--color-badge-bg);
    color: var(--color-badge-text);
}

/* Success chip */
.fk-badge--success {
    background: var(--color-success-soft);
    color: var(--color-success);
}

/* Danger chip */
.fk-badge--danger {
    background: var(--color-danger-soft);
    color: var(--color-danger);
}

/* Warning chip */
.fk-badge--warning {
    background: var(--color-warning-soft);
    color: var(--color-accent-dark);
}

/* Info chip */
.fk-badge--info {
    background: var(--color-info-soft);
    color: var(--color-info);
}

/* XP pill */
.fk-badge--xp {
    background: var(--color-primary-soft);
    color: var(--color-primary);
}

/* ============================================================
   16. CHORE CARD
   ============================================================ */
.fk-chore {
    background: var(--color-surface);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    transition: var(--transition-theme);
    min-height: var(--touch-target);
}

.fk-chore:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-card);
}

.fk-chore__info {
    flex: 1;
    min-width: 0;
}

.fk-chore__name {
    font-size: var(--text-base);
    font-weight: var(--fw-heavy);
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fk-chore__sub {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin-top: 2px;
}

.fk-chore__reward {
    font-size: var(--text-sm);
    font-weight: var(--fw-black);
    padding: 4px var(--space-3);
    border-radius: var(--radius-pill);
    background: var(--color-accent-soft);
    color: var(--color-text-on-accent);
    white-space: nowrap;
    flex-shrink: 0;
}

/* ============================================================
   17. LESSON CARD
   ============================================================ */
.fk-lesson {
    background: var(--color-surface);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-3);
    cursor: pointer;
    transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}

.fk-lesson:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-float);
    border-color: var(--color-primary);
}

.fk-lesson--completed {
    opacity: 0.65;
}

.fk-lesson__icon {
    font-size: 24px;
    margin-bottom: var(--space-2);
    display: block;
}

.fk-lesson__title {
    font-size: var(--text-sm);
    font-weight: var(--fw-heavy);
    color: var(--color-text-primary);
    line-height: 1.3;
    margin-bottom: 4px;
}

.fk-lesson__xp {
    font-size: var(--text-xs);
    color: var(--color-primary);
    font-weight: var(--fw-heavy);
}

/* ============================================================
   18. FORM ELEMENTS
   ============================================================ */
.fk-input {
    width: 100%;
    min-height: var(--touch-target);
    background: var(--color-surface);
    border: 2px solid var(--color-border-input);
    border-radius: var(--radius-md);
    padding: 0 var(--space-4);
    font-family: inherit;
    font-size: var(--text-base);
    font-weight: var(--fw-bold);
    color: var(--color-text-primary);
    outline: none;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.fk-input:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-soft);
}

.fk-input::placeholder {
    color: var(--color-text-muted);
    font-weight: var(--fw-bold);
}

.fk-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-3) center;
    padding-right: var(--space-8);
}

.fk-form-group {
    margin-bottom: var(--space-4);
}

.fk-label-text {
    display: block;
    font-size: var(--text-sm);
    font-weight: var(--fw-heavy);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-2);
}

/* ============================================================
   19. SECTION HEADER
   ============================================================ */
.fk-section {
    margin-bottom: var(--space-4);
}

.fk-section__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-3);
}

.fk-section__title {
    font-size: var(--text-xs);
    font-weight: var(--fw-black);
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--color-primary);
}

.fk-section__link {
    font-size: var(--text-sm);
    font-weight: var(--fw-heavy);
    color: var(--color-primary);
}

/* ============================================================
   20. BOTTOM NAVIGATION (Mobile)
   ============================================================ */
.fk-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--color-surface);
    border-top: 2px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: var(--space-2) 0;
    padding-bottom: max(var(--space-2), env(safe-area-inset-bottom));
    z-index: var(--z-dropdown);
    transition: var(--transition-theme);
}

.fk-nav__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: var(--touch-target);
    min-height: var(--touch-target);
    justify-content: center;
    cursor: pointer;
    border-radius: var(--radius-md);
    padding: var(--space-1) var(--space-2);
    transition: opacity var(--transition-fast);
    text-decoration: none;
}

.fk-nav__icon {
    font-size: 22px;
    transition: transform var(--transition-fast);
}

.fk-nav__item--active .fk-nav__icon {
    transform: scale(1.15);
}

.fk-nav__label {
    font-size: 10px;
    font-weight: var(--fw-heavy);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.fk-nav__item--active .fk-nav__label {
    color: var(--color-primary);
}

/* ============================================================
   21. THEME SWITCHER COMPONENT
   ============================================================ */
.fk-theme-switcher {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    padding: var(--space-1);
    background: var(--color-surface-alt);
    border-radius: var(--radius-pill);
    border: 2px solid var(--color-border);
}

.fk-theme-btn {
    font-family: inherit;
    font-size: var(--text-sm);
    font-weight: var(--fw-heavy);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-pill);
    border: none;
    background: transparent;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all var(--transition-base);
    white-space: nowrap;
}

.fk-theme-btn--active {
    background: var(--color-primary);
    color: var(--color-text-on-primary);
    box-shadow: var(--shadow-button);
}

/* ============================================================
   22. LANGUAGE SWITCHER
   ============================================================ */
.fk-lang-switcher {
    display: flex;
    gap: var(--space-1);
    align-items: center;
}

.fk-lang-btn {
    font-family: inherit;
    font-size: var(--text-sm);
    font-weight: var(--fw-heavy);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-pill);
    border: 2px solid var(--color-border);
    background: transparent;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
    min-height: 34px;
}

.fk-lang-btn--active {
    background: var(--color-accent);
    color: var(--color-text-on-accent);
    border-color: var(--color-accent);
}

/* ============================================================
   23. NOTIFICATION / ALERT BANNER
   ============================================================ */
.fk-alert {
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
    border: 2px solid;
}

.fk-alert--success {
    background: var(--color-success-soft);
    border-color: var(--color-success);
    color: var(--color-success);
}

.fk-alert--danger {
    background: var(--color-danger-soft);
    border-color: var(--color-danger);
    color: var(--color-danger);
}

.fk-alert--warning {
    background: var(--color-warning-soft);
    border-color: var(--color-accent-dark);
    color: var(--color-accent-dark);
}

.fk-alert--info {
    background: var(--color-primary-soft);
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.fk-alert__icon { font-size: 20px; flex-shrink: 0; }

.fk-alert__body { flex: 1; }

.fk-alert__title {
    font-size: var(--text-base);
    font-weight: var(--fw-heavy);
    margin-bottom: 2px;
}

.fk-alert__message {
    font-size: var(--text-sm);
    opacity: 0.85;
}

/* ============================================================
   24. AVATAR / CHILD CHIP
   ============================================================ */
.fk-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--color-primary-soft);
    border: 2px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
    overflow: hidden;
}

.fk-avatar--sm {
    width: 36px;
    height: 36px;
    font-size: 16px;
}

.fk-avatar--lg {
    width: 64px;
    height: 64px;
    font-size: 30px;
}

/* ============================================================
   25. CHILD CARD (Parent dashboard)
   ============================================================ */
.fk-child-card {
    background: var(--color-surface);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    cursor: pointer;
    transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}

.fk-child-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-float);
    border-color: var(--color-primary);
}

.fk-child-card__top {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.fk-child-card__name {
    font-size: var(--text-md);
    font-weight: var(--fw-black);
    color: var(--color-text-primary);
}

.fk-child-card__tier {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

.fk-child-card__balance {
    font-size: var(--text-2xl);
    font-weight: var(--fw-black);
    color: var(--color-primary);
}

/* ============================================================
   26. SPEND REQUEST CARD
   ============================================================ */
.fk-spend-request {
    background: var(--color-surface);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    margin-bottom: var(--space-3);
    transition: var(--transition-theme);
}

.fk-spend-request__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-3);
}

.fk-spend-request__amount {
    font-size: var(--text-2xl);
    font-weight: var(--fw-black);
    color: var(--color-primary);
}

.fk-spend-request__actions {
    display: flex;
    gap: var(--space-2);
    margin-top: var(--space-3);
}

/* ============================================================
   27. GAMIFICATION — XP ROW
   ============================================================ */
.fk-xp-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.fk-xp-label {
    font-size: var(--text-sm);
    font-weight: var(--fw-heavy);
    color: var(--color-text-muted);
    white-space: nowrap;
}

/* ============================================================
   28. EMPTY STATE
   ============================================================ */
.fk-empty {
    text-align: center;
    padding: var(--space-10) var(--space-6);
    color: var(--color-text-muted);
}

.fk-empty__icon {
    font-size: 48px;
    margin-bottom: var(--space-4);
    display: block;
    opacity: 0.6;
}

.fk-empty__title {
    font-size: var(--text-lg);
    font-weight: var(--fw-heavy);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-2);
}

.fk-empty__sub {
    font-size: var(--text-base);
    color: var(--color-text-muted);
}

/* ============================================================
   29. DIVIDER
   ============================================================ */
.fk-divider {
    height: 1px;
    background: var(--color-border-light);
    margin: var(--space-4) 0;
    border: none;
}

/* ============================================================
   30. LOADING SKELETON
   ============================================================ */
@keyframes fk-skeleton-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

.fk-skeleton {
    background: var(--color-primary-soft);
    border-radius: var(--radius-md);
    animation: fk-skeleton-pulse 1.5s ease-in-out infinite;
}

.fk-skeleton--text {
    height: 14px;
    width: 100%;
    margin-bottom: var(--space-2);
}

.fk-skeleton--text-sm {
    height: 12px;
    width: 60%;
}

.fk-skeleton--card {
    height: 100px;
    width: 100%;
    border-radius: var(--radius-lg);
}

.fk-skeleton--avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
}

/* ============================================================
   31. TOAST NOTIFICATIONS
   ============================================================ */
.fk-toast-container {
    position: fixed;
    top: var(--space-5);
    left: 50%;
    transform: translateX(-50%);
    z-index: var(--z-toast);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    pointer-events: none;
    width: min(90vw, 360px);
}

.fk-toast {
    background: var(--color-surface);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-3) var(--space-4);
    box-shadow: var(--shadow-float);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    pointer-events: all;
    animation: fk-toast-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes fk-toast-in {
    from { opacity: 0; transform: translateY(-12px) scale(0.95); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.fk-toast--success { border-color: var(--color-success); }
.fk-toast--danger  { border-color: var(--color-danger); }

/* ============================================================
   32. CELEBRATION ANIMATION
   ============================================================ */
@keyframes fk-celebrate {
    0%   { transform: scale(0.8) rotate(-5deg); opacity: 0; }
    50%  { transform: scale(1.15) rotate(3deg); }
    100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

.fk-celebrate {
    animation: fk-celebrate 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes fk-bounce {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-6px); }
}

.fk-bounce {
    animation: fk-bounce 0.6s ease-in-out 2;
}

/* ============================================================
   33. UTILITY CLASSES
   ============================================================ */

/* Spacing */
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }

/* Display */
.flex        { display: flex; }
.flex-col    { flex-direction: column; }
.items-center{ align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center  { justify-content: center; }
.gap-2       { gap: var(--space-2); }
.gap-3       { gap: var(--space-3); }
.gap-4       { gap: var(--space-4); }
.grid        { display: grid; }
.grid-2      { grid-template-columns: repeat(2, 1fr); }
.grid-3      { grid-template-columns: repeat(3, 1fr); }

/* Text */
.text-center  { text-align: center; }
.text-right   { text-align: right; }
.text-primary { color: var(--color-primary); }
.text-muted   { color: var(--color-text-muted); }
.fw-black     { font-weight: var(--fw-black); }
.fw-heavy     { font-weight: var(--fw-heavy); }

/* Misc */
.w-full       { width: 100%; }
.rounded-pill { border-radius: var(--radius-pill); }
.hidden       { display: none; }
.sr-only      { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

/* ============================================================
   34. RESPONSIVE — TABLET & DESKTOP
   ============================================================ */
@media (min-width: 640px) {
    .fk-container {
        padding: 0 var(--space-6);
    }

    .fk-jars {
        gap: var(--space-4);
    }

    .fk-h1 { font-size: 52px; }
    .fk-h2 { font-size: 40px; }
}

@media (min-width: 768px) {
    /* Parent dashboard: multi-column children grid */
    .fk-children-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-4);
    }

    .fk-nav {
        display: none;  /* Hide mobile nav on tablet+ */
    }
}

@media (min-width: 1024px) {
    .fk-children-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .fk-container--wide {
        padding: 0 var(--space-8);
    }
}

/* ============================================================
   35. SAFE AREA — iPhone notch & home bar
   ============================================================ */
.fk-app {
    padding-top: env(safe-area-inset-top);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}

/* ============================================================
   END OF FULUS GEN — app.css
   ============================================================ */