/* ══════════════════════════════════
   SGK UI KIT - Component Library
   (Extracted from styles.css)
   Include AFTER styles.css
══════════════════════════════════ */

/* ── 3. UI KIT - FORMS & BUTTONS ── */
.kit-section {
   margin-bottom: 32px;
   padding: 16px 0;
}

.kit-title {
   font-family: var(--font-display);
   font-size: 22px;
   color: var(--acc);
   letter-spacing: 2px;
   margin-bottom: 12px;
   border-bottom: 1px solid var(--brd);
   padding-bottom: 6px;
}

.kit-row {
   display: flex;
   flex-wrap: wrap;
   gap: 12px;
   align-items: flex-start;
   margin-bottom: 12px;
}

.form-group {
   display: flex;
   flex-direction: column;
   gap: 4px;
   margin-bottom: 12px;
   width: 100%;
}

.form-label {
   font-family: var(--font-mono);
   font-size: 10px;
   color: var(--dim);
   letter-spacing: 2px;
   text-transform: uppercase;
}

.form-control {
   background: var(--s2);
   border: 1px solid var(--brd);
   color: var(--text);
   font-family: var(--font-base);
   font-size: 14px;
   padding: 8px 12px;
   border-radius: 4px;
   outline: none;
   transition: var(--trans-smooth);
   width: 100%;
   color-scheme: dark;
}

.form-control:focus,
.form-control:focus-visible {
   border-color: var(--acc);
   box-shadow: 0 0 10px rgba(var(--acc-rgb), 0.2);
}

.form-control::placeholder {
   color: var(--dimmer);
}

.form-control:disabled {
   opacity: 0.5;
   cursor: not-allowed;
   background: rgba(255, 255, 255, 0.02);
}

.form-control[type="date"],
.form-control[type="time"],
.form-control[type="datetime-local"] {
   position: relative;
   cursor: pointer;
}

.form-control[type="date"]::-webkit-calendar-picker-indicator,
.form-control[type="time"]::-webkit-calendar-picker-indicator,
.form-control[type="datetime-local"]::-webkit-calendar-picker-indicator {
   cursor: pointer;
   filter: invert(1) sepia(100%) saturate(500%) hue-rotate(290deg);
   opacity: 0.7;
   transition: opacity 0.2s;
   padding: 4px;
}

.form-control[type="date"]::-webkit-calendar-picker-indicator:hover,
.form-control[type="time"]::-webkit-calendar-picker-indicator:hover,
.form-control[type="datetime-local"]::-webkit-calendar-picker-indicator:hover {
   opacity: 1;
}

.btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   padding: 8px 20px;
   border-radius: 4px;
   font-family: var(--font-base);
   font-size: 14px;
   font-weight: 700;
   cursor: pointer;
   letter-spacing: 1px;
   text-transform: uppercase;
   transition: var(--trans-smooth);
   border: none;
   outline: none;
}

.btn:active {
   transform: translateY(1px);
}

.btn:focus-visible {
   box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--acc);
}

.btn-primary {
   background: var(--acc-y);
   color: #000;
}

.btn-primary:hover {
   background: #ffe066;
   box-shadow: 0 0 15px rgba(var(--acc-y-rgb), 0.3);
}

.btn-outline {
   background: transparent;
   border: 1px solid var(--brd);
   color: var(--text);
}

.btn-outline:hover {
   border-color: var(--acc-y);
   color: var(--acc-y);
   background: rgba(var(--acc-y-rgb), 0.05);
}

.btn-danger {
   background: rgba(var(--acc3-rgb), 0.1);
   border: 1px solid var(--plus);
   color: var(--plus);
}

.btn-danger:hover {
   background: var(--plus);
   color: var(--fg);
   box-shadow: 0 0 15px rgba(var(--acc3-rgb), 0.3);
}

.btn-success {
   background: rgba(var(--acc4-rgb), 0.1);
   border: 1px solid var(--green);
   color: var(--green);
}

.btn-success:hover {
   background: var(--green);
   color: #000;
   box-shadow: 0 0 15px rgba(var(--acc4-rgb), 0.3);
}

.btn-group {
   display: inline-flex;
   border-radius: 4px;
   border: 1px solid var(--brd);
   overflow: hidden;
}

.btn-group .btn {
   border: none;
   border-radius: 0;
   border-right: 1px solid var(--brd);
   background: var(--s2);
   color: var(--dim);
}

.btn-group .btn:last-child {
   border-right: none;
}

.btn-group .btn:hover {
   background: var(--s3);
   color: var(--text);
}

.btn-group .btn.active {
   background: rgba(var(--acc-y-rgb), 0.1);
   color: var(--acc);
   box-shadow: inset 0 -2px 0 var(--acc);
}

.dropdown {
   position: relative;
   display: inline-block;
}

.dropdown-menu {
   position: absolute;
   top: 100%;
   left: 0;
   margin-top: 8px;
   background: var(--s2);
   border: 1px solid var(--brd);
   border-radius: 4px;
   box-shadow: 0 10px 30px rgba(var(--black-rgb), 0.5);
   min-width: 180px;
   z-index: 100;
   opacity: 0;
   visibility: hidden;
   transform: translateY(-10px);
   transition: visibility 0.2s, transform 0.2s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.2s;
}

.dropdown-menu.show {
   opacity: 1;
   visibility: visible;
   transform: translateY(0);
}

.dropdown-menu.right {
   left: auto;
   right: 0;
}

.dropdown-item {
   display: flex;
   align-items: center;
   gap: 8px;
   padding: 10px 16px;
   color: var(--text);
   font-family: var(--font-base);
   font-size: 14px;
   font-weight: 500;
   text-decoration: none;
   cursor: pointer;
   transition: background 0.15s;
   border-bottom: 1px solid var(--brd);
}

.dropdown-item:last-child {
   border-bottom: none;
}

.dropdown-item:hover {
   background: var(--s3);
   color: var(--acc);
}

.dropdown-item.danger {
   color: var(--plus);
}

.dropdown-item.danger:hover {
   background: rgba(var(--acc3-rgb), 0.1);
}

/* ── 4. UI KIT - TOGGLES, SLIDERS & UPLOAD ── */
.toggle-wrapper {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   cursor: pointer;
   user-select: none;
}

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

.toggle-track {
   width: 40px;
   height: 22px;
   background: var(--s3);
   border: 1px solid var(--brd2);
   border-radius: 20px;
   position: relative;
   transition: var(--trans-smooth);
}

.toggle-track::after {
   content: '';
   position: absolute;
   top: 3px;
   left: 3px;
   width: 14px;
   height: 14px;
   background: var(--dimmer);
   border-radius: 50%;
   transition: var(--trans-smooth);
}

.toggle-input:checked + .toggle-track {
   background: rgba(var(--acc-rgb), 0.15);
   border-color: var(--acc);
}

