/* ============================================================================
   PTO & PUMP CALCULATOR - DESIGN SYSTEM
   A calm, professional, eye-strain-reducing UI refresh
   ============================================================================ */

/* Import modern fonts */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Exo+2:wght@300;400;600;700&display=swap');

/* ============================================================================
   DESIGN TOKENS - The Foundation of the Design System
   ============================================================================ */

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

    /* ----- Typography Scale ----- */
    --font-primary: 'Exo 2', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-display: 'Orbitron', monospace;

    --text-xs: 0.75rem;    /* 12px */
    --text-sm: 0.875rem;   /* 14px */
    --text-base: 1rem;     /* 16px */
    --text-lg: 1.125rem;   /* 18px */
    --text-xl: 1.25rem;    /* 20px */
    --text-2xl: 1.5rem;    /* 24px */
    --text-3xl: 2rem;      /* 32px */
    --text-4xl: 2.5rem;    /* 40px */

    --leading-tight: 1.25;
    --leading-normal: 1.5;
    --leading-relaxed: 1.75;

    /* ----- Border Radius Scale ----- */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px;

    /* ----- Shadow Scale ----- */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);

    /* ----- Transition Durations ----- */
    --transition-fast: 150ms;
    --transition-normal: 250ms;
    --transition-slow: 350ms;

    /* ----- Z-Index Scale ----- */
    --z-base: 0;
    --z-elevated: 10;
    --z-overlay: 100;
    --z-modal: 1000;
    --z-tooltip: 1100;
}

/* ============================================================================
   DARK THEME (Default)
   Soft, muted dark colors - no pure black
   ============================================================================ */

:root,
[data-theme="dark"] {
    /* ----- Background Colors ----- */
    --bg-primary: #0f1419;       /* Soft dark blue-black */
    --bg-secondary: #1a2332;     /* Slightly lighter */
    --bg-tertiary: #243447;      /* Cards and elevated surfaces */
    --bg-elevated: #2d3f54;      /* Hover states, active elements */
    --bg-overlay: rgba(15, 20, 25, 0.85);

    /* ----- Surface Colors (for cards, inputs, etc.) ----- */
    --surface-primary: rgba(36, 52, 71, 0.6);
    --surface-secondary: rgba(45, 63, 84, 0.5);
    --surface-glass: rgba(26, 35, 50, 0.8);

    /* ----- Text Colors ----- */
    --text-primary: #e8edf2;     /* Main text - soft white */
    --text-secondary: #9fb3c8;   /* Secondary text - muted blue-gray */
    --text-tertiary: #6b8299;    /* Placeholder, disabled */
    --text-inverse: #0f1419;     /* Text on light backgrounds */

    /* ----- Accent Colors (Muted, Professional) ----- */
    --accent-primary: #4da6c9;   /* Calmer teal-blue */
    --accent-secondary: #7c8ce0; /* Soft purple-blue */
    --accent-highlight: #5bb8d4; /* Slightly brighter for focus */

    /* ----- Status Colors ----- */
    --color-success: #4ade80;    /* Green - passes */
    --color-success-muted: rgba(74, 222, 128, 0.2);
    --color-warning: #fbbf24;    /* Amber - cautions */
    --color-warning-muted: rgba(251, 191, 36, 0.25);
    --color-error: #f87171;      /* Soft red - errors */
    --color-error-muted: rgba(248, 113, 113, 0.25);
    --color-info: #60a5fa;       /* Blue - informational */
    --color-info-muted: rgba(96, 165, 250, 0.15);

    /* ----- Border Colors ----- */
    --border-default: rgba(159, 179, 200, 0.15);
    --border-hover: rgba(159, 179, 200, 0.25);
    --border-focus: var(--accent-primary);
    --border-accent: rgba(77, 166, 201, 0.3);

    /* ----- Focus & Glow Effects ----- */
    --focus-ring: 0 0 0 2px var(--bg-primary), 0 0 0 4px var(--accent-primary);
    --glow-accent: 0 0 12px rgba(77, 166, 201, 0.2);
    --glow-success: 0 0 0 3px rgba(74, 222, 128, 0.4), 0 0 12px rgba(74, 222, 128, 0.3);
    --glow-warning: 0 0 0 3px rgba(251, 191, 36, 0.5), 0 0 16px rgba(251, 191, 36, 0.4);
    --glow-error: 0 0 0 3px rgba(248, 113, 113, 0.5), 0 0 16px rgba(248, 113, 113, 0.4);

    /* ----- Gradient Accents (Subtle) ----- */
    --gradient-primary: linear-gradient(135deg, #4da6c9 0%, #7c8ce0 100%);
    --gradient-surface: linear-gradient(180deg, var(--bg-secondary) 0%, var(--bg-primary) 100%);
    --gradient-button: linear-gradient(135deg, #4da6c9 0%, #5bb8d4 100%);

    /* ----- Scrollbar ----- */
    --scrollbar-track: var(--bg-secondary);
    --scrollbar-thumb: var(--bg-elevated);
    --scrollbar-thumb-hover: var(--accent-primary);
}

/* ============================================================================
   LIGHT THEME
   Soft, warm light colors - no pure white
   ============================================================================ */

[data-theme="light"] {
    /* ----- Background Colors ----- */
    --bg-primary: #f5f7fa;       /* Soft warm gray */
    --bg-secondary: #ebeef3;     /* Slightly darker */
    --bg-tertiary: #ffffff;      /* Cards (okay for cards since surrounded by gray) */
    --bg-elevated: #e2e6ec;      /* Hover states */
    --bg-overlay: rgba(245, 247, 250, 0.9);

    /* ----- Surface Colors ----- */
    --surface-primary: rgba(255, 255, 255, 0.8);
    --surface-secondary: rgba(235, 238, 243, 0.9);
    --surface-glass: rgba(255, 255, 255, 0.85);

    /* ----- Text Colors ----- */
    --text-primary: #1a2332;     /* Main text - soft dark */
    --text-secondary: #4a5a6f;   /* Secondary text */
    --text-tertiary: #7a8a9f;    /* Placeholder, disabled */
    --text-inverse: #f5f7fa;     /* Text on dark backgrounds */

    /* ----- Accent Colors (Professional) ----- */
    --accent-primary: #2d7d9a;   /* Deeper teal for contrast */
    --accent-secondary: #5c6bc0; /* Deeper purple-blue */
    --accent-highlight: #3498b8; /* Brighter for focus */

    /* ----- Status Colors (Darker for light bg) ----- */
    --color-success: #16a34a;    /* Green - passes */
    --color-success-muted: rgba(22, 163, 74, 0.15);
    --color-warning: #d97706;    /* Amber - cautions */
    --color-warning-muted: rgba(217, 119, 6, 0.15);
    --color-error: #dc2626;      /* Red - errors */
    --color-error-muted: rgba(220, 38, 38, 0.12);
    --color-info: #2563eb;       /* Blue - informational */
    --color-info-muted: rgba(37, 99, 235, 0.1);

    /* ----- Border Colors ----- */
    --border-default: rgba(26, 35, 50, 0.12);
    --border-hover: rgba(26, 35, 50, 0.2);
    --border-focus: var(--accent-primary);
    --border-accent: rgba(45, 125, 154, 0.25);

    /* ----- Focus & Glow Effects ----- */
    --focus-ring: 0 0 0 2px var(--bg-primary), 0 0 0 4px var(--accent-primary);
    --glow-accent: 0 0 12px rgba(45, 125, 154, 0.15);
    --glow-success: 0 0 0 3px rgba(22, 163, 74, 0.35), 0 0 12px rgba(22, 163, 74, 0.25);
    --glow-warning: 0 0 0 3px rgba(217, 119, 6, 0.4), 0 0 16px rgba(217, 119, 6, 0.3);
    --glow-error: 0 0 0 3px rgba(220, 38, 38, 0.4), 0 0 16px rgba(220, 38, 38, 0.3);

    /* ----- Gradients ----- */
    --gradient-primary: linear-gradient(135deg, #2d7d9a 0%, #5c6bc0 100%);
    --gradient-surface: linear-gradient(180deg, var(--bg-secondary) 0%, var(--bg-primary) 100%);
    --gradient-button: linear-gradient(135deg, #2d7d9a 0%, #3498b8 100%);

    /* ----- Scrollbar ----- */
    --scrollbar-track: var(--bg-secondary);
    --scrollbar-thumb: #c5cdd8;
    --scrollbar-thumb-hover: var(--accent-primary);

    /* ----- Shadows (More visible on light) ----- */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.12);
    --shadow-xl: 0 20px 30px rgba(0, 0, 0, 0.15);
}

/* ============================================================================
   REDUCED MOTION SUPPORT
   ============================================================================ */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ============================================================================
   GLOBAL RESET AND BASE STYLES
   ============================================================================ */

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-primary);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    color: var(--text-primary);
    background: var(--bg-primary);
    min-height: 100vh;
    overflow-x: hidden;
    transition: background-color var(--transition-normal) ease,
                color var(--transition-normal) ease;
}

/* ============================================================================
   BACKGROUND - Simplified, Calm
   Removed: floating particles, animated grid, gradient animation
   ============================================================================ */

.background-animation {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: var(--gradient-surface);
    pointer-events: none;
}

/* Static subtle grid overlay - no animation */
.grid-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        linear-gradient(var(--border-default) 1px, transparent 1px),
        linear-gradient(90deg, var(--border-default) 1px, transparent 1px);
    background-size: 60px 60px;
    opacity: 0.4;
    /* No animation - static pattern */
}

/* Hide particles by default - keeping HTML structure for backwards compat */
.floating-particles,
.particle {
    display: none;
}

/* ============================================================================
   MAIN CONTAINER
   ============================================================================ */

.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: var(--space-lg);
    position: relative;
    z-index: var(--z-base);
}

/* ============================================================================
   HEADER STYLING
   ============================================================================ */

