.evk-wrap {
--evk-green: #39ff9a;
--evk-green-2: #16c172;
--evk-red: #ff4d5f;
--evk-white: #ffffff;
--evk-muted: #bac5c0;
--evk-panel: rgba(11, 14, 14, 0.72);
--evk-panel-2: rgba(17, 21, 21, 0.82);
--evk-border: rgba(57, 255, 154, 0.18);
--evk-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
--evk-radius: 16px;
max-width: 1080px;
margin: 0 auto;
color: var(--evk-white);
font-size: 15px;
}
.evk-wrap * { box-sizing: border-box; }
.evk-wrap, .evk-wrap input, .evk-wrap select, .evk-wrap button { font-family: Inter, Roboto, Arial, sans-serif; }
.evk-header {
display: grid;
grid-template-columns: 1.4fr .9fr;
gap: 16px;
align-items: end;
margin-bottom: 14px;
}
.evk-kicker {
display: inline-block;
font-size: 12px;
text-transform: uppercase;
letter-spacing: .08em;
color: var(--evk-green);
margin-bottom: 8px;
}
.evk-header h2 {
margin: 0 0 8px;
font-size: 30px;
line-height: 1.12;
}
.evk-header p { margin: 0; color: var(--evk-muted); font-size: 15px; }
.evk-badges { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.evk-badge,
.evk-pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 12px;
border-radius: 999px;
font-size: 12px;
font-weight: 700;
}
.evk-badge--ev, .evk-pill--good { background: rgba(57,255,154,0.12); color: var(--evk-green); border: 1px solid rgba(57,255,154,0.22); }
.evk-badge--ice, .evk-pill--bad { background: rgba(255,77,95,0.1); color: var(--evk-red); border: 1px solid rgba(255,77,95,0.22); }
.evk-grid { display: grid; gap: 14px; }
.evk-grid-top { grid-template-columns: repeat(3, 1fr); margin-bottom: 14px; }
.evk-grid-vehicles { grid-template-columns: repeat(2, 1fr); margin-bottom: 14px; }
.evk-advanced-grid, .evk-result-grid { grid-template-columns: repeat(2, 1fr); display:grid; gap: 14px; }
.evk-result-grid { grid-template-columns: repeat(3, 1fr); }
.evk-mini-grid { display:grid; gap: 12px; margin-top: 12px; }
.evk-mini-grid--2 { grid-template-columns: repeat(2, 1fr); }
.evk-col-span-2 { grid-column: span 2; }
.evk-card,
.evk-result-card,
.evk-breakdown,
.evk-disclaimer {
background: linear-gradient(180deg, rgba(18, 22, 22, 0.85), rgba(8, 10, 10, 0.76));
border: 1px solid var(--evk-border);
box-shadow: var(--evk-shadow);
border-radius: var(--evk-radius);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.evk-card,
.evk-result-card,
.evk-breakdown,
.evk-disclaimer { padding: 14px; }
.evk-card--compact { padding: 12px 14px; }
.evk-vehicle-col--ev { border-top: 1px solid rgba(57,255,154,0.45); }
.evk-vehicle-col--ice { border-top: 1px solid rgba(255,77,95,0.5); }
.evk-card h3,
.evk-card h4,
.evk-breakdown h3 { margin: 0 0 10px; font-size: 17px; }
.evk-card-topline {
display:flex;
justify-content:space-between;
align-items:center;
gap:12px;
margin-bottom: 8px;
}
.evk-card label {
display:block;
margin-bottom:6px;
color:#ebf5ef;
font-weight:700;
font-size:13px;
}
.evk-card input,
.evk-card select {
width:100%;
border:1px solid rgba(255,255,255,0.08);
background: rgba(255,255,255,0.06);
color:#fff;
border-radius:12px;
padding:11px 12px;
font-size:14px;
margin-bottom:10px;
}
.evk-card input:focus,
.evk-card select:focus {
outline:none;
border-color: rgba(57,255,154,0.55);
box-shadow: 0 0 0 3px rgba(57,255,154,0.12);
}
.evk-card input[type="range"] { padding:0; margin-bottom:4px; accent-color: var(--evk-green); }
.evk-range-value { color: var(--evk-green); font-weight: 700; margin-bottom: 4px; }
.evk-toggle {
width:100%;
border:1px solid rgba(57,255,154,0.2);
background: rgba(57,255,154,0.08);
color:#fff;
border-radius:12px;
padding:12px 14px;
font-weight:700;
cursor:pointer;
}
.evk-toggle:hover { background: rgba(57,255,154,0.12); }
.evk-advanced-content { margin-top: 14px; }
.evk-results { margin-top: 16px; }
.evk-info-box {
border-radius: 14px;
padding: 12px;
margin-top: 2px;
}
.evk-info-box--green { background: rgba(57,255,154,0.08); border: 1px solid rgba(57,255,154,0.16); }
.evk-info-box--red { background: rgba(255,77,95,0.08); border: 1px solid rgba(255,77,95,0.16); }
.evk-info-title { font-weight: 800; margin-bottom: 8px; }
.evk-points { list-style: none; padding: 0; margin: 0; display:grid; gap:6px; }
.evk-points li { color: var(--evk-muted); padding-left: 14px; position: relative; font-size: 13px; }
.evk-points li::before { content: '•'; position:absolute; left:0; color: var(--evk-green); }
.evk-info-box--red .evk-points li::before { color: var(--evk-red); }
.evk-danger-line { color: #fff; margin-bottom: 8px; font-size: 13px; }
.evk-danger-line strong { color: var(--evk-red); }
.evk-result-card--highlight {
margin-bottom: 14px;
background: linear-gradient(135deg, rgba(57,255,154,0.12), rgba(10,13,13,0.85));
border: 1px solid rgba(57,255,154,0.26);
}
.evk-result-label { color: var(--evk-muted); font-weight: 700; margin-bottom: 8px; font-size: 13px; }
.evk-result-value { font-size: 30px; line-height: 1.08; font-weight: 800; }
.evk-result-note, .evk-subnote { margin-top: 6px; color: var(--evk-muted); font-size: 13px; }
.evk-green { color: var(--evk-green); }
.evk-red { color: var(--evk-red); }
.evk-breakdown { margin-top: 14px; overflow-x: auto; }
.evk-breakdown table { width: 100%; min-width: 620px; border-collapse: collapse; }
.evk-breakdown th, .evk-breakdown td {
padding: 10px 8px;
border-bottom: 1px solid rgba(255,255,255,0.07);
text-align: left;
font-size: 14px;
}
.evk-breakdown th { color: var(--evk-muted); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.evk-disclaimer { margin-top: 14px; color: var(--evk-muted); font-size: 13px; }
@media (max-width: 900px) {
.evk-header,
.evk-grid-top,
.evk-grid-vehicles,
.evk-advanced-grid,
.evk-result-grid,
.evk-mini-grid--2 { grid-template-columns: 1fr; }
.evk-badges { justify-content: flex-start; }
.evk-col-span-2 { grid-column: auto; }
}
@media (max-width: 600px) {
.evk-wrap { font-size: 14px; }
.evk-header h2 { font-size: 24px; }
.evk-result-value { font-size: 25px; }
.evk-card, .evk-result-card, .evk-breakdown, .evk-disclaimer { padding: 12px; border-radius: 14px; }
.evk-card input, .evk-card select { padding: 10px 11px; font-size: 14px; margin-bottom: 8px; }
}