.toggle-input:checked + .toggle-track::after {
   left: 21px;
   background: var(--acc);
   box-shadow: 0 0 10px var(--acc);
}

.toggle-label {
   font-family: var(--font-base);
   font-size: 13px;
   font-weight: 600;
   color: var(--text);
}

.range-slider {
   -webkit-appearance: none;
   appearance: none;
   width: 100%;
   background: transparent;
   height: 24px;
}

.range-slider:focus {
   outline: 2px solid var(--acc);
   outline-offset: 2px;
}

.range-slider::-webkit-slider-runnable-track {
   width: 100%;
   height: 6px;
   cursor: pointer;
   background: linear-gradient(90deg, var(--s3) 0%, var(--brd) 100%);
   border-radius: 3px;
   border: 1px solid var(--brd2);
}

.range-slider::-webkit-slider-thumb {
   -webkit-appearance: none;
   appearance: none;
   height: 18px;
   width: 18px;
   border-radius: 3px;
   background: var(--acc-y);
   cursor: pointer;
   margin-top: -7px;
   box-shadow: 0 0 15px rgba(var(--acc-y-rgb), 0.4), inset 0 0 0 2px rgba(255, 255, 255, 0.2);
   border: 1px solid rgba(255, 255, 255, 0.8);
   transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.2);
}

.range-slider::-webkit-slider-thumb:hover {
   transform: scale(1.25) rotate(90deg);
}

.range-slider::-webkit-slider-thumb:active {
   transform: scale(1.1) rotate(0deg);
   background: #fff;
   box-shadow: 0 0 20px #fff;
}

.file-upload-zone {
   border: 2px dashed var(--brd);
   border-radius: 6px;
   padding: 30px;
   text-align: center;
   background: var(--s2);
   cursor: pointer;
   transition: var(--trans-smooth);
}

.file-upload-zone:hover,
.file-upload-zone:focus-visible {
   border-color: var(--acc);
   background: rgba(var(--acc-rgb), 0.02);
   outline: none;
}

.file-icon {
   font-size: 24px;
   color: var(--dim);
   margin-bottom: 10px;
   display: block;
   transition: color 0.2s;
}

.file-upload-zone:hover .file-icon {
   color: var(--acc);
}

/* ── 5. UI KIT - ALERTS, TOOLTIPS & PROGRESS ── */
.alert {
   padding: 12px 16px;
   border-radius: 4px;
   font-family: var(--font-base);
   font-size: 14px;
   display: flex;
   gap: 12px;
   align-items: center;
   margin-bottom: 12px;
   border: 1px solid var(--brd);
   border-left: 3px solid var(--brd);
   background: var(--s2);
}

.alert-icon {
   font-family: var(--font-display);
   font-size: 18px;
   line-height: 1;
}

.alert-info {
   background: rgba(var(--acc2-rgb), 0.05);
   border-color: rgba(var(--acc2-rgb), 0.3);
   border-left-color: var(--open);
   color: var(--text);
}

.alert-info .alert-icon {
   color: var(--open);
}

.alert-success {
   background: rgba(var(--acc4-rgb), 0.05);
   border-color: rgba(var(--acc4-rgb), 0.3);
   border-left-color: var(--green);
   color: var(--text);
}

.alert-success .alert-icon {
   color: var(--green);
}

.alert-warning {
   background: rgba(var(--acc-y-rgb), 0.05);
   border-color: rgba(var(--acc-y-rgb), 0.3);
   border-left-color: var(--acc-y);
   color: var(--text);
}

.alert-warning .alert-icon {
   color: var(--acc-y);
}

.alert-danger {
   background: rgba(var(--acc3-rgb), 0.05);
   border-color: rgba(var(--acc3-rgb), 0.3);
   border-left-color: var(--plus);
   color: var(--text);
}

.alert-danger .alert-icon {
   color: var(--plus);
}

.loader {
   width: 24px;
   height: 24px;
   border: 2px solid var(--brd);
   border-top-color: var(--acc);
   border-radius: 50%;
   animation: spin 1s linear infinite;
   display: inline-block;
}

@keyframes spin {
   0% { transform: rotate(0deg); }
   100% { transform: rotate(360deg); }
}

.progress-wrap {
   width: 100%;
   background: var(--s3);
   border-radius: 4px;
   overflow: hidden;
   height: 8px;
   border: 1px solid var(--brd);
   position: relative;
}

.progress-bar {
   height: 100%;
   background: var(--acc-y);
   transition: width 0.3s ease;
   box-shadow: 0 0 8px rgba(var(--acc-y-rgb), 0.5);
}

.progress-bar.green {
   background: var(--green);
   box-shadow: 0 0 8px rgba(var(--acc4-rgb), 0.5);
}

.tooltip-wrap {
   position: relative;
   display: inline-flex;
   cursor: help;
}

.tooltip-wrap .tooltip-text {
   visibility: hidden;
   width: max-content;
   max-width: 220px;
   background-color: var(--s3);
   color: var(--text);
   text-align: center;
   border-radius: 4px;
   padding: 6px 10px;
   position: absolute;
   z-index: 10;
   bottom: 125%;
   left: 50%;
   transform: translateX(-50%);
   font-family: var(--font-mono);
   font-size: 10px;
   border: 1px solid var(--brd);
   opacity: 0;
   transition: var(--trans-smooth);
   box-shadow: var(--shadow-sm);
   pointer-events: none;
}

.tooltip-wrap .tooltip-text::after {
   content: "";
   position: absolute;
   top: 100%;
   left: 50%;
   margin-left: -5px;
   border-width: 5px;
   border-style: solid;
   border-color: var(--brd) transparent transparent transparent;
}

.tooltip-wrap:hover .tooltip-text,
.tooltip-wrap:focus-within .tooltip-text {
   visibility: visible;
   opacity: 1;
   bottom: 135%;
}

.modal-overlay {
   position: fixed;
   inset: 0;
   background: rgba(var(--bg-rgb), 0.8);
   backdrop-filter: blur(4px);
   display: flex;
   align-items: center;
   justify-content: center;
   z-index: 100;
   opacity: 0;
   pointer-events: none;
   transition: opacity 0.3s ease;
}

.modal-overlay.active {
   opacity: 1;
   pointer-events: all;
}

.modal-content {
   background: var(--s1);
   border: 1px solid var(--brd);
   border-radius: 6px;
   width: 90%;
   max-width: 500px;
   padding: 24px;
   transform: scale(0.95) translateY(20px);
   opacity: 0;
   transition: var(--trans-smooth);
   box-shadow: var(--shadow-lg);
}

.modal-overlay.active .modal-content {
   transform: scale(1) translateY(0);
   opacity: 1;
}

.modal-header {
   font-family: var(--font-display);
   font-size: 24px;
   color: var(--acc);
   margin-bottom: 16px;
   display: flex;
   justify-content: space-between;
   align-items: center;
   letter-spacing: 1px;
}

