:root {
            /* Color Variables */
            --primary-color: #a74e9e;
            --secondary-color: #933c85;
            --bg-color: #2b2b2b;
            --tile-bg: rgba(51, 51, 51, 0.60);
            --panel-bg: rgba(51, 51, 51, 0.95);
            --border-color: rgba(255, 255, 255, 0.1);
            --text-color: #e6e6e6;
            --highlight-color: #4caf50;
            
            /* Responsive Typography Scale */
            --base-font-size: clamp(12px, 1.2vw, 16px);
            --small-font-size: clamp(10px, 1.0vw, 14px);
            --large-font-size: clamp(14px, 1.4vw, 18px);
            
            /* Responsive Spacing */
            --small-spacing: clamp(8px, 0.8vw, 12px);
            --medium-spacing: clamp(12px, 1.2vw, 16px);
            --large-spacing: clamp(16px, 1.6vw, 24px);
            
            /* Responsive Element Sizes */
            --button-height: clamp(40px, 4.0vw, 52px);
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            -webkit-tap-highlight-color: transparent;
        }

        /* iOS Touch Fixes */
        button, .clickable, [onclick], [role="button"] {
            -webkit-tap-highlight-color: rgba(167, 78, 158, 0.3);
            touch-action: manipulation;
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            user-select: none;
        }

        /* Minimum tap target for main buttons (not dots) */
        .control-button,
        .settings-btn,
        .graph-ctrl-btn,
        .graph-toggle-btn,
        .graph-expand-btn,
        .graph-download-btn,
        .time-nav-btn,
        .time-range-done,
        .settings-action-btn {
            min-height: 44px;
        }

        /* Dots should stay small but have larger tap area via padding */
        .material-dot,
        .temp-dot {
            min-height: auto !important;
            min-width: auto !important;
            padding: 8px;
            margin: -8px;
            box-sizing: content-box;
        }

        /* Active state for touch feedback */
        button:active, [onclick]:active {
            opacity: 0.8;
            transform: scale(0.98);
        }

        /* Ensure all interactive elements are tappable on iOS */
        .control-button,
        .graph-ctrl-btn,
        .graph-toggle-btn,
        .graph-expand-btn,
        .graph-download-btn,
        .settings-btn,
        .settings-nav-item,
        .settings-close-btn,
        .heater-tab-btn,
        .temperature-card,
        .legend-item,
        .material-card,
        .time-nav-btn,
        .time-range-done,
        .time-range-close {
            cursor: pointer;
            touch-action: manipulation;
            -webkit-tap-highlight-color: rgba(167, 78, 158, 0.3);
        }

        body {
            font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Oxygen, Ubuntu, Cantarell, sans-serif;
            background-color: var(--bg-color);
            min-height: 100vh;
            padding: var(--medium-spacing);
            color: var(--text-color);
            font-size: var(--base-font-size);
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
        }

        h1 {
            text-align: center;
            color: #fff;
            margin-bottom: var(--large-spacing);
            font-size: clamp(24px, 2.4vw, 32px);
            font-weight: 600;
            letter-spacing: 0.5px;
        }

        .status-bar {
            background: var(--panel-bg);
            padding: var(--medium-spacing);
            border-radius: var(--medium-spacing);
            margin-bottom: var(--medium-spacing);
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
            border: 1px solid var(--border-color);
            transition: all 0.3s ease;
        }

        .status-bar:hover {
            background: rgba(83, 60, 133, 0.15);
        }

        .connection-status {
            display: flex;
            align-items: center;
            gap: var(--small-spacing);
        }

        .status-indicator {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: #ef4444;
            animation: pulse 2s infinite;
            display: inline-block;
        }

        .status-indicator.connected {
            background: #22c55e;
            box-shadow: 0 0 8px rgba(34, 197, 94, 0.4);
        }

        @keyframes pulse {
            0% { opacity: 1; transform: scale(1); }
            50% { opacity: 0.7; transform: scale(1.05); }
            100% { opacity: 1; transform: scale(1); }
        }

        .last-update {
            color: rgba(255, 255, 255, 0.7);
            font-size: var(--small-font-size);
            font-family: monospace;
        }

        /* ============================================
           UNIFIED PANEL SYSTEM - Clean, Aligned, Beautiful
           Inspired by Apple's design principles
           ============================================ */
        .heater-tabs-container,
        .material-library {
            background: linear-gradient(180deg, rgba(38, 38, 42, 0.98) 0%, rgba(28, 28, 32, 0.98) 100%);
            border-radius: 16px;
            padding: 20px;
            border: 1px solid rgba(255, 255, 255, 0.08);
            box-shadow: 
                0 4px 24px rgba(0, 0, 0, 0.4),
                inset 0 1px 0 rgba(255, 255, 255, 0.05);
            display: flex;
            flex-direction: column;
            flex: 1;
            min-height: 0;
            overflow: hidden;
        }

        /* Content wrappers - fill remaining space */
        .materials-view,
        .graph-view,
        .tab-content.active {
            display: flex;
            flex-direction: column;
            flex: 1;
            min-height: 0;
        }

        .materials-view {
            display: none;
        }

        .materials-view.active,
        #materialsView[style*="flex"] {
            display: flex !important;
        }

        .temp-panel-header {
            display: none;
        }

        /* Elegant Pagination - Apple-inspired minimal design */
        .temp-dots {
            display: flex !important;
            align-items: center;
            justify-content: center;
            gap: clamp(6px, 0.8vw, 12px);
            height: clamp(32px, 4vw, 40px);
            flex-shrink: 0;
            margin-top: clamp(8px, 1vw, 16px);
            padding: 0;
        }

        /* Pagination container - now in header */
        .material-dots,
        .bed-dots {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: clamp(3px, 0.4vw, 6px);
            height: 28px;
            flex-shrink: 0;
            margin: 0;
            padding: 0;
        }

        /* Pagination arrows */
        .pagination-arrow {
            background: rgba(255, 255, 255, 0.08);
            border: none;
            border-radius: clamp(4px, 0.5vw, 6px);
            width: clamp(28px, 3.5vw, 36px);
            height: clamp(28px, 3.5vw, 36px);
            color: rgba(255, 255, 255, 0.7);
            font-size: clamp(18px, 2.2vw, 24px);
            font-weight: 300;
            cursor: pointer;
            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0;
            line-height: 1;
        }

        /* Header pagination arrows - smaller */
        .material-library-header .pagination-arrow,
        .heater-panel-header .pagination-arrow {
            width: 24px;
            height: 24px;
            font-size: 16px;
            border-radius: 5px;
        }

        .pagination-arrow:hover:not(:disabled) {
            background: rgba(255, 255, 255, 0.15);
            color: rgba(255, 255, 255, 0.9);
        }

        .pagination-arrow:active:not(:disabled) {
            transform: scale(0.95);
        }

        .pagination-arrow:disabled {
            opacity: 0.3;
            cursor: not-allowed;
        }

        /* Pagination pages container */
        .pagination-pages {
            display: flex;
            align-items: center;
            gap: clamp(2px, 0.3vw, 4px);
        }

        /* Header pagination pages container - tighter spacing */
        .material-library-header .pagination-pages,
        .heater-panel-header .pagination-pages {
            gap: 2px;
        }

        /* Page number pills - show when materials view is active */
        .pagination-page {
            min-width: clamp(24px, 3vw, 32px);
            height: clamp(24px, 3vw, 32px);
            padding: 0 clamp(6px, 0.8vw, 10px);
            background: rgba(255, 255, 255, 0.08);
            border: none;
            border-radius: clamp(4px, 0.5vw, 6px);
            color: rgba(255, 255, 255, 0.6);
            font-size: clamp(11px, 1.3vw, 14px);
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* Header pagination pages - smaller */
        .material-library-header .pagination-page,
        .heater-panel-header .pagination-page {
            min-width: 20px;
            height: 20px;
            padding: 0 6px;
            font-size: 11px;
            border-radius: 4px;
        }

        .pagination-page:hover {
            background: rgba(255, 255, 255, 0.12);
            color: rgba(255, 255, 255, 0.8);
        }

        .pagination-page.active {
            background: rgba(255, 255, 255, 0.2);
            color: #fff;
            font-weight: 600;
        }

        .pagination-page:active {
            transform: scale(0.95);
        }

        /* Ellipsis */
        .pagination-ellipsis {
            color: rgba(255, 255, 255, 0.4);
            font-size: clamp(11px, 1.3vw, 14px);
            padding: 0 clamp(4px, 0.5vw, 6px);
            user-select: none;
            display: inline-block;
        }

        /* Page info text */
        .pagination-info {
            color: rgba(255, 255, 255, 0.4);
            font-size: clamp(10px, 1.1vw, 12px);
            font-weight: 400;
            margin-left: clamp(8px, 1vw, 12px);
            user-select: none;
            display: inline-block;
        }

        /* Header pagination info - smaller */
        .material-library-header .pagination-info,
        .heater-panel-header .pagination-info {
            font-size: 10px;
            margin-left: 6px;
            color: rgba(255, 255, 255, 0.5);
        }

        /* Legacy dot styles for temp-dots (keep for compatibility) */
        .temp-dot {
            width: 4px;
            height: 4px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.2);
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .temp-dot:hover {
            background: rgba(255, 255, 255, 0.4);
        }

        .temp-dot.active {
            background: rgba(255, 255, 255, 0.8);
            width: 8px;
            height: 4px;
            border-radius: 2px;
        }

        .tab-header {
            display: flex;
            gap: var(--small-spacing);
            margin-bottom: var(--medium-spacing);
            border-bottom: 1px solid var(--border-color);
        }

        .tab-button {
            background: transparent;
            border: none;
            border-bottom: 2px solid transparent;
            color: rgba(255, 255, 255, 0.6);
            padding: var(--small-spacing) var(--medium-spacing);
            font-size: var(--base-font-size);
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s ease;
            position: relative;
            margin-bottom: -1px;
        }

        .tab-button:hover {
            color: rgba(255, 255, 255, 0.9);
        }

        .tab-button.active {
            color: #fff;
            border-bottom-color: var(--primary-color);
        }

        .tab-content {
            display: none;
        }

        /* ============================================
           UNIFIED GRID SYSTEM - Both panels 2x2
           Perfectly matched sizing and gaps
           ============================================ */
        .temperatures-grid,
        .material-list {
            display: grid;
            grid-template-columns: 1fr 1fr;
            grid-template-rows: 1fr 1fr;
            gap: clamp(8px, 1vw, 14px);
            align-items: stretch;
            justify-items: stretch;
            height: 100%;
            min-height: 0;
            flex: 1;
            overflow: hidden;
        }

        /* ============================================
           UNIFIED CARD SYSTEM - Heater & Material Cards
           Identical sizing, padding, and base styles
           ============================================ */
        .temp-card,
        .material-card {
            width: 100%;
            height: 100%;
            min-height: 0;
            background: linear-gradient(145deg, rgba(55, 55, 60, 0.9) 0%, rgba(40, 40, 45, 0.9) 100%);
            border-radius: clamp(6px, 0.8vw, 14px);
            padding: clamp(4px, 1.2vw, 16px);
            border: 1px solid rgba(255, 255, 255, 0.08);
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            cursor: pointer;
            transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            overflow: hidden;
        }

        .temp-card::before,
        .material-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
        }

        .temp-card:hover,
        .material-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 32px rgba(167, 78, 158, 0.2);
            border-color: rgba(167, 78, 158, 0.4);
        }

        .temp-card.selected {
            border-color: var(--primary-color);
            background: linear-gradient(145deg, rgba(80, 50, 75, 0.9) 0%, rgba(50, 35, 50, 0.9) 100%);
            box-shadow: 0 0 0 2px var(--primary-color), 0 8px 32px rgba(167, 78, 158, 0.3);
        }

        .temp-card.heater-hidden {
            display: none !important;
        }

        /* Bed pagination - hide beds not on current page */
        .temp-card.bed-page-hidden {
            display: none !important;
        }

        .temp-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: clamp(1px, 0.2em, 6px);
            flex-shrink: 0;
        }

        .temp-name {
            font-weight: 600;
            font-size: clamp(9px, 1.2vw, 13px);
            color: #fff;
            text-transform: none;
            letter-spacing: 0;
        }

        .temp-value {
            font-size: clamp(16px, 3.5vw, 44px);
            font-weight: 300;
            margin: clamp(1px, 0.15em, 4px) 0 clamp(2px, 0.3em, 8px);
            transition: color 0.3s;
            font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
            letter-spacing: -1px;
            text-align: center;
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 0;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .temp-value.cold {
            color: #60a5fa;
        }

        .temp-value.warm {
            color: #fbbf24;
        }

        .temp-value.hot {
            color: #f87171;
        }

        /* Target temperature labels - centered and refined */
        .temp-target,
        .temp-target-active,
        .temp-target-standby {
            font-size: clamp(8px, 1vw, 12px);
            font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
            text-align: center;
            margin: clamp(1px, 0.1em, 2px) 0;
            letter-spacing: 0.3px;
        }

        .temp-target {
            color: rgba(255, 255, 255, 0.5);
        }

        .temp-target-active {
            color: rgba(34, 197, 94, 0.85);
        }

        .temp-target-standby {
            color: rgba(245, 158, 11, 0.75);
        }

        /* Heater state badges - refined pill design */
        .heater-state-indicator {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: clamp(7px, 0.9vw, 11px);
            padding: clamp(2px, 0.3em, 4px) clamp(5px, 0.8em, 10px);
            border-radius: 20px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .heater-state-indicator.active {
            background: rgba(34, 197, 94, 0.2);
            color: #4ade80;
            box-shadow: 0 0 8px rgba(34, 197, 94, 0.3);
        }

        .heater-state-indicator.standby {
            background: rgba(245, 158, 11, 0.2);
            color: #fbbf24;
        }

        .heater-state-indicator.off {
            background: rgba(100, 100, 110, 0.3);
            color: rgba(255, 255, 255, 0.45);
        }

        .heater-state-indicator.fault {
            background: rgba(239, 68, 68, 0.25);
            color: #f87171;
            animation: fault-pulse 1s ease-in-out infinite;
        }

        .heater-state-indicator.tuning {
            background: rgba(245, 158, 11, 0.25);
            color: #fbbf24;
            animation: fault-pulse 1s ease-in-out infinite;
        }

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

        /* Heater Fault Modal */
        .fault-modal-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.8);
            z-index: 10000;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }

        .fault-modal-overlay.show {
            display: flex;
        }

        .fault-modal {
            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
            border: 3px solid #ef4444;
            border-radius: 16px;
            padding: 24px;
            max-width: 400px;
            width: 100%;
            animation: fault-modal-pulse 1.5s ease-in-out infinite;
            box-shadow: 0 8px 40px rgba(239, 68, 68, 0.5);
        }

        @keyframes fault-modal-pulse {
            0%, 100% { 
                box-shadow: 0 8px 40px rgba(239, 68, 68, 0.5);
                border-color: #ef4444;
            }
            50% { 
                box-shadow: 0 8px 60px rgba(239, 68, 68, 0.8);
                border-color: #f87171;
            }
        }

        .fault-modal-header {
            display: flex;
            align-items: center;
            gap: 16px;
            margin-bottom: 20px;
        }

        .fault-modal-icon {
            width: 50px;
            height: 50px;
            background: #ef4444;
            color: #fff;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 28px;
            font-weight: bold;
            flex-shrink: 0;
            animation: icon-pulse 1s ease-in-out infinite;
        }

        @keyframes icon-pulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.1); }
        }

        .fault-modal-header h2 {
            color: #ef4444;
            margin: 0;
            font-size: clamp(18px, 2.2vw, 24px);
            letter-spacing: 1px;
        }

        .fault-modal-body {
            margin-bottom: 16px;
        }

        .fault-modal-message {
            color: rgba(255, 255, 255, 0.9);
            font-size: var(--base-font-size);
            margin: 0 0 12px 0;
        }

        .faulted-heaters-list {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .faulted-heater-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            background: rgba(239, 68, 68, 0.15);
            border: 1px solid rgba(239, 68, 68, 0.3);
            border-radius: 8px;
            padding: 12px;
        }

        .faulted-heater-name {
            color: #fff;
            font-weight: 600;
            font-size: var(--base-font-size);
        }

        .clear-fault-btn {
            background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
            border: none;
            color: white;
            padding: 8px 16px;
            border-radius: 6px;
            font-weight: 600;
            font-size: var(--small-font-size);
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .clear-fault-btn:hover {
            background: linear-gradient(135deg, #f87171 0%, #ef4444 100%);
            transform: scale(1.02);
        }

        .clear-fault-btn:disabled {
            opacity: 0.6;
            cursor: not-allowed;
        }

        .fault-modal-instructions {
            background: rgba(0, 0, 0, 0.3);
            border-radius: 8px;
            padding: 12px;
            margin-bottom: 16px;
        }

        .fault-modal-instructions p {
            color: rgba(255, 255, 255, 0.85);
            font-size: var(--small-font-size);
            margin: 0;
            line-height: 1.5;
        }

        .fault-modal-instructions p + p {
            margin-top: 8px;
        }

        .fault-contact {
            font-size: var(--small-font-size) !important;
            color: rgba(255, 255, 255, 0.7) !important;
        }

        .fault-modal-dismiss {
            width: 100%;
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
            color: rgba(255, 255, 255, 0.8);
            padding: 12px;
            border-radius: 8px;
            font-size: var(--base-font-size);
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .fault-modal-dismiss:hover {
            background: rgba(255, 255, 255, 0.15);
            color: #fff;
        }

        .controls {
            display: flex;
            flex-direction: column;
            gap: var(--medium-spacing);
            margin-top: var(--large-spacing);
        }

        .control-button {
            background: linear-gradient(135deg, var(--primary-color) 0%, #6B4C6A 50%, #3A5F4E 80%, #1A3B2E 100%);
            color: white;
            border: 1px solid var(--primary-color);
            border-radius: var(--small-spacing);
            padding: var(--small-spacing) var(--medium-spacing);
            font-size: var(--base-font-size);
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            min-height: var(--button-height);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: var(--small-spacing);
            position: relative;
            overflow: hidden;
        }

        .control-button::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
            transition: left 0.5s ease;
        }

        .control-button:hover::before {
            left: 100%;
        }

        .control-button:hover:not(:disabled) {
            background: linear-gradient(135deg, var(--primary-color) 0%, #6B4C6A 50%, #3A5F4E 80%, #1A3B2E 100%);
            border-color: var(--primary-color);
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(167, 78, 158, 0.3);
        }

        .control-button:active:not(:disabled) {
            transform: translateY(0);
        }

        .control-button:disabled {
            opacity: 0.6;
            cursor: not-allowed;
            background: #6c757d !important;
            border-color: #6c757d !important;
        }

        .btn-heaters-off {
            background: linear-gradient(135deg, #dc3545 0%, #c82333 55%, #b21e2f 100%);
            border-color: #dc3545;
        }

        .btn-heaters-off:hover:not(:disabled) {
            background: linear-gradient(135deg, #e14e5b 0%, #d73444 55%, #c22f40 100%);
            box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);
        }

        .btn-pause {
            background: linear-gradient(135deg, #007bff 0%, #0056b3 55%, #004085 100%);
            border-color: #007bff;
        }

        .btn-pause:hover:not(:disabled) {
            background: linear-gradient(135deg, #0069d9 0%, #0056b3 55%, #004085 100%);
            box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
        }

        .btn-pause.countdown {
            background: linear-gradient(135deg, #f59e0b 0%, #d97706 55%, #b45309 100%);
            border-color: #f59e0b;
            animation: countdown-pulse 1s infinite;
        }

        .btn-boost {
            background: linear-gradient(135deg, #10b981 0%, #059669 55%, #047857 100%);
            border-color: #10b981;
        }

        .btn-boost:hover:not(:disabled) {
            background: linear-gradient(135deg, #34d399 0%, #10b981 55%, #059669 100%);
            box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
        }

        .btn-boost.countdown {
            background: linear-gradient(135deg, #f59e0b 0%, #d97706 55%, #b45309 100%);
            border-color: #f59e0b;
            animation: countdown-pulse 1s infinite;
        }

        .btn-view-toggle {
            background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 55%, #6d28d9 100%);
            border-color: #8b5cf6;
        }

        .btn-view-toggle:hover:not(:disabled) {
            background: linear-gradient(135deg, #a78bfa 0%, #8b5cf6 55%, #7c3aed 100%);
            box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
        }

        @keyframes countdown-pulse {
            0%, 100% { transform: scale(1); box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3); }
            50% { transform: scale(1.02); box-shadow: 0 6px 16px rgba(245, 158, 11, 0.5); }
        }

        .error-message {
            background: rgba(239, 68, 68, 0.2);
            color: #ef4444;
            padding: var(--medium-spacing);
            border-radius: var(--small-spacing);
            margin-bottom: var(--medium-spacing);
            border: 1px solid rgba(239, 68, 68, 0.3);
            display: none;
            border-left: 4px solid #ef4444;
        }

        .error-message.show {
            display: block;
        }

        /* Confirmation Modal Styles */
        .confirmation-modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.7);
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 10000;
            -webkit-backdrop-filter: blur(3px);
            backdrop-filter: blur(3px);
        }

        .confirmation-modal.show {
            display: flex;
        }

        .confirmation-dialog {
            background: var(--panel-bg);
            border-radius: var(--medium-spacing);
            padding: var(--large-spacing);
            max-width: 400px;
            min-width: 300px;
            border: 1px solid var(--border-color);
            box-shadow: 0 12px 24px rgba(0, 0, 0, 0.5);
        }

        .confirmation-dialog h3 {
            color: #dc3545;
            margin: 0 0 var(--medium-spacing) 0;
            font-size: var(--large-font-size);
            display: flex;
            align-items: center;
            gap: var(--small-spacing);
        }

        .confirmation-dialog p {
            color: var(--text-color);
            margin-bottom: var(--large-spacing);
            line-height: 1.5;
        }

        .confirmation-buttons {
            display: flex;
            gap: var(--small-spacing);
            justify-content: flex-end;
        }

        .confirmation-buttons button {
            flex: none;
            width: auto;
            padding: var(--small-spacing) var(--large-spacing);
            margin: 0;
            min-height: auto;
        }

        .confirm-btn {
            background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
            border-color: #dc3545;
        }

        .confirm-btn:hover {
            background: linear-gradient(135deg, #c82333 0%, #bd2130 100%);
        }

        .cancel-btn {
            background: linear-gradient(135deg, #6c757d 0%, #5a6268 100%);
            border-color: #6c757d;
        }

        .cancel-btn:hover {
            background: linear-gradient(135deg, #5a6268 0%, #495057 100%);
        }

        /* Settings Button Styles */
        .settings-btn {
            background: rgba(108, 117, 125, 0.3);
            border: 1px solid var(--border-color);
            border-radius: var(--small-spacing);
            color: #fff;
            padding: var(--small-spacing) var(--medium-spacing);
            cursor: pointer;
            font-size: var(--base-font-size);
            display: flex;
            align-items: center;
            gap: var(--small-spacing);
            transition: all 0.3s ease;
        }

        .settings-btn:hover {
            background: rgba(167, 78, 158, 0.3);
            border-color: var(--primary-color);
        }

        .settings-btn svg {
            width: 18px;
            height: 18px;
        }

        /* Settings Modal Styles - Full Screen */
        .settings-modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: var(--bg-color);
            display: none;
            z-index: 10000;
        }

        .settings-modal.show {
            display: flex;
        }

        .settings-container {
            display: flex;
            width: 100%;
            height: 100%;
        }

        .settings-sidebar {
            width: 220px;
            background: #1a1a2e;
            border-right: 1px solid var(--border-color);
            display: flex;
            flex-direction: column;
            padding: 20px 0;
            flex-shrink: 0;
        }

        /* Mobile Settings Modal - Enhanced */
        @media (max-width: 639px) {
            .settings-container {
                flex-direction: column;
                height: 100%;
            }

            .settings-sidebar {
                width: 100%;
                border-right: none;
                border-bottom: 1px solid var(--border-color);
                padding: 12px 0;
                flex-shrink: 0;
                max-height: none;
            }

            .settings-sidebar-header {
                display: none;
            }

            .settings-nav {
                display: flex;
                flex-wrap: nowrap;
                gap: 6px;
                padding: 0 12px;
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
                scroll-snap-type: x mandatory;
            }

            .settings-nav::-webkit-scrollbar {
                display: none;
            }

            .settings-nav-item {
                padding: 10px 14px;
                font-size: 12px;
                border-radius: 20px;
                white-space: nowrap;
                flex-shrink: 0;
                scroll-snap-align: start;
                border-left: none;
                background: rgba(255, 255, 255, 0.05);
            }

            .settings-nav-item.active {
                background: rgba(167, 78, 158, 0.3);
                border-left: none;
            }

            .settings-nav-item svg {
                display: none;
            }

            .settings-nav-item span {
                display: block;
            }

            .settings-close-btn {
                position: fixed;
                bottom: 20px;
                left: 50%;
                transform: translateX(-50%);
                width: calc(100% - 32px);
                max-width: 400px;
                z-index: 10;
                min-height: 50px;
                font-size: 15px;
                font-weight: 600;
            }

            .settings-content {
                padding: 16px;
                padding-bottom: 90px;
                overflow-y: auto;
                -webkit-overflow-scrolling: touch;
            }

            .settings-section-title {
                font-size: 20px;
                margin-bottom: 16px;
            }

            .settings-section-desc,
            .settings-section-subtitle {
                font-size: 13px;
            }

            .settings-card {
                padding: 16px;
                margin-bottom: 12px;
                border-radius: 12px;
            }

            .settings-card-title {
                font-size: 15px;
                margin-bottom: 12px;
            }

            .settings-field {
                margin-bottom: 14px;
            }

            .settings-field label {
                font-size: 13px;
                margin-bottom: 6px;
            }

            .settings-field input,
            .settings-field select {
                padding: 12px;
                font-size: 16px; /* Prevents iOS zoom on focus */
                border-radius: 8px;
            }

            .settings-action-btn {
                padding: 14px 18px;
                font-size: 14px;
                font-weight: 600;
                min-height: 48px;
                border-radius: 10px;
            }

            /* Wizard improvements for mobile */
            .wizard-progress {
                overflow-x: auto;
                flex-wrap: nowrap;
                gap: 8px;
                padding-bottom: 8px;
                -webkit-overflow-scrolling: touch;
            }

            .wizard-step {
                flex-shrink: 0;
                padding: 8px 12px;
            }

            .wizard-io-row {
                grid-template-columns: 1fr;
                gap: 12px;
            }

            .wizard-input-row {
                flex-direction: column;
                gap: 8px;
            }

            .wizard-input-row input,
            .wizard-input-row select {
                width: 100%;
            }

            .wizard-input-row button {
                width: 100%;
            }
        }

        .settings-sidebar-header {
            padding: 0 20px 20px;
            border-bottom: 1px solid var(--border-color);
            margin-bottom: 10px;
        }

        .settings-sidebar-header h2 {
            display: flex;
            align-items: center;
            gap: 12px;
            font-size: clamp(18px, 2.2vw, 24px);
            color: #fff;
            margin: 0;
        }

        .settings-nav {
            flex: 1;
            overflow-y: auto;
        }

        .settings-nav-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 14px 20px;
            color: rgba(255, 255, 255, 0.6);
            cursor: pointer;
            transition: all 0.2s ease;
            border-left: 3px solid transparent;
            font-size: var(--base-font-size);
        }

        .settings-nav-item:hover {
            background: rgba(255, 255, 255, 0.05);
            color: rgba(255, 255, 255, 0.8);
        }

        .settings-nav-item.active {
            background: rgba(139, 92, 246, 0.1);
            color: var(--primary-color);
            border-left-color: var(--primary-color);
        }

        .settings-nav-item svg {
            width: 20px;
            height: 20px;
            flex-shrink: 0;
        }

        .settings-close-btn {
            margin: auto 20px 0;
            padding: 14px;
            background: rgba(239, 68, 68, 0.2);
            border: 1px solid rgba(239, 68, 68, 0.3);
            border-radius: 8px;
            color: #ef4444;
            font-size: var(--base-font-size);
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }

        .settings-close-btn:hover {
            background: rgba(239, 68, 68, 0.3);
        }

        .settings-content {
            flex: 1;
            overflow-y: auto;
            padding: 30px;
            background: #1a1a2e;
        }

        .settings-section {
            display: none;
            max-width: 700px;
        }

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

        .settings-section-title {
            font-size: clamp(18px, 2.2vw, 24px);
            font-weight: 600;
            color: #fff;
            margin: 0 0 8px 0;
        }

        .settings-section-desc {
            color: rgba(255, 255, 255, 0.5);
            font-size: var(--base-font-size);
            margin: 0 0 24px 0;
        }

        .settings-card {
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid var(--border-color);
            border-radius: 12px;
            padding: 20px;
            margin-bottom: 20px;
        }

        .settings-card-title {
            font-size: var(--base-font-size);
            font-weight: 600;
            color: #fff;
            margin: 0 0 16px 0;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .settings-row {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
            gap: 16px;
            margin-bottom: 16px;
        }

        .settings-row:last-child {
            margin-bottom: 0;
        }

        .settings-field {
            display: flex;
            flex-direction: column;
            gap: 6px;
        }

        .settings-field label {
            font-size: var(--small-font-size);
            color: rgba(255, 255, 255, 0.6);
        }

        .settings-field input,
        .settings-field select {
            padding: 12px;
            background: rgba(0, 0, 0, 0.3);
            border: 1px solid var(--border-color);
            border-radius: 8px;
            color: #fff;
            font-size: var(--base-font-size);
        }

        .settings-field input:focus,
        .settings-field select:focus {
            outline: none;
            border-color: var(--primary-color);
        }

        .settings-action-btn {
            padding: 14px 24px;
            border: none;
            border-radius: 8px;
            font-size: var(--base-font-size);
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s ease;
            min-height: 48px;
        }

        .settings-action-btn.primary {
            background: linear-gradient(135deg, var(--primary-color) 0%, #7c3aed 100%);
            color: #fff;
        }

        .settings-action-btn.primary:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
        }

        .settings-action-btn.warning {
            background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
            color: #fff;
        }

        .settings-action-btn.success {
            background: linear-gradient(135deg, #10b981 0%, #059669 100%);
            color: #fff;
        }

        .settings-status-msg {
            padding: 12px 16px;
            border-radius: 8px;
            font-size: var(--small-font-size);
            margin-top: 12px;
            display: none;
        }

        .settings-status-msg.show {
            display: block;
        }

        .settings-status-msg.success {
            background: rgba(16, 185, 129, 0.2);
            border: 1px solid rgba(16, 185, 129, 0.3);
            color: #10b981;
        }

        .settings-status-msg.error {
            background: rgba(239, 68, 68, 0.2);
            border: 1px solid rgba(239, 68, 68, 0.3);
            color: #ef4444;
        }

        .settings-status-msg.warning {
            background: rgba(245, 158, 11, 0.2);
            border: 1px solid rgba(245, 158, 11, 0.3);
            color: #f59e0b;
            display: block;
        }

        /* Legacy settings styles for compatibility */
        .settings-dialog { display: none; }
        .settings-group { margin-bottom: var(--medium-spacing); }
        .settings-label { display: block; color: rgba(255, 255, 255, 0.8); font-size: var(--small-font-size); margin-bottom: var(--small-spacing); font-weight: 500; }
        .settings-input { width: 100%; padding: var(--small-spacing) var(--medium-spacing); background: rgba(0, 0, 0, 0.3); border: 1px solid var(--border-color); border-radius: var(--small-spacing); color: #fff; font-size: var(--base-font-size); }
        .settings-input:focus { outline: none; border-color: var(--primary-color); }
        .settings-buttons { display: flex; gap: var(--small-spacing); justify-content: flex-end; margin-top: var(--large-spacing); }
        .settings-status { font-size: var(--small-font-size); padding: var(--small-spacing); border-radius: var(--small-spacing); margin-top: var(--small-spacing); display: none; }
        .settings-status.success { display: block; background: rgba(34, 197, 94, 0.2); color: #22c55e; border: 1px solid rgba(34, 197, 94, 0.3); }

        /* Settings Toggle Switch */
        .settings-toggle {
            display: flex;
            align-items: center;
            cursor: pointer;
            user-select: none;
        }

        .settings-toggle input {
            opacity: 0;
            width: 0;
            height: 0;
            position: absolute;
        }

        .settings-toggle-slider {
            position: relative;
            display: inline-block;
            width: 48px;
            height: 26px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 13px;
            transition: all 0.3s ease;
        }

        .settings-toggle-slider::before {
            content: '';
            position: absolute;
            width: 20px;
            height: 20px;
            left: 3px;
            top: 3px;
            background: #fff;
            border-radius: 50%;
            transition: all 0.3s ease;
        }

        .settings-toggle input:checked + .settings-toggle-slider {
            background: linear-gradient(135deg, #10b981 0%, #059669 100%);
        }

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

        /* Bug Report Item Styles */
        .bug-report-item {
            transition: all 0.2s ease;
        }

        .bug-report-item:hover {
            background: rgba(0, 0, 0, 0.3) !important;
        }

        .bug-report-action-btn {
            padding: 6px 12px;
            border: none;
            border-radius: 6px;
            font-size: 11px;
            font-weight: 500;
            cursor: pointer;
            background: rgba(139, 92, 246, 0.8);
            color: #fff;
            transition: all 0.2s ease;
        }

        .bug-report-action-btn:hover {
            transform: translateY(-1px);
            opacity: 0.9;
        }

        /* ========================================
           SETUP WIZARD STYLES
           ======================================== */
        .wizard-progress {
            display: flex;
            justify-content: center;
            gap: 6px;
            margin-bottom: 28px;
            padding: 0 16px;
        }

        .wizard-step {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 10px 18px;
            border-radius: 24px;
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 255, 255, 0.06);
            transition: all 0.2s ease;
        }

        .wizard-step-number {
            width: 26px;
            height: 26px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.08);
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 600;
            font-size: var(--small-font-size);
            color: rgba(255, 255, 255, 0.4);
            transition: all 0.2s ease;
        }

        .wizard-step span {
            font-size: var(--small-font-size);
            font-weight: 500;
            color: rgba(255, 255, 255, 0.4);
            transition: color 0.2s ease;
        }

        .wizard-step.active {
            background: rgba(167, 78, 158, 0.12);
            border-color: rgba(167, 78, 158, 0.3);
        }

        .wizard-step.active .wizard-step-number {
            background: #a74e9e;
            color: #fff;
        }

        .wizard-step.active span {
            color: #fff;
        }

        .wizard-step.completed {
            background: rgba(16, 185, 129, 0.08);
            border-color: rgba(16, 185, 129, 0.2);
        }

        .wizard-step.completed .wizard-step-number {
            background: #10b981;
            color: #fff;
            font-size: var(--small-font-size);
        }

        .wizard-step.completed .wizard-step-number::after {
            content: '\2713';
        }

        .wizard-step.completed span {
            color: rgba(16, 185, 129, 0.9);
        }

        .wizard-panel {
            display: none;
            animation: fadeIn 0.3s ease;
        }

        .wizard-panel.active {
            display: block;
        }

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

        .wizard-description {
            color: rgba(255, 255, 255, 0.5);
            font-size: var(--small-font-size);
            margin-bottom: 24px;
            line-height: 1.6;
        }

        .wizard-card {
            border: 1px solid rgba(255, 255, 255, 0.06);
        }

        .wizard-card .settings-card-title {
            font-size: var(--base-font-size);
            font-weight: 600;
            margin-bottom: 8px;
        }

        /* Wizard input row */
        .wizard-input-row {
            display: flex;
            gap: 10px;
        }

        .wizard-input-row input,
        .wizard-input-row select {
            flex: 1;
        }

        .wizard-input-row .settings-action-btn {
            white-space: nowrap;
            padding: 10px 16px;
        }

        /* Quick setup buttons */
        .wizard-quick-setup {
            background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(16, 185, 129, 0.03) 100%);
            border-color: rgba(16, 185, 129, 0.2);
        }

        .wizard-quick-setup .settings-card-title {
            color: #10b981;
        }

        .wizard-quick-buttons {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 12px;
        }

        .wizard-model-btn {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 20px 16px;
            border-radius: 10px;
            border: 1px solid rgba(255, 255, 255, 0.1);
            background: rgba(255, 255, 255, 0.03);
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .wizard-model-btn:hover {
            transform: translateY(-2px);
            border-color: rgba(255, 255, 255, 0.2);
        }

        .wizard-model-btn-pe320 {
            background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(16, 185, 129, 0.05) 100%);
            border-color: rgba(16, 185, 129, 0.3);
        }

        .wizard-model-btn-pe320:hover {
            background: linear-gradient(135deg, rgba(16, 185, 129, 0.25) 0%, rgba(16, 185, 129, 0.1) 100%);
            border-color: rgba(16, 185, 129, 0.5);
        }

        .wizard-model-btn-pulsar {
            background: linear-gradient(135deg, rgba(99, 102, 241, 0.15) 0%, rgba(99, 102, 241, 0.05) 100%);
            border-color: rgba(99, 102, 241, 0.3);
        }

        .wizard-model-btn-pulsar:hover {
            background: linear-gradient(135deg, rgba(99, 102, 241, 0.25) 0%, rgba(99, 102, 241, 0.1) 100%);
            border-color: rgba(99, 102, 241, 0.5);
        }

        .wizard-model-btn-name {
            font-size: var(--base-font-size);
            font-weight: 600;
            color: #fff;
            margin-bottom: 4px;
        }

        .wizard-model-btn-desc {
            font-size: var(--small-font-size);
            color: rgba(255, 255, 255, 0.5);
        }

        /* Wizard checkbox */
        .wizard-checkbox {
            display: flex;
            align-items: center;
            gap: 10px;
            cursor: pointer;
            margin-bottom: 12px;
            font-size: var(--small-font-size);
            color: rgba(255, 255, 255, 0.8);
        }

        .wizard-checkbox input[type="checkbox"] {
            width: 16px;
            height: 16px;
            accent-color: #10b981;
        }

        .wizard-sub-config {
            margin-top: 12px;
            padding-left: 26px;
        }

        .wizard-compact-field {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 12px;
        }

        .wizard-compact-field label {
            margin-bottom: 0;
            min-width: 50px;
        }

        .wizard-compact-field select {
            width: 80px;
        }

        .wizard-ip-status {
            margin-top: 12px;
            padding: 10px 14px;
            border-radius: 8px;
            font-size: var(--small-font-size);
            display: none;
        }

        .wizard-ip-status.checking {
            display: flex;
            align-items: center;
            gap: 10px;
            background: rgba(59, 130, 246, 0.15);
            border: 1px solid rgba(59, 130, 246, 0.3);
            color: #3b82f6;
        }

        .wizard-ip-status .spinner {
            width: 14px;
            height: 14px;
            border: 2px solid rgba(59, 130, 246, 0.3);
            border-top-color: #3b82f6;
            border-radius: 50%;
            animation: wizardSpin 0.8s linear infinite;
        }

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

        .wizard-ip-status.connected {
            display: block;
            background: rgba(16, 185, 129, 0.15);
            border: 1px solid rgba(16, 185, 129, 0.3);
            color: #10b981;
        }

        .wizard-ip-status.error {
            display: block;
            background: rgba(239, 68, 68, 0.15);
            border: 1px solid rgba(239, 68, 68, 0.3);
            color: #ef4444;
        }

        .wizard-secondary-section {
            margin-top: 20px;
            padding-top: 20px;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
        }

        .wizard-info-banner {
            background: rgba(245, 158, 11, 0.15);
            border: 1px solid rgba(245, 158, 11, 0.3);
            border-radius: 8px;
            padding: 12px 16px;
            margin-bottom: 16px;
            color: #f59e0b;
            font-size: var(--small-font-size);
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .wizard-io-group {
            margin-bottom: 28px;
            padding-bottom: 24px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.06);
        }

        .wizard-io-group:last-child {
            margin-bottom: 0;
            padding-bottom: 0;
            border-bottom: none;
        }

        .wizard-io-actions {
            display: flex;
            justify-content: flex-end;
            margin-top: 12px;
        }

        .wizard-io-group h4 {
            font-size: var(--small-font-size);
            font-weight: 600;
            letter-spacing: 0.5px;
            text-transform: uppercase;
            color: rgba(255, 255, 255, 0.4);
            margin-bottom: 16px;
        }

        .wizard-io-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 16px;
        }

        .wizard-heaters-grid {
            display: grid;
            gap: 6px;
        }

        .wizard-heater-row {
            display: grid;
            grid-template-columns: 50px 1fr 90px;
            gap: 12px;
            align-items: center;
            padding: 8px 12px;
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 255, 255, 0.06);
            border-radius: 8px;
            transition: background 0.15s ease, border-color 0.15s ease;
        }

        .wizard-heater-row:hover {
            background: rgba(255, 255, 255, 0.05);
            border-color: rgba(255, 255, 255, 0.1);
        }

        .wizard-heater-row .heater-id {
            font-size: var(--small-font-size);
            font-weight: 600;
            color: rgba(167, 78, 158, 0.8);
            background: rgba(167, 78, 158, 0.1);
            padding: 4px 8px;
            border-radius: 4px;
            text-align: center;
        }

        .wizard-heater-row input {
            padding: 8px 12px;
            font-size: var(--small-font-size);
            background: rgba(0, 0, 0, 0.3);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 6px;
            color: #fff;
        }

        .wizard-heater-row input:focus {
            outline: none;
            border-color: rgba(167, 78, 158, 0.5);
        }

        .wizard-heater-row select {
            padding: 8px 10px;
            font-size: var(--small-font-size);
            background: rgba(0, 0, 0, 0.3);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 6px;
            color: rgba(255, 255, 255, 0.7);
        }

        /* Summary Card - Clean Design */
        .wizard-summary-card {
            background: linear-gradient(135deg, rgba(167, 78, 158, 0.08) 0%, rgba(167, 78, 158, 0.02) 100%);
            border: 1px solid rgba(167, 78, 158, 0.2);
            margin-top: 20px;
        }

        .wizard-summary-card .settings-card-title {
            color: rgba(167, 78, 158, 0.9);
            font-size: var(--small-font-size);
            letter-spacing: 0.5px;
            text-transform: uppercase;
        }

        .wizard-summary-content {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 12px;
        }

        .wizard-summary-section {
            background: rgba(0, 0, 0, 0.25);
            border-radius: 8px;
            padding: 12px 14px;
        }

        .wizard-summary-section-title {
            font-size: var(--small-font-size);
            font-weight: 600;
            letter-spacing: 0.5px;
            text-transform: uppercase;
            color: rgba(255, 255, 255, 0.35);
            margin-bottom: 8px;
        }

        .wizard-summary-row {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 12px;
            padding: 4px 0;
        }

        .wizard-summary-row span:first-child {
            color: rgba(255, 255, 255, 0.5);
            font-size: var(--small-font-size);
            flex-shrink: 0;
        }

        .wizard-summary-row span:last-child {
            color: #fff;
            font-weight: 500;
            font-size: var(--small-font-size);
            text-align: right;
        }

        /* Legacy summary items */
        .wizard-summary-item {
            display: flex;
            justify-content: space-between;
            padding: 10px 14px;
            background: rgba(0, 0, 0, 0.2);
            border-radius: 6px;
        }

        .wizard-summary-label {
            color: rgba(255, 255, 255, 0.6);
            font-size: var(--small-font-size);
        }

        .wizard-summary-value {
            color: #fff;
            font-weight: 500;
            font-size: var(--small-font-size);
        }

        .wizard-nav {
            display: flex;
            justify-content: flex-end;
            gap: 10px;
            margin-top: 28px;
            padding-top: 24px;
            border-top: 1px solid rgba(255, 255, 255, 0.06);
        }

        .wizard-nav .settings-action-btn {
            padding: 12px 24px;
            font-size: var(--small-font-size);
            font-weight: 500;
            border-radius: 8px;
        }

        .wizard-nav .settings-action-btn.primary {
            background: linear-gradient(135deg, #a74e9e 0%, #8b3d85 100%);
        }

        .wizard-nav .settings-action-btn.success {
            background: linear-gradient(135deg, #10b981 0%, #059669 100%);
        }

        /* Responsive wizard - enhanced for all devices */
        @media (max-width: 767px) {
            .wizard-progress {
                flex-wrap: nowrap;
                gap: 6px;
                overflow-x: auto;
                padding-bottom: 8px;
                -webkit-overflow-scrolling: touch;
            }

            .wizard-progress::-webkit-scrollbar {
                display: none;
            }

            .wizard-step {
                padding: 10px 14px;
                flex-shrink: 0;
            }

            .wizard-step-number {
                width: 24px;
                height: 24px;
                font-size: 11px;
            }

            .wizard-step span {
                font-size: 12px;
            }

            .wizard-card {
                padding: 16px;
            }

            .wizard-description {
                font-size: 13px;
            }

            .wizard-model-btn {
                padding: 16px;
            }

            .wizard-model-btn-name {
                font-size: 16px;
            }

            .wizard-nav {
                flex-direction: column;
                gap: 10px;
            }

            .wizard-nav .settings-action-btn {
                width: 100%;
            }
        }

        @media (max-width: 479px) {
            .wizard-step {
                padding: 8px 10px;
            }

            .wizard-step-number {
                width: 20px;
                height: 20px;
                font-size: 10px;
            }

            .wizard-step span {
                font-size: 10px;
            }

            .wizard-io-row {
                grid-template-columns: 1fr;
            }

            .wizard-quick-buttons {
                flex-direction: column;
            }

            .wizard-model-btn {
                width: 100%;
            }
        }
        .settings-status.error { display: block; background: rgba(239, 68, 68, 0.2); color: #ef4444; border: 1px solid rgba(239, 68, 68, 0.3); }

        /* Heater Auto-Tune Styles */
        #startTuneBtn.tuning {
            background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
            animation: tune-pulse 1.5s ease-in-out infinite;
        }

        @keyframes tune-pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.7; }
        }

        .tune-status {
            font-size: var(--small-font-size);
            padding: var(--small-spacing);
            border-radius: var(--small-spacing);
            margin-top: var(--small-spacing);
            display: none;
        }

        .tune-status.show {
            display: block;
        }

        .tune-status.tuning {
            background: rgba(245, 158, 11, 0.2);
            color: #fbbf24;
            border: 1px solid rgba(245, 158, 11, 0.3);
        }

        .tune-status.success {
            background: rgba(34, 197, 94, 0.2);
            color: #22c55e;
            border: 1px solid rgba(34, 197, 94, 0.3);
        }

        .tune-status.error {
            background: rgba(239, 68, 68, 0.2);
            color: #ef4444;
            border: 1px solid rgba(239, 68, 68, 0.3);
        }

        /* Barrel Tune Styles */
        .barrel-tune-progress {
            display: flex;
            gap: 8px;
            margin: 16px 0;
        }
        .barrel-tune-step {
            flex: 1;
            padding: 12px;
            background: rgba(0, 0, 0, 0.3);
            border-radius: 8px;
            border: 1px solid var(--border-color);
            text-align: center;
        }
        .barrel-tune-step.active {
            border-color: #fbbf24;
            background: rgba(245, 158, 11, 0.15);
        }
        .barrel-tune-step.complete {
            border-color: #22c55e;
            background: rgba(34, 197, 94, 0.15);
        }
        .barrel-tune-step.waiting {
            border-color: #3b82f6;
            background: rgba(59, 130, 246, 0.15);
        }
        .barrel-tune-step-label {
            font-size: var(--small-font-size);
            color: rgba(255,255,255,0.5);
            margin-bottom: 4px;
        }
        .barrel-tune-step-name {
            font-weight: 600;
            font-size: var(--base-font-size);
        }
        .barrel-tune-step-temp {
            font-size: var(--small-font-size);
            color: rgba(255,255,255,0.6);
            margin-top: 4px;
        }
        .barrel-tune-temps {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 12px;
            margin-bottom: 16px;
        }
        .barrel-tune-temp-field label {
            display: block;
            font-size: var(--small-font-size);
            color: rgba(255,255,255,0.6);
            margin-bottom: 4px;
        }
        .barrel-tune-temp-field input {
            width: 100%;
            padding: 8px 12px;
            background: rgba(0, 0, 0, 0.3);
            border: 1px solid var(--border-color);
            border-radius: 6px;
            color: #fff;
            font-size: var(--base-font-size);
        }
        #barrelTuneBtn.tuning {
            background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
            animation: tune-pulse 1.5s ease-in-out infinite;
        }

        /* Heater Management UI Styles */
        .heater-management {
            background: var(--panel-bg);
            border-radius: var(--medium-spacing);
            padding: var(--medium-spacing);
            margin-bottom: var(--large-spacing);
            border: 1px solid var(--border-color);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
            display: none;
        }

        .heater-management.show {
            display: block;
        }

        .heater-management-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: var(--medium-spacing);
        }

        .heater-management-header h2 {
            font-size: var(--large-font-size);
            color: #fff;
            margin: 0;
            display: flex;
            align-items: center;
            gap: var(--small-spacing);
        }

        .heater-management-content {
            display: block;
        }

        .heater-edit-header {
            margin-bottom: var(--medium-spacing);
            padding-bottom: var(--small-spacing);
            border-bottom: 1px solid var(--border-color);
        }

        .heater-edit-header h3 {
            font-size: var(--large-font-size);
            color: #fff;
            margin: 0;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .close-edit-btn {
            background: rgba(108, 117, 125, 0.3);
            border: 1px solid var(--border-color);
            border-radius: var(--small-spacing);
            color: #fff;
            padding: var(--small-spacing);
            cursor: pointer;
            font-size: var(--base-font-size);
            min-height: 32px;
            min-width: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .close-edit-btn:hover {
            background: rgba(108, 117, 125, 0.5);
        }

        .heater-management-grid {
            display: block;
        }

        .heater-control-card {
            background: var(--tile-bg);
            border-radius: var(--medium-spacing);
            padding: var(--medium-spacing);
            border: 1px solid var(--border-color);
            transition: all 0.3s ease;
        }

        .heater-control-card:hover {
            border-color: var(--primary-color);
            background: rgba(167, 78, 158, 0.15);
        }

        .heater-control-header {
            display: flex;
            align-items: center;
            gap: var(--small-spacing);
            margin-bottom: var(--medium-spacing);
            padding-bottom: var(--small-spacing);
            border-bottom: 1px solid rgba(167, 78, 158, 0.2);
        }

        .heater-control-name {
            font-weight: 600;
            font-size: var(--base-font-size);
            color: #fff;
            flex: 1;
        }

        .heater-type-badge {
            font-size: var(--small-font-size);
            padding: 2px 8px;
            border-radius: 12px;
            background: rgba(167, 78, 158, 0.3);
            color: #fff;
        }

        .temp-input-group {
            display: flex;
            flex-direction: column;
            gap: var(--small-spacing);
            margin-bottom: var(--medium-spacing);
        }

        .temp-input-label {
            font-size: var(--small-font-size);
            color: rgba(255, 255, 255, 0.7);
            font-weight: 500;
        }

        .temp-input {
            width: 100%;
            padding: var(--small-spacing);
            background: rgba(0, 0, 0, 0.3);
            border: 1px solid var(--border-color);
            border-radius: var(--small-spacing);
            color: #fff;
            font-size: var(--base-font-size);
            font-family: monospace;
            min-height: 44px;
        }

        .temp-input:focus {
            outline: none;
            border-color: var(--primary-color);
            background: rgba(167, 78, 158, 0.1);
        }

        .temp-slider-container {
            display: flex;
            align-items: center;
            gap: var(--small-spacing);
            margin-top: var(--small-spacing);
        }

        .temp-slider {
            flex: 1;
            -webkit-appearance: none;
            appearance: none;
            height: 8px;
            border-radius: 4px;
            background: linear-gradient(to right, #3b82f6 0%, #f59e0b 50%, #ef4444 100%);
            outline: none;
            opacity: 0.9;
            transition: opacity 0.2s;
        }

        .temp-slider:hover {
            opacity: 1;
        }

        .temp-slider::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 24px;
            height: 24px;
            border-radius: 50%;
            background: #fff;
            cursor: pointer;
            border: 3px solid var(--primary-color);
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
            transition: transform 0.2s, box-shadow 0.2s;
        }

        .temp-slider::-webkit-slider-thumb:hover {
            transform: scale(1.1);
            box-shadow: 0 3px 10px rgba(167, 78, 158, 0.4);
        }

        .temp-slider::-moz-range-thumb {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            background: #fff;
            cursor: pointer;
            border: 3px solid var(--primary-color);
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
        }

        .temp-slider-value {
            min-width: 60px;
            text-align: center;
            font-family: monospace;
            font-size: var(--large-font-size);
            font-weight: bold;
            color: #fff;
        }

        .heater-state-buttons {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: var(--small-spacing);
            margin-bottom: var(--small-spacing);
        }

        .state-button {
            padding: var(--small-spacing);
            border: 1px solid var(--border-color);
            border-radius: var(--small-spacing);
            font-size: var(--small-font-size);
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s ease;
            min-height: 44px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .state-button:hover:not(:disabled) {
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        }

        .state-button:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        .btn-active {
            background: linear-gradient(135deg, #10b981 0%, #059669 100%);
            border-color: #10b981;
            color: white;
        }

        .btn-active:hover:not(:disabled) {
            background: linear-gradient(135deg, #34d399 0%, #10b981 100%);
        }

        .btn-standby {
            background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
            border-color: #f59e0b;
            color: white;
        }

        .btn-standby:hover:not(:disabled) {
            background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
        }

        .btn-off {
            background: linear-gradient(135deg, #6c757d 0%, #5a6268 100%);
            border-color: #6c757d;
            color: white;
        }

        .btn-off:hover:not(:disabled) {
            background: linear-gradient(135deg, #868e96 0%, #6c757d 100%);
        }

        .btn-clear-fault {
            background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
            border-color: #ef4444;
            color: white;
            width: 100%;
            margin-top: var(--small-spacing);
            font-weight: 600;
        }

        .btn-clear-fault:hover:not(:disabled) {
            background: linear-gradient(135deg, #f87171 0%, #ef4444 100%);
        }

        .state-button.active {
            box-shadow: 0 0 0 2px var(--primary-color);
        }

        .bulk-actions {
            display: flex;
            flex-wrap: wrap;
            gap: var(--small-spacing);
            margin-top: var(--medium-spacing);
            padding-top: var(--medium-spacing);
            border-top: 1px solid var(--border-color);
        }

        .bulk-action-button {
            flex: 1;
            min-width: 120px;
        }

        /* ============================================
           UNIFIED PANEL HEADERS - Clean, Minimal
           ============================================ */
        .material-library-header,
        .heater-panel-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 40px;
            padding-bottom: 16px;
            margin-bottom: 16px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
            box-sizing: content-box;
        }

        .material-library-header h2,
        .heater-panel-header h2 {
            font-size: var(--base-font-size);
            font-weight: 600;
            color: rgba(255, 255, 255, 0.9);
            margin: 0;
            letter-spacing: 0.5px;
        }

        /* Toggle button groups - refined pill design */
        .panel-view-toggle {
            display: flex;
            gap: 2px;
            height: 34px;
            align-items: center;
            background: rgba(0, 0, 0, 0.25);
            padding: 3px;
            border-radius: 10px;
        }

        .panel-header-actions {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .panel-view-toggle .view-toggle-btn {
            background: transparent;
            border: none;
            border-radius: 8px;
            color: rgba(255, 255, 255, 0.55);
            padding: 6px 14px;
            font-size: var(--small-font-size);
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
            min-width: 50px;
            height: 28px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .panel-view-toggle .view-toggle-btn:hover {
            color: rgba(255, 255, 255, 0.85);
            background: rgba(255, 255, 255, 0.08);
        }

        .panel-view-toggle .view-toggle-btn.active {
            background: var(--primary-color);
            color: #fff;
            box-shadow: 0 2px 8px rgba(167, 78, 158, 0.4);
        }

        /* Heater Toggle Switch Component */
        .heater-toggle-switch {
            display: flex;
            align-items: center;
            gap: clamp(6px, 0.8vw, 10px);
            cursor: pointer;
            user-select: none;
            outline: none;
        }

        .heater-toggle-switch:focus-visible {
            outline: 2px solid var(--primary-color);
            outline-offset: 2px;
            border-radius: 4px;
        }

        .toggle-label {
            font-size: var(--small-font-size);
            font-weight: 500;
            color: rgba(255, 255, 255, 0.6);
            transition: color 0.2s ease;
            white-space: nowrap;
        }

        .heater-toggle-switch.active-pe320 .toggle-label-left,
        .heater-toggle-switch.active-bed .toggle-label-right {
            color: rgba(255, 255, 255, 0.9);
        }

        .toggle-track {
            position: relative;
            width: clamp(44px, 5.5vw, 56px);
            height: clamp(20px, 2.5vw, 26px);
            background: rgba(100, 100, 110, 0.3);
            border-radius: clamp(10px, 1.25vw, 13px);
            transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            overflow: hidden;
        }

        .heater-toggle-switch.active-pe320 .toggle-track {
            background: rgba(167, 78, 158, 0.4);
        }

        .heater-toggle-switch.active-bed .toggle-track {
            background: rgba(167, 78, 158, 0.4);
        }

        .toggle-thumb {
            position: absolute;
            top: 50%;
            left: clamp(2px, 0.25vw, 3px);
            transform: translateY(-50%);
            width: clamp(16px, 2vw, 20px);
            height: clamp(16px, 2vw, 20px);
            background: rgba(255, 255, 255, 0.9);
            border-radius: 50%;
            transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        }

        .heater-toggle-switch.active-bed .toggle-thumb {
            transform: translate(calc(clamp(44px, 5.5vw, 56px) - clamp(16px, 2vw, 20px) - clamp(4px, 0.5vw, 6px)), -50%);
        }

        .material-card:active {
            transform: scale(0.99);
        }

        /* Material card header with name and badge - compact */
        .material-name {
            display: flex;
            align-items: center;
            gap: clamp(3px, 0.5em, 8px);
            margin-bottom: clamp(3px, 0.5em, 8px);
            flex-shrink: 0;
            min-height: 0;
        }

        .material-name > span:first-child,
        .material-name-text {
            font-weight: 600;
            font-size: clamp(9px, 1.2vw, 13px);
            color: #fff;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            flex: 1;
            line-height: 1.2;
        }

        /* Material type badge */
        .material-type-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: clamp(7px, 0.9vw, 11px);
            padding: clamp(2px, 0.3em, 4px) clamp(4px, 0.6em, 8px);
            border-radius: clamp(6px, 0.8vw, 10px);
            background: rgba(167, 78, 158, 0.25);
            color: #c77dbe;
            text-transform: uppercase;
            font-weight: 600;
            letter-spacing: 0.3px;
            white-space: nowrap;
            flex-shrink: 0;
        }

        .material-type-badge.composite {
            background: rgba(139, 92, 246, 0.25);
            color: #a78bfa;
        }

        .material-type-badge.custom {
            background: rgba(59, 130, 246, 0.25);
            color: #93c5fd;
        }

        /* Temperature grid - 5 columns - REDESIGNED TO PRIORITIZE NUMBERS */
        .material-temps {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: clamp(3px, 0.5em, 8px);
            margin: clamp(4px, 0.6em, 10px) 0;
            flex: 1;
            min-height: 0;
        }

        .material-temp-item {
            text-align: center;
            padding: clamp(4px, 0.6em, 10px) clamp(2px, 0.3em, 6px);
            background: rgba(0, 0, 0, 0.4);
            border-radius: clamp(4px, 0.6vw, 10px);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: clamp(2px, 0.3em, 4px);
            min-height: 0;
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        .material-temp-label {
            font-size: clamp(6px, 0.8vw, 10px);
            color: rgba(255, 255, 255, 0.4);
            text-transform: uppercase;
            letter-spacing: 0.3px;
            font-weight: 500;
            line-height: 1;
        }

        .material-temp-value {
            font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
            font-size: clamp(12px, 2.5vw, 32px);
            color: #fff;
            font-weight: 300;
            overflow: visible;
            text-overflow: clip;
            white-space: nowrap;
            line-height: 1.1;
            letter-spacing: -1px;
        }

        /* Apply button - primary action */
        .apply-material-btn {
            width: 100%;
            height: clamp(20px, 2.8vw, 36px);
            font-size: clamp(8px, 1vw, 13px);
            font-weight: 600;
            border-radius: clamp(3px, 0.5vw, 8px);
            margin-top: auto;
            background: linear-gradient(135deg, var(--primary-color) 0%, #8B3A84 100%);
            border: none;
            color: white;
            cursor: pointer;
            transition: all 0.2s ease;
            box-shadow: 0 2px 8px rgba(167, 78, 158, 0.25);
            flex-shrink: 0;
            padding: 0 clamp(4px, 0.6vw, 8px);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            min-height: 0;
        }

        .apply-material-btn:hover {
            background: linear-gradient(135deg, #b85fae 0%, #9B4A94 100%);
            box-shadow: 0 4px 16px rgba(167, 78, 158, 0.4);
        }

        .apply-material-btn:active {
            transform: scale(0.98);
        }

        /* Material card action buttons */
        .material-card-actions {
            display: flex;
            gap: clamp(2px, 0.4em, 8px);
            margin-top: clamp(2px, 0.4em, 8px);
            flex-shrink: 0;
        }

        .material-action-btn {
            flex: 1;
            padding: clamp(2px, 0.4em, 8px);
            border: none;
            border-radius: clamp(3px, 0.4vw, 7px);
            font-size: clamp(8px, 1vw, 13px);
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s ease;
            min-height: clamp(18px, 2.5vw, 28px);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            min-width: 0;
        }

        .edit-material-btn {
            background: rgba(59, 130, 246, 0.3);
            color: #60a5fa;
        }

        .edit-material-btn:hover {
            background: rgba(59, 130, 246, 0.5);
        }

        .delete-material-btn {
            background: rgba(239, 68, 68, 0.3);
            color: #f87171;
        }

        .delete-material-btn:hover {
            background: rgba(239, 68, 68, 0.5);
        }

        /* Add Material Card - ghost style */
        .add-material-btn {
            width: 100%;
            height: 100%;
            min-height: 0;
            background: transparent;
            border: 2px dashed rgba(167, 78, 158, 0.35);
            border-radius: clamp(8px, 1vw, 14px);
            padding: clamp(8px, 1.5vw, 16px);
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: clamp(6px, 0.8em, 12px);
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .add-material-btn:hover {
            background: rgba(167, 78, 158, 0.1);
            border-color: var(--primary-color);
        }

        .add-material-btn .add-icon {
            font-size: clamp(20px, 3vw, 36px);
            color: var(--primary-color);
            font-weight: 300;
            line-height: 1;
        }

        .add-material-btn .add-text {
            font-size: clamp(9px, 1.2vw, 13px);
            color: rgba(255, 255, 255, 0.5);
            font-weight: 500;
        }

        /* View toggle buttons */
        .view-toggle-btn {
            width: 34px;
            height: 28px;
            border: none;
            border-radius: 6px;
            background: transparent;
            color: rgba(255, 255, 255, 0.5);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s ease;
        }

        .view-toggle-btn:hover {
            color: rgba(255, 255, 255, 0.8);
            background: rgba(255, 255, 255, 0.08);
        }

        .view-toggle-btn.active {
            background: var(--primary-color);
            color: #fff;
            box-shadow: 0 2px 8px rgba(167, 78, 158, 0.4);
        }

        .view-toggle-btn svg {
            width: 14px;
            height: 14px;
        }

        .material-library-collapsed .material-list,
        .material-library-collapsed .add-material-btn {
            display: none;
        }

        /* Temperature Graph View */
        .graph-view {
            display: flex;
            flex-direction: column;
            flex: 1;
            min-height: 0;
            gap: 12px;
        }

        .graph-container {
            position: relative;
            flex: 1;
            min-height: 200px;
            background: linear-gradient(180deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.2) 100%);
            border-radius: 12px;
            overflow: hidden;
            border: 1px solid rgba(255,255,255,0.1);
        }

        #tempGraphCanvas {
            width: 100%;
            height: 100%;
            display: block;
        }

        .graph-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            pointer-events: none;
        }

        /* Liquid Glass - see-through with light blur */
        .graph-live-readout {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            display: none;
            background: rgba(255, 255, 255, 0.015);
            border: 0.5px solid rgba(255, 255, 255, 0.08);
            border-radius: 32px;
            padding: 32px 44px;
            color: rgba(255, 255, 255, 0.95);
            font-size: 17px;
            backdrop-filter: blur(6px);
            -webkit-backdrop-filter: blur(6px);
            box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.1);
            z-index: 60;
            pointer-events: none;
            min-width: 380px;
        }

        .graph-live-readout.hidden {
            display: none;
        }

        .graph-live-title {
            font-size: 13px;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            font-weight: 500;
            color: rgba(255, 255, 255, 0.6);
            margin-bottom: 20px;
            display: flex;
            justify-content: space-between;
            gap: 30px;
        }

        .graph-live-rows {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 14px 28px;
        }

        .graph-live-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 20px;
            white-space: nowrap;
            padding: 12px 18px;
            background: transparent;
            border-radius: 16px;
        }

        .graph-live-name {
            display: flex;
            align-items: center;
            gap: 12px;
            color: rgba(255, 255, 255, 0.9);
            font-weight: 500;
            font-size: 18px;
        }

        .graph-live-dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            flex-shrink: 0;
            box-shadow: 0 0 8px currentColor;
        }

        .graph-live-temp {
            font-weight: 600;
            font-size: 22px;
            font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif;
            font-variant-numeric: tabular-nums;
            color: rgba(255, 255, 255, 0.95);
        }

        .graph-live-value {
            font-family: 'SF Mono', 'Monaco', monospace;
            font-weight: 600;
        }

        .graph-tooltip {
            position: absolute;
            background: rgba(0, 0, 0, 0.9);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255,255,255,0.2);
            border-radius: 8px;
            padding: 10px 14px;
            font-size: var(--small-font-size);
            color: #fff;
            pointer-events: none;
            opacity: 0;
            transition: opacity 0.15s ease;
            z-index: 100;
            min-width: 150px;
            box-shadow: 0 8px 32px rgba(0,0,0,0.5);
        }

        .graph-tooltip.visible {
            opacity: 1;
        }

        .graph-tooltip-time {
            font-size: var(--small-font-size);
            color: rgba(255,255,255,0.6);
            margin-bottom: 6px;
            font-family: 'SF Mono', 'Monaco', monospace;
        }

        .graph-tooltip-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 16px;
            padding: 3px 0;
        }

        .graph-tooltip-label {
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .graph-tooltip-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
        }

        .graph-tooltip-value {
            font-weight: 600;
            font-family: 'SF Mono', 'Monaco', monospace;
        }

        /* Graph Controls */
        .graph-controls {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 12px;
            flex-wrap: wrap;
        }

        .graph-ctrl-btn {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 10px 14px;
            border: none;
            border-radius: 8px;
            background: rgba(0, 0, 0, 0.3);
            color: rgba(255, 255, 255, 0.7);
            font-size: var(--small-font-size);
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s ease;
            min-height: 40px;
        }

        .graph-ctrl-btn:hover {
            background: rgba(255, 255, 255, 0.15);
            color: #fff;
        }

        .graph-ctrl-btn.live-btn.active {
            background: linear-gradient(135deg, #10b981 0%, #059669 100%);
            color: #fff;
        }

        .graph-ctrl-btn.live-btn:not(.active) {
            background: rgba(255, 255, 255, 0.1);
        }

        /* Time Range Popup */
        .time-range-popup {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.8);
            backdrop-filter: blur(8px);
            z-index: 1000;
            justify-content: center;
            align-items: center;
        }

        .time-range-popup.show {
            display: flex;
        }

        .time-range-content {
            background: var(--panel-bg);
            border-radius: 16px;
            padding: 24px;
            width: 90%;
            max-width: 400px;
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

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

        .time-range-header h3 {
            margin: 0;
            font-size: clamp(18px, 2.2vw, 24px);
            color: #fff;
        }

        .time-range-close {
            width: 36px;
            height: 36px;
            border: none;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.1);
            color: rgba(255, 255, 255, 0.7);
            font-size: clamp(18px, 2.2vw, 24px);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .time-range-slider-container {
            margin-bottom: 24px;
        }

        .time-range-value {
            text-align: center;
            font-size: clamp(24px, 3vw, 36px);
            font-weight: 700;
            color: #10b981;
            margin-bottom: 16px;
        }

        .time-range-slider {
            width: 100%;
            height: 8px;
            -webkit-appearance: none;
            appearance: none;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 4px;
            outline: none;
        }

        .time-range-slider::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: 28px;
            height: 28px;
            border-radius: 50%;
            background: linear-gradient(135deg, #10b981 0%, #059669 100%);
            cursor: pointer;
            border: 3px solid #fff;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
        }

        .time-range-labels {
            display: flex;
            justify-content: space-between;
            margin-top: 8px;
            font-size: var(--small-font-size);
            color: rgba(255, 255, 255, 0.5);
        }

        .time-nav-buttons {
            display: flex;
            gap: 8px;
            margin-bottom: 16px;
        }

        .time-nav-btn {
            flex: 1;
            padding: 14px;
            border: none;
            border-radius: 10px;
            background: rgba(255, 255, 255, 0.1);
            color: rgba(255, 255, 255, 0.7);
            font-size: var(--base-font-size);
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .time-nav-btn:hover {
            background: rgba(255, 255, 255, 0.2);
            color: #fff;
        }

        .time-range-done {
            width: 100%;
            padding: 16px;
            border: none;
            border-radius: 10px;
            background: linear-gradient(135deg, #10b981 0%, #059669 100%);
            color: #fff;
            font-size: var(--base-font-size);
            font-weight: 600;
            cursor: pointer;
        }

        .graph-time-nav {
            display: flex;
            gap: 4px;
            background: rgba(0, 0, 0, 0.3);
            padding: 4px;
            border-radius: 10px;
        }

        .graph-nav-btn {
            padding: 12px 16px;
            border: none;
            border-radius: 8px;
            background: transparent;
            color: rgba(255, 255, 255, 0.6);
            font-size: var(--small-font-size);
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s ease;
            font-family: 'SF Mono', 'Monaco', monospace;
            min-width: 44px;
            min-height: 44px;
        }

        .graph-nav-btn:hover {
            background: rgba(255, 255, 255, 0.1);
            color: #fff;
        }

        .graph-nav-btn.live-btn {
            color: #10b981;
        }

        .graph-nav-btn.live-btn.active {
            background: #10b981;
            color: #fff;
            box-shadow: 0 0 12px rgba(16, 185, 129, 0.5);
            animation: pulse-live 2s ease-in-out infinite;
        }

        @keyframes pulse-live {
            0%, 100% { box-shadow: 0 0 12px rgba(16, 185, 129, 0.5); }
            50% { box-shadow: 0 0 20px rgba(16, 185, 129, 0.8); }
        }

        .graph-zoom-controls {
            display: flex;
            align-items: center;
            gap: 6px;
        }

        /* Graph Heater Toggle */
        .graph-heater-toggle {
            display: flex;
            gap: 4px;
            background: rgba(0, 0, 0, 0.3);
            padding: 4px;
            border-radius: 10px;
        }

        .graph-toggle-btn {
            padding: 10px 20px;
            border: none;
            border-radius: 8px;
            background: transparent;
            color: rgba(255, 255, 255, 0.6);
            font-size: var(--small-font-size);
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s ease;
            min-width: 70px;
            min-height: 44px;
        }

        .graph-toggle-btn:hover {
            background: rgba(255, 255, 255, 0.1);
            color: #fff;
        }

        .graph-toggle-btn.active {
            background: var(--primary-color);
            color: #fff;
            box-shadow: 0 2px 8px rgba(167, 78, 158, 0.4);
        }

        .graph-zoom-btn {
            padding: 10px 14px;
            border: none;
            border-radius: 8px;
            background: rgba(255, 255, 255, 0.1);
            color: rgba(255, 255, 255, 0.6);
            font-size: var(--small-font-size);
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s ease;
            min-width: 40px;
            min-height: 40px;
        }

        .graph-zoom-btn:hover {
            background: rgba(255, 255, 255, 0.15);
            color: #fff;
        }

        .graph-zoom-btn.active {
            background: var(--primary-color);
            color: #fff;
        }

        .graph-download-btn {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 10px 14px;
            border: none;
            border-radius: 8px;
            background: linear-gradient(135deg, #10b981 0%, #059669 100%);
            color: #fff;
            font-size: 12px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s ease;
            min-height: 40px;
        }

        .graph-download-btn:hover {
            background: linear-gradient(135deg, #34d399 0%, #10b981 100%);
            transform: translateY(-1px);
        }

        .graph-download-btn svg {
            flex-shrink: 0;
        }

        .graph-expand-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            padding: 10px 14px;
            border: none;
            border-radius: 8px;
            background: rgba(255,255,255,0.1);
            color: rgba(255,255,255,0.7);
            cursor: pointer;
            transition: all 0.2s ease;
            min-height: 40px;
            font-size: 12px;
            font-weight: 600;
        }

        .graph-expand-btn:hover {
            background: rgba(255,255,255,0.2);
            color: #fff;
        }

        .graph-expand-btn.active {
            background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
            color: #fff;
        }

        .graph-expand-btn .collapse-icon,
        .graph-expand-btn .collapse-text { display: none; }
        .graph-expand-btn.active .expand-icon,
        .graph-expand-btn.active .expand-text { display: none; }
        .graph-expand-btn.active .collapse-icon,
        .graph-expand-btn.active .collapse-text { display: inline; }

        /* Fullscreen Graph Mode (non-kiosk) */
        .graph-fullscreen .heater-tabs-container {
            display: none !important;
        }

        .graph-fullscreen .material-library {
            flex: 1;
        }

        .graph-fullscreen .graph-container {
            flex: 1;
        }

        .download-range-btn {
            padding: 10px 16px;
            border: 1px solid rgba(255,255,255,0.2);
            border-radius: 8px;
            background: rgba(255,255,255,0.1);
            color: rgba(255,255,255,0.7);
            font-size: var(--base-font-size);
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .download-range-btn:hover {
            background: rgba(255,255,255,0.15);
            color: #fff;
        }

        .download-range-btn.active {
            background: #10b981;
            border-color: #10b981;
            color: #fff;
        }

        /* Graph Legend */
        .graph-legend {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            justify-content: center;
        }

        .legend-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 12px 16px;
            background: rgba(0, 0, 0, 0.2);
            border-radius: 10px;
            cursor: pointer;
            transition: all 0.2s ease;
            min-height: 44px;
            min-width: 100px;
        }

        .legend-item:hover {
            background: rgba(0, 0, 0, 0.3);
        }

        .legend-item:active {
            transform: scale(0.97);
            background: rgba(0, 0, 0, 0.4);
        }

        .legend-item.hidden {
            opacity: 0.4;
        }

        .legend-color {
            width: 16px;
            height: 4px;
            border-radius: 2px;
            flex-shrink: 0;
        }

        .legend-label {
            font-size: var(--small-font-size);
            color: rgba(255, 255, 255, 0.8);
            font-weight: 500;
        }

        .legend-value {
            font-size: var(--base-font-size);
            font-weight: 600;
            color: #fff;
            font-family: 'SF Mono', 'Monaco', monospace;
            margin-left: auto;
        }


        .material-card {
            position: relative;
        }

        .material-card-actions {
            display: flex;
            gap: var(--small-spacing);
            margin-top: var(--small-spacing);
        }

        .material-action-btn {
            flex: 1;
            padding: 6px;
            border: none;
            border-radius: var(--small-spacing);
            font-size: var(--small-font-size);
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .edit-material-btn {
            background: rgba(59, 130, 246, 0.8);
            color: #fff;
        }

        .edit-material-btn:hover {
            background: #3b82f6;
        }

        .delete-material-btn {
            background: rgba(239, 68, 68, 0.8);
            color: #fff;
        }

        .delete-material-btn:hover {
            background: #ef4444;
        }

        /* Material Editor Modal */
        .material-editor-modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.7);
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 10000;
            -webkit-backdrop-filter: blur(5px);
            backdrop-filter: blur(5px);
        }

        .material-editor-modal.show {
            display: flex;
        }

        .material-editor-dialog {
            background: linear-gradient(145deg, rgba(40, 40, 50, 0.98), rgba(25, 25, 35, 0.98));
            border-radius: 16px;
            padding: 28px;
            max-width: 420px;
            width: 90%;
            max-height: 90vh;
            overflow-y: auto;
            border: 1px solid rgba(255, 255, 255, 0.08);
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 1px rgba(255, 255, 255, 0.1) inset;
        }

        .material-editor-dialog h3 {
            color: var(--primary-color);
            margin: 0 0 24px 0;
            font-size: 1.3rem;
            font-weight: 600;
            letter-spacing: 0.5px;
        }

        .material-form-name {
            margin-bottom: 24px;
        }

        .material-form-label {
            display: block;
            color: rgba(255, 255, 255, 0.6);
            font-size: 0.75rem;
            margin-bottom: 8px;
            font-weight: 500;
            text-transform: uppercase;
            letter-spacing: 0.8px;
        }

        .material-form-input {
            width: 100%;
            padding: 12px 14px;
            background: rgba(0, 0, 0, 0.35);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 8px;
            color: #fff;
            font-size: 1rem;
            transition: border-color 0.2s, box-shadow 0.2s;
            box-sizing: border-box;
        }

        .material-form-input::placeholder {
            color: rgba(255, 255, 255, 0.3);
        }

        .material-form-input:focus {
            outline: none;
            border-color: var(--primary-color);
            box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 200, 80, 180), 0.15);
        }

        .material-temps-section {
            margin-bottom: 28px;
        }

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

        .material-form-temps-single {
            grid-template-columns: 1fr;
            max-width: 140px;
        }

        .material-temp-field-wide {
            width: 100%;
        }

        .material-temp-field {
            display: flex;
            flex-direction: column;
            align-items: center;
            background: rgba(0, 0, 0, 0.25);
            border-radius: 10px;
            padding: 12px 8px;
            border: 1px solid rgba(255, 255, 255, 0.06);
        }

        .temp-field-label {
            font-size: 0.7rem;
            color: rgba(255, 255, 255, 0.5);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 8px;
            font-weight: 500;
        }

        .material-temp-field .material-form-input {
            width: 100%;
            text-align: center;
            padding: 10px 6px;
            font-size: 1.1rem;
            font-weight: 500;
            -moz-appearance: textfield;
        }

        .material-temp-field .material-form-input::-webkit-outer-spin-button,
        .material-temp-field .material-form-input::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }

        .temp-field-unit {
            font-size: 0.7rem;
            color: rgba(255, 255, 255, 0.4);
            margin-top: 6px;
        }

        .material-form-buttons {
            display: flex;
            gap: 10px;
            margin-top: 8px;
        }

        .material-btn {
            flex: 1;
            padding: 14px 20px;
            border: none;
            border-radius: 10px;
            font-size: 0.9rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s ease;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .material-btn-cancel {
            background: rgba(100, 100, 120, 0.4);
            color: rgba(255, 255, 255, 0.8);
        }

        .material-btn-cancel:hover {
            background: rgba(100, 100, 120, 0.6);
        }

        .material-btn-delete {
            background: rgba(220, 53, 69, 0.85);
            color: #fff;
        }

        .material-btn-delete:hover {
            background: rgba(220, 53, 69, 1);
        }

        .material-btn-save {
            background: linear-gradient(135deg, #10b981, #059669);
            color: #fff;
        }

        .material-btn-save:hover {
            background: linear-gradient(135deg, #34d399, #10b981);
            box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
        }

        /* Material Apply Modal */
        .material-apply-dialog {
            background: linear-gradient(145deg, rgba(40, 40, 50, 0.98), rgba(25, 25, 35, 0.98));
            border-radius: 16px;
            padding: 28px;
            max-width: 380px;
            width: 90%;
            text-align: center;
            border: 1px solid rgba(255, 255, 255, 0.08);
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 1px rgba(255, 255, 255, 0.1) inset;
        }

        .material-apply-dialog h3 {
            color: var(--primary-color);
            margin: 0 0 8px 0;
            font-size: 1.3rem;
            font-weight: 600;
        }

        .material-apply-subtitle {
            color: #fff;
            font-size: 1.1rem;
            font-weight: 500;
            margin: 0 0 16px 0;
        }

        .material-apply-desc {
            color: rgba(255, 255, 255, 0.6);
            font-size: 0.85rem;
            margin: 0 0 20px 0;
        }

        .material-apply-buttons {
            display: flex;
            flex-direction: column;
            gap: 10px;
            margin-bottom: 16px;
        }

        .material-apply-btn {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 14px 20px;
            border: none;
            border-radius: 10px;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .apply-btn-label {
            font-size: 1rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .apply-btn-desc {
            font-size: 0.75rem;
            opacity: 0.8;
            margin-top: 2px;
        }

        .material-apply-btn-active {
            background: linear-gradient(135deg, #f97316, #ea580c);
            color: #fff;
        }

        .material-apply-btn-active:hover {
            background: linear-gradient(135deg, #fb923c, #f97316);
            box-shadow: 0 4px 15px rgba(249, 115, 22, 0.4);
        }

        .material-apply-btn-standby {
            background: linear-gradient(135deg, #eab308, #ca8a04);
            color: #000;
        }

        .material-apply-btn-standby:hover {
            background: linear-gradient(135deg, #facc15, #eab308);
            box-shadow: 0 4px 15px rgba(234, 179, 8, 0.4);
        }

        .material-apply-btn-off {
            background: rgba(100, 100, 120, 0.5);
            color: #fff;
        }

        .material-apply-btn-off:hover {
            background: rgba(100, 100, 120, 0.7);
        }

        .material-apply-cancel {
            background: transparent;
            border: 1px solid rgba(255, 255, 255, 0.2);
            color: rgba(255, 255, 255, 0.7);
            padding: 10px 24px;
            border-radius: 8px;
            cursor: pointer;
            font-size: 0.9rem;
            transition: all 0.2s;
        }

        .material-apply-cancel:hover {
            background: rgba(255, 255, 255, 0.1);
            color: #fff;
        }

        /* Heater Editor Modal */
        .heater-editor-modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.7);
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 10000;
            -webkit-backdrop-filter: blur(5px);
            backdrop-filter: blur(5px);
        }

        .heater-editor-modal.show {
            display: flex;
        }

        .heater-editor-dialog {
            background: linear-gradient(145deg, rgba(40, 40, 50, 0.98), rgba(25, 25, 35, 0.98));
            border-radius: 16px;
            padding: 28px;
            width: 340px;
            max-width: 90%;
            border: 1px solid rgba(255, 255, 255, 0.08);
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 1px rgba(255, 255, 255, 0.1) inset;
        }

        .heater-editor-dialog h3 {
            color: var(--primary-color);
            margin: 0 0 8px 0;
            font-size: 1.2rem;
            font-weight: 600;
            text-align: center;
        }

        .heater-current-temp {
            font-size: 3.5rem;
            font-weight: 700;
            text-align: center;
            margin-bottom: 24px;
            letter-spacing: -1px;
        }

        .heater-temp-control {
            margin-bottom: 20px;
        }

        .heater-temp-control label {
            display: block;
            font-size: 0.75rem;
            color: rgba(255, 255, 255, 0.5);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 10px;
        }

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

        .heater-slider {
            flex: 1;
            height: 8px;
            -webkit-appearance: none;
            appearance: none;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 4px;
            outline: none;
        }

        .heater-slider::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: 20px;
            height: 20px;
            background: var(--primary-color);
            border-radius: 50%;
            cursor: pointer;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
        }

        .heater-slider::-moz-range-thumb {
            width: 20px;
            height: 20px;
            background: var(--primary-color);
            border-radius: 50%;
            cursor: pointer;
            border: none;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
        }

        .heater-temp-input {
            width: 75px;
            padding: 10px;
            background: rgba(0, 0, 0, 0.4);
            border: 1px solid rgba(255, 255, 255, 0.15);
            border-radius: 8px;
            color: #fff;
            font-size: 1.1rem;
            font-weight: 600;
            text-align: center;
            -moz-appearance: textfield;
        }

        .heater-temp-input::-webkit-outer-spin-button,
        .heater-temp-input::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }

        .heater-temp-input:focus {
            outline: none;
            border-color: var(--primary-color);
        }

        .heater-state-buttons {
            display: flex;
            gap: 10px;
            margin: 24px 0 20px;
        }

        .heater-state-btn {
            flex: 1;
            padding: 14px 8px;
            border: none;
            border-radius: 10px;
            font-size: 0.9rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s ease;
            opacity: 0.5;
        }

        .heater-state-btn.active {
            opacity: 1;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
            transform: translateY(-1px);
        }

        .heater-state-off {
            background: rgba(100, 100, 120, 0.6);
            color: #fff;
        }

        .heater-state-off:hover, .heater-state-off.active {
            background: rgba(100, 100, 120, 0.9);
        }

        .heater-state-standby {
            background: linear-gradient(135deg, #eab308, #ca8a04);
            color: #000;
        }

        .heater-state-standby:hover, .heater-state-standby.active {
            background: linear-gradient(135deg, #facc15, #eab308);
        }

        .heater-state-active {
            background: linear-gradient(135deg, #f97316, #ea580c);
            color: #fff;
        }

        .heater-state-active:hover, .heater-state-active.active {
            background: linear-gradient(135deg, #fb923c, #f97316);
        }

        .heater-close-btn {
            width: 100%;
            padding: 12px;
            background: transparent;
            border: 1px solid rgba(255, 255, 255, 0.15);
            border-radius: 8px;
            color: rgba(255, 255, 255, 0.6);
            font-size: 0.9rem;
            cursor: pointer;
            transition: all 0.2s;
        }

        .heater-close-btn:hover {
            background: rgba(255, 255, 255, 0.05);
            color: #fff;
        }

        /* Confirmation Modal - Styled */
        .confirm-modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 10001;
        }

        .confirm-modal.show {
            display: flex;
        }

        .confirm-dialog {
            background: rgba(0, 0, 0, 0.9);
            -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
            border-radius: 8px;
            padding: 32px 44px;
            min-width: 420px;
            max-width: 500px;
            width: 90%;
            text-align: center;
            border: 1px solid rgba(255, 255, 255, 0.2);
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
        }

        .confirm-icon {
            width: 56px;
            height: 56px;
            background: rgba(245, 158, 11, 0.9);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 20px;
            font-size: 1.8rem;
            font-weight: 700;
            color: #000;
        }

        .confirm-dialog h3 {
            color: #fff;
            margin: 0 0 16px 0;
            font-size: 22px;
            font-weight: 600;
        }

        .confirm-dialog p {
            color: rgba(255, 255, 255, 0.7);
            font-size: 18px;
            margin: 0 0 32px 0;
            line-height: 1.6;
        }

        .confirm-buttons {
            display: flex;
            gap: 16px;
        }

        .confirm-btn-cancel {
            flex: 1;
            padding: 18px 24px;
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.15);
            border-radius: 10px;
            color: rgba(255, 255, 255, 0.8);
            font-size: 18px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .confirm-btn-cancel:hover {
            background: rgba(255, 255, 255, 0.15);
        }

        .confirm-btn-action {
            flex: 1;
            padding: 18px 24px;
            background: rgba(59, 130, 246, 0.8);
            border: 1px solid rgba(59, 130, 246, 0.3);
            border-radius: 10px;
            color: #fff;
            font-size: 18px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .confirm-btn-action:hover {
            background: rgba(59, 130, 246, 0.95);
        }

        .confirm-btn-action.danger {
            background: rgba(220, 38, 38, 0.8);
            border-color: rgba(220, 38, 38, 0.3);
        }

        .confirm-btn-action.danger:hover {
            background: rgba(239, 68, 68, 0.95);
        }

        /* Feed Hopper Modal */
        .feed-modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.7);
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 10000;
            -webkit-backdrop-filter: blur(5px);
            backdrop-filter: blur(5px);
        }

        .feed-modal.show {
            display: flex;
        }

        .feed-dialog {
            background: linear-gradient(145deg, rgba(40, 40, 50, 0.98), rgba(25, 25, 35, 0.98));
            border-radius: 16px;
            padding: 28px;
            max-width: 400px;
            width: 90%;
            text-align: center;
            border: 1px solid rgba(255, 255, 255, 0.08);
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 1px rgba(255, 255, 255, 0.1) inset;
        }

        .feed-icon {
            width: 50px;
            height: 50px;
            background: linear-gradient(135deg, #10b981, #059669);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 16px;
        }

        .feed-icon svg {
            width: 26px;
            height: 26px;
            color: #fff;
        }

        .feed-title {
            color: #fff;
            margin: 0 0 24px 0;
            font-size: 1.2rem;
            font-weight: 600;
        }

        .feed-section {
            margin-bottom: 24px;
            text-align: left;
        }

        .feed-label {
            color: rgba(255, 255, 255, 0.7);
            font-size: 0.85rem;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .feed-duration-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 12px;
        }

        .feed-duration-value {
            color: #10b981;
            font-weight: 600;
            font-size: 1rem;
        }

        .feed-slider {
            width: 100%;
            height: 8px;
            -webkit-appearance: none;
            appearance: none;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 4px;
            outline: none;
        }

        .feed-slider::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 20px;
            height: 20px;
            background: linear-gradient(135deg, #10b981, #059669);
            border-radius: 50%;
            cursor: pointer;
            box-shadow: 0 2px 8px rgba(16, 185, 129, 0.4);
        }

        .feed-slider::-moz-range-thumb {
            width: 20px;
            height: 20px;
            background: linear-gradient(135deg, #10b981, #059669);
            border-radius: 50%;
            cursor: pointer;
            border: none;
            box-shadow: 0 2px 8px rgba(16, 185, 129, 0.4);
        }

        .feed-slider-labels {
            display: flex;
            justify-content: space-between;
            font-size: 0.75rem;
            color: rgba(255, 255, 255, 0.4);
            margin-top: 6px;
        }

        .feed-countdown {
            display: none;
            margin-bottom: 24px;
        }

        .feed-countdown.active {
            display: block;
        }

        .feed-countdown-value {
            font-size: 2.5rem;
            font-weight: 700;
            color: #f59e0b;
        }

        .feed-countdown-label {
            font-size: 0.85rem;
            color: rgba(255, 255, 255, 0.5);
        }

        .feed-target-options {
            display: flex;
            gap: 16px;
            margin-top: 12px;
        }

        .feed-target-option {
            display: flex;
            align-items: center;
            gap: 8px;
            cursor: pointer;
        }

        .feed-target-option input[type="radio"] {
            width: 18px;
            height: 18px;
            accent-color: #10b981;
            cursor: pointer;
        }

        .feed-target-label {
            color: rgba(255, 255, 255, 0.9);
            font-size: 0.95rem;
        }

        .feed-buttons {
            display: flex;
            gap: 12px;
        }

        .feed-buttons-active {
            display: none;
        }

        .feed-btn {
            flex: 1;
            padding: 14px 20px;
            border: none;
            border-radius: 10px;
            font-size: 0.95rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .feed-btn-cancel {
            background: rgba(100, 100, 120, 0.4);
            color: rgba(255, 255, 255, 0.8);
        }

        .feed-btn-cancel:hover {
            background: rgba(100, 100, 120, 0.6);
        }

        .feed-btn-start {
            background: linear-gradient(135deg, #10b981, #059669);
            color: #fff;
        }

        .feed-btn-start:hover {
            background: linear-gradient(135deg, #34d399, #10b981);
            box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4);
        }

        .feed-btn-stop {
            width: 100%;
            background: linear-gradient(135deg, #dc2626, #b91c1c);
            color: #fff;
        }

        .feed-btn-stop:hover {
            background: linear-gradient(135deg, #ef4444, #dc2626);
            box-shadow: 0 4px 15px rgba(220, 38, 38, 0.4);
        }

        .feed-status {
            margin-top: 16px;
            font-size: 0.85rem;
            color: rgba(255, 255, 255, 0.6);
        }

        /* NOTE: Old compact mobile breakpoints removed - replaced by 
           world-class mobile styles in the responsive section below */

        .apply-material-btn {
            width: 100%;
            margin-top: var(--small-spacing);
            background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
            border: none;
            border-radius: var(--small-spacing);
            color: #fff;
            padding: var(--small-spacing);
            font-size: var(--small-font-size);
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .apply-material-btn:hover {
            background: linear-gradient(135deg, var(--secondary-color) 0%, var(--primary-color) 100%);
            transform: translateY(-1px);
        }

        /* Legacy 768px breakpoint - refined for better tablet support */
        @media (max-width: 768px) {
            .tab-header {
                flex-wrap: wrap;
            }

            .tab-button {
                flex: 1;
                min-width: 100px;
            }

            .heater-management-grid {
                display: block;
            }

            .heater-state-buttons {
                grid-template-columns: repeat(3, 1fr);
            }

            .fault-modal {
                padding: 20px;
                margin: 16px;
                max-width: calc(100% - 32px);
            }

            .fault-modal-icon {
                width: 44px;
                height: 44px;
                font-size: 24px;
            }

            .fault-modal-header h2 {
                font-size: 18px;
            }

            .faulted-heater-item {
                flex-direction: row;
                flex-wrap: wrap;
                gap: 10px;
                align-items: center;
            }

            .clear-fault-btn {
                min-width: 120px;
            }

            .material-temps {
                grid-template-columns: repeat(5, 1fr);
            }

            .material-temp-item:nth-child(4),
            .material-temp-item:nth-child(5) {
                grid-column: span 1;
            }

            .material-library-header {
                flex-direction: row;
                align-items: center;
                flex-wrap: wrap;
                gap: var(--small-spacing);
            }

            .material-toggle-btn {
                width: auto;
            }
        }

        /* Kiosk Mode - landscape screens */
        @media (min-width: 1000px) and (orientation: landscape) {
            body {
                padding: 8px;
                height: 100vh;
                overflow: hidden;
            }

            .container {
                display: grid;
                grid-template-columns: 1fr 1fr;
                grid-template-rows: auto auto 1fr auto;
                gap: 8px;
                height: calc(100vh - 16px);
                max-width: none;
            }

            h1 {
                grid-column: 1 / -1;
                font-size: 18px;
                margin: 0;
                padding: 4px 0;
            }

            .status-bar {
                grid-column: 1 / -1;
                padding: 6px 12px;
                margin: 0;
            }

            .error-message {
                grid-column: 1 / -1;
                margin: 0;
            }

            /* BOTH PANELS - IDENTICAL STRUCTURE */
            .material-library,
            .heater-tabs-container {
                display: flex !important;
                flex-direction: column !important;
                padding: 8px !important;
                margin: 0 !important;
                border-radius: 8px !important;
                overflow: hidden !important;
            }

            .material-library { grid-column: 1; grid-row: 3; }
            .heater-tabs-container { grid-column: 2; grid-row: 3; }

            /* ROW 1: TITLES */
            .material-library-header,
            .heater-panel-header,
            .temp-panel-header {
                height: 32px;
                flex-shrink: 0;
                display: flex;
                align-items: center;
                justify-content: space-between;
                border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
                padding: 0 0 8px 0 !important;
                margin: 0 0 12px 0 !important;
            }

            .material-library-header h2,
            .heater-panel-header h2 {
                font-size: var(--base-font-size);
                margin: 0;
                font-weight: 600;
            }

            .temp-panel-header h2 {
                display: none !important;
            }

            /* Temperature tab buttons in header */
            .temp-panel-header .kiosk-temp-tabs {
                display: flex !important;
                gap: 4px;
                background: rgba(0,0,0,0.3);
                padding: 3px;
                border-radius: 8px;
            }

            .temp-panel-header .kiosk-tab-btn {
                padding: 6px 16px;
                font-size: 12px;
                font-weight: 600;
                border: none;
                border-radius: 6px;
                cursor: pointer;
                transition: all 0.2s ease;
                background: transparent;
                color: rgba(255,255,255,0.5);
            }

            .temp-panel-header .kiosk-tab-btn:active {
                transform: scale(0.97);
            }

            .temp-panel-header .kiosk-tab-btn.active {
                background: var(--primary-color);
                color: white;
            }

            .material-toggle-btn { display: none !important; }
            .tab-header { display: none !important; }

            /* Panel view toggle - kiosk */
            .panel-view-toggle {
                margin-left: auto;
            }

            /* Materials view in kiosk */
            .materials-view {
                flex: 1;
                display: flex;
                flex-direction: column;
                min-height: 0;
            }

            /* Graph view in kiosk - fills the panel */
            .graph-view {
                flex: 1;
                display: flex;
                flex-direction: column;
                min-height: 0;
                gap: 8px;
            }

            .graph-container {
                flex: 1;
                min-height: 0;
                border-radius: 8px;
            }

            .graph-controls {
                flex-wrap: nowrap;
                gap: 8px;
            }

            .graph-time-nav {
                padding: 3px;
            }

            .graph-nav-btn {
                padding: 6px 8px;
                font-size: 10px;
            }

            .graph-zoom-controls {
                gap: 4px;
            }

            .graph-zoom-btn {
                padding: 5px 8px;
                font-size: 9px;
            }

            .graph-legend {
                gap: 8px;
            }

            .legend-item {
                padding: 10px 14px;
                min-height: 40px;
                min-width: 90px;
                gap: 8px;
            }

            .legend-label {
                font-size: 12px;
            }

            .legend-value {
                font-size: 14px;
            }

            /* ROW 2: BOTH GRIDS - FILL AVAILABLE SPACE - IDENTICAL */
            .material-list,
            .tab-content.active {
                flex: 1;
                display: grid !important;
                grid-template-columns: repeat(2, 1fr) !important;
                grid-template-rows: repeat(2, 1fr) !important;
                gap: clamp(6px, 0.8vw, 12px) !important;
                align-items: stretch !important;
                justify-items: stretch !important;
                min-height: 0 !important;
                max-height: none !important;
                overflow: hidden !important;
            }
            
            .material-list > * {
                min-height: 0 !important;
                max-height: 100% !important;
                overflow: hidden !important;
            }

            .tab-content { display: none; }
            
            .tab-content.active .temperatures-grid {
                display: contents;
            }

            /* ALL CARDS EXACTLY SAME SIZE - STRETCH TO FILL */
            .material-list > .material-card,
            .material-list > .add-material-btn,
            .temperatures-grid > .temp-card {
                width: 100% !important;
                height: 100% !important;
                min-height: 0 !important;
                padding: clamp(6px, 1vw, 12px) !important;
                border-radius: clamp(6px, 0.8vw, 10px) !important;
                display: flex !important;
                flex-direction: column !important;
                overflow: hidden !important;
                box-sizing: border-box !important;
                align-self: stretch !important;
                justify-self: stretch !important;
            }

            .temperatures-grid > .temp-card.heater-hidden {
                display: none !important;
            }

            /* FORCE CARDS TO FILL THEIR GRID CELLS */
            .material-list > * {
                align-self: stretch !important;
                justify-self: stretch !important;
            }

            .material-list .material-card {
                height: 100% !important;
                min-height: 0 !important;
                overflow: hidden !important;
            }
            
            .material-list .add-material-btn { 
                background: rgba(167, 78, 158, 0.12) !important;
            }

            /* ========================================
               MATERIAL CARD CONTENT - PROPORTIONAL SCALING
               ======================================== */
            .material-card {
                display: flex !important;
                flex-direction: column !important;
                gap: 0 !important;
                overflow: hidden !important;
                box-sizing: border-box !important;
            }

            .material-card .material-name {
                font-size: clamp(9px, 1.2vw, 13px) !important;
                font-weight: 600 !important;
                margin-bottom: clamp(4px, 0.5em, 8px) !important;
                display: flex !important;
                align-items: center !important;
                gap: clamp(4px, 0.5em, 8px) !important;
                flex-shrink: 0 !important;
            }

            .material-card .material-type-badge {
                font-size: clamp(7px, 0.9vw, 11px) !important;
                padding: clamp(2px, 0.3em, 4px) clamp(4px, 0.6em, 8px) !important;
                border-radius: clamp(6px, 0.8vw, 10px) !important;
                flex-shrink: 0 !important;
            }

            .material-card .material-temps {
                display: grid !important;
                grid-template-columns: repeat(5, 1fr) !important;
                gap: clamp(3px, 0.4em, 6px) !important;
                flex: 1 !important;
                align-content: center !important;
                margin: clamp(4px, 0.5em, 8px) 0 !important;
            }

            .material-card .material-temp-item {
                background: rgba(0,0,0,0.35) !important;
                border-radius: clamp(4px, 0.6vw, 8px) !important;
                padding: clamp(4px, 0.5em, 8px) clamp(2px, 0.3em, 4px) !important;
                text-align: center !important;
                display: flex !important;
                flex-direction: column !important;
                justify-content: center !important;
                align-items: center !important;
                gap: clamp(1px, 0.2em, 3px) !important;
            }

            .material-card .material-temp-label {
                font-size: clamp(7px, 0.9vw, 11px) !important;
                opacity: 0.5 !important;
                text-transform: uppercase !important;
            }

            .material-card .material-temp-value {
                font-size: clamp(14px, 3vw, 32px) !important;
                font-weight: 300 !important;
                color: #fff !important;
                letter-spacing: -1px !important;
            }

            .material-card .material-temp-label {
                font-size: clamp(6px, 0.8vw, 10px) !important;
            }

            .material-card .material-temp-item {
                padding: clamp(4px, 0.6em, 10px) clamp(2px, 0.3em, 6px) !important;
                gap: clamp(2px, 0.3em, 4px) !important;
            }

            /* Primary action - Apply button */
            .material-card .apply-material-btn {
                min-height: clamp(24px, 3vw, 36px) !important;
                font-size: clamp(9px, 1.1vw, 13px) !important;
                font-weight: 600 !important;
                border-radius: clamp(4px, 0.6vw, 8px) !important;
                margin-top: auto !important;
                margin-bottom: clamp(4px, 0.5em, 8px) !important;
                background: linear-gradient(135deg, var(--primary-color), #8B3A84) !important;
                border: none !important;
                color: white !important;
                cursor: pointer !important;
            }

            .material-card .apply-material-btn:active {
                transform: scale(0.97) !important;
            }

            /* Secondary actions */
            .material-card .material-card-actions {
                display: flex !important;
                gap: clamp(4px, 0.5em, 8px) !important;
            }

            .material-card .material-card-actions button {
                flex: 1 !important;
                min-height: clamp(20px, 2.5vw, 30px) !important;
                font-size: clamp(9px, 1.1vw, 13px) !important;
                font-weight: 600 !important;
                border-radius: clamp(4px, 0.5vw, 7px) !important;
                border: none !important;
                cursor: pointer !important;
            }

            .material-card .edit-material-btn {
                background: rgba(74, 144, 226, 0.8) !important;
            }

            .material-card .delete-material-btn {
                background: rgba(220, 53, 69, 0.75) !important;
            }

            .material-card .material-card-actions button:active {
                transform: scale(0.95) !important;
            }

            /* ========================================
               ADD MATERIAL BUTTON - PROPORTIONAL SCALING
               ======================================== */
            .add-material-btn {
                display: flex !important;
                flex-direction: column !important;
                align-items: center !important;
                justify-content: center !important;
                gap: clamp(6px, 0.8em, 12px) !important;
                border: 2px dashed rgba(167, 78, 158, 0.5) !important;
                cursor: pointer !important;
            }

            .add-material-btn:active {
                transform: scale(0.97) !important;
                background: rgba(167, 78, 158, 0.25) !important;
            }

            .add-material-btn .add-icon {
                font-size: clamp(20px, 3vw, 36px) !important;
                line-height: 1 !important;
            }

            .add-material-btn .add-text {
                font-size: clamp(9px, 1.2vw, 13px) !important;
                font-weight: 500 !important;
                color: var(--primary-color) !important;
            }

            /* ========================================
               TEMPERATURE CARD CONTENT - PROPORTIONAL SCALING
               ======================================== */
            .temp-card {
                display: flex !important;
                flex-direction: column !important;
                justify-content: space-between !important;
                cursor: pointer !important;
                transition: transform 0.15s ease !important;
            }

            /* Bed pagination override - MUST come after .temp-card */
            .temp-card.bed-page-hidden {
                display: none !important;
                visibility: hidden !important;
            }

            .temp-card:active {
                transform: scale(0.98) !important;
            }

            .temp-card .temp-header {
                display: flex !important;
                justify-content: space-between !important;
                align-items: center !important;
                margin-bottom: clamp(2px, 0.3em, 6px) !important;
            }

            .temp-card .temp-name {
                font-size: clamp(9px, 1.2vw, 13px) !important;
                font-weight: 600 !important;
                text-transform: none !important;
                letter-spacing: 0 !important;
                color: #fff !important;
                opacity: 1 !important;
            }

            .temp-card .heater-state-indicator {
                font-size: clamp(7px, 0.9vw, 11px) !important;
                padding: clamp(2px, 0.3em, 4px) clamp(5px, 0.8em, 10px) !important;
                border-radius: clamp(4px, 0.5vw, 6px) !important;
                font-weight: 600 !important;
                letter-spacing: 0.5px !important;
            }

            /* Hero temperature value */
            .temp-card .temp-value {
                font-size: clamp(20px, 4vw, 44px) !important;
                font-weight: 300 !important;
                letter-spacing: -1px !important;
                line-height: 1 !important;
                margin: auto 0 !important;
                text-align: center !important;
                font-variant-numeric: tabular-nums !important;
            }

            /* Target values - subtle but visible */
            .temp-card .temp-target,
            .temp-card .temp-target-active,
            .temp-card .temp-target-standby {
                font-size: clamp(8px, 1vw, 12px) !important;
                opacity: 0.6 !important;
                text-align: center !important;
                font-weight: 400 !important;
            }

            .temp-card .temp-target-active {
                margin-bottom: clamp(1px, 0.1em, 2px) !important;
            }

            /* Only show first 3 materials + Add button = 4 total */
            .material-card:nth-child(n+4) { display: none !important; }
            .material-card.kiosk-visible { display: flex !important; }
            .add-material-btn { display: flex !important; }

            /* Temp card content */
            .temp-card .temp-value { font-size: 32px; margin: 4px 0; }
            .temp-card .temp-target, 
            .temp-card .temp-target-active, 
            .temp-card .temp-target-standby { font-size: 10px; }
            .temp-card .heater-state-indicator { font-size: 8px; padding: 2px 6px; }

            /* ROW 3: DOTS - CLEAN AND MINIMAL */
            .material-dots,
            .temp-dots {
                height: 20px;
                flex-shrink: 0;
                margin-top: 12px;
                display: flex !important;
                justify-content: center;
                align-items: center;
                gap: 6px;
                padding: 0;
            }

            .material-dot,
            .temp-dot {
                width: 4px;
                height: 4px;
                border-radius: 50%;
                background: rgba(255,255,255,0.2);
                cursor: pointer;
                transition: all 0.2s ease;
                /* Invisible padding for larger touch target */
                box-shadow: 0 0 0 8px transparent;
            }

            .material-dot:active,
            .temp-dot:active {
                background: rgba(255,255,255,0.4);
            }

            .material-dot.active,
            .temp-dot.active {
                background: rgba(255,255,255,0.8);
                width: 8px;
                height: 4px;
                border-radius: 2px;
            }

            .material-pagination { display: none !important; }
            .tab-content.active::after { display: none; }
            .heater-tabs-container::after { display: none; }
            .heater-management { display: none; }
            
            /* Hide any extra elements */
            .temp-panel-header + .tab-header { display: none !important; }

            /* BOTTOM BUTTONS */
            .controls {
                grid-column: 1 / -1;
                grid-row: 4;
                display: flex;
                gap: 8px;
                margin: 0;
            }

            .control-button {
                flex: 1;
                min-height: 50px;
                font-size: 14px;
                font-weight: 600;
                border-radius: 8px;
            }

            .temp-card {
                padding: 8px;
                border-radius: 8px;
                display: flex;
                flex-direction: column;
                justify-content: center;
            }

            .temp-header {
                margin-bottom: 8px;
                padding-bottom: 6px;
            }

            .temp-name {
                font-size: 16px;
                font-weight: 700;
            }

            .temp-value {
                font-size: clamp(32px, 5vw, 48px);
                margin: 8px 0;
                line-height: 1;
            }

            .temp-target, .temp-target-active, .temp-target-standby {
                font-size: 12px;
            }

            .heater-state-indicator {
                font-size: 10px;
                padding: 3px 8px;
            }

            /* ========================================
               HEATER MANAGEMENT MODAL - KIOSK MODE
               ======================================== */
            .heater-management {
                display: none !important;
            }

            .heater-management.show {
                display: flex !important;
                position: fixed !important;
                top: 0 !important;
                left: 0 !important;
                right: 0 !important;
                bottom: 0 !important;
                background: rgba(0, 0, 0, 0.85) !important;
                backdrop-filter: blur(8px) !important;
                -webkit-backdrop-filter: blur(8px) !important;
                z-index: 1000 !important;
                justify-content: center !important;
                align-items: center !important;
                padding: 20px !important;
                margin: 0 !important;
                border: none !important;
                border-radius: 0 !important;
            }

            .heater-management.show .heater-management-header {
                display: none !important;
            }

            .heater-management.show .heater-management-content {
                background: var(--panel-bg) !important;
                border-radius: 16px !important;
                padding: 24px !important;
                width: 100% !important;
                max-width: 500px !important;
                box-shadow: 0 20px 60px rgba(0,0,0,0.5) !important;
                border: 1px solid rgba(255,255,255,0.1) !important;
            }

            .heater-management.show .heater-edit-header {
                display: flex !important;
                justify-content: space-between !important;
                align-items: center !important;
                margin-bottom: 20px !important;
                padding-bottom: 16px !important;
                border-bottom: 1px solid rgba(255,255,255,0.1) !important;
            }

            .heater-management.show .heater-edit-header h3 {
                font-size: 20px !important;
                font-weight: 600 !important;
                margin: 0 !important;
                display: flex !important;
                align-items: center !important;
                gap: 12px !important;
            }

            .heater-management.show .close-heater-btn {
                width: 40px !important;
                height: 40px !important;
                border-radius: 50% !important;
                background: rgba(255,255,255,0.1) !important;
                border: none !important;
                color: #fff !important;
                font-size: 20px !important;
                cursor: pointer !important;
                display: flex !important;
                align-items: center !important;
                justify-content: center !important;
                transition: all 0.2s ease !important;
            }

            .heater-management.show .close-heater-btn:active {
                background: rgba(255,255,255,0.2) !important;
                transform: scale(0.95) !important;
            }

            .heater-management.show .heater-state-badge {
                font-size: 11px !important;
                padding: 4px 12px !important;
                border-radius: 6px !important;
            }

            .heater-management.show .temp-slider-group {
                margin-bottom: 20px !important;
            }

            .heater-management.show .temp-slider-label {
                font-size: 13px !important;
                opacity: 0.7 !important;
                margin-bottom: 10px !important;
                display: block !important;
            }

            .heater-management.show .temp-slider-row {
                display: flex !important;
                align-items: center !important;
                gap: 12px !important;
                margin-bottom: 8px !important;
            }

            .heater-management.show .temp-slider {
                flex: 1 !important;
                height: 8px !important;
                border-radius: 4px !important;
                -webkit-appearance: none !important;
                appearance: none !important;
                background: linear-gradient(to right, #3b82f6 0%, #3b82f6 var(--slider-percent, 50%), #ef4444 var(--slider-percent, 50%), #ef4444 100%) !important;
            }

            .heater-management.show .temp-slider::-webkit-slider-thumb {
                -webkit-appearance: none !important;
                width: 24px !important;
                height: 24px !important;
                border-radius: 50% !important;
                background: #fff !important;
                cursor: pointer !important;
                box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
            }

            .heater-management.show .temp-display {
                font-size: 16px !important;
                font-weight: 600 !important;
                min-width: 60px !important;
                text-align: right !important;
            }

            .heater-management.show .temp-input {
                width: 100% !important;
                padding: 14px !important;
                font-size: 18px !important;
                font-weight: 500 !important;
                background: rgba(0,0,0,0.3) !important;
                border: 1px solid rgba(255,255,255,0.1) !important;
                border-radius: 10px !important;
                color: #fff !important;
                text-align: center !important;
            }

            .heater-management.show .heater-state-buttons {
                display: grid !important;
                grid-template-columns: repeat(3, 1fr) !important;
                gap: 10px !important;
                margin-top: 24px !important;
            }

            .heater-management.show .heater-state-btn {
                min-height: 52px !important;
                font-size: 15px !important;
                font-weight: 600 !important;
                border-radius: 12px !important;
                border: none !important;
                cursor: pointer !important;
                transition: all 0.15s ease !important;
            }

            .heater-management.show .heater-state-btn:active {
                transform: scale(0.97) !important;
            }

            .heater-management.show .btn-active {
                background: linear-gradient(135deg, #10b981, #059669) !important;
                color: white !important;
            }

            .heater-management.show .btn-standby {
                background: linear-gradient(135deg, #f59e0b, #d97706) !important;
                color: white !important;
            }

            .heater-management.show .btn-off {
                background: rgba(255,255,255,0.1) !important;
                color: rgba(255,255,255,0.7) !important;
            }

            .heater-management.show .btn-clear-fault {
                background: linear-gradient(135deg, #ef4444, #dc2626) !important;
                color: white !important;
                margin-top: 12px !important;
            }

            /* Control Buttons */
            .controls {
                grid-column: 1 / -1;
                grid-row: 4;
                flex-direction: row;
                gap: 12px;
                margin-top: 0;
                padding: 0;
            }

            .control-button {
                flex: 1;
                min-height: 70px;
                padding: 14px 20px;
                font-size: 18px;
                font-weight: 700;
                border-radius: 10px;
            }

            .settings-btn,
            .camera-view-btn {
                padding: 6px 10px;
                font-size: 11px;
            }

            .settings-btn svg,
            .camera-view-btn svg {
                width: 16px;
                height: 16px;
            }

            .last-update {
                font-size: 11px;
            }

            .status-indicator {
                width: 12px;
                height: 12px;
            }

            .connection-status {
                font-size: 13px;
            }

            .material-toggle-btn {
                display: none;
            }

            /* Fullscreen Graph Mode - Kiosk */
            .container.graph-fullscreen .material-library {
                grid-column: 1 / -1 !important;
            }

            .container.graph-fullscreen .heater-tabs-container {
                display: none !important;
            }

            .container.graph-fullscreen .graph-view {
                flex: 1 !important;
            }

            .container.graph-fullscreen .graph-container {
                flex: 1 !important;
                min-height: 0 !important;
            }

            /* Clean up graph controls in fullscreen */
            .container.graph-fullscreen .graph-controls {
                justify-content: center !important;
                gap: 16px !important;
                padding: 12px 0 !important;
                background: rgba(0,0,0,0.3) !important;
                border-radius: 12px !important;
                margin: 8px 0 !important;
            }

            .container.graph-fullscreen .graph-live-readout {
                display: block;
            }

            .container.graph-fullscreen .graph-heater-toggle,
            .container.graph-fullscreen .graph-time-nav,
            .container.graph-fullscreen .graph-zoom-controls {
                background: rgba(255,255,255,0.05) !important;
                border-radius: 8px !important;
                padding: 4px !important;
            }

            .container.graph-fullscreen .graph-legend {
                justify-content: center !important;
                gap: 16px !important;
                padding: 8px 0 !important;
            }

            .container.graph-fullscreen .legend-item {
                background: rgba(0,0,0,0.4) !important;
                border: 1px solid rgba(255,255,255,0.1) !important;
            }
        }

        .material-pagination {
            display: none;
        }

        /* Camera View Button in Status Bar - matches settings-btn */
        .camera-view-btn {
            background: rgba(108, 117, 125, 0.3);
            border: 1px solid var(--border-color);
            border-radius: var(--small-spacing);
            color: #fff;
            padding: var(--small-spacing) var(--medium-spacing);
            cursor: pointer;
            font-size: var(--base-font-size);
            display: flex;
            align-items: center;
            gap: var(--small-spacing);
            transition: all 0.3s ease;
            min-height: 44px;
        }

        .camera-view-btn:hover {
            background: rgba(167, 78, 158, 0.3);
            border-color: var(--primary-color);
        }

        .camera-view-btn svg {
            width: 18px;
            height: 18px;
        }

        /* Camera Fullscreen Overlay */
        .camera-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(10, 10, 15, 0.98);
            z-index: 10000;
            padding: 16px;
            overflow-y: auto;
            animation: fadeIn 0.2s ease;
        }

        .camera-overlay.active {
            display: block;
        }

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

        .camera-overlay-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 16px;
            padding-bottom: 12px;
            border-bottom: 1px solid rgba(255,255,255,0.1);
        }

        .camera-overlay-header h2 {
            margin: 0;
            font-size: 20px;
            color: #fff;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .camera-overlay-header h2 svg {
            width: 24px;
            height: 24px;
            stroke: var(--primary-color);
        }

        .camera-close-btn {
            background: rgba(255,255,255,0.1);
            border: 1px solid rgba(255,255,255,0.2);
            width: 44px;
            height: 44px;
            border-radius: 12px;
            color: #fff;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s ease;
        }

        .camera-close-btn:hover {
            background: rgba(239, 68, 68, 0.3);
            border-color: rgba(239, 68, 68, 0.5);
        }

        .camera-close-btn svg {
            width: 20px;
            height: 20px;
        }

        /* Camera overlay controls container */
        .camera-overlay-controls {
            display: flex;
            align-items: center;
            gap: 12px;
        }
        /* Recordings button */
        .recordings-btn {
            background: rgba(255,255,255,0.1);
            border: 1px solid rgba(255,255,255,0.2);
            height: 44px;
            padding: 0 16px;
            border-radius: 12px;
            color: #fff;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 14px;
            font-weight: 500;
            transition: all 0.2s ease;
        }

        .recordings-btn:hover {
            background: rgba(255,255,255,0.15);
            border-color: rgba(255,255,255,0.3);
        }

        .recordings-btn svg {
            width: 18px;
            height: 18px;
        }

        /* Recordings Popup */
        .recordings-popup {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.85);
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 10001;
            padding: 24px;
        }

        .recordings-popup.active {
            display: flex;
        }

        .recordings-popup-content {
            background: linear-gradient(145deg, #1e1e26, #16161c);
            border-radius: 20px;
            width: 100%;
            max-width: 900px;
            max-height: 85vh;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            box-shadow: 0 20px 60px rgba(0,0,0,0.5);
        }

        .recordings-popup-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px 24px;
            border-bottom: 1px solid rgba(255,255,255,0.1);
        }

        .recordings-popup-header h2 {
            display: flex;
            align-items: center;
            gap: 12px;
            font-size: 20px;
            font-weight: 600;
            color: #fff;
            margin: 0;
        }

        .recordings-popup-header h2 svg {
            width: 24px;
            height: 24px;
            opacity: 0.7;
        }

        .popup-close-btn {
            background: rgba(255,255,255,0.1);
            border: none;
            width: 44px;
            height: 44px;
            border-radius: 12px;
            color: #fff;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s ease;
        }

        .popup-close-btn:hover {
            background: rgba(255,80,80,0.3);
        }

        .popup-close-btn svg {
            width: 20px;
            height: 20px;
        }

        .recordings-filter-bar {
            display: flex;
            gap: 8px;
            padding: 16px 24px;
            border-bottom: 1px solid rgba(255,255,255,0.05);
        }

        .filter-btn {
            background: rgba(255,255,255,0.05);
            border: 1px solid rgba(255,255,255,0.1);
            padding: 8px 16px;
            border-radius: 8px;
            color: rgba(255,255,255,0.6);
            font-size: 13px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .filter-btn:hover {
            background: rgba(255,255,255,0.1);
            color: #fff;
        }

        .filter-btn.active {
            background: rgba(99, 102, 241, 0.3);
            border-color: rgba(99, 102, 241, 0.5);
            color: #fff;
        }

        .recordings-list {
            flex: 1;
            overflow-y: auto;
            padding: 16px 24px;
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .recordings-loading {
            text-align: center;
            color: rgba(255,255,255,0.5);
            padding: 40px;
        }

        .recordings-empty {
            text-align: center;
            color: rgba(255,255,255,0.4);
            padding: 60px 20px;
        }

        .recording-item {
            background: rgba(255,255,255,0.03);
            border: 1px solid rgba(255,255,255,0.08);
            border-radius: 12px;
            padding: 16px;
            display: flex;
            align-items: center;
            gap: 16px;
            transition: all 0.2s ease;
        }

        .recording-item:hover {
            background: rgba(255,255,255,0.06);
            border-color: rgba(255,255,255,0.15);
        }

        .recording-preview {
            width: 100px;
            height: 60px;
            border-radius: 8px;
            overflow: hidden;
            background: #000;
            flex-shrink: 0;
        }

        .recording-preview img,
        .recording-preview video {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .recording-info {
            flex: 1;
            min-width: 0;
        }

        .recording-name {
            font-size: 14px;
            font-weight: 500;
            color: #fff;
            margin-bottom: 4px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .recording-meta {
            font-size: 12px;
            color: rgba(255,255,255,0.5);
            display: flex;
            gap: 12px;
            flex-wrap: wrap;
        }

        .recording-type {
            display: inline-block;
            padding: 2px 8px;
            border-radius: 4px;
            font-size: 11px;
            font-weight: 500;
            text-transform: uppercase;
        }

        .recording-type.video {
            background: rgba(99, 102, 241, 0.3);
            color: #818cf8;
        }

        .recording-type.timelapse {
            background: rgba(34, 197, 94, 0.3);
            color: #22c55e;
        }

        .recording-type.snapshot {
            background: rgba(251, 191, 36, 0.3);
            color: #fbbf24;
        }

        .recording-actions {
            display: flex;
            gap: 8px;
        }

        .recording-action-btn {
            background: rgba(255,255,255,0.08);
            border: none;
            width: 40px;
            height: 40px;
            border-radius: 10px;
            color: rgba(255,255,255,0.7);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s ease;
        }

        .recording-action-btn:hover {
            background: rgba(255,255,255,0.15);
            color: #fff;
        }

        /* Recordings Popup - Responsive */
        @media (max-width: 768px) {
            .recordings-popup {
                padding: 12px;
            }

            .recordings-popup-content {
                max-height: 90vh;
                border-radius: 16px;
            }

            .recordings-popup-header {
                padding: 16px 18px;
            }

            .recordings-popup-header h2 {
                font-size: 17px;
            }

            .recordings-filter-bar {
                padding: 12px 18px;
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
            }

            .filter-btn {
                padding: 8px 14px;
                font-size: 12px;
                flex-shrink: 0;
            }

            .recordings-list {
                padding: 12px 18px;
            }

            .recording-item {
                padding: 12px;
                gap: 12px;
            }

            .recording-preview {
                width: 80px;
                height: 48px;
            }

            .recording-name {
                font-size: 13px;
            }

            .recording-action-btn {
                width: 36px;
                height: 36px;
            }
        }

        @media (max-width: 479px) {
            .recordings-popup {
                padding: 8px;
            }

            .recordings-popup-content {
                max-height: 95vh;
                border-radius: 14px;
            }

            .recordings-popup-header {
                padding: 14px 16px;
            }

            .recordings-popup-header h2 {
                font-size: 15px;
                gap: 8px;
            }

            .recordings-popup-header h2 svg {
                width: 20px;
                height: 20px;
            }

            .popup-close-btn {
                width: 40px;
                height: 40px;
            }

            .recordings-filter-bar {
                padding: 10px 16px;
                gap: 6px;
            }

            .filter-btn {
                padding: 6px 10px;
                font-size: 11px;
            }

            .recordings-list {
                padding: 10px 16px;
                gap: 10px;
            }

            .recording-item {
                flex-direction: column;
                align-items: flex-start;
                padding: 14px;
            }

            .recording-preview {
                width: 100%;
                height: auto;
                aspect-ratio: 16/9;
            }

            .recording-info {
                width: 100%;
            }

            .recording-actions {
                width: 100%;
                justify-content: flex-end;
                margin-top: 8px;
            }
        }

        .recording-action-btn.compile-btn {
            background: rgba(34, 197, 94, 0.2);
        }

        .recording-action-btn.compile-btn:hover {
            background: rgba(34, 197, 94, 0.35);
        }

        .recording-action-btn.delete-btn:hover {
            background: rgba(239, 68, 68, 0.3);
            color: #f87171;
        }

        .recording-action-btn svg {
            width: 18px;
            height: 18px;
        }

        /* Video player modal */
        .video-player-modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.95);
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 10002;
            padding: 24px;
        }

        .video-player-modal.active {
            display: flex;
        }

        .video-player-container {
            max-width: 90%;
            max-height: 90%;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .video-player-container video {
            max-width: 100%;
            max-height: calc(90vh - 60px);
            border-radius: 12px;
        }

        .video-player-close {
            position: absolute;
            top: 24px;
            right: 24px;
            background: rgba(255,255,255,0.1);
            border: none;
            width: 48px;
            height: 48px;
            border-radius: 12px;
            color: #fff;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .video-player-close:hover {
            background: rgba(255,80,80,0.3);
        }

        .video-player-close svg {
            width: 24px;
            height: 24px;
        }

        /* Timelapse button on camera tiles (like record button) */
        .camera-btn.timelapse-btn.active {
            background: rgba(34, 197, 94, 0.3);
            border-color: rgba(34, 197, 94, 0.6);
        }

        .camera-btn.timelapse-btn.active svg {
            stroke: #22c55e;
        }

        /* Timelapse indicator on camera tiles */
        .camera-timelapse-indicator {
            position: absolute;
            top: 48px;
            left: 10px;
            display: flex;
            align-items: center;
            gap: 6px;
            background: rgba(34, 197, 94, 0.85);
            padding: 4px 10px;
            border-radius: 6px;
            font-size: 11px;
            font-weight: 500;
            color: #fff;
            z-index: 10;
        }

        .camera-timelapse-indicator .timelapse-icon {
            width: 12px;
            height: 12px;
            animation: pulse-timelapse 2s infinite;
        }

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

        /* Camera grid in overlay - fills available space */
        .camera-overlay .camera-grid {
            flex: 1;
            min-height: 0;
            align-content: start;
        }

        /* Single camera takes more space */
        .camera-overlay .camera-grid.cameras-1 .camera-tile {
            max-height: calc(100vh - 120px);
            aspect-ratio: 16/9;
        }

        @media (max-width: 768px) {
            .camera-overlay {
                padding: 12px;
            }

            .camera-overlay-header {
                flex-wrap: wrap;
                gap: 10px;
            }

            .camera-overlay-header h2 {
                font-size: 16px;
            }

            .camera-overlay-controls {
                flex-wrap: wrap;
                gap: 8px;
            }

            .camera-close-btn {
                width: 44px;
                height: 44px;
            }

            .recordings-btn {
                padding: 10px 14px;
                font-size: 12px;
            }
        }

        @media (max-width: 479px) {
            .camera-overlay {
                padding: 8px;
            }

            .camera-overlay-header {
                padding: 0 0 8px 0;
            }

            .camera-overlay-header h2 {
                font-size: 14px;
                width: 100%;
            }

            .camera-overlay-controls {
                width: 100%;
                justify-content: space-between;
            }

            .recordings-btn span:not(.btn-icon) {
                display: none;
            }

            .camera-tile {
                border-radius: 10px;
            }

            .camera-header {
                padding: 8px 10px;
            }

            .camera-name {
                font-size: 11px;
            }

            .camera-btn {
                padding: 6px;
            }

            .camera-btn svg {
                width: 14px;
                height: 14px;
            }
        }

        .camera-grid {
            display: grid;
            gap: var(--medium-spacing);
            grid-template-columns: 1fr;
        }

        .camera-grid.cameras-1 {
            grid-template-columns: 1fr;
        }

        .camera-grid.cameras-2 {
            grid-template-columns: repeat(2, 1fr);
        }

        .camera-grid.cameras-3 {
            grid-template-columns: repeat(3, 1fr);
        }

        .camera-grid.cameras-4 {
            grid-template-columns: repeat(2, 1fr);
        }

        .camera-grid.cameras-5,
        .camera-grid.cameras-6 {
            grid-template-columns: repeat(3, 1fr);
        }

        @media (max-width: 1024px) {
            .camera-grid.cameras-3,
            .camera-grid.cameras-5,
            .camera-grid.cameras-6 {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (max-width: 768px) {
            .camera-grid.cameras-2,
            .camera-grid.cameras-3,
            .camera-grid.cameras-4,
            .camera-grid.cameras-5,
            .camera-grid.cameras-6 {
                grid-template-columns: 1fr;
            }
        }

        .camera-tile {
            background: var(--tile-bg);
            border-radius: var(--medium-spacing);
            overflow: hidden;
            border: 1px solid var(--border-color);
            position: relative;
            aspect-ratio: 16/9;
            transition: all 0.3s ease;
        }

        .camera-tile:hover {
            border-color: var(--primary-color);
            box-shadow: 0 4px 20px rgba(167, 78, 158, 0.2);
        }

        .camera-tile.fullscreen {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            z-index: 10001;
            border-radius: 0;
            aspect-ratio: auto;
        }

        .camera-header {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            padding: 12px 14px;
            background: linear-gradient(180deg, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.4) 60%, transparent 100%);
            display: flex;
            justify-content: space-between;
            align-items: center;
            z-index: 10;
        }

        .camera-name {
            color: rgba(255,255,255,0.95);
            font-size: 13px;
            font-weight: 600;
            letter-spacing: 0.2px;
            text-shadow: 0 1px 4px rgba(0,0,0,0.6);
            max-width: 50%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .camera-controls {
            display: flex;
            gap: 8px;
        }

        .camera-btn {
            background: linear-gradient(135deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.4) 100%);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border: 1px solid rgba(255,255,255,0.1);
            padding: 8px;
            border-radius: 8px;
            cursor: pointer;
            color: rgba(255,255,255,0.9);
            transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .camera-btn:hover {
            background: linear-gradient(135deg, rgba(167, 78, 158, 0.7) 0%, rgba(106, 90, 205, 0.6) 100%);
            border-color: rgba(167, 78, 158, 0.4);
            transform: scale(1.08);
            box-shadow: 0 4px 12px rgba(167, 78, 158, 0.3);
        }

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

        .camera-btn svg {
            width: 16px;
            height: 16px;
            filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3));
        }

        .camera-btn.record-btn {
            position: relative;
        }

        .camera-btn.record-btn::before {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: 6px;
            opacity: 0;
            background: radial-gradient(circle, rgba(239, 68, 68, 0.4) 0%, transparent 70%);
            transition: opacity 0.3s ease;
        }

        .camera-btn.record-btn.recording {
            background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
            box-shadow: 0 0 20px rgba(239, 68, 68, 0.4), inset 0 1px 0 rgba(255,255,255,0.2);
        }

        .camera-btn.record-btn.recording::before {
            opacity: 1;
            animation: pulse-glow 2s ease-in-out infinite;
        }

        @keyframes pulse-glow {
            0%, 100% { transform: scale(1); opacity: 0.6; }
            50% { transform: scale(1.5); opacity: 0; }
        }

        .camera-recording-indicator {
            position: absolute;
            top: 48px;
            left: 12px;
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 6px 12px;
            background: linear-gradient(135deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.5) 100%);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 8px;
            font-size: 12px;
            font-weight: 500;
            letter-spacing: 0.3px;
            color: white;
            z-index: 10;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
        }

        .recording-dot {
            width: 8px;
            height: 8px;
            background: #ef4444;
            border-radius: 50%;
            box-shadow: 0 0 8px rgba(239, 68, 68, 0.6);
            animation: pulse-dot 1.5s ease-in-out infinite;
        }

        @keyframes pulse-dot {
            0%, 100% { opacity: 1; transform: scale(1); }
            50% { opacity: 0.5; transform: scale(0.85); }
        }

        .recording-time {
            font-variant-numeric: tabular-nums;
            font-family: ui-monospace, 'SF Mono', Menlo, monospace;
        }

        .camera-buffer-indicator {
            position: absolute;
            top: 48px;
            right: 12px;
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 5px 10px;
            background: linear-gradient(135deg, rgba(59, 130, 246, 0.8) 0%, rgba(37, 99, 235, 0.7) 100%);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 6px;
            font-size: 10px;
            font-weight: 600;
            letter-spacing: 0.5px;
            color: white;
            z-index: 10;
            box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
            transition: background 0.3s, box-shadow 0.3s;
        }
        
        .camera-buffer-indicator.buffering {
            background: linear-gradient(135deg, rgba(251, 191, 36, 0.8) 0%, rgba(217, 119, 6, 0.7) 100%);
            box-shadow: 0 2px 8px rgba(251, 191, 36, 0.3);
        }

        .buffer-res {
            font-family: ui-monospace, 'SF Mono', Menlo, monospace;
            font-size: 9px;
            opacity: 0.9;
        }

        .buffer-dot {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            transition: background 0.3s, box-shadow 0.3s;
        }
        
        .buffer-dot.ready {
            background: #34d399;
            box-shadow: 0 0 6px rgba(52, 211, 153, 0.6);
            animation: buffer-pulse-ready 2s ease-in-out infinite;
        }
        
        .buffer-dot.buffering {
            background: #fbbf24;
            box-shadow: 0 0 6px rgba(251, 191, 36, 0.6);
            animation: buffer-pulse-buffering 0.8s ease-in-out infinite;
        }

        @keyframes buffer-pulse-ready {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.7; }
        }
        
        @keyframes buffer-pulse-buffering {
            0%, 100% { opacity: 1; transform: scale(1); }
            50% { opacity: 0.5; transform: scale(1.2); }
        }

        .buffer-label {
            font-size: 9px;
            text-transform: uppercase;
            letter-spacing: 0.8px;
        }

        .camera-stream {
            width: 100%;
            height: 100%;
            object-fit: cover;
            background: #1a1a1a;
        }

        .camera-placeholder {
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: rgba(255,255,255,0.4);
            background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
        }

        .camera-placeholder svg {
            width: 48px;
            height: 48px;
            margin-bottom: 12px;
            opacity: 0.5;
        }

        .camera-placeholder span {
            font-size: 13px;
        }

        .camera-error {
            background: linear-gradient(135deg, #2a1a1a 0%, #1a1a1a 100%);
            color: #ef4444;
        }

        .camera-loading {
            background: linear-gradient(135deg, #1a1a2a 0%, #1a1a1a 100%);
        }

        .camera-loading::after {
            content: '';
            width: 40px;
            height: 40px;
            border: 3px solid rgba(167, 78, 158, 0.3);
            border-top-color: var(--primary-color);
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

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

        /* Camera loader overlay */
        .camera-loader {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, #1a1a2a 0%, #0d0d0d 100%);
            color: rgba(255,255,255,0.6);
            font-size: 13px;
            gap: 12px;
            z-index: 5;
        }

        .camera-loader-spinner {
            width: 44px;
            height: 44px;
            border: 3px solid rgba(167, 78, 158, 0.2);
            border-top-color: var(--primary-color);
            border-radius: 50%;
            animation: spin 0.8s linear infinite;
        }
        /* Camera status bar */
        .camera-status-bar {
            position: absolute;
            bottom: 8px;
            left: 8px;
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 11px;
            font-weight: 500;
            z-index: 10;
            pointer-events: none;
        }

        .resolution-indicator {
            padding: 4px 10px;
            border-radius: 4px;
            background: rgba(0,0,0,0.7);
            backdrop-filter: blur(4px);
            font-weight: 600;
            font-size: 11px;
            letter-spacing: 0.5px;
        }

        .resolution-indicator.good {
            color: #22c55e;
        }

        .resolution-indicator.fair {
            color: #f59e0b;
        }

        .resolution-indicator.poor {
            color: #ef4444;
        }

        .buffered-indicator {
            padding: 4px 10px;
            border-radius: 4px;
            background: rgba(34, 197, 94, 0.2);
            color: #22c55e;
            font-weight: 600;
            font-size: 10px;
            letter-spacing: 0.8px;
            text-transform: uppercase;
        }

        /* Camera error state */
        .camera-tile.camera-error .camera-loader {
            background: linear-gradient(135deg, #1a1015 0%, #0d0d0d 100%);
        }
        
        .camera-tile.camera-error .camera-loader svg {
            color: #ef4444;
            opacity: 0.6;
        }
        
        .camera-tile.camera-error .camera-loader span:first-of-type {
            color: rgba(255,255,255,0.8);
            font-weight: 500;
        }

        /* Camera connected state */
        .camera-tile.camera-connected {
            border-color: rgba(34, 197, 94, 0.3);
        }

        /* Recording button states */
        .camera-btn.record-btn.recording {
            background: rgba(239, 68, 68, 0.4) !important;
            color: #ef4444;
            animation: recording-pulse 1s ease-in-out infinite;
        }
        
        .camera-btn.record-btn.starting,
        .camera-btn.record-btn.stopping {
            opacity: 0.5;
            cursor: wait;
        }
        
        .camera-btn.record-btn.starting::after,
        .camera-btn.record-btn.stopping::after {
            content: '';
            position: absolute;
            width: 14px;
            height: 14px;
            border: 2px solid transparent;
            border-top-color: currentColor;
            border-radius: 50%;
            animation: spin 0.6s linear infinite;
        }
        
        @keyframes recording-pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.6; }
        }

        /* Buffer indicator error state */
        .buffer-dot.error {
            background: #ef4444;
            box-shadow: 0 0 6px rgba(239, 68, 68, 0.6);
            animation: none;
        }

        /* Connection quality indicator badges */
        .connection-quality-badge {
            font-size: 8px;
            font-weight: 600;
            padding: 2px 6px;
            border-radius: 3px;
            letter-spacing: 0.5px;
            margin-left: 4px;
        }
        
        .connection-quality-badge.fast {
            background: rgba(34, 197, 94, 0.2);
            color: #22c55e;
        }
        
        .connection-quality-badge.medium {
            background: rgba(59, 130, 246, 0.2);
            color: #3b82f6;
        }
        
        .connection-quality-badge.slow {
            background: rgba(251, 191, 36, 0.2);
            color: #fbbf24;
        }
        
        .connection-quality-badge.unknown {
            background: rgba(251, 191, 36, 0.2);
            color: #fbbf24;
        }
        
        /* Recording frames indicator */
        .recording-frames {
            font-family: ui-monospace, 'SF Mono', Menlo, monospace;
            transition: color 0.3s ease;
        }

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

        .no-cameras-msg {
            text-align: center;
            padding: 40px 20px;
            color: rgba(255,255,255,0.5);
        }

        .no-cameras-msg svg {
            width: 48px;
            height: 48px;
            margin-bottom: 12px;
            opacity: 0.4;
        }

        .no-cameras-msg p {
            margin: 8px 0;
            font-size: 14px;
        }

        .no-cameras-msg button {
            margin-top: 16px;
            background: var(--primary-color);
            border: none;
            padding: 12px 24px;
            border-radius: 8px;
            color: #fff;
            cursor: pointer;
            font-size: 14px;
            transition: all 0.2s;
        }

        .no-cameras-msg button:hover {
            background: var(--secondary-color);
        }

        /* Camera Settings Styles */
        .camera-list {
            display: flex;
            flex-direction: column;
            gap: 12px;
            margin-bottom: 16px;
        }

        .camera-config-item {
            background: rgba(0,0,0,0.2);
            border: 1px solid var(--border-color);
            border-radius: 10px;
            padding: 16px;
            transition: all 0.2s;
        }

        .camera-config-item:hover {
            border-color: var(--primary-color);
        }

        .camera-config-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 12px;
        }

        .camera-config-name {
            font-weight: 600;
            color: #fff;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .camera-config-name .camera-status {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #22c55e;
        }

        .camera-config-name .camera-status.disabled {
            background: #6b7280;
        }

        .camera-config-actions {
            display: flex;
            gap: 8px;
        }

        .camera-config-actions button {
            background: rgba(255,255,255,0.1);
            border: none;
            padding: 6px 12px;
            border-radius: 6px;
            color: #fff;
            cursor: pointer;
            font-size: 12px;
            transition: all 0.2s;
        }

        .camera-config-actions button:hover {
            background: rgba(255,255,255,0.2);
        }

        .camera-config-actions button.delete-btn:hover {
            background: #ef4444;
        }

        .camera-config-details {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 12px;
        }

        .camera-config-field {
            display: flex;
            flex-direction: column;
            gap: 4px;
        }

        .camera-config-field.full-width {
            grid-column: 1 / -1;
        }

        .camera-config-field label {
            font-size: 11px;
            color: rgba(255,255,255,0.5);
            text-transform: uppercase;
        }

        .camera-config-field input,
        .camera-config-field select {
            padding: 10px;
            background: rgba(0,0,0,0.3);
            border: 1px solid var(--border-color);
            border-radius: 6px;
            color: #fff;
            font-size: 13px;
        }

        .camera-config-field input:focus,
        .camera-config-field select:focus {
            border-color: var(--primary-color);
            outline: none;
        }

        .add-camera-btn {
            width: 100%;
            padding: 14px;
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            border: none;
            border-radius: 10px;
            color: #fff;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            transition: all 0.2s;
        }

        .add-camera-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 15px rgba(167, 78, 158, 0.3);
        }

        .add-camera-btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
            transform: none;
        }

        .camera-help-text {
            font-size: 12px;
            color: rgba(255,255,255,0.5);
            margin-top: 12px;
            padding: 12px;
            background: rgba(0,0,0,0.2);
            border-radius: 8px;
        }

        .camera-help-text code {
            background: rgba(255,255,255,0.1);
            padding: 2px 6px;
            border-radius: 4px;
            font-family: monospace;
        }

        @media (max-width: 768px) {
            .material-card .material-temps {
                grid-template-columns: repeat(4, 1fr) !important;
            }

            .material-card .material-temps .material-temp-item:nth-child(5) {
                display: none !important;
            }
        }

        .container:not(.graph-fullscreen) .material-card .material-temps {
            grid-template-columns: repeat(4, 1fr) !important;
        }

        .container:not(.graph-fullscreen) .material-card .material-temps .material-temp-item:nth-child(5) {
            display: none !important;
        }

        /* ============================================
           OFFLINE MODE STYLES
           ============================================ */

        /* Offline mode indicator in status bar */
        .offline-mode-indicator {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 6px 12px;
            background: rgba(245, 158, 11, 0.2);
            border: 1px solid rgba(245, 158, 11, 0.4);
            border-radius: 20px;
            color: #f59e0b;
            font-size: 12px;
            font-weight: 500;
            margin-left: 12px;
        }

        .offline-mode-indicator svg {
            opacity: 0.9;
        }

        /* Disabled navigation items in offline mode */
        .settings-nav-item.offline-disabled {
            opacity: 0.4;
            pointer-events: none;
            position: relative;
        }

        .settings-nav-item.offline-disabled::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 12px;
            right: 12px;
            height: 1px;
            background: rgba(255, 255, 255, 0.3);
            transform: translateY(-50%);
        }

        /* Offline mode checkbox styling */
        #offlineModeCheckbox {
            width: 18px;
            height: 18px;
            margin-right: 8px;
            accent-color: #f59e0b;
        }

        /* ============================================
           WORLD-CLASS RESPONSIVE SYSTEM
           Mobile-first approach with smooth breakpoints
           ============================================ */

        /* ===========================================
           MOBILE PHONE (up to 639px)
           Large, touch-friendly tiles - TRUE MOBILE EXPERIENCE
           =========================================== */
        @media (max-width: 639px) {
            :root {
                --base-font-size: 15px;
                --small-font-size: 13px;
                --small-spacing: 10px;
                --medium-spacing: 14px;
                --large-spacing: 18px;
            }

            /* ===== CRITICAL: RESET CONTAINER FOR MOBILE ===== */
            body {
                padding: 12px;
                height: auto !important;
                overflow: auto !important;
            }

            .container {
                display: block !important;
                height: auto !important;
                max-width: 100% !important;
                overflow: visible !important;
            }

            h1 {
                font-size: 20px !important;
                margin-bottom: 12px !important;
                text-align: center;
            }

            /* ===== STATUS BAR ===== */
            .status-bar {
                display: flex !important;
                flex-direction: row !important;
                flex-wrap: wrap !important;
                gap: 10px;
                padding: 12px 14px;
                border-radius: 14px;
                margin-bottom: 14px;
            }

            .connection-status {
                flex: 1;
                min-width: 120px;
            }

            .status-bar > div:last-child {
                display: flex;
                gap: 8px;
                flex-wrap: wrap;
            }

            .settings-btn,
            .camera-view-btn {
                padding: 12px 16px;
                font-size: 13px;
                border-radius: 10px;
                min-height: 46px;
                flex: 1;
                min-width: 100px;
            }

            .last-update {
                width: 100%;
                text-align: center;
                padding-top: 8px;
                border-top: 1px solid rgba(255,255,255,0.1);
                margin-top: 6px;
                order: 10;
            }

            /* ===== PANELS - STACKED VERTICALLY ===== */
            .heater-tabs-container,
            .material-library {
                display: block !important;
                width: 100% !important;
                padding: 16px !important;
                border-radius: 16px !important;
                margin-bottom: 14px !important;
                height: auto !important;
                min-height: auto !important;
                max-height: none !important;
                overflow: visible !important;
            }

            .material-library-header,
            .heater-panel-header {
                display: flex !important;
                height: auto !important;
                margin-bottom: 14px !important;
                padding: 0 !important;
                border-bottom: none !important;
            }

            .material-library-header h2,
            .heater-panel-header h2 {
                font-size: 17px !important;
                font-weight: 600 !important;
            }

            /* ===== TAB CONTENT - VISIBLE ===== */
            .tab-content {
                display: none;
            }

            .tab-content.active {
                display: block !important;
            }

            /* ===== TEMPERATURE CARDS - 2x2 GRID ===== */
            .temperatures-grid {
                display: grid !important;
                grid-template-columns: repeat(2, 1fr) !important;
                grid-template-rows: auto !important;
                gap: 12px !important;
                height: auto !important;
                overflow: visible !important;
            }

            .temp-card {
                width: 100% !important;
                height: auto !important;
                min-height: 130px !important;
                padding: 16px 14px !important;
                border-radius: 14px !important;
                display: flex !important;
                flex-direction: column !important;
                justify-content: space-between !important;
                overflow: visible !important;
            }

            .temp-card.heater-hidden {
                display: none !important;
            }

            .temp-header {
                display: flex !important;
                justify-content: space-between !important;
                align-items: center !important;
                margin-bottom: 8px !important;
            }

            .temp-name {
                font-size: 14px !important;
                font-weight: 600 !important;
                letter-spacing: 0.3px !important;
            }

            .heater-state-indicator {
                font-size: 10px !important;
                padding: 4px 8px !important;
                border-radius: 6px !important;
            }

            .temp-value {
                font-size: 36px !important;
                font-weight: 300 !important;
                letter-spacing: -1px !important;
                margin: 8px 0 !important;
                text-align: center !important;
            }

            .temp-target-active,
            .temp-target-standby {
                font-size: 12px !important;
                opacity: 0.7 !important;
                margin: 2px 0 !important;
                text-align: center !important;
            }

            /* ===== MATERIAL CARDS - SINGLE COLUMN ===== */
            .material-list {
                display: flex !important;
                flex-direction: column !important;
                gap: 12px !important;
                max-height: none !important;
                overflow: visible !important;
                height: auto !important;
            }

            .material-card {
                width: 100% !important;
                height: auto !important;
                min-height: auto !important;
                padding: 16px !important;
                border-radius: 14px !important;
                display: flex !important;
                flex-direction: column !important;
                overflow: visible !important;
            }

            .material-card:nth-child(n+4) {
                display: flex !important;
            }

            .material-name {
                font-size: 16px !important;
                font-weight: 600 !important;
                margin-bottom: 12px !important;
            }

            .material-temps {
                display: grid !important;
                grid-template-columns: repeat(4, 1fr) !important;
                gap: 8px !important;
                margin-bottom: 14px !important;
                flex: none !important;
            }

            .material-temp-item {
                padding: 10px 6px !important;
                border-radius: 10px !important;
                text-align: center;
            }

            .material-temp-label {
                font-size: 10px !important;
                text-transform: uppercase;
                opacity: 0.6;
                margin-bottom: 4px !important;
            }

            .material-temp-value {
                font-size: 20px !important;
                font-weight: 500 !important;
            }

            .apply-material-btn {
                padding: 14px !important;
                font-size: 15px !important;
                font-weight: 600 !important;
                border-radius: 10px !important;
                min-height: 50px !important;
            }

            .material-card-actions {
                display: flex;
                gap: 10px;
                margin-top: 10px;
            }

            .material-action-btn {
                flex: 1;
                padding: 12px !important;
                font-size: 13px !important;
                min-height: 44px !important;
                border-radius: 8px !important;
            }

            .add-material-btn {
                min-height: 100px !important;
                border-radius: 14px !important;
            }

            .add-material-btn .add-icon {
                font-size: 32px !important;
            }

            .add-material-btn .add-text {
                font-size: 14px !important;
            }

            /* ===== CONTROLS - 2x2 GRID, BIG BUTTONS ===== */
            .controls {
                display: grid !important;
                grid-template-columns: repeat(2, 1fr) !important;
                gap: 10px !important;
                margin-top: 14px;
            }

            .control-button {
                min-height: 58px !important;
                font-size: 14px !important;
                font-weight: 600 !important;
                border-radius: 12px !important;
                padding: 14px 10px !important;
            }

            /* All 4 buttons in 2x2 grid - no spanning */

            /* ===== GRAPH - USABLE ON MOBILE ===== */
            .graph-view {
                gap: 12px;
            }

            .graph-container {
                min-height: 200px;
                border-radius: 12px;
            }

            .graph-controls {
                display: flex;
                flex-wrap: wrap;
                gap: 8px;
                justify-content: center;
            }

            .graph-heater-toggle {
                width: 100%;
                display: flex;
                gap: 6px;
            }

            .graph-toggle-btn {
                flex: 1;
                padding: 12px !important;
                font-size: 14px !important;
                min-height: 46px !important;
                border-radius: 10px !important;
            }

            .graph-ctrl-btn,
            .graph-download-btn,
            .graph-expand-btn {
                padding: 12px 16px !important;
                font-size: 13px !important;
                min-height: 44px !important;
                border-radius: 10px !important;
            }

            .graph-time-nav {
                display: flex;
                gap: 6px;
            }

            .graph-nav-btn {
                padding: 10px 14px !important;
                min-height: 44px !important;
                border-radius: 8px !important;
            }

            .graph-legend {
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                gap: 8px;
            }

            .legend-item {
                padding: 12px !important;
                border-radius: 10px !important;
                min-height: 60px !important;
            }

            .legend-label {
                font-size: 11px !important;
            }

            .legend-value {
                font-size: 18px !important;
                font-weight: 600 !important;
            }

            /* ===== HEATER TOGGLE SWITCH ===== */
            .heater-toggle-switch {
                padding: 4px;
            }

            .toggle-label {
                font-size: 13px;
                padding: 0 10px;
            }

            /* ===== MODALS - FULL SCREEN FEEL ===== */
            .confirmation-modal,
            .feed-modal,
            .heater-editor-modal,
            .material-editor-modal {
                padding: 12px;
            }

            .confirmation-dialog,
            .feed-dialog,
            .heater-editor-dialog,
            .material-editor-dialog,
            .material-apply-dialog {
                width: 100% !important;
                max-width: none !important;
                padding: 24px 20px !important;
                border-radius: 20px !important;
                margin: 0;
            }

            .confirm-icon {
                width: 52px;
                height: 52px;
            }

            #modalTitle,
            .feed-title,
            #heaterEditorTitle {
                font-size: 20px !important;
            }

            #modalMessage {
                font-size: 15px;
            }

            .confirm-buttons {
                flex-direction: column;
                gap: 10px;
            }

            .confirm-btn-cancel,
            .confirm-btn-action {
                width: 100%;
                padding: 16px !important;
                font-size: 16px !important;
                min-height: 54px;
                border-radius: 12px !important;
            }

            /* Heater editor */
            .heater-current-temp {
                font-size: 48px !important;
            }

            .heater-temp-control label {
                font-size: 14px;
            }

            .heater-slider {
                height: 8px;
            }

            .heater-temp-input {
                font-size: 18px !important;
                padding: 12px !important;
                min-height: 50px;
            }

            .heater-state-buttons {
                display: grid !important;
                grid-template-columns: repeat(3, 1fr) !important;
                gap: 10px !important;
            }

            .heater-state-btn {
                padding: 14px !important;
                font-size: 14px !important;
                min-height: 50px !important;
                border-radius: 10px !important;
            }

            /* Feed modal */
            .feed-slider {
                height: 10px;
            }

            .feed-btn {
                padding: 16px !important;
                font-size: 16px !important;
                min-height: 54px;
            }

            /* Material editor */
            .material-form-temps {
                grid-template-columns: repeat(2, 1fr) !important;
                gap: 10px;
            }

            .material-temp-field {
                padding: 14px 10px;
            }

            .material-temp-field .material-form-input {
                font-size: 18px;
                padding: 12px;
            }

            .material-btn {
                padding: 14px 16px;
                font-size: 15px;
                min-height: 50px;
            }

            /* ===== PANEL VIEW TOGGLE ===== */
            .panel-view-toggle {
                gap: 4px;
            }

            .view-toggle-btn {
                padding: 10px !important;
                min-width: 44px;
                min-height: 44px;
            }

            /* ===== PAGINATION ===== */
            .material-dots {
                gap: 6px;
                padding: 8px 0;
            }

            .pagination-page {
                min-width: 36px !important;
                height: 36px !important;
                font-size: 14px !important;
            }

            .pagination-arrow {
                width: 36px !important;
                height: 36px !important;
            }

            /* ===== FAULT MODAL ===== */
            .faulted-heater-item {
                flex-direction: column;
                align-items: stretch;
            }

            .clear-fault-btn {
                width: 100%;
            }

            .fault-modal {
                padding: 16px;
                margin: 12px;
            }
        }

        /* ===========================================
           VERY SMALL PHONES (under 380px width)
           Single column for temp cards
           =========================================== */
        @media (max-width: 379px) {
            .temperatures-grid {
                grid-template-columns: 1fr !important;
            }

            .temp-card {
                min-height: 100px !important;
            }

            .temp-value {
                font-size: 42px !important;
            }

            .controls {
                grid-template-columns: 1fr !important;
            }

            .control-button {
                min-height: 54px !important;
            }

            .graph-legend {
                grid-template-columns: 1fr;
            }
        }

        /* ===========================================
           TABLET PORTRAIT (640px - 767px)
           NEW breakpoint for 7-8" tablets
           =========================================== */
        @media (min-width: 640px) and (max-width: 767px) {
            :root {
                --base-font-size: 14px;
                --small-font-size: 12px;
                --medium-spacing: 14px;
                --large-spacing: 18px;
            }

            h1 {
                font-size: 22px !important;
            }

            /* Status bar - fully horizontal */
            .status-bar {
                flex-direction: row;
                flex-wrap: nowrap;
                justify-content: space-between;
                padding: 12px 16px;
            }

            /* Controls - horizontal row */
            .controls {
                display: flex !important;
                flex-direction: row !important;
                gap: 10px;
            }

            .control-button {
                flex: 1;
                min-height: 48px;
                font-size: 13px;
                padding: 10px 8px;
            }

            /* Temperature cards - responsive grid */
            .temperatures-grid {
                grid-template-columns: repeat(2, 1fr) !important;
                gap: 10px !important;
            }

            .temp-card {
                padding: 12px !important;
            }

            .temp-value {
                font-size: 30px !important;
            }

            /* Material cards */
            .material-list {
                grid-template-columns: repeat(2, 1fr) !important;
                gap: 10px !important;
            }

            /* Settings - improved sidebar */
            .settings-container {
                flex-direction: row;
            }

            .settings-sidebar {
                width: 200px;
                flex-shrink: 0;
            }

            .settings-nav-item {
                padding: 12px 16px;
                font-size: 13px;
            }

            .settings-content {
                padding: 20px;
            }

            .settings-card {
                padding: 18px;
            }

            /* Modals - tablet-optimized */
            .confirmation-dialog,
            .feed-dialog,
            .heater-editor-dialog {
                width: 85%;
                max-width: 420px;
                padding: 24px;
            }

            .material-editor-dialog {
                width: 90%;
                max-width: 500px;
            }

            /* Graph controls - all visible */
            .graph-controls {
                flex-wrap: nowrap;
                gap: 8px;
            }

            .graph-legend {
                gap: 8px;
            }

            .legend-item {
                padding: 10px 12px;
                min-width: auto;
            }

            /* Camera grid */
            .camera-grid.cameras-2,
            .camera-grid.cameras-3,
            .camera-grid.cameras-4 {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        /* ===========================================
           TABLET LANDSCAPE (768px - 1023px)
           Full tablet experience
           =========================================== */
        @media (min-width: 768px) and (max-width: 1023px) {
            :root {
                --base-font-size: 15px;
                --small-font-size: 13px;
                --medium-spacing: 16px;
                --large-spacing: 20px;
            }

            h1 {
                font-size: 24px !important;
            }

            /* Status bar - spacious horizontal */
            .status-bar {
                padding: 14px 20px;
            }

            /* Controls - horizontal with breathing room */
            .controls {
                display: flex !important;
                flex-direction: row !important;
                gap: 12px;
            }

            .control-button {
                flex: 1;
                min-height: 54px;
                font-size: 15px;
                font-weight: 600;
            }

            /* Two-column panel layout */
            .container {
                display: grid;
                grid-template-columns: 1fr 1fr;
                grid-template-rows: auto auto 1fr auto;
                gap: 12px;
            }

            h1,
            .status-bar,
            .error-message,
            .controls {
                grid-column: 1 / -1;
            }

            .material-library {
                grid-column: 1;
                grid-row: 3;
            }

            .heater-tabs-container {
                grid-column: 2;
                grid-row: 3;
            }

            /* Temperature cards - 2x2 */
            .temperatures-grid {
                grid-template-columns: repeat(2, 1fr) !important;
                gap: 12px !important;
            }

            .temp-card {
                padding: 14px !important;
            }

            .temp-value {
                font-size: 34px !important;
            }

            /* Material cards - 2x2 */
            .material-list {
                grid-template-columns: repeat(2, 1fr) !important;
                gap: 12px !important;
            }

            /* Settings modal - side-by-side */
            .settings-container {
                flex-direction: row;
            }

            .settings-sidebar {
                width: 220px;
            }

            .settings-content {
                padding: 24px;
            }

            .settings-section-title {
                font-size: 24px;
            }

            /* Modals - generous sizing */
            .confirmation-dialog,
            .feed-dialog {
                max-width: 450px;
                padding: 28px;
            }

            .material-editor-dialog {
                max-width: 550px;
            }

            .confirm-buttons {
                gap: 14px;
            }

            /* Graph - full controls */
            .graph-view {
                gap: 12px;
            }

            .graph-controls {
                gap: 10px;
            }

            .legend-item {
                padding: 12px 16px;
            }

            /* Camera grid - better layout */
            .camera-grid.cameras-3 {
                grid-template-columns: repeat(3, 1fr);
            }

            .camera-grid.cameras-4 {
                grid-template-columns: repeat(2, 1fr);
            }

            .camera-grid.cameras-5,
            .camera-grid.cameras-6 {
                grid-template-columns: repeat(3, 1fr);
            }
        }

        /* ===========================================
           LARGE SCREEN SETTINGS PANEL IMPROVEMENTS
           =========================================== */
        @media (min-width: 1200px) {
            .settings-sidebar {
                width: 280px;
                padding: 24px 0;
            }

            .settings-nav-item {
                padding: 14px 28px;
                font-size: 15px;
            }

            .settings-nav-item svg {
                width: 22px;
                height: 22px;
            }

            .settings-content {
                padding: 40px 60px;
                display: flex;
                justify-content: center;
            }

            .settings-section {
                max-width: 900px;
                width: 100%;
            }

            .settings-section-title {
                font-size: 28px;
                margin-bottom: 12px;
            }

            .settings-section-desc {
                font-size: 15px;
                margin-bottom: 32px;
            }

            .settings-card {
                padding: 28px;
                margin-bottom: 24px;
            }

            .settings-card-title {
                font-size: 17px;
                margin-bottom: 20px;
            }

            .settings-row {
                grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
                gap: 20px;
            }

            .settings-close-btn {
                margin: auto 24px 24px;
                padding: 16px;
            }
        }

        /* Extra-large screens - even more spacious */
        @media (min-width: 1600px) {
            .settings-sidebar {
                width: 320px;
            }

            .settings-content {
                padding: 50px 80px;
            }

            .settings-section {
                max-width: 1100px;
            }

            .settings-row {
                grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
                gap: 24px;
            }

            .settings-card {
                padding: 32px;
            }
        }

        /* Ultra-wide screens */
        @media (min-width: 1920px) {
            .settings-sidebar {
                width: 360px;
            }

            .settings-content {
                padding: 60px 100px;
            }

            .settings-section {
                max-width: 1300px;
            }

            .settings-section-title {
                font-size: 32px;
            }

            .settings-row {
                grid-template-columns: repeat(3, 1fr);
            }
        }

        /* ===========================================
           SMOOTH TRANSITIONS BETWEEN BREAKPOINTS
           =========================================== */
        .status-bar,
        .controls,
        .control-button,
        .temp-card,
        .material-card,
        .settings-sidebar,
        .settings-content,
        .confirmation-dialog,
        .feed-dialog,
        .graph-controls,
        .legend-item {
            transition: all 0.2s ease-out;
        }

        /* ===========================================
           TOUCH ENHANCEMENTS FOR ALL MOBILE/TABLET
           =========================================== */
        @media (max-width: 1023px) {
            /* Larger touch targets */
            .settings-nav-item {
                min-height: 48px;
            }

            .graph-nav-btn,
            .graph-ctrl-btn,
            .graph-toggle-btn {
                min-height: 44px;
                min-width: 44px;
            }

            /* Better tap feedback */
            .control-button:active,
            .settings-action-btn:active,
            .feed-btn:active,
            .confirm-btn-cancel:active,
            .confirm-btn-action:active {
                transform: scale(0.97);
                opacity: 0.9;
            }

            /* Prevent text selection on interactive elements */
            .control-button,
            .settings-nav-item,
            .temp-card,
            .material-card {
                -webkit-user-select: none;
                user-select: none;
            }

            /* Smooth scrolling for overflow areas */
            .settings-content,
            .settings-nav,
            .recordings-list {
                -webkit-overflow-scrolling: touch;
                scroll-behavior: smooth;
            }

            /* Hide scrollbars but keep functionality */
            .settings-nav::-webkit-scrollbar,
            .recordings-list::-webkit-scrollbar {
                width: 0;
                height: 0;
            }
        }

        /* ===========================================
           SAFE AREA INSETS (Notched phones)
           =========================================== */
        @supports (padding: max(0px)) {
            @media (max-width: 767px) {
                body {
                    padding-left: max(var(--medium-spacing), env(safe-area-inset-left));
                    padding-right: max(var(--medium-spacing), env(safe-area-inset-right));
                    padding-bottom: max(var(--medium-spacing), env(safe-area-inset-bottom));
                }

                .settings-close-btn {
                    bottom: max(20px, calc(env(safe-area-inset-bottom) + 10px));
                }

                .confirmation-modal,
                .feed-modal,
                .settings-modal {
                    padding-bottom: env(safe-area-inset-bottom);
                }
            }
        }

        /* ===========================================
           ORIENTATION-SPECIFIC OPTIMIZATIONS
           =========================================== */
        @media (max-width: 767px) and (orientation: landscape) {
            /* Compact layout for landscape phones */
            h1 {
                font-size: 16px !important;
                margin-bottom: 8px !important;
            }

            .status-bar {
                padding: 8px 12px;
            }

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

            .control-button {
                min-height: 44px;
                font-size: 12px;
            }

            /* Side-by-side panels */
            .container {
                display: grid;
                grid-template-columns: 1fr 1fr;
                grid-template-rows: auto auto 1fr auto;
                gap: 8px;
                height: calc(100vh - 16px);
                overflow: hidden;
            }

            h1,
            .status-bar,
            .error-message {
                grid-column: 1 / -1;
            }

            .material-library {
                grid-column: 1;
                grid-row: 3;
                overflow: hidden;
            }

            .heater-tabs-container {
                grid-column: 2;
                grid-row: 3;
                overflow: hidden;
            }

            .controls {
                grid-column: 1 / -1;
                grid-row: 4;
            }

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

            .material-list {
                grid-template-columns: repeat(2, 1fr) !important;
                max-height: none !important;
            }

            /* Compact modals in landscape */
            .confirmation-dialog,
            .feed-dialog {
                max-height: 90vh;
                overflow-y: auto;
            }
        }

        /* ===========================================
           HIGH DPI / RETINA OPTIMIZATIONS
           =========================================== */
        @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
            .status-indicator {
                box-shadow: 0 0 6px rgba(34, 197, 94, 0.5);
            }

            .control-button {
                border-width: 0.5px;
            }

            .temp-card,
            .material-card {
                border-width: 0.5px;
            }
        }

        /* ===========================================
           DARK MODE ENHANCEMENTS (if system prefers)
           =========================================== */
        @media (prefers-color-scheme: dark) {
            .settings-modal,
            .confirmation-modal,
            .feed-modal {
                background: rgba(0, 0, 0, 0.85);
            }
        }

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

        /* ===========================================
           PRINT STYLES (for documentation)
           =========================================== */
        @media print {
            .controls,
            .settings-btn,
            .camera-view-btn,
            .graph-controls,
            .material-card-actions {
                display: none !important;
            }

            body {
                background: white;
                color: black;
            }

            .temp-card,
            .material-card {
                border: 1px solid #ccc;
                background: white;
            }
        }

        /* ===========================================
           HELP GUIDE SECTION STYLES
           =========================================== */
        
        /* Quick Start Cards */
        .help-quick-start {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 12px;
            margin-bottom: 24px;
        }

        @media (max-width: 500px) {
            .help-quick-start {
                grid-template-columns: 1fr;
            }
        }

        .help-quick-card {
            display: flex;
            align-items: center;
            gap: 14px;
            padding: 16px;
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 12px;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .help-quick-card:hover {
            background: rgba(255, 255, 255, 0.06);
            border-color: rgba(255, 255, 255, 0.15);
            transform: translateY(-2px);
        }

        .help-quick-icon {
            width: 44px;
            height: 44px;
            border-radius: 10px;
            background: rgba(16, 185, 129, 0.2);
            color: #10b981;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .help-quick-icon svg {
            width: 22px;
            height: 22px;
        }

        .help-quick-text {
            display: flex;
            flex-direction: column;
            gap: 2px;
        }

        .help-quick-text strong {
            font-size: 14px;
            font-weight: 600;
            color: #fff;
        }

        .help-quick-text span {
            font-size: 12px;
            color: rgba(255, 255, 255, 0.5);
        }

        /* Help Accordion */
        .help-accordion {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .help-section {
            background: rgba(255, 255, 255, 0.02);
            border: 1px solid rgba(255, 255, 255, 0.06);
            border-radius: 12px;
            overflow: hidden;
        }

        .help-section.expanded {
            border-color: rgba(255, 255, 255, 0.12);
        }

        .help-section-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 16px 20px;
            cursor: pointer;
            transition: background 0.2s;
        }

        .help-section-header:hover {
            background: rgba(255, 255, 255, 0.03);
        }

        .help-section-header h3 {
            margin: 0;
            font-size: 15px;
            font-weight: 600;
            color: #fff;
        }

        .help-chevron {
            width: 20px;
            height: 20px;
            color: rgba(255, 255, 255, 0.4);
            transition: transform 0.3s ease;
        }

        .help-section.expanded .help-chevron {
            transform: rotate(180deg);
        }

        .help-section-content {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease-out;
        }

        .help-section.expanded .help-section-content {
            max-height: 2000px;
            padding: 0 20px 20px;
        }

        /* Help Topics */
        .help-topic {
            padding: 16px 0;
            border-top: 1px solid rgba(255, 255, 255, 0.06);
        }

        .help-topic:first-child {
            border-top: none;
            padding-top: 0;
        }

        .help-topic h4 {
            margin: 0 0 12px;
            font-size: 14px;
            font-weight: 600;
            color: var(--primary-color);
        }

        .help-topic p {
            margin: 0 0 12px;
            font-size: 13px;
            color: rgba(255, 255, 255, 0.7);
            line-height: 1.6;
        }

        /* Help Steps */
        .help-steps {
            margin: 0;
            padding: 0 0 0 20px;
            font-size: 13px;
            color: rgba(255, 255, 255, 0.7);
            line-height: 1.8;
        }

        .help-steps li {
            margin-bottom: 8px;
        }

        .help-substeps {
            margin: 12px 0 0 0;
            padding: 12px 16px;
            background: rgba(0, 0, 0, 0.2);
            border-radius: 8px;
            line-height: 2;
        }

        .help-step-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 20px;
            height: 20px;
            background: var(--primary-color);
            color: #fff;
            border-radius: 50%;
            font-size: 11px;
            font-weight: 700;
            margin-right: 8px;
        }

        /* Help Lists */
        .help-list {
            margin: 0;
            padding: 0 0 0 20px;
            font-size: 13px;
            color: rgba(255, 255, 255, 0.7);
            line-height: 1.8;
        }

        .help-list li {
            margin-bottom: 6px;
        }

        /* Help Tip/Info Boxes */
        .help-tip {
            padding: 12px 16px;
            background: rgba(16, 185, 129, 0.1);
            border-left: 3px solid #10b981;
            border-radius: 0 8px 8px 0;
            font-size: 13px;
            color: rgba(255, 255, 255, 0.8);
            margin-top: 12px;
        }

        .help-info-box {
            padding: 12px 16px;
            background: rgba(59, 130, 246, 0.1);
            border-left: 3px solid #3b82f6;
            border-radius: 0 8px 8px 0;
            font-size: 13px;
            color: rgba(255, 255, 255, 0.8);
            margin-top: 12px;
        }

        .help-warning-box {
            padding: 12px 16px;
            background: rgba(239, 68, 68, 0.1);
            border-left: 3px solid #ef4444;
            border-radius: 0 8px 8px 0;
            font-size: 13px;
            color: rgba(255, 255, 255, 0.8);
            margin-top: 12px;
        }

        /* Help Feature Grid */
        .help-feature-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 10px;
            margin-top: 12px;
        }

        @media (max-width: 500px) {
            .help-feature-grid {
                grid-template-columns: 1fr;
            }
        }

        .help-feature-item {
            display: flex;
            align-items: flex-start;
            gap: 12px;
            padding: 12px;
            background: rgba(0, 0, 0, 0.2);
            border-radius: 8px;
        }

        .help-feature-icon {
            width: 28px;
            height: 28px;
            border-radius: 6px;
            background: var(--primary-color);
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            font-weight: 700;
            flex-shrink: 0;
        }

        .help-feature-item strong {
            display: block;
            font-size: 13px;
            color: #fff;
            margin-bottom: 2px;
        }

        .help-feature-item span {
            font-size: 12px;
            color: rgba(255, 255, 255, 0.5);
        }

        /* Help State Badges */
        .help-state-badges {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 8px;
            margin-top: 16px;
            font-size: 12px;
            color: rgba(255, 255, 255, 0.6);
            line-height: 2;
        }

        .help-badge {
            display: inline-block;
            padding: 3px 10px;
            border-radius: 4px;
            font-size: 11px;
            font-weight: 600;
            text-transform: uppercase;
        }

        .help-badge-off {
            background: rgba(107, 114, 128, 0.4);
            color: #fff;
        }

        .help-badge-standby {
            background: rgba(245, 158, 11, 0.3);
            color: #fbbf24;
        }

        .help-badge-active {
            background: rgba(16, 185, 129, 0.3);
            color: #34d399;
        }

        .help-badge-fault {
            background: rgba(239, 68, 68, 0.3);
            color: #f87171;
        }

        /* Help Dashboard Diagram */
        .help-visual-guide {
            margin-top: 12px;
        }

        .help-dashboard-diagram {
            display: grid;
            grid-template-areas:
                "status status"
                "left right"
                "bottom bottom";
            grid-template-columns: 1fr 1fr;
            grid-template-rows: auto 1fr auto;
            gap: 8px;
            min-height: 200px;
        }

        .help-diagram-area {
            padding: 16px;
            background: rgba(0, 0, 0, 0.3);
            border: 1px dashed rgba(255, 255, 255, 0.15);
            border-radius: 8px;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .help-diagram-label {
            font-size: 12px;
            font-weight: 600;
            color: var(--primary-color);
            margin-bottom: 4px;
        }

        .help-diagram-desc {
            font-size: 11px;
            color: rgba(255, 255, 255, 0.5);
        }

        /* Help Controls Visual */
        .help-controls-visual {
            display: flex;
            flex-direction: column;
            gap: 10px;
            margin-top: 12px;
        }

        .help-control-item {
            display: flex;
            align-items: center;
            gap: 16px;
        }

        .help-control-btn {
            display: inline-block;
            padding: 6px 14px;
            background: rgba(255, 255, 255, 0.08);
            border-radius: 6px;
            font-size: 12px;
            font-weight: 600;
            color: rgba(255, 255, 255, 0.8);
            font-family: monospace;
            min-width: 100px;
            text-align: center;
        }

        .help-control-item span:not(.help-control-btn) {
            font-size: 12px;
            color: rgba(255, 255, 255, 0.6);
        }

        /* Help Temperature Zones */
        .help-temp-zones {
            display: flex;
            gap: 8px;
            margin-top: 8px;
            flex-wrap: wrap;
        }

        .help-temp-zones span {
            padding: 6px 14px;
            background: rgba(0, 0, 0, 0.3);
            border-radius: 6px;
            font-size: 12px;
            color: rgba(255, 255, 255, 0.7);
        }

        /* Help Apply Options */
        .help-apply-options {
            display: flex;
            gap: 10px;
            margin-top: 12px;
            flex-wrap: wrap;
        }

        .help-apply-option {
            flex: 1;
            min-width: 100px;
            padding: 12px;
            border-radius: 8px;
            text-align: center;
        }

        .help-apply-option strong {
            display: block;
            font-size: 13px;
            margin-bottom: 4px;
        }

        .help-apply-option span {
            font-size: 11px;
            opacity: 0.8;
        }

        .help-apply-active {
            background: linear-gradient(135deg, rgba(249, 115, 22, 0.3), rgba(234, 88, 12, 0.3));
            color: #fb923c;
        }

        .help-apply-standby {
            background: linear-gradient(135deg, rgba(234, 179, 8, 0.3), rgba(202, 138, 4, 0.3));
            color: #fbbf24;
        }

        .help-apply-off {
            background: rgba(107, 114, 128, 0.3);
            color: rgba(255, 255, 255, 0.7);
        }

        /* Help Camera Controls */
        .help-camera-controls {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 10px;
            margin-top: 12px;
        }

        @media (max-width: 500px) {
            .help-camera-controls {
                grid-template-columns: 1fr;
            }
        }

        .help-camera-btn {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px 14px;
            background: rgba(0, 0, 0, 0.2);
            border-radius: 8px;
        }

        .help-camera-btn svg {
            width: 20px;
            height: 20px;
            color: rgba(255, 255, 255, 0.5);
            flex-shrink: 0;
        }

        .help-camera-btn span {
            font-size: 12px;
            color: rgba(255, 255, 255, 0.7);
        }

        /* Help Troubleshooting */
        .help-troubleshoot-item {
            display: flex;
            gap: 16px;
            padding: 14px;
            background: rgba(0, 0, 0, 0.2);
            border-radius: 8px;
            margin-bottom: 10px;
        }

        .help-status-indicator {
            width: 16px;
            height: 16px;
            border-radius: 50%;
            flex-shrink: 0;
            margin-top: 2px;
        }

        .help-status-red {
            background: #ef4444;
        }

        .help-status-yellow {
            background: #f59e0b;
        }

        .help-status-green {
            background: #22c55e;
        }

        .help-troubleshoot-item strong {
            display: block;
            font-size: 13px;
            color: #fff;
            margin-bottom: 8px;
        }

        .help-troubleshoot-item .help-list {
            margin: 0;
            padding-left: 16px;
        }

        /* Help Color Reference */
        .help-color-reference {
            display: flex;
            flex-direction: column;
            gap: 8px;
            margin-top: 12px;
        }

        .help-color-item {
            display: flex;
            align-items: center;
            gap: 12px;
            font-size: 13px;
            color: rgba(255, 255, 255, 0.7);
        }

        .help-color-dot {
            width: 14px;
            height: 14px;
            border-radius: 50%;
            flex-shrink: 0;
        }

        /* Help Table */
        .help-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 12px;
            font-size: 13px;
        }

        .help-table tr {
            border-bottom: 1px solid rgba(255, 255, 255, 0.06);
        }

        .help-table td {
            padding: 10px 8px;
            color: rgba(255, 255, 255, 0.7);
        }

        .help-table td:first-child {
            font-weight: 500;
            color: #fff;
            white-space: nowrap;
        }

        /* Help Tips List */
        .help-tips-list li {
            position: relative;
            padding-left: 8px;
        }

        .help-tips-list li::marker {
            color: #10b981;
        }

        /* Help Footer */
        .help-footer {
            margin-top: 24px;
            padding: 16px;
            background: rgba(139, 92, 246, 0.1);
            border-radius: 10px;
            text-align: center;
        }

        .help-footer p {
            margin: 0;
            font-size: 13px;
            color: rgba(255, 255, 255, 0.7);
        }

        .help-footer strong {
            color: #a78bfa;
        }

        /* Code styling in help */
        .help-topic code {
            padding: 2px 8px;
            background: rgba(0, 0, 0, 0.4);
            border-radius: 4px;
            font-family: monospace;
            font-size: 12px;
            color: #fbbf24;
        }

        /* ===========================================
           HELP GUIDE - RENDERED UI MOCKUPS
           Matches the actual Apollo UI exactly
           =========================================== */

        .help-ui-mockup {
            position: relative;
            display: flex;
            justify-content: center;
            padding: 30px 80px;
            margin: 16px 0;
            background: rgba(0, 0, 0, 0.25);
            border-radius: 12px;
        }

        .help-ui-mockup.editor {
            padding: 24px;
        }

        .help-ui-section-label {
            font-size: 11px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1px;
            color: rgba(255, 255, 255, 0.4);
            margin-bottom: 10px;
        }

        /* Mock Heater Card - EXACT match to .temp-card */
        .help-mock-heater-card {
            width: 160px;
            background: linear-gradient(145deg, rgba(55, 55, 60, 0.9) 0%, rgba(40, 40, 45, 0.9) 100%);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 14px;
            padding: 14px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
            position: relative;
        }

        .help-mock-heater-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
        }

        .help-mock-heater-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 6px;
        }

        .help-mock-heater-name {
            font-size: 13px;
            font-weight: 600;
            color: #fff;
        }

        /* State badges - EXACT match to .heater-state-indicator */
        .help-mock-heater-badge {
            font-size: 9px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            padding: 3px 10px;
            border-radius: 20px;
        }

        .help-mock-heater-badge.active {
            background: rgba(34, 197, 94, 0.2);
            color: #4ade80;
            box-shadow: 0 0 8px rgba(34, 197, 94, 0.3);
        }

        .help-mock-heater-badge.standby {
            background: rgba(245, 158, 11, 0.2);
            color: #fbbf24;
        }

        .help-mock-heater-badge.off {
            background: rgba(100, 100, 110, 0.3);
            color: rgba(255, 255, 255, 0.45);
        }

        .help-mock-heater-badge.fault {
            background: rgba(239, 68, 68, 0.25);
            color: #f87171;
        }

        .help-mock-heater-temp {
            font-size: 44px;
            font-weight: 300;
            color: #fff;
            text-align: center;
            line-height: 1;
            margin: 8px 0;
            letter-spacing: -1px;
            font-variant-numeric: tabular-nums;
        }

        .help-mock-temp-unit {
            font-size: 18px;
            font-weight: 300;
            color: rgba(255, 255, 255, 0.5);
        }

        .help-mock-heater-targets {
            display: flex;
            justify-content: space-between;
            gap: 8px;
        }

        .help-mock-target {
            flex: 1;
            text-align: center;
            padding: 8px;
            background: rgba(0, 0, 0, 0.35);
            border-radius: 8px;
        }

        .help-mock-target-label {
            display: block;
            font-size: 9px;
            color: rgba(255, 255, 255, 0.5);
            text-transform: uppercase;
            margin-bottom: 2px;
        }

        .help-mock-target-value {
            font-size: 12px;
            font-weight: 500;
            color: #fff;
        }

        .help-mock-target-value.active-val {
            color: rgba(34, 197, 94, 0.85);
        }

        .help-mock-target-value.standby-val {
            color: rgba(245, 158, 11, 0.75);
        }

        /* Mock Annotations */
        .help-mock-annotations {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            pointer-events: none;
        }

        .help-mock-annotation {
            position: absolute;
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 11px;
            color: rgba(255, 255, 255, 0.6);
            white-space: nowrap;
        }

        .help-annotation-line {
            width: 30px;
            height: 1px;
            background: rgba(255, 255, 255, 0.3);
        }

        .help-annotation-line.left {
            order: 1;
        }

        /* Mini Heater States Row - Shows all 4 states */
        .help-ui-states-row {
            display: flex;
            gap: 12px;
            justify-content: center;
            margin-top: 16px;
            flex-wrap: wrap;
        }

        .help-mock-heater-mini {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 6px;
            padding: 12px 16px;
            background: linear-gradient(145deg, rgba(55, 55, 60, 0.9) 0%, rgba(40, 40, 45, 0.9) 100%);
            border-radius: 10px;
            border: 1px solid rgba(255, 255, 255, 0.08);
            min-width: 72px;
        }

        .help-mock-heater-mini.off {
            border-color: rgba(100, 100, 110, 0.3);
        }

        .help-mock-heater-mini.standby {
            border-color: rgba(245, 158, 11, 0.3);
        }

        .help-mock-heater-mini.active {
            border-color: rgba(34, 197, 94, 0.3);
        }

        .help-mock-heater-mini.fault {
            border-color: rgba(239, 68, 68, 0.3);
        }

        .help-mock-mini-badge {
            font-size: 8px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            padding: 3px 8px;
            border-radius: 20px;
        }

        .help-mock-mini-badge.off {
            background: rgba(100, 100, 110, 0.3);
            color: rgba(255, 255, 255, 0.45);
        }

        .help-mock-mini-badge.standby {
            background: rgba(245, 158, 11, 0.2);
            color: #fbbf24;
        }

        .help-mock-mini-badge.active {
            background: rgba(34, 197, 94, 0.2);
            color: #4ade80;
        }

        .help-mock-mini-badge.fault {
            background: rgba(239, 68, 68, 0.25);
            color: #f87171;
        }

        .help-mock-mini-temp {
            font-size: 18px;
            font-weight: 300;
            color: #fff;
            letter-spacing: -0.5px;
        }

        .help-mock-heater-mini.off .help-mock-mini-temp {
            color: rgba(255, 255, 255, 0.4);
        }

        .help-mock-heater-mini.fault .help-mock-mini-temp {
            color: #f87171;
        }

        /* Mock Editor - EXACT match to .heater-editor-dialog */
        .help-mock-editor {
            width: 300px;
            background: linear-gradient(145deg, rgba(40, 40, 50, 0.98), rgba(25, 25, 35, 0.98));
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 16px;
            padding: 28px;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 1px rgba(255, 255, 255, 0.1) inset;
        }

        .help-mock-editor-title {
            text-align: center;
            font-size: 14px;
            font-weight: 600;
            color: var(--primary-color);
            margin-bottom: 8px;
        }

        .help-mock-editor-current {
            text-align: center;
            font-size: 56px;
            font-weight: 700;
            color: #fff;
            margin-bottom: 24px;
            letter-spacing: -1px;
        }

        .help-mock-editor-current span {
            font-size: 24px;
            color: rgba(255, 255, 255, 0.4);
        }

        .help-mock-editor-control {
            margin-bottom: 20px;
        }

        .help-mock-editor-control label {
            display: block;
            font-size: 11px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            color: rgba(255, 255, 255, 0.5);
            margin-bottom: 10px;
        }

        .help-mock-slider-row {
            display: flex;
            gap: 12px;
            align-items: center;
        }

        .help-mock-slider {
            flex: 1;
            height: 8px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 4px;
            position: relative;
        }

        .help-mock-slider-fill {
            position: absolute;
            left: 0;
            top: 0;
            height: 100%;
            background: var(--primary-color);
            border-radius: 4px;
        }

        .help-mock-slider-fill.standby {
            background: linear-gradient(90deg, #eab308, #ca8a04);
        }

        .help-mock-slider-thumb {
            position: absolute;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 20px;
            height: 20px;
            background: var(--primary-color);
            border-radius: 50%;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
        }

        .help-mock-input {
            width: 70px;
            padding: 10px;
            background: rgba(0, 0, 0, 0.4);
            border: 1px solid rgba(255, 255, 255, 0.15);
            border-radius: 8px;
            color: #fff;
            font-size: 16px;
            font-weight: 600;
            text-align: center;
        }

        .help-mock-state-buttons {
            display: flex;
            gap: 10px;
            margin-top: 24px;
        }

        .help-mock-state-btn {
            flex: 1;
            padding: 14px 8px;
            border: none;
            border-radius: 10px;
            font-size: 13px;
            font-weight: 600;
            cursor: default;
            opacity: 0.5;
        }

        .help-mock-state-btn.off {
            background: rgba(100, 100, 120, 0.6);
            color: #fff;
        }

        .help-mock-state-btn.off:hover, .help-mock-state-btn.off.selected {
            background: rgba(100, 100, 120, 0.9);
        }

        .help-mock-state-btn.standby {
            background: linear-gradient(135deg, #eab308, #ca8a04);
            color: #000;
        }

        .help-mock-state-btn.active {
            background: linear-gradient(135deg, #f97316, #ea580c);
            color: #fff;
        }

        .help-mock-state-btn.selected {
            opacity: 1;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
            transform: translateY(-1px);
        }

        .help-mock-click-hint {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            margin-top: 12px;
            font-size: 12px;
            color: rgba(255, 255, 255, 0.4);
        }

        .help-mock-click-hint svg {
            width: 16px;
            height: 16px;
            animation: bounce-hint 1.5s ease-in-out infinite;
        }

        @keyframes bounce-hint {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(4px); }
        }

        /* Mock Status Bar - EXACT match to .status-bar */
        .help-mock-status-bar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 16px;
            background: var(--panel-bg);
            border: 1px solid var(--border-color);
            border-radius: 12px;
            margin-bottom: 12px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
        }

        .help-mock-connection {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 13px;
            color: rgba(255, 255, 255, 0.8);
        }

        .help-mock-status-dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
        }

        .help-mock-status-dot.green {
            background: #22c55e;
            box-shadow: 0 0 12px rgba(34, 197, 94, 0.6);
        }

        .help-mock-status-dot.yellow {
            background: #f59e0b;
            box-shadow: 0 0 12px rgba(245, 158, 11, 0.6);
        }

        .help-mock-status-dot.red {
            background: #ef4444;
            box-shadow: 0 0 12px rgba(239, 68, 68, 0.6);
        }

        .help-mock-status-right {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .help-mock-timestamp {
            font-size: 12px;
            color: rgba(255, 255, 255, 0.5);
        }

        .help-mock-btn {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 10px 16px;
            border: none;
            border-radius: 10px;
            font-size: 13px;
            font-weight: 500;
            cursor: default;
            transition: all 0.3s ease;
        }

        .help-mock-btn svg {
            width: 16px;
            height: 16px;
        }

        .help-mock-btn.cameras {
            background: rgba(255, 255, 255, 0.08);
            border: 1px solid rgba(255, 255, 255, 0.1);
            color: rgba(255, 255, 255, 0.8);
        }

        .help-mock-btn.settings {
            background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
            color: #fff;
        }

        /* Mock Dashboard Layout - Matches actual dashboard */
        .help-mock-dashboard {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 12px;
            margin-bottom: 12px;
        }

        @media (max-width: 500px) {
            .help-mock-dashboard {
                grid-template-columns: 1fr;
            }
        }

        .help-mock-panel {
            background: var(--panel-bg);
            border: 1px solid var(--border-color);
            border-radius: 12px;
            padding: 12px;
        }

        .help-mock-panel-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
            padding-bottom: 8px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            font-size: 13px;
            font-weight: 600;
            color: #fff;
        }

        .help-mock-toggle-btns {
            display: flex;
            gap: 4px;
            background: rgba(0, 0, 0, 0.3);
            padding: 3px;
            border-radius: 8px;
        }

        .help-mock-toggle-btn {
            padding: 6px 12px;
            font-size: 11px;
            font-weight: 600;
            border-radius: 6px;
            color: rgba(255, 255, 255, 0.5);
        }

        .help-mock-toggle-btn.active {
            background: var(--primary-color);
            color: #fff;
        }

        .help-mock-graph {
            height: 70px;
            background: rgba(0, 0, 0, 0.25);
            border-radius: 8px;
            overflow: hidden;
            padding: 10px;
        }

        .help-mock-graph svg {
            width: 100%;
            height: 100%;
        }

        .help-mock-graph-controls {
            display: flex;
            gap: 6px;
            margin-top: 10px;
            font-size: 10px;
        }

        .help-mock-graph-controls span {
            padding: 6px 10px;
            background: rgba(0, 0, 0, 0.3);
            border-radius: 6px;
            color: rgba(255, 255, 255, 0.6);
            font-weight: 500;
        }

        .help-mock-graph-controls span:last-child {
            background: rgba(34, 197, 94, 0.2);
            color: #4ade80;
        }

        .help-mock-heaters-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 8px;
        }

        .help-mock-heater-tiny {
            padding: 10px;
            background: linear-gradient(145deg, rgba(55, 55, 60, 0.9) 0%, rgba(40, 40, 45, 0.9) 100%);
            border-radius: 10px;
            text-align: center;
            font-size: 10px;
            color: rgba(255, 255, 255, 0.6);
            border: 1px solid rgba(255, 255, 255, 0.08);
        }

        .help-mock-heater-tiny strong {
            display: block;
            font-size: 18px;
            font-weight: 300;
            color: #fff;
            margin-top: 4px;
            letter-spacing: -0.5px;
        }

        .help-mock-heater-tiny.active {
            border-color: rgba(34, 197, 94, 0.3);
        }

        .help-mock-heater-tiny.active strong {
            color: #fff;
        }

        .help-mock-heater-tiny.standby {
            border-color: rgba(245, 158, 11, 0.3);
        }

        .help-mock-heater-tiny.standby strong {
            color: #fbbf24;
        }

        /* Mock Control Buttons - EXACT match to .control-button */
        .help-mock-controls {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }

        .help-mock-control-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            padding: 14px 18px;
            border: 1px solid;
            border-radius: 10px;
            font-size: 13px;
            font-weight: 600;
            cursor: default;
            flex: 1;
            min-width: 140px;
            position: relative;
            overflow: hidden;
        }

        .help-mock-control-btn svg {
            width: 18px;
            height: 18px;
        }

        /* Default button - matches .control-button gradient */
        .help-mock-control-btn.primary {
            background: linear-gradient(135deg, var(--primary-color) 0%, #6B4C6A 50%, #3A5F4E 80%, #1A3B2E 100%);
            border-color: var(--primary-color);
            color: #fff;
        }

        /* Heaters Off - matches .btn-heaters-off */
        .help-mock-control-btn.danger {
            background: linear-gradient(135deg, #dc3545 0%, #c82333 55%, #b21e2f 100%);
            border-color: #dc3545;
            color: #fff;
        }

        /* Pause - warning style */
        .help-mock-control-btn.warning {
            background: linear-gradient(135deg, #f59e0b 0%, #d97706 55%, #b45309 100%);
            border-color: #f59e0b;
            color: #000;
        }

        /* Feed - success style */
        .help-mock-control-btn.success {
            background: linear-gradient(135deg, #10b981 0%, #059669 55%, #047857 100%);
            border-color: #10b981;
            color: #fff;
        }

        @media (max-width: 500px) {
            .help-mock-control-btn {
                min-width: 100%;
            }
            
            .help-ui-mockup {
                padding: 20px 16px;
            }
            
            .help-mock-annotations {
                display: none;
            }
        }

        /* Mock Camera Tile - EXACT match to .camera-tile */
        .help-mock-camera-tile {
            max-width: 320px;
            margin: 16px auto;
            background: var(--tile-bg);
            border: 1px solid var(--border-color);
            border-radius: 14px;
            overflow: hidden;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
        }

        .help-mock-camera-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 14px;
            background: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.3) 100%);
        }

        .help-mock-camera-name {
            font-size: 13px;
            font-weight: 600;
            color: #fff;
            text-shadow: 0 1px 2px rgba(0,0,0,0.5);
        }

        .help-mock-camera-fps {
            font-size: 11px;
            font-weight: 600;
            padding: 4px 10px;
            background: rgba(0, 0, 0, 0.7);
            backdrop-filter: blur(4px);
            color: #22c55e;
            border-radius: 4px;
            letter-spacing: 0.5px;
        }

        .help-mock-camera-preview {
            aspect-ratio: 16/9;
            background: linear-gradient(135deg, rgba(20, 20, 30, 1) 0%, rgba(30, 30, 45, 1) 100%);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .help-mock-camera-placeholder {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;
            color: rgba(255, 255, 255, 0.15);
        }

        .help-mock-camera-placeholder svg {
            width: 48px;
            height: 48px;
        }

        .help-mock-camera-placeholder span {
            font-size: 12px;
            letter-spacing: 1px;
            text-transform: uppercase;
        }

        .help-mock-camera-controls {
            display: flex;
            justify-content: center;
            gap: 8px;
            padding: 12px;
            background: linear-gradient(180deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.5) 100%);
        }

        /* Camera buttons - EXACT match to .camera-btn */
        .help-mock-camera-btn {
            width: 36px;
            height: 36px;
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 8px;
            background: linear-gradient(135deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.4) 100%);
            backdrop-filter: blur(10px);
            color: rgba(255, 255, 255, 0.7);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: default;
        }

        .help-mock-camera-btn svg {
            width: 16px;
            height: 16px;
            filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3));
        }

        .help-mock-camera-btn.record {
            background: linear-gradient(135deg, rgba(239, 68, 68, 0.3) 0%, rgba(220, 38, 38, 0.2) 100%);
            border-color: rgba(239, 68, 68, 0.3);
            color: #f87171;
        }

        .help-mock-camera-btn.timelapse {
            background: rgba(34, 197, 94, 0.3);
            border-color: rgba(34, 197, 94, 0.6);
            color: #22c55e;
        }

        /* Camera Controls Legend */
        .help-mock-camera-legend {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 16px;
            margin-top: 16px;
        }

        .help-mock-legend-item {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 11px;
            color: rgba(255, 255, 255, 0.6);
        }

        .help-mock-legend-icon {
            width: 28px;
            height: 28px;
            border-radius: 6px;
            background: rgba(255, 255, 255, 0.08);
            display: flex;
            align-items: center;
            justify-content: center;
            color: rgba(255, 255, 255, 0.5);
        }

        .help-mock-legend-icon svg {
            width: 14px;
            height: 14px;
        }

        .help-mock-legend-icon.record {
            background: rgba(239, 68, 68, 0.2);
            color: #f87171;
        }

        .help-mock-legend-icon.timelapse {
            background: rgba(34, 197, 94, 0.2);
            color: #34d399;
        }

        /* Mock Material Card - EXACT match to .material-card */
        .help-mock-material-row {
            display: flex;
            gap: 20px;
            align-items: flex-start;
            justify-content: center;
            margin: 16px 0;
            flex-wrap: wrap;
        }

        .help-mock-material-card {
            width: 180px;
            background: linear-gradient(145deg, rgba(55, 55, 60, 0.9) 0%, rgba(40, 40, 45, 0.9) 100%);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 14px;
            padding: 14px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
            position: relative;
        }

        .help-mock-material-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
        }

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

        .help-mock-material-name {
            font-size: 15px;
            font-weight: 600;
            color: #fff;
        }

        .help-mock-material-type {
            font-size: 9px;
            font-weight: 600;
            padding: 3px 10px;
            background: rgba(139, 92, 246, 0.2);
            color: #a78bfa;
            border-radius: 20px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .help-mock-material-temps {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 6px;
            margin-bottom: 12px;
        }

        .help-mock-material-temp {
            text-align: center;
            padding: 8px 4px;
            background: rgba(0, 0, 0, 0.35);
            border-radius: 8px;
        }

        .help-mock-temp-label {
            display: block;
            font-size: 9px;
            color: rgba(255, 255, 255, 0.5);
            text-transform: uppercase;
            margin-bottom: 4px;
        }

        .help-mock-temp-val {
            font-size: 16px;
            font-weight: 300;
            color: #fff;
            letter-spacing: -0.5px;
        }

        .help-mock-material-actions {
            display: flex;
            gap: 8px;
        }

        .help-mock-material-btn {
            flex: 1;
            padding: 10px 8px;
            border: none;
            border-radius: 8px;
            font-size: 11px;
            font-weight: 600;
            cursor: default;
        }

        .help-mock-material-btn.edit {
            background: rgba(74, 144, 226, 0.8);
            color: #fff;
        }

        .help-mock-material-btn.apply {
            background: linear-gradient(135deg, var(--primary-color), #8B3A84);
            color: #fff;
        }

        /* Mock Apply Dialog */
        .help-mock-apply-dialog {
            width: 180px;
            background: linear-gradient(145deg, rgba(50, 50, 60, 0.98), rgba(30, 30, 40, 0.98));
            border: 1px solid rgba(255, 255, 255, 0.15);
            border-radius: 12px;
            padding: 16px;
            box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
        }

        .help-mock-apply-title {
            font-size: 11px;
            color: var(--primary-color);
            text-align: center;
            margin-bottom: 4px;
        }

        .help-mock-apply-subtitle {
            font-size: 14px;
            font-weight: 600;
            color: #fff;
            text-align: center;
            margin-bottom: 12px;
        }

        .help-mock-apply-buttons {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .help-mock-apply-btn {
            padding: 10px;
            border: none;
            border-radius: 8px;
            text-align: center;
            cursor: default;
        }

        .help-mock-apply-btn strong {
            display: block;
            font-size: 12px;
            margin-bottom: 2px;
        }

        .help-mock-apply-btn span {
            font-size: 9px;
            opacity: 0.7;
        }

        .help-mock-apply-btn.active {
            background: linear-gradient(135deg, #f97316, #ea580c);
            color: #fff;
        }

        .help-mock-apply-btn.standby {
            background: linear-gradient(135deg, #eab308, #ca8a04);
            color: #000;
        }

        .help-mock-apply-btn.off {
            background: rgba(100, 100, 120, 0.5);
            color: #fff;
        }

        /* Flow Arrow */
        .help-mock-flow-arrow {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            margin-top: 16px;
            font-size: 12px;
            color: rgba(255, 255, 255, 0.4);
        }

        .help-mock-flow-arrow svg {
            width: 20px;
            height: 20px;
            color: var(--primary-color);
        }

        @media (max-width: 450px) {
            .help-mock-material-row {
                flex-direction: column;
                align-items: center;
            }
            
            .help-mock-camera-legend {
                gap: 12px;
            }
        }

/* =====================================================
   KUKA Robot Communication Styles
   ===================================================== */

.kuka-status {
    padding: 12px 16px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 500;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--border-color);
}

.kuka-status.connected {
    background: rgba(16, 185, 129, 0.1);
    border-color: rgba(16, 185, 129, 0.3);
    color: #10b981;
}

.kuka-status.disconnected {
    background: rgba(100, 100, 120, 0.1);
    border-color: rgba(100, 100, 120, 0.3);
    color: rgba(255, 255, 255, 0.5);
}

.kuka-status.error {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.3);
    color: #ef4444;
}

.kuka-variables-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

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

.kuka-variable-row input {
    flex: 1;
    padding: 10px 12px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: #fff;
    font-family: 'Monaco', 'Menlo', monospace;
    font-size: 13px;
}

.kuka-variable-row input:focus {
    outline: none;
    border-color: var(--primary-color);
}

.kuka-remove-btn {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 6px;
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    transition: all 0.2s ease;
}

.kuka-remove-btn:hover {
    background: rgba(239, 68, 68, 0.4);
}

.kuka-live-values {
    min-height: 100px;
}

.kuka-no-values {
    text-align: center;
    padding: 30px;
    color: rgba(255, 255, 255, 0.4);
    font-style: italic;
}

.kuka-values-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}

.kuka-value-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 16px;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

.kuka-var-label {
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
}

.kuka-var-name {
    font-family: 'Monaco', 'Menlo', monospace;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    flex-shrink: 0;
}

.kuka-var-name-small {
    font-family: 'Monaco', 'Menlo', monospace;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.35);
}

.kuka-var-value {
    font-family: 'Monaco', 'Menlo', monospace;
    font-size: 20px;
    font-weight: 700;
    color: #10b981;
}

.kuka-var-value .error {
    color: #ef4444;
}

.kuka-write-input {
    width: 80px;
    padding: 6px 8px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--primary-color);
    border-radius: 4px;
    color: #fff;
    font-family: 'Monaco', 'Menlo', monospace;
    font-size: 12px;
}

.kuka-edit-btn {
    padding: 6px 12px;
    background: rgba(59, 130, 246, 0.2);
    border: 1px solid rgba(59, 130, 246, 0.4);
    border-radius: 4px;
    color: #3b82f6;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.kuka-edit-btn:hover {
    background: rgba(59, 130, 246, 0.3);
}

.kuka-manual-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.kuka-manual-result {
    padding: 12px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 6px;
    font-family: 'Monaco', 'Menlo', monospace;
    font-size: 13px;
    min-height: 20px;
    color: #10b981;
}

.kuka-setup-instructions {
    font-size: 14px;
    line-height: 1.7;
}

.kuka-setup-instructions ol {
    margin: 12px 0;
    padding-left: 24px;
}

.kuka-setup-instructions li {
    margin-bottom: 8px;
    color: rgba(255, 255, 255, 0.8);
}

.kuka-setup-instructions code {
    background: rgba(0, 0, 0, 0.3);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: 'Monaco', 'Menlo', monospace;
    font-size: 12px;
    color: #f59e0b;
}

/* =====================================================
   KUKA Setup Wizard Styles
   ===================================================== */

.kuka-wizard-container {
    max-width: 600px;
}

.kuka-wizard-progress {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-bottom: 24px;
    padding: 16px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 10px;
}

.kuka-wizard-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    opacity: 0.4;
    transition: all 0.3s;
}

.kuka-wizard-step.active {
    opacity: 1;
}

.kuka-wizard-step.completed {
    opacity: 0.8;
}

.kuka-wizard-step .step-num {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 13px;
    transition: all 0.3s;
}

.kuka-wizard-step.active .step-num {
    background: var(--primary-color, #10b981);
    border-color: var(--primary-color, #10b981);
    color: #fff;
}

.kuka-wizard-step.completed .step-num {
    background: var(--primary-color, #10b981);
    border-color: var(--primary-color, #10b981);
    color: #fff;
}

.kuka-wizard-step.completed .step-num::after {
    content: '\2713';
}

.kuka-wizard-step .step-label {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.6);
    text-align: center;
    max-width: 60px;
}

.kuka-wizard-step.active .step-label {
    color: #fff;
}

.kuka-wizard-line {
    width: 30px;
    height: 2px;
    background: rgba(255, 255, 255, 0.2);
    margin: 0 4px;
    margin-bottom: 20px;
}

.kuka-wizard-panel {
    display: none;
}

.kuka-wizard-panel.active {
    display: block;
}

.kuka-wizard-desc {
    color: rgba(255, 255, 255, 0.6);
    font-size: 13px;
    margin-bottom: 20px;
}

.kuka-prereq-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
}

.kuka-prereq-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s;
}

.kuka-prereq-item:hover {
    background: rgba(0, 0, 0, 0.3);
}

.kuka-prereq-item input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    cursor: pointer;
}

.kuka-prereq-item span {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.4;
}

.kuka-wizard-info {
    background: rgba(99, 102, 241, 0.1);
    border: 1px solid rgba(99, 102, 241, 0.3);
    border-radius: 8px;
    padding: 16px;
    margin-top: 16px;
}

.kuka-wizard-info-title {
    font-weight: 600;
    font-size: 14px;
    color: #a5b4fc;
    margin-bottom: 8px;
}

.kuka-wizard-info p {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 12px;
    line-height: 1.5;
}

.kuka-wizard-link {
    display: inline-block;
    color: #a5b4fc;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
}

.kuka-wizard-link:hover {
    text-decoration: underline;
}

.kuka-file-instructions {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.kuka-file-item {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    padding: 16px;
}

.kuka-file-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.kuka-file-name {
    font-weight: 600;
    font-size: 14px;
    color: #fff;
}

.kuka-file-dest {
    font-size: 11px;
    color: #f59e0b;
    font-family: 'Monaco', 'Menlo', monospace;
}

.kuka-file-item p {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.4;
    margin: 0;
}

.kuka-file-item code {
    background: rgba(0, 0, 0, 0.3);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: 'Monaco', 'Menlo', monospace;
    font-size: 11px;
    color: #f59e0b;
}

.kuka-wizard-tip {
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: 8px;
    padding: 12px 16px;
    margin-top: 16px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.4;
}

.kuka-wizard-tip strong {
    color: #fcd34d;
}

.kuka-substeps {
    margin-top: 12px;
    padding: 12px 16px;
    background: rgba(99, 102, 241, 0.1);
    border: 1px solid rgba(99, 102, 241, 0.2);
    border-radius: 6px;
}

.kuka-substeps p {
    margin: 0 0 8px 0;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
}

.kuka-substeps ol {
    margin: 0;
    padding-left: 20px;
}

.kuka-substeps li {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 6px;
    line-height: 1.4;
}

.kuka-substeps li:last-child {
    margin-bottom: 0;
}

.kuka-substeps code {
    background: rgba(0, 0, 0, 0.3);
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 11px;
}

.kuka-download-grid {
    display: flex;
    gap: 10px;
    margin: 12px 0;
    flex-wrap: wrap;
}

.kuka-download-grid .settings-action-btn {
    flex: 1;
    min-width: 140px;
    text-align: center;
    text-decoration: none;
}

.kuka-wizard-conn-test {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.kuka-wizard-conn-status {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
}

.kuka-wizard-conn-status.connected {
    color: #10b981;
}

.kuka-wizard-conn-status.error {
    color: #ef4444;
}

.kuka-wizard-conn-status.testing {
    color: #f59e0b;
}

.kuka-wizard-vars-section {
    margin-top: 20px;
}

.kuka-wizard-vars-section > label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 8px;
}

.kuka-wizard-variables {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 200px;
    overflow-y: auto;
}

.kuka-wizard-var-row {
    display: flex;
    gap: 8px;
}

.kuka-wizard-var-input {
    flex: 1;
    padding: 10px 12px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    color: #fff;
    font-size: 13px;
    font-family: 'Monaco', 'Menlo', monospace;
}

.kuka-wizard-var-input:focus {
    outline: none;
    border-color: var(--primary-color, #10b981);
}

.kuka-wizard-var-remove {
    width: 32px;
    height: 32px;
    background: rgba(239, 68, 68, 0.2);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 6px;
    color: #fca5a5;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
}

.kuka-wizard-var-remove:hover {
    background: rgba(239, 68, 68, 0.3);
}

.kuka-wizard-summary {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    padding: 16px;
}

.kuka-wizard-summary-section {
    margin-bottom: 16px;
}

.kuka-wizard-summary-section:last-child {
    margin-bottom: 0;
}

.kuka-wizard-summary-title {
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.kuka-wizard-summary-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    font-size: 13px;
}

.kuka-wizard-summary-row span:first-child {
    color: rgba(255, 255, 255, 0.6);
}

.kuka-wizard-summary-row span:last-child {
    color: #10b981;
    font-weight: 500;
}

.kuka-wizard-summary-vars {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.kuka-wizard-summary-var {
    background: rgba(0, 0, 0, 0.3);
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-family: 'Monaco', 'Menlo', monospace;
    color: #f59e0b;
}

.kuka-wizard-final-steps {
    margin-top: 20px;
    padding: 16px;
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 8px;
}

.kuka-wizard-checklist-title {
    font-size: 13px;
    font-weight: 600;
    color: #10b981;
    margin-bottom: 12px;
}

.kuka-wizard-checklist {
    margin: 0;
    padding-left: 20px;
}

.kuka-wizard-checklist li {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 6px;
    line-height: 1.4;
}

.kuka-wizard-nav {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.kuka-wizard-nav-spacer {
    flex: 1;
}

.kuka-wizard-status {
    font-size: 13px;
    padding: 8px 12px;
    border-radius: 6px;
    display: none;
}

.kuka-wizard-status.error {
    display: block;
    background: rgba(239, 68, 68, 0.2);
    color: #fca5a5;
}

.kuka-wizard-status.success {
    display: block;
    background: rgba(16, 185, 129, 0.2);
    color: #6ee7b7;
}

/* =====================================================
   KUKA Quick-Edit Mode Styles
   ===================================================== */

.kuka-quickedit-container {
    max-width: 600px;
}

.kuka-quick-status {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    padding: 12px 16px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    margin-bottom: 16px;
}

.kuka-quick-status.connected {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

.kuka-quick-status.disconnected {
    color: rgba(255, 255, 255, 0.5);
}

.kuka-quick-conn-fields {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
}

.kuka-quick-conn-fields .settings-field.inline {
    flex: 1;
    margin-bottom: 0;
}

.kuka-quick-conn-fields .settings-field.inline.small {
    flex: 0 0 100px;
}

.kuka-quick-conn-fields .settings-field.inline label {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 4px;
}

.kuka-quick-conn-fields .settings-field.inline input {
    padding: 8px 10px;
    font-size: 13px;
}

.kuka-quick-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.kuka-quick-enabled {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
    margin-right: 8px;
}

.kuka-quick-enabled input {
    width: 16px;
    height: 16px;
}

.kuka-quick-variables {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
    min-height: 40px;
}

.kuka-quick-var-row {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(0, 0, 0, 0.3);
    padding: 8px 12px;
    border-radius: 6px;
}

.kuka-quick-var-label {
    width: 100px;
    padding: 4px 8px;
    font-size: 12px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.05);
    color: #ffffff;
}

.kuka-quick-var-label:focus {
    border-color: #f59e0b;
    outline: none;
}

.kuka-quick-var-name {
    flex: 1;
    font-size: 11px;
    font-family: 'Monaco', 'Menlo', monospace;
    color: rgba(245, 158, 11, 0.8);
}

.kuka-quick-var-remove {
    width: 18px;
    height: 18px;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.4);
    font-size: 12px;
    cursor: pointer;
    border-radius: 50%;
    transition: all 0.2s;
}

.kuka-quick-var-remove:hover {
    background: rgba(239, 68, 68, 0.3);
    color: #fca5a5;
}

.kuka-no-vars {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.4);
    padding: 12px;
    text-align: center;
}

.kuka-quick-add-var {
    display: flex;
    gap: 8px;
}

.kuka-quick-add-var input {
    flex: 1;
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    color: #fff;
    font-size: 13px;
}

.kuka-quick-add-var input:focus {
    outline: none;
    border-color: var(--primary-color, #10b981);
}

.kuka-manual-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.kuka-manual-row input {
    flex: 1;
    min-width: 120px;
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    color: #fff;
    font-size: 13px;
}

.kuka-manual-row input:focus {
    outline: none;
    border-color: var(--primary-color, #10b981);
}

.kuka-tools-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.kuka-tools-grid .settings-action-btn,
.kuka-tools-grid a.settings-action-btn {
    text-align: center;
    text-decoration: none;
    font-size: 12px;
    padding: 10px 12px;
}

/* Small action button variant */
.settings-action-btn.small {
    padding: 6px 12px;
    font-size: 12px;
}

.settings-action-btn.large {
    padding: 16px 32px;
    font-size: 16px;
    font-weight: 600;
}

.settings-field-hint {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.4);
    margin-top: 4px;
}

/* =====================================================
   KUKA SMB File Transfer Styles
   ===================================================== */

/* Collapsible Card Styles */
.settings-card.collapsible .settings-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    margin: -16px -20px 12px -20px;
    padding: 16px 20px;
    border-radius: 12px 12px 0 0;
    transition: background 0.15s ease;
}

.settings-card.collapsible .settings-card-header:hover {
    background: rgba(255, 255, 255, 0.03);
}

.settings-card.collapsible .settings-card-header .settings-card-title {
    margin: 0;
}

.collapse-icon {
    font-size: 20px;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.5);
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: background 0.15s ease;
}

.settings-card.collapsible .settings-card-header:hover .collapse-icon {
    background: rgba(255, 255, 255, 0.1);
}

.collapsible-content {
    margin-top: 8px;
}

.smb-status {
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
}

.smb-status.disconnected {
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.6);
}

.smb-status.connected {
    background: rgba(76, 175, 80, 0.15);
    color: #81c784;
}

.smb-status.error {
    background: rgba(244, 67, 54, 0.15);
    color: #e57373;
}

.smb-status .status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
}

.smb-status .status-dot.connected {
    background: #4caf50;
    box-shadow: 0 0 8px rgba(76, 175, 80, 0.5);
}

.smb-status .status-dot.error {
    background: #f44336;
}

.settings-divider {
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin: 20px 0;
}

.settings-card-subtitle {
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    margin: 0 0 12px 0;
}

.settings-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.settings-actions-row {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    flex-wrap: wrap;
}

.field-hint {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.4);
    margin-top: 4px;
}

.upload-progress {
    margin-top: 12px;
}

.upload-progress .progress-bar {
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    overflow: hidden;
}

.upload-progress .progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #4fc3f7, #29b6f6);
    border-radius: 3px;
    transition: width 0.3s ease;
    width: 0%;
}

.upload-status {
    margin-top: 8px;
    font-size: 12px;
    min-height: 18px;
}

.upload-status.success {
    color: #81c784;
}

.upload-status.error {
    color: #e57373;
}

.smb-browser-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
}

.smb-browser-header span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.smb-file-list {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    max-height: 250px;
    overflow-y: auto;
}

.smb-file-item {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    cursor: pointer;
    transition: background 0.15s ease;
    gap: 8px;
}

.smb-file-item:last-child {
    border-bottom: none;
}

.smb-file-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

.smb-file-item.parent {
    color: #4fc3f7;
}

.smb-file-item .file-icon {
    font-family: monospace;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.4);
    min-width: 24px;
}

.smb-file-item .file-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
}

.smb-file-item .smb-delete-btn {
    opacity: 0;
    padding: 4px 8px;
    font-size: 11px;
    background: rgba(244, 67, 54, 0.2);
    color: #e57373;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: opacity 0.15s ease, background 0.15s ease;
}

.smb-file-item:hover .smb-delete-btn {
    opacity: 1;
}

.smb-file-item .smb-delete-btn:hover {
    background: rgba(244, 67, 54, 0.4);
}

.smb-empty,
.smb-loading,
.smb-error {
    padding: 20px;
    text-align: center;
    color: rgba(255, 255, 255, 0.4);
    font-size: 13px;
}

.smb-error {
    color: #e57373;
}

/* =====================================================
   Timelapse Modal Styles
   ===================================================== */

.timelapse-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    backdrop-filter: blur(4px);
}

.timelapse-modal {
    background: var(--panel-bg, #1a1a2e);
    border: 1px solid var(--border-color, rgba(255,255,255,0.1));
    border-radius: 12px;
    width: 90%;
    max-width: 400px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.timelapse-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color, rgba(255,255,255,0.1));
}

.timelapse-modal-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #fff;
}

.timelapse-modal-close {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    font-size: 24px;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    transition: color 0.2s;
}

.timelapse-modal-close:hover {
    color: #fff;
}

.timelapse-modal-body {
    padding: 20px;
}

.timelapse-setting {
    margin-bottom: 20px;
}

.timelapse-setting label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 8px;
}

.timelapse-setting-row {
    display: flex;
    gap: 8px;
}

.timelapse-setting input[type="number"],
.timelapse-setting select {
    flex: 1;
    padding: 10px 12px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--border-color, rgba(255,255,255,0.1));
    border-radius: 6px;
    color: #fff;
    font-size: 14px;
}

.timelapse-setting input[type="number"]:focus,
.timelapse-setting select:focus {
    outline: none;
    border-color: var(--primary-color, #6366f1);
}

.timelapse-hint {
    display: block;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.4);
    margin-top: 6px;
}

.timelapse-preview {
    background: rgba(99, 102, 241, 0.1);
    border: 1px solid rgba(99, 102, 241, 0.3);
    border-radius: 8px;
    padding: 16px;
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}

.timelapse-preview span {
    font-size: 14px;
    font-weight: 500;
    color: #a5b4fc;
}

.timelapse-modal-footer {
    display: flex;
    gap: 12px;
    padding: 16px 20px;
    border-top: 1px solid var(--border-color, rgba(255,255,255,0.1));
}

.timelapse-btn-cancel {
    flex: 1;
    padding: 12px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid var(--border-color, rgba(255,255,255,0.1));
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.timelapse-btn-cancel:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
}

.timelapse-btn-start {
    flex: 1;
    padding: 12px;
    background: var(--primary-color, #6366f1);
    border: none;
    border-radius: 6px;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.timelapse-btn-start:hover {
    background: #4f46e5;
}

/* Timelapse progress indicator on camera tile */
.camera-timelapse-indicator {
    position: absolute;
    top: 44px;
    left: 8px;
    right: 8px;
    background: rgba(99, 102, 241, 0.9);
    padding: 8px 12px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 500;
    color: #fff;
    z-index: 10;
}

.camera-timelapse-indicator .timelapse-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.camera-timelapse-indicator .timelapse-remaining {
    margin-left: auto;
    opacity: 0.8;
}

.timelapse-progress-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 0 0 6px 6px;
    overflow: hidden;
}

.timelapse-progress {
    height: 100%;
    background: #22c55e;
    transition: width 1s linear;
}

/* Recording type badges */
.recording-type-badge {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-right: 8px;
}

.recording-type-badge.timelapse {
    background: rgba(99, 102, 241, 0.2);
    color: #a5b4fc;
    border: 1px solid rgba(99, 102, 241, 0.3);
}

.recording-type-badge.video {
    background: rgba(34, 197, 94, 0.2);
    color: #86efac;
    border: 1px solid rgba(34, 197, 94, 0.3);
}

/* ============================================
   KUKA Control Panel Styles
   ============================================ */

/* KUKA Control Nav Button */
.kuka-control-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: rgba(249, 115, 22, 0.15);
    border: 1px solid rgba(249, 115, 22, 0.3);
    border-radius: 8px;
    color: #fb923c;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.kuka-control-btn:hover {
    background: rgba(249, 115, 22, 0.25);
    border-color: rgba(249, 115, 22, 0.5);
}

.kuka-control-btn svg {
    width: 16px;
    height: 16px;
}

/* File Transfer Nav Button */
.file-transfer-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: rgba(34, 197, 94, 0.15);
    border: 1px solid rgba(34, 197, 94, 0.3);
    border-radius: 8px;
    color: #4ade80;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.file-transfer-btn:hover {
    background: rgba(34, 197, 94, 0.25);
    border-color: rgba(34, 197, 94, 0.5);
}

.file-transfer-btn svg {
    width: 16px;
    height: 16px;
}

/* KUKA Control Popup */
.kuka-control-popup {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.kuka-control-popup.active {
    opacity: 1;
    visibility: visible;
}

.kuka-control-popup-content {
    background: var(--panel-bg, #1a1a2e);
    border-radius: 16px;
    width: 90%;
    max-width: 600px;
    max-height: 80vh;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    transform: scale(0.9);
    transition: transform 0.3s ease;
}

.kuka-control-popup.active .kuka-control-popup-content {
    transform: scale(1);
}

.kuka-control-popup-header {
    display: flex;
    align-items: center;
    padding: 16px 20px;
    background: rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.kuka-control-popup-header h2 {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
    color: #fff;
}

.kuka-control-status {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: 16px;
    padding: 4px 10px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 12px;
    font-size: 12px;
}

.kuka-control-popup-header .popup-close-btn {
    margin-left: auto;
}

.kuka-control-body {
    padding: 20px;
    max-height: calc(80vh - 70px);
    overflow-y: auto;
}

/* Control Groups */
.kuka-control-group {
    margin-bottom: 20px;
}

.kuka-control-group:last-child {
    margin-bottom: 0;
}

.kuka-control-group-header {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.kuka-control-items {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.kuka-control-item {
    flex: 0 0 auto;
    min-width: 120px;
}

/* Control Items */
.kuka-control-item {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 12px;
    transition: all 0.2s ease;
}

.kuka-control-item:hover {
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(0, 0, 0, 0.3);
}

/* Button Control */
.kuka-control-button .kuka-ctrl-btn {
    width: 100%;
    padding: 14px 16px;
    background: #3b82f6;
    border: none;
    border-radius: 8px;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.kuka-control-button .kuka-ctrl-btn:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
}

.kuka-control-button .kuka-ctrl-btn:active {
    transform: translateY(0);
}

/* Button Width Variants */
.kuka-control-button.kuka-btn-half {
    flex: 0 0 calc(50% - 6px);
}

.kuka-control-button.kuka-btn-full {
    flex: 0 0 100%;
}

/* Slider Width Variants */
.kuka-control-slider.kuka-slider-half {
    flex: 0 0 calc(50% - 6px);
}

.kuka-control-slider.kuka-slider-full {
    flex: 0 0 100%;
}

/* Button with Icon */
.kuka-control-button .kuka-ctrl-btn svg {
    width: 16px;
    height: 16px;
    margin-right: 8px;
    flex-shrink: 0;
}

.kuka-control-button .kuka-ctrl-btn span {
    flex: 1;
}

.kuka-control-button .kuka-ctrl-btn:has(svg) {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Slider Control */
.kuka-control-slider .kuka-ctrl-label {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 8px;
}

.kuka-ctrl-slider-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.kuka-ctrl-slider-input {
    flex: 1;
    -webkit-appearance: none;
    height: 6px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 3px;
    cursor: pointer;
}

.kuka-ctrl-slider-input::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    background: #3b82f6;
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.kuka-ctrl-slider-input::-webkit-slider-thumb:hover {
    transform: scale(1.1);
}

.kuka-ctrl-slider-value {
    min-width: 40px;
    text-align: right;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
}

.kuka-ctrl-slider-value-input {
    width: 60px;
    padding: 6px 8px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    -moz-appearance: textfield;
}

.kuka-ctrl-slider-value-input::-webkit-outer-spin-button,
.kuka-ctrl-slider-value-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.kuka-ctrl-slider-value-input:focus {
    outline: none;
    border-color: rgba(79, 195, 247, 0.5);
    background: rgba(255, 255, 255, 0.15);
}

/* Display Control */
.kuka-control-display .kuka-ctrl-label {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 4px;
}

.kuka-ctrl-display-value {
    font-size: 24px;
    font-weight: 700;
    color: #10b981;
}

.kuka-ctrl-display-value.disconnected {
    color: rgba(255, 255, 255, 0.3);
}

.kuka-ctrl-unit {
    font-size: 14px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.5);
    margin-left: 4px;
}

/* Adjuster Control (3D printer Z offset style) */
.kuka-control-adjuster {
    padding: 12px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    min-width: 180px;
}

.kuka-control-adjuster.kuka-adjuster-half {
    flex: 0 0 calc(50% - 6px);
}

.kuka-control-adjuster.kuka-adjuster-full {
    flex: 0 0 100%;
}

.kuka-adjuster-label {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 10px;
    text-align: center;
}

.kuka-adjuster-control-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.kuka-adjuster-btn {
    width: 48px;
    height: 48px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.kuka-adjuster-minus {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

.kuka-adjuster-plus {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
}

.kuka-adjuster-btn:hover {
    transform: translateY(-2px);
}

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

.kuka-adjuster-btn-icon {
    font-size: 24px;
    font-weight: 700;
    color: #fff;
}

.kuka-adjuster-display {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 80px;
    padding: 8px 16px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
}

.kuka-adjuster-offset {
    font-size: 22px;
    font-weight: 700;
    color: #60a5fa;
    font-family: 'JetBrains Mono', 'Consolas', monospace;
}

.kuka-adjuster-unit {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 2px;
}

.kuka-adjuster-labels-row {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    padding: 0 4px;
}

.kuka-adjuster-neg-label,
.kuka-adjuster-pos-label {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.4);
    max-width: 70px;
    text-align: center;
}

.kuka-adjuster-neg-label {
    color: rgba(239, 68, 68, 0.7);
}

.kuka-adjuster-pos-label {
    color: rgba(34, 197, 94, 0.7);
}

/* Adjuster Designer Preview Styles */
.kuka-designer-card-adjuster {
    grid-template-columns: 200px 1fr auto;
}

.kuka-adjuster-preview {
    flex-direction: column;
}

.kuka-adjuster-preview-demo {
    display: flex;
    align-items: center;
    gap: 8px;
}

.kuka-adjuster-btn-preview {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 6px;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    cursor: default;
}

.kuka-adjuster-btn-preview.minus {
    background: linear-gradient(135deg, #ef4444, #dc2626);
}

.kuka-adjuster-btn-preview.plus {
    background: linear-gradient(135deg, #22c55e, #16a34a);
}

.kuka-adjuster-display-preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 6px 12px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 6px;
}

.kuka-adjuster-offset-preview {
    font-size: 14px;
    font-weight: 600;
    color: #60a5fa;
}

.kuka-adjuster-unit-preview {
    font-size: 9px;
    color: rgba(255, 255, 255, 0.4);
}

.kuka-adjuster-labels-preview {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-top: 6px;
}

.kuka-adjuster-label-neg,
.kuka-adjuster-label-pos {
    font-size: 8px;
    color: rgba(255, 255, 255, 0.4);
    max-width: 60px;
}

.kuka-adjuster-label-neg {
    color: rgba(239, 68, 68, 0.6);
}

.kuka-adjuster-label-pos {
    color: rgba(34, 197, 94, 0.6);
    text-align: right;
}

/* Empty State */
.kuka-control-empty {
    text-align: center;
    padding: 40px 20px;
    color: rgba(255, 255, 255, 0.5);
}

.kuka-control-empty p {
    margin: 0 0 8px 0;
}

.kuka-control-empty .hint {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.3);
}

/* ============================================
   KUKA Control Designer Styles
   ============================================ */

.settings-card-desc {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 16px;
}

.kuka-control-designer {
    margin-bottom: 16px;
}

.kuka-designer-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}

.kuka-designer-empty {
    padding: 20px;
    text-align: center;
    color: rgba(255, 255, 255, 0.4);
    font-size: 13px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
}

.kuka-designer-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
}

.kuka-designer-icon {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
}

.kuka-designer-icon.type-button {
    background: rgba(59, 130, 246, 0.2);
    color: #60a5fa;
}

.kuka-designer-icon.type-slider {
    background: rgba(168, 85, 247, 0.2);
    color: #c084fc;
}

.kuka-designer-icon.type-display {
    background: rgba(16, 185, 129, 0.2);
    color: #34d399;
}

.kuka-designer-label {
    font-weight: 500;
    color: #fff;
    flex: 1;
}

.kuka-designer-var {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.4);
    font-family: monospace;
}

.kuka-designer-group {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.3);
    padding: 2px 8px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
}

.kuka-designer-width {
    font-size: 10px;
    color: #c084fc;
    padding: 2px 6px;
    background: rgba(168, 85, 247, 0.15);
    border-radius: 4px;
}

.kuka-designer-edit {
    padding: 4px 10px;
    background: rgba(59, 130, 246, 0.2);
    border: none;
    border-radius: 4px;
    color: #60a5fa;
    font-size: 12px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.kuka-designer-edit:hover {
    background: rgba(59, 130, 246, 0.3);
}

.kuka-designer-delete {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(239, 68, 68, 0.2);
    border: none;
    border-radius: 4px;
    color: #f87171;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.kuka-designer-delete:hover {
    background: rgba(239, 68, 68, 0.3);
}

.kuka-designer-add-btns {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* KUKA Designer Card Layout (for buttons) */
.kuka-designer-card {
    display: grid;
    grid-template-columns: 140px 1fr auto;
    gap: 16px;
    align-items: center;
    padding: 16px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    margin-bottom: 8px;
}

.kuka-designer-card-preview {
    display: flex;
    align-items: center;
    justify-content: center;
}

.kuka-designer-btn-preview {
    width: 100%;
    padding: 12px 16px;
    border: none;
    border-radius: 8px;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: default;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.kuka-designer-btn-preview.has-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.kuka-designer-btn-preview svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.kuka-designer-card-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.kuka-designer-card-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.kuka-designer-card-label {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
    min-width: 55px;
}

.kuka-designer-card-value {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.85);
    font-family: monospace;
}

.kuka-designer-card-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.kuka-designer-card-actions .kuka-designer-edit,
.kuka-designer-card-actions .kuka-designer-delete {
    width: 60px;
}

/* KUKA Control Editor Modal */
.kuka-control-editor-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 11000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
}

.kuka-control-editor-modal.active {
    opacity: 1;
    visibility: visible;
}

.kuka-control-editor-content {
    background: var(--panel-bg, #1a1a2e);
    border-radius: 12px;
    width: 90%;
    max-width: 520px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    overflow: hidden;
}

.kuka-control-editor-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.kuka-editor-title {
    font-size: 16px;
    font-weight: 600;
    margin: 0;
}

.kuka-control-editor-body {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
}

.kuka-ctrl-type-fields {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.kuka-ctrl-field-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.kuka-control-editor-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 16px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* ===========================================
   KUKA File Upload Section in Control Panel
   =========================================== */

.kuka-file-upload-section {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.kuka-file-upload-section .kuka-control-group-header {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.5);
}

.kuka-file-upload-section .kuka-control-group-header svg {
    opacity: 0.7;
}

.kuka-upload-button-container {
    margin-top: 12px;
}

.kuka-upload-files-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 14px 20px;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    border: none;
    border-radius: 10px;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);
}

.kuka-upload-files-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(99, 102, 241, 0.4);
}

.kuka-upload-files-btn:active {
    transform: translateY(0);
}

.kuka-upload-files-btn svg {
    width: 18px;
    height: 18px;
}

/* ===========================================
   KUKA File Manager Modal
   =========================================== */

.kuka-file-manager-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    z-index: 12000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.kuka-file-manager-modal.active {
    opacity: 1;
    visibility: visible;
}

.kuka-file-manager-content {
    background: linear-gradient(180deg, #1e1e2e 0%, #181825 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    width: 90%;
    max-width: 700px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.6);
    transform: scale(0.95);
    transition: transform 0.3s ease;
}

.kuka-file-manager-modal.active .kuka-file-manager-content {
    transform: scale(1);
}

.kuka-file-manager-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    background: rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px 16px 0 0;
}

.kuka-file-manager-header h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 17px;
    font-weight: 600;
    margin: 0;
    color: #fff;
}

.kuka-file-manager-header h3 svg {
    color: #8b5cf6;
}

.kuka-file-manager-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 20px 24px;
}

/* Path Bar */
.kuka-fm-path-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    margin-bottom: 16px;
}

.kuka-fm-path-label {
    font-size: 12px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.kuka-fm-current-path {
    flex: 1;
    font-size: 13px;
    font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
    color: #a5b4fc;
}

.kuka-fm-nav-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: rgba(139, 92, 246, 0.15);
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: 6px;
    color: #a5b4fc;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-left: auto;
}

.kuka-fm-nav-btn:hover {
    background: rgba(139, 92, 246, 0.25);
    border-color: rgba(139, 92, 246, 0.5);
    color: #c4b5fd;
}

.kuka-fm-refresh-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    transition: all 0.2s ease;
}

.kuka-fm-refresh-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

/* Selection Bar */
.kuka-fm-selection-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.kuka-fm-select-btn {
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 11px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.kuka-fm-select-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.kuka-fm-delete-selected-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 4px;
    color: #f87171;
    font-size: 11px;
    cursor: pointer;
    transition: all 0.15s ease;
    margin-left: auto;
}

.kuka-fm-delete-selected-btn:hover {
    background: rgba(239, 68, 68, 0.25);
    border-color: rgba(239, 68, 68, 0.5);
    color: #fca5a5;
}

.kuka-fm-delete-selected-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* New Folder Button */
.kuka-fm-new-folder-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: rgba(34, 197, 94, 0.15);
    border: 1px solid rgba(34, 197, 94, 0.3);
    border-radius: 4px;
    color: #4ade80;
    font-size: 11px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.kuka-fm-new-folder-btn:hover {
    background: rgba(34, 197, 94, 0.25);
    border-color: rgba(34, 197, 94, 0.5);
}

/* Action Buttons Container */
.kuka-fm-action-buttons {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

/* Cut Button */
.kuka-fm-cut-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: rgba(251, 191, 36, 0.15);
    border: 1px solid rgba(251, 191, 36, 0.3);
    border-radius: 4px;
    color: #fbbf24;
    font-size: 11px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.kuka-fm-cut-btn:hover {
    background: rgba(251, 191, 36, 0.25);
    border-color: rgba(251, 191, 36, 0.5);
}

/* Paste Button */
.kuka-fm-paste-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: rgba(59, 130, 246, 0.15);
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: 4px;
    color: #60a5fa;
    font-size: 11px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.kuka-fm-paste-btn:hover {
    background: rgba(59, 130, 246, 0.25);
    border-color: rgba(59, 130, 246, 0.5);
}

.kuka-fm-paste-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Cancel Button */
.kuka-fm-cancel-btn {
    padding: 6px 10px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    color: rgba(255, 255, 255, 0.5);
    font-size: 11px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.kuka-fm-cancel-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.8);
}

/* Cut item visual style */
.kuka-fm-item.kuka-fm-cut {
    opacity: 0.5;
    background: rgba(251, 191, 36, 0.05);
}

/* File Checkbox */
.kuka-fm-checkbox {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: #8b5cf6;
    flex-shrink: 0;
}

/* File List */
.kuka-fm-file-list {
    flex: 1;
    overflow-y: auto;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    min-height: 200px;
    max-height: 300px;
}

.kuka-fm-loading,
.kuka-fm-empty,
.kuka-fm-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    height: 100%;
    min-height: 150px;
    color: rgba(255, 255, 255, 0.4);
    font-size: 13px;
}

.kuka-fm-error {
    color: #f87171;
}

.kuka-fm-error svg {
    opacity: 0.6;
}

.kuka-fm-spinner {
    width: 24px;
    height: 24px;
    border: 2px solid rgba(139, 92, 246, 0.2);
    border-top-color: #8b5cf6;
    border-radius: 50%;
    animation: kuka-fm-spin 0.8s linear infinite;
}

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

/* File Items */
.kuka-fm-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    transition: background 0.15s ease;
}

