@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap');

/* Document
 * ========================================================================== */

/**
 * 1. Add border box sizing in all browsers (opinionated).
 * 2. Backgrounds do not repeat by default (opinionated).
 */

*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  background-repeat: no-repeat; /* 2 */
}

/**
 * 1. Add text decoration inheritance in all browsers (opinionated).
 * 2. Add vertical alignment inheritance in all browsers (opinionated).
 */

::before,
::after {
  text-decoration: inherit; /* 1 */
  vertical-align: inherit; /* 2 */
}

/**
 * 1. Use the default cursor in all browsers (opinionated).
 * 2. Change the line height in all browsers (opinionated).
 * 3. Breaks words to prevent overflow in all browsers (opinionated).
 * 4. Use a 4-space tab width in all browsers (opinionated).
 * 5. Remove the grey highlight on links in iOS (opinionated).
 * 6. Prevent adjustments of font size after orientation changes in iOS.
 */

:where(:root) {
  cursor: default; /* 1 */
  line-height: 1.5; /* 2 */
  overflow-wrap: break-word; /* 3 */
  -moz-tab-size: 4; /* 4 */
  -o-tab-size: 4;
     tab-size: 4; /* 4 */
  -webkit-tap-highlight-color: transparent; /* 5 */
  -webkit-text-size-adjust: 100%; /* 6 */
}

/* Sections
 * ========================================================================== */

/**
 * Remove the margin in all browsers (opinionated).
 */

:where(body) {
  margin: 0;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Edge, Firefox, and Safari.
 */

:where(h1) {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
 * ========================================================================== */

/**
 * Remove the margin on nested lists in Chrome, Edge, and Safari.
 */

:where(dl, ol, ul) :where(dl, ol, ul) {
  margin: 0;
}

/**
 * 1. Correct the inheritance of border color in Firefox.
 * 2. Add the correct box sizing in Firefox.
 */

:where(hr) {
  color: inherit; /* 1 */
  height: 0; /* 2 */
}

/**
 * Remove the list style on navigation lists in all browsers (opinionated).
 */

:where(nav) :where(ol, ul) {
  list-style-type: none;
  padding: 0;
}

/**
 * Prevent VoiceOver from ignoring list semantics in Safari (opinionated).
 */

:where(nav li)::before {
  content: "\200B";
  float: left;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 * 3. Prevent overflow of the container in all browsers (opinionated).
 */

:where(pre) {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
  overflow: auto; /* 3 */
}

/* Text-level semantics
 * ========================================================================== */

/**
 * Add the correct text decoration in Safari.
 */

:where(abbr[title]) {
  text-decoration: underline;
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

:where(b, strong) {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

:where(code, kbd, samp) {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */

:where(small) {
  font-size: 80%;
}

/* Embedded content
 * ========================================================================== */

/*
 * Change the alignment on media elements in all browsers (opinionated).
 */

:where(audio, canvas, iframe, img, svg, video) {
  vertical-align: middle;
}

/**
 * Remove the border on iframes in all browsers (opinionated).
 */

:where(iframe) {
  border-style: none;
}

/**
 * Change the fill color to match the text color in all browsers (opinionated).
 */

:where(svg:not([fill])) {
  fill: currentColor;
}

/* Tabular data
 * ========================================================================== */

/**
 * 1. Collapse border spacing in all browsers (opinionated).
 * 2. Correct table border color inheritance in all Chrome, Edge, and Safari.
 * 3. Remove text indentation from table contents in Chrome, Edge, and Safari.
 */

:where(table) {
  border-collapse: collapse; /* 1 */
  border-color: inherit; /* 2 */
  text-indent: 0; /* 3 */
}

/* Forms
 * ========================================================================== */

/**
 * Remove the margin on controls in Safari.
 */

:where(button, input, select) {
  margin: 0;
}

/**
 * Correct the inability to style buttons in iOS and Safari.
 */

:where(button, [type="button" i], [type="reset" i], [type="submit" i]) {
  -webkit-appearance: button;
}

/**
 * Change the inconsistent appearance in all browsers (opinionated).
 */

:where(fieldset) {
  border: 1px solid #a0a0a0;
}

/**
 * Add the correct vertical alignment in Chrome, Edge, and Firefox.
 */

:where(progress) {
  vertical-align: baseline;
}

/**
 * 1. Remove the margin in Firefox and Safari.
 * 3. Change the resize direction in all browsers (opinionated).
 */

:where(textarea) {
  margin: 0; /* 1 */
  resize: vertical; /* 3 */
}

/**
 * 1. Correct the odd appearance in Chrome, Edge, and Safari.
 * 2. Correct the outline style in Safari.
 */

:where([type="search" i]) {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Safari.
 */

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/**
 * Correct the text style of placeholders in Chrome, Edge, and Safari.
 */

::-webkit-input-placeholder {
  color: inherit;
  opacity: 0.54;
}

/**
 * Remove the inner padding in Chrome, Edge, and Safari on macOS.
 */

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style upload buttons in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
 * ========================================================================== */

/*
 * Add the correct styles in Safari.
 */

:where(dialog) {
  background-color: white;
  border: solid;
  color: black;
  height: -moz-fit-content;
  height: fit-content;
  left: 0;
  margin: auto;
  padding: 1em;
  position: absolute;
  right: 0;
  width: -moz-fit-content;
  width: fit-content;
}

:where(dialog:not([open])) {
  display: none;
}

/*
 * Add the correct display in Safari.
 */

:where(details > summary:first-of-type) {
  display: list-item;
}

/* Accessibility
 * ========================================================================== */

/**
 * Change the cursor on busy elements in all browsers (opinionated).
 */

:where([aria-busy="true" i]) {
  cursor: progress;
}

/*
 * Change the cursor on control elements in all browsers (opinionated).
 */

:where([aria-controls]) {
  cursor: pointer;
}

/*
 * Change the cursor on disabled, not-editable, or otherwise
 * inoperable elements in all browsers (opinionated).
 */

:where([aria-disabled="true" i], [disabled]) {
  cursor: not-allowed;
}

/*
 * Change the display on visually hidden accessible elements
 * in all browsers (opinionated).
 */

:where([aria-hidden="false" i][hidden]) {
  display: initial;
}

:where([aria-hidden="false" i][hidden]:not(:focus)) {
  clip: rect(0, 0, 0, 0);
  position: absolute;
}

:root {
  /*
  |--------------------------------------------------------------------------
  | Colours
  |--------------------------------------------------------------------------
  |
  */
  --Color_Brand: #242424;

  --Color_Green: oklch(0.723 0.192 149.579);
  --Color_Red: oklch(0.637 0.208 25.331);
  --Color_Amber: oklch(0.769 0.165 70.08);
  --Color_Purple: oklch(0.627 0.233 303.9);
  --Color_Cyan: oklch(0.715 0.126 215.221);

  --Color_Text: oklch(0.937 0.008 271.325);
  --Color_Text2: oklch(0.654 0.031 268.205);
  --Color_Text3: oklch(0.479 0.032 267.187);

  --Color_Accent: oklch(0.656 0.17 260.026);
  --Color_Accent2: oklch(0.56 0.165 262.031);
  --Color_Surface: oklch(0.187 0.011 268.112);
  --Color_Surface2: oklch(0.222 0.014 266.921);

  --Color_Anchor: var(--Color_Text2);
  --Color_Background: oklch(0.15 0.007 270.977);
  --Color_Body: var(--Color_Text);
  --Color_Border: oklch(0.258 0.025 271.271);
  --Color_Border2: oklch(0.306 0.026 269.473);
  --Color_Error: var(--Color_Red);
  --Color_Success: var(--Color_Green);

  /*
  |--------------------------------------------------------------------------
  | Families
  |--------------------------------------------------------------------------
  |
  */
  --Font_Family:
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    Roboto,
    Helvetica,
    Arial,
    sans-serif,
    'Apple Color Emoji',
    'Segoe UI Emoji',
    'Segoe UI Symbol',
    sans-serif;

  --Font_Family-sans: 'Inter Variable', var(--Font_Family);
  --Font_Family-mono: 'JetBrains Mono', monospace;

  --Font_Family-body: var(--Font_Family-sans);
  --Font_Family-headings: var(--Font_Family-sans);

  /*
  |--------------------------------------------------------------------------
  | Grid
  |--------------------------------------------------------------------------
  |
  */
  --Grid_Container: 1390px;
  --Grid_Gutter: 30px;

  /*
  |--------------------------------------------------------------------------
  | Site
  |--------------------------------------------------------------------------
  |
  */

  --Site_Margin: 15px;
  --Header_Height: 50px;

  /*
  |--------------------------------------------------------------------------
  | Styles
  |--------------------------------------------------------------------------
  |
  */
  font: 16px / 1.5 var(--Font_Family-body);

  cursor: auto;
}

@media (width >= 768px) {

:root {
    --Grid_Gutter: 30px;
}
  }

@media (width > 900px) {

:root {
    --Site_Margin: 20px;
}
  }

/*
|--------------------------------------------------------------------------
| Utils
|--------------------------------------------------------------------------
| @namespace: util-
|
*/

.util-ScreenReaderOnly {
  position: absolute;

  inline-size: 1px;
  block-size: 1px;

  clip: rect(1px, 1px, 1px, 1px);
  overflow: hidden;
}

.util-SkipToContent {
  position: fixed;
  inset-block-start: 5px;
  inset-inline-start: 5px;
  z-index: 999;

  display: block;
  padding: 2px 5px;

  background-color: #fff;
  border-radius: 5px;
  color: #000;
  opacity: 0;
  pointer-events: none;
}

.util-SkipToContent:focus {
    opacity: 1;
    pointer-events: auto;
  }

/*
|--------------------------------------------------------------------------
| Faux link
|--------------------------------------------------------------------------
|
*/

.util-FauxLink {
  position: relative;
}

.util-FauxLink_Link {
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* stylelint-disable */

/*
|--------------------------------------------------------------------------
| Define
|--------------------------------------------------------------------------
| Global resets to make life easier
|
*/

[hidden] {
  display: none !important;
}

[disabled] {
  cursor: not-allowed;
}

:focus:not(:focus-visible) {
  outline: none;
}

a,
area,
button,
[role="button"],
input:not([type="range"]),
label,
select,
summary,
textarea {
  /* Enable panning and pinch zoom gestures, but disable additional
  non-standard gestures such as double-tap to zoom. Disabling double-tap to
  zoom removes the need for browsers to delay the generation of click events
  when the user taps the screen. This is an alias for "pan-x pan-y pinch-zoom"
  (which, for compatibility, is itself still valid). */
  touch-action: manipulation;
}

input,
select,
textarea {
  /* Older iOS puts a border radius on inputs by default. */
  border-radius: 0;
}

button {
  padding: 0;

  font-family: inherit;
  font-size: inherit;

  background-color: transparent;
  border: 0;
  border-radius: 0;
  color: currentColor;
}

body:not(.util-IsTabbing) :is(button, input, select, textarea):focus {
  outline: none;
}

main {
  outline: none;
}

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

/*
|--------------------------------------------------------------------------
| HTML / Body Resets
|--------------------------------------------------------------------------
|
*/

html {
  /* Sets a specific default `font-size` for user with `rem` type scales. */
  font-size: 16px;
  /* Changes the default tap highlight to be completely transparent in iOS. */
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);

  scroll-behavior: smooth;
}

body {
  position: relative;

  margin: 0;

  text-rendering: optimizeLegibility;

  /* By default, `<body>` has no `background-color` so we set one as a best practice. */
  background-color: var(--Color_Background);
  color: var(--Color_Body);

  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

button {
  cursor: pointer;
}

summary {
  position: relative;

  list-style: none;

  cursor: pointer;
}

/*
| Remove the marker that gets added to a summary element
*/

summary::marker, /* Latest Chrome, Edge, Firefox */
summary::-webkit-details-marker /* Safari */ {
  display: none;
}

/*
|--------------------------------------------------------------------------
| Typography - Headings
|--------------------------------------------------------------------------
|
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-block: 0 0;

  font-family: var(--Font_Family-headings);
  font-size: inherit;
  font-weight: 400;
  line-height: inherit;
}

/*
|--------------------------------------------------------------------------
| Typography - Keyline
|--------------------------------------------------------------------------
|
*/

hr {
  border: 0;
  border-block-start: 1px solid var(--Color_Border);
}

/*
|--------------------------------------------------------------------------
| Typography - Lists
|--------------------------------------------------------------------------
|
*/

ul {
  margin: 0;
  padding: 0;

  list-style: none;
}

li::before,
li::marker {
  display: none;
}

/*
|--------------------------------------------------------------------------
| Typography - Paragraph
|--------------------------------------------------------------------------
|
*/

p {
  margin-block: 0 0;
}

/*
|--------------------------------------------------------------------------
| Typography - Anchors
|--------------------------------------------------------------------------
| It is more comment that we *don't* want any kind of default styling on
| <a> elements. We'll unset any browser styling on <a>, then give some
| defaults for unclassed <a> elements.
|
*/

a {
  font-weight: inherit;
  text-decoration: none;

  color: currentColor;
}

a:not([class]) {
    font-weight: inherit;

    color: currentColor;
  }

/*
|--------------------------------------------------------------------------
| Form
|--------------------------------------------------------------------------
|
*/

input,
select,
textarea {
  font-family: inherit;
}

input[type="search" i]::-webkit-search-cancel-button {
  display: none;
}

/*
|--------------------------------------------------------------------------
| Images
|--------------------------------------------------------------------------
|
*/

img {
  max-inline-size: 100%;
}

figure {
  margin: 0;
}

svg {
  display: block;
  inline-size: inherit;
  block-size: inherit;
}

/*
|--------------------------------------------------------------------------
| Tables
|--------------------------------------------------------------------------
|
*/

table {
  inline-size: 100%;
  table-layout: fixed;
}

/*
|--------------------------------------------------------------------------
| Dialog
|--------------------------------------------------------------------------
|
*/

dialog {
  inset-inline: auto;

  max-inline-size: none;
  max-block-size: none;
  block-size: initial;
  margin: 0;
  padding: 0;

  background-color: inherit;
  border: none;
  color: inherit;
}

dialog::backdrop {
    background-color: transparent;
  }

.root {
  isolation: isolate;
}

/* stylelint-enable */

/*
|--------------------------------------------------------------------------
| Font sizes
|--------------------------------------------------------------------------
|
*/

.fz-16_130 {
  font-family: var(--Font_Family-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 130%;
}

/*
|--------------------------------------------------------------------------
| Container
|--------------------------------------------------------------------------
|
*/

.lyt-Container {
  max-inline-size: var(--Grid_Container);
  inline-size: 100%;
  margin-inline: auto;
  padding-inline: var(--Site_Margin);
}

.u-NumCol { text-align: right; }

.u-Mono { font-family: var(--Font_Family-mono); font-size: 13px; }

.u-Dim { color: var(--Color_Text2); }

.u-TextRed { color: var(--Color_Red); }

.u-VisuallyHidden {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── site-wide ── */

.sw-Flash {
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 13px;
  margin-bottom: 16px;
}

.sw-Flash-notice {
  background: rgba(34, 197, 94, 0.15);
  color: var(--Color_Green);
}

.sw-Flash-alert {
  background: rgba(239, 68, 68, 0.15);
  color: var(--Color_Red);
}

/* ─────────────────────────────────────────────
   Toast notification system
   Variants: success, info, warning, error, purple, cyan
───────────────────────────────────────────── */

/* Container — fixed top-right stack */

.sw-ToastStack {
  position: fixed;
  top: 72px;
  right: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 999;
}

/* ─── Standard toast ─── */

.sw-Toast {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--Color_Surface);
  border: 1px solid var(--Color_Border2);
  border-radius: 12px;
  padding: 14px 16px;
  width: 360px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3);
  position: relative;
  overflow: hidden;
}

.sw-Toast-success {
  box-shadow: inset 3px 0 0 var(--Color_Green), 0 8px 32px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3);
}

.sw-Toast-info {
  box-shadow: inset 3px 0 0 var(--Color_Accent), 0 8px 32px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3);
}

.sw-Toast-warning {
  box-shadow: inset 3px 0 0 var(--Color_Amber), 0 8px 32px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3);
}

.sw-Toast-error {
  box-shadow: inset 3px 0 0 var(--Color_Red), 0 8px 32px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3);
}

.sw-Toast-purple {
  box-shadow: inset 3px 0 0 var(--Color_Purple), 0 8px 32px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3);
}

.sw-Toast-cyan {
  box-shadow: inset 3px 0 0 var(--Color_Cyan), 0 8px 32px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Icon */

.sw-Toast_Icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

.sw-Toast-success .sw-Toast_Icon { background: rgba(34, 197, 94, 0.12); }

.sw-Toast-info .sw-Toast_Icon { background: rgba(79, 142, 247, 0.12); }

.sw-Toast-warning .sw-Toast_Icon { background: rgba(245, 158, 11, 0.12); }

.sw-Toast-error .sw-Toast_Icon { background: rgba(239, 68, 68, 0.12); }

.sw-Toast-purple .sw-Toast_Icon { background: rgba(168, 85, 247, 0.12); }

.sw-Toast-cyan .sw-Toast_Icon { background: rgba(6, 182, 212, 0.12); }

/* Body */

.sw-Toast_Body {
  flex: 1;
  min-width: 0;
}

.sw-Toast_Title {
  font-size: 13px;
  font-weight: 700;
  color: var(--Color_Text);
  line-height: 1.3;
}

.sw-Toast_Sub {
  font-size: 12px;
  color: var(--Color_Text2);
  margin-top: 3px;
  line-height: 1.4;
}

.sw-Toast_Meta {
  font-size: 11px;
  color: var(--Color_Text3);
  margin-top: 6px;
}

/* Close button */

.sw-Toast_Close {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  cursor: pointer;
  color: var(--Color_Text3);
  font-size: 14px;
  background: none;
  border: none;
  transition: background 0.15s;
}

.sw-Toast_Close:hover {
  background: var(--Color_Surface2);
  color: var(--Color_Text2);
}

/* Progress bar */

.sw-Toast_Progress {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
}

.sw-Toast_ProgressBar {
  height: 100%;
  transition: width 0.1s linear;
}

.sw-Toast-success .sw-Toast_ProgressBar { background: var(--Color_Green); }

.sw-Toast-info .sw-Toast_ProgressBar { background: var(--Color_Accent); }

.sw-Toast-warning .sw-Toast_ProgressBar { background: var(--Color_Amber); }

.sw-Toast-error .sw-Toast_ProgressBar { background: var(--Color_Red); }

.sw-Toast-purple .sw-Toast_ProgressBar { background: var(--Color_Purple); }

.sw-Toast-cyan .sw-Toast_ProgressBar { background: var(--Color_Cyan); }

/* Action buttons */

.sw-Toast_Actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.sw-Toast_Btn {
  flex: 1;
  padding: 6px 0;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  border: none;
  font-family: var(--Font_Family-sans);
}

.sw-Toast_Btn-primary {
  background: var(--Color_Accent);
  color: #fff;
}

.sw-Toast_Btn-ghost {
  background: var(--Color_Surface2);
  border: 1px solid var(--Color_Border2);
  color: var(--Color_Text2);
}

/* ─── Animation ─── */

@keyframes sw-toast-in {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes sw-toast-out {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(100%);
  }
}

.sw-Toast[data-entering] {
  animation: sw-toast-in 0.3s ease-out;
}

.sw-Toast[data-leaving] {
  animation: sw-toast-out 0.25s ease-in forwards;
}

/* ─────────────────────────────────────────────
   Loading skeleton shimmer system
───────────────────────────────────────────── */

@keyframes sw-shimmer {
  0% { background-position: -1200px 0; }
  100% { background-position: 1200px 0; }
}

.sw-Skeleton {
  background: linear-gradient(90deg, #1f2330 25%, #2a2f3d 50%, #1f2330 75%);
  background-size: 2400px 100%;
  animation: sw-shimmer 2s infinite linear;
  border-radius: 5px;
  flex-shrink: 0;
}

.sw-Skeleton-circle {
  border-radius: 50%;
}

.sw-Skeleton-rounded {
  border-radius: 12px;
}

.sw-Skeleton-pill {
  border-radius: 999px;
}

/* ─────────────────────────────────────────────
   Empty state — centered message with icon + CTA
───────────────────────────────────────────── */

.sw-EmptyState {
  background: var(--Color_Surface);
  border: 1px solid var(--Color_Border);
  border-radius: 16px;
  padding: 48px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
}

.sw-EmptyState_Icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  margin-bottom: 12px;
}

.sw-EmptyState_Title {
  font-size: 17px;
  font-weight: 700;
  color: var(--Color_Text);
  margin-bottom: 6px;
}

.sw-EmptyState_Sub {
  font-size: 13px;
  color: var(--Color_Text2);
  max-width: 340px;
  line-height: 1.6;
}

.sw-EmptyState_Actions {
  margin-top: 20px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

.sw-EmptyState_Hint {
  margin-top: 12px;
  font-size: 11px;
  color: var(--Color_Text3);
}

/* Suggestion list (search no results) */

.sw-EmptyState_Suggestions {
  margin-top: 16px;
  text-align: left;
  width: 100%;
  max-width: 360px;
}

.sw-EmptyState_SuggestionItem {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13px;
  color: var(--Color_Text2);
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
}

.sw-EmptyState_SuggestionItem:hover {
  background: var(--Color_Surface2);
  color: var(--Color_Text);
}

.sw-EmptyState_SuggestionItem svg {
  flex-shrink: 0;
  opacity: 0.5;
}

/* ─────────────────────────────────────────────
   Shared button styles
───────────────────────────────────────────── */

.sw-Btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: opacity 0.15s;
  font-family: var(--Font_Family-sans);
}

.sw-Btn:hover {
  opacity: 0.85;
}

.sw-Btn-primary {
  background: var(--Color_Accent);
  color: #fff;
}

.sw-Btn-secondary {
  background: var(--Color_Surface);
  border: 1px solid var(--Color_Border2);
  color: var(--Color_Text2);
}

.sw-Btn-secondary:hover {
  border-color: var(--Color_Border);
  color: var(--Color_Text);
}

.sw-Btn-ghost {
  background: transparent;
  border: 1px solid var(--Color_Border2);
  color: var(--Color_Text2);
}

.sw-Btn-ghost:hover {
  border-color: var(--Color_Border);
  color: var(--Color_Text);
}

.sw-Btn-danger {
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.25);
  color: var(--Color_Red);
}

.sw-Btn-warning {
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.25);
  color: var(--Color_Amber);
}

/* ── sw-RegBtn ── */

.sw-RegBtn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 18px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all 0.15s;
  font-family: var(--Font_Family-sans);
}

.sw-RegBtn-default {
  background: transparent;
  border: 1.5px solid var(--Color_Border2);
  color: var(--Color_Text);
}

.sw-RegBtn-default:hover {
    border-color: var(--Color_Accent);
    color: var(--Color_Accent);
    background: rgba(79, 142, 247, 0.05);
  }

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

.sw-RegBtn-loading {
  background: rgba(79, 142, 247, 0.08);
  border: 1.5px solid rgba(79, 142, 247, 0.3);
  color: var(--Color_Text2);
  cursor: not-allowed;
}

.sw-RegBtn_Spinner {
  width: 13px;
  height: 13px;
  border: 2px solid var(--Color_Border2);
  border-top-color: var(--Color_Accent);
  border-radius: 50%;
  animation: sw-spin 0.7s linear infinite;
  flex-shrink: 0;
}

.sw-RegBtn-success {
  background: rgba(34, 197, 94, 0.1);
  border: 1.5px solid rgba(34, 197, 94, 0.3);
  color: var(--Color_Green);
}

.sw-RegBtn-full {
  background: rgba(239, 68, 68, 0.08);
  border: 1.5px solid rgba(239, 68, 68, 0.2);
  color: var(--Color_Red);
  cursor: not-allowed;
  opacity: 0.8;
}

.sw-RegBtn-closed {
  background: var(--Color_Surface2);
  border: 1.5px solid var(--Color_Border);
  color: var(--Color_Text3);
  cursor: not-allowed;
}

.sw-RegBtn-waitlist {
  background: rgba(245, 158, 11, 0.08);
  border: 1.5px solid rgba(245, 158, 11, 0.25);
  color: var(--Color_Amber);
}

/* ─────────────────────────────────────────────
   Filter bar, filter buttons, filter chips, dropdowns
───────────────────────────────────────────── */

/* Filter bar — sticky container below hero */

.sw-FilterBar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px 32px;
  background: var(--Color_Surface);
  border-bottom: 1px solid var(--Color_Border);
  position: sticky;
  top: 52px;
  z-index: 20;
}