.main-header {
    text-align: center;
    margin-bottom: var(--space-2xl);
    position: relative;
}

.title-glow {
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 4vw, var(--text-4xl));
    font-weight: 700;
    color: var(--accent-primary);
    margin-bottom: var(--space-sm);
    text-align: center;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    letter-spacing: 1px;
    /* No text-shadow glow - cleaner look */
}

.title-glow i {
    color: var(--accent-primary);
    font-size: 0.85em;
    /* No filter glow or animation */
}

.subtitle {
    font-size: var(--text-base);
    color: var(--text-secondary);
    font-weight: 400;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* Info button in header */
.title-info-btn {
    background: var(--surface-primary);
    border: 1px solid var(--border-default);
    color: var(--accent-primary);
    font-size: var(--text-lg);
    cursor: pointer;
    padding: var(--space-sm);
    border-radius: var(--radius-full);
    transition: all var(--transition-fast) ease;
    position: absolute;
    top: var(--space-md);
    right: var(--space-md);
    z-index: var(--z-elevated);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.title-info-btn:hover {
    background: var(--bg-elevated);
    border-color: var(--accent-primary);
    transform: scale(1.05);
}

.title-info-btn:focus {
    outline: none;
    box-shadow: var(--focus-ring);
}

/* ============================================================================
   THEME TOGGLE
   ============================================================================ */

.theme-toggle {
    position: fixed;
    top: var(--space-lg);
    right: var(--space-lg);
    z-index: var(--z-overlay);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.theme-toggle-btn {
    background: var(--surface-glass);
    border: 1px solid var(--border-default);
    color: var(--text-secondary);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-full);
    cursor: pointer;
    font-family: var(--font-primary);
    font-size: var(--text-sm);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    transition: all var(--transition-fast) ease;
    backdrop-filter: blur(8px);
}

.theme-toggle-btn:hover {
    background: var(--bg-elevated);
    border-color: var(--border-hover);
    color: var(--text-primary);
}

.theme-toggle-btn:focus {
    outline: none;
    box-shadow: var(--focus-ring);
}

.theme-toggle-btn i {
    font-size: var(--text-base);
}

/* ============================================================================
   FORM STYLING
   ============================================================================ */

.calculation-form {
    background: var(--surface-glass);
    backdrop-filter: blur(12px);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-xl);
    padding: var(--space-xl);
    margin-bottom: var(--space-xl);
    box-shadow: var(--shadow-lg);
    position: relative;
    /* Removed ::before shimmer animation */
}

/* Remove shimmer animation from form */
.calculation-form::before {
    display: none;
}

.form-grid {
    display: grid;
    gap: var(--space-lg);
}

.input-group {
    position: relative;
}

.input-label {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: var(--space-sm);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.input-label i {
    color: var(--accent-primary);
    font-size: var(--text-base);
    /* No filter glow */
}

/* Label with toggle - for flow rate unit selection */
.label-with-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    margin-bottom: var(--space-sm);
}

.label-with-toggle .input-label {
    margin-bottom: 0;
}

.unit-toggle {
    display: flex;
    gap: 2px;
    background: var(--surface-secondary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    padding: 2px;
}

.unit-toggle-btn {
    padding: 4px 10px;
    font-size: var(--text-xs);
    font-weight: 600;
    font-family: var(--font-primary);
    color: var(--text-tertiary);
    background: transparent;
    border: none;
    border-radius: calc(var(--radius-md) - 2px);
    cursor: pointer;
    transition: all var(--transition-fast) ease;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.unit-toggle-btn:hover {
    color: var(--text-secondary);
    background: var(--surface-glass);
}

.unit-toggle-btn.active {
    color: var(--text-inverse);
    background: var(--accent-primary);
    box-shadow: var(--shadow-sm);
}

.unit-toggle-btn:focus {
    outline: none;
}

/* ============================================================================
   INPUT AND SELECT STYLING
   ============================================================================ */

.modern-input,
.modern-select {
    width: 100%;
    padding: var(--space-md) var(--space-lg);
    background: var(--surface-secondary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    color: var(--text-primary);
    font-size: var(--text-base);
    font-family: var(--font-primary);
    transition: border-color var(--transition-fast) ease,
                box-shadow var(--transition-fast) ease,
                background-color var(--transition-fast) ease;
}

.modern-select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 48px;
    cursor: pointer;
}

.modern-select::-ms-expand {
    display: none;
}

.modern-input:hover,
.modern-select:hover {
    border-color: var(--border-hover);
    background: var(--surface-primary);
}

.modern-input:focus,
.modern-select:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: var(--glow-accent);
    background: var(--surface-primary);
    /* No transform on focus - keeps form stable */
}

.modern-input::placeholder {
    color: var(--text-tertiary);
}

/* Select wrapper for custom arrow */
.select-wrapper {
    position: relative;
}

.select-arrow {
    position: absolute;
    right: var(--space-md);
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-tertiary);
    pointer-events: none;
    transition: color var(--transition-fast) ease;
}

.select-wrapper:hover .select-arrow {
    color: var(--accent-primary);
}

/* ============================================================================
   INPUT VALIDATION STATES
   ============================================================================ */

.modern-input.field-caution,
.modern-select.field-caution {
    border: 2px solid var(--color-warning) !important;
    box-shadow: var(--glow-warning);
    background: var(--color-warning-muted);
}

.modern-input.field-error,
.modern-select.field-error {
    border: 2px solid var(--color-error) !important;
    box-shadow: var(--glow-error);
    background: var(--color-error-muted);
}

.modern-input.field-caution:focus,
.modern-select.field-caution:focus {
    box-shadow: 0 0 0 4px rgba(251, 191, 36, 0.4), 0 0 20px rgba(251, 191, 36, 0.35);
}

.modern-input.field-error:focus,
.modern-select.field-error:focus {
    box-shadow: 0 0 0 4px rgba(248, 113, 113, 0.4), 0 0 20px rgba(248, 113, 113, 0.35);
}

/* Read-only field styling */
.readonly,
.modern-input[readonly],
.modern-select[readonly] {
    background: var(--color-info-muted) !important;
    border-color: var(--color-info) !important;
    cursor: not-allowed;
    opacity: 0.8;
}

/* Autofilled field indicator - no visual styling to avoid confusion with validation states */
.autofilled {
    /* Class retained for JS functionality but no visual highlight */
    /* Previously showed green, removed to prevent confusion with error highlighting */
}

/* ============================================================================
   SPECS GRID
   ============================================================================ */

.specs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-md);
    margin-top: var(--space-md);
}

.triple-grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

/* ============================================================================
   SUBMIT CONTAINER AND BUTTONS
   ============================================================================ */

.submit-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
    margin-top: var(--space-xl);
}

.submit-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-lg);
    width: 100%;
    max-width: 500px;
}

/* Base button styles */
.submit-btn,
.reset-btn {
    border: none;
    padding: var(--space-md) var(--space-xl);
    border-radius: var(--radius-md);
    font-size: var(--text-base);
    font-weight: 600;
    font-family: var(--font-display);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: transform var(--transition-fast) ease,
                box-shadow var(--transition-fast) ease,
                background var(--transition-fast) ease,
                color var(--transition-fast) ease,
                border-color var(--transition-fast) ease;
    text-transform: uppercase;
    letter-spacing: 1px;
    min-width: 180px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
}

/* Submit button - primary action styling */
.submit-btn {
    background: var(--gradient-button);
    color: var(--text-inverse);
    box-shadow: var(--shadow-md);
}

/* Reset button - secondary/neutral styling (matches reset-btn-alt) */
.reset-btn {
    background: var(--surface-secondary);
    color: var(--text-secondary);
    border: 1px solid var(--border-default);
    box-shadow: var(--shadow-sm);
}

/* Remove shimmer animation from buttons */
.submit-btn::before,
.reset-btn::before {
    display: none;
}

.submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg), var(--glow-accent);
}

/* Reset button hover - red highlight like other reset buttons */
.reset-btn:hover {
    transform: translateY(-2px);
    background: var(--color-error-muted);
    color: var(--color-error);
    border-color: var(--color-error);
    box-shadow: var(--shadow-md);
}

.submit-btn:focus,
.reset-btn:focus {
    outline: none;
    box-shadow: var(--focus-ring);
}

.submit-btn:active,
.reset-btn:active {
    transform: translateY(0);
}

/* Loading state */
.submit-btn.loading,
.reset-btn.loading {
    pointer-events: none;
    opacity: 0.8;
}

.submit-btn.loading .btn-text,
.reset-btn.loading .btn-text {
    opacity: 0;
}

.submit-btn .spinner,
.reset-btn .spinner {
    display: none;
}

.submit-btn.loading .spinner,
.reset-btn.loading .spinner {
    display: block;
}

/* Shake animation - kept but subtle */
@keyframes btn-shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-4px); }
    40% { transform: translateX(4px); }
    60% { transform: translateX(-3px); }
    80% { transform: translateX(3px); }
}

.submit-btn.shake,
.reset-btn.shake {
    animation: btn-shake 0.4s ease;
}

/* Submit message */
#submit-msg {
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    text-align: center;
    min-height: 1.5em;
}

#submit-msg.is-error { color: var(--color-error); }
#submit-msg.is-warn { color: var(--color-warning); }
#submit-msg.is-clear { color: transparent; }

/* ============================================================================
   SPINNER
   ============================================================================ */

.spinner {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.spinner-ring {
    width: 22px;
    height: 22px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: var(--text-inverse);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ============================================================================
   RESULTS AND SUGGESTIONS SECTIONS
   ============================================================================ */

.result-section,
.suggestion-section {
    background: var(--surface-glass);
    backdrop-filter: blur(12px);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-xl);
    padding: var(--space-xl);
    margin-bottom: var(--space-xl);
    box-shadow: var(--shadow-lg);
    display: none;
}

.result-section.has-content,
.suggestion-section.has-content {
    display: block;
}

.result-section h3,
.suggestion-section h3 {
    color: var(--accent-primary);
    font-family: var(--font-display);
    font-size: var(--text-xl);
    margin-bottom: var(--space-lg);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
    position: relative;
    padding-bottom: var(--space-md);
}

.result-section h3::after,
.suggestion-section h3::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 2px;
    background: var(--gradient-primary);
    border-radius: var(--radius-full);
}