.modal-close {
   cursor: pointer;
   color: var(--dim);
   background: none;
   border: none;
   font-size: 20px;
   line-height: 1;
   transition: color 0.2s;
   outline: none;
}

.modal-close:hover,
.modal-close:focus-visible {
   color: var(--plus);
}

/* ── 6. UI KIT - AVATARS & PROFILE ── */
.avatar {
   border-radius: 50%;
   object-fit: cover;
   border: 2px solid var(--brd);
   background: var(--s2);
   display: inline-flex;
   align-items: center;
   justify-content: center;
   font-family: var(--font-display);
   color: var(--dim);
}

.avatar-sm {
   width: 32px;
   height: 32px;
   font-size: 14px;
}

.avatar-md {
   width: 64px;
   height: 64px;
   font-size: 24px;
}

.avatar-lg {
   width: 120px;
   height: 120px;
   font-size: 40px;
   border-width: 4px;
   border-color: var(--s3);
   box-shadow: var(--shadow-sm);
}

.status-pill {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   padding: 4px 10px;
   border-radius: 20px;
   font-family: var(--font-mono);
   font-size: 9px;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 1px;
   border: 1px solid var(--brd);
   background: var(--s2);
}

.status-pill::before {
   content: '';
   display: block;
   width: 6px;
   height: 6px;
   border-radius: 50%;
}

.status-active::before {
   background: var(--green);
   box-shadow: 0 0 5px var(--green);
}

.status-warning::before {
   background: var(--acc);
   box-shadow: 0 0 5px var(--acc);
}

.status-danger::before {
   background: var(--plus);
   box-shadow: 0 0 5px var(--plus);
}

.status-inactive::before {
   background: var(--dim);
}

.profile-card {
   background: var(--s2);
   border: 1px solid var(--brd);
   border-radius: 6px;
   overflow: hidden;
   display: flex;
   flex-direction: column;
   transition: var(--trans-smooth);
}

.profile-card:hover {
   border-color: var(--brd2);
   box-shadow: var(--shadow-sm);
}

.profile-header {
   background: linear-gradient(to right, var(--s3), var(--s1));
   padding: 24px;
   display: flex;
   gap: 24px;
   align-items: center;
   border-bottom: 1px solid var(--brd);
   position: relative;
}

.profile-info {
   flex: 1;
}

.profile-name {
   font-family: var(--font-display);
   font-size: 32px;
   color: var(--fg);
   letter-spacing: 1px;
   line-height: 1;
   margin-bottom: 4px;
}

.profile-alias {
   font-family: var(--font-base);
   font-size: 14px;
   color: var(--acc);
   font-weight: 600;
   margin-bottom: 8px;
}

.profile-body {
   padding: 24px;
}

.profile-stats-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
   gap: 16px;
   margin-bottom: 24px;
}

.stat-box {
   background: var(--s3);
   border: 1px solid var(--brd);
   padding: 12px;
   border-radius: 4px;
   text-align: center;
   transition: background 0.2s;
}

.stat-box:hover {
   background: var(--s2);
}

.stat-val {
   font-family: var(--font-display);
   font-size: 24px;
   color: var(--text);
   line-height: 1;
}

.stat-lbl {
   font-family: var(--font-mono);
   font-size: 9px;
   color: var(--dim);
   text-transform: uppercase;
   margin-top: 4px;
}

.profile-actions {
   padding: 16px 24px;
   background: var(--s1);
   border-top: 1px solid var(--brd);
   display: flex;
   justify-content: flex-end;
   gap: 12px;
}

/* ── 7. WEATHER COMPONENTS ── */
.weather-timeline-long {
   display: flex;
   gap: 8px;
   overflow-x: auto;
   padding-bottom: 12px;
}

.weather-timeline-long::-webkit-scrollbar {
   height: 4px;
}

.weather-timeline-long::-webkit-scrollbar-track {
   background: var(--s1);
   border-radius: 2px;
}

.weather-timeline-long::-webkit-scrollbar-thumb {
   background: var(--brd2);
   border-radius: 2px;
}

.w-card {
   flex-shrink: 0;
   width: 68px;
   background: var(--s2);
   border: 1px solid var(--brd);
   border-radius: 6px;
   display: flex;
   flex-direction: column;
   align-items: center;
   padding: 12px 6px;
   transition: var(--trans-smooth);
   cursor: default;
}

.w-card:hover {
   border-color: var(--dim);
   background: var(--s3);
   transform: translateY(-2px);
}

.w-card.current {
   border-color: var(--acc);
   background: rgba(var(--acc-y-rgb), 0.05);
}

.w-time {
   font-family: var(--font-mono);
   font-size: 11px;
   color: var(--dim);
   margin-bottom: 10px;
}

.w-card.current .w-time {
   color: var(--acc);
   font-weight: bold;
}

.w-temp {
   font-family: var(--font-display);
   font-size: 22px;
   color: var(--text);
   line-height: 1;
   margin-top: 10px;
   margin-bottom: 6px;
}

.w-drop {
   display: flex;
   align-items: center;
   gap: 4px;
   font-family: var(--font-mono);
   font-size: 10px;
   font-weight: bold;
}

.weather-timeline-short {
   background: var(--s2);
   border: 1px solid var(--brd);
   border-radius: 6px;
   padding: 20px;
   width: 100%;
   position: relative;
   transition: var(--trans-smooth);
}

.weather-timeline-short:hover {
   border-color: var(--brd2);
   box-shadow: var(--shadow-sm);
}

.w-precip-header {
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
   margin-bottom: 24px;
   flex-wrap: wrap;
   gap: 10px;
}

.w-precip-title {
   font-family: var(--font-display);
   font-size: 20px;
   color: var(--text);
   letter-spacing: 1px;
   line-height: 1;
}

.w-precip-status {
   font-family: var(--font-base);
   font-size: 14px;
   color: var(--open);
   font-weight: 700;
   background: rgba(var(--acc2-rgb), 0.1);
   padding: 4px 10px;
   border-radius: 4px;
   border: 1px solid rgba(var(--acc2-rgb), 0.2);
}

.w-precip-status.alert {
   color: var(--plus);
   background: rgba(var(--acc3-rgb), 0.1);
   border-color: rgba(var(--acc3-rgb), 0.2);
}

.w-graph-container {
   position: relative;
   height: 120px;
   margin-bottom: 10px;
   padding-left: 40px;
}

.w-grid-lines {
   position: absolute;
   inset: 0;
   left: 40px;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   pointer-events: none;
}

.w-grid-line-wrap {
   position: relative;
   width: 100%;
   height: 1px;
}

.w-grid-line {
   width: 100%;
   height: 1px;
   border-top: 1px dashed var(--brd2);
}

.w-grid-lbl {
   position: absolute;
   left: -40px;
   top: -5px;
   width: 34px;
   text-align: right;
   font-family: var(--font-mono);
   font-size: 9px;
   color: var(--dim);
}

