@import url(https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Source+Sans+3:wght@400;500;600&display=swap);
.wp-color-online-wrapper {
    /* Refined color palette with more premium gradations */
    --wpco-bg-canvas: #F8F8FA; /* Subtle off-white for canvas background */
    --wpco-bg-light: #FFFFFF;
    --wpco-bg-panel: #F5F7FA; /* Slightly bluer gray for panels */
    
    /* Richer border colors */
    --wpco-border-subtle: #E0E4E8; /* More blue-tinted border */
    --wpco-border-medium: #C8D0D9;
    
    /* Improved text colors with proper hierarchy */
    --wpco-text-primary: #1A2433; /* Darker, richer text */
    --wpco-text-secondary: #4A5568;
    --wpco-text-muted: #718096;
    
    /* Enhanced accent colors */
    --wpco-accent-blue: #3B82F6; /* Richer blue */
    --wpco-accent-blue-dark: #2563EB;
    --wpco-accent-blue-light: #EBF5FF;
    
    /* Add secondary accent for visual interest */
    --wpco-accent-purple: #8B5CF6;
    --wpco-accent-purple-light: #F5F3FF;
    
    /* Border Radius */
    --wpco-border-radius-sm: 4px;
    --wpco-border-radius-md: 6px;
    --wpco-border-radius-lg: 8px;
    
    /* Premium shadow layers */
    --wpco-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);
    --wpco-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
    --wpco-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08);
    
    /* Focus Ring */
    --wpco-focus-ring-width: 2px;
    --wpco-focus-ring-color: rgba(59, 130, 246, 0.6);
    --wpco-focus-ring-offset: 2px;
    
    /* Typography */
    --wpco-font-sans: 'Inter', system-ui, -apple-system, sans-serif;
    --wpco-font-size-xs: 12px;
    --wpco-font-size-sm: 13px;
    --wpco-font-size-base: 15px;
    --wpco-font-size-lg: 18px;
    --wpco-font-weight-normal: 400;
    --wpco-font-weight-medium: 500;
    --wpco-font-weight-bold: 600;
    --wpco-line-height-base: 1.5;
    --wpco-line-height-tight: 1.25;
    
    /* Animation Timing */
    --wpco-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --wpco-transition-medium: 250ms cubic-bezier(0.4, 0, 0.2, 1);
    --wpco-transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Global Reset */
.wpco-modal, 
.wpco-modal * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: var(--wpco-font-sans);
}

/* Ensure proper font inheritance throughout the app */
.wpco-modal button,
.wpco-modal input,
.wpco-modal select,
.wpco-modal textarea {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

/* General start coloring button styling moved to main button section below */

/* Prevent scrolling on body when modal is open */
/* Removed body.coloring-modal-open - handled by ColoringHub */

/* Space held state for canvas panning */
/* Removed body.wpco-space-held - handled by ColoringHub */

/* Hide Color Online buttons on mobile devices */
@media (max-width: 767px) {
    .wp-color-online-button {
        display: none !important;
    }
}

/* Apply base font styles (e.g., to the modal container later) */
.wpco-modal {
   font-family: var(--wpco-font-sans); 
   color: var(--wpco-text-primary);
   font-size: var(--wpco-font-size-base);
   line-height: var(--wpco-line-height-base);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
}

/* Layout structure fixes */
.wpco-main-layout {
  display: flex !important; 
  flex-direction: column !important;
  width: 100% !important;
  height: 100% !important;
}

.wpco-central-area {
  display: flex !important;
  flex-grow: 1 !important;
  overflow: hidden !important; /* Prevent content overflow */
}

.wpco-top-bar-placeholder,
.wpco-left-toolbar-placeholder {
  display: block !important; /* Ensure these are displayed */
}

/* WP Color Online Frontend Styles */

.wpco-image-wrapper {
    text-align: center; /* Center the inline-block children (image and button) */
    margin-bottom: 15px; /* Optional: space below the wrapper */
}

/* Base button styles - removed duplicate properties that override our new default */
.wp-color-online-button {
    margin-top: 12px;
    text-transform: none;
    letter-spacing: normal;
}

/* Default Style: Subtle Purple (new default) */
.wp-color-online-button,
.wpco-image-wrapper .wp-color-online-button,
button.wp-color-online-button {
    display: inline-block !important;
    padding: 10px 24px;
    background-color: #7B68EE;
    color: #ffffff;
    border: none;
    border-radius: 6px;
    font-size: 17px;
    font-weight: 600;
    cursor: pointer !important;
    text-decoration: none !important;
    transition: all 0.2s ease;
    font-family: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    letter-spacing: 0.2px;
    line-height: 1.4;
    box-shadow: 0 2px 4px rgba(123, 104, 238, 0.15);
    margin-top: 12px !important;
    vertical-align: middle !important;
}

.wp-color-online-button:hover,
.wpco-image-wrapper .wp-color-online-button:hover,
button.wp-color-online-button:hover {
    background-color: #6B5EDE;
    color: #ffffff;
    box-shadow: 0 3px 10px rgba(123, 104, 238, 0.25), 0 2px 4px rgba(0, 0, 0, 0.1);
    transform: none;
}

.wp-color-online-button:focus {
    outline: none;
}

.wp-color-online-button:focus-visible {
    outline: 2px solid #8B5CF6;
    outline-offset: 2px;
}

.wp-color-online-button:active {
    background-color: #5B4ECE;
    transform: none;
    box-shadow: 0 1px 2px rgba(123, 104, 238, 0.2);
}


/* No hover effects */
.wp-color-online-button.wpco-no-hover:hover {
    transform: none !important;
    box-shadow: inherit !important;
    background-color: inherit !important;
    color: inherit !important;
    border-color: inherit !important;
}

/* Main CSS for WP Color Online Plugin */

.wpco-backdrop {
    background-color: rgba(15, 23, 42, 0.75);
    backdrop-filter: blur(4px);
}

/* Main Layout Structure */
.wpco-main-layout {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    background-color: var(--wpco-bg-light);
}

.wpco-central-area {
    display: flex;
    flex-grow: 1;
    overflow: hidden; /* Prevent content overflow */
}

.wpco-canvas-area {
    flex-grow: 1;
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background-color: var(--wpco-bg-canvas);
}

/* Ensure canvas container fills the available space */
.wpco-canvas-container {
    flex-grow: 1;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--wpco-bg-canvas);
}

/* Loading indicator */
.wpco-loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    color: var(--wpco-text-secondary);
}

.wpco-loading::before {
    content: "";
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 3px solid rgba(59, 130, 246, 0.2);
    border-top-color: var(--wpco-accent-blue);
    animation: wpco-spin 1s ease-in-out infinite;
}

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

/* Button base styles */
.wpco-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--wpco-border-radius-md);
    font-weight: var(--wpco-font-weight-medium);
    transition: all var(--wpco-transition-fast);
    cursor: pointer;
    padding: 8px 16px;
    outline: none;
}

.wpco-button:focus-visible {
    outline: var(--wpco-focus-ring-width) solid var(--wpco-focus-ring-color);
    outline-offset: var(--wpco-focus-ring-offset);
}

.wpco-button-primary {
    background-color: var(--wpco-accent-blue);
    color: white;
    border: none;
}

.wpco-button-primary:hover {
    background-color: var(--wpco-accent-blue-dark);
    box-shadow: var(--wpco-shadow-md);
}

.wpco-button-secondary {
    background-color: white;
    color: var(--wpco-text-primary);
    border: 1px solid var(--wpco-border-medium);
}

.wpco-button-secondary:hover {
    border-color: var(--wpco-accent-blue);
    color: var(--wpco-accent-blue);
    background-color: var(--wpco-accent-blue-light);
}

/* Component Placeholders - initially hidden */
.wpco-properties-bar-placeholder,
.wpco-color-panel-placeholder,
.wpco-main-menu-placeholder,
.wpco-feedback-modal-placeholder {
    display: none; /* Hidden by default */
}

.wpco-zoom-controls-placeholder {
    position: absolute;
    bottom: 16px;
    right: 16px;
    z-index: 10;
}

.wpco-notifications-placeholder {
    position: absolute;
    top: 60px;
    right: 16px;
    z-index: 100;
}

/* Canvas focus outline - visible when canvas has focus */
.canvas-container:focus-within {
    outline: var(--wpco-focus-ring-width) solid var(--wpco-focus-ring-color);
    outline-offset: var(--wpco-focus-ring-offset);
}

/* Remove outline and box-shadow from canvas containers during space-drag */
/* Removed body.wpco-space-held selectors - handled within ColoringHub modal */

/* Responsive adjustments */
@media (max-width: 768px) {
    .wp-color-online-wrapper {
        --wpco-font-size-base: 14px;
    }
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    *, ::before, ::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
} 
/* Main ColoringHub Styles */

:root {
    --ch-bg-primary: #fefcfb;
    --ch-bg-secondary: #ffffff;
    --ch-bg-tertiary: #faf8f7;
    --ch-text-primary: #2d2926;
    --ch-text-secondary: #716b64;
    --ch-text-tertiary: #a09890;
    --ch-accent: #ff6b6b;
    --ch-accent-hover: #ff5555;
    --ch-accent-soft: #ffebeb;
    --ch-accent-secondary: #4ecdc4;
    --ch-accent-tertiary: #ffe66d;
    --ch-pink: #f9a8d4;
    --ch-border: #e8e2dc;
    --ch-border-light: #f0ebe6;
    --ch-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    --ch-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.1);
    --ch-shadow-float: 0 8px 24px rgba(0, 0, 0, 0.12);
    --ch-danger: #e74c3c;
    --ch-radius: 10px;
    --ch-radius-small: 6px;
    --ch-radius-large: 16px;
    --ch-transition: all 0.15s ease;
    
    /* Additional variables */
    --ch-accent-dark: #ff4444;
    --ch-border-color: #e8e2dc;
    --ch-border-hover: #d4cec8;
    --ch-shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.15);
    --ch-warning-bg: #FFF9E6;
    --ch-warning-border: #FFE082;
    --ch-warning-icon: #FFA726;
    --ch-warning-text: #795548;
}



/* Component styles are imported separately in index.ts due to webpack css-loader limitations */

/* Scoped Reset - Only affects elements inside ColoringHub */
.coloringhub-modal *,
.coloringhub-backdrop * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


/* CSS Variables - Namespaced to prevent conflicts */
.coloringhub-modal {
    /* CSS variables moved to :root */
}

/* Prevent body scroll when modal is open */
/* Removed body.coloringhub-open - handled by backdrop */

/* Modal Backdrop */
.coloringhub-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999999;
    opacity: 0;
    transition: opacity 0.3s ease-out;

    /* Prevent scrolling when modal is open */
    position: fixed;
    overflow: hidden;
}

.coloringhub-backdrop.active {
    opacity: 1;
}

/* Main Modal */
.coloringhub-modal {
    /* CSS Isolation - prevent inheritance from parent page */
    all: initial;
    
    /* Required positioning and display properties */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 95vw;
    height: 95vh;
    max-width: 1600px;
    max-height: 900px;
    background: var(--ch-bg-primary);
    border-radius: var(--ch-radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: var(--ch-shadow-float);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--ch-text-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    z-index: 1000000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
}

/* Font smoothing for better text rendering */
.coloringhub-modal {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.coloringhub-modal.active {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
}

/* App Container (inside the modal) */
.coloringhub-modal .app-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    background: var(--ch-bg-primary);
    border-radius: var(--ch-radius);
    overflow: hidden;
}

/* Main Container */
.coloringhub-modal .main-container {
    flex: 1;
    display: flex;
    overflow: hidden;
}

/* Main Content */
.coloringhub-modal .main-content {
    flex: 1;
    display: flex;
    overflow: hidden;
}

/* Header Bar Container */
.coloringhub-modal .header-bar-container {
    /* Inherit styles from .header-bar */
}

/* Animation keyframes */
@keyframes slideUp {
    from {
        transform: translateX(-50%) translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateX(-50%) translateY(0);
        opacity: 1;
    }
}

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

/* Focus visible for accessibility */
.coloringhub-modal *:focus-visible {
    outline: 2px solid var(--ch-text-tertiary);
    outline-offset: 2px;
}

/* ========================================
   GLOBAL FONT FAMILY FOR COLORINGHUB
   Ensures consistent typography across all elements
   ======================================== */

/* Apply the designed font family to the entire modal and BaseModal */
.coloringhub-modal,
.colorhub-modal-base,
.colorhub-modal-base * {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* Ensure all child elements inherit the font */
.coloringhub-modal * {
    font-family: inherit;
}

/* ========================================
   COMPREHENSIVE FONT SPECIFICATIONS
   No WordPress inheritance - all explicit
   ======================================== */

/* Global base font for modal */
.coloringhub-modal {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    color: var(--ch-text-primary) !important;
}

/* Modal body default text - explicit 14px */
.coloringhub-modal .modal-body {
    font-size: 14px !important;
    font-weight: 400 !important;
    color: var(--ch-text-secondary) !important;
    line-height: 1.6 !important;
}

.coloringhub-modal .modal-body p {
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.6 !important;
    color: var(--ch-text-secondary) !important;
}

/* Tab buttons - using 14px like other secondary buttons */
.coloringhub-modal .tab-btn {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--ch-text-secondary) !important;
}

.coloringhub-modal .tab-btn.active {
    color: var(--ch-accent) !important;
}

/* Help modal content - 14px for readability */
.coloringhub-modal .help-content {
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.6 !important;
    color: var(--ch-text-secondary) !important;
}

.coloringhub-modal .help-section {
    font-size: 14px !important;
}

.coloringhub-modal .help-section p {
    font-size: 14px !important;
    font-weight: 400 !important;
}

/* Tool button labels - explicit colors */
.coloringhub-modal .btn-label {
    font-size: 9px !important;
    font-weight: 500 !important;
    color: var(--ch-text-secondary) !important;
}

.coloringhub-modal .tool-btn.active .btn-label {
    color: var(--ch-accent) !important;
}

/* All input labels - consistent 11px */
.coloringhub-modal label {
    font-size: 11px !important;
    font-weight: 500 !important;
    color: var(--ch-text-secondary) !important;
}

/* Recent colors label - explicit size */
.coloringhub-modal .recent-label {
    font-size: 9px !important;
    font-weight: 500 !important;
    color: var(--ch-text-tertiary) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
}

/* Section titles - explicit size */
.coloringhub-modal .section-title {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--ch-text-primary) !important;
}

/* All modal buttons default - 14px */
.coloringhub-modal button {
    font-size: 14px !important;
    font-weight: 500 !important;
}

/* Override for specific smaller buttons */
.coloringhub-modal .beta-feedback-btn,
.coloringhub-modal .exit-btn {
    font-size: 11px !important;
    font-weight: 500 !important;
}

/* Import/Export/Delete buttons - standard 14px */
.coloringhub-modal .import-palette-btn,
.coloringhub-modal .export-btn,
.coloringhub-modal .delete-btn,
.coloringhub-modal .btn-secondary,
.coloringhub-modal .btn-danger {
    font-size: 14px !important;
    font-weight: 500 !important;
}

/* Tooltips - small readable text */
.coloringhub-modal .tooltip {
    font-size: 10px !important;
    font-weight: 400 !important;
    color: white !important;
}

/* Progress/status text */
.coloringhub-modal .progress-counter,
.coloringhub-modal .capacity-indicator,
.coloringhub-modal .storage-warning {
    font-size: 12px !important;
    font-weight: 400 !important;
}

/* Confirm dialog text */
.coloringhub-modal .confirm-title {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: var(--ch-text-primary) !important;
}

.coloringhub-modal .confirm-message {
    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    color: var(--ch-text-secondary) !important;
}

/* Input fields - consistent sizing */
.coloringhub-modal input[type="text"],
.coloringhub-modal input[type="number"],
.coloringhub-modal select,
.coloringhub-modal textarea {
    font-size: 14px !important;
    font-weight: 400 !important;
    color: var(--ch-text-primary) !important;
}

/* Hex input special case */
.coloringhub-modal .hex-input,
.coloringhub-modal #hexInput {
    font-size: 14px !important;
    font-weight: 400 !important;
    font-family: 'SF Mono', 'Consolas', 'Menlo', monospace !important;
}

/* No colors text */
.coloringhub-modal .no-colors-text,
.coloringhub-modal .no-recent-colors {
    font-size: 12px !important;
    font-weight: 400 !important;
    font-style: italic !important;
    color: var(--ch-text-tertiary) !important;
}

/* Badge text */
.coloringhub-modal .coming-soon::after {
    font-size: 8px !important;
    font-weight: 600 !important;
}

.coloringhub-modal .palette-recent-badge {
    font-size: 9px !important;
    font-weight: 600 !important;
}

/* Texture labels */
.coloringhub-modal .texture-label {
    font-size: 10px !important;
    font-weight: 400 !important;
    color: var(--ch-text-secondary) !important;
}

/* All heading elements in modals */
.coloringhub-modal h1 {
    font-size: 24px !important;
    font-weight: 600 !important;
}

.coloringhub-modal h2 {
    font-size: 20px !important;
    font-weight: 600 !important;
}

.coloringhub-modal h3 {
    font-size: 16px !important;
    font-weight: 600 !important;
}

.coloringhub-modal h4 {
    font-size: 14px !important;
    font-weight: 600 !important;
}

/* Notification text */
.coloringhub-modal .notification {
    font-size: 13px !important;
    font-weight: 400 !important;
}

/* Warning text */
.coloringhub-modal .warning-text {
    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
}

/* Capacity text */
.coloringhub-modal .capacity-current {
    font-size: 18px !important;
    font-weight: 600 !important;
}

.coloringhub-modal .capacity-total {
    font-size: 16px !important;
    font-weight: 400 !important;
}

.coloringhub-modal .capacity-label {
    font-size: 13px !important;
    font-weight: 400 !important;
}

/* Beta Feedback Button - matches beta UX design spec */
.coloringhub-modal .beta-feedback-btn {
    font-size: 11px !important;
    font-weight: 500 !important;
}

/* Exit to Gallery Button - matches beta UX design spec */
.coloringhub-modal .exit-btn {
    font-size: 11px !important;
    font-weight: 500 !important;
}

/* Reset buttons for brush/eraser settings */
.coloringhub-modal .reset-btn {
    font-size: 11px !important;
    font-weight: 500 !important;
    color: var(--ch-text-secondary) !important;
    background: none !important;
    border: none !important;
    padding: 4px 8px !important;
    cursor: pointer !important;
    transition: color 0.2s ease !important;
}

.coloringhub-modal .reset-btn:hover {
    color: var(--ch-accent) !important;
}

/* Palette modal title - proper size */
.coloringhub-modal .palette-modal-title {
    font-size: 18px !important;
    font-weight: 600 !important;
    color: var(--ch-text-primary) !important;
    margin: 30px 30px 20px !important;
    text-align: left !important;
}

/* ========================================
   THEME INTERFERENCE PREVENTION
   Prevent WordPress themes from applying
   their button:active styles (purple/dark backgrounds)
   ======================================== */

/* Prevent theme active state colors on ALL buttons */
.coloringhub-modal button:active,
.coloringhub-modal .btn:active,
.coloringhub-modal .btn-primary:active,
.coloringhub-modal .btn-secondary:active,
.coloringhub-modal .header-control-btn:active,
.coloringhub-modal .modal-close-x:active,
.coloringhub-modal .zoom-btn:active,
.coloringhub-modal .undo-btn:active,
.coloringhub-modal .redo-btn:active,
.coloringhub-modal .tool-btn:active,
.coloringhub-modal .texture-btn:active,
.coloringhub-modal .category-pill:active,
.coloringhub-modal .palette-selector-btn:active,
.coloringhub-modal .color-swatch:active,
.coloringhub-modal .reset-zoom-btn:active,
.coloringhub-modal .setting-reset:active,
.coloringhub-modal .import-palette-btn:active,
.coloringhub-modal .palette-action-btn:active,
.coloringhub-modal .custom-palette-selector:active,
.coloringhub-modal .clear-canvas-btn:active,
.coloringhub-modal .eyedropper-btn:active,
.coloringhub-modal .close-btn:active,
.colorhub-modal-base button:active,
.colorhub-modal-base .colorhub-modal-close:active,
.colorhub-feedback-modal button:active,
.colorhub-feedback-modal .colorhub-modal-close:active {
    background-color: inherit !important;
    background-image: none !important;
}

/* Exit button maintains its normal appearance on focus */
.coloringhub-modal .exit-btn:focus {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 1px solid var(--ch-border-light) !important;
    color: var(--ch-text-secondary) !important;
}

/* Help button (header-control-btn) maintains its normal appearance on focus */
.coloringhub-modal .header-control-btn:focus {
    background: var(--ch-bg-tertiary) !important;
    background-color: var(--ch-bg-tertiary) !important;
    background-image: none !important;
    border: 1px solid var(--ch-border-light) !important;
    color: var(--ch-text-secondary) !important;
}

/* Tool buttons (undo, redo, clear canvas, eyedropper) maintain transparent background on focus */
.coloringhub-modal .tool-btn:focus,
.coloringhub-modal .action-btn:focus {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 1px solid transparent !important;
    color: #2d2926 !important;
}

/* CRITICAL: Preserve active state for tool buttons even when focused */
.coloringhub-modal .tool-btn.active:focus {
    background: var(--ch-accent-soft) !important;
    border-color: var(--ch-accent) !important;
    color: var(--ch-accent) !important;
}

/* Keep tool button SVG colors when active and focused */
.coloringhub-modal .tool-btn.active:focus svg {
    stroke: var(--ch-accent) !important;
}

/* Color picker button maintains its normal appearance on focus */
/* REMOVED - These rules were making the button invisible on focus
.coloringhub-modal .color-picker-btn:focus {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
}
*/

/* Custom palette selector - first define its normal state if not defined elsewhere */
.coloringhub-modal .custom-palette-selector {
    background: var(--ch-bg-secondary);
    border: 1px solid var(--ch-border-light);
    color: var(--ch-text-primary);
}