/* ============================================================================
   RESULTS GRID AND CARDS
   ============================================================================ */

.results-header h3 {
    color: var(--accent-primary);
    font-family: var(--font-display);
    font-size: var(--text-xl);
    margin-bottom: var(--space-lg);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
}

.results-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-lg);
    margin-bottom: var(--space-lg);
}

.result-card {
    background: var(--surface-secondary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    transition: border-color var(--transition-fast) ease,
                box-shadow var(--transition-fast) ease;
}

.result-card:hover {
    border-color: var(--border-accent);
    box-shadow: var(--shadow-md);
    /* No transform - keeps layout stable */
}

.result-card h4 {
    color: var(--accent-primary);
    font-family: var(--font-display);
    font-size: var(--text-base);
    margin-bottom: var(--space-md);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--border-default);
    padding-bottom: var(--space-sm);
}

.spec-item,
.efficiency-item,
.flow-item,
.power-item {
    margin-bottom: var(--space-sm);
    padding: var(--space-sm) 0;
    border-bottom: 1px solid var(--border-default);
}

.spec-item:last-child,
.efficiency-item:last-child,
.flow-item:last-child,
.power-item:last-child {
    border-bottom: none;
}

.efficiency-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.efficiency-label {
    color: var(--text-secondary);
}

.efficiency-value {
    color: var(--color-success);
    font-weight: 600;
    font-family: var(--font-display);
}

.flow-values,
.power-value {
    color: var(--text-primary);
    font-family: var(--font-display);
    font-weight: 500;
    margin-top: var(--space-xs);
}

.power-item {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.power-item strong {
    color: var(--accent-primary);
}

/* Summary Card */
.summary-card {
    background: var(--surface-secondary);
    border: 1px solid var(--border-accent);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    box-shadow: var(--shadow-md);
}

.summary-card h4 {
    color: var(--accent-primary);
    font-family: var(--font-display);
    font-size: var(--text-lg);
    margin-bottom: var(--space-lg);
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-md);
}

.summary-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-md);
    background: var(--surface-primary);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-default);
}

.summary-label {
    color: var(--text-secondary);
    font-weight: 500;
}

/* Status tags */
.status-tag {
    padding: var(--space-xs) var(--space-md);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-family: var(--font-display);
}

.status-tag.status-pass {
    background: var(--color-success-muted);
    color: var(--color-success);
    border: 1px solid var(--color-success);
}

.status-tag.status-warning {
    background: var(--color-warning-muted);
    color: var(--color-warning);
    border: 1px solid var(--color-warning);
}

.status-tag.status-fail {
    background: var(--color-error-muted);
    color: var(--color-error);
    border: 1px solid var(--color-error);
}

/* Status text classes */
.status-pass {
    color: var(--color-success) !important;
    font-weight: 600;
}

.status-warning {
    color: var(--color-warning) !important;
    font-weight: 600;
}

.status-fail {
    color: var(--color-error) !important;
    font-weight: 600;
}

/* ============================================================================
   CHAT INTERFACE
   ============================================================================ */

.chat-interface {
    background: var(--surface-glass);
    backdrop-filter: blur(12px);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-xl);
    padding: var(--space-xl);
    box-shadow: var(--shadow-lg);
    border-left: 3px solid var(--accent-secondary);
}

.chat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-lg);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--border-default);
}

.chat-title {
    color: var(--accent-secondary);
    font-family: var(--font-display);
    font-size: var(--text-lg);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.chat-title i {
    /* No animation */
}

.chat-status {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.status-indicator {
    width: 8px;
    height: 8px;
    background: var(--color-success);
    border-radius: 50%;
    /* Subtle pulse - only one animation kept */
    animation: subtle-pulse 2s ease-in-out infinite;
}

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

.chat-input-container {
    display: flex;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
}

.chat-input {
    flex: 1;
    padding: var(--space-md) var(--space-lg);
    background: var(--surface-secondary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-full);
    color: var(--text-primary);
    font-size: var(--text-base);
    font-family: var(--font-primary);
    transition: border-color var(--transition-fast) ease,
                box-shadow var(--transition-fast) ease;
}

.chat-input:focus {
    outline: none;
    border-color: var(--accent-secondary);
    box-shadow: 0 0 0 3px rgba(124, 140, 224, 0.2);
}

.chat-input::placeholder {
    color: var(--text-tertiary);
}

.chat-submit {
    background: var(--accent-secondary);
    border: none;
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--radius-full);
    color: var(--text-inverse);
    cursor: pointer;
    transition: background-color var(--transition-fast) ease,
                transform var(--transition-fast) ease;
}

.chat-submit:hover {
    background: #6b7bcf;
    transform: translateY(-1px);
}

.chat-submit:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(124, 140, 224, 0.3);
}

.chat-response {
    background: var(--surface-secondary);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    border-left: 3px solid var(--accent-secondary);
    display: none;
    max-height: 400px;
    overflow-y: auto;
}

/* Chat messages */
.chat-message {
    margin-bottom: var(--space-md);
    padding: var(--space-md);
    border-radius: var(--radius-lg);
    max-width: 85%;
    word-wrap: break-word;
}

.chat-message.user-message {
    background: var(--accent-secondary);
    color: var(--text-inverse);
    margin-left: auto;
    margin-right: 0;
    border-bottom-right-radius: var(--radius-sm);
}

.chat-message.ai-message {
    background: var(--surface-secondary);
    color: var(--text-primary);
    margin-right: auto;
    margin-left: 0;
    border-bottom-left-radius: var(--radius-sm);
    border-left: 3px solid var(--accent-primary);
}

.chat-message.ai-message.loading {
    background: var(--surface-primary);
    border-left-color: var(--accent-secondary);
}

/* Loading dots */
.loading-dots {
    display: flex;
    gap: var(--space-xs);
    justify-content: center;
    align-items: center;
    padding: var(--space-lg);
}

.loading-dots span {
    width: 8px;
    height: 8px;
    background: var(--accent-secondary);
    border-radius: 50%;
    animation: loading-bounce 1.4s ease-in-out infinite both;
}

.loading-dots span:nth-child(1) { animation-delay: -0.32s; }
.loading-dots span:nth-child(2) { animation-delay: -0.16s; }

@keyframes loading-bounce {
    0%, 80%, 100% { transform: scale(0.6); opacity: 0.5; }
    40% { transform: scale(1); opacity: 1; }
}

/* ============================================================================
   ERROR MESSAGE
   ============================================================================ */

.error-message {
    color: var(--color-error);
    text-align: center;
    padding: var(--space-md);
    background: var(--color-error-muted);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-error);
}

/* ============================================================================
   STATUS MESSAGES
   ============================================================================ */

.status-message {
    padding: var(--space-md) var(--space-lg);
    background: var(--color-info-muted);
    border-left: 3px solid var(--accent-primary);
    border-radius: var(--radius-md);
    margin: var(--space-md) 0;
    color: var(--text-primary);
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
}

/* ============================================================================
   BODY TEXT STYLING
   ============================================================================ */

.body-text {
    font-family: var(--font-primary);
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    color: var(--text-primary);
}

.body-text p {
    margin: var(--space-md) 0;
}

.body-text strong {
    color: var(--accent-primary);
    font-weight: 600;
}

.body-text ol,
.body-text ul {
    margin: var(--space-md) 0;
    padding-left: var(--space-xl);
}

.body-text li {
    margin-bottom: var(--space-sm);
    color: var(--text-secondary);
}

/* Section headers inside body text */
.body-text h3 {
    color: var(--accent-primary);
    font-family: var(--font-display);
    font-size: var(--text-base);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: var(--space-lg) 0 var(--space-md) 0;
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid var(--border-default);
}

.body-text h3:first-child {
    margin-top: 0;
}

.body-text h4 {
    color: var(--accent-secondary);
    font-family: var(--font-display);
    font-size: var(--text-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: var(--space-md) 0 var(--space-sm) 0;
}

/* Code/formula styling */
.body-text pre {
    background: var(--surface-secondary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    margin: var(--space-lg) 0;
    overflow-x: auto;
    font-family: 'Courier New', monospace;
    color: var(--accent-primary);
}

/* Math equations */
.math-equation {
    display: block;
    text-align: center;
    margin: var(--space-lg) 0;
    padding: var(--space-md);
    background: var(--surface-secondary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    color: var(--text-primary);
}

/* Example sections */
.example {
    background: var(--color-success-muted);
    border-left: 3px solid var(--color-success);
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--radius-md);
    margin: var(--space-md) 0;
    font-style: italic;
    color: var(--text-secondary);
}

/* ============================================================================
   APPLICATION NOTES PANEL
   ============================================================================ */

.info-btn {
    background: none;
    border: none;
    color: var(--accent-primary);
    font-size: var(--text-base);
    cursor: pointer;
    padding: var(--space-xs);
    border-radius: 50%;
    transition: all var(--transition-fast) ease;
    margin-left: var(--space-sm);
    opacity: 0.7;
}

.info-btn:hover {
    opacity: 1;
    color: var(--color-success);
}

.info-btn.active {
    opacity: 1;
    color: var(--color-success);
}

.application-notes-panel {
    background: var(--surface-glass);
    backdrop-filter: blur(12px);
    border: 1px solid var(--border-accent);
    border-radius: var(--radius-lg);
    padding: 0;
    margin: var(--space-lg) 0;
    box-shadow: var(--shadow-md);
    position: relative;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height var(--transition-slow) ease,
                opacity var(--transition-normal) ease;
}

.application-notes-panel.show {
    max-height: 500px;
    opacity: 1;
}

/* Remove shimmer from notes panel */
.application-notes-panel::before {
    display: none;
}

.notes-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-md) var(--space-lg);
    border-bottom: 1px solid var(--border-default);
    background: var(--color-info-muted);
}