.kuka-fm-item:last-child {
    border-bottom: none;
}

.kuka-fm-item:hover {
    background: rgba(255, 255, 255, 0.04);
}

.kuka-fm-item.kuka-fm-parent {
    cursor: pointer;
    color: rgba(255, 255, 255, 0.5);
}

.kuka-fm-item.kuka-fm-parent:hover {
    color: #fff;
    background: rgba(139, 92, 246, 0.1);
}

.kuka-fm-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: rgba(255, 255, 255, 0.4);
}

.kuka-fm-folder .kuka-fm-folder-icon {
    color: #fbbf24;
}

.kuka-fm-folder .kuka-fm-name {
    cursor: pointer;
}

.kuka-fm-folder .kuka-fm-name:hover {
    color: #a5b4fc;
}

.kuka-fm-name {
    flex: 1;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.85);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kuka-fm-delete-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.3);
    cursor: pointer;
    opacity: 0;
    transition: all 0.15s ease;
}

.kuka-fm-item:hover .kuka-fm-delete-btn {
    opacity: 1;
}

.kuka-fm-delete-btn:hover {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
}

/* Upload Section */
.kuka-upload-section {
    margin-top: 20px;
    margin-bottom: 20px;
    padding: 16px;
    background: rgba(139, 92, 246, 0.05);
    border: 1px solid rgba(139, 92, 246, 0.15);
    border-radius: 10px;
    flex-shrink: 0;
}