/* Custom palette selector maintains its normal appearance on focus */
.coloringhub-modal .custom-palette-selector:focus {
    background: var(--ch-bg-secondary) !important;
    background-color: var(--ch-bg-secondary) !important;
    background-image: none !important;
    border: 1px solid var(--ch-border-light) !important;
    color: var(--ch-text-primary) !important;
    outline: none !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Ensure palette selector content stays visible */
.coloringhub-modal .custom-palette-selector:focus span,
.coloringhub-modal .custom-palette-selector:focus svg,
.coloringhub-modal .custom-palette-selector:focus::after {
    color: var(--ch-text-primary) !important;
    fill: var(--ch-text-primary) !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Also protect any button that might be the palette opener */
.coloringhub-modal button[class*="palette"]:focus {
    background: var(--ch-bg-secondary) !important;
    background-color: var(--ch-bg-secondary) !important;
    background-image: none !important;
    color: var(--ch-text-primary) !important;
    opacity: 1 !important;
}

/* Ensure content of palette buttons stays visible */
.coloringhub-modal button[class*="palette"]:focus span,
.coloringhub-modal button[class*="palette"]:focus svg {
    color: var(--ch-text-primary) !important;
    fill: var(--ch-text-primary) !important;
    opacity: 1 !important;
}

/* Eyedropper button - ensure it stays visible with proper styling */
.coloringhub-modal .eyedropper-btn:focus,
.coloringhub-modal .colorhub-icon-btn.eyedropper-btn:focus,
.color-picker-modal .eyedropper-btn:focus,
.colorhub-modal-content .eyedropper-btn:focus,
.colorhub-modal-content .colorhub-icon-btn.eyedropper-btn:focus {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 1px solid var(--ch-border-light) !important;
    outline: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    color: #2d2926 !important;
}

/* Ensure eyedropper icon stays visible */
.coloringhub-modal .eyedropper-btn:focus svg,
.coloringhub-modal .colorhub-icon-btn.eyedropper-btn:focus svg,
.color-picker-modal .eyedropper-btn:focus svg,
.colorhub-modal-content .eyedropper-btn:focus svg,
.colorhub-modal-content .colorhub-icon-btn.eyedropper-btn:focus svg {
    fill: var(--ch-text-secondary) !important;
    stroke: var(--ch-text-secondary) !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* ColorHub icon buttons (includes color picker, eyedropper, dice) */
.coloringhub-modal .colorhub-icon-btn:focus {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    color: #2d2926 !important;
}

/* Fix for color picker icon - preserve gradient on focus */
.coloringhub-modal .colorhub-icon-btn.picker-btn:focus svg .ring {
    stroke: url(#colorhub-rainbow) !important;
}

.coloringhub-modal .colorhub-icon-btn.picker-btn:focus {
    background: transparent !important;
    border: none !important;
}


/* Specific active states for themed buttons */
.coloringhub-modal .custom-palette-selector:active {
    background: var(--ch-bg-tertiary) !important;
}

/* Final catch-all to prevent any missed buttons from getting theme styles */
.coloringhub-modal button:focus:not([class*="btn-primary"]):not([class*="btn-secondary"]):not([class*="btn-danger"]) {
    /* Prevent the dark theme background but let specific rules above handle the actual styling */
    background-image: none !important;
}

.coloringhub-modal .clear-canvas-btn:active {
    background: var(--ch-bg-tertiary) !important;
}

.coloringhub-modal .eyedropper-btn:active {
    background: var(--ch-bg-tertiary) !important;
}

/* Specific active state overrides for elements that need custom backgrounds */
.coloringhub-modal .modal-close-x:active {
    background: #f5f5f5 !important;
}

.coloringhub-modal .header-control-btn:active {
    background: var(--ch-bg-tertiary) !important;
    transform: translateY(0);
}

.coloringhub-modal .btn-primary:active {
    background: var(--ch-accent-hover) !important;
}

.coloringhub-modal .btn-secondary:active {
    background: var(--ch-bg-tertiary) !important;
}

.coloringhub-modal .tool-btn:active,
.coloringhub-modal .texture-btn:active {
    background: var(--ch-bg-secondary) !important;
}

.coloringhub-modal .category-pill:active {
    background: var(--ch-bg-secondary) !important;
}

.coloringhub-modal .category-pill.active:active {
    background: var(--ch-accent) !important;
}

.coloringhub-modal .palette-selector-btn:active {
    background: rgba(255, 255, 255, 0.8) !important;
}

/* Ensure help button in tools sidebar doesn't get purple */
.coloringhub-modal .help-btn:active {
    background: var(--ch-bg-secondary) !important;
}

/* Print Styles */
@media print {
    .coloringhub-modal {
        background: white;
    }
}

/* Brush Section */
.brush-section {
    padding: 16px;
    background: var(--ch-bg-tertiary);
}

/* Brush Controls */
.brush-control {
    margin-bottom: 14px;
    width: 100%;
}

.brush-control label {
    font-size: 11px;
    font-weight: 500;
    color: var(--ch-text-secondary);
    display: block;
    margin-bottom: 6px;
}

.slider-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.slider-group {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 140px;
    height: 4px;
    background: var(--ch-border);
    border-radius: 2px;
    outline: none;
    cursor: pointer;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    background: var(--ch-text-primary);
    border: 2px solid white;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    transition: var(--ch-transition);
}

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

.range-value {
    font-size: 11px;
    font-weight: 500;
    color: var(--ch-text-primary);
    min-width: 30px;
    text-align: right;
}

/* Texture Grid - 2x4 layout for 8 brushes */
.brush-textures {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    margin-bottom: 16px;
}

.texture-btn {
    aspect-ratio: 1;
    border: 1px solid var(--ch-border-light);
    background: var(--ch-bg-secondary);
    border-radius: var(--ch-radius-small);
    cursor: pointer;
    transition: var(--ch-transition);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    position: relative;
    font-size: 20px;
}

.texture-btn:hover {
    border-color: var(--ch-border);
    background: white;
}

.texture-btn.active {
    border-color: var(--ch-accent);
    background: var(--ch-accent-soft);
}

.texture-btn .texture-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.texture-btn .texture-icon svg {
    width: 100%;
    height: 100%;
    transition: var(--ch-transition);

    stroke: #2d2926;
    color: #2d2926;}

.texture-btn:hover .texture-icon svg {
    transform: scale(1.1);
}

.texture-btn.active .texture-icon svg {
    stroke: var(--ch-accent);
    color: var(--ch-accent);
}

/* Highlighter Colors */
.highlighter-colors {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-top: 16px;
}

.highlighter-colors .color-btn {
    width: 44px;
    height: 44px;
    border: 2px solid var(--ch-border-light);
    border-radius: var(--ch-radius-small);
    cursor: pointer;
    transition: var(--ch-transition);
    position: relative;
}

.highlighter-colors .color-btn:hover {
    transform: scale(1.1);
    border-color: var(--ch-border);
}

.highlighter-colors .color-btn.active {
    border-color: var(--ch-accent);
    box-shadow: 0 0 0 3px var(--ch-accent-soft);
}

.highlighter-colors .color-btn.active::after {
    content: '✓';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: bold;
    color: var(--ch-text-primary);
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8);
}

.highlighter-colors .highlighter-yellow {
    background: #FFEB3B;
}

.highlighter-colors .highlighter-pink {
    background: #FF4081;
}

.highlighter-colors .highlighter-green {
    background: #4CAF50;
}

/* Header Bar */
.coloringhub-modal .header-bar {
    background: var(--ch-bg-secondary);
    border-bottom: 1px solid var(--ch-border-light);
    padding: 6px 12px;
    z-index: 100;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

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

.header-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Beta feedback button */
.beta-feedback-btn {
    background: var(--ch-bg-tertiary);
    color: var(--ch-text-secondary);
    padding: 5px 10px;
    border-radius: 14px;
    font-size: 11px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    transition: var(--ch-transition);
    border: 1px solid var(--ch-border);
}

.beta-feedback-btn:hover {
    background: var(--ch-bg-tertiary);
    border-color: var(--ch-border);
    color: var(--ch-text-primary);
}

.beta-feedback-btn svg {
    width: 12px;
    height: 12px;
    fill: currentColor;
}

/* Header controls */
.header-control-btn {
    width: 28px;
    height: 28px;
    border: 1px solid var(--ch-border-light);
    background: var(--ch-bg-tertiary);
    border-radius: var(--ch-radius-small);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--ch-transition);
    color: var(--ch-text-secondary);
    position: relative;
}

.header-control-btn:hover {
    background: var(--ch-bg-primary);
    border-color: var(--ch-border);
    color: var(--ch-text-primary);
}

.header-control-btn:active {
    transform: translateY(0);
}

.header-control-btn:focus-visible {
    outline: 2px solid var(--ch-border);
    outline-offset: 1px;
}

.header-control-btn svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
}

/* Delete button */
.header-control-btn.delete {
    color: #2d2926;
}

.header-control-btn.delete:hover {
    color: #e74c3c;
    background: #fee;
    border-color: #e74c3c;
}

/* Zoom controls */
.zoom-controls {
    display: flex;
    align-items: center;
    gap: 4px;
    background: var(--ch-bg-tertiary);
    padding: 2px;
    border-radius: var(--ch-radius-small);
    border: 1px solid var(--ch-border-light);
    /* min-width removed to prevent gap */
}

.zoom-display {
    padding: 0 8px;
    font-size: 11px;
    color: var(--ch-text-secondary);
    min-width: 50px; /* Increased to handle "200%" */
    text-align: center;
    font-weight: 600;
    font-family: monospace; /* Prevent width changes */
}

/* Zoom slider */
.zoom-slider-container {
    width: 120px;
    display: flex;
    align-items: center;
    padding: 0 8px;
}

.zoom-slider {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 100%;
    height: 4px;
    background: linear-gradient(to right, var(--ch-bg-primary) 0%, var(--ch-border-light) 100%);
    border-radius: 2px;
    outline: none;
    cursor: pointer;
    margin: 2px 0 0 0; /* Small top margin to compensate for browser rendering quirks */
    padding: 0;
    border: 0;
    display: block;
}

/* Force all browsers to render consistently */
.zoom-slider::-ms-track {
    width: 100%;
    height: 4px;
    cursor: pointer;
    background: transparent;
    border-color: transparent;
    color: transparent;
}

.zoom-slider::-webkit-slider-runnable-track {
    -webkit-appearance: none;
    height: 4px;
    background: linear-gradient(to right, var(--ch-bg-primary) 0%, var(--ch-border-light) 100%);
    border-radius: 2px;
}

.zoom-slider::-moz-range-track {
    height: 4px;
    background: linear-gradient(to right, var(--ch-bg-primary) 0%, var(--ch-border-light) 100%);
    border-radius: 2px;
}

.zoom-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    background: white;
    border: 2px solid var(--ch-accent);
    border-radius: 50%;
    cursor: grab;
    transition: var(--ch-transition);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.zoom-slider::-webkit-slider-thumb:hover {
    transform: scale(1.1);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.zoom-slider::-webkit-slider-thumb:active {
    cursor: grabbing;
    transform: scale(0.95);
}

.zoom-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    background: white;
    border: 2px solid var(--ch-accent);
    border-radius: 50%;
    cursor: grab;
    transition: var(--ch-transition);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Tooltip */
.tooltip {
    position: absolute;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 5px 8px;
    border-radius: 4px;
    font-size: 10px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s;
    z-index: 1000001;
    left: 60px;
    top: 50%;
    transform: translateY(-50%);
}

.tool-btn:hover .tooltip,
.action-btn:hover .tooltip,
.header-control-btn:hover .tooltip {
    opacity: 1;
}

.exit-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    font-size: 11px;
    font-weight: 500;
    color: var(--ch-text-secondary);
    background: transparent;
    border: 1px solid var(--ch-border-light);
    border-radius: var(--ch-radius-small);
    cursor: pointer;
    transition: var(--ch-transition);
}

.exit-btn:hover {
    background: var(--ch-bg-tertiary);
    border-color: var(--ch-border);
    color: var(--ch-text-primary);
}

.exit-btn svg {
    width: 12px;
    height: 12px;
}

/* Print Styles */
@media print {
    .header-bar {
        display: none !important;
    }
}

/* Left Sidebar */
.tools-sidebar {
    width: 60px;
    background: var(--ch-bg-secondary);
    border-right: 1px solid var(--ch-border-light);
    display: flex;
    flex-direction: column;
    padding: 8px 0;
    gap: 6px;
    z-index: 50;
}

.sidebar-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 0 6px;
}

.tool-btn, .action-btn {
    width: 48px;
    height: 48px;
    border: 1px solid transparent;
    background: transparent;
    border-radius: var(--ch-radius);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    transition: var(--ch-transition);
    position: relative;

    color: #2d2926; /* Icon color for non-active state - primary text */}

.tool-btn:hover, .action-btn:hover {
    background: var(--ch-bg-tertiary);
    border-color: var(--ch-border-light);
}

.tool-btn:active:not(.coming-soon), .action-btn:active {
    transform: scale(0.95);
}
/* Override theme button active states */
.coloringhub-modal .tool-btn:active:not(.coming-soon),
.coloringhub-modal .action-btn:active,
.coloringhub-modal .header-control-btn:active,
.coloringhub-modal .texture-btn:active {
    background-color: var(--ch-bg-secondary);
    transform: scale(0.95);
}

/* Ensure help button doesn't get black background */
.coloringhub-modal .header-control-btn[title="Help"]:active {
    background-color: var(--ch-bg-secondary);
}

.tool-btn:focus-visible, .action-btn:focus-visible {
    outline: 2px solid var(--ch-border);
    outline-offset: 1px;
    background: var(--ch-bg-tertiary);
}

.tool-btn.active {
    background: var(--ch-accent-soft);
    border-color: var(--ch-accent);
    color: var(--ch-accent);
}
/* Ensure non-active tool icons are visible */
.tool-btn:not(.active) svg,
.action-btn:not(.active) svg {
    stroke: #2d2926;
    color: #2d2926;
}

.tool-btn svg, .action-btn svg {
    width: 22px;
    height: 22px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
}

.btn-label {
    font-size: 9px;
    font-weight: 500;
    color: #2d2926;
}

.tool-btn.active .btn-label {
    color: var(--ch-accent);
}

.tool-separator {
    width: 36px;
    height: 1px;
    background: var(--ch-border);
    margin: 4px 0;
}

/* Tooltip */
.tooltip {
    position: absolute;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 5px 8px;
    border-radius: 4px;
    font-size: 10px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s;
    z-index: 1000001;
    left: 60px;
    top: 50%;
    transform: translateY(-50%);
}

.tool-btn:hover .tooltip,
.action-btn:hover .tooltip,
.header-control-btn:hover .tooltip {
    opacity: 1;
}

/* Right Sidebar */
.coloringhub-modal .right-sidebar {
    width: 280px;
    background: var(--ch-bg-tertiary);
    border-left: 1px solid var(--ch-border-light);
    display: flex;
    flex-direction: column;
    z-index: 50;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-gutter: stable; /* Reserve space for scrollbar to prevent content shift */
    position: relative;
    transition: transform 0.3s ease;
    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.02);
}

.coloringhub-modal .right-sidebar.collapsed {
    transform: translateX(100%);
}

/* Sidebar Toggle - Hidden on desktop */
.sidebar-toggle {
    position: absolute;
    left: -32px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 64px;
    background: var(--ch-bg-secondary);
    border: 1px solid var(--ch-border-light);
    border-right: none;
    border-radius: var(--ch-radius-small) 0 0 var(--ch-radius-small);
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    transition: var(--ch-transition);
    color: var(--ch-text-secondary);
    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.04);
}

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

.sidebar-toggle:hover {
    background: var(--ch-bg-tertiary);
    color: var(--ch-text-primary);
    box-shadow: -4px 0 12px rgba(0, 0, 0, 0.08);
}

.sidebar-toggle svg {
    width: 16px;
    height: 16px;
    transition: transform 0.3s;
}

.coloringhub-modal .right-sidebar.collapsed .sidebar-toggle svg {
    transform: rotate(180deg);
}

/* Section styling */
.palette-section {
    padding: 16px;
    background: var(--ch-bg-tertiary);
    border-bottom: 1px solid var(--ch-border-light);
}

.color-status-section {
    padding: 12px 16px 16px 16px;
    background: var(--ch-bg-tertiary);
    border-bottom: 1px solid var(--ch-border-light);
}

.brush-settings-section {
    padding: 16px;
    background: var(--ch-bg-tertiary);
    display: none;
}

.brush-settings-section.active {
    display: block;
}

.section-title {
    font-size: 13px;
    font-weight: 500;
    color: var(--ch-text-primary) !important;
    text-transform: none;
    letter-spacing: 0;
    margin-bottom: 12px;
    display: block;
}

/* Section header with reset button */
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.section-header .section-title {
    margin-bottom: 0;
}

.section-header .reset-btn {
    margin-left: auto;
    flex-shrink: 0;
    padding: 5px 10px;
    font-size: 11px;
    font-weight: 500;
    background: transparent;
    border: 1px solid var(--ch-border-light);
    border-radius: var(--ch-radius-small);
    color: var(--ch-text-secondary);
    cursor: pointer;
    transition: var(--ch-transition);
}

.section-header .reset-btn:hover {
    background: var(--ch-bg-tertiary);
    border-color: var(--ch-border);
    color: var(--ch-text-primary);
}

/* Tool Section */
.tool-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex: 1;
}

.tool-grid {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Action Section */
.action-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin-top: auto;
}

/* Coming Soon Badge */
.coming-soon {
    opacity: 0.5;
    position: relative;
    cursor: not-allowed;
}

.coming-soon::after {
    content: 'Soon';
    position: absolute;
    top: -2px;
    right: -2px;
    font-size: 8px;
    background: var(--ch-border);
    color: #2d2926;
    padding: 1px 3px;
    border-radius: 4px;
    font-weight: 600;
}

/* Fallback for browsers that don't support scrollbar-gutter */
@supports not (scrollbar-gutter: stable) {
    .coloringhub-modal .right-sidebar {
        overflow-y: scroll; /* Always show scrollbar to prevent layout shift */
    }
}

/* Smooth scrollbar */
.coloringhub-modal .right-sidebar::-webkit-scrollbar {
    width: 6px;
}

.coloringhub-modal .right-sidebar::-webkit-scrollbar-track {
    background: transparent;
}

.coloringhub-modal .right-sidebar::-webkit-scrollbar-thumb {
    background: var(--ch-border);
    border-radius: 3px;
}

.coloringhub-modal .right-sidebar::-webkit-scrollbar-thumb:hover {
    background: var(--ch-text-tertiary);
}

/* Responsive Design */
@media (max-width: 1366px) {
    .coloringhub-modal .right-sidebar {
        width: 260px;
    }
}

@media (max-width: 1024px) {
    .coloringhub-modal .right-sidebar {
        width: 280px;
    }
    
    .coloringhub-modal .right-sidebar.collapsed {
        transform: translateX(100%);
    }
}

@media (max-width: 768px) {
    .coloringhub-modal .right-sidebar.collapsed ~ .fab-color {
        display: flex;
    }
}

/* Touch-friendly adjustments */
@media (hover: none) {
    .tool-btn,
    .action-btn {
        transition: none;
    }
}

/* Print Styles */
@media print {
    .tools-sidebar,
    .coloringhub-modal .right-sidebar,
    .sidebar-toggle {
        display: none !important;
    }
}

/* Canvas Area */
.canvas-area {
    flex: 1;
    display: flex;
    position: relative;
    background: var(--ch-bg-primary);
    overflow: hidden;
}

.canvas-container {
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 100%;
    height: 100%;
    background: #f8f8f8;
    overflow: hidden;
}

/* Ensure the canvas element itself is properly positioned */
.canvas-container canvas {
    display: block;
    position: relative;
}

.canvas-wrapper {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.canvas-viewport {
    background: white;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
    border-radius: var(--ch-radius);
    overflow: hidden;
    position: relative;
    border: 1px solid var(--ch-border-light);
    max-width: 100%;
    max-height: 100%;
    transition: transform 0.3s ease;
}

#coloringCanvas {
    display: block;
    cursor: crosshair;
}

/* Print Styles */
@media print {
    .canvas-container {
        padding: 0;
    }

    .canvas-viewport {
        box-shadow: none;
        border: none;
        border-radius: 0;
    }
}

/* Palette header with button */
.palette-header {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
    gap: 8px;
}

.palette-header .section-title {
    margin-bottom: 0; /* Remove default margin when in header */
    line-height: 28px; /* Match parent height */
    white-space: nowrap; /* Prevent text wrapping */
}

.palette-selector-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 500;
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid var(--ch-border-light);
    border-radius: var(--ch-radius-small);
    cursor: pointer;
    transition: var(--ch-transition);
    color: var(--ch-text-primary);
    width: 100%;
}

.palette-selector-btn span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

.palette-selector-btn:hover {
    border-color: var(--ch-border);
    background: rgba(255, 255, 255, 0.8);
    transform: scale(1.02);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    color: var(--ch-text-primary) !important; /* Prevent theme from making text white */
}

.palette-selector-btn svg {
    width: 12px;
    height: 12px;
    stroke: currentColor;
    stroke-width: 2;
    flex-shrink: 0;
}

/* Color Grid - 6x4 */
.color-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 4px;
    margin-top: 12px; /* Add more spacing from header */
}

.color-swatch {
    aspect-ratio: 1;
    width: 30px;
    height: 30px;
    border-radius: var(--ch-radius-small);
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    border: 2px solid transparent;
    transform: translateZ(0);
}