.notes-header h4 {
    color: var(--accent-primary);
    font-family: var(--font-display);
    font-size: var(--text-base);
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.notes-header h4 i {
    color: var(--accent-primary);
}

.close-notes-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: var(--text-lg);
    cursor: pointer;
    padding: var(--space-sm);
    border-radius: 50%;
    transition: all var(--transition-fast) ease;
}

.close-notes-btn:hover {
    color: var(--color-error);
    transform: rotate(90deg);
}

.notes-content {
    padding: var(--space-lg);
    max-height: 400px;
    overflow-y: auto;
}

.notes-content h5 {
    color: var(--accent-primary);
    font-family: var(--font-display);
    font-size: var(--text-base);
    margin-bottom: var(--space-lg);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--border-default);
    padding-bottom: var(--space-sm);
}

.note-item {
    margin-bottom: var(--space-md);
    padding: var(--space-md);
    border-radius: var(--radius-md);
    border-left: 3px solid;
    border-width: 1px 1px 1px 3px;
    border-style: solid;
    /* Remove staggered animation - appears instantly */
    opacity: 1;
    transform: none;
    animation: none;
}

.caution-note {
    background: var(--color-error-muted);
    border-color: var(--color-error);
}

.warning-note {
    background: var(--color-warning-muted);
    border-color: var(--color-warning);
}

.info-note {
    background: var(--color-info-muted);
    border-color: var(--accent-primary);
}

.note-header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
    font-size: var(--text-sm);
    font-weight: 600;
}

.caution-note .note-header { color: var(--color-error); }
.warning-note .note-header { color: var(--color-warning); }
.info-note .note-header { color: var(--accent-primary); }

.note-text {
    color: var(--text-secondary);
    line-height: var(--leading-relaxed);
    font-size: var(--text-sm);
    margin-left: var(--space-lg);
}

/* ============================================================================
   MODALS (About, Validation, App Notes)
   ============================================================================ */

.about-modal,
.validation-modal {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: var(--bg-overlay);
    backdrop-filter: blur(4px);
    z-index: var(--z-modal);
    overflow-y: auto;
    padding: var(--space-lg);
}

.about-modal-content,
.validation-modal-content {
    width: min(720px, 95%);
    max-height: calc(100vh - 48px);
    background: var(--surface-glass);
    backdrop-filter: blur(16px);
    color: var(--text-primary);
    border-radius: var(--radius-xl);
    border: 1px solid var(--border-default);
    box-shadow: var(--shadow-xl);
    overflow: auto;
}

.about-modal-header,
.validation-modal-header {
    display: flex;
    position: sticky;
    top: 0;
    z-index: 1;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-lg);
    border-bottom: 1px solid var(--border-default);
    background: var(--surface-glass);
    backdrop-filter: blur(16px);
}

.about-modal-title,
.validation-modal-title {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    color: var(--accent-primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.close-modal-btn {
    border: none;
    background: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: var(--text-xl);
    padding: var(--space-sm);
    border-radius: 50%;
    transition: all var(--transition-fast) ease;
}

.close-modal-btn:hover {
    color: var(--color-error);
    transform: rotate(90deg);
}

.close-modal-btn:focus {
    outline: none;
    box-shadow: var(--focus-ring);
}

.about-modal-body,
.validation-modal-body {
    padding: var(--space-xl);
    line-height: var(--leading-relaxed);
}

.about-modal-body h5 {
    color: var(--accent-primary);
    font-family: var(--font-display);
    font-size: var(--text-base);
    margin: var(--space-xl) 0 var(--space-md) 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.about-modal-body h5:first-child {
    margin-top: 0;
}

.about-modal-body ul {
    margin: var(--space-md) 0;
    padding-left: var(--space-lg);
}

.about-modal-body li {
    margin-bottom: var(--space-sm);
    color: var(--text-secondary);
    line-height: var(--leading-relaxed);
}

.about-modal-body strong {
    color: var(--accent-primary);
    font-weight: 600;
}

/* Validation modal state variants */
.validation-modal.is-error .validation-modal-content {
    border-color: var(--color-error);
}

.validation-modal.is-error .validation-modal-header {
    background: var(--color-error-muted);
    border-bottom-color: var(--color-error);
}

.validation-modal.is-caution .validation-modal-content {
    border-color: var(--color-warning);
}

.validation-modal.is-caution .validation-modal-header {
    background: var(--color-warning-muted);
    border-bottom-color: var(--color-warning);
}

/* ============================================================================
   INPUT WRAPPER AND VALIDATION ICONS
   ============================================================================ */

.input-wrapper {
    position: relative;
}

.info-icon-container {
    position: absolute;
    right: var(--space-md);
    top: 50%;
    transform: translateY(-50%);
    display: none;
    z-index: 2;
}

.validation-info-btn {
    border: none;
    background: transparent;
    padding: 0;
    cursor: pointer;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    transition: all var(--transition-fast) ease;
    font-size: var(--text-base);
}

.validation-info-btn:hover {
    transform: scale(1.1);
}

.validation-info-btn.error {
    color: var(--color-error);
    background-color: var(--color-error-muted);
}

.validation-info-btn.caution {
    color: var(--color-warning);
    background-color: var(--color-warning-muted);
}

.select-wrapper .info-icon-container {
    right: 48px;
}

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

.hidden {
    display: none !important;
}

.sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ============================================================================
   SUGGESTIONS MOVED INTO RESULTS
   ============================================================================ */

.suggestions-moved {
    margin-top: var(--space-xl);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--border-default);
}

/* ============================================================================
   RESULTS ACTION BUTTONS
   ============================================================================ */

.results-actions-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-lg);
    margin-top: var(--space-xl);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--border-default);
}

.results-action-btn {
    background: var(--gradient-button);
    border: none;
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--radius-md);
    color: var(--text-inverse);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--text-sm);
    cursor: pointer;
    transition: all var(--transition-fast) ease;
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    box-shadow: var(--shadow-sm);
    min-width: 160px;
    justify-content: center;
}

.results-action-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.results-action-btn:focus {
    outline: none;
    box-shadow: var(--focus-ring);
}

/* Reset button variant - distinct styling */
.results-action-btn.reset-btn-alt {
    background: var(--surface-secondary);
    color: var(--text-secondary);
    border: 1px solid var(--border-default);
}

.results-action-btn.reset-btn-alt:hover {
    background: var(--color-error-muted);
    color: var(--color-error);
    border-color: var(--color-error);
}

/* ============================================================================
   COMPATIBILITY ANALYSIS PANEL
   ============================================================================ */

.compatibility-analysis-panel {
    background: var(--surface-glass);
    backdrop-filter: blur(12px);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    padding: 0;
    margin-top: var(--space-lg);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

.compatibility-analysis-panel .notes-header {
    background: var(--color-warning-muted);
    border-bottom: 1px solid var(--color-warning);
}

.compatibility-analysis-panel .notes-header h4 {
    color: var(--color-warning);
}

.compatibility-analysis-panel .notes-content {
    padding: var(--space-lg);
    max-height: 350px;
    overflow-y: auto;
}

/* Recommended Upgrade Paths */
.recommended-upgrade-paths-section {
    margin-bottom: var(--space-lg);
    padding: var(--space-lg);
    border-radius: var(--radius-md);
    border-left: 4px solid var(--color-success);
    background: var(--color-success-muted);
    border-width: 1px 1px 1px 4px;
    border-style: solid;
    border-color: rgba(74, 222, 128, 0.3);
    border-left-color: var(--color-success);
}

.recommended-upgrade-paths-section .section-header {
    color: var(--color-success);
    margin-bottom: var(--space-md);
    font-size: var(--text-base);
    font-weight: 600;
}

.recommended-upgrade-paths-section .section-intro {
    margin-bottom: var(--space-md);
    color: var(--text-secondary);
    font-style: italic;
}

.upgrade-path-card {
    margin-bottom: var(--space-lg);
    padding: var(--space-lg);
    background: var(--surface-secondary);
    border-radius: var(--radius-md);
    border: 1px solid rgba(74, 222, 128, 0.3);
}

.upgrade-path-card .config-header {
    font-size: var(--text-base);
    color: var(--color-success);
    font-weight: 600;
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid var(--border-default);
}

.upgrade-path-pto-section,
.upgrade-path-pump-section,
.upgrade-path-performance-section {
    margin-bottom: var(--space-md);
    padding: var(--space-md);
    border-radius: var(--radius-sm);
}

.upgrade-path-pto-section {
    background: var(--color-success-muted);
    border-left: 3px solid var(--color-success);
}

.upgrade-path-pump-section {
    background: var(--color-info-muted);
    border-left: 3px solid var(--color-info);
}

.upgrade-path-performance-section {
    background: var(--color-success-muted);
    border: 1px dashed rgba(74, 222, 128, 0.4);
}

.subsection-header {
    margin-bottom: var(--space-sm);
}

.subsection-header strong {
    font-size: var(--text-sm);
}

.subsection-content {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin-left: var(--space-lg);
    line-height: var(--leading-relaxed);
}

/* Badges */
.mount-badge {
    background: var(--color-success);
    color: var(--text-inverse);
    padding: 2px var(--space-sm);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    margin-left: var(--space-sm);
    font-weight: 600;
}

.mount-badge.different {
    background: var(--color-warning);
}

.compatibility-badge {
    color: var(--color-success);
    font-weight: 600;
}

.compatibility-badge.warning {
    color: var(--color-warning);
}

/* Alternative Sections */
.alternative-ptos-section,
.alternative-pumps-section {
    margin-bottom: var(--space-lg);
    padding: var(--space-lg);
    border-radius: var(--radius-md);
    border-width: 1px 1px 1px 3px;
    border-style: solid;
}

.alternative-ptos-section {
    background: var(--color-success-muted);
    border-color: rgba(74, 222, 128, 0.3);
    border-left-color: var(--color-success);
}

.alternative-pumps-section {
    background: var(--color-info-muted);
    border-color: rgba(96, 165, 250, 0.3);
    border-left-color: var(--color-info);
}

.alternative-ptos-section .section-header {
    color: var(--color-success);
    margin-bottom: var(--space-md);
    font-weight: 600;
}

.alternative-pumps-section .section-header {
    color: var(--color-info);
    margin-bottom: var(--space-md);
    font-weight: 600;
}

.alternative-pto-card,
.alternative-pump-card {
    margin-bottom: var(--space-md);
    padding: var(--space-md);
    border-radius: var(--radius-sm);
}

.alternative-pto-card {
    background: rgba(74, 222, 128, 0.1);
    border-left: 2px solid var(--color-success);
}

.alternative-pump-card {
    background: rgba(96, 165, 250, 0.1);
    border-left: 2px solid var(--color-info);
}

.alternative-pto-card .card-title {
    color: var(--color-success);
    font-weight: 600;
    margin-bottom: var(--space-sm);
}

.alternative-pump-card .card-title {
    color: var(--color-info);
    font-weight: 600;
    margin-bottom: var(--space-sm);
}

.alternative-pto-card .card-details,
.alternative-pump-card .card-details {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin-left: var(--space-md);
    line-height: var(--leading-relaxed);
}

/* Compatibility Constraint Notes */
.compatibility-constraint-note {
    margin-bottom: var(--space-md);
    padding: var(--space-md);
    border-radius: var(--radius-md);
    border-left: 3px solid var(--color-warning);
    background: var(--color-warning-muted);
}

.compatibility-constraint-note .note-header {
    color: var(--color-warning);
    margin-bottom: var(--space-sm);
    font-weight: 600;
}

.compatibility-constraint-note .note-content {
    color: var(--text-secondary);
    line-height: var(--leading-relaxed);
}

/* Toggle button */
#show-compatibility-btn {
    background: linear-gradient(135deg, var(--color-warning) 0%, #f59e0b 100%);
    border: none;
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--radius-md);
    color: var(--text-inverse);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--text-sm);
    cursor: pointer;
    transition: all var(--transition-fast) ease;
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    box-shadow: var(--shadow-sm);
    min-width: 250px;
    justify-content: center;
    margin-top: var(--space-sm);
}

