/* Concatenated CSS - all modules inlined. Do not add @import statements */
/* =====================================================
   CSS RESET & NORMALIZATION
   Modern CSS Reset based on Josh Comeau's Custom CSS Reset
   ===================================================== */

/* Box sizing rules */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Remove default margin and padding */
* {
    margin: 0;
    padding: 0;
}

/* Allow percentage-based heights in the application */
html,
body {
    height: 100%;
}

/* Typographic tweaks! */
body {
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Improve media defaults */
img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
}

/* Remove built-in form typography styles */
input,
button,
textarea,
select {
    font: inherit;
}

/* Avoid text overflows */
p,
h1,
h2,
h3,
h4,
h5,
h6 {
    overflow-wrap: break-word;
}

/* Remove list styles on ul, ol elements with a list role */
ul[role='list'],
ol[role='list'] {
    list-style: none;
}

/* Remove default button styles */
button {
    background: none;
    border: none;
    cursor: pointer;
}

/* Remove default link styles */
a {
    text-decoration: none;
    color: inherit;
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Remove animations for people who've turned them off */
@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;
    }
}/* =====================================================
   FONTS
   Custom font declarations
   ===================================================== */

/* JetBrains Mono - Industrial monospace font - MUST be first */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap');

@font-face {
    font-family: 'Proxima Nova Thin';
    src: url('') format('opentype'); /* Font removed - not needed */
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
/* =====================================================
   CSS CUSTOM PROPERTIES (DESIGN TOKENS)
   Centralized design system variables for consistency
   ===================================================== */

:root {
    /* ==================== COLORS ==================== */

    /* Base Colors */
    --color-bg-primary: #fafafa;
    --color-bg-secondary: #ffffff;
    --color-text-primary: #1a1a1a;
    --color-text-secondary: #666666;
    --color-text-muted: #999999;

    /* Brand Colors */
    --color-brand-primary: #1a1a1a;
    --color-brand-secondary: #2a2a2a;

    /* Accent Colors */
    --color-accent-green: #7cf5a0;
    --color-accent-copper: #c78555;
    --color-accent-red: #e74c3c;
    --color-accent-blue: #3498db;

    /* UI Colors */
    --color-border-light: rgba(0, 0, 0, 0.08);
    --color-border-medium: rgba(0, 0, 0, 0.15);
    --color-shadow-light: rgba(0, 0, 0, 0.035);
    --color-shadow-medium: rgba(0, 0, 0, 0.07);
    --color-shadow-heavy: rgba(0, 0, 0, 0.14);

    /* Semantic Colors */
    --color-success: #27ae60;
    --color-warning: #f39c12;
    --color-error: #e74c3c;
    --color-info: #3498db;

    /* ==================== TYPOGRAPHY ==================== */

    /* Font Families */
    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
    --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
    --font-mono: 'JetBrains Mono', 'Courier New', monospace;
    
    /* Industrial accent color */
    --color-accent-industrial: #00FFFF; /* Cyan */
    
    /* Prismatic Glow Colors - Used for loading bars and animations */
    --color-prismatic-cyan: #00FFFF;
    --color-prismatic-yellow: #faff70;
    --color-prismatic-pink: #FFC0CB;
    
    /* Animation Durations */
    --duration-prismatic-glow: 3s;
    
    /* Icon Sizes */
    --icon-size-sm: 30px;
    --icon-size-md: 44px;
    --icon-size-lg: 64px;
    
    /* Glow/Shadow Sizes */
    --glow-size-base: 40px;
    --glow-size-medium: 60px;
    --glow-size-large: 80px;
    
    /* Border Opacity */
    --border-opacity-light: 0.2;
    --border-opacity-medium: 0.3;
    
    /* Glow Opacity */
    --glow-opacity-base: 0.4;
    --glow-opacity-medium: 0.6;
    --glow-opacity-light: 0.2;

    /* Font Sizes */
    --font-size-xs: 0.75rem;
    /* 12px */
    --font-size-sm: 0.875rem;
    /* 14px */
    --font-size-base: 1rem;
    /* 16px */
    --font-size-md: 1.125rem;
    /* 18px */
    --font-size-lg: 1.25rem;
    /* 20px */
    --font-size-xl: 1.5rem;
    /* 24px */
    --font-size-2xl: 2rem;
    /* 32px */
    --font-size-3xl: 2.5rem;
    /* 40px */
    --font-size-4xl: 3rem;
    /* 48px */
    --font-size-5xl: 4rem;
    /* 64px */

    /* Font Weights */
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;

    /* Line Heights */
    --line-height-tight: 1.2;
    --line-height-normal: 1.6;
    --line-height-relaxed: 1.8;

    /* Letter Spacing */
    --letter-spacing-tight: -0.03em;
    --letter-spacing-normal: -0.01em;
    --letter-spacing-wide: 0.02em;

    /* ==================== SPACING ==================== */

    --spacing-xs: 0.5rem;
    /* 8px */
    --spacing-sm: 1rem;
    /* 16px */
    --spacing-md: 2rem;
    /* 32px */
    --spacing-lg: 4rem;
    /* 64px */
    --spacing-xl: 6rem;
    /* 96px */
    --spacing-2xl: 8rem;
    /* 128px */

    /* ==================== LAYOUT ==================== */

    /* Container Widths */
    --container-sm: 640px;
    --container-md: 768px;
    --container-lg: 1024px;
    --container-xl: 1200px;
    --container-2xl: 1400px;
    
    /* Page-Specific Container Widths */
    --container-error: 600px;
    --container-status: 520px;

    /* Z-Index Scale */
    --z-index-dropdown: 100;
    --z-index-sticky: 200;
    --z-index-fixed: 300;
    --z-index-tile-popover: 350; /* Fixed-position tile dropdowns that escape overflow */
    --z-index-modal-backdrop: 400;
    --z-index-modal: 500;
    --z-index-modal-stacked: 600; /* For modals that appear above other modals */
    --z-index-popover: 700;
    --z-index-tooltip: 800;
    --z-index-overlay: 9999; /* For theme toggle and other always-visible overlays */

    /* ==================== BORDERS ==================== */

    /* Border Radius - Industrial: Sharp corners with micro-chamfers */
    --radius-xs: 0;
    /* 0px - Sharp */
    --radius-sm: 0;
    /* 0px - Sharp */
    --radius-md: 2px;
    /* 2px - Micro-chamfer */
    --radius-lg: 2px;
    /* 2px - Micro-chamfer */
    --radius-xl: 2px;
    /* 2px - Micro-chamfer */
    --radius-2xl: 2px;
    /* 2px - Micro-chamfer */
    --radius-full: 0;
    /* 0px - Sharp (replaces pill shape) */

    /* Border Widths */
    --border-width-thin: 1px;
    --border-width-medium: 2px;
    --border-width-thick: 4px;

    /* ==================== SHADOWS ==================== */

    --shadow-xs: 0 1px 1px 0 var(--color-shadow-light);
    --shadow-sm: 0 1px 2px 0 var(--color-shadow-light);
    --shadow-md: 0 2px 4px 0 var(--color-shadow-medium);
    --shadow-lg: 0 4px 8px 0 var(--color-shadow-medium);
    --shadow-xl: 0 8px 15px 0 var(--color-shadow-heavy);
    --shadow-2xl: 0 12px 24px 0 var(--color-shadow-heavy);

    /* Hover shadow - prominent drop shadow for cards on hover */
    --shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.30), 0 4px 8px rgba(0, 0, 0, 0.2);

    /* ==================== TRANSITIONS ==================== */

    /* Durations */
    --duration-fast: 0.15s;
    --duration-base: 0.2s;
    --duration-medium: 0.3s;
    --duration-slow: 0.5s;

    /* Easing Functions */
    --ease-in: cubic-bezier(0.4, 0, 1, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);

    /* Transition Presets */
    --transition-fast: all var(--duration-fast) var(--ease-out);
    --transition-base: all var(--duration-base) var(--ease-out);
    --transition-smooth: all var(--duration-medium) var(--ease-in-out);
    --transition-slow: all var(--duration-slow) var(--ease-in-out);
}
/**
 * Light Theme
 * Clean, minimal light mode alternative
 */

[data-theme="light"],
:root {
    /* ========================================
       BACKGROUNDS
       ======================================== */
    --color-bg-primary: #fafafa;
    --color-bg-secondary: #ffffff;
    --color-bg-tertiary: #e9ecef;
    --color-bg-surface: rgba(0, 0, 0, 0.02);
    --color-bg-surface-hover: rgba(0, 0, 0, 0.05);
    --color-bg-overlay: rgba(255, 255, 255, 0.95);

    /* ========================================
       TEXT COLORS
       ======================================== */
    --color-text-primary: #1a1a1a;
    --color-text-secondary: #666666;
    --color-text-tertiary: rgba(0, 0, 0, 0.55);
    --color-text-muted: #999999;
    --color-text-inverse: rgba(255, 255, 255, 0.95);

    /* ========================================
       BRAND COLORS
       ======================================== */
    --color-brand-primary: #1a1a1a;
    --color-brand-secondary: #2a2a2a;
    --color-brand-hover: #2a2a2a;
    --color-accent-green: #7cf5a0;
    --color-accent-yellow: #f39c12;
    --color-emerald: #10b981;
    --color-emerald-rgb: 16, 185, 129;
    --color-badge-yellow: #FFEB3B;

    /* ========================================
       BORDERS
       ======================================== */
    --color-border-light: rgba(0, 0, 0, 0.08);
    --color-border-medium: rgba(0, 0, 0, 0.15);
    --color-border-heavy: rgba(0, 0, 0, 0.4);

    /* ========================================
       GLASSMORPHISM
       ======================================== */
    --glass-bg: rgba(255, 255, 255, 0.7);
    --glass-bg-hover: rgba(255, 255, 255, 0.85);
    --glass-border: rgba(0, 0, 0, 0.1);
    --glass-blur: blur(20px);
    --glass-shine: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8), transparent);

    /* ========================================
       STATUS COLORS
       ======================================== */
    --color-success: #16a34a;
    --color-success-bg: rgba(22, 163, 74, 0.1);
    --color-success-rgb: 22, 163, 74;
    --color-warning: #d97706;
    --color-warning-bg: rgba(217, 119, 6, 0.1);
    --color-warning-rgb: 217, 119, 6;
    --color-error: #dc2626;
    --color-error-light: #f87171;
    --color-error-bg: rgba(220, 38, 38, 0.1);
    --color-error-rgb: 220, 38, 38;
    --color-info: #64748b;
    --color-info-bg: rgba(100, 116, 139, 0.1);
    --color-info-rgb: 100, 116, 139;

    /* ========================================
       BUTTON VARIANTS
       ======================================== */
    --btn-glass-bg: linear-gradient(-75deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.7));
    --btn-glass-bg-hover: linear-gradient(-75deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.85));
    --btn-glass-border: rgba(0, 0, 0, 0.2);
}/**
 * Dark Theme (Default)
 * RenderCAD's signature dark mode with glassmorphism
 */

[data-theme="dark"] {
    /* ========================================
       BACKGROUNDS
       Pure grays - no blue hint
       ======================================== */
    --color-bg-primary: #121212;
    --color-bg-secondary: #1e1e1e;
    --color-bg-tertiary: #2a2a2a;
    --color-bg-surface: rgba(255, 255, 255, 0.04);
    --color-bg-surface-hover: rgba(255, 255, 255, 0.07);
    --color-bg-overlay: rgba(0, 0, 0, 0.95);

    /* ========================================
       TEXT COLORS
       ======================================== */
    --color-text-primary: rgba(255, 255, 255, 0.95);
    --color-text-secondary: rgba(255, 255, 255, 0.8);
    --color-text-tertiary: rgba(255, 255, 255, 0.65);
    --color-text-muted: rgba(255, 255, 255, 0.5);
    --color-text-inverse: rgba(0, 0, 0, 0.9);

    /* ========================================
       BRAND COLORS
       ======================================== */
    --color-brand-primary: #ffffff;
    /* White for dark theme buttons */
    --color-brand-secondary: #e0e0e0;
    --color-brand-hover: #f0f0f0;
    --color-accent-green: #4ade80;
    --color-accent-yellow: #fbbf24;
    --color-emerald: #10b981;
    --color-emerald-rgb: 16, 185, 129;
    --color-badge-yellow: #FFEB3B;

    /* ========================================
       BORDERS
       ======================================== */
    --color-border-light: rgba(255, 255, 255, 0.1);
    --color-border-medium: rgba(255, 255, 255, 0.2);
    --color-border-heavy: rgba(255, 255, 255, 0.4);

    /* ========================================
       GLASSMORPHISM
       ======================================== */
    --glass-bg: rgba(255, 255, 255, 0.05);
    --glass-bg-hover: rgba(255, 255, 255, 0.08);
    --glass-border: rgba(255, 255, 255, 0.1);
    --glass-blur: blur(20px);
    --glass-shine: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);

    /* ========================================
       STATUS COLORS
       ======================================== */
    --color-success: #22c55e;
    --color-success-bg: rgba(34, 197, 94, 0.1);
    --color-success-rgb: 34, 197, 94;
    --color-warning: #f59e0b;
    --color-warning-bg: rgba(245, 158, 11, 0.1);
    --color-warning-rgb: 245, 158, 11;
    --color-error: #ef4444;
    --color-error-light: #f87171;
    --color-error-bg: rgba(239, 68, 68, 0.1);
    --color-error-rgb: 239, 68, 68;
    --color-info: #94a3b8;
    --color-info-bg: rgba(148, 163, 184, 0.1);
    --color-info-rgb: 148, 163, 184;

    /* ========================================
       SHADOWS
       ======================================== */
    --shadow-hover: 0 8px 24px rgba(255, 255, 255, 0.24), 0 4px 8px rgba(255, 255, 255, 0.16);

    /* ========================================
       BUTTON VARIANTS
       ======================================== */
    --btn-glass-bg: linear-gradient(-75deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.05));
    --btn-glass-bg-hover: linear-gradient(-75deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.1));
    --btn-glass-border: rgba(255, 255, 255, 0.5);
}/* =====================================================
   BASE STYLES
   Global element styles and utilities
   ===================================================== */

html {
    font-size: 16px;
    /* scroll-behavior: smooth removed - causes scroll jank/stuttering */
    /* Smooth scrolling is now handled via JavaScript only for anchor links */
}

body {
    font-family: var(--font-primary);
    background-color: var(--color-bg-secondary);
    color: var(--color-text-primary);
    line-height: var(--line-height-normal);
    overflow-x: hidden;
}

/* ==================== PREVENT SELECTION & DRAGGING ==================== */
/* Disable text selection and image dragging globally */
* {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-user-drag: none;
    user-drag: none;
}

/* Admin pages: allow full text selection and right-click.
   body.admin-page gives specificity 0,1,1 — beats all single-class
   selectors (.sortable-header, .no-select, etc.) regardless of position. */
body.admin-page,
body.admin-page * {
    user-select: text !important;
    -webkit-user-select: text !important;
}

/* Allow text selection only in form inputs where users need to type */
input,
textarea,
[contenteditable="true"],
[role="textbox"] {
    user-select: text;
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
}

/* Allow dragging for user's own images (history page, viewer modals) */
.history-card img,
.history-card video,
.image-viewer img,
.video-player video,
#imageViewerModal img,
#videoPlayerModal video,
.viewer-image,
.viewer-video,
.history-image,
.history-video {
    -webkit-user-drag: element;
    user-drag: element;
    user-select: none;
    -webkit-user-select: none;
}

/* Video right-click protection is handled by JavaScript */

/* ==================== TYPOGRAPHY ==================== */

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 600; /* Reduced from 700 (15% lighter: 700 * 0.85 = 595, rounded to 600) */
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-tight);
    text-transform: uppercase;
}

h1 {
    font-size: calc(var(--font-size-5xl) * 0.9); /* 10% smaller */
}

h2 {
    font-size: calc(var(--font-size-4xl) * 0.9); /* 10% smaller */
}

h3 {
    font-size: calc(var(--font-size-3xl) * 0.9); /* 10% smaller */
}

h4 {
    font-size: calc(var(--font-size-2xl) * 0.9); /* 10% smaller */
}

h5 {
    font-size: calc(var(--font-size-xl) * 0.9); /* 10% smaller */
}

h6 {
    font-size: calc(var(--font-size-lg) * 0.9); /* 10% smaller */
}

p {
    margin-bottom: var(--spacing-sm);
}

/* ==================== LAYOUT ==================== */

.container {
    max-width: var(--container-xl);
    margin: 0 auto;
    padding: 0 var(--spacing-md);
    width: 100%;
}

.container-sm {
    max-width: var(--container-sm);
}

.container-md {
    max-width: var(--container-md);
}

.container-lg {
    max-width: var(--container-lg);
}

.container-fluid {
    max-width: 100%;
    padding: 0 var(--spacing-sm);
}

/* ==================== SECTIONS ==================== */

section {
    padding: var(--spacing-xl) 0;
    margin: 0;
}

/* ==================== ANIMATIONS ==================== */

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

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

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }

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

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }

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

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }

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

@keyframes slideUp {
    from {
        transform: translateY(100%);
    }

    to {
        transform: translateY(0);
    }
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

/* ==================== UTILITY CLASSES ==================== */

/* Display */
.hidden {
    display: none;
}

.block {
    display: block;
}

.inline-block {
    display: inline-block;
}

.flex {
    display: flex;
}

.inline-flex {
    display: inline-flex;
}

.grid {
    display: grid;
}

/* Flex utilities */
.flex-row {
    flex-direction: row;
}

.flex-col {
    flex-direction: column;
}

.items-center {
    align-items: center;
}

.items-start {
    align-items: flex-start;
}

.items-end {
    align-items: flex-end;
}

.justify-center {
    justify-content: center;
}

.justify-between {
    justify-content: space-between;
}

.justify-around {
    justify-content: space-around;
}

.justify-end {
    justify-content: flex-end;
}

.gap-xs {
    gap: var(--spacing-xs);
}

.gap-sm {
    gap: var(--spacing-sm);
}

.gap-md {
    gap: var(--spacing-md);
}

.gap-lg {
    gap: var(--spacing-lg);
}

/* Text alignment */
.text-left {
    text-align: left;
}

.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

/* Spacing utilities */
.mt-xs {
    margin-top: var(--spacing-xs);
}

.mt-sm {
    margin-top: var(--spacing-sm);
}

.mt-md {
    margin-top: var(--spacing-md);
}

.mt-lg {
    margin-top: var(--spacing-lg);
}

.mt-xl {
    margin-top: var(--spacing-xl);
}

.mb-xs {
    margin-bottom: var(--spacing-xs);
}

.mb-sm {
    margin-bottom: var(--spacing-sm);
}

.mb-md {
    margin-bottom: var(--spacing-md);
}

.mb-lg {
    margin-bottom: var(--spacing-lg);
}

.mb-xl {
    margin-bottom: var(--spacing-xl);
}

.ml-xs {
    margin-left: var(--spacing-xs);
}

.ml-sm {
    margin-left: var(--spacing-sm);
}

.ml-md {
    margin-left: var(--spacing-md);
}

.ml-lg {
    margin-left: var(--spacing-lg);
}

.mr-xs {
    margin-right: var(--spacing-xs);
}

.mr-sm {
    margin-right: var(--spacing-sm);
}

.mr-md {
    margin-right: var(--spacing-md);
}

.mr-lg {
    margin-right: var(--spacing-lg);
}

.pt-xs {
    padding-top: var(--spacing-xs);
}

.pt-sm {
    padding-top: var(--spacing-sm);
}

.pt-md {
    padding-top: var(--spacing-md);
}

.pt-lg {
    padding-top: var(--spacing-lg);
}

.pt-xl {
    padding-top: var(--spacing-xl);
}

.pb-xs {
    padding-bottom: var(--spacing-xs);
}

.pb-sm {
    padding-bottom: var(--spacing-sm);
}

.pb-md {
    padding-bottom: var(--spacing-md);
}

.pb-lg {
    padding-bottom: var(--spacing-lg);
}

.pb-xl {
    padding-bottom: var(--spacing-xl);
}

/* Visibility */
.visible {
    visibility: visible;
}

.invisible {
    visibility: hidden;
}

/* Miscellaneous */
.pointer {
    cursor: pointer;
}

.no-select {
    user-select: none;
}

.relative {
    position: relative;
}

.absolute {
    position: absolute;
}

.fixed {
    position: fixed;
}

.sticky {
    position: sticky;
}

/* ==================== TEXT UTILITIES ==================== */

/* Text wrapping utilities */
.text-nowrap {
    white-space: nowrap;
}

.text-underline {
    text-decoration: underline;
}

.text-break {
    word-break: break-word;
    overflow-wrap: break-word;
}

/* ==================== INLINE TEXT LINKS ==================== */

/* Standard inline text link - use within paragraphs and body text */
.text-link {
    color: var(--color-text-primary);
    text-decoration: underline;
    text-decoration-thickness: var(--border-width-thin);
    text-underline-offset: 0.15em; /* Relative to font size for consistent appearance */
    transition: var(--transition-fast);
}

.text-link:hover {
    color: var(--color-text-secondary);
}

.text-link:active {
    color: var(--color-text-muted);
}
/* =====================================================
   UTILITY CLASSES
   Bootstrap-like utilities for admin pages compatibility
   ===================================================== */

/* Display utilities */
.d-none { display: none !important; }
.d-block { display: block !important; }
.d-flex { display: flex !important; }
.d-inline { display: inline !important; }
.d-inline-block { display: inline-block !important; }
.d-grid { display: grid !important; }

/* Flexbox utilities */
.flex-column { flex-direction: column !important; }
.flex-row { flex-direction: row !important; }
.flex-wrap { flex-wrap: wrap !important; }
.flex-nowrap { flex-wrap: nowrap !important; }
.flex-grow-1 { flex-grow: 1 !important; }
.flex-shrink-0 { flex-shrink: 0 !important; }

.justify-content-start { justify-content: flex-start !important; }
.justify-content-end { justify-content: flex-end !important; }
.justify-content-center { justify-content: center !important; }
.justify-content-between { justify-content: space-between !important; }
.justify-content-around { justify-content: space-around !important; }

.align-items-start { align-items: flex-start !important; }
.align-items-end { align-items: flex-end !important; }
.align-items-center { align-items: center !important; }
.align-items-baseline { align-items: baseline !important; }
.align-items-stretch { align-items: stretch !important; }

.align-self-start { align-self: flex-start !important; }
.align-self-end { align-self: flex-end !important; }
.align-self-center { align-self: center !important; }

/* Gap utilities */
.gap-1 { gap: 0.25rem !important; }
.gap-2 { gap: 0.5rem !important; }
.gap-3 { gap: 1rem !important; }
.gap-4 { gap: 1.5rem !important; }
.gap-5 { gap: 3rem !important; }

/* Margin utilities */
.m-0 { margin: 0 !important; }
.m-1 { margin: 0.25rem !important; }
.m-2 { margin: 0.5rem !important; }
.m-3 { margin: 1rem !important; }
.m-4 { margin: 1.5rem !important; }
.m-5 { margin: 3rem !important; }
.m-auto { margin: auto !important; }

.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: 0.25rem !important; }
.mt-2 { margin-top: 0.5rem !important; }
.mt-3 { margin-top: 1rem !important; }
.mt-4 { margin-top: 1.5rem !important; }
.mt-5 { margin-top: 3rem !important; }
.mt-auto { margin-top: auto !important; }

.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: 0.25rem !important; }
.mb-2 { margin-bottom: 0.5rem !important; }
.mb-3 { margin-bottom: 1rem !important; }
.mb-4 { margin-bottom: 1.5rem !important; }
.mb-5 { margin-bottom: 3rem !important; }
.mb-auto { margin-bottom: auto !important; }

.ms-0 { margin-left: 0 !important; }
.ms-1 { margin-left: 0.25rem !important; }
.ms-2 { margin-left: 0.5rem !important; }
.ms-3 { margin-left: 1rem !important; }
.ms-4 { margin-left: 1.5rem !important; }
.ms-5 { margin-left: 3rem !important; }
.ms-auto { margin-left: auto !important; }

.me-0 { margin-right: 0 !important; }
.me-1 { margin-right: 0.25rem !important; }
.me-2 { margin-right: 0.5rem !important; }
.me-3 { margin-right: 1rem !important; }
.me-4 { margin-right: 1.5rem !important; }
.me-5 { margin-right: 3rem !important; }
.me-auto { margin-right: auto !important; }

.mx-0 { margin-left: 0 !important; margin-right: 0 !important; }
.mx-1 { margin-left: 0.25rem !important; margin-right: 0.25rem !important; }
.mx-2 { margin-left: 0.5rem !important; margin-right: 0.5rem !important; }
.mx-3 { margin-left: 1rem !important; margin-right: 1rem !important; }
.mx-4 { margin-left: 1.5rem !important; margin-right: 1.5rem !important; }
.mx-5 { margin-left: 3rem !important; margin-right: 3rem !important; }
.mx-auto { margin-left: auto !important; margin-right: auto !important; }

.my-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
.my-1 { margin-top: 0.25rem !important; margin-bottom: 0.25rem !important; }
.my-2 { margin-top: 0.5rem !important; margin-bottom: 0.5rem !important; }
.my-3 { margin-top: 1rem !important; margin-bottom: 1rem !important; }
.my-4 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; }
.my-5 { margin-top: 3rem !important; margin-bottom: 3rem !important; }

/* Padding utilities */
.p-0 { padding: 0 !important; }
.p-1 { padding: 0.25rem !important; }
.p-2 { padding: 0.5rem !important; }
.p-3 { padding: 1rem !important; }
.p-4 { padding: 1.5rem !important; }
.p-5 { padding: 3rem !important; }

.pt-0 { padding-top: 0 !important; }
.pt-1 { padding-top: 0.25rem !important; }
.pt-2 { padding-top: 0.5rem !important; }
.pt-3 { padding-top: 1rem !important; }
.pt-4 { padding-top: 1.5rem !important; }
.pt-5 { padding-top: 3rem !important; }

.pb-0 { padding-bottom: 0 !important; }
.pb-1 { padding-bottom: 0.25rem !important; }
.pb-2 { padding-bottom: 0.5rem !important; }
.pb-3 { padding-bottom: 1rem !important; }
.pb-4 { padding-bottom: 1.5rem !important; }
.pb-5 { padding-bottom: 3rem !important; }

.ps-0 { padding-left: 0 !important; }
.ps-1 { padding-left: 0.25rem !important; }
.ps-2 { padding-left: 0.5rem !important; }
.ps-3 { padding-left: 1rem !important; }
.ps-4 { padding-left: 1.5rem !important; }
.ps-5 { padding-left: 3rem !important; }

.pe-0 { padding-right: 0 !important; }
.pe-1 { padding-right: 0.25rem !important; }
.pe-2 { padding-right: 0.5rem !important; }
.pe-3 { padding-right: 1rem !important; }
.pe-4 { padding-right: 1.5rem !important; }
.pe-5 { padding-right: 3rem !important; }

.px-0 { padding-left: 0 !important; padding-right: 0 !important; }
.px-1 { padding-left: 0.25rem !important; padding-right: 0.25rem !important; }
.px-2 { padding-left: 0.5rem !important; padding-right: 0.5rem !important; }
.px-3 { padding-left: 1rem !important; padding-right: 1rem !important; }
.px-4 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
.px-5 { padding-left: 3rem !important; padding-right: 3rem !important; }

.py-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
.py-1 { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; }
.py-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
.py-3 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
.py-4 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
.py-5 { padding-top: 3rem !important; padding-bottom: 3rem !important; }

/* Text utilities */
.text-start { text-align: left !important; }
.text-end { text-align: right !important; }
.text-center { text-align: center !important; }

.text-uppercase { text-transform: uppercase !important; }
.text-lowercase { text-transform: lowercase !important; }
.text-capitalize { text-transform: capitalize !important; }

.text-wrap { white-space: normal !important; }
.text-nowrap { white-space: nowrap !important; }
.text-truncate { overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }

.text-break { word-wrap: break-word !important; word-break: break-word !important; }

.fw-light { font-weight: 300 !important; }
.fw-normal { font-weight: 400 !important; }
.fw-medium { font-weight: 500 !important; }
.fw-semibold { font-weight: 600 !important; }
.fw-bold { font-weight: 700 !important; }

.fst-italic { font-style: italic !important; }
.fst-normal { font-style: normal !important; }

/* Text colors */
.text-muted { color: var(--color-text-muted) !important; }
.text-light { color: var(--color-text-primary) !important; }
.text-dark { color: var(--color-text-primary) !important; }
.text-primary { color: var(--color-brand-primary) !important; }
.text-secondary { color: var(--color-text-secondary) !important; }
.text-success { color: var(--color-success) !important; }
.text-danger { color: var(--color-error) !important; }
.text-warning { color: var(--color-warning) !important; }
.text-info { color: var(--color-info) !important; }
.text-white { color: #ffffff !important; }

/* Background colors */
.bg-primary { background-color: var(--color-brand-primary) !important; }
.bg-secondary { background-color: var(--color-bg-secondary) !important; }
.bg-success { background-color: var(--color-success) !important; }
.bg-danger { background-color: var(--color-error) !important; }
.bg-warning { background-color: var(--color-warning) !important; }
.bg-info { background-color: var(--color-info) !important; }
.bg-dark { background-color: var(--color-bg-primary) !important; }
.bg-transparent { background-color: transparent !important; }

/* Width utilities */
.w-25 { width: 25% !important; }
.w-50 { width: 50% !important; }
.w-75 { width: 75% !important; }
.w-100 { width: 100% !important; }
.w-auto { width: auto !important; }

.mw-100 { max-width: 100% !important; }

/* Height utilities */
.h-25 { height: 25% !important; }
.h-50 { height: 50% !important; }
.h-75 { height: 75% !important; }
.h-100 { height: 100% !important; }
.h-auto { height: auto !important; }

.mh-100 { max-height: 100% !important; }

/* Position utilities */
.position-static { position: static !important; }
.position-relative { position: relative !important; }
.position-absolute { position: absolute !important; }
.position-fixed { position: fixed !important; }
.position-sticky { position: sticky !important; }

.top-0 { top: 0 !important; }
.top-50 { top: 50% !important; }
.top-100 { top: 100% !important; }

.bottom-0 { bottom: 0 !important; }
.bottom-50 { bottom: 50% !important; }
.bottom-100 { bottom: 100% !important; }

.start-0 { left: 0 !important; }
.start-50 { left: 50% !important; }
.start-100 { left: 100% !important; }

.end-0 { right: 0 !important; }
.end-50 { right: 50% !important; }
.end-100 { right: 100% !important; }

.translate-middle { transform: translate(-50%, -50%) !important; }
.translate-middle-x { transform: translateX(-50%) !important; }
.translate-middle-y { transform: translateY(-50%) !important; }

/* Border utilities */
.border { border: 1px solid var(--color-border-medium) !important; }
.border-0 { border: 0 !important; }
.border-top { border-top: 1px solid var(--color-border-medium) !important; }
.border-bottom { border-bottom: 1px solid var(--color-border-medium) !important; }
.border-start { border-left: 1px solid var(--color-border-medium) !important; }
.border-end { border-right: 1px solid var(--color-border-medium) !important; }

.border-primary { border-color: var(--color-brand-primary) !important; }
.border-secondary { border-color: var(--color-border-medium) !important; }
.border-success { border-color: var(--color-success) !important; }
.border-danger { border-color: var(--color-error) !important; }
.border-warning { border-color: var(--color-warning) !important; }

.rounded { border-radius: var(--radius-md) !important; }
.rounded-0 { border-radius: 0 !important; }
.rounded-1 { border-radius: var(--radius-sm) !important; }
.rounded-2 { border-radius: var(--radius-md) !important; }
.rounded-3 { border-radius: var(--radius-lg) !important; }
.rounded-circle { border-radius: 50% !important; }
.rounded-pill { border-radius: var(--radius-full) !important; }

/* Overflow utilities */
.overflow-auto { overflow: auto !important; }
.overflow-hidden { overflow: hidden !important; }
.overflow-visible { overflow: visible !important; }
.overflow-scroll { overflow: scroll !important; }

/* Shadow utilities */
.shadow-none { box-shadow: none !important; }
.shadow-sm { box-shadow: var(--shadow-sm) !important; }
.shadow { box-shadow: var(--shadow-md) !important; }
.shadow-lg { box-shadow: var(--shadow-lg) !important; }

/* Visibility utilities */
.visible { visibility: visible !important; }
.invisible { visibility: hidden !important; }

/* Cursor utilities */
.cursor-pointer { cursor: pointer !important; }
.cursor-default { cursor: default !important; }
.cursor-not-allowed { cursor: not-allowed !important; }

/* Badge component */
.badge {
    display: inline-block;
    padding: 0.25em 0.5em;
    font-size: 0.75em;
    font-weight: 600;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: var(--radius-sm);
}

.badge.bg-success { background-color: var(--color-success) !important; color: #fff; }
.badge.bg-danger { background-color: var(--color-error) !important; color: #fff; }
.badge.bg-warning { background-color: var(--color-warning) !important; color: #000; }
.badge.bg-info { background-color: var(--color-info) !important; color: #fff; }
.badge.bg-primary { background-color: var(--color-brand-primary) !important; color: #fff; }
.badge.bg-secondary { background-color: var(--color-text-muted) !important; color: #fff; }

/* Row/Column grid (simplified) */
.row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -0.75rem;
    margin-left: -0.75rem;
}

.row > * {
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    padding-right: 0.75rem;
    padding-left: 0.75rem;
}

.col { flex: 1 0 0%; }
.col-auto { flex: 0 0 auto; width: auto; }
.col-1 { flex: 0 0 auto; width: 8.333333%; }
.col-2 { flex: 0 0 auto; width: 16.666667%; }
.col-3 { flex: 0 0 auto; width: 25%; }
.col-4 { flex: 0 0 auto; width: 33.333333%; }
.col-5 { flex: 0 0 auto; width: 41.666667%; }
.col-6 { flex: 0 0 auto; width: 50%; }
.col-7 { flex: 0 0 auto; width: 58.333333%; }
.col-8 { flex: 0 0 auto; width: 66.666667%; }
.col-9 { flex: 0 0 auto; width: 75%; }
.col-10 { flex: 0 0 auto; width: 83.333333%; }
.col-11 { flex: 0 0 auto; width: 91.666667%; }
.col-12 { flex: 0 0 auto; width: 100%; }

@media (min-width: 576px) {
    .col-sm-1 { flex: 0 0 auto; width: 8.333333%; }
    .col-sm-2 { flex: 0 0 auto; width: 16.666667%; }
    .col-sm-3 { flex: 0 0 auto; width: 25%; }
    .col-sm-4 { flex: 0 0 auto; width: 33.333333%; }
    .col-sm-5 { flex: 0 0 auto; width: 41.666667%; }
    .col-sm-6 { flex: 0 0 auto; width: 50%; }
    .col-sm-7 { flex: 0 0 auto; width: 58.333333%; }
    .col-sm-8 { flex: 0 0 auto; width: 66.666667%; }
    .col-sm-9 { flex: 0 0 auto; width: 75%; }
    .col-sm-10 { flex: 0 0 auto; width: 83.333333%; }
    .col-sm-11 { flex: 0 0 auto; width: 91.666667%; }
    .col-sm-12 { flex: 0 0 auto; width: 100%; }
}

@media (min-width: 768px) {
    .col-md-1 { flex: 0 0 auto; width: 8.333333%; }
    .col-md-2 { flex: 0 0 auto; width: 16.666667%; }
    .col-md-3 { flex: 0 0 auto; width: 25%; }
    .col-md-4 { flex: 0 0 auto; width: 33.333333%; }
    .col-md-5 { flex: 0 0 auto; width: 41.666667%; }
    .col-md-6 { flex: 0 0 auto; width: 50%; }
    .col-md-7 { flex: 0 0 auto; width: 58.333333%; }
    .col-md-8 { flex: 0 0 auto; width: 66.666667%; }
    .col-md-9 { flex: 0 0 auto; width: 75%; }
    .col-md-10 { flex: 0 0 auto; width: 83.333333%; }
    .col-md-11 { flex: 0 0 auto; width: 91.666667%; }
    .col-md-12 { flex: 0 0 auto; width: 100%; }
}

@media (min-width: 992px) {
    .col-lg-1 { flex: 0 0 auto; width: 8.333333%; }
    .col-lg-2 { flex: 0 0 auto; width: 16.666667%; }
    .col-lg-3 { flex: 0 0 auto; width: 25%; }
    .col-lg-4 { flex: 0 0 auto; width: 33.333333%; }
    .col-lg-5 { flex: 0 0 auto; width: 41.666667%; }
    .col-lg-6 { flex: 0 0 auto; width: 50%; }
    .col-lg-7 { flex: 0 0 auto; width: 58.333333%; }
    .col-lg-8 { flex: 0 0 auto; width: 66.666667%; }
    .col-lg-9 { flex: 0 0 auto; width: 75%; }
    .col-lg-10 { flex: 0 0 auto; width: 83.333333%; }
    .col-lg-11 { flex: 0 0 auto; width: 91.666667%; }
    .col-lg-12 { flex: 0 0 auto; width: 100%; }
}

@media (min-width: 1200px) {
    .col-xl-1 { flex: 0 0 auto; width: 8.333333%; }
    .col-xl-2 { flex: 0 0 auto; width: 16.666667%; }
    .col-xl-3 { flex: 0 0 auto; width: 25%; }
    .col-xl-4 { flex: 0 0 auto; width: 33.333333%; }
    .col-xl-5 { flex: 0 0 auto; width: 41.666667%; }
    .col-xl-6 { flex: 0 0 auto; width: 50%; }
    .col-xl-7 { flex: 0 0 auto; width: 58.333333%; }
    .col-xl-8 { flex: 0 0 auto; width: 66.666667%; }
    .col-xl-9 { flex: 0 0 auto; width: 75%; }
    .col-xl-10 { flex: 0 0 auto; width: 83.333333%; }
    .col-xl-11 { flex: 0 0 auto; width: 91.666667%; }
    .col-xl-12 { flex: 0 0 auto; width: 100%; }
}

/* Table utilities */
.table {
    width: 100%;
    margin-bottom: 1rem;
    color: var(--color-text-primary);
    vertical-align: top;
    border-color: var(--color-border-medium);
}

.table > :not(caption) > * > * {
    padding: 0.5rem 0.5rem;
    background-color: transparent;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: var(--color-border-medium);
}

.table > thead {
    vertical-align: bottom;
}

.table-dark {
    color: var(--color-text-primary);
    background-color: var(--color-bg-primary);
}

.table-dark > :not(caption) > * > * {
    border-bottom-color: var(--color-border-medium);
}

.table-hover > tbody > tr:hover > * {
    background-color: var(--color-bg-surface-hover);
}

.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Alert component */
.alert {
    position: relative;
    padding: 1rem 1rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
}

.alert-success {
    color: #0f5132;
    background-color: #d1e7dd;
    border-color: #badbcc;
}

.alert-danger {
    color: #842029;
    background-color: #f8d7da;
    border-color: #f5c2c7;
}

.alert-warning {
    color: #664d03;
    background-color: #fff3cd;
    border-color: #ffecb5;
}

.alert-info {
    color: #055160;
    background-color: #cff4fc;
    border-color: #b6effb;
}

/* Spinner */
.spinner-border {
    display: inline-block;
    width: 2rem;
    height: 2rem;
    vertical-align: -0.125em;
    border: 0.25em solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spinner-border 0.75s linear infinite;
}

.spinner-border-sm {
    width: 1rem;
    height: 1rem;
    border-width: 0.2em;
}

@keyframes spinner-border {
    to { transform: rotate(360deg); }
}

/* Input group */
.input-group {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    width: 100%;
}

.input-group > .form-control {
    position: relative;
    flex: 1 1 auto;
    width: 1%;
    min-width: 0;
}

.input-group-text {
    display: flex;
    align-items: center;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--color-text-primary);
    text-align: center;
    white-space: nowrap;
    background-color: var(--color-bg-tertiary);
    border: 1px solid var(--color-border-medium);
}

/* Accessibility */
.visually-hidden,
.visually-hidden-focusable:not(:focus):not(:focus-within) {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}
/**
 * Button Components
 * Unified button system - all buttons inherit from .btn base
 * Uses CSS custom properties for theme-aware colors (no !important needed)
 */

/* ========================================
   BASE BUTTON STYLES
   All buttons inherit from this
   ======================================== */
.btn,
button[class*="btn"],
.btn-cta,
.btn-primary,
.btn-buy {
    /* Reset */
    all: unset;
    box-sizing: border-box;

    /* Layout */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;

    /* Sizing - reasonable defaults for buttons */
    padding: 0.625rem 1.25rem; /* 10px 20px */
    border-radius: var(--radius-md);

    /* Typography */
    font-family: var(--font-primary);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.02em;
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;

    /* Colors - use custom properties for easy overriding */
    --btn-bg: transparent;
    --btn-color: var(--color-text-primary);
    --btn-border: none;
    --btn-bg-hover: var(--color-bg-surface);
    --btn-color-hover: var(--color-text-primary);

    color: var(--btn-color);
    background-color: var(--btn-bg);
    border: var(--btn-border);

    /* Interaction */
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: background-color var(--duration-fast) ease, box-shadow var(--duration-fast) ease;

    /* Positioning */
    position: relative;
    text-decoration: none;
}

.btn:hover,
button[class*="btn"]:hover {
    background-color: var(--btn-bg-hover);
    color: var(--btn-color-hover);
}

.btn:disabled,
button[class*="btn"]:disabled,
.btn-cta:disabled,
.btn-primary:disabled,
.btn-buy:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* ========================================
   PRIMARY BUTTON (Solid Background)
   Overrides Bootstrap btn-primary
   ======================================== */
.btn-primary,
.btn-buy,
.btn-cta,
.pricing-card .btn,
.pricing-card button.btn,
.btn.btn-primary,
.btn.btn-buy,
.btn.btn-cta,
button.btn-primary {
    --btn-bg: #1a1a1a;
    --btn-color: #ffffff;
    --btn-bg-hover: #404040;
    --btn-color-hover: #ffffff;
    --bs-btn-bg: #1a1a1a;
    --bs-btn-color: #ffffff;
    --bs-btn-hover-bg: #404040;
    --bs-btn-hover-color: #ffffff;
    --bs-btn-border-color: #1a1a1a;
    --bs-btn-hover-border-color: #404040;
    --bs-btn-active-bg: #333333;
    --bs-btn-active-border-color: #333333;
    background-color: #1a1a1a;
    color: #ffffff;
    border-color: #1a1a1a;
}

.btn-primary:hover,
.btn-buy:hover,
.btn-cta:hover,
.pricing-card .btn:hover,
.pricing-card button.btn:hover,
button.btn-primary:hover {
    background-color: #404040;
    border-color: #404040;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.btn-primary:active,
.btn-buy:active,
.btn-cta:active,
.pricing-card .btn:active,
.pricing-card button.btn:active {
    opacity: 0.9;
    /* No transform - just opacity change on press */
}

/* Dark theme primary buttons - all match */
[data-theme="dark"] .btn-primary,
[data-theme="dark"] .btn-buy,
[data-theme="dark"] .btn-cta,
[data-theme="dark"] .pricing-card .btn,
[data-theme="dark"] .pricing-card button.btn,
[data-theme="dark"] button.btn-primary {
    --btn-bg: #ffffff;
    --btn-color: #000000;
    --btn-bg-hover: #c0c0c0;
    --btn-color-hover: #000000;
    --bs-btn-bg: #ffffff;
    --bs-btn-color: #000000;
    --bs-btn-hover-bg: #c0c0c0;
    --bs-btn-hover-color: #000000;
    --bs-btn-border-color: #ffffff;
    --bs-btn-hover-border-color: #c0c0c0;
    background-color: #ffffff;
    color: #000000;
    border-color: #ffffff;
}

[data-theme="dark"] .btn-primary:hover,
[data-theme="dark"] .btn-buy:hover,
[data-theme="dark"] .btn-cta:hover,
[data-theme="dark"] .pricing-card .btn:hover,
[data-theme="dark"] .pricing-card button.btn:hover,
[data-theme="dark"] button.btn-primary:hover {
    background-color: #c0c0c0;
    border-color: #c0c0c0;
    color: #000000;
    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.15);
}

[data-theme="dark"] .btn-primary:active,
[data-theme="dark"] .btn-buy:active,
[data-theme="dark"] .btn-cta:active,
[data-theme="dark"] .pricing-card .btn:active,
[data-theme="dark"] .pricing-card button.btn:active {
    opacity: 0.9;
    /* No transform - just opacity change on press */
}

/* ========================================
   SECONDARY BUTTON
   Overrides Bootstrap btn-secondary
   ======================================== */
.btn-secondary,
.btn.btn-secondary,
button.btn-secondary {
    --btn-bg: #e8e8e8;
    --btn-color: #1a1a1a;
    --btn-bg-hover: #d0d0d0;
    --btn-color-hover: #1a1a1a;
    --bs-btn-bg: #e8e8e8;
    --bs-btn-color: #1a1a1a;
    --bs-btn-hover-bg: #d0d0d0;
    --bs-btn-hover-color: #1a1a1a;
    --bs-btn-border-color: #e8e8e8;
    --bs-btn-hover-border-color: #d0d0d0;
    background-color: #e8e8e8;
    color: #1a1a1a;
    border-color: #e8e8e8;
    padding: 0.5rem 1rem; /* 8px 16px */
    font-size: var(--font-size-sm);
}

.btn-secondary:hover,
button.btn-secondary:hover {
    background-color: #d0d0d0;
    border-color: #d0d0d0;
    color: #1a1a1a;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.btn-secondary:active {
    opacity: 0.9;
    /* No transform - just opacity change on press */
}

/* Dark theme secondary buttons */
[data-theme="dark"] .btn-secondary,
[data-theme="dark"] .btn.btn-secondary,
[data-theme="dark"] button.btn-secondary {
    --btn-bg: rgba(255, 255, 255, 0.10);
    --btn-color: rgba(255, 255, 255, 0.95);
    --btn-bg-hover: rgba(255, 255, 255, 0.22);
    --bs-btn-bg: rgba(255, 255, 255, 0.10);
    --bs-btn-color: rgba(255, 255, 255, 0.95);
    --bs-btn-hover-bg: rgba(255, 255, 255, 0.22);
    --bs-btn-hover-color: rgba(255, 255, 255, 0.95);
    --bs-btn-border-color: transparent;
    --bs-btn-hover-border-color: transparent;
    background-color: rgba(255, 255, 255, 0.10);
    color: rgba(255, 255, 255, 0.95);
    border-color: transparent;
}

[data-theme="dark"] .btn-secondary:hover,
[data-theme="dark"] .btn.btn-secondary:hover,
[data-theme="dark"] button.btn-secondary:hover {
    background-color: rgba(255, 255, 255, 0.22);
    border-color: transparent;
    color: rgba(255, 255, 255, 0.95);
    box-shadow: none;
}

/* ========================================
   BUTTON SIZES
   ======================================== */
.btn-sm {
    padding: 0.375rem 0.75rem; /* 6px 12px */
    font-size: var(--font-size-sm);
}

.btn-lg {
    padding: 0.875rem 1.75rem; /* 14px 28px */
    font-size: var(--font-size-lg);
}

/* ========================================
   BUTTON VARIANTS
   ======================================== */
.btn-glass {
    background: var(--btn-glass-bg);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    border: 1px solid var(--btn-glass-border);
    box-shadow:
        inset 0 1px 1px rgba(0, 0, 0, 0.05),
        inset 0 -1px 1px rgba(255, 255, 255, 0.5),
        0 2px 4px rgba(0, 0, 0, 0.2);
    overflow: hidden;
}

.btn-glass:hover {
    background: var(--btn-glass-bg-hover);
    /* No transform, no shadow - just background color change for snappy feel */
}

.btn-glass:active {
    opacity: 0.9;
    /* No transform - just opacity change on press */
}

.btn-outline {
    background: transparent;
    border: 2px solid var(--color-border-medium);
    color: var(--color-text-primary);
}

.btn-outline:hover {
    background: var(--color-bg-surface);
    border-color: var(--color-brand-primary);
}

.btn-outline:active {
    opacity: 0.9;
    /* No transform - just opacity change on press */
}

.btn-ghost {
    --btn-bg: transparent;
    --btn-color: var(--color-text-secondary);
    --btn-bg-hover: var(--color-bg-surface);
    --btn-color-hover: var(--color-text-primary);
    border: none;
    padding: 0.5rem 1rem; /* 8px 16px */
}

.btn-ghost:active {
    opacity: 0.9;
    /* No transform - just opacity change on press */
}

/* ========================================
   SUCCESS BUTTON (Upgrade/Positive Actions)
   Overrides Bootstrap btn-success
   ======================================== */
.btn-success,
.btn.btn-success,
button.btn-success {
    --btn-bg: #27ae60;
    --btn-color: #ffffff;
    --btn-bg-hover: #219a52;
    --btn-color-hover: #ffffff;
    --bs-btn-bg: #27ae60;
    --bs-btn-color: #ffffff;
    --bs-btn-hover-bg: #219a52;
    --bs-btn-hover-color: #ffffff;
    --bs-btn-border-color: #27ae60;
    --bs-btn-hover-border-color: #219a52;
    background-color: #27ae60;
    color: #ffffff;
    border-color: #27ae60;
}

.btn-success:hover,
.btn.btn-success:hover,
button.btn-success:hover {
    background-color: #219a52;
    border-color: #219a52;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(39, 174, 96, 0.35);
}

.btn-success:active,
.btn.btn-success:active {
    opacity: 0.9;
}

/* Dark theme success button */
[data-theme="dark"] .btn-success,
[data-theme="dark"] .btn.btn-success,
[data-theme="dark"] button.btn-success {
    --btn-bg: #27ae60;
    --btn-color: #ffffff;
    --btn-bg-hover: #2ecc71;
    --btn-color-hover: #ffffff;
    --bs-btn-bg: #27ae60;
    --bs-btn-color: #ffffff;
    --bs-btn-hover-bg: #2ecc71;
    --bs-btn-hover-color: #ffffff;
    --bs-btn-border-color: #27ae60;
    --bs-btn-hover-border-color: #2ecc71;
    background-color: #27ae60;
    color: #ffffff;
    border-color: #27ae60;
}

[data-theme="dark"] .btn-success:hover,
[data-theme="dark"] .btn.btn-success:hover,
[data-theme="dark"] button.btn-success:hover {
    background-color: #2ecc71;
    border-color: #2ecc71;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(46, 204, 113, 0.3);
}

/* ========================================
   DANGER BUTTON - Now aliases to Primary
   Red danger buttons removed from site design
   ======================================== */
.btn-danger,
.btn.btn-danger,
button.btn-danger {
    --btn-bg: #1a1a1a;
    --btn-color: #ffffff;
    --btn-bg-hover: #404040;
    --btn-color-hover: #ffffff;
    --bs-btn-bg: #1a1a1a;
    --bs-btn-color: #ffffff;
    --bs-btn-hover-bg: #404040;
    --bs-btn-hover-color: #ffffff;
    --bs-btn-border-color: #1a1a1a;
    --bs-btn-hover-border-color: #404040;
    background-color: #1a1a1a;
    color: #ffffff;
    border-color: #1a1a1a;
}

.btn-danger:hover,
.btn.btn-danger:hover,
button.btn-danger:hover {
    background-color: #404040;
    border-color: #404040;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.btn-danger:active,
.btn.btn-danger:active {
    opacity: 0.9;
}

/* Dark theme - same as primary */
[data-theme="dark"] .btn-danger,
[data-theme="dark"] .btn.btn-danger,
[data-theme="dark"] button.btn-danger {
    --btn-bg: #ffffff;
    --btn-color: #000000;
    --btn-bg-hover: #c0c0c0;
    --btn-color-hover: #000000;
    --bs-btn-bg: #ffffff;
    --bs-btn-color: #000000;
    --bs-btn-hover-bg: #c0c0c0;
    --bs-btn-hover-color: #000000;
    --bs-btn-border-color: #ffffff;
    --bs-btn-hover-border-color: #c0c0c0;
    background-color: #ffffff;
    color: #000000;
    border-color: #ffffff;
}

[data-theme="dark"] .btn-danger:hover,
[data-theme="dark"] .btn.btn-danger:hover,
[data-theme="dark"] button.btn-danger:hover {
    background-color: #c0c0c0;
    border-color: #c0c0c0;
    color: #000000;
    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.15);
}

/* ========================================
   INFO BUTTON (Test/Secondary Actions)
   Overrides Bootstrap btn-info
   ======================================== */
.btn-info,
.btn.btn-info,
button.btn-info,
button.btn.btn-info {
    --btn-bg: #2563eb;
    --btn-color: #ffffff;
    --btn-bg-hover: #1d4ed8;
    --btn-color-hover: #ffffff;
    --bs-btn-bg: #2563eb;
    --bs-btn-color: #ffffff;
    --bs-btn-hover-bg: #1d4ed8;
    --bs-btn-hover-color: #ffffff;
    --bs-btn-border-color: #2563eb;
    --bs-btn-hover-border-color: #1d4ed8;
    background-color: #2563eb;
    color: #ffffff;
    border-color: #2563eb;
}

.btn-info:hover,
.btn.btn-info:hover,
button.btn-info:hover,
button.btn.btn-info:hover {
    background-color: #1d4ed8;
    border-color: #1d4ed8;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35);
}

.btn-info:active,
.btn.btn-info:active {
    opacity: 0.9;
}

/* Dark theme info button */
[data-theme="dark"] .btn-info,
[data-theme="dark"] .btn.btn-info,
[data-theme="dark"] button.btn-info,
[data-theme="dark"] button.btn.btn-info {
    --btn-bg: #3b82f6;
    --btn-color: #ffffff;
    --btn-bg-hover: #60a5fa;
    --bs-btn-bg: #3b82f6;
    --bs-btn-color: #ffffff;
    --bs-btn-hover-bg: #60a5fa;
    --bs-btn-hover-color: #ffffff;
    --bs-btn-border-color: #3b82f6;
    --bs-btn-hover-border-color: #60a5fa;
    background-color: #3b82f6;
    color: #ffffff;
    border-color: #3b82f6;
}

[data-theme="dark"] .btn-info:hover,
[data-theme="dark"] .btn.btn-info:hover,
[data-theme="dark"] button.btn-info:hover,
[data-theme="dark"] button.btn.btn-info:hover {
    background-color: #60a5fa;
    border-color: #60a5fa;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(96, 165, 250, 0.3);
}

/* ========================================
   BUTTON WITH ICON
   ======================================== */
.btn-icon {
    gap: var(--spacing-sm);
}

.btn-icon svg,
.btn-icon img {
    width: 20px;
    height: 20px;
}

.btn-icon-only {
    padding: 0.625rem; /* 10px */
    width: 44px;
    height: 44px;
}

/* ========================================
   RESPONSIVE
   ======================================== */
@media (max-width: 768px) {
    .btn,
    .btn-cta,
    .btn-primary,
    .btn-buy {
        padding: 0.5rem 1rem; /* 8px 16px */
        font-size: var(--font-size-sm);
    }

    .btn-lg {
        padding: 0.625rem 1.25rem; /* 10px 20px */
        font-size: var(--font-size-base);
    }
}
/* =====================================================
   HEADER COMPONENT
   Floating navigation header with scroll transitions
   ===================================================== */

.header {
    position: fixed;
    top: 0.5rem;
    left: 0;
    right: 0;
    z-index: var(--z-index-fixed);
    transition: var(--transition-smooth);
    background: transparent;
}

.header.scrolled {
    top: var(--spacing-md);
}

.header .container {
    display: flex;
    justify-content: center;
    max-width: calc(var(--container-xl) * 0.85);
    overflow: visible; /* Allow hover effects to show */
}

.header-inner {
    background-color: transparent;
    backdrop-filter: none;
    border: var(--border-width-thin) solid transparent;
    border-radius: var(--radius-md); /* Sharp corners with micro-chamfer */
    padding: 0.4rem 0.5rem 0.4rem 1.5rem;
    transition: var(--transition-smooth);
    width: 100%;
    overflow: visible; /* Allow hover effects to escape */
    box-sizing: border-box;
}

/* Header scrolled state - Glassmorphism effect */
.header.scrolled .header-inner {
    background-color: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 2px solid rgba(0, 0, 0, 0.15);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

/* Dark theme header glassmorphism */
[data-theme="dark"] .header.scrolled .header-inner {
    background-color: rgba(0, 0, 0, 0.7);
    border: 2px solid rgba(255, 255, 255, 0.25);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-lg);
    overflow: visible; /* Allow hover effects */
    width: 100%;
    box-sizing: border-box;
    flex-wrap: nowrap; /* Prevent wrapping */
    position: relative; /* Allow button to escape on hover */
}

/* ==================== LOGO ==================== */

.logo a {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    transition: var(--transition-fast);
    text-decoration: none;
}

.logo a:hover {
    opacity: 0.7;
}

.logo-img {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    display: block;
}

.logo h1,
.logo .logo-text {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: calc(2.75rem * 0.9); /* 10% smaller */
    font-weight: 400; /* Already light, keeping as is */
    color: var(--color-text-primary);
    letter-spacing: -0.01em;
    white-space: nowrap;
    line-height: 1;
    margin: 0.15rem 0 0 0;
    text-transform: uppercase;
    flex-shrink: 0; /* Don't truncate logo */
}

/* ==================== NAV AUTH VISIBILITY ==================== */
/* Elements hidden until JS confirms visibility - prevents flash/pop-in */
.nav-auth-hidden {
    visibility: hidden;
    width: 0;
    padding: 0;
    margin: 0;
    overflow: hidden;
    pointer-events: none;
    opacity: 0;
    border: 0;
}

.nav-auth-visible {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transition: opacity 0.15s ease;
}

/* ==================== NAVIGATION ==================== */

.nav {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    white-space: nowrap;
    overflow: visible; /* Allow hover effects */
    flex-shrink: 0; /* Don't shrink */
    min-width: 0; /* Allow flex shrinking if needed */
}

/* When nav is in mobile mode, completely remove it from header flow */
.header-content .nav.mobile-mode:not(.active) {
    display: none !important; /* Completely hide from header - takes no space */
    position: fixed !important; /* Remove from flow */
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

.nav-link {
    color: var(--color-text-primary);
    text-decoration: none;
    font-size: calc(var(--font-size-sm) * 1.3);
    font-weight: var(--font-weight-medium);
    position: relative;
    padding: 0.4rem 1rem;
    border-radius: var(--radius-md); /* Sharp corners with micro-chamfer */
    transition: var(--transition-fast);
    text-transform: uppercase;
}

/* Default nav-link hover (used by non-header nav links) */
.nav-link:hover {
    background-color: rgba(0, 0, 0, 0.05);
    color: var(--color-text-primary);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.08);
}

.nav-link:active {
    box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.15);
    opacity: 0.8;
}

/* Main site nav bar hover effect - underline matching active state */
.header .nav-link {
    position: relative;
}

.header .nav-link:hover {
    background-color: transparent;
    box-shadow: none;
}

.header .nav-link:hover::after {
    content: '';
    position: absolute;
    bottom: 0.15rem;
    left: 1rem;
    right: 1rem;
    height: 2px;
    background-color: var(--color-text-primary);
}

.header .nav-link:active {
    box-shadow: none;
    opacity: 1;
}

/* Active page indicator - underline */
.nav-link.active {
    position: relative;
}

.nav-link.active::after {
    content: '';
    position: absolute;
    bottom: 0.15rem;
    left: 1rem;
    right: 1rem;
    height: 2px;
    background-color: var(--color-text-primary);
}

/* ==================== ADMIN DROPDOWN ==================== */

.nav-dropdown {
    position: relative;
    display: inline-block;
}

.nav-dropdown-toggle {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.4rem 1rem;
    font-size: calc(var(--font-size-sm) * 1.3);
    font-weight: var(--font-weight-medium);
    font-family: inherit;
    color: var(--color-text-primary);
    text-transform: uppercase;
    border-radius: var(--radius-md);
    transition: var(--transition-fast);
    display: flex;
    align-items: center;
    gap: 0.25rem;
    position: relative;
}

.nav-dropdown-toggle .fa-chevron-down {
    font-size: 0.7em;
}

.nav-dropdown-toggle:hover {
    background-color: transparent;
    color: var(--color-text-primary);
}

.nav-dropdown-toggle:hover::after {
    content: '';
    position: absolute;
    bottom: 0.15rem;
    left: 1rem;
    right: 1rem;
    height: 2px;
    background-color: var(--color-text-primary);
}

.nav-dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border-medium);
    border-radius: var(--radius-md);
    min-width: 160px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    padding: 0.5rem 0;
}

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown.open .nav-dropdown-menu {
    display: block;
}

.nav-dropdown-item {
    display: block;
    padding: 0.5rem 1rem;
    color: var(--color-text-primary);
    text-decoration: none;
    white-space: nowrap;
    font-size: var(--font-size-sm);
}

.nav-dropdown-item:hover {
    background: var(--color-bg-tertiary);
    color: var(--color-text-primary);
}

.nav-dropdown-item.active {
    color: var(--color-text-primary);
    background: var(--color-bg-tertiary);
}

.nav-dropdown-item i {
    margin-right: 0.5rem;
    width: 1rem;
    text-align: center;
}

/* Mobile mode dropdown */
.nav.mobile-mode .nav-dropdown {
    width: 100%;
}

.nav.mobile-mode .nav-dropdown-toggle {
    width: 100%;
    justify-content: flex-start;
    padding: 1rem;
}

.nav.mobile-mode .nav-dropdown-menu {
    position: static;
    box-shadow: none;
    border: none;
    background: transparent;
    padding-left: 1rem;
}

.nav.mobile-mode .nav-dropdown-item {
    padding: 0.75rem 1rem;
}

/* ==================== CTA BUTTON ==================== */

/* .btn-primary and .btn-buy now inherit from base .btn in buttons.css */
.header .btn-primary,
.header .btn-buy {
    padding: var(--spacing-xs) var(--spacing-md);
    font-size: var(--font-size-xs);
    flex-shrink: 0;
    z-index: 1;
}

.btn-primary:hover,
.btn-buy:hover {
    z-index: 10; /* Higher z-index on hover to escape container */
}

.btn-primary:active,
.btn-buy:active {
    /* No transform - just color change on press */
    opacity: 0.9;
}

/* ==================== MOBILE MENU TOGGLE ==================== */

.mobile-menu-toggle {
    display: none; /* Will be shown dynamically via JS when needed */
    flex-direction: column;
    gap: 4px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    z-index: 1000;
    flex-shrink: 0;
    position: relative;
}

/* Show the mobile menu toggle when JS adds .show class */
.mobile-menu-toggle.show {
    display: flex;
}

/* When menu is open, ensure toggle stays above the menu panel */
.mobile-menu-toggle.active {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 100000; /* Above the mobile menu (99999) */
    background: var(--color-bg-secondary);
    border-radius: var(--radius-md);
    padding: 0.75rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.mobile-menu-toggle span {
    width: 24px;
    height: 2px;
    background-color: var(--color-text-primary);
    transition: var(--transition-fast);
    border-radius: var(--radius-md);
}

.mobile-menu-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(6px, 6px);
}

.mobile-menu-toggle.active span:nth-child(2) {
    opacity: 0;
}

.mobile-menu-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
}

/* ==================== RESPONSIVE DESIGN ==================== */

/* Mobile mode - activated dynamically when content overflows */
/* When mobile-mode is active, nav becomes a fixed slide-out menu */
.nav.mobile-mode {
    position: fixed !important;
    top: 0 !important;
    left: auto !important;
    right: -100% !important;
    bottom: 0 !important;
    width: min(280px, 85vw) !important;
    height: 100vh !important;
    max-height: 100vh !important;
    background-color: var(--color-bg-secondary);
    flex-direction: column !important;
    align-items: flex-start;
    padding: 5rem 2rem 2rem;
    gap: var(--spacing-md);
    transition: right var(--transition-smooth);
    box-shadow: -4px 0 16px rgba(0, 0, 0, 0.1);
    z-index: 99999;
    display: none !important; /* Hidden by default */
    visibility: hidden;
    margin: 0 !important;
    transform: none !important;
}

/* Show menu when active - this overrides the header-content rule */
.nav.mobile-mode.active {
    right: 0 !important;
    display: flex !important; /* Show as menu */
    visibility: visible; /* Show when active */
}

.nav.mobile-mode .nav-link,
.nav.mobile-mode .btn-primary,
.nav.mobile-mode .btn-buy {
    width: 100%;
    text-align: left;
    padding: 1rem;
    justify-content: flex-start;
}

/* Legacy media query for very small screens (fallback) */
@media (max-width: 480px) {
    .mobile-menu-toggle {
        display: flex !important; /* Force show on very small screens */
    }

    .nav:not(.mobile-mode) {
        position: fixed !important;
        top: 0 !important;
        left: auto !important;
        right: -100% !important;
        bottom: 0 !important;
        width: min(280px, 85vw) !important;
        height: 100vh !important;
        background-color: var(--color-bg-secondary);
        flex-direction: column !important;
        align-items: flex-start;
        padding: 5rem 2rem 2rem;
        gap: var(--spacing-md);
        transition: right var(--transition-smooth);
        box-shadow: -4px 0 16px rgba(0, 0, 0, 0.1);
        z-index: 99999;
        transform: none !important;
    }

    .nav:not(.mobile-mode).active {
        right: 0 !important;
    }

    .nav-link,
    .btn-buy,
    .btn-primary {
        width: 100%;
        text-align: left;
        padding: 1rem;
        justify-content: flex-start;
    }
}

@media (max-width: 768px) {
    .header {
        top: var(--spacing-sm);
    }

    .header-inner {
        padding: 0.5rem 0.5rem 0.5rem 1.5rem;
    }

    .header-content {
        gap: var(--spacing-sm); /* Reduce gap on smaller screens */
    }

    .logo-img {
        width: 28px;
        height: 28px;
    }

    .logo h1,
    .logo .logo-text {
        font-size: 2rem;
    }

    .btn-buy {
        padding: 0.4rem 1rem; /* Slightly smaller padding */
        font-size: var(--font-size-sm); /* Smaller font */
    }
}

@media (max-width: 480px) {
    .header-content {
        gap: var(--spacing-xs); /* Even smaller gap */
    }

    .header-inner {
        padding: 0.5rem 0.5rem 0.5rem 1rem;
    }

    .logo-img {
        width: 24px;
        height: 24px;
    }

    .logo h1,
    .logo .logo-text {
        font-size: 1.75rem;
    }

    .btn-buy {
        padding: 0.35rem 0.75rem; /* Even smaller padding */
        font-size: calc(var(--font-size-sm) * 0.9); /* Smaller font */
    }

    .nav-link {
        font-size: var(--font-size-sm); /* Smaller nav link */
        padding: 0.3rem 0.75rem;
    }
}
/* =====================================================
   FOOTER COMPONENT
   Clean, low-profile footer with branding and legal
   ===================================================== */

.footer {
    background-color: var(--color-bg-secondary);
    border-top: var(--border-width-thin) solid var(--color-border-light);
    padding: var(--spacing-md) 0;
    margin-top: var(--spacing-xl);
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

.footer-logo h3 {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: calc(var(--font-size-lg) * 0.9); /* 10% smaller */
    font-weight: 500; /* Reduced from 600 (15% lighter: 600 * 0.85 = 510, rounded to 500) */
    color: var(--color-text-primary);
    text-transform: uppercase;
}

.footer-legal p {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

/* ==================== FOOTER LINKS ==================== */

.footer-links {
    display: flex;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

.footer-links a {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    transition: var(--transition-fast);
}

.footer-links a:hover {
    color: var(--color-text-primary);
}

/* ==================== RESPONSIVE DESIGN ==================== */

@media (max-width: 768px) {
    .footer-content {
        flex-direction: column;
        text-align: center;
        gap: var(--spacing-md);
    }

    .footer-links {
        justify-content: center;
    }
}
/**
 * Theme Toggle Component
 * Sun icon only - always visible, noticeable in both themes
 * Matches feather site design patterns - just an icon, no button styling
 */

.theme-toggle {
    position: fixed;
    top: var(--spacing-xs);
    right: var(--spacing-xs);
    z-index: calc(var(--z-index-overlay) + 1); /* Always above header */
    width: 24px;
    height: 24px;
    padding: 0;
    margin: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    transition: opacity var(--transition-fast);
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    /* Ensure it stays in corner and doesn't interfere with header */
    pointer-events: auto;
}

/**
 * Home Page Sign-in Link
 * Positioned to the left of theme toggle, standard hyperlink style
 */
.home-signin-link {
    position: fixed;
    top: var(--spacing-xs);
    right: calc(var(--spacing-xs) + 24px + var(--spacing-xs)); /* To the left of theme toggle */
    z-index: calc(var(--z-index-overlay) + 1);
    font-family: var(--font-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    text-decoration: none;
    line-height: 24px; /* Match theme toggle height */
    transition: color var(--transition-fast);
    white-space: nowrap;
}

.home-signin-link:hover {
    color: var(--color-text-secondary);
    text-decoration: underline;
}

.theme-toggle:hover {
    opacity: 0.7;
}

/* Icon styling */
.theme-icon {
    width: 24px;
    height: 24px;
    display: block;
}

/* Sun icon - always visible, uses stroke for visibility in both themes */
.theme-icon-sun {
    fill: none;
    stroke: var(--color-text-primary);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Hide moon icon */
.theme-icon-dark {
    display: none;
}

/* Ensure toggle doesn't conflict with header - keep it in corner */
@media (max-width: 768px) {
    .theme-toggle {
        top: var(--spacing-xs);
        right: var(--spacing-xs);
        width: 24px;
        height: 24px;
    }

    .theme-icon {
        width: 24px;
        height: 24px;
    }
    
    .home-signin-link {
        right: calc(var(--spacing-xs) + 24px + var(--spacing-xs));
        font-size: var(--font-size-xs);
    }
}

/**
 * Prevent sign-in link from overlapping header buttons
 * When sign-in link is present, push header down below it
 */
@media (max-width: 1250px) {
    /* When sign-in link is present, push header down to avoid overlap */
    body:has(.home-signin-link) .header {
        top: calc(var(--spacing-xs) + 24px + var(--spacing-xs)); /* Below sign-in link */
    }
    
    body:has(.home-signin-link) .header.scrolled {
        top: calc(var(--spacing-xs) + 24px + var(--spacing-xs));
    }
}

/* On very small screens, add a bit more spacing */
@media (max-width: 600px) {
    body:has(.home-signin-link) .header {
        top: calc(var(--spacing-sm) + 24px + var(--spacing-xs));
    }
    
    body:has(.home-signin-link) .header.scrolled {
        top: calc(var(--spacing-sm) + 24px + var(--spacing-xs));
    }
}

/**
 * Hide theme toggle when modals/panels are open
 * Uses CSS :has() for modern browsers - JS fallback handles older browsers
 * Improves UX by preventing toggle from appearing over modal content
 */

/* Hide when standard modal overlays are visible */
body:has(.modal-overlay:not([style*="display: none"]):not([style*="display:none"])) .theme-toggle,
body:has(.modal-overlay[style*="display: block"]) .theme-toggle,
body:has(.modal-overlay[style*="display: flex"]) .theme-toggle,
/* Hide when styled modal overlays from modals.js are present */
body:has(.styled-modal-overlay) .theme-toggle,
/* Hide when video panel is open */
body:has(.video-panel.open) .theme-toggle,
body:has(.video-panel-overlay.open) .theme-toggle {
    display: none !important;
}

/* Also hide the sign-in link when modals/panels are open */
body:has(.modal-overlay:not([style*="display: none"]):not([style*="display:none"])) .home-signin-link,
body:has(.modal-overlay[style*="display: block"]) .home-signin-link,
body:has(.modal-overlay[style*="display: flex"]) .home-signin-link,
body:has(.styled-modal-overlay) .home-signin-link,
body:has(.video-panel.open) .home-signin-link,
body:has(.video-panel-overlay.open) .home-signin-link {
    display: none !important;
}/* =====================================================
   CAROUSEL COMPONENT
   Transformation carousel showing CAD to rendered comparisons
   ===================================================== */

#carousel-section {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: var(--spacing-xl) 0;
    margin: 0;
    min-height: auto;
    box-sizing: border-box;
    overflow: visible !important;
    isolation: auto;
    background-color: var(--color-bg-secondary);
    contain: layout style;
}

#carousel-section > * {
    max-height: none;
    height: auto;
    overflow: visible;
}

/* --- CAROUSEL STYLES --- */
#transformation-carousel {
    width: 100%;
    height: 312px; /* Original carousel height */
    min-height: 312px;
    max-height: 312px;
    position: relative;
    overflow: visible !important;
    will-change: transform;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    opacity: 0;
    transition: opacity 0.8s ease-out;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-touch-callout: none;
    isolation: auto;
    margin: 0; /* Remove margin - section padding handles spacing */
    align-self: center; /* Center within flex container */
    /* Performance: contain to prevent reflows during animation */
    contain: layout style;
}

#transformation-carousel.loaded {
    opacity: 1;
}

#transformation-carousel.dragging {
    cursor: grabbing;
}

/* Simple black rectangle divider with drop shadow */
#transformation-carousel .carousel-divider {
    position: absolute;
    left: 50%;
    width: 2px;
    transform: translateX(-50%);
    background: #000000;
    z-index: 5;
    pointer-events: none;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.6), 0 0 8px rgba(0, 0, 0, 0.4);
    overflow: visible;
}

/* Carousel items with shadows */
#transformation-carousel .carousel-item {
    max-height: 100%;
    overflow: hidden; /* Clip image to border-radius */
    border-radius: var(--radius-md); /* Match site-wide radius (2px micro-chamfer) */
    position: relative;
    /* Use filter drop-shadow instead of box-shadow to work with clip-path */
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.3));
}

/* Apply border-radius to carousel images */
#transformation-carousel .carousel-item img {
    border-radius: var(--radius-md); /* Match site-wide radius (2px micro-chamfer) */
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Greyscale filter for CAD (before) images on the left side */
#transformation-carousel .cad-inner .carousel-item img {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
}

/* Ensure parent containers allow shadows to be visible */
/* Performance: GPU-accelerate the animated inner containers */
#transformation-carousel .cad-inner,
#transformation-carousel .ai-inner,
#transformation-carousel > div {
    overflow: visible;
    will-change: transform;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Allow shadows to extend beyond clip-path boundaries */
#transformation-carousel > div[style*="clip-path"] {
    overflow: visible !important;
}

/* Items themselves need overflow hidden for content, but shadows extend beyond */
#transformation-carousel .carousel-item {
    overflow: hidden;
    position: relative;
}

#transformation-carousel .carousel-divider,
#transformation-carousel .carousel-divider * {
    overflow: visible;
    clip-path: none;
}

#carousel-section,
#carousel-section * {
    z-index: 1;
}

#transformation-carousel {
    z-index: 1;
}

#transformation-carousel * {
    z-index: 1;
}

/* Fixed height - no responsive changes */
/* =====================================================
   FLOATING TOOL COMPONENT
   Simplified UI for the browser extension floating tool
   ===================================================== */

.rendercad-floating-tool {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-height: 200px;
    padding: 2rem 0;
}

/* Modal Container */
.rendercad-loading-modal {
    position: relative;
    background: rgba(0, 0, 0, 0.75);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    padding: 0;
    color: white;
    font-family: 'Segoe UI', Arial, sans-serif;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3),
                0 0 8px rgba(0, 255, 255, 0.15);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 320px;
    min-height: 60px;
    user-select: none;
}

/* Header */
.rendercad-modal-header {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
    min-height: 50px;
    padding: 18px 8px 12px 8px;
    margin: 0 0 12px 0;
}

.rendercad-header-content {
    display: flex;
    align-items: center;
    gap: 2px;
    justify-content: center;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: auto;
}

/* Logo Wrapper */
.rendercad-logo-wrapper {
    position: relative;
    display: inline-block;
    margin-right: 0.25rem;
    width: 40.128px;
    height: 33.44px;
    font-size: 33.44px;
}

.rendercad-logo {
    width: 40.128px;
    height: 33.44px;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
    vertical-align: middle;
    display: block;
    position: relative;
}

.rendercad-logo-wrapper .tm {
    position: absolute;
    top: 96.8%;
    right: -4.98%;
    font-size: 0.585em;
    line-height: 0;
    font-family: 'Proxima Nova Thin', 'Inter', sans-serif;
    font-weight: 300;
    opacity: 0.9;
    color: #f50057;
    text-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
}

/* Title */
.rendercad-title-wrapper {
    font-family: 'Proxima Nova Thin', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 300;
    font-size: 30.096px;
    letter-spacing: -0.01em;
    line-height: 1;
    position: relative;
}

.rendercad-title-wrapper .tm {
    font-family: 'Proxima Nova Thin', 'Inter', sans-serif;
    font-size: 0.65em;
    font-weight: 300;
    vertical-align: baseline;
    position: relative;
    top: -0.3em;
    margin-left: 0.1em;
    line-height: 0;
    opacity: 0.9;
}

/* Hamburger Menu Button */
.rendercad-hamburger-button {
    position: absolute;
    top: 6px;
    right: 8px;
    background: linear-gradient(-75deg, rgba(255,255,255,0.05), rgba(255,255,255,0.2), rgba(255,255,255,0.05));
    border: 1px solid rgba(255, 255, 255, 0.5);
    color: white;
    width: 24px;
    height: 24px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    padding: 0;
    margin: 0;
    pointer-events: auto;
    z-index: 1000002;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05),
                inset 0 -1px 1px rgba(255, 255, 255, 0.5),
                0 2px 4px rgba(0, 0, 0, 0.2);
}

.rendercad-hamburger-button:hover {
    background: linear-gradient(-75deg, rgba(255,255,255,0.1), rgba(255,255,255,0.3), rgba(255,255,255,0.1));
    border-color: rgba(255, 255, 255, 0.7);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05), inset 0 -1px 1px rgba(255, 255, 255, 0.5), 0 2px 6px rgba(0, 0, 0, 0.3);
}

/* Camera Button (left side, inside modal) */
.rendercad-camera-button {
    position: absolute;
    top: 12px;
    left: 0;
    width: 32px;
    height: 32px;
    background: linear-gradient(-75deg, rgba(255,255,255,0.05), rgba(255,255,255,0.2), rgba(255,255,255,0.05));
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 0 6px 6px 0;
    color: white;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    padding: 0;
    margin: 0;
    pointer-events: auto;
    z-index: 1000003;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05),
                inset 0 -1px 1px rgba(255, 255, 255, 0.5),
                0 2px 4px rgba(0, 0, 0, 0.2);
}

.rendercad-camera-button:hover {
    background: linear-gradient(-75deg, rgba(255,255,255,0.1), rgba(255,255,255,0.3), rgba(255,255,255,0.1));
    border-color: rgba(255, 255, 255, 0.7);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05), inset 0 -1px 1px rgba(255, 255, 255, 0.5), 0 2px 6px rgba(0, 0, 0, 0.3);
}

/* Content Wrapper */
.rendercad-content-wrapper {
    padding: 0 15px 15px 15px;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

/* Horizontal Loading Bar (Divider) */
.rendercad-divider {
    position: relative;
    width: 100%;
    height: 2px;
    overflow: visible;
    margin-top: 8px;
    margin-bottom: 0;
    transform: scaleX(1);
    opacity: 1;
    transform-origin: left center;
}

.rendercad-divider-base {
    position: absolute;
    top: 0;
    height: 100%;
    left: 0;
    width: 100%;
    background: rgba(255, 255, 255, 0.9);
    z-index: 1;
    mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
}

.rendercad-divider-dark-core {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: 1px;
    left: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: 2;
    pointer-events: none;
    mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
}

.rendercad-divider-glow {
    position: absolute;
    top: 0;
    height: 100%;
    left: 0;
    width: 100%;
    border-radius: 1px;
    background: linear-gradient(90deg, transparent 0%, transparent 1.5%, cyan 8%, #faff70 20%, pink 32%, #faff70 44%, cyan 50%, #faff70 56%, pink 68%, #faff70 80%, cyan 92%, transparent 98.5%, transparent 100%);
    background-size: 400% 100%;
    background-position: 0% 0%;
    filter: blur(2px);
    opacity: 1;
    z-index: 3;
    pointer-events: none;
    animation: rendercad-divider-glow 3s linear infinite;
}

@keyframes rendercad-divider-glow {
    0% {
        background-position: 0% 0%;
    }
    100% {
        background-position: 400% 0%;
    }
}
/**
 * Logged-in Navigation
 * Navigation bar for authenticated pages
 */

/* ========================================
   NAVIGATION BAR
   ======================================== */

#logged-in-nav,
.logged-in-nav {
    position: fixed;
    top: var(--spacing-sm);
    left: 0;
    right: 0;
    z-index: var(--z-index-fixed);
    transition: top var(--duration-base) var(--ease-out);
}

#logged-in-nav.scrolled,
.logged-in-nav.scrolled {
    top: var(--spacing-md);
}

#logged-in-nav .container,
.logged-in-nav .container {
    display: flex;
    justify-content: center;
    max-width: calc(var(--container-xl) * 0.85);
    overflow: visible;
}

.navbar-inner {
    background-color: transparent;
    backdrop-filter: none;
    border: var(--border-width-thin) solid transparent;
    border-radius: var(--radius-md);
    padding: 0.4rem 0.5rem 0.4rem 1.5rem;
    transition: all var(--duration-base) var(--ease-out);
    width: 100%;
    overflow: visible;
    box-sizing: border-box;
}

/* Scrolled state - Glassmorphism */
#logged-in-nav.scrolled .navbar-inner,
.logged-in-nav.scrolled .navbar-inner {
    background-color: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: var(--border-width-medium) solid rgba(0, 0, 0, 0.15);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.navbar-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-lg);
    overflow: visible;
    width: 100%;
    box-sizing: border-box;
    flex-wrap: nowrap;
    position: relative;
}

/* ========================================
   LOGO & BRAND
   ======================================== */

.navbar-brand {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: var(--color-text-primary);
    gap: var(--spacing-xs);
}

.navbar-brand-logo {
    position: relative;
    display: inline-block;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}

.navbar-brand-logo img {
    width: 100%;
    height: 100%;
    display: block;
}

.navbar-brand-logo .tm {
    position: absolute;
    top: 31px;
    right: -2px;
    font-size: 0.6em;
    line-height: 0;
    font-family: 'Proxima Nova Thin', sans-serif;
    font-weight: 300;
    opacity: 0.9;
    color: #f50057;
    text-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
}

.brand-text {
    font-family: 'Proxima Nova Thin', 'Inter', sans-serif;
    font-weight: 300;
    font-size: clamp(24px, 4vw, 32px);
    letter-spacing: -0.01em;
    line-height: 1;
    color: var(--color-text-primary);
}

/* ========================================
   PAGE TITLE CENTER
   ======================================== */

.page-title-center {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-primary);
    white-space: nowrap;
}

.page-title-center i {
    font-size: var(--font-size-lg);
}

/* ========================================
   NAVIGATION LINKS
   ======================================== */

.navbar-nav {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    list-style: none;
    margin: 0;
    padding: 0;
}

.studio-btn-nav {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) var(--spacing-sm);
    background-color: transparent;
    border: var(--border-width-thin) solid transparent;
    border-radius: var(--radius-md);
    color: var(--color-text-primary);
    text-decoration: none;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: all var(--duration-fast) var(--ease-out);
    white-space: nowrap;
}

.studio-btn-nav:hover {
    background-color: var(--color-bg-surface);
    border-color: var(--color-border-medium);
    color: var(--color-text-primary);
}

.studio-btn-nav i {
    font-size: var(--font-size-base);
}

.studio-btn-nav-admin {
    color: var(--color-accent-industrial);
}

/* ========================================
   DROPDOWN
   ======================================== */

.dropdown {
    position: relative;
}

.dropdown-toggle {
    cursor: pointer;
}

.dropdown-toggle::after {
    content: '';
    display: inline-block;
    margin-left: var(--spacing-xs);
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 6px solid currentColor;
    vertical-align: middle;
}

.dropdown-menu {
    position: absolute;
    top: calc(100% + var(--spacing-xs));
    right: 0;
    min-width: 200px;
    background-color: var(--color-bg-primary);
    border: var(--border-width-thin) solid var(--color-border-medium);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xl);
    padding: var(--spacing-xs);
    list-style: none;
    margin: 0;
    z-index: var(--z-index-dropdown);
    display: none;
}

.dropdown-menu.show {
    display: block;
    animation: slideDown var(--duration-fast) var(--ease-out);
}

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

.dropdown-menu-dark {
    background-color: var(--color-bg-primary);
    border-color: var(--color-border-medium);
}

.dropdown-menu-end {
    right: 0;
    left: auto;
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    color: var(--color-text-primary);
    text-decoration: none;
    font-size: var(--font-size-sm);
    border-radius: var(--radius-sm);
    transition: all var(--duration-fast) var(--ease-out);
    cursor: pointer;
}

.dropdown-item:hover {
    background-color: var(--color-bg-surface);
    color: var(--color-text-primary);
}

.dropdown-item.active {
    background-color: var(--color-bg-surface);
    color: var(--color-brand-primary);
}

.dropdown-item i {
    width: 16px;
    text-align: center;
}

.dropdown-divider {
    height: 1px;
    background-color: var(--color-border-medium);
    margin: var(--spacing-xs) 0;
    border: none;
}

/* ========================================
   NAVBAR TOGGLER (MOBILE)
   ======================================== */

.navbar-toggler {
    display: none;
    background: transparent;
    border: var(--border-width-thin) solid var(--color-border-medium);
    border-radius: var(--radius-sm);
    padding: var(--spacing-xs);
    color: var(--color-text-primary);
    cursor: pointer;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    transition: all var(--duration-fast) var(--ease-out);
}

.navbar-toggler:hover {
    background-color: var(--color-bg-surface);
}

.navbar-toggler-icon {
    display: block;
    width: 20px;
    height: 2px;
    background-color: currentColor;
    position: relative;
}

.navbar-toggler-icon::before,
.navbar-toggler-icon::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 2px;
    background-color: currentColor;
    left: 0;
}

.navbar-toggler-icon::before {
    top: -6px;
}

.navbar-toggler-icon::after {
    bottom: -6px;
}

/* ========================================
   DARK THEME
   ======================================== */

[data-theme="dark"] #logged-in-nav.scrolled .navbar-inner,
[data-theme="dark"] .logged-in-nav.scrolled .navbar-inner {
    background-color: rgba(0, 0, 0, 0.7);
    border: var(--border-width-medium) solid rgba(255, 255, 255, 0.25);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .dropdown-menu {
    background-color: var(--color-bg-primary);
    border-color: var(--color-border-light);
}

[data-theme="dark"] .dropdown-item:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

/* ========================================
   RESPONSIVE
   ======================================== */

@media (max-width: 768px) {
    .page-title-center {
        display: none;
    }
    
    .navbar-toggler {
        display: flex;
    }
    
    .navbar-nav {
        position: absolute;
        top: calc(100% + var(--spacing-xs));
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        background-color: var(--color-bg-secondary);
        border: var(--border-width-thin) solid var(--color-border-medium);
        border-radius: var(--radius-md);
        padding: var(--spacing-sm);
        box-shadow: var(--shadow-xl);
        display: none;
    }
    
    .navbar-nav.show {
        display: flex;
    }
    
    .studio-btn-nav {
        width: 100%;
        justify-content: flex-start;
        padding: var(--spacing-sm) var(--spacing-md);
    }
    
    .dropdown-menu {
        position: static;
        box-shadow: none;
        border: none;
        background-color: var(--color-bg-surface);
        margin-top: var(--spacing-xs);
    }
}
/**
 * Icon Button Components
 * 30x30, 44x44 icon buttons
 */

/* ========================================
   BASE ICON BUTTON
   ======================================== */

.icon-btn {
    all: unset;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    border: var(--border-width-thin) solid var(--color-border-medium);
    border-radius: var(--radius-md);
    color: var(--color-text-primary);
    cursor: pointer;
    transition: all var(--duration-fast) var(--ease-out);
    flex-shrink: 0;
}

.icon-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.icon-btn:hover:not(:disabled) {
    background-color: var(--color-bg-surface);
    border-color: var(--color-border-heavy);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.08);
}

.icon-btn:active:not(:disabled) {
    box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.15);
}

/* ========================================
   ICON BUTTON SIZES
   ======================================== */

.icon-btn-sm {
    width: 30px;
    height: 30px;
    padding: var(--spacing-xs);
}

.icon-btn-md {
    width: 44px;
    height: 44px;
    padding: var(--spacing-sm);
}

.icon-btn-lg {
    width: 56px;
    height: 56px;
    padding: var(--spacing-md);
}

/* ========================================
   ICON BUTTON VARIANTS
   ======================================== */

.icon-btn-primary {
    background-color: var(--color-brand-primary);
    border-color: var(--color-brand-primary);
    color: var(--color-bg-secondary);
}

.icon-btn-primary:hover:not(:disabled) {
    background-color: var(--color-brand-secondary);
    border-color: var(--color-brand-secondary);
}

/* Danger style now uses primary styling */
.icon-btn-danger {
    color: var(--color-brand-primary);
    border-color: var(--color-brand-primary);
}

.icon-btn-danger:hover:not(:disabled) {
    background-color: var(--color-brand-primary);
    border-color: var(--color-brand-primary);
    color: var(--color-bg-secondary);
}

.icon-btn-success {
    color: var(--color-success);
    border-color: var(--color-success);
}

.icon-btn-success:hover:not(:disabled) {
    background-color: var(--color-success-bg);
    border-color: var(--color-success);
}

.icon-btn-ghost {
    border: none;
    background-color: transparent;
}

.icon-btn-ghost:hover:not(:disabled) {
    background-color: var(--color-bg-surface);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.08);
}

.icon-btn-ghost:active:not(:disabled) {
    box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.15);
}

/* Icon-only button - no box, no background, no border - just the icon */
.icon-btn-icon-only {
    border: none;
    background-color: transparent;
    padding: 0;
    width: auto;
    height: auto;
    min-width: auto;
    min-height: auto;
}

.icon-btn-icon-only:hover:not(:disabled) {
    background-color: transparent;
    border: none;
    opacity: 0.7;
}

.icon-btn-icon-only:active:not(:disabled) {
    opacity: 0.5;
}

/* ========================================
   ICON BUTTON WITH TEXT
   ======================================== */

.icon-btn-text {
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) var(--spacing-sm);
    width: auto;
    height: auto;
    min-height: 30px;
}

.icon-btn-text .icon {
    flex-shrink: 0;
}

.icon-btn-text .text {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ========================================
   ICON SIZES
   ======================================== */

.icon-btn svg,
.icon-btn i {
    width: 1em;
    height: 1em;
    font-size: 1em;
}

.icon-btn-sm svg,
.icon-btn-sm i {
    font-size: 14px;
}

.icon-btn-md svg,
.icon-btn-md i {
    font-size: 18px;
}

.icon-btn-lg svg,
.icon-btn-lg i {
    font-size: 24px;
}

/* ========================================
   BUTTON GROUP
   ======================================== */

.icon-btn-group {
    display: inline-flex;
    gap: var(--spacing-xs);
    align-items: center;
}

.icon-btn-group .icon-btn {
    border-radius: 0;
}

.icon-btn-group .icon-btn:first-child {
    border-radius: var(--radius-md) 0 0 var(--radius-md);
}

.icon-btn-group .icon-btn:last-child {
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.icon-btn-group .icon-btn:only-child {
    border-radius: var(--radius-md);
}

/* ========================================
   DARK THEME
   ======================================== */

[data-theme="dark"] .icon-btn {
    border-color: var(--color-border-light);
}

[data-theme="dark"] .icon-btn:hover:not(:disabled) {
    background-color: rgba(255, 255, 255, 0.05);
    border-color: var(--color-border-medium);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .icon-btn:active:not(:disabled) {
    box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .icon-btn-primary {
    background-color: #ffffff;
    border-color: #ffffff;
    color: #000000;
}

[data-theme="dark"] .icon-btn-primary:hover:not(:disabled) {
    background-color: #e0e0e0;
    border-color: #e0e0e0;
}

/* ========================================
   TILE ACTION BUTTONS (SHARED: RENDER + HISTORY)
   Used in image card action bars with black overlay background
   ======================================== */

.history-action-btn {
    flex: 1 1 0; /* Equal share of available space */
    min-width: 0; /* Allow shrinking below content size */
    max-width: 32px; /* Cap maximum size */
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    overflow: hidden; /* Hide overflow */
}

.history-action-btn i {
    font-size: clamp(12px, 2vw, 16px); /* Scale icons to fit */
    color: var(--color-bg-primary);
    transition: opacity var(--duration-fast) ease;
    flex-shrink: 0;
}

/* In light mode, icons on black background should be white */
:root .history-action-btn i,
[data-theme="light"] .history-action-btn i {
    color: #fff;
}

/* In dark mode, icons on black background should also be white */
[data-theme="dark"] .history-action-btn i {
    color: #fff;
}

.history-action-btn:hover:not(:disabled) i {
    opacity: 0.7;
}

.history-action-btn:active:not(:disabled) i {
    opacity: 0.5;
}

.history-action-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ========================================
   RESPONSIVE
   ======================================== */

@media (max-width: 768px) {
    .icon-btn-sm {
        width: 36px;
        height: 36px;
    }
    
    .icon-btn-md {
        width: 44px;
        height: 44px;
    }
    
    .history-action-btn {
        max-width: 36px;
        height: 32px;
    }

    .history-action-btn i {
        font-size: clamp(14px, 3vw, 18px);
    }
}
/**
 * Form Components
 * Inputs, selects, textareas, checkboxes, toggles
 * Following dbrand industrial/brutalist design
 */

/* ========================================
   BASE FORM ELEMENTS
   ======================================== */

.form-label {
    display: block;
    font-family: var(--font-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--spacing-xs);
}

.form-control,
.form-input,
textarea.form-control,
.form-textarea {
    width: 100%;
    padding: 0.4rem 0.6rem;
    font-family: var(--font-primary);
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
    background-color: var(--color-bg-primary);
    border: var(--border-width-thin) solid var(--color-border-medium);
    border-radius: var(--radius-md);
    transition: all var(--duration-fast) var(--ease-out);
    box-sizing: border-box;
}

.form-control:hover,
.form-input:hover,
textarea.form-control:hover,
.form-textarea:hover {
    border-color: var(--color-border-heavy);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.08);
}

.form-control[readonly]:hover,
.form-input[readonly]:hover {
    border-color: var(--color-border-medium);
    box-shadow: none;
}

.form-select {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    font-family: var(--font-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    background-color: var(--color-bg-secondary);
    border: var(--border-width-thin) solid var(--color-border-medium);
    border-radius: var(--radius-md);
    transition: all var(--duration-fast) var(--ease-out);
    box-sizing: border-box;
}

.form-select:hover {
    border-color: var(--color-border-heavy);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.08);
}

/* When select shows placeholder (disabled selected option), use billing-label font */
/* This targets required selects with empty value selected (invalid state) */
.form-select:required:invalid {
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-normal);
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-normal);
}

.form-control:focus,
.form-input:focus,
.form-select:focus,
textarea.form-control:focus,
.form-textarea:focus {
    outline: none;
    border-color: var(--color-border-heavy);
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.12);
}

.form-control::placeholder,
.form-input::placeholder,
.form-textarea::placeholder {
    color: var(--color-text-muted);
    opacity: 1;
}

.form-control:disabled,
.form-input:disabled,
.form-select:disabled,
.form-textarea:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: var(--color-bg-tertiary);
}

.form-control[readonly],
.form-input[readonly] {
    background-color: var(--color-bg-tertiary);
    cursor: not-allowed;
    opacity: 0.8;
}

/* Override browser autofill styling */
.form-control:-webkit-autofill,
.form-control:-webkit-autofill:hover,
.form-control:-webkit-autofill:focus,
.form-input:-webkit-autofill,
.form-input:-webkit-autofill:hover,
.form-input:-webkit-autofill:focus,
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px var(--color-bg-primary) inset !important;
    -webkit-text-fill-color: var(--color-text-primary) !important;
    box-shadow: 0 0 0 1000px var(--color-bg-primary) inset !important;
    background-color: var(--color-bg-primary) !important;
}

/* ========================================
   INPUT GROUPS
   ======================================== */

.input-group {
    display: flex;
    align-items: stretch;
    width: 100%;
}

.input-group-text {
    display: flex;
    align-items: center;
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    background-color: var(--color-bg-tertiary);
    border: var(--border-width-thin) solid var(--color-border-medium);
    border-right: none;
    border-radius: var(--radius-md) 0 0 var(--radius-md);
}

.input-group .form-control {
    border-left: none;
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.input-group .form-control:focus {
    border-left: var(--border-width-thin) solid var(--color-brand-primary);
}

/* Search Box */
.search-box {
    position: relative;
    width: 100%;
}

.search-box .form-control {
    padding-left: calc(var(--spacing-md) + 1.5rem);
}

.search-box-icon {
    position: absolute;
    left: var(--spacing-md);
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-text-muted);
    pointer-events: none;
}

.search-box-clear {
    position: absolute;
    right: var(--spacing-sm);
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: var(--color-text-muted);
    cursor: pointer;
    padding: var(--spacing-xs);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    transition: background-color var(--duration-fast) var(--ease-out);
}

.search-box-clear:hover {
    background-color: var(--color-bg-surface);
    color: var(--color-text-primary);
}

/* ========================================
   TEXTAREA
   ======================================== */

textarea.form-control {
    min-height: 120px;
    resize: vertical;
    font-family: var(--font-primary);
    line-height: var(--line-height-normal);
}

textarea.form-control.code-editor {
    font-family: var(--font-mono);
    font-size: var(--font-size-sm);
    background-color: var(--color-bg-primary);
    color: var(--color-text-primary);
}

/* ========================================
   SELECT DROPDOWN
   ======================================== */

.form-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%231a1a1a' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--spacing-md) center;
    background-size: 12px;
    padding-right: calc(var(--spacing-md) * 2 + 12px);
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
}

/* Style dropdown options */
.form-select option,
select option {
    font-family: var(--font-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    background-color: var(--color-bg-secondary);
    padding: var(--spacing-xs) var(--spacing-sm);
}

.form-select option:hover,
select option:hover {
    background-color: var(--color-bg-tertiary);
    color: var(--color-text-primary);
}

.form-select option:checked,
select option:checked {
    background-color: var(--color-bg-primary);
    color: var(--color-text-primary);
}

/* Style default/placeholder option (disabled selected) to match billing-label */
.form-select option:disabled {
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-normal);
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-normal);
}

[data-theme="dark"] .form-select option,
[data-theme="dark"] select option {
    background-color: var(--color-bg-primary);
    color: var(--color-text-primary);
}

[data-theme="dark"] .form-select option:hover,
[data-theme="dark"] select option:hover {
    background-color: var(--color-bg-tertiary);
}

[data-theme="dark"] .form-select option:checked,
[data-theme="dark"] select option:checked {
    background-color: var(--color-bg-secondary);
}

.form-select-sm {
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--font-size-sm);
    padding-right: calc(var(--spacing-sm) * 2 + 12px);
}

/* ========================================
   CHECKBOX & RADIO
   ======================================== */

.form-check {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
}

.form-check-input {
    width: 18px;
    height: 18px;
    margin: 0;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-color: var(--color-bg-secondary);
    border: var(--border-width-thin) solid var(--color-border-medium);
    border-radius: var(--radius-sm);
    position: relative;
    flex-shrink: 0;
    transition: all var(--duration-fast) var(--ease-out);
}

.form-check-input:checked {
    background-color: var(--color-brand-primary);
    border-color: var(--color-brand-primary);
}

.form-check-input:checked::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    background-color: var(--color-bg-secondary);
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}

.form-check-input[type="radio"] {
    border-radius: 50%;
}

.form-check-input[type="radio"]:checked::after {
    width: 8px;
    height: 8px;
    background-color: var(--color-bg-secondary);
    border-radius: 50%;
    clip-path: none;
}

.form-check-label {
    font-size: var(--font-size-base);
    color: var(--color-text-primary);
    cursor: pointer;
    user-select: none;
}

/* ========================================
   TOGGLE SWITCH
   ======================================== */

.toggle-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--color-bg-tertiary);
    border: var(--border-width-thin) solid var(--color-border-medium);
    border-radius: var(--radius-full);
    transition: background-color var(--duration-fast) var(--ease-out);
}

.toggle-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 2px;
    bottom: 2px;
    background-color: var(--color-bg-secondary);
    border: var(--border-width-thin) solid var(--color-border-medium);
    border-radius: var(--radius-full);
    transition: transform var(--duration-fast) var(--ease-out);
}

.toggle-switch input:checked + .toggle-slider {
    background-color: var(--color-brand-primary);
    border-color: var(--color-brand-primary);
}

.toggle-switch input:checked + .toggle-slider:before {
    transform: translateX(20px);
}

.toggle-switch input:disabled + .toggle-slider {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ========================================
   FILE UPLOAD
   ======================================== */

.file-upload {
    position: relative;
    display: inline-block;
    width: 100%;
}

.file-upload input[type="file"] {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.file-upload-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-xl);
    background-color: var(--color-bg-surface);
    border: var(--border-width-thin) dashed var(--color-border-medium);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--duration-fast) var(--ease-out);
    text-align: center;
}

.file-upload-label:hover {
    background-color: var(--color-bg-surface-hover);
    border-color: var(--color-brand-primary);
}

.file-upload-label.dragover {
    background-color: var(--color-bg-surface-hover);
    border-color: var(--color-brand-primary);
    border-style: solid;
}

/* ========================================
   FORM HELP TEXT & ERRORS
   ======================================== */

.form-help {
    display: block;
    margin-top: var(--spacing-xs);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.form-control.is-invalid,
.form-select.is-invalid,
.form-input.is-invalid {
    border-color: var(--color-error);
}

.form-error {
    display: block;
    margin-top: var(--spacing-xs);
    font-size: var(--font-size-sm);
    color: var(--color-error);
}

.form-success {
    display: block;
    margin-top: var(--spacing-xs);
    font-size: var(--font-size-sm);
    color: var(--color-success);
}

/* ========================================
   API KEY DISPLAY
   ======================================== */

.api-key-display {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    background-color: var(--color-bg-primary);
    border: var(--border-width-thin) solid var(--color-border-medium);
    border-radius: var(--radius-md);
    font-family: var(--font-mono);
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
}

.api-key-value {
    flex: 1;
    word-break: break-all;
}

.api-key-copy {
    flex-shrink: 0;
    padding: var(--spacing-xs) var(--spacing-sm);
    background-color: transparent;
    border: var(--border-width-thin) solid var(--color-border-medium);
    border-radius: var(--radius-sm);
    color: var(--color-text-primary);
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-out);
}

.api-key-copy:hover {
    background-color: var(--color-bg-surface);
}

/* ========================================
   QR CODE DISPLAY
   ======================================== */

.qr-code-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-lg);
    background-color: var(--color-bg-secondary);
    border: var(--border-width-thin) solid var(--color-border-medium);
    border-radius: var(--radius-md);
}

.qr-code-image {
    width: 200px;
    height: 200px;
    background-color: var(--color-bg-secondary);
    border: var(--border-width-thin) solid var(--color-border-medium);
    border-radius: var(--radius-md);
    padding: var(--spacing-sm);
}

.qr-code-text {
    font-family: var(--font-mono);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    text-align: center;
    word-break: break-all;
}

/* ========================================
   DARK THEME
   ======================================== */

[data-theme="dark"] .form-control,
[data-theme="dark"] .form-input,
[data-theme="dark"] .form-select,
[data-theme="dark"] textarea.form-control {
    background-color: var(--color-bg-primary);
    border-color: var(--color-border-light);
    color: var(--color-text-primary);
}

[data-theme="dark"] .form-control:hover,
[data-theme="dark"] .form-input:hover,
[data-theme="dark"] .form-select:hover,
[data-theme="dark"] textarea.form-control:hover {
    border-color: var(--color-border-medium);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25);
}

[data-theme="dark"] .form-control[readonly]:hover,
[data-theme="dark"] .form-input[readonly]:hover {
    border-color: var(--color-border-light);
    box-shadow: none;
}

[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-input:focus,
[data-theme="dark"] .form-select:focus,
[data-theme="dark"] textarea.form-control:focus {
    border-color: #ffffff;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.35);
}

[data-theme="dark"] .form-control[readonly],
[data-theme="dark"] .form-input[readonly] {
    background-color: var(--color-bg-tertiary);
}

[data-theme="dark"] .form-control:-webkit-autofill,
[data-theme="dark"] .form-input:-webkit-autofill,
[data-theme="dark"] input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px var(--color-bg-primary) inset !important;
    -webkit-text-fill-color: var(--color-text-primary) !important;
}

[data-theme="dark"] .input-group-text {
    background-color: var(--color-bg-primary);
    border-color: var(--color-border-light);
}

[data-theme="dark"] .api-key-display {
    background-color: var(--color-bg-primary);
    border-color: var(--color-border-light);
}

[data-theme="dark"] .qr-code-container {
    background-color: var(--color-bg-primary);
    border-color: var(--color-border-light);
}

[data-theme="dark"] .qr-code-image {
    background-color: var(--color-bg-secondary);
    border-color: var(--color-border-light);
}

/* ========================================
   RESPONSIVE
   ======================================== */

@media (max-width: 768px) {
    .form-control,
    .form-select {
        font-size: var(--font-size-base);
    }
    
    .api-key-value {
        font-size: var(--font-size-xs);
    }
    
    .qr-code-image {
        width: 150px;
        height: 150px;
    }
}
/**
 * Table Components
 * Data tables following industrial design
 */

/* ========================================
   BASE TABLE
   ======================================== */

.table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-primary);
    font-size: var(--font-size-base);
    color: var(--color-text-primary);
    background-color: var(--color-bg-secondary);
}

.table thead {
    background-color: var(--color-bg-primary);
}

.table th {
    padding: var(--spacing-sm) var(--spacing-md);
    text-align: left;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    font-size: var(--font-size-sm);
    letter-spacing: 0.05em;
    color: var(--color-text-primary);
    border-bottom: var(--border-width-medium) solid var(--color-border-medium);
}

.table td {
    padding: var(--spacing-sm) var(--spacing-md);
    border-bottom: var(--border-width-thin) solid var(--color-border-light);
}

.table tbody tr {
    transition: background-color var(--duration-fast) var(--ease-out);
}

.table tbody tr:hover {
    background-color: var(--color-bg-surface);
}

.table tbody tr:last-child td {
    border-bottom: none;
}

/* ========================================
   SORTABLE HEADER
   ======================================== */

.sortable-header {
    cursor: pointer;
    user-select: none;
    position: relative;
    padding-right: calc(var(--spacing-md) + 16px);
}

.sortable-header:hover {
    background-color: var(--color-bg-surface);
}

.sortable-header::after {
    content: '';
    position: absolute;
    right: var(--spacing-sm);
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-bottom: 6px solid var(--color-text-secondary);
    opacity: 0.5;
}

.sortable-header.sort-asc::after {
    border-bottom: 6px solid var(--color-brand-primary);
    border-top: none;
    opacity: 1;
}

.sortable-header.sort-desc::after {
    border-top: 6px solid var(--color-brand-primary);
    border-bottom: none;
    opacity: 1;
}

/* ========================================
   TABLE VARIANTS
   ======================================== */

.table-striped tbody tr:nth-child(odd) {
    background-color: var(--color-bg-surface);
}

.table-bordered {
    border: var(--border-width-thin) solid var(--color-border-medium);
}

.table-bordered th,
.table-bordered td {
    border: var(--border-width-thin) solid var(--color-border-light);
}

.table-compact th,
.table-compact td {
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--font-size-sm);
}

/* ========================================
   TABLE ACTIONS
   ======================================== */

.table-actions {
    display: flex;
    gap: var(--spacing-xs);
    align-items: center;
}

.table-action-btn {
    padding: var(--spacing-xs);
    background: transparent;
    border: none;
    color: var(--color-text-secondary);
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: all var(--duration-fast) var(--ease-out);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
}

.table-action-btn:hover {
    background-color: var(--color-bg-surface);
    color: var(--color-text-primary);
}

/* ========================================
   EMPTY STATE
   ======================================== */

.table-empty {
    text-align: center;
    padding: var(--spacing-xl) var(--spacing-md);
    color: var(--color-text-secondary);
}

.table-empty-icon {
    font-size: var(--font-size-3xl);
    color: var(--color-text-muted);
    margin-bottom: var(--spacing-sm);
}

.table-empty-text {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
}

/* ========================================
   DARK THEME
   ======================================== */

[data-theme="dark"] .table {
    background-color: var(--color-bg-primary);
}

[data-theme="dark"] .table thead {
    background-color: var(--color-bg-secondary);
}

[data-theme="dark"] .table tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.02);
}

/* ========================================
   RESPONSIVE
   ======================================== */

@media (max-width: 768px) {
    .table {
        font-size: var(--font-size-sm);
    }
    
    .table th,
    .table td {
        padding: var(--spacing-xs) var(--spacing-sm);
    }
    
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}
/**
 * Card Components
 * Studio cards, stat cards, metric panels
 */

/* ========================================
   BASE CARD
   ======================================== */

.card {
    background-color: var(--color-bg-secondary);
    border: none;
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-xl);
    transition: box-shadow var(--duration-fast) ease;
}

/* Container cards - no hover effect needed, shadow provides depth */
.card:hover {
    /* No hover change for main containers */
}

.card-header {
    padding: var(--spacing-md) var(--spacing-lg);
    background-color: var(--color-bg-primary);
    border-bottom: var(--border-width-thin) solid var(--color-border-medium);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
}

.card-header h5,
.card-header h6 {
    margin: 0;
    font-family: var(--font-primary);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    font-size: var(--font-size-base);
    letter-spacing: 0.05em;
    color: var(--color-text-primary);
}

.card-body {
    padding: var(--spacing-lg);
    color: var(--color-text-primary);
}

.card-footer {
    padding: var(--spacing-md) var(--spacing-lg);
    background-color: var(--color-bg-primary);
    border-top: var(--border-width-thin) solid var(--color-border-medium);
}

/* ========================================
   STUDIO CARD
   ======================================== */

.studio-card {
    background-color: var(--color-bg-surface);
    border: none;
    border-radius: var(--radius-md);
    padding: var(--spacing-2xl);
    box-shadow: var(--shadow-xl);
    transition: box-shadow var(--duration-fast) ease;
}

/* Container cards - no hover effect needed */
.studio-card:hover {
    /* No hover change for main containers */
}

.studio-card-compact {
    padding: var(--spacing-xl);
}

.studio-card-header {
    margin-bottom: var(--spacing-xl);
}

.studio-card-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.studio-card-body {
    color: var(--color-text-secondary);
}

/* ========================================
   STAT CARD
   ======================================== */

.studio-stat-card {
    background-color: var(--color-bg-surface);
    border: var(--border-width-thin) solid var(--color-border-medium);
    border-radius: var(--radius-md);
    padding: var(--spacing-xl);
    text-align: center;
    transition: border-color var(--duration-fast) ease,
                box-shadow var(--duration-fast) ease;
}

.studio-stat-card:hover {
    border-color: var(--color-border-heavy);
    box-shadow: var(--shadow-hover);
}

.studio-stat-value {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    line-height: var(--line-height-tight);
    font-variant-numeric: tabular-nums;
}

.studio-stat-label {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-top: var(--spacing-sm);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.studio-stat-change {
    font-size: var(--font-size-xs);
    margin-top: var(--spacing-xs);
    font-weight: var(--font-weight-semibold);
}

.studio-stat-change.positive {
    color: var(--color-success);
}

.studio-stat-change.negative {
    color: var(--color-error);
}

/* ========================================
   METRICS PANEL
   ======================================== */

.studio-metrics-panel {
    background-color: var(--color-bg-surface);
    border: none;
    border-radius: var(--radius-lg);
    padding: var(--spacing-2xl);
    box-shadow: var(--shadow-xl);
    backdrop-filter: blur(8px);
}

.studio-metrics-panel h2,
.studio-metrics-panel h3,
.studio-metrics-panel h4 {
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-lg);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.studio-metrics-section {
    background-color: rgba(0, 0, 0, 0.02);
    border: var(--border-width-thin) solid var(--color-border-light);
    border-radius: var(--radius-md);
    padding: var(--spacing-xl);
    margin-bottom: var(--spacing-xl);
}

.studio-metrics-section:last-child {
    margin-bottom: 0;
}

/* ========================================
   AFFILIATE CARD
   ======================================== */

.affiliate-card {
    background-color: var(--color-bg-secondary);
    border: var(--border-width-thin) solid var(--color-border-medium);
    border-left: var(--border-width-thick) solid var(--color-brand-primary);
    border-radius: var(--radius-md);
    padding: var(--spacing-lg);
    transition: border-color var(--duration-fast) ease,
                box-shadow var(--duration-fast) ease;
}

.affiliate-card:hover {
    border-color: var(--color-border-heavy);
    box-shadow: var(--shadow-hover);
}

.affiliate-card.suspended {
    border-left-color: var(--color-error);
    opacity: 0.8;
}

/* ========================================
   TEMPLATE CARD
   ======================================== */

.template-card {
    background-color: var(--color-bg-secondary);
    border: var(--border-width-thin) solid var(--color-border-medium);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-sm);
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: border-color var(--duration-fast) ease,
                box-shadow var(--duration-fast) ease;
}

.template-card:hover {
    border-color: var(--color-border-heavy);
    box-shadow: var(--shadow-hover);
}

.template-card.marketing {
    border-left: var(--border-width-thick) solid var(--color-success);
}

.template-card.transactional {
    border-left: var(--border-width-thick) solid var(--color-info);
}

.template-info {
    flex: 1;
}

.template-id {
    font-family: var(--font-mono);
    font-size: var(--font-size-sm);
    color: var(--color-brand-primary);
    font-weight: var(--font-weight-semibold);
}

.template-subject {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-top: var(--spacing-xs);
}

.template-actions {
    display: flex;
    gap: var(--spacing-sm);
}

/* ========================================
   PAYOUT CARD
   ======================================== */

.payout-card {
    background-color: var(--color-bg-secondary);
    border: var(--border-width-thin) solid var(--color-border-medium);
    border-left: var(--border-width-thick) solid var(--color-success);
    border-radius: var(--radius-md);
    padding: var(--spacing-lg);
}

/* ========================================
   STAT BOX - Global tile component
   Used for stats, steps, and other grid tiles
   ======================================== */

.stat-box {
    background-color: var(--color-bg-surface);
    border: var(--border-width-thin) solid var(--color-border-medium);
    border-radius: var(--radius-sm);
    padding: var(--spacing-sm);
    text-align: center;
    transition: border-color var(--duration-fast) ease,
                box-shadow var(--duration-fast) ease;
}

.stat-box:hover {
    border-color: var(--color-border-heavy);
    box-shadow: var(--shadow-hover);
}

.stat-box .stat-value {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    font-variant-numeric: tabular-nums;
    margin-bottom: 0.125rem;
}

.stat-box .stat-label {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-normal);
}

/* Stat value color variants */
.stat-box .stat-value-success,
.stat-value-success {
    color: var(--color-success) !important;
}

.stat-box .stat-value-warning,
.stat-value-warning {
    color: var(--color-warning) !important;
}

.stat-box .stat-value-info,
.stat-value-info {
    color: var(--color-info) !important;
}

/* ========================================
   DARK THEME
   ======================================== */

[data-theme="dark"] .card {
    background-color: var(--color-bg-primary);
}

[data-theme="dark"] .card-header {
    background-color: var(--color-bg-secondary);
    border-color: var(--color-border-light);
}

[data-theme="dark"] .studio-card {
    background-color: rgba(255, 255, 255, 0.02);
}

[data-theme="dark"] .studio-stat-card {
    background-color: rgba(255, 255, 255, 0.02);
}

[data-theme="dark"] .studio-metrics-panel {
    background-color: rgba(255, 255, 255, 0.02);
}

[data-theme="dark"] .studio-metrics-section {
    background-color: rgba(255, 255, 255, 0.01);
    border-color: var(--color-border-light);
}

/* ========================================
   RESPONSIVE
   ======================================== */

@media (max-width: 768px) {
    .card-body,
    .studio-card {
        padding: var(--spacing-md);
    }
    
    .studio-stat-value {
        font-size: var(--font-size-2xl);
    }
    
    .template-card {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-sm);
    }
    
    .template-actions {
        width: 100%;
        justify-content: flex-end;
    }
}
/**
 * Badge Components
 * Status badges, tags, indicators
 */

/* ========================================
   BASE BADGE
   ======================================== */

.badge,
.studio-badge {
    display: inline-flex;
    align-items: center;
    padding: var(--spacing-xs) var(--spacing-md);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-family: var(--font-primary);
    white-space: nowrap;
}

/* ========================================
   BADGE VARIANTS
   ======================================== */

.badge-success,
.studio-badge-success {
    background-color: var(--color-success-bg);
    color: var(--color-success);
    border: var(--border-width-thin) solid var(--color-success);
}

.badge-warning,
.studio-badge-warning {
    background-color: var(--color-warning-bg);
    color: var(--color-warning);
    border: var(--border-width-thin) solid var(--color-warning);
}

.badge-error,
.studio-badge-error {
    background-color: var(--color-error-bg);
    color: var(--color-error);
    border: var(--border-width-thin) solid var(--color-error);
}

.badge-beta {
    background-color: rgba(245, 0, 87, 0.3);
    color: #f50057;
    border: var(--border-width-thin) solid rgba(245, 0, 87, 0.5);
    font-size: 0.6em;
    padding: 2px 4px;
    margin-left: 4px;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.5px;
    vertical-align: middle;
}

/* Info badge - uses slate gray for neutral info */
.badge-info,
.studio-badge-info,
.badge.badge-info,
span.badge.badge-info,
span.badge-info {
    background-color: rgba(100, 116, 139, 0.12);
    color: #64748b;
    border: 1px solid #64748b;
}

[data-theme="dark"] .badge-info,
[data-theme="dark"] .studio-badge-info,
[data-theme="dark"] .badge.badge-info,
[data-theme="dark"] span.badge.badge-info,
[data-theme="dark"] span.badge-info {
    background-color: rgba(148, 163, 184, 0.12);
    color: #94a3b8;
    border: 1px solid #94a3b8;
}

.badge-neutral,
.studio-badge-neutral {
    background-color: var(--color-bg-surface);
    color: var(--color-text-secondary);
    border: var(--border-width-thin) solid var(--color-border-medium);
}

.badge-secondary {
    background-color: var(--color-bg-tertiary);
    color: var(--color-text-secondary);
    border: var(--border-width-thin) solid var(--color-border-medium);
}

.badge-light {
    background-color: var(--color-bg-surface);
    color: var(--color-text-primary);
    border: var(--border-width-thin) solid var(--color-border-light);
}

.badge-primary {
    background-color: var(--color-brand-primary);
    color: var(--color-text-inverse);
    border: var(--border-width-thin) solid var(--color-brand-primary);
}

/* ========================================
   SPECIAL BADGES
   ======================================== */

.beta-tag {
    font-size: 0.6em;
    background-color: rgba(245, 0, 87, 0.3);
    color: #f50057;
    padding: 2px 4px;
    border-radius: var(--radius-sm);
    margin-left: 4px;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.5px;
    vertical-align: middle;
    border: none;
}

.beta-tag-mobile {
    font-size: 0.65em;
    color: #f50057;
    vertical-align: super;
    margin-left: 1px;
    font-weight: var(--font-weight-semibold);
    background: transparent;
    padding: 0;
    border: none;
}

.free-badge,
.free-badge-large {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-xs) var(--spacing-md);
    background-color: var(--color-success);
    color: var(--color-bg-secondary);
    border-radius: var(--radius-sm);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: var(--font-size-xs);
    border: none;
}

.free-badge-large {
    position: absolute;
    top: -12px;
    right: var(--spacing-lg);
    padding: var(--spacing-sm) var(--spacing-lg);
    font-size: var(--font-size-sm);
    z-index: 10;
}

.badge-marketing {
    background-color: rgba(16, 185, 129, 0.2);
    color: var(--color-success);
    border: var(--border-width-thin) solid var(--color-success);
}

.badge-transactional {
    background-color: rgba(100, 116, 139, 0.12);
    color: #64748b;
    border: 1px solid #64748b;
}

[data-theme="dark"] .badge-transactional {
    background-color: rgba(148, 163, 184, 0.12);
    color: #94a3b8;
    border: 1px solid #94a3b8;
}

/* ========================================
   STATUS INDICATOR
   ======================================== */

.status-indicator {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: var(--font-size-sm);
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--color-text-muted);
}

.status-dot.active {
    background-color: var(--color-success);
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.5);
}

.status-dot.inactive {
    background-color: var(--color-text-muted);
}

.status-dot.warning {
    background-color: var(--color-warning);
    box-shadow: 0 0 8px rgba(245, 158, 11, 0.5);
}

.status-dot.error {
    background-color: var(--color-error);
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.5);
}

.live-indicator {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) var(--spacing-sm);
    background-color: var(--color-bg-surface);
    border: var(--border-width-thin) solid var(--color-border-medium);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--duration-fast) var(--ease-out);
}

.live-indicator:hover {
    background-color: var(--color-bg-surface-hover);
}

.live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--color-success);
    animation: pulse 2s infinite;
}

.live-text {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

/* ========================================
   DARK THEME
   ======================================== */

[data-theme="dark"] .badge-neutral,
[data-theme="dark"] .studio-badge-neutral {
    background-color: rgba(255, 255, 255, 0.05);
    border-color: var(--color-border-light);
}

/* ========================================
   RESPONSIVE
   ======================================== */

@media (max-width: 768px) {
    .badge,
    .studio-badge {
        font-size: 10px;
        padding: 2px 6px;
    }
    
    .free-badge-large {
        font-size: var(--font-size-xs);
        padding: var(--spacing-xs) var(--spacing-md);
    }
}
/**
 * Modal Components
 * Modals, dialogs, image viewers
 */

/* ========================================
   MODAL OVERLAY (Full-screen container)
   ======================================== */

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-index-modal);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ========================================
   MODAL BACKDROP
   ======================================== */

.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 1;
    animation: fadeIn var(--duration-base) var(--ease-out);
}

/* Make backdrop clickable only when it needs to close the modal */
.modal-overlay .modal-backdrop {
    cursor: pointer;
}

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

/* ========================================
   BASE MODAL (Custom modal system)
   Scoped to .modal-overlay to avoid Bootstrap conflicts
   ======================================== */

.modal-overlay .modal {
    background-color: var(--color-bg-secondary);
    border: var(--border-width-thin) solid var(--color-border-medium);
    border-radius: var(--radius-md);
    max-width: 600px;
    width: 100%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-2xl);
    animation: slideUp var(--duration-base) var(--ease-out);
    overflow: hidden;
}

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

.modal-overlay .modal-header {
    padding: var(--spacing-sm) var(--spacing-md);
    background-color: var(--color-bg-primary);
    border-bottom: var(--border-width-thin) solid var(--color-border-medium);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
    flex-shrink: 0;
}

.modal-overlay .modal-title {
    font-family: var(--font-primary);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0;
}

/* Modal header h2 styling - smaller than default h2 */
.modal-overlay .modal-header h2 {
    font-family: var(--font-primary);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0;
    line-height: 1.2;
}

.modal-close {
    background: transparent;
    border: none;
    color: var(--color-text-secondary);
    cursor: pointer;
    padding: var(--spacing-xs);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: var(--radius-sm);
    transition: background-color var(--duration-fast) ease, color var(--duration-fast) ease;
    box-shadow: none;
}

.modal-close:hover {
    background-color: var(--color-bg-tertiary);
    color: var(--color-text-primary);
    box-shadow: none; /* No shadow on hover - smooth background change only */
}

.modal-overlay .modal-body {
    padding: var(--spacing-md);
    overflow-y: auto;
    flex: 1;
}

/* Form groups in modals - spacing between inputs */
.modal-overlay .modal-body .form-group {
    margin-bottom: var(--spacing-sm);
}

.modal-overlay .modal-body .form-group:last-child {
    margin-bottom: 0;
}

.modal-overlay .modal-footer {
    padding: var(--spacing-md);
    background-color: var(--color-bg-primary);
    border-top: var(--border-width-thin) solid var(--color-border-medium);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--spacing-sm);
    flex-shrink: 0;
    flex-wrap: wrap;
}

.modal-overlay .modal-footer .btn {
    flex-shrink: 0;
    min-width: fit-content;
}

/* ========================================
   MODAL VARIANTS (Custom modal system)
   ======================================== */

.modal-overlay .modal-sm {
    max-width: 400px;
}

.modal-overlay .modal-lg {
    max-width: 800px;
}

.modal-overlay .modal-xl {
    max-width: 1200px;
}

.modal-overlay .modal-fullscreen {
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    height: 100%;
    border-radius: 0;
}

/* Modal content container (inside overlay) */
.modal-overlay .modal-content {
    position: relative;
    z-index: 10;
    background-color: var(--color-bg-secondary);
    border: var(--border-width-thin) solid var(--color-border-medium);
    border-radius: var(--radius-md);
    max-width: 600px;
    width: 90%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-2xl);
    animation: slideUp var(--duration-base) var(--ease-out);
    overflow: hidden;
    padding: 0; /* No padding on container - header/body/footer have their own padding */
}

.modal-overlay .modal-content.modal-sm {
    max-width: 400px;
    padding: 0;
}

.modal-overlay .modal-content.modal-sm .modal-header {
    padding: var(--spacing-sm) var(--spacing-md);
}

.modal-overlay .modal-content.modal-sm .modal-body {
    padding: 0.75rem 1rem;
}

.modal-overlay .modal-content.modal-sm .modal-body p {
    margin: 0;
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
}

.modal-overlay .modal-content.modal-sm .modal-footer {
    padding: 0.75rem 1rem;
}

/* ========================================
   IMAGE VIEWER MODAL
   ======================================== */

.image-viewer-modal {
    max-width: 95vw;
    max-height: 95vh;
    width: auto;
    height: auto;
}

.image-viewer-modal .modal-body {
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-bg-primary);
}

.image-viewer-image {
    max-width: 100%;
    max-height: 90vh;
    object-fit: contain;
}

.image-viewer-actions {
    position: absolute;
    top: var(--spacing-md);
    right: var(--spacing-md);
    display: flex;
    gap: var(--spacing-sm);
    z-index: 10;
}

/* ========================================
   CONFIRM DIALOG
   ======================================== */

.confirm-dialog {
    max-width: 400px;
}

.confirm-dialog .modal-body {
    text-align: center;
}

.confirm-dialog-icon {
    font-size: var(--font-size-4xl);
    color: var(--color-warning);
    margin-bottom: var(--spacing-md);
}

.confirm-dialog-message {
    font-size: var(--font-size-base);
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-lg);
}

/* ========================================
   GLASS PANEL (Render Modal)
   ======================================== */

.glass-panel {
    background-color: var(--color-bg-secondary);
    border: var(--border-width-thin) solid var(--color-border-medium);
    border-radius: var(--radius-md);
    padding: var(--spacing-lg);
}

.glass-panel.render-modal {
    max-width: 1400px;
    margin: 0 auto;
    padding: var(--spacing-md) var(--spacing-lg);
}

/* ========================================
   ALERT/NOTIFICATION
   ======================================== */

.alert {
    padding: var(--spacing-sm) var(--spacing-md);
    border: var(--border-width-thin) solid;
    border-radius: var(--radius-md);
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-md);
}

.alert-icon {
    flex-shrink: 0;
    font-size: var(--font-size-lg);
}

.alert-content {
    flex: 1;
}

.alert-title {
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: var(--font-size-sm);
    margin-bottom: var(--spacing-xs);
}

.alert-message {
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
}

.alert-success {
    background-color: var(--color-success-bg);
    border-color: var(--color-success);
    color: var(--color-success);
}

.alert-warning {
    background-color: var(--color-warning-bg);
    border-color: var(--color-warning);
    color: var(--color-warning);
}

.alert-error {
    background-color: var(--color-error-bg);
    border-color: var(--color-error);
    color: var(--color-error);
}

.alert-info {
    background-color: var(--color-bg-tertiary);
    border-color: var(--color-border-medium);
    color: var(--color-text-secondary);
}

.alert-dismissible {
    padding-right: calc(var(--spacing-lg) + 30px);
    position: relative;
}

.alert-close {
    position: absolute;
    top: var(--spacing-md);
    right: var(--spacing-md);
    background: transparent;
    border: none;
    color: inherit;
    cursor: pointer;
    padding: var(--spacing-xs);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: var(--radius-sm);
    opacity: 0.7;
    transition: opacity var(--duration-fast) var(--ease-out);
}

.alert-close:hover {
    opacity: 1;
}

/* Toast Notification */
.toast {
    position: fixed;
    bottom: var(--spacing-lg);
    right: var(--spacing-lg);
    min-width: 300px;
    max-width: 400px;
    z-index: var(--z-index-tooltip);
    animation: slideInRight var(--duration-base) var(--ease-out);
}

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

.toast .alert {
    margin-bottom: 0;
    box-shadow: var(--shadow-xl);
}

/* ========================================
   LOADING OVERLAY
   ======================================== */

.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: var(--z-index-overlay);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: var(--spacing-md);
}

.loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--color-border-medium);
    border-top-color: var(--color-brand-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

.loading-text {
    color: var(--color-text-primary);
    font-size: var(--font-size-base);
}

/* Auth Loading Screen */
#auth-loading {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #000;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: var(--spacing-md);
}

#auth-loading .spinner-border {
    width: 3rem;
    height: 3rem;
    border-width: 3px;
}

#auth-loading > div:last-child {
    color: #fff;
    font-size: var(--font-size-base);
}

/* ========================================
   DARK THEME (Custom modal system)
   ======================================== */

[data-theme="dark"] .modal-overlay .modal {
    background-color: var(--color-bg-primary);
    border-color: var(--color-border-light);
}

[data-theme="dark"] .modal-overlay .modal-header {
    background-color: var(--color-bg-secondary);
    border-color: var(--color-border-light);
}

[data-theme="dark"] .modal-overlay .modal-footer {
    background-color: var(--color-bg-secondary);
    border-color: var(--color-border-light);
}

[data-theme="dark"] .glass-panel {
    background-color: var(--color-bg-primary);
    border-color: var(--color-border-light);
}

/* ========================================
   FULLSCREEN IMAGE/VIDEO VIEWER
   Shared between render and history pages
   ======================================== */

/* Corner close button for large view modals - flush top right of viewport */
/* Solid black background with white icon */
.modal-close-corner {
    position: fixed;
    top: 0;
    right: 0;
    width: 44px;
    height: 44px;
    background-color: #000;
    border: none;
    color: #fff;
    cursor: pointer;
    z-index: calc(var(--z-index-overlay) + 2);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity var(--duration-fast) ease;
}

.modal-close-corner:hover {
    opacity: 0.7;
}

.modal-close-corner i {
    font-size: 1.25rem;
    color: #fff;
}

/* Image viewer container */
.image-viewer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    pointer-events: none;
}

.viewer-nav,
.viewer-content,
.viewer-actions,
.viewer-actions .btn,
.viewer-menu-container,
.modal-close-corner {
    pointer-events: auto;
}

/* Navigation arrows - solid black background with white icon */
.viewer-nav {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    background-color: #000;
    border: none;
    color: #fff;
    width: 44px;
    height: 60px;
    border-radius: var(--radius-md);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: calc(var(--z-index-overlay) + 2);
    transition: opacity var(--duration-fast) ease;
}

.viewer-nav:hover {
    opacity: 0.7;
}

.viewer-nav i {
    font-size: 1.5rem;
    color: #fff;
}

.viewer-prev {
    left: 0;
    right: auto;
    margin-left: 0;
    margin-right: 0;
}

.viewer-next {
    right: 0;
    left: auto;
    margin-left: 0;
    margin-right: 0;
}

/* Content area */
.viewer-content {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    max-height: calc(100vh - 140px);
    overflow: hidden;
}

.viewer-content img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.viewer-content.viewer-loading {
    position: relative;
}

.viewer-content.viewer-loading::after {
    content: '';
    position: absolute;
    width: 30px;
    height: 30px;
    border: 3px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.9s linear infinite;
}

.viewer-content img.is-loading {
    opacity: 0.5;
}

/* ========================================
   FULLSCREEN VIEWER TOOLBAR
   Slim icon toolbar - matches tile overlay style
   Solid black background with white icons
   ======================================== */

/* Toolbar container - solid black, same thickness as tile overlay */
.viewer-actions,
.video-actions {
    position: fixed;
    bottom: var(--spacing-lg);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0.375rem;
    padding: 6px;
    border-radius: var(--radius-md);
    z-index: calc(var(--z-index-overlay) + 2);
    pointer-events: auto;
    background: #000;
}

/* Icon buttons - same size as tile overlay buttons */
.viewer-actions .viewer-action-btn,
.video-actions .viewer-action-btn {
    min-width: 0; /* Allow buttons to compress when space is tight */
    width: 32px;
    flex-shrink: 1; /* Allow shrinking if needed */
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    padding: 0 2px;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: opacity var(--duration-fast) ease;
}

.viewer-actions .viewer-action-btn i,
.video-actions .viewer-action-btn i {
    font-size: 18px;
    color: #fff;
    transition: opacity var(--duration-fast) ease;
}

.viewer-actions .viewer-action-btn:hover,
.video-actions .viewer-action-btn:hover {
    opacity: 0.7;
}

.viewer-actions .viewer-action-btn:active,
.video-actions .viewer-action-btn:active {
    opacity: 0.5;
}

/* Delete button - same as all other buttons (site standard) */
/* No special styling needed - inherits from .viewer-action-btn */

/* Separator between button groups */
.viewer-actions .toolbar-separator,
.video-actions .toolbar-separator {
    width: 1px;
    height: 20px;
    background: rgba(255, 255, 255, 0.3);
    margin: 0 4px;
    align-self: center;
}

/* ========================================
   RESPONSIVE
   ======================================== */

@media (max-width: 768px) {
    .modal-overlay .modal {
        max-width: 100%;
        max-height: 100%;
        border-radius: 0;
        margin: 0;
    }

    .modal-overlay .modal-backdrop {
        padding: 0;
    }

    .toast {
        right: var(--spacing-sm);
        left: var(--spacing-sm);
        min-width: auto;
        max-width: 100%;
    }

    .viewer-nav {
        width: 40px;
        height: 48px;
    }

    .viewer-nav i {
        font-size: 1.25rem;
    }

    .viewer-actions,
    .video-actions {
        padding: var(--spacing-xs);
        gap: var(--spacing-xs);
    }

    .viewer-actions .viewer-action-btn,
    .video-actions .viewer-action-btn {
        width: 40px;
        height: 40px;
    }

    .viewer-actions .viewer-action-btn i,
    .video-actions .viewer-action-btn i {
        font-size: 16px;
    }
}

@media (max-width: 480px) {
    .image-viewer {
        padding: 1rem;
    }

    .viewer-prev {
        left: 0;
    }

    .viewer-next {
        right: 0;
    }

    .viewer-actions,
    .video-actions {
        bottom: var(--spacing-sm);
        padding: var(--spacing-xs);
        gap: var(--spacing-xs);
    }

    .viewer-actions .viewer-action-btn,
    .video-actions .viewer-action-btn {
        width: 36px;
        height: 36px;
    }

    .viewer-actions .viewer-action-btn i,
    .video-actions .viewer-action-btn i {
        font-size: 14px;
    }
}
/**
 * Grid Components
 * History grid, image grid, responsive grids
 */

/* ========================================
   BASE GRID
   ======================================== */

.grid-container {
    display: grid;
    gap: var(--spacing-md);
    width: 100%;
}

.grid-responsive {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

/* ========================================
   HISTORY GRID
   ======================================== */

#history-grid-wrapper {
    overflow-y: auto;
    overflow-x: hidden;
    max-height: calc(100vh - 74px - 80px - 88px);
}

#history-grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
    gap: var(--spacing-lg);
    overflow: visible;
    padding: var(--spacing-md) var(--spacing-sm);
}

.history-grid-item {
    position: relative;
    background-color: var(--color-bg-surface);
    border: var(--border-width-thin) solid var(--color-border-medium);
    border-radius: var(--radius-sm);
    overflow: hidden;
    transition: transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out);
    cursor: pointer;
}

.history-grid-item:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-hover);
}

.history-grid-image {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    background-color: var(--color-bg-primary);
}

.history-grid-info {
    padding: var(--spacing-sm) var(--spacing-md);
    background-color: var(--color-bg-secondary);
}

.history-grid-title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-xs);
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.history-grid-meta {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.history-grid-actions {
    position: absolute;
    top: var(--spacing-sm);
    right: var(--spacing-sm);
    display: flex;
    gap: var(--spacing-xs);
    opacity: 0;
    transition: opacity var(--duration-fast) var(--ease-out);
}

.history-grid-item:hover .history-grid-actions {
    opacity: 1;
}

/* ========================================
   IMAGE GRID
   ======================================== */

.image-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--spacing-md);
}

.image-grid-item {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: var(--radius-sm);
    border: var(--border-width-thin) solid var(--color-border-medium);
    background-color: var(--color-bg-surface);
    cursor: pointer;
    transition: box-shadow var(--duration-base) var(--ease-out);
}

.image-grid-item:hover {
    box-shadow: var(--shadow-hover);
}

.image-grid-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ========================================
   FILTER TABS
   ======================================== */

.filter-tabs {
    position: relative;
    z-index: 100;
    padding: 0 0 var(--spacing-sm) 0;
    margin-top: var(--spacing-xl);
    margin-bottom: var(--spacing-md);
    border-bottom: var(--border-width-thin) solid var(--color-border-light);
    display: flex;
    gap: var(--spacing-xs);
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

/* Override for history page - tabs should align with border */
.history-page .filter-tabs {
    padding-bottom: 0.75rem;
    margin-top: 0;
    margin-bottom: 0;
    border-bottom: none;
}

.filter-tabs::-webkit-scrollbar {
    display: none;
}

.filter-tab-btn,
.history-filter-btn {
    background: transparent;
    border: none;
    color: var(--color-text-secondary);
    padding: var(--spacing-sm) var(--spacing-md);
    min-height: 44px;
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: all var(--duration-base) var(--ease-out);
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    position: relative;
    white-space: nowrap;
    text-transform: uppercase;
}

.filter-tab-btn::after,
.history-filter-btn::after {
    content: '';
    position: absolute;
    bottom: calc(-1 * var(--spacing-sm) - 1px);
    left: 50%;
    transform: translateX(-50%) scaleX(0);
    width: 70%;
    height: 2px;
    background-color: var(--color-text-primary); /* Black in light, white in dark */
    border-radius: 0;
    transition: transform var(--duration-base) var(--ease-out);
}

.filter-tab-btn:hover,
.history-filter-btn:hover {
    color: var(--color-text-primary);
    background-color: var(--color-bg-surface);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.08);
}

.filter-tab-btn:active,
.history-filter-btn:active {
    box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.15);
}

.filter-tab-btn.active,
.history-filter-btn.active {
    color: var(--color-text-primary);
    background-color: var(--color-bg-surface);
}

.filter-tab-btn.active::after,
.history-filter-btn.active::after {
    transform: translateX(-50%) scaleX(1);
}

/* ========================================
   TAB NAVIGATION
   ======================================== */

.tab-nav {
    display: flex;
    gap: var(--spacing-xs);
    border-bottom: var(--border-width-thin) solid var(--color-border-medium);
    margin-bottom: var(--spacing-lg);
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.tab-nav::-webkit-scrollbar {
    display: none;
}

.tab-nav-item {
    background: transparent;
    border: none;
    color: var(--color-text-secondary);
    padding: var(--spacing-sm) var(--spacing-lg);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all var(--duration-fast) var(--ease-out);
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.tab-nav-item:hover {
    color: var(--color-text-primary);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.08);
}

.tab-nav-item:active {
    box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.15);
}

.tab-nav-item.active {
    color: var(--color-text-primary);
    border-bottom-color: var(--color-brand-primary);
}

/* Custom tab system - scoped to avoid Bootstrap conflict */
.custom-tabs .tab-content {
    display: none;
}

.custom-tabs .tab-content.active {
    display: block;
}

/* ========================================
   EMPTY STATE
   ======================================== */

.grid-empty-state {
    grid-column: 1 / -1;
    text-align: center;
    padding: var(--spacing-2xl) var(--spacing-md);
    color: var(--color-text-secondary);
}

.grid-empty-icon {
    font-size: var(--font-size-4xl);
    color: var(--color-text-muted);
    margin-bottom: var(--spacing-md);
}

.grid-empty-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-sm);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.grid-empty-text {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
}

/* ========================================
   DARK THEME
   ======================================== */

[data-theme="dark"] .history-grid-item {
    background-color: var(--color-bg-primary);
    border-color: var(--color-border-light);
}

[data-theme="dark"] .history-grid-info {
    background-color: var(--color-bg-primary);
}

[data-theme="dark"] .image-grid-item {
    border-color: var(--color-border-light);
}

/* ========================================
   RESPONSIVE
   ======================================== */

@media (max-width: 768px) {
    #history-grid-container {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
        padding: var(--spacing-sm);
    }
    
    .image-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: var(--spacing-sm);
    }
    
    .filter-tabs {
        margin-top: var(--spacing-md);
    }
    
    .tab-nav {
        gap: 0;
    }
    
    .tab-nav-item {
        padding: var(--spacing-sm) var(--spacing-md);
        font-size: var(--font-size-sm);
    }
}
/**
 * Toggle Components
 * Unified pill/button toggle groups for filter controls
 */

/* ========================================
   TOGGLE GROUP (Pill-style selectors)
   Used for: date filters, mode toggles, enum selectors
   ======================================== */

.toggle-group {
    display: inline-flex;
    background: var(--color-bg-secondary);
    border: var(--border-width-thin) solid var(--color-border-medium);
    border-radius: var(--radius-md);
    overflow: hidden;
    gap: 0;
}

.toggle-btn {
    padding: 6px 10px;
    font-family: var(--font-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all var(--duration-fast) ease;
    white-space: nowrap;
    position: relative;
}

.toggle-btn:hover:not(.active) {
    color: var(--color-text-primary);
    background: var(--color-bg-tertiary);
}

/* Active state - clear selection with border */
.toggle-btn.active {
    background: var(--color-bg-primary);
    color: var(--color-text-primary);
    box-shadow: inset 0 0 0 var(--border-width-thick) var(--color-text-primary);
}

/* Small variant - still readable */
.toggle-group-sm .toggle-btn {
    padding: 6px 10px;
    font-size: var(--font-size-sm);
}

/* Compact variant for mobile */
.toggle-group-compact .toggle-btn {
    padding: 4px 8px;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
}

/* ========================================
   FILTER TABS (Underline-style tabs)
   Used for: history page, content type filters
   ======================================== */

.filter-tabs-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding-bottom: 0;
    margin-bottom: 16px;
    border-bottom: var(--border-width-thin) solid var(--color-border-light);
    gap: 8px;
}

.filter-tabs {
    display: flex;
    gap: 6px;
    padding-bottom: 0;
    border-bottom: none;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    flex: 1;
    align-items: flex-end;
    margin: 0;
}

.filter-tabs::-webkit-scrollbar {
    display: none;
}

.filter-tab-btn {
    background: transparent;
    border: none;
    color: var(--color-text-secondary);
    padding: 8px 12px;
    min-height: 40px;
    border-radius: var(--radius-md);
    font-family: var(--font-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all var(--duration-fast) ease;
    display: flex;
    align-items: center;
    gap: 6px;
    position: relative;
    white-space: nowrap;
}

/* Underline indicator */
.filter-tab-btn::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 50%;
    transform: translateX(-50%) scaleX(0);
    width: 70%;
    height: 2px;
    background-color: var(--color-text-primary);
    border-radius: 0;
    transition: transform var(--duration-base) var(--ease-out);
}

.filter-tab-btn:hover:not(.active) {
    color: var(--color-text-primary);
    background-color: var(--color-bg-surface);
}

.filter-tab-btn.active {
    color: var(--color-text-primary);
    background-color: var(--color-bg-surface);
}

.filter-tab-btn.active::after {
    transform: translateX(-50%) scaleX(1);
}

.filter-tab-btn i {
    font-size: 0.875rem;
}

/* ========================================
   METRICS TABS (Underline style - matches history page)
   Used for: metrics dashboard tabs
   ======================================== */

.metrics-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    border-bottom: var(--border-width-thin) solid var(--color-border-light);
    padding: 0;
    margin: 0 0 16px 0;
    list-style: none;
}

.metrics-tabs .nav-item {
    margin: 0;
}

.metrics-tabs .nav-link {
    background: transparent;
    border: none;
    border-radius: var(--radius-md);
    color: var(--color-text-secondary);
    padding: 8px 12px;
    min-height: 40px;
    font-family: var(--font-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    transition: all var(--duration-fast) ease;
    display: flex;
    align-items: center;
    gap: 6px;
    position: relative;
}

/* Underline indicator */
.metrics-tabs .nav-link::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 50%;
    transform: translateX(-50%) scaleX(0);
    width: 70%;
    height: 2px;
    background-color: var(--color-text-primary);
    border-radius: 0;
    transition: transform var(--duration-base) var(--ease-out);
}

.metrics-tabs .nav-link:hover:not(.active) {
    color: var(--color-text-primary);
    background-color: var(--color-bg-surface);
}

.metrics-tabs .nav-link.active {
    color: var(--color-text-primary);
    background-color: var(--color-bg-surface);
}

.metrics-tabs .nav-link.active::after {
    transform: translateX(-50%) scaleX(1);
}

/* ========================================
   RESPONSIVE
   ======================================== */

@media (max-width: 768px) {
    .toggle-group {
        width: 100%;
    }

    .toggle-btn {
        flex: 1;
        text-align: center;
        justify-content: center;
    }

    .filter-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
    }

    .metrics-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
    }
}
/**
 * Loading States
 * Spinners, skeletons, progress bars
 */

/* ========================================
   SPINNER
   ======================================== */

.spinner,
.spinner-border {
    display: inline-block;
    width: 2rem;
    height: 2rem;
    border: 3px solid var(--color-border-medium);
    border-top-color: var(--color-brand-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.spinner-sm {
    width: 1rem;
    height: 1rem;
    border-width: 2px;
}

.spinner-lg {
    width: 3rem;
    height: 3rem;
    border-width: 4px;
}

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

.spinner-text-primary {
    border-top-color: var(--color-brand-primary);
}

.spinner-text-success {
    border-top-color: var(--color-success);
}

.spinner-text-warning {
    border-top-color: var(--color-warning);
}

.spinner-text-error {
    border-top-color: var(--color-error);
}

/* ========================================
   SKELETON LOADER
   ======================================== */

.skeleton {
    background: linear-gradient(
        90deg,
        var(--color-bg-surface) 0%,
        var(--color-bg-surface-hover) 50%,
        var(--color-bg-surface) 100%
    );
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s ease-in-out infinite;
    border-radius: var(--radius-sm);
}

@keyframes skeleton-loading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

.skeleton-text {
    height: 1em;
    margin-bottom: var(--spacing-xs);
}

.skeleton-text.large {
    height: 1.5em;
}

.skeleton-title {
    height: 1.5em;
    width: 60%;
    margin-bottom: var(--spacing-sm);
}

.skeleton-button {
    height: 44px;
    width: 120px;
    border-radius: var(--radius-md);
}

.skeleton-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.skeleton-image {
    width: 100%;
    aspect-ratio: 16/9;
    border-radius: var(--radius-md);
}

.skeleton-settings {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.skeleton-settings-section {
    background-color: var(--color-bg-surface);
    border: var(--border-width-thin) solid var(--color-border-medium);
    border-radius: var(--radius-md);
    padding: var(--spacing-lg);
}

/* ========================================
   PROGRESS BAR
   ======================================== */

.progress {
    width: 100%;
    height: 8px;
    background-color: var(--color-bg-surface);
    border-radius: var(--radius-md);
    overflow: hidden;
    border: var(--border-width-thin) solid var(--color-border-medium);
}

.progress-bar {
    height: 100%;
    background-color: var(--color-brand-primary);
    border-radius: var(--radius-md);
    transition: width var(--duration-base) var(--ease-out);
}

.progress-bar-success {
    background-color: var(--color-success);
}

.progress-bar-warning {
    background-color: var(--color-warning);
}

.progress-bar-error {
    background-color: var(--color-error);
}

/* ========================================
   TOKEN GAUGE
   ======================================== */

.token-gauge {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-xs) var(--spacing-sm);
    background-color: var(--color-bg-surface);
    border-radius: var(--radius-md);
    border: var(--border-width-thin) solid var(--color-border-medium);
}

.token-gauge-bar {
    width: 60px;
    height: 6px;
    background-color: var(--color-bg-tertiary);
    border-radius: var(--radius-sm);
    overflow: hidden;
    position: relative;
}

.token-gauge-fill {
    height: 100%;
    border-radius: var(--radius-sm);
    background: linear-gradient(90deg, var(--color-success) 0%, #4ade80 100%);
    transition: width var(--duration-base) var(--ease-out), background var(--duration-base) var(--ease-out);
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.4);
}

.token-gauge-fill.warning {
    background: linear-gradient(90deg, var(--color-warning) 0%, #fbbf24 100%);
    box-shadow: 0 0 8px rgba(245, 158, 11, 0.4);
}

.token-gauge-fill.critical {
    background: linear-gradient(90deg, var(--color-error) 0%, #f87171 100%);
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.4);
}

.token-gauge-text {
    display: flex;
    align-items: baseline;
    gap: var(--spacing-xs);
    white-space: nowrap;
}

#usage-count {
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-base);
    color: var(--color-text-primary);
    font-variant-numeric: tabular-nums;
}

.token-gauge-label {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-normal);
    text-transform: lowercase;
}

/* ========================================
   LOADING STATE CONTAINER
   ======================================== */

.loading-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-2xl);
    gap: var(--spacing-md);
    color: var(--color-text-secondary);
}

.loading-state-text {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
}

/* ========================================
   DARK THEME
   ======================================== */

[data-theme="dark"] .skeleton {
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.02) 0%,
        rgba(255, 255, 255, 0.05) 50%,
        rgba(255, 255, 255, 0.02) 100%
    );
    background-size: 200% 100%;
}

[data-theme="dark"] .progress {
    background-color: rgba(255, 255, 255, 0.05);
    border-color: var(--color-border-light);
}

[data-theme="dark"] .token-gauge {
    background-color: rgba(255, 255, 255, 0.02);
    border-color: var(--color-border-light);
}

[data-theme="dark"] .token-gauge-bar {
    background-color: rgba(255, 255, 255, 0.1);
}

/* ========================================
   RESPONSIVE
   ======================================== */

@media (max-width: 768px) {
    .token-gauge-bar {
        width: 40px;
    }
    
    #usage-count {
        font-size: var(--font-size-sm);
    }
}
/**
 * Toast Notification Component
 * Site-wide toast notifications for success, error, warning, and info messages
 * 
 * Usage:
 *   import { showToast } from '/js/utils/toast.js';
 *   showToast('Link copied!', 'success');
 *   showToast('Something went wrong', 'error');
 */

/* ========================================
   TOAST CONTAINER
   ======================================== */

.toast-container {
    position: fixed;
    bottom: var(--spacing-lg);
    right: var(--spacing-lg);
    z-index: var(--z-index-toast, 9999);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    pointer-events: none;
}

/* ========================================
   TOAST NOTIFICATION
   ======================================== */

.toast {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    background-color: var(--color-bg-secondary);
    border: var(--border-width-thin) solid var(--color-border-medium);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    pointer-events: auto;
    min-width: 280px;
    max-width: 400px;
    animation: toastSlideIn 0.3s ease-out;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.toast.toast-hiding {
    animation: toastSlideOut 0.2s ease-in forwards;
}

/* Toast icon */
.toast-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-base);
}

/* Toast message */
.toast-message {
    flex: 1;
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
    line-height: var(--line-height-normal);
}

/* Toast close button */
.toast-close {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--color-text-muted);
    cursor: pointer;
    font-size: var(--font-size-lg);
    line-height: 1;
    transition: var(--transition-fast);
    padding: 0;
}

.toast-close:hover {
    background-color: var(--color-bg-tertiary);
    color: var(--color-text-primary);
}

/* ========================================
   TOAST VARIANTS
   ======================================== */

/* Success */
.toast-success {
    border-left: 3px solid var(--color-success);
}

.toast-success .toast-icon {
    color: var(--color-success);
}

/* Error */
.toast-error {
    border-left: 3px solid var(--color-error);
}

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

/* Warning */
.toast-warning {
    border-left: 3px solid var(--color-warning);
}

.toast-warning .toast-icon {
    color: var(--color-warning);
}

/* Info */
.toast-info {
    border-left: 3px solid var(--color-info, #3b82f6);
}

.toast-info .toast-icon {
    color: var(--color-info, #3b82f6);
}

/* ========================================
   ANIMATIONS
   ======================================== */

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

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

/* ========================================
   DARK THEME
   ======================================== */

[data-theme="dark"] .toast {
    background-color: var(--color-bg-primary);
    border-color: var(--color-border-light);
}

[data-theme="dark"] .toast-close:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

/* ========================================
   RESPONSIVE
   ======================================== */

@media (max-width: 480px) {
    .toast-container {
        left: var(--spacing-sm);
        right: var(--spacing-sm);
        bottom: var(--spacing-md);
    }
    
    .toast {
        min-width: auto;
        max-width: none;
        width: 100%;
    }
}
/* ========================================
   TOOLTIPS - Global Tooltip Component
   Uses data-tooltip attribute for content
   Supports data-tooltip-title and data-tooltip-cost
   ======================================== */

/* CSS Custom Properties for Tooltips */
:root {
    --tooltip-delay: 450ms;
    --tooltip-delay-short: 300ms;
    --tooltip-fade-duration: 150ms;
    /* Light mode: black bg, white text (inverted) */
    --tooltip-bg: #000000;
    --tooltip-text: #ffffff;
    --tooltip-text-secondary: rgba(255, 255, 255, 0.7);
    --tooltip-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    --tooltip-padding: 0.5rem 0.625rem;
    --tooltip-max-width: 260px;
}

/* Dark theme: white bg, black text (inverted) */
[data-theme="dark"] {
    --tooltip-bg: #ffffff;
    --tooltip-text: #000000;
    --tooltip-text-secondary: rgba(0, 0, 0, 0.7);
    --tooltip-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Base tooltip container - any element with data-tooltip */
[data-tooltip] {
    position: relative;
}

/* Tooltip bubble - hidden by default with fade transition */
[data-tooltip]::before,
[data-tooltip]::after {
    position: absolute;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    z-index: var(--z-index-tooltip);
    transition: opacity var(--tooltip-fade-duration) ease-out, 
                visibility var(--tooltip-fade-duration) ease-out;
}

/* Tooltip content */
[data-tooltip]::after {
    content: attr(data-tooltip);
    /* Default position: bottom-left aligned */
    top: calc(100% + 6px);
    left: 0;
    transform: none;
    padding: var(--tooltip-padding);
    background: var(--tooltip-bg);
    /* No border */
    border: none;
    border-radius: 2px;
    box-shadow: var(--tooltip-shadow);
    font-family: var(--font-primary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-normal);
    line-height: 1.4;
    color: var(--tooltip-text);
    white-space: normal;
    text-align: left;
    max-width: var(--tooltip-max-width);
    min-width: 100px;
    width: max-content;
}

/* No arrow/pointer - removed entirely */
[data-tooltip]::before {
    display: none;
}

/* Show tooltip on hover only (not focus, to prevent sticky tooltips on click) */
[data-tooltip]:hover::after {
    visibility: visible;
    opacity: 1;
    transition: opacity var(--tooltip-fade-duration) ease-in,
                visibility 0s linear;
    transition-delay: var(--tooltip-delay), var(--tooltip-delay);
}

/* Only show tooltip on keyboard focus (focus-visible), not mouse click */
[data-tooltip]:focus-visible::after {
    visibility: visible;
    opacity: 1;
    transition: opacity var(--tooltip-fade-duration) ease-in,
                visibility 0s linear;
    transition-delay: var(--tooltip-delay), var(--tooltip-delay);
}

/* Fade out when not hovering */
[data-tooltip]:not(:hover):not(:focus-visible)::after {
    transition: opacity var(--tooltip-fade-duration) ease-out,
                visibility 0s linear var(--tooltip-fade-duration);
}

/* ========================================
   TOOLTIP POSITIONS
   Default is bottom-left. Use data-tooltip-position to override.
   ======================================== */

/* Bottom-left (default) - already set above */

/* Bottom-right position */
[data-tooltip-position="bottom-right"]::after {
    left: auto;
    right: 0;
}

/* Bottom-center position */
[data-tooltip-position="bottom"]::after {
    left: 50%;
    transform: translateX(-50%);
}

/* Top position (above element) */
[data-tooltip-position="top"]::after {
    top: auto;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
}

/* Top-left position */
[data-tooltip-position="top-left"]::after {
    top: auto;
    bottom: calc(100% + 6px);
    left: 0;
    transform: none;
}

/* Top-right position */
[data-tooltip-position="top-right"]::after {
    top: auto;
    bottom: calc(100% + 6px);
    left: auto;
    right: 0;
    transform: none;
}

/* Left position */
[data-tooltip-position="left"]::after {
    top: 50%;
    left: auto;
    right: calc(100% + 6px);
    transform: translateY(-50%);
}

/* Right position */
[data-tooltip-position="right"]::after {
    top: 50%;
    left: calc(100% + 6px);
    transform: translateY(-50%);
}

/* ========================================
   DROPDOWN TOOLTIPS
   Handle tooltips for dropdown containers and menu items
   ======================================== */

/* Hide tooltip when dropdown is open (prevents overlap with menu) */
.settings-dropdown-select.open[data-tooltip]::after,
.settings-dropdown-select.open [data-tooltip]::after,
[class*="dropdown"].open[data-tooltip]::after,
.visual-grid-selector.open[data-tooltip]::after,
.visual-grid-selector.open [data-tooltip]::after,
.visual-grid-dropdown [data-tooltip]::after {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* Also hide rich tooltips on visual grid elements when closed or switching */
.visual-grid-selector:not(.open) .visual-grid-tile[data-tooltip]::after,
.visual-grid-dropdown:not(:hover) [data-tooltip]::after {
    display: none !important;
}

/* Dropdown container tooltips - position to the right */
.settings-dropdown-select[data-tooltip]::after {
    top: 50%;
    left: calc(100% + 8px);
    right: auto;
    bottom: auto;
    transform: translateY(-50%);
}

/* Dropdown option tooltips - position right of the option */
.settings-dropdown-option[data-tooltip]::after,
.dropdown-option[data-tooltip]::after,
[class*="dropdown-menu"] [data-tooltip]::after {
    /* Position to the right of the dropdown option */
    top: 50%;
    left: calc(100% + 8px);
    right: auto;
    bottom: auto;
    transform: translateY(-50%);
    /* Slightly longer delay for dropdown items to avoid accidental triggers */
    transition-delay: calc(var(--tooltip-delay) + 100ms), calc(var(--tooltip-delay) + 100ms);
}

/* Ensure dropdown menus allow tooltip overflow */
.settings-dropdown-menu,
[class*="dropdown-menu"] {
    overflow: visible;
}

/* ========================================
   DISABLED STATE & RICH TOOLTIP OVERRIDE
   ======================================== */

[data-tooltip][disabled]::after,
[data-tooltip].disabled::after,
[data-tooltip].tooltip-hidden::after {
    display: none !important;
}

/* Hide CSS tooltip for elements that use rich JS tooltip (have data-tooltip-title) */
[data-tooltip][data-tooltip-title]::after {
    display: none !important;
}

/* ========================================
   RESPONSIVE - Hide tooltips on touch devices
   ======================================== */

@media (hover: none) {
    [data-tooltip]::after {
        display: none;
    }
}

/* ========================================
   RICH TOOLTIPS (with title + description + cost)
   JS-enhanced tooltips that need more structure
   ======================================== */

.tooltip-rich {
    position: fixed;
    visibility: hidden;
    opacity: 0;
    z-index: var(--z-index-tooltip);
    pointer-events: none;
    /* Smooth fade out transition */
    transition: opacity var(--tooltip-fade-duration) ease-out, 
                visibility 0s linear var(--tooltip-fade-duration);
    /* No border, no arrow */
    background: var(--tooltip-bg);
    border-radius: 2px;
    box-shadow: var(--tooltip-shadow);
    padding: var(--tooltip-padding);
    min-width: 160px;
    max-width: var(--tooltip-max-width);
}

.tooltip-rich.visible {
    visibility: visible;
    opacity: 1;
    /* Smooth fade in transition */
    transition: opacity var(--tooltip-fade-duration) ease-in, 
                visibility 0s linear;
}

/* Rich tooltip header (title + cost on same line) */
.tooltip-rich-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
    gap: 12px;
}

.tooltip-rich-title {
    font-family: var(--font-primary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--tooltip-text);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin: 0;
}

.tooltip-rich-cost {
    font-family: var(--font-primary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--tooltip-text-secondary);
    white-space: nowrap;
}

/* Rich tooltip description */
.tooltip-rich-desc {
    font-family: var(--font-primary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-normal);
    color: var(--tooltip-text-secondary);
    line-height: 1.4;
    margin: 0;
}

/* Rich tooltip image - full width, below text */
.tooltip-rich-image {
    width: 100%;
    height: auto;
    max-height: 160px;
    object-fit: cover;
    border-radius: 2px;
    margin-top: 8px;
    display: none;
}

/* Wider tooltip when showing image */
.tooltip-rich.has-image {
    max-width: 280px;
    min-width: 200px;
}

/* ========================================
   STANDALONE MAGNIFIER CIRCLE
   Floating zoom preview near cursor for
   condition / texture / background tiles
   ======================================== */
.tile-magnifier {
    position: fixed;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 99999;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.12s ease-out, visibility 0s linear 0.12s;
    box-shadow: 0 0 0 2px var(--tooltip-bg), 0 4px 16px rgba(0, 0, 0, 0.35);
    overflow: hidden;
}

.tile-magnifier.visible {
    visibility: visible;
    opacity: 1;
    transition: opacity 0.12s ease-in, visibility 0s linear;
}

/* ========================================
   FULLSCREEN VIEWER TOOLTIPS
   Must be above the modal overlay z-index
   ======================================== */

/* Rich tooltip (JS-created, appended to body) needs very high z-index 
   to appear above fullscreen modals which use z-index: 10000+ */
.tooltip-rich {
    z-index: 99999 !important;
}

/* CSS pseudo-element tooltips in modal overlays */
.modal-overlay [data-tooltip]::after {
    z-index: calc(var(--z-index-overlay) + 100);
}
/**
 * Accordion Components
 * Reusable collapsible accordion patterns for FAQ, categories, etc.
 * Uses CSS Grid for smooth, performant animations (industry best practice)
 */

/* ========================================
   BASE ACCORDION
   ======================================== */

.accordion {
    border: var(--border-width-thin) solid var(--color-border-medium);
    border-radius: var(--radius-md);
    overflow: hidden;
    background-color: var(--color-bg-secondary);
}

.accordion + .accordion {
    margin-top: var(--spacing-sm);
}

/* ========================================
   ACCORDION ITEM
   ======================================== */

.accordion-item {
    border-bottom: var(--border-width-thin) solid var(--color-border-light);
}

.accordion-item:last-child {
    border-bottom: none;
}

/* ========================================
   ACCORDION HEADER (Trigger)
   ======================================== */

.accordion-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--spacing-md) var(--spacing-lg);
    background-color: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: var(--font-primary);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    transition: background-color var(--duration-fast) var(--ease-out);
    gap: var(--spacing-md);
}

.accordion-header:hover {
    background-color: var(--color-bg-primary);
}

.accordion-header:focus {
    outline: none;
    background-color: var(--color-bg-primary);
}

.accordion-header:focus-visible {
    outline: var(--border-width-medium) solid var(--color-accent-blue);
    outline-offset: calc(var(--border-width-medium) * -1);
}

/* Accordion header text */
.accordion-header-text {
    flex: 1;
    line-height: var(--line-height-normal);
}

/* ========================================
   ACCORDION ICON (Chevron)
   ======================================== */

.accordion-icon {
    width: 1.25rem; /* 20px */
    height: 1.25rem;
    flex-shrink: 0;
    transition: transform var(--duration-base) var(--ease-in-out);
    color: var(--color-text-secondary);
}

.accordion-icon svg {
    width: 100%;
    height: 100%;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Rotate icon when open */
.accordion-item.open > .accordion-header .accordion-icon,
.accordion-qa.open > .accordion-header .accordion-icon,
.accordion-category.open > .accordion-header .accordion-icon {
    transform: rotate(180deg);
}

/* ========================================
   ACCORDION CONTENT (CSS Grid Animation)
   Industry best practice: uses grid-template-rows
   for smooth, jank-free animations
   ======================================== */

.accordion-content {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--duration-base) var(--ease-in-out);
}

.accordion-content-inner {
    overflow: hidden;
    min-height: 0; /* Required for CSS Grid animation to work properly */
    padding: 0 var(--spacing-lg);
    color: var(--color-text-secondary);
    font-size: var(--font-size-base);
    line-height: var(--line-height-relaxed);
}

/* Open state - expand to natural height */
.accordion-item.open > .accordion-content,
.accordion-qa.open > .accordion-content,
.accordion-category.open > .accordion-content {
    grid-template-rows: 1fr;
}

/* Add padding only when open for smoother animation */
.accordion-item.open > .accordion-content > .accordion-content-inner,
.accordion-qa.open > .accordion-content > .accordion-content-inner,
.accordion-category.open > .accordion-content > .accordion-content-inner {
    padding-bottom: var(--spacing-md);
}

/* ========================================
   NESTED ACCORDION (Category with children)
   ======================================== */

.accordion-nested {
    margin: var(--spacing-sm) 0;
    border: var(--border-width-thin) solid var(--color-border-light);
    border-radius: var(--radius-md);
    background-color: var(--color-bg-primary);
}

.accordion-nested .accordion-header {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

.accordion-nested .accordion-content-inner {
    padding: 0 var(--spacing-md);
    font-size: var(--font-size-sm);
}

/* ========================================
   CATEGORY ACCORDION (Top-level)
   ======================================== */

.accordion-category {
    border: var(--border-width-thin) solid var(--color-border-medium);
    border-radius: var(--radius-md);
    margin-bottom: 0;
    background-color: var(--color-bg-secondary);
    overflow: hidden;
}

.accordion-category .accordion-header {
    font-family: var(--font-mono);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    padding: var(--spacing-md) var(--spacing-lg);
    background-color: var(--color-bg-primary);
}

.accordion-category .accordion-header:hover {
    background-color: var(--color-bg-secondary);
}

.accordion-category .accordion-content-inner {
    padding: 0 var(--spacing-lg);
    background-color: var(--color-bg-secondary);
}

.accordion-category.open > .accordion-content > .accordion-content-inner {
    padding-top: var(--spacing-md);
    padding-bottom: var(--spacing-md);
}

/* Category subtitle/description */
.accordion-category-subtitle {
    display: block;
    font-family: var(--font-primary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-normal);
    text-transform: none;
    letter-spacing: var(--letter-spacing-normal);
    color: var(--color-text-muted);
    margin-top: var(--spacing-xs);
}

/* ========================================
   Q&A ACCORDION ITEM
   ======================================== */

.accordion-qa {
    border: var(--border-width-thin) solid var(--color-border-light);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-sm);
    background-color: var(--color-bg-primary);
    overflow: hidden;
}

.accordion-qa:last-child {
    margin-bottom: 0;
}

.accordion-qa .accordion-header {
    padding: var(--spacing-sm) var(--spacing-md);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-base);
}

/* Q prefix */
.accordion-qa .accordion-header::before {
    content: 'Q:';
    font-family: var(--font-mono);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-secondary);
    margin-right: var(--spacing-xs);
    flex-shrink: 0;
}

.accordion-qa .accordion-content-inner {
    padding: 0 var(--spacing-md);
}

.accordion-qa.open > .accordion-content > .accordion-content-inner {
    padding-bottom: var(--spacing-md);
}

.accordion-qa .accordion-answer {
    position: relative;
    padding-left: calc(var(--spacing-md) + 0.5em);
}

/* A prefix */
.accordion-qa .accordion-answer::before {
    content: 'A:';
    position: absolute;
    left: 0;
    top: 0;
    font-family: var(--font-mono);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-secondary);
}

/* ========================================
   ACCORDION GROUP (Container)
   ======================================== */

.accordion-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

/* ========================================
   ACCORDION SEARCH
   ======================================== */

.accordion-search-wrapper {
    margin-top: var(--spacing-sm);
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

/* Uses .form-control from forms.css for standard site styling */

/* Hide items that don't match search */
.accordion-category.search-hidden,
.accordion-qa.search-hidden {
    display: none;
}

/* Highlight matching text */
.accordion-search-highlight {
    background-color: var(--color-brand-primary);
    color: var(--color-text-inverse);
    padding: 0 2px;
    border-radius: var(--radius-md);
}

/* ========================================
   DARK THEME
   ======================================== */

[data-theme="dark"] .accordion {
    background-color: var(--color-bg-secondary);
    border-color: var(--color-border-medium);
}

[data-theme="dark"] .accordion-item {
    border-color: var(--color-border-light);
}

[data-theme="dark"] .accordion-header:hover,
[data-theme="dark"] .accordion-header:focus {
    background-color: var(--color-bg-tertiary);
}

[data-theme="dark"] .accordion-nested {
    background-color: var(--color-bg-tertiary);
    border-color: var(--color-border-light);
}

[data-theme="dark"] .accordion-category {
    background-color: var(--color-bg-secondary);
    border-color: var(--color-border-medium);
}

[data-theme="dark"] .accordion-category .accordion-header {
    background-color: var(--color-bg-tertiary);
}

[data-theme="dark"] .accordion-category .accordion-header:hover {
    background-color: var(--color-bg-surface);
}

[data-theme="dark"] .accordion-qa {
    background-color: var(--color-bg-tertiary);
    border-color: var(--color-border-light);
}

/* ========================================
   RESPONSIVE
   ======================================== */

@media (max-width: 768px) {
    .accordion-header {
        padding: var(--spacing-sm) var(--spacing-md);
    }
    
    .accordion-content-inner {
        padding: 0 var(--spacing-md);
    }
    
    .accordion-category .accordion-header {
        padding: var(--spacing-sm) var(--spacing-md);
    }
    
    .accordion-category .accordion-content-inner {
        padding: var(--spacing-sm) var(--spacing-md);
    }
    
    .accordion-qa .accordion-header {
        font-size: var(--font-size-sm);
    }
}
/**
 * Asset Library Modal
 * Reusable modal for texture, background, and other asset selection
 * Uses site standard form, button, and modal patterns
 */

/* Overlay - reuses modal-backdrop pattern */
.asset-library-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: var(--z-index-modal);
    display: none;
    align-items: center;
    justify-content: center;
}

.asset-library-overlay.show {
    display: flex;
    animation: fadeIn var(--duration-base) var(--ease-out);
}

/* Modal container - reuses modal pattern */
.asset-library-modal {
    background-color: var(--color-bg-secondary);
    border: var(--border-width-thin) solid var(--color-border-medium);
    border-radius: var(--radius-md);
    width: 90%;
    max-width: 900px;
    height: 85vh;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-2xl);
    animation: slideUp var(--duration-base) var(--ease-out);
    overflow: hidden;
}

/* Header - reuses modal-header pattern */
.asset-library-header {
    padding: var(--spacing-sm) var(--spacing-md);
    background-color: var(--color-bg-primary);
    border-bottom: var(--border-width-thin) solid var(--color-border-medium);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

.asset-library-header h3 {
    font-family: var(--font-primary);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.asset-library-header h3 i {
    color: var(--color-text-secondary);
}

/* Close button - reuses modal-close pattern */
.asset-library-close {
    background: transparent;
    border: none;
    color: var(--color-text-secondary);
    cursor: pointer;
    padding: var(--spacing-xs);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: var(--radius-sm);
    font-size: 1.25rem;
    transition: background-color var(--duration-fast) ease, color var(--duration-fast) ease;
}

.asset-library-close:hover {
    background-color: var(--color-bg-tertiary);
    color: var(--color-text-primary);
}

/* Filters section */
.asset-library-filters {
    padding: var(--spacing-sm) var(--spacing-md);
    border-bottom: var(--border-width-thin) solid var(--color-border-light);
    background-color: var(--color-bg-secondary);
    flex-shrink: 0;
}

/* Search - uses site standard search-box pattern */
.asset-library-search-wrap {
    position: relative;
    margin-bottom: var(--spacing-sm);
}

.asset-library-search-wrap i {
    position: absolute;
    left: var(--spacing-md);
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    pointer-events: none;
}

/* Search input - uses form-control pattern */
.asset-library-search {
    width: 100%;
    padding: 0.4rem 0.6rem 0.4rem calc(var(--spacing-md) + 1.5rem);
    font-family: var(--font-primary);
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
    background-color: var(--color-bg-primary);
    border: var(--border-width-thin) solid var(--color-border-medium);
    border-radius: var(--radius-md);
    transition: all var(--duration-fast) var(--ease-out);
    box-sizing: border-box;
}

.asset-library-search::placeholder {
    color: var(--color-text-muted);
    opacity: 1;
}

.asset-library-search:hover {
    border-color: var(--color-border-heavy);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.08);
}

.asset-library-search:focus {
    outline: none;
    border-color: var(--color-border-heavy);
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.12);
}

/* Filter row - category and colors on same row, labels aligned */
.asset-library-filter-row {
    display: flex;
    gap: var(--spacing-md);
    align-items: stretch;
    flex-wrap: nowrap;
}

.asset-library-filter-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex-shrink: 0;
}

/* Colors group can grow to fill remaining space */
.asset-library-filter-group:last-child {
    flex-shrink: 1;
    min-width: 0;
}

/* Filter labels - uses form-label pattern */
.asset-library-filter-group label {
    font-family: var(--font-primary);
    font-size: 11px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1;
    height: 14px;
}

/* Category dropdown - uses .settings-dropdown-select from render.css */
.asset-library-select {
    min-width: 140px;
}

/* Ensure dropdown menu appears above grid content and scrolls within the modal */
.asset-library-select .settings-dropdown-menu {
    z-index: var(--z-index-dropdown);
    max-height: 280px;
    overflow-y: auto;
}

/* Color filter buttons - flex row that wraps */
.asset-library-colors {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.asset-color-swatch {
    width: 24px;
    height: 24px;
    padding: 0;
    margin: 0;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: box-shadow var(--duration-fast) ease, outline var(--duration-fast) ease;
}

.asset-color-swatch:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.asset-color-swatch:focus-visible {
    outline: 2px solid var(--color-accent-blue);
    outline-offset: 2px;
}

/* Selected state - matches visual-grid-tile.selected pattern */
.asset-color-swatch.active {
    outline: 2px solid var(--color-text-primary);
    outline-offset: -2px;
}

.asset-color-swatch > span {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border-medium);
    box-sizing: border-box;
}

[data-theme="dark"] .asset-color-swatch > span {
    border-color: var(--color-border-light);
}

.asset-color-swatch .color-all {
    background: conic-gradient(
        from 0deg,
        hsl(0, 60%, 50%),
        hsl(45, 60%, 50%),
        hsl(90, 50%, 45%),
        hsl(135, 45%, 45%),
        hsl(180, 50%, 45%),
        hsl(225, 55%, 50%),
        hsl(270, 50%, 50%),
        hsl(315, 55%, 50%),
        hsl(360, 60%, 50%)
    );
}

/* Filter footer */
.asset-library-filter-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--spacing-sm);
}

/* Count */
.asset-library-count {
    font-family: var(--font-primary);
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
}

/* Clear button - uses btn-secondary pattern */
.asset-library-clear {
    all: unset;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-md);
    font-family: var(--font-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--duration-fast) ease, box-shadow var(--duration-fast) ease;
    background-color: #e8e8e8;
    color: #1a1a1a;
}

.asset-library-clear:hover {
    background-color: #d0d0d0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

/* Grid wrapper — scroll always visible so justified layout measures correctly */
.asset-library-grid-wrap {
    flex: 1;
    overflow-y: scroll;
    overflow-x: hidden;
    padding: var(--spacing-sm) var(--spacing-md);
    min-height: 0;
}

/* Scrollbar styling */
.asset-library-grid-wrap::-webkit-scrollbar {
    width: 8px;
}

.asset-library-grid-wrap::-webkit-scrollbar-track {
    background: var(--color-bg-tertiary);
    border-radius: 4px;
}

.asset-library-grid-wrap::-webkit-scrollbar-thumb {
    background: var(--color-border-medium);
    border-radius: 4px;
}

.asset-library-grid-wrap::-webkit-scrollbar-thumb:hover {
    background: var(--color-border-heavy);
}

/* Grid - reuses visual-grid-options pattern */
.asset-library-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 8px;
}

/* Asset tile - matches visual-grid-tile pattern */
.asset-tile {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0;
    background: var(--color-bg-secondary);
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: box-shadow var(--duration-fast) ease, outline var(--duration-fast) ease;
    overflow: hidden;
    position: relative;
}

.asset-tile:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.1);
}

.asset-tile:focus-visible {
    outline: 2px solid var(--color-accent-blue);
    outline-offset: 2px;
}

/* Tile image - natural sizing, fits to image dimensions */
.asset-tile img {
    width: 100%;
    height: auto;
    display: block;
    /* Let tile background show through for transparent images */
    background: transparent;
}

/* Tile label - matches visual-grid-tile-label pattern */
.asset-tile-label {
    font-family: var(--font-primary);
    font-size: 10px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    padding: 2px 2px;
    background: var(--color-bg-secondary);
}

/* Empty state */
.asset-library-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: var(--spacing-lg) var(--spacing-md);
    color: var(--color-text-tertiary);
    font-family: var(--font-primary);
    font-size: var(--font-size-sm);
}

/* Load more button - uses btn-secondary pattern */
.asset-library-load-more {
    all: unset;
    box-sizing: border-box;
    display: block;
    width: 100%;
    margin-top: var(--spacing-sm);
    padding: var(--spacing-sm);
    border-radius: var(--radius-md);
    font-family: var(--font-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.02em;
    text-align: center;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color var(--duration-fast) ease, box-shadow var(--duration-fast) ease;
    background-color: #e8e8e8;
    color: #1a1a1a;
}

.asset-library-load-more:hover {
    background-color: #d0d0d0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

/* Dark theme */
[data-theme="dark"] .asset-library-modal {
    background-color: var(--color-bg-primary);
    border-color: var(--color-border-light);
}

[data-theme="dark"] .asset-library-header {
    background-color: var(--color-bg-secondary);
    border-color: var(--color-border-light);
}

[data-theme="dark"] .asset-library-search {
    background-color: var(--color-bg-primary);
    border-color: var(--color-border-light);
}

[data-theme="dark"] .asset-library-search:hover {
    border-color: var(--color-border-medium);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25);
}

[data-theme="dark"] .asset-library-search:focus {
    border-color: #ffffff;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.35);
}

/* Dark scrollbar */
[data-theme="dark"] .asset-library-grid-wrap::-webkit-scrollbar-track {
    background: var(--color-bg-primary);
}

[data-theme="dark"] .asset-library-grid-wrap::-webkit-scrollbar-thumb {
    background: var(--color-border-light);
}

[data-theme="dark"] .asset-library-grid-wrap::-webkit-scrollbar-thumb:hover {
    background: var(--color-border-medium);
}

/* Dark theme for category dropdown trigger – inherits Engine-matching base styles.
   Only override if the asset-library context needs different values. */
[data-theme="dark"] .asset-library-select .settings-dropdown-trigger:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .asset-library-select .settings-dropdown-menu {
    background-color: var(--color-bg-primary);
    border: 1px solid var(--color-border-light);
}

[data-theme="dark"] .asset-color-swatch:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35), 0 2px 4px rgba(0, 0, 0, 0.25);
}

[data-theme="dark"] .asset-color-swatch.active {
    outline-color: var(--color-text-primary);
}

[data-theme="dark"] .asset-library-clear {
    background-color: rgba(255, 255, 255, 0.10);
    color: rgba(255, 255, 255, 0.95);
}

[data-theme="dark"] .asset-library-clear:hover {
    background-color: rgba(255, 255, 255, 0.22);
    box-shadow: none;
}

[data-theme="dark"] .asset-library-load-more {
    background-color: rgba(255, 255, 255, 0.10);
    color: rgba(255, 255, 255, 0.95);
}

[data-theme="dark"] .asset-library-load-more:hover {
    background-color: rgba(255, 255, 255, 0.22);
    box-shadow: none;
}

[data-theme="dark"] .asset-tile {
    background: var(--color-bg-primary);
}

[data-theme="dark"] .asset-tile:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .asset-tile-label {
    background: var(--color-bg-primary);
}

/* Dark theme - transparent images inherit tile background */
[data-theme="dark"] .asset-tile img {
    background: transparent;
}

/* ─── Background Library Grid ────────────────────────────────── */
/* Justified gallery: JS calculates exact tile dimensions per row
   so images display at their natural aspect ratio with zero cropping. */

.bg-library-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-content: flex-start;
}

.bg-tile {
    /* width and height set inline by JS per-tile */
    flex: none;
    padding: 0;
    background: var(--color-bg-secondary);
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: box-shadow var(--duration-fast) ease, outline var(--duration-fast) ease;
    overflow: hidden;
    position: relative;
}

.bg-tile:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.1);
}

.bg-tile:focus-visible {
    outline: 2px solid var(--color-accent-blue);
    outline-offset: 2px;
}

.bg-tile img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

[data-theme="dark"] .bg-tile {
    background: var(--color-bg-primary);
}

[data-theme="dark"] .bg-tile:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

/* Responsive */
@media (max-width: 600px) {
    .asset-library-modal {
        width: 100%;
        max-width: 100%;
        height: 100%;
        max-height: 100%;
        border-radius: 0;
    }

    .asset-library-grid-wrap {
        flex: 1 1 auto;
        min-height: 200px;
    }

    .asset-library-grid {
        grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
        gap: 6px;
    }

    .asset-library-filter-row {
        flex-direction: column;
        align-items: stretch;
        gap: var(--spacing-sm);
        flex-wrap: wrap;
    }

    .asset-library-filter-group {
        flex-shrink: 0;
    }

    .asset-library-select {
        width: 100%;
    }

    .asset-tile-label {
        font-size: 9px;
        padding: 3px;
    }

    .bg-library-grid {
        gap: 6px;
    }
}
/* =====================================================
   HOME PAGE STYLES
   Page-specific styles for the homepage
   ===================================================== */

/* ==================== HERO SECTION ==================== */

.hero {
    padding-top: calc(var(--spacing-xl) + 6rem);
    padding-bottom: var(--spacing-xl); /* Restored to original */
    min-height: 100vh;
    display: flex;
    align-items: center;
    background-color: var(--color-bg-secondary);
    margin: 0;
}

.hero-content {
    text-align: center;
    animation: fadeInUp 0.8s ease;
}

.hero-title {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: clamp(calc(2.5rem * 0.9), calc(6vw * 0.9), calc(4.5rem * 0.9)); /* 10% smaller */
    font-weight: 700; /* Reduced from 800 (15% lighter: 800 * 0.85 = 680, rounded to 700) */
    line-height: var(--line-height-tight);
    margin-bottom: var(--spacing-lg);
    letter-spacing: var(--letter-spacing-tight);
    text-transform: uppercase;
    display: inline-block; /* Shrink to content width */
}

/* Hero title line alignment */
.hero .hero-title .hero-title-line {
    display: block;
    width: 100%;
    text-align: center;
}

.hero .hero-title .hero-title-center {
    text-align: center;
}

.hero .hero-title .hero-title-right {
    text-align: center;
}

.highlight-green {
    position: relative;
    display: inline-block;
}

.highlight-green::before {
    content: '';
    position: absolute;
    left: -0.5rem;
    right: -0.5rem;
    top: 50%;
    height: 1.2em;
    background-color: var(--color-accent-green);
    transform: translateY(-50%) rotate(-1deg);
    z-index: -1;
    border-radius: var(--radius-xs);
}

.hero-mockup {
    margin: var(--spacing-lg) 0;
    display: flex;
    justify-content: center;
}

.hero-description {
    font-size: var(--font-size-md);
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-sm);
    line-height: var(--line-height-relaxed);
}

.hero-description .mono-label {
    display: block;
    margin-top: 0.5em;
    font-size: var(--font-size-base);
}

/* ==================== TABLET MOCKUP ==================== */

.tablet-frame {
    background: #000000;
    border-radius: 2rem;
    padding: 0.525rem;
    box-shadow: 
        0 20px 60px rgba(0, 0, 0, 0.15),
        0 10px 30px rgba(0, 0, 0, 0.1),
        0 0 0 3px #4a4a4a;
    max-width: 780px;
    width: 100%;
    position: relative;
    border: none;
    box-sizing: border-box;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.tablet-screen {
    background-color: #000;
    border-radius: calc(2rem - 0.525rem); /* Concentric with frame: 32px - 8.4px = 23.6px */
    aspect-ratio: 16/9; /* 1920:1080 ratio */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    /* Performance: isolate video rendering from scroll */
    contain: strict;
    transform: translateZ(0);
}

.hero-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    background-color: #000;
    border-radius: inherit;
    /* Performance: GPU-accelerate video element */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

.hero-video::-webkit-media-controls {
    display: none;
}

/* ==================== VOLUME TOGGLE BUTTON ==================== */

.volume-toggle {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 44px;
    height: 44px;
    background: #000000;
    border: none;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 10;
    padding: 0;
    margin: 0;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.volume-toggle:hover {
    background: #222222;
}

.volume-icon {
    width: 22px;
    height: 22px;
    stroke: #ffffff;
    fill: none;
    stroke-width: 2;
    transition: all 0.3s ease;
    position: absolute;
}

/* Show unmuted icon by default, hide muted icon */
.volume-icon-unmuted {
    display: block;
}

.volume-icon-muted {
    display: none;
}

/* When muted, hide unmuted icon and show muted icon */
.volume-toggle.muted .volume-icon-unmuted {
    display: none;
}

.volume-toggle.muted .volume-icon-muted {
    display: block;
}

.tablet-screen.colorful {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.drawing-canvas {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-md);
}

.tree-drawing,
.sketch-drawing {
    width: 100%;
    height: auto;
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.1));
}

/* ==================== AWARD BADGE ==================== */

.award-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    background-color: var(--color-bg-secondary);
    border: var(--border-width-thin) solid var(--color-border-light);
    border-radius: var(--radius-md);
    margin: var(--spacing-md) 0;
}

.award-icon {
    font-size: var(--font-size-xl);
}

.award-text {
    font-size: var(--font-size-sm);
    line-height: 1.4;
}

.award-text strong {
    font-weight: var(--font-weight-semibold);
}

/* ==================== CTA BUTTON ==================== */

/* .btn-cta matches .btn-buy exactly */
.btn-cta {
    padding: 0.5rem 1.5rem;
    font-size: calc(var(--font-size-sm) * 1.3);
    margin: var(--spacing-sm) 0;
    display: inline-block;
}

.pricing-info {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-top: var(--spacing-sm);
    line-height: var(--line-height-normal);
}

.pricing-link {
    color: var(--color-text-secondary);
    text-decoration: none;
    transition: color var(--duration-fast) var(--ease-out);
}

.pricing-link:hover {
    color: var(--color-text-primary);
    text-decoration: underline;
}

/* ==================== INDUSTRIAL TYPOGRAPHY ==================== */

.mono-label {
    font-family: var(--font-mono);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}

/* Industrial accent effect - replaces handwritten red */
.industrial-accent {
    position: relative;
    display: inline-block;
    font-family: var(--font-mono);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    background-color: var(--color-accent-industrial); /* Cyan for FAST._ */
    padding: 0.15em 0.4em;
    margin-left: 0.2em;
    border-radius: var(--radius-md); /* Micro-chamfer (2px) */
    box-shadow: 
        0 0 0 1px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    animation: terminal-blink 1.2s step-end infinite;
}

/* Yellow accent for AUTOMATED */
.industrial-accent-yellow {
    position: relative;
    display: inline-block;
    font-family: var(--font-mono);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    background-color: var(--color-badge-yellow);
    padding: 0.15em 0.4em;
    margin-left: 0.2em;
    border-radius: var(--radius-md); /* Micro-chamfer (2px) */
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    /* No animation on background - only cursor blinks */
}

/* Dark mode - black text on yellow background */
[data-theme="dark"] .industrial-accent-yellow {
    color: #000000; /* Black text in dark mode */
}

/* Terminal subtle pulse effect for background */
@keyframes terminal-blink {
    0%, 50% {
        opacity: 1;
    }
    51%, 100% {
        opacity: 0.85;
    }
}

/* Terminal cursor blink effect - shows/hides underscore */
@keyframes cursor-blink {
    0%, 50% {
        opacity: 1;
    }
    50.1%, 100% {
        opacity: 0;
    }
}

.industrial-accent::after,
.industrial-accent-yellow::after {
    content: '_';
    animation: cursor-blink 1s step-end infinite;
    margin-left: 0.05em;
}

/* Glitch effect for FAST. - intense digital corruption */
.glitch-effect {
    position: relative;
    display: inline-block;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; /* Match headers */
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    /* No movement on base element - only RGB channel separation */
}

.glitch-effect::before,
.glitch-effect::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    /* Performance: GPU-accelerate glitch layers */
    will-change: clip, transform;
    backface-visibility: hidden;
}

.glitch-effect::before {
    left: 3px;
    text-shadow: -3px 0 #00FFFF;
    clip: rect(0, 9999px, 0, 0);
    animation: glitch-cyan 1.5s infinite linear alternate-reverse;
}

.glitch-effect::after {
    left: -3px;
    text-shadow: 3px 0 #FF00FF;
    clip: rect(0, 9999px, 0, 0);
    animation: glitch-magenta 1.8s infinite linear alternate-reverse;
}

/* Cyan channel glitch - frequent RGB separation */
@keyframes glitch-cyan {
    0% {
        clip: rect(0, 9999px, 0, 0);
        transform: translate(0);
    }
    5% {
        clip: rect(8px, 9999px, 18px, 0);
        transform: translate(-3px, 1px);
    }
    10% {
        clip: rect(0, 9999px, 0, 0);
        transform: translate(0);
    }
    15% {
        clip: rect(15px, 9999px, 25px, 0);
        transform: translate(3px, -1px);
    }
    20% {
        clip: rect(0, 9999px, 0, 0);
        transform: translate(0);
    }
    25% {
        clip: rect(22px, 9999px, 32px, 0);
        transform: translate(-2px, 2px);
    }
    30% {
        clip: rect(0, 9999px, 0, 0);
        transform: translate(0);
    }
    35% {
        clip: rect(5px, 9999px, 15px, 0);
        transform: translate(2px, -2px);
    }
    40% {
        clip: rect(0, 9999px, 0, 0);
        transform: translate(0);
    }
    45% {
        clip: rect(18px, 9999px, 28px, 0);
        transform: translate(-3px, 0);
    }
    50% {
        clip: rect(0, 9999px, 0, 0);
        transform: translate(0);
    }
    55% {
        clip: rect(12px, 9999px, 22px, 0);
        transform: translate(3px, 1px);
    }
    60% {
        clip: rect(0, 9999px, 0, 0);
        transform: translate(0);
    }
    65% {
        clip: rect(28px, 9999px, 38px, 0);
        transform: translate(-2px, -1px);
    }
    70% {
        clip: rect(0, 9999px, 0, 0);
        transform: translate(0);
    }
    75% {
        clip: rect(3px, 9999px, 13px, 0);
        transform: translate(2px, 2px);
    }
    80% {
        clip: rect(0, 9999px, 0, 0);
        transform: translate(0);
    }
    85% {
        clip: rect(20px, 9999px, 30px, 0);
        transform: translate(-3px, 1px);
    }
    90% {
        clip: rect(0, 9999px, 0, 0);
        transform: translate(0);
    }
    95% {
        clip: rect(10px, 9999px, 20px, 0);
        transform: translate(3px, -1px);
    }
    100% {
        clip: rect(0, 9999px, 0, 0);
        transform: translate(0);
    }
}

/* Magenta channel glitch - frequent RGB separation */
@keyframes glitch-magenta {
    0% {
        clip: rect(0, 9999px, 0, 0);
        transform: translate(0);
    }
    4% {
        clip: rect(12px, 9999px, 22px, 0);
        transform: translate(3px, -1px);
    }
    8% {
        clip: rect(0, 9999px, 0, 0);
        transform: translate(0);
    }
    12% {
        clip: rect(6px, 9999px, 16px, 0);
        transform: translate(-3px, 1px);
    }
    16% {
        clip: rect(0, 9999px, 0, 0);
        transform: translate(0);
    }
    20% {
        clip: rect(25px, 9999px, 35px, 0);
        transform: translate(2px, 2px);
    }
    24% {
        clip: rect(0, 9999px, 0, 0);
        transform: translate(0);
    }
    28% {
        clip: rect(14px, 9999px, 24px, 0);
        transform: translate(-2px, -2px);
    }
    32% {
        clip: rect(0, 9999px, 0, 0);
        transform: translate(0);
    }
    36% {
        clip: rect(2px, 9999px, 12px, 0);
        transform: translate(3px, 0);
    }
    40% {
        clip: rect(0, 9999px, 0, 0);
        transform: translate(0);
    }
    44% {
        clip: rect(19px, 9999px, 29px, 0);
        transform: translate(-3px, -1px);
    }
    48% {
        clip: rect(0, 9999px, 0, 0);
        transform: translate(0);
    }
    52% {
        clip: rect(7px, 9999px, 17px, 0);
        transform: translate(2px, 1px);
    }
    56% {
        clip: rect(0, 9999px, 0, 0);
        transform: translate(0);
    }
    60% {
        clip: rect(30px, 9999px, 40px, 0);
        transform: translate(-2px, 2px);
    }
    64% {
        clip: rect(0, 9999px, 0, 0);
        transform: translate(0);
    }
    68% {
        clip: rect(11px, 9999px, 21px, 0);
        transform: translate(3px, -2px);
    }
    72% {
        clip: rect(0, 9999px, 0, 0);
        transform: translate(0);
    }
    76% {
        clip: rect(4px, 9999px, 14px, 0);
        transform: translate(-3px, 1px);
    }
    80% {
        clip: rect(0, 9999px, 0, 0);
        transform: translate(0);
    }
    84% {
        clip: rect(23px, 9999px, 33px, 0);
        transform: translate(2px, -1px);
    }
    88% {
        clip: rect(0, 9999px, 0, 0);
        transform: translate(0);
    }
    92% {
        clip: rect(9px, 9999px, 19px, 0);
        transform: translate(-2px, 2px);
    }
    96% {
        clip: rect(0, 9999px, 0, 0);
        transform: translate(0);
    }
    100% {
        clip: rect(16px, 9999px, 26px, 0);
        transform: translate(3px, 0);
    }
}

/* ==================== FEATURE SECTIONS ==================== */

.feature-section {
    padding: var(--spacing-xl) 0; /* Base spacing */
    display: flex;
    align-items: center;
    background-color: var(--color-bg-primary);
    margin: 0;
    overflow: visible; /* Allow carousel shadows and divider to extend */
}

/* ==================== THEME INVERTED SECTION ==================== */
/* Inverts the color scheme: dark in light mode, light in dark mode */

.feature-section.theme-inverted {
    /* Light mode: use dark theme colors */
    --color-bg-primary: #121212;
    --color-bg-secondary: #1e1e1e;
    --color-text-primary: rgba(255, 255, 255, 0.95);
    --color-text-secondary: rgba(255, 255, 255, 0.8);
    --color-text-muted: rgba(255, 255, 255, 0.5);
    --color-border-light: rgba(255, 255, 255, 0.1);
    --color-border-medium: rgba(255, 255, 255, 0.2);
    
    background-color: var(--color-bg-primary);
}

/* Dark mode: use light theme colors */
[data-theme="dark"] .feature-section.theme-inverted {
    --color-bg-primary: #fafafa;
    --color-bg-secondary: #ffffff;
    --color-text-primary: #1a1a1a;
    --color-text-secondary: #666666;
    --color-text-muted: #999999;
    --color-border-light: rgba(0, 0, 0, 0.08);
    --color-border-medium: rgba(0, 0, 0, 0.15);
    
    background-color: var(--color-bg-primary);
}

/* Narrow section variant - compact vertical spacing */
.feature-section.narrow {
    padding: var(--spacing-md) 0;
}

/* AI Engine section specific styles */
.ai-engine-content {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
    padding: var(--spacing-xs) var(--spacing-md);
}

.ai-engine-title {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-tight);
    text-transform: uppercase;
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-sm);
}

.ai-engine-description {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    line-height: var(--line-height-relaxed);
    max-width: 650px;
    margin: 0 auto;
}

.feature-section.alt {
    background-color: var(--color-bg-secondary);
    margin: 0;
}

/* Darker alternating section in light mode */
[data-theme="light"] .feature-section.alt,
:root:not([data-theme="dark"]) .feature-section.alt {
    background-color: #e8e8e8; /* More noticeable darker gray for better contrast */
}

.feature-grid {
    display: grid;
    grid-template-columns: 1fr 2fr; /* Text takes 1/3, iPad takes 2/3 */
    gap: var(--spacing-lg);
    align-items: center;
}

.feature-grid.reverse {
    grid-template-columns: 2fr 1fr; /* iPad takes 2/3, Text takes 1/3 */
}

.feature-grid.reverse .feature-mockup {
    order: -1;
}

.feature-text {
    animation: fadeInLeft 0.8s ease;
}

.feature-title {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: clamp(calc(2.5rem * 0.9), calc(5vw * 0.9), calc(4rem * 0.9)); /* 10% smaller */
    font-weight: 700; /* Reduced from 800 (15% lighter: 800 * 0.85 = 680, rounded to 700) */
    line-height: var(--line-height-tight);
    margin-bottom: var(--spacing-md);
    letter-spacing: var(--letter-spacing-tight);
    text-transform: uppercase;
    color: var(--color-text-primary); /* Explicit color to follow guidelines */
}

/* Removed handwritten styles - replaced with industrial-accent */

.feature-description {
    font-size: var(--font-size-md);
    color: var(--color-text-secondary);
    line-height: var(--line-height-relaxed);
}

/* Feature section labels use monospace */
.feature-section .mono-label {
    display: inline-block;
    margin-top: var(--spacing-xs);
}

.feature-mockup {
    position: relative;
    animation: fadeInRight 0.8s ease;
    background: transparent;
}

.feature-image {
    max-width: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: transparent;
    padding: 0;
    margin: 0;
}

.feature-image img {
    width: 100%;
    height: auto;
    max-width: 350px; /* 20% smaller: 437px * 0.8 = 350px */
    border-radius: var(--radius-md); /* Sharp corners with micro-chamfer */
    box-shadow: 
        0 20px 60px rgba(0, 0, 0, 0.15),
        0 10px 30px rgba(0, 0, 0, 0.1);
    object-fit: contain;
    display: block;
    background: transparent;
    padding: 0;
    margin: 0;
}

.feature-image video,
.feature-video {
    width: 100%;
    height: auto;
    max-width: 437px; /* 20% smaller: 546px * 0.8 = 437px */
    box-shadow: 
        0 20px 60px rgba(0, 0, 0, 0.15),
        0 10px 30px rgba(0, 0, 0, 0.1);
    object-fit: contain;
    display: block;
    background: transparent;
    padding: 0;
    margin: 0;
}

.pencil-icon {
    margin-top: var(--spacing-md);
    display: flex;
    justify-content: center;
}

.pencil-icon svg {
    width: 300px;
    height: auto;
    opacity: 0.6;
}

/* ==================== RESPONSIVE DESIGN ==================== */

/* Large screens - more spacing */
@media (min-width: 1400px) {
    .feature-section {
        padding: calc(var(--spacing-xl) * 2.5) 0; /* 15rem / 240px on very large screens */
    }
}

/* Medium-large screens */
@media (min-width: 1200px) and (max-width: 1399px) {
    .feature-section {
        padding: calc(var(--spacing-xl) * 2) 0; /* 12rem / 192px */
    }
}

/* Medium screens */
@media (min-width: 969px) and (max-width: 1199px) {
    .feature-section {
        padding: calc(var(--spacing-xl) * 1.5) 0; /* 9rem / 144px */
    }
}

@media (max-width: 968px) {

    .feature-grid,
    .feature-grid.reverse {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }

    .feature-grid.reverse .feature-mockup {
        order: 1;
    }

    .feature-grid.reverse .feature-text {
        order: -1;
    }

    .feature-text {
        text-align: center;
    }
}

@media (max-width: 768px) {
    .hero {
        padding-top: calc(var(--spacing-lg) + 5rem);
    }

    .feature-section {
        padding: clamp(var(--spacing-sm), 5vh, var(--spacing-md)) 0; /* Smaller dynamic spacing on mobile */
    }

    /* Keep tablet-frame padding consistent across all screen sizes */
    /* .tablet-frame padding remains 0.525rem for consistent border-radius */
}

@media (max-width: 480px) {
    .hero-mockup {
        margin: var(--spacing-md) 0;
    }

    .btn-cta {
        padding: 0.875rem 2rem;
        font-size: var(--font-size-base);
    }
}

/* ==================== SPECS COMPARISON TABLE ==================== */

.compare-specs-section {
    background-color: var(--color-bg-tertiary);
    padding: var(--spacing-lg) 0;
}

.compare-specs-section .feature-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.compare-specs-section .feature-title {
    font-size: clamp(1.5rem, 3vw, 2rem);
    margin-bottom: var(--spacing-xs);
}

.compare-specs-section .feature-description {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.compare-table-mockup {
    display: flex;
    align-items: center;
    justify-content: center;
}

.compare-specs-table-wrapper {
    width: 100%;
    max-width: 480px;
    background: var(--color-bg-primary);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.compare-specs-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-mono);
}

/* Table Header - Large & Bold */
.compare-specs-table thead tr {
    background: var(--color-bg-secondary);
}

.compare-specs-table th {
    padding: 1rem 1.25rem;
    text-align: left;
    font-weight: 800;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-primary);
    border-bottom: 2px solid var(--color-border-primary);
}

/* Table Rows - Alternating with strong contrast */
.compare-specs-table tbody tr:nth-child(odd) {
    background: var(--color-bg-primary);
}

.compare-specs-table tbody tr:nth-child(even) {
    background: var(--color-bg-secondary);
}

.compare-specs-table tbody tr {
    border-bottom: 1px solid var(--color-border-secondary);
}

.compare-specs-table tbody tr:last-child {
    border-bottom: none;
}

.compare-specs-table td {
    padding: 0.875rem 1.25rem;
    font-size: 0.8125rem;
}

/* Column Styling */
.spec-label {
    font-weight: 700;
    color: var(--color-text-primary);
}

.spec-value {
    color: var(--color-text-primary);
}

.spec-value.spec-competitor {
    color: var(--color-text-tertiary);
}

/* Dark Mode */
[data-theme="dark"] .compare-specs-table-wrapper {
    background: var(--color-bg-secondary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .compare-specs-table thead tr {
    background: var(--color-bg-tertiary);
}

[data-theme="dark"] .compare-specs-table tbody tr:nth-child(odd) {
    background: var(--color-bg-secondary);
}

[data-theme="dark"] .compare-specs-table tbody tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.03);
}

/* Responsive */
@media (max-width: 768px) {
    .compare-specs-table th {
        padding: 0.75rem 1rem;
        font-size: 0.75rem;
    }
    
    .compare-specs-table td {
        padding: 0.625rem 1rem;
        font-size: 0.75rem;
    }
}
/* =====================================================
   PRICING PAGE STYLES
   Clean, simple pricing page matching feather style
   ===================================================== */

.pricing-page {
    padding-top: calc(var(--spacing-xl) + 6rem);
    padding-bottom: var(--spacing-xl);
    min-height: 100vh;
}

/* ==================== HERO SECTION ==================== */

.pricing-hero {
    text-align: center;
    margin-bottom: var(--spacing-sm); /* Reduced from xl */
    animation: fadeInUp 0.8s ease;
}

.pricing-hero h1 {
    /* Inherits font-family, font-weight, text-transform, letter-spacing, line-height from base.css h1 */
    font-size: clamp(calc(2.5rem * 0.9), calc(6vw * 0.9), calc(4.5rem * 0.9)); /* 10% smaller */
    margin-bottom: var(--spacing-md);
    color: var(--color-text-primary);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.3em;
    line-height: 1.2;
}

.pricing-hero h1 .gradient-text {
    white-space: nowrap;
}

.pricing-hero .gradient-text {
    color: var(--color-brand-primary);
}

.pricing-subtitle {
    font-size: var(--font-size-md);
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-sm);
    line-height: var(--line-height-relaxed);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.pricing-note {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin-top: var(--spacing-xs);
    margin-bottom: 0; /* Remove bottom margin */
}

.pricing-note.mono-label {
    font-family: var(--font-mono);
    font-size: var(--font-size-sm);
    letter-spacing: 0.05em;
}

/* ==================== TRIAL BANNER ==================== */

.trial-banner {
    max-width: 800px;
    margin: var(--spacing-sm) auto var(--spacing-xl) auto; /* Less space above - reduced from md */
    background-color: rgba(0, 0, 0, 0.02); /* Match pricing card background */
    border: var(--border-width-thin) solid var(--color-border-light);
    border-radius: var(--radius-md); /* Sharp corners with micro-chamfer */
    padding: var(--spacing-lg);
    box-shadow: var(--shadow-md);
    overflow: visible; /* Allow badge to extend */
    position: relative; /* For absolute positioning of badge */
}

/* Dark theme trial banner */
[data-theme="dark"] .trial-banner {
    background-color: rgba(255, 255, 255, 0.02); /* Match pricing card dark theme */
}

.trial-content {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
}

.trial-number-block {
    flex-shrink: 0;
    text-align: center;
    padding-right: var(--spacing-lg);
    border-right: var(--border-width-thin) solid var(--color-border-light);
}

.trial-number {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 3.6rem; /* Fixed size: calc(4rem * 0.9) = 3.6rem - doesn't shrink on small screens */
    font-weight: 700; /* Reduced from 800 (15% lighter) */
    line-height: 1;
    color: var(--color-brand-primary);
    letter-spacing: var(--letter-spacing-tight);
}

.trial-label {
    font-size: var(--font-size-lg); /* Match plan-period size */
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    font-weight: var(--font-weight-semibold);
    margin-top: var(--spacing-xs);
}

.trial-label.mono-label {
    font-family: var(--font-mono);
    font-size: var(--font-size-lg); /* Match plan-period size */
    letter-spacing: 0.05em;
}

.trial-info {
    flex: 1;
}

.trial-info h2 {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: calc(var(--font-size-xl) * 0.9); /* 10% smaller */
    font-weight: 600; /* Reduced from 700 (15% lighter: 700 * 0.85 = 595, rounded to 600) */
    margin-bottom: var(--spacing-sm);
    text-transform: uppercase;
    color: var(--color-text-primary);
}

.free-badge-large {
    position: absolute;
    top: -12px;
    right: var(--spacing-lg);
    background-color: var(--color-badge-yellow);
    color: var(--color-text-primary);
    font-family: var(--font-mono);
    font-size: var(--font-size-lg); /* Larger */
    font-weight: var(--font-weight-bold);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-md); /* Micro-chamfer */
    letter-spacing: 0.05em;
    text-transform: uppercase;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
    z-index: 10;
}

/* Dark theme - black text on yellow */
[data-theme="dark"] .free-badge-large {
    color: #000000;
}

.trial-info p {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    margin-bottom: 0; /* No margin since features removed */
    line-height: var(--line-height-relaxed);
}

/* ==================== PRICING GRID ==================== */

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-md);
    margin: var(--spacing-xl) auto;
    max-width: 1200px;
    align-items: start; /* Align cards at top for better comparison */
}

.pricing-card {
    background-color: rgba(0, 0, 0, 0.02); /* Slightly darkened background */
    border: var(--border-width-thin) solid var(--color-border-light);
    border-radius: var(--radius-md); /* Sharp corners with micro-chamfer */
    padding: var(--spacing-md) var(--spacing-lg);
    box-shadow: var(--shadow-md);
    transition: var(--transition-smooth);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center; /* Center all content */
    text-align: center; /* Center text */
}

/* Dark theme pricing cards */
[data-theme="dark"] .pricing-card {
    background-color: rgba(255, 255, 255, 0.02); /* Slightly lightened for dark theme */
}

.pricing-card:hover {
    /* Removed lift effect - cards should not lift on hover */
}

.pricing-card.featured {
    /* Border removed - no special styling for featured card */
    box-shadow: var(--shadow-lg);
    position: relative;
}

.pricing-badge {
    position: absolute;
    top: -12px;
    right: var(--spacing-lg);
    background-color: var(--color-brand-primary);
    color: var(--color-bg-secondary);
    padding: var(--spacing-xs) var(--spacing-md);
    border-radius: var(--radius-md); /* Sharp corners with micro-chamfer */
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.plan-name {
    font-size: var(--font-size-lg); /* Larger */
    font-weight: var(--font-weight-bold);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    margin-bottom: var(--spacing-sm);
    text-align: center; /* Centered */
}

.plan-name.mono-label {
    font-family: var(--font-mono);
    font-size: var(--font-size-lg); /* Larger */
    letter-spacing: 0.05em;
    font-weight: var(--font-weight-medium);
}

.plan-price {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 3.6rem; /* Fixed size: calc(4rem * 0.9) = 3.6rem - doesn't shrink on small screens */
    font-weight: 700; /* Reduced from 800 (15% lighter) */
    line-height: 1;
    margin-bottom: var(--spacing-xs);
    letter-spacing: var(--letter-spacing-tight);
    color: var(--color-text-primary);
    margin-top: 0;
    text-align: center; /* Centered */
}

.plan-period {
    font-size: var(--font-size-lg); /* Larger - was base */
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-medium);
    margin-bottom: var(--spacing-md);
    margin-top: 0;
    text-align: center; /* Centered */
}

.plan-period.mono-label {
    font-family: var(--font-mono);
    font-size: var(--font-size-lg); /* Larger - was sm */
    letter-spacing: 0.05em;
    font-weight: var(--font-weight-medium);
}

.plan-savings {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background-color: var(--color-accent-industrial); /* Highlighter yellow */
    color: var(--color-text-primary);
    padding: 0.5rem;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
    letter-spacing: 0.05em;
    font-weight: var(--font-weight-bold);
    text-align: center;
    text-transform: uppercase;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
    z-index: 1;
}

.pricing-card.has-savings {
    padding-top: calc(var(--spacing-md) + 2.5rem);
}

.plan-features {
    list-style: none;
    margin: var(--spacing-md) 0;
    padding: 0;
    flex: 1;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
    width: 100%; /* Full width for centering */
    text-align: left; /* Left align list items */
}

.plan-features li {
    padding: 0.5rem 0;
    color: var(--color-text-secondary);
    font-size: var(--font-size-base); /* Larger - was sm */
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    line-height: 1.4;
    min-height: 1.75rem;
}

.plan-features li::before {
    content: '✓';
    color: var(--color-brand-primary);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-lg); /* Larger - was base */
    flex-shrink: 0;
    width: 1.5rem; /* Larger - was 1rem */
    text-align: center;
}

[data-theme="dark"] .plan-features li::before {
    color: var(--color-accent-green);
}

/* .pricing-card .btn now inherits from base .btn in buttons.css */
.pricing-card .btn {
    width: 100%;
    margin-top: auto; /* Push to bottom of card */
    padding: 0.875rem 1.5rem;
    display: block;
}

/* ==================== FAQ SECTION ==================== */

.faq-section {
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    width: 100vw;
    margin-top: var(--spacing-xl);
    margin-bottom: var(--spacing-xl);
    background-color: rgba(0, 0, 0, 0.02); /* Darkened background */
    border-radius: 0; /* Remove border radius for full-width sections */
    padding: var(--spacing-xl) 0; /* Vertical padding only */
    box-sizing: border-box;
}

.faq-section .faq-header,
.faq-section .faq-grid {
    max-width: var(--container-xl);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--spacing-md); /* Match container padding */
    padding-right: var(--spacing-md); /* Match container padding */
    box-sizing: border-box;
}

/* Dark theme FAQ section */
[data-theme="dark"] .faq-section {
    background-color: rgba(255, 255, 255, 0.02); /* Darkened for dark theme */
}

.faq-header {
    text-align: center;
    margin-bottom: var(--spacing-lg);
}

.faq-header h2 {
    /* Match feature-title size from home.css for consistency */
    font-size: clamp(calc(2.5rem * 0.9), calc(5vw * 0.9), calc(4rem * 0.9));
    color: var(--color-text-primary);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.3em;
    line-height: 1.2;
}

.faq-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-lg);
    align-items: start;
}

.faq-column {
    display: contents;
}

.faq-item {
    padding: var(--spacing-md) var(--spacing-lg);
    background-color: var(--color-bg-secondary);
    border: var(--border-width-thin) solid var(--color-border-light);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

.faq-question {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: var(--font-size-base);
    font-weight: 600; /* Reduced from 700 (15% lighter) */
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-sm);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.faq-answer {
    font-family: var(--font-mono); /* Monospace for terminal/technical look */
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: var(--line-height-relaxed);
}

/* ==================== CREDIT COSTS TABLE ==================== */

.credit-costs-section {
    margin: var(--spacing-xl) auto;
    max-width: 400px;
    text-align: center;
}

.credit-costs-title {
    font-size: var(--font-size-lg);
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-md);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
}

.credit-costs-section .compare-specs-table-wrapper {
    margin: 0 auto;
    max-width: 360px;
}

/* Feature column: left-justified */
.credit-costs-section .compare-specs-table th:first-child,
.credit-costs-section .compare-specs-table td:first-child {
    text-align: left;
}

/* Credits column: right-justified for alignment */
.credit-costs-section .compare-specs-table th:last-child,
.credit-costs-section .compare-specs-table td:last-child {
    text-align: right;
    white-space: nowrap;
}

/* Tighter padding for narrower table */
.credit-costs-section .compare-specs-table th,
.credit-costs-section .compare-specs-table td {
    padding: 0.625rem 1rem;
}

/* ==================== RESPONSIVE DESIGN ==================== */

@media (max-width: 968px) {
    .trial-content {
        flex-direction: column;
        text-align: center;
    }

    .trial-number-block {
        border-right: none;
        border-bottom: var(--border-width-thin) solid var(--color-border-light);
        padding-right: 0;
        padding-bottom: var(--spacing-md);
    }

    .faq-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1024px) {
    .pricing-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .pricing-page {
        padding-top: calc(var(--spacing-lg) + 5rem);
    }

    .pricing-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }

    .trial-number {
        font-size: calc(3rem * 0.9); /* 10% smaller on mobile */
    }

    .plan-price {
        font-size: calc(var(--font-size-3xl) * 0.9); /* 10% smaller on mobile */
    }

    .pricing-badge {
        right: var(--spacing-md);
        top: -10px;
    }

    .pricing-card.has-savings {
        padding-top: calc(var(--spacing-md) + 2.5rem);
    }
}
/**
 * Error Pages Styles
 * 403, 404, 429, 500, 502
 * Following industrial/brutalist design
 */

/* ========================================
   ERROR PAGE LAYOUT
   ======================================== */

.error-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-md);
    background-color: var(--color-bg-primary);
    position: relative;
    overflow: hidden;
}

.error-page::before {
    content: '';
    position: fixed;
    inset: 0;
    background:
        radial-gradient(ellipse 80% 50% at 50% -20%, rgba(245, 0, 87, 0.1), transparent),
        radial-gradient(ellipse 60% 40% at 100% 100%, rgba(245, 0, 87, 0.08), transparent),
        radial-gradient(ellipse 40% 30% at 0% 50%, rgba(0, 212, 255, 0.06), transparent);
    pointer-events: none;
    z-index: 0;
}

.error-page::after {
    content: '';
    position: fixed;
    inset: 0;
    background-image:
        linear-gradient(rgba(0, 0, 0, 0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 0, 0, 0.02) 1px, transparent 1px);
    background-size: 60px 60px;
    pointer-events: none;
    z-index: 1;
}

.error-container {
    position: relative;
    z-index: 10;
    text-align: center;
    max-width: var(--container-error);
    width: 100%;
}

/* ========================================
   ERROR CARD
   ======================================== */

.error-card {
    background-color: var(--color-bg-secondary);
    border: var(--border-width-thin) solid var(--color-border-medium);
    border-radius: var(--radius-md);
    padding: var(--spacing-lg) var(--spacing-lg);
    box-shadow: var(--shadow-xl);
}

.error-icon {
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
    margin: 0 auto var(--spacing-sm);
    background: linear-gradient(135deg, var(--color-error), #c51162);
    border: var(--border-width-medium) solid rgba(0, 0, 0, var(--border-opacity-light));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-2xl);
    color: var(--color-bg-secondary);
    box-shadow: 0 0 var(--glow-size-base) rgba(245, 0, 87, var(--glow-opacity-base));
    animation: pulse 2s ease-in-out infinite;
}

.error-icon-403 {
    background: linear-gradient(135deg, #a855f7, #9333ea);
    border-color: rgba(0, 0, 0, var(--border-opacity-light));
    box-shadow: 0 0 var(--glow-size-base) rgba(168, 85, 247, var(--glow-opacity-base));
}

.error-icon-429 {
    background: linear-gradient(135deg, var(--color-warning), #f59e0b);
    border-color: rgba(0, 0, 0, var(--border-opacity-light));
    box-shadow: 0 0 var(--glow-size-base) rgba(245, 158, 11, var(--glow-opacity-base));
}

.error-icon-500,
.error-icon-502 {
    background: linear-gradient(135deg, var(--color-error), #dc2626);
    border-color: rgba(0, 0, 0, var(--border-opacity-light));
    box-shadow: 0 0 var(--glow-size-base) rgba(239, 68, 68, var(--glow-opacity-base));
}

@keyframes pulse {
    0%, 100% {
        box-shadow: 0 0 var(--glow-size-base) rgba(245, 0, 87, var(--glow-opacity-base));
    }
    50% {
        box-shadow: 0 0 var(--glow-size-medium) rgba(245, 0, 87, var(--glow-opacity-medium)), 0 0 var(--glow-size-large) rgba(245, 0, 87, var(--glow-opacity-light));
    }
}

.error-code {
    font-family: var(--font-mono);
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-error);
    line-height: var(--line-height-tight);
    margin-bottom: var(--spacing-xs);
    text-shadow: 0 0 30px rgba(245, 0, 87, 0.4);
    position: relative;
    display: inline-block;
}

/* Glitch effect for error codes */
.error-code.glitch-effect::before,
.error-code.glitch-effect::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
}

.error-code.glitch-effect::before {
    left: 3px;
    text-shadow: -3px 0 #00FFFF;
    clip: rect(0, 9999px, 0, 0);
    animation: glitch-cyan 1.5s infinite linear alternate-reverse;
}

.error-code.glitch-effect::after {
    left: -3px;
    text-shadow: 3px 0 #FF00FF;
    clip: rect(0, 9999px, 0, 0);
    animation: glitch-magenta 1.8s infinite linear alternate-reverse;
}

/* Cyan channel glitch */
@keyframes glitch-cyan {
    0% {
        clip: rect(0, 9999px, 0, 0);
        transform: translate(0);
    }
    5% {
        clip: rect(8px, 9999px, 18px, 0);
        transform: translate(-3px, 1px);
    }
    10% {
        clip: rect(0, 9999px, 0, 0);
        transform: translate(0);
    }
    15% {
        clip: rect(15px, 9999px, 25px, 0);
        transform: translate(3px, -1px);
    }
    20% {
        clip: rect(0, 9999px, 0, 0);
        transform: translate(0);
    }
    25% {
        clip: rect(22px, 9999px, 32px, 0);
        transform: translate(-2px, 2px);
    }
    30% {
        clip: rect(0, 9999px, 0, 0);
        transform: translate(0);
    }
    35% {
        clip: rect(5px, 9999px, 15px, 0);
        transform: translate(2px, -2px);
    }
    40% {
        clip: rect(0, 9999px, 0, 0);
        transform: translate(0);
    }
    45% {
        clip: rect(18px, 9999px, 28px, 0);
        transform: translate(-3px, 0);
    }
    50% {
        clip: rect(0, 9999px, 0, 0);
        transform: translate(0);
    }
    55% {
        clip: rect(12px, 9999px, 22px, 0);
        transform: translate(3px, 1px);
    }
    60% {
        clip: rect(0, 9999px, 0, 0);
        transform: translate(0);
    }
    65% {
        clip: rect(28px, 9999px, 38px, 0);
        transform: translate(-2px, -1px);
    }
    70% {
        clip: rect(0, 9999px, 0, 0);
        transform: translate(0);
    }
    75% {
        clip: rect(3px, 9999px, 13px, 0);
        transform: translate(2px, 2px);
    }
    80% {
        clip: rect(0, 9999px, 0, 0);
        transform: translate(0);
    }
    85% {
        clip: rect(20px, 9999px, 30px, 0);
        transform: translate(-3px, 1px);
    }
    90% {
        clip: rect(0, 9999px, 0, 0);
        transform: translate(0);
    }
    95% {
        clip: rect(10px, 9999px, 20px, 0);
        transform: translate(3px, -1px);
    }
    100% {
        clip: rect(0, 9999px, 0, 0);
        transform: translate(0);
    }
}

/* Magenta channel glitch */
@keyframes glitch-magenta {
    0% {
        clip: rect(0, 9999px, 0, 0);
        transform: translate(0);
    }
    4% {
        clip: rect(12px, 9999px, 22px, 0);
        transform: translate(3px, -1px);
    }
    8% {
        clip: rect(0, 9999px, 0, 0);
        transform: translate(0);
    }
    12% {
        clip: rect(6px, 9999px, 16px, 0);
        transform: translate(-3px, 1px);
    }
    16% {
        clip: rect(0, 9999px, 0, 0);
        transform: translate(0);
    }
    20% {
        clip: rect(25px, 9999px, 35px, 0);
        transform: translate(2px, -2px);
    }
    24% {
        clip: rect(0, 9999px, 0, 0);
        transform: translate(0);
    }
    28% {
        clip: rect(9px, 9999px, 19px, 0);
        transform: translate(-2px, 2px);
    }
    32% {
        clip: rect(0, 9999px, 0, 0);
        transform: translate(0);
    }
    36% {
        clip: rect(17px, 9999px, 27px, 0);
        transform: translate(3px, 0);
    }
    40% {
        clip: rect(0, 9999px, 0, 0);
        transform: translate(0);
    }
    44% {
        clip: rect(4px, 9999px, 14px, 0);
        transform: translate(-3px, -1px);
    }
    48% {
        clip: rect(0, 9999px, 0, 0);
        transform: translate(0);
    }
    52% {
        clip: rect(21px, 9999px, 31px, 0);
        transform: translate(2px, 1px);
    }
    56% {
        clip: rect(0, 9999px, 0, 0);
        transform: translate(0);
    }
    60% {
        clip: rect(7px, 9999px, 17px, 0);
        transform: translate(-2px, -2px);
    }
    64% {
        clip: rect(0, 9999px, 0, 0);
        transform: translate(0);
    }
    68% {
        clip: rect(26px, 9999px, 36px, 0);
        transform: translate(3px, 2px);
    }
    72% {
        clip: rect(0, 9999px, 0, 0);
        transform: translate(0);
    }
    76% {
        clip: rect(11px, 9999px, 21px, 0);
        transform: translate(-3px, -1px);
    }
    80% {
        clip: rect(0, 9999px, 0, 0);
        transform: translate(0);
    }
    84% {
        clip: rect(19px, 9999px, 29px, 0);
        transform: translate(2px, -2px);
    }
    88% {
        clip: rect(0, 9999px, 0, 0);
        transform: translate(0);
    }
    92% {
        clip: rect(2px, 9999px, 12px, 0);
        transform: translate(-2px, 1px);
    }
    96% {
        clip: rect(0, 9999px, 0, 0);
        transform: translate(0);
    }
    100% {
        clip: rect(0, 9999px, 0, 0);
        transform: translate(0);
    }
}

.error-code-403 {
    color: #a855f7;
    text-shadow: 0 0 30px rgba(168, 85, 247, 0.4);
}

.error-code-429 {
    color: var(--color-warning);
    text-shadow: 0 0 30px rgba(245, 158, 11, 0.4);
}

.error-label {
    font-family: var(--font-mono);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.2em;
    margin-bottom: var(--spacing-sm);
}

.error-title {
    font-family: var(--font-primary);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.error-description {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    line-height: var(--line-height-relaxed);
    margin-bottom: var(--spacing-md);
}

.error-actions {
    display: flex;
    gap: var(--spacing-md);
    justify-content: center;
    flex-wrap: wrap;
}

.error-actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    vertical-align: middle;
    line-height: 1;
}

.error-actions .btn i {
    display: inline-block;
    vertical-align: middle;
    line-height: 1;
    font-size: 1em;
}

.error-actions .btn-secondary {
    --btn-bg: #e8e8e8;
    --btn-color: var(--color-text-primary);
    --btn-bg-hover: #e0e0e0;
    --btn-color-hover: var(--color-text-primary);
    border: none;
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-sm);
}

[data-theme="dark"] .error-actions .btn-secondary {
    --btn-bg: rgba(255, 255, 255, 0.12);
    --btn-color: var(--color-text-primary);
    --btn-bg-hover: rgba(255, 255, 255, 0.18);
    border: none;
}

/* ========================================
   DARK THEME
   ======================================== */

[data-theme="dark"] .error-page {
    background-color: var(--color-bg-primary);
}

[data-theme="dark"] .error-card {
    background-color: var(--color-bg-primary);
    border-color: var(--color-border-light);
}

[data-theme="dark"] .error-icon {
    border-color: rgba(255, 255, 255, var(--border-opacity-medium));
}

[data-theme="dark"] .error-icon-403,
[data-theme="dark"] .error-icon-429,
[data-theme="dark"] .error-icon-500,
[data-theme="dark"] .error-icon-502 {
    border-color: rgba(255, 255, 255, var(--border-opacity-medium));
}

/* ========================================
   RESPONSIVE
   ======================================== */

@media (max-width: 768px) {
    .error-card {
        padding: var(--spacing-lg) var(--spacing-md);
    }
    
    .error-code {
        font-size: var(--font-size-3xl);
    }
    
    .error-icon {
        width: 56px;
        height: 56px;
        font-size: var(--font-size-xl);
    }
    
    .error-actions {
        flex-direction: column;
    }
    
    .error-actions .btn {
        width: 100%;
        justify-content: center;
    }
}
/**
 * Status Pages Styles
 * Success, account-deleted, maintenance
 * Following industrial/brutalist design
 */

/* ========================================
   STATUS PAGE LAYOUT
   ======================================== */

.status-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-md);
    background-color: var(--color-bg-primary);
    position: relative;
}

.status-page::before {
    content: '';
    position: fixed;
    inset: 0;
    background:
        radial-gradient(ellipse 80% 50% at 50% -20%, rgba(0, 212, 255, 0.1), transparent),
        radial-gradient(ellipse 60% 40% at 100% 100%, rgba(0, 255, 128, 0.08), transparent);
    pointer-events: none;
    z-index: 0;
}

.status-container {
    position: relative;
    z-index: 10;
    max-width: var(--container-status);
    width: 100%;
}

/* ========================================
   STATUS CARD
   ======================================== */

.status-card {
    background-color: var(--color-bg-secondary);
    border: var(--border-width-thin) solid var(--color-border-medium);
    border-radius: var(--radius-md);
    padding: var(--spacing-lg) var(--spacing-xl);
    box-shadow: var(--shadow-xl);
    text-align: center;
}

.status-icon {
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
    margin: 0 auto var(--spacing-md);
    border: var(--border-width-medium) solid rgba(0, 0, 0, var(--border-opacity-light));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-2xl);
    box-shadow: 0 0 var(--glow-size-base) rgba(0, 0, 0, var(--border-opacity-light));
    animation: scaleIn 0.5s ease-out, pulse 2s ease-in-out infinite;
}

.status-icon-success {
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.2), rgba(0, 255, 128, 0.2));
    box-shadow: 0 0 var(--glow-size-base) rgba(0, 212, 255, var(--glow-opacity-base));
    animation: scaleIn 0.5s ease-out, pulse-success 2s ease-in-out infinite;
}

@keyframes pulse-success {
    0%, 100% {
        box-shadow: 0 0 var(--glow-size-base) rgba(0, 212, 255, var(--glow-opacity-base));
    }
    50% {
        box-shadow: 0 0 var(--glow-size-medium) rgba(0, 212, 255, var(--glow-opacity-medium)), 0 0 var(--glow-size-large) rgba(0, 212, 255, var(--glow-opacity-light));
    }
}

.status-icon-success i {
    background: linear-gradient(135deg, #00d4ff, #00ff80);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.status-icon-deleted {
    background: linear-gradient(135deg, rgba(245, 0, 87, 0.2), rgba(255, 23, 68, 0.2));
    box-shadow: 0 0 var(--glow-size-base) rgba(245, 0, 87, var(--glow-opacity-base));
    animation: scaleIn 0.5s ease-out, pulse-deleted 2s ease-in-out infinite;
}

@keyframes pulse-deleted {
    0%, 100% {
        box-shadow: 0 0 var(--glow-size-base) rgba(245, 0, 87, var(--glow-opacity-base));
    }
    50% {
        box-shadow: 0 0 var(--glow-size-medium) rgba(245, 0, 87, var(--glow-opacity-medium)), 0 0 var(--glow-size-large) rgba(245, 0, 87, var(--glow-opacity-light));
    }
}

.status-icon-deleted i {
    background: linear-gradient(135deg, #f50057, #ff1744);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.status-icon-maintenance {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(251, 191, 36, 0.2));
    border-color: rgba(0, 0, 0, var(--border-opacity-light));
    box-shadow: 0 0 var(--glow-size-base) rgba(245, 158, 11, var(--glow-opacity-base));
    animation: scaleIn 0.5s ease-out, pulse-maintenance 2s ease-in-out infinite;
}

@keyframes pulse-maintenance {
    0%, 100% {
        box-shadow: 0 0 var(--glow-size-base) rgba(245, 158, 11, var(--glow-opacity-base));
    }
    50% {
        box-shadow: 0 0 var(--glow-size-medium) rgba(245, 158, 11, var(--glow-opacity-medium)), 0 0 var(--glow-size-large) rgba(245, 158, 11, var(--glow-opacity-light));
    }
}

.status-icon-maintenance i {
    background: linear-gradient(135deg, #f59e0b, #fbbf24);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

[data-theme="dark"] .status-icon {
    border-color: rgba(255, 255, 255, var(--border-opacity-medium));
}

[data-theme="dark"] .status-icon-success {
    box-shadow: 0 0 var(--glow-size-base) rgba(0, 212, 255, var(--glow-opacity-base));
}

[data-theme="dark"] .status-icon-deleted {
    box-shadow: 0 0 var(--glow-size-base) rgba(245, 0, 87, var(--glow-opacity-base));
}

[data-theme="dark"] .status-icon-maintenance {
    box-shadow: 0 0 var(--glow-size-base) rgba(245, 158, 11, var(--glow-opacity-base));
    border-color: rgba(255, 255, 255, var(--border-opacity-medium));
}

/* Pulse animations work in both themes - they use the same shadow colors */

@keyframes scaleIn {
    from {
        transform: scale(0);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes pulse {
    0%, 100% {
        box-shadow: 0 0 40px rgba(0, 0, 0, 0.2);
    }
    50% {
        box-shadow: 0 0 60px rgba(0, 0, 0, 0.3), 0 0 80px rgba(0, 0, 0, 0.1);
    }
}

.status-title {
    font-family: var(--font-primary);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-sm);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.status-subtitle {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    line-height: var(--line-height-relaxed);
    margin-bottom: var(--spacing-md);
}

/* ========================================
   FEATURE LIST
   ======================================== */

.feature-list {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--spacing-xl) 0;
    text-align: left;
    background-color: var(--color-bg-surface);
    border-radius: var(--radius-md);
    padding: var(--spacing-md) var(--spacing-lg);
    border-left: var(--border-width-thick) solid var(--color-brand-primary);
}

.feature-list li {
    color: var(--color-text-primary);
    padding: var(--spacing-xs) 0;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: var(--font-size-base);
}

.feature-list li i {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    width: 20px;
    text-align: center;
    flex-shrink: 0;
}

[data-theme="dark"] .feature-list li i {
    color: var(--color-accent-industrial);
}

/* ========================================
   INFO LIST
   ======================================== */

.info-list {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--spacing-xl) 0;
    text-align: left;
    background-color: var(--color-bg-surface);
    border-radius: var(--radius-md);
    padding: var(--spacing-md) var(--spacing-lg);
    border-left: var(--border-width-thick) solid var(--color-error);
}

.info-list-title {
    color: var(--color-text-primary);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm);
    margin-bottom: var(--spacing-sm);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.info-list li {
    color: var(--color-text-secondary);
    padding: var(--spacing-xs) 0;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: var(--font-size-sm);
}

.info-list li i {
    color: var(--color-text-secondary);
    font-size: var(--font-size-xs);
    width: 16px;
    text-align: center;
    flex-shrink: 0;
}

[data-theme="dark"] .info-list li i {
    color: var(--color-error);
}

/* ========================================
   STATUS NOTE
   ======================================== */

.status-note {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-normal);
    margin-bottom: var(--spacing-md);
}

.status-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
}

.status-actions .btn-secondary {
    --btn-bg: #e8e8e8;
    --btn-color: var(--color-text-primary);
    --btn-bg-hover: #e0e0e0;
    --btn-color-hover: var(--color-text-primary);
    border: none;
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-sm);
}

[data-theme="dark"] .status-actions .btn-secondary {
    --btn-bg: rgba(255, 255, 255, 0.12);
    --btn-color: var(--color-text-primary);
    --btn-bg-hover: rgba(255, 255, 255, 0.18);
    border: none;
}

.status-support {
    margin-top: var(--spacing-md);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.status-support a {
    color: var(--color-text-primary);
    text-decoration: underline;
    text-decoration-color: var(--color-text-secondary);
}

.status-support a:hover {
    text-decoration-color: var(--color-text-primary);
}

[data-theme="dark"] .status-support a {
    color: var(--color-accent-industrial);
    text-decoration-color: var(--color-accent-industrial);
}

[data-theme="dark"] .status-support a:hover {
    color: #00d4ff;
    text-decoration-color: #00d4ff;
}

/* ========================================
   MAINTENANCE PAGE
   ======================================== */

.maintenance-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-md);
    background: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 50%, #16213e 100%);
    color: #fff;
    position: relative;
    overflow: hidden;
}

.maintenance-stars {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background-image:
        radial-gradient(2px 2px at 20px 30px, #fff, transparent),
        radial-gradient(2px 2px at 40px 70px, rgba(255,255,255,0.8), transparent),
        radial-gradient(1px 1px at 90px 40px, #fff, transparent),
        radial-gradient(2px 2px at 160px 120px, rgba(255,255,255,0.9), transparent),
        radial-gradient(1px 1px at 230px 80px, #fff, transparent),
        radial-gradient(2px 2px at 300px 150px, rgba(255,255,255,0.7), transparent),
        radial-gradient(1px 1px at 370px 50px, #fff, transparent),
        radial-gradient(2px 2px at 450px 200px, rgba(255,255,255,0.8), transparent);
    background-size: 500px 300px;
    animation: twinkle 8s ease-in-out infinite;
}

@keyframes twinkle {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 1; }
}

.maintenance-container {
    text-align: center;
    padding: var(--spacing-xl) var(--spacing-md);
    max-width: 600px;
    width: 100%;
    position: relative;
    z-index: 1;
}

.maintenance-logo {
    position: absolute;
    top: var(--spacing-xl);
    left: 50%;
    transform: translateX(-50%);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.3);
    text-transform: uppercase;
}

.guide-cover {
    width: 200px;
    height: 260px;
    margin: 0 auto var(--spacing-xl);
    background: linear-gradient(145deg, #2d5016 0%, #1a3009 100%);
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 20px 60px rgba(0,0,0,0.5),
        inset 0 2px 0 rgba(255,255,255,0.1);
    position: relative;
    transform: rotate(-2deg);
    animation: float 4s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: rotate(-2deg) translateY(0); }
    50% { transform: rotate(-2deg) translateY(-10px); }
}

.guide-cover::before {
    content: '';
    position: absolute;
    left: 10px;
    top: 10px;
    bottom: 10px;
    width: 3px;
    background: rgba(0,0,0,0.3);
    border-radius: var(--radius-md);
}

.dont-panic {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-extrabold);
    color: #ff6b35;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    text-shadow: 0 2px 10px rgba(255, 107, 53, 0.5);
    padding: var(--spacing-md) var(--spacing-lg);
}

.guide-subtitle {
    font-size: var(--font-size-xs);
    color: rgba(255,255,255,0.6);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: var(--spacing-sm);
}

.maintenance-title {
    font-size: var(--font-size-3xl);
    margin-bottom: var(--spacing-lg);
    font-weight: var(--font-weight-light);
    letter-spacing: -0.02em;
}

.maintenance-title span {
    color: #4ecdc4;
}

.maintenance-message {
    font-size: var(--font-size-lg);
    line-height: var(--line-height-relaxed);
    color: rgba(255,255,255,0.8);
    margin-bottom: var(--spacing-xl);
}

.maintenance-status {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    background: rgba(255,255,255,0.05);
    border: var(--border-width-thin) solid rgba(255,255,255,0.1);
    border-radius: var(--radius-full);
    padding: var(--spacing-sm) var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
}

.maintenance-pulse {
    width: 12px;
    height: 12px;
    background: #4ecdc4;
    border-radius: 50%;
    animation: pulse 2s ease-in-out infinite;
}

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

.maintenance-status-text {
    font-size: var(--font-size-sm);
    color: rgba(255,255,255,0.9);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.maintenance-quote {
    font-style: italic;
    color: rgba(255,255,255,0.5);
    font-size: var(--font-size-sm);
    margin-top: var(--spacing-xl);
    padding-top: var(--spacing-xl);
    border-top: var(--border-width-thin) solid rgba(255,255,255,0.1);
}

.maintenance-quote cite {
    display: block;
    margin-top: var(--spacing-sm);
    font-style: normal;
    color: rgba(255,255,255,0.3);
}

/* ========================================
   DARK THEME
   ======================================== */

[data-theme="dark"] .status-card {
    background-color: var(--color-bg-primary);
    border-color: var(--color-border-light);
}

[data-theme="dark"] .feature-list,
[data-theme="dark"] .info-list {
    background-color: rgba(255, 255, 255, 0.02);
    border-color: var(--color-border-light);
}

/* ========================================
   RESPONSIVE
   ======================================== */

@media (max-width: 768px) {
    .status-card {
        padding: var(--spacing-xl) var(--spacing-md);
    }
    
    .status-title {
        font-size: var(--font-size-xl);
    }
    
    .guide-cover {
        width: 140px;
        height: 180px;
    }
    
    .dont-panic {
        font-size: var(--font-size-xl);
    }
    
    .maintenance-title {
        font-size: var(--font-size-2xl);
    }
    
    .maintenance-message {
        font-size: var(--font-size-base);
    }
}
/**
 * Legal Pages Styles
 * Privacy Policy, Terms of Service
 * Following industrial/brutalist design
 */

/* ========================================
   LEGAL PAGE LAYOUT
   ======================================== */

.legal-page {
    min-height: 100vh;
    padding: var(--spacing-xl) var(--spacing-md);
    background-color: var(--color-bg-primary);
    position: relative;
}

.legal-page::before {
    content: '';
    position: fixed;
    inset: 0;
    background:
        radial-gradient(ellipse 80% 50% at 50% -20%, rgba(0, 212, 255, 0.05), transparent),
        radial-gradient(ellipse 60% 40% at 100% 100%, rgba(0, 255, 128, 0.04), transparent);
    pointer-events: none;
    z-index: 0;
}

.legal-container {
    position: relative;
    z-index: 10;
    max-width: var(--container-lg);
    margin: 0 auto;
}

/* ========================================
   LEGAL CARD
   ======================================== */

.legal-card {
    background-color: var(--color-bg-secondary);
    border: var(--border-width-thin) solid var(--color-border-medium);
    border-radius: var(--radius-md);
    padding: var(--spacing-xl) var(--spacing-xl);
    box-shadow: var(--shadow-xl);
}

@media (max-width: 768px) {
    .legal-card {
        padding: var(--spacing-lg) var(--spacing-md);
    }
}

/* ========================================
   LEGAL HEADER
   ======================================== */

.legal-header {
    text-align: center;
    margin-bottom: var(--spacing-xl);
    padding-bottom: var(--spacing-lg);
    border-bottom: var(--border-width-thin) solid var(--color-border-light);
}

.legal-title {
    font-family: var(--font-display);
    font-size: calc(var(--font-size-4xl) * 0.9);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-tight);
    line-height: var(--line-height-tight);
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-sm);
}

@media (max-width: 768px) {
    .legal-title {
        font-size: calc(var(--font-size-3xl) * 0.9);
    }
}

.legal-last-updated {
    font-family: var(--font-mono);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
}

/* ========================================
   LEGAL CONTENT
   ======================================== */

.legal-content {
    color: var(--color-text-primary);
    line-height: var(--line-height-relaxed);
}

.legal-content p {
    margin-bottom: var(--spacing-md);
    font-size: var(--font-size-base);
}

.legal-content h2 {
    font-family: var(--font-display);
    font-size: calc(var(--font-size-2xl) * 0.9);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-tight);
    line-height: var(--line-height-tight);
    color: var(--color-text-primary);
    margin-top: var(--spacing-xl);
    margin-bottom: var(--spacing-md);
    padding-top: var(--spacing-lg);
    border-top: var(--border-width-thin) solid var(--color-border-light);
}

.legal-content h2:first-of-type {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.legal-content h3 {
    font-family: var(--font-display);
    font-size: calc(var(--font-size-xl) * 0.9);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-tight);
    line-height: var(--line-height-tight);
    color: var(--color-text-primary);
    margin-top: var(--spacing-lg);
    margin-bottom: var(--spacing-sm);
}

.legal-content ul,
.legal-content ol {
    margin-left: var(--spacing-lg);
    margin-bottom: var(--spacing-md);
    padding-left: var(--spacing-sm);
}

.legal-content li {
    margin-bottom: var(--spacing-xs);
    font-size: var(--font-size-base);
    line-height: var(--line-height-relaxed);
}

.legal-content li ul,
.legal-content li ol {
    margin-top: var(--spacing-xs);
    margin-bottom: var(--spacing-xs);
}

.legal-content strong {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

.legal-content a {
    color: var(--color-text-primary);
    text-decoration: underline;
    text-decoration-color: var(--color-text-secondary);
    transition: text-decoration-color var(--duration-fast) var(--ease-out);
}

.legal-content a:hover {
    text-decoration-color: var(--color-text-primary);
}

/* ========================================
   LEGAL FOOTER
   ======================================== */

.legal-footer {
    margin-top: var(--spacing-xl);
    padding-top: var(--spacing-lg);
    border-top: var(--border-width-thin) solid var(--color-border-light);
    text-align: center;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

/* ========================================
   BACK BUTTON
   ======================================== */

.legal-back-button {
    position: fixed;
    top: var(--spacing-md);
    right: var(--spacing-md);
    z-index: var(--z-index-fixed);
}

@media (max-width: 768px) {
    .legal-back-button {
        top: var(--spacing-sm);
        right: var(--spacing-sm);
    }
}

/* ========================================
   DARK THEME
   ======================================== */

[data-theme="dark"] .legal-page::before {
    background:
        radial-gradient(ellipse 80% 50% at 50% -20%, rgba(0, 212, 255, 0.08), transparent),
        radial-gradient(ellipse 60% 40% at 100% 100%, rgba(0, 255, 128, 0.06), transparent);
}

[data-theme="dark"] .legal-content a {
    color: var(--color-accent-industrial);
    text-decoration-color: var(--color-accent-industrial);
}

[data-theme="dark"] .legal-content a:hover {
    color: var(--color-accent-industrial);
    text-decoration-color: var(--color-accent-industrial);
}
/**
 * SEO Template Page Styles
 * Inherits main page structure, adds software-specific styling
 */

/* ========================================
   SEO HERO MODIFICATIONS
   ======================================== */

.seo-software-for,
.seo-software-name {
    display: inline;
    font-family: var(--font-display);
    font-size: clamp(calc(2.5rem * 0.9), calc(6vw * 0.9), calc(4.5rem * 0.9)); /* Match hero-title size */
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-tight);
    color: var(--color-text-primary);
    line-height: var(--line-height-tight);
}

.seo-software-for {
    margin-right: 0.15em;
}

.seo-software-name {
    text-decoration: underline;
    text-decoration-thickness: var(--border-width-medium);
    text-underline-offset: 0.2em;
}

/* ========================================
   SEO SOFTWARE-SPECIFIC FEATURE SECTION
   ======================================== */

.seo-software-feature {
    background-color: var(--color-bg-primary);
}

/* Ensure feature-title in SEO section follows guidelines */
.seo-software-feature .feature-title {
    color: var(--color-text-primary);
}

/* Red color for software name in TARGET section */
.seo-software-name-red {
    color: var(--color-error);
}

.seo-feature-list {
    list-style: disc;
    padding-left: 1.2em; /* Align bullets with header text */
    margin: var(--spacing-md) 0 0 0;
}

.seo-feature-list li {
    font-family: var(--font-mono);
    font-size: var(--font-size-base);
    color: var(--color-text-secondary); /* Body text should use secondary color */
    line-height: var(--line-height-relaxed);
    margin-bottom: var(--spacing-sm);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-normal);
}

/* ========================================
   SEO FAQ SECTION
   ======================================== */

.feature-section.seo-faq-section {
    background-color: var(--color-bg-secondary);
    padding: var(--spacing-lg) 0;
}

.seo-faq-section .container {
    max-width: 900px;
    margin: 0 auto;
}

.seo-faq-section .feature-grid {
    grid-template-columns: 1fr;
}

.seo-faq-header {
    text-align: center;
    margin-bottom: var(--spacing-sm);
}

.seo-faq-title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-tight);
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-sm);
}

.seo-faq-subtitle {
    font-family: var(--font-mono);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
}

/* Category accordion styling for FAQ */
.seo-faq-categories {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

/* Software name highlight in FAQ */
.seo-faq-software-name {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

/* ========================================
   RESPONSIVE
   ======================================== */

@media (max-width: 768px) {
    .seo-software-for,
    .seo-software-name {
        font-size: clamp(calc(2.5rem * 0.9), calc(6vw * 0.9), calc(4.5rem * 0.9)); /* Keep same size as hero-title */
    }
    
    .seo-faq-title {
        font-size: clamp(1.5rem, 5vw, 2rem);
    }
}
/**
 * Authentication Pages Styles
 * Sign in, verify email, reset password, device authorization
 * Following dbrand industrial/brutalist design
 */

/* ========================================
   AUTH PAGE LAYOUT
   ======================================== */

.auth-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-md);
    background-color: var(--color-bg-primary);
    position: relative;
}

.auth-container {
    position: relative;
    z-index: 10;
    max-width: 440px;
    width: 100%;
}

.auth-card {
    background-color: var(--color-bg-secondary);
    border: var(--border-width-medium) solid var(--color-border-medium);
    border-radius: var(--radius-md);
    padding: var(--spacing-md) var(--spacing-lg);
    box-shadow: var(--shadow-xl);
}

/* ========================================
   AUTH HEADER
   ======================================== */

.auth-header {
    text-align: center;
    margin-bottom: var(--spacing-md);
}

.auth-logo {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-tight);
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-xs);
}

.auth-subtitle {
    font-family: var(--font-mono);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-normal);
}

/* ========================================
   AUTH FORM
   ======================================== */

.auth-form {
    margin-bottom: var(--spacing-md);
}

.auth-form .form-group {
    margin-bottom: var(--spacing-sm);
}

.auth-form .form-label {
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-normal);
    margin-bottom: var(--spacing-xs);
}

/* Auth form inputs use global styles from css/components/forms.css */

/* ========================================
   AUTH MODE TOGGLE
   ======================================== */

.auth-mode-toggle-container {
    margin-bottom: var(--spacing-md);
}

.auth-mode-toggle {
    display: flex;
    width: 100%;
    background-color: var(--color-bg-primary);
    border: var(--border-width-thin) solid var(--color-border-medium);
    border-radius: var(--radius-sm);
    overflow: hidden;
    gap: 1px;
}

.auth-mode-toggle-btn {
    flex: 1;
    padding: var(--spacing-xs) var(--spacing-sm);
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-secondary);
    background-color: var(--color-bg-primary);
    border: none;
    cursor: pointer;
    transition: all var(--duration-fast) var(--ease-out);
    position: relative;
}

.auth-mode-toggle-btn.active {
    background-color: var(--color-bg-secondary);
    color: var(--color-text-primary);
    font-weight: var(--font-weight-semibold);
}

.auth-mode-toggle-btn:not(.active) {
    background-color: var(--color-bg-primary);
    color: var(--color-text-muted);
}

.auth-mode-toggle-btn:hover:not(.active) {
    background-color: var(--color-bg-hover);
    color: var(--color-text-secondary);
}

/* ========================================
   AUTH MESSAGES
   ======================================== */

.auth-message {
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-sm);
    margin-bottom: var(--spacing-sm);
    font-family: var(--font-primary);
    font-size: var(--font-size-xs);
    border-left: 3px solid;
}

.auth-message.success {
    background-color: var(--color-success-bg);
    border-left-color: var(--color-success);
    color: var(--color-success);
}

.auth-message.error {
    background-color: var(--color-error-bg);
    border-left-color: var(--color-error);
    color: var(--color-error);
}

.auth-message.info {
    background-color: var(--color-info-bg);
    border-left-color: var(--color-info);
    color: var(--color-info);
}

.auth-message.warning {
    background-color: var(--color-warning-bg);
    border-left-color: var(--color-warning);
    color: var(--color-warning);
}

.auth-message.warning a {
    color: var(--color-warning);
    text-decoration: underline;
    text-decoration-color: var(--color-warning);
}

.auth-message.warning a:hover {
    opacity: 0.8;
}

/* ========================================
   AUTH ACTIONS
   ======================================== */

.auth-actions {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    margin-top: var(--spacing-md);
}

.auth-actions .btn {
    width: 100%;
    justify-content: center;
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-sm);
}

.auth-link {
    text-align: center;
    margin-top: var(--spacing-sm);
}

.auth-link a {
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    text-decoration: underline;
    text-decoration-color: var(--color-text-muted);
    transition: text-decoration-color var(--duration-fast) var(--ease-out);
}

.auth-link a:hover {
    text-decoration-color: var(--color-text-primary);
}

[data-theme="dark"] .auth-link a {
    color: var(--color-accent-industrial);
    text-decoration-color: var(--color-accent-industrial);
}

[data-theme="dark"] .auth-link a:hover {
    color: var(--color-accent-industrial);
    text-decoration-color: var(--color-accent-industrial);
}

/* ========================================
   VERIFY EMAIL STATES
   ======================================== */

.verify-state {
    display: none;
    text-align: center;
}

.verify-state.active {
    display: block;
    animation: fadeIn 0.3s ease-out;
}

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

.verify-icon {
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
    margin: 0 auto var(--spacing-md);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-success), var(--color-success));
    color: var(--color-bg-primary);
    font-size: calc(var(--icon-size-lg) * 0.6);
    border: var(--border-width-medium) solid rgba(0, 0, 0, var(--border-opacity-light));
    box-shadow: 0 0 var(--glow-size-base) rgba(0, 212, 255, var(--glow-opacity-base));
    animation: scaleIn 0.5s ease-out, pulse-success 2s ease-in-out infinite;
}

.verify-icon.error {
    background: linear-gradient(135deg, var(--color-error), var(--color-error));
    box-shadow: 0 0 var(--glow-size-base) rgba(245, 0, 87, var(--glow-opacity-base));
    animation: scaleIn 0.5s ease-out, pulse-error 2s ease-in-out infinite;
}

.verify-icon.loading {
    background: linear-gradient(135deg, var(--color-info), var(--color-info));
    box-shadow: 0 0 var(--glow-size-base) rgba(0, 212, 255, var(--glow-opacity-base));
    animation: scaleIn 0.5s ease-out, spin 1s linear infinite;
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes pulse-success {
    0%, 100% {
        box-shadow: 0 0 var(--glow-size-base) rgba(0, 212, 255, var(--glow-opacity-base));
    }
    50% {
        box-shadow: 0 0 var(--glow-size-medium) rgba(0, 212, 255, var(--glow-opacity-medium)), 0 0 var(--glow-size-large) rgba(0, 212, 255, var(--glow-opacity-light));
    }
}

@keyframes pulse-error {
    0%, 100% {
        box-shadow: 0 0 var(--glow-size-base) rgba(245, 0, 87, var(--glow-opacity-base));
    }
    50% {
        box-shadow: 0 0 var(--glow-size-medium) rgba(245, 0, 87, var(--glow-opacity-medium)), 0 0 var(--glow-size-large) rgba(245, 0, 87, var(--glow-opacity-light));
    }
}

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

.verify-spinner {
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
    margin: 0 auto var(--spacing-md);
    border: 3px solid var(--color-border-light);
    border-top-color: var(--color-info);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.verify-state h1 {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: calc(var(--font-size-2xl) * 0.9);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-tight);
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-sm);
}

.verify-state p {
    font-family: var(--font-primary);
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    line-height: var(--line-height-relaxed);
    margin-bottom: var(--spacing-md);
}

/* ========================================
   RESPONSIVE
   ======================================== */

/* Utility class for hiding elements */
.d-none {
    display: none !important;
}

/* Modal styles for 2FA (auth pages only) */
.auth-page .modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: var(--z-index-modal);
    align-items: center;
    justify-content: center;
}

.auth-page .modal-content {
    background-color: var(--color-bg-secondary);
    border: var(--border-width-medium) solid var(--color-border-medium);
    border-radius: var(--radius-md);
    padding: var(--spacing-xl);
    box-shadow: var(--shadow-xl);
    max-width: 500px;
    width: 90%;
}

.auth-page .modal-content h2 {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: calc(var(--font-size-xl) * 0.9);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-tight);
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-md);
}

.auth-page .modal-content p {
    font-family: var(--font-primary);
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-lg);
}

@media (max-width: 768px) {
    .auth-card {
        padding: var(--spacing-lg);
    }
    
    .auth-logo {
        font-size: var(--font-size-xl);
    }
}
/**
 * Settings Page Styles
 * Account settings and device management
 * Following dbrand industrial/brutalist design
 */

/* ========================================
   SETTINGS PAGE LAYOUT
   ======================================== */

.settings-page {
    min-height: 100vh;
    padding: 6rem 1rem 2rem; /* Header space + slim padding */
    background-color: var(--color-bg-primary);
}

.settings-container {
    max-width: var(--container-lg);
    margin: 0 auto;
}

.settings-title {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: calc(var(--font-size-3xl) * 0.9);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-tight);
    color: var(--color-text-primary);
    margin-bottom: 1.5rem;
    text-align: center;
}

/* ========================================
   SETTINGS CARDS
   ======================================== */

.settings-card {
    background-color: var(--color-bg-secondary);
    border: none;
    border-radius: var(--radius-md);
    margin-bottom: 1rem;
    box-shadow: var(--shadow-xl);
}

.settings-card-header {
    padding: 0.75rem 1rem;
    border-bottom: var(--border-width-thin) solid var(--color-border-medium);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.settings-card-header h2 {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-tight);
    color: var(--color-text-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
}

.settings-card-header h2 i {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

/* Admin Badge - subtle but professional indicator */
.admin-badge {
    display: inline-flex;
    align-items: center;
    margin-left: 0.5rem;
    padding: 0.15rem 0.5rem;
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-error);
    background: rgba(var(--color-error-rgb), 0.1);
    border: 1px solid rgba(var(--color-error-rgb), 0.3);
    border-radius: var(--radius-sm);
}

.settings-card-header .btn {
    padding: 0.25rem 0.5rem;
    font-size: var(--font-size-xs);
}

.settings-card-body {
    padding: 1rem;
}

.settings-description {
    font-family: var(--font-primary);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: var(--line-height-relaxed);
    margin-bottom: 0.75rem;
}

/* ========================================
   FORM ELEMENTS
   ======================================== */

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.form-label {
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    color: var(--color-text-secondary);
}

/* Form inputs use global styles from css/components/forms.css */

.form-group .btn {
    width: fit-content;
    margin-top: 0.25rem;
}

.form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* ========================================
   BILLING & SUBSCRIPTION
   ======================================== */

.billing-overview {
    margin-bottom: 0.75rem;
}

.billing-status {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem;
    background-color: var(--color-bg-primary);
    border: var(--border-width-thin) solid var(--color-border-medium);
    border-radius: var(--radius-sm);
    margin-bottom: 0.75rem;
}

.billing-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.billing-label {
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-normal);
    color: var(--color-text-secondary);
}

.billing-value {
    font-family: var(--font-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

.status-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.5rem;
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    border-radius: var(--radius-sm);
}

.status-badge.status-active {
    background-color: var(--color-emerald);
    color: white;
}

.status-badge.status-inactive {
    background-color: var(--color-bg-tertiary);
    color: var(--color-text-secondary);
    border: var(--border-width-thin) solid var(--color-border-medium);
}

.status-badge.status-warning {
    background-color: var(--color-warning);
    color: white;
}

.status-badge.status-danger {
    background-color: var(--color-error);
    color: white;
}

.plan-details {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
}

.plan-stat {
    text-align: center;
    padding: 0.5rem;
    background-color: var(--color-bg-primary);
    border: var(--border-width-thin) solid var(--color-border-medium);
    border-radius: var(--radius-sm);
}

.plan-stat-value {
    display: block;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin-bottom: 0.125rem;
}

.plan-stat-label {
    font-family: var(--font-mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-normal);
    color: var(--color-text-muted);
}

/* ========================================
   USAGE STATISTICS
   ======================================== */

.usage-container {
    padding: 0.75rem;
    background-color: var(--color-bg-primary);
    border: var(--border-width-thin) solid var(--color-border-medium);
    border-radius: var(--radius-sm);
    margin-bottom: 0.75rem;
}

.usage-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.375rem;
}

.usage-label {
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-normal);
    color: var(--color-text-secondary);
}

.usage-text {
    font-family: var(--font-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

.usage-bar {
    height: 8px;
    background-color: var(--color-bg-tertiary);
    border-radius: var(--radius-full);
    overflow: hidden;
    margin-bottom: 0.375rem;
}

.usage-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--color-emerald), var(--color-success));
    border-radius: var(--radius-full);
    transition: width var(--duration-normal) var(--ease-out);
}

.usage-reset {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--color-text-muted);
}

.usage-chart-container {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-border-light);
    height: 140px;
}

.usage-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
}

.usage-stat {
    text-align: center;
    padding: 0.5rem;
    background-color: var(--color-bg-primary);
    border: var(--border-width-thin) solid var(--color-border-medium);
    border-radius: var(--radius-sm);
}

.usage-stat-value {
    display: block;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin-bottom: 0.125rem;
}

.usage-stat-label {
    font-family: var(--font-mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-normal);
    color: var(--color-text-muted);
}

/* ========================================
   API KEYS LIST
   ======================================== */

.api-keys-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.api-key-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    background-color: var(--color-bg-primary);
    border: var(--border-width-thin) solid var(--color-border-medium);
    border-radius: var(--radius-sm);
    transition: all var(--duration-fast) var(--ease-out);
}

.api-key-item:hover {
    border-color: var(--color-border-heavy);
    box-shadow: var(--shadow-hover);
}

.api-key-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-bg-secondary);
    border: var(--border-width-thin) solid var(--color-border-medium);
    border-radius: var(--radius-sm);
    flex-shrink: 0;
}

.api-key-icon i {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.api-key-info {
    flex: 1;
    min-width: 0;
}

.api-key-name {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin-bottom: 0.125rem;
}

.api-key-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-normal);
}

.api-key-meta span {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.api-key-meta i {
    font-size: 10px;
}

/* ========================================
   SECURITY & 2FA
   ======================================== */

.security-status {
    margin-bottom: 0.75rem;
}

.security-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    background-color: var(--color-bg-primary);
    border: var(--border-width-thin) solid var(--color-border-medium);
    border-radius: var(--radius-sm);
}

.security-info {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.security-label {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

.security-description {
    font-family: var(--font-primary);
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

.security-notice {
    display: flex;
    gap: 0.5rem;
    padding: 0.5rem;
    background-color: var(--color-info-bg);
    border: var(--border-width-thin) solid rgba(var(--color-info-rgb), 0.3);
    border-radius: var(--radius-sm);
    margin-bottom: 0.75rem;
}

.security-notice i {
    color: var(--color-info);
    font-size: var(--font-size-sm);
    flex-shrink: 0;
}

.security-notice p {
    font-family: var(--font-primary);
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    line-height: var(--line-height-relaxed);
    margin: 0;
}

/* ========================================
   DEVICES LIST
   ======================================== */

.devices-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.device-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    background-color: var(--color-bg-primary);
    border: var(--border-width-thin) solid var(--color-border-medium);
    border-radius: var(--radius-sm);
    transition: all var(--duration-fast) var(--ease-out);
}

.device-item:hover {
    border-color: var(--color-border-heavy);
    box-shadow: var(--shadow-hover);
}

.device-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-bg-secondary);
    border: var(--border-width-thin) solid var(--color-border-medium);
    border-radius: var(--radius-sm);
    flex-shrink: 0;
}

.device-icon i {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.device-info {
    flex: 1;
    min-width: 0;
}

.device-name {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin-bottom: 0.125rem;
}

.device-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-normal);
}

.device-meta span {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.device-meta i {
    font-size: 10px;
}

/* ========================================
   DANGER ZONE
   ======================================== */

/* Account actions section - neutral styling (danger colors removed from site) */
.settings-card.danger-zone {
    border-color: var(--color-border-medium);
}

.settings-card.danger-zone .settings-card-header {
    border-bottom-color: var(--color-border-light);
}

.settings-card.danger-zone .settings-card-header h2 {
    color: var(--color-text-primary);
}

.settings-card.danger-zone .settings-card-header h2 i {
    color: var(--color-text-secondary);
}

.danger-description {
    font-family: var(--font-primary);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: var(--line-height-relaxed);
    margin-bottom: 0.75rem;
}

.danger-actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.danger-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    background-color: var(--color-bg-tertiary);
    border: var(--border-width-thin) solid var(--color-border-light);
    border-radius: var(--radius-sm);
}

.danger-info {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.danger-title {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

.danger-text {
    font-family: var(--font-primary);
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

/* Button variants - use CSS custom properties */
.btn-success {
    --btn-bg: var(--color-emerald);
    --btn-color: white;
    --btn-bg-hover: var(--color-success);
    --btn-color-hover: white;
    border-color: var(--color-emerald);
}

.btn-success:hover {
    border-color: var(--color-success);
}

/* Note: .btn-danger is defined in buttons.css */

/* ========================================
   RESPONSIVE
   ======================================== */

@media (max-width: 768px) {
    .settings-page {
        padding: 5rem 0.75rem 1.5rem;
    }

    .form-grid {
        grid-template-columns: 1fr;
    }

    .settings-card-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .plan-details,
    .usage-stats {
        grid-template-columns: 1fr;
    }

    .billing-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }

    .security-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .danger-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .api-key-item,
    .device-item {
        flex-direction: column;
        align-items: flex-start;
    }

    .api-key-meta,
    .device-meta {
        flex-direction: column;
        gap: 0.25rem;
    }

    .form-actions {
        flex-direction: column;
    }

    .form-actions .btn {
        width: 100%;
    }
}
/**
 * History Page Styles
 * Render history grid and viewer
 */

/* ========================================
   PAGE LAYOUT
   ======================================== */

.history-page {
    min-height: 100vh;
    padding: 6rem 1rem 2rem;
    background-color: var(--color-bg-primary);
}

.history-title {
    font-family: var(--font-header);
    font-size: calc(var(--font-size-3xl) * 0.9);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: -0.03em;
    color: var(--color-text-primary);
    margin-bottom: 1rem;
    text-align: center;
}

/* ========================================
   DELETION WARNING
   ======================================== */

.history-deletion-warning {
    display: none;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    background: rgba(245, 158, 11, 0.15);
    border: var(--border-width-thin) solid var(--color-warning);
    border-radius: var(--radius-md);
    padding: var(--spacing-sm) var(--spacing-md);
    margin-bottom: var(--spacing-md);
    color: var(--color-warning);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

.history-deletion-warning.visible {
    display: flex;
}

.history-deletion-warning i {
    flex-shrink: 0;
}

.history-deletion-warning strong {
    font-weight: var(--font-weight-bold);
}

/* ========================================
   FILTER TABS
   ======================================== */

.filter-tabs-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding-bottom: 0;
    margin-bottom: 1rem;
    border-bottom: var(--border-width-thin) solid var(--color-border-light);
    gap: 1rem;
}

.filter-tabs-container .filter-tabs {
    display: flex;
    gap: 0.5rem;
    padding-bottom: 0;
    border-bottom: none;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    flex: 1;
    align-items: flex-end;
    margin-top: 0;
    margin-bottom: 0;
}

/* Download All button - extends btn-primary with sizing */
#downloadAllBtn,
.btn-download-all {
    /* Inherit btn-primary styles - defined in buttons.css */
    padding: var(--spacing-xs) var(--spacing-sm);
    min-height: 40px;
    height: 40px;
    font-size: var(--font-size-sm);
    white-space: nowrap;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    margin-bottom: 0;
    /* Primary button styling - use site standard variables */
    background-color: var(--color-brand-primary);
    color: var(--color-bg-secondary);
    border: 1px solid var(--color-brand-primary);
    border-radius: var(--radius-md);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: all var(--duration-fast) ease;
}

#downloadAllBtn:hover,
.btn-download-all:hover {
    background-color: var(--color-brand-secondary);
    border-color: var(--color-brand-secondary);
    color: var(--color-bg-secondary);
    box-shadow: var(--shadow-lg);
}

#downloadAllBtn:disabled,
.btn-download-all:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Dark theme - match btn-primary dark theme (inverted colors) */
[data-theme="dark"] #downloadAllBtn,
[data-theme="dark"] .btn-download-all {
    background-color: var(--color-bg-secondary);
    color: var(--color-text-primary);
    border-color: var(--color-bg-secondary);
}

[data-theme="dark"] #downloadAllBtn:hover,
[data-theme="dark"] .btn-download-all:hover {
    background-color: var(--color-bg-primary);
    border-color: var(--color-bg-primary);
    color: var(--color-text-primary);
    box-shadow: var(--shadow-lg);
}

.filter-tabs::-webkit-scrollbar {
    display: none;
}

.filter-tab-btn {
    background: transparent;
    border: none;
    color: var(--color-text-secondary);
    padding: 0.5rem 1rem;
    min-height: 40px;
    border-radius: var(--radius-md);
    font-family: var(--font-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all var(--duration-fast) ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    position: relative;
    white-space: nowrap;
}

.filter-tab-btn::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 50%;
    transform: translateX(-50%) scaleX(0);
    width: 70%;
    height: 2px;
    background-color: var(--color-text-primary); /* Black in light, white in dark */
    border-radius: 0;
    transition: transform var(--duration-base) var(--ease-out);
}

.filter-tab-btn:hover {
    color: var(--color-text-primary);
    background-color: var(--color-bg-surface);
}

.filter-tab-btn.active {
    color: var(--color-text-primary);
    background-color: var(--color-bg-surface);
}

.filter-tab-btn.active::after {
    transform: translateX(-50%) scaleX(1);
}

.filter-tab-btn i {
    font-size: 0.875rem;
}

/* ========================================
   HISTORY GRID
   ======================================== */

.history-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}

/* ========================================
   HISTORY CARD - Simple Border Style
   ======================================== */

.history-card {
    position: relative;
    border: none;
    border-radius: var(--radius-md);
    overflow: hidden;
    aspect-ratio: 1 / 1;
    background-color: var(--color-bg-secondary);
    transition: box-shadow var(--duration-fast) var(--ease-out);
}

.history-card:hover {
    cursor: pointer;
    box-shadow: var(--shadow-hover);
}

/* Solid black background behind buttons - thinner */
.history-card::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 42px;
    background: #000;
    pointer-events: none;
    z-index: 2;
    opacity: 0;
    transition: opacity var(--duration-fast) ease;
}

/* Dark mode - keep same as light mode (black background) */

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

/* Video card - same hover as regular cards */
.history-card.video-card {
    /* No special border - same as regular cards */
}

.history-card.video-card:hover {
    /* Same hover as regular cards */
    box-shadow: var(--shadow-hover);
}

/* Image wrapper */
.image-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: var(--color-bg-primary);
}

.image-wrapper img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: pointer;
}

/* Video badge - NOT theme-aware, always black bg white text */
.video-badge {
    position: absolute;
    top: 0;
    left: 0;
    background: #000000;
    color: #ffffff;
    padding: 4px 10px;
    border-radius: 0 0 var(--radius-sm) 0;
    font-family: var(--font-primary);
    font-size: 11px;
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 5px;
}

.video-badge i {
    font-size: 11px;
    color: #ffffff;
}

/* Giant play button for video tiles */
.video-play-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 64px;
    height: 64px;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    pointer-events: none;
    transition: all var(--duration-fast) ease;
}

.video-play-overlay i {
    font-size: 28px;
    color: #fff;
    margin-left: 4px; /* Optical centering for play icon */
}

.history-card.video-card:hover .video-play-overlay {
    background: rgba(0, 0, 0, 0.85);
    transform: translate(-50%, -50%) scale(1.1);
}

/* Top info container - date and deletion note - very top left, double-lined, hover only */
.history-top-info {
    position: absolute;
    top: 0;
    left: 0;
    background: #000;
    padding: 6px 10px;
    border-radius: var(--radius-md);
    z-index: 15;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--duration-fast) ease;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.history-card:hover .history-top-info {
    opacity: 1;
}

.history-date {
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    line-height: 1.2;
    white-space: nowrap;
}

.history-deletion-note {
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    line-height: 1.2;
    white-space: nowrap;
}

/* Dark mode - keep same as light mode (black background, white text) */

/* Action buttons - overlay at bottom - thinner bar */
.history-actions {
    display: flex;
    flex-wrap: nowrap;
    gap: 1px;
    justify-content: space-evenly; /* Distribute buttons evenly */
    align-items: center;
    position: absolute;
    bottom: 0;
    left: 2px;
    right: 2px;
    height: 42px;
    z-index: 10;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--duration-fast) ease, visibility var(--duration-fast) ease;
    overflow: hidden;
}

.history-card:hover .history-actions {
    opacity: 1;
    visibility: visible;
}

/* Action button style - defined in icon-buttons.css (shared with render page) */

/* ========================================
   LOADING STATE (SKELETON)
   ======================================== */

.history-loading {
    padding: 1rem 0;
}

.skeleton-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}

.skeleton-card {
    background-color: var(--color-bg-secondary);
    border: var(--border-width-thin) solid var(--color-border-light);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.skeleton {
    background: linear-gradient(
        90deg,
        var(--color-bg-surface) 25%,
        var(--color-bg-secondary) 50%,
        var(--color-bg-surface) 75%
    );
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
}

@keyframes skeleton-loading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

.skeleton-image {
    aspect-ratio: 1 / 1;
}

.skeleton-content {
    padding: 0.75rem;
}

.skeleton-text {
    height: 1rem;
    border-radius: var(--radius-md);
    margin-bottom: 0.5rem;
}

.skeleton-text-sm {
    height: 0.75rem;
    width: 60%;
    border-radius: var(--radius-md);
}

/* ========================================
   EMPTY STATE
   ======================================== */

.history-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 4rem 2rem;
    min-height: 50vh;
}

.empty-icon {
    font-size: 4rem;
    color: var(--color-text-muted);
    margin-bottom: 1.5rem;
}

.empty-title {
    font-family: var(--font-header);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-primary);
    margin-bottom: 0.5rem;
}

.empty-text {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    margin-bottom: 1.5rem;
}

/* ========================================
   IMAGE VIEWER MODAL
   Base styles in components/modals.css
   ======================================== */

/* Image viewer modal - blur backdrop, above theme toggle */
#imageViewerModal.modal-overlay {
    z-index: calc(var(--z-index-overlay) + 1);
}

#imageViewerModal .modal-backdrop {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* Show viewer-actions bar for images (same as video-actions) */
#imageViewerModal .viewer-actions {
    display: flex;
}

/* Legacy close button - kept for compatibility */
.viewer-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background-color: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--color-text-inverse);
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    transition: all var(--duration-fast) ease;
}

.viewer-close:hover {
    background-color: rgba(0, 0, 0, 0.7);
    border-color: rgba(255, 255, 255, 0.4);
}

.viewer-close i {
    font-size: 1.25rem;
}

/* ========================================
   VIDEO PLAYER MODAL
   Base styles in components/modals.css
   ======================================== */

/* Video player modal - blur backdrop, above theme toggle */
#videoPlayerModal.modal-overlay {
    z-index: calc(var(--z-index-overlay) + 1);
}

#videoPlayerModal .modal-backdrop {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.video-player-container {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: calc(var(--z-index-overlay) + 1);
    width: calc(100% - 4rem);
    max-width: 90vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem;
    pointer-events: none;
}

.video-player-container video,
.video-actions,
.video-actions .btn,
.video-player-container .viewer-nav {
    pointer-events: auto;
}

.video-player-container video {
    display: block;
    max-width: 100%;
    max-height: calc(100vh - 150px);
    border-radius: var(--radius-md);
    background: var(--color-bg-primary);
}

/* Toast notification styles in components/toast.css */

/* Dark theme skeleton styles in components/loading.css */

/* ========================================
   RESPONSIVE
   ======================================== */

@media (max-width: 1024px) {
    .history-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }
}

@media (max-width: 768px) {
    .history-page {
        padding: 5rem 1rem 1.5rem;
    }

    .history-title {
        font-size: calc(var(--font-size-2xl) * 0.9);
        margin-bottom: 0.75rem;
    }

    .filter-tabs-container {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .filter-tabs {
        margin-bottom: 0;
        width: 100%;
    }

    #downloadAllBtn {
        align-self: flex-end;
        padding: 0.5rem 1rem;
        min-height: 40px;
        font-size: var(--font-size-sm);
    }

    .history-grid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: 0.75rem;
    }

    .skeleton-grid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: 0.75rem;
    }

    /* Compact cards on mobile */
    .history-card {
        border-radius: var(--radius-md);
    }

    /* Larger touch targets for action buttons */
    .history-actions {
        gap: 0.375rem;
        bottom: 6px;
        left: 6px;
        right: 6px;
    }

    /* .history-action-btn responsive styles moved to icon-buttons.css */

    /* viewer-nav and viewer-actions responsive styles in components/modals.css */
}

@media (max-width: 480px) {
    .history-page {
        padding: 4.5rem 0.75rem 1rem;
    }

    .history-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }

    .skeleton-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }

    .filter-tab-btn {
        padding: 0.375rem 0.75rem;
        font-size: var(--font-size-xs);
    }

    .video-player-container {
        padding: 1rem;
    }

    /* viewer/video responsive styles in components/modals.css */
}

/* ========================================
   TILE INLINE VIDEO
   ======================================== */

.tile-inline-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
}

.video-thumbnail {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ========================================
   RENDER INSPECTOR
   Technical precision theme with slide-up panels
   ======================================== */

/* Inspector grid - same as history page */
.inspector-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}

/* Inspector card - overlay expands outside */
.inspector-card {
    position: relative;
    border: none;
    border-radius: var(--radius-md);
    overflow: visible;
    background-color: var(--color-bg-secondary);
    transition: box-shadow var(--duration-fast) var(--ease-out),
                z-index 0s;
}

.inspector-card:hover,
.inspector-card.expanded {
    box-shadow: var(--shadow-hover);
    z-index: 100;
}

/* Hide overflow on image section */
.inspector-card .image-section {
    border-radius: var(--radius-md);
    overflow: hidden;
}

/* Image section - square like history page */
.inspector-card .image-section {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    background-color: var(--color-bg-primary);
    cursor: pointer;
}

.inspector-card .image-section img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Video overlay */
.inspector-card .video-play-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 56px;
    height: 56px;
    background: rgba(0, 0, 0, 0.75);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    pointer-events: none;
    transition: all var(--duration-fast) ease;
}

.inspector-card .video-play-overlay i {
    font-size: 22px;
    color: #fff;
    margin-left: 3px;
}

.inspector-card:hover .video-play-overlay {
    background: rgba(0, 0, 0, 0.9);
    transform: translate(-50%, -50%) scale(1.1);
}

/* Top badges row - flush to corners, only show on hover */
.inspector-badges {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 0;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    pointer-events: none;
    z-index: 10;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--duration-fast) ease, visibility var(--duration-fast) ease;
}

.inspector-card:hover .inspector-badges,
.inspector-card.expanded .inspector-badges {
    opacity: 1;
    visibility: visible;
}

/* Type badge - NOT theme aware, always black bg white text */
.inspector-type-badge {
    background: #000;
    color: #fff;
    padding: 4px 10px;
    border-radius: 0 0 var(--radius-sm) 0;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    gap: 5px;
}

.inspector-type-badge i {
    color: #fff;
}

/* Date badge - NOT theme aware, always black bg white text */
.inspector-date-badge {
    background: #000;
    color: #fff;
    padding: 4px 10px;
    border-radius: 0 0 0 var(--radius-sm);
    font-size: 11px;
    font-weight: 600;
    margin-left: auto;
}

/* Detail panel - theme aware bg, slides down from behind the action bar */
.inspector-details {
    position: absolute;
    top: calc(100% + 42px);
    left: 0;
    right: 0;
    padding: 14px 16px;
    background: var(--color-bg-secondary);
    border: none;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    box-shadow: -4px 0 12px rgba(0, 0, 0, 0.25),
                4px 0 12px rgba(0, 0, 0, 0.25),
                0 8px 16px rgba(0, 0, 0, 0.3);
    z-index: 99;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.6s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.3s ease;
}

.inspector-card:hover .inspector-details,
.inspector-card.expanded .inspector-details {
    max-height: 500px;
    opacity: 1;
}

/* When expanded, adjust border radius for cohesive look */
.inspector-card:hover .inspector-actions,
.inspector-card.expanded .inspector-actions {
    border-radius: 0;
}

.inspector-card:hover .image-section,
.inspector-card.expanded .image-section {
    border-radius: var(--radius-md) var(--radius-md) 0 0;
}

/* Settings grid */
.inspector-settings-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px 16px;
}

.inspector-setting {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Settings text - theme aware */
.inspector-setting-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-muted);
}

.inspector-setting-value {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-primary);
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    user-select: text;
    cursor: text;
}

.inspector-setting-value.empty {
    color: var(--color-text-muted);
    font-style: italic;
}

/* Prompt section - full width */
.inspector-prompt-section {
    margin-top: 12px;
    padding-top: 12px;
    border-top: var(--border-width-thin) solid var(--color-border-light);
}

/* Prompt label - theme aware */
.inspector-prompt-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-muted);
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Copy button - theme aware */
.prompt-copy-btn {
    margin-left: auto;
    padding: 4px 8px;
    background: transparent;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-sm);
    color: var(--color-text-secondary);
    cursor: pointer;
    font-size: 12px;
    transition: all var(--duration-fast) ease;
}

.prompt-copy-btn:hover {
    border-color: var(--color-text-primary);
    color: var(--color-text-primary);
    background: var(--color-bg-surface);
}

.prompt-copy-btn.copied {
    border-color: var(--color-success);
    color: var(--color-success);
}

/* Prompt text - theme aware */
.inspector-prompt-text {
    font-size: 13px;
    line-height: 1.5;
    color: var(--color-text-primary);
    background: var(--color-bg-surface);
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    border: var(--border-width-thin) solid var(--color-border-light);
    user-select: text;
    cursor: text;
}

.inspector-prompt-text.empty {
    color: var(--color-text-muted);
    font-style: italic;
}

/* Action bar - NOT theme aware, always black bg with white buttons */
/* Action bar - matches render page .image-actions height */
.inspector-actions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: flex;
    flex-wrap: nowrap;
    gap: 1px;
    justify-content: space-evenly;
    align-items: center;
    height: 42px;
    padding: 0 2px;
    background: #000;
    border: none;
    border-radius: 0;
    z-index: 101;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all var(--duration-fast) ease;
    overflow: hidden;
}

.inspector-card:hover .inspector-actions,
.inspector-card.expanded .inspector-actions {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Action buttons - ensure they scale to fit */
.inspector-actions .history-action-btn {
    flex: 1 1 0;
    min-width: 0;
    max-width: 32px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    overflow: hidden;
}

.inspector-actions .history-action-btn i {
    font-size: clamp(11px, 1.5vw, 15px);
    color: #fff;
}

/* ========================================
   RE-RENDER OVERLAY
   Full tile overlay with options
   ======================================== */

.rerender-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 25;
    animation: fadeInOverlay 0.15s ease;
}

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

.rerender-overlay-close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-surface);
    border: none;
    border-radius: var(--radius-sm);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: background-color var(--duration-fast) ease;
}

.rerender-overlay-close:hover {
    background: var(--color-bg-surface-hover);
    color: var(--color-text-primary);
}

.rerender-overlay-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: calc(100% - 32px);
    max-width: 240px;
}

.rerender-overlay-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 16px 12px;
    background: #e8e8e8;
    border: 1px solid #e8e8e8;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background-color var(--duration-fast) ease, box-shadow var(--duration-fast) ease;
    text-align: center;
}

.rerender-overlay-option:hover {
    background: #d0d0d0;
    border-color: #d0d0d0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.rerender-overlay-option i {
    font-size: 24px;
    color: #1a1a1a;
    margin-bottom: 4px;
}

.rerender-option-title {
    font-size: 14px;
    font-weight: 600;
    color: #1a1a1a;
}

.rerender-option-desc {
    font-size: 11px;
    color: rgba(0, 0, 0, 0.6);
    line-height: 1.3;
}

/* ========================================
   TILE OVERFLOW MENU (3-dots) - History
   ======================================== */

.tile-overflow-menu {
    position: relative;
    display: flex;
    align-items: center;
}

.tile-overflow-dropdown {
    display: none;
    position: fixed;
    min-width: 160px;
    background: rgba(0, 0, 0, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-md);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    z-index: 100000;
    padding: 4px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.tile-overflow-dropdown.open {
    display: block;
    animation: fadeInOverlay 0.15s ease;
}

.tile-overflow-option {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    font-family: var(--font-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: rgba(255, 255, 255, 0.8);
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    text-align: left;
    transition: all var(--duration-fast) ease;
}

.tile-overflow-option i {
    font-size: 14px;
    width: 16px;
    text-align: center;
    color: #fff;
}

.tile-overflow-option:hover {
    background: var(--color-bg-surface-hover);
    color: var(--color-text-primary);
}

/* ========================================
   VIEWER MENU (Hamburger) - History
   ======================================== */

.viewer-menu-container {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 100;
    pointer-events: auto;
    display: block;
    visibility: visible;
    opacity: 1;
}

.viewer-menu-container .tile-overflow-menu {
    display: flex;
    visibility: visible;
}

.viewer-menu-trigger,
.viewer-menu-container .history-action-btn {
    width: 40px;
    height: 40px;
    max-width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-sm);
    color: #fff;
    cursor: pointer;
    transition: background-color var(--duration-fast) ease;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    visibility: visible;
    opacity: 1;
}

.viewer-menu-trigger:hover {
    background: rgba(0, 0, 0, 0.8);
    border-color: rgba(255, 255, 255, 0.4);
}

.viewer-menu-trigger i {
    font-size: 16px;
}

/* Viewer dropdown menu */
.viewer-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    min-width: 180px;
    background: rgba(0, 0, 0, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-md);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    padding: 6px 0;
    display: none;
    z-index: 100;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.viewer-dropdown.open {
    display: block;
    animation: fadeInOverlay var(--duration-fast) ease;
}

.viewer-dropdown .tile-overflow-option {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 16px;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.9);
    font-family: var(--font-primary);
    font-size: var(--font-size-sm);
    cursor: pointer;
    text-align: left;
    transition: background-color var(--duration-fast) ease;
}

.viewer-dropdown .tile-overflow-option:hover {
    background: rgba(255, 255, 255, 0.1);
}

.viewer-dropdown .tile-overflow-option i {
    width: 16px;
    text-align: center;
    font-size: 14px;
    opacity: 0.8;
}

.viewer-dropdown .tile-overflow-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
    margin: 6px 0;
}

.viewer-dropdown .tile-overflow-option-danger {
    color: var(--color-error);
}

.viewer-dropdown .tile-overflow-option-danger:hover {
    background: var(--color-error-bg);
}

/* ========================================
   VIEWER RE-RENDER DROPDOWN
   ======================================== */

.viewer-rerender-container {
    position: relative;
}

.viewer-rerender-dropdown {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 8px;
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    opacity: 0;
    visibility: hidden;
    transition: all 0.15s ease;
    min-width: 180px;
    overflow: hidden;
}

.viewer-rerender-dropdown.open {
    opacity: 1;
    visibility: visible;
}

.viewer-rerender-option {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 12px 16px;
    background: transparent;
    border: none;
    color: var(--color-text-primary);
    font-size: 14px;
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: left;
}

.viewer-rerender-option:hover {
    background: rgba(255, 255, 255, 0.08);
}

.viewer-rerender-option i {
    width: 16px;
    text-align: center;
    color: var(--color-text-secondary);
}

.viewer-rerender-option:first-child {
    border-bottom: 1px solid var(--color-border-light);
}

/* ========================================
   SELECTION MODE
   ======================================== */

.filter-tabs-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.selection-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Selection mode active state */
body.selection-mode .inspector-card {
    cursor: pointer;
}

body.selection-mode .inspector-card::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 8px;
    width: 24px;
    height: 24px;
    background: var(--color-bg-secondary);
    border: 2px solid var(--color-border-medium);
    border-radius: var(--radius-sm);
    z-index: 20;
    transition: all var(--duration-fast) ease;
}

body.selection-mode .inspector-card.selected::before {
    background: var(--color-accent-blue);
    border-color: var(--color-accent-blue);
}

body.selection-mode .inspector-card.selected::after {
    content: '\2713';
    position: absolute;
    top: 8px;
    left: 8px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    z-index: 21;
}

body.selection-mode .inspector-card:hover::before {
    border-color: var(--color-accent-blue);
}

/* Load more button fix - ensure it's above card overlays */
#loadMoreBtn {
    position: relative;
    z-index: 200;
    margin-top: 2rem;
}

/* Ensure inspector-details doesn't block load more button area */
.inspector-details {
    pointer-events: auto;
}

/* When not hovered, details should not capture pointer events */
.inspector-card:not(:hover):not(.expanded) .inspector-details {
    pointer-events: none;
}

/* Video no-thumbnail fallback */
.video-no-thumbnail {
    width: 100%;
    height: 100%;
    background: #1a1a1a;
    display: flex;
    align-items: center;
    justify-content: center;
}

.video-no-thumbnail i {
    font-size: 48px;
    color: #444;
}

/* GIF progress bar */
.progress {
    width: 100%;
    height: 8px;
    background: var(--color-bg-surface);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.progress-bar {
    height: 100%;
    background: var(--color-brand-primary);
    border-radius: var(--radius-sm);
    transition: width 0.3s ease;
}

/* ========================================
   REFERENCE OVERLAY ON INSPECTOR CARDS
   Reuses render page .reference-array-container classes
   Read-only display of reference images, prompts, masks
   ======================================== */

/* Show reference array on inspector card hover */
.inspector-card:hover .reference-array-container {
    pointer-events: auto;
    opacity: 1;
    transition: opacity 0.15s ease !important;
}

/* Read-only overrides for history context — pointer-events stay auto for tooltips */
.inspector-card .ref-type-trigger {
    cursor: default;
    pointer-events: auto;
}

.inspector-card .reference-row-prompt {
    cursor: default;
    pointer-events: auto;
}

.inspector-card .reference-row-prompt:focus {
    background: transparent;
}

.inspector-card .reference-row-add {
    cursor: default;
    pointer-events: auto;
}

.inspector-card .ref-mask {
    cursor: default !important;
    pointer-events: auto !important;
}

/* ========================================
   INSPECTOR RESPONSIVE
   ======================================== */

@media (max-width: 768px) {
    .inspector-grid {
        grid-template-columns: 1fr;
    }

    .inspector-settings-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px 12px;
    }

    .inspector-details {
        padding: 12px 14px;
    }
}

@media (max-width: 480px) {
    .inspector-settings-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* ========================================
   GIF PROGRESS MODAL
   ======================================== */

#gifProgressModal .modal-body {
    text-align: center;
}

#gifProgressModal #gifProgressStatus {
    margin-bottom: var(--spacing-md);
    color: var(--text-secondary);
}

#gifProgressModal .progress {
    margin-bottom: var(--spacing-md);
}

#gifProgressModal #gifProgressPercent {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

/**
 * Render Studio Page Styles
 * Following dbrand industrial/brutalist design
 * Influenced by History page patterns
 */

/* ========================================
   RENDER PAGE LAYOUT
   ======================================== */

.render-page {
    min-height: 100vh;
    padding: 6rem 1rem 0; /* Header space + no bottom padding */
    background-color: var(--color-bg-primary);
    /* CRITICAL: Allow sticky toolbar to be visible */
    overflow-x: visible;
    position: relative;
}

/* Ensure container inside render-page has no bottom padding */
.render-page .container {
    padding-bottom: 0;
    position: relative;
}

/* Title - matches history page exactly */
.render-title {
    font-family: var(--font-header);
    font-size: calc(var(--font-size-3xl) * 0.9);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: -0.03em;
    color: var(--color-text-primary);
    margin-bottom: 1rem;
    text-align: center;
}

/* Pop-out button - inline next to title, doesn't affect centering */
.render-title .popout-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    margin-left: 10px;
    margin-right: -34px; /* Offset so title text stays centered */
    vertical-align: middle;
    background: transparent;
    border: none;
    color: var(--color-text-tertiary);
    cursor: pointer;
    transition: color var(--duration-fast) ease;
}

.render-title .popout-btn:hover {
    color: var(--color-text-primary);
}

.render-title .popout-btn i {
    font-size: 14px;
}


@media (max-width: 768px) {
    .render-title {
        font-size: calc(var(--font-size-2xl) * 0.9);
        margin-bottom: 0.75rem;
    }
}

/* ========================================
   EMPTY STATE: HERO UPLOAD ZONE
   ======================================== */

.upload-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 50vh;
    padding: 3rem 2rem;
    text-align: center;
}

.upload-hero-content {
    max-width: 500px;
    width: 100%;
}

.upload-hero-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 1.5rem;
    border-radius: 50%;
    background: rgba(0, 212, 255, 0.1);
    border: 2px solid rgba(0, 212, 255, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: var(--color-brand-primary);
    transition: transform var(--duration-base) var(--ease-out), background var(--duration-base) var(--ease-out);
}

.upload-hero-title {
    font-family: var(--font-primary);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin-bottom: 8px;
    letter-spacing: var(--letter-spacing-tight);
    text-transform: uppercase;
}

.upload-hero-subtitle {
    font-family: var(--font-primary);
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    margin-bottom: 2rem;
}

/* Large drop zone */
.upload-drop-zone {
    border: 2px dashed var(--color-border-medium);
    border-radius: var(--radius-md);
    padding: 3rem 2rem;
    background: var(--color-bg-secondary);
    cursor: pointer;
    transition: border-color var(--duration-base) var(--ease-out), background var(--duration-base) var(--ease-out);
    position: relative;
}

.upload-drop-zone:hover {
    border-color: var(--color-brand-primary);
    background: var(--color-bg-tertiary);
}

.upload-drop-zone:hover .upload-hero-icon {
    transform: scale(1.1);
    background: rgba(0, 212, 255, 0.15);
}

.upload-drop-zone.drag-over {
    border-color: var(--color-brand-primary);
    background: var(--color-bg-tertiary);
    transform: scale(1.02);
}

.upload-drop-zone.drag-over .upload-hero-icon {
    transform: scale(1.15);
    background: rgba(0, 212, 255, 0.2);
}

.upload-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 16px 32px;
    /* Use CSS custom properties for theme-aware colors */
    --btn-bg: #1a1a1a;
    --btn-color: #ffffff;
    --btn-bg-hover: #404040;
    background: var(--btn-bg);
    color: var(--btn-color);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-base);
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--duration-fast) ease;
    margin-bottom: 1rem;
    text-decoration: none;
    text-transform: uppercase;
}

.upload-cta:hover {
    background: var(--btn-bg-hover);
    box-shadow: var(--shadow-hover);
}

/* Dark mode - white background, black text (same as primary buttons) */
[data-theme="dark"] .upload-cta {
    --btn-bg: #ffffff;
    --btn-color: #000000;
    --btn-bg-hover: #c0c0c0;
}

[data-theme="dark"] .upload-cta:hover {
    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.15);
}

.upload-formats {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

/* ========================================
   WORKSPACE (When images exist)
   ======================================== */

.render-workspace {
    /* No padding - container provides padding for alignment */
    padding: 0;
    margin: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    /* Ensure children respect container padding */
    position: relative;
    /* CRITICAL: Allow sticky children to be visible */
    overflow: visible;
}

/* Top action bar wrapper - sticky container for toolbar + advanced panel */
.render-top-bar-wrapper {
    position: sticky;
    top: calc(var(--header-height, 80px) + 1rem);
    z-index: var(--z-index-sticky);
    width: 100%;
    max-width: 100%;
    margin-bottom: var(--spacing-md);
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
    overflow: visible;
    box-sizing: border-box;
}

/* Top action bar - sticky on scroll */
.render-top-bar {
    /* Design tokens for toolbar consistency */
    --toolbar-height: 32px;
    --toolbar-radius: 0;
    --label-size: 11px;
    --label-weight: 500;
    --label-spacing: 0.05em;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 16px;
    background: var(--color-bg-secondary);
    border-radius: var(--radius-sm);
    /* Shadow on both top and bottom */
    box-shadow:
        0 -2px 4px 0 var(--color-shadow-medium),
        0 2px 4px 0 var(--color-shadow-medium);
    position: relative;
    z-index: var(--z-index-dropdown); /* Above advanced-settings-tab */
    box-sizing: border-box;
    width: 100%;
    overflow: visible;
}


/* ========================================
   CLEAN TOOLBAR LAYOUT
   ======================================== */

.toolbar-controls {
    display: flex;
    align-items: flex-end;
    gap: 16px;
    flex-wrap: wrap;
}

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

/* Option groups with labels */
.toolbar-option-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
    position: relative;
}

.toolbar-option-label {
    font-family: var(--font-primary);
    font-size: var(--label-size);
    font-weight: var(--label-weight);
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: var(--label-spacing);
    padding-left: 2px;
}

/* Tooltips */
.toolbar-tooltip {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: var(--z-index-tooltip);
    pointer-events: none;
}

.toolbar-option-group:hover .toolbar-tooltip,
.toolbar-option-group:focus-within .toolbar-tooltip {
    display: block;
    animation: tooltip-fade-in 0.15s ease;
}

@keyframes tooltip-fade-in {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Light mode: black bg, white text (inverted) */
.toolbar-tooltip-content {
    background: #000000;
    border: none;
    border-radius: 2px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    padding: 8px 10px;
    min-width: 200px;
    max-width: 260px;
}

/* Dark mode: white bg, black text (inverted) */
[data-theme="dark"] .toolbar-tooltip-content {
    background: #ffffff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* No pointer/arrow */
.toolbar-tooltip-content::before,
.toolbar-tooltip-content::after {
    display: none;
}

.toolbar-tooltip-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.toolbar-tooltip-row strong {
    font-family: var(--font-primary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

[data-theme="dark"] .toolbar-tooltip-row strong {
    color: #000000;
}

.toolbar-tooltip-cost {
    font-family: var(--font-primary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: rgba(255, 255, 255, 0.7);
    background: transparent;
    padding: 0;
    border-radius: 0;
}

[data-theme="dark"] .toolbar-tooltip-cost {
    color: rgba(0, 0, 0, 0.7);
}

.toolbar-tooltip-content p {
    font-family: var(--font-primary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-normal);
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.4;
    margin: 0 0 8px 0;
}

[data-theme="dark"] .toolbar-tooltip-content p {
    color: rgba(0, 0, 0, 0.7);
}

.toolbar-tooltip-content p:last-child {
    margin-bottom: 0;
}

/* Chip - unified small button style */
.toolbar-chip {
    all: unset;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--toolbar-height);
    min-width: var(--toolbar-height);
    padding: 0 8px;
    font-family: var(--font-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    background: transparent;
    border-radius: var(--toolbar-radius);
    cursor: pointer;
    transition: all 0.15s ease;
}

.toolbar-chip:hover:not(:disabled) {
    color: var(--color-text-primary);
    background: var(--color-bg-tertiary);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.06);
}

.toolbar-chip:focus-visible {
    outline: 2px solid var(--color-accent-blue);
    outline-offset: 2px;
}

.toolbar-chip.active {
    background: var(--color-bg-primary);
    color: var(--color-text-primary);
    box-shadow: inset 0 0 0 2px var(--color-text-primary);
}

.toolbar-chip:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Danger chip now uses standard primary hover */
.toolbar-chip-danger:hover:not(:disabled) {
    color: var(--color-text-primary);
}

/* Selection mode chip - active when selecting */
.toolbar-chip.select-mode-active {
    background: var(--color-accent-blue);
    color: #fff;
}

.toolbar-chip.select-mode-active:hover:not(:disabled) {
    background: var(--color-accent-blue);
    color: #fff;
    opacity: 0.9;
}

/* Selection action chips with count badge */
.toolbar-chip-selection {
    gap: 4px;
}

.toolbar-chip-selection .selection-count {
    font-size: 11px;
    font-weight: var(--font-weight-semibold);
    background: var(--color-bg-primary);
    color: var(--color-text-primary);
    padding: 1px 6px;
    border-radius: 10px;
    min-width: 18px;
    text-align: center;
}

.toolbar-chip-danger.toolbar-chip-selection .selection-count {
    background: var(--color-error);
    color: #fff;
}

/* ========================================
   SELECTION MODE - IMAGE CARD SELECTION
   ======================================== */

/* Selection checkbox overlay on cards */
.image-card .selection-checkbox {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 24px;
    height: 24px;
    background: rgba(0, 0, 0, 0.6);
    border: 2px solid rgba(255, 255, 255, 0.8);
    border-radius: 4px;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10;
    cursor: pointer;
    transition: all var(--duration-fast) ease;
}

.image-card .selection-checkbox i {
    color: #fff;
    font-size: 14px;
    opacity: 0;
}

/* Show checkbox in selection mode */
.image-grid-container.selection-mode .image-card .selection-checkbox {
    display: flex;
}

/* Selected state */
.image-card.selected .selection-checkbox {
    background: var(--color-accent-blue);
    border-color: var(--color-accent-blue);
}

.image-card.selected .selection-checkbox i {
    opacity: 1;
}

/* Hover state for unselected */
.image-grid-container.selection-mode .image-card:not(.selected) .selection-checkbox:hover {
    background: rgba(0, 0, 0, 0.8);
    border-color: #fff;
}

/* Selection mode cursor */
.image-grid-container.selection-mode .image-card {
    cursor: pointer;
}

/* Dim hover effects in selection mode */
.image-grid-container.selection-mode .image-card:hover::before {
    opacity: 0 !important;
}

.image-grid-container.selection-mode .image-card:hover .image-actions {
    opacity: 0 !important;
    visibility: hidden !important;
}

/* ========================================
   INDICATOR COMPONENT
   Used for displaying status values (tokens, counts, etc.)
   Separate from button styling
   ======================================== */

.render-balance-row {
    display: flex;
    justify-content: flex-end;
    margin-bottom: var(--spacing-sm);
}

/* Indicator pill - not a button, just a display element */
.render-balance-bar {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) var(--spacing-md);
    background: var(--color-bg-secondary);
    border: none;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
}

.render-balance-label {
    font-family: var(--font-primary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.render-balance-value {
    font-family: var(--font-primary);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

/* Cost display in toolbar */
.toolbar-token-info {
    display: flex;
    align-items: center;
    gap: 6px;
    height: var(--toolbar-height);
    padding: 0 10px;
    background: var(--color-bg-tertiary);
    border-radius: var(--toolbar-radius);
    border: 1px solid var(--color-border-light);
}

.toolbar-token-cost-label {
    font-family: var(--font-primary);
    font-size: var(--label-size);
    font-weight: var(--label-weight);
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: var(--label-spacing);
}

.toolbar-token-cost-value {
    font-family: var(--font-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    font-variant-numeric: tabular-nums;
}

/* Render CTA - renamed to avoid global button[class*="btn"] override */
.render-cta {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    height: auto;
    min-height: 40px;
    padding: var(--spacing-xs) 1.5rem;
    font-family: var(--font-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #fff;
    background: #000;
    border: 2px solid #000;
    border-radius: 0;
    cursor: pointer;
    transition: all var(--duration-fast) ease;
}

/* Render button stacked text styling */
.render-cta .render-btn-text {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    line-height: 1.2;
}

.render-cta .render-btn-tokens {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    opacity: 0.8;
    line-height: 1.2;
}

.render-cta .render-btn-tokens:empty {
    display: none;
}

[data-theme="dark"] .render-cta {
    color: #000;
    background: #fff;
    border-color: #fff;
}

.render-cta:hover:not(:disabled) {
    background: #333;
    border-color: #333;
}

[data-theme="dark"] .render-cta:hover:not(:disabled) {
    background: #e5e5e5;
    border-color: #e5e5e5;
}

.render-cta:active:not(:disabled) {
    transform: scale(0.97);
}

.render-cta:disabled {
    opacity: 1;
    color: #888;
    background: transparent;
    border: 2px solid #bbb;
    cursor: not-allowed;
}

[data-theme="dark"] .render-cta:disabled {
    color: #777;
    background: transparent;
    border-color: #555;
}

/* Desktop: Ensure toolbar visibility - proper cascade, no !important */
@media (min-width: 769px) {
    .render-workspace .render-top-bar {
        display: flex;
        position: sticky;
        width: 100%;
        max-width: 100%;
        left: 0;
        right: 0;
        box-sizing: border-box;
        overflow: visible;
        visibility: visible;
        opacity: 1;
    }

    /* Ensure parent containers don't clip the toolbar */
    .render-workspace,
    .render-top-bar-wrapper,
    .render-workspace .container {
        overflow: visible;
    }

    /* Ensure container doesn't clip */
    .container {
        overflow-x: visible;
    }
}

/* ========================================
   RENDER BUTTONS
   ======================================== */

.btn-render-primary {
    all: unset;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 24px;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: #fff;
    background: var(--color-brand-primary);
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--duration-fast) ease;
    white-space: nowrap;
    user-select: none;
}

.btn-render-primary:hover:not(:disabled) {
    background: var(--color-brand-secondary);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

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

[data-theme="dark"] .btn-render-primary {
    background: #ffffff;
    color: #000000;
}

[data-theme="dark"] .btn-render-primary:hover:not(:disabled) {
    background: #c0c0c0;
}

.btn-render-secondary {
    all: unset;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 8px;
    font-family: var(--font-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    background: var(--color-bg-tertiary);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--duration-fast) ease;
    white-space: nowrap;
    user-select: none;
}

.btn-render-secondary:hover:not(:disabled) {
    background: var(--color-bg-primary);
    border-color: var(--color-border-heavy);
}

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

/* ========================================
   RENDER PAGE TOGGLE OVERRIDES
   Unified sizing for toolbar consistency
   ======================================== */

.render-page .toggle-group {
    height: var(--toolbar-height, 32px);
    border-radius: var(--toolbar-radius, 0);
    border: 1px solid var(--color-border-light);
}

.render-page .toggle-btn {
    height: 100%;
    padding: 0 12px;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0;
    transition: all 0.15s ease;
}

.render-page .toggle-btn:hover:not(.active) {
    background: var(--color-bg-tertiary);
}

.render-page .toggle-btn.active {
    background: var(--color-bg-primary);
    color: var(--color-text-primary);
    box-shadow: inset 0 0 0 2px var(--color-text-primary);
}

/* ========================================
   SETTINGS DROPDOWN
   ======================================== */

.settings-dropdown-wrapper {
    position: relative;
}

.settings-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 280px;
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border-light);
    border-radius: var(--toolbar-radius, 0);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    z-index: var(--z-index-dropdown);
    padding: 12px;
    margin-top: 6px;
}

.settings-dropdown-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Cost display in dropdown */
.settings-cost-display {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid var(--color-border-light);
}

.settings-cost-label {
    font-family: var(--font-primary);
    font-size: 11px;
    font-weight: 500;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.settings-cost-value {
    font-family: var(--font-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    font-variant-numeric: tabular-nums;
}

.settings-dropdown .btn-render-secondary {
    width: 100%;
    justify-content: flex-start;
}

.settings-dropdown .toggle-group {
    width: 100%;
}

.settings-dropdown .toggle-btn {
    flex: 1;
}

/* Disabled toggle button */
.toggle-btn.disabled,
.toggle-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

/* Settings Custom Dropdowns */
.settings-select-group {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.settings-select-label {
    font-family: var(--font-primary);
    font-size: 11px;
    font-weight: 500;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
    min-width: 70px;
}

/* Custom dropdown wrapper */
.settings-dropdown-select {
    position: relative;
    flex: 1;
}

/* Dropdown trigger button – matches Engine toggle style */
.settings-dropdown-trigger {
    all: unset;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 6px 8px;
    font-family: var(--font-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    background: transparent;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: box-shadow var(--duration-fast) ease, border-color var(--duration-fast) ease;
}

/* Hover – outward shadow, no background change */
.settings-dropdown-trigger:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.settings-dropdown-trigger:active {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

/* Open state – keep border, no special "selected" effect */
.settings-dropdown-select.open .settings-dropdown-trigger {
    border-color: var(--color-text-secondary);
}

.settings-dropdown-trigger i {
    font-size: 10px;
    color: var(--color-text-secondary);
    transition: transform var(--duration-fast) ease;
}

.settings-dropdown-select.open .settings-dropdown-trigger i {
    transform: rotate(180deg);
}

/* Dropdown menu */
.settings-dropdown-menu {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background-color: var(--color-bg-secondary);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-xl);
    z-index: var(--z-index-popover);
    overflow: hidden;
}

.settings-dropdown-select.open .settings-dropdown-menu {
    display: block;
}

/* Dropdown options */
.settings-dropdown-option {
    display: block;
    width: 100%;
    padding: 6px 8px;
    font-family: var(--font-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    background: transparent;
    border: none;
    text-align: left;
    cursor: pointer;
    transition: background-color var(--duration-fast) ease;
}

.settings-dropdown-option:hover {
    background-color: var(--color-bg-tertiary);
}

.settings-dropdown-option:focus-visible {
    outline: 2px solid var(--color-accent-blue);
    outline-offset: -2px;
}

.settings-dropdown-option.selected {
    background-color: var(--color-bg-primary);
    font-weight: var(--font-weight-semibold);
}

/* Dark theme */
[data-theme="dark"] .settings-dropdown-trigger {
    border-color: var(--color-border);
}

[data-theme="dark"] .settings-dropdown-trigger:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .settings-dropdown-menu {
    background-color: var(--color-bg-primary);
    border: 1px solid var(--color-border-light);
}

[data-theme="dark"] .settings-dropdown-option:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .settings-dropdown-option.selected {
    background-color: var(--color-bg-secondary);
}

/* Dropdown category dividers */
.settings-dropdown-divider {
    padding: 6px 8px 4px;
    font-family: var(--font-primary);
    font-size: 10px;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-tertiary);
    border-top: 1px solid var(--color-border-light);
    margin-top: 4px;
    pointer-events: none;
}

.settings-dropdown-divider:first-child {
    border-top: none;
    margin-top: 0;
    padding-top: 4px;
}

/* ========================================
   BACKGROUND SELECTOR
   ======================================== */

.background-selector {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.background-label {
    font-family: var(--font-primary);
    font-size: 11px;
    font-weight: 500;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
    min-width: 70px;
}

.background-options {
    display: flex;
    gap: 6px;
}

.background-option {
    all: unset;
    box-sizing: border-box;
    width: 32px;
    height: 32px;
    padding: 2px;
    border: 1px solid var(--color-border-light);
    border-radius: 0;
    cursor: pointer;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    overflow: hidden;
}

.background-option:hover:not(.active) {
    border-color: var(--color-border-medium);
}

.background-option:focus-visible {
    outline: 2px solid var(--color-accent-blue);
    outline-offset: 2px;
}

.background-option.active {
    box-shadow: inset 0 0 0 2px var(--color-text-primary);
    border-color: transparent;
}

/* Background option swatches */
.bg-opt-swatch {
    width: 100%;
    height: 100%;
    border-radius: 2px;
}

.bg-opt-swatch.bg-white {
    background: #fff;
    border: 1px solid var(--color-border-light);
}

.bg-opt-swatch.bg-grey {
    background: #6b7280;
}

.bg-opt-swatch.bg-gradient {
    background: linear-gradient(135deg, #374151 0%, #111827 100%);
}

/* Auto option - text instead of swatch */
.bg-opt-text {
    font-family: var(--font-primary);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--color-text-secondary);
}

.background-option.active .bg-opt-text {
    color: var(--color-text-primary);
}

/* ========================================
   ADVANCED SETTINGS EXPANDABLE PANEL
   Transform-based slide like video panel
   ======================================== */

.advanced-settings-panel {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Wrapper - provides the slide space */
.advanced-settings-content-wrapper {
    width: 100%;
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.advanced-settings-panel.expanded .advanced-settings-content-wrapper {
    grid-template-rows: 1fr;
}

/* Content container - handles overflow */
.advanced-settings-content {
    overflow: hidden;
    min-height: 0;
    background: var(--color-bg-secondary);
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    box-shadow: var(--shadow-md);
}

/* Allow dropdown overflow only when a dropdown is actually open */
.advanced-settings-panel.expanded .advanced-settings-content:has(.settings-dropdown-select.open),
.advanced-settings-panel.expanded .advanced-settings-content:has(.visual-grid-selector.open) {
    overflow: visible;
    z-index: 100; /* Ensure content layer is above the tab when dropdown is open */
}

/* Inner content - slides via transform */
.advanced-settings-content-inner {
    padding: 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px 24px;
    align-items: flex-end;
    transform: translateY(-100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.advanced-settings-panel.expanded .advanced-settings-content-inner {
    transform: translateY(0);
}

/* Tab always visible at bottom - must be BELOW toolbar and dropdowns */
.advanced-settings-tab {
    position: relative;
    z-index: calc(var(--z-index-dropdown) - 1); /* Below toolbar and dropdowns */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) var(--spacing-md);
    background: var(--color-bg-secondary);
    border: none;
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    /* Shadow on bottom only (top connects to content) */
    box-shadow: 0 2px 4px 0 var(--color-shadow-medium);
    cursor: pointer;
    font-family: var(--font-primary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: color var(--duration-fast) ease, background var(--duration-fast) ease;
}

.advanced-settings-tab:hover {
    color: var(--color-text-primary);
    background: var(--color-bg-tertiary);
}

.advanced-settings-tab.expanded {
    color: var(--color-primary);
}

.advanced-settings-tab i {
    font-size: 10px;
    transition: transform var(--duration-fast) var(--ease-out);
}

.advanced-settings-tab.expanded i.fa-chevron-down {
    transform: rotate(180deg);
}

/* Legacy divider - hidden */
.advanced-settings-divider {
    display: none;
}

/* Panel content styling moved to main .advanced-settings-content rule above */

/* Common label styling - block level, above inputs, LEFT aligned */
.advanced-settings-panel .settings-select-label,
.advanced-settings-panel .background-label,
.advanced-settings-panel .details-label {
    display: block;
    font-family: var(--font-primary);
    font-size: 11px;
    font-weight: 500;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 4px;
    text-align: left;
}

/* Condition dropdown group - inline, label above */
.advanced-settings-panel .settings-select-group {
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    width: auto !important;
    gap: 0 !important; /* Remove gap between label and dropdown */
}

/* Make condition dropdown wider so options don't wrap */
.advanced-settings-panel .settings-dropdown-select {
    min-width: 160px;
}

.advanced-settings-panel .settings-dropdown-menu {
    min-width: 160px;
    max-height: 280px;
    overflow-y: auto;
}

.advanced-settings-panel .settings-dropdown-option {
    white-space: nowrap;
}

/* Background selector group - inline, label above */
.advanced-settings-panel .background-selector {
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    width: auto !important;
    gap: 0 !important; /* Remove gap between label and options */
}

/* Details group - full width row, label above textarea */
.advanced-settings-panel .details-group {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch;
    flex: 1 1 100%;
    width: 100% !important;
}

/* Details textarea - inherits from site-wide .form-textarea */
.advanced-settings-panel .details-textarea {
    width: 100%;
    min-height: 60px;
    max-height: 80px;
    resize: vertical;
    box-sizing: border-box;
}

/* Old inline toggle button - hidden, replaced by hanging tab */
.advanced-settings-toggle {
    display: none !important;
}

.advanced-settings-toggle .toggle-icon {
    font-size: 14px;
    margin-right: 2px;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    .advanced-settings-content-inner {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 10px 16px;
        padding: 12px;
    }
    
    .advanced-settings-panel .settings-select-group,
    .advanced-settings-panel .background-selector {
        flex: 0 0 auto;
    }
    
    .advanced-settings-panel .details-group {
        flex: 1 1 100%;
        min-width: 100%;
        margin-top: 4px;
    }
    
    .advanced-settings-panel .details-textarea {
        min-height: 44px;
        max-height: 60px;
        margin: 0;
        padding: 8px 10px;
    }
    
    .advanced-settings-panel .details-label {
        margin-bottom: 4px;
    }
}

/* Tablet adjustments */
@media (min-width: 769px) and (max-width: 1024px) {
    .advanced-settings-content-inner {
        gap: 12px 20px;
    }
}

/* ========================================
   PROGRESS BAR
   Clean, simple progress bar with percentage
   Fixed height to prevent layout shift
   ======================================== */

.progress-bar-container {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    width: 100%;
    height: 24px; /* Fixed height to prevent layout shift */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.progress-bar-container.active {
    opacity: 1;
    visibility: visible;
}

.progress-percentage {
    font-family: var(--font-mono);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    min-width: 40px;
    text-align: right;
}

.progress-bar-track {
    flex: 1;
    height: 2px;
    background: var(--color-border-light);
    border-radius: 1px;
    overflow: hidden;
}

.progress-bar-fill {
    height: 100%;
    width: 0%;
    background: var(--color-text-primary);
    border-radius: 1px;
    transition: width 0.3s ease;
}

/* Failure state - red bar */
.progress-bar-container.failed .progress-bar-fill {
    background: var(--color-error);
}

.progress-bar-container.failed .progress-percentage {
    color: var(--color-error);
}

/* ========================================
   IMAGE GRID CONTAINER
   Use same grid system as history page
   ======================================== */

.image-grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
    /* Padding to allow shadow overflow to be visible */
    padding: 8px;
    /* Negative margin to offset padding so grid aligns with container edges */
    margin: -8px;
    margin-top: 8px;
    margin-bottom: 8px;
    /* Full width */
    width: calc(100% + 16px);
    max-width: calc(100% + 16px);
    box-sizing: border-box;
    position: relative;
}

/* ========================================
   IMAGE CARD
   Use same card system as history page
   ======================================== */

.image-card {
    position: relative;
    border: none;
    border-radius: var(--radius-md);
    overflow: hidden;
    aspect-ratio: 1 / 1;
    background-color: var(--color-bg-secondary);
    transition: box-shadow var(--duration-fast) var(--ease-out);
    animation: cardFadeIn 0.35s ease forwards;
    /* Container for sizing reference input */
    container-type: inline-size;
}

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

/* Highlight animation for newly created cards (e.g., from Modify) */
.image-card.highlight-new {
    animation: highlightPulse 0.6s ease-out;
}

@keyframes highlightPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 165, 0, 0.7);
    }
    50% {
        box-shadow: 0 0 0 8px rgba(255, 165, 0, 0.3);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(255, 165, 0, 0);
    }
}

.image-card:not(.has-error):not(.upload-tile):hover {
    cursor: pointer;
    box-shadow: var(--shadow-hover);
}

/* ========================================
   UPLOAD TILE - First item in grid
   ======================================== */

.upload-tile {
    border: 2px dashed var(--color-border-medium);
    background-color: var(--color-bg-secondary);
    animation: none;
    position: relative;
    box-shadow: none;
}

.upload-tile:hover {
    border-style: dashed;
    background-color: var(--color-bg-tertiary);
    box-shadow: inset 0 4px 12px var(--color-shadow-medium);
}

.upload-tile:active {
    box-shadow: inset 0 6px 16px var(--color-shadow-heavy);
}

.upload-tile.drag-over {
    border-color: var(--color-brand-primary);
    border-style: dashed;
    background-color: var(--color-bg-tertiary);
    box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.2), inset 0 4px 12px var(--color-shadow-medium);
    transform: scale(1.02);
}

.upload-tile.drag-over .upload-tile-main {
    color: var(--color-brand-primary);
}

/* Main clickable area with large + icon */
.upload-tile-main {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    height: 100%;
    cursor: pointer;
    color: var(--color-text-secondary);
    transition: color var(--duration-fast) ease;
}

.upload-tile:hover .upload-tile-main {
    color: var(--color-text-primary);
}

.upload-tile-main i {
    font-size: 3rem;
}

.upload-tile-label {
    font-family: var(--font-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Overlay tool button - bottom center inside tile
   IMPORTANT: Use button.class selector to override buttons.css which uses
   button[class*="btn"] with all:unset - our class contains "btn" substring */
button.upload-tile-overlay-btn {
    /* Reset the all:unset from buttons.css */
    all: revert;
    box-sizing: border-box;

    /* Positioning */
    position: absolute;
    bottom: var(--spacing-xs);
    left: 50%;
    transform: translateX(-50%);
    z-index: 1; /* Local stacking within tile */

    /* Layout */
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs);

    /* Appearance */
    background: transparent;
    border: none;
    cursor: pointer;

    /* Typography */
    color: var(--color-text-muted);
    font-family: var(--font-primary);
    font-size: clamp(var(--font-size-xs), 2.5vw, var(--font-size-sm));
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;

    /* Animation */
    transition: color var(--duration-fast) ease, background-color var(--duration-fast) ease;
}

button.upload-tile-overlay-btn:hover {
    color: var(--color-text-primary);
    background-color: var(--color-bg-tertiary);
}

button.upload-tile-overlay-btn i {
    font-size: clamp(var(--font-size-xs), 3vw, var(--font-size-sm));
}

/* Responsive scaling for small tiles */
@media (max-width: 480px) {
    button.upload-tile-overlay-btn {
        font-size: var(--font-size-xs);
        gap: calc(var(--spacing-xs) / 2);
        padding: calc(var(--spacing-xs) * 0.75) var(--spacing-xs);
    }

    button.upload-tile-overlay-btn i {
        font-size: var(--font-size-xs);
    }
}

/* Upload tile should not have the action bar overlay */
.upload-tile::before {
    display: none;
}

/* ========================================
   History Tile - Preview of past renders
   Styled like standard image-card
   ======================================== */

.history-tile {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    text-decoration: none;
    background-color: var(--color-bg-secondary);
    /* Same border as .image-card */
    border: none;
    border-radius: var(--radius-md);
    animation: none;
    transition: box-shadow var(--duration-fast) var(--ease-out);
}

.history-tile:hover {
    cursor: pointer;
    box-shadow: var(--shadow-hover);
}

/* Preview image container */
.history-tile-preview {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.history-tile-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: blur(2px);
    transform: scale(1.02);
    opacity: 0.9;
}

/* Dark overlay for text readability */
.history-tile-blur {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.1);
}

/* Text overlay */
.history-tile-overlay {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    height: 100%;
    color: var(--color-text-secondary);
    text-align: center;
}

.history-tile:hover .history-tile-overlay {
    color: var(--color-text-primary);
}

/* When has preview image, use white text */
.history-tile:not(.no-preview) .history-tile-overlay {
    color: #ffffff;
}

.history-tile:not(.no-preview):hover .history-tile-overlay {
    color: #ffffff;
}

.history-tile-overlay i {
    font-size: 3rem;
}

.history-tile-label {
    font-family: var(--font-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Hide action bar overlay for history tile */
.history-tile::before {
    display: none;
}

/* When no history image available */
.history-tile.no-preview .history-tile-preview {
    display: none;
}

.history-tile.no-preview .history-tile-blur {
    display: none;
}

/* Solid black background behind buttons - same as history */
/* Only show when NOT rendering (rendering has its own overlay) */
.image-card:not(.upload-tile):not(.rendering):not(.uploading):not(.has-error)::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 42px;
    background: #000;
    pointer-events: none;
    z-index: 2;
    opacity: 0;
    transition: opacity 0s !important; /* Instant hide on hover-out */
    border-radius: inherit;
}

.image-card:not(.rendering):not(.uploading):not(.has-error):hover::before {
    opacity: 1;
    transition: opacity 0.15s ease !important; /* Fade in on hover */
}

/* Image wrapper - same as history */
.image-card .image-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: var(--color-bg-primary);
}

.image-card img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    background: var(--color-bg-primary);
    cursor: pointer;
}

/* Remove Button (X at top right) */
.image-remove-btn-topleft {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.75);
    border: var(--border-width-thin) solid var(--color-border-medium);
    color: var(--color-text-primary);
    font-size: var(--font-size-sm);
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    opacity: 0;
    transition: opacity 0s, background 0.15s ease !important; /* Instant opacity hide, smooth background */
    padding: 0;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.image-card:not(.rendering):not(.uploading):not(.has-error):hover .image-remove-btn-topleft {
    opacity: 1;
    transition: opacity 0.15s ease, background 0.15s ease !important; /* Fade in on card hover */
}

.image-remove-btn-topleft:hover {
    background: var(--color-error);
    border-color: var(--color-error);
    color: #fff;
}

/* Image Uploading State */
.image-card.uploading {
    position: relative;
}

.image-card.uploading::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 6;
    pointer-events: none;
    border-radius: inherit;
    box-sizing: border-box;
}

.image-card.uploading img {
    opacity: 0.6;
}

.image-card.uploading::after {
    content: attr(data-upload-status);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #ffffff;
    font-family: var(--font-primary);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    z-index: 10;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 1);
    pointer-events: none;
    opacity: 1;
}

/* ========================================
   TILE RENDERING/LOADING STATE
   ======================================== */

.image-card.rendering,
.image-card.uploading {
    position: relative;
}

/* Block ALL interactions and hover effects during rendering */
.image-card.rendering,
.image-card.uploading {
    pointer-events: none;
}

/* Rendering overlay container */
.tile-loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.75);
    z-index: var(--z-index-dropdown);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    border-radius: inherit;
    box-sizing: border-box;
    pointer-events: auto; /* Re-enable clicks despite parent having pointer-events: none */
}

/* Clean white spinner - NOT theme-aware, always white on dark overlay */
.tile-loading-spinner {
    width: 36px;
    height: 36px;
    border: 4px solid rgba(255, 255, 255, 0.2);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: tile-spin 0.8s linear infinite;
}

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

/* Status text - NOT theme-aware, always white on dark overlay */
.tile-loading-status {
    color: #ffffff;
    font-family: var(--font-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    text-align: center;
    min-height: 20px;
    line-height: 20px;
    padding: 0 var(--spacing-xs);
    max-width: 90%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Stopwatch timer - NOT theme-aware, always white on black */
.tile-timer {
    position: absolute;
    bottom: var(--spacing-sm);
    left: 50%;
    transform: translateX(-50%);
    background: #000000;
    padding: 0 var(--spacing-xs);
    border-radius: var(--radius-md);
    font-family: var(--font-mono);
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-normal);
    color: #ffffff;
    letter-spacing: var(--letter-spacing-wide);
    font-variant-numeric: tabular-nums;
    min-width: 156px;
    text-align: center;
}

/* Delay warning state - red background for timer */
.tile-loading-overlay.delay-warning .tile-timer,
.video-processing-overlay.delay-warning .tile-timer {
    background: #dc2626;
}

/* Delay warning message - positioned at top of tile, NOT theme-aware */
.tile-delay-warning {
    position: absolute;
    top: var(--spacing-sm);
    left: 50%;
    transform: translateX(-50%);
    color: #ffffff;
    font-family: var(--font-primary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-normal);
    text-align: center;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 6px;
    z-index: 10; /* Above other overlay content */
}

/* Delay action buttons container - below warning message */
.tile-delay-actions {
    position: absolute;
    top: calc(var(--spacing-sm) + 24px);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    z-index: 10; /* Above other overlay content */
    pointer-events: auto; /* Ensure buttons are clickable */
}

/* Cancel render button - tile standard: white on black, NOT theme-aware
   Use button.class to override buttons.css all:unset */
.tile-loading-overlay button.tile-cancel-btn,
.video-processing-overlay button.tile-cancel-btn {
    all: revert;
    box-sizing: border-box;
    display: inline-block;
    background: #000000;
    color: #ffffff;
    border: none;
    padding: 6px 12px;
    border-radius: var(--radius-md);
    font-family: var(--font-primary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
}

.tile-loading-overlay button.tile-cancel-btn:hover,
.video-processing-overlay button.tile-cancel-btn:hover {
    background: #333333;
}

/* Feedback button - secondary style: transparent with white text, NOT theme-aware */
.tile-loading-overlay button.tile-feedback-btn,
.video-processing-overlay button.tile-feedback-btn {
    all: revert;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
    border: none;
    border-radius: var(--radius-md);
    font-family: var(--font-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
}

.tile-loading-overlay button.tile-feedback-btn:hover,
.video-processing-overlay button.tile-feedback-btn:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* Inline video for video tiles */
.tile-inline-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
}

.video-card .video-thumbnail {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Video thumbnail loading spinner - shown while video is generating */
.video-thumbnail-loading {
    background: rgba(0, 0, 0, 0.5);
    pointer-events: none;
}

.video-thumbnail-loading .tile-loading-spinner {
    width: 32px;
    height: 32px;
}


/* Legacy fallback: ::before overlay for cards without JS overlay */
.image-card.rendering:not(:has(.tile-loading-overlay))::before,
.image-card.uploading:not(:has(.tile-loading-overlay))::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.75);
    z-index: var(--z-index-dropdown);
    border-radius: inherit;
    box-sizing: border-box;
}

/* Legacy fallback: ::after status text */
.image-card.rendering:not(:has(.tile-loading-overlay))::after {
    content: attr(data-upload-status);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--color-bg-secondary);
    font-family: var(--font-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    z-index: calc(var(--z-index-dropdown) + 1);
    white-space: nowrap;
}

/* Dim the image during rendering */
.image-card.rendering img,
.image-card.uploading img {
    opacity: 0.5;
}

/* Hide action buttons during rendering/uploading */
.image-card.rendering .image-actions,
.image-card.uploading .image-actions,
.image-card.rendering .image-remove-btn-topleft,
.image-card.uploading .image-remove-btn-topleft {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Block hover effects on overlay - override any hover states */
.image-card.rendering:hover::before,
.image-card.uploading:hover::before {
    opacity: 1 !important;
}

.image-card.rendering:hover .image-actions,
.image-card.uploading:hover .image-actions {
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Skeleton Loading State */
.image-card.skeleton {
    background: linear-gradient(145deg, var(--color-bg-primary) 0%, var(--color-bg-tertiary) 50%, var(--color-bg-primary) 100%);
    overflow: hidden;
    border: var(--border-width-thin) solid var(--color-border-medium);
    animation: skeletonGlow 2s ease-in-out infinite;
}

@keyframes skeletonGlow {
    0%, 100% {
        box-shadow: var(--shadow-sm);
        border-color: var(--color-border-medium);
    }
    50% {
        box-shadow: var(--shadow-md);
        border-color: var(--color-brand-primary);
    }
}

.image-card.skeleton img {
    opacity: 0;
}

/* Error State */
.image-card.has-error {
    position: relative;
}

/* High specificity to override action bar ::before */
.image-card.has-error:not(.upload-tile)::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: auto !important;
    background: rgba(239, 68, 68, 0.2) !important;
    z-index: 6;
    pointer-events: none;
    border-radius: var(--radius-md);
    opacity: 1 !important;
}

.image-card.has-error img {
    opacity: 0.5;
}

/* Hide action bar on error state */
.image-card.has-error .image-actions {
    opacity: 0 !important;
    visibility: hidden !important;
}

.image-card.has-error .image-remove-btn-topleft {
    opacity: 0 !important;
    visibility: hidden !important;
}

.error-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    z-index: 15;
    background: rgba(0, 0, 0, 0.6);
    border-radius: var(--radius-md);
    pointer-events: auto; /* Ensure buttons are clickable */
}

.error-message {
    color: var(--color-error);
    font-family: var(--font-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    text-align: center;
    padding: 0 16px;
    max-width: 90%;
    line-height: var(--line-height-normal);
}

/* Error action buttons container */
.error-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    margin-top: 12px;
}

/* Error reset button - tile standard: black bg, white text, NOT theme-aware */
.error-overlay button.error-reset-btn {
    all: revert;
    box-sizing: border-box;
    display: inline-block;
    background: #000000;
    color: #ffffff;
    border: none;
    padding: 8px 16px;
    border-radius: var(--radius-md);
    font-family: var(--font-primary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
}

.error-overlay button.error-reset-btn:hover {
    background: #333333;
}

/* Error feedback button - secondary style, NOT theme-aware */
.error-overlay button.error-feedback-btn {
    all: revert;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
    border: none;
    border-radius: var(--radius-md);
    font-family: var(--font-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
}

.error-overlay button.error-feedback-btn:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* Legacy retry button - kept for backwards compatibility */
.error-retry-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: var(--color-brand-primary);
    color: #fff;
    font-family: var(--font-primary);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm);
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--duration-fast) ease;
    text-transform: uppercase;
}

.error-retry-btn:hover {
    background: var(--color-brand-secondary);
    box-shadow: var(--shadow-hover);
}

/* Image Actions - use same as history actions */
.image-actions {
    display: flex;
    flex-wrap: nowrap;
    gap: 1px;
    justify-content: space-evenly; /* Distribute buttons evenly */
    align-items: center;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    min-height: 42px;
    height: auto;
    padding: 4px 2px;
    background: #000; /* Black background like history page */
    z-index: 10;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0s, visibility 0s !important; /* Instant hide on hover-out */
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

.image-card:not(.rendering):not(.uploading):not(.has-error):hover .image-actions {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.15s ease, visibility 0s !important; /* Fade in on hover */
}

/* Mobile tap-to-show hover state */
.image-card.mobile-hover-active:not(.rendering):not(.uploading):not(.has-error)::before {
    opacity: 1;
    transition: opacity 0.15s ease !important;
}

.image-card.mobile-hover-active:not(.rendering):not(.uploading):not(.has-error) .image-actions {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.15s ease, visibility 0s !important;
}

.image-card.mobile-hover-active:not(.rendering):not(.uploading):not(.has-error) .image-remove-btn-topleft {
    opacity: 1;
    transition: opacity 0.15s ease, background 0.15s ease !important;
}

.image-card.mobile-hover-active .reference-array-container {
    pointer-events: auto;
    opacity: 1;
    transition: opacity 0.15s ease !important;
}

/* Keep hover overlays visible when a dropdown is open from this card.
   Body-mounted menus (ref-type-menu, overflow, grid picker) cause the card
   to lose :hover when the cursor moves to the menu. This class keeps
   overlays visible during that interaction. */
.image-card.dropdown-active:not(.rendering):not(.uploading):not(.has-error)::before {
    opacity: 1;
    transition: opacity 0.15s ease !important;
}

.image-card.dropdown-active:not(.rendering):not(.uploading):not(.has-error) .image-actions {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.15s ease, visibility 0s !important;
}

.image-card.dropdown-active:not(.rendering):not(.uploading):not(.has-error) .image-remove-btn-topleft {
    opacity: 1;
    transition: opacity 0.15s ease, background 0.15s ease !important;
}

.image-card.dropdown-active .reference-array-container {
    pointer-events: auto;
    opacity: 1;
    transition: opacity 0.15s ease !important;
}

/* ========================================
   TILE OVERFLOW MENU (3-dots)
   ======================================== */

.tile-overflow-menu {
    position: relative;
    display: flex;
    align-items: center;
}

.tile-overflow-dropdown {
    display: none;
    position: fixed;
    min-width: 160px;
    background: rgba(0, 0, 0, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-md);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    z-index: var(--z-index-tile-popover);
    padding: 4px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.tile-overflow-dropdown.open {
    display: block;
    animation: fadeInDropdown var(--duration-fast) ease;
}

.tile-overflow-option {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    font-family: var(--font-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: rgba(255, 255, 255, 0.8);
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    text-align: left;
    transition: all var(--duration-fast) ease;
}

.tile-overflow-option i {
    font-size: 14px;
    width: 16px;
    text-align: center;
    color: #fff;
}

.tile-overflow-option:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

/* ========================================
   RE-RENDER OVERLAY
   Full-tile overlay with two options
   ======================================== */

.rerender-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 20;
    animation: fadeIn var(--duration-fast) ease;
}

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

.rerender-overlay-close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-surface);
    border: none;
    border-radius: var(--radius-sm);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: background-color var(--duration-fast) ease;
}

.rerender-overlay-close:hover {
    background: var(--color-bg-surface-hover);
    color: var(--color-text-primary);
}

.rerender-overlay-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: calc(100% - 32px);
    max-width: 240px;
}

.rerender-overlay-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 16px 12px;
    /* Standard secondary button colors */
    background: #e8e8e8;
    border: 1px solid #e8e8e8;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background-color var(--duration-fast) ease, box-shadow var(--duration-fast) ease;
    text-align: center;
}

.rerender-overlay-option:hover {
    background: #d0d0d0;
    border-color: #d0d0d0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.rerender-overlay-option i {
    font-size: 24px;
    color: #1a1a1a;
    margin-bottom: 4px;
}

.rerender-option-title {
    font-family: var(--font-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: #1a1a1a;
}

.rerender-option-desc {
    font-family: var(--font-primary);
    font-size: var(--font-size-xs);
    color: rgba(0, 0, 0, 0.6);
    line-height: 1.3;
}

/* Responsive adjustments for smaller tiles */
@media (max-width: 480px) {
    .rerender-overlay-options {
        gap: 8px;
    }
    
    .rerender-overlay-option {
        padding: 12px 8px;
        gap: 4px;
    }
    
    .rerender-overlay-option i {
        font-size: 20px;
    }
    
    .rerender-option-title {
        font-size: var(--font-size-xs);
    }
    
    .rerender-option-desc {
        font-size: 10px;
    }
}

/* ========================================
   IMAGE VIEWER MODAL
   Base styles in components/modals.css
   ======================================== */

/* Image viewer modal - blur backdrop, above theme toggle */
#imageViewerModal.modal-overlay {
    z-index: calc(var(--z-index-overlay) + 1);
}

#imageViewerModal .modal-backdrop {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* Viewer hamburger menu - positioned in top-right of viewer */
.viewer-menu-container {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 100;
    pointer-events: auto;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.viewer-menu-container .tile-overflow-menu {
    display: flex !important;
    visibility: visible !important;
}

.viewer-menu-trigger,
.viewer-menu-container .history-action-btn {
    width: 40px !important;
    height: 40px !important;
    max-width: 40px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: var(--radius-sm);
    color: #fff !important;
    cursor: pointer;
    transition: background-color var(--duration-fast) ease;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    visibility: visible !important;
    opacity: 1 !important;
}

.viewer-menu-trigger:hover,
.viewer-menu-container .history-action-btn:hover {
    background: rgba(0, 0, 0, 0.8) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
}

.viewer-menu-trigger i,
.viewer-menu-container .history-action-btn i {
    font-size: 16px;
    color: #fff !important;
}

/* Viewer dropdown menu */
.viewer-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    min-width: 180px;
    background: rgba(0, 0, 0, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xl);
    padding: 6px 0;
    display: none;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.viewer-dropdown.open {
    display: block;
    animation: fadeInDropdown var(--duration-fast) ease;
}

.viewer-dropdown .tile-overflow-option {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 16px;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.9);
    font-family: var(--font-primary);
    font-size: var(--font-size-sm);
    cursor: pointer;
    transition: background var(--duration-fast) ease;
    text-align: left;
}

.viewer-dropdown .tile-overflow-option:hover {
    background: rgba(255, 255, 255, 0.1);
}

.viewer-dropdown .tile-overflow-option i {
    width: 16px;
    text-align: center;
    font-size: 14px;
    opacity: 0.8;
}

.viewer-dropdown .tile-overflow-option span {
    flex: 1;
}

.viewer-dropdown .tile-overflow-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
    margin: 6px 0;
}

.viewer-dropdown .tile-overflow-option-danger {
    color: var(--color-rose);
}

.viewer-dropdown .tile-overflow-option-danger:hover {
    background: rgba(var(--color-rose-rgb), 0.15);
}

/* Show viewer-actions bar for images (same style as video-actions) */
#imageViewerModal .viewer-actions {
    display: flex;
}

/* Loading bar on image - simple clean style */
.image-loading-bar {
    position: absolute;
    bottom: 25%;
    left: 10%;
    right: 10%;
    height: 2px;
    z-index: 8;
    overflow: hidden;
    border-radius: 1px;
    background: var(--color-border-light);
}

.image-loading-bar-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%;
    background: var(--color-text-inverse);
    border-radius: 1px;
    transition: width 0.3s ease;
}

/* ========================================
   MOBILE STICKY BOTTOM BAR
   ======================================== */

.mobile-action-bar {
    display: none; /* Hidden by default, controlled by media queries */
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 16px calc(16px + env(safe-area-inset-right, 0px)) calc(16px + env(safe-area-inset-bottom, 0px)) calc(16px + env(safe-area-inset-left, 0px));
    background: var(--color-bg-secondary);
    border-top: var(--border-width-thin) solid var(--color-border-medium);
    box-shadow: var(--shadow-xl);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    z-index: var(--z-index-dropdown);
}

.mobile-action-row {
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 480px;
    margin: 0 auto;
}

.mobile-action-bar .mobile-btn-icon {
    width: 48px;
    height: 48px;
    min-width: 48px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: var(--radius-md);
}

.mobile-action-bar .btn-primary {
    flex: 1;
    height: 48px;
    justify-content: center;
    padding: 0 24px;
}

/* ========================================
   COMPLETION BANNER
   ======================================== */

.completion-banner {
    background: linear-gradient(135deg, rgba(var(--color-emerald-rgb), 0.15) 0%, rgba(var(--color-emerald-rgb), 0.08) 100%);
    border: var(--border-width-thin) solid rgba(var(--color-emerald-rgb), 0.3);
    border-radius: var(--radius-md);
    padding: 16px 24px;
    margin: 16px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    animation: slideDown var(--duration-base) var(--ease-out);
}

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

.completion-banner-content {
    display: flex;
    align-items: center;
    gap: 16px;
    color: var(--color-text-primary);
    font-family: var(--font-primary);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
}

.completion-banner-content i {
    color: var(--color-emerald);
    font-size: var(--font-size-lg);
}

.completion-banner-close {
    background: transparent;
    border: none;
    color: var(--color-text-secondary);
    cursor: pointer;
    padding: 6px;
    border-radius: var(--radius-sm);
    transition: all var(--duration-fast) ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.completion-banner-close:hover {
    background: var(--color-bg-tertiary);
    color: var(--color-text-primary);
}

/* ========================================
   UNDO TOAST
   ======================================== */

.undo-toast {
    position: fixed;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%) translateY(100px) scale(0.95);
    background: var(--color-bg-secondary);
    border: var(--border-width-thin) solid var(--color-border-medium);
    border-radius: var(--radius-md);
    padding: 16px 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    z-index: var(--z-index-overlay);
    box-shadow: var(--shadow-2xl);
    opacity: 0;
    visibility: hidden;
    transition: transform var(--duration-base) var(--ease-out), opacity var(--duration-base) var(--ease-out), visibility var(--duration-base) var(--ease-out);
}

.undo-toast.show {
    transform: translateX(-50%) translateY(0) scale(1);
    opacity: 1;
    visibility: visible;
}

.undo-toast-message {
    color: var(--color-text-primary);
    font-family: var(--font-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

.undo-toast-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 16px;
    background: transparent;
    border: var(--border-width-medium) solid var(--color-brand-primary);
    color: var(--color-brand-primary);
    font-family: var(--font-primary);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--duration-fast) ease;
}

.undo-toast-btn:hover {
    background: var(--color-brand-primary);
    color: #fff;
}

.undo-toast-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    background: var(--color-brand-primary);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    animation: undoProgress 5s linear forwards;
}

@keyframes undoProgress {
    0% { width: 100%; }
    100% { width: 0%; }
}

/* ========================================
   TOKEN INDICATOR
   ======================================== */

.btn-token-indicator {
    font-size: var(--font-size-xs);
    opacity: 0.8;
    font-weight: var(--font-weight-normal);
    margin-left: 6px;
    display: inline-block;
}

/* ========================================
   OVERLAY TOOL MODAL
   ======================================== */

.overlay-tool-options {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 16px;
}

.overlay-tool-option-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 24px;
    background: var(--color-bg-tertiary);
    border: var(--border-width-thin) solid var(--color-border-medium);
    border-radius: var(--radius-md);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    font-family: var(--font-primary);
    color: var(--color-text-primary);
    text-transform: uppercase;
    text-decoration: none;
    transition: all var(--duration-fast) ease;
    cursor: pointer;
}

.overlay-tool-option-btn:hover {
    background: var(--color-bg-primary);
    border-color: var(--color-border-heavy);
    box-shadow: var(--shadow-hover);
}

.overlay-tool-option-btn:active {
    opacity: 0.9;
}

.overlay-tool-option-btn i {
    font-size: var(--font-size-lg);
}

.overlay-tool-option-btn span {
    font-size: var(--font-size-base);
}

/* Dark theme for overlay tool option buttons */
[data-theme="dark"] .overlay-tool-option-btn {
    background: rgba(255, 255, 255, 0.12);
    border-color: var(--color-border-medium);
}

[data-theme="dark"] .overlay-tool-option-btn:hover {
    background: rgba(255, 255, 255, 0.18);
    border-color: var(--color-border-heavy);
}

/* ========================================
   RESPONSIVE
   ======================================== */

@media (max-width: 1024px) {
    .render-top-bar {
        padding: 8px 16px;
        /* Ensure toolbar stays visible and within bounds */
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    
    .render-top-bar-left,
    .render-top-bar-right {
        gap: 8px;
    }
    
    /* When toolbar wraps, ensure right section is visible */
    .render-top-bar-right {
        flex: 1 1 100%; /* Take full width when wrapping */
        justify-content: flex-end;
        margin-top: 8px;
        min-width: 0; /* Allow wrapping */
    }
    
    /* Only apply margin-top if it's on a new line */
    .render-top-bar-left + .render-top-bar-right {
        margin-top: 0;
    }
}


/* Desktop: toolbar always visible, mobile bar hidden */
@media (min-width: 769px) {
    .mobile-action-bar {
        display: none;
    }

    .render-workspace .render-top-bar {
        display: flex;
    }
}

/* Mobile: toolbar always visible */
@media (max-width: 768px) {
    .mobile-action-bar {
        display: none !important; /* JS was overriding this, ensure it stays hidden */
    }

    .render-top-bar {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }
    
    .toolbar-controls {
        gap: 8px;
        width: 100%;
    }
    
    .toolbar-controls .control-group {
        flex: 1 1 auto;
        min-width: 0;
    }

    .render-title {
        text-align: center;
        padding-right: 0;
    }

    .render-workspace {
        padding-bottom: 0;
    }

    .upload-hero {
        min-height: 60vh;
        padding: 2rem 1rem;
    }

    .upload-drop-zone {
        padding: 2rem 1.5rem;
    }

    .upload-hero-title {
        font-size: calc(var(--font-size-xl) * 0.9);
    }

    .image-grid-container {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: 12px;
    }

    .undo-toast {
        bottom: 120px;
        left: 16px;
        right: 16px;
        transform: translateX(0) translateY(100px);
        max-width: none;
    }

    .undo-toast.show {
        transform: translateX(0) translateY(0);
    }
}

@media (max-width: 480px) {
    .upload-hero {
        min-height: 50vh;
        padding: 1.5rem 1rem;
    }

    .upload-drop-zone {
        padding: 1.5rem 1rem;
    }

    .upload-hero-icon {
        width: 60px;
        height: 60px;
        font-size: 1.5rem;
    }

    .upload-hero-title {
        font-size: calc(var(--font-size-lg) * 0.9);
    }

    .image-grid-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }

    .image-actions {
        gap: 0.375rem;
        bottom: 6px;
        left: 6px;
        right: 6px;
    }

    /* .history-action-btn responsive styles in icon-buttons.css */
    
    /* Toolbar adjustments for very small screens */
    .toolbar-controls {
        gap: 6px;
    }
    
    .toolbar-controls .control-group {
        flex: 1 1 calc(50% - 6px);
    }
    
    .render-page .toggle-group {
        min-width: 0;
    }
    
    .render-page .toggle-btn {
        padding: 0 8px;
        font-size: var(--font-size-xs);
    }
    
    .toolbar-actions {
        flex: 1 1 auto;
        justify-content: flex-end !important; /* Right-align when buttons wrap to new row */
        gap: 8px;
        margin-left: auto; /* Push to the right */
    }
    
    /* When toolbar wraps to multiple rows */
    .render-top-bar {
        flex-wrap: wrap;
    }
}

/* ========================================
   FEEDBACK WIDGET
   Icon-only button for submitting feedback
   ======================================== */

.feedback-widget {
    position: fixed;
    bottom: var(--spacing-md);
    right: var(--spacing-md);
    z-index: var(--z-index-popover);
}

#feedback-toggle {
    all: unset !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    width: auto !important;
    height: auto !important;
    color: var(--color-text-tertiary) !important;
    font-size: var(--font-size-xl) !important;
    cursor: pointer !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: color var(--duration-fast) ease !important;
}

#feedback-toggle:hover {
    color: var(--color-text-primary) !important;
    background: transparent !important;
}

#feedback-toggle:active {
    opacity: 0.8 !important;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .feedback-widget {
        bottom: var(--spacing-sm);
        right: var(--spacing-sm);
    }
}

/* ========================================
   VIDEO GENERATION PANEL
   Slide-out panel from right side
   Uses design system variables for theming
   ======================================== */

.video-panel {
    position: fixed;
    top: 0;
    right: calc(-1 * min(380px, 90vw)); /* Matches actual panel width */
    width: 380px;
    max-width: 90vw;
    height: 100vh;
    height: 100dvh; /* Dynamic viewport height — accounts for iOS Safari browser chrome */
    background: var(--color-bg-secondary);
    border-left: 1px solid var(--color-border-light);
    z-index: var(--z-index-modal);
    display: flex;
    flex-direction: column;
    transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease;
    box-shadow: none;
}

/* Hide video panel tab when other modals are open */
body:has(.modal-overlay.open:not(.video-panel-overlay)) .video-panel > .video-panel-tab,
body:has(.mask-editor-modal.open) .video-panel > .video-panel-tab,
body:has(.image-editor-modal.open) .video-panel > .video-panel-tab,
body:has(#imageViewerModal[style*="display: flex"]) .video-panel > .video-panel-tab,
body:has(#imageViewerModal[style*="display: block"]) .video-panel > .video-panel-tab {
    display: none !important;
}

.video-panel.open {
    right: 0;
    box-shadow: -8px 0 32px rgba(0, 0, 0, 0.15);
}

/* Video panel tab - sticks to left edge of panel, flush with viewport */
.video-panel > .video-panel-tab {
    position: absolute;
    left: -48px;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 56px;
    padding: 0;
    margin: 0;
    background: var(--color-bg-secondary);
    border: var(--border-width-thin) solid var(--color-border-light);
    border-right: none;
    border-radius: var(--radius-md) 0 0 var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--color-text-secondary);
    font-size: var(--font-size-lg);
    transition: background-color var(--duration-fast) ease, color var(--duration-fast) ease, box-shadow var(--duration-fast) ease;
    box-shadow: var(--shadow-md);
}

.video-panel > .video-panel-tab:hover {
    background: var(--color-bg-tertiary);
    color: var(--color-text-primary);
    box-shadow: var(--shadow-lg);
}

/* Remove shadow when panel is open so it doesn't overlap */
.video-panel.open > .video-panel-tab {
    box-shadow: none;
}

.video-panel-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: var(--z-index-modal-backdrop);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.video-panel-overlay.open {
    opacity: 1;
    visibility: visible;
}

.video-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--color-border-light);
}

.video-panel-header h3 {
    font-family: var(--font-primary);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-tight);
}

.video-panel-header h3 i {
    color: var(--color-text-secondary);
    font-size: 1rem;
}

.video-panel-close {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-sm);
    color: var(--color-text-secondary);
    font-size: 1.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.video-panel-close:hover {
    background: var(--color-bg-tertiary);
    color: var(--color-text-primary);
}

/* Ensure dropdowns inside video panel work correctly */
.video-panel .video-option {
    position: relative;
    overflow: visible;
}

.video-panel .settings-dropdown-select {
    position: relative;
}

.video-panel .settings-dropdown-menu {
    z-index: var(--z-index-popover);
    max-height: 320px;
    overflow-y: auto;
    overscroll-behavior: contain;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25), 0 2px 6px rgba(0, 0, 0, 0.15);
}

.video-panel-content {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.video-panel-preview {
    width: 100%;
    aspect-ratio: 4/3;
    background: var(--color-bg-primary);
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--color-border-light);
    margin-bottom: 1rem;
}

.video-panel-preview img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Placeholder when no image is selected - matches upload tile styling */
.video-preview-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    border: 2px dashed var(--color-border-medium);
    border-radius: var(--radius-md);
    background: var(--color-bg-secondary);
    cursor: pointer;
    box-shadow: none;
    transition: border-color var(--duration-fast) var(--ease-out),
                background-color var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-fast) var(--ease-out);
}

.video-preview-placeholder:hover {
    border-color: var(--color-text-secondary);
    background: var(--color-bg-tertiary);
    box-shadow: inset 0 4px 12px var(--color-shadow-medium);
}

.video-preview-placeholder:active {
    box-shadow: inset 0 6px 16px var(--color-shadow-heavy);
}

.video-preview-placeholder .placeholder-icon {
    font-size: 2rem;
    color: var(--color-text-muted);
    font-weight: var(--font-weight-normal);
    line-height: 1;
}

.video-preview-placeholder .placeholder-text {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
}

/* Drag and drop states for video panel previews */
.video-panel-preview.drag-over {
    box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.3), inset 0 0 20px rgba(0, 212, 255, 0.1);
}

.video-panel-preview.drag-over .video-preview-placeholder {
    border-color: var(--color-brand-primary);
    background: var(--color-bg-tertiary);
    box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.2), inset 0 4px 12px var(--color-shadow-medium);
}

.video-panel-preview.drag-over .placeholder-icon,
.video-panel-preview.drag-over .placeholder-text {
    color: var(--color-brand-primary);
}

/* End frame upload preview (smaller than main preview) */
.video-end-preview {
    aspect-ratio: 16/9;
    max-height: 120px;
}

.video-end-preview .placeholder-icon {
    font-size: 1.5rem;
}

.video-end-preview .placeholder-text {
    font-size: var(--font-size-xs);
}

/* Crossfade input for seamless loop videos */
.video-crossfade-input-wrapper {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.video-crossfade-input {
    width: 80px;
    padding: 0.5rem 0.75rem;
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-sm);
    color: var(--color-text-primary);
    font-family: var(--font-mono);
    font-size: var(--font-size-sm);
    text-align: center;
    transition: border-color 0.2s ease;
}

.video-crossfade-input:focus {
    border-color: var(--color-brand-primary);
    outline: none;
}

.video-crossfade-unit {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

/* Video format options in download modal */
.video-format-options {
    margin-top: 1rem;
}

.video-format-options .settings-dropdown-select {
    width: 100%;
}

/* Video download modal - must appear above fullscreen video viewer (z-index 10000) */
#videoDownloadModal {
    z-index: 10002 !important;
}

/* Video download modal dropdown fixes */
#videoDownloadModal .modal-content {
    overflow: visible !important;
}

#videoDownloadModal .modal-body {
    overflow: visible !important;
}

#videoDownloadModal .video-format-options {
    position: relative;
    z-index: 1;
}

#videoDownloadModal .settings-dropdown-select {
    position: relative;
}

#videoDownloadModal .settings-dropdown-menu {
    position: absolute;
    z-index: 10001;
    max-height: 200px;
    overflow-y: auto;
    left: 0;
    right: 0;
}

.video-option {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-bottom: 0.875rem;
}

.video-option:last-child {
    margin-bottom: 0;
}

.video-option label {
    font-family: var(--font-primary);
    font-size: 11px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
    text-transform: uppercase;
    margin-bottom: 0;
    letter-spacing: 0.05em;
}

/* Video panel uses site-standard custom dropdowns (.settings-dropdown-select) */

/* Row layout for Duration and Resolution */
.video-options-row {
    display: flex;
    gap: 1rem;
    margin-bottom: 0.875rem;
}

.video-options-row .video-option {
    flex: 1;
    margin-bottom: 0;
}

/* Transition mode checkbox */
.video-transition-option {
    padding: 0.75rem;
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-sm);
    margin-bottom: 0.875rem;
}

.video-transition-option .checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
}

.video-transition-option .checkbox-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--color-brand-primary);
    cursor: pointer;
}

/* Video prompt textarea - extends .form-textarea */
#video-prompt {
    min-height: 80px;
    line-height: var(--line-height-normal);
    resize: none;
}

/* Segmented button groups */
.video-btn-group {
    display: flex;
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.video-btn-group button {
    flex: 1;
    padding: 0.625rem 1rem;
    background: transparent;
    border: none;
    color: var(--color-text-secondary);
    font-family: var(--font-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: all 0.15s ease;
    position: relative;
}

.video-btn-group button:not(:last-child) {
    border-right: 1px solid var(--color-border-light);
}

.video-btn-group button:hover:not(.active) {
    color: var(--color-text-primary);
    background: var(--color-bg-tertiary);
}

.video-btn-group button.active {
    background: var(--color-bg-primary);
    color: var(--color-text-primary);
    box-shadow: inset 0 0 0 2px var(--color-text-primary);
}

/* Cost display */
.video-cost-display {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.625rem 0.875rem;
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-sm);
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

.video-cost-label {
    font-family: var(--font-primary);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.video-cost-value {
    font-family: var(--font-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    font-variant-numeric: tabular-nums;
}

/* Generate button */
.video-generate-btn {
    width: 100%;
    padding: 0.875rem 1rem;
    padding-bottom: calc(0.875rem + env(safe-area-inset-bottom, 0px));
    margin-top: 0;
    font-family: var(--font-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-tight);
    background: var(--color-brand-primary);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: all 0.2s ease;
    text-align: center;
}

.video-generate-btn i,
.video-generate-btn span {
    display: inline-flex;
    align-items: center;
}

.video-generate-btn:hover:not(:disabled) {
    background: var(--color-brand-secondary);
}

.video-generate-btn:active {
    transform: scale(0.98);
}

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

/* ===== VIDEO CARD STYLES (in main render grid) ===== */
.video-card {
    position: relative;
}

.video-card .image-wrapper {
    position: relative;
    overflow: hidden;
    background: var(--color-bg-primary);
    height: 100%;
    width: 100%;
    border-radius: inherit;
}

.video-card .image-wrapper img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
    background: var(--color-bg-primary);
    border-radius: inherit;
}

/* Video badge - NOT theme-aware, always black bg white text (matches history page) */
.video-card .video-badge {
    position: absolute;
    top: 0;
    left: 0;
    background: #000000;
    color: #ffffff;
    padding: 4px 10px;
    border-radius: 0 0 var(--radius-sm) 0;
    font-family: var(--font-primary);
    font-size: 11px;
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 5px;
}

.video-card .video-badge i {
    font-size: 11px;
    color: #ffffff;
}

/* Giant play button for video tiles - shown when video is ready */
.video-play-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 64px;
    height: 64px;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color var(--duration-fast) ease, transform var(--duration-fast) ease;
    z-index: 5;
}

.video-play-overlay i {
    font-size: 28px;
    color: #fff;
    margin-left: 4px; /* Optical centering for play icon */
}

.video-card:hover .video-play-overlay {
    background: rgba(0, 0, 0, 0.85);
    transform: translate(-50%, -50%) scale(1.1);
}

/* Processing overlay */
.video-card .video-processing-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.75);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: var(--z-index-dropdown);
    border-radius: inherit;
    pointer-events: auto; /* Re-enable clicks despite parent having pointer-events: none */
}

/* NOT theme-aware - always white on dark overlay */
.video-card .video-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid rgba(255, 255, 255, 0.2);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: videoRingSpin 0.8s linear infinite;
    margin-bottom: var(--spacing-sm);
}

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

/* NOT theme-aware - always white on dark overlay */
.video-card .video-status-text {
    color: #ffffff;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    margin-bottom: var(--spacing-xs);
    letter-spacing: var(--letter-spacing-wide);
    min-height: 20px;
    line-height: 20px;
    text-align: center;
    max-width: 90%;
    overflow: hidden;
    transition: opacity var(--duration-fast) var(--ease-out);
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Timer for video cards */
.video-card .tile-timer {
    position: absolute;
    bottom: var(--spacing-sm);
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
}

.video-card .video-progress-mini {
    width: 55%;
    height: 3px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    overflow: hidden;
}

.video-card .video-progress-mini-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #00d4ff, #00ffff, #00d4ff);
    background-size: 200% 100%;
    animation: progressShine 1.5s ease infinite;
    transition: width 0.5s ease;
}

@keyframes progressShine {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Ready state badge - same as default, NOT theme-aware */
.video-card.video-ready .video-badge {
    background: #000000;
}

/* Error state */
.video-card.video-error .video-processing-overlay {
    background: linear-gradient(
        180deg,
        rgba(40, 10, 10, 0.9) 0%,
        rgba(30, 10, 10, 0.95) 100%
    );
}

.video-card.video-error .video-spinner {
    display: none;
}

.video-card.video-error .video-status-text {
    color: var(--color-error);
}

.video-card.video-error .video-progress-mini {
    display: none;
}

.video-card.video-error .video-badge {
    background: var(--color-error);
}

/* Video Processing Views */
.video-processing-animation {
    position: relative;
    width: 120px;
    height: 120px;
    margin: 0 auto 1.5rem;
}

.video-processing-ring {
    position: absolute;
    inset: 0;
    border: 3px solid var(--color-border-light);
    border-top-color: var(--color-brand-primary);
    border-radius: 50%;
    animation: videoRingSpin 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}

.video-processing-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2rem;
    color: var(--color-text-secondary);
}

.video-processing-status {
    text-align: center;
    margin-bottom: 1rem;
}

#video-status-text {
    font-family: var(--font-primary);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
}

.video-processing-time {
    text-align: center;
    color: var(--color-text-secondary);
    font-family: var(--font-primary);
    font-size: var(--font-size-sm);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.video-processing-bar {
    width: 100%;
    height: 4px;
    background: var(--color-border-light);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 1rem;
}

.video-processing-bar-fill {
    height: 100%;
    width: 0%;
    background: var(--color-brand-primary);
    transition: width 0.5s ease;
}

.video-processing-hint {
    text-align: center;
    color: var(--color-text-muted);
    font-family: var(--font-primary);
    font-size: var(--font-size-xs);
    margin: 0;
}

/* Complete View */
.video-result-container {
    width: 100%;
    aspect-ratio: 16/9;
    background: var(--color-bg-primary);
    border-radius: var(--radius-sm);
    overflow: hidden;
    margin-bottom: 1rem;
    border: 1px solid var(--color-border-light);
}

.video-result-container video {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.video-result-actions {
    display: flex;
    gap: 0.75rem;
}

.video-result-actions .btn-render-primary,
.video-result-actions .btn-render-secondary {
    flex: 1;
    padding: 0.75rem;
    border-radius: var(--radius-sm);
    font-family: var(--font-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-render-primary {
    background: var(--color-brand-primary);
    color: #fff;
    border: none;
}

.btn-render-primary:hover {
    background: var(--color-brand-secondary);
}

.btn-render-secondary {
    background: var(--color-bg-primary);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border-light);
}

.btn-render-secondary:hover {
    background: var(--color-bg-tertiary);
}

/* Error View */
.video-error-icon {
    font-size: 3rem;
    color: var(--color-error);
    margin-bottom: 1rem;
    text-align: center;
}

.video-error-message {
    text-align: center;
    font-family: var(--font-primary);
    color: var(--color-text-secondary);
    margin-bottom: 1.5rem;
}

/* ========================================
   TOOLTIPS - Render Page Overrides
   Main tooltip styles are in components/tooltips.css
   These are render-page specific adjustments
   ======================================== */

/* Ensure toggle-group allows tooltip overflow */
.toggle-group:has([data-tooltip]) {
    overflow: visible;
}

/* Fallback for browsers without :has() support */
.toggle-group.tooltip-parent {
    overflow: visible;
}

/* ========================================
   HISTORY PICKER MODAL
   For selecting end frame from render history
   ======================================== */

#historyPickerModal {
    z-index: var(--z-index-modal-stacked) !important; /* Above video panel */
}

#historyPickerModal .modal-backdrop,
#historyPickerModalBackdrop {
    z-index: 1 !important;
    backdrop-filter: none !important; /* No blur - solid overlay only */
    -webkit-backdrop-filter: none !important;
    background: rgba(0, 0, 0, 0.85) !important; /* Solid dark overlay to cover video panel */
}

.history-picker-modal {
    position: relative;
    z-index: 10; /* Above the backdrop within the modal */
    max-width: 900px;
    width: 95vw;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    background: var(--color-bg-secondary); /* Ensure solid background */
}

.history-picker-modal .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-md) var(--spacing-lg);
    border-bottom: 1px solid var(--color-border-light);
}

.history-picker-modal .modal-header h2 {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin: 0;
    font-size: var(--font-size-lg);
}

.history-picker-modal .modal-header h2 i {
    color: var(--color-text-secondary);
}

.history-picker-modal .modal-close-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-sm);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
}

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

.history-picker-modal .modal-body {
    flex: 1;
    overflow-y: auto;
    padding: var(--spacing-lg);
}

.history-picker-subtitle {
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-md);
    font-size: var(--font-size-sm);
}

.history-picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: var(--spacing-md);
}

.history-picker-item {
    position: relative;
    aspect-ratio: 1;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 2px solid transparent;
    cursor: pointer;
    background: var(--color-bg-primary);
    transition: all 0.2s ease;
}

.history-picker-item:hover {
    border-color: var(--color-brand-primary);
    box-shadow: var(--shadow-md);
}

.history-picker-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.history-picker-item::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.4) 0%, transparent 50%);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.history-picker-item:hover::after {
    opacity: 1;
}

.history-picker-item .picker-select-icon {
    position: absolute;
    bottom: var(--spacing-sm);
    right: var(--spacing-sm);
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-brand-primary);
    color: #fff;
    border-radius: 50%;
    font-size: 0.75rem;
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.2s ease;
    z-index: 1;
}

.history-picker-item:hover .picker-select-icon {
    opacity: 1;
    transform: scale(1);
}

.history-picker-loading {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-xl);
    color: var(--color-text-secondary);
    gap: var(--spacing-sm);
}

.history-picker-loading i {
    font-size: 1.5rem;
}

.history-picker-empty {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-xl);
    text-align: center;
    color: var(--color-text-secondary);
}

.history-picker-empty i {
    font-size: 3rem;
    margin-bottom: var(--spacing-md);
    opacity: 0.5;
}

.history-picker-empty p {
    margin: 0 0 var(--spacing-xs);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
}

.history-picker-empty span {
    font-size: var(--font-size-sm);
}

.history-picker-modal .modal-footer {
    padding: var(--spacing-md) var(--spacing-lg);
    border-top: 1px solid var(--color-border-light);
    display: flex;
    justify-content: flex-end;
}

@media (max-width: 600px) {
    .history-picker-grid {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
        gap: var(--spacing-sm);
    }
    
    .history-picker-modal .modal-body {
        padding: var(--spacing-md);
    }
}

/* ========================================
   REFERENCE ARRAY SYSTEM
   Vertical array of low-profile tiles for
   reference images, prompts, and masks
   ======================================== */

.reference-array-container {
    position: absolute;
    top: var(--spacing-xs);
    left: var(--spacing-xs);
    right: var(--spacing-xs);
    z-index: 5;
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: calc(100% - var(--spacing-xs) * 2);
    overflow: visible;
    /* Thin scrollbar - only applies when overflow changes */
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.3) transparent;
    /* Hidden by default, show on hover.
       Use opacity only (no visibility:hidden) so backdrop-filter stays pre-computed
       and doesn't flash in late when the button appears. */
    pointer-events: none;
    opacity: 0;
    transition: opacity 0s !important; /* Instant hide */
}

/* Show reference array on card hover */
.image-card:not(.rendering):not(.uploading):not(.has-error):hover .reference-array-container {
    pointer-events: auto;
    opacity: 1;
    transition: opacity 0.15s ease !important; /* Fade in */
}

.reference-array-container::-webkit-scrollbar {
    width: 4px;
}

.reference-array-container::-webkit-scrollbar-track {
    background: transparent;
}

.reference-array-container::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.3);
    border-radius: 2px;
}

/* Add Instructions Button - dashed box with text
   Uses solid background instead of backdrop-filter to avoid
   the blur effect loading after the button appears on hover. */
button.reference-add-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 34px;
    min-height: 34px;
    background: rgba(0, 0, 0, 0.65) !important;
    border: 2px dashed rgba(255, 255, 255, 0.3) !important;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background var(--duration-fast) ease, border-color var(--duration-fast) ease, color var(--duration-fast) ease;
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: 0.02em;
}

button.reference-add-btn:hover {
    background: rgba(0, 0, 0, 0.75) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
    color: rgba(255, 255, 255, 0.8);
}

/* Individual reference row tile - solid black like tile menu */
.reference-row {
    display: flex;
    align-items: center;
    gap: 4px;
    height: 34px;
    min-height: 34px;
    padding: 0 4px;
    background: #000 !important;
    border-radius: var(--radius-sm);
    overflow: visible;
    flex-shrink: 0;
}

/* .reference-row.has-content uses same styling as base .reference-row */

/* ADD REFERENCE button - photo icon with dashed outline */
.reference-row-add {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    min-width: 28px;
    flex-shrink: 0;
    background: transparent;
    border: 1.5px dashed rgba(255, 255, 255, 0.4);
    border-radius: var(--radius-sm);
    cursor: pointer;
    position: relative;
    transition: all var(--duration-fast) ease;
    margin: 0;
}

.reference-row-add:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.6);
}

.reference-row-add.has-image:hover {
    background: transparent;
    border: none;
}

.reference-row-add i {
    font-size: 14px;
    color: #fff;
    position: relative;
    z-index: 2;
    pointer-events: none;
    transition: opacity var(--duration-fast) ease;
}

.reference-row-add:hover i {
    opacity: 0.7;
}

/* Hide the text label - icon only now */
.reference-row-add span {
    display: none;
}

/* When image is added, show thumbnail instead */
.reference-row-add.has-image {
    width: 28px;
    height: 28px;
    min-width: 28px;
    border: none;
    background: transparent;
}

.reference-row-add.has-image i,
.reference-row-add.has-image span {
    display: none;
}

.reference-row-add .reference-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    display: none;
    border-radius: calc(var(--radius-sm) - 2px);
    background: transparent;
}

.reference-row-add.has-image .reference-thumb {
    display: block;
}

/* Hidden file input for reference */
.reference-row-file {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 1;
}

/* Prompt input */
.reference-row-prompt {
    flex: 1;
    min-width: 0;
    height: 100%;
    padding: 0 8px 0 10px;
    background: transparent;
    border: none;
    color: #fff;
    font-family: var(--font-primary);
    font-size: 11px;
    outline: none;
    transition: background var(--duration-fast) ease;
}

.reference-row-prompt::placeholder {
    color: rgba(255, 255, 255, 0.4);
    font-size: 10px;
}

.reference-row-prompt:focus {
    background: rgba(255, 255, 255, 0.08);
}

/* Button container - groups buttons tightly at far right */
.reference-row-actions {
    display: flex;
    align-items: center;
    gap: 0;
    height: 100%;
    flex-shrink: 0;
    margin-left: auto;
}

/* Square icon buttons (mask and remove) - uses site standard icon-btn pattern */
/* Named without "btn" to avoid buttons.css global selector override */
.ref-icon {
    all: unset;
    box-sizing: border-box;
    width: 28px;
    height: 28px;
    min-width: 28px;
    max-width: 28px;
    flex: 0 0 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    margin: 0;
}

.ref-icon i {
    font-size: 11px;
    color: #fff;
    transition: opacity var(--duration-fast) ease;
}

/* Mask button - icon only when no mask, dashed border + preview when has mask */
.ref-mask {
    all: unset !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    flex-shrink: 0 !important;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    border-radius: var(--radius-sm) !important;
    cursor: pointer !important;
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

.ref-mask:hover {
    background: rgba(255, 255, 255, 0.1) !important;
}

.ref-mask i,
.ref-mask .fas,
.ref-mask .fa-mask,
.ref-mask svg {
    font-size: 14px !important;
    color: #fff !important;
    position: relative !important;
    z-index: 2 !important;
    pointer-events: none !important;
    background: transparent !important;
    transition: opacity var(--duration-fast) ease !important;
}

.ref-mask:hover i,
.ref-mask:hover .fas,
.ref-mask:hover svg {
    opacity: 0.7 !important;
}

/* When mask exists - show dashed border + thumbnail preview */
.ref-mask.has-mask {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    border: 1.5px dashed rgba(255, 255, 255, 0.4) !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: var(--radius-sm) !important;
}

.ref-mask.has-mask:hover {
    border-color: rgba(255, 255, 255, 0.6) !important;
}

.ref-mask.has-mask i,
.ref-mask.has-mask svg {
    display: none !important;
}

/* Mask preview - matches .reference-row-add .reference-thumb exactly */
.ref-mask-preview {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: calc(var(--radius-sm) - 2px);
    display: none;
    background: transparent !important;
}

.ref-mask.has-mask .ref-mask-preview {
    display: block;
}

/* Hover - matches history-action-btn hover */
.ref-icon:hover:not(:disabled) i {
    opacity: 0.7;
}

/* Active/pressed state */
.ref-icon:active:not(:disabled) i {
    opacity: 0.5;
}

.ref-icon:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.ref-icon:disabled:hover i {
    opacity: 1;
}

/* Reference array: theme agnostic - always black with white text */
/* No dark theme override needed - stays black regardless of theme */

/* ========================================
   REFERENCE TYPE DROPDOWN
   Dark context dropdown selector - icon only when collapsed
   Always on black image card background
   ======================================== */

.ref-type-dropdown {
    position: relative;
    flex-shrink: 0;
    z-index: 10;
}

.ref-type-dropdown.open {
    z-index: 200;
}

.ref-type-trigger {
    all: unset;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 28px;
    padding: 0 8px;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--duration-fast) ease;
}

.ref-type-trigger i {
    font-size: 14px;
    color: #fff;
    line-height: 1;
}

.ref-type-trigger .ref-type-chevron {
    font-size: 8px;
    color: rgba(255, 255, 255, 0.5);
    transition: transform var(--duration-fast) ease;
}

.ref-type-trigger:hover {
    background: rgba(255, 255, 255, 0.1);
}

.ref-type-dropdown.open .ref-type-trigger {
    background: rgba(255, 255, 255, 0.1);
}

.ref-type-dropdown.open .ref-type-chevron {
    transform: rotate(180deg);
}

/* Dropdown menu - appended to body to escape transform containing block */
.ref-type-menu {
    display: none;
    position: fixed;
    min-width: 140px;
    background: rgba(0, 0, 0, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-sm);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    z-index: var(--z-index-tile-popover);
    padding: 4px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.ref-type-menu.open {
    display: block;
    animation: fadeInDropdown var(--duration-fast) ease;
}

/* Dropdown options */
.ref-type-option {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 10px;
    font-family: var(--font-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: rgba(255, 255, 255, 0.7);
    background: transparent;
    border: none;
    border-radius: var(--radius-xs);
    cursor: pointer;
    text-align: left;
    transition: all var(--duration-fast) ease;
}

.ref-type-option i {
    font-size: 12px;
    color: #fff;
    width: 16px;
    text-align: center;
}

.ref-type-option span {
    flex: 1;
}

.ref-type-option:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.ref-type-option.selected {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);
}

/* Reference grid dropdown for Material/Background selection - use fixed position to escape overflow:hidden on .image-card */
.ref-grid-dropdown {
    display: none;
    position: fixed;
    min-width: 200px;
    background: rgba(0, 0, 0, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-md);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    z-index: var(--z-index-tile-popover);
    max-height: 280px;
    overflow-y: auto;
    padding: var(--spacing-xs);
}

.ref-grid-dropdown.open {
    display: block;
    animation: fadeInDropdown var(--duration-fast) ease;
}

/* Ensure grid wrapper has proper z-index when dropdown is open */
.ref-grid-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    z-index: 10;
}

.ref-grid-wrapper:has(.ref-grid-dropdown.open) {
    z-index: 200;
}

/* Search input for reference grid */
.ref-grid-search {
    width: 100%;
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-sm);
    color: #fff;
    font-family: var(--font-primary);
    font-size: 11px;
    outline: none;
    margin-bottom: var(--spacing-xs);
}

.ref-grid-search::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.ref-grid-search:focus {
    border-color: rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.12);
}

/* Reference grid - 4 columns */
.ref-grid-options {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
}

.ref-grid-tile {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    background: rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-sm);
    overflow: hidden;
    cursor: pointer;
    border: none;
    padding: 0;
    transition: all var(--duration-fast) ease;
}

.ref-grid-tile:hover {
    background: rgba(255, 255, 255, 0.12);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.ref-grid-tile.selected {
    outline: 2px solid #fff;
    outline-offset: -2px;
}

.ref-grid-tile-image {
    width: 100%;
    height: 48px;
    object-fit: cover;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

.ref-grid-tile-label {
    font-family: var(--font-primary);
    font-size: 9px;
    font-weight: var(--font-weight-medium);
    color: rgba(255, 255, 255, 0.8);
    text-align: center;
    padding: 4px 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: capitalize;
}

/* Hidden state for filtered items */
.ref-grid-tile.hidden {
    display: none;
}

/* Ref content container */
.ref-content-container {
    display: flex;
    align-items: center;
    flex: 1;
    gap: 0;
    min-width: 0;
    height: 100%;
}

/* Responsive - adjust for smaller tiles */
@media (max-width: 480px) {
    .reference-row {
        height: auto;
        min-height: 30px;
        flex-wrap: wrap;
        padding: 4px;
        gap: 4px;
    }
    
    .ref-type-dropdown {
        flex-shrink: 0;
    }
    
    .ref-type-trigger {
        height: 24px;
        padding: 0 6px;
    }
    
    .ref-type-trigger i {
        font-size: 12px;
    }
    
    .ref-content-container {
        width: 100%;
    }
    
    .reference-row-add {
        width: 30px;
        height: 30px;
        min-width: 30px;
    }
    
    .reference-row-add i {
        font-size: 12px;
    }
    
    .reference-row-add.has-image {
        width: 30px;
        height: 30px;
        min-width: 30px;
    }
    
    .reference-row-prompt {
        font-size: 10px;
        padding: 0 6px;
    }
    
    .reference-row-prompt::placeholder {
        font-size: 9px;
    }
    
    .ref-icon {
        width: 24px;
        height: 24px;
        min-width: 24px;
        max-width: 24px;
        flex: 0 0 24px;
    }
    
    .ref-icon i {
        font-size: 10px;
    }
    
    /* Mask button matches reference-row-add responsive sizing */
    .ref-mask {
        width: 30px;
        height: 30px;
        min-width: 30px;
    }
    
    .ref-mask i {
        font-size: 12px;
    }
}

/* ========================================
   MASK EDITOR MODAL
   Full-screen canvas for drawing masks
   ======================================== */

.mask-editor-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-index-modal);
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.9);
}

.mask-editor-modal.open {
    display: flex;
}

.mask-editor-container {
    display: flex;
    flex-direction: column;
    max-width: 90vw;
    max-height: 90vh;
    background: var(--color-bg-secondary);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-2xl);
}

.mask-editor-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-sm);
    background: var(--color-bg-primary);
    border-bottom: 1px solid var(--color-border-light);
}

.mask-editor-title {
    font-family: var(--font-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.mask-editor-title i {
    color: var(--color-text-secondary);
}

.mask-editor-close {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-sm);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all var(--duration-fast) ease;
}

.mask-editor-close:hover {
    background: var(--color-bg-tertiary);
    color: var(--color-text-primary);
}

.mask-editor-canvas-wrapper {
    position: relative;
    flex: 1;
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1a1a1a;
    overflow: hidden;
}

/* Canvas stack container */
.mask-editor-canvas-stack {
    position: relative;
    display: inline-block;
}

/* Base canvas - shows the image */
#mask-base-canvas {
    display: block;
}

/* Overlay canvas for mask drawing - positioned exactly on top of base */
#mask-overlay-canvas {
    position: absolute;
    top: 0;
    left: 0;
    cursor: crosshair;
}

.mask-editor-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
    padding: var(--spacing-sm);
    background: var(--color-bg-primary);
    border-top: 1px solid var(--color-border-light);
}

.mask-editor-tools {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.mask-tool-group {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.mask-tool-label {
    font-family: var(--font-primary);
    font-size: 11px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.mask-brush-slider {
    width: 120px;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: var(--color-border-medium);
    border-radius: 2px;
    outline: none;
}

.mask-brush-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--color-text-primary);
    cursor: pointer;
    transition: transform var(--duration-fast) ease;
}

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

.mask-brush-slider::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--color-text-primary);
    cursor: pointer;
    border: none;
}

.mask-brush-size {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--color-text-secondary);
    min-width: 30px;
    text-align: right;
}

/* Brush/Eraser toggle - uses render page toggle style */
.mask-tool-toggle {
    display: flex;
    height: 32px;
    border: 1px solid var(--color-border-light);
    border-radius: 0;
    overflow: hidden;
}

.mask-tool-toggle button {
    height: 100%;
    padding: 0 12px;
    background: transparent;
    border: none;
    color: var(--color-text-secondary);
    font-family: var(--font-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    gap: 6px;
}

.mask-tool-toggle button:hover:not(.active) {
    background: var(--color-bg-tertiary);
}

.mask-tool-toggle button.active {
    background: var(--color-bg-primary);
    color: var(--color-text-primary);
    box-shadow: inset 0 0 0 2px var(--color-text-primary);
}

.mask-tool-toggle button i {
    font-size: 11px;
}

/* Action tool buttons (clear, invert) */
.mask-tool-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-sm);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all var(--duration-fast) ease;
}

.mask-tool-btn:hover {
    background: var(--color-bg-secondary);
    color: var(--color-text-primary);
}

.mask-tool-btn i {
    font-size: 12px;
}

/* Custom cursor indicator for mask editor */
.mask-cursor-indicator {
    position: fixed;
    pointer-events: none;
    border: 2px dashed rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    z-index: var(--z-index-tooltip);
    animation: cursorRotate 4s linear infinite;
    display: none;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
}

.mask-cursor-indicator.visible {
    display: block;
}

/* Brush cursor - white */
.mask-cursor-indicator.brush-mode {
    border-color: rgba(255, 255, 255, 0.9);
}

/* Eraser cursor - red */
.mask-cursor-indicator.eraser-mode {
    border-color: rgba(255, 80, 80, 0.9);
}

@keyframes cursorRotate {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Hide default cursor when drawing */
.mask-editor-canvas-wrapper.drawing-active {
    cursor: none !important;
}

.mask-editor-canvas-wrapper.drawing-active canvas {
    cursor: none !important;
}

.mask-editor-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.mask-action-btn {
    padding: 8px 16px;
    font-family: var(--font-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--duration-fast) ease;
}

.mask-action-btn.secondary {
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border-light);
    color: var(--color-text-primary);
}

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

.mask-action-btn.primary {
    background: var(--color-text-primary);
    border: 1px solid var(--color-text-primary);
    color: var(--color-bg-primary);
}

.mask-action-btn.primary:hover {
    opacity: 0.9;
}

[data-theme="dark"] .mask-action-btn.primary {
    background: #fff;
    color: #000;
}

/* Responsive - ensure buttons never get cut off */
.mask-editor-toolbar {
    flex-wrap: wrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

.mask-editor-actions {
    flex-shrink: 0;
}

.mask-action-btn {
    flex-shrink: 0;
    white-space: nowrap;
}

@media (max-width: 768px) {
    .mask-editor-toolbar {
        gap: var(--spacing-sm);
        padding: var(--spacing-xs) var(--spacing-sm);
    }

    .mask-editor-tools {
        width: 100%;
        justify-content: flex-start;
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
    }

    .mask-editor-actions {
        width: 100%;
        justify-content: flex-end;
    }

    .mask-action-btn {
        padding: 6px 12px;
        font-size: var(--font-size-xs);
    }
}

@media (max-width: 480px) {
    .mask-editor-container {
        max-width: 100vw;
        max-height: 100vh;
        border-radius: 0;
    }

    .mask-editor-canvas-wrapper {
        min-height: 200px;
    }

    .mask-editor-toolbar {
        padding: var(--spacing-xs);
        gap: var(--spacing-xs);
    }

    .mask-tool-group {
        gap: 2px;
    }

    .mask-tool-label {
        display: none;
    }

    .mask-brush-slider {
        width: 80px;
    }

    .mask-action-btn {
        padding: 6px 10px;
    }

    .mask-action-btn i {
        margin-right: 4px;
    }
}

/* ========================================
   IMAGE EDITOR MODAL
   Full-featured image editing with Fabric.js
   ======================================== */

.image-editor-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: var(--z-index-modal);
    background: rgba(0, 0, 0, 0.9);
}

.image-editor-modal.open {
    display: flex;
}

.image-editor-container {
    display: flex;
    flex-direction: column;
    width: calc(100vw - 40px);
    height: calc(100vh - 40px);
    max-width: 1400px;
    max-height: min(900px, calc(100vh - 40px));
    background: var(--color-bg-secondary);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.image-editor-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--color-bg-primary);
    border-bottom: 1px solid var(--color-border-light);
}

.image-editor-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-primary);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

.image-editor-title i {
    color: var(--color-text-primary);
}

.image-editor-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.image-editor-header-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    min-width: 32px;
    flex-shrink: 0;
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-sm);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all var(--duration-fast) ease;
}

.image-editor-header-btn:hover:not(:disabled) {
    background: var(--color-bg-surface);
    color: var(--color-text-primary);
}

.image-editor-header-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.image-editor-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    border-radius: var(--radius-md);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all var(--duration-fast) ease;
}

.image-editor-close:hover {
    background: var(--color-bg-surface);
    color: var(--color-text-primary);
}

.image-editor-body {
    display: flex;
    flex: 1;
    overflow: hidden;
}

/* Legacy sidebar - hidden, replaced by ribbon */
.image-editor-sidebar {
    display: none;
}

/* ========================================
   IMAGE EDITOR RIBBON TOOLBAR
   Horizontal toolbar below header
   ======================================== */
.image-editor-ribbon {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: var(--color-bg-primary);
    border-bottom: 1px solid var(--color-border-light);
    flex-wrap: wrap;
    min-height: 48px;
}

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

.ribbon-tools {
    display: flex;
    align-items: center;
    gap: 4px;
}

.ribbon-tool {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all var(--duration-fast) ease;
}

.ribbon-tool:hover {
    background: var(--color-bg-tertiary);
    color: var(--color-text-primary);
    border-color: var(--color-border-medium);
}

.ribbon-tool.active {
    background: var(--color-bg-primary);
    color: var(--color-text-primary);
    box-shadow: inset 0 0 0 2px var(--color-text-primary);
    border-color: transparent;
}

.ribbon-tool i {
    font-size: 14px;
}

.ribbon-separator {
    width: 1px;
    height: 32px;
    background: var(--color-border-light);
    margin: 0 4px;
}

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

.ribbon-setting label {
    font-family: var(--font-primary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-muted);
    white-space: nowrap;
}

.ribbon-input-group {
    display: flex;
    align-items: center;
    gap: 6px;
}

.ribbon-input-group input[type="range"] {
    width: 80px;
    height: 4px;
    appearance: none;
    background: var(--color-bg-tertiary);
    border-radius: 2px;
    cursor: pointer;
}

.ribbon-input-group input[type="range"]::-webkit-slider-thumb {
    appearance: none;
    width: 14px;
    height: 14px;
    background: var(--color-text-primary);
    border-radius: 50%;
    cursor: pointer;
}

.ribbon-input-group span {
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    min-width: 32px;
    text-align: right;
}

.ribbon-color-swatch {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-sm);
    border: 2px solid var(--color-border-medium);
    cursor: pointer;
    background: #ff0000;
    transition: border-color var(--duration-fast) ease;
}

.ribbon-color-swatch:hover {
    border-color: var(--color-text-primary);
}

.ribbon-toggle-group {
    display: flex;
    gap: 2px;
    background: var(--color-bg-tertiary);
    border-radius: var(--radius-md);
    padding: 2px;
}

.ribbon-toggle {
    padding: 4px 10px;
    font-family: var(--font-primary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-muted);
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--duration-fast) ease;
}

.ribbon-toggle:hover {
    color: var(--color-text-primary);
}

.ribbon-toggle.active {
    background: var(--color-bg-primary);
    color: var(--color-text-primary);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.ribbon-action-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    font-family: var(--font-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-bg-primary);
    background: var(--color-text-primary);
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--duration-fast) ease;
}

.ribbon-action-btn:hover {
    opacity: 0.9;
}

.ribbon-action-btn.secondary {
    color: var(--color-text-secondary);
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border-light);
}

.ribbon-action-btn.secondary:hover {
    background: var(--color-bg-surface);
    color: var(--color-text-primary);
}

.ribbon-action-btn i {
    font-size: 12px;
}

/* ========================================
   TOOL CONTEXT POPUP MENU
   Floating mini-menu near cursor for tool actions
   ======================================== */
.tool-context-popup {
    position: absolute;
    z-index: 1000;
    display: none;
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-medium);
    border-radius: var(--radius-lg);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3),
                0 2px 8px rgba(0, 0, 0, 0.2);
    padding: 6px;
    pointer-events: auto;
    backdrop-filter: blur(8px);
    animation: contextPopupIn 0.15s ease-out;
}

@keyframes contextPopupIn {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(4px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.tool-context-popup.visible {
    display: flex;
}

.context-popup-group {
    display: flex;
    align-items: center;
    gap: 4px;
}

.context-popup-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--color-text-primary);
    border: none;
    border-radius: var(--radius-md);
    color: var(--color-bg-primary);
    cursor: pointer;
    transition: all var(--duration-fast) ease;
}

.context-popup-btn:hover {
    background: var(--color-text-secondary);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.context-popup-btn:active {
    background: var(--color-text-tertiary);
}

.context-popup-btn.secondary {
    background: var(--color-bg-tertiary);
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border-light);
}

.context-popup-btn.secondary:hover {
    background: var(--color-bg-surface);
    color: var(--color-text-primary);
}

.context-popup-btn.primary {
    background: var(--color-success);
    color: #fff;
}

.context-popup-btn.primary:hover {
    background: var(--color-success-hover, #22c55e);
}

.context-popup-btn i {
    font-size: 13px;
}

.context-popup-divider {
    width: 1px;
    height: 24px;
    background: var(--color-border-light);
    margin: 0 4px;
}

.context-popup-ratios {
    display: flex;
    gap: 2px;
    background: var(--color-bg-tertiary);
    border-radius: var(--radius-md);
    padding: 2px;
}

.context-ratio-btn {
    padding: 4px 8px;
    font-family: var(--font-primary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-muted);
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--duration-fast) ease;
    white-space: nowrap;
}

.context-ratio-btn:hover {
    color: var(--color-text-primary);
}

.context-ratio-btn.active {
    background: var(--color-bg-primary);
    color: var(--color-text-primary);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Responsive ribbon - ensure buttons never get cut off */
.image-editor-ribbon {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

.ribbon-group {
    flex-shrink: 0;
}

.ribbon-tool {
    flex-shrink: 0;
}

@media (max-width: 900px) {
    .image-editor-ribbon {
        padding: 6px 12px;
        gap: 6px;
    }

    .ribbon-tool {
        width: 32px;
        height: 32px;
    }

    .ribbon-input-group input[type="range"] {
        width: 60px;
    }

    .ribbon-setting label {
        display: none;
    }
}

@media (max-width: 600px) {
    .image-editor-container {
        max-width: 100vw;
        max-height: 100vh;
        width: 100vw;
        height: 100vh;
        border-radius: 0;
    }

    .image-editor-ribbon {
        padding: 4px 8px;
        gap: 4px;
        min-height: 40px;
    }

    .ribbon-tool {
        width: 28px;
        height: 28px;
        min-width: 28px;
    }

    .ribbon-tool i {
        font-size: 12px;
    }

    .ribbon-separator {
        height: 24px;
        margin: 0 2px;
    }

    .ribbon-input-group input[type="range"] {
        width: 50px;
    }

    .image-editor-header {
        padding: 8px 12px;
    }

    .image-editor-header-btn {
        width: 28px;
        height: 28px;
        min-width: 28px;
    }
}

@media (max-width: 400px) {
    .ribbon-setting {
        display: none;
    }

    .ribbon-tool {
        width: 26px;
        height: 26px;
        min-width: 26px;
    }
}

.image-editor-tool-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.image-editor-tool-label {
    font-family: var(--font-primary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.image-editor-tool-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
}

.image-editor-tool {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1;
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all var(--duration-fast) ease;
}

.image-editor-tool:hover {
    background: var(--color-bg-tertiary);
    color: var(--color-text-primary);
    border-color: var(--color-border-medium);
}

/* Active state - selection box outline like toggle buttons, not filled */
.image-editor-tool.active {
    background: var(--color-bg-primary);
    color: var(--color-text-primary);
    box-shadow: inset 0 0 0 2px var(--color-text-primary);
    border-color: transparent;
}

[data-theme="dark"] .image-editor-tool.active {
    background: var(--color-bg-primary);
    color: var(--color-text-primary);
    box-shadow: inset 0 0 0 2px var(--color-text-primary);
    border-color: transparent;
}

.image-editor-tool i {
    font-size: 14px;
}

/* Header separator */
.image-editor-separator {
    width: 1px;
    height: 20px;
    background: var(--color-border-light);
    margin: 0 8px;
}

/* Zoom level display */
.image-editor-zoom-level {
    font-family: var(--font-primary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    min-width: 45px;
    text-align: center;
}

.image-editor-setting {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.image-editor-setting label {
    font-family: var(--font-primary);
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
}

.image-editor-setting input[type="range"] {
    width: 100%;
    height: 4px;
    background: var(--color-bg-tertiary);
    border-radius: 2px;
    -webkit-appearance: none;
    appearance: none;
}

.image-editor-setting input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    background: var(--color-text-primary);
    border-radius: 50%;
    cursor: pointer;
}

.image-editor-setting input[type="color"] {
    width: 100%;
    height: 32px;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    cursor: pointer;
}

.image-editor-color-swatch {
    width: 100%;
    height: 32px;
    border: 1px solid var(--color-border-medium);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--duration-fast) ease;
    position: relative;
}

.image-editor-color-swatch:hover {
    border-color: var(--color-text-primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.image-editor-color-swatch::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    right: 2px;
    bottom: 2px;
    background: inherit;
    border-radius: calc(var(--radius-md) - 1px);
}

.image-editor-setting span {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    text-align: right;
}

.image-editor-layers {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 150px;
    overflow-y: auto;
    padding: 4px;
    background: var(--color-bg-tertiary);
    border-radius: var(--radius-sm);
}

.image-editor-layer {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    background: var(--color-bg-surface);
    border: 1px solid transparent;
    border-radius: var(--radius-xs);
    cursor: pointer;
    transition: all var(--duration-fast) ease;
}

.image-editor-layer:hover {
    background: var(--color-bg-secondary);
}

.image-editor-layer.active {
    border-color: var(--color-brand-primary);
    background: rgba(26, 26, 26, 0.1);
}

[data-theme="dark"] .image-editor-layer.active {
    background: rgba(255, 255, 255, 0.1);
}

.image-editor-layer-thumb {
    width: 32px;
    height: 32px;
    background: var(--color-bg-tertiary);
    border-radius: var(--radius-xs);
    overflow: hidden;
}

.image-editor-layer-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.image-editor-layer-name {
    flex: 1;
    font-size: var(--font-size-xs);
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.image-editor-layer-visibility {
    background: none;
    border: none;
    color: var(--color-text-secondary);
    cursor: pointer;
    padding: 4px;
}

.image-editor-layer-visibility:hover {
    color: var(--color-text-primary);
}

.image-editor-layer-actions {
    display: flex;
    gap: 4px;
}

.image-editor-layer-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-xs);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all var(--duration-fast) ease;
}

.image-editor-layer-btn:hover {
    background: var(--color-bg-surface);
    color: var(--color-text-primary);
}

.image-editor-canvas-wrapper {
    flex: 1;
    position: relative;
    overflow: hidden;
    background: #1a1a1a;
    background-image:
        linear-gradient(45deg, #222 25%, transparent 25%),
        linear-gradient(-45deg, #222 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #222 75%),
        linear-gradient(-45deg, transparent 75%, #222 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
    overflow: hidden;
}

/* Light theme canvas background */
[data-theme="light"] .image-editor-canvas-wrapper {
    background: #e0e0e0;
    background-image:
        linear-gradient(45deg, #d0d0d0 25%, transparent 25%),
        linear-gradient(-45deg, #d0d0d0 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #d0d0d0 75%),
        linear-gradient(-45deg, transparent 75%, #d0d0d0 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}

/* Canvas container for zoom/pan - fills wrapper, Fabric.js viewport handles positioning */
.image-editor-canvas-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.image-editor-canvas-wrapper canvas {
    max-width: none;
    max-height: none;
}

.image-editor-canvas-wrapper.pan-mode {
    cursor: grab;
}

.image-editor-canvas-wrapper.pan-mode:active {
    cursor: grabbing;
}

/* Brush cursor indicator */
.image-editor-cursor {
    position: absolute;
    pointer-events: none;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: opacity 0.1s ease;
    transform: translate(-50%, -50%);
    z-index: 100;
}

.image-editor-cursor.visible {
    opacity: 1;
}

.image-editor-cursor.brush-mode {
    background: rgba(255, 80, 80, 0.3);
}

.image-editor-cursor.eraser-mode {
    background: rgba(255, 255, 255, 0.3);
}

/* Lasso canvas overlay */
.image-editor-lasso-canvas {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 50;
}

.image-editor-drop-zone {
    position: absolute;
    top: 20px;
    left: 20px;
    right: 20px;
    bottom: 20px;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    background: rgba(26, 26, 26, 0.1);
    border: 2px dashed var(--color-brand-primary);
    border-radius: var(--radius-md);
    color: var(--color-text-primary);
    font-family: var(--font-primary);
    font-size: var(--font-size-md);
    pointer-events: none;
}

[data-theme="dark"] .image-editor-drop-zone {
    background: rgba(255, 255, 255, 0.1);
    border-color: #ffffff;
    color: #ffffff;
}

.image-editor-drop-zone.active {
    display: flex;
}

.image-editor-drop-zone i {
    font-size: 48px;
}

.image-editor-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--color-bg-primary);
    border-top: 1px solid var(--color-border-light);
}

.image-editor-footer-left,
.image-editor-footer-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Image editor footer buttons with text labels */
.image-editor-footer .footer-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 16px;
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-sm);
    color: var(--color-text-secondary);
    font-family: var(--font-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: all var(--duration-fast) ease;
    white-space: nowrap;
}

.image-editor-footer .footer-btn:hover {
    background: var(--color-bg-surface-hover);
    border-color: var(--color-border-medium);
    color: var(--color-text-primary);
}

.image-editor-footer .footer-btn i {
    font-size: 14px;
}

.image-editor-footer .footer-btn.secondary {
    background: transparent;
    border-color: var(--color-border-light);
}

.image-editor-footer .footer-btn.secondary:hover {
    background: var(--color-bg-surface);
}

/* Primary save button - brand colors */
.image-editor-footer .footer-btn.primary {
    background: var(--color-brand-primary);
    border-color: var(--color-brand-primary);
    color: var(--color-text-inverse);
}

.image-editor-footer .footer-btn.primary:hover {
    background: var(--color-brand-hover);
    border-color: var(--color-brand-hover);
}

/* Responsive Image Editor */
@media (max-width: 768px) {
    .image-editor-container {
        width: 100vw;
        height: 100vh;
        max-width: none;
        max-height: none;
        border-radius: 0;
    }
    
    .image-editor-ribbon {
        padding: 6px 10px;
    }
}

@media (max-width: 600px) {
    .image-editor-body {
        flex-direction: column;
    }
    
    .image-editor-ribbon {
        padding: 4px 8px;
        overflow-x: auto;
    }
    
    .ribbon-setting {
        gap: 4px;
    }
    
    .ribbon-toggle {
        padding: 4px 8px;
    }
}

/* ========================================
   VIEWPORT PANEL (Live Screen Capture)
   Simple panel that sits BEHIND the toolbar
   Toolbar's shadow falls onto it naturally
   ======================================== */

/* Viewport control custom properties */
:root {
    /* Zoom limits */
    --viewport-zoom-min: 0.5;
    --viewport-zoom-max: 5;
    --viewport-zoom-step-in: 1.1;
    --viewport-zoom-step-out: 0.9;
    
    /* Resize limits */
    --viewport-height-min: 120px;
    --viewport-height-max: 600px;
    --viewport-custom-default-height: 300px;
    
    /* Timing */
    --viewport-init-delay: 50ms;
}

.viewport-panel {
    position: relative;
    z-index: 1; /* Behind toolbar (z-index: 2) */
}

/* Tab button - peeks out from top of toolbar */
.viewport-panel-tab {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) var(--spacing-md);
    background: var(--color-bg-secondary);
    border: none;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    /* Shadow on top only (sides/bottom connect to panel) */
    box-shadow: 0 -2px 4px 0 var(--color-shadow-medium);
    cursor: pointer;
    font-family: var(--font-primary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: all var(--duration-fast) var(--ease-out);
}

.viewport-panel-tab:hover {
    color: var(--color-text-primary);
    background: var(--color-bg-tertiary);
}

.viewport-panel-tab.expanded {
    color: var(--color-primary);
}

.viewport-panel-tab .viewport-icon {
    width: 14px;
    height: 14px;
}

.viewport-panel-tab i {
    font-size: 10px;
    transition: transform var(--duration-fast) var(--ease-out);
}

.viewport-panel-tab.expanded i.fa-chevron-down {
    transform: rotate(180deg);
}

/* Content - expands below tab, still behind toolbar */
.viewport-panel-content-wrapper {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.viewport-panel.expanded .viewport-panel-content-wrapper {
    grid-template-rows: 1fr;
}

.viewport-panel-content {
    overflow: hidden;
    min-height: 0;
    background: var(--color-bg-secondary);
    border-radius: 0 var(--radius-sm) var(--radius-sm) var(--radius-sm);
    box-shadow: var(--shadow-md);
}

.viewport-panel-content-inner {
    padding: 4px;
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    align-items: stretch;
}

/* Add viewport tile (dashed border) - fill panel */
.viewport-add-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-xl) var(--spacing-lg);
    min-height: 200px;
    border: 2px dashed var(--color-border-primary);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--color-text-tertiary);
    background: transparent;
    width: 100%;
    box-sizing: border-box;
}

.viewport-add-tile:hover {
    border-color: var(--color-accent-primary);
    background: rgba(var(--color-accent-primary-rgb), 0.05);
    color: var(--color-accent-primary);
}

.viewport-add-tile i {
    font-size: 2rem;
}

.viewport-add-tile span {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Live viewport display - fill entire panel */
.viewport-live-container {
    position: relative;
    min-height: 200px;
    height: auto;
    max-height: none;
    width: 100%;
    background: #0d0d0d;
    border-radius: var(--radius-sm);
    overflow: hidden;
    /* Inset shadow for recessed appearance */
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.9),
                inset 0 0 20px rgba(0, 0, 0, 0.4),
                0 0 0 1px rgba(0, 0, 0, 0.3);
    /* Default to 16:9 */
    aspect-ratio: 16 / 9;
}

/* Zoom wrapper for pan/zoom functionality */
.viewport-zoom-wrapper {
    width: 100%;
    height: 100%;
    overflow: hidden;
    cursor: grab;
    touch-action: none;
}

.viewport-zoom-wrapper:active {
    cursor: grabbing;
}

/* Crop mode overrides zoom wrapper cursor */
.viewport-live-container.crop-mode .viewport-zoom-wrapper,
.viewport-live-container.crop-mode .viewport-zoom-wrapper:active {
    cursor: crosshair;
}

.viewport-zoom-wrapper video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #000;
    will-change: transform;
    transition: none;
}

/* Resize handle for free mode */
.viewport-resize-handle {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 8px;
    cursor: ns-resize;
    background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.1));
    z-index: 10;
}

.viewport-resize-handle::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 4px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 2px;
}

.viewport-resize-handle:hover {
    background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.2));
}

.viewport-resize-handle:hover::after {
    background: rgba(255, 255, 255, 0.5);
}

/* Aspect ratio variants - container shape */
.viewport-live-container.aspect-1-1 {
    aspect-ratio: 1 / 1;
    height: auto;
    max-width: 350px;
}

.viewport-live-container.aspect-4-3 {
    aspect-ratio: 4 / 3;
    height: auto;
}

.viewport-live-container.aspect-3-2 {
    aspect-ratio: 3 / 2;
    height: auto;
}

.viewport-live-container.aspect-16-9 {
    aspect-ratio: 16 / 9;
    height: auto;
}

.viewport-live-container.aspect-21-9 {
    aspect-ratio: 21 / 9;
    height: auto;
}

.viewport-live-container.aspect-9-16 {
    aspect-ratio: 9 / 16;
    height: auto;
    max-width: 200px;
}

/* Custom mode - resizable */
.viewport-live-container.aspect-custom {
    aspect-ratio: unset;
    height: 300px;
    resize: none; /* We use custom resize handle */
}

/* Viewport control bar - solid black, compact, centered */
.viewport-live-controls {
    position: absolute;
    bottom: 6px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background: #000;
    border-radius: var(--radius-md);
}

/* Viewport action buttons - consistent white icons on dark overlay */
.viewport-action-btn {
    flex: 0 0 auto;
    min-width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: background var(--duration-fast) ease, color var(--duration-fast) ease;
}

.viewport-action-btn i {
    font-size: 14px;
    color: #fff;
    transition: color var(--duration-fast) ease, opacity var(--duration-fast) ease;
}

.viewport-action-btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.15);
}

.viewport-action-btn:hover:not(:disabled) i {
    opacity: 0.85;
}

.viewport-action-btn:active:not(:disabled) i {
    opacity: 0.6;
}

.viewport-action-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Active state for buttons - subtle background only, no color change */
.viewport-action-btn.active {
    background: rgba(255, 255, 255, 0.2);
}

/* Aspect ratio dropdown */
.viewport-aspect-dropdown {
    position: relative;
}

/* Text-based aspect ratio button */
.viewport-aspect-text-btn {
    min-width: auto;
    padding: 0 8px;
}

.viewport-aspect-text-btn .viewport-aspect-label {
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.viewport-aspect-text-btn:hover .viewport-aspect-label {
    opacity: 0.85;
}

.viewport-aspect-text-btn.active .viewport-aspect-label {
    color: #fff;
}

.viewport-aspect-menu {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 4px;
    background: #000;
    border-radius: var(--radius-sm);
    padding: 4px;
    display: none;
    flex-direction: column;
    gap: 2px;
    min-width: 60px;
}

.viewport-aspect-dropdown.open .viewport-aspect-menu {
    display: flex;
}

.viewport-aspect-option {
    background: transparent;
    border: none;
    color: #fff;
    font-size: 11px;
    font-weight: 500;
    padding: 4px 8px;
    border-radius: var(--radius-xs);
    cursor: pointer;
    text-align: center;
    transition: background var(--duration-fast) ease;
}

.viewport-aspect-option:hover {
    background: rgba(255, 255, 255, 0.15);
}

.viewport-aspect-option.active {
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
}

/* Crop mode styling */
.viewport-live-container.crop-mode video {
    cursor: crosshair;
}

.viewport-crop-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
}

.viewport-crop-selection {
    position: absolute;
    border: 2px dashed #fff;
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5);
}

/* Hide viewport panel on mobile */
@media (max-width: 768px) {
    .viewport-panel {
        display: none;
    }
}

/* ========================================
   VISUAL GRID SELECTOR
   Image-based 4-column grid for condition/background selection
   ======================================== */

.visual-grid-selector {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.visual-grid-selector-label {
    font-family: var(--font-primary);
    font-size: 11px;
    font-weight: 500;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Selected preview - shows current selection */
.visual-grid-selected {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 8px 0 0;
    background: transparent;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: box-shadow var(--duration-fast) ease, border-color var(--duration-fast) ease;
    min-width: 160px;
    overflow: hidden;
}

/* Hover – outward shadow, no background change */
.visual-grid-selected:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

/* Open state – keep border, no special "selected" effect */
.visual-grid-selector.open .visual-grid-selected {
    border-color: var(--color-text-secondary);
}

.visual-grid-selected-image {
    width: 32px;
    height: 32px;
    object-fit: cover;
    border-radius: 0;
    background: var(--color-bg-tertiary);
    flex-shrink: 0;
    display: block;
}

/* Icon display for selectors without images (e.g., Material Auto) */
.visual-grid-selected-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-tertiary);
    flex-shrink: 0;
}

.visual-grid-selected-icon i {
    font-size: 14px;
    color: var(--color-text-secondary);
}

/* For color swatch in background selector */
.visual-grid-selected-swatch {
    width: 32px;
    height: 32px;
    border-radius: 0;
    flex-shrink: 0;
    border: none;
    display: block;
}

/* Hide helper for visual grid elements */
.visual-grid-selected-icon.hidden,
.visual-grid-selected-swatch.hidden,
.visual-grid-selected-image.hidden {
    display: none !important;
}

.visual-grid-selected-info {
    flex: 1;
    min-width: 0;
}

.visual-grid-selected-name {
    font-family: var(--font-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.visual-grid-selected-chevron {
    font-size: 10px;
    color: var(--color-text-secondary);
    transition: transform var(--duration-fast) ease;
}

.visual-grid-selector.open .visual-grid-selected-chevron {
    transform: rotate(180deg);
}

/* Ensure open selector creates proper stacking context above other elements */
.visual-grid-selector.open {
    z-index: var(--z-index-dropdown);
}

/* Grid dropdown - appears below the selected preview */
.visual-grid-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: var(--z-index-dropdown);
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border-medium);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
    padding: 12px;
    min-width: 320px;
    max-width: 400px;
    max-height: 400px;
    overflow-y: auto;
}

.visual-grid-selector.open .visual-grid-dropdown {
    display: block;
    animation: fadeInDropdown var(--duration-fast) ease;
}

/* Search input for visual grid dropdowns - extends .form-input */
.visual-grid-search {
    margin-bottom: var(--spacing-sm);
}

/* Hide filtered items */
.visual-grid-tile.hidden,
.visual-grid-category.hidden {
    display: none !important;
}

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

/* Category dividers within the grid */
.visual-grid-category {
    padding: 6px 4px 4px;
    font-family: var(--font-primary);
    font-size: 10px;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-tertiary);
    border-top: 1px solid var(--color-border-light);
    margin-top: 8px;
    margin-bottom: 8px;
}

.visual-grid-category:first-child {
    border-top: none;
    margin-top: 0;
    padding-top: 0;
}

/* 4-column grid (default for backgrounds) */
.visual-grid-options {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
}

/* Condition selector: 3 columns with much larger tiles for better visibility */
#condition-dropdown .visual-grid-options {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-sm);
}

/* Top-level options (like Auto) - single column for standalone display */
.visual-grid-options-top {
    grid-template-columns: 1fr !important;
    max-width: 160px;
    margin-bottom: var(--spacing-sm);
    padding-bottom: var(--spacing-sm);
    border-bottom: 1px solid var(--color-border-light);
}

#condition-dropdown .visual-grid-tile-image {
    height: 160px;
}

#condition-dropdown .visual-grid-tile-label {
    font-size: var(--font-size-sm);
    padding: var(--spacing-xs) var(--spacing-xs);
}

#condition-dropdown {
    min-width: 520px;
    max-width: 640px;
}

/* Constrain dropdowns near viewport edge */
#material-selector .visual-grid-dropdown,
#background-selector .visual-grid-dropdown {
    max-width: calc(100vw - 32px);
}

/* Disabled state for condition selector (Fast mode) */
.visual-grid-selector.disabled {
    opacity: 0.5;
    pointer-events: none;
    position: relative;
}

.visual-grid-selector.disabled::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: transparent;
    cursor: not-allowed;
    pointer-events: auto;
}

.visual-grid-selector.disabled .visual-grid-selected {
    cursor: not-allowed;
}

/* Disabled state for reference arrays (Fast mode) */
.reference-array-container.disabled {
    opacity: 0.4;
    pointer-events: none;
}

/* Hide reference arrays entirely in Fast mode for cleaner UI */
.image-card.fast-mode .reference-array-container {
    display: none;
}

/* Individual grid tile */
.visual-grid-tile {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0;
    background: var(--color-bg-secondary);
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: box-shadow var(--duration-fast) ease, outline var(--duration-fast) ease;
    overflow: hidden;
    position: relative;
}

.visual-grid-tile:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.1);
}

.visual-grid-tile:focus-visible {
    outline: 2px solid var(--color-accent-blue);
    outline-offset: 2px;
}

.visual-grid-tile.selected {
    outline: 2px solid var(--color-text-primary);
    outline-offset: -2px;
    border-radius: var(--radius-sm);
}

/* Tile image - twice as tall as the current enum height (32px * 2 = 64px) */
.visual-grid-tile-image {
    width: 100%;
    height: 64px;
    object-fit: cover;
    border-radius: 0;
    background: var(--color-bg-tertiary);
    display: block;
}

/* Color swatch for background tiles */
.visual-grid-tile-swatch {
    width: 100%;
    height: 64px;
    border-radius: 0;
    border: none;
    display: block;
}

/* Custom color tile - special styling with soft pastel rainbow */
.visual-grid-tile.custom-color-tile .visual-grid-tile-swatch {
    display: flex;
    align-items: center;
    justify-content: center;
    background: conic-gradient(
        from 0deg,
        hsl(0, 60%, 75%),
        hsl(45, 60%, 75%),
        hsl(90, 50%, 70%),
        hsl(135, 45%, 70%),
        hsl(180, 50%, 70%),
        hsl(225, 55%, 75%),
        hsl(270, 50%, 75%),
        hsl(315, 55%, 75%),
        hsl(360, 60%, 75%)
    );
    position: relative;
}

.visual-grid-tile.custom-color-tile .visual-grid-tile-swatch::after {
    content: '+';
    position: absolute;
    font-size: 18px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* When a custom color is set AND selected, show that color with inset */
.visual-grid-tile.custom-color-tile.has-color.selected .visual-grid-tile-swatch {
    background: var(--custom-bg-color, #888);
    /* Inset to account for the selection outline */
    margin: 2px;
    width: calc(100% - 4px);
    height: calc(64px - 4px);
    border-radius: calc(var(--radius-sm) - 2px) calc(var(--radius-sm) - 2px) 0 0;
}

.visual-grid-tile.custom-color-tile.has-color.selected .visual-grid-tile-swatch::after {
    content: none;
}

/* When custom has color but is NOT selected, show the gradient */
.visual-grid-tile.custom-color-tile.has-color:not(.selected) .visual-grid-tile-swatch {
    background: conic-gradient(
        from 0deg,
        hsl(0, 60%, 75%),
        hsl(45, 60%, 75%),
        hsl(90, 50%, 70%),
        hsl(135, 45%, 70%),
        hsl(180, 50%, 70%),
        hsl(225, 55%, 75%),
        hsl(270, 50%, 75%),
        hsl(315, 55%, 75%),
        hsl(360, 60%, 75%)
    );
}

.visual-grid-tile.custom-color-tile.has-color:not(.selected) .visual-grid-tile-swatch::after {
    content: '+';
}

/* Inset label for custom tile when selected */
.visual-grid-tile.custom-color-tile.selected .visual-grid-tile-label {
    margin: 0 2px 2px 2px;
    width: calc(100% - 4px);
    border-radius: 0 0 calc(var(--radius-sm) - 2px) calc(var(--radius-sm) - 2px);
}

/* Responsive height adjustment for custom tile inset */
@media (max-width: 480px) {
    .visual-grid-tile.custom-color-tile.has-color.selected .visual-grid-tile-swatch {
        height: calc(56px - 4px);
    }
}

/* Icon-based tiles (Upload, Library) for global reference selection */
.visual-grid-tile-icon {
    width: 100%;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-tertiary);
    border-bottom: 1px solid var(--color-border-light);
}

.visual-grid-tile-icon i {
    font-size: 20px;
    color: var(--color-text-secondary);
    transition: color var(--duration-fast) ease;
}

.visual-grid-tile.global-ref-tile:hover .visual-grid-tile-icon i {
    color: var(--color-text-primary);
}

.visual-grid-tile.global-ref-tile.selected .visual-grid-tile-icon {
    background: var(--color-bg-secondary);
}

.visual-grid-tile.global-ref-tile.selected .visual-grid-tile-icon i {
    color: var(--color-text-primary);
}

/* When global ref tile has an image selected, show thumbnail */
.visual-grid-tile.global-ref-tile.has-image .visual-grid-tile-icon {
    padding: 0;
}

.visual-grid-tile.global-ref-tile.has-image .visual-grid-tile-icon i {
    display: none;
}

.visual-grid-tile.global-ref-tile .global-ref-thumb {
    display: none;
    width: 100%;
    height: 64px;
    object-fit: cover;
}

.visual-grid-tile.global-ref-tile.has-image .global-ref-thumb {
    display: block;
}

/* Tile label */
.visual-grid-tile-label {
    font-family: var(--font-primary);
    font-size: 10px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    padding: 2px 2px;
    background: var(--color-bg-secondary);
}

.visual-grid-tile.selected .visual-grid-tile-label {
    color: var(--color-text-primary);
    font-weight: var(--font-weight-semibold);
    background: var(--color-bg-primary);
}

/* Dark theme adjustments */
[data-theme="dark"] .visual-grid-selected {
    border-color: var(--color-border);
}

[data-theme="dark"] .visual-grid-selected:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .visual-grid-dropdown {
    background: var(--color-bg-primary);
    border-color: var(--color-border-light);
}

[data-theme="dark"] .visual-grid-tile:hover {
    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.1), 0 0 0 1px rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .visual-grid-tile.selected {
    outline-color: var(--color-text-primary);
}

[data-theme="dark"] .visual-grid-tile-label {
    background: var(--color-bg-primary);
}

[data-theme="dark"] .visual-grid-tile.selected .visual-grid-tile-label {
    background: var(--color-bg-secondary);
}

/* Mobile: full-width dropdowns positioned by JS */
@media (max-width: 768px) {
    .render-page {
        overflow-x: hidden;
    }

    /* When JS sets .mobile-dropdown, stretch to full viewport width */
    .visual-grid-dropdown.mobile-dropdown {
        width: calc(100vw - 16px);
        min-width: unset;
        max-width: none;
        max-height: 60vh;
        /* left is set inline by JS to align with viewport edge */
    }

    /* Condition dropdown: override large desktop min-width */
    #condition-dropdown.mobile-dropdown {
        min-width: unset;
    }

    #condition-dropdown .visual-grid-options {
        grid-template-columns: repeat(3, 1fr);
    }

    #condition-dropdown .visual-grid-tile-image {
        height: 100px;
    }

    #condition-dropdown .visual-grid-tile-label {
        font-size: 11px;
    }
}

@media (max-width: 480px) {
    .visual-grid-dropdown.mobile-dropdown {
        width: calc(100vw - 12px);
        max-height: 55vh;
    }

    .visual-grid-options {
        grid-template-columns: repeat(3, 1fr);
    }

    .visual-grid-tile-image,
    .visual-grid-tile-swatch {
        height: 56px;
    }

    #condition-dropdown .visual-grid-tile-image {
        height: 80px;
    }
}

/* ========================================
   COLOR PICKER MODAL
   HSV Color Wheel with Triangle
   ======================================== */

/* Color picker modal - must appear above image editor modal */
#colorPickerModal {
    z-index: var(--z-index-modal-stacked);
}

.color-picker-modal.modal-content {
    max-width: 320px;
}

.color-picker-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-md);
}

/* Color wheel container */
.color-wheel-container {
    position: relative;
    width: 240px;
    height: 240px;
    user-select: none;
}

.color-wheel-container canvas {
    display: block;
    cursor: crosshair;
}

/* Hue handle - small rectangle on the outer ring */
.color-wheel-hue-handle {
    position: absolute;
    width: 10px;
    height: 20px;
    background: #fff;
    border: 2px solid #333;
    border-radius: 3px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
    pointer-events: none;
    transform: translate(-50%, -50%);
    z-index: 2;
}

/* SV handle - circle inside the triangle */
.color-wheel-sv-handle {
    position: absolute;
    width: 16px;
    height: 16px;
    background: transparent;
    border: 3px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 1px #333, 0 2px 6px rgba(0, 0, 0, 0.4);
    pointer-events: none;
    transform: translate(-50%, -50%);
    z-index: 2;
}

/* Color preview & hex row */
.color-picker-result {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    width: 100%;
}

.color-picker-preview-swatch {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border-medium);
    flex-shrink: 0;
}

/* Hex input */
.color-picker-hex-input {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    flex: 1;
}

.color-picker-hex-input label {
    font-family: var(--font-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
}

.color-picker-hex-input input {
    flex: 1;
    padding: 8px 10px;
    font-family: var(--font-mono);
    font-size: var(--font-size-sm);
    text-transform: uppercase;
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-medium);
    border-radius: var(--radius-sm);
    color: var(--color-text-primary);
    text-align: center;
}

.color-picker-hex-input input:focus {
    outline: none;
    border-color: var(--color-text-primary);
}

/* Eyedropper button */
.color-picker-eyedropper-btn {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border-medium);
    border-radius: var(--radius-sm);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all var(--duration-fast) ease;
    flex-shrink: 0;
}

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

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

.color-picker-eyedropper-btn i {
    font-size: 16px;
}

/* Hide eyedropper button if EyeDropper API not supported */
.color-picker-eyedropper-btn.unsupported {
    display: none;
}

/* Dark theme */
[data-theme="dark"] .color-picker-eyedropper-btn {
    background: var(--color-bg-tertiary);
}

[data-theme="dark"] .color-picker-eyedropper-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* Dark theme */
[data-theme="dark"] .color-picker-hex-input input {
    background: var(--color-bg-tertiary);
}

[data-theme="dark"] .color-wheel-hue-handle {
    background: #222;
    border-color: #fff;
}

[data-theme="dark"] .color-wheel-sv-handle {
    border-color: #fff;
    box-shadow: 0 0 0 1px #000, 0 2px 6px rgba(0, 0, 0, 0.6);
}

/* ========================================
   FAST MODE MODAL
   ======================================== */

#fastModeModal .modal-body p {
    margin-bottom: 12px;
}

#fastModeModal .modal-body ul {
    margin: 0 0 16px 0;
    padding-left: 20px;
    color: var(--color-text-secondary);
    list-style-type: disc;
}

#fastModeModal .modal-body li {
    margin-bottom: 8px;
}

#fastModeModal .modal-body li:last-child {
    margin-bottom: 0;
}

#fastModeModal .modal-body .fast-mode-hint {
    margin-top: 16px;
    color: var(--color-text-secondary);
}

#fastModeModal .modal-body .fast-mode-hint i {
    margin-right: 6px;
}

#fastModeModal .modal-footer {
    display: flex;
    gap: 12px;
}

/* ========================================
   GIF PROGRESS MODAL
   ======================================== */

#gifProgressModal .modal-body {
    text-align: center;
}

#gifProgressModal #gifProgressStatus {
    margin-bottom: var(--spacing-md);
    color: var(--text-secondary);
}

#gifProgressModal .progress {
    margin-bottom: var(--spacing-md);
}

#gifProgressModal #gifProgressPercent {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

/* ========================================
   MONTHLY LIMIT MODAL
   ======================================== */

#monthlyLimitModal .modal-body p + .alert + p {
    margin-top: var(--spacing-sm);
}

/* Admin nav chevron size is in css/components/header.css */
/**
 * Affiliate Pages Styles
 * Dashboard, stats, and affiliate program info
 * Compact styling matching settings page
 */

/* ========================================
   PAGE LAYOUT
   ======================================== */

.logged-in-content {
    padding: 6rem 1rem 2rem; /* Match settings page padding */
    min-height: 100vh;
    background-color: var(--color-bg-primary);
}

.page-container {
    max-width: var(--container-lg);
    margin: 0 auto;
}

/* ========================================
   PAGE TITLE
   ======================================== */

.page-title {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: calc(var(--font-size-3xl) * 0.9);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-tight);
    color: var(--color-text-primary);
    margin-bottom: 1.5rem;
    text-align: center;
}

/* ========================================
   LOADING STATE
   ======================================== */

.loading-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    text-align: center;
}

.loading-text {
    color: var(--color-text-secondary);
    margin-top: 0.5rem;
    font-size: var(--font-size-sm);
}

/* ========================================
   AFFILIATE EMPTY STATE
   ======================================== */

.affiliate-empty-state {
    text-align: center;
    padding: 1.5rem 1rem;
}

.affiliate-empty-state i {
    font-size: 3rem;
    color: var(--color-text-muted);
    margin-bottom: 0.75rem;
}

.affiliate-empty-state .affiliate-icon-error {
    color: var(--color-error);
}

.affiliate-empty-state h2 {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: calc(var(--font-size-xl) * 0.9);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-tight);
    color: var(--color-text-primary);
    margin-bottom: 0.5rem;
}

.affiliate-empty-state p {
    color: var(--color-text-secondary);
    margin-bottom: 0.75rem;
    line-height: var(--line-height-relaxed);
    font-size: var(--font-size-sm);
}

/* ========================================
   REFERRAL CARD
   ======================================== */

.affiliate-referral-card {
    margin-bottom: 1rem;
}

/* Compact padding for card body */
.affiliate-referral-card .card-body {
    padding: 0.75rem 1rem;
}

.referral-link-box {
    width: 100%;
}

.referral-link-box .input-group {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.375rem;
}

/* Ensure the input shows its border properly - override default input-group behavior */
.referral-link-box .input-group .form-control {
    flex: 1;
    min-width: 0; /* Allow shrinking */
    border: var(--border-width-thin) solid var(--color-border-medium) !important;
    border-radius: var(--radius-md) !important;
}

.referral-link-box .input-group .form-control:focus {
    border-color: var(--color-border-heavy) !important;
}

.referral-code-text {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    margin: 0;
}

.referral-code-text strong {
    color: var(--color-brand-primary);
    font-family: var(--font-mono);
}

/* ========================================
   STATS CARD
   ======================================== */

.affiliate-stats-card {
    margin-bottom: 1rem;
}

.affiliate-stats-card .card-body {
    padding: 0.75rem;
}

.affiliate-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
}

/* Stat boxes use global .stat-box styles from cards.css */

/* ========================================
   AFFILIATE INFO CARD - HOW IT WORKS
   ======================================== */

.affiliate-info-card {
    margin-top: 1rem;
}

/* Compact padding for card body */
.affiliate-info-card .card-body {
    padding: 0.75rem;
}

.affiliate-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
}

/* Step tiles - extend global .stat-box pattern */
.affiliate-step {
    background-color: var(--color-bg-surface);
    border: var(--border-width-thin) solid var(--color-border-medium);
    border-radius: var(--radius-sm);
    padding: var(--spacing-sm);
    text-align: center;
    transition: border-color var(--duration-fast) ease,
                box-shadow var(--duration-fast) ease;
}

.affiliate-step:hover {
    border-color: var(--color-border-heavy);
    box-shadow: var(--shadow-hover);
}

/* Step number styled like stat-value */
.affiliate-step-number {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin-bottom: 0.125rem;
}

.affiliate-step h6 {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-normal);
    color: var(--color-text-muted);
    margin-bottom: 0.25rem;
}

.affiliate-step p {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    margin: 0;
    line-height: var(--line-height-normal);
}

/* ========================================
   COMMISSIONS TABLE
   ======================================== */

/* Remove all padding from card body for full-width table */
#affiliate-dashboard .card .card-body:has(.table-responsive) {
    padding: 0;
}

/* Remove any margin from table container */
#affiliate-dashboard .table-responsive {
    margin: 0;
}

/* Table should touch the card header divider */
#affiliate-dashboard .table {
    margin: 0;
    font-size: var(--font-size-sm);
}

/* Compact table cells */
#affiliate-dashboard .table th,
#affiliate-dashboard .table td {
    padding: 0.5rem 0.75rem;
}

/* Add some padding back to no-commissions message */
#affiliate-dashboard .table-empty {
    padding: 1rem;
}

/* ========================================
   AFFILIATE CARDS - COMPACT STYLING
   ======================================== */

#affiliate-dashboard .card {
    margin-bottom: 1rem;
    border: none;
    box-shadow: var(--shadow-xl);
}

#affiliate-dashboard .card:last-child {
    margin-bottom: 0;
}

/* Compact card headers */
#affiliate-dashboard .card-header {
    padding: 0.75rem 1rem;
}

#affiliate-dashboard .card-header h5 {
    font-size: var(--font-size-base);
    margin: 0;
}

/* Compact card body */
#affiliate-dashboard .card-body {
    padding: 1rem;
}

/* ========================================
   DARK THEME
   ======================================== */


[data-theme="dark"] .referral-code-text strong {
    color: var(--color-accent-industrial);
}

/* ========================================
   RESPONSIVE
   ======================================== */

@media (max-width: 1024px) {
    .affiliate-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .logged-in-content {
        padding: 5rem 0.75rem 1.5rem;
    }

    .affiliate-stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.375rem;
    }

    .affiliate-steps {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }

    .affiliate-step {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 0.5rem;
    }
}

@media (max-width: 480px) {
    .referral-link-box .input-group {
        flex-direction: column;
    }

    .referral-link-box .input-group .btn {
        width: 100%;
    }
}

/* =====================================================
   SEO TEMPLATE PAGE STYLES
   ===================================================== */

.seo-software-for,
.seo-software-name {
    display: inline;
    font-family: var(--font-display);
    font-size: clamp(calc(2.5rem * 0.9), calc(6vw * 0.9), calc(4.5rem * 0.9));
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-tight);
    color: var(--color-text-primary);
    line-height: var(--line-height-tight);
}

.seo-software-for {
    margin-right: 0.15em;
}

.seo-software-name {
    text-decoration: underline;
    text-decoration-thickness: var(--border-width-medium);
    text-underline-offset: 0.2em;
}

.seo-software-feature {
    background-color: var(--color-bg-primary);
}

.seo-software-feature .feature-title {
    color: var(--color-text-primary);
}

.seo-software-name-red {
    color: var(--color-error);
}

.seo-feature-list {
    list-style: disc;
    padding-left: 1.2em;
    margin: var(--spacing-md) 0 0 0;
}

.seo-feature-list li {
    font-family: var(--font-mono);
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    line-height: var(--line-height-relaxed);
    margin-bottom: var(--spacing-sm);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-normal);
}

.seo-faq-section {
    background-color: var(--color-bg-secondary);
    padding: var(--spacing-lg) 0 !important;
}

.seo-faq-section .container {
    max-width: 900px;
    margin: 0 auto;
}

.seo-faq-section .feature-grid {
    grid-template-columns: 1fr;
}

.seo-faq-header {
    text-align: center;
    margin-bottom: var(--spacing-sm);
}

.seo-faq-title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-tight);
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-sm);
}

.seo-faq-subtitle {
    font-family: var(--font-mono);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
}

.seo-faq-categories {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.seo-faq-software-name {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

@media (max-width: 768px) {
    .seo-software-for,
    .seo-software-name {
        font-size: clamp(calc(2.5rem * 0.9), calc(6vw * 0.9), calc(4.5rem * 0.9));
    }

    .seo-faq-title {
        font-size: clamp(1.5rem, 5vw, 2rem);
    }
}