html,
html[theme~="dark-racing"],
html[data-theme="dark-racing"] {
    --lumo-primary-color: #e31f2b;
    --lumo-primary-text-color: #ff3540;
    --lumo-primary-color-50pct: rgba(229, 9, 20, 0.50);
    --lumo-primary-color-10pct: rgba(229, 9, 20, 0.12);
    --lumo-header-text-color: var(--text-main);
    --vaadin-focus-ring-color: var(--accent);
    --lumo-base-color: #12161d;
    --lumo-body-text-color: #e6edf6;
    --lumo-secondary-text-color: #aab4c3;
    --app-bg: #12161d;
    --sidebar-bg: #151922;
    --header-bg: #161b24;
    --card-bg: #1a202b;
    --card-bg-soft: #222a37;
    --text-main: #f4f4f5;
    --text-muted: #8d929c;
    --border: rgba(255, 255, 255, 0.08);
    --accent: #e50914;
    --accent-dark: #97060d;
    --success: #00d26a;
    --warning: #f5a400;
    --danger: #ff2633;
    --shadow: 0 18px 45px rgba(0, 0, 0, 0.38);
    --glow: 0 0 24px rgba(229, 9, 20, 0.26);
    --acevo-surface: var(--card-bg);
    --acevo-surface-2: var(--app-bg);
    --acevo-surface-3: var(--card-bg-soft);
    --acevo-border: var(--border);
    --acevo-text: var(--text-main);
    --acevo-muted: var(--text-muted);
    --acevo-accent: var(--accent);
    --acevo-accent-2: #2b9df4;
    --acevo-success: var(--success);
    --acevo-danger: var(--danger);
    --acevo-shadow: var(--shadow);
    --acevo-card-shadow: var(--shadow);
    scrollbar-color: #2f343d #222a37;
    scrollbar-width: thin;
}

.server-host-chart {
    background: var(--acevo-surface-3);
    border: 1px solid var(--acevo-border);
    border-radius: 10px;
    box-sizing: border-box;
    margin-top: var(--lumo-space-m);
    min-height: 190px;
    padding: var(--lumo-space-s);
    width: auto;
}

.driver-hub-bestlap-filters,
.community-feature-grid,
.community-stat-grid,
.community-profile-body {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    min-width: 0;
}

.community-root {
    gap: 22px;
}

.community-overview-grid,
.community-driver-card-grid,
.community-profile-insights {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    min-width: 0;
}

.community-driver-card-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.community-profile-body {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.community-profile-body > .driver-profile-card {
    align-content: start;
    display: grid;
    gap: 1px;
}

.community-profile-long-info {
    display: grid;
    gap: 8px;
    grid-column: 1 / -1;
    min-height: 0;
}

.community-profile-long-text {
    color: var(--text-main);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.45;
    margin: 0;
    max-height: none;
    overflow: visible;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.community-bestlap-card {
    align-content: stretch;
    grid-template-rows: auto auto minmax(0, 1fr);
    min-height: min(640px, calc(100vh - 260px));
}

.community-bestlap-card .driver-hub-bestlap-filters {
    align-items: end;
}

.community-bestlap-card .driver-profile-grid {
    align-self: stretch;
    height: 100%;
    min-height: 360px;
}

.community-profile-downloads {
    min-width: 0;
}

.community-overview-card,
.community-driver-card {
    background: rgba(15, 23, 42, 0.72);
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 8px;
    box-sizing: border-box;
    min-width: 0;
}

.community-overview-card {
    display: grid;
    gap: 8px;
    padding: 16px;
}

.community-activity-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: minmax(0, 1.45fr) minmax(320px, .55fr);
    min-width: 0;
}

.community-activity-chart-card,
.community-latest-laps-card {
    min-width: 0;
}

.community-activity-chart {
    min-width: 0;
}

.community-latest-laps-list {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.community-latest-lap-row {
    align-items: center;
    background: rgba(15, 23, 42, 0.72);
    border: 1px solid rgba(148, 163, 184, 0.20);
    border-radius: 8px;
    box-sizing: border-box;
    display: grid;
    gap: 8px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) auto;
    min-height: 44px;
    min-width: 0;
    padding: 9px 10px;
}

.community-latest-lap-driver,
.community-latest-lap-track,
.community-latest-lap-time {
    display: block;
    font-size: 13px;
    line-height: 1.25;
    min-width: 0;
    overflow-wrap: anywhere;
}

.community-latest-lap-driver {
    color: var(--text-main);
    font-weight: 950;
}

.community-latest-lap-track {
    color: var(--text-muted);
    font-weight: 800;
}

.community-latest-lap-time {
    color: var(--success);
    font-variant-numeric: tabular-nums;
    font-weight: 950;
    justify-self: end;
    white-space: nowrap;
}

.community-driver-card {
    align-items: stretch;
    color: var(--text-main);
    cursor: pointer;
    display: grid;
    gap: 12px;
    padding: 14px;
    text-align: left;
    width: 100%;
}

.community-driver-card-compact {
    gap: 10px;
    padding: 12px;
}

.community-driver-card:hover {
    border-color: rgba(255, 53, 64, 0.46);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.22);
}

.community-driver-card-identity {
    align-items: center;
    display: grid;
    gap: 12px;
    grid-template-columns: auto minmax(0, 1fr);
    min-width: 0;
}

.community-driver-card .community-avatar {
    height: 58px;
    width: 58px;
}

