:root {
            --cell-size: clamp(7px, 0.9vw, 11px);
            --cell-gap: clamp(1px, 0.25vw, 2px);
            --week-label-width: clamp(24px, 6vw, 38px);
        }

        body {
            font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
            background: #f6f8fa;
            color: #24292f;
            margin: 0;
            padding: 24px;
        }

        .page {
            width: min(100%, 980px);
            margin: auto;
            background: white;
            border: 1px solid #d0d7de;
            border-radius: 8px;
            padding: 20px;
        }

        .brand-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 16px;
            margin: 0 0 10px;
            border-bottom: 1px solid #eee;
        }

        .brand-logo-visio {
            max-height: 55px;
            width: auto;
            object-fit: contain;
        }

        .brand-logo-spinhub {
            max-height: 40px;
            width: auto;
            object-fit: contain;
        }

        .header-rider {
            position: relative;
            overflow: hidden;
            height: 26px;
            margin: 10px 0 12px;
        }

        .header-rider-scenery {
            position: absolute;
            inset: 0;
            z-index: 1;
            pointer-events: none;
        }

        .header-rider-scenery-track {
            position: absolute;
            left: 8px;
            right: 8px;
            bottom: 2px;
            display: flex;
            align-items: center;
            justify-content: space-around;
            gap: 18px;
            white-space: nowrap;
        }

        .scenery-group {
            display: inline-flex;
            align-items: center;
            font-size: 15px;
            line-height: 1;
            opacity: 1;
            filter: saturate(.9);
            letter-spacing: 1px;
        }

        .scenery-mountains {
            transform: translateY(-3px);
        }

        .scenery-houses {
            transform: translateY(-2px);
        }

        .header-rider-emoji {
            position: absolute;
            left: 100%;
            top: 2px;
            font-size: 20px;
            line-height: 1;
            animation: riderAcross 11s linear infinite;
            will-change: left;
            z-index: 2;
        }

        @keyframes riderAcross {
            from {
                left: 100%;
            }
            to {
                left: -28px;
            }
        }

        .footer-brand {
            margin-top: 28px;
            padding-top: 18px;
            border-top: 1px solid #d8dee4;
            text-align: center;
            color: #8c959f;
            font-size: 13px;
        }

        .footer-brand img {
            margin-top: 8px;
            max-height: 56px;
            width: auto;
            object-fit: contain;
        }

        .footer-credit {
            margin-top: 10px;
            font-size: 12px;
            color: #8c959f;
        }

        .footer-credit .heart {
            color: #cf222e;
        }

        .footer-jesuflas-text {
            margin-top: 8px;
            font-size: 12px;
            color: #8c959f;
            line-height: 1.45;
        }

        .footer-jesuflas-text a {
            color: #258cff;
            font-weight: 600;
            text-decoration: none;
        }

        .footer-jesuflas-text a:hover {
            text-decoration: underline;
        }

        .jesuflas-support {
            margin-top: 14px;
            padding: 14px 10px 4px;
            border-top: 1px dashed #d8dee4;
            text-align: center;
        }

        .jesuflas-support h3 {
            margin: 0;
            font-size: 16px;
            color: #24292f;
        }

        .jesuflas-note {
            margin: 6px 0 10px;
            color: #57606a;
            font-size: 12px;
        }

        .jesuflas-arms {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 4px;
            max-width: 560px;
            margin: 0 auto;
        }

        .jesuflas-arm {
            font-size: 26px;
            line-height: 1;
            filter: grayscale(1);
            opacity: .35;
            transition: filter .2s ease, opacity .2s ease, transform .2s ease;
        }

        .jesuflas-arm.active {
            filter: none;
            opacity: 1;
            transform: translateY(-1px);
        }

        .jesuflas-more {
            margin: 8px 0 0;
            font-size: 12px;
            color: #409cff;
        }

        .jesuflas-form {
            margin-top: 12px;
        }

        .jesuflas-button {
            border-radius: 999px;
            padding: 8px 14px;
            border-color: #2da44e;
            color: #fff;
            background: #2da44e;
        }

        .jesuflas-button:disabled {
            background: #8c959f;
            border-color: #8c959f;
            cursor: not-allowed;
        }

        .jesuflas-status {
            margin: 8px 0 0;
            font-size: 12px;
            color: #57606a;
        }

        .period-filters {
            margin: 0 0 16px;
            border: 1px solid #d0d7de;
            border-radius: 8px;
            background: #f6f8fa;
            padding: 12px;
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            align-items: end;
        }

        .user-access-button {
            border: 1px solid #d0d7de;
            border-radius: 6px;
            padding: 8px 10px;
            background: #fff;
            color: #57606a;
            font-size: 12px;
            height: 38px;
            cursor: pointer;
            white-space: nowrap;
            margin-left: auto;
            align-self: end;
        }

        .user-dialog p {
            margin: 0 0 12px;
            color: #57606a;
            font-size: 14px;
        }

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

        .period-field label {
            margin: 0;
            font-size: 12px;
            color: #57606a;
            font-weight: 600;
        }

        .period-field select,
        .period-field input {
            width: auto;
            min-width: 130px;
            border: 1px solid #d0d7de;
            border-radius: 6px;
            padding: 8px 10px;
            font-size: 14px;
            background: #fff;
            color: #24292f;
        }

        .period-apply {
            border: 1px solid #d0d7de;
            border-radius: 6px;
            padding: 8px 12px;
            background: #fff;
            color: #24292f;
            cursor: pointer;
            height: 38px;
        }

        .chart-wrapper {
            overflow: hidden;
            width: fit-content;
            margin: 0 auto;
        }

        .months {
            display: grid;
            grid-template-columns: repeat(53, var(--cell-size));
            gap: var(--cell-gap);
            margin-left: var(--week-label-width);
            margin-bottom: 6px;
            font-size: 12px;
            color: #57606a;
        }

        .grid-area {
            display: flex;
            gap: 6px;
        }

        .weekdays {
            display: grid;
            grid-template-rows: repeat(7, var(--cell-size));
            gap: var(--cell-gap);
            font-size: clamp(7px, 0.75vw, 11px);
            color: #57606a;
            width: var(--week-label-width);
        }

        .weekdays span {
            height: var(--cell-size);
            line-height: var(--cell-size);
        }

        .calendar {
            display: grid;
            grid-auto-flow: column;
            grid-template-rows: repeat(7, var(--cell-size));
            gap: var(--cell-gap);
        }

        .day {
            width: var(--cell-size);
            height: var(--cell-size);
            box-sizing: border-box;
            border-radius: 3px;
            border: 1px solid rgba(27, 31, 36, 0.06);
            cursor: pointer;
            background: #ebedf0;
        }

        .day:hover {
            outline: 2px solid #0969da;
        }

        .day.readonly {
            cursor: default;
        }

        .day.readonly:hover {
            outline: none;
        }

        .level-0 { background: #ebedf0; }
        .level-1 { background: #dff7e7; }
        .level-2 { background: #b7efc5; }
        .level-3 { background: #9be9a8; }
        .level-4 { background: #6edb83; }
        .level-5 { background: #40c463; }
        .level-6 { background: #2f9e4f; }
        .level-7 { background: #216e39; }

        .legend {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            gap: 6px;
            margin-top: 16px;
            color: #57606a;
            font-size: 12px;
        }

        .legend-box {
            width: var(--cell-size);
            height: var(--cell-size);
            box-sizing: border-box;
            border-radius: 3px;
            border: 1px solid rgba(27, 31, 36, 0.06);
        }

        .map-card {
            margin-top: 10px;
            border: 1px solid #d0d7de;
            border-radius: 8px;
            padding: 16px;
            background: white;
        }

        .stats-card {
            margin-top: 18px;
            border: 1px solid #d0d7de;
            border-radius: 8px;
            padding: 16px;
            background: white;
        }

        .stats-title {
            margin: 0 0 10px;
            font-size: 18px;
        }

        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
            gap: 10px;
        }

        .stat-item {
            border: 1px solid #d8dee4;
            border-radius: 6px;
            background: #f6f8fa;
            padding: 10px;
        }

        .stat-value {
            margin: 0;
            font-size: 20px;
            font-weight: 700;
            color: #24292f;
            line-height: 1.2;
            word-break: break-word;
        }

        .stat-label {
            margin-top: 4px;
            font-size: 12px;
            color: #57606a;
        }

        .map-controls {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin: 0 0 12px;
        }

        .map-controls a {
            text-decoration: none;
            border: 1px solid #d0d7de;
            border-radius: 999px;
            padding: 6px 10px;
            font-size: 12px;
            color: #24292f;
            background: #f6f8fa;
        }

        .map-controls a.active {
            background: #2da44e;
            color: #fff;
            border-color: #2da44e;
        }

        .map-title {
            margin: 0 0 6px;
            font-size: 20px;
        }

        .map-summary {
            margin: 0 0 10px;
            color: #57606a;
            font-size: 13px;
        }

        .map-empty {
            margin: 0 0 10px;
            color: #57606a;
            font-size: 13px;
        }

        .intensity-legend {
            margin-top: 10px;
            display: flex;
            flex-wrap: wrap;
            gap: 10px 14px;
            align-items: center;
            font-size: 12px;
            color: #57606a;
        }

        .intensity-legend strong {
            color: #24292f;
            font-size: 12px;
        }

        .intensity-item {
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }

        .intensity-swatch {
            width: 12px;
            height: 12px;
            border-radius: 3px;
            border: 1px solid rgba(27, 31, 36, 0.08);
        }

        .intensity-note {
            flex-basis: 100%;
            margin-top: 2px;
            color: #57606a;
        }

        #bikeMap {
            width: 100%;
            height: 420px;
            border: 1px solid #d0d7de;
            border-radius: 6px;
        }

        .destination-description {
            margin: 0 0 10px;
            color: #57606a;
            font-size: 13px;
        }

        .destination-form {
            margin: 0 0 12px;
        }

        .destination-form label {
            display: inline-block;
            margin: 0 8px 0 0;
            font-size: 13px;
            font-weight: 600;
            color: #57606a;
        }

        .destination-form select {
            min-width: 240px;
            border: 1px solid #d0d7de;
            border-radius: 6px;
            padding: 8px 10px;
            font-size: 14px;
            background: #fff;
            color: #24292f;
        }

        .destination-next {
            margin: 0 0 12px;
            color: #57606a;
            font-size: 13px;
        }

        .loop-highlight {
            color: #2da44e;
            font-weight: 700;
        }

        .impossible-next {
            margin-bottom: 14px;
            color: #24292f;
            font-weight: 600;
        }

        .impossible-route-card {
            border: 1px solid #d8dee4;
            border-radius: 8px;
            padding: 14px;
            background: #f6f8fa;
            margin-bottom: 4px;
        }

        .impossible-route-card h3 {
            margin: 0 0 10px;
            font-size: 17px;
            color: #24292f;
        }

        .impossible-route-quote {
            margin: 0 0 10px;
            font-size: 13px;
            color: #57606a;
        }

        .impossible-route-stats {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            gap: 8px;
            margin-bottom: 10px;
        }

        .impossible-stat {
            border: 1px solid #d0d7de;
            border-radius: 6px;
            background: #fff;
            padding: 8px 10px;
            display: flex;
            flex-direction: column;
            gap: 2px;
        }

        .impossible-stat strong {
            font-size: 16px;
            color: #24292f;
        }

        .impossible-stat span {
            font-size: 12px;
            color: #57606a;
        }

        .impossible-progress-track {
            width: 100%;
            position: relative;
            height: 16px;
            border-radius: 999px;
            border: 1px solid #d0d7de;
            background: linear-gradient(90deg, #e7edf3, #f3f6f9);
            overflow: hidden;
            margin-bottom: 12px;
            box-shadow: inset 0 1px 3px rgba(36, 41, 47, .12);
        }

        .impossible-progress-legend {
            display: flex;
            justify-content: space-between;
            font-size: 12px;
            color: #57606a;
            margin-bottom: 6px;
        }

        .impossible-progress-fill {
            height: 100%;
            width: 0;
            background: linear-gradient(90deg, #2da44e, #216e39);
            transition: width .4s ease;
        }

        .impossible-progress-rider {
            position: absolute;
            left: 0;
            top: 50%;
            transform: translate(-50%, -50%);
            font-size: 14px;
            line-height: 1;
            transition: left .4s ease;
            z-index: 2;
            text-shadow: 0 1px 2px rgba(255, 255, 255, .9);
        }

        .impossible-milestones {
            list-style: none;
            margin: 0;
            padding: 0;
            display: grid;
            gap: 6px;
        }

        .impossible-milestone {
            display: grid;
            grid-template-columns: 110px 1fr auto;
            align-items: center;
            gap: 10px;
            font-size: 13px;
            color: #8c959f;
            border: 1px solid #d8dee4;
            border-radius: 6px;
            background: #fff;
            padding: 7px 9px;
        }

        .impossible-milestone.reached {
            color: #216e39;
            border-color: #2da44e;
            background: #f0fff4;
        }

        .milestone-km {
            font-weight: 700;
            color: inherit;
        }

        .milestone-label {
            color: inherit;
        }

        .milestone-tag {
            font-size: 11px;
            text-transform: uppercase;
            letter-spacing: .04em;
            color: #0969da;
            font-weight: 700;
        }

        .impossible-milestone.next {
            border-color: #d29922;
            background: #fff8e6;
            color: #7a5b13;
        }

        dialog {
            border: none;
            border-radius: 10px;
            padding: 0;
            width: 360px;
            box-shadow: 0 20px 50px rgba(0,0,0,.25);
        }

        dialog::backdrop {
            background: rgba(0,0,0,.35);
        }

        .modal {
            padding: 20px;
        }

        .modal h2 {
            margin-top: 0;
            font-size: 20px;
        }

        label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
        }

        input {
            width: 100%;
            box-sizing: border-box;
            padding: 10px;
            font-size: 16px;
            border: 1px solid #d0d7de;
            border-radius: 6px;
        }

        .actions {
            display: flex;
            justify-content: flex-end;
            gap: 8px;
            margin-top: 18px;
        }

        button {
            border: 1px solid #d0d7de;
            border-radius: 6px;
            padding: 9px 14px;
            cursor: pointer;
            background: white;
        }

        button.primary {
            background: #2da44e;
            color: white;
            border-color: #2da44e;
        }

        @media (max-width: 700px) {
            body {
                padding: 12px;
            }

            .page {
                padding: 14px;
            }

            .brand-header {
                flex-direction: column;
                gap: 12px;
            }

            .brand-logo-visio {
                max-height: 78px;
            }

            .brand-logo-spinhub {
                max-height: 56px;
            }

            .user-access-button {
                margin-left: auto;
            }
        }