:root {
    /* Premium Dark Theme Palette */
    --bg-main: #0a0a0f;
    --bg-card: rgba(20, 20, 25, 0.6);
    --bg-hover: rgba(40, 40, 50, 0.8);
    --text-primary: #ffffff;
    --text-secondary: #9ca3af;
    
    /* Accents */
    --accent-blue: #3b82f6;
    --accent-blue-glow: rgba(59, 130, 246, 0.4);
    --accent-purple: #8b5cf6;
    --accent-purple-glow: rgba(139, 92, 246, 0.4);
    --accent-cyan: #06b6d4;
    
    /* Semantic Colors */
    --color-success: #10b981;
    --color-error: #ef4444;
    --color-warning: #f59e0b;

    /* UI Elements */
    --border-color: rgba(255, 255, 255, 0.08);
    --border-radius: 16px;
    --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
    --backdrop-blur: blur(12px);

    /* Dark-specific UI tokens */
    --input-bg: rgba(255, 255, 255, 0.05);
    --input-border: rgba(255, 255, 255, 0.1);
    --divider-color: rgba(255, 255, 255, 0.06);
    --card-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
    --card-hover-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}

/* ── Smooth Theme Transition ── */
html, body,
.app-container, .nav-card, .feature-card, .testimonial-card,
.faq-item, .step-card, .stats-bar, .navbar, .site-footer,
.newsletter-box, .result-card, .upload-area, .btn-primary,
.btn-secondary, .theme-toggle, .floating-history-btn,
.history-sidebar, .toast, .user-dropdown, h1, h2, p {
    transition: background-color 0.4s ease,
                color 0.4s ease,
                border-color 0.4s ease,
                box-shadow 0.4s ease;
}

/* ══════════════════════════════════════════════
   SMOOTH MOTION SYSTEM — Android & iOS
   All animations and scroll interactions are
   synced to the device refresh rate via
   requestAnimationFrame in JS and CSS properties
   that the compositor thread can handle without
   touching the main thread (transform, opacity).
   ══════════════════════════════════════════════ */

/* ── Native Momentum Scrolling (iOS Safari) ── */
html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}
body {
    -webkit-overflow-scrolling: touch;   /* iOS kinetic scroll */
    overscroll-behavior-y: contain;      /* prevent pull-to-refresh jank on Android */
}

/* ── GPU Promotion for Animated Layers ──
   Only promote elements that actually animate.
   Blanket will-change: transform on everything
   causes memory pressure — we target precisely. */
.navbar,
.history-sidebar,
.floating-history-btn,
#mobile-bottom-nav,
.hero-section,
.floating-mockup {
    will-change: transform;
    transform: translateZ(0);           /* force composited layer */
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Cards — only promote on hover to avoid idle memory pressure */
.nav-card:hover,
.feature-card:hover,
.testimonial-card:hover,
.pricing-card:hover,
.step-card:hover {
    will-change: transform;
}

/* Animated overlays — always composited */
.aurora-bg .aurora-band,
.scan-line,
.marquee-track,
.ticker-strip,
#scroll-progress,
.page-transition-overlay {
    will-change: transform, opacity;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

/* ── Smooth CSS Transitions — eased for 60/90/120 Hz ──
   cubic-bezier(0.25, 0.46, 0.45, 0.94) = "ease-out-quad"
   feels soft and natural at any refresh rate.            */
.btn-primary,
.btn-secondary {
    transition: transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                box-shadow 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                background-color 0.25s ease,
                color 0.2s ease,
                border-color 0.2s ease;
}

.nav-card,
.feature-card,
.testimonial-card,
.step-card,
.pricing-card,
.partner-card,
.badge-card,
.quiz-option,
.daily-option {
    transition: transform 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                box-shadow 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                border-color 0.2s ease,
                background-color 0.3s ease;
}

/* Modals and overlays — spring-like entrance */
.user-dropdown,
#smart-search-modal .search-box,
.shortcuts-box,
#share-modal .share-card {
    transition: opacity 0.22s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
                visibility 0.22s;
}

/* Sidebar slide — spring out */
.history-sidebar {
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Toasts — slide in with spring, fade out linearly */
.activity-toast,
.social-proof-toast,
.achievement-popup {
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.3s linear;
}

/* Floating button */
.floating-history-btn {
    transition: transform 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                box-shadow 0.28s ease,
                border-color 0.2s ease,
                color 0.2s ease;
}

/* FAQ accordion max-height expansion */
.faq-answer {
    transition: max-height 0.38s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                padding 0.3s ease;
}

/* ── Touch-action: let the browser decide panning ── */
* {
    touch-action: pan-y;    /* allow vertical scroll on all elements */
}

/* Sliders & horizontal carousels need horizontal freedom */
.creative-slider,
.marquee-section,
.ticker-wrap,
.press-logos,
.partners-grid,
.badges-grid,
.pricing-cards {
    touch-action: pan-x pan-y;
}

/* Interactive buttons/cards should respond to tap without scroll delay */
button,
a,
.nav-card,
.quiz-option,
.daily-option,
.mob-nav-item,
.dot-nav-item,
.faq-question,
.tab-btn,
.api-tab,
.pricing-cta,
.ctx-item,
.dropdown-item,
.share-btn,
.record-btn,
.upload-area {
    touch-action: manipulation;  /* removes 300ms tap delay on iOS/Android */
    -webkit-tap-highlight-color: transparent; /* remove grey flash on tap */
}

/* ── CSS Animation Smoothness Tweaks ──
   Use steps() for grain/flicker, cubic-bezier for everything
   that needs to feel physically real.                       */

/* Floating mockup — softer float arc */
@keyframes floatUp {
    0%, 100% { transform: translateY(0) translateZ(0); }
    50%       { transform: translateY(-16px) translateZ(0); }
}
.floating-mockup {
    animation: floatUp 4.5s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}

/* Aurora — slower, smoother shift */
@keyframes auroraShift {
    0%   { transform: translateX(-10%) rotate(-2deg) scaleY(1) translateZ(0); }
    50%  { transform: translateX(10%) rotate(1deg) scaleY(1.15) translateZ(0); }
    100% { transform: translateX(-5%) rotate(-1deg) scaleY(0.92) translateZ(0); }
}

/* Marquee — GPU only, no layout changes */
@keyframes marqueeScroll {
    from { transform: translateX(0) translateZ(0); }
    to   { transform: translateX(-50%) translateZ(0); }
}

/* Ticker — same */
@keyframes tickerScroll {
    from { transform: translateX(0) translateZ(0); }
    to   { transform: translateX(-50%) translateZ(0); }
}

/* Spin — smooth rotation */
@keyframes spin {
    to { transform: rotate(360deg) translateZ(0); }
}

/* Pulse — opacity + scale on compositor thread */
@keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1) translateZ(0); }
    50%       { opacity: 0.5; transform: scale(0.82) translateZ(0); }
}

/* Scan line — translateY only (no layout reflow) */
@keyframes scanDown {
    0%   { transform: translateY(0) translateZ(0); opacity: 0; }
    8%   { opacity: 0.7; }
    92%  { opacity: 0.7; }
    100% { transform: translateY(100%) translateZ(0); opacity: 0; }
}
.scan-line {
    top: 0; /* use transform instead of top in JS if possible */
}

/* Record button pulse — defined once below in the .record-btn section */

/* pulseRed / pulseGreen result icons */
@keyframes pulseRed {
    0%   { box-shadow: 0 0 0 0 rgba(239,68,68,0.4); }
    70%  { box-shadow: 0 0 0 22px rgba(239,68,68,0); }
    100% { box-shadow: 0 0 0 0 rgba(239,68,68,0); }
}
@keyframes pulseGreen {
    0%   { box-shadow: 0 0 0 0 rgba(16,185,129,0.4); }
    70%  { box-shadow: 0 0 0 22px rgba(16,185,129,0); }
    100% { box-shadow: 0 0 0 0 rgba(16,185,129,0); }
}

/* Float icon — smooth translateY only */
@keyframes floatIcon {
    0%, 100% { transform: translateY(0) translateZ(0); }
    50%       { transform: translateY(-8px) translateZ(0); }
}

/* Slide-up reveal — opacity + transform (compositor-safe) */
@keyframes slideUpFadeIn {
    from { opacity: 0; transform: translateY(24px) translateZ(0); }
    to   { opacity: 1; transform: translateY(0) translateZ(0); }
}

/* Confetti ripple ring */
@keyframes pulseRing {
    0%   { transform: scale(0.82) translateZ(0); opacity: 1; }
    100% { transform: scale(1.45) translateZ(0); opacity: 0; }
}

/* Ripple click — scale only */
@keyframes rippleOut {
    to { transform: scale(4) translateZ(0); opacity: 0; }
}

/* Voice bar animation — height only (layout but lightweight) */
@keyframes voiceBar {
    0%, 100% { height: 4px; }
    50%       { height: 14px; }
}

/* Gradient shift — background-position (paint but not layout) */
@keyframes gradientShift {
    from { background-position: 200% 0; }
    to   { background-position: -200% 0; }
}

/* Record pulse */
@keyframes recordPulse {
    0%,  100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.4); }
    50%        { box-shadow: 0 0 0 10px rgba(239,68,68,0); }
}

