:root {
    --primary: #007AFF;
    --bg: #F2F2F7;
    --card-bg: #FFFFFF;
    --text: #1C1C1E;
    --waec: #FF9500;
    --neco: #34C759;
    --jamb: #AF52DE;
}

* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', sans-serif; -webkit-tap-highlight-color: transparent; }


/* --- 1. GLOBAL RESET (Fixes Top Space) --- */
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden; /* Prevents the whole page from bouncing */
    position: fixed;  /* Locks the body in place on mobile */
    background-color: #e0e5ec; /* Keeps your outer background color */
}


/* --- 3. ENSURE FRAME FILLS WRAPPER --- */
.phone-frame {
    width: 100%;
    height: 100%; /* Forces frame to respect the 100dvh wrapper */
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: #F5F7FA;
}





/* --- PALMPAY STYLE GRID --- */
.category-section {
    margin-bottom: 15px; /* Reduced from 30px for compactness */
    background: white;   /* PalmPay uses white sections */
    padding: 15px;       /* Inner padding */
    border-radius: 16px; /* Rounded block edges */
}

.palm-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 Icons per row */
    gap: 20px 10px; /* Vertical gap 20px, Horizontal gap 10px */
    justify-items: center;
}

.palm-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
    cursor: pointer;
    transition: opacity 0.5s ease, transform 0.5s ease;
    /* Removed background/border/shadow of the card itself */
}

.palm-item:active { opacity: 0.6; transform: scale(0.95); }

.palm-icon {
    width: 48px; /* Compact but conspicuous */
    height: 48px;
    border-radius: 14px; /* Soft square like PalmPay */
    display: flex; 
    align-items: center; 
    justify-content: center;
    font-size: 20px; 
    color: white; 
    margin-bottom: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1); /* Subtle shadow on ICON only */
}

.palm-item h4 {
    font-size: 11px; /* Smaller, crisp text */
    font-weight: 600; 
    color: #333; 
    line-height: 1.2;
    max-width: 60px; /* Force wrap for long names */
}

/* --- UI FIX: Better Unlocked/Locked Icons --- */
.status-badge {
    position: absolute;
    bottom: -2px; 
    right: -2px;
    width: 20px; 
    height: 20px;
    border-radius: 50%;
    display: flex; 
    align-items: center; 
    justify-content: center;
    font-size: 10px; 
    box-shadow: 0 2px 5px rgba(0,0,0,0.15);
    z-index: 2;
}

.status-locked {
    background: white;
    color: #8E8E93;
}

.status-unlocked {
    background: #34C759; /* Green */
    color: white;
    border: 2px solid white;
}




/* --- COMPACT HEADER & SPACING --- */
.nav-bar {
    height: 60px; /* Reduced from 80px */
    background: #F5F7FA; /* Light grey instead of glass */
    backdrop-filter: none;
    padding-bottom: 10px;
    border-bottom: none;
}

.app-wrapper, .phone-frame, .content-scroll {
    background: #F5F7FA; /* Match PalmPay light grey background */
}

/* Hide the background blobs for a cleaner look */
.blob { display: none; }

/* Make Premium Card Slimmer */
.premium-card {
    padding: 15px; 
    margin: 10px 15px 20px 15px; /* Add margin to separate from edge */
    border-radius: 16px;
}
.premium-card h3 { font-size: 16px; }






/* DESKTOP/BIG SCREEN OPTIMIZATION */
@media (min-width: 500px) {
    .phone-frame {
        height: 90vh;
        border-radius: 40px;
        box-shadow: 0 40px 100px -20px rgba(0,0,0,0.2), 0 0 0 10px rgba(255,255,255,0.5);
    }
}

/* === SCREEN VISIBILITY LOGIC (Fixing the White Screen) === */

.screen {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    display: flex; flex-direction: column;
    background: var(--bg);
    
    /* DEFAULT STATE: Hidden */
    opacity: 0;
    z-index: 0;
    pointer-events: none;
    transition: opacity 0.4s ease; /* Smooth fade in */
}

/* WHEN ACTIVE: Force it to be visible */
.active-screen {
    opacity: 1 !important;        /* The !important is CRITICAL */
    z-index: 10 !important;       /* Brings it to front */
    pointer-events: auto !important;
    transform: none !important;   /* Resets any movement */
}

/* WHEN HIDDEN: Ensure it stays back */
.hidden-screen {
    opacity: 0 !important;
    pointer-events: none !important;
    z-index: -1;
}



/* HEADER & NAV */
.nav-bar {
    padding: 15px 20px;
    padding-top: max(20px, env(safe-area-inset-top)); /* Notch support */
    height: 80px;
    display: flex; align-items: center; gap: 15px;
    background: rgba(255,255,255,0.9);
    backdrop-filter: blur(10px);
    z-index: 100;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}

