.hess-page { font-family:Inter,Arial,sans-serif; }
.app-wrapper { display:block; }
.hess-main { min-width:0; padding:98px 0 40px; }
.lab-breadcrumb { font-size:13px; color:var(--muted); margin-bottom:18px; }
.header-clean { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:20px; margin-bottom:32px; }
.header-clean h1 { font-size:clamp(26px,3vw,34px); letter-spacing:-.7px; line-height:1.2; font-weight:600; }
.header-clean .sub { color:var(--muted); font-size:13px; margin-top:6px; }
.header-clean .actions { display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
.badge-status { display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:500; }
.badge-status .dot { width:6px; height:6px; border-radius:50%; background:currentColor; }
.badge-status.online { color:#168350; }
.badge-status.offline { color:var(--muted); }
.update-badge { font-size:12px; color:var(--muted); }
.update-badge strong { font-weight:400; }
.btn-clean { display:inline-flex; align-items:center; gap:7px; padding:8px 12px; border:1px solid var(--line); border-radius:7px; font-size:12px; background:var(--surface); color:var(--ink); cursor:pointer; }
.btn-clean.success { background:var(--blue); border-color:var(--blue); color:white; }
.btn-clean:hover { filter:brightness(.95); }
.section-clean { font-size:18px; font-weight:600; margin:0 0 14px; }
.grid-6,.grid-5 { display:grid; gap:0; border:1px solid var(--line); border-radius:10px; overflow:hidden; background:var(--surface); }
.grid-6 { grid-template-columns:repeat(6,minmax(0,1fr)); }
.grid-5 { grid-template-columns:repeat(5,minmax(0,1fr)); }
.hess-page .stat-clean { padding:18px; border:0; border-radius:0; border-right:1px solid var(--line); box-shadow:none; min-width:0; }
.stat-clean:last-child { border-right:0; }
.stat-clean .label { color:var(--muted); font-size:12px; line-height:1.5; display:block; }
.stat-clean .value { color:var(--ink); font-size:23px; font-weight:500; font-variant-numeric:tabular-nums; margin-top:12px; line-height:1.3; white-space:nowrap; }
.stat-clean .unit { font-size:11px; font-weight:400; color:var(--muted); margin-left:6px; }
.conv-clean { display:inline-block; font-size:9px; padding:4px 6px; border:1px solid var(--line); border-radius:4px; margin-top:8px; }
.conv-clean.off { color:var(--muted); }
.conv-clean.on { color:#168350; }
.grid-3 { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.chart-clean { padding:18px; border:1px solid var(--line); border-radius:10px; background:var(--surface); min-width:0; }
.chart-title { font-size:12px; color:var(--muted); margin-bottom:18px; }
.chart-clean canvas { width:100%!important; }
.mb-20 { margin-bottom:36px; }
.mb-12 { margin-bottom:16px; }
@media(max-width:1100px) { .grid-6 { grid-template-columns:repeat(3,minmax(0,1fr)); } .grid-5 { grid-template-columns:repeat(3,minmax(0,1fr)); } .stat-clean { border-bottom:1px solid var(--line)!important; } }
@media(max-width:760px) { .grid-3 { grid-template-columns:1fr; } .grid-5,.grid-6 { grid-template-columns:repeat(2,minmax(0,1fr)); } .stat-clean .value { font-size:22px; } .hess-main { padding-top:86px; } }
        .modal-overlay {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.35);
            backdrop-filter: blur(3px);
            z-index: 1000;
            align-items: center;
            justify-content: center;
        }
        .modal-overlay.active { display: flex; }
        .modal-box {
            background: white;
            border-radius: 20px;
            padding: 28px 32px;
            max-width: 500px;
            width: 90%;
            box-shadow: 0 20px 60px rgba(0,0,0,0.15);
            animation: modalIn 0.25s ease;
        }
        @keyframes modalIn {
            from { opacity: 0; transform: scale(0.95) translateY(15px); }
            to { opacity: 1; transform: scale(1) translateY(0); }
        }
        .modal-box h2 {
            font-size: 18px;
            font-weight: 700;
            margin-bottom: 4px;
            display: flex;
            align-items: center;
            gap: 10px;
            color: var(--ink);
        }
        .modal-box .sub {
            font-size: 13px;
            color: var(--muted);
            margin-bottom: 18px;
        }
        .modal-box .form-group { margin-bottom: 14px; }
        .modal-box .form-group label {
            display: block;
            font-size: 12px;
            font-weight: 600;
            color: var(--muted);
            margin-bottom: 4px;
        }
        .modal-box .form-group input,
        .modal-box .form-group select {
            width: 100%;
            padding: 7px 12px;
            border: 1px solid #e2e8f0;
            border-radius: 8px;
            font-size: 13px;
            font-family: inherit;
            background: var(--surface-alt);
            transition: border 0.2s;
        }
        .modal-box .form-group input:focus,
        .modal-box .form-group select:focus {
            outline: none;
            border-color: var(--blue);
            background: white;
        }
        .modal-box .form-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 12px;
        }
        .modal-box .form-actions {
            display: flex;
            gap: 10px;
            margin-top: 18px;
            justify-content: flex-end;
        }
        .modal-box .form-actions .btn {
            padding: 7px 20px;
            border-radius: 8px;
            font-weight: 600;
            font-size: 13px;
            border: none;
            cursor: pointer;
            transition: all 0.2s;
        }
        .modal-box .form-actions .btn-cancel {
            background: #f1f4f8;
            color: var(--muted);
        }
        .modal-box .form-actions .btn-cancel:hover { background: var(--line); }
        .modal-box .form-actions .btn-export {
            background: var(--blue);
            color: white;
        }
        .modal-box .form-actions .btn-export:hover { background: #0d7a4e; }
        .modal-box .preset-buttons {
            display: flex;
            gap: 6px;
            flex-wrap: wrap;
            margin-bottom: 14px;
        }
        .modal-box .preset-buttons button {
            padding: 4px 12px;
            border-radius: 6px;
            font-size: 11px;
            font-weight: 500;
            border: 1px solid #e2e8f0;
            background: var(--surface-alt);
            cursor: pointer;
            transition: all 0.2s;
            color: var(--muted);
        }
        .modal-box .preset-buttons button:hover { background: var(--line); }
        
        
.hess-layout { display:grid; grid-template-columns:minmax(0,2.2fr) minmax(260px,1fr); gap:20px; }
.hess-main-column,.hess-aside { display:flex; flex-direction:column; gap:20px; min-width:0; }
.hess-hero .lab-photo { height:280px; }
#hess-hero-voltage .value { font-size:52px; font-weight:600; margin-top:12px; }
#hess-hero-voltage .unit { font-size:24px; margin-left:8px; font-weight:400; }
#hess-hero-metrics .grid-6 { grid-template-columns:repeat(4,minmax(0,1fr)); border:0; border-radius:0; }
#hess-hero-metrics .stat-clean { padding:18px 14px; }
#hess-hero-metrics .value { font-size:21px; }
.hess-storage-pair { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.hess-storage.mb-20 { margin:0; }
.hess-storage .grid-5 { grid-template-columns:repeat(2,minmax(0,1fr)); border:0; border-radius:0; }
.hess-storage .stat-clean { padding:12px 0; border:0!important; }
.hess-storage .stat-clean .label { font-size:11px; }
.hess-storage .stat-clean .value { font-size:19px; margin-top:5px; }
.hess-storage .section-clean { font-size:17px; }
.hess-storage .mb-12 { margin:0; }
.hess-trends-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px; }
.hess-trends-heading h2 { margin:0; }
.hess-trends-heading button { padding:6px 10px; border:0; border-radius:6px; background:var(--surface-alt); color:var(--muted); font-size:11px; cursor:pointer; }
.hess-trends-heading button[aria-pressed=true] { background:var(--blue); color:white; }
.hess-trend-plots { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.hess-trends .chart-clean { padding:0; border:0; }
.hess-trend-plots [hidden] { display:none; }
.hess-condition .stat-clean { padding:0; }
.hess-main-column>.mb-20 { margin:0; }
.hess-main-column>.grid-3 { grid-template-columns:repeat(2,minmax(0,1fr)); }
@media(max-width:1000px) { .hess-layout { grid-template-columns:1fr; } .hess-aside { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:600px) { .hess-storage-pair,.hess-trend-plots,.hess-aside { grid-template-columns:1fr; } #hess-hero-metrics .grid-6 { grid-template-columns:repeat(2,minmax(0,1fr)); } .hess-main-column .grid-3 { grid-template-columns:1fr; } }
.hess-soc { display:flex; align-items:center; gap:10px; color:var(--muted); font-size:11px; margin:0 0 14px; }
.hess-soc>div { flex:1; height:5px; border-radius:10px; background:var(--surface-alt); overflow:hidden; }
.hess-soc i { display:block; height:100%; background:var(--blue); }
.hess-soc strong { font-weight:500; color:var(--blue); }
.hess-page { position:relative; background:var(--bg); }
.hess-page-backdrop { position:absolute; top:70px; left:0; right:0; height:440px; pointer-events:none; overflow:hidden; }
.hess-page-backdrop img { width:100%; height:100%; object-fit:cover; object-position:center 42%; }
.hess-page-backdrop::after { content:""; position:absolute; inset:0; background:linear-gradient(to bottom,transparent 35%,var(--bg) 100%),linear-gradient(to right,var(--bg) 3%,color-mix(in srgb,var(--bg) 84%,transparent) 32%,color-mix(in srgb,var(--bg) 24%,transparent) 72%); }
.hess-page .app-wrapper { position:relative; z-index:1; }
.hess-page .header-clean { min-height:0; align-items:flex-start; padding-top:8px; margin-bottom:24px; }
.hess-page .header-clean .actions { padding-top:4px; }
.hess-summary .grid-6 { grid-template-columns:repeat(3,minmax(0,1fr)); border:0; }
.hess-summary .stat-clean { padding:12px 18px; }
.hess-storage .section-clean { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.hess-component-status { font-size:11px; font-weight:400; color:var(--muted); white-space:nowrap; }
.hess-component-status.online { color:#168350; }
.hess-soc-gauge { width:210px; max-width:100%; height:142px; position:relative; margin:10px auto 18px; }
.hess-soc-gauge svg { width:100%; height:125px; overflow:visible; }
.hess-soc-gauge path { fill:none; stroke-width:13; stroke-linecap:round; }
.gauge-track { stroke:var(--line); }
.gauge-progress { stroke:var(--blue); stroke-dasharray:0 100; transition:stroke-dasharray .3s; }
.hess-soc-gauge>div { position:absolute; left:0; right:0; top:73px; text-align:center; }
.hess-soc-gauge strong { display:block; font-size:26px; font-weight:600; color:var(--ink); }
.hess-soc-gauge span { display:block; margin-top:3px; font-size:12px; color:var(--muted); }
.hess-storage .stat-clean[hidden] { display:none; }
.hess-storage .grid-5 { border-top:1px solid var(--line); }
.hess-storage .stat-clean { padding:12px 8px; }
.hess-converter-row { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:16px 0; border-bottom:1px solid var(--line); font-size:12px; }
.hess-converter-row:last-child { border:0; padding-bottom:0; }
.hess-converter-row>div { display:flex; align-items:center; gap:12px; }
.hess-converter-row small { color:var(--muted); font-size:11px; }
.hess-converter-row .conv-clean { margin:0; border:0; padding:0; font-size:12px; }
.hess-vehicle-summary .stat-clean { display:flex; align-items:center; justify-content:space-between; padding:15px 0; border:0!important; border-bottom:1px solid var(--line)!important; }
.hess-vehicle-summary .value { margin:0; }
.hess-trends .chart-clean { position:relative; padding-top:8px; }
.hess-chart-empty { position:absolute; inset:50% 0 auto; text-align:center; font-size:12px; color:var(--muted); pointer-events:none; }
.hess-chart-empty[hidden] { display:none; }
html[data-theme="dark"] .hess-page-backdrop img { opacity:.45; }
@media(max-width:600px) { .hess-page-backdrop { height:360px; }.hess-page .header-clean { min-height:0; gap:14px; }.hess-summary .grid-6 { grid-template-columns:1fr; }.hess-summary .stat-clean { display:flex; justify-content:space-between; padding:12px 0; }.hess-summary .value { margin:0; }.hess-trends-heading { align-items:flex-start; flex-direction:column; }.hess-soc-gauge { height:132px; } }
.hess-page .header-clean .badge-status,.hess-page .header-clean .update-badge { padding:8px 10px; border-radius:7px; background:var(--surface); border:1px solid var(--line); }
.hess-page .header-clean .actions { max-width:100%; }
.hess-page .header-clean .brand { min-width:0; }
.hess-summary { background:color-mix(in srgb,var(--blue) 8%,var(--surface)); border-color:color-mix(in srgb,var(--blue) 23%,var(--line)); }
.hess-summary .section-clean { color:var(--blue); }
.hess-summary .grid-6 { background:transparent; }
.hess-summary .stat-clean { background:transparent; border-color:color-mix(in srgb,var(--blue) 18%,var(--line)); }
.hess-summary .stat-clean .value { color:var(--blue); }
.hess-storage { --storage-accent:var(--blue); border-top:3px solid var(--storage-accent); }
.hess-storage:has(.section-kapasitor) { --storage-accent:var(--chart-teal-text, #0f766e); }
.hess-storage .section-clean { color:var(--storage-accent); }
.hess-storage .hess-soc-gauge { background:radial-gradient(ellipse at 50% 85%,color-mix(in srgb,var(--storage-accent) 8%,transparent),transparent 70%); }
.hess-storage .gauge-track { stroke:color-mix(in srgb,var(--storage-accent) 16%,var(--line)); }
.hess-storage .gauge-progress { stroke:var(--storage-accent); }
.hess-storage .hess-soc-gauge strong { color:var(--storage-accent); }
.hess-storage .grid-5 { background:color-mix(in srgb,var(--storage-accent) 4%,var(--surface)); border-radius:8px; padding:4px 8px; }
.hess-storage .stat-clean { background:transparent; }
.hess-condition h2::before,.hess-vehicle-summary h2::before { content:""; display:inline-block; width:4px; height:16px; margin-right:9px; border-radius:2px; background:var(--blue); vertical-align:-2px; }
.hess-condition .hess-converter-row { background:var(--surface-alt); margin-top:8px; padding:13px 12px; border:0; border-radius:7px; }
.hess-trends-heading>div { display:flex; gap:3px; padding:3px; background:var(--surface-alt); border:1px solid var(--line); border-radius:8px; }
.hess-trend-plots>[data-hess-plot]:nth-child(-n+3) .chart-title { color:var(--blue); }
.hess-trend-plots>[data-hess-plot]:nth-child(n+4) .chart-title { color:var(--chart-teal-text, #0f766e); }
html[data-theme="dark"] .hess-storage:has(.section-kapasitor) { --storage-accent:#58c7bf; }
html[data-theme="dark"] .hess-trend-plots>[data-hess-plot]:nth-child(n+4) .chart-title { color:#58c7bf; }
.hess-page-backdrop img { object-position:center 58%; }
.hess-photo-credit { position:relative; font-size:10px; color:var(--muted); padding-bottom:12px; }
.hess-photo-credit a { text-decoration:underline; }
.hess-main .dashboard-history { margin-top:20px; margin-bottom:0; }
.hess-summary { background:color-mix(in srgb,var(--blue) 8%,var(--surface))!important; border-color:color-mix(in srgb,var(--blue) 23%,var(--line))!important; }
.hess-summary .stat-clean { background:transparent!important; }
.hess-storage { border-top-color:var(--storage-accent)!important; }
.hess-storage .stat-clean { background:transparent!important; }
.hess-summary { background:var(--surface)!important; border-color:var(--line)!important; }
.hess-summary .section-clean,
.hess-summary .stat-clean .value,
.hess-storage .hess-soc-gauge strong {color: var(--ink) !important;}
.hess-storage .section-baterai {color: #0865b5 !important;}
.hess-storage .section-kapasitor {color: var(--storage-accent) !important;}
.hess-summary .grid-6 { background:var(--surface)!important; }
.hess-storage .grid-5 { background:var(--surface-alt); }
.hess-trend-plots .chart-title { color:var(--ink)!important; font-weight:500; }
.hess-page .chart-clean { position:relative; }
.hess-chart-empty { transform:translateY(-50%); font-weight:400; }
.hess-page-backdrop::after { background:linear-gradient(to bottom,transparent 45%,var(--bg) 100%),linear-gradient(to right,color-mix(in srgb,var(--bg) 88%,transparent),color-mix(in srgb,var(--bg) 52%,transparent) 35%,color-mix(in srgb,var(--bg) 10%,transparent) 80%); }
.hess-vehicle-charts { width:100%; margin-top:20px; }
.hess-vehicle-charts>.grid-3 { grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
@media(max-width:760px) { .hess-vehicle-charts>.grid-3 { grid-template-columns:1fr; } }