/* ── Scroll-Linked Progress Bar Optimisation ──
   Applied inline; ensure the element itself
   uses will-change: width for smooth paint.   */
#scroll-progress {
    will-change: width;
    contain: layout style;
}


/* ── Mobile-specific smoothness overrides ── */

/* ===== HOW IT WORKS STEPS ===== */
.steps-grid {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 24px;
    margin: 40px auto;
    width: 100%;
}
.step-card {
    background: var(--bg-card);
    backdrop-filter: var(--backdrop-blur);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 30px 24px;
    flex: 1;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    position: relative;
    overflow: hidden;
}
.step-number {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--accent-cyan), var(--accent-purple));
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    font-weight: 800;
    color: #fff;
    margin: 0 auto 20px;
    box-shadow: 0 0 20px rgba(6,182,212,0.4);
}
.step-card h4 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 12px;
    color: var(--text-primary);
}
.step-card p {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}
.step-connector {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    font-size: 24px;
    opacity: 0.5;
}

@media (max-width: 1024px) {
    /* FIX: Prevent header icons overlapping on mobile */
    .app-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 16px !important;
    }
    .app-header > div:last-child {
        width: 100%;
        justify-content: space-between !important;
    }
    .hide-on-mobile { display: none !important; }
    /* On mobile, reduce blur radius — blur is GPU-expensive on mobile GPUs */
    .navbar,
    .history-sidebar,
    #mobile-bottom-nav {
        backdrop-filter: blur(12px) !important;
        -webkit-backdrop-filter: blur(12px) !important;
    }


    /* Disable 3D perspective on cards (costly on mobile GPU) */
    .nav-card, .feature-card, .testimonial-card {
        transform-style: flat !important;
        perspective: none !important;
    }

    /* Shorter but still smooth card transitions on mobile */
    .nav-card,
    .feature-card,
    .testimonial-card,
    .step-card,
    .pricing-card {
        transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                    box-shadow 0.2s ease,
                    border-color 0.15s ease !important;
    }

    /* Disable hover transform on touch (no hover state anyway) */
    .nav-card:hover,
    .feature-card:hover,
    .testimonial-card:hover,
    .step-card:hover,
    .pricing-card:hover {
        transform: none;
        will-change: auto;
    }

    /* Floating mockup — gentler float on mobile */
    .floating-mockup {
        animation-duration: 5s;
    }

    /* Shimmer — reduce to once per 8s on mobile */
    .stats-bar::after {
        animation-duration: 8s;
    }
}

/* ── Custom Scrollbar — Dark ── */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #0a0a0f; }
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--accent-cyan), var(--accent-purple));
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover { background: var(--accent-blue); }

[data-theme="light"]::-webkit-scrollbar-track { background: #f1f5f9; }
[data-theme="light"]::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #0891b2, #7c3aed);
}
[data-theme="light"]::-webkit-scrollbar-thumb:hover { background: #2563eb; }

/* ── Text Selection ── */
::selection {
    background: rgba(6, 182, 212, 0.35);
    color: #ffffff;
}
[data-theme="light"] ::selection {
    background: rgba(8, 145, 178, 0.25);
    color: #0f172a;
}

[data-theme="light"] {
    --bg-main: #fafafa;
    --bg-card: rgba(255, 255, 255, 0.85);
    --bg-hover: #f3f4f6;
    --text-primary: #111827;
    --text-secondary: #4b5563;
    --border-color: rgba(17, 24, 39, 0.08);
    --glass-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.05);
    --backdrop-blur: blur(24px);

    /* Light-tuned accents - Sophisticated Palette */
    --accent-blue: #3b82f6;
    --accent-blue-glow: rgba(59, 130, 246, 0.15);
    --accent-purple: #6366f1;
    --accent-purple-glow: rgba(99, 102, 241, 0.12);
    --accent-cyan: #0ea5e9;

    /* Light semantic */
    --color-success: #059669;
    --color-error: #dc2626;
    --color-warning: #d97706;

    /* Light-specific UI tokens */
    --input-bg: #ffffff;
    --input-border: rgba(17, 24, 39, 0.1);
    --divider-color: rgba(17, 24, 39, 0.06);
    --card-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
    --card-hover-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}

/* ── Specific UI Components ── */
.tabs {
    display: flex;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 12px;
    padding: 6px;
    margin-bottom: 24px;
}

[data-theme="light"] .tabs {
    background: #e2e8f0;
}

