:root {
        /* Eclipse Luxe Palette (Default) */
        --primary: #090909;
        --primary-light: #252525;
        --secondary: #d8b25e;
        --secondary-light: #f5d98a;
        --accent-green: #181818;

        --bg: #050505;
        --surface: #121212;
        --text-main: #f8f7f2;
        --text-muted: #b7b1a2;
        --pbb-luxe-night: #050505;
        --pbb-luxe-plum: #111111;
        --pbb-luxe-violet: #2a2a2a;
        --pbb-luxe-gold: #d8b25e;
        --pbb-luxe-gold-light: #f5d98a;
        --pbb-luxe-cream: #f8f7f2;
        --pbb-luxe-border: rgba(245, 217, 138, 0.16);
        --pbb-luxe-shadow: 0 24px 70px rgba(5, 2, 10, 0.42);

        --border-radius: 16px;
        --card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        --nav-height: 80px;
    }

    * { box-sizing: border-box; }

    body {
        font-family: 'Inter', sans-serif;
        background: var(--bg);
        color: var(--text-main);
        margin: 0;
        padding-bottom: calc(var(--nav-height) + env(safe-area-inset-bottom, 0px) + 20px); /* Space for bottom nav + safe area */
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
        line-height: 1.6;
        -webkit-font-smoothing: antialiased;
    }

    .level-up-side-pulse {
        position: fixed;
        top: calc(88px + env(safe-area-inset-top, 0px));
        right: 14px;
        z-index: 11000;
        pointer-events: none;
        animation: levelUpSidePulseIn 0.38s cubic-bezier(.2,.8,.2,1), levelUpSidePulseOut 0.38s ease-in 3.85s forwards;
    }

    .level-up-side-pulse-content {
        display: flex;
        align-items: center;
        gap: 11px;
        min-width: 190px;
        max-width: min(310px, calc(100vw - 28px));
        padding: 12px 14px;
        color: #fff;
        background:
            radial-gradient(circle at 16% 0%, rgba(245,217,138,0.34), transparent 32%),
            linear-gradient(135deg, rgba(9,9,9,0.96), rgba(24,24,24,0.94));
        border: 1px solid rgba(245,217,138,0.36);
        border-radius: 18px;
        box-shadow: 0 20px 45px rgba(0,0,0,0.36), 0 0 22px rgba(216,178,94,0.2);
        backdrop-filter: blur(14px);
    }

    .level-up-side-pulse-badge {
        width: 44px;
        height: 44px;
        flex: 0 0 auto;
        border-radius: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #090909;
        font-weight: 950;
        font-size: 1.1rem;
        background: linear-gradient(135deg, #f5d98a, #d8b25e);
        box-shadow: 0 8px 18px rgba(216,178,94,0.36);
    }

    .level-up-side-pulse-kicker {
        font-size: 0.66rem;
        text-transform: uppercase;
        letter-spacing: 0.12em;
        color: #f5d98a;
        font-weight: 850;
        line-height: 1;
    }

    .level-up-side-pulse-title {
        margin-top: 3px;
        font-size: 0.98rem;
        font-weight: 900;
        line-height: 1.08;
    }

    .level-up-side-pulse-rank {
        margin-top: 3px;
        color: rgba(255,255,255,0.72);
        font-size: 0.78rem;
        font-weight: 700;
        line-height: 1.2;
    }

    .walkthrough-xp-pulse {
        position: fixed;
        top: calc(22px + env(safe-area-inset-top, 0px));
        right: 14px;
        z-index: 400003;
        display: flex;
        align-items: center;
        gap: 9px;
        pointer-events: none;
        color: #1f1300;
        padding: 9px 12px 9px 9px;
        border-radius: 999px;
        background:
            radial-gradient(circle at 20% 0%, rgba(255,255,255,0.85), transparent 34%),
            linear-gradient(135deg, #fff4b8, #f0bd39 48%, #d89516);
        border: 1px solid rgba(255,255,255,0.72);
        box-shadow: 0 15px 32px rgba(116, 72, 0, 0.22), 0 0 24px rgba(240, 189, 57, 0.42);
        animation: walkthroughXpPulseIn 0.28s cubic-bezier(.2,.9,.2,1), walkthroughXpPulseOut 0.32s ease-in 1.82s forwards;
    }

    .walkthrough-xp-pulse-orb {
        width: 34px;
        height: 34px;
        border-radius: 999px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff9df;
        background: linear-gradient(135deg, #9a5b00, #2c1a00);
        font-size: 0.9rem;
        font-weight: 950;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 6px 14px rgba(72, 40, 0, 0.22);
    }

    .walkthrough-xp-pulse-label {
        font-size: 0.68rem;
        line-height: 1;
        text-transform: uppercase;
        letter-spacing: 0.12em;
        font-weight: 950;
    }

    .walkthrough-xp-pulse-sub {
        margin-top: 2px;
        font-size: 0.72rem;
        line-height: 1;
        font-weight: 800;
        opacity: 0.75;
    }

    @keyframes levelUpSidePulseIn {
        from {
            opacity: 0;
            transform: translateX(24px) scale(0.96);
        }
        to {
            opacity: 1;
            transform: translateX(0) scale(1);
        }
    }

    @keyframes levelUpSidePulseOut {
        to {
            opacity: 0;
            transform: translateX(22px) scale(0.98);
        }
    }

    @keyframes walkthroughXpPulseIn {
        from {
            opacity: 0;
            transform: translateY(-10px) scale(0.9);
        }
        70% {
            transform: translateY(2px) scale(1.04);
        }
        to {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }

    @keyframes walkthroughXpPulseOut {
        to {
            opacity: 0;
            transform: translateY(-8px) scale(0.96);
        }
    }

    /* Fixed Bottom Navigation */
    .bottom-nav {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: calc(var(--nav-height) + env(safe-area-inset-bottom, 0px));
        background: white;
        display: flex;
        justify-content: stretch;
        align-items: stretch;
        gap: 0;
        box-shadow: 0 -5px 20px rgba(0,0,0,0.1);
        z-index: 9999; /* Always on top */
        border-top: 1px solid rgba(0,0,0,0.05);
        padding: 6px max(4px, env(safe-area-inset-right, 0px)) calc(6px + env(safe-area-inset-bottom, 0px)) max(4px, env(safe-area-inset-left, 0px));
        overflow: hidden;
    }


    .nav-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: var(--text-muted);
        text-decoration: none;
        font-size: 0.74rem;
        font-weight: 500;
        gap: 4px;
        flex: 1 1 0;
        min-width: 0;
        width: auto;
        height: 100%;
        padding: 0 2px;
        line-height: 1.1;
        letter-spacing: 0;
        transition: color 0.2s;
        border: none;
        background: transparent;
        cursor: pointer;
        overflow: hidden;
        -webkit-tap-highlight-color: transparent;
    }

    .nav-item.active {
        color: var(--secondary);
    }
    
    .nav-item svg {
        width: 24px;
        height: 24px;
        flex: 0 0 auto;
        fill: currentColor;
    }

    .nav-item span {
        display: block;
        max-width: 100%;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        letter-spacing: 0;
    }

    /* Notification glow effect for tabs */
    .nav-item.has-notification {
        position: relative;
        animation: pulse-glow 2s ease-in-out infinite;
    }

    @keyframes pulse-glow {
        0%, 100% {
            box-shadow: 0 0 0 rgba(251, 191, 36, 0);
        }
        50% {
            box-shadow: 0 0 20px rgba(251, 191, 36, 0.6), inset 0 0 20px rgba(251, 191, 36, 0.2);
        }
    }

    .nav-item.has-notification svg,
    .nav-item.has-notification span {
        color: #fbbf24;
        filter: drop-shadow(0 0 4px rgba(251, 191, 36, 0.8));
    }

    /* Flower Theme Decorative Elements (used when flower-garden theme is active) */
    .flower-decoration-corner {
        position: absolute;
        width: 60px;
        height: 60px;
        background: url('assets/flower-cherry-blossom.svg') no-repeat center;
        background-size: contain;
        opacity: 0.25;
        pointer-events: none;
    }
    .flower-decoration-corner.top-right {
        top: 10px;
        right: 10px;
    }
    .flower-decoration-corner.bottom-left {
        bottom: 10px;
        left: 10px;
        transform: rotate(180deg);
    }

    /* Top Header for Views */
    .app-header {
        padding: 20px 25px;
        padding-top: calc(20px + env(safe-area-inset-top, 0px));
        background: white;
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: sticky;
        top: 0;
        z-index: 900;
        box-shadow: 0 2px 10px rgba(0,0,0,0.03);
    }
    .app-logo { font-family: 'Playfair Display'; font-weight: 700; font-size: 1.25rem; color: var(--primary); }
    .streak-header-widget {
        display: flex;
        align-items: center;
        gap: 5px;
        background: linear-gradient(135deg, #ff6400, #e85500);
        border-radius: 20px;
        padding: 5px 10px 5px 8px;
        white-space: nowrap;
        box-shadow: 0 2px 8px rgba(255,100,0,0.25);
    }
    .streak-header-count {
        font-weight: 800;
        color: white;
        font-size: 0.85rem;
        font-family: 'Outfit', sans-serif;
        text-shadow: 0 1px 2px rgba(0,0,0,0.15);
    }
    .coin-header-widget {
        display: flex;
        align-items: center;
        gap: 6px;
        background: linear-gradient(135deg, #fbbf24, #f59e0b);
        border-radius: 20px;
        padding: 5px 10px 5px 8px;
        cursor: pointer;
        box-shadow: 0 2px 8px rgba(245,158,11,0.25);
        white-space: nowrap;
    }
    .coin-header-widget .coin-emoji { font-size: 0.95rem; }
    .coin-header-widget .coin-amount {
        font-weight: 700;
        color: white;
        font-size: 0.85rem;
        min-width: 20px;
        text-shadow: 0 1px 2px rgba(0,0,0,0.15);
    }
    .coin-header-widget .coin-buy-btn {
        background: rgba(255,255,255,0.3);
        border: 1.5px solid rgba(255,255,255,0.6);
        color: white;
        padding: 2px 8px;
        border-radius: 10px;
        font-size: 0.7rem;
        font-weight: 700;
        cursor: pointer;
    }
    /* Profile View Styles */
    .profile-header {
        text-align: center;
        padding: 40px 20px;
        background: white;
        border-bottom: 1px solid #f1f5f9;
        margin-bottom: 25px;
    }
    .profile-photo-container {
        position: relative;
        width: 120px;
        height: 120px;
        margin: 0 auto 20px auto;
        border-radius: 50%;
        border: 4px solid var(--accent-green);
        padding: 5px;
    }
    .profile-photo {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        object-fit: cover;
    }
    .photo-edit-btn {
        position: absolute;
        bottom: 5px;
        right: 5px;
        background: var(--secondary);
        color: white;
        width: 35px;
        height: 35px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 2px solid white;
        cursor: pointer;
        box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    }
    .profile-name-large {
        font-family: 'Playfair Display';
        font-size: 1.8rem;
        margin-bottom: 5px;
        color: var(--primary);
    }
    .profile-email {
        color: var(--text-muted);
        font-size: 0.95rem;
    }
    .profile-details-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 15px;
        padding: 0 25px;
        margin-bottom: 30px;
    }
    .detail-item {
        background: white;
        padding: 15px;
        border-radius: 12px;
        border: 1px solid #f1f5f9;
        text-align: center;
    }
    .detail-label {
        font-size: 0.75rem;
        color: var(--text-muted);
        text-transform: uppercase;
        letter-spacing: 1px;
        margin-bottom: 5px;
    }
    .detail-val {
        font-weight: 700;
        color: var(--primary);
        font-size: 1.1rem;
    }
    .connected-apps-list {
        padding: 0 25px;
    }
    .app-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: white;
        padding: 15px 20px;
        border-radius: 16px;
        margin-bottom: 15px;
        border: 1px solid #f1f5f9;
    }
    .app-info {
        display: flex;
        align-items: center;
        gap: 15px;
    }
    .app-icon {
        width: 40px;
        height: 40px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.5rem;
    }
    .app-btn {
        padding: 8px 20px;
        border-radius: 50px;
        border: 1px solid var(--primary);
        background: transparent;
        color: var(--primary);
        font-size: 0.85rem;
        font-weight: 600;
        cursor: pointer;
    }
    .app-btn.connected {
        background: #f0fdf4;
        color: #166534;
        border-color: #166534;
    }

    .profile-icon { 
        width: 35px; 
        height: 35px; 
        background: var(--accent-green); 
        border-radius: 50%; 
        display: flex; 
        align-items: center; 
        justify-content: center; 
        font-weight: bold; 
        color: var(--primary); 
        cursor: pointer;
        transition: transform 0.1s;
    }
    .profile-icon:active { transform: scale(0.95); }

    /* Week Sub-Navigation (Pills) */
    .week-scroller { 
        display: flex; 
        gap: 10px; 
        overflow-x: auto; 
        padding: 15px 25px; 
        background: var(--bg);
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .week-scroller::-webkit-scrollbar { display: none; }

    .pill-btn {
        padding: 8px 16px;
        background: white;
        border: 1px solid rgba(0,0,0,0.08);
        border-radius: 20px;
        color: var(--text-muted);
        white-space: nowrap;
        font-size: 0.9rem;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s;
    }
    .pill-btn.active {
        background: var(--secondary); /* Gold */
        color: white;
        border-color: var(--secondary);
        box-shadow: 0 4px 10px rgba(212, 175, 55, 0.3);
    }

    /* Dashboard Styles */
    .dashboard-welcome {
        padding: 0;
        background: transparent;
        color: white;
        margin-bottom: 15px;
    }
    .dashboard-welcome h1, 
    .dashboard-welcome .user-name,
    .dashboard-welcome .stat-val,
    .dashboard-welcome h2,
    .dashboard-welcome h3,
    .dashboard-welcome h4,
    .dashboard-welcome p {
        color: white !important;
    }
    .welcome-text { opacity: 0.9; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 1px; color: white; }
    .user-name { font-family: 'Playfair Display'; font-size: 2rem; margin: 5px 0 10px 0; }
    
    .stats-row { display: flex; gap: 15px; margin-top: 20px; }
    .stat-card {
        background: rgba(255,255,255,0.15);
        backdrop-filter: blur(5px);
        padding: 15px;
        border-radius: 12px;
        flex: 1;
        text-align: center;
    }
    .stat-val { font-size: 1.5rem; font-weight: 700; display: block; }
    .stat-label { font-size: 0.75rem; opacity: 0.9; }

    /* Hero Level Display */
    .level-hero-container {
        display: flex;
        align-items: center;
        gap: 16px;
        margin-top: 8px;
        padding-bottom: 8px;
    }

    .level-hero-badge {
        position: relative;
        width: 72px;
        height: 72px;
        flex-shrink: 0;
    }

    .level-ring-svg {
        position: absolute;
        width: 100%;
        height: 100%;
        transform: rotate(-90deg);
    }

    .level-ring-bg {
        fill: none;
        stroke: rgba(255, 255, 255, 0.2);
        stroke-width: 6;
    }

    .level-ring-progress {
        fill: none;
        stroke: #FFD700;
        stroke-width: 6;
        stroke-linecap: round;
        transition: stroke-dashoffset 0.6s ease-out;
    }

    .level-hero-inner {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 56px;
        height: 56px;
        border-radius: 50%;
        background: rgba(0, 0, 0, 0.35);
        backdrop-filter: blur(10px);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .level-hero-number {
        font-size: 1.75rem;
        font-weight: 900;
        color: #FFD700;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    }

    .level-hero-info {
        flex: 1;
        min-width: 0;
    }

    .level-hero-title {
        display: block;
        font-size: 1.1rem;
        font-weight: 700;
        margin-bottom: 6px;
        color: #FFD700;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    }

    .level-hero-progress {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .level-hero-progress-bar {
        background: rgba(255, 255, 255, 0.2);
        border-radius: 8px;
        height: 8px;
        overflow: hidden;
    }

    .level-hero-progress-fill {
        background: linear-gradient(90deg, var(--secondary) 0%, #FFD700 100%);
        height: 100%;
        border-radius: 8px;
        transition: width 0.5s ease-out;
    }

    .level-hero-progress-text {
        font-size: 0.75rem;
        opacity: 0.85;
    }

    .streak-hero-badge {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background: rgba(255, 255, 255, 0.15);
        border-radius: 16px;
        padding: 10px 14px;
        backdrop-filter: blur(10px);
        min-width: 52px;
    }

    .streak-hero-fire {
        font-size: 1.25rem;
        line-height: 1;
    }

    .streak-hero-number {
        font-size: 1.1rem;
        font-weight: 800;
        margin-top: 2px;
    }

    /* Level up animation */
    @keyframes levelUpPulse {
        0% { transform: scale(1); }
        50% { transform: scale(1.15); }
        100% { transform: scale(1); }
    }

    .level-up-animation {
        animation: levelUpPulse 0.6s ease-out;
    }

    h1, h2, h3, h4 { 
        font-family: 'Playfair Display', serif; 
        color: var(--primary);
        margin-top: 0;
    }

    h1 { font-size: 2.5rem; letter-spacing: -0.5px; font-weight: 700; }
    h2 { font-size: 1.75rem; color: var(--primary-light); }
    
    /* Layout Container */
    .container { 
        max-width: 100%; 
        margin: 0 auto; 
        min-height: 100vh; 
        background: var(--bg); 
        display: flex; 
        flex-direction: column; 
        position: relative;
    }
    
    /* Sticky Navigation */
    .top-nav { 
        background: rgba(255, 255, 255, 0.95); 
        backdrop-filter: blur(10px);
        position: sticky; 
        top: 0; 
        z-index: 1000; 
        border-bottom: 1px solid rgba(0,0,0,0.05); 
        padding: 15px 30px; 
        display: flex; 
        gap: 12px; 
        overflow-x: auto; 
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none; /* Hide scrollbar Firefox */
        box-shadow: var(--nav-shadow);
    }
    .top-nav::-webkit-scrollbar { display: none; } /* Hide scrollbar Chrome/Safari */

    .nav-btn { 
        padding: 10px 24px; 
        border-radius: 50px; 
        border: 1px solid transparent; 
        background: transparent; 
        color: var(--text-muted); 
        font-weight: 500; 
        cursor: pointer; 
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); 
        font-family: 'Inter', sans-serif; 
        font-size: 0.95rem; 
        white-space: nowrap;
    }
    
    .nav-btn:hover { color: var(--primary); background: var(--accent-green); }
    
    .nav-btn.active { 
        background: var(--primary); 
        color: white; 
        box-shadow: 0 4px 12px rgba(30, 58, 95, 0.25); 
        transform: translateY(-1px);
    }

    /* Content Area */
    .view-section { 
        display: none; 
        padding: 40px 30px; 
        animation: fadeIn 0.4s ease-out; 
    }
    .view-section.active { display: block; }
    
    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(10px); }
        to { opacity: 1; transform: translateY(0); }
    }
    @keyframes pulse {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.4; }
    }

    /* Hero Section (Cover) */
    .hero-card {
        text-align: center;
        padding: 100px 40px;
        background: linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)), url('/assets/hero_image.webp');
        background-size: cover;
        background-position: center;
        border-radius: var(--border-radius);
        margin-bottom: 40px;
        border: 1px solid rgba(0,0,0,0.03);
        box-shadow: 0 20px 40px rgba(0,0,0,0.1);
    }
    .hero-title {
        font-size: 3rem;
        color: var(--primary);
        line-height: 1.1;
        margin-bottom: 15px;
    }
    .hero-subtitle {
        font-size: 1.25rem;
        color: var(--secondary);
        font-family: 'Inter', sans-serif;
        text-transform: uppercase;
        letter-spacing: 2px;
        font-weight: 600;
        margin-bottom: 30px;
    }

    /* Sub Tabs (Week Days) */
    .sub-nav {
        display: flex;
        gap: 4px;
        margin-bottom: 30px;
        flex-wrap: nowrap;
        justify-content: center;
        padding-bottom: 20px;
        border-bottom: 1px solid rgba(0,0,0,0.05);
    }
    .sub-btn {
        padding: 5px 10px;
        border: none;
        background: transparent;
        border-radius: 6px;
        font-size: 0.85rem;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s;
        color: var(--text-muted);
        white-space: nowrap;
    }
    
    .sub-btn:hover { color: var(--primary); }
    
    .sub-btn.active { 
        background: transparent; 
        color: var(--primary); 
        border: none;
        font-weight: 700;
        text-decoration: underline;
        text-underline-offset: 4px;
    }
    
    .day-view { display: none; }
    .day-view.active { display: block; }

    /* Meal Cards */
    .card { 
        background: var(--surface); 
        border-radius: var(--border-radius); 
        box-shadow: var(--card-shadow); 
        margin-bottom: 24px; 
        border: 1px solid rgba(0,0,0,0.04); 
        overflow: hidden; 
        transition: transform 0.2s, box-shadow 0.2s;
    }
    .card:hover {
        transform: translateY(-2px);
        box-shadow: 0 15px 35px -5px rgba(0, 0, 0, 0.08);
    }
    
    .card-header { 
        padding: 25px; 
        cursor: pointer; 
        display: flex; 
        justify-content: space-between; 
        align-items: center; 
        background: white;
    }
    
    .meal-icon { font-size: 1.8rem; margin-right: 20px; filter: grayscale(0.2); }
    
    .meta { 
        font-size: 0.75rem; 
        color: var(--secondary); 
        font-weight: 700; 
        text-transform: uppercase; 
        letter-spacing: 1px; 
        margin-bottom: 6px; 
    }
    
    .meal-title {
        font-family: 'Playfair Display', serif;
        font-weight: 600;
        font-size: 1.25rem;
        color: var(--primary);
        line-height: 1.3;
    }

    .expand-icon {
        font-size: 1.5rem;
        color: var(--text-muted);
        transition: transform 0.3s ease;
        font-weight: 300;
    }
    .card.open .expand-icon { transform: rotate(45deg); }

    .card-body { 
        padding: 0 30px; 
        max-height: 0; 
        overflow: hidden; 
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); 
        background: #fdfdfd; 
        border-top: 1px solid rgba(0,0,0,0.03); 
        opacity: 0;
    }
    .card.open .card-body { 
        max-height: 2000px; /* Safe large number */
        padding: 30px; 
        opacity: 1;
    }

    /* Content Styling */
    .nutrition-pill {
        display: inline-block;
        padding: 6px 12px;
        background: var(--accent-green);
        color: #2d4a3e;
        border-radius: 6px;
        font-size: 0.85rem;
        font-weight: 500;
        margin-bottom: 20px;
    }

    h4 { 
        font-size: 0.95rem; 
        text-transform: uppercase; 
        letter-spacing: 0.5px; 
        color: var(--primary-light); 
        margin-bottom: 12px; 
        border-bottom: 2px solid rgba(0,0,0,0.05);
        padding-bottom: 6px;
        display: inline-block;
    }

    ul { padding-left: 20px; color: #4a5568; margin-bottom: 25px; }
    li { margin-bottom: 8px; }
    p { color: #4a5568; }

    /* Tables */
    table { width: 100%; border-collapse: separate; border-spacing: 0; margin: 20px 0; font-size: 0.95rem; border: 1px solid #eee; border-radius: 12px; overflow: hidden; }
    th { background: var(--primary); color: white; padding: 15px; text-align: left; font-weight: 500; font-family: 'Playfair Display'; letter-spacing: 0.5px; }
    td { border-bottom: 1px solid #eee; padding: 12px 15px; color: #444; }
    tr:last-child td { border-bottom: none; }
    tr:nth-child(even) { background: #fcfcfc; }

    /* Mobile Tweaks */
    @media (max-width: 600px) {
        .top-nav { padding: 15px; gap: 8px; }
        .nav-btn { padding: 8px 16px; font-size: 0.85rem; }
        .hero-title { font-size: 2.2rem; }
        .view-section { padding: 25px 15px; }
        .card-body { padding: 0 20px; }
        .card.open .card-body { padding: 20px; }

        /* Responsive tamagotchi widget - scale down on smaller phones */
        #tamagotchi-widget-container {
            height: 340px !important;
        }
        #tamagotchi-stats-bar {
            padding: 12px 14px !important;
        }
        #tamagotchi-stats-bar #tamagotchi-level {
            font-size: 1.3rem !important;
        }
        #tamagotchi-stats-bar #tamagotchi-xp-text {
            font-size: 0.6rem !important;
        }
        #tamagotchi-stats-bar #tamagotchi-rank {
            font-size: 0.65rem !important;
        }

        /* Reduce header padding on mobile */
        .app-header {
            padding: 10px 14px !important;
            padding-top: calc(10px + env(safe-area-inset-top, 0px)) !important;
        }
        /* Bottom nav compact on smaller screens */
        :root {
            --nav-height: 72px;
        }
        .bottom-nav {
            height: calc(var(--nav-height) + env(safe-area-inset-bottom, 0px));
            padding: 5px max(3px, env(safe-area-inset-right, 0px)) calc(5px + env(safe-area-inset-bottom, 0px)) max(3px, env(safe-area-inset-left, 0px));
        }
        .nav-item {
            font-size: 0.66rem;
            gap: 2px;
            padding: 0 1px;
        }
        .nav-item svg {
            width: 22px;
            height: 22px;
        }
        .nav-item .nav-icon {
            font-size: 1.2rem;
        }
        body {
            padding-bottom: calc(var(--nav-height) + env(safe-area-inset-bottom, 0px) + 16px);
        }
    }
    @media (max-width: 380px) {
        /* Very small phones (iPhone SE, older Androids) */
        #tamagotchi-widget-container {
            height: 280px !important;
        }
        #tamagotchi-stats-bar {
            padding: 10px 12px !important;
        }
        :root {
            --nav-height: 66px;
        }
        .bottom-nav {
            height: calc(var(--nav-height) + env(safe-area-inset-bottom, 0px));
        }
        .nav-item {
            font-size: 0.61rem;
            gap: 2px;
        }
        .nav-item svg {
            width: 20px;
            height: 20px;
        }
        body {
            padding-bottom: calc(var(--nav-height) + env(safe-area-inset-bottom, 0px) + 12px);
        }
    }
    @media (max-width: 340px) {
        /* Ultra-narrow phones keep the touch targets and switch to icon-only. */
        :root {
            --nav-height: 58px;
        }
        .nav-item {
            gap: 0;
        }
        .nav-item span {
            display: none;
        }
    }
    /* Image Modal */
    .image-modal-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.9);
        z-index: 2000;
        display: none;
        justify-content: center;
        align-items: center;
        opacity: 0;
        transition: opacity 0.3s ease;
        padding: 20px;
        backdrop-filter: blur(5px);
    }
    .image-modal-overlay.active {
        display: flex;
        opacity: 1;
    }
    .image-modal-content {
        max-width: 90vw;
        max-height: 90vh;
        border-radius: 8px;
        box-shadow: 0 20px 50px rgba(0,0,0,0.5);
        object-fit: contain;
        transform: scale(0.95);
        transition: transform 0.3s ease;
    }
    .image-modal-overlay.active .image-modal-content {
        transform: scale(1);
    }
    .close-modal-btn {
        position: absolute;
        top: 20px;
        right: 30px;
        color: white;
        font-size: 2.5rem;
        cursor: pointer;
        z-index: 2001;
        background: rgba(255, 255, 255, 0.1);
        width: 50px;
        height: 50px;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: background 0.2s, transform 0.2s;
        line-height: 0;
        padding-bottom: 5px;
    }
    .close-modal-btn:hover {
        background: rgba(255, 255, 255, 0.2);
        transform: rotate(90deg);
    }
    
    /* Meal Image Cursor */
    .card-body img {
        cursor: zoom-in;
        transition: opacity 0.2s;
    }
    .card-body img:hover {
        opacity: 0.9;
    }
    /* Shopping List Improvements */
    .shopping-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 30px;
        margin-top: 10px;
    }
    .shopping-category h4 {
        color: var(--primary);
        border-bottom: 2px solid var(--accent-green);
        padding-bottom: 8px;
        margin-bottom: 15px;
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 1rem;
        text-transform: uppercase;
        letter-spacing: 1px;
    }
    .check-list {
        list-style: none; /* Remove default bullets */
        padding: 0;
        margin: 0;
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .check-list li {
        position: relative;
        padding-left: 35px; /* Space for checkbox */
        line-height: 1.4;
        color: var(--text-main);
        cursor: pointer;
        transition: color 0.2s;
        display: flex; /* alignment */
        align-items: center;
    }
    .check-list li:hover {
        color: var(--primary);
    }
    /* Custom Checkbox */
    .check-list li::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 18px;
        height: 18px;
        border: 2px solid #cbd5e0;
        border-radius: 5px;
        transition: all 0.2s;
        background: white;
    }
    .check-list li.checked {
        text-decoration: line-through;
        color: var(--text-muted);
        opacity: 0.7;
    }
    .check-list li.checked::before {
        background-color: var(--secondary); /* Gold background */
        border-color: var(--secondary);
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white' width='14px' height='14px'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: center;
    }
    
    /* Sleep Guide Styles */
    .section-title {
        display: flex;
        align-items: center;
        gap: 15px;
        margin-bottom: 30px;
        margin-top: 50px;
    }
    .section-number {
        background: var(--secondary);
        color: white;
        width: 35px;
        height: 35px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: 'Playfair Display', serif;
        font-weight: 700;
        font-size: 1.2rem;
    }
    .timeline-item {
        display: flex;
        gap: 20px;
        margin-bottom: 30px;
        position: relative;
    }
    .timeline-item:last-child { margin-bottom: 0; }
    .timeline-time {
        min-width: 100px;
        text-align: right;
        font-weight: 600;
        color: var(--primary-light);
        padding-top: 2px;
    }
    .timeline-content {
        padding-bottom: 30px;
        border-left: 2px solid var(--accent-green);
        padding-left: 35px; /* More space for icon */
        position: relative;
    }
    .timeline-item:last-child .timeline-content { border-left: 2px solid transparent; }
    
    /* Icon Dot on Timeline */
    .timeline-content::before {
        content: '';
        position: absolute;
        left: -20px; /* Centered on line */
        top: 0;
        width: 40px;
        height: 40px;
        background: white;
        border: 2px solid var(--secondary);
        border-radius: 50%;
        z-index: 1;
        box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    }
    /* Simple CSS Icons using Emojis or content chars for simplicity/reliability without SVG bloat here */
    /* Simple CSS Icons using Emojis or content chars for simplicity/reliability without SVG bloat here */
    .timeline-item:nth-child(1) .timeline-content::after { content: '🌙'; position: absolute; left: -14px; top: 6px; font-size: 1.2rem; z-index: 2; }
    .timeline-item:nth-child(2) .timeline-content::after { content: '🍵'; position: absolute; left: -14px; top: 6px; font-size: 1.2rem; z-index: 2; }
    .timeline-item:nth-child(3) .timeline-content::after { content: '🧘'; position: absolute; left: -14px; top: 6px; font-size: 1.2rem; z-index: 2; }
    .timeline-item:nth-child(4) .timeline-content::after { content: '📵'; position: absolute; left: -14px; top: 6px; font-size: 1.2rem; z-index: 2; }
    .timeline-item:nth-child(5) .timeline-content::after { content: '🛌'; position: absolute; left: -14px; top: 6px; font-size: 1.2rem; z-index: 2; }

    /* Sleep Hero */
    .sleep-hero {
        background: linear-gradient(135deg, #1a2a44 0%, #2d4a6d 100%);
        color: white;
        padding: 60px 40px;
        border-radius: 16px;
        text-align: center;
        margin-bottom: 50px;
        box-shadow: 0 10px 40px rgba(30, 58, 95, 0.2);
    }
    
    .recipe-card {
        background: #fffafa;
        border: 1px solid #ffecec;
        border-radius: 16px;
        padding: 30px;
        margin-bottom: 30px;
        display: flex;
        gap: 30px;
        align-items: center;
    }
    .rescue-card {
        background: #fdf6f6;
        border-left: 4px solid #e53e3e;
        padding: 25px;
        border-radius: 8px;
        margin-top: 20px;
    }
    .glass-effect {
        background: rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(10px);
        padding: 20px;
        border-radius: 12px;
        margin-top: 20px;
        border: 1px solid rgba(255,255,255,0.1);
    }
    @media (max-width: 700px) {
        .recipe-card { flex-direction: column; text-align: center; }
        .timeline-content::before { left: -15px; width: 30px; height: 30px; }
        .timeline-item:nth-child(n) .timeline-content::after { font-size: 1rem; left: -8px; top: 4px; }
        .timeline-content { padding-left: 25px; }
    }

    /* Today's Meals Redesign */
    .today-menu-header {
        margin-bottom: 30px;
        padding-bottom: 20px;
        border-bottom: 1px solid rgba(0,0,0,0.05);
    }
    .today-menu-header h2 {
        font-size: 2rem;
        margin-bottom: 5px;
    }
    .today-menu-header p {
        color: var(--text-muted);
        font-weight: 500;
        letter-spacing: 0.5px;
        text-transform: uppercase;
        font-size: 0.8rem;
    }
    #today .card {
        border-radius: 20px;
        margin-bottom: 20px;
        border: 1px solid rgba(0,0,0,0.03);
        box-shadow: 0 10px 25px rgba(0,0,0,0.03);
    }
    #today .card-header {
        padding: 20px 25px;
    }
    #today .meal-title {
        font-size: 1.15rem;
    }
    /* ===== Native Permissions Modal ===== */
    /* Onboarding Modal Styles */
    .onboarding-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(4, 106, 56, 0.6); /* Primary with opacity */
        backdrop-filter: blur(8px);
        z-index: 9999;
        display: none;
        justify-content: center;
        align-items: center;
        padding: 20px;
        opacity: 0;
        transition: opacity 0.4s ease;
    }
    .onboarding-overlay.active {
        display: flex;
        opacity: 1;
    }
    .onboarding-modal {
        background: white;
        width: 100%;
        max-width: 450px;
        border-radius: 20px;
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
        overflow: hidden;
        animation: slideUp 0.5s ease-out;
    }
    @keyframes slideUp {
        from { transform: translateY(20px); opacity: 0; }
        to { transform: translateY(0); opacity: 1; }
    }
    @keyframes slideUpModal {
        from { transform: translateY(100%); }
        to { transform: translateY(0); }
    }
    @keyframes slideDown {
        from { transform: translate(-50%, -20px); opacity: 0; }
        to { transform: translate(-50%, 0); opacity: 1; }
    }
    @keyframes fadeOut {
        from { opacity: 1; }
        to { opacity: 0; }
    }
    .onboarding-header {
        background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
        padding: 30px;
        text-align: center;
        color: white;
    }
    .onboarding-content {
        padding: 30px;
    }
    .onboarding-step {
        display: flex;
        gap: 15px;
        margin-bottom: 20px;
        align-items: flex-start;
    }
    .step-icon {
        font-size: 1.5rem;
        background: var(--accent-green);
        width: 45px;
        height: 45px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }
    .step-text h4 {
        margin: 0 0 5px 0;
        color: var(--primary);
        font-size: 1rem;
        border: none;
    }
    .step-text p {
        margin: 0;
        font-size: 0.9rem;
        color: var(--text-muted);
        line-height: 1.4;
    }
    .onboarding-btn {
        width: 100%;
        padding: 16px;
        background: var(--secondary);
        color: white;
        border: none;
        border-radius: 12px;
        font-size: 1rem;
        font-weight: 700;
        letter-spacing: 0.5px;
        cursor: pointer;
        transition: transform 0.2s;
        margin-top: 10px;
    }
    .onboarding-btn:hover {
        transform: translateY(-2px);
        background: #bfa64d; /* Darker gold */
    }

    /* ========================================== */
    /* MEAL PLAN STORE STYLES */
    /* ========================================== */

    .meal-store-container {
        padding: 20px;
    }

    .meal-store-header {
        text-align: center;
        margin-bottom: 30px;
    }

    .meal-store-header h2 {
        font-family: 'Playfair Display', serif;
        font-size: 1.8rem;
        color: var(--primary);
        margin-bottom: 10px;
    }

    .meal-store-header p {
        color: var(--text-muted);
        font-size: 1rem;
        max-width: 400px;
        margin: 0 auto;
    }

    .meal-plan-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 20px;
        margin-bottom: 30px;
    }

    .meal-plan-card {
        background: white;
        border-radius: 16px;
        overflow: hidden;
        box-shadow: 0 4px 15px rgba(0,0,0,0.08);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        cursor: pointer;
        position: relative;
    }

    .meal-plan-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 25px rgba(0,0,0,0.12);
    }

    .meal-plan-card.featured {
        border: 2px solid var(--secondary);
    }

    .meal-plan-card .featured-badge {
        position: absolute;
        top: 12px;
        right: 12px;
        background: var(--secondary);
        color: white;
        padding: 4px 10px;
        border-radius: 20px;
        font-size: 0.7rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .meal-plan-thumbnail {
        width: 100%;
        height: 160px;
        object-fit: cover;
        background: linear-gradient(135deg, var(--accent-green) 0%, var(--primary-light) 100%);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .meal-plan-thumbnail img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .meal-plan-thumbnail .plan-icon {
        font-size: 4rem;
    }

    .meal-plan-info {
        padding: 20px;
    }

    .meal-plan-info h3 {
        font-family: 'Playfair Display', serif;
        font-size: 1.3rem;
        color: var(--primary);
        margin-bottom: 8px;
    }

    .meal-plan-info .tagline {
        color: var(--text-muted);
        font-size: 0.9rem;
        margin-bottom: 12px;
        line-height: 1.4;
    }

    .meal-plan-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        margin-bottom: 15px;
    }

    .meal-plan-tag {
        background: var(--accent-green);
        color: var(--primary);
        padding: 4px 10px;
        border-radius: 20px;
        font-size: 0.75rem;
        font-weight: 500;
    }

    .meal-plan-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-top: 15px;
        border-top: 1px solid rgba(0,0,0,0.05);
    }

    .meal-plan-price {
        font-size: 1.4rem;
        font-weight: 700;
        color: var(--primary);
    }

    .meal-plan-price span {
        font-size: 0.85rem;
        font-weight: 400;
        color: var(--text-muted);
    }

    .meal-plan-cta {
        background: var(--secondary);
        color: white;
        border: none;
        padding: 10px 20px;
        border-radius: 25px;
        font-weight: 600;
        font-size: 0.9rem;
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .meal-plan-cta:hover {
        background: #bfa64d;
        transform: scale(1.02);
    }

    /* Diet variant pills for store */
    .diet-variants {
        display: flex;
        gap: 6px;
        margin-top: 10px;
    }

    .diet-variant-pill {
        font-size: 0.65rem;
        padding: 3px 8px;
        border-radius: 10px;
        background: rgba(123, 168, 131, 0.15);
        color: var(--primary);
        font-weight: 500;
    }

    /* Quiz user banner */
    .quiz-meal-plan-banner {
        background: linear-gradient(135deg, var(--accent-green) 0%, rgba(123, 168, 131, 0.3) 100%);
        border-radius: 16px;
        padding: 20px;
        margin: 20px;
        display: flex;
        align-items: center;
        gap: 15px;
    }

    .quiz-meal-plan-banner .banner-icon {
        font-size: 2.5rem;
    }

    .quiz-meal-plan-banner .banner-content h3 {
        font-family: 'Playfair Display', serif;
        color: var(--primary);
        margin-bottom: 5px;
    }

    .quiz-meal-plan-banner .banner-content p {
        color: var(--text-muted);
        font-size: 0.9rem;
        margin: 0;
    }

    /* ========================================== */
    /* PREFERENCE WIZARD STYLES */
    /* ========================================== */

    .pref-wizard-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.6);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 10000;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
    }

    .pref-wizard-overlay.active {
        opacity: 1;
        visibility: visible;
    }

    .pref-wizard-modal {
        background: white;
        border-radius: 20px;
        width: 90%;
        max-width: 450px;
        max-height: 85vh;
        overflow-y: auto;
        transform: translateY(20px);
        transition: transform 0.3s ease;
    }

    .pref-wizard-overlay.active .pref-wizard-modal {
        transform: translateY(0);
    }

    .pref-wizard-header {
        background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
        color: white;
        padding: 25px;
        text-align: center;
        border-radius: 20px 20px 0 0;
    }

    .pref-wizard-header h2 {
        font-family: 'Playfair Display', serif;
        font-size: 1.5rem;
        margin-bottom: 5px;
    }

    .pref-wizard-header p {
        font-size: 0.9rem;
        opacity: 0.9;
    }

    .pref-wizard-progress {
        display: flex;
        justify-content: center;
        gap: 8px;
        margin-top: 15px;
    }

    .pref-wizard-progress .step-dot {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.3);
        transition: all 0.3s ease;
    }

    .pref-wizard-progress .step-dot.active {
        background: white;
        transform: scale(1.2);
    }

    .pref-wizard-progress .step-dot.completed {
        background: var(--secondary);
    }

    .pref-wizard-body {
        padding: 25px;
    }

    .pref-wizard-step {
        display: none;
    }

    .pref-wizard-step.active {
        display: block;
        animation: fadeInUp 0.3s ease;
    }

    @keyframes fadeInUp {
        from { opacity: 0; transform: translateY(10px); }
        to { opacity: 1; transform: translateY(0); }
    }

    .pref-wizard-step h3 {
        font-family: 'Playfair Display', serif;
        color: var(--primary);
        font-size: 1.2rem;
        margin-bottom: 20px;
        text-align: center;
    }

    .pref-option-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .pref-option {
        background: #f8f9fa;
        border: 2px solid transparent;
        border-radius: 12px;
        padding: 20px 15px;
        text-align: center;
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .pref-option:hover {
        border-color: var(--primary-light);
        background: var(--accent-green);
    }

    .pref-option.selected {
        border-color: var(--primary);
        background: var(--accent-green);
    }

    .pref-option .option-icon {
        font-size: 2rem;
        margin-bottom: 8px;
    }

    .pref-option .option-label {
        font-weight: 600;
        color: var(--primary);
        font-size: 0.95rem;
    }

    .pref-option .option-desc {
        font-size: 0.75rem;
        color: var(--text-muted);
        margin-top: 4px;
    }

    .pref-checkbox-list {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }

    .pref-checkbox {
        background: #f8f9fa;
        border: 2px solid transparent;
        border-radius: 25px;
        padding: 10px 18px;
        cursor: pointer;
        transition: all 0.2s ease;
        font-size: 0.9rem;
    }

    .pref-checkbox:hover {
        border-color: var(--primary-light);
    }

    .pref-checkbox.selected {
        background: var(--accent-green);
        border-color: var(--primary);
        font-weight: 600;
    }

    .pref-wizard-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20px 25px;
        border-top: 1px solid #eee;
    }

    .pref-wizard-btn {
        padding: 12px 30px;
        border-radius: 25px;
        font-weight: 600;
        font-size: 0.95rem;
        cursor: pointer;
        transition: all 0.2s ease;
        border: none;
    }

    .pref-wizard-btn.secondary {
        background: #f0f0f0;
        color: var(--text-muted);
    }

    .pref-wizard-btn.secondary:hover {
        background: #e0e0e0;
    }

    .pref-wizard-btn.primary {
        background: var(--secondary);
        color: white;
    }

    .pref-wizard-btn.primary:hover {
        background: #bfa64d;
    }

    .pref-wizard-btn.primary:disabled {
        background: #ccc;
        cursor: not-allowed;
    }

    /* ========================================== */
    /* CALORIE TRACKER STYLES */
    /* ========================================== */

    /* Calorie Widget Card (Dashboard) */
    .calorie-widget-card {
        background: white;
        border-radius: 16px;
        padding: 20px;
        margin-bottom: 25px;
        box-sizing: border-box;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    }

    .calorie-widget-header {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
        margin-bottom: 20px;
    }

    .calorie-widget-title h3 {
        margin: 0;
        font-size: 1.1rem;
        color: var(--text-main);
    }

    .calorie-widget-meta {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        margin-top: 6px;
        color: var(--text-muted);
        font-size: 0.78rem;
        font-weight: 600;
    }

    .calorie-widget-meta strong {
        color: var(--primary);
        font-weight: 800;
    }

    .nutrition-period-date {
        margin-top: 4px;
        color: var(--text-muted);
        font-size: 0.72rem;
        font-weight: 700;
        line-height: 1.25;
    }

    .nutrition-period-remaining {
        margin-top: 4px;
        color: var(--primary);
        font-size: 0.82rem;
        font-weight: 800;
        line-height: 1.25;
    }

    .nutrition-range-toggle {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
        padding: 4px;
        background: #f3f6f1;
        border: 1px solid rgba(123, 168, 131, 0.18);
        border-radius: 12px;
    }

    .nutrition-range-toggle button {
        min-width: 0;
        height: 34px;
        border: none;
        border-radius: 9px;
        background: transparent;
        color: var(--text-muted);
        font-size: 0.78rem;
        font-weight: 800;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
    }

    .nutrition-range-toggle button.active {
        background: white;
        color: var(--primary);
        box-shadow: 0 3px 10px rgba(47, 95, 58, 0.12);
    }

    .nutrition-range-toggle-wide {
        margin-bottom: 4px;
    }

    .nutrition-action-buttons {
        display: grid;
        grid-template-columns: repeat(7, minmax(0, 1fr));
        gap: clamp(3px, 1.6vw, 8px);
        justify-items: center;
        align-items: center;
        width: 100%;
        min-width: 0;
    }

    .camera-btn-widget {
        background: var(--primary);
        color: white;
        border: none;
        border-radius: 50%;
        width: 100%;
        max-width: 44px;
        height: auto;
        aspect-ratio: 1 / 1;
        min-width: 0;
        padding: 0;
        flex-shrink: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.2s ease;
        box-shadow: 0 2px 8px rgba(123, 168, 131, 0.3);
    }

    .camera-btn-widget:hover {
        background: var(--primary-light);
        transform: scale(1.05);
        box-shadow: 0 4px 12px rgba(123, 168, 131, 0.4);
    }

    .camera-btn-widget:active {
        transform: scale(0.95);
    }

    @media (max-width: 400px) {
        .nutrition-action-buttons {
            gap: 4px;
        }

        .camera-btn-widget {
            max-width: 34px;
        }

        .camera-btn-widget svg {
            width: 17px;
            height: 17px;
        }
    }

    @media (max-width: 350px) {
        .nutrition-action-buttons {
            gap: 2px;
        }

        .camera-btn-widget {
            max-width: 30px;
        }

        .camera-btn-widget svg {
            width: 15px;
            height: 15px;
        }

        .calorie-widget-title h3 {
            font-size: 0.95rem;
        }

        .calorie-widget-meta {
            font-size: 0.7rem;
            gap: 6px;
        }

        .nutrition-range-toggle {
            gap: 4px;
            padding: 3px;
        }

        .nutrition-range-toggle button {
            height: 30px;
            font-size: 0.7rem;
        }
    }

    /* Calorie Progress */
    .calorie-progress-main {
        margin-bottom: 20px;
    }

    .calorie-numbers {
        display: flex;
        align-items: baseline;
        justify-content: center;
        margin-bottom: 12px;
        gap: 4px;
    }

    .calorie-current {
        font-size: 2rem;
        font-weight: 700;
        color: var(--primary);
    }

    .calorie-separator {
        font-size: 1.5rem;
        color: var(--text-muted);
        margin: 0 4px;
    }

    .calorie-goal {
        font-size: 1.5rem;
        font-weight: 600;
        color: var(--text-muted);
    }

    .calorie-unit {
        font-size: 0.9rem;
        color: var(--text-muted);
        margin-left: 4px;
    }

    /* Progress Bars */
    .progress-bar {
        height: 12px;
        background: #f0f0f0;
        border-radius: 6px;
        overflow: hidden;
        position: relative;
    }

    .progress-fill {
        height: 100%;
        background: linear-gradient(90deg, var(--primary), var(--primary-light));
        border-radius: 6px;
        transition: width 0.5s ease;
    }

    .progress-bar-small {
        height: 6px;
        background: #f0f0f0;
        border-radius: 3px;
        overflow: hidden;
        margin-top: 6px;
    }

    .progress-fill-protein {
        height: 100%;
        background: linear-gradient(90deg, var(--primary), var(--primary-light));
        border-radius: 3px;
        transition: width 0.5s ease;
    }

    .progress-fill-carbs {
        height: 100%;
        background: linear-gradient(90deg, var(--secondary), var(--secondary-light));
        border-radius: 3px;
        transition: width 0.5s ease;
    }

    .progress-fill-fat {
        height: 100%;
        background: linear-gradient(90deg, #d4a574, #e6c29a);
        border-radius: 3px;
        transition: width 0.5s ease;
    }

    .progress-fill-fiber {
        height: 100%;
        background: linear-gradient(90deg, #9b8dab, #b5a9c2);
        border-radius: 3px;
        transition: width 0.5s ease;
    }

    /* Macros Grid */
    .macros-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }

    .macro-item {
        text-align: center;
    }

    .macro-label {
        font-size: 0.75rem;
        color: var(--text-muted);
        margin-bottom: 4px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0;
    }

    .macro-value {
        font-size: 0.85rem;
        color: var(--text-main);
        font-weight: 600;
        margin-bottom: 4px;
    }

    /* Widget Footer */
    .calorie-widget-footer {
        margin-top: 16px;
        text-align: center;
    }

    .view-details-btn {
        background: none;
        border: none;
        color: var(--primary);
        font-size: 0.9rem;
        font-weight: 600;
        cursor: pointer;
        padding: 8px 16px;
        border-radius: 8px;
        transition: all 0.2s ease;
    }

    .view-details-btn:hover {
        background: var(--accent-green);
    }

    /* Milestone Toast */
    .milestone-toast {
        position: fixed;
        top: 20px;
        left: 50%;
        transform: translateX(-50%) translateY(-100px);
        background: linear-gradient(135deg, var(--secondary) 0%, var(--primary-light) 100%);
        border-radius: 16px;
        padding: 16px 24px;
        display: flex;
        align-items: center;
        gap: 12px;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
        z-index: 10009;
        transition: transform 0.3s ease;
    }

    .milestone-toast.show {
        transform: translateX(-50%) translateY(0);
    }

    .milestone-icon {
        font-size: 2rem;
    }

    .milestone-title {
        font-weight: 700;
        color: #333;
        font-size: 1.1rem;
    }

    .milestone-points {
        color: #666;
        font-weight: 600;
    }

    /* Points Earned Toast */
    .points-earned-toast {
        position: fixed;
        top: 80px;
        right: 20px;
        background: var(--primary);
        color: white;
        border-radius: 12px;
        padding: 12px 20px;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
        z-index: 10009;
        transform: translateX(200px);
        transition: transform 0.3s ease;
    }

    .points-earned-toast.show {
        transform: translateX(0);
    }

    .points-earned-main {
        font-size: 1.5rem;
        font-weight: 800;
    }

    .points-earned-bonus,
    .points-earned-streak {
        font-size: 0.85rem;
        opacity: 0.9;
    }

    /* Level Up Toast */
    .level-up-toast {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) scale(0.5);
        background: linear-gradient(135deg, #FFD700 0%, #FFA500 50%, #FF8C00 100%);
        border-radius: 20px;
        padding: 0;
        box-shadow: 0 0 60px rgba(255, 215, 0, 0.6), 0 20px 60px rgba(0, 0, 0, 0.3);
        z-index: 10010;
        opacity: 0;
        transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        overflow: hidden;
    }

    .level-up-toast.show {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }

    .level-up-glow {
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.4) 0%, transparent 70%);
        animation: levelGlow 2s ease-in-out infinite;
    }

    @keyframes levelGlow {
        0%, 100% { transform: scale(1); opacity: 0.5; }
        50% { transform: scale(1.2); opacity: 0.8; }
    }

    .level-up-content {
        position: relative;
        display: flex;
        align-items: center;
        gap: 16px;
        padding: 24px 32px;
    }

    .level-up-icon {
        font-size: 3rem;
        animation: starPulse 0.8s ease-in-out infinite;
    }

    @keyframes starPulse {
        0%, 100% { transform: scale(1) rotate(0deg); }
        50% { transform: scale(1.2) rotate(15deg); }
    }

    .level-up-text {
        text-align: left;
    }

    .level-up-title {
        font-size: 0.9rem;
        font-weight: 800;
        color: rgba(0, 0, 0, 0.6);
        letter-spacing: 2px;
        text-transform: uppercase;
    }

    .level-up-level {
        font-size: 2rem;
        font-weight: 900;
        color: #333;
        line-height: 1.1;
    }

    .level-up-rank {
        font-size: 1rem;
        font-weight: 600;
        color: rgba(0, 0, 0, 0.7);
    }

    /* Level Up Enhanced - Glow Ring Pulse */
    .level-up-rings-container {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        z-index: 10005;
        overflow: hidden;
    }

    .level-up-ring {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        border-radius: 50%;
        border: 4px solid rgba(255, 215, 0, 0.8);
        box-shadow: 0 0 20px rgba(255, 215, 0, 0.6), inset 0 0 20px rgba(255, 215, 0, 0.3);
        animation: ringPulse 1.5s ease-out forwards;
    }

    .level-up-ring:nth-child(1) { animation-delay: 0s; }
    .level-up-ring:nth-child(2) { animation-delay: 0.2s; }
    .level-up-ring:nth-child(3) { animation-delay: 0.4s; }
    .level-up-ring:nth-child(4) { animation-delay: 0.6s; }

    @keyframes ringPulse {
        0% {
            width: 50px;
            height: 50px;
            opacity: 1;
            border-width: 4px;
        }
        100% {
            width: 400px;
            height: 400px;
            opacity: 0;
            border-width: 1px;
        }
    }

    /* XP Bar Rainbow Flash */
    @keyframes xpRainbowFlash {
        0% { background: linear-gradient(90deg, #ff0000, #ff7f00); }
        14% { background: linear-gradient(90deg, #ff7f00, #ffff00); }
        28% { background: linear-gradient(90deg, #ffff00, #00ff00); }
        42% { background: linear-gradient(90deg, #00ff00, #0000ff); }
        57% { background: linear-gradient(90deg, #0000ff, #4b0082); }
        71% { background: linear-gradient(90deg, #4b0082, #9400d3); }
        85% { background: linear-gradient(90deg, #9400d3, #ff0000); }
        100% { background: linear-gradient(90deg, var(--secondary), var(--primary-light)); }
    }

    .xp-bar-rainbow {
        animation: xpRainbowFlash 1.5s ease-out;
    }

    /* Level Up Title Transition */
    .level-up-title-transition {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 0.85rem;
        margin-top: 4px;
    }

    .level-up-old-title {
        color: rgba(0, 0, 0, 0.4);
        text-decoration: line-through;
    }

    .level-up-arrow {
        color: rgba(0, 0, 0, 0.6);
        font-weight: bold;
    }

    .level-up-new-title {
        color: rgba(0, 0, 0, 0.8);
        font-weight: 700;
        animation: newTitlePop 0.5s ease-out;
    }

    @keyframes newTitlePop {
        0% { transform: scale(0.5); opacity: 0; }
        50% { transform: scale(1.2); }
        100% { transform: scale(1); opacity: 1; }
    }

    /* Level Up Stats Comparison */
    .level-up-stats {
        display: flex;
        gap: 16px;
        margin-top: 12px;
        padding-top: 12px;
        border-top: 1px solid rgba(0, 0, 0, 0.1);
    }

    .level-up-stat {
        text-align: center;
        flex: 1;
    }

    .level-up-stat-value {
        font-size: 1.2rem;
        font-weight: 800;
        color: #333;
    }

    .level-up-stat-label {
        font-size: 0.65rem;
        color: rgba(0, 0, 0, 0.5);
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    /* Streak Celebration */
    .level-up-streak-bonus {
        background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
        color: white;
        padding: 6px 12px;
        border-radius: 20px;
        font-size: 0.75rem;
        font-weight: 700;
        margin-top: 8px;
        display: inline-flex;
        align-items: center;
        gap: 4px;
        animation: streakBounce 0.6s ease-out;
    }

    @keyframes streakBounce {
        0% { transform: scale(0) rotate(-10deg); }
        50% { transform: scale(1.2) rotate(5deg); }
        100% { transform: scale(1) rotate(0deg); }
    }

    /* Enhanced Level Up Toast Layout */
    .level-up-toast-enhanced {
        min-width: 280px;
    }

    .level-up-toast-enhanced .level-up-content {
        flex-direction: column;
        text-align: center;
        padding: 28px 32px;
    }

    .level-up-toast-enhanced .level-up-icon {
        font-size: 3.5rem;
        margin-bottom: 8px;
    }

    .level-up-toast-enhanced .level-up-text {
        text-align: center;
    }

    /* ============================================
       IN-TAMAGOTCHI LEVEL UP CELEBRATION
       Shows level-up directly in the character view
       ============================================ */

    .tamagotchi-levelup-overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 50;
        display: none;
        pointer-events: none;
        overflow: hidden;
    }

    .tamagotchi-levelup-overlay.active {
        display: block;
    }

    /* Radial burst effect behind character */
    .levelup-burst {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 0;
        height: 0;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(255, 215, 0, 0.4) 0%, rgba(255, 165, 0, 0.2) 40%, transparent 70%);
        animation: burstExpand 1.5s ease-out forwards;
    }

    @keyframes burstExpand {
        0% { width: 0; height: 0; opacity: 1; }
        50% { opacity: 0.8; }
        100% { width: 600px; height: 600px; opacity: 0; }
    }

    /* Full-screen golden flash on level-up */
    @keyframes celebrationFlash {
        0% { opacity: 0.6; }
        100% { opacity: 0; }
    }

    /* Sparkle particles */
    .levelup-sparkle {
        position: absolute;
        width: 8px;
        height: 8px;
        background: #FFD700;
        border-radius: 50%;
        box-shadow: 0 0 10px 3px rgba(255, 215, 0, 0.8);
        animation: sparkleFloat 2s ease-out forwards;
    }

    @keyframes sparkleFloat {
        0% {
            transform: translateY(0) scale(1);
            opacity: 1;
        }
        100% {
            transform: translateY(-150px) scale(0);
            opacity: 0;
        }
    }

    /* Rising stars effect */
    .levelup-star {
        position: absolute;
        font-size: 1.5rem;
        animation: starRise 2.5s ease-out forwards;
        filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.8));
    }

    @keyframes starRise {
        0% {
            transform: translateY(50px) scale(0) rotate(0deg);
            opacity: 0;
        }
        20% {
            opacity: 1;
            transform: translateY(0) scale(1.2) rotate(20deg);
        }
        80% {
            opacity: 1;
        }
        100% {
            transform: translateY(-200px) scale(0.5) rotate(360deg);
            opacity: 0;
        }
    }

    /* Level Up Banner - centered on screen */
    .levelup-banner {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) scale(0);
        background: linear-gradient(135deg, #FFD700 0%, #FFA500 50%, #FF8C00 100%);
        padding: 12px 28px;
        border-radius: 30px;
        box-shadow: 0 4px 20px rgba(255, 165, 0, 0.5), 0 0 40px rgba(255, 215, 0, 0.3);
        z-index: 9999;
        pointer-events: auto;
        animation: bannerPop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.3s forwards;
    }

    @keyframes bannerPop {
        0% { transform: translate(-50%, -50%) scale(0); }
        70% { transform: translate(-50%, -50%) scale(1.1); }
        100% { transform: translate(-50%, -50%) scale(1); }
    }

    .levelup-banner-text {
        text-align: center;
    }

    .levelup-banner-title {
        font-size: 0.7rem;
        font-weight: 800;
        color: rgba(0, 0, 0, 0.5);
        letter-spacing: 3px;
        text-transform: uppercase;
        margin-bottom: 2px;
    }

    .levelup-banner-level {
        font-size: 1.8rem;
        font-weight: 900;
        color: #333;
        line-height: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
    }

    .levelup-banner-level .star-icon {
        font-size: 1.4rem;
        animation: starPulse 0.8s ease-in-out infinite;
    }

    .levelup-banner-rank {
        font-size: 0.85rem;
        font-weight: 700;
        color: rgba(0, 0, 0, 0.6);
        margin-top: 4px;
    }

    .levelup-rank-transition {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        margin-top: 4px;
    }

    .levelup-rank-old {
        font-size: 0.75rem;
        color: rgba(0, 0, 0, 0.4);
        text-decoration: line-through;
    }

    .levelup-rank-arrow {
        font-size: 0.8rem;
        color: rgba(0, 0, 0, 0.6);
    }

    .levelup-rank-new {
        font-size: 0.85rem;
        font-weight: 800;
        color: rgba(0, 0, 0, 0.8);
    }

    /* Unlocked move display in banner */
    .levelup-unlocked-move {
        margin-top: 8px;
        padding-top: 8px;
        border-top: 1px solid rgba(0, 0, 0, 0.15);
        animation: unlockSlideIn 0.5s ease-out 0.8s both;
    }

    @keyframes unlockSlideIn {
        0% { opacity: 0; transform: translateY(10px); }
        100% { opacity: 1; transform: translateY(0); }
    }

    .levelup-unlocked-label {
        font-size: 0.6rem;
        font-weight: 600;
        color: rgba(0, 0, 0, 0.5);
        text-transform: uppercase;
        letter-spacing: 1px;
        margin-bottom: 2px;
    }

    .levelup-unlocked-name {
        font-size: 0.85rem;
        font-weight: 700;
        color: rgba(0, 0, 0, 0.8);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
    }

    .levelup-unlocked-icon {
        font-size: 1.1rem;
    }

    /* XP Bar Level-Up Animation */
    .xp-bar-levelup-fill {
        animation: xpBarLevelUp 1.5s ease-out forwards;
    }

    @keyframes xpBarLevelUp {
        0% { width: var(--start-width, 0%); }
        50% { width: 100%; background: linear-gradient(90deg, #FFD700, #FFA500); }
        60% { width: 100%; background: linear-gradient(90deg, #FFD700, #FFA500); }
        100% { width: var(--end-width, 0%); background: linear-gradient(90deg, var(--secondary), var(--primary-light)); }
    }

    /* Level number pulse on update */
    .level-number-update {
        animation: levelNumberPop 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }

    @keyframes levelNumberPop {
        0% { transform: scale(1); }
        30% { transform: scale(1.3); color: #FFD700; }
        100% { transform: scale(1); }
    }

    /* Confetti effect */
    .levelup-confetti {
        position: absolute;
        width: 10px;
        height: 10px;
        animation: confettiFall 3s ease-out forwards;
    }

    @keyframes confettiFall {
        0% {
            transform: translateY(-20px) rotate(0deg);
            opacity: 1;
        }
        100% {
            transform: translateY(450px) rotate(720deg);
            opacity: 0;
        }
    }

    /* Stats bar glow during celebration */
    .stats-bar-celebrating {
        animation: statsBarGlow 2s ease-out;
    }

    @keyframes statsBarGlow {
        0% { box-shadow: 0 8px 24px rgba(0,0,0,0.3); }
        30% { box-shadow: 0 0 30px rgba(255, 215, 0, 0.6), 0 8px 24px rgba(0,0,0,0.3); }
        100% { box-shadow: 0 8px 24px rgba(0,0,0,0.3); }
    }

    /* Glass animation selector - inside tamagotchi */
    .animation-selector-container {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1000;
        display: none;
    }

    .animation-selector-backdrop {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.3);
    }

    .animation-selector-modal {
        position: absolute;
        top: 10px;
        left: 10px;
        right: 10px;
        bottom: calc(10px + env(safe-area-inset-bottom, 0px));
        background: rgba(20, 20, 40, 0.95);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-radius: 16px;
        border: 1px solid rgba(255, 255, 255, 0.2);
        overflow: hidden;
        animation: fadeInScale 0.25s ease-out;
        display: flex;
        flex-direction: column;
    }

    @keyframes fadeInScale {
        from {
            opacity: 0;
            transform: scale(0.95);
        }
        to {
            opacity: 1;
            transform: scale(1);
        }
    }

    .animation-selector-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: calc(15px + env(safe-area-inset-top, 0px)) 14px 8px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.15);
        flex-shrink: 0;
    }

    .animation-selector-header h3 {
        margin: 0;
        font-size: 0.95rem;
        font-weight: 700;
        color: rgba(255, 255, 255, 0.95);
    }

    .animation-selector-close {
        font-size: 1.4rem;
        color: rgba(255, 255, 255, 0.7);
        cursor: pointer;
        line-height: 1;
        padding: 4px;
        transition: color 0.2s;
    }

    .animation-selector-close:hover {
        color: rgba(255, 255, 255, 1);
    }

    .animation-selector-content {
        padding: 10px 12px 14px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        flex: 1;
        min-height: 0;
    }

    .animation-category {
        margin-bottom: 12px;
    }

    .animation-category-title {
        font-size: 0.65rem;
        font-weight: 700;
        color: rgba(255, 255, 255, 0.6);
        margin-bottom: 6px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .animation-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 6px;
    }

    .animation-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 8px 4px;
        border-radius: 10px;
        cursor: pointer;
        transition: all 0.2s ease;
        text-align: center;
    }

    .animation-item.unlocked {
        background: rgba(255, 255, 255, 0.15);
        border: 1px solid rgba(255, 255, 255, 0.2);
    }

    .animation-item.unlocked:hover {
        background: rgba(255, 255, 255, 0.25);
        transform: scale(1.03);
    }

    .animation-item.unlocked:active {
        transform: scale(0.97);
    }

    .animation-item.locked {
        background: rgba(0, 0, 0, 0.2);
        border: 1px solid rgba(255, 255, 255, 0.1);
        cursor: not-allowed;
        opacity: 0.5;
    }

    .animation-icon {
        font-size: 1.3rem;
        margin-bottom: 2px;
    }

    .animation-name {
        font-size: 0.55rem;
        font-weight: 600;
        color: rgba(255, 255, 255, 0.9);
        line-height: 1.1;
    }

    .animation-item.locked .animation-name {
        color: rgba(255, 255, 255, 0.4);
    }

    .animation-unlock-level {
        font-size: 0.5rem;
        color: rgba(255, 255, 255, 0.4);
        margin-top: 1px;
    }

    /* Skin levels grid in moves modal */
    .skin-levels-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
    }

    .skin-level-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 8px 4px;
        border-radius: 10px;
        text-align: center;
        gap: 2px;
    }

    .skin-level-item.unlocked {
        background: rgba(255, 255, 255, 0.15);
        border: 1px solid rgba(255, 255, 255, 0.2);
    }

    .skin-level-item.locked {
        background: rgba(0, 0, 0, 0.2);
        border: 1px solid rgba(255, 255, 255, 0.1);
        opacity: 0.5;
    }

    .skin-level-badge {
        font-size: 0.55rem;
        font-weight: 700;
        color: rgba(255, 255, 255, 0.6);
        text-transform: uppercase;
    }

    .skin-level-icon {
        font-size: 1.2rem;
    }

    .skin-level-title {
        font-size: 0.55rem;
        font-weight: 600;
        color: rgba(255, 255, 255, 0.9);
        line-height: 1.1;
    }

    .skin-level-item.locked .skin-level-title {
        color: rgba(255, 255, 255, 0.4);
    }

    /* Animation button on Tamagotchi widget */
    .animation-trigger-btn {
        position: absolute;
        bottom: 15px;
        right: 15px;
        background: rgba(255, 255, 255, 0.25);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.4);
        border-radius: 50%;
        width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        z-index: 10;
        transition: all 0.2s ease;
        font-size: 1.3rem;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    }

    .animation-trigger-btn:hover {
        background: rgba(255, 255, 255, 0.25);
        transform: scale(1.1);
    }

    .animation-trigger-btn:active {
        transform: scale(0.95);
    }

    .wallpaper-trigger-btn {
        position: absolute;
        top: 15px;
        right: 15px;
        background: rgba(59, 130, 246, 0.35);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(147, 197, 253, 0.5);
        border-radius: 50%;
        width: 44px;
        height: 44px;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        z-index: 10;
        transition: all 0.2s ease;
        font-size: 1.25rem;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
        touch-action: manipulation;
        pointer-events: auto;
    }

    .wallpaper-trigger-btn:hover {
        background: rgba(59, 130, 246, 0.55);
        transform: scale(1.1);
    }

    .wallpaper-trigger-btn:active {
        transform: scale(0.95);
    }

    /* Battle Trigger Button */
    .battle-trigger-btn {
        position: absolute;
        bottom: 15px;
        right: 65px; /* Positioned to the left of the film icon */
        background: rgba(220, 50, 50, 0.4);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 100, 100, 0.4);
        border-radius: 50%;
        width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        z-index: 10;
        transition: all 0.2s ease;
        font-size: 1.3rem;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
        touch-action: manipulation;
        pointer-events: auto;
    }

    .battle-trigger-btn:hover {
        background: rgba(220, 50, 50, 0.6);
        transform: scale(1.1);
    }

    .battle-trigger-btn:active {
        transform: scale(0.95);
    }

    /* Arena Trigger Button */
    .arena-trigger-btn {
        position: absolute;
        bottom: 15px;
        right: 115px;
        background: rgba(16, 185, 129, 0.35);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(16, 185, 129, 0.45);
        border-radius: 50%;
        width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        z-index: 10;
        transition: all 0.2s ease;
        font-size: 1.3rem;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
        touch-action: manipulation;
        pointer-events: auto;
    }

    .arena-trigger-btn:hover {
        background: rgba(16, 185, 129, 0.55);
        transform: scale(1.1);
    }

    .arena-trigger-btn:active {
        transform: scale(0.95);
    }

    .arena-trigger-btn.locked {
        opacity: 0.5;
        position: absolute;
    }

    .arena-trigger-btn.locked::after {
        content: 'Lv.10';
        position: absolute;
        bottom: -14px;
        left: 50%;
        transform: translateX(-50%);
        font-size: 0.45rem;
        font-weight: 800;
        color: rgba(255,255,255,0.6);
        white-space: nowrap;
        background: rgba(0,0,0,0.5);
        padding: 1px 5px;
        border-radius: 4px;
    }

    /* ── Arena Invite Modal ── */
    .arena-invite-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.7);
        backdrop-filter: blur(8px);
        z-index: 10001;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 20px;
        animation: fadeIn 0.3s ease-out;
    }

    .arena-invite-modal {
        background: linear-gradient(135deg, #0a1a2e 0%, #0e2a1e 50%, #1a2e0a 100%);
        border-radius: 24px;
        width: 100%;
        max-width: 380px;
        max-height: 80vh;
        display: flex;
        flex-direction: column;
        box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 40px rgba(16,185,129,0.15);
        border: 1px solid rgba(16,185,129,0.2);
        animation: fadeInScale 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        overflow: hidden;
    }

    .arena-invite-header {
        text-align: center;
        padding: 24px 20px 16px;
        border-bottom: 1px solid rgba(255,255,255,0.1);
    }

    .arena-invite-header h2 {
        margin: 0 0 4px;
        font-size: 1.3rem;
        font-weight: 800;
        color: #10b981;
        text-shadow: 0 0 20px rgba(16,185,129,0.3);
    }

    .arena-invite-header p {
        margin: 0;
        font-size: 0.8rem;
        color: rgba(255,255,255,0.6);
    }

    .arena-invite-body {
        padding: 12px 16px;
        overflow-y: auto;
        flex: 1;
    }

    .arena-invite-friend {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px;
        border-radius: 14px;
        background: rgba(255,255,255,0.06);
        border: 1px solid rgba(255,255,255,0.08);
        margin-bottom: 8px;
        cursor: pointer;
        transition: all 0.2s;
    }

    .arena-invite-friend:hover {
        background: rgba(255,255,255,0.12);
        border-color: rgba(16,185,129,0.3);
    }

    .arena-invite-friend:active {
        transform: scale(0.98);
    }

    .arena-invite-avatar {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: linear-gradient(135deg, rgba(16,185,129,0.3), rgba(5,150,105,0.3));
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        font-size: 1rem;
        color: white;
        flex-shrink: 0;
        overflow: hidden;
    }

    .arena-invite-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .arena-invite-info {
        flex: 1;
        min-width: 0;
    }

    .arena-invite-name {
        font-size: 0.9rem;
        font-weight: 700;
        color: white;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .arena-invite-status {
        font-size: 0.65rem;
        color: rgba(255,255,255,0.5);
        margin-top: 2px;
    }

    .arena-invite-btn {
        padding: 8px 16px;
        border: none;
        border-radius: 10px;
        font-size: 0.75rem;
        font-weight: 700;
        cursor: pointer;
        transition: all 0.15s;
        background: linear-gradient(135deg, rgba(16,185,129,0.6), rgba(5,150,105,0.4));
        color: white;
        border: 1px solid rgba(16,185,129,0.4);
        flex-shrink: 0;
    }

    .arena-invite-btn:hover {
        background: linear-gradient(135deg, rgba(16,185,129,0.8), rgba(5,150,105,0.6));
        transform: scale(1.05);
    }

    .arena-invite-footer {
        padding: 12px 16px 16px;
        border-top: 1px solid rgba(255,255,255,0.1);
        text-align: center;
    }

    .arena-invite-close {
        padding: 10px 24px;
        border: 1px solid rgba(255,255,255,0.2);
        border-radius: 12px;
        background: transparent;
        color: rgba(255,255,255,0.7);
        font-size: 0.85rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s;
    }

    .arena-invite-close:hover {
        background: rgba(255,255,255,0.1);
        color: white;
    }

    .arena-player-count {
        display: flex;
        gap: 6px;
        margin-top: 8px;
    }

    .arena-count-btn {
        flex: 1;
        padding: 8px;
        background: rgba(255,255,255,0.08);
        border: 2px solid rgba(255,255,255,0.15);
        border-radius: 8px;
        color: white;
        font-weight: 700;
        font-size: 0.8rem;
        cursor: pointer;
        transition: all 0.15s;
    }

    .arena-count-btn.active {
        background: rgba(16,185,129,0.2);
        border-color: rgba(16,185,129,0.5);
        color: #10b981;
    }

    /* Fireball Projectile */
    .fireball {
        position: absolute;
        width: 200px;
        height: 200px;
        pointer-events: none;
        z-index: 100;
        will-change: transform;
        filter: drop-shadow(0 0 25px #ff5500);
    }

    .fireball img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        image-rendering: pixelated;
    }

    /* Battle Flash Effect */
    .battle-flash {
        animation: battleFlash 0.3s ease-out;
    }

    @keyframes battleFlash {
        0% { filter: brightness(1); }
        50% { filter: brightness(2) contrast(1.2); }
        100% { filter: brightness(1); }
    }

    /* Battle Overlay Title */
    .battle-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.5);
        display: none;
        align-items: center;
        justify-content: center;
        z-index: 200;
        pointer-events: none;
    }

    .battle-overlay.active {
        display: flex;
        animation: fadeIn 0.3s ease-out;
    }

    .battle-text {
        color: white;
        font-size: 2.5rem;
        font-weight: 900;
        text-shadow: 0 0 20px rgba(255,0,0,0.8);
        font-family: 'Outfit', sans-serif;
        text-transform: uppercase;
    }

    /* Animation unlock toast */
    .animation-unlock-toast {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) scale(0.8);
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        padding: 24px 32px;
        border-radius: 20px;
        text-align: center;
        z-index: 10010;
        opacity: 0;
        transition: all 0.3s ease;
        box-shadow: 0 20px 60px rgba(102, 126, 234, 0.4);
    }

    .animation-unlock-toast.show {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }

    .animation-unlock-icon {
        font-size: 3rem;
        margin-bottom: 8px;
        animation: unlockBounce 0.6s ease-out;
    }

    @keyframes unlockBounce {
        0% { transform: scale(0) rotate(-20deg); }
        50% { transform: scale(1.3) rotate(10deg); }
        100% { transform: scale(1) rotate(0deg); }
    }

    .animation-unlock-title {
        font-size: 0.8rem;
        font-weight: 600;
        opacity: 0.9;
        margin-bottom: 4px;
        text-transform: uppercase;
        letter-spacing: 1px;
    }

    .animation-unlock-name {
        font-size: 1.4rem;
        font-weight: 800;
    }

    /* Calorie Tracker Summary (Full View) */
    .calorie-tracker-summary {
        background: white;
        border-radius: 16px;
        padding: 30px 20px;
        margin-bottom: 25px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    }

    /* Circular Progress */
    .calorie-progress-large {
        display: flex;
        justify-content: center;
        margin: 30px 0;
    }

    .calorie-circle {
        position: relative;
        width: 200px;
        height: 200px;
    }

    .calorie-circle-svg {
        width: 100%;
        height: 100%;
    }

    .calorie-circle-text {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
    }

    .calorie-circle-numbers {
        display: flex;
        align-items: baseline;
        justify-content: center;
        gap: 4px;
    }

    .calorie-circle-current {
        font-size: 1.8rem;
        font-weight: 700;
        color: var(--primary);
        line-height: 1;
    }

    .calorie-circle-separator {
        font-size: 1rem;
        color: var(--text-muted);
    }

    .calorie-circle-goal {
        font-size: 1.2rem;
        font-weight: 600;
        color: var(--text-muted);
    }

    .calorie-circle-label {
        font-size: 0.85rem;
        color: var(--text-muted);
        margin-top: 8px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    /* Macro Ring Legend */
    .macro-ring-legend {
        display: flex;
        justify-content: center;
        gap: 16px;
        margin-top: 12px;
        margin-bottom: 8px;
    }
    .macro-ring-legend-item {
        display: flex;
        align-items: center;
        gap: 5px;
        font-size: 0.78rem;
    }
    .macro-ring-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        flex-shrink: 0;
    }
    .macro-ring-label {
        color: var(--text-muted);
    }
    .macro-ring-pct {
        font-weight: 700;
        color: var(--text-main);
    }

    /* Micronutrient Tracker (inside daily tracker) */
    .tracker-micro-section {
        margin-top: 24px;
        padding-top: 20px;
        border-top: 1px solid #e5e7eb;
    }
    .tracker-micro-header {
        font-size: 0.85rem;
        font-weight: 700;
        color: var(--text-muted);
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-bottom: 12px;
    }
    .tracker-micro-grid {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    .micro-tracker-item {
        background: #f9f9f7;
        padding: 10px 14px;
        border-radius: 10px;
        border: 1px solid transparent;
        cursor: pointer;
        transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
        outline: none;
    }
    .micro-tracker-item.is-open,
    .micro-tracker-item:focus-visible {
        background: #ffffff;
        border-color: #d8e6dc;
        box-shadow: 0 6px 18px rgba(46, 90, 61, 0.08);
    }
    .micro-tracker-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 6px;
        gap: 10px;
    }
    .micro-tracker-name {
        font-size: 0.82rem;
        font-weight: 600;
        color: var(--text-main);
        display: flex;
        align-items: center;
        gap: 6px;
        min-width: 0;
    }
    .micro-tracker-name .micro-tracker-icon {
        font-size: 0.9rem;
    }
    .micro-tracker-status-group {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 7px;
        flex-shrink: 0;
    }
    .micro-tracker-value {
        font-size: 0.75rem;
        font-weight: 600;
        color: var(--text-muted);
    }
    .micro-tracker-status {
        font-size: 0.68rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.3px;
    }
    .micro-tracker-chevron {
        color: #9ca3af;
        font-size: 0.72rem;
        font-weight: 800;
        line-height: 1;
        transition: transform 0.2s ease;
    }
    .micro-tracker-item.is-open .micro-tracker-chevron {
        transform: rotate(180deg);
    }
    .progress-bar-micro {
        height: 6px;
        background: #e5e5e5;
        border-radius: 3px;
        overflow: hidden;
    }
    .progress-fill-micro {
        height: 100%;
        border-radius: 3px;
        transition: width 0.4s ease;
    }
    .micro-tracker-detail {
        margin-top: 10px;
        padding-top: 10px;
        border-top: 1px solid #e5e7eb;
    }
    .micro-detail-title {
        font-size: 0.76rem;
        font-weight: 800;
        color: var(--text-main);
        margin-bottom: 8px;
    }
    .micro-source-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 7px 0;
        border-bottom: 1px solid rgba(229, 231, 235, 0.7);
    }
    .micro-source-row:last-of-type {
        border-bottom: none;
    }
    .micro-source-main {
        display: flex;
        flex-direction: column;
        min-width: 0;
        gap: 2px;
    }
    .micro-source-foods {
        color: var(--text-main);
        font-size: 0.8rem;
        font-weight: 700;
        line-height: 1.3;
        overflow-wrap: anywhere;
    }
    .micro-source-meal,
    .micro-detail-empty,
    .micro-detail-more {
        color: var(--text-muted);
        font-size: 0.72rem;
        line-height: 1.35;
    }
    .micro-source-meta {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 2px;
        flex-shrink: 0;
    }
    .micro-source-amount {
        color: var(--primary);
        font-size: 0.75rem;
        font-weight: 800;
    }
    .micro-source-note {
        color: #9ca3af;
        font-size: 0.62rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.3px;
    }
    .micro-recommendation-list {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        margin-top: 8px;
    }
    .micro-options-block {
        margin-top: 10px;
    }
    .micro-options-title {
        color: var(--text-main);
        font-size: 0.7rem;
        font-weight: 800;
        line-height: 1.3;
    }
    .micro-recommendation-chip {
        background: #eef5ef;
        color: #2f5f3a;
        border: 1px solid #d8e6dc;
        border-radius: 8px;
        padding: 5px 7px;
        font-size: 0.7rem;
        font-weight: 700;
        line-height: 1.2;
    }
    .micro-detail-tip {
        margin-top: 9px;
        color: #4b5563;
        font-size: 0.74rem;
        line-height: 1.45;
    }

    /* Macros Detail Grid */
    .macros-detail-grid {
        display: flex;
        flex-direction: column;
        gap: 16px;
        margin-top: 30px;
    }

    .macro-detail-item {
        background: #f9f9f7;
        padding: 12px 16px;
        border-radius: 12px;
    }

    /* Weekly Metrics Styles */
    .weekly-day-item {
        margin-bottom: 12px;
    }

    .weekly-day-item:last-child {
        margin-bottom: 0;
    }

    .weekly-day-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 6px;
    }

    .weekly-day-name {
        font-size: 0.85rem;
        font-weight: 600;
        color: var(--text-main);
    }

    .weekly-day-calories {
        font-size: 0.85rem;
        font-weight: 500;
        color: var(--text-muted);
    }

    .macro-detail-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 8px;
    }

    .macro-detail-name {
        font-size: 0.9rem;
        font-weight: 700;
        color: var(--text-main);
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .macro-detail-value {
        font-size: 0.9rem;
        font-weight: 600;
        color: var(--text-main);
    }

    .progress-bar-medium {
        height: 10px;
        background: #e5e5e5;
        border-radius: 5px;
        overflow: hidden;
    }

    /* ============================================================
       ENHANCED NUTRITION TAB STYLES
       ============================================================ */

    /* Daily Nutrition Score */
    .nutrition-score-ring {
        position: relative;
        width: 80px;
        height: 80px;
        margin: 0 auto;
    }
    .nutrition-score-ring svg { width: 100%; height: 100%; }
    .nutrition-score-value {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 1.4rem;
        font-weight: 800;
        color: var(--text-main);
    }
    /* Inline Streak Badge */
    .streak-inline {
        display: flex;
        align-items: center;
        gap: 5px;
        background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
        border: 1px solid #fde68a;
        border-radius: 20px;
        padding: 4px 12px;
    }
    .streak-inline-flame {
        font-size: 1rem;
    }
    .streak-inline-count {
        font-size: 1rem;
        font-weight: 800;
        color: #d97706;
    }
    .streak-inline-label {
        font-size: 0.72rem;
        color: #92400e;
        font-weight: 600;
    }

    /* Daily Score Popup */
    .score-popup-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 10000;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: calc(20px + env(safe-area-inset-top, 0px)) 20px calc(20px + env(safe-area-inset-bottom, 0px)) 20px;
        box-sizing: border-box;
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        animation: fadeInOverlay 0.2s ease;
    }
    @keyframes fadeInOverlay {
        from { opacity: 0; }
        to { opacity: 1; }
    }
    @keyframes slideUpPopup {
        from { transform: translateY(30px); opacity: 0; }
        to { transform: translateY(0); opacity: 1; }
    }
    .score-popup-modal {
        background: white;
        border-radius: 20px;
        padding: 28px 24px;
        max-width: 380px;
        width: 100%;
        max-height: 100%;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        position: relative;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
        animation: slideUpPopup 0.3s ease;
    }
    .score-popup-close {
        position: absolute;
        top: 12px;
        right: 16px;
        background: none;
        border: none;
        font-size: 1.5rem;
        color: var(--text-muted);
        cursor: pointer;
        padding: 4px 8px;
        line-height: 1;
    }
    .score-popup-header {
        font-size: 1.2rem;
        font-weight: 700;
        color: var(--text-main);
        text-align: center;
        margin-bottom: 4px;
    }

    .nutrition-score-card {
        background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
        border: 1px solid #bbf7d0;
        border-radius: 16px;
        padding: 20px;
        margin: 25px 0;
        text-align: center;
    }
    .nutrition-score-label {
        font-size: 0.8rem;
        color: var(--text-muted);
        margin-top: 6px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
    .score-breakdown {
        display: flex;
        justify-content: center;
        gap: 16px;
        margin-top: 14px;
        flex-wrap: wrap;
    }
    .score-breakdown-item {
        font-size: 0.78rem;
        color: var(--text-muted);
        display: flex;
        align-items: center;
        gap: 4px;
    }
    .score-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        display: inline-block;
    }

    /* Calorie Projection (MFP-style) */
    .calorie-projection-section {
        margin-top: 18px;
        padding: 16px;
        background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
        border: 1px solid #bae6fd;
        border-radius: 14px;
        text-align: center;
    }
    .calorie-projection-text {
        font-size: 0.82rem;
        color: var(--text-muted);
        margin-bottom: 6px;
        line-height: 1.3;
    }
    .calorie-projection-weight {
        display: flex;
        align-items: baseline;
        justify-content: center;
        gap: 4px;
    }
    .calorie-projection-value {
        font-size: 1.8rem;
        font-weight: 800;
        color: var(--text-main);
        letter-spacing: -0.5px;
    }
    .calorie-projection-unit {
        font-size: 0.9rem;
        font-weight: 600;
        color: var(--text-muted);
    }
    .calorie-projection-subtext {
        font-size: 0.72rem;
        color: var(--text-muted);
        margin-top: 2px;
        opacity: 0.8;
    }
    .calorie-projection-section.projection-losing {
        background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
        border-color: #bbf7d0;
    }
    .calorie-projection-section.projection-losing .calorie-projection-value {
        color: #15803d;
    }
    .calorie-projection-section.projection-gaining {
        background: linear-gradient(135deg, #fef3c7 0%, #fde68a 50%);
        border-color: #fcd34d;
    }
    .calorie-projection-section.projection-gaining .calorie-projection-value {
        color: #b45309;
    }
    .calorie-projection-section.projection-maintaining {
        background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
        border-color: #bae6fd;
    }
    .calorie-projection-section.projection-maintaining .calorie-projection-value {
        color: #0369a1;
    }

    /* Streak Tracker */
    .streak-tracker-card {
        background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
        border: 1px solid #fde68a;
        border-radius: 16px;
        padding: 20px;
        margin: 25px 0;
    }
    .streak-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 14px;
    }
    .streak-flame {
        display: flex;
        align-items: center;
        gap: 8px;
    }
    .streak-count {
        font-size: 1.6rem;
        font-weight: 800;
        color: #d97706;
    }
    .streak-label {
        font-size: 0.85rem;
        color: #92400e;
        font-weight: 600;
    }
    .streak-next-bonus {
        font-size: 0.78rem;
        color: #92400e;
        background: rgba(217, 119, 6, 0.12);
        padding: 4px 10px;
        border-radius: 20px;
        font-weight: 600;
    }
    .streak-progress-bar {
        height: 8px;
        background: rgba(217, 119, 6, 0.15);
        border-radius: 4px;
        overflow: hidden;
        margin-top: 10px;
    }
    .streak-progress-fill {
        height: 100%;
        background: linear-gradient(90deg, #f59e0b, #d97706);
        border-radius: 4px;
        transition: width 0.5s ease;
    }
    .streak-days-grid {
        display: flex;
        gap: 6px;
        margin-top: 12px;
        justify-content: center;
    }
    .streak-day-dot {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.7rem;
        font-weight: 700;
        border: 2px solid #fde68a;
        color: #92400e;
        background: white;
    }
    .streak-day-dot.filled {
        background: linear-gradient(135deg, #f59e0b, #d97706);
        color: white;
        border-color: #d97706;
    }
    .streak-day-dot.today {
        border-color: #d97706;
        box-shadow: 0 0 0 2px rgba(217, 119, 6, 0.3);
    }

    /* Multi-Week History */
    .multi-week-card {
        background: white;
        border: 1px solid #e5e7eb;
        border-radius: 16px;
        padding: 20px;
        margin: 25px 0;
    }
    .multi-week-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 16px;
    }
    .multi-week-nav {
        display: flex;
        gap: 6px;
    }
    .multi-week-nav button {
        background: #f3f4f6;
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        padding: 6px 10px;
        font-size: 0.8rem;
        cursor: pointer;
        color: var(--text-main);
        font-weight: 600;
    }
    .multi-week-nav button.active {
        background: var(--primary);
        color: white;
        border-color: var(--primary);
    }

    /* Activity Insights is mostly inline markup, so keep the contrast repair scoped here. */
    #view-insights {
        --pbb-insights-page-bg: #050505;
        --pbb-insights-header-bg: rgba(18, 18, 18, 0.98);
        --pbb-insights-card-bg: #121212;
        --pbb-insights-soft-bg: #1a1a1a;
        --pbb-insights-softer-bg: #171717;
        --pbb-insights-border: rgba(245, 217, 138, 0.16);
        --pbb-insights-border-soft: rgba(245, 217, 138, 0.1);
        --pbb-insights-text: #f8f7f2;
        --pbb-insights-muted: #b7b1a2;
        --pbb-insights-axis: rgba(248, 247, 242, 0.72);
        --pbb-insights-grid: rgba(248, 247, 242, 0.12);
        --pbb-insights-control-bg: #1a1a1a;
        --pbb-insights-control-active-bg: var(--secondary, #d8b25e);
        --pbb-insights-control-active-text: #090909;
        --text-main: var(--pbb-insights-text);
        --text-muted: var(--pbb-insights-muted);
        --card-shadow: 0 18px 50px rgba(0, 0, 0, 0.32);
        background: var(--pbb-insights-page-bg) !important;
        color: var(--pbb-insights-text);
    }

    html[data-pbb-theme="light"] #view-insights {
        --pbb-insights-page-bg: #f8f5ee;
        --pbb-insights-header-bg: rgba(255, 255, 255, 0.98);
        --pbb-insights-card-bg: #ffffff;
        --pbb-insights-soft-bg: #f4f0e7;
        --pbb-insights-softer-bg: #faf7f0;
        --pbb-insights-border: rgba(17, 17, 17, 0.09);
        --pbb-insights-border-soft: rgba(17, 17, 17, 0.06);
        --pbb-insights-text: #151515;
        --pbb-insights-muted: #6f6a61;
        --pbb-insights-axis: #6f6a61;
        --pbb-insights-grid: rgba(17, 17, 17, 0.08);
        --pbb-insights-control-bg: #f4f0e7;
        --pbb-insights-control-active-bg: #111111;
        --pbb-insights-control-active-text: #ffffff;
        --card-shadow: 0 12px 34px rgba(31, 26, 16, 0.08);
    }

    #view-insights > div[style*="position: sticky"] {
        background: var(--pbb-insights-header-bg) !important;
        border-bottom: 1px solid var(--pbb-insights-border-soft);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.16) !important;
    }

    #view-insights [style*="background: white"],
    #view-insights [style*="background:white"] {
        background: var(--pbb-insights-card-bg) !important;
        border-color: var(--pbb-insights-border) !important;
        color: var(--pbb-insights-text) !important;
    }

    #view-insights [style*="background: #f8fafc"],
    #view-insights [style*="background:#f8fafc"],
    #view-insights [style*="background: #f1f5f9"],
    #view-insights [style*="background:#f1f5f9"],
    #view-insights [style*="background: #fafafa"],
    #view-insights [style*="background:#fafafa"],
    #view-insights [style*="background:#eef2ff"],
    #view-insights [style*="background: #eef2ff"],
    #view-insights [style*="background:#ede9fe"],
    #view-insights [style*="background: #ede9fe"],
    #view-insights [style*="background:#e0f7fa"],
    #view-insights [style*="background: #e0f7fa"],
    #view-insights [style*="background:#eff6ff"],
    #view-insights [style*="background: #eff6ff"],
    #view-insights [style*="background:#f0fdf4"],
    #view-insights [style*="background: #f0fdf4"],
    #view-insights [style*="background:#fff7ed"],
    #view-insights [style*="background: #fff7ed"],
    #view-insights [style*="background:#fffbeb"],
    #view-insights [style*="background: #fffbeb"],
    #view-insights [style*="background:#fef2f2"],
    #view-insights [style*="background: #fef2f2"],
    #view-insights [style*="background:#f5f3ff"],
    #view-insights [style*="background: #f5f3ff"],
    #view-insights [style*="background:#f0f9ff"],
    #view-insights [style*="background: #f0f9ff"] {
        background: var(--pbb-insights-soft-bg) !important;
        border-color: var(--pbb-insights-border-soft) !important;
        color: var(--pbb-insights-text) !important;
    }

    #view-insights .multi-week-nav button {
        background: var(--pbb-insights-control-bg) !important;
        border-color: var(--pbb-insights-border) !important;
        color: var(--pbb-insights-text) !important;
    }

    #view-insights .multi-week-nav button.active {
        background: var(--pbb-insights-control-active-bg) !important;
        border-color: var(--pbb-insights-control-active-bg) !important;
        color: var(--pbb-insights-control-active-text) !important;
    }

    #view-insights #insights-volume-container button[style*="background:white"],
    #view-insights #insights-volume-container button[style*="background: white"] {
        background: var(--pbb-insights-control-bg) !important;
        border-color: var(--pbb-insights-border) !important;
        color: var(--pbb-insights-muted) !important;
    }

    #view-insights #insights-volume-container button[style*="border:0"][style*="background:white"],
    #view-insights #insights-volume-container button[style*="border:0"][style*="background: white"] {
        background: var(--pbb-insights-control-active-bg) !important;
        border-color: var(--pbb-insights-control-active-bg) !important;
        color: var(--pbb-insights-control-active-text) !important;
    }

    #view-insights #insights-volume-container button[style*="color:white"],
    #view-insights #insights-volume-container button[style*="color: white"] {
        background: var(--pbb-insights-control-active-bg) !important;
        border-color: var(--pbb-insights-control-active-bg) !important;
        color: var(--pbb-insights-control-active-text) !important;
    }

    #view-insights [style*="color:#0f172a"],
    #view-insights [style*="color: #0f172a"],
    #view-insights [style*="color:#334155"],
    #view-insights [style*="color: #334155"] {
        color: var(--pbb-insights-text) !important;
    }

    #view-insights [style*="color:#475569"],
    #view-insights [style*="color: #475569"],
    #view-insights [style*="color:#64748b"],
    #view-insights [style*="color: #64748b"],
    #view-insights [style*="color:#94a3b8"],
    #view-insights [style*="color: #94a3b8"] {
        color: var(--pbb-insights-muted) !important;
    }

    #view-insights svg line[stroke="#f1f5f9"] {
        stroke: var(--pbb-insights-grid);
    }

    #view-insights svg text[fill="#94a3b8"] {
        fill: var(--pbb-insights-axis);
    }

    #view-insights svg circle[fill="white"] {
        fill: var(--pbb-insights-card-bg);
    }

    #view-insights svg path[stroke="#312e81"] {
        stroke: #a78bfa;
    }

    #view-insights svg circle[fill="#312e81"] {
        fill: #a78bfa;
    }

    #view-insights .cb-tooltip {
        background: var(--pbb-insights-softer-bg) !important;
        border-color: var(--pbb-insights-border) !important;
        color: var(--pbb-insights-text) !important;
    }

    .sparkline-row {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 10px 0;
        border-bottom: 1px solid #f3f4f6;
    }
    .sparkline-row:last-child { border-bottom: none; }
    .sparkline-label {
        font-size: 0.82rem;
        font-weight: 600;
        color: var(--text-main);
        width: 75px;
        flex-shrink: 0;
    }
    .sparkline-svg {
        flex: 1;
        height: 30px;
    }
    .sparkline-value {
        font-size: 0.85rem;
        font-weight: 700;
        color: var(--text-main);
        width: 85px;
        flex-shrink: 0;
        text-align: right;
    }
    .sparkline-trend {
        font-size: 0.75rem;
        font-weight: 700;
        width: 50px;
        text-align: right;
        flex-shrink: 0;
    }
    .sparkline-trend.up { color: #16a34a; }
    .sparkline-trend.down { color: #dc2626; }
    .sparkline-trend.neutral { color: #9ca3af; }
    .week-compare-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        margin-top: 14px;
    }
    .week-compare-stat {
        text-align: center;
        padding: 12px 8px;
        background: #f9fafb;
        border-radius: 10px;
    }
    .week-compare-stat .stat-value {
        font-size: 1.3rem;
        font-weight: 700;
        color: var(--primary);
    }
    .week-compare-stat .stat-label {
        font-size: 0.72rem;
        color: var(--text-muted);
        margin-top: 2px;
    }

    /* Micronutrient Insights */
    .micro-insights-card {
        background: white;
        border: 1px solid #e5e7eb;
        border-radius: 16px;
        padding: 20px;
        margin: 25px 0;
    }
    .micro-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        margin-top: 14px;
    }
    .micro-item {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 12px;
        border-radius: 10px;
        background: #f9fafb;
    }
    .micro-icon {
        width: 32px;
        height: 32px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1rem;
        flex-shrink: 0;
    }
    .micro-info {
        flex: 1;
        min-width: 0;
    }
    .micro-name {
        font-size: 0.78rem;
        font-weight: 700;
        color: var(--text-main);
    }
    .micro-bar-bg {
        height: 5px;
        background: #e5e7eb;
        border-radius: 3px;
        margin-top: 4px;
        overflow: hidden;
    }
    .micro-bar-fill {
        height: 100%;
        border-radius: 3px;
        transition: width 0.4s ease;
    }
    .micro-status {
        font-size: 0.68rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.3px;
    }

    /* Meal Pattern Analysis */
    .meal-pattern-card {
        background: white;
        border: 1px solid #e5e7eb;
        border-radius: 16px;
        padding: 20px;
        margin: 25px 0;
    }
    .pattern-insight {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        padding: 12px;
        border-radius: 10px;
        background: #f9fafb;
        margin-bottom: 8px;
    }
    .pattern-insight:last-child { margin-bottom: 0; }
    .pattern-icon {
        font-size: 1.2rem;
        flex-shrink: 0;
        margin-top: 1px;
    }
    .pattern-text {
        font-size: 0.85rem;
        color: var(--text-main);
        line-height: 1.4;
    }
    .pattern-text strong {
        color: var(--primary);
    }

    /* Ask Balance command page */
    .ask-balance-page {
        min-height: 100dvh;
        padding: calc(18px + env(safe-area-inset-top, 0px)) 16px calc(var(--nav-height) + 110px + env(safe-area-inset-bottom, 0px));
        background:
            radial-gradient(circle at top left, rgba(123, 168, 131, 0.2), transparent 34%),
            linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }
    .ask-balance-page-header {
        max-width: 760px;
        width: 100%;
        margin: 0 auto 16px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .ask-balance-page-kicker {
        color: var(--primary);
        font-size: 0.76rem;
        font-weight: 850;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        margin-bottom: 4px;
        transition: color 0.24s ease;
    }
    .ask-balance-page-header h2 {
        margin: 0;
        color: var(--text-main);
        font-size: 1.95rem;
        line-height: 1.1;
        letter-spacing: 0;
    }
    .ask-balance-page-shell {
        width: 100%;
        max-width: 760px;
        min-height: 0;
        max-height: min(42dvh, 420px);
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        gap: 12px;
    }
    .ask-balance-page-input {
        position: fixed;
        left: max(12px, env(safe-area-inset-left, 0px));
        right: max(12px, env(safe-area-inset-right, 0px));
        bottom: calc(var(--nav-height) + 12px + env(safe-area-inset-bottom, 0px));
        z-index: 9998;
        width: auto;
        max-width: 760px;
        margin: 0 auto;
    }
    .ask-balance-centered-composer {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    .ask-balance-page-header .ask-balance-page-kicker {
        color: var(--ask-balance-accent, var(--primary));
        margin-bottom: 0;
        text-align: center;
    }
    .ask-balance-send {
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        flex-shrink: 0;
        font-family: inherit;
    }
    .ask-balance-send svg {
        width: 20px;
        height: 20px;
        fill: currentColor;
    }
    .ask-balance-input {
        min-width: 0;
        width: 100%;
        border: none;
        outline: none;
        background: transparent;
        color: var(--text-main);
        font-size: 0.98rem;
        font-weight: 650;
        font-family: inherit;
    }
    .ask-balance-input::placeholder {
        color: #94a3b8;
        font-weight: 600;
    }
    .ask-balance-messages {
        display: block;
        flex: none;
        min-height: 0;
        max-height: min(42dvh, 420px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        padding: 4px 2px;
    }
    .ask-balance-messages:empty {
        display: none;
    }
    .ask-balance-actions {
        display: none;
    }
    .ask-balance-helper-bubble {
        align-self: flex-start;
        max-width: min(460px, 92%);
        padding: 12px 14px;
        border-radius: 16px 16px 16px 4px;
        background: #ffffff;
        color: var(--text-main);
        font-size: 0.94rem;
        font-weight: 650;
        line-height: 1.35;
        border: 1px solid rgba(226, 232, 240, 0.9);
        box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
    }
    .ask-balance-input-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 44px;
        align-items: center;
        gap: 8px;
        padding: 8px 8px 8px 14px;
        border: 1px solid rgba(123, 168, 131, 0.22);
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.98);
        box-shadow: 0 14px 34px rgba(15, 23, 42, 0.14);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
    }
    .ask-balance-send {
        width: 44px;
        height: 44px;
        border-radius: 14px;
        background: var(--primary);
        color: white;
    }
    .ask-balance-page.thinking .ask-balance-send {
        opacity: 0.55;
        pointer-events: none;
    }
    .ask-balance-command-palette {
        position: fixed;
        inset: 0;
        z-index: 10020;
        display: none;
        align-items: center;
        justify-content: center;
        padding: 20px;
        background: rgba(15, 23, 42, 0.28);
        backdrop-filter: blur(8px);
    }
    .ask-balance-command-palette.visible {
        display: flex;
    }
    .ask-balance-command-card {
        width: min(560px, 100%);
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 12px;
        padding: 16px;
        border-radius: 18px;
        background: rgba(248, 250, 252, 0.96);
        border: 1px solid rgba(148, 163, 184, 0.32);
        box-shadow: 0 24px 70px rgba(15, 23, 42, 0.24);
    }
    .ask-balance-palette-close {
        position: absolute;
        top: 8px;
        right: 8px;
        width: 28px;
        height: 28px;
        border: 0;
        border-radius: 50%;
        background: rgba(15, 23, 42, 0.08);
        color: #334155;
        font-size: 1.1rem;
        line-height: 1;
        display: grid;
        place-items: center;
        cursor: pointer;
    }
    .ask-balance-command-card .ask-balance-helper-bubble {
        margin-right: 28px;
    }
    @media (max-width: 420px) {
        .ask-balance-page {
            padding-left: 12px;
            padding-right: 12px;
        }
        .ask-balance-page-header h2 {
            font-size: 1.55rem;
        }
        .ask-balance-helper-bubble {
            max-width: 100%;
            font-size: 0.88rem;
        }
    }

    /* AI Assistant Card */
    .ai-msg { margin-bottom: 12px; animation: fadeIn 0.3s ease; }
    .ai-msg-user { display: flex; justify-content: flex-end; }
    .ai-msg-user .ai-msg-bubble { background: linear-gradient(135deg, #6366f1, #8b5cf6); color: white; border-radius: 16px 16px 0 16px; }
    .ai-msg-bot { display: flex; justify-content: flex-start; }
    .ai-msg-bot .ai-msg-bubble { background: #f1f5f9; color: var(--text-main); border-radius: 0 16px 16px 16px; }
    .ai-msg-bubble { padding: 10px 14px; font-size: 0.88rem; line-height: 1.5; word-wrap: break-word; }
    .ai-msg-bubble p { margin: 0 0 8px 0; }
    .ai-msg-bubble p:last-child { margin-bottom: 0; }
    .ai-msg-bubble strong { font-weight: 600; }
    .ai-msg-bubble ul, .ai-msg-bubble ol { margin: 4px 0; padding-left: 18px; }
    .ai-msg-bubble li { margin: 2px 0; }
    .ai-typing-indicator { display: flex; gap: 4px; padding: 10px 14px; background: #f1f5f9; border-radius: 0 16px 16px 16px; width: fit-content; }
    .ai-typing-dot { width: 7px; height: 7px; background: #94a3b8; border-radius: 50%; animation: aiTypingBounce 1.4s infinite ease-in-out; }
    .ai-typing-dot:nth-child(2) { animation-delay: 0.2s; }
    .ai-typing-dot:nth-child(3) { animation-delay: 0.4s; }
    @keyframes aiTypingBounce { 0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; } 40% { transform: scale(1); opacity: 1; } }
    .ai-action-card { background: #fefce8; border: 1px solid #fde68a; border-radius: 12px; padding: 12px 14px; margin-bottom: 8px; }
    .ai-action-card .ai-action-title { font-weight: 600; font-size: 0.85rem; color: #92400e; margin-bottom: 4px; }
    .ai-action-card .ai-action-desc { font-size: 0.82rem; color: #78716c; }
    .ai-action-btns { display: flex; gap: 8px; margin-top: 10px; }
    .ai-action-confirm { flex: 1; padding: 10px; border: none; border-radius: 10px; font-weight: 600; font-size: 0.85rem; cursor: pointer; transition: opacity 0.2s; }
    .ai-action-confirm.accept { background: linear-gradient(135deg, #10b981, #059669); color: white; }
    .ai-action-confirm.decline { background: #f1f5f9; color: var(--text-muted); }

    /* Adaptive Calorie Adjustment (rendered inside FITGotchi AI card) */
    .adaptive-snooze-options {
        display: flex;
        flex-direction: column;
        gap: 6px;
        margin-top: 10px;
    }
    .adaptive-snooze-btn {
        display: block;
        width: 100%;
        padding: 10px 14px;
        background: #f8fafc;
        border: 1px solid #e2e8f0;
        border-radius: 10px;
        color: var(--text-main);
        font-size: 0.82rem;
        cursor: pointer;
        text-align: left;
        transition: all 0.2s;
        line-height: 1.3;
    }
    .adaptive-snooze-btn:active {
        background: #f1f5f9;
        transform: scale(0.98);
    }
    .adaptive-snooze-btn .snooze-label {
        font-weight: 600;
        display: block;
    }
    .adaptive-snooze-btn .snooze-desc {
        font-size: 0.75rem;
        color: var(--text-muted);
        margin-top: 2px;
        display: block;
    }
    /* Adaptive Adjustment Confirmation Modal */
    .adaptive-modal-overlay {
        position: fixed;
        top: 0; left: 0; right: 0; bottom: 0;
        background: rgba(0,0,0,0.5);
        z-index: 10000;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s;
    }
    .adaptive-modal-overlay.active {
        opacity: 1;
        pointer-events: auto;
    }
    .adaptive-modal {
        background: white;
        border-radius: 20px;
        padding: 28px 24px;
        width: 90%;
        max-width: 360px;
        text-align: center;
        transform: scale(0.9);
        transition: transform 0.2s;
    }
    .adaptive-modal-overlay.active .adaptive-modal {
        transform: scale(1);
    }
    .adaptive-modal-icon {
        font-size: 2.5rem;
        margin-bottom: 12px;
    }
    .adaptive-modal-title {
        font-size: 1.15rem;
        font-weight: 700;
        color: var(--text-main);
        margin-bottom: 8px;
    }
    .adaptive-modal-body {
        font-size: 0.88rem;
        color: var(--text-muted);
        line-height: 1.5;
        margin-bottom: 20px;
    }
    .adaptive-modal-change {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        margin: 16px 0;
        padding: 14px;
        background: #f0fdf4;
        border-radius: 12px;
    }
    .adaptive-modal-old {
        font-size: 1rem;
        color: var(--text-muted);
        text-decoration: line-through;
    }
    .adaptive-modal-arrow {
        font-size: 1.2rem;
        color: var(--primary);
    }
    .adaptive-modal-new {
        font-size: 1.2rem;
        font-weight: 700;
        color: var(--primary);
    }
    .adaptive-modal-confirm {
        width: 100%;
        padding: 14px;
        background: linear-gradient(135deg, var(--primary), #059669);
        border: none;
        border-radius: 12px;
        color: white;
        font-size: 0.95rem;
        font-weight: 600;
        cursor: pointer;
        margin-bottom: 8px;
    }
    .adaptive-modal-cancel {
        width: 100%;
        padding: 10px;
        background: none;
        border: 1px solid #e5e7eb;
        border-radius: 12px;
        color: var(--text-muted);
        font-size: 0.88rem;
        cursor: pointer;
    }

    /* Photo Meal Journal */
    .meal-journal-card {
        background: white;
        border: 1px solid #e5e7eb;
        border-radius: 16px;
        padding: 20px;
        margin: 25px 0;
    }
    .journal-timeline {
        display: flex;
        flex-direction: column;
        gap: 12px;
        margin-top: 14px;
    }
    .journal-day {
        display: flex;
        gap: 12px;
        align-items: flex-start;
    }
    .journal-date-col {
        width: 45px;
        text-align: center;
        flex-shrink: 0;
    }
    .journal-date-day {
        font-size: 0.72rem;
        font-weight: 600;
        color: var(--text-muted);
        text-transform: uppercase;
    }
    .journal-date-num {
        font-size: 1.1rem;
        font-weight: 800;
        color: var(--text-main);
    }
    .journal-photos {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        flex: 1;
        padding-bottom: 4px;
        -webkit-overflow-scrolling: touch;
    }
    .journal-photo {
        width: 64px;
        height: 64px;
        border-radius: 10px;
        overflow: hidden;
        flex-shrink: 0;
        background: #f3f4f6;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .journal-photo img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .journal-photo .placeholder {
        font-size: 1.5rem;
    }
    .journal-day-cals {
        font-size: 0.75rem;
        color: var(--text-muted);
        margin-top: 4px;
        white-space: nowrap;
    }

    /* ============================================================
       ENHANCED NUTRITION TAB STYLES - PHASE 2
       ============================================================ */

    /* Weekly Score History */
    .score-history-card {
        background: white;
        border: 1px solid #e5e7eb;
        border-radius: 16px;
        padding: 20px;
        margin: 25px 0;
    }
    .score-history-bars {
        display: flex;
        align-items: flex-end;
        gap: 4px;
        height: 100px;
        margin-top: 14px;
        padding: 0 4px;
    }
    .score-bar-col {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        height: 100%;
        justify-content: flex-end;
    }
    .score-bar {
        width: 100%;
        border-radius: 6px 6px 2px 2px;
        min-height: 4px;
        transition: height 0.4s ease;
    }
    .score-bar-label {
        font-size: 0.65rem;
        font-weight: 600;
        color: var(--text-muted);
    }
    .score-bar-value {
        font-size: 0.7rem;
        font-weight: 700;
        color: var(--text-main);
    }

    /* Smart Meal Suggestions */
    .smart-suggestions-card {
        background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
        border: 1px solid #bfdbfe;
        border-radius: 16px;
        padding: 20px;
        margin: 25px 0;
    }
    .suggestion-list {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-top: 14px;
    }
    .suggestion-item {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px;
        background: white;
        border-radius: 12px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    }
    .suggestion-emoji {
        font-size: 1.6rem;
        flex-shrink: 0;
        width: 40px;
        text-align: center;
    }
    .suggestion-info {
        flex: 1;
        min-width: 0;
    }
    .suggestion-name {
        font-size: 0.88rem;
        font-weight: 700;
        color: var(--text-main);
        margin-bottom: 2px;
    }
    .suggestion-macros {
        font-size: 0.75rem;
        color: var(--text-muted);
    }
    .suggestion-tag {
        font-size: 0.68rem;
        font-weight: 700;
        padding: 3px 8px;
        border-radius: 12px;
        white-space: nowrap;
    }

    /* Hydration Tracker - Circular Cup */
    .hydration-circle-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 20px 0 10px 0;
        border-top: 1px solid #e5e7eb;
        margin-top: 20px;
    }
    .hydration-circle-header {
        display: flex;
        align-items: center;
        gap: 6px;
        margin-bottom: 16px;
        font-size: 0.9rem;
        font-weight: 700;
        color: #0369a1;
    }
    .hydration-circle-wrap {
        position: relative;
        width: 100px;
        height: 100px;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    .hydration-circle-wrap:active {
        transform: scale(0.95);
    }
    .hydration-circle-svg {
        width: 100%;
        height: 100%;
        transform: rotate(-90deg);
    }
    .hydration-circle-bg {
        fill: none;
        stroke: #e0f2fe;
        stroke-width: 8;
    }
    .hydration-circle-fill {
        fill: none;
        stroke: #0284c7;
        stroke-width: 8;
        stroke-linecap: round;
        transition: stroke-dashoffset 0.5s ease;
    }
    .hydration-cup-icon {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
        pointer-events: none;
    }
    .hydration-cup-svg {
        width: 28px;
        height: 28px;
        fill: #0284c7;
        transition: fill 0.3s ease;
    }
    .hydration-cup-count {
        font-size: 0.7rem;
        font-weight: 700;
        color: #0369a1;
    }
    .hydration-circle-label {
        margin-top: 8px;
        font-size: 0.78rem;
        color: #0369a1;
        font-weight: 600;
    }
    .hydration-circle-hint {
        font-size: 0.68rem;
        color: #7dd3fc;
        margin-top: 2px;
    }
    .hydration-ripple {
        animation: hydrationRipple 0.4s ease-out;
    }
    @keyframes hydrationRipple {
        0% { transform: scale(1); }
        50% { transform: scale(1.08); }
        100% { transform: scale(1); }
    }

    /* Water bar (new design) */
    .progress-fill-water {
        height: 100%;
        background: linear-gradient(90deg, #7dd3fc, #0284c7);
        border-radius: 3px;
        transition: width 0.5s ease;
    }
    .water-amount-btn {
        background: #f0f9ff;
        border: 1.5px solid #bae6fd;
        border-radius: 8px;
        padding: 9px 4px;
        color: #0284c7;
        font-size: 0.78rem;
        font-weight: 700;
        cursor: pointer;
        transition: all 0.15s ease;
        -webkit-tap-highlight-color: transparent;
    }
    .water-amount-btn.selected {
        background: #0284c7;
        border-color: #0284c7;
        color: #fff;
    }
    .water-amount-btn:active {
        transform: scale(0.94);
    }

    /* Weekly Trends Button */
    .weekly-trends-btn {
        width: 100%;
        padding: 16px 20px;
        background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
        border: 1px solid #cbd5e1;
        border-radius: 12px;
        font-size: 1rem;
        font-weight: 600;
        color: var(--text-main);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 25px 0;
        transition: transform 0.15s ease, box-shadow 0.15s ease;
    }
    .weekly-trends-btn:active {
        transform: scale(0.98);
    }
    .weekly-trends-btn-left {
        display: flex;
        align-items: center;
        gap: 10px;
    }
    .weekly-trends-btn-arrow {
        font-size: 1.2rem;
        color: var(--text-muted);
    }

    /* Weekly Trends Page */
    .weekly-trends-page {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: var(--bg-main, #f5f5f5);
        z-index: 200000;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    .weekly-trends-page.active {
        display: block;
    }
    .weekly-trends-page-header {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 16px 20px;
        padding-top: calc(15px + env(safe-area-inset-top, 0px));
        background: white;
        border-bottom: 1px solid #e5e7eb;
        position: sticky;
        top: 0;
        z-index: 10;
    }
    .weekly-trends-page-title {
        font-size: 1.2rem;
        font-weight: 700;
        color: var(--text-main);
    }
    .weekly-trends-page-content {
        padding: 20px;
        padding-bottom: 100px;
    }

    /* Macro Ratio Pie Chart */
    .macro-pie-card {
        background: white;
        border: 1px solid #e5e7eb;
        border-radius: 16px;
        padding: 20px;
        margin: 25px 0;
    }
    .macro-pie-container {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 24px;
        margin-top: 14px;
    }
    .macro-pie-svg {
        width: 120px;
        height: 120px;
        flex-shrink: 0;
    }
    .macro-pie-legend {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    .macro-pie-legend-item {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 0.82rem;
    }
    .macro-legend-dot {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        flex-shrink: 0;
    }
    .macro-legend-label {
        color: var(--text-muted);
    }
    .macro-legend-value {
        font-weight: 700;
        color: var(--text-main);
        margin-left: auto;
    }

    /* Meal Prep Score */
    .meal-prep-card {
        background: linear-gradient(135deg, #fefce8 0%, #fef9c3 100%);
        border: 1px solid #fde047;
        border-radius: 16px;
        padding: 20px;
        margin: 25px 0;
    }
    .prep-score-ring {
        position: relative;
        width: 70px;
        height: 70px;
    }
    .prep-score-ring svg { width: 100%; height: 100%; }
    .prep-score-value {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 1.2rem;
        font-weight: 800;
        color: #854d0e;
    }
    .prep-stats {
        display: flex;
        gap: 12px;
        margin-top: 14px;
    }
    .prep-stat {
        flex: 1;
        text-align: center;
        padding: 10px 8px;
        background: rgba(255,255,255,0.7);
        border-radius: 10px;
    }
    .prep-stat-value {
        font-size: 1.2rem;
        font-weight: 700;
        color: #854d0e;
    }
    .prep-stat-label {
        font-size: 0.72rem;
        color: #a16207;
        margin-top: 2px;
    }

    /* Nutrition Badges */
    .badges-card {
        background: white;
        border: 1px solid #e5e7eb;
        border-radius: 16px;
        padding: 20px;
        margin: 25px 0;
    }
    .badges-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
        margin-top: 14px;
    }
    .badge-item {
        text-align: center;
        padding: 12px 6px;
        border-radius: 12px;
        background: #f9fafb;
        border: 2px solid #e5e7eb;
        transition: all 0.3s ease;
    }
    .badge-item.earned {
        background: linear-gradient(135deg, #f0fdf4, #dcfce7);
        border-color: #86efac;
    }
    .badge-item.locked {
        opacity: 0.5;
    }
    .badge-icon {
        font-size: 1.6rem;
        margin-bottom: 4px;
    }
    .badge-name {
        font-size: 0.7rem;
        font-weight: 700;
        color: var(--text-main);
        line-height: 1.2;
    }
    .badge-progress {
        font-size: 0.62rem;
        color: var(--text-muted);
        margin-top: 2px;
    }

    /* User Profile Page */
    .up-pb-card {
        background: white;
        border-radius: 10px;
        padding: 8px 6px;
        border: 1px solid #f1f5f9;
        text-align: center;
        transition: transform 0.2s;
    }
    .up-pb-card:active {
        transform: scale(0.97);
    }
    .up-pb-weight {
        font-size: 1rem;
        font-weight: 800;
        color: var(--text-main);
        margin-bottom: 1px;
    }
    .up-pb-exercise {
        font-size: 0.65rem;
        color: var(--text-muted);
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.3px;
        margin-bottom: 2px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .up-pb-reps {
        font-size: 0.6rem;
        color: var(--primary);
        font-weight: 500;
    }
    .up-badge-card {
        text-align: center;
        padding: 14px 8px;
        border-radius: 14px;
        background: white;
        border: 1px solid #f1f5f9;
    }
    .up-badge-card.earned {
        background: linear-gradient(135deg, #f0fdf4, #dcfce7);
        border-color: #86efac;
    }
    .up-badge-emoji {
        font-size: 1.6rem;
        margin-bottom: 4px;
    }
    .up-badge-label {
        font-size: 0.68rem;
        font-weight: 700;
        color: var(--text-main);
        line-height: 1.2;
    }
    .up-post-thumb {
        aspect-ratio: 1;
        background: #f1f5f9;
        overflow: hidden;
        cursor: pointer;
        position: relative;
    }
    .up-post-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
    .up-post-thumb .up-post-overlay {
        position: absolute;
        inset: 0;
        background: rgba(0,0,0,0.3);
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transition: opacity 0.2s;
    }
    .up-post-thumb:active .up-post-overlay {
        opacity: 1;
    }
    .up-post-card-thumb {
        aspect-ratio: 1;
        background: linear-gradient(135deg, var(--primary), var(--secondary));
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        position: relative;
    }
    .up-post-card-thumb span {
        font-size: 2rem;
    }

    /* Social Comparison */
    .social-compare-card {
        background: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 100%);
        border: 1px solid #e9d5ff;
        border-radius: 16px;
        padding: 20px;
        margin: 25px 0;
    }
    .social-stat-row {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 12px;
        background: rgba(255,255,255,0.7);
        border-radius: 10px;
        margin-bottom: 8px;
    }
    .social-stat-row:last-child { margin-bottom: 0; }
    .social-percentile {
        font-size: 1.1rem;
        font-weight: 800;
        color: #7c3aed;
        width: 50px;
        flex-shrink: 0;
    }
    .social-bar-bg {
        flex: 1;
        height: 8px;
        background: #e9d5ff;
        border-radius: 4px;
        overflow: hidden;
    }
    .social-bar-fill {
        height: 100%;
        background: linear-gradient(90deg, #a78bfa, #7c3aed);
        border-radius: 4px;
        transition: width 0.5s ease;
    }
    .social-stat-label {
        font-size: 0.78rem;
        color: #6b21a8;
        width: 60px;
        flex-shrink: 0;
    }

    /* Camera Button Large */
    .camera-btn-large {
        background: var(--primary);
        color: white;
        border: none;
        border-radius: 16px;
        padding: 16px 32px;
        font-size: 1.1rem;
        font-weight: 600;
        display: inline-flex;
        align-items: center;
        gap: 12px;
        cursor: pointer;
        transition: all 0.2s ease;
        box-shadow: 0 4px 12px rgba(123, 168, 131, 0.3);
    }

    .camera-btn-large:hover {
        background: var(--primary-light);
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(123, 168, 131, 0.4);
    }

    .camera-btn-large:active {
        transform: translateY(0);
    }

    .meal-icon-btn {
        background: var(--primary);
        color: white;
        border: none;
        border-radius: 50%;
        width: 64px;
        height: 64px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.2s ease;
        box-shadow: 0 4px 12px rgba(123, 168, 131, 0.3);
    }

    .meal-icon-btn:hover {
        background: var(--primary-light);
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(123, 168, 131, 0.4);
    }

    .meal-icon-btn:active {
        transform: translateY(0);
    }

    /* Recent Meals Modal */
    .recent-meals-modal {
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.85);
        z-index: 10011;
        display: none;
        flex-direction: column;
        align-items: center;
        justify-content: flex-end;
        backdrop-filter: blur(10px);
    }

    .recent-meals-modal.visible {
        display: flex;
    }

    .recent-meals-container {
        background: white;
        border-radius: 20px 20px 0 0;
        width: 100%;
        max-width: 500px;
        max-height: 80vh;
        display: flex;
        flex-direction: column;
        box-shadow: 0 -10px 40px rgba(0,0,0,0.3);
        animation: slideUpRecent 0.3s ease;
    }

    @keyframes slideUpRecent {
        from { transform: translateY(100%); opacity: 0; }
        to { transform: translateY(0); opacity: 1; }
    }

    .recent-meals-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20px 24px 16px;
        border-bottom: 1px solid #f0f0f0;
        flex-shrink: 0;
    }

    .recent-meals-header h3 {
        margin: 0;
        font-size: 1.15rem;
        color: var(--text-main);
    }

    .recent-meals-close {
        background: none;
        border: none;
        font-size: 1.8rem;
        color: var(--text-muted);
        cursor: pointer;
        padding: 0;
        line-height: 1;
    }

    .recent-meals-list {
        overflow-y: auto;
        padding: 12px 16px 24px;
        flex: 1;
    }

    .recent-meal-item {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 14px 12px;
        border-radius: 14px;
        cursor: pointer;
        transition: background 0.15s ease;
        border: 1px solid transparent;
    }

    .recent-meal-item:hover {
        background: #f8faf8;
        border-color: #e8f0e8;
    }

    .recent-meal-item:active {
        background: #f0f5f0;
    }

    .recent-meal-icon {
        width: 44px;
        height: 44px;
        border-radius: 12px;
        background: #f0f5f0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.4rem;
        flex-shrink: 0;
        overflow: hidden;
    }

    .recent-meal-icon img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .recent-meal-info {
        flex: 1;
        min-width: 0;
    }

    .recent-meal-name {
        font-weight: 600;
        font-size: 0.95rem;
        color: var(--text-main);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .recent-meal-macros {
        font-size: 0.8rem;
        color: var(--text-muted);
        margin-top: 3px;
    }

    .recent-meal-add {
        flex-shrink: 0;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: var(--primary);
        color: white;
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        font-size: 1.3rem;
        transition: all 0.15s ease;
    }

    .recent-meal-add:hover {
        background: var(--primary-light);
        transform: scale(1.1);
    }

    .recent-meals-empty {
        text-align: center;
        padding: 40px 20px;
        color: var(--text-muted);
    }

    .recent-meals-empty svg {
        margin-bottom: 12px;
        opacity: 0.4;
    }

    .recent-meal-confirm {
        padding: 20px 24px 28px;
        display: none;
    }

    .recent-meal-confirm.active {
        display: block;
    }

    .recent-meal-confirm-info {
        text-align: center;
        margin-bottom: 20px;
    }

    .recent-meal-confirm-name {
        font-weight: 700;
        font-size: 1.05rem;
        color: var(--text-main);
        margin-bottom: 6px;
    }

    .recent-meal-confirm-macros {
        font-size: 0.85rem;
        color: var(--text-muted);
    }

    .recent-meal-confirm-btns {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .recent-meal-btn-photo {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
        padding: 14px 20px;
        background: var(--primary);
        color: white;
        border: none;
        border-radius: 14px;
        font-size: 1rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.15s ease;
    }

    .recent-meal-btn-photo:hover {
        background: var(--primary-light);
    }

    .recent-meal-btn-photo .xp-badge {
        background: rgba(255,255,255,0.25);
        padding: 2px 8px;
        border-radius: 10px;
        font-size: 0.75rem;
        font-weight: 700;
    }

    .recent-meal-btn-quick {
        width: 100%;
        padding: 14px 20px;
        background: #f0f5f0;
        color: var(--text-main);
        border: none;
        border-radius: 14px;
        font-size: 1rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.15s ease;
    }

    .recent-meal-btn-quick:hover {
        background: #e5ede5;
    }

    .recent-meal-confirm-back {
        text-align: center;
        margin-top: 14px;
    }

    .recent-meal-confirm-back button {
        background: none;
        border: none;
        color: var(--text-muted);
        font-size: 0.9rem;
        cursor: pointer;
        text-decoration: underline;
    }

    /* Recent Meals — Recent / Saved tab toggle */
    .recent-meals-tabs {
        display: flex;
        gap: 8px;
        padding: 12px 20px 4px;
        flex-shrink: 0;
    }

    .recent-meals-tab {
        flex: 1;
        padding: 10px 14px;
        background: #f4f7f4;
        color: var(--text-muted);
        border: none;
        border-radius: 12px;
        font-size: 0.9rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.15s ease;
    }

    .recent-meals-tab.active {
        background: var(--primary);
        color: #fff;
        box-shadow: 0 2px 8px rgba(123,168,131,0.25);
    }

    /* ==========================================
       MEAL BUILDER MODAL
       ========================================== */
    .meal-builder-modal {
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.85);
        z-index: 10013;
        display: none;
        flex-direction: column;
        align-items: center;
        justify-content: flex-end;
        backdrop-filter: blur(10px);
        transition: background 0.3s ease, backdrop-filter 0.3s ease;
    }

    .meal-builder-modal.visible {
        display: flex;
    }

    /* Temporarily hide the builder modal while the camera is open so the
       camera view is unobstructed, then slide the container back up when
       the camera closes. Keeps display:flex so the transition runs. */
    .meal-builder-modal.hidden-for-camera {
        background: transparent;
        backdrop-filter: none;
        pointer-events: none;
    }

    .meal-builder-modal.hidden-for-camera .meal-builder-container {
        transform: translateY(100%);
    }

    .meal-builder-container {
        background: white;
        border-radius: 20px 20px 0 0;
        width: 100%;
        max-width: 500px;
        max-height: 88vh;
        display: flex;
        flex-direction: column;
        box-shadow: 0 -10px 40px rgba(0,0,0,0.3);
        animation: slideUpRecent 0.3s ease;
        transition: transform 0.3s cubic-bezier(.4,0,.2,1);
    }

    .meal-builder-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20px 24px 14px;
        border-bottom: 1px solid #f0f0f0;
        flex-shrink: 0;
    }

    .meal-builder-header h3 {
        margin: 0;
        font-size: 1.15rem;
        color: var(--text-main);
    }

    .meal-builder-close {
        background: none;
        border: none;
        font-size: 1.8rem;
        color: var(--text-muted);
        cursor: pointer;
        padding: 0;
        line-height: 1;
    }

    .meal-builder-body {
        overflow-y: auto;
        padding: 16px 20px 20px;
        flex: 1;
    }

    .meal-builder-name-input {
        width: 100%;
        padding: 12px 14px;
        border: 1px solid #e5ede5;
        border-radius: 12px;
        font-size: 0.95rem;
        font-weight: 600;
        color: var(--text-main);
        background: #fafcfa;
        box-sizing: border-box;
        transition: border-color 0.15s ease;
    }

    .meal-builder-name-input:focus {
        outline: none;
        border-color: var(--primary);
        background: #fff;
    }

    .meal-builder-name-input::placeholder {
        color: var(--text-muted);
        font-weight: 500;
    }

    .meal-builder-totals {
        margin-top: 14px;
        padding: 14px 16px;
        background: linear-gradient(135deg, #f1f8f2, #e8f5e9);
        border-radius: 14px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
    }

    .meal-builder-total-main {
        display: flex;
        align-items: baseline;
        gap: 6px;
    }

    .meal-builder-total-cal {
        font-size: 1.6rem;
        font-weight: 800;
        color: var(--text-main);
        line-height: 1;
    }

    .meal-builder-total-label {
        font-size: 0.75rem;
        color: var(--text-muted);
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .meal-builder-total-macros {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    .meal-builder-macro {
        display: flex;
        align-items: center;
        gap: 5px;
        font-size: 0.78rem;
        color: var(--text-muted);
    }

    .meal-builder-macro strong {
        color: var(--text-main);
        font-weight: 700;
    }

    .meal-builder-macro .dot {
        display: inline-block;
        width: 7px;
        height: 7px;
        border-radius: 50%;
    }

    .meal-builder-items {
        margin-top: 16px;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .meal-builder-empty {
        text-align: center;
        padding: 28px 16px 12px;
        color: var(--text-muted);
    }

    .meal-builder-empty svg {
        margin-bottom: 8px;
        opacity: 0.4;
    }

    .meal-builder-empty p {
        margin: 0;
        font-size: 0.9rem;
        line-height: 1.4;
    }

    .meal-builder-item {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px 14px;
        border-radius: 12px;
        background: #fafcfa;
        border: 1px solid #eef2ee;
        animation: fadeIn 0.2s ease;
    }

    .meal-builder-item-info {
        flex: 1;
        min-width: 0;
    }

    .meal-builder-item-name {
        font-weight: 600;
        font-size: 0.92rem;
        color: var(--text-main);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .meal-builder-item-meta {
        font-size: 0.75rem;
        color: var(--text-muted);
        margin-top: 2px;
    }

    .meal-builder-item-remove {
        flex-shrink: 0;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background: #f4f0f0;
        color: #c44;
        border: none;
        cursor: pointer;
        font-size: 1.1rem;
        line-height: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.15s ease;
    }

    .meal-builder-item-remove:hover {
        background: #ffe4e4;
        transform: scale(1.05);
    }

    .meal-builder-add-row {
        margin-top: 18px;
        padding-top: 16px;
        border-top: 1px dashed #e8eee8;
    }

    .meal-builder-add-label {
        font-size: 0.75rem;
        font-weight: 700;
        color: var(--text-muted);
        text-transform: uppercase;
        letter-spacing: 0.7px;
        margin-bottom: 10px;
    }

    .meal-builder-add-btns {
        display: flex;
        gap: 10px;
    }

    .meal-builder-add-btn {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 6px;
        padding: 14px 10px;
        background: #f4f7f4;
        color: var(--text-main);
        border: 1px solid #e5ede5;
        border-radius: 14px;
        font-size: 0.85rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.15s ease;
    }

    .meal-builder-add-btn:hover {
        background: #e8f0e8;
        border-color: var(--primary-light);
        transform: translateY(-1px);
    }

    .meal-builder-add-btn:active {
        transform: translateY(0);
    }

    .meal-builder-add-btn svg {
        color: var(--primary);
    }

    .meal-builder-footer {
        padding: 14px 20px 22px;
        border-top: 1px solid #f0f0f0;
        flex-shrink: 0;
        background: #fff;
    }

    .meal-builder-save-btn {
        width: 100%;
        padding: 14px 20px;
        background: var(--primary);
        color: white;
        border: none;
        border-radius: 14px;
        font-size: 1rem;
        font-weight: 700;
        cursor: pointer;
        transition: all 0.15s ease;
    }

    .meal-builder-save-btn:hover:not(:disabled) {
        background: var(--primary-light);
    }

    .meal-builder-save-btn:disabled {
        opacity: 0.4;
        cursor: not-allowed;
    }

    /* Meal Builder Text-Input Mini-Modal */
    .meal-builder-text-modal {
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.6);
        z-index: 10015;
        display: none;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        backdrop-filter: blur(6px);
    }

    .meal-builder-text-modal.visible {
        display: flex;
    }

    .meal-builder-text-container {
        background: white;
        border-radius: 18px;
        width: 90%;
        max-width: 380px;
        padding: 22px;
        box-shadow: 0 20px 40px rgba(0,0,0,0.3);
    }

    .meal-builder-text-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 14px;
    }

    .meal-builder-text-header h4 {
        margin: 0;
        font-size: 1.05rem;
        color: var(--text-main);
    }

    .meal-builder-text-close {
        background: none;
        border: none;
        font-size: 1.6rem;
        color: var(--text-muted);
        cursor: pointer;
        padding: 0;
        line-height: 1;
    }

    .meal-builder-text-input {
        width: 100%;
        min-height: 80px;
        padding: 12px 14px;
        border: 1px solid #e5ede5;
        border-radius: 12px;
        font-size: 0.95rem;
        color: var(--text-main);
        background: #fafcfa;
        font-family: inherit;
        resize: vertical;
        box-sizing: border-box;
    }

    .meal-builder-text-input:focus {
        outline: none;
        border-color: var(--primary);
        background: #fff;
    }

    .meal-builder-text-submit {
        width: 100%;
        margin-top: 12px;
        padding: 12px 18px;
        background: var(--primary);
        color: white;
        border: none;
        border-radius: 12px;
        font-size: 0.95rem;
        font-weight: 700;
        cursor: pointer;
        transition: all 0.15s ease;
    }

    .meal-builder-text-submit:disabled {
        opacity: 0.4;
        cursor: not-allowed;
    }

    /* Simple Text Input Modal */
    .meal-text-modal {
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.85);
        z-index: 10011;
        display: none;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        backdrop-filter: blur(10px);
    }

    .meal-text-modal.visible {
        display: flex;
    }

    .meal-text-modal-container {
        background: white;
        border-radius: 20px;
        width: 90%;
        max-width: 400px;
        padding: 24px;
        box-shadow: 0 20px 40px rgba(0,0,0,0.3);
    }

    .meal-text-modal-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
    }

    .meal-text-modal-header h3 {
        margin: 0;
        color: var(--primary);
        font-size: 1.3rem;
    }

    .meal-text-modal-close {
        background: none;
        border: none;
        font-size: 1.8rem;
        color: #999;
        cursor: pointer;
        padding: 0;
        line-height: 1;
    }

    .meal-text-modal-close:hover {
        color: #666;
    }

    .meal-photo-type-pill {
        flex: 1;
        padding: 8px 4px;
        border: 2px solid rgba(255,255,255,0.3);
        border-radius: 20px;
        background: rgba(0,0,0,0.5);
        backdrop-filter: blur(10px);
        cursor: pointer;
        font-size: 0.82rem;
        font-weight: 600;
        color: rgba(255,255,255,0.7);
        text-align: center;
        transition: all 0.2s ease;
        font-family: inherit;
    }

    .meal-photo-type-pill.active {
        border-color: var(--primary);
        background: rgba(123, 168, 131, 0.35);
        color: white;
    }

    .meal-photo-type-pill:hover:not(.active) {
        border-color: rgba(255,255,255,0.5);
        color: white;
    }

    .simple-meal-type-row {
        display: flex;
        gap: 8px;
        margin-bottom: 14px;
    }

    .simple-meal-type-bubble {
        flex: 1;
        padding: 8px 4px;
        border: 2px solid #e0e0e0;
        border-radius: 20px;
        background: white;
        cursor: pointer;
        font-size: 0.82rem;
        font-weight: 600;
        color: #999;
        text-align: center;
        transition: all 0.2s ease;
        font-family: inherit;
    }

    .simple-meal-type-bubble.active {
        border-color: var(--primary);
        background: rgba(123, 168, 131, 0.12);
        color: var(--primary);
    }

    .simple-meal-type-bubble:hover:not(.active) {
        border-color: #ccc;
        color: #666;
    }

    .simple-meal-textarea {
        width: 100%;
        min-height: 120px;
        padding: 16px;
        border: 2px solid #e0e0e0;
        border-radius: 12px;
        font-size: 1rem;
        font-family: inherit;
        resize: vertical;
        box-sizing: border-box;
        transition: border-color 0.2s ease;
    }

    .simple-meal-textarea:focus {
        outline: none;
        border-color: var(--primary);
    }

    .simple-meal-submit {
        width: 100%;
        background: var(--primary);
        color: white;
        border: none;
        border-radius: 12px;
        padding: 16px;
        font-size: 1.1rem;
        font-weight: 600;
        cursor: pointer;
        margin-top: 16px;
        transition: all 0.2s ease;
    }

    .simple-meal-submit:hover:not(:disabled) {
        background: var(--primary-light);
    }

    .simple-meal-submit:disabled {
        background: #ccc;
        cursor: not-allowed;
    }

    /* Meal Input Modal Styles */
    .meal-input-modal {
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.85);
        z-index: 10011;
        display: none;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        backdrop-filter: blur(10px);
    }

    .meal-input-modal.visible {
        display: flex;
    }

    .meal-input-container {
        width: 92%;
        max-width: 420px;
        background: white;
        border-radius: 24px;
        overflow: hidden;
        box-shadow: 0 20px 60px rgba(0,0,0,0.4);
        max-height: 90vh;
        overflow-y: auto;
    }

    .meal-input-header {
        padding: 20px 24px;
        border-bottom: 1px solid #f0f0f0;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .meal-input-header h3 {
        margin: 0;
        font-size: 1.25rem;
        color: var(--primary);
    }

    .meal-input-close {
        background: none;
        border: none;
        font-size: 1.5rem;
        cursor: pointer;
        color: var(--text-muted);
        padding: 4px;
    }

    .meal-type-selector {
        display: flex;
        gap: 10px;
        padding: 20px 24px;
        background: #f8f9fa;
        overflow-x: auto;
    }

    .meal-type-btn {
        flex: 1;
        min-width: 70px;
        padding: 12px 8px;
        border: 2px solid #e0e0e0;
        border-radius: 12px;
        background: white;
        cursor: pointer;
        text-align: center;
        transition: all 0.2s ease;
    }

    .meal-type-btn.active {
        border-color: var(--primary);
        background: rgba(123, 168, 131, 0.1);
    }

    .meal-type-btn:hover:not(.active) {
        border-color: var(--primary-light);
    }

    .meal-type-emoji {
        font-size: 1.5rem;
        display: block;
        margin-bottom: 4px;
    }

    .meal-type-label {
        font-size: 0.75rem;
        color: var(--text-muted);
        font-weight: 500;
    }

    .meal-type-btn.active .meal-type-label {
        color: var(--primary);
    }

    .meal-input-methods {
        padding: 24px;
    }

    .input-method-btn {
        width: 100%;
        padding: 18px 20px;
        margin-bottom: 12px;
        border: 2px solid #e5e7eb;
        border-radius: 16px;
        background: white;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 16px;
        transition: all 0.2s ease;
    }

    .input-method-btn:hover {
        border-color: var(--primary);
        background: rgba(123, 168, 131, 0.05);
        transform: translateX(4px);
    }

    .input-method-icon {
        width: 48px;
        height: 48px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.5rem;
    }

    .input-method-icon.photo { background: #e3f2fd; }
    .input-method-icon.text { background: #fff3e0; }
    .input-method-icon.voice { background: #fce4ec; }

    .input-method-info {
        flex: 1;
        text-align: left;
    }

    .input-method-title {
        font-size: 1rem;
        font-weight: 600;
        color: var(--text-main);
        margin-bottom: 2px;
    }

    .input-method-desc {
        font-size: 0.85rem;
        color: var(--text-muted);
    }

    /* Text Input Section */
    .meal-text-section {
        display: none;
        padding: 24px;
        border-top: 1px solid #f0f0f0;
    }

    .meal-text-section.visible {
        display: block;
    }

    .meal-text-input {
        width: 100%;
        min-height: 100px;
        padding: 16px;
        border: 2px solid #e5e7eb;
        border-radius: 16px;
        font-size: 1rem;
        font-family: inherit;
        resize: vertical;
        transition: border-color 0.2s ease;
    }

    .meal-text-input:focus {
        outline: none;
        border-color: var(--primary);
    }

    .meal-text-input::placeholder {
        color: #aaa;
    }

    .meal-text-examples {
        margin-top: 12px;
        padding: 12px;
        background: #f8f9fa;
        border-radius: 12px;
    }

    .meal-text-examples p {
        margin: 0 0 8px 0;
        font-size: 0.85rem;
        color: var(--text-muted);
    }

    .meal-text-examples ul {
        margin: 0;
        padding-left: 20px;
        font-size: 0.8rem;
        color: var(--text-muted);
    }

    .meal-text-examples li {
        margin-bottom: 4px;
    }

    /* Voice Input Section */
    .meal-voice-section {
        display: none;
        padding: 24px;
        border-top: 1px solid #f0f0f0;
        text-align: center;
    }

    .meal-voice-section.visible {
        display: block;
    }

    .voice-record-btn {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        border: none;
        background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
        color: white;
        font-size: 2.5rem;
        cursor: pointer;
        box-shadow: 0 8px 25px rgba(239, 68, 68, 0.4);
        transition: all 0.2s ease;
        margin: 20px 0;
    }

    .voice-record-btn:hover {
        transform: scale(1.05);
    }

    .voice-record-btn.recording {
        animation: pulse-recording 1.5s infinite;
    }

    @keyframes pulse-recording {
        0%, 100% { transform: scale(1); box-shadow: 0 8px 25px rgba(239, 68, 68, 0.4); }
        50% { transform: scale(1.1); box-shadow: 0 12px 35px rgba(239, 68, 68, 0.6); }
    }

    .voice-status {
        font-size: 0.95rem;
        color: var(--text-muted);
        margin: 15px 0;
    }

    .voice-transcript {
        padding: 16px;
        background: #f8f9fa;
        border-radius: 12px;
        min-height: 60px;
        text-align: left;
        font-size: 0.95rem;
        color: var(--text-main);
        margin-top: 15px;
    }

    .voice-transcript.empty {
        color: #aaa;
        font-style: italic;
    }

    .voice-transcript-wrapper {
        position: relative;
        margin-top: 15px;
    }

    .voice-transcript-wrapper .voice-transcript {
        margin-top: 0;
    }

    .voice-transcript-delete {
        display: block;
        margin: 12px auto 0;
        padding: 8px 20px;
        background: #f3f4f6;
        border: 1px solid #d1d5db;
        border-radius: 8px;
        color: #6b7280;
        font-size: 0.875rem;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .voice-transcript-delete:hover {
        background: #fee2e2;
        border-color: #fca5a5;
        color: #dc2626;
    }

    /* Submit Button */
    .meal-submit-section {
        padding: 20px 24px 24px;
        display: none;
    }

    .meal-submit-section.visible {
        display: block;
    }

    .meal-submit-btn {
        width: 100%;
        padding: 16px;
        background: var(--primary);
        color: white;
        border: none;
        border-radius: 14px;
        font-size: 1.1rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .meal-submit-btn:hover {
        background: var(--primary-light);
    }

    .meal-submit-btn:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

    /* Meals Log List */
    #meals-log-list {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .meal-log-card {
        background: var(--surface);
        color: var(--text-main);
        border: 1px solid var(--chat-border-coach, rgba(113, 128, 150, 0.18));
        border-radius: 12px;
        padding: 12px;
        display: flex;
        gap: 12px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        align-items: center;
        transition: all 0.2s ease;
    }

    .meal-log-card:hover {
        border-color: color-mix(in srgb, var(--primary) 28%, var(--chat-border-coach, rgba(113, 128, 150, 0.18)));
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
    }

    .meal-log-image {
        width: 80px;
        height: 80px;
        border-radius: 8px;
        background-size: cover;
        background-position: center;
        background-color: var(--accent-green);
        color: var(--text-muted);
        flex-shrink: 0;
    }

    .meal-log-content {
        flex: 1;
        min-width: 0;
    }

    .meal-log-time {
        font-size: 0.75rem;
        color: var(--text-muted);
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-bottom: 4px;
    }

    .meal-type-tag {
        display: inline-block;
        background: var(--accent-green);
        color: var(--text-main);
        border: 1px solid var(--chat-border-coach, rgba(113, 128, 150, 0.18));
        font-size: 0.6rem;
        font-weight: 700;
        padding: 1px 6px;
        border-radius: 8px;
        text-transform: uppercase;
        letter-spacing: 0.3px;
        vertical-align: middle;
        margin-right: 2px;
    }

    .meal-log-foods {
        font-size: 0.95rem;
        font-weight: 600;
        color: var(--text-main);
        margin-bottom: 6px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .meal-log-macros {
        display: flex;
        gap: 10px;
        font-size: 0.8rem;
        color: var(--text-muted);
    }

    .meal-log-macros span {
        white-space: nowrap;
    }

    /* Verification Badge Styles */
    .verified-badge {
        display: inline-flex;
        align-items: center;
        gap: 3px;
        font-size: 0.65rem;
        font-weight: 700;
        background: #10b981;
        color: white;
        padding: 2px 6px;
        border-radius: 4px;
        text-transform: uppercase;
        margin-left: 6px;
        letter-spacing: 0.5px;
    }

    .verified-badge-pill {
        display: inline-flex;
        align-items: center;
        gap: 3px;
        font-size: 0.65rem;
        background: #ecfdf5;
        color: #059669;
        border: 1px solid #10b981;
        padding: 1px 5px;
        border-radius: 10px;
        font-weight: 600;
    }

    .verified-badge-pill svg {
        width: 10px;
        height: 10px;
        fill: currentColor;
    }

    .meal-log-delete {
        background: none;
        border: none;
        color: #ef4444;
        cursor: pointer;
        padding: 8px;
        border-radius: 8px;
        transition: all 0.2s ease;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .meal-log-delete:hover {
        background: rgba(239, 68, 68, 0.12);
    }

    /* Make meal card clickable area */
    .meal-log-card {
        cursor: pointer;
    }

    .meal-log-card .meal-log-clickable {
        display: flex;
        gap: 12px;
        flex: 1;
        min-width: 0;
        align-items: center;
    }

    /* Meal Detail Popup Styles */
    .meal-detail-popup {
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.85);
        z-index: 10012;
        display: none;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        backdrop-filter: blur(10px);
    }

    .meal-detail-popup.visible {
        display: flex;
    }

    .meal-detail-container {
        width: 92%;
        max-width: 400px;
        background: white;
        border-radius: 24px;
        overflow: hidden;
        box-shadow: 0 20px 60px rgba(0,0,0,0.4);
        max-height: 90vh;
        overflow-y: auto;
    }

    .meal-detail-photo {
        width: 100%;
        aspect-ratio: 4/3;
        background-size: cover;
        background-position: center;
        background-color: #f0f0f0;
        position: relative;
    }

    .meal-detail-photo-placeholder {
        width: 100%;
        aspect-ratio: 4/3;
        background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 4rem;
        position: relative;
    }

    .meal-detail-close {
        position: absolute;
        top: 12px;
        right: 12px;
        width: 36px;
        height: 36px;
        background: rgba(255,255,255,0.9);
        border: none;
        border-radius: 50%;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.25rem;
        color: var(--text-muted);
        box-shadow: 0 2px 8px rgba(0,0,0,0.15);
        transition: all 0.2s ease;
    }

    .meal-detail-close:hover {
        background: white;
        transform: scale(1.1);
    }

    .meal-detail-content {
        padding: 20px 24px 24px;
    }

    .meal-detail-header {
        margin-bottom: 16px;
    }

    .meal-detail-time {
        font-size: 0.8rem;
        color: var(--text-muted);
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-bottom: 4px;
    }

    .meal-detail-foods {
        font-size: 1.1rem;
        font-weight: 600;
        color: var(--text-main);
        line-height: 1.4;
    }

    .meal-detail-calories {
        text-align: center;
        padding: 20px;
        background: linear-gradient(135deg, rgba(123, 168, 131, 0.1) 0%, rgba(123, 168, 131, 0.05) 100%);
        border-radius: 16px;
        margin-bottom: 16px;
    }

    .meal-detail-calories-value {
        font-size: 2.5rem;
        font-weight: 700;
        color: var(--primary);
        line-height: 1;
    }

    .meal-detail-calories-label {
        font-size: 0.85rem;
        color: var(--text-muted);
        margin-top: 4px;
    }

    .meal-detail-macros {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }

    .meal-detail-macro {
        text-align: center;
        padding: 16px 12px;
        background: #f8f9fa;
        border-radius: 12px;
    }

    .meal-detail-macro-value {
        font-size: 1.5rem;
        font-weight: 700;
        color: var(--text-main);
        line-height: 1;
    }

    .meal-detail-macro-label {
        font-size: 0.75rem;
        color: var(--text-muted);
        margin-top: 4px;
        font-weight: 500;
    }

    .meal-detail-macro.protein .meal-detail-macro-value {
        color: #ef4444;
    }

    .meal-detail-macro.carbs .meal-detail-macro-value {
        color: #f59e0b;
    }

    .meal-detail-macro.fat .meal-detail-macro-value {
        color: #3b82f6;
    }

    .meal-detail-items {
        margin-top: 20px;
        padding-top: 16px;
        border-top: 1px solid #f0f0f0;
    }

    .meal-detail-items-title {
        font-size: 0.85rem;
        font-weight: 600;
        color: var(--text-muted);
        margin-bottom: 12px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .meal-detail-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 0;
        border-bottom: 1px solid #f5f5f5;
    }

    .meal-detail-item:last-child {
        border-bottom: none;
    }

    .meal-detail-item-name {
        font-size: 0.95rem;
        color: var(--text-main);
        flex: 1;
    }

    .meal-detail-item-cals {
        font-size: 0.85rem;
        color: var(--text-muted);
        font-weight: 500;
    }

    .meal-detail-edit-btn {
        display: block;
        width: 100%;
        margin-top: 16px;
        padding: 12px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border: none;
        border-radius: 12px;
        font-size: 0.95rem;
        font-weight: 600;
        cursor: pointer;
        transition: transform 0.2s, box-shadow 0.2s;
    }

    .meal-detail-edit-btn:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
    }

    .meal-detail-edit-btn:active {
        transform: translateY(0);
    }

    /* Meal Breakdown Popup (shown after logging a meal) */
    .meal-breakdown-popup {
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.7);
        z-index: 10020;
        display: none;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        backdrop-filter: blur(8px);
        padding: 16px;
        animation: mbpFadeIn 0.25s ease;
    }

    .meal-breakdown-popup.visible {
        display: flex;
    }

    @keyframes mbpFadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }

    .meal-breakdown-card {
        width: 100%;
        max-width: 400px;
        background: white;
        border-radius: 24px;
        overflow: hidden;
        box-shadow: 0 24px 64px rgba(0,0,0,0.45);
        max-height: 88vh;
        display: flex;
        flex-direction: column;
        animation: mbpSlideUp 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    @keyframes mbpSlideUp {
        from { transform: translateY(40px) scale(0.97); opacity: 0; }
        to { transform: translateY(0) scale(1); opacity: 1; }
    }

    .meal-breakdown-photo {
        width: 100%;
        aspect-ratio: 16/9;
        object-fit: cover;
        display: block;
        flex-shrink: 0;
    }

    .meal-breakdown-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 16px 20px 12px;
        flex-shrink: 0;
    }

    .meal-breakdown-title-group {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .meal-breakdown-logged-label {
        font-size: 0.7rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.8px;
        color: #7ba883;
    }

    .meal-breakdown-meal-name {
        font-size: 1rem;
        font-weight: 700;
        color: #1a1a1a;
        line-height: 1.3;
        max-width: 260px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .meal-breakdown-dismiss {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        border: none;
        background: #f3f4f6;
        color: #6b7280;
        font-size: 1.1rem;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        transition: background 0.15s;
    }

    .meal-breakdown-dismiss:active {
        background: #e5e7eb;
    }

    .meal-breakdown-totals-row {
        display: flex;
        gap: 0;
        padding: 10px 20px 14px;
        flex-shrink: 0;
    }

    .meal-breakdown-total-stat {
        flex: 1;
        text-align: center;
    }

    .meal-breakdown-total-stat + .meal-breakdown-total-stat {
        border-left: 1px solid #f0f0f0;
    }

    .meal-breakdown-total-value {
        font-size: 1.3rem;
        font-weight: 700;
        color: #1a1a1a;
        line-height: 1;
    }

    .meal-breakdown-total-label {
        font-size: 0.7rem;
        color: #9ca3af;
        margin-top: 3px;
        font-weight: 500;
    }

    .meal-breakdown-total-stat.cals .meal-breakdown-total-value { color: #7ba883; }
    .meal-breakdown-total-stat.protein .meal-breakdown-total-value { color: #ef4444; }
    .meal-breakdown-total-stat.carbs .meal-breakdown-total-value { color: #f59e0b; }
    .meal-breakdown-total-stat.fat .meal-breakdown-total-value { color: #3b82f6; }

    .meal-breakdown-divider {
        height: 1px;
        background: #f0f0f0;
        margin: 0 20px;
        flex-shrink: 0;
    }

    .meal-breakdown-ingredients-title {
        font-size: 0.7rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.8px;
        color: #9ca3af;
        padding: 12px 20px 8px;
        flex-shrink: 0;
    }

    .meal-breakdown-ingredients {
        overflow-y: auto;
        flex: 1;
        padding: 0 20px 20px;
    }

    .meal-breakdown-ingredient {
        padding: 10px 0;
        border-bottom: 1px solid #f5f5f5;
    }

    .meal-breakdown-ingredient:last-child {
        border-bottom: none;
    }

    .meal-breakdown-ingredient-row1 {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        margin-bottom: 3px;
    }

    .meal-breakdown-ingredient-name {
        font-size: 0.92rem;
        font-weight: 600;
        color: #1a1a1a;
        flex: 1;
        margin-right: 8px;
    }

    .meal-breakdown-ingredient-portion {
        font-size: 0.75rem;
        color: #9ca3af;
        font-weight: 400;
    }

    .meal-breakdown-ingredient-cals {
        font-size: 0.92rem;
        font-weight: 700;
        color: #7ba883;
        white-space: nowrap;
    }

    .meal-breakdown-ingredient-macros {
        display: flex;
        gap: 10px;
        margin-top: 2px;
    }

    .meal-breakdown-macro-pill {
        font-size: 0.72rem;
        font-weight: 600;
        padding: 1px 6px;
        border-radius: 20px;
    }

    .meal-breakdown-macro-pill.p {
        background: rgba(239, 68, 68, 0.1);
        color: #ef4444;
    }

    .meal-breakdown-macro-pill.c {
        background: rgba(245, 158, 11, 0.1);
        color: #d97706;
    }

    .meal-breakdown-macro-pill.f {
        background: rgba(59, 130, 246, 0.1);
        color: #3b82f6;
    }

    .meal-breakdown-macro-pill.fi {
        background: rgba(123, 168, 131, 0.1);
        color: #7ba883;
    }

    .meal-breakdown-insight {
        margin: 14px 20px 20px;
        background: linear-gradient(135deg, rgba(123, 168, 131, 0.08) 0%, rgba(123, 168, 131, 0.04) 100%);
        border-left: 3px solid #7ba883;
        border-radius: 0 10px 10px 0;
        padding: 12px 14px;
    }

    .meal-breakdown-insight-label {
        font-size: 0.7rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.7px;
        color: #7ba883;
        margin-bottom: 6px;
    }

    .meal-breakdown-insight-text {
        font-size: 0.88rem;
        color: #374151;
        line-height: 1.55;
        margin: 0;
    }

    /* Daily nutrition insight in score popup */
    .daily-insight-list {
        margin: 12px 0 4px;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .daily-insight-item {
        display: flex;
        gap: 10px;
        align-items: flex-start;
        background: #f9fafb;
        border-radius: 10px;
        padding: 10px 12px;
        font-size: 0.85rem;
        color: #374151;
        line-height: 1.5;
    }

    .daily-insight-item-icon {
        font-size: 1rem;
        flex-shrink: 0;
        margin-top: 1px;
    }

    /* Edit Items Modal Styles */
    .edit-items-modal {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.6);
        display: none;
        justify-content: center;
        align-items: center;
        z-index: 10015;
        padding: 20px;
    }

    .edit-items-modal.visible {
        display: flex;
    }

    .edit-items-container {
        background: white;
        border-radius: 20px;
        width: 100%;
        max-width: 420px;
        max-height: 80vh;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
    }

    .edit-items-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20px;
        border-bottom: 1px solid #f0f0f0;
    }

    .edit-items-header h3 {
        margin: 0;
        font-size: 1.1rem;
        font-weight: 600;
        color: var(--text-main);
    }

    .edit-items-close {
        width: 32px;
        height: 32px;
        border: none;
        background: #f5f5f5;
        border-radius: 50%;
        font-size: 1.2rem;
        color: #666;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .edit-items-close:hover {
        background: #eee;
    }

    .edit-items-list {
        flex: 0 1 auto;
        overflow-y: auto;
        padding: 16px 20px;
        max-height: 300px;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .edit-items-list::-webkit-scrollbar {
        display: none;
    }

    .edit-item-row {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 12px;
        background: #f8f9fa;
        border-radius: 12px;
        margin-bottom: 10px;
    }

    .edit-item-row:last-child {
        margin-bottom: 0;
    }

    .edit-item-inputs {
        flex: 1;
        display: flex;
        gap: 8px;
    }

    .edit-item-input {
        padding: 8px 12px;
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        font-size: 0.95rem;
        background: white;
    }

    .edit-item-input.edit-item-name {
        flex: 1;
        min-width: 0;
    }

    .edit-item-input.edit-item-portion {
        max-width: 100px;
        flex-shrink: 0;
    }

    .edit-item-input:focus {
        outline: none;
        border-color: #667eea;
        box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2);
    }

    .edit-item-delete {
        width: 32px;
        height: 32px;
        border: none;
        background: #fee2e2;
        border-radius: 8px;
        color: #ef4444;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1rem;
        flex-shrink: 0;
    }

    .edit-item-delete:hover {
        background: #fecaca;
    }

    .edit-items-add {
        display: flex;
        gap: 10px;
        padding: 0 20px 16px;
    }

    .edit-items-add input {
        flex: 1;
        min-width: 0;
        padding: 12px;
        border: 2px dashed #e0e0e0;
        border-radius: 12px;
        font-size: 0.9rem;
        background: #fafafa;
    }

    .edit-items-add input:focus {
        outline: none;
        border-color: #667eea;
        background: white;
    }

    .edit-items-add button {
        padding: 12px 16px;
        background: #10b981;
        color: white;
        border: none;
        border-radius: 12px;
        font-weight: 600;
        cursor: pointer;
        white-space: nowrap;
        flex-shrink: 0;
    }

    .edit-items-add button:hover {
        background: #059669;
    }

    .edit-items-actions {
        display: flex;
        gap: 12px;
        padding: 16px 20px;
        border-top: 1px solid #f0f0f0;
        background: #fafafa;
    }

    .edit-items-cancel {
        flex: 1;
        padding: 14px;
        background: #f5f5f5;
        color: var(--text-muted);
        border: none;
        border-radius: 12px;
        font-size: 0.95rem;
        font-weight: 600;
        cursor: pointer;
    }

    .edit-items-cancel:hover {
        background: #eee;
    }

    .edit-items-recalculate {
        flex: 2;
        padding: 14px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border: none;
        border-radius: 12px;
        font-size: 0.95rem;
        font-weight: 600;
        cursor: pointer;
        transition: transform 0.2s, box-shadow 0.2s;
    }

    .edit-items-recalculate:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
    }

    .edit-items-recalculate:disabled {
        opacity: 0.6;
        cursor: not-allowed;
        transform: none;
    }

    .edit-items-empty {
        text-align: center;
        padding: 30px;
        color: var(--text-muted);
    }

    .empty-state {
        text-align: center;
        padding: 40px 20px;
    }

    /* Mobile Responsive */
    @media (max-width: 480px) {
        .macros-grid {
            grid-template-columns: 1fr;
            gap: 10px;
        }

        .calorie-widget-card .macros-grid {
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 8px;
        }

        .calorie-widget-card .macro-label {
            font-size: 0.68rem;
        }

        .calorie-widget-card .macro-value {
            font-size: 0.74rem;
        }

        .calorie-circle {
            width: 160px;
            height: 160px;
        }

        .calorie-circle-current {
            font-size: 1.6rem;
        }

        .calorie-circle-goal {
            font-size: 1rem;
        }

        .meal-log-image {
            width: 60px;
            height: 60px;
        }

        .meal-log-macros {
            flex-wrap: wrap;
            gap: 6px;
        }
    }

    /* ========================================
       HEALTH IQ PROGRESSION SYSTEM STYLES
       ======================================== */

    /* Health IQ Card on Learning Home */
    .health-iq-card {
        background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #6366f1 100%);
        border-radius: 20px;
        padding: 20px;
        color: white;
        position: relative;
        overflow: hidden;
        box-shadow: 0 4px 20px rgba(99, 102, 241, 0.3);
    }

    .health-iq-card::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -30%;
        width: 200px;
        height: 200px;
        background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
        border-radius: 50%;
    }

    .health-iq-header {
        display: flex;
        align-items: center;
        gap: 14px;
        position: relative;
    }

    .health-iq-level-badge {
        width: 56px;
        height: 56px;
        background: rgba(255,255,255,0.2);
        border-radius: 16px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: relative;
        backdrop-filter: blur(10px);
    }

    .health-iq-icon {
        font-size: 1.5rem;
        line-height: 1;
    }

    .health-iq-level-num {
        font-size: 0.65rem;
        font-weight: 800;
        opacity: 0.9;
        margin-top: 1px;
    }

    .health-iq-info {
        flex: 1;
    }

    .health-iq-title {
        font-size: 0.8rem;
        font-weight: 600;
        opacity: 0.85;
        text-transform: uppercase;
        letter-spacing: 1px;
    }

    .health-iq-rank {
        font-size: 1.3rem;
        font-weight: 800;
        line-height: 1.2;
    }

    .health-iq-lessons-count {
        text-align: center;
        background: rgba(255,255,255,0.15);
        border-radius: 12px;
        padding: 8px 14px;
        backdrop-filter: blur(10px);
    }

    .health-iq-count-num {
        font-size: 1.4rem;
        font-weight: 800;
        line-height: 1;
    }

    .health-iq-count-label {
        font-size: 0.65rem;
        opacity: 0.8;
        font-weight: 600;
        margin-top: 2px;
    }

    .health-iq-progress-section {
        margin-top: 16px;
        position: relative;
    }

    .health-iq-progress-bar {
        height: 8px;
        background: rgba(255,255,255,0.2);
        border-radius: 4px;
        overflow: hidden;
    }

    .health-iq-progress-fill {
        height: 100%;
        background: linear-gradient(90deg, #fbbf24, #f59e0b);
        border-radius: 4px;
        transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 0 0 8px rgba(251, 191, 36, 0.5);
    }

    .health-iq-progress-label {
        display: flex;
        justify-content: space-between;
        margin-top: 8px;
        font-size: 0.75rem;
        opacity: 0.85;
        font-weight: 500;
    }

    .health-iq-max-level {
        margin-top: 14px;
        text-align: center;
        font-size: 0.9rem;
        font-weight: 600;
        padding: 10px;
        background: rgba(255,255,255,0.15);
        border-radius: 10px;
    }

    /* Health IQ Level Up Banner (on lesson complete screen) */
    .health-iq-levelup-banner {
        margin-top: 24px;
        background: linear-gradient(135deg, #4f46e5, #7c3aed);
        border-radius: 20px;
        padding: 24px;
        width: 100%;
        max-width: 300px;
        position: relative;
        overflow: hidden;
        box-shadow: 0 8px 32px rgba(99, 102, 241, 0.4);
    }

    .health-iq-levelup-glow {
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, transparent 60%);
        animation: hiqGlowPulse 2s ease-in-out infinite;
    }

    @keyframes hiqGlowPulse {
        0%, 100% { transform: scale(1); opacity: 0.5; }
        50% { transform: scale(1.1); opacity: 0.8; }
    }

    .health-iq-levelup-content {
        position: relative;
        text-align: center;
        color: white;
    }

    .health-iq-levelup-icon {
        font-size: 3rem;
        margin-bottom: 8px;
        animation: hiqIconBounce 0.8s ease-in-out infinite;
    }

    @keyframes hiqIconBounce {
        0%, 100% { transform: scale(1) rotate(0deg); }
        50% { transform: scale(1.15) rotate(5deg); }
    }

    .health-iq-levelup-label {
        font-size: 0.75rem;
        font-weight: 800;
        letter-spacing: 2px;
        text-transform: uppercase;
        opacity: 0.9;
        margin-bottom: 6px;
    }

    .health-iq-levelup-transition {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        font-size: 1.1rem;
        margin-bottom: 10px;
    }

    .health-iq-old-rank {
        opacity: 0.5;
        text-decoration: line-through;
        font-weight: 500;
    }

    .health-iq-arrow {
        font-weight: bold;
        opacity: 0.7;
    }

    .health-iq-new-rank {
        font-weight: 800;
        font-size: 1.2rem;
        animation: hiqNewRankPop 0.5s ease-out;
    }

    @keyframes hiqNewRankPop {
        0% { transform: scale(0.5); opacity: 0; }
        50% { transform: scale(1.3); }
        100% { transform: scale(1); opacity: 1; }
    }

    .health-iq-levelup-bonus {
        background: rgba(255,255,255,0.2);
        display: inline-block;
        padding: 6px 16px;
        border-radius: 20px;
        font-weight: 700;
        font-size: 0.95rem;
    }

    @keyframes healthIQSlideIn {
        0% { opacity: 0; transform: translateY(30px) scale(0.9); }
        100% { opacity: 1; transform: translateY(0) scale(1); }
    }

    /* Health IQ Full-Screen Celebration Overlay */
    .health-iq-celebration-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 10050;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transition: opacity 0.4s ease;
    }

    .health-iq-celebration-overlay.active {
        opacity: 1;
    }

    .health-iq-celebration-overlay.dismissing {
        opacity: 0;
        pointer-events: none;
    }

    .health-iq-celebration-backdrop {
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.85);
        backdrop-filter: blur(12px);
    }

    .health-iq-celebration-particles {
        position: absolute;
        inset: 0;
        overflow: hidden;
        pointer-events: none;
    }

    .hiq-particle {
        position: absolute;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        top: 50%;
        animation: hiqParticleFall 2s ease-out forwards;
    }

    @keyframes hiqParticleFall {
        0% {
            transform: translateY(0) scale(1) rotate(0deg);
            opacity: 1;
        }
        100% {
            transform: translateY(-300px) translateX(var(--drift, 50px)) scale(0) rotate(720deg);
            opacity: 0;
        }
    }

    .hiq-particle:nth-child(odd) { --drift: -80px; border-radius: 2px; width: 6px; height: 12px; }
    .hiq-particle:nth-child(even) { --drift: 60px; }
    .hiq-particle:nth-child(3n) { --drift: -40px; width: 10px; height: 10px; }
    .hiq-particle:nth-child(4n) { --drift: 100px; width: 5px; height: 5px; }
    .hiq-particle:nth-child(5n) { --drift: -120px; }

    .health-iq-celebration-card {
        position: relative;
        background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 40%, #8b5cf6 100%);
        border-radius: 28px;
        padding: 40px 32px 32px;
        text-align: center;
        color: white;
        max-width: 320px;
        width: calc(100% - 48px);
        box-shadow: 0 20px 60px rgba(99, 102, 241, 0.5), 0 0 80px rgba(139, 92, 246, 0.3);
        transform: scale(0.5);
        transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }

    .health-iq-celebration-overlay.active .health-iq-celebration-card {
        transform: scale(1);
    }

    .health-iq-celebration-rings {
        position: absolute;
        inset: 0;
        overflow: hidden;
        border-radius: 28px;
        pointer-events: none;
    }

    .health-iq-ring {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        border-radius: 50%;
        border: 3px solid rgba(255, 255, 255, 0.3);
        animation: hiqRingExpand 2s ease-out infinite;
    }

    .health-iq-ring:nth-child(1) { animation-delay: 0s; }
    .health-iq-ring:nth-child(2) { animation-delay: 0.5s; }
    .health-iq-ring:nth-child(3) { animation-delay: 1s; }

    @keyframes hiqRingExpand {
        0% { width: 40px; height: 40px; opacity: 0.8; }
        100% { width: 400px; height: 400px; opacity: 0; }
    }

    .health-iq-celebration-badge {
        width: 100px;
        height: 100px;
        background: rgba(255,255,255,0.2);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 20px;
        font-size: 3.5rem;
        backdrop-filter: blur(10px);
        box-shadow: 0 0 40px rgba(255, 255, 255, 0.2);
        animation: hiqBadgePulse 1.5s ease-in-out infinite;
    }

    @keyframes hiqBadgePulse {
        0%, 100% { box-shadow: 0 0 40px rgba(255,255,255,0.2); transform: scale(1); }
        50% { box-shadow: 0 0 60px rgba(255,255,255,0.4); transform: scale(1.05); }
    }

    .health-iq-celebration-title {
        font-size: 0.85rem;
        font-weight: 800;
        letter-spacing: 2px;
        text-transform: uppercase;
        opacity: 0.9;
        margin-bottom: 4px;
    }

    .health-iq-celebration-level {
        font-size: 2.2rem;
        font-weight: 900;
        margin-bottom: 8px;
        text-shadow: 0 2px 10px rgba(0,0,0,0.2);
    }

    .health-iq-celebration-rank-transition {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        font-size: 1.1rem;
        margin-bottom: 16px;
    }

    .hiq-old {
        opacity: 0.5;
        text-decoration: line-through;
        font-weight: 500;
    }

    .hiq-arrow {
        font-weight: bold;
        opacity: 0.7;
        font-size: 1.2rem;
    }

    .hiq-new {
        font-weight: 800;
        font-size: 1.3rem;
        animation: hiqNewRankPop 0.6s ease-out 0.5s both;
    }

    .health-iq-celebration-xp {
        background: rgba(255,255,255,0.2);
        display: inline-block;
        padding: 8px 24px;
        border-radius: 24px;
        font-weight: 700;
        font-size: 1.1rem;
        margin-bottom: 24px;
        backdrop-filter: blur(10px);
    }

    .health-iq-celebration-btn {
        display: block;
        width: 100%;
        padding: 16px;
        background: white;
        color: #4f46e5;
        border: none;
        border-radius: 16px;
        font-size: 1.1rem;
        font-weight: 700;
        cursor: pointer;
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        transition: transform 0.2s;
    }

    .health-iq-celebration-btn:active {
        transform: scale(0.96);
    }

    /* Learning Tab Styles */
    .learning-spinner {
        width: 40px;
        height: 40px;
        border: 4px solid #e5e7eb;
        border-top-color: var(--primary);
        border-radius: 50%;
        animation: learningSpin 0.8s linear infinite;
        margin: 0 auto;
    }

    @keyframes learningSpin {
        to { transform: rotate(360deg); }
    }

    .learning-module-card:active {
        transform: scale(0.98);
    }

    .learning-progress-ring {
        transform: rotate(-90deg);
    }

    .fill-blank-option:hover {
        border-color: var(--primary);
        background: var(--accent-green);
    }

    .fill-blank-option.selected {
        border-color: var(--primary);
        background: var(--accent-green);
    }

    .order-item:active {
        cursor: grabbing;
    }

    .match-item:hover:not(.matched) {
        border-color: #a5b4fc;
        background: #f5f3ff;
    }

    /* ========================================
       LEARNING MASCOT STYLES
       ======================================== */

    .learn-mascot {
        position: fixed;
        bottom: 100px;
        right: 20px;
        z-index: 9999;
        display: none;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        transition: all 0.3s ease;
    }

    .learn-mascot.visible {
        display: flex;
    }

    .learn-mascot-avatar {
        width: 70px;
        height: 70px;
        border-radius: 50%;
        background: linear-gradient(180deg, #1a1a2e 0%, #16213e 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
        cursor: pointer;
        transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        overflow: hidden;
        border: 3px solid white;
    }

    .learn-mascot-avatar:hover {
        transform: scale(1.1);
    }

    .learn-mascot-avatar model-viewer {
        width: 120%;
        height: 120%;
        margin-top: 15px;
    }

    .learn-mascot-speech {
        position: absolute;
        bottom: 85px;
        right: 0;
        background: white;
        padding: 10px 14px;
        border-radius: 16px;
        box-shadow: 0 4px 20px rgba(0,0,0,0.15);
        font-size: 12px;
        font-weight: 600;
        color: #1a4d2e;
        max-width: 160px;
        text-align: center;
        opacity: 0;
        transform: translateY(10px) scale(0.9);
        transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        pointer-events: none;
    }

    .learn-mascot-speech.visible {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    .learn-mascot-speech::after {
        content: '';
        position: absolute;
        bottom: -8px;
        right: 20px;
        width: 0;
        height: 0;
        border-left: 8px solid transparent;
        border-right: 8px solid transparent;
        border-top: 8px solid white;
    }

    /* Mascot Reactions */
    .learn-mascot-avatar.happy {
        animation: mascotHappy 0.6s ease;
    }

    .learn-mascot-avatar.sad {
        animation: mascotSad 0.5s ease;
    }

    .learn-mascot-avatar.excited {
        animation: mascotExcited 0.4s ease infinite;
    }

    .learn-mascot-avatar.thinking {
        animation: mascotThinking 1s ease-in-out infinite;
    }

    @keyframes mascotHappy {
        0%, 100% { transform: scale(1) rotate(0deg); }
        25% { transform: scale(1.2) rotate(-10deg); }
        50% { transform: scale(1.15) rotate(10deg); }
        75% { transform: scale(1.1) rotate(-5deg); }
    }

    @keyframes mascotSad {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(5px); }
    }

    @keyframes mascotExcited {
        0%, 100% { transform: translateY(0) scale(1); }
        50% { transform: translateY(-8px) scale(1.1); }
    }

    @keyframes mascotThinking {
        0%, 100% { transform: rotate(0deg); }
        25% { transform: rotate(-3deg); }
        75% { transform: rotate(3deg); }
    }

    /* ============================================================
       BATTLE STATS SYSTEM - STR / HP / MANA
       ============================================================ */
    .battle-stats-row {
        display: flex;
        gap: 8px;
        padding: 8px 20px 0;
        background: linear-gradient(180deg, #16213e 0%, #1a1a2e 100%);
    }

    .battle-stat {
        flex: 1;
        display: flex;
        align-items: center;
        gap: 6px;
        background: rgba(255,255,255,0.05);
        border-radius: 8px;
        padding: 5px 8px;
        cursor: pointer;
        transition: background 0.2s;
    }

    .battle-stat:hover {
        background: rgba(255,255,255,0.1);
    }

    .battle-stat-icon {
        font-size: 0.75rem;
        line-height: 1;
    }

    .battle-stat-info {
        flex: 1;
        min-width: 0;
    }

    .battle-stat-label {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 2px;
    }

    .battle-stat-name {
        font-size: 0.5rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: rgba(255,255,255,0.6);
    }

    .battle-stat-value {
        font-size: 0.55rem;
        font-weight: 800;
        font-family: 'Outfit', sans-serif;
    }

    .battle-stat-bar {
        height: 4px;
        background: rgba(255,255,255,0.1);
        border-radius: 4px;
        overflow: hidden;
    }

    .battle-stat-fill {
        height: 100%;
        border-radius: 4px;
        transition: width 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .battle-stat.str .battle-stat-value { color: #ff6b6b; }
    .battle-stat.str .battle-stat-fill { background: linear-gradient(90deg, #ff4444, #ff6b6b); }

    .battle-stat.hp .battle-stat-value { color: #4ecdc4; }
    .battle-stat.hp .battle-stat-fill { background: linear-gradient(90deg, #2ecc71, #4ecdc4); }

    .battle-stat.mana .battle-stat-value { color: #45b7d1; }
    .battle-stat.mana .battle-stat-fill { background: linear-gradient(90deg, #3498db, #45b7d1); }

    /* ============================================================
       STAT ALLOCATION MODAL
       ============================================================ */
    .stat-alloc-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.7);
        backdrop-filter: blur(8px);
        z-index: 10001;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 20px;
        animation: fadeIn 0.3s ease-out;
    }

    .stat-alloc-modal {
        background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
        border-radius: 24px;
        width: 100%;
        max-width: 380px;
        padding: 0;
        box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 40px rgba(69,183,209,0.15);
        border: 1px solid rgba(255,255,255,0.1);
        animation: fadeInScale 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        overflow: hidden;
    }

    .stat-alloc-header {
        text-align: center;
        padding: 24px 20px 16px;
        border-bottom: 1px solid rgba(255,255,255,0.1);
    }

    .stat-alloc-header h2 {
        margin: 0 0 4px;
        font-size: 1.3rem;
        font-weight: 800;
        color: #FFD700;
        text-shadow: 0 0 20px rgba(255,215,0,0.3);
    }

    .stat-alloc-points-left {
        font-size: 0.85rem;
        color: rgba(255,255,255,0.8);
        font-weight: 600;
    }

    .stat-alloc-points-left span {
        color: #FFD700;
        font-weight: 900;
        font-size: 1.1rem;
    }

    .stat-alloc-body {
        padding: 20px;
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .stat-alloc-row {
        display: flex;
        align-items: center;
        gap: 12px;
        background: rgba(255,255,255,0.06);
        border-radius: 14px;
        padding: 14px;
        border: 1px solid rgba(255,255,255,0.08);
        transition: all 0.2s;
    }

    .stat-alloc-row:hover {
        background: rgba(255,255,255,0.1);
    }

    .stat-alloc-icon {
        font-size: 1.5rem;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 12px;
        flex-shrink: 0;
    }

    .stat-alloc-icon.str { background: rgba(255,68,68,0.2); }
    .stat-alloc-icon.hp { background: rgba(46,204,113,0.2); }
    .stat-alloc-icon.mana { background: rgba(52,152,219,0.2); }

    .stat-alloc-details {
        flex: 1;
        min-width: 0;
    }

    .stat-alloc-name {
        font-size: 0.85rem;
        font-weight: 700;
        color: white;
        margin-bottom: 2px;
    }

    .stat-alloc-desc {
        font-size: 0.6rem;
        color: rgba(255,255,255,0.5);
    }

    .stat-alloc-current {
        font-size: 1.2rem;
        font-weight: 900;
        font-family: 'Outfit', sans-serif;
        min-width: 30px;
        text-align: center;
    }

    .stat-alloc-current.str { color: #ff6b6b; }
    .stat-alloc-current.hp { color: #4ecdc4; }
    .stat-alloc-current.mana { color: #45b7d1; }

    .stat-alloc-btn {
        width: 44px;
        height: 44px;
        border: none;
        border-radius: 12px;
        font-size: 1.4rem;
        font-weight: 900;
        cursor: pointer;
        transition: all 0.15s;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .stat-alloc-btn.str { background: rgba(255,68,68,0.3); color: #ff6b6b; }
    .stat-alloc-btn.str:hover { background: rgba(255,68,68,0.5); transform: scale(1.1); }
    .stat-alloc-btn.hp { background: rgba(46,204,113,0.3); color: #4ecdc4; }
    .stat-alloc-btn.hp:hover { background: rgba(46,204,113,0.5); transform: scale(1.1); }
    .stat-alloc-btn.mana { background: rgba(52,152,219,0.3); color: #45b7d1; }
    .stat-alloc-btn.mana:hover { background: rgba(52,152,219,0.5); transform: scale(1.1); }

    .stat-alloc-btn:active {
        transform: scale(0.95);
    }

    .stat-alloc-btn:disabled {
        opacity: 0.3;
        cursor: not-allowed;
        transform: none !important;
    }

    .stat-alloc-btn-minus {
        width: 36px;
        height: 36px;
        border: none;
        border-radius: 10px;
        font-size: 1.2rem;
        font-weight: 900;
        cursor: pointer;
        transition: all 0.15s;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .stat-alloc-btn-minus.str { background: rgba(255,68,68,0.15); color: #ff6b6b; }
    .stat-alloc-btn-minus.str:hover:not(:disabled) { background: rgba(255,68,68,0.35); transform: scale(1.1); }
    .stat-alloc-btn-minus.hp { background: rgba(46,204,113,0.15); color: #4ecdc4; }
    .stat-alloc-btn-minus.hp:hover:not(:disabled) { background: rgba(46,204,113,0.35); transform: scale(1.1); }
    .stat-alloc-btn-minus.mana { background: rgba(52,152,219,0.15); color: #45b7d1; }
    .stat-alloc-btn-minus.mana:hover:not(:disabled) { background: rgba(52,152,219,0.35); transform: scale(1.1); }

    .stat-alloc-btn-minus:active:not(:disabled) {
        transform: scale(0.95);
    }

    .stat-alloc-btn-minus:disabled {
        opacity: 0.15;
        cursor: not-allowed;
        transform: none !important;
    }

    .stat-alloc-footer {
        padding: 16px 20px 20px;
        border-top: 1px solid rgba(255,255,255,0.1);
    }

    .stat-alloc-confirm {
        width: 100%;
        padding: 14px;
        border: none;
        border-radius: 14px;
        font-size: 1rem;
        font-weight: 700;
        cursor: pointer;
        transition: all 0.2s;
        background: linear-gradient(135deg, #FFD700, #FFA500);
        color: #1a1a2e;
    }

    .stat-alloc-confirm:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(255,215,0,0.4);
    }

    .stat-alloc-confirm:disabled {
        background: rgba(255,255,255,0.1);
        color: rgba(255,255,255,0.3);
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
    }

    @keyframes statAllocPop {
        0% { transform: scale(1); }
        50% { transform: scale(1.3); }
        100% { transform: scale(1); }
    }

    .stat-pop {
        animation: statAllocPop 0.3s ease-out;
    }

    /* ============================================================
       BATTLE LEVEL GATE
       ============================================================ */
    .battle-trigger-btn.locked {
        opacity: 0.5;
        position: absolute;
    }

    .battle-trigger-btn.locked::after {
        content: 'Lv.10';
        position: absolute;
        bottom: -14px;
        left: 50%;
        transform: translateX(-50%);
        font-size: 0.45rem;
        font-weight: 800;
        color: rgba(255,255,255,0.6);
        white-space: nowrap;
        background: rgba(0,0,0,0.5);
        padding: 1px 5px;
        border-radius: 4px;
    }

    /* ============================================================
       BATTLE HP BARS (In-Battle)
       ============================================================ */
    .battle-hp-container {
        position: absolute;
        top: 12px;
        left: 12px;
        right: 12px;
        display: none;
        justify-content: space-between;
        z-index: 150;
        pointer-events: none;
    }

    .battle-hp-container.active {
        display: flex;
    }

    .battle-hp-box {
        background: rgba(0,0,0,0.7);
        backdrop-filter: blur(6px);
        border-radius: 10px;
        padding: 6px 10px;
        min-width: 120px;
        border: 1px solid rgba(255,255,255,0.15);
    }

    .battle-hp-box.enemy {
        text-align: right;
    }

    .battle-hp-name {
        font-size: 0.6rem;
        font-weight: 700;
        color: rgba(255,255,255,0.8);
        margin-bottom: 3px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .battle-hp-bar-bg {
        height: 6px;
        background: rgba(255,255,255,0.15);
        border-radius: 6px;
        overflow: hidden;
    }

    .battle-hp-bar-fill {
        height: 100%;
        border-radius: 6px;
        transition: width 0.4s ease-out;
    }

    .battle-hp-bar-fill.player {
        background: linear-gradient(90deg, #2ecc71, #4ecdc4);
    }

    .battle-hp-bar-fill.enemy {
        background: linear-gradient(90deg, #e74c3c, #ff6b6b);
    }

    .battle-hp-text {
        font-size: 0.5rem;
        font-weight: 800;
        color: rgba(255,255,255,0.7);
        margin-top: 2px;
        font-family: 'Outfit', sans-serif;
    }

    /* ============================================================
       BATTLE MANA BAR (In-Battle)
       ============================================================ */
    .battle-mana-container {
        position: absolute;
        bottom: 65px;
        left: 12px;
        right: 12px;
        z-index: 150;
        pointer-events: none;
        display: none;
    }

    .battle-mana-container.active {
        display: block;
    }

    .battle-mana-label {
        font-size: 0.5rem;
        font-weight: 700;
        color: rgba(255,255,255,0.6);
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-bottom: 2px;
    }

    .battle-mana-bar-bg {
        height: 8px;
        background: rgba(255,255,255,0.1);
        border-radius: 8px;
        overflow: hidden;
        position: relative;
    }

    .battle-mana-bar-fill {
        height: 100%;
        border-radius: 8px;
        background: linear-gradient(90deg, #3498db, #45b7d1, #9b59b6);
        transition: width 0.2s linear;
        box-shadow: 0 0 8px rgba(52,152,219,0.4);
    }

    .battle-mana-bar-fill.full {
        animation: manaReady 0.5s ease-in-out infinite alternate;
    }

    @keyframes manaReady {
        0% { box-shadow: 0 0 8px rgba(52,152,219,0.4); }
        100% { box-shadow: 0 0 20px rgba(155,89,182,0.8); }
    }

    /* ============================================================
       BATTLE BASH BUTTON (Digimon-style single button)
       ============================================================ */
    .battle-action-container {
        position: absolute;
        bottom: 12px;
        right: 12px;
        z-index: 200;
        display: none;
        pointer-events: none;
    }

    .battle-action-container.active {
        display: flex;
        align-items: center;
        gap: 12px;
        pointer-events: auto;
    }

    .battle-bash-btn {
        width: 80px;
        height: 80px;
        border: none;
        border-radius: 50%;
        background: radial-gradient(circle at 30% 30%, #ff6b4a, #e63946);
        color: white;
        cursor: pointer;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0;
        position: relative;
        box-shadow: 0 4px 20px rgba(230,57,70,0.5), inset 0 2px 4px rgba(255,255,255,0.2);
        transition: transform 0.05s;
        -webkit-tap-highlight-color: transparent;
        user-select: none;
        touch-action: manipulation;
    }

    .battle-bash-btn:active {
        transform: scale(0.88);
        box-shadow: 0 2px 10px rgba(230,57,70,0.7), inset 0 2px 4px rgba(0,0,0,0.2);
    }

    .battle-bash-btn .bash-icon {
        font-size: 1.5rem;
        line-height: 1;
    }

    .battle-bash-btn .bash-label {
        font-size: 0.55rem;
        font-weight: 900;
        letter-spacing: 1px;
        text-transform: uppercase;
    }


    .battle-bash-btn .bash-progress-ring {
        position: absolute;
        inset: -4px;
        pointer-events: none;
    }

    .battle-bash-btn .bash-progress-ring svg {
        width: 100%;
        height: 100%;
    }

    .bash-ring-bg {
        fill: none;
        stroke: rgba(255,255,255,0.15);
        stroke-width: 3;
    }

    .bash-ring-fill {
        fill: none;
        stroke: #FFD700;
        stroke-width: 3;
        stroke-dasharray: 163.36;
        stroke-dashoffset: 163.36;
        stroke-linecap: round;
        transition: stroke-dashoffset 0.1s;
        transform: rotate(-90deg);
        transform-origin: center;
    }

    .battle-bash-btn.attack-ready {
        animation: bashReady 0.3s ease-in-out infinite alternate;
        background: radial-gradient(circle at 30% 30%, #FFD700, #ff8c00);
    }

    @keyframes bashReady {
        0% { box-shadow: 0 0 15px rgba(255,215,0,0.5); transform: scale(1); }
        100% { box-shadow: 0 0 30px rgba(255,215,0,0.9); transform: scale(1.05); }
    }

    @keyframes bashRumble {
        0%   { transform: translate(0, 0) scale(0.92); }
        15%  { transform: translate(-4px, 2px) scale(0.92); }
        30%  { transform: translate(4px, -2px) scale(0.95); }
        45%  { transform: translate(-3px, -1px) scale(0.97); }
        60%  { transform: translate(3px, 1px) scale(0.99); }
        75%  { transform: translate(-1px, 1px) scale(1); }
        100% { transform: translate(0, 0) scale(1); }
    }

    .battle-bash-btn.bash-rumble {
        animation: bashRumble 0.35s ease-out;
    }

    /* FIRE and BLOCK action buttons */
    .battle-action-btn {
        width: 64px;
        height: 64px;
        border: none;
        border-radius: 50%;
        color: white;
        cursor: pointer;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0;
        position: relative;
        -webkit-tap-highlight-color: transparent;
        user-select: none;
        touch-action: manipulation;
        animation: actionBtnAppear 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }
    .battle-action-btn .action-btn-icon { font-size: 1.3rem; line-height: 1; }
    .battle-action-btn .action-btn-label { font-size: 0.5rem; font-weight: 900; letter-spacing: 1px; text-transform: uppercase; }
    .battle-action-btn:active { transform: scale(0.85); }

    .battle-fire-btn {
        background: radial-gradient(circle at 30% 30%, #FFD700, #ff6b00);
        box-shadow: 0 0 20px rgba(255,215,0,0.7), 0 0 40px rgba(255,107,0,0.4);
        animation: actionBtnAppear 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), firePulse 0.5s ease-in-out infinite alternate;
    }
    @keyframes firePulse {
        0% { box-shadow: 0 0 15px rgba(255,215,0,0.6), 0 0 30px rgba(255,107,0,0.3); transform: scale(1); }
        100% { box-shadow: 0 0 25px rgba(255,215,0,0.9), 0 0 50px rgba(255,107,0,0.5); transform: scale(1.08); }
    }

    .battle-block-btn {
        background: radial-gradient(circle at 30% 30%, #60a5fa, #2563eb);
        box-shadow: 0 0 20px rgba(96,165,250,0.7), 0 0 40px rgba(37,99,235,0.4);
        animation: actionBtnAppear 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), blockPulse 0.4s ease-in-out infinite alternate;
    }
    @keyframes blockPulse {
        0% { box-shadow: 0 0 15px rgba(96,165,250,0.6), 0 0 30px rgba(37,99,235,0.3); transform: scale(1); }
        100% { box-shadow: 0 0 25px rgba(96,165,250,0.9), 0 0 50px rgba(37,99,235,0.5); transform: scale(1.08); }
    }

    @keyframes actionBtnAppear {
        0% { transform: scale(0); opacity: 0; }
        100% { transform: scale(1); opacity: 1; }
    }
    @keyframes actionBtnDisappear {
        0% { transform: scale(1); opacity: 1; }
        100% { transform: scale(0); opacity: 0; }
    }

    /* Shield overlay when block succeeds */
    .battle-shield-overlay {
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at center, rgba(96,165,250,0.3) 0%, transparent 70%);
        border: 3px solid rgba(96,165,250,0.6);
        border-radius: 12px;
        z-index: 997;
        pointer-events: none;
        animation: shieldFlash 0.5s ease-out forwards;
    }
    @keyframes shieldFlash {
        0% { opacity: 1; transform: scale(0.95); }
        50% { opacity: 0.8; transform: scale(1.02); }
        100% { opacity: 0; transform: scale(1); }
    }

    /* Battle screen shake */
    @keyframes battleShake {
        0%, 100% { transform: translateX(0); }
        10%, 50%, 70% { transform: translateX(-6px); }
        30%, 60% { transform: translateX(6px); }
        80% { transform: translateX(-3px); }
        90% { transform: translateX(3px); }
    }

    /* Round transition overlay */
    .battle-round-text {
        font-size: 2.5rem;
        font-weight: 900;
        color: white;
        text-shadow: 0 0 30px rgba(255,255,255,0.5);
        animation: roundTextPop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        text-align: center;
        line-height: 1.3;
    }
    .battle-round-score {
        font-size: 1.2rem;
        font-weight: 700;
        color: rgba(255,255,255,0.7);
        margin-top: 8px;
        letter-spacing: 3px;
    }
    @keyframes roundTextPop {
        0% { transform: scale(0.3); opacity: 0; }
        60% { transform: scale(1.15); opacity: 1; }
        100% { transform: scale(1); opacity: 1; }
    }

    /* ============================================================
       MOVE PICKER (Pre-Battle)
       ============================================================ */
    .move-picker-overlay {
        position: absolute;
        inset: 0;
        background: rgba(0,0,0,0.8);
        backdrop-filter: blur(8px);
        z-index: 200;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 20px;
        animation: fadeIn 0.3s ease-out;
    }

    .move-picker-title {
        font-size: 0.9rem;
        font-weight: 800;
        color: #FFD700;
        text-transform: uppercase;
        letter-spacing: 1px;
        margin-bottom: 16px;
    }

    .move-picker-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
        width: 100%;
        max-width: 280px;
    }

    .move-picker-item {
        background: rgba(255,255,255,0.1);
        border: 2px solid rgba(255,255,255,0.2);
        border-radius: 14px;
        padding: 12px 8px;
        cursor: pointer;
        text-align: center;
        transition: all 0.2s;
    }

    .move-picker-item:hover {
        background: rgba(255,255,255,0.2);
        border-color: rgba(255,215,0,0.5);
        transform: scale(1.05);
    }

    .move-picker-item:active {
        transform: scale(0.97);
    }

    .move-picker-item .pick-icon {
        font-size: 1.6rem;
        margin-bottom: 4px;
    }

    .move-picker-item .pick-name {
        font-size: 0.7rem;
        font-weight: 700;
        color: white;
    }

    .move-picker-item .pick-power {
        font-size: 0.55rem;
        color: rgba(255,255,255,0.5);
        margin-top: 2px;
    }

    /* ============================================================
       BATTLE INVITE MODAL
       ============================================================ */
    .battle-invite-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.7);
        backdrop-filter: blur(8px);
        z-index: 10001;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 20px;
        animation: fadeIn 0.3s ease-out;
    }

    .battle-invite-modal {
        background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
        border-radius: 24px;
        width: 100%;
        max-width: 380px;
        max-height: 80vh;
        display: flex;
        flex-direction: column;
        box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 40px rgba(220,50,50,0.15);
        border: 1px solid rgba(255,255,255,0.1);
        animation: fadeInScale 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        overflow: hidden;
    }

    .battle-invite-header {
        text-align: center;
        padding: 24px 20px 16px;
        border-bottom: 1px solid rgba(255,255,255,0.1);
    }

    .battle-invite-header h2 {
        margin: 0 0 4px;
        font-size: 1.3rem;
        font-weight: 800;
        color: #ff6b6b;
        text-shadow: 0 0 20px rgba(255,107,107,0.3);
    }

    .battle-invite-header p {
        margin: 0;
        font-size: 0.8rem;
        color: rgba(255,255,255,0.6);
    }

    .battle-invite-body {
        padding: 12px 16px;
        overflow-y: auto;
        flex: 1;
    }

    .battle-invite-friend {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px;
        border-radius: 14px;
        background: rgba(255,255,255,0.06);
        border: 1px solid rgba(255,255,255,0.08);
        margin-bottom: 8px;
        cursor: pointer;
        transition: all 0.2s;
    }

    .battle-invite-friend:hover {
        background: rgba(255,255,255,0.12);
        border-color: rgba(255,100,100,0.3);
    }

    .battle-invite-friend:active {
        transform: scale(0.98);
    }

    .battle-invite-avatar {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: linear-gradient(135deg, rgba(255,100,100,0.3), rgba(255,150,100,0.3));
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        font-size: 1rem;
        color: white;
        flex-shrink: 0;
        overflow: hidden;
    }

    .battle-invite-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .battle-invite-info {
        flex: 1;
        min-width: 0;
    }

    .battle-invite-name {
        font-size: 0.9rem;
        font-weight: 700;
        color: white;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .battle-invite-status {
        font-size: 0.65rem;
        color: rgba(255,255,255,0.5);
        margin-top: 2px;
    }

    .battle-invite-status.active {
        color: #4ecdc4;
    }

    .battle-invite-btn {
        padding: 8px 16px;
        border: none;
        border-radius: 10px;
        font-size: 0.75rem;
        font-weight: 700;
        cursor: pointer;
        transition: all 0.15s;
        background: linear-gradient(135deg, rgba(255,68,68,0.6), rgba(255,100,100,0.4));
        color: white;
        border: 1px solid rgba(255,100,100,0.4);
        flex-shrink: 0;
    }

    .battle-invite-btn:hover {
        background: linear-gradient(135deg, rgba(255,68,68,0.8), rgba(255,100,100,0.6));
        transform: scale(1.05);
    }

    .battle-invite-footer {
        padding: 12px 16px 16px;
        border-top: 1px solid rgba(255,255,255,0.1);
        text-align: center;
    }

    .battle-invite-close {
        padding: 10px 24px;
        border: 1px solid rgba(255,255,255,0.2);
        border-radius: 12px;
        background: transparent;
        color: rgba(255,255,255,0.7);
        font-size: 0.85rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s;
    }

    .battle-invite-close:hover {
        background: rgba(255,255,255,0.1);
        color: white;
    }

    .battle-invite-empty {
        text-align: center;
        padding: 30px 20px;
    }

    .battle-invite-empty .empty-icon {
        font-size: 2.5rem;
        margin-bottom: 12px;
    }

    .battle-invite-empty .empty-text {
        font-size: 0.85rem;
        color: rgba(255,255,255,0.6);
        margin-bottom: 16px;
    }

    .battle-invite-empty .empty-btn {
        padding: 10px 20px;
        border: none;
        border-radius: 12px;
        background: var(--primary, #7BA883);
        color: white;
        font-size: 0.85rem;
        font-weight: 600;
        cursor: pointer;
    }

    /* Challenge Buy-In Modal (Battle-mode style) */
    .challenge-buyin-modal {
        background: linear-gradient(135deg, #1a1a2e 0%, #2e1a0e 50%, #3d2e0a 100%);
        border-radius: 24px;
        width: 100%;
        max-width: 380px;
        max-height: 80vh;
        display: flex;
        flex-direction: column;
        box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 40px rgba(245,158,11,0.15);
        border: 1px solid rgba(255,255,255,0.1);
        animation: fadeInScale 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        overflow: hidden;
    }

    .challenge-buyin-header {
        text-align: center;
        padding: 24px 20px 16px;
        border-bottom: 1px solid rgba(255,255,255,0.1);
    }

    .challenge-buyin-header h2 {
        margin: 0 0 4px;
        font-size: 1.3rem;
        font-weight: 800;
        color: #fbbf24;
        text-shadow: 0 0 20px rgba(251,191,36,0.3);
    }

    .challenge-buyin-header p {
        margin: 0;
        font-size: 0.8rem;
        color: rgba(255,255,255,0.6);
    }

    .challenge-buyin-body {
        padding: 12px 16px;
        overflow-y: auto;
        flex: 1;
    }

    .challenge-buyin-benefits {
        background: rgba(251,191,36,0.1);
        border: 1px solid rgba(251,191,36,0.2);
        border-radius: 12px;
        padding: 12px;
        margin-bottom: 14px;
    }

    .challenge-buyin-benefit {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 6px;
    }

    .challenge-buyin-benefit:last-child {
        margin-bottom: 0;
    }

    .challenge-buyin-benefit span.check {
        color: #fbbf24;
        font-size: 0.9rem;
        font-weight: 700;
    }

    .challenge-buyin-benefit span.text {
        color: rgba(255,255,255,0.8);
        font-size: 0.82rem;
    }

    .challenge-bet-btn {
        flex: 1;
        min-width: 60px;
        padding: 8px;
        background: rgba(255,255,255,0.08);
        border: 2px solid rgba(255,255,255,0.15);
        border-radius: 8px;
        color: white;
        font-weight: 700;
        font-size: 0.75rem;
        cursor: pointer;
        transition: all 0.15s;
    }

    .challenge-bet-btn:hover {
        background: rgba(251,191,36,0.15);
        border-color: rgba(251,191,36,0.4);
    }

    .challenge-bet-btn.active {
        background: rgba(251,191,36,0.2);
        border-color: rgba(251,191,36,0.6);
    }

    .challenge-buyin-footer {
        padding: 12px 16px 16px;
        border-top: 1px solid rgba(255,255,255,0.1);
        display: flex;
        flex-direction: column;
        gap: 8px;
        align-items: center;
    }

    .challenge-buyin-join-btn {
        width: 100%;
        padding: 14px;
        border: none;
        border-radius: 12px;
        font-size: 0.95rem;
        font-weight: 700;
        cursor: pointer;
        background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
        color: white;
        box-shadow: 0 4px 15px rgba(245,158,11,0.3);
        transition: all 0.2s;
    }

    .challenge-buyin-join-btn:hover {
        transform: scale(1.02);
        box-shadow: 0 6px 20px rgba(245,158,11,0.4);
    }

    .challenge-buyin-join-btn:disabled {
        opacity: 0.6;
        cursor: not-allowed;
        transform: none;
    }

    .challenge-buyin-secondary-btn {
        width: 100%;
        padding: 10px;
        border: 1px solid rgba(255,255,255,0.2);
        border-radius: 12px;
        background: transparent;
        color: rgba(255,255,255,0.7);
        font-size: 0.82rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s;
    }

    .challenge-buyin-secondary-btn:hover {
        background: rgba(255,255,255,0.1);
        color: white;
    }

    .challenge-buyin-cancel {
        background: none;
        border: none;
        color: rgba(255,255,255,0.4);
        font-size: 0.8rem;
        cursor: pointer;
        margin-top: 2px;
        transition: color 0.2s;
    }

    .challenge-buyin-cancel:hover {
        color: rgba(255,255,255,0.7);
    }

    /* Waiting for opponent overlay */
    .battle-waiting-overlay {
        position: absolute;
        inset: 0;
        background: rgba(0,0,0,0.85);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        z-index: 200;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 20px;
        animation: fadeIn 0.3s ease-out;
    }

    .battle-waiting-text {
        font-size: 0.9rem;
        font-weight: 700;
        color: white;
        margin-bottom: 8px;
    }

    .battle-waiting-sub {
        font-size: 0.7rem;
        color: rgba(255,255,255,0.6);
        margin-bottom: 20px;
    }

    .battle-waiting-spinner {
        width: 30px;
        height: 30px;
        border: 3px solid rgba(255,255,255,0.2);
        border-top-color: #ff6b6b;
        border-radius: 50%;
        animation: spin 1s linear infinite;
        margin-bottom: 20px;
    }

    @keyframes spin {
        to { transform: rotate(360deg); }
    }

    .battle-waiting-cancel {
        padding: 8px 20px;
        border: 1px solid rgba(255,255,255,0.3);
        border-radius: 10px;
        background: transparent;
        color: rgba(255,255,255,0.7);
        font-size: 0.8rem;
        font-weight: 600;
        cursor: pointer;
    }

    /* Incoming battle challenge notification */
    .battle-challenge-toast {
        position: fixed;
        top: 80px;
        left: 50%;
        transform: translateX(-50%) translateY(-20px);
        background: linear-gradient(135deg, #1a1a2e, #2d1515);
        border: 2px solid rgba(255,100,100,0.5);
        border-radius: 20px;
        padding: 16px 20px;
        z-index: 10002;
        box-shadow: 0 10px 40px rgba(0,0,0,0.4), 0 0 20px rgba(255,100,100,0.2);
        opacity: 0;
        transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        min-width: 280px;
        max-width: 340px;
    }

    .battle-challenge-toast.show {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }

    .battle-challenge-header {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 12px;
    }

    .battle-challenge-icon {
        font-size: 1.5rem;
    }

    .battle-challenge-title {
        font-size: 0.85rem;
        font-weight: 800;
        color: #ff6b6b;
    }

    .battle-challenge-from {
        font-size: 0.75rem;
        color: rgba(255,255,255,0.7);
    }

    .battle-challenge-actions {
        display: flex;
        gap: 8px;
    }

    .battle-challenge-accept {
        flex: 1;
        padding: 10px;
        border: none;
        border-radius: 12px;
        background: linear-gradient(135deg, #ff4444, #ff6b6b);
        color: white;
        font-size: 0.85rem;
        font-weight: 700;
        cursor: pointer;
    }

    .battle-challenge-decline {
        padding: 10px 16px;
        border: 1px solid rgba(255,255,255,0.2);
        border-radius: 12px;
        background: transparent;
        color: rgba(255,255,255,0.6);
        font-size: 0.85rem;
        font-weight: 600;
        cursor: pointer;
    }

    /* ============================================================
       BACKGROUND THEMES
       ============================================================ */
    .tamagotchi-bg-gym {
        background: url('./assets/gym_bg.jpeg') center center / cover no-repeat !important;
    }

    .tamagotchi-bg-gym::before {
        content: '';
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
        background: rgba(0,0,0,0.15);
        pointer-events: none;
        z-index: 0;
    }

    .tamagotchi-bg-park {
        background: linear-gradient(180deg, #0d2b1a 0%, #1a3d2e 40%, #0d2b1a 100%) !important;
    }

    .tamagotchi-bg-park::before {
        content: '';
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
        background:
            radial-gradient(ellipse 20% 40% at 10% 50%, rgba(34,139,34,0.1) 0%, transparent 100%),
            radial-gradient(ellipse 15% 30% at 90% 55%, rgba(34,139,34,0.08) 0%, transparent 100%);
        pointer-events: none;
        z-index: 0;
    }

    .tamagotchi-bg-dojo {
        background: url('./assets/battle_dojo_bg.jpeg') center center / cover no-repeat !important;
    }

    .tamagotchi-bg-dojo::before {
        content: '';
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
        background: rgba(0,0,0,0.15);
        pointer-events: none;
        z-index: 0;
    }

    .tamagotchi-bg-beach {
        background: linear-gradient(180deg, #0a192f 0%, #0d2847 40%, #14344e 100%) !important;
    }

    .tamagotchi-bg-beach::before {
        content: '';
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
        background:
            radial-gradient(ellipse 60% 15% at 50% 90%, rgba(194,178,128,0.1) 0%, transparent 100%),
            radial-gradient(ellipse 30% 20% at 80% 30%, rgba(255,255,200,0.03) 0%, transparent 100%);
        pointer-events: none;
        z-index: 0;
    }

    .tamagotchi-bg-home {
        background: linear-gradient(180deg, #1a1612 0%, #2a2218 40%, #1a1612 100%) !important;
    }

    .tamagotchi-bg-home::before {
        content: '';
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
        background:
            radial-gradient(ellipse 40% 40% at 50% 60%, rgba(255,180,80,0.08) 0%, transparent 100%),
            radial-gradient(ellipse 20% 25% at 20% 70%, rgba(200,160,100,0.06) 0%, transparent 100%);
        pointer-events: none;
        z-index: 0;
    }

    .tamagotchi-bg-mountain {
        background: linear-gradient(180deg, #0f1a2e 0%, #1a2a3e 40%, #0f1a2e 100%) !important;
    }

    .tamagotchi-bg-mountain::before {
        content: '';
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
        background:
            radial-gradient(ellipse 50% 30% at 50% 75%, rgba(200,200,220,0.06) 0%, transparent 100%),
            radial-gradient(ellipse 30% 20% at 30% 60%, rgba(180,200,220,0.05) 0%, transparent 100%),
            radial-gradient(ellipse 25% 15% at 70% 65%, rgba(180,200,220,0.04) 0%, transparent 100%);
        pointer-events: none;
        z-index: 0;
    }

    .tamagotchi-bg-arena {
        background: linear-gradient(180deg, #0a0015 0%, #1a0040 40%, #0a0015 100%) !important;
    }

    .tamagotchi-bg-arena::before {
        content: '';
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
        background:
            radial-gradient(ellipse 50% 50% at 50% 50%, rgba(155,89,182,0.08) 0%, transparent 100%),
            radial-gradient(ellipse 30% 30% at 50% 50%, rgba(255,215,0,0.05) 0%, transparent 100%);
        pointer-events: none;
        z-index: 0;
        animation: arenaGlow 3s ease-in-out infinite alternate;
    }

    @keyframes arenaGlow {
        0% { opacity: 0.6; }
        100% { opacity: 1; }
    }

    /* Character model-viewer: starts opaque (matching container) during load,
       then JS switches to transparent after model loads so 3D background shows through.
       This ensures Safari users see the dark bg instead of a blank void while loading. */
    #tamagotchi-model {
        --poster-color: #1a1a2e;
    }
    #tamagotchi-model.model-loaded {
        background: transparent !important;
        --poster-color: transparent;
    }

    /* 3D background model-viewer fills behind the character */
    #tamagotchi-bg-model {
        background: transparent !important;
        --poster-color: transparent;
    }

    /* Selected background highlight in Unlocks panel */
    .bg-selected {
        border: 2px solid #4ade80 !important;
        box-shadow: 0 0 8px rgba(74, 222, 128, 0.3);
    }

    /* ===== Login Loading Overlay ===== */
    .login-loading-overlay {
        --pbb-loading-bg:
            radial-gradient(circle at 50% 28%, rgba(216, 178, 94, 0.18) 0%, rgba(216, 178, 94, 0) 34%),
            linear-gradient(180deg, #101010 0%, var(--bg, #050505) 100%);
        --pbb-loading-heading: var(--secondary, #d8b25e);
        --pbb-loading-heading-soft: var(--secondary-light, #f5d98a);
        --pbb-loading-copy: rgba(248, 247, 242, 0.88);
        --pbb-loading-track: rgba(255, 255, 255, 0.14);
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: var(--pbb-loading-bg);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        z-index: 99999;
        transition: opacity 0.5s ease, visibility 0.5s ease;
        overflow: hidden;
    }
    html[data-pbb-theme="light"] .login-loading-overlay {
        --pbb-loading-bg:
            radial-gradient(circle at 50% 24%, rgba(216, 178, 94, 0.2) 0%, rgba(216, 178, 94, 0) 36%),
            linear-gradient(180deg, #fffdf7 0%, #f7f1e3 58%, #ece3d1 100%);
        --pbb-loading-heading: #151515;
        --pbb-loading-heading-soft: #9f7628;
        --pbb-loading-copy: #655f55;
        --pbb-loading-track: rgba(17, 17, 17, 0.1);
        color: #151515;
    }
    html[data-pbb-theme="light"] .login-loading-text {
        color: #151515;
    }
    html[data-pbb-theme="light"] .login-loading-tip {
        color: #655f55;
    }
    html[data-pbb-theme="light"] .login-loading-tip-label {
        color: #8a641f;
    }
    html[data-pbb-theme="light"] .login-loading-tip-text {
        color: #655f55;
    }
    html[data-pbb-theme="light"] .login-loading-bar-track {
        background: rgba(17, 17, 17, 0.1);
        border: 1px solid rgba(184, 137, 43, 0.18);
    }
    html[data-pbb-theme="light"] .login-loading-bar-fill {
        background: linear-gradient(90deg, #151515 0%, #9f7628 58%, #d8b25e 100%);
    }
    html[data-pbb-theme="light"] .login-loading-ring-fill,
    html[data-pbb-theme="light"] .login-loading-ring-chaser,
    html[data-pbb-theme="light"] .login-loading-perimeter-fill,
    html[data-pbb-theme="light"] .login-loading-perimeter-chaser {
        stroke: #151515;
        filter: drop-shadow(0 0 6px rgba(184, 137, 43, 0.26));
    }
    html[data-pbb-theme="light"] .login-loading-perimeter-chaser--alt {
        stroke: #9f7628;
    }
    html[data-pbb-theme="light"] .login-loading-pulse-ring {
        border-color: rgba(184, 137, 43, 0.45);
        box-shadow: 0 0 18px rgba(184, 137, 43, 0.26);
    }
    html[data-pbb-theme="light"] .login-loading-orbit > span,
    html[data-pbb-theme="light"] .login-loading-dots > span {
        background: #151515;
        box-shadow: 0 0 14px rgba(184, 137, 43, 0.3);
    }
    .login-loading-overlay.fade-out {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }
    .login-loading-text {
        font-family: 'Inter', sans-serif;
        font-size: 15px;
        font-weight: 500;
        color: var(--text-muted, #718096);
        min-height: 22px;
        transition: opacity 0.3s ease;
        position: absolute;
        left: 0;
        right: 0;
        bottom: calc(24px + env(safe-area-inset-bottom, 0px));
        text-align: center;
        margin: 0;
    }
    .login-loading-bar-track {
        width: 220px;
        height: 6px;
        background: var(--pbb-loading-track, rgba(0,0,0,0.08));
        border-radius: 3px;
        overflow: hidden;
    }
    .login-loading-bar-fill {
        position: relative;
        height: 100%;
        width: 0%;
        background: linear-gradient(90deg, var(--pbb-loading-heading, var(--primary, #7BA883)), var(--pbb-loading-heading-soft, var(--primary-light, #98C9A3)));
        border-radius: 3px;
        transition: width 0.6s ease;
        overflow: hidden;
    }
    .login-loading-bar-fill::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.85) 50%, transparent 100%);
        transform: translateX(-100%);
        animation: pbbLoadingBarShimmer 1.1s linear infinite;
    }
    @keyframes pbbLoadingBarShimmer {
        from { transform: translateX(-100%); }
        to   { transform: translateX(100%); }
    }

    /* Logo wrap (holds balance logo + optional ring/pulse/orbit animations) */
    .login-loading-logo-wrap {
        position: relative;
        width: 140px;
        height: 140px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 20px;
    }
    .login-loading-logo {
        position: relative;
        width: 120px;
        max-width: 70%;
        mix-blend-mode: normal;
        filter: drop-shadow(0px 8px 24px rgba(0,0,0,0.28));
        background: rgba(255, 255, 255, 0.92);
        padding: 8px;
        border-radius: 50%;
        z-index: 2;
    }

    /* Circle progress ring (variant: "circle") */
    .login-loading-ring {
        position: absolute;
        inset: -6px;
        width: calc(100% + 12px);
        height: calc(100% + 12px);
        display: none;
        z-index: 1;
        pointer-events: none;
    }
    .login-loading-ring-fill {
        transition: stroke-dasharray 0.6s ease;
        filter: drop-shadow(0 0 4px rgba(123,168,131,0.35));
    }
    /* Fast spinning highlight arc that runs around the ring continuously. */
    .login-loading-ring-chaser {
        transform-origin: 70px 70px;
        filter: drop-shadow(0 0 6px rgba(123,168,131,0.7));
        animation: pbbLoadingRingChase 1.1s linear infinite;
    }
    @keyframes pbbLoadingRingChase {
        from { transform: rotate(0deg); }
        to   { transform: rotate(360deg); }
    }

    /* Pulse rings (variant: "pulse") */
    .login-loading-pulse-ring {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 130px;
        height: 130px;
        margin: -65px 0 0 -65px;
        border-radius: 50%;
        border: 3px solid var(--primary, #7BA883);
        box-shadow: 0 0 18px rgba(123,168,131,0.45);
        opacity: 0;
        display: none;
        z-index: 0;
        animation: pbbLoadingPulse 1.1s cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
    }
    @keyframes pbbLoadingPulse {
        0%   { transform: scale(0.5);  opacity: 0.9; }
        70%  { opacity: 0.2; }
        100% { transform: scale(1.95); opacity: 0; }
    }

    /* Orbiting dots (variant: "orbit") */
    .login-loading-orbit {
        position: absolute;
        inset: -14px;
        width: calc(100% + 28px);
        height: calc(100% + 28px);
        display: none;
        z-index: 1;
        pointer-events: none;
        animation: pbbLoadingOrbitSpin 1.1s linear infinite;
    }
    .login-loading-orbit > span {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 12px;
        height: 12px;
        margin: -6px 0 0 -6px;
        border-radius: 50%;
        background: var(--primary, #7BA883);
        box-shadow: 0 0 14px rgba(123,168,131,0.7);
    }
    .login-loading-orbit > span:nth-child(1) { transform: rotate(0deg)   translate(78px); }
    .login-loading-orbit > span:nth-child(2) { transform: rotate(120deg) translate(78px); opacity: 0.75; }
    .login-loading-orbit > span:nth-child(3) { transform: rotate(240deg) translate(78px); opacity: 0.5; }
    @keyframes pbbLoadingOrbitSpin {
        from { transform: rotate(0deg); }
        to   { transform: rotate(360deg); }
    }

    /* Perimeter progress (variant: "perimeter") — animated border around the whole screen */
    .login-loading-perimeter {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: none;
        pointer-events: none;
        z-index: 0;
        overflow: visible;
    }
    .login-loading-perimeter-fill {
        stroke: var(--primary, #7BA883);
        transition: stroke-dasharray 0.6s ease;
        filter: drop-shadow(0 0 6px rgba(123,168,131,0.45));
    }
    /* Fast continuously running highlight that races around the screen edge.
       Always animates regardless of loading progress so the screen never feels stuck. */
    .login-loading-perimeter-chaser {
        stroke: var(--primary, #7BA883);
        filter: drop-shadow(0 0 8px rgba(123,168,131,0.85));
        animation: pbbLoadingPerimeterChase 1.4s linear infinite;
    }
    .login-loading-perimeter-chaser--alt {
        stroke: var(--primary-light, #98C9A3);
        opacity: 0.85;
        animation-duration: 1.4s;
        animation-delay: -0.7s;
    }
    @keyframes pbbLoadingPerimeterChase {
        from { stroke-dashoffset: 0; }
        to   { stroke-dashoffset: -100; }
    }

    /* Bouncing dots (variant: "dots") */
    .login-loading-dots {
        display: none;
        gap: 10px;
        height: 14px;
        align-items: center;
        justify-content: center;
    }
    .login-loading-dots > span {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: var(--primary, #7BA883);
        box-shadow: 0 0 10px rgba(123,168,131,0.55);
        animation: pbbLoadingDot 0.7s ease-in-out infinite;
    }
    .login-loading-dots > span:nth-child(2) { animation-delay: 0.1s; }
    .login-loading-dots > span:nth-child(3) { animation-delay: 0.2s; }
    @keyframes pbbLoadingDot {
        0%, 80%, 100% { transform: translateY(0)    scale(0.55); opacity: 0.4; }
        40%           { transform: translateY(-9px) scale(1.1);  opacity: 1; }
    }

    /* Per-style visibility toggles */
    #login-loading-overlay[data-bar-style="circle"]    .login-loading-bar-track,
    #login-loading-overlay[data-bar-style="perimeter"] .login-loading-bar-track,
    #login-loading-overlay[data-bar-style="dots"]      .login-loading-bar-track,
    #login-loading-overlay[data-bar-style="pulse"]     .login-loading-bar-track,
    #login-loading-overlay[data-bar-style="orbit"]     .login-loading-bar-track { display: none; }
    #login-loading-overlay[data-bar-style="circle"]    .login-loading-ring { display: block; }
    #login-loading-overlay[data-bar-style="perimeter"] .login-loading-perimeter { display: block; }
    #login-loading-overlay[data-bar-style="dots"]      .login-loading-dots { display: flex; }
    #login-loading-overlay[data-bar-style="pulse"]     .login-loading-pulse-ring { display: block; }
    #login-loading-overlay[data-bar-style="orbit"]     .login-loading-orbit { display: block; }

    /* Emoji: default (legacy) — kept for any older markup that still uses it above the logo */
    .login-loading-emoji {
        font-size: 54px;
        line-height: 1;
        margin-bottom: 16px;
        animation: pbbLoadingEmojiBounce 1.6s ease-in-out infinite;
        filter: drop-shadow(0 4px 6px rgba(0,0,0,0.12));
    }
    /* Emoji moved below tips: smaller, softer, no bottom margin */
    .login-loading-emoji-footer {
        font-size: 40px;
        margin-top: 18px;
        margin-bottom: 0;
        opacity: 0.9;
    }
    @keyframes pbbLoadingEmojiBounce {
        0%, 100% { transform: translateY(0) scale(1); }
        50%      { transform: translateY(-10px) scale(1.08); }
    }
    .login-loading-tip {
        margin-top: 20px;
        font-family: 'Inter', sans-serif;
        font-size: 13px;
        color: var(--pbb-loading-copy, var(--text-muted, #718096));
        line-height: 1.55;
        max-width: 300px;
        text-align: center;
        padding: 0 24px;
        opacity: 0;
        animation: pbbLoadingTipFade 0.6s ease 0.25s forwards;
    }
    .login-loading-tip-label {
        font-weight: 700;
        color: var(--pbb-loading-heading, var(--primary, #7BA883));
        letter-spacing: 0.02em;
    }
    .login-loading-tip-text {
        color: var(--pbb-loading-copy, var(--text-main, #1a202c));
        font-style: italic;
    }
    @keyframes pbbLoadingTipFade {
        from { opacity: 0; transform: translateY(6px); }
        to   { opacity: 0.9; transform: translateY(0); }
    }

    /* Toggle switch - checked state */
    .toggle-switch input { position:absolute; opacity:0; width:0; height:0; }
    .toggle-switch input:checked + .slider { background:#22c55e !important; }
    .toggle-switch input:checked ~ .knob { left:18px !important; }

    /* ============================================================
       DYNAMIC BACKGROUND SYSTEM (DBZ THEMES)
       ============================================================ */
    .dynamic-bg-container {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 0;
        overflow: hidden;
        transition: filter 1.5s ease;
    }

    .bg-layer {
        position: absolute;
        top: -5%;
        left: -10%; /* Extra width for parallax */
        width: 120%;
        height: 110%;
        background-size: cover;
        background-position: center;
        transition: transform 0.1s ease-out;
        will-change: transform;
        transform-style: preserve-3d;
    }

    @keyframes bg-breathing {
        0% { transform: scale(1) translateZ(0); }
        50% { transform: scale(1.02) translateZ(10px); }
        100% { transform: scale(1) translateZ(0); }
    }
    .bg-breathing {
        animation: bg-breathing 8s ease-in-out infinite;
    }

    /* Depth layers */
    .bg-layer-back { z-index: 1; }
    .bg-layer-mid { z-index: 2; }
    .bg-layer-front { z-index: 3; }

    /* Time of Day Filters */
    .bg-time-dawn { filter: sepia(0.3) brightness(0.8) contrast(1.1) hue-rotate(-20deg); }
    .bg-time-day { filter: brightness(1); }
    .bg-time-dusk { filter: sepia(0.4) brightness(0.7) contrast(1.2) hue-rotate(20deg); }
    .bg-time-night { filter: brightness(0.4) contrast(1.3) hue-rotate(200deg) saturate(0.6); }

    /* Weather: Rain Effect */
    @keyframes rain-fall {
        0% { transform: translateY(-100%) rotate(10deg); }
        100% { transform: translateY(100vh) rotate(10deg); }
    }

    .rain-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 4;
        pointer-events: none;
        display: none;
        overflow: hidden;
    }

    .rain-drop {
        position: absolute;
        background: rgba(255, 255, 255, 0.3);
        width: 1px;
        height: 15px;
        animation: rain-fall 0.8s infinite linear;
    }

    /* Weather: Clouds / Mist */
    @keyframes cloud-drift {
        0% { transform: translateX(-100%); opacity: 0; }
        10% { opacity: 0.3; }
        90% { opacity: 0.3; }
        100% { transform: translateX(100vw); opacity: 0; }
    }

    .cloud-layer {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 3;
        pointer-events: none;
        background: url('https://f005.backblazeb2.com/file/shannonsvideos/clouds.png'); /* Fallback cloud texture if available */
        background-size: contain;
        opacity: 0.2;
        animation: cloud-drift 20s infinite linear;
        display: none;
    }