.color-swatch:hover {
    transform: scale(1.15);
    z-index: 10;
    border-color: var(--ch-border);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.color-swatch.active {
    transform: scale(1.1);
    border-color: var(--ch-accent);
    z-index: 15;
}

.color-swatch:active {
    /* Animation removed to prevent splash effect */
}

/* Current & Recent Colors - Seamless Design */
.color-control-group {
    display: flex;
    margin-bottom: 20px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.current-color-display {
    width: 52px;
    height: 42px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.current-color-display::after {
    content: '';
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
    pointer-events: none;
}

.current-color-display:hover {
    transform: scale(1.15);
    z-index: 1;
    border: 2px solid var(--ch-border);
}

/* Animation removed for instant feedback */
.current-color-display.changing {
    /* Instant visual update, no animation */
}

.color-action-btn {
    width: 42px;
    height: 42px;
    border: none;
    background: var(--ch-bg-tertiary);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.color-action-btn:first-of-type {
    border-left: 1px solid var(--ch-border-light);
}

.color-action-btn svg {
    width: 20px;
    height: 20px;
    fill: var(--ch-text-secondary);
    transition: all 0.2s ease;
    z-index: 1;
}

.color-action-btn:hover {
    background: var(--ch-bg-secondary);
}

.color-action-btn:hover svg {
    fill: var(--ch-accent);
    transform: scale(1.1);
}

.color-action-btn:active {
    transform: scale(0.95);
}

/* Picker button with subtle rainbow effect */
.picker-btn {
    position: relative;
}

.picker-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, 
        rgba(255, 107, 107, 0.05) 0%, 
        rgba(255, 230, 109, 0.05) 25%, 
        rgba(78, 205, 196, 0.05) 50%, 
        rgba(107, 107, 255, 0.05) 75%
    );
    opacity: 0;
    transition: opacity 0.3s ease;
}

.picker-btn:hover::before {
    opacity: 1;
}

/* Dice button sparkle animation */
.dice-btn.sparkling::after {
    content: '';
    position: absolute;
    inset: -4px;
    background: radial-gradient(circle at center, 
        rgba(255, 107, 107, 0.4) 0%, 
        rgba(78, 205, 196, 0.4) 30%, 
        transparent 60%
    );
    animation: sparkle 0.4s ease-out;
    pointer-events: none;
}

.dice-btn.sparkling svg {
    animation: diceSparkle 0.4s ease-in-out;
}

@keyframes sparkle {
    0% { 
        opacity: 0;
        transform: scale(0.8);
    }
    50% { 
        opacity: 1;
        transform: scale(1.2);
    }
    100% { 
        opacity: 0;
        transform: scale(1.4);
    }
}

@keyframes diceSparkle {
    0% { transform: rotate(0deg) scale(1); }
    25% { transform: rotate(-10deg) scale(1.1); }
    50% { transform: rotate(10deg) scale(1.1); }
    75% { transform: rotate(-5deg) scale(1.05); }
    100% { transform: rotate(0deg) scale(1); }
}

/* Recent Colors */
.recent-colors-row {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 4px;
    margin-top: 8px;
}

.recent-color-wrapper {
    position: relative;
    width: 30px;
    height: 30px;
    isolation: isolate; /* Create stacking context */
}

.recent-color {
    width: 30px;
    height: 30px;
    border-radius: var(--ch-radius-small);
    cursor: pointer;
    transition: var(--ch-transition);
    border: 2px solid transparent;
    position: relative;
    z-index: 1;
}

.recent-color:hover {
    transform: scale(1.15);
    border-color: var(--ch-border);
    z-index: 10;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.recent-color.pinned {
    border-color: var(--ch-accent);
    box-shadow: 0 0 0 1px var(--ch-accent-soft);
}

.recent-color:active {
    /* Animation removed for cleaner interaction */
}

/* Empty recent color slots - fix for missing pattern */
.recent-color.empty {
    background: var(--ch-bg-tertiary);
    background-image: 
        linear-gradient(45deg, rgba(0,0,0,0.03) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(0,0,0,0.03) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, rgba(0,0,0,0.03) 75%),
        linear-gradient(-45deg, transparent 75%, rgba(0,0,0,0.03) 75%);
    background-size: 10px 10px;
    background-position: 0 0, 0 5px, 5px -5px, -5px 0px;
    border: 2px dashed rgba(0, 0, 0, 0.15) !important;
    cursor: default !important;
    opacity: 0.5;
}

.recent-color.empty:hover {
    transform: none !important;
    border-color: rgba(0, 0, 0, 0.15) !important;
    box-shadow: none !important;
}

/* Pin button */
.pin-button {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 16px;
    height: 16px;
    background: white;
    border: 1px solid var(--ch-border);
    border-radius: 50%;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    padding: 0;
    z-index: 20;
}

.recent-color-wrapper:hover .pin-button,
.pin-button.active {
    display: flex;
}

.pin-button svg {
    width: 10px;
    height: 10px;
    color: #2d2926;
}

.pin-button.active {
    background: var(--ch-accent);
    border-color: var(--ch-accent);
}

.pin-button.active svg {
    color: white;
}

.pin-button:hover {
    transform: scale(1.1);
    background: var(--ch-bg-tertiary);
}

.pin-button.active:hover {
    background: var(--ch-accent-dark);
}

/* Pin button when max reached */
.pin-button.max-reached {
    opacity: 0.5;
    cursor: not-allowed;
}

.pin-button.max-reached:hover {
    transform: none;
    background: white;
}

.pin-button.max-reached svg {
    opacity: 0.5;
}

/* Max pins tooltip */
.max-pins-tooltip {
    position: fixed;
    background: rgba(0, 0, 0, 0.9);
    color: white;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    z-index: 100000;
    pointer-events: none;
    animation: tooltipFadeIn 0.2s ease;
    white-space: nowrap;
}

.max-pins-tooltip.fade-out {
    animation: tooltipFadeOut 0.3s ease forwards;
}

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

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

/* Color Section */
.color-section {
    padding: 16px;
    background: var(--ch-bg-tertiary);
}

/* Palette Section - specific spacing */
.palette-section {
    padding: 16px;
    padding-top: 12px; /* Less top padding since header has margin */
}

/* Responsive Design */
@media (max-width: 768px) {
    .color-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}

/* Touch-friendly adjustments */
@media (hover: none) {
    .color-swatch,
    .recent-color {
        transition: none;
    }
    
    .color-swatch:active {
        /* Transform removed to prevent bounce effect */
    }
}

/* Brush Section */
.brush-section {
    padding: 16px;
    background: var(--ch-bg-tertiary);
}

/* Brush Preview */
.brush-preview {
    width: 100%;
    height: 120px;
    background: var(--ch-bg-secondary);
    border: 1px solid var(--ch-border-light);
    border-radius: var(--ch-radius-small);
    margin-bottom: 16px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.brush-preview-canvas {
    width: 120px;
    height: 120px;
    background: white;
    border-radius: var(--ch-radius-small);
}

/* Brush Controls */
.brush-control {
    margin-bottom: 14px;
    width: 100%;
}

.brush-control label {
    font-size: 11px;
    font-weight: 500 !important;
    color: var(--ch-text-secondary) !important;
    display: block;
    margin-bottom: 6px;
}

.slider-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.slider-group {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    flex: 1;
    height: 4px;
    background: var(--ch-border);
    border-radius: 2px;
    outline: none;
    cursor: pointer;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    background: var(--ch-text-primary);
    border: 2px solid white;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    transition: var(--ch-transition);
}

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

.range-value {
    font-size: 11px;
    font-weight: 500;
    color: var(--ch-text-primary);
    min-width: 30px;
    text-align: right;
}

/* Texture Grid */
.texture-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin-bottom: 16px;
    width: 100%;
}

.texture-btn {
    aspect-ratio: 1;
    border: 1px solid var(--ch-border-light);
    background: var(--ch-bg-secondary);
    border-radius: var(--ch-radius-small);
    cursor: pointer;
    transition: var(--ch-transition);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px;
}

.texture-btn:hover {
    border-color: var(--ch-border);
    background: white;
}

.texture-btn.active {
    border-color: var(--ch-accent);
    background: var(--ch-accent-soft);
}

.texture-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    gap: 4px;
}

.texture-icon {
    width: 32px;
    height: 32px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.texture-label {
    font-size: 10px;
    color: #2d2926;
}

/* Texture Icons */
.texture-smooth {
    background: linear-gradient(135deg, var(--ch-text-primary), var(--ch-text-secondary));
    width: 24px;
    height: 24px;
    border-radius: 50%;
}

.texture-soft {
    background: radial-gradient(circle, var(--ch-text-primary) 0%, transparent 60%);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    filter: blur(2px);
}

.texture-chalk {
    width: 28px;
    height: 28px;
    background: repeating-linear-gradient(
        45deg,
        var(--ch-text-primary),
        var(--ch-text-primary) 2px,
        transparent 2px,
        transparent 5px
    );
    opacity: 0.7;
    mask-image: radial-gradient(ellipse, black 60%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse, black 60%, transparent 100%);
}

.texture-pencil {
    width: 100%;
    height: 6px;
    background: linear-gradient(to right, 
        transparent 0%, 
        var(--ch-text-secondary) 10%,
        var(--ch-text-primary) 20%, 
        var(--ch-text-primary) 80%, 
        var(--ch-text-secondary) 90%,
        transparent 100%);
    position: relative;
    transform: rotate(-2deg);
}
.texture-pencil::after {
    content: '';
    position: absolute;
    right: 15%;
    top: -8px;
    width: 0;
    height: 0;
    border-left: 10px solid var(--ch-text-primary);
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
}

.texture-marker {
    width: 28px;
    height: 16px;
    background: var(--ch-text-primary);
    border-radius: 2px;
    opacity: 0.8;
    position: relative;
}
.texture-marker::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    right: 2px;
    height: 3px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 1px;
}

.texture-spray {
    width: 30px;
    height: 30px;
    background-image: radial-gradient(circle at 30% 30%, var(--ch-text-primary) 15%, transparent 15%),
                      radial-gradient(circle at 70% 20%, var(--ch-text-primary) 10%, transparent 10%),
                      radial-gradient(circle at 50% 60%, var(--ch-text-primary) 20%, transparent 20%),
                      radial-gradient(circle at 20% 80%, var(--ch-text-primary) 12%, transparent 12%),
                      radial-gradient(circle at 80% 70%, var(--ch-text-primary) 18%, transparent 18%);
    opacity: 0.8;
}

.texture-watercolor {
    width: 30px;
    height: 30px;
    background: radial-gradient(ellipse at 30% 30%, 
        rgba(45, 41, 38, 0.4) 0%, 
        rgba(45, 41, 38, 0.2) 40%, 
        transparent 70%);
    filter: blur(2px);
    position: relative;
}
.texture-watercolor::after {
    content: '';
    position: absolute;
    inset: 20%;
    background: radial-gradient(ellipse at 60% 60%, 
        rgba(45, 41, 38, 0.3) 0%, 
        transparent 60%);
    filter: blur(1px);
}

.texture-oil {
    width: 30px;
    height: 12px;
    background: linear-gradient(to right,
        var(--ch-text-primary) 0%,
        var(--ch-text-secondary) 50%,
        var(--ch-text-primary) 100%);
    position: relative;
    border-radius: 6px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.texture-oil::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 4px;
    right: 4px;
    height: 4px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 2px;
}

/* Touch-friendly adjustments */
@media (hover: none) {
    .texture-btn {
        transition: none;
    }
}

/* Modals Container */
.modals-container,
.coloringhub-modals-container {
    /* Container should not have any visual styling or positioning */
    /* Modal backdrops handle their own positioning */
    display: contents; /* This makes the container invisible but allows children to render normally */
}

/* Modals */
.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000001; /* Higher than container */
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    pointer-events: none; /* Prevent interaction when hidden */
}

.modal-backdrop.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto; /* Re-enable interaction when visible */
}

/* Ensure palette color blocks are hidden when modal is not active */
.modal-backdrop:not(.active) .palette-color-block {
    visibility: hidden !important;
    pointer-events: none !important;
}

.modal-backdrop .modal {
    transform: scale(0.9) translateY(20px);
    opacity: 0;
    transition: all 0.3s ease;
}

.modal-backdrop.active .modal {
    transform: scale(1) translateY(0);
    opacity: 1;
}

/* Legacy modal-overlay support */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s;
}

.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

:root {
    /* ColoringHub CSS Variables */
    --ch-bg-primary: #fefcfb;
    --ch-bg-secondary: #ffffff;
    --ch-bg-tertiary: #faf8f7;
    --ch-text-primary: #2d2926;
    --ch-text-secondary: #716b64;
    --ch-text-tertiary: #a09890;
    --ch-accent: #ff6b6b;
    --ch-accent-hover: #ff5555;
    --ch-accent-soft: #ffebeb;
    --ch-accent-secondary: #4ecdc4;
    --ch-accent-tertiary: #ffe66d;
    --ch-pink: #f9a8d4;
    --ch-border: #e8e2dc;
    --ch-border-light: #f0ebe6;
    --ch-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    --ch-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.1);
    --ch-shadow-float: 0 8px 24px rgba(0, 0, 0, 0.12);
    --ch-danger: #e74c3c;
    --ch-radius: 10px;
    --ch-radius-small: 6px;
    --ch-radius-large: 16px;
    --ch-transition: all 0.15s ease;
    
    /* Additional variables */
    --ch-accent-dark: #ff4444;
    --ch-border-color: #e8e2dc;
    --ch-border-hover: #d4cec8;
    --ch-shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.15);
    --ch-warning-bg: #FFF9E6;
    --ch-warning-border: #FFE082;
    --ch-warning-icon: #FFA726;
    --ch-warning-text: #795548;
}

/* ========================================
   MODAL SYSTEM - BASE STYLES
   DO NOT DUPLICATE .modal {} definitions!
   For modal-specific styles, use modifier classes
   ======================================== */
.modal {
    background: var(--ch-bg-secondary);
    border-radius: var(--ch-radius);
    padding: 24px;
    max-width: 480px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    transform: scale(0.9) translateY(20px);
    transition: all 0.3s ease;
}

.modal-backdrop.active .modal,
.modal-overlay.active .modal {
    transform: scale(1) translateY(0);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.modal-header h2 {
    font-size: 18px;
    font-weight: 600;
    color: var(--ch-text-primary);
    margin: 0;
}

.modal-header .close-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    color: #2d2926;
    transition: var(--ch-transition);
    border-radius: var(--ch-radius-small);
}

.modal-header .close-btn:hover {
    background: var(--ch-bg-tertiary);
    color: var(--ch-text-primary);
}

.modal-header .close-btn svg {
    width: 20px;
    height: 20px;
    stroke: #2d2926 !important;
    fill: none !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Maintain close button SVG visibility on active state */
.modal-header .close-btn:active svg {
    stroke: #2d2926 !important;
    opacity: 1 !important;
}

/* Maintain close button SVG visibility on focus state */
.modal-header .close-btn:focus svg {
    stroke: #2d2926 !important;
    opacity: 1 !important;
}

/* Allow hover color change */
.modal-header .close-btn:hover svg {
    stroke: currentColor !important;
}

.modal-content {
    margin-bottom: 20px;
}

/* Fix horizontal padding for export/import modals */
.export-modal.modal,
.import-modal.modal {
    padding: 24px 40px;  /* Override base modal padding */
}

/* Ensure proper box sizing for modal content */
.export-modal *,
.import-modal * {
    box-sizing: border-box;
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

/* Palette Selector Modal */
.palette-selector-modal .modal {
    max-width: 600px;
}

.palette-modal-backdrop .modal {
    max-width: 720px;
    width: 95%;
}

/* Removed duplicate palette styles - see newer definitions below */

/* Help Modal */
.help-modal {
    max-width: 480px;
}

.help-content {
    color: var(--ch-text-secondary);
    line-height: 1.6;
}

.help-section {
    margin-bottom: 20px;
}

.help-section h3 {
    font-size: 14px;
    font-weight: 600;
    color: var(--ch-text-primary);
    margin-top: 0;
    margin-bottom: 8px;
}

.shortcut-list {
    list-style: none;
    font-size: 13px;
}

.shortcut-list li {
    padding: 4px 0;
    display: flex;
    justify-content: space-between;
}

.shortcut-key {
    font-family: monospace;
    background: var(--ch-bg-tertiary);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 11px;
}

.beta-notice {
    background: var(--ch-accent-soft);
    padding: 12px;
    border-radius: var(--ch-radius-small);
    font-size: 13px;
    margin-bottom: 16px;
}

.feedback-link {
    color: var(--ch-accent);
    cursor: pointer;
    text-decoration: underline;
}

.feedback-link:hover {
    color: var(--ch-accent-hover);
}

.version-info {
    font-size: 11px;
    color: #2d2926;
    text-align: center;
    margin-top: 16px;
}

/* Color Picker Modal */
.color-picker-modal {
    max-width: 420px;
}

.color-preview-large {
    width: 100%;
    height: 60px;
    border-radius: var(--ch-radius-small);
    border: 1px solid var(--ch-border);
    margin-bottom: 20px;
    box-shadow: var(--ch-shadow);
}

/* Color Wheel */
.color-wheel-container {
    width: 200px;
    height: 200px;
    margin: 0 auto 20px;
    position: relative;
}

.color-wheel {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: relative;
    cursor: crosshair;
}

.color-wheel canvas {
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

.color-wheel-cursor {
    position: absolute;
    width: 20px;
    height: 20px;
    border: 3px solid white;
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.5), 0 2px 4px rgba(0,0,0,0.3);
    transform: translate(-50%, -50%);
    pointer-events: none;
}

/* Value/Brightness Slider */
.value-slider-container {
    margin-bottom: 20px;
}

.value-gradient {
    width: 100%;
    height: 20px;
    border-radius: var(--ch-radius-small);
    border: 1px solid var(--ch-border);
    position: relative;
    cursor: pointer;
    margin-bottom: 4px;
}

.value-slider-handle {
    position: absolute;
    width: 24px;
    height: 24px;
    background: white;
    border: 2px solid var(--ch-text-primary);
    border-radius: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    cursor: grab;
}

.value-slider-handle:active {
    cursor: grabbing;
}

/* Color Inputs */
.color-inputs {
    display: flex;
    gap: 12px;
}

.color-input-group {
    flex: 1;
}

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

.color-input-group input[type="text"] {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid var(--ch-border);
    border-radius: var(--ch-radius-small);
    font-size: 12px;
    background: var(--ch-bg-tertiary);
}

.color-input-group input[type="text"]:focus {
    outline: none;
    border-color: var(--ch-accent);
}

/* Feedback Modal - removed duplicate unused styles */
/* See line 8110+ for active feedback modal styles */

/* Legacy button styles - kept for backwards compatibility */
/* NEW: Use .colorhub-btn classes for all ColorHub modals - see modals.css */
.btn {
    padding: 8px 16px;
    border: 1px solid var(--ch-border);
    border-radius: var(--ch-radius-small);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: var(--ch-transition);
    background: var(--ch-bg-tertiary);
    color: var(--ch-text-primary);
}

.btn:hover {
    background: var(--ch-bg-primary);
    border-color: var(--ch-accent);
}

.btn:active {
    transform: translateY(0);
}

.btn:focus-visible {
    outline: 2px solid var(--ch-text-tertiary);
    outline-offset: 2px;
}

.btn-primary {
    background: var(--ch-accent);
    color: white;
    border-color: var(--ch-accent);
}

.btn-primary:hover {
    background: var(--ch-accent-hover);
    border-color: var(--ch-accent-hover);
}

/* Loading state */
.btn.loading {
    position: relative;
    color: transparent;
    pointer-events: none;
}

.btn.loading::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    top: 50%;
    left: 50%;
    margin-left: -8px;
    margin-top: -8px;
    border: 2px solid var(--ch-text-tertiary);
    border-radius: 50%;
    border-top-color: var(--ch-accent);
    animation: spin 0.8s linear infinite;
}

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

/* Warning text */
.warning-text {
    color: var(--ch-text-secondary);
    font-size: 14px;
    margin-bottom: 16px;
    line-height: 1.5;
}

/* Mobile Welcome Screen */
.mobile-welcome {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--ch-bg-secondary);
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px;
    z-index: 2000;
    text-align: center;
}

.mobile-welcome.active {
    display: flex;
}

.mobile-welcome svg {
    width: 80px;
    height: 80px;
    margin-bottom: 24px;
    color: var(--ch-accent);
}

.mobile-welcome h2 {
    font-size: 24px;
    margin-bottom: 16px;
    color: var(--ch-text-primary);
}

.mobile-welcome p {
    font-size: 16px;
    color: var(--ch-text-secondary);
    margin-bottom: 32px;
    line-height: 1.6;
}

.mobile-welcome-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
}

.mobile-welcome-btn {
    padding: 12px 24px;
    border: 1px solid var(--ch-border);
    border-radius: var(--ch-radius);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: var(--ch-transition);
    background: var(--ch-bg-tertiary);
    color: var(--ch-text-primary);
}

.mobile-welcome-btn:hover {
    background: var(--ch-bg-primary);
    border-color: var(--ch-accent);
}

.mobile-welcome-btn.primary {
    background: var(--ch-accent);
    color: white;
    border-color: var(--ch-accent);
}

.mobile-welcome-btn.primary:hover {
    background: var(--ch-accent-hover);
}

.mobile-welcome-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--ch-text-secondary);
}

.mobile-welcome-close:hover {
    color: var(--ch-text-primary);
}

/* Don't show again checkbox */
.mobile-welcome-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--ch-text-secondary);
    margin-top: 8px;
}

.mobile-welcome-checkbox input {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* Mobile Color Panel */
.mobile-color-panel {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--ch-bg-secondary);
    border-radius: var(--ch-radius) var(--ch-radius) 0 0;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
    transform: translateY(100%);
    transition: transform 0.3s ease;
    z-index: 200;
    padding: 20px;
    max-height: 60vh;
    overflow-y: auto;
}

.mobile-color-panel.active {
    transform: translateY(0);
}

.mobile-color-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.mobile-color-panel-close {
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--ch-text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.mobile-color-panel::-webkit-scrollbar {
    width: 6px;
}

.mobile-color-panel::-webkit-scrollbar-track {
    background: transparent;
}

.mobile-color-panel::-webkit-scrollbar-thumb {
    background: var(--ch-border);
    border-radius: 3px;
}

.mobile-color-panel::-webkit-scrollbar-thumb:hover {
    background: var(--ch-text-tertiary);
}

/* Floating Action Button (FAB) */
.fab-color {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 56px;
    height: 56px;
    background: var(--ch-accent);
    color: white;
    border-radius: 50%;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    z-index: 100;
    transition: var(--ch-transition);
}

.fab-color svg {
    width: 24px;
    height: 24px;
    fill: currentColor;
}

.fab-color:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

.fab-color:active {
    transform: scale(0.95);
}

/* Toast Messages */
.toast {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--ch-text-primary);
    color: white;
    padding: 12px 24px;
    border-radius: 24px;
    font-size: 14px;
    font-weight: 500;
    box-shadow: var(--ch-shadow-hover);
    z-index: 1000001;
    animation: slideUp 0.3s ease-out;
}

/* DUPLICATE SECTION REMOVED - See lines 2770-3126 for consolidated palette styles */

/* Print Styles */
@media print {
    .mobile-welcome,
    .fab-color {
        display: none !important;
    }
}

/* ===================================================
   PALETTE MODAL STRUCTURE - Essential UI Chrome
   (Card styles are in the consolidated section below)
   =================================================== */

/* Simple Palette Modal Container */
.modal.palette-modal-simple {
    max-width: 900px;
    width: 95%;
    max-height: 90vh;
    overflow-y: hidden; /* Prevent modal scroll - grid handles scrolling internally */
    background: white;
    border-radius: 16px;
    padding: 0;
    position: relative;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    transform: scale(1);
}

/* Modal Title */
.palette-modal-title {
    font-size: 28px;
    font-weight: 600;
    color: var(--ch-text-primary);
    margin: 0;
    padding: 32px 32px 24px;
    line-height: 1.2;
}

/* Close button (X) in top right */

/* Ensure modal close X is always visible */
.modal-close-x {
    position: absolute !important;
    top: 24px !important;
    right: 24px !important;
    width: 32px !important;
    height: 32px !important;
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    color: #2d2926 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 10 !important;
}

.modal-close-x svg {
    width: 24px !important;
    height: 24px !important;
    stroke: currentColor !important;
    fill: none !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.modal-close-x:hover {
    background: rgba(0, 0, 0, 0.05) !important;
    border-radius: 4px !important;
}

/* Specific fix for color picker modal X */
.color-picker-modal .modal-close-x {
    color: #2d2926 !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: flex !important;
}

.color-picker-modal .modal-close-x svg {
    stroke: #2d2926 !important;
    opacity: 1 !important;
}

/* Position X button higher for colorhub-modal-content (advanced color picker) */
.colorhub-modal-content .modal-close-x {
    top: 16px !important; /* Move 8px higher than default 24px */
}


.modal-close-x:hover {
    color: #333;
    background: #f5f5f5;
}

.modal-close-x svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
    stroke: currentColor;
}

/* Also ensure close-btn (used in some modals) is visible */
.coloringhub-modal .close-btn {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 10;
}

/* Category Pills Container */
.palette-category-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 30px 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--ch-border-light);
}

.category-pill {
    padding: 8px 16px;
    font-size: 13px !important;
    font-weight: 500 !important;
    background: var(--ch-bg-tertiary);
    border: 2px solid var(--ch-border-light);
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.2s;
    color: var(--ch-text-secondary) !important;
    white-space: nowrap;
}

.category-pill:hover {
    background: var(--ch-bg-secondary);
    border-color: var(--ch-border);
    color: var(--ch-text-primary) !important;
}

.category-pill.active {
    background: var(--ch-accent);
    border-color: var(--ch-accent);
    color: white !important;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.2);
}


/* ===================================================
   PALETTE CARD STYLES - CONSOLIDATED SINGLE DEFINITION
   
   WARNING: DO NOT DUPLICATE THESE STYLES ELSEWHERE!
   
   This section contains ALL palette card styles.
   Multiple duplicates were causing conflicts and inconsistent behavior.
   
   Card dimensions:
   - Desktop: 80px height (FIXED for consistency)
   - Mobile: 70px height (FIXED for consistency)
   - Grid gap: 12px
   - Title font: 14px
   - Color blocks: 24px height
   
   Last consolidated: 2025-01-06
   =================================================== */

/* ===== PALETTE GRID CONTAINER ===== */
.palette-simple-grid {
    display: grid;
    position: relative;
    height: calc(90vh - 220px); /* Responsive height: viewport minus header/pills */
    max-height: 420px; /* Keep original height as maximum */
    min-height: 200px; /* Ensure minimum usable height */
    grid-template-columns: repeat(3, 1fr);
    gap: 12px; /* Compact gap between cards */
    row-gap: 12px; /* Consistent row gap */
    padding: 20px 30px 30px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #ddd #f5f5f5;
    align-content: start; /* Prevent vertical stretching */
    align-items: start; /* Prevent vertical stretching of items */
}

/* Add padding when import section is visible */
.palette-simple-grid[data-active-category="custom"] {
    padding-bottom: 80px;
}

.palette-simple-grid::-webkit-scrollbar {
    width: 8px;
}

.palette-simple-grid::-webkit-scrollbar-track {
    background: #f5f5f5;
    border-radius: 4px;
}

.palette-simple-grid::-webkit-scrollbar-thumb {
    background: #ddd;
    border-radius: 4px;
}

.palette-simple-grid::-webkit-scrollbar-thumb:hover {
    background: #ccc;
}

/* ===== PALETTE CARD - BASE STYLES ===== */
.palette-simple-card {
    background: var(--ch-bg-tertiary);
    border: 2px solid var(--ch-border-light);
    border-radius: var(--ch-radius);
    padding: 12px; /* Standard padding */
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative; /* For absolute positioning of checkmark */
    outline: none;
    height: 80px; /* FIXED HEIGHT for ALL cards */
    min-height: 80px; /* Ensure minimum height */
    max-height: 80px; /* Prevent stretching */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Distribute space evenly */
    overflow: hidden; /* Prevent color overflow */
    box-sizing: border-box; /* Include padding and border in height */
}

/* Hidden palettes */
.palette-simple-card[data-filtered="true"] {
    display: none;
    pointer-events: none;
}

.palette-simple-card:hover {
    border-color: var(--ch-accent);
    transform: translateY(-2px); /* Reduced from -3px */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    background: var(--ch-bg-primary);
}

.palette-simple-card:focus {
    border-color: var(--ch-accent);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
}

.palette-simple-card.selected {
    border-color: var(--ch-accent);
    background: var(--ch-accent-soft);
    /* All other properties inherited from .palette-simple-card */
    /* No need to redeclare flex, position, or any layout properties */
}

.palette-simple-card.selected:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(99, 102, 241, 0.25);
}

/* ===== CUSTOM PALETTE CARD ===== */
/* Custom cards inherit from .palette-simple-card - DO NOT DUPLICATE STYLES */
/* Only add custom-specific styles here */
.custom-palette-card {
    /* All base styles inherited from .palette-simple-card */
    /* Custom cards have same 80px height as regular cards */
    overflow: hidden !important; /* Force overflow hidden for custom palettes */
}

/* Ensure colors stay within bounds for custom palettes */
.custom-palette-card .palette-simple-colors {
    overflow: hidden;
    max-width: 100%;
    width: 100%;
    flex-wrap: nowrap; /* Prevent wrapping */
}

/* Fix color blocks in custom palettes */
.custom-palette-card .palette-color-block {
    max-width: 60px; /* Limit individual color width */
    flex: 1 1 auto; /* Allow shrinking */
}

/* Custom palette cards when selected should inherit all styles from .palette-simple-card.selected */
/* The only difference is they have action buttons which are absolutely positioned */

/* Fix layout for custom palette cards - ensure proper flex layout */
.custom-palette-card {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
}

.custom-palette-card .palette-simple-name {
    font-size: 14px !important;
    font-weight: 600 !important;
    margin: 0 !important; /* No margin - the 8px bottom margin was causing overflow */
    padding: 0 !important;
    line-height: 1.2 !important;
    display: block !important;
    flex-shrink: 0 !important;
}