.w-bars {
   display: flex;
   align-items: flex-end;
   gap: 2px;
   height: 100%;
   width: 100%;
   position: relative;
   z-index: 2;
   padding-top: 10px;
}

.w-bar-col {
   flex: 1;
   height: 100%;
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
   position: relative;
   cursor: crosshair;
}

.w-bar-fill {
   width: 100%;
   border-radius: 2px 2px 0 0;
   min-height: 1px;
   transition: opacity 0.2s;
}

.w-bar-col:hover .w-bar-fill {
   opacity: 0.7;
}

.w-bar-fill.intense {
   background: var(--plus);
   box-shadow: 0 0 10px rgba(var(--acc3-rgb), 0.4);
}

.w-bar-fill.medium {
   background: var(--open);
   box-shadow: 0 0 10px rgba(var(--acc2-rgb), 0.4);
}

.w-bar-fill.light {
   background: rgba(var(--acc2-rgb), 0.4);
   border-top: 1px solid var(--open);
}

.w-time-axis {
   display: flex;
   justify-content: space-between;
   padding-left: 40px;
   font-family: var(--font-mono);
   font-size: 9px;
   color: var(--dim);
   margin-top: 5px;
}

/* ── 8. LAYOUT SYSTEM & UTILITIES ── */
.grid-fluid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
   gap: 20px;
   width: 100%;
}

.grid-2 {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 20px;
   width: 100%;
}

.grid-3 {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 20px;
   width: 100%;
}

.grid-4 {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 20px;
   width: 100%;
}

.mobile-header {
   display: none;
   height: 60px;
   background: var(--s1);
   border-bottom: 1px solid var(--brd);
   padding: 0 16px;
   align-items: center;
   justify-content: space-between;
   position: sticky;
   top: 0;
   z-index: 30;
}

.mobile-header .btn-collapse {
   width: 32px;
   height: 32px;
}

.sidebar-overlay {
   display: none;
   position: fixed;
   inset: 0;
   background: rgba(var(--black-rgb), 0.6);
   backdrop-filter: blur(3px);
   z-index: 45;
   opacity: 0;
   transition: opacity 0.3s ease;
}

.sidebar-overlay.active {
   display: block;
   opacity: 1;
   pointer-events: auto;
}

/* ══════════════════════════════════
   9. RACE ANALYSIS COMPONENTS
══════════════════════════════════ */

/* ── 9.1 Race Timeline (Position Evolution) ── */
.race-timeline {
   background: var(--s2);
   border: 1px solid var(--brd);
   border-radius: 6px;
   padding: 16px;
   overflow: hidden;
}

.race-timeline-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 12px;
}

.race-timeline-title {
   font-family: var(--font-display);
   font-size: 16px;
   color: var(--acc-y);
   letter-spacing: 2px;
}

.race-timeline-legend {
   display: flex;
   gap: 12px;
   flex-wrap: wrap;
}

.race-timeline-legend-item {
   display: flex;
   align-items: center;
   gap: 4px;
   font-family: var(--font-mono);
   font-size: 10px;
   color: var(--dim);
}

.race-timeline-legend-dot {
   width: 8px;
   height: 8px;
   border-radius: 2px;
}

.race-timeline-track {
   position: relative;
   height: 200px;
   border-left: 1px solid var(--brd);
   border-bottom: 1px solid var(--brd);
   margin-left: 30px;
   padding-left: 4px;
}

.race-timeline-yaxis {
   position: absolute;
   left: -30px;
   top: 0;
   height: 100%;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
}

.race-timeline-ylabel {
   font-family: var(--font-mono);
   font-size: 9px;
   color: var(--dim);
   text-align: right;
   width: 24px;
}

.race-timeline-grid {
   position: absolute;
   inset: 0;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   pointer-events: none;
}

.race-timeline-grid-line {
   width: 100%;
   border-top: 1px dashed rgba(255,255,255,0.04);
}

.race-timeline-line {
   position: absolute;
   inset: 0;
   pointer-events: none;
}

.race-timeline-line svg {
   width: 100%;
   height: 100%;
}

.race-timeline-xaxis {
   display: flex;
   justify-content: space-between;
   margin-left: 30px;
   margin-top: 4px;
   padding-left: 4px;
}

.race-timeline-xlabel {
   font-family: var(--font-mono);
   font-size: 9px;
   color: var(--dim);
}

/* ── 9.2 Lap Time Evolution Chart ── */
.lap-evolution {
   background: var(--s2);
   border: 1px solid var(--brd);
   border-radius: 6px;
   padding: 16px;
}

.lap-ev-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 12px;
}

.lap-ev-title {
   font-family: var(--font-display);
   font-size: 16px;
   color: var(--acc-y);
   letter-spacing: 2px;
}

.lap-ev-legend {
   display: flex;
   gap: 10px;
}

.lap-ev-legend-item {
   display: flex;
   align-items: center;
   gap: 4px;
   font-family: var(--font-mono);
   font-size: 10px;
   color: var(--dim);
}

.lap-ev-legend-swatch {
   width: 16px;
   height: 3px;
   border-radius: 1px;
}

.lap-ev-chart {
   position: relative;
   height: 180px;
   border-left: 1px solid var(--brd);
   border-bottom: 1px solid var(--brd);
   margin-left: 40px;
}

.lap-ev-yaxis {
   position: absolute;
   left: -40px;
   top: 0;
   height: 100%;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
}

.lap-ev-ylabel {
   font-family: var(--font-mono);
   font-size: 9px;
   color: var(--dim);
   text-align: right;
   width: 34px;
}

.lap-ev-grid {
   position: absolute;
   inset: 0;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   pointer-events: none;
}

.lap-ev-grid-line {
   width: 100%;
   border-top: 1px dashed rgba(255,255,255,0.04);
}

.lap-ev-line {
   position: absolute;
   inset: 0;
}

.lap-ev-line svg {
   width: 100%;
   height: 100%;
}

.lap-ev-stint-sep {
   position: absolute;
   top: 0;
   bottom: 0;
   width: 1px;
   background: rgba(255,255,255,0.08);
   border-left: 1px dashed var(--dimmer);
}

.lap-ev-reference {
   position: absolute;
   left: 0;
   right: 0;
   height: 1px;
   border-top: 1px dashed var(--green);
   opacity: 0.5;
}

.lap-ev-reference-label {
   position: absolute;
   right: 4px;
   top: -14px;
   font-family: var(--font-mono);
   font-size: 9px;
   color: var(--green);
}

.lap-ev-xaxis {
   display: flex;
   justify-content: space-between;
   margin-left: 40px;
   margin-top: 4px;
}

.lap-ev-xlabel {
   font-family: var(--font-mono);
   font-size: 9px;
   color: var(--dim);
}

/* ── 9.3 Stint Card ── */
.stint-card {
   background: var(--s2);
   border: 1px solid var(--brd);
   border-radius: 6px;
   overflow: hidden;
   transition: border-color 0.2s;
}

