:root {
    color-scheme: dark;
    --bg: #0b1220;
    --panel: #111c2d;
    --line: #293a52;
    --text: #f2f6fc;
    --muted: #9fb0c6;
    --green: #53d6a2;
    --yellow: #5a481b;
    --red: #59262b;
    --sent: #173f32;
    --nobib: #072f22;
    --control: #101827;
    --control-text: #fff;
    --header: #111827;
    --headcell: #1a273b;
    --headtext: #bac8d9;
    --badge: #c34d52
}

* {
    box-sizing: border-box
}

html, body {
    margin: 0;
    width: 100%;
    height: 100%;
    overflow: hidden
}

body {
    height: 100dvh;
    display: flex;
    flex-direction: column;
    background: var(--bg);
    color: var(--text);
    font: 15px/1.35 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif
}

body[data-theme="light"] {
    color-scheme: light;
    --bg: #f3f6fa;
    --panel: #fff;
    --line: #d3dce8;
    --text: #172235;
    --muted: #617087;
    --green: #28b982;
    --yellow: #fff0bf;
    --red: #ffd8d8;
    --sent: #d5f4e6;
    --nobib: #a5c4b6;
    --control: #fff;
    --control-text: #172235;
    --header: #fff;
    --headcell: #e7edf5;
    --headtext: #344258;
    --badge: #c34d52
}

.app-header {
    position: relative;
    z-index: 5;
    flex: none;
    background: var(--header);
    border-bottom: 1px solid var(--line);
    padding: calc(9px + env(safe-area-inset-top)) 12px 9px;
    box-shadow: 0 3px 12px #0004
}

.topline, .topline > div, .header-bottom {
    display: flex;
    align-items: center;
    gap: 12px
}

.topline {
    justify-content: space-between
}

.app-title {
    font-size: 19px;
    font-weight: 800;
    color: #4B4B4B;
}

.app-title-2 {
    color: var(--badge);
}

.network {
    font-size: 11px;
    color: var(--muted);
    margin-left: 8px
}

.network.online {
    color: var(--green)
}

.network.offline {
    color: #ffbd70
}

.icon-button {
    border: 1px solid var(--line);
    background: var(--panel);
    color: var(--text);
    border-radius: 9px;
    width: 38px;
    height: 36px;
    font-size: 21px;
    cursor: pointer
}