.kuka-upload-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #a5b4fc;
    margin-bottom: 14px;
}

/* Drop Zone */
.kuka-upload-dropzone {
    position: relative;
    border: 2px dashed rgba(139, 92, 246, 0.4);
    border-radius: 10px;
    padding: 32px 20px;
    background: rgba(139, 92, 246, 0.03);
    cursor: pointer;
    transition: all 0.2s ease;
}

.kuka-upload-dropzone:hover {
    border-color: rgba(139, 92, 246, 0.6);
    background: rgba(139, 92, 246, 0.08);
}

.kuka-upload-dropzone.drag-over {
    border-color: #8b5cf6;
    background: rgba(139, 92, 246, 0.15);
    border-style: solid;
}

.kuka-upload-dropzone.uploading {
    pointer-events: none;
    opacity: 0.6;
}

.kuka-upload-dropzone-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    pointer-events: none;
}

.kuka-upload-icon {
    width: 40px;
    height: 40px;
    color: rgba(139, 92, 246, 0.7);
    transition: all 0.2s ease;
}

.kuka-upload-dropzone:hover .kuka-upload-icon,
.kuka-upload-dropzone.drag-over .kuka-upload-icon {
    color: #a78bfa;
    transform: translateY(-2px);
}

.kuka-upload-text {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
    text-align: center;
}

