:root {
            --font-main: 'Inter', system-ui, -apple-system, sans-serif;
            --color-primary: #1e40af;
            --color-primary-hover: #1a37a0;
            --color-primary-light: #dbeafe;
            --color-text: #1e293b;
            --color-text-light: #64748b;
            --color-text-muted: #94a3b8;
            --color-bg: #f8fafc;
            --color-surface: #ffffff;
            --color-border: #e2e8f0;
            --color-link: #1e40af;
            --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
            --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
            --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.09);
            --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.11);
            --radius-sm: 6px;
            --radius-md: 10px;
            --radius-lg: 14px;
            --radius-full: 9999px;
            --ease: cubic-bezier(0.16, 1, 0.3, 1);
            --transition: 0.2s var(--ease);
        }

        * {
            box-sizing: border-box;
        }

        body {
            font-family: var(--font-main);
            color: var(--color-text);
            margin: 0;
            padding: 0;
            line-height: 1.65;
            background-color: var(--color-bg);
            display: flex;
            flex-direction: column;
            align-items: center;
            -webkit-font-smoothing: antialiased;
        }

        a {
            color: var(--color-link);
            text-decoration: none;
            transition: color var(--transition);
        }

        a:hover {
            text-decoration: none;
            color: var(--color-primary-hover);
        }

        /* ── EV Charging Strategy 2 ── */
        .ev2-map-container {
            position: relative;
            width: 100%;
            background: transparent;
            margin-bottom: 16px;
        }

        #ev2-map {
            width: 100%;
            height: auto;
            display: block;
        }

        .ev2-map-hint {
            font-size: 0.75rem;
            color: var(--color-text-muted);
            text-align: center;
            margin: 6px 0 0;
        }

        /* Region map (step 2) */
        #ev2-region-map {
            width: 100%;
            height: auto;
            display: block;
        }

        .ev2-nuts-region {
            transition: fill 0.12s ease;
        }

        .ev2-region-map-info {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 12px 18px;
            margin-top: 12px;
            background: var(--color-surface);
            border: 1px solid var(--color-border);
            border-radius: var(--radius-md);
            font-size: 0.85rem;
            min-height: 48px;
            color: var(--color-text-muted);
        }

        .ev2-country {
            fill: #d1e8ff;
            stroke: #6b9ec8;
            stroke-width: 0.5px;
            cursor: pointer;
            transition: fill 0.15s ease;
        }

        .ev2-country:hover {
            fill: #93c5fd;
        }

        .ev2-country.available {
            fill: #bfdbfe;
        }

        .ev2-country.unavailable {
            fill: #e2e8f0;
            cursor: not-allowed;
        }

        .ev2-selected-info { display: flex; align-items: center; gap: 10px; margin-top: 12px; }

        .ev2-flag {
            font-size: 1.4rem;
        }

        .ev2-chart-container h3 { margin: 0 0 14px; }

        .ev2-chart-wrapper {
            position: relative;
            height: 400px;
        }

        .ev2-view-buttons { display: flex; gap: 6px; flex-wrap: wrap; }

        .ev2-chart-legend {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-top: 14px;
            flex-wrap: wrap;
        }

        .ev2-legend-item {
            display: flex;
            align-items: center;
            gap: 7px;
            font-size: 0.78rem;
            color: var(--color-text-light);
        }

        .ev2-legend-color {
            width: 22px;
            height: 7px;
            border-radius: 3px;
        }

        .ev2-zone-legend-green {
            width: 14px;
            height: 14px;
            border-radius: 3px;
            background: rgba(34, 197, 94, 0.3);
            border: 1px solid #22c55e;
        }

        .ev2-zone-legend-red {
            width: 14px;
            height: 14px;
            border-radius: 3px;
            background: rgba(239, 68, 68, 0.25);
            border: 1px solid #ef4444;
        }

        .ev2-threshold-controls {
            display: flex;
            gap: 18px;
            margin-top: 16px;
            padding: 16px;
            background: var(--color-bg);
            border-radius: var(--radius-md);
            flex-wrap: wrap;
            border: 1px solid var(--color-border);
        }

        .ev2-threshold-group {
            flex: 1;
            min-width: 200px;
        }

        .ev2-threshold-group label { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }

        .ev2-threshold-icon {
            width: 20px;
            height: 20px;
            border-radius: 4px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.68rem;
            color: #fff;
            font-weight: bold;
        }

        .ev2-threshold-input { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }

        .ev2-threshold-input input[type="number"] { width: 76px; text-align: center; }

        .ev2-threshold-group input[type="range"] { width: 100%; height: 5px; }

        .ev2-calculator-section { margin-bottom:18px; }

        .ev2-calculator-section h3 {
            margin: 0 0 16px;
            font-size: 0.95rem;
        }

        .ev2-ev-selector { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }

        .ev2-ev-selector .ev-input-group { flex: 1; min-width: 220px; }

        .ev2-ev-selector .ev-input-group label { display: block; margin-bottom: 5px; }

        .ev2-ev-selector select,
        .ev2-sessions-select { width: 100%; }

        .ev2-ev-info-card { margin-bottom: 16px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }

        .ev2-ev-stat {
            text-align: center;
        }

        .ev2-ev-stat-value {
            font-size: 1.05rem;
            font-weight: 700;
            color: var(--color-primary);
        }

        .ev2-ev-stat-label { margin-top: 2px; }

        .ev2-results {
            display: flex;
            gap: 12px;
            flex-wrap: wrap;
            justify-content: center;
        }

        .ev2-result-box { text-align: center; min-width: 130px; flex: 1; }

        .ev2-result-label { margin-bottom: 4px; }

        .ev2-result-value {
            font-size: 1.2rem;
            font-weight: 700;
            color: #dc2626;
        }

        .ev2-result-detail {
            font-size: 0.68rem;
            color: var(--color-text-muted);
            margin-top: 3px;
        }

        .ev2-savings-box {
            background: linear-gradient(135deg, var(--color-primary) 0%, #0d9488 100%);
            border-radius: var(--radius-md);
            padding: 14px 22px;
            text-align: center;
            color: #fff;
            box-shadow: 0 4px 12px rgba(15, 118, 110, 0.28);
            min-width: 130px;
        }

        .ev2-savings-value {
            font-size: 1.5rem;
            font-weight: 700;
        }

        .ev2-savings-pct {
            font-size: 0.77rem;
            background: rgba(255, 255, 255, 0.2);
            padding: 2px 10px;
            border-radius: var(--radius-full);
            margin-top: 4px;
            display: inline-block;
            font-weight: 500;
        }

        .ev2-arrow {
            font-size: 1.3rem;
            color: var(--color-text-muted);
        }

        .ev2-status {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-top: 12px;
            padding: 7px 12px;
            background: var(--color-bg);
            border-radius: var(--radius-sm);
            font-size: 0.73rem;
            color: var(--color-text-muted);
            border: 1px solid var(--color-border);
        }

        .ev2-status-dot {
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: #f59e0b;
            animation: pulse 1.5s ease-in-out infinite;
        }

        .ev2-status-dot.connected {
            background: #22c55e;
            animation: none;
        }

        .ev2-status-dot.error {
            background: #ef4444;
            animation: none;
        }

        .ev2-loading {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 0.78rem;
            color: var(--color-text-light);
        }

        .ev2-spinner { width: 15px; height: 15px; }

        .ev2-data-source { text-align: center; margin-top: 4px; }

        .ev2-data-source p {
            margin: 4px 0;
        }

        /* Step progress */
        .ev2-progress { display: flex; align-items: center; margin-bottom: 22px; }

        .ev2-prog-step {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .ev2-prog-num { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

        .ev2-prog-label { white-space: nowrap; }

        .ev2-prog-line {
            flex: 1;
            height: 2px;
            background: var(--color-border);
            margin: 0 14px;
            border-radius: 1px;
            transition: background 0.3s ease;
        }

        .ev2-prog-line.done {
            background: var(--color-primary);
        }

        /* Steps */
        .ev2-step {
            display: none;
        }

        .ev2-step.active {
            display: block;
            animation: ev2FadeUp 0.28s ease;
        }

        @keyframes ev2FadeUp {
            from {
                opacity: 0;
                transform: translateY(10px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* Step 1 map */
        .ev2-map-hint {
            font-size: 0.8rem;
            color: var(--color-text-muted);
            text-align: center;
            margin-top: 10px;
        }

        /* Step 2 topbar */
        .ev2-step2-topbar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 12px;
            margin-bottom: 18px;
            padding: 12px 18px;
            background: var(--color-surface);
            border: 1px solid var(--color-border);
            border-radius: var(--radius-lg);
            box-shadow: var(--shadow-sm);
        }

        .ev2-back-btn { display: flex; align-items: center; gap: 6px; }

        .ev2-selected-badge { display: flex; align-items: center; gap: 10px; }

        .ev2-badge-flag {
            font-size: 1.5rem;
        }

        .ev2-badge-name {
            font-size: 0.92rem;
            font-weight: 600;
            color: var(--color-text);
        }

        .ev2-badge-zone {
            font-size: 0.72rem;
            color: var(--color-text-muted);
            margin-top: 1px;
        }

        .ev2-region-btn {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            padding: 12px 14px;
            background: var(--color-bg);
            border: 1.5px solid var(--color-border);
            border-radius: var(--radius-md);
            cursor: pointer;
            font-family: var(--font-main);
            text-align: left;
            transition: opacity 0.18s ease, transform 0.18s ease, background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
        }

        .ev2-region-btn:hover {
            border-color: var(--color-primary);
            background: var(--color-primary-light);
        }

        .ev2-region-name {
            font-size: 0.85rem;
            font-weight: 600;
            color: var(--color-text);
        }

        .ev2-region-sub {
            font-size: 0.72rem;
            color: var(--color-text-muted);
            margin-top: 2px;
        }

        .ev2-region-code {
            font-size: 0.67rem;
            font-weight: 700;
            color: var(--color-primary);
            margin-top: 5px;
            background: var(--color-primary-light);
            padding: 1px 6px;
            border-radius: 3px;
        }

        @media (max-width: 768px) {
            .ev2-ev-info-card { grid-template-columns: repeat(2, 1fr); }

            .ev2-results {
                flex-direction: column;
            }

            .ev2-arrow {
                transform: rotate(90deg);
            }
        }

/* Embedded tool surface matches the CV website. */
:root { --color-primary:#173d88; --color-primary-light:#edf2fa; --font-main:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif; }
html,body { margin:0; padding:0; min-height:0; background:#fafbf9; color:#172332; }
body { display:block; }
#ev-charging2 { width:100%; max-width:none; margin:0; padding:24px; box-shadow:none; border:0; background:transparent; }
h2 { font-size:24px; letter-spacing:-.6px; border:0; padding:0; }
#ev-charging2 > p { color:#536172; font-size:14px; }
.ev2-map-container { max-width:800px; margin-inline:auto; }
.ev2-country-picker { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:20px 0; font-size:14px; }
.ev2-country-picker select { max-width:100%; }
@media(max-width:600px) { #ev-charging2 { padding:16px; } .ev2-progress { gap:6px; } .ev2-prog-line { min-width:10px; } .ev2-threshold-controls { flex-wrap:wrap; } .ev2-threshold-group { min-width:0; width:100%; } .ev2-step2-topbar { flex-wrap:wrap; } }
@media(max-width:700px) {
 .ev2-progress { gap:4px; }
 .ev2-prog-step { flex:1; min-width:0; flex-direction:column; text-align:center; gap:6px; }
 .ev2-prog-label { white-space:normal; }
 .ev2-prog-line { flex:0 0 10px; min-width:0; margin:0 3px; }
 .ev2-ev-selector .ev-input-group { min-width:0; flex-basis:100%; }
}
:root { --color-text-muted:#62748a; }
@media(max-width:600px) { .ev2-threshold-group { flex-basis:100%; } }

/* Domain layout only; primitives use Oat's default skin. */
.ev2-prog-step { min-width:0; }
.ev2-prog-num { flex-shrink:0; }
.ev2-ev-info-card.card { display:grid; }
.ev2-chart-container.card { margin-bottom:18px; }
.ev2-data-source.card { margin-top:18px; }

@media(max-width:600px) { .ev2-progress.card { padding:12px; } .ev2-threshold-group { flex-basis:100%; } .ev2-view-buttons { display:flex; flex-wrap:wrap; gap:4px; } }