.finish-button {
    width: 100%;
    height: 74px;
    margin: 8px 0;
    border: 0;
    border-radius: 13px;
    background: var(--green);
//    color: #062318;
  color: var(--green);
    font-size: clamp(25px, 6vw, 34px);
    font-weight: 950;
    letter-spacing: .06em;
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
    background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDY0IDY0IiBpZD0iTGF5ZXJfMSIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgNjQgNjQiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxjaXJjbGUgY3g9IjMyIiBjeT0iMzYiIGZpbGw9IiNGRkQ3NjYiIHI9IjE5Ii8+PHBvbHlsaW5lIGZpbGw9IiNCN0I3QjciIHBvaW50cz0iMjkuNSwxNyAyOS41LDEyIDM1LDEyIDM1LDE3ICIvPjxjaXJjbGUgY3g9IjMyIiBjeT0iMzYiIGZpbGw9IiNGRkZGRkYiIHI9IjEzLjQiLz48Y2lyY2xlIGN4PSIzMiIgY3k9IjM2IiBmaWxsPSJub25lIiByPSIxOSIgc3Ryb2tlPSIjMkMzRTUwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgc3Ryb2tlLXdpZHRoPSIyIi8+PGc+PGNpcmNsZSBjeD0iMzIiIGN5PSIzNiIgZmlsbD0ibm9uZSIgcj0iMTUuNSIgc3Ryb2tlPSIjMkMzRTUwIiBzdHJva2UtZGFzaGFycmF5PSIwLjEwMDIsOC4wMTM1IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIvPjwvZz48cmVjdCBmaWxsPSIjOTY5Njk2IiBoZWlnaHQ9IjQiIHdpZHRoPSIxMiIgeD0iMjYiIHk9IjgiLz48cmVjdCBmaWxsPSJub25lIiBoZWlnaHQ9IjQiIHN0cm9rZT0iIzJDM0U1MCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHN0cm9rZS13aWR0aD0iMiIgd2lkdGg9IjEyIiB4PSIyNiIgeT0iOCIvPjxwb2x5bGluZSBmaWxsPSJub25lIiBwb2ludHM9IiAgMjkuNSwxNyAyOS41LDEyIDM1LDEyIDM1LDE3ICIgc3Ryb2tlPSIjMkMzRTUwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgc3Ryb2tlLXdpZHRoPSIyIi8+PGxpbmUgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMkMzRTUwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgc3Ryb2tlLXdpZHRoPSIyIiB4MT0iNDQuMyIgeDI9IjQ2LjYiIHkxPSIyMS4zIiB5Mj0iMTguNSIvPjxsaW5lIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzJDM0U1MCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHN0cm9rZS13aWR0aD0iMiIgeDE9IjQ0LjMiIHgyPSI0OC43IiB5MT0iMTYuNyIgeTI9IjE5LjkiLz48bGluZSBmaWxsPSJub25lIiBzdHJva2U9IiMyQzNFNTAiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBzdHJva2Utd2lkdGg9IjIiIHgxPSIxOS43IiB4Mj0iMTcuNCIgeTE9IjIxLjMiIHkyPSIxOC41Ii8+PGxpbmUgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMkMzRTUwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgc3Ryb2tlLXdpZHRoPSIyIiB4MT0iMTkuNyIgeDI9IjE1LjMiIHkxPSIxNi43IiB5Mj0iMTkuOSIvPjxsaW5lIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzJDM0U1MCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHN0cm9rZS13aWR0aD0iMiIgeDE9IjMyIiB4Mj0iMzkuOCIgeTE9IjM2IiB5Mj0iMjguMiIvPjwvc3ZnPg==") 50% 50% no-repeat, #6C5B7B;
    background-size: contain;
    text-align: right;
    background-position: center left;
    background-origin: content-box;
}

.finish-button:active {
    filter: brightness(.9);
    transform: scale(.995)
}

.header-bottom {
    font-size: 12px;
    color: var(--muted);
    justify-content: space-between
}

.header-bottom #clock {
    font-variant-numeric: tabular-nums;
    color: var(--text);
    font-size: 14px
}

main {
    min-height: 0;
    flex: 1;
    display: flex;
    flex-direction: column
}

.table-scroll {
    flex: 1;
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable
}

table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13px
}

thead {
    position: sticky;
    top: 0;
    z-index: 2
}

th {
    background: var(--headcell);
    color: var(--headtext);
    font-size: 11px;
    text-align: left;
    white-space: nowrap;
    padding: 10px 8px;
    border-bottom: 1px solid var(--line)
}

td {
    padding: 6px 7px;
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
    font-variant-numeric: tabular-nums
}

tbody tr {
    background: var(--yellow)
}

tbody tr.sent {
    background: var(--sent)
}

tbody tr.nobib {
    background: var(--nobib)
}

tbody tr.error {
    background: var(--red)
}

td[hidden], th[hidden] {
    display: none
}

.time {
    width: 95px;
}

.bib {
    width: 66px;
}

.bib-input {
    width: 66px;
    max-width: 23vw;
    padding: 8px 7px;
    border-radius: 7px;
    border: 0px solid #7d6c37;
    background: var(--control);
    color: var(--control-text);
    font-size: 16px
}

.bib-input::placeholder {
    color: var(--muted)
}

.athlete {
    max-width: 190px;
    overflow: hidden;
    text-overflow: ellipsis
}

.time-input {
    width: 155px;
    max-width: 42vw;
    background: var(--control);
    color: var(--control-text);
    border: 1px solid #52647d;
    border-radius: 6px;
    padding: 6px;
    font: 12px ui-monospace, monospace
}