.stint-card:hover {
   border-color: var(--brd2);
}

.stint-card-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 10px 14px;
   background: var(--s3);
   border-bottom: 1px solid var(--brd);
}

.stint-card-number {
   font-family: var(--font-display);
   font-size: 18px;
   color: var(--acc-y);
   letter-spacing: 1px;
}

.stint-card-type {
   font-family: var(--font-mono);
   font-size: 9px;
   text-transform: uppercase;
   letter-spacing: 1px;
   padding: 2px 8px;
   border-radius: 3px;
   border: 1px solid var(--brd);
}

.stint-card-type.quali {
   color: var(--acc2);
   border-color: rgba(var(--acc2-rgb), 0.3);
   background: rgba(var(--acc2-rgb), 0.08);
}

.stint-card-type.race {
   color: var(--green);
   border-color: rgba(var(--acc4-rgb), 0.3);
   background: rgba(var(--acc4-rgb), 0.08);
}

.stint-card-body {
   padding: 14px;
}

.stint-card-laps {
   font-family: var(--font-mono);
   font-size: 11px;
   color: var(--text);
   margin-bottom: 10px;
}

.stint-card-laps span {
   color: var(--acc-y);
   font-weight: 700;
}

.stint-card-stats {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 8px;
   margin-bottom: 10px;
}

.stint-card-stat {
   background: var(--s3);
   border: 1px solid var(--brd);
   border-radius: 4px;
   padding: 8px;
   text-align: center;
}

.stint-card-stat-val {
   font-family: var(--font-mono);
   font-size: 14px;
   font-weight: 700;
   color: var(--text);
}

.stint-card-stat-val.good { color: var(--green); }
.stint-card-stat-val.bad { color: var(--plus); }

.stint-card-stat-lbl {
   font-family: var(--font-mono);
   font-size: 8px;
   color: var(--dim);
   text-transform: uppercase;
   letter-spacing: 1px;
   margin-top: 2px;
}

.stint-card-sectors {
   display: flex;
   gap: 6px;
}

.stint-card-sector {
   flex: 1;
   text-align: center;
   padding: 6px 4px;
   background: var(--s3);
   border: 1px solid var(--brd);
   border-radius: 3px;
}

.stint-card-sector-lbl {
   font-family: var(--font-mono);
   font-size: 8px;
   color: var(--dim);
   text-transform: uppercase;
}

.stint-card-sector-val {
   font-family: var(--font-mono);
   font-size: 11px;
   font-weight: 700;
   color: var(--text);
   margin-top: 2px;
}

.stint-card-sector-val.best { color: var(--green); }

/* ══════════════════════════════════
   10. CHAMPIONSHIP & STANDINGS
══════════════════════════════════ */

/* ── 10.1 Standings Table ── */
.standings-table {
   width: 100%;
   border-collapse: collapse;
   font-size: 13px;
}

.standings-table thead th {
   font-family: var(--font-mono);
   font-size: 9px;
   color: var(--dim);
   text-transform: uppercase;
   letter-spacing: 1px;
   padding: 8px 12px;
   text-align: left;
   border-bottom: 1px solid var(--brd);
   background: var(--s3);
}

.standings-table thead th.r {
   text-align: right;
}

.standings-table tbody td {
   padding: 10px 12px;
   border-bottom: 1px solid var(--brd);
   vertical-align: middle;
}

.standings-table tbody tr:hover td {
   background: rgba(255,255,255,0.02);
}

.standings-pos {
   font-family: var(--font-display);
   font-size: 20px;
   color: var(--dim);
   width: 36px;
   text-align: center;
}

.standings-pos.top1 { color: var(--gold); }
.standings-pos.top2 { color: var(--silver); }
.standings-pos.top3 { color: var(--bronze); }

.standings-trend {
   font-family: var(--font-mono);
   font-size: 11px;
   width: 24px;
   text-align: center;
}

.trend-up { color: var(--green); }
.trend-down { color: var(--plus); }
.trend-same { color: var(--dimmer); }

.standings-driver {
   font-family: var(--font-base);
   font-weight: 700;
   color: var(--text);
}

.standings-team {
   font-family: var(--font-mono);
   font-size: 10px;
   color: var(--dim);
   margin-top: 2px;
}

.standings-points {
   font-family: var(--font-display);
   font-size: 22px;
   color: var(--acc-y);
   text-align: right;
}

.standings-bar-wrap {
   width: 100px;
   height: 6px;
   background: var(--s3);
   border-radius: 3px;
   overflow: hidden;
}

.standings-bar {
   height: 100%;
   background: var(--acc-y);
   border-radius: 3px;
   transition: width 0.3s;
}

.standings-stats {
   display: flex;
   gap: 12px;
}

.standings-stat {
   text-align: center;
}

.standings-stat-val {
   font-family: var(--font-mono);
   font-size: 13px;
   font-weight: 700;
   color: var(--text);
}

.standings-stat-lbl {
   font-family: var(--font-mono);
   font-size: 8px;
   color: var(--dim);
   text-transform: uppercase;
}

/* ── 10.2 Championship Summary ── */
.championship-summary {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
   gap: 12px;
   margin-bottom: 20px;
}

.champ-stat {
   background: var(--s2);
   border: 1px solid var(--brd);
   border-radius: 6px;
   padding: 14px;
   text-align: center;
}

.champ-stat-val {
   font-family: var(--font-display);
   font-size: 28px;
   color: var(--acc-y);
   line-height: 1;
}

.champ-stat-lbl {
   font-family: var(--font-mono);
   font-size: 9px;
   color: var(--dim);
   text-transform: uppercase;
   letter-spacing: 1px;
   margin-top: 4px;
}

/* ══════════════════════════════════
   11. CIRCUIT PROFILE
══════════════════════════════════ */

.circuit-card {
   background: var(--s2);
   border: 1px solid var(--brd);
   border-radius: 6px;
   overflow: hidden;
}

.circuit-card-header {
   background: linear-gradient(135deg, var(--s3), var(--s1));
   padding: 20px 24px;
   border-bottom: 1px solid var(--brd);
}

.circuit-card-name {
   font-family: var(--font-display);
   font-size: 28px;
   color: var(--fg);
   letter-spacing: 2px;
   margin-bottom: 4px;
}

.circuit-card-location {
   font-family: var(--font-mono);
   font-size: 11px;
   color: var(--dim);
}

.circuit-card-body {
   padding: 20px 24px;
}

.circuit-map-wrap {
   background: var(--s3);
   border: 1px solid var(--brd);
   border-radius: 6px;
   padding: 20px;
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: 20px;
   min-height: 180px;
}

.circuit-map-placeholder {
   font-family: var(--font-mono);
   font-size: 11px;
   color: var(--dimmer);
   text-align: center;
}

.circuit-info-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
   gap: 12px;
   margin-bottom: 20px;
}

