:root{--bg-primary:#0f0f1a;--bg-secondary:#1a1a2e;--bg-tertiary:#252540;--text-primary:#e8e8f0;--text-secondary:#9898b0;--text-muted:#686880;--accent:#f59e0b;--accent-dim:#b45309;--success:#22c55e;--success-dim:#166534;--warning:#f59e0b;--warning-dim:#92400e;--input-bg:#1e1e35;--input-border:#3a3a55;--input-focus:#f59e0b;--radius:10px;--radius-sm:6px}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{-webkit-text-size-adjust:100%;font-size:16px}body{background:var(--bg-primary);color:var(--text-primary);-webkit-font-smoothing:antialiased;min-height:100dvh;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}#app{flex-direction:column;max-width:480px;min-height:100dvh;margin:0 auto;padding:0 16px;display:flex}.header{border-bottom:1px solid var(--bg-tertiary);align-items:center;gap:12px;padding:16px 0;display:flex}.header-back{width:40px;height:40px;color:var(--text-secondary);cursor:pointer;border-radius:var(--radius-sm);background:0 0;border:none;flex-shrink:0;justify-content:center;align-items:center;font-size:20px;transition:background .15s;display:flex}.header-back:active{background:var(--bg-tertiary)}.header-title{letter-spacing:.5px;text-transform:uppercase;color:var(--text-secondary);font-size:15px;font-weight:700}.header-tool-name{color:var(--text-primary)}.garage{flex:1;padding:24px 0}.garage h1{margin-bottom:4px;font-size:22px;font-weight:700}.garage p{color:var(--text-secondary);margin-bottom:24px;font-size:14px}.tool-grid{grid-template-columns:1fr 1fr;gap:12px;display:grid}.tool-card{background:var(--bg-secondary);border:1px solid var(--bg-tertiary);border-radius:var(--radius);cursor:pointer;color:inherit;flex-direction:column;align-items:center;gap:8px;padding:24px 16px;text-decoration:none;transition:border-color .15s,background .15s;display:flex}.tool-card:active{background:var(--bg-tertiary);border-color:var(--accent-dim)}.tool-card-icon{font-size:32px}.tool-card-name{font-size:14px;font-weight:600}.tool-card-desc{color:var(--text-secondary);text-align:center;font-size:12px}.input-group{margin-bottom:16px}.input-label{text-transform:uppercase;letter-spacing:.5px;color:var(--text-secondary);margin-bottom:6px;font-size:12px;font-weight:600;display:block}.input-field{background:var(--input-bg);border:1.5px solid var(--input-border);border-radius:var(--radius-sm);width:100%;height:48px;color:var(--text-primary);-webkit-appearance:none;outline:none;padding:0 14px;font-family:inherit;font-size:18px;transition:border-color .15s}.input-field:focus{border-color:var(--input-focus)}.input-field::placeholder{color:var(--text-muted)}.input-row{align-items:stretch;gap:8px;display:flex}.input-row .input-field{flex:1;min-width:0}.toggle-group{background:var(--bg-tertiary);border-radius:var(--radius-sm);flex-shrink:0;display:flex;overflow:hidden}.toggle-btn{min-width:56px;height:48px;color:var(--text-secondary);cursor:pointer;background:0 0;border:none;flex:1;padding:0 12px;font-family:inherit;font-size:14px;font-weight:600;transition:background .15s,color .15s}.toggle-btn.active{background:var(--accent);color:#000}.checkbox-label{color:var(--text-secondary);cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;gap:10px;margin-bottom:16px;font-size:14px;display:flex}.checkbox-label input[type=checkbox]{width:20px;height:20px;accent-color:var(--accent);cursor:pointer;flex-shrink:0}.laptime-row{align-items:center;gap:6px;display:flex}.laptime-field{text-align:center;min-width:0}.laptime-field--mins,.laptime-field--secs{flex:2}.laptime-field--ms{flex:3}.laptime-sep{color:var(--text-muted);flex-shrink:0;margin-bottom:1px;font-size:22px;font-weight:600}.tool-content{flex:1;padding:20px 0}.fuel-result{background:var(--bg-secondary);border-radius:var(--radius);border:1px solid var(--bg-tertiary);margin-top:24px;padding:20px}.fuel-result-primary{margin-bottom:16px}.fuel-result-stats{align-items:center;gap:0;display:flex}.fuel-result-stat{text-align:center;flex:1}.fuel-result-divider{background:var(--bg-tertiary);align-self:stretch;width:1px;margin:4px 0}.fuel-result-label{text-transform:uppercase;letter-spacing:1px;color:var(--text-secondary);margin-bottom:4px;font-size:11px;font-weight:700}.fuel-result-value{color:var(--accent);font-size:40px;font-weight:700;line-height:1.1}.fuel-result-unit{color:var(--text-secondary);margin-left:4px;font-size:20px;font-weight:500}.fuel-result-laps{color:var(--text-primary);font-size:40px;font-weight:700;line-height:1.1}.fuel-result-laps-extra{color:var(--text-muted);margin-left:2px;font-size:16px;font-weight:600}.range-bar{margin-top:20px}.range-bar--last-lap{border-top:1px solid var(--bg-tertiary);margin-top:24px;padding-top:20px}.range-bar-title{text-transform:uppercase;letter-spacing:.5px;color:var(--text-secondary);margin-bottom:8px;font-size:11px;font-weight:700}.lap-coverage-desc{color:var(--text-secondary);margin-top:10px;font-size:13px;line-height:1.4}.range-track{background:var(--bg-tertiary);border-radius:14px;height:28px;display:flex;position:relative;overflow:hidden}.range-zone-gradient{background:linear-gradient(90deg,#92400e,#166534);flex:1}.range-segment-color{flex:1}.range-segment-color--low{background:var(--success-dim)}.range-segment-color--mid{background:var(--bg-tertiary)}.range-segment-color--high{background:var(--warning-dim)}.range-marker{background:var(--text-primary);border-radius:2px;width:3px;transition:left .2s;position:absolute;top:-2px;bottom:-2px;transform:translate(-50%)}.range-segment-divider{background:#00000059;width:2px;position:absolute;top:0;bottom:0;transform:translate(-50%)}.range-labels{justify-content:space-between;margin-top:8px;padding:0 2px;font-size:12px;display:flex}.range-labels--thirds{justify-content:unset}.range-labels--thirds>*{text-align:center;flex:1}.range-label-col{flex-direction:column;gap:2px;display:flex}.range-label-col--center{align-items:center}.range-label-col--right{align-items:flex-end}.range-label-sublabel{color:var(--text-muted);font-size:11px}.range-label-best{color:var(--success)}.range-label-safe{color:var(--text-primary);font-weight:700}.range-label-worst{color:var(--warning)}.fuel-result-empty{text-align:center;color:var(--text-muted);background:var(--bg-secondary);border-radius:var(--radius);border:1px solid var(--bg-tertiary);margin-top:24px;padding:32px 20px;font-size:14px}
