@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;900&family=Orbitron:wght@700&display=swap');

/* =========================================================
   1. THEME ENGINE (Advanced Variables with `var` & `clamp`)
   ========================================================= */
:root, :root[data-theme="dark"] {
    --bg-main: #0a0a0c; 
    --bg-gradient-edge: rgba(0, 0, 0, 0.95);
    
    /* 🟢 PURE WATER GLASS (For Tool Cards - High Transparency) */
    --water-glass-bg: rgba(15, 20, 25, 0.15); 
    
    /* 🔴 SOLID FROST GLASS (For Dropdowns, Header & Sidebar - 98% Opaque to block overlap) */
    --solid-glass-bg: rgba(15, 20, 25, 0.98); 
    
    --glass-border: rgba(255, 255, 255, 0.15);
    --input-bg: rgba(0, 0, 0, 0.5); 
    --input-border: rgba(255, 255, 255, 0.15);
    
    --text-primary: #ffffff; 
    --text-secondary: #a1a1a6;
    --focus-ring: rgba(255, 255, 255, 0.2);
    --logo-slash: #3399ff;

    --shape-1: #151515; 
    --shape-2: #222222; 
    --shape-3: #0c0c0c;
    --ring-shadow: rgba(255, 255, 255, 0.03);
    
    /* 3D Shadows using var & clamp for depth */
    --shadow-water: inset 1px 1px 2px rgba(255, 255, 255, 0.15), 0 clamp(10px, 2vw, 15px) clamp(30px, 5vw, 40px) 0 rgba(0, 0, 0, 0.4);
    --shadow-dropdown: inset 1px 1px 2px rgba(255, 255, 255, 0.2), 0 clamp(15px, 3vw, 25px) clamp(40px, 6vw, 60px) rgba(0, 0, 0, 0.8);

    /* Button Specific Base Colors */
    --btn-border: rgba(255, 255, 255, 0.3);
    --btn-bg: rgba(255, 255, 255, 0.05);
    --btn-hover-bg: rgba(255, 255, 255, 0.15);
}

:root[data-theme="light"] {
    --bg-main: #f4f5f7; 
    --bg-gradient-edge: rgba(0, 0, 0, 0.01);
    
    /* 🟢 PURE WATER GLASS (For Tool Cards - Clear Water) */
    --water-glass-bg: rgba(255, 255, 255, 0.35); 
    
    /* 🔴 SOLID FROST GLASS (For Dropdowns, Header & Sidebar - 98% Opaque to block overlap) */
    --solid-glass-bg: rgba(255, 255, 255, 0.98); 
    
    --glass-border: rgba(0, 0, 0, 0.15);
    --input-bg: rgba(255, 255, 255, 0.8); 
    --input-border: rgba(0, 0, 0, 0.15);
    
    --text-primary: #111111; 
    --text-secondary: #555555;
    --focus-ring: rgba(0, 0, 0, 0.12);
    --logo-slash: #0056b3;

    --shape-1: rgba(0, 0, 0, 0.04); 
    --shape-2: rgba(0, 0, 0, 0.06); 
    --shape-3: rgba(0, 0, 0, 0.03);
    --ring-shadow: rgba(0, 0, 0, 0.05); 
    
    /* 3D Shadows using var & clamp for depth */
    --shadow-water: inset 1px 1px 3px rgba(255, 255, 255, 0.9), 0 clamp(10px, 2vw, 15px) clamp(30px, 5vw, 40px) 0 rgba(0, 0, 0, 0.06);
    --shadow-dropdown: inset 1px 1px 2px rgba(255, 255, 255, 1), 0 clamp(15px, 3vw, 25px) clamp(40px, 6vw, 60px) rgba(0, 0, 0, 0.15);

    /* Button Specific Base Colors */
    --btn-border: rgba(0, 0, 0, 0.3);
    --btn-bg: rgba(0, 0, 0, 0.03);
    --btn-hover-bg: rgba(0, 0, 0, 0.08);
}

/* =========================================================
   GLOBAL SMOOTH SCROLLING (iPhone Style)
   ========================================================= */
html { scroll-behavior: smooth; }

::-webkit-scrollbar { width: clamp(6px, 1vw, 8px); }
::-webkit-scrollbar-track { background: var(--bg-main); }
::-webkit-scrollbar-thumb { background: var(--glass-border); border-radius: 10px; border: 2px solid var(--bg-main); }
::-webkit-scrollbar-thumb:hover { background: var(--text-secondary); }

/* =========================================================
   2. GLOBAL SETUP & ABSTRACT BACKGROUND
   ========================================================= */
