.swim-viewer-shell {
         --viewer-surface: var(--sb-surface, #16181f);
         --viewer-text: var(--sb-text, #e8e9ec);
         --viewer-text-muted: var(--sb-text-muted, #8a8d96);
         --viewer-border: var(--sb-border, rgba(255, 255, 255, 0.08));
         --viewer-accent: var(--sb-accent, #3b82f6);
         --int-1-bg: #4f6478;
         --int-2-bg: #2f5f9f;
         --int-3-bg: #1f8ca4;
         --int-4-bg: #cfa23a;
         --int-5-bg: #c94a44;
         --int-light-text: #f7fbff;
         --int-dark-text: #1f2732;
     }

     .swim-viewer-shell .viewer-actions {
         margin-bottom: .9rem !important;
     }

     .swim-viewer-shell #viewerPdfBtn,
     .swim-viewer-shell #viewerPdfCompactBtn,
     .swim-viewer-shell #cssCalcBtn {
         border-radius: 10px;
         transition: background-color 180ms ease, border-color 180ms ease, transform 140ms ease;
     }

     .swim-viewer-shell #viewerPdfBtn:hover,
     .swim-viewer-shell #viewerPdfCompactBtn:hover,
     .swim-viewer-shell #cssCalcBtn:hover {
         background: rgba(59, 130, 246, 0.2);
         border-color: rgba(59, 130, 246, 0.42);
         transform: translateY(-1px);
     }

     .swim-viewer-shell .viewer-panel {
         border: 1px solid rgba(59, 130, 246, 0.24);
         border-radius: 14px;
         background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(246, 249, 255, 0.98));
         box-shadow: 0 10px 24px rgba(15, 20, 30, 0.06);
     }

     .swim-viewer-shell .viewer-surface {
         background: #fff;
         border-radius: 10px;
         border: 1px solid rgba(20, 20, 20, 0.12);
         box-shadow: 0 8px 20px rgba(15, 20, 30, 0.04);
         overflow: hidden;
     }

     .swim-viewer-shell .set-header {
         background: var(--viewer-surface);
         color: var(--viewer-text);
         border: 1px solid var(--viewer-border);
         border-bottom: none;
         border-radius: 10px 10px 0 0;
     }

     .swim-viewer-shell .set-header .summary {
         color: var(--viewer-text-muted);
     }

     .swim-viewer-shell .set-details {
         border-top: none;
         border-radius: 0 0 10px 10px;
     }

     .swim-viewer-shell #viewerTitle {
         color: var(--viewer-surface);
     }

     .swim-viewer-shell .viewer-meta-label {
         color: rgba(22, 24, 31, 0.84);
     }

     .swim-viewer-shell .viewer-meta-value {
         color: rgba(22, 24, 31, 0.92);
     }

     .swim-viewer-shell .chart-arrow {
         color: rgba(22, 24, 31, 0.7);
     }

     /* Intensity palette: higher contrast for readability, especially recovery sets */
     .swim-viewer-shell .set-card .set-header.int-1 {
         background: var(--int-1-bg);
         color: var(--int-light-text);
     }

     .swim-viewer-shell .set-card .set-header.int-2 {
         background: var(--int-2-bg);
         color: var(--int-light-text);
     }

     .swim-viewer-shell .set-card .set-header.int-3 {
         background: var(--int-3-bg);
         color: var(--int-light-text);
     }

     .swim-viewer-shell .set-card .set-header.int-4 {
         background: var(--int-4-bg);
         color: var(--int-dark-text);
     }

     .swim-viewer-shell .set-card .set-header.int-5 {
         background: var(--int-5-bg);
         color: var(--int-light-text);
     }

     .swim-viewer-shell .set-card .set-header.int-1 .summary,
     .swim-viewer-shell .set-card .set-header.int-2 .summary,
     .swim-viewer-shell .set-card .set-header.int-3 .summary,
     .swim-viewer-shell .set-card .set-header.int-5 .summary {
         color: rgba(247, 251, 255, 0.94);
     }

     .swim-viewer-shell .set-card .set-header.int-4 .summary {
         color: rgba(31, 39, 50, 0.92);
     }

     .swim-viewer-shell #chartViewport .int-1 { background: var(--int-1-bg); }
     .swim-viewer-shell #chartViewport .int-2 { background: var(--int-2-bg); }
     .swim-viewer-shell #chartViewport .int-3 { background: var(--int-3-bg); }
     .swim-viewer-shell #chartViewport .int-4 { background: var(--int-4-bg); }
     .swim-viewer-shell #chartViewport .int-5 { background: var(--int-5-bg); }

     .swim-viewer-shell #chartViewport .int-1 .col-distance,
     .swim-viewer-shell #chartViewport .int-2 .col-distance,
     .swim-viewer-shell #chartViewport .int-3 .col-distance,
     .swim-viewer-shell #chartViewport .int-5 .col-distance {
         color: var(--int-light-text);
     }

     .swim-viewer-shell #chartViewport .int-4 .col-distance {
         color: var(--int-dark-text);
     }

     .scrollable-card {
         max-height: 85vh !important;
         overflow-y: auto;
         flex: 0 0 auto;
         min-height: 0;
     }

     .chip {
         padding: .25rem .5rem;
         background: #f1f1f1;
         border-radius: .25rem;
         display: inline-flex;
         align-items: center;
         gap: .25rem
     }

     /* Leicht rot umrandete kleine Flash-Nachricht für CSS-Test-Hinweis */
     .css-test-flash {
         border: 1px solid rgba(220,53,69,0.30); /* leichter roter Rand */
         background: rgba(255,245,245,0.85);
         color: #842029;
         padding: .45rem .6rem;
         border-radius: .375rem;
         font-size: .9rem;
     }
     /* Leicht grün umrandete kleine Flash-Nachricht für CSS-Test-Hinweis */
     .css-test-flash-success {
         border: 1px solid rgba(40,169,69,0.50); /* leichter grüner Rand */
         background: rgba(40,169,69,0.12);
         color: #0f5132;
         padding: .45rem .6rem;
         border-radius: .375rem;
         font-size: .9rem;
     }
    /* grünes Styling für die Auto-Info (css-auto-success) */
    #cssAutoInfo.css-auto-success {
        border: 1px solid rgba(25,135,84,0.16);
        background: rgba(237,247,237,0.95);
        color: #0f5132;
        padding: .25rem .45rem;
        border-radius: .375rem;
        display: inline-block;
        font-size: .9rem;
    }

     /* Baseline für cssAutoInfo (unsichtbar bis JS es ändert) */
     #cssAutoInfo {
         font-size: .9rem;
         color: #6c757d;
     }

     /* Info-Tooltip für kleine Info-i neben Labels */
     .info-icon {
         display: inline-flex;
         align-items: center;
         margin-left: .35rem;
         color: #474747;
         cursor: help;
         position: relative;
         vertical-align: middle;
     }

         .info-icon:focus {
             outline: none;
             box-shadow: 0 0 0 3px rgba(13,110,253,0.15);
             border-radius: 4px;
         }

         .info-icon .tooltip-text {
             display: none;
             position: fixed;
             max-width: min(320px, 90vw);
             white-space: normal;
             background: rgba(0,0,0,0.88);
             color: #fff;
             padding: 8px 10px;
             border-radius: 6px;
             font-size: 0.8rem;
             line-height: 1.25;
             z-index: 2000;
             box-shadow: 0 6px 18px rgba(0,0,0,0.25);
             word-break: break-word;
         }

             .info-icon .tooltip-text::after {
                 content: "";
                 position: absolute;
                 width: 0;
                 height: 0;
                 border-style: solid;
                 border-width: 8px 8px 0 8px;
                 border-color: rgba(0,0,0,0.88) transparent transparent transparent;
                 left: calc(50% - 8px);
                 bottom: -8px;
                 display: block;
             }

         .info-icon:hover .tooltip-text,
         .info-icon:focus .tooltip-text,
         .info-icon:focus-within .tooltip-text {
             display: block;
         }

     /* Spoiler / Header (wird auch für Pace-Card verwendet) */
     .set-header {
         cursor: pointer;
         padding: .75rem;
         display: flex;
         align-items: center;
         justify-content: space-between;
         gap: 1rem;
         background: #fbfbfd;
         border-bottom: 1px solid #ececec;
         border-radius: 4px;
     }

         .set-header .title {
             font-weight: 600;
             white-space: nowrap;
             overflow: hidden;
             text-overflow: ellipsis;
             font-size: 1.25rem;
         }

         .set-header .summary {
             font-weight: 400;
             white-space: nowrap;
             font-size: 0.9rem;
         }

         .set-header .controls {
             display: flex;
             gap: .25rem;
             align-items: center;
         }

     .set-details {
         padding: .75rem;
         background: #fff;
         border: 1px solid rgba(20,20,20,0.2);
         border-radius: 0 0 6px 6px;
         margin-top: -6px;
         display: none;
     }

         .set-details .details-hidden {
             display: none;
         }

         .set-details p.set-notes {
             margin: 0 0 .5rem 0;
             white-space: pre-wrap;
             color: #212529;
             background: transparent;
         }

     .pair-item {
         margin-bottom: .5rem;
     }

     .pair-heading {
         font-weight: 600;
         margin-bottom: .25rem;
     }

     .pair-split-text {
         margin: 0;
         white-space: pre-wrap;
         color: #212529;
     }

     .pair-stroke {
         color: var(--color-text-dark);
         font-weight: 600;
     }

     .set-detail-row {
         display: flex;
         justify-content: space-between;
         gap: 1rem;
         margin-bottom: .35rem;
     }

     .set-detail-label {
         font-weight: 600;
         color: #333;
     }

     .set-detail-value {
         color: #333;
     }

     /* small badge for pace inside header summary */
     .viewer-pace-badge {
         display: flex;
         align-items: center;
         justify-content: center;
         height: 2.1rem;
         min-width: 120px;
         padding: 0 1rem;
         border-radius: 0.9rem;
         background: #fff;
         color: #23272b;
         font-size: 1.08rem;
         font-weight: 500;
         box-shadow: none;
         border: none;
         transition: background 0.2s;
         letter-spacing: 0.01em;
     }

     #workout-header .viewer-left-block {
         transition: flex-basis .18s ease;
         border-style: solid;
         border-color: rgba(20,20,20,0.2);
         border-width: 0 1px 0 0;
     }

     #viewerPdfBtn, #viewerPdfCompactBtn {
         white-space: nowrap;
     }

     .pace-col {
         min-width: 170px;
         display: flex;
         flex-direction: column;
         align-items: flex-end;
         justify-content: center;
         margin-left: 0.5rem;

     }
     .pace-label, .pace-max, .pace-min {
         font-size: 1rem;
         color: inherit !important;
         font-weight: 400;
         margin-bottom: 0.1rem;
     }
     .set-header {
         display: flex;
         align-items: center;
         justify-content: space-between;
         gap: 1rem;
     }
     /* --- Chart overflow / focus styles --- */
     /* Default (desktop): möglichst unverändert, keine Hervorhebung/Skalierung, Chart normal einbinden */
     .chart-viewport {
         overflow-x: auto;
         overflow-y: visible;
         padding-bottom: 6px;
         height: auto;
         min-height: 180px;
         scroll-behavior: smooth;
         position: relative;
         width: 100%;
     }

     /* Desktop: make chart use full card width; keep #setsOverview able to overflow when wider */
     @media (min-width:781px) {
         .chart-viewport {
             width: 100%;
             padding-left: 0;
             padding-right: 0;
         }

         .chart, .chart-inner {
             width: 100%;
             min-width: 0;
         }
         /* keep overview able to expand and overflow horizontally */
         #setsOverview {
             width: 100%;
         }
     }

     /* arrows area hidden by default (desktop) */
     .chart-arrows {
         display: none;
         margin-top: 6px;
         text-align: center;
     }

     /* Ensure the chart inner groups don't wrap and can overflow horizontally.
    Many chart implementations expose #setsOverview and .set-group — style them safely. */
     #setsOverview {
         display: flex;
         flex-wrap: nowrap;
         gap: 8px;
         align-items: center;
         width: 100%; /* Desktop: benutze die volle Breite des Viewports / chartViewport als Basis */
     }

         /* baseline for group elements */
         #setsOverview .set-group {
             flex: 0 0 auto;
             transition: none; /* keep desktop as original */
             transform-origin: center center;
             will-change: auto;
             position: relative;
         }

             /* Focused (desktop): keine zusätzliche Skalierung/Shadow, damit Desktop-Ansicht unverändert bleibt */
             #setsOverview .set-group.focused {
                 transform: none;
                 box-shadow: none;
                 z-index: 1;
             }

     /* Make sure the chart container itself can be as wide as needed */
     .chart, .chart-inner {
         min-width: max-content;
         height: 180px;
         overflow: visible;
     }

     /* mobile-specific improvements: alle Änderungen nur hier kapseln */
     @media (max-width:780px) {
         /* increase chart height on mobile for readability */
         .chart {
             height: 260px !important;
             gap: 8px;
             padding: 8px;
             min-width: 700px;
         }

         .chart-inner {
             height: 260px !important;
             overflow: visible;
         }

         .set-group {
             min-width: 48px;
         }

         .set-label {
             font-size: 0.78rem;
             margin-top: 6px;
         }

         .col-distance {
             font-size: 0.66rem;
             bottom: 4px;
         }

         .set-details {
             font-size: 14px;
         }

             .set-details .details-hidden {
                 font-size: 14px;
             }

             .set-details p.set-notes {
                 font-size: 14px;
             }

         #viewerDescription {
             font-size: 14px;
             margin-left: 8px;
             margin-right: 8px;
         }

         #lblDescription {
             margin-left: 8px;
             margin-right: 8px;
             margin-top: 16px;
         }

         #workout-header .viewer-left-block {
             border-style: none;
         }

         /* stronger focused effect on mobile: shift up and scale + visible outline */
         #setsOverview .set-group.focused {
             transform: translateY(-5px) scale(1.05);
             box-shadow: 0 12px 34px rgba(0,0,0,0.2);
             z-index: 60;
             border-radius: 2px;
             outline: 2px solid var(--color-light-border);
             background-clip: padding-box;
         }

         /* show arrow indicators on mobile (visuell neutral, kein Button-Hover) */
         .chart-arrows {
             display: block;
             position: relative;
             margin-top: 6px;
         }

         .chart-arrow {
             display: inline-block;
             margin: 0 8px;
             color: rgba(0,0,0,0.45);
             font-size: 1.6rem;
             line-height: 1;
             user-select: none;
             /* visual only — JS attaches click handlers when mobile */
             cursor: default;
             opacity: 0.9;
         }
             /* on mobile we still allow pointer events for interaction (JS-controlled) */
             .chart-arrow.interactive {
                 cursor: pointer;
                 opacity: 1;
             }

         /* hide native scrollbar visually on mobile so UI is cleaner */
         .chart-viewport {
             -ms-overflow-style: none; /* IE/Edge */
             scrollbar-width: none; /* Firefox */
             padding-bottom: 18px; /* room for arrows */
             min-height: 220px;
         }

             .chart-viewport::-webkit-scrollbar {
                 display: none;
             }
         /* WebKit */

         .viewer-left-block {
             flex: 0 0 72px !important;
             display: flex !important;
             margin-bottom: 0 !important;
             align-items: start !important;
             justify-content: start !important;
             border-width: 0 1px 0 0;
             margin-left: 0;
             padding-right: .5rem;
         }

         #viewerWorkoutId {
             font-size: 1.5rem !important;
             margin-bottom: 0 !important;
         }

         .workout-header-distanzer {
             margin: 0 !important;
             padding: 0 15px 0 15px !important;
             gap: 0 !important;
             align-items: start !important;
             justify-content: start !important;
         }

         .workout-ID-header {
             font-size: 1.5rem !important;
             margin-top: 0 !important;
         }

         .viewer-meta-row {
             display: block !important;
             margin-top: 5px;
         }

         .viewer-meta-label {
             width: 100%;
             font-size: .8rem;
         }

         .viewer-meta-value {
             flex: 1;
             font-size: .8rem;
         }

         .viewer-meta {
             gap: 4px;
         }

         .set-header {
             padding: .85rem;
             gap: .5rem;
         }

             .set-header .title {
                 font-size: 1.0rem;
                 font-weight: 600;
                 white-space: normal;
                 overflow: visible;
             }

             .set-header .summary {
                 font-size: .85rem;
                 font-weight: 400;
                 white-space: normal;
             }

             .set-header .index-badge {
                 font-size: 1rem;
                 min-width: 28px;
                 min-height: 28px;
                 display: inline-flex;
                 align-items: center;
                 justify-content: center;
                 padding: .2rem .45rem;
             }

         .set-toggle-icon {
             font-size: 1.05rem;
             padding: .35rem .45rem;
             border-radius: 6px;
         }

         .set-details {
             padding: .6rem;
         }

         #viewerPdfBtn, #viewerPdfCompactBtn {
             font-size: .85rem;
             padding: .35rem .6rem;
             white-space: nowrap;
         }

         .card, .card .row, .card .d-flex {
             overflow-wrap: anywhere;
         }

         #lblPool, #lblTotalDistance, #lblEquipment {
             width: auto !important;
         }

         #workout-header > .col-12 > .d-flex.align-items-center.p-3 {
             flex-direction: column;
             align-items: stretch;
             gap: .5rem;
             padding: .5rem;
         }

         #workout-header .viewer-left-block {
             order: 0;
             flex: none;
             width: 100%;
             text-align: left;
             border-width: 0;
             padding: .35rem 0;
             display: flex;
             align-items: center;
             justify-content: space-between;
             gap: .75rem;
         }

             #workout-header .viewer-left-block .form-label {
                 margin-bottom: 0;
                 font-size: .9rem;
             }

         #viewerWorkoutId {
             font-size: 1.15rem;
         }

         #workout-header > .col-12 > div[style*="flex:1"] {
             order: 1;
         }

         #workout-header .col-12.col-lg-8, #workout-header .col-12.col-lg-4 {
             padding: 0;
         }

         #viewerPdfBtn, #viewerPdfCompactBtn {
             display: inline-flex;
             align-items: center;
             gap: .4rem;
             padding: .35rem .6rem;
         }

             #viewerPdfBtn .btn-text, #viewerPdfCompactBtn .btn-text {
                 display: inline;
             }

         #workout-header a, #workout-header button {
             touch-action: manipulation;
         }

         #workout-header .ms-3 {
             margin-left: .25rem !important;
             margin-right: .25rem !important;
         }

         .info-icon .tooltip-text {
             max-width: min(300px, 92vw);
         }

     }

     @media (max-width:780px) {
    .set-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        padding: .55rem 1.0rem .55rem 0rem;
        gap: .10rem;
        text-align: left !important;
    }
    .set-header .left {
        width: 100%;
        display: flex;
        align-items: center;
        text-align: left !important;
        gap: .15rem;
    }
    .set-header .index-badge {
        font-size: 1.1rem;
        min-width: 32px;
        min-height: 32px;
        display: inline-flex;
        align-items: center;
        justify-content: flex-start;
        padding: .2rem .45rem;
        margin-left: 0;
        margin-right: .5rem;
        text-align: left !important;
    }
    .set-header .title {
        font-size: 1.1rem;
        font-weight: 600;
        text-align: left !important;
        white-space: normal;
        overflow: visible;
    }
    .set-header .summary {
        font-size: .95rem;
        font-weight: 400;
        text-align: left !important;
        white-space: normal;
    }
    .pace-col {
        min-width: 0;
        width: 100%;
        flex-direction: column;
        align-items: flex-start !important;
        margin-left: 0;
        margin-top: .10rem;
        margin-bottom: .10rem;
        font-size: .95rem;
        text-align: left !important;
    }
    .pace-label, .pace-max, .pace-min {
        font-size: .95rem;
        color: inherit !important;
        font-weight: 500;
        margin-bottom: 0.05rem;
        text-align: left !important;
    }
    .pace-label {
        font-weight: 600;
        margin-bottom: .1rem;
    }
    .set-header .controls {
        margin-top: .10rem;
        gap: .10rem;
        align-items: flex-start !important;
        text-align: left !important;
    }
    #zonesTable {
        font-size: 0.7rem;
    }


            .set-header > * {
                width: 100% !important;
                margin-left: 10px !important;
                margin-right: 0 !important;
            }

            .pace-col, .set-header .controls {
                margin-left: 0 !important;
                margin-right: 0 !important;
            }

        .pace-col {
            margin-top: .10rem;
            margin-bottom: .10rem;
        }
}