.kuka-upload-subtext {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.4);
    text-align: center;
}

.kuka-upload-dropzone:hover .kuka-upload-text,
.kuka-upload-dropzone.drag-over .kuka-upload-text {
    color: rgba(255, 255, 255, 0.8);
}

/* Upload Buttons */
.kuka-upload-buttons {
    display: flex;
    gap: 10px;
    margin-top: 12px;
}

.kuka-upload-btn {
    flex: 1;
    padding: 10px 16px;
    border: 1px solid rgba(139, 92, 246, 0.4);
    border-radius: 6px;
    background: rgba(139, 92, 246, 0.1);
    color: rgba(255, 255, 255, 0.8);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.kuka-upload-btn:hover {
    background: rgba(139, 92, 246, 0.2);
    border-color: rgba(139, 92, 246, 0.6);
    color: #fff;
}

.kuka-upload-btn.folder-btn {
    border-color: rgba(139, 92, 246, 0.4);
}

.kuka-upload-btn.file-btn {
    border-color: rgba(34, 197, 94, 0.4);
    background: rgba(34, 197, 94, 0.1);
}

.kuka-upload-btn.file-btn:hover {
    background: rgba(34, 197, 94, 0.2);
    border-color: rgba(34, 197, 94, 0.6);
}

/* Upload Progress */
.kuka-upload-progress {
    margin-top: 14px;
}

.kuka-upload-progress-bar {
    height: 6px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 8px;
}

.kuka-upload-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #8b5cf6, #a78bfa);
    border-radius: 3px;
    width: 0%;
    transition: width 0.3s ease;
}

