/* ========================================
   ImageForge — Premium Dark Theme
   ======================================== */

:root {
    --bg-primary: #e4e8f0; /* Ultra-clean, premium light slate blue */
    --bg-secondary: rgba(255, 255, 255, 0.7); /* Translucent pure white for card glassmorphism */
    --bg-tertiary: #edf2f9; /* Slate 100 */
    --bg-card: rgba(255, 255, 255, 0.7);
    --bg-glass: rgba(245, 247, 251, 0.8);
    --border-color: rgba(99, 102, 241, 0.08); /* Sophisticated light border */
    --border-active: #f59e0b; /* Sunset Gold */
    --text-primary: #0f172a; /* Deep Slate 900 */
    --text-secondary: #334155; /* Slate 700 */
    --text-muted: #64748b; /* Slate 500 */
    --accent: #d97706; /* Sunset Amber/Gold */; /* Active Indigo */
    --accent-glow: rgba(245, 158, 11, 0.18);
    --danger: #ef4444;
    --success: #10b981;
    --warning: #f59e0b;
    --grad-primary: linear-gradient(135deg, #f59e0b 0%, #f97316 100%); /* Sunset Gold Gradient */;
    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-xl: 32px;
    --shadow-sm: 0 4px 6px -1px rgba(0, 0, 0, 0.03), 0 2px 4px -1px rgba(0, 0, 0, 0.01);
    --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.02);
    --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 10px 10px -5px rgba(0, 0, 0, 0.02);
    --transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.25s ease, background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

body.dark-theme {
    --bg-primary: #0a0a0f; /* Deep cyber obsidian black */
    --bg-secondary: rgba(15, 15, 25, 0.6); /* Translucent dark obsidian */
    --bg-tertiary: #13131e; /* Sleek cyber slate */
    --bg-card: rgba(20, 20, 35, 0.6);
    --bg-glass: rgba(10, 10, 15, 0.85);
    --border-color: rgba(255, 255, 255, 0.05);
    --border-active: #fbbf24; /* Active indigo */
    --text-primary: #f8fafc; /* Crisp zinc white */
    --text-secondary: #cbd5e1; /* Zinc gray */
    --text-muted: #94a3b8; /* Muted zinc */
    --accent: #fbbf24; /* Premium Indigo */
    --accent-light: #f59e0b;
    --accent-glow: rgba(245, 158, 11, 0.28);
    --grad-primary: linear-gradient(135deg, #fbbf24 0%, #f59e0b 50%, #f97316 100%);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    font-family: 'Inter', -apple-system, sans-serif;
    background: var(--bg-primary);
    color: var(--text-primary);
    min-height: 100vh;
    overflow-x: hidden;
    background-image: 
        radial-gradient(circle at 10% 20%, rgba(99, 102, 241, 0.04) 0%, transparent 40%),
        radial-gradient(circle at 90% 80%, rgba(244, 114, 182, 0.04) 0%, transparent 40%),
        radial-gradient(circle at 50% 50%, rgba(16, 185, 129, 0.02) 0%, transparent 50%);
    animation: pageFadeIn 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    transition: background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1), color 0.4s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

body.dark-theme {
    background-image: 
        radial-gradient(circle at 10% 20%, rgba(99, 102, 241, 0.1) 0%, transparent 45%),
        radial-gradient(circle at 90% 80%, rgba(244, 114, 182, 0.08) 0%, transparent 45%),
        radial-gradient(circle at 50% 50%, rgba(16, 185, 129, 0.04) 0%, transparent 50%) !important;
}

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

/* ---- Header ---- */
.header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: var(--bg-glass);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border-color);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.02);
}

.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
    min-height: 84px;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 6px;
}

.nav-divider {
    width: 1px;
    height: 18px;
    background: rgba(0, 0, 0, 0.08);
    margin: 0;
}

body.dark-theme .nav-divider {
    background: rgba(255, 255, 255, 0.08);
}

/* ── Modern Clean Header Nav Tabs ── */
.nav-links {
    display: flex;
    align-items: center;
    gap: 8px;
}

.nav-external {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 7px 16px;
    height: 38px;
    position: relative;
    background: transparent;
    color: var(--text-secondary);
    text-decoration: none;
    border-radius: 9999px;
    border: 1.5px solid transparent;
    font-size: 13.5px;
    font-weight: 700;
    transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
    box-sizing: border-box;
    line-height: 1;
}

.nav-external i {
    font-size: 14px;
    color: var(--text-muted);
    transition: transform 0.2s ease, color 0.2s ease;
}

/* Hover effect: soft warm amber fill */
.nav-external:hover {
    background: #fef3c7;
    color: #b45309;
    transform: translateY(-1px);
}

.nav-external:hover i {
    color: #f59e0b;
    transform: scale(1.15);
}

body.dark-theme .nav-external:hover {
    background: rgba(245, 158, 11, 0.12);
    color: #fbbf24;
}

body.dark-theme .nav-external:hover i {
    color: #fbbf24;
}

/* Active tab: Rich Amber Gold Gradient Pill */
.nav-external.active {
    background: linear-gradient(135deg, #fffbeb, #ffffff) !important;
    color: #92400e !important;
    border: 1.5px solid #f59e0b !important;
    box-shadow: 0 4px 14px rgba(245, 158, 11, 0.22) !important;
}

.nav-external.active i {
    color: #f59e0b !important;
}

body.dark-theme .nav-external.active {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.22), rgba(245, 158, 11, 0.06)) !important;
    color: #fbbf24 !important;
    border: 1.5px solid #f59e0b !important;
    box-shadow: 0 4px 16px rgba(245, 158, 11, 0.3) !important;
}

body.dark-theme .nav-external.active i {
    color: #fbbf24 !important;
}

.nav-external.nav-reset {
    color: var(--danger);
    font-weight: 600;
}

.nav-external.nav-reset:hover {
    background: rgba(239, 68, 68, 0.08);
    color: var(--danger);
}

body.dark-theme .nav-external.nav-reset:hover {
    background: rgba(239, 68, 68, 0.15);
    color: #ff6b6b;
}

/* ==========================================================
   STUDIO MODE: CLEAN DISTRACTION-FREE WORKSPACE INSIDE TOOLS
========================================================== */
body.in-tool-mode #vx-top-capsule,
body.in-tool-mode #nav-all-tools,
body.in-tool-mode #nav-guides,
body.in-tool-mode #nav-typing-test,
body.in-tool-mode #nav-about-us,
body.in-tool-mode .header-nav .nav-divider,
body.in-tool-mode .gz-pills-dock-wrap {
    display: none !important;
}


.header-badge {
    background: rgba(16, 185, 129, 0.06);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.15);
    padding: 0 12px;
    height: 30px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    white-space: nowrap;
    box-sizing: border-box;
}

body.dark-theme .header-badge {
    background: rgba(16, 185, 129, 0.1);
    border-color: rgba(16, 185, 129, 0.25);
    color: #34d399;
}

@media (max-width: 1100px) {
    .header-badge { display: none; }
}

@media (max-width: 900px) {
    .nav-external { padding: 0 10px; height: 36px; }
}

.theme-btn {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-muted);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 16px;
    margin: 0;
    box-sizing: border-box;
    vertical-align: middle;
}

.theme-btn:hover {
    background: rgba(99, 102, 241, 0.08);
    color: var(--accent);
    transform: rotate(15deg);
}

body.dark-theme .theme-btn:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
}

.sound-btn {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-muted);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 15px;
    margin: 0;
    box-sizing: border-box;
    vertical-align: middle;
    position: relative;
}

.sound-btn:hover {
    background: rgba(99, 102, 241, 0.08);
    color: var(--accent);
    transform: scale(1.12);
}

body.dark-theme .sound-btn:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
}

.sound-btn.is-muted {
    color: #ef4444 !important;
    opacity: 0.8;
}

.logo {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    cursor: pointer;
    overflow: visible;
}

.brand-logo-img {
    height: 90px !important;
    width: auto;
    max-width: 340px;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.12));
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: center center;
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    image-rendering: auto;
}

.logo:hover .brand-logo-img {
    transform: scale(1.04) translateZ(0);
}

.footer-logo img {
    width: 56px;
    height: 56px;
    object-fit: contain;
    flex-shrink: 0;
    image-rendering: -webkit-optimize-contrast;
}

.logo-icon {
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    overflow: hidden;
    background: #ffffff;
    padding: 2px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease;
}

.logo:hover .logo-icon {
    transform: scale(1.05);
}

.logo-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 11px;
}

.logo-text {
    font-size: 20px;
    font-weight: 850;
    letter-spacing: -0.5px;
    color: var(--text-primary);
}

.logo-accent {
    color: var(--accent);
}

.header-nav {
    display: flex;
    align-items: center;
    gap: 24px;
}

.header-nav a {
    color: var(--text-secondary);
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    transition: var(--transition);
    display: flex;
    align-items: center;
    gap: 8px;
}

.header-nav a:hover {
    color: var(--accent);
}

.theme-toggle-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
    font-size: 18px;
    padding: 0;
}

.theme-toggle-btn:hover {
    background: var(--bg-tertiary);
    transform: rotate(15deg) scale(1.1);
}

/* Dark Mode Overrides for Premium Cards */
body.dark-theme .dash-card {
    background: #181d28;
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
}
body.dark-theme .dash-card h3 {
    color: #f8fafc;
}
body.dark-theme .dash-card p {
    color: #94a3b8;
}
body.dark-theme .dash-card-icon {
    background: rgba(255,255,255,0.03);
}
body.dark-theme .dash-top-bar {
    background: #1e293b;
    border-color: rgba(255,255,255,0.05);
}
body.dark-theme #dash-time {
    color: #38bdf8 !important;
    text-shadow: 0 0 8px rgba(56, 189, 248, 0.8), 0 0 20px rgba(56, 189, 248, 0.4) !important;
}
body.dark-theme #dash-date {
    color: #94a3b8;
}

/* ---- Main & Tab Transitions (Smooth Gen-Z Animated Tab Switching) ---- */
.tab-content {
    display: none !important;
    opacity: 0;
    transform: translateY(12px) scale(0.99);
}

.tab-content.active {
    display: block !important;
    animation: tabEnterSmooth 0.38s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes tabEnterSmooth {
    0% {
        opacity: 0;
        transform: translateY(16px) scale(0.985);
        filter: blur(4px);
    }
    60% {
        opacity: 0.95;
        filter: blur(0px);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0px);
    }
}

.main {
    max-width: 1400px;
    margin: 0 auto;
    padding: 8px 16px;
    min-height: calc(100vh - 80px);
}

/* ---- Homepage Dashboard ---- */
.dash-center-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 12px;
}

.hero-section {
    text-align: center;
    padding: 8px 16px 6px;
    background: radial-gradient(circle at 50% 50%, rgba(99, 102, 241, 0.05) 0%, transparent 70%);
}

.hero-title {
    font-family: 'Plus Jakarta Sans', 'Outfit', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 32px;
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.25;
    margin-bottom: 8px;
    color: var(--text-primary);
}

.hero-accent {
    background: var(--grad-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-subtitle {
    color: var(--text-secondary);
    font-size: 14.5px;
    max-width: 600px;
    margin: 0 auto 10px;
    line-height: 1.45;
    font-weight: 500;
}

.dash-section {
    margin-top: 24px;
    margin-bottom: 16px;
}

.dash-section-title {
    font-size: 20px;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    color: var(--text-primary);
}

.section-dot {
    width: 6px;
    height: 22px;
    border-radius: 3px;
    background: var(--accent);
}

.dash-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
}

.dash-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 20px 16px;
    background: #ffffff;
    border: 1.5px solid rgba(226, 232, 240, 0.9);
    border-radius: 24px;
    cursor: pointer;
    transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.25s ease, border-color 0.25s ease;
    box-shadow: 0 4px 18px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.02);
    overflow: visible;
    text-align: center;
    align-items: center;
    min-height: 220px;
    content-visibility: auto;
    contain-intrinsic-size: auto 240px;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
}

.dash-card:hover {
    transform: translate3d(0, -6px, 0);
    box-shadow: 0 16px 32px -8px rgba(99, 102, 241, 0.18);
    border-color: var(--accent);
}

.dash-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at top right, rgba(99, 102, 241, 0.03), transparent 70%);
    opacity: 0;
    transition: var(--transition);
}

.dash-card:hover::before {
    opacity: 1;
}

.dash-card-icon {
    width: 190px;
    height: 190px;
    border-radius: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    transition: var(--transition);
    background: #f8fafc;
}

.dash-card-icon svg {
    width: 110px;
    height: 110px;
}

.dash-card h3 {
    font-size: 30px;
    font-weight: 850;
    color: #000000;
    margin-bottom: 12px;
    letter-spacing: -0.5px;
}

.dash-card p {
    font-size: 18px;
    color: #475569;
    line-height: 1.5;
    font-weight: 500;
    max-width: 280px;
}

/* 3D Glossy Background for SVG Icons */
.dash-card-icon.glossy-svg {
    background: radial-gradient(circle at 30% 30%, #ffffff, #f1f5f9, #cbd5e1);
    box-shadow: inset -10px -10px 20px rgba(0,0,0,0.05), inset 10px 10px 20px rgba(255,255,255,1), 0 15px 35px rgba(0,0,0,0.1);
    border: 2px solid rgba(255,255,255,0.5);
}
.dash-card-icon.glossy-svg svg {
    filter: drop-shadow(0 8px 12px rgba(0,0,0,0.15));
    transform: scale(1.15);
    width: 60%;
    height: 60%;
}

/* Original Colorful Icon Variants (Fallback) */
.icon-crop { background: #fff1f2; color: #e11d48; }
.icon-compress { background: #fff7ed; color: #ea580c; }
.icon-convert { background: #f5f3ff; color: #7c3aed; }
.icon-id { background: #f0fdf4; color: #16a34a; }
.icon-bulk { background: #fefce8; color: #ca8a04; }
.icon-pdf-export { background: #eff6ff; color: #2563eb; }
.icon-pdf-img { background: #fff1f2; color: #be123c; }
.icon-word { background: #f0f9ff; color: #0284c7; }
.icon-edit { background: #faf5ff; color: #9333ea; }
.icon-resume { background: #fdf2f8; color: #db2777; }
.icon-qr { background: #f0fdfa; color: #0d9488; }

/* ============================================
   PREMIUM ICON SYSTEM — SMOOTH & MODERN
   ============================================ */

@keyframes iconFloat {
    0%   { transform: translateY(0px);  }
    50%  { transform: translateY(-8px); }
    100% { transform: translateY(0px);  }
}

@keyframes shimmerSweep {
    0%   { transform: translateX(-100%) skewX(-15deg); }
    100% { transform: translateX(250%)  skewX(-15deg); }
}

@keyframes iconEntrance {
    from { opacity: 0; transform: translateY(16px) scale(0.85); }
    to   { opacity: 1; transform: translateY(0)    scale(1);    }
}

/* ---------- BASE ICON ---------- */
.premium-icon {
    width: 110px !important;
    height: 110px !important;
    border-radius: 28px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 22px !important;
    font-size: 40px !important;
    color: #fff !important;
    position: relative !important;
    overflow: hidden !important;
    background: var(--icon-bg, linear-gradient(145deg, #6366f1, #a855f7)) !important;
    box-shadow:
        0 8px 20px rgba(0,0,0,0.18),
        inset 0 1px 0 rgba(255,255,255,0.28),
        inset 0 -1px 0 rgba(0,0,0,0.10) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;

    /* GPU acceleration */
    transform: none;

    /* Entry + float */
    animation: iconEntrance 0.35s cubic-bezier(0.22,1,0.36,1) both !important;

    transition:
        transform    0.45s cubic-bezier(0.34,1.56,0.64,1),
        box-shadow   0.35s ease,
        border-color 0.25s ease !important;
}

/* Glass top-shine stripe */
.premium-icon::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 42%;
    background: linear-gradient(
        180deg,
        rgba(255,255,255,0.30) 0%,
        rgba(255,255,255,0.00) 100%
    );
    border-radius: 28px 28px 0 0;
    pointer-events: none;
    z-index: 2;
}

/* Shimmer sweep on hover */
.premium-icon::before {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    left: 0;
    width: 40%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,0.22),
        transparent
    );
    transform: translateX(-100%) skewX(-15deg);
    pointer-events: none;
    z-index: 3;
    transition: none;
}

/* ---------- ICON SYMBOL ---------- */
.premium-icon i {
    position: relative;
    z-index: 4 !important;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.25)) !important;
    transition:
        transform  0.40s cubic-bezier(0.34,1.56,0.64,1),
        filter     0.30s ease !important;
    will-change: transform;
}

/* ---------- DARK THEME ---------- */
body.dark-theme .premium-icon {
    box-shadow:
        0 10px 28px rgba(0,0,0,0.38),
        inset 0 1px 0 rgba(255,255,255,0.18),
        inset 0 -1px 0 rgba(0,0,0,0.15) !important;
    border-color: rgba(255,255,255,0.10) !important;
}

/* ---------- HOVER ---------- */
.dash-card:hover .premium-icon {
    transform: translateY(-12px) scale(1.10) translateZ(0) !important;
    box-shadow:
        0 22px 50px rgba(0,0,0,0.22),
        0  6px 18px rgba(0,0,0,0.12),
        inset 0 1px 0 rgba(255,255,255,0.40) !important;
    border-color: rgba(255,255,255,0.55) !important;
    animation: none !important;   /* pause float on hover for stability */
}

.dash-card:hover .premium-icon::before {
    animation: shimmerSweep 0.65s ease forwards;
}

.dash-card:hover .premium-icon i {
    transform: scale(1.18) translateY(-2px) !important;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.35)) !important;
}

/* ---------- STAGGERED ENTRY ---------- */
.dash-card:nth-child(1)  .premium-icon { animation-delay: 0.05s, 0s; }
.dash-card:nth-child(2)  .premium-icon { animation-delay: 0.10s, 0.3s; }
.dash-card:nth-child(3)  .premium-icon { animation-delay: 0.15s, 0.6s; }
.dash-card:nth-child(4)  .premium-icon { animation-delay: 0.20s, 0.9s; }
.dash-card:nth-child(5)  .premium-icon { animation-delay: 0.25s, 1.2s; }
.dash-card:nth-child(6)  .premium-icon { animation-delay: 0.30s, 1.5s; }
.dash-card:nth-child(7)  .premium-icon { animation-delay: 0.35s, 1.8s; }
.dash-card:nth-child(8)  .premium-icon { animation-delay: 0.40s, 2.1s; }
.dash-card:nth-child(9)  .premium-icon { animation-delay: 0.45s, 2.4s; }
.dash-card:nth-child(10) .premium-icon { animation-delay: 0.50s, 2.7s; }

/* Custom Curated HSL Gradients for each tool */
/* Image Utilities Gradients */
.grad-indigo-pink { --icon-bg: linear-gradient(135deg, #FF3E83, #A73EEF); }
.grad-emerald-teal { --icon-bg: linear-gradient(135deg, #10B981, #059669); }
.grad-violet-indigo { --icon-bg: linear-gradient(135deg, #8B5CF6, #4F46E5); }
.grad-cyan-blue { --icon-bg: linear-gradient(135deg, #06B6D4, #3B82F6); }
.grad-amber-red { --icon-bg: linear-gradient(135deg, #FBBF24, #EF4444); }
.grad-cyan-indigo { --icon-bg: linear-gradient(135deg, #38BDF8, #1D4ED8); }
.grad-fuchsia-purple { --icon-bg: linear-gradient(135deg, #EC4899, #7C3AED); }

/* PDF Master Gradients */
.grad-rose-orange { --icon-bg: linear-gradient(135deg, #F43F5E, #FB923C); }
.grad-crimson-purple { --icon-bg: linear-gradient(135deg, #EF4444, #8B5CF6); }
.grad-orange-red { --icon-bg: linear-gradient(135deg, #F97316, #DC2626); }
.grad-coral-rose { --icon-bg: linear-gradient(135deg, #FCA5A5, #F43F5E); }
.grad-blue-indigo { --icon-bg: linear-gradient(135deg, #8B5CF6, #3B82F6); }
.grad-sunset-gold { --icon-bg: linear-gradient(135deg, #F97316, #FBBF24); }
.grad-rose-teal { --icon-bg: linear-gradient(135deg, #F43F5E, #14B8A6); }
.grad-blue-emerald { --icon-bg: linear-gradient(135deg, #3B82F6, #10B981); }
.grad-emerald-rose { --icon-bg: linear-gradient(135deg, #10B981, #F43F5E); }

.grad-teal-mint { --icon-bg: linear-gradient(135deg, #0D9488, #34D399); }
.grad-royal-cyan { --icon-bg: linear-gradient(135deg, #2563EB, #06B6D4); }
.grad-amber-bronze { --icon-bg: linear-gradient(135deg, #F59E0B, #B45309); }
.grad-violet-magenta { --icon-bg: linear-gradient(135deg, #6D28D9, #DB2777); }

/* Additional missing gradients */
.grad-rose-purple { --icon-bg: linear-gradient(135deg, #F43F5E, #7C3AED); }
.grad-lime-green { --icon-bg: linear-gradient(135deg, #84CC16, #15803D); }
.grad-sky-blue { --icon-bg: linear-gradient(135deg, #0EA5E9, #1D4ED8); }
.grad-peach-pink { --icon-bg: linear-gradient(135deg, #FB7185, #F97316); }

.dash-card-text h3 {
    font-size: 18px;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.dash-card-text p {
    display: block;
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.5;
}

.dash-card-badge {
    position: absolute;
    top: 16px;
    right: 16px;
    font-size: 10px;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 50px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    z-index: 2;
}

.dash-card-badge.hot {
    background: rgba(230, 57, 70, 0.15);
    color: #e63946;
    border: 1px solid rgba(230, 57, 70, 0.3);
}

.dash-card-badge.new {
    background: rgba(0, 214, 143, 0.15);
    color: #00d68f;
    border: 1px solid rgba(0, 214, 143, 0.3);
    animation: badgePulse 2s ease-in-out infinite;
}

.dash-card-badge.glow-new-red,
.dash-card-badge.glow-new {
    background: linear-gradient(135deg, #ff2a4b 0%, #dc2626 50%, #991b1b 100%) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.85) !important;
    font-weight: 900 !important;
    letter-spacing: 0.8px;
    box-shadow: 0 0 12px rgba(255, 42, 75, 0.85), 0 0 24px rgba(220, 38, 38, 0.55);
    animation: glowPulseBadgeRed 1.6s ease-in-out infinite alternate;
}

@keyframes glowPulseBadgeRed {
    0% {
        box-shadow: 0 0 8px rgba(255, 42, 75, 0.6), 0 0 16px rgba(220, 38, 38, 0.4);
        transform: scale(1);
    }
    100% {
        box-shadow: 0 0 18px rgba(255, 42, 75, 1), 0 0 30px rgba(220, 38, 38, 0.75);
        transform: scale(1.08);
    }
}

@keyframes badgePulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* Home tab button */
.home-tab {
    background: rgba(230, 57, 70, 0.1) !important;
    color: #e63946 !important;
    border-color: rgba(230, 57, 70, 0.2) !important;
}

.home-tab:hover {
    background: rgba(230, 57, 70, 0.2) !important;
    box-shadow: 0 0 15px rgba(230, 57, 70, 0.15) !important;
}

/* ---- Ad Slots ---- */
.ad-slot {
    width: 100%;
    margin: 20px 0;
    display: none; /* Hidden by default for testing */
    justify-content: center;
}

.ad-placeholder {
    width: 100%;
    max-width: 728px;
    min-height: 90px;
    background: var(--bg-glass);
    border: 1px dashed var(--border-color);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* ---- SEO Section ---- */
.seo-section {
    margin-top: 40px;
    padding-top: 30px;
    border-top: 1px solid var(--border-color);
}

.seo-section h2 {
    font-size: 22px;
    font-weight: 800;
    text-align: center;
    margin-bottom: 20px;
}

.seo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
}

.seo-card {
    background: var(--bg-glass);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 20px;
}

.seo-card h3 {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 6px;
}

.seo-card p {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.6;
}

/* ---- Completely Remove The Obtrusive Black Bar ---- */
.tabs-container, #tabs-container {
    display: none !important;
}

/* ---- Editor Top Info Bar ---- */
.editor-top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(99, 102, 241, 0.18);
    border-radius: 20px;
    padding: 10px 20px;
    margin-bottom: 20px;
    box-shadow: 0 8px 25px rgba(99, 102, 241, 0.08);
}

body.dark-theme .editor-top-bar {
    background: rgba(15, 23, 42, 0.85);
    border-color: rgba(6, 182, 212, 0.25);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

.editor-top-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.editor-mode-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: linear-gradient(135deg, #06b6d4, #6366f1);
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 50px;
    box-shadow: 0 4px 15px rgba(6, 182, 212, 0.3);
}

.editor-file-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(99, 102, 241, 0.08);
    border: 1px solid rgba(99, 102, 241, 0.2);
    color: #f59e0b;
    font-size: 12.5px;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 50px;
}

body.dark-theme .editor-file-badge {
    background: rgba(6, 182, 212, 0.1);
    border-color: rgba(6, 182, 212, 0.25);
    color: #38bdf8;
}

.btn-editor-new {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.3);
    color: #10b981;
    font-size: 12.5px;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
}

.btn-editor-new:hover {
    background: #10b981;
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.35);
}

@media (max-width: 768px) {
    .editor-top-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
}
.active-tool-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(99, 102, 241, 0.15);
    border-radius: 24px;
    padding: 14px 24px;
    margin: 10px auto 14px;
    max-width: 1000px;
    box-shadow: 0 10px 30px rgba(99, 102, 241, 0.06);
    animation: bannerSlideIn 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

body.dark-theme .active-tool-banner {
    background: rgba(15, 23, 42, 0.75);
    border-color: rgba(6, 182, 212, 0.2);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
}

@keyframes bannerSlideIn {
    from { opacity: 0; transform: translateY(-12px); }
    to { opacity: 1; transform: translateY(0); }
}

.tool-banner-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.tool-banner-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.3);
    color: #b45309;
    font-size: 13px;
    font-weight: 700;
    padding: 8px 16px;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.25s ease;
    font-family: inherit;
}

body.dark-theme .tool-banner-back-btn {
    background: rgba(245, 158, 11, 0.15);
    border-color: rgba(245, 158, 11, 0.35);
    color: #fbbf24;
}

.tool-banner-back-btn:hover {
    background: linear-gradient(135deg, #f59e0b 0%, #ea580c 100%);
    color: #ffffff;
    transform: translateX(-3px);
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.35);
    border-color: transparent;
}

body.dark-theme .tool-banner-back-btn:hover {
    background: linear-gradient(135deg, #f59e0b 0%, #ea580c 100%);
    color: #ffffff;
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.45);
}

.tool-banner-divider {
    width: 1px;
    height: 32px;
    background: rgba(0, 0, 0, 0.08);
}

body.dark-theme .tool-banner-divider {
    background: rgba(255, 255, 255, 0.1);
}

.tool-banner-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tool-banner-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.tool-banner-icon {
    font-size: 20px;
}

.tool-banner-title {
    font-family: 'Plus Jakarta Sans', 'Outfit', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 18px;
    font-weight: 800;
    color: #0f172a;
    margin: 0;
    letter-spacing: -0.02em;
    line-height: 1.3;
}

body.dark-theme .tool-banner-title {
    color: #ffffff;
}

.tool-banner-badge {
    background: linear-gradient(135deg, #06b6d4, #6366f1);
    color: #ffffff;
    font-size: 10px;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 20px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.tool-banner-desc {
    font-size: 12.5px;
    color: #64748b;
    margin: 0;
}

body.dark-theme .tool-banner-desc {
    color: #94a3b8;
}

.tool-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 600;
    color: #10b981;
    background: rgba(16, 185, 129, 0.08);
    border: 1px solid rgba(16, 185, 129, 0.2);
    padding: 6px 14px;
    border-radius: 50px;
}

.tool-live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 10px #10b981;
    animation: livePulse 2s infinite;
}

@keyframes livePulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.75); }
}

@media (max-width: 768px) {
    .active-tool-banner {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding: 14px 16px;
    }
    .tool-banner-desc {
        display: none;
    }
    .tool-banner-right {
        display: none;
    }
}

/* ---- Gen-Z Ultra-Modern Dropzone: Universal Across All Tools ---- */
.upload-area, .genz-dropzone, .upload-dropzone, .wj-dropzone, .exact-dropzone, .sig-dropzone, .genz-dropzone-pro, .dropzone-box, #bulk-dropzone {
    border: 2px dashed rgba(245, 158, 11, 0.35) !important;
    border-radius: 28px !important;
    padding: 34px 24px !important;
    text-align: center !important;
    cursor: pointer !important;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    background: rgba(255, 255, 255, 0.94) !important;
    backdrop-filter: blur(35px) !important;
    -webkit-backdrop-filter: blur(35px) !important;
    position: relative !important;
    overflow: hidden !important;
    max-width: 700px !important;
    width: 100% !important;
    margin: 10px auto 16px !important;
    min-height: 310px !important;
    display: flex;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 16px 45px rgba(245, 158, 11, 0.12), 0 6px 20px rgba(0,0,0,0.04) !important;
    animation: dropzoneEntrance 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-sizing: border-box !important;
}

@keyframes dropzoneEntrance {
    from { opacity: 0; transform: translateY(14px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.upload-area.hidden, .genz-dropzone.hidden, .upload-dropzone.hidden, .wj-dropzone.hidden, .exact-dropzone.hidden, .sig-dropzone.hidden, .genz-dropzone-pro.hidden,
.upload-area[hidden], .genz-dropzone[hidden], .upload-dropzone[hidden], .wj-dropzone[hidden],
.upload-area[style*="display: none"], .upload-area[style*="display:none"],
.genz-dropzone[style*="display: none"], .genz-dropzone[style*="display:none"],
.upload-dropzone[style*="display: none"], .upload-dropzone[style*="display:none"],
.wj-dropzone[style*="display: none"], .wj-dropzone[style*="display:none"],
[id*="upload"][style*="display: none"], [id*="upload"][style*="display:none"],
[id*="dropzone"][style*="display: none"], [id*="dropzone"][style*="display:none"] {
    display: none !important;
}

body.dark-theme .upload-area, 
body.dark-theme .genz-dropzone, 
body.dark-theme .upload-dropzone, 
body.dark-theme .wj-dropzone, 
body.dark-theme .exact-dropzone, 
body.dark-theme .sig-dropzone, 
body.dark-theme .genz-dropzone-pro, 
body.dark-theme .dropzone-box {
    background: rgba(15, 23, 42, 0.85) !important;
    border-color: rgba(245, 158, 11, 0.35) !important;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.6), 0 0 45px rgba(245, 158, 11, 0.15) !important;
}

.upload-area:hover, 
.genz-dropzone:hover, 
.upload-dropzone:hover, 
.wj-dropzone:hover, 
.exact-dropzone:hover, 
.sig-dropzone:hover, 
.genz-dropzone-pro:hover, 
.dropzone-box:hover {
    border-color: #f59e0b !important;
    transform: translateY(-6px) scale(1.01) !important;
    box-shadow: 0 30px 80px rgba(245, 158, 11, 0.22), 0 0 30px rgba(245, 158, 11, 0.12) !important;
    background: #ffffff !important;
}

body.dark-theme .upload-area:hover, 
body.dark-theme .genz-dropzone:hover, 
body.dark-theme .upload-dropzone:hover, 
body.dark-theme .wj-dropzone:hover, 
body.dark-theme .exact-dropzone:hover, 
body.dark-theme .sig-dropzone:hover, 
body.dark-theme .genz-dropzone-pro:hover, 
body.dark-theme .dropzone-box:hover {
    border-color: #fbbf24 !important;
    box-shadow: 0 35px 85px rgba(0, 0, 0, 0.7), 0 0 45px rgba(245, 158, 11, 0.3) !important;
    background: rgba(15, 23, 42, 0.95) !important;
}

.upload-area.dragover, 
.genz-dropzone.dragover, 
.upload-dropzone.dragover, 
.wj-dropzone.dragover, 
.exact-dropzone.dragover, 
.sig-dropzone.dragover, 
.genz-dropzone-pro.dragover, 
.dropzone-box.dragover {
    border-color: #f59e0b !important;
    background: rgba(245, 158, 11, 0.08) !important;
    transform: scale(1.03) !important;
    box-shadow: 0 0 60px rgba(245, 158, 11, 0.45) !important;
}

/* Floating 3D Bubbles & Mascot Icon Box */
.upload-icon-wrapper {
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin: 4px auto 14px;
    width: 84px;
    height: 84px;
}

.floating-drop-icon {
    width: 76px !important;
    height: 76px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: #fffbeb;
    border: 2px solid rgba(245, 158, 11, 0.5);
    border-radius: 50%;
    box-shadow: 0 10px 24px rgba(245, 158, 11, 0.22);
    animation: cuteDropJelly 3.5s infinite cubic-bezier(0.45, 0.05, 0.55, 0.95);
    position: relative;
    z-index: 2;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
}

body.dark-theme .floating-drop-icon {
    background: rgba(245, 158, 11, 0.15) !important;
    border-color: #fbbf24 !important;
}

@keyframes cuteDropJelly {
    0%, 100% { transform: translate3d(0, 0, 0) scale3d(1, 1, 1); }
    30% { transform: translate3d(0, -8px, 0) scale3d(0.96, 1.04, 1); }
    50% { transform: translate3d(0, 2px, 0) scale3d(1.03, 0.97, 1); }
    70% { transform: translate3d(0, -3px, 0) scale3d(0.98, 1.02, 1); }
}

.upload-area:hover .floating-drop-icon {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 50%, #f97316 100%);
    border-color: #fbbf24;
}

.upload-area:hover .floating-drop-icon i {
    color: #000 !important;
    transform: scale(1.12);
}

.drop-pulse-ring {
    position: absolute;
    inset: -14px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(249, 115, 22, 0.35) 0%, transparent 70%);
    animation: auraGlowPulse 3s infinite ease-in-out;
    z-index: 1;
    transform: translate3d(0, 0, 0);
    will-change: transform, opacity;
    pointer-events: none;
}

@keyframes auraGlowPulse {
    0%, 100% { transform: scale3d(0.88, 0.88, 1); opacity: 0.35; }
    50% { transform: scale3d(1.25, 1.25, 1); opacity: 0.85; }
}

/* Typography & Elements */
.drop-title {
    font-family: 'Plus Jakarta Sans', 'Outfit', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 1.75rem !important;
    font-weight: 800 !important;
    letter-spacing: -0.025em !important;
    line-height: 1.35 !important;
    color: #0f172a !important;
    margin: 0 0 8px !important;
    padding: 2px 0 !important;
}

.drop-title span {
    background: linear-gradient(135deg, #d97706 0%, #ea580c 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

body.dark-theme .drop-title {
    color: #ffffff !important;
}

body.dark-theme .drop-title span {
    background: linear-gradient(135deg, #fbbf24 0%, #f97316 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.drop-subtitle {
    font-size: 14.5px !important;
    font-weight: 550 !important;
    color: #64748b !important;
    margin: 0 0 16px !important;
}

body.dark-theme .drop-subtitle {
    color: #94a3b8 !important;
}

/* Bouncy Shimmer CTA Button */
.drop-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 50%, #f97316 100%);
    color: #000000 !important;
    padding: 12px 30px;
    border-radius: 50px;
    font-weight: 800;
    font-size: 14.5px;
    height: 48px;
    min-height: 48px;
    box-sizing: border-box;
    box-shadow: 0 10px 30px rgba(245, 158, 11, 0.4);
    margin: 0 auto 18px !important;
    vertical-align: middle;
    line-height: 1;
    position: relative;
    overflow: hidden;
    letter-spacing: 0.3px;
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: pointer;
    border: 1px solid rgba(251, 191, 36, 0.6);
}

.drop-action-btn::before {
    content: '';
    position: absolute;
    top: 0; left: -100%; width: 50%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent);
    transform: skewX(-20deg);
    transition: 0.6s;
}

.drop-action-btn:hover::before {
    left: 150%;
}

.drop-action-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 35px rgba(245, 158, 11, 0.55);
}

/* Supported Formats Candy Pills */
.drop-pills-row {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.drop-pill {
    background: #fffbeb;
    border: 1px solid rgba(245, 158, 11, 0.4);
    color: #b45309;
    font-size: 11.5px;
    font-weight: 800;
    padding: 5px 13px;
    border-radius: 50px;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.03);
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.drop-pill:hover {
    transform: translateY(-3px) scale(1.08);
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 50%, #f97316 100%);
    color: #000;
    border-color: transparent;
    box-shadow: 0 6px 16px rgba(245, 158, 11, 0.4);
}

body.dark-theme .drop-pill {
    background: rgba(245, 158, 11, 0.1);
    border-color: rgba(245, 158, 11, 0.3);
    color: #fbbf24;
}

/* Security Badge */
.drop-security-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    font-weight: 800;
    color: #059669;
    background: #ecfdf5;
    padding: 6px 16px;
    border-radius: 50px;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

body.dark-theme .drop-security-badge {
    color: #10b981;
    background: rgba(16, 185, 129, 0.12);
}

/* ---- Editor ---- */
.editor-layout {
    display: grid;
    grid-template-columns: 1fr 415px;
    gap: 20px;
    align-items: start;
}

@media (max-width: 1040px) {
    .editor-layout {
        grid-template-columns: 1fr;
    }
}

/* ---- Canvas ---- */
.canvas-wrapper {
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    overflow: hidden;
}

.canvas-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    max-height: 600px;
    overflow: hidden;
    background:
        linear-gradient(45deg, #1a1a28 25%, transparent 25%),
        linear-gradient(-45deg, #1a1a28 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #1a1a28 75%),
        linear-gradient(-45deg, transparent 75%, #1a1a28 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
    background-color: #12121a;
}

#main-canvas {
    max-width: 100%;
    max-height: 600px;
    display: block;
}

/* ---- Crop Overlay ---- */
.crop-overlay {
    position: absolute;
    cursor: crosshair;
    overflow: hidden;
}

.crop-box {
    position: absolute;
    border: 2px solid var(--accent);
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.55);
    cursor: move;
    z-index: 10;
    transition: left 0.16s cubic-bezier(0.16, 1, 0.3, 1), top 0.16s cubic-bezier(0.16, 1, 0.3, 1), width 0.16s cubic-bezier(0.16, 1, 0.3, 1), height 0.16s cubic-bezier(0.16, 1, 0.3, 1);
}

.crop-box.is-dragging {
    transition: none !important;
}

.crop-area {
    width: 100%;
    height: 100%;
    position: relative;
}

/* Grid lines inside crop */
.crop-area::before,
.crop-area::after {
    content: '';
    position: absolute;
    background: rgba(124, 92, 252, 0.3);
}

.crop-area::before {
    top: 33.33%;
    left: 0;
    right: 0;
    height: 1px;
    box-shadow: 0 calc(33.33% * 1) 0 rgba(124, 92, 252, 0.3);
}

.crop-area::after {
    left: 33.33%;
    top: 0;
    bottom: 0;
    width: 1px;
    box-shadow: calc(33.33% * 1) 0 0 rgba(124, 92, 252, 0.3);
}

.crop-handle {
    position: absolute;
    width: 14px;
    height: 14px;
    background: white;
    border: 2px solid var(--accent);
    border-radius: 50%;
    z-index: 20;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.crop-handle:hover {
    transform: scale(1.3);
    box-shadow: 0 0 10px var(--accent-glow);
}

.crop-handle.nw { top: -7px; left: -7px; cursor: nw-resize; }
.crop-handle.n  { top: -7px; left: 50%; margin-left: -7px; cursor: n-resize; }
.crop-handle.ne { top: -7px; right: -7px; cursor: ne-resize; }
.crop-handle.e  { top: 50%; margin-top: -7px; right: -7px; cursor: e-resize; }
.crop-handle.se { bottom: -7px; right: -7px; cursor: se-resize; }
.crop-handle.s  { bottom: -7px; left: 50%; margin-left: -7px; cursor: s-resize; }
.crop-handle.sw { bottom: -7px; left: -7px; cursor: sw-resize; }
.crop-handle.w  { top: 50%; margin-top: -7px; left: -7px; cursor: w-resize; }

.crop-info {
    position: absolute;
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.8);
    color: white;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 4px;
    white-space: nowrap;
    pointer-events: none;
}

/* ---- Canvas Toolbar ---- */
.canvas-toolbar {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 10px 14px;
    border-top: 1px solid var(--border-color);
    background: var(--bg-card);
    flex-wrap: wrap;
}

.tool-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-secondary);
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 500;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: var(--transition);
}

.tool-btn:hover {
    background: var(--bg-glass);
    color: var(--text-primary);
    border-color: var(--border-active);
}

.tool-btn.active {
    background: rgba(124, 92, 252, 0.15);
    color: var(--accent-light);
    border-color: var(--border-active);
}

.tool-btn.danger:hover {
    background: rgba(255, 77, 106, 0.15);
    color: var(--danger);
    border-color: rgba(255, 77, 106, 0.3);
}

.apply-crop-btn {
    background: linear-gradient(135deg, #00d68f, #00b377) !important;
    color: white !important;
    border-color: #00d68f !important;
    font-weight: 700 !important;
    padding: 10px 20px !important;
    font-size: 14px !important;
    box-shadow: 0 0 20px rgba(0, 214, 143, 0.3);
    animation: cropPulse 2s ease-in-out infinite;
}

.apply-crop-btn:hover {
    background: linear-gradient(135deg, #00e89d, #00c985) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 25px rgba(0, 214, 143, 0.45) !important;
}

@keyframes cropPulse {
    0%, 100% { box-shadow: 0 0 15px rgba(0, 214, 143, 0.25); }
    50% { box-shadow: 0 0 25px rgba(0, 214, 143, 0.45); }
}

.toolbar-divider {
    width: 1px;
    height: 24px;
    background: var(--border-color);
    margin: 0 6px;
}

/* ===================================================
   GEN-Z STUDIO BENTO CONTROLS PANEL (DITTO TO DEMO)
   =================================================== */
.controls-panel {
    background: rgba(255, 255, 255, 0.88) !important;
    border: 1px solid rgba(99, 102, 241, 0.14) !important;
    border-radius: var(--radius-lg);
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.05), 0 0 20px rgba(245, 158, 11, 0.03) !important;
    display: flex;
    flex-direction: column;
    position: relative;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    color: var(--text-primary) !important;
}

/* Constrain height and scroll only when controls-panel contains a dedicated inspector-body (Figma-style editor) */
.editor-grid > .controls-panel:has(.inspector-body),
.controls-panel.has-inspector {
    max-height: calc(100vh - 160px);
    min-height: 550px;
    overflow: hidden;
}

@media (max-width: 960px) {
    .editor-grid > .controls-panel:has(.inspector-body),
    .controls-panel.has-inspector {
        max-height: none !important;
        min-height: auto !important;
        overflow: visible !important;
    }
}

body.dark-theme .controls-panel {
    background: linear-gradient(180deg, rgba(24, 24, 40, 0.96) 0%, rgba(14, 14, 26, 0.98) 100%) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35), 0 0 20px rgba(245, 158, 11, 0.05) !important;
    color: #f8fafc !important;
}

/* Panel Header */
.controls-panel .controls-panel-header {
    padding: 13px 18px;
    background: rgba(0, 0, 0, 0.02) !important;
    border-bottom: 1px solid rgba(99, 102, 241, 0.1) !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

body.dark-theme .controls-panel .controls-panel-header {
    background: rgba(0, 0, 0, 0.3) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.controls-panel .panel-title {
    font-size: 15px;
    font-weight: 800;
    color: var(--text-primary) !important;
    letter-spacing: -0.2px;
    margin: 0;
}

body.dark-theme .controls-panel .panel-title {
    color: #f8fafc !important;
}

.controls-panel .vx-stat-badge {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #94a3b8 !important;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 6px;
    letter-spacing: 0.2px;
}

.controls-panel .vx-reset-btn {
    background: rgba(239, 68, 68, 0.14) !important;
    border: 1px solid rgba(239, 68, 68, 0.45) !important;
    color: #ff5252 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    padding: 5px 12px !important;
    border-radius: 50px !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    box-shadow: 0 2px 10px rgba(239, 68, 68, 0.22) !important;
    user-select: none !important;
    outline: none !important;
    transition: all 0.28s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.controls-panel .vx-reset-btn i {
    font-size: 11.5px !important;
    transition: transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    display: inline-block !important;
    color: inherit !important;
}

.controls-panel .vx-reset-btn:hover {
    color: #ffffff !important;
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
    border-color: #ef4444 !important;
    transform: translateY(-1.5px) scale(1.05) !important;
    box-shadow: 0 4px 18px rgba(239, 68, 68, 0.5) !important;
}

.controls-panel .vx-reset-btn:hover i {
    transform: rotate(180deg) !important;
}

.controls-panel .vx-reset-btn:active {
    transform: translateY(0) scale(0.95) !important;
    box-shadow: 0 2px 6px rgba(239, 68, 68, 0.3) !important;
}

.controls-panel .vx-reset-btn:active i {
    transform: rotate(360deg) !important;
}

/* =========================================
   GEN-Z FLOATING PILL TABS DOCK (THEME-AWARE)
   ========================================= */
.controls-panel .inspector-tabs-dock {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    background: rgba(241, 245, 249, 0.95) !important;
    border: 1px solid rgba(99, 102, 241, 0.14) !important;
    padding: 4px;
    margin: 12px 14px 4px;
    border-radius: 14px;
    gap: 4px;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.04);
}

body.dark-theme .controls-panel .inspector-tabs-dock {
    background: rgba(10, 10, 20, 0.75) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.3);
}

#idcard-tabs-dock,
.idcard-controls .inspector-tabs-dock {
    grid-template-columns: repeat(3, 1fr) !important;
}

#resizer-tabs-nav {
    grid-template-columns: 1.15fr 0.85fr 1.35fr !important;
}

#jpg2pdf-tabs-nav {
    grid-template-columns: 1fr 1fr 1fr !important;
}

#pdf2jpg-tabs-nav {
    grid-template-columns: 0.95fr 1.15fr 1fr !important;
}

.controls-panel .tab-nav-item,
.inspector-tabs-dock .tab-nav-item {
    min-width: 0;
    background: transparent !important;
    border: 1.5px solid transparent !important;
    color: #1e293b !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    padding: 8px 6px;
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    white-space: nowrap;
    letter-spacing: -0.2px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.controls-panel .tab-nav-item i,
.inspector-tabs-dock .tab-nav-item i {
    font-size: 12.5px;
    color: #475569 !important;
    opacity: 0.95;
    transition: all 0.2s ease;
}

body.dark-theme .controls-panel .tab-nav-item,
body.dark-theme .inspector-tabs-dock .tab-nav-item {
    color: #f1f5f9 !important;
}

body.dark-theme .controls-panel .tab-nav-item i,
body.dark-theme .inspector-tabs-dock .tab-nav-item i {
    color: #cbd5e1 !important;
    opacity: 0.95;
}

.controls-panel .tab-nav-item span,
.inspector-tabs-dock .tab-nav-item span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: inherit;
}

.controls-panel .tab-nav-item:hover,
.inspector-tabs-dock .tab-nav-item:hover {
    color: #0f172a !important;
    background: rgba(255, 255, 255, 0.85) !important;
}

.controls-panel .tab-nav-item:hover i,
.inspector-tabs-dock .tab-nav-item:hover i {
    color: #0f172a !important;
}

body.dark-theme .controls-panel .tab-nav-item:hover,
body.dark-theme .inspector-tabs-dock .tab-nav-item:hover {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.08) !important;
}

body.dark-theme .controls-panel .tab-nav-item:hover i,
body.dark-theme .inspector-tabs-dock .tab-nav-item:hover i {
    color: #ffffff !important;
}

.controls-panel .tab-nav-item.active,
.inspector-tabs-dock .tab-nav-item.active {
    background: #ffffff !important;
    color: #b45309 !important;
    border: 1.5px solid rgba(217, 119, 6, 0.45) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 0 12px rgba(245, 158, 11, 0.2) !important;
    font-weight: 900 !important;
}

.controls-panel .tab-nav-item.active i,
.inspector-tabs-dock .tab-nav-item.active i {
    color: #d97706 !important;
    opacity: 1 !important;
}

body.dark-theme .controls-panel .tab-nav-item.active,
body.dark-theme .inspector-tabs-dock .tab-nav-item.active {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.25), rgba(234, 88, 12, 0.18)) !important;
    color: #fbbf24 !important;
    border-color: rgba(245, 158, 11, 0.55) !important;
    box-shadow: 0 2px 10px rgba(245, 158, 11, 0.22) !important;
}

body.dark-theme .controls-panel .tab-nav-item.active i,
body.dark-theme .inspector-tabs-dock .tab-nav-item.active i {
    color: #fbbf24 !important;
    opacity: 1 !important;
}

/* Scrollable Content Body */
.controls-panel .inspector-body {
    flex: 1;
    overflow-y: auto;
    padding: 12px 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.12) transparent;
}

.controls-panel .inspector-body::-webkit-scrollbar {
    width: 5px;
}

.controls-panel .inspector-body::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.12);
    border-radius: 4px;
}

.controls-panel .tab-pane {
    display: flex;
    flex-direction: column;
    gap: 11px;
    animation: tabSlideIn 0.28s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes tabSlideIn {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.985);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Bento Cards */
.controls-panel .bento-card {
    background: rgba(248, 250, 252, 0.85) !important;
    border: 1px solid rgba(99, 102, 241, 0.12) !important;
    border-radius: var(--radius-md);
    padding: 11px 13px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    overflow: visible !important;
}

#jpg2pdf-edit-panel {
    padding: 12px 14px 18px 14px !important;
    overflow: visible !important;
}

#jpg2pdf-edit-panel .adjust-slider {
    margin: 4px 0 6px 0 !important;
}

.controls-panel .bento-card:hover {
    border-color: rgba(245, 158, 11, 0.35) !important;
    background: #ffffff !important;
    box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.08), 0 0 16px rgba(245, 158, 11, 0.08);
}

body.dark-theme .controls-panel .bento-card {
    background: rgba(255, 255, 255, 0.025) !important;
    border-color: rgba(255, 255, 255, 0.07) !important;
}

body.dark-theme .controls-panel .bento-card:hover {
    border-color: rgba(245, 158, 11, 0.35) !important;
    background: rgba(255, 255, 255, 0.035) !important;
    box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.5), 0 0 16px rgba(245, 158, 11, 0.1);
}

.controls-panel .ctrl-label-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.controls-panel .ctrl-sub {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 500;
    text-transform: none;
    letter-spacing: normal;
}

/* Resizer Unit Segmented Tabs (px, cm, mm, in) - Sunburn Yellow Theme */
.vx-unit-segmented-tabs {
    display: flex !important;
    background: #f1f5f9 !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 10px !important;
    padding: 3px !important;
    margin: 8px 0 10px !important;
    gap: 3px !important;
}

body.dark-theme .vx-unit-segmented-tabs {
    background: rgba(0, 0, 0, 0.45) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

.vx-unit-tab-btn {
    flex: 1 !important;
    padding: 7px 10px !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    background: transparent !important;
    border: none !important;
    color: #1e293b !important;
    border-radius: 7px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    outline: none !important;
    font-family: 'Plus Jakarta Sans', sans-serif;
    letter-spacing: -0.1px;
}

.vx-unit-tab-btn:hover {
    color: #0f172a !important;
    background: rgba(0, 0, 0, 0.06) !important;
}

body.dark-theme .vx-unit-tab-btn {
    color: #f1f5f9 !important;
}

body.dark-theme .vx-unit-tab-btn:hover {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.08) !important;
}

.vx-unit-tab-btn.active {
    background: linear-gradient(135deg, #f43f5e, #e11d48) !important;
    color: #ffffff !important;
    font-weight: 900 !important;
    box-shadow: 0 2px 10px rgba(244, 63, 94, 0.4) !important;
}

body.dark-theme .vx-unit-tab-btn.active {
    background: linear-gradient(135deg, #fb7185, #f43f5e) !important;
    color: #ffffff !important;
    font-weight: 900 !important;
    box-shadow: 0 2px 10px rgba(244, 63, 94, 0.4) !important;
}

.vx-dim-unit-suffix {
    color: #f43f5e !important;
    font-weight: 800 !important;
}

.target-kb-pills .quick-pill.active {
    background: #10b981 !important;
    color: #ffffff !important;
    border-color: #10b981 !important;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.35) !important;
}

.preset-btn.quick-pill.active {
    background: #0284c7 !important;
    color: #ffffff !important;
    border-color: #0284c7 !important;
    box-shadow: 0 2px 8px rgba(2, 132, 199, 0.35) !important;
}

/* Universal bold styling for unit tabs & buttons across all tools */
.unit-segmented-tabs {
    display: flex !important;
    background: #f1f5f9 !important;
    border: 1px solid rgba(99, 102, 241, 0.16) !important;
    border-radius: 10px !important;
    padding: 3px !important;
    margin-bottom: 12px !important;
    gap: 3px !important;
}

body.dark-theme .unit-segmented-tabs {
    background: rgba(0, 0, 0, 0.45) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

.unit-tab-btn {
    flex: 1 !important;
    padding: 7px 10px !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    background: transparent !important;
    border: none !important;
    color: #1e293b !important;
    border-radius: 7px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    white-space: nowrap !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
}

body.dark-theme .unit-tab-btn {
    color: #f1f5f9 !important;
}

.unit-tab-btn:hover {
    color: #0f172a !important;
    background: rgba(0, 0, 0, 0.05) !important;
}

body.dark-theme .unit-tab-btn:hover {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.08) !important;
}

.unit-tab-btn.active {
    background: linear-gradient(135deg, #f59e0b, #d97706) !important;
    color: #ffffff !important;
    font-weight: 900 !important;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.35) !important;
}

body.dark-theme .unit-tab-btn.active {
    background: linear-gradient(135deg, #fbbf24, #f59e0b) !important;
    color: #0f172a !important;
    font-weight: 900 !important;
    box-shadow: 0 2px 10px rgba(245, 158, 11, 0.4) !important;
}

/* Universal bold styling for tool mode buttons & options */
.mode-btn,
.bg-opt-btn {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-weight: 800 !important;
}

.mode-btn.active,
.bg-opt-btn.active {
    font-weight: 900 !important;
}

.dimension-box span.vx-dim-unit-suffix,
.dimension-inputs .input-group span.vx-dim-unit-suffix {
    font-size: 11px;
    font-weight: 800;
    color: #d97706 !important;
    font-family: 'Plus Jakarta Sans', sans-serif;
    margin-left: 2px;
}

body.dark-theme .dimension-box span.vx-dim-unit-suffix,
body.dark-theme .dimension-inputs .input-group span.vx-dim-unit-suffix {
    color: #fbbf24 !important;
}

.vx-live-conversion-hint {
    margin-top: 6px;
    padding: 5px 8px;
    background: rgba(245, 158, 11, 0.08) !important;
    border: 1px dashed rgba(245, 158, 11, 0.35) !important;
    border-radius: 6px;
    font-size: 10.5px;
    color: #b45309 !important;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

body.dark-theme .vx-live-conversion-hint {
    color: #fbbf24 !important;
    background: rgba(245, 158, 11, 0.12) !important;
    border-color: rgba(245, 158, 11, 0.3) !important;
}

/* Dimensions Inputs (Demo Bento Style) */
.controls-panel .dimension-box {
    display: flex;
    align-items: center;
    background: #ffffff !important;
    border: 1px solid rgba(99, 102, 241, 0.18) !important;
    border-radius: 10px;
    padding: 5px 10px;
    gap: 6px;
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

body.dark-theme .controls-panel .dimension-box {
    background: rgba(0, 0, 0, 0.45) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

.controls-panel .dimension-box:focus-within {
    border-color: #f59e0b !important;
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.28);
}

.controls-panel .dimension-box span {
    font-size: 11px;
    font-weight: 800;
    color: var(--text-muted);
    font-family: monospace;
}

.controls-panel .dimension-box input {
    width: 100%;
    background: transparent !important;
    border: none !important;
    color: var(--text-primary) !important;
    font-size: 13.5px;
    font-weight: 700;
    outline: none;
    padding: 0;
}

body.dark-theme .controls-panel .dimension-box input {
    color: #f8fafc !important;
}

.controls-panel .custom-dpi-box {
    background: #ffffff !important;
    border: 1px solid rgba(99, 102, 241, 0.18) !important;
    padding: 6px 12px;
}

body.dark-theme .controls-panel .custom-dpi-box {
    background: rgba(0, 0, 0, 0.45) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

.controls-panel .custom-dpi-box input {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary) !important;
}

body.dark-theme .controls-panel .custom-dpi-box input {
    color: #f8fafc !important;
}

.controls-panel .custom-dpi-box input::placeholder {
    color: #64748b;
    font-size: 11.5px;
    font-weight: 500;
}

.controls-panel .ratio-btn {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #f59e0b !important;
    border-radius: 8px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.controls-panel .ratio-btn:hover {
    background: rgba(245, 158, 11, 0.15) !important;
    border-color: #f59e0b !important;
}

.controls-panel .ratio-btn.active {
    background: rgba(245, 158, 11, 0.2) !important;
    border-color: #f59e0b !important;
    color: #fbbf24 !important;
}

/* Target File Size Wrap (Spacious & Easy to Type - Theme-Aware) */
.controls-panel .target-size-wrap {
    display: flex;
    background: #ffffff !important;
    border: 1px solid rgba(99, 102, 241, 0.18) !important;
    border-radius: 10px;
    overflow: hidden;
    height: 38px;
    align-items: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

body.dark-theme .controls-panel .target-size-wrap {
    background: rgba(0, 0, 0, 0.45) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    box-shadow: none;
}

.controls-panel .target-size-wrap:focus-within {
    border-color: #f59e0b !important;
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.28);
}

.controls-panel .target-size-wrap input {
    flex: 1;
    min-width: 0;
    background: transparent !important;
    border: none !important;
    padding: 8px 12px;
    color: var(--text-primary, #0f172a) !important;
    font-size: 13.5px;
    font-weight: 700;
    outline: none;
}

body.dark-theme .controls-panel .target-size-wrap input {
    color: #f8fafc !important;
}

.controls-panel .target-size-wrap input::-webkit-outer-spin-button,
.controls-panel .target-size-wrap input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.controls-panel .target-size-wrap input[type=number] {
    -moz-appearance: textfield;
}

.controls-panel .target-size-wrap select {
    background: rgba(241, 245, 249, 0.85) !important;
    border: none !important;
    border-left: 1px solid rgba(99, 102, 241, 0.18) !important;
    color: var(--text-primary, #0f172a) !important;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 700;
    outline: none;
    cursor: pointer;
    width: auto;
    transition: background 0.2s ease;
}

body.dark-theme .controls-panel .target-size-wrap select {
    background: rgba(0, 0, 0, 0.35) !important;
    border-left: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #f8fafc !important;
}

.controls-panel .target-size-wrap select option {
    background: #ffffff;
    color: #0f172a;
}

body.dark-theme .controls-panel .target-size-wrap select option {
    background: #181828;
    color: #f8fafc;
}

/* Quick Pills (Target File Size & DPI Presets) */
.controls-panel .quick-pills,
.quick-pills {
    display: flex;
    gap: 6px;
    width: 100%;
}

.controls-panel .quick-pill,
.quick-pills .quick-pill {
    flex: 1;
    min-width: 0;
    background: #ffffff !important;
    border: 1.5px solid rgba(99, 102, 241, 0.16) !important;
    color: #1e293b !important;
    font-size: 11.5px;
    font-weight: 800;
    padding: 7px 4px;
    border-radius: 8px;
    cursor: pointer;
    text-align: center;
    white-space: nowrap;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
    font-family: 'Plus Jakarta Sans', sans-serif;
    transition: all 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}

body.dark-theme .controls-panel .quick-pill,
body.dark-theme .quick-pills .quick-pill {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #f1f5f9 !important;
    box-shadow: none;
}

.controls-panel .quick-pill:hover,
.quick-pills .quick-pill:hover {
    border-color: var(--accent, #d97706) !important;
    color: #d97706 !important;
    background: #fffbeb !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(245, 158, 11, 0.15);
}

body.dark-theme .controls-panel .quick-pill:hover,
body.dark-theme .quick-pills .quick-pill:hover {
    border-color: rgba(245, 158, 11, 0.5) !important;
    color: #f8fafc !important;
    background: rgba(255, 255, 255, 0.07) !important;
    box-shadow: none;
}

.controls-panel .quick-pill:active,
.quick-pills .quick-pill:active {
    transform: scale(0.94) !important;
}

/* Active Quick Pill */
.controls-panel .quick-pill.active,
.quick-pills .quick-pill.active,
.controls-panel .quick-pill.active:hover,
.quick-pills .quick-pill.active:hover {
    background: rgba(245, 158, 11, 0.14) !important;
    border: 1.5px solid #d97706 !important;
    color: #b45309 !important;
    font-weight: 800 !important;
    box-shadow: 0 0 12px rgba(245, 158, 11, 0.22) !important;
}

body.dark-theme .controls-panel .quick-pill.active,
body.dark-theme .quick-pills .quick-pill.active,
body.dark-theme .controls-panel .quick-pill.active:hover,
body.dark-theme .quick-pills .quick-pill.active:hover {
    border-color: transparent !important;
    color: #000000 !important;
    background: linear-gradient(135deg, #f59e0b 0%, #ea580c 100%) !important;
    box-shadow: 0 3px 12px rgba(245, 158, 11, 0.35) !important;
}

/* Format Pills / Cards (High Contrast & Theme-Aware) */
.controls-panel .format-options {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 7px;
}

.controls-panel .format-option {
    cursor: pointer;
    user-select: none;
    display: block;
}

.controls-panel .format-option input[type="radio"] {
    display: none;
}

.controls-panel .format-option .format-card {
    background: #ffffff !important;
    border: 1.5px solid rgba(99, 102, 241, 0.16) !important;
    border-radius: 10px;
    padding: 8px 6px !important;
    text-align: center;
    display: block;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

body.dark-theme .controls-panel .format-option .format-card {
    background: rgba(255, 255, 255, 0.03) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: none;
}

.controls-panel .format-option:hover .format-card {
    border-color: var(--accent) !important;
    background: rgba(245, 158, 11, 0.04) !important;
    transform: translateY(-1px);
}

body.dark-theme .controls-panel .format-option:hover .format-card {
    border-color: rgba(255, 255, 255, 0.2) !important;
    background: rgba(255, 255, 255, 0.05) !important;
}

.controls-panel .format-option.active .format-card,
.controls-panel .format-option input:checked + .format-card {
    background: rgba(16, 185, 129, 0.1) !important;
    border-color: #10b981 !important;
    box-shadow: 0 0 14px rgba(16, 185, 129, 0.25) !important;
}

body.dark-theme .controls-panel .format-option.active .format-card,
body.dark-theme .controls-panel .format-option input:checked + .format-card {
    background: rgba(16, 185, 129, 0.15) !important;
    border-color: #10b981 !important;
    box-shadow: 0 0 15px rgba(16, 185, 129, 0.2) !important;
}

.controls-panel .format-card .format-name {
    font-size: 12.5px;
    font-weight: 800;
    display: block;
    color: #0f172a !important; /* Sharp, deep readable text in light mode */
}

body.dark-theme .controls-panel .format-card .format-name {
    color: #f8fafc !important;
}

.controls-panel .format-option.active .format-card .format-name,
.controls-panel .format-option input:checked + .format-card .format-name {
    color: #059669 !important; /* Rich emerald in light mode */
    font-weight: 900;
}

body.dark-theme .controls-panel .format-option.active .format-card .format-name,
body.dark-theme .controls-panel .format-option input:checked + .format-card .format-name {
    color: #fbbf24 !important;
}

.controls-panel .format-card .format-desc {
    font-size: 10px;
    color: #64748b !important;
    margin-top: 1px;
    font-weight: 600;
    display: block;
}

body.dark-theme .controls-panel .format-card .format-desc {
    color: #94a3b8 !important;
}

.controls-panel .format-option.active .format-card .format-desc,
.controls-panel .format-option input:checked + .format-card .format-desc {
    color: #92400e !important;
    font-weight: 700;
}

body.dark-theme .controls-panel .format-option.active .format-card .format-desc,
body.dark-theme .controls-panel .format-option input:checked + .format-card .format-desc {
    color: #fde68a !important;
}

/* Inputs, Sliders & Textboxes in Controls Panel */
.controls-panel .custom-input,
.controls-panel .text-input {
    background: #ffffff !important;
    border: 1px solid rgba(99, 102, 241, 0.18) !important;
    color: #0f172a !important;
    border-radius: 10px;
    padding: 7px 11px;
    font-size: 12.5px;
    font-weight: 600;
    outline: none;
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

body.dark-theme .controls-panel .custom-input,
body.dark-theme .controls-panel .text-input {
    background: rgba(0, 0, 0, 0.45) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #f8fafc !important;
}

.controls-panel .custom-input:focus,
.controls-panel .text-input:focus {
    border-color: #f59e0b !important;
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.28);
}

/* =========================================
   GEN-Z SLIDERS & ADJUSTMENTS (HIGH CONTRAST & THEME-AWARE)
   ========================================= */
.controls-panel .adjustments-group {
    background: rgba(248, 250, 252, 0.85) !important;
    border: 1px solid rgba(99, 102, 241, 0.14) !important;
    border-radius: var(--radius-md) !important;
    padding: 14px 16px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

body.dark-theme .controls-panel .adjustments-group {
    background: rgba(255, 255, 255, 0.025) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

.controls-panel .adjust-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}

.controls-panel .adjust-label {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #0f172a !important; /* Sharp, deep readable text in light mode */
    letter-spacing: 0.1px !important;
}

body.dark-theme .controls-panel .adjust-label {
    color: #e2e8f0 !important; /* Crisp white in dark mode */
}

.controls-panel .adjust-val {
    font-weight: 800 !important;
    color: #b45309 !important; /* Rich amber in light mode */
    background: #ffffff !important;
    border: 1px solid rgba(217, 119, 6, 0.25) !important;
    padding: 1px 7px !important;
    border-radius: 6px !important;
    font-size: 11.5px !important;
    min-width: 28px !important;
    text-align: center !important;
    font-family: monospace, monospace !important;
}

body.dark-theme .controls-panel .adjust-val {
    color: #fbbf24 !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    text-shadow: 0 0 10px rgba(245, 158, 11, 0.4) !important;
}

/* Range Slider Input & Track (Thick, High-Contrast & Clearly Visible) */
.controls-panel input[type="range"],
.controls-panel .adjust-slider,
.controls-panel .quality-slider {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 100% !important;
    height: 7px !important;
    border-radius: 999px !important;
    cursor: pointer !important;
    background: #e2e8f0 !important; /* High contrast light track */
    border: 1px solid #cbd5e1 !important;
    outline: none !important;
    margin: 4px 0 !important;
    transition: background 0.15s ease, border-color 0.15s ease !important;
    touch-action: pan-y !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.06) !important;
}

body.dark-theme .controls-panel input[type="range"],
body.dark-theme .controls-panel .adjust-slider,
body.dark-theme .controls-panel .quality-slider {
    background: rgba(255, 255, 255, 0.22) !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4) !important;
}

.controls-panel input[type="range"]:hover,
.controls-panel .adjust-slider:hover,
.controls-panel .quality-slider:hover {
    background: #cbd5e1 !important;
    border-color: rgba(245, 158, 11, 0.5) !important;
}

body.dark-theme .controls-panel input[type="range"]:hover,
body.dark-theme .controls-panel .adjust-slider:hover,
body.dark-theme .controls-panel .quality-slider:hover {
    background: rgba(255, 255, 255, 0.3) !important;
}

/* Gen-Z Callout Alert (Theme-Aware) */
.genz-callout {
    color: #4338ca !important;
    background: rgba(99, 102, 241, 0.08) !important;
    border-left: 3.5px solid #6366f1 !important;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.45;
}
body.dark-theme .genz-callout {
    color: #c4b5fd !important;
    background: rgba(139, 92, 246, 0.08) !important;
    border-left-color: #8b5cf6 !important;
}

/* 1-Click Auto Enhance Button */
#btn-auto-enhance {
    color: #b45309 !important;
    background: rgba(245, 158, 11, 0.1) !important;
    border: 1.5px solid rgba(245, 158, 11, 0.35) !important;
    font-weight: 800 !important;
    transition: all 0.2s ease !important;
}
#btn-auto-enhance:hover {
    background: rgba(245, 158, 11, 0.18) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.2);
}
body.dark-theme #btn-auto-enhance {
    color: #fbbf24 !important;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.18), rgba(234, 88, 12, 0.14)) !important;
    border-color: rgba(245, 158, 11, 0.4) !important;
}

/* Reset Adjustments Button */
.reset-adjust-btn {
    width: 100%;
    padding: 9px 12px;
    background: rgba(239, 68, 68, 0.08) !important;
    border: 1.5px solid rgba(239, 68, 68, 0.25) !important;
    color: #ef4444 !important;
    font-weight: 700;
    font-size: 12px;
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    transition: all 0.2s ease;
}
.reset-adjust-btn:hover {
    background: #ef4444 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

/* Slider Thumb - Chrome/Safari/Edge/Blink */
.controls-panel input[type="range"]::-webkit-slider-thumb,
.controls-panel .adjust-slider::-webkit-slider-thumb,
.controls-panel .quality-slider::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 20px !important;
    height: 20px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 50%, #ea580c 100%) !important;
    border: 2px solid #ffffff !important;
    cursor: grab !important;
    box-shadow: 0 0 12px rgba(245, 158, 11, 0.85), 0 2px 6px rgba(0, 0, 0, 0.5) !important;
    transition: transform 0.12s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.12s ease !important;
}

.controls-panel input[type="range"]:active::-webkit-slider-thumb,
.controls-panel .adjust-slider:active::-webkit-slider-thumb,
.controls-panel .quality-slider:active::-webkit-slider-thumb {
    transform: scale(1.22) !important;
    cursor: grabbing !important;
    transition: none !important;
}

.controls-panel input[type="range"]::-webkit-slider-thumb:hover,
.controls-panel .adjust-slider::-webkit-slider-thumb:hover,
.controls-panel .quality-slider::-webkit-slider-thumb:hover {
    transform: scale(1.22) !important;
    box-shadow: 0 0 18px rgba(245, 158, 11, 1), 0 0 0 4px rgba(245, 158, 11, 0.3) !important;
}

/* Slider Thumb - Firefox */
.controls-panel input[type="range"]::-moz-range-thumb,
.controls-panel .adjust-slider::-moz-range-thumb,
.controls-panel .quality-slider::-moz-range-thumb {
    width: 20px !important;
    height: 20px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 50%, #ea580c 100%) !important;
    border: 2px solid #ffffff !important;
    cursor: grab !important;
    box-shadow: 0 0 12px rgba(245, 158, 11, 0.85), 0 2px 6px rgba(0, 0, 0, 0.5) !important;
    transition: transform 0.12s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.12s ease !important;
}

.controls-panel input[type="range"]:active::-moz-range-thumb,
.controls-panel .adjust-slider:active::-moz-range-thumb,
.controls-panel .quality-slider:active::-moz-range-thumb {
    transform: scale(1.22) !important;
    cursor: grabbing !important;
    transition: none !important;
}

.controls-panel input[type="range"]::-moz-range-thumb:hover,
.controls-panel .adjust-slider::-moz-range-thumb:hover,
.controls-panel .quality-slider::-moz-range-thumb:hover {
    transform: scale(1.22) !important;
    box-shadow: 0 0 18px rgba(245, 158, 11, 1), 0 0 0 4px rgba(245, 158, 11, 0.3) !important;
}

/* Slider Progress Track (Firefox) */
.controls-panel input[type="range"]::-moz-range-track,
.controls-panel .adjust-slider::-moz-range-track {
    background: rgba(255, 255, 255, 0.22) !important;
    height: 8px !important;
    border-radius: 999px !important;
}

/* Reset Adjustments Button */
.controls-panel .reset-adjust-btn {
    width: 100% !important;
    padding: 10px 14px !important;
    border: 1px solid rgba(239, 68, 68, 0.42) !important;
    background: rgba(239, 68, 68, 0.12) !important;
    color: #ff5252 !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    box-shadow: 0 2px 12px rgba(239, 68, 68, 0.18) !important;
    transition: all 0.28s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    margin-top: 6px !important;
}

.controls-panel .reset-adjust-btn i {
    font-size: 13px !important;
    transition: transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    display: inline-block !important;
    color: inherit !important;
}

.controls-panel .reset-adjust-btn:hover {
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
    border-color: #ef4444 !important;
    color: #ffffff !important;
    transform: translateY(-1.5px) !important;
    box-shadow: 0 6px 20px rgba(239, 68, 68, 0.5) !important;
}

.controls-panel .reset-adjust-btn:hover i {
    transform: rotate(-180deg) !important;
}

.controls-panel .reset-adjust-btn:active {
    transform: translateY(0) scale(0.97) !important;
    box-shadow: 0 2px 6px rgba(239, 68, 68, 0.3) !important;
}

.controls-panel .slider-wrap {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.controls-panel .grid-2col {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px;
}

.controls-panel .grid-2col > * {
    min-width: 0;
}

.controls-panel .genz-callout {
    background: rgba(245, 158, 11, 0.08);
    border-left: 3px solid #f59e0b;
    padding: 8px 12px;
    border-radius: 0 10px 10px 0;
    font-size: 11px;
    color: #fde68a;
    line-height: 1.45;
}

/* Sticky Action Footer */
.controls-panel .inspector-sticky-footer {
    padding: 13px 18px;
    background: rgba(14, 14, 25, 0.98) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    display: flex;
    flex-direction: column;
    gap: 7px;
    box-shadow: 0 -10px 25px rgba(0, 0, 0, 0.4);
    position: sticky;
    bottom: 0;
    z-index: 10;
}

#btn-download,
.controls-panel .download-btn,
.controls-panel .btn-download-primary {
    background: linear-gradient(135deg, #00c853 0%, #059669 100%) !important;
    color: #ffffff !important;
    border: none !important;
    padding: 13px 20px !important;
    border-radius: 12px !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    letter-spacing: 0.3px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: 0 6px 20px rgba(0, 200, 83, 0.35), 0 0 12px rgba(5, 150, 105, 0.15) !important;
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    width: 100%;
    position: relative;
    overflow: hidden;
}

/* Continuous Luminous Shimmer Beam across Download Button */
#btn-download::after,
.controls-panel .download-btn::after,
.controls-panel .btn-download-primary::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -100%;
    width: 45%;
    height: 200%;
    background: linear-gradient(
        60deg,
        transparent,
        rgba(255, 255, 255, 0.38),
        transparent
    );
    transform: rotate(25deg);
    animation: buttonShimmer 3.2s infinite ease-in-out;
    pointer-events: none;
}

@keyframes buttonShimmer {
    0% { left: -100%; }
    35%, 100% { left: 160%; }
}

#btn-download:hover,
.controls-panel .download-btn:hover,
.controls-panel .btn-download-primary:hover {
    transform: translateY(-2px) scale(1.01);
    box-shadow: 0 10px 30px rgba(0, 200, 83, 0.45), 0 0 25px rgba(5, 150, 105, 0.3) !important;
    filter: brightness(1.08);
}

#btn-download:active,
.controls-panel .download-btn:active,
.controls-panel .btn-download-primary:active {
    transform: scale(0.96) !important;
}

.controls-panel .download-subtext {
    font-size: 11px;
    text-align: center;
    color: #64748b !important;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-weight: 600;
}

.controls-panel .dop-prefix-pill {
    padding: 3px 8px;
    font-size: 10.5px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.05);
    color: #94a3b8;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.2s;
}

.controls-panel .dop-prefix-pill:hover {
    border-color: #f59e0b;
    color: #fbbf24;
    background: rgba(245, 158, 11, 0.1);
}

.controls-panel .btn-c-tool {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #94a3b8;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.controls-panel .btn-c-tool:hover {
    color: #f8fafc;
    border-color: rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.08);
}

/* ---- Info Bar ---- */
.info-bar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.info-item {
    background: var(--bg-glass);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
}

.info-label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.info-value {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

/* ---- Control Group ---- */
.control-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.control-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
}

.control-hint {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: -4px;
}

/* ---- Adjustments ---- */
.adjustments-group {
    background: var(--bg-glass);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 14px;
    gap: 12px;
}

.adjust-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.adjust-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
}

.adjust-val {
    font-weight: 700;
    color: var(--accent-light);
    font-size: 12px;
    min-width: 30px;
    text-align: right;
}

.adjust-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 5px;
    background: var(--bg-tertiary);
    border-radius: 3px;
    outline: none;
    border: none;
    padding: 0;
}

.adjust-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    background: var(--accent);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0 8px var(--accent-glow);
    transition: transform 0.15s ease;
}

.adjust-slider::-webkit-slider-thumb:hover {
    transform: scale(1.25);
}

.adjust-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    background: var(--accent);
    border-radius: 50%;
    cursor: pointer;
    border: none;
}

.reset-adjust-btn {
    width: 100%;
    padding: 8px;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-muted);
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 600;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: var(--transition);
    margin-top: 4px;
}

.reset-adjust-btn:hover {
    background: rgba(255, 77, 106, 0.1);
    color: var(--danger);
    border-color: rgba(255, 77, 106, 0.3);
}

/* ---- Inputs ---- */
input[type="number"],
input[type="text"],
select {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 500;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    outline: none;
    transition: var(--transition);
    width: 100%;
}

input[type="number"]:focus,
input[type="text"]:focus,
select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow);
}

select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%238a8a9a' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
}

.text-input {
    width: 100%;
}

/* ---- Dimension inputs ---- */
.dimension-inputs {
    display: flex;
    align-items: center;
    gap: 8px;
}

.input-group {
    flex: 1;
}

.input-group label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.link-btn {
    width: 36px;
    height: 36px;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-secondary);
    border-radius: var(--radius-sm);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
    margin-top: 14px;
    flex-shrink: 0;
}

.link-btn.active {
    background: rgba(124, 92, 252, 0.15);
    color: var(--accent-light);
    border-color: var(--border-active);
}

.link-btn:hover {
    background: var(--bg-glass);
}

/* ---- DPI ---- */
.nav-links {
    display: flex;
    gap: 15px;
    align-items: center;
}

.nav-item-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: var(--accent);
    color: white;
    text-decoration: none;
    border-radius: 14px;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
}

.nav-item-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(59, 130, 246, 0.3);
    background: #2563eb;
}

.dpi-row input {
    flex: 1;
}

.dpi-presets {
    display: flex;
    gap: 4px;
}

.preset-btn {
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-secondary);
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: var(--transition);
}

.preset-btn:hover {
    background: var(--bg-glass);
    color: var(--text-primary);
}

.preset-btn.active {
    background: var(--accent);
    color: white;
    border-color: var(--accent);
}

/* ---- File Size ---- */
.filesize-row {
    display: flex;
    gap: 8px;
}

.filesize-row input { flex: 1; }
.filesize-row select { width: 80px; flex-shrink: 0; }

/* ---- Format ---- */
.format-options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.format-option {
    cursor: pointer;
}

.format-option input {
    display: none;
}

.format-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 8px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    transition: var(--transition);
    text-align: center;
}

.format-option input:checked + .format-card {
    border-color: var(--accent);
    background: rgba(124, 92, 252, 0.1);
    box-shadow: 0 0 15px var(--accent-glow);
}

.format-card:hover {
    border-color: var(--border-active);
    background: var(--bg-glass);
}

.format-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
}

.format-desc {
    font-size: 10px;
    color: var(--text-muted);
    margin-top: 2px;
}

/* ---- Quality Slider ---- */
.quality-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    background: var(--bg-tertiary);
    border-radius: 3px;
    outline: none;
    border: none;
    padding: 0;
}

.quality-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: var(--accent);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0 10px var(--accent-glow);
    transition: transform 0.15s ease;
}

.quality-slider::-webkit-slider-thumb:hover {
    transform: scale(1.2);
}

.quality-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: var(--accent);
    border-radius: 50%;
    cursor: pointer;
    border: none;
    box-shadow: 0 0 10px var(--accent-glow);
}

/* ---- Download Button ---- */
.download-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 13px 20px;
    background: linear-gradient(135deg, #f59e0b 0%, #ea580c 50%, #db2777 100%);
    border: none;
    color: white;
    font-family: 'Inter', sans-serif;
    font-size: 14.5px;
    font-weight: 800;
    letter-spacing: 0.3px;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: var(--transition);
    box-shadow: 0 6px 20px rgba(234, 88, 12, 0.35), 0 0 12px rgba(245, 158, 11, 0.15);
    position: relative;
    overflow: hidden;
}

/* Luminous Shimmer Beam */
.download-btn::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -100%;
    width: 45%;
    height: 200%;
    background: linear-gradient(
        60deg,
        transparent,
        rgba(255, 255, 255, 0.38),
        transparent
    );
    transform: rotate(25deg);
    animation: buttonShimmer 3.2s infinite ease-in-out;
}

@keyframes buttonShimmer {
    0% { left: -100%; }
    35%, 100% { left: 160%; }
}

.download-btn:hover {
    transform: translateY(-2px) scale(1.01);
    box-shadow: 0 10px 30px rgba(234, 88, 12, 0.55), 0 0 25px rgba(245, 158, 11, 0.35);
    filter: brightness(1.08);
}

.download-btn:active {
    transform: scale(0.96) !important;
}

/* ---- Output Info ---- */
.output-info {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
}

/* ---- Footer ---- */
.footer {
    text-align: center;
    padding: 24px;
    color: var(--text-muted);
    font-size: 13px;
    border-top: 1px solid var(--border-color);
}

/* ---- Loading Overlay ---- */
.loading-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(10px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    gap: 16px;
}

.loading-spinner {
    width: 48px;
    height: 48px;
    border: 3px solid var(--border-color);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

/* Static Pages Styling */
.static-card { 
    background: var(--bg-secondary); 
    padding: 50px; 
    border-radius: 28px; 
    border: 1px solid var(--border-color); 
    box-shadow: var(--shadow-lg); 
    max-width: 1000px; 
    margin: 0 auto; 
    animation: fadeIn 0.5s ease; 
}

.premium-title { 
    font-size: 38px; 
    font-weight: 900; 
    margin-bottom: 30px; 
    background: linear-gradient(135deg, var(--text-primary), var(--accent)); 
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent; 
    letter-spacing: -1px; 
}

.legal-text h3 { 
    color: var(--accent-light); 
    margin: 30px 0 15px; 
    font-size: 20px; 
}

.legal-text p, .legal-text li { 
    color: var(--text-secondary); 
    line-height: 1.8; 
    margin-bottom: 15px; 
}

.faq-item { 
    background: rgba(255,255,255,0.03); 
    padding: 25px; 
    border-radius: 16px; 
    margin-bottom: 15px; 
    border: 1px solid var(--border-color); 
}

.faq-item strong { 
    color: var(--accent); 
    display: block; 
    margin-bottom: 10px; 
    font-size: 18px; 
}

/* 3D Contact Page Styling */
.contact-3d-card {
    perspective: 1000px;
    padding: 80px 40px !important;
}

.contact-header-3d {
    text-align: center;
    margin-bottom: 50px;
}

.contact-icon-3d {
    width: 100px;
    height: 100px;
    background: linear-gradient(135deg, var(--accent), #7c3aed);
    border-radius: 30px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    color: white;
    box-shadow: 0 20px 40px rgba(59, 130, 246, 0.4);
    transform: rotateY(20deg) rotateX(10deg);
    animation: float3d 3s ease-in-out infinite;
}

@keyframes float3d {
    0%, 100% { transform: translateY(0) rotateY(20deg) rotateX(10deg); }
    50% { transform: translateY(-15px) rotateY(25deg) rotateX(15deg); }
}

.contact-main-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 40px;
    align-items: start;
}

.info-glass-card {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.info-item-3d {
    display: flex;
    align-items: center;
    gap: 15px;
}

.info-item-3d i {
    width: 45px;
    height: 45px;
    background: rgba(59, 130, 246, 0.1);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    font-size: 20px;
}

.info-item-3d span { display: block; font-size: 13px; color: var(--text-muted); }
.info-item-3d strong { display: block; font-size: 16px; color: var(--text-primary); }

.contact-3d-form {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.input-group-3d {
    position: relative;
}

.input-group-3d input, .input-group-3d textarea {
    width: 100%;
    padding: 15px 15px 15px 45px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    color: white;
    font-size: 15px;
    outline: none;
    transition: all 0.3s ease;
}

.input-group-3d textarea { min-height: 120px; }

.input-group-3d label {
    position: absolute;
    left: 45px;
    top: 15px;
    color: var(--text-muted);
    transition: all 0.3s ease;
    pointer-events: none;
}

.input-group-3d i {
    position: absolute;
    left: 15px;
    top: 18px;
    color: var(--accent);
    font-size: 16px;
    opacity: 0.6;
}

.input-group-3d input:focus, .input-group-3d textarea:focus,
.input-group-3d input:not(:placeholder-shown), .input-group-3d textarea:not(:placeholder-shown) {
    border-color: var(--accent);
    background: rgba(59, 130, 246, 0.05);
}

.input-group-3d input:focus + label, .input-group-3d input:not(:placeholder-shown) + label,
.input-group-3d textarea:focus + label, .input-group-3d textarea:not(:placeholder-shown) + label {
    top: -12px;
    left: 10px;
    font-size: 12px;
    background: var(--bg-secondary);
    padding: 0 8px;
    color: var(--accent);
    border-radius: 4px;
}

.contact-submit-btn {
    padding: 18px;
    background: linear-gradient(135deg, var(--accent), #4f46e5);
    border: none;
    border-radius: 16px;
    color: white;
    font-weight: 800;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    box-shadow: 0 10px 20px rgba(59, 130, 246, 0.3);
    transition: all 0.3s ease;
}

.contact-submit-btn:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 15px 30px rgba(59, 130, 246, 0.5);
}

@media (max-width: 768px) {
    .contact-main-grid { grid-template-columns: 1fr; }
    .contact-3d-card { padding: 40px 20px !important; }
}

.loading-overlay p,
#loading-text {
    font-size: 18px;
    font-weight: 700;
    color: #ffffff;
    text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}

/* ---- Compress / Convert Editor ---- */
.compress-editor,
.convert-editor {
    display: grid;
    grid-template-columns: 1fr minmax(420px, 450px);
    gap: 24px;
    align-items: start;
}

@media (max-width: 900px) {
    .compress-editor,
    .convert-editor {
        grid-template-columns: 1fr;
    }
}

/* Convert & Compress Controls Panel (Smooth 24px Rounded Corners & Inner Padding) */
.convert-editor .controls-panel,
.compress-editor .controls-panel {
    padding: 18px 18px 24px 18px !important;
    max-height: calc(100vh - 120px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    border-radius: 24px !important;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.06), 0 0 20px rgba(245, 158, 11, 0.03) !important;
    scrollbar-width: thin;
}

body.dark-theme .convert-editor .controls-panel,
body.dark-theme .compress-editor .controls-panel {
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45), 0 0 20px rgba(245, 158, 11, 0.05) !important;
}

/* Info Chip */
.convert-info-chip {
    background: #ffffff !important;
    border: 1px solid rgba(99, 102, 241, 0.14) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}

.convert-info-chip .info-chip-label {
    color: #475569 !important;
}

body.dark-theme .convert-info-chip {
    background: rgba(255, 255, 255, 0.03) !important;
    border-color: rgba(255, 255, 255, 0.07) !important;
    box-shadow: none;
}

body.dark-theme .convert-info-chip .info-chip-label {
    color: #94a3b8 !important;
}

/* Rotate Tool Buttons */
.convert-rotate-btn {
    background: #ffffff !important;
    border: 1.5px solid rgba(99, 102, 241, 0.16) !important;
    border-radius: 10px !important;
    color: #1e293b !important;
    font-weight: 700 !important;
    padding: 8px 12px !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    font-size: 12px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;
    transition: all 0.22s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.convert-rotate-btn:hover {
    border-color: #f59e0b !important;
    color: #d97706 !important;
    background: #fffbeb !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 3px 8px rgba(245, 158, 11, 0.18) !important;
}

.convert-rotate-btn:active {
    transform: scale(0.96) !important;
}

body.dark-theme .convert-rotate-btn {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: #f8fafc !important;
    box-shadow: none !important;
}

body.dark-theme .convert-rotate-btn:hover {
    border-color: rgba(245, 158, 11, 0.5) !important;
    color: #fbbf24 !important;
    background: rgba(255, 255, 255, 0.08) !important;
}

/* Adjustments Labels in Convert Tool */
.convert-editor .adjust-label-row span:first-child {
    font-size: 12px;
    font-weight: 700;
    color: #0f172a !important;
}

body.dark-theme .convert-editor .adjust-label-row span:first-child {
    color: #f8fafc !important;
}

/* Action / Download Buttons (Nestled with Proper Margins and Smooth Corners) */
.convert-editor .download-btn,
.compress-editor .download-btn,
#btn-convert-download.download-btn,
#btn-compress-download.download-btn {
    width: 100% !important;
    margin: 8px 0 0 0 !important;
    padding: 13px 20px !important;
    border-radius: 14px !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    letter-spacing: 0.3px !important;
    box-shadow: 0 8px 24px rgba(234, 88, 12, 0.38) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
}

.convert-editor .download-btn:hover,
.compress-editor .download-btn:hover,
#btn-convert-download.download-btn:hover,
#btn-compress-download.download-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 12px 30px rgba(234, 88, 12, 0.55), 0 0 25px rgba(245, 158, 11, 0.35) !important;
}

/* ================================================================
   ⚡ GEN-Z STUDIO BENTO COMPRESSION EDITOR (IMAGE & PDF SUITE)
   Glassmorphism + Neon Cyber Aura + Bento Grid
   ================================================================ */
.genz-compress-editor {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(350px, 420px);
    gap: 24px;
    align-items: start;
}

.genz-compress-editor[style*="display: none"],
.genz-compress-editor[style*="display:none"],
.genz-compress-editor.hidden,
#compress-editor[style*="display: none"],
#compress-editor[style*="display:none"],
#compress-editor.hidden {
    display: none !important;
}

@media (max-width: 960px) {
    .genz-compress-editor {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
}

.compress-preview-col {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
}

.compress-preview-card {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(99, 102, 241, 0.16);
    border-radius: 24px;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.05), 0 0 20px rgba(245, 158, 11, 0.03);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
}

body.dark-theme .compress-preview-card {
    background: rgba(15, 23, 42, 0.85);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
}

.compress-preview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    background: rgba(248, 250, 252, 0.95);
    border-bottom: 1px solid rgba(99, 102, 241, 0.1);
    gap: 10px;
}

body.dark-theme .compress-preview-header {
    background: rgba(255, 255, 255, 0.03);
    border-bottom-color: rgba(255, 255, 255, 0.06);
}

.compress-file-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.compress-type-badge {
    padding: 3px 9px;
    border-radius: 8px;
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: #ffffff;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
}

.compress-type-badge.badge-image {
    background: linear-gradient(135deg, #f59e0b, #ea580c);
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
}

.compress-type-badge.badge-office {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

.compress-name-text {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}

.compress-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.compress-size-pill {
    padding: 3px 10px;
    border-radius: 20px;
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid rgba(245, 158, 11, 0.3);
    color: #d97706;
    font-size: 11px;
    font-weight: 800;
}

body.dark-theme .compress-size-pill {
    background: rgba(245, 158, 11, 0.2);
    color: #fbbf24;
}

.btn-change-file-sm {
    padding: 5px 12px;
    border-radius: 10px;
    background: #ffffff;
    border: 1px solid rgba(99, 102, 241, 0.2);
    color: var(--text-secondary);
    font-size: 11.5px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-change-file-sm:hover {
    background: rgba(245, 158, 11, 0.1);
    color: #ea580c;
    border-color: #ea580c;
    transform: translateY(-1px);
}

body.dark-theme .btn-change-file-sm {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.12);
    color: #cbd5e1;
}

.compress-viewport {
    min-height: 380px;
    max-height: 520px;
    padding: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: radial-gradient(circle at center, rgba(248, 250, 252, 0.8) 0%, rgba(241, 245, 249, 0.8) 100%);
    overflow: auto;
}

body.dark-theme .compress-viewport {
    background: radial-gradient(circle at center, rgba(30, 41, 59, 0.6) 0%, rgba(15, 23, 42, 0.8) 100%);
}

#compress-pdf-canvas,
#compress-preview-img {
    max-width: 100%;
    max-height: 460px;
    object-fit: contain;
    border-radius: 12px;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.14), 0 0 1px rgba(0,0,0,0.1);
    transition: transform 0.25s ease;
}

#compress-pdf-canvas:hover,
#compress-preview-img:hover {
    transform: scale(1.01);
}

.compress-fallback-card {
    text-align: center;
    padding: 30px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.fallback-glow-icon {
    width: 90px;
    height: 90px;
    border-radius: 26px;
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 42px;
    box-shadow: 0 12px 30px rgba(239, 68, 68, 0.35), 0 0 40px rgba(239, 68, 68, 0.2);
}

.fallback-glow-icon.office-mode {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    box-shadow: 0 12px 30px rgba(59, 130, 246, 0.35);
}

.compress-fallback-card h4 {
    font-size: 18px;
    font-weight: 800;
    color: var(--text-primary);
    margin: 0;
}

.compress-fallback-card p {
    font-size: 13px;
    color: var(--text-muted);
    margin: 0;
}

.compress-preview-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 18px;
    background: rgba(248, 250, 252, 0.95);
    border-top: 1px solid rgba(99, 102, 241, 0.1);
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
}

body.dark-theme .compress-preview-footer {
    background: rgba(255, 255, 255, 0.02);
    border-top-color: rgba(255, 255, 255, 0.06);
}

.preview-secure-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #10b981;
}

.preview-pages-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(99, 102, 241, 0.1);
    color: #6366f1;
    padding: 2px 8px;
    border-radius: 8px;
}

/* Preset Chips */
.genz-preset-chip {
    padding: 7px 11px;
    border-radius: 10px;
    background: #ffffff;
    border: 1.5px solid rgba(99, 102, 241, 0.16);
    color: var(--text-primary);
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.genz-preset-chip strong {
    font-weight: 800;
    color: #0f172a;
}

.genz-preset-chip span {
    color: #f59e0b;
    font-weight: 800;
    background: rgba(245, 158, 11, 0.12);
    padding: 1px 5px;
    border-radius: 5px;
}

.genz-preset-chip:hover {
    border-color: #f59e0b;
    background: #fffbeb;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.15);
}

.genz-preset-chip.active {
    background: linear-gradient(135deg, #f59e0b, #ea580c);
    border-color: transparent;
    color: #ffffff;
}

.genz-preset-chip.active strong,
.genz-preset-chip.active span {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.25) !important;
}

body.dark-theme .genz-preset-chip {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.1);
    color: #f1f5f9;
}

body.dark-theme .genz-preset-chip strong {
    color: #ffffff;
}

body.dark-theme .genz-preset-chip:hover {
    background: rgba(245, 158, 11, 0.15);
    border-color: #f59e0b;
}

/* Big Glowing Compress Button */
.btn-compress-glow {
    background: linear-gradient(135deg, #f59e0b 0%, #ea580c 50%, #e11d48 100%) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 10px 25px rgba(234, 88, 12, 0.38), 0 0 20px rgba(245, 158, 11, 0.2) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    transition: all 0.25s ease !important;
}

.btn-compress-glow:hover {
    transform: translateY(-2px) scale(1.01) !important;
    box-shadow: 0 14px 34px rgba(234, 88, 12, 0.55), 0 0 28px rgba(245, 158, 11, 0.35) !important;
}

.genz-result-card {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.08), rgba(6, 182, 212, 0.08)) !important;
    border: 1px solid rgba(16, 185, 129, 0.25) !important;
    border-radius: 16px !important;
    padding: 12px 16px !important;
    margin-top: 10px !important;
}

/* ---- Scrollbar ---- */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: var(--bg-primary);
}

::-webkit-scrollbar-thumb {
    background: var(--bg-tertiary);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

/* ================================================================
   ⚡ GEN-Z FLOATING DOCK BADGE — "Back to SizeFix"
   Glassmorphism + Neon Cyber Aura + Micro-Interactions
   ================================================================ */
.floating-site-link {
    position: fixed;
    bottom: 24px;
    right: 24px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 9px 18px 9px 12px;
    background: rgba(13, 17, 23, 0.85);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    color: #ffffff !important;
    text-decoration: none;
    font-family: 'Plus Jakarta Sans', -apple-system, sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.2px;
    border-radius: 9999px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 
        0 12px 32px -4px rgba(0, 0, 0, 0.65),
        0 0 0 1px rgba(255, 255, 255, 0.06),
        0 0 20px -2px rgba(6, 182, 212, 0.25);
    z-index: 99999;
    cursor: pointer;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    isolation: isolate;
    overflow: hidden;
}

/* Subtle Animated Cyber Glow Border */
.floating-site-link::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 9999px;
    padding: 1.5px;
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.8), rgba(168, 85, 247, 0.8), rgba(244, 63, 94, 0.7));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    opacity: 0.75;
    transition: opacity 0.3s ease;
}

/* Glass Light Shimmer Sweep */
.floating-site-link::after {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
    transform: skewX(-25deg);
    transition: left 0.75s ease;
    pointer-events: none;
}

.floating-site-link:hover::after {
    left: 140%;
}

.floating-site-link:hover {
    transform: translateY(-4px) scale(1.04);
    background: rgba(15, 23, 42, 0.95);
    border-color: rgba(6, 182, 212, 0.6);
    box-shadow: 
        0 18px 45px -6px rgba(0, 0, 0, 0.85),
        0 0 30px rgba(6, 182, 212, 0.55),
        0 0 15px rgba(168, 85, 247, 0.4);
}

.floating-site-link i.fa-globe {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.3), rgba(168, 85, 247, 0.3));
    border: 1px solid rgba(6, 182, 212, 0.5);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: #38bdf8;
    transition: transform 0.35s ease, color 0.35s ease;
}

.floating-site-link:hover i.fa-globe {
    transform: rotate(25deg) scale(1.12);
    color: #67e8f9;
}

.floating-site-link span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #f1f5f9;
    font-weight: 700;
    font-size: 13px;
}

.floating-site-link .fsl-brand {
    background: linear-gradient(135deg, #ffffff 20%, #38bdf8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 800;
}

.floating-site-link .fsl-arrow {
    font-size: 10px;
    color: #94a3b8;
    margin-left: 2px;
    transition: transform 0.25s ease, color 0.25s ease;
}

.floating-site-link:hover .fsl-arrow {
    transform: translate(2px, -2px);
    color: #38bdf8;
}

@media (max-width: 768px) {
    .floating-site-link {
        bottom: 16px;
        right: 16px;
        padding: 8px 14px 8px 10px;
        font-size: 12px;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
    }
    .floating-site-link i.fa-globe {
        width: 20px;
        height: 20px;
        font-size: 10px;
    }
    .floating-site-link span {
        font-size: 12px;
    }
}

/* ================================================================
   🧿 SIZEFIX TOP-BAR NAZAR BATTU (MYSTIC CYBER GUARDIAN)
   ================================================================ */
.sf-topbar-nazar-unit {
    position: relative;
    width: 86px;
    height: 86px;
    border-radius: 50%;
    background: var(--bg-card, #ffffff);
    border: 2.5px solid rgba(56, 189, 248, 0.45);
    box-shadow: 0 8px 26px rgba(56, 189, 248, 0.22), inset 0 0 16px rgba(56, 189, 248, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    user-select: none;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
    animation: sfTopEyeFloat 3.8s ease-in-out infinite alternate;
}

body.dark-theme .sf-topbar-nazar-unit {
    background: #090e1a !important;
    border-color: rgba(56, 189, 248, 0.6) !important;
    box-shadow: 0 8px 30px rgba(56, 189, 248, 0.35), inset 0 0 20px rgba(56, 189, 248, 0.2) !important;
}

.sf-topbar-nazar-unit:hover {
    transform: scale(1.12);
    box-shadow: 0 12px 38px rgba(56, 189, 248, 0.55), inset 0 0 24px rgba(56, 189, 248, 0.3);
    border-color: #38bdf8;
}

@keyframes sfTopEyeFloat {
    0% { transform: translateY(-3px); }
    100% { transform: translateY(3px); }
}

.sf-topbar-radar {
    position: absolute;
    width: 68px;
    height: 68px;
    border-radius: 50%;
    border: 2px solid rgba(56, 189, 248, 0.7);
    pointer-events: none;
    animation: sfRadarPing 3.2s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
.sf-topbar-radar.sf-delay {
    animation-delay: 1.6s;
}
@keyframes sfRadarPing {
    0% { transform: scale(0.85); opacity: 0.95; }
    100% { transform: scale(1.65); opacity: 0; }
}

.sf-topbar-nazar-unit .sf-orbit-layer {
    transform-origin: 90px 90px;
    animation: sfOrbitRotate 14s linear infinite;
}
@keyframes sfOrbitRotate {
    to { transform: rotate(360deg); }
}

.sf-topbar-nazar-unit .sf-eyelid-mask {
    transform-origin: 90px 90px;
    animation: sfBlinkAnimation 4.2s ease-in-out infinite;
}
@keyframes sfBlinkAnimation {
    0%, 93%, 100% { transform: scaleY(1); }
    96% { transform: scaleY(0.04); }
}

.sf-topbar-nazar-unit .sf-pupil-tracker {
    transition: transform 0.08s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transform-origin: 90px 90px;
}

.sf-topbar-nazar-unit .sf-disc-glow {
    filter: drop-shadow(0 0 14px rgba(56, 189, 248, 0.65));
    transition: filter 0.3s;
}
.sf-topbar-nazar-unit:hover .sf-disc-glow {
    filter: drop-shadow(0 0 24px rgba(56, 189, 248, 0.95));
}

/* ── TOOLTIP (HIGH CONTRAST & VISIBLE ON LIGHT + DARK THEMES) ── */
.sf-topbar-tooltip {
    position: absolute;
    top: calc(100% + 14px);
    bottom: auto;
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    background: #080d1a !important;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1.5px solid #fbbf24;
    border-radius: 9999px;
    padding: 8px 18px;
    font-size: 0.86rem;
    font-weight: 800;
    white-space: nowrap;
    box-shadow: 0 12px 35px rgba(0,0,0,0.85), 0 0 22px rgba(251, 191, 36, 0.5);
    opacity: 0;
    pointer-events: none;
    transition: all 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    z-index: 100005;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

.sf-topbar-tooltip::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 6px;
    border-style: solid;
    border-color: transparent transparent #fbbf24 transparent;
}

.sf-topbar-tooltip-text {
    color: #ffffff !important;
    background: linear-gradient(135deg, #ffffff 15%, #fef08a 55%, #f59e0b 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.9)) drop-shadow(0 0 16px rgba(245, 158, 11, 0.5));
    letter-spacing: 0.4px;
    font-size: 0.88rem;
    font-weight: 800;
}

.sf-topbar-nazar-unit:hover .sf-topbar-tooltip {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}


@media (max-width: 768px) {
    .sf-topbar-nazar-unit {
        width: 76px;
        height: 76px;
    }
    .sf-topbar-radar {
        width: 60px;
        height: 60px;
    }
}


/* ---- Responsive ---- */
@media (max-width: 600px) {
    .header-inner {
        padding: 12px 16px;
    }
    .main {
        padding: 16px;
    }
    .upload-area {
        padding: 50px 20px;
    }
    .format-options {
        grid-template-columns: repeat(3, 1fr);
    }
    .tabs-container {
        padding: 6px 10px !important;
        overflow: hidden !important;
        max-width: 100% !important;
        margin-bottom: 15px !important;
        background: transparent !important;
        border: none !important;
    }
    .tabs {
        width: 100% !important;
        max-width: calc(100vw - 20px) !important;
        display: flex !important;
        overflow-x: auto !important;
        scrollbar-width: none !important;
        -webkit-overflow-scrolling: touch !important;
        gap: 5px !important;
        padding: 5px 8px !important;
        border-radius: 50px !important;
        margin: 0 auto !important;
    }
    .tabs::-webkit-scrollbar {
        display: none !important;
    }
    .tab {
        flex: 0 0 auto !important;
        justify-content: center !important;
        padding: 7px 14px !important;
        font-size: 12.5px !important;
        border-radius: 50px !important;
    }
    .tab svg {
        display: inline-block !important;
        width: 14px !important;
        height: 14px !important;
    }
}

/* ---- Toast Notification ---- */
.toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 14px 20px;
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 500;
    box-shadow: var(--shadow-lg);
    z-index: 10000;
    animation: slideInToast 0.3s ease, slideOutToast 0.3s ease 2.7s forwards;
    max-width: 360px;
}

.toast.success { border-left: 3px solid var(--success); }
.toast.error { border-left: 3px solid var(--danger); }
.toast.warning { border-left: 3px solid var(--warning); }

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

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

/* ======== ID CARD PRINT TAB — GEN-Z, THEME-AWARE ======== */

/* ── Layout ── */
.idcard-layout {
    display: grid;
    grid-template-columns: minmax(430px, 460px) 1fr;
    gap: 24px;
    align-items: start;
}
@media (max-width: 980px) {
    .idcard-layout { grid-template-columns: 1fr; }
}

/* ── Sidebar shell ── */
.idcard-controls {
    background: var(--bg-secondary);
    border-radius: 18px;
    border: 1px solid var(--border-color);
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

/* ── Sections (bento-card override inside sidebar) ── */
.idcard-controls .bento-card {
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--border-color);
    border-radius: 0;
    padding: 10px 14px;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transition: background 0.2s ease;
    position: relative;
    overflow: visible;
}
.idcard-controls .bento-card:first-child {
    border-radius: 18px 18px 0 0;
    background: rgba(var(--accent-rgb, 217,119,6), 0.06);
    border-bottom: 1px solid rgba(var(--accent-rgb, 217,119,6), 0.15);
    padding: 12px 14px 10px 14px;
}
.idcard-controls .bento-card:last-of-type { border-bottom: none; }
.idcard-controls .bento-card:hover { transform: none; background: rgba(0,0,0,0.02); box-shadow: none; }
.idcard-controls .bento-card::before { display: none; }

/* ── Header: Title & Desc ── */
.idcard-controls .panel-title {
    font-size: 14px !important;
    font-weight: 800 !important;
    color: var(--text-secondary) !important;
    letter-spacing: -0.3px;
    margin: 0 0 3px 0;
    line-height: 1.2;
}
.idcard-desc {
    font-size: 11.5px;
    color: var(--text-muted);
    line-height: 1.45;
    margin: 0;
}

/* ── Section Labels ── */
.idcard-controls .control-label {
    font-size: 9.5px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.idcard-controls .control-label i {
    font-size: 11px;
    color: var(--accent);
}

/* ── Document Type Buttons ── */
.idtype-options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}
.idtype-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 9px 4px;
    border: 1.5px solid var(--border-color);
    background: var(--bg-glass);
    color: var(--text-muted);
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 700;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    letter-spacing: 0.1px;
}
.idtype-btn i { font-size: 14px; margin-bottom: 1px; }
.idtype-btn small {
    font-size: 8.5px;
    font-weight: 500;
    color: var(--text-muted);
    letter-spacing: 0;
    display: block;
    opacity: 0.8;
}
.idtype-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: rgba(var(--accent-rgb, 217,119,6), 0.06);
}
.idtype-btn.active {
    border-color: var(--accent);
    background: rgba(var(--accent-rgb, 217,119,6), 0.1);
    color: var(--accent);
    box-shadow: 0 0 0 1px rgba(var(--accent-rgb, 217,119,6), 0.2), var(--shadow-sm);
}
.idtype-btn.active small { color: var(--accent); opacity: 0.85; }

/* ── Mode Pills (Dual / Single) ── */
.idcard-mode-pills {
    display: flex;
    background: var(--bg-tertiary);
    padding: 2px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    gap: 2px;
}
.idmode-pill {
    flex: 1;
    padding: 5px 8px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 10.5px;
    font-weight: 700;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    letter-spacing: 0.1px;
    white-space: nowrap;
}
.idmode-pill:hover { color: var(--text-secondary); }
.idmode-pill.active {
    background: var(--accent);
    color: #fff;
    box-shadow: 0 2px 8px rgba(var(--accent-rgb, 217,119,6), 0.4);
}

/* ── Layout/Border Pills ── */
.idcard-pill-group {
    display: flex;
    background: var(--bg-tertiary);
    padding: 2px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    gap: 2px;
}
.layout-pill {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 5px 5px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 700;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    letter-spacing: 0.1px;
}
.layout-pill:hover { color: var(--text-secondary); }
.layout-pill.active {
    background: var(--accent);
    color: #fff;
    box-shadow: 0 2px 8px rgba(var(--accent-rgb, 217,119,6), 0.4);
}

/* ── Checkbox ── */
.idcard-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
}
.idcard-checkbox input { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }

/* ── Card Upload Boxes ── */
.card-uploads { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.card-upload-box {
    position: relative;
    border: 1.5px dashed rgba(var(--accent-rgb, 217,119,6), 0.3);
    border-radius: 10px;
    padding: 10px 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80px;
    overflow: hidden;
    background: rgba(var(--accent-rgb, 217,119,6), 0.03);
}
.card-upload-box:hover {
    border-color: var(--accent);
    background: rgba(var(--accent-rgb, 217,119,6), 0.07);
}

.card-upload-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: var(--text-muted);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.1px;
    text-align: center;
}
.card-upload-placeholder span { color: var(--text-secondary); font-size: 11px; }
.card-upload-placeholder small { color: var(--text-muted); font-size: 9px; font-weight: 500; line-height: 1.3; }

.card-preview-img { width: 100%; height: 100%; max-height: 80px; object-fit: contain; border-radius: 6px; }

.card-action-bar { position: absolute; top: 4px; right: 4px; display: flex; align-items: center; gap: 4px; z-index: 5; }

.card-mini-btn {
    width: 24px; height: 24px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    background: var(--bg-glass);
    backdrop-filter: blur(6px);
    color: var(--text-secondary);
    font-size: 10px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.2s ease;
    box-shadow: var(--shadow-sm);
}
.card-mini-btn:hover { background: var(--accent); color: #fff; transform: translateY(-1px); border-color: var(--accent); }

.card-remove-btn {
    position: relative; top: auto; right: auto;
    width: 24px; height: 24px;
    border-radius: 6px;
    border: 1px solid rgba(239,68,68,0.3);
    background: rgba(239,68,68,0.85);
    color: white; font-size: 10px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.2s ease;
}
.card-remove-btn:hover { background: var(--danger); transform: translateY(-1px); }

.card-uploads-wrapper { position: relative; }

.card-swap-btn {
    display: flex; align-items: center; justify-content: center;
    gap: 6px; width: 100%; margin-top: 6px;
    padding: 6px 10px;
    border-radius: 8px;
    background: var(--bg-glass);
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    font-size: 11px; font-weight: 700;
    cursor: pointer; transition: all 0.2s ease; letter-spacing: 0.1px;
}
.card-swap-btn:hover {
    background: rgba(var(--accent-rgb, 217,119,6), 0.08);
    border-color: var(--accent);
    color: var(--accent);
}

/* ── Copies: scoped number input + preset btns ── */
.idcard-controls input[type="number"]#id-copies {
    background: var(--bg-glass);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 15px; font-weight: 800;
    padding: 5px 8px; text-align: center; width: 56px;
}
.idcard-controls .dpi-presets { display: flex; gap: 4px; flex-wrap: wrap; }
.idcard-controls .preset-btn {
    padding: 5px 10px;
    border-radius: 8px;
    border: 1.5px solid var(--border-color);
    background: var(--bg-glass);
    color: var(--text-muted);
    font-size: 10.5px; font-weight: 700;
    cursor: pointer; transition: all 0.2s ease; letter-spacing: 0.1px;
}
.idcard-controls .preset-btn:hover { border-color: var(--accent); color: var(--accent); }
.idcard-controls .preset-btn.active {
    background: rgba(var(--accent-rgb, 217,119,6), 0.12);
    border-color: var(--accent);
    color: var(--accent);
}

/* ── Action Buttons ── */
.idcard-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    padding: 10px 14px 4px 14px;
}
.idcard-save-btn {
    display: flex; align-items: center; justify-content: center;
    gap: 6px; padding: 9px 8px;
    border: 1.5px solid var(--border-color);
    background: var(--bg-glass);
    color: var(--text-secondary);
    font-family: 'Inter', sans-serif;
    font-size: 11.5px; font-weight: 700;
    border-radius: 10px; cursor: pointer;
    transition: all 0.2s ease; letter-spacing: 0.1px;
}
.jpg-btn:hover { background: rgba(0,214,143,0.1); border-color: var(--success); color: var(--success); }
.pdf-btn:hover { background: rgba(255,77,106,0.1); border-color: var(--danger); color: var(--danger); }

/* ── Print Button (fitted strictly inside the card with margin around it) ── */
#btn-print-sheet.download-btn {
    margin: 6px 14px 14px 14px !important;
    width: calc(100% - 28px) !important;
    max-width: calc(100% - 28px) !important;
    padding: 10px 14px !important;
    border-radius: 10px !important;
    font-size: 12.5px !important;
    font-weight: 800 !important;
    letter-spacing: 0.2px !important;
    display: flex !important;
    box-sizing: border-box !important;
}

/* =========================================================
   DARK THEME OVERRIDES — purple vibe for idcard controls
   ========================================================= */
body.dark-theme .idcard-controls {
    background: linear-gradient(160deg, rgba(18,20,32,0.97) 0%, rgba(24,26,42,0.99) 100%);
    border-color: rgba(255,255,255,0.09);
    box-shadow: 0 4px 32px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.06);
}
body.dark-theme .idcard-controls .bento-card {
    border-bottom-color: rgba(255,255,255,0.06);
}
body.dark-theme .idcard-controls .bento-card:first-child {
    background: linear-gradient(135deg, rgba(124,92,252,0.12) 0%, rgba(99,102,241,0.06) 100%);
    border-bottom-color: rgba(124,92,252,0.2);
}
body.dark-theme .idcard-controls .bento-card:hover {
    background: rgba(255,255,255,0.02);
}
body.dark-theme .idcard-controls .panel-title {
    color: #f1f5f9 !important;
}
body.dark-theme .idcard-desc { color: #64748b; }
body.dark-theme .idcard-controls .control-label { color: #475569; }
body.dark-theme .idcard-controls .control-label i { color: #7c5cfc; }

/* Type buttons — purple in dark */
body.dark-theme .idtype-btn {
    border-color: rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.03);
    color: #64748b;
}
body.dark-theme .idtype-btn:hover {
    border-color: rgba(124,92,252,0.4);
    color: #c4b5fd;
    background: rgba(124,92,252,0.07);
}
body.dark-theme .idtype-btn.active {
    border-color: #7c5cfc;
    background: linear-gradient(135deg, rgba(124,92,252,0.18), rgba(99,102,241,0.1));
    color: #c4b5fd;
    box-shadow: 0 0 0 1px rgba(124,92,252,0.3), 0 4px 12px rgba(124,92,252,0.2);
}
body.dark-theme .idtype-btn.active small { color: #a78bfa; }
body.dark-theme .idtype-btn small { color: #475569; }

/* Pills — purple in dark */
body.dark-theme .idcard-mode-pills,
body.dark-theme .idcard-pill-group {
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.08);
}
body.dark-theme .idmode-pill,
body.dark-theme .layout-pill { color: #64748b; }
body.dark-theme .idmode-pill:hover,
body.dark-theme .layout-pill:hover { color: #cbd5e1; }
body.dark-theme .idmode-pill.active,
body.dark-theme .layout-pill.active {
    background: linear-gradient(135deg, #7c5cfc, #6366f1);
    color: #fff;
    box-shadow: 0 2px 8px rgba(124,92,252,0.45);
}

/* Upload boxes — purple in dark */
body.dark-theme .card-upload-box {
    border-color: rgba(124,92,252,0.28);
    background: rgba(124,92,252,0.03);
}
body.dark-theme .card-upload-box:hover {
    border-color: rgba(124,92,252,0.6);
    background: rgba(124,92,252,0.07);
}
body.dark-theme .card-upload-placeholder { color: #475569; }
body.dark-theme .card-upload-placeholder span { color: #94a3b8; }
body.dark-theme .card-upload-placeholder small { color: #475569; }
body.dark-theme .card-mini-btn {
    border-color: rgba(255,255,255,0.12);
    background: rgba(10,12,24,0.85);
    color: #cbd5e1;
}
body.dark-theme .card-mini-btn:hover { background: #7c5cfc; border-color: #7c5cfc; }
body.dark-theme .card-swap-btn {
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.08);
    color: #64748b;
}
body.dark-theme .card-swap-btn:hover {
    background: rgba(124,92,252,0.1);
    border-color: rgba(124,92,252,0.4);
    color: #c4b5fd;
}

/* Copies — purple in dark */
body.dark-theme .idcard-controls input[type="number"]#id-copies {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.1);
    color: #f1f5f9;
}
body.dark-theme .idcard-controls .preset-btn {
    border-color: rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.04);
    color: #64748b;
}
body.dark-theme .idcard-controls .preset-btn:hover {
    border-color: rgba(124,92,252,0.4);
    color: #c4b5fd;
}
body.dark-theme .idcard-controls .preset-btn.active {
    background: linear-gradient(135deg, rgba(124,92,252,0.25), rgba(99,102,241,0.15));
    border-color: #7c5cfc;
    color: #c4b5fd;
}

/* Action buttons — dark */
body.dark-theme .idcard-save-btn {
    border-color: rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.05);
    color: #cbd5e1;
}

/* A4 Preview */
.a4-preview-wrapper {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 12px;
    width: 100%;
}

.a4-preview-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 4px;
}

.a4-preview {
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    padding: 24px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

.a4-sheet {
    width: 100%;
    max-width: 480px;
    aspect-ratio: 210 / 297;
    background: white;
    border-radius: 4px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.35);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 0;
    gap: 0;
    overflow: hidden;
    box-sizing: border-box;
}

#a4-live-canvas {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    display: block !important;
    border-radius: 4px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.a4-empty-msg {
    color: #999;
    font-size: 14px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.a4-card-pair {
    width: 100%;
    display: flex;
    gap: 10px;
    justify-content: center;
}

.a4-card-img {
    flex: 1;
    max-width: 48%;
    object-fit: contain;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.a4-card-single {
    width: 60%;
    object-fit: contain;
    border: 1px solid #ddd;
    border-radius: 4px;
}

/* ======== PDF TOOLS TAB ======== */
.pdf-dash-title { font-size: 28px; font-weight: 800; text-align: center; margin-bottom: 4px; }
.pdf-dash-subtitle { text-align: center; color: var(--text-muted); font-size: 14px; margin-bottom: 30px; }

.pdf-tools-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    max-width: 960px;
    margin: 0 auto;
}

.pdf-tool-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 28px 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.pdf-tool-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 0%, rgba(255,255,255,0.03), transparent 70%);
    opacity: 0;
    transition: opacity 0.3s;
}

.pdf-tool-card:hover::before { opacity: 1; }

.pdf-tool-card:hover {
    transform: translateY(-6px);
    border-color: rgba(255, 60, 60, 0.3);
    box-shadow: 0 12px 40px rgba(0,0,0,0.3), 0 0 20px rgba(230, 57, 70, 0.1);
}

.pdf-tool-card:active { transform: translateY(-2px) scale(0.98); }

.pdf-tool-icon {
    width: 60px;
    height: 60px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 14px;
    transition: transform 0.3s ease;
}


.pdf-tool-icon img {
    width: 40px !important;
    height: 40px !important;
    object-fit: contain !important;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.15)) !important;
    transition: all 0.3s ease !important;
}

.pdf-tool-card:hover .pdf-tool-icon { transform: scale(1.1) rotate(-3deg); }

.pdf-tool-card:hover .pdf-tool-icon img {
    transform: scale(1.1) rotate(-3deg) !important;
}

.pdf-tool-card h3 { font-size: 16px; font-weight: 700; margin-bottom: 6px; color: var(--text-primary); }
.pdf-tool-card p { font-size: 12px; color: var(--text-muted); }

/* Sub-views */
.pdf-subview { animation: fadeIn 0.3s ease; }
.pdf-subview-title { 
    font-size: 18px !important; 
    font-weight: 800 !important; 
    margin: 0 0 8px 0 !important; 
    text-align: center;
    color: var(--text-primary);
}

.pdf-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-secondary);
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 600;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: var(--transition);
    margin-bottom: 8px;
}

.pdf-back-btn:hover { background: rgba(230,57,70,0.1); color: #e63946; border-color: rgba(230,57,70,0.3); }

.pdf-sub-layout {
    display: flex;
    flex-direction: column;
    gap: 0 !important;
    align-items: center;
    width: 100%;
}

.pdf-preview-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
    width: 100%;
}

/* JPG to PDF Custom Grid Layout (Gen-Z Studio Pro) */
.jpg2pdf-editor-grid {
    display: grid;
    grid-template-columns: minmax(320px, 1fr) 420px;
    gap: 24px;
    align-items: start;
    max-width: 1080px;
    margin: 16px auto 0;
    width: 100%;
}

.jpg2pdf-editor-grid .controls-panel,
.pdf-subview .controls-panel,
.pdf-sub-layout .controls-panel {
    max-height: none !important;
    min-height: auto !important;
    overflow: visible !important;
    height: auto !important;
    padding: 18px 18px 24px 18px !important;
}

.jpg2pdf-editor-grid .download-btn,
.controls-panel .download-btn,
.pdf-subview .download-btn {
    position: relative !important;
    z-index: 10 !important;
    margin-top: 14px !important;
    margin-bottom: 2px !important;
    flex-shrink: 0 !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    visibility: visible !important;
    opacity: 1 !important;
}

@media (max-width: 960px) {
    .jpg2pdf-editor-grid {
        grid-template-columns: 1fr;
        max-width: 100%;
    }
    .jpg2pdf-preview-card {
        position: static !important;
        margin-bottom: 16px;
    }
}

.jpg2pdf-preview-card {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 16px 40px -10px rgba(0, 0, 0, 0.08);
    position: sticky;
    top: 20px;
}
body.dark-theme .jpg2pdf-preview-card,
body.dark-mode .jpg2pdf-preview-card {
    background: rgba(15, 23, 42, 0.85);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.5);
}

/* Comprehensive Text & Form Visibility Across Light and Dark Themes */
.pdf-subview .panel-title,
.pdf-subview label,
.pdf-subview h3,
.pdf-subview .ctrl-label-row span,
.pdf-subview .adjust-label-row span,
.pdf-subview .pdf-status-box {
    color: var(--text-primary) !important;
}

.pdf-subview select,
.controls-panel select {
    background: var(--bg-card, #ffffff) !important;
    color: var(--text-primary, #0f172a) !important;
    border: 1px solid var(--border-color, rgba(0, 0, 0, 0.15)) !important;
}

body.dark-theme .pdf-subview select,
body.dark-theme .controls-panel select {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #f8fafc !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}

.pdf-subview select option,
.controls-panel select option {
    background: #ffffff !important;
    color: #0f172a !important;
}

body.dark-theme .pdf-subview select option,
body.dark-theme .controls-panel select option {
    background: #181828 !important;
    color: #f8fafc !important;
}

#pdf2excel-preview-table,
#excel2pdf-preview-table,
#word2excel-tables-container table {
    width: 100%;
    border-collapse: collapse;
    color: var(--text-primary) !important;
}

#pdf2excel-preview-table th,
#excel2pdf-preview-table th,
#word2excel-tables-container th {
    background: rgba(99, 102, 241, 0.12) !important;
    color: var(--text-primary) !important;
    font-weight: 700;
    padding: 8px 12px;
    border: 1px solid var(--border-color);
}

#pdf2excel-preview-table td,
#excel2pdf-preview-table td,
#word2excel-tables-container td {
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    color: var(--text-primary) !important;
}

.pdf-status-box {
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
}
.jpg2pdf-preview-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding: 0 4px;
}
.jpg2pdf-sheet-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.jpg2pdf-sheet-hint {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 600;
}
.jpg2pdf-sheet-stage {
    min-height: 380px;
    max-height: 480px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle, rgba(241, 245, 249, 0.9) 0%, rgba(226, 232, 240, 0.6) 100%);
    border-radius: 14px;
    border: 1px dashed rgba(0, 0, 0, 0.08);
    padding: 18px;
    overflow: hidden;
}
body.dark-theme .jpg2pdf-sheet-stage,
body.dark-mode .jpg2pdf-sheet-stage {
    background: radial-gradient(circle, rgba(30, 41, 59, 0.8) 0%, rgba(15, 23, 42, 0.9) 100%);
    border-color: rgba(255, 255, 255, 0.08);
}
.jpg2pdf-sheet-paper {
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 16px 36px -4px rgba(0, 0, 0, 0.22), 0 0 0 1px rgba(0, 0, 0, 0.06);
    padding: 12px;
    max-width: 100%;
    max-height: 440px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
}
.jpg2pdf-sheet-paper.is-portrait {
    width: 310px;
    height: 438px;
}
.jpg2pdf-sheet-paper.is-landscape {
    width: 440px;
    height: 311px;
}
.jpg2pdf-sheet-paper.margin-none {
    padding: 0 !important;
}
.jpg2pdf-sheet-paper.margin-small {
    padding: 14px !important;
}
.jpg2pdf-sheet-paper.margin-big {
    padding: 26px !important;
}
.jpg2pdf-sheet-paper img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 4px;
    display: block;
    transition: transform 0.25s ease, filter 0.2s ease;
}
#jpg2pdf-tabs-nav {
    grid-template-columns: repeat(3, 1fr) !important;
    margin: 0 0 12px 0 !important;
}
#jpg2pdf-workspace .bento-card {
    display: flex !important;
}
.jpg2pdf-preview-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
    font-size: 11.5px;
    color: var(--text-muted);
    font-weight: 600;
}

/* ==========================================================================
   PDF to JPG Redesign & Enhanced Workspace Styles
   ========================================================================== */
.pdf2jpg-editor-grid {
    display: grid;
    grid-template-columns: minmax(320px, 1fr) 420px;
    gap: 24px;
    align-items: start;
    max-width: 1040px;
    width: 100%;
    margin: 16px auto 0;
}
@media (max-width: 900px) {
    .pdf2jpg-editor-grid {
        grid-template-columns: 1fr;
    }
}
.pdf2jpg-preview-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-shadow: var(--shadow-md);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
}
.pdf2jpg-preview-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.pdf2jpg-sheet-badge {
    font-size: 11.5px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--accent);
    background: rgba(245, 158, 11, 0.12);
    padding: 4px 10px;
    border-radius: 8px;
    border: 1px solid rgba(245, 158, 11, 0.3);
}
.pdf2jpg-sheet-hint {
    font-size: 11.5px;
    color: var(--text-muted);
    font-weight: 600;
}
.pdf2jpg-sheet-stage {
    background: var(--bg-tertiary);
    border-radius: 14px;
    padding: 20px 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 380px;
    position: relative;
    overflow: hidden;
    border: 1.5px dashed var(--border-color);
}
.pdf2jpg-sheet-paper {
    background: #ffffff;
    border-radius: 4px;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.14), 0 3px 8px rgba(0, 0, 0, 0.06);
    max-width: 100%;
    max-height: 380px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.pdf2jpg-sheet-paper canvas,
.pdf2jpg-sheet-paper img {
    max-width: 100%;
    max-height: 380px;
    object-fit: contain;
    display: block;
}
.pdf2jpg-preview-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
    font-size: 11.5px;
    color: var(--text-muted);
    font-weight: 600;
}
#pdf2jpg-tabs-nav {
    grid-template-columns: repeat(3, 1fr) !important;
    margin: 0 0 12px 0 !important;
}
#pdf2jpg-workspace .bento-card {
    display: flex !important;
    flex-direction: column !important;
}
.pdf2jpg-thumb-grid {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 4px 2px 8px;
    scrollbar-width: thin;
    width: 100%;
}
.pdf2jpg-thumb-grid::-webkit-scrollbar {
    height: 6px;
}
.pdf2jpg-thumb-grid::-webkit-scrollbar-thumb {
    background: rgba(100, 116, 139, 0.2);
    border-radius: 3px;
}
.pdf2jpg-page-card {
    flex: 0 0 74px;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    background: #ffffff;
    padding: 3px;
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}
.pdf2jpg-page-card:hover {
    border-color: var(--warning);
    transform: translateY(-2px);
}
.pdf2jpg-page-card.selected {
    border-color: var(--warning);
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.35);
}
.pdf2jpg-page-card img,
.pdf2jpg-page-card canvas {
    width: 100%;
    height: 85px;
    object-fit: cover;
    border-radius: 4px;
    background: #fff;
}
.pdf2jpg-page-badge {
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(15, 23, 42, 0.8);
    color: #fff;
    font-size: 9.5px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 4px;
    white-space: nowrap;
}
.pdf2jpg-check {
    position: absolute;
    top: 4px;
    left: 4px;
    width: 17px;
    height: 17px;
    background: var(--warning);
    color: #000;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 900;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    z-index: 5;
    transition: all 0.15s ease;
}
.pdf2jpg-delete-btn {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 18px;
    height: 18px;
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.35);
    color: #ef4444;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.18s ease;
    z-index: 5;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}
.pdf2jpg-delete-btn:hover {
    background: #ef4444;
    color: #ffffff;
    border-color: #ef4444;
    transform: scale(1.18);
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.4);
}
.pdf2jpg-download-sub-btn {
    background: rgba(245, 158, 11, 0.08);
    border: 1px solid rgba(245, 158, 11, 0.3);
    color: var(--accent);
    padding: 9px 14px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    width: 100%;
    margin-top: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.2s;
}
.pdf2jpg-download-sub-btn:hover {
    background: rgba(245, 158, 11, 0.16);
}

.nav-page-btn {
    background: var(--bg-card, #ffffff);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    transition: all 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.nav-page-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.action-tool-btn {
    background: var(--bg-card, #ffffff);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    padding: 7px 10px;
    border-radius: 8px;
    font-size: 11.5px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.18s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.action-tool-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.jpg2pdf-horizontal-list {
    display: flex !important;
    gap: 12px;
    overflow-x: auto;
    white-space: nowrap;
    padding: 8px 4px;
    width: 100%;
    grid-template-columns: none !important;
}

.jpg2pdf-horizontal-list .pdf-preview-item {
    flex: 0 0 110px;
    width: 110px;
    margin: 0;
}

.pdf-preview-item {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    overflow: hidden;
    position: relative;
}

.pdf-preview-item img, .pdf-preview-item canvas {
    width: 100%;
    display: block;
}

.pdf-preview-item .pdf-page-label {
    text-align: center;
    padding: 6px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    background: var(--bg-card);
}

.pdf-preview-item .pdf-page-download {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: var(--accent);
    color: white;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s;
}

.pdf-preview-item:hover .pdf-page-download { opacity: 1; }

.pdf-status-box {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 20px;
    width: 100%;
    max-width: 600px;
    text-align: center;
    color: var(--text-secondary);
    font-size: 14px;
}

/* Edit PDF */
.edit-pdf-workspace { width: 100%; }

.edit-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.edit-toolbar input[type="color"] {
    width: 36px;
    height: 36px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    cursor: pointer;
    background: transparent;
    padding: 2px;
}

.edit-pages {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
    margin-bottom: 20px;
}

.edit-page-wrapper {
    position: relative;
    cursor: crosshair;
    box-shadow: var(--shadow-md);
    border-radius: 4px;
    overflow: hidden;
}

.edit-page-wrapper canvas { display: block; max-width: 100%; }

.edit-text-overlay {
    position: absolute;
    cursor: move;
    padding: 2px 6px;
    border: 1px dashed rgba(230,57,70,0.5);
    background: rgba(230,57,70,0.05);
    border-radius: 2px;
    white-space: nowrap;
    user-select: none;
    font-family: 'Inter', sans-serif;
}

/* ======== FOOTER ======== */
.footer {
    border-top: 1px solid var(--border-color);
    background: var(--bg-secondary);
    margin-top: 40px;
}

.footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 24px 20px;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 30px;
}

@media (max-width: 768px) {
    .footer-inner {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

.footer-brand h3 {
    font-size: 20px;
    font-weight: 800;
    margin-bottom: 8px;
    background: linear-gradient(135deg, #e63946, #ff6b6b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.footer-brand p {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.6;
}

.footer-links {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.footer-links h4 {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.footer-links a {
    font-size: 13px;
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.2s;
}

.footer-links a:hover {
    color: #e63946;
}

.footer-bottom {
    border-top: 1px solid var(--border-color);
    padding: 16px 24px;
    text-align: center;
}

.footer-bottom p {
    font-size: 12px;
    color: var(--text-muted);
}

/* ======== STATIC PAGES ======== */
.static-page {
    position: fixed;
    inset: 0;
    background: var(--bg-primary);
    z-index: 200;
    overflow-y: auto;
}

.static-page-inner {
    max-width: 800px;
    margin: 0 auto;
    padding: 40px 24px;
}

.static-page h1 {
    font-size: 28px;
    font-weight: 800;
    margin-bottom: 20px;
}

.static-page h2 {
    font-size: 20px;
    font-weight: 700;
    margin-top: 24px;
    margin-bottom: 10px;
}

.static-page p {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.8;
    margin-bottom: 12px;
}

.static-page ul {
    padding-left: 20px;
    margin-bottom: 12px;
}

.static-page li {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.8;
}

.static-page a {
    color: #e63946;
}

/* ======== CONTACT FORM ======== */
.contact-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 32px;
    margin-top: 24px;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-group label {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 12px 16px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 14px;
    font-family: 'Inter', sans-serif;
    transition: all 0.2s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: #e63946;
    outline: none;
    box-shadow: 0 0 0 3px rgba(230, 57, 70, 0.15);
}

.form-group textarea {
    resize: vertical;
    min-height: 100px;
}

.contact-success {
    text-align: center;
    padding: 40px 20px;
}

.contact-success svg {
    margin-bottom: 16px;
}

.contact-success h3 {
    font-size: 20px;
    font-weight: 800;
    margin-bottom: 12px;
    color: #00d68f;
}

.contact-success p {
    color: var(--text-muted);
    margin-bottom: 24px;
}

/* ======== GLOBAL BACK BUTTON ======== */
.global-back-btn {
    position: fixed;
    top: 20px;
    left: 20px;
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: rgba(26, 27, 35, 0.8);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 100px;
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.global-back-btn:hover {
    background: rgba(230, 57, 70, 0.15);
    border-color: #e63946;
    color: #fff;
    transform: translateY(-2px);
}

@media (max-width: 768px) {
    .global-back-btn {
        top: 15px;
        left: 15px;
        padding: 8px 12px;
        font-size: 13px;
    }
}

/* ======== SCAN ADJUST MODAL (AI DESKEW & SCAN) — GEN-Z BEAUTIFUL ======== */
.scan-modal {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(10, 12, 20, 0.82);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 16px;
    animation: pageFadeIn 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.scan-modal-content {
    background: var(--bg-primary);
    width: 94%;
    height: 90%;
    max-width: 1200px;
    border-radius: 20px;
    display: flex;
    overflow: hidden;
    box-shadow: 0 25px 60px -12px rgba(0, 0, 0, 0.6), 0 0 0 1px var(--border-color);
    border: 1px solid var(--border-color);
    position: relative;
}

.scan-image-area {
    flex: 1;
    background: #07080d;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 24px 20px 80px 20px;
    overflow: hidden;
}

#scan-adjust-canvas {
    max-width: 100%;
    max-height: calc(100% - 20px);
    object-fit: contain;
    border-radius: 6px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
}

/* ── Magnifier Loupe (140px Neon Glass) ── */
.scan-loupe {
    position: absolute;
    display: none;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    border: 3.5px solid #00e5ff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8), 0 0 20px rgba(0, 229, 255, 0.7);
    pointer-events: none;
    z-index: 50;
    transform: translate(-50%, -130%);
    background: #0b0d14;
}

/* ── Interactive Crop Handles (Gen-Z Neon Cyan Crystal Handles) ── */
.scan-crop-handle {
    position: absolute;
    width: 26px;
    height: 26px;
    background: #ffffff;
    border: 3px solid #00e5ff;
    border-radius: 50%;
    pointer-events: auto;
    z-index: 25;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4), 0 0 16px rgba(0, 229, 255, 0.85);
    cursor: grab;
    transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: none;
}
.scan-crop-handle::after {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #00e5ff;
}
.scan-crop-handle:hover {
    transform: translate(-50%, -50%) scale(1.25);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5), 0 0 24px rgba(0, 229, 255, 1);
}
.scan-crop-handle:active,
.scan-crop-handle.active {
    cursor: grabbing;
    transform: translate(-50%, -50%) scale(1.35);
    border-color: #38bdf8;
    box-shadow: 0 0 25px rgba(56, 189, 248, 1);
}

/* ── Floating Quick Toolbar (No Text Overlap, Sleek Glass Pill) ── */
.scan-rotate-tools {
    position: absolute;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(15, 23, 42, 0.88);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    padding: 5px 8px;
    border-radius: 50px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    z-index: 25;
    max-width: 95%;
    flex-wrap: nowrap;
    justify-content: center;
}

.scan-rotate-tools button {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: #e2e8f0;
    height: 36px;
    width: auto !important;
    min-width: auto !important;
    border-radius: 50px !important;
    font-size: 11.5px !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 700 !important;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px;
    padding: 0 13px !important;
    white-space: nowrap !important;
    letter-spacing: 0.2px;
}

.scan-rotate-tools button i {
    font-size: 12.5px;
}

.scan-rotate-tools button:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
    transform: translateY(-1px);
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Icon-only rotate buttons are perfect 36px circles */
#btn-scan-rotate-left,
#btn-scan-rotate-right {
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    font-size: 13.5px !important;
}

#btn-scan-snap-id:hover,
#btn-scan-fit:hover,
#btn-scan-reset:hover {
    background: rgba(245, 158, 11, 0.2);
    border-color: #f59e0b;
    color: #fbbf24;
}

/* Vibrant Straighten / Apply crop button */
#btn-scan-apply-crop {
    background: linear-gradient(135deg, #f59e0b 0%, #ea580c 100%) !important;
    color: #ffffff !important;
    border: none !important;
    font-weight: 800 !important;
    box-shadow: 0 4px 14px rgba(234, 88, 12, 0.45) !important;
    padding: 0 16px !important;
}
#btn-scan-apply-crop:hover {
    filter: brightness(1.1);
    transform: translateY(-1px) scale(1.02);
    box-shadow: 0 6px 18px rgba(234, 88, 12, 0.6) !important;
}

/* ── Right Sidebar ── */
.scan-sidebar {
    width: 360px;
    background: var(--bg-secondary);
    border-left: 1px solid var(--border-color);
    padding: 22px 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 16px;
    overflow-y: auto;
}

.scan-sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border-color);
}
.scan-sidebar-header h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -0.2px;
}
.scan-sidebar-header span {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    color: var(--text-muted);
}

.scan-cancel-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}
.scan-cancel-btn:hover {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
    border-color: rgba(239, 68, 68, 0.3);
    transform: rotate(90deg);
}

/* ── Filter Buttons ── */
.scan-sidebar .control-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.scan-sidebar .control-label i {
    font-size: 11px;
    color: var(--accent);
}

.scan-filters {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin-bottom: 6px;
}

.scan-filter-btn {
    padding: 9px 6px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    font-family: 'Inter', sans-serif;
    border: 1.5px solid var(--border-color);
    background: var(--bg-glass);
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    transition: all 0.2s ease;
    white-space: nowrap;
}
.scan-filter-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: rgba(var(--accent-rgb, 217,119,6), 0.06);
}
.scan-filter-btn.active {
    background: var(--grad-primary);
    border-color: transparent;
    color: #ffffff;
    font-weight: 800;
    box-shadow: 0 4px 14px rgba(var(--accent-rgb, 217,119,6), 0.35);
}

/* ── Sliders Group ── */
.scan-sliders {
    background: var(--bg-glass);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.scan-sliders .control-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
}

.scan-sliders .control-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-secondary);
    margin: 0;
    text-transform: none;
    letter-spacing: 0;
}

.scan-sliders .control-label span:last-child {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    color: var(--accent);
    padding: 1px 7px;
    border-radius: 6px;
    font-size: 10.5px;
    font-weight: 800;
    font-family: monospace;
}

.scan-sliders input[type="range"].adjust-slider {
    width: 100%;
    height: 5px;
    border-radius: 6px;
    background: var(--bg-tertiary);
    outline: none;
    -webkit-appearance: none;
    cursor: pointer;
    margin: 6px 0 2px 0;
}

.scan-sliders input[type="range"].adjust-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--accent);
    border: 2px solid #ffffff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.25);
    cursor: pointer;
    transition: transform 0.15s ease;
}
.scan-sliders input[type="range"].adjust-slider::-webkit-slider-thumb:hover {
    transform: scale(1.2);
}

/* ── Confirm & Use Scan Master Button (Matches Photo Resizer Download Btn) ── */
.scan-confirm-btn {
    background: linear-gradient(135deg, #f59e0b 0%, #ea580c 50%, #db2777 100%);
    color: #ffffff;
    border: none;
    padding: 13px 18px;
    border-radius: 12px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.3px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 6px 20px rgba(234, 88, 12, 0.35);
    margin-top: auto;
    position: relative;
    overflow: hidden;
}

.scan-confirm-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(234, 88, 12, 0.55);
    filter: brightness(1.06);
}
.scan-confirm-btn:active {
    transform: scale(0.97);
}

@media (max-width: 840px) {
    .scan-modal-content { flex-direction: column; height: 95%; width: 95%; }
    .scan-sidebar { width: 100%; padding: 16px; border-left: none; border-top: 1px solid var(--border-color); flex: none; }
    .scan-image-area { flex: 1; min-height: 45vh; padding-bottom: 70px; }
    .scan-rotate-tools { bottom: 12px; padding: 4px 8px; gap: 5px; }
    .scan-rotate-tools button { height: 32px; font-size: 10.5px !important; padding: 0 10px !important; }
    #btn-scan-rotate-left, #btn-scan-rotate-right { width: 32px !important; height: 32px !important; }
}

/* ── Dark Theme Overrides for Scan Modal ── */
body.dark-theme .scan-modal-content {
    background: #0d0f17;
    border-color: rgba(255, 255, 255, 0.08);
}
body.dark-theme .scan-sidebar {
    background: linear-gradient(160deg, rgba(18,20,32,0.97) 0%, rgba(24,26,42,0.99) 100%);
    border-left-color: rgba(255, 255, 255, 0.08);
}
body.dark-theme .scan-filter-btn.active {
    background: linear-gradient(135deg, #7c5cfc, #6366f1);
    box-shadow: 0 4px 14px rgba(124, 92, 252, 0.4);
}
body.dark-theme .scan-confirm-btn {
    background: linear-gradient(135deg, #7c5cfc 0%, #6366f1 50%, #4f46e5 100%);
    box-shadow: 0 6px 20px rgba(124, 92, 252, 0.35);
}
body.dark-theme #btn-scan-apply-crop {
    background: linear-gradient(135deg, #7c5cfc, #6366f1) !important;
    box-shadow: 0 4px 14px rgba(124, 92, 252, 0.4) !important;
}

/* ---- Resume Maker ---- */
.resume-dynamic-block {
    background: rgba(0,0,0,0.15);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: var(--radius-md);
    padding: 16px;
    margin-bottom: 12px;
    position: relative;
}
.resume-dynamic-block .btn-remove {
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgba(230,57,70,0.2);
    color: #e63946;
    border: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.resume-dynamic-block .btn-remove:hover {
    background: #e63946;
    color: #fff;
}
.skill-tag {
    background: rgba(124, 92, 252, 0.2);
    color: #a8a5f8;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.skill-tag button {
    background: none;
    border: none;
    color: currentColor;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
}

/* ---- Bulk JPG Converter ---- */
.bulk-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 12px 16px;
    transition: all 0.2s ease;
}
.bulk-list-item:hover {
    background: rgba(255,255,255,0.02);
    border-color: rgba(255,255,255,0.1);
}
.bulk-item-left {
    display: flex;
    align-items: center;
    gap: 16px;
    overflow: hidden;
}
.bulk-thumb {
    width: 48px;
    height: 48px;
    border-radius: 6px;
    object-fit: cover;
    background: #000;
}
.bulk-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.bulk-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 300px;
}
.bulk-status {
    font-size: 12px;
    color: var(--accent);
    font-weight: 600;
}
.bulk-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ---- Payment QR Generator ---- */
.qr-container {
    max-width: 420px;
    margin: 0 auto;
    border-radius: 24px;
    overflow: hidden;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    box-shadow: 0 20px 40px rgba(0,0,0,0.4);
}
.qr-top-card {
    background: linear-gradient(135deg, #6c5ce7, #a29bfe);
    padding: 16px 20px;
    text-align: center;
    position: relative;
}
.qr-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}
.qr-header button {
    background: rgba(255,255,255,0.2);
    border: none;
    color: white;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: 0.2s;
}
.qr-header button:hover {
    background: rgba(255,255,255,0.3);
}
.qr-code-box {
    width: 180px;
    height: 180px;
    background: white;
    margin: 0 auto 16px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}
.qr-placeholder-text {
    color: #a0a0a0;
    font-size: 14px;
    font-weight: 600;
}
.qr-app-row {
    display: flex;
    justify-content: center;
    gap: 12px;
}
.qr-app-btn {
    background: white;
    border: none;
    padding: 6px 16px;
    border-radius: 30px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    transition: transform 0.2s;
}
.qr-app-btn img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}
.qr-app-btn:hover {
    transform: translateY(-2px);
}
.qr-bottom-card {
    padding: 24px;
}
.qr-amount-section {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 20px;
    text-align: center;
    margin-bottom: 20px;
}
.qr-amount-label {
    font-size: 11px;
    font-weight: 800;
    color: var(--text-muted);
    letter-spacing: 1px;
    display: block;
    margin-bottom: 12px;
}
.qr-amount-display {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 8px;
}
.currency-sym {
    font-size: 32px;
    color: var(--text-muted);
    font-weight: 300;
}
.qr-amount-display input {
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-size: 42px;
    font-weight: 800;
    width: 120px;
    text-align: center;
    outline: none;
}
.qr-amount-display input::-webkit-inner-spin-button,
.qr-amount-display input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.qr-lock-status {
    font-size: 12px;
    font-weight: 600;
    color: #00d68f;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.qr-quick-add {
    display: flex;
    justify-content: space-between;
    gap: 8px;
}
.quick-amt-btn {
    flex: 1;
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 8px 0;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.2s;
}
.quick-amt-btn:hover {
    background: rgba(255,255,255,0.05);
    border-color: var(--accent);
    color: var(--accent);
}
/* ---- Admin Panel Styles ---- */
.admin-panel-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.8); backdrop-filter: blur(10px); z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 20px; }
.admin-dashboard { background: #111; width: 100%; max-width: 900px; border-radius: 20px; border: 1px solid #333; overflow: hidden; display: flex; flex-direction: column; max-height: 90vh; }
.admin-header { padding: 20px 30px; background: #1a1a1a; border-bottom: 1px solid #333; display: flex; justify-content: space-between; align-items: center; }
.admin-title h2 { font-size: 20px; color: white; }
.admin-title span { font-size: 12px; color: #666; }
.admin-content { padding: 30px; overflow-y: auto; }
.admin-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.admin-card { background: #1a1a1a; padding: 20px; border-radius: 12px; border: 1px solid #333; }
.admin-card h3 { font-size: 16px; margin-bottom: 15px; color: #ddd; }
.admin-control { margin-bottom: 15px; }
.switch-label { display: flex; justify-content: space-between; align-items: center; cursor: pointer; }
.admin-save-btn { width: 100%; padding: 12px; background: #3b82f6; color: white; border: none; border-radius: 8px; font-weight: 600; cursor: pointer; margin-top: 10px; }
.admin-close { background: none; border: none; color: #666; font-size: 24px; cursor: pointer; }
.logout-btn { background: #ef4444; color: white; border: none; padding: 8px 16px; border-radius: 6px; font-weight: 600; cursor: pointer; margin-right: 15px; }
/* ---- Announcement Modal — Template #6 Amber Warm Light Theme ---- */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.75); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 20px; }
.announcement-modal { background: #ffffff; width: 100%; max-width: 400px; border-radius: 28px; overflow: hidden; position: relative; box-shadow: 0 2px 4px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.1), 0 32px 64px rgba(0,0,0,0.18); color: #1c1917; animation: annPopIn 0.4s cubic-bezier(0.34,1.56,0.64,1) both; }
@keyframes annPopIn { from { opacity:0; transform:scale(0.88) translateY(20px); } to { opacity:1; transform:scale(1) translateY(0); } }

/* Header */
.ann-header { background: linear-gradient(135deg, #78350f 0%, #92400e 40%, #b45309 100%); padding: 24px 24px 20px; position: relative; overflow: hidden; }
.ann-header::before { content:''; position:absolute; top:-50px; right:-50px; width:180px; height:180px; background:radial-gradient(circle, rgba(251,191,36,0.22), transparent 70%); pointer-events:none; }
.ann-header::after { content:''; position:absolute; bottom:-30px; left:10px; width:120px; height:120px; background:radial-gradient(circle, rgba(255,255,255,0.05), transparent 70%); pointer-events:none; }
.ann-header-toprow { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; position:relative; z-index:1; }
.ann-badge { display:inline-flex; align-items:center; gap:6px; background:rgba(251,191,36,0.18); border:1px solid rgba(251,191,36,0.4); border-radius:100px; padding:5px 14px; font-size:10px; font-weight:700; color:#fbbf24; letter-spacing:0.1em; text-transform:uppercase; font-family:'Plus Jakarta Sans','Inter',sans-serif; }
.ann-badge-dot { width:6px; height:6px; background:#fbbf24; border-radius:50%; animation:annBlink 1.5s ease-in-out infinite; flex-shrink:0; }
@keyframes annBlink { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.4;transform:scale(0.8)} }
.ann-close-btn { width:30px; height:30px; background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.15); border-radius:8px; display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,0.7); font-size:13px; cursor:pointer; transition:background .2s; }
.ann-close-btn:hover { background:rgba(255,255,255,0.2); }
.ann-header-main { display:flex; align-items:center; gap:14px; position:relative; z-index:1; }
.ann-icon { width:52px; height:52px; background:rgba(251,191,36,0.15); border:1.5px solid rgba(251,191,36,0.35); border-radius:16px; display:flex; align-items:center; justify-content:center; font-size:24px; flex-shrink:0; }
.ann-header-title { font-size:20px; font-weight:900; color:#fff; line-height:1.2; margin-bottom:3px; font-family:'Plus Jakarta Sans','Inter',sans-serif; }
.ann-header-title span { color:#fbbf24; }
.ann-header-sub { font-size:11px; color:rgba(255,255,255,0.5); font-weight:500; }

/* Body */
.ann-body { padding: 22px 24px; background: #fff; }
.ann-desc { font-size:13px; color:#57534e; line-height:1.7; margin-bottom:18px; }
.ann-feat-list { display:flex; flex-direction:column; gap:8px; margin-bottom:20px; }
.ann-feat-item { display:flex; align-items:center; gap:12px; padding:11px 13px; background:#fffbeb; border:1px solid #fef3c7; border-radius:12px; transition:background .2s; }
.ann-feat-item:hover { background:#fef9ee; }
.ann-feat-icon { width:32px; height:32px; background:linear-gradient(135deg,#92400e,#b45309); border-radius:9px; display:flex; align-items:center; justify-content:center; font-size:14px; flex-shrink:0; }
.ann-feat-title { font-size:12px; font-weight:700; color:#1c1917; margin-bottom:1px; }
.ann-feat-desc { font-size:11px; color:#a8a29e; font-weight:500; }
.ann-divider { height:1px; background:#f5f5f4; margin-bottom:18px; }
.ann-btn-main { width:100%; padding:14px; background:linear-gradient(135deg,#78350f,#b45309); border:none; border-radius:13px; color:#fbbf24; font-size:14px; font-weight:800; cursor:pointer; font-family:'Plus Jakarta Sans','Inter',sans-serif; letter-spacing:0.02em; transition:transform .2s, box-shadow .2s, opacity .2s; box-shadow:0 6px 20px rgba(120,53,15,0.25); display:flex; align-items:center; justify-content:center; gap:8px; margin-bottom:8px; }
.ann-btn-main:hover { transform:translateY(-2px); box-shadow:0 10px 28px rgba(120,53,15,0.32); }
.ann-arrow { font-size:16px; transition:transform .2s; }
.ann-btn-main:hover .ann-arrow { transform:translateX(4px); }
.ann-btn-skip { width:100%; padding:10px; background:transparent; border:none; color:#a8a29e; font-size:12px; font-weight:600; cursor:pointer; font-family:'Plus Jakarta Sans','Inter',sans-serif; transition:color .2s; text-align:center; display:block; }
.ann-btn-skip:hover { color:#78716c; }
.ann-dont-show { display:flex; align-items:center; gap:8px; justify-content:center; margin-top:10px; font-size:11px; color:#a8a29e; cursor:pointer; font-weight:500; }
.ann-dont-show input { accent-color:#b45309; width:14px; height:14px; cursor:pointer; }

/* Footer */
.ann-footer { padding:13px 24px 16px; background:#fafaf9; border-top:1px solid #f5f5f4; display:flex; align-items:center; justify-content:center; gap:8px; }
.ann-footer-text { font-size:10px; font-weight:700; color:#c4b5a0; letter-spacing:0.12em; text-transform:uppercase; }
.ann-footer-dot { width:3px; height:3px; background:#d6cdc4; border-radius:50%; }
/* ---- Static Page Styles ---- */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    width: 100%;
}

.static-card { background: var(--bg-secondary); border: 1px solid var(--border-color); padding: 40px; border-radius: 20px; margin-bottom: 30px; line-height: 1.8; }
.legal-text h3 { margin-top: 25px; color: var(--accent-light); }
.back-btn { background: var(--bg-tertiary); color: white; border: none; padding: 10px 20px; border-radius: 8px; cursor: pointer; font-weight: 600; margin-bottom: 20px; }

/* ==========================================================================
   ---- Gen-Z Bento Matrix Premium Footer Styles ----
   ========================================================================== */
.footer-premium.footer-genz {
    background: #06070b;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    position: relative;
    padding: 70px 0 40px;
    color: #94a3b8;
    margin-top: 100px;
    overflow: hidden;
}

/* Ambient Top Emerald Glow */
.footer-ambient-glow {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 800px;
    height: 140px;
    background: radial-gradient(ellipse at top, rgba(16, 185, 129, 0.16), transparent 70%);
    pointer-events: none;
}

.footer-container.footer-grid-container {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 24px;
    position: relative;
    z-index: 2;
}

/* Top Bento Hero Matrix Row */
.footer-bento-hero {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr;
    gap: 20px;
    margin-bottom: 50px;
}

.bento-card {
    background: rgba(18, 20, 29, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    padding: 26px;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.bento-card:hover {
    transform: translateY(-4px);
    border-color: rgba(16, 185, 129, 0.4);
    box-shadow: 0 16px 30px -10px rgba(0, 0, 0, 0.5);
}

.bento-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 10% 10%, rgba(255, 255, 255, 0.04), transparent 60%);
    pointer-events: none;
}

.bento-card-highlight {
    border-color: rgba(34, 197, 94, 0.25);
}

/* Bento Card 1: Brand & Logo */
.bento-brand-logo {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
}

.bento-logo-img {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    object-fit: contain;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    padding: 3px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
    flex-shrink: 0;
}

.bento-brand-title h2 {
    font-size: 22px;
    font-weight: 900;
    color: #ffffff;
    letter-spacing: -0.3px;
    line-height: 1.1;
    margin: 0;
}

.bento-brand-title h2 span {
    color: #10b981;
}

.bento-brand-sub {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #64748b;
    display: block;
    margin-top: 3px;
}

.bento-desc {
    font-size: 13.5px;
    line-height: 1.6;
    margin-bottom: 18px;
    color: #94a3b8;
}

.privacy-seal-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 30px;
    font-size: 12px;
    font-weight: 800;
    color: #34d399;
}

/* Bento Card 2: WhatsApp VIP Alert */
.bento-icon-tag {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin-bottom: 14px;
}

.bento-icon-tag.whatsapp-tag {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
}

.bento-icon-tag.support-tag {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
}

.bento-card h3 {
    font-size: 17px;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 8px;
}

.bento-card p {
    font-size: 13px;
    line-height: 1.5;
    margin-bottom: 18px;
    color: #94a3b8;
}

.bento-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
    background: #22c55e;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(34, 197, 94, 0.35);
    transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.bento-cta-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(34, 197, 94, 0.5);
    background: #16a34a;
    color: #ffffff !important;
}

/* Bento Card 3: Email Support */
.bento-email-box {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    margin-top: 8px;
}

.bento-email-box i {
    color: #f59e0b;
    font-size: 16px;
}

.bento-email-box a {
    color: #ffffff;
    text-decoration: none;
    font-weight: 700;
    font-size: 13.5px;
    transition: color 0.2s;
}

.bento-email-box a:hover {
    color: #f59e0b;
}

/* Structured 4-Column Directory Grid */
.footer-columns-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    padding-bottom: 45px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-col-head {
    font-size: 13.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #ffffff;
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.footer-col-head::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(255, 255, 255, 0.08);
}

.footer-nav-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 11px;
    padding: 0;
    margin: 0;
}

.footer-nav-list a {
    color: #94a3b8;
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s;
}

.footer-nav-list a:hover {
    color: #10b981;
    transform: translateX(4px);
}

.footer-nav-list .tag-pill {
    font-size: 10px;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 6px;
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

/* Bottom Copyright & Social Row */
.footer-copyright-row {
    padding-top: 30px;
    margin-top: 0;
    border-top: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

.copyright-text p {
    font-size: 13px;
    font-weight: 500;
    color: #64748b;
    margin: 0;
}

.copyright-text strong {
    color: #94a3b8;
}

.social-pill-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

.social-circle-link {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #94a3b8 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    text-decoration: none;
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.social-circle-link:hover {
    transform: translateY(-3px) scale(1.1);
    color: #ffffff !important;
    border-color: #10b981;
    background: rgba(16, 185, 129, 0.15);
    box-shadow: 0 6px 16px rgba(16, 185, 129, 0.3);
}

/* Legacy Footer Row Base Layout (Fixes 150px collapsed column on desktop) */
.footer-row {
    display: grid !important;
    grid-template-columns: 2fr 1fr 1fr 1fr !important;
    gap: 32px !important;
    margin-bottom: 30px !important;
    width: 100% !important;
}
.footer-col.brand-col {
    max-width: 380px;
}

/* Media Query Support for Bento Footer */
@media (max-width: 1024px) {
    .footer-bento-hero { grid-template-columns: 1fr; }
    .footer-columns-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
    .footer-columns-grid { grid-template-columns: 1fr; }
    .footer-copyright-row { flex-direction: column; text-align: center; }
}

/* ======================================================== */
/* SIZEFIX TOP DOCK NAVIGATION (HOME, PHOTO & SIGNATURE)    */
/* ======================================================== */
.resizer-mode-dock {
    display: flex !important;
    justify-content: center;
    align-items: center;
    margin: 16px auto 26px auto;
    padding: 0 12px;
    position: relative;
    z-index: 25;
    width: 100%;
}
.resizer-mode-dock .dock-container {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-surface, #ffffff);
    border: 1px solid var(--border-light, #e2e8f0);
    padding: 6px 12px;
    border-radius: 50px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06);
    flex-wrap: wrap;
    justify-content: center;
    max-width: 100%;
}
.resizer-mode-dock .dock-pill-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 18px;
    border-radius: 50px;
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 700;
    transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
}
.resizer-mode-dock .dock-btn-home:hover {
    background: rgba(239, 68, 68, 0.16) !important;
    transform: translateY(-1px);
}
.resizer-mode-dock .dock-btn-sig-link:hover,
.resizer-mode-dock .dock-btn-link:hover {
    background: rgba(99, 102, 241, 0.08) !important;
    transform: translateY(-1px);
}
body.dark-theme .resizer-mode-dock .dock-container {
    background: #141624;
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}
body.dark-theme .resizer-mode-dock .dock-btn-link {
    color: #e2e8f0 !important;
}

@media (max-width: 480px) {
    .resizer-mode-dock .dock-container {
        padding: 5px 8px;
        gap: 6px;
    }
    .resizer-mode-dock .dock-pill-btn {
        padding: 7px 12px;
        font-size: 12px;
        gap: 5px;
    }
}

/* ======================================================== */
/* PDF ROTATE & REORDER STUDIO (LARGE PREVIEW & TARGET SIZE)*/
/* ======================================================== */
#subview-pdf-rotate .target-size-field-wrap {
    display: flex !important;
    align-items: center !important;
    border: 2px solid #cbd5e1 !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    overflow: hidden !important;
}
#subview-pdf-rotate #pdf-rotate-target-kb {
    flex: 1 !important;
    width: auto !important;
    min-width: 140px !important;
    border: none !important;
    background: transparent !important;
    padding: 12px 14px !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    outline: none !important;
}
#subview-pdf-rotate #pdf-rotate-target-unit {
    width: 85px !important;
    min-width: 85px !important;
    max-width: 85px !important;
    flex-shrink: 0 !important;
    border: none !important;
    border-left: 2px solid #cbd5e1 !important;
    background: #f8fafc !important;
    padding: 12px 10px !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    outline: none !important;
    cursor: pointer !important;
}
.pdf-rotate-quick-pill {
    padding: 6px 14px !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    border-radius: 20px !important;
    border: 1px solid #cbd5e1 !important;
    background: #f8fafc !important;
    color: #0f172a !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}
.pdf-rotate-quick-pill:hover {
    border-color: #00c853 !important;
    color: #00c853 !important;
    transform: translateY(-1px);
}
.pdf-rotate-quick-pill.active {
    background: #00c853 !important;
    color: #ffffff !important;
    border-color: #00c853 !important;
    box-shadow: 0 2px 10px rgba(0, 200, 83, 0.35) !important;
}

body.dark-theme #subview-pdf-rotate .target-size-field-wrap {
    background: #141624 !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}
body.dark-theme #subview-pdf-rotate #pdf-rotate-target-kb {
    color: #f8fafc !important;
}
body.dark-theme #subview-pdf-rotate #pdf-rotate-target-unit {
    background: rgba(255, 255, 255, 0.06) !important;
    border-left-color: rgba(255, 255, 255, 0.15) !important;
    color: #f8fafc !important;
}
body.dark-theme .pdf-rotate-quick-pill {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #cbd5e1 !important;
}

/* ======================================================== */
/* PDF MERGE STUDIO PRO (GEN-Z SWIPE, CARDS & TARGET SIZE)  */
/* ======================================================== */
#subview-pdf-merge .target-size-field-wrap {
    display: flex !important;
    align-items: center !important;
    border: 2px solid #cbd5e1 !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    overflow: hidden !important;
}
#subview-pdf-merge #pdf-merge-target-size {
    flex: 1 !important;
    width: auto !important;
    min-width: 140px !important;
    border: none !important;
    background: transparent !important;
    padding: 12px 14px !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    outline: none !important;
}
#subview-pdf-merge #pdf-merge-target-unit {
    width: 85px !important;
    min-width: 85px !important;
    max-width: 85px !important;
    flex-shrink: 0 !important;
    border: none !important;
    border-left: 2px solid #cbd5e1 !important;
    background: #f8fafc !important;
    padding: 12px 10px !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    outline: none !important;
    cursor: pointer !important;
}
.pdf-merge-quick-pill {
    padding: 6px 14px !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    border-radius: 20px !important;
    border: 1px solid #cbd5e1 !important;
    background: #f8fafc !important;
    color: #0f172a !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}
.pdf-merge-quick-pill:hover {
    border-color: #f59e0b !important;
    color: #ea580c !important;
    transform: translateY(-1px);
}
.pdf-merge-quick-pill.active {
    background: linear-gradient(135deg, #f59e0b, #ea580c) !important;
    color: #ffffff !important;
    border-color: transparent !important;
    box-shadow: 0 2px 10px rgba(245, 158, 11, 0.35) !important;
}

body.dark-theme #subview-pdf-merge .target-size-field-wrap {
    background: #141624 !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}
body.dark-theme #subview-pdf-merge #pdf-merge-target-size {
    color: #f8fafc !important;
}
body.dark-theme #subview-pdf-merge #pdf-merge-target-unit {
    background: rgba(255, 255, 255, 0.06) !important;
    border-left-color: rgba(255, 255, 255, 0.15) !important;
    color: #f8fafc !important;
}
body.dark-theme .pdf-merge-quick-pill {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #cbd5e1 !important;
}

/* Gen-Z PDF Merge Cards */
.pdf-merge-card {
    background: var(--bg-card, #ffffff);
    border: 1.5px solid var(--border-color, #e2e8f0);
    border-radius: 16px;
    padding: 12px;
    width: 175px;
    min-width: 165px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
    transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
    cursor: grab;
    position: relative;
    user-select: none;
}
.pdf-merge-card:active {
    cursor: grabbing;
}
.pdf-merge-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(245, 158, 11, 0.16);
    border-color: rgba(245, 158, 11, 0.45);
}
.pdf-merge-card.dragging {
    opacity: 0.4;
    transform: scale(0.95);
    border: 2px dashed #f59e0b !important;
}
.pdf-merge-card.drag-over {
    border-color: #f59e0b !important;
    background: rgba(245, 158, 11, 0.08) !important;
    transform: scale(1.04);
}

.pdf-merge-card-header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 4px;
}
.pdf-merge-order-badge {
    background: linear-gradient(135deg, #f59e0b, #ea580c);
    color: #ffffff;
    font-size: 11px;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 20px;
    box-shadow: 0 2px 6px rgba(245, 158, 11, 0.35);
}
.pdf-merge-pages-badge {
    background: rgba(3, 105, 161, 0.1);
    color: #0284c7;
    border: 1px solid rgba(2, 132, 199, 0.2);
    font-size: 10.5px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 12px;
}
.pdf-merge-del-btn {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: none;
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}
.pdf-merge-del-btn:hover {
    background: #ef4444;
    color: #ffffff;
    transform: scale(1.1);
}

.pdf-merge-thumb-wrap {
    width: 100%;
    height: 160px;
    border-radius: 10px;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow: inset 0 0 6px rgba(0,0,0,0.03);
}
.pdf-merge-thumb-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
.pdf-merge-thumb-spinner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--text-muted, #64748b);
    font-size: 11px;
    font-weight: 700;
}

.pdf-merge-card-name {
    width: 100%;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-heading, #0f172a);
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 4px;
}
.pdf-merge-card-size {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--text-muted, #64748b);
}

.pdf-merge-actions-row {
    width: 100%;
    display: flex;
    gap: 6px;
    justify-content: space-between;
    margin-top: 6px;
}
.pdf-merge-move-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 6px 4px;
    font-size: 11px;
    font-weight: 700;
    border-radius: 8px;
    border: 1px solid var(--border-color, #cbd5e1);
    background: var(--bg-subtle, #f8fafc);
    color: var(--text-primary, #0f172a);
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
}
.pdf-merge-move-btn:hover:not(:disabled) {
    background: #f59e0b;
    color: #ffffff;
    border-color: #f59e0b;
    transform: translateY(-1px);
}
.pdf-merge-move-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

body.dark-theme .pdf-merge-card {
    background: #141624 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}
body.dark-theme .pdf-merge-card:hover {
    border-color: #f59e0b !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.6) !important;
}
body.dark-theme .pdf-merge-card-name {
    color: #f8fafc !important;
}
body.dark-theme .pdf-merge-thumb-wrap {
    background: #1e2238 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}
body.dark-theme .pdf-merge-move-btn {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #cbd5e1 !important;
}
body.dark-theme .pdf-merge-move-btn:hover:not(:disabled) {
    background: #f59e0b !important;
    color: #ffffff !important;
}

/* Rotate & Zoom Button on PDF Merge Card */
.pdf-merge-rotate-btn {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: none;
    background: rgba(245, 158, 11, 0.15);
    color: #d97706;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}
.pdf-merge-rotate-btn:hover {
    background: #f59e0b;
    color: #ffffff;
    transform: rotate(90deg);
}

.pdf-merge-thumb-wrap {
    cursor: pointer;
}
.pdf-merge-thumb-wrap:hover .pdf-merge-zoom-chip {
    opacity: 1;
    transform: translateY(0);
}
.pdf-merge-zoom-chip {
    position: absolute;
    bottom: 8px;
    background: rgba(15, 23, 42, 0.75);
    backdrop-filter: blur(4px);
    color: #ffffff;
    font-size: 10.5px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 20px;
    opacity: 0;
    transform: translateY(6px);
    transition: all 0.2s ease;
    pointer-events: none;
    display: flex;
    align-items: center;
    gap: 4px;
}

.pdf-merge-sort-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 14px;
    font-size: 12.5px;
    font-weight: 700;
    border-radius: 10px;
    border: 1px solid var(--border-color, #cbd5e1);
    background: var(--bg-card, #ffffff);
    color: var(--text-primary, #0f172a);
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
}
.pdf-merge-sort-btn:hover {
    background: #fef3c7;
    color: #b45309;
    border-color: #fde68a;
    transform: translateY(-1px);
}

/* PDF Merge Zoom Modal */
.pdf-merge-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.pdf-merge-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.75);
    backdrop-filter: blur(6px);
}
.pdf-merge-modal-dialog {
    position: relative;
    z-index: 2;
    background: var(--bg-card, #ffffff);
    border-radius: 18px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
    border: 1px solid var(--border-light, #e2e8f0);
    max-width: 90vw;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: modalPopIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes modalPopIn {
    0% { opacity: 0; transform: scale(0.92); }
    100% { opacity: 1; transform: scale(1); }
}
.pdf-merge-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border-light, #e2e8f0);
    background: var(--bg-subtle, #f8fafc);
}
.pdf-merge-modal-body {
    padding: 20px;
    overflow-y: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    background: var(--bg-primary, #f1f5f9);
}
.pdf-merge-modal-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    border-top: 1px solid var(--border-light, #e2e8f0);
    background: var(--bg-subtle, #f8fafc);
}
.pdf-merge-modal-close {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}
.pdf-merge-modal-close:hover {
    background: #ef4444;
    color: #ffffff;
}
.pdf-merge-modal-rotate {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 8px;
    border: 1px solid #fde68a;
    background: #fef3c7;
    color: #b45309;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}
.pdf-merge-modal-rotate:hover {
    background: #f59e0b;
    color: #ffffff;
}

body.dark-theme .pdf-merge-modal-dialog {
    background: #141624 !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}
body.dark-theme .pdf-merge-modal-header,
body.dark-theme .pdf-merge-modal-footer {
    background: #1e2238 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}
body.dark-theme .pdf-merge-modal-body {
    background: #0b0c16 !important;
}
body.dark-theme .pdf-merge-sort-btn {
    background: #1e2238 !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #cbd5e1 !important;
}
body.dark-theme .pdf-merge-sort-btn:hover {
    background: rgba(245, 158, 11, 0.2) !important;
    color: #f59e0b !important;
    border-color: #f59e0b !important;
}


/* ---- Coming Soon Card Styles ---- */
.coming-soon-card {
    opacity: 0.7;
    filter: grayscale(0.5);
    cursor: not-allowed !important;
    pointer-events: none;
    position: relative;
    overflow: hidden;
}

.coming-soon-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.1);
    z-index: 10;
}

/* ---- Admin Lock Button Styles ---- */
.admin-lock-btn {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.1);
    color: #64748b;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: 0.3s;
}
.admin-lock-btn:hover {
    background: rgba(239, 68, 68, 0.1);
    border-color: #ef4444;
    color: #ef4444;
}
.admin-lock-btn svg { opacity: 0.6; }
.admin-lock-btn:hover svg { opacity: 1; }


/* ---- Dashboard Top Bar (Clock & Theme) ---- */
.dash-top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    padding: 15px 20px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.dash-clock-area {
    display: flex;
    flex-direction: column;
}

#dash-time {
    font-size: 32px;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1;
}

#dash-date {
    font-size: 14px;
    color: var(--text-secondary);
    font-weight: 600;
}

.dash-actions-right {
    display: flex;
    align-items: center;
    gap: 15px;
}

.theme-toggle-btn {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition);
    font-size: 20px;
}

.theme-toggle-btn:hover {
    background: var(--accent);
    color: white;
    transform: rotate(15deg);
}

/* ---- SizeFix Promo Bar (Long Box) ---- */
.sizefix-promo-bar {
    width: 100%;
    background: linear-gradient(90deg, #fff, #f0f7ff);
    border: 1px solid #cce3ff;
    padding: 20px 30px;
    border-radius: var(--radius-lg);
    margin: 30px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: var(--transition);
    box-shadow: 0 10px 30px rgba(0, 122, 255, 0.08);
}

body.light-theme .sizefix-promo-bar {
    background: linear-gradient(90deg, #f0f7ff, #e6f0ff);
}

.sizefix-promo-bar:hover {
    transform: translateY(-4px);
    box-shadow: 0 15px 40px rgba(0, 122, 255, 0.15);
    border-color: #007aff;
}

.sizefix-promo-left {
    display: flex;
    align-items: center;
    gap: 20px;
}

.sizefix-promo-icon {
    width: 50px;
    height: 50px;
    background: #007aff;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 24px;
}

.sizefix-promo-text h4 {
    color: #001a33;
    font-size: 18px;
    font-weight: 800;
    margin-bottom: 2px;
}

.sizefix-promo-text p {
    color: #4b5563;
    font-size: 14px;
    font-weight: 500;
}

.sizefix-promo-btn {
    background: #007aff;
    color: white;
    padding: 10px 20px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 14px;
}

/* ---- Live Stats Counter ---- */
.live-stats-area {
    margin-top: 50px;
    text-align: center;
    padding: 30px;
    background: var(--bg-glass);
    border-radius: var(--radius-xl);
    border: 1px dashed var(--border-color);
}

.stats-grid {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-top: 15px;
}

.stat-item {
    display: flex;
    flex-direction: column;
}

.stat-value {
    font-size: 28px;
    font-weight: 900;
    color: var(--accent-light);
}

.stat-label {
    font-size: 12px;
    color: var(--text-muted);
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 1px;
}

/* ---- Social Proof Notifications ---- */
.social-proof-container {
    position: fixed;
    bottom: 24px;
    left: 24px;
    z-index: 10001;
    display: flex;
    flex-direction: column;
    gap: 12px;
    pointer-events: none;
}

.social-toast {
    background: rgba(15, 23, 42, 0.9);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 12px 16px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    min-width: 280px;
    animation: slideInLeft 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    transition: all 0.5s ease;
    pointer-events: auto;
}

.social-toast.fade-out {
    opacity: 0;
    transform: translateX(-20px);
}

.social-toast-icon {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.social-toast-content {
    flex-grow: 1;
}

.social-toast-title {
    font-size: 13px;
    font-weight: 700;
    color: white;
    margin-bottom: 2px;
}

.social-toast-desc {
    font-size: 12px;
    color: #94a3b8;
}

.social-toast-time {
    font-size: 10px;
    color: #64748b;
    font-weight: 600;
    margin-left: auto;
}

@keyframes slideInLeft {
    from { transform: translateX(-100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@media (max-width: 768px) {
    .social-proof-container {
        bottom: 95px; /* Above mobile UI elements, perfectly centered */
        left: 50%;
        transform: translateX(-50%);
        right: auto;
        width: 100%;
        max-width: 320px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .social-toast {
        min-width: unset;
        width: calc(100% - 16px);
        max-width: 300px;
        padding: 8px 12px;
        gap: 10px;
        border-radius: 12px;
    }
    .social-toast-icon {
        width: 32px;
        height: 32px;
        font-size: 16px;
        border-radius: 8px;
    }
    .social-toast-title {
        font-size: 12px;
        margin-bottom: 0px;
    }
    .social-toast-desc {
        font-size: 11px;
    }
    .social-toast-time {
        font-size: 9px;
    }
}

/* ========================================
   Age Calculator Premium Layout Customization
   ======================================== */

/* Uppercase date input text */
#age-dob, #age-target {
    text-transform: uppercase !important;
}
#age-dob::-webkit-datetime-edit,
#age-target::-webkit-datetime-edit,
#age-dob::-webkit-datetime-edit-fields-wrapper,
#age-target::-webkit-datetime-edit-fields-wrapper,
#age-dob::-webkit-datetime-edit-text,
#age-target::-webkit-datetime-edit-text,
#age-dob::-webkit-datetime-edit-month-field,
#age-target::-webkit-datetime-edit-month-field,
#age-dob::-webkit-datetime-edit-day-field,
#age-target::-webkit-datetime-edit-day-field,
#age-dob::-webkit-datetime-edit-year-field,
#age-target::-webkit-datetime-edit-year-field {
    text-transform: uppercase !important;
}

/* Statistics Grid Layout (12-Column Responsive System with 3D Perspective) */
.age-stats-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 16px;
    margin-top: 15px;
    perspective: 1500px; /* Enable 3D perspective for cards */
}

/* Stats Card Glassmorphism Design with 3D preserve capability */
.age-stat-card {
    grid-column: span 3; /* Default spans 3 of 12 columns (4 equal cards) */
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 22px 10px; /* Reduced side padding slightly for better fit */
    border-radius: 20px;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1); /* Ultra-smooth 3D transition */
    box-shadow: var(--shadow-sm);
    overflow: visible; /* Crucial to allow 3D floating popouts without edge clipping */
    min-height: 110px;
    text-align: center;
    transform-style: preserve-3d; /* Nested 3D space for label & value */
    backface-visibility: hidden;
}

/* Specific spans to make Seconds card wider (4 columns) and Leap card smaller (2 columns) */
.age-stat-card.age-card-seconds {
    grid-column: span 4; /* Made 33% wider than other cards */
}
.age-stat-card.age-card-leap {
    grid-column: span 2; /* Leap years has small digits so can be smaller */
}

/* Hover effects: 3D Holographic Tilt and Dual Glowing Shadows */
.age-stat-card:hover {
    transform: translateY(-10px) rotateX(10deg) rotateY(-5deg); /* Professional 3D Tilt */
    box-shadow: 
        0 20px 40px -10px rgba(0, 0, 0, 0.15), 
        0 15px 25px -10px var(--card-glow);
    border-color: var(--card-glow-border);
}

/* Parallax Depth: Label floats in middle layer */
.age-stat-label {
    font-size: 11px;
    font-weight: 800;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 5px;
    z-index: 2;
    opacity: 0.9;
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    transform: translateZ(15px); /* Float in 3D space */
}

/* Parallax Depth: Value floats in high layer */
.age-stat-value {
    font-size: 26px;
    font-weight: 900;
    color: var(--text-primary);
    z-index: 2;
    letter-spacing: -0.5px;
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    transform: translateZ(25px); /* Float higher in 3D space */
}

/* On hover, pop the elements even further out along Z-axis! */
.age-stat-card:hover .age-stat-label {
    transform: translateZ(25px);
}
.age-stat-card:hover .age-stat-value {
    transform: translateZ(40px);
}

/* Font sizing optimizations for long numbers to assurance zero truncation */
#stat-total-seconds {
    font-size: 21px !important;
}
#stat-total-minutes {
    font-size: 24px !important;
}

/* Subtle background glowing circles */
.age-stat-card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, var(--card-glow) 0%, transparent 65%);
    opacity: 0.08;
    transition: opacity 0.4s ease;
    pointer-events: none;
    z-index: 1;
}

.age-stat-card:hover::before {
    opacity: 0.16;
}

/* Color palettes with variable definitions for themes */
.age-card-years {
    --card-glow: #ff2e93;
    --card-glow-border: rgba(255, 46, 147, 0.4);
}
.age-card-months {
    --card-glow: #10b981;
    --card-glow-border: rgba(16, 185, 129, 0.4);
}
.age-card-weeks {
    --card-glow: #8b5cf6;
    --card-glow-border: rgba(139, 92, 246, 0.4);
}
.age-card-days {
    --card-glow: #06b6d4;
    --card-glow-border: rgba(6, 182, 212, 0.4);
}
.age-card-hours {
    --card-glow: #ef4444;
    --card-glow-border: rgba(239, 68, 68, 0.4);
}
.age-card-minutes {
    --card-glow: #f59e0b;
    --card-glow-border: rgba(245, 158, 11, 0.4);
}
.age-card-seconds {
    --card-glow: #ec4899;
    --card-glow-border: rgba(236, 72, 153, 0.4);
}
.age-card-leap {
    --card-glow: #3b82f6;
    --card-glow-border: rgba(59, 130, 246, 0.4);
}

/* Specific text coloring for value based on variables */
.age-stat-card:hover .age-stat-value {
    color: var(--card-glow);
}

/* Responsive adjustments */
@media (max-width: 900px) {
    .age-stats-grid {
        grid-template-columns: repeat(12, 1fr);
        gap: 12px;
        perspective: none; /* Disable 3D tilt on tablets/touch devices for better usability */
    }
    .age-stat-card,
    .age-stat-card.age-card-seconds,
    .age-stat-card.age-card-leap {
        grid-column: span 6 !important; /* 2 columns on tablet */
        padding: 18px 8px;
        min-height: 100px;
        transform: none !important;
        transform-style: flat;
    }
    .age-stat-value {
        font-size: 22px;
        transform: none !important;
    }
    .age-stat-label {
        transform: none !important;
    }
    #stat-total-seconds {
        font-size: 18px !important;
    }
    #stat-total-minutes {
        font-size: 20px !important;
    }
}
@media (max-width: 480px) {
    .age-stats-grid {
        gap: 10px;
    }
    .age-stat-card,
    .age-stat-card.age-card-seconds,
    .age-stat-card.age-card-leap {
        border-radius: 16px;
        grid-column: span 12 !important; /* Full width 1-column layout on very small mobile screens */
    }
    .age-stat-value {
        font-size: 20px;
    }
    #stat-total-seconds {
        font-size: 18px !important;
    }
}

/* ========================================
   Resume Builder Premium Visual Framework
   ======================================== */

/* Main layout split columns */
.resume-layout {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 30px;
    max-width: 1400px;
    margin: 0 auto;
    align-items: start;
}
@media (max-width: 1024px) {
    .resume-layout {
        grid-template-columns: 1fr;
    }
}

/* Template buttons design */
.resume-tpl-btn {
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    font-weight: 700;
    font-size: 13px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
}
.resume-tpl-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    color: white;
    transform: translateY(-2px);
}
.resume-tpl-btn.active {
    background: var(--accent);
    color: white;
    border-color: transparent;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

/* A4 Mockup Sheet styling */
.resume-paper {
    width: 100%;
    max-width: 595px; /* A4 standard base width */
    aspect-ratio: 1 / 1.414; /* Standard A4 proportions */
    background: #ffffff !important;
    color: #1e293b !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
    border-radius: 4px;
    position: relative;
    box-sizing: border-box;
    overflow: hidden;
    text-align: left;
    transition: all 0.3s ease;
    animation: fadeIn 0.4s ease;
}

/* Template 1: Modern Minimalist Layout */
.resume-paper.template-modern {
    padding: 40px 30px;
    font-family: 'Inter', -apple-system, sans-serif;
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.resume-paper.template-modern .res-header {
    text-align: center;
    border-bottom: 2px solid #e2e8f0;
    padding-bottom: 12px;
    margin-bottom: 10px;
}
.resume-paper.template-modern .res-name {
    font-size: 26px;
    font-weight: 800;
    color: #1e1b4b;
    letter-spacing: -0.5px;
}
.resume-paper.template-modern .res-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 3px;
}
.resume-paper.template-modern .res-contact-grid {
    display: flex;
    justify-content: center;
    gap: 12px;
    font-size: 9.5px;
    color: #64748b;
    margin-top: 6px;
    flex-wrap: wrap;
    font-weight: 500;
}
.resume-paper.template-modern .res-section {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.resume-paper.template-modern .res-section-title {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    color: #1e1b4b;
    border-bottom: 1px solid #cbd5e1;
    padding-bottom: 3px;
    letter-spacing: 0.5px;
}
.resume-paper.template-modern .res-summary-text {
    font-size: 9.5px;
    line-height: 1.5;
    color: #475569;
}
.resume-paper.template-modern .res-item {
    margin-bottom: 6px;
}
.resume-paper.template-modern .res-item-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 10px;
    font-weight: 700;
    color: #1e293b;
}
.resume-paper.template-modern .res-item-sub {
    font-size: 9px;
    font-weight: 600;
    color: #64748b;
    font-style: italic;
    margin-top: 1px;
}
.resume-paper.template-modern .res-item-desc {
    font-size: 8.5px;
    line-height: 1.4;
    color: #475569;
    margin-top: 2px;
}
.resume-paper.template-modern .res-skills-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.resume-paper.template-modern .res-skill-badge {
    background: #f1f5f9;
    color: #475569;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 8px;
    font-weight: 600;
}

/* Template 2: Professional Executive (Sidebar Layout) */
.resume-paper.template-executive {
    display: flex;
    height: 100%;
    font-family: 'Inter', sans-serif;
}
.resume-paper.template-executive .res-sidebar {
    width: 33%;
    background: #1e293b !important;
    color: #f8fafc !important;
    padding: 35px 15px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.resume-paper.template-executive .res-main {
    width: 67%;
    padding: 35px 25px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.resume-paper.template-executive .res-sidebar-title {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #38bdf8;
    border-bottom: 1px solid rgba(255,255,255,0.15);
    padding-bottom: 3px;
    margin-bottom: 8px;
}
.resume-paper.template-executive .res-sidebar-contact {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 8.5px;
    color: #cbd5e1;
    word-break: break-all;
}
.resume-paper.template-executive .res-sidebar-contact i {
    color: #38bdf8;
    margin-right: 4px;
}
.resume-paper.template-executive .res-sidebar-skills {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.resume-paper.template-executive .res-sidebar-skill-badge {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    color: #f8fafc;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 8px;
    font-weight: 600;
    text-align: center;
}
.resume-paper.template-executive .res-edu-sidebar-item {
    margin-bottom: 8px;
    font-size: 8px;
}
.resume-paper.template-executive .res-edu-degree {
    font-weight: 700;
    color: white;
}
.resume-paper.template-executive .res-edu-school {
    color: #cbd5e1;
    margin-top: 1px;
}
.resume-paper.template-executive .res-edu-dates {
    color: #94a3b8;
    font-size: 7.5px;
    margin-top: 1px;
}
.resume-paper.template-executive .res-name {
    font-size: 26px;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.8px;
}
.resume-paper.template-executive .res-title {
    font-size: 13px;
    font-weight: 600;
    color: #0d9488;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 2px;
}
.resume-paper.template-executive .res-section {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.resume-paper.template-executive .res-section-title {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    color: #0f172a;
    border-bottom: 2px solid #f1f5f9;
    padding-bottom: 3px;
    letter-spacing: 0.5px;
}
.resume-paper.template-executive .res-summary-text {
    font-size: 9.5px;
    line-height: 1.5;
    color: #475569;
}
.resume-paper.template-executive .res-item {
    margin-bottom: 8px;
}
.resume-paper.template-executive .res-item-header {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    font-weight: 700;
    color: #0f172a;
}
.resume-paper.template-executive .res-item-sub {
    font-size: 8.5px;
    font-weight: 600;
    color: #0d9488;
    font-style: italic;
    margin-top: 1px;
}
.resume-paper.template-executive .res-item-desc {
    font-size: 8.5px;
    line-height: 1.4;
    color: #475569;
    margin-top: 3px;
}

/* Template 3: Creative / Bold Tech Layout */
.resume-paper.template-creative {
    padding: 0;
    font-family: 'Inter', sans-serif;
    display: flex;
    flex-direction: column;
}
.resume-paper.template-creative .res-header-block {
    background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%) !important;
    color: white !important;
    padding: 35px 25px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.resume-paper.template-creative .res-name {
    font-size: 28px;
    font-weight: 900;
    letter-spacing: -1px;
}
.resume-paper.template-creative .res-title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: rgba(255,255,255,0.85);
}
.resume-paper.template-creative .res-contact-grid {
    display: flex;
    gap: 15px;
    font-size: 9px;
    color: rgba(255,255,255,0.8);
    flex-wrap: wrap;
    font-weight: 500;
    border-top: 1px solid rgba(255,255,255,0.15);
    padding-top: 10px;
    margin-top: 3px;
}
.resume-paper.template-creative .res-contact-grid i {
    margin-right: 4px;
}
.resume-paper.template-creative .res-body {
    padding: 25px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.resume-paper.template-creative .res-section {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.resume-paper.template-creative .res-section-title {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    color: #4338ca;
    letter-spacing: 0.8px;
    border-left: 3px solid #6366f1;
    padding-left: 8px;
}
.resume-paper.template-creative .res-summary-text {
    font-size: 9.5px;
    line-height: 1.5;
    color: #475569;
}
.resume-paper.template-creative .res-item {
    margin-bottom: 6px;
}
.resume-paper.template-creative .res-item-header {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    font-weight: 700;
    color: #1f2937;
}
.resume-paper.template-creative .res-item-sub {
    font-size: 9px;
    font-weight: 600;
    color: #f59e0b;
    margin-top: 1px;
}
.resume-paper.template-creative .res-item-desc {
    font-size: 8.5px;
    line-height: 1.4;
    color: #475569;
    margin-top: 2px;
}
.resume-paper.template-creative .res-skills-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.resume-paper.template-creative .res-skill-badge {
    background: rgba(99,102,241,0.06);
    border: 1px solid rgba(99,102,241,0.15);
    color: #4338ca;
    padding: 4px 10px;
    border-radius: 50px;
    font-size: 8px;
    font-weight: 600;
}

/* Template Selection Cards & Hover micro-animations */
.tpl-select-card {
    position: relative;
    transform-style: preserve-3d;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}
.tpl-select-card:hover {
    transform: translateY(-8px) scale(1.02);
    border-color: var(--accent) !important;
    box-shadow: 0 25px 50px -12px rgba(99, 102, 241, 0.25), 0 0 20px rgba(99, 102, 241, 0.1) !important;
}
.tpl-select-card:hover .tpl-select-btn {
    background: var(--grad-primary) !important;
    color: white !important;
    border-color: transparent !important;
    box-shadow: 0 8px 20px rgba(99, 102, 241, 0.3) !important;
}
.tpl-select-card:hover .tpl-mockup-preview {
    transform: scale(1.03) translateZ(10px);
    box-shadow: 0 12px 24px rgba(0,0,0,0.12), inset 0 2px 8px rgba(0,0,0,0.05) !important;
}
.tpl-select-card:active {
    transform: translateY(-4px) scale(1.01);
}

/* Base optimization for ultra-crisp paper fonts and anti-blur rendering */
.resume-paper {
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    text-rendering: optimizeLegibility !important;
}

/* Skill tag word wrap fixes to avoid any overlap or boundaries overflow */
.res-skill-badge, .res-sidebar-skill-badge, .res-sidebar-skills span {
    word-break: break-word !important;
    white-space: normal !important;
    max-width: 100% !important;
    display: inline-block !important;
}

/* Sidebar high contrast text and spacing upgrades for template-executive */
.resume-paper.template-executive .res-sidebar {
    background: #0f172a !important; /* Richer dark slate for contrast */
}
.resume-paper.template-executive .res-sidebar-contact {
    color: #f8fafc !important; /* Vibrant high contrast text */
    font-weight: 600 !important;
}
.resume-paper.template-executive .res-sidebar-contact i {
    color: #38bdf8 !important; /* bright cyan contrast icons */
}
.resume-paper.template-executive .res-edu-school {
    color: #f1f5f9 !important;
    font-weight: 500 !important;
}
.resume-paper.template-executive .res-edu-dates {
    color: #cbd5e1 !important;
}
.resume-paper.template-executive .res-sidebar-skill-badge {
    background: rgba(56, 189, 248, 0.15) !important; /* bright border pill background */
    border: 1px solid rgba(56, 189, 248, 0.4) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
}

/* Template 4: Academic Serif Layout Style */
.resume-paper.template-academic {
    padding: 45px 35px;
    font-family: 'Playfair Display', Georgia, 'Times New Roman', serif !important;
    display: flex;
    flex-direction: column;
    gap: 16px;
    color: #111111 !important;
    line-height: 1.45;
}
.resume-paper.template-academic .res-header {
    text-align: center;
    border-bottom: 1.5px solid #111111;
    padding-bottom: 10px;
    margin-bottom: 5px;
}
.resume-paper.template-academic .res-name {
    font-size: 24px;
    font-weight: 700;
    font-family: 'Playfair Display', Georgia, serif;
    letter-spacing: 0.5px;
    color: #000000;
}
.resume-paper.template-academic .res-title {
    font-size: 11px;
    font-weight: 600;
    color: #444444;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-top: 4px;
}
.resume-paper.template-academic .res-contact-grid {
    display: flex;
    justify-content: center;
    gap: 14px;
    font-size: 9px;
    color: #555555;
    margin-top: 6px;
    flex-wrap: wrap;
    font-weight: 500;
    font-style: italic;
}
.resume-paper.template-academic .res-section {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.resume-paper.template-academic .res-section-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: #111111;
    border-bottom: 0.75px solid #444444;
    padding-bottom: 2px;
    letter-spacing: 1px;
    margin-bottom: 4px;
}
.resume-paper.template-academic .res-summary-text {
    font-size: 9.5px;
    color: #222222;
    text-align: justify;
}
.resume-paper.template-academic .res-item {
    margin-bottom: 8px;
}
.resume-paper.template-academic .res-item-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 9.5px;
    font-weight: 700;
    color: #000000;
}
.resume-paper.template-academic .res-item-sub {
    font-size: 9px;
    font-weight: 600;
    color: #333333;
    font-style: italic;
    margin-top: 1px;
}
.resume-paper.template-academic .res-item-desc {
    font-size: 8.5px;
    color: #222222;
    margin-top: 2px;
}
.resume-paper.template-academic .res-skills-list {
    font-size: 9px;
    color: #222222;
    line-height: 1.5;
}
.resume-paper.template-academic .res-skill-badge {
    background: transparent;
    color: #111111;
    padding: 0;
    font-size: 9px;
    font-weight: 600;
    border-radius: 0;
}
.resume-paper.template-academic .res-skill-badge::after {
    content: "  •  ";
}
.resume-paper.template-academic .res-skill-badge:last-child::after {
    content: "";
}

/* Template 5: Corporate Slate Layout Style */
.resume-paper.template-corporate {
    padding: 40px 30px;
    font-family: 'Inter', sans-serif;
    display: flex;
    flex-direction: column;
    gap: 14px;
    color: #334155 !important;
}
.resume-paper.template-corporate .res-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    border-bottom: 2.5px solid #0f766e;
    padding-bottom: 12px;
    margin-bottom: 4px;
}
.resume-paper.template-corporate .res-name-title {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.resume-paper.template-corporate .res-name {
    font-size: 25px;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.5px;
}
.resume-paper.template-corporate .res-title {
    font-size: 12px;
    font-weight: 700;
    color: #0f766e;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 2px;
}
.resume-paper.template-corporate .res-contact-block {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
    font-size: 8.5px;
    color: #475569;
    font-weight: 550;
    text-align: right;
}
.resume-paper.template-corporate .res-contact-block i {
    color: #0f766e;
    width: 10px;
}
.resume-paper.template-corporate .res-section {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.resume-paper.template-corporate .res-section-title {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    color: #0f172a;
    border-left: 3px solid #0f766e;
    padding-left: 8px;
    letter-spacing: 0.5px;
    margin-bottom: 3px;
}
.resume-paper.template-corporate .res-summary-text {
    font-size: 9.5px;
    line-height: 1.5;
    color: #334155;
}
.resume-paper.template-corporate .res-item {
    margin-bottom: 6px;
}
.resume-paper.template-corporate .res-item-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 10px;
    font-weight: 700;
    color: #0f172a;
}
.resume-paper.template-corporate .res-item-sub {
    font-size: 9px;
    font-weight: 600;
    color: #0f766e;
    margin-top: 1px;
}
.resume-paper.template-corporate .res-item-desc {
    font-size: 8.5px;
    line-height: 1.4;
    color: #475569;
    margin-top: 2px;
}
.resume-paper.template-corporate .res-skills-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.resume-paper.template-corporate .res-skill-badge {
    background: rgba(15, 118, 110, 0.08);
    border: 1px solid rgba(15, 118, 110, 0.2);
    color: #0f766e;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 8px;
    font-weight: 600;
}

/* Template 6: Vibrant Tech Layout Style */
.resume-paper.template-tech {
    padding: 40px 30px;
    font-family: 'Inter', -apple-system, sans-serif;
    display: flex;
    flex-direction: column;
    gap: 15px;
    color: #334155 !important;
}
.resume-paper.template-tech .res-header {
    display: flex;
    align-items: center;
    gap: 15px;
    border-bottom: 1.5px solid #e2e8f0;
    padding-bottom: 12px;
}
.resume-paper.template-tech .res-accent-bar {
    width: 6px;
    height: 46px;
    background: #2563eb;
    border-radius: 4px;
}
.resume-paper.template-tech .res-name-title {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.resume-paper.template-tech .res-name {
    font-size: 26px;
    font-weight: 900;
    color: #1e293b;
    letter-spacing: -0.8px;
}
.resume-paper.template-tech .res-title {
    font-size: 12px;
    font-weight: 700;
    color: #2563eb;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.resume-paper.template-tech .res-contact-grid {
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 8.5px;
    color: #64748b;
    font-weight: 600;
    text-align: right;
}
.resume-paper.template-tech .res-contact-grid i {
    color: #2563eb;
    margin-right: 2px;
}
.resume-paper.template-tech .res-body-grid {
    display: grid;
    grid-template-columns: 1.3fr 0.7fr;
    gap: 20px;
}
.resume-paper.template-tech .res-section {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 10px;
}
.resume-paper.template-tech .res-section-title {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    color: #1e293b;
    border-bottom: 2px solid #2563eb;
    padding-bottom: 2px;
    letter-spacing: 0.5px;
}
.resume-paper.template-tech .res-summary-text {
    font-size: 9.5px;
    line-height: 1.5;
    color: #475569;
}
.resume-paper.template-tech .res-item {
    margin-bottom: 6px;
}
.resume-paper.template-tech .res-item-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 9.5px;
    font-weight: 700;
    color: #1e293b;
}
.resume-paper.template-tech .res-item-sub {
    font-size: 8.5px;
    font-weight: 600;
    color: #2563eb;
}
.resume-paper.template-tech .res-item-desc {
    font-size: 8.5px;
    line-height: 1.4;
    color: #475569;
    margin-top: 2px;
}
.resume-paper.template-tech .res-skills-list {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}
.resume-paper.template-tech .res-skill-badge {
    background: rgba(37, 99, 235, 0.08) !important;
    border: 1px solid rgba(37, 99, 235, 0.2) !important;
    color: #2563eb !important;
    padding: 3px 8px;
    border-radius: 50px;
    font-size: 8px;
    font-weight: 700;
}
.resume-paper.template-tech .res-edu-item {
    margin-bottom: 8px;
}
.resume-paper.template-tech .res-edu-degree {
    font-size: 9px;
    font-weight: 700;
    color: #1e293b;
}
.resume-paper.template-tech .res-edu-school {
    font-size: 8.5px;
    color: #475569;
}
.resume-paper.template-tech .res-edu-dates {
    font-size: 8px;
    color: #64748b;
    font-style: italic;
}

/* =======================================================
   PROFESSIONAL 3D ANIMATED DASHBOARD ENHANCEMENTS
   ======================================================= */

/* 1. Ambient 3D Glowing background gas clouds - Optimized static rendering */
.ambient-orb {
    position: fixed;
    width: 480px;
    height: 480px;
    border-radius: 50%;
    filter: blur(65px);
    z-index: -50;
    opacity: 0.16;
    pointer-events: none;
    transform: translate3d(0, 0, 0);
}
.orb-1 {
    background: #ff3e83;
    top: -10%;
    left: -10%;
}
.orb-2 {
    background: #3b82f6;
    bottom: -10%;
    right: -10%;
}
.orb-3 {
    background: #10b981;
    top: 40%;
    left: 40%;
    opacity: 0.12;
}

/* Dark theme opacity adjustments for ambient orbs */
body.dark-theme .ambient-orb {
    opacity: 0.08 !important;
    filter: blur(55px) !important;
}
body.dark-theme .orb-3 {
    opacity: 0.05 !important;
}

/* 2. Glassmorphic 3D clock and top bar */
.dash-top-bar {
    max-width: 820px;
    margin: 10px auto 14px;
    background: rgba(255, 255, 255, 0.75);
    border: 2px solid rgba(255, 255, 255, 0.9);
    border-radius: 20px;
    padding: 10px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: var(--shadow-md), 0 20px 40px -15px rgba(99, 102, 241, 0.08);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    position: relative;
    overflow: visible;
    transition: var(--transition);
}

body.dark-theme .dash-top-bar {
    background: rgba(18, 18, 20, 0.55) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

.dash-top-bar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 6px;
    height: 100%;
    background: var(--grad-primary);
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
}

.dash-clock-area {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    padding: 10px 26px 8px 16px;
    z-index: 1;
}

.dash-clock-area::before {
    content: '';
    position: absolute;
    top: -12px;
    left: -14px;
    width: calc(100% + 28px);
    height: calc(100% + 24px);
    background: url('brush-gold.png?v=2.0') no-repeat center center;
    background-size: 100% 100%;
    z-index: -1;
    pointer-events: none;
}

#dash-time {
    font-size: 30px !important;
    font-weight: 900 !important;
    color: #0f172a !important;
    line-height: 1 !important;
    letter-spacing: -0.5px !important;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.85) !important;
}

#dash-date {
    font-size: 12px !important;
    font-weight: 800 !important;
    color: #9a3412 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase;
    margin-top: 5px;
}

/* ── Old weather icon (kept for legacy) ── */
.dash-weather-icon { display: none !important; }

/* ══════════════════════════════════════════
   LIVE DONUT CHART WIDGET (LARGE & BOLD)
══════════════════════════════════════════ */
.dash-donut-widget {
    position: relative;
    width: 86px;
    height: 86px;
    border-radius: 50%;
    background: var(--bg-card, #ffffff);
    border: 2px solid rgba(99, 102, 241, 0.22);
    box-shadow: 0 6px 22px rgba(99, 102, 241, 0.16);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease;
}

.dash-donut-widget:hover {
    transform: scale(1.1);
    box-shadow: 0 8px 30px rgba(99, 102, 241, 0.3);
}

.donut-svg {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    transform: rotate(-90deg);
    filter: drop-shadow(0 2px 4px rgba(99, 102, 241, 0.15));
}

.donut-center-info {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1;
    pointer-events: none;
}

.donut-count-num {
    font-size: 14.5px;
    font-weight: 900;
    color: var(--text-primary, #0f172a);
    letter-spacing: -0.4px;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.25s ease;
    display: inline-block;
}

.donut-count-num.stat-bump-up {
    color: #10b981;
    transform: scale(1.09);
}

.donut-count-num.stat-bump-down {
    color: #f59e0b;
    transform: scale(0.93);
}

.donut-live-label {
    font-size: 9.5px;
    font-weight: 800;
    color: #10b981;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-top: 2px;
    display: inline-flex;
    align-items: center;
    gap: 3.5px;
}

.donut-live-dot {
    width: 5.5px;
    height: 5.5px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 8px #10b981;
    display: inline-block;
    animation: donutDotPulse 1.5s infinite ease-in-out;
}

@keyframes donutDotPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.5); opacity: 0.6; }
}

/* ══════════════════════════════════════════
   LIVE STATS CENTER MODAL DIALOG
══════════════════════════════════════════ */
.live-stats-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(10, 15, 30, 0.72);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 99999999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
    animation: modalFadeIn 0.25s ease;
}

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

.live-stats-modal-card {
    background: var(--bg-card, #ffffff);
    border: 1.5px solid rgba(99, 102, 241, 0.25);
    border-radius: 22px;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.35), 0 0 35px rgba(99, 102, 241, 0.2);
    width: 100%;
    max-width: 480px;
    padding: 22px 22px 18px;
    position: relative;
    box-sizing: border-box;
    animation: modalPopIn 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes modalPopIn {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.live-stats-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(99, 102, 241, 0.08);
    border: 1px solid rgba(99, 102, 241, 0.15);
    color: var(--text-secondary, #64748b);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.live-stats-modal-close:hover {
    background: #ef4444;
    color: #ffffff;
    border-color: #ef4444;
    transform: rotate(90deg);
}

.dsp-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(99, 102, 241, 0.14);
    padding-right: 36px;
}

.dsp-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.dsp-header-icon {
    font-size: 24px;
}

.dsp-header-title {
    font-size: 15px;
    font-weight: 900;
    color: var(--text-primary, #0f172a);
    line-height: 1.2;
}

.dsp-header-sub {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-secondary, #64748b);
    margin-top: 2px;
}

.dsp-live-badge {
    font-size: 11px;
    font-weight: 800;
    color: #10b981;
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.3);
    padding: 4px 10px;
    border-radius: 20px;
    white-space: nowrap;
}

/* Two-tier Card Rows */
.dsp-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dsp-card-item {
    background: rgba(99, 102, 241, 0.04);
    border: 1px solid rgba(99, 102, 241, 0.1);
    border-radius: 12px;
    padding: 10px 12px;
    transition: all 0.2s ease;
}

.dsp-card-item:hover {
    background: rgba(99, 102, 241, 0.08);
    border-color: rgba(99, 102, 241, 0.25);
    transform: translateX(2px);
}

.dsp-item-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
}

.dsp-item-left {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.dsp-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
}

.dsp-name {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--text-primary, #0f172a);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dsp-item-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.dsp-users {
    font-size: 11.5px;
    font-weight: 700;
    color: #10b981;
}

.dsp-pct {
    font-size: 11px;
    font-weight: 800;
    color: var(--text-primary, #0f172a);
    background: rgba(99, 102, 241, 0.14);
    padding: 2px 7px;
    border-radius: 6px;
}

.dsp-bar-wrap {
    background: rgba(0, 0, 0, 0.07);
    border-radius: 6px;
    height: 6px;
    overflow: hidden;
}

.dsp-bar {
    height: 100%;
    border-radius: 6px;
    transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.dsp-footer {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted, #94a3b8);
    margin-top: 14px;
    padding-top: 10px;
    border-top: 1px solid rgba(99, 102, 241, 0.12);
    text-align: center;
}

/* Dark mode */
body.dark-theme .live-stats-modal-card {
    background: #141824;
    border-color: rgba(165, 180, 252, 0.25);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.85), 0 0 35px rgba(99, 102, 241, 0.25);
}

body.dark-theme .live-stats-modal-close {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.12);
    color: #cbd5e1;
}

body.dark-theme .dsp-header-title { color: #f8fafc; }
body.dark-theme .dsp-header-sub   { color: #94a3b8; }
body.dark-theme .dsp-card-item {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
}
body.dark-theme .dsp-card-item:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(165, 180, 252, 0.3);
}
body.dark-theme .dsp-name { color: #f8fafc; }
body.dark-theme .dsp-pct  { color: #e2e8f0; background: rgba(165, 180, 252, 0.25); }
body.dark-theme .dsp-bar-wrap { background: rgba(255, 255, 255, 0.1); }
body.dark-theme .dsp-footer { color: #94a3b8; border-color: rgba(255, 255, 255, 0.1); }

/* 3. Smooth hover responsiveness for cards */
.dash-card {
    transition: transform 0.2s ease-out, box-shadow 0.2s ease, border-color 0.2s ease !important;
}

/* =======================================================
   LANDING PAGE LUXURY RE-DESIGN & MODERN DOT GRIDS
   ======================================================= */

/* Subtle Modern Grid Background Pattern on Hero */
.hero-section {
    position: relative;
    overflow: visible;
    padding: 4px 20px 10px !important;
    background: radial-gradient(circle at 50% 50%, rgba(99, 102, 241, 0.08) 0%, transparent 60%) !important;
}

.hero-section::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(var(--border-color) 1.5px, transparent 1.5px);
    background-size: 24px 24px;
    mask-image: radial-gradient(circle at 50% 50%, black 20%, transparent 80%);
    -webkit-mask-image: radial-gradient(circle at 50% 50%, black 20%, transparent 80%);
    z-index: -1;
    pointer-events: none;
    opacity: 0.7;
}

/* =====================================================
   PREMIUM GLASSMORPHIC SEARCH BAR — Ultra Professional
   ===================================================== */
.search-container-3d {
    max-width: 640px;
    margin: 18px auto 0;
    position: relative;
    z-index: 100;
}

.search-wrapper-3d {
    background: rgba(255, 255, 255, 0.85);
    border: 1.5px solid rgba(99, 102, 241, 0.12);
    border-radius: 18px;
    padding: 5px 8px 5px 18px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow:
        0 4px 24px rgba(99, 102, 241, 0.06),
        0 1px 3px rgba(0, 0, 0, 0.04),
        inset 0 1px 2px rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(20px) saturate(1.6);
    -webkit-backdrop-filter: blur(20px) saturate(1.6);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: visible;
}

body.dark-theme .search-wrapper-3d {
    background: rgba(30, 32, 48, 0.85);
    border-color: rgba(129, 140, 248, 0.18);
    box-shadow:
        0 4px 24px rgba(0, 0, 0, 0.3),
        0 1px 3px rgba(0, 0, 0, 0.15),
        inset 0 1px 1px rgba(255, 255, 255, 0.04);
}

.search-wrapper-3d:hover {
    border-color: rgba(99, 102, 241, 0.25);
    box-shadow:
        0 8px 32px rgba(99, 102, 241, 0.1),
        0 2px 6px rgba(0, 0, 0, 0.04),
        inset 0 1px 2px rgba(255, 255, 255, 0.9);
    transform: translateY(-1px);
}

body.dark-theme .search-wrapper-3d:hover {
    border-color: rgba(129, 140, 248, 0.3);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.35),
        0 2px 6px rgba(0, 0, 0, 0.15),
        inset 0 1px 1px rgba(255, 255, 255, 0.04);
}

.search-wrapper-3d:focus-within {
    border-color: rgba(99, 102, 241, 0.5);
    box-shadow:
        0 12px 40px rgba(99, 102, 241, 0.15),
        0 0 0 4px rgba(99, 102, 241, 0.08),
        inset 0 1px 2px rgba(255, 255, 255, 0.9);
    transform: translateY(-2px);
}

body.dark-theme .search-wrapper-3d:focus-within {
    border-color: rgba(129, 140, 248, 0.45);
    box-shadow:
        0 12px 40px rgba(99, 102, 241, 0.12),
        0 0 0 4px rgba(129, 140, 248, 0.1),
        inset 0 1px 1px rgba(255, 255, 255, 0.04);
}

/* Search Icon with Pulse */
.search-icon-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.search-icon-3d {
    color: #94a3b8;
    font-size: 16px;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 2;
    position: relative;
}

.search-icon-pulse {
    position: absolute;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(99, 102, 241, 0.08);
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.search-wrapper-3d:focus-within .search-icon-3d {
    color: #f59e0b;
    transform: scale(1.1);
}

body.dark-theme .search-wrapper-3d:focus-within .search-icon-3d {
    color: #818cf8;
}

.search-wrapper-3d:focus-within .search-icon-pulse {
    opacity: 1;
    transform: scale(1);
    animation: iconPulseAnim 2s ease-in-out infinite;
}

@keyframes iconPulseAnim {
    0%, 100% { transform: scale(1); opacity: 0.6; }
    50% { transform: scale(1.3); opacity: 0; }
}

/* Input Styling */
#dash-search-input {
    flex: 1;
    border: none;
    background: transparent;
    padding: 14px 4px;
    color: var(--text-primary);
    font-size: 15px;
    font-weight: 550;
    outline: none;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    letter-spacing: -0.01em;
    min-width: 0;
}

#dash-search-input::placeholder {
    color: #b0b8c9;
    font-weight: 450;
    letter-spacing: 0;
    transition: color 0.3s ease;
}

body.dark-theme #dash-search-input::placeholder {
    color: #4b5563;
}

.search-wrapper-3d:focus-within #dash-search-input::placeholder {
    color: #cbd5e1;
}

body.dark-theme .search-wrapper-3d:focus-within #dash-search-input::placeholder {
    color: #374151;
}

/* Clear Button */
.search-clear-btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 10px;
    border: none;
    background: rgba(239, 68, 68, 0.08);
    color: #ef4444;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
    animation: clearBtnSpring 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.search-clear-btn.visible {
    display: flex;
}

.search-clear-btn:hover {
    background: rgba(239, 68, 68, 0.15);
    color: #dc2626;
    transform: scale(1.1) rotate(90deg);
}

@keyframes clearBtnSpring {
    from { opacity: 0; transform: scale(0.3) rotate(-180deg); }
    to { opacity: 1; transform: scale(1) rotate(0deg); }
}

/* Divider */
.search-divider {
    width: 1px;
    height: 24px;
    background: var(--border-color);
    flex-shrink: 0;
    opacity: 0.5;
}

/* Shortcut Badge */
.search-shortcut {
    background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
    border: 1px solid rgba(148, 163, 184, 0.25);
    border-radius: 8px;
    padding: 5px 10px;
    font-size: 13px;
    font-weight: 700;
    color: #64748b;
    font-family: 'SF Mono', 'JetBrains Mono', 'Consolas', monospace;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04), inset 0 -2px 0 rgba(0, 0, 0, 0.06);
    transition: all 0.25s ease;
    flex-shrink: 0;
    cursor: default;
    line-height: 1;
}

body.dark-theme .search-shortcut {
    background: linear-gradient(135deg, #1e293b, #334155);
    border-color: rgba(99, 102, 241, 0.2);
    color: #94a3b8;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2), inset 0 -2px 0 rgba(0, 0, 0, 0.3);
}

.search-wrapper-3d:focus-within .search-shortcut {
    opacity: 0;
    width: 0;
    padding: 0;
    border: 0;
    overflow: hidden;
}

/* =====================================================
   LIVE SUGGESTIONS DROPDOWN
   ===================================================== */
.search-suggestions {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(24px) saturate(1.8);
    -webkit-backdrop-filter: blur(24px) saturate(1.8);
    border: 1px solid rgba(99, 102, 241, 0.12);
    border-radius: 16px;
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.08),
        0 8px 24px rgba(99, 102, 241, 0.06);
    padding: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px) scale(0.98);
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    max-height: 320px;
    overflow: hidden;
    z-index: 200;
}

.search-suggestions.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

body.dark-theme .search-suggestions {
    background: rgba(22, 24, 40, 0.95);
    border-color: rgba(129, 140, 248, 0.15);
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.35),
        0 8px 24px rgba(0, 0, 0, 0.2);
}

.suggestions-header {
    padding: 12px 18px 8px;
    font-size: 11px;
    font-weight: 700;
    color: #f59e0b;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    gap: 6px;
    border-bottom: 1px solid rgba(99, 102, 241, 0.08);
}

body.dark-theme .suggestions-header {
    color: #818cf8;
    border-bottom-color: rgba(129, 140, 248, 0.1);
}

.suggestions-list {
    padding: 6px;
    overflow-y: auto;
    max-height: 260px;
}

.suggestion-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.suggestion-item:hover,
.suggestion-item.active {
    background: rgba(99, 102, 241, 0.06);
}

body.dark-theme .suggestion-item:hover,
body.dark-theme .suggestion-item.active {
    background: rgba(129, 140, 248, 0.1);
}

.suggestion-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(139, 92, 246, 0.1));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #f59e0b;
    flex-shrink: 0;
    transition: all 0.25s ease;
}

body.dark-theme .suggestion-icon {
    background: linear-gradient(135deg, rgba(129, 140, 248, 0.12), rgba(167, 139, 250, 0.12));
    color: #818cf8;
}

.suggestion-item:hover .suggestion-icon {
    transform: scale(1.1);
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.18), rgba(139, 92, 246, 0.18));
}

.suggestion-text {
    flex: 1;
    min-width: 0;
}

.suggestion-title {
    font-size: 14px;
    font-weight: 650;
    color: var(--text-primary);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.suggestion-desc {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 1px;
}

.suggestion-arrow {
    color: #c7d2fe;
    font-size: 11px;
    transition: all 0.25s ease;
    flex-shrink: 0;
}

.suggestion-item:hover .suggestion-arrow {
    color: #f59e0b;
    transform: translateX(3px);
}

body.dark-theme .suggestion-arrow {
    color: #3730a3;
}

body.dark-theme .suggestion-item:hover .suggestion-arrow {
    color: #818cf8;
}

/* =====================================================
   POPULAR SEARCH TAGS
   ===================================================== */
.search-tags {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
    flex-wrap: wrap;
}

.search-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(99, 102, 241, 0.1);
    border-radius: 100px;
    font-size: 12px;
    font-weight: 600;
    color: #f59e0b;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    user-select: none;
}

body.dark-theme .search-tag {
    background: rgba(30, 32, 48, 0.6);
    border-color: rgba(129, 140, 248, 0.15);
    color: #a5b4fc;
}

.search-tag:hover {
    background: rgba(99, 102, 241, 0.1);
    border-color: rgba(99, 102, 241, 0.3);
    color: #4f46e5;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.12);
}

body.dark-theme .search-tag:hover {
    background: rgba(129, 140, 248, 0.12);
    border-color: rgba(129, 140, 248, 0.3);
    color: #c7d2fe;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.08);
}

.search-tag:active {
    transform: translateY(0) scale(0.96);
}

.search-tag i {
    font-size: 11px;
    opacity: 0.7;
}

/* Card Radial Mouse Follower Glowing Aura */
.dash-card::after {
    display: none !important; /* Disabled as requested */
}

/* Programmatic action links inside cards */
.card-action-link {
    margin-top: 18px;
    font-size: 13px;
    font-weight: 800;
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    opacity: 0.65;
    transition: var(--transition);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.dash-card:hover .card-action-link {
    opacity: 1;
    color: var(--accent-light);
}

.dash-card:hover .card-action-link i {
    transform: translateX(5px);
}

.card-action-link i {
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    font-size: 12px;
}

/* =====================================================
   CLEAN SEARCH RESULTS BAR (Active while searching)
   ===================================================== */
.search-results-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    margin: 10px 0 20px 0;
    background: #ffffff;
    border: 1.5px solid rgba(99, 102, 241, 0.15);
    border-radius: 18px;
    box-shadow: 0 4px 20px -2px rgba(99, 102, 241, 0.08);
    animation: searchBarSlideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Active Search Mode - Seamless clean layout without empty island gaps */
body.is-searching-mode .gz-pills-dock-wrap {
    display: none !important;
}

body.is-searching-mode .hero-cta-row {
    display: none !important;
}

body.is-searching-mode .dash-section-title {
    display: none !important;
}

body.is-searching-mode .dash-section {
    margin-top: 0 !important;
    margin-bottom: 12px !important;
}

body.dark-theme .search-results-bar {
    background: rgba(22, 24, 40, 0.95);
    border-color: rgba(129, 140, 248, 0.2);
    box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.3);
}

@keyframes searchBarSlideIn {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

.search-results-bar-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.search-pulse-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 10px #10b981;
    animation: pulseDot 1.6s infinite ease-in-out;
}

@keyframes pulseDot {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.3); opacity: 0.7; }
}

.search-results-bar h2 {
    font-size: 17px;
    font-weight: 800;
    color: var(--text-primary, #0f172a);
    margin: 0;
}

.search-results-bar h2 strong {
    color: #6366f1;
}

body.dark-theme .search-results-bar h2 strong {
    color: #a5b4fc;
}

.search-results-badge {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.12), rgba(139, 92, 246, 0.12));
    border: 1px solid rgba(99, 102, 241, 0.25);
    color: #4f46e5;
    font-size: 12px;
    font-weight: 800;
    padding: 6px 14px;
    border-radius: 50px;
    letter-spacing: 0.3px;
}

body.dark-theme .search-results-badge {
    background: rgba(99, 102, 241, 0.2);
    color: #c7d2fe;
    border-color: rgba(129, 140, 248, 0.3);
}

/* Glassmorphic "No results found" container */
.search-no-results-3d {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 60px 40px;
    background: var(--bg-card);
    border: 1px dashed var(--border-color);
    border-radius: 32px;
    box-shadow: var(--shadow-sm);
    margin-top: 20px;
    animation: cardEntrance3D 0.6s cubic-bezier(0.19, 1, 0.22, 1) both;
}

.no-results-icon {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: rgba(239, 68, 68, 0.08);
    color: #ef4444;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    margin-bottom: 20px;
    border: 1px solid rgba(239, 68, 68, 0.15);
    box-shadow: 0 10px 20px rgba(239, 68, 68, 0.05);
}

.search-no-results-3d h3 {
    font-size: 22px;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.search-no-results-3d p {
    font-size: 15px;
    color: var(--text-secondary);
    max-width: 400px;
    line-height: 1.5;
}

/* Beautiful Custom Scrollbar style for premium app feel */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
::-webkit-scrollbar-track {
    background: var(--bg-primary);
}
::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 10px;
    border: 3px solid var(--bg-primary);
}
::-webkit-scrollbar-thumb:hover {
    background: var(--accent-glow);
}

.dash-section-title {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 12px;
    position: relative;
}

.dash-section-title::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 60px;
    height: 2px;
    background: var(--accent);
    box-shadow: 0 0 10px var(--accent);
}

/* =======================================================
   LIVE ACTIVE USERS DYNAMIC CAROUSEL WIDGET (10 PERSONAS)
   ======================================================= */
.dash-user-carousel-widget {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    cursor: default;
    transition: var(--transition);
    z-index: 20;
}

.dash-user-carousel-widget:hover {
    transform: translateY(-2px);
}

.user-avatar-circle {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    position: relative;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12), 0 0 0 3px rgba(255, 122, 0, 0.25), 0 0 0 5px rgba(255, 255, 255, 0.95);
    overflow: hidden;
    background: var(--bg-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

body.dark-theme .user-avatar-circle {
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4), 0 0 0 2px rgba(168, 85, 247, 0.4);
}

#live-user-avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
    transform-origin: center center;
}

/* Diagonal glass shine */
.avatar-glass-shine {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.1) 40%, transparent 60%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 2;
}

/* Green Live Pulse Dot on Avatar */
.avatar-live-indicator {
    position: absolute;
    bottom: 3px;
    right: 3px;
    width: 12px;
    height: 12px;
    background: #10b981;
    border: 2px solid #ffffff;
    border-radius: 50%;
    box-shadow: 0 0 8px #10b981;
    z-index: 4;
}

body.dark-theme .avatar-live-indicator {
    border-color: #0f172a;
}

.user-live-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid var(--border-color);
    padding: 3px 10px;
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
}

.compass-heading-val strong {
    color: #ef4444; /* Direction N in bright red */
}

/* =======================================================
   GIANT BACKGROUND SLOWLY ROTATING MANDALA ART
   ======================================================= */
.mandala-container {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(95vw, 1000px);
    height: min(95vw, 1000px);
    z-index: -1 !important;
    pointer-events: none;
    opacity: 0.07;
    transition: var(--transition);
    background: radial-gradient(circle, rgba(245, 158, 11, 0.14) 0%, transparent 65%);
    border-radius: 50%;
    contain: strict;
    will-change: transform;
}

body.dark-theme .mandala-container {
    opacity: 0.12;
    background: radial-gradient(circle, rgba(245, 158, 11, 0.2) 0%, transparent 70%);
}

.mandala-svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: url(#mandala-grad);
    stroke-width: 0.7;
    /* animation disabled for silky smooth 60fps scrolling */
    transform-origin: center center;
    backface-visibility: hidden;
}

body.dark-theme .mandala-svg {
}

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

/* =======================================================
   AGE CALCULATOR STYLING CLASSES (Desktop Defaults)
   ======================================================= */
.age-inputs-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 25px;
}
.age-buttons-row {
    display: flex;
    gap: 15px;
    margin-bottom: 30px;
}
.age-giant-banner {
    background: linear-gradient(135deg, #7c5cfc 0%, #a78bfa 50%, #f472b6 100%);
    padding: 30px;
    border-radius: 20px;
    text-align: center;
    margin-bottom: 25px;
    box-shadow: 0 10px 30px rgba(124, 92, 252, 0.25);
    color: white;
    border: 1px solid rgba(255,255,255,0.1);
    position: relative;
    overflow: hidden;
}
.age-highlights-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 25px;
}
.age-highlight-card {
    padding: 20px;
    border-radius: 18px;
    box-shadow: var(--shadow-sm);
}
.age-highlight-card.next-birthday-card {
    background: linear-gradient(135deg, rgba(124, 92, 252, 0.05), rgba(124, 92, 252, 0.02));
    border: 1px solid rgba(124, 92, 252, 0.2);
}
.age-highlight-card.zodiac-card {
    background: linear-gradient(135deg, rgba(244, 114, 182, 0.05), rgba(244, 114, 182, 0.02));
    border: 1px solid rgba(244, 114, 182, 0.2);
}
.age-countdown-box {
    background: var(--bg-tertiary);
    padding: 20px;
    border-radius: 20px;
    border: 1px solid var(--border-color);
    text-align: center;
    margin-bottom: 25px;
    box-shadow: var(--shadow-sm);
}
.age-progress-container {
    background: var(--bg-tertiary);
    padding: 20px;
    border-radius: 20px;
    border: 1px solid var(--border-color);
    margin-bottom: 25px;
}

/* New Responsive Tool Grid Classes */
.conversion-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 15px;
    align-items: center;
}
.conversion-grid .swap-icon {
    font-size: 24px;
    cursor: pointer;
    transition: transform 0.3s;
    text-align: center;
}
.resume-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 12px;
}
.age-milestones-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    font-size: 14px;
}
.age-milestones-grid .span-2 {
    grid-column: span 2;
}

/* =====================================================
   MOBILE RESPONSIVE — Website Shell & Layout Only
   (Tools are NOT affected)
   ===================================================== */

/* ---- TABLET: 768px ---- */
@media (max-width: 768px) {

    /* PDF Tools Mobile fix - make download button always visible on mobile */
    .pdf-preview-item .pdf-page-download {
        opacity: 1 !important;
    }

    /* Header & Nav */
    .header-inner {
        padding: 0 14px;
    }
    .header-nav {
        gap: 10px;
    }
    .nav-links {
        gap: 6px;
    }
    .nav-external {
        padding: 6px 10px;
        font-size: 13px;
        border-radius: 8px;
    }
    .nav-divider {
        display: none;
    }
    .logo-text {
        font-size: 18px;
    }
    .brand-logo-img {
        height: 68px !important;
        max-width: 270px;
    }
    .logo-icon {
        width: 38px;
        height: 38px;
    }
    .theme-btn {
        width: 38px;
        height: 38px;
        font-size: 16px;
    }

    /* Hero Section */
    .hero-section {
        padding: 4px 14px 10px !important;
    }
    .hero-title {
        font-size: 36px !important;
        letter-spacing: -1px !important;
    }
    .hero-subtitle {
        font-size: 15px !important;
        max-width: 90% !important;
    }

    /* Dashboard Top Bar (Clock, Live Users, Weather) */
    .dash-top-bar {
        padding: 18px 24px;
        margin: 24px 16px;
        border-radius: 20px;
        flex-wrap: wrap;
        gap: 16px;
        justify-content: center;
    }
    #dash-time {
        font-size: 32px !important;
    }
    #dash-date {
        font-size: 12px !important;
    }
    .dash-donut-widget {
        width: 80px;
        height: 80px;
    }
    .dash-user-carousel-widget {
        order: 3;
    }
    .user-avatar-circle {
        width: 76px;
        height: 76px;
    }
    .user-live-pill {
        font-size: 10px;
        padding: 2px 8px;
    }
    .dash-weather-icon {
        width: 46px !important;
        height: 46px !important;
        font-size: 22px !important;
    }

    /* Dashboard Sections */
    .dash-center-wrapper {
        padding: 0 12px !important;
    }
    .dash-section {
        margin-top: 40px;
        margin-bottom: 28px;
    }
    .dash-section-title {
        font-size: 20px !important;
        margin-bottom: 20px !important;
    }

    /* Dashboard Card Grid */
    .dash-grid {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
        gap: 20px;
    }
    .dash-card {
        padding: 24px 18px;
        border-radius: 28px;
        min-height: 280px;
    }
    .dash-card:hover {
        transform: translateY(-8px) !important;
    }

    /* Search Bar */
    .search-container-3d {
        max-width: 95%;
        margin: 28px auto 0;
    }
    .search-wrapper-3d {
        border-radius: 16px;
        padding: 4px 6px 4px 14px;
    }
    #dash-search-input {
        font-size: 14px;
        padding: 12px 4px;
    }
    .search-tags {
        gap: 6px;
        margin-top: 12px;
    }
    .search-tag {
        padding: 5px 12px;
        font-size: 11px;
    }
    .search-suggestions {
        border-radius: 14px;
    }
    .suggestion-item {
        padding: 8px 12px;
        gap: 10px;
    }
    .suggestion-icon {
        width: 32px;
        height: 32px;
        font-size: 13px;
    }

    /* SEO Section */
    .seo-section h2 {
        font-size: 18px;
    }
    .seo-grid {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        gap: 10px;
    }
    .seo-card {
        padding: 16px;
    }
    .seo-card h3 {
        font-size: 14px;
    }
    .seo-card p {
        font-size: 12px;
    }

    /* Live Stats */
    .live-stats-area {
        padding: 20px 16px;
        margin-top: 32px;
    }
    .stats-grid {
        gap: 24px;
    }
    .stat-value {
        font-size: 22px;
    }

    /* Footer */
    .footer-row {
        grid-template-columns: 1fr 1fr !important;
        gap: 28px;
    }
    .footer-premium {
        padding: 50px 0 30px;
    }
    .footer-bottom-bar {
        flex-direction: column;
        gap: 16px;
        text-align: center;
    }

    /* Mandala - reduce on tablet */
    .mandala-container {
        opacity: 0.08;
    }

    /* Ambient orbs - smaller */
    .ambient-orb {
        width: 300px;
        height: 300px;
    }
}

/* ---- SMALL TABLET / LARGE PHONE: 600px ---- */
@media (max-width: 600px) {

    /* Header - compact */
    .header-inner {
        padding: 0 10px;
    }
    .nav-links {
        gap: 4px;
    }
    .nav-external {
        padding: 6px 8px;
        font-size: 12px;
    }
    .logo-text {
        font-size: 16px;
    }
    .brand-logo-img {
        height: 62px !important;
        max-width: 240px;
    }
    .logo-icon {
        width: 34px;
        height: 34px;
    }
    .logo {
        gap: 8px;
    }
    .header-nav {
        gap: 6px;
    }
    .theme-btn {
        width: 34px;
        height: 34px;
        font-size: 14px;
        margin-left: 4px;
    }

    /* Hero */
    .hero-section {
        padding: 4px 14px 10px !important;
    }
    .hero-title {
        font-size: 28px !important;
        letter-spacing: -0.5px !important;
    }
    .hero-subtitle {
        font-size: 14px !important;
        line-height: 1.5 !important;
    }

    /* Top Bar */
    .dash-top-bar {
        padding: 16px 18px;
        margin: 16px 10px;
        border-radius: 18px;
        gap: 12px;
    }
    #dash-time {
        font-size: 28px !important;
    }
    #dash-date {
        font-size: 11px !important;
        letter-spacing: 0.5px !important;
    }
    .user-avatar-circle {
        width: 68px;
        height: 68px;
    }
    .user-live-pill {
        display: inline-flex;
    }
    .dash-donut-widget {
        width: 74px;
        height: 74px;
    }


    /* Dashboard */
    .dash-section {
        margin-top: 28px;
        margin-bottom: 20px;
    }
    .dash-section-title {
        font-size: 18px !important;
        margin-bottom: 16px !important;
        gap: 8px !important;
    }

    /* Cards */
    .dash-grid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important;
        gap: 14px;
    }
    .dash-card {
        padding: 20px 14px;
        border-radius: 22px;
        min-height: 240px;
    }
    .dash-card-icon {
        width: 70px !important;
        height: 70px !important;
    }
    .dash-card-icon img {
        width: 50px !important;
        height: 50px !important;
    }
    .dash-card-icon i {
        font-size: 28px !important;
    }
    .dash-card-text h3 {
        font-size: 15px !important;
    }
    .dash-card-text p {
        font-size: 12px !important;
        line-height: 1.4 !important;
    }
    .card-action-link {
        font-size: 11px;
        margin-top: 12px;
    }
    .dash-card-badge {
        font-size: 9px !important;
        padding: 3px 8px !important;
    }

    /* Disable 3D card tilt on touch */
    .dash-card:hover {
        transform: translateY(-5px) !important;
        box-shadow: 0 15px 30px -10px rgba(0, 0, 0, 0.15) !important;
    }

    /* Search */
    .search-container-3d {
        max-width: 100%;
        margin: 20px auto 0;
        padding: 0 4px;
    }
    .search-wrapper-3d {
        border-radius: 14px;
        padding: 3px 6px 3px 12px;
        gap: 8px;
    }
    #dash-search-input {
        font-size: 13px;
        padding: 10px 2px;
    }
    .search-shortcut {
        display: none;
    }
    .search-divider {
        display: none;
    }
    .search-tags {
        gap: 5px;
        margin-top: 10px;
    }
    .search-tag {
        padding: 4px 10px;
        font-size: 10px;
    }
    .search-suggestions {
        border-radius: 12px;
    }
    .suggestion-title {
        font-size: 13px;
    }
    .suggestion-desc {
        font-size: 11px;
    }

    /* SEO */
    .seo-section {
        margin-top: 28px;
    }
    .seo-section h2 {
        font-size: 16px;
        margin-bottom: 14px;
    }
    .seo-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
    .seo-card {
        padding: 14px;
        border-radius: 12px;
    }
    .seo-card h3 {
        font-size: 13px;
    }
    .seo-card p {
        font-size: 11px;
    }

    /* Stats */
    .live-stats-area {
        padding: 18px 12px;
        margin-top: 24px;
        border-radius: 20px;
    }
    .stats-grid {
        gap: 20px;
    }
    .stat-value {
        font-size: 20px;
    }
    .stat-label {
        font-size: 10px;
    }

    /* Age Calculator Mobile Optimization */
    #content-age-calculator .converter-box {
        padding: 20px 14px !important;
        border-radius: 16px !important;
    }
    #content-age-calculator .age-inputs-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    #content-age-calculator .age-inputs-grid .form-group label {
        font-size: 13px !important;
    }
    #content-age-calculator .age-inputs-grid .form-group input {
        padding: 12px 14px !important;
        font-size: 14px !important;
    }
    #content-age-calculator .age-buttons-row {
        flex-direction: column !important;
        gap: 12px !important;
        margin-bottom: 20px !important;
    }
    #content-age-calculator .age-buttons-row button {
        padding: 12px 14px !important;
        font-size: 14px !important;
        width: 100% !important;
        flex: none !important;
    }
    #content-age-calculator .age-giant-banner {
        padding: 20px 14px !important;
        border-radius: 16px !important;
    }
    #content-age-calculator #age-giant-result {
        font-size: 22px !important;
    }
    #content-age-calculator .age-highlights-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    #content-age-calculator .age-highlight-card {
        padding: 14px 12px !important;
        border-radius: 12px !important;
    }
    #content-age-calculator #age-next-birthday,
    #content-age-calculator #age-zodiac {
        font-size: 16px !important;
    }
    #content-age-calculator .age-countdown-box {
        padding: 14px 12px !important;
        border-radius: 16px !important;
    }
    #content-age-calculator #age-countdown-container {
        gap: 6px !important;
    }
    #content-age-calculator #age-countdown-container > div {
        padding: 8px 10px !important;
        min-width: 50px !important;
        border-radius: 8px !important;
    }
    #content-age-calculator #age-countdown-container > div span[id^="cd-"] {
        font-size: 16px !important;
    }
    #content-age-calculator .age-progress-container {
        padding: 14px 12px !important;
        border-radius: 16px !important;
    }

    /* Mobile responsive overrides for all integrated tools */
    .conversion-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        text-align: center !important;
    }
    .conversion-grid .swap-icon {
        transform: rotate(90deg) !important;
        margin: 8px 0 !important;
        display: inline-block !important;
    }
    .resume-form-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        margin-bottom: 8px !important;
    }
    .age-milestones-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    .age-milestones-grid .span-2 {
        grid-column: span 1 !important;
    }
    .ocr-action-bar, .sig-action-bar {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        width: 100% !important;
    }
    .ocr-action-bar button, .sig-action-bar button {
        width: 100% !important;
        flex: none !important;
        padding: 14px !important;
    }

    /* Height Converter Mobile Fix */
    #content-height-converter .converter-box {
        padding: 20px 14px !important;
        border-radius: 16px !important;
    }
    #content-height-converter .converter-box > div:first-child {
        gap: 8px !important;
        justify-content: center !important;
    }
    #content-height-converter .converter-box > div:first-child button {
        padding: 12px 18px !important;
        font-size: 14px !important;
        min-height: 44px !important;
        -webkit-tap-highlight-color: transparent !important;
        touch-action: manipulation !important;
    }
    #content-height-converter input[type="number"] {
        font-size: 20px !important;
        padding: 14px 14px !important;
    }
    #content-height-converter #hc-result-card > div:nth-child(2) {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }
    #content-height-converter #hc-result-card > div:nth-child(2) > div {
        padding: 12px 14px !important;
    }
    #content-height-converter #hc-result-card > div:nth-child(2) > div > div:last-child {
        font-size: 18px !important;
    }

    /* Footer */
    .footer-row {
        grid-template-columns: 1fr !important;
        gap: 24px;
    }
    .footer-premium {
        padding: 40px 0 24px;
        margin-top: 60px;
    }
    .footer-container {
        padding: 0 16px;
    }
    .footer-logo span {
        font-size: 18px;
    }
    .footer-col h4 {
        font-size: 14px;
        margin-bottom: 14px;
    }

    /* Mandala */
    .mandala-container {
        opacity: 0.08;
    }

    /* Ambient orbs - smaller */
    .ambient-orb {
        width: 200px;
        height: 200px;
        filter: blur(80px);
    }

    /* Mission grid (About Us) */
    .mission-grid {
        grid-template-columns: 1fr !important;
    }

    /* Contact page */
    .contact-main-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ---- PHONE: 480px ---- */
@media (max-width: 480px) {

    .nav-links span {
        display: inline-block !important;
    }
    .nav-external {
        padding: 6px 8px;
        border-radius: 8px;
    }
    .logo-text {
        font-size: 14px;
    }
    .brand-logo-img {
        height: 54px !important;
        max-width: 200px;
    }
    .logo-icon {
        width: 36px;
        height: 36px;
    }
    .logo {
        gap: 6px;
    }
    .theme-btn {
        width: 32px;
        height: 32px;
        font-size: 13px;
        margin-left: 2px;
        border-radius: 50%;
    }

    /* Hero */
    .hero-section {
        padding: 4px 10px 8px !important;
    }
    .hero-title {
        font-size: 24px !important;
        letter-spacing: -0.3px !important;
        line-height: 1.2 !important;
    }
    .hero-subtitle {
        font-size: 13px !important;
    }

    /* Top Bar */
    .dash-top-bar {
        padding: 14px 14px;
        margin: 12px 8px;
        border-radius: 16px;
    }
    #dash-time {
        font-size: 24px !important;
    }
    #dash-date {
        font-size: 10px !important;
    }
    .dash-weather-icon {
        width: 36px !important;
        height: 36px !important;
        font-size: 18px !important;
    }

    /* Dashboard */
    .dash-center-wrapper {
        padding: 0 8px !important;
    }
    .dash-section {
        margin-top: 22px;
        margin-bottom: 16px;
    }
    .dash-section-title {
        font-size: 16px !important;
        margin-bottom: 14px !important;
        padding-bottom: 8px;
    }

    /* Cards - single column on very small */
    .dash-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px;
    }
    .dash-card {
        padding: 16px 12px;
        border-radius: 20px;
        min-height: 200px;
        border-width: 1px;
    }
    .dash-card-icon {
        width: 56px !important;
        height: 56px !important;
        margin-bottom: 8px !important;
    }
    .dash-card-icon img {
        width: 40px !important;
        height: 40px !important;
    }
    .dash-card-icon i {
        font-size: 24px !important;
    }
    .dash-card-text h3 {
        font-size: 13px !important;
    }
    .dash-card-text p {
        font-size: 11px !important;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .card-action-link {
        font-size: 10px;
        margin-top: 8px;
    }
    .dash-card-badge {
        font-size: 8px !important;
        padding: 2px 6px !important;
        top: 8px !important;
        right: 8px !important;
    }

    /* Search */
    .search-container-3d {
        padding: 0 2px;
        margin-top: 16px;
    }
    .search-wrapper-3d {
        border-radius: 12px;
        gap: 6px;
        padding: 2px 4px 2px 10px;
    }
    .search-icon-3d {
        font-size: 14px;
    }
    #dash-search-input {
        font-size: 13px;
        padding: 10px 2px;
    }
    .search-clear-btn {
        width: 26px;
        height: 26px;
        border-radius: 8px;
    }
    .search-tags {
        gap: 4px;
        margin-top: 8px;
    }
    .search-tag {
        padding: 4px 8px;
        font-size: 9px;
        gap: 3px;
    }
    .search-tag i {
        font-size: 9px;
    }
    .suggestion-item {
        padding: 8px 10px;
        gap: 8px;
    }
    .suggestion-icon {
        width: 28px;
        height: 28px;
        border-radius: 8px;
        font-size: 12px;
    }
    .suggestion-title {
        font-size: 12px;
    }
    .suggestion-desc {
        font-size: 10px;
    }

    /* SEO */
    .seo-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    .seo-section h2 {
        font-size: 15px;
    }

    /* Stats */
    .live-stats-area {
        padding: 14px 10px;
        border-radius: 16px;
    }
    .stats-grid {
        gap: 16px;
        flex-direction: column;
        align-items: center;
    }
    .stat-value {
        font-size: 18px;
    }

    /* Footer */
    .footer-premium {
        margin-top: 40px;
        padding: 30px 0 20px;
    }
    .footer-container {
        padding: 0 12px;
    }

    /* Mandala - clearly visible on phone in a professional way */
    .mandala-container {
        opacity: 0.08;
    }
    .ambient-orb {
        width: 150px;
        height: 150px;
    }

    /* Back to SizeFix floating btn */
    .floating-site-link {
        bottom: 10px !important;
        right: 10px !important;
        font-size: 12px !important;
        padding: 8px 12px !important;
    }
}

/* ---- ULTRA SMALL: 360px ---- */
@media (max-width: 360px) {
    .hero-title {
        font-size: 20px !important;
    }
    .hero-subtitle {
        font-size: 12px !important;
    }
    .dash-grid {
        grid-template-columns: 1fr !important;
        gap: 10px;
    }
    .dash-card {
        min-height: 180px;
    }
    #dash-time {
        font-size: 22px !important;
    }
    .logo-text {
        display: none;
    }
}

/* ================================================================
   AUTH SYSTEM — Login / Signup Modal & Header Elements
   ================================================================ */

/* ── Header: Login Button (Sunset Gold Edition) ── */
.auth-login-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 20px;
    background: linear-gradient(135deg, #f59e0b 0%, #f97316 100%);
    color: #000 !important;
    border: 1px solid rgba(251, 191, 36, 0.4);
    border-radius: 50px;
    font-size: 13.5px;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 4px 18px rgba(245, 158, 11, 0.4), 0 0 10px rgba(249, 115, 22, 0.2);
    font-family: inherit;
    letter-spacing: 0.3px;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
}
.auth-login-btn::after {
    content: '';
    position: absolute;
    top: 0; left: -100%; width: 50%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transform: skewX(-20deg);
    transition: 0.6s;
}
.auth-login-btn:hover::after {
    left: 150%;
}
.auth-login-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(245, 158, 11, 0.55), 0 0 20px rgba(249, 115, 22, 0.35);
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 50%, #f97316 100%);
    color: #000 !important;
}
.auth-login-btn i {
    color: #000 !important;
    font-size: 14px;
}

/* ── Header: Gen-Z User Profile Pill & Acrylic Dropdown ── */
.auth-user-profile {
    position: relative !important;
    z-index: 999999 !important;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    padding: 5px 14px 5px 6px;
    border-radius: 50px;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    user-select: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.auth-user-profile:hover {
    background: var(--bg-tertiary);
    border-color: rgba(99, 102, 241, 0.4);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(99, 102, 241, 0.15);
}
body.dark-theme .auth-user-profile:hover {
    border-color: rgba(6, 182, 212, 0.45);
    box-shadow: 0 6px 16px rgba(6, 182, 212, 0.18);
}

/* Avatar Ring & Online Pulse */
.gz-avatar-ring {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.auth-user-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, #06b6d4, #8b5cf6);
    color: #ffffff;
    font-weight: 800;
    font-size: 13.5px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
    box-shadow: 0 0 0 2px var(--bg-secondary), 0 2px 8px rgba(0,0,0,0.2);
    transition: all 0.25s ease;
}
.auth-user-avatar img.gz-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}
.gz-online-pulse {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #10b981;
    border: 2px solid var(--bg-secondary);
    box-shadow: 0 0 6px rgba(16, 185, 129, 0.8);
    pointer-events: none;
    animation: gzPulse 2.2s infinite ease-in-out;
}
@keyframes gzPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.18); opacity: 0.85; }
}

.auth-user-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
    max-width: 110px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    letter-spacing: -0.2px;
}

.gz-dropdown-arrow {
    font-size: 10px;
    color: var(--text-muted);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.2s;
}
.auth-user-profile.open .gz-dropdown-arrow {
    transform: rotate(180deg);
    color: #3b82f6;
}

/* ── Gen-Z Acrylic Dropdown Window ── */
.auth-user-dropdown.gz-dropdown-menu {
    position: absolute !important;
    top: calc(100% + 14px) !important;
    right: 0 !important;
    width: 295px !important;
    background: rgba(255, 255, 255, 0.94) !important;
    backdrop-filter: blur(28px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(28px) saturate(180%) !important;
    border: 1px solid rgba(226, 232, 240, 0.95) !important;
    border-radius: 24px !important;
    padding: 12px !important;
    box-shadow: 0 25px 60px rgba(15, 23, 42, 0.2), 0 0 30px rgba(99, 102, 241, 0.12) !important;
    z-index: 99999999 !important;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px) scale(0.95);
    transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
    transform-origin: top right;
    cursor: default;
    user-select: none;
}
.auth-user-dropdown.gz-dropdown-menu.active {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) scale(1) !important;
}

body.dark-theme .auth-user-dropdown.gz-dropdown-menu {
    background: rgba(15, 23, 42, 0.92) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.8), 0 0 35px rgba(6, 182, 212, 0.2) !important;
}

/* User Banner */
.gz-dropdown-user-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 6px 12px 6px;
}
.gz-dropdown-avatar-wrap {
    position: relative;
    flex-shrink: 0;
}
.gz-dropdown-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, #06b6d4, #8b5cf6);
    color: #fff;
    font-size: 17px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8), 0 4px 14px rgba(6, 182, 212, 0.35);
}
.gz-dropdown-avatar img.gz-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}
.gz-online-badge {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f59e0b, #f97316);
    color: #ffffff;
    font-size: 8.5px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--bg-primary);
    box-shadow: 0 2px 6px rgba(245, 158, 11, 0.5);
}
.gz-dropdown-meta {
    flex: 1;
    min-width: 0;
}
.gz-name-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 2px;
}
.gz-user-fullname {
    font-size: 14.5px;
    font-weight: 800;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: -0.3px;
}
.gz-verified-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #3b82f6;
    color: #ffffff;
    font-size: 8px;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(59, 130, 246, 0.4);
}
.gz-user-email {
    display: block;
    font-size: 11.5px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
}

/* Plan Card (Free Limited Time) */
.gz-plan-card {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.12), rgba(249, 115, 22, 0.07));
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: 16px;
    padding: 10px 12px;
    margin: 2px 0 10px 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
body.dark-theme .gz-plan-card {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.14), rgba(249, 115, 22, 0.08));
    border: 1px solid rgba(245, 158, 11, 0.35);
}
.gz-plan-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.gz-plan-pill {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 800;
    color: #d97706;
}
body.dark-theme .gz-plan-pill {
    color: #fbbf24;
}
.gz-plan-pill i {
    font-size: 12px;
    color: #f59e0b;
    filter: drop-shadow(0 2px 6px rgba(245, 158, 11, 0.4));
}
.gz-live-chip {
    font-size: 9.5px;
    font-weight: 900;
    letter-spacing: 0.5px;
    padding: 2px 7px;
    border-radius: 100px;
    background: rgba(16, 185, 129, 0.16);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.3);
}
.gz-plan-sub {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 6px;
}
.gz-plan-sub i {
    color: #10b981;
    font-size: 10px;
}
.gz-join-badge {
    font-size: 10.5px;
    font-weight: 500;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
    padding-top: 4px;
    border-top: 1px dashed rgba(245, 158, 11, 0.2);
}
.gz-join-badge i {
    font-size: 10px;
    color: var(--text-muted);
}

.gz-dropdown-divider {
    height: 1px;
    background: var(--border-color);
    margin: 4px 4px 8px 4px;
    opacity: 0.6;
}

/* Actions Menu */
.gz-dropdown-actions {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.gz-action-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 9px 10px;
    border-radius: 14px;
    border: none;
    background: transparent;
    cursor: pointer;
    text-align: left;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    font-family: inherit;
}
.gz-action-btn:hover {
    background: rgba(99, 102, 241, 0.08);
    transform: translateX(2px);
}
body.dark-theme .gz-action-btn:hover {
    background: rgba(6, 182, 212, 0.12);
}
.gz-action-icon {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: rgba(99, 102, 241, 0.1);
    color: #6366f1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13.5px;
    flex-shrink: 0;
    transition: all 0.2s ease;
}
body.dark-theme .gz-action-icon {
    background: rgba(6, 182, 212, 0.15);
    color: #06b6d4;
}
.gz-action-btn:hover .gz-action-icon {
    transform: scale(1.08);
}
.gz-action-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.gz-action-title {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--text-primary);
}
.gz-action-desc {
    font-size: 10.5px;
    font-weight: 500;
    color: var(--text-muted);
}
.gz-action-arrow {
    font-size: 11px;
    color: var(--text-muted);
    opacity: 0.6;
    transition: transform 0.2s, opacity 0.2s;
}
.gz-action-btn:hover .gz-action-arrow {
    transform: translateX(2px);
    opacity: 1;
}

/* Logout Item */
.gz-action-logout .gz-action-icon {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}
.gz-action-logout:hover {
    background: rgba(239, 68, 68, 0.09) !important;
}
.gz-action-logout .gz-action-title {
    color: #ef4444;
}

/* Keep lower navigation bars strictly below the dropdown */
.tabs-container, .tool-nav-bar, #tabs-container {
    position: relative;
    z-index: 50 !important;
}


/* ═══════════════════════════════════════════════════════════
   SUNSET GOLD + AURORA WAVE AUTH MODAL (V5 Gen-Z Edition)
   ═══════════════════════════════════════════════════════════ */

/* ── Overlay with Ambient Aurora Background ── */
.auth-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(5, 4, 3, 0.82);
    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.auth-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Aurora Wave Glowing Blobs in Background */
.auth-aurora-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
}
.auth-aurora-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(85px);
    opacity: 0.4;
    animation: authAuroraDrift 9s infinite alternate ease-in-out;
}
.auth-aurora-blob.blob-1 {
    width: 460px; height: 460px;
    background: radial-gradient(circle, #f59e0b 0%, #ec4899 45%, transparent 75%);
    top: -80px; left: -80px;
}
.auth-aurora-blob.blob-2 {
    width: 420px; height: 420px;
    background: radial-gradient(circle, #d97706 0%, #8b5cf6 50%, transparent 75%);
    bottom: -80px; right: -80px;
    animation-duration: 12s;
}
@keyframes authAuroraDrift {
    0%   { transform: scale(1) translate(0, 0); opacity: 0.35; }
    50%  { transform: scale(1.15) translate(60px, 40px); opacity: 0.5; }
    100% { transform: scale(0.9) translate(-30px, 70px); opacity: 0.35; }
}

/* ── Modal Box (Sunset Gold Glassmorphism + Conic Beam) ── */
.auth-modal-box {
    position: relative;
    z-index: 10;
    display: flex;
    width: 100%;
    max-width: 880px;
    min-height: 540px;
    background: rgba(18, 14, 10, 0.82);
    backdrop-filter: blur(35px);
    -webkit-backdrop-filter: blur(35px);
    border-radius: 30px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 
        0 35px 90px rgba(0, 0, 0, 0.85),
        0 0 60px rgba(245, 158, 11, 0.18),
        inset 0 1px 1px rgba(255, 255, 255, 0.15);
    overflow: hidden;
    transform: scale(0.9) translateY(25px);
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    margin: auto;
}
.auth-modal-overlay.active .auth-modal-box {
    transform: scale(1) translateY(0);
}

/* Ambient Liquid Conic Border Beam */
.auth-modal-box::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 32px;
    background: conic-gradient(from 0deg at 50% 50%, transparent 0%, #f59e0b 25%, #fbbf24 35%, transparent 50%, transparent 100%);
    animation: authRotateBeam 6s linear infinite;
    z-index: -1;
    opacity: 0.75;
    pointer-events: none;
}
@keyframes authRotateBeam {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Light theme support */
body:not(.dark-theme) .auth-modal-box {
    background: rgba(255, 255, 255, 0.88);
    border-color: rgba(255, 255, 255, 0.95);
    box-shadow: 0 25px 70px rgba(245, 158, 11, 0.14), 0 10px 30px rgba(0, 0, 0, 0.05);
}

/* ══════════════════════════════════
   LEFT PANEL — Sunset Gold Branding
   ══════════════════════════════════ */
.auth-left-panel {
    flex: 0 0 44%;
    background: linear-gradient(145deg, rgba(245, 158, 11, 0.14) 0%, rgba(18, 14, 10, 0.45) 100%);
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 44px 38px;
    z-index: 2;
}
body:not(.dark-theme) .auth-left-panel {
    background: linear-gradient(145deg, rgba(254, 243, 199, 0.9) 0%, rgba(255, 251, 235, 0.6) 100%);
    border-right-color: rgba(226, 232, 240, 0.9);
}

/* Floating Gen-Z Chips */
.auth-floating-chips {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}
.auth-genz-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 13px;
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: 50px;
    font-size: 11.5px;
    font-weight: 800;
    color: #fbbf24;
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.15);
    animation: authChipFloat 3.5s ease-in-out infinite alternate;
}
body:not(.dark-theme) .auth-genz-chip {
    background: rgba(254, 243, 199, 0.95);
    border-color: rgba(245, 158, 11, 0.4);
    color: #d97706;
}
.auth-genz-chip:nth-child(2) { animation-delay: 0.5s; }
.auth-genz-chip:nth-child(3) { animation-delay: 1s; }

@keyframes authChipFloat {
    0%   { transform: translateY(0); }
    100% { transform: translateY(-4px); }
}

.auth-left-title {
    font-size: 36px;
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: -0.8px;
    margin-bottom: 14px;
    color: #ffffff;
    text-transform: uppercase;
}
body:not(.dark-theme) .auth-left-title {
    color: #1c1917;
}
.auth-left-title span {
    background: linear-gradient(135deg, #ffffff 10%, #fbbf24 60%, #f59e0b 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 30px rgba(245, 158, 11, 0.35);
}
body:not(.dark-theme) .auth-left-title span {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.auth-left-sub {
    font-size: 14px;
    line-height: 1.6;
    color: #a1a1aa;
    margin-bottom: 26px;
    font-weight: 450;
    max-width: 320px;
}
body:not(.dark-theme) .auth-left-sub {
    color: #57534e;
}

/* Feature badges */
.auth-features {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}
.auth-feature-item {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    font-weight: 700;
    color: #e4e4e7;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
body:not(.dark-theme) .auth-feature-item {
    color: #292524;
}
.auth-feature-item:hover {
    transform: translateX(5px);
}
.auth-feature-icon {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: rgba(245, 158, 11, 0.15);
    border: 1px solid rgba(245, 158, 11, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fbbf24;
    font-size: 12px;
    box-shadow: 0 0 12px rgba(245, 158, 11, 0.2);
    flex-shrink: 0;
}
body:not(.dark-theme) .auth-feature-icon {
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(245, 158, 11, 0.3);
    color: #d97706;
}

/* ══════════════════════════════════
   RIGHT PANEL — Form Area
   ══════════════════════════════════ */
.auth-right-panel {
    flex: 1;
    background: transparent;
    padding: 38px 38px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    overflow-y: auto;
    z-index: 2;
}

/* Close Button */
.auth-modal-close {
    position: absolute;
    top: 16px; right: 16px;
    width: 36px; height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.06);
    color: #a1a1aa;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
    z-index: 10;
}
body:not(.dark-theme) .auth-modal-close {
    border-color: #e2e8f0;
    background: #ffffff;
    color: #64748b;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.auth-modal-close:hover {
    background: #f59e0b;
    color: #ffffff;
    border-color: #f59e0b;
    transform: rotate(90deg) scale(1.1);
    box-shadow: 0 0 15px rgba(245, 158, 11, 0.4);
}

/* Form Panel with Spring Pop Animation */
.auth-form-panel {
    animation: authSpringPop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes authSpringPop {
    0%   { opacity: 0; transform: translateY(18px) scale(0.94); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Auth Mode Tabs (Sign Up / Log In Segment Switcher) ── */
.auth-mode-tabs {
    display: flex;
    gap: 8px;
    background: rgba(255, 255, 255, 0.05);
    padding: 5px;
    border-radius: 14px;
    margin-bottom: 20px;
    border: 1.5px solid rgba(255, 255, 255, 0.1);
}
body:not(.dark-theme) .auth-mode-tabs {
    background: #f5f5f4;
    border-color: #e7e5e4;
}
.auth-tab {
    flex: 1;
    padding: 10px 12px;
    border-radius: 10px;
    border: none;
    background: transparent;
    color: #a1a1aa;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
}
body:not(.dark-theme) .auth-tab {
    color: #78716c;
}
.auth-tab:hover {
    color: #ffffff;
}
body:not(.dark-theme) .auth-tab:hover {
    color: #1c1917;
}
.auth-tab.active {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    color: #1a1001 !important;
    font-weight: 800;
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.4);
}
body:not(.dark-theme) .auth-tab.active {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: #ffffff !important;
}

.auth-form-header {
    margin-bottom: 22px;
    text-align: center;
}
.auth-form-header h3 {
    font-size: 26px;
    font-weight: 900;
    color: #ffffff;
    margin: 0 0 4px;
    letter-spacing: -0.5px;
}
body:not(.dark-theme) .auth-form-header h3 {
    color: #1c1917;
}
.auth-form-header p {
    font-size: 13.5px;
    color: #a1a1aa;
    margin: 0;
}
body:not(.dark-theme) .auth-form-header p {
    color: #57534e;
}

/* ── Modern Rounded Input Fields ── */
.auth-field {
    position: relative;
    margin-bottom: 16px;
}
.auth-field-icon {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #a1a1aa;
    font-size: 14px;
    pointer-events: none;
    transition: all 0.25s ease;
    z-index: 1;
}
body:not(.dark-theme) .auth-field-icon {
    color: #78716c;
}
.auth-field input {
    width: 100%;
    height: 48px;
    background: rgba(255, 255, 255, 0.05);
    border: 1.5px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    padding: 0 42px 0 44px;
    color: #ffffff;
    font-size: 14px;
    font-weight: 550;
    outline: none;
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-sizing: border-box;
}
body:not(.dark-theme) .auth-field input {
    background: rgba(255, 255, 255, 0.95);
    border-color: #e7e5e4;
    color: #1c1917;
}
.auth-field input::placeholder {
    color: #71717a;
    font-weight: 400;
}
body:not(.dark-theme) .auth-field input::placeholder {
    color: #a8a29e;
}
.auth-field input:focus {
    border-color: #f59e0b;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 0 3.5px rgba(245, 158, 11, 0.25), 0 0 25px rgba(245, 158, 11, 0.15);
    transform: translateY(-1px);
}
body:not(.dark-theme) .auth-field input:focus {
    background: #ffffff;
    box-shadow: 0 0 0 3.5px rgba(245, 158, 11, 0.2);
}
.auth-field:focus-within .auth-field-icon {
    color: #f59e0b;
    transform: translateY(-50%) scale(1.15);
}

.auth-pass-toggle {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #71717a;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 2;
}
.auth-pass-toggle:hover {
    color: #f59e0b;
    transform: translateY(-50%) scale(1.15);
}

/* Forgot Password */
.auth-forgot {
    text-align: right;
    font-size: 12.5px;
    color: #fbbf24;
    cursor: pointer;
    margin-top: -6px;
    margin-bottom: 18px;
    font-weight: 600;
    transition: all 0.2s ease;
}
body:not(.dark-theme) .auth-forgot {
    color: #d97706;
}
.auth-forgot:hover {
    text-decoration: underline;
    color: #f59e0b;
}

/* ── Primary Sunset Gold Shimmer Button ── */
.auth-btn-primary {
    width: 100%;
    height: 48px;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 50%, #b45309 100%);
    color: #ffffff;
    border: none;
    border-radius: 14px;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: 0 10px 25px -4px rgba(245, 158, 11, 0.45), 0 0 20px rgba(245, 158, 11, 0.25);
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.auth-btn-primary::before {
    content: '';
    position: absolute;
    top: 0; left: -150%;
    width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
    transition: left 0.75s;
}
.auth-btn-primary:hover::before {
    left: 150%;
}
.auth-btn-primary:hover {
    transform: translateY(-2px) scale(1.01);
    box-shadow: 0 15px 35px -4px rgba(245, 158, 11, 0.65), 0 0 30px rgba(245, 158, 11, 0.4);
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 50%, #d97706 100%);
}
.auth-btn-primary:active {
    transform: translateY(1px);
}
.auth-btn-arrow {
    font-size: 13px;
    transition: transform 0.25s ease;
}
.auth-btn-primary:hover .auth-btn-arrow {
    transform: translateX(4px);
}

/* ── Divider ── */
.auth-divider {
    display: flex;
    align-items: center;
    margin: 16px 0;
    color: #71717a;
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}
body:not(.dark-theme) .auth-divider {
    color: #a8a29e;
}
.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
}
body:not(.dark-theme) .auth-divider::before,
body:not(.dark-theme) .auth-divider::after {
    background: #e7e5e4;
}
.auth-divider span {
    padding: 0 10px;
}

/* ── Google Button ── */
.auth-btn-google {
    width: 100%;
    height: 44px;
    background: rgba(255, 255, 255, 0.05);
    border: 1.5px solid rgba(255, 255, 255, 0.12);
    color: #f4f4f5;
    border-radius: 14px;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
body:not(.dark-theme) .auth-btn-google {
    background: #ffffff;
    border-color: #e7e5e4;
    color: #1c1917;
    box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}
.auth-btn-google:hover {
    border-color: #f59e0b;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.08);
}

/* ── Switch Text ── */
.auth-switch-text {
    text-align: center;
    font-size: 13px;
    color: #a1a1aa;
    margin-top: 18px;
    margin-bottom: 0;
    font-weight: 550;
}
body:not(.dark-theme) .auth-switch-text {
    color: #78716c;
}
.auth-switch-text span {
    color: #fbbf24;
    cursor: pointer;
    font-weight: 800;
    margin-left: 4px;
    transition: all 0.2s ease;
}
body:not(.dark-theme) .auth-switch-text span {
    color: #d97706;
}
.auth-switch-text span:hover {
    text-decoration: underline;
    color: #f59e0b;
}

/* ── Error & Success Badges ── */
.auth-error {
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.35);
    color: #f87171;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 12.5px;
    margin-bottom: 14px;
    font-weight: 600;
    display: none;
}
.auth-success {
    background: rgba(34, 197, 94, 0.12);
    border: 1px solid rgba(34, 197, 94, 0.35);
    color: #4ade80;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 12.5px;
    margin-bottom: 14px;
    font-weight: 600;
    display: none;
}

/* ── Toast Notification ── */
.auth-toast {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%) translateY(80px);
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    padding: 14px 28px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 600;
    z-index: 999999;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 12px 40px rgba(99,102,241,0.5);
    transition: transform 0.5s cubic-bezier(0.34,1.56,0.64,1), opacity 0.4s ease;
    opacity: 0;
    white-space: nowrap;
}
.auth-toast.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

/* ══════════════════════════════════
   HEADER: Login btn & User profile
   ══════════════════════════════════ */
.auth-login-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 20px;
    background: linear-gradient(135deg, #f59e0b 0%, #f97316 100%);
    color: #000 !important;
    border: 1px solid rgba(251, 191, 36, 0.4);
    border-radius: 50px;
    font-size: 13.5px;
    font-weight: 800;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 4px 18px rgba(245, 158, 11, 0.4);
    white-space: nowrap;
}
.auth-login-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(245, 158, 11, 0.55);
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 50%, #f97316 100%);
    color: #000 !important;
}

/* ====== MY ACCOUNT MODAL ====== */
.account-left-panel {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 32px 24px !important;
    text-align: center !important;
}
.account-left-panel .auth-left-content {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 0 !important;
    margin: 0 !important;
}
.account-avatar-wrapper {
    position: relative;
    width: 110px;
    height: 110px;
    margin: 0 auto 16px auto !important;
    display: flex;
    align-items: center;
    justify-content: center;
}
.account-avatar-preview {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: 3px solid rgba(255, 255, 255, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    font-weight: 800;
    color: #fff;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}
.account-avatar-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.account-avatar-upload-btn {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #7c3aed;
    border: 2px solid #fff;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    transition: all 0.2s ease;
}
.account-avatar-upload-btn:hover {
    background: #6d28d9;
    transform: scale(1.1);
}
.account-profile-name,
.account-title,
#account-profile-name {
    width: 100% !important;
    font-size: 22px !important;
    font-weight: 800 !important;
    color: var(--text-primary) !important;
    margin: 0 auto 4px auto !important;
    padding: 0 !important;
    letter-spacing: -0.3px !important;
    text-align: center !important;
    display: block !important;
}
body:not(.dark-theme) #account-profile-name {
    color: #1c1917 !important;
}
.account-profile-email {
    width: 100% !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #475569 !important;
    margin: 0 auto 20px auto !important;
    text-align: center !important;
    display: block !important;
}
body.dark-theme .account-profile-email {
    color: #94a3b8 !important;
}

.account-badge-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    align-items: center;
}
.account-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    padding: 8px 18px;
    border-radius: 20px;
    width: 100%;
    max-width: 240px;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: all 0.2s ease;
}
.account-badge-plan {
    background: rgba(245, 158, 11, 0.14);
    border: 1px solid rgba(245, 158, 11, 0.45);
    color: #b45309;
}
body.dark-theme .account-badge-plan {
    background: rgba(245, 158, 11, 0.18);
    border: 1px solid rgba(245, 158, 11, 0.5);
    color: #fbbf24;
}
.account-badge-plan i {
    color: #d97706;
    font-size: 13px;
}
body.dark-theme .account-badge-plan i {
    color: #f59e0b;
}

.account-badge-date {
    background: rgba(15, 23, 42, 0.07);
    border: 1px solid rgba(15, 23, 42, 0.16);
    color: #1e293b;
}
body.dark-theme .account-badge-date {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #e2e8f0;
}
.account-badge-date i {
    color: #475569;
    font-size: 13px;
}
body.dark-theme .account-badge-date i {
    color: #94a3b8;
}
.account-field-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-secondary);
    margin-bottom: 6px;
    margin-left: 2px;
}
.account-right-panel .auth-field {
    margin-bottom: 18px;
}

/* ====== ACCOUNT MODAL SCROLL & VIEWPORT FIX ====== */
#account-modal .auth-modal-box {
    max-height: 92vh !important;
    min-height: auto !important;
    overflow: hidden !important;
    align-items: stretch !important;
}

#account-modal .account-right-panel {
    max-height: 92vh !important;
    overflow-y: auto !important;
    justify-content: flex-start !important;
    padding: 32px 34px 36px 34px !important;
    scroll-behavior: smooth;
}

/* Custom Sleek Scrollbar for Account Right Panel */
#account-modal .account-right-panel::-webkit-scrollbar {
    width: 6px;
}
#account-modal .account-right-panel::-webkit-scrollbar-track {
    background: transparent;
}
#account-modal .account-right-panel::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.35);
    border-radius: 10px;
}
#account-modal .account-right-panel::-webkit-scrollbar-thumb:hover {
    background: rgba(148, 163, 184, 0.65);
}

/* DPDP Notice Card */
.account-dpdp-notice {
    margin-top: 20px !important;
    padding: 15px 18px !important;
    background: rgba(6, 182, 212, 0.08) !important;
    border: 1px solid rgba(6, 182, 212, 0.32) !important;
    border-radius: 14px !important;
    text-align: left !important;
}
.account-dpdp-notice-header {
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
    margin-bottom: 9px !important;
}
.account-dpdp-notice-header i {
    color: #0891b2 !important;
    font-size: 15px !important;
}
.account-dpdp-notice-header strong {
    color: #0e7490 !important;
    font-size: 13.5px !important;
    font-weight: 800 !important;
    letter-spacing: 0.3px !important;
}
.account-dpdp-notice ul {
    margin: 0 !important;
    padding-left: 18px !important;
    font-size: 12px !important;
    color: #334155 !important;
    line-height: 1.6 !important;
}
.account-dpdp-notice li {
    margin-bottom: 5px !important;
}
.account-dpdp-notice li:last-child {
    margin-bottom: 0 !important;
}
.account-dpdp-notice li strong {
    color: #0f172a !important;
    font-weight: 700 !important;
}

/* Danger Zone Card */
.account-danger-zone {
    margin-top: 16px !important;
    margin-bottom: 8px !important;
    padding: 15px 18px !important;
    background: rgba(239, 68, 68, 0.06) !important;
    border: 1.5px solid rgba(239, 68, 68, 0.3) !important;
    border-radius: 14px !important;
    text-align: left !important;
}
.account-danger-zone-content {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
}
.account-danger-zone-text {
    max-width: 280px !important;
}
.account-danger-zone-title {
    color: #b91c1c !important;
    font-size: 13.5px !important;
    font-weight: 800 !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}
.account-danger-zone-desc {
    font-size: 12px !important;
    color: #475569 !important;
    display: block !important;
    margin-top: 3px !important;
    line-height: 1.45 !important;
}
#account-delete-btn {
    padding: 9px 18px !important;
    background: #fee2e2 !important;
    border: 1.5px solid #ef4444 !important;
    color: #b91c1c !important;
    font-size: 12.5px !important;
    font-weight: 800 !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.15) !important;
    transition: all 0.22s ease !important;
    white-space: nowrap !important;
}
#account-delete-btn:hover {
    background: #dc2626 !important;
    color: #ffffff !important;
    border-color: #dc2626 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 14px rgba(220, 38, 38, 0.32) !important;
}

/* Dark Theme Overrides */
body.dark-theme .account-dpdp-notice {
    background: rgba(6, 182, 212, 0.08) !important;
    border-color: rgba(6, 182, 212, 0.28) !important;
}
body.dark-theme .account-dpdp-notice-header i {
    color: #22d3ee !important;
}
body.dark-theme .account-dpdp-notice-header strong {
    color: #38bdf8 !important;
}
body.dark-theme .account-dpdp-notice ul {
    color: #94a3b8 !important;
}
body.dark-theme .account-dpdp-notice li strong {
    color: #e2e8f0 !important;
}

body.dark-theme .account-danger-zone {
    background: rgba(239, 68, 68, 0.08) !important;
    border-color: rgba(239, 68, 68, 0.35) !important;
}
body.dark-theme .account-danger-zone-title {
    color: #f87171 !important;
}
body.dark-theme .account-danger-zone-desc {
    color: #cbd5e1 !important;
}
body.dark-theme #account-delete-btn {
    background: rgba(239, 68, 68, 0.18) !important;
    border-color: rgba(239, 68, 68, 0.5) !important;
    color: #fca5a5 !important;
    box-shadow: none !important;
}
body.dark-theme #account-delete-btn:hover {
    background: #ef4444 !important;
    color: #ffffff !important;
    border-color: #ef4444 !important;
}

/* ── Mobile Responsive ── */
@media (max-width: 680px) {
    .auth-left-panel { display: none; }
    .auth-modal-box {
        max-width: 420px;
        min-height: auto;
        border-radius: 24px;
    }
    .auth-right-panel { padding: 32px 24px; }
}
@media (max-width: 480px) {
    .auth-login-btn span { display: inline-block !important; }
    .auth-login-btn { padding: 6px 12px; }
    .auth-user-name { display: inline-block !important; max-width: 90px; }
    .auth-toast { width: 90%; white-space: normal; text-align: center; }
}


/* ============================================================
   GEN-Z REDESIGN — NEON DARK THEME OVERRIDE
   ============================================================ */

body.dark-theme {
    --bg-primary: #05050d;
    --bg-secondary: rgba(12, 12, 24, 0.75);
    --bg-tertiary: #0d0d1c;
    --bg-card: rgba(16, 16, 32, 0.6);
    --bg-glass: rgba(10, 10, 20, 0.88);
    --border-color: rgba(168, 85, 247, 0.1);
    --border-active: #a855f7;
    --text-primary: #f0eeff;
    --text-secondary: #c4b8e8;
    --text-muted: #7a6e9a;
    --accent: #a855f7;
    --accent-light: #c084fc;
    --accent-glow: rgba(168, 85, 247, 0.22);
    --danger: #f43f5e;
    --success: #22c55e;
    --warning: #f59e0b;
    --grad-primary: linear-gradient(135deg, #a855f7 0%, #ec4899 50%, #f97316 100%);
}

body.dark-theme {
    background-image:
        radial-gradient(circle at 15% 15%, rgba(168,85,247,0.12) 0%, transparent 40%),
        radial-gradient(circle at 85% 80%, rgba(236,72,153,0.10) 0%, transparent 40%),
        radial-gradient(circle at 50% 50%, rgba(6,182,212,0.06) 0%, transparent 50%),
        radial-gradient(rgba(168,85,247,0.07) 1px, transparent 1px) !important;
    background-size: auto, auto, auto, 28px 28px !important;
}

body.dark-theme .header {
    background: rgba(5, 5, 13, 0.85) !important;
    border-bottom: 1px solid rgba(168, 85, 247, 0.18) !important;
    box-shadow: 0 4px 30px rgba(168, 85, 247, 0.08) !important;
}

body.dark-theme .logo-text {
    background: linear-gradient(90deg, #c084fc, #ec4899);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

body.dark-theme .logo-icon {
    background: rgba(168, 85, 247, 0.1);
    border: 1px solid rgba(168, 85, 247, 0.25);
    box-shadow: 0 0 16px rgba(168, 85, 247, 0.2);
}

body.dark-theme .header-badge {
    background: rgba(168, 85, 247, 0.1);
    color: #c084fc;
    border-color: rgba(168, 85, 247, 0.3);
}

body.dark-theme .hero-section {
    padding: 20px 20px 16px;
    background: none;
}

body.dark-theme .hero-title {
    font-size: clamp(32px, 5vw, 44px);
    font-weight: 900;
    letter-spacing: -1.5px;
    line-height: 1.15;
    margin-bottom: 10px;
}

body.dark-theme .hero-accent {
    background: linear-gradient(135deg, #a855f7 0%, #ec4899 50%, #f97316 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 30px rgba(168,85,247,0.5));
}

body.dark-theme .hero-subtitle {
    font-size: 16px;
    color: #9d8ec4;
    font-weight: 400;
}

body.dark-theme .hero-cta-btn {
    background: linear-gradient(135deg, #a855f7, #ec4899) !important;
    box-shadow: 0 8px 28px rgba(168,85,247,0.45) !important;
    transition: all 0.3s cubic-bezier(0.34,1.56,0.64,1) !important;
}

body.dark-theme .hero-cta-btn:hover {
    transform: translateY(-3px) scale(1.04) !important;
    box-shadow: 0 14px 36px rgba(168,85,247,0.55), 0 0 40px rgba(236,72,153,0.25) !important;
}

body.dark-theme .hero-cta-btn-outline {
    color: #c084fc !important;
    border-color: rgba(192,132,252,0.5) !important;
}

body.dark-theme .hero-cta-btn-outline:hover {
    background: rgba(168,85,247,0.1) !important;
    border-color: #a855f7 !important;
    box-shadow: 0 0 20px rgba(168,85,247,0.25) !important;
    transform: translateY(-2px) !important;
}

/* =====================================================
   ⚡ GEN-Z FLOATING CAPSULE CATEGORY DOCK
   ===================================================== */
.gz-pills-dock-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 14px 20px 28px;
    position: relative;
    z-index: 20;
}

.gz-category-pills {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: #ffffff;
    border: 1.5px solid #cbd5e1;
    border-radius: 100px;
    box-shadow: 0 10px 30px -4px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.gz-category-pills::-webkit-scrollbar {
    display: none;
}

body.dark-theme .gz-category-pills {
    background: rgba(15, 23, 42, 0.95);
    border: 1.5px solid rgba(56, 189, 248, 0.28);
    box-shadow: 0 16px 40px -8px rgba(0, 0, 0, 0.7), 0 0 30px rgba(6, 182, 212, 0.12), inset 0 1px 1px rgba(255, 255, 255, 0.1);
}

.gz-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 100px;
    font-size: 13.5px;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    border: 1.5px solid #e2e8f0;
    background: #f8fafc;
    color: #1e293b;
    user-select: none;
    white-space: nowrap;
    outline: none;
    font-family: inherit;
    position: relative;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

body.dark-theme .gz-pill {
    border-color: rgba(255, 255, 255, 0.08);
    background: rgba(30, 41, 59, 0.7);
    color: #f1f5f9;
}

.gz-pill-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    color: var(--pill-accent);
}

.gz-pill-text {
    font-size: 13.5px;
    letter-spacing: 0.1px;
    font-weight: 800;
}

.gz-pill-badge {
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 20px;
    background: rgba(16, 185, 129, 0.16);
    color: #059669;
    font-weight: 900;
    letter-spacing: 0.5px;
}

body.dark-theme .gz-pill-badge {
    background: rgba(16, 185, 129, 0.25);
    color: #34d399;
}

/* Category Accent Theme Colors */
.gz-pill.gz-all       { --pill-accent: #059669; --pill-glow: rgba(16, 185, 129, 0.4); --pill-bg: linear-gradient(135deg, #10b981, #059669); }
.gz-pill.gz-image     { --pill-accent: #7c3aed; --pill-glow: rgba(124, 58, 237, 0.4);  --pill-bg: linear-gradient(135deg, #8b5cf6, #6d28d9); }
.gz-pill.gz-pdf       { --pill-accent: #e11d48; --pill-glow: rgba(225, 29, 72, 0.4);   --pill-bg: linear-gradient(135deg, #f43f5e, #be123c); }
.gz-pill.gz-calc      { --pill-accent: #d97706; --pill-glow: rgba(217, 119, 6, 0.4);   --pill-bg: linear-gradient(135deg, #f59e0b, #b45309); }
.gz-pill.gz-doc       { --pill-accent: #0284c7; --pill-glow: rgba(2, 132, 199, 0.4);   --pill-bg: linear-gradient(135deg, #06b6d4, #0369a1); }
.gz-pill.gz-apps      { --pill-accent: #16a34a; --pill-glow: rgba(34, 197, 94, 0.4);   --pill-bg: linear-gradient(135deg, #22c55e, #16a34a); }

.gz-pill.gz-apps .gz-pill-badge {
    background: rgba(34, 197, 94, 0.18);
    color: #16a34a;
}
body.dark-theme .gz-pill.gz-apps .gz-pill-badge {
    background: rgba(34, 197, 94, 0.28);
    color: #4ade80;
}

/* Inactive Hover */
.gz-pill:hover:not(.gz-active) {
    background: #ffffff;
    border-color: var(--pill-accent);
    color: #0f172a;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

body.dark-theme .gz-pill:hover:not(.gz-active) {
    background: rgba(51, 65, 85, 0.85);
    border-color: var(--pill-accent);
    color: #ffffff;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

.gz-pill:hover .gz-pill-icon {
    transform: scale(1.2) rotate(-6deg);
}

/* Active Pill State */
.gz-pill.gz-active {
    background: var(--pill-bg) !important;
    color: #ffffff !important;
    box-shadow: 0 6px 20px -2px var(--pill-glow), 0 0 0 1.5px rgba(255, 255, 255, 0.3) inset !important;
    border-color: transparent !important;
    transform: translateY(-2px) scale(1.04);
}

.gz-pill.gz-active .gz-pill-icon {
    color: #ffffff !important;
    transform: scale(1.15);
}

.gz-pill.gz-active .gz-pill-badge {
    background: rgba(255, 255, 255, 0.28);
    color: #ffffff;
}

@media (max-width: 768px) {
    .gz-pills-dock-wrap {
        padding: 8px 12px 20px;
        overflow-x: auto;
        justify-content: flex-start;
        -webkit-overflow-scrolling: touch;
    }
    .gz-category-pills {
        padding: 6px 8px;
        border-radius: 50px;
        width: max-content;
        gap: 6px;
    }
    .gz-pill {
        padding: 8px 15px;
        font-size: 13px;
    }
}

body.dark-theme .dash-section-title {
    font-size: 22px;
    font-weight: 900;
    letter-spacing: -0.5px;
    gap: 10px;
    margin-bottom: 24px;
}

body.dark-theme .section-dot {
    box-shadow: 0 0 10px currentColor;
}

body.dark-theme .dash-card {
    background: rgba(16, 12, 36, 0.55) !important;
    border: 1.5px solid rgba(168, 85, 247, 0.1) !important;
    border-radius: 28px !important;
    min-height: 260px !important;
    padding: 26px 20px !important;
    /* backdrop-filter optimized for smooth 60fps scrolling */
    background: #141126 !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.35), 0 0 0 0.5px rgba(255,255,255,0.04) inset !important;
    transition: all 0.4s cubic-bezier(0.23,1,0.32,1) !important;
}

body.dark-theme .dash-card:hover {
    transform: translateY(-10px) rotateX(6deg) !important;
    border-color: rgba(168, 85, 247, 0.55) !important;
    box-shadow: 0 24px 60px rgba(0,0,0,0.45), 0 0 30px rgba(168,85,247,0.15), 0 0 0 0.5px rgba(168,85,247,0.4) inset !important;
    background: rgba(25, 16, 55, 0.7) !important;
}

body.dark-theme .dash-card-text h3 {
    font-size: 16px !important;
    font-weight: 800 !important;
    color: #f0eeff !important;
    letter-spacing: -0.3px;
}

body.dark-theme .dash-card-text p {
    font-size: 13px !important;
    color: #8070a8 !important;
}

body.dark-theme .premium-icon {
    width: 80px !important;
    height: 80px !important;
    border-radius: 22px !important;
    font-size: 30px !important;
    margin-bottom: 16px !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4), 0 0 20px rgba(168,85,247,0.1), inset 0 1px 0 rgba(255,255,255,0.25) !important;
}

body.dark-theme .dash-card:hover .premium-icon {
    transform: translateY(-8px) scale(1.12) translateZ(0) !important;
    box-shadow: 0 18px 40px rgba(0,0,0,0.45), 0 0 30px rgba(168,85,247,0.25), inset 0 1px 0 rgba(255,255,255,0.35) !important;
}

body.dark-theme .dash-card-badge.hot {
    background: rgba(244, 63, 94, 0.12);
    color: #fb7185;
    border-color: rgba(244,63,94,0.35);
}

body.dark-theme .dash-card-badge.new {
    background: rgba(34, 197, 94, 0.1);
    color: #4ade80;
    border-color: rgba(34,197,94,0.3);
}

body.dark-theme .search-wrapper-3d {
    background: rgba(16,12,36,0.7) !important;
    border: 1.5px solid rgba(168,85,247,0.2) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.4) !important;
}

body.dark-theme .search-wrapper-3d:focus-within {
    border-color: rgba(168,85,247,0.55) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.4), 0 0 24px rgba(168,85,247,0.2) !important;
}

body.dark-theme #dash-search-input { color: #f0eeff !important; }
body.dark-theme #dash-search-input::placeholder { color: #5a4d7a !important; }

body.dark-theme .search-tag {
    background: rgba(168,85,247,0.08) !important;
    border-color: rgba(168,85,247,0.18) !important;
    color: #9d8ec4 !important;
}

body.dark-theme .search-tag:hover {
    background: rgba(168,85,247,0.18) !important;
    color: #c084fc !important;
}

body.dark-theme .ambient-orb.orb-1 {
    background: radial-gradient(circle, rgba(168,85,247,0.25) 0%, transparent 70%) !important;
}
body.dark-theme .ambient-orb.orb-2 {
    background: radial-gradient(circle, rgba(236,72,153,0.2) 0%, transparent 70%) !important;
}
body.dark-theme .ambient-orb.orb-3 {
    background: radial-gradient(circle, rgba(6,182,212,0.15) 0%, transparent 70%) !important;
}

body.dark-theme .seo-card {
    background: rgba(16,12,36,0.4);
    border-color: rgba(168,85,247,0.1);
}

body.dark-theme .dash-grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 20px;
}

body.dark-theme .nav-external { background: rgba(255,255,255,0.03); color: #94a3b8; }
body.dark-theme .nav-external:hover { background: rgba(245, 158, 11, 0.12); color: #fbbf24; }


body.dark-theme ::-webkit-scrollbar-track { background: #0a0a18; }
body.dark-theme ::-webkit-scrollbar-thumb { background: rgba(168,85,247,0.3); border-radius: 8px; }
body.dark-theme ::-webkit-scrollbar-thumb:hover { background: rgba(168,85,247,0.55); }

body.dark-theme .dash-top-bar {
    background: rgba(14, 10, 30, 0.6);
    border-color: rgba(168, 85, 247, 0.12);
}

.dash-card.gz-hidden { display: none !important; }
.dash-card.gz-filtered {
    animation: gz-card-in 0.22s cubic-bezier(0.16, 1, 0.3, 1) both;
    will-change: transform, opacity;
}

@keyframes gz-card-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

.gz-pill:active {
    transform: scale(0.95) !important;
}

@media (max-width: 600px) {
    .gz-pill { padding: 7px 14px; font-size: 12px; }
    body.dark-theme .dash-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; }
    body.dark-theme .dash-card { min-height: 210px !important; padding: 20px 14px !important; }
    body.dark-theme .premium-icon { width: 64px !important; height: 64px !important; font-size: 24px !important; }
}

/* ===== LANGUAGE TOGGLE BUTTON ===== */
.lang-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 20px;
    border: 1px solid rgba(6, 182, 212, 0.4);
    background: rgba(6, 182, 212, 0.1);
    color: var(--accent-color, #06b6d4);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.25s ease;
}
.lang-toggle-btn:hover {
    background: rgba(6, 182, 212, 0.25);
    border-color: #06b6d4;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(6, 182, 212, 0.25);
}

/* Google Translate Clean Overrides */
body { top: 0px !important; position: static !important; }
.goog-te-banner-frame.skiptranslate,
.goog-te-banner-frame { display: none !important; visibility: hidden !important; height: 0 !important; }
body > .skiptranslate { display: none !important; }
#goog-gt-tt, .goog-te-balloon-frame { display: none !important; }
.goog-text-highlight { background: none !important; box-shadow: none !important; }


/* ===== WHATSAPP SHARE BUTTON ===== */
.btn-whatsapp-share {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 30px;
    background: linear-gradient(135deg, #25D366, #128C7E);
    color: #fff !important;
    font-weight: 700;
    font-size: 14px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    box-shadow: 0 4px 15px rgba(37, 211, 102, 0.35);
    transition: all 0.25s ease;
}
.btn-whatsapp-share:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.5);
}

/* ===== TYPING SPEED TEST STYLING ===== */
.typing-test-container {
    max-width: 900px;
    margin: 0 auto;
    background: var(--bg-card, #131127);
    border: 1px solid var(--border-color, rgba(168,85,247,0.15));
    border-radius: 20px;
    padding: 30px 24px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}

.typing-controls-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 25px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border-color, rgba(255,255,255,0.08));
}

.typing-btn-group {
    display: flex;
    gap: 8px;
    background: var(--bg-secondary, rgba(255,255,255,0.03));
    padding: 4px;
    border-radius: 12px;
    border: 1px solid var(--border-color, rgba(255,255,255,0.08));
}

.typing-mode-btn {
    padding: 6px 14px;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: var(--text-muted, #94a3b8);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}

.typing-mode-btn.active {
    background: var(--accent-color, #06b6d4);
    color: #000;
    box-shadow: 0 2px 8px rgba(6, 182, 212, 0.4);
}

.typing-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    margin-bottom: 25px;
}

@media (max-width: 650px) {
    .typing-stats-grid { grid-template-columns: repeat(2, 1fr); }
}

.typing-stat-box {
    background: var(--bg-secondary, rgba(255,255,255,0.02));
    border: 1px solid var(--border-color, rgba(255,255,255,0.06));
    border-radius: 14px;
    padding: 16px 12px;
    text-align: center;
}

.typing-stat-box .stat-label {
    font-size: 12px;
    color: var(--text-muted, #94a3b8);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.typing-stat-box .stat-value {
    font-size: 28px;
    font-weight: 900;
    color: var(--accent-color, #06b6d4);
    font-family: monospace;
}

.typing-text-display {
    background: var(--bg-secondary, rgba(255,255,255,0.02));
    border: 2px solid var(--border-color, rgba(168,85,247,0.15));
    border-radius: 16px;
    padding: 24px;
    font-size: 19px;
    line-height: 1.85;
    height: 170px;
    overflow-y: auto;
    user-select: none;
    cursor: text;
    margin-bottom: 20px;
    font-family: system-ui, -apple-system, sans-serif;
    color: var(--text-muted, #94a3b8);
}

.typing-word {
    display: inline-block;
    padding: 2px 4px;
    border-radius: 4px;
    margin-right: 4px;
    transition: background 0.15s;
}

.typing-word.active-word {
    background: rgba(6, 182, 212, 0.2);
    border-bottom: 2px solid #06b6d4;
    color: var(--text-primary, #fff);
}

.typing-char {
    transition: color 0.1s;
}

.typing-char.char-correct {
    color: #10b981;
    font-weight: 600;
}

.typing-char.char-wrong {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.25);
    border-radius: 2px;
    text-decoration: underline;
}

.typing-word.word-passed-correct {
    color: #10b981;
}

.typing-word.word-passed-wrong {
    color: #ef4444;
    text-decoration: line-through;
}

.typing-input-area {
    margin-bottom: 20px;
}

.typing-input {
    width: 100%;
    padding: 16px 20px;
    font-size: 18px;
    border-radius: 14px;
    border: 2px solid var(--accent-color, #06b6d4);
    background: var(--bg-card, #0f172a);
    color: var(--text-primary, #fff);
    outline: none;
    box-shadow: 0 0 15px rgba(6, 182, 212, 0.2);
    transition: all 0.2s;
}

.typing-input:focus {
    box-shadow: 0 0 25px rgba(6, 182, 212, 0.4);
}

.typing-results-card {
    background: linear-gradient(135deg, rgba(6,182,212,0.1), rgba(168,85,247,0.1));
    border: 2px solid var(--accent-color, #06b6d4);
    border-radius: 20px;
    padding: 35px 24px;
    text-align: center;
    margin-top: 25px;
    animation: gz-card-in 0.4s ease both;
}

.typing-speed-badge {
    display: inline-block;
    padding: 6px 18px;
    border-radius: 20px;
    color: #fff;
    font-weight: 800;
    font-size: 14px;
    margin-top: 10px;
    margin-bottom: 20px;
}

/* ===== PDF PROTECT & TOOL STYLES ===== */
.pdf-protect-tab-btn {
    padding: 10px 20px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}
.pdf-protect-tab-btn.active {
    background: var(--accent-color, #06b6d4);
    color: #000;
    border-color: var(--accent-color, #06b6d4);
}

/* ══════════════════════════════════════════════════
   PROPER PREMIUM RESET BUTTON WITH ANIMATION (.vx-reset-btn)
══════════════════════════════════════════════════ */
.vx-reset-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 14px;
    background: rgba(239, 68, 68, 0.14);
    border: 1px solid rgba(239, 68, 68, 0.45);
    color: #ff5252;
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    font-size: 12.5px;
    font-weight: 700;
    border-radius: 50px;
    cursor: pointer;
    line-height: 1;
    transition: all 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 2px 10px rgba(239, 68, 68, 0.22);
    user-select: none;
    flex-shrink: 0;
    outline: none;
    text-decoration: none;
}

.vx-reset-btn i {
    font-size: 12px;
    transition: transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: inline-block;
    color: inherit;
}

/* Hover State: Rich Crimson Gradient + Icon Spin */
.vx-reset-btn:hover {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    border-color: #ef4444;
    color: #ffffff !important;
    transform: translateY(-1.5px) scale(1.04);
    box-shadow: 0 6px 18px rgba(239, 68, 68, 0.4);
}

.vx-reset-btn:hover i {
    transform: rotate(180deg);
}

/* Active / Click Press */
.vx-reset-btn:active {
    transform: translateY(0) scale(0.95);
    box-shadow: 0 2px 6px rgba(239, 68, 68, 0.25);
}

.vx-reset-btn:active i {
    transform: rotate(360deg);
}

/* Design Variant 2: Solid Crimson Pill */
.vx-reset-btn.solid {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    border-color: #ef4444;
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(239, 68, 68, 0.3);
}
.vx-reset-btn.solid:hover {
    background: linear-gradient(135deg, #dc2626, #b91c1c);
    box-shadow: 0 6px 20px rgba(239, 68, 68, 0.5);
}

/* Design Variant 3: Compact Icon-Badge */
.vx-reset-btn.compact {
    padding: 5px 10px;
    font-size: 11.5px;
    gap: 5px;
}

/* ══════════════════════════════════════════════════
   PHOTO + SIGNATURE JOINT COMBINER (2-IN-1) — THEME-AWARE
══════════════════════════════════════════════════ */
.joint-grid-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-top: 10px;
}

@media (max-width: 768px) {
    .joint-grid-layout {
        grid-template-columns: 1fr;
    }
}

.joint-slot-card {
    background: #ffffff !important;
    border: 2px dashed rgba(245, 158, 11, 0.35) !important;
    border-radius: 20px !important;
    padding: 18px !important;
    box-shadow: 0 10px 30px rgba(245, 158, 11, 0.08), 0 2px 10px rgba(0, 0, 0, 0.03) !important;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

body.dark-theme .joint-slot-card {
    background: rgba(255, 255, 255, 0.03) !important;
    border-color: rgba(245, 158, 11, 0.35) !important;
    box-shadow: none !important;
}

.joint-slot-card:hover {
    border-color: #f59e0b !important;
    background: #fffdfa !important;
    box-shadow: 0 15px 40px rgba(245, 158, 11, 0.18) !important;
    transform: translateY(-2px);
}

body.dark-theme .joint-slot-card:hover {
    border-color: #fbbf24 !important;
    background: rgba(245, 158, 11, 0.04) !important;
}

.joint-slot-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 12px;
}

.joint-slot-status {
    font-size: 10.5px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 20px;
    background: rgba(245, 158, 11, 0.12) !important;
    color: #b45309 !important;
    border: 1px solid rgba(245, 158, 11, 0.3) !important;
}

body.dark-theme .joint-slot-status {
    background: rgba(245, 158, 11, 0.2) !important;
    color: #fbbf24 !important;
    border-color: rgba(245, 158, 11, 0.4) !important;
}

.joint-slot-status.loaded {
    background: rgba(16, 185, 129, 0.15) !important;
    color: #10b981 !important;
    border-color: rgba(16, 185, 129, 0.3) !important;
}

.joint-dropzone {
    border: 1.5px dashed rgba(245, 158, 11, 0.35) !important;
    border-radius: 14px !important;
    padding: 24px 14px !important;
    text-align: center;
    cursor: pointer;
    background: #fffbeb !important;
    transition: all 0.25s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 120px;
}

body.dark-theme .joint-dropzone {
    background: rgba(245, 158, 11, 0.05) !important;
    border-color: rgba(245, 158, 11, 0.3) !important;
}

.joint-dropzone:hover {
    background: #fef3c7 !important;
    border-color: #f59e0b !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(245, 158, 11, 0.2) !important;
}

body.dark-theme .joint-dropzone:hover {
    background: rgba(245, 158, 11, 0.12) !important;
    border-color: #fbbf24 !important;
}

.joint-settings-card {
    background: rgba(255, 255, 255, 0.75) !important;
    border: 1px solid rgba(99, 102, 241, 0.14) !important;
    border-radius: 14px;
    padding: 14px;
}

body.dark-theme .joint-settings-card {
    background: rgba(255, 255, 255, 0.03) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

.joint-preset-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.joint-preset-btn {
    flex: 1;
    min-width: 120px;
    padding: 9px 10px;
    font-size: 11.5px;
    font-weight: 700;
    background: #ffffff;
    border: 1.5px solid rgba(99, 102, 241, 0.16);
    color: var(--text-secondary);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
}

body.dark-theme .joint-preset-btn {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
    color: var(--text-secondary);
}

.joint-preset-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: rgba(245, 158, 11, 0.05);
}

.joint-preset-btn.active {
    background: var(--grad-primary);
    color: #ffffff !important;
    border-color: transparent !important;
    box-shadow: 0 4px 14px rgba(245, 158, 11, 0.35);
}

body.dark-theme .joint-preset-btn.active {
    background: linear-gradient(135deg, #7c5cfc, #6366f1);
    box-shadow: 0 4px 14px rgba(124, 92, 252, 0.4);
}

.joint-output-card {
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(99, 102, 241, 0.14);
    border-radius: 16px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    height: 100%;
}

body.dark-theme .joint-output-card {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.1);
}

.joint-output-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.joint-size-badge {
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    background: rgba(6, 182, 212, 0.12);
    color: #06b6d4;
}

.joint-canvas-box {
    position: relative;
    background: radial-gradient(circle at center, #ffffff 0%, #f1f5f9 65%, #e2e8f0 100%);
    border: 1px solid rgba(99, 102, 241, 0.14);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 380px;
    overflow: hidden;
    padding: 18px;
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.03);
}

body.dark-theme .joint-canvas-box,
body.dark-mode .joint-canvas-box {
    background: radial-gradient(circle at center, #1e293b 0%, #0f172a 70%, #090d16 100%);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.35);
}

#joint-canvas,
#dop-canvas {
    max-width: 100%;
    max-height: 360px;
    object-fit: contain;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.95);
    box-shadow: 0 14px 34px -6px rgba(0, 0, 0, 0.22), 0 0 0 1px rgba(0, 0, 0, 0.06);
    display: none;
    transition: transform 0.25s ease;
}

body.dark-theme #joint-canvas,
body.dark-theme #dop-canvas,
body.dark-mode #joint-canvas,
body.dark-mode #dop-canvas {
    border-color: rgba(255, 255, 255, 0.15);
    box-shadow: 0 16px 36px -8px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.joint-download-action {
    margin-top: 20px;
}

#btn-joint-download.download-btn {
    background: linear-gradient(135deg, #f59e0b 0%, #ea580c 50%, #db2777 100%) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 12px !important;
    font-weight: 800 !important;
    box-shadow: 0 6px 20px rgba(234, 88, 12, 0.35) !important;
}
#btn-joint-download.download-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(234, 88, 12, 0.5) !important;
    filter: brightness(1.06);
}

body.dark-theme #btn-joint-download.download-btn {
    background: linear-gradient(135deg, #7c5cfc 0%, #6366f1 50%, #4f46e5 100%) !important;
    box-shadow: 0 6px 20px rgba(124, 92, 252, 0.35) !important;
}

#joint-target-kb.text-input {
    background: #ffffff;
    border: 1px solid rgba(99, 102, 241, 0.2);
    color: var(--text-primary);
    border-radius: 8px;
}

body.dark-theme #joint-target-kb.text-input {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
    color: #f8fafc;
}

/* DOP Prefix Pills */
.dop-prefix-pill {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.dop-prefix-pill:hover, .dop-prefix-pill.active {
    background: var(--accent, #06b6d4);
    color: #000;
    border-color: var(--accent, #06b6d4);
}

/* ==========================================================================
   STYLE 3: KINETIC SPRING (JELLY BOUNCE) — GEN-Z 3D UPGRADE (DEMO MATCH 1:1)
   ========================================================================== */

/* 1. Global Clean-up for Dash Cards */
a.dash-card, 
.dash-card {
    text-decoration: none !important;
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    background: #ffffff !important;
    border: 2px solid rgba(226, 232, 240, 0.9) !important;
    border-radius: 24px !important;
    padding: 24px 20px 20px !important;
    min-height: 275px !important;
    box-shadow: 0 6px 0px rgba(226, 232, 240, 0.95), 0 4px 18px rgba(15, 23, 42, 0.04) !important;
    cursor: pointer !important;
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.dash-card:hover {
    transform: translateY(-6px) !important;
    border-color: #10b981 !important;
    box-shadow: 0 12px 0px rgba(16, 185, 129, 0.35), 0 20px 30px rgba(16, 185, 129, 0.15) !important;
}

.dash-card:active {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 0px rgba(16, 185, 129, 0.35) !important;
}

/* Dark Theme Kinetic Card */
body.dark-theme a.dash-card,
body.dark-theme .dash-card {
    background: rgba(15, 23, 42, 0.92) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 6px 0px rgba(255, 255, 255, 0.08), 0 8px 32px rgba(0, 0, 0, 0.35) !important;
}

body.dark-theme .dash-card:hover {
    border-color: #10b981 !important;
    box-shadow: 0 12px 0px rgba(16, 185, 129, 0.45), 0 20px 40px rgba(0, 0, 0, 0.5) !important;
    background: rgba(20, 26, 45, 0.95) !important;
}

/* 2. Apple Spatial 3D Float + Tilt on Hover (Smooth, Clean & Ultra Luxury) */
.dash-card .premium-icon,
.dash-card .dash-card-icon {
    width: 72px !important;
    height: 72px !important;
    border-radius: 22px !important;
    font-size: 30px !important;
    color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 0 18px 0 !important;
    box-shadow: 0 14px 28px -6px rgba(0, 0, 0, 0.2), inset 0 2px 4px rgba(255, 255, 255, 0.45) !important;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s ease !important;
    animation: none !important; /* stop default continuous float */
}

.dash-card:hover .premium-icon,
.dash-card:hover .dash-card-icon {
    transform: translateY(-8px) scale(1.1) rotate(-3deg) !important;
    box-shadow: 0 20px 32px -4px rgba(0, 0, 0, 0.3), inset 0 2px 4px rgba(255, 255, 255, 0.6) !important;
    animation: none !important;
}

/* 3. Typography Exact Demo Match (No Blue Underlines, Crisp Weights) */
.dash-card .dash-card-text {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
}

.dash-card .dash-card-text h3 {
    font-size: 16px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    margin-bottom: 8px !important;
    line-height: 1.35 !important;
    letter-spacing: -0.2px !important;
    text-decoration: none !important;
}

body.dark-theme .dash-card .dash-card-text h3 {
    color: #f8fafc !important;
}

.dash-card .dash-card-text p {
    font-size: 12.5px !important;
    color: #64748b !important;
    line-height: 1.45 !important;
    margin-bottom: 16px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-decoration: none !important;
    max-width: 100% !important;
}

body.dark-theme .dash-card .dash-card-text p {
    color: #94a3b8 !important;
}

/* 4. Chunky 3D "Open Tool" Action Button (Exact Match from Demo) */
.card-action-link {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    padding: 10px 16px !important;
    background: #10b981 !important;
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 0px #059669 !important;
    opacity: 1 !important;
    transition: all 0.15s ease !important;
    margin-top: auto !important;
    text-decoration: none !important;
}

.card-action-link i {
    font-size: 12px !important;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.dash-card:hover .card-action-link {
    background: #059669 !important;
    box-shadow: 0 6px 0px #047857 !important;
    transform: translateY(-2px) !important;
    color: #ffffff !important;
}

.dash-card:hover .card-action-link i {
    transform: translateX(4px) scale(1.2) !important;
}

.dash-card:active .card-action-link {
    transform: translateY(2px) !important;
    box-shadow: 0 2px 0px #047857 !important;
}

/* =========================================================
   GEN-Z VIBRANT SOCIAL COMMUNITY HUB & FLOATING DOCK
   ========================================================= */

.genz-social-hub {
    margin: 36px 0 28px;
    padding: 30px 24px;
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.85);
    border-radius: 26px;
    box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(99, 102, 241, 0.05);
    position: relative;
    overflow: hidden;
}

body.dark-theme .genz-social-hub,
body.dark-mode .genz-social-hub {
    background: rgba(15, 23, 42, 0.75);
    border-color: rgba(255, 255, 255, 0.09);
    box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.05);
}

.genz-social-head-wrap {
    text-align: center;
    margin-bottom: 24px;
}

.genz-social-pill-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 14px;
    border-radius: 999px;
    background: rgba(99, 102, 241, 0.1);
    color: #6366f1;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    margin-bottom: 10px;
    border: 1px solid rgba(99, 102, 241, 0.2);
}

body.dark-theme .genz-social-pill-badge,
body.dark-mode .genz-social-pill-badge {
    background: rgba(99, 102, 241, 0.2);
    color: #818cf8;
    border-color: rgba(99, 102, 241, 0.35);
}

.genz-live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 10px #10b981;
    animation: genzPulseDot 1.8s infinite;
}

@keyframes genzPulseDot {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.5); opacity: 0.55; }
}

.genz-social-headline {
    font-family: 'Plus Jakarta Sans', 'Outfit', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 24px;
    font-weight: 800;
    color: var(--text-primary, #0f172a);
    margin: 0 0 8px;
    letter-spacing: -0.025em;
    line-height: 1.3;
}

.genz-brand-gradient {
    background: linear-gradient(135deg, #ff007a 0%, #7928ca 50%, #4338ca 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.genz-social-sub {
    font-size: 13.5px;
    color: var(--text-secondary, #64748b);
    margin: 0 auto;
    max-width: 580px;
    line-height: 1.5;
}

body.dark-theme .genz-social-sub,
body.dark-mode .genz-social-sub {
    color: #94a3b8;
}

.genz-social-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}

.genz-social-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.06);
    text-decoration: none !important;
    position: relative;
    overflow: hidden;
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.04);
}

body.dark-theme .genz-social-card,
body.dark-mode .genz-social-card {
    background: rgba(30, 41, 59, 0.7);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.2);
}

/* Light shimmer sweep animation */
.genz-card-glow {
    position: absolute;
    top: 0;
    left: -120%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
    transform: skewX(-22deg);
    pointer-events: none;
    transition: none;
}

.genz-social-card:hover .genz-card-glow {
    animation: genzShimmerSweep 0.9s ease forwards;
}

@keyframes genzShimmerSweep {
    0% { left: -120%; }
    100% { left: 160%; }
}

.genz-social-card:hover {
    transform: translateY(-6px) scale(1.02);
}

/* Brand Card Custom Aesthetics */
.card-yt:hover {
    border-color: rgba(255, 0, 0, 0.4);
    box-shadow: 0 16px 32px -8px rgba(255, 0, 0, 0.32);
}
.card-insta:hover {
    border-color: rgba(225, 48, 108, 0.4);
    box-shadow: 0 16px 32px -8px rgba(225, 48, 108, 0.32);
}
.card-wa:hover {
    border-color: rgba(37, 211, 102, 0.4);
    box-shadow: 0 16px 32px -8px rgba(37, 211, 102, 0.32);
}
.card-support:hover {
    border-color: rgba(6, 182, 212, 0.4);
    box-shadow: 0 16px 32px -8px rgba(6, 182, 212, 0.32);
}
.card-fb:hover {
    border-color: rgba(24, 119, 242, 0.4);
    box-shadow: 0 16px 32px -8px rgba(24, 119, 242, 0.32);
}
.card-tg:hover {
    border-color: rgba(36, 161, 222, 0.4);
    box-shadow: 0 16px 32px -8px rgba(36, 161, 222, 0.32);
}

.genz-card-icon {
    width: 48px;
    height: 48px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.genz-social-card:hover .genz-card-icon {
    transform: scale(1.18) rotate(-7deg);
}

.card-yt .genz-card-icon {
    background: rgba(255, 0, 0, 0.12);
    color: #ff0000;
}
.card-insta .genz-card-icon {
    background: linear-gradient(135deg, rgba(240, 148, 51, 0.16), rgba(220, 39, 67, 0.16));
    color: #e1306c;
}
.card-wa .genz-card-icon {
    background: rgba(37, 211, 102, 0.14);
    color: #25d366;
}
.card-support .genz-card-icon {
    background: rgba(6, 182, 212, 0.14);
    color: #06b6d4;
}
.card-fb .genz-card-icon {
    background: rgba(24, 119, 242, 0.14);
    color: #1877f2;
}
.card-tg .genz-card-icon {
    background: rgba(36, 161, 222, 0.14);
    color: #24a1de;
}

.genz-card-meta {
    display: flex;
    flex-direction: column;
    gap: 3px;
    overflow: hidden;
    flex-grow: 1;
}

.genz-card-topline {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.genz-platform-name {
    font-size: 11px;
    font-weight: 800;
    color: var(--text-secondary, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

body.dark-theme .genz-platform-name,
body.dark-mode .genz-platform-name {
    color: #94a3b8;
}

.genz-tag {
    font-size: 10px;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 6px;
    line-height: 1.2;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.yt-tag { background: #fee2e2; color: #dc2626; }
.insta-tag { background: #fce7f3; color: #db2777; }
.wa-tag { background: #dcfce7; color: #16a34a; }
.support-tag { background: #cffafe; color: #0891b2; }
.fb-tag { background: #dbeafe; color: #2563eb; }
.tg-tag { background: #e0f2fe; color: #0284c7; }

body.dark-theme .yt-tag, body.dark-mode .yt-tag { background: rgba(239, 68, 68, 0.2); color: #f87171; }
body.dark-theme .insta-tag, body.dark-mode .insta-tag { background: rgba(236, 72, 153, 0.2); color: #f472b6; }
body.dark-theme .wa-tag, body.dark-mode .wa-tag { background: rgba(34, 197, 94, 0.2); color: #4ade80; }
body.dark-theme .support-tag, body.dark-mode .support-tag { background: rgba(6, 182, 212, 0.2); color: #38bdf8; }
body.dark-theme .fb-tag, body.dark-mode .fb-tag { background: rgba(59, 130, 246, 0.2); color: #60a5fa; }
body.dark-theme .tg-tag, body.dark-mode .tg-tag { background: rgba(2, 132, 199, 0.2); color: #38bdf8; }

.genz-handle-text {
    font-size: 14.5px;
    font-weight: 800;
    color: var(--text-primary, #0f172a);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: -0.2px;
}

body.dark-theme .genz-handle-text,
body.dark-mode .genz-handle-text {
    color: #f8fafc;
}

.genz-action-text {
    font-size: 11.5px;
    font-weight: 700;
    color: #64748b;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: color 0.2s ease;
}

.genz-action-text i {
    font-size: 10px;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.genz-social-card:hover .genz-action-text {
    color: var(--accent, #d97706);
}

.card-yt:hover .genz-action-text { color: #dc2626; }
.card-insta:hover .genz-action-text { color: #db2777; }
.card-wa:hover .genz-action-text { color: #16a34a; }
.card-support:hover .genz-action-text { color: #0891b2; }
.card-fb:hover .genz-action-text { color: #2563eb; }

.genz-social-card:hover .genz-action-text i {
    transform: translateX(4px);
}

/* Individual footer pill colors on hover */
.social-circle-link.pill-yt:hover {
    background: rgba(255, 0, 0, 0.18) !important;
    border-color: #ff0000 !important;
    color: #ff0000 !important;
    box-shadow: 0 6px 18px rgba(255, 0, 0, 0.4) !important;
}
.social-circle-link.pill-insta:hover {
    background: rgba(225, 48, 108, 0.18) !important;
    border-color: #e1306c !important;
    color: #e1306c !important;
    box-shadow: 0 6px 18px rgba(225, 48, 108, 0.4) !important;
}
.social-circle-link.pill-wa:hover {
    background: rgba(37, 211, 102, 0.18) !important;
    border-color: #25d366 !important;
    color: #25d366 !important;
    box-shadow: 0 6px 18px rgba(37, 211, 102, 0.4) !important;
}
.social-circle-link.pill-support:hover {
    background: rgba(6, 182, 212, 0.18) !important;
    border-color: #06b6d4 !important;
    color: #06b6d4 !important;
    box-shadow: 0 6px 18px rgba(6, 182, 212, 0.4) !important;
}
.social-circle-link.pill-fb:hover {
    background: rgba(24, 119, 242, 0.18) !important;
    border-color: #1877f2 !important;
    color: #1877f2 !important;
    box-shadow: 0 6px 18px rgba(24, 119, 242, 0.4) !important;
}
.social-circle-link.pill-tg:hover {
    background: rgba(36, 161, 222, 0.18) !important;
    border-color: #24a1de !important;
    color: #24a1de !important;
    box-shadow: 0 6px 18px rgba(36, 161, 222, 0.4) !important;
}

/* =========================================================
   GEN-Z FLOATING QUICK SOCIAL DOCK (Disabled)
   ========================================================= */
.genz-floating-dock {
    display: none !important;
}

@media (max-width: 640px) {
    .genz-social-hub {
        padding: 22px 16px;
        margin: 24px 0 20px;
    }
    .genz-social-headline {
        font-size: 20px;
    }
    .genz-social-cards-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   PERFORMANCE OPTIMIZATIONS — Added for fast page load
   ============================================================ */

/* Off-screen section rendering: browser skips rendering until
   near viewport. Massive GPU/CPU savings on long pages. */
.tool-section:not(:first-child),
.genz-social-section,
.bento-grid-section,
.pdf-tools-section {
    content-visibility: auto;
    contain-intrinsic-size: auto 600px;
}

/* Crisp rendering for small avatar circles */
#live-user-avatar,
.user-avatar-circle img {
    image-rendering: auto;
    image-rendering: -webkit-optimize-contrast;
}

/* Will-change only on elements that actually animate
   (prevents accidental layer promotion everywhere) */
.genz-dock-item:hover,
.tool-card:hover,
.pdf-tool-card:hover {
    will-change: transform;
}

/* Smooth scroll for entire page */
html {
    scroll-behavior: smooth;
}

/* ============================================================
   MODERN SPLIT PDF STUDIO & PDF WORKSPACE UPGRADE
   ============================================================ */

/* Document Info Banner */
.split-doc-banner {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto 20px auto;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 18px;
    padding: 16px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
    animation: fadeIn 0.35s ease;
}

.split-doc-meta {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.split-doc-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, #ef4444, #f43f5e);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.25);
    flex-shrink: 0;
}

.split-doc-details {
    min-width: 0;
}

.split-doc-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 380px;
    margin-bottom: 4px;
}

.split-doc-pills {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.split-doc-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
}

.split-doc-pill.accent {
    background: rgba(99, 102, 241, 0.1);
    color: #6366f1;
    border-color: rgba(99, 102, 241, 0.25);
}

.split-doc-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.split-btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 16px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.split-btn-ghost:hover {
    background: var(--bg-card);
    color: var(--text-primary);
    border-color: var(--accent);
    transform: translateY(-1px);
}

.split-btn-ghost.danger:hover {
    border-color: #ef4444;
    color: #ef4444;
    background: rgba(239, 68, 68, 0.08);
}

/* Mode Switcher Tabs */
.split-mode-tabs {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--bg-secondary);
    padding: 6px;
    border-radius: 14px;
    border: 1px solid var(--border-color);
    margin: 0 auto 20px auto;
    max-width: 620px;
    width: 100%;
}

.split-mode-tab {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.split-mode-tab.active {
    background: var(--bg-card);
    color: var(--text-primary);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}

body.dark-theme .split-mode-tab.active {
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}

/* Toolbar & Selection Controls */
.split-controls-panel {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 18px;
    padding: 18px 24px;
    margin: 0 auto 24px auto;
    max-width: 1000px;
    width: 100%;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}

.split-toolbar-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
}

.split-count-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
}

.split-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 8px;
    border-radius: 12px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
}

.split-quick-buttons {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.split-quick-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
}

.split-quick-pill:hover {
    background: rgba(99, 102, 241, 0.08);
    border-color: #6366f1;
    color: #6366f1;
    transform: translateY(-1px);
}

.split-range-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px dashed var(--border-color);
    flex-wrap: wrap;
}

.split-range-input-wrap {
    position: relative;
    flex: 1;
    min-width: 200px;
}

.split-range-input-wrap i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 13px;
}

.split-range-input {
    width: 100%;
    padding: 9px 14px 9px 38px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 600;
    outline: none;
    transition: all 0.2s ease;
}

.split-range-input:focus {
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

.split-range-apply-btn {
    padding: 9px 18px;
    border-radius: 10px;
    border: none;
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.25);
}

.split-range-apply-btn:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
}

/* Page Previews Grid */
.split-page-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 18px;
    max-width: 1000px;
    width: 100%;
    margin: 0 auto 30px auto;
}

.split-page-card {
    background: var(--bg-card);
    border: 2px solid var(--border-color);
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
}

.split-page-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.09);
    border-color: rgba(99, 102, 241, 0.5);
}

.split-page-card.selected {
    border-color: #6366f1 !important;
    background: rgba(99, 102, 241, 0.03);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2), 0 12px 28px rgba(99, 102, 241, 0.2) !important;
}

.split-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px 8px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-secondary);
}

.split-card-page-num {
    font-size: 11px;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: 0.3px;
}

.split-card-checkbox {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid var(--border-color);
    background: var(--bg-card);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    color: transparent;
    font-size: 11px;
}

.split-page-card.selected .split-card-checkbox {
    border-color: #6366f1;
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    color: #fff;
    transform: scale(1.1);
}

.split-card-preview {
    padding: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    background: var(--bg-card);
}

.split-card-preview img,
.split-card-preview canvas {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.split-card-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
}

/* Modern Action Dock */
.split-action-dock {
    max-width: 800px;
    width: 100%;
    margin: 20px auto 0 auto;
    background: var(--bg-card);
    border: 1.5px solid var(--border-color);
    border-radius: 20px;
    padding: 18px 24px;
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
}

.split-action-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.split-action-heading {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
}

.split-action-sub {
    font-size: 12px;
    color: var(--text-muted);
}

.split-main-download-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 13px 28px;
    border-radius: 12px;
    border: none;
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 6px 20px rgba(99, 102, 241, 0.35);
    letter-spacing: 0.3px;
}

.split-main-download-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(99, 102, 241, 0.45);
    filter: brightness(1.08);
}

.split-main-download-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
}

/* Lightbox Modal for Page Preview */
.split-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.85);
    backdrop-filter: blur(8px);
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: fadeIn 0.2s ease;
}

.split-lightbox-content {
    background: var(--bg-card);
    border-radius: 20px;
    padding: 20px;
    max-width: 800px;
    max-height: 90vh;
    overflow: auto;
    position: relative;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    text-align: center;
}

.split-lightbox-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    cursor: pointer;
}

/* ====== EMAIL OTP VERIFICATION BOX ====== */
.signup-otp-container {
    margin: 14px 0 18px 0;
    padding: 20px 22px 18px 22px;
    background: #ffffff;
    border: 2px solid #0284c7;
    border-radius: 16px;
    text-align: center;
    box-shadow: 0 10px 25px -5px rgba(2, 132, 199, 0.2), 0 4px 10px -2px rgba(0, 0, 0, 0.05);
    animation: otpSlideIn 0.3s ease-out;
}
@keyframes otpSlideIn {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}
.signup-otp-badge {
    display: inline-block;
    padding: 4px 14px;
    background: #e0f2fe;
    border: 1.5px solid #0284c7;
    border-radius: 20px;
    color: #0369a1;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    margin-bottom: 10px;
    box-shadow: 0 2px 6px rgba(2, 132, 199, 0.12);
}
.signup-otp-header {
    font-size: 15px;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.signup-otp-header i {
    color: #0284c7;
    font-size: 17px;
}
.signup-otp-header strong {
    color: #0284c7;
    font-weight: 900;
}
.signup-otp-subtitle {
    font-size: 13px;
    color: #334155;
    font-weight: 500;
    margin: 0 0 14px 0;
    line-height: 1.45;
}
.signup-otp-field {
    position: relative !important;
    margin-bottom: 12px !important;
}
.signup-otp-field .auth-field-icon {
    left: 16px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #0284c7 !important;
    font-size: 17px !important;
}
.signup-otp-field input {
    text-align: center !important;
    font-size: 24px !important;
    font-weight: 800 !important;
    letter-spacing: 10px !important;
    color: #0f172a !important;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
    background: #f8fafc !important;
    border: 2px solid #0284c7 !important;
    border-radius: 14px !important;
    padding: 12px 14px 12px 42px !important;
    box-shadow: 0 4px 14px rgba(2, 132, 199, 0.12), inset 0 2px 4px rgba(0, 0, 0, 0.04) !important;
    transition: all 0.25s ease !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
.signup-otp-field input:focus {
    border-color: #0369a1 !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 4px rgba(2, 132, 199, 0.25), 0 4px 16px rgba(2, 132, 199, 0.2) !important;
    outline: none !important;
}
.signup-otp-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: #1e293b;
    font-weight: 600;
    padding: 0 4px;
}
.signup-otp-footer #signup-otp-countdown {
    color: #9a3412 !important;
    font-weight: 800 !important;
    background: #ffedd5;
    border: 1px solid #fed7aa;
    padding: 2px 8px;
    border-radius: 6px;
    display: inline-block;
}
#signup-resend-btn {
    background: none;
    border: none;
    color: #0284c7 !important;
    font-weight: 800 !important;
    font-size: 13px !important;
    cursor: pointer;
    text-decoration: underline;
    padding: 0;
    transition: color 0.2s;
}
#signup-resend-btn:hover {
    color: #0369a1 !important;
}
.signup-edit-email-btn {
    background: none;
    border: none;
    color: #0284c7 !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    cursor: pointer;
    text-decoration: underline;
    padding: 0;
    transition: color 0.2s;
}
.signup-edit-email-btn:hover {
    color: #0369a1 !important;
}

/* Dark Theme overrides for Email OTP */
body.dark-theme .signup-otp-container {
    background: #090d16;
    border: 2px solid #38bdf8;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), 0 0 25px rgba(56, 189, 248, 0.25);
}
body.dark-theme .signup-otp-badge {
    background: rgba(6, 182, 212, 0.25);
    border-color: #38bdf8;
    color: #38bdf8;
    box-shadow: 0 0 12px rgba(56, 189, 248, 0.3);
}
body.dark-theme .signup-otp-header {
    color: #f8fafc;
}
body.dark-theme .signup-otp-header i,
body.dark-theme .signup-otp-header strong {
    color: #38bdf8;
}
body.dark-theme .signup-otp-subtitle {
    color: #cbd5e1;
}
body.dark-theme .signup-otp-field .auth-field-icon {
    color: #f59e0b !important;
}
body.dark-theme .signup-otp-field input {
    background: #050811 !important;
    border-color: #38bdf8 !important;
    color: #38bdf8 !important;
    box-shadow: 0 0 16px rgba(56, 189, 248, 0.3), inset 0 2px 6px rgba(0, 0, 0, 0.7) !important;
}
body.dark-theme .signup-otp-field input:focus {
    border-color: #00f2fe !important;
    box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.35), 0 0 25px rgba(0, 242, 254, 0.4) !important;
}
body.dark-theme .signup-otp-footer {
    color: #94a3b8;
}
body.dark-theme .signup-otp-footer #signup-otp-countdown {
    color: #fbbf24 !important;
    background: rgba(245, 158, 11, 0.2);
    border-color: rgba(245, 158, 11, 0.4);
}
body.dark-theme #signup-resend-btn,
body.dark-theme .signup-edit-email-btn {
    color: #38bdf8 !important;
}
body.dark-theme #signup-resend-btn:hover,
body.dark-theme .signup-edit-email-btn:hover {
    color: #7dd3fc !important;
}

/* ══════════════════════════════════════════════════════════
   OFFICIAL ANDROID APPS SHOWCASE — SIDE-BY-SIDE 2-COLUMN GRID (DESKTOP)
══════════════════════════════════════════════════════════ */
.gz-apps-showcase-section {
    width: 100%;
    max-width: 1200px;
    margin: 40px auto 30px;
    padding: 0 16px;
    box-sizing: border-box;
}
.gz-apps-container {
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    border: 1.5px solid #e2e8f0;
    border-radius: 28px;
    padding: 36px 32px;
    box-shadow: 0 14px 40px -10px rgba(15, 23, 42, 0.06);
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
}
.gz-apps-header {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 32px;
}
.gz-apps-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid rgba(245, 158, 11, 0.3);
    color: #d97706;
    padding: 6px 16px;
    border-radius: 9999px;
    font-size: 12px;
    font-weight: 800;
    margin-bottom: 12px;
}
.gz-apps-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 28px;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.3;
    margin: 0 0 10px;
}
.gz-apps-gradient-text {
    background: linear-gradient(135deg, #f59e0b 0%, #ea580c 50%, #dc2626 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.gz-apps-subtitle {
    font-size: 14.5px;
    color: #64748b;
    line-height: 1.6;
    margin: 0;
}
.gz-apps-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 24px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
.gz-app-card {
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 22px;
    padding: 26px 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.04);
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.gz-app-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 36px -8px rgba(15, 23, 42, 0.1);
}
.gz-card-badge-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
}
.gz-card-tag {
    font-size: 11px;
    font-weight: 800;
    padding: 5px 12px;
    border-radius: 8px;
    text-transform: uppercase;
}
.gz-card-tag.hot {
    background: rgba(245, 158, 11, 0.14);
    color: #d97706;
    border: 1px solid rgba(245, 158, 11, 0.3);
}
.gz-card-tag.new {
    background: rgba(16, 185, 129, 0.14);
    color: #059669;
    border: 1px solid rgba(16, 185, 129, 0.3);
}
.gz-card-rating {
    font-size: 12px;
    font-weight: 700;
    color: #f59e0b;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.gz-card-hero {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}
.gz-app-icon-wrap {
    width: 68px !important;
    height: 68px !important;
    min-width: 68px !important;
    max-width: 68px !important;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.1);
    background: #f8fafc;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid #e2e8f0;
    flex-shrink: 0;
}
.gz-app-icon-img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}
.gz-app-meta {
    flex: 1;
    min-width: 0;
}
.gz-app-name {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 20px;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 3px;
}
.gz-app-creator {
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    margin: 0 0 4px;
}
.gz-app-audience {
    font-size: 12px;
    font-weight: 700;
    color: #0284c7;
    margin: 0;
}
.gz-card-punchline {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 12px 14px;
    margin-bottom: 16px;
}
.gz-card-punchline.gst-punch {
    background: rgba(16, 185, 129, 0.05);
    border-color: rgba(16, 185, 129, 0.2);
}
.gz-punch-title {
    font-size: 13px;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 4px;
}
.gz-punch-desc {
    font-size: 12.5px;
    color: #475569;
    line-height: 1.5;
    margin: 0;
}
.gz-card-bullets {
    list-style: none;
    padding: 0;
    margin: 0 0 20px;
    display: flex;
    flex-direction: column;
    gap: 9px;
    flex: 1;
}
.gz-card-bullets li {
    font-size: 12.5px;
    color: #334155;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    line-height: 1.45;
}
.gz-card-bullets li i {
    color: #10b981;
    font-size: 13px;
    margin-top: 3px;
    flex-shrink: 0;
}
.gz-card-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid #f1f5f9;
    flex-wrap: wrap;
}
.gz-play-btn {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    transition: transform 0.2s;
}
.gz-play-btn:hover {
    transform: scale(1.04);
}
.gz-play-img {
    height: 44px;
    width: auto;
    max-width: 155px;
    object-fit: contain;
    display: block;
}
.gz-free-pill {
    font-size: 11px;
    font-weight: 800;
    color: #059669;
    background: #ecfdf5;
    border: 1px solid rgba(16, 185, 129, 0.25);
    padding: 5px 10px;
    border-radius: 9999px;
    white-space: nowrap;
}

/* ================================================================
   SIZEFIX ULTRA MOBILE-FRIENDLY & ZERO-TEXT-CUTOFF SUITE
   Strictly mobile-only: Zero impact on desktop view (>768px)
   ================================================================ */

@media (max-width: 768px) {
    /* 1. Global: Never clip or cut off text anywhere */
    * {
        word-break: normal !important;
        overflow-wrap: break-word !important;
    }

    html, body {
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        position: relative !important;
    }

    .container,
    .main,
    .dash-center-wrapper,
    .header-inner,
    .dash-section,
    .dash-grid,
    .gz-apps-showcase-section,
    .gz-apps-container {
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Fix Mobile Apps Showcase Section on Mobile */
    .gz-apps-showcase-section {
        padding: 0 12px !important;
        margin: 28px auto 20px !important;
    }
    .gz-apps-container {
        padding: 24px 14px !important;
        border-radius: 20px !important;
        overflow: hidden !important;
    }
    .gz-apps-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
        width: 100% !important;
    }
    .gz-app-card {
        padding: 18px 14px !important;
        border-radius: 18px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    .gz-card-hero {
        gap: 12px !important;
        margin-bottom: 14px !important;
    }
    .gz-app-icon-wrap {
        width: 58px !important;
        height: 58px !important;
        border-radius: 14px !important;
    }
    .gz-app-name {
        font-size: 18px !important;
    }
    .gz-card-punchline {
        padding: 12px 12px !important;
        margin-bottom: 14px !important;
    }
    .gz-punch-title {
        font-size: 13.5px !important;
    }
    .gz-punch-desc {
        font-size: 12px !important;
    }
    .gz-card-bullets {
        gap: 8px !important;
        margin-bottom: 16px !important;
    }
    .gz-card-bullets li {
        font-size: 12px !important;
    }
    .gz-play-btn {
        max-width: 100% !important;
    }

    /* Fix all large minmax inline grids from overflowing on mobile */
    .seo-grid,
    div[style*="minmax(320px"],
    div[style*="minmax(300px"] {
        grid-template-columns: 1fr !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Floating elements clearance on mobile - prevent overlapping */
    .social-proof-container {
        bottom: 74px !important;
        pointer-events: none !important;
    }
    .social-toast {
        pointer-events: auto !important;
    }
    .floating-site-link {
        bottom: 14px !important;
        right: 14px !important;
    }

    /* 2. Header & Nav: ALL text is 100% visible, never cut off */
    .header-inner {
        padding: 8px 12px !important;
        min-height: auto !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        justify-content: space-between !important;
    }
    .brand-logo-img {
        height: 44px !important;
        max-width: 150px !important;
    }
    .header-nav {
        max-width: 100% !important;
    }
    .nav-links {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        padding: 4px 0 !important;
        max-width: 100% !important;
    }
    .nav-links::-webkit-scrollbar {
        display: none !important;
    }
    /* ALL SPANS IN NAV & BUTTONS DISPLAY PROUDLY */
    .nav-links span,
    .nav-external span,
    .auth-login-btn span,
    .auth-signup-nav-btn span,
    .lang-toggle-btn span,
    .auth-user-name {
        display: inline-block !important;
        font-size: 12px !important;
        white-space: nowrap !important;
    }
    .nav-external {
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        padding: 6px 12px !important;
        height: 36px !important;
        border-radius: 999px !important;
        font-size: 12px !important;
        flex-shrink: 0 !important;
        white-space: nowrap !important;
    }
    .auth-login-btn,
    .auth-signup-nav-btn {
        display: inline-flex !important;
        align-items: center !important;
        gap: 5px !important;
        padding: 6px 14px !important;
        height: 36px !important;
        font-size: 12px !important;
        flex-shrink: 0 !important;
        white-space: nowrap !important;
    }
    .lang-toggle-btn,
    .sound-btn,
    .theme-btn {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 14px !important;
        flex-shrink: 0 !important;
    }

    /* 3. Hero Section: Complete text visibility */
    .hero-section {
        padding: 16px 12px 10px !important;
        text-align: center !important;
    }
    .hero-title {
        font-size: 24px !important;
        line-height: 1.35 !important;
        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: break-word !important;
    }
    .hero-subtitle {
        font-size: 13.5px !important;
        line-height: 1.55 !important;
        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: break-word !important;
        max-width: 100% !important;
    }

    /* 4. Dashboard Cards: Full Width, Complete Titles, Unclamped Descriptions */
    .dash-grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }
    .dash-card {
        min-height: auto !important;
        padding: 16px !important;
        text-align: left !important;
        align-items: flex-start !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 12px !important;
        position: relative !important;
        overflow: visible !important;
    }
    .dash-card-icon {
        width: 52px !important;
        height: 52px !important;
        min-width: 52px !important;
        margin-bottom: 0 !important;
        border-radius: 14px !important;
    }
    .dash-card-icon img,
    .dash-card-icon svg {
        width: 32px !important;
        height: 32px !important;
    }
    .dash-card-text {
        flex: 1 1 calc(100% - 74px) !important;
        min-width: 0 !important;
        text-align: left !important;
    }
    .dash-card-text h3,
    .dash-card h3 {
        font-size: 16.5px !important;
        font-weight: 800 !important;
        line-height: 1.35 !important;
        margin-bottom: 6px !important;
        color: #0f172a !important;
        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: break-word !important;
        overflow: visible !important;
        text-overflow: unset !important;
    }
    body.dark-theme .dash-card-text h3,
    body.dark-theme .dash-card h3 {
        color: #f8fafc !important;
    }
    .dash-card-text p,
    .dash-card p,
    .dash-card .dash-card-text p {
        font-size: 13px !important;
        line-height: 1.5 !important;
        color: #475569 !important;
        margin-bottom: 10px !important;
        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: break-word !important;
        display: block !important;
        -webkit-line-clamp: unset !important;
        -webkit-box-orient: unset !important;
        overflow: visible !important;
        text-overflow: unset !important;
        max-width: 100% !important;
    }
    body.dark-theme .dash-card-text p,
    body.dark-theme .dash-card p,
    body.dark-theme .dash-card .dash-card-text p {
        color: #94a3b8 !important;
    }
    .dash-card-badge {
        position: static !important;
        display: inline-block !important;
        margin-bottom: 6px !important;
        font-size: 10px !important;
        padding: 3px 8px !important;
    }
    .card-action-link {
        width: 100% !important;
        margin-top: 4px !important;
        border-radius: 12px !important;
        padding: 10px 16px !important;
        font-size: 13.5px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        font-weight: 800 !important;
    }

    /* 5. Tool Banners: Title & Description always visible */
    .active-tool-banner {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
        padding: 14px 16px !important;
    }
    .tool-banner-title {
        font-size: 18px !important;
        line-height: 1.35 !important;
        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: break-word !important;
    }
    .tool-banner-desc {
        display: block !important;
        font-size: 13px !important;
        line-height: 1.45 !important;
        color: #64748b !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: unset !important;
    }
    body.dark-theme .tool-banner-desc {
        color: #94a3b8 !important;
    }

    /* 6. Tabs in Resizer / Tools: No cut-off with ellipsis */
    .inspector-tabs-dock {
        display: flex !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        gap: 6px !important;
        flex-wrap: nowrap !important;
        padding: 4px !important;
    }
    .inspector-tabs-dock::-webkit-scrollbar {
        display: none !important;
    }
    .controls-panel .tab-nav-item,
    .inspector-tabs-dock .tab-nav-item {
        flex: 0 0 auto !important;
        white-space: nowrap !important;
        overflow: visible !important;
        text-overflow: unset !important;
        padding: 8px 14px !important;
        min-height: 40px !important;
    }
    .controls-panel .tab-nav-item span,
    .inspector-tabs-dock .tab-nav-item span {
        white-space: nowrap !important;
        overflow: visible !important;
        text-overflow: unset !important;
        font-size: 13px !important;
        font-weight: 700 !important;
    }

    /* 7. Quick Pills (KB / DPI Presets): Full text, wrap into rows */
    .controls-panel .quick-pills,
    .quick-pills {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        width: 100% !important;
    }
    .controls-panel .quick-pill,
    .quick-pills .quick-pill {
        flex: 1 1 auto !important;
        min-width: max-content !important;
        white-space: nowrap !important;
        overflow: visible !important;
        text-overflow: unset !important;
        padding: 9px 14px !important;
        font-size: 12.5px !important;
        font-weight: 800 !important;
    }

    /* 8. Category Pills: Smooth Horizontal Touch-Scroll */
    .gz-pills-dock-wrap {
        padding: 8px 10px 16px !important;
        overflow-x: auto !important;
        justify-content: flex-start !important;
        -webkit-overflow-scrolling: touch !important;
    }
    .gz-category-pills {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 6px !important;
        width: max-content !important;
    }
    .gz-pill {
        white-space: nowrap !important;
        overflow: visible !important;
        text-overflow: unset !important;
        flex-shrink: 0 !important;
    }
    .gz-pill-text {
        white-space: nowrap !important;
        overflow: visible !important;
        text-overflow: unset !important;
        font-size: 13px !important;
        font-weight: 700 !important;
    }

    /* 9. Output Info Badges: Never cut off numbers or units */
    .output-info,
    #compress-output-info,
    #convert-output-info,
    #output-info {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
        padding: 12px 14px !important;
    }
    .output-info div,
    .output-info span,
    .info-value,
    .info-label {
        white-space: normal !important;
        word-break: break-word !important;
        overflow: visible !important;
        text-overflow: unset !important;
    }

    /* 10. Form Inputs & Dropdowns */
    .controls-panel input[type="text"],
    .controls-panel input[type="number"],
    .controls-panel select,
    .controls-panel .custom-input,
    .controls-panel .text-input {
        font-size: 16px !important;
        min-height: 44px !important;
    }
    .controls-panel .target-size-wrap {
        height: 44px !important;
        border-radius: 12px !important;
    }
    .controls-panel .target-size-wrap input {
        font-size: 16px !important;
        padding: 8px 12px !important;
    }
    .controls-panel .target-size-wrap select {
        font-size: 14px !important;
        padding: 8px 12px !important;
    }

    /* 11. Workspaces on Mobile */
    .editor-layout,
    .compress-editor,
    .convert-editor,
    .pdf-sub-layout,
    .jpg2pdf-editor-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
        width: 100% !important;
    }
    .controls-panel,
    .convert-editor .controls-panel,
    .compress-editor .controls-panel {
        max-height: none !important;
        overflow: visible !important;
        padding: 16px 14px !important;
        border-radius: 20px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    .canvas-container {
        min-height: 220px !important;
        max-height: 48vh !important;
    }
    #main-canvas,
    #compress-preview-img,
    #convert-preview-img {
        max-width: 100% !important;
        max-height: 45vh !important;
        height: auto !important;
        object-fit: contain !important;
    }
    .controls-panel .download-btn,
    .controls-panel .btn-download-primary,
    .download-btn,
    .btn-download {
        width: 100% !important;
        min-height: 50px !important;
        font-size: 15px !important;
        border-radius: 14px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* 12. Top Nav in Auth Pages (login.html & signup.html) */
    .top-nav {
        left: 12px !important;
        right: 12px !important;
        top: 12px !important;
    }
    .brand-back {
        padding: 6px 14px !important;
        font-size: 0.82rem !important;
        gap: 6px !important;
    }
    .brand-back span,
    .brand-badge span {
        display: inline-block !important;
        white-space: nowrap !important;
    }
}

/* ==========================================================
   GEN-Z PREMIUM PASSWORD GENERATOR STYLING
========================================================== */
.pw-genz-wrapper {
    max-width: 680px;
    margin: 10px auto 40px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.pw-genz-hero-card {
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 24px;
    padding: 26px 28px;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.05);
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

body.dark-theme .pw-genz-hero-card {
    background: #0f172a;
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
}

/* Password Display Screen */
.pw-screen {
    background: #0b1120;
    border: 1.5px solid rgba(245, 158, 11, 0.35);
    border-radius: 18px;
    padding: 20px 22px 18px;
    position: relative;
    box-shadow: inset 0 2px 10px rgba(0,0,0,0.6), 0 0 25px rgba(245, 158, 11, 0.12);
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.pw-screen-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 10px;
}

.pw-screen-badge {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: #fbbf24;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.pw-screen-actions {
    display: flex;
    gap: 8px;
}

.pw-icon-btn {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #e2e8f0;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.pw-icon-btn:hover {
    background: rgba(245, 158, 11, 0.25);
    color: #fbbf24;
    border-color: rgba(245, 158, 11, 0.5);
    transform: translateY(-2px);
}

.pw-display-text {
    font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
    font-size: 26px;
    font-weight: 800;
    line-height: 1.35;
    word-break: break-all;
    letter-spacing: 1.5px;
    min-height: 42px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    user-select: all;
    color: #f8fafc;
}

@media (max-width: 600px) {
    .pw-display-text {
        font-size: 20px;
        letter-spacing: 1px;
    }
}

/* Syntax Highlighting */
.pw-display-text .char-upper { color: #f8fafc; font-weight: 800; }
.pw-display-text .char-lower { color: #94a3b8; font-weight: 600; }
.pw-display-text .char-num   { color: #fbbf24; font-weight: 800; }
.pw-display-text .char-sym   { color: #38bdf8; font-weight: 900; }

/* Strength Gauge */
.pw-strength-bar-wrap {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 12px;
}

.pw-strength-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    font-weight: 700;
}

.pw-strength-lbl {
    color: #94a3b8;
    letter-spacing: 0.5px;
}

.pw-strength-val {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 800;
    font-size: 12px;
    color: #34d399;
}

.pw-meter-tracks {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    height: 8px;
}

.pw-meter-seg {
    background: rgba(255, 255, 255, 0.12);
    border-radius: 99px;
    transition: all 0.3s ease;
}

.pw-meter-seg.active-weak {
    background: #ef4444;
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.5);
}

.pw-meter-seg.active-fair {
    background: #f59e0b;
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.5);
}

.pw-meter-seg.active-good {
    background: #10b981;
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.5);
}

.pw-meter-seg.active-god {
    background: linear-gradient(90deg, #f59e0b, #06b6d4);
    box-shadow: 0 0 12px rgba(6, 182, 212, 0.6);
}

.pw-crack-info {
    font-size: 11.5px;
    font-weight: 600;
    color: #94a3b8;
    display: flex;
    align-items: center;
    gap: 6px;
}
.pw-crack-info strong {
    color: #fbbf24;
}

/* Preset Chips */
.pw-presets-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

.pw-preset-pill {
    padding: 7px 14px;
    border-radius: 100px;
    border: 1.5px solid #e2e8f0;
    background: #f8fafc;
    font-size: 12px;
    font-weight: 700;
    color: #334155;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

body.dark-theme .pw-preset-pill {
    background: #1e293b;
    border-color: rgba(255, 255, 255, 0.1);
    color: #cbd5e1;
}

.pw-preset-pill:hover {
    border-color: #f59e0b;
    color: #d97706;
    transform: translateY(-1px);
}

.pw-preset-pill.active {
    background: #fffbeb;
    border-color: #f59e0b;
    color: #b45309;
    box-shadow: 0 3px 10px rgba(245, 158, 11, 0.18);
    font-weight: 800;
}

body.dark-theme .pw-preset-pill.active {
    background: rgba(245, 158, 11, 0.15);
    color: #fbbf24;
}

/* Slider Box */
.pw-slider-card {
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    border-radius: 18px;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

body.dark-theme .pw-slider-card {
    background: #1e293b;
    border-color: rgba(255, 255, 255, 0.08);
}

.pw-slider-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.pw-slider-lbl {
    font-size: 13.5px;
    font-weight: 800;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 8px;
}

body.dark-theme .pw-slider-lbl {
    color: #f1f5f9;
}

.pw-len-badge {
    background: linear-gradient(135deg, #f59e0b, #ea580c);
    color: #ffffff;
    font-family: 'JetBrains Mono', monospace;
    font-size: 13.5px;
    font-weight: 900;
    padding: 4px 12px;
    border-radius: 100px;
    box-shadow: 0 3px 8px rgba(245, 158, 11, 0.35);
}

.pw-slider-controls {
    display: flex;
    align-items: center;
    gap: 14px;
}

.pw-stepper-btn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    color: #334155;
    font-size: 16px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

body.dark-theme .pw-stepper-btn {
    background: #0f172a;
    border-color: rgba(255, 255, 255, 0.15);
    color: #e2e8f0;
}

.pw-stepper-btn:hover {
    border-color: #f59e0b;
    color: #f59e0b;
    transform: scale(1.08);
}

.pw-range-slider {
    flex: 1;
    height: 8px;
    border-radius: 99px;
    accent-color: #f59e0b;
    cursor: pointer;
}

/* Option Grid - Gen-Z Cards */
.pw-options-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

@media (max-width: 500px) {
    .pw-options-grid {
        grid-template-columns: 1fr;
    }
}

.pw-option-card {
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    border-radius: 14px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
}

body.dark-theme .pw-option-card {
    background: #1e293b;
    border-color: rgba(255, 255, 255, 0.08);
}

.pw-option-card:hover {
    border-color: #f59e0b;
    transform: translateY(-1px);
}

.pw-option-card.active {
    background: #fffbeb;
    border-color: #f59e0b;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.12);
}

body.dark-theme .pw-option-card.active {
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(245, 158, 11, 0.45);
}

.pw-option-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pw-option-icon {
    font-size: 16px;
    width: 24px;
    text-align: center;
}

.pw-option-title {
    font-size: 13px;
    font-weight: 700;
    color: #1e293b;
}

body.dark-theme .pw-option-title {
    color: #f1f5f9;
}

.pw-option-sample {
    font-size: 11px;
    font-weight: 600;
    color: #94a3b8;
    margin-top: 1px;
}

/* Custom Toggle Switch */
.pw-switch {
    position: relative;
    width: 40px;
    height: 22px;
    background: #cbd5e1;
    border-radius: 99px;
    transition: background 0.2s ease;
    flex-shrink: 0;
}

body.dark-theme .pw-switch {
    background: #334155;
}

.pw-switch::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    background: #ffffff;
    border-radius: 50%;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.pw-option-card.active .pw-switch {
    background: linear-gradient(135deg, #f59e0b, #ea580c);
}

.pw-option-card.active .pw-switch::after {
    transform: translateX(18px);
}

/* Generate Main CTA Button */
.pw-main-btn {
    width: 100%;
    padding: 16px 24px;
    border-radius: 16px;
    border: none;
    background: linear-gradient(135deg, #f59e0b 0%, #ea580c 100%);
    color: #ffffff;
    font-family: inherit;
    font-size: 15.5px;
    font-weight: 800;
    letter-spacing: 0.3px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: 0 8px 24px rgba(245, 158, 11, 0.4);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.pw-main-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(245, 158, 11, 0.55);
}

.pw-main-btn:active {
    transform: translateY(1px);
}

/* History Box */
.pw-history-wrap {
    margin-top: 14px;
    border-top: 1px dashed #e2e8f0;
    padding-top: 16px;
}

body.dark-theme .pw-history-wrap {
    border-color: rgba(255, 255, 255, 0.1);
}

.pw-history-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11.5px;
    font-weight: 800;
    color: #64748b;
    margin-bottom: 10px;
    letter-spacing: 0.5px;
}

.pw-history-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pw-history-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 8px 12px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12.5px;
    color: #334155;
}

body.dark-theme .pw-history-item {
    background: #1e293b;
    border-color: rgba(255, 255, 255, 0.08);
    color: #cbd5e1;
}

.pw-history-item button {
    background: none;
    border: none;
    color: #f59e0b;
    cursor: pointer;
    font-size: 13px;
    padding: 2px 6px;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.pw-history-item button:hover {
    background: rgba(245, 158, 11, 0.15);
    transform: scale(1.1);
}

/* ================================================================
   GEN-Z SUPERCHARGED HERO & 3D STICKERS
   ================================================================ */
.genz-hero-wrapper {
    position: relative;
    max-width: 960px;
    margin: 0 auto;
    text-align: center;
    padding: 12px 16px 28px;
}

.genz-floating-sticker {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 12px;
    background: #ffffff;
    border: 2px solid #0f172a;
    border-radius: 18px;
    padding: 10px 16px;
    box-shadow: 4px 4px 0 #0f172a, 0 12px 28px rgba(15, 23, 42, 0.12);
    z-index: 10;
    cursor: default;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.genz-floating-sticker:hover {
    transform: scale(1.06) rotate(0deg) !important;
}

.genz-sticker-left {
    left: -20px;
    top: 40px;
    transform: rotate(-6deg);
    animation: genzFloatSlow 4.5s ease-in-out infinite;
}

.genz-sticker-right {
    right: -20px;
    top: 35px;
    transform: rotate(6deg);
    animation: genzFloatReverse 5s ease-in-out infinite;
}

@keyframes genzFloatSlow {
    0%, 100% { transform: translateY(0px) rotate(-6deg); }
    50% { transform: translateY(-8px) rotate(-3deg); }
}
@keyframes genzFloatReverse {
    0%, 100% { transform: translateY(0px) rotate(6deg); }
    50% { transform: translateY(-9px) rotate(3deg); }
}

@media (max-width: 1024px) {
    .genz-sticker-left { left: 0; }
    .genz-sticker-right { right: 0; }
}

@media (max-width: 860px) {
    .genz-floating-sticker {
        display: none !important;
    }
}

.genz-sticker-icon {
    font-size: 26px;
    line-height: 1;
}

.genz-sticker-body {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.genz-sticker-tag {
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: #ff7a00;
}

.genz-sticker-tag.genz-tag-green {
    color: #10b981;
}

.genz-sticker-val {
    font-size: 13.5px;
    font-weight: 900;
    color: #0f172a;
    line-height: 1.2;
}

body.dark-theme .genz-floating-sticker {
    background: #1e293b;
    border-color: #38bdf8;
    box-shadow: 4px 4px 0 #38bdf8;
}
body.dark-theme .genz-sticker-val {
    color: #ffffff;
}

.genz-announcement-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff7ed;
    border: 1.5px solid #fed7aa;
    color: #0f172a;
    padding: 6px 16px;
    border-radius: 9999px;
    font-size: 12.5px;
    font-weight: 800;
    margin-bottom: 20px;
    box-shadow: 0 4px 12px rgba(255, 122, 0, 0.08);
}

.genz-announcement-badge {
    background: #ff7a00;
    color: #ffffff;
    font-size: 10px;
    font-weight: 900;
    padding: 2px 7px;
    border-radius: 9999px;
    letter-spacing: 0.5px;
}

body.dark-theme .genz-announcement-pill {
    background: rgba(255, 122, 0, 0.12);
    border-color: rgba(255, 122, 0, 0.35);
    color: #fdba74;
}

.genz-hero-heading {
    font-family: 'Space Grotesk', 'Plus Jakarta Sans', sans-serif !important;
    font-size: 58px !important;
    font-weight: 900 !important;
    color: #0f172a !important;
    letter-spacing: -1.8px !important;
    line-height: 1.05 !important;
    margin: 0 auto 18px !important;
}

.genz-brand-dot {
    color: #ff7a00;
}

.genz-gradient-text {
    display: inline-block;
    background: linear-gradient(90deg, #ff7a00 0%, #ff8c1a 45%, #f59e0b 80%, #ff5500 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

body.dark-theme .genz-hero-heading {
    color: #ffffff !important;
}

.genz-hero-sub {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #475569 !important;
    max-width: 660px !important;
    margin: 0 auto 26px !important;
    line-height: 1.6 !important;
}

.genz-hero-sub strong {
    color: #0f172a;
    font-weight: 800;
    text-decoration: underline;
    text-decoration-color: #ff7a00;
    text-decoration-thickness: 2px;
}

body.dark-theme .genz-hero-sub {
    color: #94a3b8 !important;
}
body.dark-theme .genz-hero-sub strong {
    color: #ffffff !important;
}

.genz-cta-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin: 20px 0 32px;
}

.genz-btn-3d-orange {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(180deg, #ff8c1a 0%, #ff6b00 100%) !important;
    color: #ffffff !important;
    font-family: 'Space Grotesk', 'Plus Jakarta Sans', sans-serif;
    font-weight: 800 !important;
    font-size: 15.5px !important;
    padding: 14px 34px !important;
    border-radius: 18px !important;
    text-decoration: none !important;
    box-shadow: 0 6px 0 #cc4d00, 0 14px 28px rgba(255, 107, 0, 0.35) !important;
    transition: all 0.15s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
.genz-btn-3d-orange:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 0 #cc4d00, 0 18px 32px rgba(255, 107, 0, 0.45) !important;
}
.genz-btn-3d-orange:active {
    transform: translateY(4px);
    box-shadow: 0 2px 0 #cc4d00, 0 6px 12px rgba(255, 107, 0, 0.25) !important;
}

.genz-btn-3d-white {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
    color: #0f172a !important;
    border: 2px solid #cbd5e1 !important;
    font-family: 'Space Grotesk', 'Plus Jakarta Sans', sans-serif;
    font-weight: 800 !important;
    font-size: 15.5px !important;
    padding: 14px 30px !important;
    border-radius: 18px !important;
    text-decoration: none !important;
    box-shadow: 0 5px 0 #cbd5e1, 0 12px 24px rgba(15, 23, 42, 0.08) !important;
    transition: all 0.15s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
.genz-btn-3d-white i {
    color: #ff7a00;
}
.genz-btn-3d-white:hover {
    transform: translateY(-2px);
    box-shadow: 0 7px 0 #cbd5e1, 0 16px 28px rgba(15, 23, 42, 0.12) !important;
}
.genz-btn-3d-white:active {
    transform: translateY(3px);
    box-shadow: 0 2px 0 #cbd5e1, 0 4px 8px rgba(15, 23, 42, 0.06) !important;
}

body.dark-theme .genz-btn-3d-white {
    background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%) !important;
    color: #ffffff !important;
    border-color: #334155 !important;
    box-shadow: 0 5px 0 #020617, 0 12px 24px rgba(0, 0, 0, 0.4) !important;
}

@media (max-width: 640px) {
    .genz-hero-heading {
        font-size: 38px !important;
    }
    .genz-hero-sub {
        font-size: 14px !important;
    }
    .genz-btn-3d-orange,
    .genz-btn-3d-white {
        width: 100%;
        justify-content: center;
        padding: 12px 20px !important;
        font-size: 14px !important;
    }
}




/* ========================================================= */
/* ID CARD STANDARD PRINT: MULTI-COLOUR DOCK TABS & DECISION */
/* ========================================================= */
.tab-nav-item#tab-nav-idcards.active {
    background: #ffffff !important; color: #FF3E83 !important;
    border-color: rgba(255, 62, 131, 0.4) !important;
    box-shadow: 0 4px 14px rgba(255, 62, 131, 0.18) !important;
    font-weight: 900 !important;
}
.tab-nav-item#tab-nav-idcards.active i { color: #FF3E83 !important; }

.tab-nav-item#tab-nav-idadjust.active {
    background: #ffffff !important; color: #0284c7 !important;
    border-color: rgba(6, 182, 212, 0.45) !important;
    box-shadow: 0 4px 14px rgba(6, 182, 212, 0.2) !important;
    font-weight: 900 !important;
}
.tab-nav-item#tab-nav-idadjust.active i { color: #0284c7 !important; }

.tab-nav-item#tab-nav-idprint.active {
    background: #ffffff !important; color: #059669 !important;
    border-color: rgba(0, 200, 83, 0.4) !important;
    box-shadow: 0 4px 14px rgba(0, 200, 83, 0.2) !important;
    font-weight: 900 !important;
}
.tab-nav-item#tab-nav-idprint.active i { color: #059669 !important; }

body.dark-theme .tab-nav-item#tab-nav-idcards.active {
    background: rgba(255, 62, 131, 0.2) !important; color: #ff6b9d !important;
}
body.dark-theme .tab-nav-item#tab-nav-idadjust.active {
    background: rgba(6, 182, 212, 0.2) !important; color: #38bdf8 !important;
}
body.dark-theme .tab-nav-item#tab-nav-idprint.active {
    background: rgba(0, 200, 83, 0.2) !important; color: #4ade80 !important;
}

#pane-idcards .idtype-btn.active {
    border-color: #FF3E83 !important;
    background: rgba(255, 62, 131, 0.08) !important;
    color: #FF3E83 !important;
    box-shadow: 0 4px 12px rgba(255, 62, 131, 0.15) !important;
}
#pane-idcards .idtype-btn.active i,
#pane-idcards .idtype-btn.active span,
#pane-idcards .idtype-btn.active small {
    color: #FF3E83 !important;
}

/* DECISION OVERLAY ("Crop & Straighten" vs "OK Direct") */
.decision-overlay {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background: rgba(15, 23, 42, 0.75); backdrop-filter: blur(8px);
    display: none; align-items: center; justify-content: center;
    z-index: 99999; animation: fadeIn 0.2s ease;
}
.decision-box {
    background: var(--bg-surface, #ffffff); border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 20px; width: 92%; max-width: 440px; padding: 24px;
    box-shadow: 0 25px 60px rgba(0,0,0,0.4); text-align: center;
    display: flex; flex-direction: column; gap: 14px; animation: popUp 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
body.dark-theme .decision-box {
    background: #141624; border-color: rgba(255, 255, 255, 0.15);
}
.decision-icon-badge {
    width: 56px; height: 56px; border-radius: 50%;
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.15), rgba(59, 130, 246, 0.15));
    border: 2px solid #06b6d4; display: flex; align-items: center; justify-content: center;
    margin: 0 auto; color: #0284c7; font-size: 22px;
}
.decision-title { font-size: 18px; font-weight: 800; color: var(--text-heading, #0f172a); }
body.dark-theme .decision-title { color: #f8fafc; }
.decision-desc { font-size: 13px; color: var(--text-muted, #64748b); line-height: 1.5; }
.decision-btn-group {
    display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 6px;
}
.btn-decision-crop {
    background: linear-gradient(135deg, #06b6d4 0%, #3b82f6 100%); color: #fff; border: none;
    padding: 12px 14px; border-radius: 12px; font-size: 13px; font-weight: 800;
    cursor: pointer; display: flex; flex-direction: column; align-items: center;
    gap: 4px; box-shadow: 0 4px 14px rgba(6, 182, 212, 0.35); transition: all 0.2s;
}
.btn-decision-crop:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(6, 182, 212, 0.5); }
.btn-decision-crop small { font-size: 10px; opacity: 0.9; font-weight: 600; }

.btn-decision-ok {
    background: linear-gradient(135deg, #00C853 0%, #059669 100%); color: #fff; border: none;
    padding: 12px 14px; border-radius: 12px; font-size: 13px; font-weight: 800;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    flex-direction: column; gap: 4px; box-shadow: 0 4px 14px rgba(0, 200, 83, 0.35); transition: all 0.2s;
}
.btn-decision-ok:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0, 200, 83, 0.5); }
.btn-decision-ok small { font-size: 10px; opacity: 0.9; font-weight: 600; }


/* ========================================================
   SYNC ACTION BUTTONS ROW OVERRIDE - 100% HORIZONTAL ALIGNMENT
   ======================================================== */
.sync-action-btn-row {
    display: flex !important;
    flex-direction: row !important;
    gap: 12px !important;
    width: 100% !important;
    align-items: center !important;
    justify-content: stretch !important;
    margin: 0 0 8px 0 !important;
    padding: 0 !important;
}
.sync-action-btn-row #btn-download {
    flex: 1 1 100% !important;
    width: 100% !important;
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 0 16px !important;
    margin: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    vertical-align: middle !important;
}
.sync-action-btn-row #btn-send-to-phone {
    flex: 1 1 50% !important;
    width: auto !important;
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    box-sizing: border-box !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 0 16px !important;
    margin: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    vertical-align: middle !important;
}
.sync-action-btn-row #btn-send-to-phone:not([style*="display: none"]):not([style*="display:none"]) ~ #btn-download {
    flex: 1 1 50% !important;
    width: auto !important;
}


/* ========================================================
   SIZEFIX 60FPS TURBO PERFORMANCE & GPU OPTIMIZATIONS
   ======================================================== */
/* 1. Skip rendering off-screen and inactive heavy tool sections */
.tab-pane:not(.active),
.tool-content:not(.active),
.tab-content:not(.active),
.faq-section,
.guides-section,
.seo-content-section,
.exam-seo-table-section {
    content-visibility: auto;
    contain-intrinsic-size: 1px 400px;
}

/* 2. Hardware acceleration on active animated elements */
.radar-pulse::after,
.drop-pulse-ring,
.floating-drop-icon,
.sf-toast-progress,
.sf-launch-toast {
    will-change: transform, opacity;
    transform: translateZ(0);
}

/* 3. Mobile GPU Cooling: replace heavy backdrop blur with smooth frosted glass */
@media (max-width: 768px) {
    .sf-modal-overlay,
    .persp-modal,
    .ambient-orb {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
    .sf-modal-overlay {
        background: rgba(15, 23, 42, 0.94) !important;
    }
    .persp-modal {
        background: rgba(8, 12, 22, 0.96) !important;
    }
}

/* Fast Tap & Smooth Scroll Engine */
a, button, .dash-card, .btn, .gz-pill {
    touch-action: manipulation;
}
html {
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}
.dash-card {
    content-visibility: auto;
    contain-intrinsic-size: 0 240px;
}


/* ---- Universal SizeFix Sunburn Gold Brand Action Buttons & Badges ---- */
.sf-btn-primary, .btn-primary, .sf-btn-action, .btn-action-primary {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 12px !important;
    font-weight: 800 !important;
    box-shadow: 0 8px 24px -4px rgba(217, 119, 6, 0.4) !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.sf-btn-primary:hover, .btn-primary:hover, .sf-btn-action:hover, .btn-action-primary:hover {
    background: linear-gradient(135deg, #fbbf24 0%, #ea580c 100%) !important;
    box-shadow: 0 12px 28px -4px rgba(217, 119, 6, 0.55) !important;
    transform: translateY(-2px) !important;
}

.sf-btn-primary:disabled, .btn-primary:disabled, .sf-btn-action:disabled, .btn-action-primary:disabled {
    background: #cbd5e1 !important;
    box-shadow: none !important;
    transform: none !important;
    cursor: not-allowed !important;
}

/* Showcase top badge unified gold styling */
[class*="-badge"].blue {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 10px 25px -4px rgba(217, 119, 6, 0.4) !important;
}

/* Universal Input Focus Ring in Gold */
.sf-input-group input:focus, .sf-textarea:focus {
    border-color: #d97706 !important;
    box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.18) !important;
    outline: none !important;
}


/* Prevent double-boxing around dropzone */
.sf-tool-card:has(.upload-area),
.sf-tool-card:has(.genz-dropzone) {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}


/* ==========================================================================
   🎈 SIZEFIX STYLE 5: GEN-Z ELASTIC SPRING POP (HOME & RESET ANIMATION)
   ========================================================================== */
.tool-banner-back-btn,
.back-link,
.back-home-link,
.nav-external[onclick*="index.html"],
.btn-action[href*="index.html"],
header a[href="index.html"]:not(.logo):not(.brand-logo):not(.logo-box):not(.brand-link):not(.brand-badge):not(.brand):not(.mock-logo),
header .nav-links a[href="index.html"],
header .nav-links button[onclick*="index.html"] {
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) !important, 
                border-color 0.2s ease !important, 
                background-color 0.2s ease !important, 
                box-shadow 0.25s ease !important,
                color 0.2s ease !important;
}

.tool-banner-back-btn:hover,
.back-link:hover,
.back-home-link:hover,
.nav-external[onclick*="index.html"]:hover,
.btn-action[href*="index.html"]:hover,
header a[href="index.html"]:not(.logo):not(.brand-logo):not(.logo-box):not(.brand-link):not(.brand-badge):not(.brand):not(.mock-logo):hover,
header .nav-links a[href="index.html"]:hover,
header .nav-links button[onclick*="index.html"]:hover {
    transform: scale(1.08) translateY(-1px) !important;
    background-color: #fffbeb !important;
    border-color: #f59e0b !important;
    color: #b45309 !important;
    box-shadow: 0 6px 18px rgba(245, 158, 11, 0.25) !important;
}

.tool-banner-back-btn i,
.back-link i,
.back-home-link i,
.nav-external[onclick*="index.html"] i,
.btn-action[href*="index.html"] i,
header a[href="index.html"]:not(.logo):not(.brand-logo):not(.logo-box):not(.brand-link):not(.brand-badge):not(.brand):not(.mock-logo) i {
    display: inline-block;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important, color 0.2s ease !important;
}

.tool-banner-back-btn:hover i,
.back-link:hover i,
.back-home-link:hover i,
.nav-external[onclick*="index.html"]:hover i,
.btn-action[href*="index.html"]:hover i,
header a[href="index.html"]:not(.logo):not(.brand-logo):not(.logo-box):not(.brand-link):not(.brand-badge):not(.brand):not(.mock-logo):hover i {
    transform: rotate(-14deg) scale(1.22) !important;
    color: #f59e0b !important;
}

/* Reset Button */
.vx-reset-btn,
.reset-btn-clean,
.nav-external.nav-reset,
header button[onclick*="reload"],
header button[title*="Reset"],
header .vx-reset-btn {
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) !important, 
                border-color 0.2s ease !important, 
                background-color 0.2s ease !important, 
                box-shadow 0.25s ease !important,
                color 0.2s ease !important;
}

.vx-reset-btn:hover,
.reset-btn-clean:hover,
.nav-external.nav-reset:hover,
header button[onclick*="reload"]:hover,
header button[title*="Reset"]:hover,
header .vx-reset-btn:hover {
    transform: scale(1.08) translateY(-1px) !important;
    background-color: #fef2f2 !important;
    border-color: #ef4444 !important;
    color: #b91c1c !important;
    box-shadow: 0 6px 18px rgba(239, 68, 68, 0.25) !important;
}

.vx-reset-btn i,
.reset-btn-clean i,
.nav-external.nav-reset i,
header button[onclick*="reload"] i,
header button[title*="Reset"] i {
    display: inline-block;
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) !important, color 0.2s ease !important;
}

.vx-reset-btn:hover i,
.reset-btn-clean:hover i,
.nav-external.nav-reset:hover i,
header button[onclick*="reload"]:hover i,
header button[title*="Reset"]:hover i {
    transform: rotate(-360deg) scale(1.25) !important;
    color: #ef4444 !important;
}

/* Tactile Active Press */
.tool-banner-back-btn:active,
.back-link:active,
.back-home-link:active,
.vx-reset-btn:active,
.reset-btn-clean:active,
header button[onclick*="reload"]:active,
header a[href="index.html"]:not(.logo):not(.brand-logo):not(.logo-box):not(.brand-link):not(.brand-badge):not(.brand):not(.mock-logo):active {
    transform: scale(0.95) !important;
}


/* ==========================================================================
   🎯 SIZEFIX UNIVERSAL DROPZONE & AUTO-HIDE ENGINE (CANVA / ILOVEPDF LEVEL)
   ========================================================================== */
.upload-area,
.genz-dropzone,
.sig-dropzone,
.sf-dropzone,
.sf-dropzone-half,
.card-upload-box,
#dropzoneBox,
#bulk-dropzone,
#upload-area,
.hero-box {
    border: 2px dashed rgba(245, 158, 11, 0.45) !important;
    border-radius: 28px !important;
    padding: 36px 24px !important;
    text-align: center !important;
    cursor: pointer !important;
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    background: rgba(255, 255, 255, 0.94) !important;
    backdrop-filter: blur(25px) !important;
    max-width: 720px !important;
    width: 100% !important;
    margin: 16px auto 20px !important;
    min-height: 280px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 16px 45px rgba(245, 158, 11, 0.12), 0 4px 18px rgba(0, 0, 0, 0.04) !important;
    box-sizing: border-box !important;
}

.upload-area:hover,
.genz-dropzone:hover,
.sig-dropzone:hover,
.sf-dropzone:hover,
.card-upload-box:hover,
#dropzoneBox:hover,
#bulk-dropzone:hover,
#upload-area:hover,
.hero-box:hover,
.upload-area.dragover,
.genz-dropzone.dragover,
#dropzoneBox.dragover {
    border-color: #ea580c !important;
    background: #fffbeb !important;
    box-shadow: 0 20px 50px rgba(234, 88, 12, 0.22), 0 0 25px rgba(245, 158, 11, 0.25) !important;
    transform: translateY(-2px) scale(1.01) !important;
}

/* Hidden state when file is dropped */
.sf-dropzone-hidden,
.upload-area.hidden,
.genz-dropzone.hidden,
#upload-area.hidden,
#dropzoneBox.hidden,
#bulk-dropzone.hidden {
    display: none !important;
}