:root {
            --bg-dark: #090d16;
            --panel-bg: #111827;
            --panel-border: #1f2937;
            --accent-blue: #0284c7;
            --accent-cyan: #06b6d4;
            --accent-green: #10b981;
            --accent-red: #ef4444;
            --text-light: #f9fafb;
            --text-dim: #9ca3af;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            user-select: none;
        }

        body, html {
            width: 100%;
            height: 100%;
            background-color: var(--bg-dark);
            font-family: 'Inter', sans-serif;
            color: var(--text-light);
            overflow: hidden;
        }

        #studio-app {
            display: flex;
            flex-direction: column;
            width: 100vw;
            height: 100vh;
        }

        /* Floating Auto-Hide Top Header Bar Wrapper */
        .studio-header-wrapper {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 99999;
            pointer-events: none;
            transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        }

        /* Mẩu menu nhỏ điều hướng ở mép trên màn hình để người dùng biết vị trí di chuột */
        .header-hover-handle-tab {
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            background: linear-gradient(180deg, #0f172a 0%, #1e293b 100%);
            border: 1px solid rgba(56, 189, 248, 0.55);
            border-top: none;
            border-radius: 0 0 10px 10px;
            padding: 4px 18px 6px 18px;
            color: #38bdf8;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.5px;
            cursor: pointer;
            pointer-events: auto;
            z-index: 100000;
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6), 0 0 14px rgba(56, 189, 248, 0.3);
            display: inline-flex;
            align-items: center;
            gap: 6px;
            transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
            user-select: none;
            white-space: nowrap;
        }

        .header-hover-handle-tab:hover {
            background: linear-gradient(180deg, #0284c7 0%, #0369a1 100%);
            border-color: #38bdf8;
            color: #ffffff;
            box-shadow: 0 6px 20px rgba(2, 132, 199, 0.6), 0 0 18px rgba(56, 189, 248, 0.5);
            transform: translateX(-50%) translateY(2px);
        }

        .header-hover-handle-tab .handle-arrow {
            font-size: 10px;
            transition: transform 0.2s ease;
        }

        .header-hover-handle-tab:hover .handle-arrow {
            transform: translateY(2px);
        }

        /* Thanh Header chính: mặc định trượt ẩn lên trên để nhường 100% không gian cho màn 1080 */
        .studio-header {
            height: 52px;
            background: rgba(15, 23, 42, 0.96);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border-bottom: 2px solid rgba(2, 132, 199, 0.85);
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.7);
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 16px;
            pointer-events: auto;
            position: relative;
            z-index: 99999;
            transform: translateY(-100%);
            transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
        }

        /* Khi di chuột vào wrapper/mẩu menu hoặc khi được mở / ghim: trượt header xuống */
        .studio-header-wrapper:hover .studio-header,
        .studio-header-wrapper.is-open .studio-header,
        .studio-header-wrapper.is-pinned .studio-header {
            transform: translateY(0) !important;
        }

        /* Khi header mở: ẩn mẩu menu nhỏ để không đè lên header */
        .studio-header-wrapper:hover .header-hover-handle-tab,
        .studio-header-wrapper.is-open .header-hover-handle-tab,
        .studio-header-wrapper.is-pinned .header-hover-handle-tab {
            opacity: 0;
            pointer-events: none;
            transform: translateX(-50%) translateY(-100%);
        }

        .studio-header-wrapper.is-pinned {
            pointer-events: auto;
        }

        body.runtime-mode #workspace-center {
            padding: 0 !important;
            overflow: hidden !important;
        }
        body.runtime-mode #scada-canvas-wrapper {
            box-shadow: none !important;
            border-radius: 0 !important;
        }

        .header-left {
            display: flex;
            align-items: center;
            gap: 12px;
        }
        .station-selector-box {
            display: flex;
            align-items: center;
            gap: 6px;
            background: #0f172a;
            border: 1px solid #0284c7;
            padding: 2px 8px;
            border-radius: 6px;
        }
        .station-selector-box span {
            font-size: 11px;
            color: #38bdf8;
            font-weight: 700;
        }
        .station-select {
            background: transparent;
            color: #f8fafc;
            border: none;
            font-size: 12px;
            font-weight: 600;
            cursor: pointer;
            outline: none;
        }
        .station-select option {
            background: #1e293b;
            color: #f8fafc;
        }
        .btn-station-export {
            background: linear-gradient(135deg, #0284c7, #0369a1);
            color: #ffffff !important;
            border: 1px solid #38bdf8 !important;
            padding: 5px 12px;
            border-radius: 6px;
            font-weight: 700;
            font-size: 12px;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            box-shadow: 0 2px 8px rgba(2, 132, 199, 0.4);
            transition: all 0.2s ease;
        }
        .btn-station-export:hover {
            background: linear-gradient(135deg, #0369a1, #0284c7);
            box-shadow: 0 4px 14px rgba(56, 189, 248, 0.5);
            transform: translateY(-1px);
        }
        /* Export Dropdown Menu */
        .export-dropdown-container {
            position: relative;
            display: inline-flex;
            align-items: center;
        }
        .export-dropdown-menu {
            position: absolute;
            top: calc(100% + 8px);
            right: 0;
            background: #0f172a;
            border: 1px solid #334155;
            border-radius: 8px;
            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.6), 0 8px 10px -6px rgba(0, 0, 0, 0.5);
            padding: 6px;
            min-width: 290px;
            z-index: 1500;
            display: flex;
            flex-direction: column;
            gap: 4px;
            backdrop-filter: blur(8px);
        }
        .export-dropdown-item {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            padding: 10px 12px;
            border-radius: 6px;
            background: transparent;
            border: none;
            color: #f1f5f9;
            cursor: pointer;
            text-align: left;
            transition: all 0.15s ease;
            width: 100%;
            box-sizing: border-box;
        }
        .export-dropdown-item:hover {
            background: #1e293b;
            color: #38bdf8;
        }
        .export-item-icon {
            font-size: 18px;
            line-height: 1;
            margin-top: 2px;
            flex-shrink: 0;
        }
        .export-item-text {
            display: flex;
            flex-direction: column;
            gap: 2px;
        }
        .export-item-title {
            font-size: 13px;
            font-weight: 700;
            color: #f8fafc;
        }
        .export-dropdown-item:hover .export-item-title {
            color: #38bdf8;
        }
        .export-item-desc {
            font-size: 11px;
            color: #94a3b8;
            line-height: 1.3;
        }
        .export-dropdown-divider {
            height: 1px;
            background: #1e293b;
            margin: 2px 0;
        }
        .studio-logo {
            background: linear-gradient(135deg, #0284c7, #0d9488);
            color: #fff;
            font-family: 'Outfit', sans-serif;
            font-size: 16px;
            font-weight: 800;
            padding: 6px 14px;
            border-radius: 6px;
        }
        .project-name-input {
            background: #1f2937;
            border: 1px solid #374151;
            color: #38bdf8;
            font-family: 'Outfit', sans-serif;
            font-size: 16px;
            font-weight: 700;
            padding: 6px 12px;
            border-radius: 6px;
            width: 280px;
        }

        /* Screen Tabs Container */
        .tabs-bar {
            display: flex;
            align-items: center;
            gap: 6px;
            overflow-x: auto;
            max-width: 700px;
            padding: 0 10px;
        }
        .tab-item {
            background: #1f2937;
            border: 1px solid #374151;
            color: #9ca3af;
            padding: 6px 12px;
            border-radius: 6px;
            font-size: 13px;
            font-weight: 700;
            cursor: pointer;
            white-space: nowrap;
            display: flex;
            align-items: center;
            gap: 6px;
            transition: all 0.2s;
            position: relative;
        }
        .tab-item:hover {
            color: #fff;
            border-color: #0284c7;
        }
        .tab-item.active {
            background: #0284c7;
            color: #fff;
            border-color: #38bdf8;
        }
        .tab-close-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            margin-left: 4px;
            font-size: 14px;
            line-height: 1;
            color: #94a3b8;
            cursor: pointer;
            transition: all 0.15s ease;
        }
        .tab-close-btn:hover {
            background: rgba(239, 68, 68, 0.35);
            color: #ffffff;
        }
        .tab-item.active .tab-close-btn {
            color: rgba(255, 255, 255, 0.7);
        }
        .tab-item.active .tab-close-btn:hover {
            background: rgba(239, 68, 68, 0.5);
            color: #ffffff;
        }

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

        .btn-header {
            padding: 8px 16px;
            border-radius: 6px;
            font-weight: 700;
            font-size: 13px;
            border: none;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 6px;
            transition: all 0.2s;
        }
        .btn-edit-mode {
            background: #0284c7;
            color: #fff;
        }
        .btn-run-mode {
            background: #10b981;
            color: #fff;
        }
        .btn-save {
            background: #374151;
            color: #38bdf8;
            border: 1px solid #4b5563;
        }
        .btn-save:hover {
            background: #4b5563;
            color: #fff;
        }
        .btn-test-mode {
            background: #1e293b;
            color: #fbbf24;
            border: 1px solid #f59e0b;
            font-weight: 700;
        }
        .btn-test-mode:hover {
            background: #292524;
            color: #fde047;
            border-color: #fde047;
        }
        .btn-test-mode.active {
            background: linear-gradient(135deg, #d97706, #b45309);
            color: #ffffff;
            border-color: #f59e0b;
            box-shadow: 0 0 15px rgba(245, 158, 11, 0.4);
        }

        /* Compact Header Icon Buttons */
        .btn-header-icon {
            width: 36px;
            height: 36px;
            min-width: 36px;
            border-radius: 8px;
            border: 1px solid #374151;
            background: #1f2937;
            color: #cbd5e1;
            font-size: 16px;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            user-select: none;
        }
        .btn-header-icon:hover {
            background: #374151;
            color: #ffffff;
            border-color: #4b5563;
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
        }
        .btn-header-icon:active {
            transform: translateY(0);
        }
        .btn-header-icon.btn-save {
            background: #1f2937;
            border-color: #374151;
            color: #38bdf8;
        }
        .btn-header-icon.btn-save:hover {
            background: #334155;
            border-color: #38bdf8;
            color: #ffffff;
        }
        .btn-header-icon.btn-builder-link {
            background: #1e293b;
            border-color: #334155;
            color: #38bdf8;
            font-size: 18px;
        }
        .btn-header-icon.btn-builder-link:hover {
            background: #0284c7;
            border-color: #38bdf8;
            color: #ffffff;
            box-shadow: 0 0 14px rgba(56, 189, 248, 0.45);
        }
        .btn-header-icon.btn-upload {
            background: #1f2937;
            border-color: #374151;
            color: #a78bfa;
        }
        .btn-header-icon.btn-upload:hover {
            background: #334155;
            border-color: #a78bfa;
            color: #ffffff;
        }
        .btn-header-icon.btn-test-mode {
            background: #1e293b;
            color: #fbbf24;
            border: 1px solid #f59e0b;
        }
        .btn-header-icon.btn-test-mode:hover {
            background: #292524;
            color: #fde047;
            border-color: #fde047;
        }
        .btn-header-icon.btn-test-mode.active {
            background: linear-gradient(135deg, #d97706, #b45309);
            color: #ffffff;
            border-color: #f59e0b;
            box-shadow: 0 0 15px rgba(245, 158, 11, 0.5);
            animation: pulseTestIcon 2s infinite;
        }
        @keyframes pulseTestIcon {
            0%, 100% { box-shadow: 0 0 10px rgba(245, 158, 11, 0.4); }
            50% { box-shadow: 0 0 18px rgba(245, 158, 11, 0.8); }
        }
        .btn-header-icon.btn-edit-mode {
            background: #0284c7;
            color: #ffffff;
            border-color: #38bdf8;
        }
        .btn-header-icon.btn-edit-mode:hover {
            background: #0369a1;
            box-shadow: 0 0 12px rgba(2, 132, 199, 0.5);
        }
        .btn-header-icon.btn-run-mode {
            background: #059669;
            color: #ffffff;
            border-color: #34d399;
        }
        .btn-header-icon.btn-run-mode:hover {
            background: #047857;
            box-shadow: 0 0 12px rgba(16, 185, 129, 0.5);
        }
        .btn-header-icon.active {
            background: #334155;
            border-color: #38bdf8;
            color: #38bdf8;
        }

        .btn-header-action {
            height: 36px;
            padding: 0 14px;
            border-radius: 8px;
            border: 1px solid #374151;
            background: #1f2937;
            color: #cbd5e1;
            font-size: 13px;
            font-weight: 700;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
            user-select: none;
            white-space: nowrap;
        }
        .btn-header-action:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
        }
        .btn-header-action.btn-edit-mode {
            background: #0284c7;
            color: #ffffff;
            border-color: #38bdf8;
        }
        .btn-header-action.btn-edit-mode:hover {
            background: #0369a1;
            box-shadow: 0 0 12px rgba(2, 132, 199, 0.5);
        }
        .btn-header-action.btn-run-mode {
            background: #059669;
            color: #ffffff;
            border-color: #34d399;
        }
        .btn-header-action.btn-run-mode:hover {
            background: #047857;
            box-shadow: 0 0 12px rgba(16, 185, 129, 0.5);
        }

        .project-name-display {
            display: none;
            font-family: 'Outfit', sans-serif;
            font-size: 17px;
            font-weight: 800;
            color: #38bdf8;
            letter-spacing: 0.5px;
            text-transform: uppercase;
            padding: 6px 14px;
            background: rgba(2, 132, 199, 0.12);
            border: 1px solid rgba(56, 189, 248, 0.35);
            border-radius: 8px;
            white-space: nowrap;
        }

        body.runtime-mode .sidebar-left,
        body.runtime-mode .sidebar-right,
        body.runtime-mode .editor-only-action {
            display: none !important;
        }

        body.runtime-mode .studio-header {
            background: linear-gradient(180deg, #0f172a 0%, #090d16 100%);
            border-bottom: 2px solid #0284c7;
            height: 60px;
            padding: 0 16px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
        }

        .header-divider {
            width: 1px;
            height: 22px;
            background: #374151;
            margin: 0 3px;
            flex-shrink: 0;
        }

        /* Scada Modal Dialogs */
        .scada-modal-overlay {
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            background: rgba(0, 0, 0, 0.78);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 100000;
            animation: scadaFadeIn 0.2s ease-out;
        }
        @keyframes scadaFadeIn {
            from { opacity: 0; transform: scale(0.97); }
            to { opacity: 1; transform: scale(1); }
        }
        .scada-modal-box {
            background: #0f172a;
            border: 1.5px solid #0284c7;
            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8), 0 0 30px rgba(2, 132, 199, 0.3);
            border-radius: 12px;
            width: 90%;
            max-width: 440px;
            padding: 24px;
            color: #f8fafc;
            box-sizing: border-box;
        }
        .scada-modal-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 1px solid #1e293b;
            padding-bottom: 12px;
            margin-bottom: 16px;
        }
        .scada-modal-title {
            font-size: 15px;
            font-weight: 800;
            color: #38bdf8;
            display: flex;
            align-items: center;
            gap: 8px;
            letter-spacing: 0.5px;
        }
        .scada-modal-close {
            background: none;
            border: none;
            color: #94a3b8;
            font-size: 22px;
            cursor: pointer;
            padding: 2px 6px;
            line-height: 1;
            border-radius: 4px;
            transition: all 0.15s;
        }
        .scada-modal-close:hover {
            color: #ef4444;
            background: rgba(239, 68, 68, 0.15);
        }
        .scada-modal-input {
            width: 100%;
            background: #1e293b;
            border: 1px solid #334155;
            color: #f8fafc;
            padding: 9px 12px;
            border-radius: 6px;
            font-size: 13px;
            box-sizing: border-box;
            outline: none;
            transition: all 0.2s;
        }
        .scada-modal-input:focus {
            border-color: #38bdf8;
            box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.25);
        }
        .status-pill-badge {
            font-size: 11px;
            font-weight: 800;
            padding: 4px 10px;
            border-radius: 12px;
            border: 1px solid;
            white-space: nowrap;
        }
        .status-pill-badge.online {
            background: rgba(16, 185, 129, 0.15);
            border-color: #10b981;
            color: #34d399;
        }
        .status-pill-badge.offline {
            background: rgba(239, 68, 68, 0.15);
            border-color: #ef4444;
            color: #fca5a5;
        }
        .status-pill-badge.waiting {
            background: rgba(245, 158, 11, 0.15);
            border-color: #f59e0b;
            color: #fbbf24;
        }
        .dpad-header-group {
            display: inline-flex;
            align-items: center;
            gap: 2px;
            background: #111827;
            padding: 2px 4px;
            border-radius: 8px;
            border: 1px solid #374151;
        }
        .dpad-header-group .btn-dpad {
            width: 30px;
            height: 30px;
            min-width: 30px;
            font-size: 13px;
            border-radius: 6px;
            border: none;
            background: transparent;
            color: #cbd5e1;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            transition: all 0.15s ease;
        }
        .dpad-header-group .btn-dpad:hover {
            background: #1e293b;
            color: #38bdf8;
            transform: scale(1.08);
        }
        .dpad-header-group .btn-dpad:active {
            transform: scale(0.95);
        }

        /* Settings Dropdown Popover */
        .settings-dropdown-wrapper {
            position: relative;
        }
        .settings-dropdown-menu {
            position: absolute;
            top: calc(100% + 8px);
            right: 0;
            width: 340px;
            max-height: calc(100vh - 65px);
            overflow-y: auto;
            background: #1e293b;
            border: 1px solid #475569;
            border-radius: 10px;
            box-shadow: 0 12px 30px rgba(0, 0, 0, 0.65);
            padding: 14px;
            z-index: 300;
            backdrop-filter: blur(10px);
            display: none;
            animation: fadeInDown 0.15s ease-out;
        }
        @keyframes fadeInDown {
            from { opacity: 0; transform: translateY(-6px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .settings-menu-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 13px;
            font-weight: 700;
            color: #f1f5f9;
            padding-bottom: 8px;
            border-bottom: 1px solid #334155;
            margin-bottom: 12px;
        }
        .settings-close-btn {
            font-size: 14px;
            color: #94a3b8;
            cursor: pointer;
            padding: 2px 6px;
            border-radius: 4px;
        }
        .settings-close-btn:hover {
            color: #ffffff;
            background: rgba(255, 255, 255, 0.1);
        }
        .settings-group {
            margin-bottom: 12px;
        }
        .settings-label {
            display: block;
            font-size: 11px;
            font-weight: 600;
            color: #94a3b8;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 6px;
        }
        .settings-select {
            width: 100%;
            background: #0f172a;
            border: 1px solid #334155;
            color: #e2e8f0;
            font-size: 12px;
            padding: 7px 10px;
            border-radius: 6px;
            cursor: pointer;
            outline: none;
            transition: border-color 0.2s;
        }
        .settings-select:focus {
            border-color: #38bdf8;
        }

        /* Test Active Floating Banner */
        .test-active-banner {
            position: absolute;
            top: 14px;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(180, 83, 9, 0.92);
            backdrop-filter: blur(8px);
            border: 1px solid #fbbf24;
            color: #ffffff;
            padding: 6px 20px;
            border-radius: 20px;
            font-size: 13px;
            font-weight: 600;
            z-index: 100;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
            pointer-events: none;
            display: flex;
            align-items: center;
            gap: 8px;
            animation: pulseBanner 2s infinite ease-in-out;
        }
        @keyframes pulseBanner {
            0%, 100% { opacity: 0.95; transform: translateX(-50%) scale(1); }
            50% { opacity: 0.8; transform: translateX(-50%) scale(0.99); }
        }

        /* Test Simulator Panel / Drawer */
        .test-sim-panel {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 330px;
            background: rgba(15, 23, 42, 0.97);
            backdrop-filter: blur(12px);
            border-top: 2px solid #f59e0b;
            display: none;
            flex-direction: column;
            z-index: 250;
            box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.7);
            transition: height 0.2s ease;
        }
        .test-sim-panel.collapsed {
            height: 44px;
        }
        .test-sim-header {
            height: 44px;
            background: #1e293b;
            border-bottom: 1px solid #334155;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 16px;
            flex-shrink: 0;
        }
        .test-sim-title {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .test-badge {
            background: #334155;
            color: #94a3b8;
            font-size: 11px;
            font-weight: 700;
            padding: 2px 8px;
            border-radius: 12px;
        }
        .test-presets-bar {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .btn-preset {
            padding: 5px 12px;
            border-radius: 6px;
            font-size: 12px;
            font-weight: 700;
            cursor: pointer;
            border: 1px solid transparent;
            transition: all 0.15s;
        }
        .btn-preset-green {
            background: rgba(16, 185, 129, 0.2);
            color: #34d399;
            border-color: #059669;
        }
        .btn-preset-green:hover {
            background: #059669;
            color: #ffffff;
        }
        .btn-preset-red {
            background: rgba(239, 68, 68, 0.2);
            color: #f87171;
            border-color: #dc2626;
        }
        .btn-preset-red:hover {
            background: #dc2626;
            color: #ffffff;
        }
        .btn-preset-cyan {
            background: rgba(6, 182, 212, 0.2);
            color: #38bdf8;
            border-color: #0284c7;
        }
        .btn-preset-cyan:hover, .btn-preset-cyan.active {
            background: #0284c7;
            color: #ffffff;
        }
        .btn-preset-gray {
            background: #334155;
            color: #cbd5e1;
            border-color: #475569;
        }
        .btn-preset-gray:hover {
            background: #475569;
            color: #ffffff;
        }
        .test-controls-right {
            display: flex;
            align-items: center;
            gap: 12px;
        }
        .test-sync-label {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 12px;
            color: #cbd5e1;
            cursor: pointer;
            user-select: none;
        }
        .btn-tool-icon {
            background: #334155;
            color: #cbd5e1;
            border: 1px solid #475569;
            border-radius: 4px;
            width: 28px;
            height: 28px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 13px;
        }
        .btn-tool-icon:hover {
            background: #475569;
            color: #ffffff;
        }
        .test-sim-subbar {
            height: 40px;
            background: #0f172a;
            border-bottom: 1px solid #1e293b;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 16px;
            flex-shrink: 0;
        }
        .test-tabs {
            display: flex;
            gap: 8px;
        }
        .test-tab-btn {
            background: transparent;
            color: #94a3b8;
            border: none;
            padding: 6px 12px;
            font-size: 12px;
            font-weight: 700;
            border-radius: 6px;
            cursor: pointer;
        }
        .test-tab-btn.active {
            background: #1e293b;
            color: #38bdf8;
            border: 1px solid #334155;
        }
        .test-search-box input {
            background: #1e293b;
            border: 1px solid #334155;
            color: #f1f5f9;
            padding: 5px 12px;
            border-radius: 6px;
            font-size: 12px;
            width: 220px;
        }
        .test-tags-body {
            flex: 1;
            overflow-y: auto;
            padding: 14px 16px;
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
            gap: 12px;
            align-content: start;
        }
        .test-card {
            background: #1e293b;
            border: 1px solid #334155;
            border-radius: 8px;
            padding: 10px 14px;
            display: flex;
            flex-direction: column;
            gap: 8px;
            transition: border-color 0.2s;
        }
        .test-card:hover {
            border-color: #0284c7;
        }
        .test-card-hdr {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .test-card-tag {
            font-family: 'JetBrains Mono', monospace;
            font-size: 13px;
            font-weight: 700;
            color: #38bdf8;
        }
        .test-card-desc {
            font-size: 11px;
            color: #94a3b8;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 150px;
        }
        .test-card-ctrls {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .test-toggle-btn {
            flex: 1;
            padding: 6px 12px;
            border-radius: 6px;
            font-size: 12px;
            font-weight: 800;
            cursor: pointer;
            border: 1px solid transparent;
            transition: all 0.15s;
        }
        .test-toggle-btn.is-off {
            background: #334155;
            color: #94a3b8;
            border-color: #475569;
        }
        .test-toggle-btn.is-on {
            background: #059669;
            color: #ffffff;
            border-color: #10b981;
            box-shadow: 0 0 10px rgba(16, 185, 129, 0.3);
        }
        .test-pulse-btn {
            background: #334155;
            color: #cbd5e1;
            border: 1px solid #475569;
            padding: 6px 10px;
            border-radius: 6px;
            font-size: 11px;
            font-weight: 700;
            cursor: pointer;
        }
        .test-pulse-btn:hover {
            background: #475569;
            color: #fff;
        }
        .test-slider-row {
            display: flex;
            align-items: center;
            gap: 8px;
            width: 100%;
        }
        .test-slider-row input[type="range"] {
            flex: 1;
            accent-color: #0284c7;
            cursor: pointer;
        }
        .test-num-input {
            width: 72px;
            background: #0f172a;
            border: 1px solid #334155;
            color: #38bdf8;
            font-family: 'JetBrains Mono', monospace;
            font-size: 13px;
            font-weight: 700;
            padding: 4px 6px;
            border-radius: 6px;
            text-align: right;
        }
        .test-unit {
            font-size: 11px;
            color: #94a3b8;
            font-weight: 600;
            width: 24px;
        }

        /* Decorative Elements & Layer Ordering */
        .decor-badge {
            background: rgba(14, 165, 233, 0.12);
            border: 1px solid #0284c7;
            padding: 8px 10px;
            border-radius: 6px;
            font-size: 11px;
            color: #38bdf8;
            font-weight: 600;
            margin-bottom: 12px;
            line-height: 1.4;
        }
        .btn-layer {
            background: #1f2937;
            border: 1px solid #374151;
            color: #cbd5e1;
            padding: 6px 10px;
            border-radius: 6px;
            font-size: 11px;
            font-weight: 700;
            cursor: pointer;
            flex: 1;
            transition: all 0.15s;
            text-align: center;
        }
        .btn-layer:hover {
            background: #374151;
            color: #ffffff;
            border-color: #0284c7;
        }

        /* Dynamic Line Flow Animation */
        @keyframes scadaFlowDash {
            from {
                stroke-dashoffset: 36;
            }
            to {
                stroke-dashoffset: 0;
            }
        }
        .flow-animated {
            animation: scadaFlowDash 0.8s linear infinite;
        }
        .dynamic-shape-label {
            user-select: none;
            letter-spacing: 0.5px;
            text-shadow: 0 1px 3px rgba(0,0,0,0.85);
            transition: all 0.2s ease;
        }

        /* Main Workspace Layout */
        .studio-main {
            flex: 1;
            display: flex;
            overflow: hidden;
            position: relative;
        }

        /* Left Sidebar: Toolbox & Assets */
        .sidebar-left {
            width: 280px;
            background: #111827;
            border-right: 1px solid #1f2937;
            display: flex;
            flex-direction: column;
            overflow-y: auto;
        }

        /* Sidebar Tools & Navigation Section */
        .sidebar-tools-section {
            background: #0f172a;
            border-bottom: 1px solid #1e293b;
            padding: 12px 14px;
            display: flex;
            flex-direction: column;
            gap: 8px;
            flex-shrink: 0;
        }
        .sidebar-tools-title {
            font-family: 'Outfit', sans-serif;
            font-size: 11px;
            font-weight: 800;
            color: #38bdf8;
            text-transform: uppercase;
            letter-spacing: 0.8px;
            display: flex;
            align-items: center;
            gap: 6px;
        }
        .sidebar-actions-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 6px;
        }
        .sidebar-actions-grid-3 {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            gap: 6px;
        }
        .btn-sidebar-action {
            background: #1e293b;
            border: 1px solid #334155;
            color: #e2e8f0;
            font-size: 11px;
            font-weight: 700;
            padding: 7px 6px;
            border-radius: 6px;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 4px;
            transition: all 0.15s;
            user-select: none;
        }
        .btn-sidebar-action:hover {
            background: #334155;
            color: #38bdf8;
            border-color: #38bdf8;
            transform: translateY(-1px);
        }
        .btn-sidebar-action:active {
            transform: translateY(0);
        }
        .sidebar-dpad-wrapper {
            background: rgba(15, 23, 42, 0.7);
            border: 1px solid #1e293b;
            border-radius: 8px;
            padding: 8px 6px;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 6px;
        }
        .sidebar-dpad-title {
            font-size: 10px;
            color: #94a3b8;
            font-weight: 600;
            text-align: center;
        }
        .sidebar-dpad-grid {
            display: grid;
            grid-template-columns: 32px 32px 32px;
            grid-template-rows: 32px 32px 32px;
            gap: 4px;
            align-items: center;
            justify-content: center;
        }
        .btn-sidebar-dpad {
            width: 32px;
            height: 32px;
            background: #1e293b;
            border: 1px solid #334155;
            color: #cbd5e1;
            font-size: 13px;
            border-radius: 6px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.15s;
        }
        .btn-sidebar-dpad:hover {
            background: #0284c7;
            color: #ffffff;
            border-color: #38bdf8;
        }
        .btn-sidebar-dpad.dpad-center {
            background: rgba(239, 68, 68, 0.15);
            border-color: rgba(239, 68, 68, 0.4);
            color: #f87171;
        }
        .btn-sidebar-dpad.dpad-center:hover {
            background: #ef4444;
            color: #ffffff;
        }

        /* Alarm Badge Styles */
        .scada-alarm-badge-element {
            display: flex;
            align-items: center;
            box-sizing: border-box;
            user-select: none;
            transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
            position: absolute;
            font-family: 'Outfit', sans-serif;
            cursor: pointer;
        }
        .scada-alarm-badge-element.alarm-active {
            background: rgba(153, 27, 27, 0.4) !important;
            border-color: #ef4444 !important;
            color: #fee2e2 !important;
            box-shadow: 0 0 16px rgba(239, 68, 68, 0.5);
            animation: scada-alarm-flash 1.2s infinite ease-in-out;
        }
        @keyframes scada-alarm-flash {
            0% { border-color: #ef4444; box-shadow: 0 0 8px rgba(239, 68, 68, 0.3); }
            50% { border-color: #f87171; box-shadow: 0 0 20px rgba(239, 68, 68, 0.7); }
            100% { border-color: #ef4444; box-shadow: 0 0 8px rgba(239, 68, 68, 0.3); }
        }
        .alarm-badge-pulse-dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: #22c55e;
            box-shadow: 0 0 8px #22c55e;
            flex-shrink: 0;
        }
        .alarm-badge-pulse-dot.dot-active {
            background: #ef4444;
            box-shadow: 0 0 10px #ef4444;
            animation: dot-pulse 0.8s infinite alternate;
        }
        @keyframes dot-pulse {
            from { transform: scale(0.9); opacity: 0.7; }
            to { transform: scale(1.3); opacity: 1; }
        }

        .tool-group-title {
            font-family: 'Outfit', sans-serif;
            font-size: 13px;
            font-weight: 800;
            color: #9ca3af;
            text-transform: uppercase;
            letter-spacing: 0.8px;
            padding: 12px 14px 6px;
        }

        .tool-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 8px;
            padding: 0 14px 10px;
        }

        .tool-card {
            background: #1f2937;
            border: 1px solid #374151;
            border-radius: 8px;
            padding: 10px;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 6px;
            cursor: pointer;
            transition: all 0.2s;
            text-align: center;
        }
        .tool-card:hover {
            border-color: #0284c7;
            background: #374151;
            transform: translateY(-1px);
        }
        .tool-icon {
            font-size: 20px;
        }
        .tool-name {
            font-size: 11px;
            font-weight: 700;
            color: #e5e7eb;
        }

        .asset-gallery {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 6px;
            padding: 0 14px 14px;
        }
        .asset-thumb {
            width: 100%;
            height: 60px;
            background: #1f2937;
            border: 1px solid #374151;
            border-radius: 6px;
            object-fit: contain;
            padding: 4px;
            cursor: pointer;
        }
        .asset-thumb:hover {
            border-color: #0284c7;
        }

        /* Center Canvas Workspace */
        .workspace-center {
            flex: 1;
            background: #030712;
            overflow: auto;
            display: flex;
            position: relative;
            padding: 20px;
        }

        #scada-canvas-wrapper {
            position: relative;
            margin: auto;
            flex-shrink: 0;
            box-shadow: 0 10px 35px rgba(0,0,0,0.6);
            border-radius: 4px;
        }

        #scada-canvas {
            position: absolute;
            left: 0;
            top: 0;
            width: 1520px;
            height: 1050px;
            background-color: var(--bg-canvas, rgb(182, 182, 182));
            border: 1px solid #1f2937;
            transform-origin: 0 0;
            box-shadow: 0 10px 30px rgba(0,0,0,0.6);
        }

        /* Canvas Grid Overlay (Toggleable) */
        .edit-mode-grid {
            background-image: none;
        }
        .show-grid-dots {
            background-image: radial-gradient(#64748b 1px, transparent 1px) !important;
            background-size: 20px 20px !important;
        }

        /* Dynamic Canvas Elements */
        .canvas-element {
            position: absolute;
            box-sizing: border-box;
            cursor: move;
        }
        .canvas-element.selected {
            outline: 2px solid #38bdf8 !important;
            outline-offset: 2px;
            box-shadow: 0 0 12px rgba(56, 189, 248, 0.6) !important;
        }

        /* Marquee Box Selection (Drag-to-select / Rubberband) */
        .selection-marquee {
            position: absolute;
            border: 1px dashed #38bdf8;
            background: rgba(56, 189, 248, 0.18);
            box-shadow: 0 0 12px rgba(56, 189, 248, 0.25);
            pointer-events: none;
            z-index: 9999;
            border-radius: 3px;
            display: none;
        }

        /* Clock & Connection Status Elements */
        .scada-clock-element, .scada-status-element {
            display: flex;
            align-items: center;
            user-select: none;
            box-sizing: border-box;
            backdrop-filter: blur(8px);
            transition: border-color 0.2s, box-shadow 0.2s;
        }
        .status-pulse-dot {
            display: inline-block;
            box-sizing: border-box;
            flex-shrink: 0;
        }
        .status-pulse-green {
            animation: pulseGreen 1.8s infinite;
        }
        .status-pulse-yellow {
            animation: pulseYellow 1.8s infinite;
        }
        .status-pulse-red {
            animation: pulseRed 1.8s infinite;
        }
        .status-pulse-purple {
            animation: pulsePurple 1.8s infinite;
        }
        @keyframes pulseGreen {
            0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.8); }
            70% { box-shadow: 0 0 0 7px rgba(16, 185, 129, 0); }
            100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
        }
        @keyframes pulseYellow {
            0% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.8); }
            70% { box-shadow: 0 0 0 7px rgba(245, 158, 11, 0); }
            100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); }
        }
        @keyframes pulseRed {
            0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.8); }
            70% { box-shadow: 0 0 0 7px rgba(239, 68, 68, 0); }
            100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
        }
        @keyframes pulsePurple {
            0% { box-shadow: 0 0 0 0 rgba(168, 85, 247, 0.8); }
            70% { box-shadow: 0 0 0 7px rgba(168, 85, 247, 0); }
            100% { box-shadow: 0 0 0 0 rgba(168, 85, 247, 0); }
        }

        /* Web Frame / Iframe Component Styles */
        .scada-web-frame {
            display: flex;
            flex-direction: column;
            box-sizing: border-box;
            background: #0f172a;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 10px 25px rgba(0,0,0,0.5);
            position: relative;
        }
        .web-frame-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 8px 12px;
            background: #1e293b;
            border-bottom: 1px solid #334155;
            color: #f1f5f9;
            font-size: 13px;
            font-weight: 600;
            user-select: none;
            flex-shrink: 0;
            gap: 10px;
        }
        .web-frame-title {
            display: flex;
            align-items: center;
            gap: 8px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            flex: 1;
        }
        .web-frame-actions {
            display: flex;
            align-items: center;
            gap: 8px;
            flex-shrink: 0;
        }
        .web-frame-countdown {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            padding: 3px 8px;
            border-radius: 9999px;
            background: rgba(14, 165, 233, 0.15);
            border: 1px solid rgba(14, 165, 233, 0.35);
            color: #38bdf8;
            font-family: 'JetBrains Mono', monospace;
            font-size: 11px;
            font-weight: 700;
        }
        .web-frame-btn {
            background: #334155;
            border: 1px solid #475569;
            color: #f8fafc;
            border-radius: 4px;
            padding: 4px 8px;
            font-size: 11px;
            cursor: pointer;
            transition: all 0.2s;
            display: inline-flex;
            align-items: center;
            gap: 4px;
        }
        .web-frame-btn:hover {
            background: #0284c7;
            border-color: #38bdf8;
        }
        .web-frame-content {
            position: relative;
            flex: 1;
            width: 100%;
            height: 100%;
            background: #0f172a;
            overflow: hidden;
        }
        .web-frame-content iframe {
            width: 100%;
            height: 100%;
            border: none;
            display: block;
        }
        .web-frame-shield {
            position: absolute;
            inset: 0;
            z-index: 10;
            background: transparent;
            cursor: move;
        }
        .web-frame-placeholder {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100%;
            color: #64748b;
            gap: 12px;
            text-align: center;
            padding: 24px;
            background: rgba(15, 23, 42, 0.95);
        }
        @keyframes rotateSpin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }
        .rotating {
            animation: rotateSpin 0.8s linear infinite;
        }

        /* Realtime SCADA Chart Styles */
        .scada-realtime-chart {
            display: flex;
            flex-direction: column;
            box-sizing: border-box;
            background: #0f172a;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 10px 25px rgba(0,0,0,0.5);
            position: relative;
        }
        .chart-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 8px 12px;
            background: #1e293b;
            border-bottom: 1px solid #334155;
            color: #f1f5f9;
            font-size: 13px;
            font-weight: 700;
            user-select: none;
            flex-shrink: 0;
            gap: 10px;
        }
        .chart-title-box {
            display: flex;
            align-items: center;
            gap: 8px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            flex: 1;
        }
        .chart-tag-pill {
            background: rgba(2, 132, 199, 0.2);
            border: 1px solid rgba(56, 189, 248, 0.4);
            color: #38bdf8;
            font-family: 'JetBrains Mono', monospace;
            font-size: 11px;
            font-weight: 700;
            padding: 2px 6px;
            border-radius: 4px;
        }
        .chart-live-badge {
            background: rgba(16, 185, 129, 0.15);
            border: 1px solid rgba(16, 185, 129, 0.4);
            color: #10b981;
            font-family: 'JetBrains Mono', monospace;
            font-size: 12px;
            font-weight: 800;
            padding: 2px 8px;
            border-radius: 12px;
            letter-spacing: 0.5px;
        }
        .chart-actions {
            display: flex;
            align-items: center;
            gap: 6px;
            flex-shrink: 0;
        }
        .chart-btn {
            background: #334155;
            border: 1px solid #475569;
            color: #f8fafc;
            border-radius: 4px;
            padding: 3px 8px;
            font-size: 11px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s;
            display: inline-flex;
            align-items: center;
            gap: 4px;
        }
        .chart-btn:hover {
            background: #0284c7;
            border-color: #38bdf8;
        }
        .chart-stats-bar {
            display: flex;
            align-items: center;
            justify-content: space-around;
            padding: 6px 12px;
            background: rgba(15, 23, 42, 0.85);
            border-bottom: 1px solid rgba(51, 65, 85, 0.6);
            font-size: 11px;
            font-family: 'JetBrains Mono', monospace;
            color: #94a3b8;
            user-select: none;
            flex-shrink: 0;
            flex-wrap: wrap;
            gap: 8px;
        }
        .chart-stat-item {
            display: inline-flex;
            align-items: center;
            gap: 5px;
        }
        .chart-stat-item span {
            font-weight: 700;
            color: #f8fafc;
        }
        .chart-body {
            position: relative;
            flex: 1;
            width: 100%;
            height: 100%;
            overflow: hidden;
            background: #090d16;
        }
        .chart-canvas {
            width: 100%;
            height: 100%;
            display: block;
        }
        .chart-tooltip {
            position: absolute;
            pointer-events: none;
            background: rgba(15, 23, 42, 0.95);
            border: 1px solid #38bdf8;
            border-radius: 6px;
            padding: 5px 8px;
            color: #ffffff;
            font-family: 'JetBrains Mono', monospace;
            font-size: 11px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.5);
            z-index: 20;
            white-space: nowrap;
        }

        /* Water Level Smart Card (Tiện Ích Giám Sát Mực Nước) */
        .scada-water-level-card {
            box-sizing: border-box;
            background: #ffffff;
            border: 3px solid #16a34a;
            border-radius: 18px;
            display: flex;
            flex-direction: row;
            align-items: stretch;
            padding: 14px 16px;
            box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06);
            user-select: none;
            position: absolute;
            overflow: hidden;
            font-family: 'Outfit', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
            transition: border-color 0.3s ease, box-shadow 0.3s ease;
        }
        .scada-water-level-card.alert-level-1 {
            border-color: #f59e0b !important;
        }
        .scada-water-level-card.alert-level-2 {
            border-color: #ea580c !important;
        }
        .scada-water-level-card.alert-level-3 {
            border-color: #dc2626 !important;
            animation: waterAlertPulse 2s infinite ease-in-out;
        }
        @keyframes waterAlertPulse {
            0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.4); }
            50% { box-shadow: 0 0 0 8px rgba(220, 38, 38, 0); }
        }
        .water-card-left {
            flex: 0 0 46%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            padding-right: 6px;
            min-width: 0;
            z-index: 2;
        }
        .water-card-title {
            font-weight: 700;
            color: #0f172a;
            font-size: 15px;
            line-height: 1.25;
            word-break: break-word;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        .water-card-value-row {
            display: flex;
            align-items: baseline;
            margin: 4px 0;
        }
        .water-card-val {
            font-size: 36px;
            font-weight: 800;
            color: #16a34a;
            letter-spacing: -0.5px;
            line-height: 1;
            font-variant-numeric: tabular-nums;
        }
        .water-card-unit {
            font-size: 18px;
            font-weight: 700;
            color: #16a34a;
            margin-left: 6px;
        }
        .water-card-badge-wrap {
            display: flex;
            align-items: center;
        }
        .water-card-badge {
            display: inline-flex;
            align-items: center;
            background: #e8f8ee;
            color: #15803d;
            font-size: 12.5px;
            font-weight: 600;
            padding: 3px 12px;
            border-radius: 9999px;
            white-space: nowrap;
        }
        .water-card-badge.status-alert-1 {
            background: #fef3c7;
            color: #b45309;
        }
        .water-card-badge.status-alert-2 {
            background: #ffedd5;
            color: #c2410c;
        }
        .water-card-badge.status-alert-3 {
            background: #fee2e2;
            color: #b91c1c;
        }
        .water-card-divider {
            width: 1px;
            background: #e2e8f0;
            margin: 2px 10px 2px 2px;
            flex-shrink: 0;
            align-self: stretch;
        }
        .water-card-right {
            flex: 1;
            display: flex;
            flex-direction: column;
            position: relative;
            min-width: 0;
            height: 100%;
        }
        .water-sparkline-canvas {
            width: 100%;
            height: 100%;
            display: block;
        }
        .water-card-tooltip {
            position: absolute;
            pointer-events: none;
            background: rgba(15, 23, 42, 0.95);
            backdrop-filter: blur(4px);
            color: #ffffff;
            padding: 4px 8px;
            border-radius: 6px;
            font-size: 11px;
            z-index: 25;
            white-space: nowrap;
            border: 1px solid rgba(255, 255, 255, 0.15);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
            display: none;
        }

        /* Right Sidebar: Property Inspector */
        .sidebar-right {
            width: 300px;
            background: #111827;
            border-left: 1px solid #1f2937;
            display: flex;
            flex-direction: column;
            padding: 16px;
            overflow-y: auto;
        }
        .inspector-title {
            font-family: 'Outfit', sans-serif;
            font-size: 16px;
            font-weight: 800;
            color: #38bdf8;
            margin-bottom: 16px;
            border-bottom: 1px solid #1f2937;
            padding-bottom: 8px;
        }
        .prop-group {
            display: flex;
            flex-direction: column;
            gap: 6px;
            margin-bottom: 14px;
        }
        .prop-label {
            font-size: 12px;
            font-weight: 700;
            color: #9ca3af;
        }
        .prop-input, .prop-select {
            background: #1f2937;
            border: 1px solid #374151;
            color: #fff;
            padding: 8px 10px;
            border-radius: 6px;
            font-size: 13px;
            font-family: inherit;
        }
        .prop-row {
            display: flex;
            gap: 8px;
        }
        .prop-row > div {
            flex: 1;
        }
        .btn-source-mode {
            background: #1f2937;
            border: 1px solid #374151;
            color: #94a3b8;
            padding: 8px 10px;
            border-radius: 6px;
            font-size: 12px;
            font-weight: 700;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            transition: all 0.15s ease;
        }
        .btn-source-mode:hover {
            background: #374151;
            color: #f8fafc;
        }
        .btn-source-mode.active {
            background: #0284c7;
            border-color: #38bdf8;
            color: #ffffff;
            box-shadow: 0 0 10px rgba(56, 189, 248, 0.35);
        }

        /* Runtime & Switching Counter Cards */
        .scada-counter-card {
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            padding: 10px 14px;
            overflow: hidden;
            font-family: 'Outfit', 'Inter', -apple-system, sans-serif;
            transition: border-color 0.25s ease, box-shadow 0.25s ease;
            user-select: none;
            position: relative;
        }
        .scada-counter-card.is-running {
            box-shadow: 0 0 16px rgba(16, 185, 129, 0.28);
        }
        .counter-card-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 6px;
            margin-bottom: 2px;
        }
        .counter-card-title-wrap {
            display: flex;
            align-items: center;
            gap: 6px;
            min-width: 0;
            flex: 1;
        }
        .counter-card-icon {
            font-size: 15px;
            flex-shrink: 0;
        }
        .counter-card-title {
            font-size: 13px;
            font-weight: 700;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            color: #f1f5f9;
        }
        .counter-status-badge {
            font-size: 10px;
            font-weight: 700;
            padding: 2px 7px;
            border-radius: 9999px;
            display: inline-flex;
            align-items: center;
            gap: 4px;
            white-space: nowrap;
            letter-spacing: 0.3px;
        }
        .counter-status-badge.running {
            background: rgba(16, 185, 129, 0.2);
            color: #34d399;
            border: 1px solid rgba(52, 211, 153, 0.4);
        }
        .counter-status-badge.stopped {
            background: rgba(100, 116, 139, 0.2);
            color: #94a3b8;
            border: 1px solid rgba(148, 163, 184, 0.3);
        }
        .counter-status-badge.sw-on {
            background: rgba(239, 68, 68, 0.2);
            color: #f87171;
            border: 1px solid rgba(248, 113, 113, 0.4);
        }
        .counter-status-badge.sw-off {
            background: rgba(34, 197, 94, 0.2);
            color: #4ade80;
            border: 1px solid rgba(74, 222, 128, 0.4);
        }
        .counter-status-dot {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: currentColor;
        }
        .counter-status-dot.pulse {
            animation: counterDotPulse 1.2s infinite ease-in-out;
        }
        @keyframes counterDotPulse {
            0%, 100% { opacity: 1; transform: scale(1); }
            50% { opacity: 0.3; transform: scale(0.7); }
        }
        .counter-main-val-row {
            display: flex;
            align-items: baseline;
            justify-content: space-between;
            margin: 4px 0 2px 0;
        }
        .counter-primary-val {
            font-family: 'JetBrains Mono', monospace;
            font-size: 26px;
            font-weight: 800;
            letter-spacing: -0.5px;
            line-height: 1;
        }
        .counter-primary-unit {
            font-size: 12px;
            font-weight: 600;
            color: #94a3b8;
            margin-left: 4px;
        }
        .counter-secondary-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 11px;
            color: #94a3b8;
            margin-top: 4px;
            padding-top: 4px;
            border-top: 1px solid rgba(255, 255, 255, 0.08);
        }
        .counter-secondary-val {
            font-family: 'JetBrains Mono', monospace;
            font-weight: 700;
            color: #e2e8f0;
        }
        .counter-progress-bar-wrap {
            width: 100%;
            height: 4px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 2px;
            overflow: hidden;
            margin-top: 4px;
        }
        .counter-progress-fill {
            height: 100%;
            background: #38bdf8;
            transition: width 0.3s ease;
        }
        .counter-progress-fill.warning {
            background: #f59e0b;
        }
        .counter-progress-fill.danger {
            background: #ef4444;
        }

        /* SCADA Operation Log & Alarm History Modules */
        .scada-log-card, .scada-alarm-card {
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            padding: 10px 14px;
            overflow: hidden;
            font-family: 'Outfit', 'Inter', -apple-system, sans-serif;
            background: rgba(15, 23, 42, 0.94);
            border: 1px solid #334155;
            border-radius: 12px;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.55);
            backdrop-filter: blur(10px);
            user-select: none;
            position: relative;
        }
        .scada-alarm-card {
            border-color: rgba(239, 68, 68, 0.4);
        }
        .scada-alarm-card.has-active {
            border-color: #ef4444;
            box-shadow: 0 0 20px rgba(239, 68, 68, 0.28);
        }
        .log-card-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            margin-bottom: 8px;
            padding-bottom: 6px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
            flex-shrink: 0;
            flex-wrap: wrap;
        }
        .log-header-left {
            display: flex;
            align-items: center;
            gap: 8px;
            min-width: 0;
        }
        .log-card-icon {
            font-size: 16px;
            flex-shrink: 0;
        }
        .log-card-title {
            font-size: 13px;
            font-weight: 800;
            color: #f8fafc;
            letter-spacing: 0.3px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .log-count-badge {
            font-size: 10px;
            font-weight: 700;
            padding: 2px 7px;
            border-radius: 9999px;
            background: rgba(56, 189, 248, 0.15);
            color: #38bdf8;
            border: 1px solid rgba(56, 189, 248, 0.3);
            white-space: nowrap;
        }
        .log-count-badge.alarm-active {
            background: rgba(239, 68, 68, 0.25);
            color: #f87171;
            border-color: rgba(239, 68, 68, 0.5);
            animation: alarmBadgePulse 1.2s infinite ease-in-out;
        }
        @keyframes alarmBadgePulse {
            0%, 100% { opacity: 1; transform: scale(1); }
            50% { opacity: 0.6; transform: scale(0.96); }
        }
        .log-header-actions {
            display: flex;
            align-items: center;
            gap: 5px;
            flex-wrap: wrap;
        }
        .log-filter-select {
            background: #0f172a;
            border: 1px solid #334155;
            color: #94a3b8;
            border-radius: 6px;
            font-size: 11px;
            font-weight: 600;
            padding: 3px 6px;
            cursor: pointer;
            outline: none;
        }
        .log-search-input {
            background: #0f172a;
            border: 1px solid #334155;
            color: #e2e8f0;
            border-radius: 6px;
            font-size: 11px;
            padding: 3px 7px;
            width: 100px;
            outline: none;
        }
        .log-search-input:focus {
            border-color: #38bdf8;
        }
        .log-btn-action {
            background: #1e293b;
            border: 1px solid #475569;
            color: #cbd5e1;
            padding: 3px 7px;
            border-radius: 6px;
            font-size: 10px;
            font-weight: 700;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 3px;
            transition: all 0.15s;
        }
        .log-btn-action:hover {
            background: #334155;
            color: #ffffff;
            border-color: #94a3b8;
        }
        .log-btn-ack-all {
            background: rgba(239, 68, 68, 0.18);
            border-color: rgba(239, 68, 68, 0.4);
            color: #fca5a5;
        }
        .log-btn-ack-all:hover {
            background: rgba(239, 68, 68, 0.35);
            color: #fff;
            border-color: #ef4444;
        }
        .log-table-container {
            flex: 1;
            overflow-y: auto;
            overflow-x: auto;
            position: relative;
            scrollbar-width: thin;
            scrollbar-color: #475569 transparent;
            min-height: 80px;
        }
        .log-table-container::-webkit-scrollbar {
            width: 5px;
            height: 5px;
        }
        .log-table-container::-webkit-scrollbar-thumb {
            background: #475569;
            border-radius: 3px;
        }
        .scada-data-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 11px;
            text-align: left;
        }
        .scada-data-table th {
            position: sticky;
            top: 0;
            background: #1e293b;
            color: #94a3b8;
            font-weight: 700;
            padding: 5px 8px;
            text-transform: uppercase;
            letter-spacing: 0.4px;
            border-bottom: 1px solid #334155;
            z-index: 2;
            white-space: nowrap;
        }
        .scada-data-table td {
            padding: 6px 8px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.04);
            color: #cbd5e1;
            white-space: nowrap;
        }
        .scada-data-table tr:hover td {
            background: rgba(255, 255, 255, 0.035);
        }
        .log-time-col {
            font-family: 'JetBrains Mono', monospace;
            font-size: 10.5px;
            color: #94a3b8;
        }
        .log-tag-col {
            font-family: 'JetBrains Mono', monospace;
            font-weight: 700;
            color: #38bdf8;
        }
        .log-cat-badge {
            display: inline-block;
            padding: 1px 5px;
            border-radius: 3px;
            font-size: 9.5px;
            font-weight: 700;
            text-transform: uppercase;
        }
        .log-cat-control { background: rgba(56, 189, 248, 0.15); color: #38bdf8; }
        .log-cat-auto { background: rgba(16, 185, 129, 0.15); color: #34d399; }
        .log-cat-system { background: rgba(168, 85, 247, 0.15); color: #c084fc; }
        
        .log-status-badge {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 1px 6px;
            border-radius: 9999px;
            font-size: 9.5px;
            font-weight: 700;
        }
        .log-status-on { background: rgba(239, 68, 68, 0.18); color: #f87171; border: 1px solid rgba(239, 68, 68, 0.4); }
        .log-status-off { background: rgba(34, 197, 94, 0.18); color: #4ade80; border: 1px solid rgba(34, 197, 94, 0.4); }
        .log-status-ok { background: rgba(16, 185, 129, 0.18); color: #34d399; border: 1px solid rgba(16, 185, 129, 0.4); }
        
        /* Alarm Severity */
        .alarm-sev-badge {
            display: inline-flex;
            align-items: center;
            gap: 3px;
            padding: 1px 5px;
            border-radius: 3px;
            font-size: 9.5px;
            font-weight: 800;
        }
        .alarm-sev-critical { background: rgba(239, 68, 68, 0.25); color: #fca5a5; border: 1px solid #ef4444; }
        .alarm-sev-warning { background: rgba(245, 158, 11, 0.25); color: #fde68a; border: 1px solid #f59e0b; }
        .alarm-sev-info { background: rgba(56, 189, 248, 0.25); color: #bae6fd; border: 1px solid #38bdf8; }
        
        /* Alarm Status */
        .alarm-st-active {
            color: #ef4444;
            font-weight: 800;
            display: inline-flex;
            align-items: center;
            gap: 4px;
            animation: alarmActivePulse 1s infinite alternate;
        }
        @keyframes alarmActivePulse {
            from { opacity: 1; text-shadow: 0 0 6px rgba(239, 68, 68, 0.8); }
            to { opacity: 0.5; text-shadow: none; }
        }
        .alarm-st-ack { color: #f59e0b; font-weight: 700; }
        .alarm-st-cleared { color: #10b981; font-weight: 700; }
        
        .btn-row-ack {
            background: #ef4444;
            color: #ffffff;
            border: none;
            padding: 2px 7px;
            border-radius: 4px;
            font-size: 10px;
            font-weight: 800;
            cursor: pointer;
            transition: all 0.15s;
        }
        .btn-row-ack:hover {
            background: #dc2626;
            transform: scale(1.05);
        }
        .scada-empty-log {
            padding: 24px;
            text-align: center;
            color: #64748b;
            font-size: 12px;
            font-style: italic;
        }