.status-button {
    min-width: 32px;
    padding: 6px 7px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: var(--panel);
    color: var(--text);
    font-weight: 800;
    cursor: pointer
}

.status-badge {
    display: inline-block;
    margin: 0 5px 0 0;
    padding: 3px 5px;
    border-radius: 5px;
    background: var(--badge);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    vertical-align: middle
}

.delete-button {
    border: 0;
    background: transparent;
    color: #d7434b;
    font-size: 19px;
    padding: 3px 7px;
    cursor: pointer
}

.empty {
    text-align: center;
    color: var(--muted);
    padding: 28px 18px;
    font-size: 13px
}

.table-footer {
    flex: none;
    z-index: 4;
    background: var(--panel);
    border-top: 1px solid var(--line);
    padding-bottom: env(safe-area-inset-bottom)
}

.table-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    font-size: 13px;
    font-weight: 750
}

.table-heading #count {
    color: var(--muted);
    margin-left: 6px
}

.footer-sync {
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--muted);
    font-weight: 500
}

.sync-icon {
    width: 36px;
    height: 32px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: transparent;
    color: var(--text);
    font-size: 23px;
    line-height: 1;
    cursor: pointer
}

.sync-icon:active {
    transform: rotate(45deg)
}

.shade {
    position: fixed;
    inset: 0;
    z-index: 10;
    background: #0009
}

.settings-panel {
    position: fixed;
    z-index: 11;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: 85dvh;
    overflow: auto;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 18px 18px 0 0;
    padding: 16px 18px calc(20px + env(safe-area-inset-bottom));
    transform: translateY(105%);
    transition: transform .22s;
    box-shadow: 0 -10px 40px #0008
}

.settings-panel.open {
    transform: translateY(0)
}

.panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.panel-head h2 {
    margin: 0;
    font-size: 20px
}

.settings-panel h3 {
    font-size: 13px;
    color: var(--muted);
    margin: 20px 0 8px
}

.setting {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid var(--line)
}

.setting input {
    width: 22px;
    height: 22px;
    accent-color: var(--green)
}

.settings-actions {
    display: grid;
    gap: 9px;
    margin-top: 20px
}

.action-button {
    border: 1px solid var(--line);
    border-radius: 9px;
    background: var(--panel);
    color: var(--text);
    padding: 12px;
    font-weight: 700
}

.action-button.danger {
    border-color: #9e444a;
    color: #d7434b
}

.settings-note {
    color: var(--muted);
    font-size: 12px
}

#toast {
    position: fixed;
    z-index: 20;
    bottom: calc(20px + env(safe-area-inset-bottom));
    left: 50%;
    transform: translateX(-50%);
    max-width: 90vw;
    padding: 10px 15px;
    border-radius: 9px;
    background: #e7fff4;
    color: #09271c;
    box-shadow: 0 4px 22px #0008;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s
}

#toast.show {
    opacity: 1
}

@media (min-width: 760px) {
    .app-header {
        padding-left: 20px;
        padding-right: 20px
    }

    .finish-button {
        height: 64px
    }

    td {
        padding: 8px 12px
    }

    th {
        padding: 12px
    }

    .bib-input {
        max-width: none;
        width: 100px
    }

    .table-heading {
        padding-left: 20px;
        padding-right: 20px
    }
}

.checkpoint-footer {
    padding: 7px 12px 0;
    color: var(--green);
    font-size: 13px;
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.checkpoint-gate {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: var(--bg);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px
}

.checkpoint-gate[hidden] {
    display: none
}

.checkpoint-gate-card {
    max-width: 440px;
    text-align: center;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--panel);
    padding: 28px 22px;
    box-shadow: 0 12px 40px #0004
}

.checkpoint-gate-card strong {
    font-size: 22px
}

.checkpoint-gate-card p {
    color: var(--muted);
    line-height: 1.6
}

.checkpoint-details {
    white-space: pre-line;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.55;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: var(--bg);
    overflow-wrap: anywhere
}