:root {
            color-scheme: light;
            --ink: #172b4d;
            --muted: #64748b;
            --line: #dbe3ed;
            --paper: #ffffff;
            --canvas: #f3f6fa;
            --blue: #1459a6;
            --teal: #087e8b;
        }
        * { box-sizing: border-box; }
        body {
            margin: 0;
            background: var(--canvas);
            color: var(--ink);
            font: 15px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
        }
        a { color: var(--blue); }
        .topbar { background: #102744; color: white; }
        .topbar-inner {
            max-width: 1240px; margin: auto; padding: 16px 24px;
            display: flex; align-items: center; justify-content: space-between;
            gap: 18px;
        }
        .brand { color: white; font-weight: 700; text-decoration: none; }
        nav { display: flex; gap: 18px; flex-wrap: wrap; }
        nav a { color: #d9e7f7; text-decoration: none; }
        nav a:hover { color: white; text-decoration: underline; }
        main { max-width: 1240px; margin: 32px auto; padding: 0 24px; }
        h1 { margin: 0 0 6px; font-size: 28px; }
        h2 { margin: 28px 0 12px; font-size: 20px; }
        .subtitle, .muted { color: var(--muted); }
        .subtitle { margin: 0 0 24px; }
        .cards {
            display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
            gap: 14px; margin: 22px 0;
        }
        .card, .panel {
            background: var(--paper); border: 1px solid var(--line);
            border-radius: 12px; padding: 18px;
        }
        .card-label { color: var(--muted); font-size: 13px; }
        .card-value { font-size: 25px; font-weight: 700; margin-top: 5px; }
        .table-wrap {
            overflow-x: auto; background: var(--paper);
            border: 1px solid var(--line); border-radius: 12px;
        }
        .maximum-panel .table-wrap th:first-child,
        .maximum-panel .table-wrap td:first-child {
            position: sticky;
            left: 0;
            z-index: 1;
            background: var(--paper);
            box-shadow: 1px 0 0 var(--line), 5px 0 8px rgba(23, 43, 77, 0.04);
        }
        .maximum-panel .table-wrap th:first-child {
            z-index: 2;
            background: #eaf0f7;
        }
        .maximum-panel .table-wrap tbody tr:hover td:first-child { background: #f7faff; }
        table { border-collapse: collapse; width: 100%; }
        th, td {
            padding: 10px 12px; border-bottom: 1px solid var(--line);
            text-align: right; white-space: nowrap;
        }
        th { background: #eaf0f7; font-size: 12px; color: #34445c; }
        th:first-child, td:first-child { text-align: left; }
        td.remarks { text-align: left; white-space: normal; min-width: 130px; }
        tbody tr:hover { background: #f7faff; }
        footer {
            max-width: 1240px;
            margin: 30px auto 0;
            padding: 18px 24px 28px;
            color: var(--muted);
            font-size: 13px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 16px;
            flex-wrap: wrap;
        }
        .footer-links {
            display: flex;
            align-items: center;
            gap: 14px;
            flex-wrap: wrap;
        }
        @media (max-width: 640px) {
            .topbar-inner { align-items: flex-start; flex-direction: column; }
            main { margin-top: 22px; padding: 0 14px; }
            h1 { font-size: 24px; }
        }
    
        .dashboard-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
            gap: 16px;
            margin: 20px 0;
        }
        .maximum-panel { margin-top: 18px; }
        .fuel-layout {
            display: grid;
            grid-template-columns: minmax(180px, 240px) minmax(180px, 1fr);
            align-items: center;
            gap: 24px;
        }
        .fuel-chart {
            position: relative;
            display: grid;
            place-items: center;
            width: 220px;
            height: 220px;
            max-width: 100%;
            border-radius: 50%;
            margin: 8px auto;
            background:
                radial-gradient(circle, white 0 56%, transparent 57%),
                var(--fuel-chart);
            animation: dashboard-enter 650ms ease-out both;
        }
        .fuel-chart-center {
            display: flex;
            flex-direction: column;
            align-items: center;
            color: var(--ink);
            line-height: 1.2;
        }
        .fuel-chart-center strong { font-size: 24px; }
        .fuel-chart-center span,
        .fuel-value { color: var(--muted); font-size: 12px; }
        .fuel-label { flex: 1; }
        .fuel-legend-row {
            display: flex;
            align-items: center;
            gap: 10px;
            margin: 10px 0;
        }
        .fuel-legend-row strong {
            min-width: 4em;
            text-align: right;
        }
        .fuel-swatch {
            width: 12px;
            height: 12px;
            border-radius: 3px;
            flex: 0 0 12px;
        }
        .dashboard .panel,
        .dashboard .cards .card {
            animation: dashboard-enter 450ms ease-out both;
        }
        .dashboard .panel,
        .dashboard .card {
            transition: transform 180ms ease, box-shadow 180ms ease;
        }
        .dashboard .panel:hover,
        .dashboard .card:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 22px rgba(23, 43, 77, 0.08);
        }
        .dashboard-links { margin-top: 18px; }
        @keyframes dashboard-enter {
            from { opacity: 0; transform: translateY(8px); }
            to { opacity: 1; transform: translateY(0); }
        }
        @media (max-width: 640px) {
            .fuel-layout { grid-template-columns: 1fr; }
            .fuel-chart { width: 190px; height: 190px; }
        }
        @media (prefers-reduced-motion: reduce) {
            .dashboard *,
            .dashboard *::before,
            .dashboard *::after {
                animation: none !important;
                transition: none !important;
                scroll-behavior: auto !important;
            }
        }
        /* Shared page animations */
        .panel,
        .cards .card,
        .table-wrap {
            animation: dashboard-enter 450ms ease-out both;
            transition: transform 180ms ease, box-shadow 180ms ease;
        }

        .panel:hover,
        .cards .card:hover,
        .table-wrap:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 22px rgba(23, 43, 77, 0.08);
        }

        @media (prefers-reduced-motion: reduce) {
            body *,
            body *::before,
            body *::after {
                animation: none !important;
                transition: none !important;
                scroll-behavior: auto !important;
            }
        }
    
        .menu-toggle { display: none; }
        .site-nav a { padding: 8px 10px; border-radius: 8px; transition: background 160ms ease, color 160ms ease; }
        .site-nav a:hover { background: rgba(255,255,255,.1); text-decoration: none; }
        .nav-dropdown { position: relative; }
        .nav-dropdown summary {
            padding: 8px 10px;
            border-radius: 8px;
            color: #d9e7f7;
            cursor: pointer;
            list-style: none;
            transition: background 160ms ease, color 160ms ease;
        }
        .nav-dropdown summary::-webkit-details-marker { display: none; }
        .nav-dropdown summary::after { content: "▾"; margin-left: 7px; font-size: 11px; }
        .nav-dropdown summary:hover,
        .nav-dropdown[open] summary { background: rgba(255,255,255,.1); color: white; }
        .nav-dropdown-menu {
            position: absolute;
            z-index: 20;
            top: calc(100% + 7px);
            right: 0;
            display: grid;
            min-width: 220px;
            gap: 3px;
            padding: 7px;
            border: 1px solid rgba(255,255,255,.16);
            border-radius: 11px;
            background: #102744;
            box-shadow: 0 12px 28px rgba(8,23,42,.24);
            animation: nav-dropdown-enter 150ms ease-out both;
        }
        .nav-dropdown-menu a { display: block; }
        .nav-dropdown.is-closing .nav-dropdown-menu {
            animation: nav-dropdown-exit 160ms ease-in both;
            pointer-events: none;
        }
        @keyframes nav-dropdown-enter {
            from { opacity: 0; transform: translateY(-5px); }
            to { opacity: 1; transform: translateY(0); }
        }
        @keyframes nav-dropdown-exit {
            from { opacity: 1; transform: translateY(0); }
            to { opacity: 0; transform: translateY(-5px); }
        }
        .v2-hero {
            display: flex; align-items: center; justify-content: space-between; gap: 22px;
            padding: 24px 28px; margin: 0 0 20px; border-radius: 18px;
            color: white; background: linear-gradient(120deg, #102744, #1459a6 64%, #087e8b);
            box-shadow: 0 14px 34px rgba(16,39,68,.14);
        }
        .v2-hero h1 { color: white; font-size: clamp(25px, 4vw, 36px); }
        .v2-hero p { margin: 8px 0 0; color: #d9e7f7; }
        .v2-hero a, .primary-link {
            display: inline-flex; align-items: center; justify-content: center; gap: 8px;
            padding: 11px 16px; border-radius: 10px; background: white; color: #1459a6;
            font-weight: 700; text-decoration: none; white-space: nowrap;
            transition: transform 160ms ease, box-shadow 160ms ease;
        }
        .v2-hero a:hover, .primary-link:hover { transform: translateY(-2px); box-shadow: 0 8px 20px #061a3033; }
        .plant-map-layout {
            display: grid;
            grid-template-columns: minmax(0, 1fr);
            gap: 18px;
            align-items: start;
            transition: grid-template-columns 360ms ease;
        }
        .plant-map-layout.has-selection { grid-template-columns: minmax(0, 1.65fr) minmax(280px, .8fr); }
        .map-shell { position: relative; overflow: hidden; border: 0; border-radius: 18px; background: #f3f7fb; }
        .map-controls { position:absolute; z-index:2; top:12px; right:12px; display:flex; gap:6px; padding:5px; border:1px solid #dbe3ed; border-radius:11px; background:#ffffffed; box-shadow:0 4px 14px #172b4d18; }
        .map-controls button { width:34px; height:34px; border:0; border-radius:7px; background:white; color:var(--ink); font:700 19px/1 system-ui,sans-serif; cursor:pointer; }
        .map-controls button:hover, .map-controls button:focus-visible { background:#eaf2fb; outline:2px solid #1459a6; outline-offset:1px; }
        .map-controls .map-reset { width:auto; padding:0 9px; font-size:12px; }
        .map-key { display: flex; flex-wrap: wrap; gap: 8px 16px; padding: 12px 16px; color: var(--muted); font-size: 12px; border-top: 1px solid var(--line); }
        .map-key span { display: inline-flex; align-items: center; gap: 6px; }
        .map-key i { width: 9px; height: 9px; border-radius: 50%; background: #1459a6; }
        .division-key { gap: 6px 12px; padding-top: 0; border-top: 0; }
        .plant-detail { position: sticky; top: 16px; min-height: 260px; }
        .plant-detail[hidden] { display: none; }
        .plant-detail:not([hidden]) { animation: plant-detail-enter 360ms ease-out both; }
        @keyframes plant-detail-enter {
            from { opacity: 0; transform: translateY(12px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .plant-detail h2 { margin: 0 0 4px; }
        .plant-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin: 12px 0; }
        .plant-detail-item { padding: 7px 9px; border-radius: 8px; background: #f4f7fb; }
        .plant-detail-item span { display: block; color: var(--muted); font-size: 10px; line-height: 1.3; }
        .plant-detail-item strong { display: block; margin-top: 1px; font-size: 13px; line-height: 1.35; }
        .chart-frame { position: relative; height: 190px; margin-top: 16px; }
        #plant-chart, #daily-plant-chart, #plant-data-hourly-chart, #plant-data-daily-chart { display: block; width: 100%; height: 100%; }
        .chart-tooltip { position:absolute; z-index:2; max-width:calc(100% - 12px); padding:6px 9px; border:1px solid #dbe3ed; border-radius:7px; background:#102744; color:#fff; box-shadow:0 4px 14px #10274435; font:600 11px/1.35 system-ui,sans-serif; white-space:nowrap; pointer-events:none; }
        .chart-tooltip[hidden] { display:none; }
        .chart-status { min-height: 20px; color: var(--muted); font-size: 12px; }
        .chart-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:18px 0 7px; }
        .chart-heading h3 { margin:0; font-size:15px; }
        .chart-range-buttons { display:flex; gap:3px; padding:3px; border:1px solid var(--line); border-radius:9px; background:#f4f7fb; }
        .chart-range-buttons button { padding:5px 8px; border:0; border-radius:6px; background:transparent; color:var(--muted); font:600 11px system-ui,sans-serif; cursor:pointer; white-space:nowrap; }
        .chart-range-buttons button[aria-pressed="true"] { background:white; color:var(--blue); box-shadow:0 1px 4px rgba(23,43,77,.14); }
        .chart-range-buttons button:focus-visible { outline:2px solid var(--blue); outline-offset:2px; }
        .map-count { margin-left: auto; }
        .section-heading { display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
        .plant-search { position:relative; padding:6px 12px 10px; }
        .plant-search label { display:block; margin-bottom:5px; color:var(--ink); font-size:12px; font-weight:700; }
        .plant-search input { display:block; width:100%; min-height:38px; padding:8px 11px; border:1px solid var(--line); border-radius:9px; background:#fff; color:var(--ink); font:13px system-ui,sans-serif; }
        .plant-search input:focus { border-color:#1459a6; outline:2px solid #1459a622; }
        .plant-search-suggestions { max-height:220px; margin-top:5px; overflow-y:auto; border:1px solid var(--line); border-radius:9px; background:white; box-shadow:0 8px 20px rgba(23,43,77,.10); }
        .plant-search-suggestions[hidden] { display:none; }
        .plant-search-option { display:block; width:100%; padding:8px 10px; border:0; border-bottom:1px solid #edf1f6; background:white; color:var(--ink); font:13px system-ui,sans-serif; text-align:left; cursor:pointer; }
        .plant-search-option:last-child { border-bottom:0; }
        .plant-search-option:hover,.plant-search-option:focus-visible { background:#f1f6fc; outline:none; }
        .plant-search-empty { padding:9px 10px; color:var(--muted); font-size:12px; }
        .plant-data-page { display:grid; gap:16px; }
        .plant-data-page .v2-hero { margin:0; }
        .plant-data-search-panel { padding:8px 10px 4px; }
        .plant-data-search-panel .plant-search { max-width:760px; margin:0 auto; padding:8px 10px 12px; }
        .plant-data-search-panel .plant-search input { min-height:44px; font-size:14px; }
        .plant-data-results { min-height:300px; }
        .plant-data-empty { min-height:270px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; color:var(--muted); text-align:center; }
        .plant-data-empty[hidden] { display:none; }
        .plant-data-empty strong { color:var(--ink); font-size:18px; }
        .plant-data-empty-icon { display:grid; place-items:center; width:54px; height:54px; margin-bottom:5px; border-radius:50%; background:#eaf2fb; color:var(--blue); font-size:34px; line-height:1; }
        .plant-data-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
        .plant-data-heading h2 { margin:0; font-size:22px; }
        .plant-data-heading p { margin:3px 0 0; }
        .plant-data-fields { grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); margin:14px 0 20px; }
        .plant-data-chart-section { padding-top:14px; border-top:1px solid var(--line); }
        .plant-data-chart-section + .plant-data-chart-section { margin-top:14px; }
        .plant-data-chart-frame { height:260px; margin-top:10px; }
        .fuel-filter-panel { display:flex; align-items:center; gap:12px; padding:7px 12px; border-bottom:1px solid var(--line); background:#fff; }
        .fuel-filter-heading { display:flex; align-items:center; gap:8px; flex:0 0 auto; margin:0; }
        .fuel-filter-heading strong { font-size:12px; white-space:nowrap; }
        .fuel-filter-heading button { border:0; background:transparent; color:var(--blue); font:600 11px system-ui,sans-serif; cursor:pointer; white-space:nowrap; }
        .fuel-filter-grid { display:flex; align-items:center; gap:5px; min-width:0; overflow-x:auto; scrollbar-width:thin; scrollbar-color:#cbd7e4 transparent; }
        .fuel-filter { display:flex; align-items:center; gap:5px; flex:0 0 auto; min-height:30px; padding:4px 7px; border:1px solid var(--line); border-radius:999px; background:#fff; color:var(--ink); font:600 10px/1.2 system-ui,sans-serif; white-space:nowrap; cursor:pointer; transition:background 150ms ease,border-color 150ms ease,opacity 150ms ease; }
        .fuel-filter::before { content:""; width:7px; height:7px; flex:0 0 7px; border-radius:50%; background:var(--filter-color); }
        .fuel-filter strong { margin-left:auto; color:var(--muted); }
        .fuel-filter[aria-pressed="true"] { border-color:var(--filter-color); background:color-mix(in srgb,var(--filter-color) 8%,white); }
        .fuel-filter[aria-pressed="false"] { opacity:.48; background:#f3f6fa; }
        .fuel-filter:focus-visible,.fuel-filter-heading button:focus-visible { outline:2px solid var(--blue); outline-offset:2px; }
        .v2-dashboard .panel { border-radius: 16px; box-shadow: 0 5px 18px rgba(23,43,77,.035); }
        .v2-dashboard .table-wrap { box-shadow: none; }
        .v2-dashboard .dashboard-grid { margin-top: 16px; }
        /* Leaflet basemap and stable-size plant markers. */
        .plant-map {
            display: block;
            width: 100%;
            height: min(68vh, 700px);
            min-height: 500px;
            background: #e9f1f7;
            font-family: system-ui, sans-serif;
        }
        .leaflet-plant-icon { background: transparent; border: 0; }
        .plant-icon {
            --plant-color:#1459a6;
            position:relative;
            display: grid;
            place-items: center;
            width: var(--marker-size, 28px);
            height: var(--marker-size, 28px);
            border: 1.7px solid var(--plant-color);
            border-radius: 50%;
            color: #fff;
            background: var(--plant-color);
            opacity: 1;
            box-shadow: 0 1px 5px #10274430, inset 0 0 0 1px #ffffff70;
            transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
            animation: plant-marker-breathe 3.2s ease-in-out infinite;
        }
        .plant-icon::after {
            content:"";
            position:absolute;
            inset:-3px;
            border:1px solid color-mix(in srgb, var(--plant-color) 38%, transparent);
            border-radius:50%;
            opacity:0;
            animation: plant-marker-ripple 3.2s ease-out infinite;
            pointer-events:none;
        }
        .plant-icon svg {
            display:block;
            width:64%;
            height:64%;
            overflow:visible;
            fill:none;
            stroke:currentColor;
            stroke-width:1.55;
            stroke-linecap:round;
            stroke-linejoin:round;
            filter:drop-shadow(0 0 1px #ffffffb0);
        }
        .plant-icon:hover,
        .plant-icon:focus-visible,
        .plant-icon.is-selected {
            transform: scale(1.13);
            opacity:1;
            background: var(--plant-color);
            box-shadow: 0 0 0 3px color-mix(in srgb, var(--plant-color) 27%, transparent), 0 3px 8px #10274444;
            outline: none;
        }
        .plant-icon:hover, .plant-icon:focus-visible { opacity:1; }
        .plant-icon-gas { --plant-color:#1459a6; }
        .plant-icon-solar { --plant-color:#b47a00; }
        .plant-icon-wind { --plant-color:#087e8b; }
        .plant-icon-hydro { --plant-color:#1875ad; }
        .plant-icon-coal { --plant-color:#465264; }
        .plant-icon-liquid { --plant-color:#b35a31; }
        .plant-icon-grid { --plant-color:#7953a6; }
        @keyframes plant-marker-breathe {
            0%, 100% { box-shadow:0 1px 5px #10274430, inset 0 0 0 1px #ffffff70; }
            50% { box-shadow:0 2px 8px #10274440, inset 0 0 0 1px #ffffffa0; }
        }
        @keyframes plant-marker-ripple {
            0%, 38% { transform:scale(.9); opacity:0; }
            52% { opacity:.35; }
            100% { transform:scale(1.18); opacity:0; }
        }

        @media (max-width: 640px) {
            .topbar-inner {
                align-items: center;
                flex-direction: row;
                flex-wrap: wrap;
            }
            .brand { flex: 1 1 180px; }
            .menu-toggle {
                display: inline-flex;
                align-items: center;
                gap: 8px;
                margin-left: auto;
                padding: 8px 11px;
                border: 1px solid rgba(255, 255, 255, 0.35);
                border-radius: 8px;
                background: transparent;
                color: white;
                font: inherit;
                cursor: pointer;
            }
            nav.site-nav {
                flex: 0 0 100%;
                flex-direction: column;
                flex-wrap: nowrap;
                gap: 0;
                max-height: 0;
                overflow: hidden;
                opacity: 0;
                visibility: hidden;
                transform: translateY(-8px);
                transition: max-height 250ms ease, opacity 180ms ease,
                            transform 180ms ease, visibility 180ms ease;
            }
            nav.site-nav.is-open {
                max-height: 520px;
                opacity: 1;
                visibility: visible;
                transform: translateY(0);
            }
            nav.site-nav > a,
            nav.site-nav .nav-dropdown summary,
            nav.site-nav .nav-dropdown-menu a {
                display: block;
                padding: 10px 12px;
                border-top: 1px solid rgba(255, 255, 255, 0.14);
            }
            nav.site-nav .nav-dropdown { width: 100%; }
            nav.site-nav .nav-dropdown summary::after { float: right; margin-top: 5px; }
            nav.site-nav .nav-dropdown-menu {
                position: static;
                min-width: 0;
                gap: 0;
                padding: 0 0 4px 12px;
                border: 0;
                border-radius: 0;
                background: transparent;
                box-shadow: none;
                animation: none;
            }
            nav.site-nav .nav-dropdown-menu a { padding-left: 22px; }
            .v2-hero { align-items: flex-start; flex-direction: column; padding: 21px; }
            .plant-map-layout, .plant-map-layout.has-selection { grid-template-columns: 1fr; }
            .plant-data-results { padding:14px; }
            .plant-data-chart-frame { height:220px; }
            .plant-map { height: 62vh; min-height: 460px; }
            .plant-detail { position: static; }
            .chart-heading { align-items:flex-start; flex-direction:column; }
            .fuel-filter-panel { align-items:flex-start; flex-direction:column; gap:4px; padding:7px 10px 8px; }
            .fuel-filter-grid { width:100%; }
            .map-key { gap:7px 11px; padding:10px 12px; }
        }
        @media (prefers-reduced-motion: reduce) {
            .plant-icon, .plant-icon::after, .plant-map-layout {
                animation:none !important;
                transition:none !important;
            }
            .plant-detail:not([hidden]) { animation:none !important; }
        }