* {
    margin: 0; padding: 0; box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

body {
    font-family: 'Poppins', sans-serif;
    background-color: var(--bg-main);
    color: var(--text-primary);
    min-height: 100vh;
    overflow-x: hidden;
    transition: background-color 0.4s cubic-bezier(0.25, 1, 0.5, 1), color 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: background-color, color;
}

/* Base Hidden Class avoiding !important */
.hidden-element { display: none; }

.svg-icon { 
    stroke: currentColor; color: inherit; 
    width: clamp(20px, 2.5vw, 24px); 
    height: clamp(20px, 2.5vw, 24px); 
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1); 
}

/* Animated Background Shapes */
.abstract-bg {
    position: fixed; top: 0; left: 0; width: 100%; height: 100vh; z-index: -1;
    overflow: hidden; 
    background: radial-gradient(circle at center, var(--bg-main) 0%, var(--bg-gradient-edge) 150%);
}
.shape { position: absolute; filter: blur(clamp(40px, 5vw, 80px)); border-radius: 50%; animation: floatShape 25s infinite alternate cubic-bezier(0.4, 0, 0.2, 1); will-change: transform; }
.shape-1 { width: clamp(400px, 50vw, 600px); height: clamp(400px, 50vw, 600px); background: var(--shape-1); top: -10%; left: -10%; }
.shape-2 { width: clamp(300px, 40vw, 500px); height: clamp(300px, 40vw, 500px); background: var(--shape-2); bottom: -20%; right: 10%; animation-delay: -5s; }
.shape-3 { width: clamp(200px, 30vw, 400px); height: clamp(200px, 30vw, 400px); background: var(--shape-3); top: 40%; left: 40%; animation-delay: -10s; }

.shape-ring {
    width: clamp(500px, 80vw, 900px); height: clamp(300px, 50vw, 500px); 
    border: clamp(20px, 4vw, 50px) solid var(--glass-border); border-radius: 50%;
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-30deg); 
    filter: blur(clamp(5px, 1vw, 10px));
    background: transparent; box-shadow: 0 0 clamp(50px, 10vw, 120px) var(--ring-shadow), inset 0 0 clamp(50px, 10vw, 120px) var(--ring-shadow);
}

@keyframes floatShape {
    0% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(clamp(20px, 3vw, 60px), clamp(40px, 5vw, 90px)) scale(1.1); }
    100% { transform: translate(calc(clamp(20px, 3vw, 60px) * -1), calc(clamp(20px, 3vw, 60px) * -1)) scale(0.9); }
}

/* =========================================================
   3. 🟢 WATER & FROST GLASS CORE ENGINE
   ========================================================= */

/* A. Pure Water Glass (For Tool Cards ONLY) */
.glass-element, .tool-card, .glass-footer {
    background: var(--water-glass-bg);
    backdrop-filter: blur(40px) saturate(150%);
    -webkit-backdrop-filter: blur(40px) saturate(150%);
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-water);
}

/* B. Solid Frost Glass (For Overlays/Dropdowns/Menus/Header) */
/* UPDATED: Solid background color logic so text overlap is completely blocked */
.solid-glass-element {
    background-color: var(--bg-main); /* Fallback solid color */
    background: var(--solid-glass-bg);
    backdrop-filter: blur(20px) saturate(100%);
    -webkit-backdrop-filter: blur(20px) saturate(100%);
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-dropdown);
    will-change: transform, opacity;
}

/* Inputs & Search Boxes blending */
.custom-input, .header-search-bar, .sidebar-search-bar, #globalSearchInput {
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    box-shadow: inset 0 clamp(2px, 0.5vw, 4px) clamp(4px, 1vw, 8px) rgba(0,0,0,0.05);
    color: var(--text-primary);
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

/* =========================================================
   4. HEADER, SEARCH BAR & LOGO 
   ========================================================= */
.fullscreen-view { position: absolute; top: 0; left: 0; width: 100%; min-height: 100vh; z-index: 100; display: flex; flex-direction: column; overflow-x: hidden; }

/* The Header background is now Solid Frost Glass */
.home-nav { 
    position: fixed; top: 0; left: 0; width: 100%; 
    padding: clamp(10px, 2vw, 15px) clamp(15px, 4vw, 30px); 
    display: flex; justify-content: space-between; align-items: center; z-index: 1000; 
    border-bottom: 1px solid var(--glass-border);
}

.nav-left { display: flex; align-items: center; gap: clamp(12px, 2vw, 25px); }

.icon-btn { 
    background: transparent; border: none; cursor: pointer; padding: clamp(4px, 1vw, 8px); 
    color: var(--text-primary); display: flex; align-items: center; justify-content: center; 
    transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1), color 0.2s ease; 
}
.icon-btn:hover { transform: scale(1.15); color: var(--logo-slash); }