.community-driver-card-copy,
.community-driver-card-garage,
.community-compact-stat {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.community-driver-card-name {
    color: var(--text-main);
    font-size: 16px;
    font-weight: 950;
    line-height: 1.15;
    overflow-wrap: anywhere;
}

.community-driver-card-stats {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    min-width: 0;
}

.community-compact-stat {
    background: rgba(8, 14, 22, 0.48);
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 7px;
    padding: 9px;
}

.community-compact-stat span:first-child {
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 950;
    line-height: 1;
    text-transform: uppercase;
}

.community-compact-stat span:last-child,
.community-driver-card-garage span:first-child {
    color: var(--text-main);
    font-size: 13px;
    font-weight: 900;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.community-driver-card-garage span:last-child {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.community-usage-list {
    display: grid;
    gap: 10px;
    min-width: 0;
}

.community-usage-row {
    align-items: center;
    display: grid;
    gap: 8px;
    grid-template-columns: minmax(0, 1fr) auto;
    min-width: 0;
}

.community-usage-label {
    color: var(--text-main);
    font-size: 13px;
    font-weight: 900;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.community-usage-value {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 950;
}

.community-usage-bar {
    background: rgba(148, 163, 184, 0.16);
    border-radius: 999px;
    grid-column: 1 / -1;
    height: 8px;
    overflow: hidden;
}

.community-usage-fill {
    background: linear-gradient(90deg, var(--accent), #5bbcff);
    border-radius: inherit;
    display: block;
    height: 100%;
    width: calc(var(--value) * 1%);
}

.community-tab-content {
    display: grid;
    gap: 18px;
    min-width: 0;
}

.community-events-tab-content {
    width: 100%;
}

.community-hero {
    align-items: stretch;
    background:
            linear-gradient(135deg, rgba(255, 53, 64, 0.17), rgba(20, 32, 44, 0.92)),
            radial-gradient(circle at 86% 12%, rgba(66, 211, 146, 0.18), transparent 34%);
    border: 1px solid rgba(148, 163, 184, 0.26);
    border-radius: 8px;
    box-sizing: border-box;
    display: grid;
    gap: 22px;
    grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
    margin-bottom: 22px;
    min-width: 0;
    overflow: hidden;
    padding: 24px;
}

.community-login-badge {
    align-content: center;
    background: rgba(8, 14, 22, 0.66);
    border: 1px solid rgba(148, 163, 184, 0.26);
    border-radius: 8px;
    display: grid;
    gap: 10px;
    justify-items: start;
    min-width: 0;
    padding: 16px;
}

.community-login-badge span:first-child {
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 850;
}

.community-login-badge span:last-child {
    color: var(--text-main);
    font-size: 20px;
    font-weight: 950;
    overflow-wrap: anywhere;
}

.community-login-badge a {
    display: inline-flex;
    justify-self: start;
    margin-top: 2px;
    width: max-content;
}

.community-search-card-compact {
    order: 10;
}

.community-main-tabs {
    background: rgba(15, 23, 42, 0.58);
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 8px;
    box-sizing: border-box;
    display: inline-flex;
    gap: 6px;
    padding: 6px;
    width: fit-content;
}

.community-main-tab {
    background: transparent;
    border: 0;
    border-radius: 7px;
    color: var(--text-muted);
    cursor: pointer;
    font-weight: 950;
    min-width: 110px;
    padding: 8px 16px;
    text-align: center;
}

.community-main-tab.active {
    background: rgba(255, 53, 64, 0.24);
    color: var(--text-main);
}

.community-hero-copy,
.community-search-box,
.community-profile-copy,
.community-download-copy,
.community-event-copy {
    display: grid;
    gap: 10px;
    min-width: 0;
}

.community-search-box {
    align-content: start;
    background: rgba(8, 14, 22, 0.55);
    border: 1px solid rgba(148, 163, 184, 0.26);
    border-radius: 8px;
    padding: 16px;
}

.community-suggestions {
    display: grid;
    gap: 8px;
    min-height: 42px;
}

.community-suggestions span,
.community-feature p,
.community-download-copy span:last-child {
    color: var(--text-muted);
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.community-suggestion {
    justify-content: flex-start;
    width: 100%;
}

.community-feature,
.community-profile-card,
.community-download-row {
    background: rgba(15, 23, 42, 0.72);
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 8px;
    box-sizing: border-box;
    min-width: 0;
}

.community-feature {
    padding: 16px;
}

.community-feature span:first-child,
.community-download-copy span:first-child {
    color: var(--text-main);
    font-weight: 800;
    overflow-wrap: anywhere;
}

.community-profile-card {
    overflow: hidden;
}

.community-profile-banner {
    aspect-ratio: 4 / 1;
    display: block;
    max-height: 360px;
    min-height: 210px;
    object-fit: cover;
    width: 100%;
}

.community-profile-banner-link,
.community-profile-avatar-link {
    color: inherit;
    display: block;
    line-height: 0;
    text-decoration: none;
}

.community-profile-header {
    align-items: center;
    display: grid;
    gap: 20px;
    grid-template-columns: auto minmax(0, 1fr) minmax(220px, 0.58fr);
    padding: 22px;
}

.community-avatar {
    align-items: center;
    aspect-ratio: 1;
    border: 2px solid rgba(255, 255, 255, 0.32);
    border-radius: 8px;
    display: flex;
    font-size: 28px;
    font-weight: 900;
    height: 96px;
    justify-content: center;
    object-fit: cover;
    width: 96px;
}

.community-profile-avatar,
.community-profile-avatar-link .community-avatar {
    height: 132px;
    width: 132px;
}

.community-profile-copy h2 {
    color: var(--text-main);
    font-size: 30px;
    line-height: 1.05;
    margin: 0;
    overflow-wrap: anywhere;
}

.community-tabs {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

.community-tab {
    background: rgba(255, 53, 64, 0.10);
    border: 1px solid rgba(255, 53, 64, 0.24);
    border-radius: 8px;
    color: var(--text-muted);
    display: inline-flex;
    font-size: 13px;
    font-weight: 900;
    line-height: 1;
    padding: 10px 13px;
    white-space: nowrap;
}

.community-tab.active {
    background: rgba(255, 53, 64, 0.24);
    border-color: rgba(255, 53, 64, 0.46);
    color: var(--text-main);
}

.community-download-list {
    display: grid;
    gap: 10px;
}

.community-social-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.community-social-link {
    align-items: center;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(148, 163, 184, 0.28);
    border-radius: 8px;
    color: var(--text-main);
    display: inline-flex;
    font-weight: 900;
    height: 38px;
    justify-content: center;
    padding: 0;
    text-decoration: none;
    width: 38px;
}

.community-social-link:hover {
    background: rgba(255, 53, 64, 0.18);
    border-color: rgba(255, 53, 64, 0.42);
}

.community-social-icon {
    fill: currentColor;
    height: 20px;
    width: 20px;
}

.community-social-icon path {
    fill: currentColor;
}

.ranking-driver-avatar {
    aspect-ratio: 1;
    border: 2px solid rgba(255, 255, 255, 0.22);
    border-radius: 8px;
    display: block;
    height: 76px;
    object-fit: cover;
    width: 76px;
}

.community-achievement {
    background: rgba(66, 211, 146, 0.08);
    border: 1px solid rgba(66, 211, 146, 0.24);
    border-radius: 8px;
    display: grid;
    gap: 4px;
    max-width: 560px;
    padding: 10px 12px;
}

.community-achievement-title {
    color: #d8fff0;
    font-size: 13px;
    font-weight: 950;
    line-height: 1.15;
}

.community-achievement-text {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.25;
}

.community-download-button,
.ranking-profile-link {
    align-items: center;
    background: rgba(255, 53, 64, 0.14);
    border: 1px solid rgba(255, 53, 64, 0.34);
    border-radius: 8px;
    color: var(--text-main);
    display: inline-flex;
    font-weight: 900;
    justify-content: center;
    min-height: 36px;
    padding: 0 14px;
    text-decoration: none;
}

.awards-root {
    display: grid;
    gap: 18px;
}

.awards-hero {
    background:
        linear-gradient(135deg, rgba(255, 53, 64, 0.14), rgba(20, 32, 44, 0.92)),
        radial-gradient(circle at 90% 10%, rgba(245, 164, 0, 0.18), transparent 32%);
    border: 1px solid rgba(148, 163, 184, 0.26);
    border-radius: 8px;
    box-sizing: border-box;
    display: grid;
    gap: 10px;
    margin-inline: auto;
    max-width: 1120px;
    min-width: 0;
    padding: 24px;
    width: 100%;
}

.awards-hero h2 {
    font-size: clamp(30px, 4vw, 52px);
    line-height: 1;
    margin: 0;
}

.awards-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    margin-inline: auto;
    max-width: 1120px;
    min-width: 0;
    width: 100%;
}

.awards-card {
    align-items: start;
    background: var(--card-bg);
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 8px;
    box-shadow: var(--shadow);
    box-sizing: border-box;
    display: grid;
    gap: 14px;
    grid-template-columns: auto minmax(0, 1fr);
    min-width: 0;
    padding: 16px;
}

.awards-icon {
    align-items: center;
    background: rgba(255, 53, 64, 0.14);
    border: 1px solid rgba(255, 53, 64, 0.32);
    border-radius: 8px;
    color: var(--text-main);
    display: inline-flex;
    font-size: 17px;
    font-weight: 950;
    height: 42px;
    justify-content: center;
    line-height: 1;
    width: 42px;
}

.awards-copy {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.awards-copy h3 {
    font-size: 18px;
    line-height: 1.2;
    margin: 0;
    overflow-wrap: anywhere;
}

.awards-condition {
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 760;
    line-height: 1.45;
    margin: 0;
    overflow-wrap: anywhere;
}

.awards-score {
    color: #d8fff0;
    font-size: 13px;
    font-weight: 900;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.community-voting-card {
    margin-top: 16px;
}

.community-event-showcase,
.community-waiting-room {
    margin-top: 16px;
}

.community-event-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.community-event-card {
    background: rgba(15, 23, 42, 0.72);
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 8px;
    display: grid;
    gap: 8px;
    min-width: 0;
    overflow: hidden;
}

.community-event-image {
    aspect-ratio: 16 / 7;
    display: block;
    filter: saturate(1.08) contrast(1.05);
    object-fit: cover;
    width: 100%;
}

.community-event-title,
.community-event-track,
.community-event-meta,
.community-event-text {
    margin-left: 14px;
    margin-right: 14px;
    overflow-wrap: anywhere;
}

.community-event-title {
    color: var(--text-main);
    font-size: 18px;
    font-weight: 950;
    line-height: 1.15;
}

.community-event-track {
    color: var(--accent);
    font-weight: 900;
}

.community-event-meta,
.community-event-text {
    color: var(--text-muted);
    font-weight: 800;
    line-height: 1.4;
}

.community-event-text {
    margin-bottom: 14px;
}

.community-vote-list {
    display: grid;
    gap: 12px;
}

.community-vote-option {
    display: grid;
    gap: 7px;
}

.community-vote-option span:first-child {
    color: var(--text-main);
    font-weight: 900;
}

.community-vote-option span:nth-child(2) {
    color: var(--text-muted);
    font-weight: 800;
}

.community-vote-bar {
    background: rgba(148, 163, 184, 0.16);
    border-radius: 999px;
    height: 8px;
    overflow: hidden;
}

.community-vote-fill {
    background: var(--accent);
    border-radius: 999px;
    height: 100%;
}

.community-download-row {
    align-items: center;
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 12px;
}

.community-download-row-has-preview {
    grid-template-columns: 72px minmax(0, 1fr) auto;
}

.community-download-preview {
    aspect-ratio: 1;
    border: 1px solid rgba(148, 163, 184, 0.28);
    border-radius: 6px;
    display: block;
    height: 72px;
    object-fit: cover;
    width: 72px;
}

.community-download-row .community-download-button {
    grid-column: 1 / -1;
    justify-self: stretch;
}

.community-event-form {
    display: grid;
    gap: 16px;
    grid-template-columns: minmax(0, 1fr);
    margin-bottom: 14px;
    min-width: 0;
}

.community-form-panel {
    background: rgba(15, 23, 42, 0.34);
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 8px;
    display: grid;
    gap: 12px;
    min-width: 0;
    padding: 14px;
}

.community-form-panel-title {
    color: #f8fafc;
    font-size: 1rem;
    font-weight: 900;
    line-height: 1.2;
    margin: 0;
}

.community-form-help {
    color: #b7c3d4;
    font-size: 0.92rem;
    line-height: 1.5;
    margin: 0;
    max-width: 980px;
}

.community-form-panel-grid {
    align-items: end;
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(4, minmax(170px, 1fr));
    min-width: 0;
}

.community-server-panel .community-form-panel-grid {
    grid-template-columns: minmax(260px, 0.42fr) minmax(0, 1fr);
}

.community-schedule-panel .community-form-panel-grid {
    grid-template-columns: minmax(240px, 0.5fr) minmax(220px, 0.7fr) minmax(260px, 0.8fr);
}

.community-voting-limits {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(5, minmax(120px, 1fr));
    min-width: 0;
}

.community-compact-info {
    align-self: stretch;
    background: rgba(30, 41, 59, 0.78);
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 6px;
    display: grid;
    gap: 4px;
    min-width: 0;
    padding: 10px;
}

.community-compact-info .dashboard-info-value {
    color: #f8fafc;
    font-size: 0.95rem;
    line-height: 1.25;
    overflow-wrap: anywhere;
    text-overflow: clip;
    white-space: normal;
}

.community-form-panel-grid vaadin-text-area,
.community-event-form vaadin-text-area {
    grid-column: 1 / -1;
}

.community-time-combo-row {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-width: 0;
}

.driver-profile-card .community-event-form vaadin-checkbox {
    align-self: center;
    background: transparent;
    border: 0;
    border-radius: 0;
    min-height: 38px;
    padding: 0 2px;
}

.community-class-hints {
    align-content: start;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    grid-column: 1 / -1;
    min-width: 0;
}

.community-class-chip {
    background: rgba(15, 23, 42, 0.78);
    border: 1px solid rgba(148, 163, 184, 0.30);
    border-radius: 6px;
    color: #dbe7f5;
    font-size: 0.86rem;
    font-weight: 800;
    line-height: 1.35;
    padding: 7px 10px;
    white-space: normal;
}

.community-car-selector,
.community-car-class-preview {
    background: rgba(15, 23, 42, 0.48);
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 8px;
    display: grid;
    gap: 10px;
    min-width: 0;
    padding: 12px;
}

.community-car-selector {
    grid-column: 1 / -1;
}

.community-car-filters,
.community-car-actions {
    align-items: end;
    display: grid;
    gap: 10px;
    grid-template-columns: 2fr 1fr auto;
    min-width: 0;
}

.community-car-actions {
    grid-template-columns: repeat(3, minmax(150px, auto));
    justify-content: start;
}

.community-car-selected-info {
    color: #e2e8f0;
    font-size: 0.9rem;
    font-weight: 850;
}

.community-car-image-placeholder {
    color: #94a3b8;
    display: block;
    font-size: 0.76rem;
    max-width: 90px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.community-car-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    max-height: 180px;
    overflow: auto;
}

.community-car-preview-chip {
    background: rgba(30, 41, 59, 0.86);
    border: 1px solid rgba(148, 163, 184, 0.28);
    border-radius: 6px;
    color: #f1f5f9;
    font-size: 0.84rem;
    font-weight: 800;
    padding: 6px 9px;
}

.community-event-list {
    display: grid;
    gap: 14px;
}

.community-event-sections {
    display: grid;
    gap: 18px;
    min-width: 0;
}

.community-event-archive-card {
    border-color: rgba(148, 163, 184, 0.18);
    opacity: 0.92;
}

.community-event-archive-list .community-event-proposal {
    background: rgba(15, 23, 42, 0.52);
}

.community-event-proposal {
    background: rgba(15, 23, 42, 0.72);
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 8px;
    box-sizing: border-box;
    display: grid;
    gap: 16px;
    grid-template-columns: minmax(0, 1fr) minmax(210px, 0.22fr);
    min-width: 0;
    overflow: hidden;
    padding: 12px;
}

.community-event-proposal-open {
    border-color: rgba(56, 189, 248, 0.45);
}

.community-event-proposal-offen {
    border-color: rgba(56, 189, 248, 0.45);
}

.community-event-proposal-voted {
    border-color: rgba(66, 211, 146, 0.58);
}

.community-event-proposal-reached,
.community-event-proposal-scheduled,
.community-event-proposal-waiting {
    border-color: rgba(245, 158, 11, 0.58);
}

.community-event-proposal-completed {
    border-color: rgba(66, 211, 146, 0.62);
}

.community-event-hero-banner {
    align-items: stretch;
    background-position: center;
    background-size: cover;
    border-bottom: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 6px;
    box-sizing: border-box;
    display: grid;
    gap: 18px;
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: 270px;
    padding: 30px 24px;
}

.community-event-hero-title-group {
    align-items: center;
    align-content: center;
    display: flex;
    gap: 18px;
    max-width: 100%;
    min-width: 0;
}

.community-event-hero-vote-badge {
    align-items: center;
    background: linear-gradient(180deg, #ff1f2f, #d60412);
    border-radius: 8px;
    box-shadow: 0 14px 30px rgba(229, 9, 20, 0.36);
    color: #ffffff;
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 24px;
    font-weight: 950;
    min-height: 84px;
    justify-content: center;
    line-height: 1;
    min-width: 68px;
    padding-inline: 10px;
    position: relative;
}

.community-event-hero-vote-badge::after {
    content: none;
}

.community-event-hero-title-text {
    display: grid;
    gap: 7px;
    max-width: 100%;
    min-width: 0;
}

.community-event-hero-title {
    color: #ffffff;
    display: block;
    font-size: clamp(30px, 3.8vw, 46px);
    font-weight: 950;
    line-height: 1.35;
    overflow-wrap: anywhere;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.48);
}

.community-event-hero-actions {
    align-items: end;
    display: flex;
    flex-direction: column;
    gap: 14px;
    justify-content: center;
}

.community-event-hero-banner .dashboard-status-badge {
    background: rgba(8, 20, 15, 0.82);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.26);
}

.community-event-hero-status-open,
.community-event-hero-status-offen {
    border-color: rgba(56, 189, 248, 0.52);
    color: #7dd3fc;
}

.community-event-hero-status-reached,
.community-event-hero-status-scheduled,
.community-event-hero-status-waiting {
    border-color: rgba(245, 158, 11, 0.58);
    color: #fbbf24;
}

.community-event-hero-status-running,
.community-event-hero-status-completed {
    border-color: rgba(66, 211, 146, 0.58);
    color: #42d392;
}

.community-event-hero-banner .dashboard-server-open-button {
    background: linear-gradient(90deg, var(--accent), var(--accent-dark));
    border: 0;
    border-radius: 6px;
    box-shadow: 0 14px 34px rgba(229, 9, 20, 0.32);
    color: #ffffff;
    font-weight: 950;
    min-height: 44px;
    padding-inline: 18px;
}

.community-event-hero-banner .dashboard-track-banner-meta {
    flex-wrap: wrap;
    max-width: 100%;
    overflow: visible;
}

.community-event-hero-banner .dashboard-track-banner-meta-item {
    overflow-wrap: anywhere;
    white-space: normal;
}

.community-event-hero-banner .dashboard-track-server-name {
    max-width: 100%;
    overflow-wrap: anywhere;
    text-overflow: clip;
    white-space: normal;
}

.community-event-proposal .community-event-image {
    align-self: stretch;
    aspect-ratio: 21 / 7;
    border-radius: 6px;
    grid-column: 1 / -1;
    height: auto;
    max-height: 390px;
    min-height: 260px;
    object-fit: cover;
    object-position: center;
    width: 100%;
}

.community-event-copy {
    max-width: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
}

.community-event-vote-head {
    border-radius: 6px;
    display: block;
    font-size: 0.88rem;
    font-weight: 900;
    line-height: 1.35;
    margin-bottom: 4px;
    overflow-wrap: anywhere;
    padding: 9px 11px;
}

.community-event-vote-head-open {
    background: rgba(56, 189, 248, 0.18);
    border: 1px solid rgba(56, 189, 248, 0.62);
    color: #e6f8ff;
}

.community-event-vote-head-voted {
    background: rgba(66, 211, 146, 0.18);
    border: 1px solid rgba(66, 211, 146, 0.62);
    color: #e8fff6;
}

.community-event-vote-head-login {
    background: rgba(56, 189, 248, 0.18);
    border: 1px solid rgba(56, 189, 248, 0.62);
    color: #e6f8ff;
}

.community-event-vote-head-closed {
    background: rgba(148, 163, 184, 0.16);
    border: 1px solid rgba(203, 213, 225, 0.46);
    color: #eef4fb;
}

.community-voting-state-machine {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 8px 0 12px;
    min-width: 0;
}

.community-voting-step {
    align-items: center;
    background: rgba(30, 41, 59, 0.72);
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 6px;
    color: #cbd5e1;
    display: flex;
    font-size: 0.8rem;
    font-weight: 850;
    gap: 7px;
    min-height: 34px;
    min-width: 0;
    padding: 6px 8px;
}

.community-voting-step-dot {
    background: #64748b;
    border-radius: 999px;
    flex: 0 0 auto;
    height: 8px;
    width: 8px;
}

.community-voting-step-done {
    background: rgba(20, 83, 45, 0.26);
    border-color: rgba(66, 211, 146, 0.38);
    color: #ecfdf5;
}

.community-voting-step-done .community-voting-step-dot {
    background: #42d392;
}

.community-voting-step-active {
    outline: 2px solid rgba(56, 189, 248, 0.32);
}

.community-event-settings-grid {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(3, minmax(150px, 1fr));
    margin: 10px 0;
    min-width: 0;
}

.community-event-vehicle-list {
    background: rgba(30, 41, 59, 0.68);
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 8px;
    display: grid;
    gap: 8px;
    margin: 10px 0;
    min-width: 0;
    padding: 10px;
}

.community-event-vehicle-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    max-height: 124px;
    overflow: auto;
}

.community-event-vehicle-chip {
    background: rgba(15, 23, 42, 0.84);
    border: 1px solid rgba(148, 163, 184, 0.28);
    border-radius: 6px;
    color: #f8fafc;
    font-size: 0.84rem;
    font-weight: 800;
    line-height: 1.25;
    padding: 6px 9px;
}

.community-event-summary-footer {
    display: grid;
    gap: 14px;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    margin-top: 14px;
    max-width: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
}

.community-event-summary-footer .dashboard-server-summary-block {
    min-height: 92px;
    min-width: 0;
    overflow: hidden;
    overflow-wrap: anywhere;
}

.community-event-summary-footer .dashboard-server-moderation-row {
    min-width: 0;
    overflow-x: hidden;
}

.community-event-summary-footer .dashboard-server-moderation-text {
    min-width: 0;
    overflow-wrap: anywhere;
    white-space: normal;
}

.community-events-tab-content .dashboard-info-label {
    font-size: 11px;
}

.community-event-voter-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    max-height: 106px;
    overflow: auto;
}

.community-event-voter-chip {
    background: rgba(15, 23, 42, 0.78);
    border: 1px solid rgba(148, 163, 184, 0.26);
    border-radius: 6px;
    color: #f8fafc;
    font-size: 0.84rem;
    font-weight: 850;
    line-height: 1.25;
    padding: 6px 9px;
}

.community-event-actions {
    align-content: start;
    display: grid;
    gap: 10px;
    min-width: 0;
}

.community-countdown-card .dashboard-info-value,
.community-countdown {
    color: #f8fafc;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
}

.community-event-delete-button {
    align-self: end;
    font-weight: 900;
    min-height: 36px;
    justify-self: stretch;
    overflow-wrap: anywhere;
    white-space: normal;
}

.community-waiting-room-inline {
    background: rgba(30, 41, 59, 0.78);
    border: 1px solid rgba(148, 163, 184, 0.28);
    border-radius: 8px;
    color: #e8fff6;
    display: grid;
    gap: 5px;
    line-height: 1.35;
    margin-top: 12px;
    padding: 10px 12px;
}

.community-status-title {
    color: #f8fafc;
    font-size: 1.02rem;
    font-weight: 950;
}

.community-status-detail {
    color: #cbd5e1;
    font-size: 0.92rem;
    font-weight: 750;
}

.community-waiting-room-scheduled,
.community-waiting-room-waiting,
.community-waiting-room-reached {
    background: rgba(120, 53, 15, 0.72);
    border-color: rgba(245, 158, 11, 0.52);
    color: #fff7ed;
}

.community-waiting-room-completed {
    background: rgba(66, 211, 146, 0.14);
    border-color: rgba(66, 211, 146, 0.42);
}

.community-waiting-room-running {
    background: rgba(66, 211, 146, 0.14);
    border-color: rgba(66, 211, 146, 0.46);
}

.community-empty-state {
    background: rgba(15, 23, 42, 0.56);
    border: 1px dashed rgba(148, 163, 184, 0.28);
    border-radius: 8px;
    display: grid;
    gap: 8px;
    min-width: 0;
    padding: 18px;
}

.driver-hub-upload-list {
    display: grid;
    gap: 8px;
}

.driver-hub-upload-error {
    background: rgba(255, 53, 64, 0.14);
    border: 1px solid rgba(255, 53, 64, 0.55);
    border-radius: 8px;
    color: #ffd7dc;
    font-weight: 800;
    line-height: 1.35;
    margin: 0;
    overflow-wrap: anywhere;
    padding: 10px 12px;
}

.driver-hub-upload-item {
    background: rgba(15, 23, 42, 0.56);
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 8px;
    color: var(--text-main);
    display: grid;
    font-size: 13px;
    gap: 10px;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    line-height: 1.35;
    overflow-wrap: anywhere;
    padding: 10px 12px;
}

.driver-hub-upload-delete {
    min-width: 110px;
}

.driver-hub-upload-copy {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.driver-hub-upload-title {
    color: var(--text-main);
    font-weight: 900;
}

.driver-hub-upload-meta {
    color: var(--text-muted);
    font-weight: 750;
}

.driver-hub-media-upload-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    margin: 14px 0;
    min-width: 0;
}

.driver-hub-hero > .driver-hub-media-upload-grid {
    align-self: stretch;
    grid-column: 1;
    grid-template-columns: repeat(2, minmax(220px, 1fr));
    margin: 0;
}

.driver-hub-media-upload {
    background: rgba(15, 23, 42, 0.56);
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 8px;
    display: grid;
    gap: 8px;
    min-width: 0;
    padding: 12px;
}

.driver-hub-upload-item vaadin-checkbox,
.driver-profile-card > vaadin-checkbox,
.driver-profile-card vaadin-checkbox {
    background: rgba(8, 14, 22, 0.48);
    border: 1px solid rgba(148, 163, 184, 0.34);
    border-radius: 8px;
    box-sizing: border-box;
    color: var(--text-main);
    font-weight: 900;
    padding: 9px 11px;
}

.driver-hub-upload-item vaadin-checkbox::part(checkbox),
.driver-profile-card vaadin-checkbox::part(checkbox) {
    background: #eef3fb;
    border: 2px solid #eef3fb;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.12);
    height: 18px;
    width: 18px;
}

.driver-hub-upload-item vaadin-checkbox[checked]::part(checkbox),
.driver-profile-card vaadin-checkbox[checked]::part(checkbox) {
    background: var(--accent);
    border-color: var(--accent);
}

.driver-hub-upload-item vaadin-checkbox::part(label),
.driver-profile-card vaadin-checkbox::part(label) {
    color: var(--text-main);
    font-weight: 900;
    overflow-wrap: anywhere;
    white-space: normal;
}

vaadin-notification-card[theme~="server-action"]::part(overlay) {
    background: #111827;
    border: 1px solid rgba(148, 163, 184, 0.36);
    border-radius: 8px;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.45);
}

vaadin-notification-card[theme~="server-action"]::part(content),
vaadin-notification-card[theme~="server-action"] [slot="middle"] {
    color: #f8fafc;
    font-weight: 850;
    line-height: 1.35;
}

vaadin-notification-card[theme~="server-action"][theme~="success"]::part(overlay) {
    background: #063b2a;
    border-color: rgba(66, 211, 146, 0.62);
}

vaadin-notification-card[theme~="server-action"][theme~="error"]::part(overlay) {
    background: #4a1017;
    border-color: rgba(255, 53, 64, 0.7);
}

@media (max-width: 1180px) {
    .community-form-panel-grid,
    .community-server-panel .community-form-panel-grid,
    .community-schedule-panel .community-form-panel-grid {
        grid-template-columns: repeat(2, minmax(180px, 1fr));
    }

    .community-voting-limits,
    .community-event-settings-grid {
        grid-template-columns: repeat(2, minmax(150px, 1fr));
    }

    .community-event-proposal {
        grid-template-columns: minmax(0, 1fr) minmax(190px, 0.26fr);
    }

    .community-event-actions {
        align-content: stretch;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .community-event-actions .community-event-delete-button,
    .community-event-actions .dashboard-server-open-button {
        align-self: stretch;
        justify-self: stretch;
    }
}

@media (min-width: 1500px) {
    .community-root {
        padding-inline: 28px;
    }

    .community-events-tab-content > .driver-profile-card {
        width: 100%;
    }

    .community-events-tab-content .community-event-proposal {
        grid-template-columns: minmax(0, 1fr) minmax(260px, 0.18fr);
    }

    .community-events-tab-content .community-event-hero-banner {
        min-height: 310px;
        padding: 34px 28px;
    }

    .community-events-tab-content .community-event-settings-grid {
        grid-template-columns: repeat(4, minmax(180px, 1fr));
    }

    .community-events-tab-content .community-event-summary-footer {
        grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    }
}

@media (min-width: 1900px) {
    .community-events-tab-content .community-event-proposal {
        grid-template-columns: minmax(0, 1fr) minmax(300px, 0.16fr);
    }

    .community-events-tab-content .community-event-hero-banner {
        min-height: 340px;
    }
}

@media (max-width: 860px) {
    .community-hero,
    .community-profile-header,
    .community-profile-body,
    .community-event-proposal {
        grid-template-columns: minmax(0, 1fr);
    }

    .community-form-panel-grid,
    .community-server-panel .community-form-panel-grid,
    .community-schedule-panel .community-form-panel-grid,
    .community-event-form {
        grid-template-columns: minmax(0, 1fr);
    }

    .community-voting-limits,
    .community-event-settings-grid,
    .community-car-filters,
    .community-car-actions,
    .community-event-summary-footer,
    .community-voting-state-machine {
        grid-template-columns: minmax(0, 1fr);
    }

    .community-event-actions {
        grid-template-columns: minmax(0, 1fr);
    }

    .community-event-hero-banner {
        grid-template-columns: minmax(0, 1fr);
        min-height: 300px;
        padding: 22px 18px;
    }

    .community-event-hero-title-group {
        align-items: flex-start;
        flex-direction: column;
        gap: 14px;
    }

    .community-event-hero-actions {
        align-items: stretch;
    }

    .community-event-hero-banner .dashboard-track-banner-meta {
        align-items: flex-start;
        flex-direction: column;
        flex-wrap: wrap;
        gap: 4px;
        white-space: normal;
    }

    .community-event-hero-banner .dashboard-track-banner-meta-item {
        flex: 0 1 auto;
        max-width: 100%;
        overflow: visible;
        text-overflow: clip;
        white-space: normal;
    }

    .community-event-hero-banner .dashboard-track-banner-meta-item:not(:last-child)::after {
        content: none;
    }

    .community-driver-card-grid,
    .community-activity-grid,
    .community-profile-insights {
        grid-template-columns: minmax(0, 1fr);
    }

    .community-latest-lap-row {
        align-items: start;
        grid-template-columns: minmax(0, 1fr);
    }

    .community-latest-lap-time {
        justify-self: start;
        white-space: normal;
    }

    .community-bestlap-card {
        min-height: 520px;
    }

    .community-bestlap-card .driver-profile-grid {
        min-height: 300px;
    }

    .community-avatar {
        height: 82px;
        width: 82px;
    }

    .community-profile-avatar,
    .community-profile-avatar-link .community-avatar {
        height: 104px;
        width: 104px;
    }

    .community-profile-banner {
        aspect-ratio: 16 / 9;
        min-height: 160px;
    }

    .community-download-row {
        grid-template-columns: minmax(0, 1fr);
    }

    .community-download-button {
        justify-self: stretch;
    }

    .community-driver-card-stats {
        grid-template-columns: minmax(0, 1fr);
    }

    .driver-hub-upload-item {
        grid-template-columns: minmax(0, 1fr);
    }

    .community-main-tabs {
        width: 100%;
    }

    .community-main-tab {
        flex: 1 1 0;
        min-width: 0;
    }
}

.server-schedule-row {
    align-items: end;
    display: flex;
    flex-wrap: wrap;
    gap: var(--lumo-space-m);
    width: 100%;
}

.server-schedule-row > * {
    box-sizing: border-box;
    flex: 1 1 220px;
    min-width: 190px;
}

.server-schedule-preset-lists {
    align-items: stretch;
    display: flex;
    flex-wrap: wrap;
    gap: var(--lumo-space-m);
    width: 100%;
}

.server-schedule-preset-card {
    background: var(--acevo-surface);
    border: 1px solid var(--acevo-border);
    border-radius: 8px;
    box-sizing: border-box;
    flex: 1 1 320px;
    min-width: 280px;
    padding: var(--lumo-space-m);
}

.server-host-chart svg {
    display: block;
    height: 150px;
    width: auto;
}

.server-host-chart-axis {
    stroke: color-mix(in srgb, var(--acevo-muted) 34%, transparent);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

.server-host-chart-legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--lumo-space-m);
    margin-bottom: var(--lumo-space-xs);
}

.server-host-chart-legend span {
    color: var(--acevo-text);
    font-size: var(--lumo-font-size-s);
    font-weight: 800;
}

.server-host-chart-legend span::before {
    background: var(--line);
    border-radius: 999px;
    content: "";
    display: inline-block;
    height: 9px;
    margin-right: 6px;
    width: 9px;
}

html[theme~="light-racing"],
html[data-theme="light-racing"] {
    --lumo-primary-color: #e50914;
    --lumo-primary-text-color: #b40710;
    --lumo-primary-color-50pct: rgba(229, 9, 20, 0.50);
    --lumo-primary-color-10pct: rgba(229, 9, 20, 0.10);
    --lumo-header-text-color: var(--text-main);
    --vaadin-focus-ring-color: var(--accent);
    --lumo-base-color: #ffffff;
    --lumo-body-text-color: #111827;
    --lumo-secondary-text-color: #6b7280;
    --app-bg: #f4f5f7;
    --sidebar-bg: #ffffff;
    --header-bg: #ffffff;
    --card-bg: #ffffff;
    --card-bg-soft: #f8f9fb;
    --text-main: #111827;
    --text-muted: #6b7280;
    --border: rgba(17, 24, 39, 0.10);
    --accent: #e50914;
    --accent-dark: #b40710;
    --success: #16a34a;
    --warning: #f59e0b;
    --danger: #dc2626;
    --shadow: 0 12px 30px rgba(15, 23, 42, 0.10);
    --glow: 0 0 0 rgba(0, 0, 0, 0);
    --acevo-surface: var(--card-bg);
    --acevo-surface-2: var(--app-bg);
    --acevo-surface-3: var(--card-bg-soft);
    --acevo-border: var(--border);
    --acevo-text: var(--text-main);
    --acevo-muted: var(--text-muted);
    --acevo-accent: var(--accent);
    --acevo-accent-2: #0f6db6;
    --acevo-success: var(--success);
    --acevo-danger: var(--danger);
    --acevo-shadow: var(--shadow);
    --acevo-card-shadow: var(--shadow);
    scrollbar-color: #eeeff2 #f8f9fb;
    scrollbar-width: thin;
}

* {
    scrollbar-width: thin;
}

html,
html[theme~="dark-racing"] *,
html[data-theme="dark-racing"] * {
    scrollbar-color: #2f343d #222a37;
}

html[theme~="light-racing"] *,
html[data-theme="light-racing"] * {
    scrollbar-color: #eeeff2 #f8f9fb;
}

*::-webkit-scrollbar {
    height: 8px;
    width: 8px;
}

*::-webkit-scrollbar-track {
    background: #222a37;
}

*::-webkit-scrollbar-thumb {
    background: #2f343d;
    border-radius: 999px;
}

html[theme~="light-racing"] *::-webkit-scrollbar-track,
html[data-theme="light-racing"] *::-webkit-scrollbar-track {
    background: #f8f9fb;
}

html[theme~="light-racing"] *::-webkit-scrollbar-thumb,
html[data-theme="light-racing"] *::-webkit-scrollbar-thumb {
    background: #eeeff2;
}

body {
    background: var(--app-bg);
    color: var(--text-main);
}

::selection {
    background: color-mix(in srgb, var(--accent) 45%, transparent);
    color: #ffffff;
}

vaadin-text-field,
vaadin-password-field,
vaadin-combo-box,
vaadin-number-field,
vaadin-text-area {
    --vaadin-input-field-focused-border-color: var(--accent);
    --vaadin-input-field-label-color: var(--text-muted);
    --vaadin-input-field-focused-label-color: var(--accent);
    --vaadin-input-field-value-color: var(--text-main);
    --vaadin-input-field-background: var(--card-bg-soft);
}

vaadin-app-layout {
    --vaadin-app-layout-drawer-width: 240px;
}

vaadin-app-layout::part(navbar) {
    background: var(--header-bg);
    border-bottom: 1px solid var(--border);
    min-height: 86px;
}

vaadin-app-layout::part(drawer) {
    background: var(--sidebar-bg);
    border-right: 1px solid var(--border);
}

html[theme~="dark-racing"] vaadin-app-layout::part(drawer),
html[data-theme="dark-racing"] vaadin-app-layout::part(drawer) {
    background: linear-gradient(180deg, #151922, #1b2230);
}

.app-header-content {
    gap: 12px;
    min-height: 86px;
    width: auto;
    overflow: hidden;
}

.app-header-logo {
    align-items: center;
    display: flex;
    flex: 0 1 auto;
}

.app-header-logo-image {
    border-radius: 6px;
    display: block;
    height: 74px;
    max-width: 360px;
    min-width: 320px;
    object-fit: cover;
    width: auto;
}

.theme-toggle {
    background: var(--card-bg-soft);
    border: 1px solid var(--border);
    color: var(--text-main);
    margin-top: 5px;
}

.language-selector {
    margin-top: 5px;
    min-width: 0;
}

.drawer-content {
    box-sizing: border-box;
    min-height: 100%;
    min-width: 0;
    overflow-x: hidden;
}

.drawer-nav-scroller {
    min-height: 0;
    min-width: 0;
    overflow-x: hidden;
    width: auto;
}

.drawer-settings {
    align-items: stretch;
    border-top: 1px solid var(--border);
    box-sizing: border-box;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 48px;
    gap: 10px;
    min-width: 0;
    padding: 14px 12px 18px;
    width: auto;
}

.drawer-settings .language-selector,
.drawer-settings .theme-toggle {
    margin-top: 0;
    width: auto;
}

.drawer-settings .theme-toggle {
    justify-content: center;
    min-height: 44px;
    min-width: 0;
    width: auto;
}

.drawer-settings .language-selector {
    min-height: 44px;
}

vaadin-side-nav {
    background: var(--sidebar-bg);
    padding: 18px 12px;
}

vaadin-side-nav-item {
    --vaadin-side-nav-item-background: transparent;
    --vaadin-side-nav-item-text-color: var(--text-muted);
}

vaadin-side-nav-item::part(content) {
    background: transparent;
    border: 1px solid transparent;
    border-left: 3px solid transparent;
    border-radius: 8px;
    color: var(--text-muted);
    font-weight: 700;
    margin: 3px 0;
    padding: 10px 12px;
    transition: background-color .14s ease, color .14s ease, border-color .14s ease;
}

vaadin-side-nav-item::part(link) {
    color: inherit;
    font-weight: 800;
}

vaadin-side-nav-item:hover::part(content) {
    background: var(--card-bg-soft);
    border-color: rgba(148, 163, 184, 0.18);
    border-left-color: rgba(148, 163, 184, 0.42);
    color: var(--text-main);
}

vaadin-side-nav-item[current] {
    --vaadin-side-nav-item-background: transparent;
    --vaadin-side-nav-item-text-color: #ffffff;
}

vaadin-side-nav-item[current]::part(content) {
    background:
            linear-gradient(90deg, color-mix(in srgb, var(--accent) 34%, transparent), rgba(229, 9, 20, 0.08)),
            rgba(10, 20, 33, 0.88);
    border-color: color-mix(in srgb, var(--accent) 38%, var(--border));
    border-left-color: #ffffff;
    box-shadow: 0 10px 22px color-mix(in srgb, var(--accent) 25%, transparent);
    color: #ffffff;
}

.drawer-nav-icon {
    color: currentColor;
    height: 18px;
    margin-inline-end: 10px;
    width: 18px;
}

vaadin-side-nav-item[current]::part(link) {
    color: #ffffff;
}

html[theme~="light-racing"] vaadin-side-nav-item::part(content),
html[data-theme="light-racing"] vaadin-side-nav-item::part(content) {
    color: #4b5563;
}

html[theme~="light-racing"] vaadin-side-nav-item:hover::part(content),
html[data-theme="light-racing"] vaadin-side-nav-item:hover::part(content) {
    background: #f3f4f6;
    color: #111827;
}

html[theme~="light-racing"] vaadin-side-nav-item[current],
html[data-theme="light-racing"] vaadin-side-nav-item[current] {
    --vaadin-side-nav-item-text-color: #111827;
}

html[theme~="light-racing"] vaadin-side-nav-item[current]::part(content),
html[data-theme="light-racing"] vaadin-side-nav-item[current]::part(content),
html[theme~="light-racing"] vaadin-side-nav-item[current]:hover::part(content),
html[data-theme="light-racing"] vaadin-side-nav-item[current]:hover::part(content) {
    background:
            linear-gradient(90deg, color-mix(in srgb, var(--accent) 12%, transparent), rgba(229, 9, 20, 0.03)),
            #fff7f7;
    border-color: color-mix(in srgb, var(--accent) 22%, #e5e7eb);
    border-left-color: var(--accent);
    box-shadow: 0 10px 22px color-mix(in srgb, var(--accent) 14%, transparent);
    color: #111827;
}

html[theme~="light-racing"] vaadin-side-nav-item[current]::part(link),
html[data-theme="light-racing"] vaadin-side-nav-item[current]::part(link) {
    color: #111827;
}

.content-layout{
    overflow: auto;
    padding: 5px;
}

.login-root {
    background: var(--app-bg);
    color: var(--text-main);
    padding: 22px;
}

.login-title {
    color: var(--text-main);
    font-size: 28px;
    font-weight: 900;
    margin: 0 0 18px;
}
.action-button-bar {
    border-top: 1px solid var(--lumo-contrast-10pct);
    background: var(--lumo-base-color);
    flex-shrink: 0;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.05);
    z-index: 5;
    padding: 5px;
}

.config-section {
    background: var(--acevo-surface);
    border: 1px solid var(--acevo-border);
    border-radius: 8px;
    padding: var(--lumo-space-m);
    margin-bottom: var(--lumo-space-m);
}

.config-section-title {
    margin-top: 0;
    margin-bottom: var(--lumo-space-m);
}

.config-grid {
    gap: var(--lumo-space-m);
}

.config-field-wrapper {
    flex: 1 1 320px;
    max-width: 520px;
}

.config-current-values {
    gap: var(--lumo-space-xs);
}

.config-current-value {
    display: block;
    font-size: var(--lumo-font-size-s);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.setup-help-link {
    color: var(--accent);
    font-weight: 800;
    text-decoration: none;
}

.setup-help-link:hover {
    text-decoration: underline;
}

.server-setup-form {
    gap: var(--lumo-space-m);
}

.server-setup-section {
    background: var(--acevo-surface);
    border: 1px solid var(--acevo-border);
    border-radius: 8px;
    box-sizing: border-box;
    gap: var(--lumo-space-s);
    padding: var(--lumo-space-m);
}

.server-setup-section-title {
    color: var(--text-main);
    font-size: var(--lumo-font-size-l);
    font-weight: 900;
    line-height: 1.25;
    margin: 0;
}

.server-setup-row {
    flex-wrap: wrap;
    gap: var(--lumo-space-m);
}

.server-setup-row > * {
    flex: 1 1 220px;
    min-width: 180px;
}

.server-setup-laps-control {
    flex: 1 1 300px;
    min-width: 280px;
}

.server-setup-laps-row {
    gap: var(--lumo-space-s);
}

.server-setup-laps-row > vaadin-integer-field {
    flex: 1 1 160px;
    min-width: 150px;
}

.server-setup-laps-row > vaadin-checkbox {
    flex: 0 0 auto;
    min-width: max-content;
}

@media (max-width: 700px) {
    .server-setup-section {
        padding: var(--lumo-space-s);
    }

    .server-setup-row > *,
    .server-setup-laps-control,
    .server-setup-laps-row > vaadin-integer-field {
        min-width: 100%;
    }

    .server-setup-laps-row > vaadin-checkbox {
        min-width: 100%;
    }
}

.help-root {
    background: var(--app-bg);
    box-sizing: border-box;
    color: var(--text-main);
    min-height: 100%;
    overflow: auto;
    padding: 22px;
}

.help-content {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: var(--shadow);
    box-sizing: border-box;
    line-height: 1.6;
    max-width: 980px;
    padding: 24px;
}

.help-content h1,
.help-content h2,
.help-content h3 {
    color: var(--text-main);
}

.help-content h1 {
    font-size: 28px;
    margin: 0 0 18px;
}

.help-content h2 {
    border-top: 1px solid var(--border);
    font-size: 20px;
    margin: 30px 0 10px;
    padding-top: 18px;
}

.help-content h2:first-of-type {
    border-top: 0;
    margin-top: 24px;
    padding-top: 0;
}

.help-content p,
.help-content li {
    color: var(--text-main);
    font-size: 15px;
}

.help-code {
    background: var(--lumo-contrast-5pct);
    border: 1px solid var(--border);
    border-left: 4px solid var(--lumo-primary-color);
    border-radius: 8px;
    color: var(--text-main);
    font-family: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Consolas, monospace;
    font-size: 14px;
    line-height: 1.55;
    margin: 12px 0 18px;
    overflow: auto;
    padding: 14px 16px;
    white-space: pre-wrap;
}

.help-callout {
    background: var(--lumo-contrast-5pct);
    border: 1px solid var(--border);
    border-left: 4px solid var(--lumo-primary-color);
    border-radius: 8px;
    margin: 14px 0 18px;
    padding: 12px 16px;
}

.help-callout-recommendation {
    background: rgba(34, 197, 94, 0.10);
    border-left-color: #22c55e;
}

.help-callout-warning {
    background: rgba(245, 158, 11, 0.12);
    border-left-color: #f59e0b;
}

.help-callout p {
    margin: 4px 0;
}

.help-callout-title {
    font-weight: 700;
}

.analytics-help-button {
    white-space: nowrap;
}

.analytics-help-dialog::part(content) {
    background: var(--card-bg);
    color: var(--text-main);
    overflow: auto;
    padding: 0 24px 24px;
}

.analytics-help-dialog::part(overlay) {
    width: min(1080px, 94vw);
    max-height: 88vh;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: var(--shadow);
    color: var(--text-main);
    overflow: hidden;
}

.analytics-help-dialog::part(backdrop) {
    background: rgba(4, 8, 14, 0.76);
}

.analytics-help-dialog::part(header),
.analytics-help-dialog::part(footer) {
    background: var(--card-bg);
    color: var(--text-main);
}

.analytics-help-content {
    display: grid;
    gap: 18px;
    width: 100%;
}

.analytics-help-image {
    width: 100%;
    max-height: 420px;
    object-fit: contain;
    border: 1px solid rgba(148, 163, 184, 0.25);
    border-radius: 8px;
    background: var(--card-bg-soft);
}

.analytics-help-section {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.analytics-help-heading {
    margin: 0;
    font-size: 1rem;
    line-height: 1.25;
    color: var(--text-main);
}

.analytics-help-copy {
    margin: 0;
    color: var(--text-muted);
    line-height: 1.55;
}

.analytics-help-chart-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 22px;
}

.ranking-help-dialog::part(overlay) {
    width: min(1180px, 96vw);
}

.ranking-help-content {
    gap: 22px;
}

.ranking-help-hero {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.12), rgba(14, 165, 233, 0.10));
    border: 1px solid rgba(148, 163, 184, 0.28);
    border-radius: 8px;
    display: grid;
    gap: 18px;
    grid-template-columns: minmax(240px, 0.9fr) minmax(360px, 1.1fr);
    padding: 20px;
}

.ranking-help-hero-copy {
    display: grid;
    gap: 8px;
}

.ranking-help-hero h2 {
    color: var(--text-main);
    font-size: 24px;
    line-height: 1.15;
    margin: 0;
}

.ranking-help-hero p {
    color: var(--text-muted);
    line-height: 1.5;
    margin: 0;
}

.ranking-help-pillars {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ranking-help-pillar {
    align-items: start;
    background: rgba(15, 23, 42, 0.20);
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 8px;
    display: grid;
    gap: 4px 10px;
    grid-template-columns: 28px minmax(0, 1fr);
    padding: 12px;
}

.ranking-help-pillar-icon {
    color: var(--lumo-primary-color);
    grid-row: span 2;
    height: 22px;
    width: 22px;
}

.ranking-help-pillar-title {
    color: var(--text-main);
    font-weight: 800;
    line-height: 1.2;
}

.ranking-help-pillar-text {
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.35;
}

.ranking-help-layout {
    align-items: start;
    display: grid;
    gap: 24px;
    grid-template-columns: 210px minmax(0, 1fr);
}

.ranking-help-nav {
    border-left: 3px solid var(--lumo-primary-color);
    display: grid;
    gap: 4px;
    position: sticky;
    top: 0;
}

.ranking-help-nav-link {
    border-radius: 0 8px 8px 0;
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 800;
    line-height: 1.2;
    padding: 9px 10px;
    text-decoration: none;
}

.ranking-help-nav-link:hover {
    background: var(--lumo-contrast-5pct);
    color: var(--text-main);
}

.ranking-help-sections {
    display: grid;
    gap: 18px;
}

.ranking-help-section {
    border-bottom: 1px solid rgba(148, 163, 184, 0.18);
    display: grid;
    gap: 10px;
    padding-bottom: 18px;
    scroll-margin-top: 16px;
}

.ranking-help-list {
    color: var(--text-main);
    margin: 0;
    padding-left: 20px;
}

.ranking-help-list li {
    line-height: 1.45;
    margin: 3px 0;
}

.ranking-help-example {
    background: var(--lumo-contrast-5pct);
    border: 1px solid var(--border);
    border-left: 4px solid var(--lumo-primary-color);
    border-radius: 8px;
    color: var(--text-main);
    display: grid;
    font-family: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Consolas, monospace;
    font-size: 13px;
    gap: 4px;
    line-height: 1.45;
    padding: 12px 14px;
}

@media (max-width: 760px) {
    .analytics-help-chart-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .ranking-help-hero,
    .ranking-help-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .ranking-help-pillars {
        grid-template-columns: minmax(0, 1fr);
    }

    .ranking-help-nav {
        border-left: 0;
        border-top: 3px solid var(--lumo-primary-color);
        grid-template-columns: repeat(2, minmax(0, 1fr));
        position: static;
    }

    .ranking-help-nav-link {
        border-radius: 8px;
    }

    .analytics-help-dialog::part(content) {
        padding: 0 16px 16px;
    }

    .analytics-help-dialog::part(overlay) {
        width: 96vw;
        max-height: 90vh;
        padding: 16px;
    }
}

.server-status {
    display: block;
    font-weight: 600;
}

.server-info-panel {
    box-sizing: border-box;
    border: 1px solid var(--acevo-border);
    border-radius: 8px;
    background: var(--acevo-surface);
    max-width: 100%;
    min-width: 0;
    padding: var(--lumo-space-s) var(--lumo-space-m);
    width: 100%;
}

.server-info {
    display: block;
    font-size: var(--lumo-font-size-s);
    min-width: 0;
    overflow: hidden;
    overflow-wrap: anywhere;
    text-overflow: ellipsis;
    white-space: normal;
}

.server-path-info {
    color: var(--lumo-secondary-text-color);
    display: block;
    font-size: var(--lumo-font-size-s);
    margin-bottom: var(--lumo-space-xs);
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
}

.server-host-panel {
    background: var(--acevo-surface);
    border: 1px solid var(--acevo-border);
    border-radius: 12px;
    box-shadow: var(--acevo-card-shadow);
    box-sizing: border-box;
    padding: var(--lumo-space-m);
    width: auto;
}

.server-host-title {
    color: var(--acevo-text);
    display: block;
    font-size: var(--lumo-font-size-l);
    font-weight: 800;
    margin-bottom: var(--lumo-space-s);
}

.server-host-meta-grid {
    display: grid;
    gap: var(--lumo-space-xs);
    margin-bottom: var(--lumo-space-m);
}

.server-host-meta {
    color: var(--acevo-muted);
    display: block;
    font-size: var(--lumo-font-size-s);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.server-host-metric-grid {
    display: grid;
    gap: var(--lumo-space-m);
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.server-host-metric-card {
    background: var(--acevo-surface-3);
    border: 1px solid var(--acevo-border);
    border-radius: 10px;
    box-sizing: border-box;
    min-width: 0;
    padding: var(--lumo-space-s);
}

.server-host-metric-label {
    color: var(--acevo-muted);
    display: block;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.server-host-metric-value {
    color: var(--acevo-text);
    display: block;
    font-size: var(--lumo-font-size-s);
    font-weight: 700;
    margin: 4px 0 var(--lumo-space-xs);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.server-host-progress {
    --lumo-primary-color: var(--accent);
    height: 7px;
    width: auto;
}

.admin-ops-root {
    align-items: stretch;
}

.admin-ops-header {
    gap: var(--lumo-space-m);
}

.admin-ops-header h2 {
    margin: 0;
}

.dedicated-update-panel {
    background: var(--acevo-surface);
    border: 1px solid var(--acevo-border);
    border-radius: 12px;
    box-shadow: var(--acevo-card-shadow);
    box-sizing: border-box;
    display: grid;
    gap: var(--lumo-space-s);
    padding: var(--lumo-space-m);
    width: auto;
}

.dedicated-update-title {
    color: var(--acevo-text);
    font-size: var(--lumo-font-size-l);
    font-weight: 800;
    margin: 0;
}

.dedicated-update-hint {
    color: var(--acevo-muted);
    display: block;
    font-size: var(--lumo-font-size-s);
    line-height: 1.45;
    max-width: 960px;
    overflow-wrap: anywhere;
}

.dedicated-update-fields {
    display: grid;
    gap: var(--lumo-space-m);
    grid-template-columns: repeat(3, minmax(170px, 1fr)) minmax(120px, auto) minmax(210px, auto);
    min-width: 0;
}

.dedicated-update-fields vaadin-button {
    min-height: 42px;
    white-space: normal;
}

.dedicated-update-panel vaadin-text-field[disabled],
.dedicated-update-panel vaadin-password-field[disabled],
.dedicated-update-panel vaadin-button[disabled] {
    opacity: 0.78;
}

.dedicated-update-status {
    color: var(--acevo-muted);
    display: block;
    font-size: var(--lumo-font-size-s);
    font-weight: 700;
    overflow-wrap: anywhere;
}

.dedicated-update-status[data-state="running"] {
    color: #fbbf24;
}

.dedicated-update-status[data-state="waiting"] {
    color: #7dd3fc;
}

.dedicated-update-status[data-state="success"] {
    color: #22c55e;
}

.dedicated-update-panel .server-log-console {
    height: 180px;
}

@media (max-width: 900px) {
    .server-host-metric-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dedicated-update-fields {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .server-host-metric-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .dedicated-update-fields {
        grid-template-columns: minmax(0, 1fr);
    }
}

.server-log-grid {
    display: grid;
    gap: var(--lumo-space-m);
    grid-template-columns: minmax(0, 1fr);
    min-width: 0;
    width: auto;
}

.admin-ops-log-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.server-log-details {
    border: 1px solid var(--acevo-border);
    border-radius: 8px;
    background: var(--acevo-surface);
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
}

.server-log-details::part(summary) {
    background: var(--lumo-contrast-5pct);
    font-weight: 600;
    padding: var(--lumo-space-s) var(--lumo-space-m);
}

.server-log-details::part(content) {
    min-width: 0;
    overflow: hidden;
    padding: var(--lumo-space-m);
}

.server-log-console {
    background: #111827;
    border: 1px solid var(--lumo-contrast-20pct);
    border-radius: var(--lumo-border-radius-m);
    box-sizing: border-box;
    color: #e5e7eb;
    font-family: Consolas, "Courier New", monospace;
    font-size: var(--lumo-font-size-s);
    line-height: 1.45;
    height: 280px;
    max-width: 100%;
    min-width: 0;
    overflow: auto;
    overflow-wrap: normal;
    padding: var(--lumo-space-m);
    white-space: pre;
    width: auto;
    word-break: normal;
}

@media (max-width: 900px) {
    .admin-ops-log-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

.dashboard-page-header {
    align-items: center;
    margin-bottom: 18px;
}

.dashboard-page-title {
    color: var(--text-main);
    font-size: 28px;
    font-weight: 900;
    margin: 0;
}

.dashboard-refresh {
    background: linear-gradient(90deg, var(--accent), var(--accent-dark));
    color: #ffffff;
    font-weight: 800;
}

.dashboard-root {
    background:
        radial-gradient(circle at top right, color-mix(in srgb, var(--accent) 12%, transparent), transparent 34%),
        var(--app-bg);
    box-sizing: border-box;
    min-height: 100%;
    overflow: auto;
    padding: 22px;
}

html[theme~="light-racing"] .dashboard-root,
html[data-theme="light-racing"] .dashboard-root {
    background: linear-gradient(180deg, #ffffff 0%, var(--app-bg) 260px);
}

html[theme~="light-racing"] vaadin-app-layout::part(drawer),
html[data-theme="light-racing"] vaadin-app-layout::part(drawer) {
    box-shadow: 8px 0 28px rgba(15, 23, 42, 0.04);
}

.dashboard-hero-list {
    display: grid;
    gap: 18px;
    grid-template-columns: 1fr;
    width: auto;
}

.dashboard-status-panel {
    background:
        linear-gradient(145deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01)),
        var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: var(--shadow);
    box-sizing: border-box;
    display: grid;
    grid-template-rows: auto auto auto;
    overflow: hidden;
    padding: 18px;
    width: auto;
}

html[theme~="dark-racing"] .dashboard-status-panel,
html[data-theme="dark-racing"] .dashboard-status-panel {
    border-color: color-mix(in srgb, var(--accent) 20%, var(--border));
    box-shadow: var(--shadow), var(--glow);
}

html[theme~="light-racing"] .dashboard-hero-list,
html[data-theme="light-racing"] .dashboard-hero-list {
    grid-template-columns: 1fr;
}

html[theme~="light-racing"] .dashboard-status-panel,
html[data-theme="light-racing"] .dashboard-status-panel {
    min-height: 0;
}

.dashboard-status-title {
    margin-bottom: 8px;
}

.dashboard-server-title {
    color: var(--acevo-text);
    display: block;
    font-size: 24px;
    font-weight: 800;
    line-height: 1.16;
    margin: 6px 0 18px;
    overflow: visible;
    white-space: normal;
    word-break: normal;
}

.dashboard-server-status-row {
    align-items: center;
    display: flex;
    gap: 14px;
    justify-content: space-between;
    margin: 0;
    min-width: 0;
}

.dashboard-status-badge {
    border-radius: 999px;
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .5px;
    line-height: 1;
    padding: 9px 12px;
    text-transform: uppercase;
}

.dashboard-status-online {
    background: color-mix(in srgb, var(--success) 18%, transparent);
    border: 1px solid color-mix(in srgb, var(--success) 48%, transparent);
    color: var(--success);
}

.dashboard-status-offline {
    background: color-mix(in srgb, var(--danger) 18%, transparent);
    border: 1px solid color-mix(in srgb, var(--danger) 48%, transparent);
    color: var(--danger);
}

.dashboard-section-label {
    color: var(--accent);
    display: block;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 1.1px;
    text-transform: uppercase;
}

.dashboard-section-label-online {
    color: var(--success);
}

.dashboard-section-label-offline {
    color: var(--danger);
}

.dashboard-section-title {
    color: var(--text-main);
    font-size: 18px;
    font-weight: 900;
    margin: 0 0 14px;
}

.dashboard-status-content {
    display: flex;
    flex-wrap: nowrap;
    gap: 18px;
    align-items: center;
    min-height: 0;
    overflow-x: auto;
    padding-bottom: 4px;
}

html[theme~="light-racing"] .dashboard-status-content,
html[data-theme="light-racing"] .dashboard-status-content {
    display: flex;
}

.dashboard-player-block {
    align-items: center;
    display: flex;
    flex: 0 0 130px;
    justify-content: center;
}

.dashboard-hero-info-grid {
    display: grid;
    flex: 1 1 0;
    gap: 14px;
    grid-template-columns: repeat(3, minmax(160px, 1fr));
    min-width: 0;
    width: auto;
}

.dashboard-status-panel {
    padding: 0;
}

.dashboard-track-banner {
    align-items: stretch;
    background-position: center;
    background-size: cover;
    border-bottom: 1px solid var(--border);
    box-sizing: border-box;
    display: grid;
    gap: 18px;
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: 196px;
    padding: 32px 24px;
}

.dashboard-track-banner-title-group {
    align-items: center;
    align-content: center;
    display: flex;
    gap: 18px;
    min-width: 0;
}

.dashboard-track-rank-badge {
    align-items: center;
    background: linear-gradient(180deg, #ff1f2f, #d60412);
    border-radius: 8px;
    box-shadow: 0 14px 30px rgba(229, 9, 20, 0.36);
    color: #ffffff;
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 28px;
    font-weight: 950;
    height: 56px;
    justify-content: center;
    line-height: 1;
    min-width: 58px;
    padding-inline: 10px;
    position: relative;
}

.dashboard-track-rank-badge::after {
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    border-top: 10px solid #d60412;
    bottom: -9px;
    content: "";
    left: 50%;
    position: absolute;
    transform: translateX(-50%);
}

.dashboard-track-banner-title-text {
    display: grid;
    gap: 7px;
    min-width: 0;
}

.dashboard-track-server-name {
    color: rgba(255, 255, 255, 0.78);
    display: block;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.08em;
    line-height: 1.1;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.42);
    text-transform: uppercase;
    white-space: nowrap;
}

.dashboard-track-banner-title {
    color: #ffffff;
    display: block;
    font-size: clamp(30px, 3.8vw, 46px);
    font-weight: 950;
    line-height: 0.98;
    overflow-wrap: anywhere;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.48);
}

.dashboard-track-banner-meta {
    align-items: baseline;
    color: rgba(255, 255, 255, 0.92);
    display: flex;
    flex-wrap: nowrap;
    font-size: 16px;
    font-weight: 900;
    gap: 0 8px;
    line-height: 1.25;
    min-width: 0;
    overflow: hidden;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.42);
}

.dashboard-track-banner-meta-item {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-track-banner-meta-item:not(:first-child) {
    flex: 0 0 auto;
}

.dashboard-track-banner-meta-item:not(:last-child)::after {
    content: "/";
    margin-left: 8px;
}

.dashboard-track-change-note {
    align-items: center;
    background: rgba(5, 10, 18, 0.62);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 6px;
    box-sizing: border-box;
    color: rgba(255, 255, 255, 0.88);
    display: inline-flex;
    font-size: 13px;
    font-weight: 900;
    justify-self: start;
    line-height: 1.2;
    max-width: 100%;
    min-height: 28px;
    overflow-wrap: anywhere;
    padding: 6px 10px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.38);
}

.dashboard-track-banner-player-count {
    flex: 0 0 auto;
    overflow-wrap: normal;
    white-space: nowrap;
    word-break: keep-all;
}

.dashboard-track-banner-actions {
    align-items: end;
    display: flex;
    flex-direction: column;
    gap: 14px;
    justify-content: center;
}

.dashboard-track-banner .dashboard-status-badge {
    background: rgba(8, 20, 15, 0.82);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.26);
}

.dashboard-track-banner .dashboard-server-open-button {
    background: linear-gradient(90deg, var(--accent), var(--accent-dark));
    border: 0;
    border-radius: 6px;
    box-shadow: 0 14px 34px rgba(229, 9, 20, 0.32);
    color: #ffffff;
    font-weight: 950;
    min-height: 44px;
    padding-inline: 18px;
}

.dashboard-status-panel > .dashboard-status-content,
.dashboard-status-panel > .dashboard-server-card-footer {
    padding-inline: 18px;
}

.dashboard-status-panel > .dashboard-status-content {
    padding-top: 18px;
}

.dashboard-status-panel > .dashboard-server-card-footer {
    padding-bottom: 18px;
}

html[theme~="light-racing"] .dashboard-track-banner,
html[data-theme="light-racing"] .dashboard-track-banner {
    border-color: rgba(15, 23, 42, 0.12);
}

@media (max-width: 700px) {
    .dashboard-root {
        padding: 10px;
    }

    .dashboard-hero-list {
        gap: 12px;
    }

    .dashboard-status-panel {
        border-radius: 10px;
    }

    .dashboard-track-banner {
        align-items: start;
        gap: 16px;
        grid-template-columns: minmax(0, 1fr);
        min-height: 250px;
        padding: 18px 16px;
    }

    .dashboard-track-banner-title-group {
        align-items: start;
        display: grid;
        gap: 0;
        grid-template-columns: minmax(0, 1fr);
    }

    .dashboard-track-rank-badge {
        display: none;
    }

    .dashboard-track-server-name {
        font-size: 11px;
        white-space: normal;
    }

    .dashboard-track-banner-title {
        font-size: clamp(28px, 10vw, 38px);
        line-height: 1;
    }

    .dashboard-track-banner-meta {
        font-size: 13px;
    }

    .dashboard-track-change-note {
        font-size: 12px;
        justify-self: stretch;
        min-height: 30px;
        padding: 6px 8px;
    }

    .dashboard-track-banner-actions {
        align-items: stretch;
        display: grid;
        gap: 10px;
        grid-template-columns: minmax(0, 1fr);
        justify-content: stretch;
        width: 100%;
    }

    .dashboard-track-banner .dashboard-status-badge,
    .dashboard-track-banner .dashboard-server-open-button {
        justify-content: center;
        width: 100%;
    }

    .dashboard-status-panel > .dashboard-status-content,
    .dashboard-status-panel > .dashboard-server-card-footer {
        padding-inline: 12px;
    }

    .dashboard-status-content {
        display: grid;
        gap: 12px;
        grid-template-columns: minmax(0, 1fr);
        overflow-x: visible;
        padding-top: 12px;
    }

    .dashboard-player-block {
        justify-content: stretch;
    }

    .player-gauge,
    html[theme~="light-racing"] .player-gauge,
    html[data-theme="light-racing"] .player-gauge {
        height: 104px;
        min-width: 104px;
        width: 104px;
    }

    .dashboard-hero-info-grid,
    html[theme~="light-racing"] .dashboard-hero-info-grid,
    html[data-theme="light-racing"] .dashboard-hero-info-grid {
        flex: none;
        gap: 10px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        min-width: 0;
        width: 100%;
    }

    .dashboard-info-card {
        min-height: 68px;
        padding: 10px 12px;
    }

    .dashboard-info-value {
        font-size: 13px;
        white-space: normal;
    }

    .dashboard-server-card-footer {
        display: grid;
        gap: 10px;
        grid-template-columns: minmax(0, 1fr);
    }

    .dashboard-server-live-summary {
        display: grid;
        gap: 10px;
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 360px) {
    .dashboard-hero-info-grid,
    html[theme~="light-racing"] .dashboard-hero-info-grid,
    html[data-theme="light-racing"] .dashboard-hero-info-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

.dashboard-info-card {
    align-items: center;
    background: var(--card-bg-soft);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-sizing: border-box;
    display: flex;
    gap: 8px;
    min-width: 0;
    max-width: none;
    min-height: 64px;
    padding: 13px 15px;
}

.dashboard-info-icon {
    background: color-mix(in srgb, var(--accent) 13%, transparent);
    border-radius: 5px;
    color: var(--accent);
    flex: 0 0 auto;
    height: 20px;
    padding: 4px;
    width: 20px;
}

.dashboard-info-text {
    min-width: 0;
}

.dashboard-info-label {
    color: var(--text-muted);
    display: block;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .4px;
    line-height: 1.15;
    text-transform: uppercase;
}

.dashboard-info-value {
    color: var(--text-main);
    display: block;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-kpi-grid {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 18px 0;
    width: auto;
}

.dashboard-kpi-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: var(--shadow);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    height: 140px;
    justify-content: center;
    min-width: 0;
    padding: 22px;
}

html[theme~="light-racing"] .dashboard-kpi-card,
html[data-theme="light-racing"] .dashboard-kpi-card,
html[theme~="light-racing"] .dashboard-timing-card,
html[data-theme="light-racing"] .dashboard-timing-card,
html[theme~="light-racing"] .dashboard-commentary-card,
html[data-theme="light-racing"] .dashboard-commentary-card,
html[theme~="light-racing"] .dashboard-session-laps-card,
html[data-theme="light-racing"] .dashboard-session-laps-card,
html[theme~="light-racing"] .dashboard-results-card,
html[data-theme="light-racing"] .dashboard-results-card,
html[theme~="light-racing"] .dashboard-side-card,
html[data-theme="light-racing"] .dashboard-side-card {
    box-shadow: var(--shadow);
}

.dashboard-kpi-icon {
    color: var(--accent);
    height: 26px;
    margin-bottom: 14px;
    width: 26px;
}

.dashboard-kpi-value {
    color: var(--text-main);
    display: block;
    font-size: 24px;
    font-weight: 900;
    line-height: 1.1;
}

.dashboard-kpi-label {
    color: var(--text-muted);
    display: block;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .5px;
    margin-top: 6px;
    text-transform: uppercase;
}

.dashboard-session-stack {
    display: grid;
    gap: 18px;
    grid-template-columns: minmax(0, 1fr);
    width: auto;
}

html[theme~="light-racing"] .dashboard-session-stack,
html[data-theme="light-racing"] .dashboard-session-stack {
    grid-template-columns: minmax(0, 1fr);
}

.dashboard-timing-card,
.dashboard-commentary-card,
.dashboard-session-laps-card,
.dashboard-results-card,
.dashboard-side-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: var(--shadow);
    box-sizing: border-box;
    min-width: 0;
    overflow: hidden;
    padding: 22px;
}

.dashboard-timing-card {
    display: flex;
    flex-direction: column;
    height: 500px;
}

.dashboard-timing-grid {
    flex: 1 1 auto;
    min-height: 0;
}

.dashboard-timing-grid::part(body-cell),
.dashboard-timing-grid::part(header-cell) {
    overflow: hidden;
}

.dashboard-timing-grid::part(cell) {
    max-width: 360px;
}

.dashboard-sector-cell,
.dashboard-valid-badge {
    border-radius: 6px;
    box-sizing: border-box;
    display: inline-flex;
    font-family: Consolas, "Courier New", monospace;
    font-size: 13px;
    font-weight: 800;
    justify-content: center;
    line-height: 1;
    min-width: 96px;
    padding: 7px 9px;
    white-space: nowrap;
}

.dashboard-sector-neutral {
    background: color-mix(in srgb, var(--text-muted) 12%, transparent);
    color: var(--text-main);
}

.dashboard-sector-faster,
.dashboard-valid-ok {
    background: color-mix(in srgb, var(--success) 18%, transparent);
    border: 1px solid color-mix(in srgb, var(--success) 44%, transparent);
    color: var(--success);
}

.dashboard-sector-slower,
.dashboard-valid-invalid {
    background: color-mix(in srgb, var(--danger) 18%, transparent);
    border: 1px solid color-mix(in srgb, var(--danger) 44%, transparent);
    color: var(--danger);
}

.dashboard-status-track {
    background: color-mix(in srgb, var(--success) 16%, transparent);
    border: 1px solid color-mix(in srgb, var(--success) 40%, transparent);
    color: var(--success);
}

.dashboard-status-box {
    background: color-mix(in srgb, var(--accent) 16%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
    color: var(--accent);
}

.dashboard-status-outlap {
    background: color-mix(in srgb, var(--warning) 18%, transparent);
    border: 1px solid color-mix(in srgb, var(--warning) 46%, transparent);
    color: var(--warning);
}

.dashboard-status-disconnected {
    background: color-mix(in srgb, var(--text-muted) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--text-muted) 34%, transparent);
    color: var(--text-muted);
}

.dashboard-commentary-card {
    display: flex;
    flex-direction: column;
    height: 300px;
}

.dashboard-session-laps-card {
    display: flex;
    flex-direction: column;
    height: 360px;
}

.dashboard-results-card {
    display: flex;
    flex-direction: column;
    height: 220px;
}

.results-root {
    background: var(--app-bg);
    box-sizing: border-box;
    color: var(--text-main);
    min-height: 100%;
    overflow: auto;
    padding: 22px;
}

.driver-profile-root {
    background: var(--app-bg);
    box-sizing: border-box;
    color: var(--text-main);
    min-height: 100%;
    overflow: auto;
    padding: 22px;
}

.jfancy-support-root {
    background: var(--app-bg);
    box-sizing: border-box;
    color: var(--text-main);
    display: grid;
    gap: 22px;
    min-height: 100%;
    overflow: auto;
    padding: 22px;
}

.jfancy-support-hero,
.jfancy-support-story,
.jfancy-support-thanks {
    margin-inline: auto;
    max-width: 1120px;
    width: 100%;
}

.jfancy-support-hero {
    background:
        radial-gradient(circle at 82% 16%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 26%),
        linear-gradient(145deg, color-mix(in srgb, var(--card-bg) 92%, transparent), var(--card-bg-soft));
    border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--border));
    border-radius: 8px;
    box-shadow: var(--shadow);
    box-sizing: border-box;
    display: grid;
    gap: 18px;
    overflow: hidden;
    padding: clamp(22px, 4vw, 42px);
}

.jfancy-support-kicker {
    color: var(--accent);
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.jfancy-support-hero h1 {
    font-size: clamp(34px, 5vw, 62px);
    line-height: 0.95;
    margin: 0;
    max-width: 900px;
}

.jfancy-support-lead {
    color: var(--text-muted);
    font-size: clamp(18px, 2vw, 22px);
    font-weight: 700;
    line-height: 1.55;
    margin: 0;
    max-width: 940px;
}

.jfancy-support-acevo-banner {
    height: auto;
    max-width: min(520px, 100%);
}

.jfancy-support-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.jfancy-support-donation-button {
    background: linear-gradient(90deg, var(--accent), var(--accent-dark));
    color: #ffffff;
    font-weight: 900;
}

.jfancy-support-project-link {
    align-items: center;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-main);
    display: inline-flex;
    font-weight: 900;
    min-height: 40px;
    padding: 0 16px;
    text-decoration: none;
}

.jfancy-support-project-link:hover {
    border-color: color-mix(in srgb, var(--accent) 42%, var(--border));
    color: var(--accent);
}

.jfancy-support-story {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.jfancy-support-section,
.jfancy-support-vision,
.jfancy-support-thanks {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: var(--shadow);
    box-sizing: border-box;
    padding: 22px;
}

.jfancy-support-section h2,
.jfancy-support-vision h2 {
    margin: 0 0 10px;
}

.jfancy-support-section p {
    color: var(--text-muted);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.55;
    margin: 0;
}

.jfancy-support-vision {
    border-color: color-mix(in srgb, var(--accent) 34%, var(--border));
}

.jfancy-support-vision ul {
    display: grid;
    gap: 10px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.jfancy-support-vision li {
    color: var(--text-main);
    font-weight: 900;
}

.jfancy-support-vision li::before {
    color: var(--accent);
    content: ">";
    display: inline-block;
    font-weight: 900;
    margin-right: 10px;
}

.jfancy-support-thanks {
    display: grid;
    gap: 8px;
    font-size: 1.05rem;
    font-weight: 900;
}

.results-card,
.results-detail-panel,
.driver-profile-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: var(--shadow);
    box-sizing: border-box;
    margin-bottom: 18px;
    min-width: 0;
    overflow: hidden;
    padding: 22px;
}

.driver-profile-detail {
    display: grid;
    gap: 18px;
}

.driver-profile-chart-grid {
    display: grid;
    gap: 18px;
    grid-template-columns: minmax(0, 1fr);
    min-width: 0;
}

.driver-profile-overview {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(5, minmax(150px, 1fr));
}

.driver-hub-detail {
    gap: 18px;
}

.driver-hub-hero {
    background:
            linear-gradient(135deg, rgba(229, 9, 20, 0.16), transparent 34%),
            radial-gradient(circle at 86% 18%, rgba(43, 157, 244, 0.18), transparent 28%),
            var(--card-bg);
    border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border));
    border-radius: 8px;
    box-shadow: var(--shadow);
    box-sizing: border-box;
    display: grid;
    gap: 18px;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
    min-width: 0;
    overflow: hidden;
    padding: clamp(18px, 3vw, 30px);
}

.driver-hub-banner {
    aspect-ratio: 6 / 1;
    border-radius: 8px;
    display: block;
    grid-column: 1 / -1;
    max-height: 260px;
    min-height: 150px;
    object-fit: cover;
    width: 100%;
}

.driver-hub-identity {
    align-items: center;
    display: grid;
    gap: 18px;
    grid-template-columns: 104px minmax(0, 1fr);
    min-width: 0;
}

.driver-hub-avatar {
    align-items: center;
    aspect-ratio: 1;
    background: linear-gradient(135deg, var(--accent), #2b9df4);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 8px;
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.28);
    color: #ffffff;
    display: flex;
    font-size: 30px;
    font-weight: 950;
    justify-content: center;
    object-fit: cover;
    width: 104px;
}

.driver-hub-identity-copy {
    display: grid;
    gap: 7px;
    min-width: 0;
}

.driver-hub-kicker {
    color: var(--accent);
    font-size: 12px;
    font-weight: 950;
    letter-spacing: .08em;
    line-height: 1;
    text-transform: uppercase;
}

.driver-hub-identity-copy h2 {
    color: var(--text-main);
    font-size: clamp(30px, 4vw, 52px);
    font-weight: 950;
    line-height: .96;
    margin: 0;
    overflow-wrap: anywhere;
}

.driver-hub-steam,
.driver-hub-lead {
    color: var(--text-muted);
    font-weight: 800;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.driver-hub-lead {
    font-size: 15px;
    margin: 0;
    max-width: 720px;
}

.driver-hub-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    grid-column: 2;
    min-width: 0;
}

.driver-hub-action-button {
    background: var(--card-bg-soft);
    border: 1px solid var(--border);
    color: var(--text-main);
    font-weight: 900;
}

.driver-hub-pulse {
    display: grid;
    gap: 10px;
    grid-template-columns: minmax(0, 1fr);
    min-width: 0;
}

.driver-hub-pulse-item,
.driver-hub-kpi-card,
.driver-hub-action-row {
    background: color-mix(in srgb, var(--card-bg-soft) 88%, transparent);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-sizing: border-box;
    min-width: 0;
}

.driver-hub-pulse-item {
    align-items: center;
    display: grid;
    gap: 4px 10px;
    grid-template-columns: 34px minmax(0, 1fr);
    padding: 12px;
}

.driver-hub-pulse-item > .driver-hub-pulse-icon {
    grid-row: 1 / span 2;
}

.driver-hub-pulse-icon,
.driver-hub-kpi-icon {
    color: var(--accent);
    height: 22px;
    width: 22px;
}

.driver-hub-pulse-label,
.driver-hub-kpi-detail {
    color: var(--text-muted);
    display: block;
    font-size: 12px;
    font-weight: 850;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.driver-hub-pulse-value {
    color: var(--text-main);
    display: block;
    font-size: 18px;
    font-weight: 950;
    line-height: 1.1;
    overflow-wrap: anywhere;
}

.driver-hub-kpi-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
}

.driver-hub-kpi-card {
    display: grid;
    gap: 7px;
    grid-template-columns: 28px minmax(0, 1fr);
    padding: 14px;
}

.driver-hub-kpi-card .dashboard-info-label,
.driver-hub-kpi-card .dashboard-info-value,
.driver-hub-kpi-detail {
    grid-column: 2;
    min-width: 0;
}

.driver-hub-kpi-card .dashboard-info-value {
    font-size: clamp(18px, 2vw, 22px);
    line-height: 1.05;
    overflow-wrap: anywhere;
}

.driver-hub-main-grid {
    align-items: start;
    display: grid;
    gap: 18px;
    grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr);
}

@media (max-width: 1180px) {
    .driver-hub-hero,
    .driver-hub-main-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .driver-hub-hero > .driver-hub-media-upload-grid {
        grid-column: auto;
        grid-template-columns: minmax(0, 1fr);
    }

    .driver-hub-actions {
        grid-column: auto;
    }
}

.driver-hub-feed-card {
    grid-row: span 3;
}

.driver-hub-feed,
.driver-hub-action-list,
.driver-hub-garage,
.driver-hub-chip-list {
    display: grid;
    gap: 10px;
    min-width: 0;
}

.driver-hub-feed-row {
    align-items: start;
    border-bottom: 1px solid var(--border);
    display: grid;
    gap: 12px;
    grid-template-columns: 92px minmax(0, 1fr);
    min-width: 0;
    padding: 12px 0;
}

.driver-hub-feed-row:last-child {
    border-bottom: 0;
}

.driver-hub-feed-type,
.driver-hub-action-type {
    align-self: start;
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 34%, transparent);
    border-radius: 999px;
    color: var(--text-main);
    font-size: 11px;
    font-weight: 950;
    line-height: 1;
    overflow-wrap: anywhere;
    padding: 7px 9px;
    text-align: center;
}

.driver-hub-feed-copy {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.driver-hub-feed-title,
.driver-hub-action-title {
    color: var(--text-main);
    font-size: 15px;
    font-weight: 950;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.driver-hub-feed-text,
.driver-hub-action-text {
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 750;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.driver-hub-action-row {
    display: grid;
    gap: 6px;
    padding: 12px;
}

.driver-hub-action-type {
    justify-self: start;
}

.driver-hub-chip-list {
    display: flex;
    flex-wrap: wrap;
}

.driver-hub-chip {
    background: var(--card-bg-soft);
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text-main);
    font-size: 13px;
    font-weight: 900;
    line-height: 1;
    padding: 9px 11px;
}

.driver-hub-garage-card {
    grid-column: 1 / -1;
}

.driver-hub-chart-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-width: 0;
}

.driver-hub-chart-card {
    background: color-mix(in srgb, var(--card-bg-soft) 88%, transparent);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-sizing: border-box;
    min-width: 0;
    overflow: hidden;
    padding: 14px;
}

.driver-hub-chart-card .dashboard-section-title {
    font-size: 15px;
    line-height: 1.2;
    margin-bottom: 10px;
}

.driver-hub-bestlap-block {
    margin-top: 16px;
    min-width: 0;
}

.driver-hub-settings-grid {
    display: grid;
    gap: 18px;
    grid-template-columns: minmax(0, 1fr);
}

.driver-hub-profile-form {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-bottom: 14px;
    min-width: 0;
}

.driver-hub-profile-form vaadin-text-area {
    grid-column: span 3;
}

.driver-hub-upload {
    max-width: 100%;
}

.driver-hub-upload-list {
    display: grid;
    gap: 8px;
    margin-top: 12px;
    min-width: 0;
}

.driver-hub-upload-item {
    background: var(--card-bg-soft);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-main);
    align-items: center;
    display: grid;
    font-size: 13px;
    font-weight: 800;
    gap: 10px;
    grid-template-columns: minmax(0, 1fr) auto;
    line-height: 1.35;
    overflow-wrap: anywhere;
    padding: 9px 10px;
}

html[theme~="light-racing"] .driver-hub-hero,
html[data-theme="light-racing"] .driver-hub-hero,
html[theme~="light-racing"] .driver-hub-pulse-item,
html[data-theme="light-racing"] .driver-hub-pulse-item,
html[theme~="light-racing"] .driver-hub-kpi-card,
html[data-theme="light-racing"] .driver-hub-kpi-card,
html[theme~="light-racing"] .driver-hub-action-row,
html[data-theme="light-racing"] .driver-hub-action-row {
    background-color: rgba(255, 255, 255, 0.94);
}

.results-dashboard-stack {
    display: grid;
    gap: 18px;
    grid-template-columns: minmax(0, 1fr);
}

.results-race-showcase {
    display: grid;
    gap: 18px;
    margin-bottom: 18px;
}

.results-race-showcase-header,
.results-race-hero,
.results-race-standings,
.results-race-side-card {
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01)),
        #0b0f14;
    border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border));
    border-radius: 14px;
    box-shadow: var(--shadow);
}

