/* Godkänd design: Grönt på val. Löplabbets gröna #008f72 och mörkare #00765e.
 * Färger verifierade på /landningssida/pace-4-pro 2026-09-29.
 * Mörkare grönt bakom liten vit text ger tydligare kontrast.
 */
/* Designvariant: Magenta på val. Bygger vidare på svart/magenta-temat. */
/* Lägg efter styles.css. Ta bort länken för att återgå till originalet. */
@media screen {
  :root { --accent:#b0005d; --bg:#fff; --line:#e3dce0; --muted:#62575e; }
  body, body.embedded { background:#fff; }
  .intro { padding-top:44px; padding-bottom:32px; }
  .intro h1 { letter-spacing:-2.2px; }
  .tabs { background:transparent; border:0; padding:0; gap:12px; border-radius:0; }
  .tab { justify-content:center; border:1px solid #ded9dc; background:#fff; border-radius:6px; padding:17px 16px; color:#51464c; }
  .tab:hover { border-color:#b0005d; background:#fff4f9; }
  .tab[aria-selected=true] { background:#171717; color:white; border-color:#171717; box-shadow:inset 0 -4px #d0006f; }
  .input-card { border-color:#e3dce0; box-shadow:0 4px 20px #3b062705; }
  .step { background:#fce7f2; color:#980052; font-weight:700; }
  .primary-button { background:#b0005d; color:white; }
  .primary-button:hover { background:#8d004b; }
  .result-card { background:#171717; border:1px solid #171717; }
  .result-time { color:#fff; }
  .result-distance { font-weight:600; }
  .result-top .eyebrow, .result-caption, .result-metrics span, .result-metrics small, .result-bottom { color:#bdbdbd; }
  .result-tag { color:#cecece; border-color:#494949; }
  .result-metrics, .result-metrics>div+div { border-color:#444; }
  .line-marker { background:#989898; }
  .insight-icon { border-color:#b0005d; color:#980052; }
  .text-button { color:#980052; border-color:#d496b7; }
  .segmented { background:#f5edf1; }
  .segmented input:checked+span { color:#980052; box-shadow:0 1px 5px #5b003214; }
  .check-label input, .table-extra-toggle input { accent-color:#b0005d; }
  .presets button:hover { background:#fff2f8; border-color:#b0005d; }
  .presets button[aria-pressed=true] { background:#b0005d; border-color:#b0005d; color:white; }
  .equivalent.selected { background:#fff3f9; border-color:#b0005d; box-shadow:inset 0 3px #b0005d; }
  .equivalent.selected strong { color:#980052; }
  .equivalent:hover { border-color:#b0005d; background:#fff8fc; }
  .table-scroll thead th { background:#f4edf1; color:#59404d; }
  .table-scroll tbody tr.highlight-row { background:#fce7f2; }
  .jump-current { background:#b0005d; border-color:#b0005d; }
  #treadmill-table thead th { background:#1d191c; color:white; border-bottom:3px solid #d0006f; }
  #treadmill-table tbody tr.whole-speed { background:#f5edf1; }
  #treadmill-table tbody tr.whole-speed th, #treadmill-table tbody tr.whole-speed td { border-top-color:#d9c4cf; }
  #treadmill-table tbody tr.highlight-row { background:#840547; color:white; }
  #treadmill-table tbody tr.highlight-row th, #treadmill-table tbody tr.highlight-row td { border-color:#840547; }
  #treadmill-table .highlight-row .secondary-time { color:#f2d8e5; }
  .current-speed-label { border-color:#dd91b8; }
  .method-grid>details[open]>summary { color:#980052; }
}
@media screen and (max-width:760px) {
  .tabs { gap:6px; }
  .tab { padding:14px 5px; }
  .intro { padding-top:28px; padding-bottom:25px; }
  .intro h1 { letter-spacing:-1.3px; }
  .result-card { padding:23px; }
}
@media screen and (max-width:370px) { .result-card { padding:17px; } .tab { font-size:12px; } }


@media screen {
  .tab[aria-selected=true] { background:#b0005d; border-color:#b0005d; color:#fff; box-shadow:none; }
  .segmented input:checked+span { background:#b0005d; color:#fff; box-shadow:none; }
  .step { background:#b0005d; color:#fff; }
  .input-card select { background-color:#fff7fb; border-color:#d8b3c7; }
  .input-card input { caret-color:#b0005d; }
  .input-card input:focus-visible, .input-card select:focus-visible { background-color:#fff7fb; border-color:#b0005d; }
}


@media screen {
  :root { --accent:#00765e; --line:#dce6e1; --muted:#58625e; }
  .tab { border-color:#d9e2dd; color:#46534d; }
  .tab:hover { border-color:#008f72; background:#f0f8f4; }
  .tab[aria-selected=true] { background:#00765e; border-color:#00765e; color:#fff; box-shadow:none; }
  .input-card { border-color:#dce6e1; box-shadow:0 4px 20px #063b2705; }
  .step { background:#00765e; color:#fff; }
  .primary-button { background:#00765e; color:#fff; }
  .primary-button:hover { background:#00634f; }
  .insight-icon { border-color:#008f72; color:#00765e; }
  .text-button { color:#00765e; border-color:#91bfad; }
  .segmented { background:#edf5f1; }
  .segmented input:checked+span { background:#00765e; color:#fff; box-shadow:none; }
  .check-label input, .table-extra-toggle input { accent-color:#00765e; }
  .presets button:hover { background:#edf8f3; border-color:#008f72; }
  .presets button[aria-pressed=true] { background:#00765e; border-color:#00765e; color:#fff; }
  .equivalent.selected { background:#eff8f3; border-color:#008f72; box-shadow:inset 0 3px #008f72; }
  .equivalent.selected strong { color:#00765e; }
  .equivalent:hover { border-color:#008f72; background:#f6fbf8; }
  .table-scroll thead th { background:#edf4f0; color:#40594e; }
  .table-scroll tbody tr.highlight-row { background:#e3f3eb; }
  .jump-current { background:#00765e; border-color:#00765e; }
  .jump-current:hover { background:#00634f; border-color:#00634f; }
  #treadmill-table thead th { background:#171717; border-bottom-color:#008f72; }
  #treadmill-table tbody tr.whole-speed { background:#edf5f0; }
  #treadmill-table tbody tr.whole-speed th, #treadmill-table tbody tr.whole-speed td { border-top-color:#c4d9ce; }
  #treadmill-table tbody tr.highlight-row { background:#00634f; color:#fff; }
  #treadmill-table tbody tr.highlight-row th, #treadmill-table tbody tr.highlight-row td { border-color:#00634f; }
  #treadmill-table .highlight-row .secondary-time { color:#d8f2e7; }
  .current-speed-label { border-color:#91c9af; }
  .method-grid>details[open]>summary { color:#00765e; }
  .input-card select { background-color:#f5faf7; border-color:#b3cebf; }
  .input-card input { caret-color:#00765e; }
  .input-card input:focus-visible, .input-card select:focus-visible { background-color:#f5faf7; border-color:#00765e; }
}