#show-compatibility-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* ============================================================================
   TRAFFIC LIGHT SUMMARY
   ============================================================================ */

.traffic-light-summary {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-lg);
}

.traffic-light-indicator {
    font-size: var(--text-2xl);
    display: flex;
    align-items: center;
    justify-content: center;
}

.traffic-light-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.traffic-light-status {
    font-size: var(--text-lg);
    font-weight: 700;
    letter-spacing: 0.5px;
}

.traffic-light-detail {
    font-size: var(--text-xs);
    opacity: 0.85;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Traffic light variants */
.traffic-green {
    background: var(--color-success-muted);
    border: 1px solid rgba(74, 222, 128, 0.4);
}

.traffic-green .traffic-light-status { color: var(--color-success); }
.traffic-green .traffic-light-detail { color: var(--text-secondary); }

.traffic-amber {
    background: var(--color-warning-muted);
    border: 1px solid rgba(251, 191, 36, 0.4);
}

.traffic-amber .traffic-light-status { color: var(--color-warning); }
.traffic-amber .traffic-light-detail { color: var(--text-secondary); }

.traffic-red {
    background: var(--color-error-muted);
    border: 1px solid rgba(248, 113, 113, 0.4);
}

.traffic-red .traffic-light-status { color: var(--color-error); }
.traffic-red .traffic-light-detail { color: var(--text-secondary); }

/* ============================================================================
   STATUS BADGES
   ============================================================================ */

.status-badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
    padding: var(--space-md);
    background: var(--surface-secondary);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-default);
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-md);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.3px;
    transition: transform var(--transition-fast) ease;
}

.badge:hover {
    transform: translateY(-1px);
}

.badge i {
    font-size: 10px;
}

.badge-success {
    background: var(--color-success-muted);
    color: var(--color-success);
    border: 1px solid rgba(74, 222, 128, 0.4);
}

.badge-warning {
    background: var(--color-warning-muted);
    color: var(--color-warning);
    border: 1px solid rgba(251, 191, 36, 0.4);
}

.badge-danger {
    background: var(--color-error-muted);
    color: var(--color-error);
    border: 1px solid rgba(248, 113, 113, 0.4);
}

/* ============================================================================
   AI ANALYSIS SECTION
   ============================================================================ */

.ai-analysis {
    background: var(--surface-secondary);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-default);
    padding: var(--space-lg);
    margin-top: var(--space-md);
}

.ai-summary {
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--text-primary);
    padding: var(--space-md);
    background: var(--color-info-muted);
    border-radius: var(--radius-md);
    border-left: 3px solid var(--accent-primary);
    margin-bottom: var(--space-md);
    line-height: var(--leading-normal);
}

.ai-causes,
.ai-actions,
.ai-notes {
    margin-bottom: var(--space-md);
}

.ai-causes strong {
    color: var(--accent-primary);
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ai-causes ul,
.ai-notes ul {
    margin-top: var(--space-sm);
    padding-left: var(--space-lg);
}

.ai-causes li,
.ai-notes li {
    color: var(--text-secondary);
    margin-bottom: var(--space-xs);
    line-height: var(--leading-normal);
}

.ai-actions strong {
    color: var(--color-warning);
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.action-item {
    margin: var(--space-md) 0;
    padding: var(--space-md);
    background: var(--color-warning-muted);
    border-radius: var(--radius-md);
    border-left: 3px solid var(--color-warning);
}

.action-text {
    color: var(--text-primary);
    font-weight: 500;
    line-height: var(--leading-normal);
}

/* Why button */
.why-btn {
    background: transparent;
    border: 1px solid var(--border-accent);
    color: var(--accent-primary);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: 600;
    cursor: pointer;
    margin-left: var(--space-sm);
    transition: all var(--transition-fast) ease;
    font-family: var(--font-primary);
}

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

.why-details {
    margin-top: var(--space-sm);
    padding: var(--space-md);
    background: var(--surface-primary);
    border-radius: var(--radius-sm);
    border: 1px dashed var(--border-default);
}

.why-details p {
    color: var(--text-secondary);
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    margin: 0;
}

.why-details p + p {
    margin-top: var(--space-sm);
}

.why-note {
    color: var(--accent-primary) !important;
    font-style: italic;
}

.ai-notes strong {
    color: var(--accent-secondary);
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ai-notes li {
    font-size: var(--text-sm);
}

/* ============================================================================
   STATUS BAR & RECOMMENDATIONS (Clean Design)
   ============================================================================ */

.status-bar {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-md);
}

.status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.status-text {
    font-weight: 600;
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-issues {
    color: var(--text-secondary);
    font-size: var(--text-sm);
    margin-left: auto;
}

/* Status bar variants */
.status-bar.status-ok {
    background: var(--color-success-muted);
    border: 1px solid rgba(74, 222, 128, 0.3);
}
.status-bar.status-ok .status-dot { background: var(--color-success); }
.status-bar.status-ok .status-text { color: var(--color-success); }

.status-bar.status-warn {
    background: var(--color-warning-muted);
    border: 1px solid rgba(251, 191, 36, 0.3);
}
.status-bar.status-warn .status-dot { background: var(--color-warning); }
.status-bar.status-warn .status-text { color: var(--color-warning); }

.status-bar.status-fail {
    background: var(--color-error-muted);
    border: 1px solid rgba(248, 113, 113, 0.3);
}
.status-bar.status-fail .status-dot { background: var(--color-error); }
.status-bar.status-fail .status-text { color: var(--color-error); }

/* Recommendations */
.recommendations-clean {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.rec-card {
    background: var(--surface-secondary);
    border-radius: var(--radius-md);
    padding: var(--space-md) var(--space-lg);
    border: 1px solid var(--border-default);
}

.rec-main {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
}

.rec-check {
    color: var(--color-success);
    font-size: var(--text-lg);
    font-weight: bold;
    flex-shrink: 0;
    margin-top: 2px;
}

.rec-circle {
    color: var(--text-tertiary);
    font-size: var(--text-lg);
    flex-shrink: 0;
    margin-top: 2px;
}

.rec-content {
    flex-grow: 1;
}

.rec-title {
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-xs);
}

.rec-stats {
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.rec-card.rec-primary {
    border-color: rgba(74, 222, 128, 0.3);
    background: var(--color-success-muted);
}

.rec-card.rec-alt {
    opacity: 0.85;
}

.rec-card.rec-ok {
    border-color: rgba(74, 222, 128, 0.3);
    background: var(--color-success-muted);
}

/* Details toggle */
.details-btn {
    background: transparent;
    border: 1px solid var(--border-accent);
    color: var(--accent-primary);
    padding: var(--space-xs) var(--space-md);
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    font-family: var(--font-primary);
    cursor: pointer;
    margin-top: var(--space-md);
    transition: all var(--transition-fast) ease;
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
}

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

.details-btn i {
    font-size: 10px;
    transition: transform var(--transition-fast) ease;
}

.rec-specs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm) var(--space-lg);
    margin-top: var(--space-md);
    padding-top: var(--space-md);
    border-top: 1px dashed var(--border-default);
    font-size: var(--text-xs);
    color: var(--text-secondary);
}

.rec-specs span {
    white-space: nowrap;
}

/* Warning messages in recommendation cards */
.rec-warning {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    margin-top: var(--space-sm);
    background: rgba(255, 193, 7, 0.15);
    border-left: 3px solid var(--warning);
    border-radius: var(--radius-xs);
    font-size: var(--text-xs);
    color: var(--text-primary);
}

.rec-warning i {
    color: var(--warning);
    margin-top: 2px;
    flex-shrink: 0;
}

.rec-warning span {
    line-height: 1.4;
}

/* Actions container for recommendation cards */
.rec-actions {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-top: var(--space-md);
    flex-wrap: wrap;
}

/* Recalculate with suggestion button */
.recalc-btn {
    background: var(--gradient-primary);
    border: none;
    color: var(--text-inverse);
    padding: var(--space-sm) var(--space-lg);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    font-family: var(--font-primary);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast) ease;
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    box-shadow: var(--shadow-sm);
}

.recalc-btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
    filter: brightness(1.1);
}

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