/* Search input within filter bar */

.sw-FilterBar_Search {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--Color_Background);
  border: 1px solid var(--Color_Border2);
  border-radius: 8px;
  padding: 6px 12px;
  min-width: 200px;
  font-size: 12px;
  color: var(--Color_Text3);
}

.sw-FilterBar_Sep {
  width: 1px;
  height: 22px;
  background: var(--Color_Border2);
}

.sw-FilterBar_Right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

.sw-FilterBar_Count {
  font-size: 12px;
  color: var(--Color_Text2);
  font-weight: 500;
}

.sw-FilterBar_Clear {
  font-size: 12px;
  color: var(--Color_Accent);
  font-weight: 500;
  cursor: pointer;
  padding: 4px 0;
  background: none;
  border: none;
  font-family: var(--Font_Family-sans);
}

.sw-FilterBar_Clear:hover {
  text-decoration: underline;
}

/* Filter button (dropdown trigger) */

.sw-FilterBtn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--Color_Background);
  border: 1px solid var(--Color_Border2);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  color: var(--Color_Text2);
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  white-space: nowrap;
  transition: all 0.15s;
  position: relative;
  font-family: var(--Font_Family-sans);
}

.sw-FilterBtn:hover {
  border-color: var(--Color_Border);
  color: var(--Color_Text);
}

.sw-FilterBtn[aria-expanded="true"] {
  border-color: var(--Color_Accent);
  background: rgba(79, 142, 247, 0.08);
  color: var(--Color_Text);
}

.sw-FilterBtn_Count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--Color_Accent);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
}

.sw-FilterBtn_Chevron {
  opacity: 0.5;
  transition: transform 0.15s;
}

.sw-FilterBtn[aria-expanded="true"] .sw-FilterBtn_Chevron {
  transform: rotate(180deg);
}

/* Filter dropdown panel */

.sw-FilterDropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  background: var(--Color_Surface);
  border: 1px solid var(--Color_Border2);
  border-radius: 10px;
  min-width: 220px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  z-index: 50;
  overflow: hidden;
}

.sw-FilterDropdown_Header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px 8px;
  border-bottom: 1px solid var(--Color_Border);
}

.sw-FilterDropdown_Title {
  font-size: 11px;
  font-weight: 700;
  color: var(--Color_Text3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.sw-FilterDropdown_Clear {
  font-size: 11px;
  color: var(--Color_Accent);
  cursor: pointer;
  background: none;
  border: none;
  font-family: var(--Font_Family-sans);
}

.sw-FilterDropdown_Item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  font-size: 13px;
  color: var(--Color_Text2);
  cursor: pointer;
  transition: background 0.1s;
}

.sw-FilterDropdown_Item:hover {
  background: var(--Color_Surface2);
  color: var(--Color_Text);
}

.sw-FilterDropdown_Check {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 1.5px solid var(--Color_Border2);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--Color_Background);
}

.sw-FilterDropdown_Check[aria-checked="true"] {
  background: var(--Color_Accent);
  border-color: var(--Color_Accent);
}

.sw-FilterDropdown_Check[aria-checked="true"]::after {
  content: '';
  width: 9px;
  height: 6px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg) translate(1px, -1px);
  display: block;
}

.sw-FilterDropdown_ItemCount {
  margin-left: auto;
  font-size: 11px;
  color: var(--Color_Text3);
  font-family: var(--Font_Family-mono);
}

.sw-FilterDropdown_Footer {
  padding: 8px 14px;
  border-top: 1px solid var(--Color_Border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Filter chip (inline toggle) */

.sw-FilterChip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  background: var(--Color_Background);
  border: 1px solid var(--Color_Border2);
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
  color: var(--Color_Text2);
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  white-space: nowrap;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.sw-FilterChip:hover {
  border-color: var(--Color_Border);
  color: var(--Color_Text);
}

.sw-FilterChip[aria-pressed="true"] {
  border-color: var(--Color_Accent);
  background: rgba(79, 142, 247, 0.08);
  color: var(--Color_Text);
}

.sw-FilterChip[aria-disabled="true"] {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Active filter pill (below filter bar) */

.sw-ActiveFilter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(79, 142, 247, 0.1);
  border: 1px solid rgba(79, 142, 247, 0.3);
  border-radius: 20px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 500;
  color: var(--Color_Accent);
}

.sw-ActiveFilter_Remove {
  cursor: pointer;
  display: flex;
  background: none;
  border: none;
  color: var(--Color_Accent);
}

/* ─────────────────────────────────────────────
   Data table with sortable columns
───────────────────────────────────────────── */

.sw-DataTable {
  width: 100%;
  border-collapse: collapse;
}

.sw-DataTable_Head {
  font-size: 11px;
  font-weight: 600;
  color: var(--Color_Text3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-align: left;
  padding: 10px 16px;
  border-bottom: 1px solid var(--Color_Border);
  white-space: nowrap;
}

.sw-DataTable_Cell {
  padding: 10px 16px;
  border-bottom: 1px solid var(--Color_Border);
}

.sw-DataTable_Row {
  transition: background 0.1s;
}

.sw-DataTable_Row:last-child .sw-DataTable_Cell {
    border-bottom: none;
  }

.sw-DataTable_Row:hover {
    background: var(--Color_Surface2);
  }

/* Numeric cell */

.sw-DataTable_Cell-num {
  font-family: var(--Font_Family-mono);
  font-size: 13px;
}

/* Alignment variants */

.sw-DataTable_Head-right { text-align: right; }

.sw-DataTable_Head-center { text-align: center; }

.sw-DataTable_Head-narrow { width: 40px; }

.sw-DataTable_Cell-right { text-align: right; }

.sw-DataTable_Cell-center { text-align: center; }

.sw-DataTable_Cell-dim { color: var(--Color_Text2); }

/* Sortable column header */

.sw-DataTable_Head-sortable {
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  transition: color 0.15s;
}

.sw-DataTable_Head-sortable:hover {
  color: var(--Color_Text2);
}

.sw-DataTable_Head[aria-sort] {
  color: var(--Color_Accent);
}

/* Sort icon container */

.sw-DataTable_SortIcon {
  display: inline-flex;
  flex-direction: column;
  gap: 1px;
  margin-left: 5px;
  vertical-align: middle;
  opacity: 0.35;
  transition: opacity 0.15s;
}

.sw-DataTable_Head-sortable:hover .sw-DataTable_SortIcon {
  opacity: 0.6;
}

.sw-DataTable_Head[aria-sort] .sw-DataTable_SortIcon {
  opacity: 1;
  color: var(--Color_Accent);
}

/* Sort triangles */

.sw-DataTable_SortUp,
.sw-DataTable_SortDown {
  width: 0;
  height: 0;
  display: block;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
}

.sw-DataTable_SortUp {
  border-bottom: 5px solid currentColor;
}

.sw-DataTable_SortDown {
  border-top: 5px solid currentColor;
}

/* Hide inactive direction when sorted */

.sw-DataTable_Head[aria-sort="ascending"] .sw-DataTable_SortDown {
  border-top-color: transparent;
}

.sw-DataTable_Head[aria-sort="descending"] .sw-DataTable_SortUp {
  border-bottom-color: transparent;
}

/* Active column cell highlight */

.sw-DataTable_Cell-sortActive {
  background: rgba(79, 142, 247, 0.04);
}

/* Position dots */

.sw-DataTable_Pos {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  font-family: var(--Font_Family-mono);
}

.sw-DataTable_Pos-1 { background: #f59e0b; color: #000; }

.sw-DataTable_Pos-2 { background: #94a3b8; color: #000; }

.sw-DataTable_Pos-3 { background: #cd7f32; color: #fff; }

.sw-DataTable_Pos-n { background: var(--Color_Surface2); color: var(--Color_Text2); }

/* ─────────────────────────────────────────────
   Data sync state — progress banner, success banner
───────────────────────────────────────────── */

@keyframes sw-sync-spin {
  100% { transform: rotate(360deg); }
}

/* Sync progress banner (below nav) */

.sw-SyncBanner {
  background: linear-gradient(90deg, rgba(79, 142, 247, 0.08) 0%, rgba(79, 142, 247, 0.03) 100%);
  border-bottom: 1px solid rgba(79, 142, 247, 0.15);
  padding: 8px 24px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  color: var(--Color_Text2);
}

.sw-SyncBanner_Status {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}

.sw-SyncBanner_Spinner {
  width: 14px;
  height: 14px;
  border: 2px solid var(--Color_Border2);
  border-top-color: var(--Color_Accent);
  border-radius: 50%;
  animation: sw-sync-spin 0.8s linear infinite;
  flex-shrink: 0;
}

.sw-SyncBanner_Progress {
  height: 4px;
  background: var(--Color_Border2);
  border-radius: 2px;
  overflow: hidden;
  margin-left: 8px;
  min-width: 100px;
}

.sw-SyncBanner_ProgressFill {
  height: 100%;
  background: var(--Color_Accent);
  border-radius: 2px;
  transition: width 0.3s ease;
}

.sw-SyncBanner_Count {
  font-family: var(--Font_Family-mono);
  font-weight: 600;
  color: var(--Color_Accent);
}

/* Sync success banner */

.sw-SyncSuccess {
  background: linear-gradient(90deg, rgba(34, 197, 94, 0.08) 0%, rgba(34, 197, 94, 0.03) 100%);
  border-bottom: 1px solid rgba(34, 197, 94, 0.15);
  padding: 8px 24px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--Color_Text2);
}

.sw-SyncSuccess_Icon {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--Color_Green);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Last synced indicator */

.sw-SyncIndicator {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--Color_Text3);
  background: var(--Color_Surface2);
  border: 1px solid var(--Color_Border);
  border-radius: 6px;
  padding: 4px 10px;
}

.sw-SyncIndicator_Dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--Color_Green);
  flex-shrink: 0;
}

/* ─────────────────────────────────────────────
   Shared card component
───────────────────────────────────────────── */

.sw-Card {
  background: var(--Color_Surface);
  border: 1px solid var(--Color_Border);
  border-radius: 12px;
  overflow: hidden;
}

.sw-Card_Header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--Color_Border);
}

.sw-Card_Title {
  font-size: 13px;
  font-weight: 600;
  color: var(--Color_Text2);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.sw-Card_Body {
  padding: 20px;
}

/* ── sw-Badge ── */

.sw-Badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: 5px;
  padding: 2px 7px;
  font-size: 11px;
  font-weight: 600;
  font-family: var(--Font_Family-mono);
}

.sw-Badge-blue { background: rgba(79, 142, 247, 0.15); color: var(--Color_Accent); }

.sw-Badge-green { background: rgba(34, 197, 94, 0.15); color: var(--Color_Green); }

.sw-Badge-red { background: rgba(239, 68, 68, 0.15); color: var(--Color_Red); }

.sw-Badge-amber { background: rgba(245, 158, 11, 0.15); color: var(--Color_Amber); }

.sw-Badge-purple { background: rgba(168, 85, 247, 0.15); color: var(--Color_Purple); }

.sw-Badge-cyan { background: rgba(6, 182, 212, 0.15); color: var(--Color_Cyan); }

.sw-Badge-gray { background: var(--Color_Surface2); color: var(--Color_Text2); }

/* ----------------------------------------------------------------
   sw-Auth — Split-panel authentication layout
   Used by: sessions/new, registrations/new, passwords/new, passwords/edit
   ---------------------------------------------------------------- */

.sw-Auth {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
  width: 100%;
}

@media (width < 900px) {

.sw-Auth {
    grid-template-columns: 1fr;
}
  }

/* --- Left panel (marketing) --- */

.sw-Auth_Left {
  background: linear-gradient(160deg, #080d1a 0%, var(--Color_Background) 100%);
  padding: 48px;
  padding-left: max(48px, calc(100% - 550px - 48px));
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-right: 1px solid var(--Color_Border);
  position: relative;
  overflow: hidden;
}

@media (width < 900px) {

.sw-Auth_Left {
    display: none;
}
  }

.sw-Auth_Left::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 30% 50%, rgba(79, 142, 247, 0.08) 0%, transparent 60%);
}

.sw-Auth_Logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  font-weight: 800;
  margin-bottom: 48px;
  position: relative;
}

.sw-Auth_LogoIcon {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

.sw-Auth_Headline {
  font-size: 36px;
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1.15;
  margin-bottom: 16px;
  position: relative;
}

.sw-Auth_HeadlineAccent {
  color: var(--Color_Accent);
}

.sw-Auth_Sub {
  font-size: 16px;
  color: var(--Color_Text2);
  line-height: 1.6;
  margin-bottom: 40px;
  position: relative;
}

.sw-Auth_Features {
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
}

.sw-Auth_Feature {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.sw-Auth_FeatureIcon {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
  margin-top: 1px;
}

.sw-Auth_FeatureIcon-blue {
  background: rgba(79, 142, 247, 0.12);
}

.sw-Auth_FeatureIcon-purple {
  background: rgba(168, 85, 247, 0.12);
}

.sw-Auth_FeatureIcon-amber {
  background: rgba(245, 158, 11, 0.12);
}

.sw-Auth_FeatureIcon-green {
  background: rgba(34, 197, 94, 0.12);
}

.sw-Auth_FeatureTitle {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 2px;
}

.sw-Auth_FeatureSub {
  font-size: 13px;
  color: var(--Color_Text2);
}

.sw-Auth_PreviewCards {
  display: flex;
  gap: 8px;
  margin-top: 48px;
  position: relative;
}

.sw-Auth_PreviewCard {
  background: var(--Color_Surface);
  border: 1px solid var(--Color_Border);
  border-radius: 12px;
  padding: 12px 14px;
  flex: 1;
}

.sw-Auth_PreviewLabel {
  font-size: 10px;
  color: var(--Color_Text3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.sw-Auth_PreviewVal {
  font-size: 20px;
  font-weight: 900;
  font-family: var(--Font_Family-mono);
  margin-top: 2px;
}

.sw-Auth_PreviewSub {
  font-size: 11px;
  color: var(--Color_Text2);
  margin-top: 2px;
}

/* --- Right panel (form) --- */

.sw-Auth_Right {
  background: var(--Color_Surface);
  padding: 48px 40px;
  padding-right: max(40px, calc(100% - 440px - 40px));
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-left: 1px solid var(--Color_Border);
}

@media (width < 900px) {

.sw-Auth_Right {
    border-left: none;
    padding: 32px 24px;
    min-height: 100vh;
}
  }

.sw-Auth_Form {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.sw-Auth_Title {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.sw-Auth_Desc {
  font-size: 14px;
  color: var(--Color_Text2);
  line-height: 1.5;
  margin-top: 6px;
}

.sw-Auth_Field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sw-Auth_Label {
  font-size: 13px;
  font-weight: 600;
  color: var(--Color_Text2);
}

.sw-Auth_Input {
  background: var(--Color_Background);
  border: 1px solid var(--Color_Border2);
  border-radius: 12px;
  padding: 11px 14px;
  font-size: 14px;
  color: var(--Color_Text);
  font-family: var(--Font_Family-sans);
  width: 100%;
  outline: none;
  transition: border-color 0.15s;
}

.sw-Auth_Input:focus {
  border-color: var(--Color_Accent);
  box-shadow: 0 0 0 3px rgba(79, 142, 247, 0.1);
}

.sw-Auth_Input::-moz-placeholder {
  color: var(--Color_Text3);
}

.sw-Auth_Input::placeholder {
  color: var(--Color_Text3);
}

.sw-Auth_Submit {
  background: var(--Color_Accent);
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 13px;
  font-size: 15px;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  transition: background 0.15s;
}

.sw-Auth_Submit:hover {
  background: var(--Color_Accent2);
}

.sw-Auth_Divider {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--Color_Text3);
  font-size: 13px;
}

.sw-Auth_Divider::before,
.sw-Auth_Divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--Color_Border);
}

.sw-Auth_OAuthBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--Color_Surface2);
  border: 1px solid var(--Color_Border2);
  border-radius: 12px;
  padding: 11px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s;
  color: var(--Color_Text);
}

.sw-Auth_OAuthBtn:hover {
  border-color: var(--Color_Border2);
  background: var(--Color_Background);
}

.sw-Auth_OAuthHint {
  margin-left: auto;
  font-size: 11px;
  color: var(--Color_Text3);
  font-weight: 400;
}

.sw-Auth_Note {
  font-size: 12px;
  color: var(--Color_Text3);
  text-align: center;
  line-height: 1.6;
}

.sw-Auth_NoteLink {
  color: var(--Color_Accent);
}

.sw-Auth_Footer {
  text-align: center;
  padding-top: 8px;
  border-top: 1px solid var(--Color_Border);
  font-size: 13px;
  color: var(--Color_Text3);
}

.sw-Auth_FooterLink {
  color: var(--Color_Accent);
  font-weight: 600;
}

.sw-Auth_Errors {
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: 12px;
  padding: 12px 16px;
  font-size: 13px;
  color: var(--Color_Red);
  line-height: 1.5;
}

.sw-Auth_ErrorItem {
  margin: 0;
}

.sw-Auth_ErrorItem + .sw-Auth_ErrorItem {
  margin-top: 4px;
}

.sw-Auth_Hint {
  font-size: 11px;
  color: var(--Color_Text3);
}

.sw-ConnectPage {
  min-height: calc(100vh - var(--Header_Height));
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 48px 24px;
}

.sw-ConnectPage turbo-frame {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.sw-ConnectSteps {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 40px;
}

.sw-ConnectSteps_Group {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.sw-ConnectSteps_Dot {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  font-family: var(--Font_Family-mono);
  border: 2px solid var(--Color_Border2);
  color: var(--Color_Text3);
  transition: all 0.2s;
}

.sw-ConnectSteps_Dot-active {
  background: var(--Color_Accent);
  border-color: var(--Color_Accent);
  color: #fff;
}

.sw-ConnectSteps_Dot-done {
  background: rgba(34, 197, 94, 0.15);
  border-color: var(--Color_Green);
  color: var(--Color_Green);
}

.sw-ConnectSteps_Connector {
  width: 40px;
  height: 2px;
  margin-top: 15px;
  background: var(--Color_Border2);
  border-radius: 1px;
}

.sw-ConnectSteps_Connector-done {
  background: var(--Color_Green);
}

.sw-ConnectSteps_Label {
  font-size: 11px;
  color: var(--Color_Text3);
  margin-top: 6px;
  text-align: center;
  white-space: nowrap;
}

.sw-ConnectCard {
  width: 100%;
  max-width: 560px;
  background: var(--Color_Surface);
  border: 1px solid var(--Color_Border);
  border-radius: 16px;
  overflow: hidden;
}

.sw-ConnectCard + .sw-ConnectCard {
  margin-top: 16px;
}

.sw-ConnectCard-disabled {
  opacity: 0.4;
  pointer-events: none;
}

.sw-ConnectCard-dimmed {
  opacity: 0.35;
  pointer-events: none;
}

.sw-ConnectCard_Header {
  padding: 24px 28px 20px;
  border-bottom: 1px solid var(--Color_Border);
}

.sw-ConnectCard_Header-compact {
  padding: 16px 24px;
}

.sw-ConnectCard_Badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(79, 142, 247, 0.1);
  border: 1px solid rgba(79, 142, 247, 0.2);
  border-radius: 20px;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 600;
  color: var(--Color_Accent);
  margin-bottom: 12px;
}

.sw-ConnectCard_Title {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}

.sw-ConnectCard_Title-sm {
  font-size: 16px;
}

.sw-ConnectCard_Sub {
  font-size: 13px;
  color: var(--Color_Text2);
  line-height: 1.5;
}

.sw-ConnectCard_Body {
  padding: 24px 28px;
}

.sw-ConnectInstructions {
  background: var(--Color_Surface2);
  border: 1px solid var(--Color_Border2);
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 20px;
}

.sw-ConnectInstructions_Title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--Color_Text3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 12px;
}

.sw-ConnectInstructions_Step {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 8px 0;
  border-bottom: 1px solid var(--Color_Border);
}

.sw-ConnectInstructions_Step:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.sw-ConnectInstructions_Num {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  flex-shrink: 0;
  background: rgba(79, 142, 247, 0.15);
  border: 1px solid rgba(79, 142, 247, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 800;
  color: var(--Color_Accent);
  margin-top: 1px;
}

.sw-ConnectInstructions_Text {
  font-size: 13px;
  color: var(--Color_Text2);
  line-height: 1.4;
}

.sw-ConnectInstructions_Emphasis {
  color: var(--Color_Text);
}

.sw-ConnectInstructions_Path {
  display: inline-block;
  background: var(--Color_Background);
  border: 1px solid var(--Color_Border2);
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 11px;
  font-family: var(--Font_Family-mono);
  color: var(--Color_Accent);
  margin: 0 2px;
}

.sw-ConnectInput {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sw-ConnectInput_Label {
  font-size: 12px;
  font-weight: 600;
  color: var(--Color_Text2);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.sw-ConnectInput_Field {
  flex: 1;
  background: var(--Color_Background);
  border: 1px solid var(--Color_Border2);
  border-radius: 10px;
  padding: 11px 14px;
  font-size: 16px;
  color: var(--Color_Text);
  font-family: var(--Font_Family-mono);
  outline: none;
  transition: border-color 0.15s;
  letter-spacing: 0.05em;
  width: 100%;
}

.sw-ConnectInput_Field:focus {
  border-color: var(--Color_Accent);
}

.sw-ConnectInput_Hint {
  font-size: 11px;
  color: var(--Color_Text3);
}

.sw-ConnectConfirm {
  background: var(--Color_Surface2);
  border: 1px solid var(--Color_Border2);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
}

.sw-ConnectConfirm_Row {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--Color_Border);
  font-size: 13px;
}

.sw-ConnectConfirm_Row:last-child {
  border-bottom: none;
}

.sw-ConnectConfirm_Key {
  color: var(--Color_Text3);
}

.sw-ConnectConfirm_Val {
  font-weight: 600;
  font-family: var(--Font_Family-mono);
  color: var(--Color_Text);
}

.sw-ConnectConfirm_Prompt {
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  margin-bottom: 12px;
  color: var(--Color_Text2);
}

.sw-ConnectConfirm_Actions {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}

.sw-ConnectConfirm_Btn {
  flex: 2;
  padding: 13px;
  border-radius: 10px;
  background: var(--Color_Green);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  border: none;
  cursor: pointer;
}

.sw-ConnectConfirm_Retry {
  flex: 1;
  padding: 13px;
  border-radius: 10px;
  background: var(--Color_Surface2);
  border: 1px solid var(--Color_Border2);
  color: var(--Color_Text2);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

/* ── sw-ConnectBtn ── */

.sw-ConnectBtn {
  width: 100%;
  padding: 13px;
  border-radius: 10px;
  background: var(--Color_Accent);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 20px;
  transition: opacity 0.15s;
}

.sw-ConnectBtn:hover {
  opacity: 0.9;
}

.sw-ConnectSync_Icon {
  font-size: 48px;
  text-align: center;
  margin-bottom: 16px;
}

.sw-ConnectSync_Counter {
  font-size: 22px;
  font-weight: 900;
  font-family: var(--Font_Family-mono);
  color: var(--Color_Accent);
  text-align: center;
  margin-bottom: 4px;
}

.sw-ConnectSync_Label {
  font-size: 13px;
  color: var(--Color_Text2);
  text-align: center;
}

.sw-ConnectSync_BarWrap {
  width: 100%;
  height: 8px;
  background: var(--Color_Border);
  border-radius: 4px;
  overflow: hidden;
  margin: 16px 0 10px;
}

.sw-ConnectSync_Bar {
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--Color_Accent), var(--Color_Purple));
  transition: width 0.5s ease-out;
}

.sw-ConnectSync_Hint {
  font-size: 11px;
  color: var(--Color_Text3);
  text-align: center;
  margin-top: 8px;
}

.sw-ConnectSync_Items {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 20px;
}

.sw-ConnectSync_Item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--Color_Surface2);
  border: 1px solid var(--Color_Border);
  font-size: 13px;
}

.sw-ConnectSync_Dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.sw-ConnectSync_Dot-done {
  background: var(--Color_Green);
}

.sw-ConnectSync_Dot-active {
  background: var(--Color_Accent);
  animation: sw-syncPulse 1s infinite;
}

.sw-ConnectSync_Dot-waiting {
  background: var(--Color_Border2);
}

@keyframes sw-syncPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* ── sw-OnboardHero ── */

.sw-OnboardHero {
  background: linear-gradient(160deg, #0a0f1e 0%, #0d1220 60%, var(--Color_Background) 100%);
  border-bottom: 1px solid var(--Color_Border);
  padding-block: 40px;
  text-align: center;
}

.sw-OnboardHero_Badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(79, 142, 247, 0.1);
  border: 1px solid rgba(79, 142, 247, 0.2);
  border-radius: 20px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--Color_Accent);
  margin-bottom: 16px;
}

