:root{--font-sans:system-ui,-apple-system,sans-serif;--font-mono:ui-monospace,Consolas,monospace;--color-bg:#0d1117;--color-surface:#161b22;--color-surface-subtle:#1c2129;--color-border:#30363d;--color-border-hover:#484f58;--color-text:#e6edf3;--color-text-muted:#8b949e;--color-text-subtle:#6e7681;--color-primary:#f0883e;--color-primary-subtle:rgba(240,136,62,.15);--color-accent:#58a6ff;--color-danger:#f85149;--color-danger-subtle:rgba(248,81,73,.15);--radius-sm:6px;--radius-md:10px;--radius-lg:14px;--radius-full:9999px}*,*:before,*:after{box-sizing:border-box}[hidden]{display:none!important}html,body{margin:0;padding:0;background:var(--color-bg);color:var(--color-text);font-family:var(--font-sans);font-size:15px;line-height:1.5}.app-container{max-width:880px;margin:0 auto;padding:24px 16px;display:flex;flex-direction:column;gap:20px}.app-header{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;padding-bottom:12px;border-bottom:1px solid var(--color-border)}.brand{display:flex;align-items:center;gap:12px}.brand-icon{width:34px;height:34px;padding:6px;border-radius:var(--radius-md);background:var(--color-primary-subtle);color:var(--color-primary)}.brand-title{margin:0;font-size:1.2rem;font-weight:700}.unit-switch{display:inline-flex;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-full);padding:3px;gap:2px}.unit-btn{background:transparent;color:var(--color-text-muted);border:none;font:inherit;font-size:.85rem;font-weight:600;padding:4px 12px;border-radius:var(--radius-full);cursor:pointer;transition:background .15s,color .15s}.unit-btn:hover{color:var(--color-text)}.unit-btn[aria-pressed=true]{background:var(--color-primary);color:#000}.unit-btn:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}.layout-grid{display:grid;grid-template-columns:1fr;gap:20px}@media(min-width:740px){.layout-grid{grid-template-columns:340px 1fr}}.panel{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:18px}.form-title{margin:0 0 14px;font-size:.85rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-muted)}.form-grid{display:flex;flex-direction:column;gap:14px}.field{display:flex;flex-direction:column;gap:4px}.field-label{font-size:.85rem;font-weight:500;display:flex;justify-content:space-between}.field-unit{color:var(--color-text-muted);font-family:var(--font-mono);font-size:.8rem}.field input[type=number]{width:100%;background:var(--color-surface-subtle);border:1px solid var(--color-border);border-radius:var(--radius-sm);color:var(--color-text);font-family:var(--font-mono);font-size:.95rem;padding:8px 10px}.field input[type=number]:hover{border-color:var(--color-border-hover)}.field input[aria-invalid=true]{border-color:var(--color-danger);background:var(--color-danger-subtle)}.level-slider-wrap{display:flex;align-items:center;gap:10px}.level-slider-wrap input[type=range]{flex:1;accent-color:var(--color-primary)}.level-badge{font-family:var(--font-mono);font-size:.85rem;font-weight:600;min-width:40px;text-align:right;color:var(--color-primary)}.main-error-banner{background:var(--color-danger-subtle);border:1px solid var(--color-danger);color:var(--color-danger);border-radius:var(--radius-md);padding:10px 12px;font-size:.85rem}.results-column{display:flex;flex-direction:column;gap:18px}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px}.stat-card{background:var(--color-surface-subtle);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:12px;display:flex;flex-direction:column;gap:4px}.stat-label{font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-muted)}.stat-value{font-family:var(--font-mono);font-size:1.4rem;font-weight:700;line-height:1.1}.stat-unit{font-size:.8rem;color:var(--color-text-muted);font-weight:400;margin-left:2px}.stat-card[data-highlight=true] .stat-value{color:var(--color-primary)}.visual-section{display:flex;flex-direction:column;gap:10px}.section-title{margin:0;font-size:.8rem;text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-muted)}.progress-track{background:var(--color-surface-subtle);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:8px;display:flex;gap:3px;overflow:hidden;min-height:44px;align-items:stretch}.leg-bar{background:var(--color-border-hover);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;padding:0 8px;min-width:20px;flex-grow:1;flex-shrink:1;color:var(--color-text);font-family:var(--font-mono);font-size:.75rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.leg-bar[data-kind=refuel]{background:var(--color-primary);color:#000;font-weight:700}.leg-bar[data-kind=first]{background:var(--color-accent);color:#000;font-weight:700}.empty-state,.loading-state{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:28px 16px;gap:10px;border:1px dashed var(--color-border);border-radius:var(--radius-lg);background:var(--color-surface)}.state-title{margin:0;font-size:.95rem;font-weight:600}.state-desc{margin:0;font-size:.8rem;color:var(--color-text-muted);max-width:300px}.btn-cta{background:var(--color-primary);color:#000;border:none;font:inherit;font-weight:600;font-size:.85rem;padding:8px 14px;border-radius:var(--radius-sm);cursor:pointer}.btn-cta:hover{opacity:.9}.spinner{width:28px;height:28px;border:3px solid var(--color-border);border-top-color:var(--color-primary);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}