html[theme~="light-racing"] .results-race-showcase-header,
html[data-theme="light-racing"] .results-race-showcase-header,
html[theme~="light-racing"] .results-race-hero,
html[data-theme="light-racing"] .results-race-hero,
html[theme~="light-racing"] .results-race-standings,
html[data-theme="light-racing"] .results-race-standings,
html[theme~="light-racing"] .results-race-side-card,
html[data-theme="light-racing"] .results-race-side-card {
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(248, 250, 252, 0.9)),
        #ffffff;
    border-color: color-mix(in srgb, var(--accent) 22%, var(--border));
}

.results-race-showcase-header {
    align-items: center;
    display: grid;
    gap: 18px;
    grid-template-columns: minmax(0, 1fr) auto auto;
    overflow: hidden;
    padding: 18px 22px;
}

.results-race-showcase-banner {
    display: block;
    height: auto;
    max-width: min(520px, 100%);
}

.results-race-showcase-header-text {
    display: grid;
    gap: 4px;
    justify-items: end;
}

.results-race-showcase-eyebrow {
    color: var(--accent);
    font-size: 13px;
    font-style: italic;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.results-race-showcase-title {
    color: var(--text-main);
    font-size: 24px;
    font-style: italic;
    font-weight: 800;
    text-align: right;
}

.results-race-showcase-map {
    filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.18));
    height: auto;
    max-width: 120px;
}