.circuit-info-item {
   background: var(--s3);
   border: 1px solid var(--brd);
   border-radius: 4px;
   padding: 12px;
   text-align: center;
}

.circuit-info-val {
   font-family: var(--font-mono);
   font-size: 16px;
   font-weight: 700;
   color: var(--text);
}

.circuit-info-lbl {
   font-family: var(--font-mono);
   font-size: 8px;
   color: var(--dim);
   text-transform: uppercase;
   letter-spacing: 1px;
   margin-top: 4px;
}

.circuit-sectors {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 10px;
   margin-bottom: 20px;
}

.circuit-sector {
   background: var(--s3);
   border: 1px solid var(--brd);
   border-radius: 4px;
   padding: 14px;
   text-align: center;
}

.circuit-sector-lbl {
   font-family: var(--font-mono);
   font-size: 9px;
   color: var(--dim);
   text-transform: uppercase;
   letter-spacing: 1px;
   margin-bottom: 6px;
}

.circuit-sector-val {
   font-family: var(--font-mono);
   font-size: 16px;
   font-weight: 700;
   color: var(--acc-y);
}

.circuit-sector-color {
   width: 100%;
   height: 3px;
   border-radius: 2px;
   margin-top: 6px;
}

.circuit-sector-color.s1 { background: var(--acc2); }
.circuit-sector-color.s2 { background: var(--acc-y); }
.circuit-sector-color.s3 { background: var(--acc); }

.circuit-record {
   background: rgba(var(--acc-y-rgb), 0.05);
   border: 1px solid rgba(var(--acc-y-rgb), 0.2);
   border-radius: 4px;
   padding: 14px;
   display: flex;
   justify-content: space-between;
   align-items: center;
}

.circuit-record-lbl {
   font-family: var(--font-mono);
   font-size: 10px;
   color: var(--dim);
   text-transform: uppercase;
   letter-spacing: 1px;
}

.circuit-record-val {
   font-family: var(--font-mono);
   font-size: 18px;
   font-weight: 700;
   color: var(--green);
}

.circuit-record-holder {
   font-family: var(--font-base);
   font-size: 12px;
   color: var(--text);
   margin-top: 2px;
}

/* ══════════════════════════════════
   12. ADVANCED COMPARISON
══════════════════════════════════ */

/* ── 12.1 Head-to-Head ── */
.h2h-container {
   display: grid;
   grid-template-columns: 1fr auto 1fr;
   gap: 0;
   align-items: stretch;
}

.h2h-pilot {
   background: var(--s2);
   border: 1px solid var(--brd);
   border-radius: 6px;
   padding: 16px;
}

.h2h-pilot.winner {
   border-color: var(--green);
   background: rgba(var(--acc4-rgb), 0.03);
}

.h2h-pilot-name {
   font-family: var(--font-base);
   font-size: 16px;
   font-weight: 700;
   color: var(--text);
   margin-bottom: 4px;
}

.h2h-pilot-team {
   font-family: var(--font-mono);
   font-size: 10px;
   color: var(--dim);
   margin-bottom: 14px;
}

.h2h-metrics {
   display: flex;
   flex-direction: column;
   gap: 10px;
}

.h2h-metric {
   display: flex;
   flex-direction: column;
   gap: 4px;
}

.h2h-metric-lbl {
   font-family: var(--font-mono);
   font-size: 9px;
   color: var(--dim);
   text-transform: uppercase;
   letter-spacing: 1px;
}

.h2h-bar-wrap {
   display: flex;
   height: 8px;
   border-radius: 4px;
   overflow: hidden;
   background: var(--s3);
}

.h2h-bar-left {
   height: 100%;
   background: var(--acc);
   border-radius: 4px 0 0 4px;
   transition: width 0.3s;
}

.h2h-bar-right {
   height: 100%;
   background: var(--acc2);
   border-radius: 0 4px 4px 0;
   transition: width 0.3s;
}

.h2h-values {
   display: flex;
   justify-content: space-between;
}

.h2h-val {
   font-family: var(--font-mono);
   font-size: 12px;
   font-weight: 700;
}

.h2h-val.left { color: var(--acc); }
.h2h-val.right { color: var(--acc2); }
.h2h-val.winner-val { color: var(--green); }

.h2h-vs {
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 0 16px;
}

.h2h-vs-badge {
   font-family: var(--font-display);
   font-size: 18px;
   color: var(--dimmer);
   letter-spacing: 2px;
   background: var(--s3);
   border: 1px solid var(--brd);
   border-radius: 50%;
   width: 40px;
   height: 40px;
   display: flex;
   align-items: center;
   justify-content: center;
}

/* ── 12.2 Consistency Chart ── */
.consistency-chart {
   background: var(--s2);
   border: 1px solid var(--brd);
   border-radius: 6px;
   padding: 16px;
}

.consistency-chart-title {
   font-family: var(--font-display);
   font-size: 16px;
   color: var(--acc-y);
   letter-spacing: 2px;
   margin-bottom: 14px;
}

.consistency-row {
   display: flex;
   align-items: center;
   gap: 10px;
   padding: 8px 0;
   border-bottom: 1px solid var(--brd);
}

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

.consistency-name {
   font-family: var(--font-base);
   font-size: 12px;
   font-weight: 600;
   color: var(--text);
   width: 120px;
   flex-shrink: 0;
}

.consistency-bar-wrap {
   flex: 1;
   height: 16px;
   background: var(--s3);
   border-radius: 3px;
   position: relative;
   overflow: hidden;
}

.consistency-bar {
   position: absolute;
   top: 2px;
   bottom: 2px;
   border-radius: 2px;
   background: var(--acc);
   opacity: 0.7;
}

.consistency-avg {
   position: absolute;
   top: 0;
   bottom: 0;
   width: 2px;
   background: var(--acc-y);
   z-index: 2;
}

.consistency-outlier {
   position: absolute;
   top: 0;
   bottom: 0;
   width: 2px;
   background: var(--plus);
   z-index: 2;
}

.consistency-val {
   font-family: var(--font-mono);
   font-size: 11px;
   color: var(--dim);
   width: 70px;
   text-align: right;
   flex-shrink: 0;
}

/* ── 12.3 Position Heatmap ── */
.pos-heatmap {
   overflow-x: auto;
   border: 1px solid var(--brd);
   border-radius: 6px;
}

.pos-heatmap-table {
   border-collapse: collapse;
   font-size: 10px;
   font-family: var(--font-mono);
}

.pos-heatmap-table th {
   padding: 6px 8px;
   color: var(--dim);
   font-weight: 400;
   text-align: center;
   background: var(--s3);
   border: 1px solid var(--brd);
   font-size: 9px;
}

.pos-heatmap-table td {
   width: 28px;
   height: 24px;
   text-align: center;
   font-size: 9px;
   font-weight: 700;
   border: 1px solid var(--brd);
   color: #fff;
}