/* Perfected Search Box in Header */
.nav-center { flex: 1; max-width: clamp(300px, 50vw, 550px); margin: 0 clamp(10px, 3vw, 20px); }
.header-search-bar {
    border-radius: 50px; 
    padding: clamp(8px, 1vw, 12px) clamp(15px, 2vw, 20px); 
    width: 100%; display: flex; align-items: center; gap: clamp(8px, 1vw, 12px);
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
}
.header-search-bar:focus-within {
    border-color: var(--logo-slash);
    box-shadow: 0 0 0 clamp(3px, 0.5vw, 5px) var(--focus-ring), inset 0 2px 5px rgba(0,0,0,0.1);
}

.nav-right { display: flex; gap: clamp(10px, 2vw, 20px); align-items: center; }

.profile-icon { 
    width: clamp(38px, 4vw, 45px); height: clamp(38px, 4vw, 45px); border-radius: 50%; 
    background: var(--input-bg); border: 2px solid var(--glass-border); 
    display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text-primary); 
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1); 
}
.profile-icon:hover { border-color: var(--text-primary); box-shadow: 0 0 clamp(10px, 2vw, 20px) var(--focus-ring); transform: scale(1.05); }

/* =========================================================
   5. PROFILE & NOTIFICATION DROPDOWNS 
   ========================================================= */
.profile-dropdown {
    position: absolute; top: clamp(60px, 7vw, 75px); right: clamp(10px, 2vw, 20px); 
    width: clamp(280px, 35vw, 340px);
    border-radius: clamp(16px, 2vw, 24px); 
    opacity: 0; visibility: hidden; transform: translateY(-15px) scale(0.98); 
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1); z-index: 1000; 
    padding: clamp(15px, 2vw, 20px);
}
.profile-dropdown.active { 
    opacity: 1; visibility: visible; transform: translateY(0) scale(1); 
}

.dropdown-header { padding-bottom: clamp(10px, 1.5vw, 15px); text-align: center; color: var(--text-primary); border-bottom: 1px solid var(--glass-border); margin-bottom: clamp(10px, 1.5vw, 15px); font-weight: 700; font-size: clamp(1rem, 1.5vw, 1.1rem); letter-spacing: 0.5px; }
.dropdown-items { display: flex; flex-direction: column; gap: clamp(8px, 1vw, 10px); }

.drop-item {
    display: flex; align-items: center; gap: clamp(10px, 1.5vw, 15px); padding: clamp(10px, 1.5vw, 14px) clamp(12px, 2vw, 18px); color: var(--text-primary); text-decoration: none; font-size: clamp(0.9rem, 1.2vw, 1rem); font-weight: 600;
    border: 1px solid var(--glass-border); border-radius: clamp(10px, 1.5vw, 14px); transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1); cursor: pointer; background: rgba(128,128,128,0.05);
}
.drop-item:hover { background: var(--input-bg); border-color: var(--text-primary); transform: translateX(5px); box-shadow: 0 5px 15px var(--focus-ring); }

.profile-dropdown .text-danger { color: #ff453a; border-color: rgba(255, 69, 58, 0.3); }
.profile-dropdown .text-danger:hover { background: rgba(255, 69, 58, 0.1); border-color: #ff453a; color: #ff453a; transform: translateX(5px); }

/* Theme Changer Box */
.theme-box-wrapper { display: flex; gap: clamp(4px, 0.5vw, 6px); background-color: var(--input-bg); border: 1px solid var(--glass-border); border-radius: clamp(10px, 1.5vw, 14px); padding: clamp(4px, 0.5vw, 8px); margin: clamp(4px, 0.5vw, 8px) 0; }
.theme-option { flex: 1; position: relative; }
.theme-option input[type="radio"] { display: none; }
.theme-content { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: clamp(8px, 1vw, 12px) 4px; color: var(--text-secondary); cursor: pointer; border-radius: clamp(8px, 1vw, 10px); transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1); height: 100%; }
.theme-text { font-size: clamp(0.75rem, 1vw, 0.85rem); font-weight: 600; }
.theme-option input[type="radio"]:checked + .theme-content { background-color: var(--glass-bg); color: var(--text-primary); border: 1px solid var(--glass-border); box-shadow: 0 4px 15px var(--focus-ring); transform: scale(1.03); }

/* Notification Specific Dropdown items */
.notif-item {
    display: flex; align-items: flex-start; gap: clamp(10px, 1.5vw, 15px); padding: clamp(10px, 1.5vw, 14px);
    background: rgba(128,128,128,0.05); border: 1px solid var(--glass-border);
    border-radius: clamp(10px, 1.5vw, 14px); font-size: clamp(0.8rem, 1.1vw, 0.9rem); color: var(--text-primary);
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1); margin-bottom: clamp(6px, 1vw, 10px);
}
.notif-item:hover { background: var(--input-bg); border-color: var(--text-primary); transform: translateX(5px); }
.notif-icon { flex-shrink: 0; width: clamp(18px, 2.5vw, 22px); height: clamp(18px, 2.5vw, 22px); }
.notif-success { color: #30d158; }
.notif-error { color: #ff3b30; }
.notif-info { color: #0a84ff; }
.notif-text { flex: 1; line-height: 1.5; font-weight: 500; }
.notif-time { font-size: clamp(0.65rem, 0.9vw, 0.75rem); color: var(--text-secondary); margin-top: 6px; display: block; font-weight: 600; }

#notifBadge { box-shadow: 0 0 10px #ff3b30; animation: pulseRed 2s infinite; }
@keyframes pulseRed { 0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255,59,48,0.7); } 70% { transform: scale(1.1); box-shadow: 0 0 0 8px rgba(255,59,48,0); } 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255,59,48,0); } }