.recalc-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

.recalc-btn i {
    font-size: var(--text-sm);
}

/* Alternative card recalculate button - more subtle */
.recalc-btn-alt {
    background: var(--surface-secondary);
    color: var(--accent-primary);
    border: 1px solid var(--border-accent);
}

.recalc-btn-alt:hover {
    background: var(--color-info-muted);
    border-color: var(--accent-primary);
}

/* Move details button to not have top margin when in actions container */
.rec-actions .details-btn {
    margin-top: 0;
}

/* ============================================================================
   RESULTS DISPLAY CARDS (Input Specs, Calculations, Summary)
   ============================================================================ */

/* Container for all result sections */
.results-container {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

/* Base card style for result sections */
.result-display-card {
    background: var(--surface-secondary);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-default);
    overflow: hidden;
}

/* Card header with icon and title */
.result-card-header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-lg);
    background: var(--surface-tertiary);
    border-bottom: 1px solid var(--border-default);
}

.result-card-header i {
    color: var(--accent-primary);
    font-size: var(--text-base);
}

.result-card-header h4 {
    color: var(--accent-primary);
    font-family: var(--font-display);
    font-size: var(--text-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0;
}

/* Card body */
.result-card-body {
    padding: var(--space-md) var(--space-lg);
}

/* Specifications grid layout for result cards */
.result-specs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--space-sm);
}

.spec-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-sm) var(--space-md);
    background: var(--surface-primary);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-subtle);
    min-height: 36px;
}

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

.spec-value {
    color: var(--text-primary);
    font-size: var(--text-sm);
    font-weight: 600;
    font-family: var(--font-primary);
    text-align: right;
}

/* Calculations section styling */
.calc-section {
    padding: var(--space-md);
    background: var(--surface-primary);
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-sm);
}

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

.calc-section-title {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    color: var(--accent-secondary);
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--space-sm);
}

.calc-section-title i {
    font-size: var(--text-sm);
}

.calc-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-xs) 0;
    font-size: var(--text-sm);
}

.calc-row:not(:last-child) {
    border-bottom: 1px dashed var(--border-subtle);
}

.calc-label {
    color: var(--text-secondary);
    font-weight: 500;
}

.calc-value {
    color: var(--text-primary);
    font-weight: 600;
    font-family: var(--font-primary);
}

/* Calculation rows with formulas */
.calc-row-with-formula {
    padding: var(--space-sm) 0;
}

.calc-row-with-formula:not(:last-child) {
    border-bottom: 1px dashed var(--border-subtle);
}

.calc-row-main {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--text-sm);
}

.calc-formula {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: var(--space-xs);
    padding-left: var(--space-md);
    border-left: 2px solid var(--border-subtle);
    margin-left: var(--space-xs);
}

.formula-text {
    color: var(--text-tertiary);
    font-size: var(--text-xs);
    font-style: italic;
}

.formula-values {
    color: var(--color-primary);
    font-size: var(--text-xs);
    font-family: var(--font-mono, 'Consolas', 'Monaco', monospace);
    background: var(--surface-secondary);
    padding: 2px 6px;
    border-radius: var(--radius-xs);
    display: inline-block;
}

/* Summary metrics with status indicators */
.summary-metrics {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

/* Base metric row - the entire row is a status bar */
.metric-row {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-md) var(--space-lg);
    background: var(--surface-primary);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-subtle);
    overflow: hidden;
    transition: border-color var(--transition-fast) ease;
    min-height: 56px;
}

/* The fill bar - uses pseudo-element behind content */
.metric-row::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: var(--fill-width, 0%);
    transition: width var(--transition-normal) ease;
    z-index: 0;
}

/* Ensure content sits above the fill */
.metric-row > * {
    position: relative;
    z-index: 1;
}

/* Status variants - border and fill colors (matching viability bar style) */
.metric-row.status-ok,
.metric-row.status-pass {
    border: 1px solid rgba(74, 222, 128, 0.5);
    box-shadow: 0 0 0 1px rgba(74, 222, 128, 0.15);
}
.metric-row.status-ok::before,
.metric-row.status-pass::before {
    background: linear-gradient(90deg, rgba(34, 197, 94, 0.15), rgba(74, 222, 128, 0.25));
}

.metric-row.status-warning {
    border: 1px solid rgba(251, 191, 36, 0.5);
    box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.15);
}
.metric-row.status-warning::before {
    background: linear-gradient(90deg, rgba(245, 158, 11, 0.15), rgba(251, 191, 36, 0.25));
}

.metric-row.status-fail {
    border: 1px solid rgba(248, 113, 113, 0.5);
    box-shadow: 0 0 0 1px rgba(248, 113, 113, 0.15);
}
.metric-row.status-fail::before {
    background: linear-gradient(90deg, rgba(239, 68, 68, 0.15), rgba(248, 113, 113, 0.25));
}

/* Info-only rows (no status bar) */
.metric-row.info-only {
    border-color: var(--border-subtle);
}
.metric-row.info-only::before {
    display: none;
}

.metric-row:hover {
    box-shadow: var(--shadow-sm);
}

/* Left side - label */
.metric-label {
    color: var(--text-primary);
    font-size: var(--text-sm);
    font-weight: 500;
    flex: 0 0 auto;
    min-width: 200px;
}

/* Center - status indicator */
.metric-center {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Right side - values */
.metric-values {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    min-width: 120px;
    flex: 0 0 auto;
}

.metric-primary {
    color: var(--text-primary);
    font-size: var(--text-base);
    font-weight: 700;
    font-family: var(--font-primary);
}

.metric-secondary {
    color: var(--text-tertiary);
    font-size: var(--text-xs);
}

/* Status indicator - centered in middle */
.metric-status-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.metric-status-indicator i {
    font-size: var(--text-sm);
}

.metric-status-indicator.pass {
    color: var(--color-success);
}

.metric-status-indicator.warning {
    color: var(--color-warning);
}

.metric-status-indicator.fail {
    color: var(--color-error);
}

.metric-pct {
    font-weight: 700;
    font-size: var(--text-sm);
    margin-left: var(--space-sm);
}

/* Divider for grouping metrics */
.metrics-divider {
    height: 1px;
    background: var(--border-default);
    margin: var(--space-sm) 0;
}

/* Section header for metric groups */
.metrics-section-header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    color: var(--text-tertiary);
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: var(--space-xs) 0;
    margin-bottom: var(--space-xs);
}

.metrics-section-header i {
    font-size: var(--text-sm);
    color: var(--accent-secondary);
}

/* Collapsible sections */
.collapsible-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-md) var(--space-lg);
    background: var(--surface-tertiary);
    border-bottom: 1px solid var(--border-default);
    cursor: pointer;
    transition: background var(--transition-fast) ease;
}

.collapsible-header:hover {
    background: var(--surface-hover);
}

.collapsible-header .header-left {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.collapsible-header i.toggle-icon {
    color: var(--text-tertiary);
    font-size: var(--text-sm);
    transition: transform var(--transition-fast) ease;
}

.collapsible-header.expanded i.toggle-icon {
    transform: rotate(180deg);
}

.collapsible-content {
    display: none;
    padding: var(--space-md) var(--space-lg);
}

.collapsible-content.expanded {
    display: block;
}

/* Compact specs list for collapsible sections */
.specs-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--space-xs) var(--space-lg);
}

.specs-list-item {
    display: flex;
    justify-content: space-between;
    padding: var(--space-xs) 0;
    font-size: var(--text-sm);
    border-bottom: 1px dashed var(--border-subtle);
}

.specs-list-item .label {
    color: var(--text-secondary);
}

.specs-list-item .value {
    color: var(--text-primary);
    font-weight: 600;
}

/* ============================================================================
   AI ENGINEERING EXPLANATION
   ============================================================================ */

.ai-engineering-explanation {
    margin-top: var(--space-md);
    background: var(--surface-secondary);
    border-radius: var(--radius-md);
    border: 1px solid rgba(124, 140, 224, 0.2);
    overflow: hidden;
}

.eng-explanation {
    padding: var(--space-md) var(--space-lg);
}

.eng-header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    color: var(--accent-secondary);
    font-weight: 600;
    font-size: var(--text-xs);
    margin-bottom: var(--space-sm);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.eng-header i {
    font-size: var(--text-sm);
}

.eng-body {
    color: var(--text-secondary);
    line-height: var(--leading-relaxed);
    font-size: var(--text-sm);
}

/* Technical Insight Section - Always Visible */
.tech-insight {
    border-top: 1px solid rgba(124, 140, 224, 0.15);
    padding: var(--space-md) var(--space-lg);
}

.tech-header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    color: var(--accent-secondary);
    font-weight: 600;
    font-size: var(--text-xs);
    margin-bottom: var(--space-sm);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.tech-header i {
    font-size: var(--text-sm);
}

.tech-body {
    color: var(--text-secondary);
    line-height: var(--leading-relaxed);
    font-size: var(--text-sm);
}

/* ============================================================================
   CUSTOM SCROLLBAR
   ============================================================================ */

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
    border-radius: var(--radius-sm);
}

::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: var(--radius-sm);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover);
}

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