.tab-btn {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    padding: 12px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.tab-btn.active {
    background: var(--bg-card);
    color: var(--text-primary);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

[data-theme="light"] .tab-btn.active {
    background: #ffffff;
    color: #0f172a;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

/* ── Light Mode Icon Contrast & Clarity ── */
[data-theme="light"] i,
[data-theme="light"] .fa-solid,
[data-theme="light"] .fa-regular,
[data-theme="light"] .fa-brands {
    color: inherit;
}

[data-theme="light"] .btn-secondary {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.12);
    color: #0f172a;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
[data-theme="light"] .btn-secondary i {
    color: #0f172a;
}
[data-theme="light"] .btn-secondary:hover {
    background: #f1f5f9;
    border-color: rgba(6, 182, 212, 0.4);
    color: #0284c7;
}
[data-theme="light"] .btn-secondary:hover i {
    color: #0284c7;
}

[data-theme="light"] .theme-toggle {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.12);
    color: #0f172a;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
[data-theme="light"] .theme-toggle i {
    color: #0f172a;
}

[data-theme="light"] .nav-links a {
    color: #475569;
}
[data-theme="light"] .nav-links a i {
    color: #475569;
}
[data-theme="light"] .nav-links a:hover {
    color: #0284c7;
}
[data-theme="light"] .nav-links a:hover i {
    color: #0284c7;
}

[data-theme="light"] .hamburger-menu {
    color: #0f172a;
}
[data-theme="light"] .hamburger-menu i {
    color: #0f172a;
}

[data-theme="light"] .section-label {
    color: #0284c7;
}
[data-theme="light"] .section-label i {
    color: #0284c7;
}

[data-theme="light"] .hero-badge {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(6, 182, 212, 0.3);
    color: #0f172a;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}
[data-theme="light"] .hero-badge i {
    color: #0284c7;
}

[data-theme="light"] .nav-card {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(0, 0, 0, 0.08);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}
[data-theme="light"] .nav-card h2 {
    color: #0f172a;
}
[data-theme="light"] .nav-card p {
    color: #475569;
}

[data-theme="light"] .faq-item {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .faq-question {
    color: #0f172a;
}
[data-theme="light"] .faq-question i {
    color: #0284c7;
}

[data-theme="light"] .press-logo {
    color: #475569;
    opacity: 0.75;
}
[data-theme="light"] .press-logo i {
    color: #475569;
}

[data-theme="light"] .mob-nav-item .mn-icon {
    color: #64748b;
}
[data-theme="light"] .mob-nav-item.active .mn-icon {
    color: #0284c7;
}

[data-theme="light"] .footer-social a {
    color: #475569;
}
[data-theme="light"] .footer-social a i {
    color: #475569;
}
[data-theme="light"] .footer-social a:hover i {
    color: #0284c7;
}

.input-area { display: none; }
.input-area.active { display: block; animation: fadeIn 0.4s ease; }

.record-btn {
    width: 80px; height: 80px;
    border-radius: 50%;
    background: rgba(239, 68, 68, 0.1);
    border: 2px solid var(--color-error);
    color: var(--color-error);
    font-size: 32px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.record-btn.recording {
    background: var(--color-error);
    color: white;
    box-shadow: 0 0 20px rgba(239, 68, 68, 0.6);
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); }
    70% { transform: scale(1); box-shadow: 0 0 0 20px rgba(239, 68, 68, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

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

.theme-toggle {
    position: absolute;
    top: 24px;
    right: 24px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    width: 48px; height: 48px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 100;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}
.theme-toggle:hover {
    transform: scale(1.15) rotate(15deg);
    background: var(--bg-hover);
    box-shadow: 0 0 20px rgba(6, 182, 212, 0.3);
    border-color: var(--accent-cyan);
}
.theme-toggle:active { transform: scale(0.9); }
.theme-toggle i {
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.theme-toggle.spin i {
    transform: rotate(360deg);
}
[data-theme="light"] .theme-toggle {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(15, 23, 42, 0.1);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
    color: #334155;
}
[data-theme="light"] .theme-toggle:hover {
    box-shadow: 0 0 20px rgba(245, 158, 11, 0.3);
    border-color: #f59e0b;
    color: #f59e0b;
}

/* ── Result Animations ── */
@keyframes floatIcon {
    0% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0); }
}

@keyframes pulseRed {
    0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); }
    70% { box-shadow: 0 0 0 25px rgba(239, 68, 68, 0); }
    100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

@keyframes pulseGreen {
    0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4); }
    70% { box-shadow: 0 0 0 25px rgba(16, 185, 129, 0); }
    100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.result-icon-container {
    width: 70px; height: 70px;
    border-radius: 50%;
    display: flex; justify-content: center; align-items: center;
    font-size: 32px;
    margin: 0 auto 20px auto;
    position: relative;
}

.status-fake .result-icon-container {
    background: rgba(239, 68, 68, 0.15);
    color: var(--color-error);
    border: 2px solid var(--color-error);
    animation: floatIcon 3s ease-in-out infinite, pulseRed 2s infinite;
}

.status-authentic .result-icon-container {
    background: rgba(16, 185, 129, 0.15);
    color: var(--color-success);
    border: 2px solid var(--color-success);
    animation: floatIcon 3s ease-in-out infinite, pulseGreen 2s infinite;
}

.result-card {
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.result-card.status-fake {
    border-color: rgba(239, 68, 68, 0.5);
    background: linear-gradient(180deg, rgba(239,68,68,0.1) 0%, var(--bg-card) 100%);
    box-shadow: 0 10px 40px rgba(239, 68, 68, 0.2);
}

.result-card.status-authentic {
    border-color: rgba(16, 185, 129, 0.5);
    background: linear-gradient(180deg, rgba(16,185,129,0.1) 0%, var(--bg-card) 100%);
    box-shadow: 0 10px 40px rgba(16, 185, 129, 0.2);
}

.confidence-ring .progress {
    transition: stroke-dashoffset 2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

section, main {
    width: 100%;
}

body {
    background-color: var(--bg-main);
    color: var(--text-primary);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-x: hidden;
    background: radial-gradient(circle at 15% 50%, var(--accent-purple-glow), transparent 30%),
                radial-gradient(circle at 85% 30%, var(--accent-blue-glow), transparent 30%);
    background-color: var(--bg-main);
    background-attachment: fixed;   /* overridden to scroll on mobile — see @media 768px */
    transition: background-color 0.4s ease, color 0.4s ease;
}

[data-theme="light"] body {
    background: radial-gradient(circle at 20% 50%, rgba(8, 145, 178, 0.06), transparent 40%),
                radial-gradient(circle at 80% 30%, rgba(124, 58, 237, 0.05), transparent 40%),
                radial-gradient(ellipse at 50% 80%, rgba(245, 158, 11, 0.04), transparent 50%);
    background-color: var(--bg-main);
}

/* ── Focus Visible (Accessibility) ── */
:focus-visible {
    outline: 2px solid var(--accent-cyan);
    outline-offset: 2px;
    border-radius: 4px;
}
[data-theme="light"] :focus-visible {
    outline-color: #0891b2;
}

/* ══════ PREMIUM VISUAL EFFECTS ══════ */

/* ── Aurora Borealis Background ── */
.aurora-bg {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none; z-index: 0; overflow: hidden;
}
.aurora-bg .aurora-band {
    position: absolute; width: 200%; height: 60%; filter: blur(120px); opacity: 0.12;
    animation: auroraShift 12s ease-in-out infinite alternate;
}
.aurora-bg .aurora-band:nth-child(1) {
    top: -20%; left: -50%;
    background: linear-gradient(90deg, transparent, #06b6d4, #8b5cf6, transparent);
}
.aurora-bg .aurora-band:nth-child(2) {
    top: 10%; left: -30%;
    background: linear-gradient(90deg, transparent, #3b82f6, #06b6d4, transparent);
    animation-delay: -4s; animation-duration: 16s;
}
.aurora-bg .aurora-band:nth-child(3) {
    top: -10%; left: -40%;
    background: linear-gradient(90deg, transparent, #8b5cf6, #ec4899, transparent);
    animation-delay: -8s; animation-duration: 20s; opacity: 0.08;
}
/* auroraShift defined once above (line ~221) — no duplicate needed */
[data-theme="light"] .aurora-bg .aurora-band { opacity: 0.06; }


/* ── Cyber Grid Overlay ── */
.cyber-grid {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none; z-index: 0;
    background-image:
        linear-gradient(rgba(6,182,212,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(6,182,212,0.03) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse at 50% 30%, black 20%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse at 50% 30%, black 20%, transparent 70%);
}
[data-theme="light"] .cyber-grid {
    background-image:
        linear-gradient(rgba(15,23,42,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(15,23,42,0.04) 1px, transparent 1px);
}

/* ── Scan Line Effect (for mockup) ── */
.scan-line {
    position: absolute; top: 0; left: 0; width: 100%; height: 3px;
    background: linear-gradient(90deg, transparent, var(--accent-cyan), rgba(6,182,212,0.8), transparent);
    box-shadow: 0 0 20px rgba(6,182,212,0.6), 0 0 60px rgba(6,182,212,0.3);
    animation: scanDown 3s ease-in-out infinite;
    z-index: 10; pointer-events: none; opacity: 0.7;
}
@keyframes scanDown {
    0% { top: 0; opacity: 0; }
    10% { opacity: 0.7; }
    90% { opacity: 0.7; }
    100% { top: 100%; opacity: 0; }
}

/* ── Animated Gradient Text ── */
.gradient-text-animated {
    background: linear-gradient(270deg, #06b6d4, #8b5cf6, #3b82f6, #ec4899, #06b6d4);
    background-size: 300% 300%;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradientTextFlow 6s ease infinite;
}
@keyframes gradientTextFlow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* ── Neon Glow on Tool Cards ── */
.nav-card::before {
    content: ''; position: absolute; top: -1px; left: -1px; right: -1px; bottom: -1px;
    border-radius: 20px; z-index: -1;
    background: linear-gradient(135deg, rgba(6,182,212,0.3), rgba(139,92,246,0.3), rgba(59,130,246,0.3));
    background-size: 200% 200%;
    opacity: 0; transition: opacity 0.4s ease;
    animation: neonBorderShift 4s ease infinite;
    filter: blur(3px);
}
.nav-card:hover::before { opacity: 1; }
.nav-card.purple::before {
    background: linear-gradient(135deg, rgba(139,92,246,0.4), rgba(236,72,153,0.3), rgba(139,92,246,0.4));
}
@keyframes neonBorderShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* ── Shimmer effect on stat cards ── */
.stats-bar {
    position: relative; overflow: hidden;
}
.stats-bar::after {
    content: ''; position: absolute; top: 0; left: -100%; width: 50%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.04), transparent);
    animation: shimmerSweep 5s ease-in-out infinite;
    pointer-events: none;
}
@keyframes shimmerSweep {
    0% { left: -100%; }
    100% { left: 200%; }
}
[data-theme="light"] .stats-bar::after {
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
}

/* ── Feature Card Gradient Border ── */
.feature-card { position: relative; overflow: hidden; }
.feature-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, transparent, var(--accent-cyan), var(--accent-purple), transparent);
    opacity: 0; transition: opacity 0.4s ease;
}
.feature-card:hover::before { opacity: 1; }

/* ── Testimonial Card Animated Border ── */
.testimonial-card { position: relative; overflow: hidden; }
.testimonial-card::after {
    content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px;
    background: linear-gradient(90deg, var(--accent-cyan), var(--accent-purple));
    transition: width 0.5s ease;
}
.testimonial-card:hover::after { width: 100%; }


/* ── Glowing Dot Decorators ── */
.glow-dot {
    position: absolute; border-radius: 50%; pointer-events: none;
}
.glow-dot::after {
    content: ''; position: absolute; inset: -4px; border-radius: 50%;
    background: inherit; filter: blur(8px); opacity: 0.5;
}

/* ── Step Card Hover Glow ── */
.step-card { position: relative; overflow: hidden; }
.step-card::after {
    content: ''; position: absolute; bottom: 0; left: 50%; width: 0; height: 2px;
    background: linear-gradient(90deg, var(--accent-cyan), var(--accent-purple));
    transition: all 0.4s ease; transform: translateX(-50%);
}
.step-card:hover::after { width: 80%; }

/* ── Mockup Enhanced Glass ── */
.mockup-body .mockup-metric {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 16px; border-radius: 10px;
    background: rgba(255,255,255,0.03); border: 1px solid var(--border-color);
    transition: all 0.3s ease;
}
.mockup-body .mockup-metric:hover {
    background: rgba(6,182,212,0.05); border-color: rgba(6,182,212,0.2);
}
.mockup-metric .metric-dot {
    width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.mockup-metric .metric-bar {
    flex: 1; height: 6px; border-radius: 3px; background: rgba(255,255,255,0.06); overflow: hidden;
}
.mockup-metric .metric-bar-fill {
    height: 100%; border-radius: 3px; transition: width 1.5s ease;
}

/* ── Section Divider Glow Lines ── */
.section-glow-divider {
    width: 100%; max-width: 300px; height: 1px; margin: 0 auto 40px;
    background: linear-gradient(90deg, transparent, var(--accent-cyan), var(--accent-purple), transparent);
    opacity: 0.4;
}

/* ── Container Styles ── */
.app-container {
    width: 100%;
    max-width: 850px;
    margin: 40px auto;
    padding: 40px;
    background: var(--bg-card);
    backdrop-filter: var(--backdrop-blur);
    -webkit-backdrop-filter: var(--backdrop-blur);
    border: 1px solid var(--border-color);
    border-radius: 24px;
    box-shadow: var(--glass-shadow);
    transition: all 0.4s ease;
}

/* ── Typography & Headers ── */
h1 {
    font-size: 32px;
    font-weight: 800;
    letter-spacing: -1px;
    background: linear-gradient(to right, #ffffff, #a1a1aa);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

[data-theme="light"] h1 {
    background: linear-gradient(to right, #0f172a, #475569);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

h2 {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
}

p {
    color: var(--text-secondary);
    line-height: 1.6;
}

/* ── Header Components ── */
.app-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 20px;
    margin-bottom: 30px;
}

.logo-section {
    display: flex;
    align-items: center;
    gap: 16px;
}

.app-logo {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    object-fit: cover;
    box-shadow: 0 0 15px rgba(255,255,255,0.1);
}

/* ── Landing Page Specifics ── */
.landing-header {
    text-align: center;
    margin: 60px 0 40px 0;
}

.landing-header h1 {
    font-size: 42px;
    margin-bottom: 16px;
}

.cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
    width: 100%;
    max-width: 1000px;
    padding: 0 20px;
    perspective: 1500px;
}

.nav-card {
    background: var(--bg-card);
    backdrop-filter: var(--backdrop-blur);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 40px 30px;
    text-align: center;
    text-decoration: none;
    color: var(--text-primary);
    transition: box-shadow 0.4s ease, border-color 0.4s ease, transform 0.1s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
    position: relative;
    transform-style: preserve-3d;
    overflow: hidden;
}

.card-glare {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.15), transparent 60%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

[data-theme="light"] .card-glare {
    background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.8), transparent 60%);
}

.nav-card:hover .card-glare { opacity: 1; }

[data-theme="light"] .nav-card {
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

.nav-card:hover {
    border-color: var(--accent-cyan);
    box-shadow: 0 20px 40px rgba(6, 182, 212, 0.25);
    z-index: 10;
}

.nav-card.purple:hover {
    border-color: var(--accent-purple);
    box-shadow: 0 20px 40px rgba(139, 92, 246, 0.25);
}

[data-theme="light"] .nav-card:hover {
    box-shadow: 0 20px 40px rgba(6, 182, 212, 0.15);
}

[data-theme="light"] .nav-card.purple:hover {
    box-shadow: 0 20px 40px rgba(139, 92, 246, 0.15);
}

.nav-card img, .nav-card h2, .nav-card p {
    transform: translateZ(30px);
    transition: transform 0.3s ease;
}

.nav-card img {
    width: 90px;
    height: 90px;
    border-radius: 22px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
    margin-bottom: 12px;
}

[data-theme="light"] .nav-card img {
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}

.nav-card:hover img {
    transform: translateZ(50px) scale(1.05);
}

.nav-card h2 {
    font-size: 24px;
    font-weight: 700;
}

/* ── Buttons ── */
.btn-primary {
    background: linear-gradient(135deg, var(--accent-blue), var(--accent-purple));
    color: white;
    border: none;
    padding: 16px 28px;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.3s ease;
    box-shadow: 0 8px 20px rgba(59, 130, 246, 0.4);
}

.btn-primary:hover:not(:disabled):not(.disabled) {
    transform: translateY(-3px);
    box-shadow: 0 12px 25px rgba(139, 92, 246, 0.6);
}

.btn-primary:disabled, .btn-primary.disabled {
    background: var(--bg-hover);
    color: var(--text-secondary);
    box-shadow: none;
    cursor: not-allowed;
    transform: none;
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 12px 24px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
}

[data-theme="light"] .btn-secondary {
    background: rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
}

[data-theme="light"] .btn-secondary:hover {
    background: rgba(0, 0, 0, 0.08);
    border-color: rgba(0, 0, 0, 0.2);
}

/* ── 3D Interactive Dropzone Vault ── */
.upload-area {
    border: 2px dashed var(--border-color);
    border-radius: 18px;
    padding: 50px 20px;
    text-align: center;
    background: rgba(12, 14, 24, 0.45);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: pointer;
    margin-bottom: 24px;
    position: relative;
    overflow: hidden;
    transform-style: preserve-3d;
    perspective: 1000px;
}

.upload-area .upload-icon {
    font-size: 40px;
    margin-bottom: 12px;
    color: var(--accent-cyan);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), color 0.3s ease;
    display: inline-block;
    transform: translateZ(20px);
}

[data-theme="light"] .upload-area {
    background: rgba(255, 255, 255, 0.85);
    border-color: rgba(2, 132, 199, 0.25);
}

.upload-area:hover {
    border-color: var(--accent-cyan);
    background: rgba(6, 182, 212, 0.08);
    box-shadow: 0 15px 35px rgba(6, 182, 212, 0.18), 0 0 20px rgba(6, 182, 212, 0.12);
    transform: translateY(-4px) scale3d(1.015, 1.015, 1.015);
}

[data-theme="light"] .upload-area:hover {
    border-color: #0284c7;
    background: rgba(2, 132, 199, 0.06);
    box-shadow: 0 15px 35px rgba(2, 132, 199, 0.15);
}

.upload-area:hover .upload-icon {
    transform: translateZ(32px) scale(1.15);
    color: var(--accent-cyan);
}

.upload-area.dragover {
    border-color: var(--accent-cyan) !important;
    background: radial-gradient(circle at center, rgba(6, 182, 212, 0.22) 0%, rgba(139, 92, 246, 0.15) 60%, rgba(0,0,0,0.4) 100%) !important;
    box-shadow: 0 25px 60px rgba(6, 182, 212, 0.35), 0 0 35px rgba(6, 182, 212, 0.3) !important;
    transform: translateY(-8px) scale3d(1.03, 1.03, 1.03) !important;
    animation: dropzone3DPulse 1.8s ease-in-out infinite alternate;
}

[data-theme="light"] .upload-area.dragover {
    background: radial-gradient(circle at center, rgba(2, 132, 199, 0.2) 0%, rgba(124, 58, 237, 0.15) 60%, rgba(255,255,255,0.9) 100%) !important;
}

@keyframes dropzone3DPulse {
    0% { border-color: #06b6d4; box-shadow: 0 0 25px rgba(6, 182, 212, 0.3); }
    100% { border-color: #8b5cf6; box-shadow: 0 0 45px rgba(139, 92, 246, 0.45); }
}

.nav-card h2 {
    font-size: 22px;
}

/* ── Shared Utilities ── */
.hidden { display: none !important; }
.text-center { text-align: center; }

/* ── Results Section Shared ── */
.result-card {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 24px;
    margin-top: 24px;
    text-align: center;
}

.confidence-ring {
    width: 120px;
    height: 120px;
    margin: 0 auto 20px auto;
    position: relative;
}

.confidence-ring svg {
    transform: rotate(-90deg);
    width: 100%;
    height: 100%;
    overflow: visible;
}

.confidence-ring circle {
    fill: none;
    stroke-width: 8;
    stroke: var(--border-color);
}

.confidence-ring .progress {
    stroke: var(--accent-cyan);
    stroke-dasharray: 339.292;
    stroke-dashoffset: 339.292;
    stroke-linecap: round;
    transition: stroke-dashoffset 1.5s ease-out;
}

.confidence-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 24px;
    font-weight: 700;
}

.status-authentic .progress { stroke: var(--color-success); }
.status-authentic .confidence-text { color: var(--color-success); }

.status-fake .progress { stroke: var(--color-error); }
.status-fake .confidence-text { color: var(--color-error); }

.result-title {
    font-size: 20px;
    margin-bottom: 8px;
}

.status-authentic .result-title { color: var(--color-success); }
.status-fake .result-title { color: var(--color-error); }

/* ── History Sidebar ── */
.history-sidebar {
    position: fixed;
    top: 0; right: 0;
    width: 350px; height: 100vh;
    background: var(--bg-card);
    backdrop-filter: var(--backdrop-blur);
    border-left: 1px solid var(--border-color);
    box-shadow: -10px 0 30px rgba(0,0,0,0.3);
    z-index: 1000;
    padding: 30px 20px;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.history-sidebar:not(.hidden) {
    transform: translateX(0);
}

.history-overlay {
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(3px);
    z-index: 999;
    opacity: 1;
    transition: opacity 0.3s;
}

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

.floating-history-btn {
    position: fixed;
    bottom: 30px; right: 30px;
    width: 60px; height: 60px;
    border-radius: 50%;
    background: var(--bg-card);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
    font-size: 24px;
    cursor: pointer;
    z-index: 100;
    display: flex; justify-content: center; align-items: center;
    transition: all 0.3s;
}

.floating-history-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 15px 30px rgba(6, 182, 212, 0.3);
    border-color: var(--accent-cyan);
    color: var(--accent-cyan);
}

[data-theme="light"] .floating-history-btn {
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.history-item { transition: transform 0.2s; }
.history-item:hover { transform: translateX(-5px); }
.history-item.fake { border-left: 4px solid var(--color-error) !important; }
.history-item.authentic { border-left: 4px solid var(--color-success) !important; }

.hamburger-menu { display: none; }

/* ══════════════════════════════════════════════════════════
   PREMIUM MOBILE DESIGN — Android & iOS
   Professional, polished, app-quality experience
   ══════════════════════════════════════════════════════════ */

/* ── Mobile Slide-Over Drawer (replaces basic dropdown) ── */
#mobile-drawer-overlay {
    display: none;
    position: fixed; inset: 0; z-index: 9980;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity 0.3s ease;
}
#mobile-drawer-overlay.open { opacity: 1; }

#mobile-drawer {
    position: fixed; top: 0; right: -100%; bottom: 0; z-index: 9985;
    width: min(320px, 88vw);
    background: rgba(12, 12, 20, 0.98);
    border-left: 1px solid rgba(255,255,255,0.07);
    backdrop-filter: blur(40px) saturate(200%);
    -webkit-backdrop-filter: blur(40px) saturate(200%);
    transition: right 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex; flex-direction: column;
    overflow-y: auto; overflow-x: hidden;
    padding: env(safe-area-inset-top) 0 calc(80px + env(safe-area-inset-bottom)) 0;
    -webkit-overflow-scrolling: touch;
}
#mobile-drawer.open { right: 0; }

[data-theme="light"] #mobile-drawer {
    background: rgba(248, 250, 252, 0.98);
    border-left-color: rgba(0,0,0,0.06);
}

/* Drawer Header */
.drawer-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 20px 24px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
[data-theme="light"] .drawer-header { border-bottom-color: rgba(0,0,0,0.06); }
.drawer-brand {
    display: flex; align-items: center; gap: 10px;
    font-size: 17px; font-weight: 700; color: var(--text-primary);
}
.drawer-brand i { color: var(--accent-cyan); font-size: 20px; }
.drawer-close {
    width: 36px; height: 36px; border-radius: 10px;
    background: rgba(255,255,255,0.06); border: none; cursor: pointer;
    color: var(--text-secondary); font-size: 16px;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.2s, color 0.2s;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
.drawer-close:active { background: rgba(255,255,255,0.12); }

/* Drawer Nav Links */
.drawer-nav { padding: 12px 16px; display: flex; flex-direction: column; gap: 4px; }
.drawer-nav-item {
    display: flex; align-items: center; gap: 14px;
    padding: 13px 16px; border-radius: 14px;
    text-decoration: none; color: var(--text-secondary);
    font-size: 15px; font-weight: 500;
    transition: background 0.18s ease, color 0.18s ease, transform 0.15s ease;
    border: 1px solid transparent;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
.drawer-nav-item i {
    width: 20px; text-align: center;
    font-size: 15px; color: var(--text-secondary);
    transition: color 0.18s;
}
.drawer-nav-item:active {
    transform: scale(0.97);
    background: rgba(6,182,212,0.08) !important;
}
.drawer-nav-item:hover, .drawer-nav-item.active {
    background: rgba(6,182,212,0.08);
    color: var(--accent-cyan);
    border-color: rgba(6,182,212,0.12);
}
.drawer-nav-item:hover i, .drawer-nav-item.active i { color: var(--accent-cyan); }
[data-theme="light"] .drawer-nav-item:hover,
[data-theme="light"] .drawer-nav-item.active {
    background: rgba(14,165,233,0.08);
    color: #0ea5e9;
    border-color: rgba(14,165,233,0.12);
}

/* Drawer Section Heading */
.drawer-section-label {
    padding: 8px 16px 4px;
    font-size: 10px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 1px; color: var(--text-secondary); opacity: 0.5;
}

/* Drawer Tools Grid */
.drawer-tools-grid {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 8px; padding: 8px 16px;
}
.drawer-tool-card {
    display: flex; flex-direction: column; align-items: center;
    gap: 8px; padding: 14px 10px;
    background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);
    border-radius: 14px; text-decoration: none; color: var(--text-primary);
    font-size: 12px; font-weight: 600; text-align: center;
    transition: background 0.2s, border-color 0.2s, transform 0.15s;
    touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.drawer-tool-card i { font-size: 22px; }
.drawer-tool-card:active { transform: scale(0.94); background: rgba(6,182,212,0.1); }
[data-theme="light"] .drawer-tool-card {
    background: rgba(0,0,0,0.02);
    border-color: rgba(0,0,0,0.06);
}

/* Drawer Divider */
.drawer-divider {
    height: 1px; margin: 8px 16px;
    background: rgba(255,255,255,0.06);
}
[data-theme="light"] .drawer-divider { background: rgba(0,0,0,0.06); }

/* Drawer Action Row */
.drawer-actions { padding: 8px 16px; display: flex; gap: 10px; }
.drawer-action-btn {
    flex: 1; padding: 12px 16px; border-radius: 12px;
    border: 1px solid rgba(6,182,212,0.3);
    background: rgba(6,182,212,0.08);
    color: var(--accent-cyan); font-size: 13px; font-weight: 600;
    text-decoration: none; text-align: center;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    transition: background 0.2s, transform 0.15s;
    touch-action: manipulation; -webkit-tap-highlight-color: transparent;
    font-family: inherit; cursor: pointer;
}
.drawer-action-btn:active { transform: scale(0.96); background: rgba(6,182,212,0.15); }
.drawer-action-btn.solid {
    background: linear-gradient(135deg, var(--accent-cyan), var(--accent-purple));
    border-color: transparent; color: white;
}
.drawer-action-btn.solid:active { opacity: 0.85; }

/* ── Mobile Responsiveness ── */

/* ===== HOW IT WORKS STEPS ===== */
.steps-grid {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 24px;
    margin: 40px auto;
    width: 100%;
}
.step-card {
    background: var(--bg-card);
    backdrop-filter: var(--backdrop-blur);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 30px 24px;
    flex: 1;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    position: relative;
    overflow: hidden;
}
.step-number {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--accent-cyan), var(--accent-purple));
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    font-weight: 800;
    color: #fff;
    margin: 0 auto 20px;
    box-shadow: 0 0 20px rgba(6,182,212,0.4);
}
.step-card h4 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 12px;
    color: var(--text-primary);
}
.step-card p {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}
.step-connector {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    font-size: 24px;
    opacity: 0.5;
}

@media (max-width: 1024px) {
    /* FIX: Prevent header icons overlapping on mobile */
    .app-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 16px !important;
    }
    .app-header > div:last-child {
        width: 100%;
        justify-content: space-between !important;
    }
    .hide-on-mobile { display: none !important; }
    /* Safe area body padding for iOS notch */
    body {
        overflow-x: hidden; width: 100%;
        /* Fix: background-attachment:fixed breaks iOS Safari (white flicker) */
        background-attachment: scroll !important;
    }

    /* Box sizing */
    * { box-sizing: border-box; }

    /* ── App Container ── */
    .app-container { padding: 16px; margin-top: 64px; border-radius: 16px; }

    /* ── Navbar ── */
    .hamburger-menu {
        display: flex; align-items: center; justify-content: center;
        width: 40px; height: 40px; border-radius: 10px;
        font-size: 18px; cursor: pointer; color: var(--text-primary);
        background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08);
        transition: background 0.2s;
        touch-action: manipulation; -webkit-tap-highlight-color: transparent;
    }
    .hamburger-menu:active { background: rgba(255,255,255,0.1); transform: scale(0.93); }
    [data-theme="light"] .hamburger-menu {
        background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.08);
    }

    /* Hide desktop nav links — drawer replaces them */
    .nav-links { display: none !important; }
    .nav-links.active { display: none !important; }

    .navbar {
        padding: 12px 16px;
        height: 56px;
        position: fixed; top: 0; left: 0; right: 0;
        display: flex; align-items: center; justify-content: space-between;
    }

    /* ── Hero Section ── */
    .hero-section {
        padding: calc(80px + env(safe-area-inset-top)) 20px 60px !important;
        min-height: auto !important;
    }
    .landing-header h1 {
        font-size: clamp(26px, 7vw, 36px) !important;
        line-height: 1.18 !important;
        letter-spacing: -0.5px !important;
    }
    .landing-header p { font-size: 15px; line-height: 1.6; }
    .landing-header { margin: 0 0 30px !important; }

    /* Hero buttons stacked */
    .landing-header > div[style*="flex"] {
        flex-direction: column !important;
        gap: 10px !important;
    }
    
    /* ── Footer ── */
    .footer { padding-bottom: calc(80px + env(safe-area-inset-bottom)) !important; }
    .landing-header .btn-primary,
    .landing-header .btn-secondary {
        width: 100%; justify-content: center; padding: 14px 20px !important;
    }

    /* Hero counter strip */
    .hero-counter-strip {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    /* ── Tool Cards — 2 column on mobile ── */
    .cards-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        padding: 0 16px !important;
    }
    .nav-card { padding: 15px !important; }
    .nav-card > div[style*="48px"] { font-size: 32px !important; margin-bottom: 10px !important; }

    /* ── Press states for cards ── */
    .nav-card:active, .feature-card:active, .step-card:active {
        transform: scale(0.97) !important;
        transition: transform 0.1s ease !important;
    }

    /* ── Features grid ── */
    .features-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
    .feature-card { padding: 20px !important; }

    /* ── Testimonials ── */
    .testimonials-grid { grid-template-columns: 1fr !important; gap: 16px !important; }

    /* ── Pricing ── */
    .pricing-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
    .pricing-card.popular { transform: none !important; }

    /* ── Stats Bar ── */
    .stats-bar {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    /* ── Steps grid ── */
    .steps-grid { display: flex !important; flex-direction: column !important; align-items: center !important; }
    .step-connector { transform: rotate(90deg); margin: 4px 0; }

    /* ── Form & Input (prevent iOS zoom) ── */
    input, textarea, select {
        font-size: 16px !important;     /* iOS zooms if < 16px */
        border-radius: 10px !important;
    }

    /* ── Newsletter form ── */
    .newsletter-form { flex-direction: column; gap: 10px; }
    .newsletter-form input { width: 100%; }
    .newsletter-form button { width: 100%; padding: 14px; justify-content: center; }

    /* ── Buttons ── */
    .btn-primary, .btn-secondary {
        width: 100%; justify-content: center;
        min-height: 48px; /* iOS touch target */
    }
    .btn-primary:active, .btn-secondary:active {
        transform: scale(0.97) !important;
        transition: transform 0.1s ease !important;
    }

    /* ── Floating mockup ── */
    .floating-mockup { width: 100% !important; margin-top: 24px !important; }
    .mockup-body { padding: 16px !important; }

    /* ── Layouts with sidebars ── */
    .app-layout { grid-template-columns: 1fr; }
    .main-content { margin-left: 0; }

    /* ── API Key ── */
    .api-key-box { flex-direction: column; }
    .api-key-input { width: 100%; }

    /* ── Footer ── */
    .footer-inner { flex-direction: column; text-align: center; gap: 16px; }
    .footer-links { flex-wrap: wrap; justify-content: center; }
    .footer-links a { font-size: 13px; margin: 4px 10px; }

    /* ── Auth Box ── */
    .auth-container { padding: 24px 18px; margin: 0 12px; }

    /* ── Detection Feed ── */
    .detection-feed { grid-template-columns: 1fr; }

    /* ── Hall of Fakes feed items ── */
    #live-feed > div {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 6px !important;
    }

    /* ── About section ── */
    .about-section { padding: 60px 16px !important; }
    .about-container { padding: 0 !important; }
    .section-title { font-size: 24px !important; }

    /* ── FAQ ── */
    .faq-section { padding: 60px 16px !important; }

    /* ── Creative demo slider ── */
    #demo-slider { touch-action: pan-y; }

    /* ── Activity toast — move to top on mobile (away from bottom nav) ── */
    .activity-toast {
        bottom: auto !important;
        top: calc(68px + env(safe-area-inset-top)) !important;
        left: 16px !important;
        right: 16px !important;
        width: auto !important;
    }

    /* ── Back to top — above bottom nav ── */
    #back-to-top {
        bottom: calc(76px + env(safe-area-inset-bottom)) !important;
        right: 16px !important;
    }

    /* ── Dot nav — hide on mobile (redundant with bottom nav) ── */
    #dot-nav { display: none !important; }

    /* ── Social proof toasts — top of screen ── */
    #social-proof-container {
        bottom: auto !important;
        top: calc(68px + env(safe-area-inset-top)) !important;
    }


    /* ── Smart search modal ── */
    #smart-search-modal .search-box {
        width: calc(100vw - 32px) !important;
        margin: 80px 16px 0 !important;
        border-radius: 16px !important;
    }

    /* ── Try-it-live section ── */
    .try-box { padding: 20px !important; }
    .try-box textarea { min-height: 120px !important; }

    /* ── Marquee speed on mobile ── */
    .marquee-content { animation-duration: 20s; }

    /* ── Deepfake UI / Split columns ── */
    div[style*="display: grid"] { grid-template-columns: 1fr !important; }

    /* ── Grid spacing normalization ── */
    .stats-container { grid-template-columns: 1fr !important; }

    /* ── Cookie banner ── */
    #cookie-banner {
        bottom: calc(72px + env(safe-area-inset-bottom)) !important;
        left: 12px !important; right: 12px !important;
        border-radius: 16px !important;
    }

    /* ── Location banner ── */
    #location-banner { top: 56px !important; font-size: 11px !important; }

    /* ── Milestone popup ── */
    .milestone-popup {
        bottom: calc(80px + env(safe-area-inset-bottom)) !important;
        left: 50% !important; transform: translateX(-50%) !important;
    }

    /* ── Offline banner ── */
    #offline-banner { top: 56px !important; }

    /* ── Share modal ── */
    #share-modal .share-card {
        margin: 0 16px !important;
        border-radius: 20px !important;
        padding: 28px 20px !important;
    }

    /* ── Achievement popups ── */
    .achievement-popup {
        right: 12px !important;
        max-width: calc(100vw - 24px) !important;
    }
}

