/* ECU2Dyno. Simple, utilitarian layout with TurboCode-inspired orange and charcoal. */
:root,
[data-bs-theme="light"] {
  --brand: #e44a2e;
  --brand-hover: #c93a23;
  --brand-soft: #fff2ed;
  --ink: #212327;
  --muted: #71747b;
  --edge: #e3e3e1;
  --background: #f6f6f4;
  --surface: #fff;
  --soft-surface: #fafaf9;
  --torque-line: #e44a2e;
  --power-line: #2c333c;
  --bs-primary: #e44a2e;
  --bs-body-color: #212327;
  --bs-body-bg: #f6f6f4;
  --bs-secondary-color: #71747b;
  color-scheme: light;
}
[data-bs-theme="dark"] {
  --brand: #f46a4e;
  --brand-hover: #ff846e;
  --brand-soft: #32231f;
  --ink: #f1f1f0;
  --muted: #a2a4a7;
  --edge: #34363a;
  --background: #17191b;
  --surface: #222426;
  --soft-surface: #282a2d;
  --torque-line: #fa7256;
  --power-line: #bac7d0;
  --bs-body-color: #f1f1f0;
  --bs-body-bg: #17191b;
  --bs-secondary-color: #a2a4a7;
  color-scheme: dark;
}
*, *::before, *::after {box-sizing: border-box;}
html {scroll-behavior: smooth;}
body {margin: 0; background: var(--background); color: var(--ink); font: 15px/1.55 system-ui, -apple-system, "Segoe UI", Arial, sans-serif; -webkit-font-smoothing: antialiased;}
button, input {font: inherit;}
a {color: inherit;}
a:hover {color: var(--brand);}
:focus-visible {outline: 3px solid var(--brand); outline-offset: 3px;}
.app-shell {min-height: 100vh; display: flex; flex-direction: column;}
.container-xl {max-width: 1210px;}
.site-header {background: var(--surface); border-top: 3px solid var(--brand); border-bottom: 1px solid var(--edge);}
.header-inner {min-height: 73px; display: flex; justify-content: space-between; align-items: center; gap: 20px;}
.identity, .top-nav {display:flex; align-items:center;}
.identity {gap: 21px; min-width:0;}
.brand-name {font-weight: 810; color: var(--ink); letter-spacing: -1.1px; font-size: 27px; text-decoration:none; white-space:nowrap; line-height:1;}
.brand-name span {color: var(--brand);}
.brand-name:hover {color: var(--ink);}
.brand-divider {height: 26px; border-left:1px solid var(--edge);}
.brand-credit {font-size: 12px; line-height:1.5; color: var(--muted); text-decoration:none; white-space:nowrap;}
.brand-credit strong {display:block; color:var(--ink); font-size:13px; font-weight:700; letter-spacing:.1px;}
.top-nav {gap: 25px;}
.top-nav > a {font-size: 13px; font-weight:600; color:var(--muted); text-decoration:none; white-space:nowrap;}
.top-nav > a:hover {color:var(--brand);}
.top-nav .bi {font-size: 10px; margin-left: 3px;}
.theme-toggle {display:grid; place-items:center; background:transparent; border: 1px solid var(--edge); border-radius:7px; width:35px; height:35px; color:var(--ink);}
.theme-toggle:hover {background:var(--soft-surface);}
.main-content {padding-top: 43px; padding-bottom: 64px; flex:1;}
.page-intro {display:flex; justify-content:space-between; align-items:flex-start; gap:24px; margin-bottom:27px;}
.page-intro h1 {font-size: clamp(27px, 3vw, 34px); font-weight:760; letter-spacing:-1.2px; margin:0 0 8px; line-height:1.18;}
.page-intro p {color:var(--muted); margin:0; max-width:700px; line-height:1.6; font-size:14px;}
.intro-tag {margin-top:4px; border:1px solid var(--edge); color:var(--muted); font-size:12px; border-radius:4px; white-space:nowrap; padding:5px 11px; background:var(--surface);}
.upload-layout {display:grid; grid-template-columns:minmax(0, 1.7fr) minmax(300px, 1fr); gap:18px;}
.panel {background:var(--surface); border:1px solid var(--edge); border-radius:9px; box-shadow:0 2px 9px rgba(12,14,20,.025);}
.upload-panel, .settings-panel {padding: 23px;}
.panel-title-row {display:flex; align-items:start; justify-content:space-between; gap:16px; margin-bottom:18px;}
.panel-title-row h2 {font-weight: 700; font-size:17px; margin:0 0 3px; letter-spacing:-.25px;}
.panel-title-row p {color:var(--muted); font-size:13px; margin:0;}
.file-support {font-size:11px; color:var(--muted); white-space:nowrap; padding-top:4px;}
.separator-dot {padding:0 4px; color:var(--edge);}
.drop-zone {border:1.5px dashed #cbd0d4; background:var(--soft-surface); border-radius:7px; min-height:150px; display:flex; gap:19px; align-items:center; padding:26px; cursor:pointer; transition: border .15s, background .15s;}
.drop-zone:hover, .drop-zone.drag-over {border-color:var(--brand); background:var(--brand-soft);}
.drop-zone[aria-busy="true"] {pointer-events:none;}
.drop-icon {font-size:24px; color:var(--brand); border-radius:7px; width:50px; height:50px; flex-shrink:0; background:var(--brand-soft); display:grid; place-items:center;}
.drop-copy {display:flex; flex-direction:column; flex:1; min-width:0;}
.drop-copy strong {font-size:15px; font-weight:700;}
.drop-copy span {font-size:13px; color:var(--muted); margin-top:2px;}
.browse-button {padding:8px 12px; background:var(--surface); border:1px solid var(--edge); border-radius:5px; white-space:nowrap; font-size:12px; font-weight:650;}
.browse-button .bi {font-size:15px; vertical-align:-1px; margin-left:3px;}
.upload-bottom {display:flex; justify-content:space-between; align-items:center; gap:13px; padding-top:15px; min-height:34px;}
.selected-file {font-size:12px; min-width:0; max-width:72%; color:var(--muted); display:flex; gap:8px; align-items:center;}
.selected-file > span:first-of-type {overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.selected-file .bi {flex-shrink:0;}
.supported-logs {font-size:12px; color:var(--muted); white-space:nowrap;}
.supported-logs span {color:var(--brand); padding:0 3px; font-size:10px;}
.settings-panel {display:flex; flex-direction:column;}
.threshold-label {display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:13px; margin-top:7px; margin-bottom:14px;}
.threshold-label label {color:var(--ink); font-weight:600;}
.threshold-label strong {font-variant-numeric:tabular-nums; font-size:14px; color:var(--brand);}
.form-range {accent-color:var(--brand); margin:0;}
.form-range::-webkit-slider-thumb {background:var(--brand);}
.form-range::-moz-range-thumb {background:var(--brand); border:0;}
.threshold-scale {display:flex; justify-content:space-between; font-size:11px; color:var(--muted); margin-top:1px;}
.settings-help {font-size:12px; line-height:1.55; color:var(--muted); margin:13px 0 14px;}
.settings-bottom {margin-top:auto; padding-top:13px; border-top:1px solid var(--edge); display:flex; align-items:center; justify-content:space-between; gap:12px;}
.btn-secondary-light {background:var(--brand); color:#fff; font-weight:650; font-size:12px; padding:8px 15px; border:1px solid var(--brand); border-radius:5px;}
.btn-secondary-light:hover, .btn-secondary-light:focus {background:var(--brand-hover); color:#fff; border-color:var(--brand-hover);}
.sample-link {font-size:12px; text-decoration:none; color:var(--muted); white-space:nowrap;}
.sample-link .bi {margin-left:4px;}
.results-section {margin-top: 37px;}
.results-heading {display:flex; align-items:end; justify-content:space-between; gap:20px; margin-bottom:16px;}
.results-title h2 {font-size:19px; letter-spacing:-.4px; font-weight:740; margin:0 0 2px;}
.results-title p {font-size:12px; color:var(--muted); margin:0; max-width:440px; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;}
.chart-actions {display:flex; flex-wrap:wrap; justify-content:flex-end; gap:6px;}
.btn-tool {background:var(--surface); border:1px solid var(--edge); color:var(--ink); border-radius:5px; padding:7px 10px; font-size:12px; font-weight:600; display:inline-flex; align-items:center; gap:6px; box-shadow:none !important;}
.btn-tool:hover:not(:disabled) {background:var(--soft-surface); border-color:#aeb0b2; color:var(--ink);}
.btn-tool:disabled {opacity:.36;}
.btn-tool .bi {font-size:13px;}
.clear-action:not(:disabled) {color:var(--brand);}
.chart-panel {padding:22px 23px 17px; overflow:hidden;}
.chart-head {display:flex; justify-content:space-between; align-items:center; gap:15px; margin-bottom:14px;}
.chart-file-title {font-size:13px; font-weight:600; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.chart-legend {display:flex; gap:21px; font-size:12px; color:var(--muted); flex-shrink:0;}
.chart-legend > span {display:flex; gap:6px; align-items:center;}
.legend-mark {width:15px; height:3px; background:var(--torque-line); display:inline-block; border-radius:2px;}
.hp-mark {background:var(--power-line);}
.chart-container {position:relative; height:410px; width:100%;}
.chart-placeholder {height:410px; position:relative; background:var(--soft-surface); border:1px solid var(--edge); border-radius:6px; overflow:hidden; display:grid; place-items:center;}
.placeholder-grid {position:absolute; inset:0; opacity:.65; background-image:linear-gradient(to right, var(--edge) 1px, transparent 1px), linear-gradient(to bottom, var(--edge) 1px, transparent 1px); background-size:69px 69px; mask-image:linear-gradient(to bottom, transparent, black 30%, black 70%, transparent);}
.placeholder-center {position:relative; text-align:center; background:var(--soft-surface); padding:19px 27px; border-radius:7px;}
.placeholder-center > .bi {display:block; font-size:27px; color:var(--brand); margin-bottom:7px;}
.placeholder-center p {font-size:13px; color:var(--muted); margin:0 0 8px;}
.example-link {border:0; background:transparent; color:var(--brand); font-size:13px; font-weight:650; padding:4px;}
.example-link:hover {text-decoration:underline;}
.chart-footnote {font-size:11px; color:var(--muted); margin:11px 0 0; text-align:right;}
.stats-grid {display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:0; background:var(--surface); border:1px solid var(--edge); border-radius:8px; margin-top:15px; overflow:hidden;}
.stat-block {padding:19px 21px 20px; display:flex; flex-direction:column; min-width:0;}
.stat-block:not(:last-child) {border-right:1px solid var(--edge);}
.stat-label {font-size:12px; color:var(--muted); margin-bottom:5px;}
.stat-value {font-size:25px; font-weight:780; letter-spacing:-.9px; line-height:1.2; color:var(--ink); font-variant-numeric:tabular-nums; white-space:nowrap;}
.stat-block:first-child .stat-value {color:var(--brand);}
.stat-value.stat-small {font-size:20px; letter-spacing:-.5px; padding-top:3px;}
.stat-note {font-size:11px; color:var(--muted); margin-top:7px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.more-software {margin-top:55px; padding: 25px 0 0; border-top:1px solid var(--edge);}
.software-intro {display:flex; align-items:end; justify-content:space-between; gap:20px;}
.software-kicker {font-size:10px; color:var(--brand); font-weight:800; letter-spacing:1.2px;}
.software-intro h2 {font-size:21px; font-weight:750; letter-spacing:-.5px; margin:6px 0 5px;}
.software-intro p {font-size:13px; color:var(--muted); margin:0;}
.software-all {font-size:12px; white-space:nowrap; color:var(--brand); text-decoration:none; font-weight:700;}
.software-all .bi {margin-left:5px;}
.software-links {margin-top:21px; border:1px solid var(--edge); background:var(--surface); border-radius:8px; overflow:hidden; display:grid; grid-template-columns:repeat(3,minmax(0,1fr));}
.software-links a {padding:21px 41px 21px 19px; position:relative; display:flex; flex-direction:column; gap:4px; text-decoration:none; transition:background .15s;}
.software-links a:not(:last-child) {border-right:1px solid var(--edge);}
.software-links a:hover {background:var(--soft-surface);}
.software-links strong {font-size:13px; color:var(--ink); font-weight:700;}
.software-links span {font-size:12px; color:var(--muted);}
.software-links .bi {position:absolute; right:17px; top:22px; color:var(--brand); font-size:12px;}
.faq-section {margin-top:50px; padding-top:29px; border-top:1px solid var(--edge);}
.faq-intro h2 {font-size:21px; font-weight:750; letter-spacing:-.5px; margin:0 0 5px;}
.faq-intro p {font-size:13px; color:var(--muted); margin:0;}
.faq-list {margin-top:21px; border:1px solid var(--edge); background:var(--surface); border-radius:8px; overflow:hidden;}
.faq-item + .faq-item {border-top:1px solid var(--edge);}
.faq-item summary {list-style:none; display:flex; align-items:center; justify-content:space-between; gap:20px; cursor:pointer; padding:16px 20px; font-size:13px; font-weight:680; color:var(--ink); transition:background .15s;}
.faq-item summary::-webkit-details-marker {display:none;}
.faq-item summary:hover {background:var(--soft-surface);}
.faq-item[open] summary {color:var(--brand);}
.faq-chevron {height:8px; width:8px; border-right:1.6px solid currentColor; border-bottom:1.6px solid currentColor; transform:rotate(45deg); flex:0 0 auto; transition:transform .15s; margin-right:2px; color:var(--muted);}
.faq-item[open] .faq-chevron {transform:rotate(225deg);}
.faq-answer {padding:0 50px 17px 20px;}
.faq-answer p {font-size:13px; line-height:1.7; color:var(--muted); max-width:880px; margin:0;}
.site-footer {background:var(--surface); border-top:1px solid var(--edge); color:var(--muted); font-size:12px;}
.footer-inner {min-height:69px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px;}
.footer-inner a {text-decoration:none; font-weight:650; color:var(--ink);}
.footer-inner a:hover {color:var(--brand);}
.footer-dot {color:#b6b8b9; padding:0 8px;}
.modal-content {background:var(--surface); color:var(--ink); border:1px solid var(--edge); border-radius:10px;}
.modal-header, .modal-footer {border-color:var(--edge);}
.modal-header h2 {font-weight:750;}
.unit-choice {display:flex; align-items:center; gap:12px; border:1px solid var(--edge); border-radius:6px; padding:14px; margin-bottom:10px; cursor:pointer;}
.unit-choice:has(input:checked) {border-color:var(--brand); background:var(--brand-soft);}
.unit-choice input {accent-color:var(--brand);}
.unit-choice span {display:flex; flex-direction:column;}
.unit-choice strong {font-size:14px;}
.unit-choice small {font-size:12px; color:var(--muted);}
.unit-help {font-size:12px; color:var(--muted); margin:16px 0 0;}
.btn-primary {background:var(--brand); border-color:var(--brand);}
.btn-primary:hover {background:var(--brand-hover); border-color:var(--brand-hover);}
#chartPanel:fullscreen {border-radius:0; padding:25px; background:var(--surface); display:flex; flex-direction:column;}
#chartPanel:fullscreen .chart-container {height:auto; flex:1; min-height:0;}
.toast {background:var(--surface); color:var(--ink); border:1px solid var(--edge);}
.toast-header {background:var(--soft-surface); color:var(--ink);}
[data-bs-theme="dark"] .drop-zone {border-color:#57595c;}
[data-bs-theme="dark"] .btn-tool:hover:not(:disabled) {border-color:#686a6c;}
@media (max-width: 991px) {
  .upload-layout {grid-template-columns:minmax(0,1fr);}
  .settings-panel {display:block;}
  .settings-bottom {margin-top:12px;}
  .results-heading {align-items:start; flex-direction:column;}
  .chart-actions {justify-content:flex-start;}
  .chart-container, .chart-placeholder {height:360px;}
  .stat-value {font-size:22px;}
}
@media (max-width: 650px) {
  .header-inner {min-height:68px;}
  .identity {gap:11px;}
  .brand-name {font-size:24px;}
  .brand-divider {height:23px;}
  .brand-credit {font-size:10px;}
  .brand-credit strong {font-size:11px;}
  .top-nav {gap:12px;}
  .top-nav > a {display:none;}
  .main-content {padding-top:26px; padding-bottom:43px;}
  .page-intro {margin-bottom:20px;}
  .page-intro h1 {font-size:27px;}
  .page-intro p {font-size:13px;}
  .intro-tag {display:none;}
  .upload-panel, .settings-panel {padding:18px;}
  .drop-zone {padding:18px; gap:12px; flex-wrap:wrap; min-height:128px;}
  .drop-icon {height:45px; width:45px; font-size:21px;}
  .drop-copy {flex:1;}
  .drop-copy strong {font-size:14px;}
  .drop-copy span {font-size:12px;}
  .browse-button {display:none;}
  .results-section {margin-top:29px;}
  .chart-panel {padding:16px 12px 13px;}
  .chart-head {align-items:start; flex-direction:column; gap:8px; margin-bottom:11px;}
  .chart-legend {font-size:11px; gap:12px;}
  .chart-container, .chart-placeholder {height:285px;}
  .stats-grid {grid-template-columns: repeat(2, minmax(0,1fr));}
  .stat-block {padding:16px 13px;}
  .stat-block:nth-child(2) {border-right:0;}
  .stat-block:nth-child(-n+2) {border-bottom:1px solid var(--edge);}
  .stat-value {font-size:22px;}
  .stat-value.stat-small {font-size:17px;}
  .software-intro {align-items:start;}
  .software-links {grid-template-columns:1fr;}
  .faq-section {margin-top:36px; padding-top:23px;}
  .faq-item summary {padding:15px; line-height:1.45;}
  .faq-answer {padding:0 18px 15px 15px;}
  .software-links a:not(:last-child) {border-right:0; border-bottom:1px solid var(--edge);}
  .footer-inner {padding-top:16px; padding-bottom:16px;}
}
@media print {
  body {background:#fff;}
  .site-header, .upload-layout, .top-nav, .chart-actions, .more-software, .faq-section, .site-footer, #warningAlert, .toast-container, .page-intro {display:none !important;}
  .main-content {padding:0;}
  .results-section {margin-top:0;}
  .results-heading {margin:0 0 12px;}
  .panel, .stats-grid {border:1px solid #ddd; box-shadow:none;}
  .chart-panel {break-inside:avoid;}
  .stats-grid {break-inside:avoid;}
}