/* =========================================
   App Name: TaskMaster Pro - FST Havoc Edition
   Design: Ultra Pro Native (Fixed & Optimized)
   Version: 3.6 (Final Stable)
   ========================================= */

/* --- 1. VARIABLES & THEME CONFIGURATION --- */
:root {
    /* Core Brand Colors */
    --primary: #6C63FF;
    --primary-hover: #5a52d5;
    --primary-glow: rgba(108, 99, 255, 0.4);
    
    /* Backgrounds (Dark Mode Default) */
    --bg-main: #0a0a0a;       /* Deepest Black */
    --bg-card: #141414;       /* Card Background */
    --bg-input: #1f1f1f;      /* Input Fields */
    --sheet-bg: #141414;      /* Bottom Sheet */
    
    /* Typography */
    --text-main: #ffffff;
    --text-muted: #888888;
    --text-placeholder: #555555;
    
    /* Borders & Separators */
    --border-color: #2a2a2a;
    --border-highlight: #3a3a3a;
    
    /* Functional Colors */
    --danger: #ff4757;
    --danger-glow: rgba(255, 71, 87, 0.3);
    --success: #2ed573;
    --success-glow: rgba(46, 213, 115, 0.3);
    --energy-high: #ff6b6b;
    --energy-low: #1dd1a1;
    
    /* Glassmorphism System */
    --glass-bg: rgba(20, 20, 20, 0.85);
    --glass-border: rgba(255, 255, 255, 0.08);
    --blur-strength: 20px;
    
    /* Shadows */
    --shadow-sm: 0 4px 10px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.5);
    
    /* Spacing */
    --safe-area-bottom: env(safe-area-inset-bottom, 20px);
}

/* Light Mode Overrides */
[data-theme="light"] {
    --bg-main: #F2F4F7;
    --bg-card: #FFFFFF;
    --bg-input: #F7F9FC;
    --sheet-bg: #FFFFFF;
    
    --text-main: #1a1a1a;
    --text-muted: #666666;
    --text-placeholder: #a0a0a0;
    
    --border-color: #E6E8EB;
    --border-highlight: #d1d5db;
    
    --glass-bg: rgba(255, 255, 255, 0.9);
    --glass-border: rgba(0, 0, 0, 0.05);
    
    --shadow-sm: 0 4px 10px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 10px 25px rgba(0, 0, 0, 0.08);
}

/* --- 2. GLOBAL RESET & ACCESSIBILITY --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
    -webkit-tap-highlight-color: transparent;
    outline: none;
    user-select: none; /* UI Elements select nahi honge */
}

/* FIXED: Allow text selection in inputs and tasks */
input, textarea, .todo-text, .selectable-text {
    user-select: text !important;
    -webkit-user-select: text !important;
}

body {
    background-color: var(--bg-main);
    color: var(--text-main);
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    transition: background-color 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), color 0.4s ease;
}

/* Scrollbar Hide */
::-webkit-scrollbar { display: none; }

/* --- 3. SPLASH SCREEN ANIMATION --- */
#splash-screen {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.8s ease-out;
}

.logo-wrapper {
    text-align: center;
    animation: floatLogo 3s infinite ease-in-out;
}

.logo-wrapper svg {
    filter: drop-shadow(0 0 20px var(--primary-glow));
    margin-bottom: 10px;
}

.logo-wrapper h1 {
    font-size: 2.2rem;
    font-weight: 700;
    background: linear-gradient(135deg, #fff 30%, var(--primary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: -1px;
}

.logo-wrapper p {
    color: var(--text-muted);
    font-size: 0.9rem;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.fade-out {
    opacity: 0;
    pointer-events: none;
}

/* --- 4. MAIN CONTAINER & HEADER --- */
.container {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    padding: 20px 20px 100px; /* Bottom padding for footer space */
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Header Area */
header {
    margin-bottom: 20px;
}

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

.user-greeting h1 {
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -0.5px;
    line-height: 1.1;
}

.user-greeting p {
    color: var(--text-muted);
    font-size: 0.95rem;
    font-weight: 500;
}

.date-text {
    font-size: 0.85rem;
    color: var(--primary);
    font-weight: 600;
    margin-top: 4px;
}

/* Glass Buttons (Menu/Add) */
.glass-btn {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--text-main);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: var(--shadow-sm);
}

.glass-btn:active {
    transform: scale(0.9);
    background: var(--border-color);
}

/* --- 5. PROGRESS BAR (GAMIFICATION) --- */
.header-progress {
    margin-bottom: 25px;
}

.progress-info {
    display: flex;
    justify-content: flex-end;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.main-progress-bg {
    width: 100%;
    height: 8px;
    background: var(--border-color);
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}

#main-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), var(--success));
    width: 0%;
    border-radius: 10px;
    transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 0 15px var(--primary-glow);
}

/* --- 6. FILTER TABS --- */
.filter-bar {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 5px;
    margin-bottom: 20px;
    scrollbar-width: none;
}

.filter-btn {
    background: transparent;
    border: 1px solid var(--border-color);
    padding: 10px 20px;
    border-radius: 30px;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.3s ease;
}

.filter-btn.active {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
    box-shadow: 0 4px 15px var(--primary-glow);
    font-weight: 600;
}

/* --- 7. INPUT AREA (FIXED & STABLE) --- */
.input-container {
    position: sticky;
    top: 10px;
    z-index: 100;
    margin-bottom: 25px;
}

.input-group {
    display: flex;
    align-items: center;
    background: var(--bg-card);
    padding: 6px;
    border-radius: 50px;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-md);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px); /* iPhone Support */
    width: 100%;
    overflow: hidden;
    padding-right: 6px;
}