.results-race-hero {
    align-items: start;
    display: grid;
    gap: 20px;
    grid-template-columns: minmax(320px, 1fr) minmax(280px, 46%);
    max-height: 400px;
    overflow: hidden;
    padding: 0;
}

.results-race-winner {
    align-content: center;
    background:
        linear-gradient(125deg, rgba(229, 9, 20, 0.08), transparent 34%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent),
        #090d12;
    display: grid;
    gap: 10px;
    min-height: clamp(260px, 24vw, 400px);
    padding: 26px 28px;
}

html[theme~="light-racing"] .results-race-winner,
html[data-theme="light-racing"] .results-race-winner {
    background:
        linear-gradient(125deg, rgba(229, 9, 20, 0.07), transparent 34%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(248, 250, 252, 0.82)),
        #ffffff;
}

.results-race-position {
    color: #ffffff;
    font-size: clamp(52px, 7vw, 88px);
    font-style: italic;
    font-weight: 900;
    line-height: 0.9;
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.08);
}

html[theme~="light-racing"] .results-race-position,
html[data-theme="light-racing"] .results-race-position,
html[theme~="light-racing"] .results-race-pos-cell,
html[data-theme="light-racing"] .results-race-pos-cell {
    color: var(--text-main);
    text-shadow: none;
}