/* =========================================================
   6. SIDEBAR MENU
   ========================================================= */
.sidebar {
    position: fixed; top: 0; left: 0; width: clamp(280px, 40vw, 340px); height: 100dvh;
    border-right: 1px solid var(--glass-border); 
    transform: translateX(-100%); transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    z-index: 1005; padding: clamp(15px, 3vh, 25px); display: flex; flex-direction: column; overflow: hidden;
}
.sidebar.active { transform: translateX(0); box-shadow: clamp(20px, 4vw, 40px) 0 clamp(50px, 8vw, 80px) rgba(0,0,0,0.5); }

.sidebar-header { display: flex; align-items: center; width: 100%; gap: clamp(10px, 1.5vw, 15px); margin-bottom: clamp(20px, 4vh, 30px); flex-shrink: 0; }
.sidebar-search-bar { display: flex; align-items: center; gap: 10px; border-radius: 12px; padding: clamp(10px, 1.5vw, 14px) clamp(15px, 2vw, 20px); flex: 1; transition: 0.3s; }
.sidebar-search-bar:focus-within { border-color: var(--logo-slash); box-shadow: 0 0 0 clamp(2px, 0.5vw, 4px) var(--focus-ring); }
.sidebar-search-bar input { border: none; background: transparent; color: var(--text-primary); outline: none; width: 100%; font-size: 0.95rem; }

.back-btn { width: clamp(40px, 5vw, 48px); height: clamp(40px, 5vw, 48px); border-radius: 12px; display: flex; align-items: center; justify-content: center; color: var(--text-primary); cursor: pointer; transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1); background: var(--input-bg); border: 1px solid var(--glass-border); }
.back-btn:hover { background: var(--glass-border); transform: translateX(-5px); border-color: var(--text-primary); }

.sidebar-scroll-area { flex: 1; display: flex; flex-direction: column; gap: clamp(15px, 2vh, 20px); overflow-y: auto; padding-bottom: 10px; }
.sidebar-links { display: flex; flex-direction: column; gap: clamp(8px, 1vh, 12px); padding-right: 5px; }
/* Sidebar Buttons - Chhote, Patle aur Niche dabne wale */
.sidebar-bubble { 
    color: var(--text-primary); text-decoration: none; font-weight: 600; 
    font-size: 0.95rem; display: flex; gap: 12px; align-items: center; 
    padding: 12px 18px; /* Padding kam karke patla kiya */
    border-radius: 12px; border: 1px solid var(--glass-border); 
    background: rgba(128,128,128,0.05); transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1); 
}
.sidebar-bubble:hover { 
    background: var(--input-bg); border-color: var(--text-primary); 
    transform: translateY(4px); /* Right ki jagah Niche (Down) effect */
    box-shadow: 0 4px 10px var(--focus-ring); 
}

/* NAYA: Laptop/PC Horizontal Menu Design */
.desktop-horizontal-nav { display: none; }
.desktop-horizontal-nav a { 
    color: var(--text-secondary); text-decoration: none; font-size: 0.95rem; 
    font-weight: 600; padding: 6px 14px; border-radius: 8px; transition: all 0.3s; 
}
.desktop-horizontal-nav a:hover { 
    color: var(--text-primary); background: var(--input-bg); transform: translateY(2px); 
}

@media (min-width: 1024px) {
    .hide-on-pc { display: none !important; } /* Hamburger Button chhupayega */
    .desktop-horizontal-nav { display: flex; align-items: center; gap: 10px; margin-left: 20px; } /* Seedhi line menu */
    .sidebar { display: none !important; } /* PC par sidebar disabled */
}




/* =========================================================
   7. MEGA TOOL CARDS GRID SYSTEM 
   ========================================================= */
