/* ============================================================
   CYPHEX ADMIN — Premium Design System v2.0.2
   Snow White & Amber Gold | Smooth UX Edition
   ============================================================ */

/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

/* Global Smooth Scroll */
/* Scoped smooth scroll — only on cyphex pages */
.cyphex-admin-wrapper { scroll-behavior: smooth; }


/* Universal Transition Timing — only sets easing, not duration or property */
/* This avoids overriding transition durations set by WP core or themes */
.cyphex-admin-wrapper .cyphex-nav-item,
.cyphex-admin-wrapper .cyphex-card,
.cyphex-admin-wrapper .button-primary,
.cyphex-admin-wrapper input,
.cyphex-admin-wrapper textarea,
.cyphex-admin-wrapper select,
.cyphex_image_hunter_attachment,
.cyphex_image_hunter_btn_action,
.cyphex-logo-template {
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Keyframe Animations */
@keyframes cyphex-fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes cyphex-slide-in {
    from { opacity: 0; transform: translateX(-12px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes cyphex-shimmer {
    0%   { background-position: -400px 0; }
    100% { background-position: 400px 0; }
}

@keyframes cyphex-pulse-ring {
    0%   { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.4); }
    70%  { box-shadow: 0 0 0 8px rgba(245, 158, 11, 0); }
    100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); }
}

@keyframes cyphexPulseFocus {
    0%   { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.4); }
    70%  { box-shadow: 0 0 0 10px rgba(245, 158, 11, 0); }
    100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); }
}

/* Page Entry Animation */
.cyphex-main-area {
    animation: cyphex-fade-in 0.35s ease both;
}

/* Skeleton Loading Shimmer */
.cyphex-skeleton {
    background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%) !important;
    background-size: 800px 100% !important;
    animation: cyphex-shimmer 1.5s infinite !important;
    border-radius: 8px !important;
    color: transparent !important;
}

/* Premium Snow White & Amber Design System */
.cyphex-admin-wrapper {
    display: flex !important;
    background: #f8fafc !important;
    min-height: calc(100vh - 32px) !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
    width: 100% !important;
    max-width: 1800px !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
    box-shadow: 0 0 100px rgba(0,0,0,0.05);
}

/* Sidebar Styling */
.cyphex-sidebar {
    width: 280px !important;
    min-width: 280px !important;
    background: #ffffff !important;
    border-right: 1px solid #e2e8f0 !important;
    display: flex !important;
    flex-direction: column !important;
    flex-shrink: 0 !important;
    position: sticky !important;
    top: 32px !important;
    height: calc(100vh - 32px) !important;
    z-index: 99 !important;
}

/* Fix for WP Admin Bar */
#wpadminbar { z-index: 9999 !important; }

.cyphex-sidebar-header {
    padding: 40px 30px !important;
    text-align: center !important;
    width: 100% !important;
}