.input-group:focus-within {
    border-color: var(--primary);
    box-shadow: 0 8px 30px var(--primary-glow);
    transform: translateY(-2px);
}

input#todo-input {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    padding: 14px 18px;
    color: var(--text-main);
    font-size: 1rem;
    font-weight: 500;
}

input#todo-input::placeholder {
    color: var(--text-placeholder);
    font-weight: 400;
}

/* Energy Selector Radios */
.energy-selector {
    display: flex;
    gap: 6px;
    margin-right: 8px;
    flex-shrink: 0;
}

.energy-selector input { display: none; }

.energy-label {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    opacity: 0.4;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    font-size: 1.1rem;
    background: var(--bg-input);
}

.energy-selector input:checked + .energy-label {
    opacity: 1;
    transform: scale(1.15);
    background: var(--bg-card);
    box-shadow: var(--shadow-sm);
}

.energy-selector input:checked + .energy-label.high { border: 2px solid var(--energy-high); }
.energy-selector input:checked + .energy-label.low { border: 2px solid var(--energy-low); }

/* Add Button */
button#add-btn {
    background: var(--primary);
    color: white;
    border: none;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    cursor: pointer;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 15px var(--primary-glow);
    transition: transform 0.2s ease;
}

button#add-btn:active {
    transform: scale(0.9) rotate(90deg);
}

/* --- 8. TASK LIST & ITEMS --- */
ul#todo-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-bottom: 20px;
}

.todo-item {
    position: relative;
    perspective: 1000px;
    animation: slideUp 0.4s ease forwards;
    transition: transform 0.2s ease;
}

/* Bulk Mode Selection Visuals */
.todo-item.selected .todo-content {
    border-color: var(--primary);
    background: rgba(108, 99, 255, 0.1);
    transform: scale(0.98);
}

.todo-content {
    background: var(--bg-card);
    padding: 18px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
    position: relative;
    z-index: 2;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), background 0.3s;
}

/* Active State (Tap) */
.todo-content:active {
    transform: scale(0.98);
    background: var(--border-color);
}

/* Status Classes */
.todo-item.stale .todo-content { opacity: 0.8; border-style: dashed; }
.todo-item.rotten .todo-content { 
    opacity: 0.7; 
    border-color: var(--danger); 
    background: rgba(255, 71, 87, 0.05); 
}

/* Checkbox */
.select-checkbox {
    padding: 8px;
    cursor: pointer;
    margin-right: 12px;
    flex-shrink: 0;
}

.custom-checkbox {
    width: 24px;
    height: 24px;
    border: 2px solid var(--border-highlight);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.completed .custom-checkbox {
    background: var(--success);
    border-color: var(--success);
    transform: scale(1.1);
}

.completed .custom-checkbox::after {
    content: '✓';
    color: white;
    font-weight: 800;
    font-size: 14px;
}

/* Text & Info */
.todo-text-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.todo-text {
    font-size: 1.05rem;
    color: var(--text-main);
    font-weight: 500;
    line-height: 1.4;
    word-break: break-word;
    transition: color 0.3s;
}

.completed .todo-text {
    text-decoration: line-through;
    color: var(--text-muted);
}

/* Badges */
.task-tag {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 6px;
    width: fit-content;
    letter-spacing: 0.5px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.task-tag.high {
    background: rgba(255, 107, 107, 0.1);
    color: var(--energy-high);
    border: 1px solid rgba(255, 107, 107, 0.2);
}

.task-tag.low {
    background: rgba(29, 209, 161, 0.1);
    color: var(--energy-low);
    border: 1px solid rgba(29, 209, 161, 0.2);
}

/* --- 9. EDIT SHEET (BOTTOM DRAWER) --- */
#edit-sheet-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 5000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

#edit-sheet-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

#edit-sheet {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: var(--sheet-bg);
    border-radius: 30px 30px 0 0;
    padding: 10px 25px 40px; /* Extra bottom padding for safe area */
    z-index: 5001;
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 -10px 50px rgba(0,0,0,0.5);
    border-top: 1px solid var(--border-highlight);
}

#edit-sheet.active {
    transform: translateY(0);
}