.custom-palette-card .palette-simple-colors {
    display: flex !important;
    gap: 3px !important;
    height: 24px !important;
    margin-top: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Ensure action buttons are positioned correctly */
.custom-palette-card .palette-actions {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    z-index: 10 !important;
}

/* Custom card hover is handled by .palette-simple-card:hover */

/* ===== PALETTE NAME & COLORS ===== */
.palette-simple-name {
    font-size: 14px; /* Standard font size as documented */
    font-weight: 600;
    color: var(--ch-text-primary);
    margin: 0; /* Remove margin - let flexbox handle spacing */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
    flex-shrink: 0; /* Prevent name from shrinking */
    /* Ensure consistent height across all cards */
    height: 17px; /* Fixed height = font-size * line-height */
    display: flex;
    align-items: center;
    position: relative; /* Ensure it's not affected by absolute elements */
    z-index: 0; /* Below checkmark but part of normal flow */
}

.palette-simple-colors {
    display: flex;
    gap: 3px;
    height: 24px; /* Standard height for color blocks */
    min-height: 24px; /* Ensure minimum height */
    align-items: center; /* Center vertically */
    flex-shrink: 0; /* Prevent colors from shrinking */
    /* Ensure colors stay at bottom */
    margin-top: auto;
    position: relative; /* Ensure it's not affected by absolute elements */
    z-index: 0; /* Below checkmark but part of normal flow */
}

/* Fix for selected cards - ensure exact same positioning */
/* Removed the padding-right that was pushing content */

/* Moved palette-color-block definition below to consolidate styles */

.palette-simple-card:hover .palette-color-block {
    transform: scaleY(1.1); /* Subtle hover effect */
}

/* ===== RESPONSIVE ADJUSTMENTS ===== */
@media (max-width: 768px) {
    .palette-simple-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px; /* Tighter on mobile */
        padding: 16px 24px 24px;
        height: 380px; /* Adjusted for 70px cards */
        min-height: 380px;
    }
    
    .palette-simple-card {
        padding: 10px; /* Reasonable padding on mobile */
        height: 70px; /* Fixed height on mobile */
        min-height: 70px;
        max-height: 70px;
    }
    
    .palette-simple-name {
        font-size: 13px; /* Slightly smaller on mobile */
    }
    
    .palette-simple-colors {
        height: 22px; /* Slightly smaller color blocks on mobile */
        min-height: 22px;
    }
    
    .palette-color-block {
        height: 22px; /* Match container height */
    }
}

@media (min-width: 1200px) {
    .palette-simple-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ===== CUSTOM PALETTE ACTION BUTTONS ===== */
.palette-actions {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 10;
}

.palette-simple-card:hover .palette-actions {
    opacity: 1;
}

.palette-action-btn {
    width: 24px;
    height: 24px;
    padding: 4px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.palette-action-btn:hover {
    background: white;
    border-color: var(--ch-accent);
    transform: scale(1.1);
}

.palette-action-btn svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
}

/* Make edit icon more visible */
.palette-action-btn.edit-palette {
    border-color: #ff6b6b;
}

.palette-action-btn.edit-palette svg {
    fill: #ff6b6b;
}

.palette-action-btn.edit-palette:hover {
    border-color: #ff5252;
    background: #fff5f5;
}

.palette-action-btn.edit-palette:hover svg {
    fill: #ff5252;
}

/* Text for empty custom palettes */
.no-colors-text {
    font-size: 12px;
    color: #2d2926;
    font-style: italic;
    text-align: center;
    width: 100%;
}

/* Ensure color blocks are always visible */
.palette-color-block {
    flex: 1;
    height: 24px !important; /* Force height */
    min-height: 24px;
    border-radius: 3px;
    transition: transform 0.2s ease;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-sizing: border-box;
    display: block !important; /* Force display */
}

/* Fix for disabled add palette card - All Full styling */
.palette-simple-card.disabled {
    height: 80px !important; /* Maintain same height as other cards */
    min-height: 80px;
    max-height: 80px;
    cursor: not-allowed;
    background: #fff5f5;
    border-color: #f0c0c0;
    border-style: dashed;
    justify-content: center;
    align-items: center;
}

.palette-simple-card.disabled:hover {
    transform: none;
    box-shadow: none;
    border-color: #f0c0c0;
}

.palette-simple-card.disabled .palette-simple-name {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 100%;
    margin: 0;
}

.palette-simple-card.disabled .limit-title {
    color: #666;
    font-weight: 500;
    font-size: 13px;
}

.palette-simple-card.disabled .full-badge {
    background: #ff6b6b;
    color: white;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 12px;
}

/* Fix for selected card alignment - ensure checkmark doesn't affect layout */
.palette-simple-card.selected > :not(.palette-checkmark) {
    /* Ensure all children except checkmark maintain their positions */
    position: relative;
    z-index: 0;
}

/* Override any layout shifts caused by DOM order */
.palette-simple-card.selected .palette-simple-name {
    /* Force name to maintain exact position */
    order: 1;
}

.palette-simple-card.selected .palette-simple-colors {
    /* Force colors to maintain exact position */
    order: 2;
}

.palette-simple-card.selected .palette-checkmark {
    /* Checkmark should not participate in flex layout */
    order: -1; /* Put it first in DOM order but absolute position takes it out of flow */
}

/* DUPLICATE STYLES REMOVED - See lines 3017-3056 for palette action button styles */

/* ===== END OF PALETTE CARD STYLES - DO NOT ADD MORE BELOW ===== */

/* Special styling for add new palette card */
#add-custom-palette {
    justify-content: center;
    align-items: center;
    opacity: 0.8;
    transition: opacity 0.2s ease;
    /* Inherits 80px height from .palette-simple-card */
}

#add-custom-palette:hover {
    opacity: 1;
}

/* Custom palette name uses base styles with minor adjustments */
.custom-palette-card .palette-simple-name {
    text-align: left; /* Ensure left alignment */
    /* Removed padding-top to match other cards */
}

.custom-palette-notice {
    font-size: 11px;
    opacity: 0.8;
}

.custom-palette-card:hover .custom-palette-notice {
    color: white;
    opacity: 1;
}

/* Recent palette badge */
.palette-simple-card.recent::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, #FF6B6B, #4ECDC4);
    border-radius: var(--ch-radius);
    z-index: -1;
    opacity: 0.5;
    transition: opacity 0.2s;
}

.palette-simple-card.recent:hover::before {
    opacity: 0.7;
}

.palette-recent-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    background: linear-gradient(135deg, var(--ch-accent) 0%, var(--ch-accent-hover) 100%);
    color: white;
    font-size: 9px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Checkmark for selected palette */
.palette-checkmark {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 24px;
    height: 24px;
    background: var(--ch-accent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10; /* Higher z-index to ensure it's above card content */
    color: white;
    animation: checkmarkPop 0.3s ease;
    pointer-events: none; /* Ensure it doesn't interfere with card clicks */
}

.palette-checkmark svg {
    width: 14px;
    height: 14px;
}

@keyframes checkmarkPop {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Palette Preview Tooltip */
.palette-preview-tooltip {
    position: fixed !important;
    background: rgba(255, 255, 255, 0.98); /* Slight transparency */
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 6px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
    z-index: 2147483647 !important; /* Maximum z-index to ensure it's on top */
    pointer-events: none;
    width: 212px; /* Fixed width: 6 colors * 30px + 5 gaps * 4px + padding 12px */
    backdrop-filter: blur(8px); /* Blur background for better readability */
}

/* Removed - tooltip positioning handled by JavaScript */

.tooltip-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.tooltip-title {
    font-size: 14px;
    font-weight: 600;
    margin: 0;
    color: var(--ch-text-primary);
}

.tooltip-count {
    font-size: 12px;
    color: #666;
}

.tooltip-colors {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 4px;
}

/* Debug styles to ensure tooltip is visible */
.palette-preview-tooltip[style*="display: block"] {
    opacity: 1 !important;
}

.tooltip-color-cell {
    width: 30px;
    height: 30px;
    border-radius: 4px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    transition: transform 0.1s ease;
}

/* Removed - tooltip positioning and arrows handled by JavaScript */

/* Custom Palette Editor */
.custom-palette-editor {
    max-width: 600px;
    width: 95%;
}

.custom-palette-name {
    margin-bottom: 20px;
}

.custom-palette-name label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--ch-text-primary);
    margin-bottom: 8px;
}

.palette-name-input {
    width: 100%;
    padding: 10px 12px;
    font-size: 14px;
    border: 2px solid var(--ch-border-light);
    border-radius: var(--ch-radius-small);
    background: var(--ch-bg-primary);
    color: var(--ch-text-primary);
    transition: all 0.2s;
}

.palette-name-input:focus {
    outline: none;
    border-color: var(--ch-accent);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.custom-palette-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
    margin-bottom: 24px;
}

.custom-color-slot {
    aspect-ratio: 1;
    border: 2px solid var(--ch-border-light);
    border-radius: var(--ch-radius-small);
    cursor: pointer;
    /* Removed transition to prevent bounce effect after dragging */
    position: relative;
    overflow: hidden;
}

.custom-color-slot:hover {
    /* Transform removed to prevent bounce effect */
    border-color: var(--ch-accent);
    /* Box shadow removed to prevent splash effect on DOM update */
    /* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); */
}

.custom-color-slot:active {
    /* Transform removed to prevent bounce effect */
}

.custom-palette-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    margin-bottom: 16px;
}

.custom-palette-warning {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px;
    background: var(--ch-warning-bg, #FFF9E6);
    border: 1px solid var(--ch-warning-border, #FFE082);
    border-radius: var(--ch-radius-small);
    font-size: 13px;
    color: var(--ch-warning-text, #795548);
}

.custom-palette-warning svg {
    flex-shrink: 0;
    color: var(--ch-warning-icon, #FFA726);
}

/* Palette name styles consolidated above - DO NOT DUPLICATE */

/* Palette colors styles consolidated above - DO NOT DUPLICATE */

/* Palette Modal Backdrop */
.palette-modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000001;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s;
    pointer-events: none; /* Prevent interaction when hidden */
}

.palette-modal-backdrop.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto; /* Re-enable interaction when visible */
}

/* Responsive for smaller screens */
@media (max-width: 768px) {
    .modal.palette-modal-simple {
        max-width: 100%;
        max-height: 100%;
        height: 100%;
        border-radius: 0;
    }
    
    .palette-modal-title {
        font-size: 22px;
        padding: 24px 24px 16px;
    }
    
    .modal-close-x {
        top: 16px;
        right: 16px;
    }
    
    /* Palette grid/card styles moved to consolidated section above */
}

/* Grid layout media queries moved to consolidated section above */

/* Hide any leaked palette names from old UI */
.coloringhub-container ~ * .wpco-palette-section,
.coloringhub-modal ~ * .wpco-palette-section,
/* Removed body:has selector for WordPress isolation */

/* Toast Notifications */
.colorhub-toast {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%) translateY(-100px);
    background: var(--ch-bg-primary);
    border: 2px solid var(--ch-border);
    border-radius: var(--ch-radius);
    padding: 16px 24px;
    box-shadow: var(--ch-shadow-float);
    z-index: 5000000; /* Highest z-index for toasts */
    opacity: 0;
    transition: all 0.3s ease;
}

.colorhub-toast.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

.toast-content {
    display: flex;
    align-items: center;
    gap: 12px;
}

.toast-icon {
    font-size: 20px;
    font-weight: bold;
}

.colorhub-toast-success .toast-icon {
    color: #4ade80;
}

.colorhub-toast-error .toast-icon {
    color: var(--ch-accent);
}

.colorhub-toast-info .toast-icon {
    color: var(--ch-accent-secondary);
}

.toast-message {
    font-size: 14px;
    font-weight: 500;
    color: var(--ch-text-primary);
}

/* Custom Palette Editor Modal - World Class Design */
.custom-palette-editor-modal {
    max-width: 720px;
    width: 90%;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Removed header box styling to keep consistent with other modals */

.custom-palette-editor-modal .modal-content {
    padding: 0;
    overflow-y: auto;
    flex: 1;
}

/* Enhanced Info Section */
.custom-palette-info {
    background: linear-gradient(135deg, #f5f7fa 0%, #e9ecef 100%);
    padding: 24px 32px;
    border-bottom: 1px solid var(--ch-border-light);
}

.info-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--ch-text-primary);
    margin: 0 0 16px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.info-steps {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 20px;
}

.info-step {
    display: flex;
    align-items: center;
    gap: 16px;
}

.info-step-icon {
    width: 36px;
    height: 36px;
    background: var(--ch-accent-soft);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.info-step-icon svg {
    color: var(--ch-accent);
}

.info-step span {
    font-size: 14px;
    color: var(--ch-text-secondary);
    line-height: 1.4;
}

.beta-notice {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: var(--ch-bg-primary);
    border-radius: 8px;
    border: 1px solid var(--ch-border);
}

.beta-notice svg {
    color: var(--ch-accent-secondary);
    flex-shrink: 0;
}

.beta-notice span {
    font-size: 12px;
    color: var(--ch-text-secondary);
}

/* Name Input Section */
.custom-palette-name-input {
    padding: 24px 32px;
    background: var(--ch-bg-primary);
    border-bottom: 1px solid var(--ch-border-light);
}

.custom-palette-name-input label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--ch-text-secondary);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.custom-palette-name {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid var(--ch-border);
    border-radius: var(--ch-radius);
    font-size: 16px;
    font-weight: 500;
    background: var(--ch-bg-tertiary);
    transition: all 0.2s ease;
}

.custom-palette-name:focus {
    outline: none;
    border-color: var(--ch-accent);
    box-shadow: 0 0 0 4px var(--ch-accent-soft);
    background: var(--ch-bg-primary);
}

/* Color Grid Section */
.custom-palette-preview {
    padding: 32px;
    background: var(--ch-bg-secondary);
}

.custom-palette-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
    padding: 24px;
    background: var(--ch-bg-primary);
    border-radius: 12px;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.06);
}

/* Color Slots - Premium Design */
.custom-color-slot {
    aspect-ratio: 1;
    border: 2px solid var(--ch-border);
    border-radius: 12px;
    cursor: pointer;
    position: relative;
    /* Removed transition to prevent bounce effect after dragging */
    overflow: hidden;
}

.custom-color-slot.empty {
    background: var(--ch-bg-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
}

.custom-color-slot.empty:hover {
    border-color: var(--ch-accent);
    background: var(--ch-accent-soft);
    /* Transform removed to prevent bounce effect */
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.2);
}

.add-color {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #2d2926;
    font-weight: 300;
    /* Removed transition to prevent bounce effect after dragging */
    cursor: pointer;
}

.custom-color-slot.empty:hover .add-color {
    color: var(--ch-accent);
    /* Transform removed to prevent bounce effect */
}

/* Filled Slots */
.custom-color-slot.filled {
    cursor: move;
    /* Box shadow removed to prevent visual splash when DOM updates */
    /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); */
}

/* Dragging state */
.custom-color-slot.dragging {
    opacity: 0.5;
    /* Transform removed to prevent bounce effect */
}

/* Drag over state */
.custom-color-slot.drag-over {
    border-color: var(--ch-accent);
    background-color: var(--ch-accent-soft);
    /* Transform removed to prevent bounce effect */
}

.custom-color-slot.filled:hover {
    /* Transform removed to prevent bounce effect */
    /* Box shadow and z-index removed to prevent splash effect on DOM update */
    /* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); */
    /* z-index: 10; */
}

/* Drag Handle */
.drag-handle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: rgba(255, 255, 255, 0.8);
    font-size: 16px;
    opacity: 0;
    /* Removed transition to prevent bounce effect after dragging */
    pointer-events: none;
}

.custom-color-slot.filled:hover .drag-handle {
    opacity: 1;
}

/* Remove Button */
.remove-color {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 24px;
    height: 24px;
    z-index: 10; /* Above drag area */
    background: #ff4757;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: bold;
    opacity: 0;
    /* Transform removed to prevent splash effect after dragging */
    /* transform: scale(0.8); */
    /* Removed transition to prevent bounce effect after dragging */
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.custom-color-slot.filled:hover .remove-color {
    opacity: 1;
    /* Transform removed to prevent splash effect */
    /* transform: scale(1); */
}

.remove-color:hover {
    background: #ff3838;
    /* Transform removed to prevent bounce effect */
}

/* Drag States */
.custom-color-slot.dragging {
    opacity: 0.5;
    /* Transform removed to prevent bounce effect */
}

.custom-color-slot.drag-over {
    border-color: var(--ch-accent);
    background: var(--ch-accent-soft);
    /* Transform removed to prevent bounce effect */
}

/* Actions Section */
.custom-palette-actions {
    padding: 24px 32px;
    background: var(--ch-bg-primary);
    border-top: 1px solid var(--ch-border-light);
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

/* Enhanced Buttons */
.custom-palette-actions button {
    padding: 12px 24px;
    border-radius: var(--ch-radius);
    font-weight: 500;
    font-size: 14px;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

.btn-secondary {
    background: var(--ch-bg-tertiary);
    border: 2px solid var(--ch-border);
    color: var(--ch-text-primary);
}

.btn-secondary:hover {
    background: var(--ch-bg-secondary);
    border-color: var(--ch-text-secondary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.btn-primary {
    background: var(--ch-accent);
    border: 2px solid var(--ch-accent);
    color: white;
    box-shadow: 0 2px 4px rgba(99, 102, 241, 0.3);
}

.btn-primary:hover:not(:disabled) {
    background: var(--ch-accent-hover);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
}

.btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Palette Info */
.palette-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 12px;
    font-size: 14px;
    color: var(--ch-text-secondary);
}

.color-count {
    font-weight: 600;
}

.min-colors-hint {
    font-size: 13px;
    color: #2d2926;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .custom-palette-grid {
        grid-template-columns: repeat(6, 1fr);
        gap: 8px;
        padding: 16px;
    }
    
    .custom-palette-editor-modal {
        max-width: 100%;
        width: 100%;
        height: 100%;
        max-height: 100%;
        border-radius: 0;
    }
}

/* Capacity Indicator Styling */
.palette-capacity {
    margin-top: 16px;
    text-align: center;
}

.capacity-indicator {
    font-size: 14px;
    color: var(--ch-text-secondary);
    margin-bottom: 8px;
}

.capacity-current {
    font-size: 18px;
    font-weight: 600;
    color: var(--ch-accent);
}

.capacity-divider {
    margin: 0 2px;
    color: #2d2926;
}

.capacity-total {
    font-size: 16px;
    color: var(--ch-text-primary);
}

.capacity-label {
    margin-left: 4px;
    font-size: 13px;
    color: var(--ch-text-secondary);
}

.capacity-bar {
    height: 4px;
    background: var(--ch-bg-tertiary);
    border-radius: 2px;
    overflow: hidden;
    max-width: 200px;
    margin: 0 auto;
}

.capacity-fill {
    height: 100%;
    background: var(--ch-accent);
    transition: width 0.3s ease;
}

/* Persistence Warning Styling */
.persistence-warning {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: rgba(255, 193, 7, 0.1);
    border: 1px solid rgba(255, 193, 7, 0.3);
    border-radius: 8px;
    margin-bottom: 16px;
}

.warning-icon {
    color: #FFC107;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
}

.warning-content {
    flex: 1;
    text-align: left;
}

.warning-title {
    font-weight: 600;
    color: var(--ch-text-primary);
    margin-bottom: 4px;
    font-size: 14px;
}

.warning-text {
    font-size: 13px;
    color: var(--ch-text-secondary);
    line-height: 1.4;
}

/* Ensure buttons are clickable */
.custom-palette-editor-modal button {
    pointer-events: auto !important;
    position: relative;
    z-index: 10;
    cursor: pointer;
}

.custom-palette-editor-modal .close-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    background: none;
    border: none;
    color: var(--ch-text-secondary);
    cursor: pointer;
    z-index: 20;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s ease;
}

.custom-palette-editor-modal .close-btn:hover {
    background: var(--ch-bg-tertiary);
    color: var(--ch-text-primary);
}

/* Duplicate .add-color rule removed - see line 3124 */

.no-colors-text {
    font-size: 11px;
    color: #2d2926;
    font-style: italic;
    text-align: center;
    padding: 8px 0;
}

/* Smooth animations */
@keyframes colorPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

.custom-color-slot.filled {
    /* Animation removed to prevent splash effect after dragging */
    /* animation: colorPulse 0.3s ease-out; */
}

.custom-palette-color-source {
    margin-top: 20px;
}

.custom-palette-color-source h3 {
    font-size: 16px;
    margin-bottom: 10px;
    color: var(--ch-text-primary);
}

.source-palette-select {
    width: 100%;
    padding: 8px 12px;
    border: 2px solid var(--ch-border);
    border-radius: var(--ch-radius-small);
    font-size: 14px;
    background: var(--ch-bg-secondary);
    color: var(--ch-text-primary);
    cursor: pointer;
    margin-bottom: 10px;
    transition: var(--ch-transition);
}

.source-palette-select:hover {
    border-color: var(--ch-accent);
}

.source-palette-select:focus {
    outline: none;
    border-color: var(--ch-accent);
    box-shadow: 0 0 0 3px var(--ch-accent-soft);
}

.source-palette-colors {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(36px, 1fr));
    gap: 8px;
    padding: 15px;
    background: var(--ch-bg-tertiary);
    border-radius: var(--ch-radius-small);
    max-height: 150px;
    overflow-y: auto;
}

.source-color {
    width: 36px;
    height: 36px;
    border-radius: var(--ch-radius-small);
    cursor: pointer;
    transition: var(--ch-transition);
    box-shadow: var(--ch-shadow);
    border: 1px solid transparent;
}

.source-color:hover {
    transform: scale(1.2);
    box-shadow: var(--ch-shadow-hover);
    border-color: var(--ch-text-primary);
}

/* Remove duplicate button styles - already defined above */

.custom-palette-info {
    background: var(--ch-bg-tertiary);
    padding: 20px;
    border-radius: var(--ch-radius);
    margin-bottom: 20px;
    border: 1px solid var(--ch-border-light);
}

.custom-palette-info p {
    margin: 0;
    color: var(--ch-text-secondary);
    font-size: 14px;
    line-height: 1.6;
}

.custom-palette-info .beta-notice {
    color: var(--ch-text-secondary);
    font-size: 13px;
    background: rgba(255, 107, 107, 0.08);
    padding: 10px 14px;
    border-radius: var(--ch-radius-small);
    border: 1px solid rgba(255, 107, 107, 0.2);
}

/* Add New Custom Palette Card */
.add-custom-palette-card {
    background: linear-gradient(135deg, #fef5f5 0%, #f5fcfc 100%);
    border: 2px dashed var(--ch-accent);
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
    overflow: visible; /* Allow + icon to show properly */
}

.add-custom-palette-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(
        circle at center,
        rgba(255, 107, 107, 0.1) 0%,
        transparent 70%
    );
    opacity: 0;
    transition: opacity 0.3s ease;
}

.add-custom-palette-card:hover {
    border-color: var(--ch-accent);
    background: linear-gradient(135deg, #ffebeb 0%, #ebfbfa 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(255, 107, 107, 0.15);
}

.add-custom-palette-card:hover::before {
    opacity: 1;
}

.add-custom-palette-card .palette-simple-name {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--ch-text-primary);
    font-weight: 600;
    font-size: 14px;
    position: relative;
    z-index: 1;
    overflow: visible; /* Allow + icon to overflow */
    height: auto; /* Don't constrain height */
}

.add-plus {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 300;
    color: white;
    background: var(--ch-accent, #ff6b6b);
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(255, 107, 107, 0.3);
    transition: all 0.3s ease;
    margin-right: 8px;
    flex-shrink: 0;
}

.add-custom-palette-card:hover .add-plus {
    transform: rotate(90deg) scale(1.1);
    box-shadow: 0 4px 12px rgba(255, 107, 107, 0.4);
}

.palette-count-badge {
    margin-left: auto;
    font-size: 13px;
    font-weight: 600;
    color: var(--ch-accent);
    background: white;
    padding: 2px 8px;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 107, 107, 0.2);
}

.add-new-placeholder {
    display: flex;
    gap: 4px;
    position: relative;
    z-index: 1;
}

.add-new-placeholder .empty-slot {
    width: 100%;
    aspect-ratio: 1;
    background: linear-gradient(135deg, white 0%, #f8f9fa 100%);
    border: 1.5px dashed rgba(255, 107, 107, 0.3);
    border-radius: 6px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.add-new-placeholder .empty-slot::before {
    content: '+';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: rgba(255, 107, 107, 0.3);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.add-custom-palette-card:hover .empty-slot {
    border-color: var(--ch-accent);
    background: linear-gradient(135deg, var(--ch-accent-soft) 0%, white 100%);
    transform: scale(1.05);
}

.add-custom-palette-card:hover .empty-slot::before {
    opacity: 1;
}

/* Stagger the animation */
.add-custom-palette-card:hover .empty-slot:nth-child(1) { transition-delay: 0ms; }
.add-custom-palette-card:hover .empty-slot:nth-child(2) { transition-delay: 50ms; }
.add-custom-palette-card:hover .empty-slot:nth-child(3) { transition-delay: 100ms; }
.add-custom-palette-card:hover .empty-slot:nth-child(4) { transition-delay: 150ms; }

/* Confirmation Modals */
.confirm-modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 4000000; /* Higher than all other modals */
    opacity: 0;
    transition: opacity 0.2s ease;
}

.confirm-modal-backdrop.active {
    opacity: 1;
}

.confirm-modal {
    background: white;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    max-width: 400px;
    width: 90%;
    transform: scale(0.9);
    transition: transform 0.2s ease;
}

.confirm-modal-backdrop.active .confirm-modal {
    transform: scale(1);
}

.confirm-modal .modal-header {
    padding: 24px 24px 16px;
    border-bottom: 1px solid #e2e6ea;
}

.confirm-modal .modal-header h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: var(--ch-text-primary);
}

.confirm-modal .modal-content {
    padding: 24px;
}

.confirm-modal .modal-content p {
    margin: 0 0 12px;
    font-size: 16px;
    color: var(--ch-text-primary);
    line-height: 1.5;
}

.confirm-modal .modal-content p:last-child {
    margin-bottom: 0;
}

.confirm-modal .confirm-warning {
    color: #dc3545;
    font-size: 14px;
    font-weight: 500;
}

.confirm-modal .modal-footer {
    padding: 16px 24px 24px;
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

.confirm-modal .btn {
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.confirm-modal .btn-secondary {
    background: #e2e6ea;
    color: var(--ch-text-primary);
}

.confirm-modal .btn-secondary:hover {
    background: #d1d5db;
}

.confirm-modal .btn-danger {
    background: #dc3545;
    color: white;
}

.confirm-modal .btn-danger:hover {
    background: #c82333;
}

/* Custom Palette Card Actions - uses base card styles */

.palette-actions {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 10;
}

.custom-palette-card:hover .palette-actions {
    opacity: 1;
}

.palette-action-btn {
    width: 28px;
    height: 28px;
    background: var(--ch-bg-secondary);
    border: 1px solid var(--ch-border);
    border-radius: var(--ch-radius-small);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--ch-transition);
    padding: 0;
    pointer-events: auto;
    position: relative;
    z-index: 10;
}

.palette-action-btn:hover {
    background: var(--ch-bg-primary);
    border-color: var(--ch-text-secondary);
    transform: scale(1.1);
}

.palette-action-btn svg {
    width: 16px;
    height: 16px;
    fill: var(--ch-text-secondary);
}

.palette-action-btn:hover svg {
    fill: var(--ch-text-primary);
}

/* Edit button styles moved to main section - see lines 2770-2785 */

.palette-action-btn.delete-palette {
    border-color: #e74c3c;
}

.palette-action-btn.delete-palette svg {
    fill: #e74c3c;
}

.palette-action-btn.delete-palette:hover {
    border-color: #c0392b;
    background: #fee;
}

.palette-action-btn.delete-palette:hover svg {
    fill: #c0392b;
}

/* Custom palette colors use base styles */

/* Export Button Styling */
.palette-action-btn.export-palette {
    border-color: #f39c12;
}

.palette-action-btn.export-palette svg {
    fill: #f39c12;
}

.palette-action-btn.export-palette:hover {
    border-color: #e67e22;
    background: #fef5e7;
}

.palette-action-btn.export-palette:hover svg {
    fill: #e67e22;
}

/* Import/Export Section */
.palette-import-section {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 16px 30px;
    border-top: 1px solid var(--ch-border);
    background: var(--ch-bg-tertiary);
    z-index: 10;
}

.import-palette-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: var(--ch-bg-secondary);
    border: 2px solid var(--ch-border);
    border-radius: var(--ch-radius-small);
    color: var(--ch-text-primary) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    cursor: pointer;
    transition: var(--ch-transition);
}

.import-palette-btn:hover {
    background: var(--ch-bg-primary);
    border-color: var(--ch-accent);
    color: var(--ch-accent) !important;
    box-shadow: var(--ch-shadow);
}

.import-palette-btn svg {
    fill: currentColor;
}

.import-help {
    font-size: 13px !important;
    font-weight: 400 !important;
    color: #2d2926 !important;
}

/* Export Modal */
.export-modal-backdrop,
.import-modal-backdrop,
.color-picker-modal-backdrop {
    z-index: 3100000; /* Higher than custom palette editor (3000000) */
}

.color-picker-modal-backdrop.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.export-modal,
.import-modal {
    max-width: 500px;
    width: 90%;
    z-index: 3100001;
}

.color-picker-modal {
    z-index: 3100001;
}

.export-code-wrapper,
.import-code-wrapper {
    margin: 20px 0;
}

.export-code,
.import-code {
    width: 100%;
    min-height: 100px;
    padding: 12px;
    border: 2px solid var(--ch-border);
    border-radius: var(--ch-radius-small);
    background: var(--ch-bg-tertiary);
    font-family: 'Courier New', monospace;
    font-size: 13px;
    color: var(--ch-text-primary);
    resize: vertical;
    word-break: break-all;
}

.export-code:focus,
.import-code:focus {
    outline: none;
    border-color: var(--ch-accent);
    box-shadow: 0 0 0 3px var(--ch-accent-soft);
}


/* Copy button with stronger specificity */
.coloringhub-modal .copy-code-btn,
.colorhub-modal-base .copy-code-btn {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    padding: 10px !important;
    margin-top: 10px !important;
    background: var(--ch-accent) !important;
    background-color: var(--ch-accent) !important;
    background-image: none !important;
    color: white !important;
    border: none !important;
    border-radius: var(--ch-radius-small) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: var(--ch-transition) !important;
}

.coloringhub-modal .copy-code-btn:hover,
.colorhub-modal-base .copy-code-btn:hover {
    background: var(--ch-accent-hover) !important;
    box-shadow: var(--ch-shadow-hover) !important;
}

.coloringhub-modal .copy-code-btn:active,
.colorhub-modal-base .copy-code-btn:active {
    background-color: var(--ch-accent-dark) !important;
    background-image: none !important;
    transform: translateY(1px) !important;
}

.coloringhub-modal .copy-code-btn:focus,
.colorhub-modal-base .copy-code-btn:focus {
    background: var(--ch-accent) !important;
    outline: 2px solid var(--ch-accent-light) !important;
    outline-offset: 2px !important;
    box-shadow: none !important;
}

.coloringhub-modal .copy-code-btn svg,
.colorhub-modal-base .copy-code-btn svg {
    fill: white !important;
    width: 16px !important;
    height: 16px !important;
}

/* Export modal specific styles */
.export-modal .copy-code-btn {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    padding: 10px !important;
    margin-top: 10px !important;
    background: var(--ch-accent) !important;
    background-color: var(--ch-accent) !important;
    background-image: none !important;
    color: white !important;
    border: none !important;
    border-radius: var(--ch-radius-small) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: var(--ch-transition) !important;
}

.export-modal .copy-code-btn:hover {
    background: var(--ch-accent-hover) !important;
    box-shadow: var(--ch-shadow-hover) !important;
}

.export-modal .copy-code-btn:active {
    background-color: var(--ch-accent-dark) !important;
    background-image: none !important;
    transform: translateY(1px) !important;
}

.export-modal .copy-code-btn:focus {
    background: var(--ch-accent) !important;
    outline: 2px solid var(--ch-accent-light) !important;
    outline-offset: 2px !important;
    box-shadow: none !important;
}

.export-modal .copy-code-btn svg {
    fill: white !important;
    width: 16px !important;
    height: 16px !important;
}


.export-success {
    text-align: center;
    color: var(--ch-accent-secondary);
    font-weight: 600;
    margin-top: 10px;
}

/* Import Modal */
.import-error {
    color: var(--ch-accent);
    font-size: 14px;
    margin: 10px 0;
    padding: 10px;
    background: var(--ch-accent-soft);
    border-radius: var(--ch-radius-small);
}

.import-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 20px;
}

.import-actions .btn-secondary,
.import-actions .btn-primary {
    padding: 10px 20px;
    border-radius: var(--ch-radius-small);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--ch-transition);
}