.home-main { flex: 1; padding-top: clamp(90px, 15vh, 140px); width: 100%; display: flex; flex-direction: column; align-items: center; }
.tools-grid-wrapper { width: 100%; max-width: 1400px; margin: 0 auto; padding: 0 clamp(15px, 3vw, 40px) clamp(40px, 8vh, 60px) clamp(15px, 3vw, 40px); }
.tools-grid-wrapper h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); font-weight: 700; margin-bottom: clamp(20px, 3vh, 30px); color: var(--text-primary); display: flex; align-items: center; gap: clamp(10px, 1.5vw, 15px); text-transform: uppercase; letter-spacing: 1px; }

.responsive-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(clamp(250px, 25vw, 300px), 1fr)); gap: clamp(20px, 3vw, 35px); margin-bottom: clamp(40px, 6vh, 60px); }

.tool-card {
    border-radius: clamp(16px, 2.5vw, 24px); padding: clamp(20px, 3vw, 30px) clamp(15px, 2.5vw, 25px); 
    position: relative; display: flex; flex-direction: column; align-items: flex-start; 
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1); cursor: default; overflow: visible; 
    will-change: transform, box-shadow, border-color;
}

@media (hover: hover) {
    .tool-card:hover {
        transform: translateY(calc(clamp(5px, 1vw, 10px) * -1)) scale(1.02);
        background: rgba(255, 255, 255, 0.08);
        border-color: rgba(255, 255, 255, 0.4);
        box-shadow: inset 1px 1px 5px rgba(255, 255, 255, 0.4), 0 clamp(15px, 3vw, 25px) clamp(40px, 6vw, 60px) 0 rgba(0, 0, 0, 0.5);
    }
    [data-theme="light"] .tool-card:hover {
        background: rgba(255, 255, 255, 0.5);
        border-color: rgba(255, 255, 255, 0.9);
        box-shadow: inset 1px 1px 6px rgba(255, 255, 255, 1), 0 clamp(15px, 3vw, 25px) clamp(40px, 6vw, 60px) 0 rgba(0, 0, 0, 0.15);
    }
}

.card-icon { width: clamp(40px, 5vw, 50px); height: clamp(40px, 5vw, 50px); margin-bottom: clamp(15px, 2.5vh, 25px); display: flex; align-items: center; justify-content: center; transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1); }
.tool-card:hover .card-icon { transform: scale(1.15) rotate(-5deg); }
.card-icon svg { width: 100%; height: 100%; filter: drop-shadow(0 4px 6px rgba(0,0,0,0.2)); }

.tool-card h4 { font-size: clamp(1.1rem, 1.5vw, 1.3rem); font-weight: 700; color: var(--text-primary); margin-bottom: clamp(8px, 1vh, 12px); letter-spacing: -0.3px; line-height: 1.3; }
.tool-card p { font-size: clamp(0.85rem, 1.1vw, 0.95rem); color: var(--text-secondary); margin-bottom: clamp(20px, 3vh, 35px); line-height: 1.6; flex-grow: 1; font-weight: 500; }

.card-btn {
    width: 100%; background: var(--btn-bg); border: 2px solid var(--btn-border); color: var(--text-primary); 
    padding: clamp(10px, 1.5vh, 14px); border-radius: 50px; font-size: clamp(0.9rem, 1.2vw, 1rem); 
    font-weight: 700; cursor: pointer; transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1); 
    margin-top: auto; text-transform: uppercase; letter-spacing: 1px; box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.card-btn:hover { background: var(--btn-hover-bg); border-color: var(--text-primary); transform: translateY(-2px); box-shadow: 0 8px 20px var(--focus-ring); }
.card-btn:active { transform: scale(0.95); }

.card-badge { position: absolute; top: clamp(15px, 2vw, 20px); right: clamp(15px, 2vw, 20px); font-size: clamp(0.65rem, 0.9vw, 0.75rem); font-weight: 800; padding: clamp(4px, 0.5vw, 6px) clamp(10px, 1.5vw, 14px); border-radius: 50px; text-transform: uppercase; letter-spacing: 0.5px; backdrop-filter: blur(10px); }
.badge-free { background: rgba(48, 209, 88, 0.15); color: #30d158; border: 1px solid rgba(48, 209, 88, 0.3); }
.badge-pro { background: rgba(255, 149, 0, 0.15); color: #ff9500; border: 1px solid rgba(255, 149, 0, 0.3); }

/* =========================================================
   8. MODALS, ALERTS & GENERAL FORMS
   ========================================================= */
.profile-modal-overlay {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background: rgba(0, 0, 0, 0.8); backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px); display: flex; align-items: center; justify-content: center;
    z-index: 10000; opacity: 0; visibility: hidden; transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}
.profile-modal-overlay.show { opacity: 1; visibility: visible; }

.profile-modal-box { width: 92%; max-width: clamp(400px, 80vw, 550px); border-radius: clamp(20px, 3vw, 30px); padding: clamp(25px, 4vw, 40px); transform: translateY(50px) scale(0.9); transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1); display: flex; flex-direction: column; max-height: 85vh; }
.profile-modal-overlay.show .profile-modal-box { transform: translateY(0) scale(1); }