@media (max-width: 768px) {
    .container {
        padding: var(--space-md);
    }

    .calculation-form {
        padding: var(--space-lg);
    }

    .title-glow {
        font-size: var(--text-2xl);
        flex-direction: column;
        gap: var(--space-sm);
    }

    .title-info-btn {
        top: var(--space-sm);
        right: var(--space-sm);
    }

    .specs-grid,
    .triple-grid {
        grid-template-columns: 1fr;
    }

    .results-grid {
        grid-template-columns: 1fr;
    }

    .summary-grid {
        grid-template-columns: 1fr;
    }

    .summary-item {
        flex-direction: column;
        gap: var(--space-sm);
        text-align: center;
    }

    /* Results display cards responsive */
    .result-specs-grid {
        grid-template-columns: 1fr;
    }

    .metric-row {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-sm);
        padding: var(--space-md);
    }

    .metric-label {
        font-size: var(--text-sm);
        min-width: auto;
    }

    .metric-center {
        justify-content: flex-start;
    }

    .metric-values {
        min-width: auto;
        align-self: flex-end;
    }

    .metric-status-indicator {
        justify-content: flex-start;
    }

    .calc-row {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-xs);
    }

    .calc-value {
        align-self: flex-end;
    }

    .specs-list {
        grid-template-columns: 1fr;
    }

    .chat-input-container {
        flex-direction: column;
    }

    .chat-submit {
        align-self: flex-end;
        min-width: 100px;
    }

    .submit-actions {
        flex-direction: column;
        gap: var(--space-md);
    }

    .submit-btn,
    .reset-btn {
        width: 100%;
    }

    .results-actions-container {
        flex-direction: column;
        gap: var(--space-md);
    }

    .results-action-btn {
        width: 100%;
    }

    .theme-toggle {
        top: var(--space-sm);
        right: var(--space-sm);
    }

    .theme-toggle-btn {
        padding: var(--space-sm);
    }

    .theme-toggle-btn span {
        display: none;
    }
}

@media (max-width: 480px) {
    .title-glow {
        font-size: var(--text-xl);
    }

    .subtitle {
        font-size: var(--text-sm);
    }

    .calculation-form {
        padding: var(--space-md);
    }

    .modern-input,
    .modern-select {
        padding: var(--space-md);
    }

    .result-card,
    .summary-card {
        padding: var(--space-md);
    }

    .about-modal-content,
    .validation-modal-content {
        width: 100%;
        max-height: 100vh;
        border-radius: 0;
    }
}

/* ============================================================================
   PRINT REPORT (Hidden in normal view, shown in print window)
   ============================================================================ */

/* Hide print report template in normal view */
.print-report {
    display: none;
}

/* ============================================================================
   PRINT STYLES
   ============================================================================ */

@media print {
    /* Hide non-essential elements */
    .background-animation,
    .main-header,
    .calculation-form,
    .chat-interface,
    .results-actions-container,
    .title-info-btn,
    .submit-container,
    .close-modal-btn,
    .validation-info-btn,
    .info-btn,
    .suggestion-section,
    .compatibility-analysis-panel,
    #show-compatibility-btn,
    .theme-toggle,
    .vendor-filter-container {
        display: none !important;
    }

    /* Clean results */
    body {
        background: white !important;
        color: black !important;
    }

    .result-section,
    .suggestions-moved {
        background: white !important;
        color: black !important;
        border: none !important;
        box-shadow: none !important;
        margin: 0;
        padding: 20px;
    }

    .result-section h3,
    .suggestions-moved h3 {
        color: black !important;
        text-align: left;
        border-bottom: 2px solid black;
        padding-bottom: 10px;
    }

    .body-text,
    .body-text p,
    .body-text li,
    .body-text strong {
        color: black !important;
    }

    .status-pass { color: #228B22 !important; }
    .status-warning { color: #FF8C00 !important; }
    .status-fail { color: #DC143C !important; }

    * {
        animation: none !important;
        transition: none !important;
        box-shadow: none !important;
    }

    @page {
        margin: 1cm;
    }

    .container {
        max-width: 100%;
    }
}

/* ============================================================================
   VENDOR/CATALOGUE FILTER SYSTEM
   ============================================================================ */

.vendor-filter-container {
    margin-bottom: var(--space-lg);
    position: relative;
}

/* Toggle Button */
.vendor-filter-toggle {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    width: 100%;
    padding: var(--space-md) var(--space-lg);
    background: var(--surface-glass);
    backdrop-filter: blur(8px);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    color: var(--text-secondary);
    font-family: var(--font-primary);
    font-size: var(--text-sm);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast) ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.vendor-filter-toggle:hover {
    background: var(--surface-secondary);
    border-color: var(--border-hover);
    color: var(--text-primary);
}

.vendor-filter-toggle:focus {
    outline: none;
    box-shadow: var(--focus-ring);
}

.vendor-filter-toggle i:first-child {
    color: var(--accent-primary);
    font-size: var(--text-base);
}

.filter-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 var(--space-xs);
    background: var(--accent-primary);
    color: var(--text-inverse);
    font-size: var(--text-xs);
    font-weight: 700;
    border-radius: var(--radius-full);
    margin-left: var(--space-xs);
}

.filter-chevron {
    margin-left: auto;
    transition: transform var(--transition-fast) ease;
}

.filter-chevron.rotated {
    transform: rotate(180deg);
}

/* Filter Panel */
.vendor-filter-panel {
    background: var(--surface-glass);
    backdrop-filter: blur(12px);
    border: 1px solid var(--border-default);
    border-top: none;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    padding: var(--space-lg);
    margin-top: -1px;
    box-shadow: var(--shadow-md);
}

/* Filter Categories Grid */
.filter-categories {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-lg);
    margin-bottom: var(--space-lg);
}

.filter-category {
    background: var(--surface-secondary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    padding: var(--space-md);
}

.filter-category-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid var(--border-default);
}

.filter-category-header h4 {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin: 0;
    color: var(--accent-primary);
    font-family: var(--font-display);
    font-size: var(--text-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.filter-category-header h4 i {
    font-size: var(--text-base);
    color: var(--accent-primary);
}

.clear-category-btn {
    background: transparent;
    border: none;
    color: var(--text-tertiary);
    font-size: var(--text-xs);
    font-family: var(--font-primary);
    cursor: pointer;
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast) ease;
}

.clear-category-btn:hover {
    color: var(--color-error);
    background: var(--color-error-muted);
}

/* Filter Options Container */
.filter-options {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    max-height: 180px;
    overflow-y: auto;
    padding-right: var(--space-xs);
}

/* Custom Scrollbar for Filter Options */
.filter-options::-webkit-scrollbar {
    width: 4px;
}

.filter-options::-webkit-scrollbar-track {
    background: transparent;
}

.filter-options::-webkit-scrollbar-thumb {
    background: var(--border-default);
    border-radius: var(--radius-full);
}

.filter-options::-webkit-scrollbar-thumb:hover {
    background: var(--accent-primary);
}

/* Filter Checkbox */
.filter-checkbox {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background-color var(--transition-fast) ease;
}

.filter-checkbox:hover {
    background: var(--surface-primary);
}

.filter-checkbox input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--accent-primary);
    cursor: pointer;
    flex-shrink: 0;
}

.checkbox-label {
    color: var(--text-secondary);
    font-size: var(--text-sm);
    line-height: 1.3;
    transition: color var(--transition-fast) ease;
}

.filter-checkbox:hover .checkbox-label {
    color: var(--text-primary);
}

.filter-checkbox input[type="checkbox"]:checked + .checkbox-label {
    color: var(--accent-primary);
    font-weight: 500;
}

/* Loading and Error States */
.loading-filters,
.no-filters,
.filter-error {
    display: block;
    padding: var(--space-md);
    text-align: center;
    font-size: var(--text-sm);
    font-style: italic;
}

.loading-filters {
    color: var(--text-tertiary);
}

.no-filters {
    color: var(--text-tertiary);
}

.filter-error {
    color: var(--color-error);
}

/* Filter Actions */
.filter-actions {
    display: flex;
    justify-content: center;
    gap: var(--space-md);
    padding-top: var(--space-md);
    border-top: 1px solid var(--border-default);
}

.apply-filters-btn {
    background: var(--gradient-button);
    border: none;
    padding: var(--space-sm) var(--space-lg);
    border-radius: var(--radius-full);
    color: var(--text-inverse);
    font-size: var(--text-sm);
    font-weight: 600;
    font-family: var(--font-primary);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    transition: all var(--transition-fast) ease;
    box-shadow: var(--shadow-sm);
}

.apply-filters-btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md), var(--glow-accent);
}

.apply-filters-btn:focus {
    outline: none;
    box-shadow: var(--focus-ring);
}

.clear-all-filters-btn {
    background: var(--surface-secondary);
    border: 1px solid var(--border-default);
    padding: var(--space-sm) var(--space-lg);
    border-radius: var(--radius-full);
    color: var(--text-secondary);
    font-size: var(--text-sm);
    font-weight: 500;
    font-family: var(--font-primary);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    transition: all var(--transition-fast) ease;
}

.clear-all-filters-btn:hover {
    background: var(--color-error-muted);
    border-color: var(--color-error);
    color: var(--color-error);
}

.clear-all-filters-btn:focus {
    outline: none;
    box-shadow: var(--focus-ring);
}

/* Active Filter Chips */
.active-filter-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md);
    margin-top: var(--space-sm);
    background: var(--surface-secondary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
}

.chips-label {
    color: var(--text-tertiary);
    font-size: var(--text-xs);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-right: var(--space-xs);
}

.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-sm);
    background: var(--color-info-muted);
    border: 1px solid rgba(96, 165, 250, 0.3);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    color: var(--text-primary);
}

.chip-category {
    color: var(--accent-primary);
    font-weight: 600;
}

.chip-value {
    color: var(--text-secondary);
}

.chip-remove {
    background: transparent;
    border: none;
    color: var(--text-tertiary);
    font-size: var(--text-base);
    line-height: 1;
    cursor: pointer;
    padding: 0;
    margin-left: var(--space-xs);
    transition: color var(--transition-fast) ease;
}