.kuka-upload-progress-text {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
}

/* Upload Status */
.kuka-upload-status {
    margin-top: 10px;
    font-size: 13px;
    font-weight: 500;
}

.kuka-upload-status.success {
    color: #10b981;
}

.kuka-upload-status.warning {
    color: #f59e0b;
}

.kuka-upload-status.error {
    color: #ef4444;
}

/* Upload Instructions Popup */
.kuka-instructions-popup {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.kuka-instructions-popup.active {
    opacity: 1;
}

.kuka-instructions-content {
    background: linear-gradient(135deg, #1e1b2e 0%, #13111c 100%);
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: 16px;
    padding: 24px;
    max-width: 420px;
    width: 90%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    transform: scale(0.9);
    transition: transform 0.2s ease;
}

.kuka-instructions-popup.active .kuka-instructions-content {
    transform: scale(1);
}

.kuka-instructions-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.kuka-instructions-status {
    font-size: 15px;
    font-weight: 600;
}

.kuka-instructions-status.success {
    color: #10b981;
}

.kuka-instructions-status.warning {
    color: #f59e0b;
}

.kuka-instructions-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.05);
    border: none;
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: all 0.15s ease;
}

.kuka-instructions-close:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.kuka-instructions-body h4 {
    margin: 0 0 16px 0;
    font-size: 14px;
    font-weight: 600;
    color: #a5b4fc;
}

.kuka-instructions-body ol {
    margin: 0;
    padding-left: 20px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 14px;
    line-height: 1.8;
}

.kuka-instructions-body li {
    margin-bottom: 8px;
}

.kuka-instructions-body li strong {
    color: #fff;
}

.kuka-instructions-ok {
    display: block;
    width: 100%;
    margin-top: 24px;
    padding: 14px;
    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
    border: none;
    border-radius: 10px;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.kuka-instructions-ok:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(139, 92, 246, 0.4);
}

/* Dev Mode Styles */
.dev-mode-controls {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.dev-mode-open-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    font-size: 14px;
}

.dev-mode-close-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
}

.dev-mode-close-btn:hover {
    background: rgba(239, 68, 68, 0.3);
}

.dev-mode-popup-status {
    font-size: 12px;
    padding: 6px 12px;
    border-radius: 16px;
    font-weight: 500;
}

.dev-mode-popup-status.closed {
    background: rgba(107, 114, 128, 0.3);
    color: rgba(255, 255, 255, 0.5);
}

.dev-mode-popup-status.open {
    background: rgba(16, 185, 129, 0.2);
    color: #34d399;
}