.import-actions .btn-secondary {
    background: var(--ch-bg-tertiary);
    border: 2px solid var(--ch-border);
    color: var(--ch-text-secondary);
}

.import-actions .btn-secondary:hover {
    background: var(--ch-border-light);
    border-color: var(--ch-text-secondary);
}

.import-actions .btn-primary {
    background: var(--ch-accent);
    border: none;
    color: white;
}

.import-actions .btn-primary:hover {
    background: var(--ch-accent-hover);
    box-shadow: var(--ch-shadow-hover);
}

/* Redesigned Color Picker Modal */
.color-picker-simple {
    max-width: 500px;
    width: 90%;
    max-height: 90vh;
}

.color-picker-simple .modal-content {
    padding: 0;
}

/* Color Section Styling */
.color-section {
    padding: 24px;
    border-bottom: 1px solid var(--ch-border-light);
}

.color-section:last-of-type {
    border-bottom: none;
}

.color-section h4 {
    font-size: 16px;
    font-weight: 600;
    color: var(--ch-text-primary);
    margin: 0 0 16px 0;
}

/* Popular Colors Grid */
.popular-colors-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 12px;
}

.popular-color {
    aspect-ratio: 1;
    border-radius: 8px;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.2s ease;
    position: relative;
}

.popular-color:hover {
    transform: scale(1.15);
    border-color: var(--ch-accent);
    z-index: 1;
}

.popular-color.selected {
    border-color: var(--ch-accent);
    box-shadow: 0 0 0 3px var(--ch-accent-soft);
}

/* Palette Scroll Container */
.palette-scroll-container {
    max-height: 300px;
    overflow-y: auto;
    padding: 12px;
    background: var(--ch-bg-tertiary);
    border-radius: 8px;
    border: 1px solid var(--ch-border-light);
}

.palette-scroll-container::-webkit-scrollbar {
    width: 8px;
}

.palette-scroll-container::-webkit-scrollbar-track {
    background: var(--ch-bg-secondary);
    border-radius: 4px;
}

.palette-scroll-container::-webkit-scrollbar-thumb {
    background: var(--ch-border);
    border-radius: 4px;
}

/* Picker Palette Styles */
.picker-palette {
    margin-bottom: 16px;
    padding: 12px;
    background: var(--ch-bg-primary);
    border-radius: var(--ch-radius);
    border: 1px solid var(--ch-border-light);
    transition: all 0.2s ease;
}

.picker-palette:hover {
    border-color: var(--ch-accent);
    box-shadow: var(--ch-shadow);
}

.picker-palette-name {
    font-weight: 600;
    font-size: 13px;
    margin-bottom: 8px;
    color: var(--ch-text-primary);
}

.picker-palette-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 4px;
}

.picker-color {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 4px;
    cursor: pointer;
    transition: transform 0.2s ease;
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.picker-color:hover {
    transform: scale(1.3);
    z-index: 1;
    box-shadow: var(--ch-shadow-hover);
}

/* Custom Color Input */
.custom-color-input {
    display: flex;
    align-items: center;
    gap: 16px;
}

.hex-input-simple {
    flex: 1;
    padding: 12px 16px;
    font-size: 16px;
    font-weight: 500;
    border: 2px solid var(--ch-border);
    border-radius: var(--ch-radius);
    background: var(--ch-bg-primary);
    transition: all 0.2s ease;
}

.hex-input-simple:focus {
    outline: none;
    border-color: var(--ch-accent);
    box-shadow: 0 0 0 3px var(--ch-accent-soft);
}

.color-preview-square {
    width: 48px;
    height: 48px;
    border-radius: var(--ch-radius);
    border: 2px solid var(--ch-border);
    flex-shrink: 0;
}

/* Selected Color Preview */
.selected-color-section {
    padding: 20px 24px;
    background: var(--ch-bg-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    border-bottom: 1px solid var(--ch-border-light);
}

.selected-color-preview {
    width: 60px;
    height: 60px;
    border-radius: var(--ch-radius);
    border: 3px solid var(--ch-border);
}

.selected-color-value {
    font-size: 20px;
    font-weight: 600;
    color: var(--ch-text-primary);
}

/* Picker Actions */
.picker-actions {
    padding: 20px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.picker-actions-right {
    display: flex;
    gap: 12px;
}

.export-progress-btn {
    display: flex;
    align-items: center;
    gap: 8px;
}

.export-progress-btn svg {
    width: 16px;
    height: 16px;
}

.color-picker-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    border-bottom: 2px solid var(--ch-border);
}

.tab-btn {
    padding: 10px 20px;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    color: var(--ch-text-secondary);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: var(--ch-transition);
}

.tab-btn:hover {
    color: var(--ch-text-primary);
}

.tab-btn.active {
    color: var(--ch-accent);
    border-bottom-color: var(--ch-accent);
}

.tab-content {
    min-height: 300px;
}

.tab-content.hidden {
    display: none;
}

/* Color Wheel Tab */
.color-picker-container {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}

.color-wheel {
    border-radius: 50%;
    cursor: crosshair;
    box-shadow: var(--ch-shadow);
}

.brightness-slider-container {
    flex: 1;
}

.brightness-slider-container label {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    color: var(--ch-text-secondary);
}

.brightness-slider {
    width: 100%;
    height: 8px;
    border-radius: 4px;
    background: linear-gradient(to right, #000, #fff);
    outline: none;
    -webkit-appearance: none;
}

.brightness-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: white;
    border: 2px solid var(--ch-text-secondary);
    cursor: pointer;
    box-shadow: var(--ch-shadow);
}

/* Color Inputs */
.color-inputs {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 20px;
}

.input-row {
    display: flex;
    gap: 15px;
}

.input-group {
    flex: 1;
}

.input-group label {
    display: block;
    margin-bottom: 5px;
    font-size: 12px;
    color: var(--ch-text-secondary);
    text-transform: uppercase;
}

.input-group input {
    width: 100%;
    padding: 8px 12px;
    border: 2px solid var(--ch-border);
    border-radius: var(--ch-radius-small);
    font-size: 14px;
    background: var(--ch-bg-secondary);
    color: var(--ch-text-primary);
    transition: var(--ch-transition);
}

.input-group input:focus {
    outline: none;
    border-color: var(--ch-accent);
    box-shadow: 0 0 0 3px var(--ch-accent-soft);
}

.hex-group {
    flex: 2;
}

.rgb-inputs {
    display: flex;
    gap: 10px;
}

.rgb-inputs .input-group {
    flex: 1;
}

/* Palette Tab */
.palette-selector-grid {
    max-height: 400px;
    overflow-y: auto;
}

.picker-palette-categories {
    display: flex;
    gap: 8px;
    margin-bottom: 15px;
    flex-wrap: wrap;
}

.picker-category-btn {
    padding: 6px 12px;
    background: var(--ch-bg-tertiary);
    border: 1px solid var(--ch-border);
    border-radius: var(--ch-radius-small);
    font-size: 13px;
    color: var(--ch-text-secondary);
    cursor: pointer;
    transition: var(--ch-transition);
}

.picker-category-btn:hover {
    background: var(--ch-bg-secondary);
    border-color: var(--ch-text-secondary);
}

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

.picker-palette {
    margin-bottom: 15px;
}

.picker-palette-name {
    font-size: 13px;
    color: var(--ch-text-secondary);
    margin-bottom: 8px;
}

.picker-palette-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 4px;
}

.picker-color {
    width: 30px;
    height: 30px;
    border-radius: var(--ch-radius-small);
    cursor: pointer;
    transition: var(--ch-transition);
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.1);
}

.picker-color:hover {
    transform: scale(1.1);
    box-shadow: var(--ch-shadow-hover);
}

/* Recent Colors Tab */
.recent-colors-grid {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 10px;
}

.no-recent-colors {
    grid-column: 1 / -1;
    text-align: center;
    color: #2d2926;
    padding: 40px;
}

/* Color Preview */
.color-preview-section {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px;
    background: var(--ch-bg-tertiary);
    border-radius: var(--ch-radius);
    margin: 20px 0;
}

.color-preview-large {
    width: 80px;
    height: 80px;
    border-radius: var(--ch-radius);
    box-shadow: var(--ch-shadow);
    border: 3px solid white;
}

.color-value {
    font-size: 18px;
    font-weight: 600;
    color: var(--ch-text-primary);
    font-family: 'Courier New', monospace;
}

/* Picker Actions */
.picker-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

/* Responsive adjustments for custom palette editor */
@media (max-width: 600px) {
    .custom-palette-editor-modal .custom-palette-grid {
        grid-template-columns: repeat(6, 1fr);
    }
    
    .custom-palette-editor-modal .custom-color-slot {
        width: 48px;
        height: 48px;
    }
}

/* World-Class Color Picker Modal */
.world-class-picker {
    max-width: 480px;
    width: 100%;
    max-height: calc(100vh - 40px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.world-class-picker .modal-header {
    padding: 14px 18px;
    border-bottom: 1px solid var(--ch-border-light);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--ch-bg-tertiary);
}

.world-class-picker .modal-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--ch-text-primary);
    margin: 0;
}

.world-class-picker .close-btn {
    width: 30px;
    height: 30px;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: var(--ch-radius-small);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ch-text-secondary);
    transition: var(--ch-transition);
}

.world-class-picker .close-btn:hover {
    background: var(--ch-bg-secondary);
    color: var(--ch-text-primary);
    transform: rotate(90deg);
}

.world-class-picker .close-btn svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    stroke-width: 2;
}

/* Modal Body */
.world-class-picker .modal-body {
    padding: 20px;
    flex: 1;
    overflow-y: auto;
}

/* Color Wheel with Vertical Brightness */
.color-picker-main {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
}

.color-wheel-container {
    position: relative;
}

.color-wheel {
    width: 220px;
    height: 220px;
    border-radius: 50%;
    position: relative;
    cursor: crosshair;
}

.color-wheel canvas {
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

.color-wheel-cursor {
    position: absolute;
    width: 24px;
    height: 24px;
    border: 3px solid white;
    border-radius: 50%;
    box-shadow: 
        0 0 0 1px rgba(0,0,0,0.3),
        0 2px 8px rgba(0,0,0,0.4),
        inset 0 0 0 2px rgba(0,0,0,0.1);
    transform: translate(-50%, -50%);
    pointer-events: none;
    transition: none;
    z-index: 10;
}

/* Central Preview */
.color-preview-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 75px;
    height: 75px;
    border-radius: 50%;
    background: var(--ch-accent);
    border: 4px solid white;
    box-shadow: 
        0 0 0 1px var(--ch-border-light),
        0 2px 10px rgba(0, 0, 0, 0.1);
    pointer-events: none;
    transition: background-color 0.15s ease;
}

/* Vertical Brightness Slider */
.brightness-vertical {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.brightness-label {
    font-size: 11px;
    font-weight: 500;
    color: var(--ch-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.brightness-slider-vertical {
    width: 30px;
    height: 170px;
    border-radius: 15px;
    border: 1px solid var(--ch-border);
    position: relative;
    cursor: pointer;
    background: linear-gradient(to top, #000000, #ffffff);
    overflow: hidden;
}

.brightness-handle {
    position: absolute;
    width: 36px;
    height: 36px;
    background: white;
    border: 2px solid var(--ch-text-primary);
    border-radius: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    cursor: grab;
    transition: none;
}

.brightness-handle:active {
    cursor: grabbing;
    transform: translate(-50%, -50%) scale(1.1);
}

.brightness-value {
    font-size: 12px;
    font-weight: 600;
    color: var(--ch-text-primary);
    min-height: 16px;
}

/* Hex Input Section */
.hex-section {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0 auto 20px;
    max-width: 280px;
}

.hex-input-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--ch-bg-secondary);
    border-radius: var(--ch-radius-small);
    padding: 0 12px;
    border: 1px solid var(--ch-border-light);
    height: 44px;
    min-width: 140px;
    max-width: 180px;
}

.hex-input,
#hexInput.hex-input {
    width: 80px;
    padding: 6px 0;
    font-size: 14px;
    font-family: 'SF Mono', 'Consolas', 'Menlo', monospace;
    border: none;
    background: transparent;
    color: var(--ch-text-primary);
    outline: none;
    box-shadow: none;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: center;
}

.hex-input:focus {
    outline: none;
}

.hex-input::placeholder {
    color: #2d2926;
}

/* Color preview inside hex input */
.hex-color-preview {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    border: 1px solid var(--ch-border-light);
    background-color: #FF6B6B;
    flex-shrink: 0;
}

/* Action buttons (eyedropper and random) */
.eyedropper-btn,
.random-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: var(--ch-bg-secondary);
    border: 1px solid var(--ch-border-light);
    border-radius: var(--ch-radius-small);
    cursor: pointer;
    color: var(--ch-text-secondary);
    transition: all 0.2s ease;
    padding: 0;
    flex-shrink: 0;
    position: relative;
}

.eyedropper-btn:hover,
.random-btn:hover {
    background: var(--ch-bg-tertiary);
    border-color: var(--ch-border);
    color: var(--ch-text-secondary) !important; /* Prevent theme from making icon white */
}

/* Special eyedropper animation on hover - apply to icon only */
.eyedropper-btn:hover {
    transform: none !important;
}
.eyedropper-btn:hover .colorhub-eyedropper-icon {
    transform: scale(0.85) rotate(-15deg) !important;
    display: block;
    transform-origin: center;
}

.eyedropper-btn:active,
.random-btn:active {
    transform: translateY(0);
}

.eyedropper-btn svg,
.random-btn svg {
    width: 22px;
    height: 22px;
    fill: currentColor;
}

/* Tooltips for action buttons - Disabled for cleaner UX
.eyedropper-btn::after,
.random-btn::after {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
}

.eyedropper-btn::after {
    content: 'Pick from screen';
}

.random-btn::after {
    content: 'Random color';
    margin-bottom: 4px;
}

.eyedropper-btn:hover::after,
.random-btn:hover::after {
    opacity: 1;
} */

/* Recently Used */
.recent-section {
    margin-bottom: 16px;
}

.recent-label {
    font-size: 9px;
    font-weight: 500;
    color: #2d2926;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    opacity: 0.7;
}

.recent-colors-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 6px;
    justify-items: center;
}

.recent-color-swatch {
    width: 32px;
    height: 32px;
    border-radius: var(--ch-radius-small);
    border: 1px solid rgba(0, 0, 0, 0.15);
    cursor: pointer;
    transition: var(--ch-transition);
    position: relative;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.recent-color-swatch:hover {
    transform: scale(1.15);
    box-shadow: var(--ch-shadow-hover);
    z-index: 10;
}

.recent-color-swatch.empty {
    background: var(--ch-bg-tertiary);
    background-image: 
        linear-gradient(45deg, rgba(0,0,0,0.03) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(0,0,0,0.03) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, rgba(0,0,0,0.03) 75%),
        linear-gradient(-45deg, transparent 75%, rgba(0,0,0,0.03) 75%);
    background-size: 10px 10px;
    background-position: 0 0, 0 5px, 5px -5px, -5px 0px;
    border: 1px dashed rgba(0, 0, 0, 0.25);
    cursor: default;
    opacity: 0.5;
    box-shadow: none;
}

.recent-color-swatch.empty:hover {
    transform: none;
    box-shadow: none;
}

/* Stronger border for light colors */
.recent-color-swatch.light-color {
    border-color: rgba(0, 0, 0, 0.3);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05);
}

/* Modal Footer */
.world-class-picker .modal-footer {
    padding: 14px 20px;
    border-top: 1px solid var(--ch-border-light);
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    background: var(--ch-bg-tertiary);
}

.world-class-picker .btn {
    padding: 9px 18px;
    border: 1px solid var(--ch-border);
    border-radius: var(--ch-radius-small);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: var(--ch-transition);
    background: var(--ch-bg-secondary);
    color: var(--ch-text-primary);
}

.world-class-picker .btn:hover {
    background: var(--ch-bg-primary);
    border-color: var(--ch-border);
}

.world-class-picker .btn-primary {
    background: var(--ch-accent);
    color: white;
    border-color: var(--ch-accent);
    padding: 9px 22px;
}

.world-class-picker .btn-primary:hover {
    background: var(--ch-accent-hover);
    border-color: var(--ch-accent-hover);
}

/* Mobile Responsive */
@media (max-width: 500px) {
    .world-class-picker {
        max-width: 100%;
        margin: 10px;
    }

    .world-class-picker .modal-body {
        padding: 16px;
    }

    .color-wheel {
        width: 180px;
        height: 180px;
    }

    .color-preview-center {
        width: 60px;
        height: 60px;
    }

    .brightness-slider-vertical {
        height: 140px;
    }

    .hex-input-wrapper {
        width: 200px;
    }

    .recent-color-swatch {
        width: 28px;
        height: 28px;
    }

    .recent-colors-grid {
        gap: 4px;
    }
}