.profile-header { padding-bottom: clamp(10px, 1.5vh, 15px); margin-bottom: clamp(15px, 2vh, 25px); border-bottom: 1px solid var(--glass-border); }
.profile-header h2 { font-size: clamp(1.4rem, 2.5vw, 1.8rem); font-weight: 700; color: var(--text-primary); margin-bottom: 6px; letter-spacing: -0.5px;}
.profile-header p { font-size: clamp(0.85rem, 1.2vw, 0.95rem); color: var(--text-secondary); font-weight: 500; }

.close-profile-btn { position: absolute; top: clamp(15px, 2vw, 20px); right: clamp(15px, 2vw, 20px); width: clamp(36px, 4vw, 44px); height: clamp(36px, 4vw, 44px); border-radius: 50%; background: transparent; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1); color: var(--text-secondary); font-size: clamp(1.2rem, 1.5vw, 1.5rem);}
.close-profile-btn:hover { background: var(--input-bg); color: var(--text-primary); transform: rotate(90deg) scale(1.1); }

.profile-content-area { overflow-y: auto; flex: 1; padding-right: clamp(5px, 1vw, 10px); }

/* General Form Inputs */
.input-group { margin-bottom: clamp(15px, 2vh, 20px); }
.custom-input { width: 100%; padding: clamp(14px, 2vh, 18px) clamp(15px, 2vw, 25px); border: 2px solid var(--input-border); border-radius: clamp(12px, 1.5vw, 16px); font-size: clamp(0.95rem, 1.2vw, 1.05rem); font-weight: 500; }
.custom-input:focus { border-color: var(--text-primary); box-shadow: 0 0 0 clamp(3px, 0.5vw, 5px) var(--focus-ring); }

.primary-btn { width: 100%; padding: clamp(15px, 2vh, 20px); background-color: var(--text-primary); color: var(--bg-main); border-radius: 50px; font-size: clamp(1rem, 1.5vw, 1.15rem); font-weight: 700; cursor: pointer; border: none; transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1); margin-top: clamp(10px, 1.5vh, 15px); text-transform: uppercase; letter-spacing: 1px;}
.primary-btn:hover { opacity: 0.9; transform: translateY(-3px); box-shadow: 0 10px 25px var(--focus-ring); }

/* Custom Alerts */
.custom-alert-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.8); backdrop-filter: blur(20px); display: flex; align-items: center; justify-content: center; z-index: 99999; opacity: 0; visibility: hidden; pointer-events: none; transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1); }
.custom-alert-overlay.show-alert { opacity: 1; visibility: visible; pointer-events: auto; }
.custom-alert-box { border-radius: clamp(24px, 3vw, 36px); padding: clamp(30px, 5vh, 50px) clamp(25px, 4vw, 40px); width: 85%; max-width: clamp(350px, 80vw, 450px); text-align: center; transform: translateY(40px) scale(0.9); transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1); color: var(--text-primary); }
.custom-alert-overlay.show-alert .custom-alert-box { transform: translateY(0) scale(1); }
.custom-alert-icon { font-size: clamp(3.5rem, 5vw, 4.5rem); margin-bottom: clamp(15px, 2.5vh, 25px); animation: popIcon 0.6s cubic-bezier(0.25, 1, 0.5, 1) forwards; }

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

/* =========================================================
   9. ADVANCED FORM ELEMENTS (Autofill, Custom Select, Gender)
   ========================================================= */
.profile-modal-box input:-webkit-autofill,
.profile-modal-box input:-webkit-autofill:hover, 
.profile-modal-box input:-webkit-autofill:focus, 
.profile-modal-box input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px var(--input-bg) inset;
    -webkit-text-fill-color: var(--text-primary);
    transition: background-color 5000s ease-in-out 0s;
    border: 2px solid var(--input-border);
}

.pill-btn {
    flex: 1; text-align: center; padding: clamp(10px, 1.5vh, 14px); border-radius: 50px; 
    cursor: pointer; font-size: clamp(0.9rem, 1.2vw, 1rem); font-weight: 700; color: var(--text-secondary); transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}
input[type="radio"]:checked + .pill-btn { background-color: var(--text-primary); color: var(--bg-main); box-shadow: 0 5px 15px var(--focus-ring); transform: scale(1.05); }
input[type="radio"]:not(:checked) + .pill-btn:hover { color: var(--text-primary); background: rgba(128,128,128,0.1); }