/* Handle Bar */
.sheet-handle {
    width: 50px;
    height: 5px;
    background: var(--border-highlight);
    border-radius: 5px;
    margin: 10px auto 25px;
}

/* Sheet Header */
.sheet-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
}

.sheet-header h3 {
    font-size: 1.3rem;
    font-weight: 700;
}

.icon-btn-simple {
    background: var(--bg-input);
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.2s;
}

.icon-btn-simple:active {
    background: var(--border-color);
    color: var(--text-main);
}

/* Sheet Input */
#edit-sheet-input {
    width: 100%;
    padding: 18px;
    background: var(--bg-input);
    border: 2px solid transparent;
    border-radius: 18px;
    color: var(--text-main);
    font-size: 1.1rem;
    margin-bottom: 25px;
    transition: border 0.3s;
}

#edit-sheet-input:focus {
    border-color: var(--primary);
    background: var(--bg-card);
}

/* Actions */
.sheet-actions {
    display: flex;
    gap: 15px;
}

.sheet-btn {
    flex: 1;
    padding: 16px;
    border-radius: 16px;
    border: none;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    transition: transform 0.2s;
}

.sheet-btn:active { transform: scale(0.96); }

.sheet-btn.save {
    background: var(--primary);
    color: white;
    box-shadow: 0 5px 20px var(--primary-glow);
}

.sheet-btn.delete {
    background: transparent;
    color: var(--danger);
    border: 1px solid var(--danger);
}

/* --- 10. SIDEBAR MENU - COMPLETE (MERGED & FIXED) --- */

/* =========================================
   PREMIUM NATIVE SIDEBAR (iOS/Android Style)
   ========================================= */

/* 1. Menu Overlay - Deep Blur for Focus */
#menu-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4); /* Thoda lighter dark */
    backdrop-filter: blur(8px);      /* Heavy Blur for depth */
    -webkit-backdrop-filter: blur(8px);
    z-index: 4000;
    opacity: 1;
    pointer-events: auto;
    transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

#menu-overlay.hidden {
    opacity: 0;
    pointer-events: none;
}

/* 2. Main Sidebar - The "Glass Sheet" Look */
#side-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 300px; /* Thoda sleek width */
    max-width: 85vw; /* Small phones ke liye safety */
    height: 100%;
    
    /* Native Material Look */
    background: var(--bg-card);
    border-right: 1px solid rgba(255, 255, 255, 0.05);
    
    /* Right Side Rounded Corners (Like Modern Apps) */
    border-top-right-radius: 24px;
    border-bottom-right-radius: 24px;
    
    z-index: 4001;
    transform: translateX(-105%);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); /* iOS Spring Physics */
    
    display: flex;
    flex-direction: column;
    
    /* Deep Shadow for Layering */
    box-shadow: 20px 0 50px rgba(0, 0, 0, 0.3);
}

#side-menu.active {
    transform: translateX(0);
}

/* 3. Header - Sticky & Notch Safe */
.menu-header {
    /* Notch Safety */
    padding-top: calc(30px + env(safe-area-inset-top)); 
    padding-bottom: 20px;
    padding-left: 24px;
    padding-right: 24px;
    
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: transparent; /* Clean look */
    flex-shrink: 0;
}

.header-text h2 {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--text-main);
    letter-spacing: -0.5px;
    margin: 0;
}

.user-badge {
    font-size: 0.6rem;
    background: linear-gradient(135deg, var(--primary), var(--primary-hover));
    color: #fff;
    padding: 4px 10px;
    border-radius: 6px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-left: 8px;
    vertical-align: middle;
    box-shadow: 0 2px 10px var(--primary-glow);
}

/* 4. Content Area - Smooth Scroll & No Scrollbar */
.menu-content {
    flex: 1;
    padding: 10px 20px 40px;
    display: flex;
    flex-direction: column;
    gap: 12px; /* Consistent Gap */
    overflow-y: auto;
    overscroll-behavior-y: contain; /* Bouncy scroll effect */
}