.cyphex-sidebar-header img {
    width: 80px !important;
    max-width: 80px !important;
    height: auto !important;
    border-radius: 12px !important;
    margin-bottom: 15px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.cyphex-sidebar-header h2 {
    font-size: 18px !important;
    font-weight: 900 !important;
    color: #1e293b !important;
    letter-spacing: 2px !important;
    margin: 0 !important;
}

.cyphex-nav {
    padding: 0 20px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

.cyphex-nav-item {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px 20px !important;
    border-radius: 12px !important;
    color: #64748b !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    transition: background 0.2s, color 0.2s, box-shadow 0.2s, transform 0.15s !important;
    font-size: 14px !important;
    position: relative !important;
    overflow: hidden !important;
}

.cyphex-nav-item::before {
    content: '';
    position: absolute;
    left: 0; top: 50%;
    transform: translateY(-50%) scaleY(0);
    width: 3px; height: 70%;
    background: #f59e0b;
    border-radius: 0 4px 4px 0;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.cyphex-nav-item:hover {
    background: #f8fafc !important;
    color: #1e293b !important;
    transform: translateX(3px) !important;
}

.cyphex-nav-item:hover::before {
    transform: translateY(-50%) scaleY(1);
}

.cyphex-nav-item.active {
    background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.35) !important;
    transform: none !important;
}

.cyphex-nav-item.active::before {
    display: none;
}

.cyphex-nav-item .dashicons {
    font-size: 20px !important;
    width: 20px !important;
    height: 20px !important;
    transition: transform 0.2s !important;
}

.cyphex-nav-item:hover .dashicons {
    transform: scale(1.1);
}

/* Main Content Area */
.cyphex-main-area {
    flex-grow: 1 !important;
    padding: 40px 60px !important;
    max-width: calc(100% - 280px) !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

/* Centered container for ultra-wide screens */
.cyphex-main-area > div:not(.cyphex-sidebar) {
    max-width: 1400px !important;
    margin: 0 auto !important;
}

.cyphex-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 20px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
    overflow: hidden !important;
    margin-bottom: 30px !important;
    width: 100% !important;
    transition: box-shadow 0.25s, transform 0.25s !important;
    /* Isolate transform so it doesn't affect theme scroll containers */
    will-change: transform;
    contain: layout style;
}

.cyphex-card:hover {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08) !important;
    transform: translateY(-2px) !important;
}

.cyphex-card-header {
    padding: 24px 32px !important;
    border-bottom: 1px solid #f1f5f9 !important;
    background: linear-gradient(to right, #ffffff, #fafbfc) !important;
}

.cyphex-card-title {
    font-size: 22px;
    font-weight: 800;
    color: #1e293b;
    margin: 0;
}

/* Scoped Button Overrides */
.cyphex-admin-wrapper .button-primary,
.cyphex_image_hunter_view_container .button-primary,
#cyphex-auto-hunt-box .button-primary {
    background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%) !important;
    border: none !important;
    color: #ffffff !important;
    height: 48px !important;
    padding: 0 24px !important;
    border-radius: 12px !important;
    font-weight: 800 !important;
    font-size: 14px !important;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3) !important;
    text-shadow: none !important;
    cursor: pointer !important;
    transition: transform 0.2s, box-shadow 0.2s, background 0.2s !important;
    position: relative !important;
    overflow: hidden !important;
}

.cyphex-admin-wrapper .button-primary::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 0; height: 0;
    background: rgba(255,255,255,0.25);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.4s, height 0.4s, opacity 0.4s;
    opacity: 0;
}

.cyphex-admin-wrapper .button-primary:hover::after {
    width: 300px; height: 300px; opacity: 0;
}

.cyphex-admin-wrapper .button-primary:hover {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(245, 158, 11, 0.4) !important;
}

.cyphex-admin-wrapper .button-primary:active {
    transform: translateY(0) !important;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3) !important;
}

/* Input focus glow */
.cyphex-admin-wrapper input[type="text"],
.cyphex-admin-wrapper input[type="url"],
.cyphex-admin-wrapper input[type="password"],
.cyphex-admin-wrapper input[type="number"],
.cyphex-admin-wrapper input[type="email"],
.cyphex-admin-wrapper textarea,
.cyphex-admin-wrapper select {
    transition: border-color 0.2s, box-shadow 0.2s !important;
    outline: none !important;
}

.cyphex-admin-wrapper input:focus,
.cyphex-admin-wrapper textarea:focus,
.cyphex-admin-wrapper select:focus {
    border-color: #f59e0b !important;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15) !important;
}

/* Media Library UI Overhaul */
.cyphex_image_hunter_toolbar {
    background: #ffffff !important;
    padding: 24px !important;
    border-radius: 20px !important;
    display: flex !important;
    gap: 30px !important;
    align-items: flex-end !important;
    justify-content: space-between !important;
    border: 1px solid #e2e8f0 !important;
    margin-bottom: 25px !important;
    box-shadow: 0 8px 30px rgba(0,0,0,0.04) !important;
}

.cyphex_image_hunter_label {
    color: #64748b !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 8px !important;
    display: block !important;
}

.cyphex_image_hunter_toolbar input, 
.cyphex_image_hunter_toolbar select {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    height: 40px !important;
    padding: 0 15px !important;
    box-shadow: none !important;
}

.cyphex_image_hunter_checkbox_label {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #475569 !important;
    white-space: nowrap !important;
    cursor: pointer !important;
}

.cyphex_image_hunter_checkbox_label input {
    width: 16px !important;
    height: 16px !important;
    margin: 0 !important;
    accent-color: #f59e0b !important;
}

.cyphex_image_hunter_group {
    display: flex;
    flex-direction: column;
}