.results-race-winner-label {
    color: var(--accent);
    font-size: 14px;
    font-style: italic;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.results-race-winner-car {
    color: var(--text-muted);
    font-size: clamp(20px, 2.2vw, 28px);
    font-style: italic;
    font-weight: 700;
    line-height: 1.05;
}

.results-race-winner-driver {
    color: var(--text-main);
    font-size: clamp(24px, 3vw, 38px);
    font-style: italic;
    font-weight: 800;
}

.results-race-meta {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 8px;
}

.results-race-meta-block {
    border-left: 1px solid color-mix(in srgb, var(--accent) 36%, var(--border));
    padding-left: 14px;
}

.results-race-hero-image {
    align-self: start;
    display: block;
    height: clamp(260px, 24vw, 400px);
    max-height: 400px;
    min-height: 0;
    object-fit: cover;
    object-position: var(--car-image-position, center);
    width: 100%;
}

.results-race-body {
    display: grid;
    gap: 18px;
    grid-template-columns: minmax(0, 1fr) 300px;
}

.car-images-admin-view {
    gap: 18px;
}

.car-images-admin-layout {
    align-items: stretch;
    min-height: 0;
}

.car-images-admin-layout > .results-card {
    min-width: 0;
}

.car-images-preview img {
    display: block;
}

.car-images-actions {
    flex-wrap: wrap;
    margin-top: 16px;
}

@media (max-width: 900px) {
    .car-images-admin-layout {
        flex-direction: column;
    }
}

.results-race-standings {
    overflow: hidden;
}

.results-race-standings-header,
.results-race-standings-row {
    align-items: center;
    column-gap: 16px;
    display: grid;
    grid-template-columns: 68px minmax(180px, 0.9fr) minmax(220px, 1.15fr) 160px 140px 90px 110px;
    padding: 14px 18px;
}

.results-race-standings-header {
    border-bottom: 1px solid var(--border);
}

.results-race-standings-row {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

html[theme~="light-racing"] .results-race-standings-row,
html[data-theme="light-racing"] .results-race-standings-row,
html[theme~="light-racing"] .results-race-side-pair,
html[data-theme="light-racing"] .results-race-side-pair {
    border-color: rgba(17, 24, 39, 0.12);
}

.results-race-standings-row:first-of-type {
    border-top: 0;
}

.results-race-pos-cell {
    color: #ffffff;
    font-size: 28px;
    font-style: italic;
    font-weight: 900;
}

.results-race-driver-cell,
.results-race-car-cell {
    color: var(--text-main);
    font-size: 17px;
    font-style: italic;
    font-weight: 700;
}

.results-race-lap-cell,
.results-race-laps-cell {
    color: var(--text-main);
    font-family: Consolas, "Courier New", monospace;
    font-size: 16px;
    font-weight: 700;
}

.results-race-status-cell {
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.results-race-status-badge {
    align-items: center;
    display: inline-flex;
    justify-content: center;
    padding: 0;
    width: fit-content;
}

.results-race-status-ok {
    color: var(--success);
}

.results-race-status-invalid {
    color: var(--danger);
}

.results-race-sidebar {
    display: block;
    gap: 18px;
}

.results-race-side-card {
    display: grid;
    gap: 12px;
    padding: 18px;
}

.results-race-track-image {
    border-radius: 10px;
    display: block;
    height: 160px;
    object-fit: cover;
    width: 100%;
}

.results-race-side-heading {
    color: var(--accent);
    display: block;
    font-size: 12px;
    font-style: italic;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.results-race-side-value {
    color: var(--text-main);
    display: block;
    font-size: 18px;
    font-style: italic;
    font-weight: 700;
}

.results-race-side-pair {
    align-items: baseline;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: grid;
    gap: 4px;
    grid-template-columns: minmax(0, 1fr);
    padding-top: 10px;
}

.results-race-statistics-section {
    display: grid;
    gap: 18px;
    margin-top: 18px;
}

.results-race-stat-card {
    margin-bottom: 0;
}

.results-race-stat-layout {
    align-items: stretch;
    display: grid;
    gap: 18px;
    grid-template-columns: 280px minmax(0, 1fr);
}

.results-race-stat-selector {
    background: var(--card-bg-soft);
    border: 1px solid var(--border);
    border-radius: 12px;
    display: grid;
    gap: 8px;
    max-height: 420px;
    overflow: auto;
    padding: 14px;
}

.results-race-stat-driver-toggle {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    padding-bottom: 8px;
}

.results-race-stat-driver-toggle:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.results-race-stat-chart {
    min-width: 0;
}

.results-dashboard-stack > .results-card {
    margin-bottom: 0;
}

.driver-alias-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.driver-alias-badge {
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent);
    border-radius: 999px;
    color: var(--text-main);
    font-size: 13px;
    font-weight: 800;
    padding: 7px 10px;
}

.driver-profile-grid {
    width: auto;
}

.driver-profile-grid::part(cell),
.driver-profile-grid::part(header-cell) {
    white-space: normal;
}

.driver-profile-grid vaadin-grid-cell-content {
    overflow-wrap: anywhere;
    white-space: normal;
}

.results-filter-stack {
    display: grid;
    gap: 12px;
    margin-bottom: 16px;
    width: auto;
}

.results-filter-row {
    min-width: 0;
    width: auto;
}

.results-filter-row > * {
    min-width: 0;
}

.results-filter-row-secondary {
    align-items: end;
    column-gap: 12px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(140px, 0.7fr) minmax(240px, auto);
}

.results-filter-row-secondary vaadin-text-field {
    min-width: 140px;
    width: 100%;
}

.results-filter-row-secondary vaadin-checkbox {
    align-self: end;
    box-sizing: border-box;
    max-width: 280px;
    min-height: 40px;
    min-width: 240px;
    padding-bottom: 4px;
    width: 100%;
}

.results-filter-row-secondary vaadin-checkbox::part(label) {
    line-height: 1.25;
    white-space: normal;
}

.results-grid,
.results-detail-grid {
    width: auto;
}

.results-grid-block {
    min-height: 360px;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    width: auto;
}

.results-grid,
.results-detail-grid,
.dashboard-session-laps-grid {
    min-width: 0;
}

.results-grid::part(cell),
.results-grid::part(header-cell),
.results-detail-grid::part(cell),
.results-detail-grid::part(header-cell),
.dashboard-session-laps-grid::part(cell),
.dashboard-session-laps-grid::part(header-cell) {
    white-space: nowrap;
}

.results-tabs {
    max-width: 100%;
    overflow-x: auto;
}

.results-detail-header,
.results-overview-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(3, minmax(180px, 1fr));
    margin-bottom: 18px;
    width: auto;
}

.results-race-info-tiles {
    grid-template-columns: repeat(6, minmax(120px, 1fr));
}

.results-info-card {
    background: var(--card-bg-soft);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-sizing: border-box;
    min-height: 64px;
    min-width: 0;
    padding: 13px 15px;
}

.results-info-card-server {
    grid-column: 1 / -1;
}

.results-session-showcase {
    display: grid;
    gap: 16px;
    margin-bottom: 18px;
}

.results-session-hero,
.results-session-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(3, minmax(180px, 1fr));
}

.results-session-result-card {
    display: grid;
    gap: 6px;
}

.results-chart-stack {
    display: grid;
    gap: 10px;
}

.results-chart-note {
    color: var(--text-muted);
    font-size: 0.92rem;
}

.results-tab-content {
    min-height: 380px;
    min-width: 0;
    overflow-x: auto;
    padding-top: 16px;
}

.statistics-chart-summary {
    margin-top: 22px;
}

.statistics-overview-grid {
    display: grid;
    gap: 18px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.statistics-compact-card {
    margin-bottom: 0;
}

.ranking-feature-card {
    background: var(--card-bg);
    border-color: var(--border);
    box-shadow: var(--shadow);
    overflow: hidden;
    position: relative;
}

.ranking-feature-card::before {
    background: linear-gradient(90deg, #8a0a0f 0%, #ff2323 34%, #ffffff 68%, #ff4c4c 100%);
    content: "";
    height: 3px;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}

.ranking-feature-card::after {
    background:
            linear-gradient(120deg, transparent 0 34%, rgba(255, 255, 255, 0.03) 35% 36%, transparent 37% 100%);
    content: "";
    inset: 0;
    pointer-events: none;
    position: absolute;
}

.ranking-feature-card > * {
    position: relative;
    z-index: 1;
}

.ranking-feature-card:nth-of-type(3n + 1) {
    background: var(--card-bg);
    border-color: var(--border);
}

.ranking-feature-card:nth-of-type(3n + 2) {
    background: var(--card-bg);
    border-color: var(--border);
}

.ranking-feature-card:nth-of-type(3n) {
    background: var(--card-bg);
    border-color: var(--border);
}

.ranking-chart-grid {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
}

.ranking-top-stats {
    display: grid;
    gap: 18px;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
}

.ranking-top-stats > * {
    margin-bottom: 0;
}

.ranking-metric-row {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    min-width: 0;
    width: 100%;
}

.ranking-top3-card {
    background:
            radial-gradient(circle at 24% 18%, rgba(250, 204, 21, 0.08), transparent 24%),
            linear-gradient(180deg, rgba(5, 13, 18, 0.98), rgba(6, 20, 27, 0.94));
    border-color: rgba(93, 128, 143, 0.24);
    display: grid;
    gap: 12px;
    padding: 16px 18px;
}

.ranking-top3-card .dashboard-section-title {
    color: #eef7fb;
    font-size: 16px;
    letter-spacing: 0;
    margin: 0 0 2px;
    text-transform: uppercase;
}

.ranking-top3-list {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.ranking-top3-row {
    --rank-accent: #f7c916;
    --rank-soft: rgba(247, 201, 22, 0.15);
    align-items: center;
    background:
            radial-gradient(ellipse at 24% 50%, var(--rank-soft), transparent 32%),
            linear-gradient(90deg, rgba(7, 11, 13, 0.94), rgba(14, 18, 18, 0.92));
    border: 1px solid color-mix(in srgb, var(--rank-accent) 58%, transparent);
    border-radius: 8px;
    box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.06),
            inset 0 -1px 0 rgba(0, 0, 0, 0.42),
            0 10px 24px rgba(0, 0, 0, 0.28);
    box-sizing: border-box;
    display: grid;
    gap: 18px;
    grid-template-columns: 42px 150px minmax(180px, 1fr) minmax(300px, 0.9fr) 54px;
    min-height: 78px;
    min-width: 0;
    overflow: hidden;
    padding: 8px 12px;
    position: relative;
}

.ranking-top3-row::before {
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--rank-accent) 20%, transparent), transparent);
    content: "";
    height: 1px;
    left: 16px;
    position: absolute;
    right: 16px;
    top: 0;
}

.ranking-top3-place-2 {
    --rank-accent: #d8e0e6;
    --rank-soft: rgba(216, 224, 230, 0.12);
    border-color: rgba(151, 170, 181, 0.36);
}

.ranking-top3-place-3 {
    --rank-accent: #f28c39;
    --rank-soft: rgba(242, 140, 57, 0.13);
    border-color: rgba(200, 92, 29, 0.42);
}

.ranking-top3-rank {
    align-items: center;
    border: 3px solid var(--rank-accent);
    border-radius: 50%;
    box-shadow: 0 0 16px color-mix(in srgb, var(--rank-accent) 25%, transparent);
    color: var(--rank-accent);
    display: inline-flex;
    font-size: 22px;
    font-weight: 900;
    height: 32px;
    justify-content: center;
    line-height: 1;
    width: 32px;
}

.ranking-top3-helmet {
    align-self: stretch;
    min-width: 150px;
    position: relative;
}