.profile-pic { width: 40px; height: 40px; border-radius: 12px; background: #ddd; background-size: cover; box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
.user-info { display: flex; flex-direction: column; margin-right: auto; }
.greeting { font-size: 11px; color: #888; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
#user-name { font-weight: 800; font-size: 16px; color: var(--text); }
#logout-btn { background: #ffe5e5; border: none; width: 36px; height: 36px; border-radius: 50%; color: #ff3b30; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: 0.2s;}
#logout-btn:active { transform: scale(0.9); }

/* SCROLLABLE CONTENT AREA */
.content-scroll {
    flex: 1; /* Fills remaining space */
    overflow-y: auto;
    overflow-x: hidden;
    padding: 20px;
    padding-bottom: 40px; /* Space for footer */
}

/* PREMIUM CARD */
.premium-card {
    background: linear-gradient(135deg, #1c1c1e 0%, #3a3a3c 100%);
    padding: 20px; border-radius: 20px;
    display: flex; align-items: center; justify-content: space-between;
    color: white; margin-bottom: 30px;
    position: relative; overflow: hidden;
    box-shadow: 0 15px 30px rgba(0,0,0,0.2);
    cursor: pointer;
}
.premium-card h3 { font-size: 18px; margin-bottom: 4px; color: #FFD60A; }
.premium-card p { font-size: 13px; opacity: 0.8; }
.p-arrow { width: 30px; height: 30px; background: rgba(255,255,255,0.2); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; }
.shine {
    position: absolute; top: 0; left: -100%; width: 50%; height: 100%;
    background: linear-gradient(to right, transparent, rgba(255,255,255,0.1), transparent);
    transform: skewX(-20deg); animation: shine 3s infinite;
}
@keyframes shine { 100% { left: 200%; } }

/* HORIZONTAL SCROLL CATEGORIES */
.category-section { margin-bottom: 30px; }
.section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; padding: 0 5px; }
.section-header h2 { font-size: 18px; font-weight: 800; }
.badge { font-size: 10px; font-weight: 700; background: #FF9500; color: white; padding: 4px 8px; border-radius: 9px; }
.badge.blue { background: #007AFF; }
.badge.purple { background: #AF52DE; }


@keyframes nudge {
    0%, 100% { transform: translateX(0); }
    10% { transform: translateX(-15px); }
    20% { transform: translateX(0); }
}


/* KILLER FOOTER STYLES */
.app-footer {
    margin-top: 40px;
    padding: 30px 20px;
    background: white;
    border-radius: 24px;
    text-align: center;
    box-shadow: 0 -10px 40px rgba(0,0,0,0.03);
    border: 1px solid rgba(0,0,0,0.02);
}
.footer-brand {
    display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 20px;
}
.footer-brand i { font-size: 32px; color: var(--primary); }
.footer-brand span { font-weight: 800; font-size: 18px; color: var(--text); letter-spacing: -0.5px; }
.footer-contact {
    display: flex; justify-content: center; gap: 15px; margin-bottom: 20px;
}
.footer-contact a {
    text-decoration: none; font-size: 13px; font-weight: 600; color: #555;
    background: #f5f5f7; padding: 10px 16px; border-radius: 30px;
    transition: 0.2s;
}
.footer-contact a:hover { background: var(--primary); color: white; }
.footer-legal { font-size: 11px; color: #bbb; }

/* VIEWER FIXES */
.viewer-scroll { padding: 0; display: flex; flex-direction: column; }
.paper-container {
    width: 100%; min-height: 100%;
    background: white; position: relative; padding: 10px;
}
#question-image { width: 100%; display: block; }
.watermark-grid {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    overflow: hidden; pointer-events: none; z-index: 10;
    display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: 200px;
}
.watermark-text {
    display: flex; align-items: center; justify-content: center;
    transform: rotate(-30deg); font-size: 20px; font-weight: 800;
    color: rgba(0,0,0,0.03); white-space: nowrap;
}

/* LOGIN SCREEN TWEAKS */
#login-screen { padding: 40px; justify-content: space-between; }
.header { margin-top: 60px; }
.logo-circle { 
    width: 70px; 
    height: 70px; 
    background: #006633; /* Royal Green */
    border-radius: 20px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    color: white; 
    font-size: 28px; 
    margin-bottom: 20px; 
    box-shadow: 0 10px 20px rgba(0, 102, 51, 0.3); /* Matches the Royal Green */
}
h1 { font-size: 34px; font-weight: 900; line-height: 1.1; margin-bottom: 10px; color: var(--text); letter-spacing: -1px; }
p { color: #8e8e93; font-size: 15px; line-height: 1.4; }
.ios-btn { width: 100%; padding: 18px; background: #000; color: white; border: none; border-radius: 16px; font-size: 16px; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 10px; cursor: pointer; }



/* MODAL STYLES */
.modal-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.6); backdrop-filter: blur(5px);
    z-index: 2000; display: flex; align-items: center; justify-content: center;
    transition: opacity 0.3s;
}
.hidden-modal { opacity: 0; pointer-events: none; }

.modal-content {
    background: white; width: 85%; padding: 30px 25px; border-radius: 24px;
    text-align: center; box-shadow: 0 20px 40px rgba(0,0,0,0.2);
    transform: scale(1); transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.hidden-modal .modal-content { transform: scale(0.8); }

.crown-icon {
    width: 60px; height: 60px; background: linear-gradient(135deg, #FFD60A, #FF9F0A);
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: 24px; color: white; margin: 0 auto 15px;
    box-shadow: 0 10px 20px rgba(255, 214, 10, 0.3);
}
.modal-header h2 { font-size: 22px; font-weight: 800; margin-bottom: 8px; }
.modal-header p { font-size: 13px; color: #888; margin-bottom: 25px; line-height: 1.4; }

.input-group input {
    width: 100%; padding: 15px; border: 2px solid #eee; border-radius: 12px;
    font-size: 16px; text-align: center; font-weight: 600; outline: none;
    transition: 0.2s; background: #f9f9f9; text-transform: uppercase;
}
.input-group input:focus { border-color: var(--primary); background: white; }

.modal-btn {
    width: 100%; padding: 16px; border-radius: 14px; border: none;
    font-size: 15px; font-weight: 700; cursor: pointer; margin-bottom: 10px;
}
.primary-btn { background: var(--text); color: white; margin-top: 10px;}
.secondary-btn { background: #eefcf3; color: #25D366; } /* Whatsapp Green tint */
.close-text-btn { background: none; border: none; color: #999; font-weight: 600; cursor: pointer; margin-top: 5px; }
.error-text { color: #ff3b30; font-size: 12px; height: 15px; margin-bottom: 5px; font-weight: 600; }

/* PREMIUM ACTIVATED STATE */
/* Remove the hardcoded background gradient here */
.premium-active-card {
    position: relative;
    overflow: hidden;
    transition: all 0.5s ease;
    /* The background is now set by JS based on level */
}

.premium-active-card h3 { 
    font-weight: 900; 
    letter-spacing: -0.5px;
}
.premium-active-card .p-arrow { background: rgba(255,255,255,0.3); color: white; }



/* DRAGGABLE PHYSICS */
.phone-frame {
    /* Existing styles remain... */
    cursor: grab; /* Indicates it can be moved */
    touch-action: none; /* Prevents browser handling gestures */
}

.phone-frame:active {
    cursor: grabbing;
}

/* The Snap Back Animation */
.snap-back {
    transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}



/* 1. The Container (Top Right) */
#toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* 2. The Popup Card */
.toast-box {
    min-width: 300px;
    padding: 16px 20px;
    border-radius: 12px;
    background: white;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    display: flex;
    align-items: center;
    gap: 15px;
    font-family: sans-serif;
    position: relative;
    overflow: hidden;
    
    /* Animation In */
    animation: slideIn 0.5s ease forwards;
}

/* 3. Types of Alerts */
.toast-success { border-left: 6px solid #2ecc71; }
.toast-success i { color: #2ecc71; }

.toast-error { border-left: 6px solid #e74c3c; }
.toast-error i { color: #e74c3c; }

.toast-info { border-left: 6px solid #3498db; }
.toast-info i { color: #3498db; }

/* 4. Text Styling */
.toast-box span {
    color: #333;
    font-size: 14px;
    font-weight: 500;
}

/* 5. Animations */
@keyframes slideIn {
    from { transform: translateX(120%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes fadeOut {
    to { transform: translateX(120%); opacity: 0; }
}




/* --- NEW SELECTION UI --- */
.large-modal {
    max-width: 500px;
    width: 90%;
    max-height: 85vh; /* Prevent overflow on small screens */
    overflow-y: auto;
}

.selection-area {
    margin-top: 20px;
    text-align: left;
}

.group-tabs {
    display: flex;
    background: #f2f2f7;
    padding: 4px;
    border-radius: 10px;
    margin-bottom: 15px;
}

.g-tab {
    flex: 1;
    padding: 8px;
    border: none;
    background: transparent;
    font-size: 13px;
    font-weight: 600;
    color: #888;
    border-radius: 8px;
    cursor: pointer;
    transition: 0.3s;
}

.g-tab.active {
    background: white;
    color: var(--text);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.guide-text {
    font-size: 12px;
    color: #888;
    margin-bottom: 10px;
    text-align: center;
}

.subject-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 20px;
}

.subject-chip {
    padding: 12px;
    border: 2px solid #eee;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    transition: 0.2s;
    background: white;
    position: relative;
    overflow: hidden;
}

.subject-chip i { margin-right: 5px; color: #ccc; }

/* Selected State */
.subject-chip.selected {
    border-color: var(--primary);
    background: #f0f7ff;
    color: var(--primary);
}
.subject-chip.selected i { color: var(--primary); }

/* Disabled State (Wrong Group) */
.subject-chip.disabled {
    opacity: 0.4;
    pointer-events: none;
    background: #f9f9f9;
}



/* --- MODERN CAROUSEL MODAL --- */
.modal-content.modern-swipe {
    padding: 0; /* Remove padding to let slider touch edges */
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    overflow: hidden;
    width: 95%;
    max-width: 420px;
}

/* The Slider Container */
.exam-slider {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch; /* Smooth scroll on iOS */
    scrollbar-width: none; /* Firefox */
}
.exam-slider::-webkit-scrollbar { display: none; } /* Chrome/Safari */

/* Individual Slide */
.exam-slide {
    min-width: 100%;
    scroll-snap-align: center;
    padding: 30px 25px;
    box-sizing: border-box;
    transition: opacity 0.3s;
}

/* Dots Indicator */
.slider-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 15px;
}
.dot {
    width: 8px; height: 8px;
    background: #ccc;
    border-radius: 50%;
    transition: 0.3s;
}
.dot.active-dot {
    width: 20px;
    background: var(--primary);
    border-radius: 10px;
}

/* Header Styling within Slide */
.slide-header { margin-bottom: 20px; }
.slide-badge {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
}
/* Color Coding */
.slide-jamb .slide-badge { background: rgba(175, 82, 222, 0.15); color: #AF52DE; }
.slide-waec .slide-badge { background: rgba(255, 149, 0, 0.15); color: #FF9500; }
.slide-neco .slide-badge { background: rgba(52, 199, 89, 0.15); color: #34C759; }

.limit-info {
    font-size: 12px;
    color: #888;
    margin-top: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

/* The Animation Keyframes */
@keyframes slideUpFooter {
    from { transform: translateY(100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* --- APP WRAPPER (Master Fix) --- */
.app-wrapper {
    width: 100%;
    
    /* 🔥 CRITICAL FIX: Changed from 100dvh to 100% */
    /* This forces the wrapper to respect the fixed body height, preventing the footer jump. */
    height: 100%; 
    
    max-width: 480px; 
    background: #F5F7FA;
    display: flex;
    flex-direction: column;
    position: relative;
    
    /* Center it on big screens, fill it on mobile */
    margin: 0 auto; 
    box-shadow: 0 0 30px rgba(0,0,0,0.1);
}

/* --- HIDE FOOTER BEHIND LOGIN --- */
#login-screen {
    /* z-index line deleted */
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    /* ... keep other styles ... */
}

.nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #999999; /* Inactive Color */
    font-size: 10px;
    font-weight: 600;
    cursor: pointer;
    width: 100%;
    height: 100%;
    transition: all 0.2s ease;
}

.nav-item i {
    font-size: 20px;
    margin-bottom: 4px;
}

/* Active State (The Purple/Blue Pop) */
.nav-item.active {
    color: #5856D6; 
}
.nav-item.active i {
    transform: translateY(-2px);
}

/* Notification Dot for Rewards */
.nav-badge {
    position: relative;
}
.nav-badge::after {
    content: '';
    position: absolute;
    top: -2px;
    right: -2px;
    width: 8px;
    height: 8px;
    background: #FF3B30;
    border-radius: 50%;
    border: 1px solid white;
}

/* IMPORTANT: Push content up so footer doesn't cover it */
.content-scroll {
    padding-bottom: 80px !important; 
}


/* --- 77 DAYS ULTRA-MODERN SWIPE --- */
.challenge-scroll-wrapper {
    display: flex;
    gap: 15px; /* More breathing room */
    overflow-x: auto;
    padding: 10px 20px 30px 20px; /* Padding bottom handles the deep shadow */
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    mask-image: linear-gradient(to right, black 90%, transparent 100%); /* Fades out edge */
    -webkit-mask-image: linear-gradient(to right, black 90%, transparent 100%);
}
.challenge-scroll-wrapper::-webkit-scrollbar { display: none; }

.challenge-mini-card {
    min-width: 115px; /* Slightly smaller, more elegant */
    background: #FFFFFF;
    border-radius: 22px; /* Super rounded modern look */
    padding: 18px 12px;
    scroll-snap-align: center; /* Snaps to center */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    border: 1px solid rgba(0,0,0,0.04);
    
    /* The "Conspicuous" Shadow */
    box-shadow: 0 12px 24px -6px rgba(0,0,0,0.08); 
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    
    /* Initial State for Animation */
    opacity: 0;
    transform: translateX(40px) scale(0.9); 
}

/* The "Elastic" Slide-In Animation */
@keyframes slideInElastic { 
    to { opacity: 1; transform: translateX(0) scale(1); } 
}

.challenge-mini-card:active { transform: scale(0.92); }

/* The Icon Circle */
.mini-icon {
    width: 44px; height: 44px;
    border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    color: white; font-size: 20px;
    margin-bottom: 12px;
    /* Inner light border for depth */
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.2), 0 8px 15px rgba(0,0,0,0.15);
}

.mini-info h4 { 
    font-size: 13px; font-weight: 800; color: #1C1C1E; 
    margin-bottom: 4px; letter-spacing: -0.3px;
}
.mini-info span { 
    font-size: 9px; color: #8E8E93; font-weight: 700; 
    text-transform: uppercase; letter-spacing: 0.5px; 
    background: #F2F2F7; padding: 3px 8px; border-radius: 8px;
}

/* Status Dot (Lock or Play) */
.status-indicator {
    position: absolute; top: 10px; right: 10px;
    width: 8px; height: 8px; border-radius: 50%;
}



/* --- NEW HEADER ICONS --- */
.nav-icons {
    display: flex;
    gap: 12px;
    align-items: center;
}
.icon-btn {
    background: white;
    border: none;
    width: 36px; 
    height: 36px;
    border-radius: 50%; /* Circle shape */
    display: flex; align-items: center; justify-content: center;
    color: #333;
    font-size: 16px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    cursor: pointer;
    position: relative;
    transition: transform 0.2s;
}
.icon-btn:active { transform: scale(0.9); }
.notif-dot {
    position: absolute;
    top: 8px; right: 8px;
    width: 6px; height: 6px;
    background: #FF3B30;
    border-radius: 50%;
    border: 1px solid white;
}


/* Specific tweak for Challenge icons to make them look "hot" */
#challenge-grid .palm-icon {
    border-radius: 50%; /* Make challenge icons circular to differentiate */
    box-shadow: 0 4px 12px rgba(255, 149, 0, 0.3); /* Orange glow */
}

#challenge-grid .palm-item:active {
    transform: scale(0.95);
}



/* --- NEW: SEARCH-BAR STYLE CARDS (Google AI Look) --- */

.challenge-scroll-wrapper {
    display: flex;
    gap: 12px;
    padding: 10px 5px 30px 5px; 
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 0 -15px; 
    padding-left: 20px; 
    padding-right: 20px;
}

/* The "Bar" Container */
.search-style-card {
    min-width: 85%; /* Wide card, nearly full screen width */
    height: 60px;
    background: #FFFFFF;
    border-radius: 35px; /* Full pill shape */
    padding: 6px 6px 6px 20px; /* Padding for text vs button */
    
    display: flex;
    align-items: center;
    justify-content: space-between;
    
    scroll-snap-align: center;
    box-shadow: 0 8px 20px -5px rgba(0,0,0,0.1); /* Floating effect */
    border: 1px solid rgba(0,0,0,0.02);
    position: relative;
    transition: transform 0.2s;
}

.search-style-card:active { transform: scale(0.97); }

/* Left Side: Icon + Text */
.card-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1; /* Take up remaining space */
}

.subject-icon-circle {
    width: 32px; height: 32px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px;
    color: white;
}

.card-text-group {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.card-title {
    font-size: 14px;
    font-weight: 700;
    color: #1C1C1E;
}

.card-sub {
    font-size: 10px;
    color: #8E8E93;
    font-weight: 500;
    margin-top: 2px;
}

/* Right Side: The "AI Mode" Button */
.action-pill-btn {
    height: 100%;
    padding: 0 24px;
    border-radius: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    color: white;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

/* Status Colors */
.btn-start { background: linear-gradient(135deg, #007AFF 0%, #00C7BE 100%); }
.btn-locked { background: #E5E5EA; color: #8E8E93; box-shadow: none; }
.btn-code { background: linear-gradient(135deg, #FF9500 0%, #FF2D55 100%); } /* Orange/Red for "Get Code" */

/* --- DAILY CODE MODAL --- */
.daily-modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.7); backdrop-filter: blur(5px);
    z-index: 3000; /* Highest priority */
    display: flex; align-items: center; justify-content: center;
}

.daily-card {
    background: white; width: 85%; max-width: 340px;
    padding: 25px; border-radius: 24px; text-align: center;
    animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes popIn { from { transform: scale(0.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.whatsapp-link {
    display: block; margin-top: 15px; font-size: 12px; 
    color: #25D366; font-weight: 700; text-decoration: none;
    background: #f0fdf4; padding: 10px; border-radius: 10px;
}


/* 3. Colorful Locked Icons */
/* Force full opacity so colors show */
.palm-icon { opacity: 1 !important; position: relative; }

/* Small White Lock Badge */
.lock-overlay {
    position: absolute;
    bottom: -2px; right: -2px;
    width: 18px; height: 18px;
    background: white;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.15);
    font-size: 9px; color: #8E8E93;
    z-index: 2;
}



/* --- PHYSICS SWAP ANIMATION --- */
.fade-grid {
    transition: all 1.2s cubic-bezier(0.34, 1.56, 0.64, 1); /* Elastic snap effect */
    transform: scale(1) translateY(0);
    opacity: 1;
}

.fade-out {
    opacity: 0;
    transform: scale(0.85) translateY(10px); /* Shrinks and drops down slightly */
}




/* Add to style.css */
.modal-close-x {
    position: absolute;
    top: 15px;
    right: 15px;
    background: #F2F2F7; /* Light grey circle */
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: #8E8E93; /* Icon color */
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: transform 0.2s;
    z-index: 10;
}

.modal-close-x:active {
    background: #E5E5EA;
    transform: scale(0.9);
}

/* Ensure relative positioning for the card so the X sits inside it */
.daily-card {
    position: relative; 
    /* ... your existing daily-card styles ... */
}



/* WhatsApp Green Button */
.secondary-btn { 
    background: #eefcf3; 
    color: #25D366; 
    margin-top: 5px;
}
.secondary-btn:active {
    background: #dcfce7;
}

/* Ensure English looks active/locked in grid */
.subject-chip.selected {
    border-color: var(--primary);
    background: #f0f7ff;
    color: var(--primary);
}



/* Close X Button */
.modal-close-x {
    position: absolute;
    top: 15px; right: 15px;
    background: #F2F2F7;
    border: none;
    width: 32px; height: 32px;
    border-radius: 50%;
    color: #8E8E93;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px;
    z-index: 10;
}


/* Style for the Compulsory English Chip */
.locked-chip {
    background: #eef2ff !important; /* Light blue background */
    border-color: #007AFF !important;
    color: #007AFF !important;
    opacity: 0.8; /* Slightly faded to imply "fixed" */
    cursor: not-allowed;
}

/* Ensure the lock icon matches */
.locked-chip i {
    color: #007AFF !important;
}


@keyframes shake {
  0% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  50% { transform: translateX(5px); }
  75% { transform: translateX(-5px); }
  100% { transform: translateX(0); }
}



/* === iOS CUSTOM ALERT BOX === */
.ios-modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.4); backdrop-filter: blur(4px);
    z-index: 5000;
    display: flex; align-items: center; justify-content: center;
    transition: opacity 0.2s ease;
}

.ios-alert-box {
    background: rgba(255, 255, 255, 0.95);
    width: 270px; /* Standard iOS Alert Width */
    border-radius: 14px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    transform: scale(1);
    animation: alertPop 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes alertPop {
    from { transform: scale(0.9); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.alert-content {
    padding: 20px 16px;
    border-bottom: 1px solid rgba(0,0,0,0.1);
}

.alert-content h3 {
    margin: 0; margin-bottom: 5px; font-size: 17px; font-weight: 600; color: #000;
}
.alert-content p {
    margin: 0; font-size: 13px; color: #000;
}

.alert-actions {
    display: flex;
}

.alert-btn {
    flex: 1;
    background: transparent;
    border: none;
    padding: 12px;
    font-size: 17px;
    cursor: pointer;
    background: rgba(255,255,255,0.5); /* Touch highlight support */
}
.alert-btn:active { background: #e5e5e5; }

/* Cancel is typically Blue/Bold in iOS, but standard Cancel is regular blue */
.alert-btn.cancel {
    color: #007AFF;
    font-weight: 400;
    border-right: 1px solid rgba(0,0,0,0.1);
    border-bottom-left-radius: 14px;
}

/* Destructive Action is Red/Bold */
.alert-btn.destructive {
    color: #FF3B30;
    font-weight: 600;
    border-bottom-right-radius: 14px;
}



/* --- NEW CLEANER HINT --- */
.pulse-hint {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.4); /* Darkens the circle slightly */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 18px;
    z-index: 10;
    animation: thumbPulse 2s infinite;
    pointer-events: none;
}

@keyframes thumbPulse {
    0% { transform: scale(1); opacity: 0.8; }
    50% { transform: scale(1.1); opacity: 0.4; }
    100% { transform: scale(1); opacity: 0.8; }
}



/* === ANALYTICS MODAL === */
.analytics-card {
    background: #F5F7FA;
    padding: 0 !important;
    max-height: 85vh;
    display: flex; flex-direction: column;
}

.analytics-header {
    background: white;
    padding: 25px 20px 10px 20px;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}

.coin-balance-card {
    background: linear-gradient(135deg, #1C1C1E 0%, #000000 100%);
    border-radius: 20px;
    padding: 20px;
    color: white;
    text-align: center;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    margin-top: 10px;
}

.coin-label { font-size: 10px; font-weight: 700; letter-spacing: 1px; color: #8E8E93; margin-bottom: 5px; }
.coin-value { font-size: 32px; font-weight: 800; color: #FFD60A; display: flex; align-items: center; justify-content: center; gap: 10px; }
.coin-sub { font-size: 11px; color: #8E8E93; margin-top: 5px; }
.text-gold { color: #FFD60A; }

/* TABS */
.analytics-tabs {
    display: flex; padding: 15px 20px; gap: 10px; background: white;
}
.a-tab {
    flex: 1; padding: 10px; border: none; background: #F2F2F7;
    border-radius: 10px; font-weight: 600; font-size: 13px; color: #8E8E93;
    transition: 0.3s;
}
.a-tab.active { background: #007AFF; color: white; box-shadow: 0 4px 10px rgba(0,122,255,0.3); }

/* CONTENT */
.tab-content { display: none; padding: 20px; overflow-y: auto; flex: 1; }
.tab-content.active-tab { display: block; }

/* STATS GRID */
.stats-grid-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-bottom: 25px; }
.stat-mini-box {
    background: white; padding: 15px 10px; border-radius: 16px;
    text-align: center; box-shadow: 0 4px 15px rgba(0,0,0,0.03);
    display: flex; flex-direction: column; align-items: center; gap: 5px;
}
.stat-mini-box i { font-size: 18px; margin-bottom: 2px; }
.stat-mini-box span { font-size: 16px; font-weight: 800; color: #1C1C1E; }
.stat-mini-box small { font-size: 9px; color: #8E8E93; font-weight: 600; text-transform: uppercase; }

.text-green { color: #34C759; }
.text-blue { color: #007AFF; }
.text-orange { color: #FF9500; }

/* HISTORY LIST */
.history-section h4 { font-size: 14px; margin-bottom: 15px; color: #333; }
.history-item {
    background: white; padding: 15px; border-radius: 16px;
    margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.02);
}
.h-left { display: flex; flex-direction: column; gap: 2px; }
.h-subject { font-weight: 700; font-size: 14px; color: #1C1C1E; }
.h-date { font-size: 10px; color: #8E8E93; }
.h-right { text-align: right; }
.h-score { font-weight: 800; font-size: 15px; color: #34C759; }
.h-coins { font-size: 10px; color: #FFD60A; font-weight: 700; background: #FFF9E6; padding: 2px 6px; border-radius: 4px; }

/* LEADERBOARD LOCK */
.leaderboard-lock-screen {
    text-align: center; padding: 40px 20px;
    background: white; border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}
.lock-icon-circle {
    width: 60px; height: 60px; background: #F2F2F7; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 24px; color: #8E8E93; margin: 0 auto 15px;
}
.countdown-badge {
    display: inline-block; background: #000; color: white;
    padding: 8px 16px; border-radius: 20px; font-size: 12px; font-weight: 700;
    margin-top: 15px;
}

/* LEADERBOARD UNLOCKED */
.rank-row {
    display: flex; align-items: center; gap: 15px;
    background: white; padding: 12px; border-radius: 12px; margin-bottom: 8px;
}
.rank-num { font-weight: 800; color: #8E8E93; width: 25px; }
.rank-avatar { width: 35px; height: 35px; border-radius: 50%; background: #eee; }
.rank-name { flex: 1; font-weight: 600; font-size: 13px; }
.rank-score { font-weight: 800; color: #FFD60A; }




/* ========================================== */
/* 🔔 MODERN NOTIFICATION POPOVER (The Bubble) */
/* ========================================== */

.notif-popover {
    position: fixed;
    top: 75px; /* Sits right below the header */
    right: 20px; /* Aligned to the right side */
    width: 300px;
    max-height: 450px; /* Forces scroll if too long */
    
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(20px); /* Glass effect */
    border-radius: 24px; /* Super rounded corners (Childish look) */
    
    /* The 3D Pop Shadow */
    box-shadow: 
        0 10px 40px rgba(0,0,0,0.15),
        0 0 0 1px rgba(0,0,0,0.05);
        
    z-index: 20000;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    
    /* Animation Origin (Grow from top-right) */
    transform-origin: top right;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); /* Bouncy spring effect */
    
    /* 🔒 SECURITY: Prevent Copying */
    user-select: none; 
    -webkit-user-select: none;
}

/* Hidden State (Shrink and fade) */
.hidden-pop {
    opacity: 0;
    transform: scale(0.8) translateY(-20px);
    pointer-events: none;
}

/* The "Tail" pointing to the bell */
.popover-arrow {
    position: absolute;
    top: -6px;
    right: 20px;
    width: 12px;
    height: 12px;
    background: white;
    transform: rotate(45deg);
    border-top: 1px solid rgba(0,0,0,0.05);
    border-left: 1px solid rgba(0,0,0,0.05);
}

/* HEADER */
.notif-header-area {
    padding: 18px 20px;
    background: linear-gradient(to right, #ffffff, #f8f9fa);
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid #f0f2f5;
}
.notif-header-area h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 800; /* Extra Bold */
    color: #1c1c1e;
    letter-spacing: -0.5px;
}
.clear-badge {
    font-size: 10px;
    font-weight: 700;
    color: #FF3B30;
    background: #FF3B3015;
    padding: 4px 10px;
    border-radius: 12px;
    cursor: pointer;
    transition: 0.2s;
}
.clear-badge:active { transform: scale(0.9); }

/* SCROLL AREA */
.notif-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
    background: #fff;
    /* Custom Scrollbar */
    scrollbar-width: thin;
    scrollbar-color: #eee transparent;
}

/* LIST ITEM (The Card) */
.notif-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    margin-bottom: 8px;
    border-radius: 16px;
    background: #fff;
    transition: 0.2s;
    border: 1px solid transparent;
}
.notif-item:active {
    background: #f2f2f7;
    transform: scale(0.98);
}

/* ICON BOX */
.notif-icon-box {
    width: 40px; height: 40px;
    border-radius: 14px; /* Squircle */
    display: flex; align-items: center; justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
    box-shadow: 0 4px 10px rgba(0,0,0,0.03);
}

/* TEXT CONTENT */
.notif-content { flex: 1; }

.n-top {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 3px;
}
.n-title {
    font-size: 13px; font-weight: 700; color: #1c1c1e;
}
.n-time {
    font-size: 9px; font-weight: 600; color: #8E8E93;
}
.n-desc {
    font-size: 11px; font-weight: 500; color: #666;
    line-height: 1.3;
}

/* FOOTER (Close Button) */
.notif-footer {
    padding: 12px;
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    color: #8E8E93;
    background: #F9F9F9;
    border-top: 1px solid #eee;
    cursor: pointer;
}
.notif-footer:hover { color: #333; }




/* =========================================
   THE "ALIVE" GLASS UI UPGRADE
   ========================================= */

/* 1. CRYSTAL HEADER */
.nav-bar {
    background: rgba(255, 255, 255, 0.65) !important; /* Semi-transparent */
    backdrop-filter: blur(20px) saturate(180%) !important; /* The "Alive" Blur */
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important; /* Safari Support */
    
    border-bottom: 1px solid rgba(255, 255, 255, 0.5); /* Subtle ice edge */
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.03); /* Soft ambient shadow */
}


/* 3. ALIVE ICONS (The Glow) */
.nav-item {
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    opacity: 0.6;
    transform: scale(0.9);
}

.nav-item.active {
    opacity: 1;
    transform: scale(1.1) translateY(-4px); /* Pops up slightly */
    color: #007AFF !important;
    position: relative;
}

/* The "Spirit" Glow behind active icon */
.nav-item.active::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 40px; height: 40px;
    background: radial-gradient(circle, rgba(0, 122, 255, 0.2) 0%, transparent 70%);
    border-radius: 50%;
    z-index: -1;
    animation: breathingGlow 3s infinite ease-in-out;
}

/* 4. NOTIFICATION BADGE FIX */
.nav-badge::after {
    border: 2px solid #fff; /* White border makes it pop on glass */
    box-shadow: 0 2px 5px rgba(255, 59, 48, 0.4);
}

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



/* =========================================
   MASTER FOOTER (Cleaned & Fixed)
   ========================================= */
.bottom-nav {
    /* Position: Floating Island */
    position: absolute !important;
    bottom: calc(20px + env(safe-area-inset-bottom)) !important; 
    left: 20px !important;
    right: 20px !important;
    width: auto !important;
    height: 70px !important;
    
    /* Shape & Glass Effect */
    border-radius: 24px !important;
    background: rgba(255, 255, 255, 0.8) !important;
    backdrop-filter: blur(30px) saturate(200%) !important;
    -webkit-backdrop-filter: blur(30px) saturate(200%) !important;
    
    /* Borders & Shadow */
    border: 1px solid rgba(255, 255, 255, 0.8) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.9) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.4) !important;
    box-shadow: 
        0 20px 40px rgba(0, 0, 0, 0.1), 
        0 5px 10px rgba(0, 0, 0, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;

    /* Layout */
    /* ... inside .bottom-nav ... */
display: flex; /* REMOVED !important */
/* ... */
    justify-content: space-evenly !important;
    align-items: center !important;
    padding-bottom: 0 !important;
    
    /* 🔥 Z-INDEX FIX: Lowered from 9000 to 100 */
    /* This allows modals (z-index 2000) to sit ON TOP of it */
    z-index: 100 !important; 
    
    /* Animation */
    animation: slideUpFooter 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.5s backwards;
}




.tiny-text {
    text-align: center;
    width: 100%;
    display: block;
    margin-top: 15px;
    font-size: 11px;
    color: #8E8E93;
}



/* ==========================================
   🎯 TRACK CHANGER BUTTON (ABOVE GRID)
   ========================================== */
.track-changer-btn {
    background: rgba(0, 122, 255, 0.1);
    color: var(--primary, #007AFF);
    padding: 6px 14px;
    border-radius: 16px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: 1px solid rgba(0, 122, 255, 0.2);
    animation: pop-in 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.track-changer-btn:active {
    transform: scale(0.95);
    background: rgba(0, 122, 255, 0.2);
}

@keyframes pop-in {
    from { transform: scale(0.8); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* ==========================================
   📱 SMOOTH CENTER POPOVER
   ========================================== */
.center-popover-overlay {
    position: fixed; 
    top: 0; left: 0; width: 100vw; height: 100vh;
    background: rgba(0,0,0,0.3); 
    backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
    z-index: 9999; 
    display: flex; align-items: center; justify-content: center;
    opacity: 1; transition: opacity 0.25s ease;
}

.center-popover-overlay.hidden-pop {
    opacity: 0; pointer-events: none;
}

.center-popover-box {
    background: #ffffff; width: 280px; border-radius: 24px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.2);
    transform: scale(1); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    padding: 20px;
}

.center-popover-overlay.hidden-pop .center-popover-box {
    transform: scale(0.85);
}

.pop-header-text {
    text-align: center; font-size: 16px; font-weight: 800; color: #1c1c1e; margin-bottom: 15px;
}

.dept-pop-options { display: flex; flex-direction: column; gap: 10px; }

.dept-pop-btn {
    display: flex; align-items: center; background: #f9f9f9;
    border: 1px solid #eee; padding: 10px 15px; border-radius: 16px;
    font-size: 15px; font-weight: 600; color: #1c1c1e; cursor: pointer;
    transition: all 0.2s; width: 100%; text-align: left;
}

.dept-pop-btn:active { transform: scale(0.96); background: #f2f2f7; border-color: #d1d1d6; }

.dept-pop-btn .d-icon {
    width: 32px; height: 32px; border-radius: 10px; display: flex;
    align-items: center; justify-content: center; margin-right: 12px;
    font-size: 14px; color: white;
}




/* --- PULL TO REFRESH UI --- */
.ptr-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 90; /* Sits right under your header */
    pointer-events: none; 
    transform: translateY(-100px); /* Hidden completely off-screen by default */
}

.ptr-icon-wrapper {
    background: #ffffff;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15); /* Clean floating shadow */
    color: #007AFF; /* iOS Blue */
    font-size: 18px;
}

/* The continuous spin once triggered */
.ptr-spinning {
    animation: ptrSpin 1s linear infinite;
}

@keyframes ptrSpin {
    100% { transform: rotate(360deg); }
}




/* ==========================================
   📱 SMALL SCREEN OPTIMIZATION (Shrink-to-Fit)
   ========================================== */

/* For smaller phones (e.g., iPhone X, older Androids - under 380px wide) */
@media screen and (max-width: 380px) {
    .app-wrapper, 
    .bottom-nav, 
    .modal-content, 
    .daily-card, 
    .notif-popover, 
    .ios-alert-box {
        zoom: 0.90; /* Shrinks everything inside by 10% */
    }
}

/* For extremely tiny phones (e.g., iPhone SE 1st Gen, Itel - under 340px wide) */
@media screen and (max-width: 340px) {
    .app-wrapper, 
    .bottom-nav, 
    .modal-content, 
    .daily-card, 
    .notif-popover, 
    .ios-alert-box {
        zoom: 0.82; /* Shrinks everything inside by 18% */
    }
}