.custom-dropdown { position: relative; }
.dropdown-selected {
    background-color: var(--input-bg); border: 2px solid var(--input-border); border-radius: clamp(10px, 1.5vw, 14px);
    padding: clamp(12px, 1.8vh, 16px); font-size: clamp(0.9rem, 1.2vw, 1rem); font-weight: 600; color: var(--text-primary); cursor: pointer;
    display: flex; justify-content: center; align-items: center; transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}
.dropdown-selected:hover { border-color: var(--text-primary); }

.dropdown-options {
    position: absolute; top: 110%; left: 0; width: 100%; background-color: var(--solid-glass-bg);
    backdrop-filter: blur(40px) saturate(200%); -webkit-backdrop-filter: blur(40px) saturate(200%);
    border: 1px solid var(--glass-border); border-radius: clamp(12px, 1.5vw, 16px); box-shadow: var(--shadow-dropdown);
    max-height: clamp(180px, 30vh, 250px); overflow-y: auto; z-index: 1000;
    opacity: 0; visibility: hidden; transform: translateY(-10px); transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}
.dropdown-options.active { opacity: 1; visibility: visible; transform: translateY(0); }

.option-item {
    padding: clamp(10px, 1.5vh, 14px); text-align: center; font-size: clamp(0.85rem, 1.1vw, 0.95rem); font-weight: 600; color: var(--text-primary); cursor: pointer;
    border-bottom: 1px solid rgba(128,128,128,0.1); transition: background 0.2s, color 0.2s;
}
.option-item:last-child { border-bottom: none; }
.option-item:hover { background-color: var(--text-primary); color: var(--bg-main); font-weight: 700; transform: scale(1.02); }

/* =========================================================
   10. FOOTER & MEDIA QUERIES (Ultra Smooth Responsive)
   ========================================================= */
.glass-footer { width: 100%; padding: clamp(30px, 5vh, 50px) clamp(15px, 3vw, 30px); display: flex; flex-direction: column; align-items: center; gap: clamp(15px, 2vh, 25px); margin-top: auto; border-top: 1px solid var(--glass-border); }
.footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(15px, 2vw, 30px); }
.footer-links a { color: var(--text-primary); font-size: clamp(0.85rem, 1.1vw, 1rem); font-weight: 600; text-decoration: none; transition: opacity 0.3s, color 0.3s; }
.footer-links a:hover { opacity: 1; color: var(--logo-slash); }
.footer-brand { font-size: clamp(0.8rem, 1vw, 0.9rem); color: var(--text-secondary); font-weight: 500; letter-spacing: 0.5px;}

@media (max-width: 1000px) {
    .responsive-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
}

@media (max-width: 650px) {
    body .hide-on-mobile { display: none; }
    
    #contactSupportForm .input-group[style*="display: flex"] { flex-direction: column; }
    .nav-left span { display: none; }

    .comparison-container {
        position: relative; width: 100%; 
        aspect-ratio: 16 / 9; min-height: 250px;
        border-radius: clamp(12px, 2vw, 16px); overflow: hidden;
        border: 1px solid var(--glass-border); background: #000; 
    }
    .comparison-overlay img { position: absolute; top: 0; left: 0; height: 100%; object-fit: contain; }
}

@media (max-width: 450px) {
    .responsive-grid { grid-template-columns: repeat(1, 1fr); gap: 20px; }
    .tool-card { align-items: center; text-align: center; }
    .card-icon { margin-left: auto; margin-right: auto; }
}

/* =========================================================
   11. UPGRADED SEARCH ANIMATIONS (Dynamic Show/Hide)
   ========================================================= */