/* Custom Palette Modal Polish */
.custom-palette-editor-modal .modal-header {
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.custom-palette-editor-modal .custom-color-slot {
    /* Removed transition to prevent bounce effect after dragging */
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.custom-palette-editor-modal .custom-color-slot:hover {
    /* Transform removed to prevent bounce effect */
    /* transform: translateY(-2px); */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.custom-palette-editor-modal .custom-color-slot.filled::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, transparent 50%);
    border-radius: inherit;
    pointer-events: none;
}

/* Fix X button alignment in Custom Palette Edit modal */
/* Removed X button position override - now uses default positioning */

/* Enhanced Color Picker Polish */
.enhanced-color-picker {
    backdrop-filter: blur(20px);
}

.enhanced-color-picker .modal-header {
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);
}

.color-wheel-canvas {
    box-shadow: 
        0 10px 30px rgba(0, 0, 0, 0.2),
        inset 0 0 20px rgba(255, 255, 255, 0.2);
}

.selected-color-preview-large {
    background-image: 
        linear-gradient(45deg, #e0e0e0 25%, transparent 25%),
        linear-gradient(-45deg, #e0e0e0 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #e0e0e0 75%),
        linear-gradient(-45deg, transparent 75%, #e0e0e0 75%);
    background-size: 10px 10px;
    background-position: 0 0, 0 5px, 5px -5px, -5px 0px;
    position: relative;
}

.selected-color-preview-large::after {
    content: '';
    position: absolute;
    inset: 0;
    background-color: inherit;
    border-radius: inherit;
}

/* Input Group Polish */
.input-group {
    position: relative;
}

.input-group label {
    background: var(--ch-bg-primary);
    padding: 0 4px;
    position: absolute;
    top: -8px;
    left: 12px;
    z-index: 1;
}

.hex-input,
.rgb-input,
.hsl-input {
    font-family: 'Courier New', monospace;
}

/* Button Polish */
.btn-primary,
.btn-secondary {
    font-weight: 600;
    letter-spacing: 0.025em;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

.btn-primary::before,
.btn-secondary::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    transform: translate(-50%, -50%);
    transition: width 0.3s, height 0.3s;
}

.btn-primary:active::before,
.btn-secondary:active::before {
    width: 200px;
    height: 200px;
}

/* Close Button Polish */
.close-btn,
.modal-close-button,
.custom-palette-close {
    transition: all 0.2s ease;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.close-btn:hover,
.modal-close-button:hover,
.custom-palette-close:hover {
    background: var(--ch-bg-tertiary);
    transform: rotate(90deg);
}

/* Smooth Scrollbars */
.modal-content::-webkit-scrollbar {
    width: 10px;
}

.modal-content::-webkit-scrollbar-track {
    background: var(--ch-bg-tertiary);
}

.modal-content::-webkit-scrollbar-thumb {
    background: var(--ch-border);
    border-radius: 5px;
    border: 2px solid var(--ch-bg-tertiary);
}

.modal-content::-webkit-scrollbar-thumb:hover {
    background: var(--ch-text-tertiary);
}

/* Glass Effect for Modals */
/* DUPLICATE .modal-backdrop definition removed (was at line 5342)
.modal-backdrop {
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px);
}
*/
/* Glass effect modifier for modals - use with .modal.glass-effect */
.modal.glass-effect {
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 
        0 20px 60px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(255, 255, 255, 0.5) inset;
}

/* World-Class Palette Editor UI */
.palette-editor-modal {
    background: var(--ch-bg-secondary);
    border-radius: var(--ch-radius);
    width: 100%;
    max-width: 480px;
    max-height: calc(100vh - 40px);
    margin: 0 auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.palette-editor-modal .modal-header {
    padding: 12px 16px;
    border-bottom: 1px solid var(--ch-border-light);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--ch-bg-tertiary);
    flex-shrink: 0;
}

.palette-editor-modal .modal-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--ch-text-primary);
}

.palette-editor-modal .modal-body {
    padding: 16px;
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
}

/* Ultra-compact Storage Warning */
.storage-warning {
    font-size: 14px;
    color: var(--ch-text-secondary);
    margin-top: -8px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.storage-warning svg {
    width: 18px;
    height: 18px;
    fill: #f39c12;
    flex-shrink: 0;
}

/* Palette Name Section */
.palette-name-section {
    margin-bottom: 14px;
}

.palette-name-label {
    font-size: 11px;
    font-weight: 500;
    color: var(--ch-text-secondary);
    margin-bottom: 4px;
    display: block;
}

.palette-editor-modal .palette-name-input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--ch-border);
    border-radius: var(--ch-radius-small);
    font-size: 13px;
    background: var(--ch-bg-tertiary);
    transition: var(--ch-transition);
}

.palette-editor-modal .palette-name-input:focus {
    outline: none;
    border-color: var(--ch-accent);
    background: var(--ch-bg-secondary);
}

/* Compact Color Grid */
.palette-editor-modal .color-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 6px;
    margin-bottom: 12px;
}

.palette-editor-modal .color-slot {
    width: 100%;
    aspect-ratio: 1;
    border-radius: var(--ch-radius-small);
    position: relative;
    cursor: pointer;
    transition: var(--ch-transition);
}

.palette-editor-modal .color-slot.empty {
    background: var(--ch-bg-tertiary);
    border: 2px dashed var(--ch-border);
    display: flex;
    align-items: center;
    justify-content: center;
}

.palette-editor-modal .color-slot.empty:hover {
    border-color: var(--ch-accent);
    background: var(--ch-bg-primary);
    /* Transform removed to prevent bounce effect */
}

.palette-editor-modal .color-slot.empty svg {
    width: 18px;
    height: 18px;
    stroke: #2d2926;
    stroke-width: 2;
}

.palette-editor-modal .color-slot.filled {
    border: 1px solid rgba(0, 0, 0, 0.12);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
    cursor: move;
    user-select: none;
    -webkit-user-drag: element;
}

.palette-editor-modal .color-slot.filled:hover {
    /* Transform removed to prevent bounce effect */
    box-shadow: var(--ch-shadow-hover);
    z-index: 10;
}

.palette-editor-modal .color-slot.dragging {
    opacity: 0.5;
    /* Transform removed to prevent bounce effect */
    z-index: 3100010;
}

.palette-editor-modal .color-slot.drag-over {
    background: var(--ch-accent) !important;
    /* Transform removed to prevent bounce effect */
}

.palette-editor-modal .color-slot.filled:active:not(.dragging) {
    /* Transform removed to prevent bounce effect */
}

.palette-editor-modal .color-slot.dragging {
    opacity: 0.5;
    /* Transform removed to prevent bounce effect */
    cursor: grabbing;
}

.palette-editor-modal .color-slot.drag-over {
    /* Transform removed to prevent bounce effect */
    border: 2px dashed var(--ch-accent);
}

/* Delete button on color slot */
.palette-editor-modal .delete-color {
    position: absolute;
    top: -5px;
    right: -5px;
    width: 18px;
    height: 18px;
    background: var(--ch-text-primary);
    color: white;
    border: 2px solid white;
    border-radius: 50%;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 12px;
    line-height: 1;
    transition: var(--ch-transition);
}

.palette-editor-modal .color-slot.filled:hover .delete-color {
    display: flex;
}

.palette-editor-modal .delete-color:hover {
    background: #e74c3c;
    /* Transform removed to prevent bounce effect */
}

/* Progress Counter */
.progress-counter {
    text-align: center;
    font-size: 12px;
    color: var(--ch-text-secondary);
    margin-bottom: 14px;
}

.progress-counter .count {
    color: var(--ch-accent);
    font-weight: 600;
}

/* Action Section */
.action-section {
    padding: 12px 16px;
    border-top: 1px solid var(--ch-border-light);
    background: var(--ch-bg-tertiary);
    flex-shrink: 0;
}

.action-buttons {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.palette-editor-modal .btn {
    padding: 8px 16px;
    border: 1px solid var(--ch-border);
    border-radius: var(--ch-radius-small);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: var(--ch-transition);
    background: var(--ch-bg-secondary);
    color: var(--ch-text-primary);
}

.palette-editor-modal .btn:hover {
    background: var(--ch-bg-primary);
    border-color: var(--ch-border);
}

.palette-editor-modal .btn-delete {
    color: #e74c3c;
    border-color: #e74c3c;
}

.palette-editor-modal .btn-delete:hover {
    background: #fee;
    color: #c0392b;
}

.palette-editor-modal .btn-danger,
.confirm-modal .btn-danger {
    background: #e74c3c;
    color: white;
    border-color: #e74c3c;
}

.palette-editor-modal .btn-danger:hover,
.confirm-modal .btn-danger:hover {
    background: #c0392b;
    border-color: #c0392b;
}

.palette-editor-modal .btn-primary {
    background: var(--ch-accent);
    color: white;
    border-color: var(--ch-accent);
    padding: 8px 20px;
}

.palette-editor-modal .btn-primary:hover {
    background: var(--ch-accent-hover);
    border-color: var(--ch-accent-hover);
}

.palette-editor-modal .btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.palette-editor-modal .btn:disabled:hover {
    transform: none;
}

/* Confirmation Modal */
.confirm-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 3100000;
    padding: 20px;
    pointer-events: none;
}

.confirm-modal.active {
    display: flex;
    pointer-events: auto;
}

.confirm-dialog {
    background: var(--ch-bg-secondary);
    border-radius: var(--ch-radius);
    padding: 20px;
    max-width: 360px;
    width: 100%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    animation: bounceIn 0.4s ease;
    pointer-events: auto;
    position: relative;
    z-index: 3100001;
}

.confirm-title {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 10px;
    color: var(--ch-text-primary);
}

.confirm-message {
    font-size: 13px;
    color: var(--ch-text-secondary);
    margin-bottom: 16px;
    line-height: 1.5;
}

.confirm-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.confirm-actions button {
    pointer-events: auto !important;
    cursor: pointer;
    position: relative;
    z-index: 3100002;
}

/* Ensure custom palette editor modal has proper z-index */
.custom-palette-editor-modal-backdrop {
    z-index: 3000000; /* Higher than palette modal which is 2000001 */
}

.custom-palette-editor-modal {
    z-index: 3000001;
    position: relative;
}

/* Toast */
.palette-editor-modal ~ .toast {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: var(--ch-text-primary);
    color: white;
    padding: 10px 20px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    box-shadow: var(--ch-shadow-hover);
    z-index: 3000;
    opacity: 0;
    transition: all 0.3s ease;
}

.palette-editor-modal ~ .toast.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

/* Smooth scrollbar */
.palette-editor-modal .modal-body::-webkit-scrollbar {
    width: 6px;
}

.palette-editor-modal .modal-body::-webkit-scrollbar-track {
    background: transparent;
}

.palette-editor-modal .modal-body::-webkit-scrollbar-thumb {
    background: var(--ch-border);
    border-radius: 3px;
}

.palette-editor-modal .modal-body::-webkit-scrollbar-thumb:hover {
    background: var(--ch-text-tertiary);
}

/* Mobile Responsive */
@media (max-width: 500px) {
    .palette-editor-modal {
        max-width: 100%;
        max-height: calc(100vh - 20px);
        margin: 10px;
    }

    .palette-editor-modal .modal-body {
        padding: 12px;
    }

    .palette-editor-modal .color-slot {
        width: 48px;
        height: 48px;
    }

    .palette-editor-modal .color-grid {
        gap: 4px;
    }

    .storage-warning {
        font-size: 11px;
    }
}

/* Animation */
@keyframes popIn {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes bounceIn {
    0% {
        transform: scale(0.8);
        opacity: 0;
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* New Color Picker Controls */
.colorhub-color-controls {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--ch-border-light);
    margin-left: -16px;
    margin-right: -16px;
    padding-left: 16px;
    padding-right: 16px;
}

.colorhub-active-color {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    cursor: pointer;
    position: relative;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    outline: 2px solid transparent;
    outline-offset: 2px;
}

.colorhub-active-color:hover {
    transform: scale(1.05);
    outline: 2px solid var(--ch-border);
    outline-offset: 2px;
}

.colorhub-active-color.changing {
    /* Animation removed for instant feedback */
}

@keyframes colorPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

.colorhub-icon-group {
    display: flex;
    gap: 6px;
    padding: 3px;
    background: var(--ch-bg-tertiary);
    border-radius: 11px;
    position: relative; /* For help dot positioning */
}

.colorhub-icon-btn {
    width: 40px;
    height: 40px;
    border: 1px solid var(--ch-border-light);
    background: var(--ch-bg-tertiary);
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.colorhub-icon-btn:hover {
    background: var(--ch-bg-secondary);
    border-color: var(--ch-border);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.colorhub-icon-btn:active {
    transform: translateY(0);
    box-shadow: 
        0 2px 4px rgba(0, 0, 0, 0.08),
        inset 0 1px 2px rgba(0, 0, 0, 0.06);
    background-color: var(--ch-bg-secondary) !important;
}

.colorhub-picker-icon {
    width: 20px;
    height: 20px;
    position: relative;
}

.colorhub-picker-icon svg {
    width: 100%;
    height: 100%;
}

.colorhub-picker-icon circle {
    transition: all 0.3s ease;
}

.colorhub-icon-btn:hover .colorhub-picker-icon svg {
    transform: rotate(90deg);
}

.colorhub-icon-btn:hover .colorhub-picker-icon .ring {
    stroke-width: 3;
}

.colorhub-dice-icon {
    width: 20px;
    height: 20px;
    position: relative;
}

.colorhub-dice-icon svg {
    width: 100%;
    height: 100%;
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* Black on white dice design */
.colorhub-dice-icon svg rect {
    fill: white;
    stroke: #333;
    stroke-width: 2;
    rx: 3;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
}

.colorhub-dice-icon svg circle {
    fill: #333;
    transition: all 0.2s ease;
}

/* Dot morphing animation */
@keyframes dotMorphIn {
    0% { 
        opacity: 0; 
        transform: scale(0);
    }
    50% { 
        transform: scale(1.2);
    }
    100% { 
        opacity: 1; 
        transform: scale(1);
    }
}

@keyframes dotMorphOut {
    0% { 
        opacity: 1; 
        transform: scale(1);
    }
    100% { 
        opacity: 0; 
        transform: scale(0);
    }
}

.colorhub-dice-icon svg circle.morphing-in {
    animation: dotMorphIn 0.3s ease-out forwards;
}

.colorhub-dice-icon svg circle.morphing-out {
    animation: dotMorphOut 0.2s ease-in forwards;
}

.colorhub-icon-btn:hover .colorhub-dice-icon svg {
    transform: rotate(180deg) scale(1.1);
}

/* Fix focus styles for dice button - only show on keyboard nav */
.dice-btn:focus {
    outline: none;
}

.dice-btn:focus-visible {
    outline: 2px solid var(--ch-border);
    outline-offset: 1px;
}

/* Remove focus after mouse click */
.dice-btn:focus:not(:focus-visible) {
    outline: none;
}

/* Color preview bubble */
.dice-btn {
    position: relative;
}

.color-preview-bubble {
    position: absolute;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 10;
    opacity: 0;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    border: 2px solid white;
}

.color-preview-bubble.show {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.color-preview-bubble.expand {
    opacity: 0;
    transform: translate(-50%, -50%) scale(3);
}

/* Tooltips - Disabled for cleaner UX
.colorhub-icon-btn::after {
    content: attr(data-tooltip);
    position: absolute;
    top: -32px;
    left: 50%;
    transform: translateX(-50%) scale(0.8);
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 4px 12px;
    border-radius: 6px;
    font-size: 12px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: all 0.2s ease;
    z-index: 1000000;
}

.colorhub-icon-btn:hover::after {
    opacity: 1;
    transform: translateX(-50%) scale(1);
} */

/* Dice bounce animation */
@keyframes diceBounce {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    25% { transform: translateY(-4px) rotate(-5deg); }
    50% { transform: translateY(0) rotate(5deg); }
    75% { transform: translateY(-2px) rotate(-2deg); }
}

/* Ensure dice button has proper positioning */
.colorhub-dice-icon {
    position: relative;
    z-index: 1;
}

.dice-bounce {
    animation: diceBounce 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* Eyedropper icon styling */
.colorhub-eyedropper-icon {
    width: 20px;
    height: 20px;
    position: relative;
}

.colorhub-eyedropper-icon svg {
    width: 100%;
    height: 100%;
    transition: all 0.3s ease;
    stroke-width: 1.5;
    /* Scale down slightly to match other icons visually */
    transform: scale(0.85);
    transform-origin: center;
}

.colorhub-icon-btn:hover .colorhub-eyedropper-icon svg {
}

/* White flash feedback */
@keyframes diceFlash {
    0% { background-color: transparent; }
    50% { background-color: rgba(255, 255, 255, 0.8); }
    100% { background-color: transparent; }
}

.dice-flash::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 3px;
    pointer-events: none;
    animation: diceFlash 0.1s ease-out;
}

/* Removed dice help dot and guide popup - clean UI approach */

/* First-time dice tutorial overlay */
.dice-tutorial-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.9);
    z-index: 9999999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    backdrop-filter: blur(4px);
}

.dice-tutorial-overlay.show {
    opacity: 1;
}

.tutorial-content {
    background: var(--ch-bg-primary);
    border-radius: 16px;
    padding: 32px;
    max-width: 480px;
    text-align: center;
    transform: scale(0.9);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}

.dice-tutorial-overlay.show .tutorial-content {
    transform: scale(1);
}

.tutorial-content h3 {
    font-size: 24px;
    margin: 0 0 12px 0;
    color: var(--ch-text-primary);
}

.tutorial-content p {
    color: var(--ch-text-secondary);
    margin: 0 0 24px 0;
    font-size: 16px;
}

.dice-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin: 0 0 32px 0;
}

.dice-card {
    background: var(--ch-bg-tertiary);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.dice-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--ch-shadow);
}

.dice-face {
    font-size: 32px;
    line-height: 1;
}

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

.dice-desc {
    font-size: 12px;
    color: #2d2926;
}

.tutorial-cta {
    background: var(--ch-accent);
    color: white;
    border: none;
    padding: 16px 32px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.tutorial-cta:hover {
    background: var(--ch-accent-hover);
    box-shadow: 0 4px 12px rgba(255, 107, 107, 0.3);
}

/* Dice guide popup */
.dice-guide-popup {
    position: absolute;
    background: var(--ch-bg-primary);
    border: 1px solid var(--ch-border);
    border-radius: 12px;
    box-shadow: var(--ch-shadow-lg);
    z-index: 1000;
    animation: popIn 0.2s ease;
    min-width: 200px;
}

@keyframes popIn {
    from {
        opacity: 0;
        transform: translateY(-50%) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateY(-50%) scale(1);
    }
}

.guide-arrow {
    position: absolute;
    left: -6px;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    background: var(--ch-bg-primary);
    border: 1px solid var(--ch-border);
    border-right: none;
    border-top: none;
    transform: translateY(-50%) rotate(45deg);
}

.guide-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--ch-border-light);
    font-weight: 600;
    font-size: 14px;
}

.guide-close {
    background: none;
    border: none;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    color: #2d2926;
    padding: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.guide-close:hover {
    background: var(--ch-bg-tertiary);
    color: var(--ch-text-primary);
}

.guide-content {
    padding: 12px;
}

.guide-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px;
    border-radius: 6px;
    transition: background 0.2s ease;
}

.guide-item:hover {
    background: var(--ch-bg-tertiary);
}

.mini-dice {
    font-size: 20px;
    width: 28px;
    text-align: center;
}

.guide-item {
    font-size: 13px;
    color: var(--ch-text-secondary);
}

/* ============================================
   Advanced Color Picker Modal Styles
   ============================================ */

/* Modal Overlay */
.colorhub-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 4000000; /* Higher than other modals */
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
}

.colorhub-modal-overlay.active {
    display: flex;
}

/* Modal Content */
.colorhub-modal-content {
    position: relative;
    background: var(--ch-bg-primary);
    border-radius: 16px;
    padding: 20px;
    width: min(480px, 90vw);
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    animation: slideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Custom scrollbar for modal */
.colorhub-modal-content::-webkit-scrollbar {
    width: 6px;
}

.colorhub-modal-content::-webkit-scrollbar-track {
    background: transparent;
}

.colorhub-modal-content::-webkit-scrollbar-thumb {
    background: #ddd;
    border-radius: 3px;
}

.colorhub-modal-content::-webkit-scrollbar-thumb:hover {
    background: #bbb;
}

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

.colorhub-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.colorhub-modal-header h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--ch-text-primary);
    margin: 0;
}

.colorhub-close-btn {
    width: 32px;
    height: 32px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    color: var(--ch-text-secondary);
    transition: all 0.2s ease;
    visibility: visible !important;
    opacity: 1 !important;
}

.colorhub-close-btn:hover {
    background: var(--ch-bg-tertiary);
    color: var(--ch-text-primary);
}

.colorhub-close-btn svg {
    width: 20px;
    height: 20px;
}

/* Color Picker Area */
.colorhub-color-picker-area {
    margin-bottom: 16px;
}

.colorhub-saturation-brightness {
    width: 100%;
    height: 160px;
    border-radius: 12px;
    position: relative;
    cursor: crosshair;
    overflow: hidden;
    background: linear-gradient(to bottom, transparent, black),
                linear-gradient(to right, white, transparent);
    background-color: #ff0000;
    margin-bottom: 10px;
}

.colorhub-color-cursor {
    position: absolute;
    width: 16px;
    height: 16px;
    border: 2px solid white;
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.2);
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.colorhub-hue-slider {
    width: 100%;
    height: 24px;
    border-radius: 12px;
    background: linear-gradient(to right, 
        #ff0000 0%, 
        #ffff00 17%, 
        #00ff00 33%, 
        #00ffff 50%, 
        #0000ff 67%, 
        #ff00ff 83%, 
        #ff0000 100%);
    position: relative;
    cursor: pointer;
    margin-bottom: 16px;
}

.colorhub-hue-cursor {
    position: absolute;
    width: 24px;
    height: 24px;
    border: 3px solid white;
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.2);
    top: 0;
    transform: translateX(-50%);
    pointer-events: none;
    background: #ff0000;
}

.colorhub-preview-row {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}

.colorhub-color-preview-large {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 3px solid var(--ch-border);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: background-color 0.2s ease;
    flex-shrink: 0;
}

.colorhub-modal-icons {
    background: var(--ch-bg-tertiary);
    padding: 3px;
    border-radius: 11px;
}

.colorhub-modal-icons .colorhub-icon-btn {
    width: 40px;
    height: 40px;
}

.colorhub-modal-icons .colorhub-icon-btn:hover {
    background: var(--ch-bg-primary);
}

/* Modal-specific icon styling */
.colorhub-modal-icons .colorhub-dice-icon svg,
.colorhub-modal-icons .colorhub-icon-btn svg {
    width: 20px;
    height: 20px;
}

/* Modal dice black on white design */
.colorhub-modal-icons .colorhub-dice-icon svg rect {
    fill: white;
    stroke: #333;
    stroke-width: 2;
    rx: 3;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
}

.colorhub-modal-icons .colorhub-dice-icon svg circle {
    fill: #333;
}

/* Modal dice needs relative positioning for flash */
.colorhub-modal-icons .dice-btn {
    position: relative;
}

.colorhub-modal-icons .colorhub-icon-btn {
    position: relative;
}

/* Modal icon tooltips */
.colorhub-modal-icons .colorhub-icon-btn[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    top: -32px;
    left: 50%;
    transform: translateX(-50%) scale(0.8);
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 4px 12px;
    border-radius: 6px;
    font-size: 12px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: all 0.2s ease;
    z-index: 10000000; /* Same as dice toast */
}

.colorhub-modal-icons .colorhub-icon-btn:hover::after {
    opacity: 1;
    transform: translateX(-50%) scale(1);
}

/* Input Section */
.colorhub-color-inputs {
    background: var(--ch-bg-tertiary);
    padding: 14px;
    border-radius: 12px;
    margin-bottom: 16px;
}

.colorhub-input-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.colorhub-input-row:last-child {
    margin-bottom: 0;
}

.colorhub-input-row:first-child {
    justify-content: flex-start;
}

.colorhub-input-row label {
    width: 40px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ch-text-secondary);
}

.colorhub-input-row input {
    height: 32px;
    padding: 0 8px;
    border: 1px solid var(--ch-border);
    border-radius: 6px;
    font-size: 13px;
    transition: all 0.2s ease;
    background: var(--ch-bg-primary);
    color: var(--ch-text-primary);
}

.colorhub-input-row input:focus {
    outline: none;
    border-color: var(--ch-accent);
    box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.1);
}