/* Hide Scrollbar Completely */
.menu-content::-webkit-scrollbar { display: none; }
.menu-content { -ms-overflow-style: none; scrollbar-width: none; }

/* 5. Menu Items - "Ghost" Style (Cleaner than Boxed) */
.menu-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    
    /* Remove borders, use subtle background */
    background: transparent;
    border-radius: 14px;
    border: 1px solid transparent;
    
    color: var(--text-main);
    text-decoration: none;
    flex-shrink: 0;
    min-height: 56px;
    transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Active/Touch State (Native Feel) */
.menu-item:active {
    background: var(--bg-input);
    transform: scale(0.96); /* Button press feel */
    color: var(--primary);
}

.menu-text {
    display: flex;
    align-items: center;
    gap: 16px;
    font-weight: 600;
    font-size: 0.95rem;
}

/* Icon Sizing Fix */
.menu-text i, .menu-text svg {
    font-size: 1.2rem;
    color: var(--text-muted);
    transition: color 0.2s;
    width: 24px;
    text-align: center;
}

.menu-item:active .menu-text i {
    color: var(--primary);
}

/* 6. Special Highlights (Download/Hero) */
.download-highlight {
    background: linear-gradient(145deg, rgba(108, 99, 255, 0.15), rgba(108, 99, 255, 0.05));
    border: 1px solid rgba(108, 99, 255, 0.3) !important;
    padding: 16px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    margin-bottom: 10px;
    position: relative;
    overflow: hidden;
}

/* Subtle shine animation */
.download-highlight::before {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 50%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
    transform: skewX(-20deg);
    animation: shine 4s infinite;
}

.download-highlight .menu-icon-box {
    width: 42px;
    height: 42px;
    background: var(--bg-card);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* 7. Settings Toggles */
.menu-group { 
    display: flex; 
    flex-direction: column; 
    gap: 5px; 
    flex-shrink: 0;
    background: var(--bg-input); /* Grouped Island background */
    padding: 8px;
    border-radius: 20px;
    margin-bottom: 10px;
}

/* Toggle Switch refinement */
.switch { position: relative; width: 44px; height: 24px; flex-shrink: 0; }
.slider { border-radius: 30px; border: none; background: #3a3a3a; }
.slider:before { height: 18px; width: 18px; left: 3px; bottom: 3px; box-shadow: 0 2px 5px rgba(0,0,0,0.2); }
input:checked + .slider { background-color: var(--primary); }
input:checked + .slider:before { transform: translateX(20px); }

/* 8. Stats Widget - Card Style */
.menu-stats {
    background: var(--bg-input);
    padding: 20px;
    border-radius: 20px;
    border: none;
    flex-shrink: 0;
    margin-bottom: 15px;
    position: relative;
}

.stats-pill {
    font-size: 0.7rem;
    background: var(--bg-card);
    padding: 4px 10px;
    border-radius: 8px;
    font-weight: 700;
}

/* 9. About Box */
.menu-about-box {
    background: transparent;
    border: 1px dashed var(--border-color);
    padding: 15px;
    border-radius: 16px;
    margin-bottom: 10px;
}

/* 10. Danger Zone */
.menu-danger-zone { padding-top: 10px; flex-shrink: 0; }
.danger-btn {
    width: 100%; 
    padding: 16px;
    background: rgba(255, 71, 87, 0.08);
    color: var(--danger); 
    border: none;
    border-radius: 18px; 
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    gap: 10px;
    transition: 0.2s;
}
.danger-btn:active { 
    background: var(--danger); 
    color: white; 
    transform: scale(0.97); 
}

/* 11. Footer */
.menu-footer {
    padding: 20px;
    padding-bottom: calc(20px + env(safe-area-inset-bottom)); /* iPhone Home Bar Safe */
    text-align: center;
    border-top: none; /* Removed harsh border */
    background: transparent;
    flex-shrink: 0;
}

.privacy-link { 
    color: var(--text-muted); 
    opacity: 0.6;
    font-weight: 500;
}

@keyframes shine { 0% { left: -100%; } 20% { left: 200%; } 100% { left: 200%; } }


/* --- 11. BULK CONTROLS (FLOATING BAR) --- */
.floating-controls {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 12px;
    z-index: 3000;
    width: 90%;
    max-width: 400px;
    background: var(--glass-bg);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    padding: 12px;
    border-radius: 20px;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--glass-border);
    transition: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.floating-controls.hidden {
    transform: translateX(-50%) translateY(200%);
    opacity: 0;
    pointer-events: none;
}

.action-btn {
    flex: 1;
    border: none;
    padding: 12px;
    border-radius: 14px;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    box-shadow: var(--shadow-sm);
    transition: transform 0.2s;
}

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

.select-btn { background: var(--primary); }
.delete-btn { background: var(--danger); }
.cancel-btn { background: var(--border-color); color: var(--text-main); }

/* --- 12. FOOTER & NOTIFICATIONS --- */
.khatarnak-footer {
    position: fixed;
    bottom: 20px;
    left: 0;
    width: 100%;
    text-align: center;
    pointer-events: none;
    z-index: 4000;
}

.footer-content {
    display: inline-flex;
    align-items: center;
    background: var(--glass-bg);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    padding: 10px 25px;
    border-radius: 50px;
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-lg);
    pointer-events: auto;
    transition: transform 0.2s;
}

.footer-content:active { transform: scale(0.95); }

.creator-badge {
    color: var(--text-main);
    font-weight: 600;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 10px;
}

.live-dot {
    width: 8px;
    height: 8px;
    background: var(--danger);
    border-radius: 50%;
    box-shadow: 0 0 10px var(--danger);
    animation: pulse 1.5s infinite;
}

/* Notification Banner (Top Fixed) */
#notification-banner {
    position: fixed;
    top: 15px;
    left: 15px;
    right: 15px;
    z-index: 6000;
    background: var(--glass-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 16px 20px;
    border-radius: 18px;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-lg);
    display: flex;
    align-items: center;
    gap: 15px;
    transform: translateY(-150%);
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

#notification-banner.show { transform: translateY(0); }

.notif-icon { font-size: 1.6rem; animation: ding 1s infinite; }
.notif-content h4 { font-size: 0.95rem; font-weight: 600; margin-bottom: 2px; }
.notif-content p { font-size: 0.85rem; color: var(--text-muted); }

/* --- 13. EMPTY STATE & UTILS --- */
#empty-state {
    text-align: center;
    opacity: 0.5;
    margin-top: 60px;
    animation: fadeIn 1s ease;
}