@keyframes fadeInSlideUp {
    from { opacity: 0; transform: translateY(20px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.search-matched { animation: fadeInSlideUp 0.4s cubic-bezier(0.25, 1, 0.5, 1) forwards; display: flex; }






/* =========================================================
   12. AUTH MODALS (LOGIN & SIGNUP) - SMOOTH UI/UX
   ========================================================= */
/* =========================================================
   12. AUTH MODALS (LOGIN & SIGNUP) - SMOOTH & RESPONSIVE UI
   ========================================================= */
.auth-modal-box { 
    width: 92%;
    max-width: clamp(320px, 90vw, 400px); 
    max-height: 85vh; /* Prevents going off-screen */
    overflow-y: auto; /* Smooth scrolling inside box */
    padding: clamp(25px, 4vw, 40px) clamp(20px, 3vw, 30px); 
    border-radius: clamp(16px, 2.5vw, 24px); 
    background: var(--solid-glass-bg); 
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-dropdown);
    scrollbar-width: none; /* Hide scrollbar for clean look */
    -webkit-overflow-scrolling: touch;
}
.auth-modal-box::-webkit-scrollbar { display: none; }

.auth-header { text-align: left; margin-bottom: clamp(15px, 3vh, 25px); border: none; padding: 0; }
.auth-header h2 { font-size: clamp(1.4rem, 2vw, 1.8rem); font-weight: 700; margin-bottom: 5px; color: var(--text-primary); }
.auth-header p { color: var(--text-secondary); font-size: clamp(0.85rem, 1vw, 0.95rem); font-weight: 500; }

.auth-input-group { margin-bottom: clamp(12px, 2vh, 18px); position: relative; width: 100%; }
.auth-input { 
    border-radius: clamp(10px, 1.5vw, 14px); 
    padding: clamp(12px, 1.5vh, 16px) 15px; 
    width: 100%; 
    font-size: clamp(0.95rem, 1.2vw, 1.05rem); 
    text-overflow: ellipsis; /* Long emails won't break design */
}

.auth-btn-main { border-radius: 50px; font-weight: 700; width: 100%; letter-spacing: 0.5px; box-shadow: 0 4px 15px var(--focus-ring); margin-top: 10px; }

.auth-divider { display: flex; align-items: center; margin: clamp(20px, 3vh, 25px) 0; color: var(--text-secondary); font-size: clamp(0.75rem, 1vw, 0.85rem); font-weight: 600; text-transform: uppercase; }
.auth-divider .line { flex: 1; height: 1px; background: var(--glass-border); }
.auth-divider span { padding: 0 15px; text-align: center; }

.auth-google-btn { 
    border: 2px solid var(--glass-border); background: transparent; color: var(--text-primary); 
    display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 15px; 
    border-radius: 50px; width: 100%; padding: clamp(10px, 1.5vh, 14px); font-weight: 600; 
    cursor: pointer; transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1); 
}
.auth-google-btn:hover { border-color: var(--text-primary); background: var(--input-bg); transform: translateY(-2px); }

.verify-email-btn { 
    background: transparent; border: 1px solid var(--text-primary); color: var(--text-primary); 
    padding: clamp(8px, 1vh, 12px) 15px; border-radius: 8px; margin-top: 10px; font-weight: 600; 
    cursor: pointer; width: 100%; transition: all 0.3s; text-transform: uppercase; font-size: 0.85rem;
}
.verify-email-btn:hover { background: var(--text-primary); color: var(--bg-main); }

.pwd-toggle-btn { 
    position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: transparent; 
    border: none; color: var(--text-secondary); cursor: pointer; display: flex; align-items: center; 
    justify-content: center; padding: 5px; transition: color 0.2s;
}
.pwd-toggle-btn:hover { color: var(--text-primary); }




/* =========================================================
   13. NOTIFICATION PANEL (SWIPE & LONG PRESS UI)
   ========================================================= */
.notif-dropdown-box {
    width: clamp(300px, 90vw, 360px);
    padding: clamp(15px, 2vw, 20px);
    border-radius: clamp(16px, 2vw, 24px);
}

.notif-header-area {
    display: flex; justify-content: space-between; align-items: center;
    border-bottom: 1px solid var(--glass-border);
    padding-bottom: 12px; margin-bottom: 12px;
}
.notif-header-area h4 { font-size: 1.1rem; color: var(--text-primary); font-weight: 700; margin: 0; }

.notif-clear-btn { 
    background: transparent; border: none; color: var(--logo-slash); 
    cursor: pointer; font-size: 0.85rem; font-weight: 600; transition: color 0.3s ease; 
}
.notif-clear-btn:hover { color: var(--text-primary); }

.notif-list-area {
    max-height: clamp(250px, 50vh, 350px);
    overflow-y: auto; overflow-x: hidden; /* Hide horizontal scroll for swipe */
    display: flex; flex-direction: column; gap: 8px;
    scrollbar-width: thin; -webkit-overflow-scrolling: touch;
}

.empty-notif { font-size: 0.85rem; color: var(--text-secondary); text-align: center; padding: 20px; }

/* Interactive Notification Items */
.notif-item {
    position: relative; cursor: pointer;
    user-select: none; -webkit-user-select: none;
    touch-action: pan-y; /* Allow vertical scroll, block horizontal for swipe script */
    border: 1px solid var(--glass-border);
    transition: background 0.3s, border-color 0.3s;
    will-change: transform, opacity;
}

.notif-item.snap-back { transition: transform 0.3s ease, opacity 0.3s ease, background 0.3s, border-color 0.3s; }

/* Long Press Selection State */
.notif-item.selected-item {
    border-color: #ff3b30;
    background: rgba(255, 59, 48, 0.1);
    transform: scale(0.98);
}