.colorhub-input-row input.invalid {
    border-color: #ff4444;
}

#hexInput {
    width: 100px;
    font-family: 'SF Mono', Monaco, monospace;
    text-transform: uppercase;
}

#rInput, #gInput, #bInput,
#hInput, #sInput, #lInput {
    width: 60px;
}

.colorhub-unit {
    font-size: 12px;
    color: #2d2926;
    margin: 0 -4px;
}

.colorhub-action-btn {
    padding: 6px 12px;
    background: #f5f5f5 !important;
    border: 1px solid #ddd !important;
    border-radius: 6px;
    font-size: 12px !important;
    font-weight: 500 !important;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    z-index: 1;
    color: #2d2926 !important;
    min-width: 50px;
    text-align: center;
}

.colorhub-action-btn:hover {
    background: var(--ch-bg-secondary);
    border-color: var(--ch-border-hover);
}

.colorhub-action-btn:active {
    transform: scale(0.95);
    background-color: var(--ch-bg-secondary) !important;
}

.colorhub-action-btn:focus {
    outline: 2px solid var(--ch-accent);
    outline-offset: 2px;
}

.colorhub-action-btn.copied {
    color: #4ade80 !important;
}

/* Protect Copy button from WordPress themes */
.color-picker-modal .colorhub-action-btn:focus {
    background: var(--ch-bg-secondary) !important;
    border-color: var(--ch-border-hover) !important;
    color: var(--ch-text-primary) !important;
    outline: 2px solid var(--ch-accent) !important;
    outline-offset: 2px !important;
}

/* Modal Actions */
.colorhub-modal-actions {
    display: flex;
    gap: 12px;
    margin-top: 4px;
}

.colorhub-modal-btn {
    flex: 1;
    padding: 12px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.colorhub-modal-btn.colorhub-cancel {
    background: #faf8f7;
    color: var(--ch-text-primary);
    border: 1px solid #e8e2dc;
}

.colorhub-modal-btn.colorhub-cancel:hover {
    background: #f5f3f0;
}

.colorhub-modal-btn.colorhub-confirm {
    background: var(--ch-accent);
    color: white;
}

.colorhub-modal-btn.colorhub-confirm:hover {
    background: var(--ch-accent-hover);
    box-shadow: 0 4px 12px rgba(255, 107, 107, 0.3);
}

/* Color applied feedback */
@keyframes colorPulse {
    0% { 
        box-shadow: 0 0 0 0 rgba(255, 107, 107, 0.7);
    }
    70% { 
        box-shadow: 0 0 0 20px rgba(255, 107, 107, 0);
    }
    100% { 
        box-shadow: 0 0 0 0 rgba(255, 107, 107, 0);
    }
}

.colorhub-active-color.pulse {
    /* Animation removed for cleaner interaction */
}

/* Toast notification */
.colorhub-toast {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 13px;
    opacity: 0;
    transition: all 0.3s ease;
    z-index: 5000000; /* Higher than all modals */
    pointer-events: none;
}

.colorhub-toast.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

/* Mobile/Tablet Responsive */
@media (max-width: 480px) {
    .colorhub-modal-content {
        padding: 16px;
    }

    .colorhub-saturation-brightness {
        height: 140px;
    }

    .colorhub-preview-row {
        justify-content: center;
    }

    .colorhub-color-preview-large {
        width: 44px;
        height: 44px;
    }
}

@media (max-width: 320px) {
    .colorhub-modal-content {
        padding: 14px;
    }

    .colorhub-saturation-brightness {
        height: 120px;
    }

    .colorhub-input-row {
        flex-wrap: wrap;
        gap: 6px;
    }

    .colorhub-input-row label {
        width: 100%;
    }
}

/* Removed generic tooltip styles to avoid conflicts with existing implementations */


/* Edge Indicators */

/* Edge Indicators */
.edge-indicators {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 10;
}

.edge-indicator {
    position: absolute;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.edge-indicator.visible {
    opacity: 1;
}

/* Top edge */
.edge-indicator.edge-top {
    top: 0;
    left: 0;
    right: 0;
    height: 30px;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.1) 0%,
        transparent 100%
    );
}

/* Right edge */
.edge-indicator.edge-right {
    top: 0;
    right: 0;
    bottom: 0;
    width: 30px;
    background: linear-gradient(
        to left,
        rgba(0, 0, 0, 0.1) 0%,
        transparent 100%
    );
}

/* Bottom edge */
.edge-indicator.edge-bottom {
    bottom: 0;
    left: 0;
    right: 0;
    height: 30px;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.1) 0%,
        transparent 100%
    );
}

/* Left edge */
.edge-indicator.edge-left {
    top: 0;
    left: 0;
    bottom: 0;
    width: 30px;
    background: linear-gradient(
        to right,
        rgba(0, 0, 0, 0.1) 0%,
        transparent 100%
    );
}

/* Pulse animation for first zoom */
@keyframes edge-pulse {
    0%, 100% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
}

.edge-indicators.pulse-once .edge-indicator.visible {
    animation: edge-pulse 2s ease-out;
}

/* Arrow indicators (optional enhancement) */
.edge-indicator::after {
    content: '';
    position: absolute;
    opacity: 0.5;
}

.edge-indicator.edge-top::after {
    content: '↑';
    top: 5px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 14px;
    color: #2d2926;
}

.edge-indicator.edge-right::after {
    content: '→';
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    color: #2d2926;
}

.edge-indicator.edge-bottom::after {
    content: '↓';
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 14px;
    color: #2d2926;
}

.edge-indicator.edge-left::after {
    content: '←';
    left: 5px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    color: #2d2926;
}

/* Zoom preset buttons - Added for delightful zoom */

/* Zoom preset buttons */
.zoom-presets {
    display: flex;
    gap: 4px;
    margin-right: 12px;
}

.zoom-preset-btn {
    background: var(--ch-bg-tertiary);
    border: 1px solid var(--ch-border-light);
    border-radius: var(--ch-radius-small);
    padding: 6px 10px;
    font-size: 16px;
    cursor: pointer;
    transition: var(--ch-transition);
    min-width: 36px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.zoom-preset-btn:hover {
    background: var(--ch-bg-secondary);
    border-color: var(--ch-accent);
    box-shadow: var(--ch-shadow);
}

.zoom-preset-btn:active {
    transform: translateY(0);
}

/* ColorHub Confirmation Modal - Complete CSS */
.colorhub-confirm-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2500000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
}

.colorhub-confirm-modal.colorhub-confirm-active {
    opacity: 1;
    visibility: visible;
}

.colorhub-confirm-dialog {
    background: var(--ch-bg-primary);
    border-radius: var(--ch-radius-large);
    padding: 40px;
    max-width: 480px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--ch-shadow-float);
    transform: scale(0.95);
    transition: transform 0.2s ease;
    position: relative;
}

.colorhub-confirm-modal.colorhub-confirm-active .colorhub-confirm-dialog {
    transform: scale(1);
}

.colorhub-confirm-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    background: none;
    border: none;
    cursor: pointer;
    color: #999;
    font-size: 24px;
    line-height: 1;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    border-radius: 50%;
}

.colorhub-confirm-close:hover {
    color: #333;
    background: #f5f5f5;
}

.colorhub-confirm-title {
    font-size: 24px;
    font-weight: 600;
    color: var(--ch-text-primary);
    margin: 0 0 16px 0;
    padding: 0 40px;
    text-align: center;
}

.colorhub-confirm-message {
    font-size: 16px;
    color: var(--ch-text-secondary);
    line-height: 1.6;
    margin: 0 0 32px 0;
    text-align: center;
}

.colorhub-confirm-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
}

.colorhub-confirm-cancel,
.colorhub-confirm-confirm {
    /* Size & Layout */
    min-height: 44px;
    padding: 12px 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    
    /* Typography */
    font-size: 15px;
    font-weight: 500;
    line-height: 1.2;
    font-family: inherit;
    text-align: center;
    text-decoration: none;
    
    /* Appearance */
    border-radius: 8px;
    border: none;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    
    /* Interaction */
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateZ(0);
    -webkit-tap-highlight-color: transparent;
}

/* Secondary style for cancel button */
.colorhub-confirm-cancel {
    background: white;
    color: var(--ch-text-secondary, #666);
    border: 1.5px solid var(--ch-border, #e0e0e0);
    font-weight: 400;
}

.colorhub-confirm-cancel:hover:not(:disabled) {
    background: var(--ch-bg-tertiary, #f8f8f8);
    border-color: var(--ch-text-tertiary, #a09890);
    color: var(--ch-text-primary, #2d2926);
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.colorhub-confirm-cancel:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: none;
}

/* Primary style for confirm button */
.colorhub-confirm-confirm.colorhub-btn-primary {
    background: var(--ch-accent, #ff6b6b);
    color: white;
    font-weight: 500;
    box-shadow: 0 2px 8px rgba(255, 107, 107, 0.25);
}

.colorhub-confirm-confirm.colorhub-btn-primary:hover:not(:disabled) {
    background: var(--ch-accent-hover, #ff5252);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 107, 107, 0.35);
}

.colorhub-confirm-confirm.colorhub-btn-primary:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(255, 107, 107, 0.2);
}

/* Danger style for destructive actions */
.colorhub-confirm-confirm.colorhub-btn-danger {
    background: var(--ch-danger, #e74c3c);
    color: white;
    font-weight: 500;
    box-shadow: 0 2px 8px rgba(231, 76, 60, 0.25);
}

.colorhub-confirm-confirm.colorhub-btn-danger:hover:not(:disabled) {
    background: #c0392b;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(231, 76, 60, 0.35);
}

.colorhub-confirm-confirm.colorhub-btn-danger:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(231, 76, 60, 0.2);
}

/* Mobile adjustments */
@media (max-width: 640px) {
    .colorhub-confirm-dialog {
        padding: 24px;
        max-width: 320px;
    }
    
    .colorhub-confirm-title {
        font-size: 18px;
    }
    
    .colorhub-confirm-message {
        font-size: 14px;
    }
}




/* ===== MODALS COMPONENT STYLES ===== */
/* Base Modal System - Consistent design for all modals */
/* Design System: 24px titles, 16px messages, 15px buttons, 44px touch targets */

.colorhub-modal-base {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
}

.colorhub-modal-base.colorhub-modal-active {
    opacity: 1;
    visibility: visible;
}

.colorhub-modal-dialog {
    background: white;
    border-radius: 12px;
    padding: 40px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    transform: scale(0.95);
    transition: transform 0.2s ease;
    position: relative;
}

/* Modal sizes */
.modal-sm .colorhub-modal-dialog {
    max-width: 360px;
}

.modal-md .colorhub-modal-dialog {
    max-width: 440px;  /* Current default */
}

.modal-lg .colorhub-modal-dialog {
    max-width: 600px;
}

.colorhub-modal-base.colorhub-modal-active .colorhub-modal-dialog {
    transform: scale(1);
}

/* Close button - consistent across all modals */
.colorhub-modal-close,
.edit-palette-modal .colorhub-modal-close,
.export-palette-modal .colorhub-modal-close,
.import-palette-modal .colorhub-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    background: none;
    border: none;
    cursor: pointer;
    color: #2d2926 !important; /* Changed from #999 for visibility */
    font-size: 24px !important;
    line-height: 1;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    border-radius: 50%;
    opacity: 1 !important;
    text-shadow: none !important;
}

.colorhub-modal-close:hover {
    color: #333;
    background: #f5f5f5;
}

/* ==============================================
   UNIFIED BUTTON DESIGN SYSTEM FOR COLORHUB
   
   Design Principles:
   - Delightful & inviting
   - Clear visual hierarchy
   - Consistent across all modals
   - 44px min touch targets
   - Smooth interactions
   ============================================== */

/* Base button styles for ALL ColorHub modals */
.colorhub-modal-base .colorhub-btn,
.colorhub-device-check-modal .colorhub-btn,
.colorhub-feedback-modal .colorhub-btn {
    /* Size & Layout */
    min-height: 44px;
    padding: 12px 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    
    /* Typography */
    font-size: 15px;
    font-weight: 500;
    line-height: 1.2;
    font-family: inherit;
    text-align: center;
    text-decoration: none;
    
    /* Appearance */
    border-radius: 8px;
    border: none;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    
    /* Interaction */
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateZ(0);
    -webkit-tap-highlight-color: transparent;
}

/* Primary Button - The Star of the Show */
.colorhub-modal-base .colorhub-btn-primary,
.colorhub-device-check-modal .colorhub-btn-primary,
.colorhub-feedback-modal .colorhub-btn-primary {
    background: var(--ch-accent, #ff6b6b);
    color: white;
    font-weight: 500;
    box-shadow: 0 2px 8px rgba(255, 107, 107, 0.25);
}

/* Primary hover - Delightful lift effect */
.colorhub-modal-base .colorhub-btn-primary:hover:not(:disabled),
.colorhub-device-check-modal .colorhub-btn-primary:hover:not(:disabled),
.colorhub-feedback-modal .colorhub-btn-primary:hover:not(:disabled) {
    background: var(--ch-accent-hover, #ff5252);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 107, 107, 0.35);
}

/* Primary active - Satisfying press */
.colorhub-modal-base .colorhub-btn-primary:active:not(:disabled),
.colorhub-device-check-modal .colorhub-btn-primary:active:not(:disabled),
.colorhub-feedback-modal .colorhub-btn-primary:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(255, 107, 107, 0.2);
}

/* Secondary Button - Supporting Role */
.colorhub-modal-base .colorhub-btn-secondary,
.colorhub-device-check-modal .colorhub-btn-secondary,
.colorhub-feedback-modal .colorhub-btn-secondary {
    background: white;
    color: var(--ch-text-secondary, #666);
    border: 1.5px solid var(--ch-border, #e0e0e0);
    font-weight: 400;
}

/* Secondary hover - Subtle invitation */
.colorhub-modal-base .colorhub-btn-secondary:hover:not(:disabled),
.colorhub-device-check-modal .colorhub-btn-secondary:hover:not(:disabled),
.colorhub-feedback-modal .colorhub-btn-secondary:hover:not(:disabled) {
    background: var(--ch-bg-tertiary, #f8f8f8);
    border-color: var(--ch-text-tertiary, #a09890);
    color: var(--ch-text-primary, #2d2926);
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

/* Secondary active */
.colorhub-modal-base .colorhub-btn-secondary:active:not(:disabled),
.colorhub-device-check-modal .colorhub-btn-secondary:active:not(:disabled),
.colorhub-feedback-modal .colorhub-btn-secondary:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: none;
}

/* Disabled State - Clear but not harsh */
.colorhub-modal-base .colorhub-btn:disabled,
.colorhub-device-check-modal .colorhub-btn:disabled,
.colorhub-feedback-modal .colorhub-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

/* Focus State - Accessibility */
.colorhub-modal-base .colorhub-btn:focus-visible,
.colorhub-device-check-modal .colorhub-btn:focus-visible,
.colorhub-feedback-modal .colorhub-btn:focus-visible {
    outline: 2px solid var(--ch-accent);
    outline-offset: 2px;
}

/* Loading State Animation */
.colorhub-btn.loading {
    color: transparent;
    pointer-events: none;
}

.colorhub-btn.loading::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    top: 50%;
    left: 50%;
    margin-left: -8px;
    margin-top: -8px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: white;
    animation: button-spin 0.8s linear infinite;
}

/* Secondary button loading state */
.colorhub-btn-secondary.loading::after {
    border-color: rgba(0, 0, 0, 0.1);
    border-top-color: var(--ch-text-secondary);
}

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

/* Modals - Base styles that were accidentally deleted */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s;
}

.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}


.modal-overlay.active .modal {
    transform: scale(1);
}

.modal-header {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 16px;
    color: var(--ch-text-primary);
}

.modal-content {
    margin-bottom: 20px;
}

/* Confirmation Modal - using existing .confirm-modal CSS from coloringhub-all.css */
/* Just add the X button style that's missing */
.confirm-close-x {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 24px;
    height: 24px;
    background: none;
    border: none;
    cursor: pointer;
    color: #999;
    font-size: 24px;
    line-height: 1;
    padding: 0;
    transition: color 0.2s;
}

.confirm-close-x:hover {
    color: #333;
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

/* DUPLICATE SECTION REMOVED - See lines 2770-3126 for consolidated palette styles */

/* Help Modal */
.help-modal {
    max-width: 480px;
}

.help-content {
    color: var(--ch-text-secondary);
    line-height: 1.6;
}

.help-section {
    margin-bottom: 20px;
}

.help-section h3 {
    font-size: 14px;
    font-weight: 600;
    color: var(--ch-text-primary);
    margin-top: 0;
    margin-bottom: 8px;
}

.shortcut-list {
    list-style: none;
    font-size: 13px;
}

.shortcut-list li {
    padding: 4px 0;
    display: flex;
    justify-content: space-between;
}

.shortcut-key {
    font-family: monospace;
    background: var(--ch-bg-tertiary);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 11px;
}

.beta-notice {
    background: var(--ch-accent-soft);
    padding: 12px;
    border-radius: var(--ch-radius-small);
    font-size: 13px;
    margin-bottom: 16px;
}

.feedback-link {
    color: var(--ch-accent);
    cursor: pointer;
    text-decoration: underline;
}

.feedback-link:hover {
    color: var(--ch-accent-hover);
}

.version-info {
    font-size: 11px;
    color: #2d2926;
    text-align: center;
    margin-top: 16px;
}

/* Color Picker Modal */
.color-picker-modal {
    max-width: 420px;
}

.color-preview-large {
    width: 100%;
    height: 60px;
    border-radius: var(--ch-radius-small);
    border: 1px solid var(--ch-border);
    margin-bottom: 20px;
    box-shadow: var(--ch-shadow);
}

/* Color Wheel */
.color-wheel-container {
    width: 200px;
    height: 200px;
    margin: 0 auto 20px;
    position: relative;
}

.color-wheel {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: relative;
    cursor: crosshair;
}

.color-wheel canvas {
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

.color-wheel-cursor {
    position: absolute;
    width: 20px;
    height: 20px;
    border: 3px solid white;
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.5), 0 2px 4px rgba(0,0,0,0.3);
    transform: translate(-50%, -50%);
    pointer-events: none;
}

/* Value/Brightness Slider */
.value-slider-container {
    margin-bottom: 20px;
}

.value-gradient {
    width: 100%;
    height: 20px;
    border-radius: var(--ch-radius-small);
    border: 1px solid var(--ch-border);
    position: relative;
    cursor: pointer;
    margin-bottom: 4px;
}

.value-slider-handle {
    position: absolute;
    width: 24px;
    height: 24px;
    background: white;
    border: 2px solid var(--ch-text-primary);
    border-radius: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    cursor: grab;
}

.value-slider-handle:active {
    cursor: grabbing;
}

/* Color Inputs */
.color-inputs {
    display: flex;
    gap: 12px;
}

.color-input-group {
    flex: 1;
}

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

.color-input-group input[type="text"] {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid var(--ch-border);
    border-radius: var(--ch-radius-small);
    font-size: 12px;
    background: var(--ch-bg-tertiary);
}

.color-input-group input[type="text"]:focus {
    outline: none;
    border-color: var(--ch-accent);
}

/* Feedback Modal - removed duplicate unused styles */
/* See line 8110+ for active feedback modal styles */

/* Legacy button styles - kept for backwards compatibility */
/* NEW: Use .colorhub-btn classes for all ColorHub modals - see modals.css */
.btn {
    padding: 8px 16px;
    border: 1px solid var(--ch-border);
    border-radius: var(--ch-radius-small);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: var(--ch-transition);
    background: var(--ch-bg-tertiary);
    color: var(--ch-text-primary);
}

.btn:hover {
    background: var(--ch-bg-primary);
    border-color: var(--ch-accent);
}

.btn:active {
    transform: translateY(0);
}

.btn:focus-visible {
    outline: 2px solid var(--ch-text-tertiary);
    outline-offset: 2px;
}

.btn-primary {
    background: var(--ch-accent);
    color: white;
    border-color: var(--ch-accent);
}

.btn-primary:hover {
    background: var(--ch-accent-hover);
    border-color: var(--ch-accent-hover);
}

/* Loading state */
.btn.loading {
    position: relative;
    color: transparent;
    pointer-events: none;
}

.btn.loading::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    top: 50%;
    left: 50%;
    margin-left: -8px;
    margin-top: -8px;
    border: 2px solid var(--ch-text-tertiary);
    border-radius: 50%;
    border-top-color: var(--ch-accent);
    animation: spin 0.8s linear infinite;
}

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

/* Warning text */
.warning-text {
    color: var(--ch-text-secondary);
    font-size: 14px;
    margin-bottom: 16px;
    line-height: 1.5;
}

/* Mobile Welcome Screen */
.mobile-welcome {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--ch-bg-secondary);
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px;
    z-index: 2000;
    text-align: center;
}

.mobile-welcome.active {
    display: flex;
}

.mobile-welcome svg {
    width: 80px;
    height: 80px;
    margin-bottom: 24px;
    color: var(--ch-accent);
}

.mobile-welcome h2 {
    font-size: 24px;
    margin-bottom: 16px;
    color: var(--ch-text-primary);
}

.mobile-welcome p {
    font-size: 16px;
    color: var(--ch-text-secondary);
    margin-bottom: 32px;
    line-height: 1.6;
}

.mobile-welcome-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
}

.mobile-welcome-btn {
    padding: 12px 24px;
    border: 1px solid var(--ch-border);
    border-radius: var(--ch-radius);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: var(--ch-transition);
    background: var(--ch-bg-tertiary);
    color: var(--ch-text-primary);
}

.mobile-welcome-btn:hover {
    background: var(--ch-bg-primary);
    border-color: var(--ch-accent);
}

.mobile-welcome-btn.primary {
    background: var(--ch-accent);
    color: white;
    border-color: var(--ch-accent);
}

.mobile-welcome-btn.primary:hover {
    background: var(--ch-accent-hover);
}

.mobile-welcome-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--ch-text-secondary);
}

.mobile-welcome-close:hover {
    color: var(--ch-text-primary);
}

/* Don't show again checkbox */
.mobile-welcome-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--ch-text-secondary);
    margin-top: 8px;
}

.mobile-welcome-checkbox input {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* Mobile Color Panel */
.mobile-color-panel {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--ch-bg-secondary);
    border-radius: var(--ch-radius) var(--ch-radius) 0 0;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
    transform: translateY(100%);
    transition: transform 0.3s ease;
    z-index: 200;
    padding: 20px;
    max-height: 60vh;
    overflow-y: auto;
}

.mobile-color-panel.active {
    transform: translateY(0);
}

.mobile-color-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.mobile-color-panel-close {
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--ch-text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.mobile-color-panel::-webkit-scrollbar {
    width: 6px;
}

.mobile-color-panel::-webkit-scrollbar-track {
    background: transparent;
}

.mobile-color-panel::-webkit-scrollbar-thumb {
    background: var(--ch-border);
    border-radius: 3px;
}

.mobile-color-panel::-webkit-scrollbar-thumb:hover {
    background: var(--ch-text-tertiary);
}

/* Floating Action Button (FAB) */
.fab-color {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 56px;
    height: 56px;
    background: var(--ch-accent);
    color: white;
    border-radius: 50%;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    z-index: 100;
    transition: var(--ch-transition);
}

.fab-color svg {
    width: 24px;
    height: 24px;
    fill: currentColor;
}

.fab-color:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

.fab-color:active {
    transform: scale(0.95);
}

/* ColorHub Confirmation Modal - Fresh CSS to avoid conflicts */
.colorhub-confirm-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2500000;  /* High z-index for ColorHub modals */
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
}

.colorhub-confirm-modal.colorhub-confirm-active {
    opacity: 1;
    visibility: visible;
}

.colorhub-confirm-dialog {
    background: white;
    border-radius: 12px;
    padding: 40px;
    max-width: 440px;
    width: 90%;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    transform: scale(0.95);
    transition: transform 0.2s ease;
    position: relative;
}

.colorhub-confirm-modal.colorhub-confirm-active .colorhub-confirm-dialog {
    transform: scale(1);
}

.colorhub-confirm-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    background: none;
    border: none;
    cursor: pointer;
    color: #999;
    font-size: 24px;
    line-height: 1;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    border-radius: 50%;
}

.colorhub-confirm-close:hover {
    color: #333;
    background: #f5f5f5;
}

.colorhub-confirm-title {
    font-size: 24px;
    font-weight: 600;
    color: #333;
    margin: 0 0 16px 0;
    padding-right: 40px; /* Space for X button */
    text-align: center;
    line-height: 1.3;
}

.colorhub-confirm-message {
    font-size: 16px;
    color: #666;
    line-height: 1.6;
    margin: 0 0 28px 0;
    text-align: center;
}

.colorhub-confirm-actions {
    display: flex;
    justify-content: center; /* Changed from flex-end for better consistency */
    gap: 12px;
}

/* Confirmation modal button styles - now handled by unified button system in modals.css */
.colorhub-confirm-cancel,
.colorhub-confirm-confirm {
    /* Inherits from unified button system */
}

/* Danger button variant */
.colorhub-btn-danger {
    background: var(--ch-danger, #e74c3c);
    color: white;
    font-weight: 500;
    box-shadow: 0 2px 8px rgba(231, 76, 60, 0.25);
}

.colorhub-btn-danger:hover:not(:disabled) {
    background: #c0392b;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(231, 76, 60, 0.35);
}

.colorhub-btn-danger:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(231, 76, 60, 0.2);
}

/* Mobile adjustments */
@media (max-width: 640px) {
    .colorhub-confirm-dialog {
        padding: 24px;
        max-width: 320px;
    }
    
    .colorhub-confirm-title {
        font-size: 20px;
    }
    
    .colorhub-confirm-message {
        font-size: 15px;
    }
}

/* Toast Messages */
.toast {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--ch-text-primary);
    color: white;
    padding: 12px 24px;
    border-radius: 24px;
    font-size: 14px;
    font-weight: 500;
    box-shadow: var(--ch-shadow-hover);
    z-index: 3000;
    animation: slideUp 0.3s ease-out;
}

