:root {
            --bg-deep: #030712;
            --bg-card: rgba(13, 20, 36, 0.78);
            --bg-card-hover: rgba(17, 28, 52, 0.92);
            --border-glow: rgba(56, 189, 248, 0.28);
            --border-subtle: rgba(255, 255, 255, 0.08);
            --primary: #38bdf8;
            --primary-glow: rgba(56, 189, 248, 0.5);
            --success: #10b981;
            --success-glow: rgba(16, 185, 129, 0.5);
            --warning: #f59e0b;
            --warning-glow: rgba(245, 158, 11, 0.5);
            --accent: #8b5cf6;
            --accent-glow: rgba(139, 92, 246, 0.5);
            --purple: #c084fc;
            --danger: #f43f5e;
            --danger-glow: rgba(244, 63, 94, 0.5);
            --cyan: #06b6d4;
            --gold: #facc15;
            --text-main: #f8fafc;
            --text-muted: #94a3b8;
            --font-display: 'Orbitron', 'Rajdhani', -apple-system, sans-serif;
            --font-mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace;
            --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
        }

        * {
            box-sizing: border-box;
        }

        body {
            font-family: var(--font-sans);
            background-color: var(--bg-deep);
            background-image: 
                radial-gradient(circle at 50% 0%, rgba(56, 189, 248, 0.15) 0%, transparent 60%),
                radial-gradient(circle at 85% 20%, rgba(16, 185, 129, 0.10) 0%, transparent 50%),
                radial-gradient(circle at 15% 70%, rgba(139, 92, 246, 0.10) 0%, transparent 50%),
                linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px);
            background-size: 100% 100%, 100% 100%, 100% 100%, 48px 48px, 48px 48px;
            background-attachment: fixed;
            color: var(--text-main);
            margin: 0;
            padding: 24px;
            min-height: 100vh;
            overflow-x: hidden;
            -webkit-font-smoothing: antialiased;
        }

        ::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }
        ::-webkit-scrollbar-track {
            background: #030712;
        }
        ::-webkit-scrollbar-thumb {
            background: #1e293b;
            border-radius: 4px;
            border: 1px solid rgba(56, 189, 248, 0.3);
        }
        ::-webkit-scrollbar-thumb:hover {
            background: #0284c7;
        }

        /* HEADER HUD */
        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: rgba(13, 20, 36, 0.85);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border: 1px solid var(--border-glow);
            border-radius: 18px;
            padding: 20px 24px;
            margin-bottom: 24px;
            flex-wrap: wrap;
            gap: 16px;
            box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.6), 0 0 20px rgba(56, 189, 248, 0.15);
            position: relative;
            overflow: hidden;
        }
        .header::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0; height: 2px;
            background: linear-gradient(90deg, transparent, #38bdf8, #10b981, #c084fc, transparent);
            animation: beamMove 8s linear infinite;
        }
        @keyframes beamMove {
            0% { background-position: -200% 0; }
            100% { background-position: 200% 0; }
        }

        .title-group h1 {
            margin: 0;
            font-family: var(--font-display);
            font-size: 21px;
            letter-spacing: 0.05em;
            background: linear-gradient(135deg, #ffffff 0%, #38bdf8 50%, #818cf8 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            font-weight: 800;
            text-shadow: 0 0 24px rgba(56, 189, 248, 0.35);
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .title-group p {
            margin: 6px 0 0;
            font-size: 12.5px;
            color: var(--text-muted);
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            align-items: center;
        }
        .info-pill {
            background: rgba(255, 255, 255, 0.04);
            border: 1px solid rgba(255, 255, 255, 0.08);
            padding: 2px 8px;
            border-radius: 6px;
            font-family: var(--font-mono);
            font-size: 11.5px;
            color: #cbd5e1;
        }

        .live-heartbeat {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: rgba(16, 185, 129, 0.1);
            border: 1px solid rgba(16, 185, 129, 0.35);
            padding: 4px 12px;
            border-radius: 9999px;
            font-size: 11.5px;
            font-weight: 700;
            color: #34d399;
            box-shadow: 0 0 12px rgba(16, 185, 129, 0.2);
        }
        .oscilloscope-svg {
            width: 42px;
            height: 16px;
        }
        .oscilloscope-path {
            stroke: #10b981;
            stroke-width: 1.8;
            fill: none;
            stroke-dasharray: 60;
            stroke-dashoffset: 60;
            animation: oscPulse 2.2s linear infinite;
        }
        @keyframes oscPulse {
            0% { stroke-dashoffset: 60; opacity: 0.3; }
            50% { stroke-dashoffset: 0; opacity: 1; }
            100% { stroke-dashoffset: -60; opacity: 0.3; }
        }

        .status-badge {
            padding: 6px 14px;
            border-radius: 9999px;
            font-weight: 700;
            font-size: 12px;
            display: inline-flex;
            align-items: center;
            gap: 7px;
            font-family: var(--font-mono);
            letter-spacing: 0.02em;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            backdrop-filter: blur(8px);
        }
        .status-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            display: inline-block;
            animation: pulse-dot 1.8s infinite;
        }
        @keyframes pulse-dot {
            0% { opacity: 0.5; transform: scale(0.85); }
            50% { opacity: 1; transform: scale(1.25); }
            100% { opacity: 0.5; transform: scale(0.85); }
        }

        .btn-action {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            padding: 7px 16px;
            border-radius: 9999px;
            font-size: 12px;
            font-weight: 700;
            cursor: pointer;
            border: 1px solid transparent;
            transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
            outline: none;
            box-shadow: 0 4px 14px rgba(0,0,0,0.4);
            text-transform: uppercase;
            letter-spacing: 0.04em;
            font-family: var(--font-sans);
        }
        .btn-action:hover {
            transform: translateY(-2px);
            filter: brightness(1.15);
        }
        .btn-action:active {
            transform: scale(0.96);
        }
        .btn-emergency {
            background: linear-gradient(135deg, #991b1b, #dc2626);
            color: #ffffff;
            border-color: #ef4444;
            box-shadow: 0 0 16px rgba(220, 38, 38, 0.5);
        }
        .btn-emergency:hover {
            box-shadow: 0 0 24px rgba(239, 68, 68, 0.8);
        }
        .btn-reboot {
            background: linear-gradient(135deg, #b45309, #f59e0b);
            color: #ffffff;
            border-color: #fbbf24;
            box-shadow: 0 0 14px rgba(245, 158, 11, 0.4);
        }
        .btn-poweron {
            background: linear-gradient(135deg, #047857, #10b981);
            color: #ffffff;
            border-color: #34d399;
            box-shadow: 0 0 14px rgba(16, 185, 129, 0.5);
        }
        .btn-monthly {
            background: linear-gradient(135deg, #6b21a8, #a855f7);
            color: #ffffff;
            border-color: #c084fc;
            box-shadow: 0 0 14px rgba(168, 85, 247, 0.4);
        }
        .btn-hud-control {
            background: rgba(30, 41, 59, 0.85);
            color: #e2e8f0;
            border: 1px solid rgba(56, 189, 248, 0.35);
        }
        .btn-hud-control:hover {
            border-color: #38bdf8;
            color: #38bdf8;
            box-shadow: 0 0 14px rgba(56, 189, 248, 0.35);
        }

        /* DIAGRAMA SINÓPTICO UNIFILAR */
        .synoptic-section {
            background: rgba(13, 20, 36, 0.82);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border: 1.5px solid rgba(56, 189, 248, 0.35);
            border-radius: 20px;
            padding: 24px;
            margin-bottom: 24px;
            box-shadow: 0 12px 36px -8px rgba(0, 0, 0, 0.7), 0 0 24px rgba(56, 189, 248, 0.15);
            position: relative;
            overflow: hidden;
        }
        .synoptic-section::after {
            content: '';
            position: absolute;
            bottom: 0; left: 0; right: 0; height: 1px;
            background: linear-gradient(90deg, transparent, rgba(56, 189, 248, 0.6), transparent);
        }

        .synoptic-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
            padding-bottom: 14px;
            margin-bottom: 20px;
            flex-wrap: wrap;
            gap: 12px;
        }
        .synoptic-title {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .synoptic-title h2 {
            margin: 0;
            font-family: var(--font-display);
            font-size: 16px;
            letter-spacing: 0.05em;
            color: #38bdf8;
            font-weight: 700;
        }
        .synoptic-title p {
            margin: 2px 0 0;
            font-size: 12px;
            color: var(--text-muted);
        }

        .synoptic-grid {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 16px;
            position: relative;
            z-index: 2;
        }
        @media (max-width: 1024px) {
            .synoptic-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }
        @media (max-width: 640px) {
            body {
                padding: 12px 10px;
            }
            .header {
                padding: 16px 14px;
                border-radius: 14px;
                flex-direction: column;
                align-items: flex-start;
                gap: 12px;
            }
            .header .title-group h1 {
                font-size: 17px !important;
                line-height: 1.3;
            }
            .grid {
                grid-template-columns: 1fr !important;
                gap: 12px;
            }
            .card {
                padding: 16px;
                border-radius: 14px;
            }
            .synoptic-grid {
                grid-template-columns: 1fr !important;
                gap: 10px;
            }
            .synoptic-svg-canvas {
                display: none;
            }
            .financial-hero-grid,
            .financial-details-grid {
                grid-template-columns: 1fr !important;
                gap: 12px;
            }
            .battery-section {
                padding: 16px 14px;
                border-radius: 14px;
            }
            .wizard-stepper-grid {
                grid-template-columns: repeat(2, 1fr) !important;
                gap: 6px !important;
            }
            .wizard-stepper-grid #wizard-nav-tab-5 {
                grid-column: span 2;
            }
            .hud-chart-container {
                padding: 14px 10px;
                border-radius: 14px;
            }
            .hud-controls-bar {
                flex-direction: column;
                align-items: flex-start;
                gap: 10px;
            }
            .hud-controls-right {
                width: 100%;
                justify-content: flex-start;
                flex-wrap: wrap;
                gap: 6px;
            }
            .scada-canvas-wrapper {
                height: 320px;
            }
            .modal-content-lg {
                padding: 18px 12px;
                width: 96%;
                border-radius: 14px;
            }
            .btn-action {
                font-size: 11px;
                padding: 6px 12px;
            }
        }

        .synoptic-node {
            background: rgba(15, 23, 42, 0.75);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 14px;
            padding: 16px;
            text-align: center;
            position: relative;
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
        }
        .synoptic-node:hover {
            transform: translateY(-3px);
            border-color: rgba(56, 189, 248, 0.5);
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6), 0 0 16px rgba(56, 189, 248, 0.2);
        }
        .synoptic-node-icon {
            font-size: 32px;
            margin-bottom: 6px;
            filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.3));
        }
        .synoptic-node-name {
            font-size: 11px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            color: var(--text-muted);
            margin-bottom: 4px;
        }
        .synoptic-node-val {
            font-family: var(--font-mono);
            font-size: 20px;
            font-weight: 800;
            margin-bottom: 4px;
        }
        .synoptic-node-sub {
            font-size: 11px;
            color: #94a3b8;
            line-height: 1.3;
        }

        .synoptic-svg-canvas {
            width: 100%;
            height: 48px;
            margin: 12px 0 0;
            overflow: visible;
        }
        .conduit-line {
            stroke: rgba(255, 255, 255, 0.1);
            stroke-width: 4;
            fill: none;
        }
        .conduit-flow {
            stroke-width: 4;
            fill: none;
            stroke-dasharray: 8, 12;
            animation: conduitFlow 1.4s linear infinite;
        }
        @keyframes conduitFlow {
            from { stroke-dashoffset: 40; }
            to { stroke-dashoffset: 0; }
        }
        @keyframes conduitFlowRev {
            from { stroke-dashoffset: 0; }
            to { stroke-dashoffset: 40; }
        }

        /* CARDS DA BENTO GRID */
        .grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
            gap: 20px;
            margin-bottom: 24px;
        }
        .card {
            background: var(--bg-card);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border: 1px solid var(--border-subtle);
            border-radius: 16px;
            padding: 22px;
            box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08);
            position: relative;
            overflow: hidden;
            transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease, border-color 0.25s ease;
        }
        .card:hover {
            transform: translateY(-3px);
            border-color: rgba(56, 189, 248, 0.4);
            box-shadow: 0 16px 40px -10px rgba(0, 0, 0, 0.65), 0 0 24px rgba(56, 189, 248, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.15);
        }
        .card-header {
            font-size: 12px;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            color: var(--text-muted);
            margin-bottom: 12px;
            font-weight: 700;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .card-value {
            font-family: var(--font-mono);
            font-size: 34px;
            font-weight: 800;
            margin-bottom: 6px;
            letter-spacing: -0.02em;
        }
        .val-primary { color: var(--primary); text-shadow: 0 0 18px var(--primary-glow); }
        .val-success { color: var(--success); text-shadow: 0 0 18px var(--success-glow); }
        .val-warning { color: var(--warning); text-shadow: 0 0 18px var(--warning-glow); }
        .val-accent  {{ color: var(--accent);  text-shadow: 0 0 18px var(--accent-glow); }}
        .val-danger  {{ color: var(--danger);  text-shadow: 0 0 18px var(--danger-glow); }}
        .val-cyan    {{ color: var(--cyan);    text-shadow: 0 0 18px rgba(6, 182, 212, 0.5); }}
        .card-subtext {
            font-size: 12px;
            color: var(--text-muted);
            line-height: 1.45;
        }

        /* PROJEÇÃO FINANCEIRA REGULATÓRIA */
        .financial-projection-section {
            margin-top: 28px;
            background: linear-gradient(135deg, rgba(15, 23, 42, 0.95) 0%, rgba(6, 78, 59, 0.40) 45%, rgba(15, 23, 42, 0.95) 100%);
            border: 1.5px solid rgba(16, 185, 129, 0.75);
            border-radius: 20px;
            padding: 26px;
            box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5), 0 0 30px rgba(16, 185, 129, 0.25);
            position: relative;
            overflow: hidden;
            backdrop-filter: blur(20px);
        }
        .financial-projection-section::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0; height: 3px;
            background: linear-gradient(90deg, #10b981, #38bdf8, #a855f7, #10b981);
            background-size: 300% 100%;
            animation: gradient-shimmer 6s linear infinite;
        }
        @keyframes gradient-shimmer {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }
        .financial-hero-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
            gap: 16px;
            margin-bottom: 20px;
        }
        .financial-hero-card {
            background: rgba(11, 17, 32, 0.88);
            border: 1px solid rgba(51, 65, 85, 0.85);
            border-radius: 14px;
            padding: 20px 22px;
            position: relative;
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
            transition: transform 0.2s ease, border-color 0.2s ease;
        }
        .financial-hero-card:hover {
            transform: translateY(-2px);
            border-color: rgba(16, 185, 129, 0.8);
        }
        .financial-hero-card.highlight-emerald {
            border-color: rgba(16, 185, 129, 0.6);
            background: linear-gradient(135deg, rgba(6, 78, 59, 0.35) 0%, rgba(11, 17, 32, 0.92) 100%);
            box-shadow: 0 0 22px rgba(16, 185, 129, 0.25);
        }
        .financial-hero-card.highlight-sky {
            border-color: rgba(56, 189, 248, 0.6);
            background: linear-gradient(135deg, rgba(3, 105, 161, 0.3) 0%, rgba(11, 17, 32, 0.92) 100%);
            box-shadow: 0 0 22px rgba(56, 189, 248, 0.25);
        }
        .financial-hero-card.highlight-purple {
            border-color: rgba(192, 132, 252, 0.6);
            background: linear-gradient(135deg, rgba(107, 33, 168, 0.3) 0%, rgba(11, 17, 32, 0.92) 100%);
            box-shadow: 0 0 22px rgba(192, 132, 252, 0.25);
        }
        .financial-hero-lbl {
            font-size: 12px;
            font-weight: 700;
            color: #94a3b8;
            text-transform: uppercase;
            letter-spacing: 0.6px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 8px;
        }
        .financial-hero-val {
            font-family: var(--font-mono);
            font-size: 32px;
            font-weight: 800;
            line-height: 1.15;
            margin-bottom: 6px;
        }
        .financial-hero-sub {
            font-size: 12px;
            color: #cbd5e1;
            line-height: 1.45;
        }
        .financial-hero-tag {
            display: inline-block;
            margin-top: 8px;
            font-size: 11px;
            font-weight: 700;
            padding: 4px 10px;
            border-radius: 8px;
        }
        .financial-details-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
            gap: 14px;
            background: rgba(11, 17, 32, 0.70);
            border: 1px solid #1e293b;
            border-radius: 14px;
            padding: 18px;
        }
        .financial-detail-box {
            background: rgba(15, 23, 42, 0.75);
            border: 1px solid #334155;
            border-radius: 10px;
            padding: 14px 16px;
        }
        .financial-detail-box h4 {
            font-size: 12.5px;
            font-weight: 700;
            color: #38bdf8;
            margin: 0 0 10px 0;
            display: flex;
            align-items: center;
            gap: 6px;
        }
        .financial-detail-row {
            display: flex;
            justify-content: space-between;
            font-size: 11.5px;
            margin-bottom: 5px;
            color: #94a3b8;
        }
        .financial-detail-row strong {
            color: #f1f5f9;
            font-family: var(--font-mono);
        }

        /* SEÇÃO BATERIA LIFEPO4 */
        .battery-section {
            margin-top: 28px;
            background: rgba(19, 28, 46, 0.78);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(56, 189, 248, 0.3);
            border-radius: 20px;
            padding: 26px;
            box-shadow: 0 10px 32px rgba(0, 0, 0, 0.4);
        }
        .section-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid var(--border-subtle);
            padding-bottom: 14px;
            margin-bottom: 20px;
            flex-wrap: wrap;
            gap: 12px;
        }
        .section-title {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .section-title h2 {
            margin: 0;
            font-family: var(--font-display);
            font-size: 18px;
            color: #38bdf8;
            font-weight: 700;
        }
        .section-title-group p {
            margin: 4px 0 0;
            font-size: 12.5px;
            color: var(--text-muted);
        }

        .battery-level-bar {
            display: flex;
            gap: 4px;
            margin: 10px 0;
            height: 14px;
            background: #090d16;
            padding: 3px;
            border-radius: 6px;
            border: 1px solid #1e293b;
        }
        .bat-segment {
            flex: 1;
            background: #1e293b;
            border-radius: 2px;
            transition: all 0.3s ease;
        }
        .bat-segment.active {
            background: #10b981;
            box-shadow: 0 0 8px rgba(16, 185, 129, 0.7);
        }
        .bat-segment.active-warning {
            background: #f59e0b;
            box-shadow: 0 0 8px rgba(245, 158, 11, 0.7);
        }
        .bat-segment.active-danger {
            background: #ef4444;
            box-shadow: 0 0 8px rgba(239, 68, 68, 0.7);
        }

        /* RACK VIRTUAL SCADA 16 CÉLULAS */
        .bms-rack-container {
            background: #0b1120;
            border: 1px solid #1e293b;
            border-radius: 12px;
            padding: 16px;
            margin: 18px 0;
        }
        .bms-rack-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 12px;
            font-size: 12.5px;
            font-weight: 700;
            color: #cbd5e1;
        }
        .bms-cells-grid {
            display: grid;
            grid-template-columns: repeat(16, 1fr);
            gap: 6px;
        }
        @media (max-width: 1024px) {
            .bms-cells-grid {
                grid-template-columns: repeat(8, 1fr);
            }
        }
        @media (max-width: 640px) {
            .bms-cells-grid {
                grid-template-columns: repeat(4, 1fr);
            }
        }
        .bms-cell-box {
            background: rgba(15, 23, 42, 0.85);
            border: 1px solid #334155;
            border-radius: 6px;
            padding: 8px 4px;
            text-align: center;
            font-family: var(--font-mono);
            font-size: 10px;
            transition: all 0.2s ease;
        }
        .bms-cell-box:hover {
            border-color: #38bdf8;
            box-shadow: 0 0 10px rgba(56, 189, 248, 0.4);
        }
        .bms-cell-num {
            color: #94a3b8;
            font-size: 9px;
            font-weight: 700;
            margin-bottom: 3px;
        }
        .bms-cell-volt {
            color: #34d399;
            font-weight: 800;
            font-size: 11px;
        }
        .bms-cell-bar {
            height: 4px;
            background: #1e293b;
            border-radius: 2px;
            margin-top: 4px;
            overflow: hidden;
        }
        .bms-cell-bar-fill {
            height: 100%;
            background: #10b981;
            width: 100%;
        }

        .chart-box {
            background: #0d1525;
            border: 1px solid var(--border-subtle);
            border-radius: 14px;
            padding: 18px;
            margin-top: 16px;
        }
        .img-container {
            background: var(--bg-card);
            border: 1px solid var(--border-subtle);
            border-radius: 16px;
            padding: 20px;
            text-align: center;
            margin-top: 24px;
            backdrop-filter: blur(16px);
        }
        .img-container img {
            max-width: 100%;
            height: auto;
            border-radius: 10px;
            box-shadow: 0 8px 30px rgba(0,0,0,0.5);
        }

        /* TABELAS SCADA */
        .scada-telemetry-hud-card {
            background: linear-gradient(135deg, rgba(13, 20, 36, 0.95) 0%, rgba(8, 14, 26, 0.98) 100%);
            border: 1px solid rgba(56, 189, 248, 0.35);
            border-radius: 18px;
            padding: 24px;
            margin-top: 24px;
            backdrop-filter: blur(20px);
            box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6), inset 0 0 20px rgba(56, 189, 248, 0.04);
            position: relative;
        }
        .scada-hud-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 14px;
            padding-bottom: 16px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
            margin-bottom: 16px;
        }
        .hud-mini-stat {
            padding: 6px 14px;
            border-radius: 8px;
            border: 1px solid;
            display: flex;
            flex-direction: column;
            gap: 2px;
        }
        .scada-hud-toolbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 12px;
            padding-bottom: 14px;
            margin-bottom: 14px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        }
        .btn-hud-pill {
            background: #090d16;
            border: 1px solid #1e293b;
            color: #94a3b8;
            font-size: 11.5px;
            font-weight: 600;
            padding: 5px 12px;
            border-radius: 9999px;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            transition: all 0.2s;
        }
        .btn-hud-pill:hover {
            border-color: #38bdf8;
            color: #f8fafc;
        }
        .hud-pill-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
        }
        .btn-hud-pill.active-emerald {
            background: rgba(16, 185, 129, 0.15);
            border-color: #10b981;
            color: #34d399;
            box-shadow: 0 0 10px rgba(16, 185, 129, 0.25);
        }
        .btn-hud-pill.active-purple {
            background: rgba(192, 132, 252, 0.15);
            border-color: #c084fc;
            color: #d8b4fe;
            box-shadow: 0 0 10px rgba(192, 132, 252, 0.25);
        }
        .btn-hud-pill.active-amber {
            background: rgba(245, 158, 11, 0.15);
            border-color: #f59e0b;
            color: #fbbf24;
            box-shadow: 0 0 10px rgba(245, 158, 11, 0.25);
        }
        .btn-hud-pill.active-sky {
            background: rgba(56, 189, 248, 0.15);
            border-color: #38bdf8;
            color: #7dd3fc;
            box-shadow: 0 0 10px rgba(56, 189, 248, 0.25);
        }
        .btn-hud-pill.active-slate {
            background: rgba(148, 163, 184, 0.15);
            border-color: #94a3b8;
            color: #f1f5f9;
        }
        .btn-hud-filter {
            background: #090d16;
            border: 1px solid #1e293b;
            color: #94a3b8;
            font-size: 11px;
            font-weight: 700;
            padding: 5px 10px;
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.2s;
        }
        .btn-hud-filter.active {
            background: #0284c7;
            border-color: #38bdf8;
            color: #ffffff;
            box-shadow: 0 0 10px rgba(56, 189, 248, 0.35);
        }
        .btn-hud-action {
            background: #0f172a;
            border: 1px solid #334155;
            color: #cbd5e1;
            font-size: 11px;
            font-weight: 700;
            padding: 5px 12px;
            border-radius: 6px;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            transition: all 0.2s;
        }
        .btn-hud-action:hover {
            background: #1e293b;
            color: #38bdf8;
            border-color: #0284c7;
        }
        .scada-canvas-wrapper {
            position: relative;
            width: 100%;
            height: 480px;
            border-radius: 12px;
            background: #020617;
            border: 1px solid #1e293b;
            overflow: hidden;
            box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.8);
        }
        #scada-chart-canvas {
            width: 100%;
            height: 100%;
            display: block;
        }
        .chart-hud-tooltip {
            position: absolute;
            pointer-events: none;
            background: rgba(11, 17, 32, 0.92);
            border: 1px solid #38bdf8;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.8), 0 0 14px rgba(56, 189, 248, 0.4);
            border-radius: 10px;
            padding: 10px 14px;
            font-family: var(--font-sans);
            font-size: 12px;
            z-index: 50;
            backdrop-filter: blur(12px);
            min-width: 180px;
            transform: translate(-50%, -115%);
            transition: transform 0.05s ease-out;
        }
        .tooltip-header {
            font-family: var(--font-mono);
            font-weight: 700;
            color: #38bdf8;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            padding-bottom: 4px;
            margin-bottom: 6px;
            font-size: 13px;
        }
        .tt-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 3px;
        }
        .tt-row strong {
            font-family: var(--font-mono);
            font-size: 12.5px;
        }

        /* TABELAS SCADA */
        .table-card {
            margin-top: 24px;
            background: var(--bg-card);
            border: 1px solid var(--border-subtle);
            border-radius: 16px;
            overflow: hidden;
            backdrop-filter: blur(16px);
            box-shadow: 0 8px 30px rgba(0,0,0,0.4);
        }
        table {
            width: 100%;
            border-collapse: collapse;
            font-size: 13.5px;
        }
        th, td {
            padding: 13px 18px;
            text-align: left;
            border-bottom: 1px solid var(--border-subtle);
        }
        th {
            background: #1e293b;
            color: var(--text-main);
            font-weight: 700;
            font-family: var(--font-sans);
            text-transform: uppercase;
            font-size: 12px;
            letter-spacing: 0.05em;
        }
        tr:nth-child(even) {
            background: rgba(255, 255, 255, 0.02);
        }
        tr:hover {
            background: rgba(56, 189, 248, 0.04);
        }
        .val-highlight {
            font-weight: 700;
            color: var(--primary);
            font-family: var(--font-mono);
        }
        .val-highlight-danger {
            font-weight: 700;
            color: var(--danger);
            font-family: var(--font-mono);
        }
        .val-highlight-success {
            font-weight: 700;
            color: var(--success);
            font-family: var(--font-mono);
        }
        .val-highlight-warning {
            font-weight: 700;
            color: var(--warning);
            font-family: var(--font-mono);
        }

        .modal-backdrop {
            display: none;
            position: fixed;
            top: 0; left: 0; width: 100vw; height: 100vh;
            background: rgba(0, 0, 0, 0.85);
            backdrop-filter: blur(10px);
            z-index: 9999;
            justify-content: center;
            align-items: center;
        }
        .modal-content {
            background: #131c2e;
            border: 1px solid var(--border-glow);
            border-radius: 18px;
            padding: 28px;
            max-width: 490px;
            width: 90%;
            text-align: center;
            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7);
            animation: modalFadeIn 0.22s ease-out;
        }
        @keyframes modalFadeIn {
            from { opacity: 0; transform: scale(0.92); }
            to { opacity: 1; transform: scale(1); }
        }

        .modal-content-lg {
            background: #0f172a;
            border: 1px solid #334155;
            border-radius: 18px;
            padding: 26px 30px;
            max-width: 980px;
            width: 95%;
            max-height: 90vh;
            overflow-y: auto;
            text-align: left;
            box-shadow: 0 24px 60px rgba(0, 0, 0, 0.8);
            animation: modalFadeIn 0.22s ease-out;
        }
        .monthly-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
            gap: 12px;
            margin: 16px 0;
        }
        .monthly-mini-card {
            background: #1e293b;
            border: 1px solid #334155;
            border-radius: 10px;
            padding: 14px 16px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        .monthly-mini-card .card-lbl {
            font-size: 11.5px;
            color: #94a3b8;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        .monthly-mini-card .card-val {
            font-size: 22px;
            font-weight: 800;
            margin: 6px 0 4px;
            font-family: var(--font-mono);
        }
        .monthly-mini-card .card-sub {
            font-size: 11px;
            color: #64748b;
        }
        .month-selector-tab {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
            margin-bottom: 14px;
        }
        .month-tab-btn {
            background: #1e293b;
            border: 1px solid #334155;
            color: #cbd5e1;
            padding: 7px 16px;
            border-radius: 8px;
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s ease;
        }
        .month-tab-btn:hover {
            border-color: #a855f7;
            color: #ffffff;
        }
        .month-tab-btn.active {
            background: linear-gradient(135deg, #6b21a8, #a855f7);
            border-color: #c084fc;
            color: #ffffff;
            box-shadow: 0 0 12px rgba(168, 85, 247, 0.5);
        }

        .toast-notify {
            position: fixed;
            bottom: 24px;
            right: 24px;
            background: #1e293b;
            color: #f8fafc;
            border: 1px solid #38bdf8;
            padding: 12px 20px;
            border-radius: 12px;
            font-weight: 600;
            font-size: 13.5px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.6);
            display: none;
            z-index: 10000;
            animation: toastIn 0.3s ease;
            font-family: var(--font-sans);
        }
        @keyframes toastIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* ========================================================= */
        /* ESTILOS DO ASSISTENTE DE INTELIGÊNCIA ARTIFICIAL SOLAR    */
        /* ========================================================= */
        #ai-copilot-fab {
            position: fixed;
            bottom: 24px;
            right: 24px;
            z-index: 9995;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 10px;
            background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(30, 27, 75, 0.95));
            border: 2px solid #38bdf8;
            border-radius: 9999px;
            padding: 10px 18px;
            box-shadow: 0 8px 30px rgba(56, 189, 248, 0.45), 0 0 15px rgba(124, 58, 237, 0.35);
            backdrop-filter: blur(12px);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            user-select: none;
        }
        #ai-copilot-fab:hover {
            transform: translateY(-3px) scale(1.03);
            border-color: #a855f7;
            box-shadow: 0 12px 35px rgba(168, 85, 247, 0.55), 0 0 20px rgba(56, 189, 248, 0.55);
        }
        #ai-copilot-fab:active {
            transform: scale(0.97);
        }
        @media (max-width: 768px) {
            #ai-copilot-fab {
                bottom: 16px;
                right: 16px;
                padding: 8px 14px;
            }
            #ai-copilot-fab .fab-sub {
                display: none;
            }
        }

        .modal-ai-backdrop {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background: rgba(3, 7, 18, 0.85);
            backdrop-filter: blur(12px);
            z-index: 10000;
            justify-content: center;
            align-items: center;
            animation: fadeIn 0.25s ease-out;
        }

        .modal-ai-card {
            width: 95%;
            max-width: 900px;
            height: 86vh;
            max-height: 860px;
            background: #090e17;
            border: 1px solid rgba(56, 189, 248, 0.4);
            border-top: 4px solid #38bdf8;
            border-radius: 18px;
            box-shadow: 0 25px 60px rgba(0,0,0,0.85), 0 0 35px rgba(56, 189, 248, 0.25);
            display: flex;
            flex-direction: column;
            overflow: hidden;
            font-family: var(--font-sans);
        }

        .modal-ai-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 14px 20px;
            background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(30, 41, 59, 0.95));
            border-bottom: 1px solid rgba(56, 189, 248, 0.2);
        }

        .modal-ai-chips-bar {
            display: flex;
            gap: 8px;
            padding: 10px 16px;
            background: rgba(15, 23, 42, 0.8);
            border-bottom: 1px solid #1e293b;
            overflow-x: auto;
            white-space: nowrap;
            scrollbar-width: thin;
        }

        .ai-chip {
            background: rgba(30, 41, 59, 0.8);
            border: 1px solid rgba(56, 189, 248, 0.3);
            border-radius: 9999px;
            color: #cbd5e1;
            padding: 6px 14px;
            font-size: 11.5px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s ease;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            user-select: none;
        }
        .ai-chip:hover {
            background: rgba(56, 189, 248, 0.2);
            border-color: #38bdf8;
            color: #38bdf8;
            transform: translateY(-1px);
        }

        .modal-ai-chat-body {
            flex: 1;
            overflow-y: auto;
            padding: 18px;
            display: flex;
            flex-direction: column;
            gap: 14px;
            background: radial-gradient(circle at 50% 0%, rgba(14, 165, 233, 0.04) 0%, transparent 60%);
            scrollbar-width: thin;
            scrollbar-color: #334155 transparent;
        }

        .ai-msg {
            display: flex;
            gap: 10px;
            max-width: 90%;
            animation: fadeInUp 0.3s ease-out;
        }

        .ai-msg-user {
            align-self: flex-end;
            flex-direction: row-reverse;
        }

        .ai-msg-avatar {
            width: 34px;
            height: 34px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 17px;
            flex-shrink: 0;
            background: #1e293b;
            border: 1px solid #475569;
        }

        .ai-msg-user .ai-msg-avatar {
            background: linear-gradient(135deg, #0284c7, #0369a1);
            border-color: #38bdf8;
        }

        .ai-msg-bot .ai-msg-avatar {
            background: linear-gradient(135deg, #1e1b4b, #3b0764);
            border: 1px solid #8b5cf6;
            box-shadow: 0 0 10px rgba(139, 92, 246, 0.4);
        }

        .ai-msg-bubble {
            padding: 12px 16px;
            border-radius: 14px;
            font-size: 13px;
            line-height: 1.6;
            color: #e2e8f0;
            word-break: break-word;
        }

        .ai-msg-user .ai-msg-bubble {
            background: linear-gradient(135deg, #0284c7, #0369a1);
            color: #ffffff;
            border-bottom-right-radius: 2px;
            box-shadow: 0 4px 15px rgba(2, 132, 199, 0.3);
        }

        .ai-msg-bot .ai-msg-bubble {
            background: #111a2e;
            border: 1px solid rgba(56, 189, 248, 0.25);
            border-bottom-left-radius: 2px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.4);
        }

        .ai-action-card {
            background: rgba(15, 23, 42, 0.9);
            border: 1px solid rgba(56, 189, 248, 0.4);
            border-radius: 10px;
            padding: 12px;
            margin-top: 10px;
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .ai-btn-exec {
            background: linear-gradient(135deg, #0284c7, #7c3aed);
            color: #ffffff;
            border: 1px solid #38bdf8;
            border-radius: 8px;
            padding: 8px 14px;
            font-size: 12px;
            font-weight: 700;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            transition: all 0.2s ease;
            box-shadow: 0 4px 12px rgba(2, 132, 199, 0.35);
        }
        .ai-btn-exec:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 16px rgba(124, 58, 237, 0.5);
            border-color: #a855f7;
        }

        .modal-ai-input-bar {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 12px 18px;
            background: #0d1524;
            border-top: 1px solid rgba(56, 189, 248, 0.2);
        }

        .ai-input-field {
            flex: 1;
            background: #182235;
            border: 1px solid #334155;
            border-radius: 10px;
            padding: 11px 14px;
            color: #ffffff;
            font-size: 13.5px;
            font-family: inherit;
            outline: none;
            transition: border-color 0.2s ease;
        }
        .ai-input-field:focus {
            border-color: #38bdf8;
            box-shadow: 0 0 10px rgba(56, 189, 248, 0.3);
        }

        /* ========================================================= */
        /* PAINEL DE REGISTRO, LOGIN E SENHA NA PÁGINA INICIAL       */
        /* ========================================================= */
        .home-auth-section {
            background: linear-gradient(145deg, rgba(13, 20, 36, 0.92) 0%, rgba(15, 23, 42, 0.96) 100%);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border: 1px solid rgba(56, 189, 248, 0.38);
            border-radius: 18px;
            padding: 20px 24px;
            margin-bottom: 24px;
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.65), 0 0 25px rgba(56, 189, 248, 0.12);
            position: relative;
            overflow: hidden;
        }
        .home-auth-section::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0; height: 3px;
            background: linear-gradient(90deg, #38bdf8, #10b981, #a855f7, #38bdf8);
        }
        .home-auth-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 12px;
            padding-bottom: 14px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
            margin-bottom: 18px;
        }
        .home-auth-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
            gap: 20px;
        }
        .home-auth-box {
            background: rgba(9, 14, 26, 0.78);
            border: 1px solid rgba(56, 189, 248, 0.25);
            border-radius: 14px;
            padding: 18px 20px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            transition: border-color 0.25s ease, box-shadow 0.25s ease;
        }
        .home-auth-box:hover {
            border-color: rgba(56, 189, 248, 0.5);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.45);
        }
        .home-auth-box.register-box {
            border-color: rgba(16, 185, 129, 0.3);
        }
        .home-auth-box.register-box:hover {
            border-color: rgba(16, 185, 129, 0.6);
        }
        .home-auth-title {
            font-family: var(--font-display);
            font-size: 14px;
            font-weight: 800;
            letter-spacing: 0.05em;
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 14px;
            padding-bottom: 8px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.06);
        }
        .home-form-row {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
            gap: 12px;
            margin-bottom: 12px;
        }
        .home-field-group {
            display: flex;
            flex-direction: column;
            gap: 5px;
        }
        .home-field-label {
            font-size: 11px;
            font-weight: 700;
            color: #94a3b8;
            text-transform: uppercase;
            letter-spacing: 0.04em;
        }
        .home-input-wrap {
            position: relative;
            display: flex;
            align-items: center;
        }
        .home-input-icon {
            position: absolute;
            left: 11px;
            font-size: 14px;
            pointer-events: none;
            opacity: 0.85;
        }
        .home-input {
            width: 100%;
            background: rgba(15, 23, 42, 0.9);
            border: 1px solid rgba(56, 189, 248, 0.25);
            border-radius: 9px;
            padding: 10px 34px 10px 34px;
            color: #ffffff;
            font-size: 13px;
            font-family: var(--font-sans);
            outline: none;
            transition: all 0.2s ease;
        }
        .home-input:focus {
            border-color: #38bdf8;
            box-shadow: 0 0 12px rgba(56, 189, 248, 0.3);
            background: #0f172a;
        }
        .home-input.reg-input:focus {
            border-color: #10b981;
            box-shadow: 0 0 12px rgba(16, 185, 129, 0.3);
        }
        .home-pwd-eye {
            position: absolute;
            right: 8px;
            background: transparent;
            border: none;
            color: #94a3b8;
            cursor: pointer;
            font-size: 14px;
            padding: 4px;
        }
        .home-pwd-eye:hover {
            color: #38bdf8;
        }
        .home-btn-submit {
            width: 100%;
            padding: 11px 16px;
            border-radius: 10px;
            font-size: 12.5px;
            font-weight: 800;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            transition: all 0.2s ease;
            margin-top: 6px;
        }
        .home-btn-login {
            background: linear-gradient(135deg, #0284c7, #2563eb);
            border: 1px solid #38bdf8;
            color: #ffffff;
            box-shadow: 0 4px 15px rgba(2, 132, 199, 0.35);
        }
        .home-btn-register {
            background: linear-gradient(135deg, #059669, #047857);
            border: 1px solid #34d399;
            color: #ffffff;
            box-shadow: 0 4px 15px rgba(16, 185, 129, 0.35);
        }
        .home-btn-submit:hover {
            transform: translateY(-1px);
            filter: brightness(1.1);
        }

    



/* SCADA_PRIVACY_STYLES_BEGIN */
html[data-scada-locked] body > :not(#scada-auth-gate):not(script):not(style):not(link){display:none!important}
#scada-auth-gate{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;background:#05111e;color:#e6f1ff;font-family:Inter,system-ui,sans-serif}
#scada-auth-gate[hidden]{display:none!important}.scada-login-shell{width:min(960px,100%)}.scada-login-brand{color:#00bfff;font-weight:700;letter-spacing:.07em;font-size:21px;margin:0 0 10px}.scada-login-intro{color:#93abc1;font-size:13px;margin:0 0 20px;line-height:1.6}
#scada-auth-gate .home-auth-section{display:block!important}#scada-auth-gate label[for="home-plant-select"]{display:none}#scada-auth-gate #btn-toggle-auth-panel{display:none}#scada-auth-gate .home-auth-header h2{font-size:14px!important}#scada-auth-gate .home-auth-header>div:last-child{display:none!important}
#scada-login-exit{margin-top:12px;padding:10px 14px;border-radius:6px;border:1px solid #28516d;background:#102c43;color:#d5ebff;cursor:pointer}
/* SCADA_PRIVACY_STYLES_END */

/* SCADA_PRO_STYLES_BEGIN */
:root{color-scheme:dark;--pro-bg:#05111e;--pro-panel:#091b2d;--pro-line:#163247;--pro-text:#eef5ff;--pro-muted:#8498ae;--pro-green:#00f078;--pro-blue:#00bfff;--pro-yellow:#ffcb36}
html{scroll-behavior:smooth;scroll-padding-top:90px}body{margin:0!important;padding:0!important;background:#02080f!important;background-image:none!important;color:var(--pro-text);font:14px Inter,'Segoe UI',Arial,sans-serif!important;letter-spacing:0!important}[hidden],#pro-legacy{display:none!important}*{box-sizing:border-box}a,button,input,select{touch-action:manipulation}:focus-visible{outline:2px solid var(--pro-blue)!important;outline-offset:4px}.pro-app{position:relative;min-height:calc(100vh - 48px);margin:24px auto;width:calc(100% - 56px);max-width:1680px;border:1px solid #173249;border-radius:34px;overflow:hidden;background:linear-gradient(120deg,#081d30,#05121f 64%,#06192a);box-shadow:0 20px 80px #0007}.pro-sidebar{position:absolute;inset:0 auto 0 0;width:220px;border-right:1px solid #173047;padding:20px 12px 18px;display:flex;flex-direction:column;gap:26px;background:linear-gradient(160deg,#0a1d30,#06121e);z-index:60}.pro-brand{display:flex;gap:8px;align-items:center;padding:0 4px;white-space:nowrap;font-size:18px;font-weight:750;letter-spacing:-.03em}.pro-brand svg{width:52px;height:52px;flex-shrink:0}.pro-brand em{color:var(--pro-blue);font-style:normal;font-weight:500}.pro-brand small{display:block;font-size:8px;color:#7696b4;letter-spacing:.06em;font-weight:400;margin-top:5px}.pro-nav{display:grid;gap:7px}.pro-nav a{display:flex;align-items:center;gap:15px;padding:13px 16px;color:#d5e3f2;font-size:13px;text-decoration:none;border:1px solid transparent;border-radius:7px;font-weight:500}.pro-nav svg{height:21px;width:21px;stroke:currentColor;stroke-width:1.6;fill:none;flex-shrink:0}.pro-nav a:hover,.pro-nav a[aria-current="page"]{background:linear-gradient(90deg,#06447b,#0a2849);border-color:#0a4c78;color:#d7f2ff;box-shadow:inset 3px 0 #00bfff}.pro-nav a[aria-current="page"] svg{color:#00bfff}.pro-sidebar-foot{margin-top:auto;padding:16px 13px 12px;border:1px solid #173249;border-radius:8px;background:#081c2f;line-height:1.6;font-size:10px;color:#8da2b6}.pro-sidebar-foot p{margin:0 0 11px;display:flex;gap:9px;align-items:flex-start}.pro-sidebar-foot p:last-child{margin:0}.pro-sidebar-foot svg{width:16px;height:16px;fill:none;stroke-width:1.7;stroke:var(--pro-green);flex-shrink:0;margin-top:2px}.pro-sidebar-foot .warning svg{stroke:#f7a856}.pro-sidebar-foot strong{display:block;font-weight:500;color:#d6e3f1;font-size:11px}.pro-sidebar-foot .warning strong{color:#ffaf55}.pro-sidebar-bottom{display:flex;align-items:center;gap:13px;color:#8aa0b5;font-size:10px;padding:0 14px;margin-top:-10px}.pro-sidebar-bottom svg{width:22px;height:22px;fill:none;stroke:#849cb5;stroke-width:1.5}.pro-shell{margin-left:220px;padding:0 15px 15px;min-width:0}.pro-topbar{height:78px;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:0 9px}.pro-topbar-left,.pro-actions{display:flex;align-items:center;gap:25px}.pro-plant-control{min-width:240px}.pro-topbar small{display:block;font-size:9px;color:#829ab2;margin-bottom:4px}.pro-topbar select{width:240px;height:33px;padding:0 14px 0 32px;border-radius:7px;border:1px solid #254056;background:#0c2034;color:#e2efff;font-size:12px}.pro-plant-slot{position:relative}.pro-plant-slot>svg{width:15px;height:15px;position:absolute;left:10px;top:9px;fill:none;stroke:#a6c4dd;stroke-width:1.6;pointer-events:none}.pro-source-wrap{display:flex;gap:9px;align-items:center;font-size:10px;color:#b9c9da;white-space:nowrap}.pro-tag{border:1px solid #ffc533;background:#ffc533;color:#15202c;padding:5px 9px;border-radius:5px;font-size:10px;font-weight:800;letter-spacing:.02em}.pro-notification{position:relative;background:none;border:0;color:#c2d7ed;padding:4px;cursor:pointer}.pro-notification svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6}.pro-notification .pro-alert-dot{position:absolute;top:0;right:2px;background:#ef476b;border:2px solid #092039;width:9px;height:9px;border-radius:50%}
.pro-top-bell-lang-group{display:inline-flex;align-items:center;gap:8px;position:relative}
.pro-lang-selector{position:relative;display:inline-flex;align-items:center}
.pro-lang-btn{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 10px;background:#091c2e;border:1px solid #1c3d5a;border-radius:9px;color:#c2d7ed;cursor:pointer;font-family:inherit;font-size:12px;font-weight:600;letter-spacing:.04em;transition:all .2s cubic-bezier(0.4,0,0.2,1);user-select:none}
.pro-lang-btn:hover,.pro-lang-btn.is-open{color:#00d2ff;border-color:#00bfff;background:#0b2742;box-shadow:0 0 12px rgba(0,191,255,0.35);transform:translateY(-1px)}
.pro-lang-btn svg{flex-shrink:0}
.pro-lang-code{font-size:11.5px;font-weight:700;color:#eef5ff}
.pro-lang-arrow{transition:transform .2s ease;color:#7d9bb8}
.pro-lang-btn.is-open .pro-lang-arrow{transform:rotate(180deg);color:#00bfff}
.pro-lang-menu{position:absolute;top:calc(100% + 8px);right:0;min-width:146px;background:#091c2e;border:1px solid #1d4363;border-radius:10px;box-shadow:0 12px 32px rgba(0,0,0,0.75),0 0 16px rgba(0,191,255,0.2);padding:6px;display:flex;flex-direction:column;gap:4px;z-index:1000;backdrop-filter:blur(14px);animation:pro-lang-fade .18s ease-out}
.pro-lang-menu[hidden]{display:none!important}
@keyframes pro-lang-fade{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
.pro-lang-item{display:flex;align-items:center;gap:9px;padding:7px 10px;border:1px solid transparent;border-radius:7px;background:transparent;color:#d2e4f6;font-family:inherit;font-size:12px;font-weight:500;cursor:pointer;transition:all .15s ease;width:100%;text-align:left}
.pro-lang-item:hover{background:#0d2a45;color:#00d2ff;border-color:#174266}
.pro-lang-item.is-active{background:linear-gradient(90deg,#074175,#0c2b4d);color:#00d2ff;border-color:#00bfff;font-weight:700}
.pro-lang-flag{font-size:15px;line-height:1}
.pro-lang-name{flex:1}
.pro-lang-tag{font-size:9.5px;padding:2px 5px;border-radius:4px;background:#081827;color:#7d9bb8;font-weight:700;border:1px solid #1a3b56}
.pro-lang-item.is-active .pro-lang-tag{color:#00d2ff;border-color:#00bfff}.pro-account{display:flex;align-items:center;gap:11px;border:0;background:transparent;color:#e4f0ff;text-align:left;padding:0;cursor:pointer}.pro-avatar{display:grid;place-items:center;width:37px;height:37px;background:#08a7ee;border:1px solid #57d3ff;border-radius:50%;color:white;font-size:12px}.pro-account strong{font-size:12px;font-weight:600;display:block;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pro-account small{margin:4px 0 0;font-size:9px}.pro-menu{display:none}.pro-content{padding:0}.pro-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:12px}.pro-card{position:relative;overflow:hidden;min-height:155px;background:linear-gradient(135deg,#0c2035,#071727);border:1px solid var(--pro-line);border-radius:9px;padding:17px 15px}.pro-card-top{display:flex;align-items:center;gap:10px;min-height:30px;padding-right:65px;font-size:12px;color:#eff6ff}.pro-kpi-icon{color:#ffc400;display:flex;align-items:center;justify-content:center;flex-shrink:0}.pro-kpi-icon svg{height:29px;width:29px;stroke:currentColor;stroke-width:1.8;fill:none;filter:drop-shadow(0 0 7px #ffc40055)}.pro-card.blue .pro-kpi-icon{color:#ff7779}.pro-card.green .pro-kpi-icon{color:#00f479}.pro-card-label{line-height:1.3}.pro-card-label small{display:block;font-size:9px;color:#a5b6c8}.pro-demo-label{position:absolute;right:12px;top:15px;font-size:8px;color:#718ca8;letter-spacing:.025em}.pro-value{font-size:32px;font-weight:650;letter-spacing:-.04em;line-height:1.35;margin-top:9px;font-variant-numeric:tabular-nums;white-space:nowrap}.pro-value small{font-size:14px;letter-spacing:0;font-weight:400;margin-left:6px}.pro-kpi-sub{position:relative;margin-top:3px;color:#829bb4;font-size:9px;line-height:1.45;max-width:73%;min-height:24px}.pro-kpi-sub::first-letter{color:var(--pro-green)}.pro-spark{position:absolute;width:100px;height:45px;right:12px;bottom:40px;overflow:visible}.pro-spark path{fill:none;stroke:#00bfff;stroke-width:1.8}.pro-card.blue .pro-spark path{stroke:#ffc400}.pro-card.green .pro-spark path{stroke:#00f078}.pro-bars{position:absolute;bottom:35px;right:15px;height:50px;display:flex;align-items:flex-end;gap:5px}.pro-bars i{display:block;width:7px;background:#254637;height:8px}.pro-dashboard-grid{display:grid;grid-template-columns:minmax(0,2.7fr) minmax(260px,1fr);gap:12px;align-items:stretch}.pro-panel{background:linear-gradient(130deg,#0b1e31,#071624);border:1px solid var(--pro-line);border-radius:9px;padding:14px 15px;min-width:0;scroll-margin-top:20px}.pro-panel-head{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:20px;margin-bottom:6px}.pro-panel h2{font-size:13px;font-weight:650;margin:0;color:#e6f1ff;letter-spacing:0;line-height:1.4;font-family:Inter,'Segoe UI',Arial,sans-serif}.pro-panel h2 span{color:#a5b8cb;font-weight:400;font-size:11px}.pro-heading-mark{display:inline-block;width:5px;height:18px;background:#03ceff;border-radius:3px;margin-right:9px;vertical-align:middle;box-shadow:0 0 10px #00bfff55}.pro-heading-mark.green{background:#00f078}.pro-sub{font-size:10px;color:#8fa5ba;line-height:1.6;margin:5px 0}.pro-live{font-size:8px;color:#718ca8}.pro-flow{width:100%;height:255px;display:block;overflow:visible}.pro-flow text{font-family:Inter,'Segoe UI',Arial,sans-serif;fill:#ccddeb;font-size:11px}.pro-flow .flow-value{fill:#00c4ff;font-size:21px;font-weight:600}.pro-flow .flow-value.green{fill:#00f078}.pro-flow .flow-value.yellow{fill:#ffcf39}.pro-flow .flow-small{font-size:9px;fill:#829eb7}.pro-flow .flow-wire{stroke:#0b4a5c;stroke-width:5;fill:none}.pro-flow .flow-route{stroke:#00e672;stroke-width:2.5;fill:none;filter:url(#flow-glow)}.pro-flow .flow-route.solar{stroke:#00bfff}.pro-flow .flow-route.house{stroke:#ffc21b}.pro-flow .flow-route.grid{stroke:#00f078}.pro-flow[data-active="true"] .flow-route{stroke-dasharray:16 7;animation:pro-energy 3s linear infinite}.pro-flow .flow-arrow{fill:#00f078}.pro-chart-head{display:flex;gap:10px;align-items:center}.pro-date{border:1px solid #294257;background:#0b2033;color:#a2b7cb;font-size:10px;padding:7px 10px;border-radius:5px;white-space:nowrap}.pro-chart{height:206px;position:relative;display:grid;place-items:center;margin-top:6px;background:repeating-linear-gradient(0deg,transparent,transparent 38px,#17304788 39px,#17304788 40px);border-bottom:1px solid #203c50}.pro-chart img{width:100%;height:100%;object-fit:fill}.pro-chart p{font-size:11px;color:#8fa4b9;text-align:center;line-height:1.7;max-width:350px}.pro-legend{display:flex;justify-content:center;gap:18px;color:#93a9bf;font-size:9px;margin:10px 0 5px}.pro-legend i{display:inline-block;width:17px;height:2px;background:#00bfff;vertical-align:middle;margin-right:5px}.pro-legend .yellow{background:#caa220}.pro-legend .green{background:#178a59}.pro-battery-panel{display:flex;flex-direction:column}.pro-battery-gauge{width:152px;height:152px;margin:4px auto 5px;position:relative}.pro-battery-gauge svg{width:100%;height:100%;transform:rotate(-90deg)}.pro-gauge-track{fill:none;stroke:#163b3a;stroke-width:12}.pro-gauge-value{fill:none;stroke:#00ed79;stroke-width:12;stroke-linecap:round}.pro-gauge-label{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column}.pro-gauge-label strong{font-size:27px;color:#eff7ff;font-weight:600;letter-spacing:-.04em}.pro-gauge-label small{font-size:10px;color:#8ba4bc;margin-top:4px}.pro-battery-specs{margin:5px 0 0;display:grid;gap:9px}.pro-battery-specs>div{display:flex;justify-content:space-between;gap:7px;font-size:10px}.pro-battery-specs dt{color:#9eb2c6}.pro-battery-specs dt::before{content:'▣';font-size:8px;margin-right:7px;color:#7f9bb3}.pro-battery-specs dd{margin:0;color:#deeaf8;white-space:nowrap}.pro-equipment-panel{padding:12px 14px;margin-bottom:12px}.pro-equipment-panel h2,.pro-alert-panel h2{font-size:12px}.pro-device{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:6px 0;color:#b6c8da;font-size:10px}.pro-device-main{display:flex;gap:7px;align-items:center;min-width:0}.pro-device-icon{color:#8da8c0;font-size:10px}.pro-device strong{font-size:10px;font-weight:400}.pro-state{color:#7e98b1;font-size:9px;white-space:nowrap}.pro-state.online{color:#00ec78}.pro-state.online::before{content:'●';margin-right:5px;font-size:7px}.pro-state.warning{color:#ffbf2d}.pro-alert-panel{padding:11px 14px;flex:1}.pro-alert-row{display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding:5px 0;font-size:9px;color:#91a9c0;line-height:1.5}.pro-alert-row::before{content:'●';font-size:8px;color:#00bfff;margin-right:0}.pro-alert-row.warning::before{color:#ffd22b}.pro-alert-row span{flex:1}.pro-alert-row time{font-size:8px;color:#7890a6}.pro-lower-side{display:flex;flex-direction:column;min-width:0}.pro-extra[hidden]{display:none!important}.pro-access-shell{margin-top:14px}.pro-button,.pro-extra button,.pro-extra select{background:#102c43;border:1px solid #28516e;color:#d5ebff;border-radius:6px;padding:9px 13px;min-height:38px;font:12px Inter,'Segoe UI',Arial,sans-serif;cursor:pointer}.pro-extra button:disabled{opacity:.4;cursor:not-allowed}#access-approval-notice{border:1px solid #2d4d65;background:#0c2337!important;border-radius:8px;padding:13px 16px!important;font-size:12px;margin:0 0 12px;line-height:1.6}#access-requests-panel{background:#0b2034!important;border:1px solid var(--pro-line);border-radius:9px;padding:20px!important;margin-top:14px}#access-requests-panel h2{font-size:17px;font-family:Inter,'Segoe UI',Arial,sans-serif}#access-requests-panel select,#access-requests-panel button{margin:4px}#access-requests-list article{border-top:1px solid #214158;padding:15px 0}#access-requests-list article p{font-size:12px;line-height:1.7;overflow-wrap:anywhere}#access-requests-list article button:nth-last-child(2){color:#00f078;border-color:#27654b}#access-requests-list article button:last-child{color:#f6a6a6;border-color:#68434d}.home-auth-section{margin:14px 0 0!important;background:#0b2034!important;border:1px solid #214158!important;border-radius:9px!important;box-shadow:none!important}.home-auth-header{background:transparent!important}.home-auth-box{background:#091a2b!important;border:1px solid #1f3c53!important;box-shadow:none!important}.home-auth-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.home-auth-section h2{font-family:Inter,'Segoe UI',Arial,sans-serif!important}.home-input{background:#0b2238!important;border-color:#25455f!important;box-shadow:none!important}.pro-menu,.pro-overlay{display:none}.pro-settings{padding:16px;border:1px solid #254257;background:#0a2034;border-radius:8px;margin-top:14px;color:#aac1d7;font-size:12px;line-height:1.8}.pro-settings h2{font-size:15px;color:#e6f1ff}.pro-only-account{display:none}.pro-footer{display:none}.pro-source-hidden{display:none}.pro-chart-source{font-size:8px;color:#6b90aa}
@keyframes pro-energy{to{stroke-dashoffset:-46}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.pro-flow .flow-route{animation:none!important}}
/* SCADA_PRO_STYLES_END */


.original-inline-0{display:none;}
.original-inline-1{display:flex; align-items:center; gap:12px;}
.original-inline-2{font-size:26px; filter:drop-shadow(0 0 10px #38bdf8);}
.original-inline-3{margin:0; font-family:var(--font-display); font-size:15.5px; font-weight:800; color:#f8fafc; letter-spacing:0.04em;}
.original-inline-4{font-size:11.5px; color:#94a3b8; margin-top:2px;}
.original-inline-5{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.original-inline-6{background:rgba(6, 78, 59, 0.75); color:#34d399; border:1px solid #10b981; padding:6px 14px; font-size:12px; font-weight:700;}
.original-inline-7{background-color:#34d399; box-shadow:0 0 10px #34d399;}
.original-inline-8{background:#1e293b; color:#cbd5e1; border-color:#334155; padding:6px 12px; font-size:11.5px; font-weight:700;}
.original-inline-9{padding:12px 20px;}
.original-inline-10{color:#38bdf8; display:flex; align-items:center; gap:8px;}
.original-inline-11{background:rgba(56, 189, 248, 0.15); border:1px solid rgba(56, 189, 248, 0.4); color:#38bdf8; border-radius:6px; padding:2px 8px; font-size:10.5px; font-weight:700;}
.original-inline-12{display:flex; justify-content:space-between; align-items:center; font-size:11.5px; color:#94a3b8; margin-bottom:10px; flex-wrap:wrap; gap:6px;}
.original-inline-13{display:flex; align-items:center; gap:6px; cursor:pointer;}
.original-inline-14{accent-color:#38bdf8; width:14px; height:14px; cursor:pointer;}
.original-inline-15{font-weight:700; color:#38bdf8;}
.original-inline-16{color:#34d399; display:flex; align-items:center; gap:8px;}
.original-inline-17{background:rgba(16, 185, 129, 0.15); border:1px solid rgba(16, 185, 129, 0.4); color:#34d399; border-radius:6px; padding:2px 8px; font-size:10.5px; font-weight:700;}
.original-inline-18{display:flex; justify-content:space-between; align-items:center; font-size:11.5px; color:#94a3b8; margin-bottom:10px; flex-wrap:wrap; gap:6px;}
.original-inline-19{font-weight:700; color:#34d399;}
.original-inline-20{padding:16px;background:#172033;color:#fff}
.original-inline-21{padding:20px;background:#172033;color:#fff}
.original-inline-22{max-width: 900px; height: 90vh; display: flex; flex-direction: column; border-top: 4px solid #10b981; background: #0b1120; padding: 20px;}
.original-inline-23{display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid #334155; padding-bottom:12px; margin-bottom:12px;}
.original-inline-24{display:flex; align-items:center; gap:10px;}
.original-inline-25{font-size:24px;}
.original-inline-26{margin:0; font-size:17px; color:#10b981; font-family:var(--font-display);}
.original-inline-27{font-size:11px; color:#94a3b8;}
.original-inline-28{color:#38bdf8;}
.original-inline-29{display:flex; gap:8px; align-items:center;}
.original-inline-30{background:linear-gradient(135deg, #059669, #047857); color:#fff; border-color:#10b981; padding:6px 14px; font-size:11.5px; font-weight:700; cursor:pointer;}
.original-inline-31{background:#1e293b; color:#38bdf8; border-color:#0284c7; padding:6px 14px; font-size:11.5px; font-weight:700; cursor:pointer;}
.original-inline-32{background:#334155; color:#cbd5e1; border-color:#475569; padding:6px 12px; font-size:11.5px; cursor:pointer;}
.original-inline-33{flex:1; width:100%; border-radius:8px; overflow:hidden; border:1px solid #1e293b; background:#ffffff;}
.original-inline-34{width:100%; height:100%; border:none;}
.original-inline-35{display:none;position:fixed;bottom:20px;right:20px;z-index:1000;background:#102c43;color:#d5ebff;padding:15px;border-radius:8px;max-width:90vw}
/* Additions only; approved original SCADA_PRO_STYLES retained above verbatim. */
.pro-integration-note{color:#abc1d4;font-size:12px;line-height:1.6;margin:12px 0;padding:12px;border:1px solid #294357;border-radius:8px;background:#0b2133}.pro-not-installed{background:#172b3c!important;color:#a9bdcf!important;border-color:#355168!important}.pro-state.not-installed{color:#a9bdcf!important;background:#172b3c!important}.battery-not-installed-icon{opacity:.4}.pro-flow .flow-route:not(.solar):not(.house):not(.grid){animation:none!important;opacity:.25}.pro-bars{visibility:hidden}button:disabled,input:disabled{cursor:default;opacity:.6}.pro-sidebar{gap:20px}.pro-integration-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.pro-integration-list>div{border:1px solid #284257;border-radius:8px;padding:12px}.pro-settings:focus{outline:none}.pro-kpi-sub{overflow-wrap:anywhere}.pro-source-description{white-space:normal}.pro-battery-panel .pro-gauge-value{stroke:#597184!important}.pro-battery-panel .pro-gauge-label strong{color:#bed0df!important}#pro-battery-event{color:#a9bdcf}#pro-settings p,#pro-technical p{line-height:1.65}#hml-feedback{padding:12px;border:1px solid #34576b;border-radius:8px;color:#cbe2f5;background:#0c2437}#home-auth-section .home-auth-grid{align-items:start}#pro-account-role{max-width:220px;overflow-wrap:anywhere}#pro-sample-time-visible{font:11px ui-monospace,monospace;overflow-wrap:anywhere;color:#9db6cb}.pro-live{white-space:normal}#pro-logout{min-height:44px}#pro-chart{display:none!important}#receipt-frame{display:none!important}
#home-auth-body{display:block!important}.pro-finance-note{font-size:11px}#pro-finance .pro-integration-note{font-size:10px;margin:8px 0;padding:8px}.pro-integration-note[hidden]{display:none!important}#pro-users{scroll-margin-top:100px}
.pro-brand{white-space:normal;font-size:16px;gap:6px}.pro-brand svg{width:40px;height:40px}.pro-brand>div{min-width:0}.pro-brand small{white-space:normal;font-size:7px;line-height:1.5}.pro-alert-dot{display:none!important}.pro-battery-panel .pro-gauge-track{stroke:#263b4c!important}#pro-flow-battery{fill:#00ed79!important}#pro-battery{color:#00ed79}#pro-battery+small{visibility:visible;color:#00ed79}.pro-mobile-summary{display:none}#pro-users>h2{font-size:16px;color:#d9e8f4;margin:18px 0 8px}

/* Historical data: keep wide tables within their own mobile scroll region. */
.hml-history{min-width:0;margin-top:1rem}.hml-history form{display:flex;flex-wrap:wrap;gap:.75rem;margin:1rem 0}.hml-history label{display:flex;flex:1 1 15rem;flex-direction:column;gap:.25rem;min-width:0}.hml-history input{width:100%;min-width:0;box-sizing:border-box;padding:.6rem;background:#0b1d31;color:#eee;border:1px solid #47617b;border-radius:4px}.hml-history button{padding:.6rem;background:#163b59;color:#fff;border:1px solid #63809c;border-radius:4px}.hml-history button:disabled{opacity:.5}.hml-history-scroll{max-width:100%;overflow-x:auto}.hml-history table{width:100%;border-collapse:collapse;white-space:nowrap}.hml-history th,.hml-history td{padding:.6rem;text-align:left;border-bottom:1px solid #32475b}

.hml-application{min-width:0;margin-top:1rem;overflow-wrap:anywhere}.hml-metadata-form{display:flex;flex-wrap:wrap;gap:.7rem}.hml-metadata-form label{display:flex;flex-direction:column;flex:1 1 15rem;min-width:0}.hml-application input{min-width:0;width:100%;box-sizing:border-box;padding:.5rem}.hml-application button{padding:.6rem;margin:.3rem;max-width:100%}

.hml-enrollment{min-width:0;margin:1rem 0;padding:.8rem;border:1px solid #38526a;border-radius:8px;overflow-wrap:anywhere}.hml-enrollment label{display:flex;flex-direction:column;gap:.35rem}.hml-enrollment input{box-sizing:border-box;max-width:100%;min-width:0;padding:.6rem}.hml-enrollment button{max-width:100%;padding:.65rem;margin:.4rem .2rem;white-space:normal}.hml-enrollment [hidden]{display:none!important}
.hml-approval-card{margin:.85rem 0;padding:.9rem;background:rgba(10,25,41,0.7);border:1px solid #1e3a53;border-left:3px solid #00e5ff;border-radius:8px}
.hml-approval-card p{margin:0 0 .5rem;color:#d5e3f2;font-size:13px}
.hml-approval-select{width:100%;max-width:420px;padding:.6rem .8rem;background:#061424;color:#00f0ff;border:1px solid #234b6e;border-radius:6px;font-weight:600;font-size:13px;cursor:pointer;outline:none;transition:border-color .2s}
.hml-approval-select:focus{border-color:#00e5ff;box-shadow:0 0 8px rgba(0,229,255,0.25)}
.hml-autolock-note{margin:.45rem 0 .75rem;font-size:11.5px;line-height:1.45;color:#e5c07b;background:rgba(229,192,123,0.08);padding:.35rem .6rem;border-radius:4px;border:1px dashed rgba(229,192,123,0.3)}

.hml-live-channels{margin-top:1rem;padding:1rem;border:1px solid #254257;border-radius:8px;background:#0a2034;color:#d5e3f2}.hml-live-channels h3{margin:.2rem 0 .6rem;font-size:14px}.hml-live-channels p,.hml-device-profile p{line-height:1.55}.hml-live-channels table,.hml-device-profile table{width:100%;border-collapse:collapse}.hml-live-channels th,.hml-live-channels td,.hml-device-profile th,.hml-device-profile td{padding:.55rem;text-align:left;vertical-align:top;border-bottom:1px solid #32475b;overflow-wrap:anywhere}.hml-device-profile fieldset{display:grid;grid-template-columns:minmax(8rem,1fr) minmax(12rem,2fr);gap:.45rem .8rem;margin:.75rem 0;padding:.8rem;border:1px solid #29465d;border-radius:6px}.hml-device-profile input:not([type=checkbox]){min-width:0;width:100%;padding:.5rem;background:#0b1d31;color:#eee;border:1px solid #47617b;border-radius:4px}.hml-device-profile button{margin:.55rem .4rem .55rem 0;padding:.6rem;background:#163b59;color:#fff;border:1px solid #63809c;border-radius:4px}.hml-device-profile button:disabled{opacity:.5}
.hml-setup-steps{display:grid;gap:.35rem;padding-left:1.4rem}.hml-setup-steps li{color:#b8c8d8}.hml-setup-steps li::marker{color:#00b9ff}#hml-setup-assistant{margin:1rem 0;padding:1rem;border:1px solid #31516b;border-radius:.6rem;background:#0c1d2e}#hml-setup-assistant table{display:block;max-width:100%;overflow:auto;border-collapse:collapse}#hml-setup-assistant th,#hml-setup-assistant td{padding:.45rem;border:1px solid #29455c;text-align:left;font-size:.85rem}#hml-setup-status{font-weight:600}#hml-setup-evidence p{line-height:1.45}

/* Customer-facing monitoring refinement; technical readbacks stay in Settings. */
.pro-tech-details{margin-top:14px;padding:12px 14px;border:1px solid #29475e;border-radius:8px;background:#081a2a}
.pro-tech-details>summary{cursor:pointer;color:#a9c5da;font-size:11px;line-height:1.5}
.pro-tech-details[open]>summary{margin-bottom:10px}
.pro-measurement-provenance{margin:10px 0;padding:8px 10px;border-left:2px solid #b58a35;color:#aebfd0;background:#091b2b;font-size:11px}
.pro-measurement-provenance>summary{cursor:pointer;color:#c6b277;line-height:1.5}
.pro-measurement-provenance p{margin:6px 0 0;max-width:70ch;line-height:1.55}
.pro-source-description:empty{display:none}
.pro-pv-details{margin-top:8px;border-top:1px solid #203b50;padding-top:7px;color:#a9bfd2;font-size:10px}.pro-pv-details summary{cursor:pointer;color:#bcd0e2}.pro-pv-details>div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 12px;margin-top:8px}.pro-pv-details span{overflow-wrap:anywhere}
.pro-tag.is-connected{border-color:#2a7753;background:#12382b;color:#a6efc4}
.pro-tag.is-disconnected{border-color:#805f35;background:#382a19;color:#efc989}

/* Single consolidated layout layer for the local HML candidate. */
.pro-app{width:min(calc(100% - 24px),1800px);margin:12px auto;overflow:visible}
.pro-sidebar{position:fixed;inset:12px auto 12px max(12px,calc((100vw - 1800px)/2));width:220px;gap:12px;padding:18px 12px;overflow-y:auto}
.pro-shell{margin-left:220px;padding:0 16px 18px;min-width:0}
.pro-content{min-width:0}
.pro-topbar{height:68px;min-height:68px;padding:0 4px;gap:14px}
.pro-topbar-left{gap:14px;min-width:0;flex-wrap:nowrap}
.pro-plant-control{min-width:0}
.pro-topbar select{max-width:min(32vw,300px)}
.pro-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:stretch;gap:12px;margin:0 0 12px}
.pro-kpis>.pro-card{box-sizing:border-box;display:flex;flex-direction:column;height:100%;min-width:0;min-height:138px;padding:15px;border-radius:12px}
.pro-card-top{font-size:clamp(12px,1vw,15px);min-height:34px;padding-right:35px}
.pro-value{margin-top:10px;font-size:clamp(23px,2vw,34px);white-space:normal;overflow-wrap:anywhere}
.pro-kpi-sub{font-size:11px;line-height:1.45;max-width:100%;min-height:2.6em}
.pro-spark,.pro-bars{display:none}
.pro-battery-kpi-compact .pro-value{margin-top:8px}
.pro-battery-kpi-compact .pro-value span{font-size:clamp(22px,2vw,30px);color:#00ed79}
.pro-battery-kpi-compact .pro-value small{font-size:14px;color:#00ed79;margin-left:4px}
.pro-battery-kpi-compact .pro-kpi-sub{display:block;color:#8fa5ba;font-size:11px}
.pro-dashboard-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;align-items:stretch}
#pro-energy{min-width:0}

#pro-analytics{min-width:0}
#pro-equipment,#pro-alerts,#pro-analytics{margin-top:12px}
.pro-panel{box-sizing:border-box;min-width:0;padding:15px;border-radius:12px}
.pro-panel-head{min-height:26px;margin-bottom:8px;flex-wrap:wrap}
.pro-panel h2{font-size:15px}
.pro-flow{display:block;width:100%;height:auto;aspect-ratio:760/285;overflow:hidden}
.pro-flow text{font-size:12px;paint-order:stroke;stroke:#071727;stroke-width:2px;stroke-linejoin:round}
.pro-flow .flow-value{font-size:19px}
.pro-flow .flow-small,#pro-flow-solar-note,#pro-battery-power,#pro-battery-charging{display:none}
.pro-flow #pro-flow-battery,.pro-flow #pro-flow-load-note{display:inline;fill:#9fb5c8;font-size:9px}
.pro-flow #pro-flow-load-solar{display:inline;fill:#00ff88;font-size:10px;font-weight:600;letter-spacing:0.3px}
.pro-flow #pro-flow-load-day,.pro-flow #pro-flow-load-month,.pro-flow #pro-flow-grid-day,.pro-flow #pro-flow-grid-month,.summary-sub,#btn-download-apk,.pro-apk-hero-btn{display:none!important}
.pro-flow #pro-grid-direction{display:none}
.pro-flow #pro-grid-direction.is-configured,.pro-flow #pro-grid-direction.is-pending{display:inline;fill:#a9bfd2;font-size:9px}
.pro-flow #pro-grid-direction.is-pending{fill:#e0bb65}
.pro-flow .battery-connection{fill:none;stroke:#758da2;stroke-width:2;stroke-dasharray:5 4;opacity:.75}
#pro-energy .pro-panel-head .pro-live{display:none}
.pro-flow .battery-not-installed-icon{opacity:.55}
.pro-flow-diagnostics{margin:2px 2px 4px;color:#9fb5c8;font-size:10px;line-height:1.45}
.pro-flow-diagnostics>summary{cursor:pointer;color:#aec2d4}
.pro-flow-diagnostics p{margin:6px 0;overflow-wrap:anywhere}
.pro-electrical-grid{display:block;margin:0 0 12px;padding:14px;border:1px solid var(--pro-line,#254257);border-radius:10px;background:#0b2034}
.pro-electrical-grid h2{margin:0 0 10px;font-size:14px}
.pro-electrical-primary,.pro-electrical-secondary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.pro-electrical-grid article{min-width:0;padding:11px;border-radius:8px}
.pro-electrical-grid article h3{margin:0;font-size:12px}
.pro-electrical-grid article strong{font-size:clamp(16px,1.5vw,22px);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.pro-electrical-grid article small{font-size:10px;line-height:1.4;overflow-wrap:anywhere}
.pro-electrical-details{margin-top:10px;border-top:1px solid #203b50;padding-top:8px}
.pro-electrical-details>summary{cursor:pointer;color:#bcd0e2;font-size:12px}
.pro-electrical-details[open]>summary{margin-bottom:9px}
.pro-pv-details{margin-top:10px;border-top:1px solid #203b50;padding-top:8px;color:#a9bfd2;font-size:11px}
.pro-pv-details summary{cursor:pointer;color:#bcd0e2}
.pro-pv-details>div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:8px}
.pro-pv-details span{min-width:0;overflow-wrap:anywhere}



.pro-alert-panel{flex:initial}
.pro-alert-panel .pro-alert-row{position:relative;z-index:auto;font-size:11px;line-height:1.45;padding:8px 9px;margin:4px 0;border-radius:6px;overflow-wrap:anywhere}
.pro-alert-row.warning{border-left:3px solid #f4bf36;background:#2b2618;color:#ffe5a1}
.pro-alert-row.warning::before{color:#ffc83d}
.pro-alert-row.active,.pro-alarm-active,.alarm-active,.alarm-state.active{border-left:3px solid #fb6666;background:#311d25;color:#ffd3d3}
.alarm-state{min-width:0;margin:7px 0;padding:10px;border:1px solid #294357;border-radius:7px;background:#091a2a;overflow-wrap:anywhere}
.alarm-state.active h3,.alarm-state.active strong{color:#ffd3d3}
.alarm-state.recovered{border-left:3px solid #59bf8b}
.alarm-state.no_data,.alarm-state.unconfigured{border-left:3px solid #6c8091}
.alarm-state.no_data,.alarm-state.unconfigured,.alarm-state:not(.active),.alarm-state-list:not(:has(.alarm-state.active)){display:none!important}
#pro-advanced,#pro-calibration,#pro-diagnostics,.hml-calibration-channel,.hml-calibration-evidence{min-width:0;max-width:100%}
#pro-advanced,#pro-calibration,#pro-diagnostics{border:1px solid #29465d;border-radius:8px;background:#091c2e}
#pro-advanced{margin-top:14px;padding:12px}
#pro-advanced[hidden]{display:none!important}
#pro-calibration,#pro-diagnostics{margin-top:10px;padding:10px;background:#0a2034}
#pro-advanced>summary,#pro-calibration>summary,#pro-diagnostics>summary,.hml-calibration-channel>summary,.hml-calibration-evidence>summary{cursor:pointer;color:#d8e8f7;font-weight:600;padding:7px 4px}
#pro-diagnostic-slot,#pro-calibration-slot,#pro-technical{min-width:0;max-width:100%}
#pro-technical{margin:8px 0;overflow-wrap:anywhere}
#pro-technical table,#pro-technical td,#pro-technical th{max-width:100%;overflow-wrap:anywhere}
.pro-ingress-details{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:10px 0;padding:10px;border:1px solid #203d54;border-radius:7px;background:#081a2a}
.pro-ingress-details>div{min-width:0;overflow-wrap:anywhere}
.pro-ingress-details dt{color:#8fa9bf;font-size:11px}
.pro-ingress-details dd{margin:2px 0;color:#d3e2f0;font:11px ui-monospace,monospace;overflow-wrap:anywhere}
.pro-endpoint-diagnostics{max-width:100%;overflow-wrap:anywhere}
.hml-device-profile{min-width:0;max-width:100%;overflow-wrap:anywhere}
.hml-device-profile>h3{margin:10px 0}
.hml-calibration-group{min-width:0;margin:12px 0;padding:10px;border:1px solid #29465d;border-radius:8px}
.hml-calibration-group>legend{padding:0 6px;color:#d8e8f7;font-weight:650}
.hml-calibration-channel{margin:8px 0;border:1px solid #254257;border-radius:7px;padding:6px 9px;background:#081a2a}
.hml-calibration-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:8px 0;padding:10px;border:1px solid #203d54;border-radius:6px}
.hml-calibration-fields>label{display:flex;flex-direction:column;gap:4px;min-width:0;color:#abc1d4}
.hml-calibration-fields>label:first-child{grid-column:1/-1;flex-direction:row;align-items:center}
.hml-calibration-fields input:not([type=checkbox]){width:100%;min-width:0}
.hml-calibration-evidence{margin-top:8px;border-top:1px solid #203d54;padding-top:4px;color:#9db4c9}
.hml-calibration-evidence p{overflow-wrap:anywhere;font-size:12px}
.hml-live-channels{max-width:100%;overflow-x:clip}
.hml-live-channels table{width:100%;table-layout:fixed}
.hml-live-channels th,.hml-live-channels td{overflow-wrap:anywhere}
.hml-live-channels{box-sizing:border-box;min-width:0;overflow:visible}
.hml-live-channels-details,.hml-live-channels-table-scroll{min-width:0;max-width:100%}
.hml-live-channels-details>summary{cursor:pointer;overflow-wrap:anywhere}
.hml-live-channels-table-scroll{width:100%;overflow-x:auto;overscroll-behavior-inline:contain}
.hml-live-channels-table-scroll table{min-width:640px;table-layout:fixed}
.alarm-authorized-actions{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:6px 12px;margin:10px 0;padding:12px;border:1px solid #31516b;border-radius:8px;background:#0b2034}
.alarm-authorized-actions>button{grid-row:span 3;white-space:normal}
.alarm-authorized-actions>small,.alarm-config-status{min-width:0;margin:0;color:#abc1d4;overflow-wrap:anywhere;line-height:1.5}
.alarm-config-status[role=status]{font-size:12px}
.pro-integration-note{overflow-wrap:anywhere}
@media(max-width:1200px){
 .pro-sidebar{width:190px;inset:10px auto 10px 10px}
 .pro-shell{margin-left:190px;padding:0 12px 16px}
 .pro-kpis{gap:10px}
 .pro-kpis>.pro-card{padding:12px;min-height:132px}
 .pro-dashboard-grid{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:900px){
 .pro-app{width:100%;margin:0;border-radius:0}
 .pro-sidebar{width:170px;inset:0 auto 0 0;padding:14px 9px}
 .pro-shell{margin-left:170px;padding:0 10px 14px}
 .pro-topbar{height:auto;min-height:64px;flex-wrap:wrap;padding:8px 0}
 .pro-topbar-left{flex-wrap:wrap;gap:8px}
 .pro-topbar select{max-width:100%;width:auto}
 .pro-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
 .pro-dashboard-grid{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:680px){
 .alarm-authorized-actions{grid-template-columns:minmax(0,1fr)}
 .alarm-authorized-actions>button{grid-row:auto;width:100%}
 .pro-app{width:100%;margin:0;border:0;border-radius:0;overflow-x:clip}
 .pro-sidebar{width:min(280px,85vw);inset:0 auto 0 0;transform:translateX(-100%);visibility:hidden}
 .pro-app.menu-open .pro-sidebar{transform:translateX(0);visibility:visible}
 .pro-shell,.pro-content,.pro-panel,.pro-settings{min-width:0;max-width:100%}
 .pro-shell{margin-left:0;padding:0 12px 18px}
 .pro-menu{display:inline-flex;min-width:44px;min-height:44px}
 .pro-topbar{min-height:60px;gap:8px}
 .pro-topbar-left{flex:1;min-width:0}
 .pro-plant-control{flex:1;min-width:0}
 .pro-topbar select{width:100%;max-width:100%;font-size:16px}
 .pro-source-wrap{display:flex!important;max-width:100%;flex-wrap:wrap}
 .pro-account>div:not(.pro-avatar),.pro-account>span:last-child{display:none}
 .pro-kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-bottom:10px}
 .pro-kpis>.pro-card{min-height:122px;padding:11px}
 .pro-card-top{font-size:11px;padding-right:24px}
 .pro-kpi-icon svg{width:23px;height:23px}
 .pro-value{font-size:clamp(20px,6vw,28px)}
 .pro-kpi-sub{font-size:9px}
 .pro-dashboard-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:none;gap:10px}
 .pro-panel{padding:12px;border-radius:10px}
 .pro-flow{aspect-ratio:760/285}
 .pro-flow text:not(.flow-value):not(.flow-small){font-size:13px}
 .pro-flow .flow-value{font-size:22px}
 
 .pro-electrical-grid{padding:11px}
 .pro-electrical-primary,.pro-electrical-secondary{gap:7px}
 .pro-electrical-grid article{padding:9px}
 .pro-electrical-grid article h3{font-size:11px}
 .pro-electrical-grid article strong{font-size:17px}
 .pro-pv-details>div,.hml-calibration-fields{grid-template-columns:minmax(0,1fr)}
 .pro-ingress-details{grid-template-columns:minmax(0,1fr)}
 .pro-measurement-provenance p{max-width:none}
 .pro-panel-head{gap:7px}
 .pro-alert-row{font-size:10px!important}
 .pro-integration-list{grid-template-columns:1fr}
 .pro-settings{padding:13px}
 .home-auth-grid,.home-form-row{grid-template-columns:1fr!important}
 .scada-login-shell{min-width:0}
 input,select,textarea{font-size:16px!important}
}
@media(max-width:390px){
 .pro-shell{padding-right:9px;padding-left:9px}
 .pro-kpis{gap:7px}
 .pro-kpis>.pro-card{min-height:116px;padding:9px}
 .pro-value{font-size:21px}
 .pro-demo-label{font-size:7px}
 .hml-device-profile button{max-width:100%;white-space:normal}
}
/* Daily energy history uses its own kWh axis; it never shares the legacy W chart. */
.pro-chart #pro-chart{display:block;width:100%;height:100%;overflow:visible}.pro-chart .daily-energy-axis{fill:none;stroke:#294257;stroke-width:1}.pro-chart .daily-energy-line{fill:none;stroke:#ffc400;stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}.pro-chart #pro-daily-energy-points circle{fill:#ffd247;stroke:#081a2a;stroke-width:1}.pro-chart #pro-chart-empty[hidden]{display:none}
.pro-chart-coverage{margin:7px 0 0;color:#829bb4;font-size:10px;line-height:1.45}
/* Overview: energy flow expands into the space freed by the side battery card. */
#pro-overview .pro-dashboard-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:none;grid-template-rows:auto}#pro-overview #pro-energy{width:100%;min-width:0}#pro-overview .pro-flow{width:100%;height:auto;aspect-ratio:760/285;max-width:100%;overflow:visible}
#pro-overview .pro-dashboard-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:none;grid-template-rows:auto}
#pro-overview #pro-energy{width:100%;min-width:0;box-sizing:border-box}
#pro-overview .pro-flow{width:100%;height:auto;aspect-ratio:820/285;max-width:100%;overflow:visible}
@media(max-width:680px){
  #pro-overview .pro-flow{aspect-ratio:820/285;max-height:240px}
  #pro-overview .pro-flow text{font-size:13px}
  #pro-overview .pro-flow .flow-value{font-size:22px;font-weight:700}
  #pro-overview .pro-flow .flow-small,#pro-overview .pro-flow .flow-sub{font-size:11px}
}

/* Alertas e Eventos compacto */
#pro-alerts.pro-alert-panel{max-height:150px;overflow-y:auto;padding:8px 10px}
#pro-alerts .pro-panel-head{margin-bottom:4px}
#pro-alerts .pro-alert-row{padding:4px 8px;margin:2px 0;font-size:10px}

/* Guia e Sentinela de Integração e Fabricantes */
.hml-setup-guide-box{margin-top:1.2rem;padding:.9rem;background:#061424;border:1px solid #1a3c5c;border-radius:.6rem}
.hml-setup-guide-box summary{font-weight:600;color:#00b9ff;cursor:pointer;padding:4px 0}
.pro-guide-select{width:100%;max-width:480px;padding:8px 12px;background:#0a1c30;color:#fff;border:1px solid #234c75;border-radius:6px;font-size:.9rem;margin:8px 0}
.pro-guide-meter-title{margin:14px 0 6px 0;color:#00e879;font-size:.95rem}
.pro-guide-meter-table{width:100%;border-collapse:collapse;margin-top:6px;font-size:.85rem}
.pro-guide-meter-table th{background:#0e2844;color:#a8c7e6;padding:6px;border:1px solid #22476d;text-align:left}
.pro-guide-meter-table td{padding:6px;border:1px solid #1c3b5c;color:#e1ebf5}

/* Fecha Aba / Acordeão do Histórico D1 */
.hml-history-details{margin-top:1.2rem;border:1px solid #1a3c5c;border-radius:.6rem;background:#061424;overflow:hidden}
.hml-history-details summary{padding:.75rem 1rem;font-weight:600;color:#00b9ff;cursor:pointer;background:#091b2e;user-select:none;transition:background .2s}
.hml-history-details summary:hover{background:#0d2640}
.hml-history-details .hml-history{border:none;margin:0;padding:.8rem 1rem;background:transparent}

/* Fecha Aba / Acordeão da Tabela de Canais no Assistente */
.hml-channels-proposal-details{margin:1rem 0;border:1px solid #1a3c5c;border-radius:.6rem;background:#061424;overflow:hidden}
.hml-channels-proposal-details summary{padding:.7rem 1rem;font-weight:600;color:#00b9ff;cursor:pointer;background:#091b2e;user-select:none;transition:background .2s}
.hml-channels-proposal-details summary:hover{background:#0d2640}
.hml-channels-proposal-details table{margin:.8rem 1rem;width:calc(100% - 2rem)}

/* Fecha Aba / Acordeão de Alertas e Eventos */
details.pro-alerts-details{margin-top:12px;border:1px solid #31516b;border-radius:.6rem;background:#061424;overflow:hidden}
details.pro-alerts-details summary.pro-panel-head{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem;cursor:pointer;background:#091b2e;user-select:none;transition:background .2s}
details.pro-alerts-details summary.pro-panel-head:hover{background:#0d2640}
details.pro-alerts-details summary.pro-panel-head h2{margin:0;font-size:1.05rem;color:#00b9ff;display:inline-block}
.pro-alert-panel-content{padding:.75rem 1rem;max-height:160px;overflow-y:auto}

/* Campo de Geração Total Acumulada no Card */
.pro-kpi-total{display:flex;justify-content:space-between;align-items:center;margin-top:6px;padding-top:4px;border-top:1px solid rgba(255,255,255,0.08);font-size:0.75rem}
.pro-kpi-total-label{color:#8fa7bf}
.pro-kpi-total-value{color:#ffd444;font-size:0.85rem}

/* Sinais e cores dinâmicas de fluxo (Consumo: Azul quando suprido por Solar, Amarelo na Importação | Rede: Amarelo Importação / Verde Exportação) */
#pro-flow-load {
  fill: #ffd22b !important;
  color: #ffd22b !important;
  transition: fill 0.3s ease, color 0.3s ease;
}
#pro-flow-load.is-solar-supplied {
  fill: #00c4ff !important;
  color: #00c4ff !important;
}
.flow-value.is-importing, #pro-flow-grid.is-importing {
  fill: #ffd22b !important;
  color: #ffd22b !important;
}
.flow-value.is-exporting, #pro-flow-grid.is-exporting {
  fill: #00ed79 !important;
  color: #00ed79 !important;
}


/* SCADA Energy Flow - Setas e Rotas Direcionais Dinâmicas */
.pro-flow .flow-route.solar {
  stroke: #00bfff !important;
}
.pro-flow .flow-route.house {
  stroke: #ffd22b !important;
  transition: stroke 0.3s ease;
}
.pro-flow .flow-route.house.is-solar-supplied {
  stroke: #00c4ff !important;
}
.pro-flow .flow-arrows.house.is-solar-supplied,
#pro-flow-arrows-house.is-solar-supplied {
  fill: #00c4ff !important;
}
.pro-flow .flow-gliders.house.is-solar-supplied,
#pro-flow-gliders-house.is-solar-supplied {
  stroke: #00c4ff !important;
}
.pro-flow .flow-route.grid {
  stroke: #00ed79;
}
.pro-flow .flow-route.grid.is-importing {
  stroke: #ffd22b !important;
}
.pro-flow .flow-route.grid.is-exporting {
  stroke: #00ed79 !important;
}
.pro-flow .flow-arrows {
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.pro-flow .flow-gliders {
  pointer-events: none;
}
.pro-flow[data-active="true"] .flow-route {
  stroke-dasharray: 14 7 !important;
  animation: pro-energy 2.4s linear infinite !important;
}

#pro-consumption-monthly-wrap .pro-kpi-total-value {
  color: #00c4ff;
}

#pro-overview .pro-flow #pro-flow-inverter,
#pro-flow-inverter.flow-value {
  font-size: 15px !important;
  font-weight: 700 !important;
}
#pro-flow-inverter-box {
  pointer-events: none;
}

/* Oculta abas / acordeões solicitados para remoção */
#pro-alerts-details,
details.pro-alerts-details,
#pro-flow-diagnostics {
  display: none !important;
}

.pro-settings .pro-equipment-panel{margin-top:16px;margin-bottom:16px;background:#0b1e31;border:1px solid #1c3d5a;border-radius:10px;padding:16px}

.pro-settings .pro-panel{margin-top:16px;margin-bottom:16px;background:#0b1e31;border:1px solid #1c3d5a;border-radius:10px;padding:16px}

.pro-measurement-provenance.validated{border-left:2px solid #00ed79!important;background:#091e1d!important}.pro-measurement-provenance.validated>summary{color:#00ed79!important;font-weight:600}

/* Botoes de Acao Superior (Desligar / Reiniciar) */
.pro-top-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: #091c2e;
  border: 1px solid #1c3d5a;
  border-radius: 9px;
  color: #8da2b6;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  padding: 0;
  flex-shrink: 0;
  text-decoration: none;
}
.pro-top-action svg {
  width: 17px;
  height: 17px;
}
.pro-top-action.pro-apk-action:hover {
  color: #00ff88;
  border-color: #00ff88;
  background: #092820;
  box-shadow: 0 0 12px rgba(0, 255, 136, 0.35);
  transform: translateY(-1px);
}
.pro-apk-hero-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #047857 0%, #10b981 100%);
  color: #ffffff !important;
  font-weight: 700;
  font-size: 12px;
  padding: 6px 14px;
  border-radius: 6px;
  border: 1px solid #34d399;
  text-decoration: none;
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.4);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
}
.pro-apk-hero-btn:hover {
  background: linear-gradient(135deg, #059669 0%, #34d399 100%);
  box-shadow: 0 0 18px rgba(52, 211, 153, 0.6);
  transform: translateY(-1px);
}
@media (max-width: 768px) {
  .pro-apk-hero-btn span {
    display: none;
  }
  .pro-apk-hero-btn {
    padding: 6px 10px;
  }
}
.pro-top-action.pro-restart-action:hover {
  color: #00d2ff;
  border-color: #00bfff;
  background: #0b2742;
  box-shadow: 0 0 12px rgba(0, 191, 255, 0.35);
  transform: translateY(-1px);
}
.pro-top-action.pro-power-action:hover {
  color: #ff4757;
  border-color: #ff4757;
  background: #2b0f16;
  box-shadow: 0 0 12px rgba(255, 71, 87, 0.35);
  transform: translateY(-1px);
}
.pro-top-action.pro-fullscreen-action:hover {
  color: #38bdf8;
  border-color: #38bdf8;
  background: #0b253a;
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.35);
  transform: translateY(-1px);
}
:fullscreen {
  overflow-y: auto !important;
  background: #030712 !important;
}
:-webkit-full-screen {
  overflow-y: auto !important;
  background: #030712 !important;
}
#toast.visible {
  display: block !important;
  animation: toastFadeIn 0.25s ease-out;
}
@keyframes toastFadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.pro-top-action:active {
  transform: scale(0.95);
}

/* Modal de Confirmacao do Inversor */
.inverter-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(2, 8, 15, 0.82);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 20px;
}
.inverter-modal-overlay[hidden] {
  display: none !important;
}
.inverter-modal-box {
  background: linear-gradient(135deg, #0a2034, #061524);
  border: 1px solid #1f4567;
  border-radius: 16px;
  padding: 24px 28px;
  width: min(440px, 100%);
  text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7), 0 0 30px rgba(0, 191, 255, 0.1);
  animation: modal-pop 0.22s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}
@keyframes modal-pop {
  from { opacity: 0; transform: scale(0.92); }
  to { opacity: 1; transform: scale(1); }
}
.inverter-modal-icon {
  font-size: 36px;
  margin-bottom: 12px;
}
.inverter-modal-box h3 {
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 700;
  color: #eef5ff;
  letter-spacing: -0.01em;
}
.inverter-modal-box p {
  margin: 0 0 22px;
  font-size: 13px;
  line-height: 1.6;
  color: #9cb3c9;
}
.inverter-modal-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
}
.inverter-modal-actions button {
  flex: 1;
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
.btn-modal-cancel {
  background: #0d263d;
  border: 1px solid #23486a;
  color: #cbdbee;
}
.btn-modal-cancel:hover {
  background: #133453;
  color: #fff;
}
.btn-modal-confirm {
  background: linear-gradient(90deg, #ff4757, #e82035);
  border: 1px solid #ff4757;
  color: #fff;
  box-shadow: 0 4px 14px rgba(255, 71, 87, 0.35);
}
.btn-modal-confirm.restart-theme {
  background: linear-gradient(90deg, #0099ff, #0077dd);
  border: 1px solid #00bfff;
  box-shadow: 0 4px 14px rgba(0, 191, 255, 0.35);
}
.btn-modal-confirm:hover {
  filter: brightness(1.15);
  transform: translateY(-1px);
}

/* Painel de Grafico 24 Horas */
.pro-24h-panel {
  grid-column: 1 / -1;
  margin-top: 16px;
  background: linear-gradient(145deg, #081d30, #04121e);
  border: 1px solid #163652;
  border-radius: 16px;
  padding: 18px 22px;
  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.35);
}
.pro-24h-panel .pro-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid #122c42;
}
.pro-24h-panel .pro-panel-head h2 {
  font-size: 16px;
  font-weight: 700;
  color: #e6f1ff;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
}
.pro-24h-panel .pro-panel-head h2 span {
  font-size: 12px;
  font-weight: 500;
  color: #7b9ab8;
}
.pro-24h-legend {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}
.pro-24h-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #9cb5cb;
  white-space: nowrap;
}
.pro-24h-legend-item strong {
  color: #eef5ff;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  display: inline-block;
  min-width: 54px;
  text-align: right;
}
.chart-bullet {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.chart-bullet.gen {
  background: #00ff88;
  box-shadow: 0 0 10px #00ff88, 0 0 4px #00ff88;
}
.chart-bullet.irr {
  background: #ffaa00;
  box-shadow: 0 0 10px #ffaa00, 0 0 4px #ffaa00;
  border-radius: 2px;
  width: 14px;
  height: 3px;
}
.chart-bullet.sat {
  background: #38bdf8;
  box-shadow: 0 0 10px #38bdf8, 0 0 4px #38bdf8;
  border-radius: 2px;
  width: 14px;
  height: 3px;
}
.chart-bullet.wind {
  background: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0.25) 100%);
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.8), 0 0 4px #ffffff;
  border-radius: 2px;
  width: 14px;
  height: 3px;
}
.chart-bullet.con {
  background: #ff3344;
  box-shadow: 0 0 10px #ff3344, 0 0 4px #ff3344;
}
#pro-24h-val-gen {
  color: #00ff88;
  text-shadow: 0 0 8px rgba(0, 255, 136, 0.45);
  min-width: 56px;
  display: inline-block;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
#pro-24h-val-irr {
  color: #ffaa00;
  text-shadow: 0 0 8px rgba(255, 170, 0, 0.45);
  min-width: 56px;
  display: inline-block;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
#pro-24h-val-cloud {
  color: #38bdf8;
  text-shadow: 0 0 8px rgba(56, 189, 248, 0.45);
  min-width: 44px;
  display: inline-block;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
#pro-24h-val-wind {
  color: #ffffff;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.55);
  min-width: auto;
  display: inline-block;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
  color: #ffaa00;
  text-shadow: 0 0 8px rgba(255, 170, 0, 0.45);
  min-width: 52px;
  display: inline-block;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
#pro-24h-val-cloud {
  color: #38bdf8;
  text-shadow: 0 0 8px rgba(56, 189, 248, 0.45);
  min-width: 44px;
  display: inline-block;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
#pro-24h-val-con {
  color: #ff3344;
  text-shadow: 0 0 8px rgba(255, 51, 68, 0.45);
  min-width: 52px;
  display: inline-block;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.pro-24h-legend-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.2px;
  background: rgba(15, 33, 53, 0.7);
  border: 1px solid rgba(56, 189, 248, 0.2);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}
.pro-24h-legend-badge.irr-badge {
  background: linear-gradient(135deg, rgba(255, 170, 0, 0.12) 0%, rgba(20, 32, 48, 0.6) 100%);
  border-color: rgba(255, 170, 0, 0.35);
  color: #ffc043;
}
.pro-24h-legend-badge.irr-badge strong {
  color: #ffd22b;
  font-size: 12px;
  text-shadow: 0 0 6px rgba(255, 210, 43, 0.4);
  display: inline-block;
  min-width: 82px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.pro-24h-legend-badge.proj-badge {
  background: linear-gradient(135deg, rgba(0, 255, 136, 0.12) 0%, rgba(20, 32, 48, 0.6) 100%);
  border-color: rgba(0, 255, 136, 0.35);
  color: #63f5aa;
}
.pro-24h-legend-badge.proj-badge strong {
  color: #00ff88;
  font-size: 12px;
  text-shadow: 0 0 6px rgba(0, 255, 136, 0.4);
  display: inline-block;
  min-width: 62px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.pro-24h-legend-badge.sat-badge {
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.12) 0%, rgba(20, 32, 48, 0.6) 100%);
  border-color: rgba(56, 189, 248, 0.35);
  color: #7dd3fc;
  cursor: pointer;
  transition: all 0.2s ease;
}
.pro-24h-legend-badge.sat-badge:hover {
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.22) 0%, rgba(20, 32, 48, 0.8) 100%);
  border-color: #38bdf8;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.35);
}
.pro-24h-legend-badge.sat-badge strong {
  color: #38bdf8;
  font-size: 12px;
  text-shadow: 0 0 6px rgba(56, 189, 248, 0.4);
  display: inline-block;
  font-variant-numeric: tabular-nums;
}
.pro-24h-legend-badge.loc-badge {
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.15) 0%, rgba(15, 33, 53, 0.7) 100%);
  border-color: rgba(14, 165, 233, 0.4);
  color: #bae6fd;
  cursor: pointer;
  transition: all 0.2s ease;
}
.pro-24h-legend-badge.loc-badge:hover {
  border-color: #0ea5e9;
  box-shadow: 0 0 10px rgba(14, 165, 233, 0.35);
}
.pro-24h-legend-badge.loc-badge strong {
  color: #38bdf8;
  font-size: 11.5px;
  font-weight: 600;
}
.pro-sub-metric {
  font-size: 10.5px;
  color: #9cb5cb;
  font-weight: normal;
  display: inline-block;
  min-width: 86px;
  font-variant-numeric: tabular-nums;
}
.pro-24h-chart-container {
  width: 100%;
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  background: rgba(4, 15, 26, 0.6);
  border: 1px solid #10263c;
  padding: 8px 4px 4px;
}
.pro-24h-svg {
  width: 100%;
  height: 250px;
  display: block;
}
.chart-grid-group line {
  stroke: #122b40;
  stroke-width: 1;
}
.chart-grid-group line.major {
  stroke: #1a3c58;
}
.chart-x-labels text,
.chart-y-labels text {
  fill: #65849e;
  font-size: 11px;
  font-family: Inter, system-ui, sans-serif;
  font-weight: 500;
}
.chart-x-labels text {
  text-anchor: middle;
}
.chart-y-labels text {
  text-anchor: end;
}
.pro-24h-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid #0f253a;
  font-size: 11px;
  color: #728ea6;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  flex-wrap: wrap;
  gap: 10px;
}
.pro-24h-footer strong {
  color: #00e879;
  font-variant-numeric: tabular-nums;
}
#pro-24h-peak-solar,
#pro-24h-peak-load {
  display: inline-block;
  min-width: 105px;
}
#pro-24h-net-status {
  display: inline-block;
  min-width: 175px;
}
#pro-24h-footer-irr {
  display: inline-block;
  min-width: 170px;
}
#pro-24h-footer-proj {
  display: inline-block;
  min-width: 65px;
}
#pro-24h-footer-wind {
  display: inline-block;
  min-width: auto;
}
.pro-wind-layer {
  pointer-events: all;
}
.pro-wind-arrow {
  cursor: pointer;
  transition: transform 0.2s ease, opacity 0.2s ease;
  transform-box: fill-box;
  transform-origin: center;
}
.pro-wind-arrow:hover path {
  fill: #38bdf8 !important;
  fill-opacity: 1 !important;
  filter: drop-shadow(0 0 4px #38bdf8);
}

/* Cloud-to-Cloud Autonomous Integration Styles */
.hml-cloud-connect-card {
  margin: 1.2rem 0;
  padding: 1.2rem;
  border: 1px solid #0284c7;
  border-radius: 8px;
  background: linear-gradient(135deg, #081a2e 0%, #0c2847 100%);
  color: #e2e8f0;
  box-shadow: 0 4px 14px rgba(2, 132, 199, 0.15);
}
.hml-cloud-connect-card h4 {
  margin: 0 0 0.5rem;
  color: #38bdf8;
  font-size: 1.15rem;
  display: flex;
  align-items: center;
  gap: 8px;
}
.hml-cloud-desc {
  margin: 0 0 1rem;
  font-size: 0.88rem;
  color: #94a3b8;
  line-height: 1.5;
}
.hml-cloud-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.8rem;
  margin-bottom: 0.8rem;
}
.hml-cloud-fields label {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: #cbd5e1;
}
.hml-cloud-fields input {
  padding: 0.6rem 0.8rem;
  background: #061525;
  border: 1px solid #334e68;
  border-radius: 6px;
  color: #fff;
  font-size: 0.9rem;
}
.hml-cloud-fields input:focus {
  border-color: #38bdf8;
  outline: none;
  box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.2);
}
.hml-cloud-btn {
  padding: 0.75rem 1.4rem;
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.hml-cloud-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #38bdf8 0%, #0284c7 100%);
  transform: translateY(-1px);
}
.hml-cloud-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.hml-cloud-feedback {
  margin-top: 0.8rem;
  padding: 0.75rem 1rem;
  border-radius: 6px;
  font-size: 0.85rem;
  line-height: 1.45;
  display: none;
}
.hml-cloud-feedback.is-visible {
  display: block;
}
.hml-cloud-feedback.is-working {
  background: #0d2847;
  border: 1px solid #0284c7;
  color: #38bdf8;
}
.hml-cloud-feedback.is-success {
  background: #062d1f;
  border: 1px solid #10b981;
  color: #34d399;
}
.hml-cloud-feedback.is-error {
  background: #3b1219;
  border: 1px solid #ef4444;
  color: #fca5a5;
}


.pro-docs-action {
  color: #38bdf8 !important;
  border-color: rgba(56, 189, 248, 0.3) !important;
}
.pro-docs-action:hover {
  background: rgba(56, 189, 248, 0.15) !important;
  border-color: #38bdf8 !important;
}

/* ========================================================= */
/* SCADA SOLAR PRO - ROUTING & VIEW ISOLATION                */
/* ========================================================= */
#pro-overview-view[hidden],
#pro-battery-details-section[hidden],
#pro-equipment[hidden],
#pro-analytics[hidden],
#pro-users[hidden],
#pro-settings[hidden],
#pro-technical[hidden] {
  display: none !important;
}

.pro-view-back-bar {
  margin: 0 0 16px 0;
  display: flex;
  align-items: center;
}

.btn-back-overview {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #0b2238 0%, #081726 100%);
  color: #38bdf8;
  border: 1px solid #1e4976;
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 191, 255, 0.15);
  transition: all 0.2s ease;
  text-decoration: none;
}

.btn-back-overview:hover {
  background: linear-gradient(135deg, #0f3050 0%, #0c2035 100%);
  color: #7dd3fc;
  border-color: #38bdf8;
  box-shadow: 0 0 14px rgba(56, 189, 248, 0.35);
  transform: translateX(-2px);
}

.btn-back-overview svg {
  stroke: currentColor;
  stroke-width: 2.2;
}


/* ==========================================================================
   SCADA SOLAR PRO - NOVO RESUMO DO FLUXO DE ENERGIA & GRÁFICO 24H MOBILE
   ========================================================================== */

.pro-flow-summary-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(22, 54, 82, 0.7);
}
.pro-flow-summary-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(8, 29, 48, 0.65);
  border: 1px solid #163652;
  border-radius: 10px;
  padding: 8px 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  transition: border-color 0.2s, background 0.2s;
  min-width: 0;
}
.pro-flow-summary-item:hover {
  background: rgba(12, 38, 64, 0.8);
  border-color: #235480;
}
.pro-flow-summary-item .summary-icon {
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: rgba(15, 33, 53, 0.8);
  border: 1px solid rgba(56, 189, 248, 0.2);
  flex-shrink: 0;
}
.pro-flow-summary-item.auto-consume .summary-icon {
  border-color: rgba(0, 255, 136, 0.35);
  color: #00ff88;
}
.pro-flow-summary-item.export-grid .summary-icon {
  border-color: rgba(56, 189, 248, 0.35);
  color: #38bdf8;
}
.pro-flow-summary-item.import-grid .summary-icon {
  border-color: rgba(255, 170, 0, 0.35);
  color: #ffaa00;
}
.pro-flow-summary-item .summary-data {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 1px;
}
.pro-flow-summary-item .summary-label {
  font-size: 10px;
  color: #8ca5bc;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pro-flow-summary-item .summary-value {
  font-size: 14px;
  font-weight: 700;
  color: #ffffff;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.pro-flow-summary-item.auto-consume .summary-value { color: #00ff88; }
.pro-flow-summary-item.export-grid .summary-value { color: #38bdf8; }
.pro-flow-summary-item.import-grid .summary-value { color: #ffd22b; }
.pro-flow-summary-item .summary-sub {
  display: none !important;
}

/* Touch HUD Bar para o Gráfico de 24h */
.pro-24h-touch-hud {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: linear-gradient(135deg, rgba(8, 29, 48, 0.96), rgba(4, 18, 30, 0.96));
  border: 1px solid #00f0ff;
  border-radius: 8px;
  padding: 6px 12px;
  margin-bottom: 8px;
  box-shadow: 0 0 15px rgba(0, 240, 255, 0.25);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  flex-wrap: wrap;
  transition: opacity 0.2s ease;
}
.pro-24h-touch-hud .hud-time {
  font-weight: 700;
  color: #ffffff;
  background: #0d2a45;
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid #1c4b75;
}
.pro-24h-touch-hud .hud-items {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.pro-24h-touch-hud .hud-item { font-weight: 600; font-size: 11.5px; }
.pro-24h-touch-hud .hud-item.solar { color: #00ff88; }
.pro-24h-touch-hud .hud-item.load { color: #ff3344; }
.pro-24h-touch-hud .hud-item.irr { color: #ffaa00; }
.pro-24h-touch-hud .hud-item.clouds { color: #38bdf8; }

/* Adaptação Específica para Smartphones (<= 680px) */
@media (max-width: 680px) {
  /* Fluxo de Energia */
  .pro-flow-summary-strip {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .pro-flow-summary-item {
    padding: 7px 10px;
  }
  .pro-flow-summary-item .summary-icon {
    width: 30px;
    height: 30px;
    font-size: 16px;
  }

  /* Painel 24h */
  .pro-24h-panel {
    padding: 12px !important;
    margin-top: 10px !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }
  .pro-24h-panel .pro-panel-head {
    gap: 8px !important;
    margin-bottom: 8px !important;
    padding-bottom: 8px !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .pro-24h-legend {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 5px !important;
    width: 100% !important;
  }
  .pro-24h-legend-item {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 5px 8px !important;
    background: rgba(8, 29, 48, 0.75) !important;
    border: 1px solid #163652 !important;
    border-radius: 6px !important;
    font-size: 10.5px !important;
    gap: 4px !important;
    min-width: 0 !important;
    white-space: nowrap !important;
  }
  .pro-24h-legend-item strong {
    min-width: 0 !important;
    font-size: 11px !important;
  }
  .pro-24h-legend-badge {
    grid-column: span 2 !important;
    justify-content: space-between !important;
    padding: 5px 9px !important;
    font-size: 10.5px !important;
    min-width: 0 !important;
  }
  .pro-24h-legend-badge strong {
    min-width: 0 !important;
  }
  .pro-sub-metric {
    min-width: 0 !important;
  }

  /* SVG do Gráfico */
  .pro-24h-chart-container {
    padding: 6px 3px 3px !important;
    border-radius: 8px !important;
  }
  .pro-24h-svg {
    height: 220px !important;
  }
  .pro-24h-svg .chart-y-label {
    font-size: 21px !important;
    font-weight: 700 !important;
    fill: #8ca5bc !important;
  }
  .pro-24h-svg .chart-x-major {
    font-size: 21px !important;
    font-weight: 700 !important;
    fill: #8ca5bc !important;
  }
  .pro-24h-svg .chart-x-noon {
    fill: #ffd444 !important;
  }
  .pro-24h-svg .chart-x-minor {
    display: none !important;
  }
  #pro-24h-line-gen,
  #pro-24h-line-con {
    stroke-width: 2.4px !important;
  }
  #pro-24h-line-irr {
    stroke-width: 1.8px !important;
  }

  /* Rodapé do Gráfico */
  .pro-24h-footer {
    font-size: 10px !important;
    line-height: 1.5 !important;
    gap: 6px !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .pro-24h-footer span,
  .pro-24h-footer strong {
    min-width: 0 !important;
  }
  #pro-24h-peak-solar,
  #pro-24h-peak-load,
  #pro-24h-net-status,
  #pro-24h-footer-irr,
  #pro-24h-footer-proj,
  #pro-24h-footer-wind {
    min-width: 0 !important;
  }
}