:root, :root[data-theme="dark"] {
 --bg-main: #0a0a0c; 
 --bg-gradient-edge: rgba(0, 0, 0, 0.95);
 --water-glass-bg: rgba(15, 20, 25, 0.15); 
 --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);
 
 /* Contrast Fixed for 100% Accessibility */
 --text-primary: #ffffff; 
 --text-secondary: #c5c5ca; 
 --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);
 
 --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);

 --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);
 --water-glass-bg: rgba(255, 255, 255, 0.35); 
 --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);
 
 /* Contrast Fixed for 100% Accessibility */
 --text-primary: #111111; 
 --text-secondary: #333333; 
 --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); 
 
 --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);

 --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);
}

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); }

* {
 margin: 0; padding: 0; box-sizing: border-box;
 -webkit-tap-highlight-color: transparent;
}

body {
 font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, 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 Utility Classes */
.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); 
}

/* 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); }
}

/* 2. GLASSMORPHISM SURFACES */
.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);
}

.solid-glass-element {
 background-color: var(--bg-main);
 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;
}

.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);
}

/* 3. 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; }

.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); }

.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); }

/* 4. 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); }

/* 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(--water-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 Panel & Items */
.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;
 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; }

.notif-item {
 position: relative; cursor: pointer;
 user-select: none; -webkit-user-select: none;
 touch-action: pan-y;
 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: background 0.3s, border-color 0.3s; margin-bottom: clamp(6px, 1vw, 10px);
 will-change: transform, opacity;
}
.notif-item:hover { background: var(--input-bg); border-color: var(--text-primary); transform: translateX(5px); }
.notif-item.snap-back { transition: transform 0.3s ease, opacity 0.3s ease, background 0.3s, border-color 0.3s; }
.notif-item.selected-item { border-color: #ff3b30; background: rgba(255, 59, 48, 0.1); transform: scale(0.98); }

.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); } }

/* 5. SIDEBAR MENU & DESKTOP NAV */
.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-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; 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); box-shadow: 0 4px 10px var(--focus-ring); 
}

.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; }
 .desktop-horizontal-nav { display: flex !important; align-items: center; gap: 10px; margin-left: 20px; }
 .sidebar { display: none !important; }
}

/* 6. MAIN CONTAINER & SERVICE 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: pointer; 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); }

/* 7. FORMS, BUTTONS & CUSTOM ALERTS */
.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; outline: none; }
.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-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); }

/* 8. FOOTER, SEARCH ANIMATION & MEDIA QUERIES */
.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); }

@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; }

@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; }
}

@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; }
}