:root {
            --bg: #f4f6fb;
            --bg-grid: rgba(15, 23, 42, 0.035);
            --surface: #ffffff;
            --surface-alt: #f8fafc;
            --surface-raised: #ffffff;
            --border: #e6eaf2;
            --border-soft: #eef1f7;
            --text: #0f172a;
            --text-muted: #64748b;
            --text-faint: #94a3b8;
            --accent: #0865b5;
            --accent-soft: #eff6ff;
            --accent-glow: rgba(8, 101, 181, 0.18);
            --ok: #10b981;
            --danger: #ef4444;
            --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
            --shadow-md: 0 10px 25px -5px rgba(15, 23, 42, 0.06), 0 8px 10px -6px rgba(15, 23, 42, 0.02);
            --shadow-lg: 0 20px 40px -12px rgba(15, 23, 42, 0.12);
            --scrollbar: #cbd5e1;
            --scrollbar-hover: #94a3b8;
            color-scheme: light;
        }

        html[data-theme="dark"] {
            --bg: #070b14;
            --bg-grid: rgba(148, 163, 184, 0.045);
            --surface: #10182b;
            --surface-alt: #0c1322;
            --surface-raised: #131c33;
            --border: #1f2a44;
            --border-soft: #1a2338;
            --text: #eef1f8;
            --text-muted: #93a0bd;
            --text-faint: #5f6c8a;
            --accent: #818cf8;
            --accent-soft: rgba(129, 140, 248, 0.14);
            --accent-glow: rgba(129, 140, 248, 0.28);
            --ok: #34d399;
            --danger: #f87171;
            --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
            --shadow-md: 0 10px 30px -8px rgba(0, 0, 0, 0.55);
            --shadow-lg: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
            --scrollbar: #263049;
            --scrollbar-hover: #34405f;
            color-scheme: dark;
        }

        * { transition: background-color .25s ease, border-color .25s ease, color .25s ease, box-shadow .25s ease; }

        body {
            font-family: 'Inter', sans-serif;
            background-color: var(--bg);
            background-image:
                linear-gradient(var(--bg-grid) 1px, transparent 1px),
                linear-gradient(90deg, var(--bg-grid) 1px, transparent 1px);
            background-size: 34px 34px;
            color: var(--text);
        }

        .mono { font-family: 'Inter', monospace; font-variant-numeric: tabular-nums; }

        .table-container { max-height: 350px; overflow-y: auto; }

        ::-webkit-scrollbar { width: 6px; height: 6px; }
        ::-webkit-scrollbar-track { background: transparent; }
        ::-webkit-scrollbar-thumb { background: var(--scrollbar); border-radius: 10px; }
        ::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-hover); }

        
        .panel {
            background-color: var(--surface);
            border: 1px solid var(--border);
            box-shadow: var(--shadow-sm);
            border-radius: 1rem;
        }

        .panel-raised {
            background-color: var(--surface-raised);
            border: 1px solid var(--border);
            box-shadow: var(--shadow-md);
            border-radius: 1.25rem;
        }

        .panel-header-row {
            background-color: var(--surface-alt);
            border-bottom: 1px solid var(--border-soft);
        }

        .card-hover {
            transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
            position: relative;
        }
        .card-hover:hover {
            transform: translateY(-4px);
            box-shadow: var(--shadow-lg);
            border-color: var(--accent-glow);
        }

        .text-primary { color: var(--text); }
        .text-secondary { color: var(--text-muted); }
        .text-faint { color: var(--text-faint); }
        .divider { background-color: var(--border-soft); }
        .row-hover:hover { background-color: var(--surface-alt); }
        tbody tr { border-color: var(--border-soft) !important; }
        thead.sticky-head { background-color: var(--surface); }

        
        .brand-mark {
            width: 48px; height: 48px; border-radius: 14px;
            flex-shrink: 0;
            background: linear-gradient(135deg, var(--accent), #0f172a);
            box-shadow: 0 8px 20px -6px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,.25);
            display: flex; align-items: center; justify-content: center;
        }
        
        .pulse-dot { position: relative; }
        .pulse-dot::after {
            content: ''; position: absolute; inset: 0; border-radius: 999px;
            animation: pulseRing 1.8s cubic-bezier(0,0,.2,1) infinite;
        }
        @keyframes pulseRing {
            0% { box-shadow: 0 0 0 0 currentColor; opacity: .55; }
            100% { box-shadow: 0 0 0 10px currentColor; opacity: 0; }
        }

        .blob { position: absolute; border-radius: 999px; filter: blur(30px); opacity: .5; pointer-events: none; }

        .export-actions { display: flex; gap: .5rem; }
        .btn-export {
            display: inline-flex; align-items: center; gap: 6px;
            padding: 6px 12px; border-radius: 8px; font-size: 12px; font-weight: 700;
            border: 1px solid var(--border); background: var(--surface); color: var(--text-muted);
            cursor: pointer; white-space: nowrap;
        }
        .btn-export svg { width: 14px; height: 14px; flex-shrink: 0; }
        .btn-export.excel:hover { border-color: #10b981; color: var(--export-excel-hover, #047857); background: rgba(16,185,129,.08); }
        .btn-export.pdf:hover { border-color: #ef4444; color: var(--export-pdf-hover, #b91c1c); background: rgba(239,68,68,.08); }

        
        .tab-content { display: none; animation: fadeIn 0.4s ease; }
        .tab-content.active { display: block; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
        
        .tab-btn {
            padding: 12px 24px;
            font-weight: 700;
            color: var(--text-muted);
            border-bottom: 3px solid transparent;
            transition: all 0.2s;
            cursor: pointer;
        }
        .tab-btn:hover { color: var(--text); }
        .tab-btn.active {
            color: var(--accent);
            border-bottom-color: var(--accent);
        }
    
body { background-image:none; background-color:#f8fafc; }
.digital-twin-page .brand-mark { display:none; }
.digital-twin-page .card-hover:hover { transform:none; }
.digital-twin-page .blob { display:none; }
.digital-twin-page .panel, .digital-twin-page .panel-raised { box-shadow:none; border-color:var(--line); border-radius:16px; }
.digital-twin-page h1 { font-size:clamp(28px,3vw,40px); line-height:1.15; letter-spacing:-.025em; }
.digital-twin-page .status-pill { display:none; }
.digital-twin-page .table-container { overflow:auto; }
html[data-theme="dark"] body { background-color:var(--bg); }
html[data-theme="dark"] .digital-twin-page .panel { border-color:var(--border); }.dt-layout { display:grid; grid-template-columns:minmax(0,2.2fr) minmax(250px,1fr); gap:24px; }
.dt-main { min-width:0; }
.dt-aside { display:flex; flex-direction:column; gap:20px; }
.dt-aside h2 { font-size:18px; font-weight:600; }
.dt-battery-card { position:relative; overflow:hidden; min-height:260px; border-radius:16px; background:#0f172a; margin-bottom:24px; }
.dt-battery-card>img { position:absolute; width:100%; height:100%; inset:0; object-fit:cover; object-position:center; }
.dt-battery-card::after { content:''; position:absolute; inset:0; background:linear-gradient(90deg,rgba(5,18,33,.88) 0%,rgba(5,18,33,.6) 40%,rgba(5,18,33,.2) 100%); }
.dt-battery-copy { position:relative; z-index:1; color:white; padding:28px; }
.dt-battery-copy h2 { font-size:20px; font-weight:600; margin-bottom:16px; }
.dt-battery-copy p { font-size:14px; opacity:.8; margin:8px 0; }
.dt-battery-copy strong { font-size:54px; line-height:1.2; }
.dt-battery-copy small { font-size:22px; font-weight:400; }
.dt-photo-credit { position:absolute; bottom:12px; right:14px; font-size:10px; color:white; z-index:2; }
.dt-analysis-row { display:flex; justify-content:space-between; padding:16px 0; border-bottom:1px solid var(--border); font-size:13px; }
@media(max-width:1000px) { .dt-layout { grid-template-columns:1fr; } .dt-aside { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:600px) { .dt-aside { grid-template-columns:1fr; } .digital-twin-page .tab-btn { padding:12px; font-size:12px; } }
.dt-overview { border:1px solid var(--line); border-radius:12px; overflow:hidden; margin-bottom:22px; background:var(--surface); }
.dt-overview .dt-battery-card { margin:0; border-radius:0; height:280px; }
.dt-metric-strip { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); padding:18px 0; }
.dt-metric-strip .panel-raised { border:0; border-right:1px solid var(--line); border-radius:0; padding:0 18px; overflow:hidden; }
.dt-metric-strip .panel-raised:last-child { border:0; }
.dt-metric-strip p { font-size:10px; font-weight:500; letter-spacing:0; margin:0 0 6px; color:var(--muted); }
.dt-metric-strip h3 { font-family:inherit; font-size:23px; font-weight:600; letter-spacing:-.3px; }
.dt-metric-strip h3 span:last-child { font-size:12px; }
.dt-bms-charts { gap:18px; }
.dt-bms-charts .panel { padding:18px; border-radius:10px; }
.dt-bms-charts .h-56 { height:220px; }
.dt-history { margin-top:24px; padding:20px; border:1px solid var(--line); border-radius:10px; background:var(--surface); }
.dt-history>h2 { font-size:18px; font-weight:600; margin-bottom:14px; }
.dt-history>.panel { border:0; border-radius:0; margin:0; }
.dt-history>[hidden] { display:none; }
.dt-history .table-container { max-height:none; overflow:auto; }
.dt-history .panel-header-row { background:transparent; padding:8px 0 14px; }
.dt-history .tab-btn { padding:8px 15px; font-size:13px; font-weight:500; }
.dt-history .tab-btn svg { display:none; }
.dt-history .tab-btn .w-2\.5 { display:none; }
.dt-history th { text-transform:none; font-size:12px; font-weight:500; }
.dt-history td { font-size:12px; font-family:inherit; font-weight:400; }
@media(max-width:600px) { .dt-metric-strip { grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 0; } .dt-metric-strip h3 { font-size:21px; } .dt-history { padding:14px; } }
.digital-twin-page .dashboard-history { margin-top:20px; margin-bottom:0; }
.digital-twin-page .dt-layout { gap:20px; align-items:start; }
.digital-twin-page .dt-metric-strip { background:color-mix(in srgb,var(--blue) 7%,var(--surface)); }
.digital-twin-page .dt-metric-strip .panel-raised { background:transparent!important; }
.digital-twin-page .dt-metric-strip h3 { color:var(--blue); }
.digital-twin-page .dt-bms-charts .panel { border-top:3px solid var(--blue); background:linear-gradient(to bottom,color-mix(in srgb,var(--blue) 5%,var(--surface)),var(--surface) 85px); }
.digital-twin-page .dt-bms-charts .panel:nth-child(2) { border-top-color:#168b88; background:linear-gradient(to bottom,color-mix(in srgb,#168b88 5%,var(--surface)),var(--surface) 85px); }
.digital-twin-page .dt-bms-charts .panel:nth-child(3) { border-top-color:#ba7b24; background:linear-gradient(to bottom,color-mix(in srgb,#ba7b24 5%,var(--surface)),var(--surface) 85px); }
.digital-twin-page .dt-aside>.lab-card { border-top:3px solid color-mix(in srgb,var(--blue) 35%,var(--line)); }
@media(max-width:560px) { .dt-overview .dt-battery-card { height:240px; min-height:240px; } }
.digital-twin-page .dt-system-tabs { display:flex; margin:20px 0; border-bottom:1px solid var(--line); overflow-x:auto; }
.digital-twin-page .dt-system-tabs .tab-btn { flex:1; white-space:nowrap; }
.digital-twin-page #btn-ac { --tab-tone:#ba7b24; }
.digital-twin-page #btn-dc { --tab-tone:#168b88; }
.digital-twin-page #btn-bms { --tab-tone:#9964bb; }
.digital-twin-page .dt-system-tabs .tab-btn:not(.active) { color:var(--tab-tone); }
.digital-twin-page .dt-system-tabs .tab-btn.active { color:var(--blue)!important; border-bottom-color:var(--blue)!important; }
.digital-twin-page .dt-full-width-charts { width:100%; min-width:0; }
.digital-twin-page #tab-ac .panel { --chart-tone:#3b82f6; border-top:3px solid var(--chart-tone); background:linear-gradient(to bottom,color-mix(in srgb,var(--chart-tone) 5%,var(--surface)),var(--surface) 85px); }
.digital-twin-page #tab-ac .grid>.panel:nth-child(3n+1) { --chart-tone:#f43f5e; }
.digital-twin-page #tab-ac .grid>.panel:nth-child(3n+2) { --chart-tone:#d99019; }
.digital-twin-page #tab-dc .grid>.panel { border-top:3px solid #168b88; background:linear-gradient(to bottom,color-mix(in srgb,#168b88 5%,var(--surface)),var(--surface) 85px); }
.digital-twin-page .dt-bms-charts .panel { border-top-color:var(--blue)!important; background:linear-gradient(to bottom,color-mix(in srgb,var(--blue) 7%,var(--surface)),var(--surface) 85px)!important; }
.digital-twin-page .dt-bms-charts .panel:nth-child(2) { border-top-color:#168b88!important; background:linear-gradient(to bottom,color-mix(in srgb,#168b88 7%,var(--surface)),var(--surface) 85px)!important; }
.digital-twin-page .dt-bms-charts .panel:nth-child(3) { border-top-color:#ba7b24!important; background:linear-gradient(to bottom,color-mix(in srgb,#ba7b24 7%,var(--surface)),var(--surface) 85px)!important; }
.digital-twin-page #tab-ac .panel { border-top-color:var(--chart-tone)!important; background:linear-gradient(to bottom,color-mix(in srgb,var(--chart-tone) 7%,var(--surface)),var(--surface) 85px)!important; }
.digital-twin-page #tab-dc .grid>.panel { border-top-color:#168b88!important; background:linear-gradient(to bottom,color-mix(in srgb,#168b88 7%,var(--surface)),var(--surface) 85px)!important; }
.digital-twin-page .dt-metric-strip { background:var(--surface-alt); }
.digital-twin-page .dt-metric-strip h3 { color:var(--ink); }
.digital-twin-page .dt-bms-charts .panel,.digital-twin-page #tab-ac .panel,.digital-twin-page #tab-dc .grid>.panel { background:var(--surface)!important; }
.digital-twin-page .battery-system-note { font-size:12px; font-weight:500; line-height:1.5; max-width:190px; text-transform:none; letter-spacing:normal; padding:0 4px; }
#battery-system-status.battery-system-note { background:transparent!important; border:0; }