/* ═══════════════════════════════════════════════════════════════════════════
   KARTING DRIVER PROFILE MODULE — MODERN DESIGN SYSTEM
   ═══════════════════════════════════════════════════════════════════════════

   Premium, mobile-first driver profile styled to match BookNow design language.
   Light theme by default, fully themeable via CSS custom properties.

   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 1: DESIGN TOKENS
   ═══════════════════════════════════════════════════════════════════════════ */

.scm-mod-KartingDriverProfile {
    /* Primary brand color (configurable via theme). Text on an accent fill takes the theme's contrast ink: the
       operator picks the accent, and white on a pale one (Neon Green, #00ff88) is unreadable. */
    --dp-accent: var(--scm-accent, #2563eb);
    --dp-accent-hover: var(--scm-accent-hover, #1e40af);
    --dp-on-accent: var(--scm-accent-contrast, #ffffff);
    --dp-accent-soft: #eff6ff;
    --dp-accent-ink: var(--dp-accent);
    --dp-accent-glow: rgba(37, 99, 235, 0.25);

    /* Surface colors. Cards sit on the elevated tier, which the theme bridge derives from the module's ground and
       text (a custom theme's Surface color overrides it), so a dark module theme gets dark cards under its light text. */
    --dp-bg: var(--scm-surface, #ffffff);
    --dp-bg-elevated: var(--scm-surface-elevated, #f8fafc);
    --dp-surface: var(--scm-surface, #f8fafc);

    /* Text colors */
    --dp-text: var(--scm-surface-contrast, #0f172a);
    --dp-text-secondary: var(--scm-text-secondary, #475569);
    --dp-text-tertiary: var(--scm-text-tertiary, #94a3b8);

    /* Border colors */
    --dp-border: var(--scm-border, #e2e8f0);

    /* Semantic colors. The -soft tints and -ink text colors here are the light-site values for a browser without
       color-mix(); the @supports block after this rule derives them from the module's own ground and text. */
    --dp-gold: #d97706;
    --dp-gold-soft: #fffbeb;
    --dp-gold-ink: var(--dp-gold);
    --dp-green: #059669;
    --dp-green-soft: #ecfdf5;
    --dp-green-ink: var(--dp-green);
    --dp-purple: #7c3aed;
    --dp-purple-soft: #f5f3ff;
    --dp-purple-ink: var(--dp-purple);

    /* Typography */
    --dp-font-family: inherit;
    --dp-text-xs: 0.75rem;
    --dp-text-sm: 0.875rem;
    --dp-text-base: 1rem;
    --dp-text-lg: 1.125rem;
    --dp-text-xl: 1.25rem;
    --dp-text-2xl: 1.5rem;
    --dp-text-3xl: 1.875rem;

    /* Spacing */
    --dp-space-1: 0.25rem;
    --dp-space-2: 0.5rem;
    --dp-space-3: 0.75rem;
    --dp-space-4: 1rem;
    --dp-space-5: 1.25rem;
    --dp-space-6: 1.5rem;
    --dp-space-8: 2rem;

    /* Radius */
    --dp-radius-sm: 0.375rem;
    --dp-radius-md: 0.5rem;
    --dp-radius-lg: 0.75rem;
    --dp-radius-xl: 1rem;
    --dp-radius-full: 9999px;

    /* Shadows */
    --dp-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
    --dp-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
    --dp-shadow-card:
        0 0 0 1px rgba(226, 232, 240, 0.5),
        0 1px 3px rgba(0, 0, 0, 0.04),
        0 4px 12px rgba(0, 0, 0, 0.03);

    /* Transitions */
    --dp-transition: 200ms cubic-bezier(0.16, 1, 0.3, 1);

    /* Base styles */
    background: var(--dp-bg);
    color: var(--dp-text);
    border-radius: var(--dp-radius-xl);
    padding: var(--dp-space-6);
    font-family: var(--dp-font-family);
    font-size: var(--dp-text-base);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    width: 100%;
    max-width: 680px;
    margin: 0 auto;
}

/* The tints and the hue-colored text on them follow the module's ground and text rather than being light literals,
   so an operator's dark display theme gets dark tints under light text instead of light text on pale cards.
   - A tint is 12% of the hue mixed into the ground, in oklab. oklch interpolates hue around the wheel, and on a
     chromatic dark ground (Racing Red's #1a1a2e) it turned the gold and red tints violet (#2d233f, #291f41); oklab
     keeps them warm (#2e2631, #31202f) and matches oklch exactly on a white or neutral ground.
   - A hue used as TEXT (rarity labels, the gold chips, lap times, the avatar initial) is 45% hue mixed toward the
     module's text color: darker on a light ground, lighter on a dark one. The raw hue fails 4.5:1 on its own tint in
     both directions (gold on a light tint 2.8:1, purple on a dark one 2.7:1). 45% is the Claim module's reward ratio
     and is sized for a lighter text gray than the dev site's: gold on its tint measured 5.3:1 under gray-700 text,
     4.5:1 under gray-600, and 6.9:1 or better on the dark presets. Icons and fills keep the raw hue.
   Guarded because an unsupported color-mix() would make each token invalid, which unsets every rule that reads it
   instead of falling back; without it the literals above stand. */
@supports (color: color-mix(in oklab, red 50%, blue 50%)) {
    .scm-mod-KartingDriverProfile {
        --dp-accent-soft: color-mix(in oklab, var(--dp-accent) 12%, var(--dp-bg));
        --dp-accent-ink: color-mix(in oklab, var(--dp-accent) 45%, var(--dp-text));
        --dp-accent-glow: color-mix(in oklab, var(--dp-accent) 25%, transparent);
        --dp-gold-soft: color-mix(in oklab, var(--dp-gold) 12%, var(--dp-bg));
        --dp-gold-ink: color-mix(in oklab, var(--dp-gold) 45%, var(--dp-text));
        --dp-green-soft: color-mix(in oklab, var(--dp-green) 12%, var(--dp-bg));
        --dp-green-ink: color-mix(in oklab, var(--dp-green) 45%, var(--dp-text));
        --dp-purple-soft: color-mix(in oklab, var(--dp-purple) 12%, var(--dp-bg));
        --dp-purple-ink: color-mix(in oklab, var(--dp-purple) 45%, var(--dp-text));
    }
}

/* The site theme styles EVERY <section> as a page band: its own background and text color, 60px of padding and
   overflow: clip. The level block, the spotlight and the badge, lap and result lists are <section>s, so each list sat
   in a white band with 60px of padding above and below. Reset them here. :where() keeps this at one class of
   specificity: it beats the theme's bare element rule and loses to every .scm-mod-KartingDriverProfile .x rule that
   styles a card. */
.scm-mod-KartingDriverProfile :where(section) {
    color: inherit;
    background-color: transparent;
    padding: 0;
    overflow: visible;
    scroll-margin-top: 0;
}

/* The theme's Section Spacing presets and its sidebar pane pad every section again with one class and one element
   (.spacing-relaxed section), which outranks the reset above. This matches them at two classes, so it stays above
   every rule that pads a card: those tie with it and win by coming later. */
:is(.spacing-compact, .spacing-relaxed, .spacing-spacious, .pane-sidebar) .scm-mod-KartingDriverProfile :where(section) {
    padding-top: 0;
    padding-bottom: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 2: HEADER
   ═══════════════════════════════════════════════════════════════════════════ */

.scm-mod-KartingDriverProfile .dp-header {
    display: flex;
    align-items: flex-start;
    gap: var(--dp-space-5);
    margin-bottom: var(--dp-space-6);
    padding-bottom: var(--dp-space-5);
    border-bottom: 1px solid var(--dp-border);
    flex-wrap: wrap;
}

.scm-mod-KartingDriverProfile .dp-avatar {
    width: 64px;
    height: 64px;
    border-radius: var(--dp-radius-full);
    background: var(--dp-accent-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.scm-mod-KartingDriverProfile .dp-avatar i {
    font-size: 2rem;
    color: var(--dp-accent);
}

.scm-mod-KartingDriverProfile .dp-header-info {
    flex: 1;
    min-width: 0;
}

.scm-mod-KartingDriverProfile .dp-name {
    margin: 0 0 var(--dp-space-1) 0;
    font-size: var(--dp-text-2xl);
    font-weight: 700;
    color: var(--dp-text);
    letter-spacing: -0.025em;
}

.scm-mod-KartingDriverProfile .dp-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--dp-space-4);
    color: var(--dp-text-secondary);
    font-size: var(--dp-text-sm);
}

.scm-mod-KartingDriverProfile .dp-meta span {
    display: flex;
    align-items: center;
    gap: var(--dp-space-1);
}

.scm-mod-KartingDriverProfile .dp-meta i {
    color: var(--dp-text-tertiary);
}

/* Share Actions */
.scm-mod-KartingDriverProfile .dp-share-actions {
    display: flex;
    gap: var(--dp-space-2);
    flex-wrap: wrap;
}

.scm-mod-KartingDriverProfile .dp-share-actions .btn {
    font-size: var(--dp-text-sm);
    border-radius: var(--dp-radius-full);
    border-color: var(--dp-border);
    color: var(--dp-text-secondary);
    background: var(--dp-bg);
    transition: border-color var(--dp-transition), color var(--dp-transition), background var(--dp-transition);
}

.scm-mod-KartingDriverProfile .dp-share-actions .btn:hover {
    border-color: var(--dp-accent);
    color: var(--dp-accent-ink);
    background: var(--dp-accent-soft);
}

.scm-mod-KartingDriverProfile .dp-qr-overlay {
    background: var(--dp-bg-elevated);
    border: 1px solid var(--dp-border);
    border-radius: var(--dp-radius-lg);
    padding: var(--dp-space-4);
}

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 3: GAMIFICATION
   ═══════════════════════════════════════════════════════════════════════════ */

.scm-mod-KartingDriverProfile .dp-gamification {
    font-size: var(--dp-text-sm);
}

.scm-mod-KartingDriverProfile .dp-grade-badge {
    display: inline-block;
    padding: 0.15rem 0.6rem;
    border-radius: var(--dp-radius-full);
    font-weight: 700;
    font-size: var(--dp-text-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.scm-mod-KartingDriverProfile .dp-grade-rookie { background: #f1f5f9; color: #64748b; }
.scm-mod-KartingDriverProfile .dp-grade-amateur { background: #fef3c7; color: #92400e; }
.scm-mod-KartingDriverProfile .dp-grade-semipro { background: #f1f5f9; color: #475569; }
.scm-mod-KartingDriverProfile .dp-grade-pro { background: var(--dp-gold-soft); color: var(--dp-gold-ink); }
.scm-mod-KartingDriverProfile .dp-grade-elite { background: #fef2f2; color: #dc2626; }

.scm-mod-KartingDriverProfile .dp-score,
.scm-mod-KartingDriverProfile .dp-level,
.scm-mod-KartingDriverProfile .dp-badges {
    color: var(--dp-text-secondary);
    font-weight: 600;
}

.scm-mod-KartingDriverProfile .dp-xp-bar {
    max-width: 300px;
}

.scm-mod-KartingDriverProfile .dp-xp-bar .progress {
    background: var(--dp-border);
}

.scm-mod-KartingDriverProfile .dp-xp-text {
    font-size: var(--dp-text-xs);
    color: var(--dp-text-tertiary);
    text-align: right;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 4: STATS GRID
   ═══════════════════════════════════════════════════════════════════════════ */

.scm-mod-KartingDriverProfile .dp-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: var(--dp-space-3);
    margin-bottom: var(--dp-space-6);
}

.scm-mod-KartingDriverProfile .dp-stat-card {
    background: var(--dp-bg-elevated);
    border: 1px solid var(--dp-border);
    border-radius: var(--dp-radius-lg);
    padding: var(--dp-space-4);
    text-align: center;
    transition: box-shadow var(--dp-transition), border-color var(--dp-transition);
}

.scm-mod-KartingDriverProfile .dp-stat-card:hover {
    box-shadow: var(--dp-shadow-md);
    border-color: var(--dp-accent);
}

.scm-mod-KartingDriverProfile .dp-stat-highlight {
    border-color: var(--dp-accent);
    background: var(--dp-accent-soft);
}

.scm-mod-KartingDriverProfile .dp-stat-label {
    font-size: var(--dp-text-xs);
    color: var(--dp-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    margin-bottom: var(--dp-space-1);
}

.scm-mod-KartingDriverProfile .dp-stat-value {
    font-size: var(--dp-text-xl);
    font-weight: 700;
    color: var(--dp-text);
    font-variant-numeric: tabular-nums;
}

.scm-mod-KartingDriverProfile .dp-stat-detail {
    font-size: 0.7rem;
    color: var(--dp-text-tertiary);
    margin-top: var(--dp-space-1);
}

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 5: TROPHIES
   ═══════════════════════════════════════════════════════════════════════════ */

.scm-mod-KartingDriverProfile .dp-trophies {
    display: flex;
    gap: var(--dp-space-3);
    margin-bottom: var(--dp-space-6);
    flex-wrap: wrap;
}

.scm-mod-KartingDriverProfile .dp-trophy {
    display: flex;
    align-items: center;
    gap: var(--dp-space-2);
    padding: var(--dp-space-2) var(--dp-space-4);
    border-radius: var(--dp-radius-full);
    font-size: var(--dp-text-sm);
    font-weight: 600;
}

.scm-mod-KartingDriverProfile .dp-trophy-gold {
    background: var(--dp-gold-soft);
    color: var(--dp-gold-ink);
}

.scm-mod-KartingDriverProfile .dp-trophy-green {
    background: var(--dp-green-soft);
    color: var(--dp-green-ink);
}

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 6: SECTIONS & TABLES
   ═══════════════════════════════════════════════════════════════════════════ */

.scm-mod-KartingDriverProfile .dp-section {
    margin-bottom: var(--dp-space-6);
}

.scm-mod-KartingDriverProfile .dp-section-title {
    font-size: var(--dp-text-base);
    font-weight: 600;
    margin-bottom: var(--dp-space-3);
    display: flex;
    align-items: center;
    gap: var(--dp-space-2);
    color: var(--dp-text);
}

.scm-mod-KartingDriverProfile .dp-section-title i {
    color: var(--dp-accent);
}

.scm-mod-KartingDriverProfile .dp-table-wrapper {
    overflow-x: auto;
    border: 1px solid var(--dp-border);
    border-radius: var(--dp-radius-lg);
}

.scm-mod-KartingDriverProfile .dp-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--dp-text-sm);
}

.scm-mod-KartingDriverProfile .dp-table th {
    text-align: left;
    padding: var(--dp-space-3) var(--dp-space-4);
    color: var(--dp-text-secondary);
    font-size: var(--dp-text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: var(--dp-bg-elevated);
    border-bottom: 1px solid var(--dp-border);
}

.scm-mod-KartingDriverProfile .dp-table td {
    padding: var(--dp-space-3) var(--dp-space-4);
    border-bottom: 1px solid var(--dp-border);
    color: var(--dp-text);
}

.scm-mod-KartingDriverProfile .dp-table tbody tr:last-child td {
    border-bottom: none;
}

.scm-mod-KartingDriverProfile .dp-table tbody tr:hover {
    background: var(--dp-bg-elevated);
}

.scm-mod-KartingDriverProfile .dp-time {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--dp-accent-ink);
}

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 7: EMPTY STATE
   ═══════════════════════════════════════════════════════════════════════════ */

.scm-mod-KartingDriverProfile .dp-empty-state {
    text-align: center;
    padding: var(--dp-space-8) var(--dp-space-4);
    color: var(--dp-text-secondary);
}

.scm-mod-KartingDriverProfile .dp-empty-state i {
    font-size: 3rem;
    margin-bottom: var(--dp-space-3);
    display: block;
    color: var(--dp-text-tertiary);
}

.scm-mod-KartingDriverProfile .dp-empty-state h3 {
    font-size: var(--dp-text-lg);
    font-weight: 600;
    margin-bottom: var(--dp-space-2);
    color: var(--dp-text);
}

.scm-mod-KartingDriverProfile .dp-empty-state p {
    font-size: var(--dp-text-sm);
    color: var(--dp-text-secondary);
}

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 8: SIZE VARIANTS
   ═══════════════════════════════════════════════════════════════════════════ */

.scm-mod-KartingDriverProfile.scm-mod-compact {
    padding: var(--dp-space-3);
    font-size: var(--dp-text-sm);
}

.scm-mod-KartingDriverProfile.scm-mod-compact .dp-name {
    font-size: var(--dp-text-lg);
}

.scm-mod-KartingDriverProfile.scm-mod-large {
    padding: var(--dp-space-8);
}

.scm-mod-KartingDriverProfile.scm-mod-fullheight {
    min-height: calc(100vh - 200px);
}

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 9: RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 576px) {
    .scm-mod-KartingDriverProfile {
        padding: var(--dp-space-4);
        border-radius: var(--dp-radius-lg);
    }

    .scm-mod-KartingDriverProfile .dp-header {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .scm-mod-KartingDriverProfile .dp-meta {
        justify-content: center;
    }

    .scm-mod-KartingDriverProfile .dp-share-actions {
        justify-content: center;
    }

    .scm-mod-KartingDriverProfile .dp-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .scm-mod-KartingDriverProfile .dp-trophies {
        justify-content: center;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 10: REDUCED MOTION
   ═══════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
    .scm-mod-KartingDriverProfile,
    .scm-mod-KartingDriverProfile * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ── P4 Gamification: streaks + weekly quests engagement panel (2026-07) ── */

.dp-engagement {
    padding: 0.9rem 1.1rem;
    border-radius: 0.75rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.dp-streaks {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.dp-streak-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.55);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.dp-streak-chip.active {
    color: #ffb454;
    background: rgba(255, 140, 40, 0.12);
    border-color: rgba(255, 140, 40, 0.35);
}

.dp-streak-count {
    font-weight: 800;
    font-size: 0.95rem;
}

.dp-section-label {
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.6;
    margin-bottom: 0.4rem;
}

.dp-quest {
    padding: 0.5rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.dp-quest:first-of-type {
    border-top: none;
}

.dp-quest-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.dp-quest-name {
    font-weight: 600;
    font-size: 0.95rem;
}

.dp-quest-progress {
    font-size: 0.8rem;
    font-weight: 700;
    opacity: 0.7;
    white-space: nowrap;
}

.dp-quest-steps {
    display: flex;
    gap: 0.4rem;
    margin-top: 0.35rem;
}

.dp-quest-step {
    font-size: 1rem;
    opacity: 0.45;
}

.dp-quest-step.done {
    color: #3ecf6e;
    opacity: 1;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 9: THE SHARED PROFILE (all disciplines)
   ═══════════════════════════════════════════════════════════════════════════

   Everything below belongs to the page a share link opens: the level block, the
   badge showcase, best laps, recent races and the call to action at the end.
   Tokens only, so nothing here hard-codes a color the operator's theme could
   not override.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Loading ─────────────────────────────────────────────────────────────── */

.scm-mod-KartingDriverProfile .dp-skeleton-header {
    display: flex;
    gap: var(--dp-space-5);
    align-items: center;
    margin-bottom: var(--dp-space-6);
}

.scm-mod-KartingDriverProfile .dp-skeleton-avatar {
    width: 64px;
    height: 64px;
    border-radius: var(--dp-radius-full);
    flex-shrink: 0;
}

.scm-mod-KartingDriverProfile .dp-skeleton-lines {
    flex: 1;
    min-width: 0;
}

.scm-mod-KartingDriverProfile .dp-skeleton-line {
    height: 0.9rem;
    border-radius: var(--dp-radius-sm);
    margin-bottom: var(--dp-space-2);
}

.scm-mod-KartingDriverProfile .dp-skeleton-line-lg { width: 60%; height: 1.4rem; }
.scm-mod-KartingDriverProfile .dp-skeleton-line-sm { width: 35%; }

.scm-mod-KartingDriverProfile .dp-skeleton-bar {
    height: 3.5rem;
    border-radius: var(--dp-radius-lg);
    margin-bottom: var(--dp-space-6);
}

.scm-mod-KartingDriverProfile .dp-skeleton-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: var(--dp-space-3);
}

.scm-mod-KartingDriverProfile .dp-skeleton-tile {
    height: 5rem;
    border-radius: var(--dp-radius-lg);
}

.scm-mod-KartingDriverProfile .dp-skeleton-avatar,
.scm-mod-KartingDriverProfile .dp-skeleton-line,
.scm-mod-KartingDriverProfile .dp-skeleton-bar,
.scm-mod-KartingDriverProfile .dp-skeleton-tile {
    background: linear-gradient(90deg, var(--dp-bg-elevated) 25%, var(--dp-border) 37%, var(--dp-bg-elevated) 63%);
    background-size: 400% 100%;
    animation: dp-shimmer 1.4s ease-in-out infinite;
}

@keyframes dp-shimmer {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

/* Somebody who asked their system for less motion gets a still placeholder. */
@media (prefers-reduced-motion: reduce) {
    .scm-mod-KartingDriverProfile .dp-skeleton-avatar,
    .scm-mod-KartingDriverProfile .dp-skeleton-line,
    .scm-mod-KartingDriverProfile .dp-skeleton-bar,
    .scm-mod-KartingDriverProfile .dp-skeleton-tile {
        animation: none;
        background: var(--dp-bg-elevated);
    }
}

/* ── Header ──────────────────────────────────────────────────────────────── */

.scm-mod-KartingDriverProfile .dp-avatar-initial {
    font-size: 1.75rem;
    font-weight: 800;
    line-height: 1;
    color: var(--dp-accent-ink);
}

.scm-mod-KartingDriverProfile .dp-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--dp-space-2);
    margin-top: var(--dp-space-3);
}

.scm-mod-KartingDriverProfile .dp-streak-chip,
.scm-mod-KartingDriverProfile .dp-discipline-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.65rem;
    border-radius: var(--dp-radius-full);
    font-size: var(--dp-text-xs);
    font-weight: 600;
    white-space: nowrap;
}

.scm-mod-KartingDriverProfile .dp-streak-chip {
    background: var(--dp-gold-soft);
    color: var(--dp-gold-ink);
}

.scm-mod-KartingDriverProfile .dp-discipline-chip {
    background: var(--dp-bg-elevated);
    color: var(--dp-text-secondary);
    border: 1px solid var(--dp-border);
}

/* ── Level ───────────────────────────────────────────────────────────────── */

.scm-mod-KartingDriverProfile .dp-level-block {
    background: var(--dp-bg-elevated);
    border: 1px solid var(--dp-border);
    border-radius: var(--dp-radius-lg);
    padding: var(--dp-space-4) var(--dp-space-5);
    margin-bottom: var(--dp-space-6);
}

.scm-mod-KartingDriverProfile .dp-level-head {
    display: flex;
    align-items: center;
    gap: var(--dp-space-4);
    margin-bottom: var(--dp-space-3);
}

.scm-mod-KartingDriverProfile .dp-level-mark {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    border-radius: var(--dp-radius-lg);
    background: var(--dp-accent);
    color: var(--dp-on-accent);
    box-shadow: 0 2px 10px var(--dp-accent-glow);
}

.scm-mod-KartingDriverProfile .dp-level-number {
    font-size: var(--dp-text-xl);
    font-weight: 800;
    line-height: 1;
}

.scm-mod-KartingDriverProfile .dp-level-word {
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    opacity: 0.85;
}

.scm-mod-KartingDriverProfile .dp-level-title {
    font-size: var(--dp-text-lg);
    font-weight: 700;
    color: var(--dp-text);
}

.scm-mod-KartingDriverProfile .dp-level-xp {
    font-size: var(--dp-text-sm);
    color: var(--dp-text-secondary);
}

/* The level block owns the whole width here; the header variant stays narrow. */
.scm-mod-KartingDriverProfile .dp-level-block .dp-xp-bar {
    max-width: none;
}

.scm-mod-KartingDriverProfile .dp-level-block .dp-xp-bar .progress {
    height: 8px;
    border-radius: var(--dp-radius-full);
    overflow: hidden;
}

.scm-mod-KartingDriverProfile .dp-level-block .dp-xp-bar .progress-bar {
    background: var(--dp-accent);
    transition: width var(--dp-transition);
}

.scm-mod-KartingDriverProfile .dp-level-block .dp-xp-text {
    text-align: left;
    margin-top: var(--dp-space-2);
    color: var(--dp-text-secondary);
    font-size: var(--dp-text-sm);
}

/* ── Rarity ──────────────────────────────────────────────────────────────── */

/* --dp-rarity colors the border and the icon; --dp-rarity-ink is the same hue made readable as text on the tint. */
.scm-mod-KartingDriverProfile .dp-rarity-common { --dp-rarity: var(--dp-text-tertiary); --dp-rarity-ink: var(--dp-text-secondary); --dp-rarity-soft: var(--dp-bg-elevated); }
.scm-mod-KartingDriverProfile .dp-rarity-uncommon { --dp-rarity: var(--dp-green); --dp-rarity-ink: var(--dp-green-ink); --dp-rarity-soft: var(--dp-green-soft); }
.scm-mod-KartingDriverProfile .dp-rarity-rare { --dp-rarity: var(--dp-accent); --dp-rarity-ink: var(--dp-accent-ink); --dp-rarity-soft: var(--dp-accent-soft); }
.scm-mod-KartingDriverProfile .dp-rarity-epic { --dp-rarity: var(--dp-purple); --dp-rarity-ink: var(--dp-purple-ink); --dp-rarity-soft: var(--dp-purple-soft); }
.scm-mod-KartingDriverProfile .dp-rarity-legendary { --dp-rarity: var(--dp-gold); --dp-rarity-ink: var(--dp-gold-ink); --dp-rarity-soft: var(--dp-gold-soft); }

/* ── Spotlight badge ─────────────────────────────────────────────────────── */

.scm-mod-KartingDriverProfile .dp-spotlight {
    display: flex;
    align-items: center;
    gap: var(--dp-space-4);
    padding: var(--dp-space-5);
    margin-bottom: var(--dp-space-6);
    border-radius: var(--dp-radius-lg);
    background: var(--dp-rarity-soft, var(--dp-bg-elevated));
    border: 1px solid var(--dp-rarity, var(--dp-border));
}

.scm-mod-KartingDriverProfile .dp-spotlight-icon {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    border-radius: var(--dp-radius-full);
    background: var(--dp-bg);
    color: var(--dp-rarity, var(--dp-accent));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
}

.scm-mod-KartingDriverProfile .dp-spotlight-text { min-width: 0; }

.scm-mod-KartingDriverProfile .dp-spotlight-rarity {
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--dp-rarity-ink, var(--dp-text-secondary));
}

.scm-mod-KartingDriverProfile .dp-spotlight-name {
    margin: 0.1rem 0 0.2rem 0;
    font-size: var(--dp-text-lg);
    font-weight: 700;
    color: var(--dp-text);
}

.scm-mod-KartingDriverProfile .dp-spotlight-desc {
    margin: 0;
    font-size: var(--dp-text-sm);
    color: var(--dp-text-secondary);
}

.scm-mod-KartingDriverProfile .dp-spotlight-when {
    margin-top: var(--dp-space-1);
    font-size: var(--dp-text-xs);
    color: var(--dp-text-tertiary);
}

/* ── Badges ──────────────────────────────────────────────────────────────── */

.scm-mod-KartingDriverProfile .dp-section-count {
    margin-left: auto;
    font-size: var(--dp-text-sm);
    font-weight: 600;
    color: var(--dp-text-tertiary);
}

.scm-mod-KartingDriverProfile .dp-section-more {
    margin: var(--dp-space-3) 0 0 0;
    font-size: var(--dp-text-sm);
    color: var(--dp-text-tertiary);
    text-align: center;
}

.scm-mod-KartingDriverProfile .dp-badge-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
    gap: var(--dp-space-3);
}

.scm-mod-KartingDriverProfile .dp-badge-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.35rem;
    padding: var(--dp-space-3);
    border-radius: var(--dp-radius-lg);
    background: var(--dp-rarity-soft, var(--dp-bg-elevated));
    border: 1px solid var(--dp-border);
}

.scm-mod-KartingDriverProfile .dp-badge-tile i {
    font-size: 1.5rem;
    color: var(--dp-rarity, var(--dp-accent));
}

.scm-mod-KartingDriverProfile .dp-badge-name {
    font-size: var(--dp-text-xs);
    font-weight: 700;
    color: var(--dp-text);
    line-height: 1.3;
}

.scm-mod-KartingDriverProfile .dp-badge-when {
    font-size: 0.65rem;
    color: var(--dp-text-tertiary);
}

/* ── Best laps ───────────────────────────────────────────────────────────── */

.scm-mod-KartingDriverProfile .dp-best-group + .dp-best-group {
    margin-top: var(--dp-space-4);
}

.scm-mod-KartingDriverProfile .dp-best-group-label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: var(--dp-text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--dp-text-tertiary);
    margin-bottom: var(--dp-space-2);
}

.scm-mod-KartingDriverProfile .dp-best-list,
.scm-mod-KartingDriverProfile .dp-result-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.scm-mod-KartingDriverProfile .dp-best-row,
.scm-mod-KartingDriverProfile .dp-result-row {
    display: flex;
    align-items: center;
    gap: var(--dp-space-3);
    padding: var(--dp-space-3) 0;
    border-bottom: 1px solid var(--dp-border);
}

.scm-mod-KartingDriverProfile .dp-best-row:last-child,
.scm-mod-KartingDriverProfile .dp-result-row:last-child {
    border-bottom: none;
}

.scm-mod-KartingDriverProfile .dp-best-track {
    flex: 1;
    min-width: 0;
    font-weight: 600;
    color: var(--dp-text);
    font-size: var(--dp-text-sm);
}

.scm-mod-KartingDriverProfile .dp-best-detail,
.scm-mod-KartingDriverProfile .dp-result-when {
    display: block;
    font-weight: 400;
    font-size: var(--dp-text-xs);
    color: var(--dp-text-tertiary);
}

/* ── Recent races ────────────────────────────────────────────────────────── */

.scm-mod-KartingDriverProfile .dp-placing {
    flex-shrink: 0;
    min-width: 4.5rem;
    padding: 0.2rem 0.55rem;
    border-radius: var(--dp-radius-sm);
    background: var(--dp-bg-elevated);
    color: var(--dp-text-secondary);
    font-size: var(--dp-text-xs);
    font-weight: 700;
    text-align: center;
}

.scm-mod-KartingDriverProfile .dp-placing-gold { background: var(--dp-gold-soft); color: var(--dp-gold-ink); }
.scm-mod-KartingDriverProfile .dp-placing-silver { background: #f1f5f9; color: #475569; }
.scm-mod-KartingDriverProfile .dp-placing-bronze { background: #fdf2e9; color: #b45309; }
.scm-mod-KartingDriverProfile .dp-placing-out { background: var(--dp-bg-elevated); color: var(--dp-text-tertiary); }

.scm-mod-KartingDriverProfile .dp-result-event {
    flex: 1;
    min-width: 0;
    font-weight: 600;
    color: var(--dp-text);
    font-size: var(--dp-text-sm);
}

/* ── The invitation at the end ───────────────────────────────────────────── */

.scm-mod-KartingDriverProfile .dp-cta {
    margin-top: var(--dp-space-8);
    padding-top: var(--dp-space-6);
    border-top: 1px solid var(--dp-border);
    text-align: center;
}

.scm-mod-KartingDriverProfile .dp-cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    max-width: 320px;
    padding: 0.75rem var(--dp-space-5);
    border-radius: var(--dp-radius-full);
    background: var(--dp-accent);
    color: var(--dp-on-accent);
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 2px 12px var(--dp-accent-glow);
    transition: background var(--dp-transition), transform var(--dp-transition);
}

.scm-mod-KartingDriverProfile .dp-cta-button:hover,
.scm-mod-KartingDriverProfile .dp-cta-button:focus {
    background: var(--dp-accent-hover);
    color: var(--dp-on-accent);
    transform: translateY(-1px);
}

.scm-mod-KartingDriverProfile .dp-cta-note {
    margin: var(--dp-space-2) 0 0 0;
    font-size: var(--dp-text-xs);
    color: var(--dp-text-tertiary);
}

/* ── Narrow screens ──────────────────────────────────────────────────────── */

@media (max-width: 480px) {
    .scm-mod-KartingDriverProfile .dp-spotlight {
        flex-direction: column;
        text-align: center;
    }

    .scm-mod-KartingDriverProfile .dp-badge-grid {
        grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
    }
}