#cyphex_image_hunter_results_list {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important;
    gap: 20px !important;
}

.cyphex_image_hunter_attachment .thumbnail {
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    overflow: hidden !important;
    position: relative !important;
    background: #f1f5f9 !important;
}

.cyphex_image_hunter_attachment .thumbnail img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

.cyphex_image_hunter_attachment:hover {
    border-color: #f59e0b !important;
    transform: translateY(-6px) scale(1.02) !important;
    box-shadow: 0 12px 30px rgba(245, 158, 11, 0.15) !important;
}

.cyphex_image_hunter_overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(255,255,255,0.97) 0%, rgba(255,255,255,0.1) 60%, transparent 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 15px;
    opacity: 0;
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.cyphex_image_hunter_attachment:hover .cyphex_image_hunter_overlay {
    opacity: 1;
}

.cyphex_image_hunter_btn_action {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    color: #1e293b !important;
    padding: 8px !important;
    border-radius: 8px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    cursor: pointer;
    text-align: center;
}

.cyphex_image_hunter_btn_action:hover {
    background: #f1f5f9 !important;
    color: #1e293b !important;
}

.cyphex_image_hunter_btn_primary {
    background: #f59e0b !important;
    border: none !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3) !important;
}

.cyphex_image_hunter_btn_primary:hover {
    background: #fbbf24 !important;
    color: #ffffff !important;
}

.cyphex_image_hunter_actions_grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
}

#cyphex_image_hunter_ai_feedback {
    margin-bottom: 20px;
    font-size: 11px;
    color: #f59e0b;
    font-weight: 700;
    font-style: italic;
    background: #fffbeb;
    padding: 8px 15px;
    border-radius: 8px;
    border: 1px solid #fef3c7;
}
.cyphex-logo-template {
    transition: all 0.2s ease !important;
}

.cyphex-logo-template:hover {
    background: #f59e0b !important;
    color: #fff !important;
    border-color: #f59e0b !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.15);
}

.cyphex-pulse-focus {
    animation: cyphexPulseFocus 0.5s ease-in-out;
}

@keyframes cyphexPulseFocus {
    0% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.4); }
    70% { box-shadow: 0 0 0 10px rgba(245, 158, 11, 0); }
    100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); }
}

#cyphex-logo-prompt:focus {
    border-color: #f59e0b !important;
    outline: none !important;
    box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.1) !important;
}
.cyphex-badge-pro {
    background: #f59e0b;
    color: #ffffff;
    padding: 4px 10px;
    border-radius: 99px;
    font-size: 10px;
    font-weight: 800;
}

/* Auto-Hunt Sidebar Actions */
.cyphex-auto-hunt-actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    margin-top: 20px !important;
}

.cyphex-auto-hunt-actions .button-primary {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    margin: 0 !important;
}

#cyphex-auto-hunt-status {
    margin-top: 12px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
}

/* ============================================================
   RESPONSIVE SYSTEM — 5 Breakpoints
   Giant LCD → Standard Laptop → Tablet → Mobile → Mini
   ============================================================ */

/* --- 1. Ultra-Wide / Giant LCD (2000px+) --- */
@media (min-width: 2000px) {
    .cyphex-admin-wrapper {
        max-width: 2000px !important;
        margin: 0 auto !important;
    }
    .cyphex-sidebar {
        width: 320px !important;
        min-width: 320px !important;
    }
    .cyphex-main-area {
        max-width: calc(100% - 320px) !important;
        padding: 50px 80px !important;
    }
    .cyphex-card-header h2,
    .cyphex-card-header h3 {
        font-size: 22px !important;
    }
    #cyphex_image_hunter_results_list {
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
    }
}

/* --- 2. Large LCD (1400px – 1999px) --- */
@media (min-width: 1400px) and (max-width: 1999px) {
    .cyphex-admin-wrapper {
        max-width: 1800px !important;
        margin: 0 auto !important;
    }
    .cyphex-main-area {
        padding: 40px 60px !important;
    }
    #cyphex_image_hunter_results_list {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important;
    }
}

