/*
 * PixelMagicTools - Native App Design System
 * Material Design 3 + iOS Human Interface Guidelines
 * Complete Platform-Adaptive UI Framework
 * Version 2.1 (Light Mode Enforced)
 */

/* ===== DESIGN TOKENS - MATERIAL YOU ===== */
:root {
    /* Material You Color System */
    --md-primary: #FB8500;
    --md-on-primary: #ffffff;
    --md-primary-container: #FFF0DB;
    --md-on-primary-container: #2d1600;

    --md-secondary: #219EBC;
    --md-on-secondary: #ffffff;
    --md-secondary-container: #D6F0F7;
    --md-on-secondary-container: #001f26;

    --md-tertiary: #023047;
    --md-surface: #FEFBFF;
    --md-surface-dim: #DED8E1;
    --md-surface-bright: #ffffff;
    --md-surface-container-lowest: #ffffff;
    --md-surface-container-low: #F7F2F7;
    --md-surface-container: #F1ECF1;
    --md-surface-container-high: #EBE6EB;
    --md-surface-container-highest: #E6E1E5;

    --md-on-surface: #1C1B1F;
    --md-on-surface-variant: #49454F;
    --md-outline: #79747E;
    --md-outline-variant: #CAC4D0;

    --md-error: #B3261E;
    --md-success: #1B873A;

    /* Elevation Shadows (Material 3) */
    --md-elevation-1: 0px 1px 2px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
    --md-elevation-2: 0px 1px 2px rgba(0, 0, 0, 0.3), 0px 2px 6px 2px rgba(0, 0, 0, 0.15);
    --md-elevation-3: 0px 4px 8px 3px rgba(0, 0, 0, 0.15), 0px 1px 3px rgba(0, 0, 0, 0.3);
    --md-elevation-4: 0px 6px 10px 4px rgba(0, 0, 0, 0.15), 0px 2px 3px rgba(0, 0, 0, 0.3);
    --md-elevation-5: 0px 8px 12px 6px rgba(0, 0, 0, 0.15), 0px 4px 4px rgba(0, 0, 0, 0.3);

    /* Motion Curves */
    --md-motion-standard: cubic-bezier(0.2, 0, 0, 1);
    --md-motion-emphasized: cubic-bezier(0.2, 0, 0, 1);
    --md-motion-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1);
    --md-motion-emphasized-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15);

    /* Spacing Scale */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;

    /* Border Radius (Material 3) */
    --radius-xs: 4px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 28px;
    --radius-full: 9999px;

    /* App Layout */
    --app-bar-height: 64px;
    --bottom-nav-height: 80px;
    --safe-area-top: env(safe-area-inset-top, 0px);
    --safe-area-bottom: env(safe-area-inset-bottom, 0px);
    --safe-area-left: env(safe-area-inset-left, 0px);
    --safe-area-right: env(safe-area-inset-right, 0px);
}