.ranking-top3-helmet::after {
    background: radial-gradient(ellipse at 50% 78%, color-mix(in srgb, var(--rank-accent) 50%, transparent), transparent 58%);
    bottom: -8px;
    content: "";
    filter: blur(6px);
    height: 24px;
    left: 4px;
    opacity: 0.85;
    position: absolute;
    right: 8px;
}

.ranking-top3-helmet-frame {
    align-items: center;
    display: flex;
    height: 100%;
    justify-content: center;
    min-height: 62px;
    overflow: visible;
    width: 100%;
}

.ranking-driver-helmet-image {
    display: block;
    filter: drop-shadow(0 9px 12px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 13px color-mix(in srgb, var(--rank-accent) 48%, transparent));
    height: 82px;
    margin-left: 0;
    mix-blend-mode: screen;
    object-fit: contain;
    pointer-events: none;
    user-select: none;
    width: 136px;
}

.ranking-top3-identity {
    align-items: start;
    display: grid;
    gap: 8px;
    grid-template-columns: minmax(0, 1fr) max-content;
    justify-content: start;
    min-width: 0;
}

.ranking-top3-name {
    color: #f6fbff;
    font-size: 17px;
    font-weight: 900;
    line-height: 1.1;
    min-width: 0;
    overflow: hidden;
    padding-top: 2px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ranking-metric-name {
    color: var(--text-muted);
    display: block;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.25;
    margin-top: 8px;
    min-width: 0;
    overflow-wrap: anywhere;
}

.ranking-top3-level {
    align-self: start;
    background: color-mix(in srgb, var(--rank-accent) 14%, rgba(6, 10, 12, 0.88));
    border: 1px solid color-mix(in srgb, var(--rank-accent) 30%, transparent);
    border-radius: 4px;
    color: #f4f8fb;
    font-size: 10px;
    font-weight: 900;
    line-height: 1;
    padding: 5px 8px;
    text-transform: uppercase;
}

.ranking-top3-stats {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(4, minmax(48px, 1fr));
    min-width: 0;
}

.ranking-top3-stat {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.ranking-top3-stat-label {
    color: rgba(198, 213, 220, 0.72);
    font-size: 11px;
    font-weight: 900;
    line-height: 1;
    text-transform: uppercase;
}

.ranking-top3-stat-value {
    color: #f9fcff;
    font-size: 14px;
    font-weight: 900;
    line-height: 1;
}

.ranking-top3-award {
    align-items: center;
    color: var(--rank-accent);
    display: flex;
    filter: drop-shadow(0 0 9px color-mix(in srgb, var(--rank-accent) 42%, transparent));
    justify-content: center;
    opacity: 0.94;
}

.ranking-top3-award vaadin-icon {
    height: 30px;
    width: 30px;
}

.ranking-metric-value {
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 800;
}

.ranking-metric-card {
    display: block;
    min-width: 0;
}

.ranking-metric-value {
    color: var(--accent);
    font-size: 28px;
    line-height: 1;
}

.ranking-metric-driver {
    align-items: center;
    display: flex;
    min-height: 58px;
}

.ranking-driver-graphic {
    --helmet-main: #d6e4f0;
    --helmet-accent: var(--accent);
    background:
            radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.92) 0 7%, transparent 8%),
            linear-gradient(145deg, var(--helmet-main), #7d8da3);
    border: 1px solid rgba(214, 228, 240, 0.38);
    border-radius: 50% 50% 44% 44%;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25);
    box-sizing: border-box;
    height: 46px;
    overflow: hidden;
    position: relative;
    width: 46px;
}

.ranking-driver-place-1 {
    --helmet-main: #facc15;
    --helmet-accent: #fff7ad;
}

.ranking-driver-place-2 {
    --helmet-main: #cbd5e1;
    --helmet-accent: #f8fafc;
}

.ranking-driver-place-3 {
    --helmet-main: #fb923c;
    --helmet-accent: #fed7aa;
}

.ranking-driver-place-0 {
    --helmet-main: #94a3b8;
    --helmet-accent: #d6e4f0;
}

.ranking-driver-visor {
    background: linear-gradient(90deg, rgba(15, 23, 42, 0.95), rgba(56, 189, 248, 0.85));
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 999px 999px 999px 10px;
    height: 13px;
    left: 11px;
    position: absolute;
    top: 16px;
    width: 28px;
}

.ranking-driver-stripe {
    background: var(--helmet-accent);
    bottom: 5px;
    left: 21px;
    position: absolute;
    top: 0;
    transform: rotate(12deg);
    width: 5px;
}

.ranking-driver-chin {
    background: rgba(15, 23, 42, 0.28);
    border-radius: 7px 0 0 7px;
    bottom: 6px;
    height: 10px;
    position: absolute;
    right: -1px;
    width: 18px;
}

.ranking-table-layout {
    align-items: start;
    display: grid;
    gap: 18px;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
    width: 100%;
}

.ranking-table-filter-row {
    align-items: end;
    border-bottom: 1px solid rgba(148, 163, 184, 0.18);
    display: grid;
    gap: 14px 16px;
    grid-template-columns: minmax(120px, 150px) minmax(130px, 150px) minmax(130px, 150px) minmax(240px, 1fr);
    margin: 4px 0 14px;
    padding-bottom: 14px;
}

.ranking-table-filter-row vaadin-text-field,
.ranking-table-filter-row vaadin-combo-box {
    width: 100%;
}

.ranking-filter-actions {
    align-items: end;
    display: grid;
    gap: 10px;
    grid-column: 1 / -1;
    grid-template-columns: auto auto auto auto auto;
    justify-content: end;
    min-width: 0;
    margin-top: 4px;
}

.ranking-selection-status {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 900;
    line-height: 1.25;
    min-width: 68px;
    padding: 0 4px 9px 0;
    text-transform: uppercase;
    white-space: nowrap;
}

.ranking-driver-overview {
    margin-top: 14px;
    min-width: 0;
}

.ranking-focus-card {
    background:
            radial-gradient(circle at 10% 10%, rgba(255, 35, 51, 0.15), transparent 24%),
            linear-gradient(135deg, rgba(31, 42, 58, 0.98), rgba(14, 22, 33, 0.96));
    border: 1px solid color-mix(in srgb, var(--accent) 36%, var(--border));
    border-radius: 8px;
    box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.06),
            0 14px 28px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: grid;
    gap: 16px;
    grid-template-columns: minmax(250px, 0.9fr) minmax(260px, 1.1fr) minmax(340px, 1.4fr);
    min-width: 0;
    padding: 16px;
}

.ranking-focus-hero {
    align-items: center;
    display: grid;
    gap: 14px;
    grid-template-columns: 84px minmax(0, 1fr);
    min-width: 0;
}

.ranking-focus-hero .ranking-driver-graphic,
.ranking-focus-hero .ranking-driver-avatar {
    height: 76px;
    max-width: 100%;
    width: 76px;
}

.ranking-focus-identity {
    display: grid;
    gap: 8px;
    justify-items: start;
    min-width: 0;
}

.ranking-focus-name {
    color: var(--text-main);
    display: block;
    font-size: 20px;
    font-weight: 900;
    line-height: 1.1;
    overflow-wrap: anywhere;
}

.ranking-focus-meta {
    color: var(--text-muted);
    display: block;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.3;
    margin-top: 6px;
    overflow-wrap: anywhere;
}

.ranking-focus-bars {
    display: grid;
    gap: 9px;
    min-width: 0;
}

.ranking-focus-bar-row {
    align-items: center;
    display: grid;
    gap: 10px;
    grid-template-columns: 58px minmax(0, 1fr) 52px;
    min-width: 0;
}

.ranking-focus-bar-label,
.ranking-focus-bar-value {
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 900;
    line-height: 1;
    text-transform: uppercase;
}

.ranking-focus-bar-value {
    color: var(--text-main);
    text-align: right;
    text-transform: none;
}

.ranking-focus-bar-track {
    background: rgba(5, 11, 18, 0.64);
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 999px;
    height: 10px;
    overflow: hidden;
}