/* --- 3. Standard Laptop (961px – 1399px) --- */
@media (min-width: 961px) and (max-width: 1399px) {
    .cyphex-sidebar {
        width: 240px !important;
        min-width: 240px !important;
    }
    .cyphex-main-area {
        max-width: calc(100% - 240px) !important;
        padding: 30px !important;
    }
    .cyphex-nav-item {
        padding: 10px 14px !important;
        font-size: 13px !important;
    }
    div[style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
}

/* --- 4. Tablet / Small Laptop (601px – 960px) --- */
@media (max-width: 960px) {
    .cyphex-admin-wrapper {
        flex-direction: column !important;
        max-width: 100% !important;
    }

    .cyphex-sidebar {
        width: 100% !important;
        min-width: 100% !important;
        height: auto !important;
        position: relative !important;
        top: 0 !important;
        border-right: none !important;
        border-bottom: 1px solid #e2e8f0 !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
    }

    .cyphex-sidebar-header {
        padding: 16px 20px !important;
        display: flex !important;
        align-items: center !important;
        gap: 14px !important;
        text-align: left !important;
    }

    .cyphex-sidebar-header img {
        margin-bottom: 0 !important;
        width: 44px !important;
        max-width: 44px !important;
    }

    .cyphex-sidebar-header h2 {
        font-size: 16px !important;
    }

    .cyphex-nav {
        flex-direction: row !important;
        overflow-x: auto !important;
        padding: 8px 16px 12px !important;
        gap: 8px !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
    }

    .cyphex-nav::-webkit-scrollbar { display: none !important; }

    .cyphex-nav-item {
        white-space: nowrap !important;
        padding: 8px 14px !important;
        font-size: 13px !important;
        border-radius: 8px !important;
    }

    .cyphex-main-area {
        padding: 20px !important;
        max-width: 100% !important;
    }

    /* Fix cards — remove negative margins */
    .cyphex-card {
        border-radius: 12px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        border-left: 1px solid #e2e8f0 !important;
        border-right: 1px solid #e2e8f0 !important;
    }

    .cyphex-card-header {
        padding: 18px 20px !important;
    }

    .cyphex-card-body {
        padding: 20px !important;
    }

    /* Collapse all 2-column grids to 1 column */
    div[style*="grid-template-columns: 1fr 1fr"],
    div[style*="grid-template-columns: 1fr 1fr 1fr"],
    .cyphex-auto-hunt-options,
    .cyphex-auto-hunt-dimensions,
    .cyphex-auto-hunt-grid,
    #cyphex-auto-hunt-results {
        grid-template-columns: 1fr !important;
        flex-direction: column !important;
    }

    /* Toolbar stacks vertically */
    .cyphex_image_hunter_toolbar {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }

    .cyphex_image_hunter_group {
        flex: none !important;
        width: 100% !important;
    }

    /* Search results grid: 2 cols on tablet */
    #cyphex_image_hunter_results_list {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
        gap: 12px !important;
    }
}

/* --- 5. Mobile / Mini Screen (up to 600px) --- */
@media (max-width: 600px) {
    .cyphex-sidebar-header h2 {
        font-size: 14px !important;
    }

    .cyphex-nav-item {
        font-size: 12px !important;
        padding: 7px 12px !important;
    }

    .cyphex-main-area {
        padding: 12px !important;
    }

    .cyphex-card {
        border-radius: 8px !important;
        margin-bottom: 16px !important;
    }

    .cyphex-card-header {
        padding: 14px 16px !important;
    }

    .cyphex-card-header h2,
    .cyphex-card-header h3 {
        font-size: 15px !important;
    }

    .cyphex-card-body {
        padding: 14px 16px !important;
    }

    /* Single column search results on phones */
    #cyphex_image_hunter_results_list {
        grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)) !important;
        gap: 8px !important;
    }

    /* Stat cards stack on mobile */
    div[style*="display: grid"],
    div[style*="display:grid"] {
        display: block !important;
    }

    /* Buttons go full width */
    .button-hero,
    .button-primary.button-hero {
        width: 100% !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }

    /* Wizard and overlays */
    .cyphex-wizard-modal,
    .cyphex-bulk-progress-modal {
        padding: 20px !important;
    }
}

/* WP Compatibility */
/* ============================================================
   MEDIA LIBRARY UI HARDENING — Universal Theme Compatibility
   Ensures Cyphex Hunt looks perfect on any builder or theme.
   ============================================================ */

