:root {
    --bg-primary: #0a0e1a; --bg-card: rgba(17,24,39,0.7); --bg-input: rgba(255,255,255,0.05); --bg-input-focus: rgba(255,255,255,0.08);
    --text-primary: #f1f5f9; --text-secondary: #94a3b8; --text-muted: #64748b;
    --accent-primary: #38bdf8; --accent-secondary: #818cf8;
    --accent-gradient: linear-gradient(135deg,#38bdf8,#818cf8); --accent-gradient-hover: linear-gradient(135deg,#7dd3fc,#a5b4fc);
    --border: rgba(255,255,255,0.08); --border-focus: rgba(56,189,248,0.5);
    --shadow-glow: 0 0 40px rgba(56,189,248,0.15);
    --font-family: 'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
    --radius-sm:8px; --radius-md:12px; --radius-lg:16px; --radius-xl:20px; --radius-full:50px;
    --transition-fast:150ms ease; --transition-base:250ms ease;
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{font-size:16px;scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
body{font-family:var(--font-family);background:var(--bg-primary);color:var(--text-primary);min-height:100vh;line-height:1.6;overflow-x:hidden}
.background-glow{position:fixed;top:-200px;left:50%;transform:translateX(-50%);width:600px;height:600px;background:radial-gradient(circle,rgba(56,189,248,0.08) 0%,rgba(129,140,248,0.04) 40%,transparent 70%);pointer-events:none;z-index:0}
.header{position:sticky;top:0;z-index:100;background:rgba(10,14,26,0.8);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--border)}
.header-content{max-width:1100px;margin:0 auto;padding:1rem 1.5rem;display:flex;align-items:center;justify-content:space-between}
.logo{display:flex;align-items:center;gap:.5rem} .logo-icon{font-size:1.5rem}
.logo-text{font-size:1.1rem;font-weight:700;background:var(--accent-gradient);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.badge{font-size:.75rem;font-weight:600;padding:.25rem .5rem;background:rgba(255,255,255,0.06);border:1px solid var(--border);border-radius:var(--radius-full);color:var(--text-secondary)}
.main{position:relative;z-index:1;max-width:1100px;margin:0 auto;padding:2rem 1.5rem 3rem}
.hero{text-align:center;margin-bottom:1.5rem;animation:fadeInUp .6s ease}
.hero h1{font-size:clamp(1.5rem,4vw,2.2rem);font-weight:800;line-height:1.2;margin-bottom:.75rem;background:linear-gradient(135deg,var(--text-primary),var(--text-secondary));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero-subtitle{font-size:clamp(.9rem,2vw,1.05rem);color:var(--text-secondary);max-width:560px;margin:0 auto;line-height:1.7}
/* Tabs */
.mode-tabs{display:flex;gap:.4rem;justify-content:center;margin-bottom:2rem;animation:fadeInUp .6s ease .1s both;flex-wrap:wrap}
.mode-tab{display:flex;align-items:center;gap:.4rem;padding:.6rem 1.2rem;font-family:var(--font-family);font-size:.85rem;font-weight:600;color:var(--text-muted);background:var(--bg-input);border:1.5px solid var(--border);border-radius:var(--radius-full);cursor:pointer;transition:all var(--transition-fast)}
.mode-tab:hover{color:var(--text-secondary);border-color:rgba(255,255,255,0.15)} .mode-tab.active{color:#0f172a;background:var(--accent-gradient);border-color:transparent}
.tab-icon{font-size:.95rem} .mode-panel{display:none;animation:fadeInUp .4s ease} .mode-panel.active{display:block}
/* Cards */
.card{background:var(--bg-card);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border:1px solid var(--border);border-radius:var(--radius-xl);padding:2rem;transition:box-shadow var(--transition-base)}
.card:hover{box-shadow:var(--shadow-glow)}
.card-header{margin-bottom:1.5rem} .card-header h2{font-size:1.2rem;font-weight:700;margin-bottom:.2rem} .card-header p{font-size:.85rem;color:var(--text-muted)}
.calculator-layout{display:grid;grid-template-columns:1fr;gap:2rem}
@media(min-width:860px){.calculator-layout{grid-template-columns:1fr 1fr;align-items:start}}
/* Forms */
.form{display:flex;flex-direction:column;gap:1.1rem} .form-group{display:flex;flex-direction:column;gap:.4rem}
.form-label{font-size:.85rem;font-weight:600;display:flex;flex-direction:column;gap:2px} .form-hint{font-size:.75rem;font-weight:400;color:var(--text-muted)}
.input-wrapper{position:relative;display:flex;align-items:center} .input-wrapper.has-prefix .form-input{padding-left:2.2rem}
.input-prefix{position:absolute;left:14px;font-size:.95rem;font-weight:600;color:var(--text-muted);pointer-events:none;z-index:1}
.form-input,.form-input-text{width:100%;padding:.7rem 1rem;padding-right:5rem;font-family:var(--font-family);font-size:.95rem;font-weight:500;color:var(--text-primary);background:var(--bg-input);border:1.5px solid var(--border);border-radius:var(--radius-md);outline:none;transition:all var(--transition-fast);-moz-appearance:textfield}
.form-input-text{padding-right:1rem}
.form-input::-webkit-outer-spin-button,.form-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.form-input::placeholder,.form-input-text::placeholder{color:var(--text-muted);font-weight:400}
.form-input:focus,.form-input-text:focus,.form-select:focus{background:var(--bg-input-focus);border-color:var(--border-focus);box-shadow:0 0 0 3px rgba(56,189,248,0.1)}
.form-input.error{border-color:#f87171;box-shadow:0 0 0 3px rgba(248,113,113,0.1)}
.input-unit{position:absolute;right:14px;font-size:.78rem;font-weight:500;color:var(--text-muted);pointer-events:none;white-space:nowrap}
/* Select */
.form-select{width:100%;padding:.7rem 1rem;font-family:var(--font-family);font-size:.85rem;font-weight:500;color:var(--text-primary);background:var(--bg-input);border:1.5px solid var(--border);border-radius:var(--radius-md);outline:none;cursor:pointer;transition:all var(--transition-fast);appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center}
.form-select:disabled{opacity:.4;cursor:not-allowed}
.form-select option{background:#1e293b;color:var(--text-primary)}
.model-selector,.price-selector{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
/* Fuel Selector */
.fuel-selector{display:grid;grid-template-columns:repeat(3,1fr);gap:.4rem}
.fuel-option{display:flex;flex-direction:column;align-items:center;gap:3px;padding:.6rem .4rem;background:var(--bg-input);border:1.5px solid var(--border);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast);font-family:var(--font-family);color:var(--text-secondary)}
.fuel-option:hover{background:var(--bg-input-focus);transform:translateY(-1px)}
.fuel-option.active{background:rgba(56,189,248,0.1);border-color:var(--accent-primary);color:var(--accent-primary);box-shadow:0 0 0 3px rgba(56,189,248,0.08)}
.fuel-icon{font-size:1.1rem} .fuel-name{font-size:.75rem;font-weight:600}
/* Price indicator */
.price-indicator{display:flex;align-items:center;gap:.4rem;padding:.4rem .75rem;background:rgba(52,211,153,0.08);border:1px solid rgba(52,211,153,0.2);border-radius:var(--radius-sm);font-size:.75rem;color:#34d399;font-weight:500}
.price-indicator.hidden{display:none} .indicator-dot{width:6px;height:6px;border-radius:50%;background:#34d399}
/* Buttons */
.btn-calculate{display:flex;align-items:center;justify-content:center;gap:.5rem;width:100%;padding:.8rem 1.5rem;font-family:var(--font-family);font-size:.95rem;font-weight:700;color:#0f172a;background:var(--accent-gradient);border:none;border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast);margin-top:.3rem}
.btn-calculate:hover{background:var(--accent-gradient-hover);box-shadow:0 4px 20px rgba(56,189,248,0.3);transform:translateY(-1px)}
.btn-calculate:active{transform:translateY(0)} .btn-icon{font-size:1.1rem;transition:transform var(--transition-fast)} .btn-calculate:hover .btn-icon{transform:translateX(3px)}
.btn-compare{max-width:500px;margin:1.5rem auto 0}
.btn-reset{width:100%;padding:.65rem 1.5rem;font-family:var(--font-family);font-size:.85rem;font-weight:600;color:var(--text-secondary);background:rgba(255,255,255,0.05);border:1px solid var(--border);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast)}
.btn-reset:hover{background:rgba(255,255,255,0.08);color:var(--text-primary)}
.btn-save-profile{width:100%;padding:.65rem 1.5rem;font-family:var(--font-family);font-size:.85rem;font-weight:600;color:var(--accent-primary);background:rgba(56,189,248,0.08);border:1px solid rgba(56,189,248,0.2);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast);margin-bottom:.5rem}
.btn-save-profile:hover{background:rgba(56,189,248,0.15)}
.btn-danger{padding:.65rem 1.5rem;font-family:var(--font-family);font-size:.85rem;font-weight:600;color:#fff;background:#ef4444;border:none;border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast)}
.btn-danger:hover{background:#dc2626}
/* Results */
.results-card{position:relative;overflow:hidden} @media(min-width:860px){.results-card{position:sticky;top:80px}}
.results-placeholder{text-align:center;padding:3rem 1rem} .placeholder-icon{font-size:2.5rem;margin-bottom:.75rem;opacity:.5}
.results-placeholder h3{font-size:1rem;font-weight:600;margin-bottom:.25rem;color:var(--text-secondary)} .results-placeholder p{font-size:.82rem;color:var(--text-muted)}
.results-content.hidden{display:none}
.results-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.25rem} .results-header h2{font-size:1.1rem;font-weight:700}
.fuel-badge{font-size:.68rem;font-weight:700;padding:4px 10px;background:var(--accent-gradient);border-radius:var(--radius-full);color:#0f172a;text-transform:uppercase;letter-spacing:.05em}
.main-result{text-align:center;padding:1.25rem 1rem;background:linear-gradient(135deg,rgba(56,189,248,0.08),rgba(129,140,248,0.06));border:1px solid rgba(56,189,248,0.15);border-radius:var(--radius-lg);margin-bottom:1.25rem}
.main-result-label{display:block;font-size:.78rem;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.08em;margin-bottom:.3rem}
.main-result-value{display:block;font-size:clamp(1.7rem,5vw,2.2rem);font-weight:800;background:var(--accent-gradient);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;line-height:1.1}
.results-grid{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin-bottom:1.25rem}
.results-grid-3{grid-template-columns:repeat(3,1fr)}
.result-item{display:flex;align-items:center;gap:.4rem;padding:.6rem;background:rgba(255,255,255,0.03);border:1px solid var(--border);border-radius:var(--radius-md);transition:all var(--transition-fast);animation:fadeInUp .35s ease both}
.result-item:hover{background:rgba(255,255,255,0.05);transform:translateY(-1px)}
.result-icon{font-size:1.1rem;flex-shrink:0} .result-info{display:flex;flex-direction:column;min-width:0}
.result-value{font-size:.9rem;font-weight:700;line-height:1.2} .result-label{font-size:.68rem;font-weight:500;color:var(--text-muted)}
.section-subtitle{font-size:.82rem;font-weight:600;color:var(--text-secondary);margin-bottom:.6rem}
.period-breakdown{display:flex;flex-direction:column;gap:.4rem;margin-bottom:1.25rem}
.period-row{display:flex;justify-content:space-between;align-items:center;padding:.55rem .85rem;background:rgba(255,255,255,0.03);border:1px solid var(--border);border-radius:var(--radius-sm);transition:all var(--transition-fast)}
.period-row:hover{background:rgba(255,255,255,0.05)} .period-row.highlight{background:rgba(56,189,248,0.08);border-color:rgba(56,189,248,0.2)}
.period-label{font-size:.82rem;font-weight:500;color:var(--text-secondary)} .period-value{font-size:.9rem;font-weight:700}
/* Shared & Comparison */
.shared-card{margin-bottom:1.5rem} .shared-inputs{display:grid;grid-template-columns:1fr 1fr;gap:1rem} @media(max-width:600px){.shared-inputs{grid-template-columns:1fr}}
.comparison-grid{display:grid;grid-template-columns:1fr;gap:1.5rem} @media(min-width:700px){.comparison-grid{grid-template-columns:1fr 1fr}}
.vehicle-card .card-header{display:flex;align-items:center;gap:.75rem}
.vehicle-tag{width:34px;height:34px;display:flex;align-items:center;justify-content:center;font-size:.85rem;font-weight:800;border-radius:50%;flex-shrink:0}
.vehicle-tag.small{width:26px;height:26px;font-size:.7rem}
.tag-a{background:linear-gradient(135deg,#38bdf8,#0ea5e9);color:#0c1826} .tag-b{background:linear-gradient(135deg,#a78bfa,#818cf8);color:#1a1535}
.comparison-results-card{margin-top:1.5rem}
.cmp-side-by-side{display:grid;grid-template-columns:1fr auto 1fr;gap:.6rem;align-items:start;margin-bottom:1.25rem}
@media(max-width:600px){.cmp-side-by-side{grid-template-columns:1fr}.cmp-divider{display:flex;justify-content:center}}
.cmp-col-header{display:flex;align-items:center;gap:.4rem;margin-bottom:.6rem} .cmp-fuel-label{font-size:.78rem;font-weight:600;color:var(--text-secondary)}
.cmp-values{display:flex;flex-direction:column;gap:.35rem}
.cmp-row{display:flex;justify-content:space-between;padding:.45rem .65rem;background:rgba(255,255,255,0.03);border:1px solid var(--border);border-radius:var(--radius-sm)}
.cmp-period{font-size:.78rem;color:var(--text-muted);font-weight:500} .cmp-val{font-size:.82rem;font-weight:700}
.cmp-divider{display:flex;align-items:center;justify-content:center;padding-top:2rem}
.cmp-divider span{font-size:.72rem;font-weight:800;color:var(--text-muted);background:rgba(255,255,255,0.05);padding:.35rem .65rem;border-radius:var(--radius-full);border:1px solid var(--border)}
.cmp-col-a .cmp-val.winner,.cmp-col-b .cmp-val.winner{color:#34d399} .cmp-val.loser{color:#f87171}
/* Savings */
.savings-section{padding:1.1rem;background:linear-gradient(135deg,rgba(52,211,153,0.08),rgba(56,189,248,0.05));border:1px solid rgba(52,211,153,0.2);border-radius:var(--radius-lg);margin-bottom:1.25rem;animation:fadeInUp .4s ease}
.savings-header{display:flex;align-items:center;gap:.6rem;margin-bottom:.8rem} .savings-icon{font-size:1.6rem} .savings-header h3{font-size:.95rem;font-weight:700} .savings-header p{font-size:.78rem;color:var(--text-secondary)}
.savings-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.4rem;margin-bottom:.6rem} @media(max-width:600px){.savings-grid{grid-template-columns:repeat(2,1fr)}}
.savings-item{text-align:center;padding:.6rem .4rem;background:rgba(255,255,255,0.05);border:1px solid var(--border);border-radius:var(--radius-md)}
.savings-item.savings-highlight{background:rgba(52,211,153,0.1);border-color:rgba(52,211,153,0.3)}
.savings-value{display:block;font-size:.95rem;font-weight:800;color:#34d399;line-height:1.2} .savings-label{font-size:.68rem;color:var(--text-muted);font-weight:500}
.savings-percent{text-align:center;font-size:.82rem;color:var(--text-secondary);padding:.4rem;background:rgba(255,255,255,0.03);border-radius:var(--radius-sm)} .savings-percent strong{color:#34d399}
.equal-cost{text-align:center;padding:2rem 1rem} .equal-cost.hidden{display:none} .equal-icon{font-size:2.2rem;display:block;margin-bottom:.4rem} .equal-cost h3{font-size:.95rem;margin-bottom:.2rem} .equal-cost p{font-size:.82rem;color:var(--text-muted)}
/* Profiles */
.profiles-layout{display:grid;grid-template-columns:1fr;gap:2rem} @media(min-width:860px){.profiles-layout{grid-template-columns:1fr 1fr;align-items:start}}
.profiles-list{display:flex;flex-direction:column;gap:.75rem}
.profiles-empty{text-align:center;padding:2rem 1rem}
.profile-card{padding:1rem;background:rgba(255,255,255,0.03);border:1px solid var(--border);border-radius:var(--radius-md);transition:all var(--transition-fast);animation:fadeInUp .3s ease}
.profile-card:hover{background:rgba(255,255,255,0.06);border-color:rgba(255,255,255,0.12)}
.profile-card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:.5rem;margin-bottom:.6rem}
.profile-card-name{font-size:.95rem;font-weight:700} .profile-card-model{font-size:.75rem;color:var(--text-muted);margin-top:2px}
.profile-card-details{display:flex;gap:1rem;flex-wrap:wrap;margin-bottom:.75rem}
.profile-detail{font-size:.78rem;color:var(--text-secondary);display:flex;align-items:center;gap:.25rem}
.profile-detail strong{color:var(--text-primary)}
.profile-actions{display:flex;gap:.4rem;flex-wrap:wrap}
.profile-btn{padding:.35rem .7rem;font-family:var(--font-family);font-size:.72rem;font-weight:600;border:1px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;transition:all var(--transition-fast);background:transparent;color:var(--text-secondary)}
.profile-btn:hover{background:rgba(255,255,255,0.08);color:var(--text-primary)}
.profile-btn.btn-use{color:var(--accent-primary);border-color:rgba(56,189,248,0.3)} .profile-btn.btn-use:hover{background:rgba(56,189,248,0.1)}
.profile-btn.btn-del{color:#f87171;border-color:rgba(248,113,113,0.3)} .profile-btn.btn-del:hover{background:rgba(248,113,113,0.1)}
/* Modal */
.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.6);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:200;animation:fadeIn .2s ease}
.modal-overlay.hidden{display:none}
.modal-card{background:#1e293b;border:1px solid var(--border);border-radius:var(--radius-lg);padding:2rem;max-width:400px;width:90%;text-align:center}
.modal-card h3{font-size:1.1rem;margin-bottom:.5rem} .modal-card p{font-size:.85rem;color:var(--text-secondary);margin-bottom:1.5rem}
.modal-actions{display:flex;gap:.75rem;justify-content:center}
.modal-actions .btn-reset{width:auto;padding:.6rem 1.5rem}
/* Toast */
/* Toast */
.toast{position:fixed;bottom:2rem;left:50%;transform:translateX(-50%);padding:.75rem 1.5rem;background:#1e293b;border:1px solid rgba(52,211,153,0.3);border-radius:var(--radius-full);color:#34d399;font-size:.85rem;font-weight:600;z-index:300;animation:toastIn .3s ease;pointer-events:none}
/* Error messages */
.error-message{margin-top:0.5rem;padding:0.75rem 1rem;background:rgba(239,68,68,0.1);border-left:4px solid #ef4444;border-radius:var(--radius-sm);color:#fca5a5;font-size:0.85rem;font-weight:500;animation:fadeIn .3s ease}
.error-message.hidden{display:none}
.trust-microcopy{font-size:0.75rem;color:var(--text-muted);margin-top:0.4rem;font-style:italic}
/* Action Buttons in Results */
.results-actions{display:flex;gap:0.75rem;margin-bottom:1.25rem;flex-wrap:wrap}
.btn-action{flex:1;display:flex;align-items:center;justify-content:center;gap:0.4rem;padding:0.65rem 1rem;font-family:var(--font-family);font-size:0.85rem;font-weight:600;border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast)}
.btn-share{background:rgba(37,211,102,0.1);color:#4ade80;border:1px solid rgba(37,211,102,0.2)}
.btn-share:hover{background:rgba(37,211,102,0.2);transform:translateY(-1px)}
.btn-copy{background:rgba(255,255,255,0.05);color:var(--text-secondary);border:1px solid var(--border)}
.btn-copy:hover{background:rgba(255,255,255,0.1);color:var(--text-primary);transform:translateY(-1px)}
/* Estimated Notice */
.estimated-notice{padding:0.85rem 1rem;background:rgba(255,255,255,0.03);border:1px solid var(--border);border-radius:var(--radius-md);margin-bottom:1.25rem}
.estimated-notice p{font-size:0.75rem;color:var(--text-muted);line-height:1.5}
.estimated-notice strong{color:var(--text-secondary)}
/* SEO Section */
.seo-section{margin-top:2rem;padding:2rem;background:rgba(255,255,255,0.02);border-radius:var(--radius-xl);border:1px solid var(--border)}
.seo-content{max-width:800px;margin:0 auto}
.seo-content h2{font-size:1.1rem;font-weight:700;color:var(--text-primary);margin:1.5rem 0 0.75rem}
.seo-content h2:first-child{margin-top:0}
.seo-content p,.seo-content ul{font-size:0.85rem;color:var(--text-secondary);line-height:1.6;margin-bottom:1rem}
.seo-content ul{list-style:disc;padding-left:1.5rem}
/* Footer */
.footer{position:relative;z-index:1;text-align:center;padding:2rem 1.5rem;border-top:1px solid var(--border);margin-top:2rem} .footer p{font-size:.75rem;color:var(--text-muted);max-width:500px;margin:0 auto}
/* Animations */
@keyframes fadeInUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes toastIn{from{opacity:0;transform:translateX(-50%) translateY(20px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
/* Responsive */
@media(max-width:480px){.card{padding:1.25rem;border-radius:var(--radius-lg)}.results-grid-3{grid-template-columns:1fr}.main{padding:1.25rem 1rem 2.5rem}.mode-tab{padding:.5rem .8rem;font-size:.8rem}}