/* GERADO por _deploy/gerar-pacotes.py — NAO EDITAR A MAO. */

/* ===== css/telemetry-grid.css ===== */
/* telemetry-grid.css - CSS extraido do <style> inline de TelemetryGrid.razor.
   Servido estatico via App.razor; antes ia inteiro pelo SignalR a cada 1o render do componente.
   '@@' convertido para '@' (escape Razor). Revisao humana antes de publicar. */
    @keyframes alertPulse {
        0% { box-shadow: 0 0 0px rgba(255, 51, 51, 0); }
        50% { box-shadow: 0 0 15px rgba(255, 51, 51, 0.4); }
        100% { box-shadow: 0 0 0px rgba(255, 51, 51, 0); }
    }
    @keyframes textGlow {
        0% { text-shadow: 0 0 5px rgba(255,51,51,0.2); }
        50% { text-shadow: 0 0 15px rgba(255,51,51,0.8); }
        100% { text-shadow: 0 0 5px rgba(255,51,51,0.2); }
    }
    .telemetry-grid-2026 { 
        display: grid; 
        grid-template-columns: repeat(4, minmax(0, 1fr)); 
        gap: 15px; 
        width: 100%;
        box-sizing: border-box;
        font-family: 'Inter', sans-serif; 
    }
    .cyber-sec-card {
        grid-column: span 4;
        background: linear-gradient(180deg, rgba(15,15,15,0.9) 0%, rgba(5,5,5,0.95) 100%);
        border: 1px solid rgba(255,255,255,0.05);
        border-top: 3px solid var(--danger);
        border-radius: 8px;
        padding: 20px 25px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.5), inset 0 1px 15px rgba(255,51,51,0.05);
        margin-bottom: 10px;
        position: relative;
    }
    .cyber-sec-card.safe {
        border-top-color: var(--success);
        box-shadow: 0 10px 30px rgba(0,0,0,0.5), inset 0 1px 15px rgba(0,255,102,0.03);
    }    
    .light-theme .cyber-sec-card {
        background: #ffffff;
        border: 1px solid rgba(0,0,0,0.05);
        border-top: 3px solid var(--danger);
        box-shadow: 0 4px 15px rgba(0,0,0,0.02);
    }
    .light-theme .cyber-sec-card.safe { border-top-color: var(--success); }

    .cyber-sec-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid rgba(255,255,255,0.05);
        padding-bottom: 15px;
        margin-bottom: 15px;
        flex-wrap: wrap;
        gap: 15px;
    }
    .light-theme .cyber-sec-header { border-bottom-color: rgba(0,0,0,0.05); }
    .cyber-sec-title {
        font-family: 'JetBrains Mono', monospace;
        font-size: 14px;
        font-weight: 800;
        color: #fff;
        letter-spacing: 2px;
        display: flex;
        align-items: center;
        gap: 10px;
    }
    .light-theme .cyber-sec-title { color: #212529; }
    .cyber-sec-title span { color: #555; font-size: 10px; }
    .cyber-badges { display: flex; gap: 8px; flex-wrap: wrap; }
    .cyber-badge {
        background: rgba(0,0,0,0.6);
        border: 1px solid;
        padding: 5px 12px;
        border-radius: 20px;
        font-size: 9px;
        font-weight: 800;
        letter-spacing: 1px;
        display: flex;
        align-items: center;
        gap: 6px;
    }
    .light-theme .cyber-badge { background: rgba(128,128,128,0.1); border-color: rgba(0,0,0,0.05); }
    .cyber-badge.online { color: var(--success); border-color: rgba(0,255,102,0.3); }
    .cyber-badge.offline { color: var(--danger); border-color: rgba(255,51,51,0.3); }
    .cyber-badge.lte { color: #00d2ff; border-color: rgba(0,210,255,0.3); }
    .cyber-badge.gps { color: var(--success); border-color: rgba(0,255,102,0.3); }
    .cyber-score {
        background: rgba(0,0,0,0.5);
        border: 1px solid rgba(255,255,255,0.05);
        padding: 5px 15px;
        border-radius: 6px;
        font-size: 11px;
        font-weight: 900;
        letter-spacing: 1px;
    }
    .light-theme .cyber-score { background: rgba(128,128,128,0.05); border-color: rgba(0,0,0,0.05); }
    .cyber-sec-grid {
        display: grid;
        grid-template-columns: 1fr 2fr 1fr;
        gap: 20px;
        align-items: center;
    }
    .cyber-sec-block { display: flex; flex-direction: column; gap: 8px; }
    .cyber-sec-block.center { align-items: center; }
    .cyber-sec-block.right { align-items: flex-end; text-align: right; }
    .cyber-sec-label { font-size: 9px; color: #666; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; }
    .cyber-sec-value-safe { font-size: 16px; font-weight: 900; color: var(--success); text-shadow: 0 0 10px rgba(0,255,102,0.3); letter-spacing: 1px; }
    .cyber-sec-value-danger { font-size: 16px; font-weight: 900; color: var(--danger); animation: textGlow 2s infinite; letter-spacing: 1px; }
    .light-theme .cyber-sec-value-safe { text-shadow: none; }
    .cyber-diag-box {
        background: rgba(0,0,0,0.4);
        border: 1px solid;
        border-radius: 6px;
        padding: 10px 20px;
        text-align: center;
        font-family: 'Inter', sans-serif;
        font-size: 11px;
        font-weight: 700;
        width: 100%;
        max-width: 400px;
        display: flex;
        align-items: center;
        justify-content: center;
        letter-spacing: 0.5px;
        line-height: 1.4;
    }
    .light-theme .cyber-diag-box { background: rgba(128,128,128,0.03); border-color: rgba(0,0,0,0.05); }
    .cyber-diag-box.ok { color: var(--success); border-color: rgba(0,255,102,0.2); background: rgba(0,255,102,0.05); }
    .cyber-diag-box.err { color: var(--danger); border-color: rgba(255,51,51,0.3); background: rgba(255,51,51,0.05); }

    .cyber-time { font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 700; color: var(--accent); }

    .hud-card-2026 {
        background: linear-gradient(145deg, rgba(20,20,20,0.95), rgba(5,5,5,0.95));
        backdrop-filter: blur(12px) saturate(180%); border: 1px solid rgba(255,255,255,0.03); border-radius: 10px; padding: 16px 20px; border-top: 2px solid transparent;
        display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); box-shadow: inset 0 0 20px rgba(0,0,0,0.5), 0 4px 15px rgba(0,0,0,0.2);
    }
    .hud-card-2026:hover { transform: translateY(-3px) scale(1.01); border-top-color: var(--accent); background: linear-gradient(145deg, rgba(25,25,25,1), rgba(10,10,10,1)); box-shadow: inset 0 0 20px rgba(0,0,0,0.5), 0 8px 25px rgba(255, 102, 0, 0.15); }

    .light-theme .hud-card-2026 {
        background: #ffffff;
        backdrop-filter: none;
        border: 1px solid rgba(0,0,0,0.03);
        box-shadow: 0 4px 15px rgba(0,0,0,0.02);
    }
    .light-theme .hud-card-2026:hover {
        background: #fdfdfd;
        border-color: rgba(255, 102, 0, 0.1);
        box-shadow: 0 8px 25px rgba(255, 102, 0, 0.05);
    }
    .hud-label-2026 { font-size: 8px; color: #888; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 4px; display: flex; align-items: center; gap: 6px; }
    .hud-main-data-2026 { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1; margin-bottom: 8px; }    
    .hud-value-2026 { font-family: 'JetBrains Mono', monospace; font-size: 26px; font-weight: 300; color: #fff; display: flex; align-items: baseline; gap: 5px; text-shadow: 0 0 15px rgba(255,255,255,0.1); }
    .light-theme .hud-value-2026 { color: #212529; text-shadow: none; }    
    .hud-unit-2026 { font-size: 10px; color: #666; font-weight: 700; letter-spacing: 1px; }
    .hud-meta-label-2026 { font-size: 8px; color: rgba(255,255,255,0.4); text-transform: uppercase; letter-spacing: 1px; margin-top: 8px; text-align: center; }
    .light-theme .hud-meta-label-2026 { color: #888; }
    .gauge-container-2026 { width: 100%; height: 3px; background: rgba(255,255,255,0.05); border-radius: 2px; overflow: hidden; margin-top: 10px; }
    .light-theme .gauge-container-2026 { background: rgba(0,0,0,0.03); }
    .gauge-fill-2026 { height: 100%; background: var(--accent); transition: width 1s ease; position: relative; box-shadow: 0 0 8px var(--accent); }
    .light-theme .gauge-fill-2026 { box-shadow: 0 0 4px var(--accent); }
    .gauge-fill-2026.rpm { background: #00d2ff; box-shadow: 0 0 8px #00d2ff; }
    .light-theme .gauge-fill-2026.rpm { box-shadow: 0 0 4px #00d2ff; }
    .gauge-fill-2026.eco { background: var(--success); box-shadow: 0 0 8px var(--success); }
    .light-theme .gauge-fill-2026.eco { box-shadow: 0 0 4px var(--success); }
    .data-only-card-2026 { align-items: center; text-align: center; }
    .time-value-2026 { font-size: 18px; font-weight: 500; letter-spacing: 1px; }
    .btn-command { background: transparent; border: 1px solid rgba(255,255,255,0.1); color: #aaa; padding: 10px 15px; border-radius: 4px; font-size: 10px; font-weight: 700; text-transform: uppercase; cursor: pointer; transition: 0.3s; flex: 1; }
    .btn-command:hover { background: rgba(255,255,255,0.05); color: #fff; border-color: #555; }
    .light-theme .btn-command { background: rgba(128,128,128,0.03); border-color: rgba(0,0,0,0.05); color: #555; }
    .light-theme .btn-command:hover { background: rgba(128,128,128,0.05); color: #000; border-color: #aaa; }    
    .btn-cmd-danger { color: var(--danger); border-color: rgba(255, 51, 51, 0.3); }
    .btn-cmd-danger:hover { background: rgba(255, 51, 51, 0.1); border-color: var(--danger); }
    .btn-cmd-success { color: var(--success); border-color: rgba(0, 255, 102, 0.3); }
    .btn-cmd-success:hover { background: rgba(0, 255, 102, 0.1); border-color: var(--success); }
    .btn-cmd-accent { color: var(--accent); border-color: rgba(255, 102, 0, 0.3); }
    .btn-cmd-accent:hover { background: rgba(255, 102, 0, 0.1); border-color: var(--accent); }
    .round-charts-row { display: flex; flex-wrap: wrap; justify-content: space-around; align-items: center; width: 100%; padding: 25px 0 10px 0; gap: 20px; }
    .round-chart-item { display: flex; flex-direction: column; align-items: center; gap: 15px; min-width: 140px; }
    .round-gauge { position: relative; width: 110px; height: 110px; background: radial-gradient(circle, rgba(15,15,15,0.8) 0%, rgba(5,5,5,1) 100%); border-radius: 50%; box-shadow: inset 0 0 15px rgba(0,0,0,0.8), 0 0 0 1px rgba(255,255,255,0.02); }
    .light-theme .round-gauge { background: radial-gradient(circle, #ffffff 0%, #f8f9fa 100%); box-shadow: inset 0 0 10px rgba(0,0,0,0.05), 0 0 0 1px rgba(0,0,0,0.05); }
    .round-gauge svg { width: 100%; height: 100%; transform: rotate(-90deg); }
    .round-bg { fill: none; stroke: rgba(255,255,255,0.05); stroke-width: 5; stroke-dasharray: 1 3; }
    .light-theme .round-bg { stroke: rgba(0,0,0,0.05); }
    .round-progress { fill: none; stroke-width: 5; stroke-linecap: round; transition: stroke-dashoffset 1.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
    .round-val-vel { stroke: url(#grad-vel); filter: drop-shadow(0 0 3px rgba(255,102,0,0.4)); }
    .round-val-rpm { stroke: url(#grad-rpm); filter: drop-shadow(0 0 3px rgba(0,210,255,0.4)); }
    .round-val-eco { stroke: url(#grad-eco); filter: drop-shadow(0 0 3px rgba(0,255,102,0.4)); }
    .round-val-diesel { stroke: url(#grad-diesel); filter: drop-shadow(0 0 3px rgba(211,131,18,0.4)); }
    .round-center { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; }
    .round-val-text { font-family: 'JetBrains Mono', monospace; font-size: 26px; font-weight: 700; color: #fff; line-height: 1; letter-spacing: -1px; text-shadow: 0 2px 4px rgba(0,0,0,0.8); }
    .light-theme .round-val-text { color: #212529; text-shadow: none; }
    .round-unit-text { font-size: 9px; color: #888; font-weight: 700; margin-top: 5px; letter-spacing: 1px; }
    .round-label-text { font-size: 10px; color: #888; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; text-align: center; margin-top: 8px; }
    .clickable-card { cursor: pointer; transition: all 0.3s ease; }
    .clickable-card:hover { border-color: var(--danger) !important; box-shadow: inset 0 0 20px rgba(0,0,0,0.5), 0 8px 25px rgba(255, 51, 51, 0.2) !important; transform: translateY(-3px) scale(1.02); }
    .light-theme .clickable-card:hover { box-shadow: 0 8px 25px rgba(255, 51, 51, 0.1) !important; border-color: rgba(255, 51, 51, 0.3) !important; }
    .modal-overlay-2026 { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.85); z-index: 9999; display: flex; justify-content: center; align-items: center; backdrop-filter: blur(10px); }
    .modal-content-2026 { background: linear-gradient(145deg, rgba(20,20,20,1), rgba(5,5,5,1)); border: 1px solid var(--danger); border-radius: 10px; padding: 20px; width: 90%; max-width: 600px; color: #fff; max-height: 80vh; overflow-y: auto; box-shadow: 0 0 30px rgba(255, 51, 51, 0.2); font-family: 'Inter', sans-serif; }
    .light-theme .modal-content-2026 { background: #ffffff; color: #212529; box-shadow: 0 10px 40px rgba(0,0,0,0.2); }
    .modal-title-2026 { font-family: 'JetBrains Mono', monospace; color: var(--danger); font-size: 14px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; margin-top: 0; margin-bottom: 15px; border-bottom: 1px solid rgba(255, 51, 51, 0.3); padding-bottom: 10px; display: flex; justify-content: space-between; align-items: center; }
    .light-theme .modal-title-2026 { border-bottom-color: rgba(0,0,0,0.05); color: #212529; }
    .modal-list-2026 { list-style: none; padding: 0; margin: 0 0 20px 0; font-size: 11px; color: #ccc; }
    .light-theme .modal-list-2026 { color: #555; }
    .modal-list-2026 li { padding: 15px 0; border-bottom: 1px solid rgba(255,255,255,0.05); display: flex; flex-direction: column; gap: 5px; transition: 0.3s; }
    .light-theme .modal-list-2026 li { border-bottom-color: rgba(0,0,0,0.03); }
    .modal-list-2026 li:hover { background: rgba(255,255,255,0.02); padding-left: 10px; }
    .light-theme .modal-list-2026 li:hover { background: rgba(128,128,128,0.03); }
    .modal-time-2026 { color: var(--accent); font-weight: 700; font-size: 10px; font-family: 'JetBrains Mono'; }
    @media (max-width: 1200px) {
        .telemetry-grid-2026 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .cyber-sec-card, .hud-card-2026[style*="span 4"] { grid-column: span 2 !important; }
        .cyber-sec-grid { grid-template-columns: 1fr; gap: 15px; }
        .cyber-sec-block.center, .cyber-sec-block.right { align-items: flex-start; text-align: left; }
    }
    @media (max-width: 768px) {
        .telemetry-grid-2026 { grid-template-columns: minmax(0, 1fr); }
        .cyber-sec-card, .hud-card-2026[style*="span 4"], .hud-card-2026[style*="span 2"] { grid-column: span 1 !important; }
    }
    .history-chart-panel {
        grid-column: span 4;
        background:
            radial-gradient(circle at 18% 0%, rgba(255,102,0,0.10), transparent 28%),
            linear-gradient(145deg, rgba(18,18,20,0.98), rgba(4,4,5,0.98));
        border: 1px solid rgba(255,102,0,0.14);
        border-radius: 16px;
        padding: 20px;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 16px 40px rgba(0,0,0,0.30);
    }
    .light-theme .history-chart-panel { background:#fff; border-color: rgba(0,0,0,0.06); box-shadow: 0 8px 22px rgba(0,0,0,0.06); }
    .chart-toolbar { display:flex; justify-content:space-between; align-items:flex-start; gap:18px; flex-wrap:wrap; margin-bottom:16px; border-bottom:1px solid rgba(255,255,255,0.07); padding-bottom:16px; }
    .chart-title-stack { display:flex; flex-direction:column; gap:7px; }
    .chart-title-main { font-size:15px; font-weight:900; letter-spacing:2px; text-transform:uppercase; color:#fff; }
    .light-theme .chart-title-main { color:#212529; }
    .chart-title-sub { font-size:10px; font-weight:800; letter-spacing:1.4px; color:#999; text-transform:uppercase; }
    .chart-current-value { font-family:'JetBrains Mono', monospace; font-size:30px; font-weight:900; color:#fff; text-align:right; }
    .light-theme .chart-current-value { color:#111; }
    /* MODO CLARO 2026-06: legenda + labels de eixo do SVG do grafico. CSS sobrepoe
       o atributo fill inline do SVG (presentation attributes perdem pra CSS). */
    .agch-leg-bg  { fill: rgba(10,12,20,0.82); stroke: rgba(255,255,255,0.12); }
    .agch-leg-txt { fill: rgba(255,255,255,0.94); }
    .agch-axis-lbl { fill: rgba(255,255,255,0.45); }
    .light-theme .agch-leg-bg  { fill: rgba(255,255,255,0.95); stroke: rgba(0,0,0,0.12); }
    .light-theme .agch-leg-txt { fill: #15151a; }
    .light-theme .agch-axis-lbl { fill: rgba(0,0,0,0.55); }
    .chart-current-sub { font-size:10px; color:#888; text-transform:uppercase; letter-spacing:1px; text-align:right; }
    .chart-control-label { font-size:9px; font-weight:900; letter-spacing:1.4px; color:#777; text-transform:uppercase; margin:0 0 7px 2px; }
    .chart-control-box { border:1px solid rgba(255,255,255,0.07); background:rgba(255,255,255,0.025); border-radius:14px; padding:10px; margin-bottom:12px; }
    .chart-selector-row, .chart-range-row { display:flex; gap:9px; flex-wrap:wrap; }
    .chart-chip {
        border:1px solid rgba(255,255,255,0.10); background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02)); color:#aaa;
        padding:10px 15px; border-radius:999px; font-size:10px; font-weight:900; letter-spacing:1px; text-transform:uppercase; cursor:pointer; transition:.22s ease;
    }
    .chart-chip:hover { color:#fff; border-color: rgba(255,102,0,0.28); transform: translateY(-1px); }
    .chart-chip.active { color:#fff; background: linear-gradient(135deg, rgba(255,102,0,0.32), rgba(255,102,0,0.12)); border-color: rgba(255,102,0,0.55); box-shadow: 0 0 18px rgba(255,102,0,0.20); }
    .ai-panel {
        margin: 14px 0;
        padding: 16px 18px 14px;
        border-radius: 14px;
        background: linear-gradient(140deg, rgba(0,210,255,0.06), rgba(255,102,0,0.04));
        border: 1px solid rgba(0,210,255,0.18);
        position: relative;
        overflow: hidden;
    }
    .ai-panel::before {
        content: '';
        position: absolute;
        top: 0; left: 0; right: 0; height: 2px;
        background: linear-gradient(90deg, #00d2ff 0%, var(--accent) 60%, transparent 100%);
        opacity: 0.55;
    }
    .ai-panel-header {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 12px;
    }
    .ai-panel-icon {
        width: 36px; height: 36px;
        border-radius: 10px;
        display: flex; align-items: center; justify-content: center;
        background: linear-gradient(135deg, rgba(0,210,255,0.18), rgba(255,102,0,0.12));
        color: #00d2ff;
        flex-shrink: 0;
    }
    .ai-panel-titles { flex: 1; min-width: 0; }
    .ai-panel-title {
        font-size: 13px;
        font-weight: 900;
        letter-spacing: 2px;
        color: #fff;
    }
    .ai-panel-sub {
        font-size: 10px;
        letter-spacing: 0.6px;
        color: rgba(255,255,255,0.55);
        text-transform: uppercase;
        margin-top: 2px;
    }
    .ai-panel-badge {
        font-size: 9px;
        font-weight: 800;
        letter-spacing: 1.6px;
        padding: 5px 10px;
        border-radius: 999px;
        background: rgba(0,210,255,0.10);
        border: 1px solid rgba(0,210,255,0.35);
        color: #00d2ff;
    }
    .ai-panel-empty {
        padding: 16px 6px;
        font-size: 12px;
        color: rgba(255,255,255,0.55);
        font-style: italic;
        text-align: center;
    }
    .ai-stats-bar {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
        gap: 10px;
        margin-bottom: 12px;
        padding: 12px;
        background: rgba(0,0,0,0.18);
        border: 1px solid rgba(255,255,255,0.05);
        border-radius: 10px;
    }
    .ai-stat {
        display: flex;
        flex-direction: column;
        gap: 4px;
        align-items: flex-start;
        padding: 4px 8px;
        border-left: 2px solid rgba(0,210,255,0.35);
    }
    .ai-stat-val {
        font-family: 'JetBrains Mono', monospace;
        font-size: 22px;
        font-weight: 800;
        color: #00d2ff;
        line-height: 1;
    }
    .ai-stat-lbl {
        font-size: 8.5px;
        font-weight: 700;
        letter-spacing: 1.2px;
        color: rgba(255,255,255,0.55);
        text-transform: uppercase;
    }
    .ai-stat-warn { border-left-color: var(--accent); }
    .ai-stat-warn .ai-stat-val { color: var(--accent); }
    .ai-stat-good { border-left-color: #00e676; }
    .ai-stat-good .ai-stat-val { color: #00e676; }
    .ai-insight-systemic {
        background: linear-gradient(90deg, rgba(0,210,255,0.10), rgba(255,255,255,0.04)) !important;
        border-left-color: #00d2ff !important;
    }
    .ai-tag-fleet           { background: rgba(0,210,255,0.18);  color: #00d2ff; }
    .ai-tag-fleet_anomalia  { background: rgba(255,102,0,0.22); color: var(--accent); }
    .light-theme .ai-stats-bar { background: rgba(0,0,0,0.025); border-color: rgba(0,0,0,0.06); }
    .light-theme .ai-stat-lbl { color: rgba(0,0,0,0.55); }
    .ai-panel-list {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    .ai-insight {
        padding: 10px 12px;
        border-radius: 10px;
        background: rgba(255,255,255,0.04);
        border-left: 3px solid rgba(255,255,255,0.20);
    }
    .ai-insight-info     { border-left-color: #00d2ff; }
    .ai-insight-atencao  { border-left-color: var(--accent); background: rgba(255,102,0,0.06); }
    .ai-insight-critico  { border-left-color: var(--danger);  background: rgba(255,51,51,0.07); }
    .ai-insight-head {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 4px;
        font-size: 11px;
    }
    .ai-insight-tag {
        font-weight: 900;
        letter-spacing: 1.2px;
        padding: 2px 7px;
        border-radius: 4px;
        font-size: 9px;
        background: rgba(255,255,255,0.07);
        color: rgba(255,255,255,0.78);
    }
    .ai-tag-anomalia   { background: rgba(255,102,0,0.15);  color: var(--accent); }
    .ai-tag-correlacao { background: rgba(0,230,118,0.12);  color: #00e676; }
    .ai-tag-predicao   { background: rgba(0,210,255,0.15);  color: #00d2ff; }
    .ai-insight-title {
        font-weight: 700;
        color: #fff;
        flex: 1;
        min-width: 0;
    }
    .ai-insight-count {
        font-family: 'JetBrains Mono', monospace;
        font-size: 10px;
        font-weight: 800;
        padding: 2px 7px;
        border-radius: 999px;
        background: rgba(255,102,0,0.18);
        color: var(--accent);
        border: 1px solid rgba(255,102,0,0.30);
        cursor: help;
    }
    .ai-insight-time {
        font-size: 10px;
        color: rgba(255,255,255,0.45);
        font-family: 'JetBrains Mono', monospace;
    }
    .ai-insight-desc {
        font-size: 11.5px;
        color: rgba(255,255,255,0.78);
        line-height: 1.5;
    }
    .light-theme .ai-panel { background: linear-gradient(140deg, rgba(0,150,200,0.06), rgba(255,102,0,0.04)); border-color: rgba(0,150,200,0.20); }
    .light-theme .ai-panel-title { color: #111; }
    .light-theme .ai-panel-sub { color: rgba(0,0,0,0.55); }
    .light-theme .ai-insight { background: rgba(0,0,0,0.025); }
    .light-theme .ai-insight-title { color: #111; }
    .light-theme .ai-insight-desc { color: rgba(0,0,0,0.72); }
    /* 2026-06: gaps do painel IA (auditoria exaustiva) — textos brancos sem override. */
    .light-theme .ai-panel-empty { color: rgba(0,0,0,0.55); }
    .light-theme .ai-insight-tag { color: rgba(0,0,0,0.70); background: rgba(0,0,0,0.05); }
    .light-theme .ai-insight-time { color: rgba(0,0,0,0.50); }

    .chart-filters-row {
        display: flex;
        gap: 12px;
        align-items: flex-end;
        margin-bottom: 12px;
        border: 1px solid rgba(255,255,255,0.07);
        background: rgba(255,255,255,0.025);
        border-radius: 14px;
        padding: 10px;
    }
    .chart-filter-cell { flex: 0 0 280px; display: flex; flex-direction: column; gap: 6px; }
    .chart-filter-cell-grow { flex: 1 1 auto; min-width: 0; }
    @media (max-width: 720px) {
        .chart-filters-row { flex-direction: column; align-items: stretch; }
        .chart-filter-cell { flex: 1 1 auto; }
    }
    .ind-dropdown { position: relative; width: 100%; font-family: 'Inter', system-ui, sans-serif; }
    .ind-dropdown-trigger {
        width: 100%;
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 12px 16px;
        background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.015));
        border: 1px solid rgba(255,255,255,0.10);
        border-radius: 10px;
        color: #fff;
        cursor: pointer;
        text-align: left;
        transition: all .18s cubic-bezier(.2,.8,.2,1);
    }
    .ind-dropdown-compact .ind-dropdown-trigger {
        gap: 10px;
        padding: 8px 12px;
        border-radius: 8px;
    }
    .ind-dropdown-compact .ind-dropdown-swatch { width: 6px; height: 22px; }
    .ind-dropdown-compact .ind-dropdown-trigger-cat { font-size: 8px; letter-spacing: 1.4px; }
    .ind-dropdown-compact .ind-dropdown-trigger-label { font-size: 12px; }
    .ind-dropdown-leadicon { color: var(--accent); flex-shrink: 0; }
    .ind-dropdown-list-compact { max-height: 320px; }
    .ind-dropdown-trigger:hover {
        border-color: rgba(255,102,0,0.35);
        background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
    }
    .ind-dropdown.open .ind-dropdown-trigger {
        border-color: rgba(255,102,0,0.55);
        box-shadow: 0 0 0 3px rgba(255,102,0,0.10);
    }
    .ind-dropdown-swatch {
        width: 10px;
        height: 28px;
        border-radius: 3px;
        flex-shrink: 0;
        box-shadow: 0 0 8px currentColor;
    }
    .ind-dropdown-trigger-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
    .ind-dropdown-trigger-cat {
        font-size: 9px;
        font-weight: 800;
        letter-spacing: 1.6px;
        color: rgba(255,255,255,0.50);
        text-transform: uppercase;
    }
    .ind-dropdown-trigger-label {
        font-size: 14px;
        font-weight: 700;
        color: #fff;
        letter-spacing: 0.2px;
    }
    .ind-dropdown-caret {
        color: rgba(255,255,255,0.55);
        transition: transform .22s cubic-bezier(.2,.8,.2,1);
        flex-shrink: 0;
    }
    .ind-dropdown.open .ind-dropdown-caret { transform: rotate(180deg); color: var(--accent); }
    .ind-dropdown-backdrop {
        position: fixed;
        inset: 0;
        z-index: 40;
        background: transparent;
    }
    .ind-dropdown-panel {
        position: absolute;
        top: calc(100% + 6px);
        left: 0;
        right: 0;
        z-index: 41;
        background: rgba(18, 18, 22, 0.98);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border: 1px solid rgba(255,255,255,0.10);
        border-radius: 12px;
        box-shadow: 0 24px 56px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,102,0,0.05);
        overflow: hidden;
        animation: indDropdownIn .18s cubic-bezier(.2,.8,.2,1);
    }
    @keyframes indDropdownIn {
        from { opacity: 0; transform: translateY(-6px) scale(0.98); }
        to   { opacity: 1; transform: translateY(0) scale(1); }
    }
    .ind-dropdown-search {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 12px 14px;
        border-bottom: 1px solid rgba(255,255,255,0.06);
        color: rgba(255,255,255,0.45);
    }
    .ind-dropdown-search input {
        flex: 1;
        background: transparent;
        border: none;
        outline: none;
        color: #fff;
        font-size: 13px;
        font-family: inherit;
        padding: 2px 0;
    }
    .ind-dropdown-search input::placeholder { color: rgba(255,255,255,0.35); }
    .ind-dropdown-list {
        max-height: 380px;
        overflow-y: auto;
        padding: 6px 0 10px;
    }
    .ind-dropdown-list::-webkit-scrollbar { width: 8px; }
    .ind-dropdown-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.10); border-radius: 4px; }
    .ind-dropdown-list::-webkit-scrollbar-track { background: transparent; }
    .ind-dropdown-group-label {
        font-size: 9px;
        font-weight: 800;
        letter-spacing: 1.6px;
        color: rgba(255,255,255,0.35);
        text-transform: uppercase;
        padding: 10px 16px 6px;
    }
    .ind-dropdown-item {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 9px 16px;
        background: transparent;
        border: none;
        color: rgba(255,255,255,0.78);
        font-size: 13px;
        font-weight: 500;
        font-family: inherit;
        cursor: pointer;
        text-align: left;
        transition: background .12s ease, color .12s ease;
        border-left: 2px solid transparent;
    }
    .ind-dropdown-item:hover {
        background: rgba(255,102,0,0.08);
        color: #fff;
        border-left-color: rgba(255,102,0,0.55);
    }
    .ind-dropdown-item.active {
        background: rgba(255,102,0,0.14);
        color: #fff;
        font-weight: 700;
        border-left-color: var(--accent);
    }
    .ind-dropdown-item-check { color: var(--accent); flex-shrink: 0; }
    .ind-dropdown-empty {
        text-align: center;
        padding: 24px 16px;
        color: rgba(255,255,255,0.40);
        font-size: 12px;
    }
    /* Tema claro */
    .light-theme .ind-dropdown-trigger {
        background: linear-gradient(180deg, rgba(0,0,0,0.025), rgba(0,0,0,0.008));
        border-color: rgba(0,0,0,0.08);
        color: #111;
    }
    .light-theme .ind-dropdown-trigger-cat { color: rgba(0,0,0,0.55); }
    .light-theme .ind-dropdown-trigger-label { color: #111; }
    .light-theme .ind-dropdown-caret { color: rgba(0,0,0,0.55); }
    .light-theme .ind-dropdown-panel {
        background: rgba(255,255,255,0.98);
        border-color: rgba(0,0,0,0.08);
        box-shadow: 0 24px 56px rgba(0,0,0,0.18);
    }
    .light-theme .ind-dropdown-search { border-bottom-color: rgba(0,0,0,0.06); color: rgba(0,0,0,0.45); }
    .light-theme .ind-dropdown-search input { color: #111; }
    .light-theme .ind-dropdown-search input::placeholder { color: rgba(0,0,0,0.35); }
    .light-theme .ind-dropdown-group-label { color: rgba(0,0,0,0.45); }
    .light-theme .ind-dropdown-item { color: rgba(0,0,0,0.72); }
    .light-theme .ind-dropdown-item:hover { background: rgba(255,102,0,0.06); color: #111; }
    .light-theme .ind-dropdown-item.active { background: rgba(255,102,0,0.10); color: #111; }
    .chart-stage { width:100%; min-height:430px; border-radius:14px; overflow:hidden; background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(0,0,0,0.10)); border: 1px solid rgba(255,255,255,0.045); }
    .chart-empty { min-height:430px; display:flex; align-items:center; justify-content:center; color:#666; font-size:12px; font-weight:800; letter-spacing:1px; text-transform:uppercase; }
    .maint-ok { color: var(--success) !important; }
    .maint-warn { color: var(--accent) !important; }
    .maint-danger { color: var(--danger) !important; }
    .edge-command-center {
        grid-column: span 4;
        margin-top: 20px;
        padding: 18px;
        border-radius: 14px;
        border: 1px solid rgba(255,255,255,0.08);
        background:
            radial-gradient(circle at 0% 0%, rgba(255,102,0,0.12), transparent 34%),
            linear-gradient(180deg, rgba(18,18,18,0.96), rgba(5,5,5,0.96));
        box-shadow: 0 18px 45px rgba(0,0,0,0.38), inset 0 1px 0 rgba(255,255,255,0.04);
    }
    .edge-command-header {
        display:flex;
        align-items:flex-start;
        justify-content:space-between;
        gap:14px;
        padding-bottom:14px;
        border-bottom:1px solid rgba(255,255,255,0.07);
        margin-bottom:14px;
    }
    .edge-command-kicker {
        font-family:'JetBrains Mono', monospace;
        font-size:10px;
        font-weight:900;
        color:var(--accent);
        letter-spacing:2px;
        text-transform:uppercase;
        margin-bottom:6px;
    }
    .edge-command-title {
        color:var(--text-main);
        font-size:18px;
        font-weight:900;
        letter-spacing:1.8px;
        text-transform:uppercase;
    }
    .edge-command-subtitle {
        color:var(--text-muted);
        font-size:11px;
        letter-spacing:.8px;
        text-transform:uppercase;
        margin-top:5px;
    }
    .edge-command-status {
        min-width:230px;
        text-align:right;
        color:var(--text-muted);
        font-family:'JetBrains Mono', monospace;
        font-size:10px;
        line-height:1.45;
        text-transform:uppercase;
    }

    .edge-command-grid {
        display:grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap:12px;
    }

    .edge-command-group {
        border:1px solid rgba(255,255,255,0.06);
        border-radius:12px;
        padding:12px;
        background:rgba(255,255,255,0.025);
    }

    .edge-command-group-title {
        font-family:'JetBrains Mono', monospace;
        font-size:10px;
        color:#aaa;
        font-weight:900;
        letter-spacing:1.8px;
        text-transform:uppercase;
        margin-bottom:10px;
    }

    .edge-command-row {
        display:flex;
        flex-wrap:wrap;
        gap:8px;
    }
    .edge-command-btn {
        border:1px solid rgba(255,255,255,0.10);
        background:rgba(255,255,255,0.035);
        color:#ddd;
        min-height:38px;
        padding:9px 12px;
        border-radius:999px;
        font-family:'JetBrains Mono', monospace;
        font-size:10px;
        font-weight:900;
        letter-spacing:.9px;
        text-transform:uppercase;
        cursor:pointer;
        transition:all .18s ease;
    }
    .edge-command-btn:hover {
        transform: translateY(-2px);
        border-color:var(--accent);
        color:#fff;
        box-shadow:0 10px 24px rgba(255,102,0,0.12);
        background:rgba(255,102,0,0.08);
    }
    .edge-command-btn.primary { color:var(--accent); border-color:rgba(255,102,0,0.28); }
    .edge-command-btn.safe { color:var(--success); border-color:rgba(0,255,102,0.26); }
    .edge-command-btn.danger { color:var(--danger); border-color:rgba(255,51,51,0.32); }
    .edge-command-btn.warning { color:#ffd166; border-color:rgba(255,209,102,0.28); }
    .edge-command-btn.danger:hover {
        background:rgba(255,51,51,0.10);
        border-color:var(--danger);
        box-shadow:0 10px 26px rgba(255,51,51,0.16);
    }
    .edge-command-input {
        width:92px;
        min-height:38px;
        border:1px solid rgba(255,255,255,0.10);
        background:rgba(0,0,0,0.28);
        color:#fff;
        border-radius:999px;
        padding:8px 12px;
        font-family:'JetBrains Mono', monospace;
        font-size:11px;
        font-weight:800;
        outline:none;
    }
    .edge-lock-state {
        display:inline-flex;
        align-items:center;
        gap:7px;
        padding:8px 11px;
        border-radius:999px;
        border:1px solid rgba(255,255,255,0.08);
        background:rgba(255,255,255,0.035);
        font-size:10px;
        font-weight:900;
        letter-spacing:1px;
    }
    .edge-lock-dot {
        width:8px;
        height:8px;
        border-radius:50%;
        background:var(--success);
        box-shadow:0 0 12px var(--success);
    }
    .edge-lock-state.blocked .edge-lock-dot { background:var(--danger); box-shadow:0 0 12px var(--danger); }
    .edge-lock-state.blocked { color:var(--danger); border-color:rgba(255,51,51,0.25); }
    .edge-lock-state.free { color:var(--success); border-color:rgba(0,255,102,0.22); }
    @media (max-width: 1200px) {
        .edge-command-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }
    @media (max-width: 760px) {
        .edge-command-header { flex-direction:column; }
        .edge-command-status { text-align:left; min-width:0; }
        .edge-command-grid { grid-template-columns: 1fr; }
    }
    .esp32-feature-band {
        grid-column: span 4;
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 14px;
        padding: 16px;
        border-radius: 16px;
        border: 1px solid rgba(255,102,0,0.14);
        background: radial-gradient(circle at 10% 0%, rgba(255,102,0,0.12), transparent 34%), linear-gradient(145deg, rgba(18,18,19,0.96), rgba(4,4,5,0.98));
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 14px 36px rgba(0,0,0,0.30);
    }
    .esp32-feature-title { grid-column: span 4; display:flex; justify-content:space-between; gap:12px; align-items:center; padding-bottom:10px; border-bottom:1px solid rgba(255,255,255,0.06); margin-bottom:2px; }
    .esp32-feature-title strong { color:#fff; font-size:13px; font-weight:900; letter-spacing:2px; text-transform:uppercase; font-family:'JetBrains Mono', monospace; }
    .esp32-feature-title span { color:#888; font-size:10px; font-weight:800; letter-spacing:1px; text-transform:uppercase; }
    .esp32-feature-card { position:relative; min-height:112px; padding:14px; border-radius:13px; border:1px solid rgba(255,255,255,0.07); background:linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.015)); overflow:hidden; }
    .esp32-feature-card:before { content:""; position:absolute; inset:0; background: radial-gradient(circle at 80% 8%, rgba(255,102,0,0.16), transparent 28%); pointer-events:none; }
    .esp32-feature-label { position:relative; color:#888; font-size:8px; font-weight:900; letter-spacing:1.8px; text-transform:uppercase; margin-bottom:12px; }
    .esp32-feature-value { position:relative; color:#fff; font-family:'JetBrains Mono', monospace; font-size:26px; font-weight:900; line-height:1; }
    .esp32-feature-unit { position:relative; color:#777; font-size:10px; font-weight:800; letter-spacing:1px; margin-top:6px; text-transform:uppercase; }
    .esp32-feature-bar { position:relative; height:4px; border-radius:99px; background:rgba(255,255,255,0.06); overflow:hidden; margin-top:16px; }
    .esp32-feature-fill { height:100%; border-radius:99px; background:linear-gradient(90deg, #ff6600, #ffb000); box-shadow:0 0 14px rgba(255,102,0,0.38); }
    .esp32-feature-fill.blue { background:linear-gradient(90deg, #00d2ff, #0077ff); box-shadow:0 0 14px rgba(0,210,255,0.32); }
    .esp32-feature-fill.green { background:linear-gradient(90deg, #00ff66, #39ffae); box-shadow:0 0 14px rgba(0,255,102,0.30); }
    .esp32-feature-fill.red { background:linear-gradient(90deg, #ff3333, #ff7a7a); box-shadow:0 0 14px rgba(255,51,51,0.30); }
    .edge-command-group-title small { display:block; color:#666; font-size:8px; font-weight:800; letter-spacing:1px; margin-top:3px; }
    .edge-command-btn.pto { color:#00d2ff; border-color:rgba(0,210,255,0.26); }
    .edge-command-btn.pto:hover { background:rgba(0,210,255,0.09); border-color:#00d2ff; box-shadow:0 10px 26px rgba(0,210,255,0.12); }
    .edge-command-note { margin-top:10px; color:#777; font-size:9px; line-height:1.45; letter-spacing:.6px; text-transform:uppercase; }
    @media (max-width: 1200px) { .esp32-feature-band { grid-template-columns: repeat(2, minmax(0, 1fr)); } .esp32-feature-title { grid-column: span 2; } }
    @media (max-width: 768px) { .esp32-feature-band { grid-template-columns: 1fr; } .esp32-feature-title { grid-column: span 1; align-items:flex-start; flex-direction:column; } }
    .cyber-sec-card.v73 {
        border-radius: 18px;
        padding: 22px;
        border: 1px solid rgba(255,255,255,0.08);
        border-top: 1px solid rgba(255,102,0,0.42);
        background:
            radial-gradient(circle at 4% 0%, rgba(255,102,0,0.20), transparent 30%),
            radial-gradient(circle at 96% 10%, rgba(0,210,255,0.08), transparent 24%),
            linear-gradient(180deg, rgba(15,15,16,0.98), rgba(3,3,4,0.98));
        box-shadow: 0 22px 55px rgba(0,0,0,0.42), inset 0 1px 0 rgba(255,255,255,0.05);
    }
    .cyber-sec-card.v73.safe {
        border-top-color: rgba(0,255,102,0.35);
    }
    .cyber-sec-header.v73 {
        display:grid;
        grid-template-columns: minmax(260px, 1.2fr) minmax(280px, 1fr) auto;
        align-items:center;
        gap:18px;
        padding-bottom:16px;
        margin-bottom:16px;
    }
    .cyber-title-stack { display:flex; flex-direction:column; gap:6px; }
    .cyber-title-main {
        font-family:'JetBrains Mono', monospace;
        color:#fff;
        font-size:17px;
        line-height:1.15;
        font-weight:950;
        letter-spacing:2.2px;
        text-transform:uppercase;
    }
    .cyber-title-sub {
        font-size:9px;
        color:#777;
        font-weight:900;
        letter-spacing:1.6px;
        text-transform:uppercase;
    }
    .cyber-sec-grid.v73 {
        grid-template-columns: 1fr 1.55fr 1fr;
        align-items:stretch;
        gap:14px;
    }
    .cyber-sec-block.v73 {
        min-height:92px;
        border-radius:14px;
        padding:14px;
        border:1px solid rgba(255,255,255,0.07);
        background:linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.015));
    }
    .cyber-sec-block.v73.center { align-items:stretch; text-align:left; }
    .cyber-sec-block.v73.right { align-items:flex-end; justify-content:center; }
    .cyber-diag-box.v73 {
        max-width:none;
        min-height:54px;
        padding:13px 14px;
        border-radius:12px;
        font-size:12px;
        font-weight:900;
        text-align:left;
        justify-content:flex-start;
        text-transform:uppercase;
    }
    .cyber-fault-strip {
        display:grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap:10px;
        margin-top:14px;
    }
    .cyber-fault-chip {
        border:1px solid rgba(255,51,51,0.22);
        background:rgba(255,51,51,0.065);
        border-radius:12px;
        padding:11px 12px;
        min-height:68px;
    }
    .cyber-fault-code {
        font-family:'JetBrains Mono', monospace;
        font-size:9px;
        font-weight:900;
        color:var(--danger);
        letter-spacing:1px;
        text-transform:uppercase;
        margin-bottom:6px;
    }
    .cyber-fault-text {
        font-size:11px;
        line-height:1.35;
        font-weight:800;
        color:#e8e8e8;
        text-transform:uppercase;
    }
    .edge-command-center.v73 {
        border-radius:20px;
        padding:20px;
        background:
            radial-gradient(circle at 0% 0%, rgba(255,102,0,0.16), transparent 34%),
            radial-gradient(circle at 90% 12%, rgba(0,210,255,0.07), transparent 28%),
            linear-gradient(180deg, rgba(17,17,18,0.98), rgba(3,3,4,0.98));
        border:1px solid rgba(255,102,0,0.18);
        box-shadow:0 24px 60px rgba(0,0,0,0.42), inset 0 1px 0 rgba(255,255,255,0.05);
    }
    .edge-command-header.v73 {
        display:grid;
        grid-template-columns: minmax(280px, 1fr) minmax(230px, auto);
        align-items:center;
        gap:18px;
    }
    .edge-command-title.v73 {
        font-size:20px;
        letter-spacing:2px;
    }
    .edge-command-grid.v73 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap:14px;
    }
    .edge-command-group.v73 {
        min-height:132px;
        border-radius:16px;
        padding:16px;
        background:
            radial-gradient(circle at 100% 0%, rgba(255,102,0,0.10), transparent 34%),
            rgba(255,255,255,0.025);
        border:1px solid rgba(255,255,255,0.075);
        display:flex;
        flex-direction:column;
        justify-content:space-between;
    }
    .edge-command-group-title.v73 {
        color:#e6e6e6;
        font-size:10px;
        letter-spacing:2px;
        margin-bottom:12px;
    }
    .edge-command-row.v73 { gap:9px; }
    .edge-command-btn.v73 {
        min-height:39px;
        border-radius:12px;
        padding:9px 13px;
        background:linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
    }
    .edge-command-input.v73 {
        border-radius:12px;
        width:112px;
    }
    .edge-command-status.v73 {
        min-width:240px;
        border-radius:16px;
        padding:13px;
        border:1px solid rgba(255,255,255,0.07);
        background:rgba(0,0,0,0.28);
    }
    .edge-command-status-line {
        color:#777;
        margin-top:8px;
        font-size:9px;
    }
    .modal-list-2026 li {
        border-radius:12px;
        border:1px solid rgba(255,255,255,0.05);
        background:linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.015));
        padding:14px;
        margin-bottom:10px;
    }
    @media (max-width: 1200px) {
        .cyber-sec-header.v73,
        .cyber-sec-grid.v73,
        .edge-command-header.v73 {
            grid-template-columns: 1fr;
        }
        .cyber-fault-strip,
        .edge-command-grid.v73 {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
        .edge-command-status.v73 { text-align:left; }
    }

    @media (max-width: 760px) {
        .cyber-fault-strip,
        .edge-command-grid.v73 {
            grid-template-columns: 1fr;
        }
    }
    .cyber-sec-card.v74 {
        grid-column: span 4;
        border-radius: 18px;
        padding: 20px;
        border: 1px solid rgba(255,255,255,0.075);
        border-top: 2px solid rgba(255,51,51,0.78);
        background: radial-gradient(circle at 0% 0%, rgba(255,102,0,0.14), transparent 34%), linear-gradient(180deg, rgba(14,14,15,0.98), rgba(4,4,5,0.98));
        box-shadow: 0 22px 55px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.045);
        overflow:hidden;
    }
    .cyber-sec-card.v74.safe { border-top-color: rgba(0,255,102,.56); }
    .cyber-sec-header.v74 {
        display:grid; grid-template-columns: minmax(220px, 1fr) auto minmax(150px, auto);
        gap:16px; align-items:center; padding-bottom:16px; margin-bottom:16px; border-bottom:1px solid rgba(255,255,255,0.065);
    }
    .cyber-title-stack.v74 { display:flex; flex-direction:column; gap:5px; }
    .cyber-title-eyebrow { color:var(--accent); font-size:9px; font-weight:950; letter-spacing:2.6px; text-transform:uppercase; font-family:'JetBrains Mono', monospace; }
    .cyber-title-main.v74 { color:#fff; font-size:21px; line-height:1; font-weight:950; letter-spacing:2.2px; text-transform:uppercase; font-family:'JetBrains Mono', monospace; }
    .cyber-badges.v74 { justify-content:center; gap:9px; }
    .cyber-badge.v74 { min-width:76px; justify-content:center; height:32px; padding:0 12px; border-radius:999px; background:rgba(255,255,255,0.035); font-size:9px; font-weight:950; letter-spacing:1.2px; text-transform:uppercase; }
    .cyber-score.v74 { min-width:146px; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 12px; border-radius:14px; background:rgba(0,0,0,.32); border:1px solid rgba(255,255,255,.075); }
    .cyber-score.v74 span { color:#777; font-size:8px; font-weight:950; letter-spacing:1px; }
    .cyber-score.v74 strong { font-family:'JetBrains Mono', monospace; font-size:18px; line-height:1; }
    .cyber-sec-grid.v74 { display:grid; grid-template-columns: .85fr 1.8fr .95fr; gap:12px; align-items:stretch; }
    .cyber-metric-card.v74 { min-height:104px; border-radius:15px; padding:14px 15px; border:1px solid rgba(255,255,255,.07); background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.018)); display:flex; flex-direction:column; justify-content:center; gap:8px; }
    .cyber-metric-card.v74 strong { color:#fff; font-size:18px; line-height:1.18; font-weight:950; letter-spacing:.5px; text-transform:uppercase; }
    .cyber-metric-card.v74.diag strong { font-size:13px; line-height:1.35; }
    .cyber-metric-card.v74 small { color:#777; font-size:9px; font-weight:850; letter-spacing:.7px; text-transform:uppercase; }
    .cyber-metric-card.v74.safe strong { color:var(--success); }
    .cyber-metric-card.v74.danger strong { color:var(--danger); }
    .cyber-metric-card.v74.sync strong { color:var(--accent); font-family:'JetBrains Mono', monospace; font-size:14px; }
    .cyber-fault-strip.v74 { margin-top:12px; display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap:10px; }
    .cyber-fault-chip.v74 { min-height:74px; padding:12px 13px; border-radius:14px; border:1px solid rgba(255,51,51,.22); background:linear-gradient(180deg, rgba(255,51,51,.08), rgba(255,51,51,.025)); }
    .cyber-fault-chip.v74.nominal { grid-column:span 3; border-color:rgba(0,255,102,.18); background:linear-gradient(180deg, rgba(0,255,102,.055), rgba(0,255,102,.018)); }
    .cyber-fault-code { color:var(--danger); font-family:'JetBrains Mono', monospace; font-size:9px; font-weight:950; letter-spacing:1.2px; text-transform:uppercase; margin-bottom:7px; }
    .cyber-fault-chip.nominal .cyber-fault-code { color:var(--success); }
    .cyber-fault-text { color:#e9e9e9; font-size:11px; line-height:1.35; font-weight:850; text-transform:uppercase; }
    .edge-command-center.v74 { grid-column: span 4; border-radius:20px; padding:20px; border:1px solid rgba(255,102,0,.16); background: radial-gradient(circle at 0 0, rgba(255,102,0,.15), transparent 34%), linear-gradient(180deg, rgba(15,15,16,.98), rgba(4,4,5,.98)); box-shadow:0 24px 60px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.045); }
    .edge-command-header.v74 { display:grid; grid-template-columns:minmax(260px,1fr) minmax(290px,auto); align-items:center; gap:18px; padding-bottom:16px; margin-bottom:16px; border-bottom:1px solid rgba(255,255,255,.065); }
    .edge-command-kicker.v74 { color:var(--accent); font-family:'JetBrains Mono', monospace; font-size:9px; font-weight:950; letter-spacing:2.4px; text-transform:uppercase; margin-bottom:6px; }
    .edge-command-title.v74 { color:#fff; font-family:'JetBrains Mono', monospace; font-size:21px; font-weight:950; letter-spacing:1.8px; text-transform:uppercase; line-height:1; }
    .edge-command-status.v74 { display:flex; align-items:center; justify-content:flex-end; gap:12px; min-width:0; background:transparent; border:0; padding:0; }
    .edge-command-last.v74 { min-width:150px; padding:9px 12px; border-radius:14px; border:1px solid rgba(255,255,255,.07); background:rgba(0,0,0,.28); text-align:right; }
    .edge-command-last.v74 span, .edge-command-last.v74 small { display:block; color:#777; font-size:8px; font-weight:950; letter-spacing:.9px; text-transform:uppercase; }
    .edge-command-last.v74 strong { display:block; color:var(--accent); font-family:'JetBrains Mono', monospace; font-size:11px; line-height:1.4; letter-spacing:.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:150px; }
    .edge-command-grid.v74 { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:12px; }
    .edge-command-group.v74 { min-height:128px; border-radius:16px; padding:15px; border:1px solid rgba(255,255,255,.075); background: radial-gradient(circle at 100% 0%, rgba(255,102,0,.09), transparent 34%), linear-gradient(180deg, rgba(255,255,255,.042), rgba(255,255,255,.018)); display:flex; flex-direction:column; justify-content:space-between; gap:12px; }
    .edge-command-group-title.v74 { color:#e9e9e9; font-family:'JetBrains Mono', monospace; font-size:10px; line-height:1; font-weight:950; letter-spacing:2px; text-transform:uppercase; }
    .edge-command-row.v74 { display:flex; flex-wrap:wrap; gap:9px; align-items:center; }
    .edge-command-row.v74.compact .edge-command-btn.v74 { min-width:58px; }
    .edge-command-btn.v74 { min-height:40px; border-radius:13px; padding:9px 13px; border:1px solid rgba(255,255,255,.10); background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.018)); color:#e8e8e8; font-size:10px; font-weight:950; letter-spacing:.8px; text-transform:uppercase; transition:.22s ease; }
    .edge-command-btn.v74:hover { transform:translateY(-1px); border-color:rgba(255,102,0,.38); box-shadow:0 10px 24px rgba(255,102,0,.12); }
    .edge-command-btn.v74.primary { color:var(--accent); border-color:rgba(255,102,0,.32); }
    .edge-command-btn.v74.safe { color:var(--success); border-color:rgba(0,255,102,.26); }
    .edge-command-btn.v74.danger { color:var(--danger); border-color:rgba(255,51,51,.32); }
    .edge-command-btn.v74.warning { color:#ffd166; border-color:rgba(255,209,102,.28); }
    .edge-command-btn.v74.pto { color:#00d2ff; border-color:rgba(0,210,255,.30); }
    .edge-command-input.v74 { width:94px; min-height:40px; border-radius:13px; padding:8px 10px; border:1px solid rgba(255,255,255,.10); background:rgba(0,0,0,.24); color:#fff; font-family:'JetBrains Mono', monospace; font-size:11px; font-weight:900; outline:none; }
    .edge-command-row.v74.system-row { display:grid; grid-template-columns:1fr 94px 1fr; }
    .edge-lock-state { height:36px; border-radius:999px; padding:0 13px; display:flex; align-items:center; gap:8px; font-size:10px; font-weight:950; letter-spacing:.8px; }
    @media (max-width: 1200px) {
        .cyber-sec-header.v74, .edge-command-header.v74 { grid-template-columns:1fr; }
        .cyber-badges.v74 { justify-content:flex-start; }
        .edge-command-status.v74 { justify-content:flex-start; }
        .cyber-sec-grid.v74, .edge-command-grid.v74 { grid-template-columns:1fr; }
        .cyber-fault-strip.v74 { grid-template-columns:1fr; }
        .cyber-fault-chip.v74.nominal { grid-column:span 1; }
    }
    .edge-command-center.v75 {
        grid-column: span 4;
        border-radius: 22px;
        padding: 22px;
        border: 1px solid rgba(255,102,0,.18);
        background:
            radial-gradient(circle at 0% 0%, rgba(255,102,0,.18), transparent 34%),
            radial-gradient(circle at 100% 100%, rgba(0,210,255,.055), transparent 30%),
            linear-gradient(180deg, rgba(15,15,16,.98), rgba(5,5,6,.99));
        box-shadow: 0 26px 64px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.045);
    }
    .edge-command-header.v75 {
        display:grid;
        grid-template-columns:minmax(260px,1fr) minmax(300px,auto);
        gap:18px;
        align-items:center;
        padding-bottom:16px;
        border-bottom:1px solid rgba(255,255,255,.075);
    }
    .edge-command-kicker.v75 {
        color:var(--accent);
        font-family:'JetBrains Mono', monospace;
        font-size:9px;
        font-weight:950;
        letter-spacing:2.6px;
        text-transform:uppercase;
        margin-bottom:7px;
    }
    .edge-command-title.v75 {
        color:#fff;
        font-family:'JetBrains Mono', monospace;
        font-size:23px;
        line-height:1;
        font-weight:950;
        letter-spacing:1.8px;
        text-transform:uppercase;
    }
    .edge-command-subtitle.v75 {
        margin-top:7px;
        color:#8a8a8a;
        font-size:11px;
        font-weight:900;
        letter-spacing:1px;
        text-transform:uppercase;
    }
    .edge-command-status.v75 {
        display:flex;
        align-items:center;
        justify-content:flex-end;
        gap:12px;
    }
    .edge-lock-state.v75 {
        height:38px;
        border-radius:999px;
        padding:0 14px;
        display:flex;
        align-items:center;
        gap:8px;
        font-size:10px;
        font-weight:950;
        letter-spacing:.9px;
        text-transform:uppercase;
        background:rgba(0,0,0,.28);
        border:1px solid rgba(255,255,255,.08);
    }
    .edge-lock-state.v75.free { color:var(--success); border-color:rgba(0,255,102,.24); }
    .edge-lock-state.v75.blocked { color:var(--danger); border-color:rgba(255,51,51,.32); }
    .edge-command-last.v75 {
        min-width:168px;
        padding:10px 12px;
        border-radius:15px;
        border:1px solid rgba(255,255,255,.075);
        background:rgba(0,0,0,.28);
        text-align:right;
    }
    .edge-command-last.v75 span,
    .edge-command-last.v75 small {
        display:block;
        color:#777;
        font-size:8px;
        font-weight:950;
        letter-spacing:1px;
        text-transform:uppercase;
    }
    .edge-command-last.v75 strong {
        display:block;
        color:var(--accent);
        font-family:'JetBrains Mono', monospace;
        font-size:12px;
        line-height:1.45;
        letter-spacing:.6px;
        max-width:170px;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
    }
    .edge-command-warning.v75 {
        margin:16px 0;
        display:flex;
        align-items:center;
        gap:10px;
        min-height:42px;
        padding:11px 13px;
        border-radius:15px;
        border:1px solid rgba(255,209,102,.22);
        background:linear-gradient(90deg, rgba(255,209,102,.075), rgba(255,102,0,.035));
        color:#e8e8e8;
        font-size:11px;
        font-weight:850;
        letter-spacing:.3px;
        line-height:1.35;
    }
    .edge-command-warning.v75 span { color:#ffd166; font-size:16px; }
    .edge-command-warning.v75 strong { color:#dedede; font-size:11px; font-weight:850; }
    .edge-command-grid.v75 {
        display:grid;
        grid-template-columns:repeat(3, minmax(0, 1fr));
        gap:14px;
    }
    .edge-command-panel.v75 {
        min-height:205px;
        border-radius:18px;
        padding:16px;
        border:1px solid rgba(255,255,255,.075);
        background:
            radial-gradient(circle at 100% 0%, rgba(255,102,0,.095), transparent 38%),
            linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.018));
        display:flex;
        flex-direction:column;
        gap:14px;
        justify-content:space-between;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
    }
    .edge-command-panel.v75.critical {
        border-color:rgba(255,102,0,.16);
        background:
            radial-gradient(circle at 100% 0%, rgba(255,51,51,.095), transparent 38%),
            linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.018));
    }
    .edge-command-panel-head.v75 {
        display:grid;
        grid-template-columns:38px 1fr;
        gap:12px;
        align-items:start;
    }
    .edge-command-icon.v75 {
        width:38px;
        height:38px;
        border-radius:14px;
        display:flex;
        align-items:center;
        justify-content:center;
        background:rgba(255,102,0,.09);
        border:1px solid rgba(255,102,0,.18);
        font-size:17px;
    }
    .edge-command-panel.v75 h4 {
        margin:0 0 6px;
        color:#fff;
        font-family:'JetBrains Mono', monospace;
        font-size:13px;
        line-height:1;
        font-weight:950;
        letter-spacing:1.3px;
        text-transform:uppercase;
    }
    .edge-command-panel.v75 p {
        margin:0;
        color:#8f8f8f;
        font-size:10px;
        line-height:1.35;
        font-weight:800;
        letter-spacing:.35px;
    }
    .edge-command-help.v75 {
        flex:1;
        padding:12px;
        border-radius:14px;
        border:1px solid rgba(255,255,255,.065);
        background:rgba(0,0,0,.24);
        color:#b7b7b7;
        font-size:10px;
        line-height:1.42;
        font-weight:800;
    }
    .edge-command-help.v75 b {
        color:#fff;
        font-weight:950;
    }
    .edge-command-row.v75 {
        display:flex;
        flex-wrap:wrap;
        gap:9px;
        align-items:center;
    }
    .edge-command-row.v75.compact .edge-command-btn.v75 {
        min-width:72px;
    }
    .edge-command-btn.v75 {
        min-height:40px;
        border-radius:13px;
        padding:9px 13px;
        border:1px solid rgba(255,255,255,.105);
        background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.018));
        color:#e8e8e8;
        font-size:10px;
        font-weight:950;
        letter-spacing:.8px;
        text-transform:uppercase;
        transition:.22s ease;
        cursor:pointer;
    }
    .edge-command-btn.v75:hover {
        transform:translateY(-1px);
        border-color:rgba(255,102,0,.42);
        box-shadow:0 10px 24px rgba(255,102,0,.13);
    }
    .edge-command-btn.v75.primary { color:var(--accent); border-color:rgba(255,102,0,.34); background:rgba(255,102,0,.055); }
    .edge-command-btn.v75.safe { color:var(--success); border-color:rgba(0,255,102,.30); }
    .edge-command-btn.v75.danger { color:var(--danger); border-color:rgba(255,51,51,.36); }
    .edge-command-btn.v75.warning { color:#ffd166; border-color:rgba(255,209,102,.30); }
    .edge-command-btn.v75.pto { color:#00d2ff; border-color:rgba(0,210,255,.30); }
    .edge-command-input.v75 {
        width:100%;
        min-height:40px;
        border-radius:13px;
        padding:8px 10px;
        border:1px solid rgba(255,255,255,.105);
        background:rgba(0,0,0,.24);
        color:#fff;
        font-family:'JetBrains Mono', monospace;
        font-size:11px;
        font-weight:900;
        outline:none;
    }
    .edge-command-row.v75.system-row {
        display:grid;
        grid-template-columns:1fr 94px 1fr;
        width:100%;
    }
    @media (max-width: 1200px) {
        .edge-command-header.v75 { grid-template-columns:1fr; }
        .edge-command-status.v75 { justify-content:flex-start; flex-wrap:wrap; }
        .edge-command-grid.v75 { grid-template-columns:1fr; }
    }
    @media (max-width: 760px) {
        .edge-command-center.v75 { padding:16px; }
        .edge-command-title.v75 { font-size:18px; }
        .edge-command-row.v75.system-row { grid-template-columns:1fr; }
    }
    .light-theme .hud-card-2026,
    .light-theme .data-only-card-2026,
    .light-theme .clickable-card,
    .light-theme .round-chart-item,
    .light-theme .cyber-sec-card,
    .light-theme .cyber-sec-card.v74,
    .light-theme .edge-command-center,
    .light-theme .edge-command-center.v75,
    .light-theme .history-chart-panel,
    .light-theme .cyber-metric-card,
    .light-theme .edge-command-panel,
    .light-theme .edge-command-panel.v75,
    .light-theme .edge-command-help,
    .light-theme .chart-control-box,
    .light-theme .chart-stage,
    .light-theme .cyber-fault-chip,
    .light-theme .esp32-feature-band {
        background:#ffffff !important;
        color:#111827 !important;
        border-color:rgba(15,23,42,.12) !important;
        box-shadow:0 14px 34px rgba(15,23,42,.075) !important;
    }
    .light-theme .edge-command-center.v75,
    .light-theme .cyber-sec-card.v74,
    .light-theme .history-chart-panel {
        background:
            radial-gradient(circle at 0 0, rgba(255,102,0,.08), transparent 32%),
            linear-gradient(180deg, #ffffff, #f8fafc) !important;
    }
    .light-theme .hud-label-2026,
    .light-theme .hud-meta-label-2026,
    .light-theme .cyber-sec-label,
    .light-theme .chart-control-label,
    .light-theme .chart-title-sub,
    .light-theme .chart-current-sub,
    .light-theme .edge-command-kicker,
    .light-theme .edge-command-kicker.v75,
    .light-theme .edge-command-panel.v75 p,
    .light-theme .edge-command-help.v75,
    .light-theme .edge-command-last.v75 span,
    .light-theme .edge-command-last.v75 small,
    .light-theme .cyber-title-eyebrow,
    .light-theme small {
        color:#5f6b7a !important;
        text-shadow:none !important;
    }
    .light-theme .hud-value-2026,
    .light-theme .hud-main-data-2026,
    .light-theme .time-value-2026,
    .light-theme .round-val-text,
    .light-theme .round-val-vel,
    .light-theme .round-val-rpm,
    .light-theme .round-val-eco,
    .light-theme .round-val-diesel,
    .light-theme .cyber-title-main,
    .light-theme .cyber-title-main.v74,
    .light-theme .chart-title-main,
    .light-theme .chart-current-value,
    .light-theme .edge-command-title,
    .light-theme .edge-command-title.v75,
    .light-theme .edge-command-panel.v75 h4,
    .light-theme .cyber-metric-card.v74 strong,
    .light-theme .cyber-fault-text,
    .light-theme .edge-command-warning.v75 strong {
        color:#111827 !important;
        text-shadow:none !important;
    }
    .light-theme .chart-chip,
    .light-theme .edge-command-btn,
    .light-theme .edge-command-btn.v75,
    .light-theme .cyber-badge,
    .light-theme .cyber-badge.v74,
    .light-theme .edge-lock-state,
    .light-theme .edge-lock-state.v75,
    .light-theme .edge-command-last.v75,
    .light-theme .edge-command-input,
    .light-theme .edge-command-input.v75 {
        background:#f8fafc !important;
        color:#111827 !important;
        border-color:rgba(15,23,42,.14) !important;
    }
    .light-theme .chart-chip.active,
    .light-theme .edge-command-btn.v75.primary,
    .light-theme .edge-command-btn.primary {
        background:rgba(255,102,0,.12) !important;
        color:#b54700 !important;
        border-color:rgba(255,102,0,.42) !important;
    }
    .light-theme .edge-command-warning.v75 {
        background:rgba(255,193,7,.12) !important;
        border-color:rgba(180,120,0,.24) !important;
        color:#4b5563 !important;
    }

    @media (max-width: 1180px) {
        .telemetry-grid-2026 {
            grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
            gap:14px !important;
        }
        .cyber-sec-card,
        .cyber-sec-card.v74,
        .history-chart-panel,
        .edge-command-center,
        .edge-command-center.v75,
        .esp32-feature-band,
        .hud-card-2026[style*="span 4"] {
            grid-column:span 2 !important;
        }
        .cyber-sec-header.v74,
        .edge-command-header.v75 {
            grid-template-columns:1fr !important;
            align-items:stretch !important;
        }
        .cyber-badges.v74,
        .edge-command-status.v75 {
            justify-content:flex-start !important;
            flex-wrap:wrap !important;
        }
        .cyber-sec-grid.v74,
        .cyber-fault-strip.v74 {
            grid-template-columns:1fr !important;
        }
        .cyber-fault-chip.v74.nominal {
            grid-column:span 1 !important;
        }
        .chart-toolbar {
            flex-direction:column !important;
            align-items:stretch !important;
            gap:12px !important;
        }

        .chart-current-value,
        .chart-current-sub {
            text-align:left !important;
        }
    }
    @media (max-width: 760px) {
        .telemetry-grid-2026 {
            grid-template-columns:1fr !important;
            gap:12px !important;
        }
        .cyber-sec-card,
        .cyber-sec-card.v74,
        .history-chart-panel,
        .edge-command-center,
        .edge-command-center.v75,
        .esp32-feature-band,
        .hud-card-2026,
        .hud-card-2026[style*="span 4"],
        .hud-card-2026[style*="span 2"] {
            grid-column:span 1 !important;
        }
        .hud-card-2026,
        .data-only-card-2026,
        .clickable-card,
        .round-chart-item,
        .cyber-sec-card,
        .history-chart-panel,
        .edge-command-center {
            border-radius:16px !important;
            padding:16px !important;
        }
        .hud-value-2026,
        .hud-main-data-2026,
        .round-val-text,
        .round-val-vel,
        .round-val-rpm,
        .round-val-eco,
        .round-val-diesel {
            font-size:clamp(28px, 11vw, 42px) !important;
        }

        .cyber-title-main.v74,
        .edge-command-title.v75,
        .chart-title-main {
            font-size:18px !important;
            line-height:1.15 !important;
        }

        .chart-stage {
            min-height:310px !important;
        }
        .chart-selector-row,
        .chart-range-row,
        .edge-command-row.v75,
        .edge-command-row {
            gap:8px !important;
        }
        .chart-chip {
            flex:1 1 auto;
            text-align:center;
            padding:10px 12px !important;
            font-size:9px !important;
        }
        .edge-command-grid.v75,
        .edge-command-grid {
            grid-template-columns:1fr !important;
        }
        .edge-command-panel.v75 {
            min-height:auto !important;
            padding:14px !important;
        }
        .edge-command-panel-head.v75 {
            grid-template-columns:34px 1fr !important;
        }
        .edge-command-icon.v75 {
            width:34px !important;
            height:34px !important;
        }
        .edge-command-row.v75.system-row {
            grid-template-columns:1fr !important;
        }
        .edge-command-btn.v75,
        .edge-command-btn {
            flex:1 1 135px;
            min-height:42px;
        }
        .edge-command-input.v75 {
            min-width:100%;
        }
    }
    @media (max-width: 420px) {
        .chart-chip,
        .edge-command-btn.v75,
        .edge-command-btn {
            flex:1 1 100%;
        }
        .cyber-score.v74 {
            width:100%;
        }
        .cyber-metric-card.v74 strong {
            font-size:15px !important;
        }
    }
    .telemetry-grid-2026 {
        gap: 18px;
        align-items: start;
    }
    .edge-command-center.v75 {
        margin-top: 4px;
        padding: 24px;
    }
    .edge-command-grid.v75 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
        align-items: stretch;
    }
    .edge-command-panel.v75 {
        min-height: 232px;
        min-width: 0;
        padding: 18px;
        gap: 16px;
    }
    .edge-command-panel-head.v75 {
        min-height: 48px;
        align-items: start;
    }
    .edge-command-help.v75 {
        min-height: 88px;
    }
    .edge-command-row.v75 {
        width: 100%;
        gap: 10px;
        align-items: stretch;
    }
    .edge-command-row.v75.compact .edge-command-btn.v75 {
        flex: 1 1 calc(50% - 5px);
        min-width: 92px;
    }
    .edge-command-btn.v75 {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        min-width: 0;
        flex: 1 1 140px;
        white-space: nowrap;
    }
    .edge-command-input.v75 {
        text-align: center;
    }
    .edge-command-row.v75.system-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 108px minmax(0, 1fr);
        gap: 10px;
        width: 100%;
        align-items: stretch;
    }
    .edge-command-row.v75.system-row > * {
        min-width: 0;
    }
    @media (min-width: 1700px) {
        .edge-command-grid.v75 {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }
    }
    @media (max-width: 1480px) and (min-width: 761px) {
        .telemetry-grid-2026 {
            gap: 16px;
        }
        .edge-command-center.v75 {
            padding: 20px;
        }
        .edge-command-grid.v75 {
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 16px;
        }
        .edge-command-panel.v75 {
            min-height: 220px;
            padding: 16px;
        }
        .edge-command-help.v75 {
            min-height: 82px;
        }
        .edge-command-row.v75.system-row {
            grid-template-columns: minmax(0, 1fr) 98px minmax(0, 1fr);
        }
    }
    @media (max-width: 760px) {
        .telemetry-grid-2026 {
            gap: 14px !important;
        }
        .edge-command-center.v75 {
            padding: 16px !important;
        }
        .edge-command-grid.v75 {
            gap: 14px !important;
        }
        .edge-command-panel.v75 {
            min-height: auto !important;
            padding: 15px !important;
            gap: 14px !important;
        }
        .edge-command-help.v75 {
            min-height: auto !important;
        }
        .edge-command-row.v75.compact .edge-command-btn.v75,
        .edge-command-btn.v75 {
            flex: 1 1 100%;
        }
        .edge-command-row.v75.system-row {
            grid-template-columns: 1fr !important;
        }
    }
    .edge-command-center.v75 {
        position: relative;
        overflow: hidden;
        margin-top: 6px;
        padding: 24px;
        border-radius: 24px;
        border: 1px solid rgba(255,102,0,.20);
        background:
            radial-gradient(circle at 0% 0%, rgba(255,124,32,.18), transparent 30%),
            radial-gradient(circle at 100% 0%, rgba(0,210,255,.07), transparent 26%),
            linear-gradient(180deg, rgba(17,17,19,.99), rgba(6,6,8,.995));
        box-shadow:
            0 30px 70px rgba(0,0,0,.48),
            inset 0 1px 0 rgba(255,255,255,.055),
            inset 0 -1px 0 rgba(255,255,255,.02);
    }
    .edge-command-center.v75::before {
        content: "";
        position: absolute;
        top: 0;
        left: 18px;
        right: 18px;
        height: 2px;
        border-radius: 999px;
        background: linear-gradient(90deg, rgba(255,102,0,.85), rgba(255,178,102,.35), rgba(0,210,255,.18));
        opacity: .95;
        pointer-events: none;
    }
    .edge-command-center.v75::after {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: linear-gradient(135deg, rgba(255,255,255,.025), transparent 18%, transparent 82%, rgba(255,255,255,.02));
        mix-blend-mode: screen;
    }
    .edge-command-header.v75 {
        position: relative;
        gap: 20px;
        padding-bottom: 18px;
        margin-bottom: 2px;
    }
    .edge-command-title.v75 {
        font-size: 24px;
        letter-spacing: 2px;
        text-shadow: 0 0 18px rgba(255,102,0,.08);
    }
    .edge-command-subtitle.v75 {
        color: #9a9a9a;
        letter-spacing: 1.4px;
    }
    .edge-lock-state.v75,
    .edge-command-last.v75 {
        backdrop-filter: blur(8px);
        box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
    }
    .edge-command-warning.v75 {
        margin: 18px 0;
        border-radius: 16px;
        padding: 12px 14px;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.03), 0 10px 24px rgba(0,0,0,.16);
    }
    .edge-command-grid.v75 {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
        gap: 18px;
        align-items: stretch;
    }
    .edge-command-panel.v75 {
        position: relative;
        min-height: 236px;
        min-width: 0;
        padding: 18px;
        gap: 16px;
        border-radius: 20px;
        border: 1px solid rgba(255,255,255,.085);
        background:
            radial-gradient(circle at 100% 0%, rgba(255,122,36,.11), transparent 36%),
            linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.018));
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.03),
            inset 0 -1px 0 rgba(255,255,255,.018),
            0 16px 36px rgba(0,0,0,.22);
        transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
    }
    .edge-command-panel.v75:hover {
        transform: translateY(-3px);
        border-color: rgba(255,102,0,.24);
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.04),
            0 18px 40px rgba(0,0,0,.28),
            0 0 0 1px rgba(255,102,0,.06);
    }
    .edge-command-panel.v75.critical {
        background:
            radial-gradient(circle at 100% 0%, rgba(255,80,80,.11), transparent 36%),
            linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.018));
        border-color: rgba(255,120,120,.10);
    }
    .edge-command-panel-head.v75 {
        min-height: 50px;
        grid-template-columns: 42px 1fr;
        gap: 13px;
        align-items: start;
    }
    .edge-command-icon.v75 {
        width: 42px;
        height: 42px;
        border-radius: 15px;
        background: linear-gradient(180deg, rgba(255,102,0,.15), rgba(255,102,0,.06));
        border: 1px solid rgba(255,102,0,.22);
        box-shadow: 0 10px 20px rgba(255,102,0,.10), inset 0 1px 0 rgba(255,255,255,.04);
    }
    .edge-command-panel.v75 h4 {
        font-size: 14px;
        letter-spacing: 1.4px;
    }
    .edge-command-panel.v75 p {
        font-size: 10px;
        line-height: 1.42;
        color: #949494;
    }
    .edge-command-help.v75 {
        min-height: 88px;
        border-radius: 15px;
        padding: 13px;
        background: linear-gradient(180deg, rgba(0,0,0,.28), rgba(255,255,255,.02));
        border: 1px solid rgba(255,255,255,.06);
        color: #bbbbbb;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.015);
    }
    .edge-command-row.v75 {
        width: 100%;
        gap: 10px;
        align-items: stretch;
    }
    .edge-command-btn.v75 {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 42px;
        min-width: 0;
        flex: 1 1 140px;
        padding: 10px 14px;
        border-radius: 14px;
        background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
        box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
        white-space: nowrap;
    }
    .edge-command-row.v75.compact .edge-command-btn.v75 {
        flex: 1 1 calc(50% - 5px);
        min-width: 94px;
    }
    .edge-command-btn.v75:hover {
        transform: translateY(-2px);
        box-shadow: 0 12px 24px rgba(255,102,0,.12), inset 0 1px 0 rgba(255,255,255,.04);
    }
    .edge-command-btn.v75.primary {
        background: linear-gradient(180deg, rgba(255,102,0,.12), rgba(255,102,0,.05));
    }
    .edge-command-btn.v75.safe {
        background: linear-gradient(180deg, rgba(0,255,102,.08), rgba(0,255,102,.02));
    }
    .edge-command-btn.v75.danger {
        background: linear-gradient(180deg, rgba(255,51,51,.09), rgba(255,51,51,.02));
    }
    .edge-command-btn.v75.pto {
        background: linear-gradient(180deg, rgba(0,210,255,.09), rgba(0,210,255,.025));
    }
    .edge-command-input.v75 {
        width: 100%;
        min-height: 42px;
        text-align: center;
        border-radius: 14px;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
    }
    .edge-command-row.v75.system-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 110px minmax(0, 1fr);
        gap: 10px;
        width: 100%;
        align-items: stretch;
    }
    .edge-command-row.v75.system-row > * {
        min-width: 0;
    }

    .light-theme .edge-command-center.v75 {
        border-color: rgba(255,102,0,.18);
        background:
            radial-gradient(circle at 0% 0%, rgba(255,102,0,.09), transparent 28%),
            radial-gradient(circle at 100% 0%, rgba(0,122,255,.05), transparent 22%),
            linear-gradient(180deg, #ffffff, #f5f7fb);
        box-shadow: 0 26px 54px rgba(15,23,42,.10), inset 0 1px 0 rgba(255,255,255,.8);
    }
    .light-theme .edge-command-center.v75::before {
        background: linear-gradient(90deg, rgba(255,102,0,.85), rgba(255,178,102,.40), rgba(0,122,255,.18));
    }
    .light-theme .edge-command-panel.v75,
    .light-theme .edge-command-panel.v75.critical {
        background:
            radial-gradient(circle at 100% 0%, rgba(255,102,0,.07), transparent 36%),
            linear-gradient(180deg, #ffffff, #f8fafc);
        border-color: rgba(15,23,42,.10);
        box-shadow: 0 14px 28px rgba(15,23,42,.08), inset 0 1px 0 rgba(255,255,255,.8);
    }
    .light-theme .edge-command-panel.v75:hover {
        border-color: rgba(255,102,0,.22);
        box-shadow: 0 16px 30px rgba(15,23,42,.10), 0 0 0 1px rgba(255,102,0,.05);
    }
    .light-theme .edge-command-panel.v75 h4,
    .light-theme .edge-command-title.v75,
    .light-theme .edge-command-help.v75 b,
    .light-theme .edge-command-warning.v75 strong {
        color: #111827 !important;
    }
    .light-theme .edge-command-panel.v75 p,
    .light-theme .edge-command-help.v75,
    .light-theme .edge-command-subtitle.v75 {
        color: #64748b !important;
    }
    .light-theme .edge-command-help.v75,
    .light-theme .edge-command-last.v75,
    .light-theme .edge-lock-state.v75,
    .light-theme .edge-command-input.v75,
    .light-theme .edge-command-btn.v75 {
        background: linear-gradient(180deg, #ffffff, #f8fafc) !important;
        border-color: rgba(15,23,42,.12) !important;
        color: #111827 !important;
    }
    .light-theme .edge-command-btn.v75.primary { color: #b45309 !important; }
    .light-theme .edge-command-btn.v75.safe { color: #087a34 !important; }
    .light-theme .edge-command-btn.v75.danger { color: #c62828 !important; }
    .light-theme .edge-command-btn.v75.pto { color: #0369a1 !important; }

    @media (min-width: 1700px) {
        .edge-command-grid.v75 {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }
    }
    @media (max-width: 1480px) and (min-width: 761px) {
        .telemetry-grid-2026 { gap: 16px; }
        .edge-command-center.v75 { padding: 21px; }
        .edge-command-grid.v75 { gap: 16px; }
        .edge-command-panel.v75 { min-height: 224px; padding: 16px; }
        .edge-command-help.v75 { min-height: 82px; }
        .edge-command-row.v75.system-row { grid-template-columns: minmax(0, 1fr) 100px minmax(0, 1fr); }
    }
    @media (max-width: 760px) {
        .telemetry-grid-2026 { gap: 14px !important; }
        .edge-command-center.v75 { padding: 16px !important; border-radius: 18px !important; }
        .edge-command-title.v75 { font-size: 18px !important; }
        .edge-command-grid.v75 { grid-template-columns: 1fr !important; gap: 14px !important; }
        .edge-command-panel.v75 {
            min-height: auto !important;
            padding: 15px !important;
            gap: 14px !important;
            border-radius: 16px !important;
        }
        .edge-command-panel-head.v75 { grid-template-columns: 36px 1fr !important; min-height: auto !important; }
        .edge-command-icon.v75 { width: 36px !important; height: 36px !important; border-radius: 12px !important; }
        .edge-command-help.v75 { min-height: auto !important; }
        .edge-command-row.v75.compact .edge-command-btn.v75,
        .edge-command-btn.v75 { flex: 1 1 100%; }
        .edge-command-row.v75.system-row { grid-template-columns: 1fr !important; }
    }
    .telemetry-grid-2026 {
        column-gap: 16px;
        row-gap: 20px;
        align-items: stretch;
    }
    .telemetry-grid-2026 > .hud-card-2026:not([style*="span 4"]):not([style*="span 2"]) {
        min-height: 132px;
    }
    .telemetry-grid-2026 > .hud-card-2026.data-only-card-2026:not([style*="span 4"]):not([style*="span 2"]) {
        min-height: 132px;
    }
    .telemetry-grid-2026 > .hud-card-2026[style*="span 2"] {
        min-height: 108px;
    }
    .telemetry-grid-2026 > .hud-card-2026[style*="span 4"] {
        min-height: 242px;
    }
    .telemetry-grid-2026 > .hud-card-2026,
    .telemetry-grid-2026 > .esp32-feature-band {
        align-self: stretch;
    }
    .telemetry-grid-2026 > .hud-card-2026 .hud-main-data-2026 {
        margin-bottom: 0;
    }
    .telemetry-grid-2026 > .hud-card-2026 .hud-value-2026 {
        line-height: 1.05;
    }
    .telemetry-grid-2026 > .hud-card-2026 .hud-unit-2026 {
        min-height: 14px;
    }
    .telemetry-grid-2026 > .hud-card-2026 .hud-meta-label-2026 {
        min-height: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
    }
    .telemetry-grid-2026 > .hud-card-2026 .gauge-container-2026 {
        margin-top: 12px;
    }
    .telemetry-grid-2026 > .hud-card-2026[style*="span 2"] .hud-main-data-2026 {
        gap: 4px;
    }
    .telemetry-grid-2026 > .hud-card-2026[style*="span 4"] {
        padding-top: 18px;
        padding-bottom: 22px !important;
    }
    .round-charts-row {
        padding: 28px 0 14px 0;
        gap: 24px;
        align-items: stretch;
    }
    .round-chart-item {
        flex: 1 1 180px;
        min-width: 180px;
        justify-content: flex-start;
    }
    .history-chart-panel {
        margin-top: 18px;
    }
    .light-theme .history-chart-panel {
        margin-top: 18px;
    }
    @media (max-width: 1200px) {
        .telemetry-grid-2026 {
            row-gap: 18px;
        }
        .telemetry-grid-2026 > .hud-card-2026:not([style*="span 4"]):not([style*="span 2"]) {
            min-height: 128px;
        }
        .telemetry-grid-2026 > .hud-card-2026[style*="span 4"] {
            min-height: 228px;
        }
        .round-chart-item {
            min-width: 160px;
            flex-basis: 160px;
        }
        .history-chart-panel {
            margin-top: 16px;
        }
    }
    @media (max-width: 760px) {
        .telemetry-grid-2026 {
            row-gap: 14px !important;
        }
        .telemetry-grid-2026 > .hud-card-2026:not([style*="span 4"]):not([style*="span 2"]),
        .telemetry-grid-2026 > .hud-card-2026[style*="span 2"],
        .telemetry-grid-2026 > .hud-card-2026[style*="span 4"] {
            min-height: auto !important;
        }
        .history-chart-panel {
            margin-top: 14px !important;
        }
    }
    .light-theme .esp32-feature-band {
        background:
            linear-gradient(180deg, #ffffff, #f8fafc) !important;
        border-color: rgba(15,23,42,.12) !important;
        box-shadow: 0 16px 36px rgba(15,23,42,.08) !important;
    }
    .light-theme .esp32-feature-title {
        border-bottom-color: rgba(15,23,42,.10) !important;
    }
    .light-theme .esp32-feature-title strong {
        color: #0f172a !important;
        text-shadow: none !important;
    }
    .light-theme .esp32-feature-title span {
        color: #475569 !important;
        text-shadow: none !important;
    }
    .light-theme .esp32-feature-card {
        background: linear-gradient(180deg, #ffffff, #f8fafc) !important;
        border-color: rgba(15,23,42,.10) !important;
        box-shadow: 0 10px 24px rgba(15,23,42,.06), inset 0 1px 0 rgba(255,255,255,.85) !important;
    }
    .light-theme .esp32-feature-card::before {
        background: radial-gradient(circle at 80% 8%, rgba(255,102,0,.10), transparent 30%) !important;
    }
    .light-theme .esp32-feature-label {
        color: #64748b !important;
        text-shadow: none !important;
    }
    .light-theme .esp32-feature-unit {
        color: #475569 !important;
        text-shadow: none !important;
    }
    .light-theme .esp32-feature-bar {
        background: rgba(15,23,42,.08) !important;
    }
    .light-theme .esp32-feature-value[style*="#fff"],
    .light-theme .esp32-feature-value[style*="#777"] {
        color: #111827 !important;
        text-shadow: none !important;
    }
    @keyframes scanLine {
        0%   { top: -1px; opacity: 0; }
        4%   { opacity: 1; }
        96%  { opacity: 1; }
        100% { top: 100%; opacity: 0; }
    }
    @keyframes ledBreath {
        0%, 100% { box-shadow: 0 0 0 2px rgba(0,230,118,0.18), 0 0 7px rgba(0,230,118,0.6); }
        50%       { box-shadow: 0 0 0 5px rgba(0,230,118,0.07), 0 0 22px rgba(0,230,118,0.9), 0 0 44px rgba(0,230,118,0.22); }
    }
    @keyframes ledBreathDanger {
        0%, 100% { box-shadow: 0 0 0 2px rgba(255,23,68,0.22), 0 0 7px rgba(255,23,68,0.6); }
        50%       { box-shadow: 0 0 0 5px rgba(255,23,68,0.08), 0 0 20px rgba(255,23,68,0.9), 0 0 40px rgba(255,23,68,0.22); }
    }
    @keyframes shimmerSweep {
        0%   { transform: translateX(-100%); }
        100% { transform: translateX(400%); }
    }
    @keyframes dataFlicker {
        0%, 88%, 90%, 93%, 100% { opacity: 1; }
        89%  { opacity: 0.72; }
        92%  { opacity: 0.88; }
    }
    @keyframes faultGlow {
        0%, 100% { box-shadow: 0 0 0 rgba(255,23,68,0); }
        50%       { box-shadow: 0 0 22px rgba(255,23,68,0.22), inset 0 0 12px rgba(255,23,68,0.06); }
    }
    @keyframes gaugeArcGlow {
        0%, 100% { filter: drop-shadow(0 0 3px rgba(255,102,0,0.55)); }
        50%       { filter: drop-shadow(0 0 10px rgba(255,102,0,0.95)); }
    }
    @keyframes gaugeRpmGlow {
        0%, 100% { filter: drop-shadow(0 0 3px rgba(0,210,255,0.55)); }
        50%       { filter: drop-shadow(0 0 10px rgba(0,210,255,0.95)); }
    }
    @keyframes gaugeEcoGlow {
        0%, 100% { filter: drop-shadow(0 0 3px rgba(0,255,102,0.55)); }
        50%       { filter: drop-shadow(0 0 10px rgba(0,255,102,0.95)); }
    }
    @keyframes gaugeDieselGlow {
        0%, 100% { filter: drop-shadow(0 0 3px rgba(211,131,18,0.55)); }
        50%       { filter: drop-shadow(0 0 10px rgba(211,131,18,0.95)); }
    }
    @keyframes cardEntrance {
        0%   { opacity: 0; transform: translateY(14px) scale(0.98); }
        100% { opacity: 1; transform: translateY(0) scale(1); }
    }
    .hud-card-2026::before {
        content: '' !important;
        position: absolute !important;
        top: 9px !important; left: 9px !important;
        width: 14px !important; height: 14px !important;
        border-top: 1.5px solid rgba(255,102,0,0.38) !important;
        border-left: 1.5px solid rgba(255,102,0,0.38) !important;
        border-radius: 2px 0 0 0 !important;
        pointer-events: none !important;
        z-index: 2 !important;
        opacity: 0.5 !important;
        transition: opacity 0.28s ease, border-color 0.28s ease !important;
    }
    .hud-card-2026:hover::before {
        border-color: var(--accent) !important;
        opacity: 1 !important;
    }
    .hud-card-2026 {
        animation: cardEntrance 0.5s cubic-bezier(0.16,1,0.3,1) both !important;
    }
    .led-on {
        animation: ledBreath 2.4s ease-in-out infinite !important;
    }
    .led-off {
        animation: ledBreathDanger 2.4s ease-in-out infinite !important;
    }
    .round-val-vel    { animation: gaugeArcGlow   2.6s ease-in-out infinite !important; }
    .round-val-rpm    { animation: gaugeRpmGlow    3.0s ease-in-out infinite 0.5s !important; }
    .round-val-eco    { animation: gaugeEcoGlow    3.2s ease-in-out infinite 1.0s !important; }
    .round-val-diesel { animation: gaugeDieselGlow 2.8s ease-in-out infinite 1.5s !important; }
    .gauge-fill-2026::after {
        content: '' !important;
        position: absolute !important;
        inset: 0 !important;
        width: 24% !important;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.52), transparent) !important;
        animation: shimmerSweep 2.6s ease-in-out infinite !important;
        pointer-events: none !important;
    }
    .hud-value-2026 {
        animation: dataFlicker 11s ease-in-out infinite !important;
    }
    .cyber-sec-card.v74::after {
        content: '' !important;
        position: absolute !important;
        left: 0 !important; right: 0 !important;
        top: -1px !important; height: 1px !important;
        background: linear-gradient(90deg,
            transparent 0%,
            rgba(255,102,0,0.85) 25%,
            rgba(0,210,255,0.55) 75%,
            transparent 100%) !important;
        animation: scanLine 7s linear infinite !important;
        pointer-events: none !important;
        z-index: 5 !important;
    }
    .cyber-sec-card.v74.safe::after {
        background: linear-gradient(90deg,
            transparent 0%,
            rgba(0,230,118,0.85) 25%,
            rgba(0,210,255,0.55) 75%,
            transparent 100%) !important;
        animation-duration: 8.5s !important;
    }
    .cyber-fault-chip.v74:not(.nominal) {
        animation: faultGlow 3.2s ease-in-out infinite !important;
    }
    .cyber-metric-card.v74.danger { border-left: 2px solid rgba(255,23,68,0.7)  !important; }
    .cyber-metric-card.v74.safe   { border-left: 2px solid rgba(0,230,118,0.65) !important; }
    .cyber-metric-card.v74.sync   { border-left: 2px solid rgba(255,102,0,0.65) !important; }
    .cyber-metric-card.v74.diag   { border-left: 2px solid rgba(0,210,255,0.45) !important; }
    .esp32-feature-card {
        transition: transform 0.32s cubic-bezier(0.16,1,0.3,1),
                    border-color 0.32s ease,
                    box-shadow 0.32s ease !important;
    }
    .esp32-feature-card:hover {
        transform: translateY(-6px) !important;
        border-color: rgba(255,102,0,0.28) !important;
        box-shadow: 0 20px 44px rgba(0,0,0,0.38), 0 0 22px rgba(255,102,0,0.09) !important;
    }
    .chart-chip.active {
        text-shadow: 0 0 14px rgba(255,102,0,0.45) !important;
        box-shadow: 0 0 22px rgba(255,102,0,0.24), inset 0 1px 0 rgba(255,255,255,0.07) !important;
    }
    .edge-command-panel.v75 {
        transition: transform 0.3s cubic-bezier(0.16,1,0.3,1),
                    border-color 0.3s ease,
                    box-shadow 0.3s ease !important;
    }
    .edge-command-panel.v75:hover .edge-command-icon.v75 {
        box-shadow: 0 0 26px rgba(255,102,0,0.28), inset 0 1px 0 rgba(255,255,255,0.07) !important;
    }
    .clickable-card:hover {
        transform: translateY(-4px) scale(1.015) !important;
    }
    .round-chart-item:hover .round-gauge {
        box-shadow: inset 0 0 15px rgba(0,0,0,0.8),
                    0 0 0 1px rgba(255,255,255,0.04),
                    0 0 30px rgba(255,102,0,0.1) !important;
    }
    .history-chart-panel {
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.04),
                    0 20px 50px rgba(0,0,0,0.35),
                    0 0 0 1px rgba(255,102,0,0.06) !important;
    }
    .light-theme .led-on                           { animation: none !important; box-shadow: 0 0 0 2px rgba(5,150,105,0.18), 0 0 6px rgba(5,150,105,0.35) !important; }
    .light-theme .led-off                          { animation: none !important; box-shadow: 0 0 0 2px rgba(220,38,38,0.18), 0 0 6px rgba(220,38,38,0.35) !important; }
    .light-theme .cyber-sec-card.v74::after        { display: none !important; }
    .light-theme .gauge-fill-2026::after           { display: none !important; }
    .light-theme .hud-value-2026                   { animation: none !important; }
    .light-theme .round-val-vel,
    .light-theme .round-val-rpm,
    .light-theme .round-val-eco,
    .light-theme .round-val-diesel                 { animation: none !important; filter: none !important; }
    .light-theme .cyber-fault-chip.v74:not(.nominal) { animation: none !important; }
    .light-theme .hud-card-2026                    { animation: cardEntrance 0.5s cubic-bezier(0.16,1,0.3,1) both !important; }
    @keyframes mcScan    { 0%{top:-2px;opacity:0} 5%{opacity:.9} 95%{opacity:.9} 100%{top:100%;opacity:0} }
    @keyframes mcPulse   { 0%,100%{opacity:1} 50%{opacity:.55} }
    @keyframes mcAlarm   { 0%,100%{border-color:rgba(255,51,51,.35)} 50%{border-color:rgba(255,51,51,.9);box-shadow:0 0 24px rgba(255,51,51,.4)} }
    @keyframes mcOrb     { 0%,100%{transform:scale(1);opacity:.4} 50%{transform:scale(1.18);opacity:.65} }
    @keyframes mcGlitch  { 0%,94%,100%{opacity:1;transform:none} 95%{opacity:.6;transform:translateX(2px)} 97%{opacity:.9;transform:translateX(-2px)} }
    @keyframes mcBar     { from{width:0} to{width:var(--w,0%)} }
    @keyframes mcFadeUp  { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:none} }
    @keyframes mcRing    { from{transform:translate(-50%,-50%) scale(.2);opacity:.7} to{transform:translate(-50%,-50%) scale(2.4);opacity:0} }
    @keyframes mcNeedle  { from{transform:rotate(var(--from,0deg))} to{transform:rotate(var(--to,0deg))} }
    @keyframes mcShine   { from{transform:translateX(-120%)} to{transform:translateX(400%)} }
    @keyframes mcBlink   { 0%,100%{box-shadow:0 0 4px 1px rgba(0,230,118,.6)} 50%{box-shadow:0 0 10px 3px rgba(0,230,118,.9)} }
    @keyframes mcBlinkR  { 0%,100%{box-shadow:0 0 4px 1px rgba(255,51,51,.6)} 50%{box-shadow:0 0 10px 3px rgba(255,51,51,.9)} }
    .mc-root {
        display: flex; flex-direction: column; gap: 14px;
        width: 100%; font-family: 'Inter', sans-serif;
        animation: mcFadeUp .5s cubic-bezier(.16,1,.3,1) both;
    }
    .mc-banner {
        position: relative; overflow: hidden;
        display: grid; grid-template-columns: minmax(220px, auto) 1fr auto auto; align-items: center; gap: 24px;
        padding: 18px 24px; border-radius: 18px;
        background: linear-gradient(135deg,rgba(14,14,26,.98) 0%,rgba(6,6,16,.99) 100%);
        border: 1px solid rgba(255,255,255,.07);
        box-shadow: 0 24px 60px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.05);
        /* height AUTO: com 5+ chips a altura fixa de 168px cortava a primeira e a
           última linha de badges (ONLINE/LTE meio-clipados em cima, SYNC embaixo). */
        height: auto;
        min-height: 168px;
    }
    .mc-banner::before {
        content:''; position:absolute; top:0; left:0; right:0; height:2px;
        background: linear-gradient(90deg, var(--accent) 0%, rgba(0,210,255,.5) 50%, transparent 100%);
    }
    .mc-banner::after {
        content:''; position:absolute; top:-2px; left:-100%; width:60%; height:100%;
        background: linear-gradient(90deg,transparent,rgba(255,102,0,.04),transparent);
        animation: mcScan 8s linear infinite;
    }
    .mc-banner.safe::before  { background: linear-gradient(90deg,var(--success) 0%,rgba(0,210,255,.5) 60%,transparent 100%); }
    .mc-banner.danger::before { background: linear-gradient(90deg,var(--danger) 0%,rgba(255,102,0,.5) 60%,transparent 100%); animation: mcPulse 1.8s ease-in-out infinite; }
    .mc-banner.danger        { animation: mcAlarm 2.2s ease-in-out infinite; }
    .mc-brand-eyebrow  { font-size:9px; font-weight:800; letter-spacing:3px; color:rgba(255,255,255,.38); text-transform:uppercase; }
    .mc-brand-name     { font-size:20px; font-weight:900; letter-spacing:2px; color:#fff; line-height:1; }
    .mc-brand-sub      { font-size:9px; color:rgba(255,255,255,.3); letter-spacing:1px; margin-top:2px; }
    .mc-badges {
        display:flex;
        gap:7px 8px;
        flex-wrap:wrap;
        align-content:center;
        justify-content:flex-start;
        /* Sem max-height/overflow: o banner agora tem height:auto — o clip aqui
           escondia chips inteiros e cortava linhas ao meio (bug visual). O ellipsis
           por chip (.mc-badge) continua segurando descrições longas de falha. */
    }
    .mc-badge {
        font-size:9px; font-weight:800; letter-spacing:1.5px; padding:5px 10px; border-radius:6px;
        border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.04); color:rgba(255,255,255,.5);
        /* Descricao longa de falha trunca com ellipsis ao inves de empurrar o grid */
        white-space:nowrap;
        max-width:320px;
        overflow:hidden;
        text-overflow:ellipsis;
        height:24px;
        line-height:14px;
        display:inline-flex;
        align-items:center;
    }
    .mc-badge.on   { background:rgba(0,230,118,.12); border-color:rgba(0,230,118,.35); color:var(--success); }
    .mc-badge.off  { background:rgba(255,51,51,.10); border-color:rgba(255,51,51,.3);  color:var(--danger); }
    .mc-badge.gps  { background:rgba(0,210,255,.10); border-color:rgba(0,210,255,.3);  color:#00d2ff; }
    .mc-badge.lte  { background:rgba(255,102,0,.08); border-color:rgba(255,102,0,.25); color:var(--accent); }
    /* SEM SINAL (âmbar): caminhão parou de transmitir mas < 24h — os últimos
       dados ficam na tela ("Sinal de 4G/Wifi fora de alcance"). Não é erro/offline. */
    .mc-badge.warn { background:rgba(255,176,60,.12); border-color:rgba(255,176,60,.35); color:#ffb03c; }
    .mc-banner-kpis { display:flex; gap:20px; }
    .mc-banner-kpi  { text-align:center; }
    .mc-banner-kpi-val  { font-size:18px; font-weight:900; color:#fff; font-family:'JetBrains Mono',monospace; animation:mcGlitch 9s infinite; }
    .mc-banner-kpi-lbl  { font-size:8px; font-weight:700; letter-spacing:1.5px; color:rgba(255,255,255,.35); text-transform:uppercase; margin-top:1px; }
    .mc-score-ring { position:relative; width:72px; height:72px; flex-shrink:0; }
    .mc-score-ring svg { width:72px; height:72px; transform:rotate(-90deg); }
    .mc-score-ring .mc-score-bg   { fill:none; stroke:rgba(255,255,255,.06); stroke-width:5; }
    .mc-score-ring .mc-score-arc  { fill:none; stroke-width:5; stroke-linecap:round; transition:stroke-dashoffset .8s cubic-bezier(.4,0,.2,1); }
    .mc-score-center { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
    .mc-score-val { font-size:18px; font-weight:900; font-family:'JetBrains Mono',monospace; color:#fff; line-height:1; }
    .mc-score-lbl { font-size:7px; font-weight:700; letter-spacing:1px; color:rgba(255,255,255,.35); text-transform:uppercase; }
    .mc-fault-ribbon {
        display:flex; gap:10px; flex-wrap:wrap; padding:12px 18px; border-radius:12px;
        background:rgba(255,51,51,.06); border:1px solid rgba(255,51,51,.2);
    }
    .mc-fault-ribbon.nominal { background:rgba(0,230,118,.04); border-color:rgba(0,230,118,.15); }
    .mc-fault-chip {
        display:flex; align-items:center; gap:10px; padding:8px 14px; border-radius:9px;
        background:rgba(255,51,51,.1); border:1px solid rgba(255,51,51,.25); animation:mcAlarm 2.5s ease-in-out infinite;
    }
    .mc-fault-chip.nominal { background:rgba(0,230,118,.07); border-color:rgba(0,230,118,.2); animation:none; }
    .mc-fault-code { font-size:10px; font-weight:900; font-family:'JetBrains Mono',monospace; color:var(--danger); letter-spacing:1px; }
    .mc-fault-chip.nominal .mc-fault-code { color:var(--success); }
    .mc-fault-desc { font-size:10px; font-weight:600; color:rgba(255,255,255,.6); }
    .mc-vitals {
        display:grid; grid-template-columns:repeat(4,1fr); gap:12px;
    }
    .mc-vital {
        position:relative; overflow:hidden; border-radius:16px; padding:20px 20px 16px;
        background:linear-gradient(160deg,rgba(20,20,36,.97),rgba(10,10,22,.99));
        border:1px solid rgba(255,255,255,.07);
        box-shadow:0 12px 40px rgba(0,0,0,.35);
        animation: mcFadeUp .4s cubic-bezier(.16,1,.3,1) both;
    }
    .mc-vital::before {
        content:''; position:absolute; top:0; left:0; right:0; height:1px;
        background:linear-gradient(90deg,transparent,var(--mc-clr,var(--accent)),transparent);
    }
    .mc-vital::after {
        content:''; position:absolute; top:-50%; left:-50%; width:200%; height:200%;
        background:radial-gradient(ellipse at 50% 0%, var(--mc-clr,var(--accent)) 0%,transparent 60%);
        opacity:.04; pointer-events:none;
    }
    .mc-vital-label  { font-size:9px; font-weight:800; letter-spacing:2px; color:rgba(255,255,255,.35); text-transform:uppercase; margin-bottom:6px; }
    .mc-vital-value  { font-size:52px; font-weight:900; font-family:'JetBrains Mono',monospace; line-height:.95; letter-spacing:-2px; color:#fff; }
    .mc-vital-unit   { font-size:11px; font-weight:700; letter-spacing:2px; color:var(--mc-clr,var(--accent)); margin-top:4px; }
    .mc-vital-meta   { font-size:9px; color:rgba(255,255,255,.3); margin-top:8px; }
    .mc-vital-bar    { height:3px; border-radius:3px; background:rgba(255,255,255,.06); margin-top:12px; overflow:hidden; }
    .mc-vital-fill   { height:100%; border-radius:3px; background:var(--mc-clr,var(--accent)); box-shadow:0 0 8px var(--mc-clr,var(--accent)); transition:width .6s cubic-bezier(.4,0,.2,1); }
    .mc-vital-shimmer::before { content:''; position:absolute; top:0; left:0; width:40%; height:100%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.04),transparent); animation:mcShine 3.5s ease-in-out infinite; }
    .mc-matrix { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
    .mc-col {
        border-radius:14px; padding:16px 16px 12px;
        background:rgba(14,14,26,.96); border:1px solid rgba(255,255,255,.06);
        box-shadow:0 8px 24px rgba(0,0,0,.3);
    }
    .mc-col-title {
        font-size:8px; font-weight:900; letter-spacing:2.5px; text-transform:uppercase;
        color:rgba(255,255,255,.3); padding-bottom:10px; border-bottom:1px solid rgba(255,255,255,.05); margin-bottom:10px;
    }
    .mc-row { display:flex; align-items:center; justify-content:space-between; padding:6px 0; border-bottom:1px solid rgba(255,255,255,.04); }
    .mc-row:last-child { border-bottom:none; }
    .mc-row-lbl { font-size:9px; font-weight:600; color:rgba(255,255,255,.38); letter-spacing:.5px; }
    /* Legenda do período (ex.: "últimos 7 dias") sob o rótulo dos KPIs de janela. */
    .mc-row-periodo { display:block; font-size:8px; font-weight:600; font-style:italic; letter-spacing:.3px; color:rgba(255,255,255,.28); text-transform:none; margin-top:2px; }
    .light-theme .mc-row-periodo { color:rgba(0,0,0,.4); }
    .mc-row-val { font-size:13px; font-weight:800; font-family:'JetBrains Mono',monospace; color:#fff; }
    .mc-row-val.accent { color:var(--accent); }
    .mc-row-val.success { color:var(--success); }
    .mc-row-val.danger  { color:var(--danger); }
    .mc-row-val.cyan    { color:#00d2ff; }
    .mc-row-bar { margin-top:3px; height:2px; border-radius:2px; background:rgba(255,255,255,.05); overflow:hidden; }
    .mc-row-fill { height:100%; border-radius:2px; background:var(--mc-clr,rgba(255,255,255,.25)); transition:width .6s ease; }
    .mc-arcs-panel {
        border-radius:16px; padding:20px 24px;
        background:linear-gradient(135deg,rgba(14,14,26,.97),rgba(6,6,16,.99));
        border:1px solid rgba(255,255,255,.07);
        box-shadow:0 12px 40px rgba(0,0,0,.35);
    }
    .mc-arcs-title { font-size:9px; font-weight:900; letter-spacing:2.5px; color:rgba(255,255,255,.3); text-transform:uppercase; margin-bottom:18px; }
    .mc-arcs-row   { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
    .mc-arcs-row.mc-arcs-row--3 { grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; max-width:880px; margin:0 auto; }
    /* 5 anéis: velocidade, rotação, consumo, CO₂/dia e motor ligado/dia. */
    .mc-arcs-row.mc-arcs-row--5 { grid-template-columns:repeat(5,minmax(0,1fr)); gap:22px; max-width:1400px; margin:0 auto; }
    @media (max-width:1400px){ .mc-arcs-row.mc-arcs-row--5 { grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; max-width:900px; } }
    @media (max-width:820px){  .mc-arcs-row.mc-arcs-row--5 { grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; } }
    .mc-arc-item   { display:flex; flex-direction:column; align-items:center; gap:10px; position:relative; padding:10px 6px 14px; border-radius:14px; }
    .mc-arc-item::after {
        content:''; position:absolute; left:50%; bottom:4px; transform:translateX(-50%);
        width:42px; height:2px; border-radius:2px; opacity:.55;
        transition: width 360ms cubic-bezier(.16,1,.3,1), opacity 360ms ease;
    }
    .mc-arc-item:hover::after { width:72px; opacity:.95; }
    .mc-arc-item--vel::after { background:linear-gradient(90deg,#ff8800,#ff6600); box-shadow:0 0 12px rgba(255,120,30,.5); }
    .mc-arc-item--rpm::after { background:linear-gradient(90deg,#00b4db,#0083b0); box-shadow:0 0 12px rgba(0,180,219,.5); }
    .mc-arc-item--eco::after { background:linear-gradient(90deg,#11998e,#38ef7d); box-shadow:0 0 12px rgba(56,239,125,.45); }
    /* CO₂/dia e Motor ligado/dia — MESMO padrão dos 3 acima (sublinhado com a cor
       da própria série). Sem estas regras os 2 novos ficavam sem o traço inferior,
       destoando visualmente da linha. */
    .mc-arc-item--co2::after { background:linear-gradient(90deg,#b8860b,#e0a526); box-shadow:0 0 12px rgba(224,165,38,.42); }
    .mc-arc-item--ton::after { background:linear-gradient(90deg,#4b5c9b,#6d81c4); box-shadow:0 0 12px rgba(109,129,196,.42); }
    .mc-arc-gauge  { position:relative; width:118px; height:118px; }
    .mc-arc-gauge svg { width:100%; height:100%; transform:rotate(-90deg); }
    .mc-arc-bg     { fill:none; stroke:rgba(255,255,255,.05); stroke-width:6; }
    /* FIX 2026-06: era `drop-shadow(0 0 4px currentColor)` mas como o pai
       herdava color:#fff, todo arc ganhava um halo BRANCO em volta do gradiente
       colorido — operador via "brilho branco" desconectado da cor do donut.
       Agora sem filter — o gradient stroke já é suficientemente destacado.
       Se quiser glow específico, aplicar por mc-arc-item--vel/rpm/eco abaixo. */
    .mc-arc-fill   { fill:none; stroke-width:6; stroke-linecap:round; transition:stroke-dashoffset .8s cubic-bezier(.4,0,.2,1); }
    /* Glow sutil POR cor — opcional. Usa drop-shadow com tonalidade da própria
       série pra reforçar identidade visual sem virar halo branco. */
    .mc-arc-item--vel .mc-arc-fill { filter: drop-shadow(0 0 3px rgba(255, 120, 30, .45)); }
    .mc-arc-item--rpm .mc-arc-fill { filter: drop-shadow(0 0 3px rgba(0, 180, 219, .45)); }
    .mc-arc-item--eco .mc-arc-fill { filter: drop-shadow(0 0 3px rgba(56, 239, 125, .40)); }
    .mc-arc-item--co2 .mc-arc-fill { filter: drop-shadow(0 0 3px rgba(224, 165, 38, .40)); }
    .mc-arc-item--ton .mc-arc-fill { filter: drop-shadow(0 0 3px rgba(109, 129, 196, .40)); }
    .mc-arc-center { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
    .mc-arc-val    { font-size:20px; font-weight:900; font-family:'JetBrains Mono',monospace; color:#fff; line-height:1; }
    .mc-arc-unit   { font-size:8px; font-weight:700; color:rgba(255,255,255,.35); letter-spacing:1px; margin-top:1px; }
    .mc-arc-label  { font-size:9px; font-weight:700; letter-spacing:1px; color:rgba(255,255,255,.35); text-align:center; text-transform:uppercase; }
    .mc-signals-band {
        border-radius:16px; padding:20px 24px;
        background:rgba(10,10,20,.97); border:1px solid rgba(255,255,255,.06);
    }
    .mc-signals-title { font-size:9px; font-weight:900; letter-spacing:2.5px; color:rgba(255,255,255,.3); text-transform:uppercase; margin-bottom:16px; }
    .mc-signals-grid  { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
    .mc-signal {
        border-radius:12px; padding:14px 14px 12px;
        background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06);
        transition:border-color .25s, background .25s;
    }
    .mc-signal:hover { background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.1); }
    .mc-signal-label { font-size:8px; font-weight:700; letter-spacing:1px; color:rgba(255,255,255,.35); text-transform:uppercase; margin-bottom:6px; }
    .mc-signal-value { font-size:22px; font-weight:900; font-family:'JetBrains Mono',monospace; color:#fff; line-height:1; }
    .mc-signal-unit  { font-size:8px; color:rgba(255,255,255,.3); margin-top:2px; }
    .mc-signal-bar   { height:3px; border-radius:3px; background:rgba(255,255,255,.06); margin-top:10px; overflow:hidden; }
    .mc-signal-fill  { height:100%; border-radius:3px; transition:width .6s ease; }
    .mc-signal-fill.blue  { background:#00d2ff; box-shadow:0 0 6px #00d2ff; }
    .mc-signal-fill.red   { background:var(--danger); box-shadow:0 0 6px var(--danger); }
    .mc-signal-fill.green { background:var(--success); box-shadow:0 0 6px var(--success); }
    .mc-signal-fill.orange{ background:var(--accent); box-shadow:0 0 6px var(--accent); }
    .mc-led { width:8px; height:8px; border-radius:50%; display:inline-block; margin-right:5px; }
    .mc-led.on  { background:var(--success); animation:mcBlink 2s infinite; }
    .mc-led.off { background:rgba(255,255,255,.2); }
    .mc-led.alarm { background:var(--danger); animation:mcBlinkR 1.2s infinite; }
    @media (max-width:900px) {
        .mc-vitals { grid-template-columns:repeat(2,1fr); }
        .mc-matrix { grid-template-columns:1fr 1fr; }
        .mc-arcs-row { grid-template-columns:repeat(2,1fr); }
        .mc-signals-grid { grid-template-columns:repeat(2,1fr); }
        .mc-banner { grid-template-columns:1fr 1fr; }
        .mc-vital-value { font-size:38px; }
    }
    @media (max-width:600px) {
        .mc-vitals { grid-template-columns:1fr 1fr; }
        .mc-matrix { grid-template-columns:1fr; }
        .mc-arcs-row { grid-template-columns:repeat(2,1fr); }
        .mc-signals-grid { grid-template-columns:1fr 1fr; }
        .mc-banner { grid-template-columns:1fr; }
    }
    .light-theme .mc-banner,
    .light-theme .mc-vital,
    .light-theme .mc-col,
    .light-theme .mc-arcs-panel,
    .light-theme .mc-signals-band {
        background:rgba(248,248,252,.97) !important;
        border-color:rgba(0,0,0,.08) !important;
        box-shadow:0 4px 20px rgba(0,0,0,.08) !important;
    }
    .light-theme .mc-brand-name,
    .light-theme .mc-vital-value,
    .light-theme .mc-row-val,
    .light-theme .mc-arc-val,
    .light-theme .mc-signal-value { color:#111 !important; }
    .light-theme .mc-banner::after,
    .light-theme .mc-vital::after { display:none !important; }
    .light-theme .mc-vital-shimmer::before { display:none !important; }
    .light-theme .mc-fault-chip { animation:none !important; }
    .light-theme .mc-banner.danger { animation:none !important; }
    @keyframes deckPulse  { 0%,100%{opacity:.85}50%{opacity:1} }
    @keyframes deckSweep  { 0%{transform:translateX(-110%)}100%{transform:translateX(420%)} }
    @keyframes deckOrb    { 0%,100%{transform:translate(0,0)}50%{transform:translate(8px,-6px)} }
    @keyframes deckBeacon { 0%,100%{opacity:.4;box-shadow:0 0 8px currentColor}50%{opacity:1;box-shadow:0 0 22px currentColor,0 0 44px currentColor} }
    @keyframes deckGrid   { 0%{background-position:0 0}100%{background-position:50px 50px} }
    @keyframes deckPower  { 0%,100%{box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),0 0 0 0 rgba(255,102,0,0)}50%{box-shadow:inset 0 0 0 1px rgba(255,102,0,.5),0 0 24px rgba(255,102,0,.4)} }
    @keyframes deckBtnGlow{ 0%,100%{filter:none}50%{filter:drop-shadow(0 0 8px currentColor)} }
    .history-chart-panel {
        position: relative !important; overflow: hidden !important;
        background: linear-gradient(135deg,rgba(14,14,26,.98),rgba(6,6,16,.99)) !important;
        border: 1px solid rgba(255,255,255,.07) !important;
        border-radius: 20px !important;
        box-shadow: 0 24px 60px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.05) !important;
        margin-top: 16px !important;
        padding: 22px !important;
    }
    .history-chart-panel::before {
        content:''; position:absolute; top:0; left:0; right:0; height:2px;
        background: linear-gradient(90deg,transparent,#00d2ff 30%,var(--accent) 70%,transparent);
    }
    .history-chart-panel::after {
        content:''; position:absolute; top:-50%; right:-20%; width:520px; height:520px; border-radius:50%;
        background: radial-gradient(circle,rgba(0,210,255,.06) 0%,transparent 65%);
        pointer-events:none; animation: deckOrb 9s ease-in-out infinite;
    }
    .chart-toolbar {
        position: relative; z-index: 2;
        border-bottom: 1px solid rgba(255,255,255,.06) !important;
    }
    .chart-title-main {
        font-size: 20px !important; font-weight: 900 !important;
        background: linear-gradient(135deg,#fff 0%,#00d2ff 100%);
        -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
        letter-spacing: -.5px !important;
    }
    .chart-title-sub {
        font-size: 9px !important; letter-spacing: 2px !important;
        color: rgba(255,255,255,.32) !important; text-transform: uppercase;
    }
    .chart-current-value {
        font-size: 24px !important; font-weight: 900 !important;
        font-family: 'JetBrains Mono', monospace !important;
        color: var(--accent) !important;
        text-shadow: 0 0 18px rgba(255,102,0,.3);
        text-align: right;
    }
    .chart-current-sub {
        font-size: 9px !important; letter-spacing: 1.5px !important;
        color: rgba(255,255,255,.4) !important; text-align: right;
    }
    .chart-control-box {
        position: relative; z-index: 2;
        background: rgba(255,255,255,.025) !important;
        border: 1px solid rgba(255,255,255,.05) !important;
        border-radius: 12px !important;
        padding: 12px 14px !important;
        margin-bottom: 12px !important;
    }
    .chart-control-label {
        font-size: 8px !important; font-weight: 800 !important;
        letter-spacing: 2.5px !important; color: rgba(255,255,255,.42) !important;
        text-transform: uppercase; margin-bottom: 8px !important;
    }
    .chart-chip {
        position: relative; overflow: hidden;
        background: rgba(255,255,255,.04) !important;
        border: 1px solid rgba(255,255,255,.08) !important;
        border-radius: 10px !important;
        padding: 7px 14px !important;
        font-size: 10px !important; font-weight: 800 !important;
        letter-spacing: 1.2px !important; color: rgba(255,255,255,.55) !important;
        text-transform: uppercase;
        cursor: pointer;
        transition: all .25s cubic-bezier(.16,1,.3,1) !important;
    }
    .chart-chip:hover {
        background: rgba(255,102,0,.08) !important;
        border-color: rgba(255,102,0,.3) !important;
        color: #fff !important;
        transform: translateY(-1px);
    }
    .chart-chip.active {
        background: linear-gradient(135deg,rgba(255,102,0,.22),rgba(0,210,255,.08)) !important;
        border-color: rgba(255,102,0,.5) !important;
        color: #fff !important;
        box-shadow: 0 4px 14px rgba(255,102,0,.25), inset 0 1px 0 rgba(255,255,255,.1) !important;
    }
    .chart-chip.active::before {
        content:''; position:absolute; top:0; left:0; right:0; height:1px;
        background: linear-gradient(90deg,transparent,var(--accent),transparent);
    }
    .chart-stage {
        position: relative !important; z-index: 2;
        background: linear-gradient(180deg,rgba(0,0,0,.4),rgba(0,0,0,.25)) !important;
        border: 1px solid rgba(255,255,255,.05) !important;
        border-radius: 16px !important;
        background-image:
            linear-gradient(180deg,rgba(0,0,0,.4),rgba(0,0,0,.25)),
            linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
            linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px) !important;
        background-size: 100%,50px 50px,50px 50px !important;
        box-shadow: inset 0 2px 12px rgba(0,0,0,.5) !important;
        padding: 18px !important;
    }
    .chart-empty {
        font-size: 11px !important; letter-spacing: 2px !important;
        color: rgba(255,255,255,.35) !important;
    }
    .edge-command-center.v75 {
        position: relative !important; overflow: hidden !important;
        background: linear-gradient(135deg,rgba(14,14,26,.98) 0%,rgba(6,6,16,.99) 100%) !important;
        border: 1px solid rgba(255,255,255,.07) !important;
        border-radius: 20px !important;
        box-shadow: 0 24px 60px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.05) !important;
        margin-top: 16px !important;
        padding: 22px !important;
    }
    .edge-command-center.v75::before {
        content:''; position:absolute; top:0; left:0; right:0; height:2px;
        background: linear-gradient(90deg,transparent,var(--accent) 30%,#ff3344 70%,transparent);
    }
    .edge-command-center.v75::after {
        content:''; position:absolute; top:-50%; left:-20%; width:520px; height:520px; border-radius:50%;
        background: radial-gradient(circle,rgba(255,102,0,.06) 0%,transparent 65%);
        pointer-events:none; animation: deckOrb 8s ease-in-out infinite reverse;
    }
    .edge-command-titlebox.v75 { position: relative; z-index: 2; }
    .edge-command-kicker.v75 {
        font-family: 'JetBrains Mono', monospace !important;
        font-size: 10px !important; font-weight: 800 !important;
        letter-spacing: 0.28em !important; color: rgba(255,255,255,0.80) !important;
        text-transform: uppercase !important;
        position: relative !important;
        padding-left: 16px !important;
    }
    .edge-command-kicker.v75::before {
        content: '';
        position: absolute;
        left: 0; top: 2px;
        width: 3px; height: 12px;
        background: var(--grad-ember, linear-gradient(135deg, #ff8a32, #ff681f));
        border-radius: 2px;
    }
    .light-theme .edge-command-kicker.v75 { color: rgba(0,0,0,0.80) !important; }
    .edge-command-title.v75 {
        font-family: 'JetBrains Mono', monospace !important;
        font-size: 22px !important; font-weight: 900 !important;
        color: rgba(255,255,255,0.95) !important;
        background: none !important;
        -webkit-background-clip: unset !important; background-clip: unset !important;
        -webkit-text-fill-color: unset !important;
        letter-spacing: 0.06em !important;
    }
    .edge-command-subtitle.v75 {
        font-size: 10px !important; font-family:'JetBrains Mono',monospace !important;
        color: rgba(255,255,255,.4) !important; letter-spacing: 1px !important;
    }
    .edge-lock-state.v75 {
        position: relative; z-index: 2;
        font-size: 9px !important; font-weight: 900 !important;
        letter-spacing: 1.5px !important; padding: 8px 14px !important;
        border-radius: 10px !important;
        text-transform: uppercase;
    }
    .edge-lock-state.v75.free {
        background: rgba(0,230,118,.1) !important;
        border: 1px solid rgba(0,230,118,.3) !important;
        color: var(--success) !important;
    }
    .edge-lock-state.v75.blocked {
        background: rgba(255,51,51,.1) !important;
        border: 1px solid rgba(255,51,51,.4) !important;
        color: var(--danger) !important;
        animation: deckBeacon 1.6s infinite;
    }
    .edge-lock-state.v75 .edge-lock-dot {
        display: inline-block !important; width: 7px !important; height: 7px !important;
        border-radius: 50%; margin-right: 6px;
        background: currentColor; animation: deckBeacon 2s infinite;
    }
    .edge-command-last.v75 {
        background: rgba(255,255,255,.03);
        border: 1px solid rgba(255,255,255,.05);
        border-radius: 10px;
        padding: 8px 14px;
    }
    .edge-command-last.v75 span { font-size: 8px !important; letter-spacing: 1.5px !important; color: rgba(255,255,255,.4) !important; }
    .edge-command-last.v75 strong { font-size: 11px !important; font-family:'JetBrains Mono',monospace !important; color: #fff !important; }
    .edge-command-last.v75 small { font-size: 9px !important; color: rgba(255,255,255,.35) !important; font-family:'JetBrains Mono',monospace !important; }
    .edge-command-warning.v75 {
        position: relative; z-index: 2;
        background: linear-gradient(135deg,rgba(255,209,102,.08),rgba(255,102,0,.03)) !important;
        border: 1px solid rgba(255,209,102,.22) !important;
        border-radius: 12px !important;
        padding: 12px 16px !important;
        margin: 14px 0 !important;
    }
    .edge-command-warning.v75 span { font-size: 16px; color: #ffd166 !important; animation: deckBeacon 2.5s infinite; }
    .edge-command-warning.v75 strong { font-size: 11px !important; color: rgba(255,255,255,.78) !important; font-weight: 600 !important; line-height: 1.5; }
    .edge-command-grid.v75 {
        position: relative; z-index: 2;
        gap: 14px !important;
    }
    .edge-command-panel.v75 {
        background: linear-gradient(160deg,rgba(255,255,255,.04),rgba(255,255,255,.01)) !important;
        border: 1px solid rgba(255,255,255,.07) !important;
        border-radius: 16px !important;
        padding: 18px !important;
        transition: border-color .25s, box-shadow .25s !important;
    }
    .edge-command-panel.v75:hover {
        border-color: rgba(255,102,0,.3) !important;
        box-shadow: 0 8px 32px rgba(255,102,0,.08) !important;
    }
    .edge-command-icon.v75 {
        width: 44px !important; height: 44px !important;
        background: linear-gradient(135deg,rgba(255,102,0,.12),rgba(0,210,255,.05)) !important;
        border: 1px solid rgba(255,102,0,.18) !important;
        border-radius: 12px !important;
        display: flex !important; align-items: center; justify-content: center;
        font-size: 22px !important;
    }
    .edge-command-panel-head.v75 h4 {
        font-size: 13px !important; font-weight: 900 !important;
        color: #fff !important; letter-spacing: .3px !important;
        margin: 0 !important;
    }
    .edge-command-panel-head.v75 p {
        font-size: 10px !important; color: rgba(255,255,255,.45) !important;
        margin: 2px 0 0 !important; line-height: 1.4 !important;
    }
    .edge-command-help.v75 {
        font-size: 10px !important;
        color: rgba(255,255,255,.55) !important;
        background: rgba(0,210,255,.04) !important;
        border-left: 2px solid rgba(0,210,255,.4) !important;
        border-radius: 0 8px 8px 0 !important;
        padding: 8px 12px !important;
        margin: 12px 0 !important; line-height: 1.5 !important;
    }
    .edge-command-help.v75 b { color: var(--accent) !important; font-weight: 800; }
    .edge-command-row.v75 { gap: 8px !important; flex-wrap: wrap; }
    .edge-command-btn.v75 {
        position: relative; overflow: hidden;
        flex: 1; min-width: 110px;
        padding: 12px 14px !important;
        background: linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02)) !important;
        border: 1px solid rgba(255,255,255,.1) !important;
        border-radius: 12px !important;
        font-size: 10px !important; font-weight: 900 !important;
        letter-spacing: 1px !important; color: #e8e8e8 !important;
        text-transform: uppercase;
        cursor: pointer;
        transition: all .25s cubic-bezier(.16,1,.3,1) !important;
    }
    .edge-command-btn.v75::before {
        content:''; position:absolute; top:0; left:-110%;
        width:60%; height:100%;
        background: linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent);
        transition: left .6s ease;
    }
    .edge-command-btn.v75:hover::before { left: 110%; }
    .edge-command-btn.v75:hover {
        transform: translateY(-2px) !important;
        border-color: rgba(255,102,0,.4) !important;
        box-shadow: 0 10px 28px rgba(255,102,0,.18) !important;
        background: linear-gradient(180deg,rgba(255,102,0,.1),rgba(255,102,0,.02)) !important;
        color: var(--accent) !important;
    }
    .edge-command-btn.v75.warning {
        color: #ffd166 !important;
        border-color: rgba(255,209,102,.28) !important;
        background: linear-gradient(180deg,rgba(255,209,102,.06),rgba(255,209,102,.01)) !important;
    }
    .edge-command-btn.v75.warning:hover {
        background: linear-gradient(180deg,rgba(255,209,102,.18),rgba(255,209,102,.04)) !important;
        border-color: #ffd166 !important;
        box-shadow: 0 10px 28px rgba(255,209,102,.2) !important;
    }
    .edge-command-btn.v75.danger {
        color: var(--danger) !important;
        border-color: rgba(255,51,51,.32) !important;
        background: linear-gradient(180deg,rgba(255,51,51,.08),rgba(255,51,51,.01)) !important;
        animation: deckBtnGlow 3s ease-in-out infinite;
    }
    .edge-command-btn.v75.danger:hover {
        background: linear-gradient(180deg,rgba(255,51,51,.22),rgba(255,51,51,.05)) !important;
        border-color: var(--danger) !important;
        box-shadow: 0 10px 28px rgba(255,51,51,.3) !important;
        color: #fff !important;
    }
    .chart-range-row, .chart-selector-row { gap: 6px !important; flex-wrap: wrap !important; }
    .modal-overlay-2026 {
        background: rgba(0,0,0,.78) !important;
        backdrop-filter: blur(14px) saturate(120%) !important;
        animation: mcFadeUp .25s ease-out !important;
    }
    .modal-content-2026 {
        background: linear-gradient(160deg,rgba(20,20,38,.99),rgba(8,8,20,.99)) !important;
        border: 1px solid rgba(255,255,255,.08) !important;
        border-radius: 20px !important;
        box-shadow: 0 32px 80px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.05), 0 0 0 1px rgba(255,102,0,.06) !important;
        position: relative; overflow: hidden;
    }
    .modal-content-2026::before {
        content:''; position:absolute; top:0; left:0; right:0; height:2px;
        background: linear-gradient(90deg,transparent,var(--accent),#00d2ff,transparent);
    }
    .modal-title-2026 {
        font-size: 14px !important; font-weight: 900 !important;
        letter-spacing: 1.5px !important;
        background: linear-gradient(135deg,#fff,var(--accent));
        -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
        border-bottom: 1px solid rgba(255,255,255,.08) !important;
    }
    .light-theme .history-chart-panel {
        background: linear-gradient(135deg,#ffffff 0%,#f7f8fc 100%) !important;
        border-color: rgba(0,0,0,.08) !important;
        box-shadow: 0 12px 36px rgba(0,0,0,.06), 0 2px 8px rgba(0,0,0,.04) !important;
    }
    .light-theme .history-chart-panel::after { display: none !important; }
    .light-theme .chart-title-main {
        color: var(--accent-3) !important;
        background: none !important;
        -webkit-text-fill-color: unset !important;
    }
    .light-theme .chart-title-sub { color: rgba(0,0,0,.5) !important; }
    .light-theme .chart-current-value {
        color: #ff6600 !important;
        text-shadow: 0 0 12px rgba(255,102,0,.18) !important;
    }
    .light-theme .chart-current-sub { color: rgba(0,0,0,.55) !important; }
    .light-theme .chart-control-box {
        background: #f5f6fa !important;
        border-color: rgba(0,0,0,.06) !important;
    }
    .light-theme .chart-control-label { color: rgba(0,0,0,.55) !important; }
    .light-theme .chart-chip {
        background: #fff !important;
        border-color: rgba(0,0,0,.1) !important;
        color: #555 !important;
        box-shadow: 0 1px 2px rgba(0,0,0,.04) !important;
    }
    .light-theme .chart-chip:hover {
        background: rgba(255,102,0,.08) !important;
        border-color: rgba(255,102,0,.3) !important;
        color: #ff6600 !important;
    }
    .light-theme .chart-chip.active {
        background: linear-gradient(135deg,#ff6600,#ff8800) !important;
        border-color: #ff6600 !important;
        color: #1a0500 !important; /* escuro em fundo laranja = alto contraste */
        font-weight: 900 !important;
        box-shadow: 0 4px 14px rgba(255,102,0,.35) !important;
    }
    .light-theme .chart-stage {
        background: #fafbff !important;
        background-image:
            linear-gradient(180deg,#fafbff,#f0f2f8),
            linear-gradient(rgba(0,0,0,.04) 1px,transparent 1px),
            linear-gradient(90deg,rgba(0,0,0,.04) 1px,transparent 1px) !important;
        background-size: 100%,50px 50px,50px 50px !important;
        border-color: rgba(0,0,0,.06) !important;
        box-shadow: inset 0 2px 8px rgba(0,0,0,.04) !important;
    }
    .light-theme .chart-empty { color: rgba(0,0,0,.35) !important; }

    .light-theme .edge-command-center.v75 {
        background: linear-gradient(135deg,#ffffff 0%,#f7f8fc 100%) !important;
        border-color: rgba(0,0,0,.08) !important;
        box-shadow: 0 12px 36px rgba(0,0,0,.06), 0 2px 8px rgba(0,0,0,.04) !important;
    }
    .light-theme .edge-command-center.v75::after { display: none !important; }
    .light-theme .edge-command-kicker.v75 { color: #ff6600 !important; }
    .light-theme .edge-command-title.v75 {
        color: var(--accent-3) !important;
        background: none !important;
        -webkit-text-fill-color: unset !important;
    }
    .light-theme .edge-command-subtitle.v75 { color: rgba(0,0,0,.55) !important; }
    .light-theme .edge-command-last.v75 {
        background: #f5f6fa !important;
        border-color: rgba(0,0,0,.06) !important;
    }
    .light-theme .edge-command-last.v75 span { color: rgba(0,0,0,.55) !important; }
    .light-theme .edge-command-last.v75 strong { color: #0d1b2a !important; }
    .light-theme .edge-command-last.v75 small { color: rgba(0,0,0,.5) !important; }
    .light-theme .edge-command-warning.v75 {
        background: linear-gradient(135deg,rgba(255,193,7,.08),rgba(255,102,0,.04)) !important;
        border-color: rgba(255,193,7,.4) !important;
    }
    .light-theme .edge-command-warning.v75 strong { color: #594000 !important; }
    .light-theme .edge-command-panel.v75 {
        background: linear-gradient(160deg,#fff,#f7f8fc) !important;
        border-color: rgba(0,0,0,.07) !important;
        box-shadow: 0 4px 16px rgba(0,0,0,.04) !important;
    }
    .light-theme .edge-command-panel.v75:hover {
        border-color: rgba(255,102,0,.4) !important;
        box-shadow: 0 8px 24px rgba(255,102,0,.1) !important;
    }
    .light-theme .edge-command-icon.v75 {
        background: linear-gradient(135deg,rgba(255,102,0,.12),rgba(0,210,255,.06)) !important;
        border-color: rgba(255,102,0,.25) !important;
    }
    .light-theme .edge-command-panel-head.v75 h4 { color: #0d1b2a !important; }
    .light-theme .edge-command-panel-head.v75 p { color: rgba(0,0,0,.55) !important; }
    .light-theme .edge-command-help.v75 {
        background: rgba(0,210,255,.06) !important;
        color: rgba(0,0,0,.7) !important;
        border-left-color: #0083b0 !important;
    }
    .light-theme .edge-command-help.v75 b { color: #ff6600 !important; }
    .light-theme .edge-command-btn.v75 {
        background: linear-gradient(180deg,#fff,#f7f8fc) !important;
        border-color: rgba(0,0,0,.1) !important;
        color: #0d1b2a !important;
        box-shadow: 0 2px 6px rgba(0,0,0,.04) !important;
    }
    .light-theme .edge-command-btn.v75:hover {
        background: linear-gradient(180deg,#fff5ed,#ffe8d5) !important;
        border-color: #ff6600 !important;
        color: #ff6600 !important;
        box-shadow: 0 6px 18px rgba(255,102,0,.18) !important;
    }
    .light-theme .edge-command-btn.v75.warning {
        background: linear-gradient(180deg,#fffaf0,#fff3d6) !important;
        color: #b45309 !important; border-color: rgba(255,193,7,.4) !important;
    }
    .light-theme .edge-command-btn.v75.danger {
        background: linear-gradient(180deg,#fff5f5,#ffe5e5) !important;
        color: #c92a2a !important; border-color: rgba(255,51,51,.35) !important;
        animation: none !important;
    }

    .light-theme .modal-overlay-2026 { background: rgba(50,50,80,.55) !important; }
    .light-theme .modal-content-2026 {
        background: linear-gradient(160deg,#fff,#f7f8fc) !important;
        border-color: rgba(0,0,0,.08) !important;
        box-shadow: 0 32px 80px rgba(0,0,0,.18) !important;
    }
    .light-theme .modal-title-2026 {
        background: linear-gradient(135deg,#0d1b2a,#ff6600) !important;
        -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
        border-bottom-color: rgba(0,0,0,.08) !important;
    }

    .light-theme .mc-banner {
        background: linear-gradient(135deg,#ffffff 0%,#f5f6fa 100%) !important;
    }
    .light-theme .mc-vital {
        background: linear-gradient(160deg,#ffffff,#f7f8fc) !important;
    }
    .light-theme .mc-col, .light-theme .mc-arcs-panel, .light-theme .mc-signals-band {
        background: #ffffff !important;
    }
    .light-theme .mc-brand-eyebrow,
    .light-theme .mc-vital-label,
    .light-theme .mc-col-title,
    .light-theme .mc-arcs-title,
    .light-theme .mc-signals-title,
    .light-theme .mc-row-lbl,
    .light-theme .mc-arc-label,
    .light-theme .mc-signal-label { color: rgba(0,0,0,.55) !important; }
    .light-theme .mc-brand-sub,
    .light-theme .mc-vital-meta,
    .light-theme .mc-banner-kpi-lbl,
    .light-theme .mc-arc-unit,
    .light-theme .mc-signal-unit,
    .light-theme .mc-score-lbl { color: rgba(0,0,0,.55) !important; }
    .light-theme .mc-banner-kpi-val { color: #0d1b2a !important; }

    /* MODO CLARO 2026-06: textos brancos hardcoded que sumiam no fundo claro. */
    /* Fault ribbon: descricao era branco 60% (invisivel no chip claro). */
    .light-theme .mc-fault-desc { color: rgba(0,0,0,.62) !important; }
    .light-theme .mc-fault-chip {
        background: rgba(255,51,51,.08) !important;
        border-color: rgba(255,51,51,.40) !important;
    }
    .light-theme .mc-fault-chip.nominal {
        background: rgba(0,170,90,.08) !important;
        border-color: rgba(0,170,90,.40) !important;
    }
    /* Badges do header (ONLINE/LTE/etc.): base branca 50%. Variantes coloridas
       (.on/.off/.gps/.lte) tem cor propria e continuam por cima desta. */
    .light-theme .mc-badge { color: rgba(0,0,0,.55) !important; }
    /* Numero do SCORE: era branco puro (sumia no card claro). */
    .light-theme .mc-score-val { color: #0d1b2a !important; }
    .mc-root {
        font-feature-settings: 'cv11', 'ss01', 'tnum';
        --mc-line: rgba(255, 255, 255, 0.06);
        --mc-line-strong: rgba(255, 104, 31, 0.22);
    }
    .light-theme .mc-root {
        --mc-line: rgba(0, 0, 0, 0.08);
        --mc-line-strong: rgba(255, 104, 31, 0.32);
    }

    .mc-vitals {
        animation: athenaFadeUp 700ms cubic-bezier(0.16, 1, 0.3, 1) both !important;
        animation-delay: 60ms !important;
    }
    .mc-vital {
        backdrop-filter: blur(24px) saturate(1.5) !important;
        -webkit-backdrop-filter: blur(24px) saturate(1.5) !important;
        background: rgba(20, 20, 26, 0.62) !important;
        border: 1px solid var(--mc-line) !important;
        border-radius: 20px !important;
        box-shadow:
            0 12px 32px rgba(0, 0, 0, 0.45),
            inset 0 1px 0 rgba(255, 255, 255, 0.04),
            0 0 60px -24px rgba(255, 104, 31, 0.14) !important;
        transition: transform 360ms cubic-bezier(0.16, 1, 0.3, 1),
                    box-shadow 360ms cubic-bezier(0.16, 1, 0.3, 1) !important;
        position: relative;
        overflow: hidden !important;
    }
    .mc-vital::before {
        content: '';
        position: absolute;
        top: 0; left: 0; right: 0;
        height: 1px;
        background: linear-gradient(90deg,
            transparent,
            rgba(var(--mc-clr-rgb, 255, 104, 31), 0.55),
            transparent);
        opacity: 0.6;
    }
    .mc-vital::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent 35%);
        pointer-events: none;
        border-radius: inherit;
    }
    .mc-vital:hover {
        transform: perspective(1200px) rotateX(1.5deg) translateY(-4px) !important;
        box-shadow:
            0 28px 56px rgba(0, 0, 0, 0.55),
            inset 0 1px 0 rgba(255, 255, 255, 0.06),
            0 0 80px -16px rgba(255, 104, 31, 0.28) !important;
    }
    .light-theme .mc-vital {
        background: rgba(255, 255, 255, 0.92) !important;
        border-color: rgba(0, 0, 0, 0.06) !important;
        box-shadow:
            0 12px 32px rgba(20, 20, 30, 0.10),
            inset 0 1px 0 rgba(255, 255, 255, 0.7),
            0 0 60px -24px rgba(255, 104, 31, 0.12) !important;
    }
    .mc-vital-label {
        font-family: 'JetBrains Mono', monospace !important;
        font-size: 10px !important;
        font-weight: 800 !important;
        letter-spacing: 0.28em !important;
        text-transform: uppercase !important;
        color: rgba(255,255,255,0.80) !important;
        position: relative !important;
        padding-left: 16px !important;
    }
    .mc-vital-label::before {
        content: '';
        position: absolute;
        left: 0; top: 2px;
        width: 3px; height: 12px;
        background: var(--grad-ember, linear-gradient(135deg, #ff8a32, #ff681f));
        border-radius: 2px;
    }
    .light-theme .mc-vital-label { color: rgba(0,0,0,0.80) !important; }
    .mc-vital-value {
        font-family: 'Inter', sans-serif !important;
        font-weight: 900 !important;
        letter-spacing: -0.045em !important;
        line-height: 0.92 !important;
        font-variant-numeric: tabular-nums !important;
        font-size: clamp(48px, 5vw, 84px) !important;
    }
    .mc-vital-unit {
        font-family: 'JetBrains Mono', monospace !important;
        font-size: 11px !important;
        letter-spacing: 0.16em !important;
        font-weight: 700 !important;
        opacity: 0.6 !important;
    }
    .mc-vital-meta {
        font-family: 'JetBrains Mono', monospace !important;
        font-size: 10.5px !important;
        letter-spacing: 0.06em !important;
        opacity: 0.6 !important;
    }
    .mc-vital-bar {
        background: rgba(255, 255, 255, 0.06) !important;
        height: 4px !important;
        border-radius: 999px !important;
        overflow: hidden;
    }
    .light-theme .mc-vital-bar { background: rgba(0, 0, 0, 0.06) !important; }
    .mc-vital-fill {
        background: var(--mc-clr, var(--accent)) !important;
        box-shadow: 0 0 12px var(--mc-clr, var(--accent));
        border-radius: 999px !important;
        transition: width 600ms cubic-bezier(0.16, 1, 0.3, 1) !important;
    }
    .mc-fault-ribbon {
        backdrop-filter: blur(20px) saturate(1.5);
        -webkit-backdrop-filter: blur(20px) saturate(1.5);
        background: rgba(20, 20, 26, 0.62) !important;
        border: 1px solid var(--mc-line) !important;
        border-radius: 16px !important;
        padding: 14px 18px !important;
        animation: athenaFadeUp 600ms cubic-bezier(0.16, 1, 0.3, 1) both !important;
        /* Altura fixa: nao cresce ao surgir/somir falhas; rola horizontal quando passa de 1 chip */
        flex-wrap: nowrap !important;
        overflow-x: auto;
        overflow-y: hidden;
        align-items: center;
        min-height: 68px;
        height: 68px;
        scrollbar-width: thin;
        scrollbar-color: rgba(255,255,255,0.15) transparent;
    }
    .mc-fault-ribbon::-webkit-scrollbar { height: 4px; }
    .mc-fault-ribbon::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 4px; }
    .mc-fault-ribbon::-webkit-scrollbar-track { background: transparent; }
    .mc-fault-ribbon.nominal {
        background: rgba(0, 184, 122, 0.06) !important;
        border-color: rgba(0, 184, 122, 0.22) !important;
    }
    .light-theme .mc-fault-ribbon { background: rgba(255, 255, 255, 0.92) !important; }
    .mc-fault-chip {
        backdrop-filter: blur(8px);
        background: rgba(230, 57, 70, 0.10) !important;
        border: 1px solid rgba(230, 57, 70, 0.32) !important;
        border-radius: 12px !important;
        padding: 8px 14px !important;
        transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1) !important;
        flex: 0 0 auto;
        min-width: 240px;
        display: inline-flex;
        align-items: center;
        gap: 10px;
    }
    .mc-fault-chip .mc-fault-desc { white-space: nowrap; }
    .mc-fault-chip:hover { transform: translateY(-1px); }
    .mc-fault-chip.nominal {
        background: rgba(0, 184, 122, 0.10) !important;
        border-color: rgba(0, 184, 122, 0.32) !important;
        max-width: none;
    }
    .mc-fault-code {
        font-family: 'JetBrains Mono', monospace !important;
        font-size: 11px !important;
        letter-spacing: 0.14em !important;
        font-weight: 800 !important;
    }
    .mc-fault-desc {
        font-size: 11.5px !important;
        opacity: 0.75 !important;
    }

    .mc-fault-ribbon.marquee {
        overflow: hidden !important;          /* esconde o scrollbar — vira marquee puro */
        scrollbar-width: none;
    }
    .mc-fault-ribbon.marquee::-webkit-scrollbar { display: none; }
    .mc-fault-ribbon.marquee .mc-fault-track {
        display: inline-flex;
        gap: 12px;
        align-items: center;
        animation: athenaFaultMarquee 28s linear infinite;
        will-change: transform;
        white-space: nowrap;
        padding-right: 12px;      /* respiro entre o fim do bloco original e o início da duplicata */
    }
    .mc-fault-ribbon.marquee:hover .mc-fault-track {
        animation-play-state: paused;
    }
    @keyframes athenaFaultMarquee {
        from { transform: translateX(0); }
        to   { transform: translateX(-50%); }  /* metade = comprimento do bloco original */
    }
    .mc-matrix {
        animation: athenaFadeUp 800ms cubic-bezier(0.16, 1, 0.3, 1) both !important;
        animation-delay: 140ms !important;
    }
    .mc-col {
        backdrop-filter: blur(24px) saturate(1.5) !important;
        -webkit-backdrop-filter: blur(24px) saturate(1.5) !important;
        background: rgba(20, 20, 26, 0.62) !important;
        border: 1px solid var(--mc-line) !important;
        border-radius: 20px !important;
        box-shadow:
            0 12px 32px rgba(0, 0, 0, 0.42),
            inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
        position: relative;
        overflow: hidden;
        transition: transform 360ms cubic-bezier(0.16, 1, 0.3, 1) !important;
    }
    .mc-col:hover { transform: translateY(-3px); box-shadow: 0 20px 48px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 0 60px -24px rgba(255, 104, 31, 0.20) !important; }
    .mc-col::before {
        content: '';
        position: absolute;
        top: 0; left: 24px; right: 24px;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(255, 104, 31, 0.45), transparent);
    }
    .mc-col-title {
        font-family: 'JetBrains Mono', monospace !important;
        font-size: 10px !important;
        font-weight: 800 !important;
        letter-spacing: 0.28em !important;
        text-transform: uppercase !important;
        color: var(--accent-3) !important;
        position: relative;
        padding-left: 16px !important;
        padding-bottom: 12px !important;
        border-bottom: 1px solid var(--mc-line) !important;
        margin-bottom: 16px !important;
    }
    .mc-col-title::before {
        content: '';
        position: absolute;
        left: 0; top: 4px;
        width: 3px; height: 14px;
        background: var(--grad-ember, linear-gradient(135deg, #ff8a32, #ff681f));
        border-radius: 2px;
    }
    .mc-row {
        padding: 10px 0 !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
        transition: background 200ms ease;
    }
    .mc-row:last-child { border-bottom: none !important; }
    .mc-row:hover { background: rgba(255, 104, 31, 0.025); }
    .light-theme .mc-row { border-bottom-color: rgba(0, 0, 0, 0.05) !important; }
    .light-theme .mc-row:hover { background: rgba(255, 104, 31, 0.04); }

    .mc-row-lbl {
        font-family: 'JetBrains Mono', monospace !important;
        font-size: 11px !important;
        letter-spacing: 0.04em !important;
        opacity: 0.7 !important;
    }
    .mc-row-val {
        font-family: 'Inter', sans-serif !important;
        font-weight: 800 !important;
        font-variant-numeric: tabular-nums !important;
        letter-spacing: -0.01em !important;
        font-size: 14px !important;
    }
    .mc-row-val.accent { color: var(--accent-2) !important; }
    .mc-row-val.cyan { color: #4ea1ff !important; }
    .mc-row-val.success { color: var(--success) !important; }
    .mc-row-val.danger { color: var(--danger) !important; }
    .mc-row-bar {
        background: rgba(255, 255, 255, 0.05) !important;
        height: 3px !important;
        border-radius: 999px !important;
        overflow: hidden;
        margin: 4px 0 8px 0 !important;
    }
    .light-theme .mc-row-bar { background: rgba(0, 0, 0, 0.05) !important; }
    .mc-row-fill {
        height: 100%;
        background: var(--mc-clr, var(--accent)) !important;
        border-radius: 999px !important;
        transition: width 600ms cubic-bezier(0.16, 1, 0.3, 1) !important;
    }
    .mc-signals-band {
        backdrop-filter: blur(24px) saturate(1.5) !important;
        -webkit-backdrop-filter: blur(24px) saturate(1.5) !important;
        background: rgba(20, 20, 26, 0.62) !important;
        border: 1px solid var(--mc-line) !important;
        border-radius: 20px !important;
        box-shadow:
            0 12px 32px rgba(0, 0, 0, 0.42),
            inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
        animation: athenaFadeUp 800ms cubic-bezier(0.16, 1, 0.3, 1) both !important;
        animation-delay: 220ms !important;
    }
    .light-theme .mc-signals-band { background: rgba(255, 255, 255, 0.92) !important; }
    .mc-signals-title {
        font-family: 'JetBrains Mono', monospace !important;
        font-size: 10px !important;
        font-weight: 800 !important;
        letter-spacing: 0.28em !important;
        text-transform: uppercase !important;
        color: rgba(255,255,255,0.80) !important;
        position: relative;
        padding-left: 16px !important;
        padding-bottom: 12px !important;
        border-bottom: 1px solid var(--mc-line) !important;
        margin-bottom: 16px !important;
    }
    .light-theme .mc-signals-title { color: rgba(0,0,0,0.80) !important; }
    .mc-signals-title::before {
        content: '';
        position: absolute;
        left: 0; top: 4px;
        width: 3px; height: 14px;
        background: var(--grad-ember, linear-gradient(135deg, #ff8a32, #ff681f));
        border-radius: 2px;
    }
    .mc-signal {
        background: rgba(0, 0, 0, 0.32) !important;
        border: 1px solid var(--mc-line) !important;
        border-radius: 14px !important;
        padding: 14px !important;
        transition: all 280ms cubic-bezier(0.16, 1, 0.3, 1) !important;
        position: relative;
        overflow: hidden;
    }
    .light-theme .mc-signal {
        background: rgba(0, 0, 0, 0.025) !important;
        border-color: rgba(0, 0, 0, 0.06) !important;
    }
    .mc-signal:hover {
        border-color: rgba(255, 104, 31, 0.32) !important;
        transform: translateY(-2px);
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.32), 0 0 32px -12px rgba(255, 104, 31, 0.28);
    }
    .mc-signal-label {
        font-family: 'JetBrains Mono', monospace !important;
        font-size: 9.5px !important;
        font-weight: 700 !important;
        letter-spacing: 0.20em !important;
        text-transform: uppercase !important;
        opacity: 0.65 !important;
    }
    .mc-signal-value {
        font-family: 'Inter', sans-serif !important;
        font-weight: 900 !important;
        font-size: 24px !important;
        letter-spacing: -0.03em !important;
        line-height: 1 !important;
        font-variant-numeric: tabular-nums !important;
    }
    .mc-signal-unit {
        font-family: 'JetBrains Mono', monospace !important;
        font-size: 9.5px !important;
        letter-spacing: 0.10em !important;
        opacity: 0.55 !important;
    }
    .mc-signal-bar {
        background: rgba(255, 255, 255, 0.06) !important;
        height: 3px !important;
        border-radius: 999px !important;
        overflow: hidden;
    }
    .light-theme .mc-signal-bar { background: rgba(0, 0, 0, 0.06) !important; }
    .mc-signal-fill {
        height: 100%;
        border-radius: 999px !important;
        transition: width 600ms cubic-bezier(0.16, 1, 0.3, 1) !important;
    }
    .mc-signal-fill.blue { background: linear-gradient(90deg, #4ea1ff, #2d7dd2); box-shadow: 0 0 8px #4ea1ff; }
    .mc-signal-fill.red { background: linear-gradient(90deg, #ff5570, #e63946); box-shadow: 0 0 8px #e63946; }
    .mc-signal-fill.orange { background: linear-gradient(90deg, #ff8a32, #ff681f); box-shadow: 0 0 8px #ff681f; }
    .mc-signal-fill.green { background: linear-gradient(90deg, #00d68a, #00b87a); box-shadow: 0 0 8px #00b87a; }
    @keyframes arcSpinCw  { to { transform: rotate( 360deg); } }
    @keyframes arcSpinCcw { to { transform: rotate(-360deg); } }
    .mc-arcs-panel {
        backdrop-filter: blur(24px) saturate(1.4) !important;
        -webkit-backdrop-filter: blur(24px) saturate(1.4) !important;
        background: rgba(14, 14, 20, 0.72) !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        border-radius: 20px !important;
        box-shadow:
            0 10px 28px rgba(0, 0, 0, 0.38),
            inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
        animation: athenaFadeUp 900ms cubic-bezier(0.16, 1, 0.3, 1) both !important;
        animation-delay: 300ms !important;
        position: relative;
        overflow: hidden;
    }
    .light-theme .mc-arcs-panel {
        background: rgba(250, 251, 253, 0.98) !important;
        border: 1px solid rgba(0, 0, 0, 0.07) !important;
        box-shadow:
            0 6px 20px rgba(20, 30, 60, 0.07),
            inset 0 1px 0 rgba(255, 255, 255, 1) !important;
    }
    .mc-arcs-panel::before {
        content: '';
        position: absolute;
        top: 0; left: 20px; right: 20px;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(255, 104, 31, 0.38), transparent);
    }
    .mc-arcs-title {
        font-family: 'JetBrains Mono', monospace !important;
        font-size: 10px !important;
        font-weight: 800 !important;
        letter-spacing: 0.28em !important;
        text-transform: uppercase !important;
        color: rgba(255,255,255,0.80) !important;
        position: relative !important;
        padding-left: 16px !important;
        padding-bottom: 12px !important;
        border-bottom: 1px solid var(--mc-line) !important;
        margin-bottom: 20px !important;
    }
    .mc-arcs-title::before {
        content: '';
        position: absolute;
        left: 0; top: 4px;
        width: 3px; height: 14px;
        background: var(--grad-ember, linear-gradient(135deg, #ff8a32, #ff681f));
        border-radius: 2px;
    }
    .light-theme .mc-arcs-title { color: rgba(0,0,0,0.80) !important; }
    .mc-arc-item { transition: transform 360ms cubic-bezier(0.16, 1, 0.3, 1) !important; }
    .mc-arc-item:hover { transform: translateY(-3px) scale(1.02); }
    .mc-arc-gauge {
        position: relative !important;
        width: 118px !important;
        height: 118px !important;
        isolation: isolate;
    }
    .mc-arc-gauge::before {
        content: '';
        position: absolute;
        inset: -6px;
        border-radius: 50%;
        border: 1.5px solid transparent;
        border-top-color: rgba(255, 104, 31, 0.22);
        border-right-color: rgba(255, 104, 31, 0.08);
        animation: arcSpinCw 3s linear infinite;
        pointer-events: none;
        z-index: 1;
    }
    .mc-arc-gauge::after {
        content: '';
        position: absolute;
        inset: -10px;
        border-radius: 50%;
        border: 1px dashed rgba(255, 255, 255, 0.05);
        animation: arcSpinCcw 11s linear infinite;
        pointer-events: none;
        z-index: 1;
    }
    .light-theme .mc-arc-gauge::before {
        border-top-color: rgba(255, 104, 31, 0.18);
        border-right-color: rgba(255, 104, 31, 0.06);
    }
    .light-theme .mc-arc-gauge::after {
        border-color: rgba(0, 0, 0, 0.04);
    }
    .mc-arc-gauge svg { width: 100%; height: 100%; transform: rotate(-90deg); }
    .mc-arc-bg {
        fill: none;
        stroke: rgba(255, 255, 255, 0.07);
        stroke-width: 5;
    }
    .light-theme .mc-arc-bg { stroke: rgba(0, 0, 0, 0.08); }
    .mc-arc-fill {
        fill: none;
        stroke-width: 6;
        stroke-linecap: round;
        transition: stroke-dashoffset 900ms cubic-bezier(0.16, 1, 0.3, 1) !important;
        filter: drop-shadow(0 0 6px currentColor);
    }
    .mc-arc-center {
        position: absolute !important;
        inset: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        z-index: 2;
    }
    .mc-arc-val {
        font-family: 'Inter', sans-serif !important;
        font-weight: 900 !important;
        letter-spacing: -0.04em !important;
        font-variant-numeric: tabular-nums !important;
        font-size: 28px !important;
        text-shadow: 0 0 18px rgba(255,255,255,.06) !important;
        color: #ffffff !important;
        line-height: 1 !important;
    }
    .light-theme .mc-arc-val { color: #0d1117 !important; }
    .mc-arc-unit {
        font-family: 'JetBrains Mono', monospace !important;
        font-size: 9px !important;
        letter-spacing: 0.16em !important;
        color: rgba(255, 255, 255, 0.44) !important;
        margin-top: 3px !important;
    }
    .light-theme .mc-arc-unit { color: rgba(0, 0, 0, 0.42) !important; }
    .mc-arc-label {
        font-family: 'JetBrains Mono', monospace !important;
        font-size: 9px !important;
        font-weight: 700 !important;
        letter-spacing: 0.20em !important;
        text-transform: uppercase !important;
        color: rgba(255, 255, 255, 0.44) !important;
        text-align: center !important;
    }
    .light-theme .mc-arc-label { color: rgba(0, 0, 0, 0.44) !important; }
    .history-chart-panel {
        backdrop-filter: blur(24px) saturate(1.5) !important;
        -webkit-backdrop-filter: blur(24px) saturate(1.5) !important;
        background: rgba(20, 20, 26, 0.62) !important;
        border: 1px solid var(--mc-line) !important;
        border-radius: 20px !important;
        box-shadow:
            0 16px 40px rgba(0, 0, 0, 0.45),
            inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
        animation: athenaFadeUp 1000ms cubic-bezier(0.16, 1, 0.3, 1) both !important;
        animation-delay: 380ms !important;
    }
    .light-theme .history-chart-panel {
        background: rgba(255, 255, 255, 0.92) !important;
        box-shadow: 0 16px 40px rgba(20, 20, 30, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
    }
    .chart-title-main {
        font-family: 'JetBrains Mono', monospace !important;
        font-size: 10px !important;
        font-weight: 800 !important;
        letter-spacing: 0.28em !important;
        text-transform: uppercase !important;
        color: rgba(255,255,255,0.80) !important;
        background: none !important;
        -webkit-background-clip: unset !important;
        background-clip: unset !important;
        -webkit-text-fill-color: unset !important;
        position: relative !important;
        padding-left: 16px !important;
        padding-bottom: 12px !important;
        border-bottom: 1px solid var(--mc-line) !important;
        margin-bottom: 12px !important;
    }
    .chart-title-main::before {
        content: '';
        position: absolute;
        left: 0; top: 3px;
        width: 3px; height: 14px;
        background: var(--grad-ember, linear-gradient(135deg, #ff8a32, #ff681f));
        border-radius: 2px;
    }
    .chart-title-sub {
        font-family: 'JetBrains Mono', monospace !important;
        font-size: 10px !important;
        letter-spacing: 0.18em !important;
        text-transform: uppercase !important;
        opacity: 0.6 !important;
    }
    .chart-current-value {
        font-family: 'Inter', sans-serif !important;
        font-weight: 900 !important;
        letter-spacing: -0.03em !important;
        font-variant-numeric: tabular-nums !important;
    }
    .mc-banner-kpi-val {
        font-family: 'Inter', sans-serif !important;
        font-weight: 900 !important;
        letter-spacing: -0.03em !important;
        font-variant-numeric: tabular-nums !important;
        background: linear-gradient(135deg, #fff 0%, #ffb178 100%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent !important;
    }
    .light-theme .mc-banner-kpi-val {
        background: linear-gradient(135deg, #15151a 0%, #ed5410 100%) !important;
        -webkit-background-clip: text !important;
        background-clip: text !important;
        color: transparent !important;
    }
    .mc-banner-kpi-lbl {
        font-family: 'JetBrains Mono', monospace !important;
        font-size: 10px !important;
        font-weight: 700 !important;
        letter-spacing: 0.22em !important;
        text-transform: uppercase !important;
    }
    .mc-brand-eyebrow {
        font-family: 'JetBrains Mono', monospace !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        letter-spacing: 0.32em !important;
        text-transform: uppercase !important;
        color: var(--accent-3) !important;
        display: inline-flex;
        align-items: center;
        gap: 10px;
    }
    .mc-brand-eyebrow::before {
        content: '';
        width: 28px;
        height: 1px;
        background: var(--accent);
    }
    .mc-score-lbl {
        font-family: 'JetBrains Mono', monospace !important;
        font-size: 10px !important;
        font-weight: 800 !important;
        letter-spacing: 0.24em !important;
    }
    @keyframes athenaFadeUp {
        from { opacity: 0; transform: translateY(20px); }
        to   { opacity: 1; transform: translateY(0); }
    }
    @keyframes athenaScaleIn {
        from { opacity: 0; transform: scale(0.94); }
        to   { opacity: 1; transform: scale(1); }
    }
    @media (max-width: 1280px) {
        .mc-vital-value { font-size: clamp(40px, 4.5vw, 64px) !important; }
        .mc-signal-value { font-size: 20px !important; }
    }
    @media (max-width: 980px) {
        .mc-vitals { grid-template-columns: repeat(2, 1fr) !important; }
        .mc-matrix { grid-template-columns: 1fr !important; }
        .mc-vital { padding: 18px !important; border-radius: 16px !important; }
        .mc-col { padding: 18px !important; border-radius: 16px !important; }
        .mc-arcs-panel { padding: 20px !important; border-radius: 18px !important; }
    }
    @media (max-width: 640px) {
        .mc-vitals { grid-template-columns: 1fr !important; }
        .mc-vital-value { font-size: clamp(40px, 12vw, 64px) !important; }
        .mc-signals-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
        .mc-arcs-row { grid-template-columns: repeat(2, 1fr) !important; }
    }
    @media (max-width: 420px) {
        .mc-signals-grid { grid-template-columns: 1fr !important; }
        .mc-arcs-row { grid-template-columns: 1fr 1fr !important; gap: 14px !important; }
        .mc-vital-label { font-size: 9.5px !important; }
    }
    @media print {
        .mc-vital, .mc-col, .mc-signals-band, .mc-arcs-panel, .history-chart-panel {
            backdrop-filter: none !important;
            -webkit-backdrop-filter: none !important;
            box-shadow: none !important;
        }
    }
    .mc-row-lbl { color: rgba(255,255,255,0.58) !important; }
    .mc-col-title { color: rgba(255,255,255,0.80) !important; }
    .mc-vital-unit { color: rgba(255,255,255,0.55) !important; }
    .mc-signal-unit { color: rgba(255,255,255,0.50) !important; }
    .mc-signal-label { color: rgba(255,255,255,0.62) !important; }
    .mc-arcs-label { color: rgba(255,255,255,0.60) !important; }
    .chart-title-sub { color: rgba(255,255,255,0.65) !important; }
    .chart-current-sub { color: rgba(255,255,255,0.65) !important; }
    .chart-control-label { color: rgba(255,255,255,0.65) !important; }
    .light-theme .mc-row-lbl { color: rgba(0,0,0,0.60) !important; }
    .light-theme .mc-col-title { color: rgba(0,0,0,0.80) !important; }
    .light-theme .mc-vital-unit { color: rgba(0,0,0,0.55) !important; }
    .light-theme .mc-signal-unit { color: rgba(0,0,0,0.50) !important; }
    .light-theme .mc-signal-label { color: rgba(0,0,0,0.65) !important; }
    .light-theme .mc-arcs-label { color: rgba(0,0,0,0.62) !important; }
    .light-theme .chart-title-sub { color: rgba(0,0,0,0.65) !important; }
    .light-theme .chart-current-sub { color: rgba(0,0,0,0.65) !important; }
    .light-theme .chart-control-label { color: rgba(0,0,0,0.65) !important; }
    .light-theme .chart-stage svg text { fill: rgba(0,0,0,0.55) !important; }
    .light-theme .chart-stage svg line { stroke: rgba(0,0,0,0.10) !important; }

    /* ═══════════════════════════════════════════════════════════════════
       SISTEMA A GÁS — estilos exclusivos para Veiculo.TipoNormalizado=GAS.
       Mantém paleta ATHENA (laranja accent + dark base) com toques de ciano
       para diferenciar do dashboard padrão.
       ═══════════════════════════════════════════════════════════════════ */

    /* Eyebrow da seção (barra superior identificadora) */
    .gas-section-eyebrow {
        display: flex; align-items: center; gap: 14px;
        margin: 18px 0 10px 0;
        padding: 10px 18px;
        background: linear-gradient(90deg, rgba(0,210,255,.08), rgba(255,102,0,.06) 60%, transparent);
        border-left: 3px solid #00d2ff;
        border-radius: 0 12px 12px 0;
        position: relative; overflow: hidden;
    }
    .gas-section-eyebrow::before {
        content: ''; position: absolute; inset: 0;
        background: radial-gradient(ellipse at left, rgba(0,210,255,.08), transparent 50%);
        pointer-events: none;
    }
    .gas-eyebrow-icon {
        font-size: 22px; line-height: 1;
        filter: drop-shadow(0 0 8px rgba(0,210,255,.55));
    }
    .gas-eyebrow-title {
        font-family: 'JetBrains Mono', monospace;
        font-size: 13px; font-weight: 900; letter-spacing: 4px;
        color: #fff; text-transform: uppercase;
    }
    .gas-eyebrow-sub {
        font-family: 'JetBrains Mono', monospace;
        font-size: 10px; letter-spacing: 2px;
        color: rgba(0,210,255,.75);
    }
    .gas-eyebrow-flag {
        margin-left: auto;
        font-family: 'JetBrains Mono', monospace;
        font-size: 10px; letter-spacing: 1.5px;
        padding: 5px 12px; border-radius: 999px;
        font-weight: 800;
    }
    .gas-eyebrow-flag.danger {
        background: rgba(230,57,70,.16); border: 1px solid rgba(230,57,70,.55);
        color: #ff6b78;
        animation: gasFlash 1.2s ease-in-out infinite;
    }
    @keyframes gasFlash {
        0%, 100% { opacity: 1; box-shadow: 0 0 12px rgba(230,57,70,.25); }
        50%      { opacity: .55; box-shadow: 0 0 24px rgba(230,57,70,.45); }
    }

    /* Matriz GAS herda layout da mc-matrix, mas com borda ciano sutil */
    .mc-matrix-gas { gap: 14px !important; }
    .mc-col-gas {
        border-top: 2px solid rgba(0,210,255,.35) !important;
        position: relative;
    }
    .mc-col-gas::before {
        content: ''; position: absolute; top: -2px; left: 0; right: 0; height: 2px;
        background: linear-gradient(90deg, rgba(0,210,255,.65), rgba(255,102,0,.35), transparent);
        pointer-events: none;
    }
    .mc-col-gas .mc-col-title {
        color: rgba(0,210,255,.85) !important;
    }
    /* Override .warn para valores em atenção */
    .mc-row-val.warn { color: #ffb567 !important; }

    /* Painel inferior: lâmpadas + marcha + RPM/flags */
    .gas-status-band {
        margin-top: 16px; padding: 18px 22px;
        background: linear-gradient(180deg, rgba(18,18,24,.96), rgba(10,10,16,.99));
        border: 1px solid rgba(255,255,255,.08);
        border-radius: 14px;
        box-shadow: 0 12px 40px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.04);
        position: relative; overflow: hidden;
    }
    .gas-status-band::before {
        content: ''; position: absolute; top: 0; left: 18px; right: 18px; height: 1px;
        background: linear-gradient(90deg, transparent, rgba(0,210,255,.45), rgba(255,102,0,.32), transparent);
    }
    .gas-status-title {
        font-family: 'JetBrains Mono', monospace;
        font-size: 9.5px; font-weight: 800; letter-spacing: 3px;
        color: rgba(255,255,255,.40); text-transform: uppercase;
        margin-bottom: 16px;
    }
    .gas-status-grid {
        display: grid;
        grid-template-columns: 1.6fr 1fr 1.4fr;
        gap: 22px;
        align-items: start;
    }

    /* Lâmpadas — chips circulares que acendem quando true */
    .gas-lamps-label, .gas-gear-label, .gas-rpm-label {
        font-family: 'JetBrains Mono', monospace;
        font-size: 9px; font-weight: 800; letter-spacing: 2.5px;
        color: rgba(255,255,255,.38); text-transform: uppercase;
        margin-bottom: 10px;
    }
    .gas-lamps-row { display: flex; flex-wrap: wrap; gap: 8px; }
    .gas-lamp {
        display: inline-flex; align-items: center; justify-content: center;
        min-width: 56px; height: 34px; padding: 0 10px;
        border-radius: 8px;
        font-family: 'JetBrains Mono', monospace;
        font-size: 11px; font-weight: 800; letter-spacing: 1px;
        background: rgba(255,255,255,.03);
        border: 1px solid rgba(255,255,255,.08);
        color: rgba(255,255,255,.32);
        transition: all .25s ease;
    }
    .gas-lamp.on.red {
        background: rgba(230,57,70,.18);
        border-color: rgba(230,57,70,.65);
        color: #ff7280;
        box-shadow: 0 0 18px rgba(230,57,70,.45), inset 0 0 12px rgba(230,57,70,.18);
        animation: gasFlash 1s ease-in-out infinite;
    }
    .gas-lamp.on.amber {
        background: rgba(255,179,0,.16);
        border-color: rgba(255,179,0,.55);
        color: #ffc46b;
        box-shadow: 0 0 14px rgba(255,179,0,.32);
    }

    /* Marcha — display estilo painel de instrumento */
    .gas-gear-display {
        display: flex; align-items: baseline; gap: 16px;
        padding: 10px 16px;
        background: rgba(0,0,0,.30);
        border: 1px solid rgba(255,102,0,.18);
        border-radius: 10px;
        position: relative;
    }
    .gas-gear-current {
        font-family: 'JetBrains Mono', monospace;
        font-size: 36px; font-weight: 900;
        color: var(--accent, #ff681f);
        text-shadow: 0 0 18px rgba(255,102,0,.55);
        line-height: 1;
        min-width: 44px;
    }
    .gas-gear-sel, .gas-gear-ratio {
        font-family: 'JetBrains Mono', monospace;
        font-size: 10px; letter-spacing: 1.5px;
        color: rgba(255,255,255,.55); font-weight: 700;
    }

    /* RPM Idle / Hi Idle */
    .gas-rpm-row { display: flex; gap: 18px; align-items: center; }
    .gas-rpm-mini-lbl {
        font-family: 'JetBrains Mono', monospace;
        font-size: 9px; letter-spacing: 1.8px; color: rgba(255,255,255,.4);
        margin-bottom: 4px;
    }
    .gas-rpm-mini-val {
        font-family: 'JetBrains Mono', monospace;
        font-size: 18px; font-weight: 900;
        color: #00d2ff;
        text-shadow: 0 0 12px rgba(0,210,255,.38);
        font-variant-numeric: tabular-nums;
    }
    .gas-rpm-flags { display: flex; flex-direction: column; gap: 5px; margin-left: 8px; }
    .gas-flag {
        font-family: 'JetBrains Mono', monospace;
        font-size: 9px; font-weight: 800; letter-spacing: 1.5px;
        padding: 3px 8px; border-radius: 4px;
        background: rgba(255,255,255,.03);
        border: 1px solid rgba(255,255,255,.08);
        color: rgba(255,255,255,.32);
        text-align: center;
    }
    .gas-flag.on {
        background: rgba(255,179,0,.18);
        border-color: rgba(255,179,0,.55);
        color: #ffc46b;
    }
    .gas-flag.on.critical {
        background: rgba(230,57,70,.20);
        border-color: rgba(230,57,70,.65);
        color: #ff7280;
        animation: gasFlash .8s ease-in-out infinite;
    }

    /* Identidade ECU (rodapé sutil) */
    .gas-ident {
        margin-top: 14px; padding-top: 12px;
        border-top: 1px dashed rgba(255,255,255,.08);
        display: flex; flex-wrap: wrap; gap: 14px; align-items: center;
    }
    .gas-ident-lbl {
        font-family: 'JetBrains Mono', monospace;
        font-size: 9px; letter-spacing: 2.5px; font-weight: 800;
        color: rgba(0,210,255,.65); text-transform: uppercase;
    }
    .gas-ident-val {
        font-size: 11px; color: rgba(255,255,255,.78);
        letter-spacing: .3px;
    }
    .gas-ident-val.mono {
        font-family: 'JetBrains Mono', monospace;
        font-size: 10px; color: rgba(255,255,255,.55);
    }

    /* Responsivo: empilha em telas estreitas */
    @media (max-width: 880px) {
        .gas-status-grid { grid-template-columns: 1fr; gap: 18px; }
        .gas-rpm-row { flex-wrap: wrap; }
    }

    /* Light theme — ajustes p/ contraste */
    .light-theme .gas-status-band {
        background: linear-gradient(180deg, #fafbfd, #f3f4f8) !important;
        border-color: rgba(0,0,0,.08) !important;
    }
    .light-theme .gas-status-title,
    .light-theme .gas-lamps-label,
    .light-theme .gas-gear-label,
    .light-theme .gas-rpm-label { color: rgba(0,0,0,.55) !important; }
    .light-theme .gas-lamp {
        background: rgba(0,0,0,.03) !important;
        border-color: rgba(0,0,0,.10) !important;
        color: rgba(0,0,0,.40) !important;
    }
    .light-theme .gas-gear-display {
        background: #fff !important;
        border-color: rgba(255,102,0,.30) !important;
        box-shadow: inset 0 1px 0 rgba(255,255,255,1);
    }
    .light-theme .gas-gear-sel,
    .light-theme .gas-gear-ratio { color: rgba(0,0,0,.55) !important; }
    .light-theme .gas-rpm-mini-lbl { color: rgba(0,0,0,.50) !important; }
    .light-theme .gas-rpm-mini-val { color: #0083b0 !important; text-shadow: none !important; }
    .light-theme .gas-eyebrow-title { color: #15151a !important; }
    .light-theme .gas-eyebrow-sub { color: #0083b0 !important; }
    /* 2026-06: gaps GAS (auditoria exaustiva) — ident/VIN/flag brancos sem override. */
    .light-theme .gas-ident-val { color: rgba(0,0,0,.72) !important; }
    .light-theme .gas-ident-val.mono { color: rgba(0,0,0,.55) !important; }
    .light-theme .gas-flag { color: rgba(0,0,0,.45) !important; }
    .light-theme .mc-col-gas .mc-col-title { color: #0083b0 !important; }

/* ── FICHA DE AÇÃO J1939 ("o que fazer") ──────────────────────────────────
   Aparece sob o ribbon de falhas quando há DTC ativo. Traduz o código em
   conduta prática: severidade, sistema, pode rodar, causa e ação. */
.ath-ficha-wrap{ margin:10px 0 4px; display:flex; flex-direction:column; gap:8px; }
.ath-ficha-head{ font-family:'IBM Plex Mono',monospace; font-size:9.5px; font-weight:700; letter-spacing:.16em; color:#ff9147; }
.ath-ficha{ background:linear-gradient(150deg,rgba(255,255,255,.055),rgba(255,255,255,.012));
  border:1px solid rgba(255,255,255,.09); border-radius:12px; padding:12px 14px; }
.ath-ficha-top{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-bottom:7px; }
.ath-ficha-cod{ font-family:'IBM Plex Mono',monospace; font-size:11px; font-weight:700; color:#f4f2ee; }
.ath-ficha-sev{ font-family:'IBM Plex Mono',monospace; font-size:8.5px; font-weight:700; letter-spacing:.08em;
  padding:2px 7px; border-radius:100px; border:1px solid currentColor; }
.ath-ficha-sis{ font-family:'IBM Plex Mono',monospace; font-size:8.5px; color:#8a877f; }
.ath-ficha-desc{ font-size:12px; color:#c7c3ba; line-height:1.45; margin-bottom:9px; }
.ath-ficha-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2fr); gap:12px; margin-bottom:9px; }
.ath-ficha-k{ font-family:'IBM Plex Mono',monospace; font-size:7.5px; letter-spacing:.1em; color:#6c6a63; margin-bottom:4px; }
.ath-ficha-v{ font-size:11.5px; font-weight:600; line-height:1.4; }
.ath-ficha-acao{ font-size:12px; color:#f4f2ee; line-height:1.5; padding:9px 11px; border-radius:9px;
  background:rgba(255,90,31,.07); border:1px solid rgba(255,90,31,.22); }
.ath-ficha-acao b{ color:#ff9147; }
.ath-ficha-nota{ font-family:'IBM Plex Mono',monospace; font-size:8px; color:#5a584f; line-height:1.5; }
@media (max-width: 720px){ .ath-ficha-grid{ grid-template-columns:1fr; gap:8px; } }

/* ── SAÚDE PREDITIVA (tendência + score de risco + fatores auditáveis) ──── */
.ath-pred{ margin:12px 0; padding:16px 18px; border-radius:16px;
  background:linear-gradient(150deg,rgba(255,255,255,.055),rgba(255,255,255,.012));
  border:1px solid rgba(255,255,255,.09); }
.ath-pred-head{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:14px; }
.ath-pred-tag{ font-family:'IBM Plex Mono',monospace; font-size:9.5px; font-weight:700; letter-spacing:.14em;
  padding:3px 9px; border-radius:100px; border:1px solid currentColor; }
.ath-pred-sub{ font-family:'IBM Plex Mono',monospace; font-size:8.5px; color:#6c6a63; }
.ath-pred-body{ display:flex; align-items:flex-start; gap:20px; }
.ath-pred-score{ flex:0 0 auto; text-align:center; }
.ath-pred-dias{ font-family:'IBM Plex Mono',monospace; font-size:10px; color:#c7c3ba; margin-top:6px; }
.ath-pred-dias b{ color:#ff9147; font-size:13px; }
.ath-pred-fatores{ flex:1; min-width:0; display:flex; flex-direction:column; gap:11px; }
.ath-pred-fator-top{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.ath-pred-fator-t{ font-size:12px; font-weight:600; color:#f4f2ee; }
.ath-pred-fator-s{ font-family:'IBM Plex Mono',monospace; font-size:10px; color:#8a877f; white-space:nowrap; }
.ath-pred-fator-bar{ height:5px; border-radius:100px; background:rgba(255,255,255,.07); margin:5px 0 4px; overflow:hidden; }
.ath-pred-fator-bar > span{ display:block; height:100%; border-radius:100px; }
.ath-pred-fator-a{ font-size:11px; color:#9a978f; line-height:1.45; }
.ath-pred-rec{ font-size:12px; color:#f4f2ee; line-height:1.5; padding:10px 12px; border-radius:10px;
  background:rgba(255,90,31,.07); border:1px solid rgba(255,90,31,.22); }
.ath-pred-rec b{ color:#ff9147; }
.ath-pred-vazio{ font-family:'IBM Plex Mono',monospace; font-size:10px; color:#6c6a63; }
.ath-pred-nota{ font-family:'IBM Plex Mono',monospace; font-size:8px; color:#5a584f; margin-top:12px; line-height:1.5; }
@media (max-width: 720px){ .ath-pred-body{ flex-direction:column; align-items:center; gap:14px; } .ath-pred-fatores{ width:100%; } }

/* ===== css/athena-mobile.css ===== */
/* ATHENA Mobile v2 (2026-06) — responsividade real.
 *
 * A v1 mirava classes que o app NAO usa (.athena-sidebar, .athena-card,
 * Bootstrap .row/.col) → era inerte. Esta versao mira as classes REAIS
 * (.side-panel, .main-workspace, .telemetry-grid-2026, .modal-card, etc.)
 * e foca em iPhone 14/15/16/17 (normal/Pro/Pro Max ~390-440px) e tablets.
 *
 * IMPORTANTE: este arquivo e carregado por ULTIMO no App.razor (depois de
 * home.css e telemetry-grid.css) para ter precedencia. Tudo aqui esta dentro
 * de @media (max-width/pointer/orientation), entao o DESKTOP nao e afetado.
 */

/* Safe areas do iPhone (notch / Dynamic Island / home indicator). */
:root {
    --sat: env(safe-area-inset-top, 0px);
    --sab: env(safe-area-inset-bottom, 0px);
    --sal: env(safe-area-inset-left, 0px);
    --sar: env(safe-area-inset-right, 0px);
}

/* Toque: alvos >=44px e inputs 16px (evita zoom automatico do iOS). */
@media (pointer: coarse) {
    input, select, textarea, .nexus-input { font-size: 16px !important; }
    button, .btn, [role="button"], .sys-btn, .vehicle-btn, .ind-dropdown-trigger,
    .edge-command-btn, .amms-btn, .cfg-row, .mobile-menu-btn { min-height: 44px; }
}

/* ===== Base mobile/tablet (<=1024px): sem rolagem horizontal ===== */
@media (max-width: 1024px) {
    html, body { max-width: 100%; overflow-x: hidden; }
    .nexus-system-root { overflow-x: hidden !important; }
    img, svg, canvas, video, table { max-width: 100%; }
}

/* ===== Shell + safe areas (<=900px) — vale no Safari, nao so em PWA ===== */
@media (max-width: 900px) {
    /* Header fixo desce o conteudo abaixo do Dynamic Island */
    .mobile-header {
        height: calc(62px + var(--sat)) !important;
        padding-top: calc(10px + var(--sat)) !important;
        padding-left: calc(14px + var(--sal)) !important;
        padding-right: calc(14px + var(--sar)) !important;
        box-sizing: border-box;
    }
    /* Drawer respeita topo e base */
    .side-panel {
        padding-top: calc(14px + var(--sat)) !important;
        padding-bottom: calc(24px + var(--sab)) !important;
    }
    /* Conteudo limpa o header maior + nao encosta no home indicator/laterais */
    .main-workspace {
        padding-top: calc(88px + var(--sat)) !important;
        padding-bottom: calc(28px + var(--sab)) !important;
        padding-left: calc(14px + var(--sal)) !important;
        padding-right: calc(14px + var(--sar)) !important;
    }
    .mqtt-status-bar { top: calc(62px + var(--sat)) !important; }

    /* Nenhum bloco principal estoura a largura da tela */
    .main-workspace > section,
    .main-workspace > div,
    .history-chart-panel,
    .telemetry-grid-2026,
    .cyber-sec-card,
    .edge-command-center { max-width: 100% !important; }

    /* Chat IA: botao flutuante acima do home indicator; painel vira bottom-sheet */
    .athena-chat-toggle {
        bottom: calc(16px + var(--sab)) !important;
        right: calc(16px + var(--sar)) !important;
    }
    .athena-chat-panel {
        left: 8px !important;
        right: 8px !important;
        bottom: calc(8px + var(--sab)) !important;
        width: auto !important;
        max-width: calc(100vw - 16px) !important;
        height: min(72dvh, 560px) !important;
    }
}

/* ===== TelemetryGrid (detalhe do caminhao) em <=768px ===== */
@media (max-width: 768px) {
    .mc-root { padding-left: 0 !important; padding-right: 0 !important; }
    .telemetry-grid-2026 { gap: 12px !important; }
    .cyber-sec-card { padding: 16px !important; }
    .history-chart-panel { padding: 14px !important; border-radius: 14px !important; }

    /* Cabecalho do grafico: titulo e valor atual empilham */
    .chart-toolbar { flex-direction: column; align-items: flex-start; gap: 8px; }

    /* Linha de filtros (Periodo / Indicador / Sobrepor): 1 por linha */
    .chart-filters-row {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
    .chart-filter-cell { width: 100% !important; min-width: 0 !important; }
    .ind-dropdown { width: 100% !important; }

    /* Central de comandos: 1 coluna, botoes ocupam a linha */
    .edge-command-grid { grid-template-columns: 1fr !important; }
    .edge-command-row { flex-wrap: wrap !important; gap: 8px !important; }
    .edge-command-row .edge-command-btn { flex: 1 1 100% !important; }

    /* Seletor de tipo de mapa nao espreme */
    .athena-map-mode-selector { flex-wrap: wrap !important; }

    .map-container, #tactical-map { min-height: 300px !important; }
}

/* ===== iPhone fino (<=430px): 14/15/16/17 normal/Pro/Pro Max ===== */
@media (max-width: 430px) {
    .nexus-hero-title { font-size: 26px !important; letter-spacing: 4px !important; }
    .asset-id { font-size: 23px !important; }
    .asset-header-bar { padding: 14px !important; }
    .asset-actions { width: 100%; }
    .asset-actions button { flex: 1 1 100% !important; }

    .global-kpi-card { padding: 14px !important; }
    .cyber-sec-card { padding: 13px !important; }
    .cyber-sec-value-safe, .cyber-sec-value-danger { font-size: 14px !important; }
    .chart-current-value { font-size: 20px !important; }
    .chart-title-main { font-size: 13px !important; letter-spacing: 1px !important; }

    /* Modais quase fullscreen, roláveis e dentro das safe areas */
    .modal-card,
    .modal-card-users,
    .pdf-modal-card,
    .cfg-modal,
    .modal-content-2026 {
        width: calc(100vw - 16px) !important;
        max-width: calc(100vw - 16px) !important;
        max-height: calc(100dvh - var(--sat) - var(--sab) - 16px) !important;
        margin-top: var(--sat) !important;
        padding: 16px !important;
        overflow: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    .nexus-form-grid,
    .nexus-footer-actions,
    .config-grid,
    .modal-card-users { grid-template-columns: 1fr !important; }
}

/* ===== Tablets / iPad em retrato (700-1024): KPIs em 3 colunas ===== */
@media (min-width: 700px) and (max-width: 1024px) {
    .global-dashboard {
        grid-template-columns: repeat(3, 1fr) !important;
        max-width: 100% !important;
    }
}

/* ===== Celular em paisagem (altura curta): aproveita a vertical ===== */
@media (max-height: 480px) and (orientation: landscape) {
    .mobile-header { height: calc(50px + var(--sat)) !important; }
    .main-workspace { padding-top: calc(64px + var(--sat)) !important; }
    .map-container, #tactical-map { min-height: 220px !important; }
}

/* Acessibilidade: respeita "reduzir movimento". */
@media (prefers-reduced-motion: reduce) {
    * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   MOBILE PREMIUM PACK (2026-06)
   Correções dos bugs reportados (overlap MISSION CONTROL, FAB cobrindo
   conteúdo, chips, mapa alto/vazio, KPI borrado) + polish.
   Tudo em @media (max-width/max-height/pointer/orientation) → desktop intacto.
   Carregado por ÚLTIMO → vence empates de cascata sobre as regras acima e
   sobre home.css/telemetry-grid.css.
   ═══════════════════════════════════════════════════════════════════════ */

/* (1) MISSION CONTROL — em telas estreitas o grid de 4 colunas + altura fixa
   (168px) + badges com overflow:hidden faziam o texto se SOBREPOR. Aqui colapsa
   para 1 coluna, altura automática e badges que quebram livremente. */
@media (max-width: 900px) {
    .mc-banner {
        grid-template-columns: 1fr !important;
        height: auto !important;
        min-height: 0 !important;
        gap: 12px !important;
        padding: 16px !important;
    }
    .mc-badges {
        max-height: none !important;
        overflow: visible !important;
        flex-wrap: wrap !important;
        gap: 6px 8px !important;
    }
    .mc-badge { max-width: 100% !important; }
    .mc-banner-kpis { gap: 16px !important; width: 100%; justify-content: flex-start; }
    .mc-vitals { grid-template-columns: repeat(2, 1fr) !important; }
    .mc-matrix { grid-template-columns: 1fr !important; }
}

/* (2) Botão flutuante ATHENA (chat) cobria botões/menu/KPIs porque tinha
   z-index máximo (2147483001). No mobile rebaixamos para 50 (acima do conteúdo,
   abaixo de modais) e reservamos espaço no fim do conteúdo e do drawer para o
   último item (ex.: "SAIR DO SISTEMA") não ficar embaixo do FAB. */
@media (max-width: 900px) {
    .athena-chat-toggle { z-index: 50 !important; }
    .athena-chat-panel { z-index: 49 !important; }
    .main-workspace { padding-bottom: calc(96px + var(--sab)) !important; }
    .side-panel { padding-bottom: calc(104px + var(--sab)) !important; }
}

/* (3) Chips de status (Tempo Real / SQL OK / relógio): em telas estreitas
   organiza em 2 colunas e oculta o relógio (redundante com o do topo) para
   não poluir. */
@media (max-width: 480px) {
    .atb-chips {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 4px !important;
        width: 100%;
        margin-left: 0 !important;
    }
    .atb-chip { padding: 4px 8px !important; font-size: 9px !important; justify-content: center; }
    .atb-chip-info { display: none !important; }
}
@media (max-width: 390px) {
    .atb-chip { padding: 3px 6px !important; font-size: 8px !important; gap: 4px !important; }
}

/* (4) Mapa alto demais/vazio, hero com espaço morto e KPIs borrados.
   Altura de mapa fluida; blur mais leve (legível) e sem transform 3D que
   recortava os cards na animação; hero com altura de conteúdo. */
@media (max-width: 768px) {
    .map-container, #tactical-map {
        height: auto !important;
        min-height: clamp(220px, 42vh, 360px) !important;
    }
    .global-kpi-card {
        backdrop-filter: blur(12px) saturate(1.3) !important;
        -webkit-backdrop-filter: blur(12px) saturate(1.3) !important;
        transform-style: flat !important;
        will-change: opacity !important;
    }
    .global-kpi-card:hover { transform: translateY(-4px) !important; }
    .nexus-hero-shell { height: auto !important; min-height: 0 !important; }
    .main-workspace > .nexus-hero-shell { margin-bottom: 18px !important; }
}
@media (max-width: 600px) {
    .global-dashboard { margin-top: 12px !important; }
}

/* (5) Tipografia fluida (clamp) — substitui os tamanhos fixos em px do bloco
   <=430px acima e adiciona um degrau intermediário para iPhones mini/SE/15
   (375-390px). clamp() trava o teto nos valores originais → desktop intacto. */
@media (max-width: 430px) {
    .nexus-hero-title { font-size: clamp(20px, 5vw, 26px) !important; letter-spacing: 3px !important; }
    .asset-id { font-size: clamp(18px, 5vw, 23px) !important; }
    .chart-title-main { font-size: clamp(11px, 2.5vw, 13px) !important; }
}
@media (max-width: 390px) {
    .nexus-hero-title { font-size: clamp(18px, 5.4vw, 22px) !important; letter-spacing: 2px !important; }
    .asset-id { font-size: clamp(16px, 5vw, 19px) !important; }
    .global-kpi-card { padding: 12px !important; }
}

/* (6) Safe-area também para iPad/iPhone Pro Max em retrato (901-1024px). */
@media (max-width: 1024px) and (min-width: 901px) {
    .mobile-header { padding-top: calc(10px + var(--sat)); height: calc(62px + var(--sat)); }
    .main-workspace { padding-top: calc(88px + var(--sat)); padding-bottom: calc(28px + var(--sab)); }
}

/* (7) Alvos de toque >=44px também nos botões internos do chat. */
@media (pointer: coarse) {
    .athena-chat-panel button, .athena-chat-panel .btn { min-height: 44px; min-width: 44px; }
    .athena-chat-panel textarea { min-height: 44px; padding: 12px; }
}

/* (8) Paisagem em celular (altura curta): compacta header/workspace/chat para
   sobrar vertical. Vem por ÚLTIMO → vence o ajuste de padding-bottom acima. */
@media (max-height: 480px) and (orientation: landscape) {
    .mobile-header { height: calc(44px + var(--sat)) !important; padding: 8px 14px !important; }
    .main-workspace { padding-top: calc(52px + var(--sat)) !important; padding-bottom: calc(14px + var(--sab)) !important; }
    .map-container, #tactical-map { min-height: 200px !important; }
    .athena-chat-toggle { bottom: calc(12px + var(--sab)) !important; }
    .athena-chat-panel { height: min(50dvh, 320px) !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   MOBILE v3 (2026-06) — FAIXA 600–900px + ANTI-OVERFLOW DEFINITIVO
   O app troca para o shell mobile (sidebar→drawer) em <=900px, mas vários
   blocos só colapsavam em <=600/<=480 → a faixa 600–900px (navegador
   encurtado ~627px, tablets pequenos, foldables) ficava quebrada: MISSION
   CONTROL em 4 colunas estourava o texto, chips colados à direita deixavam
   vazio à esquerda, e textos longos (SPN/falhas) rolavam na horizontal.
   Aqui alinhamos TUDO ao <=900px e adicionamos rede anti-overflow.
   Tudo em @media → desktop (>900px) permanece 100% intacto.
   ═══════════════════════════════════════════════════════════════════════ */

/* (A) Rede anti-overflow: nenhum container estoura a largura e textos longos
   (SPN, descrições de falha, diagnósticos) quebram em vez de empurrar a tela. */
@media (max-width: 1024px) {
    .mc-root, .mc-banner, .mc-fault-ribbon, .mc-fault-track, .mc-vitals,
    .mc-matrix, .mc-banner-kpis, .telemetry-grid-2026, .cyber-sec-card,
    .cyber-sec-grid, .athena-topbar, .history-chart-panel, .chart-stage,
    .global-dashboard, .main-workspace > section,
    .main-workspace > div:not(.mapa-frota-overlay) {
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box;
    }
    .mc-badge, .mc-fault-code, .mc-fault-desc, .cyber-diag-box,
    .cyber-badge, .cyber-sec-value-safe, .cyber-sec-value-danger,
    .mc-brand-sub {
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
    }
    /* Ribbon de falha (marquee) fica contido, não empurra a página */
    .mc-fault-ribbon { overflow: hidden !important; max-width: 100% !important; }
}

/* (B) Topbar: em <=900 o brand vai para o drawer e os chips ficavam colados
   à direita (justify-content:flex-end + margin-left:auto) com vazio à
   esquerda. Centraliza e ocupa a linha inteira. */
@media (max-width: 900px) {
    .athena-topbar, .athena-topbar--slim {
        flex-wrap: wrap !important;
        justify-content: center !important;
        padding-left: calc(14px + var(--sal)) !important;
        padding-right: calc(14px + var(--sar)) !important;
    }
    .athena-topbar .atb-chips, .athena-topbar--slim .atb-chips {
        margin-left: 0 !important;
        width: 100%;
        justify-content: center !important;
        flex-wrap: wrap !important;
    }
}

/* (C) Hero/mapa: elimina o espaço morto no topo. A regra .nexus-hero-shell
   { height:100% } (home.css ~2031, dentro de @media <=900) fazia o hero
   preencher ~100vh dentro do .main-workspace (flex coluna, min-height:100vh)
   e EMPURRAR todo o conteúdo pra baixo. Aqui o hero vira um banner de altura
   limitada. O max-height é a trava definitiva: limita a altura computada
   mesmo que alguma regra de height vença a cascata. O mapa decorativo
   (#overview-map / .nexus-empty-bg é absolute inset:0) acompanha o banner. */
@media (max-width: 900px) {
    .nexus-hero-shell {
        height: auto !important;
        min-height: 0 !important;
        max-height: clamp(200px, 40vh, 360px) !important;
        flex: 0 0 auto !important;
    }
    .nexus-hero-inner { padding-top: 18px !important; padding-bottom: 18px !important; }
}

/* (D) Grids FLUIDOS — os itens se REORGANIZAM sozinhos conforme a largura.
   auto-fit + minmax(MIN, 1fr): o número de colunas se ajusta continuamente
   (N → ... → 1) sem breakpoint manual, e nada é comprimido abaixo de MIN —
   o que não cabe pula pra próxima linha automaticamente. */
@media (max-width: 900px) {
    .global-dashboard {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
        max-width: 100% !important;
    }
    .telemetry-grid-2026 { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important; }
    .mc-vitals  { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)) !important; }
    .mc-matrix  { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)) !important; }
    .cyber-sec-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important; }
    .edge-command-grid { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important; }
    .esp32-feature-band { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important; }
}

/* (E) Drawer: largura segura (não estoura em telas <320px) e sem rolagem
   horizontal interna (era a barra laranja no rodapé do menu). */
@media (max-width: 900px) {
    .side-panel {
        width: min(86vw, 300px) !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }
    .side-panel * { max-width: 100% !important; }
}

/* ===== css/athena-no-blur.css ===== */
/* ─────────────────────────────────────────────────────────────────────────
   ATHENA · SEM BLUR DE FUNDO  (fix DEFINITIVO do "tela preta")
   ---------------------------------------------------------------------------
   O backdrop-filter (blur de fundo dos cards/painéis/mapa) obrigava a GPU a
   compor camadas pesadas. Em telas grandes / alta resolução / videowall o
   Chrome não conseguia recompor e os cards + o mapa ficavam PRETOS até um
   hover/refresh. Sem o blur, a composição deixa de ser pesada e o app funciona
   em QUALQUER resolução — de um notebook a uma tela de 300".

   Carregado POR ÚLTIMO no App.razor. Usa a especificidade de ID via
   :not(#_athena_no_blur_) (nenhum elemento tem esse id, então casa com todos)
   só para VENCER os vários "backdrop-filter: blur() !important" espalhados nos
   CSS — um seletor comum perderia por especificidade. O visual continua "vidro
   escuro" pelo fundo semitransparente + borda dos cards; só o blur sai.
   ───────────────────────────────────────────────────────────────────────── */
:not(#_athena_no_blur_),
:not(#_athena_no_blur_)::before,
:not(#_athena_no_blur_)::after {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* ===== css/athena-redesign.css ===== */
/* ===== BUILD-TAG: AURORA-3 ===== (marcador p/ confirmar deploy do CSS novo) */

/* Marca ATHENA na topbar (símbolo laranja PNG + nome + tagline), à esquerda,
   na mesma linha dos chips de status (Tempo Real / SQL / clock / BUILD). */
/* A topbar usa justify-content:flex-end (empurra tudo pra direita). margin-right:
   auto na marca absorve o espaço livre e joga a marca pra extrema esquerda,
   deixando os chips de status à direita. */
.athena-topbar .atb-brand { margin-right: auto; cursor: pointer; border-radius: 12px; padding: 4px 8px; margin-left: -8px; transition: background .15s; }
.athena-topbar .atb-brand:hover { background: rgba(255,255,255,.04); }
.athena-topbar .atb-brand:hover .atb-sub { color: var(--ath-orange-3); }
.atb-mark-img {
    height: 30px; width: auto; display: block;
    filter: drop-shadow(0 0 4px rgba(255,90,31,.35));
}
.athena-topbar .atb-sub {
    color: var(--ath-orange-3, #ff9147);
}

/* ============================================================
   SCROLL SUAVE (anti-travamento) — desliga o "scroll anchoring".
   Em páginas com atualização ao vivo (Home/Telemetry/TV/etc.), quando dados
   mudam ACIMA da viewport o navegador reajusta a posição de rolagem e briga
   com o usuário, causando travadas. overflow-anchor:none elimina isso.
   ============================================================ */
.main-workspace,
.ath-home,
.athena-content,
.reg-page,
.diag-shell,
.cad-root,
.ath-m-app,
.tv2-body,
.mapa-side-list,
.vehicle-list-container { overflow-anchor: none !important; }

/* ============================================================
   LOGO ATHENA · TAMANHO CONSISTENTE EM TODAS AS TELAS
   Todos os arquivos de logo são quadrados (radar justo). Aqui forçamos o
   MESMO tamanho de exibição (radar ~36px) no login, topbar, TV, registros,
   diagnóstico, sidebar e menu mobile — !important vence os CSS por-tela.
   ============================================================ */
.atb-mark-img,
.tv2-logo,
.ath-login-card img[alt="ATHENA"],
.reg-mark img,
.diag-brand-mark img,
.brand-logo img,
.mobile-logo-icon img {
    height: 43px !important;   /* +20% sobre 36px */
    width: 43px !important;
    object-fit: contain !important;
    display: block !important;
}
/* Molduras (caixas com borda/gradiente) uniformes ao redor do radar. */
.reg-mark,
.diag-brand-mark,
.brand-logo,
.mobile-logo-icon {
    width: 60px !important;
    height: 60px !important;
    display: grid !important;
    place-items: center !important;
}

/* ============================================================
   ATHENA · Reskin de IDENTIDADE (Redesign 2026 — passo SEGURO)
   ------------------------------------------------------------
   Remapeia os tokens de cor para a nova paleta e aplica as novas fontes
   (Space Grotesk nos títulos, IBM Plex Mono nos números) SOMENTE em elementos
   grandes/de display, onde há folga — baixo risco de overflow.

   NÃO altera layout nem marcação → seguro sem teste ao vivo. O redesign de
   LAYOUT (Aurora: sidebar 300px, gauges, gráficos, glass) precisa ser feito
   COM teste (H:/ambiente), iterando seção por seção. Carregado por ÚLTIMO
   no App.razor. Ver athena-redesign-2026 (memória).
   ============================================================ */

/* ---- Paleta nova (tokens) nos roots do dashboard ---- */
.nexus-system-root,
.mc-root {
    --accent:   #ff5a1f !important;   /* laranja primário */
    --accent-2: #ff7a2e !important;   /* hover / gradiente */
    --success:  #35e07f !important;   /* online / ok */
    --danger:   #ff3b30 !important;   /* falha / crítico */
}

/* ---- Títulos / marca / valores de display → Space Grotesk ---- */
.brand-title,
.fleet-section-title,
.asset-id,
.mc-brand-name,
.mc-brand-eyebrow,
.global-kpi-value,
.reg-title {
    font-family: 'Space Grotesk', 'Inter', system-ui, -apple-system, sans-serif !important;
    letter-spacing: -0.01em;
}

/* ---- Números ao vivo / mono → IBM Plex Mono ----
   (mesma métrica monoespaçada do JetBrains → não desalinha as grids) */
.num-smooth,
.mc-banner-kpi-val,
.mc-vital-value,
.mc-row-val,
.global-kpi-value {
    font-family: 'IBM Plex Mono', 'JetBrains Mono', ui-monospace, monospace !important;
}

/* Hero da Home (ATHENA / BUSINESS INTELLIGENCE CENTER) em Space Grotesk. */
.nexus-hero-title,
.nexus-hero-subtitle {
    font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif !important;
}

/* ============================================================
   OVERVIEW da Home (Aurora) — cards de KPI com anel/gauge.
   Marcação em Home.razor (.ath-ov-*). Mesmos dados, visual novo.
   ============================================================ */
.ath-ov-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 16px;
    width: 100%;
    max-width: 900px;
    margin: 34px auto 0;
}
.ath-ov-card {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 20px 22px;
    background: linear-gradient(160deg, rgba(255,255,255,.055), rgba(255,255,255,.012));
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 18px;
    box-shadow: 0 12px 34px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.05);
    transition: transform .18s ease, border-color .18s ease;
}
.ath-ov-card:hover {
    transform: translateY(-3px);
    border-color: rgba(255,90,31,.38);
}
.ath-ov-ring {
    position: relative;
    width: 74px;
    height: 74px;
    flex-shrink: 0;
    border-radius: 50%;
    background: conic-gradient(var(--c, #ff5a1f) calc(var(--val, 0) * 1%), rgba(255,255,255,.08) 0);
}
.ath-ov-ring > span {
    position: absolute;
    inset: 6px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #0b0b0f;
    color: #fff;
    font-family: 'IBM Plex Mono', 'JetBrains Mono', ui-monospace, monospace;
    font-weight: 700;
    font-size: 24px;
}
.ath-ov-txt { min-width: 0; }
.ath-ov-lbl {
    font-family: 'IBM Plex Mono', 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .16em;
    color: #ff9147;
    text-transform: uppercase;
    margin-bottom: 6px;
}
.ath-ov-sub {
    font-size: 12.5px;
    color: rgba(236,240,244,.6);
}
.light-theme .ath-ov-card { background: linear-gradient(160deg, rgba(0,0,0,.05), rgba(0,0,0,.015)); border-color: rgba(0,0,0,.1); }
.light-theme .ath-ov-ring > span { background: #f4f2ee; color: #17130f; }
.light-theme .ath-ov-sub { color: rgba(20,18,16,.6); }

/* ============================================================
   HOME · AURORA (overview completo, conforme mockup do redesign)
   Marcação em Home.razor (.ath-home / .ath-hero / .ath-kpis / .ath-band / .ath-fleet)
   ============================================================ */
/* Scroll colado na BORDA DIREITA da tela e sem espaço morto: o container de
   rolagem ocupa 100% da largura e o respiro vira padding INTERNO (fica entre o
   conteúdo e a barra), em vez de margem externa que empurrava a barra pra dentro. */
.main-workspace { padding-right: 0 !important; overflow-x: hidden !important; }
.ath-home {
    padding: 4px 14px 30px 4px;
    /* SEM overflow próprio: o scroll fica só no .main-workspace (container único).
       Antes havia scroll aninhado (.main-workspace + .ath-home ambos auto), o que
       em navegadores reais "prendia" a roda no container externo — precisava
       clicar pra rolar. Com um único container, a roda rola automático. */
    overflow: visible;
    width: 100%;
    max-width: none;
    box-sizing: border-box;
}
/* Barra fina e discreta — agora no container único (.main-workspace). */
.main-workspace { min-height: 0; }
.main-workspace::-webkit-scrollbar { width: 10px; }
.main-workspace::-webkit-scrollbar-track { background: rgba(255,255,255,.03); }
.main-workspace::-webkit-scrollbar-thumb { background: rgba(255,90,31,.45); border-radius: 100px; }
.main-workspace::-webkit-scrollbar-thumb:hover { background: rgba(255,90,31,.7); }
/* Grids esticam e preenchem o espaço automaticamente (sem buracos). */
.ath-kpis, .ath-fleet { width: 100%; }
.ath-band, .ath-band2 { width: 100%; }
.ath-hero { width: 100%; box-sizing: border-box; }

/* ── Hero band ── */
.ath-hero {
    position: relative; overflow: hidden; border-radius: 24px;
    border: 1px solid rgba(255,255,255,.08);
    background: linear-gradient(120deg, rgba(255,90,31,.12), rgba(255,255,255,.02) 42%, rgba(52,200,255,.06));
    padding: 26px 30px; margin-bottom: 22px;
}
.ath-hero-glow {
    position: absolute; top: -60%; left: -6%; width: 46%; height: 220%; pointer-events: none;
    background: radial-gradient(ellipse at center, rgba(255,90,31,.28), transparent 62%);
    filter: blur(46px); animation: ath-aurora 15s ease-in-out infinite alternate;
}
.ath-hero-in { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.ath-hero-pill {
    display: inline-flex; align-items: center; gap: 9px; padding: 6px 13px; margin-bottom: 16px;
    border-radius: 100px; border: 1px solid rgba(255,90,31,.4); background: rgba(255,90,31,.06);
    font-family: 'IBM Plex Mono', monospace; font-size: 9.5px; font-weight: 600; letter-spacing: .32em; color: #ff9147;
}
.ath-hero-dot { width: 7px; height: 7px; border-radius: 50%; background: #ff5a1f; box-shadow: 0 0 4px #ff5a1f; animation: ath-blink 1.5s infinite; }
.ath-hero-h1 {
    margin: 0; font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-size: clamp(30px, 3.4vw, 52px); font-weight: 600; letter-spacing: -.03em; color: #f4f2ee; line-height: 1;
}
.ath-hero-p { margin: 12px 0 0; font-size: 14px; color: #a8a49b; max-width: 460px; line-height: 1.5; }
.ath-hero-mets { display: flex; gap: 12px; flex-wrap: wrap; }
.ath-met { text-align: center; padding: 16px 22px; border-radius: 16px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); }
.ath-met-v { font-family: 'IBM Plex Mono', monospace; font-size: 30px; font-weight: 700; color: #f4f2ee; line-height: 1; }
.ath-met-v span { font-size: 15px; }
.ath-met-l { font-family: 'IBM Plex Mono', monospace; font-size: 8px; letter-spacing: .14em; color: #8a877f; margin-top: 8px; }

/* ── 4 KPI cards ── */
.ath-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 16px; margin-bottom: 22px; }
.ath-kpi {
    display: flex; align-items: center; gap: 16px; padding: 20px; border-radius: 20px;
    border: 1px solid rgba(255,255,255,.08);
    background: linear-gradient(160deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
    transition: transform .2s, border-color .2s;
}
.ath-kpi:hover { transform: translateY(-3px); border-color: rgba(255,90,31,.32); }
.ath-kpi--hi {
    flex-direction: column; align-items: flex-start; justify-content: center; gap: 6px;
    border-color: rgba(255,90,31,.25); background: linear-gradient(160deg, rgba(255,90,31,.1), rgba(255,90,31,.02));
}
.ath-kpi-l { font-size: 11px; letter-spacing: .06em; color: #8a877f; }
.ath-kpi-s { font-size: 13px; font-weight: 600; color: #f4f2ee; margin-top: 4px; }
.ath-kpi-big { font-family: 'IBM Plex Mono', monospace; font-size: 34px; font-weight: 700; color: #ff9147; line-height: 1; }
.ath-kpi-big span { font-size: 15px; margin-left: 4px; }
.ath-kpi-mono { font-family: 'IBM Plex Mono', monospace; font-size: 9px; letter-spacing: .08em; color: #8a877f; }

/* ── Banda: mapa + score/disponibilidade ── */
.ath-band { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 16px; margin-bottom: 22px; }
.ath-panel {
    border-radius: 20px; border: 1px solid rgba(255,255,255,.08);
    background: linear-gradient(160deg, rgba(255,255,255,.04), rgba(255,255,255,.008));
    padding: 18px 20px;
}
.ath-panel-h { font-size: 14px; font-weight: 600; color: #f4f2ee; margin-bottom: 14px; }
.ath-panel-sub { font-size: 11px; font-weight: 600; color: #8a877f; margin-bottom: 12px; }
.ath-map { height: 300px; border-radius: 14px; overflow: hidden; background: rgba(255,255,255,.02); }
.ath-score { display: flex; align-items: center; gap: 14px; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,.06); }
.ath-bar-row { margin-bottom: 13px; }
.ath-bar-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; font-size: 11px; font-weight: 600; color: #c7c3ba; }
.ath-bar-n { font-family: 'IBM Plex Mono', monospace; font-size: 10px; color: #8a877f; }
.ath-bar { height: 6px; border-radius: 100px; background: rgba(255,255,255,.06); overflow: hidden; }
.ath-bar-f { height: 100%; border-radius: 100px; }

/* ── Frota ao vivo ── */
.ath-fleet-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; font-size: 14px; font-weight: 600; color: #f4f2ee; }
.ath-fleet-n { font-family: 'IBM Plex Mono', monospace; font-size: 9.5px; color: #6c6a63; }
.ath-fleet { display: grid; grid-template-columns: repeat(auto-fit, minmax(275px, 1fr)); gap: 14px; }
/* ALTURA RESERVADA — 2026-08-04. A carga da frota roda em background, entao o
   grid nasce VAZIO (altura 0) e, segundos depois, recebe ate 12 cartoes de ~132px:
   a pagina crescia centenas de pixels debaixo do cursor de quem ja estava lendo.
   Duas linhas de cartao reservadas cobrem o caso comum sem deixar buraco visivel
   quando a frota e pequena — min-height nao corta nada se vier mais conteudo. */
.ath-fleet { min-height: 278px; }
/* Painel do grafico 24h: mesma historia. O bloco de espera tem ~100px e o grafico
   pronto passa de 230px, entao a linha inteira do .ath-band subia de altura e
   empurrava a banda de baixo (frota, mapa, alertas) quando a consulta terminava. */
.ath-band > .ath-panel:first-child { min-height: 300px; }
/* align-items:start impede que o painel mais alto da banda estique os vizinhos —
   sem isso, qualquer painel que cresce muda a altura de todos ao lado. */
.ath-band, .ath-band2 { align-items: start; }
.ath-fcard {
    text-align: left; padding: 16px; border-radius: 16px; cursor: pointer; color: inherit; font: inherit;
    border: 1px solid rgba(255,255,255,.08);
    background: linear-gradient(160deg, rgba(255,255,255,.035), rgba(255,255,255,.008));
    transition: border-color .2s, transform .2s;
}
.ath-fcard:hover { border-color: rgba(255,90,31,.4); transform: translateY(-2px); }
.ath-fcard-h { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
.ath-fdot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.ath-fid { font-family: 'IBM Plex Mono', monospace; font-size: 13px; font-weight: 600; color: #f4f2ee; }
.ath-fst { font-family: 'IBM Plex Mono', monospace; font-size: 8px; font-weight: 700; letter-spacing: .1em; padding: 3px 8px; border: 1px solid; border-radius: 100px; white-space: nowrap; }
.ath-fsub { font-family: 'IBM Plex Mono', monospace; font-size: 9px; color: #6c6a63; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ath-fmet { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.06); }
.ath-fmet-v { font-family: 'IBM Plex Mono', monospace; font-size: 15px; font-weight: 700; color: #c7c3ba; }
.ath-fmet-l { font-family: 'IBM Plex Mono', monospace; font-size: 7.5px; letter-spacing: .1em; color: #5a584f; margin-top: 2px; }

/* Frota (esquerda) + coluna direita (mapa + alertas) — igual ao mockup */
.ath-band2 { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.ath-side-col { display: flex; flex-direction: column; gap: 16px; }
.ath-side-col .ath-map { height: 250px; }
.ath-chart-wait { padding: 40px 16px; text-align: center; font-size: 12.5px; color: #8a877f; line-height: 1.6; }
.ath-g24-leg { display: flex; align-items: center; gap: 6px; font-family: 'IBM Plex Mono', monospace; font-size: 8.5px; letter-spacing: .1em; color: #c7c3ba; }
.ath-g24-leg i { width: 12px; height: 2px; display: inline-block; }
.ath-g24-axis { display: flex; justify-content: space-between; margin-top: 6px; font-family: 'IBM Plex Mono', monospace; font-size: 8px; color: #6c6a63; }
.ath-g24-scale { font-family: 'IBM Plex Mono', monospace; font-size: 9px; letter-spacing: .08em; color: #8a877f; margin-bottom: 6px; }
/* Gráfico PREENCHE o painel (antes sobrava um vazio enorme embaixo). */
.ath-band > .ath-panel:first-child { display: flex; flex-direction: column; }
.ath-g24-svg { flex: 1 1 auto; width: 100%; min-height: 200px; display: block; }
.ath-band > .ath-panel:first-child .ath-chart-wait { flex: 1 1 auto; display: grid; place-items: center; }
/* CENTRAL DE ALERTAS — ALTURA FIXA — 2026-07-31.
   O painel crescia e encolhia conforme os alertas entravam e saiam: de uma
   linha ("frota nominal") a sete cartoes. E o alerta que mais aparece e o de
   "sem sinal 4G", que PISCA — o caminhao perde e recupera cobertura o tempo
   todo. Cada troca reflowava a coluna inteira e a tela pulava sozinha.
   Mesmo defeito da ficha de acao, que tiramos da telemetria pelo mesmo motivo:
   painel de monitoramento nao pode mudar de tamanho debaixo dos olhos de quem
   monitora.
   Altura fixa + rolagem interna: o conteudo muda, o painel nao. 268px sao ~4
   cartoes; o resto rola. */
.ath-alert-list {
    height: 268px;
    overflow-y: auto;
    overscroll-behavior: contain;   /* rolar ate o fim nao arrasta a pagina */
}
/* Barra de rolagem discreta — a padrao do sistema destoa do painel escuro. */
.ath-alert-list::-webkit-scrollbar { width: 6px; }
.ath-alert-list::-webkit-scrollbar-track { background: transparent; }
.ath-alert-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 3px; }
.ath-alert-list::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.2); }
.ath-alert-list { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.12) transparent; }

.ath-alert { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.06); }
.ath-alert:last-child { border-bottom: 0; }
.ath-alert-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 5px; flex: 0 0 auto; }
.ath-alert-body { min-width: 0; flex: 1; }
.ath-alert-top { display: flex; align-items: center; gap: 8px; font-family: 'IBM Plex Mono', monospace; font-size: 9px; font-weight: 700; letter-spacing: .1em; }
.ath-alert-cam { color: #8a877f; }
.ath-alert-h { color: #6c6a63; font-weight: 400; }
.ath-alert-msg { font-size: 12.5px; color: #d8d4cb; margin-top: 4px; line-height: 1.4; }
/* Estado vazio ocupa a altura toda da lista (em vez de um bloco de 26px no
   topo), para o painel parecer o mesmo com ou sem alertas. */
.ath-alert-ok { height: 100%; display: grid; place-items: center; padding: 10px; text-align: center; font-size: 12.5px; color: #35e07f; }

@media (max-width: 1100px) {
    .ath-band, .ath-band2 { grid-template-columns: 1fr; }
    .ath-map, .ath-side-col .ath-map { height: 240px; }
    /* Em coluna única, 268px de alertas empurram o resto para fora da dobra —
       o painel continua de altura FIXA, só que menor. */
    .ath-alert-list { height: 210px; }
}

/* Tema claro */
.light-theme .ath-hero-h1, .light-theme .ath-kpi-s, .light-theme .ath-panel-h,
.light-theme .ath-fleet-h, .light-theme .ath-fid, .light-theme .ath-met-v { color: #17130f; }
.light-theme .ath-kpi, .light-theme .ath-panel, .light-theme .ath-fcard, .light-theme .ath-met {
    background: linear-gradient(160deg, rgba(0,0,0,.045), rgba(0,0,0,.012)); border-color: rgba(0,0,0,.1);
}

/* ============================================================
   CONTRASTE — o mockup usava backdrop-filter (blur) para "descolar" os
   painéis do fundo. Nós desligamos o blur (fix da tela preta em 4K), então
   compensamos com fundo mais OPACO + borda + sombra, senão tudo some no preto.
   ============================================================ */
/* ============================================================
   PALETA EXATA DO MOCKUP (aprovada pelo Diego).
   O tom "rico" do design vem do backdrop-filter (glass), que estava
   DESLIGADO globalmente por causa da tela preta em 4K. Aqui reativamos
   APENAS nos painéis do redesign — poucos elementos, em vez dos ~149 usos
   antigos — mantendo o risco baixo e o visual fiel.
   ============================================================ */
.main-workspace {
    background: radial-gradient(circle at 60% 0%, #12100f, #08080a 60%, #050506) !important;
}
.ath-kpi, .ath-panel, .ath-fcard, .ath-met {
    background: linear-gradient(160deg, rgba(255,255,255,.045), rgba(255,255,255,.012)) !important;
    border-color: rgba(255,255,255,.09) !important;
    box-shadow: none !important;
}
/* GLASS reativado só aqui (vence o athena-no-blur.css por especificidade). */
.ath-hero:not(#_ath_), .ath-kpi:not(#_ath_), .ath-panel:not(#_ath_),
.ath-fcard:not(#_ath_), .ath-met:not(#_ath_), .side-panel:not(#_ath_) {
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
}
/* Tipografia/tons do mockup */
.ath-kpi-l, .ath-panel-sub, .ath-met-l, .ath-fmet-l, .ath-fsub { color: #8a877f !important; }
.ath-fmet-v { color: #c7c3ba !important; }
.ath-kpi-s, .ath-panel-h, .ath-fleet-h, .ath-fid, .ath-hero-h1, .ath-met-v { color: #f4f2ee !important; }
.ath-hero-p { color: #a8a49b !important; }
.ath-alert-msg { color: #d8d4cb !important; }
.ath-ov-ring > span { background: #0a0908 !important; }
/* Cards do MESMO tamanho (altura uniforme, sem card destoando). */
.ath-kpis { align-items: stretch; }
.ath-kpi { min-height: 108px; box-sizing: border-box; }
/* Colunas ALINHADAS: frota e mapa com a mesma proporção das bandas de cima. */
.ath-band, .ath-band2 { grid-template-columns: minmax(0, 1.62fr) minmax(0, 1fr); }

/* ── SCROLL SUAVE ──────────────────────────────────────────────────────
   O brilho animado (blur 46px) dentro da área rolável repintava a cada frame
   e "arrastava"/borrava o texto no scroll rápido. Congelamos a animação e
   reduzimos o raio do blur — o visual continua, sem o custo por frame. */
.ath-hero-glow { animation: none !important; filter: blur(34px) !important; opacity: .9; }
.ath-home .ath-glow, .ath-home .ath-scanline { animation: none !important; }
/* Texto mais legível (estava apagado demais). */
.ath-kpi-l, .ath-panel-sub, .ath-fmet-l, .ath-fsub, .ath-met-l { color: #c2beb5 !important; }
.ath-fmet-v { color: #efece4 !important; }
.ath-fid, .ath-kpi-s, .ath-panel-h, .ath-fleet-h { color: #ffffff !important; }
.ath-alert-msg { color: #e8e4db !important; }
.ath-hero {
    background: linear-gradient(120deg, rgba(255,90,31,.24), #241f30 46%, rgba(52,200,255,.14)) !important;
    border-color: rgba(255,255,255,.17) !important;
}
/* ============================================================
   MAPA OPERACIONAL — o CSS antigo (home.css:3026) era do tempo em que o
   #overview-map era só o FUNDO decorativo do hero: pinta `background:#060606
   !important` por cima dos tiles e ainda cobre tudo com um véu escuro no
   ::after. Resultado: o Leaflet renderizava, mas ficava PRETO.
   Aqui neutralizamos os dois — especificidade de ID + !important.
   ============================================================ */
#overview-map.ath-map {
    background: transparent !important;
    background-image: none !important;
    pointer-events: auto !important;
    opacity: 1 !important;
}
#overview-map.ath-map::after { content: none !important; display: none !important; }
#overview-map.ath-map .leaflet-container { background: #10100f !important; }
.ath-map { border-radius: 14px; overflow: hidden; }
/* Diagnóstico visível do mapa (ver initOverviewMap em home.js). */
.ath-map-err {
    display: grid; place-items: center; height: 100%; padding: 12px; text-align: center;
    font-family: 'IBM Plex Mono', monospace; font-size: 11px; line-height: 1.5; color: #ff9147;
}
.ath-kpi--hi {
    background: linear-gradient(160deg, rgba(255,90,31,.10), rgba(255,90,31,.02)) !important;
    border-color: rgba(255,90,31,.25) !important;
}
.ath-hero {
    background: linear-gradient(120deg, rgba(255,90,31,.12), rgba(255,255,255,.02) 42%, rgba(52,200,255,.06)) !important;
    border-color: rgba(255,255,255,.08) !important;
}
.side-panel { background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.008)) !important; }
.node-item, .vehicle-btn, .sys-btn {
    background: linear-gradient(160deg, rgba(255,255,255,.04), rgba(255,255,255,.01)) !important;
    border-color: rgba(255,255,255,.08) !important;
}
/* ============================================================
   TELEMETRY EM TELA CHEIA (redesign 2026)
   Com um caminhão selecionado a sidebar some e a telemetria ocupa 100%
   da largura, como no design. Volta pelo botão "← FROTA".
   ============================================================ */
.ath-telemetry-full .side-panel,
.ath-telemetry-full .mobile-overlay-menu { display: none !important; }
.ath-telemetry-full .main-workspace {
    margin-left: 0 !important;
    left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 18px !important;
}
.ath-btn-frota {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.16);
    color: #f4f2ee;
    border-radius: 10px;
    padding: 9px 16px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    cursor: pointer;
    transition: border-color .18s ease, background .18s ease;
}
.ath-btn-frota:hover { border-color: rgba(255,90,31,.6); background: rgba(255,90,31,.10); }

/* ── Telemetry · superfícies Aurora ──────────────────────────────
   Mesmo tom dos painéis da Home (.ath-panel). Aqui reaproveitamos as
   classes que a Telemetry já usa em vez de reescrever o markup. */
/* Tokens tCard/tSoft/tRad portados 1:1 do original (linhas 1587-1590 do
   Athena Redesign.dc.html). O radial laranja no canto superior esquerdo e o
   realce interno são o que davam o "brilho" que faltava. */
.ath-telemetry-full {
    --t-card-bg: linear-gradient(155deg, rgba(255,255,255,.09), rgba(255,255,255,.015) 42%),
                 radial-gradient(130% 110% at 0% 0%, rgba(255,90,31,.11), transparent 46%);
    --t-card-bd: rgba(255,255,255,.13);
    --t-card-sh: 0 1px 0 rgba(255,255,255,.09) inset, 0 34px 70px -34px rgba(0,0,0,.9);
    --t-soft-bg: linear-gradient(155deg, rgba(255,255,255,.05), rgba(255,255,255,.008));
    --t-soft-bd: rgba(255,255,255,.1);
    --t-soft-sh: 0 1px 0 rgba(255,255,255,.05) inset;
    --t-rad: 18px;
    --t-rad-sm: 12px;
}
/* Superfícies de card (tCard). */
.ath-telemetry-full .mc-banner,
.ath-telemetry-full .mc-arcs-panel,
.ath-telemetry-full .mc-matrix,
.ath-telemetry-full .mc-col,
.ath-telemetry-full .ai-panel,
.ath-telemetry-full .history-chart-panel,
.ath-telemetry-full .edge-command-panel,
.ath-telemetry-full .athena-streak-card,
.ath-cockpit {
    background: var(--t-card-bg) !important;
    border: 1px solid var(--t-card-bd) !important;
    box-shadow: var(--t-card-sh) !important;
    border-radius: var(--t-rad) !important;
}
/* Superfícies internas (tSoft): mais discretas, sem o glow laranja. */
.ath-telemetry-full .mc-signal,
.ath-telemetry-full .mc-vital,
.ath-telemetry-full .ath-rad {
    background: var(--t-soft-bg) !important;
    border: 1px solid var(--t-soft-bd) !important;
    box-shadow: var(--t-soft-sh) !important;
    border-radius: var(--t-rad-sm) !important;
}
/* Glass reativado só nestas superfícies (vence o athena-no-blur.css
   pela especificidade de ID falso — ver athena-resize-repaint-preto). */
.ath-telemetry-full .mc-banner:not(#_ath_),
.ath-telemetry-full .mc-arcs-panel:not(#_ath_),
.ath-telemetry-full .mc-matrix:not(#_ath_),
.ath-telemetry-full .mc-col:not(#_ath_),
.ath-telemetry-full .ai-panel:not(#_ath_),
.ath-telemetry-full .history-chart-panel:not(#_ath_),
.ath-telemetry-full .edge-command-panel:not(#_ath_),
.ath-telemetry-full .athena-streak-card:not(#_ath_),
.ath-cockpit:not(#_ath_) {
    backdrop-filter: blur(18px) saturate(1.25) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.25) !important;
}

/* ── LAYOUT portado do original ──────────────────────────────────
   Cada bloco abaixo replica o grid/flex da linha indicada do
   Athena Redesign.dc.html. Sem valores inventados. */

/* L722 — MISSION CONTROL */
.ath-telemetry-full .mc-banner {
    display: grid !important;
    grid-template-columns: auto 1fr auto auto !important;
    gap: 24px !important;
    align-items: center !important;
    padding: 20px 24px !important;
    margin-bottom: 16px !important;
}
.ath-telemetry-full .mc-brand-eyebrow {
    font-family: 'IBM Plex Mono', monospace !important;
    font-size: 9px !important; letter-spacing: .26em !important; color: #ff5a1f !important;
}
.ath-telemetry-full .mc-brand-name {
    font-size: 26px !important; font-weight: 700 !important; letter-spacing: .04em !important;
    color: #f4f2ee !important; line-height: 1.1 !important; margin: 4px 0 !important;
}

/* L739 — STREAK ECO */
.ath-telemetry-full .athena-hero-score-row {
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    gap: 26px !important;
    align-items: center !important;
    border-top: 2px solid #35e07f !important;
    padding: 22px 26px !important;
    margin-bottom: 16px !important;
}

/* L761 — MATRIZ DE 3 COLUNAS */
.ath-telemetry-full .mc-matrix {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 14px !important;
    margin-bottom: 16px !important;
    /* o container é só grade: as superfícies são as .mc-col */
    background: none !important; border: 0 !important; box-shadow: none !important;
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
.ath-telemetry-full .mc-col { padding: 0 !important; }
.ath-telemetry-full .mc-col > :first-child { border-bottom: 1px solid rgba(255,255,255,.08); }
/* Cada coluna tem sua cor de régua, como no original. */
.ath-telemetry-full .mc-col:nth-child(1) > :first-child { border-bottom-color: rgba(255,90,31,.25); color: #ff9147 !important; }
.ath-telemetry-full .mc-col:nth-child(2) > :first-child { border-bottom-color: rgba(52,200,255,.25); color: #34c8ff !important; }
.ath-telemetry-full .mc-col:nth-child(3) > :first-child { border-bottom-color: rgba(53,224,127,.25); color: #35e07f !important; }

/* L767 / L769 — SINAIS J1939 e NOVOS PGNS */
.ath-telemetry-full .mc-signals-band { margin-bottom: 16px !important; padding: 0 !important; }
.ath-telemetry-full .mc-signals-title {
    padding: 12px 16px !important;
    border-bottom: 1px solid rgba(255,255,255,.08) !important;
    font-family: 'IBM Plex Mono', monospace !important;
    font-size: 10px !important; font-weight: 700 !important; letter-spacing: .14em !important;
    color: #f4f2ee !important;
}
.ath-telemetry-full .mc-signals-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 16px !important;
    padding: 18px !important;
}

/* L771 — ATHENA INTELLIGENCE */
.ath-telemetry-full .ai-panel { padding: 0 !important; overflow: hidden !important; margin-bottom: 16px !important; }
.ath-telemetry-full .ai-panel-header {
    display: flex !important; align-items: center !important; gap: 14px !important;
    padding: 18px 20px !important;
    border-bottom: 1px solid rgba(255,255,255,.08) !important;
}
.ath-telemetry-full .ai-panel-icon {
    width: 44px !important; height: 44px !important; flex: 0 0 44px !important;
    border-radius: var(--t-rad-sm) !important;
    display: grid !important; place-items: center !important;
    background: rgba(255,90,31,.1) !important;
    border: 1px solid rgba(255,90,31,.3) !important;
}
.ath-telemetry-full .ai-panel-title { font-size: 16px !important; font-weight: 700 !important; letter-spacing: .02em !important; color: #f4f2ee !important; }
.ath-telemetry-full .ai-panel-sub {
    font-family: 'IBM Plex Mono', monospace !important;
    font-size: 9.5px !important; letter-spacing: .1em !important; color: #8a877f !important; margin-top: 3px !important;
}

/* L781 — PERFORMANCE GLOBAL */
.ath-telemetry-full .mc-arcs-panel { padding: 22px 24px !important; margin-bottom: 16px !important; }
.ath-telemetry-full .mc-arc-item {
    display: flex !important; flex-direction: column !important;
    align-items: center !important; gap: 10px !important;
}
.ath-telemetry-full .mc-arc-gauge { width: 132px !important; height: 132px !important; }
.ath-telemetry-full .mc-arc-val {
    font-family: 'IBM Plex Mono', monospace !important;
    font-size: 28px !important; font-weight: 700 !important; color: #f4f2ee !important; line-height: 1 !important;
}
.ath-telemetry-full .mc-arc-unit {
    font-family: 'IBM Plex Mono', monospace !important;
    font-size: 9px !important; color: #8a877f !important; margin-top: 4px !important;
}
.ath-telemetry-full .mc-arc-label {
    font-family: 'IBM Plex Mono', monospace !important;
    font-size: 10px !important; letter-spacing: .14em !important; color: #9a978f !important;
}

/* L786-792 — RPM HISTÓRICO + seletores */
.ath-telemetry-full .history-chart-panel { padding: 22px 24px !important; margin-bottom: 16px !important; }
.ath-telemetry-full .chart-filter-cell {
    background: var(--t-soft-bg) !important;
    border: 1px solid var(--t-soft-bd) !important;
    box-shadow: var(--t-soft-sh) !important;
    border-radius: var(--t-rad-sm) !important;
    padding: 12px 14px !important;
}
.ath-telemetry-full .ind-dropdown-trigger-label {
    font-family: 'IBM Plex Mono', monospace !important;
    font-size: 8px !important; letter-spacing: .12em !important; color: #6c6a63 !important;
}

/* Tipografia das colunas da matriz e dos sinais J1939 (linhas 761-769). */
.ath-telemetry-full .mc-col-title {
    padding: 12px 16px !important;
    font-family: 'IBM Plex Mono', monospace !important;
    font-size: 10px !important; font-weight: 700 !important; letter-spacing: .14em !important;
}
.ath-telemetry-full .mc-row { padding: 8px 12px !important; }
.ath-telemetry-full .mc-row:hover { background: rgba(255,255,255,.02) !important; }
.ath-telemetry-full .mc-row-lbl { font-size: 11px !important; color: #9a978f !important; }
.ath-telemetry-full .mc-row-val {
    font-family: 'IBM Plex Mono', monospace !important;
    font-size: 13px !important; font-weight: 600 !important;
}
.ath-telemetry-full .mc-signal { padding: 16px !important; }
.ath-telemetry-full .mc-signal-label { font-size: 11px !important; color: #9a978f !important; margin-bottom: 8px !important; }
.ath-telemetry-full .mc-signal-value {
    font-family: 'IBM Plex Mono', monospace !important;
    font-size: 26px !important; font-weight: 700 !important; line-height: 1 !important;
}
.ath-telemetry-full .mc-signal-unit {
    font-family: 'IBM Plex Mono', monospace !important;
    font-size: 8.5px !important; color: #5a584f !important; margin: 8px 0 10px !important;
}
.ath-telemetry-full .mc-signal-bar { height: 4px !important; border-radius: 100px !important; background: rgba(255,255,255,.06) !important; }
.ath-telemetry-full .mc-signal-fill { border-radius: 100px !important; }

/* ── Telemetry · cabeçalho do ativo (redesign 2026 · painel premium) ──
   Card de vidro tintado com acento laranja à esquerda, brilho ember e
   linha de varredura no topo — mais encorpado/bonito que o filete simples. */
.ath-telemetry-full .asset-header-bar {
    position: relative;
    background:
        radial-gradient(120% 140% at 0% 0%, rgba(255,90,31,.10), transparent 46%),
        linear-gradient(135deg, rgba(255,255,255,.05), rgba(255,255,255,.012) 55%) !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    border-left: 3px solid var(--ath-orange, #ff5a1f) !important;
    border-radius: 18px !important;
    box-shadow: 0 22px 55px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.05) !important;
    padding: 22px 26px !important;
    margin: 14px 0 4px !important;
    overflow: hidden;
    align-items: center !important;
}
/* Linha de varredura luminosa no topo do painel. */
.ath-telemetry-full .asset-header-bar::before {
    content: '';
    position: absolute; top: 0; left: 0;
    width: 34%; height: 2px;
    background: linear-gradient(90deg, transparent, rgba(255,90,31,.75), transparent);
    animation: athHdrScan 5.5s linear infinite;
}
@keyframes athHdrScan {
    0%   { transform: translateX(-20%); opacity: 0; }
    18%  { opacity: 1; }
    82%  { opacity: 1; }
    100% { transform: translateX(320%); opacity: 0; }
}
/* .asset-header-bar tem flex-wrap:wrap (home.css) sem media query — em telas
   ~1280-1400px o grupo de botões (.asset-actions) não cabe ao lado do título
   e quebra pra uma linha própria. Sem isso, esse grupo (um único item de flex
   nessa linha) fica colado na ESQUERDA em vez de continuar alinhado à direita.
   margin-left:auto empurra pra direita em ambos os casos (mesma linha ou
   quebrada), sem depender de breakpoint. */
.asset-actions { margin-left: auto; }
.ath-telemetry-full .asset-tag {
    /* align-self evita que o container em coluna estique a pill (stretch). */
    align-self: flex-start;
    display: inline-flex; align-items: center; gap: 8px;
    /* !important pra vencer o `.asset-tag { padding-left:18px !important }` legado
       do home.css (feito p/ um ::before de linha, que aqui virou um ponto). Sem
       isso o padding-left fica 18px e a pill fica assimétrica.
       O left recebe +1.6px pra compensar o trailing do letter-spacing no fim do
       texto (deixa o conteúdo opticamente centrado entre ponto e borda). */
    padding: 6px 12px 6px 14px !important;
    border: 1px solid rgba(255,90,31,.4); border-radius: 100px;
    background: rgba(255,90,31,.06);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 8.5px; letter-spacing: .18em; text-transform: uppercase;
    color: #ff9147; white-space: nowrap;
    line-height: 1;
}
.ath-telemetry-full .asset-tag::before {
    content: ''; width: 6px; height: 6px; border-radius: 50%;
    /* neutraliza o ::before legado (position:absolute; linha 12x1) do home.css */
    position: static !important; inset: auto !important; transform: none !important;
    flex: 0 0 auto;
    background: #ff5a1f; box-shadow: 0 0 3px #ff5a1f;
    animation: ath-blink 1.6s infinite;
}
@keyframes ath-blink { 0%,100% { opacity: 1 } 50% { opacity: .35 } }
.ath-telemetry-full .asset-id {
    font-size: 40px !important; font-weight: 700 !important;
    letter-spacing: -.03em !important; line-height: .95 !important;
    color: #f4f2ee !important; margin: 14px 0 0 !important;
}
.ath-telemetry-full .asset-meta {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px; color: #8a877f; margin-top: 12px;
}
.ath-telemetry-full .asset-meta-sep {
    width: 3px; height: 3px; border-radius: 50%; background: #4a4843; flex: 0 0 auto;
}
.ath-telemetry-full .asset-meta-data { color: #6c6a63; }
/* EXCLUIR é destrutivo: borda/texto avermelhados, como no design. */
.ath-telemetry-full .btn-delete-stealth {
    border: 1px solid rgba(255,59,48,.4) !important;
    color: #ff6b60 !important;
    background: transparent !important;
}
.ath-telemetry-full .btn-delete-stealth:hover { background: rgba(255,59,48,.1) !important; }
/* Mapa na altura do design. */
.ath-telemetry-full .map-container { height: 360px !important; flex: 0 0 360px !important; }
/* Mission Control entra no tom Aurora (estava no azul-marinho antigo). */
.ath-telemetry-full .mc-banner {
    background: linear-gradient(160deg, rgba(255,255,255,.045), rgba(255,255,255,.012)) !important;
    border: 1px solid rgba(255,255,255,.09) !important;
    box-shadow: none !important;
    border-radius: 16px !important;
}
/* PDF é a ação primária no mockup: laranja sólido. */
.ath-telemetry-full .btn-report-stealth {
    background: #ff5a1f !important; border: 0 !important; color: #080808 !important;
    font-weight: 700 !important;
}
.ath-telemetry-full .btn-report-stealth:hover { background: #ff7a2e !important; }

/* ── Telemetry · COCKPIT DIGITAL ─────────────────────────────── */
.ath-cockpit {
    /* O pai é flex-column com height:100%; sem flex-shrink:0 o cockpit era
       espremido e o overflow:hidden (das auras) cortava gauges e gráfico. */
    flex: 0 0 auto;
    position: relative; overflow: hidden;
    padding: 26px 28px;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 20px;
    background: linear-gradient(160deg, rgba(255,255,255,.045), rgba(255,255,255,.012));
}
.ath-cockpit::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, #ff5a1f, rgba(255,90,31,0));
}
/* Auras laterais que dão o brilho do mockup atrás dos ponteiros. */
.ath-cockpit-glow {
    position: absolute; top: -50%; width: 34%; height: 200%;
    filter: blur(54px); pointer-events: none;
}
.ath-cockpit-glow-l { left: 8%; background: radial-gradient(ellipse at center, rgba(255,90,31,.12), transparent 60%); }
.ath-cockpit-glow-r { right: 8%; background: radial-gradient(ellipse at center, rgba(52,200,255,.09), transparent 60%); }
.ath-cockpit-head { position: relative; display: flex; align-items: center; gap: 10px; margin-bottom: 22px; }
.ath-cockpit-bar { width: 4px; height: 16px; background: #ff5a1f; }
.ath-cockpit-title {
    font-family: 'IBM Plex Mono', monospace; font-size: 11px; font-weight: 700;
    letter-spacing: .18em; color: #f4f2ee; flex: 1;
}
.ath-cockpit-status {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 5px 11px; border: 1px solid; border-radius: 100px;
    font-family: 'IBM Plex Mono', monospace; font-size: 9px; font-weight: 700; letter-spacing: .1em;
}
/* ── COCKPIT FLUIDO — 2026-08-04 ────────────────────────────────────────────
   Antes: colunas `230px minmax(0,1fr) 230px` com o ponteiro em 230px FIXOS.
   Essa mistura de px fixo com coluna fluida foi a origem dos DOIS defeitos de
   layout que apareceram aqui: primeiro os ponteiros nas bordas opostas com um
   vazio no meio, depois — na minha tentativa de conserto — o gráfico encolhido
   a 484px com um vazio à esquerda. Toda vez eu mexia no breakpoint em vez de
   atacar a causa.
   Agora o tamanho é RESOLVIDO SOZINHO:
     • as colunas dos ponteiros pedem entre 150px e 230px (clamp pelo minmax);
     • a do meio fica com o que sobra e nunca menos de 300px;
     • o ponteiro ocupa 100% da coluna que recebeu, com aspect-ratio 1 para
       continuar redondo, e o SVG escala pelo viewBox — sem altura fixa.
   Resultado: entre ~1000px e telas largas o cockpit se ajusta sem NENHUMA
   media query. Sobra um único breakpoint, mais abaixo, e ele existe para uma
   mudança de ESTRUTURA (gráfico sai do meio e vai para baixo), não para
   corrigir tamanho — que é o uso legítimo de breakpoint. */
.ath-cockpit-grid {
    position: relative; display: grid;
    grid-template-columns: minmax(150px, 230px) minmax(300px, 1fr) minmax(150px, 230px);
    gap: 24px; align-items: center;
}
.ath-cockpit-gauge {
    position: relative;
    width: 100%; max-width: 230px; aspect-ratio: 1 / 1;
    justify-self: center;
}
/* height:auto + viewBox = o SVG acompanha a largura da coluna. A altura fixa de
   230px que existia aqui era o que impedia o ponteiro de encolher. */
.ath-gauge-svg { width: 100%; height: auto; display: block; }
/* Arco/ponteiro são animados QUADRO A QUADRO por athena-cockpit-gauge.js
   (interpolação com inércia → número conta de 1 em 1 e ponteiro varre junto).
   Por isso NÃO usar transition CSS aqui: ela brigaria com o update por frame,
   causando arrasto. Só o glow permanece via filter. */
.ath-gauge-val { filter: drop-shadow(0 0 4px rgba(255,90,31,.55)); }
.ath-gauge-val-cyan { filter: drop-shadow(0 0 4px rgba(52,200,255,.55)); }
/* Ponteiro: girado por transform. transform-box:view-box faz o transform-origin
   usar as coords do viewBox (centro do gauge = 100,100). */
.ath-gauge-needle {
    transform-box: view-box;
    transform-origin: 100px 100px;
}
.ath-gauge-tip { filter: drop-shadow(0 0 3px #ff5a1f); }
.ath-gauge-tip-cyan { filter: drop-shadow(0 0 3px #34c8ff); }
.ath-gauge-tip-cyan { filter: drop-shadow(0 0 3px #34c8ff); }
.ath-gauge-center { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; text-align: center; }
/* O número acompanha o ponteiro — 2026-08-04. Com 40px fixos, um ponteiro que
   encolheu para 150px ficava com o número transbordando o anel. O clamp mantém a
   proporção sem media query: nunca menor que 26px (legível de longe, que é o uso
   no galpão) nem maior que os 40px do desenho original. */
.ath-gauge-num { font-family: 'IBM Plex Mono', monospace; font-size: clamp(26px, 2.2vw, 40px); font-weight: 700; color: #f4f2ee; line-height: 1; }
.ath-gauge-lbl { font-family: 'IBM Plex Mono', monospace; font-size: 8.5px; letter-spacing: .16em; color: #8a877f; margin-top: 7px; }
.ath-cockpit-mid { min-width: 0; }
.ath-cockpit-legend { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.ath-cockpit-eyebrow { font-family: 'IBM Plex Mono', monospace; font-size: 9.5px; letter-spacing: .14em; color: #8a877f; }
.ath-cockpit-keys { display: flex; gap: 14px; }
.ath-cockpit-keys span {
    display: flex; align-items: center; gap: 6px;
    font-family: 'IBM Plex Mono', monospace; font-size: 8.5px; color: #c7c3ba;
}
.ath-cockpit-keys i { width: 12px; height: 2px; display: inline-block; }
.ath-cockpit-wave { width: 100%; height: 132px; display: block; }
.ath-cockpit-cells {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin-top: 14px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.06); border-radius: 12px; overflow: hidden;
}
.ath-cockpit-cells > div { background: #0b0b0d; padding: 12px 14px; text-align: center; }
.ath-cc-num { font-family: 'IBM Plex Mono', monospace; font-size: 22px; font-weight: 700; line-height: 1; }
.ath-cc-num span { font-size: 11px; }
.ath-cc-lbl { font-family: 'IBM Plex Mono', monospace; font-size: 8px; letter-spacing: .1em; color: #6c6a63; margin-top: 6px; }
/* Radiais do cockpit (TEMP MOTOR / PRESSÃO ÓLEO / TURBO / CARGA). */
.ath-cockpit-rads {
    position: relative; display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 12px; margin-top: 18px;
}
.ath-rad {
    display: flex; align-items: center; gap: 14px; padding: 14px 16px;
    background: rgba(255,255,255,.025);
    border: 1px solid rgba(255,255,255,.07); border-radius: 12px;
}
/* Anel = conic-gradient; o miolo escuro vira o "furo" da rosca. */
.ath-rad-ring {
    width: 48px; height: 48px; flex: 0 0 48px;
    border-radius: 50%; display: grid; place-items: center;
}
.ath-rad-num {
    width: 38px; height: 38px; border-radius: 50%;
    background: #0b0b0d; display: grid; place-items: center;
    font-family: 'IBM Plex Mono', monospace; font-size: 12px; font-weight: 700;
}
.ath-rad-lbl { font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: .08em; color: #c7c3ba; }
.ath-rad-uni { font-family: 'IBM Plex Mono', monospace; font-size: 9px; color: #6c6a63; margin-top: 4px; }
@media (max-width: 1100px) { .ath-cockpit-rads { grid-template-columns: repeat(2, 1fr); } }

/* ÚNICO BREAKPOINT DO COCKPIT, e ele muda ESTRUTURA, não tamanho.
   Acima de 1000px o grid fluido acima resolve tudo sozinho. Abaixo, as três
   colunas somadas (150 + 300 + 150 + gaps) já não caberiam, então o gráfico sai
   do meio e vai para baixo, com os dois ponteiros encostando no centro.
   O grid continua com a LARGURA TOTAL (1fr 1fr) — foi encurtar a trilha que fez
   o gráfico do meio (grid-column: 1 / -1) encolher junto na tentativa anterior. */
@media (max-width: 1000px) {
    .ath-cockpit-grid { grid-template-columns: 1fr 1fr; }
    .ath-cockpit-mid { grid-column: 1 / -1; order: 3; }
    /* nth-child, e não :first/:last-of-type: os três filhos são <div>, então
       "of-type" casaria todos. A ordem no DOM é ponteiro, gráfico, ponteiro. */
    .ath-cockpit-grid > :nth-child(1) { justify-self: end; }
    .ath-cockpit-grid > :nth-child(3) { justify-self: start; }
}
/* Em celular os dois ponteiros lado a lado ficariam pequenos demais para ler o
   número no centro: empilham, cada um centralizado. */
@media (max-width: 560px) {
    .ath-cockpit-grid { grid-template-columns: 1fr; }
    .ath-cockpit-grid > :nth-child(1),
    .ath-cockpit-grid > :nth-child(3) { justify-self: center; }
}

/* Rodapé da sidebar lado a lado, como no mockup. */
.system-actions { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
.ath-panel-sub, .ath-kpi-l { color: #b3afa6; }
.ath-hero-p { color: #bdb9b0 !important; }
.ath-ov-ring > span { background: #1c1b25 !important; }
/* Sidebar acompanha a mesma elevação. */
.side-panel { background: linear-gradient(180deg, #1c1a24, #141319) !important; }
.node-item, .vehicle-btn, .sys-btn {
    background: linear-gradient(160deg, #262433, #1c1b25) !important;
    border-color: rgba(255,255,255,.15) !important;
}

/* ============================================================
   SIDEBAR · AURORA (glass translúcido, nós arredondados, pills)
   ============================================================ */
.side-panel {
    background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.014)) !important;
    border-right: 1px solid rgba(255,255,255,.10) !important;
}
.brand-header { border-bottom: 1px solid rgba(255,255,255,.08) !important; }
.brand-title { letter-spacing: .22em; }
.search-input, .nexus-input {
    border-radius: 12px !important;
    background: rgba(255,255,255,.045) !important;
    border: 1px solid rgba(255,255,255,.11) !important;
}
.search-input:focus, .nexus-input:focus { border-color: rgba(255,90,31,.55) !important; }
.fleet-section-title { letter-spacing: .2em; color: #8a877f !important; }
.node-item {
    border-radius: 12px !important;
    background: linear-gradient(160deg, rgba(255,255,255,.055), rgba(255,255,255,.016)) !important;
    border: 1px solid rgba(255,255,255,.09) !important;
    transition: border-color .18s ease, transform .18s ease;
}
.node-item:hover { border-color: rgba(255,90,31,.42) !important; transform: translateX(2px); }
.node-count-pill {
    border-radius: 100px !important;
    font-family: 'IBM Plex Mono', 'JetBrains Mono', monospace !important;
    font-size: 10px !important;
}
.vehicle-btn {
    border-radius: 12px !important;
    background: linear-gradient(160deg, rgba(255,255,255,.05), rgba(255,255,255,.014)) !important;
    border: 1px solid rgba(255,255,255,.08) !important;
}
.vehicle-btn:hover { border-color: rgba(255,90,31,.42) !important; }
.sys-btn {
    border-radius: 12px !important;
    background: linear-gradient(160deg, rgba(255,255,255,.055), rgba(255,255,255,.016)) !important;
    border: 1px solid rgba(255,255,255,.11) !important;
}
.sys-btn:hover { border-color: rgba(255,90,31,.48) !important; }

/* ============================================================
   ÍCONES — Heroicons v2 outline, padronizados em LARANJA.
   Todos os SVGs de UI recebem class="hero-ic" e usam stroke=currentColor;
   aqui a cor vira o laranja da paleta. Contextos com estado próprio
   (abas mobile) herdam a cor do container (ativa=laranja, inativa=cinza).
   ============================================================ */
.hero-ic { color: var(--ath-orange-3); }
.ath-tab .hero-ic { color: inherit; }

/* Barra de ações do ativo — padronizada: fundo preto, ícone laranja, texto
   branco. Só EXCLUIR com texto + ícone vermelho. */
.asset-actions .ath-btn-frota,
.asset-actions .btn-report-stealth,
.asset-actions .btn-edit-stealth,
.asset-actions .btn-delete-stealth,
.ath-telemetry-full .asset-actions button {
    background: #0d0d10 !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    color: #fff !important;
    border-radius: 10px !important;
    font-family: 'IBM Plex Mono', monospace !important;
    font-weight: 700 !important;
    display: inline-flex !important; align-items: center !important; gap: 8px !important;
}
.asset-actions button .hero-ic { color: var(--ath-orange-3) !important; }
.asset-actions .ath-btn-frota:hover,
.asset-actions .btn-report-stealth:hover,
.asset-actions .btn-edit-stealth:hover {
    background: #15151a !important; border-color: rgba(255,90,31,.5) !important; color: #fff !important;
}
.asset-actions .btn-delete-stealth,
.ath-telemetry-full .asset-actions .btn-delete-stealth {
    color: #ff6b60 !important; border-color: rgba(255,59,48,.35) !important;
}
.asset-actions .btn-delete-stealth .hero-ic { color: #ff6b60 !important; }
.asset-actions .btn-delete-stealth:hover { background: rgba(255,59,48,.1) !important; color: #ff6b60 !important; }

/* Botão flutuante ATHENA: fundo laranja → ícone branco (laranja sumiria). */
.athena-chat-toggle .hero-ic { color: #fff !important; }
.athena-chat-toggle-ic { display: inline-flex; align-items: center; }

/* sys-btn (OPÇÕES / SAIR): ícone + texto alinhados. */
.sys-btn { display: inline-flex !important; align-items: center; gap: 8px; }

/* ═══ Relatório PDF do Telemetry — impressão (isola só a folha A4) ═══
   Do pacote design_handoff_telemetry_update / RelatorioTelemetria.razor. */
@media print {
  /* ── FIX 2026-07 (PDF saia SO com a capa e SEM o design) ──────────────────
     Duas causas, ambas corrigidas aqui:

     1) SEM O DESIGN: por padrao o navegador NAO imprime cores de fundo nem
        imagens de fundo (economia de tinta). O relatorio perdia o laranja, os
        fundos e as barras — virava texto cinza. print-color-adjust:exact manda
        imprimir exatamente como na tela.

     2) SO A CAPA: o modal de pre-visualizacao e position:fixed;inset:0, ou seja,
        RECORTA o conteudo na altura da tela. O truque de visibility mantem o
        relatorio dentro desse recorte, entao tudo abaixo da primeira tela era
        cortado. Aqui neutralizamos altura/recorte/posicionamento de TODOS os
        ancestrais (o !important vence o style inline do modal). */
  * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }

  html, body {
    height: auto !important; max-height: none !important;
    overflow: visible !important; background: #fff !important;
  }
  /* Qualquer ancestral do relatorio deixa de recortar/fixar altura. */
  body :has(#ath-report-sheet) {
    position: static !important;
    overflow: visible !important;
    height: auto !important; max-height: none !important;
    inset: auto !important;
    background: #fff !important;
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
    display: block !important;
    padding: 0 !important; margin: 0 !important; border: 0 !important;
  }

  body * { visibility: hidden !important; }
  #ath-report-sheet, #ath-report-sheet * { visibility: visible !important; }
  #ath-report-sheet {
    position: static !important;
    width: 100% !important; min-width: 0 !important; margin: 0 !important;
    box-shadow: none !important;
  }
  /* ── FIX 2026-07-29 (design cortado e quebras de pagina erradas) ──────────
     Sintomas no PDF entregue: os rotulos "Carga media motor / Carga media CAN /
     Tensao media" ficavam numa pagina e os VALORES na seguinte; a legenda
     "Inicio / Parada / Fim" do mapa aparecia orfa no rodape; a tabela de falhas
     quebrava no meio de uma linha.

     Causa principal: os cartoes usam overflow:hidden (para o border-radius).
     Um bloco com overflow:hidden que ATRAVESSA a quebra de pagina nao e
     fragmentado pelo navegador — ele e RECORTADO. Dai o "design cortado".
     Causa secundaria: nada declarava que celula/linha/cartao sao indivisiveis,
     entao a paginacao cortava onde calhasse.

     Estrategia:
       .ath-rep-keep  bloco e uma unidade visual -> nunca parte
       .ath-rep-box   bloco alto demais p/ caber inteiro -> pode partir ENTRE
                      linhas, mas libera o overflow p/ nao recortar
       .ath-rep-cell  linha de tabela -> indivisivel
       .ath-rep-h     cabecalho -> nunca fica sozinho no fim da pagina         */

  #ath-report-sheet svg, #ath-report-sheet img { break-inside: avoid; page-break-inside: avoid; }

  #ath-report-sheet .ath-rep-keep,
  #ath-report-sheet .ath-rep-cell {
    break-inside: avoid !important;
    page-break-inside: avoid !important;
  }
  /* O recorte so existe para arredondar o canto na TELA; na impressao ele
     custaria conteudo perdido. */
  #ath-report-sheet .ath-rep-box { overflow: visible !important; }

  #ath-report-sheet .ath-rep-h {
    break-after: avoid !important;
    page-break-after: avoid !important;
  }

  /* Viuvas/orfas de texto corrido. */
  #ath-report-sheet p, #ath-report-sheet div { orphans: 3; widows: 3; }

  .ath-cover { break-after: page; page-break-after: always; }
  .ath-body { padding: 14mm !important; }

  /* A capa e full-bleed (fundo escuro ate a borda do papel), entao margem 0.
     As paginas de CONTEUDO ganham respiro vertical — sem isso, so a primeira e
     a ultima pagina tinham espaco, e as do meio encostavam na borda. */
  @page { size: A4; margin: 12mm 0; }
  @page :first { margin: 0; }
}

/* ===== css/athena-telemetry-2026.css ===== */
/* ============================================================
   ATHENA · TELEMETRY (redesign 2026) — reskin visual de TelemetryGrid.razor
   Direção AURORA (cantos arredondados), fiel a
   implementation/reference/Athena Redesign.dc.html (seção Telemetry).
   Reaproveita os tokens de css/athena-theme.css (--ath-*). Carregado por
   último no App.razor: sobrepõe telemetry-grid.css / athena-redesign.css
   sem tocar em marcação/lógica (@code intocado).
   ============================================================ */

.mc-root { font-family: var(--ath-sans); }
.mc-root .ath-mono, .mc-root [class*="mono"] { font-family: var(--ath-mono); }

/* Ícones Heroicons dos seletores/dropdowns do gráfico → laranja da paleta. */
.mc-root .ind-dropdown-leadicon,
.mc-root .ind-dropdown-caret,
.mc-root .ind-dropdown-item-check,
.mc-root .ind-dropdown-search svg { color: var(--ath-orange-3); }

/* ---------- MISSION CONTROL BANNER ---------- */
.mc-root .mc-banner {
  display: grid; grid-template-columns: auto 1fr auto auto; gap: 24px; align-items: center;
  background: var(--ath-bg-2); border: 1px solid var(--ath-line); border-radius: var(--ath-r-lg);
  padding: 20px 24px; margin-bottom: 16px; border-left: 3px solid var(--ath-green);
}
.mc-root .mc-banner.danger { border-left-color: var(--ath-red); }
.mc-root .mc-brand-eyebrow { font-family: var(--ath-mono); font-size: 9px; letter-spacing: .26em; color: var(--ath-orange); }
.mc-root .mc-brand-name { font-size: 26px; font-weight: 700; letter-spacing: .04em; color: var(--ath-text); line-height: 1.1; margin: 4px 0; }
.mc-root .mc-brand-sub { font-family: var(--ath-mono); font-size: 10px; color: var(--ath-muted); }
.mc-root .mc-badges { display: flex; flex-wrap: wrap; gap: 7px; }
.mc-root .mc-badge {
  font-family: var(--ath-mono); font-size: 9px; font-weight: 600; letter-spacing: .08em;
  padding: 5px 9px; border: 1px solid var(--ath-line-2); border-radius: var(--ath-r-md); color: var(--ath-text-2);
}
.mc-root .mc-badge.on { color: var(--ath-green); border-color: rgba(53,224,127,.35); }
.mc-root .mc-badge.off { color: var(--ath-red); border-color: rgba(255,59,48,.35); }
.mc-root .mc-badge.warn { color: var(--ath-yellow); border-color: rgba(255,210,63,.35); }
.mc-root .mc-badge.gps, .mc-root .mc-badge.lte { color: var(--ath-cyan); border-color: rgba(52,200,255,.3); }
.mc-root .mc-banner-kpis { display: flex; gap: 20px; padding: 0 20px; border-left: 1px solid var(--ath-line-2); border-right: 1px solid var(--ath-line-2); }
.mc-root .mc-banner-kpi { text-align: center; }
.mc-root .mc-banner-kpi-val { font-family: var(--ath-mono); font-size: 30px; font-weight: 700; line-height: 1; }
.mc-root .mc-banner-kpi-lbl { font-family: var(--ath-mono); font-size: 8px; letter-spacing: .14em; color: var(--ath-dim); margin-top: 5px; }
.mc-root .mc-score-ring { position: relative; width: 80px; height: 80px; }
.mc-root .mc-score-ring svg { width: 80px; height: 80px; transform: rotate(-90deg); }
.mc-root .mc-score-bg { fill: none; stroke: rgba(255,255,255,.06); stroke-width: 7; }
.mc-root .mc-score-arc { fill: none; stroke-width: 7; stroke-linecap: round; transition: stroke-dashoffset .8s cubic-bezier(.16,1,.3,1); }
/* flex-column centralizado: agrupa "100" + "SCORE" no centro exato do anel
   (grid place-items deixava o bloco colado no topo). */
.mc-root .mc-score-center { position: absolute; inset: 7px; border-radius: 50%; background: #0b0b0d; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; line-height: 1; }
.mc-root .mc-score-val { font-family: var(--ath-mono); font-size: 24px; font-weight: 700; line-height: 1; }
.mc-root .mc-score-lbl { font-family: var(--ath-mono); font-size: 7px; letter-spacing: .14em; color: var(--ath-dim); margin-top: 2px; }

/* ---------- STREAK / HERO SCORE ----------
   .athena-hero-score-row é o card externo (altura fixa 168px, borda superior
   verde). Dentro dele, .athena-streak-card é uma caixa (fundo/borda vêm de
   athena-redesign.css) que estava com padding:0 → título colado na borda.
   Damos respiro interno e altura auto pra não brigar com o card externo. */
.mc-root .athena-streak-card {
  padding: 16px 20px;
  gap: 20px;
  align-content: center;
}
.mc-root .athena-streak-card-title { color: var(--ath-green); }

/* ---- Driver score + Streak (cópia fiel dc.html 739-753) ---- */
/* EXATO do implementation (dc.html 743): anel · conteúdo(1fr) · medalhas na
   borda direita; a barra preenche todo o meio. Card ocupa a largura toda. */
.athena-hero-score-row.hs-ref { display: grid !important; grid-template-columns: auto 1fr auto !important; gap: 26px !important; align-items: center !important; padding: 22px 26px !important; height: auto !important; min-height: 0 !important; overflow: visible !important; border-radius: 16px !important; }
/* A borda verde do topo vem do border-top (que curva nos cantos). O ::before
   era uma 2ª linha verde reta (left:0/right:0) que, sem overflow:hidden,
   ultrapassava os cantos arredondados (o "dente" verde). Desligado. */
.athena-hero-score-row.hs-ref::before { display: none !important; }
.hs-ref .hs-mid { min-width: 0; }
.hs-ring { position: relative; width: 120px; height: 120px; flex: 0 0 auto; }
.hs-ring svg { width: 120px; height: 120px; display: block; }
/* Sem brilho/neon — segue o padrão limpo dos anéis de performance (.mc-arc-fill,
   que não têm filtro). */
.hs-ring-arc { filter: none !important; transition: stroke-dashoffset .8s cubic-bezier(.16,1,.3,1); }
/* Bloco único centralizado (score+label+tier empilhados no centro do anel).
   flex-column evita que virem 3 linhas de grid espalhadas na vertical. */
.hs-ring-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; line-height: 1; }
.hs-ring-score { font-family: var(--ath-mono); font-size: 28px; font-weight: 700; color: #35e07f; line-height: 1; text-shadow: none !important; }
.hs-ring-lbl { font-family: var(--ath-mono); font-size: 7px; letter-spacing: .12em; color: #8a877f; margin-top: 6px; }
.hs-ring-tier { font-family: var(--ath-mono); font-size: 7px; font-weight: 700; letter-spacing: .12em; color: #35e07f; margin-top: 3px; }
.hs-mid { min-width: 0; }
.hs-title { font-family: var(--ath-mono); font-size: 11px; font-weight: 700; letter-spacing: .18em; color: #35e07f; margin-bottom: 12px; }
.hs-days { display: inline-flex; align-items: center; gap: 10px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07); border-radius: 12px; padding: 12px 16px; margin-bottom: 10px; }
.hs-days-n { font-family: var(--ath-mono); font-size: 20px; font-weight: 700; color: #ff9147; }
.hs-days-l { font-size: 13px; font-weight: 600; color: #f4f2ee; }
.hs-bar { height: 8px; border-radius: 100px; background: rgba(255,255,255,.06); overflow: hidden; }
.hs-bar-fill { height: 100%; background: linear-gradient(90deg,#ff8a32,#ffd23f); border-radius: 100px; transition: width .8s cubic-bezier(.16,1,.3,1); }
.hs-next { font-size: 11px; color: #8a877f; margin-top: 8px; }
.hs-medals { display: flex; gap: 8px; flex: 0 0 auto; }
.hs-medal { width: 64px; height: 72px; border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.02); }
.hs-medal-ic { font-size: 20px; filter: grayscale(1) opacity(.4); }
.hs-medal-d { font-family: var(--ath-mono); font-size: 7.5px; font-weight: 700; letter-spacing: .02em; color: #6c6a63; }
.hs-medal.on { border-color: rgba(255,145,71,.5); background: rgba(255,145,71,.08); }
.hs-medal.on .hs-medal-ic { filter: none; }
.hs-medal.on .hs-medal-d { color: #ffd23f; }
@media (max-width: 1100px) {
  .athena-hero-score-row.hs-ref { grid-template-columns: auto 1fr !important; }
  .hs-medals { grid-column: 1 / -1; justify-content: center; }
}
/* Medalhas (tiers) — melhor proporção: um pouco mais baixas/largas que o
   56×88 default, alinhadas ao mockup (~58×72). */
.mc-root .athena-streak-badge {
  width: 56px;
  height: 74px;
  border-radius: 12px;
  gap: 6px;
}
.mc-root .athena-streak-badges { gap: 8px; }

/* ---------- FAULT RIBBON ---------- */
.mc-root .mc-fault-ribbon {
  display: flex; gap: 10px; overflow: hidden; background: rgba(255,59,48,.06);
  border: 1px solid rgba(255,59,48,.3); border-radius: var(--ath-r-md); padding: 10px 12px; margin-bottom: 16px;
}
.mc-root .mc-fault-ribbon.nominal { background: rgba(53,224,127,.05); border-color: rgba(53,224,127,.25); }
.mc-root .mc-fault-chip { flex: 0 0 auto; display: flex; flex-direction: column; gap: 3px; padding: 6px 14px; border-left: 2px solid var(--ath-red); }
.mc-root .mc-fault-chip.nominal { border-left-color: var(--ath-green); }
.mc-root .mc-fault-code { font-family: var(--ath-mono); font-size: 11px; font-weight: 700; color: #ff6b60; }
.mc-root .mc-fault-desc { font-size: 10px; color: var(--ath-text-2); }
/* Marquee: rola continuamente da direita p/ a esquerda. O track é um único
   filho inline-flex que anda de 0 a -50% (metade = 1 grupo → loop sem emenda).
   Pausa ao passar o mouse. */
.mc-root .mc-fault-ribbon.marquee { overflow: hidden; }
.mc-root .mc-fault-ribbon.marquee .mc-fault-track {
  display: inline-flex; flex: 0 0 auto; flex-wrap: nowrap; gap: 0; align-items: stretch;
  white-space: nowrap; animation: athenaFaultMarquee 32s linear infinite; will-change: transform;
}
.mc-root .mc-fault-ribbon.marquee .mc-fault-chip { margin-right: 10px; }
.mc-root .mc-fault-ribbon.marquee:hover .mc-fault-track { animation-play-state: paused; }
@keyframes athenaFaultMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- MATRIX (3 colunas) ---------- */
.mc-root .mc-matrix, .mc-root .mc-matrix-gas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 16px; }
.mc-root .mc-col, .mc-root .mc-col-gas {
  background: var(--ath-bg-2); border: 1px solid var(--ath-line); border-radius: var(--ath-r-lg); overflow: hidden;
}
.mc-root .mc-col-title {
  padding: 12px 16px; border-bottom: 1px solid rgba(255,90,31,.25);
  font-family: var(--ath-mono); font-size: 10px; font-weight: 700; letter-spacing: .14em; color: var(--ath-orange-3);
}
.mc-root .mc-col:nth-child(2) .mc-col-title { border-bottom-color: rgba(52,200,255,.25); color: var(--ath-cyan); }
.mc-root .mc-col:nth-child(3) .mc-col-title { border-bottom-color: rgba(53,224,127,.25); color: var(--ath-green); }
.mc-root .mc-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; transition: background .15s; }
.mc-root .mc-row:hover { background: rgba(255,255,255,.02); }
.mc-root .mc-row-lbl { font-size: 11px; color: var(--ath-text-2); }
.mc-root .mc-row-val { font-family: var(--ath-mono); font-size: 13px; font-weight: 600; color: var(--ath-text); }
.mc-root .mc-row-val.accent { color: var(--ath-orange-3); }
.mc-root .mc-row-val.cyan { color: var(--ath-cyan); }
.mc-root .mc-row-val.success { color: var(--ath-green); }
.mc-root .mc-row-val.danger { color: var(--ath-red); }
.mc-root .mc-row-bar { height: 3px; margin: 0 12px 6px; border-radius: 100px; background: rgba(255,255,255,.06); overflow: hidden; }
.mc-root .mc-row-fill { height: 100%; border-radius: 100px; background: var(--mc-clr, var(--ath-orange)); }
/* "últimos 30 dias" etc. sob os valores: era --ath-dim (invisível) → laranja da paleta. */
.mc-root .mc-row-periodo { display: block; font-size: 8px; color: var(--ath-orange-3); letter-spacing: .06em; margin-top: 2px; }

/* ---------- SISTEMA A GÁS ---------- */
.mc-root .gas-section-eyebrow { display: flex; align-items: center; gap: 8px; margin: 4px 0 12px; font-family: var(--ath-mono); }
.mc-root .gas-eyebrow-title { font-size: 11px; font-weight: 700; letter-spacing: .18em; color: var(--ath-cyan); }
.mc-root .gas-eyebrow-sub { font-size: 9px; color: var(--ath-dim); letter-spacing: .1em; }
.mc-root .gas-eyebrow-flag.danger { color: var(--ath-red); font-size: 9px; font-weight: 700; margin-left: auto; }
.mc-root .gas-status-band { background: var(--ath-bg-2); border: 1px solid var(--ath-line); border-radius: var(--ath-r-lg); padding: 18px 20px; margin-bottom: 16px; }
.mc-root .gas-status-title { font-family: var(--ath-mono); font-size: 10px; font-weight: 700; letter-spacing: .14em; color: var(--ath-text); margin-bottom: 14px; }
.mc-root .gas-lamp { font-family: var(--ath-mono); font-size: 9px; font-weight: 700; padding: 6px 8px; border-radius: var(--ath-r-md); border: 1px solid var(--ath-line-2); color: var(--ath-dim); }
.mc-root .gas-lamp.on.red { color: #fff; background: var(--ath-red); border-color: var(--ath-red); }
.mc-root .gas-lamp.on.amber { color: #080808; background: var(--ath-yellow); border-color: var(--ath-yellow); }

/* ---------- SIGNALS BANDS (J1939 avançados + PGNs) ---------- */
.mc-root .mc-signals-band { background: var(--ath-bg-2); border: 1px solid var(--ath-line); border-radius: var(--ath-r-lg); margin-bottom: 16px; overflow: hidden; }
.mc-root .mc-signals-title { padding: 12px 16px; border-bottom: 1px solid var(--ath-line); font-family: var(--ath-mono); font-size: 10px; font-weight: 700; letter-spacing: .14em; color: var(--ath-text); }
.mc-root .mc-signals-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; padding: 18px; }
.mc-root .mc-signal { background: linear-gradient(160deg, rgba(255,255,255,.045), rgba(255,255,255,.008)); border: 1px solid var(--ath-line); border-radius: var(--ath-r-md); padding: 16px; }
.mc-root .mc-signal-label { font-size: 11px; color: var(--ath-text-2); margin-bottom: 8px; }
.mc-root .mc-signal-value { font-family: var(--ath-mono); font-size: 26px; font-weight: 700; line-height: 1; }
/* Legenda sob o valor do sinal → laranja da paleta. Precisa de !important +
   especificidade extra pra vencer athena-redesign.css (#5a584f !important) e
   telemetry-grid.css (rgba !important), que a deixavam quase invisível. */
.mc-root .mc-signal .mc-signal-unit,
.ath-telemetry-full .mc-root .mc-signal-unit { font-family: var(--ath-mono); font-size: 8.5px; color: var(--ath-orange-3) !important; margin: 8px 0 10px; }
.mc-root .mc-signal-bar { height: 4px; border-radius: 100px; background: rgba(255,255,255,.06); overflow: hidden; }
.mc-root .mc-signal-fill { height: 100%; border-radius: 100px; }
.mc-root .mc-signal-fill.blue { background: var(--ath-cyan); }
.mc-root .mc-signal-fill.orange { background: var(--ath-orange); }
.mc-root .mc-signal-fill.green { background: var(--ath-green); }
.mc-root .mc-signal-fill.red { background: var(--ath-red); }

/* ---------- ATHENA INTELLIGENCE ---------- */
.mc-root .ai-panel { background: var(--ath-bg-2); border: 1px solid var(--ath-line); border-radius: var(--ath-r-lg); margin-bottom: 16px; overflow: hidden; }
.mc-root .ai-panel-header { display: flex; align-items: center; gap: 14px; padding: 18px 20px; border-bottom: 1px solid var(--ath-line); }
.mc-root .ai-panel-icon { width: 44px; height: 44px; border-radius: var(--ath-r-md); display: grid; place-items: center; background: rgba(255,90,31,.1); border: 1px solid rgba(255,90,31,.3); color: var(--ath-orange-3); }
.mc-root .ai-panel-title { font-size: 16px; font-weight: 700; color: var(--ath-text); letter-spacing: .02em; }
.mc-root .ai-panel-sub { font-family: var(--ath-mono); font-size: 9.5px; letter-spacing: .1em; color: var(--ath-muted); margin-top: 3px; }
.mc-root .ai-panel-badge { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 100px; background: rgba(52,200,255,.1); border: 1px solid rgba(52,200,255,.35); font-family: var(--ath-mono); font-size: 9px; font-weight: 700; letter-spacing: .1em; color: var(--ath-cyan); }
.mc-root .ai-stats-bar { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: var(--ath-line); }
.mc-root .ai-stat { background: #0a0a0c; padding: 16px 18px; }
.mc-root .ai-stat-val { font-family: var(--ath-mono); font-size: 26px; font-weight: 700; color: var(--ath-text); line-height: 1; }
.mc-root .ai-stat-lbl { font-family: var(--ath-mono); font-size: 8.5px; letter-spacing: .12em; color: var(--ath-dim); margin-top: 7px; }
.mc-root .ai-stat-warn .ai-stat-val { color: var(--ath-yellow); }
.mc-root .ai-stat-good .ai-stat-val { color: var(--ath-green); }
.mc-root .ai-panel-empty { padding: 20px; font-size: 12px; color: var(--ath-muted); line-height: 1.6; }
.mc-root .ai-panel-list { padding: 14px 16px; }
/* Empilhado (igual dc.html 782): head em cima, descrição embaixo — assim TODAS
   as descrições alinham na mesma margem esquerda (16px). Antes era flex-row e a
   descrição começava logo após o head (largura variável) → desalinhado. */
.mc-root .ai-insight { display: flex; flex-direction: column; background: linear-gradient(160deg, rgba(255,255,255,.045), rgba(255,255,255,.008)); border-radius: var(--ath-r-md); overflow: hidden; margin-bottom: 8px; }
.mc-root .ai-insight-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 16px 0; }
.mc-root .ai-insight-spacer { flex: 1 1 auto; }   /* joga contagem + hora p/ a direita */
.mc-root .ai-insight-desc { font-size: 11px; color: var(--ath-muted); margin: 6px 16px 12px; line-height: 1.5; }
.mc-root .ai-insight-tag { font-family: var(--ath-mono); font-size: 9px; font-weight: 700; letter-spacing: .1em; padding: 2px 7px; border: 1px solid currentColor; }
.mc-root .ai-insight-title { font-size: 13px; font-weight: 600; color: var(--ath-text); }
.mc-root .ai-insight-count { font-family: var(--ath-mono); font-size: 9px; color: var(--ath-orange-3); background: rgba(255,90,31,.12); padding: 2px 7px; border-radius: 100px; }
.mc-root .ai-insight-time { font-family: var(--ath-mono); font-size: 9px; color: var(--ath-dim); }
.mc-root .ai-insight-warning, .mc-root .ai-insight-critico { border-left: 3px solid var(--ath-red); }
.mc-root .ai-insight-info { border-left: 3px solid var(--ath-cyan); }
.mc-root .ai-insight-sucesso { border-left: 3px solid var(--ath-green); }
.mc-root .ai-insight-systemic { border-left: 3px solid var(--ath-yellow); }

/* ---------- PERFORMANCE GLOBAL (arcos) ---------- */
.mc-root .mc-arcs-panel { background: var(--ath-bg-2); border: 1px solid var(--ath-line); border-radius: var(--ath-r-lg); padding: 22px 24px; margin-bottom: 16px; }
.mc-root .mc-arcs-title { font-family: var(--ath-mono); font-size: 11px; font-weight: 700; letter-spacing: .18em; color: var(--ath-text); margin-bottom: 20px; }
.mc-root .mc-arcs-row { display: flex; justify-content: space-around; gap: 20px; }
.mc-root .mc-arc-item { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.mc-root .mc-arc-gauge { position: relative; width: 132px; height: 132px; }
.mc-root .mc-arc-gauge svg { width: 132px; height: 132px; transform: rotate(-90deg); }
.mc-root .mc-arc-bg { fill: none; stroke: rgba(255,255,255,.06); stroke-width: 7; }
.mc-root .mc-arc-fill { fill: none; stroke-width: 7; stroke-linecap: round; transition: stroke-dashoffset .9s cubic-bezier(.16,1,.3,1); }
.mc-root .mc-arc-center { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; }
.mc-root .mc-arc-val { font-family: var(--ath-mono); font-size: 28px; font-weight: 700; color: var(--ath-text); line-height: 1; }
.mc-root .mc-arc-unit { font-family: var(--ath-mono); font-size: 9px; color: var(--ath-muted); margin-top: 4px; }
.mc-root .mc-arc-label { font-family: var(--ath-mono); font-size: 10px; letter-spacing: .14em; color: var(--ath-text-2); }

/* ---------- HISTÓRICO / GRÁFICO (RPM HISTÓRICO) ---------- */
.history-chart-panel { background: var(--ath-bg-2); border: 1px solid var(--ath-line); border-radius: var(--ath-r-lg); padding: 22px 24px; margin-bottom: 16px; }
.history-chart-panel .chart-toolbar { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 6px; }
.history-chart-panel .chart-title-main { font-family: var(--ath-mono); font-size: 11px; font-weight: 700; letter-spacing: .18em; color: var(--ath-text); }
.history-chart-panel .chart-title-sub { font-family: var(--ath-mono); font-size: 8.5px; letter-spacing: .1em; color: var(--ath-dim); margin-top: 4px; }
.history-chart-panel .chart-current-value { font-family: var(--ath-mono); font-size: 26px; font-weight: 700; color: var(--ath-orange); text-align: right; }
.history-chart-panel .chart-current-sub { font-family: var(--ath-mono); font-size: 8.5px; letter-spacing: .1em; color: var(--ath-dim); margin-top: 4px; text-align: right; }
.history-chart-panel .chart-filters-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 16px 0 18px; }
.history-chart-panel .ind-dropdown-trigger {
  width: 100%; text-align: left; background: linear-gradient(160deg, rgba(255,255,255,.045), rgba(255,255,255,.008));
  border: 1px solid var(--ath-line); border-radius: var(--ath-r-md); padding: 12px 14px; color: var(--ath-text); cursor: pointer;
  display: flex; align-items: center; gap: 10px;
}
/* Seletores (Período/Indicador/Sobrepor): estavam pequenos demais/quase
   invisíveis — aumentados e com mais contraste. */
.history-chart-panel .chart-control-label { font-family: var(--ath-mono); font-size: 10px; font-weight: 700; letter-spacing: .16em; color: var(--ath-muted); text-transform: uppercase; margin: 0 0 8px 2px; }
.history-chart-panel .ind-dropdown-trigger-cat { font-family: var(--ath-mono); font-size: 9.5px; letter-spacing: .12em; color: var(--ath-muted); display: block; }
.history-chart-panel .ind-dropdown-trigger-label { font-size: 14px; font-weight: 600; color: var(--ath-text); }
.history-chart-panel .ind-dropdown-panel { background: #0d0d10; border: 1px solid var(--ath-line-2); border-radius: var(--ath-r-md); box-shadow: 0 20px 50px rgba(0,0,0,.5); }
.history-chart-panel .ind-dropdown-item.active { color: var(--ath-orange-3); background: rgba(255,90,31,.08); }
.history-chart-panel .chart-empty { padding: 40px; text-align: center; font-family: var(--ath-mono); font-size: 11px; color: var(--ath-dim); }

/* ---------- CONSUMO DIÁRIO 14D · RADAR · DONUTS ---------- */
.tel-row3 { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr); gap: 14px; margin-bottom: 16px; }
/* flex-column: o conteúdo preenche a altura do card (a linha estica na altura
   do painel mais alto — radar/donuts). Sem isso o gráfico de consumo ficava
   grudado no topo com espaço vazio embaixo. */
.tel-panel { background: var(--ath-bg-2); border: 1px solid var(--ath-line); border-radius: var(--ath-r-lg); padding: 18px 20px; display: flex; flex-direction: column; }
.tel-panel-title { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; font-family: var(--ath-mono); font-size: 10px; font-weight: 700; letter-spacing: .14em; color: var(--ath-text); }
.tel-panel-title::before { content: ""; width: 4px; height: 14px; background: var(--ath-orange); }
.tel-bar14 { display: flex; align-items: stretch; gap: 5px; height: auto; flex: 1 1 auto; min-height: 172px; }
.tel-bar14-col { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; }
.tel-bar14-val { font-family: var(--ath-mono); font-size: 8px; font-weight: 600; color: var(--ath-text-2); height: 12px; line-height: 12px; margin-bottom: 3px; white-space: nowrap; }
.tel-bar14-barwrap { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; min-height: 0; }
.tel-bar14-bar { width: 100%; background: var(--ath-orange); border-radius: 3px 3px 0 0; }
.tel-bar14-date { font-family: var(--ath-mono); font-size: 7.5px; color: var(--ath-dim); margin-top: 6px; white-space: nowrap; transform: rotate(-40deg); transform-origin: center; height: 14px; }
.tel-radar-wrap { display: flex; justify-content: center; }
.tel-donut-row { display: flex; flex-direction: column; gap: 16px; }
.tel-donut-item { display: flex; align-items: center; gap: 14px; }
.tel-donut { position: relative; width: 66px; height: 66px; border-radius: 50%; flex: 0 0 auto; }
.tel-donut-center { position: absolute; inset: 8px; border-radius: 50%; background: #0b0b0d; display: grid; place-items: center; font-family: var(--ath-mono); font-size: 13px; font-weight: 700; }
.tel-donut-lbl { font-size: 12px; font-weight: 600; color: var(--ath-text); }
.tel-donut-sub { font-family: var(--ath-mono); font-size: 9px; color: var(--ath-muted); margin-top: 2px; }

/* ---------- COMANDOS DO ATIVO ---------- */
.edge-command-center.v75 { background: var(--ath-bg-2); border: 1px solid var(--ath-line); border-radius: var(--ath-r-lg); padding: 22px 24px; }
.edge-command-header.v75 { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 14px; }
.edge-command-kicker.v75 { font-family: var(--ath-mono); font-size: 9px; letter-spacing: .18em; color: var(--ath-orange-3); }
.edge-command-title.v75 { font-family: var(--ath-mono); font-size: 15px; font-weight: 700; letter-spacing: .1em; color: var(--ath-text); margin-top: 4px; }
.edge-command-subtitle.v75 { font-size: 11px; color: var(--ath-muted); margin-top: 4px; }
.edge-command-warning.v75 { font-size: 11px; color: var(--ath-yellow); background: rgba(255,210,63,.06); border: 1px solid rgba(255,210,63,.25); border-radius: var(--ath-r-md); padding: 10px 14px; margin-bottom: 18px; }
.edge-command-grid.v75 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.edge-command-panel.v75 { background: linear-gradient(160deg, rgba(255,255,255,.045), rgba(255,255,255,.008)); border: 1px solid var(--ath-line); border-radius: var(--ath-r-md); padding: 18px; display: flex; flex-direction: column; }
.edge-command-panel-head.v75 { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.edge-command-icon.v75 { width: 42px; height: 42px; border-radius: var(--ath-r-md); display: grid; place-items: center; background: rgba(255,255,255,.04); font-size: 19px; }
.edge-command-panel.v75 h4 { font-family: var(--ath-mono); font-size: 12px; font-weight: 700; letter-spacing: .08em; color: var(--ath-text); margin: 0; }
.edge-command-panel.v75 p { font-size: 11px; color: var(--ath-muted); margin: 2px 0 0; }
.edge-command-help.v75 { font-size: 10.5px; color: var(--ath-muted); line-height: 1.55; padding: 11px 13px; border-left: 2px solid var(--ath-orange); background: rgba(255,255,255,.02); margin-bottom: 16px; border-radius: 0 var(--ath-r-md) var(--ath-r-md) 0; }
.edge-command-row.v75 { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
/* Padronizados igual à barra de ações do ativo: fundo preto, borda sutil, texto
   branco. Amarelo (warning) e vermelho (danger) ficam SÓ no texto/borda, como o
   EXCLUIR. O antigo "primary" laranja sólido foi neutralizado pro mesmo padrão. */
.edge-command-btn.v75 { font-family: var(--ath-mono); font-size: 10px; font-weight: 700; letter-spacing: .06em; padding: 10px 14px; border-radius: 10px; border: 1px solid rgba(255,255,255,.14); background: #0d0d10; color: #fff; cursor: pointer; transition: all .2s; }
.edge-command-btn.v75:hover { border-color: rgba(255,90,31,.5); background: #15151a; color: #fff; }
.edge-command-btn.v75.warning { color: var(--ath-yellow); border-color: rgba(255,210,63,.35); }
.edge-command-btn.v75.warning:hover { border-color: rgba(255,210,63,.6); background: rgba(255,210,63,.08); color: var(--ath-yellow); }
.edge-command-btn.v75.danger { color: #ff6b60; border-color: rgba(255,59,48,.35); }
.edge-command-btn.v75.danger:hover { border-color: rgba(255,59,48,.6); background: rgba(255,59,48,.1); color: #ff6b60; }
.edge-command-btn.v75.primary { background: #0d0d10; border-color: rgba(255,255,255,.14); color: #fff; }
.edge-command-btn.v75.primary:hover { border-color: rgba(255,90,31,.5); background: #15151a; color: #fff; }
.edge-lock-state.v75 { display: inline-flex; align-items: center; gap: 7px; font-family: var(--ath-mono); font-size: 10px; font-weight: 700; letter-spacing: .08em; color: var(--ath-green); }
.edge-lock-state.v75.blocked { color: var(--ath-red); }
.edge-lock-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 3px currentColor; }
.edge-command-last.v75 { font-family: var(--ath-mono); font-size: 9px; color: var(--ath-dim); text-align: right; margin-top: 6px; }
.edge-command-last.v75 strong { display: block; color: var(--ath-text-2); font-size: 10px; margin: 2px 0; }

@media (max-width: 1100px) {
  .mc-root .mc-matrix, .mc-root .mc-matrix-gas, .mc-root .mc-signals-grid,
  .tel-row3, .edge-command-grid.v75, .mc-root .mc-banner { grid-template-columns: 1fr; }
  .mc-root .ai-stats-bar { grid-template-columns: repeat(2, 1fr); }
}

/* ===== css/athena-mapa.css ===== */
/* ============================================================
   ATHENA · MAPA DA FROTA (redesign 2026) — cópia fiel da seção
   "isMapa" de implementation/reference/Athena Redesign.dc.html
   (linhas 850-913). Estilos reproduzidos 1:1 como classes.
   ============================================================ */

.mapa-root {
  position: absolute; inset: 0;
  background: #08080a;
  display: grid; grid-template-columns: minmax(0,1fr) 340px;
  font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif;
}

/* ---- Coluna do mapa ---- */
.mapa-mapwrap { position: relative; min-width: 0; }
.mapa-map { position: absolute; inset: 0; background: linear-gradient(135deg,#0d1410,#0a0f0c); }
.mapa-vignette { position: absolute; inset: 0; pointer-events: none; z-index: 400; box-shadow: inset 0 0 160px 40px rgba(6,6,8,.6); }

/* Barra superior flutuante (status + stats) */
.mapa-topbar { position: absolute; top: 16px; left: 16px; right: 16px; z-index: 800; display: flex; align-items: center; gap: 12px; pointer-events: none; }
.mapa-back { pointer-events: auto; display: inline-flex; align-items: center; padding: 12px 16px; background: rgba(8,8,10,.8); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.14); border-radius: 14px; color: #c7c3ba; font-family: 'IBM Plex Mono', monospace; font-size: 11px; font-weight: 700; letter-spacing: .1em; cursor: pointer; transition: all .15s; }
.mapa-back:hover { border-color: rgba(255,90,31,.5); color: #ff9147; }
.mapa-live { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: rgba(8,8,10,.8); backdrop-filter: blur(10px); border: 1px solid rgba(255,90,31,.28); border-radius: 14px; pointer-events: auto; }
.mapa-live-dot { width: 9px; height: 9px; border-radius: 50%; background: #ff5a1f; box-shadow: 0 0 5px #ff5a1f; animation: ath-blink 1.5s infinite; flex: 0 0 auto; }
.mapa-live-title { font-family: 'IBM Plex Mono', monospace; font-size: 11px; font-weight: 700; letter-spacing: .12em; color: #f4f2ee; }
.mapa-live-sub { font-family: 'IBM Plex Mono', monospace; font-size: 9px; color: #8a877f; margin-top: 3px; }
.mapa-stats { display: flex; gap: 8px; pointer-events: auto; }
.mapa-stat { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: rgba(8,8,10,.8); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.12); border-radius: 12px; }
.mapa-stat-v { font-family: 'IBM Plex Mono', monospace; font-size: 18px; font-weight: 700; line-height: 1; }
.mapa-stat-l { font-family: 'IBM Plex Mono', monospace; font-size: 8px; letter-spacing: .1em; color: #8a877f; }
.mapa-stat--online { border-color: rgba(53,224,127,.3); }
.mapa-stat--online .mapa-stat-v { color: #35e07f; }
.mapa-stat--alertas { border-color: rgba(255,90,31,.3); }
.mapa-stat--alertas .mapa-stat-v { color: #ff5a1f; }
.mapa-stat--offline .mapa-stat-v { color: #8a877f; }
.mapa-stat--vel { border-color: rgba(52,200,255,.3); }
.mapa-stat--vel .mapa-stat-v { color: #34c8ff; }

/* Botões de modo do mapa */
.mapa-modes { position: absolute; top: 78px; right: 16px; z-index: 800; display: flex; gap: 6px; }
.mapa-modebtn { padding: 8px 12px; background: rgba(8,8,10,.8); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.12); border-radius: 10px; color: #c7c3ba; font-family: 'IBM Plex Mono', monospace; font-size: 10px; font-weight: 600; letter-spacing: .04em; cursor: pointer; transition: all .15s; }
.mapa-modebtn:hover { border-color: rgba(255,90,31,.4); color: #ff9147; }
.mapa-modebtn.active { background: #ff5a1f; border-color: #ff5a1f; color: #080808; }

/* Card de detalhe do ativo selecionado */
.mapa-detail { position: absolute; bottom: 16px; left: 16px; z-index: 800; width: 296px; padding: 16px 18px; background: rgba(8,8,10,.82); backdrop-filter: blur(12px); border: 1px solid rgba(255,90,31,.28); border-radius: 16px; animation: ath-slidein .4s cubic-bezier(.16,1,.3,1) both; }
.mapa-detail-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.mapa-detail-emoji { font-size: 20px; }
.mapa-detail-id { font-family: 'IBM Plex Mono', monospace; font-size: 14px; font-weight: 700; color: #f4f2ee; }
.mapa-detail-modelo { font-size: 10px; color: #8a877f; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mapa-detail-status { font-family: 'IBM Plex Mono', monospace; font-size: 9px; font-weight: 700; letter-spacing: .08em; flex: 0 0 auto; }
.mapa-detail-vitals { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; margin-bottom: 12px; }
.mapa-detail-vital { padding: 9px 8px; background: rgba(255,255,255,.03); border-radius: 10px; text-align: center; }
.mapa-detail-vital-v { font-family: 'IBM Plex Mono', monospace; font-size: 16px; font-weight: 700; line-height: 1; }
.mapa-detail-vital-l { font-family: 'IBM Plex Mono', monospace; font-size: 7px; letter-spacing: .08em; color: #6c6a63; margin-top: 5px; }
.mapa-detail-spark { width: 100%; height: 30px; display: block; margin-bottom: 12px; }
.mapa-detail-meta { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; font-family: 'IBM Plex Mono', monospace; font-size: 9px; color: #8a877f; }
.mapa-detail-btn { width: 100%; padding: 11px; border: 0; border-radius: 10px; background: linear-gradient(100deg,#ff5a1f,#ff7a2e); color: #0a0604; font-family: 'Space Grotesk', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }

/* ---- Sidebar de ativos ---- */
.mapa-side { border-left: 1px solid rgba(255,255,255,.08); background: #0a0a0c; display: flex; flex-direction: column; min-height: 0; }
.mapa-side-head { padding: 16px 18px; border-bottom: 1px solid rgba(255,255,255,.08); }
.mapa-side-title { font-family: 'IBM Plex Mono', monospace; font-size: 11px; font-weight: 700; letter-spacing: .14em; color: #f4f2ee; }
.mapa-side-sub { font-family: 'IBM Plex Mono', monospace; font-size: 9px; color: #8a877f; margin-top: 4px; }
.mapa-side-list { flex: 1; overflow-y: auto; overflow-x: hidden; min-height: 0; padding: 10px; }

.mapa-card { padding: 13px 14px; margin-bottom: 8px; border: 1px solid rgba(255,255,255,.06); background: rgba(255,255,255,.02); border-radius: 14px; cursor: pointer; transition: transform .15s, border-color .15s; }
.mapa-card:hover { transform: translateX(3px); border-color: rgba(255,90,31,.4); }
.mapa-card.sel { border-color: rgba(255,90,31,.5); background: rgba(255,90,31,.08); }
.mapa-card-top { display: flex; align-items: center; gap: 11px; }
.mapa-card-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.mapa-card-id { font-family: 'IBM Plex Mono', monospace; font-size: 12px; font-weight: 600; color: #f4f2ee; }
.mapa-card-modelo { font-size: 10px; color: #8a877f; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mapa-card-right { text-align: right; flex: 0 0 auto; }
.mapa-card-status { font-family: 'IBM Plex Mono', monospace; font-size: 9px; font-weight: 700; letter-spacing: .06em; }
.mapa-card-score { font-family: 'IBM Plex Mono', monospace; font-size: 14px; font-weight: 700; margin-top: 2px; }
.mapa-card-bottom { display: flex; align-items: center; gap: 10px; margin-top: 11px; }
.mapa-card-vel { font-family: 'IBM Plex Mono', monospace; font-size: 9px; color: #8a877f; flex: 0 0 auto; }
.mapa-card-bar { flex: 1; height: 4px; border-radius: 100px; background: rgba(255,255,255,.06); overflow: hidden; }
.mapa-card-bar-fill { height: 100%; border-radius: 100px; background: #ff5a1f; }
.mapa-card-tel { flex: 0 0 auto; padding: 3px 8px; border: 1px solid rgba(255,90,31,.35); background: transparent; border-radius: 7px; color: #ff9147; font-family: 'IBM Plex Mono', monospace; font-size: 9px; font-weight: 600; cursor: pointer; transition: background .15s; }
.mapa-card-tel:hover { background: rgba(255,90,31,.12); }

/* ---- Marcadores do mapa (ping ring + emoji) e tooltip ---- */
.ath-ping-ring { position: absolute; inset: -6px; border-radius: 50%; border: 2px solid currentColor; opacity: .6; animation: ath-ping 1.6s cubic-bezier(0,0,.2,1) infinite; }
@keyframes ath-ping { 0% { transform: scale(.6); opacity: .7; } 100% { transform: scale(1.9); opacity: 0; } }
.leaflet-tooltip.ath-tip { background: rgba(8,8,10,.85); border: 1px solid rgba(255,90,31,.3); color: #f4f2ee; font-family: 'IBM Plex Mono', monospace; font-size: 9px; font-weight: 600; letter-spacing: .06em; padding: 2px 7px; border-radius: 6px; box-shadow: none; }
.leaflet-tooltip.ath-tip::before { display: none; }

/* Empty state */
.mapa-side-empty { padding: 24px 16px; text-align: center; font-family: 'IBM Plex Mono', monospace; font-size: 10px; color: #6c6a63; }

@media (max-width: 860px) {
  .mapa-root { grid-template-columns: 1fr; grid-template-rows: 1fr 300px; }
  .mapa-side { border-left: 0; border-top: 1px solid rgba(255,255,255,.08); }
}

/* ─── Seletor de tipo de mapa (Ruas / Satélite / Híbrido) — TODOS os mapas ───
   Texto e ÍCONE pretos (só aqui os ícones são pretos, não laranja). Botão
   inativo = chip claro (pra o preto ficar legível); ativo = laranja. */
.amms-btn, .mapa-modebtn {
    background: #f4f2ee !important;
    border: 1px solid rgba(0,0,0,.14) !important;
    color: #111 !important;
    font-family: 'IBM Plex Mono', monospace !important;
    font-weight: 700 !important;
    display: inline-flex !important; align-items: center; gap: 7px;
}
.amms-btn .hero-ic, .mapa-modebtn .hero-ic { color: #111 !important; }
.amms-btn:hover, .mapa-modebtn:hover { background: #fff !important; border-color: rgba(0,0,0,.28) !important; color: #111 !important; }
.amms-btn:hover .hero-ic, .mapa-modebtn:hover .hero-ic { color: #111 !important; }
.amms-btn.amms-btn-active, .mapa-modebtn.active {
    background: #ff5a1f !important; border-color: #ff5a1f !important; color: #111 !important;
}
.amms-btn.amms-btn-active .hero-ic, .mapa-modebtn.active .hero-ic { color: #111 !important; }

/* O controle de zoom (+/−) do Leaflet ficava por cima do botão FROTA (topbar em
   top:16px). Desce pra baixo da topbar pra não tampar o botão. */
.mapa-mapwrap .leaflet-top.leaflet-left { top: 76px; left: 6px; }
.mapa-back { gap: 7px; }
.mapa-back .hero-ic { color: #ff9147; }

/* ── REPLAY DE TRAJETO (painel do ativo selecionado) ─────────────────────── */
.mapa-replay{ margin:12px 0 10px; padding:11px 12px; border-radius:12px;
  border:1px solid rgba(52,200,255,.24); background:rgba(52,200,255,.05); }
.mapa-replay-lbl{ font-family:'IBM Plex Mono',monospace; font-size:8px; letter-spacing:.14em;
  color:#34c8ff; margin-bottom:9px; }
.mapa-replay-row{ display:flex; gap:7px; }
.mapa-replay-btn{ flex:1; padding:8px 6px; border-radius:9px; border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.03); color:#c7c3ba; font-family:'IBM Plex Mono',monospace;
  font-size:10px; font-weight:600; cursor:pointer; transition:all .15s; }
.mapa-replay-btn:hover:not(:disabled){ border-color:#34c8ff; color:#34c8ff; }
.mapa-replay-btn:disabled{ opacity:.5; cursor:default; }
.mapa-replay-btn.stop{ width:100%; border-color:rgba(255,59,48,.45); color:#ff6b60; background:rgba(255,59,48,.07); }
.mapa-replay-msg{ font-family:'IBM Plex Mono',monospace; font-size:9px; color:#8a877f; margin-top:8px; }

/* ===== css/athena-tv-2026.css ===== */
/* ============================================================
   ATHENA · MODO TV (redesign 2026) — cópia fiel da seção "isTv"
   de implementation/reference/Athena Redesign.dc.html (915-1005).
   Mural de sala de controle: KPIs com anel, mapa, donut, ranking,
   throughput MQTT, alertas prioritários e ticker de eventos.
   ============================================================ */

.tv2-root {
  position: absolute; inset: 0; overflow: hidden;
  display: flex; flex-direction: column;
  font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  background:
    radial-gradient(120% 60% at 82% -14%, rgba(255,90,31,.14), transparent 52%),
    radial-gradient(90% 60% at 6% -6%, rgba(52,200,255,.06), transparent 50%),
    linear-gradient(180deg, #0c0b0e, #08080a 62%, #060608);
}
.tv2-grid-bg {
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background-image: linear-gradient(rgba(255,255,255,.02) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px);
  background-size: 52px 52px;
  -webkit-mask-image: radial-gradient(ellipse 120% 90% at 50% 30%, #000, transparent 82%);
          mask-image: radial-gradient(ellipse 120% 90% at 50% 30%, #000, transparent 82%);
}
.tv2-vignette { position: absolute; inset: 0; pointer-events: none; z-index: 1; box-shadow: inset 0 0 220px 60px rgba(4,4,6,.7); }

.tv2-body { position: relative; z-index: 2; flex: 1; display: flex; flex-direction: column; padding: 22px 26px 12px; min-height: 0; overflow-y: auto; overflow-x: hidden; }

/* ---- Header ---- */
.tv2-head { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.tv2-brand { display: flex; align-items: center; gap: 16px; }
.tv2-logo { height: 36px; width: auto; }
.tv2-brand-name { font-size: 24px; font-weight: 700; letter-spacing: .26em; color: #f4f2ee; line-height: 1; }
.tv2-brand-sub { font-family: 'IBM Plex Mono', monospace; font-size: 9px; letter-spacing: .16em; color: #ff9147; margin-top: 5px; }
.tv2-live { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border: 1px solid rgba(255,90,31,.4); border-radius: 100px; background: rgba(255,90,31,.06); font-family: 'IBM Plex Mono', monospace; font-size: 9px; font-weight: 600; letter-spacing: .14em; color: #ff9147; margin-left: 6px; }
.tv2-live-dot { width: 7px; height: 7px; border-radius: 50%; background: #ff5a1f; box-shadow: 0 0 4px #ff5a1f; animation: ath-blink 1.5s infinite; }
.tv2-clockbox { text-align: right; display: flex; align-items: center; gap: 16px; }
.tv2-clock { font-family: 'IBM Plex Mono', monospace; font-size: 46px; font-weight: 700; color: #f4f2ee; line-height: 1; letter-spacing: .04em; }
.tv2-date { font-family: 'IBM Plex Mono', monospace; font-size: 9px; letter-spacing: .14em; color: #8a877f; margin-top: 6px; text-transform: uppercase; }
.tv2-back { padding: 10px 14px; background: transparent; border: 1px solid rgba(255,255,255,.14); border-radius: 10px; color: #c7c3ba; font-family: 'IBM Plex Mono', monospace; font-size: 10px; font-weight: 700; letter-spacing: .08em; cursor: pointer; transition: all .15s; }
.tv2-back:hover { border-color: rgba(255,90,31,.5); color: #ff9147; }

/* ---- KPIs ---- */
.tv2-kpis { flex: 0 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 16px; }
.tv2-kpi { position: relative; overflow: hidden; border-radius: 22px; border: 1px solid rgba(255,255,255,.09); background: linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.012)); box-shadow: 0 1px 0 rgba(255,255,255,.07) inset, 0 30px 60px -34px rgba(0,0,0,.9); padding: 22px 24px; display: flex; align-items: center; gap: 20px; }
.tv2-kpi-accent { position: absolute; top: 0; left: 0; width: 100%; height: 3px; }
.tv2-kpi-ring { position: relative; width: 88px; height: 88px; border-radius: 50%; flex: 0 0 auto; }
.tv2-kpi-ring-inner { position: absolute; inset: 8px; border-radius: 50%; background: #0b0a0d; display: grid; place-items: center; font-family: 'IBM Plex Mono', monospace; font-size: 34px; font-weight: 700; }
.tv2-kpi-l { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .12em; color: #c7c3ba; }
.tv2-kpi-sub { font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: #8a877f; margin-top: 8px; }

/* ---- Main grid ---- */
.tv2-main { flex: 1; display: grid; grid-template-columns: minmax(0,1.35fr) minmax(0,1fr) minmax(0,1fr); gap: 16px; min-height: 340px; }

/* Coluna 1: mapa */
.tv2-mapcard { position: relative; border-radius: 22px; overflow: hidden; border: 1px solid rgba(255,255,255,.08); }
.tv2-map { position: absolute; inset: 0; background: linear-gradient(135deg, #0d1410, #0a0f0c); }
.tv2-map-label { position: absolute; top: 14px; left: 14px; z-index: 800; padding: 8px 13px; background: rgba(8,8,10,.78); backdrop-filter: blur(8px); border: 1px solid rgba(255,90,31,.28); border-radius: 10px; font-family: 'IBM Plex Mono', monospace; font-size: 10px; font-weight: 700; letter-spacing: .12em; color: #ff9147; }
.tv2-map-stats { position: absolute; bottom: 14px; left: 14px; right: 14px; z-index: 800; display: flex; gap: 10px; }
.tv2-map-stat { flex: 1; padding: 11px 14px; background: rgba(8,8,10,.8); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.1); border-radius: 12px; }
.tv2-map-stat-v { font-family: 'IBM Plex Mono', monospace; font-size: 22px; font-weight: 700; line-height: 1; }
.tv2-map-stat-l { font-family: 'IBM Plex Mono', monospace; font-size: 8px; letter-spacing: .1em; color: #8a877f; margin-top: 5px; }

/* Colunas 2 e 3: painéis empilhados */
.tv2-col { display: flex; flex-direction: column; gap: 16px; min-height: 0; }
.tv2-panel { border-radius: 22px; border: 1px solid rgba(255,255,255,.08); background: linear-gradient(160deg, rgba(255,255,255,.04), rgba(255,255,255,.01)); padding: 18px 20px; }
.tv2-panel--grow { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.tv2-panel--alert { border-color: rgba(255,59,48,.2); background: linear-gradient(160deg, rgba(255,59,48,.05), rgba(255,255,255,.008)); }
.tv2-panel-title { font-family: 'IBM Plex Mono', monospace; font-size: 11px; font-weight: 700; letter-spacing: .14em; color: #f4f2ee; }
.tv2-panel-title--danger { color: #ff6b60; }

/* Donut composição */
.tv2-donut-card { display: flex; align-items: center; gap: 20px; }
.tv2-donut { position: relative; width: 112px; height: 112px; border-radius: 50%; flex: 0 0 auto; }
.tv2-donut-inner { position: absolute; inset: 14px; border-radius: 50%; background: #0b0a0d; display: grid; place-items: center; text-align: center; }
.tv2-donut-total { font-family: 'IBM Plex Mono', monospace; font-size: 30px; font-weight: 700; color: #f4f2ee; line-height: 1; }
.tv2-donut-total-l { font-family: 'IBM Plex Mono', monospace; font-size: 8px; letter-spacing: .1em; color: #8a877f; margin-top: 3px; }
.tv2-donut-legend { flex: 1; display: flex; flex-direction: column; gap: 10px; }
.tv2-legend-row { display: flex; align-items: center; gap: 9px; }
.tv2-legend-sw { width: 10px; height: 10px; border-radius: 3px; }
.tv2-legend-name { flex: 1; font-size: 12px; color: #c7c3ba; }
.tv2-legend-val { font-family: 'IBM Plex Mono', monospace; font-size: 14px; font-weight: 700; }

/* Ranking eco-driving */
.tv2-rank-list { flex: 1; display: flex; flex-direction: column; justify-content: space-around; margin-top: 6px; }
.tv2-rank-row { display: flex; align-items: center; gap: 12px; padding: 6px 0; }
.tv2-rank-medal { font-family: 'IBM Plex Mono', monospace; font-size: 16px; font-weight: 700; width: 26px; flex: 0 0 auto; }
.tv2-rank-body { flex: 1; min-width: 0; }
.tv2-rank-line { display: flex; align-items: baseline; gap: 8px; }
.tv2-rank-id { font-family: 'IBM Plex Mono', monospace; font-size: 12px; font-weight: 600; color: #f4f2ee; }
.tv2-rank-nome { font-size: 10px; color: #8a877f; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tv2-rank-bar { height: 5px; border-radius: 100px; background: rgba(255,255,255,.06); margin-top: 6px; overflow: hidden; }
.tv2-rank-bar-fill { height: 100%; border-radius: 100px; }
.tv2-rank-score { font-family: 'IBM Plex Mono', monospace; font-size: 18px; font-weight: 700; flex: 0 0 auto; }

/* Throughput MQTT */
.tv2-thr-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.tv2-thr-unit { font-family: 'IBM Plex Mono', monospace; font-size: 9px; color: #8a877f; }
.tv2-thr-svg { width: 100%; height: 64px; display: block; }

/* Alertas prioritários */
.tv2-alert-list { flex: 1; display: flex; flex-direction: column; justify-content: space-around; margin-top: 10px; }
.tv2-alert-row { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.05); }
.tv2-alert-dot { width: 11px; height: 11px; border-radius: 50%; animation: ath-blink 1.4s infinite; flex: 0 0 auto; }
.tv2-alert-body { flex: 1; min-width: 0; }
.tv2-alert-truck { font-family: 'IBM Plex Mono', monospace; font-size: 13px; font-weight: 700; color: #f4f2ee; }
.tv2-alert-msg { font-size: 11px; color: #c7c3ba; margin-top: 2px; }
.tv2-alert-sev { font-family: 'IBM Plex Mono', monospace; font-size: 9px; font-weight: 700; letter-spacing: .08em; flex: 0 0 auto; }
.tv2-alert-empty { flex: 1; display: grid; place-items: center; color: #35e07f; font-family: 'IBM Plex Mono', monospace; font-size: 12px; }

/* Ticker */
.tv2-ticker { position: relative; z-index: 2; flex: 0 0 auto; height: 42px; border-top: 1px solid rgba(255,90,31,.25); background: rgba(8,8,10,.6); overflow: hidden; display: flex; align-items: center; }
.tv2-ticker-tag { flex: 0 0 auto; height: 100%; display: flex; align-items: center; gap: 8px; padding: 0 16px; background: #ff5a1f; }
.tv2-ticker-tag span { font-family: 'IBM Plex Mono', monospace; font-size: 10px; font-weight: 700; letter-spacing: .14em; color: #080808; }
.tv2-ticker-track { flex: 1; overflow: hidden; white-space: nowrap; }
.tv2-ticker-move { display: inline-flex; align-items: center; gap: 44px; padding-left: 40px; animation: tv2-marquee 34s linear infinite; }
.tv2-ticker-item { display: inline-flex; align-items: center; gap: 9px; font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: #c7c3ba; }
.tv2-ticker-item-dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; }
@keyframes tv2-marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

@media (max-width: 1200px) {
  .tv2-kpis { grid-template-columns: repeat(2, 1fr); }
  .tv2-main { grid-template-columns: 1fr; }
}

/* ===== css/athena-registros-2026.css ===== */
/* ============================================================
   ATHENA · REGISTROS (redesign 2026) — reskin do tema novo (ath-*)
   sobre a marcação existente de Registros.razor + estilos dos
   widgets novos do mockup (.reg2-*). Carregado por último no
   App.razor: vence o <style> inline sem tocar markup/lógica.
   ============================================================ */

.reg-page {
  background:
    radial-gradient(120% 58% at 82% -12%, rgba(255,90,31,.11), transparent 54%),
    linear-gradient(180deg, #0c0b0e, #08080a 60%, #060608) !important;
  color: var(--ath-text) !important;
  font-family: var(--ath-sans) !important;
  padding: 22px clamp(14px,4vw,32px) 44px !important;
}

/* FIX scroll (roda do mouse): o app usa container de scroll INTERNO (a Home rola
   dentro de .ath-home; o documento fica travado). Páginas roteadas como Registros
   rolavam pelo body/documento — que neste app não responde à roda, só à barra.
   Damos ao wrapper da página um scroll próprio de altura-viewport, igual ao resto
   do app, e a roda volta a funcionar. */
.athena-content:has(> .reg-page) {
  height: 100dvh;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Header */
.reg-mark { border-radius: 14px !important; border: 1px solid rgba(255,90,31,.4) !important; background: linear-gradient(135deg, rgba(255,90,31,.2), rgba(255,90,31,.04)) !important; box-shadow: 0 6px 22px rgba(255,90,31,.25) !important; }
.reg-eyebrow { color: var(--ath-orange-3) !important; font-family: var(--ath-mono) !important; letter-spacing: .18em !important; }
.reg-title { background: none !important; -webkit-text-fill-color: currentColor !important; color: var(--ath-text) !important; font-family: var(--ath-sans) !important; font-weight: 700 !important; letter-spacing: -.02em !important; }
.reg-sub { color: var(--ath-muted) !important; }
.reg-voltar { background: transparent !important; border: 1px solid rgba(255,255,255,.14) !important; color: var(--ath-text-2) !important; border-radius: 10px !important; font-family: var(--ath-mono) !important; font-weight: 700 !important; }
.reg-voltar:hover { border-color: rgba(255,90,31,.5) !important; color: var(--ath-orange-3) !important; background: transparent !important; }

/* Cards / superfícies */
.reg-card { background: linear-gradient(160deg, rgba(255,255,255,.04), rgba(255,255,255,.008)) !important; border: 1px solid var(--ath-line) !important; border-radius: 18px !important; box-shadow: 0 22px 55px rgba(0,0,0,.45) !important; }
.reg-card-titulo { color: var(--ath-text) !important; font-family: var(--ath-mono) !important; letter-spacing: .14em !important; }

/* Campos / selects */
.reg-field > span { color: var(--ath-muted) !important; font-family: var(--ath-mono) !important; font-size: 9px !important; letter-spacing: .1em !important; text-transform: uppercase !important; }
.reg-field select, .reg-grafico-sel { background: var(--ath-surface) !important; border: 1px solid var(--ath-line-2) !important; color: var(--ath-text) !important; border-radius: 10px !important; font-family: var(--ath-sans) !important; }
.reg-field select:focus { border-color: var(--ath-orange) !important; outline: none !important; }

/* Janela (1/6/24/48h) */
.reg-janela { background: var(--ath-surface) !important; border: 1px solid var(--ath-line-2) !important; border-radius: 10px !important; }
.reg-janela-btn { color: var(--ath-text-2) !important; font-family: var(--ath-mono) !important; border-radius: 8px !important; }
.reg-janela-btn.ativo { background: var(--ath-orange) !important; color: #080808 !important; box-shadow: 0 4px 12px rgba(255,90,31,.35) !important; }

/* Botões principais */
.reg-gerar, .reg-export-xlsx { background: linear-gradient(100deg, #ff5a1f, #ff7a2e) !important; color: #0a0604 !important; border: 0 !important; border-radius: 12px !important; font-weight: 700 !important; letter-spacing: .06em !important; box-shadow: 0 10px 26px rgba(255,90,31,.3) !important; }
.reg-export-csv { background: rgba(255,255,255,.06) !important; border: 1px solid rgba(255,255,255,.16) !important; color: var(--ath-text-2) !important; border-radius: 12px !important; }
.reg-link { color: var(--ath-orange-3) !important; }

/* Selo de saúde */
.reg-saude { border-radius: 12px !important; font-family: var(--ath-sans) !important; }
.reg-saude.ok { background: rgba(53,224,127,.07) !important; border: 1px solid rgba(53,224,127,.3) !important; color: #6ee7a0 !important; }
.reg-saude.alerta { background: rgba(255,210,63,.08) !important; border: 1px solid rgba(255,210,63,.4) !important; color: var(--ath-yellow) !important; }

/* Hero (3 cards) */
.reg-hero { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 16px !important; }
.reg-hcard { position: relative !important; overflow: hidden !important; border-radius: 18px !important; border: 1px solid var(--ath-line) !important; background: linear-gradient(160deg, rgba(255,255,255,.045), rgba(255,255,255,.008)) !important; padding: 20px 22px !important; }
.reg-hcard::before { content: ''; position: absolute; top: 0; left: 0; width: 3px; height: 100%; background: var(--ath-orange); }
.reg-hval { font-family: var(--ath-mono) !important; font-size: 34px !important; font-weight: 700 !important; color: var(--ath-orange-3) !important; }
.reg-hlbl { font-family: var(--ath-mono) !important; font-size: 9.5px !important; letter-spacing: .14em !important; color: var(--ath-muted) !important; text-transform: uppercase !important; }
.reg-hsub { font-family: var(--ath-mono) !important; font-size: 9px !important; color: var(--ath-dim) !important; }

/* Grid de estatísticas */
.reg-stats { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 1px !important; background: var(--ath-line) !important; border: 1px solid var(--ath-line) !important; border-radius: 12px !important; overflow: hidden !important; }
.reg-stat { background: #0b0b0d !important; border: 0 !important; border-radius: 0 !important; padding: 14px 14px !important; box-shadow: none !important; }
/* A grade usa gap de 1px sobre um fundo de linha para desenhar as divisorias.
   Com 15 celulas em 4 colunas sobra um slot vazio na ultima linha, e esse slot
   mostra a COR DA LINHA — um retangulo destoante, que parece cartao quebrado.
   O ::after e um preenchimento com o fundo do cartao: fecha o buraco sem
   inventar um indicador so para ocupar espaco. */
.reg-stats::after { content: ""; background: #0b0b0d; }
.reg-stat:hover { transform: none !important; background: #0e0e11 !important; }
.reg-stat span { font-family: var(--ath-mono) !important; font-size: 20px !important; font-weight: 700 !important; color: var(--ath-text) !important; }
.reg-stat { font-family: var(--ath-mono) !important; font-size: 8px !important; letter-spacing: .06em !important; color: var(--ath-dim) !important; }
.reg-stat-warn span { color: var(--ath-red) !important; }
.reg-stat-hi { box-shadow: none !important; }

/* Gráfico de tendência (existente) */
.reg-grafico { background: linear-gradient(160deg, rgba(255,255,255,.04), rgba(255,255,255,.008)) !important; border: 1px solid var(--ath-line) !important; border-radius: 18px !important; }
.reg-grafico-titulo { color: var(--ath-orange-3) !important; font-family: var(--ath-mono) !important; }

/* Tabela de amostras (Virtualize) */
.serie-wrap { border: 1px solid var(--ath-line) !important; border-radius: 14px !important; }
.serie-head { background: #0b0b0d !important; }
.serie-head > div { color: var(--ath-orange-3) !important; border-bottom: 1px solid rgba(255,90,31,.25) !important; font-family: var(--ath-mono) !important; }
.serie-row > div { font-family: var(--ath-mono) !important; color: var(--ath-text-2) !important; }
.serie-row:hover { background: rgba(255,90,31,.06) !important; }
.serie-row .c-data { color: var(--ath-text) !important; }

/* Resumo por hora */
.reg-hora-wrap { border: 1px solid var(--ath-line) !important; border-radius: 12px !important; }
.reg-hora-head > div { color: var(--ath-orange-3) !important; border-bottom: 1px solid rgba(255,90,31,.25) !important; font-family: var(--ath-mono) !important; }

/* ─────────── WIDGETS NOVOS DO MOCKUP (.reg2-*) ─────────── */
.reg2-panel { border-radius: 18px; border: 1px solid var(--ath-line); background: linear-gradient(160deg, rgba(255,255,255,.04), rgba(255,255,255,.008)); padding: 18px 20px; margin-bottom: 18px; }
.reg2-row2 { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 16px; }
.reg2-row-heat { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(0,1fr); gap: 16px; }
.reg2-title { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; font-family: var(--ath-mono); font-size: 10px; font-weight: 700; letter-spacing: .14em; color: var(--ath-text); }
.reg2-title::before { content: ''; width: 4px; height: 14px; background: var(--ath-orange); }
.reg2-title.cyan::before { background: var(--ath-cyan); }
.reg2-title.violet::before { background: #a06bff; }
.reg2-chart { width: 100%; height: 130px; display: block; }
.reg2-heat { display: grid; grid-template-columns: repeat(18, 1fr); gap: 4px; }
.reg2-heat-cell { width: 100%; aspect-ratio: 1; border-radius: 2px; }
.reg2-heat-axis { display: flex; justify-content: space-between; margin-top: 10px; font-family: var(--ath-mono); font-size: 8px; color: var(--ath-faint); }
.reg2-heat-legend { display: flex; align-items: center; gap: 6px; font-family: var(--ath-mono); font-size: 8px; color: var(--ath-dim); margin-left: auto; }
.reg2-heat-sw { width: 9px; height: 9px; border-radius: 2px; }
.reg2-distro-row { margin-bottom: 15px; }
.reg2-distro-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 7px; }
.reg2-distro-lbl { font-family: var(--ath-mono); font-size: 10px; letter-spacing: .06em; color: var(--ath-text-2); }
.reg2-distro-pct { font-family: var(--ath-mono); font-size: 13px; font-weight: 700; }
.reg2-distro-bar { height: 8px; border-radius: 100px; background: rgba(255,255,255,.06); overflow: hidden; }
.reg2-distro-fill { height: 100%; border-radius: 100px; }
.reg2-timeline { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.reg2-tl-item { display: flex; gap: 14px; align-items: flex-start; }
.reg2-tl-ic { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.03); font-size: 15px; }
.reg2-tl-line { display: flex; align-items: baseline; gap: 8px; }
.reg2-tl-time { font-family: var(--ath-mono); font-size: 11px; font-weight: 700; }
.reg2-tl-title { font-size: 12px; font-weight: 600; color: var(--ath-text); }
.reg2-tl-desc { font-size: 11px; color: var(--ath-muted); margin-top: 3px; }

@media (max-width: 900px) {
  .reg-stats { grid-template-columns: repeat(2, 1fr) !important; }
  .reg-hero { grid-template-columns: 1fr !important; }
  .reg2-row2, .reg2-row-heat { grid-template-columns: 1fr; }
}
/* ===== css/athena-diag-2026.css ===== */
/* ============================================================
   ATHENA · DIAGNÓSTICO (redesign 2026) — reskin ath-* sobre a
   marcação de AdminHealth.razor + gráficos CPU/Memória (.diag2-*).
   Carregado por último no App.razor (vence o <style> inline).
   ============================================================ */

.diag-shell {
  color: var(--ath-text) !important;
  font-family: var(--ath-sans) !important;
  max-width: 1440px !important;
}
/* FIX scroll (roda do mouse) — mesmo motivo do Registros: dá ao wrapper da rota
   um scroll interno de altura-viewport (o documento não responde à roda neste app). */
.athena-content:has(> .diag-shell) {
  height: 100dvh;
  overflow-y: auto;
  overflow-x: hidden;
}
/* Fundo pintado direto no shell (cor sólida — sem gradiente e SEM body:has(),
   que era reavaliado no body inteiro a cada mutação do DOM e travava a rolagem). */
.diag-shell { background: #08080a !important; }

/* Header */
.diag-header { background: linear-gradient(160deg, rgba(255,255,255,.05), rgba(255,255,255,.012)) !important; border: 1px solid var(--ath-line) !important; border-radius: 18px !important; box-shadow: 0 22px 55px rgba(0,0,0,.5) !important; }
.diag-brand-mark { border-radius: 14px !important; border: 1px solid rgba(52,200,255,.35) !important; background: linear-gradient(135deg, rgba(52,200,255,.16), rgba(52,200,255,.03)) !important; box-shadow: none !important; }
.diag-eyebrow { color: var(--ath-cyan) !important; font-family: var(--ath-mono) !important; letter-spacing: .16em !important; }
.diag-title { background: none !important; -webkit-text-fill-color: currentColor !important; color: var(--ath-text) !important; font-family: var(--ath-sans) !important; font-weight: 700 !important; letter-spacing: -.01em !important; }
.diag-subtitle, .diag-meta { font-family: var(--ath-mono) !important; color: var(--ath-muted) !important; }
.diag-meta strong { color: var(--ath-text-2) !important; }
.diag-live-dot { background: var(--ath-green) !important; box-shadow: 0 0 5px var(--ath-green) !important; }
/* Alinha os itens da barra de ações do header na mesma linha central. */
.diag-header-actions { display: flex !important; align-items: center !important; }
/* Botão "Voltar" com a MESMA altura do card "TODOS OS SISTEMAS OK" ao lado
   (mesmo padding vertical, inline-flex centralizado, mesma métrica de fonte). */
.diag-back-btn { display: inline-flex !important; align-items: center !important; padding: 11px 18px !important; font-size: 12px !important; font-weight: 700 !important; letter-spacing: .1em !important; line-height: 1 !important; background: transparent !important; border: 1px solid rgba(255,255,255,.14) !important; color: var(--ath-text-2) !important; border-radius: 12px !important; font-family: var(--ath-mono) !important; }
.diag-back-btn:hover { border-color: rgba(52,200,255,.5) !important; color: var(--ath-cyan) !important; background: transparent !important; }

/* Hero KPIs */
.diag-hero-card { border-radius: 18px !important; background: linear-gradient(160deg, rgba(255,255,255,.045), rgba(255,255,255,.008)) !important; border: 1px solid var(--ath-line) !important; box-shadow: none !important; }
.diag-hero-card:hover { transform: none !important; border-color: var(--ath-line-2) !important; }
.diag-hero-label { color: var(--ath-muted) !important; font-family: var(--ath-mono) !important; letter-spacing: .12em !important; }
.diag-hero-value { font-family: var(--ath-mono) !important; font-weight: 700 !important; }
.diag-hero-sub { color: var(--ath-dim) !important; font-family: var(--ath-mono) !important; }
.diag-hero-blue::before { background: var(--ath-cyan) !important; }
.diag-hero-green::before { background: var(--ath-green) !important; }
.diag-hero-amber::before { background: var(--ath-orange) !important; }
.diag-hero-purple::before { background: #a06bff !important; }
.diag-hero-blue .diag-hero-value { color: var(--ath-cyan) !important; }
.diag-hero-green .diag-hero-value { color: var(--ath-green) !important; }
.diag-hero-amber .diag-hero-value { color: var(--ath-orange-3) !important; }
.diag-hero-purple .diag-hero-value { color: #c79bff !important; }

/* Runtime cards */
.diag-card { background: linear-gradient(160deg, rgba(255,255,255,.04), rgba(255,255,255,.008)) !important; border: 1px solid var(--ath-line) !important; border-radius: 18px !important; }
.diag-card:hover { transform: none !important; border-color: var(--ath-line-2) !important; }
.diag-card-title { color: var(--ath-text) !important; font-family: var(--ath-mono) !important; letter-spacing: .12em !important; }
.diag-dot-amber { background: var(--ath-orange) !important; box-shadow: 0 0 4px var(--ath-orange) !important; }
.diag-dot-purple { background: #a06bff !important; box-shadow: 0 0 4px #a06bff !important; }
.diag-dot-blue { background: var(--ath-cyan) !important; box-shadow: 0 0 4px var(--ath-cyan) !important; }
.diag-dot-green { background: var(--ath-green) !important; box-shadow: 0 0 4px var(--ath-green) !important; }
.diag-stat span { color: var(--ath-text-2) !important; }
.diag-stat strong { font-family: var(--ath-mono) !important; color: var(--ath-text) !important; }
.diag-stat-warn strong { color: var(--ath-red) !important; }

/* Panels / tabelas */
.diag-panel { background: linear-gradient(160deg, rgba(255,255,255,.04), rgba(255,255,255,.008)) !important; border: 1px solid var(--ath-line) !important; border-radius: 18px !important; }
.diag-panel-head h2 { color: var(--ath-text) !important; font-family: var(--ath-mono) !important; letter-spacing: .12em !important; }
.diag-panel-hint { color: var(--ath-muted) !important; font-family: var(--ath-mono) !important; }
.diag-pill { background: rgba(52,200,255,.14) !important; color: var(--ath-cyan) !important; border: 1px solid rgba(52,200,255,.4) !important; font-family: var(--ath-mono) !important; border-radius: 6px !important; }
.diag-pill-green { background: rgba(53,224,127,.14) !important; color: var(--ath-green) !important; border-color: rgba(53,224,127,.4) !important; }
.diag-tr { background: #0b0b0d !important; }
.diag-th { background: #0d0d10 !important; color: var(--ath-dim) !important; font-family: var(--ath-mono) !important; }
.diag-cell-strong { color: var(--ath-text) !important; }
.diag-cell-muted { color: var(--ath-muted) !important; }
.diag-mono { font-family: var(--ath-mono) !important; color: var(--ath-text-2) !important; }
.diag-avatar { background: linear-gradient(135deg, #ff5a1f, #ff9147) !important; }
.diag-badge-admin { background: rgba(255,90,31,.18) !important; color: var(--ath-orange-3) !important; border: 1px solid rgba(255,90,31,.4) !important; }
.diag-empty { color: var(--ath-dim) !important; font-family: var(--ath-mono) !important; }
.diag-cmd-box { background: rgba(255,255,255,.02) !important; border: 1px solid var(--ath-line) !important; border-radius: 12px !important; }
.diag-cmd-box code { color: var(--ath-green) !important; font-family: var(--ath-mono) !important; }

/* ── Badge "TODOS OS SISTEMAS OK" + gráficos CPU/Memória ── */
.diag2-ok { display: inline-flex; align-items: center; gap: 10px; padding: 11px 18px; border-radius: 12px; border: 1px solid rgba(53,224,127,.35); background: rgba(53,224,127,.06); }
.diag2-ok-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ath-green); box-shadow: 0 0 5px var(--ath-green); animation: ath-blink 1.6s infinite; }
.diag2-ok-txt { font-family: var(--ath-mono); font-size: 12px; font-weight: 700; letter-spacing: .1em; color: var(--ath-green); }
.diag2-charts { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 16px; margin-bottom: 18px; }
.diag2-chart-card { border-radius: 18px; border: 1px solid var(--ath-line); background: linear-gradient(160deg, rgba(255,255,255,.04), rgba(255,255,255,.008)); padding: 18px 20px; }
.diag2-chart-title { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; font-family: var(--ath-mono); font-size: 10px; font-weight: 700; letter-spacing: .14em; color: var(--ath-text); }
.diag2-chart-title .bar { width: 4px; height: 14px; }
.diag2-chart-title .val { margin-left: auto; font-size: 16px; font-weight: 700; }
.diag2-chart { width: 100%; height: 120px; display: block; }
.diag2-spark { width: 100%; height: 28px; display: block; margin-top: 8px; }
@media (max-width: 900px) { .diag2-charts { grid-template-columns: 1fr; } }

/* ===== css/athena-cadastro-2026.css ===== */
/* ============================================================
   ATHENA · CADASTROS (redesign 2026) — Caminhões e Usuários.
   Cópia fiel das seções isCadCam / isCadUsr da referência
   (implementation/reference/Athena Redesign.dc.html). Classes .cad-*.
   ============================================================ */

/* Scroll interno (roda do mouse) — mesmo fix das outras rotas. */
.athena-content:has(> .cad-root) { height: 100dvh; overflow-y: auto; overflow-x: hidden; }

.cad-root {
  min-height: 100dvh;
  padding: 22px 26px 40px;
  font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  color: var(--ath-text);
}
.cad-root--cam { background: radial-gradient(120% 58% at 82% -12%, rgba(255,90,31,.11), transparent 54%), linear-gradient(180deg,#0c0b0e,#08080a 60%,#060608); }
.cad-root--usr { background: radial-gradient(120% 58% at 84% -12%, rgba(52,200,255,.10), transparent 54%), linear-gradient(180deg,#0c0b0e,#08080a 60%,#060608); }

/* Header */
.cad-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 20px; flex-wrap: wrap; }
.cad-eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border-radius: 100px; font-family: var(--ath-mono); font-size: 9px; letter-spacing: .16em; margin-bottom: 12px; }
.cad-eyebrow--cam { border: 1px solid rgba(255,90,31,.4); background: rgba(255,90,31,.05); color: var(--ath-orange-3); }
.cad-eyebrow--usr { border: 1px solid rgba(52,200,255,.4); background: rgba(52,200,255,.05); color: var(--ath-cyan); }
.cad-h1 { margin: 0; font-size: 32px; font-weight: 600; letter-spacing: -.02em; color: var(--ath-text); line-height: 1; }
.cad-sub { font-family: var(--ath-mono); font-size: 10px; color: var(--ath-muted); margin-top: 8px; }
.cad-head-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; align-items: center; }
.cad-search { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--ath-line-2); background: rgba(255,255,255,.03); }
.cad-search input { background: transparent; border: 0; outline: 0; color: var(--ath-text); font-family: var(--ath-mono); font-size: 11px; width: 150px; }
.cad-new-btn { padding: 11px 16px; border-radius: 12px; border: 0; background: linear-gradient(100deg,#ff5a1f,#ff7a2e); color: #0a0604; font-size: 11px; font-weight: 700; letter-spacing: .06em; cursor: pointer; box-shadow: 0 10px 26px rgba(255,90,31,.3); }
.cad-back-btn { padding: 11px 16px; border-radius: 12px; border: 1px solid var(--ath-line-2); background: transparent; color: var(--ath-text-2); font-family: var(--ath-mono); font-size: 11px; font-weight: 700; cursor: pointer; }
.cad-back-btn:hover { border-color: rgba(255,90,31,.5); color: var(--ath-orange-3); }

/* KPIs */
.cad-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 16px; }
.cad-kpi { position: relative; overflow: hidden; border-radius: 16px; border: 1px solid var(--ath-line); background: linear-gradient(160deg, rgba(255,255,255,.045), rgba(255,255,255,.008)); padding: 18px 20px; }
.cad-kpi-accent { position: absolute; top: 0; left: 0; width: 3px; height: 100%; }
.cad-kpi-l { font-family: var(--ath-mono); font-size: 9px; letter-spacing: .12em; color: var(--ath-muted); }
.cad-kpi-v { font-family: var(--ath-mono); font-size: 40px; font-weight: 700; line-height: 1; margin-top: 12px; }

/* Grid: lista + form */
.cad-grid { display: grid; grid-template-columns: minmax(0,1.55fr) minmax(0,1fr); gap: 16px; align-items: start; }
.cad-card { position: relative; border-radius: 18px; border: 1px solid var(--ath-line); background: linear-gradient(160deg, rgba(255,255,255,.04), rgba(255,255,255,.008)); overflow: hidden; }
.cad-card-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--ath-line); }
.cad-card-title { font-family: var(--ath-mono); font-size: 11px; font-weight: 700; letter-spacing: .14em; color: var(--ath-text); }
.cad-card-count { font-family: var(--ath-mono); font-size: 9px; color: var(--ath-dim); }

/* Tabela */
.cad-thead, .cad-row { display: grid; gap: 12px; align-items: center; padding: 11px 20px; }
.cad-thead { border-bottom: 1px solid var(--ath-line); font-family: var(--ath-mono); font-size: 8.5px; letter-spacing: .1em; color: var(--ath-faint); }
.cad-row { border-bottom: 1px solid rgba(255,255,255,.04); cursor: pointer; border-left: 2px solid transparent; transition: background .12s; }
.cad-row:hover { background: rgba(255,255,255,.02); }
.cad-row.sel { border-left-color: var(--ath-orange); background: rgba(255,90,31,.06); }
.cad-cols-cam { grid-template-columns: 110px minmax(0,1.4fr) minmax(0,1fr) 54px 60px 84px; }
.cad-cols-usr { grid-template-columns: minmax(0,1.8fr) 96px minmax(0,1fr) 78px; }
.cad-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.cad-placa { font-family: var(--ath-mono); font-size: 12px; font-weight: 700; }
.cad-modelo { font-size: 12px; font-weight: 600; color: var(--ath-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cad-modelo-sub { font-family: var(--ath-mono); font-size: 8.5px; color: var(--ath-dim); margin-top: 2px; }
.cad-cell-mono { font-family: var(--ath-mono); font-size: 10px; color: var(--ath-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cad-status { font-family: var(--ath-mono); font-size: 9px; font-weight: 700; letter-spacing: .06em; text-align: center; padding: 3px 6px; border-radius: 6px; }
.cad-status--on { color: var(--ath-green); background: rgba(53,224,127,.12); }
.cad-status--off { color: var(--ath-dim); background: rgba(255,255,255,.05); }

/* Avatares / perfis (usuários) */
.cad-avatar { width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-family: var(--ath-mono); font-weight: 700; font-size: 12px; color: #fff; flex: 0 0 auto; background: linear-gradient(135deg,#ff5a1f,#ff9147); }
.cad-avatar--cyan { background: linear-gradient(135deg,#34c8ff,#0f83c0); }
.cad-perfil { font-family: var(--ath-mono); font-size: 9px; font-weight: 700; letter-spacing: .06em; text-align: center; padding: 3px 6px; border-radius: 6px; }
.cad-perfil--admin { color: var(--ath-orange-3); background: rgba(255,90,31,.14); }
.cad-perfil--gestor { color: var(--ath-cyan); background: rgba(52,200,255,.14); }
.cad-perfil--op { color: var(--ath-green); background: rgba(53,224,127,.12); }
.cad-perfil--view { color: var(--ath-muted); background: rgba(255,255,255,.05); }

/* Form (direita) */
.cad-form-body { padding: 18px 22px 22px; }
.cad-form-head { display: flex; align-items: center; gap: 14px; padding: 18px 22px 4px; }
.cad-sec { font-family: var(--ath-mono); font-size: 9px; font-weight: 700; letter-spacing: .16em; color: var(--ath-orange-3); margin: 4px 0 12px; }
.cad-root--usr .cad-sec { color: var(--ath-cyan); }
.cad-fgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 20px; }
.cad-fspan { grid-column: 1 / 3; }
.cad-lbl { display: block; font-family: var(--ath-mono); font-size: 8px; letter-spacing: .1em; color: var(--ath-muted); margin-bottom: 5px; text-transform: uppercase; }
.cad-fld { width: 100%; background: var(--ath-surface); border: 1px solid var(--ath-line-2); border-radius: 10px; padding: 11px 12px; color: var(--ath-text); font-family: var(--ath-sans); font-size: 13px; outline: none; }
.cad-fld:focus { border-color: var(--ath-orange); }
.cad-root--usr .cad-fld:focus { border-color: var(--ath-cyan); }

/* Toggle */
.cad-toggle-row { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-radius: 12px; background: rgba(255,255,255,.02); border: 1px solid var(--ath-line); margin-bottom: 20px; }
.cad-toggle-title { font-size: 13px; font-weight: 600; color: var(--ath-text); }
.cad-toggle-sub { font-family: var(--ath-mono); font-size: 9px; color: var(--ath-muted); margin-top: 3px; }
.cad-switch { position: relative; width: 44px; height: 24px; border-radius: 100px; cursor: pointer; transition: background .2s; flex: 0 0 auto; background: rgba(255,255,255,.12); }
.cad-switch.on { background: var(--ath-green); }
.cad-switch-knob { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .2s; }
.cad-switch.on .cad-switch-knob { transform: translateX(20px); }

/* Fonte GPS/LBS + chips perfil */
.cad-choice { display: flex; gap: 8px; }
.cad-choice-btn { flex: 1; padding: 10px; border-radius: 10px; border: 1px solid var(--ath-line-2); background: transparent; color: var(--ath-text-2); font-family: var(--ath-mono); font-size: 11px; font-weight: 700; cursor: pointer; transition: all .15s; }
.cad-choice-btn.on { background: var(--ath-orange); border-color: var(--ath-orange); color: #080808; }
.cad-root--usr .cad-choice-btn.on { background: var(--ath-cyan); border-color: var(--ath-cyan); color: #080808; }

/* Botões salvar/limpar */
.cad-actions { display: flex; align-items: center; gap: 10px; }
.cad-clear { padding: 12px 18px; border-radius: 12px; border: 1px solid var(--ath-line-2); background: transparent; color: var(--ath-text-2); font-size: 12px; font-weight: 600; cursor: pointer; }
.cad-save { flex: 1; padding: 12px; border-radius: 12px; border: 0; background: linear-gradient(100deg,#ff5a1f,#ff7a2e); color: #0a0604; font-size: 12px; font-weight: 700; letter-spacing: .06em; cursor: pointer; box-shadow: 0 10px 26px rgba(255,90,31,.3); }
.cad-save:disabled { opacity: .6; cursor: wait; }
.cad-saved { margin-top: 12px; display: flex; align-items: center; gap: 8px; padding: 11px 14px; border-radius: 12px; background: rgba(53,224,127,.1); border: 1px solid rgba(53,224,127,.35); color: var(--ath-green); font-family: var(--ath-mono); font-size: 11px; }
.cad-err { margin-top: 12px; padding: 11px 14px; border-radius: 12px; background: rgba(255,59,48,.08); border: 1px solid rgba(255,59,48,.35); color: #ff6b60; font-family: var(--ath-mono); font-size: 11px; }

/* Placa (caminhões) */
.cad-plate { width: 206px; flex: 0 0 auto; border-radius: 9px; overflow: hidden; border: 2px solid #0c0c0c; background: #f2f2f0; box-shadow: 0 10px 26px rgba(0,0,0,.5); }
.cad-plate-top { height: 20px; background: #153aa0; display: flex; align-items: center; justify-content: space-between; padding: 0 8px; }
.cad-plate-top span { font-family: 'Space Grotesk'; font-size: 7px; font-weight: 700; letter-spacing: .12em; color: #fff; }
.cad-plate-num { text-align: center; padding: 5px 0 7px; font-family: var(--ath-mono); font-size: 29px; font-weight: 700; letter-spacing: .12em; color: #111; }

/* Permissões (usuários) */
.cad-perms { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-bottom: 20px; }
.cad-perm { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 11px 13px; border-radius: 12px; background: rgba(255,255,255,.02); border: 1px solid var(--ath-line); }
.cad-perm-lbl { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 600; color: var(--ath-text-2); min-width: 0; }
.cad-switch-sm { position: relative; width: 40px; height: 22px; border-radius: 100px; cursor: pointer; transition: background .2s; flex: 0 0 auto; background: rgba(255,255,255,.12); }
.cad-switch-sm.on { background: var(--ath-cyan); }
.cad-switch-sm-knob { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .2s; }
.cad-switch-sm.on .cad-switch-sm-knob { transform: translateX(18px); }
.cad-perfil-chips { display: flex; gap: 7px; margin-bottom: 16px; flex-wrap: wrap; }
.cad-chip { padding: 8px 12px; border-radius: 10px; border: 1px solid var(--ath-line-2); background: transparent; color: var(--ath-text-2); font-family: var(--ath-mono); font-size: 10px; font-weight: 700; cursor: pointer; }
.cad-chip.on { background: var(--ath-cyan); border-color: var(--ath-cyan); color: #080808; }
.cad-bigavatar { width: 56px; height: 56px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-family: var(--ath-mono); font-weight: 700; font-size: 20px; color: #fff; flex: 0 0 auto; background: linear-gradient(135deg,#34c8ff,#0f83c0); }
.cad-form-title { font-size: 19px; font-weight: 600; color: var(--ath-text); line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cad-form-subtitle { font-family: var(--ath-mono); font-size: 9px; color: var(--ath-muted); margin-top: 6px; }

@media (max-width: 1050px) {
  .cad-kpis { grid-template-columns: repeat(2, 1fr); }
  .cad-grid { grid-template-columns: 1fr; }
}

/* ===== css/athena-esg-2026.css ===== */
/* ============================================================
   ATHENA · PAINEL ESG & CO₂ (/esg) — GHG Protocol Scope 1.
   Surfaça o que o AthenaEsgService já calculava (antes só via API).
   ============================================================ */
.esg-page{ min-height:100vh; padding:22px 26px 40px; color:#f4f2ee;
  background:radial-gradient(circle at 50% 0%,#141013,#08080a 60%,#050506);
  font-family:'Space Grotesk','Inter',system-ui,sans-serif; }
.esg-top{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:22px; }
.esg-brand{ display:flex; align-items:center; gap:13px; }
.esg-brand img{ height:38px; width:auto; display:block; }
.esg-title{ font-size:21px; font-weight:600; line-height:1; }
.esg-sub{ font-family:'IBM Plex Mono',monospace; font-size:9px; letter-spacing:.16em; color:#ff9147; margin-top:6px; }
.esg-actions{ display:flex; gap:8px; flex-wrap:wrap; }
.esg-chip{ padding:9px 15px; border-radius:11px; border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.03); color:#c7c3ba; font-size:12px; font-weight:600; cursor:pointer; transition:all .15s; }
.esg-chip:hover:not(:disabled){ border-color:rgba(255,90,31,.5); color:#ff9147; }
.esg-chip.on{ border-color:#ff5a1f; background:rgba(255,90,31,.12); color:#ff9147; }
.esg-chip:disabled{ opacity:.5; cursor:default; }

.esg-msg{ padding:40px 0; text-align:center; font-family:'IBM Plex Mono',monospace; font-size:12px; color:#8a877f; letter-spacing:1px; }
.esg-erro{ color:#ff6b60; }

.esg-kpis{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:11px; margin-bottom:14px; }
.esg-kpi{ padding:16px 18px; border-radius:16px; border:1px solid rgba(255,255,255,.1);
  background:linear-gradient(155deg,rgba(255,255,255,.07),rgba(255,255,255,.012)); }
.esg-kpi-n{ font-family:'IBM Plex Mono',monospace; font-size:29px; font-weight:700; line-height:1; }
.esg-kpi-l{ font-family:'IBM Plex Mono',monospace; font-size:8px; letter-spacing:.12em; color:#8a877f; margin-top:9px; }

.esg-meta{ font-family:'IBM Plex Mono',monospace; font-size:9.5px; color:#8a877f; line-height:1.7; margin-bottom:24px; }
.esg-meta b{ color:#c7c3ba; }

.esg-sec{ font-family:'IBM Plex Mono',monospace; font-size:10px; font-weight:700; letter-spacing:.15em;
  color:#ff9147; margin:0 0 13px; }
.esg-sec-h{ font-weight:400; letter-spacing:.06em; color:#6c6a63; text-transform:none; }

.esg-tipos{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:11px; margin-bottom:26px; }
.esg-tipo{ padding:14px 16px; border-radius:14px; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.03); }
.esg-tipo-top{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.esg-tipo-n{ font-size:13px; font-weight:600; }
.esg-tipo-q{ font-family:'IBM Plex Mono',monospace; font-size:8.5px; color:#6c6a63; }
.esg-tipo-bar{ height:6px; border-radius:100px; background:rgba(255,255,255,.07); margin:10px 0 7px; overflow:hidden; }
.esg-tipo-bar > span{ display:block; height:100%; border-radius:100px; background:linear-gradient(90deg,#35e07f,#34c8ff); }
.esg-tipo-v{ font-family:'IBM Plex Mono',monospace; font-size:9.5px; color:#9a978f; }

.esg-tbl-wrap{ overflow-x:auto; border-radius:14px; border:1px solid rgba(255,255,255,.08); margin-bottom:24px; }
.esg-tbl{ width:100%; border-collapse:collapse; min-width:680px; }
.esg-tbl th{ text-align:left; padding:11px 13px; font-family:'IBM Plex Mono',monospace; font-size:8.5px;
  letter-spacing:.1em; color:#ff9147; background:rgba(255,90,31,.07); border-bottom:1px solid rgba(255,90,31,.2); white-space:nowrap; }
.esg-tbl th.r, .esg-tbl td.r{ text-align:right; }
.esg-tbl td{ padding:11px 13px; font-size:12px; color:#c7c3ba; border-bottom:1px solid rgba(255,255,255,.045); white-space:nowrap; }
.esg-tbl tbody tr:hover{ background:rgba(255,255,255,.025); }
.esg-pos{ font-family:'IBM Plex Mono',monospace; font-size:11px; color:#8a877f; }
.esg-nome{ font-family:'IBM Plex Mono',monospace; font-weight:600; color:#f4f2ee; }
.esg-int{ font-family:'IBM Plex Mono',monospace; font-weight:700; color:#35e07f; }

.esg-nota{ padding:14px 16px; border-radius:13px; font-size:11.5px; line-height:1.65; color:#c7c3ba;
  background:rgba(255,210,63,.06); border:1px solid rgba(255,210,63,.28); }
.esg-nota b{ color:#ffd23f; }

@media (max-width: 640px){
  .esg-page{ padding:16px 14px 32px; }
  .esg-kpi-n{ font-size:24px; }
}

/* ===== css/athena-leaderboard-2026.css ===== */
/* ============================================================
   ATHENA · LEADERBOARD ECO-DRIVING (/leaderboard)
   Pódio + ranking de caminhões e motoristas. Score/streak já
   existiam por caminhão; aqui viram competição da frota.
   ============================================================ */
.lb-page{ min-height:100vh; padding:22px 26px 40px; color:#f4f2ee;
  background:radial-gradient(circle at 50% 0%,#141013,#08080a 60%,#050506);
  font-family:'Space Grotesk','Inter',system-ui,sans-serif; }
.lb-top{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:24px; }
.lb-brand{ display:flex; align-items:center; gap:13px; }
.lb-brand img{ height:38px; width:auto; display:block; }
.lb-title{ font-size:21px; font-weight:600; line-height:1; }
.lb-sub{ font-family:'IBM Plex Mono',monospace; font-size:8.5px; letter-spacing:.16em; color:#ff9147; margin-top:6px; }
.lb-actions{ display:flex; gap:8px; flex-wrap:wrap; }
.lb-chip{ padding:9px 15px; border-radius:11px; border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.03); color:#c7c3ba; font-size:12px; font-weight:600; cursor:pointer; transition:all .15s; }
.lb-chip:hover{ border-color:rgba(255,90,31,.5); color:#ff9147; }
.lb-chip.on{ border-color:#ff5a1f; background:rgba(255,90,31,.12); color:#ff9147; }
.lb-msg{ padding:40px 0; text-align:center; font-family:'IBM Plex Mono',monospace; font-size:12px; color:#8a877f; letter-spacing:1px; }

/* Pódio */
.lb-podio{ display:flex; align-items:flex-end; justify-content:center; gap:14px; margin:8px 0 30px; }
.lb-podio-col{ flex:0 1 190px; display:flex; flex-direction:column; align-items:center; text-align:center; }
.lb-podio-medal{ font-size:30px; line-height:1; }
.lb-podio-nome{ font-family:'IBM Plex Mono',monospace; font-size:11px; font-weight:600; color:#f4f2ee;
  margin-top:7px; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lb-podio-score{ font-family:'IBM Plex Mono',monospace; font-size:34px; font-weight:700; line-height:1; margin-top:5px; }
.lb-podio-tier{ font-family:'IBM Plex Mono',monospace; font-size:9.5px; color:#c7c3ba; margin-top:5px; }
.lb-podio-base{ width:100%; margin-top:9px; border-radius:12px 12px 0 0; border:1px solid rgba(255,255,255,.09); border-bottom:0; }

.lb-sec{ font-family:'IBM Plex Mono',monospace; font-size:10px; font-weight:700; letter-spacing:.15em; color:#ff9147; margin:0 0 13px; }
.lb-sec-h{ font-weight:400; letter-spacing:.06em; color:#6c6a63; }

.lb-tbl-wrap{ overflow-x:auto; border-radius:14px; border:1px solid rgba(255,255,255,.08); margin-bottom:18px; }
.lb-tbl{ width:100%; border-collapse:collapse; min-width:720px; }
.lb-tbl th{ text-align:left; padding:11px 13px; font-family:'IBM Plex Mono',monospace; font-size:8.5px;
  letter-spacing:.1em; color:#ff9147; background:rgba(255,90,31,.07); border-bottom:1px solid rgba(255,90,31,.2); white-space:nowrap; }
.lb-tbl th.r, .lb-tbl td.r{ text-align:right; }
.lb-tbl td{ padding:11px 13px; font-size:12px; color:#c7c3ba; border-bottom:1px solid rgba(255,255,255,.045); white-space:nowrap; }
.lb-tbl tbody tr:hover{ background:rgba(255,255,255,.025); }
.lb-pos{ font-family:'IBM Plex Mono',monospace; font-size:12px; color:#8a877f; }
.lb-nome{ font-family:'IBM Plex Mono',monospace; font-weight:600; color:#f4f2ee; }
.lb-mot{ color:#9a978f; }
.lb-cams{ font-family:'IBM Plex Mono',monospace; font-size:9.5px; color:#6c6a63; }
.lb-badge{ font-family:'IBM Plex Mono',monospace; font-size:11px; font-weight:700; padding:2px 9px;
  border-radius:100px; border:1px solid currentColor; }
.lb-dot{ display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:6px; }
.lb-nota{ font-family:'IBM Plex Mono',monospace; font-size:9px; color:#5a584f; line-height:1.6; }
.lb-nota b{ color:#8a877f; }

@media (max-width: 640px){
  .lb-page{ padding:16px 14px 32px; }
  .lb-podio{ gap:8px; }
  .lb-podio-score{ font-size:26px; }
  .lb-podio-medal{ font-size:24px; }
}

/* ===== css/athena-mobile-app.css ===== */
/* ============================================================
   ATHENA · MOBILE APP (redesign 2026) — cópia fiel do pacote
   implementation/mobile (athena-mobile.css + estilos do mock).
   App-shell de 1 coluna + tab bar. Namespace .ath-m-*.
   ============================================================ */

:root{
  --ath-safe-top:    env(safe-area-inset-top, 0px);
  --ath-safe-bottom: env(safe-area-inset-bottom, 0px);
  --ath-tabbar-h: 78px;
}

/* keyframes (do mock) */
@keyframes ath-ping{0%{transform:scale(1);opacity:.9}100%{transform:scale(2.1);opacity:0}}
@keyframes ath-sheen{0%{transform:translateX(-120%)}100%{transform:translateX(120%)}}

/* Scroll interno (roda/touch) — neste app o scroll do documento não responde
   (as telas usam container próprio). Damos ao wrapper da rota /m altura de
   viewport com overflow, senão a página mobile não rola. */
.athena-content:has(> .ath-m-app){ height:100dvh; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; }

/* App-shell mobile */
.ath-m-app{ min-height:100dvh; background:radial-gradient(circle at 50% 0%,#141013,#08080a 60%,#050506); color:var(--ath-text,#f4f2ee); overflow-x:hidden; font-family:'Space Grotesk','Inter',system-ui,sans-serif; }
.ath-m-view{ padding: calc(var(--ath-safe-top) + 14px) 16px calc(var(--ath-tabbar-h) + var(--ath-safe-bottom) + 20px); animation: ath-slidein .4s cubic-bezier(.16,1,.3,1) both; }
.ath-m-view--flush{ padding:0; }

/* Cabeçalho de tela */
.ath-m-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.ath-m-eyebrow{ font-family:'IBM Plex Mono',monospace; font-size:8.5px; letter-spacing:.24em; color:var(--ath-orange-3,#ff9147); margin-bottom:6px; }
.ath-m-title{ font-size:23px; font-weight:600; line-height:1; color:var(--ath-text,#f4f2ee); }
.ath-m-avatar{ width:42px;height:42px;border-radius:50%;background:rgba(255,90,31,.1);border:1px solid rgba(255,90,31,.3);display:grid;place-items:center;font-size:16px;flex:0 0 auto; }
.ath-m-back{ width:38px;height:38px;flex:0 0 auto;border-radius:11px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.03);color:#c7c3ba;font-size:16px;display:grid;place-items:center;cursor:pointer; }

/* Cards */
.ath-m-card{ background:linear-gradient(155deg,rgba(255,255,255,.07),rgba(255,255,255,.012)); border:1px solid rgba(255,255,255,.1); border-radius:18px; box-shadow:0 1px 0 rgba(255,255,255,.05) inset; }
.ath-m-soft{ background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.07); border-radius:14px; }

/* KPIs */
.ath-m-kpis{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.ath-m-kpis--3{ grid-template-columns:repeat(3,1fr); gap:9px; }
.ath-m-kpi{ padding:15px 16px; }
.ath-m-kpi .n{ font-family:'IBM Plex Mono',monospace; font-size:32px; font-weight:700; line-height:1; }
.ath-m-kpi .l{ font-family:'IBM Plex Mono',monospace; font-size:8.5px; letter-spacing:.12em; color:#8a877f; margin-top:8px; }

/* Lista tocável */
.ath-m-row{ width:100%; text-align:left; display:flex; align-items:center; gap:12px; min-height:44px; padding:13px 14px; cursor:pointer; -webkit-tap-highlight-color:transparent; border:0; }
.ath-m-row:active{ transform:scale(.985); transition:transform .08s; }
.ath-m-dot{ width:9px; height:9px; border-radius:50%; flex:0 0 auto; }
.ath-m-pill{ font-family:'IBM Plex Mono',monospace; font-size:8.5px; font-weight:700; letter-spacing:.06em; padding:3px 8px; border-radius:100px; }

/* TAB BAR */
.ath-tabbar{ position:fixed; left:0; right:0; bottom:0; z-index:50; height:calc(var(--ath-tabbar-h) + var(--ath-safe-bottom)); padding:10px 8px var(--ath-safe-bottom); display:flex; align-items:flex-start; gap:2px;
  background:linear-gradient(180deg,rgba(10,10,12,.55),rgba(10,10,12,.96)); backdrop-filter:blur(16px); border-top:1px solid rgba(255,255,255,.08); }
.ath-tab{ flex:1; display:flex; flex-direction:column; align-items:center; gap:5px; padding:6px 4px; background:transparent; border:0; cursor:pointer; color:#6c6a63; font-family:'Space Grotesk',sans-serif; font-size:9px; font-weight:600; }
.ath-tab svg{ width:21px; height:21px; }
.ath-tab.is-active{ color:var(--ath-orange,#ff5a1f); }

/* COCKPIT mobile */
.ath-m-cockpit{ position:relative; overflow:hidden; padding:20px 16px; }
.ath-m-cockpit-sheen{ position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,#ff5a1f 30%,#ffd23f 50%,#34c8ff 70%,transparent); }
.ath-m-cockpit-sheen::after{ content:'';position:absolute;inset:0;width:40%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.9),transparent);animation:ath-sheen 3.4s ease-in-out infinite; }
.ath-m-dial{ position:relative; width:210px; height:210px; margin:0 auto; }
.ath-m-dial .big{ font-family:'IBM Plex Mono',monospace; font-size:46px; font-weight:700; color:#f4f2ee; line-height:1; }
.ath-m-strip{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; margin-top:8px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.06); border-radius:12px; overflow:hidden; }
.ath-m-strip > div{ background:#0b0b0d; padding:11px 6px; text-align:center; }
.ath-m-strip .n{ font-family:'IBM Plex Mono',monospace; font-size:18px; font-weight:700; line-height:1; }
.ath-m-strip .l{ font-family:'IBM Plex Mono',monospace; font-size:7px; color:#6c6a63; margin-top:5px; }
.ath-m-rad{ display:flex; align-items:center; gap:12px; padding:13px 14px; }
.ath-m-rad-ring{ position:relative; width:46px; height:46px; border-radius:50%; flex:0 0 auto; }
.ath-m-rad-ring > span{ position:absolute; inset:5px; border-radius:50%; background:#0b0b0d; display:grid; place-items:center; font-family:'IBM Plex Mono',monospace; font-size:12px; font-weight:700; }

/* Tabela Motor & Fluidos / genérica */
.ath-m-tbl-head{ padding:13px 16px; border-bottom:1px solid rgba(255,90,31,.2); font-family:'IBM Plex Mono',monospace; font-size:10px; font-weight:700; letter-spacing:.12em; color:#ff9147; }
.ath-m-tbl-row{ display:flex; align-items:center; justify-content:space-between; padding:11px 16px; border-bottom:1px solid rgba(255,255,255,.04); }
.ath-m-tbl-row .k{ font-size:12px; color:#9a978f; }
.ath-m-tbl-row .v{ font-family:'IBM Plex Mono',monospace; font-size:13px; font-weight:600; color:#c7c3ba; }
/* TEXTO LONGO NA LINHA DE TABELA — 2026-07-31.
   As tabelas novas do ativo (falhas traduzidas, "Sem identificacao", nome de
   motorista) trazem valores MUITO maiores que os "92 °C" para os quais estas
   regras foram escritas. Sem limite, o valor empurrava o rotulo para fora da
   tela em aparelho de 360px. min-width:0 e o que permite o flex encolher; sem
   ele o item nunca fica menor que o conteudo e o estouro acontece de qualquer
   jeito. */
.ath-m-tbl-row .k{ min-width:0; flex:0 1 auto; }
.ath-m-tbl-row .v{ min-width:0; flex:1 1 auto; text-align:right; margin-left:12px; overflow-wrap:anywhere; }
/* Alvo de toque: linha de falha e clicavel no futuro e precisa de altura
   confortavel; 44px e o minimo recomendado para o dedo. */
.ath-m-tbl-row{ min-height:44px; }

/* Mapa full-bleed */
.ath-m-map{ position:relative; height:calc(100dvh - var(--ath-tabbar-h) - var(--ath-safe-bottom)); }
.ath-m-map-el{ position:absolute; inset:0; background:linear-gradient(135deg,#0d1410,#0a0f0c); }
.ath-m-map-vig{ position:absolute; inset:0; pointer-events:none; box-shadow:inset 0 0 90px 26px rgba(6,6,8,.6); z-index:390; }
.ath-m-map-top{ position:absolute; top:calc(var(--ath-safe-top) + 12px); left:14px; right:14px; z-index:400; display:flex; gap:7px; }
.ath-m-map-stat{ flex:1; padding:9px 11px; background:rgba(8,8,10,.82); backdrop-filter:blur(8px); border-radius:12px; text-align:center; }
.ath-m-map-stat .n{ font-family:'IBM Plex Mono',monospace; font-size:17px; font-weight:700; line-height:1; }
.ath-m-map-stat .l{ font-family:'IBM Plex Mono',monospace; font-size:7px; letter-spacing:.1em; color:#8a877f; margin-top:4px; }
.ath-m-map-sheet{ position:absolute; left:0; right:0; bottom:0; z-index:400; background:linear-gradient(180deg,transparent,rgba(8,8,10,.7) 22%); padding:40px 14px calc(var(--ath-tabbar-h) + 14px); }

/* Heatmap */
.ath-m-heat{ display:grid; grid-template-columns:repeat(14,1fr); gap:4px; }
.ath-m-heat i{ width:100%; aspect-ratio:1; border-radius:3px; display:block; }

/* Mapa mobile: sem controle de zoom (o mock usa pinch-to-zoom) — evita
   sobrepor os contadores do topo. */
.ath-m-map .leaflet-control-zoom{ display:none !important; }

/* Leaflet tooltip fino (do mock) */
.leaflet-tooltip.ath-tip{ background:rgba(8,8,10,.82)!important; border:1px solid rgba(255,90,31,.4)!important; color:#f4f2ee!important; font-family:'IBM Plex Mono',monospace!important; font-size:8px!important; font-weight:600!important; padding:1px 5px!important; border-radius:3px!important; box-shadow:none!important; }
.leaflet-tooltip.ath-tip::before{ display:none!important; }

@media (hover:none){ .ath-btn:hover,.ath-card:hover{ filter:none; } }

/* ── Recursos 2026: transições, geolocalização, offline ────────────────── */
/* Tab bar: feedback tátil suave + indicador ativo animado */
.ath-tab{ transition:color .18s ease, transform .1s ease; position:relative; }
.ath-tab:active{ transform:scale(.9); }
.ath-tab.is-active svg{ animation:ath-tabpop .28s cubic-bezier(.16,1,.3,1) both; }
@keyframes ath-tabpop{ 0%{ transform:scale(.8) } 60%{ transform:scale(1.12) } 100%{ transform:scale(1) } }

/* Transição suave entre telas (reforça o slide-in do .ath-m-view) */
.ath-m-view{ will-change:transform, opacity; }

/* Botão flutuante "perto de mim" no mapa */
.ath-m-locate{ position:absolute; right:14px; bottom:calc(var(--ath-tabbar-h) + var(--ath-safe-bottom) + 18px); z-index:420;
  width:46px; height:46px; border-radius:14px; border:1px solid rgba(52,200,255,.4);
  background:rgba(8,8,10,.86); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); color:#34c8ff; display:grid; place-items:center;
  box-shadow:0 8px 24px rgba(0,0,0,.5); cursor:pointer; transition:transform .1s ease; }
.ath-m-locate:active{ transform:scale(.92); }
.ath-m-locate.buscando{ animation:ath-locate-pulse 1s ease-in-out infinite; }
@keyframes ath-locate-pulse{ 0%,100%{ opacity:1 } 50%{ opacity:.45 } }

/* Faixa "offline / últimos dados" */
.ath-m-offline{ display:flex; align-items:center; gap:9px; margin:0 0 12px; padding:11px 14px; border-radius:13px;
  border:1px solid rgba(255,210,63,.35); background:rgba(255,210,63,.08); color:#ffd23f;
  font-family:'IBM Plex Mono',monospace; font-size:10px; line-height:1.4; }

/* ── Skeleton loaders (shimmer) ─────────────────────────────────────────── */
/* Placeholders enquanto a frota carrega: passa a sensação de app nativo em vez
   de um "CARREGANDO…" solto. Usa as mesmas medidas dos cards reais. */
.ath-m-sk{ position:relative; overflow:hidden; border-radius:12px;
  background:linear-gradient(100deg, rgba(255,255,255,.055) 0%, rgba(255,255,255,.10) 40%, rgba(255,255,255,.055) 70%);
  background-size:220% 100%; animation:ath-sk-slide 1.25s ease-in-out infinite; }
@keyframes ath-sk-slide{ 0%{ background-position:120% 0 } 100%{ background-position:-120% 0 } }
.ath-m-sk--n{ height:30px; width:62%; }          /* número grande do KPI */
.ath-m-sk--l{ height:8px;  width:78%; margin-top:12px; }  /* rótulo do KPI */
.ath-m-sk--t{ height:12px; width:52%; }          /* título de linha */
.ath-m-sk--s{ height:8px;  width:72%; margin-top:7px; }   /* subtítulo */
.ath-m-sk--dot{ width:9px; height:9px; border-radius:50%; flex:0 0 auto; }
.ath-m-sk--pill{ width:44px; height:16px; border-radius:100px; flex:0 0 auto; }
.ath-m-sk--chart{ height:90px; width:100%; }
@media (prefers-reduced-motion: reduce){ .ath-m-sk{ animation:none; } }

/* Botão compartilhar (header do ativo) */
.ath-m-share{ width:38px; height:38px; flex:0 0 auto; border-radius:11px; border:1px solid rgba(53,224,127,.35);
  background:rgba(53,224,127,.08); color:#35e07f; display:grid; place-items:center; cursor:pointer; transition:transform .1s ease; }
.ath-m-share:active{ transform:scale(.9); }

/* ===== css/athena-sidebar-2026.css ===== */
/* ============================================================
   ATHENA · BARRA LATERAL (redesign 2026) — cópia fiel da seção isB
   de implementation/reference/Athena Redesign.dc.html (aside).
   Árvore PLANA (sem cards por nó), pills laranja/vermelho, LEDs.
   Carregado por último → vence o home.css. Namespace .side-panel.
   ============================================================ */

.side-panel {
  /* Quase opaca (antes .7 + blur): a versão translúcida dependia do backdrop, que
     sob o zoom do modo XL era amostrado diferente e mudava a COR da barra. Sólida,
     fica idêntica em qualquer tamanho de tela. */
  background: rgba(11,10,13,.985) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-right: 1px solid rgba(255,255,255,.07) !important;
  display: flex !important; flex-direction: column !important;
  font-family: 'Space Grotesk','Inter',system-ui,sans-serif !important;
}

/* ---- Brand ---- */
.side-panel .brand-header { display: flex !important; align-items: center !important; gap: 12px !important; padding: 20px 18px !important; cursor: pointer; }
.side-panel .brand-logo {
  width: 60px !important; height: 60px !important; border-radius: 16px !important;
  display: grid !important; place-items: center !important;
  border: 1px solid rgba(255,90,31,.4) !important; background: rgba(255,90,31,.06) !important;
  box-shadow: none !important;   /* remove o glow pesado antigo */
}
.side-panel .brand-title { font-size: 18px !important; font-weight: 600 !important; letter-spacing: .2em !important; color: #f4f2ee !important; line-height: 1 !important; }
.side-panel .brand-subtitle { font-family: 'IBM Plex Mono',monospace !important; font-size: 8px !important; letter-spacing: .1em !important; color: #6c6a63 !important; text-transform: uppercase; margin-top: 4px !important; }

/* ---- Busca ---- */
.side-panel .search-container { padding: 6px 16px 12px !important; }
.side-panel .search-input {
  height: 44px !important; padding: 0 14px !important;
  background: rgba(255,255,255,.03) !important; border: 1px solid rgba(255,255,255,.09) !important;
  border-radius: 12px !important; color: #f4f2ee !important; font-family: 'Space Grotesk',sans-serif !important; font-size: 12px !important;
}
.side-panel .search-input::placeholder { color: #6c6a63 !important; }

/* ---- Título da seção ---- */
.side-panel .fleet-section-title { padding: 4px 18px 8px !important; font-family: 'IBM Plex Mono',monospace !important; font-size: 9px !important; font-weight: 400 !important; letter-spacing: .16em !important; color: #5a584f !important; text-transform: uppercase; background: none !important; border: 0 !important; }

/* ---- Lista (scroll) ---- */
.side-panel .vehicle-list-container { flex: 1 !important; overflow-y: auto !important; overflow-x: hidden !important; min-height: 0 !important; padding: 0 10px !important; }

/* ---- Nós da árvore: PLANOS (sem card/borda), só hover sutil ---- */
.side-panel .node-item {
  display: flex !important; align-items: center !important; gap: 9px !important;
  padding: 11px 12px !important; margin: 0 !important;
  background: none !important; border: 0 !important; border-radius: 10px !important;
  box-shadow: none !important; cursor: pointer; transition: background .15s !important;
}
.side-panel .node-item:hover { background: rgba(255,255,255,.03) !important; transform: none !important; }
.side-panel .node-item::before, .side-panel .node-item::after { display: none !important; content: none !important; }
.side-panel .node-usina  { padding-left: 22px !important; }
.side-panel .node-frente { padding-left: 34px !important; }
.side-panel .chevron { font-size: 10px !important; color: #ff7a2e !important; transition: transform .2s !important; display: inline-block !important; }
.side-panel .node-usina .chevron { font-size: 9px !important; color: #8a877f !important; }
.side-panel .node-frente .chevron { font-size: 8px !important; color: #6c6a63 !important; }
.side-panel .chevron.open { transform: rotate(90deg) !important; }
.side-panel .node-main { flex: 1 !important; min-width: 0 !important; }
.side-panel .node-title { font-size: 12px !important; font-weight: 600 !important; letter-spacing: normal !important; color: #f4f2ee !important; display: block !important; }
.side-panel .node-usina .node-title { font-size: 11px !important; }
.side-panel .node-frente .node-title { font-size: 10px !important; }
.side-panel .node-title.text-fault { color: #ff6b60 !important; }
.side-panel .node-sub { font-family: 'IBM Plex Mono',monospace !important; font-size: 8.5px !important; color: #6c6a63 !important; margin-top: 3px !important; display: block !important; text-transform: none !important; letter-spacing: 0 !important; }

/* ---- Pills X/Y: laranja (outline) por padrão; vermelho preenchido em falha ---- */
.side-panel .node-count-pill {
  font-family: 'IBM Plex Mono',monospace !important; font-size: 11px !important; font-weight: 700 !important;
  padding: 4px 11px !important; border-radius: 100px !important;
  background: transparent !important; border: 1px solid rgba(255,90,31,.6) !important; color: #ff9147 !important;
  flex: 0 0 auto !important;
}
.side-panel .node-count-pill.ok { background: transparent !important; border-color: rgba(255,90,31,.6) !important; color: #ff9147 !important; }
.side-panel .node-count-pill.fault { background: #ff5a1f !important; border-color: #ff5a1f !important; color: #0a0604 !important; }

/* ---- Veículo: linha plana, id mono + sub + LED (sem texto de status) ---- */
.side-panel .vehicle-btn {
  width: 100% !important; display: flex !important; align-items: center !important; gap: 10px !important;
  padding: 9px 12px 9px 42px !important; margin: 1px 0 !important;
  background: none !important; border: 0 !important; border-radius: 10px !important; box-shadow: none !important;
  text-align: left !important; cursor: pointer; transition: background .15s !important;
}
.side-panel .vehicle-btn:hover { background: rgba(255,90,31,.07) !important; }
.side-panel .vehicle-btn.active { background: rgba(255,90,31,.12) !important; }
.side-panel .vehicle-name { font-family: 'IBM Plex Mono',monospace !important; font-size: 11px !important; font-weight: 600 !important; color: #f4f2ee !important; display: block !important; letter-spacing: 0 !important; }
.side-panel .vehicle-btn.btn-fault .vehicle-name { color: #ff6b60 !important; }
.side-panel .vehicle-mini { display: flex !important; gap: 6px !important; font-family: 'IBM Plex Mono',monospace !important; font-size: 8px !important; color: #6c6a63 !important; margin-top: 2px !important; }
.side-panel .vehicle-mini span::after { content: ''; }
/* separador " · " entre pos e vel */
.side-panel .vehicle-mini span:first-child::after { content: ' ·'; color: #4d4b45; }
.side-panel .vehicle-status-pack { flex: 0 0 auto !important; display: flex !important; align-items: center !important; }
.side-panel .vehicle-status-text { display: none !important; }   /* referência mostra só o LED */
.side-panel .led { width: 9px !important; height: 9px !important; border-radius: 50% !important; }
.side-panel .led-on { background: #35e07f !important; box-shadow: 0 0 4px #35e07f !important; }
.side-panel .led-off { background: #8a877f !important; box-shadow: none !important; }

/* ---- OPÇÕES / SAIR: pills outline iguais ---- */
.side-panel .system-actions { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; gap: 10px !important; padding: 14px 16px !important; border-top: 1px solid rgba(255,255,255,.07) !important; background: none !important; }
.side-panel .sys-btn {
  flex: 1 1 0 !important; width: auto !important; min-width: 0 !important; padding: 11px !important; background: rgba(255,255,255,.03) !important;
  border: 1px solid rgba(255,255,255,.1) !important; border-radius: 12px !important;
  color: #c7c3ba !important; font-family: 'Space Grotesk',sans-serif !important; font-size: 10px !important; font-weight: 600 !important; letter-spacing: .08em !important; cursor: pointer; transition: all .15s !important;
}
.side-panel .sys-btn:hover { border-color: rgba(255,90,31,.5) !important; color: #ff9147 !important; }
.side-panel .sys-btn:last-child:hover { border-color: rgba(255,59,48,.5) !important; color: #ff6b60 !important; }

/* ===== css/athena-light-2026.css ===== */
/* ============================================================
   ATHENA · MODO CLARO (2026) — inversão de LUMINÂNCIA
   ------------------------------------------------------------
   O app foi desenhado 100% escuro com ~6000 linhas de cores
   HARDCODED (telemetry-grid.css sozinho tem 1213 valores, 0 vars).
   Reescrever seletor-a-seletor seria inviável e frágil. Em vez
   disso invertemos a LUMINOSIDADE de toda a casca com
   `invert(1) hue-rotate(180deg)`:
     • fundos quase-pretos  → quase-brancos
     • textos claros        → escuros (todos ficam legíveis)
     • laranja/verde/vermelho/ciano → HUE PRESERVADO (o
       invert vira o matiz e o hue-rotate(180) devolve), então
       os acentos continuam laranja etc.
   Depois CONTRA-invertemos as mídias raster (fotos, logos,
   tiles do mapa, canvas, <image> em SVG) pra elas ficarem
   idênticas ao original — só o "chrome" muda de cor.

   Aplicado por ELEMENTO (classe .ath-light no root e nos
   modais), não no <body>, pra não tocar o splash/login (escuros
   por design) nem o modal de RELATÓRIO (documento próprio).
   Responsivo: o filtro vale igual em desktop, XL e mobile —
   é a mesma casca, só invertida.
   Carregado por ÚLTIMO no App.razor → vence o cascade.
   ============================================================ */

/* --- Superfícies que recebem a inversão --- */
.nexus-system-root.ath-light,
.modal-overlay.ath-light {
  filter: invert(1) hue-rotate(180deg);
  /* base clara por trás de qualquer transparência */
  background: #eaedf1 !important;
  /* isola o filtro num contexto próprio */
  -webkit-font-smoothing: antialiased;
}

/* App MOBILE (/m) claro: aplicamos o filtro no CONTAINER de rolagem
   (.athena-content, do tamanho da viewport), NÃO no .ath-m-app. Motivo:
   `filter` num ancestral faz os filhos `position:fixed` (a TAB BAR) se
   posicionarem relativos a ele — se fosse no .ath-m-app (mais alto que a
   tela) a tab bar "escorregaria". No container de 100dvh ela fica correta.
   `:has()` é suportado no iOS 15.4+/Chrome atuais; sem suporte, o tema só
   permanece escuro (degrada sem quebrar). */
.athena-content:has(> .ath-m-app.ath-light) {
  filter: invert(1) hue-rotate(180deg);
  background: #eaedf1 !important;
  -webkit-font-smoothing: antialiased;
}
/* Contra-inverte mídia raster p/ ficar idêntica ao original (mapa Leaflet,
   logos, fotos, canvas) — só o "chrome" muda de cor. */
.athena-content:has(> .ath-m-app.ath-light) img,
.athena-content:has(> .ath-m-app.ath-light) video,
.athena-content:has(> .ath-m-app.ath-light) canvas,
.athena-content:has(> .ath-m-app.ath-light) .ath-m-map-el,
.athena-content:has(> .ath-m-app.ath-light) .leaflet-container,
.athena-content:has(> .ath-m-app.ath-light) .leaflet-tile,
.athena-content:has(> .ath-m-app.ath-light) svg image {
  filter: invert(1) hue-rotate(180deg);
}

/* O overlay escurecedor dos modais (rgba preto) vira branco ao
   inverter e "estoura" a tela. Deixa-o translúcido de novo. */
.modal-overlay.ath-light {
  background: rgba(0,0,0,.28) !important;
}

/* --- CONTRA-INVERSÃO das mídias raster (voltam ao original) --- */
.nexus-system-root.ath-light img,
.nexus-system-root.ath-light video,
.nexus-system-root.ath-light canvas,
.nexus-system-root.ath-light svg image,
.nexus-system-root.ath-light .leaflet-tile,
.modal-overlay.ath-light img,
.modal-overlay.ath-light video,
.modal-overlay.ath-light canvas {
  filter: invert(1) hue-rotate(180deg);
}

/* O logo ATHENA é laranja em fundo transparente: a inversão
   dupla (casca + contra) já o devolve pristino — nada a fazer.
   Marcadores do mapa (SVG/HTML custom) ficam INVERTIDOS junto
   com a casca: hue preservado → continuam laranja/verde, ok. */

/* Barras de rolagem: com a inversão o "thumb" some no claro.
   Reforça um cinza visível. */
.nexus-system-root.ath-light *::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,.28) !important;
}
.nexus-system-root.ath-light *::-webkit-scrollbar-track {
  background: transparent !important;
}

/* Sombras/halos muito escuros viram halos claros gritantes ao
   inverter. Suaviza os drop-shadows mais pesados do chrome pra
   o claro não ficar "sujo". (Só nas superfícies estruturais.) */
.nexus-system-root.ath-light .side-panel,
.nexus-system-root.ath-light .modal-card,
.nexus-system-root.ath-light .modal-card-users {
  box-shadow: none !important;
}