.media-frame-content .cyphex_image_hunter_view_container {
    padding: 20px !important;
    background: #f8fafc !important;
    height: 100% !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
}

.cyphex_image_hunter_toolbar {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 14px !important;
    padding: 24px !important;
    margin-bottom: 24px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 20px !important;
    align-items: flex-end !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.04) !important;
}

.cyphex_image_hunter_group {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    min-width: 120px !important;
}

.cyphex_image_hunter_label {
    font-size: 11px !important;
    font-weight: 800 !important;
    color: #475569 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}

.cyphex_image_hunter_toolbar input[type="text"],
.cyphex_image_hunter_toolbar input[type="number"],
.cyphex_image_hunter_toolbar select {
    height: 44px !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 10px !important;
    padding: 0 12px !important;
    font-size: 14px !important;
    background: #f8fafc !important;
    color: #1e293b !important;
    transition: all 0.2s ease !important;
}

.cyphex_image_hunter_toolbar input:focus {
    border-color: #f59e0b !important;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1) !important;
    background: #fff !important;
}

.cyphex-toolbar-options {
    display: flex !important;
    gap: 15px !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    min-height: 44px !important;
}

.cyphex_image_hunter_checkbox_label {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    cursor: pointer !important;
}

.cyphex_image_hunter_checkbox_label input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
    accent-color: #f59e0b !important;
    cursor: pointer !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 4px !important;
    background: #fff !important;
    appearance: auto !important; /* Force browser default to fix 'circle' issue */
}

#cyphex_image_hunter_search_btn {
    background: #f59e0b !important;
    border: none !important;
    border-radius: 12px !important;
    color: #fff !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    padding: 0 25px !important;
    height: 44px !important;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.2) !important;
    transition: all 0.2s !important;
}

#cyphex_image_hunter_search_btn:hover {
    background: #d97706 !important;
    transform: translateY(-1px) !important;
}

/* Grid layout for results */
#cyphex_image_hunter_results_list {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
    gap: 20px !important;
    list-style: none !important;
    padding: 0 !important;
}

/* Modal Z-index and Positioning Fixes */
.cyphex_mask_modal_overlay {
    z-index: 1000000 !important; /* Higher than WP and most builders */
}

/* Pro Lock Badge Universal Style */
.cyphex-locked-btn {
    filter: grayscale(1) !important;
    opacity: 0.6 !important;
    cursor: not-allowed !important;
    position: relative !important;
}

.cyphex-locked-btn::after {
    content: 'PRO';
    position: absolute;
    top: -5px; right: -5px;
    background: #f59e0b;
    color: #fff;
    font-size: 8px;
    padding: 1px 4px;
    border-radius: 4px;
    font-weight: 900;
}

/* --- Cyphex Premium UI Enhancements --- */
select[name="cyphex_ai_engine"] {
    appearance: none !important;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 16px !important;
    padding-right: 40px !important;
    cursor: pointer;
    transition: all 0.2s ease;
}

select[name="cyphex_ai_engine"]:hover {
    border-color: #f59e0b !important;
    background-color: #ffffff !important;
}

select[name="cyphex_ai_engine"]:focus {
    border-color: #f59e0b !important;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1) !important;
    outline: none !important;
}

@media (max-width: 960px) {
    .cyphex_image_hunter_toolbar {
        flex-direction: column !important;
        align-items: stretch !important;
        height: auto !important;
        gap: 16px !important;
    }
    
    .cyphex_image_hunter_group {
        width: 100% !important;
        clear: both !important;
    }

    .cyphex_image_hunter_toolbar input[type="text"],
    .cyphex_image_hunter_toolbar select {
        width: 100% !important;
        min-height: 44px !important;
        height: auto !important;
        box-sizing: border-box !important;
    }
    
    .cyphex-toolbar-options {
        height: auto !important;
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)) !important;
        gap: 10px !important;
    }
}

/**
 * A-Tier Production Responsiveness & Integration Overrides
 */