.chip-remove:hover {
    color: var(--color-error);
}

.clear-chips-btn {
    background: transparent;
    border: 1px solid var(--border-default);
    color: var(--text-tertiary);
    font-size: var(--text-xs);
    font-family: var(--font-primary);
    cursor: pointer;
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-full);
    margin-left: auto;
    transition: all var(--transition-fast) ease;
}

.clear-chips-btn:hover {
    background: var(--color-error-muted);
    border-color: var(--color-error);
    color: var(--color-error);
}

/* Responsive adjustments for vendor filters */
@media (max-width: 768px) {
    .filter-categories {
        grid-template-columns: 1fr 1fr;
    }

    .filter-actions {
        flex-direction: column;
    }

    .apply-filters-btn,
    .clear-all-filters-btn {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .filter-categories {
        grid-template-columns: 1fr;
    }

    .vendor-filter-toggle {
        padding: var(--space-sm) var(--space-md);
        font-size: var(--text-xs);
    }

    .active-filter-chips {
        flex-direction: column;
        align-items: flex-start;
    }

    .clear-chips-btn {
        margin-left: 0;
        margin-top: var(--space-sm);
        align-self: flex-end;
    }
}

/* ============================================================================
   DYNAMIC RECOMMENDATION SYSTEM
   ============================================================================ */

/* Label with action button layout */
.label-with-action {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: var(--space-md);
    margin-bottom: var(--space-xs);
}

/* View Recommendations Button */
.view-recommendations-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: var(--gradient-button, linear-gradient(135deg, #4da6c9 0%, #5bb8d4 100%));
    color: #ffffff !important;
    border: none;
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(77, 166, 201, 0.3);
    text-decoration: none;
}

.view-recommendations-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(77, 166, 201, 0.4);
    filter: brightness(1.1);
}

.view-recommendations-btn i {
    font-size: 0.9em;
}

/* Recommendations Modal */
.recommendations-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 20, 25, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--z-modal, 1000);
    padding: var(--space-md);
}

.recommendations-modal-content {
    background: var(--bg-tertiary, #243447);
    border: 1px solid var(--border-default, rgba(159, 179, 200, 0.15));
    border-radius: var(--radius-lg);
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.5);
    width: 100%;
    max-width: 720px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.recommendations-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-md) var(--space-lg);
    border-bottom: 1px solid var(--border-default, rgba(159, 179, 200, 0.15));
    background: var(--bg-secondary, #1a2332);
}

.recommendations-modal-header h3 {
    margin: 0;
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--text-primary, #e8edf2);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.recommendations-modal-header h3 i {
    color: var(--accent-primary, #4da6c9);
}

.close-modal-btn {
    background: transparent;
    border: none;
    color: var(--text-secondary, #9fb3c8);
    cursor: pointer;
    padding: var(--space-sm);
    border-radius: var(--radius-sm);
    font-size: var(--text-lg);
    transition: all 0.2s ease;
    line-height: 1;
}

.close-modal-btn:hover {
    color: var(--text-primary, #e8edf2);
    background: var(--bg-elevated, #2d3f54);
}

.recommendations-modal-body {
    padding: var(--space-lg);
    overflow-y: auto;
    flex: 1;
    background: var(--bg-tertiary, #243447);
}

.recommendations-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-2xl);
    color: var(--text-secondary, #9fb3c8);
    font-size: var(--text-sm);
}

.recommendations-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.recommendation-card {
    padding: var(--space-md);
    background: var(--bg-secondary, #1a2332);
    border: 1px solid var(--border-default, rgba(159, 179, 200, 0.15));
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.recommendation-card:hover {
    border-color: var(--accent-primary, #4da6c9);
    box-shadow: 0 4px 20px rgba(77, 166, 201, 0.15);
    transform: translateY(-2px);
}

.recommendation-card.selected {
    border-color: var(--color-success, #4ade80);
    background: rgba(74, 222, 128, 0.08);
}

.recommendation-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--space-sm);
}

.recommendation-rank {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.rank-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 26px;
    padding: 0 8px;
    background: var(--accent-primary, #4da6c9);
    color: #ffffff;
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: 700;
}

.rank-badge.pareto {
    background: linear-gradient(135deg, #4da6c9, #4ade80);
}

.confidence-badge {
    font-size: var(--text-xs);
    padding: 4px 10px;
    border-radius: var(--radius-full);
    background: var(--bg-elevated, #2d3f54);
    color: var(--text-secondary, #9fb3c8);
    border: 1px solid var(--border-default, rgba(159, 179, 200, 0.15));
}

.confidence-badge.high {
    background: rgba(74, 222, 128, 0.15);
    color: var(--color-success, #4ade80);
    border-color: rgba(74, 222, 128, 0.3);
}

.confidence-badge.medium {
    background: rgba(251, 191, 36, 0.15);
    color: var(--color-warning, #fbbf24);
    border-color: rgba(251, 191, 36, 0.3);
}

.recommendation-card-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
}

.rec-section {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.rec-section-title {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.rec-section-value {
    font-size: var(--text-sm);
    color: var(--text-primary);
    font-weight: 500;
}

.rec-section-value .model-name {
    font-weight: 600;
    color: var(--accent-primary, #4da6c9);
}

.rec-section-value .detail {
    font-size: var(--text-xs);
    color: var(--text-secondary, #9fb3c8);
    display: block;
    margin-top: 2px;
}

.recommendation-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--space-md);
    padding-top: var(--space-sm);
    border-top: 1px solid var(--border-default, rgba(159, 179, 200, 0.15));
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.rec-metrics {
    display: flex;
    gap: var(--space-md);
    font-size: var(--text-xs);
    color: var(--text-secondary, #9fb3c8);
    flex-wrap: wrap;
}

.rec-metric {
    display: flex;
    align-items: center;
    gap: 4px;
}

.rec-metric i {
    color: var(--accent-primary, #4da6c9);
}

.rec-strength {
    font-size: var(--text-xs);
    color: var(--color-success, #4ade80);
    font-weight: 500;
}

.apply-combo-btn {
    padding: 8px 16px;
    background: var(--accent-primary, #4da6c9);
    color: #ffffff !important;
    border: none;
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.apply-combo-btn:hover {
    background: var(--accent-highlight, #5bb8d4);
    transform: scale(1.02);
    box-shadow: 0 2px 8px rgba(77, 166, 201, 0.3);
}

.recommendations-notes {
    margin-top: var(--space-md);
    padding: var(--space-sm) var(--space-md);
    background: rgba(251, 191, 36, 0.1);
    border: 1px solid rgba(251, 191, 36, 0.2);
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    color: var(--text-secondary, #9fb3c8);
}

.recommendations-notes:empty {
    display: none;
}

.recommendations-notes .error {
    color: var(--color-error, #f87171);
}

.recommendations-notes .error i {
    margin-right: var(--space-xs);
}

/* Empty state */
.recommendations-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-2xl);
    text-align: center;
    color: var(--text-secondary);
}

.recommendations-empty i {
    font-size: 2rem;
    margin-bottom: var(--space-md);
    opacity: 0.5;
}

.recommendations-empty p {
    margin: 0;
    font-size: var(--text-sm);
    max-width: 300px;
}

/* Mobile responsive */
@media (max-width: 640px) {
    .recommendations-modal-content {
        max-height: 90vh;
        margin: var(--space-sm);
    }

    .recommendations-modal-header {
        padding: var(--space-sm) var(--space-md);
    }

    .recommendations-modal-body {
        padding: var(--space-md);
    }

    .recommendation-card-body {
        grid-template-columns: 1fr;
    }

    .recommendation-card-footer {
        flex-direction: column;
        gap: var(--space-sm);
        align-items: flex-start;
    }

    .label-with-action {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-xs);
    }

    .view-recommendations-btn {
        margin-top: var(--space-xs);
    }
}

/* =========================================================================
   MODAL SPLIT DISPLAY - Pump Type Sections
   ========================================================================= */

.pump-type-section {
    margin-bottom: 1.5rem;
}

.pump-type-section:last-of-type {
    margin-bottom: 1rem;
}

.pump-type-header-modal {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    padding: 0.5rem 0.75rem;
    background: var(--bg-secondary, #f5f5f5);
    border-radius: 6px;
    border-left: 3px solid var(--primary-color, #4a9eff);
}

.pump-type-title-modal {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.pump-type-title-modal strong {
    font-size: 0.95rem;
    color: var(--text-primary, #333);
}

.pump-type-icon {
    font-size: 1.1rem;
}

.pump-type-tag-modal {
    font-size: 0.65rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    text-transform: uppercase;
}

.pump-type-tag-modal.variable-tag {
    background: rgba(156, 39, 176, 0.15);
    color: #9c27b0;
    border: 1px solid rgba(156, 39, 176, 0.4);
}

.pump-type-tag-modal.fixed-tag {
    background: rgba(33, 150, 243, 0.15);
    color: #2196f3;
    border: 1px solid rgba(33, 150, 243, 0.4);
}

.pump-type-info-modal {
    font-size: 0.75rem;
    color: var(--text-secondary, #666);
}

.pump-type-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.pump-type-education-modal {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: rgba(255, 193, 7, 0.1);
    border: 1px solid rgba(255, 193, 7, 0.3);
    border-radius: 6px;
    margin-top: 1rem;
    font-size: 0.8rem;
    color: var(--text-secondary, #666);
}

.pump-type-education-modal .education-icon {
    flex-shrink: 0;
    font-size: 1rem;
}

.pump-type-education-modal strong {
    color: var(--text-primary, #333);
}

/* Section-specific accent colors */
.variable-section .pump-type-header-modal {
    border-left-color: #9c27b0;
}

.fixed-section .pump-type-header-modal {
    border-left-color: #2196f3;
}

@media (max-width: 600px) {
    .pump-type-header-modal {
        flex-direction: column;
        align-items: flex-start;
    }
}