.pos-heatmap-table td.p1 { background: var(--gold); color: #000; }
.pos-heatmap-table td.p2 { background: var(--silver); color: #000; }
.pos-heatmap-table td.p3 { background: var(--bronze); color: #000; }
.pos-heatmap-table td.p4,
.pos-heatmap-table td.p5 { background: var(--acc2); }
.pos-heatmap-table td.p6,
.pos-heatmap-table td.p7 { background: var(--acc); }
.pos-heatmap-table td.p8,
.pos-heatmap-table td.p9 { background: var(--acc3); }
.pos-heatmap-table td.p10 { background: var(--dimmer); }

.pos-heatmap-table .driver-lbl {
   font-family: var(--font-base);
   font-size: 11px;
   font-weight: 600;
   color: var(--text);
   text-align: left;
   padding: 6px 10px;
   white-space: nowrap;
   background: var(--s2);
   min-width: 100px;
}

/* ── 12.4 Parity Chart ── */
.parity-chart {
   background: var(--s2);
   border: 1px solid var(--brd);
   border-radius: 6px;
   padding: 16px;
}

.parity-chart-title {
   font-family: var(--font-display);
   font-size: 16px;
   color: var(--acc-y);
   letter-spacing: 2px;
   margin-bottom: 14px;
}

.parity-row {
   display: flex;
   align-items: center;
   gap: 10px;
   padding: 8px 0;
   border-bottom: 1px solid var(--brd);
}

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

.parity-kart {
   font-family: var(--font-display);
   font-size: 18px;
   color: var(--acc-y);
   width: 40px;
   text-align: center;
   flex-shrink: 0;
}

.parity-bar-wrap {
   flex: 1;
   height: 20px;
   background: var(--s3);
   border-radius: 3px;
   position: relative;
   overflow: hidden;
}

.parity-bar {
   position: absolute;
   top: 2px;
   bottom: 2px;
   border-radius: 2px;
   background: var(--acc2);
   opacity: 0.6;
}

.parity-median {
   position: absolute;
   top: 0;
   bottom: 0;
   width: 2px;
   background: var(--acc-y);
   z-index: 2;
}

.parity-avg {
   font-family: var(--font-mono);
   font-size: 12px;
   font-weight: 700;
   color: var(--text);
   width: 70px;
   text-align: right;
   flex-shrink: 0;
}

.parity-indicator {
   font-family: var(--font-mono);
   font-size: 11px;
   width: 50px;
   text-align: right;
   flex-shrink: 0;
}

.parity-indicator.fast { color: var(--green); }
.parity-indicator.slow { color: var(--plus); }
.parity-indicator.neutral { color: var(--dimmer); }

/* ══════════════════════════════════
   13. NAVIGATION & UX
══════════════════════════════════ */

/* ── 13.1 Advanced Tab Panels ── */
.tab-panels {
   border: 1px solid var(--brd);
   border-radius: 6px;
   overflow: hidden;
}

.tab-bar {
   display: flex;
   background: var(--s3);
   border-bottom: 1px solid var(--brd);
   overflow-x: auto;
}

.tab-btn {
   padding: 12px 20px;
   cursor: pointer;
   font-family: var(--font-base);
   font-size: 13px;
   font-weight: 600;
   letter-spacing: 1px;
   text-transform: uppercase;
   color: var(--dim);
   border-bottom: 2px solid transparent;
   transition: color 0.15s, border-bottom-color 0.15s;
   white-space: nowrap;
   user-select: none;
   background: none;
   border-top: none;
   border-left: none;
   border-right: none;
}

.tab-btn:hover {
   color: var(--text);
}

.tab-btn.active {
   color: var(--acc-y);
   border-bottom-color: var(--acc-y);
}

.tab-panel {
   display: none;
   padding: 20px;
   background: var(--s2);
}

.tab-panel.active {
   display: block;
}

/* ── 13.2 Pagination ── */
.pagination {
   display: flex;
   align-items: center;
   gap: 4px;
   justify-content: center;
}

.pagination-page {
   width: 32px;
   height: 32px;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 4px;
   border: 1px solid var(--brd);
   background: var(--s2);
   color: var(--dim);
   font-family: var(--font-mono);
   font-size: 12px;
   cursor: pointer;
   transition: all 0.15s;
}

.pagination-page:hover {
   color: var(--text);
   border-color: var(--brd2);
}

.pagination-page.active {
   background: var(--acc-y);
   color: #000;
   border-color: var(--acc-y);
   font-weight: 700;
}

.pagination-ellipsis {
   width: 32px;
   text-align: center;
   color: var(--dimmer);
   font-family: var(--font-mono);
   font-size: 12px;
}

.pagination-prev,
.pagination-next {
   padding: 0 10px;
   height: 32px;
   display: flex;
   align-items: center;
   border-radius: 4px;
   border: 1px solid var(--brd);
   background: var(--s2);
   color: var(--dim);
   font-family: var(--font-base);
   font-size: 12px;
   cursor: pointer;
   transition: all 0.15s;
}

.pagination-prev:hover,
.pagination-next:hover {
   color: var(--text);
   border-color: var(--brd2);
}

/* ── 13.3 Breadcrumbs ── */
.breadcrumbs {
   display: flex;
   align-items: center;
   gap: 8px;
   font-family: var(--font-mono);
   font-size: 11px;
   margin-bottom: 16px;
}

.breadcrumb-item {
   color: var(--dim);
   text-decoration: none;
   transition: color 0.15s;
}

.breadcrumb-item:hover {
   color: var(--acc-y);
}

.breadcrumb-item.current {
   color: var(--text);
   font-weight: 700;
}

.breadcrumb-sep {
   color: var(--dimmer);
   font-size: 10px;
}

/* ── 13.4 Stepper ── */
.stepper {
   display: flex;
   align-items: center;
   gap: 0;
}

.stepper-step {
   display: flex;
   align-items: center;
   gap: 8px;
}

.stepper-dot {
   width: 28px;
   height: 28px;
   border-radius: 50%;
   border: 2px solid var(--brd);
   display: flex;
   align-items: center;
   justify-content: center;
   font-family: var(--font-mono);
   font-size: 11px;
   font-weight: 700;
   color: var(--dim);
   background: var(--s2);
   flex-shrink: 0;
}

.stepper-step.done .stepper-dot {
   background: var(--green);
   border-color: var(--green);
   color: #000;
}

.stepper-step.active .stepper-dot {
   border-color: var(--acc-y);
   color: var(--acc-y);
   box-shadow: 0 0 0 3px rgba(var(--acc-y-rgb), 0.15);
}

.stepper-label {
   font-family: var(--font-base);
   font-size: 12px;
   color: var(--dim);
   white-space: nowrap;
}

.stepper-step.active .stepper-label {
   color: var(--text);
   font-weight: 600;
}

.stepper-step.done .stepper-label {
   color: var(--green);
}

.stepper-connector {
   width: 40px;
   height: 2px;
   background: var(--brd);
   margin: 0 4px;
   flex-shrink: 0;
}

.stepper-step.done + .stepper-connector,
.stepper-connector.done {
   background: var(--green);
}

/* ══════════════════════════════════
   14. FEEDBACK COMPONENTS
══════════════════════════════════ */

/* ── 14.1 Skeleton Loading ── */
.skeleton {
   background: linear-gradient(90deg, var(--s3) 25%, var(--s2) 50%, var(--s3) 75%);
   background-size: 200% 100%;
   animation: skeletonShimmer 1.5s ease-in-out infinite;
   border-radius: 4px;
}

@keyframes skeletonShimmer {
   0% { background-position: 200% 0; }
   100% { background-position: -200% 0; }
}

.skeleton-text {
   height: 14px;
   margin-bottom: 8px;
}

.skeleton-text:last-child {
   width: 60%;
   margin-bottom: 0;
}

.skeleton-card {
   height: 120px;
   border-radius: 6px;
}

.skeleton-circle {
   width: 48px;
   height: 48px;
   border-radius: 50%;
}

.skeleton-title {
   height: 24px;
   width: 40%;
   margin-bottom: 12px;
}

.skeleton-subtitle {
   height: 14px;
   width: 60%;
   margin-bottom: 16px;
}

/* ── 14.2 Empty State ── */
.empty-state {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   padding: 60px 20px;
   text-align: center;
}

.empty-state-icon {
   font-size: 48px;
   color: var(--dimmer);
   margin-bottom: 16px;
   opacity: 0.5;
}

.empty-state-title {
   font-family: var(--font-display);
   font-size: 22px;
   color: var(--dim);
   letter-spacing: 2px;
   margin-bottom: 8px;
}

.empty-state-desc {
   font-family: var(--font-base);
   font-size: 14px;
   color: var(--dimmer);
   margin-bottom: 20px;
   max-width: 300px;
}

.empty-state-action {
   padding: 8px 20px;
   border-radius: 4px;
   border: 1px solid var(--brd);
   background: var(--s2);
   color: var(--acc-y);
   font-family: var(--font-base);
   font-size: 13px;
   font-weight: 600;
   cursor: pointer;
   transition: all 0.15s;
}

.empty-state-action:hover {
   border-color: var(--acc-y);
   background: rgba(var(--acc-y-rgb), 0.05);
}

/* ══════════════════════════════════
   15. MICRO-COMPONENTS
══════════════════════════════════ */

/* ── 15.1 Trend Badge ── */
.trend-badge {
   display: inline-flex;
   align-items: center;
   gap: 3px;
   font-family: var(--font-mono);
   font-size: 11px;
   font-weight: 700;
}

.trend-badge.up { color: var(--green); }
.trend-badge.down { color: var(--plus); }
.trend-badge.same { color: var(--dimmer); }

.trend-badge::before {
   content: '';
   display: inline-block;
   width: 0;
   height: 0;
}

.trend-badge.up::before {
   border-left: 4px solid transparent;
   border-right: 4px solid transparent;
   border-bottom: 5px solid var(--green);
}

.trend-badge.down::before {
   border-left: 4px solid transparent;
   border-right: 4px solid transparent;
   border-top: 5px solid var(--plus);
}

.trend-badge.same::before {
   width: 8px;
   height: 2px;
   background: var(--dimmer);
   border: none;
}

/* ── 15.2 Inline Sparkline ── */
.sparkline {
   display: inline-flex;
   align-items: flex-end;
   gap: 1px;
   height: 20px;
   vertical-align: middle;
}

.sparkline-bar {
   width: 3px;
   border-radius: 1px 1px 0 0;
   background: var(--acc2);
   transition: height 0.2s;
}

.sparkline-bar.high { background: var(--green); }
.sparkline-bar.low { background: var(--plus); }

/* ── 15.3 Record Card ── */
.record-card {
   background: linear-gradient(135deg, rgba(var(--acc-y-rgb), 0.08), var(--s2));
   border: 1px solid rgba(var(--acc-y-rgb), 0.25);
   border-radius: 6px;
   padding: 16px;
   position: relative;
   overflow: hidden;
}

.record-card::before {
   content: '🏆';
   position: absolute;
   top: 10px;
   right: 14px;
   font-size: 24px;
   opacity: 0.3;
}

.record-type {
   font-family: var(--font-mono);
   font-size: 9px;
   color: var(--dim);
   text-transform: uppercase;
   letter-spacing: 2px;
   margin-bottom: 6px;
}

.record-value {
   font-family: var(--font-mono);
   font-size: 24px;
   font-weight: 700;
   color: var(--green);
   margin-bottom: 8px;
}

.record-holder {
   font-family: var(--font-base);
   font-size: 13px;
   font-weight: 700;
   color: var(--text);
   margin-bottom: 2px;
}

.record-meta {
   font-family: var(--font-mono);
   font-size: 10px;
   color: var(--dimmer);
}

/* ── 15.4 Data Badge ── */
.data-badge {
   display: inline-flex;
   align-items: center;
   gap: 4px;
   padding: 2px 8px;
   border-radius: 3px;
   font-family: var(--font-mono);
   font-size: 10px;
   font-weight: 700;
   border: 1px solid;
}

.data-badge.best {
   background: rgba(var(--acc4-rgb), 0.1);
   color: var(--green);
   border-color: rgba(var(--acc4-rgb), 0.3);
}

.data-badge.worst {
   background: rgba(var(--acc3-rgb), 0.1);
   color: var(--plus);
   border-color: rgba(var(--acc3-rgb), 0.3);
}

.data-badge.avg {
   background: rgba(var(--acc2-rgb), 0.1);
   color: var(--open);
   border-color: rgba(var(--acc2-rgb), 0.3);
}

.data-badge.neutral {
   background: rgba(var(--dim-rgb, 124, 141, 174), 0.1);
   color: var(--dim);
   border-color: rgba(var(--dim-rgb, 124, 141, 174), 0.3);
}

/* ── 15.5 Session Type Badge ── */
.session-badge {
   display: inline-flex;
   align-items: center;
   padding: 3px 10px;
   border-radius: 3px;
   font-family: var(--font-mono);
   font-size: 10px;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 1px;
}

.session-badge.practice {
   background: rgba(var(--acc2-rgb), 0.1);
   color: var(--acc2);
   border: 1px solid rgba(var(--acc2-rgb), 0.3);
}

.session-badge.qualifying {
   background: rgba(var(--acc-y-rgb), 0.1);
   color: var(--acc-y);
   border: 1px solid rgba(var(--acc-y-rgb), 0.3);
}

.session-badge.race {
   background: rgba(var(--acc4-rgb), 0.1);
   color: var(--green);
   border: 1px solid rgba(var(--acc4-rgb), 0.3);
}

.session-badge.final {
   background: rgba(var(--acc-rgb), 0.1);
   color: var(--acc);
   border: 1px solid rgba(var(--acc-rgb), 0.3);
}