#empty-state p {
    margin-top: 20px;
    font-size: 1.1rem;
    font-weight: 500;
}

.hidden { display: none !important; }

/* Animations */
@keyframes floatLogo { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 0.5; } }
@keyframes pulse { 0% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(1.2); } 100% { opacity: 1; transform: scale(1); } }
@keyframes ding { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-15deg); } 40% { transform: rotate(10deg); } 60% { transform: rotate(-5deg); } 80% { transform: rotate(2deg); } }

/* =========================================
   🚨 FINAL FIXES FOR SIDEBAR (PASTE AT BOTTOM) 🚨
   ========================================= */

/* 1. Force Toggles (Hide Ugly Checkboxes) */
.switch {
    position: relative;
    display: inline-block;
    width: 50px !important;
    height: 28px !important;
    flex-shrink: 0;
}

/* Hide default checkbox completely */
.switch input { 
    opacity: 0 !important; 
    width: 0 !important; 
    height: 0 !important;
    position: absolute;
    pointer-events: none;
}

/* The Slider Track */
.slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background-color: rgba(120, 120, 128, 0.3) !important; /* iOS Dark Gray */
    border-radius: 34px;
    transition: 0.4s;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* The Round Knob */
.slider:before {
    position: absolute;
    content: "";
    height: 22px !important;
    width: 22px !important;
    left: 3px !important;
    bottom: 2px !important;
    background-color: white !important;
    border-radius: 50%;
    transition: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); /* Bouncy Effect */
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

/* Checked State (ON) */
.switch input:checked + .slider {
    background-color: #6C63FF !important; /* Brand Purple */
    border-color: #6C63FF !important;
}

.switch input:checked + .slider:before {
    transform: translateX(22px) !important;
}

/* 2. Fix "Download App" Link Visibility */
a.download-highlight {
    text-decoration: none !important;
    color: white !important; /* Link Blue hatane ke liye */
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

/* Text Colors inside Card */
.download-highlight .text-col {
    display: flex;
    flex-direction: column;
}

.download-highlight .main-label {
    color: #ffffff !important;
    font-size: 1rem;
    font-weight: 700;
}

.download-highlight .sub-label {
    color: rgba(255, 255, 255, 0.6) !important;
    font-size: 0.75rem;
    font-weight: 500;
    margin-top: 2px;
}

/* 3. General Cleanup */
.menu-item {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100%;
}

.menu-text {
    color: var(--text-main);
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Icon Colors */
.menu-text svg {
    color: var(--text-muted);
}
.menu-item:active .menu-text svg {
    color: var(--primary);
}