.ranking-focus-bar-fill {
    background: linear-gradient(90deg, var(--accent), #ffcc66);
    border-radius: inherit;
    display: block;
    height: 100%;
    width: calc(var(--value) * 1%);
}

.ranking-focus-stats {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    min-width: 0;
}

.ranking-focus-stats .results-info-card {
    min-height: 54px;
    padding: 10px 12px;
}

.ranking-driver-summary {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ranking-selected-summary {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.ranking-chart {
    min-height: 300px;
}

.ranking-feature-card .ranking-chart {
    min-height: 340px;
}

.results-detail-grid::part(focused-cell) {
    box-shadow: inset 0 0 0 2px rgba(255, 35, 51, 0.8);
}

.results-detail-grid::part(ranking-grid-selected) {
    background:
            linear-gradient(90deg, rgba(111, 16, 20, 0.92), rgba(82, 18, 25, 0.88));
    color: #fff7f7;
}

.results-detail-grid::part(ranking-grid-focused) {
    background:
            linear-gradient(90deg, rgba(134, 19, 24, 0.96), rgba(103, 23, 31, 0.92));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
    color: #ffffff;
}

.results-detail-grid::part(ranking-grid-selected-focused) {
    background:
            linear-gradient(90deg, rgba(156, 22, 28, 0.98), rgba(122, 24, 33, 0.96));
    box-shadow:
            inset 0 0 0 1px rgba(255, 255, 255, 0.10),
            inset 4px 0 0 rgba(255, 255, 255, 0.92);
}

html[theme~="light-racing"] .ranking-top3-card,
html[data-theme="light-racing"] .ranking-top3-card {
    background:
            radial-gradient(circle at 24% 18%, rgba(250, 204, 21, 0.12), transparent 24%),
            linear-gradient(180deg, #ffffff, #f8fafc);
    border-color: rgba(148, 163, 184, 0.34);
}

html[theme~="light-racing"] .ranking-top3-card .dashboard-section-title,
html[data-theme="light-racing"] .ranking-top3-card .dashboard-section-title,
html[theme~="light-racing"] .ranking-top3-name,
html[data-theme="light-racing"] .ranking-top3-name,
html[theme~="light-racing"] .ranking-focus-name,
html[data-theme="light-racing"] .ranking-focus-name,
html[theme~="light-racing"] .ranking-focus-bar-value,
html[data-theme="light-racing"] .ranking-focus-bar-value {
    color: #111827;
}

html[theme~="light-racing"] .ranking-top3-row,
html[data-theme="light-racing"] .ranking-top3-row {
    background:
            radial-gradient(ellipse at 24% 50%, color-mix(in srgb, var(--rank-accent) 12%, transparent), transparent 32%),
            linear-gradient(90deg, #ffffff, #f8fafc);
    box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.88),
            0 8px 20px rgba(15, 23, 42, 0.08);
}

html[theme~="light-racing"] .ranking-driver-helmet-image,
html[data-theme="light-racing"] .ranking-driver-helmet-image {
    mix-blend-mode: normal;
}

html[theme~="light-racing"] .ranking-top3-level,
html[data-theme="light-racing"] .ranking-top3-level {
    background: color-mix(in srgb, var(--rank-accent) 12%, #ffffff);
    color: #1f2937;
}

html[theme~="light-racing"] .ranking-top3-stat-label,
html[data-theme="light-racing"] .ranking-top3-stat-label,
html[theme~="light-racing"] .ranking-focus-meta,
html[data-theme="light-racing"] .ranking-focus-meta,
html[theme~="light-racing"] .ranking-focus-bar-label,
html[data-theme="light-racing"] .ranking-focus-bar-label {
    color: #64748b;
}

html[theme~="light-racing"] .ranking-top3-stat-value,
html[data-theme="light-racing"] .ranking-top3-stat-value {
    color: #111827;
}

html[theme~="light-racing"] .ranking-focus-card,
html[data-theme="light-racing"] .ranking-focus-card {
    background:
            radial-gradient(circle at 10% 10%, rgba(255, 35, 51, 0.09), transparent 24%),
            linear-gradient(135deg, #ffffff, #f8fafc);
    border-color: rgba(225, 29, 72, 0.22);
    box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.9),
            0 12px 24px rgba(15, 23, 42, 0.08);
}

html[theme~="light-racing"] .ranking-focus-bar-track,
html[data-theme="light-racing"] .ranking-focus-bar-track {
    background: #e2e8f0;
    border-color: rgba(148, 163, 184, 0.34);
}

html[theme~="light-racing"] .results-detail-grid::part(ranking-grid-selected),
html[data-theme="light-racing"] .results-detail-grid::part(ranking-grid-selected) {
    background: linear-gradient(90deg, #fff1f2, #ffe4e6);
    color: #111827;
}

html[theme~="light-racing"] .results-detail-grid::part(ranking-grid-focused),
html[data-theme="light-racing"] .results-detail-grid::part(ranking-grid-focused) {
    background: linear-gradient(90deg, #fee2e2, #ffe4e6);
    box-shadow: inset 0 0 0 1px rgba(225, 29, 72, 0.24);
    color: #111827;
}

html[theme~="light-racing"] .results-detail-grid::part(ranking-grid-selected-focused),
html[data-theme="light-racing"] .results-detail-grid::part(ranking-grid-selected-focused) {
    background: linear-gradient(90deg, #fecdd3, #ffe4e6);
    box-shadow:
            inset 0 0 0 1px rgba(225, 29, 72, 0.26),
            inset 4px 0 0 rgba(225, 29, 72, 0.76);
    color: #111827;
}

.statistics-driver-section {
    margin-top: 18px;
}

.statistics-driver-selector {
    max-height: 520px;
}

.statistics-driver-chart {
    display: grid;
    gap: 14px;
}

.statistics-chart-stack {
    display: grid;
    gap: 14px;
}

.statistics-driver-summary-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.statistics-driver-summary-item,
.statistics-pill {
    background: var(--card-bg-soft);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px 14px;
}

.statistics-summary-line {
    align-items: baseline;
    display: flex;
    gap: 10px;
    justify-content: space-between;
}

.statistics-summary-label {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.statistics-summary-value {
    color: var(--text-main);
    font-size: 13px;
    font-weight: 800;
    text-align: right;
}

.results-empty-text {
    color: var(--text-muted);
    margin: 12px 0 0;
}

.track-list-root {
    gap: 16px;
}

.track-list-content {
    display: grid;
    gap: 18px;
    min-width: 0;
}

.track-list-hero {
    background: #070a0f;
    border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border));
    border-radius: 8px;
    box-shadow: var(--shadow);
    display: grid;
    min-height: 330px;
    overflow: hidden;
    position: relative;
}

.track-list-hero-image {
    grid-area: 1 / 1;
    height: 100%;
    min-height: 330px;
    object-fit: cover;
    width: 100%;
}

.track-list-hero::after {
    background:
            linear-gradient(90deg, rgba(5, 9, 15, 0.96) 0%, rgba(5, 9, 15, 0.84) 22%, transparent 56%),
            linear-gradient(0deg, rgba(5, 9, 15, 0.42), transparent 48%);
    content: "";
    grid-area: 1 / 1;
    pointer-events: none;
}

.track-list-hero-panel {
    align-self: stretch;
    box-sizing: border-box;
    display: grid;
    gap: 14px;
    grid-area: 1 / 1;
    max-width: 520px;
    min-width: 0;
    padding: 34px;
    position: relative;
    z-index: 1;
}

.track-list-hero-title {
    color: #ffffff;
    display: block;
    font-size: clamp(36px, 5vw, 74px);
    font-style: italic;
    font-weight: 950;
    line-height: .9;
    overflow-wrap: anywhere;
    text-transform: uppercase;
}

.track-list-hero-location {
    color: #f4434d;
    display: block;
    font-size: 20px;
    font-weight: 950;
    line-height: 1.1;
    text-transform: uppercase;
}

.track-list-hero-stats {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: auto;
    min-width: 0;
}

.track-list-hero-stats .results-info-card {
    background: rgba(8, 13, 20, 0.72);
    border-color: rgba(255, 255, 255, 0.14);
    min-height: 70px;
}

.track-list-hero-stats .dashboard-info-value {
    overflow-wrap: anywhere;
    white-space: normal;
}

.track-list-filter-row {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: var(--shadow);
    box-sizing: border-box;
    padding: 14px;
}

.track-list-leader-row {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    min-width: 0;
}

.track-list-leader-card {
    background:
            linear-gradient(145deg, color-mix(in srgb, var(--accent) 12%, var(--card-bg)), var(--card-bg));
    border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border));
    border-radius: 8px;
    box-shadow: var(--shadow);
    box-sizing: border-box;
    display: grid;
    gap: 10px;
    min-height: 118px;
    min-width: 0;
    padding: 16px;
}

.track-list-card-detail {
    color: var(--text-muted);
    display: block;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.track-list-grid {
    min-height: 420px;
}

.track-list-driver-cell {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.track-list-driver-name {
    color: var(--text-main);
    font-size: 14px;
    font-weight: 900;
    line-height: 1.15;
    overflow-wrap: anywhere;
}

.track-list-driver-meta {
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 800;
    line-height: 1.2;
}

.results-detail-grid::part(track-list-top-row) {
    background: color-mix(in srgb, var(--accent) 14%, transparent);
}

.track-list-statistics {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    min-width: 0;
}

.track-list-root {
    background:
            radial-gradient(circle at 100% 0%, rgba(22, 163, 170, 0.14), transparent 28%),
            linear-gradient(180deg, #06101a 0%, #07111d 48%, #08131f 100%);
    padding: 18px 22px 26px;
}

.track-list-toolbar {
    align-items: center;
    background: rgba(9, 18, 30, 0.94);
    border: 1px solid rgba(91, 124, 153, 0.28);
    border-radius: 8px;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.32);
    box-sizing: border-box;
    display: grid;
    gap: 12px;
    grid-template-columns: auto minmax(210px, 280px) auto minmax(120px, 1fr) auto;
    margin: 0 0 12px;
    min-height: 56px;
    padding: 10px 14px;
    position: relative;
    top: auto;
    width: 100%;
    z-index: 1;
}

.track-list-toolbar-label {
    color: #f7fafc;
    font-size: 13px;
    font-weight: 900;
    white-space: nowrap;
}

.track-list-toolbar vaadin-combo-box {
    --vaadin-input-field-background: rgba(21, 35, 52, 0.88);
    --vaadin-input-field-border-color: rgba(15, 196, 183, 0.6);
    --vaadin-input-field-value-color: #ffffff;
}

.track-list-live-badge {
    border: 1px solid rgba(34, 197, 94, 0.54);
    border-radius: 6px;
    color: #34d399;
    font-size: 12px;
    font-weight: 900;
    padding: 7px 12px;
}

.track-list-update-text {
    color: #cbd5e1;
    font-size: 13px;
    font-weight: 700;
}

.track-list-refresh-button,
.track-list-reset-button {
    --vaadin-button-background: rgba(12, 22, 35, 0.86);
    --vaadin-button-text-color: #f8fafc;
    border: 1px solid rgba(148, 163, 184, 0.42);
    border-radius: 6px;
    font-size: 12px;
    font-weight: 900;
}

.track-list-content {
    gap: 10px;
    margin-inline: 0;
    max-width: none;
    width: 100%;
}

.track-list-hero {
    border-color: rgba(91, 124, 153, 0.32);
    min-height: 142px;
}

.track-list-hero-image {
    filter: saturate(0.95) contrast(1.05);
    min-height: 142px;
}

.track-list-hero::after {
    background:
            linear-gradient(90deg, rgba(5, 12, 20, 0.95) 0%, rgba(5, 12, 20, 0.66) 42%, rgba(5, 12, 20, 0.20) 78%),
            linear-gradient(0deg, rgba(5, 12, 20, 0.42), transparent 50%);
}

.track-list-hero-panel {
    align-content: center;
    gap: 8px;
    max-width: 760px;
    padding: 22px 24px;
}

.track-list-hero-panel .dashboard-info-label {
    display: none;
}

.track-list-hero-title {
    font-size: clamp(28px, 3vw, 40px);
    font-style: normal;
    letter-spacing: 0;
    text-transform: none;
}

.track-list-hero-location {
    color: #e5e7eb;
    font-size: 14px;
    text-transform: none;
}

.track-list-layout-chips {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}

.track-list-chip {
    background: rgba(15, 23, 42, 0.82);
    border: 1px solid rgba(148, 163, 184, 0.32);
    border-radius: 6px;
    color: #f8fafc;
    font-size: 12px;
    font-weight: 800;
    padding: 7px 12px;
}

.track-list-kpi-row {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.track-list-kpi-card {
    align-items: center;
    background: rgba(10, 20, 33, 0.92);
    border: 1px solid rgba(91, 124, 153, 0.32);
    border-radius: 8px;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.24);
    display: grid;
    gap: 16px;
    grid-template-columns: 58px minmax(0, 1fr);
    min-height: 92px;
    padding: 16px;
}

.track-list-kpi-icon {
    background: rgba(239, 68, 68, 0.16);
    border-radius: 50%;
    box-sizing: border-box;
    color: #ef4444;
    height: 48px;
    padding: 12px;
    width: 48px;
}

.track-list-kpi-blue .track-list-kpi-icon {
    background: rgba(37, 99, 235, 0.18);
    color: #3b82f6;
}

.track-list-kpi-violet .track-list-kpi-icon {
    background: rgba(124, 58, 237, 0.20);
    color: #8b5cf6;
}

.track-list-kpi-orange .track-list-kpi-icon {
    background: rgba(217, 119, 6, 0.20);
    color: #f59e0b;
}

.track-list-kpi-text {
    display: grid;
    gap: 3px;
}

.track-list-kpi-label {
    color: #cbd5e1;
    font-size: 12px;
    font-weight: 800;
}

.track-list-kpi-value {
    color: #ffffff;
    font-size: 28px;
    font-weight: 950;
    line-height: 1;
}

.track-list-kpi-delta {
    color: #34d399;
    font-size: 12px;
    font-weight: 800;
}

.track-list-filter-card {
    background: rgba(10, 20, 33, 0.94);
    border: 1px solid rgba(91, 124, 153, 0.32);
    border-radius: 8px;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.24);
    padding: 10px 12px 12px;
}

.track-list-filter-title {
    color: #f8fafc;
    display: block;
    font-size: 12px;
    font-weight: 900;
    margin-bottom: 6px;
}

.track-list-filter-row {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
}

.track-list-highlight-row {
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(220px, 1.1fr) minmax(300px, 1.5fr) minmax(220px, 1fr) minmax(220px, 1fr);
}

.track-list-leader-card {
    background: rgba(10, 20, 33, 0.94);
    border-color: rgba(91, 124, 153, 0.32);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.24);
    min-height: 86px;
    padding: 14px 16px;
}

.track-list-leader-card .statistics-summary-label {
    color: #f8fafc;
}

.track-list-leader-card .statistics-summary-value {
    color: #ff3f4f;
    font-size: 17px;
    font-weight: 950;
}

.track-list-card-detail {
    color: #cbd5e1;
}

.track-list-root .results-card {
    background: rgba(10, 20, 33, 0.94);
    border-color: rgba(91, 124, 153, 0.32);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.24);
    margin-bottom: 0;
    padding: 10px 12px 12px;
}

.track-list-root .results-card > .dashboard-section-title {
    color: #f8fafc;
    font-size: 13px;
    margin: 0 0 10px;
}

.track-list-grid {
    min-height: 250px;
}

.track-list-statistics {
    gap: 10px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.track-list-chart-panel {
    border: 1px solid rgba(91, 124, 153, 0.24);
    border-radius: 6px;
    min-width: 0;
    padding: 10px;
}

.track-list-chart-title {
    color: #f8fafc;
    display: block;
    font-size: 12px;
    font-weight: 900;
    margin-bottom: 4px;
}

.track-list-chart {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
}

.track-list-root .track-list-hero {
    height: 260px;
    min-height: 260px;
}

.track-list-root .track-list-hero-image {
    grid-area: 1 / 1;
    height: 100%;
    min-height: 260px;
    object-fit: cover;
}

.track-list-root .track-list-hero-panel {
    gap: 8px;
    padding: 28px 26px;
}

.track-list-root .track-list-hero-title {
    font-size: clamp(34px, 4vw, 54px);
}

.track-list-root .track-list-kpi-card {
    grid-template-columns: 48px minmax(0, 1fr);
    min-height: 72px;
    padding: 12px 14px;
}

.track-list-root .track-list-kpi-icon {
    height: 40px;
    padding: 10px;
    width: 40px;
}

.track-list-root .track-list-kpi-value {
    font-size: 24px;
}

.track-list-root .track-list-filter-card {
    padding: 8px 12px 10px;
}

.track-list-root .track-list-filter-row {
    gap: 12px;
}

.track-list-root .track-list-filter-row vaadin-combo-box,
.track-list-root .track-list-filter-row vaadin-text-field {
    --vaadin-input-field-height: 36px;
}

.track-list-root .track-list-filter-row vaadin-combo-box::part(label),
.track-list-root .track-list-filter-row vaadin-text-field::part(label) {
    color: #b7c3d0;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    padding-bottom: 3px;
}

.track-list-root .track-list-reset-button {
    min-height: 36px;
}

.track-list-root .track-list-leader-card {
    min-height: 76px;
    padding: 12px 16px;
}

.track-list-root .track-list-grid {
    min-height: 360px;
}

.track-list-root .results-card {
    padding: 8px 12px 10px;
}

@media (max-width: 600px) {
    .track-list-root {
        padding: 10px;
    }

    .track-list-root .track-list-toolbar {
        grid-template-columns: auto minmax(0, 1fr) auto;
        min-height: 58px;
        position: relative;
        top: auto;
        z-index: 1;
    }

    .track-list-root .track-list-update-text,
    .track-list-root .track-list-refresh-button {
        display: none;
    }

    .track-list-root .track-list-hero {
        height: 220px;
        min-height: 220px;
    }

    .track-list-root .track-list-hero-image {
        min-height: 220px;
    }

    .track-list-root .track-list-highlight-row,
    .track-list-root .track-list-statistics {
        grid-template-columns: minmax(0, 1fr);
    }

    .track-list-root .track-list-kpi-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .track-list-root .track-list-filter-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
    }

    .track-list-root .track-list-reset-button {
        width: 100%;
    }
}

html[theme~="light-racing"] .track-list-root,
html[data-theme="light-racing"] .track-list-root {
    background:
            radial-gradient(circle at 100% 0%, rgba(14, 165, 164, 0.12), transparent 30%),
            linear-gradient(180deg, #eef3f7 0%, #f7fafc 48%, #edf2f7 100%);
}

html[theme~="light-racing"] .track-list-toolbar,
html[data-theme="light-racing"] .track-list-toolbar,
html[theme~="light-racing"] .track-list-kpi-card,
html[data-theme="light-racing"] .track-list-kpi-card,
html[theme~="light-racing"] .track-list-filter-card,
html[data-theme="light-racing"] .track-list-filter-card,
html[theme~="light-racing"] .track-list-leader-card,
html[data-theme="light-racing"] .track-list-leader-card,
html[theme~="light-racing"] .track-list-root .results-card,
html[data-theme="light-racing"] .track-list-root .results-card {
    background: rgba(255, 255, 255, 0.92);
    border-color: rgba(21, 44, 66, 0.16);
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08);
}

html[theme~="light-racing"] .track-list-toolbar-label,
html[data-theme="light-racing"] .track-list-toolbar-label,
html[theme~="light-racing"] .track-list-filter-title,
html[data-theme="light-racing"] .track-list-filter-title,
html[theme~="light-racing"] .track-list-root .results-card > .dashboard-section-title,
html[data-theme="light-racing"] .track-list-root .results-card > .dashboard-section-title,
html[theme~="light-racing"] .track-list-chart-title,
html[data-theme="light-racing"] .track-list-chart-title,
html[theme~="light-racing"] .track-list-leader-card .statistics-summary-label,
html[data-theme="light-racing"] .track-list-leader-card .statistics-summary-label {
    color: #111827;
}

html[theme~="light-racing"] .track-list-update-text,
html[data-theme="light-racing"] .track-list-update-text,
html[theme~="light-racing"] .track-list-kpi-label,
html[data-theme="light-racing"] .track-list-kpi-label,
html[theme~="light-racing"] .track-list-card-detail,
html[data-theme="light-racing"] .track-list-card-detail {
    color: #4b5563;
}

html[theme~="light-racing"] .track-list-kpi-value,
html[data-theme="light-racing"] .track-list-kpi-value {
    color: #111827;
}

html[theme~="light-racing"] .track-list-toolbar vaadin-combo-box,
html[data-theme="light-racing"] .track-list-toolbar vaadin-combo-box {
    --vaadin-input-field-background: rgba(241, 245, 249, 0.96);
    --vaadin-input-field-border-color: rgba(15, 118, 110, 0.42);
    --vaadin-input-field-value-color: #111827;
}

html[theme~="light-racing"] .track-list-chart-panel,
html[data-theme="light-racing"] .track-list-chart-panel {
    border-color: rgba(21, 44, 66, 0.14);
}

.results-raw-json {
    background: #111827;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: #e5e7eb;
    font-family: Consolas, "Courier New", monospace;
    font-size: 13px;
    max-height: 520px;
    overflow: auto;
    padding: 14px;
    white-space: pre;
}

.dashboard-commentary-log,
.dashboard-results-log {
    background: #111827;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: #e5e7eb;
    flex: 1 1 auto;
    font-family: Consolas, "Courier New", monospace;
    font-size: 13px;
    line-height: 1.45;
    min-height: 0;
    overflow: auto;
    overflow-y: auto;
    padding: 14px;
}

.dashboard-commentary-row,
.dashboard-results-row {
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    display: grid;
    gap: 8px;
    grid-template-columns: 72px 150px minmax(360px, max-content);
    min-width: max-content;
    padding: 8px 0;
}

.dashboard-results-row {
    grid-template-columns: 150px minmax(0, 1fr);
}

.dashboard-commentary-row:last-child,
.dashboard-results-row:last-child {
    border-bottom: 0;
}

.dashboard-commentary-time {
    color: #94a3b8;
    white-space: nowrap;
}

.dashboard-commentary-driver {
    color: #cbd5e1;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-commentary-text,
.dashboard-commentary-empty {
    color: #f8fafc;
    overflow: visible;
    text-overflow: clip;
    white-space: nowrap;
}

.dashboard-side-panel {
    display: grid;
    gap: 18px;
    grid-template-rows: 120px 120px 240px;
}

.dashboard-side-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    column-gap: 12px;
    row-gap: 6px;
    align-items: start;
}

.dashboard-side-card .dashboard-info-icon {
    grid-row: 1 / span 2;
}

.dashboard-side-card .dashboard-info-value {
    white-space: normal;
}

.player-gauge {
    --player-gauge-value: 0%;
    align-items: center;
    background:
        radial-gradient(circle at center, var(--acevo-surface) 0 55%, transparent 56%),
        conic-gradient(var(--accent) var(--player-gauge-value), var(--border) 0);
    border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
    border-radius: 50%;
    color: var(--acevo-text);
    display: flex;
    flex-direction: column;
    height: 130px;
    justify-content: center;
    justify-self: center;
    min-width: 130px;
    width: 130px;
    box-shadow: var(--acevo-card-shadow);
}

html[theme~="light-racing"] .player-gauge,
html[data-theme="light-racing"] .player-gauge {
    height: 130px;
    min-width: 130px;
    width: 130px;
}

.player-gauge-value {
    display: block;
    font-size: 32px;
    font-weight: 800;
    line-height: 1;
}

.player-gauge-label {
    color: var(--acevo-muted);
    display: block;
    font-size: 14px;
    line-height: 1.2;
    margin-top: 4px;
}

@media (min-width: 1200px) {
    .server-log-grid {
        grid-template-columns: minmax(0, 1fr);
        align-items: start;
    }

    .server-log-console {
        height: 360px;
    }
}

@media (max-width: 900px) {
    .jfancy-support-story,
    .statistics-overview-grid,
    .ranking-chart-grid,
    .track-list-leader-row,
    .track-list-statistics,
    .ranking-focus-card,
    .ranking-table-layout,
    .ranking-top-stats,
    .ranking-metric-row {
        grid-template-columns: minmax(0, 1fr);
    }

    .jfancy-support-hero,
    .jfancy-support-section,
    .jfancy-support-vision,
    .jfancy-support-thanks {
        padding: 18px;
    }

    .ranking-focus-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .ranking-top3-row {
        align-items: center;
        gap: 8px 10px;
        grid-template-columns: 36px 90px minmax(0, 1fr) 28px;
        min-height: 116px;
        padding: 10px;
    }

    .ranking-top3-rank {
        border-width: 2px;
        font-size: 20px;
        height: 30px;
        width: 30px;
    }

    .ranking-top3-identity {
        align-items: center;
        gap: 6px;
        grid-template-columns: minmax(0, 1fr) max-content;
        width: 100%;
    }

    .ranking-top3-name {
        font-size: 15px;
        line-height: 1.15;
    }

    .ranking-top3-stats {
        grid-column: 1 / -1;
        grid-template-columns: repeat(4, minmax(46px, 1fr));
    }

    .ranking-driver-helmet-image {
        height: 68px;
        margin-left: 0;
        width: 86px;
    }

    .ranking-top3-award {
        justify-content: end;
    }

    .ranking-top3-award vaadin-icon {
        height: 22px;
        width: 22px;
    }

    .dashboard-status-content {
        align-items: center;
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        justify-items: stretch;
        overflow-x: visible;
    }

    .dashboard-player-block {
        flex-basis: auto;
        justify-content: center;
    }

    .dashboard-hero-info-grid {
        flex-basis: auto;
        min-width: 0;
    }

    .dashboard-hero-info-grid,
    html[theme~="light-racing"] .dashboard-hero-info-grid,
    html[data-theme="light-racing"] .dashboard-hero-info-grid {
        grid-template-columns: repeat(2, minmax(150px, 1fr));
    }

    .dashboard-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .driver-hub-hero,
    .driver-hub-main-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .driver-hub-kpi-grid {
        grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
    }

    .driver-hub-chart-grid,
    .driver-hub-profile-form {
        grid-template-columns: minmax(0, 1fr);
    }

    .driver-hub-profile-form vaadin-text-area {
        grid-column: auto;
    }

    .results-detail-header,
    .results-overview-grid,
    .results-session-hero,
    .results-session-grid,
    .driver-profile-overview {
        grid-template-columns: repeat(2, minmax(150px, 1fr));
    }

    .results-filter-row {
        align-items: stretch;
        display: grid;
        gap: 10px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ranking-table-filter-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ranking-filter-actions {
        grid-column: 1 / -1;
        justify-content: end;
    }

    .results-filter-row vaadin-checkbox {
        align-self: end;
        min-height: 40px;
    }

    .results-filter-row-secondary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .results-filter-row-secondary vaadin-checkbox,
    .results-filter-row-secondary vaadin-text-field {
        max-width: none;
        min-width: 0;
    }

    .dashboard-session-stack {
        grid-template-columns: 1fr;
    }

    .dashboard-side-panel {
        grid-template-rows: none;
    }

    .results-race-showcase-header {
        grid-template-columns: minmax(0, 1fr);
        justify-items: start;
    }

    .results-race-showcase-header-text {
        justify-items: start;
    }

    .results-race-showcase-title {
        text-align: left;
    }

    .results-race-hero,
    .results-race-body {
        grid-template-columns: minmax(0, 1fr);
    }

    .results-race-stat-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .results-race-stat-selector {
        max-height: 240px;
    }

    .results-race-standings-header,
    .results-race-standings-row {
        grid-template-columns: 54px minmax(150px, 0.9fr) minmax(170px, 1fr) 130px 120px 70px 96px;
        padding: 12px 14px;
    }

    .track-list-hero {
        min-height: 360px;
    }

    .track-list-hero-panel {
        max-width: none;
    }

    .track-list-hero-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    vaadin-app-layout::part(navbar) {
        min-height: 70px;
    }

    .app-header-content {
        min-height: 70px;
    }
    .app-header-logo {
        min-width: 0;
        width: auto;
    }

    .app-header-logo-image {
        height: 58px;
        max-width: min(280px, calc(100vw - 74px));
        min-width: 0;
        width: auto;
    }

    .server-log-details::part(content) {
        padding: 10px;
    }

    .results-root {
        padding: 10px;
    }

    .driver-profile-root.community-root {
        box-sizing: border-box;
        overflow-x: hidden;
        padding: 10px;
        width: 100%;
    }

    .community-hero,
    .community-tab-content,
    .community-main-tabs,
    .community-search-box,
    .community-suggestions,
    .community-driver-card {
        box-sizing: border-box;
        max-width: 100%;
        width: 100%;
    }

    .community-hero,
    .community-main-tabs,
    .community-tab-content > .driver-profile-card,
    .community-overview-grid,
    .community-activity-grid {
        inline-size: calc(100vw - 20px);
        max-inline-size: calc(100vw - 20px);
    }

    .community-hero,
    .community-login-badge,
    .community-main-tabs,
    .community-tab-content > .driver-profile-card {
        padding: 12px;
    }

    .community-hero-copy h2,
    .community-hero-copy p,
    .community-login-badge span,
    .community-driver-card-name,
    .community-event-meta {
        max-width: calc(100vw - 72px);
        overflow-wrap: anywhere;
        white-space: normal;
    }

    .community-hero-copy .driver-hub-lead,
    .community-tab-content > .driver-profile-card > .results-empty-text {
        max-width: calc(100vw - 72px);
    }

    .community-main-tabs {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .community-main-tab {
        justify-content: center;
        min-width: 0;
        padding-inline: 12px;
    }

    .results-card,
    .results-detail-panel {
        padding: 12px;
    }

    .ranking-focus-card {
        gap: 14px;
        padding: 14px;
    }

    .ranking-top3-card {
        padding: 12px;
    }

    .ranking-top3-row {
        grid-template-columns: 34px 88px minmax(0, 1fr);
        min-height: 126px;
    }

    .ranking-top3-award {
        display: none;
    }

    .ranking-top3-identity {
        grid-template-columns: minmax(0, 1fr);
    }

    .ranking-top3-level {
        justify-self: start;
    }

    .ranking-top3-stats {
        gap: 8px;
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .ranking-top3-stat-label {
        font-size: 10px;
    }

    .ranking-top3-stat-value {
        font-size: 13px;
    }

    .ranking-focus-hero {
        grid-template-columns: 64px minmax(0, 1fr);
    }

    .ranking-focus-hero .ranking-driver-graphic,
    .ranking-focus-hero .ranking-driver-avatar {
        height: 58px;
        width: 58px;
    }

    .ranking-focus-name {
        font-size: 18px;
    }

    .ranking-focus-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ranking-chart {
        min-height: 300px;
    }

    .results-filter-row {
        grid-template-columns: minmax(0, 1fr);
    }

    .ranking-table-filter-row {
        grid-template-columns: minmax(0, 1fr);
    }

    .ranking-filter-actions {
        align-items: stretch;
        display: grid;
        gap: 8px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ranking-selection-status {
        grid-column: 1 / -1;
        padding-bottom: 0;
        white-space: normal;
    }

    .results-filter-row-secondary {
        grid-template-columns: minmax(0, 1fr);
    }

    .track-list-hero {
        min-height: 420px;
    }

    .track-list-hero-image {
        min-height: 420px;
    }

    .track-list-hero::after {
        background:
                linear-gradient(90deg, rgba(5, 9, 15, 0.98) 0%, rgba(5, 9, 15, 0.82) 58%, transparent 100%),
                linear-gradient(0deg, rgba(5, 9, 15, 0.52), transparent 52%);
    }

    .track-list-hero-panel {
        padding: 22px;
    }

    .track-list-hero-title {
        font-size: 36px;
    }

    .track-list-hero-location {
        font-size: 16px;
    }

    .track-list-hero-stats,
    .track-list-statistics {
        grid-template-columns: minmax(0, 1fr);
    }

    .results-tabs vaadin-tab {
        flex: 0 0 auto;
    }

    .server-control-root {
        padding: 10px;
    }

    .server-control-root vaadin-horizontal-layout {
        flex-wrap: wrap;
    }

    .server-control-root vaadin-horizontal-layout > * {
        max-width: 100%;
        min-width: 0;
    }

    .server-log-console {
        font-size: 12px;
        height: 320px;
        padding: 10px;
    }

    .dashboard-commentary-row {
        grid-template-columns: 64px 120px minmax(280px, max-content);
    }

    .player-gauge {
        height: 120px;
        min-width: 120px;
        width: 120px;
    }

    .player-gauge-value {
        font-size: 30px;
    }

    .dashboard-hero-info-grid,
    html[theme~="light-racing"] .dashboard-hero-info-grid,
    html[data-theme="light-racing"] .dashboard-hero-info-grid,
    .dashboard-kpi-grid,
    .driver-hub-kpi-grid,
    .results-detail-header,
    .results-overview-grid,
    .results-session-hero,
    .results-session-grid,
    .driver-profile-overview {
        grid-template-columns: 1fr;
    }

    .driver-hub-root {
        padding: 12px;
    }

    .driver-hub-identity {
        align-items: start;
        grid-template-columns: 76px minmax(0, 1fr);
    }

    .driver-hub-avatar {
        font-size: 22px;
        width: 76px;
    }

    .driver-hub-actions {
        grid-column: 1 / -1;
    }

    .driver-hub-actions vaadin-button {
        flex: 1 1 140px;
        justify-content: center;
        min-width: 0;
    }

    .driver-hub-feed-row {
        grid-template-columns: minmax(0, 1fr);
    }

    .driver-hub-feed-type {
        justify-self: start;
    }

    .driver-hub-chart-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .results-race-showcase-header,
    .results-race-winner,
    .results-race-side-card {
        padding: 14px;
    }

    .results-race-meta {
        grid-template-columns: 1fr;
    }

    .results-race-hero-image {
        display: none;
    }

    .results-race-standings {
        overflow-x: auto;
    }

    .results-race-standings-header,
    .results-race-standings-row {
        min-width: 1040px;
    }
}

@media (min-width: 1200px) {
    .config-field-wrapper {
        flex-basis: calc(33.333% - var(--lumo-space-m));
    }
}

@media (min-width: 800px) and (max-width: 1199px) {
    .config-field-wrapper {
        flex-basis: calc(50% - var(--lumo-space-m));
    }
}

@media (max-width: 799px) {
    .config-field-wrapper {
        flex-basis: 100%;
        max-width: none;
    }
}
vaadin-notification-card[theme~="login-error"] {
    background: transparent;
    color: #ffffff;
}

vaadin-notification-card[theme~="login-error"]::part(overlay) {
    background: #c1121f;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 8px;
    box-shadow: 0 16px 32px rgba(193, 18, 31, 0.28);
    color: #ffffff;
}

vaadin-notification-card[theme~="login-error"]::part(content),
vaadin-notification-card[theme~="login-error"] [slot="middle"] {
    color: #ffffff;
    font-weight: 800;
}

html[theme~="dark-racing"] vaadin-notification-card[theme~="login-error"]::part(overlay),
html[data-theme="dark-racing"] vaadin-notification-card[theme~="login-error"]::part(overlay) {
    background: #a30d18;
    box-shadow: 0 16px 32px rgba(163, 13, 24, 0.34);
}

vaadin-notification-card[theme~="server-action"] {
    color: #ffffff;
}

vaadin-notification-card[theme~="server-action"]::part(overlay) {
    background: #1f2632;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 8px;
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.32);
    color: #ffffff;
}

vaadin-notification-card[theme~="server-action"]::part(content),
vaadin-notification-card[theme~="server-action"] [slot="middle"] {
    color: #ffffff;
    font-weight: 800;
}

vaadin-notification-card[theme~="server-action"][theme~="success"]::part(overlay) {
    border-color: rgba(0, 210, 106, 0.45);
}

vaadin-notification-card[theme~="server-action"][theme~="error"]::part(overlay) {
    border-color: rgba(255, 38, 51, 0.55);
}

.dashboard-server-card-footer {
    border-top: 1px solid var(--border);
    display: grid;
    gap: 16px;
    grid-template-columns: minmax(0, 1fr) auto;
    margin-top: 18px;
    padding-top: 18px;
}

.dashboard-server-live-summary {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-width: 0;
}

.dashboard-server-summary-block {
    background: var(--card-bg-soft);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-sizing: border-box;
    min-width: 0;
    padding: 12px;
}

.dashboard-server-summary-title {
    color: var(--text-muted);
    display: block;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .7px;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.dashboard-server-summary-empty {
    color: var(--text-muted);
    display: block;
    font-size: 13px;
    font-weight: 700;
}

.dashboard-server-top-driver-row,
.dashboard-server-moderation-row {
    align-items: center;
    display: grid;
    gap: 8px;
    min-width: 0;
    padding: 5px 0;
}

.dashboard-server-top-driver-row {
    grid-template-columns: 34px minmax(0, 1fr) 92px;
}

.dashboard-server-moderation-row {
    grid-template-columns: 58px minmax(0, 1fr);
    overflow-x: auto;
    padding-bottom: 4px;
}

.dashboard-server-top-driver-position {
    background: color-mix(in srgb, var(--accent) 15%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 36%, transparent);
    border-radius: 999px;
    color: var(--accent);
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
    padding: 6px 0;
    text-align: center;
}

.dashboard-server-top-driver-name,
.dashboard-server-moderation-text {
    color: var(--text-main);
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
}

.dashboard-server-top-driver-lap,
.dashboard-server-moderation-time {
    color: var(--text-muted);
    font-family: Consolas, "Courier New", monospace;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.dashboard-server-open-button {
    align-self: end;
    background: linear-gradient(90deg, var(--accent), var(--accent-dark));
    color: #ffffff;
    font-weight: 900;
    min-height: 36px;
    padding-inline: 14px;
}

@media (max-width: 900px) {
    .dashboard-server-card-footer {
        grid-template-columns: minmax(0, 1fr);
    }

    .dashboard-server-live-summary {
        grid-template-columns: minmax(0, 1fr);
    }

    .dashboard-server-open-button {
        justify-self: stretch;
    }
}



.server-dashboard-root {
    gap: var(--lumo-space-l);
}

.server-dashboard-header {
    display: grid;
    gap: 18px;
}

.server-dashboard-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--lumo-space-m);
    flex-wrap: wrap;
}

.server-dashboard-chart-grid {
    display: grid;
    gap: 18px;
    grid-template-columns: minmax(0, 1fr);
    min-width: 0;
}

@media (min-width: 361px) and (max-width: 700px) {
    .dashboard-root .dashboard-hero-info-grid,
    html[theme~="light-racing"] .dashboard-root .dashboard-hero-info-grid,
    html[data-theme="light-racing"] .dashboard-root .dashboard-hero-info-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        min-width: 0;
        width: 100%;
    }
}

.results-track-hero {
    align-items: end;
    background-position: center;
    background-size: cover;
    border: 1px solid rgba(91, 124, 153, 0.32);
    border-radius: 8px;
    box-shadow: var(--shadow);
    box-sizing: border-box;
    display: grid;
    min-height: 260px;
    overflow: hidden;
    padding: 30px;
}

.results-track-stage {
    display: grid;
    gap: 14px;
    min-width: 0;
}

.results-track-stage .results-detail-header,
.results-track-stage .results-race-info-tiles {
    margin-bottom: 0;
}

.results-track-stage .results-race-info-tiles {
    grid-template-columns: repeat(3, minmax(160px, 1fr));
}

.results-track-stage .results-info-card {
    min-height: 58px;
    padding: 10px 12px;
}

.results-track-stage .dashboard-info-label {
    font-size: 10px;
    line-height: 1;
}

.results-track-stage .dashboard-info-value {
    font-size: 14px;
    line-height: 1.1;
}

.ranking-root,
.results-view-root,
.statistics-root {
    background:
            radial-gradient(circle at 100% 0%, rgba(22, 163, 170, 0.14), transparent 28%),
            linear-gradient(180deg, #06101a 0%, #07111d 48%, #08131f 100%);
    padding: 18px 22px 26px;
}

.ranking-root .results-detail-panel,
.results-view-root .results-card,
.results-view-root .results-detail-panel,
.statistics-root .results-detail-panel,
.statistics-root .results-card,
.ranking-root .results-card,
.ranking-root .results-info-card {
    background: rgba(10, 20, 33, 0.94);
    border-color: rgba(91, 124, 153, 0.32);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.24);
}

.ranking-root .dashboard-section-title,
.results-view-root .dashboard-section-title,
.statistics-root .dashboard-section-title {
    color: #f8fafc;
}

.ranking-root .results-filter-row,
.statistics-root .results-filter-row,
.results-view-root .results-filter-row {
    background: rgba(10, 20, 33, 0.72);
    border: 1px solid rgba(91, 124, 153, 0.24);
    border-radius: 8px;
    box-sizing: border-box;
    padding: 12px;
}

html[theme~="light-racing"] .ranking-root,
html[data-theme="light-racing"] .ranking-root,
html[theme~="light-racing"] .results-view-root,
html[data-theme="light-racing"] .results-view-root,
html[theme~="light-racing"] .statistics-root,
html[data-theme="light-racing"] .statistics-root {
    background:
            radial-gradient(circle at 100% 0%, rgba(14, 165, 164, 0.12), transparent 30%),
            linear-gradient(180deg, #eef3f7 0%, #f7fafc 48%, #edf2f7 100%);
}

html[theme~="light-racing"] .ranking-root .results-detail-panel,
html[data-theme="light-racing"] .ranking-root .results-detail-panel,
html[theme~="light-racing"] .results-view-root .results-card,
html[data-theme="light-racing"] .results-view-root .results-card,
html[theme~="light-racing"] .results-view-root .results-detail-panel,
html[data-theme="light-racing"] .results-view-root .results-detail-panel,
html[theme~="light-racing"] .statistics-root .results-detail-panel,
html[data-theme="light-racing"] .statistics-root .results-detail-panel,
html[theme~="light-racing"] .statistics-root .results-card,
html[data-theme="light-racing"] .statistics-root .results-card,
html[theme~="light-racing"] .ranking-root .results-card,
html[data-theme="light-racing"] .ranking-root .results-card,
html[theme~="light-racing"] .ranking-root .results-info-card,
html[data-theme="light-racing"] .ranking-root .results-info-card {
    background: rgba(255, 255, 255, 0.92);
    border-color: rgba(21, 44, 66, 0.16);
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08);
}

html[theme~="light-racing"] .ranking-root .dashboard-section-title,
html[data-theme="light-racing"] .ranking-root .dashboard-section-title,
html[theme~="light-racing"] .results-view-root .dashboard-section-title,
html[data-theme="light-racing"] .results-view-root .dashboard-section-title,
html[theme~="light-racing"] .statistics-root .dashboard-section-title,
html[data-theme="light-racing"] .statistics-root .dashboard-section-title {
    color: #111827;
}

.results-track-hero-text {
    display: grid;
    gap: 8px;
    max-width: 820px;
    min-width: 0;
}

.results-track-hero-label {
    color: #f43f5e;
    font-size: 13px;
    font-weight: 950;
    letter-spacing: 0.08em;
    line-height: 1;
    text-transform: uppercase;
}

.results-track-hero-title {
    color: #ffffff;
    display: block;
    font-size: clamp(36px, 4.8vw, 64px);
    font-weight: 950;
    line-height: .92;
    overflow-wrap: anywhere;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.46);
}

.results-track-hero-meta {
    color: rgba(255, 255, 255, 0.88);
    font-size: 15px;
    font-weight: 850;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

html[theme~="light-racing"] .results-track-hero,
html[data-theme="light-racing"] .results-track-hero {
    border-color: rgba(21, 44, 66, 0.16);
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08);
}

.analytics-help-dialog::part(overlay),
vaadin-dialog-overlay::part(overlay) {
    border-radius: 8px;
}

.analytics-help-dialog::part(content),
vaadin-dialog-overlay::part(content) {
    background:
            radial-gradient(circle at 100% 0%, rgba(22, 163, 170, 0.10), transparent 30%),
            var(--card-bg);
    color: var(--text-main);
}

html[theme~="light-racing"] .analytics-help-dialog::part(content),
html[data-theme="light-racing"] .analytics-help-dialog::part(content),
html[theme~="light-racing"] vaadin-dialog-overlay::part(content),
html[data-theme="light-racing"] vaadin-dialog-overlay::part(content) {
    background:
            radial-gradient(circle at 100% 0%, rgba(14, 165, 164, 0.12), transparent 30%),
            #ffffff;
    color: #111827;
}

@media (min-width: 1500px) {
    .track-list-content {
        align-items: stretch;
        display: grid;
        gap: 14px;
        grid-template-columns: repeat(12, minmax(0, 1fr));
    }

    .track-list-content > * {
        grid-column: 1 / -1;
    }

    .track-list-root .track-list-hero {
        grid-column: 1 / 9;
        height: 430px;
        min-height: 430px;
    }

    .track-list-root .track-list-hero-image {
        min-height: 430px;
        object-position: center;
    }

    .track-list-root .track-list-hero-title {
        font-size: clamp(42px, 3.6vw, 68px);
    }

    .track-list-kpi-row {
        align-self: stretch;
        grid-column: 9 / -1;
        grid-template-columns: minmax(0, 1fr);
    }

    .track-list-kpi-card {
        grid-template-columns: 40px minmax(0, 1fr);
        min-height: 0;
        padding: 12px 14px;
    }

    .track-list-kpi-text {
        align-items: baseline;
        column-gap: 10px;
        display: grid;
        grid-template-columns: minmax(82px, .8fr) auto minmax(72px, .7fr);
    }

    .track-list-kpi-value {
        font-size: 30px;
    }

    .track-list-kpi-delta {
        font-size: 13px;
        white-space: nowrap;
    }

    .track-list-kpi-label {
        font-size: 13px;
    }

    .results-view-root .results-detail-panel {
        display: grid;
        gap: 18px;
        grid-template-columns: repeat(12, minmax(0, 1fr));
    }

    .results-view-root .results-track-stage {
        align-items: stretch;
        display: grid;
        gap: 14px;
        grid-column: 1 / -1;
        grid-template-columns: repeat(12, minmax(0, 1fr));
    }

    .results-view-root .results-track-stage .results-track-hero {
        grid-column: 1 / 9;
        min-height: 430px;
    }

    .results-view-root .results-track-stage .results-race-info-tiles,
    .results-view-root .results-track-stage .results-detail-header {
        align-self: start;
        grid-column: 9 / -1;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin-bottom: 0;
    }

    .results-view-root .results-track-stage .results-info-card {
        min-height: 92px;
        padding: 12px;
    }

    .results-view-root .results-track-stage .dashboard-info-label {
        font-size: 10px;
    }

    .results-view-root .results-track-stage .dashboard-info-value {
        font-size: 13px;
        overflow-wrap: anywhere;
    }

    .results-view-root .results-race-showcase {
        grid-column: 1 / -1;
    }

    .results-view-root .results-tabs,
    .results-view-root .results-tab-content,
    .results-view-root .results-race-statistics-section,
    .results-view-root .results-dashboard-stack,
    .results-view-root .results-detail-panel > .results-detail-header:not(.results-race-info-tiles) {
        grid-column: 1 / -1;
    }

    .ranking-top-stats {
        align-items: stretch;
        grid-template-columns: minmax(0, 2fr) minmax(360px, .72fr);
    }

    .ranking-metric-row {
        align-self: stretch;
        grid-template-columns: minmax(0, 1fr);
    }

    .ranking-metric-card {
        align-items: center;
        display: grid;
        gap: 10px;
        grid-template-columns: minmax(112px, 1fr) auto;
        min-height: 0;
        padding: 12px 14px;
    }

    .ranking-metric-name {
        margin-top: 0;
        white-space: nowrap;
    }

    .ranking-metric-value {
        font-size: 22px;
        white-space: nowrap;
    }

    .statistics-root .results-detail-panel {
        display: grid;
        gap: 18px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .statistics-root .results-detail-header,
    .statistics-root .statistics-overview-grid {
        grid-column: 1 / -1;
    }

    .statistics-root .results-detail-panel > .results-card,
    .statistics-root .results-race-stat-card {
        margin-bottom: 0;
        min-width: 0;
    }

    .statistics-root .results-filter-row-secondary {
        grid-template-columns: minmax(120px, .7fr) minmax(120px, .7fr) minmax(180px, 1fr) minmax(180px, 1fr) minmax(220px, 1.1fr) minmax(150px, .7fr);
    }

    .statistics-root .results-filter-row-secondary vaadin-checkbox {
        max-width: none;
        min-width: 0;
    }
}

@media (min-width: 1900px) {
    .dashboard-hero-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dashboard-track-banner {
        min-height: 230px;
    }
}

@media (max-width: 700px) {
    .dashboard-status-content {
        grid-template-columns: minmax(0, 1fr);
    }

    .results-track-hero {
        min-height: 220px;
        padding: 22px;
    }

    .results-track-hero-title {
        font-size: clamp(32px, 10vw, 44px);
    }
}

@media (max-width: 700px) {
    .dashboard-root {
        padding: 10px;
    }

    .dashboard-status-panel {
        border-radius: 10px;
    }

    .dashboard-track-banner {
        gap: 12px;
        min-height: auto;
        padding: 18px 16px;
    }

    .dashboard-track-banner-title {
        font-size: clamp(26px, 9vw, 38px);
        line-height: 1.02;
    }

    .dashboard-track-banner-meta {
        flex-wrap: wrap;
        font-size: 13px;
        overflow: visible;
        row-gap: 4px;
    }

    .dashboard-track-banner-actions {
        align-items: stretch;
        gap: 10px;
        justify-content: start;
        width: 100%;
    }

    .dashboard-track-banner .dashboard-status-badge {
        align-self: start;
        justify-content: center;
        min-width: 132px;
        width: max-content;
    }

    .dashboard-track-banner .dashboard-server-open-button {
        align-self: stretch;
        justify-content: center;
        min-width: 0;
        width: 100%;
    }

    .dashboard-status-panel > .dashboard-status-content,
    .dashboard-status-panel > .dashboard-server-card-footer,
    .server-dashboard-header > .dashboard-server-live-summary {
        padding-inline: 12px;
    }

    .dashboard-status-panel > .dashboard-status-content {
        display: grid;
        gap: 12px;
        grid-template-columns: minmax(0, 1fr);
        overflow-x: visible;
        padding-top: 12px;
    }

    .dashboard-player-block {
        justify-content: center;
    }

    .player-gauge,
    html[theme~="light-racing"] .player-gauge,
    html[data-theme="light-racing"] .player-gauge {
        height: 108px;
        min-width: 108px;
        width: 108px;
    }

    .player-gauge-value {
        font-size: 28px;
    }

    .dashboard-hero-info-grid,
    html[theme~="light-racing"] .dashboard-hero-info-grid,
    html[data-theme="light-racing"] .dashboard-hero-info-grid {
        gap: 10px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        min-width: 0;
        width: 100%;
    }

    .dashboard-info-card {
        min-height: 66px;
        padding: 10px 12px;
    }

    .dashboard-info-value {
        font-size: 13px;
        overflow-wrap: anywhere;
        white-space: normal;
    }

    .dashboard-server-card-footer,
    .dashboard-server-live-summary {
        gap: 10px;
        grid-template-columns: minmax(0, 1fr);
    }

    .server-dashboard-header {
        gap: 12px;
    }

    .server-dashboard-header > .dashboard-server-live-summary {
        padding-bottom: 12px;
    }
}

@media (max-width: 380px) {
    .dashboard-track-banner {
        padding: 16px 12px;
    }

    .dashboard-track-banner-title {
        font-size: clamp(24px, 9vw, 32px);
    }

    .dashboard-hero-info-grid,
    html[theme~="light-racing"] .dashboard-hero-info-grid,
    html[data-theme="light-racing"] .dashboard-hero-info-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .player-gauge,
    html[theme~="light-racing"] .player-gauge,
    html[data-theme="light-racing"] .player-gauge {
        height: 96px;
        min-width: 96px;
        width: 96px;
    }
}

.profile-dialog::part(overlay) {
    max-height: min(620px, calc(100dvh - 24px));
    width: min(560px, calc(100vw - 24px));
}

.profile-dialog::part(content) {
    overflow: auto;
}

.profile-dialog-content {
    box-sizing: border-box;
    max-width: 100%;
    min-width: 0;
    width: min(100%, 520px);
}

.profile-dialog-text {
    display: block;
    line-height: 1.45;
    max-width: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
    white-space: normal;
}

.profile-dialog-actions {
    align-items: stretch;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    max-width: 100%;
    min-width: 0;
}

.profile-dialog-actions vaadin-button {
    flex: 1 1 auto;
    min-width: max-content;
}

.server-setup-selection,
.server-setup-actions {
    box-sizing: border-box;
    flex-wrap: wrap;
    gap: 12px;
    max-width: 100%;
    min-width: 0;
}

.server-setup-selection > *,
.server-setup-actions > * {
    min-width: 0;
}

.server-setup-selection vaadin-combo-box {
    flex: 1 1 240px;
    min-width: 180px;
}

.server-setup-selection vaadin-button,
.server-setup-actions vaadin-button {
    flex: 0 1 auto;
    min-width: max-content;
}

@media (max-width: 700px) {
    .analytics-help-dialog::part(overlay),
    .ranking-help-dialog::part(overlay) {
        max-height: calc(100dvh - 24px);
        width: calc(100vw - 24px);
    }

    .analytics-help-dialog::part(content) {
        padding: 0 16px 16px;
    }

    .analytics-help-dialog::part(footer) {
        padding: 10px 16px 16px;
    }

    .ranking-help-content {
        gap: 14px;
    }

    .ranking-help-hero {
        gap: 12px;
        padding: 14px;
    }

    .ranking-help-hero h2 {
        font-size: 22px;
    }

    .ranking-help-pillars {
        gap: 8px;
    }

    .ranking-help-pillar {
        padding: 10px;
    }

    .ranking-help-layout {
        display: grid;
        gap: 14px;
        grid-template-columns: minmax(0, 1fr);
    }

    .ranking-help-nav {
        border-left: 0;
        border-top: 3px solid var(--lumo-primary-color);
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        position: static;
    }

    .ranking-help-nav-link {
        border-radius: 0;
        min-width: 0;
    }

    .profile-dialog::part(overlay) {
        max-height: calc(100dvh - 24px);
        width: calc(100vw - 24px);
    }

    .profile-dialog::part(content) {
        padding: 0 16px 16px;
    }

    .profile-dialog-content {
        width: 100%;
    }

    .profile-dialog-actions {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        width: 100%;
    }

    .profile-dialog-actions vaadin-button {
        justify-content: center;
        min-width: 0;
        width: 100%;
    }

    .server-setup-selection,
    .server-setup-actions {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        width: 100%;
    }

    .server-setup-selection vaadin-combo-box,
    .server-setup-selection vaadin-button,
    .server-setup-actions vaadin-button {
        box-sizing: border-box;
        min-width: 0;
        width: 100%;
    }
}