.sw-OnboardHero_Title {
  font-size: 32px;
  font-weight: 900;
  letter-spacing: -0.03em;
  margin-bottom: 10px;
}

.sw-OnboardHero_TitleAccent {
  color: var(--Color_Accent);
}

.sw-OnboardHero_Sub {
  font-size: 15px;
  color: var(--Color_Text2);
  line-height: 1.5;
  max-width: 500px;
  margin: 0 auto;
}

/* ── sw-OnboardCta ── */

.sw-OnboardCta {
  max-width: 540px;
  margin: 0 auto 32px;
  background: var(--Color_Surface);
  border: 1px solid var(--Color_Border);
  border-radius: 16px;
  overflow: hidden;
}

.sw-OnboardCta_Top {
  padding: 32px 28px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  border-bottom: 1px solid var(--Color_Border);
}

.sw-OnboardCta_Icon {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(79, 142, 247, 0.2), rgba(79, 142, 247, 0.05));
  border: 1px solid rgba(79, 142, 247, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  margin-bottom: 16px;
}

.sw-OnboardCta_Title {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}

.sw-OnboardCta_Sub {
  font-size: 13px;
  color: var(--Color_Text2);
  line-height: 1.5;
}

.sw-OnboardCta_Features {
  padding: 20px 28px;
  border-bottom: 1px solid var(--Color_Border);
}

.sw-OnboardCta_Feature {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--Color_Border);
}

.sw-OnboardCta_Feature:last-child {
  border-bottom: none;
}

.sw-OnboardCta_FeatureIcon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  background: rgba(79, 142, 247, 0.1);
  border: 1px solid rgba(79, 142, 247, 0.2);
}

.sw-OnboardCta_FeatureText {
  font-size: 13px;
  color: var(--Color_Text2);
  padding-top: 5px;
}

.sw-OnboardCta_FeatureTitle {
  color: var(--Color_Text);
  display: block;
  margin-bottom: 1px;
}

.sw-OnboardCta_Action {
  padding: 20px 28px;
}

.sw-OnboardCta_Btn {
  width: 100%;
  padding: 14px;
  border-radius: 10px;
  background: var(--Color_Accent);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: opacity 0.15s;
}

.sw-OnboardCta_Btn:hover {
  opacity: 0.9;
}

.sw-OnboardCta_BtnSub {
  text-align: center;
  margin-top: 8px;
  font-size: 11px;
  color: var(--Color_Text3);
}

/* ── sw-OnboardPreview ── */

.sw-OnboardPreview {
  padding: 0 24px 40px;
  max-width: 1200px;
  margin: 0 auto;
}

.sw-OnboardPreview_Label {
  text-align: center;
  margin-bottom: 20px;
  font-size: 13px;
  color: var(--Color_Text3);
  letter-spacing: 0.03em;
}

.sw-OnboardPreview_Grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

@media (width < 768px) {

.sw-OnboardPreview_Grid {
    grid-template-columns: 1fr;
}
  }

.sw-OnboardPreview_Card {
  background: var(--Color_Surface);
  border: 1px solid var(--Color_Border);
  border-radius: 12px;
  overflow: hidden;
  position: relative;
}

.sw-OnboardPreview_CardInner {
  padding: 16px 20px;
  filter: blur(2px);
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  opacity: 0.4;
}

.sw-OnboardPreview_Lock {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: rgba(10, 11, 14, 0.6);
  backdrop-filter: blur(1px);
}

.sw-OnboardPreview_LockIcon {
  font-size: 24px;
}

.sw-OnboardPreview_LockLabel {
  font-size: 12px;
  font-weight: 600;
  color: var(--Color_Text2);
  background: var(--Color_Surface2);
  border: 1px solid var(--Color_Border2);
  border-radius: 20px;
  padding: 4px 12px;
}

.sw-OnboardPreview_FakeBars {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 60px;
  margin: 10px 0;
}

.sw-OnboardPreview_FakeBar {
  flex: 1;
  border-radius: 2px 2px 0 0;
  background: var(--Color_Accent);
  opacity: 0.6;
  height: 50%;
}

.sw-OnboardPreview_FakeBar[data-h="35"] { height: 35%; }

.sw-OnboardPreview_FakeBar[data-h="38"] { height: 38%; }

.sw-OnboardPreview_FakeBar[data-h="42"] { height: 42%; }

.sw-OnboardPreview_FakeBar[data-h="50"] { height: 50%; }

.sw-OnboardPreview_FakeBar[data-h="55"] { height: 55%; }

.sw-OnboardPreview_FakeBar[data-h="62"] { height: 62%; }

.sw-OnboardPreview_FakeBar[data-h="68"] { height: 68%; }

.sw-OnboardPreview_FakeBar[data-h="75"] { height: 75%; }

.sw-OnboardPreview_FakeBar[data-h="80"] { height: 80%; }

.sw-OnboardPreview_FakeBar[data-h="85"] { height: 85%; }

.sw-OnboardPreview_FakeBar[data-h="90"] { height: 90%; }

.sw-OnboardPreview_FakeBar[data-h="100"] { height: 100%; }

.sw-OnboardPreview_FakeRow {
  height: 10px;
  border-radius: 4px;
  background: var(--Color_Border);
  margin: 7px 0;
}

.sw-OnboardPreview_SectionLabel {
  font-size: 10px;
  color: var(--Color_Text3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
}

/* ── sw-OfflineBanner ── */

.sw-OfflineBanner {
  background: #0f0b0b;
  border-bottom: 1px solid rgba(239, 68, 68, 0.3);
  padding: 8px 24px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--Color_Text2);
}

.sw-OfflineBanner_Dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--Color_Red);
  flex-shrink: 0;
}

/* ── sw-ErrorCard ── */

.sw-ErrorCard {
  background: var(--Color_Surface);
  border: 1px solid var(--Color_Border);
  border-radius: 12px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
}

.sw-ErrorCard_Icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  margin-bottom: 10px;
}

.sw-ErrorCard_Title {
  font-size: 16px;
  font-weight: 700;
}

.sw-ErrorCard_Sub {
  font-size: 13px;
  color: var(--Color_Text2);
  max-width: 360px;
  line-height: 1.6;
}

.sw-ErrorCard_Code {
  font-size: 11px;
  font-family: var(--Font_Family-mono);
  color: var(--Color_Text3);
  background: var(--Color_Surface2);
  border: 1px solid var(--Color_Border);
  border-radius: 6px;
  padding: 4px 10px;
  margin-top: 4px;
}

.sw-ErrorCard_Actions {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}

/* ── sw-RateLimit ── */

.sw-RateLimit {
  background: rgba(245, 158, 11, 0.04);
  border: 1px solid rgba(245, 158, 11, 0.2);
  border-radius: 12px;
  padding: 20px 24px;
}

.sw-RateLimit_Header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.sw-RateLimit_Icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(245, 158, 11, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sw-RateLimit_Title {
  font-size: 14px;
  font-weight: 700;
  color: var(--Color_Amber);
}

.sw-RateLimit_Sub {
  font-size: 12px;
  color: var(--Color_Text2);
  margin-top: 1px;
}

.sw-RateLimit_BarWrap {
  height: 6px;
  background: var(--Color_Border2);
  border-radius: 3px;
  overflow: hidden;
  margin-top: 10px;
}

.sw-RateLimit_Bar {
  height: 100%;
  border-radius: 3px;
  background: var(--Color_Amber);
  transition: width 1s linear;
}

.sw-RateLimit_Labels {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--Color_Text3);
  margin-top: 6px;
}

/* ── sw-SyncFailed ── */