/* Very small screens (iPhone SE, older Androids) */
@media (max-width: 375px) {
    .cards-grid { grid-template-columns: 1fr !important; gap: 10px !important; }
    .nav-card { padding: 18px 12px !important; }
    .hero-counter-strip { grid-template-columns: 1fr !important; }
    .stats-bar { grid-template-columns: 1fr 1fr !important; }
}


/* ════════════════════════════════════════════
   VOICE LOADER  —  waveform + spinning ring
   ════════════════════════════════════════════ */
.voice-loader {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    padding: 40px 20px;
}

/* ── Animated equaliser bars ── */
.voice-loader__wave-wrap {
    display: flex;
    align-items: center;
    gap: 4px;
    height: 56px;
}
.vbar {
    width: 5px;
    border-radius: 99px;
    background: linear-gradient(180deg, #8b5cf6, #06b6d4);
    height: 12px;
    animation: vbar-dance 1.1s ease-in-out infinite;
    animation-delay: calc((var(--i) - 1) * 0.08s);
    will-change: transform, opacity;
}
@keyframes vbar-dance {
    0%, 100% { transform: scaleY(0.25); opacity: 0.4; }
    50%       { transform: scaleY(4.5); opacity: 1;   }
}

/* ── Spinning arc ring ── */
.voice-loader__ring {
    position: relative;
    width: 96px;
    height: 96px;
}
.voice-loader__ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring-track {
    fill: none;
    stroke: rgba(255,255,255,0.06);
    stroke-width: 8;
}
.ring-spin {
    fill: none;
    stroke: #8b5cf6;
    stroke-width: 8;
    stroke-linecap: round;
    stroke-dasharray: 314;
    stroke-dashoffset: 230;
    animation: ring-rotate 1.6s linear infinite;
    filter: drop-shadow(0 0 6px #8b5cf6);
    will-change: transform;
    transform-origin: 60px 60px;
}
@keyframes ring-rotate {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.ring-icon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: var(--accent-cyan);
    animation: ring-icon-pulse 1.6s ease-in-out infinite;
}
@keyframes ring-icon-pulse {
    0%,100% { opacity: 0.6; transform: scale(0.95); }
    50%      { opacity: 1;   transform: scale(1.1);  }
}

/* ── Loading message ── */
.voice-loader__msg {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-secondary);
    text-align: center;
    animation: msg-fade 0.4s ease;
}
@keyframes msg-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ── Three bouncing dots ── */
.voice-loader__dots {
    display: flex;
    gap: 6px;
}
.voice-loader__dots span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent-purple);
    animation: dot-bounce 1.2s ease-in-out infinite;
}
.voice-loader__dots span:nth-child(2) { animation-delay: 0.2s; background: #a78bfa; }
.voice-loader__dots span:nth-child(3) { animation-delay: 0.4s; background: var(--accent-cyan); }
@keyframes dot-bounce {
    0%,100% { transform: translateY(0); }
    50%      { transform: translateY(-10px); }
}


/* ════════════════════════════════════════════
   VERDICT HERO  —  big winner badge
   ════════════════════════════════════════════ */
.verdict-hero {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 28px 20px 20px;
    border-radius: 20px;
    overflow: hidden;
    margin-bottom: 20px;
    animation: verdict-enter 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes verdict-enter {
    from { opacity: 0; transform: scale(0.7) translateY(20px); }
    to   { opacity: 1; transform: scale(1)   translateY(0);    }
}

.verdict-hero__glow {
    position: absolute;
    inset: -30%;
    border-radius: 50%;
    opacity: 0.18;
    filter: blur(60px);
    animation: glow-pulse 2.4s ease-in-out infinite;
    will-change: opacity, transform;
}
.status-authentic .verdict-hero__glow { background: radial-gradient(circle, #10b981, transparent 70%); }
.status-fake      .verdict-hero__glow { background: radial-gradient(circle, #ef4444, transparent 70%); }
@keyframes glow-pulse {
    0%,100% { opacity: 0.14; transform: scale(0.95); }
    50%     { opacity: 0.28; transform: scale(1.05); }
}

.verdict-hero__icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 34px;
    position: relative;
    z-index: 1;
    animation: icon-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s both;
}
@keyframes icon-pop { from { transform: scale(0); } to { transform: scale(1); } }

.status-authentic .verdict-hero__icon {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
    border: 2px solid rgba(16, 185, 129, 0.4);
    box-shadow: 0 0 30px rgba(16,185,129,0.3);
}
.status-fake .verdict-hero__icon {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
    border: 2px solid rgba(239, 68, 68, 0.4);
    box-shadow: 0 0 30px rgba(239,68,68,0.3);
}

.verdict-hero__label {
    font-size: clamp(26px, 6.5vw, 38px);
    font-weight: 800;
    letter-spacing: -0.5px;
    text-align: center;
    position: relative;
    z-index: 1;
    animation: label-slide 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.4s both;
}
@keyframes label-slide { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.status-authentic .verdict-hero__label { color: #10b981; text-shadow: 0 0 20px rgba(16,185,129,0.4); }
.status-fake      .verdict-hero__label { color: #ef4444; text-shadow: 0 0 20px rgba(239,68,68,0.4);  }

.verdict-hero__sub {
    font-size: 13px;
    color: var(--text-secondary);
    position: relative;
    z-index: 1;
    animation: label-slide 0.5s ease 0.55s both;
}


/* ════════════════════════════════════════════
   PROBABILITY DUEL  —  big side-by-side stats
   ════════════════════════════════════════════ */
.prob-duel {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 20px 0;
    animation: prob-enter 0.5s ease 0.7s both;
}
@keyframes prob-enter { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.prob-duel__block {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 16px 8px;
    border-radius: 14px;
    border: 1px solid transparent;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.prob-duel__block:hover { transform: translateY(-3px); }

.prob-duel__human {
    background: rgba(16,185,129,0.08);
    border-color: rgba(16,185,129,0.2);
    color: #10b981;
}
.prob-duel__ai {
    background: rgba(239,68,68,0.08);
    border-color: rgba(239,68,68,0.2);
    color: #ef4444;
}

.prob-duel__block.winner {
    transform: scale(1.07);
    border-width: 2px;
    box-shadow: 0 8px 28px rgba(0,0,0,0.25);
}
.prob-duel__block.winner .prob-duel__val {
    font-size: clamp(36px, 9vw, 54px);
}

.prob-duel__block i { font-size: 20px; opacity: 0.8; }

.prob-duel__val {
    font-size: clamp(26px, 6.5vw, 40px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -1px;
    transition: font-size 0.4s ease;
}
.prob-duel__name {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    opacity: 0.75;
}
.prob-duel__vs {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-secondary);
    letter-spacing: 1px;
    padding: 0 4px;
}


/* ════════════════════════════════════════════
   CONFIDENCE BARS  —  cleaner styled version
   ════════════════════════════════════════════ */
.conf-bars {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--border-color);
    animation: prob-enter 0.5s ease 0.85s both;
}
.conf-bars__title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: var(--text-secondary);
    text-transform: uppercase;
    margin-bottom: 14px;
    text-align: center;
}
.conf-bars__row {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 6px;
    align-items: center;
}
.conf-bars__lbl { display: flex; align-items: center; gap: 6px; }
.conf-bars__pct { font-weight: 700; }
.conf-bars__track {
    height: 10px;
    background: rgba(255,255,255,0.06);
    border-radius: 999px;
    overflow: hidden;
}
.conf-bars__fill {
    height: 100%;
    width: 0%;
    border-radius: 999px;
    transition: width 1.4s cubic-bezier(0.25, 1, 0.5, 1);
}
.conf-bars__fill--human { background: linear-gradient(90deg, #10b981, #34d399); }
.conf-bars__fill--ai    { background: linear-gradient(90deg, #ef4444, #f87171); }


/* ════════════════════════════════════════════
   RESULT CARD entrance
   ════════════════════════════════════════════ */
#result-state:not(.hidden) .result-card {
    animation: card-rise 0.55s cubic-bezier(0.34, 1.2, 0.64, 1) both;
}
@keyframes card-rise {
    from { opacity: 0; transform: translateY(30px) scale(0.97); }
    to   { opacity: 1; transform: none; }
}



@media (max-width: 1024px) {
    .floating-history-btn {
        bottom: 85px; 
        right: 20px;
        width: 50px;
        height: 50px;
        font-size: 20px;
    }
}

/* ══════════════════════════════════════════════
   3D PERSPECTIVE & MOTION PARALLAX SYSTEM
   ══════════════════════════════════════════════ */
.tilt-3d {
    transform-style: preserve-3d;
    perspective: 1000px;
    transition: transform 0.15s cubic-bezier(0.2, 0, 0.2, 1), box-shadow 0.25s ease;
    will-change: transform;
    position: relative;
}

#global-3d-scene-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 0;
    opacity: 0.85;
    transition: opacity 0.5s ease;
}

/* ══════════════════════════════════════════════
   GLOBAL MOBILE DRAWER & TOUCH RESPONSIVENESS
   ══════════════════════════════════════════════ */
.hamburger-menu {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #f1f5f9;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.hamburger-menu:active {
    transform: scale(0.92);
    background: rgba(6, 182, 212, 0.15);
}

@media (max-width: 1024px) {
    .hamburger-menu {
        display: flex;
    }
}

.mobile-drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 9998;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.mobile-drawer-backdrop.active {
    opacity: 1;
    pointer-events: auto;
}

.mobile-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 84%;
    max-width: 340px;
    background: rgba(10, 11, 20, 0.96);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-left: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: -10px 0 40px rgba(0, 0, 0, 0.8);
    z-index: 9999;
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    padding: 24px 20px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.mobile-drawer.active {
    transform: translateX(0);
}

[data-theme="light"] .mobile-drawer {
    background: rgba(255, 255, 255, 0.98);
    border-left-color: rgba(0, 0, 0, 0.1);
    box-shadow: -10px 0 40px rgba(0, 0, 0, 0.15);
}

.mobile-drawer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    margin-bottom: 20px;
}
[data-theme="light"] .mobile-drawer-header {
    border-bottom-color: rgba(0, 0, 0, 0.08);
}

.mobile-drawer-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 800;
    color: #f1f5f9;
    text-decoration: none;
}
[data-theme="light"] .mobile-drawer-logo {
    color: #0f172a;
}

.mobile-drawer-close {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #94a3b8;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.2s;
}
.mobile-drawer-close:active {
    transform: scale(0.9);
}
[data-theme="light"] .mobile-drawer-close {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.1);
    color: #475569;
}

.mobile-drawer-links {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}
.mobile-drawer-link {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    color: #cbd5e1;
    text-decoration: none;
    font-size: 15px;
    font-weight: 600;
    border-radius: 12px;
    transition: all 0.2s ease;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid transparent;
}
[data-theme="light"] .mobile-drawer-link {
    color: #334155;
    background: rgba(0, 0, 0, 0.02);
}

.mobile-drawer-link:hover, .mobile-drawer-link:active {
    background: rgba(6, 182, 212, 0.12);
    border-color: rgba(6, 182, 212, 0.3);
    color: #06b6d4;
    transform: translateX(4px);
}
.mobile-drawer-link i {
    width: 22px;
    font-size: 16px;
    color: #06b6d4;
}

.mobile-drawer-footer {
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    flex-direction: column;
    gap: 12px;
}
[data-theme="light"] .mobile-drawer-footer {
    border-top-color: rgba(0, 0, 0, 0.08);
}

/* ══════════════════════════════════════════════
   MOBILE PHONE UI REFINEMENTS (< 768px)
   ══════════════════════════════════════════════ */
@media (max-width: 768px) {
    body {
        font-size: 14px;
    }
    .landing-header h1 {
        font-size: 30px !important;
        letter-spacing: -0.5px;
    }
    .landing-header p {
        font-size: 15px !important;
        padding: 0 8px;
    }
    .hero-counter-strip {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
        padding: 14px !important;
        margin: 24px 12px 0 !important;
    }
    .hero-counter-divider {
        display: none !important;
    }
    .hero-counter-item {
        background: rgba(255, 255, 255, 0.02);
        padding: 10px;
        border-radius: 12px;
        border: 1px solid rgba(255, 255, 255, 0.04);
    }
    .hero-counter-num {
        font-size: 22px !important;
    }
    .hero-counter-label {
        font-size: 11px !important;
    }
    .hero-3d-controls {
        justify-content: flex-start !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        padding: 10px 12px !important;
        gap: 6px !important;
    }
    .hero-3d-controls::-webkit-scrollbar {
        display: none;
    }
    .hero-3d-btn {
        flex-shrink: 0;
        padding: 7px 12px !important;
        font-size: 12px !important;
    }
    .hero-3d-viewport {
        height: 270px !important;
    }
    .cards-grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
        padding: 10px !important;
    }
    .threat-globe-viewport {
        height: 270px !important;
    }
    .forensic-viewport, #forensic3DViewport, #voice3DViewport, #spacetimeViewport {
        height: 260px !important;
    }
    .forensic-modes-bar {
        overflow-x: auto !important;
        white-space: nowrap !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        padding: 8px 10px !important;
    }
    .forensic-modes-bar::-webkit-scrollbar {
        display: none;
    }
    .f-mode-btn {
        flex-shrink: 0;
    }
    .floating-history-btn {
        bottom: 20px !important;
        right: 16px !important;
        width: 48px !important;
        height: 48px !important;
    }
}



/* --- GLOBAL NAVBAR FIX --- */
.navbar {
    position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
    padding: 14px 32px; display: flex; align-items: center; justify-content: space-between;
    background: var(--bg-card); backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid transparent;
    transition: all 0.35s ease;
}
.navbar.scrolled {
    background: var(--bg-card);
    border-bottom: 1px solid var(--border-color);
    box-shadow: var(--glass-shadow);
}
.nav-left { display: flex; align-items: center; gap: 10px; }
.nav-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.nav-brand img { width: 32px; height: 32px; border-radius: 8px; }
.nav-brand span { font-size: 18px; font-weight: 700; color: var(--text-primary); }
.nav-links { display: flex; align-items: center; gap: 28px; }
.nav-links a {
    color: var(--text-secondary); text-decoration: none; font-size: 13px; font-weight: 500;
    transition: color 0.2s; position: relative;
}
.nav-links a:hover { color: var(--text-primary); }
.nav-links a::after {
    content: ""; position: absolute; bottom: -4px; left: 0; width: 0; height: 2px;
    background: var(--accent-cyan); transition: width 0.3s ease;
}
.nav-links a:hover::after { width: 100%; }
.nav-right { display: flex; align-items: center; gap: 12px; }

[data-theme="light"] .navbar {
    background: rgba(255,255,255,0.85);
}
[data-theme="light"] .navbar.scrolled {
    background: rgba(255,255,255,0.92);
    border-bottom-color: rgba(0,0,0,0.08);
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}
[data-theme="light"] .nav-links a { color: #4b5563; }
[data-theme="light"] .nav-links a:hover { color: #111827; }

/* =====================================================
   COMPREHENSIVE LIGHT THEME FIXES
   ===================================================== */
[data-theme="light"] body {
    background: #f0f4f8;
    color: #111827;
}

/* Hero / landing sections */
[data-theme="light"] .hero-section,
[data-theme="light"] .landing-header {
    background: transparent;
}

[data-theme="light"] .landing-header h1 {
    background: linear-gradient(135deg, #0f172a, #1e40af) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

[data-theme="light"] .landing-header p {
    color: #475569 !important;
}

/* Stats bar */
[data-theme="light"] .stats-bar {
    background: rgba(255,255,255,0.8);
    border-color: rgba(0,0,0,0.06);
}

[data-theme="light"] .stats-bar .stat-value,
[data-theme="light"] .stats-bar .stat-number {
    color: #0f172a;
}

[data-theme="light"] .stats-bar .stat-label {
    color: #64748b;
}

/* FAQ */
[data-theme="light"] .faq-question {
    color: #0f172a !important;
}

[data-theme="light"] .faq-answer {
    color: #475569 !important;
}

/* Feature cards */
[data-theme="light"] .feature-card {
    background: rgba(255,255,255,0.95);
    border-color: rgba(0,0,0,0.07);
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}

[data-theme="light"] .feature-card h3,
[data-theme="light"] .feature-card h4 {
    color: #0f172a !important;
}

[data-theme="light"] .feature-card p {
    color: #475569 !important;
}

/* Section headings */
[data-theme="light"] h1,
[data-theme="light"] h2,
[data-theme="light"] h3 {
    color: #0f172a;
}

[data-theme="light"] p {
    color: #374151;
}

/* Pricing cards */
[data-theme="light"] .pricing-card {
    background: rgba(255,255,255,0.95);
    border-color: rgba(0,0,0,0.08);
    box-shadow: 0 4px 24px rgba(0,0,0,0.06);
}

[data-theme="light"] .pricing-card h3,
[data-theme="light"] .plan-name,
[data-theme="light"] .pricing-card .price {
    color: #0f172a !important;
}

[data-theme="light"] .pricing-card p,
[data-theme="light"] .pricing-card li {
    color: #475569 !important;
}

/* Orb backgrounds - tone them down in light */
[data-theme="light"] .orb,
[data-theme="light"] [style*="rgba(6, 182, 212, 0.15)"],
[data-theme="light"] [style*="rgba(139, 92, 246, 0.15)"] {
    opacity: 0.3;
}

/* Profile page specific fixes */
[data-theme="light"] .bio-section h1 {
    background: linear-gradient(135deg, #0f172a, #1e40af) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

[data-theme="light"] .bio-text {
    color: #374151 !important;
}

[data-theme="light"] .bio-text strong {
    color: #0f172a !important;
}

[data-theme="light"] .profile-card,
[data-theme="light"] .bio-section,
[data-theme="light"] [style*="rgba(255, 255, 255, 0.02)"] {
    background: rgba(255,255,255,0.9) !important;
    border-color: rgba(0,0,0,0.07) !important;
}

[data-theme="light"] h3[style*="color: #fff"] {
    color: #0f172a !important;
}

[data-theme="light"] .social-btn {
    background: rgba(0,0,0,0.05) !important;
    color: #0f172a !important;
}

/* Footer */
[data-theme="light"] .site-footer {
    background: rgba(241,245,249,0.98);
    border-top: 1px solid rgba(0,0,0,0.07);
    color: #374151;
}

[data-theme="light"] .footer-brand p,
[data-theme="light"] .footer-links a,
[data-theme="light"] .footer-legal {
    color: #64748b !important;
}

/* Gradient orbs background */
[data-theme="light"] .gradient-orb {
    opacity: 0.15 !important;
}

/* Upload area */
[data-theme="light"] .upload-area {
    background: rgba(255,255,255,0.9) !important;
    border-color: rgba(0,0,0,0.1) !important;
    color: #374151 !important;
}

/* Result card */
[data-theme="light"] .result-card {
    background: rgba(255,255,255,0.95) !important;
    border-color: rgba(0,0,0,0.08) !important;
    color: #0f172a !important;
}

[data-theme="light"] .result-card p,
[data-theme="light"] .result-card span {
    color: #374151 !important;
}

/* Hero counter strip */
[data-theme="light"] .hero-counter-strip {
    background: rgba(255,255,255,0.8);
    border-color: rgba(0,0,0,0.06);
}

[data-theme="light"] .hero-counter-strip .counter-value {
    color: #0f172a !important;
}

[data-theme="light"] .hero-counter-strip .counter-label {
    color: #64748b !important;
}


/* Mobile Adjustments */
@media (max-width: 768px) {
    .navbar { padding: 12px 16px; }
    .nav-links { display: none !important; }
}

/* ════════════════════════════════════════════════════════════
   GLOBAL MOBILE POLISH — Applied to ALL tool UIs
   Fixes: header overlap, icon sizing, touch targets, safe areas
   ════════════════════════════════════════════════════════════ */

/* Base touch target size */
button, .btn-primary, .btn-secondary, [role="button"] {
    min-height: 44px;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

/* App container safe area padding */
.app-container {
    padding-bottom: max(20px, env(safe-area-inset-bottom, 20px));
    padding-left: max(16px, env(safe-area-inset-left, 16px));
    padding-right: max(16px, env(safe-area-inset-right, 16px));
    box-sizing: border-box;
    max-width: 680px;
    margin: 0 auto;
    width: 100%;
}

/* Prevent horizontal scroll */
body {
    overflow-x: hidden;
    max-width: 100vw;
}

/* Header fixes */
.app-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px 0 16px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--divider-color, rgba(255,255,255,0.06));
}
.logo-section {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex-shrink: 1;
}
.logo-section h2 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Upload card grid responsive */
#upload-area {
    display: flex;
    gap: 14px;
}

@media (max-width: 480px) {
    .app-header {
        padding: 10px 0 12px;
    }
    /* Hide text in wallet/home buttons, keep icons */
    #connectWalletBtn .btn-text,
    #connectWalletBtn > span:not(i),
    .app-header .btn-secondary .btn-label {
        display: none !important;
    }
    #connectWalletBtn {
        padding: 8px 12px !important;
    }
    /* Compact nav area */
    .app-header > div:last-child {
        gap: 6px !important;
        flex-wrap: nowrap !important;
    }
    /* Stack upload cards on very small screens */
    #upload-area {
        flex-direction: column;
        gap: 10px;
    }
    /* Result cards full width */
    .result-grid, .stats-row, .forensic-row {
        flex-direction: column !important;
        gap: 10px !important;
    }
    /* Font scaling */
    h1 { font-size: 22px !important; }
    h2 { font-size: 18px !important; }
    h3 { font-size: 15px !important; }
    /* Card padding */
    .vc-card, .result-card, .upload-area {
        padding: 16px !important;
        border-radius: 14px !important;
    }
    /* Score ring */
    .confidence-ring svg {
        width: 110px !important;
        height: 110px !important;
    }
    /* Prob duel */
    .prob-duel {
        gap: 8px !important;
    }
    .prob-duel__val {
        font-size: 26px !important;
    }
    /* Theme toggle position */
    .theme-toggle {
        top: 12px !important;
        right: 12px !important;
    }
}

@media (max-width: 360px) {
    .app-container {
        padding-left: 12px;
        padding-right: 12px;
    }
    .app-logo, .logo-section img {
        width: 28px !important;
        height: 28px !important;
    }
    .logo-section h2 {
        font-size: 14px !important;
    }
    .btn-primary, .btn-secondary {
        font-size: 13px !important;
        padding: 10px 14px !important;
    }
}

/* Smooth animations on mobile */
@media (prefers-reduced-motion: no-preference) {
    .vc-card {
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }
    .vc-card:active {
        transform: scale(0.98);
    }
}

/* Audio player mobile style */
audio {
    width: 100%;
    border-radius: 10px;
    accent-color: #06b6d4;
}

/* Progress bars */
.conf-bars__track {
    border-radius: 999px;
    overflow: hidden;
}
.conf-bars__fill {
    border-radius: 999px;
    transition: width 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Floating history btn position fix on mobile */
@media (max-width: 480px) {
    .floating-history-btn {
        bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
        right: 16px !important;
    }
}



/* ── Theme toggle: works inline inside header-actions (not absolute) ── */
.header-actions .theme-toggle,
.app-header .theme-toggle {
    position: relative !important;
    top: auto !important;
    right: auto !important;
}