.cmp-header { margin-bottom: 0; }
.table-card + .cmp-hint { margin-top: 8px; }

.table-card {
    border:           0.5px solid var(--bd-t);
    border-radius:    var(--r-lg);
    overflow:         hidden;         
    background:       var(--bg-p);
}

.table-card .pr-table,
.table-card .cmp-table,
.table-card .cmp-scroll {
    border:           none;
    margin-bottom:    0;
}

.section-card {
    border:           0.5px solid var(--bd-t);
    border-radius:    var(--r-lg);
    overflow:         hidden;
    background:       var(--bg-p);
    margin-bottom:    28px;
}

.section-card__body {
    overflow-x:       auto;   

    padding:          6px 0 12px;
}

.section-card .pr-table {
    border:           none;
    margin-bottom:    0;
}

:root {

    --text-sm:  13px;   
    --text-md:  14px;   
    --text-lg:  16px;   

    --acc:    #B8924E;
    --acc-s:  #6E5020;
    --acc-bg: color-mix(in srgb, #B8924E 14%, transparent);
    --acc-bd: color-mix(in srgb, #B8924E 55%, transparent);

    --demo:    #2E7873;
    --demo-s:  #1B514D;
    --demo-bg: color-mix(in srgb, #2E7873 12%, transparent);
    --demo-bd: color-mix(in srgb, #2E7873 50%, transparent);

    --bg-p:   #ffffff;
    --bg-s:   #f7f6f2;
    --bg-t:   #f0efe9;

    --tx-p:   #14140f;
    --tx-s:   #36352f;
    --tx-t:   #54534d;

    --bd-t:   rgba(20, 20, 15, 0.20);
    --bd-s:   rgba(20, 20, 15, 0.32);

    --success-bg:   #eaf3de;
    --success-tx:   #3B6D11;
    --warning-bg:   #faeeda;
    --warning-tx:   #854F0B;
    --warning-bd:   #EF9F27;
    --danger-tx:    #A32D2D;
    --danger-bd:    #A32D2D;
    --info-bg:      #e6f1fb;
    --info-tx:      #185FA5;

    --font-serif: Georgia, 'Times New Roman', serif;
    --font-mono:  Menlo, Monaco, Consolas, 'Courier New', monospace;
    --font-sans:  -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

    --r-sm:   4px;
    --r-md:   8px;
    --r-lg:   12px;
}

@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) {
        --acc:    #E0BE82;
        --acc-s:  #D4A65A;
        --acc-bg: color-mix(in srgb, #E0BE82 16%, transparent);
        --acc-bd: color-mix(in srgb, #E0BE82 50%, transparent);
        --demo:    #74B5B0;
        --demo-s:  #95CBC8;
        --demo-bg: color-mix(in srgb, #74B5B0 16%, transparent);
        --demo-bd: color-mix(in srgb, #74B5B0 50%, transparent);
        --bg-p:   #1a1a18;
        --bg-s:   #222220;
        --bg-t:   #2a2a27;
        --tx-p:   #f4f2ea;
        --tx-s:   #d0cec6;
        --tx-t:   #a8a69e;
        --bd-t:   rgba(255, 255, 240, 0.18);
        --bd-s:   rgba(255, 255, 240, 0.28);
        --success-bg:  #1a3310;
        --success-tx:  #97C459;
        --warning-bg:  #412402;
        --warning-tx:  #FAC775;
        --warning-bd:  #BA7517;
        --danger-tx:   #F09595;
        --danger-bd:   #F09595;
        --info-bg:     #042C53;
        --info-tx:     #85B7EB;
    }
}

html[data-theme="dark"] {
    --acc:    #E0BE82;
    --acc-s:  #D4A65A;
    --acc-bg: color-mix(in srgb, #E0BE82 16%, transparent);
    --acc-bd: color-mix(in srgb, #E0BE82 50%, transparent);
    --demo:    #74B5B0;
    --demo-s:  #95CBC8;
    --demo-bg: color-mix(in srgb, #74B5B0 16%, transparent);
    --demo-bd: color-mix(in srgb, #74B5B0 50%, transparent);
    --bg-p:   #1a1a18;
    --bg-s:   #222220;
    --bg-t:   #2a2a27;
    --tx-p:   #f4f2ea;
    --tx-s:   #d0cec6;
    --tx-t:   #a8a69e;
    --bd-t:   rgba(255, 255, 240, 0.18);
    --bd-s:   rgba(255, 255, 240, 0.28);
    --success-bg:  #1a3310;
    --success-tx:  #97C459;
    --warning-bg:  #412402;
    --warning-tx:  #FAC775;
    --warning-bd:  #BA7517;
    --info-bg:     #042C53;
    --info-tx:     #85B7EB;
    --danger-tx:   #F09595;
    --danger-bd:   #F09595;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
    font-family:      var(--font-sans);
    font-size:        17px;
    line-height:      1.65;
    color:            var(--tx-p);
    background-color: var(--bg-p);
    -webkit-font-smoothing: antialiased;
    min-height:       100vh;
}

.page-frame {
    max-width:  1200px;
    margin:     0 auto;
    background: var(--bg-p);
    border-left:  0.5px solid var(--bd-t);
    border-right: 0.5px solid var(--bd-t);
    min-height:   100vh;
}

@media (max-width: 960px) {
    .page-frame { border-left: none; border-right: none; }
}

code {
    font-family:      var(--font-mono);
    font-size:        0.85em;
    background:       var(--bg-s);
    padding:          1px 5px;
    border-radius:    var(--r-sm);
}

.btn-control {
    font-size: var(--text-sm);
    letter-spacing:   0.05em;
    color:            var(--tx-s);
    cursor:           pointer;
    padding:          6px 13px;
    min-height:       30px;
    border:           0.5px solid var(--bd-t);
    border-radius:    var(--r-sm);
    background:       transparent;
    font-family:      var(--font-sans);
    outline:          none;
    transition:       color 0.15s, border-color 0.15s;
    line-height:      1.4;
}

.btn-control:hover { border-color: var(--bd-s); color: var(--tx-p); }

.reveal-btn {
    display:          inline-flex;
    align-items:      center;
    gap:              6px;
    background:       var(--bg-s);
    border:           0.5px solid var(--bd-t);
    border-radius:    var(--r-sm);
    padding:          3px 10px;
    font:             inherit;
    font-size:        0.95em;
    color:            var(--acc-s);
    cursor:           pointer;
    transition:       background 0.15s, border-color 0.15s, color 0.15s;
    line-height:      1.4;
    vertical-align:   baseline;
}

.reveal-btn:hover,
.reveal-btn:focus-visible {
    background:       var(--bg-p);
    border-color:     var(--acc-s);
    color:            var(--acc-s);
    outline:          none;
}

.reveal-btn:disabled {
    cursor:           default;
    opacity:          0.7;
}

.reveal-btn__icon {
    font-size:        0.95em;
    line-height:      1;
    opacity:          0.8;
}

.reveal-btn--address .reveal-btn__icon,
.reveal-btn--phone   .reveal-btn__icon { font-size: 1.05em; }

.reveal-btn__text {

}

.reveal-address {
    display:          inline-block;
    line-height:      1.55;
    vertical-align:   top;
}

a { color: var(--acc-s); }

.container {
    max-width: 820px;
    margin:    0 auto;
    padding:   0 16px;
}

.sitenav {
    position:         sticky;
    top:              0;
    z-index:          100;
    background:       var(--bg-p);
    border-bottom:    0.5px solid var(--bd-t);
    padding:          10px 20px;
    display:          flex;
    align-items:      center;
    justify-content:  space-between;
}

.sitenav__race-center {
    position:         absolute;
    left:             50%;
    transform:        translateX(-50%);
    display:          flex;
    align-items:      center;
    pointer-events:   auto;
    z-index:          1;

    max-width:        calc(100% - 200px);
}

@media (min-width: 641px) {
    .sitenav__links  { position: static; transform: none; }
    .sitenav__race-center { position: static; transform: none; margin-left: auto; margin-right: 8px; max-width: none; }
}
@media (max-width: 640px) {
    .sitenav {
        display:             grid;
        grid-template-columns: 1fr auto 1fr;
        align-items:         center;
    }
    .sitenav__wordmark     { grid-column: 1; }
    .sitenav__race-center  {
        grid-column:   2;
        position:      static;
        transform:     none;
        max-width:     none;
        justify-self:  center;
    }
    .sitenav__hamburger    { grid-column: 3; justify-self: end; }
    .race-chip__name       { max-width: 60px; }
}

.sitenav__wordmark {
    font-family:      var(--font-serif);
    font-size: var(--text-lg);
    letter-spacing:   0.14em;
    color:            var(--tx-p);
    text-decoration:  none;
    flex-shrink:      0;
}

.sitenav__wordmark em {
    color:            var(--acc);
    font-style:       normal;
}

.sitenav__links {
    display:          flex;
    list-style:       none;
    gap:              0;
    align-items:      center;
    position:         absolute;
    left:             50%;
    transform:        translateX(-50%);
}

.sitenav__link {
    font-size:        var(--text-sm);
    letter-spacing:   0.06em;
    text-transform:   uppercase;
    color:            var(--tx-s);
    text-decoration:  none;
    padding:          6px 12px;
    border-bottom:    1.5px solid transparent;
    transition:       color 0.15s, border-color 0.15s;
    white-space:      nowrap;
}
.sitenav__link:hover,
.sitenav__link.active      { color: var(--tx-p); border-bottom-color: var(--acc); }
.sitenav__link--extended   { color: var(--acc-s); }
.sitenav__link--extended:hover { color: var(--acc); border-bottom-color: var(--acc); }

.sitenav__link-li--sidebar-only { display: none; }
@media (max-width: 960px) {
    .sitenav__link-li--sidebar-only { display: list-item; }
}
@media (max-width: 640px) {

}

@media (max-width: 640px) {
    .sitenav__links { display: none; }
}

.sitenav__links {
    display:          flex;
    list-style:       none;
    gap:              0;
    align-items:      center;
}

.sitenav__link--extended {
    color:            var(--acc-s);
    border-bottom-color: transparent;
}

.sitenav__link--extended:hover {
    color:            var(--acc);
    border-bottom-color: var(--acc);
}

.mobile-menu__link--extended {
    color:            var(--acc-s);
}

.sitenav__link {
    font-size: var(--text-sm);
    letter-spacing:   0.06em;
    text-transform:   uppercase;
    color:            var(--tx-s);
    text-decoration:  none;
    padding:          6px 12px;
    border-bottom:    1.5px solid transparent;
    transition:       color 0.15s, border-color 0.15s;
    white-space:      nowrap;
    display:          flex;
    align-items:      center;
    gap:              4px;
}

.sitenav__link:hover,
.sitenav__link.active {
    color:            var(--tx-p);
    border-bottom-color: var(--acc);
}

.mobile-menu__link--sub {
    padding-left:     28px;
    font-size: var(--text-sm);
    opacity:          0.75;
    border-left:      1.5px solid var(--bd-t);
    margin-left:      12px;
}

.sitenav__controls {
    display:          flex;
    align-items:      center;
    gap:              6px;
    flex-shrink:      0;
}

.sitenav__hamburger {
    display:          inline-flex;
    flex-direction:   column;
    gap:              5px;
    cursor:           pointer;
    padding:          5px;
    background:       none;
    border:           none;
    flex-shrink:      0;
}
.sitenav__hamburger span {
    width:            20px;
    height:           1.5px;
    background:       var(--tx-s);
    border-radius:    1px;
    display:          block;
    transition:       transform 0.22s, opacity 0.22s;
}

.sitenav__hamburger.is-open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.sitenav__hamburger.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.sitenav__hamburger.is-open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.sidebar-overlay {
    position:         fixed;
    inset:            0;
    background:       rgba(0,0,0,0.35);
    z-index:          500;
    opacity:          0;
    visibility:       hidden;
    pointer-events:   none;
    transition:       opacity 0.25s, visibility 0.25s;
}
.sidebar-overlay.is-visible {
    opacity:          1;
    visibility:       visible;
    pointer-events:   auto;
}

.sidebar {
    position:         fixed;
    top:              0;
    right:            0;
    bottom:           0;
    width:            min(300px, 90vw);
    background:       var(--bg-p);
    border-left:      0.5px solid var(--bd-t);
    z-index:          501;
    overflow-y:       auto;
    display:          flex;
    flex-direction:   column;
    transform:        translateX(100%);
    visibility:       hidden;
    transition:       transform 0.28s cubic-bezier(0.4, 0, 0.2, 1),
                      visibility 0s linear 0.28s;
    box-shadow:       -6px 0 28px rgba(0,0,0,0.10);
}
.sidebar.is-open {
    transform:        translateX(0);
    visibility:       visible;
    transition:       transform 0.28s cubic-bezier(0.4, 0, 0.2, 1),
                      visibility 0s linear 0s;
}

.sidebar__head {
    display:          flex;
    align-items:      center;
    justify-content:  space-between;
    padding:          16px 18px;
    border-bottom:    0.5px solid var(--bd-t);
    flex-shrink:      0;
}
.sidebar__title {
    font-family:      var(--font-serif);
    font-size:        var(--text-lg);
    letter-spacing:   0.14em;
    color:            var(--tx-p);
}
.sidebar__close {
    background:       none;
    border:           none;
    font-size:        18px;
    color:            var(--tx-t);
    cursor:           pointer;
    padding:          4px 7px;
    border-radius:    var(--r-sm);
    line-height:      1;
    transition:       color 0.15s, background 0.15s;
}
.sidebar__close:hover { color: var(--tx-p); background: var(--bg-s); }

.sidebar__section-title {
    font-size:        var(--text-sm);
    text-transform:   uppercase;
    letter-spacing:   0.12em;
    color:            var(--tx-t);
    padding:          14px 18px 8px;
    font-weight:      500;
}
.sidebar__settings {
    padding:          0 18px 16px;
    display:          flex;
    flex-direction:   column;

    gap:              18px;
    flex:             1;
}

.section {
    background:       var(--bg-p);
    border-bottom:    0.5px solid var(--bd-t);

    padding:          40px 24px 48px;
}

.section#s-calc {
    padding:          56px 24px 64px;
}
.section#s-calc .section__header {
    margin-bottom:    36px;
}

@media (max-width: 600px) {
    .section#s-calc {
        padding:          36px 16px 44px;
    }
    .section#s-calc .section__header {
        margin-bottom:    24px;
    }
}

.section__header {
    display:          flex;
    align-items:      center;
    gap:              12px;
    margin-bottom:    28px;
}

.section__label {
    font-size: var(--text-sm);
    letter-spacing:   0.18em;
    text-transform:   uppercase;
    color:            var(--tx-s);
    white-space:      nowrap;
}

.section__line {
    flex:             1;
    height:           0.5px;
    background:       var(--bd-t);
}

.section__cfg-badge {
    font-size: var(--text-sm);
    padding:          2px 7px;
    border:           0.5px solid var(--bd-t);
    border-radius:    var(--r-sm);
    color:            var(--tx-t);
    font-family:      var(--font-mono);
    white-space:      nowrap;
}

.section__title-row {
    display:          flex;
    align-items:      center;
    justify-content:  space-between;
    gap:              12px;
    margin-bottom:    6px;
}

.section__title {
    font-family:      var(--font-serif);
    font-size:        28px;
    font-weight:      400;
    color:            var(--tx-p);
    line-height:      1.15;
    margin-bottom:    0;
}

.calc-unit-switcher {
    display:          flex;
    border:           0.5px solid var(--bd-t);
    border-radius:    var(--r-md);
    overflow:         hidden;
    flex-shrink:      0;
}
.calc-unit-btn {
    padding:          5px 13px;
    font-size:        var(--text-sm);
    font-family:      var(--font-sans);
    font-weight:      500;
    background:       transparent;
    border:           none;
    color:            var(--tx-s);
    cursor:           pointer;
    transition:       background 0.12s, color 0.12s;
    letter-spacing:   0.04em;
}
.calc-unit-btn + .calc-unit-btn {
    border-left:      0.5px solid var(--bd-t);
}
.calc-unit-btn:hover    { background: var(--bg-s); color: var(--tx-p); }
.calc-unit-btn.is-active {
    background:       var(--acc);
    color:            #fff;
    font-weight:      600;
}

.calc-mode-switcher,
.add-run-mode-switcher {
    display:          flex;
    border:           0.5px solid var(--bd-t);
    border-radius:    var(--r-md);
    overflow:         hidden;
    flex-shrink:      0;
}
.calc-mode-btn {
    display:          inline-flex;
    align-items:      center;
    gap:              6px;
    padding:          5px 11px;
    font-size:        var(--text-sm);
    font-family:      var(--font-sans);
    font-weight:      500;
    background:       transparent;
    border:           none;
    color:            var(--tx-s);
    cursor:           pointer;
    transition:       background 0.12s, color 0.12s;
    letter-spacing:   0.02em;
}
.calc-mode-btn + .calc-mode-btn {
    border-left:      0.5px solid var(--bd-t);
}
.calc-mode-btn:hover    { background: var(--bg-s); color: var(--tx-p); }
.calc-mode-btn.is-active {
    background:       var(--acc);
    color:            #fff;
    font-weight:      600;
}
.calc-mode-icon  { font-size: 14px; line-height: 1; }
.calc-mode-label { white-space: nowrap; }
.calc-mode-btn--compact {
    padding:          3px 9px;
    font-size:        12px;
}
.calc-mode-btn--compact .calc-mode-icon { font-size: 13px; }

.calc-switchers-stack {
    display:          flex;
    flex-direction:   column;
    align-items:      stretch;
    gap:              6px;
    flex-shrink:      0;
}
.calc-switchers-stack .calc-unit-switcher,
.calc-switchers-stack .calc-mode-switcher {
    width:            100%;
}
.calc-switchers-stack .calc-unit-btn,
.calc-switchers-stack .calc-mode-btn {
    flex:             1 1 0;
    justify-content:  center;
}

@media (max-width: 640px) {
    .calc-mode-label { display: none; }
    .calc-mode-btn   { padding: 5px 12px; }
}

.section__sub {
    font-size: var(--text-lg);
    color:            var(--tx-s);
    margin-bottom:    24px;
    line-height:      1.65;
}

.subsec-label {
    font-size: var(--text-sm);
    letter-spacing:   0.14em;
    text-transform:   uppercase;
    color:            var(--tx-s);
    margin-bottom:    12px;
    display:          block;
}

.calc-card {
    background:       var(--bg-s);
    border:           0.5px solid var(--bd-t);
    border-radius:    var(--r-lg);
    padding:          16px 18px;
    margin-bottom:    16px;
}

.calc-inputs {
    display:          grid;
    grid-template-columns: 1fr 1fr;
    gap:              12px;
}

.calc-field {
    background:       var(--bg-p);
    border:           0.5px solid var(--bd-t);
    border-radius:    var(--r-md);
    padding:          12px 14px;
    transition:       background 0.18s, border-color 0.18s, box-shadow 0.18s;
    display:          flex;
    flex-direction:   column;
    align-items:      center;
    text-align:       center;
}

.calc-field.is-auto {
    background:       var(--acc-bg);
    border-color:     var(--acc-bd);
}
.calc-field:focus-within {
    border-color:     var(--acc);
    box-shadow:       0 0 0 3px var(--acc-bg);
}

.calc-field__label {
    font-size:        var(--text-sm);
    letter-spacing:   0.06em;
    text-transform:   uppercase;
    color:            var(--tx-t);
    margin-bottom:    8px;
    display:          flex;
    justify-content:  center;
    align-items:      center;
    gap:              8px;
    width:            100%;
    font-weight:      500;
}
.calc-field.is-auto .calc-field__label { color: var(--acc-s); }

.calc-field__unit-inline {
    font-size:        var(--text-sm);
    color:            inherit;
    opacity:          0.85;
    font-weight:      400;
}

.auto-badge {
    font-size:        11px;
    background:       var(--acc);
    color:            #fff;
    padding:          2px 8px;
    border-radius:    999px;
    display:          none;
    letter-spacing:   0.04em;
    font-weight:      500;
    text-transform:   uppercase;
}

.calc-field.is-auto .auto-badge { display: inline-block; }

.calc-input {
    width:            100%;
    border:           none;
    background:       transparent;
    font-family:      var(--font-mono);
    font-size:        26px;
    color:            var(--tx-p);
    outline:          none;
    padding:          0;
    -moz-appearance:  textfield;
    text-align:       center;
    line-height:      1.1;
}

.calc-input::placeholder { color: var(--bd-s); font-size: var(--text-md); font-style: italic; }
.calc-input::-webkit-inner-spin-button,
.calc-input::-webkit-outer-spin-button { -webkit-appearance: none; }
.calc-input.is-computed { color: var(--acc-s); font-weight: 500; }

.calc-card .result-strip {
    margin-top:       14px;
    margin-bottom:    0;
}

.result-strip {
    background:       var(--acc-bg);
    border:           0.5px solid var(--acc-bd);
    border-radius:    var(--r-lg);
    padding:          18px 16px;
    margin-bottom:    18px;
    text-align:       center;
}

.result-strip__label {
    font-size:        var(--text-sm);
    letter-spacing:   0.14em;
    text-transform:   uppercase;
    color:            var(--acc-s);
    margin-bottom:    6px;
    font-weight:      600;
}

.result-strip__value {
    font-family:      var(--font-mono);
    font-size:        52px;
    color:            var(--tx-p);
    line-height:      1;
}

.result-strip__unit {
    font-size:        var(--text-md);
    color:            var(--tx-s);
    margin-top:       6px;
}

.stat-grid {
    display:          grid;
    grid-template-columns: repeat(4, 1fr);
    gap:              1px;
    background:       var(--bd-t);
    border:           0.5px solid var(--bd-t);
    border-radius:    var(--r-lg);
    overflow:         hidden;
    margin-bottom:    26px;
}

.stat-cell {
    background:       var(--bg-p);
    padding:          12px 14px;
    transition:       background 0.12s;
}
.stat-cell:hover { background: var(--bg-s); }

.stat-cell__label {
    font-size: var(--text-sm);
    letter-spacing:   0.08em;
    text-transform:   uppercase;
    color:            var(--tx-s);
    margin-bottom:    4px;
}

.stat-cell__value {
    font-family:      var(--font-mono);
    font-size: var(--text-lg);
    color:            var(--tx-p);
}

.pred-table {
    border:           0.5px solid var(--bd-t);
    border-radius:    var(--r-lg);
    overflow:         hidden;
    margin-bottom:    28px;
    background:       var(--bg-p);
}

.pred-table__head {
    display:          grid;
    grid-template-columns: minmax(80px,130px) 60px 1fr 90px 80px;
    background:       var(--bg-s);
    border-bottom:    0.5px solid var(--bd-t);
}

.pred-table__head-cell {
    padding:          10px 10px 10px 14px;
    font-size:        var(--text-sm);
    letter-spacing:   0.08em;
    text-transform:   uppercase;
    color:            var(--tx-s);
}

.pred-table__head-cell--pace { text-align: right; padding-right: 14px; }

.pred-table__row {
    display:          grid;
    grid-template-columns: minmax(80px,130px) 60px 1fr 90px 80px;
    align-items:      center;
    border-bottom:    0.5px solid var(--bd-t);
    transition:       background 0.12s;
}

.pred-table__row:last-child { border-bottom: none; }
.pred-table__row:hover      { background: var(--bg-s); }
.pred-table__row.is-ref     { background: var(--acc-bg); }
.pred-table__row.is-ref:hover { background: var(--acc-bg); }

.pred-table__cell { padding: 11px 10px 11px 14px; font-size: var(--text-lg); vertical-align: middle; }

.pred-table__cell--dist     { color: var(--tx-s); white-space: nowrap; }
.pred-table__cell--ref-dist { color: var(--acc-s); white-space: nowrap; }

.pred-table__cell--tag {
    padding-left:     0;
    padding-right:    8px;
}

.pred-table__cell--time,
.pred-table__cell--ref-time {
    font-family:      var(--font-mono);
    font-size:        var(--text-lg);
    display:          flex;
    flex-direction:   column;
    justify-content:  center;
    align-items:      flex-start;
    gap:              4px;
}
.pred-table__cell--ref-time { color: var(--acc-s); }

.pred-time-val {
    display:          block;
    line-height:      1;
}

.pred-table__cell--pace {
    font-family:      var(--font-mono);
    font-size:        var(--text-md);
    color:            var(--tx-s);
    text-align:       right;
    padding-right:    14px;
}

.pred-table__cell--badge {
    text-align:       left;
    padding-left:     8px;
    padding-right:    16px;
}

.pred-table__empty {
    padding:          32px 20px;
    text-align:       center;
}

.pred-table__empty-title {
    font-size: var(--text-md);
    color:            var(--tx-s);
    margin-bottom:    6px;
}

.pred-table__empty-sub {
    font-size: var(--text-md);
    color:            var(--tx-t);
    line-height:      1.6;
    max-width:        280px;
    margin:           0 auto;
}

.ms-badge-row {
    display:          flex;
    flex-wrap:        wrap;
    gap:              3px;
    margin-top:       0;   
}

.ms-badge {
    font-family:      var(--font-sans);
    font-size:        10px;
    padding:          1px 5px;
    border-radius:    var(--r-sm);
    background:       var(--success-bg);
    color:            var(--success-tx);
    font-weight:      600;
    letter-spacing:   0.04em;
    display:          inline-block;
}

.pred-table__row.is-ref .ms-badge {
    background:       var(--acc-bg);
    color:            var(--acc-s);
}

.dist-tag {
    font-size:        10px;
    padding:          2px 6px;
    border-radius:    var(--r-sm);
    border:           0.5px solid var(--bd-t);
    color:            var(--tx-t);
    margin-left:      5px;
    vertical-align:   middle;
    display:          inline-flex;
    align-items:      center;
    line-height:      1;
    position:         relative;
    top:              -1px;
}

.your-badge {
    font-size:        10px;
    background:       var(--acc);
    color:            #fff;
    padding:          2px 7px;
    border-radius:    var(--r-sm);
    letter-spacing:   0.04em;
    font-weight:      600;
    white-space:      nowrap;
}

.cmp-scroll { overflow-x: auto; margin-bottom: 6px; }

.cmp-header {
    display:          flex;
    align-items:      baseline;
    gap:              10px;
    margin-top:       45px;
    margin-bottom:    10px;
    flex-wrap:        wrap;
}

.cmp-basis {
    font-size: var(--text-sm);
    color:            var(--tx-t);
}

.cmp-table {
    width:            100%;
    border-collapse:  collapse;
    font-size:        var(--text-md);
    min-width:        500px;
}

.cmp-table tr {
    display:          flex;
}
.cmp-table td,
.cmp-table th {
    flex:             1;
    min-width:        0;
}
.cmp-table td:first-child,
.cmp-table th:first-child {
    flex:             0 0 70px;
}

.cmp-table th {
    font-size:        var(--text-sm);
    letter-spacing:   0.09em;
    text-transform:   uppercase;
    color:            var(--tx-s);
    text-align:       right;
    padding:          8px 12px;
    background:       var(--bg-s);
    border-bottom:    0.5px solid var(--bd-t);
    font-weight:      400;
    white-space:      nowrap;
}

.cmp-table th:first-child { text-align: left; }

.cmp-table td {
    padding:          8px 12px;
    border-bottom:    0.5px solid var(--bd-t);
    text-align:       right;
    font-family:      var(--font-mono);
    font-size:        var(--text-md);
    color:            var(--tx-p);

    display:          flex;
    flex-direction:   column;
    align-items:      flex-end;
    gap:              3px;
}
.cmp-table tr:last-child td {
    border-bottom:    none;
}
.cmp-table tr:not(.is-you):hover td {
    background:       var(--bg-s);
    transition:       background 0.12s;
}

.cmp-table td:first-child {
    text-align:       left;
    font-family:      var(--font-sans);
    color:            var(--tx-s);
    font-size:        var(--text-md);
    align-items:      flex-start;
}

.cmp-time-val {
    display:          block;
    line-height:      1;
}

.cmp-badge-row {
    display:          flex;
    flex-wrap:        wrap;
    gap:              2px;
    justify-content:  flex-end;
}

.cmp-table tr.is-you td { background: var(--acc-bg); }
.cmp-table tr.is-you td:first-child { color: var(--acc-s); }

.cmp-table .ms-badge {
    background:       var(--success-bg);
    color:            var(--success-tx);
}

.cmp-table tr.is-you .ms-badge {
    background:       var(--acc-bg);
    color:            var(--acc-s);
}

.cmp-hint {
    font-size: var(--text-sm);
    color:            var(--tx-t);
    margin-top:       7px;
}

.file-strip {
    background:       var(--bg-s);
    border-bottom:    0.5px solid var(--bd-t);
    padding:          16px 20px;
}

.file-strip__inner {
    background:       var(--bg-p);
    border:           0.5px solid var(--bd-t);
    border-radius:    var(--r-lg);
    overflow:         hidden;
}

.file-strip__top {
    padding:          18px 20px;
    border-bottom:    0.5px solid var(--bd-t);
    display:          flex;
    align-items:      flex-start;
    gap:              14px;
}

.file-strip__icon {
    width:            36px;
    height:           36px;
    border-radius:    var(--r-md);
    background:       var(--bg-s);
    border:           0.5px solid var(--bd-t);
    display:          flex;
    align-items:      center;
    justify-content:  center;
    flex-shrink:      0;
    margin-top:       2px;
}

.file-strip__title {
    font-size: var(--text-md);
    color:            var(--tx-p);
    margin-bottom:    5px;
}

.file-strip__body {
    font-size: var(--text-md);
    color:            var(--tx-s);
    line-height:      1.7;
}

.file-strip__steps {
    display:          grid;
    grid-template-columns: 1fr 1fr 1fr;
    border-bottom:    0.5px solid var(--bd-t);
}

.file-strip__step {
    padding:          14px 16px;
    border-right:     0.5px solid var(--bd-t);
}

.file-strip__step:last-child { border-right: none; }

.file-strip__step-num {
    font-family:      var(--font-mono);
    font-size: var(--text-sm);
    color:            var(--acc-s);
    margin-bottom:    5px;
}

.file-strip__step-title {
    font-size: var(--text-md);
    color:            var(--tx-p);
    margin-bottom:    4px;
}

.file-strip__step-body {
    font-size: var(--text-md);
    color:            var(--tx-s);
    line-height:      1.6;
}

.file-strip__actions {
    padding:          14px 20px;
    background:       var(--bg-s);
    display:          flex;
    align-items:      center;
    justify-content:  space-between;
    flex-wrap:        wrap;
    gap:              10px;
}

.file-strip__action-group {
    display:          flex;
    gap:              8px;
    flex-wrap:        wrap;
}

.file-strip__skip,
.btn-skip {
    font-size: var(--text-md);
    color:            var(--tx-t);
    background:       none;
    border:           none;
    cursor:           pointer;
    text-decoration:  underline;
    text-underline-offset: 3px;
    padding:          0;
}

.file-strip__loaded {
    display:          none;
    padding:          14px 20px;
    align-items:      center;
    gap:              10px;
}

.file-strip__loaded.is-visible { display: flex; }

.status-dot {
    width:            8px;
    height:           8px;
    border-radius:    50%;
    background:       var(--success-tx);
    flex-shrink:      0;
}

.file-strip__loaded-info { flex: 1; }

.file-strip__loaded-title {
    font-size: var(--text-md);
    color:            var(--tx-p);
    margin-bottom:    2px;
}

.file-strip__loaded-sub {
    font-size: var(--text-md);
    color:            var(--tx-s);
}

.file-strip__loaded-actions {
    display:          flex;
    gap:              7px;
    flex-shrink:      0;
}

[hidden] { display: none !important; }
.btn {
    font-size: var(--text-sm);
    letter-spacing:   0.09em;
    text-transform:   uppercase;
    border-radius:    var(--r-md);
    padding:          8px 14px;
    cursor:           pointer;
    white-space:      normal;       
    word-break:       break-word;
    hyphens:          auto;
    font-family:      var(--font-sans);
    transition:       all 0.15s;
    display:          inline-block;
    text-align:       center;
    text-decoration:  none;
    max-width:        200px;        
    line-height:      1.4;
}

.btn--full { max-width: none; }

.btn--solid {
    background:       var(--tx-p);
    color:            var(--bg-p);
    border:           none;
}

.btn--solid:hover { opacity: 0.85; }

.btn--ghost {
    background:       transparent;
    color:            var(--tx-s);
    border:           0.5px solid var(--bd-t);
}

.btn--ghost:hover { border-color: var(--bd-s); color: var(--tx-p); }

.btn--accent {
    background:       transparent;
    color:            var(--acc-s);
    border:           0.5px solid var(--acc);
}

.btn--accent:hover { background: var(--acc-bg); }

.btn--danger {
    background:       transparent;
    color:            var(--danger-tx);
    border:           0.5px solid var(--danger-bd);
    font-size: var(--text-sm);
    padding:          6px 12px;
}

.btn--full { width: 100%; }

.ad-stripe {
    background:       var(--bg-s);
    border-top:       0.5px solid var(--bd-t);
    border-bottom:    0.5px solid var(--bd-t);
    padding:          12px 20px;
}

.ad-stripe__placeholder {
    border:           0.5px dashed var(--bd-s);
    border-radius:    var(--r-md);
    display:          flex;
    align-items:      center;
    justify-content:  center;
    height:           52px;
    color:            var(--tx-t);
    font-size: var(--text-sm);
    letter-spacing:   0.07em;
}

.ad-stripe__hint {
    font-size: var(--text-sm);
    color:            var(--tx-t);
    margin-top:       4px;
}

.chart-wrap {
    border:           0.5px solid var(--bd-t);
    border-radius:    var(--r-lg);

    padding:          0 0 16px;
    margin-bottom:    28px;
    background:       var(--bg-p);
}
.chart-wrap > .pace-chart-canvas-wrap {
    margin:           16px 20px 0;
    width:            calc(100% - 40px);
}

@media (max-width: 600px) {
    .chart-wrap > .pace-chart-canvas-wrap {
        margin:           12px 12px 0;
        width:            calc(100% - 24px);
    }
    .pace-chart-canvas-wrap {
        height:           220px;
    }
}

.pace-chart-canvas-wrap {
    position:         relative;
    height:           260px;
    width:            100%;
}
.pace-chart-canvas-wrap > canvas {
    width:            100% !important;
    height:           100% !important;
}

/* The "Load chart" CTA button sits over the empty canvas while Chart.js is
   still being lazily downloaded. It auto-hides once the chart renders. The
   IntersectionObserver in the footer handles the seamless case (user
   scrolls near the chart → it just appears). The button is the explicit
   fallback for users who never quite scroll into the trigger zone. */
.pace-chart-loader {
    position:         absolute;
    inset:            0;
    display:          flex;
    flex-direction:   column;
    align-items:      center;
    justify-content:  center;
    gap:              8px;
    background:       var(--bg-s);
    border:           0.5px dashed var(--bd-s);
    border-radius:    var(--r-md);
    color:            var(--tx-s);
    cursor:           pointer;
    font-family:      inherit;
    font-size:        var(--text-md);
    transition:       background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.pace-chart-loader:hover,
.pace-chart-loader:focus-visible {
    background:       var(--bg-p);
    border-color:     var(--bd-p);
    color:            var(--tx-p);
}
.pace-chart-loader__icon {
    font-size:        28px;
    line-height:      1;
    opacity:          0.7;
}
.pace-chart-loader__label {
    font-size:        var(--text-md);
    letter-spacing:   0.02em;
}

.section-card__header {
    display:          flex;
    flex-direction:   column;
    gap:              0;
    margin-bottom:    0;
    padding:          0;
    background:       transparent;
}
.section-card__header-row {
    display:          flex;
    align-items:      center;
    gap:              12px;
    flex-wrap:        wrap;

    padding:          12px 20px;
}
.section-card__header-row--primary {
    justify-content:  space-between;
}
.section-card__header-row + .section-card__header-row {

    border-top:       0.5px solid var(--bd-t);
    padding-top:      10px;
    padding-bottom:   10px;
}
.section-card__header-row--metric {
    justify-content:  flex-start;
}
.section-card__header-row--range {
    justify-content:  flex-start;
}

.chart-status {
    font-size:        12px;
    color:            var(--tx-t);
    padding:          1px 7px;
    border:           0.5px dashed var(--bd-s);
    border-radius:    var(--r-sm);
    white-space:      nowrap;
}
.chart-status.is-live {
    color:            var(--success-tx);
    border-style:     solid;
    border-color:     var(--success-tx);
}

.chart-range-label {
    font-size:        13px;
    color:            var(--tx-t);
    text-transform:   uppercase;
    letter-spacing:   0.08em;
    margin-right:     4px;
}

.range-pills { display: flex; gap: 5px; }

.range-pills--expanded { gap: 4px; flex-wrap: wrap; }

.range-pill {
    font-size: var(--text-sm);
    padding:          4px 12px;
    border:           0.5px solid var(--bd-t);
    border-radius:    20px;
    cursor:           pointer;
    color:            var(--tx-s);
    user-select:      none;
    background:       transparent;
    font-family:      var(--font-sans);
    transition:       all 0.15s;
}

.range-pill:hover    { border-color: var(--acc-bd); color: var(--acc-s); }
.range-pill.is-active {
    background:       var(--acc-bg);
    color:            var(--acc-s);
    border-color:     var(--acc);
    font-weight:      600;
}

.form-grid {
    display:          grid;
    grid-template-columns: 1fr 1fr;
    gap:              10px;
    margin-bottom:    16px;
}

.form-field { display: flex; flex-direction: column; gap: 4px; }

.form-label {
    font-size: var(--text-md);
    letter-spacing:   0.09em;
    text-transform:   uppercase;
    color:            var(--tx-s);
}

.form-input {
    border:           0.5px solid var(--bd-t);
    border-radius:    var(--r-md);
    padding:          10px 12px;
    background:       transparent;
    font-family:      var(--font-mono);
    font-size: var(--text-lg);
    color:            var(--tx-p);
    outline:          none;
    width:            100%;
    transition:       border-color 0.15s;
}

.form-input:focus { border-color: var(--acc); }
.form-input::placeholder { color: var(--bd-s); font-size: var(--text-sm); font-style: italic; }

textarea.form-input {
    font-family:      var(--font-sans);
    font-size: var(--text-md);
    line-height:      1.6;
    resize:           none;
}

.run-actions {
    display:          grid;
    grid-template-columns: 1fr 1fr;
    gap:              10px;
    margin-bottom:    14px;
}

.run-action-card {
    border:           0.5px solid var(--bd-t);
    border-radius:    var(--r-md);
    padding:          14px 16px;
}

.run-action-card__title {
    font-size: var(--text-md);
    color:            var(--tx-p);
    margin-bottom:    4px;
}

.run-action-card__sub {
    font-size: var(--text-sm);
    color:            var(--tx-s);
    line-height:      1.5;
    margin-bottom:    12px;
}

.storage-card {
    border:           0.5px solid var(--bd-t);
    border-radius:    var(--r-md);
    overflow:         hidden;
    margin-bottom:    22px;
}

.storage-card__header {
    padding:          12px 16px;
    display:          flex;
    align-items:      flex-start;
    gap:              8px;
    border-bottom:    0.5px solid var(--bd-t);
}

.storage-card__header label {
    display:          flex;
    align-items:      center;
    gap:              9px;
    cursor:           pointer;
    flex:             1;
}

.storage-card__header input[type="checkbox"] {
    accent-color:     var(--acc-s);
    width:            14px;
    height:           14px;
    flex-shrink:      0;
}

.storage-card__label {
    font-size: var(--text-md);
    color:            var(--tx-p);
}

.storage-card__sublabel {
    font-size: var(--text-sm);
    color:            var(--tx-s);
    margin-top:       1px;
}

.storage-card__warning {
    padding:          12px 16px;
    background:       var(--bg-s);
    display:          none;
}

.storage-card__warning.is-visible { display: block; }

.storage-toast {
    padding:          8px 14px;
    margin-bottom:    8px;
    background:       var(--success-bg);
    color:            var(--success-tx);
    border-radius:    var(--r-md);
    font-size:        var(--text-sm);
    font-weight:      500;
    text-align:       center;
    opacity:          0;
    transform:        translateY(-4px);
    transition:       opacity 0.2s ease, transform 0.2s ease;
    pointer-events:   none;

    max-height:       0;
    overflow:         hidden;
    padding-top:      0;
    padding-bottom:   0;
    margin-bottom:    0;
}
.storage-toast.is-visible {
    opacity:          1;
    transform:        translateY(0);
    max-height:       60px;
    padding-top:      8px;
    padding-bottom:   8px;
    margin-bottom:    8px;
}

.storage-warning-row {
    display:          flex;
    align-items:      flex-start;
    gap:              7px;
    margin-bottom:    5px;
}

.storage-warning-icon {
    width:            14px;
    height:           14px;
    border-radius:    50%;
    background:       var(--warning-bg);
    border:           0.5px solid var(--warning-bd);
    display:          flex;
    align-items:      center;
    justify-content:  center;
    font-size: var(--text-sm);
    color:            var(--warning-tx);
    flex-shrink:      0;
    margin-top:       1px;
}

.storage-warning-title {
    font-size: var(--text-sm);
    color:            var(--warning-tx);
    font-weight:      500;
}

.storage-warning-body {
    font-size: var(--text-md);
    color:            var(--tx-s);
    line-height:      1.6;
}

.import-strip {
    display:          flex;
    align-items:      center;
    gap:              8px;
    margin-bottom:    28px;
    flex-wrap:        wrap;
}

.import-strip__hint {
    font-size: var(--text-md);
    color:            var(--tx-s);
}

.pr-table {
    width:            100%;
    border-collapse:  collapse;
}

.pr-table th {
    font-size: var(--text-sm);
    letter-spacing:   0.09em;
    text-transform:   uppercase;
    color:            var(--tx-s);
    text-align:       left;
    padding:          8px 14px;
    border-bottom:    0.5px solid var(--bd-t);
    font-weight:      400;
}

.pr-table td {
    padding:          10px 14px;
    border-bottom:    0.5px solid var(--bd-t);
    font-size: var(--text-md);
    color:            var(--tx-p);
}

.pr-table tr:last-child td { border-bottom: none; }

.pr-mono { font-family: var(--font-mono); }
.pr-muted { font-size: var(--text-md); color: var(--tx-s); }

.pr-badge {
    display:          inline-block;
    background:       var(--acc-bg);
    color:            var(--acc-s);
    font-size: var(--text-sm);
    padding:          2px 5px;
    border-radius:    var(--r-sm);
    letter-spacing:   0.05em;
}

.gear-toggle {
    display:          flex;
    align-items:      center;
    justify-content:  space-between;
    cursor:           pointer;
    padding:          18px 20px;
    border-bottom:    0.5px solid var(--bd-t);
    user-select:      none;
    background:       var(--bg-p);
    transition:       background 0.15s;
}

.gear-toggle:hover { background: var(--bg-s); }

.gear-toggle__question {
    font-size: var(--text-lg);
    color:            var(--tx-p);
}

.gear-toggle__question span { color: var(--acc-s); }

.gear-toggle__right {
    display:          flex;
    align-items:      center;
    gap:              10px;
}

.gear-chevron {
    font-size: var(--text-md);
    color:            var(--tx-s);
    transition:       transform 0.25s;
    display:          inline-block;
}

.gear-chevron.is-open { transform: rotate(180deg); }

.gear-body {
    display:          none;
    background:       var(--bg-p);
    padding:          0 20px 32px;
    border-bottom:    0.5px solid var(--bd-t);
}

.gear-body.is-open { display: block; }

.gear-filters {
    margin:           18px 0 22px;
    display:          flex;
    flex-direction:   column;
    gap:              14px;
}

.gear-filter-row {
    display:          flex;
    flex-direction:   column;
    gap:              7px;
}

.gear-filter-lbl {
    font-size:        11px;
    color:            var(--tx-t);
    text-transform:   uppercase;
    letter-spacing:   0.08em;
    font-weight:      600;
    white-space:      nowrap;
    padding-bottom:   4px;
    border-bottom:    0.5px solid var(--bd-t);
}

.gear-filter-pills {
    display:          flex;
    flex-wrap:        wrap;
    gap:              5px;
}

.gear-price-range {
    display:          flex;
    align-items:      center;
    gap:              6px;
    flex-wrap:        nowrap;
}
.gear-price-input {
    width:            72px;
    flex-shrink:      0;
    padding:          5px 8px;
    border:           0.5px solid var(--bd-t);
    border-radius:    8px;
    background:       var(--bg-p);
    color:            var(--tx-p);
    font-family:      var(--font-sans);
    font-size:        var(--text-sm);
    transition:       border-color 0.15s;
}
.gear-price-input:focus {
    outline:          none;
    border-color:     var(--acc);
}
.gear-price-input::placeholder {
    color:            var(--tx-t);
}

.gear-price-input::-webkit-inner-spin-button,
.gear-price-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.gear-price-input { -moz-appearance: textfield; }
.gear-price-range__sep {
    color:            var(--tx-t);
    font-size:        var(--text-md);
}
.gear-price-clear {
    background:       transparent;
    border:           none;
    color:            var(--tx-t);
    font-size:        16px;
    cursor:           pointer;
    padding:          0 6px;
    line-height:      1;
    opacity:          0;
    pointer-events:   none;
    transition:       opacity 0.15s, color 0.15s;
}
.gear-price-clear.is-active {
    opacity:          1;
    pointer-events:   auto;
}
.gear-price-clear:hover { color: var(--tx-p); }

.tier-pill,
.cat-pill,
.season-pill {
    font-size:        var(--text-sm);
    padding:          5px 11px;
    border:           0.5px solid var(--bd-t);
    border-radius:    8px;
    cursor:           pointer;
    color:            var(--tx-s);
    user-select:      none;
    background:       transparent;
    font-family:      var(--font-sans);
    transition:       all 0.15s;
    white-space:      nowrap;
}

.tier-pill:hover,
.cat-pill:hover,
.season-pill:hover  { border-color: var(--acc); color: var(--acc-s); }

.tier-pill.is-active,
.cat-pill.is-active,
.season-pill.is-active {
    background:       var(--acc);
    color:            #fff;
    border-color:     var(--acc);
    font-weight:      600;
}

.gear-item {
    padding:          14px 14px 12px;
    border:           0.5px solid var(--bd-t);
    border-radius:    var(--r-md);
    background:       var(--bg-p);
    margin-bottom:    10px;
}

.gear-item:last-child { margin-bottom: 0; }
.gear-item.is-hidden { display: none; }

.gear-item__top {
    display:          flex;
    align-items:      baseline;
    gap:              7px;
    margin-bottom:    8px;
    flex-wrap:        wrap;
}

.gear-item__name {
    font-size: var(--text-lg);
    color:            var(--tx-p);
    font-weight:      600;
}

.gear-item__cat {
    font-size: 11px;
    letter-spacing:   0.07em;
    text-transform:   uppercase;
    color:            var(--tx-t);
    border:           0.5px solid var(--bd-t);
    padding:          1px 6px;
    border-radius:    var(--r-sm);
}

.gear-tier-tag {
    font-size: 11px;
    padding:          1px 7px;
    border-radius:    var(--r-sm);
    font-weight:      600;
}

.gear-tier-tag--budget  { background: var(--success-bg); color: var(--success-tx); }
.gear-tier-tag--mid     { background: var(--info-bg);    color: var(--info-tx); }
.gear-tier-tag--premium { background: var(--acc-bg);     color: var(--acc-s); }

.gear-item__desc {
    font-size: var(--text-md);
    color:            var(--tx-s);
    line-height:      1.55;
    margin-bottom:    10px;
    max-width:        520px;
}

.gear-item__cols {
    display:          flex;
    flex-direction:   column;
    gap:              10px;
    margin-bottom:    10px;
}

.gear-item__col-head {
    font-size: 11px;
    letter-spacing:   0.10em;
    text-transform:   uppercase;
    color:            var(--tx-t);
    font-weight:      600;
    margin-bottom:    4px;
}

.gear-list {
    list-style:       none;
    display:          flex;
    flex-direction:   column;
    gap:              4px;
}

.gear-list li {
    font-size: var(--text-md);
    color:            var(--tx-p);
    padding-left:     11px;
    position:         relative;
    line-height:      1.5;
}

.gear-list li::before {
    content:          '';
    position:         absolute;
    left:             0;
    top:              8px;
    width:            4px;
    height:           1px;
    background:       var(--tx-s);
}

.gear-list.gear-list--bad li::before { background: var(--bd-s); }

.gear-item__foot {
    display:          flex;
    align-items:      center;
    gap:              10px;
}

.gdpr-banner {
    position:         fixed;
    bottom:           0;
    left:             0;
    right:            0;
    background:       var(--bg-p);
    border-top:       0.5px solid var(--bd-t);
    box-shadow:       0 -4px 24px rgba(0,0,0,0.10);
    padding:          14px 20px;
    display:          flex;
    align-items:      center;
    justify-content:  space-between;
    gap:              16px;
    z-index:          200;
    flex-wrap:        wrap;
}

.gdpr-banner.is-hidden { display: none; }

.gdpr-banner__text {
    font-size: var(--text-md);
    color:            var(--tx-s);
    flex:             1;
    min-width:        200px;
}

.gdpr-banner__actions { display: flex; gap: 8px; }

.site-footer {
    background:       var(--bg-p);
    border-top:       0.5px solid var(--bd-t);
    padding:          14px 20px;
    display:          flex;
    justify-content:  center;
    align-items:      center;
    flex-wrap:        wrap;
}

.site-footer__links {
    display:          flex;
    flex-wrap:        wrap;
    justify-content:  center;
    gap:              4px 16px;
    list-style:       none;
}

.site-footer__link {
    font-size:        var(--text-sm);
    color:            var(--tx-t);
    text-decoration:  none;
    transition:       color 0.15s;
    padding:          4px 0;
}

.site-footer__link:hover { color: var(--tx-s); }

@media (max-width: 640px) {
    .site-footer__links { gap: 6px 12px; }
    .site-footer__link  { padding: 5px 2px; }
}

@media (max-width: 640px) {
    .sitenav__links    { display: none; }
    .sitenav__controls { display: none; }

    .calc-inputs { grid-template-columns: 1fr; }
    .calc-field:not(:last-child) { border-right: none; border-bottom: 0.5px solid var(--bd-t); }

    .stat-grid { grid-template-columns: repeat(2, 1fr); }

    .pred-table__head,
    .pred-table__row { grid-template-columns: minmax(60px,1fr) 50px auto 0 56px; }
    .pred-table__head-cell--pace,
    .pred-table__cell--pace { display: none; }
    .pred-table__cell { padding: 10px 6px 10px 10px; }
    .pred-table__cell--tag { padding-left: 0; }
    .pred-table__cell--badge { padding-left: 4px; padding-right: 10px; }
    .pred-table__cell--time { font-size: var(--text-md); }

    .pr-table th:nth-child(5), .pr-table td:nth-child(5),
    .pr-table th:nth-child(6), .pr-table td:nth-child(6) { display: none; }
    .pr-rank-th, .pr-rank { padding-left: 10px !important; padding-right: 4px !important; width: 24px; }

    .form-grid { grid-template-columns: 1fr; }
    .run-actions { grid-template-columns: 1fr; }

    .file-strip__steps { grid-template-columns: 1fr; }
    .file-strip__step { border-right: none; border-bottom: 0.5px solid var(--bd-t); }
    .file-strip__step:last-child { border-bottom: none; }

    .gear-item__cols { grid-template-columns: 1fr; }

    .cmp-table { min-width: 0; }
    .cmp-table th:nth-child(4), .cmp-table td:nth-child(4),
    .cmp-table th:nth-child(5), .cmp-table td:nth-child(5) { display: none; }

    .pace-info-bar { grid-template-columns: 1fr; }
    .pace-info-bar__left { padding-right: 0; border-right: none; border-bottom: 0.5px solid var(--bd-t); padding-bottom: 8px; }
    .pace-info-bar__right { padding-left: 0; padding-top: 8px; justify-content: flex-start; }

    .split-inputs { flex-direction: column; }
    .split-inp    { min-width: 0; width: 100%; box-sizing: border-box; }

    .add-run-row--main { grid-template-columns: 1fr 1fr; }
    .add-run-row--secondary { grid-template-columns: 1fr; }
    .add-run-field--submit { grid-column: span 1; }

    .add-run-field--submit { align-items: center; }
    .add-run-field--submit .add-run-label { display: none; }
    .btn-add-run-wrap { max-width: 280px; }

    .section-card__header-row { padding: 8px 12px; }

    .rawdata-table th:nth-child(5), .rawdata-table td:nth-child(5) { display: none; }

    .zone-divider__inner { grid-template-columns: 1fr; }
}

@media (max-width: 400px) {
    .result-strip__value { font-size: 36px; }
    .section { padding: 24px 16px 32px; }
    .file-strip { padding: 12px 16px; }

    .pr-table th:nth-child(4), .pr-table td:nth-child(4) { display: none; }

    .cmp-table th:nth-child(3), .cmp-table td:nth-child(3),
    .cmp-table th:nth-child(6), .cmp-table td:nth-child(6) { display: none; }

    .split-quick-pill  { padding: 2px 6px; font-size: 11px; }
    .pred-table__cell { padding: 8px 8px; }
}

.visually-hidden {
    position:  absolute;
    width:     1px;
    height:    1px;
    padding:   0;
    margin:    -1px;
    overflow:  hidden;
    clip:      rect(0, 0, 0, 0);
    border:    0;
}

.text-mono  { font-family: var(--font-mono); }
.text-muted { color: var(--tx-s); }
.text-tiny  { font-size: var(--text-sm); }

.site-layout {
    display:        flex;
    align-items:    flex-start;
}

.site-main {
    flex:           1;
    min-width:      0;
    border-right:   0.5px solid var(--bd-t);
}

.site-sidebar {
    width:          300px;
    flex-shrink:    0;
    padding:        24px 18px;
    position:       sticky;
    top:            52px;
    max-height:     calc(100vh - 52px);
    overflow-y:     auto;
}

.site-sidebar::-webkit-scrollbar { width: 3px; }
.site-sidebar::-webkit-scrollbar-thumb { background: var(--bd-s); border-radius: 2px; }

.sidebar-header {
    display:        flex;
    align-items:    center;
    justify-content:space-between;
    margin-bottom:  16px;
    padding-bottom: 12px;
    border-bottom:  0.5px solid var(--bd-t);
}

.sidebar-label {
    font-size: var(--text-sm);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color:          var(--tx-s);
}

.cfg-badge-small {
    font-size: var(--text-sm);
    padding:        2px 6px;
    border:         0.5px solid var(--bd-t);
    border-radius:  3px;
    color:          var(--tx-t);
    font-family:    var(--font-mono);
}

.sidebar-gear-item {
    padding:          14px 14px 12px;
    margin-bottom:    10px;
    border:           0.5px solid var(--bd-t);
    border-radius:    var(--r-md);

    background:       var(--bg-s);
}

.sidebar-gear-item:last-child { margin-bottom: 0; }
.sidebar-gear-item.is-hidden  { display: none; }

.sidebar-gear-top   { margin-bottom: 8px; }
.sidebar-gear-name  {
    font-size: var(--text-md);
    color: var(--tx-p);
    margin-bottom: 6px;
    font-weight: 600;
    line-height: 1.35;
}
.sidebar-gear-meta  { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sidebar-gear-cat   {
    font-size: 11px;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color:          var(--tx-t);
    border:         0.5px solid var(--bd-t);
    padding:        1px 6px;
    border-radius:  var(--r-sm);
}

.sidebar-gear-desc {
    font-size: var(--text-md);
    color:          var(--tx-s);
    line-height:    1.55;
    margin-bottom:  10px;
}

.sidebar-gear-cols {
    display:        flex;
    flex-direction: column;
    gap:            10px;
    margin-bottom:  10px;
}

.sidebar-gear-col-hd {
    font-size: 11px;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color:          var(--tx-t);
    font-weight:    600;
    margin-bottom:  4px;
}

.sidebar-gear-foot {
    display:        flex;
    align-items:    center;
    gap:            8px;
    flex-wrap:      wrap;
}

.sidebar-gear-item.has-image {
    overflow:       hidden;
    padding-top:    0;
}
.sidebar-gear-image {
    margin:         -14px -14px 12px;
    background:     var(--bg-p);
    aspect-ratio:   16 / 9;
    overflow:       hidden;
}
.sidebar-gear-image img {
    width:          100%;
    height:         100%;
    object-fit:     cover;
    display:        block;
}

.sidebar-gear-btn {
    display:          inline-flex;
    align-items:      center;
    gap:              7px;
    padding:          7px 14px;
    background:       var(--acc);
    color:            #fff;
    border:           0.5px solid var(--acc);
    border-radius:    var(--r-md);
    font-size:        var(--text-sm);
    font-family:      var(--font-sans);
    font-weight:      600;
    text-decoration:  none;
    transition:       all 0.15s;
    cursor:           pointer;
}
.sidebar-gear-btn:hover {
    background:       var(--acc-s, var(--acc));
    border-color:     var(--acc-s, var(--acc));
}
.sidebar-gear-btn__shop {
    font-weight:      400;
    opacity:          0.85;
}
.sidebar-gear-btn__shop::before {
    content:          '· ';
    margin-right:     2px;
}
.sidebar-gear-btn__arrow {
    margin-left:      auto;
    transition:       transform 0.15s;
}
.sidebar-gear-btn:hover .sidebar-gear-btn__arrow {
    transform:        translateX(2px);
}

.sidebar-gear-disclosure {
    font-size:        11px;
    color:            var(--tx-t);
}

body[data-gear-count="0"] .gear-sidebar-body { display: none; }
body[data-gear-count="1"] .sidebar-gear-item,
body[data-gear-count="2"] .sidebar-gear-item {
    padding:        18px 18px 16px;
}
body[data-gear-count="1"] .sidebar-gear-item.has-image,
body[data-gear-count="2"] .sidebar-gear-item.has-image {
    padding-top:    0;
}
body[data-gear-count="1"] .sidebar-gear-image,
body[data-gear-count="2"] .sidebar-gear-image {
    margin:         -18px -18px 14px;
    aspect-ratio:   16 / 10;
}
body[data-gear-count="1"] .sidebar-gear-name,
body[data-gear-count="2"] .sidebar-gear-name {
    font-size:      var(--text-lg);
}
body[data-gear-count="1"] .sidebar-gear-desc,
body[data-gear-count="2"] .sidebar-gear-desc {
    font-size:      var(--text-md);
    line-height:    1.6;
}

.result-strip__speed {
    font-size: var(--text-md);
    color:          var(--tx-t);
    margin-top:     4px;
    font-family:    var(--font-mono);
    letter-spacing: 0.02em;
}

.pred-header {
    display:        flex;
    align-items:    center;
    justify-content:space-between;
    flex-wrap:      wrap;
    gap:            10px;
    margin-top:     45px;
    margin-bottom:  12px;
}

.pred-mode-pills {
    display:        flex;
    gap:            5px;
}

.pred-pill {
    font-size:      var(--text-sm);
    padding:        6px 12px;
    border:         0.5px solid var(--bd-t);
    border-radius:  999px;
    cursor:         pointer;
    color:          var(--tx-s);
    background:     var(--bg-p);
    font-family:    var(--font-sans);
    font-weight:    500;
    transition:     all 0.12s;
    white-space:    nowrap;
    line-height:    1.3;
}
.pred-pill:hover {
    border-color:   var(--acc-bd);
    background:     var(--acc-bg);
    color:          var(--acc-s);
}
.pred-pill.is-active {
    background:     var(--acc);
    color:          #fff;
    border-color:   var(--acc);
    font-weight:    600;
    box-shadow:     0 1px 2px rgba(0,0,0,0.06);
}

.chart-view-tabs {
    display:        flex;
    gap:            0;
    border:         0.5px solid var(--bd-t);
    border-radius:  var(--r-md);
    overflow:       hidden;
}

.chart-tab {
    font-size: var(--text-md);
    padding:        5px 14px;
    border:         none;
    border-right:   0.5px solid var(--bd-t);
    background:     transparent;
    color:          var(--tx-s);
    cursor:         pointer;
    font-family:    var(--font-sans);
    transition:     all 0.15s;
    white-space:    nowrap;
}

.chart-tab:last-child { border-right: none; }

.chart-tab.is-active {
    background:     var(--tx-p);
    color:          var(--bg-p);
}

@media (min-width: 961px) and (max-width: 1199px) {
    .site-sidebar { width: 260px; padding: 24px 14px; }
    .sidebar-gear-item { padding: 12px 12px 10px; }
}

@media (max-width: 960px) {

    .site-layout {
        flex-direction: column;
        align-items:    stretch;   
    }
    .site-main {
        flex:         1 1 auto;
        width:        100%;
        min-width:    0;
        border-right: none;
    }

    .site-sidebar {

        width:       100%;
        flex:        0 0 auto;
        position:    static;
        top:         auto;
        max-height:  none;
        overflow:    visible;
        border-top:  0.5px solid var(--bd-t);
        padding:     8px 20px 32px;
    }

    .sidebar-gear-cols { grid-template-columns: 1fr 1fr; }

    .page-frame { max-width: 100%; }
}

@media (max-width: 640px) {
    .sidebar-gear-cols { grid-template-columns: 1fr; }
    .chart-view-tabs { font-size: var(--text-sm); }
    .pred-mode-pills { flex-wrap: wrap; }
}

@media (min-width: 641px) and (max-width: 960px) {

    .calc-field { padding: 14px 12px 11px; }
    .calc-input { font-size: 22px; }

    .stat-grid { grid-template-columns: repeat(2, 1fr); }

    .add-run-row--main      { grid-template-columns: 1fr 1fr 1fr; }

    .add-run-row--secondary { grid-template-columns: 1fr 1fr; }
    .add-run-row--secondary .add-run-field--submit {
        grid-column: 1 / -1;
        justify-self: stretch;
    }
    .btn-add-run-wrap       { max-width: 100%; }

    .site-sidebar { padding: 16px 20px 32px; }

    .sidebar-gear-cols { grid-template-columns: 1fr 1fr; gap: 12px; }

    .result-strip__value { font-size: 46px; }

    .section { padding: 28px 20px 36px; }
}

@media (orientation: portrait) and (min-width: 641px) and (max-width: 1024px) {
    .site-main,
    .site-sidebar { padding-left: 20px; padding-right: 20px; }
    .sitenav      { padding-left: 20px; padding-right: 20px; }
}

.gear-overlay {
    display:          block;
    position:         fixed;
    inset:            0;
    background:       rgba(0,0,0,0.45);
    z-index:          200;
    opacity:          0;
    visibility:       hidden;
    pointer-events:   none;
    transition:       opacity 0.25s, visibility 0.25s;
}
.gear-overlay.is-visible {
    opacity:          1;
    visibility:       visible;
    pointer-events:   auto;
}

.gear-drawer {
    position:         fixed;
    top:              0;
    right:            0;
    bottom:           0;
    width:            min(360px, 92vw);
    background:       var(--bg-p);
    border-left:      0.5px solid var(--bd-t);
    z-index:          201;
    overflow-y:       auto;
    padding:          20px 18px 40px;
    transform:        translateX(100%);
    transition:       transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
.gear-drawer.is-open {
    transform:        translateX(0);
}

.gear-drawer__header {
    display:          flex;
    align-items:      center;
    justify-content:  space-between;
    margin-bottom:    16px;
    padding-bottom:   12px;
    border-bottom:    0.5px solid var(--bd-t);
}

.gear-drawer__close {
    background:       none;
    border:           none;
    font-size: var(--text-lg);
    color:            var(--tx-s);
    cursor:           pointer;
    padding:          4px 8px;
    line-height:      1;
    border-radius:    var(--r-sm);
    transition:       background 0.15s;
}
.gear-drawer__close:hover { background: var(--bg-s); }

@media (min-width: 1201px) {
    .gear-drawer,
    .gear-overlay { display: none !important; }
}

.time-mask {
    font-family:      var(--font-mono) !important;
    letter-spacing:   0.06em;
    cursor:           text;
}

.form-hint {
    font-size: var(--text-md);
    color:            var(--tx-t);
    margin-top:       4px;
    font-family:      var(--font-mono);
    min-height:       16px;
    transition:       color 0.2s;
}

.form-hint.has-value {
    color:            var(--acc-s);
}

.sidebar-tips {
    padding:          0;
}

.tips-teaser {
    display:          flex;
    align-items:      center;
    justify-content:  space-between;
    width:            100%;
    background:       none;
    border:           none;
    border-bottom:    0.5px solid var(--bd-t);
    padding:          16px 0 14px;
    cursor:           pointer;
    text-align:       left;
    gap:              8px;
}

.tips-teaser:hover .tips-teaser__heading { color: var(--acc-s); }

.tips-teaser__text { display: flex; flex-direction: column; gap: 2px; }

.tips-teaser__heading {
    font-size:        var(--text-md);
    font-weight:      600;
    color:            var(--tx-p);
    line-height:      1.35;
    transition:       color 0.15s;
}

.tips-teaser__sub {
    font-size:        var(--text-md);
    color:            var(--tx-t);
}

.tips-teaser__chevron {
    font-size:        var(--text-md);
    color:            var(--tx-t);
    transition:       transform 0.22s;
    flex-shrink:      0;
}

.tips-teaser__chevron.is-open { transform: rotate(180deg); }

.tips-body {
    display:          none;
    overflow:         hidden;
    padding:          16px 0 18px;
}

.tips-body.is-open { display: block; }

.sidebar-tips__sub {
    font-size:        var(--text-sm);
    color:            var(--tx-t);
    line-height:      1.5;
    margin:           0 0 14px;
}

.sidebar-tips__list {
    list-style:       none;
    padding:          0;
    margin:           0;
    display:          flex;
    flex-direction:   column;
    gap:              14px;
}

.sidebar-tip {
    display:          flex;
    gap:              10px;
    align-items:      flex-start;
}

.sidebar-tip__num {
    flex-shrink:      0;
    width:            22px;
    height:           22px;
    border-radius:    50%;
    background:       var(--bg-s);
    color:            var(--acc-s);
    font-size:        var(--text-sm);
    font-weight:      600;
    display:          flex;
    align-items:      center;
    justify-content:  center;
    margin-top:       1px;
}

.sidebar-tip__body {
    flex:             1;
    min-width:        0;
}

.sidebar-tip__title {
    font-size:        var(--text-md);
    font-weight:      600;
    color:            var(--tx-p);
    line-height:      1.35;
    margin-bottom:    3px;
}

.sidebar-tip__text {
    font-size:        var(--text-sm);
    color:            var(--tx-s);
    line-height:      1.5;
    margin:           0;
}

.sidebar-tips__gear-intro {
    font-size:        var(--text-sm);
    color:            var(--tx-t);
    line-height:      1.5;
    margin:           18px 0 0;
    padding-top:      14px;
    border-top:       0.5px solid var(--bd-t);
    font-style:       italic;
}

.gear-teaser {
    display:          flex;
    align-items:      center;
    justify-content:  space-between;
    width:            100%;
    background:       none;
    border:           none;
    border-bottom:    0.5px solid var(--bd-t);
    padding:          16px 0 14px;
    cursor:           pointer;
    text-align:       left;
    gap:              8px;
}

.gear-teaser:hover .gear-teaser__heading { color: var(--acc-s); }

.gear-teaser__text { display: flex; flex-direction: column; gap: 2px; }

.gear-teaser__heading {
    font-size: var(--text-md);

    font-weight:      600;
    color:            var(--tx-p);
    line-height:      1.35;
    transition:       color 0.15s;
}

.gear-teaser__sub {
    font-size: var(--text-md);
    color:            var(--tx-t);
}

.gear-teaser__chevron {
    font-size: var(--text-md);
    color:            var(--tx-t);
    transition:       transform 0.22s;
    flex-shrink:      0;
}

.gear-teaser__chevron.is-open { transform: rotate(180deg); }

.gear-sidebar-body {
    display:          none;
    overflow:         hidden;
}

.gear-sidebar-body.is-open { display: block; }

.ad-placeholder {
    border:           0.5px dashed var(--bd-t);
    border-radius:    var(--r-md);
    padding:          12px 0;
    text-align:       center;
    margin:           12px 0;
}

.ad-placeholder__label {
    font-size: var(--text-sm);
    letter-spacing:   0.1em;
    text-transform:   uppercase;
    color:            var(--tx-t);
}

/* ── Group section ──────────────────────────────────────────────────
   Lazy-loaded section that compares multiple runners on a shared run.
   Hidden until app-group.js arrives. */
.group-section {
    margin-top:     45px;
    padding:        18px 18px 22px;
    border-radius:  var(--r-lg);
    border:         0.5px solid var(--bd-t);
    background:     var(--bg-p);
}
.group-section[hidden] { display: none; }

.group-section__header {
    display:        flex;
    align-items:    baseline;
    justify-content: space-between;
    gap:            12px;
    flex-wrap:      wrap;
    margin-bottom:  14px;
}
.group-section__header .section__label {
    margin:         0;
}
.group-section__date {
    font-size:      var(--text-sm);
    color:          var(--tx-t);
    font-family:    var(--font-mono);
}
.group-section__edit {
    display:        inline-flex;
    align-items:    center;
    gap:            6px;
    padding:        6px 12px;
    border:         0.5px solid var(--bd-t);
    border-radius:  var(--r-md);
    background:     transparent;
    color:          var(--tx-s);
    font-family:    var(--font-sans);
    font-size:      var(--text-sm);
    cursor:         pointer;
    transition:     background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.group-section__actions {
    margin-left:    auto;
    display:        flex;
    align-items:    center;
    gap:            14px;
    flex-wrap:      wrap;
}
.group-section__unload {
    font-size:      var(--text-sm);
}
.group-section__confirm {
    display:        flex;
    flex-direction: column;
    gap:            10px;
    padding:        12px 14px;
    margin:         8px 0 14px;
    background:     var(--danger-bg, rgba(192, 57, 43, 0.08));
    border:         0.5px solid var(--danger-bd, rgba(192, 57, 43, 0.3));
    border-radius:  var(--r-md);
}
.group-section__confirm-msg {
    margin:         0;
    font-size:      var(--text-sm);
    color:          var(--tx-p);
    line-height:    1.5;
}
.group-section__confirm-actions {
    display:        flex;
    gap:            8px;
    justify-content: flex-end;
    flex-wrap:      wrap;
}
.group-section__edit:hover {
    background:     var(--acc-bg);
    border-color:   var(--acc-bd);
    color:          var(--acc-s);
}
.group-section__edit-icon {
    font-size:      14px;
    line-height:    1;
}

.group-roster {
    display:        flex;
    flex-wrap:      wrap;
    gap:            6px;
    margin-bottom:  14px;
}
.group-chip {
    display:        inline-flex;
    align-items:    center;
    gap:            6px;
    padding:        3px 10px;
    border-radius:  20px;
    border:         1px solid var(--bd-t);
    font-size:      var(--text-sm);
    background:     transparent;
    white-space:    nowrap;
}
.group-chip__dot {
    display:        inline-block;
    width:          8px;
    height:         8px;
    border-radius:  50%;
    flex-shrink:    0;
}

.group-metric-switcher {
    display:        inline-flex;
    gap:            0;
    border:         0.5px solid var(--bd-t);
    border-radius:  var(--r-md);
    overflow:       hidden;
    margin-bottom:  14px;
}
.group-metric-btn {
    font-size:      var(--text-md);
    padding:        5px 14px;
    border:         none;
    border-right:   0.5px solid var(--bd-t);
    background:     transparent;
    color:          var(--tx-s);
    cursor:         pointer;
    font-family:    var(--font-sans);
    transition:     background 0.12s, color 0.12s;
}
.group-metric-btn:last-child { border-right: none; }
.group-metric-btn:hover     { background: var(--bg-s); color: var(--tx-p); }
.group-metric-btn.is-active {
    background:     var(--acc);
    color:          #fff;
    font-weight:    600;
}

.group-chart-wrap {
    position:       relative;
    height:         260px;
    margin-bottom:  16px;
}

.group-table {
    width:          100%;
    border-collapse: collapse;
    font-size:      var(--text-sm);
}
.group-table th,
.group-table td {
    padding:        8px 10px;
    text-align:     left;
    border-bottom:  0.5px solid var(--bd-t);
    white-space:    nowrap;
}
.group-table th {
    font-size:      11px;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color:          var(--tx-t);
    font-weight:    500;
}
.group-table tbody tr:last-child td { border-bottom: none; }
.group-table__rank {
    width:          36px;
    text-align:     center;
}
.group-table__mono {
    font-family:    var(--font-mono);
    color:          var(--tx-s);
}

@media (max-width: 600px) {
    .group-section { padding: 14px 12px 18px; margin-top: 30px; }
    .group-section__header { gap: 6px; margin-bottom: 12px; }
    .group-section__date { font-size: 12px; }
    .group-chart-wrap { height: 220px; margin-bottom: 12px; }
    .group-table { font-size: 12px; }
    .group-table th, .group-table td { padding: 6px 6px; }
    .group-metric-switcher {
        display:    flex;
        width:      100%;
        margin-bottom: 12px;
    }
    .group-metric-btn {
        flex:       1 1 0;
        padding:    8px 6px;
        font-size:  var(--text-sm);
    }
    .group-roster {
        gap:        4px;
        margin-bottom: 10px;
    }
    .group-chip {
        padding:    3px 8px;
        font-size:  12px;
    }
}

.rawdata-section {
    margin-top:    45px;
    border-radius: var(--r-lg);
    overflow:      hidden;
    border:        0.5px solid var(--bd-t);
    background:    var(--bg-p);
}

.rawdata-toggle {
    display:          flex;
    align-items:      center;
    gap:              10px;
    width:            100%;

    background:       transparent;
    border:           none;
    border-radius:    0;
    padding:          10px 14px;
    cursor:           pointer;
    text-align:       left;
    transition:       background 0.15s, border-color 0.15s;
}

.rawdata-toggle:hover {
    background:       var(--bg-t);
    border-color:     var(--bd-s);
}

.rawdata-toggle[aria-expanded="true"] {
    border-bottom: 0.5px solid var(--bd-t);
}

.rawdata-toggle__label {
    font-size: var(--text-md);
    letter-spacing:   0.14em;
    text-transform:   uppercase;
    color:            var(--tx-s);
}

.rawdata-toggle__count {
    font-size: var(--text-md);
    color:            var(--tx-t);
    font-family:      var(--font-mono);
}

.rawdata-toggle__filter-info {
    display:          inline-flex;
    align-items:      center;
    gap:              6px;
    font-size:        12px;
    color:            var(--tx-s);
    background:       var(--bg-s);
    border:           0.5px solid var(--bd-t);
    border-radius:    20px;
    padding:          2px 10px;
    line-height:      1.4;
    white-space:      nowrap;
    overflow:         hidden;
    text-overflow:    ellipsis;
    max-width:        100%;
}
.rawdata-toggle__filter-info[hidden] { display: none; }
.rawdata-toggle__filter-mode {
    color:            var(--tx-s);
}
.rawdata-toggle__filter-hidden {
    color:            var(--tx-t);
    font-style:       italic;
}

.rawdata-toggle__chevron {
    font-size: var(--text-md);
    color:            var(--tx-s);
    transition:       transform 0.22s;
    margin-left:      auto;
}

.rawdata-toggle__chevron.is-open { transform: rotate(180deg); }

.rawdata-body {
    display:          none;
}

.rawdata-body.is-open { display: block; }

.rawdata-hint {
    font-size: var(--text-md);
    color:            var(--tx-t);
    margin-bottom:    12px;
    font-style:       italic;
    padding:          6px 8px;
    background:       var(--bg-s);
    border-radius:    var(--r-sm);
    border-left:      2px solid var(--bd-t);
}

.rawdata-scroll {
    overflow-x:       auto;
    border:           0.5px solid var(--bd-t);
    border-radius:    var(--r-md);
}

.rawdata-table {
    width:            100%;
    border-collapse:  collapse;
    font-size: var(--text-md);
    min-width:        480px;
}

.rawdata-table th {
    font-size: var(--text-sm);
    letter-spacing:   0.1em;
    text-transform:   uppercase;
    color:            var(--tx-s);
    padding:          7px 12px;
    border-bottom:    0.5px solid var(--bd-t);
    font-weight:      400;
    text-align:       left;
    background:       var(--bg-s);
    white-space:      nowrap;
}

.rawdata-row td {
    padding:          8px 12px;
    border-bottom:    0.5px solid var(--bd-t);
    color:            var(--tx-p);
    vertical-align:   middle;
}

.rawdata-row:last-child td { border-bottom: none; }

.rawdata-row.is-editing td {
    background:       var(--acc-bg);
}

.rawdata-row {
    transition:       background 80ms ease;
}
.rawdata-row:hover .rd-cell {
    background:       var(--bg-s);
}
.rd-cell {
    padding:          8px 12px;
    border-bottom:    0.5px solid var(--bd-t);
    color:            var(--tx-p);
    vertical-align:   middle;
    font-size:        var(--text-md);
}
.rawdata-row:last-child .rd-cell { border-bottom: none; }
.rd-cell--date {
    font-family:      var(--font-mono);
    color:            var(--tx-t);
    font-size:        var(--text-sm);
    white-space:      nowrap;
}
.rd-cell--dist {
    font-family:      var(--font-mono);
    font-weight:      600;
    white-space:      nowrap;
}
.rd-cell--time {
    font-family:      var(--font-mono);
    color:            var(--tx-s);
    white-space:      nowrap;
}
.rd-cell--steps {
    color:            var(--tx-s);
    font-size:        var(--text-sm);
    white-space:      nowrap;
}
.rd-cell--notes {
    color:            var(--tx-t);
    font-size:        var(--text-sm);
    overflow:         hidden;
    text-overflow:    ellipsis;
    white-space:      nowrap;
    max-width:        220px;
}
.rd-cell--actions {
    text-align:       right;
    white-space:      nowrap;
}
.rd-cell--actions .rd-btn {
    margin-left:      4px;
}

.rawdata-row--card .rd-card-cell {
    padding:          0;
    border-bottom:    0.5px solid var(--bd-t);
}
.rawdata-row--card:last-child .rd-card-cell { border-bottom: none; }

.rd-card {
    display:          grid;
    grid-template-columns: 1fr auto;
    grid-template-rows:    auto auto;
    gap:              2px 12px;
    padding:          10px 12px;
    align-items:      center;
}
.rd-card__main {
    display:          flex;
    align-items:      baseline;
    gap:              10px;
    flex-wrap:        wrap;
    grid-column:      1;
    grid-row:         1;
}
.rd-card__notes {
    font-size:        var(--text-sm);
    color:            var(--tx-t);
    grid-column:      1;
    grid-row:         2;
    padding-top:      2px;
    overflow:         hidden;
    text-overflow:    ellipsis;
    white-space:      nowrap;
    max-width:        300px;
}
.rd-card__actions {
    grid-column:      2;
    grid-row:         1 / 3;
    display:          flex;
    gap:              4px;
    align-items:      center;
    flex-shrink:      0;
}
.rd-card__date {
    font-size:        var(--text-sm);
    color:            var(--tx-t);
    font-family:      var(--font-mono);
    flex-shrink:      0;
}
.rd-card__dist {
    font-size:        var(--text-md);
    font-family:      var(--font-mono);
    color:            var(--tx-p);
    font-weight:      600;
    flex-shrink:      0;
}
.rd-card__time {
    font-size:        var(--text-md);
    font-family:      var(--font-mono);
    color:            var(--tx-s);
    flex-shrink:      0;
}
.rd-card__steps {
    font-size:        var(--text-sm);
    color:            var(--tx-t);
    flex-shrink:      0;
}

@media (max-width: 600px) {
    .rd-card {
        grid-template-columns: 1fr auto;
        padding:          9px 10px;
        gap:              3px 8px;
    }
    .rd-card__main {
        gap:              6px;
        flex-wrap:        wrap;
    }
    .rd-card__dist { font-size: var(--text-lg); }
    .rd-card__notes { max-width: 200px; }

    .rawdata-scroll:has(.rawdata-row--card) {
        overflow-x:       visible;
    }
    .rawdata-table:has(.rawdata-row--card) {
        min-width:        0;
    }
}

.rd-cell { cursor: pointer; }
.rd-cell:hover { color: var(--acc-s); }

.rd-notes {
    max-width:        180px;
    overflow:         hidden;
    text-overflow:    ellipsis;
    white-space:      nowrap;
}

.rd-actions {
    white-space:      nowrap;
    text-align:       right;
}

.rd-btn {
    font-size: var(--text-sm);
    letter-spacing:   0.06em;
    padding:          3px 8px;
    border-radius:    4px;
    cursor:           pointer;
    background:       transparent;
    font-family:      var(--font-sans);
    border:           0.5px solid var(--bd-t);
    color:            var(--tx-s);
    margin-left:      4px;
    transition:       all 0.15s;
}

.rd-btn:hover { border-color: var(--bd-s); color: var(--tx-p); }
.rd-btn:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }

.rd-save {
    background:       var(--tx-p);
    color:            var(--bg-p);
    border-color:     var(--tx-p);
}

.rd-save:hover { opacity: 0.85; }

.rd-del {
    color:            var(--danger-tx, #A32D2D);
    border-color:     var(--danger-bd, #A32D2D);
}

.rd-del:hover { background: color-mix(in srgb, var(--danger-tx) 12%, transparent); }

.rawdata-edit-row td {
    padding:          12px;
    background:       var(--bg-s);
    border-top:       2px solid var(--acc-bd);
    border-bottom:    0.5px solid var(--bd-t);
}

.rd-edit-form { }

.rd-edit-grid {
    display:          grid;
    grid-template-columns: repeat(4, 1fr);
    gap:              10px;
    margin-bottom:    10px;
}

@media (max-width: 640px) {
    .rd-edit-grid { grid-template-columns: 1fr 1fr; }
}

.rd-edit-field { display: flex; flex-direction: column; gap: 4px; }

.rd-edit-lbl {
    font-size: var(--text-sm);
    letter-spacing:   0.1em;
    text-transform:   uppercase;
    color:            var(--tx-s);
}

.rd-edit-inp {
    border:           0.5px solid var(--bd-t);
    border-radius:    5px;
    padding:          6px 9px;
    background:       var(--bg-p);
    font-family:      var(--font-mono);
    font-size: var(--text-md);
    color:            var(--tx-p);
    outline:          none;
    width:            100%;
    transition:       border-color 0.15s;
}

.rd-edit-inp:focus { border-color: var(--acc); }
.rd-edit-inp::placeholder { color: var(--bd-s); font-size: var(--text-sm); font-style: italic; }

.rd-edit-actions {
    display:          flex;
    gap:              8px;
    margin-top:       10px;
}

.file-bar {
    background:       var(--bg-s);
    border:           0.5px solid var(--bd-t);
    border-radius:    var(--r-lg);
    padding:          12px 16px;
    margin-bottom:    18px;
}

.file-bar__state {
    display:          flex;
    align-items:      center;
    justify-content:  space-between;
    flex-wrap:        wrap;
    gap:              10px;
}

.file-bar__label {
    font-size: var(--text-md);
    color:            var(--tx-t);
}

.file-bar__loaded {
    display:          flex;
    align-items:      center;
    gap:              8px;
}

.file-bar__filename {
    font-size: var(--text-md);
    color:            var(--tx-p);
    font-family:      var(--font-mono);
}

.file-bar__actions {
    display:          flex;
    gap:              6px;
    flex-wrap:        wrap;
    align-items:      center;
}

.pr-header {
    display:          flex;
    align-items:      center;
    justify-content:  space-between;
    flex-wrap:        wrap;
    gap:              10px;
    margin-bottom:    12px;
}

.pr-tabs {
    display:          flex;
    gap:              0;
    border:           0.5px solid var(--bd-t);
    border-radius:    var(--r-md);
    overflow:         hidden;
}

.pr-tab {
    font-size: var(--text-md);
    padding:          5px 13px;
    border:           none;
    border-right:     0.5px solid var(--bd-t);
    background:       transparent;
    color:            var(--tx-s);
    cursor:           pointer;
    font-family:      var(--font-sans);
    transition:       all 0.15s;
    white-space:      nowrap;
}

.pr-tab:last-child  { border-right: none; }
.pr-tab.is-active   { background: var(--tx-p); color: var(--bg-p); }

.pr-empty {
    color:            var(--tx-t);
    font-size: var(--text-md);
    padding:          14px 0;
    text-align:       center;
}

.comp-badge {
    display:          inline-block;
    font-size: var(--text-sm);
    padding:          2px 6px;
    border-radius:    var(--r-sm);
    background:       var(--acc-bg);
    color:            var(--acc-s);
    border:           0.5px solid var(--acc-bd);
    margin-left:      6px;
    vertical-align:   middle;
    white-space:      nowrap;
    font-family:      var(--font-sans);
    letter-spacing:   0.04em;
}

.zone-eyebrow {
    font-size: var(--text-sm);
    letter-spacing:0.20em;
    text-transform:uppercase;
    color:         var(--acc-s);
    margin-bottom: 8px;
    display:       flex;
    align-items:   center;
    gap:           10px;
}

.zone-eyebrow::before {
    content:       '';
    display:       inline-block;
    width:         22px;
    height:        1.5px;
    background:    var(--acc);
    flex-shrink:   0;
}

.zone-basic {
    background:    var(--bg-p);
}

.zone-basic__header {
    padding:       20px 20px 0;
}

.zone-basic__sub {
    font-size: var(--text-md);
    color:         var(--tx-t);
    line-height:   1.6;
    margin:        0 0 0 32px;
    max-width:     520px;
}

.zone-divider {
    background:    var(--bg-s);
    border-top:    1.5px solid var(--bd-t);
    border-bottom: none;           
    padding:       28px 20px 24px;
}

/* Collapsible "more details" block under each zone tagline. Closed by
   default — keeps the calculator above the fold while the long-form copy
   remains in the DOM for crawlers and curious users. Aligned to match
   the tagline's indent and width exactly so it feels part of the same
   block, not a competing UI card. */
.zone-details {
    margin:        6px 0 0 32px;
    max-width:     520px;
}
.zone-details__summary {
    cursor:        pointer;
    display:       inline-flex;
    align-items:   center;
    gap:           6px;
    color:         var(--acc-s);
    font-size:     var(--text-sm);
    font-weight:   500;
    line-height:   1.5;
    padding:       2px 0;
    list-style:    none;
    transition:    color 120ms ease;
    -webkit-user-select: none;
    user-select:   none;
}
.zone-details__summary::-webkit-details-marker { display: none; }
.zone-details__summary::before {
    content:       "+";
    display:       inline-block;
    width:         12px;
    text-align:    center;
    font-family:   var(--font-mono);
    color:         var(--acc-s);
    font-weight:   400;
}
.zone-details[open] .zone-details__summary::before { content: "−"; }
.zone-details__summary:hover { color: var(--acc); }
.zone-details__summary-text {
    border-bottom: 1px dotted var(--acc-bd);
    padding-bottom: 1px;
    transition:    border-color 120ms ease;
}
.zone-details__summary:hover .zone-details__summary-text {
    border-bottom-color: var(--acc);
}

/* Body: prose treatment, not a card. A thin accent rule on the left
   ties it to the eyebrow line above without creating a competing
   bounded box. */
.zone-details__body {
    margin-top:    10px;
    padding:       2px 0 2px 14px;
    border-left:   2px solid var(--acc-bd);
    font-size:     var(--text-sm);
    line-height:   1.65;
    color:         var(--tx-s);
    max-width:     520px;
}
.zone-details__body p {
    margin:        0 0 8px;
}
.zone-details__body p:last-child { margin-bottom: 0; }
.zone-details__body strong {
    color:         var(--tx-p);
    font-weight:   600;
}

@media (max-width: 600px) {
    .zone-details,
    .zone-details__body {
        max-width: none;
    }
}

.section--extended {
    background:    var(--bg-s);
    border-bottom: 1.5px solid var(--bd-t);

    padding-bottom: 40px;
}

.zone-divider__inner {
    display:       grid;
    grid-template-columns: 1fr 1fr;
    gap:           32px;
    align-items:   stretch;
}

@media (max-width: 800px) {
    .zone-divider__inner { grid-template-columns: 1fr; }
}

#s-tracker-body.is-drop-target,
#s-tracker.is-drop-target {
    outline: 2px dashed var(--acc);
    outline-offset: -8px;
}

.zone-divider__left {
    display:       flex;
    flex-direction:column;
    justify-content:space-between;
    gap:           20px;
}

.zone-divider__desc {
    font-size: var(--text-lg);
    color:         var(--tx-s);
    line-height:   1.75;
    margin:        0;
}

.zone-divider__ad { margin-top: auto; }

.file-gateway {
    background:    var(--bg-p);
    border:        0.5px solid var(--bd-t);
    border-radius: var(--r-lg);
    padding:       20px;
}

body[data-storage-mode="browser"] .gateway__section--csv-only,
body[data-storage-mode="browser"] .storage-section--csv-only,
body[data-storage-mode="csv"]     .gateway__section--browser-only,
body[data-storage-mode="csv"]     .storage-section--browser-only {
    display: none;
}

body[data-storage-mode="browser"] .gateway__secondary {
    display: none;
}

body[data-storage-mode="csv"] #gateway-browser-panel {
    display: none;
}

.storage-section__note {
    font-size:      var(--text-sm);
    color:          var(--tx-t);
    margin:         8px 0 4px;
    line-height:    1.5;
}

.storage-switch {
    display:        inline-flex;
    align-items:    center;
    gap:            8px;
    cursor:         pointer;
    user-select:    none;
}
.storage-switch__input {

    position:       absolute;
    opacity:        0;
    pointer-events: none;
    width:          0;
    height:         0;
}
.storage-switch__track {
    position:       relative;
    width:          36px;
    height:         20px;
    background:     var(--bg-s);
    border:         1px solid var(--bd-s);
    border-radius:  10px;
    transition:     background 120ms ease;
    flex-shrink:    0;
}
.storage-switch__thumb {
    position:       absolute;
    top:            1px;
    left:           1px;
    width:          16px;
    height:         16px;
    background:     var(--tx-s);
    border-radius:  50%;
    transition:     transform 140ms ease, background 120ms ease;
}
.storage-switch__input:checked + .storage-switch__track {
    background:     var(--acc);
    border-color:   var(--acc);
}
.storage-switch__input:checked + .storage-switch__track .storage-switch__thumb {
    transform:      translateX(16px);
    background:     #fff;
}
.storage-switch__input:focus-visible + .storage-switch__track {
    outline:        2px solid var(--acc);
    outline-offset: 2px;
}
.storage-switch__lbl {
    font-size:      11px;
    color:          var(--tx-s);
    transition:     color 120ms ease, font-weight 120ms ease;
}

.storage-switch:has(.storage-switch__input:not(:checked)) .storage-switch__lbl--off,
.storage-switch:has(.storage-switch__input:checked)       .storage-switch__lbl--on {
    color:          var(--tx-p);
    font-weight:    600;
}

.settings-storage-usage {
    display:        flex;
    flex-direction: column;
    gap:            2px;
    text-align:     right;
}
.settings-storage-usage__main {
    font-size:      var(--text-sm);
    color:          var(--tx-p);
    font-variant-numeric: tabular-nums;
}
.settings-storage-usage__sub {
    font-size:      10px;
    color:          var(--tx-t);
    line-height:    1.3;
    max-width:      180px;
}

.settings-storage-status {
    display:        inline-flex;
    align-items:    center;
    gap:            8px;
    flex-wrap:      wrap;
    justify-content: flex-end;
}
.settings-storage-status__badge {
    font-size:      11px;
    color:          var(--tx-s);
    background:     var(--bg-s);
    border:         1px solid var(--bd-s);
    border-radius:  10px;
    padding:        2px 8px;
    white-space:    nowrap;
}
.settings-storage-status__badge.is-empty {
    color:          var(--tx-t);
    font-style:     italic;
}

.settings-link {
    background:     transparent;
    border:         none;
    color:          var(--acc-s);
    cursor:         pointer;
    font-size:      var(--text-sm);
    padding:        0;
    text-decoration: underline;
}
.settings-link:hover {
    color:          var(--acc);
}

.settings-link--danger {
    color:          var(--danger, #c0392b);
    opacity:        0.85;
}
.settings-link--danger:hover {
    color:          var(--danger, #c0392b);
    opacity:        1;
}

.settings-checkbox {
    display:        flex;
    gap:            10px;
    align-items:    flex-start;
    cursor:         pointer;
    user-select:    none;
}
.settings-checkbox input[type="checkbox"] {
    margin-top:     3px;
    cursor:         pointer;
}
.settings-checkbox__label {
    display:        flex;
    flex-direction: column;
    gap:            2px;
}
.settings-checkbox__title {
    font-size:      var(--text-sm);
    color:          var(--tx-p);
}
.settings-checkbox__sub {
    font-size:      11px;
    color:          var(--tx-t);
    line-height:    1.4;
}

body[data-storage-mode="csv"] .settings-row--autosave {
    display:        none;
}

body[data-storage-mode="csv"] #settings-group-storage .storage-card__warning {
    display:        none;
}

#settings-group-storage .storage-card__warning {
    margin-top:     12px;
    padding:        10px 12px;
    font-size:      11px;
}
#settings-group-storage .storage-warning-body {
    font-size:      11px;
    line-height:    1.45;
}

#settings-group-storage .storage-toast {
    margin-top:     8px;
}

.file-gateway__title {
    font-size: var(--text-lg);
    color:         var(--tx-p);
    margin-bottom: 6px;
    font-weight:   500;
}

.file-gateway__desc {
    font-size: var(--text-md);
    color:         var(--tx-s);
    line-height:   1.65;
    margin-bottom: 18px;
}

.file-gateway__steps {
    display:       flex;
    flex-direction:column;
    gap:           10px;
    margin-bottom: 12px;
}

.file-gateway__step {
    display:       grid;
    grid-template-columns: 18px 1fr auto;
    align-items:   center;
    gap:           10px;
    padding:       9px 12px;
    border:        0.5px solid var(--bd-t);
    border-radius: var(--r-md);
    background:    var(--bg-s);
    transition:    border-color 0.15s;
}

.file-gateway__step:hover { border-color: var(--bd-s); }

.file-gateway__step-num {
    font-family:   var(--font-mono);
    font-size: var(--text-sm);
    color:         var(--acc-s);
    background:    var(--acc-bg);
    border-radius: 50%;
    width:         18px;
    height:        18px;
    display:       flex;
    align-items:   center;
    justify-content:center;
    flex-shrink:   0;
}

.file-gateway__step-text {
    font-size: var(--text-md);
    color:         var(--tx-s);
    line-height:   1.4;
}

.file-gateway__step .btn {
    font-size: var(--text-sm);
    padding:       5px 12px;
    flex-shrink:   0;
    white-space:   nowrap;
}

.file-gateway__step .btn:disabled {
    opacity:       0.4;
    cursor:        default;
}

.file-gateway__drop-hint {
    font-size: var(--text-sm);
    color:         var(--tx-t);
    text-align:    center;
    padding:       6px 0 0;
    border-top:    0.5px dashed var(--bd-t);
}

.file-gateway__loaded-row {
    display:       flex;
    align-items:   center;
    justify-content:space-between;
    flex-wrap:     wrap;
    gap:           12px;
}

.file-gateway__loaded-info {
    display:       flex;
    align-items:   center;
    gap:           10px;
}

.file-gateway__loaded-name {
    font-size: var(--text-lg);
    color:         var(--tx-p);
    font-family:   var(--font-mono);
}

.file-gateway__loaded-sub {
    font-size: var(--text-md);
    color:         var(--tx-s);
    margin-top:    2px;
}

.file-gateway__loaded-actions {
    display:       flex;
    gap:           7px;
    flex-wrap:     wrap;
}

@media (max-width: 700px) {
    .zone-divider__inner {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .zone-divider__left {
        flex-direction: column;
        gap: 16px;
    }
    .zone-divider__ad { margin-top: 0; }
}

@media (max-width: 480px) {
    .file-gateway__step {
        grid-template-columns: 18px 1fr;
    }
    .file-gateway__step .btn {
        grid-column: 2;
        justify-self: start;
    }
}

.file-gateway__storage {
    margin-top:    12px;
}
.file-gateway__storage:empty,
.file-gateway__storage:has(.storage-card__warning[style*="display:none"]) {

    margin-top:    0;
}

.gw-storage-cluster {
    margin-top:    14px;
    padding-top:   10px;
    border-top:    0.5px solid var(--bd-t);
    display:       flex;
    flex-direction:column;
    gap:           8px;
}
.gw-storage-cluster__label {
    font-size:     11px;
    text-transform:uppercase;
    letter-spacing:0.08em;
    font-weight:   600;
    color:         var(--tx-t);
}
.gw-storage-cluster__actions {
    display:       flex;
    flex-wrap:     wrap;
    gap:           8px;
    align-items:   center;
}

.gw-storage-cluster--browser .gw-storage-cluster__label {
    display:       inline;
    margin-right:  8px;
}

.gw-browser-panel__badge {
    display:           inline-block;
    font-size:         11px;
    padding:           2px 8px;
    border-radius:     20px;
    background:        var(--info-bg);
    color:             var(--info-tx);
    font-family:       var(--font-mono);
    margin-left:       6px;
    vertical-align:    middle;
}
.gw-browser-panel__badge.is-empty {
    background:        transparent;
    color:             var(--tx-t);
    border:            0.5px solid var(--bd-t);
}

.gw-browser-panel {
    margin-top:    14px;
    padding:       12px 14px;
    border:        0.5px solid var(--bd-t);
    border-radius: var(--r-md);
    background:    var(--bg-s);
    display:       flex;
    flex-direction:column;
    gap:           10px;
}
.gw-browser-panel__head {
    display:       flex;
    align-items:   center;
    gap:           4px;
}
.gw-browser-panel__label {
    font-size:     11px;
    text-transform:uppercase;
    letter-spacing:0.08em;
    font-weight:   600;
    color:         var(--tx-s);
}
.gw-browser-panel__actions {
    display:       flex;
    flex-wrap:     wrap;
    gap:           8px;
}
.gw-browser-panel__btn--small {

    padding:       4px 10px !important;
    font-size:     11px !important;
}

.add-run-modal {
    position:       fixed;
    inset:          0;
    z-index:        1000;
    display:        flex;
    align-items:    center;
    justify-content: center;
    padding:        24px;
}
.add-run-modal__backdrop {
    position:       absolute;
    inset:          0;
    background:     rgba(0, 0, 0, 0.45);
}
.add-run-modal__dialog {
    position:       relative;
    z-index:        1;
    max-width:      720px;
    width:          100%;
    max-height:     calc(100vh - 48px);
    overflow-y:     auto;

    margin-top:     0;

    box-shadow:     0 20px 60px rgba(0, 0, 0, 0.25),
                    0 0 0 0.5px var(--bd-t);
}
.add-run-modal__topbar {
    display:        flex;
    align-items:    center;
    justify-content:space-between;
    padding:        12px 16px;
    border-bottom:  0.5px solid var(--bd-t);
}
.add-run-modal__title {
    font-size:      var(--text-md);
    font-weight:    600;
    color:          var(--tx-p);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.add-run-modal__close {
    background:     transparent;
    border:         none;
    color:          var(--tx-s);
    font-size:      18px;
    line-height:    1;
    cursor:         pointer;
    padding:        4px 8px;
    border-radius:  var(--r-sm);
    transition:     background 80ms ease, color 80ms ease;
}
.add-run-modal__close:hover {
    background:     var(--bg-s);
    color:          var(--tx-p);
}

.add-run-modal__load {
    padding:        12px 16px;
    background:     var(--bg-s);
    border-bottom:  0.5px solid var(--bd-t);
    display:        flex;
    flex-direction: column;
    gap:            8px;
}
.add-run-modal__load-msg {
    margin:         0;
    font-size:      var(--text-sm);
    color:          var(--tx-s);
    line-height:    1.4;
}
.add-run-modal__load-actions {
    display:        flex;
    gap:            8px;
    flex-wrap:      wrap;
}
.add-run-modal__load-btn {

    flex:           0 1 auto;
}

.add-run-modal__load-status {
    margin-top:     6px;
    padding:        8px 12px;
    border-radius:  var(--r-sm);
    font-size:      var(--text-sm);
    line-height:    1.4;
}
.add-run-modal__load-status.is-success {
    background:     rgba(46, 160, 67, 0.10);
    color:          #2ea043;
    border:         0.5px solid rgba(46, 160, 67, 0.3);
}
.add-run-modal__load-status.is-error {
    background:     rgba(192, 57, 43, 0.10);
    color:          #c0392b;
    border:         0.5px solid rgba(192, 57, 43, 0.3);
}

/* ── Group mode: toggle row in the modal ─────────────────────────── */
.add-run-modal__group-row {
    display:        flex;
    align-items:    center;
    gap:            10px;
    padding:        10px 16px;
    background:     var(--bg-s);
    border-bottom:  0.5px solid var(--bd-t);
    flex-wrap:      wrap;
}
.add-run-modal__group-label {
    font-size:        var(--text-sm);
    color:            var(--tx-t);
    letter-spacing:   0.07em;
    text-transform:   uppercase;
    flex-shrink:      0;
}
body[data-group-mode="group"] #add-run-modal-load { display: none; }

.add-run-modal__group-switcher {
    display:        inline-flex;
    gap:            4px;
}

@media (max-width: 600px) {
    .add-run-modal {
        padding:        0;
        align-items:    stretch;
    }
    .add-run-modal__dialog {
        max-width:      none;
        max-height:     none;
        height:         100vh;
        height:         100dvh;
        border-radius:  0;
        box-shadow:     none;
    }
    .add-run-modal__topbar {
        padding:        10px 12px;
        position:       sticky;
        top:            0;
        background:     var(--bg-p);
        z-index:        2;
    }
    .add-run-modal__close {
        font-size:      22px;
        padding:        6px 10px;
        min-width:      36px;
        min-height:     36px;
    }
    .add-run-modal__group-row {
        padding:        8px 12px;
        gap:            8px;
    }
    .add-run-modal__load {
        padding:        10px 12px;
    }
    .add-run-form--single,
    .add-run-form--group {
        padding:        12px;
    }
    .add-run-group__iotools {
        gap:            6px;
    }
    .add-run-group__iotools .rd-btn {
        flex:           1 1 calc(50% - 4px);
        text-align:     center;
        padding:        8px 6px;
        font-size:      var(--text-sm);
    }
    .add-run-group__footer {
        margin-top:     14px;
        padding-top:    12px;
    }
    .add-run-group__done {
        width:          100%;
        min-height:     44px;
    }
}

.calc-fab {
    position:       fixed;
    bottom:         24px;
    right:          24px;
    z-index:        500;
    display:        inline-flex;
    align-items:    center;
    gap:            8px;
    padding:        14px 22px;
    background:     var(--acc);
    color:          #fff;
    border:         none;
    border-radius:  9999px;
    font-size:      var(--text-md);
    font-weight:    600;
    letter-spacing: 0.04em;
    cursor:         pointer;
    transition:     background 100ms ease, transform 80ms ease, box-shadow 100ms ease;
    box-shadow:     0 4px 12px rgba(0, 0, 0, 0.18),
                    0 2px 4px rgba(0, 0, 0, 0.12);

    bottom:         calc(24px + env(safe-area-inset-bottom, 0px));
}
.calc-fab:hover {
    background:     var(--acc-s, var(--acc));
    box-shadow:     0 6px 16px rgba(0, 0, 0, 0.22),
                    0 2px 6px rgba(0, 0, 0, 0.14);
}
.calc-fab:active {
    transform:      scale(0.96);
}
.calc-fab__icon {
    font-size:      18px;
    line-height:    1;

    margin-top:     -1px;
}
.calc-fab__label {
    font-size:      var(--text-md);
}

@media (max-width: 600px) {
    .calc-fab {
        padding:    0;
        width:      56px;
        height:     56px;
        justify-content: center;
        bottom:     calc(20px + env(safe-area-inset-bottom, 0px));
        right:      20px;
    }
    .calc-fab__icon {
        font-size:  24px;
        margin-top: 0;
    }
    .calc-fab__label {

        position:   absolute;
        width:      1px;
        height:     1px;
        padding:    0;
        margin:     -1px;
        overflow:   hidden;
        clip:       rect(0, 0, 0, 0);
        white-space: nowrap;
        border:     0;
    }
}

.add-run-panel {
    margin-top:    28px;
    border:        0.5px solid var(--bd-t);
    border-radius: var(--r-lg);
    overflow:      visible;
    background:    var(--bg-p);  
}

.add-run-panel__header {
    padding:       16px 20px 0;
    display:       flex;
    align-items:   center;
    justify-content:space-between;
    flex-wrap:     wrap;
    gap:           10px;
}

.add-run-panel__hint {
    font-size: var(--text-md);
    color:         var(--tx-t);
    font-style:    italic;
    transition:    opacity 0.3s;
}

.add-run-mode-row {
    padding:       10px 20px 0;
    display:       flex;
    justify-content: flex-start;
}

.tracker-filter-switcher {
    display:        flex;
    border:         0.5px solid var(--bd-t);
    border-radius:  var(--r-md);
    overflow:       hidden;
    flex-shrink:    0;
}
.tracker-filter-switcher .calc-mode-btn + .calc-mode-btn {
    border-left:    0.5px solid var(--bd-t);
}

.add-run-row--main {
    display:       grid;
    grid-template-columns: minmax(90px, 1fr) 1fr 1fr;
    gap:           10px;
    padding:       14px 20px 8px;
    align-items:   end;
}

.add-run-row--secondary {
    display:       grid;
    grid-template-columns: 200px 1fr 110px;
    gap:           10px;
    padding:       0 20px 18px;
    align-items:   end;  
}

/* ── In-modal group form (built by app-group.js) ──────────────────── */
.add-run-form--group {
    padding:       6px 20px 18px;
}
.add-run-form--single[hidden],
.add-run-form--group[hidden] { display: none; }

.add-run-group__defrow {
    display:        grid;
    grid-template-columns: 1fr 1fr auto;
    gap:            10px;
    align-items:    end;
    padding-bottom: 12px;
    margin-bottom:  12px;
    border-bottom:  0.5px dashed var(--bd-t);
}
.add-run-group__moderow {
    display:        inline-flex;
    gap:            4px;
}
.add-run-group__deftools {
    display:        flex;
    align-items:    flex-end;
}

.add-run-group__personrow {
    display:        grid;
    grid-template-columns: 1.4fr 1fr 0.7fr auto;
    gap:            10px;
    align-items:    end;
    margin-bottom:  10px;
}

.add-run-field--gnotes {
    margin-bottom:  12px;
}

.add-run-group__roster {
    margin-top:     6px;
    padding:        12px 14px;
    background:     var(--bg-s);
    border-radius:  var(--r-md);
    border:         0.5px solid var(--bd-t);
}
.add-run-group__roster-empty {
    font-size:      var(--text-sm);
    color:          var(--tx-t);
    font-style:     italic;
    text-align:     center;
}
.add-run-group__roster-title {
    font-size:      11px;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color:          var(--tx-t);
    margin-bottom:  8px;
}
.add-run-group__roster-count {
    color:          var(--tx-t);
    opacity:        0.7;
}
.add-run-group__roster-list {
    list-style:     none;
    margin:         0;
    padding:        0;
    display:        flex;
    flex-direction: column;
    gap:            4px;
}
.add-run-group__roster-item {
    padding:        6px 8px;
    border-radius:  var(--r-sm);
    background:     var(--bg-p);
}
.add-run-group__roster-row--display {
    display:        grid;
    grid-template-columns: 28px 14px 1fr auto auto auto auto;
    gap:            10px;
    align-items:    center;
}
.add-run-group__roster-rank {
    font-size:      var(--text-sm);
    color:          var(--tx-t);
    text-align:     center;
}
.add-run-group__roster-name {
    font-size:      var(--text-md);
    color:          var(--tx-p);
    overflow:       hidden;
    text-overflow:  ellipsis;
    white-space:    nowrap;
}
.add-run-group__roster-time,
.add-run-group__roster-pace {
    font-family:    var(--font-mono);
    font-size:      var(--text-sm);
    color:          var(--tx-s);
    white-space:    nowrap;
}
.add-run-group__roster-pace {
    color:          var(--tx-t);
}
.add-run-group__roster-del,
.add-run-group__roster-edit {
    padding:        2px 8px;
    font-size:      var(--text-sm);
    cursor:         pointer;
}
.add-run-group__roster-edit:hover {
    color:          var(--acc-s);
    border-color:   var(--acc-bd);
}

.add-run-group__roster-row--edit {
    display:        flex;
    flex-direction: column;
    gap:            8px;
    padding:        8px 4px 4px;
}
.add-run-group__edit-grid {
    display:        grid;
    grid-template-columns: 1.4fr 0.9fr 0.7fr 1.6fr;
    gap:            6px;
}
.add-run-group__edit-grid .add-run-input {
    font-size:      var(--text-sm);
    padding:        6px 8px;
}
.add-run-group__edit-actions {
    display:        flex;
    gap:            8px;
    justify-content: flex-end;
}

.add-run-group__iotools {
    display:        flex;
    flex-wrap:      wrap;
    gap:            8px;
    margin-bottom:  14px;
    padding-bottom: 12px;
    border-bottom:  0.5px dashed var(--bd-t);
}
.add-run-group__iotools .rd-btn {
    cursor:         pointer;
}

.add-run-group__footer {
    display:        flex;
    justify-content: flex-end;
    margin-top:     18px;
    padding-top:    14px;
    border-top:     0.5px solid var(--bd-t);
}
.add-run-group__done {
    min-width:      120px;
}

@media (max-width: 680px) {
    .add-run-group__defrow {
        grid-template-columns: 1fr 1fr;
    }
    .add-run-group__deftools {
        grid-column: 1 / -1;
        justify-self: flex-end;
    }
    .add-run-group__personrow {
        grid-template-columns: 1fr 1fr;
    }
    .add-run-field--gsubmit {
        grid-column: 1 / -1;
    }
    .add-run-group__roster-row--display {
        grid-template-columns: 24px 12px 1fr auto auto auto;
    }
    .add-run-group__roster-pace {
        display: none;
    }
    .add-run-group__edit-grid {
        grid-template-columns: 1fr 1fr;
    }
    .add-run-group__edit-grid .add-run-group__edit-notes {
        grid-column: 1 / -1;
    }
}

@media (max-width: 420px) {
    .add-run-group__personrow {
        grid-template-columns: 1fr;
    }
}

.add-run-field {
    display:       flex;
    flex-direction:column;
    gap:           4px;
    min-width:     0;
}

.add-run-label {
    font-size: var(--text-sm);
    letter-spacing:0.10em;
    text-transform:uppercase;
    color:         var(--tx-s);
    white-space:   nowrap;
}

.add-run-input {
    border:        0.5px solid var(--bd-t);
    border-radius: var(--r-md);
    padding:       8px 10px;
    background:    var(--bg-p);
    font-family:   var(--font-mono);
    font-size: var(--text-lg);
    color:         var(--tx-p);
    outline:       none;
    width:         100%;
    transition:    border-color 0.15s, color 0.15s;
    height:        38px;
}

.add-run-input:focus     { border-color: var(--acc); }
.add-run-input::placeholder { color: var(--bd-s); font-size: var(--text-sm); font-style: italic; }
.add-run-input.is-example {
    color:         var(--acc-s);
    font-style:    italic;
    border-color:  var(--acc-bd);
}

.add-run-steps-wrap {
    display:       flex;
    flex-direction:column;
    gap:           3px;
}

.step-hint-inline {
    font-size: var(--text-sm);
    color:         var(--tx-t);
    font-family:   var(--font-mono);
    min-height:    14px;
    padding-left:  2px;
    line-height:   1.3;
}

.step-hint-inline.has-value { color: var(--acc-s); }
.step-hint-inline:not(:empty):not(.has-value) {
    color: var(--warning-tx, #854F0B);
}

.rawdata-row.is-sample td { color: var(--demo); opacity: 0.9; }

.sample-badge {
    display:          inline-flex;
    align-items:      center;
    gap:              4px;
    font-size: var(--text-sm);
    letter-spacing:   0.12em;
    text-transform:   uppercase;
    background:       var(--demo-bg);
    color:            var(--demo);
    border:           0.5px solid var(--demo-bd);
    border-radius:    20px;
    padding:          2px 8px;
    font-family:      var(--font-sans);
    vertical-align:   middle;
    white-space:      nowrap;
}

.sample-badge::before {
    content:  '◈';
    font-size: var(--text-sm);
}

@media (max-width: 680px) {
    .add-run-row--main      { grid-template-columns: 1fr 1fr 1fr; }
    .add-run-row--secondary { grid-template-columns: 1fr 1fr; }
    .add-run-row--secondary .add-run-field--submit {
        grid-column: 1 / -1;
        justify-self: stretch;
    }
}

@media (max-width: 420px) {
    .add-run-row--main      { grid-template-columns: 1fr; }
    .add-run-row--secondary { grid-template-columns: 1fr; }
}

.add-run-field--steps {
    justify-content:  flex-end;  
}
.add-run-steps-inp-wrap {
    position:         relative;

}
.add-run-steps-inp-wrap.hint-visible {
    margin-bottom:    22px;  
}

.step-warn-inline {
    font-size: var(--text-sm);
    color:            var(--tx-t);
    font-style:       italic;
    white-space:      nowrap;
}

.step-warn-inline.is-warn {
    color:            var(--warning-tx, #854F0B);
    font-style:       normal;
}

.zone-feature-list {
    list-style:       none;
    margin:           10px 0 14px;
    display:          flex;
    flex-direction:   column;
    gap:              6px;
}

.zone-feature-list li {
    font-size: var(--text-md);
    color:            var(--tx-s);
    line-height:      1.5;
    padding-left:     12px;
    position:         relative;
}

.zone-feature-list li::before {
    content:          '–';
    position:         absolute;
    left:             0;
    color:            var(--acc);
}

.zone-feature-list strong {
    color:            var(--tx-p);
    font-weight:      500;
}

.zone-demo-note {
    font-size: var(--text-md);
    color:            var(--tx-t);
    line-height:      1.6;
    border-top:       0.5px solid var(--bd-t);
    padding-top:      10px;
    margin-top:       4px;
}

.zone-demo-badge {
    display:          inline-block;
    font-size: var(--text-sm);
    letter-spacing:   0.12em;
    text-transform:   uppercase;
    background:       var(--acc-bg);
    color:            var(--acc-s);
    border:           0.5px solid var(--acc-bd);
    border-radius:    20px;
    padding:          2px 8px;
    margin-right:     6px;
    vertical-align:   middle;
    font-family:      var(--font-sans);
}

.step-inline-info {
    font-size:        var(--text-sm);
    font-family:      var(--font-mono);
    color:            var(--tx-t);
    white-space:      nowrap;
    overflow:         hidden;
    text-overflow:    ellipsis;
    border-radius:    10px;
    background:       transparent;

    position:         absolute;
    top:              calc(100% + 3px);
    left:             0;
    right:            0;

    max-height:       0;
    padding:          0 7px;
    opacity:          0;
    transition:       max-height 0.2s ease,
                      padding 0.2s ease,
                      opacity 0.2s ease,
                      background 0.15s,
                      color 0.15s;
    pointer-events:   none;
}
.step-inline-info:not(:empty) {
    max-height:       2em;
    padding:          2px 7px;
    opacity:          1;
    pointer-events:   auto;
}
.step-inline-info.is-valid {
    color:            var(--acc-s);
    background:       var(--acc-bg);
}
.step-inline-info.is-warn {
    color:            var(--warning-tx, #854F0B);
    background:       var(--warning-bg, #FEF3C7);
}

.file-gateway__step .btn,
.file-gateway__loaded-actions .btn,
.run-action-card .btn {
    max-width:        none;
    white-space:      nowrap; 
}

.sidebar-gear-foot .btn { max-width: none; white-space: normal; }

.add-run-nudge {
    font-size:        12px;
    font-family:      var(--font-sans);
    color:            #fff;
    background:       var(--acc);
    border:           0.5px solid var(--acc);
    border-radius:    var(--r-md);
    padding:          4px 11px;
    white-space:      nowrap;
    font-weight:      500;
    letter-spacing:   0.01em;
    transition:       all 0.2s;

    animation:        addRunNudgePulse 1.8s ease-in-out infinite;
}
.add-run-nudge:hover {
    background:       var(--acc-s, var(--acc));
    border-color:     var(--acc-s, var(--acc));
    cursor:           pointer;
}
@keyframes addRunNudgePulse {
    0%, 100% { transform: translateY(0);   }
    50%      { transform: translateY(-1.5px); }
}

.rawdata-body .rawdata-scroll {
    border:           none;
    border-radius:    0;
}

.rawdata-body .rawdata-hint {
    margin:           0;
    border-radius:    0;
    border-left:      none;
    border-bottom:    0.5px solid var(--bd-t);
}

.rawdata-filters {
    display:          flex;
    align-items:      center;
    gap:              12px;
    padding:          8px 14px;
    border-bottom:    0.5px solid var(--bd-t);
    flex-wrap:        wrap;
}

.rawdata-filter-group {
    display:          inline-flex;
    align-items:      center;
    gap:              6px;
    cursor:           pointer;
}
.rawdata-filter-label {
    font-size:        var(--text-sm);
    letter-spacing:   0.07em;
    text-transform:   uppercase;
    color:            var(--tx-s);
    font-weight:      500;
}

.rawdata-filter-sel {
    font-size: var(--text-sm);
    letter-spacing:   0.07em;
    text-transform:   uppercase;
    font-family:      var(--font-sans);
    color:            var(--tx-s);
    background:       transparent;
    border:           0.5px solid var(--bd-t);
    border-radius:    var(--r-sm);
    padding:          3px 8px;
    cursor:           pointer;
    outline:          none;
    transition:       border-color 0.15s, color 0.15s;
    appearance:       none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'%3E%3Cpath fill='%239e9d97' d='M0 0l4 5 4-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 7px center;
    padding-right:    22px;
}

.rawdata-filter-sel:focus { border-color: var(--acc); color: var(--tx-p); }

.rawdata-filter-count {
    font-size: var(--text-md);
    color:            var(--tx-t);
    font-family:      var(--font-mono);
    margin-left:      auto;
}

.zone-intro {
    font-size: var(--text-lg);
    color:         var(--tx-s);
    line-height:   1.7;
    margin:        6px 0 12px;
}

.gw-features {
    display:       flex;
    flex-direction:column;
    gap:           0;
    margin-top:    4px;
}

.gw-feature {
    display:       flex;
    flex-direction:column;
    gap:           2px;
    padding:       7px 0;
    border-bottom: 0.5px solid var(--bd-t);
}

.gw-feature:last-child { border-bottom: none; }

.gw-feature__name {
    font-size: var(--text-md);
    color:         var(--tx-p);
    font-weight:   500;
    display:       flex;
    align-items:   center;
    gap:           6px;
}

.gw-feature__name::before {
    content:       '✓';
    color:         var(--acc);
    font-weight:   600;
    font-size:     12px;
    flex-shrink:   0;
}

.gw-feature__desc {
    font-size: var(--text-sm);
    color:         var(--tx-t);
    line-height:   1.45;
    padding-left:  18px;
}

.gw-features--compact {
    display:        flex;
    flex-direction: column;
    gap:            4px;
    margin:         22px 0 0 32px;
    align-items:    flex-start;  
}
.gw-feature--compact {
    display:        flex;
    align-items:    center;
    padding:        2px 0;
    border-bottom:  none;
}

.gw-primary {
    display:       flex;
    align-items:   center;
    gap:           14px;
    padding:       14px 16px;
    background:    var(--acc-bg);
    border:        0.5px solid var(--acc-bd);
    border-radius: var(--r-md);
    margin-bottom: 16px;
}
.gw-primary__icon {
    font-size:     28px;
    line-height:   1;
    flex-shrink:   0;
    opacity:       0.85;
}
.gw-primary__body {
    flex:          1;
    min-width:     0;
}
.gw-primary__headline {
    font-size:     var(--text-md);
    color:         var(--tx-p);
    font-weight:   500;
    line-height:   1.3;

    white-space:   nowrap;
}
.gw-primary__sub {
    font-size:     var(--text-sm);
    color:         var(--tx-s);
    margin-top:    3px;
    line-height:   1.45;
}
.gw-primary__btn {
    flex-shrink:   0;
    white-space:   nowrap;
    font-size:     var(--text-sm);
    padding:       7px 16px;
    max-width:     none;
}

.gw-divider {
    display:       flex;
    align-items:   center;
    gap:           10px;
    margin:        14px 0;
    color:         var(--tx-t);
    font-size: var(--text-sm);
    letter-spacing:0.08em;
    text-transform:uppercase;
}

.gw-divider::before,
.gw-divider::after {
    content:       '';
    flex:          1;
    height:        0.5px;
    background:    var(--bd-t);
}

.gw-upload {
    display:       flex;
    align-items:   flex-start;
    justify-content:space-between;
    gap:           12px;
    margin-bottom: 10px;
}

.gw-upload__text {
    display:       flex;
    flex-direction:column;
    gap:           2px;
    font-size: var(--text-md);
}

.gw-upload__text strong { color: var(--tx-p); font-weight: 500; }
.gw-upload__text span   { color: var(--tx-t); font-size: var(--text-md); line-height: 1.45; }

.gw-upload__btn { flex-shrink: 0; white-space: nowrap; }

.gw-template {
    display:       flex;
    align-items:   center;
    gap:           8px;
    padding-top:   10px;
    border-top:    0.5px solid var(--bd-t);
    font-size: var(--text-md);
    color:         var(--tx-t);
}

.gw-template__btn {
    background:    none;
    border:        none;
    color:         var(--tx-t);
    font-size: var(--text-sm);
    cursor:        pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
    font-family:   var(--font-sans);
    padding:       0;
    transition:    color 0.15s;
}

.gw-template__btn:hover { color: var(--tx-p); }

.gw-memory {
    display:       flex;
    align-items:   flex-start;
    gap:           10px;
    margin-bottom: 12px;
}

.gw-memory__text { flex: 1; }

.gw-memory__title {
    font-size: var(--text-lg);
    color:         var(--tx-p);
    font-weight:   500;
    margin-bottom: 2px;
}

.gw-memory__sub {
    font-size: var(--text-md);
    color:         var(--warning-tx, #854F0B);
    line-height:   1.5;
}

.section--extended .chart-wrap,
.section--extended .pr-table,
.section--extended .rawdata-section {
    background:    var(--bg-p);
}

.section--extended .rawdata-scroll {
    background:    var(--bg-p);
}

input::placeholder,
textarea::placeholder {
    font-size:    var(--text-sm);
    font-style:   italic;
    color:        var(--bd-s);
    opacity:      1;   
}

#s-calc, #s-tracker, #s-predictor, #s-compare,
#s-records, #s-addrun, #s-chart, #s-allruns,
#s-tracker-body {
    scroll-margin-top: 64px;
}

.pr-rank-th {
    padding-left:  14px !important;
    padding-right: 6px  !important;
    width:         28px;
}

.pr-rank {
    font-size:     var(--text-md);
    text-align:    center;
    padding-left:  14px !important;
    padding-right: 6px !important;
    width:         28px;
    white-space:   nowrap;
}

.pr-table .comp-badge {
    margin-left:   8px;
    vertical-align: middle;
}

.btn-add-run-wrap {
    width:          100%;
    min-height:     38px;
    height:         auto;
    white-space:    normal;
    line-height:    1.3;
    padding-top:    8px;
    padding-bottom: 8px;
}

.add-run-label-row {
    display:       flex;
    align-items:   baseline;
    gap:           7px;
    margin-bottom: 4px;
}

.add-run-date-hint {
    font-size:     10px;
    color:         var(--tx-t);
    font-family:   var(--font-mono);
    letter-spacing:0.04em;
}

.tier-pill:focus-visible,
.cat-pill:focus-visible,
.season-pill:focus-visible,
.gear-drawer__close:focus-visible,
.gear-teaser:focus-visible,
.sidebar-gear-btn:focus-visible,
.gear-price-input:focus-visible,
.gear-price-clear:focus-visible,
.range-pill:focus-visible,
.btn-control:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }

.race-chip {
    display:          inline-flex;
    align-items:      center;
    gap:              5px;
    background:       var(--acc-bg);
    border:           0.5px solid var(--acc-bd);
    border-radius:    20px;
    padding:          3px 10px 3px 7px;
    font-family:      var(--font-sans);
    font-size:        var(--text-sm);
    color:            var(--tx-p);
    cursor:           pointer;
    transition:       background 0.15s, border-color 0.15s;
    white-space:      nowrap;
    max-width:        200px;
    position:         relative;
}
.race-chip:hover        { background: var(--acc-bd); }
.race-chip:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.race-chip__flag        { font-size: 13px; line-height: 1; flex-shrink: 0; }
.race-chip__name        { overflow: hidden; text-overflow: ellipsis; max-width: 90px; }
.race-chip__days        { color: var(--acc-s); font-family: var(--font-mono); font-size: var(--text-sm); flex-shrink: 0; }
.race-chip__count       {
    background:   var(--acc-bd);
    color:        var(--acc-s);
    font-size:    10px;
    font-family:  var(--font-mono);
    border-radius: 10px;
    padding:      1px 5px;
    flex-shrink:  0;
    line-height:  1.6;
}

.race-bubble {
    position:         fixed;
    z-index:          200;
    background:       var(--bg-p);
    border:           0.5px solid var(--bd-s);
    border-radius:    var(--r-md);
    box-shadow:       0 6px 20px rgba(0,0,0,0.13);
    padding:          10px 14px;
    min-width:        180px;
    max-width:        260px;
    pointer-events:   none;
    opacity:          0;
    transform:        translateY(-4px);
    transition:       opacity 0.15s, transform 0.15s;
}
.race-bubble.is-visible {
    opacity:          1;
    transform:        translateY(0);
}
.race-bubble::before {
    content:          '';
    position:         absolute;
    top:              -6px;
    left:             16px;
    width:            10px;
    height:           10px;
    background:       var(--bg-p);
    border-left:      0.5px solid var(--bd-s);
    border-top:       0.5px solid var(--bd-s);
    transform:        rotate(45deg);
}
.race-bubble__item {
    display:          flex;
    align-items:      baseline;
    justify-content:  space-between;
    gap:              10px;
    padding:          4px 0;
    border-bottom:    0.5px solid var(--bd-t);
}
.race-bubble__item:last-child { border-bottom: none; }
.race-bubble__name {
    font-size:        var(--text-sm);
    color:            var(--tx-p);
    font-weight:      500;
    overflow:         hidden;
    text-overflow:    ellipsis;
    white-space:      nowrap;
    flex:             1;
}
.race-bubble__days {
    font-size:        var(--text-sm);
    font-family:      var(--font-mono);
    color:            var(--acc-s);
    flex-shrink:      0;
}
.race-bubble__dist {
    font-size:        var(--text-sm);
    color:            var(--tx-t);
    flex-shrink:      0;
}

.btn-race-set {
    display:          inline-flex;
    align-items:      center;
    justify-content:  center;
    background:       transparent;
    border:           0.5px solid var(--bd-t);
    border-radius:    50%;
    width:            30px;
    height:           30px;
    font-size:        14px;
    cursor:           pointer;
    color:            var(--tx-s);
    transition:       border-color 0.15s, background 0.15s;
    flex-shrink:      0;
}
.btn-race-set:hover        { border-color: var(--acc-bd); background: var(--acc-bg); color: var(--tx-p); }
.btn-race-set:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }

.race-panel {
    position:         sticky;
    top:              53px;
    z-index:          99;
    background:       var(--bg-p);
    border-bottom:    1px solid var(--bd-t);
    box-shadow:       0 4px 16px rgba(0,0,0,0.07);
    overflow:         hidden;
    max-height:       0;
    transition:       max-height 0.32s cubic-bezier(0.4,0,0.2,1), padding 0.32s;
    padding:          0 20px;
}
.race-panel.is-open {
    max-height:       640px;
    padding:          16px 20px 20px;
}
.race-panel__inner { max-width: 860px; margin: 0 auto; }

.race-panel__head {
    display:        flex;
    align-items:    center;
    justify-content: space-between;
    margin-bottom:  14px;
}
.race-panel__title {
    font-size:      var(--text-sm);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color:          var(--tx-s);
    font-weight:    500;
}
.race-panel__close {
    background:     none;
    border:         none;
    cursor:         pointer;
    color:          var(--tx-t);
    font-size:      18px;
    line-height:    1;
    padding:        4px 6px;
    border-radius:  var(--r-sm);
    transition:     color 0.15s, background 0.15s;
    position:       relative;
    z-index:        2;
}
.race-panel__close:hover { color: var(--tx-p); background: var(--bg-t); }

.race-list {
    display:        flex;
    flex-direction: column;
    gap:            7px;
    margin-bottom:  12px;
}
.race-card {
    display:        grid;
    grid-template-columns: 52px 1fr auto;
    align-items:    center;
    gap:            12px;
    padding:        9px 12px;
    background:     var(--bg-s);
    border:         0.5px solid var(--bd-t);
    border-radius:  var(--r-md);
    transition:     border-color 0.15s;
}
.race-card--next {
    border-color:   var(--acc-bd);
    background:     var(--acc-bg);
}

.race-card__ring {
    position:       relative;
    width:          44px;
    height:         44px;
    flex-shrink:    0;
}
.race-card__ring svg       { width: 44px; height: 44px; transform: rotate(-90deg); }
.race-card__ring-bg        { fill: none; stroke: var(--bd-t); stroke-width: 3; }
.race-card__ring-fill      { fill: none; stroke: var(--acc); stroke-width: 3; stroke-linecap: round; transition: stroke-dashoffset 0.6s ease; }
.race-card__ring-text      { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.15; }
.race-card__ring-days      { font-family: var(--font-mono); font-size: 11px; font-weight: 600; color: var(--tx-p); }
.race-card__ring-label     { font-size: 8px; color: var(--tx-t); text-transform: uppercase; letter-spacing: 0.04em; }

.race-card__info           { min-width: 0; }
.race-card__name           { font-size: var(--text-md); color: var(--tx-p); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.race-card__meta           { display: flex; gap: 8px; margin-top: 2px; flex-wrap: wrap; }
.race-card__tag            { font-size: var(--text-sm); color: var(--tx-t); }
.race-card__tag--accent    { color: var(--acc-s); font-family: var(--font-mono); }

.race-card__actions        { display: flex; gap: 5px; flex-shrink: 0; }
.race-card__btn {
    background:    none;
    border:        0.5px solid var(--bd-t);
    border-radius: var(--r-sm);
    cursor:        pointer;
    font-size:     var(--text-sm);
    color:         var(--tx-t);
    padding:       3px 9px;
    font-family:   var(--font-sans);
    transition:    border-color 0.15s, color 0.15s, background 0.15s;
    white-space:   nowrap;
}
.race-card__btn:hover              { border-color: var(--bd-s); color: var(--tx-p); background: var(--bg-t); }
.race-card__btn--danger:hover      { border-color: var(--danger-bd); color: var(--danger-tx); background: transparent; }

.race-empty {
    text-align:    center;
    padding:       10px 0 8px;
    margin-bottom: 12px;
}
.race-empty__title { font-size: var(--text-md); color: var(--tx-s); font-weight: 500; }
.race-empty__sub   { font-size: var(--text-sm); color: var(--tx-t); margin-top: 3px; }

.race-panel__lbl             { font-size: var(--text-sm); color: var(--tx-s); }
.race-panel__inp {
    border:        0.5px solid var(--bd-t);
    border-radius: var(--r-sm);
    padding:       6px 9px;
    background:    var(--bg-s);
    font-family:   var(--font-sans);
    font-size:     var(--text-md);
    color:         var(--tx-p);
    outline:       none;
    transition:    border-color 0.15s;
    width:         100%;
}
.race-panel__inp:focus { border-color: var(--acc); background: var(--bg-p); }

.race-form__actions {
    display:       flex;
    gap:           8px;
    align-items:   center;
    flex-wrap:     wrap;
    margin-top:    18px;
    padding-top:   14px;
    border-top:    0.5px solid var(--bd-t);
}

.race-form__row {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   10px;
    margin-bottom:         10px;
}

.race-form__row--main {
    grid-template-columns: 1fr;
}
.race-form__row--secondary {
    margin-top: 4px;
}
.race-form__field {
    display:        flex;
    flex-direction: column;
    gap:            6px;
    min-width:      0;
}

@media (max-width: 500px) {
    .race-form__row {
        grid-template-columns: 1fr;
    }
}

.race-form-toggle {
    display:          flex;
    align-items:      center;
    gap:              6px;
    width:            100%;
    padding:          9px 14px;
    margin-top:       10px;
    background:       transparent;
    border:           0.5px dashed var(--bd-s);
    border-radius:    var(--r-md);
    color:            var(--tx-s);
    font-size:        var(--text-sm);
    font-family:      var(--font-sans);
    cursor:           pointer;
    transition:       border-color 0.15s, color 0.15s, background 0.15s;
    letter-spacing:   0.04em;
}
.race-form-toggle:hover {
    border-color:     var(--acc-bd);
    color:            var(--acc-s);
    background:       var(--acc-bg);
}
.race-form--has-races {
    border-top:       0.5px solid var(--bd-t);
    padding-top:      18px;
    margin-top:       8px;
}

.race-form.is-collapsed {
    display:          none;
}

@media (max-width: 600px) {
    .race-panel              { top: 49px; }
    .race-card               { grid-template-columns: 44px 1fr; }
    .race-card__actions      { grid-column: 2; }
}

.settings-grid {
    display:      flex;
    flex-direction: column;
    gap:          14px;
}

.settings-group {
    display:         flex;
    flex-direction:  column;
    gap:             8px;
}
.settings-group__title {
    font-size:       11px;
    text-transform:  uppercase;
    letter-spacing:  0.08em;
    color:           var(--tx-t);
    font-weight:     600;
    padding-bottom:  4px;
    border-bottom:   0.5px solid var(--bd-t);
    margin-bottom:   2px;
}
.settings-row {
    display:         grid;
    grid-template-columns: 90px 1fr;
    align-items:     center;
    gap:             10px;
}
.settings-lbl {
    font-size:       var(--text-sm);
    color:           var(--tx-s);
}
.settings-pills {
    display:         grid;
    gap:             5px;
    align-items:     stretch;

    min-width:       0;
}
.settings-pills > * { min-width: 0; }
.settings-pills--two    { grid-template-columns: 1fr 1fr; }
.settings-pills--single { grid-template-columns: 1fr; }
.settings-pill {
    font-size:       var(--text-sm);
    padding:         5px 10px;
    border-radius:   8px;
    border:          0.5px solid var(--bd-t);
    background:      transparent;
    color:           var(--tx-s);
    cursor:          pointer;
    font-family:     var(--font-sans);
    transition:      all 0.12s;
    white-space:     nowrap;
    text-align:      center;
    overflow:        hidden;
    text-overflow:   ellipsis;

    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             4px;
}

.settings-pill[data-datefmt] {
    font-size:       11px;
    padding:         5px 6px;
    letter-spacing:  0.01em;
    font-family:     var(--font-mono, ui-monospace, monospace);
}
.settings-pill:hover     { border-color: var(--acc); color: var(--acc-s); }
.settings-pill.is-active { background: var(--acc); border-color: var(--acc); color: #fff; font-weight: 600; }
.settings-select {
    padding:         5px 10px;
    font-size:       var(--text-sm);
    width:           100%;
    cursor:          pointer;
}

.race-chip__body {
    display:       flex;
    flex-direction: column;
    align-items:   flex-start;
    gap:           0;
    min-width:     0;
    overflow:      hidden;
}
.race-chip__name {
    font-size:     var(--text-sm);
    color:         var(--tx-p);
    font-weight:   500;
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
    max-width:     90px;
    line-height:   1.2;
}
.race-chip__days {
    font-size:     10px;
    color:         var(--acc-s);
    font-family:   var(--font-mono);
    line-height:   1.2;
    white-space:   nowrap;
}

.race-card--past {
    opacity:       0.72;
    border-style:  dashed;
}
.race-card--past .race-card__name {
    text-decoration: line-through;
    color:         var(--tx-s);
}

.race-card__ring--done {
    width:         44px;
    height:        44px;
    display:       flex;
    align-items:   center;
    justify-content: center;
    font-size:     22px;
    color:         var(--tx-t);
    border:        2px dashed var(--bd-t);
    border-radius: 50%;
    flex-shrink:   0;
}

.race-card__btn--logrun {
    background:    var(--acc-bg);
    border-color:  var(--acc-bd);
    color:         var(--acc-s);
}
.race-card__btn--logrun:hover {
    background:    var(--acc-bd);
    border-color:  var(--acc);
    color:         var(--tx-p);
}

.pace-info-bar {
    display:          grid;
    grid-template-columns: 1fr 1fr;
    gap:              0;
    margin-top:       10px;
    margin-bottom:    6px;
    padding:          14px 16px;
    background:       var(--bg-s);
    border:           0.5px solid var(--bd-t);
    border-radius:    var(--r-lg);
    transition:       opacity 0.4s ease, transform 0.4s ease;
}

.pace-info-bar.is-pending {
    opacity:          0;
    pointer-events:   none;
    transform:        translateY(4px);
}

.pace-info-bar__left {
    display:          flex;
    flex-direction:   column;
    gap:              4px;
    padding-right:    14px;
    border-right:     0.5px solid var(--bd-t);
}

.pace-info-bar__right {
    display:          flex;
    align-items:      center;
    justify-content:  center;
    padding-left:     14px;
}

.pace-info-bar__level-row {
    display:          flex;
    align-items:      center;
    gap:              7px;
    flex-wrap:        wrap;
}

.pace-info-bar__speed {
    font-size:        var(--text-xl, 18px);
    font-family:      var(--font-mono);
    color:            var(--tx-p);
    letter-spacing:   0.02em;
    text-align:       center;
}

.pace-info-bar__wr {
    display:          flex;
    flex-direction:   column;
    gap:              4px;
    margin-top:       8px;
    padding-top:      8px;
    border-top:       0.5px dashed var(--bd-t);
}
.pace-info-bar__wr-label {
    font-size:        11px;
    text-transform:   uppercase;
    letter-spacing:   0.08em;
    color:            var(--tx-t);
}
.pace-info-bar__wr-row {
    display:          flex;
    align-items:      baseline;
    justify-content:  space-between;
    gap:              10px;
    font-size:        var(--text-sm);
}
.pace-info-bar__wr-tag {
    color:            var(--tx-s);
}
.pace-info-bar__wr-gap {
    font-family:      var(--font-mono);
    color:            var(--tx-s);
}
.pace-info-bar__wr-gap.is-ahead {
    color:            var(--success-tx);
    font-weight:      600;
}

.running-phrase {
    font-size:        var(--text-sm);
    color:            var(--acc-s);
    font-style:       italic;
    margin-top:       2px;
    line-height:      1.4;
}

.running-level-label { font-size: var(--text-sm); color: var(--tx-s); text-transform: uppercase; letter-spacing: 0.08em; }

.pace-zone-badge    {
    font-size:        var(--text-sm);
    font-family:      var(--font-sans);
    font-weight:      600;
    letter-spacing:   0.06em;
    padding:          2px 10px;
    border-radius:    12px;
}
.pace-zone-badge--easy      { background: color-mix(in srgb,#6aab6a 15%,transparent); color:#3d7a3d; }
.pace-zone-badge--aerobic   { background: color-mix(in srgb,#5b9fd4 15%,transparent); color:#2567a0; }
.pace-zone-badge--tempo     { background: color-mix(in srgb,#e0a020 15%,transparent); color:#8a5e00; }
.pace-zone-badge--threshold { background: color-mix(in srgb,#d46a20 15%,transparent); color:#8a3800; }
.pace-zone-badge--speed     { background: color-mix(in srgb,#c04040 15%,transparent); color:#7a1818; }

.running-level-badge {
    font-size:        var(--text-sm);
    font-weight:      600;
    letter-spacing:   0.05em;
    padding:          2px 10px;
    border-radius:    12px;
}
.running-level-badge--beginner     { background: color-mix(in srgb,#9ab 15%,transparent); color: #446; }
.running-level-badge--recreational { background: color-mix(in srgb,#6aab6a 15%,transparent); color:#3d7a3d; }
.running-level-badge--club         { background: color-mix(in srgb,#5b9fd4 15%,transparent); color:#2567a0; }
.running-level-badge--competitive  { background: color-mix(in srgb,#e0a020 15%,transparent); color:#8a5e00; }
.running-level-badge--elite        { background: color-mix(in srgb,#d46a20 15%,transparent); color:#8a3800; }
.running-level-badge--world        { background: color-mix(in srgb,#c04040 15%,transparent); color:#7a1818; }
.running-level-badge--orbit        { background: linear-gradient(90deg, #1a237e 0%, #4a148c 100%); color:#e8d5ff; letter-spacing:0.08em; }

html[data-theme="dark"] .pace-zone-badge--easy      { color: #97d497; }
html[data-theme="dark"] .pace-zone-badge--aerobic   { color: #7ec0f0; }
html[data-theme="dark"] .pace-zone-badge--tempo     { color: #f0c060; }
html[data-theme="dark"] .pace-zone-badge--threshold { color: #f0a060; }
html[data-theme="dark"] .pace-zone-badge--speed     { color: #f09090; }
html[data-theme="dark"] .running-level-badge--beginner     { color: #aabbd0; }
html[data-theme="dark"] .running-level-badge--recreational { color: #97d497; }
html[data-theme="dark"] .running-level-badge--club         { color: #7ec0f0; }
html[data-theme="dark"] .running-level-badge--competitive  { color: #f0c060; }
html[data-theme="dark"] .running-level-badge--elite        { color: #f0a060; }
html[data-theme="dark"] .running-level-badge--world        { color: #f09090; }
@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) .pace-zone-badge--easy      { color: #97d497; }
    html:not([data-theme="light"]) .pace-zone-badge--aerobic   { color: #7ec0f0; }
    html:not([data-theme="light"]) .pace-zone-badge--tempo     { color: #f0c060; }
    html:not([data-theme="light"]) .pace-zone-badge--threshold { color: #f0a060; }
    html:not([data-theme="light"]) .pace-zone-badge--speed     { color: #f09090; }
    html:not([data-theme="light"]) .running-level-badge--beginner     { color: #aabbd0; }
    html:not([data-theme="light"]) .running-level-badge--recreational { color: #97d497; }
    html:not([data-theme="light"]) .running-level-badge--club         { color: #7ec0f0; }
    html:not([data-theme="light"]) .running-level-badge--competitive  { color: #f0c060; }
    html:not([data-theme="light"]) .running-level-badge--elite        { color: #f0a060; }
    html:not([data-theme="light"]) .running-level-badge--world        { color: #f09090; }
}

.split-section {
    margin-top:       45px;
    padding-top:      24px;
    border-top:       0.5px solid var(--bd-t);
}
.pred-header,
.cmp-header {
    margin-top:       45px;
    padding-top:      24px;
    border-top:       0.5px solid var(--bd-t);
}
.split-header         { margin-bottom: 6px; }
.split-sub            { font-size: var(--text-md); color: var(--tx-s); margin-bottom: 14px; }

.split-card {
    background:       var(--bg-s);
    border:           0.5px solid var(--bd-t);
    border-radius:    var(--r-lg);
    padding:          16px 18px;
    margin-bottom:    16px;
}

.split-inputs {
    margin-bottom:    0;
}

.split-typerow {
    display:          grid;
    grid-template-columns: minmax(140px, 220px) minmax(0, 1fr);
    gap:              16px;
    align-items:      start;
    margin-bottom:    14px;
    padding-bottom:   14px;
    border-bottom:    0.5px dashed var(--bd-t);
}

.split-field {
    display:          flex;
    flex-direction:   column;
    gap:              6px;
    min-width:        0;
}
.split-field-label {
    font-size:        var(--text-sm);
    color:            var(--tx-t);
    letter-spacing:   0.06em;
    text-transform:   uppercase;
    margin:           0;
}

.split-label-row {
    display:          flex;
    align-items:      baseline;
    justify-content:  space-between;
    gap:              12px;
    margin-bottom:    4px;
}
.split-label-group {
    display:          flex;
    flex-direction:   column;
    gap:              6px;
    min-width:        0;
}
.split-label-group__top {
    display:          flex;
    align-items:      baseline;
    gap:              10px;
    flex-wrap:        wrap;
    min-width:        0;
}
.split-label-group__top .split-lbl {
    margin:           0;
}
.split-lbl,
.race-panel__lbl {
    font-size:        var(--text-sm);
    color:            var(--tx-t);
    letter-spacing:   0.07em;
    text-transform:   uppercase;
    white-space:      nowrap;
    flex-shrink:      0;
}

.split-presets {
    display:          flex;
    flex-wrap:        wrap;
    gap:              6px;
    align-items:      center;
    margin-bottom:    2px;
}
.split-preset-pill {
    font-size:        var(--text-sm);
    padding:          6px 12px;
    border-radius:    999px;
    border:           0.5px solid var(--bd-t);
    background:       var(--bg-p);
    color:            var(--tx-s);
    cursor:           pointer;
    font-family:      var(--font-sans);
    font-weight:      500;
    transition:       all 0.12s;
    white-space:      nowrap;
    line-height:      1.3;
}
.split-preset-pill:hover     { border-color: var(--acc-bd); background: var(--acc-bg); color: var(--acc-s); }
.split-preset-pill.is-active { background: var(--acc); border-color: var(--acc); color: #fff; font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,0.06); }
.split-preset-pill--custom   { color: var(--tx-t); font-style: italic; }

.split-mode-switcher {
    width:            100%;
}
.split-mode-switcher .calc-mode-btn {
    flex:             1 1 0;
    justify-content:  center;
    padding:          8px 10px;
}
.split-presets-group {
    display:          flex;
    flex-wrap:        wrap;
    gap:              6px;
    align-items:      center;
}
.split-presets-group[hidden] { display: none; }

.split-preset-pill--walk.is-active {
    background:       var(--acc-s, var(--acc));
    border-color:     var(--acc-s, var(--acc));
    color:            #fff;
}

.split-input-row {
    display:          grid;
    grid-template-columns: 1fr 1fr;
    gap:              12px;
    margin-top:       0;
}
.split-inp {
    border:           0.5px solid var(--bd-t);
    border-radius:    var(--r-md);
    padding:          10px 12px;
    background:       var(--bg-p);
    font-family:      var(--font-mono);
    font-size:        var(--text-lg, 16px);
    color:            var(--tx-p);
    outline:          none;
    transition:       border-color 0.15s, background 0.15s, box-shadow 0.15s;
    width:            100%;
    box-sizing:       border-box;
}
.split-inp:hover { border-color: var(--bd-s); }
.split-inp:focus { border-color: var(--acc); background: var(--bg-p); box-shadow: 0 0 0 3px var(--acc-bg); }

.split-result {
    margin-top:       0;
}
.split-result--empty {
    display:          flex;
    align-items:      center;
    justify-content:  center;
    min-height:       120px;
    padding:          24px 16px;
    border:           0.5px dashed var(--bd-t);
    border-radius:    var(--r-lg);
    background:       transparent;
}
.split-empty {
    text-align:       center;
    color:            var(--tx-t);
}
.split-empty__icon {
    font-size:        28px;
    margin-bottom:    8px;
    opacity:          0.7;
}
.split-empty__msg {
    font-size:        var(--text-md);
    color:            var(--tx-t);
    margin:           0;
}

.race-dist-col {
    position:         relative;
}
.race-dist-display,
.race-dist-custom-inp {
    font-size:        var(--text-sm);
    font-family:      var(--font-mono);
    color:            var(--tx-p);
    padding:          8px 10px;
    border:           0.5px solid var(--bd-t);
    border-radius:    var(--r-sm);
    background:       var(--bg-s);
    width:            100%;
    box-sizing:       border-box;
    min-height:       36px;
    transition:       border-color 0.15s, background 0.15s;
}
.race-dist-display {
    display:          flex;
    align-items:      center;
    color:            var(--tx-s);
}
.race-dist-custom-inp:focus {
    border-color:     var(--acc);
    background:       var(--bg-p);
    outline:          none;
}

.race-dist-date-row {
    display:          flex;
    gap:              12px;
    align-items:      center;
    flex-wrap:        wrap;
}
.race-dist-col {
    flex:             1 1 0;
    min-width:        140px;
}
.race-dist-date-col {
    display:          flex;
    align-items:      center;
    gap:              8px;
    flex:             0 0 auto;
}
.race-panel__lbl--inline {
    margin:           0;
    white-space:      nowrap;
}
.race-dist-date-col .race-panel__inp {
    width:            auto;
    min-width:        140px;
}
@media (max-width: 480px) {
    .race-dist-date-col {
        flex:         1 1 100%;
        justify-content: space-between;
    }
    .race-dist-date-col .race-panel__inp { flex: 1 1 auto; }
}

@media (max-width: 600px) {
    .split-card { padding: 14px; }
    .split-typerow {
        grid-template-columns: 1fr;
        gap: 12px;
        padding-bottom: 12px;
        margin-bottom: 12px;
    }
    .split-input-row { grid-template-columns: 1fr; gap: 10px; }
    .split-preset-pill { padding: 6px 10px; }
    .split-result--empty { min-height: 90px; padding: 18px 14px; }
    .split-result-meta { width: 100%; box-sizing: border-box; text-align: center; display: block; }
}

@media (max-width: 500px) {
    .split-label-row  { flex-direction: column; align-items: flex-start; gap: 4px; }
}

.split-warn {
    margin-bottom:    8px;
    transition:       opacity 0.4s ease;
}

.split-warn.is-pending {
    opacity:          0;
    pointer-events:   none;
}
.split-warn-item {
    font-size:        var(--text-sm);
    color:            var(--warning-tx, #854F0B);
    background:       color-mix(in srgb, #e0a020 12%, transparent);
    border:           0.5px solid color-mix(in srgb, #e0a020 30%, transparent);
    border-radius:    var(--r-sm);
    padding:          5px 10px;
    margin-bottom:    4px;
}
.split-warn-item--egg {
    color:            var(--acc-s);
    background:       var(--acc-bg);
    border-color:     var(--acc-bd);
}
.split-warn-item--info {
    color:            #2567a0;
    background:       color-mix(in srgb, #5b9fd4 10%, transparent);
    border-color:     color-mix(in srgb, #5b9fd4 25%, transparent);
}
html[data-theme="dark"] .split-warn-item { color: #f0c060; }
html[data-theme="dark"] .split-warn-item--info { color: #7ec0f0; }

.split-result-meta    {
    font-size:        var(--text-sm);
    color:            var(--tx-s);
    margin-bottom:    10px;
    padding:          10px 14px;
    background:       var(--acc-bg);
    border:           0.5px solid var(--acc-bd);
    border-radius:    var(--r-md);
    font-family:      var(--font-mono);
    display:          inline-block;
    color:            var(--acc-s);
    font-weight:      600;
}
.split-table          {
    width:            100%;
    border-collapse:  collapse;
    font-size:        var(--text-md);
    background:       var(--bg-p);
    border:           0.5px solid var(--bd-t);
    border-radius:    var(--r-md);
    overflow:         hidden;
}
.split-table th       {
    text-align:       left;
    padding:          8px 12px;
    font-size:        var(--text-sm);
    letter-spacing:   0.08em;
    text-transform:   uppercase;
    color:            var(--tx-s);
    background:       var(--bg-s);
    border-bottom:    0.5px solid var(--bd-t);
}
.split-table td       { padding: 8px 12px; border-bottom: 0.5px solid var(--bd-t); font-family: var(--font-mono); }
.split-table tr:last-child td { border-bottom: none; }
.split-table tr.split-milestone td { color: var(--acc-s); font-weight: 600; background: var(--acc-bg); }
.split-table td:first-child { color: var(--tx-s); font-size: var(--text-sm); }

.zone-divider__sub {
    font-size:     var(--text-md);
    color:         var(--tx-t);
    line-height:   1.6;
    margin:        4px 0 14px 32px;
    max-width:     520px;
}
.zone-divider__header {
    display:       block;
}

.gateway {
    background:        var(--bg-p);
    border:            0.5px solid var(--bd-s);
    border-radius:     12px;
    padding:           18px;
    display:           flex;
    flex-direction:    column;
    gap:               16px;
    box-shadow:        0 1px 0 rgba(0, 0, 0, 0.02);
}

.gateway__row {
    display:           flex;
    justify-content:   space-between;
    align-items:       center;
    gap:               12px;
    flex-wrap:         wrap;
}

.gateway__row--checkbox {
    align-items:       flex-start;
}
.gateway__row--checkbox .settings-checkbox {
    flex:              1 1 100%;
}

.gateway__lbl {
    font-size:         var(--text-sm);
    color:             var(--tx-s);
}

.gateway__row--status > .gateway__status {
    flex:              1 1 100%;
    display:           flex;
    flex-direction:    column;
    gap:               2px;
}
.gateway__title {
    font-size:         var(--text-md);
    font-weight:       600;
    color:             var(--tx-p);
    line-height:       1.3;
}
.gateway__sub {
    font-size:         var(--text-sm);
    color:             var(--tx-s);
    line-height:       1.4;
}

.gateway__panel {
    display:           flex;
    flex-direction:    column;
    gap:               12px;
    padding:           14px;
    background:        var(--bg-s);
    border-left:       2px solid var(--acc);
    border-radius:     0 8px 8px 0;
}

.gateway__panel-header {
    display:           flex;
    justify-content:   space-between;
    align-items:       baseline;
    gap:               8px;
}
.gateway__panel-title {
    font-size:         var(--text-sm);
    font-weight:       600;
    color:             var(--tx-p);
}
.gateway__panel-actions {
    display:           flex;
    gap:               8px;
    align-items:       center;
    flex-wrap:         wrap;
}

.gateway__usage--warn .settings-storage-usage__main {
    color:             var(--danger, #c0392b);
    font-weight:       600;
}
.gateway__usage--warn .settings-storage-usage__sub {
    color:             var(--danger, #c0392b);
    opacity:           0.75;
}

.gateway__primary {

    display:           contents;
}
.gateway__btn-primary {

    width:             100%;
}

/* Each gateway action is one upload button + its template-download link
   below, treated as a single visual unit. The two units sit side-by-side
   in a 2-col grid on desktop; on narrow widths they stack to a single
   column. Buttons use .btn--full so they fill the column (the global
   .btn max-width: 200px cap would otherwise force the German labels to
   wrap). */
.gateway__secondary {
    display:           grid;
    grid-template-columns: 1fr 1fr;
    gap:               14px 10px;
}
.gateway__action {
    display:           flex;
    flex-direction:    column;
    align-items:       stretch;
    gap:               6px;
    min-width:         0;
}
.gateway__btn {
    width:             100%;
    min-width:         0;
    padding:           10px 12px;
    font-weight:       500;
    white-space:       normal;
    text-align:        center;
    line-height:       1.3;
    letter-spacing:    0.04em;
}

.gateway__template-link {
    display:           inline-flex;
    align-items:       center;
    justify-content:   center;
    gap:               6px;
    padding:           2px 4px;
    font-size:         var(--text-sm);
    color:             var(--tx-t);
    text-decoration:   none;
    line-height:       1.3;
    transition:        color 120ms ease;
    width:             100%;
    box-sizing:        border-box;
    text-align:        center;
}
.gateway__template-link::before {
    content:           "↓";
    font-size:         12px;
    color:             var(--acc-s);
    line-height:       1;
    flex-shrink:       0;
}
.gateway__template-link:hover {
    color:             var(--acc-s);
}
.gateway__template-link span {
    border-bottom:     1px dotted var(--acc-bd);
    padding-bottom:    1px;
    transition:        border-color 120ms ease;
    overflow:          hidden;
    text-overflow:     ellipsis;
    white-space:       nowrap;
    min-width:         0;
}
.gateway__template-link:hover span {
    border-bottom-color: var(--acc);
}

@media (max-width: 480px) {
    .gateway__secondary { grid-template-columns: 1fr; }
}

.gateway__footer {
    display:           flex;
    flex-direction:    column;
    gap:               8px;
    align-items:       stretch;
    padding-top:       6px;
    border-top:        0.5px solid var(--bd-t);
}
.gateway__footer .settings-link--danger {
    align-self:        flex-end;  
}

.gateway__confirm-strip {
    display:           flex;
    flex-direction:    column;
    gap:               10px;
    padding:           12px 14px;
    background:        var(--danger-bg, rgba(192, 57, 43, 0.08));
    border:            0.5px solid var(--danger-bd, rgba(192, 57, 43, 0.3));
    border-radius:     8px;
}
.gateway__confirm-msg {
    margin:            0;
    font-size:         var(--text-sm);
    color:             var(--tx-p);
    line-height:       1.5;
}
.gateway__confirm-actions {
    display:           flex;
    gap:               8px;
    justify-content:   flex-end;
    flex-wrap:         wrap;
}

@media (max-width: 600px) {
    .gateway {
        padding:           14px;
        gap:               14px;
    }
    .gateway__panel {
        padding:           12px;

        border-left-width: 2px;
    }
    .gateway__secondary {

        flex-direction:    column;
    }
    .gateway__btn {
        flex:              1 1 100%;
    }

    .gateway .btn {
        max-width:         none;
    }

    .gateway__row--mode {
        flex-direction:    column;
        align-items:       flex-start;
        gap:               8px;
    }
    .gateway__title {
        font-size:         var(--text-sm);
    }
    .gateway__sub {
        line-height:       1.35;
    }
    .gateway__panel-header {
        flex-direction:    column;
        align-items:       flex-start;
        gap:               4px;
    }
    .gateway__panel-actions {
        flex-direction:    column;
        align-items:       stretch;
        gap:               8px;
    }
    .gateway__panel-actions .gateway__btn {

        flex:              1 1 auto;
        width:             100%;
    }
    .gateway__panel-actions .settings-link--danger {
        align-self:        flex-end;
    }
    .gateway__confirm-actions {

        flex-direction:    column-reverse;
    }
    .gateway__confirm-actions .btn {
        width:             100%;
    }

    .gateway__footer {
        padding-top:       10px;
    }

    .gateway .btn {
        min-height:        44px;
        padding:           10px 16px;
        font-size:         var(--text-md);  
    }
    .gateway .btn--small {

        min-height:        40px;
        padding:           9px 14px;
    }
    .gateway__btn-primary {

        min-height:        48px;
        padding:           12px 16px;
        font-size:         var(--text-md);
        line-height:       1.25;
        letter-spacing:    0.06em;  
        white-space:       normal;
    }

    .gateway .btn:active,
    .gateway .settings-link--danger:active {
        transform:         scale(0.98);
        opacity:           0.85;
    }
}
/* =============================================================
   Language-suggestion banner — append to assets/css/main.css
   ============================================================= */

.lang-banner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 1rem;
  background: #fff7e6;
  border-bottom: 1px solid #f0d28a;
  color: #4a3a10;
  font-size: 0.95rem;
  line-height: 1.3;
}

[data-theme="dark"] .lang-banner {
  background: #2a2516;
  border-bottom-color: #5a4a20;
  color: #f0e0b0;
}

.lang-banner__msg {
  flex: 1 1 auto;
  min-width: 0;
}

.lang-banner__btn {
  flex: 0 0 auto;
  padding: 0.35rem 0.8rem;
  background: #c97a00;
  color: #fff;
  text-decoration: none;
  border-radius: 4px;
  font-weight: 600;
  font-size: 0.9rem;
  white-space: nowrap;
}

.lang-banner__btn:hover,
.lang-banner__btn:focus {
  background: #a86600;
  text-decoration: none;
}

.lang-banner__close {
  flex: 0 0 auto;
  background: transparent;
  border: 0;
  color: inherit;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 0.25rem;
  opacity: 0.7;
}

.lang-banner__close:hover { opacity: 1; }

@media (max-width: 480px) {
  .lang-banner {
    font-size: 0.85rem;
    padding: 0.5rem 0.75rem;
    gap: 0.5rem;
  }
  .lang-banner__btn { padding: 0.3rem 0.6rem; font-size: 0.82rem; }
}