@media (max-width: 960px) {
	.cyphex_image_hunter_toolbar {
		flex-direction: column !important;
		align-items: stretch !important;
		height: auto !important;
		gap: 12px !important;
		padding: 12px !important;
	}
	
	.cyphex_image_hunter_group {
		width: 100% !important;
		display: flex !important;
		flex-direction: column !important;
		gap: 8px !important;
	}

	.cyphex_image_hunter_toolbar input[type="text"],
	.cyphex_image_hunter_toolbar select,
	.cyphex_image_hunter_toolbar button {
		width: 100% !important;
		min-height: 40px !important;
		height: auto !important;
		margin: 0 !important;
	}
}

/* Ensure full UI color-scheme synchronization with core active admin dashboard colors */
.cyphex-nav-item.active {
	border-left-color: var(--wp-admin-theme-color, #f59e0b) !important;
	color: #ffffff !important;
}

/* --- Cyphex Auto-Hunt Metabox Refactor --- */
#cyphex-auto-hunt-box {
    padding: 5px 0 !important;
}

.cyphex-metabox-desc {
    font-size: 12px !important;
    color: #64748b !important;
    margin-bottom: 15px !important;
    line-height: 1.4 !important;
}

.cyphex-auto-hunt-slots-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    margin-bottom: 15px !important;
}

.cyphex-hunt-slot {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    aspect-ratio: 1 / 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    overflow: hidden !important;
    transition: all 0.2s ease !important;
}

.cyphex-hunt-slot:hover {
    border-color: #f59e0b !important;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.1) !important;
}

.cyphex-slot-toggle {
    position: absolute !important;
    top: 6px !important;
    left: 6px !important;
    z-index: 10 !important;
    margin: 0 !important;
    accent-color: #f59e0b !important;
}

.cyphex-slot-placeholder {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 6px !important;
}

.cyphex-slot-placeholder .dashicons {
    color: #cbd5e1 !important;
    font-size: 20px !important;
    width: 20px !important;
    height: 20px !important;
}

.cyphex-slot-label {
    font-size: 10px !important;
    color: #475569 !important;
    font-weight: 800 !important;
    text-align: center !important;
}

.cyphex-auto-hunt-inputs-grid {
    display: grid !important;
    grid-template-columns: 1.2fr 1fr !important;
    gap: 8px !important;
    margin-bottom: 10px !important;
}

.cyphex-input-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}

.cyphex-small-label {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #1e293b !important;
}

.cyphex-auto-hunt-inputs-grid select,
.cyphex-auto-hunt-inputs-grid input {
    height: 36px !important;
    border-radius: 8px !important;
    border: 1px solid #cbd5e1 !important;
    font-size: 12px !important;
    padding: 0 8px !important;
    width: 100% !important;
}

.cyphex-auto-hunt-options-strip {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin: 15px 0 !important;
    padding: 10px !important;
    background: #f8fafc !important;
    border-radius: 10px !important;
}

.cyphex-auto-hunt-options-strip label {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    cursor: pointer !important;
}

/* --- Cyphex Pro Gating & UI Polish --- */
#cyphex-auto-hunt-box {
    position: relative !important;
    overflow: hidden !important;
}

.cyphex-pro-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 50 !important;
    background: rgba(255, 255, 255, 0.4) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 20px !important;
}

.cyphex-pro-overlay-content {
    background: #ffffff !important;
    padding: 25px 20px !important;
    border-radius: 20px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1) !important;
    border: 1px solid #e2e8f0 !important;
    max-width: 240px !important;
}

.cyphex-pro-overlay-content .dashicons-lock {
    font-size: 32px !important;
    width: 32px !important;
    height: 32px !important;
    color: #f59e0b !important;
    margin-bottom: 10px !important;
}

.cyphex-pro-overlay-content h4 {
    margin: 0 0 8px 0 !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    color: #1e293b !important;
    letter-spacing: 0.05em !important;
}

.cyphex-pro-overlay-content p {
    font-size: 12px !important;
    color: #64748b !important;
    margin: 0 0 18px 0 !important;
    line-height: 1.4 !important;
}

.cyphex-upgrade-btn {
    width: 100% !important;
    height: 40px !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
    background: #f59e0b !important;
    border: none !important;
}

.cyphex-auto-hunt-slots-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)) !important;
    gap: 12px !important;
}

.cyphex-auto-hunt-inputs-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)) !important;
    gap: 10px !important;
}

.cyphex-blurred {
    filter: blur(2px) grayscale(20%) !important;
    opacity: 0.6 !important;
    pointer-events: none !important;
    user-select: none !important;
}