/* ===== MOBILE DEVICES (max-width: 768px) ===== */
@media (max-width: 768px) {

    /* === CORE APP SHELL === */
    html {
        overscroll-behavior: none;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
        scroll-behavior: smooth;
    }

    body {
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Roboto', sans-serif !important;
        background: var(--md-surface-container-low) !important;
        color: var(--md-on-surface) !important;
        margin: 0 !important;
        padding: 0 !important;
        padding-bottom: calc(var(--bottom-nav-height) + var(--safe-area-bottom)) !important;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        min-height: 100vh;
        min-height: 100dvh;
    }

    /* === HIDE DESKTOP/WEB ELEMENTS === */
    footer,
    nav>div[class*="lg:flex"],
    .hide-on-mobile,
    .desktop-only {
        display: none !important;
    }

    /* === APP BAR (Material 3 Top App Bar) === */
    nav.fixed {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: var(--app-bar-height) !important;
        padding: 0 !important;
        background: var(--md-surface) !important;
        box-shadow: none !important;
        border: none !important;
        z-index: 1000 !important;
        transition: all 0.2s var(--md-motion-standard) !important;
    }

    /* App Bar with scroll shadow */
    nav.fixed.scrolled,
    body.scrolled nav.fixed {
        box-shadow: var(--md-elevation-2) !important;
    }

    nav .max-w-7xl {
        max-width: 100% !important;
        padding: 0 var(--space-md) !important;
        height: 100% !important;
    }

    nav .h-14,
    nav [class*="flex justify-between"] {
        height: 100% !important;
        align-items: center !important;
    }

    /* Logo container */
    nav img[alt="PixelMagicTools"] {
        height: 28px !important;
        width: auto !important;
        max-width: 140px !important;
    }

    /* Menu Button (Material Icon Button) */
    nav button[class*="p-2"] {
        width: 48px !important;
        height: 48px !important;
        border-radius: var(--radius-full) !important;
        background: transparent !important;
        border: none !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: var(--md-on-surface) !important;
        transition: background 0.2s var(--md-motion-standard) !important;
        -webkit-tap-highlight-color: transparent;
    }

    nav button[class*="p-2"]:active {
        background: var(--md-surface-container-highest) !important;
    }

    nav button[class*="p-2"] svg {
        width: 24px !important;
        height: 24px !important;
    }

    /* Spacer after nav */
    nav+div[class*="h-16"],
    nav+div[class*="h-["] {
        height: var(--app-bar-height) !important;
    }

    /* === NAVIGATION DRAWER (Material 3 Modal Drawer) === */
    nav>div[x-show="mobileMenuOpen"] {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        max-width: 360px !important;
        background: var(--md-surface) !important;
        z-index: 2000 !important;
        overflow-y: auto !important;
        border-radius: 0 var(--radius-lg) var(--radius-lg) 0 !important;
        box-shadow: var(--md-elevation-5) !important;
        transform-origin: left !important;
        padding-top: var(--safe-area-top) !important;
        padding-bottom: calc(var(--space-lg) + var(--safe-area-bottom)) !important;
    }

    /* Drawer Header */
    nav>div[x-show="mobileMenuOpen"]>div:first-child {
        padding: var(--space-lg) !important;
        border-bottom: 1px solid var(--md-outline-variant) !important;
    }

    /* Drawer Items */
    nav>div[x-show="mobileMenuOpen"] a,
    nav>div[x-show="mobileMenuOpen"] button {
        display: flex !important;
        align-items: center !important;
        gap: var(--space-md) !important;
        padding: var(--space-md) var(--space-lg) !important;
        margin: var(--space-xs) var(--space-md) !important;
        border-radius: var(--radius-full) !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        color: var(--md-on-surface-variant) !important;
        background: transparent !important;
        border: none !important;
        text-decoration: none !important;
        transition: all 0.2s var(--md-motion-standard) !important;
    }

    nav>div[x-show="mobileMenuOpen"] a:active,
    nav>div[x-show="mobileMenuOpen"] button:active {
        background: var(--md-surface-container-highest) !important;
    }

    nav>div[x-show="mobileMenuOpen"] a.active {
        background: var(--md-secondary-container) !important;
        color: var(--md-on-secondary-container) !important;
    }

    nav>div[x-show="mobileMenuOpen"] a i,
    nav>div[x-show="mobileMenuOpen"] button i,
    nav>div[x-show="mobileMenuOpen"] a svg {
        width: 24px !important;
        height: 24px !important;
        font-size: 20px !important;
        color: inherit !important;
    }

    /* === MAIN CONTENT AREA === */
    main {
        min-height: calc(100vh - var(--app-bar-height) - var(--bottom-nav-height)) !important;
        min-height: calc(100dvh - var(--app-bar-height) - var(--bottom-nav-height)) !important;
        padding-bottom: var(--space-lg) !important;
    }

    /* === HERO SECTION (App Screen Header) === */
    .hero-section,
    [class*="hero"] {
        padding: var(--space-xl) var(--space-md) var(--space-lg) !important;
        text-align: center !important;
        background: linear-gradient(180deg, var(--md-surface) 0%, var(--md-surface-container-low) 100%) !important;
    }

    .hero-title,
    h1 {
        font-size: 24px !important;
        font-weight: 600 !important;
        color: var(--md-on-surface) !important;
        margin: 0 0 var(--space-sm) !important;
        line-height: 1.3 !important;
        letter-spacing: -0.02em !important;
    }

    .hero-subtitle,
    [class*="hero"] p {
        font-size: 14px !important;
        color: var(--md-on-surface-variant) !important;
        margin: 0 0 var(--space-lg) !important;
        line-height: 1.5 !important;
        max-width: 280px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* === MATERIAL 3 FAB (Primary Action Button) === */
    .select-btn,
    [class*="select-btn"],
    button[class*="bg-"][class*="font-bold"][class*="rounded"] {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: var(--space-sm) !important;
        min-height: 56px !important;
        padding: 0 var(--space-lg) !important;
        background: var(--md-primary) !important;
        color: var(--md-on-primary) !important;
        border: none !important;
        border-radius: var(--radius-lg) !important;
        font-size: 16px !important;
        font-weight: 600 !important;
        letter-spacing: 0.02em !important;
        box-shadow: var(--md-elevation-3) !important;
        transition: all 0.2s var(--md-motion-emphasized) !important;
        -webkit-tap-highlight-color: transparent !important;
        width: auto !important;
        max-width: 100% !important;
    }

    .select-btn:active,
    button[class*="bg-"]:active {
        transform: scale(0.96) !important;
        box-shadow: var(--md-elevation-1) !important;
    }

    /* Extended FAB (Full Width) */
    .action-btn.primary,
    .convert-btn,
    .download-btn,
    .merge-btn,
    .create-btn {
        width: calc(100% - var(--space-xl)) !important;
        margin: 0 auto !important;
    }

    /* === MATERIAL 3 CARDS === */
    .card,
    [class*="bg-white"][class*="rounded"],
    [class*="editor-card"],
    .editor-card,
    .control-card,
    .info-card {
        background: var(--md-surface) !important;
        border-radius: var(--radius-md) !important;
        border: none !important;
        box-shadow: none !important;
        margin: var(--space-sm) var(--space-md) !important;
        padding: var(--space-md) !important;
        overflow: hidden !important;
    }

    /* Elevated Card (with shadow) */
    .card-elevated,
    [class*="shadow-lg"],
    [class*="shadow-xl"] {
        box-shadow: var(--md-elevation-1) !important;
    }

    /* Outlined Card */
    .card-outlined {
        border: 1px solid var(--md-outline-variant) !important;
    }

    /* Filled Card */
    .card-filled,
    [class*="bg-"][class*="50"],
    .result-card {
        background: var(--md-surface-container-highest) !important;
    }

    /* === INFO CARDS GRID (Material Tiles) === */
    .info-grid,
    [class*="info-grid"] {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: var(--space-sm) !important;
        padding: 0 var(--space-md) !important;
    }

    .info-card {
        padding: var(--space-md) !important;
        text-align: center !important;
    }

    .info-icon {
        width: 40px !important;
        height: 40px !important;
        margin: 0 auto var(--space-sm) !important;
        background: var(--md-primary-container) !important;
        border-radius: var(--radius-md) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .info-icon i {
        font-size: 18px !important;
        color: var(--md-primary) !important;
    }

    .info-title {
        font-size: 13px !important;
        font-weight: 600 !important;
        color: var(--md-on-surface) !important;
        margin-bottom: var(--space-xs) !important;
    }

    .info-desc {
        font-size: 11px !important;
        color: var(--md-on-surface-variant) !important;
        line-height: 1.4 !important;
    }

    /* === MATERIAL 3 TEXT FIELDS === */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="url"],
    select,
    textarea {
        width: 100% !important;
        min-height: 56px !important;
        padding: var(--space-md) !important;
        background: var(--md-surface-container-highest) !important;
        border: none !important;
        border-radius: var(--radius-xs) var(--radius-xs) 0 0 !important;
        border-bottom: 2px solid var(--md-outline) !important;
        font-size: 16px !important;
        color: var(--md-on-surface) !important;
        transition: all 0.2s var(--md-motion-standard) !important;
        -webkit-appearance: none !important;
        appearance: none !important;
    }

    input:focus,
    select:focus,
    textarea:focus {
        outline: none !important;
        border-bottom-color: var(--md-primary) !important;
        background: var(--md-surface-container-high) !important;
    }

    /* Labels */
    label,
    .form-label {
        font-size: 12px !important;
        font-weight: 500 !important;
        color: var(--md-on-surface-variant) !important;
        margin-bottom: var(--space-xs) !important;
        display: block !important;
    }

    /* === MATERIAL 3 SLIDERS === */
    input[type="range"] {
        width: 100% !important;
        height: 4px !important;
        background: var(--md-surface-container-highest) !important;
        border-radius: 2px !important;
        -webkit-appearance: none !important;
        appearance: none !important;
        margin: var(--space-lg) 0 !important;
    }

    input[type="range"]::-webkit-slider-track {
        height: 4px !important;
        background: var(--md-surface-container-highest) !important;
        border-radius: 2px !important;
    }

    input[type="range"]::-webkit-slider-thumb {
        -webkit-appearance: none !important;
        width: 20px !important;
        height: 20px !important;
        background: var(--md-primary) !important;
        border-radius: 50% !important;
        cursor: pointer !important;
        box-shadow: var(--md-elevation-1) !important;
        margin-top: -8px !important;
    }

    input[type="range"]:active::-webkit-slider-thumb {
        transform: scale(1.2) !important;
    }

    /* === MATERIAL 3 BUTTONS === */
    button,
    .btn,
    [role="button"] {
        min-height: 48px !important;
        font-family: inherit !important;
        transition: all 0.2s var(--md-motion-standard) !important;
        -webkit-tap-highlight-color: transparent !important;
    }

    /* Filled Button */
    .btn-primary,
    button[class*="bg-"][class*="text-white"] {
        background: var(--md-primary) !important;
        color: var(--md-on-primary) !important;
        border: none !important;
        border-radius: var(--radius-full) !important;
        padding: 0 var(--space-lg) !important;
        font-weight: 500 !important;
    }

    /* Outlined Button */
    .btn-secondary,
    .action-btn.secondary,
    button[class*="border"] {
        background: transparent !important;
        color: var(--md-primary) !important;
        border: 1px solid var(--md-outline) !important;
        border-radius: var(--radius-full) !important;
    }

    /* Text Button */
    .btn-text,
    .clear-all {
        background: transparent !important;
        color: var(--md-primary) !important;
        border: none !important;
        padding: var(--space-sm) var(--space-md) !important;
    }

    /* Icon Button */
    .tool-btn,
    [class*="tool-btn"] {
        width: 40px !important;
        height: 40px !important;
        padding: 0 !important;
        border-radius: var(--radius-full) !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* === MATERIAL 3 CHIPS === */
    .preset-btn,
    [class*="preset-btn"],
    .blur-option,
    .effect-option {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 32px !important;
        padding: 0 var(--space-md) !important;
        background: var(--md-surface-container-high) !important;
        color: var(--md-on-surface-variant) !important;
        border: 1px solid var(--md-outline-variant) !important;
        border-radius: var(--radius-sm) !important;
        font-size: 13px !important;
        font-weight: 500 !important;
        transition: all 0.2s var(--md-motion-standard) !important;
    }

    .preset-btn.active,
    .blur-option.active {
        background: var(--md-secondary-container) !important;
        color: var(--md-on-secondary-container) !important;
        border-color: transparent !important;
    }

    /* === EFFECT TYPE GRID === */
    .blur-grid,
    [class*="blur-grid"],
    .effect-grid {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: var(--space-sm) !important;
    }

    .blur-option {
        flex-direction: column !important;
        height: auto !important;
        padding: var(--space-md) var(--space-sm) !important;
        border-radius: var(--radius-md) !important;
    }

    .blur-icon {
        width: 36px !important;
        height: 36px !important;
        margin-bottom: var(--space-xs) !important;
        background: var(--md-primary-container) !important;
        border-radius: var(--radius-md) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .blur-name {
        font-size: 11px !important;
        font-weight: 600 !important;
    }

    .blur-desc {
        display: none !important;
    }

    /* === CANVAS / PREVIEW AREA === */
    .canvas-area,
    [class*="canvas-area"],
    .canvas-wrapper {
        background: var(--md-surface-container-high) !important;
        border-radius: var(--radius-md) !important;
        overflow: hidden !important;
        margin: var(--space-md) !important;
    }

    .canvas-toolbar {
        padding: var(--space-sm) var(--space-md) !important;
        background: var(--md-surface) !important;
        border-bottom: 1px solid var(--md-outline-variant) !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
    }

    .canvas-wrapper {
        min-height: 240px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: var(--space-md) !important;
        background: repeating-conic-gradient(var(--md-surface-container-highest) 0% 25%, var(--md-surface-container-high) 0% 50%) 50% / 16px 16px !important;
    }

    /* === CONTROLS SECTION === */
    .controls-section {
        display: flex !important;
        flex-direction: column !important;
        gap: var(--space-md) !important;
        padding: 0 var(--space-md) !important;
    }

    .control-card {
        padding: var(--space-md) !important;
    }

    .section-title {
        font-size: 12px !important;
        font-weight: 600 !important;
        color: var(--md-on-surface-variant) !important;
        text-transform: uppercase !important;
        letter-spacing: 0.05em !important;
        margin-bottom: var(--space-md) !important;
        display: flex !important;
        align-items: center !important;
        gap: var(--space-sm) !important;
    }

    .slider-group {
        margin-bottom: var(--space-md) !important;
    }

    .slider-label {
        display: flex !important;
        justify-content: space-between !important;
        font-size: 13px !important;
        color: var(--md-on-surface) !important;
        margin-bottom: var(--space-xs) !important;
    }

    .slider-label span:last-child {
        color: var(--md-primary) !important;
        font-weight: 600 !important;
    }

    /* === PRESETS GRID === */
    .presets-grid {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: var(--space-sm) !important;
    }

    /* === FILE LIST ITEMS === */
    .file-item,
    [class*="file-item"],
    .image-card {
        background: var(--md-surface-container) !important;
        border-radius: var(--radius-md) !important;
        overflow: hidden !important;
    }

    .image-card img {
        width: 100% !important;
        height: 120px !important;
        object-fit: cover !important;
    }

    .image-overlay {
        background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, transparent 100%) !important;
    }

    /* === IMAGES GRID === */
    .images-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: var(--space-sm) !important;
        padding: var(--space-md) !important;
    }

    /* === ACTION BAR (Fixed Bottom) === */
    .action-bar,
    [class*="action-bar"] {
        position: fixed !important;
        bottom: calc(var(--bottom-nav-height) + var(--safe-area-bottom) + var(--space-md)) !important;
        left: var(--space-md) !important;
        right: var(--space-md) !important;
        display: flex !important;
        gap: var(--space-sm) !important;
        background: var(--md-surface) !important;
        padding: var(--space-sm) !important;
        border-radius: var(--radius-lg) !important;
        box-shadow: var(--md-elevation-4) !important;
        z-index: 100 !important;
        margin: 0 !important;
    }

    .action-bar button,
    .action-bar .action-btn {
        flex: 1 !important;
        border-radius: var(--radius-md) !important;
    }

    /* === DRAG OVERLAY === */
    .drag-overlay,
    [class*="drag-overlay"] {
        background: rgba(var(--md-primary), 0.95) !important;
        backdrop-filter: blur(8px) !important;
    }

    .drag-overlay i {
        font-size: 56px !important;
        color: var(--md-on-primary) !important;
    }

    /* === RESULT CARD (Success State) === */
    .result-card {
        background: linear-gradient(135deg, #E8F5E9 0%, #C8E6C9 100%) !important;
        border-radius: var(--radius-lg) !important;
        padding: var(--space-lg) !important;
        text-align: center !important;
        margin: var(--space-md) !important;
    }

    .result-icon {
        width: 64px !important;
        height: 64px !important;
        background: var(--md-success) !important;
        border-radius: var(--radius-full) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 auto var(--space-md) !important;
    }

    .result-icon i {
        font-size: 28px !important;
        color: white !important;
    }

    /* === QR CODE PAGE SPECIFIC === */
    .phone-preview,
    [class*="phone-preview"] {
        display: none !important;
    }

    .qr-layout,
    [class*="qr-layout"] {
        display: block !important;
    }

    .form-side {
        width: 100% !important;
        padding: 0 !important;
    }

    .category-grid {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        gap: var(--space-sm) !important;
        padding: var(--space-md) !important;
    }

    .cat-card {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: var(--space-xs) !important;
        padding: var(--space-sm) !important;
        background: var(--md-surface) !important;
        border-radius: var(--radius-md) !important;
        border: 2px solid transparent !important;
        font-size: 9px !important;
        font-weight: 500 !important;
        text-align: center !important;
    }

    .cat-card.active {
        background: var(--md-primary-container) !important;
        border-color: var(--md-primary) !important;
    }

    .cat-card i {
        font-size: 20px !important;
    }

    /* === ACCORDION (Expansion Panels) === */
    .accordion {
        background: var(--md-surface) !important;
        border-radius: var(--radius-md) !important;
        margin-bottom: var(--space-sm) !important;
        overflow: hidden !important;
    }

    .accordion-header {
        padding: var(--space-md) !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        cursor: pointer !important;
    }

    .accordion-content {
        padding: var(--space-md) !important;
        border-top: 1px solid var(--md-outline-variant) !important;
    }

    /* === SETTINGS BAR (Options Row) === */
    .settings-bar {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: var(--space-md) !important;
        padding: var(--space-md) !important;
    }

    .setting-group {
        background: var(--md-surface-container) !important;
        padding: var(--space-md) !important;
        border-radius: var(--radius-md) !important;
    }

    /* === TOAST NOTIFICATIONS === */
    .toast-bottom-right {
        bottom: calc(var(--bottom-nav-height) + var(--safe-area-bottom) + 80px) !important;
        right: var(--space-md) !important;
        left: var(--space-md) !important;
    }

    .toast {
        border-radius: var(--radius-md) !important;
        box-shadow: var(--md-elevation-3) !important;
    }

    /* === ANIMATIONS === */
    @keyframes slide-up {
        from {
            opacity: 0;
            transform: translateY(16px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @keyframes fade-in {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    .animate-slide-up {
        animation: slide-up 0.3s var(--md-motion-emphasized-decelerate) forwards;
    }

    .animate-fade-in {
        animation: fade-in 0.2s var(--md-motion-standard) forwards;
    }

    /* === ADD MORE CARD (Dashed Border) === */
    .add-more-card,
    [class*="add-more"] {
        background: var(--md-surface-container) !important;
        border: 2px dashed var(--md-outline-variant) !important;
        border-radius: var(--radius-md) !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        padding: var(--space-lg) var(--space-md) !important;
        color: var(--md-on-surface-variant) !important;
    }

    .add-more-card i {
        font-size: 24px !important;
        margin-bottom: var(--space-sm) !important;
    }

    .add-more-card span {
        font-size: 12px !important;
        font-weight: 500 !important;
    }
}

/* ===== BOTTOM NAVIGATION BAR (Material 3) ===== */
.mobile-bottom-nav {
    display: none;
}

@media (max-width: 768px) {
    .mobile-bottom-nav {
        display: flex !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: var(--bottom-nav-height) !important;
        padding: 0 !important;
        padding-bottom: var(--safe-area-bottom) !important;
        background: var(--md-surface) !important;
        border-top: none !important;
        box-shadow: var(--md-elevation-2) !important;
        z-index: 1000 !important;
        justify-content: space-around !important;
        align-items: stretch !important;
    }

    .mobile-bottom-nav a {
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
        padding: 12px 0 8px !important;
        color: var(--md-on-surface-variant) !important;
        text-decoration: none !important;
        position: relative !important;
        -webkit-tap-highlight-color: transparent !important;
        transition: color 0.2s var(--md-motion-standard) !important;
    }

    /* Active indicator pill */
    .mobile-bottom-nav a::before {
        content: '' !important;
        position: absolute !important;
        top: 8px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: 0 !important;
        height: 32px !important;
        background: var(--md-secondary-container) !important;
        border-radius: var(--radius-full) !important;
        opacity: 0 !important;
        transition: all 0.2s var(--md-motion-emphasized) !important;
        z-index: -1 !important;
    }

    .mobile-bottom-nav a.active::before,
    .mobile-bottom-nav a:active::before {
        width: 64px !important;
        opacity: 1 !important;
    }

    .mobile-bottom-nav a.active {
        color: var(--md-on-secondary-container) !important;
    }

    .mobile-bottom-nav a i {
        font-size: 24px !important;
        height: 24px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: relative !important;
        z-index: 1 !important;
    }

    .mobile-bottom-nav a span {
        font-size: 12px !important;
        font-weight: 500 !important;
        letter-spacing: 0.02em !important;
        position: relative !important;
        z-index: 1 !important;
    }

    /* Center FAB removed - Clean Material 3 bottom nav */
    .mobile-bottom-nav .nav-action {
        flex: 1 !important;
        margin: 0 !important;
    }

    .mobile-bottom-nav .nav-action a {
        width: auto !important;
        height: auto !important;
        background: transparent !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        color: var(--md-on-surface-variant) !important;
    }

    .mobile-bottom-nav .nav-action a.active {
        color: var(--md-on-secondary-container) !important;
    }

    .mobile-bottom-nav .nav-action span {
        display: block !important;
    }
}

/* ===== PWA INSTALL BANNER ===== */
@media (max-width: 768px) {
    .pwa-install-prompt {
        display: none;
        position: fixed !important;
        bottom: calc(var(--bottom-nav-height) + var(--safe-area-bottom) + var(--space-md)) !important;
        left: var(--space-md) !important;
        right: var(--space-md) !important;
        padding: var(--space-md) !important;
        background: var(--md-tertiary) !important;
        border-radius: var(--radius-lg) !important;
        box-shadow: var(--md-elevation-4) !important;
        z-index: 200 !important;
        align-items: center !important;
        gap: var(--space-md) !important;
    }

    .pwa-install-prompt.show {
        display: flex !important;
    }

    .pwa-install-prompt .pwa-icon {
        width: 48px !important;
        height: 48px !important;
        background: rgba(255, 255, 255, 0.15) !important;
        border-radius: var(--radius-md) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: white !important;
    }

    .pwa-install-prompt .pwa-content {
        flex: 1 !important;
        color: white !important;
    }

    .pwa-install-prompt .pwa-content h4 {
        font-size: 14px !important;
        font-weight: 600 !important;
        margin: 0 0 2px !important;
    }

    .pwa-install-prompt .pwa-content p {
        font-size: 12px !important;
        opacity: 0.8 !important;
        margin: 0 !important;
    }

    .pwa-install-prompt .pwa-install-btn {
        padding: var(--space-sm) var(--space-md) !important;
        background: white !important;
        color: var(--md-tertiary) !important;
        border: none !important;
        border-radius: var(--radius-full) !important;
        font-weight: 600 !important;
        font-size: 13px !important;
    }

    .pwa-install-prompt .pwa-close {
        position: absolute !important;
        top: var(--space-sm) !important;
        right: var(--space-sm) !important;
        width: 24px !important;
        height: 24px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: rgba(255, 255, 255, 0.6) !important;
        background: transparent !important;
        border: none !important;
    }
}

/* ===== TABLET OPTIMIZATIONS (769px - 1024px) ===== */
@media (min-width: 769px) and (max-width: 1024px) {
    body {
        background: var(--md-surface-container-lowest) !important;
    }

    .max-w-7xl {
        max-width: 100% !important;
        padding: 0 var(--space-lg) !important;
    }

    .hero-section {
        padding: var(--space-2xl) var(--space-lg) !important;
    }

    .hero-title,
    h1 {
        font-size: 32px !important;
    }

    .info-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    .images-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    .blur-grid {
        grid-template-columns: repeat(6, 1fr) !important;
    }

    .category-grid {
        grid-template-columns: repeat(8, 1fr) !important;
    }

    .controls-section {
        flex-direction: row !important;
    }

    .control-card {
        flex: 1 !important;
    }

    /* Show bottom nav on tablets too */
    .mobile-bottom-nav {
        display: flex !important;
    }

    footer {
        display: none !important;
    }
}

/* Dark Mode Removed as per user request to force Light Mode */
/* 
@media (prefers-color-scheme: dark) {
    @media (max-width: 1024px) {
         Dark mode styles removed
    }
}
*/

/* ===== REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ===== LANDSCAPE MOBILE ===== */
@media (max-width: 768px) and (orientation: landscape) {
    :root {
        --app-bar-height: 48px;
        --bottom-nav-height: 56px;
    }

    .hero-section {
        padding: var(--space-md) !important;
    }

    .hero-title {
        font-size: 20px !important;
    }

    .mobile-bottom-nav a {
        flex-direction: row !important;
        gap: var(--space-sm) !important;
    }

    .mobile-bottom-nav a::before {
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: 0 !important;
        height: 32px !important;
    }

    .mobile-bottom-nav a.active::before {
        width: 80px !important;
    }
}

/* ===== HAPTIC FEEDBACK ===== */
@media (max-width: 768px) {
    .haptic {
        transition: transform 0.1s var(--md-motion-standard) !important;
    }

    .haptic:active {
        transform: scale(0.97) !important;
    }
}