.sw-SyncFailed {
  background: var(--Color_Surface);
  border: 1px solid var(--Color_Border);
  border-left: 3px solid var(--Color_Red);
  border-radius: 12px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.sw-SyncFailed_Icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(239, 68, 68, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sw-SyncFailed_Title {
  font-size: 13px;
  font-weight: 700;
  color: var(--Color_Red);
}

.sw-SyncFailed_Meta {
  font-size: 11px;
  color: var(--Color_Text3);
  margin-top: 2px;
}

/* ── sw-ErrorPage ── */

.sw-ErrorPage {
  min-height: calc(100vh - 52px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
  text-align: center;
}

.sw-ErrorPage_Code {
  font-size: 11px;
  font-weight: 700;
  color: var(--Color_Text3);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 12px;
}

.sw-ErrorPage_Title {
  font-size: 52px;
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1;
  background: linear-gradient(135deg, var(--Color_Text) 0%, var(--Color_Text2) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 16px;
}

.sw-ErrorPage_TitleAccent {
  font-family: var(--Font_Family-mono);
  color: var(--Color_Accent);
  -webkit-text-fill-color: var(--Color_Accent);
}

.sw-ErrorPage_Sub {
  font-size: 16px;
  color: var(--Color_Text2);
  line-height: 1.6;
  max-width: 440px;
  margin: 0 auto 12px;
}

.sw-ErrorPage_Quip {
  font-size: 13px;
  color: var(--Color_Text3);
  font-style: italic;
  margin-bottom: 40px;
}

.sw-ErrorPage_Actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

.sw-ErrorPage_Links {
  margin-top: 32px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

.sw-ErrorPage_Link {
  padding: 6px 14px;
  border-radius: 20px;
  background: var(--Color_Surface2);
  border: 1px solid var(--Color_Border);
  font-size: 12px;
  color: var(--Color_Text2);
  cursor: pointer;
  transition: all 0.1s;
}

.sw-ErrorPage_Link:hover {
  background: var(--Color_Surface);
  color: var(--Color_Text);
  border-color: var(--Color_Border2);
}

/* ── sw-ConnectionBanner ── */

.sw-ConnectionBanner {
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 10px;
  padding: 10px 16px;
  font-size: 12px;
  color: var(--Color_Text2);
}

.sw-ConnectionBanner-offline {
  background: rgba(239, 68, 68, 0.05);
  border: 1px solid rgba(239, 68, 68, 0.2);
}

.sw-ConnectionBanner-online {
  background: rgba(34, 197, 94, 0.05);
  border: 1px solid rgba(34, 197, 94, 0.2);
}

/*
|--------------------------------------------------------------------------
| Search Dialog
|--------------------------------------------------------------------------
| @namespace: sw-
|
*/

.sw-SearchDialog_Backdrop {
  position: fixed;
  inset: 0;
  z-index: 300;

  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
}

.sw-SearchDialog_Backdrop[hidden] {
    display: none;
  }

.sw-SearchDialog {
  position: fixed;
  inset-block-start: 6vh;
  inset-inline-start: 50%;
  z-index: 301;

  inline-size: min(860px, calc(100vw - 32px));
  max-block-size: 80vh;

  display: flex;
  flex-direction: column;

  background: var(--Color_Background);
  border: 1px solid var(--Color_Border);
  border-radius: 16px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
  outline: none;
  overflow: hidden;

  transform: translateX(-50%);
}

.sw-SearchDialog[hidden] {
    display: none;
  }

.sw-SearchDialog_Header {
  display: flex;
  align-items: center;
  gap: 12px;

  padding: 14px 18px;

  background: var(--Color_Surface);
  border: 1px solid var(--Color_Accent);
  border-radius: 12px;
  box-shadow: 0 0 0 3px rgba(79, 142, 247, 0.15);

  margin: 16px 16px 0;
}

.sw-SearchDialog_Icon {
  flex-shrink: 0;

  inline-size: 18px;
  block-size: 18px;

  color: var(--Color_Accent);
}

.sw-SearchDialog_Input {
  flex: 1;
  min-inline-size: 0;

  margin: 0;
  padding: 0;

  font-family: var(--Font_Family-sans);
  font-size: 18px;
  font-weight: 500;

  background-color: transparent;
  border: 0;
  color: var(--Color_Text);
  outline: none;
}

.sw-SearchDialog_Input::-moz-placeholder {
    color: var(--Color_Text3);
  }

.sw-SearchDialog_Input::placeholder {
    color: var(--Color_Text3);
  }

.sw-SearchDialog_Esc {
  flex-shrink: 0;

  padding: 2px 7px;

  font-family: var(--Font_Family-mono);
  font-size: 12px;

  background: var(--Color_Surface2);
  border: 1px solid var(--Color_Border2);
  border-radius: 5px;
  color: var(--Color_Text3);
}

.sw-SearchDialog_Hint {
  padding: 8px 18px 0;
  margin-inline: 16px;

  font-size: 12px;
  color: var(--Color_Text3);
}

.sw-SearchDialog_HintQuery {
  color: var(--Color_Text);
  font-weight: 600;
}

.sw-SearchDialog_Loading {
  display: flex;
  align-items: center;
  gap: 10px;

  padding: 12px 18px;
  margin-inline: 16px;

  font-size: 13px;
  color: var(--Color_Text3);
}

.sw-SearchDialog_Loading[hidden] {
    display: none;
  }

.sw-SearchDialog_Spinner {
  inline-size: 14px;
  block-size: 14px;
  flex-shrink: 0;

  border: 2px solid var(--Color_Border2);
  border-block-start-color: var(--Color_Accent);
  border-radius: 50%;

  animation: sw-SearchDialog_spin 0.6s linear infinite;
}

@keyframes sw-SearchDialog_spin {
  to { transform: rotate(360deg); }
}

.sw-SearchDialog_Body {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 16px;
  outline: 0;
}

.sw-SearchDialog_Empty {
  padding: 32px 16px;

  font-size: 13px;
  text-align: center;

  color: var(--Color_Text3);
}

/* Result groups */

.sw-SearchDialog_Group {
  margin-block-end: 24px;
}

.sw-SearchDialog_Group:last-child {
    margin-block-end: 0;
  }

.sw-SearchDialog_GroupTitle {
  display: flex;
  align-items: center;
  gap: 8px;

  margin-block-end: 8px;

  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;

  color: var(--Color_Text3);
}

.sw-SearchDialog_GroupTitle::after {
    content: '';
    flex: 1;
    block-size: 1px;
    background: var(--Color_Border);
  }

/* Result items — shared base */

.sw-SearchDialog_Item {
  outline: 0;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;

  border-radius: 12px;
  border: 1px solid transparent;

  transition: background 0.1s;
}

.sw-SearchDialog_Item[data-highlighted] {
    background: var(--Color_Surface);
    border-color: var(--Color_Border);
  }

.sw-SearchDialog_Item:hover {
    background: var(--Color_Surface);
    border-color: var(--Color_Border);
  }

.sw-SearchDialog_ItemLink {
  display: flex;
  align-items: center;
  gap: 12px;

  padding: 12px 16px;
}

/* Track thumbnail */

.sw-SearchDialog_Map {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;

  inline-size: 64px;
  block-size: 40px;

  background: var(--Color_Surface2);
  border-radius: 12px;

  font-size: 11px;
  color: var(--Color_Text3);
}

/* Driver avatar */

.sw-SearchDialog_Avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;

  inline-size: 40px;
  block-size: 40px;

  border-radius: 12px;
  color: #fff;
  font-size: 14px;
  font-weight: 800;
}

.sw-SearchDialog_Avatar-default {
  background: linear-gradient(135deg, color-mix(in oklch, var(--Color_Accent2) 75%, var(--Color_Background)), color-mix(in oklch, var(--Color_Accent) 65%, var(--Color_Surface2)));
}

/* Series icon */

.sw-SearchDialog_SeriesIcon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;

  inline-size: 40px;
  block-size: 40px;

  border-radius: 12px;
  font-size: 20px;
}

.sw-SearchDialog_SeriesIcon-blue {
  background: color-mix(in oklch, var(--Color_Accent) 14%, var(--Color_Surface2));
}

.sw-SearchDialog_SeriesIcon-green {
  background: color-mix(in oklch, var(--Color_Green) 14%, var(--Color_Surface2));
}

/* Info column */

.sw-SearchDialog_Info {
  flex: 1;
  min-inline-size: 0;
}

.sw-SearchDialog_Name {
  font-size: 14px;
  font-weight: 700;

  color: var(--Color_Text);

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sw-SearchDialog_Highlight {
  color: var(--Color_Amber);
}

.sw-SearchDialog_Meta {
  font-size: 12px;
  margin-block-start: 2px;

  color: var(--Color_Text2);

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Stats */

.sw-SearchDialog_Stats {
  display: flex;
  flex-shrink: 0;
  gap: 12px;
}

.sw-SearchDialog_Stat {
  font-size: 12px;
  font-family: var(--Font_Family-mono);
  color: var(--Color_Text2);
}

.sw-SearchDialog_StatValue {
  color: var(--Color_Text);
  font-weight: 600;
}

/* Chips (empty state) */

.sw-SearchDialog_ChipsLabel {
  margin-block-end: 8px;

  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;

  color: var(--Color_Text3);
}

.sw-SearchDialog_Chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;

  margin-block-end: 24px;
}

.sw-SearchDialog_Chip {
  padding: 6px 12px;

  font-size: 12px;
  font-weight: 500;
  font-family: inherit;

  background: var(--Color_Surface2);
  border: 1px solid var(--Color_Border2);
  border-radius: 12px;
  color: var(--Color_Text2);
  cursor: pointer;

  transition: border-color 0.1s, color 0.1s;
}

.sw-SearchDialog_Chip:hover {
    border-color: var(--Color_Border2);
    color: var(--Color_Text);
  }

/* Footer */

.sw-SearchDialog_Footer {
  display: flex;
  align-items: center;
  gap: 8px;

  padding: 10px 18px;

  font-size: 11px;

  border-block-start: 1px solid var(--Color_Border);
  color: var(--Color_Text3);
}

.sw-SearchDialog_Kbd {
  padding: 1px 5px;

  font-family: var(--Font_Family-mono);
  font-size: 10px;

  background: var(--Color_Surface2);
  border: 1px solid var(--Color_Border);
  border-radius: 3px;
}

/* ── header ── */

/*
|--------------------------------------------------------------------------
| Header
|--------------------------------------------------------------------------
| @namespace: sw-
|
*/

.sw-Header {
  position: sticky;
  inset-block-start: 0;
  z-index: 100;

  background: rgba(10, 11, 14, 0.92);
  backdrop-filter: blur(12px);
  border-block-end: 1px solid var(--Color_Border);
}

.sw-Header_Inner {
  display: flex;
  align-items: center;
  block-size: var(--Header_Height);
}

.sw-Header_Logo {
  display: flex;
  align-items: center;
  gap: 10px;

  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.02em;

  margin-inline-end: 32px;
  flex-shrink: 0;
}

.sw-Header_LogoIcon {
  display: flex;
  align-items: center;
  justify-content: center;

  inline-size: 24px;
  block-size: 24px;

  background: linear-gradient(135deg, #fff 50%, #111 50%);
  border-radius: 50%;
  font-size: 12px;
}

.sw-Header_Nav {
  flex: 1;
}

.sw-Header_NavList {
  display: flex;
  gap: 4px;
}

.sw-Header_NavLink {
  display: block;
  padding: 6px 12px;
  border-radius: 6px;

  font-size: 13px;
  font-weight: 500;
  color: var(--Color_Text2);

  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.sw-Header_NavLink:hover {
    background: var(--Color_Surface);
    color: var(--Color_Text);
  }

.sw-Header_NavLink[aria-current="page"] {
    background: var(--Color_Surface2);
    color: var(--Color_Text);
  }

.sw-Header_Right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.sw-Header_Search {
  display: flex;
  align-items: center;
  gap: 8px;

  background: var(--Color_Surface);
  border: 1px solid var(--Color_Border);
  border-radius: 8px;
  padding: 6px 12px;

  color: var(--Color_Text3);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;

  transition: border-color 0.15s;
}

.sw-Header_Search:hover {
    border-color: var(--Color_Border2);
  }

.sw-Header_SearchIcon {
  inline-size: 16px;
  block-size: 16px;
  flex-shrink: 0;
  color: var(--Color_Text3);
}

.sw-Header_SearchText {
  color: var(--Color_Text3);
  inline-size: 80px;
  text-align: start;
}

.sw-Header_SearchKbd {
  background: var(--Color_Border2);
  border-radius: 4px;
  padding: 1px 5px;

  font-size: 11px;
  font-family: var(--Font_Family-mono);
  color: var(--Color_Text3);
}

/* ── sw-HeaderMenu ── */

.sw-HeaderMenu {
  position: relative;
}

.sw-HeaderMenu_Trigger {
  display: flex;
  align-items: center;
  justify-content: center;

  inline-size: 30px;
  block-size: 30px;
  border-radius: 50%;

  background: linear-gradient(135deg, var(--Color_Accent), var(--Color_Purple));
  font-size: 12px;
  font-weight: 700;

  cursor: pointer;
  transition: opacity 0.15s;
}

.sw-HeaderMenu_Trigger:hover {
    opacity: 0.85;
  }

.sw-HeaderMenu_Trigger[aria-expanded="true"] {
    box-shadow: 0 0 0 2px var(--Color_Accent);
  }

.sw-HeaderMenu_Popup {
  position: absolute;
  inset-block-start: calc(100% + 8px);
  inset-inline-end: 0;
  z-index: 200;

  min-inline-size: 200px;

  background: var(--Color_Surface);
  border: 1px solid var(--Color_Border2);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

.sw-HeaderMenu_Popup[hidden] {
    display: none;
  }

.sw-HeaderMenu_Profile {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
}

.sw-HeaderMenu_ProfileAvatar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;

  inline-size: 40px;
  block-size: 40px;
  border-radius: 50%;

  background: linear-gradient(135deg, var(--Color_Accent), var(--Color_Purple));
  font-size: 14px;
  font-weight: 700;
}

.sw-HeaderMenu_ProfileInfo {
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
}

.sw-HeaderMenu_ProfileName {
  font-size: 14px;
  font-weight: 600;
  color: var(--Color_Text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sw-HeaderMenu_ProfileEmail {
  font-size: 12px;
  color: var(--Color_Text3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sw-HeaderMenu_Separator {
  block-size: 1px;
  margin: 0;

  background: var(--Color_Border);
  border: none;
}

.sw-HeaderMenu_Item {
  display: flex;
  align-items: center;
  gap: 10px;

  inline-size: 100%;
  padding: 10px 14px;

  font-size: 13px;
  font-family: inherit;
  color: var(--Color_Text);
  text-align: start;
  background: none;
  border: none;
  cursor: pointer;
  outline: none;
  text-decoration: none;
}

.sw-HeaderMenu_Item:hover,.sw-HeaderMenu_Item:focus-visible {
    background: var(--Color_Surface2);
  }

.sw-HeaderMenu_Item-danger {
  color: var(--Color_Red);
}

/* ── rivals ── */

/* ── rv-Row ── */

.rv-Row {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
}

.rv-Row_Avatar {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: linear-gradient(135deg, #1a2744, #2a3a64);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
  border: 1px solid var(--Color_Border2);
}

.rv-Row_Info {
  flex: 1;
  min-width: 0;
}

.rv-Row_Name {
  font-size: 13px;
  font-weight: 600;
}

.rv-Row_Meta {
  font-size: 11px;
  color: var(--Color_Text3);
}

.rv-Row_Score {
  display: flex;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  font-family: var(--Font_Family-mono);
  flex-shrink: 0;
}

.rv-Row_Wins {
  color: var(--Color_Text3);
}

.rv-Row-winning .rv-Row_Wins {
    color: var(--Color_Green);
  }

.rv-Row-losing .rv-Row_Wins {
    color: color-mix(in srgb, var(--Color_Green) 10%, var(--Color_Text3));
  }

.rv-Row_Losses {
  color: var(--Color_Text3);
}

.rv-Row-winning .rv-Row_Losses {
    color: color-mix(in srgb, var(--Color_Red) 10%, var(--Color_Text3));
  }

.rv-Row-losing .rv-Row_Losses {
    color: var(--Color_Red);
  }

/* ── rv-List ── */

.rv-List {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ── rv-Sub ── */

.rv-Sub {
  font-size: 11px;
  color: var(--Color_Text3);
}

/* ─────────────────────────────────────────────
   Rivals empty state — rv- namespace
───────────────────────────────────────────── */

.rv-Empty {
  font-size: 13px;
  color: var(--Color_Text3);
}

/* ── admin ── */

.ad-Page {
  max-inline-size: var(--Grid_Container);
  inline-size: 100%;
  margin-inline: auto;
  padding-inline: var(--Site_Margin);
  padding-block: 32px;
}

.ad-Page_Header {
  margin-bottom: 24px;
}

.ad-Page_Title {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  display: flex;
  align-items: center;
  gap: 12px;
}

.ad-Page_Sub {
  font-size: 13px;
  color: var(--Color_Text3);
  display: block;
  margin-top: 4px;
}

.ad-Page_BackLink {
  font-size: 13px;
  color: var(--Color_Text2);
  display: inline-block;
  margin-bottom: 8px;
}

.ad-Page_BackLink:hover {
  color: var(--Color_Accent);
}

.ad-StatRow {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.ad-StatCard {
  background: var(--Color_Surface);
  border: 1px solid var(--Color_Border);
  border-radius: 10px;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 140px;
}

.ad-StatCard_Dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.ad-StatCard_Dot-green { background: var(--Color_Green); }

.ad-StatCard_Dot-red { background: var(--Color_Red); }

.ad-StatCard_Dot-blue { background: var(--Color_Accent); }

.ad-StatCard_Info { display: flex; flex-direction: column; }

.ad-StatCard_Label {
  font-size: 11px;
  color: var(--Color_Text3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}

.ad-StatCard_Value {
  font-size: 22px;
  font-weight: 800;
}

.ad-Card {
  background: var(--Color_Surface);
  border: 1px solid var(--Color_Border);
  border-radius: 12px;
  overflow: hidden;
}

.ad-DataTable {
  width: 100%;
  border-collapse: collapse;
}

.ad-DataTable_Head {
  font-size: 11px;
  font-weight: 600;
  color: var(--Color_Text3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-align: left;
  padding: 12px 16px;
  border-bottom: 1px solid var(--Color_Border);
  white-space: nowrap;
}

.ad-DataTable_Cell {
  padding: 10px 16px;
  border-bottom: 1px solid var(--Color_Border);
  font-size: 13px;
}

.ad-DataTable_Row {
  transition: background 0.1s;
}

.ad-DataTable_Row:hover { background: var(--Color_Surface2); }

.ad-DataTable_Row:last-child .ad-DataTable_Cell { border-bottom: none; }

.ad-DataTable_RowLink {
  color: var(--Color_Text3);
  font-size: 16px;
  padding: 4px 8px;
  border-radius: 6px;
}

.ad-DataTable_RowLink:hover {
    color: var(--Color_Accent);
    background: rgba(79, 142, 247, 0.1);
  }

.ad-DataTable_Empty {
  text-align: center;
  color: var(--Color_Text3);
  padding: 40px 16px !important;
}

.ad-StatusBadge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 5px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 600;
  font-family: var(--Font_Family-mono);
}

.ad-StatusBadge-completed { background: rgba(34, 197, 94, 0.15); color: var(--Color_Green); }

.ad-StatusBadge-errored { background: rgba(239, 68, 68, 0.15); color: var(--Color_Red); }

.ad-StatusBadge-running { background: rgba(79, 142, 247, 0.15); color: var(--Color_Accent); }

.ad-StatusBadge-pending { background: rgba(85, 93, 112, 0.15); color: var(--Color_Text3); }

.ad-StatusBadge-discovering { background: rgba(245, 158, 11, 0.15); color: var(--Color_Amber); }

.ad-StatusBadge-cancelled { background: rgba(85, 93, 112, 0.15); color: var(--Color_Text3); }

.ad-Error {
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: 10px;
  padding: 14px 18px;
  margin-bottom: 24px;
  font-size: 13px;
  color: var(--Color_Red);
}

/* ----------------------------------------------------------------
   ad-RateLimit — API rate limit display components
   Used by: admin/rate_limits
   ---------------------------------------------------------------- */

.ad-RateLimit_Remaining {
  font-weight: 700;
  font-family: var(--Font_Family-mono);
  font-size: 13px;
}

.ad-RateLimit_Remaining-ok {
  color: var(--Color_Green);
}

.ad-RateLimit_Remaining-warn {
  color: var(--Color_Amber);
}

.ad-RateLimit_Remaining-critical {
  color: var(--Color_Red);
}

.ad-RateLimit_Bar {
  width: 100%;
  height: 6px;
  background: var(--Color_Border);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 4px;
}

.ad-RateLimit_BarFill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s;
}

.ad-RateLimit_BarFill-ok {
  background: var(--Color_Green);
}

.ad-RateLimit_BarFill-warn {
  background: var(--Color_Amber);
}

.ad-RateLimit_BarFill-critical {
  background: var(--Color_Red);
}

.ad-RateLimit_Pct {
  font-size: 11px;
  color: var(--Color_Text3);
  font-family: var(--Font_Family-mono);
}

/* ── ad-NavGrid ── */

.ad-NavGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  margin-top: 24px;
}

.ad-NavGrid_Link {
  background: var(--Color_Surface);
  border: 1px solid var(--Color_Border);
  border-radius: 12px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: border-color 0.15s, background 0.15s;
}

.ad-NavGrid_Link:hover {
  border-color: var(--Color_Border2);
  background: var(--Color_Surface2);
}

.ad-NavGrid_Label {
  font-size: 15px;
  font-weight: 700;
}

.ad-NavGrid_Desc {
  font-size: 12px;
  color: var(--Color_Text3);
}

/* ── poll-runs / backfill ── */

.pr-Steps_Header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--Color_Border);
}

.pr-Steps_Title {
  font-size: 13px;
  font-weight: 600;
  color: var(--Color_Text2);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.pr-Steps_Name { font-weight: 600; }

.pr-Steps_Meta {
  font-family: var(--Font_Family-mono);
  font-size: 11px;
  color: var(--Color_Text3);
  background: var(--Color_Surface2);
  padding: 2px 6px;
  border-radius: 4px;
}

.pr-Steps_MetaCol { max-width: 300px; }

.bf-Progress {
  display: flex;
  align-items: center;
  gap: 8px;
}

.bf-Progress_Bar {
  flex: 1;
  height: 6px;
  background: var(--Color_Surface2);
  border-radius: 3px;
  overflow: hidden;
  min-width: 80px;
}

.bf-Progress_Bar-large {
  height: 10px;
  border-radius: 5px;
  margin-bottom: 24px;
}

.bf-Progress_Fill {
  height: 100%;
  background: var(--Color_Accent);
  border-radius: 3px;
  transition: width 0.3s ease;
}

.bf-Progress_Text {
  font-size: 11px;
  color: var(--Color_Text2);
  white-space: nowrap;
}

.bf-Progress_Large {
  margin-bottom: 24px;
}

/* ── dashboard ── */

/* ----------------------------------------------------------------
   db-Hero — Dashboard welcome bar
   Full-bleed background, inner content constrained to lyt-Container
   ---------------------------------------------------------------- */

.db-Hero {
  background: linear-gradient(160deg, #0a0f1e 0%, #0d1220 60%, var(--Color_Background) 100%);
  border-bottom: 1px solid var(--Color_Border);
  padding-block: 32px;
}

.db-Hero_Inner {
  display: flex;
  align-items: center;
  gap: 20px;
}

.db-Hero_Avatar {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  flex-shrink: 0;
  background: linear-gradient(135deg, #1a3a6e, #2d5ba4);
  border: 2px solid rgba(79, 142, 247, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 900;
  color: #fff;
}

.db-Hero_Welcome {
  flex: 1;
}

.db-Hero_Name {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.db-Hero_Sub {
  font-size: 13px;
  color: var(--Color_Text2);
  margin-top: 2px;
}

.db-Hero_Pills {
  display: flex;
  gap: 10px;
}

@media (width < 1024px) {
  .db-Hero_Inner {
    flex-wrap: wrap;
  }

  .db-Hero_Pills {
    width: 100%;
  }
}

@media (width < 768px) {
  .db-Hero_Inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .db-Hero_Pills {
    flex-wrap: wrap;
  }
}

/* ── db-RatingPill ── */

.db-RatingPill {
  background: var(--Color_Surface2);
  border: 1px solid var(--Color_Border2);
  border-radius: 12px;
  padding: 10px 16px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.db-RatingPill_Label {
  font-size: 10px;
  color: var(--Color_Text3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.db-RatingPill_Value {
  font-size: 20px;
  font-weight: 900;
  font-family: var(--Font_Family-mono);
}

.db-RatingPill_Value-accent { color: var(--Color_Accent); }

.db-RatingPill_Value-sr-A { color: var(--Color_Cyan); }

.db-RatingPill_Value-sr-B { color: var(--Color_Green); }

.db-RatingPill_Value-sr-C { color: var(--Color_Amber); }

.db-RatingPill_Value-sr-D { color: var(--Color_Red); }

.db-RatingPill_Value-sr-R { color: var(--Color_Red); }

.db-RatingPill_Delta {
  font-size: 11px;
}

.db-RatingPill_Delta-gain { color: var(--Color_Green); }

.db-RatingPill_Delta-loss { color: var(--Color_Red); }

/* ----------------------------------------------------------------
   db-Layout — Dashboard 3-column grid
   ---------------------------------------------------------------- */

.db-Layout {
  display: grid;
  grid-template-columns: 1fr 1fr 340px;
  gap: 16px;
  padding-block: 24px;
}

.db-Layout_Col {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

@media (width < 1024px) {
  .db-Layout {
    grid-template-columns: 1fr 1fr;
  }

  .db-Layout_Col:last-child {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

@media (width < 768px) {
  .db-Layout {
    grid-template-columns: 1fr;
  }

  .db-Layout_Col:last-child {
    grid-column: auto;
    display: flex;
    flex-direction: column;
  }
}

/* ----------------------------------------------------------------
   db-RecentForm — Last 10 results streak + stats
   ---------------------------------------------------------------- */

.db-RecentForm_Label {
  font-size: 12px;
  color: var(--Color_Text3);
}

.db-RecentForm_Streak {
  display: flex;
  gap: 5px;
  align-items: center;
  flex-wrap: wrap;
}

.db-RecentForm_Oldest {
  font-size: 11px;
  color: var(--Color_Text3);
}

.db-RecentForm_Stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 14px;
  border: 1px solid var(--Color_Border);
  border-radius: 8px;
  overflow: hidden;
}

.db-RecentForm_Stat {
  padding: 10px;
  text-align: center;
  border-right: 1px solid var(--Color_Border);
}

.db-RecentForm_Stat:last-child {
  border-right: none;
}

.db-RecentForm_StatValue {
  font-size: 18px;
  font-weight: 800;
  font-family: var(--Font_Family-mono);
}

.db-RecentForm_StatValue-amber {
  color: var(--Color_Amber);
}

.db-RecentForm_StatValue-green {
  color: var(--Color_Green);
}

.db-RecentForm_StatLabel {
  font-size: 10px;
  color: var(--Color_Text3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ── db-StreakPill ── */

.db-StreakPill {
  width: 34px;
  height: 34px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  font-family: var(--Font_Family-mono);
}

.db-StreakPill-win {
  background: rgba(245, 158, 11, 0.2);
  color: var(--Color_Amber);
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.db-StreakPill-pod {
  background: rgba(34, 197, 94, 0.15);
  color: var(--Color_Green);
  border: 1px solid rgba(34, 197, 94, 0.25);
}

.db-StreakPill-mid {
  background: var(--Color_Surface2);
  color: var(--Color_Text2);
  border: 1px solid var(--Color_Border);
}

.db-StreakPill-bad {
  background: rgba(239, 68, 68, 0.1);
  color: var(--Color_Red);
  border: 1px solid rgba(239, 68, 68, 0.2);
}

/* ----------------------------------------------------------------
   db-IrChart — iRating line chart card
   ---------------------------------------------------------------- */

.db-IrChart_Right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.db-IrChart_Delta {
  font-size: 12px;
  font-family: var(--Font_Family-mono);
}

.db-IrChart_Delta-gain {
  color: var(--Color_Green);
}

.db-IrChart_Delta-loss {
  color: var(--Color_Red);
}

.db-IrChart_Tabs {
  display: flex;
  gap: 2px;
}

.db-IrChart_Tab {
  background: none;
  border: none;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  color: var(--Color_Text3);
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.15s;
}

.db-IrChart_Tab:hover {
  color: var(--Color_Text2);
}

.db-IrChart_Tab-active {
  background: var(--Color_Surface2);
  color: var(--Color_Text);
}

.db-IrChart_Wrap {
  padding: 12px 20px 8px;
  height: 120px;
}

/* ----------------------------------------------------------------
   db-Licence — Licence progress rows
   ---------------------------------------------------------------- */

.db-LicenceList {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.db-Licence {
  display: grid;
  grid-template-columns: 32px 1fr;
  grid-template-rows: auto auto;
  -moz-column-gap: 10px;
       column-gap: 10px;
  row-gap: 6px;
}

.db-Licence_Badge {
  grid-row: 1 / 3;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  font-family: var(--Font_Family-mono);
  color: var(--licence-color);
  background: color-mix(in oklch, var(--licence-color) 15%, transparent);
  align-self: center;
}

.db-Licence_Info {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.db-Licence_Name {
  font-size: 13px;
  font-weight: 600;
}

.db-Licence_Meta {
  display: flex;
  gap: 10px;
  font-size: 11px;
  font-family: var(--Font_Family-mono);
  color: var(--Color_Text3);
}

.db-Licence_SR {
  color: var(--Color_Text2);
}

.db-Licence_Bar {
  height: 6px;
  background: var(--Color_Surface2);
  border-radius: 3px;
  position: relative;
}

.db-Licence_BarFill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.4s ease;
  position: relative;
  z-index: 0;
}

.db-Licence_BarFill-below {
  background: var(--Color_Text3);
}

.db-Licence_BarFill-eligible {
  background: color-mix(in oklch, var(--licence-color) 60%, transparent);
}

.db-Licence_BarFill-auto {
  background: color-mix(in oklch, var(--Color_Green) 60%, transparent);
}

.db-Licence_Mark {
  position: absolute;
  top: -3px;
  width: 2px;
  height: calc(100% + 6px);
  background: var(--Color_Border2);
  padding: 0 6px;
  margin-left: -7px;
  background-clip: content-box;
  cursor: help;
  z-index: 1;
  border-radius: 1px;
}

.db-Licence_Mark::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 11px;
  font-family: var(--Font_Family-mono);
  color: var(--Color_Text);
  background: var(--Color_Surface);
  border: 1px solid var(--Color_Border);
  border-radius: 6px;
  padding: 4px 8px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
}

.db-Licence_Mark:hover::after {
  opacity: 1;
}

.db-Licence_Mark-eligible {
  left: 60.12%; /* 3.0 / 4.99 */
}

.db-Licence_Mark-auto {
  left: 80.16%; /* 4.0 / 4.99 */
}

/* ----------------------------------------------------------------
   db-Week — This week schedule list
   ---------------------------------------------------------------- */

.db-WeekList {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.db-WeekItem {
  display: flex;
  flex-direction: column;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--Color_Border);
}

.db-WeekItem:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.db-WeekItem_Series {
  font-size: 11px;
  font-weight: 600;
  color: var(--Color_Text3);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.db-WeekItem_Track {
  font-size: 13px;
  font-weight: 600;
  color: var(--Color_Text);
  margin-top: 2px;
  line-height: 1.3;
}

.db-WeekItem_Config {
  font-size: 11px;
  color: var(--Color_Text3);
  margin-top: 1px;
}

/* ── db-WeekEmpty ── */

.db-WeekEmpty {
  font-size: 13px;
  color: var(--Color_Text3);
}

/* ----------------------------------------------------------------
   db-SeriesRow — Series form rows
   ---------------------------------------------------------------- */

.db-SeriesList {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.db-SeriesRow {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--Color_Border);
}

.db-SeriesRow:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.db-SeriesRow_Header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.db-SeriesRow_Name {
  font-size: 12px;
  font-weight: 600;
  color: var(--Color_Text);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.db-SeriesRow_Delta {
  font-size: 11px;
  font-family: var(--Font_Family-mono);
  white-space: nowrap;
}

.db-SeriesRow_Delta-gain {
  color: var(--Color_Green);
}

.db-SeriesRow_Delta-loss {
  color: var(--Color_Red);
}

.db-SeriesRow_Stats {
  display: flex;
  gap: 14px;
}

.db-SeriesRow_Stat {
  display: flex;
  align-items: baseline;
  gap: 3px;
}

.db-SeriesRow_StatValue {
  font-size: 13px;
  font-weight: 800;
  font-family: var(--Font_Family-mono);
}

.db-SeriesRow_StatValue-amber {
  color: var(--Color_Amber);
}

.db-SeriesRow_StatValue-green {
  color: var(--Color_Green);
}

.db-SeriesRow_StatLabel {
  font-size: 10px;
  color: var(--Color_Text3);
}

/* ----------------------------------------------------------------
   db-FeedItem — Activity feed (matches mockup)
   ---------------------------------------------------------------- */

.db-FeedItem {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 16px;
  border-bottom: 1px solid var(--Color_Border);
  text-decoration: none;
  color: inherit;
  transition: background 0.1s;
}

.db-FeedItem:hover {
    background: var(--Color_Surface2);
  }

.db-FeedItem:last-child {
  border-bottom: none;
}

.db-FeedItem_Icon {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
  margin-top: 1px;
}

.db-FeedItem_Icon-win {
  background: rgba(245, 158, 11, 0.15);
}

.db-FeedItem_Icon-pb {
  background: rgba(168, 85, 247, 0.15);
}

.db-FeedItem_Icon-race {
  background: rgba(79, 142, 247, 0.15);
}

.db-FeedItem_Body {
  flex: 1;
  min-width: 0;
}

.db-FeedItem_Text {
  font-size: 13px;
  line-height: 1.4;
  color: var(--Color_Text2);
}

.db-FeedItem_Text strong {
  color: var(--Color_Text);
}

.db-FeedItem_Gain {
  color: var(--Color_Green);
  font-family: var(--Font_Family-mono);
  font-weight: 600;
}

.db-FeedItem_Loss {
  color: var(--Color_Red);
  font-family: var(--Font_Family-mono);
  font-weight: 600;
}

.db-FeedItem_PB {
  color: var(--Color_Purple);
  font-weight: 600;
}

.db-FeedItem_Time {
  font-size: 11px;
  color: var(--Color_Text3);
  margin-top: 2px;
}

/* ── series-browser ── */

/* ─────────────────────────────────────────────
   Series Browser — sb- namespace
───────────────────────────────────────────── */

/* ── Hero ── */

.sb-Hero {
  background: linear-gradient(180deg, #0d1220 0%, var(--Color_Background) 100%);
  border-bottom: 1px solid var(--Color_Border);
  padding: 32px 0;
}

.sb-Hero_Title {
  font-size: 26px;
  font-weight: 900;
  letter-spacing: -0.03em;
}

.sb-Hero_Sub {
  font-size: 14px;
  color: var(--Color_Text2);
  margin-top: 4px;
}

/* ── Filter bar override for contained layout ── */

.sb-Page .sw-FilterBar {
  display: block;
  padding: 10px 0;
}

.sw-FilterBar_Inner {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* ── Filter extras ── */

.sb-FilterWrap {
  position: relative;
}

.sb-SearchInput {
  background: none;
  border: none;
  color: var(--Color_Text);
  font-size: 12px;
  font-family: var(--Font_Family-sans);
  outline: none;
  width: 160px;
}

.sb-SearchInput::-moz-placeholder {
  color: var(--Color_Text3);
}

.sb-SearchInput::placeholder {
  color: var(--Color_Text3);
}

.sb-SearchClear {
  background: none;
  border: none;
  color: var(--Color_Text3);
  font-size: 16px;
  cursor: pointer;
  padding: 0 2px;
  line-height: 1;
  font-family: var(--Font_Family-sans);
}

.sb-SearchClear:hover {
  color: var(--Color_Text);
}

.sb-SearchClear[hidden] {
  display: none;
}

.sb-FilterList {
  padding: 6px 0;
}

.sb-FilterCheck {
  width: 14px;
  height: 14px;
  accent-color: var(--Color_Accent);
  flex-shrink: 0;
}

.sb-FilterDot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.sb-FilterDot-sports_car { background: var(--Color_Accent); }

.sb-FilterDot-formula_car { background: var(--Color_Accent); }

.sb-FilterDot-oval { background: var(--Color_Amber); }

.sb-FilterDot-dirt_oval { background: var(--Color_Purple); }

.sb-FilterDot-dirt_road { background: var(--Color_Purple); }

.sb-SortSelect {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: var(--Color_Background) url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%237a7a8a' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 10px center;
  border: 1px solid var(--Color_Border2);
  border-radius: 8px;
  padding: 6px 28px 6px 12px;
  font-size: 12px;
  font-weight: 500;
  color: var(--Color_Text2);
  font-family: var(--Font_Family-sans);
  cursor: pointer;
}

/* ── Content ── */

.sb-Content {
  padding-top: 24px;
  padding-bottom: 24px;
}

/* ── Section ── */

.sb-Section {
  margin-bottom: 28px;
}

.sb-Section_Label {
  font-size: 11px;
  font-weight: 700;
  color: var(--Color_Text3);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.sb-Section_Label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--Color_Border);
}

.sb-Section_Dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.sb-Section_Dot-sports_car { background: var(--Color_Accent); }

.sb-Section_Dot-formula_car { background: var(--Color_Accent); }

.sb-Section_Dot-oval { background: var(--Color_Amber); }

.sb-Section_Dot-dirt_oval { background: var(--Color_Purple); }

.sb-Section_Dot-dirt_road { background: var(--Color_Purple); }

/* ── Grid ── */

.sb-Grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 12px;
}

/* ── Card ── */

.sb-Card {
  display: block;
  background: var(--Color_Surface);
  border: 1px solid var(--Color_Border);
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.15s;
  text-decoration: none;
  color: inherit;
}

.sb-Card:hover {
  border-color: var(--Color_Border2);
  transform: translateY(-1px);
}

.sb-Card_Top {
  padding: 14px 16px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.sb-Card_Icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

.sb-Card_Icon-sports_car { background: rgba(79, 142, 247, 0.1); }

.sb-Card_Icon-formula_car { background: rgba(168, 85, 247, 0.1); }

.sb-Card_Icon-oval { background: rgba(245, 158, 11, 0.1); }

.sb-Card_Icon-dirt_oval { background: rgba(245, 158, 11, 0.1); }

.sb-Card_Icon-dirt_road { background: rgba(168, 85, 247, 0.1); }

.sb-Card_Logo {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  border-radius: 4px;
}

.sb-Card_Info {
  flex: 1;
  min-width: 0;
}

.sb-Card_Name {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 4px;
}

.sb-Card_Tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

/* ── Card Stats ── */

.sb-Card_Stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--Color_Border);
}

.sb-Card_Stat {
  padding: 10px 12px;
  border-right: 1px solid var(--Color_Border);
  text-align: center;
}

.sb-Card_Stat:last-child {
  border-right: none;
}

.sb-Card_StatValue {
  font-size: 14px;
  font-weight: 800;
  font-family: var(--Font_Family-mono);
}

.sb-Card_StatValue-week {
  color: var(--Color_Green);
}

.sb-Card_StatLabel {
  font-size: 9px;
  color: var(--Color_Text3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Hidden state ── */

.sb-Card[hidden] {
  display: none;
}

.sb-Section[hidden] {
  display: none;
}

/* ── Empty state ── */

.sb-Empty {
  text-align: center;
  padding: 64px 20px;
}

.sb-Empty[hidden] {
  display: none;
}

.sb-Empty_Icon {
  font-size: 32px;
  margin-bottom: 12px;
}

.sb-Empty_Title {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 4px;
}

.sb-Empty_Text {
  font-size: 13px;
  color: var(--Color_Text3);
}

.sh-Hero {
  background: linear-gradient(160deg, #0f1624 0%, var(--Color_Background) 70%);
  border-bottom: 1px solid var(--Color_Border);
  padding: 28px 0;
}

.sh-Hero_Inner {
  display: flex;
  align-items: flex-start;
  gap: 24px;
}

.sh-Hero_Badge {
  inline-size: 72px;
  block-size: 72px;
  border-radius: 18px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  background: linear-gradient(140deg, var(--Color_Accent) 0%, var(--Color_Cyan) 100%);
  color: #fff;
  box-shadow: 0 12px 24px color-mix(in srgb, var(--Color_Accent) 30%, transparent);
}

.sh-Hero_Info {
  flex: 1;
  min-width: 0;
}

.sh-Hero_Name {
  font-size: 30px;
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.05;
}

.sh-Hero_Season {
  margin-top: 6px;
  font-size: 14px;
  color: var(--Color_Text2);
}

.sh-Hero_Tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.sh-Hero_Stats {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
  flex-wrap: wrap;
}

.sh-Hero_Stat {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.sh-Hero_StatVal {
  font-family: var(--Font_Family-mono);
  font-size: 18px;
  font-weight: 700;
  color: var(--Color_Text);
}

.sh-Hero_StatLabel {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--Color_Text3);
}

.sh-Hero_StatSep {
  inline-size: 1px;
  block-size: 18px;
  background: var(--Color_Border2);
}

@media (max-width: 1024px) {
  .sh-Hero_Inner {
    flex-wrap: wrap;
  }
}

.sh-Hero_Logo {
  inline-size: 100%;
  block-size: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  border-radius: inherit;
}

.sh-WeekNav {
  background: var(--Color_Surface);
  border-bottom: 1px solid var(--Color_Border);
}

.sh-WeekNav_Inner {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 10px 0;
  scrollbar-width: thin;
}

.sh-WeekPill {
  border: 1px solid var(--Color_Border2);
  border-radius: 12px;
  background: var(--Color_Background);
  padding: 6px 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: var(--Color_Text2);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s, opacity 0.15s;
}

.sh-WeekPill:hover {
    border-color: var(--Color_Accent2);
    color: var(--Color_Text);
  }

.sh-WeekPill_Week {
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--Color_Text3);
}

.sh-WeekPill_Track {
  font-size: 13px;
  font-weight: 600;
  color: inherit;
}

.sh-WeekPill-active {
  background: var(--Color_Accent);
  border-color: var(--Color_Accent);
  color: #fff;
}

.sh-WeekPill-active .sh-WeekPill_Week {
  color: color-mix(in srgb, #fff 78%, transparent);
}

.sh-WeekPill-done {
  background: var(--Color_Surface2);
}

.sh-WeekPill-upcoming {
  opacity: 0.4;
}

.sh-Subnav {
  border-bottom: 1px solid var(--Color_Border);
  background: var(--Color_Background);
}

.sh-Subnav_Inner {
  display: flex;
  gap: 0;
}

.sh-Subnav_Link {
  padding: 12px 20px;
  font-size: 13px;
  font-weight: 500;
  color: var(--Color_Text3);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}

.sh-Subnav_Link:hover {
    color: var(--Color_Text);
  }

.sh-Subnav_Link-active {
  color: var(--Color_Text);
  border-bottom-color: var(--Color_Accent);
  font-weight: 600;
}

.sh-Page {
  padding: 18px 0 26px;
}

.sh-Layout {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 16px;
  align-items: start;
}

.sh-Layout_Main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sh-Layout_Aside {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sh-SectionHeader {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.sh-SectionHeader_Title {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.sh-SectionHeader_Sub {
  font-size: 12px;
  color: var(--Color_Text3);
}

@media (max-width: 1024px) {
  .sh-Layout {
    grid-template-columns: 1fr;
  }
}

.sh-KpiGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.sh-Kpi {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sh-Kpi_Val {
  font-size: 26px;
  font-family: var(--Font_Family-mono);
  font-weight: 700;
  line-height: 1;
}

.sh-Kpi_Label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--Color_Text3);
}

.sh-Kpi_Sub {
  font-size: 12px;
  color: var(--Color_Text2);
}

.sh-StandingsRow {
  display: grid;
  grid-template-columns: 42px 44px minmax(220px, 1fr) 92px 112px;
  gap: 10px;
  align-items: center;
  padding: 11px 14px;
  border-bottom: 1px solid var(--Color_Border2);
}

.sh-StandingsRow_Pos {
  font-family: var(--Font_Family-mono);
  font-size: 14px;
  color: var(--Color_Text2);
}

.sh-StandingsRow_Change {
  font-size: 11px;
  font-weight: 700;
  color: var(--Color_Green);
}

.sh-StandingsRow_Driver {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.sh-StandingsRow_Avatar {
  inline-size: 30px;
  block-size: 30px;
  border-radius: 8px;
  background: var(--Color_Surface2);
  border: 1px solid var(--Color_Border2);
  flex-shrink: 0;
}

.sh-StandingsRow_Name {
  font-size: 14px;
  font-weight: 700;
  color: var(--Color_Text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sh-StandingsRow_CarInfo {
  font-size: 11px;
  color: var(--Color_Text3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sh-StandingsRow_Pts {
  font-family: var(--Font_Family-mono);
  font-size: 15px;
  font-weight: 700;
  color: var(--Color_Text);
  text-align: right;
}

.sh-StandingsRow_Stat {
  font-family: var(--Font_Family-mono);
  font-size: 12px;
  text-align: right;
  color: var(--Color_Text2);
}

.sh-IrBar {
  position: relative;
  block-size: 7px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--Color_Surface2);
  border: 1px solid var(--Color_Border2);
}

.sh-IrBar_Fill {
  block-size: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--Color_Cyan), var(--Color_Accent));
}

.sh-PromotionZone {
  border-inline-start: 3px solid var(--Color_Green);
  background: color-mix(in oklch, var(--Color_Green) 7%, transparent);
}

@media (max-width: 768px) {
  .sh-KpiGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sh-StandingsRow {
    grid-template-columns: 32px 36px minmax(170px, 1fr) 72px 82px;
    padding-inline: 10px;
  }
}

.sh-Kpi_Val-small {
  font-size: 16px;
}

.sh-PosDot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  font-family: var(--Font_Family-mono);
  background: var(--Color_Surface2);
  color: var(--Color_Text2);
}

.sh-PosDot-1 { background: var(--Color_Amber); color: #000; }

.sh-PosDot-2 { background: oklch(0.654 0.031 268.205); color: #000; }

.sh-PosDot-3 { background: oklch(0.55 0.1 50); color: #fff; }

.sh-PosDot-n { background: var(--Color_Surface2); color: var(--Color_Text2); }

.sh-DriverCell {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.sh-DriverCell_Avatar {
  width: 28px;
  height: 28px;
  border-radius: 12px;
  background: linear-gradient(135deg, #1a2744, #2a3a64);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
  border: 1px solid var(--Color_Border2);
}

.sh-DriverCell_Info {
  min-width: 0;
}

.sh-DriverCell_Name {
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sh-PointsVal {
  font-weight: 700;
}

.sh-MoreRow {
  opacity: 0.4;
  text-align: center;
  font-size: 12px;
  color: var(--Color_Text3);
}

.sh-DropInfo {
  font-size: 12px;
  color: var(--Color_Text3);
}

.sh-RoundHeader {
  display: grid;
  grid-template-columns: 40px 1fr 110px 100px 80px;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--Color_Text3);
  border-bottom: 1px solid var(--Color_Border);
}

.sh-RoundRow {
  display: grid;
  grid-template-columns: 40px 1fr 110px 100px 80px;
  gap: 10px;
  align-items: center;
  padding: 12px;
  border-bottom: 1px solid var(--Color_Border2);
}

.sh-RoundRow_Num {
  font-family: var(--Font_Family-mono);
  font-size: 13px;
  color: var(--Color_Text2);
}

.sh-RoundRow_Track {
  font-size: 14px;
  font-weight: 700;
  color: var(--Color_Text);
}

.sh-RoundRow_TrackSub {
  font-size: 11px;
  color: var(--Color_Text3);
}

.sh-RoundRow_Date {
  font-family: var(--Font_Family-mono);
  font-size: 12px;
  color: var(--Color_Text2);
}

.sh-RoundRow_Format {
  font-size: 12px;
  color: var(--Color_Text2);
}

.sh-RoundRow_Result {
  font-size: 12px;
  color: var(--Color_Text2);
  text-align: right;
}

.sh-RoundRow_Pts {
  font-family: var(--Font_Family-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--Color_Text);
  text-align: right;
}

.sh-RoundRow-current {
  border-inline-start: 3px solid var(--Color_Accent);
  background: color-mix(in oklch, var(--Color_Accent) 8%, transparent);
}

.sh-RoundRow-past {
  opacity: 0.82;
}

.sh-RoundRow-upcoming {
  opacity: 0.5;
}

@media (max-width: 768px) {
  .sh-RoundHeader {
    grid-template-columns: 34px 1fr 86px 84px 64px;
    padding-inline: 8px;
  }

  .sh-RoundRow {
    grid-template-columns: 34px 1fr 86px 84px 64px;
    padding-inline: 8px;
  }
}

.sh-RoundHeader_Cell {
  font-weight: 700;
}

.sh-RoundRow_TrackWrap {
  min-width: 0;
}

.sh-RoundRow_Detail {
  font-size: 12px;
  font-family: var(--Font_Family-mono);
  color: var(--Color_Text2);
  text-align: right;
}

.sh-ScheduleMeta {
  font-size: 12px;
  color: var(--Color_Text3);
}

.sh-KpiStrip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.sh-KpiStrip_Item {
  padding: 12px;
  border: 1px solid var(--Color_Border2);
  border-radius: 12px;
  background: var(--Color_Surface2);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sh-KpiStrip_Val {
  font-family: var(--Font_Family-mono);
  font-size: 18px;
  font-weight: 700;
}

.sh-KpiStrip_Label {
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--Color_Text3);
}

.sh-KpiStrip_Sub {
  font-size: 12px;
  color: var(--Color_Text2);
}

.sh-ChartShell {
  border: 1px solid var(--Color_Border2);
  border-radius: 14px;
  background: var(--Color_Surface);
  min-block-size: 280px;
  padding: 14px;
}

.sh-TrackTable {
  border: 1px solid var(--Color_Border2);
  border-radius: 12px;
  overflow: hidden;
  background: var(--Color_Surface);
}

.sh-TrackTable_Head {
  display: grid;
  grid-template-columns: 1.2fr 100px 100px 100px;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--Color_Border2);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--Color_Text3);
}

.sh-TrackTable_Row {
  display: grid;
  grid-template-columns: 1.2fr 100px 100px 100px;
  gap: 10px;
  padding: 11px 12px;
  border-bottom: 1px solid var(--Color_Border2);
}

.sh-TrackTable_Row:last-child {
  border-bottom: 0;
}

.sh-TrackTable_Cell {
  font-size: 13px;
  color: var(--Color_Text2);
}

.sh-TrackTable_Cell-num {
  font-family: var(--Font_Family-mono);
  text-align: right;
}

@media (max-width: 1024px) {
  .sh-KpiStrip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .sh-KpiStrip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sh-TrackTable_Head {
    grid-template-columns: 1.2fr 84px 84px 84px;
    padding-inline: 10px;
  }

  .sh-TrackTable_Row {
    grid-template-columns: 1.2fr 84px 84px 84px;
    padding-inline: 10px;
  }
}

.sh-ChartShell_Svg {
  display: block;
  width: 100%;
  height: auto;
}

.sh-ChartShell_Labels {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
}

.sh-ChartShell_Label {
  font-size: 10px;
  color: var(--Color_Text3);
}

.sh-ChartShell_Footer {
  display: flex;
  justify-content: space-between;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--Color_Border);
}

.sh-ChartShell_FooterLabel {
  font-size: 12px;
  color: var(--Color_Text3);
}

.sh-ChartShell_FooterVal {
  font-size: 16px;
  font-weight: 700;
  font-family: var(--Font_Family-mono);
}

.sh-ChartShell_FooterVal-accent {
  color: var(--Color_Accent);
}

.sh-ChartShell_FooterRight {
  text-align: right;
}

.sh-WeekStat {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--Color_Border);
  font-size: 13px;
}

.sh-WeekStat:last-child {
  border-bottom: none;
}

.sh-WeekStat_Week {
  font-family: var(--Font_Family-mono);
  font-weight: 700;
  font-size: 12px;
  color: var(--Color_Accent);
  width: 32px;
}

.sh-WeekStat_Races {
  color: var(--Color_Text2);
}

.sh-WeekStat_Drivers {
  margin-left: auto;
  font-family: var(--Font_Family-mono);
  font-size: 12px;
  color: var(--Color_Text3);
}

.sh-AiBadge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid transparent;
  background:
    linear-gradient(var(--Color_Background), var(--Color_Background)) padding-box,
    linear-gradient(120deg, var(--Color_Purple), var(--Color_Accent)) border-box;
}

.sh-AiBadge_Icon {
  inline-size: 18px;
  block-size: 18px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in oklch, var(--Color_Purple) 30%, transparent);
  color: var(--Color_Purple);
  font-size: 11px;
}

.sh-AiBadge_Text {
  font-size: 12px;
  color: var(--Color_Text2);
}

.sh-InsightCard {
  border: 1px solid var(--Color_Border2);
  border-inline-start-width: 4px;
  border-radius: 12px;
  background: var(--Color_Surface);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 900px;
}

.sh-InsightCard-performance {
  border-inline-start-color: var(--Color_Cyan);
}

.sh-InsightCard-warning {
  border-inline-start-color: var(--Color_Amber);
}

.sh-InsightCard-tip {
  border-inline-start-color: var(--Color_Green);
}

.sh-InsightCard_Header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sh-InsightCard_Icon {
  inline-size: 24px;
  block-size: 24px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--Color_Surface2);
  color: var(--Color_Text2);
  flex-shrink: 0;
}

.sh-InsightCard_Content {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.sh-InsightCard_Title {
  font-size: 14px;
  font-weight: 700;
  color: var(--Color_Text);
}

.sh-InsightCard_Desc {
  font-size: 13px;
  color: var(--Color_Text2);
}

.sh-InsightCard_Action {
  font-size: 12px;
  color: var(--Color_Accent);
  text-decoration: none;
}

.sh-InsightCard_Action:hover {
    color: var(--Color_Brand);
  }

.sh-InsightsPage {
  max-width: 900px;
}

.sh-InsightRow {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--Color_Border2);
}

.sh-InsightRow:last-child {
  border-bottom: 0;
}

.sh-InsightRow_Icon {
  inline-size: 22px;
  block-size: 22px;
  border-radius: 6px;
  background: var(--Color_Surface2);
  color: var(--Color_Text2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sh-InsightRow_Body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.sh-InsightRow_Text {
  font-size: 13px;
  color: var(--Color_Text2);
}

.sh-InsightRow_Meta {
  font-size: 11px;
  color: var(--Color_Text3);
}

.sh-SofChart {
  min-block-size: 160px;
  border: 1px solid var(--Color_Border2);
  border-radius: 12px;
  background: var(--Color_Surface2);
}

.sh-CarBar {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sh-CarBar_Top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.sh-CarBar_Label {
  font-size: 12px;
  color: var(--Color_Text2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sh-CarBar_Track {
  block-size: 7px;
  border-radius: 999px;
  background: var(--Color_Surface2);
  border: 1px solid var(--Color_Border2);
  overflow: hidden;
}

.sh-CarBar_Fill {
  block-size: 100%;
  background: linear-gradient(90deg, var(--Color_Accent2), var(--Color_Accent));
}

.sh-CarBar_Pct {
  font-family: var(--Font_Family-mono);
  font-size: 12px;
  color: var(--Color_Text2);
  flex-shrink: 0;
}

.sh-SofChart_Bar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid var(--Color_Border2);
}

.sh-SofChart_Bar:last-child {
  border-bottom: 0;
}

.sh-SofChart_Label {
  font-family: var(--Font_Family-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--Color_Accent);
  width: 32px;
}

.sh-SofChart_Val {
  font-family: var(--Font_Family-mono);
  font-size: 13px;
  color: var(--Color_Text2);
}

/* ── driver ── */

/* ── drv-Hero ── */

.drv-Hero {
  background: linear-gradient(160deg, #0f1624 0%, var(--Color_Background) 70%);
  border-bottom: 1px solid var(--Color_Border);
  padding: 32px 0;
}

.drv-Hero_Inner {
  display: flex;
  gap: 28px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.drv-Hero-condensed .drv-Hero_Inner {
    align-items: center;
  }

.drv-Hero_Avatar {
  width: 90px;
  height: 90px;
  border-radius: 12px;
  flex-shrink: 0;
  background: linear-gradient(135deg, #1a3a6e, #2d5ba4);
  border: 2px solid rgba(79, 142, 247, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  font-weight: 900;
  letter-spacing: -1px;
  color: #fff;
}

.drv-Hero-condensed .drv-Hero_Avatar {
    width: 56px;
    height: 56px;
    font-size: 20px;
  }

.drv-Hero_Info {
  flex: 1;
  min-width: 0;
}

.drv-Hero_NameRow {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.drv-Hero_Name {
  font-size: 28px;
  font-weight: 900;
  letter-spacing: -0.03em;
}

.drv-Hero-condensed .drv-Hero_Name {
    font-size: 20px;
  }

.drv-Hero_Country {
  font-size: 18px;
}

.drv-Hero_Meta {
  display: flex;
  gap: 16px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.drv-Hero_MetaItem {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--Color_Text2);
}

.drv-Hero-condensed {
  padding: 20px 0;
}

.drv-Hero_CondensedFlag {
  font-size: 16px;
}

.drv-Hero_CondensedMeta {
  font-size: 12px;
  color: var(--Color_Text3);
  margin-top: 2px;
}

.drv-Hero_Pills {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-left: auto;
}

.drv-Hero_Pill {
  background: var(--Color_Surface2);
  border: 1px solid var(--Color_Border2);
  border-radius: 12px;
  padding: 8px 14px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 100px;
}

.drv-Hero_PillLabel {
  font-size: 10px;
  color: var(--Color_Text3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.drv-Hero_PillValue {
  font-size: 18px;
  font-weight: 800;
  font-family: var(--Font_Family-mono);
}

.drv-Hero_PillValue-accent {
  color: var(--Color_Accent);
}

.drv-Hero_PillValue-lic {
  color: var(--drv-lic-color);
}

.drv-Hero_PillDelta {
  font-size: 11px;
}

/* ── drv-DisciplineStrip / drv-DisciplineBlock ── */

.drv-DisciplineStrip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-top: 20px;
}

.drv-DisciplineBlock {
  background: var(--Color_Surface2);
  border: 1px solid var(--Color_Border);
  border-left-width: 3px;
  border-left-color: var(--drv-lic-border);
  border-radius: 12px;
  overflow: hidden;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.drv-DisciplineBlock-primary {
  background: color-mix(in srgb, var(--drv-lic-border) 6%, transparent);
  border-color: color-mix(in srgb, var(--drv-lic-border) 30%, transparent);
  border-left-color: var(--drv-lic-border);
}

.drv-DisciplineBlock_Top {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}

.drv-DisciplineBlock_Icon {
  font-size: 13px;
}

.drv-DisciplineBlock_Name {
  font-size: 10px;
  font-weight: 700;
  color: var(--Color_Text3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  flex: 1;
}

.drv-DisciplineBlock_MainTag {
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.07em;
  opacity: 0.8;
  color: var(--drv-lic-color);
}

.drv-DisciplineBlock_Letter {
  font-size: 11px;
  font-weight: 900;
  font-family: var(--Font_Family-mono);
  color: var(--drv-lic-color);
}

.drv-DisciplineBlock_IRLabel {
  font-size: 9px;
  color: var(--Color_Text3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.drv-DisciplineBlock_IR {
  font-family: var(--Font_Family-mono);
  font-size: 26px;
  font-weight: 900;
  line-height: 1.15;
}

.drv-DisciplineBlock-primary .drv-DisciplineBlock_IR {
    color: var(--Color_Accent);
  }

.drv-DisciplineBlock_IR-unranked {
  color: var(--Color_Text3);
}

.drv-DisciplineBlock_Trend {
  font-size: 10px;
  margin-top: 3px;
  margin-bottom: 6px;
  color: var(--Color_Text3);
}

.drv-DisciplineBlock_SRRow {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--Color_Border);
  margin-top: auto;
}

.drv-DisciplineBlock_SRLabel {
  font-size: 9px;
  color: var(--Color_Text3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  flex: 1;
}

.drv-DisciplineBlock_SRVal {
  font-family: var(--Font_Family-mono);
  font-size: 13px;
  font-weight: 800;
  color: var(--drv-lic-color);
}

/* ── drv-Subnav ── */

.drv-Subnav {
  border-bottom: 1px solid var(--Color_Border);
  background: var(--Color_Background);
}

.drv-Subnav_Inner {
  display: flex;
  gap: 0;
}

.drv-Subnav_Link {
  padding: 12px 20px;
  font-size: 13px;
  font-weight: 500;
  color: var(--Color_Text3);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}

.drv-Subnav_Link:hover {
    color: var(--Color_Text);
  }

.drv-Subnav_Link-active {
  color: var(--Color_Text);
  border-bottom-color: var(--Color_Accent);
  font-weight: 600;
}

/* ── drv-Layout ── */

.drv-Layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 16px;
  padding-top: 24px;
  padding-bottom: 24px;
}

.drv-Main {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.drv-Aside {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.drv-Content {
  padding-top: 24px;
  padding-bottom: 24px;
}

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

/* ── drv-ResultPill ── */

.drv-ResultPill {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 800;
  font-family: var(--Font_Family-mono);
}

.drv-ResultPill-1 {
  background: rgba(245, 158, 11, 0.2);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.drv-ResultPill-2 {
  background: rgba(148, 163, 184, 0.2);
  color: #94a3b8;
  border: 1px solid rgba(148, 163, 184, 0.3);
}

.drv-ResultPill-3 {
  background: rgba(205, 127, 50, 0.2);
  color: #cd7f32;
  border: 1px solid rgba(205, 127, 50, 0.3);
}

.drv-ResultPill-n {
  background: var(--Color_Surface2);
  color: var(--Color_Text2);
  border: 1px solid var(--Color_Border);
}

.drv-ResultPill-sm {
  width: 32px;
  height: 32px;
  font-size: 13px;
}

/* ── drv-ResultRow ── */

.drv-ResultRow {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--Color_Border);
  transition: background 0.1s;
  text-decoration: none;
  color: inherit;
}

.drv-ResultRow:last-child {
    border-bottom: none;
  }

.drv-ResultRow:hover {
    background: var(--Color_Surface2);
  }

.drv-ResultRow_Info {
  flex: 1;
  min-width: 0;
}

.drv-ResultRow_Track {
  font-size: 13px;
  font-weight: 600;
}

.drv-ResultRow_Series {
  font-size: 11px;
  color: var(--Color_Text2);
}

.drv-ResultRow_Stats {
  display: flex;
  gap: 12px;
  align-items: center;
  text-align: right;
}

.drv-ResultRow_Stat {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.drv-ResultRow_StatVal {
  font-size: 12px;
  font-weight: 600;
  font-family: var(--Font_Family-mono);
}

.drv-ResultRow_StatVal-dim {
  color: var(--Color_Text2);
}

.drv-ResultRow_StatLbl {
  font-size: 10px;
  color: var(--Color_Text3);
}

/* ── drv-StatRow ── */

.drv-StatRow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px solid var(--Color_Border);
}

.drv-StatRow:last-child {
    border-bottom: none;
  }

.drv-StatRow_Key {
  font-size: 12px;
  color: var(--Color_Text2);
}

.drv-StatRow_Val {
  font-size: 13px;
  font-weight: 600;
  font-family: var(--Font_Family-mono);
}

.drv-StatRow_Sub {
  font-size: 10px;
  color: var(--Color_Text3);
}

/* ── drv-SummaryStrip ── */

.drv-SummaryStrip {
  display: flex;
  gap: 0;
  background: var(--Color_Surface);
  border: 1px solid var(--Color_Border);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 16px;
}

.drv-SummaryStrip_Item {
  flex: 1;
  padding: 14px 16px;
  border-right: 1px solid var(--Color_Border);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.drv-SummaryStrip_Item:last-child {
    border-right: none;
  }

.drv-SummaryStrip_Label {
  font-size: 10px;
  color: var(--Color_Text3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.drv-SummaryStrip_Value {
  font-size: 20px;
  font-weight: 800;
  font-family: var(--Font_Family-mono);
}

.drv-SummaryStrip_Sub {
  font-size: 11px;
  color: var(--Color_Text2);
}

/* ── drv-KPIGrid / drv-KPICard ── */

.drv-KPIGrid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}

.drv-KPICard {
  background: var(--Color_Surface);
  border: 1px solid var(--Color_Border);
  border-radius: 12px;
  padding: 16px;
}

.drv-KPICard_Label {
  font-size: 10px;
  color: var(--Color_Text3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 4px;
}

.drv-KPICard_Value {
  font-size: 24px;
  font-weight: 900;
  font-family: var(--Font_Family-mono);
}

.drv-KPICard_Sub {
  font-size: 11px;
  color: var(--Color_Text2);
  margin-top: 3px;
}

/* ── drv-ChartShell ── */

.drv-ChartShell {
  background: var(--Color_Surface);
  border: 1px solid var(--Color_Border);
  border-radius: 12px;
  overflow: hidden;
}

.drv-ChartShell_Header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--Color_Border);
}

.drv-ChartShell_Title {
  font-size: 13px;
  font-weight: 600;
  color: var(--Color_Text2);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.drv-ChartShell_Body {
  padding: 16px 20px;
}

.drv-ChartShell_Note {
  font-size: 11px;
  color: var(--Color_Text3);
}

/* ── drv- chart extras ── */

.drv-ChartPeriods {
  display: flex;
  gap: 6px;
}

.drv-ChartCanvas {
  height: 180px;
}

.drv-IrCard {
  margin-bottom: 16px;
}

/* ── drv-PerfTable ── */

.drv-PerfTable {
  width: 100%;
  border-collapse: collapse;
}

.drv-PerfTable_Head {
  font-size: 10px;
  font-weight: 600;
  color: var(--Color_Text3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 8px 12px;
  border-bottom: 1px solid var(--Color_Border);
  text-align: right;
}

.drv-PerfTable_Head:first-child {
    text-align: left;
  }

.drv-PerfTable_Cell {
  padding: 9px 12px;
  border-bottom: 1px solid var(--Color_Border);
  font-family: var(--Font_Family-mono);
  font-size: 12px;
  text-align: right;
}

.drv-PerfTable_Cell:first-child {
    text-align: left;
    font-family: var(--Font_Family-sans);
    font-size: 13px;
    font-weight: 500;
  }

.drv-PerfTable_Cell-dim {
  color: var(--Color_Text2);
}

.drv-PerfTable_Row:last-child .drv-PerfTable_Cell {
    border-bottom: none;
  }

.drv-PerfTable_Row:hover .drv-PerfTable_Cell {
    background: var(--Color_Surface2);
  }

/* ── drv-SeasonRow ── */

.drv-SeasonRow {
  display: grid;
  grid-template-columns: 100px 60px 1fr 80px 70px 70px;
  align-items: center;
  gap: 12px;
  padding: 9px 16px;
  border-bottom: 1px solid var(--Color_Border);
  font-size: 12px;
  font-family: var(--Font_Family-mono);
}

.drv-SeasonRow:last-child {
    border-bottom: none;
  }

.drv-SeasonRow:not(.drv-SeasonRow-head):hover {
    background: var(--Color_Surface2);
  }

.drv-SeasonRow-head {
  color: var(--Color_Text3);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-family: var(--Font_Family-sans);
}

.drv-SeasonRow_Label {
  font-weight: 600;
  font-family: var(--Font_Family-sans);
}

.drv-SeasonRow_Num {
  text-align: right;
}

.drv-SeasonRow_NumDim {
  text-align: right;
  color: var(--Color_Text2);
}

.drv-SeasonRow_PerRace {
  font-size: 10px;
  color: var(--Color_Text3);
}

/* ── drv-Pagination ── */

.drv-Pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-top: 1px solid var(--Color_Border);
}

.drv-Pagination_Info {
  font-size: 12px;
  color: var(--Color_Text3);
}

.drv-Pagination_Links {
  display: flex;
  gap: 6px;
}

.drv-Pagination_Link {
  padding: 6px 12px;
  background: var(--Color_Surface2);
  border: 1px solid var(--Color_Border2);
  border-radius: 6px;
  font-size: 12px;
  color: var(--Color_Text2);
  text-decoration: none;
  transition: background 0.1s;
}

.drv-Pagination_Link:hover {
    background: var(--Color_Surface);
  }

.drv-Pagination_Link-active {
  background: var(--Color_Accent);
  border-color: var(--Color_Accent);
  color: #fff;
  font-weight: 600;
}

.drv-Pagination_Link-disabled {
  color: var(--Color_Text3);
  cursor: not-allowed;
  opacity: 0.5;
}

/* ── drv-PosChange ── */

.drv-PosChange {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  font-family: var(--Font_Family-mono);
}

.drv-PosChange-flat {
  color: var(--Color_Text3);
}

/* ── drv-ComparePrompt ── */

.drv-ComparePrompt {
  display: flex;
  width: 100%;
  gap: 8px;
  align-items: center;
  background: var(--Color_Surface2);
  border: 1px solid var(--Color_Border);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 13px;
  font-family: var(--Font_Family-sans);
  color: var(--Color_Text3);
  cursor: pointer;
  transition: border-color 0.15s;
}

.drv-ComparePrompt:hover {
    border-color: var(--Color_Border2);
  }

.drv-CompareBody {
  padding: 12px 16px;
}

/* ── drv-CmpHero ── */

.drv-CmpHero {
  background: linear-gradient(160deg, #0a0b0e 0%, #0d1220 100%);
  border-bottom: 1px solid var(--Color_Border);
  padding: 32px;
}

.drv-CmpHero_Title {
  font-size: 26px;
  font-weight: 900;
  letter-spacing: -0.03em;
  margin-bottom: 20px;
}

.drv-CmpHero_Subtitle {
  font-size: 13px;
  color: var(--Color_Text2);
  margin-top: -14px;
  margin-bottom: 20px;
}

/* ── drv-CmpStrip ── */

.drv-CmpStrip {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0;
  align-items: stretch;
}

.drv-CmpStrip-empty {
  align-items: start;
}

/* ── drv-CmpCard ── */

.drv-CmpCard {
  background: var(--Color_Surface);
  border: 1px solid var(--Color_Border);
  border-radius: 12px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.drv-CmpCard-left {
  border-color: rgba(79, 142, 247, 0.3);
  background: rgba(79, 142, 247, 0.04);
}

.drv-CmpCard-right {
  border-color: rgba(239, 68, 68, 0.3);
  background: rgba(239, 68, 68, 0.04);
}

.drv-CmpCard_Top {
  display: flex;
  gap: 12px;
  align-items: center;
}

.drv-CmpCard_Avatar {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
}

.drv-CmpCard_Avatar-left {
  background: linear-gradient(135deg, #1a3a6e, #2d5ba4);
}

.drv-CmpCard_Avatar-right {
  background: linear-gradient(135deg, #6e1a1a, #a42d2d);
}

.drv-CmpCard_Name {
  font-size: 18px;
  font-weight: 800;
}

.drv-CmpCard_Name:hover {
  color: var(--Color_Accent);
}

.drv-CmpCard_Sub {
  font-size: 12px;
  color: var(--Color_Text2);
}

.drv-CmpCard_BigStats {
  display: flex;
  gap: 16px;
  margin-top: 4px;
  flex-wrap: wrap;
}

.drv-CmpCard_BigStatLabel {
  font-size: 10px;
  color: var(--Color_Text3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.drv-CmpCard_BigStatVal {
  font-family: var(--Font_Family-mono);
  font-size: 22px;
  font-weight: 900;
}

.drv-CmpCard_BigStatVal-left {
  color: var(--Color_Accent);
}

.drv-CmpCard_BigStatVal-right {
  color: #ef4444;
}

.drv-CmpCard_BigStatVal-amber {
  color: var(--Color_Amber);
}

/* ── drv-CmpVs ── */

.drv-CmpVs {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  flex-shrink: 0;
}

.drv-CmpVs-empty {
  flex-direction: column;
  justify-content: flex-start;
  padding-top: 80px;
  gap: 16px;
}

.drv-CmpVs_Badge {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--Color_Surface2);
  border: 2px solid var(--Color_Border2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  color: var(--Color_Text2);
}

/* ── drv-CmpH2H ── */

.drv-CmpH2H {
  background: var(--Color_Surface2);
  border: 1px solid var(--Color_Border2);
  border-radius: 12px;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 16px;
}

.drv-CmpH2H_Score {
  font-family: var(--Font_Family-mono);
  font-size: 28px;
  font-weight: 900;
  white-space: nowrap;
}

.drv-CmpH2H_ScoreA {
  color: var(--Color_Accent);
}

.drv-CmpH2H_ScoreSep {
  color: var(--Color_Text3);
  margin: 0 6px;
}

.drv-CmpH2H_ScoreB {
  color: #ef4444;
}

.drv-CmpH2H_Info {
  flex: 1;
}

.drv-CmpH2H_Title {
  font-size: 13px;
  font-weight: 700;
}

.drv-CmpH2H_Sub {
  font-size: 12px;
  color: var(--Color_Text2);
}

.drv-CmpH2H_Badges {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* ── drv-CmpStatSection ── */

.drv-CmpStatSection {
  font-size: 11px;
  font-weight: 700;
  color: var(--Color_Text3);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 12px 0 8px;
  border-bottom: 1px solid var(--Color_Border);
}

/* ── drv-CmpStatRow ── */

.drv-CmpStatRow {
  padding: 10px 0;
  border-bottom: 1px solid var(--Color_Border);
}

.drv-CmpStatRow:last-child {
  border-bottom: none;
}

.drv-CmpStatRow_Label {
  font-size: 11px;
  color: var(--Color_Text3);
  text-align: center;
  margin-bottom: 6px;
}

.drv-CmpStatRow_BarRow {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  align-items: center;
  gap: 12px;
}

.drv-CmpStatRow_Left {
  text-align: right;
}

.drv-CmpStatRow_Right {
  text-align: left;
}

.drv-CmpStatRow_Val {
  font-family: var(--Font_Family-mono);
  font-size: 14px;
  font-weight: 800;
  display: inline-block;
}

.drv-CmpStatRow_Val-left {
  color: var(--Color_Accent);
}

.drv-CmpStatRow_Val-right {
  color: #ef4444;
}

.drv-CmpStatRow_Val-win {
  background: rgba(79, 142, 247, 0.15);
  border-radius: 4px;
  padding: 1px 5px;
}

.drv-CmpStatRow_Val-winR {
  background: rgba(239, 68, 68, 0.15);
  border-radius: 4px;
  padding: 1px 5px;
}

.drv-CmpStatRow_Sub {
  font-size: 10px;
  color: var(--Color_Text3);
}

/* ── drv-CmpBar ── */

.drv-CmpBar {
  display: flex;
  width: 100%;
  height: 5px;
  border-radius: 3px;
  overflow: hidden;
  background: var(--Color_Border);
}

.drv-CmpBar_Left {
  background: var(--Color_Accent);
}

.drv-CmpBar_Right {
  background: #ef4444;
  margin-left: auto;
}

/* ── drv-CmpTrackRow ── */

.drv-CmpTrackHead {
  display: grid;
  grid-template-columns: 1fr 140px 140px 90px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--Color_Border);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.drv-CmpTrackHead_Col {
  color: var(--Color_Text3);
}

.drv-CmpTrackHead_Col-left {
  color: var(--Color_Accent);
  text-align: center;
}

.drv-CmpTrackHead_Col-right {
  color: #ef4444;
  text-align: center;
}

.drv-CmpTrackHead_Col-winner {
  color: var(--Color_Text3);
  text-align: center;
}

.drv-CmpTrackRow {
  display: grid;
  grid-template-columns: 1fr 140px 140px 90px;
  padding: 9px 16px;
  border-bottom: 1px solid var(--Color_Border);
  align-items: center;
  font-size: 13px;
}

.drv-CmpTrackRow:last-child {
  border-bottom: none;
}

.drv-CmpTrackRow:hover {
  background: var(--Color_Surface2);
}

.drv-CmpTrackRow_Name {
  font-weight: 600;
}

.drv-CmpTrackRow_LapA {
  font-family: var(--Font_Family-mono);
  font-weight: 700;
  color: var(--Color_Accent);
  text-align: center;
}

.drv-CmpTrackRow_LapB {
  font-family: var(--Font_Family-mono);
  font-weight: 700;
  color: #ef4444;
  text-align: center;
}

.drv-CmpTrackRow_Winner {
  font-size: 11px;
  text-align: center;
}

/* ── drv-CmpBattle ── */

.drv-CmpBattleHead {
  display: grid;
  grid-template-columns: 32px 1fr 32px;
  padding: 6px 16px;
  border-bottom: 1px solid var(--Color_Border);
  font-size: 11px;
  color: var(--Color_Text3);
}

.drv-CmpBattleHead_Left {
  text-align: center;
  color: var(--Color_Accent);
}

.drv-CmpBattleHead_Right {
  text-align: center;
  color: #ef4444;
}

.drv-CmpBattleRow {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  border-bottom: 1px solid var(--Color_Border);
}

.drv-CmpBattleRow:last-child {
  border-bottom: none;
}

.drv-CmpBattleRow_Pos {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  font-family: var(--Font_Family-mono);
  flex-shrink: 0;
}

.drv-CmpBattleRow_Pos-wonA {
  background: rgba(79, 142, 247, 0.2);
  color: var(--Color_Accent);
}

.drv-CmpBattleRow_Pos-wonB {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
}

.drv-CmpBattleRow_Pos-lost {
  background: var(--Color_Surface2);
  color: var(--Color_Text2);
}

.drv-CmpBattleRow_Info {
  flex: 1;
}

.drv-CmpBattleRow_Track {
  font-size: 13px;
  font-weight: 600;
}

.drv-CmpBattleRow_Meta {
  font-size: 11px;
  color: var(--Color_Text2);
}

/* ── drv-CmpEmpty ── */

.drv-CmpEmpty {
  background: var(--Color_Surface);
  border: 2px dashed var(--Color_Border2);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 32px 24px;
  gap: 8px;
}

.drv-CmpEmpty_Icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: var(--Color_Surface2);
  border: 2px dashed var(--Color_Border2);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
  color: var(--Color_Text3);
}

.drv-CmpEmpty_Title {
  font-size: 17px;
  font-weight: 700;
}

.drv-CmpEmpty_Desc {
  font-size: 13px;
  color: var(--Color_Text2);
  text-align: center;
  max-width: 300px;
  line-height: 1.6;
}

.drv-CmpEmpty_Search {
  width: 100%;
  max-width: 360px;
  background: var(--Color_Background);
  border: 1px solid var(--Color_Border2);
  border-radius: 10px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--Color_Text3);
  cursor: text;
  margin-top: 8px;
}

.drv-CmpEmpty_SearchInput {
  background: none;
  border: none;
  outline: none;
  font-size: 13px;
  color: var(--Color_Text);
  font-family: var(--Font_Family-sans);
  flex: 1;
  width: 100%;
}

.drv-CmpEmpty_SearchIcon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.drv-CmpEmpty_SearchKbd {
  background: var(--Color_Border);
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 10px;
  font-family: var(--Font_Family-mono);
  color: var(--Color_Text3);
  flex-shrink: 0;
}

.drv-CmpEmpty_Divider {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 360px;
  margin: 12px 0 4px;
}

.drv-CmpEmpty_DividerLine {
  flex: 1;
  height: 1px;
  background: var(--Color_Border);
}

.drv-CmpEmpty_DividerText {
  font-size: 11px;
  color: var(--Color_Text3);
}

.drv-CmpEmpty_Browse {
  margin-top: 16px;
  font-size: 12px;
  color: var(--Color_Accent);
}

/* ── drv-CmpRival ── */

.drv-CmpRivalList {
  width: 100%;
  max-width: 360px;
}

.drv-CmpRival {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.1s;
  width: 100%;
  color: inherit;
}

.drv-CmpRival:hover {
  background: var(--Color_Surface2);
}

.drv-CmpRival_Avatar {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: linear-gradient(135deg, #1a2744, #2a3a64);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
  border: 1px solid var(--Color_Border2);
  color: #fff;
}

.drv-CmpRival_Info {
  flex: 1;
}

.drv-CmpRival_Name {
  font-size: 13px;
  font-weight: 600;
}

.drv-CmpRival_Meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
}

.drv-CmpRival_MetaText {
  font-size: 11px;
  color: var(--Color_Text3);
}

.drv-CmpRival_IR {
  font-family: var(--Font_Family-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--Color_Accent);
  flex-shrink: 0;
}

.drv-CmpRival_Arrow {
  width: 14px;
  height: 14px;
  color: var(--Color_Text3);
  opacity: 0.5;
  flex-shrink: 0;
}

/* ── drv-CmpStatCard (empty state left driver card) ── */

.drv-CmpStatCard {
  background: var(--Color_Surface);
  border: 1px solid var(--Color_Border);
  border-radius: 16px;
  overflow: hidden;
}

.drv-CmpStatCard_Header {
  background: linear-gradient(160deg, #0a0f1e 0%, #0d1220 60%, #0a0b0e 100%);
  padding: 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  border-bottom: 1px solid var(--Color_Border);
}

.drv-CmpStatCard_Avatar {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: linear-gradient(135deg, #1a3a6e, #2d5ba4);
  border: 2px solid rgba(79, 142, 247, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 900;
  color: #fff;
  flex-shrink: 0;
}

.drv-CmpStatCard_Name {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.drv-CmpStatCard_Sub {
  font-size: 12px;
  color: var(--Color_Text2);
  margin-top: 2px;
}

.drv-CmpStatCard_Badges {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.drv-CmpStatCard_Section {
  padding: 16px 20px;
  border-bottom: 1px solid var(--Color_Border);
}

.drv-CmpStatCard_Section:last-child {
  border-bottom: none;
}

.drv-CmpStatCard_SectionTitle {
  font-size: 10px;
  font-weight: 700;
  color: var(--Color_Text3);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 10px;
}

.drv-CmpStatCard_Row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 0;
  font-size: 13px;
}

.drv-CmpStatCard_Row + .drv-CmpStatCard_Row {
  border-top: 1px solid var(--Color_Border);
}

.drv-CmpStatCard_Key {
  color: var(--Color_Text2);
}

.drv-CmpStatCard_Val {
  font-family: var(--Font_Family-mono);
  font-weight: 700;
}

/* ── drv-CmpAnother (sidebar) ── */

.drv-CmpAnother_Search {
  background: var(--Color_Surface2);
  border: 1px solid var(--Color_Border);
  border-radius: 8px;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 13px;
  color: var(--Color_Text3);
}

.drv-CmpAnother_Label {
  font-size: 11px;
  color: var(--Color_Text3);
  margin: 10px 0 6px;
}

.drv-CmpAnother_Item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
  background: var(--Color_Surface2);
  font-size: 12px;
  color: inherit;
}

.drv-CmpAnother_Item:hover {
  background: var(--Color_Border);
}

.drv-CmpAnother_ItemAvatar {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: linear-gradient(135deg, #1a2744, #2a3a64);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}

.drv-CmpAnother_ItemIR {
  margin-left: auto;
  color: var(--Color_Text3);
  font-family: var(--Font_Family-mono);
}

/* ── drv-CmpRadar ── */

.drv-CmpRadar {
  text-align: center;
}

.drv-CmpRadar_Chart {
  position: relative;
  width: 200px;
  height: 180px;
  margin: 0 auto;
}

.drv-CmpRadar_Legend {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 8px;
}

.drv-CmpRadar_LegendItem {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
}

.drv-CmpRadar_LegendSwatch {
  width: 12px;
  height: 3px;
  border-radius: 2px;
}

.drv-CmpRadar_LegendSwatch-a {
  background: var(--Color_Accent);
}

.drv-CmpRadar_LegendSwatch-b {
  background: #ef4444;
  border: 1px dashed #ef4444;
}

.drv-CmpRadar_Scores {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
  margin-top: 12px;
  text-align: left;
}

.drv-CmpRadar_ScoreLabel {
  font-size: 11px;
  color: var(--Color_Text2);
}

.drv-CmpRadar_ScoreA {
  font-size: 11px;
  font-family: var(--Font_Family-mono);
  text-align: center;
  color: var(--Color_Accent);
}

.drv-CmpRadar_ScoreB {
  font-size: 11px;
  font-family: var(--Font_Family-mono);
  text-align: center;
  color: #ef4444;
}

/* ── drv-CmpStatCard value colors ── */

.drv-CmpStatCard_Val-accent {
  color: var(--Color_Accent);
}

.drv-CmpStatCard_Val-cyan {
  color: #06b6d4;
}

.drv-CmpStatCard_Val-amber {
  color: var(--Color_Amber);
}

.drv-CmpStatCard_Val-green {
  color: var(--Color_Green);
}

/* ── drv-CmpAnother_Items ── */

.drv-CmpAnother_Items {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

/* ── drv-CmpStatBody (stat card inner padding) ── */

.drv-CmpStatBody {
  padding: 0 16px;
}

/* ── drv-CmpEmptyHeader ── */

.drv-CmpEmptyHeader {
  padding-top: 24px;
}

.drv-CmpEmptyHeader_Inner {
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* ── drv-CmpRival_Badge (small inline badge) ── */

.drv-CmpRival_Badge {
  font-size: 9px;
  padding: 1px 5px;
}

/* ── drv-CmpEmpty_BrowseLink ── */

.drv-CmpEmpty_BrowseLink {
  color: var(--Color_Accent);
}

/* ── drv-CmpLayout ── */

.drv-CmpLayout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 16px;
  margin-top: 16px;
}

.drv-CmpLayout_Main {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.drv-CmpLayout_Aside {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ── Responsive ── */

@media (width < 1024px) {
  .drv-CmpLayout {
    grid-template-columns: 1fr;
  }
}

@media (width < 768px) {
  .drv-CmpStrip {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .drv-CmpVs {
    width: auto;
    padding: 12px 0;
  }

  .drv-CmpTrackRow {
    grid-template-columns: 1fr 100px 100px 70px;
    font-size: 12px;
  }

  .drv-CmpTrackHead {
    grid-template-columns: 1fr 100px 100px 70px;
  }

  .drv-CmpH2H {
    flex-direction: column;
    text-align: center;
  }
}

/* ── drv-NotFound ── */

.drv-NotFound {
  text-align: center;
  padding: 80px 20px;
}

.drv-NotFound_Icon {
  font-size: 48px;
  margin-bottom: 16px;
}

.drv-NotFound_Title {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 8px;
}

.drv-NotFound_Text {
  font-size: 14px;
  color: var(--Color_Text3);
}

/* ── drv-EmptyState ── */

.drv-EmptyState {
  text-align: center;
  padding: 64px 20px;
}

.drv-EmptyState_Icon {
  font-size: 32px;
  margin-bottom: 12px;
}

.drv-EmptyState_Title {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 4px;
}

.drv-EmptyState_Text {
  font-size: 13px;
  color: var(--Color_Text3);
}

/* ── drv- colour helpers ── */

.drv-gain { color: var(--Color_Green); }

.drv-loss { color: var(--Color_Red); }

.drv-amber { color: var(--Color_Amber); }

.drv-green { color: var(--Color_Green); }

/* ── drv-CardMeta ── */

.drv-CardMeta {
  font-size: 12px;
  color: var(--Color_Text3);
}

/* ── drv-ViewAll ── */

.drv-ViewAll {
  padding: 10px 16px;
  text-align: center;
}

.drv-ViewAll_Link {
  font-size: 12px;
  color: var(--Color_Accent);
}

/* ── drv- results table cells ── */

.drv-ResultsTrack {
  font-size: 13px;
  font-weight: 600;
}

.drv-ResultsSeries {
  font-size: 11px;
  color: var(--Color_Text3);
}

.drv-FinishGroup {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.drv-FinishPos {
  font-family: var(--Font_Family-mono);
  font-size: 13px;
  font-weight: 700;
}

.drv-FinishPos-lost {
  color: var(--Color_Red);
}

.drv-ResultsDate {
  font-size: 12px;
  color: var(--Color_Text3);
}

/* ── drv-StatSummary ── */

.drv-StatSummary {
  display: flex;
  gap: 28px;
  margin-bottom: 14px;
}

.drv-StatSummary_Label {
  font-size: 10px;
  color: var(--Color_Text3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.drv-StatSummary_Value {
  font-size: 20px;
  font-weight: 800;
  font-family: var(--Font_Family-mono);
}

.drv-StatSummary_Value-accent {
  color: var(--Color_Accent);
}

/* ── race-detail ── */

.rd-Hero {
  position: relative;
  overflow: hidden;
  padding: 32px 0;
  border-bottom: 1px solid var(--Color_Border);
  background: linear-gradient(180deg, #0f1420 0%, var(--Color_Background) 100%);
}

.rd-Hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 12px 12px, color-mix(in oklch, var(--Color_Accent) 14%, transparent) 1px, transparent 1px), radial-gradient(circle at 12px 12px, color-mix(in oklch, var(--Color_Accent) 14%, transparent) 1px, transparent 1px);
  background-size: 60px 60px;
  background-position: 0 0, 30px 30px;
  opacity: 0.28;
  pointer-events: none;
}

.rd-Hero_Container {
  position: relative;
  z-index: 1;
}

.rd-Hero_Breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  font-size: 12px;
  color: var(--Color_Text3);
}

.rd-Hero_BreadcrumbItem {
  color: var(--Color_Text3);
}

.rd-Hero_BreadcrumbLink {
  color: var(--Color_Text2);
  text-decoration: none;
}

.rd-Hero_BreadcrumbLink:hover {
  color: var(--Color_Text);
}

.rd-Hero_BreadcrumbSep {
  color: var(--Color_Border2);
}

.rd-Hero_BreadcrumbCurrent {
  color: var(--Color_Text2);
}

.rd-Hero_Title {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.08;
}

.rd-Hero_MetaRow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
}

.rd-Hero_MetaItem {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--Color_Text2);
}

.rd-Hero_MetaText {
  color: var(--Color_Text2);
}

.rd-Hero_StatsRow {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 24px;
}

.rd-Hero_Stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.rd-Hero_StatLabel {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--Color_Text3);
}

.rd-Hero_StatValue {
  font-size: 22px;
  font-weight: 800;
  line-height: 1.1;
  color: var(--Color_Text);
  font-family: var(--Font_Family-mono);
}

.rd-Hero_StatValue-purple {
  color: var(--Color_Purple);
}

.rd-Hero_StatValue-amber {
  color: var(--Color_Amber);
}

.rd-Hero_StatSub {
  font-size: 11px;
  color: var(--Color_Text2);
}

.rd-Hero_Divider {
  inline-size: 1px;
  background: var(--Color_Border2);
}

@media (max-width: 768px) {
  .rd-Hero {
    padding: 24px 0;
  }

  .rd-Hero_Title {
    font-size: 22px;
  }

  .rd-Hero_StatsRow {
    gap: 16px;
  }

  .rd-Hero_Divider {
    display: none;
  }
}

.rd-Subnav {
  position: sticky;
  top: var(--Header_Height);
  z-index: 20;
  border-bottom: 1px solid var(--Color_Border);
  background: color-mix(in oklch, var(--Color_Background) 92%, #000);
}

.rd-Subnav_Inner {
  display: flex;
  gap: 2px;
  overflow-x: auto;
}

.rd-Subnav_Link {
  padding: 12px 18px;
  font-size: 13px;
  font-weight: 500;
  color: var(--Color_Text3);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.rd-Subnav_Link:hover {
    color: var(--Color_Text);
    background: color-mix(in oklch, var(--Color_Surface2) 70%, transparent);
  }

.rd-Subnav_Link-active {
  color: var(--Color_Text);
  border-bottom-color: var(--Color_Accent);
  font-weight: 600;
}

.rd-Page {
  padding-top: 28px;
  padding-bottom: 48px;
}

.rd-Layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 16px;
  align-items: start;
}

.rd-Main {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.rd-Sidebar {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

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

.rd-Pos {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 30px;
  block-size: 30px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  font-family: var(--Font_Family-mono);
}

.rd-Pos-1 {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: #1a1a1a;
}

.rd-Pos-2 {
  background: linear-gradient(135deg, #94a3b8, #cbd5e1);
  color: #1a1a1a;
}

.rd-Pos-3 {
  background: linear-gradient(135deg, #d97706, #b45309);
  color: #fff;
}

.rd-Pos-n {
  background: color-mix(in oklch, var(--Color_Surface2) 78%, transparent);
  color: var(--Color_Text2);
}

.rd-TableHeadPos {
  inline-size: 56px;
}

.rd-Table {
  table-layout: fixed;
}

.rd-DriverLink {
  font-size: 13px;
  font-weight: 600;
  color: var(--Color_Text);
  text-decoration: none;
}

.rd-DriverLink:hover {
    color: var(--Color_Accent);
  }

.rd-DriverCell {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.rd-DriverCar {
  display: block;
  font-size: 11px;
  color: var(--Color_Text3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rd-ClassTabs {
  display: flex;
  gap: 2px;
  background: none;
  padding: 0;
}

.rd-ClassTab {
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 500;
  border-radius: 6px;
  color: var(--Color_Text3);
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}

.rd-ClassTab:hover {
    background: var(--Color_Surface2);
    color: var(--Color_Text);
  }

.rd-ClassTab-active {
  background: var(--Color_Surface2);
  color: var(--Color_Text);
  font-weight: 600;
}

.rd-Row-you {
  background: color-mix(in oklch, var(--Color_Accent) 4%, transparent);
}

.rd-ClassTag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--Color_Border2);
  font-size: 11px;
  color: var(--Color_Text2);
  background: color-mix(in oklch, var(--Color_Surface2) 65%, transparent);
}

.rd-FastestValue {
  font-weight: 700;
  color: var(--Color_Purple);
}

.rd-AnalysisDriver {
  font-weight: 600;
}

.rd-DriverFlag {
  font-size: 14px;
  flex-shrink: 0;
  line-height: 1;
}

.rd-IncBadge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  font-family: var(--Font_Family-mono);
}

.rd-IncBadge-clean {
  background: color-mix(in oklch, var(--Color_Green) 15%, transparent);
  color: var(--Color_Green);
}

.rd-IncBadge-low {
  background: color-mix(in oklch, var(--Color_Amber) 15%, transparent);
  color: var(--Color_Amber);
}

.rd-IncBadge-mid {
  background: color-mix(in oklch, var(--Color_Red) 10%, transparent);
  color: var(--Color_Red);
}

.rd-IncBadge-high {
  background: color-mix(in oklch, var(--Color_Red) 20%, transparent);
  color: var(--Color_Red);
}

.rd-IncidentKpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--Color_Border);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 16px;
  background: var(--Color_Surface);
}

.rd-IncidentKpi {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 16px 20px;
  border-right: 1px solid var(--Color_Border);
}

.rd-IncidentKpi:last-child {
  border-right: 0;
}

.rd-IncidentKpi_Label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--Color_Text3);
}

.rd-IncidentKpi_Value {
  font-family: var(--Font_Family-mono);
  font-size: 24px;
  font-weight: 800;
  color: var(--Color_Text);
}

.rd-IncidentKpi_Value-amber {
  color: var(--Color_Amber);
}

.rd-IncidentKpi_Value-green {
  color: var(--Color_Green);
}

.rd-IncidentKpi_Value-red {
  color: var(--Color_Red);
}

.rd-IncidentKpi_Sub {
  font-size: 12px;
  color: var(--Color_Text3);
}

@media (max-width: 768px) {
  .rd-IncidentKpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rd-IncidentKpi {
    border-bottom: 1px solid var(--Color_Border);
  }

  .rd-IncidentKpi:last-child {
    border-right: 1px solid var(--Color_Border);
  }
}

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

  .rd-IncidentKpi {
    border-right: 0;
  }
}

.rd-Podium {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 8px;
  block-size: 120px;
  padding: 20px 16px 0;
}

.rd-Podium_Slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.rd-Podium_Name {
  max-inline-size: 92px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 600;
  color: var(--Color_Text2);
  text-align: center;
}

.rd-Podium_iR {
  font-family: var(--Font_Family-mono);
  font-size: 10px;
  color: var(--Color_Text3);
}

.rd-Podium_Block {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 72px;
  border-radius: 6px 6px 0 0;
  border: 1px solid transparent;
  font-family: var(--Font_Family-mono);
  font-size: 18px;
  font-weight: 900;
}

.rd-Podium_Block-1 {
  block-size: 70px;
  color: #f59e0b;
  border-color: color-mix(in oklch, var(--Color_Amber) 30%, transparent);
  background: linear-gradient(180deg, color-mix(in oklch, var(--Color_Amber) 28%, transparent), color-mix(in oklch, var(--Color_Amber) 8%, transparent));
}

.rd-Podium_Block-2 {
  block-size: 50px;
  color: #94a3b8;
  border-color: color-mix(in srgb, #94a3b8 35%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, #94a3b8 25%, transparent), color-mix(in srgb, #94a3b8 8%, transparent));
}

.rd-Podium_Block-3 {
  block-size: 36px;
  color: #cd7f32;
  border-color: color-mix(in srgb, #cd7f32 35%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, #cd7f32 25%, transparent), color-mix(in srgb, #cd7f32 8%, transparent));
}

.rd-PodiumSummary {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.rd-PodiumSummary_Row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--Color_Border);
}

.rd-PodiumSummary_Row:last-child {
  border-bottom: none;
}

.rd-PodiumSummary_Label {
  font-size: 12px;
  color: var(--Color_Text2);
}

.rd-PodiumSummary_Val {
  font-size: 12px;
  font-weight: 600;
  font-family: var(--Font_Family-mono);
}

.rd-PodiumSummary_Val-purple {
  color: var(--Color_Purple);
}

.rd-PodiumSummary_Val-gain {
  color: var(--Color_Green);
}

/* ── Side list (Conditions, Lap Stats) ── */

.rd-SideList {
  padding: 0 16px 8px;
}

.rd-SideList_Row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--Color_Border);
  font-size: 13px;
}

.rd-SideList_Row:last-child {
  border-bottom: none;
}

.rd-SideList_Key {
  color: var(--Color_Text2);
  flex-shrink: 0;
}

.rd-SideList_Val {
  font-family: var(--Font_Family-mono);
  font-weight: 600;
  color: var(--Color_Text);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: right;
}

.rd-SideList_Val-fastest {
  color: var(--Color_Purple);
}

/* ── iRating Movers ── */

.rd-Movers {
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rd-Movers_Row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.rd-Movers_Name {
  font-size: 13px;
  color: var(--Color_Text);
}

.rd-Movers_Divider {
  block-size: 1px;
  background: var(--Color_Border);
  margin: 4px 0;
}

/* ── Pace Progress Bar ── */

.rd-PaceProgress {
  inline-size: 100%;
  block-size: 6px;
  border-radius: 3px;
  overflow: hidden;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: var(--Color_Border);
}

.rd-PaceProgress::-webkit-progress-bar {
  background: var(--Color_Border);
  border-radius: 3px;
}

.rd-PaceProgress::-webkit-progress-value {
  background: var(--Color_Accent);
  border-radius: 3px;
}

.rd-PaceProgress::-moz-progress-bar {
  background: var(--Color_Accent);
  border-radius: 3px;
}

.rd-PaceProgress-fastest::-webkit-progress-value {
  background: var(--Color_Purple);
}

.rd-PaceProgress-fastest::-moz-progress-bar {
  background: var(--Color_Purple);
}

.sr-SearchPage {
  padding: 40px 24px 56px;
}

.sr-SearchPage_Inner {
  max-inline-size: 860px;
  margin-inline: auto;
}

.sr-SearchPage_Bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-block-end: 8px;
  padding: 14px 18px;
  background: var(--Color_Surface);
  border: 1px solid var(--Color_Accent);
  border-radius: 12px;
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--Color_Accent) 20%, transparent);
}

.sr-SearchPage_Icon {
  flex-shrink: 0;
  font-size: 18px;
}

.sr-SearchPage_Input {
  flex: 1;
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  font-family: var(--Font_Family-sans);
  font-size: 18px;
  font-weight: 500;
  background: transparent;
  border: 0;
  color: var(--Color_Text);
  outline: 0;
}

.sr-SearchPage_Input::-moz-placeholder {
  color: var(--Color_Text3);
}

.sr-SearchPage_Input::placeholder {
  color: var(--Color_Text3);
}

.sr-SearchPage_Esc {
  flex-shrink: 0;
  padding: 2px 7px;
  font-family: var(--Font_Family-mono);
  font-size: 12px;
  color: var(--Color_Text3);
  background: var(--Color_Surface2);
  border: 1px solid var(--Color_Border2);
  border-radius: 5px;
}

.sr-SearchPage_Hint {
  margin: 0 0 28px;
  font-size: 12px;
  color: var(--Color_Text3);
}

.sr-SearchPage_HintQuery {
  color: var(--Color_Text);
  font-weight: 600;
}

.sr-SearchPage_QuickSearch {
  margin-block-start: 12px;
}

.sr-SearchPage_QuickTitle {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--Color_Text3);
}

.sr-SearchPage_QuickChips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sr-SearchPage_QuickChip {
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 500;
  color: var(--Color_Text2);
  background: var(--Color_Surface2);
  border: 1px solid var(--Color_Border2);
  border-radius: 12px;
  transition: color 0.1s, border-color 0.1s;
}

.sr-SearchPage_QuickChip:hover {
  color: var(--Color_Text);
  border-color: var(--Color_Border);
}

@media (width <= 768px) {
  .sr-SearchPage {
    padding: 24px 15px 40px;
  }
}

.sr-SearchPage_Group {
  margin-block-end: 24px;
}

.sr-SearchPage_GroupTitle {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--Color_Text3);
}

.sr-SearchPage_GroupTitle::after {
  content: "";
  flex: 1;
  block-size: 1px;
  background: var(--Color_Border);
}

.sr-SearchPage_Item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border: 1px solid transparent;
  border-radius: 12px;
  transition: background 0.1s, border-color 0.1s;
}

.sr-SearchPage_Item:hover {
  background: var(--Color_Surface);
  border-color: var(--Color_Border);
}

.sr-SearchPage_Item-topMatch {
  background: var(--Color_Surface);
  border-color: color-mix(in oklch, var(--Color_Accent) 30%, var(--Color_Border));
}

.sr-SearchPage_TrackMap {
  inline-size: 64px;
  block-size: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-family: var(--Font_Family-mono);
  font-size: 11px;
  color: var(--Color_Text3);
  background: var(--Color_Surface2);
  border-radius: 12px;
}

.sr-SearchPage_Info {
  flex: 1;
  min-inline-size: 0;
}

.sr-SearchPage_Name {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 700;
  color: var(--Color_Text);
}

.sr-SearchPage_Meta {
  display: block;
  margin-block-start: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  color: var(--Color_Text2);
}

.sr-SearchPage_Avatar {
  inline-size: 40px;
  block-size: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 800;
  color: var(--Color_Text);
}

.sr-SearchPage_Avatar-default {
  background: linear-gradient(135deg, color-mix(in oklch, var(--Color_Accent2) 75%, var(--Color_Background)), color-mix(in oklch, var(--Color_Accent) 65%, var(--Color_Surface2)));
}

.sr-SearchPage_Flag {
  margin-inline-start: 4px;
}

.sr-SearchPage_SeriesIcon {
  inline-size: 40px;
  block-size: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 20px;
  border-radius: 12px;
  background: color-mix(in oklch, var(--Color_Accent) 14%, var(--Color_Surface2));
}

.sr-SearchPage_RaceIcon {
  inline-size: 40px;
  block-size: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 20px;
}

.sr-SearchPage_Status {
  flex-shrink: 0;
  font-size: 12px;
  color: var(--Color_Text3);
}

.sr-SearchPage_Stat {
  flex-shrink: 0;
  font-family: var(--Font_Family-mono);
  font-size: 12px;
  color: var(--Color_Text2);
}

.sr-SearchPage_StatStrong {
  color: var(--Color_Text);
}

@media (width <= 768px) {
  .sr-SearchPage_Item {
    padding: 12px;
  }

  .sr-SearchPage_TrackMap {
    inline-size: 56px;
  }

  .sr-SearchPage_Status {
    display: none;
  }
}

.tl-Header {
  border-bottom: 1px solid var(--Color_Border);
  padding: 30px 0 24px;
  background: linear-gradient(180deg, color-mix(in oklch, var(--Color_Accent) 12%, var(--Color_Background)) 0%, var(--Color_Background) 100%);
}

.tl-Header_Title {
  margin: 0;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.tl-Header_Subtitle {
  margin: 6px 0 0;
  color: var(--Color_Text2);
  font-size: 14px;
}

.tl-FilterBar {
  position: sticky;
  top: var(--Header_Height);
  z-index: 20;
  border-bottom: 1px solid var(--Color_Border);
  background: color-mix(in oklch, var(--Color_Background) 94%, #000);
}

.tl-FilterBar_Inner {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-height: 52px;
  padding-top: 10px;
  padding-bottom: 10px;
}

.tl-FilterBar_Search {
  min-width: 180px;
  border: 1px solid var(--Color_Border2);
  border-radius: 8px;
  background: var(--Color_Surface);
  color: var(--Color_Text3);
  font-size: 12px;
  padding: 7px 10px;
}

.tl-FilterBar_Separator {
  width: 1px;
  height: 20px;
  background: var(--Color_Border2);
}

.tl-FilterBar_Label {
  color: var(--Color_Text3);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.tl-FilterBar_Chip {
  border: 1px solid var(--Color_Border2);
  border-radius: 999px;
  background: var(--Color_Surface);
  color: var(--Color_Text2);
  font-size: 12px;
  line-height: 1;
  padding: 7px 12px;
  cursor: pointer;
}

.tl-FilterBar_Chip-active {
  color: var(--Color_Text);
  border-color: color-mix(in oklch, var(--Color_Accent) 65%, var(--Color_Border2));
  background: color-mix(in oklch, var(--Color_Accent) 12%, var(--Color_Surface));
}

.tl-FilterBar_Right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

.tl-FilterBar_Sort {
  border: 1px solid var(--Color_Border2);
  border-radius: 8px;
  padding: 7px 10px;
  color: var(--Color_Text2);
  font-size: 12px;
  background: var(--Color_Surface);
}

.tl-FilterBar_ViewToggle {
  display: flex;
  gap: 4px;
}

.tl-FilterBar_ViewBtn {
  border: 1px solid var(--Color_Border2);
  border-radius: 8px;
  color: var(--Color_Text3);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 7px 10px;
}

.tl-FilterBar_ViewBtn-active {
  color: var(--Color_Text);
  background: var(--Color_Surface2);
}

@media (max-width: 768px) {
  .tl-Header {
    padding: 24px 0 20px;
  }

  .tl-Header_Title {
    font-size: 24px;
  }

  .tl-FilterBar_Search {
    min-width: 0;
    flex: 1 1 220px;
  }

  .tl-FilterBar_Right {
    margin-left: 0;
  }

  .tl-FilterBar_Separator {
    display: none;
  }
}

.tl-Page {
  padding-top: 22px;
  padding-bottom: 48px;
}

.tl-StatsGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.tl-StatCard {
  border: 1px solid var(--Color_Border);
  border-radius: 12px;
  background: var(--Color_Surface);
  padding: 14px 16px;
}

.tl-StatCard_Label {
  color: var(--Color_Text3);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.tl-StatCard_Value {
  margin-top: 3px;
  color: var(--Color_Text);
  font-size: 22px;
  line-height: 1.05;
  font-family: var(--Font_Family-mono);
  font-weight: 800;
}

.tl-StatCard_Value-green {
  color: var(--Color_Success);
}

.tl-StatCard_Value-accent {
  color: var(--Color_Accent);
}

.tl-StatCard_Sub {
  margin-top: 4px;
  color: var(--Color_Text2);
  font-size: 11px;
}

.tl-Group {
  margin-top: 26px;
}

.tl-Group_Label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  color: var(--Color_Text3);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.tl-Group_Label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--Color_Border);
}

.tl-Grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 12px;
}

.tl-Card {
  border: 1px solid var(--Color_Border);
  border-radius: 12px;
  background: var(--Color_Surface);
  overflow: hidden;
  transition: border-color 0.15s, transform 0.15s;
}

.tl-Card_Link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.tl-Card:hover {
  border-color: var(--Color_Border2);
  transform: translateY(-1px);
}

.tl-Card_Map {
  height: 112px;
  border-bottom: 1px solid var(--Color_Border);
  position: relative;
  overflow: hidden;
}

.tl-Card_Map-road {
  background: linear-gradient(135deg, color-mix(in oklch, var(--Color_Accent) 18%, var(--Color_Background)) 0%, var(--Color_Surface2) 100%);
}

.tl-Card_Map-oval {
  background: linear-gradient(135deg, color-mix(in oklch, var(--Color_Amber) 14%, var(--Color_Background)) 0%, var(--Color_Surface2) 100%);
}

.tl-Card_Map-dirt_road,
.tl-Card_Map-dirt_oval {
  background: linear-gradient(135deg, color-mix(in oklch, var(--Color_Purple) 16%, var(--Color_Background)) 0%, var(--Color_Surface2) 100%);
}

.tl-Card_Map::before {
  content: "";
  position: absolute;
  width: 180px;
  height: 180px;
  border-radius: 999px;
  top: -76px;
  right: -56px;
  background: color-mix(in oklch, var(--Color_Text) 8%, transparent);
}

.tl-Card_Pill {
  position: absolute;
  top: 8px;
  right: 8px;
  border-radius: 6px;
  border: 1px solid transparent;
  font-size: 10px;
  font-family: var(--Font_Family-mono);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 3px 8px;
}

.tl-Card_Pill-road {
  color: var(--Color_Accent);
  border-color: color-mix(in oklch, var(--Color_Accent) 40%, transparent);
  background: color-mix(in oklch, var(--Color_Accent) 14%, transparent);
}

.tl-Card_Pill-oval {
  color: var(--Color_Amber);
  border-color: color-mix(in oklch, var(--Color_Amber) 40%, transparent);
  background: color-mix(in oklch, var(--Color_Amber) 14%, transparent);
}

.tl-Card_Pill-dirt_road,
.tl-Card_Pill-dirt_oval {
  color: var(--Color_Purple);
  border-color: color-mix(in oklch, var(--Color_Purple) 40%, transparent);
  background: color-mix(in oklch, var(--Color_Purple) 14%, transparent);
}

.tl-Card_Body {
  padding: 12px 14px 14px;
}

.tl-Card_Title {
  margin: 0;
  color: var(--Color_Text);
  font-size: 14px;
  line-height: 1.25;
  font-weight: 700;
}

.tl-Card_Location {
  margin-top: 3px;
  color: var(--Color_Text3);
  font-size: 11px;
}

.tl-Card_MetaRow {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--Color_Border);
  border-radius: 8px;
  overflow: hidden;
}

.tl-Card_MetaCell {
  padding: 7px 8px;
  border-right: 1px solid var(--Color_Border);
  background: color-mix(in oklch, var(--Color_Surface2) 65%, transparent);
}

.tl-Card_MetaCell:last-child {
  border-right: none;
}

.tl-Card_MetaValue {
  color: var(--Color_Text);
  font-size: 13px;
  font-family: var(--Font_Family-mono);
  font-weight: 700;
}

.tl-Card_MetaLabel {
  margin-top: 1px;
  color: var(--Color_Text3);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

@media (max-width: 1024px) {
  .tl-StatsGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .tl-Page {
    padding-top: 16px;
  }

  .tl-StatsGrid {
    grid-template-columns: 1fr;
  }

  .tl-Grid {
    grid-template-columns: 1fr;
  }
}

.td-Hero {
  border-bottom: 1px solid var(--Color_Border);
  background: linear-gradient(160deg, color-mix(in oklch, var(--Color_Accent) 11%, var(--Color_Background)) 0%, var(--Color_Background) 55%, color-mix(in oklch, var(--Color_Surface) 65%, var(--Color_Background)) 100%);
  position: relative;
  overflow: hidden;
}

.td-Hero::before {
  content: "TRACK";
  position: absolute;
  top: -20px;
  right: -12px;
  font-size: 140px;
  line-height: 1;
  letter-spacing: -0.04em;
  font-family: var(--Font_Family-mono);
  font-weight: 800;
  color: color-mix(in oklch, var(--Color_Accent) 16%, transparent);
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.td-Hero_Container {
  position: relative;
  z-index: 1;
  padding-top: 28px;
  padding-bottom: 0;
}

.td-Hero_Breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  color: var(--Color_Text3);
  font-size: 12px;
}

.td-Hero_BreadcrumbItem {
  color: var(--Color_Text3);
}

.td-Hero_BreadcrumbSep {
  color: var(--Color_Border2);
}

.td-Hero_BreadcrumbCurrent {
  color: var(--Color_Text2);
}

.td-Hero_TopRow {
  margin-top: 14px;
}

.td-Hero_Main {
  max-width: 960px;
}

.td-Hero_Title {
  margin: 0;
  font-size: 30px;
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.td-Hero_Subtitle {
  margin-top: 7px;
  color: var(--Color_Text2);
  font-size: 14px;
}

.td-Hero_StatsStrip {
  margin-top: 22px;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  border-top: 1px solid var(--Color_Border);
}

.td-Hero_StatCell {
  border-right: 1px solid var(--Color_Border);
  padding: 14px 14px 16px;
}

.td-Hero_StatCell:last-child {
  border-right: none;
}

.td-Hero_StatLabel {
  color: var(--Color_Text3);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.td-Hero_StatValue {
  margin-top: 2px;
  color: var(--Color_Text);
  font-size: 17px;
  line-height: 1.1;
  font-family: var(--Font_Family-mono);
  font-weight: 800;
}

.td-Hero_StatValue-purple {
  color: var(--Color_Purple);
}

.td-Hero_StatSub {
  margin-top: 2px;
  color: var(--Color_Text2);
  font-size: 11px;
}

@media (max-width: 1200px) {
  .td-Hero_StatsStrip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .td-Hero_StatCell:nth-child(3n) {
    border-right: none;
  }

  .td-Hero_StatCell:nth-child(n + 4) {
    border-top: 1px solid var(--Color_Border);
  }
}

@media (max-width: 768px) {
  .td-Hero_Container {
    padding-top: 22px;
  }

  .td-Hero_Title {
    font-size: 24px;
  }

  .td-Hero_StatsStrip {
    grid-template-columns: 1fr 1fr;
  }

  .td-Hero_StatCell {
    border-top: 1px solid var(--Color_Border);
  }

  .td-Hero_StatCell:nth-child(2n) {
    border-right: none;
  }

  .td-Hero::before {
    font-size: 96px;
    right: -8px;
  }
}

.td-Page {
  padding-top: 24px;
  padding-bottom: 48px;
}

.td-Layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 16px;
  align-items: start;
}

.td-Main,
.td-Aside {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.td-StatsGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.td-StatsCell {
  border-right: 1px solid var(--Color_Border);
  border-bottom: 1px solid var(--Color_Border);
  padding: 16px;
}

.td-StatsCell:nth-child(3n) {
  border-right: none;
}

.td-StatsCell:nth-last-child(-n + 3) {
  border-bottom: none;
}

.td-StatsCell_Label {
  color: var(--Color_Text3);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.td-StatsCell_Value {
  margin-top: 2px;
  color: var(--Color_Text);
  font-size: 19px;
  font-family: var(--Font_Family-mono);
  font-weight: 800;
}

.td-StatsCell_Value-purple {
  color: var(--Color_Purple);
}

.td-StatsCell_Value-amber {
  color: var(--Color_Amber);
}

.td-StatsCell_Sub {
  margin-top: 3px;
  color: var(--Color_Text2);
  font-size: 11px;
}

.td-LeaderboardTable {
  width: 100%;
}

.td-LeaderboardRow-current {
  background: color-mix(in oklch, var(--Color_Accent) 12%, transparent);
}

.td-DriverCell {
  display: flex;
  align-items: center;
  gap: 8px;
}

.td-DriverFlag {
  font-size: 14px;
  line-height: 1;
}

.td-DriverLink {
  color: var(--Color_Text);
  text-decoration: none;
}

.td-DriverLink:hover {
  color: var(--Color_Accent);
}

.td-LeaderboardCar {
  color: var(--Color_Text2);
  font-size: 12px;
}

.td-LeaderboardDate {
  color: var(--Color_Text3);
  font-size: 12px;
}

.td-List {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.td-List_Row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--Color_Border);
  padding: 10px 0;
}

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

.td-List_Label {
  color: var(--Color_Text2);
  font-size: 12px;
}

.td-List_Sub {
  color: var(--Color_Text3);
  font-size: 10px;
  margin-top: 2px;
}

.td-List_Value {
  color: var(--Color_Text);
  font-family: var(--Font_Family-mono);
  font-size: 12px;
  font-weight: 700;
  text-align: right;
}

.td-List_Value-purple {
  color: var(--Color_Purple);
}

.td-Ranking {
  text-align: center;
}

.td-Ranking_Value {
  color: var(--Color_Accent);
  font-family: var(--Font_Family-mono);
  font-size: 30px;
  line-height: 1.1;
  font-weight: 800;
}

.td-Ranking_Sub {
  margin: 8px 0 0;
  color: var(--Color_Text2);
  font-size: 12px;
}

.td-ComingSoon {
  margin: 0;
  color: var(--Color_Text2);
  font-size: 13px;
}

@media (max-width: 1024px) {
  .td-Layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .td-StatsGrid {
    grid-template-columns: 1fr 1fr;
  }

  .td-StatsCell:nth-child(3n) {
    border-right: 1px solid var(--Color_Border);
  }

  .td-StatsCell:nth-child(2n) {
    border-right: none;
  }

  .td-StatsCell:nth-last-child(-n + 3) {
    border-bottom: 1px solid var(--Color_Border);
  }

  .td-StatsCell:nth-last-child(-n + 2) {
    border-bottom: none;
  }
}

.cc-Hero {
  position: relative;
  overflow: hidden;
  padding: 32px 0;
  border-bottom: 1px solid var(--Color_Border);
  background: linear-gradient(
    160deg,
    color-mix(in oklch, var(--Color_Red) 10%, var(--Color_Background)) 0%,
    color-mix(in oklch, var(--Color_Red) 18%, var(--Color_Background)) 35%,
    var(--Color_Background) 100%
  );
}

.cc-Hero::after {
  content: "GT";
  position: absolute;
  inset-block-start: -36px;
  inset-inline-end: -10px;
  font-size: 160px;
  line-height: 1;
  letter-spacing: -0.05em;
  font-weight: 900;
  color: color-mix(in oklch, var(--Color_Red) 16%, transparent);
  font-family: var(--Font_Family-mono);
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.cc-Hero_Container {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  gap: 28px;
}

.cc-Hero_ImageWrap {
  inline-size: 320px;
  block-size: 170px;
  border: 1px solid color-mix(in oklch, var(--Color_Red) 30%, var(--Color_Border));
  border-radius: 12px;
  background: linear-gradient(
    135deg,
    color-mix(in oklch, var(--Color_Red) 12%, var(--Color_Surface)) 0%,
    color-mix(in oklch, var(--Color_Red) 4%, var(--Color_Surface2)) 100%
  );
  overflow: hidden;
  flex-shrink: 0;
}

.cc-Hero_Image {
  inline-size: 100%;
  block-size: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

.cc-Hero_ImageFallback {
  inline-size: 100%;
  block-size: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 68px;
}

.cc-Hero_Main {
  flex: 1;
  min-inline-size: 0;
}

.cc-Hero_MakeRow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 14px;
}

.cc-Hero_Make {
  color: var(--Color_Red);
  font-weight: 700;
}

.cc-Hero_Dot {
  color: var(--Color_Border2);
}

.cc-Hero_Discipline {
  color: var(--Color_Text2);
}

.cc-Hero_Title {
  margin: 0;
  font-size: 30px;
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.cc-Hero_Tags {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cc-SpecGrid {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--Color_Border);
  border-radius: 12px;
  overflow: hidden;
}

.cc-SpecGrid_Cell {
  padding: 12px 16px;
  border-inline-end: 1px solid var(--Color_Border);
}

.cc-SpecGrid_Cell:last-child {
  border-inline-end: 0;
}

.cc-SpecGrid_Value {
  font-size: 22px;
  line-height: 1.1;
  font-weight: 800;
  font-family: var(--Font_Family-mono);
}

.cc-SpecGrid_Value-amber {
  color: var(--Color_Amber);
}

.cc-SpecGrid_Value-green {
  color: var(--Color_Green);
}

.cc-SpecGrid_Value-red {
  color: var(--Color_Red);
}

.cc-SpecGrid_Label {
  margin-top: 2px;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--Color_Text3);
}

@media (max-width: 1024px) {
  .cc-Hero_Container {
    flex-direction: column;
  }

  .cc-Hero_ImageWrap {
    inline-size: 100%;
    max-inline-size: 420px;
  }
}

@media (max-width: 768px) {
  .cc-Hero {
    padding: 24px 0;
  }

  .cc-Hero_Title {
    font-size: 24px;
  }

  .cc-SpecGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cc-SpecGrid_Cell {
    border-inline-end: 0;
    border-block-end: 1px solid var(--Color_Border);
  }

  .cc-SpecGrid_Cell:nth-child(2n-1) {
    border-inline-end: 1px solid var(--Color_Border);
  }

  .cc-SpecGrid_Cell:nth-last-child(-n + 2) {
    border-block-end: 0;
  }
}

.cc-Subnav {
  border-bottom: 1px solid var(--Color_Border);
  background: var(--Color_Background);
}

.cc-Subnav_Inner {
  display: flex;
}

.cc-Subnav_Link {
  padding: 12px 20px;
  font-size: 13px;
  font-weight: 500;
  color: var(--Color_Text3);
  border-bottom: 2px solid transparent;
}

.cc-Subnav_Link-active {
  color: var(--Color_Text);
  border-bottom-color: var(--Color_Accent);
  font-weight: 600;
}

.cc-Page {
  padding-top: 24px;
  padding-bottom: 48px;
}

.cc-Switcher {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.cc-Switcher_Label {
  font-size: 12px;
  color: var(--Color_Text3);
}

.cc-Switcher_Chip {
  border: 1px solid var(--Color_Border2);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 12px;
  color: var(--Color_Text2);
  text-decoration: none;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.cc-Switcher_Chip:hover {
  color: var(--Color_Text);
  border-color: var(--Color_Border);
  background: color-mix(in oklch, var(--Color_Surface2) 70%, transparent);
}

.cc-Switcher_Chip-active {
  border-color: color-mix(in oklch, var(--Color_Red) 45%, var(--Color_Border));
  color: var(--Color_Red);
  background: color-mix(in oklch, var(--Color_Red) 14%, transparent);
}

.cc-Layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 16px;
  align-items: start;
}

.cc-Main {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cc-Aside {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

@media (max-width: 1024px) {
  .cc-Layout {
    grid-template-columns: 1fr;
  }
}

.cc-CardHeader {
  gap: 10px;
}

.cc-CardHeader_Sub {
  font-size: 12px;
  color: var(--Color_Text3);
}

.cc-HighlightGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cc-HighlightGrid_Cell {
  padding: 14px 16px;
  border-inline-end: 1px solid var(--Color_Border);
  border-block-end: 1px solid var(--Color_Border);
}

.cc-HighlightGrid_Cell:nth-child(2n) {
  border-inline-end: 0;
}

.cc-HighlightGrid_Cell:nth-last-child(-n + 2) {
  border-block-end: 0;
}

.cc-HighlightGrid_Value {
  font-size: 24px;
  line-height: 1.1;
  font-weight: 900;
  font-family: var(--Font_Family-mono);
}

.cc-HighlightGrid_Value-amber {
  color: var(--Color_Amber);
}

.cc-HighlightGrid_Value-purple {
  color: var(--Color_Purple);
}

.cc-HighlightGrid_Label {
  margin-top: 3px;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--Color_Text3);
}

.cc-HighlightGrid_Sub {
  margin-top: 1px;
  font-size: 11px;
  color: var(--Color_Text2);
}

.cc-TrackRow {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--Color_Border);
}

.cc-TrackRow:last-child {
  border-bottom: 0;
}

.cc-TrackRow_Main {
  flex: 1;
  min-inline-size: 0;
}

.cc-TrackRow_Name {
  font-size: 13px;
  font-weight: 600;
}

.cc-TrackRow_Config {
  font-size: 11px;
  color: var(--Color_Text2);
}

.cc-TrackRow_Record {
  text-align: right;
}

.cc-TrackRow_Time {
  font-family: var(--Font_Family-mono);
  font-size: 13px;
  font-weight: 700;
}

.cc-TrackRow_Time-class {
  color: var(--Color_Purple);
}

.cc-TrackRow_Driver {
  margin-top: 1px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--Color_Text3);
}

.cc-TrackRow_Flag {
  line-height: 1;
}

.cc-TrackRow_DriverLink {
  color: var(--Color_Text2);
  text-decoration: none;
}

.cc-TrackRow_DriverLink:hover {
  color: var(--Color_Text);
}

.cc-TrackRow_Date {
  color: var(--Color_Text3);
}

.cc-TrackRow_You {
  inline-size: 130px;
  text-align: right;
}

.cc-TrackRow_YouLap {
  font-size: 12px;
  color: var(--Color_Text2);
  font-family: var(--Font_Family-mono);
}

.cc-TrackRow_YouBest {
  font-size: 12px;
  color: var(--Color_Amber);
  font-family: var(--Font_Family-mono);
}

.cc-TrackRow_Delta {
  margin-top: 1px;
  font-size: 11px;
  color: var(--Color_Text3);
  font-family: var(--Font_Family-mono);
}

.cc-TrackMore {
  padding: 9px 16px;
  font-size: 12px;
  color: var(--Color_Text3);
  border-top: 1px solid var(--Color_Border);
}

.cc-UsageRow {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid var(--Color_Border);
}

.cc-UsageRow:last-child {
  border-bottom: 0;
}

.cc-UsageRow_Name {
  inline-size: 200px;
  font-size: 12px;
  color: var(--Color_Text2);
}

.cc-UsageRow_BarWrap {
  flex: 1;
}

.cc-UsageRow_Bar {
  display: block;
  inline-size: 100%;
  block-size: 7px;
  overflow: hidden;
  border: 0;
  border-radius: 999px;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: var(--Color_Border);
}

.cc-UsageRow_Bar::-webkit-progress-bar {
  background: var(--Color_Border);
}

.cc-UsageRow_Bar::-webkit-progress-value {
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    color-mix(in oklch, var(--Color_Red) 90%, var(--Color_Amber)) 0%,
    color-mix(in oklch, var(--Color_Amber) 80%, var(--Color_Red)) 100%
  );
}

.cc-UsageRow_Bar::-moz-progress-bar {
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    color-mix(in oklch, var(--Color_Red) 90%, var(--Color_Amber)) 0%,
    color-mix(in oklch, var(--Color_Amber) 80%, var(--Color_Red)) 100%
  );
}

.cc-UsageRow_Pct {
  inline-size: 38px;
  text-align: right;
  font-size: 11px;
  color: var(--Color_Text3);
  font-family: var(--Font_Family-mono);
}

.cc-SeriesRow {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--Color_Border);
}

.cc-SeriesRow:last-child {
  border-bottom: 0;
}

.cc-SeriesRow_Dot {
  inline-size: 8px;
  block-size: 8px;
  border-radius: 999px;
  flex-shrink: 0;
}

.cc-SeriesRow_Dot-blue {
  background: var(--Color_Accent);
}

.cc-SeriesRow_Dot-green {
  background: var(--Color_Green);
}

.cc-SeriesRow_Dot-amber {
  background: var(--Color_Amber);
}

.cc-SeriesRow_Dot-purple {
  background: var(--Color_Purple);
}

.cc-SeriesRow_Dot-cyan {
  background: var(--Color_Cyan);
}

.cc-SeriesRow_Info {
  flex: 1;
  min-inline-size: 0;
}

.cc-SeriesRow_Name {
  font-size: 13px;
  font-weight: 600;
}

.cc-SeriesRow_Meta {
  font-size: 11px;
  color: var(--Color_Text2);
}

.cc-SeriesRow_Drivers {
  font-size: 12px;
  color: var(--Color_Text3);
  font-family: var(--Font_Family-mono);
}

.cc-TopDrivers {
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cc-TopDriverRow {
  display: flex;
  align-items: center;
  gap: 10px;
}

.cc-TopDriverRow_Pos {
  inline-size: 24px;
  block-size: 24px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  font-family: var(--Font_Family-mono);
  border: 1px solid var(--Color_Border2);
  color: var(--Color_Text2);
  background: var(--Color_Surface2);
}

.cc-TopDriverRow_Pos-1 {
  color: var(--Color_Amber);
  border-color: color-mix(in oklch, var(--Color_Amber) 50%, var(--Color_Border2));
}

.cc-TopDriverRow_Pos-2 {
  color: var(--Color_Text);
}

.cc-TopDriverRow_Pos-3 {
  color: color-mix(in oklch, var(--Color_Amber) 55%, var(--Color_Text2));
}

.cc-TopDriverRow_Info {
  flex: 1;
  min-inline-size: 0;
}

.cc-TopDriverRow_Name {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 600;
}

.cc-TopDriverRow_Link {
  color: var(--Color_Text);
  text-decoration: none;
}

.cc-TopDriverRow_Link:hover {
  color: var(--Color_Accent);
}

.cc-TopDriverRow_Meta {
  font-size: 11px;
  color: var(--Color_Text3);
}

.cc-Compare {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cc-Compare_RowTop {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

.cc-Compare_Name {
  font-size: 12px;
  color: var(--Color_Text2);
}

.cc-Compare_Name-current {
  color: var(--Color_Red);
  font-weight: 600;
}

.cc-Compare_Val {
  font-size: 12px;
  color: var(--Color_Text);
  font-family: var(--Font_Family-mono);
}

.cc-Compare_BarWrap {
  inline-size: 100%;
}

.cc-Compare_Bar {
  display: block;
  inline-size: 100%;
  block-size: 7px;
  overflow: hidden;
  border: 0;
  border-radius: 999px;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: var(--Color_Border);
}

.cc-Compare_Bar::-webkit-progress-bar {
  background: var(--Color_Border);
}

.cc-Compare_Bar::-webkit-progress-value {
  border-radius: 999px;
  background: color-mix(in oklch, var(--Color_Accent) 80%, var(--Color_Cyan));
}

.cc-Compare_Bar::-moz-progress-bar {
  border-radius: 999px;
  background: color-mix(in oklch, var(--Color_Accent) 80%, var(--Color_Cyan));
}

.cc-Compare_Bar-current::-webkit-progress-value {
  background: var(--Color_Red);
}

.cc-Compare_Bar-current::-moz-progress-bar {
  background: var(--Color_Red);
}

@media (max-width: 768px) {
  .cc-CardHeader {
    align-items: flex-start;
    flex-direction: column;
  }

  .cc-HighlightGrid {
    grid-template-columns: 1fr;
  }

  .cc-HighlightGrid_Cell {
    border-inline-end: 0;
  }

  .cc-HighlightGrid_Cell:nth-last-child(2) {
    border-block-end: 1px solid var(--Color_Border);
  }

  .cc-TrackRow {
    align-items: flex-start;
    flex-direction: column;
  }

  .cc-TrackRow_Record {
    text-align: left;
  }

  .cc-TrackRow_Driver {
    justify-content: flex-start;
  }

  .cc-TrackRow_You {
    inline-size: auto;
    text-align: left;
  }

  .cc-UsageRow {
    flex-wrap: wrap;
    gap: 6px;
  }

  .cc-UsageRow_Name {
    inline-size: 100%;
  }

  .cc-UsageRow_BarWrap {
    flex: 1;
  }
}

.lb-Page {
  padding-bottom: 28px;
}

.lb-Hero {
  background: linear-gradient(160deg, color-mix(in oklch, var(--Color_Accent) 12%, var(--Color_Background)) 0%, var(--Color_Background) 72%);
  border-bottom: 1px solid var(--Color_Border);
  padding: 32px 0;
}

.lb-Hero_Title {
  font-size: 26px;
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.06;
}

.lb-Hero_Sub {
  margin-top: 4px;
  font-size: 14px;
  color: var(--Color_Text2);
}

.lb-FilterBar {
  display: block;
  padding: 10px 0;
}

.lb-FilterBar_Inner {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.lb-Filter_Label {
  font-size: 12px;
  color: var(--Color_Text3);
}

.lb-Filter_Sep {
  inline-size: 1px;
  block-size: 20px;
  background: var(--Color_Border2);
}

.lb-Content {
  padding-top: 20px;
}

.lb-BoardsGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.lb-Card_Subtitle {
  font-size: 12px;
  color: var(--Color_Text3);
}

.lb-Top3 {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 8px;
  min-block-size: 130px;
  padding: 20px 16px 0;
}

.lb-Top3_Slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.lb-Top3_Name {
  max-inline-size: 90px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
}

.lb-Top3_Value {
  font-size: 11px;
  color: var(--Color_Text2);
  font-family: var(--Font_Family-mono);
}

.lb-Top3_Block {
  inline-size: 80px;
  border-radius: 6px 6px 0 0;
  border: 1px solid transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 900;
  font-family: var(--Font_Family-mono);
}

.lb-Top3_Block-1 {
  block-size: 80px;
  color: var(--Color_Amber);
  border-color: color-mix(in oklch, var(--Color_Amber) 32%, transparent);
  background: linear-gradient(180deg, color-mix(in oklch, var(--Color_Amber) 24%, transparent), color-mix(in oklch, var(--Color_Amber) 8%, transparent));
}

.lb-Top3_Block-2 {
  block-size: 58px;
  color: color-mix(in oklch, var(--Color_Text2) 86%, white);
  border-color: color-mix(in oklch, var(--Color_Text2) 30%, transparent);
  background: linear-gradient(180deg, color-mix(in oklch, var(--Color_Text2) 24%, transparent), color-mix(in oklch, var(--Color_Text2) 8%, transparent));
}

.lb-Top3_Block-3 {
  block-size: 42px;
  color: color-mix(in oklch, var(--Color_Amber) 68%, var(--Color_Red));
  border-color: color-mix(in oklch, var(--Color_Amber) 30%, transparent);
  background: linear-gradient(180deg, color-mix(in oklch, var(--Color_Amber) 16%, color-mix(in oklch, var(--Color_Red) 14%, transparent)), color-mix(in oklch, var(--Color_Amber) 8%, transparent));
}

.lb-RankList {
  padding: 8px 0;
}

.lb-RankRow {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  border-bottom: 1px solid var(--Color_Border);
}

.lb-RankRow-you {
  background: color-mix(in oklch, var(--Color_Accent) 9%, transparent);
  border-left: 3px solid var(--Color_Accent);
}

.lb-RankNum {
  inline-size: 28px;
  flex-shrink: 0;
  font-family: var(--Font_Family-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--Color_Text3);
}

.lb-RankNum-gold {
  color: var(--Color_Amber);
}

.lb-RankNum-silver {
  color: color-mix(in oklch, var(--Color_Text2) 86%, white);
}

.lb-RankNum-bronze {
  color: color-mix(in oklch, var(--Color_Amber) 68%, var(--Color_Red));
}

.lb-RankNum-you {
  color: var(--Color_Accent);
}

.lb-RankDriver {
  flex: 1;
  min-inline-size: 0;
}

.lb-RankName {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
}

.lb-RankLink {
  color: inherit;
  text-decoration: none;
}

.lb-RankLink:hover {
  text-decoration: underline;
}

.lb-RankFlag {
  font-size: 13px;
}

.lb-RankSub {
  margin-top: 1px;
  font-size: 11px;
  color: var(--Color_Text2);
}

.lb-RankValue {
  font-family: var(--Font_Family-mono);
  font-size: 14px;
  font-weight: 800;
}

.lb-RankValue-positive {
  color: var(--Color_Success);
}

.lb-RankChange {
  inline-size: 52px;
  text-align: right;
  font-size: 11px;
  color: var(--Color_Text3);
}

.lb-RankSpark {
  inline-size: 52px;
  text-align: right;
}

.lb-MiniSpark {
  inline-size: 50px;
  block-size: 20px;
}

.lb-MiniSpark_Line {
  fill: none;
  stroke: var(--Color_Success);
  stroke-width: 1.5;
}

.lb-MiniSpark_Line-you {
  stroke: var(--Color_Accent);
}

.lb-YouDivider {
  border-top: 1px dashed var(--Color_Border);
}

.lb-YouPill {
  display: inline-flex;
  align-items: center;
  background: color-mix(in oklch, var(--Color_Accent) 15%, transparent);
  border: 1px solid color-mix(in oklch, var(--Color_Accent) 34%, transparent);
  border-radius: 5px;
  padding: 1px 6px;
  font-size: 10px;
  font-weight: 700;
  color: var(--Color_Accent);
}

@media (width < 1024px) {
  .lb-BoardsGrid {
    grid-template-columns: 1fr;
  }
}

.lb-BoardWide {
  grid-column: 1 / -1;
}

.lb-LapsTabs {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.lb-LapsTab {
  border: 1px solid var(--Color_Border2);
  background: var(--Color_Background);
  color: var(--Color_Text2);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  font-family: var(--Font_Family-sans);
}

.lb-LapsTab-active {
  border-color: var(--Color_Accent);
  color: var(--Color_Text);
  background: color-mix(in oklch, var(--Color_Accent) 10%, transparent);
}

.lb-LapsTable {
  table-layout: fixed;
}

.lb-LapsHead-rank {
  inline-size: 40px;
}

.lb-LapsHead-context {
  inline-size: 90px;
}

.lb-LapsRow-you {
  background: color-mix(in oklch, var(--Color_Accent) 9%, transparent);
}

.lb-LapsDriver {
  display: flex;
  align-items: center;
  gap: 6px;
}

.lb-LapsTrack {
  font-weight: 700;
}

.lb-LapsTrackConfig {
  margin-left: 4px;
  font-size: 11px;
  color: var(--Color_Text3);
}

.lb-LapsCar {
  display: inline-flex;
  align-items: center;
  background: color-mix(in oklch, var(--Color_Text3) 20%, transparent);
  border: 1px solid var(--Color_Border2);
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 11px;
  color: var(--Color_Text2);
}

.lb-LapsLap {
  color: var(--Color_Purple);
  font-weight: 800;
}

.lb-LapsDate {
  color: var(--Color_Text3);
}

.lb-LapsContext {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 48px;
  border-radius: 999px;
  border: 1px solid var(--Color_Border2);
  background: color-mix(in oklch, var(--Color_Amber) 10%, transparent);
  color: color-mix(in oklch, var(--Color_Amber) 72%, white);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 8px;
}

@media (width < 768px) {
  .lb-LapsTable {
    min-inline-size: 860px;
  }
}