/* Responsive Design */
@media (max-width: 768px) {
    .palette-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Print Styles */
@media print {
    .mobile-welcome,
    .fab-color {
        display: none !important;
    }
}

/* Prevent focus leak on Feedback modal initial load */
.colorhub-feedback-modal .star:focus {
    outline: none !important;
}
.colorhub-feedback-modal .star:focus-visible {
    outline: 2px solid var(--ch-accent) !important;
}

/* Prevent focus leak on Feedback modal close button */
.colorhub-feedback-modal .colorhub-modal-close:focus {
    outline: none !important;
}
.colorhub-feedback-modal .colorhub-modal-close:focus-visible {
    outline: 2px solid var(--ch-text-tertiary) !important;
    outline-offset: 2px !important;
}

/* Feedback Modal - Complete Redesign with Unified Center Alignment */
.colorhub-feedback-modal .colorhub-modal-dialog {
    background: white;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    padding: 40px;
    max-height: 90vh;
    overflow-y: auto;
    border-radius: 16px;
    max-width: 480px;
}

.colorhub-feedback-modal .colorhub-modal-header {
    border-bottom: none;
    padding: 0;
    margin-bottom: 28px;
    text-align: center;
    position: relative;
}

/* Title Section with Beta Indicator - Properly Centered */
.colorhub-feedback-modal .feedback-title-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
    width: 100%;
}

.colorhub-feedback-modal .beta-indicator {
    display: inline-block;
    background: var(--ch-accent, #ff6b6b);
    color: white;
    padding: 4px 14px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin: 0 auto; /* Ensure centering */
}

.colorhub-feedback-modal .colorhub-modal-title {
    font-size: 26px;
    font-weight: 600;
    color: var(--ch-text-primary, #2d2926);
    margin: 0;
    line-height: 1.2;
    text-align: center;
    width: 100%;
}

.colorhub-feedback-modal .colorhub-modal-body {
    padding: 0 40px; /* Add horizontal padding to prevent content touching edges */
}

/* Content Container - Everything Centered */
.colorhub-feedback-modal .feedback-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 24px;
}

/* Question Text */
.colorhub-feedback-modal .feedback-question {
    font-size: 17px;
    color: var(--ch-text-secondary, #666);
    font-weight: 400;
    line-height: 1.4;
    margin: 0 0 -8px 0; /* Reduce gap before stars */
}

/* Stars Container */
.colorhub-feedback-modal .feedback-stars-container {
    width: 100%;
}

/* Comment Container with Optional Label */
.colorhub-feedback-modal .feedback-comment-container {
    width: 100%;
    position: relative;
    margin-top: 4px;
}

/* Optional indicator */
.colorhub-feedback-modal .feedback-comment-container::before {
    content: "optional";
    position: absolute;
    top: -18px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 12px;
    color: #aaa;
    font-style: italic;
    text-transform: lowercase;
}

/* Star Rating */
.colorhub-feedback-modal .feedback-rating {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: 0;
    padding: 8px 0;
}

.colorhub-feedback-modal .feedback-rating.error {
    animation: shake-simple 0.3s ease-in-out;
}

@keyframes shake-simple {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
}

.colorhub-feedback-modal .feedback-star {
    background: none;
    border: none;
    font-size: 42px;
    color: #e0e0e0;
    cursor: pointer;
    padding: 4px 8px;
    transition: all 0.15s ease;
    min-width: 48px;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.colorhub-feedback-modal .feedback-star:hover {
    transform: scale(1.15);
    color: var(--ch-accent, #ff6b6b);
}

.colorhub-feedback-modal .feedback-star.hover {
    color: var(--ch-accent, #ff6b6b);
}

.colorhub-feedback-modal .feedback-star.active {
    color: var(--ch-accent, #ff6b6b);
    transform: scale(1.05);
}

.colorhub-feedback-modal .feedback-star:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

/* Comment Textarea - Clean Centered Design */
.colorhub-feedback-modal .feedback-comment {
    width: 100%;
    padding: 16px;
    border: 2px solid #e8e8e8;
    border-radius: 12px;
    font-size: 15px;
    font-family: inherit;
    resize: vertical;
    min-height: 120px;
    background: #fafafa;
    transition: all 0.2s ease;
    line-height: 1.6;
    text-align: center;
}

.colorhub-feedback-modal .feedback-comment::placeholder {
    color: #999;
    text-align: center;
}

.colorhub-feedback-modal .feedback-comment:focus {
    outline: none;
    border-color: var(--ch-accent, #ff6b6b);
    background: white;
    box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.1);
}

.colorhub-feedback-modal .feedback-comment:disabled {
    background: #f5f5f5;
    cursor: not-allowed;
    opacity: 0.7;
}

/* Success State */
.colorhub-feedback-modal .feedback-success {
    padding: 20px 0;
    text-align: center;
    position: relative;
}

.colorhub-feedback-modal .success-icon {
    width: 56px;
    height: 56px;
    background: #28a745;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    position: relative;
}

.colorhub-feedback-modal .success-icon svg {
    width: 28px;
    height: 28px;
    color: white;
}

.colorhub-feedback-modal .success-message {
    font-size: 18px;
    color: var(--ch-text-primary);
    margin: 0 0 8px 0;
    font-weight: 600;
    text-align: center;
    line-height: 1.4;
}

.colorhub-feedback-modal .success-submessage {
    font-size: 15px;
    color: var(--ch-text-secondary);
    margin: 0;
    text-align: center;
    line-height: 1.5;
}

/* Error Message - Simple */
.colorhub-feedback-modal .feedback-error {
    background: #fee;
    color: #c00;
    padding: 10px 12px;
    border-radius: 6px;
    font-size: 14px;
    margin-top: 12px;
    border: 1px solid #fcc;
}

/* Modal Footer - Centered Buttons */
.colorhub-feedback-modal .colorhub-modal-footer {
    display: flex;
    justify-content: center;
    gap: 16px;
    padding-top: 32px;
    margin-top: 0;
    border-top: none;
}

/* Buttons - Clean Standard Design */
.colorhub-feedback-modal .colorhub-btn {
    padding: 10px 20px;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
    min-height: 44px;
}

.colorhub-feedback-modal .colorhub-btn-primary {
    background: var(--ch-accent, #ff6b6b);
    color: white;
    padding: 10px 24px;
}

.colorhub-feedback-modal .colorhub-btn-primary:hover:not(:disabled) {
    background: #ff5252;
}

.colorhub-feedback-modal .colorhub-btn-secondary {
    background: white;
    color: var(--ch-text-secondary, #666);
    border: 1px solid var(--ch-border, #e0e0e0);
}

.colorhub-feedback-modal .colorhub-btn-secondary:hover:not(:disabled) {
    background: var(--ch-bg-tertiary, #f8f8f8);
    border-color: #d0d0d0;
}

.colorhub-feedback-modal .colorhub-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Mobile Responsive */
@media (max-width: 640px) {
    .colorhub-feedback-modal .colorhub-modal-dialog {
        padding: 24px 20px;
        max-height: 90vh;
        overflow-y: auto;
    }
    
    .colorhub-feedback-modal .colorhub-modal-title {
        font-size: 20px;
    }
    
    .colorhub-feedback-modal .feedback-subtitle {
        font-size: 14px;
    }
    
    .colorhub-feedback-modal .feedback-rating-section {
        padding: 16px;
    }
    
    .colorhub-feedback-modal .feedback-star {
        font-size: 28px;
        min-width: 44px; /* Keep touch target */
    }
    
    .colorhub-feedback-modal .feedback-comment {
        min-height: 80px;
    }
    
    .colorhub-feedback-modal .colorhub-btn {
        font-size: 14px;
        padding: 10px 16px;
    }
}

/* Device Check Modal Specific Styles */
.colorhub-device-check-modal .colorhub-modal-body {
    padding: 20px 30px 15px; /* Consistent padding */
}

.colorhub-device-check-modal .colorhub-modal-message {
    font-size: 24px;
    margin: 0 0 12px 0; /* Equal spacing of 12px after title */
    text-align: center;
    padding: 0 40px; /* Add horizontal padding to match BaseModal title centering */
    font-weight: 600;
    color: var(--ch-text-primary);
}

.colorhub-device-check-modal .colorhub-modal-body p {
    font-size: 16px;
    line-height: 1.6;
    margin: 0 0 12px 0; /* Equal spacing of 12px between all elements */
    text-align: center;
}

/* Remove bottom margin from last paragraph */
.colorhub-device-check-modal .colorhub-modal-body p:last-child {
    margin-bottom: 0;
}

.colorhub-device-check-modal .colorhub-modal-question {
    font-weight: 500;
    margin-top: 0;
    margin-bottom: 0;
    /* Removed padding-bottom for equal spacing */
}

.colorhub-device-check-modal .colorhub-modal-cta {
    font-weight: 500;
    color: var(--ch-accent);
}

.colorhub-device-check-modal .colorhub-modal-footer {
    padding: 12px 30px 20px; /* Reduced top padding for tighter spacing */
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.colorhub-device-check-modal .colorhub-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
}

.colorhub-device-check-modal .icon {
    font-size: 18px;
}

/* Space+pan cursor */
.coloringhub-modal.wpco-space-held .canvas-container {
  cursor: grab !important;
}

.coloringhub-modal.wpco-space-held .canvas-container canvas {
  cursor: grab !important;
}

/* ========================================
   PALETTE MODAL COMPREHENSIVE FIX - DO NOT MODIFY
   Created: 2025-06-04
   
   This section fixes ALL palette modal issues:
   1. Missing color blocks in "All" view
   2. Inconsistent card heights between regular/custom cards
   3. Modal height changes when switching tabs
   4. Font size consistency (14px)
   
   WARNING: These styles use !important to override
   any conflicting styles. Do not remove or modify
   without understanding the full impact.
   ======================================== */

/* CRITICAL: Fixed modal height to prevent resizing between tabs */
.modal.palette-modal-simple {
    height: 640px !important; /* Fixed height desktop */
    max-height: 90vh !important;
}

/* CRITICAL: Fixed grid height for consistent modal size */
.palette-simple-grid {
    height: 420px !important;
    max-height: 420px !important;
    min-height: 420px !important;
}

/* CRITICAL: ALL cards must be exactly 80px height (desktop) */
.palette-simple-card,
.palette-simple-card.custom-palette-card,
.palette-simple-card.add-custom-palette-card,
.palette-simple-card.disabled,
.custom-palette-card,
.add-custom-palette-card {
    height: 80px !important;
    min-height: 80px !important;
    max-height: 80px !important;
}

/* CRITICAL: Restore original 14px font size */
.palette-simple-name {
    font-size: 14px !important;
}

/* CRITICAL FIX: Force color preview blocks to ALWAYS display */
.palette-simple-colors {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: 24px !important;
    min-height: 24px !important;
}

/* CRITICAL FIX: Force individual color blocks to be visible */
.palette-color-block {
    display: block !important;
    /* Removed visibility: visible !important - was causing blocks to show through hidden modal */
    opacity: 1 !important;
    height: 24px !important;
    min-height: 24px !important;
    flex: 1 !important;
}

/* Mobile responsive fixes (tablets and phones) */
@media (max-width: 768px) {
    .modal.palette-modal-simple {
        height: 600px !important; /* Fixed height mobile */
    }
    
    .palette-simple-grid {
        height: 380px !important;
        min-height: 380px !important;
        max-height: 380px !important;
    }
    
    /* ALL cards must be 70px on mobile */
    .palette-simple-card,
    .palette-simple-card.custom-palette-card,
    .palette-simple-card.add-custom-palette-card,
    .palette-simple-card.disabled,
    .custom-palette-card,
    .add-custom-palette-card {
        height: 70px !important;
        min-height: 70px !important;
        max-height: 70px !important;
    }
    
    .palette-simple-name {
        font-size: 13px !important; /* Slightly smaller on mobile */
    }
    
    .palette-simple-colors,
    .palette-color-block {
        height: 22px !important;
        min-height: 22px !important;
    }
}

/* Ensure filtered palettes are hidden */
.palette-simple-card[data-filtered="true"] {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* DUPLICATE SECTION REMOVED - See lines 2770-3126 for consolidated palette styles */

/* END PALETTE MODAL COMPREHENSIVE FIX */

/* CRITICAL: Hide palette color blocks when modal is not active */
.modal-backdrop:not(.active) .palette-color-block {
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Device Check Modal - Button Styles (duplicate styles removed) */

.colorhub-device-check-modal .colorhub-modal-cta {
    font-weight: 500;
    color: var(--ch-accent);
}

.colorhub-device-check-modal .colorhub-modal-footer {
    padding: 12px 30px 20px; /* Reduced top padding for tighter spacing */
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Special Device Check Modal Buttons - Full Width */
.colorhub-device-check-modal .colorhub-btn {
    width: 100%;
    justify-content: center;
    padding: 14px 20px;
}

.colorhub-device-check-modal .colorhub-btn .icon {
    font-size: 20px;
    margin-right: 2px;
}

/* Touch-friendly adjustments */
@media (hover: none) {
    .colorhub-btn:active,
    .colorhub-confirm-cancel:active,
    .colorhub-confirm-confirm:active {
        transition-duration: 0.1s;
    }
}

/* Small screen adjustments */
@media (max-width: 640px) {
    .colorhub-modal-base .colorhub-btn,
    .colorhub-device-check-modal .colorhub-btn,
    .colorhub-feedback-modal .colorhub-btn,
    .colorhub-confirm-cancel,
    .colorhub-confirm-confirm {
        font-size: 14px;
        padding: 10px 18px;
        min-height: 44px; /* Maintain touch target */
    }
}

/* Help Modal Two-Column Layout */
.help-modal {
    max-width: 720px !important; /* Override previous max-width */
}

.help-modal .modal-content {
    padding: 20px 0;
}

/* Help Modal Mac Users Note */
.help-subtitle {
    /* Simple text styling - no box */
    background: none;
    border: none;
    border-radius: 0;
    padding: 0;
    
    /* Subtle text appearance */
    color: #666;
    font-size: 13px;
    line-height: 1.4;
    
    /* Tight spacing to pull closer to title */
    margin: -6px 0 16px 0;
    
    /* Layout */
    display: block;
    width: 100%;
    text-align: left;
}

/* Keep header spacing for help modal */
.help-modal .modal-header {
    margin-bottom: 12px;
}

/* Two-column layout for Tools and Actions */
.shortcuts-columns {
    display: flex;
    gap: 40px;
    margin-bottom: 30px;
}

.shortcuts-column {
    flex: 1;
}

.shortcuts-column h3,
.shortcuts-navigation h3 {
    font-size: 16px;
    font-weight: 600;
    color: var(--ch-text-primary, #2d2926);
    margin-top: 0;
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

/* Navigation section - full width */
.shortcuts-navigation {
    margin-bottom: 30px;
}

.shortcuts-row {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.shortcuts-row .shortcut-item {
    flex: 0 1 calc(50% - 10px);
}

/* Shortcut items */
.shortcut-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    font-size: 14px;
    color: var(--ch-text-secondary, #666);
}

.shortcut-item kbd {
    background: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 4px 8px;
    font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
    font-size: 13px;
    font-weight: 500;
    color: var(--ch-text-primary, #2d2926);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    white-space: nowrap;
    min-width: 28px;
    text-align: center;
    display: inline-block;
}

.shortcut-item .action-text {
    font-style: italic;
    color: var(--ch-text-secondary, #666);
    font-size: 13px;
}

/* Help footer */
.help-footer {
    text-align: left !important;
    padding-top: 20px;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.help-footer p {
    margin: 0;
    font-size: 14px;
    color: var(--ch-text-secondary, #666);
    text-align: left !important;
}

.help-footer .feedback-link {
    color: var(--ch-accent, #ff6b6b);
    text-decoration: none;
    font-weight: 500;
}

.help-footer .feedback-link:hover {
    text-decoration: underline;
}

/* Help modal specific styles */
.colorhub-help-modal .colorhub-modal-header {
    margin-bottom: 12px;
}

/* Help modal subtitle and pro tip */
.help-subtitle {
    text-align: left !important;
    color: var(--ch-text-primary, #2d2926);
    font-size: 16px;
    margin: 0 0 16px 0;
    font-style: normal;
}

.pro-tip {
    background: #fffbf0;
    border: 1px solid #ffd093;
    border-radius: 8px;
    padding: 16px;
    margin: 20px 0;
    font-size: 14px;
    color: var(--ch-text-primary, #2d2926);
}

.pro-tip strong {
    color: #ff8b00;
    font-weight: 600;
}

/* Mobile responsiveness for help modal */
@media (max-width: 768px) {
    .help-modal {
        max-width: 100% !important;
    }
    
    .shortcuts-columns {
        flex-direction: column;
        gap: 20px;
    }
    
    .shortcuts-row .shortcut-item {
        flex: 1 1 100%;
    }
}

/* Canvas Loading State - Simple & Elegant */
.canvas-container {
    position: relative;
    min-height: 400px;
}

.canvas-loading {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #fefcfb 0%, #f8f6f5 100%);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 1000001; /* Above canvas content but below modals */
    padding: 20px;
    overflow-y: auto;
    text-align: center; /* Ensure everything is centered */
}

.canvas-container.loading .canvas-loading {
    opacity: 1;
    visibility: visible;
}

.canvas-container.loading canvas {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.loading-animation {
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
}

/* Rainbow ripple animation */
.rainbow-ripple {
    width: 60px;
    height: 60px;
    position: relative;
}

.rainbow-ripple::before,
.rainbow-ripple::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background: conic-gradient(
        from 0deg,
        #ffb3ba 0deg,    /* Soft pink */
        #ffd3b6 51deg,   /* Peach */
        #ffffba 102deg,  /* Light yellow */
        #baffc9 153deg,  /* Mint green */
        #bae1ff 204deg,  /* Sky blue */
        #d4baff 255deg,  /* Lavender */
        #ffbdd4 306deg,  /* Rose */
        #ffb3ba 360deg   /* Back to soft pink */
    );
    opacity: 0.8; /* Softer appearance */
}

.rainbow-ripple::before {
    animation: ripple-expand 2.5s ease-out infinite;
}

.rainbow-ripple::after {
    animation: ripple-expand 2.5s ease-out infinite 1.25s;
}

@keyframes ripple-expand {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 0.8;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.5);
        opacity: 0.6;
    }
    80% {
        transform: translate(-50%, -50%) scale(2.5);
        opacity: 0.2;
    }
    100% {
        transform: translate(-50%, -50%) scale(3);
        opacity: 0;
    }
}

/* Loading text container */
.loading-text {
    margin-top: 32px !important;
    text-align: center !important;
}

/* Primary message - "Please wait" */
.loading-message-primary {
    font-size: 18px !important;
    color: #6b6660 !important;
    font-weight: 600 !important;
    margin: 0 !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

/* Secondary message - "Loading your coloring page..." */
.loading-message-secondary {
    font-size: 24px !important;
    color: #2d2926 !important;
    font-weight: 500 !important;
    margin: 0 !important;
    margin-top: 8px !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

/* Clean loading animation container */
.loading-animation {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 40px;
}

/* Enhanced Floating Bubbles - Production Version */
.floating-bubbles-enhanced {
    position: relative;
    width: 100px;
    height: 100px;
}

.floating-bubbles-enhanced .bubble {
    position: absolute;
    border-radius: 50%;
    bottom: 10px; /* Start near bottom of container */
    animation: float-up-enhanced 4s ease-in-out infinite;
    animation-fill-mode: backwards; /* Apply 0% state during delay */
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.3); /* Subtle glow for visibility */
}

/* Bubble 1 - Large pink */
.floating-bubbles-enhanced .bubble-1 {
    width: 30px;
    height: 30px;
    background: linear-gradient(135deg, #ff9fab 0%, #ffb3ba 100%);
    left: 10px;
    animation-delay: 0s;
}

/* Bubble 2 - Medium blue */
.floating-bubbles-enhanced .bubble-2 {
    width: 22px;
    height: 22px;
    background: linear-gradient(135deg, #a8daff 0%, #bae1ff 100%);
    left: 40px;
    animation-delay: 0.5s;
}

/* Bubble 3 - Large mint */
.floating-bubbles-enhanced .bubble-3 {
    width: 28px;
    height: 28px;
    background: linear-gradient(135deg, #a8ffd1 0%, #baffc9 100%);
    left: 65px;
    animation-delay: 1s;
}

/* Bubble 4 - Small yellow */
.floating-bubbles-enhanced .bubble-4 {
    width: 18px;
    height: 18px;
    background: linear-gradient(135deg, #fff3a8 0%, #ffffba 100%);
    left: 5px;
    animation-delay: 1.5s;
}

/* Bubble 5 - Medium lavender */
.floating-bubbles-enhanced .bubble-5 {
    width: 24px;
    height: 24px;
    background: linear-gradient(135deg, #c9a8ff 0%, #d4baff 100%);
    left: 75px;
    animation-delay: 2s;
}

/* Bubble 6 - Small pink */
.floating-bubbles-enhanced .bubble-6 {
    width: 15px;
    height: 15px;
    background: linear-gradient(135deg, #ffb3ba 0%, #ffc4ce 100%);
    left: 50px;
    animation-delay: 2.5s;
}

/* Bubble 7 - Medium mint */
.floating-bubbles-enhanced .bubble-7 {
    width: 20px;
    height: 20px;
    background: linear-gradient(135deg, #baffc9 0%, #c8ffd5 100%);
    left: 25px;
    animation-delay: 3s;
}

/* Enhanced floating animation with wobble and curves */
@keyframes float-up-enhanced {
    0% {
        transform: translateY(0) translateX(0) scale(0);
        opacity: 0;
    }
    5% {
        transform: translateY(-5px) translateX(2px) scale(0.8);
        opacity: 0.3;
    }
    15% {
        transform: translateY(-20px) translateX(-3px) scale(1);
        opacity: 0.8;
    }
    25% {
        transform: translateY(-35px) translateX(5px) scale(1.05) rotate(5deg);
    }
    35% {
        transform: translateY(-50px) translateX(-4px) scale(1) rotate(-3deg);
    }
    45% {
        transform: translateY(-65px) translateX(3px) scale(1.02) rotate(2deg);
        opacity: 0.8;
    }
    55% {
        transform: translateY(-80px) translateX(-5px) scale(0.98) rotate(-4deg);
    }
    65% {
        transform: translateY(-95px) translateX(4px) scale(1.01) rotate(3deg);
        opacity: 0.6;
    }
    75% {
        transform: translateY(-110px) translateX(-2px) scale(0.95) rotate(-2deg);
        opacity: 0.3;
    }
    85% {
        transform: translateY(-125px) translateX(1px) scale(0.9);
        opacity: 0.1;
    }
    95% {
        transform: translateY(-140px) translateX(0) scale(0.8);
        opacity: 0;
    }
    100% {
        transform: translateY(-150px) translateX(0) scale(0);
        opacity: 0;
    }
}


/* Tools disabled state */
.app-container.initializing .tool-btn,
.app-container.initializing .action-btn {
    opacity: 0.6;
    pointer-events: none;
    cursor: not-allowed;
}

.app-container.initializing .palette-color {
    opacity: 0.6;
    pointer-events: none;
}

/* Smooth transitions when ready */
.tool-btn,
.action-btn,
.palette-color {
    transition: opacity 0.3s ease;
}