:root {
    color-scheme: dark;
    --font-sans:
        Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
        "Segoe UI", sans-serif;

    --bg-page: #030914;
    --bg-surface: #091425;
    --bg-surface-strong: #0d1a2e;
    --bg-surface-muted: #0b1628;
    --border: #1d2c43;
    --border-strong: #2a3b55;
    --text-primary: #f3f6fb;
    --text-secondary: #97a4b9;
    --text-muted: #6f8097;
    --accent: #ff4338;
    --accent-strong: #ff5c52;
    --success: #1fb775;
    --warning: #d5a03a;
    --danger: #ff645d;
    --info: #3f8cff;
    --score: #9b7cff;
    --shadow-card: 0 12px 32px rgb(2 7 13 / 0.38);
    --radius-sm: 0.625rem;
    --radius-md: 0.875rem;
    --app-mobile-nav-height: calc(4.15rem + env(safe-area-inset-bottom));
}

:root[data-theme="light"] {
    color-scheme: light;
    --bg-page: #eef3f9;
    --bg-surface: #ffffff;
    --bg-surface-strong: #f8fbff;
    --bg-surface-muted: #f4f7fc;
    --border: #d7e1ee;
    --border-strong: #c8d3e4;
    --text-primary: #10192a;
    --text-secondary: #5f7089;
    --text-muted: #7485a0;
    --accent: #ec3f35;
    --accent-strong: #d3372f;
    --success: #198a58;
    --warning: #b6811a;
    --danger: #d53b33;
    --info: #256fcd;
    --score: #7557d8;
    --shadow-card: 0 8px 26px rgb(14 28 53 / 0.12);
}

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

html,
body {
    margin: 0;
    min-height: 100%;
}

html {
    background: var(--bg-page);
    color: var(--text-primary);
    text-size-adjust: 100%;
}

body {
    background:
        radial-gradient(
            circle at top right,
            rgb(255 67 56 / 0.13),
            transparent 28rem
        ),
        radial-gradient(
            circle at 22% 8%,
            rgb(64 140 255 / 0.07),
            transparent 24rem
        ),
        var(--bg-page);
    color: var(--text-primary);
    font-family: var(--font-sans);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
select,
textarea {
    color: inherit;
    font: inherit;
}

:where(a, button, input, select, textarea):focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.tc-loader {
    min-height: 100vh;
    display: grid;
    place-content: center;
    gap: 0.95rem;
    padding: 2rem;
    text-align: center;
    background: var(--bg-page);
}

.tc-loader__brand {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin-inline: auto;
}

.tc-loader__mark-wrap {
    width: 2.2rem;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.tc-loader__mark {
    width: 100%;
    height: auto;
}

.tc-loader__mark--dark {
    display: block;
}

.tc-loader__mark--light {
    display: none;
}

:root[data-theme="light"] .tc-loader__mark--dark {
    display: none;
}

:root[data-theme="light"] .tc-loader__mark--light {
    display: block;
}

.tc-loader__copy {
    display: grid;
    justify-items: start;
    gap: 0.14rem;
    text-align: left;
    line-height: 1;
}

.tc-loader__title-row {
    display: inline-flex;
    align-items: center;
    gap: 0.34rem;
}

.tc-loader__title {
    display: inline-flex;
    align-items: baseline;
    gap: 0;
    font-size: 1.18rem;
    font-weight: 700;
}

.tc-loader__title-total {
    color: var(--text-primary);
}

.tc-loader__title-call {
    color: var(--accent);
}

.tc-loader__beta {
    min-height: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--border));
    border-radius: 999px;
    padding: 0.04rem 0.34rem;
    color: color-mix(in srgb, var(--accent) 82%, var(--text-primary));
    background: color-mix(in srgb, var(--accent) 20%, transparent);
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.03em;
}

.tc-loader__subtitle {
    color: color-mix(in srgb, var(--text-secondary) 88%, var(--text-muted));
    font-size: 0.56rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.tc-loader__progress {
    width: min(18rem, 84vw);
    height: 0.375rem;
    margin-inline: auto;
    border-radius: 999px;
    overflow: hidden;
    background: var(--border);
}

.tc-loader__bar {
    display: block;
    height: 100%;
    width: max(8%, var(--blazor-load-percentage, 0%));
    border-radius: inherit;
    background: linear-gradient(90deg, var(--accent), var(--accent-strong));
    transition: width 120ms linear;
}

.tc-loader__text {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.875rem;
    font-weight: 600;
}

.tc-loader__text::after {
    content: var(--blazor-load-percentage-text, "Loading...");
}

.app-shell {
    min-height: 100vh;
}

.app-shell__main {
    min-width: 0;
}

.app-shell__content {
    padding-block: 1.5rem calc(5.65rem + env(safe-area-inset-bottom));
}

.app-shell__article {
    display: grid;
    gap: 1.35rem;
}

.app-shell__meta {
    margin-top: 1.05rem;
    padding-top: 1.2rem;
    border-top: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
}

.app-shell__meta small {
    color: var(--text-muted);
    font-size: 0.72rem;
}

.app-shell__version-btn {
    background: none;
    border: none;
    padding: 0;
    color: var(--text-muted);
    font-size: 0.72rem;
    cursor: pointer;
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 2px;
    transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

.app-shell__version-btn:hover {
    color: var(--text-secondary);
    text-decoration-color: currentColor;
}

.page-container {
    width: 100%;
    max-width: 112rem;
    margin-inline: auto;
    padding-inline: 1rem;
}

.app-topbar {
    position: sticky;
    top: 0;
    z-index: 40;
    border-bottom: 1px solid var(--border);
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--bg-surface) 96%, transparent),
        color-mix(in srgb, var(--bg-surface) 84%, transparent)
    );
    backdrop-filter: blur(14px);
}

.app-topbar__inner {
    width: 100%;
    max-width: 112rem;
    margin-inline: auto;
    padding: 0.62rem 1rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 0.72rem;
    row-gap: 0.5rem;
}

.app-topbar__brand {
    grid-column: 1 / 2;
    width: fit-content;
}

.app-topbar__nav {
    display: none;
    grid-column: 1 / -1;
    align-items: center;
    gap: 0.35rem;
    overflow-x: auto;
    padding-bottom: 0.05rem;
}

.topbar-nav-link {
    min-height: 2.2rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border-radius: 0;
    border: 0;
    border-bottom: 2px solid transparent;
    padding-inline: 0.7rem;
    color: var(--text-secondary);
    font-size: 0.88rem;
    font-weight: 600;
    white-space: nowrap;
}

.topbar-nav-link:hover {
    color: var(--text-primary);
}

.topbar-nav-link.active {
    color: var(--text-primary);
    border-bottom-color: var(--accent);
}

.app-topbar__controls {
    grid-column: 2 / 3;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.45rem;
}

.app-topbar__controls .theme-toggle {
    display: none;
}

.app-mobile-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 45;
    height: var(--app-mobile-nav-height);
    border-top: 1px solid var(--border);
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--bg-surface) 98%, var(--bg-page)),
        color-mix(in srgb, var(--bg-surface) 94%, var(--bg-page))
    );
    backdrop-filter: blur(14px);
    padding: 0.34rem max(0.72rem, env(safe-area-inset-left))
        calc(0.36rem + env(safe-area-inset-bottom))
        max(0.72rem, env(safe-area-inset-right));
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 0.35rem;
}

.app-mobile-nav__link {
    min-height: 3.45rem;
    border-top: 2px solid transparent;
    border-radius: 0.4rem;
    display: grid;
    place-items: center;
    gap: 0.2rem;
    color: var(--text-secondary);
    font-size: 0.72rem;
    font-weight: 600;
    text-align: center;
}

.app-mobile-nav__link:hover {
    color: var(--text-primary);
}

.app-mobile-nav__link.active {
    color: var(--accent);
    border-top-color: var(--accent);
}

.app-mobile-nav__link .app-icon {
    opacity: 0.92;
}

.app-logo {
    display: inline-flex;
    align-items: center;
    gap: 0.56rem;
    min-width: 0;
}

.app-logo__mark--dark {
    display: block;
}

.app-logo__mark--light {
    display: none;
}

:root[data-theme="light"] .app-logo__mark--dark {
    display: none;
}

:root[data-theme="light"] .app-logo__mark--light {
    display: block;
}

.app-logo__mark-wrap {
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.app-logo__mark-wrap--md {
    width: 2.05rem;
}

.app-logo__mark-wrap--lg {
    width: 3.2rem;
}

.app-logo__mark-wrap--xl {
    width: 4.4rem;
}

.app-logo__mark {
    width: 100%;
    height: auto;
}

.app-logo__copy {
    min-width: 0;
    display: grid;
    gap: 0.12rem;
    line-height: 1;
}

.app-logo__title-row {
    display: inline-flex;
    align-items: center;
    gap: 0.34rem;
}

.app-logo__title {
    display: inline-flex;
    align-items: baseline;
    gap: 0;
    font-size: 1.14rem;
    font-weight: 700;
    letter-spacing: 0;
}

.app-logo__title-total {
    color: var(--text-primary);
}

.app-logo__title-call {
    color: var(--accent);
}

.app-logo__subtitle {
    color: color-mix(in srgb, var(--text-secondary) 88%, var(--text-muted));
    font-size: 0.56rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    white-space: nowrap;
}

.app-logo__beta {
    min-height: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--border));
    border-radius: 999px;
    padding: 0.04rem 0.36rem;
    color: color-mix(in srgb, var(--accent) 82%, var(--text-primary));
    background: color-mix(in srgb, var(--accent) 20%, transparent);
    font-size: 0.59rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    line-height: 1;
}

.theme-toggle,
.language-switcher {
    border: 1px solid var(--border);
    border-radius: 0.65rem;
    background: color-mix(in srgb, var(--bg-surface) 88%, transparent);
}

.theme-toggle {
    min-height: 2rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.62rem;
    color: var(--text-primary);
    font-size: 0.78rem;
    font-weight: 600;
}

.theme-toggle:hover {
    border-color: var(--border-strong);
}

.theme-toggle__dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 999px;
    background: var(--accent);
}

.theme-toggle__text {
    line-height: 1;
}

.language-switcher {
    display: inline-flex;
    padding: 0.12rem;
}

.language-switcher__button {
    min-width: 1.8rem;
    min-height: 1.8rem;
    border: 0;
    border-radius: 0.48rem;
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.74rem;
    font-weight: 700;
}

.language-switcher__button:hover {
    color: var(--text-primary);
}

.language-switcher__button--active {
    background: linear-gradient(180deg, var(--accent-strong), var(--accent));
    color: #fff;
}

.app-button {
    min-height: 2.7rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    padding-inline: 0.95rem;
    color: var(--text-primary);
    font-size: 0.92rem;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition:
        background-color 130ms ease,
        border-color 130ms ease,
        color 130ms ease,
        transform 130ms ease;
}

.app-button:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.app-button--full {
    width: 100%;
}

.app-button--sm {
    min-height: 2.2rem;
    padding-inline: 0.78rem;
    font-size: 0.84rem;
}

.app-button--md {
    font-size: 0.92rem;
}

.app-button--lg {
    min-height: 3rem;
    padding-inline: 1.25rem;
    font-size: 1.05rem;
}

.app-button--primary {
    color: #fff;
    background: linear-gradient(180deg, var(--accent-strong), var(--accent));
}

.app-button--primary:hover {
    transform: translateY(-1px);
}

.app-button--secondary {
    border-color: var(--border);
    background: color-mix(in srgb, var(--bg-surface) 82%, transparent);
}

.app-button--secondary:hover {
    border-color: var(--border-strong);
    background: color-mix(in srgb, var(--bg-surface-strong) 84%, transparent);
}

.app-button--ghost {
    color: var(--text-secondary);
    background: transparent;
}

.app-button--ghost:hover {
    color: var(--text-primary);
    background: color-mix(in srgb, var(--bg-surface) 75%, transparent);
}

.app-button--subtle {
    border-color: var(--border);
    background: color-mix(in srgb, var(--bg-surface-muted) 90%, transparent);
}

.app-card {
    position: relative;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--bg-surface) 90%, transparent);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

.app-card--pad-none {
    padding: 0;
}

.app-card--pad-sm {
    padding: 0.9rem;
}

.app-card--pad-md {
    padding: 1.1rem;
}

.app-card--pad-lg {
    padding: 1.35rem;
}

.app-badge {
    min-height: 1.58rem;
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    border: 1px solid var(--border);
    padding-inline: 0.65rem;
    font-size: 0.78rem;
    font-weight: 700;
}

.app-badge--neutral {
    background: color-mix(in srgb, var(--bg-surface-muted) 90%, transparent);
    color: var(--text-secondary);
}

.app-badge--success {
    border-color: color-mix(in srgb, var(--success) 36%, var(--border));
    color: color-mix(in srgb, var(--success) 84%, var(--text-primary));
    background: color-mix(in srgb, var(--success) 20%, transparent);
}

.app-badge--warning {
    border-color: color-mix(in srgb, var(--warning) 36%, var(--border));
    color: color-mix(in srgb, var(--warning) 84%, var(--text-primary));
    background: color-mix(in srgb, var(--warning) 20%, transparent);
}

.app-badge--danger {
    border-color: color-mix(in srgb, var(--danger) 36%, var(--border));
    color: color-mix(in srgb, var(--danger) 85%, var(--text-primary));
    background: color-mix(in srgb, var(--danger) 22%, transparent);
}

.app-badge--accent {
    border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
    color: color-mix(in srgb, var(--accent) 85%, var(--text-primary));
    background: color-mix(in srgb, var(--accent) 20%, transparent);
}

.app-icon {
    display: inline-block;
    vertical-align: -0.125em;
    flex-shrink: 0;
}

.competition-status-badge__content {
    display: inline-flex;
    align-items: center;
    gap: 0.32rem;
}

.competition-status-badge__icon {
    opacity: 0.95;
}

.app-breadcrumbs__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.app-breadcrumbs__item {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--text-muted);
    font-size: 0.86rem;
}

.app-breadcrumbs__divider {
    color: color-mix(in srgb, var(--text-muted) 70%, transparent);
    display: inline-flex;
    align-items: center;
}

.app-breadcrumbs__divider-icon {
    opacity: 0.9;
}

.app-breadcrumbs__link {
    color: var(--text-secondary);
}

.app-breadcrumbs__link:hover {
    color: var(--text-primary);
}

.app-breadcrumbs__current {
    color: var(--text-primary);
    font-weight: 600;
}

.app-page-header {
    display: grid;
    gap: 1rem;
}

.app-page-header__main {
    display: grid;
    gap: 0.68rem;
}

.app-page-header__eyebrow {
    margin: 0;
    color: var(--accent);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.app-page-header__content {
    display: grid;
    gap: 0.3rem;
}

.app-page-header__title {
    margin: 0;
    font-size: clamp(1.7rem, 3.8vw, 2.55rem);
    line-height: 1.05;
    font-weight: 700;
}

.app-page-header__description {
    margin: 0;
    max-width: 62ch;
    color: var(--text-secondary);
    font-size: 0.98rem;
}

.app-page-header__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.app-page-header__aside {
    display: grid;
    gap: 0.65rem;
}

.app-section {
    display: grid;
    gap: 0.85rem;
}

.app-section--surface {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--bg-surface) 90%, transparent);
    box-shadow: var(--shadow-card);
    padding: 1.15rem;
}

.app-section__header {
    display: grid;
    gap: 0.65rem;
}

.app-section__intro {
    display: grid;
    gap: 0.28rem;
}

.app-section__eyebrow {
    margin: 0;
    color: var(--accent);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.app-section__title {
    margin: 0;
    font-size: 1.95rem;
    line-height: 1.08;
    font-weight: 700;
}

.app-section__description {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.95rem;
}

.app-section__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.app-stat-card {
    display: grid;
    gap: 0.5rem;
}

.app-stat-card__head {
    display: flex;
    align-items: center;
    gap: 0.62rem;
}

.app-stat-card__icon-wrap {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--border));
    background: color-mix(in srgb, var(--accent) 16%, transparent);
    color: var(--accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.app-stat-card__main {
    min-width: 0;
    display: grid;
    gap: 0.18rem;
}

.app-stat-card__label {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.95rem;
    font-weight: 500;
}

.app-stat-card__value {
    margin: 0;
    font-size: 2.1rem;
    line-height: 0.95;
    font-weight: 700;
}

.app-stat-card__description {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.85rem;
}

.app-loading-state {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

.app-loading-state__dot {
    width: 0.72rem;
    height: 0.72rem;
    border-radius: 999px;
    background: var(--accent);
    animation: loading-pulse 1.2s ease infinite;
}

@keyframes loading-pulse {
    0%,
    100% {
        opacity: 0.4;
        transform: scale(0.9);
    }
    50% {
        opacity: 1;
        transform: scale(1.1);
    }
}

.app-loading-state__text {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.92rem;
    font-weight: 600;
}

.app-empty-state-card {
    text-align: center;
}

.app-empty-state {
    display: grid;
    justify-items: center;
    gap: 0.65rem;
    max-width: 30rem;
    margin-inline: auto;
}

.app-empty-state__mark {
    width: 2.75rem;
    height: 2.75rem;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: color-mix(in srgb, var(--bg-surface-muted) 90%, transparent);
    color: var(--accent);
    font-weight: 700;
}

.app-empty-state__content {
    display: grid;
    gap: 0.26rem;
}

.app-empty-state__title {
    margin: 0;
    font-size: 1.16rem;
}

.app-empty-state__description {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.92rem;
}

.app-error-state-card {
    border-color: color-mix(in srgb, var(--danger) 40%, var(--border));
}

.app-error-state {
    display: grid;
    gap: 0.35rem;
}

.app-error-state__title {
    margin: 0;
    color: color-mix(in srgb, var(--danger) 75%, var(--text-primary));
    font-size: 1.12rem;
}

.app-error-state__description {
    margin: 0;
    color: color-mix(in srgb, var(--danger) 58%, var(--text-primary));
    font-size: 0.92rem;
}

.home-hero-panel {
    position: relative;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: linear-gradient(180deg, rgb(7 15 29 / 0.9), rgb(5 12 24 / 0.9));
    overflow: hidden;
    display: grid;
    min-height: clamp(22rem, 112vw, 29.5rem);
    box-shadow: var(--shadow-card);
}

.home-hero-panel__content {
    position: relative;
    z-index: 1;
    padding: 1.4rem 1.25rem 1.25rem;
    display: grid;
    gap: 0.9rem;
    align-content: start;
    max-width: min(28rem, 92%);
}

.home-hero-panel__eyebrow {
    display: none;
    margin: 0;
    color: var(--accent);
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.home-hero-panel__title {
    margin: 0;
    font-size: clamp(2.35rem, 11vw, 3.45rem);
    line-height: 0.97;
    font-weight: 700;
    max-width: 12ch;
}

.home-hero-panel__title span {
    color: var(--accent);
}

.home-hero-panel__description {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.98rem;
    max-width: 29ch;
}

.home-hero-panel__cta {
    width: fit-content;
}

.home-hero-panel__cta-content {
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
}

.home-hero-panel__points {
    display: none;
    gap: 0.45rem;
    color: var(--text-secondary);
    font-size: 0.93rem;
}

.home-hero-panel__points > span {
    display: inline-flex;
    align-items: center;
    gap: 0.44rem;
}

.home-hero-panel__media {
    position: absolute;
    inset: 0;
    min-height: 0;
    background:
        linear-gradient(
            90deg,
            rgb(5 12 24 / 0.97) 0%,
            rgb(5 12 24 / 0.88) 34%,
            rgb(5 12 24 / 0.42) 58%,
            rgb(5 12 24 / 0.14) 73%,
            transparent 100%
        ),
        linear-gradient(
            180deg,
            rgb(4 11 22 / 0.06) 0%,
            rgb(4 11 22 / 0.58) 100%
        ),
        url("/assets/hero/totalcall-hero-main.webp") 74% 82% / cover no-repeat;
}

.home-stat-grid {
    display: grid;
    gap: 0.9rem;
}

.home-stat-grid .app-card {
    border-color: var(--border);
    background: color-mix(in srgb, var(--bg-surface) 86%, transparent);
}

.home-competitions-section .app-section__header {
    gap: 0.35rem;
}

.home-competitions-section .app-section__title {
    font-size: clamp(1.75rem, 3vw, 2.2rem);
}

.home-competitions-section .app-section__description {
    font-size: 1rem;
}

.competition-grid {
    display: grid;
    gap: 0.9rem;
}

.competition-card {
    position: relative;
    min-height: 20.5rem;
    display: grid;
    gap: 0.8rem;
    overflow: hidden;
    border-color: color-mix(in srgb, var(--border) 88%, transparent);
    background: color-mix(in srgb, var(--bg-surface) 82%, transparent);
}

.competition-card__media {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(
            90deg,
            rgb(5 12 24 / 0.92) 0%,
            rgb(5 12 24 / 0.78) 34%,
            rgb(5 12 24 / 0.45) 62%,
            rgb(5 12 24 / 0.3) 100%
        ),
        linear-gradient(180deg, rgb(3 8 16 / 0.05) 0%, rgb(3 8 16 / 0.76) 100%),
        var(--competition-card-bg-image, none),
        url("/assets/competitions/default-card-bg.webp");
    background-size: auto, auto, cover, cover;
    background-position:
        center, center, var(--competition-card-bg-position, center), center;
    background-repeat: no-repeat;
    transform: scale(1.01);
}

.competition-card__content,
.competition-card__status,
.competition-card__main,
.competition-card__actions {
    position: relative;
    z-index: 1;
}

.competition-card__content {
    display: grid;
    gap: 0.72rem;
    min-height: 100%;
}

.competition-card__status .app-badge {
    min-height: 1.62rem;
    padding-inline: 0.62rem;
    font-size: 0.78rem;
}

.competition-card__status .competition-status-badge__content {
    gap: 0.34rem;
}

.competition-card__status .competition-status-badge__content::before {
    content: "";
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 999px;
    background: currentColor;
}

.competition-card__status .competition-status-badge__icon {
    display: none;
}

.competition-card__main {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.72rem;
    align-items: stretch;
}

.competition-card__identity {
    min-width: 0;
    display: grid;
    grid-template-columns: 4.45rem minmax(0, 1fr);
    gap: 0.88rem;
    align-items: center;
}

.competition-card__logo {
    width: 4.45rem;
    aspect-ratio: 1 / 1;
    border-radius: 999px;
    border: 2px solid color-mix(in srgb, var(--border-strong) 76%, transparent);
    background: rgb(4 11 22 / 0.66);
    box-shadow: 0 0 0 1px rgb(255 255 255 / 0.05) inset;
    overflow: hidden;
    display: grid;
    place-items: center;
}

.competition-card__logo-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.competition-card__logo-fallback {
    color: color-mix(in srgb, var(--accent) 86%, var(--text-primary));
}

.competition-card__copy {
    min-width: 0;
    display: grid;
    gap: 0.38rem;
}

.competition-card__title {
    margin: 0;
    font-size: clamp(2rem, 5vw, 2.34rem);
    line-height: 1.02;
    font-weight: 700;
}

.competition-card__description {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.32;
    max-width: 34ch;
}

.competition-card__divider {
    width: 100%;
    border-top: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
}

.competition-card__meta {
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.72rem;
    min-width: 0;
    align-content: start;
}

.competition-card__meta div {
    display: grid;
    justify-items: start;
    gap: 0.14rem;
    text-align: left;
}

.competition-card__meta dt {
    color: color-mix(in srgb, var(--text-secondary) 88%, var(--text-muted));
    font-size: 0.8rem;
    font-weight: 500;
}

.competition-card__meta-label {
    display: inline-flex;
    align-items: center;
    gap: 0.32rem;
}

.competition-card__meta-label .app-icon {
    display: inline-block;
}

.competition-card__meta dd {
    margin: 0;
    color: var(--text-primary);
    font-size: 1.02rem;
    line-height: 1;
    font-weight: 700;
}

.competition-card__actions {
    margin-top: auto;
}

.competition-card__action-content {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
}

@media (max-width: 580px) {
    .app-logo__subtitle {
        display: none;
    }

    .app-logo__title {
        font-size: 1.04rem;
    }

    .competition-card__meta {
        grid-template-columns: 1fr;
        gap: 0.58rem;
    }
}

.competition-meta {
    margin: 0;
    display: grid;
    gap: 0.65rem;
}

.competition-meta div {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    border-bottom: 1px solid var(--border);
    padding-bottom: 0.6rem;
}

.competition-meta div:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.competition-meta dt {
    color: var(--text-muted);
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.competition-meta__label {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.competition-meta dd {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 700;
}

.competition-page-nav {
    display: flex;
    gap: 0.45rem;
    overflow-x: auto;
    padding: 0.25rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--bg-surface) 84%, transparent);
}

.competition-page-nav__link {
    min-height: 2.32rem;
    display: inline-flex;
    align-items: center;
    border-radius: 0.55rem;
    padding-inline: 0.9rem;
    color: var(--text-secondary);
    font-size: 0.86rem;
    font-weight: 700;
    white-space: nowrap;
}

.competition-page-nav__link:hover {
    background: color-mix(in srgb, var(--bg-surface-muted) 88%, transparent);
}

.competition-page-nav__link--active {
    color: #fff;
    background: linear-gradient(180deg, var(--accent-strong), var(--accent));
}

.competition-overview-layout {
    display: grid;
    gap: 0.82rem;
}

.competition-overview-hero {
    position: relative;
    min-height: clamp(20rem, 58vw, 24rem);
}

.competition-overview-hero__media {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(
            90deg,
            rgb(5 12 24 / 0.95) 0%,
            rgb(5 12 24 / 0.86) 30%,
            rgb(5 12 24 / 0.56) 58%,
            rgb(5 12 24 / 0.3) 100%
        ),
        linear-gradient(180deg, rgb(3 8 16 / 0.08) 0%, rgb(3 8 16 / 0.74) 100%),
        var(--competition-overview-bg-image, none),
        url("/assets/competitions/default-card-bg.webp");
    background-size: auto, auto, cover, cover;
    background-position:
        center, center, var(--competition-overview-bg-position, center), center;
    background-repeat: no-repeat;
}

.competition-overview-hero__content,
.competition-overview-hero__badge {
    position: relative;
    z-index: 1;
}

.competition-overview-hero__content {
    display: grid;
    gap: 0.9rem;
    max-width: min(34rem, 100%);
}

.competition-overview-hero__content > .app-badge {
    width: fit-content;
    justify-self: start;
}

.competition-overview-hero__title {
    margin: 0;
    font-size: clamp(2.25rem, 6vw, 4rem);
    line-height: 0.98;
}

.competition-overview-hero__description {
    margin: 0;
    color: var(--text-secondary);
    font-size: 1.06rem;
    max-width: 34ch;
}

.competition-overview-hero__meta {
    margin: 0;
    display: grid;
    gap: 0.62rem;
}

.competition-overview-hero__meta div {
    display: grid;
    gap: 0.2rem;
}

.competition-overview-hero__meta dt {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--text-secondary);
    font-size: 0.86rem;
}

.competition-overview-hero__meta dd {
    margin: 0;
    font-size: 1.06rem;
    font-weight: 700;
}

.competition-overview-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.58rem;
}

.competition-overview-hero__action-content {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.competition-overview-hero__badge {
    position: absolute;
    right: 1.1rem;
    bottom: 1.1rem;
    width: 5.2rem;
    height: 5.2rem;
    border-radius: 999px;
    border: 2px solid color-mix(in srgb, var(--border-strong) 76%, transparent);
    background: rgb(4 11 22 / 0.72);
    box-shadow: 0 0 0 1px rgb(255 255 255 / 0.06) inset;
    color: color-mix(in srgb, var(--accent) 88%, var(--text-primary));
    display: grid;
    place-items: center;
    overflow: hidden;
}

.competition-overview-hero__badge img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.competition-overview-side {
    display: grid;
    align-content: start;
    gap: 0.6rem;
}

.competition-overview-side__item {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--bg-surface-muted) 84%, transparent);
    padding: 0.72rem 0.78rem;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.64rem;
    align-items: center;
}

.competition-overview-side__icon {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border));
    background: color-mix(in srgb, var(--accent) 18%, transparent);
    color: var(--accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.competition-overview-side__item p {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.82rem;
}

.competition-overview-side__item strong {
    font-size: 1.22rem;
    line-height: 1.1;
}

.competition-overview-modules__grid {
    display: grid;
    gap: 0.72rem;
}

.competition-overview-module {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--bg-surface-muted) 84%, transparent);
    padding: 0.88rem;
    display: grid;
    gap: 0.68rem;
}

.competition-overview-module__icon {
    width: 3.1rem;
    height: 3.1rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border));
    background: color-mix(in srgb, var(--accent) 18%, transparent);
    color: var(--accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.competition-overview-module__content {
    display: grid;
    gap: 0.3rem;
}

.competition-overview-module__content h3 {
    margin: 0;
    font-size: 1.16rem;
}

.competition-overview-module__content p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.91rem;
}

.competition-overview-module__content small {
    width: fit-content;
    border: 1px solid var(--border);
    border-radius: 0.45rem;
    padding: 0.22rem 0.48rem;
    color: var(--text-muted);
    font-size: 0.76rem;
    font-weight: 600;
}

.review-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.62rem;
}

.prediction-review-page {
    --prediction-action-bar-offset: calc(var(--app-mobile-nav-height) - 1px);
    display: grid;
    gap: 1rem;
    padding-bottom: calc(var(--app-mobile-nav-height) + 5.4rem);
}

/* Review header */
.review-header {
    display: grid;
    gap: 0.6rem;
}

.review-header__main {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--bg-surface-strong) 94%, transparent) 0%,
        color-mix(in srgb, var(--bg-surface) 94%, transparent) 60%,
        color-mix(in srgb, var(--accent) 8%, var(--bg-surface)) 100%);
    padding: 1.2rem 1.3rem;
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.review-header__intro {
    display: grid;
    gap: 0.36rem;
}

.review-header__eyebrow {
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.7rem;
    font-weight: 700;
    color: color-mix(in srgb, var(--accent) 82%, var(--text-secondary));
}

.review-header__title {
    margin: 0;
    font-size: clamp(1.6rem, 3.4vw, 2.4rem);
    line-height: 1.05;
}

.review-header__competition {
    margin: 0;
    font-size: 1rem;
    color: var(--text-primary);
    font-weight: 600;
}

.review-header__description {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
    max-width: 46ch;
}

.review-header__meta {
    display: grid;
    gap: 0.5rem;
}

.review-header__meta-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.5rem;
    align-items: center;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--bg-surface-muted) 88%, transparent);
    padding: 0.55rem 0.7rem;
}

.review-header__meta-icon {
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--bg-surface) 90%, transparent);
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.review-header__meta-label {
    display: block;
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-secondary);
}

.review-header__meta-item strong {
    font-size: 0.94rem;
    color: var(--text-primary);
}

/* Review stats */
.review-stats {
    display: grid;
    gap: 0.7rem;
}

.review-stats__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.7rem;
}

.review-stats__card {
    height: 100%;
}

.review-stats__card--success .app-stat-card__icon-wrap {
    border-color: color-mix(in srgb, var(--success) 40%, var(--border));
    background: color-mix(in srgb, var(--success) 16%, transparent);
    color: color-mix(in srgb, var(--success) 88%, var(--text-primary));
}

.review-stats__card--warning .app-stat-card__icon-wrap {
    border-color: color-mix(in srgb, var(--warning) 40%, var(--border));
    background: color-mix(in srgb, var(--warning) 16%, transparent);
    color: color-mix(in srgb, var(--warning) 88%, var(--text-primary));
}

.review-stats__card--muted .app-stat-card__icon-wrap {
    color: var(--text-secondary);
}

.review-stats__notice {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.6rem;
    align-items: center;
}

.review-stats__notice .review-stats__notice-hint {
    font-weight: 500;
    color: color-mix(in srgb, var(--text-secondary) 90%, var(--text-primary));
    font-size: 0.78rem;
    grid-column: 2 / 4;
    grid-row: 2;
}

.review-stats__notice-icon {
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 999px;
    border: 1px solid currentColor;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.notice--success {
    border-color: color-mix(in srgb, var(--success) 44%, var(--border));
    background: color-mix(in srgb, var(--success) 16%, transparent);
    color: color-mix(in srgb, var(--success) 88%, var(--text-primary));
}

.review-stats__progress {
    height: 0.42rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--bg-surface-muted) 88%, transparent);
    overflow: hidden;
    border: 1px solid var(--border);
}

.review-stats__progress > span {
    display: block;
    height: 100%;
    background: linear-gradient(
        90deg,
        color-mix(in srgb, var(--accent) 70%, var(--success)) 0%,
        var(--success) 100%);
    transition: width 200ms ease;
}

/* Review modules section */
.review-modules {
    display: grid;
    gap: 0.7rem;
}

.review-modules__head {
    display: grid;
    gap: 0.18rem;
}

.review-modules__title {
    margin: 0;
    font-size: 1rem;
}

.review-modules__description {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.86rem;
}

.review-modules__list {
    display: grid;
    gap: 0.8rem;
}

/* Module card */
.review-module {
    display: grid;
    gap: 0.7rem;
}

.review-module--complete {
    border-color: color-mix(in srgb, var(--success) 30%, var(--border));
}

.review-module--in-progress {
    border-color: color-mix(in srgb, var(--warning) 30%, var(--border));
}

.review-module__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.8rem;
    align-items: start;
}

.review-module__identity {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.7rem;
    align-items: center;
}

.review-module__icon-wrap {
    width: 2.3rem;
    height: 2.3rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--bg-surface-muted) 88%, transparent);
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.review-module__icon-wrap--complete {
    border-color: color-mix(in srgb, var(--success) 40%, var(--border));
    background: color-mix(in srgb, var(--success) 16%, transparent);
    color: color-mix(in srgb, var(--success) 88%, var(--text-primary));
}

.review-module__icon-wrap--in-progress {
    border-color: color-mix(in srgb, var(--warning) 40%, var(--border));
    background: color-mix(in srgb, var(--warning) 16%, transparent);
    color: color-mix(in srgb, var(--warning) 88%, var(--text-primary));
}

.review-module__title {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.2;
}

.review-module__description {
    margin: 0.18rem 0 0;
    color: var(--text-secondary);
    font-size: 0.86rem;
}

.review-module__meta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.review-module__cta {
    flex-direction: row-reverse;
}

.review-module__metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
}

.review-module__metric {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--bg-surface-muted) 80%, transparent);
    padding: 0.55rem 0.7rem;
    display: grid;
    gap: 0.18rem;
}

.review-module__metric--warning {
    border-color: color-mix(in srgb, var(--warning) 40%, var(--border));
    background: color-mix(in srgb, var(--warning) 12%, transparent);
}

.review-module__metric-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-secondary);
}

.review-module__metric-value {
    display: inline-flex;
    align-items: baseline;
    gap: 0.18rem;
    font-size: 1rem;
    color: var(--text-primary);
}

.review-module__metric-value strong {
    font-size: 1.18rem;
}

.review-module__progress {
    height: 0.3rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--bg-surface-muted) 88%, transparent);
    overflow: hidden;
    border: 1px solid var(--border);
}

.review-module__progress > span {
    display: block;
    height: 100%;
    background: var(--success);
    transition: width 200ms ease;
}

.review-module__empty {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.86rem;
    padding: 0.6rem;
    border: 1px dashed var(--border);
    border-radius: var(--radius-sm);
}

.review-module__sections-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    padding-top: 0.2rem;
    border-top: 1px solid var(--border);
    padding-top: 0.6rem;
}

.review-module__sections-summary {
    color: var(--text-secondary);
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
}

.review-module__sections-toggles {
    display: inline-flex;
    gap: 0.3rem;
}

.review-module__toggle {
    appearance: none;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: transparent;
    color: var(--text-secondary);
    padding: 0.3rem 0.6rem;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}

.review-module__toggle:hover {
    color: var(--text-primary);
    border-color: var(--border-strong);
    background: color-mix(in srgb, var(--bg-surface-muted) 84%, transparent);
}

.review-module__section-group {
    margin: 0.5rem 0 0;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-secondary);
    font-weight: 700;
}

.review-module__section-list {
    display: grid;
    gap: 0.42rem;
}

/* Section accordion */
.review-section {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--bg-surface-muted) 86%, transparent);
    overflow: hidden;
}

.review-section--complete {
    border-color: color-mix(in srgb, var(--success) 24%, var(--border));
}

.review-section--in-progress {
    border-color: color-mix(in srgb, var(--warning) 30%, var(--border));
}

.review-section--open {
    background: color-mix(in srgb, var(--bg-surface) 92%, transparent);
}

.review-section__head {
    appearance: none;
    border: none;
    background: transparent;
    width: 100%;
    text-align: left;
    color: var(--text-primary);
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto auto;
    gap: 0.6rem;
    align-items: center;
    padding: 0.62rem 0.74rem;
    cursor: pointer;
    font: inherit;
}

.review-section__head:hover {
    background: color-mix(in srgb, var(--bg-surface) 90%, transparent);
}

.review-section__status-dot {
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 999px;
    border: 1px solid var(--border-strong);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.review-section__status-dot--complete {
    background: var(--success);
    border-color: var(--success);
    color: #fff;
}

.review-section__status-dot--in-progress {
    border-color: color-mix(in srgb, var(--warning) 70%, var(--border-strong));
    background: color-mix(in srgb, var(--warning) 26%, transparent);
}

.review-section__head-text {
    display: grid;
    gap: 0.1rem;
    min-width: 0;
}

.review-section__title {
    font-size: 0.94rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.2;
}

.review-section__group {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-secondary);
}

.review-section__count {
    font-variant-numeric: tabular-nums;
    font-size: 0.86rem;
    color: var(--text-secondary);
    font-weight: 600;
    min-width: 3.2rem;
    text-align: right;
}

.review-section--complete .review-section__count {
    color: color-mix(in srgb, var(--success) 80%, var(--text-primary));
}

.review-section__chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.4rem;
    height: 1.4rem;
    color: var(--text-secondary);
    transition: transform 180ms ease;
}

.review-section--open .review-section__chevron {
    transform: rotate(90deg);
}

.review-section__body {
    padding: 0.62rem 0.74rem 0.85rem;
    border-top: 1px solid var(--border);
    display: grid;
    gap: 0.55rem;
}

.review-section__hint {
    margin: 0;
    font-size: 0.82rem;
    color: color-mix(in srgb, var(--warning) 80%, var(--text-primary));
}

.review-section__empty {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.6rem;
    padding: 0.62rem 0.74rem;
    border: 1px dashed var(--border);
    border-radius: var(--radius-sm);
}

.review-section__empty p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.86rem;
}

.review-section__answer {
    margin: 0;
    color: var(--text-primary);
    font-size: 0.92rem;
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--bg-surface) 92%, transparent);
}

.review-section__footer {
    display: flex;
    justify-content: flex-end;
}

/* Pick table */
.review-pick-table {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: color-mix(in srgb, var(--bg-surface) 94%, transparent);
}

.review-pick-table__head,
.review-pick-table__row {
    display: grid;
    grid-template-columns: 2.6rem minmax(0, 1.5fr) minmax(0, 0.9fr) minmax(0, 1.2fr);
    gap: 0.5rem;
    align-items: center;
    padding: 0.5rem 0.7rem;
}

.review-pick-table__head {
    background: color-mix(in srgb, var(--bg-surface-muted) 90%, transparent);
    border-bottom: 1px solid var(--border);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-secondary);
    font-weight: 700;
}

.review-pick-table__row + .review-pick-table__row {
    border-top: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
}

.review-pick-table__row--empty {
    background: color-mix(in srgb, var(--bg-surface-muted) 70%, transparent);
    color: var(--text-secondary);
}

.review-pick-table__col--rank {
    font-variant-numeric: tabular-nums;
}

.review-pick-table__rank {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.6rem;
    height: 1.6rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--bg-surface-muted) 88%, transparent);
    color: var(--text-primary);
    font-weight: 700;
    font-size: 0.82rem;
    padding-inline: 0.36rem;
}

.review-pick-table__rank--muted {
    background: transparent;
    color: var(--text-secondary);
    border-style: dashed;
}

.review-pick-table__athlete {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
}

.review-pick-table__name {
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.review-pick-table__flag {
    font-size: 1.1rem;
    line-height: 1;
}

.review-pick-table__placeholder {
    color: var(--text-secondary);
    font-style: italic;
    font-size: 0.85rem;
}

.review-pick-table__total {
    font-size: 0.96rem;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

.review-pick-table__total span {
    color: var(--text-secondary);
    font-size: 0.74rem;
    font-weight: 600;
    margin-left: 0.18rem;
}

.review-pick-table__muted {
    color: var(--text-secondary);
}

.review-pick-table__lifts {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.3rem 0.55rem;
    font-variant-numeric: tabular-nums;
    font-size: 0.82rem;
    color: var(--text-primary);
}

.review-pick-table__lifts em {
    font-style: normal;
    font-weight: 700;
    color: var(--text-secondary);
    margin-right: 0.22rem;
}

@media (max-width: 720px) {
    .review-header__main {
        grid-template-columns: minmax(0, 1fr);
    }

    .review-stats__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .review-module__head {
        grid-template-columns: minmax(0, 1fr);
    }

    .review-module__metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .review-pick-table__head {
        display: none;
    }

    .review-pick-table__row {
        grid-template-columns: 2.4rem minmax(0, 1fr);
        grid-template-areas:
            "rank athlete"
            "rank total"
            "rank lifts";
        row-gap: 0.2rem;
        padding: 0.55rem 0.7rem;
    }

    .review-pick-table__col--rank { grid-area: rank; }
    .review-pick-table__col--athlete { grid-area: athlete; }
    .review-pick-table__col--total { grid-area: total; }
    .review-pick-table__col--lifts { grid-area: lifts; }
}

.prediction-header {
    display: grid;
    gap: 0.72rem;
}

.prediction-header__main {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--bg-surface) 90%, transparent);
    padding: 1rem;
    display: grid;
    gap: 0.5rem;
}

.prediction-header__main h1 {
    margin: 0;
    font-size: clamp(1.72rem, 4vw, 2.8rem);
    line-height: 1;
}

.prediction-header__main p {
    margin: 0;
    color: var(--text-secondary);
}

.prediction-header__status {
    display: grid;
    gap: 0.18rem;
    align-content: center;
}

.prediction-header__status p {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.36rem;
    color: var(--text-muted);
    font-size: 0.82rem;
}

.prediction-header__status strong {
    font-size: 1.02rem;
}

.prediction-header__status span {
    color: var(--success);
    font-size: 0.84rem;
    font-weight: 600;
}

.prediction-journey-header {
    display: grid;
    gap: 0.58rem;
}

.prediction-back-link {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 0.36rem;
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-weight: 600;
}

.prediction-back-link:hover {
    color: var(--text-primary);
}

.prediction-back-link__icon {
    transform: rotate(180deg);
}

.prediction-journey-header__main {
    display: grid;
    gap: 0.7rem;
}

.prediction-journey-header__identity {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--bg-surface) 90%, transparent);
    padding: 1rem;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.72rem;
    align-items: center;
}

.prediction-journey-header__mark {
    width: 2.8rem;
    height: 2.8rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--accent) 44%, var(--border));
    background: color-mix(in srgb, var(--accent) 16%, transparent);
    color: var(--accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.prediction-journey-header__mark img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.prediction-journey-header__identity h1 {
    margin: 0;
    font-size: clamp(2rem, 5vw, 3.1rem);
    line-height: 0.98;
}

.prediction-journey-header__identity p {
    margin: 0.34rem 0 0;
    color: var(--text-secondary);
    font-size: 0.98rem;
}

.prediction-journey-header__status {
    display: grid;
    gap: 0.16rem;
    align-content: center;
}

.prediction-journey-header__status p {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.34rem;
    color: var(--text-muted);
    font-size: 0.82rem;
}

.prediction-journey-header__status strong {
    font-size: 1.02rem;
}

.prediction-journey-header__status span {
    color: var(--success);
    font-size: 0.84rem;
    font-weight: 600;
}

.prediction-step-strip {
    list-style: none;
    margin: 0;
    padding: 0.4rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--bg-surface) 84%, transparent);
    display: grid;
    gap: 0.4rem;
}

.prediction-step-strip__item {
    min-width: 0;
}

.prediction-step-strip--wizard {
    grid-auto-flow: column;
    grid-auto-columns: minmax(11.5rem, 1fr);
    overflow-x: auto;
}

.prediction-step-strip__button {
    width: 100%;
    min-height: 3.05rem;
    border: 1px solid var(--border);
    border-radius: 0.58rem;
    background: color-mix(in srgb, var(--bg-surface-muted) 84%, transparent);
    padding: 0.45rem 0.58rem;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0.55rem;
    text-align: left;
    color: inherit;
    cursor: pointer;
}

.prediction-step-strip__button:hover {
    border-color: var(--border-strong);
}

.prediction-step-strip__button--active {
    border-color: color-mix(in srgb, var(--accent) 58%, var(--border));
    background: color-mix(in srgb, var(--accent) 18%, var(--bg-surface));
}

.prediction-step-strip__number {
    width: 1.72rem;
    height: 1.72rem;
    display: inline-grid;
    place-items: center;
    border-radius: 999px;
    border: 1px solid var(--border-strong);
    color: var(--text-primary);
    font-size: 0.82rem;
    font-weight: 700;
    flex-shrink: 0;
}

.prediction-step-strip__button--active .prediction-step-strip__number {
    border-color: color-mix(in srgb, var(--accent) 70%, var(--border));
    background: color-mix(in srgb, var(--accent) 28%, transparent);
}

.prediction-step-strip__item strong {
    display: block;
    font-size: 0.86rem;
    line-height: 1.1;
}

.prediction-step-strip__item small {
    color: var(--text-muted);
    font-size: 0.76rem;
}

.prediction-step-strip--types {
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

.prediction-layout {
    display: grid;
    gap: 0.8rem;
}

.prediction-layout__main,
.group-list,
.review-list,
.answer-list,
.stack,
.choice-list {
    display: grid;
    gap: 0.6rem;
}

.prediction-wizard-layout {
    display: grid;
    gap: 0.8rem;
}

.prediction-wizard-panel {
    display: grid;
}

.prediction-wizard-panel__actions {
    padding: 0.82rem 0.96rem;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.prediction-wizard-preview {
    display: grid;
    gap: 0.72rem;
}

.prediction-wizard-preview__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.42rem;
}

.prediction-wizard-preview__item {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--bg-surface-muted) 87%, transparent);
    padding: 0.56rem 0.62rem;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.52rem;
    align-items: center;
}

.prediction-wizard-preview__rank {
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--accent) 52%, var(--border));
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    color: var(--accent);
    font-size: 0.78rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.prediction-wizard-preview__content {
    min-width: 0;
    display: grid;
    gap: 0.12rem;
}

.prediction-wizard-preview__content strong {
    font-size: 0.9rem;
    overflow-wrap: anywhere;
}

.prediction-wizard-preview__content small {
    color: var(--text-secondary);
    font-size: 0.8rem;
}

.prediction-category-strip {
    padding: 0.62rem 0.72rem;
    border-bottom: 1px solid var(--border);
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(9.2rem, 1fr);
    gap: 0.45rem;
    overflow-x: auto;
}

.prediction-category-strip__button {
    min-height: 2.65rem;
    border: 1px solid var(--border);
    border-radius: 0.58rem;
    background: color-mix(in srgb, var(--bg-surface-muted) 84%, transparent);
    color: var(--text-secondary);
    padding: 0.4rem 0.52rem;
    text-align: left;
    display: grid;
    gap: 0.08rem;
    cursor: pointer;
}

.prediction-category-strip__button:hover {
    color: var(--text-primary);
    border-color: var(--border-strong);
}

.prediction-category-strip__button strong {
    font-size: 0.84rem;
    line-height: 1.1;
}

.prediction-category-strip__button small {
    font-size: 0.75rem;
}

.prediction-category-strip__button--active {
    color: var(--text-primary);
    border-color: color-mix(in srgb, var(--accent) 58%, var(--border));
    background: color-mix(in srgb, var(--accent) 16%, var(--bg-surface));
}

.prediction-group__header--workspace h2 {
    margin-top: 0.32rem;
}

.ranking-dnd {
    display: grid;
    gap: 0.72rem;
}

.ranking-dnd__slots,
.ranking-dnd__shortlist-list {
    display: grid;
    gap: 0.5rem;
}

.ranking-dnd__slot {
    border: 1px dashed color-mix(in srgb, var(--border-strong) 74%, transparent);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--bg-surface-muted) 83%, transparent);
    padding: 0.5rem 0.58rem;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.52rem;
    align-items: center;
    min-height: 3.1rem;
}

.ranking-dnd__slot--filled {
    border-style: solid;
}

.ranking-dnd__slot-rank {
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--accent) 52%, var(--border));
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    color: var(--accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.76rem;
    font-weight: 700;
}

.ranking-dnd__slot-empty,
.ranking-dnd__slot-athlete {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.5rem;
    align-items: center;
}

.ranking-dnd__slot-empty .app-icon {
    color: var(--text-muted);
}

.ranking-dnd__slot-empty strong,
.ranking-dnd__slot-athlete strong {
    display: block;
    font-size: 0.9rem;
    line-height: 1.15;
    overflow-wrap: anywhere;
}

.ranking-dnd__slot-empty small,
.ranking-dnd__slot-athlete small {
    color: var(--text-secondary);
    font-size: 0.8rem;
}

.ranking-dnd__slot-athlete {
    cursor: grab;
}

.ranking-dnd__remove {
    width: 1.8rem;
    height: 1.8rem;
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    background: color-mix(in srgb, var(--bg-surface) 88%, transparent);
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.ranking-dnd__remove:hover {
    color: var(--text-primary);
    border-color: var(--border-strong);
}

.ranking-dnd__shortlist {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--bg-surface-muted) 86%, transparent);
    padding: 0.62rem;
    display: grid;
    gap: 0.56rem;
}

.ranking-dnd__shortlist-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
}

.ranking-dnd__shortlist-header h4 {
    margin: 0;
    font-size: 0.95rem;
}

.ranking-dnd__shortlist-header small {
    color: var(--text-secondary);
    font-size: 0.8rem;
}

.ranking-dnd__shortlist-list {
    max-height: 26rem;
    overflow-y: auto;
    padding-right: 0.12rem;
}

.ranking-dnd__shortlist-item {
    min-height: 2.9rem;
    border: 1px solid var(--border);
    border-radius: 0.58rem;
    background: color-mix(in srgb, var(--bg-surface) 90%, transparent);
    color: var(--text-primary);
    padding: 0.46rem 0.56rem;
    text-align: left;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.55rem;
    align-items: center;
    cursor: grab;
}

.ranking-dnd__shortlist-item:hover {
    border-color: var(--border-strong);
    background: color-mix(in srgb, var(--bg-surface-muted) 90%, transparent);
}

.ranking-dnd__shortlist-item strong {
    display: block;
    font-size: 0.9rem;
    line-height: 1.12;
    overflow-wrap: anywhere;
}

.ranking-dnd__shortlist-item small {
    color: var(--text-secondary);
    font-size: 0.8rem;
}

.ranking-dnd__shortlist-item span {
    color: var(--text-secondary);
    font-size: 0.82rem;
    font-weight: 600;
    white-space: nowrap;
}

.prediction-sidebar {
    height: fit-content;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--bg-surface) 90%, transparent);
    box-shadow: var(--shadow-card);
    padding: 1rem;
}

.prediction-sidebar > h2 {
    margin: 0 0 0.72rem;
    font-size: 1.04rem;
}

.prediction-sidebar__secondary-action {
    margin-top: 0.6rem;
}

.prediction-summary-card {
    display: grid;
    gap: 0.48rem;
}

.prediction-summary-card__header {
    display: grid;
    gap: 0.16rem;
}

.prediction-summary-card__label {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}

.prediction-summary-card__value {
    margin: 0;
    font-size: 1.45rem;
    line-height: 1;
    font-weight: 700;
}

.prediction-summary-card__description {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.8rem;
}

.progress-track {
    width: 100%;
    height: 0.48rem;
    border-radius: 999px;
    overflow: hidden;
    background: var(--border);
}

.progress-track span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--accent), var(--accent-strong));
}

.meta-list {
    margin: 0;
    display: grid;
    gap: 0.56rem;
}

.meta-list div {
    display: flex;
    justify-content: space-between;
    gap: 0.55rem;
    border-bottom: 1px solid var(--border);
    padding-bottom: 0.5rem;
}

.meta-list div:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.meta-list dt {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--text-muted);
    font-size: 0.76rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.meta-list dd {
    margin: 0;
    text-align: right;
    font-size: 0.84rem;
    font-weight: 700;
}

.prediction-group {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--bg-surface) 90%, transparent);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

.prediction-group__header {
    padding: 0.98rem;
    border-bottom: 1px solid var(--border);
    background: color-mix(in srgb, var(--bg-surface-muted) 86%, transparent);
}

.prediction-group__header h2 {
    margin: 0.36rem 0 0.1rem;
    font-size: 1.04rem;
}

.prediction-group__header p:last-child {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.prediction-group__questions {
    display: grid;
}

.prediction-question + .prediction-question {
    border-top: 1px solid var(--border);
}

.prediction-group__mode {
    min-height: 1.5rem;
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--border));
    background: color-mix(in srgb, var(--accent) 22%, transparent);
    color: color-mix(in srgb, var(--accent) 88%, var(--text-primary));
    padding-inline: 0.58rem;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.category-podium-board {
    display: grid;
}

.category-podium-board__tabs-wrap {
    border-bottom: 1px solid var(--border);
    background: color-mix(in srgb, var(--bg-surface-muted) 88%, transparent);
    padding: 0.66rem;
}

.category-podium-board__tabs {
    display: grid;
    gap: 0.42rem;
}

.category-podium-board__tab {
    display: grid;
    gap: 0.18rem;
    min-height: 3rem;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: transparent;
    padding: 0.45rem 0.58rem;
    text-align: left;
    color: var(--text-secondary);
}

.category-podium-board__tab:hover {
    background: color-mix(in srgb, var(--bg-surface) 84%, transparent);
}

.category-podium-board__tab--active {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--bg-surface) 92%, transparent);
    color: var(--text-primary);
}

.category-podium-board__tab-title {
    font-size: 0.86rem;
    font-weight: 700;
}

.category-podium-board__tab-state {
    font-size: 0.74rem;
    color: var(--text-muted);
}

.category-podium-board__content {
    min-width: 0;
}

.question-shell {
    display: grid;
    gap: 0.82rem;
    padding: 0.92rem;
}

.question-shell__heading {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.question-shell__heading h3 {
    margin: 0;
    font-size: 0.98rem;
}

.question-shell__text p {
    margin: 0.42rem 0 0;
    color: var(--text-secondary);
    font-size: 0.88rem;
}

.question-badge {
    min-height: 1.45rem;
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    border: 1px solid var(--border);
    padding-inline: 0.54rem;
    background: color-mix(in srgb, var(--bg-surface-muted) 86%, transparent);
    color: var(--text-muted);
    font-size: 0.7rem;
    font-weight: 700;
}

.inline-fields {
    display: grid;
    gap: 0.55rem;
}

.field {
    display: grid;
    gap: 0.38rem;
    color: var(--text-secondary);
    font-size: 0.84rem;
    font-weight: 600;
}

.field input,
.field select,
.control {
    width: 100%;
    min-height: 2.55rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--bg-surface) 90%, transparent);
    color: var(--text-primary);
    padding: 0.5rem 0.64rem;
    font-size: 0.88rem;
}

.field input:focus-visible,
.field select:focus-visible,
.control:focus-visible {
    border-color: var(--accent);
}

.choice-row {
    min-height: 2.55rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--bg-surface) 90%, transparent);
    padding: 0.5rem 0.64rem;
    font-size: 0.88rem;
}

.choice-row:hover {
    background: color-mix(in srgb, var(--bg-surface-muted) 90%, transparent);
}

.choice-row input {
    width: 1rem;
    height: 1rem;
    accent-color: var(--accent);
}

.segmented {
    display: inline-grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.segmented__button {
    min-height: 2.5rem;
    border: 0;
    border-left: 1px solid var(--border);
    background: color-mix(in srgb, var(--bg-surface) 90%, transparent);
    color: var(--text-secondary);
    padding-inline: 0.82rem;
    font-size: 0.86rem;
    font-weight: 700;
}

.segmented__button:first-child {
    border-left: 0;
}

.segmented__button--active {
    color: #fff;
    background: linear-gradient(180deg, var(--accent-strong), var(--accent));
}

.validation-list {
    list-style: none;
    margin: 0;
    padding: 0.22rem 0 0.22rem 0.62rem;
    border-left: 3px solid var(--danger);
    color: var(--danger);
    font-size: 0.82rem;
}

.notice {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0.74rem 0.86rem;
    font-size: 0.88rem;
    font-weight: 600;
}

.notice--warning {
    border-color: color-mix(in srgb, var(--warning) 42%, var(--border));
    background: color-mix(in srgb, var(--warning) 16%, transparent);
    color: color-mix(in srgb, var(--warning) 88%, var(--text-primary));
}

.local-note,
.save-status {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.answer-row,
.group-list__item {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--bg-surface-muted) 88%, transparent);
    padding: 0.74rem;
    display: grid;
    gap: 0.5rem;
}

.answer-row h3,
.group-list__item h3 {
    margin: 0 0 0.14rem;
    font-size: 0.96rem;
}

.answer-row p,
.group-list__item p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.86rem;
}

.prediction-shell {
    --prediction-action-bar-offset: calc(var(--app-mobile-nav-height) - 1px);
    --prediction-bottom-bar-space: calc(var(--app-mobile-nav-height) + 5.4rem);
    --prediction-rail-bottom: calc(var(--app-mobile-nav-height) + 5.4rem);
    display: grid;
    gap: 0.85rem;
    padding-bottom: var(--prediction-bottom-bar-space);
}

.prediction-shell__frame {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.82rem;
    align-items: start;
    align-content: start;
}

.prediction-shell__left-rail,
.prediction-shell__summary-rail {
    display: none;
}

.prediction-shell__left-rail,
.prediction-shell__left-rail-inner,
.prediction-shell__main-area,
.prediction-shell__top-row,
.prediction-shell__content-row,
.prediction-shell__center-column,
.prediction-shell__summary-rail-content,
.prediction-shell__module {
    min-width: 0;
}

.prediction-shell__center-column {
    display: grid;
    gap: 0.8rem;
    align-content: start;
}

.prediction-shell__main-area,
.prediction-shell__content-row {
    display: grid;
    gap: 0.82rem;
    align-content: start;
}

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

.prediction-shell__left-rail-inner {
    display: grid;
    gap: 0.62rem;
}

.prediction-shell__summary-rail {
    position: relative;
}

.prediction-shell__summary-rail-content {
    height: 100%;
}

.prediction-shell__summary-panel-wrap {
    min-width: 0;
}

.prediction-shell-header {
    display: grid;
    gap: 0.5rem;
}

.prediction-shell-header__main {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--bg-surface) 90%, transparent);
    padding: 0.78rem 0.86rem 0.66rem;
    display: grid;
    gap: 0.46rem;
}

.prediction-shell-header__summary {
    display: grid;
    gap: 0.58rem;
}

.prediction-shell-header__identity {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.66rem;
    align-items: center;
}

.prediction-shell-header__mark {
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--accent) 44%, var(--border));
    background: color-mix(in srgb, var(--accent) 16%, transparent);
    color: var(--accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.prediction-shell-header__mark img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.prediction-shell-header__text {
    min-width: 0;
    display: grid;
    align-content: center;
    gap: 0.2rem;
}

.prediction-shell-header__title-row {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.prediction-shell-header__text h1 {
    margin: 0;
    font-size: 1.42rem;
    line-height: 1.05;
}

.prediction-shell-header__text p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.83rem;
}

.prediction-shell-header__meta {
    display: grid;
    gap: 0.5rem;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
}

.prediction-shell-header__meta-item {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--bg-surface-muted) 86%, transparent);
    padding: 0.46rem 0.54rem;
    display: grid;
    gap: 0.24rem;
    align-content: center;
}

.prediction-shell-header__meta span {
    color: var(--text-muted);
    font-size: 0.64rem;
    font-weight: 800;
    text-transform: uppercase;
}

.prediction-shell-header__meta strong {
    font-size: 0.82rem;
    font-weight: 800;
    line-height: 1.2;
}

.prediction-shell-header__meta small {
    margin-left: 0.22rem;
    color: var(--text-secondary);
    font-size: 0.78rem;
    font-weight: 700;
}

.prediction-shell-header__meta .prediction-status-badge {
    justify-self: start;
}

.prediction-shell-header__progress-head {
    display: flex;
    justify-content: space-between;
    gap: 0.54rem;
    align-items: baseline;
    flex-wrap: wrap;
}

.prediction-shell-header__progress-head span {
    color: var(--text-muted);
    font-size: 0.64rem;
    font-weight: 800;
    text-transform: uppercase;
}

.prediction-shell-header__progress-head strong {
    color: color-mix(in srgb, var(--text-primary) 90%, var(--text-secondary));
    font-size: 0.82rem;
    font-weight: 900;
}

.prediction-shell-header__progress-track {
    width: 100%;
    height: 0.36rem;
    border-radius: 999px;
    background: var(--border);
    overflow: hidden;
}

.prediction-shell-header__progress-track span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--accent), var(--accent-strong));
}

.prediction-shell-header__local-notice {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;
    color: var(--text-secondary);
    font-size: 0.76rem;
}

.prediction-progress-summary {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--bg-surface) 90%, transparent);
    padding: 0.72rem 0.78rem;
    display: grid;
    gap: 0.54rem;
}

.prediction-progress-summary__head {
    display: flex;
    justify-content: space-between;
    gap: 0.6rem;
    align-items: baseline;
    flex-wrap: wrap;
}

.prediction-progress-summary__head h2 {
    margin: 0;
    font-size: 0.92rem;
}

.prediction-progress-summary__head strong {
    font-size: 0.84rem;
}

.prediction-progress-summary__track {
    width: 100%;
    height: 0.4rem;
    border-radius: 999px;
    background: var(--border);
    overflow: hidden;
}

.prediction-progress-summary__track span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--accent), var(--accent-strong));
}

.prediction-progress-summary__stats {
    margin: 0;
    display: grid;
    gap: 0.4rem;
    grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
}

.prediction-progress-summary__stats div {
    border: 1px solid var(--border);
    border-radius: 0.58rem;
    background: color-mix(in srgb, var(--bg-surface-muted) 84%, transparent);
    padding: 0.4rem 0.5rem;
    display: grid;
    gap: 0.1rem;
}

.prediction-progress-summary__stats dt {
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 700;
}

.prediction-progress-summary__stats dd {
    margin: 0;
    font-size: 0.88rem;
    font-weight: 700;
}

.prediction-shell__summary-backdrop {
    border: 0;
    padding: 0;
    position: fixed;
    inset: 0;
    z-index: 48;
    background: rgb(4 11 22 / 0.66);
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease-in-out;
}

.prediction-shell__summary-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
}

.prediction-shell__summary-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 49;
    width: min(27.5rem, calc(100vw - 0.75rem));
    height: 100dvh;
    max-height: 100dvh;
    padding: calc(0.92rem + env(safe-area-inset-top)) 0.92rem calc(0.92rem + env(safe-area-inset-bottom));
    display: grid;
    align-content: start;
    gap: 0.48rem;
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--bg-page) 94%, transparent),
        color-mix(in srgb, var(--bg-page) 88%, transparent)
    );
    border-left: 1px solid var(--border);
    border-radius: 0.9rem 0 0 0.9rem;
    transform: translateX(calc(100% + 0.75rem));
    transition: transform 210ms ease-in-out;
    pointer-events: none;
    overflow: hidden;
    overscroll-behavior: contain;
    touch-action: pan-y;
}

.prediction-shell__summary-drawer.is-open {
    transform: none;
    pointer-events: auto;
}

.prediction-shell__summary-drawer-close {
    justify-self: end;
    min-height: 1.9rem;
    min-width: 1.9rem;
    border: 1px solid var(--border);
    border-radius: 0.48rem;
    background: color-mix(in srgb, var(--bg-surface) 92%, transparent);
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.prediction-shell__summary-drawer-close:hover {
    border-color: var(--border-strong);
    color: var(--text-primary);
}

.prediction-shell__summary-drawer .prediction-summary-panel,
.prediction-shell__summary-drawer .prediction-context-panel {
    max-height: calc(100dvh - 4.5rem - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    overflow-y: auto;
    min-height: 0;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
}

.prediction-shell__summary-drawer .prediction-context-panel:has(.prediction-context-panel__selector) {
    height: calc(100dvh - 4.5rem - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    max-height: calc(100dvh - 4.5rem - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    overflow: hidden;
}

.prediction-module-nav {
    display: block;
}

.prediction-module-nav__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.45rem;
}

.prediction-module-nav__button {
    width: 100%;
    border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--border));
    border-radius: 0.72rem;
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--accent) 13%, var(--bg-surface)),
            color-mix(in srgb, var(--accent) 8%, var(--bg-surface-muted))
        );
    color: inherit;
    padding: 0.66rem 0.72rem 0.58rem;
    display: grid;
    gap: 0.34rem;
    text-align: left;
    cursor: pointer;
    box-shadow: 0 0 0 1px rgb(255 67 56 / 0.04) inset;
}

.prediction-module-nav__button:hover {
    border-color: color-mix(in srgb, var(--accent) 68%, var(--border));
}

.prediction-module-nav__button--active {
    border-color: color-mix(in srgb, var(--accent) 58%, var(--border));
}

.prediction-module-nav__meta {
    display: flex;
    justify-content: space-between;
    gap: 0.55rem;
    align-items: center;
}

.prediction-module-nav__meta span {
    display: inline-flex;
    align-items: center;
    gap: 0.24rem;
    color: var(--accent-strong);
    font-size: 0.58rem;
    font-weight: 800;
    line-height: 1;
    text-transform: uppercase;
}

.prediction-module-nav__meta strong {
    color: color-mix(in srgb, var(--text-primary) 92%, var(--text-secondary));
    font-size: 0.68rem;
    font-weight: 800;
    line-height: 1;
}

.prediction-module-nav__title {
    display: block;
    font-size: 0.88rem;
    font-weight: 800;
    line-height: 1.15;
}

.prediction-module-nav__progress {
    width: 100%;
    height: 0.24rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--border-strong) 64%, transparent);
    overflow: hidden;
}

.prediction-module-nav__progress span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--accent), var(--accent-strong));
}

.prediction-module-nav__hint {
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    gap: 0.24rem;
    font-size: 0.66rem;
    font-weight: 700;
    line-height: 1.2;
}

.prediction-summary-panel {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--bg-surface) 90%, transparent);
    padding: 0.72rem 0.78rem;
    display: grid;
    gap: 0.58rem;
    height: fit-content;
}

.prediction-summary-panel > h2 {
    margin: 0;
    font-size: 0.92rem;
}

.prediction-summary-panel__group {
    display: flex;
    justify-content: space-between;
    gap: 0.55rem;
    align-items: center;
}

.prediction-summary-panel__group strong {
    font-size: 0.88rem;
}

.prediction-summary-panel__stats {
    margin: 0;
    display: grid;
    gap: 0.38rem;
}

.prediction-summary-panel__stats div {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    border-bottom: 1px solid var(--border);
    padding-bottom: 0.36rem;
}

.prediction-summary-panel__stats div:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.prediction-summary-panel__stats dt {
    color: var(--text-muted);
    font-size: 0.73rem;
    font-weight: 700;
}

.prediction-summary-panel__stats dd {
    margin: 0;
    font-size: 0.8rem;
    font-weight: 700;
    text-align: right;
}

.prediction-summary-panel__note {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.78rem;
}

.prediction-context-panel {
    border: 0;
    border-radius: 0;
    background: transparent;
    padding: 0;
    display: grid;
    gap: 0.68rem;
    height: fit-content;
    align-content: start;
    align-items: start;
}

.prediction-context-panel:has(.prediction-context-panel__selector) {
    min-height: 0;
    grid-template-rows: auto minmax(0, 1fr);
    align-content: stretch;
    align-items: stretch;
    overflow: hidden;
}

.prediction-context-panel__head {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    align-items: center;
}

.prediction-context-panel__title-wrap {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.34rem;
}

.prediction-context-panel__head h2 {
    margin: 0;
    font-size: 1.06rem;
    line-height: 1.2;
}

.prediction-context-panel__title-icon {
    color: var(--text-muted);
    width: 1.28rem;
    height: 1.28rem;
    padding: 0.12rem;
    border: 1px solid color-mix(in srgb, var(--border-strong) 76%, transparent);
    border-radius: 999px;
    flex-shrink: 0;
}

.prediction-context-panel__dismiss {
    min-height: 2rem;
    min-width: 2rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: color-mix(in srgb, var(--bg-surface-strong) 90%, transparent);
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.prediction-context-panel__dismiss:hover {
    color: var(--text-primary);
    border-color: var(--border-strong);
}

.prediction-context-panel__block {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--bg-surface-muted) 88%, transparent);
    padding: 0.62rem;
    display: grid;
    gap: 0.56rem;
}

.prediction-context-panel__block h3 {
    margin: 0;
    font-size: 0.96rem;
    line-height: 1.2;
}

.prediction-context-panel__category-card {
    gap: 0.72rem;
}

.prediction-context-panel__category-head {
    display: flex;
    justify-content: space-between;
    gap: 0.58rem;
    align-items: center;
}

.prediction-context-panel__category-status {
    border: 1px solid color-mix(in srgb, var(--border-strong) 72%, transparent);
    border-radius: 999px;
    padding: 0.16rem 0.52rem;
    font-size: 0.72rem;
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
}

.prediction-context-panel__category-status--complete {
    border-color: color-mix(in srgb, var(--success) 44%, transparent);
    background: color-mix(in srgb, var(--success) 16%, transparent);
    color: color-mix(in srgb, var(--success) 78%, white);
}

.prediction-context-panel__category-status--in-progress {
    border-color: color-mix(in srgb, var(--warning) 48%, transparent);
    background: color-mix(in srgb, var(--warning) 18%, transparent);
    color: color-mix(in srgb, var(--warning) 82%, white);
}

.prediction-context-panel__category-status--not-started {
    color: var(--text-secondary);
}

.prediction-context-panel__category-stats {
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.58rem;
}

.prediction-context-panel__category-stats div {
    display: grid;
    gap: 0.12rem;
}

.prediction-context-panel__category-stats dt {
    color: var(--text-muted);
    font-size: 0.68rem;
    font-weight: 900;
    text-transform: uppercase;
}

.prediction-context-panel__category-stats dd {
    margin: 0;
    font-size: 0.88rem;
    font-weight: 900;
}

.prediction-context-panel__status {
    display: flex;
    justify-content: space-between;
    gap: 0.45rem;
    align-items: center;
}

.prediction-context-panel__status span {
    color: var(--text-secondary);
    font-size: 0.8rem;
    font-weight: 600;
}

.prediction-context-panel__status-line {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.8rem;
}

.prediction-context-panel__nominated-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.16rem;
}

.prediction-context-panel__nominated-row {
    width: 100%;
    border: 1px solid transparent;
    border-radius: 0.58rem;
    background: transparent;
    padding: 0.46rem 0.36rem;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.56rem;
    align-items: center;
    text-align: left;
    color: inherit;
}

.prediction-context-panel__nominated-row:hover {
    border-color: color-mix(in srgb, var(--border-strong) 76%, transparent);
    background: color-mix(in srgb, var(--bg-surface) 70%, transparent);
}

.prediction-context-panel__nominated-rank {
    width: 1.45rem;
    height: 1.45rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--border-strong) 70%, transparent);
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 900;
}

.prediction-context-panel__nominated-meta {
    min-width: 0;
    display: grid;
    gap: 0.18rem;
}

.prediction-context-panel__nominated-meta strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.9rem;
}

.prediction-context-panel__nominated-meta small {
    display: inline-flex;
    align-items: center;
    gap: 0.32rem;
    min-width: 0;
    color: var(--text-muted);
    font-size: 0.74rem;
    font-weight: 700;
}

.prediction-context-panel__nominated-total {
    white-space: nowrap;
    color: color-mix(in srgb, var(--danger) 90%, var(--accent));
    font-size: 1rem;
    font-weight: 900;
}

.prediction-context-panel__show-all {
    width: 100%;
    min-height: 2.4rem;
    margin-top: 0.28rem;
    border: 1px solid var(--border);
    border-radius: 0.56rem;
    background: color-mix(in srgb, var(--bg-surface) 76%, transparent);
    color: var(--text-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.42rem;
    font-size: 0.86rem;
    font-weight: 900;
    cursor: pointer;
}

.prediction-context-panel__show-all:hover {
    border-color: var(--border-strong);
    background: color-mix(in srgb, var(--bg-surface-strong) 80%, transparent);
}

.prediction-context-panel__athlete-card {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background:
        linear-gradient(
            160deg,
            color-mix(in srgb, var(--accent) 8%, var(--bg-surface-muted)) 0%,
            color-mix(in srgb, var(--bg-surface-muted) 94%, transparent) 58%
        ),
        color-mix(in srgb, var(--bg-surface-muted) 90%, transparent);
    display: grid;
    gap: 0;
    overflow: hidden;
}

.prediction-context-panel__athlete-content {
    width: 100%;
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.68rem;
    align-items: start;
}

.prediction-context-panel__athlete-content > * {
    min-width: 0;
    position: static;
    z-index: auto;
}

.prediction-context-panel__athlete-hero {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.64rem;
    align-items: center;
}

.prediction-context-panel__avatar {
    width: 2.9rem;
    aspect-ratio: 1;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--danger) 62%, var(--border));
    background: color-mix(in srgb, var(--danger) 16%, transparent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: color-mix(in srgb, var(--danger) 86%, var(--text-primary));
    font-size: 0.9rem;
    font-weight: 900;
    letter-spacing: 0;
}

.prediction-context-panel__athlete-meta {
    min-width: 0;
}

.prediction-context-panel__athlete-meta h3 {
    margin: 0;
    font-size: 1.18rem;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.prediction-context-panel__country {
    display: inline-flex;
    align-items: center;
    gap: 0.34rem;
    color: var(--text-secondary);
    font-size: 0.79rem;
}

.prediction-context-panel__category-pill {
    margin-top: 0.38rem;
    display: inline-flex;
    align-items: center;
    min-height: 1.66rem;
    padding-inline: 0.56rem;
    border-radius: 0.48rem;
    border: 1px solid color-mix(in srgb, var(--border-strong) 84%, transparent);
    background: color-mix(in srgb, var(--bg-surface) 84%, transparent);
    color: var(--text-secondary);
    font-size: 0.89rem;
    font-weight: 700;
}

.prediction-context-panel__details-grid {
    margin: 0;
    display: grid;
    gap: 0.52rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.prediction-context-panel__details-grid div {
    display: grid;
    gap: 0.16rem;
}

.prediction-context-panel__details-grid dt {
    color: var(--text-muted);
    font-size: 0.74rem;
    font-weight: 700;
}

.prediction-context-panel__details-grid dd {
    margin: 0;
    font-size: 1.02rem;
    font-weight: 700;
}

.prediction-context-panel__details-grid--large dd {
    font-size: 1.28rem;
    line-height: 1.15;
}

.prediction-context-panel__metric--accent {
    color: color-mix(in srgb, var(--danger) 90%, var(--text-primary));
}

.prediction-context-panel__snapshot-wrap {
    border: 1px solid var(--border);
    border-radius: 0.56rem;
    overflow: hidden;
    background: color-mix(in srgb, var(--bg-surface) 88%, transparent);
}

.prediction-context-panel__snapshot-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 0.85rem;
}

.prediction-context-panel__snapshot-table th,
.prediction-context-panel__snapshot-table td {
    border-right: 1px solid var(--border);
    padding: 0.35rem 0.2rem;
    text-align: center;
}

.prediction-context-panel__snapshot-table th:last-child,
.prediction-context-panel__snapshot-table td:last-child {
    border-right: 0;
}

.prediction-context-panel__snapshot-table thead th {
    color: var(--text-secondary);
    font-size: 0.76rem;
    font-weight: 700;
    background: color-mix(in srgb, var(--bg-surface-muted) 90%, transparent);
}

.prediction-context-panel__snapshot-table tbody td {
    font-weight: 700;
}

.prediction-context-panel__history-table-wrap {
    border: 1px solid var(--border);
    border-radius: 0.56rem;
    overflow: auto;
    max-height: 16rem;
    background: color-mix(in srgb, var(--bg-surface) 90%, transparent);
}

.prediction-context-panel__history-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.84rem;
}

.prediction-context-panel__history-table th,
.prediction-context-panel__history-table td {
    border-bottom: 1px solid var(--border);
    padding: 0.4rem 0.48rem;
    text-align: right;
    vertical-align: top;
}

.prediction-context-panel__history-table th {
    color: var(--text-secondary);
    font-size: 0.82rem;
    font-weight: 700;
    background: color-mix(in srgb, var(--bg-surface-muted) 90%, transparent);
}

.prediction-context-panel__history-table th:first-child,
.prediction-context-panel__history-table td:first-child {
    text-align: left;
}

.prediction-context-panel__history-table th:nth-child(2),
.prediction-context-panel__history-table td:nth-child(2) {
    text-align: left;
}

.prediction-context-panel__history-table td:first-child {
    min-width: 9.2rem;
}

.prediction-context-panel__history-table td:nth-child(2) {
    min-width: 13rem;
}

.prediction-context-panel__history-table tbody tr:last-child td {
    border-bottom: 0;
}

.prediction-context-panel__history-table td small {
    display: block;
    color: var(--text-secondary);
    margin-top: 0.04rem;
}

.prediction-context-panel__history-cell--pb {
    color: color-mix(in srgb, var(--success) 86%, var(--text-primary));
    font-weight: 700;
}

.prediction-context-panel__pb {
    margin-left: 0.34rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 1.08rem;
    padding-inline: 0.3rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--success) 50%, var(--border));
    background: color-mix(in srgb, var(--success) 16%, transparent);
    color: color-mix(in srgb, var(--success) 86%, var(--text-primary));
    font-size: 0.64rem;
    font-weight: 800;
    line-height: 1;
    vertical-align: middle;
}

.prediction-context-panel__highlights {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.48rem;
}

.prediction-context-panel__highlight-card {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background:
        linear-gradient(
            155deg,
            color-mix(in srgb, var(--accent) 8%, var(--bg-surface-muted)),
            color-mix(in srgb, var(--bg-surface-muted) 94%, transparent)
        );
    padding: 0.58rem;
    display: grid;
    gap: 0.24rem;
}

.prediction-context-panel__highlight-card span {
    color: var(--text-secondary);
    font-size: 0.8rem;
    font-weight: 700;
}

.prediction-context-panel__highlight-card strong {
    margin: 0;
    font-size: 1.08rem;
    line-height: 1.2;
}

.prediction-context-panel__highlight-card small {
    color: var(--text-muted);
    font-size: 0.8rem;
    line-height: 1.2;
}

.prediction-context-panel__highlight-card--best strong {
    color: color-mix(in srgb, var(--success) 88%, var(--text-primary));
}

.prediction-context-panel__highlight-card--last strong {
    color: color-mix(in srgb, var(--accent) 82%, var(--text-primary));
}

.app-trend-chart {
    min-width: 0;
    display: grid;
    gap: 0.42rem;
}

.app-trend-chart__body {
    min-height: 8.2rem;
    display: grid;
    grid-template-columns: 3.45rem minmax(0, 1fr);
    gap: 0.56rem;
    align-items: stretch;
}

.app-trend-chart__y-axis {
    list-style: none;
    margin: 0;
    padding: 0.34rem 0 1.44rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: var(--text-secondary);
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1.1;
    text-align: right;
}

.app-trend-chart__plot {
    position: relative;
    min-width: 0;
    min-height: 8.2rem;
    border: 1px solid color-mix(in srgb, var(--border) 92%, transparent);
    border-radius: 0.58rem;
    overflow: visible;
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--accent) 8%, transparent) 0%,
            transparent 48%
        ),
        color-mix(in srgb, var(--bg-surface) 92%, transparent);
}

.app-trend-chart__svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.app-trend-chart__grid-line,
.app-trend-chart__axis-line {
    stroke: color-mix(in srgb, var(--border) 88%, transparent);
    stroke-width: 0.55;
    vector-effect: non-scaling-stroke;
}

.app-trend-chart__grid-line {
    stroke-dasharray: 4 5;
}

.app-trend-chart__area {
    fill: color-mix(in srgb, var(--accent) 16%, transparent);
}

.app-trend-chart__line {
    fill: none;
    stroke: color-mix(in srgb, var(--accent-strong) 94%, var(--danger));
    stroke-width: 2.1;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 0.14rem 0.18rem rgb(0 0 0 / 0.22));
    vector-effect: non-scaling-stroke;
}

.app-trend-chart__point {
    position: absolute;
    transform: translate(-50%, -50%);
    display: grid;
    justify-items: center;
    gap: 0.16rem;
    cursor: help;
    z-index: 2;
}

.app-trend-chart__point:hover,
.app-trend-chart__point:focus-visible {
    z-index: 5;
}

.app-trend-chart__point:focus-visible {
    outline: none;
}

.app-trend-chart__point:focus-visible .app-trend-chart__dot {
    box-shadow:
        0 0 0 0.14rem color-mix(in srgb, var(--accent) 16%, transparent),
        0 0 0 0.32rem color-mix(in srgb, var(--accent) 28%, transparent);
}

.app-trend-chart__point--first {
    transform: translate(0, -50%);
}

.app-trend-chart__point--last {
    transform: translate(-100%, -50%);
}

.app-trend-chart__dot {
    width: 0.5rem;
    aspect-ratio: 1;
    border-radius: 999px;
    border: 2px solid color-mix(in srgb, var(--accent-strong) 90%, var(--danger));
    background: color-mix(in srgb, var(--bg-surface) 94%, transparent);
    box-shadow: 0 0 0 0.14rem color-mix(in srgb, var(--accent) 16%, transparent);
}

.app-trend-chart__point-value {
    border-radius: 0.36rem;
    background: color-mix(in srgb, var(--bg-surface) 84%, transparent);
    color: var(--text-primary);
    padding: 0.08rem 0.26rem;
    font-size: 0.68rem;
    font-weight: 800;
    line-height: 1.1;
    white-space: nowrap;
    transform: translateY(-0.24rem);
}

.app-trend-chart__point--last .app-trend-chart__point-value {
    background: color-mix(in srgb, var(--accent) 72%, var(--bg-surface));
    color: #fff;
}

.app-trend-chart__tooltip {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 0.42rem);
    z-index: 6;
    width: max-content;
    max-width: min(16rem, 72vw);
    border: 1px solid color-mix(in srgb, var(--border-strong) 86%, transparent);
    border-radius: 0.46rem;
    background: color-mix(in srgb, var(--bg-surface) 96%, black);
    color: var(--text-primary);
    box-shadow: 0 0.7rem 1.4rem rgb(0 0 0 / 0.34);
    padding: 0.34rem 0.48rem;
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1.2;
    white-space: normal;
    text-align: left;
    opacity: 0;
    transform: translate(-50%, 0.18rem);
    transition:
        opacity 120ms ease,
        transform 120ms ease;
    pointer-events: none;
}

.app-trend-chart__tooltip::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -0.32rem;
    width: 0.52rem;
    height: 0.52rem;
    border-right: 1px solid color-mix(in srgb, var(--border-strong) 86%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--border-strong) 86%, transparent);
    background: inherit;
    transform: translateX(-50%) rotate(45deg);
}

.app-trend-chart__point:hover .app-trend-chart__tooltip,
.app-trend-chart__point:focus-visible .app-trend-chart__tooltip {
    opacity: 1;
    transform: translate(-50%, 0);
}

.app-trend-chart__point--first .app-trend-chart__tooltip {
    left: 0;
    transform: translateY(0.18rem);
}

.app-trend-chart__point--first .app-trend-chart__tooltip::after {
    left: 0.85rem;
    transform: rotate(45deg);
}

.app-trend-chart__point--first:hover .app-trend-chart__tooltip,
.app-trend-chart__point--first:focus-visible .app-trend-chart__tooltip {
    transform: translateY(0);
}

.app-trend-chart__point--last .app-trend-chart__tooltip {
    right: 0;
    left: auto;
    transform: translateY(0.18rem);
}

.app-trend-chart__point--last .app-trend-chart__tooltip::after {
    right: 0.85rem;
    left: auto;
    transform: rotate(45deg);
}

.app-trend-chart__point--last:hover .app-trend-chart__tooltip,
.app-trend-chart__point--last:focus-visible .app-trend-chart__tooltip {
    transform: translateY(0);
}

.app-trend-chart__x-axis {
    list-style: none;
    margin: -0.08rem 0 0 4.01rem;
    padding: 0;
    position: relative;
    min-height: 1.1rem;
    color: var(--text-muted);
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.1;
    text-align: center;
}

.app-trend-chart__x-label {
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    text-align: center;
    white-space: nowrap;
}

.app-trend-chart__x-label--first {
    transform: translateX(0);
}

.app-trend-chart__x-label--last {
    transform: translateX(-100%);
}

.app-trend-chart--full {
    gap: 0.5rem;
}

.app-trend-chart--full .app-trend-chart__body {
    min-height: 14.8rem;
    grid-template-columns: 3.9rem minmax(0, 1fr);
    gap: 0.7rem;
}

.app-trend-chart--full .app-trend-chart__plot {
    min-height: 14.8rem;
}

.app-trend-chart--full .app-trend-chart__y-axis {
    padding-top: 0.42rem;
    padding-bottom: 1.6rem;
    font-size: 0.78rem;
}

.app-trend-chart--full .app-trend-chart__line {
    stroke-width: 2.6;
}

.app-trend-chart--full .app-trend-chart__dot {
    width: 0.56rem;
    box-shadow: 0 0 0 0.18rem color-mix(in srgb, var(--accent) 16%, transparent);
}

.app-trend-chart--full .app-trend-chart__point-value {
    font-size: 0.78rem;
    transform: translateY(-0.28rem);
}

.app-trend-chart--full .app-trend-chart__x-axis {
    margin-left: 4.6rem;
    font-size: 0.78rem;
}

.prediction-context-panel__trend-card {
    position: static;
    gap: 0.42rem;
    padding: 0.66rem 0.72rem 0.58rem;
    overflow: hidden;
    isolation: isolate;
    background: color-mix(in srgb, var(--bg-surface-muted) 98%, black);
}

.prediction-context-panel__trend-card h3 {
    font-size: 0.9rem;
}

.prediction-context-panel__trend-card .app-trend-chart {
    gap: 0.22rem;
}

.prediction-context-panel__trend-card .app-trend-chart__body {
    min-height: 6.05rem;
    grid-template-columns: 4.15rem minmax(0, 1fr);
    gap: 0.45rem;
}

.prediction-context-panel__trend-card .app-trend-chart__plot {
    min-height: 6.05rem;
    border: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--border-strong) 70%, transparent);
    border-radius: 0.28rem 0.28rem 0 0;
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--accent) 9%, transparent) 0%,
            color-mix(in srgb, var(--danger) 12%, transparent) 100%
        ),
        color-mix(in srgb, var(--bg-surface) 98%, black);
    overflow: hidden;
}

.prediction-context-panel__trend-card .app-trend-chart__y-axis {
    padding: 0.18rem 0 0.32rem;
    font-size: 0.68rem;
}

.prediction-context-panel__trend-card .app-trend-chart__y-axis li {
    white-space: nowrap;
}

.prediction-context-panel__trend-card .app-trend-chart__x-axis {
    margin-left: 4.6rem;
    min-height: 1rem;
    font-size: 0.66rem;
}

.prediction-context-panel__trend-card .app-trend-chart__x-label:not(.app-trend-chart__x-label--first):not(.app-trend-chart__x-label--last) {
    display: none;
}

.prediction-context-panel__trend-card .app-trend-chart__grid-line {
    stroke-dasharray: none;
    opacity: 0.55;
}

.prediction-context-panel__trend-card .app-trend-chart__area {
    fill: color-mix(in srgb, var(--danger) 20%, transparent);
}

.prediction-context-panel__trend-card .app-trend-chart__line {
    stroke: color-mix(in srgb, var(--danger) 90%, var(--accent));
    stroke-width: 2;
}

.prediction-context-panel__trend-card .app-trend-chart__dot {
    width: 0.46rem;
    border-color: color-mix(in srgb, var(--danger) 88%, var(--accent));
    background: color-mix(in srgb, var(--danger) 84%, var(--bg-surface));
    box-shadow: 0 0 0 0.1rem color-mix(in srgb, var(--danger) 20%, transparent);
}

.prediction-context-panel__trend-card .app-trend-chart__point-value {
    display: none;
}

.prediction-context-panel__recent-card,
.prediction-context-panel__best-card,
.prediction-context-panel__analytics-card {
    gap: 0.5rem;
}

.prediction-context-panel__recent-card h3,
.prediction-context-panel__best-card h3,
.prediction-context-panel__analytics-card h3 {
    font-size: 0.92rem;
}

.prediction-context-panel__empty {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.82rem;
}

.prediction-context-panel__actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.46rem;
}

.prediction-context-panel__action {
    min-height: 3rem;
    border: 1px solid var(--border);
    border-radius: 0.58rem;
    background: color-mix(in srgb, var(--bg-surface) 88%, transparent);
    color: var(--text-primary);
    font-size: 0.84rem;
    font-weight: 700;
    text-align: left;
    padding: 0.48rem 0.62rem;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.44rem;
    line-height: 1.2;
    cursor: pointer;
    transition:
        border-color 130ms ease,
        background-color 130ms ease,
        color 130ms ease;
}

.prediction-context-panel__action:hover:not(:disabled) {
    border-color: var(--border-strong);
    background: color-mix(in srgb, var(--bg-surface-strong) 86%, transparent);
}

.prediction-context-panel__action .app-icon {
    color: var(--text-secondary);
}

.prediction-context-panel__action span {
    overflow-wrap: anywhere;
}

.prediction-context-panel__action--primary {
    border-color: color-mix(in srgb, var(--accent-strong) 74%, var(--border));
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--accent-strong) 78%, transparent),
        color-mix(in srgb, var(--accent) 72%, transparent)
    );
    color: #fff;
}

.prediction-context-panel__action--primary .app-icon {
    color: #fff;
}

.prediction-context-panel__action--danger {
    border-color: color-mix(in srgb, var(--danger) 46%, var(--border));
    color: color-mix(in srgb, var(--danger) 88%, var(--text-primary));
}

.prediction-context-panel__action--danger .app-icon {
    color: color-mix(in srgb, var(--danger) 88%, var(--text-primary));
}

.prediction-context-panel__action:disabled {
    opacity: 0.56;
    cursor: not-allowed;
}

.prediction-context-panel__notice {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--bg-surface-muted) 90%, transparent);
    padding: 0.54rem 0.58rem;
    display: grid;
    gap: 0.34rem;
}

.prediction-context-panel__notice p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.82rem;
    display: flex;
    align-items: flex-start;
    gap: 0.36rem;
    line-height: 1.35;
}

.prediction-context-panel__notice p .app-icon {
    color: color-mix(in srgb, var(--accent) 74%, var(--text-primary));
    margin-top: 0.04rem;
}

.prediction-context-panel__source {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.78rem;
}

.athlete-data-source-note {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.74rem;
    line-height: 1.35;
}

.prediction-context-panel__athlete-main {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.72rem;
    align-items: center;
    padding: 0.82rem 0.86rem;
}

.prediction-context-panel__position-badge {
    width: 3.45rem;
    aspect-ratio: 1;
    border-radius: 999px;
    border: 2px solid color-mix(in srgb, var(--danger) 76%, transparent);
    background: color-mix(in srgb, var(--danger) 9%, transparent);
    color: color-mix(in srgb, var(--danger) 86%, var(--text-primary));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.26rem;
    font-weight: 800;
    line-height: 1;
}

.prediction-context-panel__ranking-pill {
    justify-self: end;
    border: 1px solid color-mix(in srgb, var(--danger) 48%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--danger) 14%, transparent);
    color: color-mix(in srgb, var(--danger) 88%, var(--text-primary));
    padding: 0.24rem 0.52rem;
    font-size: 0.72rem;
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
}

.prediction-context-panel__meta-list {
    margin: 0;
    display: grid;
    gap: 0;
}

.prediction-context-panel__meta-list--split {
    border-top: 1px solid var(--border);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.prediction-context-panel__meta-list > div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.6rem;
    padding-block: 0.48rem;
    border-bottom: 1px solid var(--border);
}

.prediction-context-panel__meta-list--split > div {
    display: grid;
    gap: 0.2rem;
    align-content: start;
    padding: 0.78rem 0.9rem;
    border-bottom: 0;
}

.prediction-context-panel__meta-list--split > div + div {
    border-left: 1px solid var(--border);
}

.prediction-context-panel__meta-list > div:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.prediction-context-panel__meta-list dt {
    color: var(--text-secondary);
    font-size: 0.74rem;
    font-weight: 700;
}

.prediction-context-panel__meta-list dd {
    margin: 0;
    font-size: 0.96rem;
    font-weight: 800;
    text-align: right;
}

.prediction-context-panel__meta-list--split dd {
    text-align: left;
    font-size: 1.05rem;
}

.prediction-context-panel__meta-value--accent {
    color: color-mix(in srgb, var(--danger) 90%, var(--text-primary));
}

.prediction-context-panel__athlete-actions {
    border-top: 1px solid var(--border);
    padding: 0.58rem 0.7rem 0.7rem;
    display: grid;
}

.prediction-context-panel__recent-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0;
    border: 1px solid var(--border);
    border-radius: 0.56rem;
    overflow: hidden;
    background: color-mix(in srgb, var(--bg-surface) 88%, transparent);
}

.prediction-context-panel__recent-item {
    border: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 86%, transparent);
    border-radius: 0;
    background: transparent;
    padding: 0.62rem 0.68rem;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.62rem;
}

.prediction-context-panel__recent-item:last-child {
    border-bottom: 0;
}

.prediction-context-panel__recent-rank {
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--text-secondary) 16%, transparent);
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    font-weight: 800;
}

.prediction-context-panel__recent-item-main {
    min-width: 0;
    display: grid;
    gap: 0.12rem;
}

.prediction-context-panel__recent-item-main strong {
    font-size: 0.88rem;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.prediction-context-panel__recent-item-lifts {
    color: var(--text-secondary);
    font-size: 0.78rem;
    line-height: 1.2;
}

.prediction-context-panel__recent-item-total {
    white-space: nowrap;
    font-size: 1.08rem;
    font-weight: 800;
}

.prediction-context-panel__recent-item:first-child .prediction-context-panel__recent-item-total {
    color: color-mix(in srgb, var(--danger) 90%, var(--text-primary));
}

.prediction-context-panel__recent-item-result {
    display: grid;
    gap: 0.08rem;
    justify-items: end;
    text-align: right;
    flex-shrink: 0;
}

.prediction-context-panel__recent-item-result span {
    color: var(--text-secondary);
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.1;
    white-space: nowrap;
}

.prediction-context-panel__recent-item-total--best {
    color: color-mix(in srgb, var(--danger) 90%, var(--text-primary));
}

.prediction-context-panel__history-link {
    min-height: 3rem;
    width: 100%;
    min-width: 0;
    border: 1px solid color-mix(in srgb, var(--border-strong) 92%, transparent);
    border-radius: 0.56rem;
    background: color-mix(in srgb, var(--bg-surface) 82%, transparent);
    color: var(--text-primary);
    font-size: 0.9rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.42rem 0.62rem;
    text-align: center;
    line-height: 1.25;
    white-space: normal;
    cursor: pointer;
    transition:
        border-color 130ms ease,
        background-color 130ms ease,
        color 130ms ease;
}

.prediction-context-panel__history-link:hover {
    border-color: var(--border-strong);
    background: color-mix(in srgb, var(--bg-surface-strong) 82%, transparent);
}

.prediction-context-panel__history-link .app-icon {
    color: var(--text-secondary);
    flex-shrink: 0;
}

.prediction-context-panel__history-link span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.prediction-context-panel__analytics-grid {
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.38rem;
}

.prediction-context-panel__analytics-grid div {
    min-width: 0;
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    background: color-mix(in srgb, var(--bg-surface) 86%, transparent);
    padding: 0.44rem 0.5rem;
    display: grid;
    gap: 0.1rem;
}

.prediction-context-panel__analytics-tile--pr {
    border-color: color-mix(in srgb, var(--success) 34%, var(--border-strong)) !important;
}

.prediction-context-panel__analytics-tile--recent {
    border-color: color-mix(in srgb, var(--accent) 30%, var(--border-strong)) !important;
}

.prediction-context-panel__analytics-tile--average {
    border-color: color-mix(in srgb, var(--info) 30%, var(--border-strong)) !important;
}

.prediction-context-panel__analytics-tile--attempts {
    border-color: color-mix(in srgb, var(--success) 26%, var(--border-strong)) !important;
}

.prediction-context-panel__analytics-tile--score {
    border-color: color-mix(in srgb, var(--score) 34%, var(--border-strong)) !important;
}

.prediction-context-panel__analytics-tile--trend-up {
    border-color: color-mix(in srgb, var(--success) 34%, var(--border-strong)) !important;
}

.prediction-context-panel__analytics-tile--trend-down {
    border-color: color-mix(in srgb, var(--danger) 34%, var(--border-strong)) !important;
}

.prediction-context-panel__analytics-grid dt {
    color: var(--text-secondary);
    font-size: 0.68rem;
    font-weight: 800;
    line-height: 1.15;
    text-transform: uppercase;
    letter-spacing: 0;
}

.prediction-context-panel__analytics-grid dd {
    margin: 0;
    font-size: 0.88rem;
    font-weight: 800;
    line-height: 1.18;
    overflow-wrap: anywhere;
}

.prediction-context-panel__analytics-grid small {
    color: var(--text-muted);
    font-size: 0.66rem;
    line-height: 1.16;
}

.prediction-context-panel__score-pair {
    display: grid;
    gap: 0.12rem;
}

.prediction-context-panel__score-pair span {
    color: color-mix(in srgb, var(--score) 82%, var(--text-primary));
    font-size: 0.78rem;
}

.prediction-context-panel__analytics-item--wide {
    grid-column: 1 / -1;
}

.prediction-context-panel__best-lifts {
    margin: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    border: 1px solid var(--border);
    border-radius: 0.56rem;
    overflow: hidden;
    background: color-mix(in srgb, var(--bg-surface) 86%, transparent);
}

.prediction-context-panel__best-lift {
    border: 0;
    border-right: 1px solid var(--border);
    border-radius: 0;
    background: transparent;
    padding: 0.48rem 0.3rem 0.54rem;
    display: grid;
    gap: 0.1rem;
    justify-items: center;
}

.prediction-context-panel__best-lift:last-child {
    border-right: 0;
}

.prediction-context-panel__best-lift dt {
    color: var(--text-secondary);
    font-size: 0.78rem;
    font-weight: 800;
}

.prediction-context-panel__best-lift dd {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 800;
    text-align: center;
}

.prediction-context-panel__best-lift--total dd {
    color: color-mix(in srgb, var(--danger) 90%, var(--text-primary));
}

.prediction-context-panel__actions--stacked {
    grid-template-columns: 1fr;
}

.prediction-context-panel__actions--history {
    grid-template-columns: 1fr;
}

.prediction-context-panel__actions.prediction-context-panel__actions--stacked {
    grid-template-columns: 1fr;
}

.prediction-context-panel__action--centered {
    justify-content: center;
    text-align: center;
}

.prediction-context-panel__selector {
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 0.56rem;
    overflow: hidden;
}

.prediction-context-panel__selector-current {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.76rem;
}

.prediction-context-panel__selector-controls {
    display: grid;
    gap: 0.46rem;
}

.prediction-context-panel__selector-search {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0.4rem;
    border: 1px solid var(--border);
    border-radius: 0.56rem;
    background: color-mix(in srgb, var(--bg-surface) 90%, transparent);
    padding: 0 0.56rem;
    min-height: 2.25rem;
}

.prediction-context-panel__selector-search-icon {
    color: var(--text-secondary);
}

.prediction-context-panel__selector-search-input {
    min-height: 2.05rem;
    border: 0;
    background: transparent;
    padding: 0;
}

.prediction-context-panel__selector-search-input:focus {
    outline: none;
}

.prediction-context-panel__selector-sort {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.42rem;
    align-items: center;
}

.prediction-context-panel__selector-sort > span {
    color: var(--text-secondary);
    font-size: 0.84rem;
    font-weight: 600;
}

.prediction-context-panel__selector-sort-select {
    min-height: 2.2rem;
}

.prediction-context-panel__selector-list {
    display: grid;
    flex: 1 1 auto;
    gap: 0;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--border);
    border-radius: 0.58rem;
    background: color-mix(in srgb, var(--bg-surface) 90%, transparent);
    align-content: start;
}

.prediction-context-panel__selector-row {
    border: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 86%, transparent);
    border-radius: 0;
    background: transparent;
    padding: 0.42rem 0.52rem;
    display: grid;
    grid-template-columns: 1.35rem minmax(0, 1fr) auto auto;
    gap: 0.5rem;
    align-items: center;
    min-height: 4.1rem;
}

.prediction-context-panel__selector-row:last-child {
    border-bottom: 0;
}

.prediction-context-panel__selector-row--picked {
    background: color-mix(in srgb, var(--success) 7%, transparent);
}

.prediction-context-panel__selector-row--current-slot {
    background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.prediction-context-panel__selector-rank {
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--border-strong) 72%, transparent);
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 700;
}

.prediction-context-panel__selector-meta {
    min-width: 0;
    display: grid;
    gap: 0.12rem;
}

.prediction-context-panel__selector-meta strong {
    font-size: 0.88rem;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.prediction-context-panel__selector-meta small {
    color: var(--text-secondary);
    font-size: 0.8rem;
    display: inline-flex;
    align-items: center;
    gap: 0.32rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.prediction-context-panel__selector-total {
    white-space: nowrap;
    font-size: 0.88rem;
    font-weight: 700;
    min-width: 4.8rem;
    text-align: right;
}

.prediction-context-panel__selector-pick {
    min-height: 1.82rem;
    min-width: 5rem;
    padding-inline: 0.66rem;
    font-size: 0.8rem;
}

.floating-window-host {
    position: fixed;
    inset: 0;
    z-index: 60;
    pointer-events: none;
}

.floating-window-host > * {
    pointer-events: auto;
}

.floating-window-host__mobile-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    border: 0;
    padding: 0;
    background: rgb(4 11 22 / 0.72);
    cursor: pointer;
    z-index: 0;
}

.floating-window-host__taskbar {
    position: fixed;
    bottom: calc(var(--prediction-action-bar-offset, 1rem) + 4.6rem);
    right: 1rem;
    display: inline-flex;
    flex-direction: column;
    gap: 0.32rem;
    align-items: flex-end;
    z-index: 35;
}

.floating-window-host__taskbar-item {
    min-height: 2.1rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: color-mix(in srgb, var(--bg-surface) 94%, transparent);
    color: var(--text-primary);
    padding: 0.18rem 0.78rem;
    font-size: 0.78rem;
    display: inline-flex;
    align-items: center;
    gap: 0.36rem;
    box-shadow: var(--shadow-card);
    cursor: pointer;
    max-width: 18rem;
}

.floating-window-host__taskbar-item span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 14rem;
}

.floating-window-host__taskbar-item:hover {
    border-color: color-mix(in srgb, var(--accent) 60%, var(--border));
}

.floating-window {
    position: fixed;
    width: min(38rem, calc(100vw - 2rem));
    max-height: min(78vh, 44rem);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    border: 1px solid color-mix(in srgb, var(--border-strong) 92%, transparent);
    border-radius: var(--radius-md);
    background:
        linear-gradient(
            162deg,
            color-mix(in srgb, var(--accent) 6%, var(--bg-surface)) 0%,
            color-mix(in srgb, var(--bg-surface) 95%, transparent) 60%
        ),
        color-mix(in srgb, var(--bg-surface) 95%, transparent);
    box-shadow: 0 22px 56px rgb(0 0 0 / 0.42);
    outline: none;
    overflow: hidden;
}

.floating-window--active {
    border-color: color-mix(in srgb, var(--accent) 55%, var(--border-strong));
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--accent) 26%, transparent),
        0 26px 64px rgb(0 0 0 / 0.5);
}

.floating-window--athlete-history {
    width: min(62rem, calc(100vw - 2rem));
    max-height: min(84vh, 52rem);
}

.floating-window.is-dragging {
    user-select: none;
}

.floating-window__header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.55rem;
    padding: 0.5rem 0.65rem;
    border-bottom: 1px solid var(--border);
    background: color-mix(in srgb, var(--bg-surface-strong) 70%, transparent);
    cursor: grab;
    touch-action: none;
    user-select: none;
}

.floating-window__header.is-dragging,
.floating-window__header:active {
    cursor: grabbing;
}

.floating-window__grab {
    display: inline-grid;
    gap: 2px;
    width: 0.7rem;
}

.floating-window__grab span {
    height: 2px;
    background: color-mix(in srgb, var(--text-secondary) 70%, transparent);
    border-radius: 2px;
}

.floating-window__title-wrap {
    display: grid;
    gap: 0.05rem;
    min-width: 0;
}

.floating-window__title {
    font-size: 0.95rem;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.floating-window__subtitle {
    font-size: 0.72rem;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.floating-window__controls {
    display: inline-flex;
    gap: 0.24rem;
    align-items: center;
}

.floating-window__control {
    width: 1.85rem;
    height: 1.85rem;
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    background: color-mix(in srgb, var(--bg-surface) 88%, transparent);
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.95rem;
    line-height: 1;
}

.floating-window__control:hover {
    color: var(--text-primary);
    border-color: var(--border-strong);
}

.floating-window__control--close:hover {
    color: var(--accent-strong);
    border-color: color-mix(in srgb, var(--accent) 55%, var(--border-strong));
}

.floating-window__body {
    padding: 0.85rem;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--text-secondary) 38%, transparent) transparent;
}

.floating-window__body::-webkit-scrollbar,
.athlete-history-window__starts-table-wrap::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.floating-window__body::-webkit-scrollbar-track,
.athlete-history-window__starts-table-wrap::-webkit-scrollbar-track {
    background: transparent;
}

.floating-window__body::-webkit-scrollbar-thumb,
.athlete-history-window__starts-table-wrap::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--text-secondary) 35%, transparent);
    border-radius: 999px;
    border: 1px solid transparent;
    background-clip: padding-box;
}

.floating-window__body::-webkit-scrollbar-thumb:hover,
.athlete-history-window__starts-table-wrap::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--text-secondary) 60%, transparent);
    background-clip: padding-box;
}

.floating-window__body::-webkit-scrollbar-corner,
.athlete-history-window__starts-table-wrap::-webkit-scrollbar-corner {
    background: transparent;
}

.athlete-history-window__starts-table-wrap {
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--text-secondary) 38%, transparent) transparent;
}

.floating-window__resize-handle {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 18px;
    height: 18px;
    cursor: se-resize;
    touch-action: none;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    padding: 2px;
    z-index: 2;
}

.floating-window__resize-handle::before,
.floating-window__resize-handle::after {
    content: "";
    position: absolute;
    right: 4px;
    background: color-mix(in srgb, var(--text-secondary) 55%, transparent);
    border-radius: 1px;
    transform-origin: bottom right;
}

.floating-window__resize-handle::before {
    bottom: 4px;
    width: 10px;
    height: 2px;
    transform: rotate(-45deg) translate(0, -1px);
}

.floating-window__resize-handle::after {
    bottom: 4px;
    width: 6px;
    height: 2px;
    transform: rotate(-45deg) translate(-3px, -5px);
}

.floating-window__resize-handle:hover::before,
.floating-window__resize-handle:hover::after,
.floating-window__resize-handle.is-resizing::before,
.floating-window__resize-handle.is-resizing::after {
    background: var(--accent);
}

.floating-window.is-resizing {
    user-select: none;
}

.athlete-history-window {
    display: grid;
    gap: 0.78rem;
}

.athlete-history-window__identity {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.55rem;
    align-items: center;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--bg-surface-muted) 88%, transparent);
    padding: 0.6rem 0.72rem;
}

.athlete-history-window__avatar {
    width: 2.6rem;
    aspect-ratio: 1;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--border-strong) 82%, transparent);
    background: color-mix(in srgb, var(--bg-surface) 92%, transparent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    font-weight: 800;
}

.athlete-history-window__identity-meta {
    display: grid;
    gap: 0.18rem;
    min-width: 0;
}

.athlete-history-window__identity-meta strong {
    font-size: 1rem;
}

.athlete-history-window__identity-meta small {
    color: var(--text-secondary);
    font-size: 0.78rem;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.athlete-history-window__meta {
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
}

.athlete-history-window__meta div {
    display: grid;
    gap: 0.12rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--bg-surface-muted) 84%, transparent);
    padding: 0.5rem 0.6rem;
}

.athlete-history-window__meta dt {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.athlete-history-window__meta dd {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 700;
}

.athlete-history-window__meta-value--accent {
    color: color-mix(in srgb, var(--accent-strong) 80%, var(--text-primary));
}

.athlete-history-window__source-picker {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.72rem;
    padding: 0.58rem 0.66rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--bg-surface-muted) 72%, transparent);
}

.athlete-history-window__source-picker > span {
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
}

.athlete-history-window__source-segmented {
    flex: 0 1 auto;
}

.athlete-history-window__source-segmented .segmented__button {
    min-height: 2rem;
    padding-inline: 0.62rem;
    font-size: 0.75rem;
}

.athlete-history-window__actions {
    display: grid;
    gap: 0.42rem;
    border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border));
    border-radius: var(--radius-sm);
    padding: 0.62rem 0.7rem;
    background: color-mix(in srgb, var(--accent) 7%, var(--bg-surface-muted));
}

.athlete-history-window__actions-hint {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.78rem;
}

.athlete-history-window__actions-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.athlete-history-window__no-context {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.78rem;
    display: inline-flex;
    gap: 0.36rem;
    align-items: center;
    border: 1px dashed var(--border);
    border-radius: var(--radius-sm);
    padding: 0.48rem 0.6rem;
    background: color-mix(in srgb, var(--bg-surface-muted) 80%, transparent);
}

.athlete-history-window__section-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.athlete-history-window__section-head h3 {
    margin: 0;
    font-size: 0.92rem;
}

.athlete-history-window__pill {
    min-height: 1.8rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: color-mix(in srgb, var(--bg-surface) 86%, transparent);
    color: var(--text-secondary);
    padding-inline: 0.6rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.74rem;
    font-weight: 700;
}

.athlete-history-window__analytics,
.athlete-history-window__attempts,
.athlete-history-window__trend,
.athlete-history-window__bests,
.athlete-history-window__starts {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--bg-surface-muted) 86%, transparent);
    padding: 0.62rem 0.7rem;
    display: grid;
    gap: 0.55rem;
}

.athlete-history-window__analytics-note {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.78rem;
    line-height: 1.35;
}

.athlete-history-window__analytics-grid,
.athlete-history-window__attempts-grid {
    margin: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.4rem;
}

.athlete-history-window__analytics-grid div,
.athlete-history-window__attempts-grid div {
    min-width: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--bg-surface) 88%, transparent);
    padding: 0.44rem 0.5rem;
    display: grid;
    gap: 0.1rem;
}

.athlete-history-window__analytics-grid dt,
.athlete-history-window__attempts-grid dt {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0;
}

.athlete-history-window__analytics-grid dd,
.athlete-history-window__attempts-grid dd {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 800;
    line-height: 1.18;
}

.athlete-history-window__attempts-grid small {
    color: var(--text-muted);
    font-size: 0.68rem;
    line-height: 1.18;
}

.athlete-history-window__trend-value--up {
    color: color-mix(in srgb, var(--success) 82%, var(--text-primary));
}

.athlete-history-window__trend-value--down {
    color: color-mix(in srgb, var(--danger) 84%, var(--text-primary));
}

.athlete-history-window__analytics--insight {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--info) 9%, transparent), transparent 52%),
        color-mix(in srgb, var(--bg-surface-muted) 88%, transparent);
}

.athlete-history-window__summary-grid {
    margin: 0;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.45rem;
}

.athlete-history-window__summary-card {
    min-width: 0;
    min-height: 6.2rem;
    border: 1px solid color-mix(in srgb, var(--border-strong) 70%, transparent);
    border-radius: calc(var(--radius-sm) + 0.1rem);
    background: color-mix(in srgb, var(--bg-surface) 88%, transparent);
    padding: 0.58rem 0.62rem;
    display: grid;
    align-content: space-between;
    gap: 0.2rem;
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text-primary) 6%, transparent);
}

.athlete-history-window__summary-card dt {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.66rem;
    font-weight: 850;
    letter-spacing: 0.04em;
    line-height: 1.12;
    text-transform: uppercase;
}

.athlete-history-window__summary-card dd {
    margin: 0;
    font-size: 1rem;
    font-weight: 850;
    line-height: 1.12;
}

.athlete-history-window__summary-card small {
    color: var(--text-muted);
    font-size: 0.68rem;
    line-height: 1.18;
}

.athlete-history-window__summary-card--pr {
    border-color: color-mix(in srgb, var(--success) 38%, var(--border-strong));
}

.athlete-history-window__summary-card--pr dd {
    color: color-mix(in srgb, var(--success) 84%, var(--text-primary));
}

.athlete-history-window__summary-card--recent {
    border-color: color-mix(in srgb, var(--accent) 34%, var(--border-strong));
}

.athlete-history-window__summary-card--average {
    border-color: color-mix(in srgb, var(--info) 30%, var(--border-strong));
}

.athlete-history-window__summary-card--score {
    border-color: color-mix(in srgb, var(--score) 38%, var(--border-strong));
}

.athlete-history-window__summary-card--attempts {
    border-color: color-mix(in srgb, var(--success) 26%, var(--border-strong));
}

.athlete-history-window__score-pair {
    display: grid;
    gap: 0.22rem;
}

.athlete-history-window__score-pair > span {
    display: flex;
    justify-content: space-between;
    gap: 0.45rem;
    color: var(--text-secondary);
    font-size: 0.72rem;
}

.athlete-history-window__score-pair strong {
    color: color-mix(in srgb, var(--score) 82%, var(--text-primary));
}

.athlete-history-window__insight-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0.38rem;
    align-items: center;
}

.athlete-history-window__insight-strip span {
    border: 1px solid var(--border);
    border-radius: 999px;
    background: color-mix(in srgb, var(--bg-surface) 82%, transparent);
    color: var(--text-secondary);
    padding: 0.32rem 0.52rem;
    font-size: 0.7rem;
    font-weight: 750;
    line-height: 1.1;
}

.athlete-history-window__analytics-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.28fr) minmax(11rem, 0.72fr);
    gap: 0.55rem;
}

.athlete-history-window__analytics-hero-main,
.athlete-history-window__analytics-hero-trend,
.athlete-history-window__analytics-kpi,
.athlete-history-window__attempts-panel {
    border: 1px solid color-mix(in srgb, var(--border-strong) 70%, transparent);
    border-radius: calc(var(--radius-sm) + 0.15rem);
    background: color-mix(in srgb, var(--bg-surface) 88%, transparent);
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text-primary) 8%, transparent);
}

.athlete-history-window__analytics-hero-main {
    min-height: 8rem;
    padding: 0.82rem 0.92rem;
    display: grid;
    align-content: center;
    gap: 0.2rem;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--accent) 18%, transparent), transparent 54%),
        color-mix(in srgb, var(--bg-surface) 91%, transparent);
}

.athlete-history-window__analytics-hero-main strong {
    font-size: clamp(2rem, 7vw, 3.2rem);
    line-height: 0.98;
    letter-spacing: -0.05em;
}

.athlete-history-window__analytics-hero-main span:last-child {
    color: var(--text-secondary);
    font-size: 0.82rem;
    font-weight: 700;
}

.athlete-history-window__eyebrow {
    color: var(--text-secondary);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.athlete-history-window__analytics-hero-trend {
    padding: 0.72rem;
    display: grid;
    gap: 0.18rem;
    align-content: center;
}

.athlete-history-window__analytics-hero-trend--up {
    border-color: color-mix(in srgb, var(--success) 42%, var(--border));
    background: linear-gradient(135deg, color-mix(in srgb, var(--success) 14%, transparent), transparent 60%), color-mix(in srgb, var(--bg-surface) 90%, transparent);
}

.athlete-history-window__analytics-hero-trend--down {
    border-color: color-mix(in srgb, var(--danger) 42%, var(--border));
    background: linear-gradient(135deg, color-mix(in srgb, var(--danger) 13%, transparent), transparent 60%), color-mix(in srgb, var(--bg-surface) 90%, transparent);
}

.athlete-history-window__analytics-hero-icon {
    width: 2.15rem;
    aspect-ratio: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    color: var(--accent-strong);
    background: color-mix(in srgb, var(--accent) 14%, transparent);
}

.athlete-history-window__analytics-hero-trend--up .athlete-history-window__analytics-hero-icon {
    color: var(--success);
    background: color-mix(in srgb, var(--success) 14%, transparent);
}

.athlete-history-window__analytics-hero-trend--down .athlete-history-window__analytics-hero-icon {
    color: var(--danger);
    background: color-mix(in srgb, var(--danger) 14%, transparent);
}

.athlete-history-window__analytics-hero-trend strong {
    font-size: 1.36rem;
    line-height: 1;
}

.athlete-history-window__analytics-hero-trend small {
    color: var(--text-secondary);
    font-size: 0.74rem;
    line-height: 1.25;
}

.athlete-history-window__analytics-kpis {
    margin: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.45rem;
}

.athlete-history-window__analytics-kpi {
    min-width: 0;
    padding: 0.58rem 0.62rem;
    display: grid;
    gap: 0.12rem;
}

.athlete-history-window__analytics-kpi--accent {
    border-color: color-mix(in srgb, var(--accent) 40%, var(--border-strong));
}

.athlete-history-window__analytics-kpi dt {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.athlete-history-window__analytics-kpi dd {
    margin: 0;
    font-size: 1rem;
    font-weight: 850;
    line-height: 1.12;
}

.athlete-history-window__analytics-kpi small {
    color: var(--text-muted);
    font-size: 0.68rem;
    line-height: 1.18;
}

.athlete-history-window__attempts-panel {
    padding: 0.65rem;
    display: grid;
    grid-template-columns: minmax(7.4rem, 0.32fr) minmax(0, 1fr);
    gap: 0.7rem;
    align-items: center;
}

.athlete-history-window__attempts-panel > div:first-child {
    display: grid;
    gap: 0.12rem;
}

.athlete-history-window__attempts-panel > div:first-child strong {
    font-size: 1.55rem;
    line-height: 1;
}

.athlete-history-window__attempts-panel > div:first-child small {
    color: var(--text-secondary);
    font-size: 0.7rem;
}

.athlete-history-window__attempt-bars {
    margin: 0;
    display: grid;
    gap: 0.42rem;
}

.athlete-history-window__attempt-bars div,
.athlete-history-window__attempt-bars dt,
.athlete-history-window__attempt-bars dd {
    margin: 0;
}

.athlete-history-window__attempt-bars dt {
    display: flex;
    justify-content: space-between;
    gap: 0.55rem;
    color: var(--text-secondary);
    font-size: 0.72rem;
    font-weight: 800;
}

.athlete-history-window__attempt-bars dt strong {
    color: var(--text-primary);
}

.athlete-history-window__attempt-bars dd {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 0.5rem;
    align-items: center;
}

.athlete-history-window__attempt-bars dd small {
    color: var(--text-muted);
    font-size: 0.68rem;
    white-space: nowrap;
}

.athlete-history-window__attempt-delta {
    color: var(--text-muted) !important;
}

.athlete-history-window__attempt-delta--up {
    color: color-mix(in srgb, var(--success) 86%, var(--text-primary)) !important;
}

.athlete-history-window__attempt-delta--down {
    color: color-mix(in srgb, var(--danger) 86%, var(--text-primary)) !important;
}

.athlete-history-window__attempt-track {
    height: 0.44rem;
    overflow: hidden;
    border-radius: 999px;
    background: color-mix(in srgb, var(--border) 70%, transparent);
}

.athlete-history-window__attempt-fill {
    display: block;
    height: 100%;
    min-width: 0.25rem;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--accent), var(--accent-strong));
}

.athlete-history-window__attempt-fill--strong {
    background: linear-gradient(90deg, var(--success), color-mix(in srgb, var(--success) 72%, white));
}

.athlete-history-window__attempt-fill--risk {
    background: linear-gradient(90deg, var(--danger), color-mix(in srgb, var(--danger) 72%, white));
}

.athlete-history-window__attempt-fill--pressure {
    opacity: 0.86;
}

@media (max-width: 900px) {
    .athlete-history-window__summary-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .athlete-history-window__analytics-hero,
    .athlete-history-window__attempts-panel {
        grid-template-columns: 1fr;
    }

    .athlete-history-window__analytics-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .athlete-history-window__summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 520px) {
    .athlete-history-window__analytics-grid,
    .athlete-history-window__attempts-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .athlete-history-window__summary-grid {
        grid-template-columns: 1fr;
    }
}

.athlete-history-window__bests-list {
    margin: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.4rem;
}

.athlete-history-window__bests-list div {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--bg-surface) 88%, transparent);
    padding: 0.42rem 0.5rem;
    display: grid;
    gap: 0.1rem;
}

.athlete-history-window__bests-list dt {
    margin: 0;
    font-size: 0.7rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
}

.athlete-history-window__bests-list dd {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 700;
}

.athlete-history-window__bests-total {
    border-color: color-mix(in srgb, var(--accent) 35%, var(--border-strong)) !important;
}

.athlete-history-window__bests-total dd {
    color: color-mix(in srgb, var(--accent-strong) 85%, var(--text-primary));
}

.athlete-history-window__starts-table-wrap {
    overflow-x: auto;
    max-height: 18rem;
}

.athlete-history-window__starts-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.78rem;
}

.athlete-history-window__starts-table th,
.athlete-history-window__starts-table td {
    text-align: left;
    padding: 0.4rem 0.5rem;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
    vertical-align: top;
}

.athlete-history-window__starts-table th {
    font-size: 0.7rem;
    text-transform: uppercase;
    color: var(--text-secondary);
    letter-spacing: 0.04em;
}

.athlete-history-window__starts-table tbody tr:last-child td {
    border-bottom: 0;
}

.athlete-history-window__starts-table td small {
    display: block;
    color: var(--text-secondary);
    font-size: 0.7rem;
}

.athlete-history-window__cell--pb {
    color: color-mix(in srgb, var(--accent-strong) 85%, var(--text-primary));
    font-weight: 700;
}

.athlete-history-window__empty {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.82rem;
}

.athlete-history-window__empty-state {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.7rem;
    padding: 0.76rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--bg-surface-muted) 64%, transparent);
}

.athlete-history-window__source {
    color: var(--text-secondary);
    font-size: 0.74rem;
    display: grid;
    gap: 0.1rem;
}

.athlete-history-window__source p {
    margin: 0;
}

.ranking-slot__prediction-quick-action--ghost {
    background: color-mix(in srgb, var(--bg-surface) 88%, transparent);
    border-style: dashed;
}

.prediction-action-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: var(--prediction-action-bar-offset);
    width: min(112rem, calc(100vw - 2rem));
    margin-inline: auto;
    z-index: 35;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--bg-surface) 92%, transparent);
    backdrop-filter: blur(14px);
    box-shadow: var(--shadow-card);
    padding: 0.5rem;
    display: grid;
    align-items: center;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.48rem;
}

.prediction-action-bar .app-button {
    gap: 0.42rem;
}

.prediction-action-bar__left,
.prediction-action-bar__actions,
.prediction-action-bar__secondary-actions {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.prediction-action-bar__status {
    min-width: 0;
    display: none;
    gap: 0.22rem;
    justify-items: center;
    text-align: center;
}

.prediction-action-bar__status strong {
    overflow-wrap: anywhere;
    font-size: 0.85rem;
}

.prediction-action-bar__status span {
    color: var(--text-secondary);
    font-size: 0.78rem;
}

.prediction-action-bar__back-icon {
    transform: rotate(180deg);
}

.prediction-action-bar__actions {
    justify-content: flex-end;
}

.prediction-action-bar--review .prediction-action-bar__back {
    min-width: 0;
    max-width: 100%;
}

.prediction-action-bar--review .prediction-action-bar__back span,
.prediction-action-bar--review .prediction-action-bar__primary span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.prediction-action-bar__secondary-actions {
    display: none;
}

.prediction-action-bar__more {
    position: relative;
}

.prediction-action-bar__more-button {
    gap: 0.36rem;
}

.prediction-action-bar__menu {
    position: absolute;
    right: 0;
    bottom: calc(100% + 0.48rem);
    width: min(15rem, calc(100vw - 2rem));
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--bg-surface) 98%, transparent);
    box-shadow: var(--shadow-card);
    padding: 0.32rem;
    display: grid;
    gap: 0.18rem;
}

.prediction-action-bar__menu-item {
    min-height: 2.4rem;
    width: 100%;
    border: 0;
    border-radius: 0.46rem;
    background: transparent;
    color: var(--text-primary);
    padding-inline: 0.62rem;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.86rem;
    font-weight: 700;
    text-align: left;
}

.prediction-action-bar__menu-item:hover {
    background: color-mix(in srgb, var(--bg-surface-muted) 84%, transparent);
}

.prediction-review-page {
    display: grid;
    gap: 0.85rem;
}

@media (max-width: 899.98px) {
    .app-shell--no-mobile-tabs .app-mobile-nav {
        display: none;
    }

    .app-shell--no-mobile-tabs .app-shell__content {
        padding-block: 1.5rem calc(env(safe-area-inset-bottom) + 4.4rem);
    }

    .app-shell--no-mobile-tabs .prediction-shell {
        --prediction-action-bar-offset: calc(env(safe-area-inset-bottom) + 0.6rem);
        --prediction-bottom-bar-space: calc(env(safe-area-inset-bottom) + 4.4rem);
        --prediction-rail-bottom: calc(env(safe-area-inset-bottom) + 4.4rem);
    }

    .app-shell--no-mobile-tabs .prediction-review-page {
        --prediction-action-bar-offset: calc(env(safe-area-inset-bottom) + 0.6rem);
        padding-bottom: calc(env(safe-area-inset-bottom) + 4.4rem);
    }

    .app-shell--no-mobile-tabs .floating-window-host__taskbar {
        bottom: calc(env(safe-area-inset-bottom) + 4.4rem);
    }

    .prediction-action-bar {
        padding: 0.4rem;
        gap: 0.35rem;
    }

    .prediction-action-bar .app-button {
        padding-inline: 0.55rem;
    }

    .prediction-action-bar--review {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .prediction-action-bar--review .prediction-action-bar__left {
        overflow: hidden;
    }

    .prediction-action-bar--review .prediction-action-bar__actions {
        flex-shrink: 0;
    }

    .prediction-action-bar--review .prediction-action-bar__back {
        justify-content: flex-start;
    }
}

@media (max-width: 390px) {
    .prediction-action-bar--review .prediction-action-bar__back {
        width: 2.4rem;
        padding-inline: 0;
        justify-content: center;
    }

    .prediction-action-bar--review .prediction-action-bar__back span {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
        border: 0;
    }
}

.prediction-status-badge {
    min-height: 1.5rem;
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    border: 1px solid var(--border);
    padding-inline: 0.56rem;
    font-size: 0.73rem;
    font-weight: 700;
    white-space: nowrap;
}

.prediction-status-badge--not-started {
    color: var(--text-secondary);
    background: color-mix(in srgb, var(--bg-surface-muted) 88%, transparent);
}

.prediction-status-badge--in-progress {
    color: color-mix(in srgb, var(--warning) 86%, var(--text-primary));
    border-color: color-mix(in srgb, var(--warning) 40%, var(--border));
    background: color-mix(in srgb, var(--warning) 16%, transparent);
}

.prediction-status-badge--complete {
    color: color-mix(in srgb, var(--success) 88%, var(--text-primary));
    border-color: color-mix(in srgb, var(--success) 40%, var(--border));
    background: color-mix(in srgb, var(--success) 16%, transparent);
}

.prediction-empty-state {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--bg-surface-muted) 86%, transparent);
    padding: 0.82rem;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.62rem;
    align-items: start;
}

.prediction-empty-state__icon {
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--border-strong) 80%, transparent);
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.prediction-empty-state h3 {
    margin: 0;
    font-size: 0.95rem;
}

.prediction-empty-state p {
    margin: 0.3rem 0 0;
    color: var(--text-secondary);
    font-size: 0.86rem;
}

.topn-module {
    container-type: inline-size;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--bg-surface) 90%, transparent);
    padding: 0.78rem;
    display: grid;
    gap: 0.62rem;
}

.topn-module__header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.72rem 0.9rem;
    align-items: start;
}

.topn-module__header-main {
    min-width: 0;
    display: grid;
    gap: 0.18rem;
}

.topn-module__header-title-row {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.topn-module__header h2 {
    margin: 0;
    font-size: 1.1rem;
    line-height: 1.16;
}

.topn-module__header-status {
    min-height: 1.45rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 0.14rem 0.48rem;
    display: inline-flex;
    align-items: center;
    color: var(--text-secondary);
    background: color-mix(in srgb, var(--bg-surface-strong) 82%, transparent);
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
}

.topn-module__header-status--complete {
    color: color-mix(in srgb, var(--success) 86%, var(--text-primary));
    border-color: color-mix(in srgb, var(--success) 38%, var(--border));
    background: color-mix(in srgb, var(--success) 14%, var(--bg-surface));
}

.topn-module__header-status--in-progress {
    color: color-mix(in srgb, var(--warning) 88%, var(--text-primary));
    border-color: color-mix(in srgb, var(--warning) 46%, var(--border));
    background: color-mix(in srgb, var(--warning) 13%, var(--bg-surface));
}

.topn-module__header-status--not-started {
    color: var(--text-muted);
    border-color: color-mix(in srgb, var(--border-strong) 72%, transparent);
}

.topn-module__header p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.8rem;
}

.topn-module__header-index {
    font-weight: 500;
}

.topn-module__header-hint {
    color: var(--text-muted) !important;
    font-size: 0.78rem !important;
    font-weight: 700;
}

.topn-module__actions {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.45rem;
    justify-content: flex-end;
    align-items: center;
    max-width: 100%;
    min-width: 0;
}

.topn-module__actions .app-button {
    min-height: 2rem;
    border-radius: 0.48rem;
    padding-inline: 0.68rem;
    font-size: 0.78rem;
}

.topn-module__actions .app-button--secondary:first-child {
    color: color-mix(in srgb, var(--danger) 84%, var(--text-primary));
    border-color: color-mix(in srgb, var(--danger) 42%, var(--border));
    background: color-mix(in srgb, var(--danger) 10%, var(--bg-surface));
}

.topn-module__action-content {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.36rem;
}

.topn-module__action-content span:last-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.topn-module__clear-action {
    width: 2.08rem;
    min-width: 2.08rem;
    padding-inline: 0;
    color: color-mix(in srgb, var(--danger) 88%, var(--text-primary));
    border-color: color-mix(in srgb, var(--danger) 44%, var(--border));
}

.topn-module__clear-action:hover {
    border-color: color-mix(in srgb, var(--danger) 64%, var(--border-strong));
    background: color-mix(in srgb, var(--danger) 10%, var(--bg-surface));
}

.topn-module__clear-label {
    display: none;
}

.topn-module__header-progress {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.7rem;
    align-items: center;
}

.topn-module__header-progress-track {
    height: 0.28rem;
    border-radius: 999px;
    overflow: hidden;
    background: color-mix(in srgb, var(--border-strong) 68%, transparent);
}

.topn-module__header-progress-track span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(
        90deg,
        color-mix(in srgb, var(--warning) 94%, var(--accent)),
        color-mix(in srgb, var(--warning) 76%, var(--accent))
    );
}

.topn-module__header-progress strong {
    color: var(--text-secondary);
    font-size: 0.76rem;
    line-height: 1;
    white-space: nowrap;
}

@container (max-width: 44rem) {
    .topn-module__header {
        grid-template-columns: minmax(0, 1fr);
    }

    .topn-module__actions {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .topn-module__actions .app-button {
        max-width: 100%;
    }
}

@container (max-width: 32rem) {
    .topn-module__actions .app-button:not(.topn-module__clear-action) {
        flex: 1 1 13rem;
    }

    .topn-module__header-progress {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.48rem;
    }
}

.topn-module__mobile-picker {
    display: block;
}

.topn-module__desktop-tabs {
    display: none;
}

.topn-module__desktop-tab {
    min-height: 2.2rem;
    border: 1px solid var(--border);
    border-radius: 0.52rem;
    background: color-mix(in srgb, var(--bg-surface) 90%, transparent);
    color: var(--text-secondary);
    padding-inline: 0.7rem;
    font-size: 0.82rem;
    font-weight: 700;
}

.topn-module__desktop-tab--active {
    color: var(--text-primary);
    border-color: color-mix(in srgb, var(--accent) 54%, var(--border));
    background: color-mix(in srgb, var(--accent) 14%, var(--bg-surface));
}

.topn-module__layout {
    display: grid;
    gap: 0.72rem;
}

.topn-module__workspace-stack {
    min-width: 0;
    display: grid;
    gap: 0.62rem;
}

.topn-module__sidebar {
    display: none;
    min-width: 0;
}

.topn-module__sidebar-module {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--bg-surface-muted) 86%, transparent);
    padding: 0.52rem;
    display: grid;
    gap: 0.42rem;
}

.topn-module__sidebar-module-head {
    display: flex;
    justify-content: space-between;
    gap: 0.44rem;
    align-items: flex-start;
}

.topn-module__sidebar-module-head strong {
    font-size: 0.83rem;
    line-height: 1.2;
}

.topn-module__sidebar-module small {
    color: var(--text-secondary);
    font-size: 0.74rem;
}

.topn-module__categories {
    display: none;
    min-height: 0;
}

.topn-module__workspace,
.topn-module__candidates {
    min-width: 0;
    display: grid;
    gap: 0.62rem;
}

.topn-module__inline-context {
    display: none;
    min-width: 0;
}

.category-picker {
    display: grid;
    gap: 0.32rem;
}

.category-picker span {
    color: var(--text-muted);
    font-size: 0.76rem;
    font-weight: 700;
}

.category-status-list {
    border: 1px solid var(--border);
    border-radius: 0.72rem;
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--bg-surface-strong) 86%, transparent),
            color-mix(in srgb, var(--bg-surface-muted) 94%, transparent)
        );
    padding: 0.66rem;
    display: grid;
    gap: 0.62rem;
    min-height: 0;
}

.category-status-list__head,
.category-status-list__group-head {
    display: flex;
    justify-content: space-between;
    gap: 0.62rem;
    align-items: baseline;
}

.category-status-list__head h3 {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.15;
}

.category-status-list__head span {
    color: var(--text-secondary);
    font-size: 0.68rem;
    font-weight: 800;
    line-height: 1;
}

.category-status-list__groups,
.category-status-list__items {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    min-height: 0;
}

.category-status-list__groups {
    gap: 0.74rem;
    align-content: start;
}

.category-status-list__group {
    display: grid;
    gap: 0.32rem;
    min-width: 0;
}

.category-status-list__group-head span,
.category-status-list__group-head strong {
    color: var(--text-muted);
    font-size: 0.62rem;
    font-weight: 800;
    line-height: 1;
    text-transform: uppercase;
}

.category-status-list__items {
    gap: 0.1rem;
    align-content: start;
}

.category-status-list__button {
    width: 100%;
    min-height: 2.1rem;
    border: 1px solid transparent;
    border-radius: 0.5rem;
    background: transparent;
    padding: 0.32rem 0.36rem;
    color: inherit;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.42rem;
    align-items: center;
    text-align: left;
    cursor: pointer;
}

.category-status-list__button:hover {
    background: color-mix(in srgb, var(--bg-surface) 64%, transparent);
    border-color: color-mix(in srgb, var(--border-strong) 78%, transparent);
}

.category-status-list__button--active {
    border-color: color-mix(in srgb, var(--accent) 58%, var(--border));
    background: color-mix(in srgb, var(--accent) 15%, var(--bg-surface));
}

.category-status-list__button strong {
    display: block;
    min-width: 0;
    color: var(--text-secondary);
    font-size: 0.76rem;
    font-weight: 800;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.category-status-list__button--active strong {
    color: var(--text-primary);
}

.category-status-list__indicator {
    position: relative;
    width: 1rem;
    height: 1rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--border-strong) 70%, transparent);
    display: inline-grid;
    place-items: center;
    color: var(--text-muted);
    background: color-mix(in srgb, var(--bg-page) 34%, transparent);
}

.category-status-list__indicator--complete {
    border-color: color-mix(in srgb, var(--success) 62%, var(--border));
    background: color-mix(in srgb, var(--success) 20%, transparent);
    color: color-mix(in srgb, var(--success) 82%, white);
}

.category-status-list__indicator--in-progress {
    border-color: color-mix(in srgb, var(--warning) 68%, var(--border));
    background: color-mix(in srgb, var(--warning) 17%, transparent);
}

.category-status-list__indicator--in-progress::after {
    content: "";
    width: 0.34rem;
    height: 0.34rem;
    border-radius: 999px;
    background: var(--warning);
}

.category-status-list__status {
    justify-self: end;
    min-width: 2.08rem;
    min-height: 1.05rem;
    border-radius: 999px;
    padding: 0.1rem 0.38rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.61rem;
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
}

.category-status-list__status--complete {
    border: 1px solid color-mix(in srgb, var(--success) 44%, transparent);
    background: color-mix(in srgb, var(--success) 17%, transparent);
    color: color-mix(in srgb, var(--success) 78%, white);
}

.category-status-list__status--in-progress {
    border: 1px solid color-mix(in srgb, var(--warning) 48%, transparent);
    background: color-mix(in srgb, var(--warning) 20%, transparent);
    color: color-mix(in srgb, var(--warning) 82%, white);
}

.category-status-list__status--not-started {
    padding-inline: 0;
    color: var(--text-muted);
}

.prediction-shell__left-rail .category-status-list {
    height: auto;
    max-height: 100%;
    min-height: 0;
    display: grid;
    grid-template-rows: auto minmax(0, auto);
    align-content: start;
    overflow: hidden;
}

.prediction-shell__left-rail .category-status-list__groups {
    overflow-y: auto;
    padding-right: 0.08rem;
}

.topn-module--external-sidebar .topn-module__layout {
    grid-template-columns: minmax(0, 1fr);
}

.topn-module--external-sidebar .topn-module__workspace-stack {
    grid-column: 1;
}

.ranking-builder {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--bg-surface-muted) 86%, transparent);
    padding: 0.62rem;
    display: grid;
    gap: 0.6rem;
}

.ranking-builder h3 {
    margin: 0;
    font-size: 0.93rem;
}

.ranking-builder__slots {
    display: grid;
    gap: 0.48rem;
}

.ranking-slot {
    border: 1px dashed color-mix(in srgb, var(--border-strong) 74%, transparent);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--bg-surface) 88%, transparent);
    padding: 0.44rem 0.5rem;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.5rem;
    align-items: center;
    min-height: 3rem;
}

.ranking-slot--filled {
    border-style: solid;
}

.ranking-slot--interactive {
    cursor: pointer;
}

.ranking-slot--selector-target {
    border-color: color-mix(in srgb, var(--danger) 74%, var(--border));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--danger) 54%, transparent);
}

.ranking-slot--context-active {
    border-color: color-mix(in srgb, var(--accent) 78%, var(--border));
    background: color-mix(in srgb, var(--accent) 16%, var(--bg-surface));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 52%, transparent);
}

.ranking-slot--prediction-active {
    border-color: color-mix(in srgb, var(--accent) 58%, var(--border));
    background: color-mix(in srgb, var(--accent) 8%, var(--bg-surface));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 34%, transparent);
}

.ranking-slot__position {
    width: 1.72rem;
    height: 1.72rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--accent) 52%, var(--border));
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    color: var(--accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    font-weight: 700;
}

.ranking-slot__empty {
    display: grid;
    gap: 0.12rem;
}

.ranking-slot__empty strong {
    display: block;
    font-size: 0.86rem;
}

.ranking-slot__empty small {
    color: var(--text-secondary);
    font-size: 0.78rem;
}

.ranking-slot__athlete {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.4rem;
    align-items: center;
}

.ranking-slot__details {
    min-width: 0;
    border: 0;
    background: transparent;
    padding: 0;
    text-align: left;
    color: inherit;
    cursor: pointer;
}

.ranking-slot__details:hover strong {
    color: var(--text-primary);
}

.ranking-slot__details strong {
    display: block;
    font-size: 0.89rem;
    line-height: 1.25;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
}

.ranking-slot__details small {
    display: block;
    color: var(--text-secondary);
    font-size: 0.79rem;
}

.ranking-slot__details--context-active strong {
    color: var(--accent-strong);
}

.ranking-slot--context-active .ranking-slot__position {
    border-color: color-mix(in srgb, var(--accent) 76%, var(--border));
    background: color-mix(in srgb, var(--accent) 24%, transparent);
    color: var(--accent-strong);
}

.ranking-slot__country {
    display: inline-flex !important;
    align-items: center;
    gap: 0.34rem;
}

.ranking-slot__side {
    display: flex;
    align-items: center;
    justify-content: end;
    gap: 0.38rem;
    flex-wrap: wrap;
}

.ranking-slot__total {
    min-height: 1.72rem;
    border: 1px solid color-mix(in srgb, var(--border-strong) 78%, transparent);
    border-radius: 0.48rem;
    background: color-mix(in srgb, var(--bg-surface) 94%, transparent);
    color: var(--text-primary);
    font-size: 0.84rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    padding: 0 0.52rem;
    gap: 0.22rem;
}

.ranking-slot__total span {
    color: var(--text-secondary);
    font-size: 0.64rem;
    text-transform: uppercase;
    letter-spacing: 0;
}

.ranking-slot__total strong {
    color: inherit;
    font-size: 0.8rem;
}

.ranking-slot__total--predicted {
    border-color: color-mix(in srgb, var(--success) 72%, var(--border));
    background: color-mix(in srgb, var(--success) 15%, var(--bg-surface));
    color: var(--success);
}

.ranking-slot__actions {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.ranking-slot__action {
    min-height: 1.72rem;
    min-width: 2.05rem;
    border: 1px solid var(--border);
    border-radius: 0.48rem;
    background: color-mix(in srgb, var(--bg-surface) 90%, transparent);
    color: var(--text-secondary);
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0 0.28rem;
}

.ranking-slot__action--edit {
    min-width: 7.6rem;
    padding-inline: 0.56rem;
    gap: 0.35rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.ranking-slot__action--danger {
    border-color: color-mix(in srgb, var(--danger) 38%, var(--border));
    color: color-mix(in srgb, var(--danger) 82%, var(--text-primary));
}

.ranking-slot__action--danger-pending {
    border-color: color-mix(in srgb, var(--danger) 76%, var(--border));
    background: color-mix(in srgb, var(--danger) 13%, var(--bg-surface));
    color: color-mix(in srgb, var(--danger) 96%, var(--text-primary));
}

.ranking-slot__action--icon {
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.ranking-slot__action-icon {
    display: block;
}

.ranking-slot__action-icon--up {
    transform: rotate(-90deg);
}

.ranking-slot__action-icon--down {
    transform: rotate(90deg);
}

.ranking-slot__action:disabled {
    opacity: 0.45;
}

.ranking-slot__action:not(:disabled):hover {
    color: var(--text-primary);
    border-color: var(--border-strong);
}

.ranking-slot__prediction-summary {
    grid-column: 2;
    color: var(--text-secondary);
    font-size: 0.76rem;
    font-weight: 650;
    letter-spacing: 0;
}

.ranking-slot__remove-hint {
    grid-column: 2;
    margin: 0;
    color: color-mix(in srgb, var(--danger) 88%, var(--text-primary));
    font-size: 0.72rem;
    font-weight: 700;
}

.ranking-slot__prediction-editor {
    grid-column: 1 / -1;
    border: 1px solid color-mix(in srgb, var(--accent) 48%, var(--border));
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--bg-surface) 94%, var(--bg-surface-muted));
    padding: 0.5rem;
    display: grid;
    gap: 0.42rem;
}

.ranking-slot__prediction-editor-head {
    display: grid;
    gap: 0.4rem;
    grid-template-columns: minmax(0, 1fr) minmax(9.2rem, auto);
    align-items: start;
}

.ranking-slot__prediction-editor-title {
    display: inline-flex;
    align-items: center;
    gap: 0.36rem;
}

.ranking-slot__prediction-editor-head strong {
    display: block;
    font-size: 0.86rem;
}

.ranking-slot__prediction-mode {
    display: flex;
    flex-wrap: wrap;
    gap: 0.32rem;
}

.ranking-slot__prediction-mode-option {
    min-height: 1.84rem;
    border: 1px solid var(--border);
    border-radius: 0.48rem;
    background: color-mix(in srgb, var(--bg-surface) 92%, transparent);
    padding: 0 0.58rem;
    display: inline-flex;
    align-items: center;
    gap: 0.34rem;
    font-size: 0.75rem;
    font-weight: 700;
}

.ranking-slot__prediction-fields {
    display: grid;
    gap: 0.34rem;
}

.ranking-slot__prediction-fields--lifts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
}

.ranking-slot__prediction-fields label {
    display: grid;
    gap: 0.14rem;
    color: var(--text-secondary);
    font-size: 0.72rem;
    font-weight: 700;
}

.ranking-slot__prediction-fields input {
    min-width: 0;
}

.ranking-slot__prediction-editor .control {
    min-height: 1.86rem;
    padding-block: 0.28rem;
}

.ranking-slot__prediction-calculated-total {
    min-height: 3.48rem;
    border: 1px solid color-mix(in srgb, var(--success) 58%, var(--border));
    border-radius: 0.48rem;
    background: color-mix(in srgb, var(--success) 10%, var(--bg-surface));
    padding: 0.34rem 0.45rem;
    display: grid;
    gap: 0.16rem;
}

.ranking-slot__prediction-calculated-total span {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    color: color-mix(in srgb, var(--text-secondary) 90%, var(--success));
    font-size: 0.66rem;
    font-weight: 700;
}

.ranking-slot__prediction-calculated-total strong {
    color: var(--success);
    font-size: 0.92rem;
}

.ranking-slot__prediction-calculated-total small {
    color: var(--text-secondary);
    font-size: 0.64rem;
}

.ranking-slot__prediction-calculated-total--empty {
    border-color: color-mix(in srgb, var(--border-strong) 70%, transparent);
    background: color-mix(in srgb, var(--bg-surface) 96%, transparent);
}

.ranking-slot__prediction-calculated-total--empty strong {
    color: var(--text-secondary);
}

.ranking-slot__prediction-quick-actions,
.ranking-slot__prediction-editor-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    flex-wrap: wrap;
    gap: 0.24rem;
}

.ranking-slot__prediction-quick-title {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.74rem;
    font-weight: 700;
}

.ranking-slot__prediction-quick-action {
    min-height: 2.1rem;
    border: 1px solid var(--border);
    border-radius: 0.48rem;
    background: color-mix(in srgb, var(--bg-surface) 92%, transparent);
    color: var(--text-secondary);
    padding: 0.28rem 0.42rem;
    font-size: 0.7rem;
    font-weight: 700;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0.14rem 0.36rem;
    text-align: left;
}

.ranking-slot__prediction-quick-action span {
    color: var(--text-primary);
    font-size: 0.74rem;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ranking-slot__prediction-quick-action small {
    grid-column: 2;
    color: var(--text-secondary);
    font-size: 0.64rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ranking-slot__prediction-quick-action .app-icon {
    color: var(--accent);
}

.ranking-slot__prediction-quick-action--history {
    grid-template-columns: auto minmax(0, 1fr);
    align-content: center;
}

.ranking-slot__prediction-quick-action--history small {
    display: none;
}

.ranking-slot__prediction-quick-action:hover {
    color: var(--text-primary);
    border-color: var(--border-strong);
}

.ranking-slot__prediction-empty {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.7rem;
}

.ranking-slot__prediction-source {
    font-size: 0.68rem;
}

.ranking-slot__prediction-error {
    margin: 0;
    color: var(--danger);
    font-size: 0.7rem;
    font-weight: 700;
}

.ranking-slot__prediction-editor-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    grid-template-columns: none;
    gap: 0.36rem;
}

.athlete-candidate-list {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--bg-surface-muted) 86%, transparent);
    padding: 0.6rem;
    display: grid;
    gap: 0.62rem;
}

.athlete-candidate-list__head {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    align-items: baseline;
}

.athlete-candidate-list__head h3 {
    margin: 0;
    font-size: 0.93rem;
}

.athlete-candidate-list__head small {
    color: var(--text-secondary);
    font-size: 0.79rem;
}

.athlete-candidate-list__controls {
    display: grid;
    gap: 0.5rem;
}

.athlete-candidate-list__rows {
    max-height: 27rem;
    overflow-y: auto;
    display: grid;
    gap: 0.45rem;
    padding-right: 0.08rem;
}

.athlete-candidate-row {
    border: 1px solid var(--border);
    border-radius: 0.56rem;
    background: color-mix(in srgb, var(--bg-surface) 90%, transparent);
    padding: 0.45rem 0.52rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.5rem;
    align-items: center;
}

.athlete-candidate-row--selected {
    border-color: color-mix(in srgb, var(--success) 44%, var(--border));
}

.athlete-candidate-row--context-active {
    border-color: color-mix(in srgb, var(--accent) 74%, var(--border));
    background: color-mix(in srgb, var(--accent) 16%, var(--bg-surface));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 50%, transparent);
}

.athlete-candidate-row--context-active .athlete-candidate-row__details strong {
    color: var(--accent-strong);
}

.athlete-candidate-row__details {
    min-width: 0;
    border: 0;
    background: transparent;
    padding: 0;
    text-align: left;
    color: inherit;
    cursor: pointer;
}

.athlete-candidate-row__details:hover strong {
    color: var(--text-primary);
}

.athlete-candidate-row__details strong {
    display: block;
    font-size: 0.88rem;
    line-height: 1.22;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
}

.athlete-candidate-row__details small {
    display: block;
    color: var(--text-secondary);
    font-size: 0.78rem;
}

.athlete-candidate-row__country {
    display: inline-flex !important;
    align-items: center;
    gap: 0.34rem;
}

.athlete-candidate-row__meta {
    display: grid;
    justify-items: end;
    gap: 0.38rem;
}

.athlete-candidate-row__total {
    color: color-mix(in srgb, var(--text-primary) 86%, var(--text-secondary));
    font-size: 1.04rem;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
}

.athlete-candidate-row__total--muted {
    color: var(--text-secondary);
    font-size: 0.82rem;
    font-weight: 600;
}

.athlete-candidate-row__meta .app-button {
    min-width: 5.25rem;
}

.athlete-candidate-row__picked {
    color: var(--success);
    font-weight: 700;
    font-size: 0.86rem;
    line-height: 1;
    white-space: nowrap;
}

.prediction-shell__left-rail .category-status-list__groups,
.prediction-shell__center-column,
.athlete-candidate-list__rows,
.prediction-context-panel__selector-list,
.topn-module__categories .category-status-list__groups,
.prediction-shell__summary-rail .prediction-summary-panel,
.prediction-shell__summary-drawer .prediction-summary-panel,
.prediction-shell__summary-rail .prediction-context-panel,
.prediction-shell__summary-drawer .prediction-context-panel,
.prediction-context-panel__history-table-wrap {
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--border-strong) 88%, transparent) transparent;
}

.prediction-shell__left-rail .category-status-list__groups::-webkit-scrollbar,
.prediction-shell__center-column::-webkit-scrollbar,
.athlete-candidate-list__rows::-webkit-scrollbar,
.prediction-context-panel__selector-list::-webkit-scrollbar,
.topn-module__categories .category-status-list__groups::-webkit-scrollbar,
.prediction-shell__summary-rail .prediction-summary-panel::-webkit-scrollbar,
.prediction-shell__summary-drawer .prediction-summary-panel::-webkit-scrollbar,
.prediction-shell__summary-rail .prediction-context-panel::-webkit-scrollbar,
.prediction-shell__summary-drawer .prediction-context-panel::-webkit-scrollbar,
.prediction-context-panel__history-table-wrap::-webkit-scrollbar {
    width: 0.62rem;
    height: 0.62rem;
}

.prediction-shell__left-rail .category-status-list__groups::-webkit-scrollbar-track,
.prediction-shell__center-column::-webkit-scrollbar-track,
.athlete-candidate-list__rows::-webkit-scrollbar-track,
.prediction-context-panel__selector-list::-webkit-scrollbar-track,
.topn-module__categories .category-status-list__groups::-webkit-scrollbar-track,
.prediction-shell__summary-rail .prediction-summary-panel::-webkit-scrollbar-track,
.prediction-shell__summary-drawer .prediction-summary-panel::-webkit-scrollbar-track,
.prediction-shell__summary-rail .prediction-context-panel::-webkit-scrollbar-track,
.prediction-shell__summary-drawer .prediction-context-panel::-webkit-scrollbar-track,
.prediction-context-panel__history-table-wrap::-webkit-scrollbar-track {
    background: color-mix(in srgb, var(--bg-surface) 78%, transparent);
    border-radius: 999px;
}

.prediction-shell__left-rail .category-status-list__groups::-webkit-scrollbar-thumb,
.prediction-shell__center-column::-webkit-scrollbar-thumb,
.athlete-candidate-list__rows::-webkit-scrollbar-thumb,
.prediction-context-panel__selector-list::-webkit-scrollbar-thumb,
.topn-module__categories .category-status-list__groups::-webkit-scrollbar-thumb,
.prediction-shell__summary-rail .prediction-summary-panel::-webkit-scrollbar-thumb,
.prediction-shell__summary-drawer .prediction-summary-panel::-webkit-scrollbar-thumb,
.prediction-shell__summary-rail .prediction-context-panel::-webkit-scrollbar-thumb,
.prediction-shell__summary-drawer .prediction-context-panel::-webkit-scrollbar-thumb,
.prediction-context-panel__history-table-wrap::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--border-strong) 92%, transparent);
    border-radius: 999px;
    border: 2px solid color-mix(in srgb, var(--bg-surface) 78%, transparent);
}

.prediction-shell__left-rail .category-status-list__groups::-webkit-scrollbar-thumb:hover,
.prediction-shell__center-column::-webkit-scrollbar-thumb:hover,
.athlete-candidate-list__rows::-webkit-scrollbar-thumb:hover,
.prediction-context-panel__selector-list::-webkit-scrollbar-thumb:hover,
.topn-module__categories .category-status-list__groups::-webkit-scrollbar-thumb:hover,
.prediction-shell__summary-rail .prediction-summary-panel::-webkit-scrollbar-thumb:hover,
.prediction-shell__summary-drawer .prediction-summary-panel::-webkit-scrollbar-thumb:hover,
.prediction-shell__summary-rail .prediction-context-panel::-webkit-scrollbar-thumb:hover,
.prediction-shell__summary-drawer .prediction-context-panel::-webkit-scrollbar-thumb:hover,
.prediction-context-panel__history-table-wrap::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--accent) 48%, var(--border-strong));
}

.module-validation-summary {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--bg-surface-muted) 86%, transparent);
    padding: 0.58rem 0.62rem;
    display: grid;
    gap: 0.3rem;
}

.module-validation-summary p {
    margin: 0;
    font-size: 0.84rem;
}

.module-validation-summary__hint {
    color: var(--text-secondary);
}

.module-validation-summary__success {
    color: color-mix(in srgb, var(--success) 88%, var(--text-primary));
    font-weight: 700;
}

.flag-emoji {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    font-size: 1rem;
    line-height: 1;
}

#blazor-error-ui {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    display: none;
    padding: 0.7rem 0.9rem;
    background: #fef3c7;
    color: #713f12;
    box-shadow: var(--shadow-card);
    font-size: 0.85rem;
}

#blazor-error-ui .dismiss {
    position: absolute;
    right: 0.6rem;
    top: 0.4rem;
    cursor: pointer;
}

@media (max-width: 1023.98px) {
    input,
    select,
    textarea,
    .control {
        font-size: 16px;
    }

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

    .ranking-slot__side {
        display: grid;
        gap: 0.34rem;
        justify-content: flex-start;
    }

    .ranking-slot__actions {
        display: grid;
        width: 100%;
        grid-template-columns: minmax(0, 1fr) repeat(3, 2.1rem);
        gap: 0.3rem;
        align-items: center;
    }

    .ranking-slot__action--edit {
        grid-column: 1;
        min-width: 0;
        width: 100%;
        justify-content: flex-start;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .ranking-slot__prediction-editor {
        padding: 0.44rem;
        gap: 0.36rem;
    }

    .ranking-slot__prediction-editor-head {
        grid-template-columns: 1fr;
    }

    .ranking-slot__prediction-calculated-total {
        min-height: 0;
        padding: 0.3rem 0.4rem;
    }

    .ranking-slot__prediction-calculated-total strong {
        font-size: 0.84rem;
    }

    .ranking-slot__prediction-fields--lifts {
        grid-template-columns: 1fr;
    }

    .ranking-slot__prediction-quick-actions {
        grid-template-columns: 1fr;
    }

    .ranking-slot__prediction-quick-action {
        min-height: 1.96rem;
    }

    .ranking-slot__prediction-quick-action small {
        display: none;
    }

    .ranking-slot__prediction-editor-actions {
        justify-content: stretch;
    }

    .ranking-slot__prediction-editor-actions .app-button {
        flex: 1;
    }

    .floating-window-host__mobile-backdrop {
        display: block;
    }

    .floating-window {
        position: fixed;
        left: 0 !important;
        right: 0;
        top: 0 !important;
        bottom: 0;
        width: 100vw !important;
        max-width: 100vw;
        height: 100dvh !important;
        max-height: 100dvh !important;
        border-radius: 0;
        border: 0;
        box-shadow: none;
    }

    .floating-window__header {
        cursor: default;
        padding: calc(0.55rem + env(safe-area-inset-top)) 0.65rem 0.55rem;
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .floating-window__grab {
        display: none;
    }

    .floating-window__resize-handle {
        display: none;
    }

    .floating-window__body {
        padding-bottom: calc(0.85rem + env(safe-area-inset-bottom));
    }

    .floating-window-host__taskbar {
        right: 0.6rem;
        bottom: calc(var(--app-mobile-nav-height) + 0.72rem);
    }

    .athlete-history-window__meta,
    .athlete-history-window__bests-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .athlete-history-window__starts-table {
        font-size: 0.72rem;
    }
}

@media (min-width: 640px) {
    .page-container {
        padding-inline: 1.25rem;
    }

    .prediction-action-bar {
        width: min(112rem, calc(100vw - 2.5rem));
    }

    .app-topbar__inner {
        padding-inline: 1.25rem;
    }

    .home-hero-panel__content,
    .prediction-header__main,
    .prediction-journey-header__identity,
    .prediction-shell-header__main {
        padding: 1.28rem;
    }

    .home-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

@media (min-width: 900px) {
    .app-topbar__inner {
        grid-template-columns: auto 1fr auto;
        align-items: center;
        column-gap: 1rem;
    }

    .app-topbar__nav {
        display: flex;
        grid-column: 2 / 3;
        grid-row: 1 / 2;
        min-width: 0;
    }

    .app-topbar__controls {
        grid-column: 3 / 4;
        grid-row: 1 / 2;
    }

    .app-topbar__controls .theme-toggle {
        display: inline-flex;
    }

    .app-mobile-nav {
        display: none;
    }

    .prediction-journey-header__main {
        grid-template-columns: minmax(0, 1fr) 19.5rem;
        align-items: stretch;
    }

    .prediction-shell-header__meta {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .prediction-shell-header__summary {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
        align-items: center;
        column-gap: 0.7rem;
    }

    .prediction-action-bar {
        bottom: calc(2.3rem + env(safe-area-inset-bottom));
        grid-template-columns: auto minmax(16rem, 1fr) auto;
        gap: 0.75rem;
        border-radius: var(--radius-md);
        padding: 0.72rem;
    }

    .prediction-action-bar__status {
        display: grid;
    }

    .prediction-action-bar__secondary-actions {
        display: flex;
    }

    .prediction-action-bar__more {
        display: none;
    }

    .home-stat-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .competition-card {
        min-height: 19rem;
    }

    .competition-card__status .competition-status-badge__content::before {
        display: none;
    }

    .competition-card__status .competition-status-badge__icon {
        display: inline-block;
    }

    .competition-card__title {
        font-size: clamp(2rem, 3vw, 2.3rem);
    }

    .competition-card__meta {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

    .competition-overview-modules__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .prediction-step-strip:not(.prediction-step-strip--wizard) {
        grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    }

    .prediction-layout,
    .prediction-wizard-layout {
        grid-template-columns: minmax(0, 1fr) 20.5rem;
    }

    .ranking-dnd {
        grid-template-columns: minmax(0, 1fr) minmax(16rem, 42%);
        align-items: start;
    }
}

@media (min-width: 1080px) {
    .app-topbar__inner {
        padding-inline: 2rem;
    }

    .app-shell__content {
        padding-block: 1.8rem 2.6rem;
    }

    .prediction-action-bar {
        width: min(112rem, calc(100vw - 4rem));
    }

    .page-container {
        padding-inline: 2rem;
    }

    .app-logo__subtitle {
        font-size: 0.58rem;
    }

    .home-hero-panel {
        position: static;
        grid-template-columns: minmax(0, 1fr) minmax(26rem, 48%);
        min-height: 25.5rem;
    }

    .home-hero-panel__content {
        max-width: none;
        padding: 1.95rem 2.2rem;
        align-content: center;
    }

    .home-hero-panel__title {
        max-width: 13ch;
    }

    .home-hero-panel__eyebrow {
        display: block;
    }

    .home-hero-panel__media {
        position: static;
        inset: auto;
        min-height: 100%;
        background:
            linear-gradient(
                90deg,
                rgb(5 12 24 / 1) 0%,
                rgb(5 12 24 / 0.88) 10%,
                rgb(5 12 24 / 0.2) 36%,
                transparent 52%
            ),
            linear-gradient(
                180deg,
                rgb(4 11 22 / 0.08) 0%,
                rgb(4 11 22 / 0.62) 100%
            ),
            url("/assets/hero/totalcall-hero-main.webp") 64% center / cover
                no-repeat;
    }

    .home-hero-panel__points {
        display: flex;
        flex-wrap: wrap;
        gap: 1.15rem;
    }

    .competition-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .competition-overview-layout {
        grid-template-columns: minmax(0, 1fr) 26.5rem;
        align-items: stretch;
    }

    .competition-overview-hero__meta {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.78rem;
    }

    .competition-overview-modules__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .prediction-header {
        grid-template-columns: minmax(0, 1fr) 20rem;
        align-items: stretch;
    }

    .athlete-candidate-list__controls {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .prediction-context-panel__actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .category-podium-board {
        grid-template-columns: 16rem minmax(0, 1fr);
    }

    .category-podium-board__tabs-wrap {
        border-right: 1px solid var(--border);
        border-bottom: 0;
    }

    .app-page-header {
        grid-template-columns: minmax(0, 1fr) 19rem;
        align-items: end;
    }
}

@media (min-width: 1024px) {
    .app-shell:has(.prediction-shell) {
        height: 100dvh;
        overflow: hidden;
        display: grid;
        grid-template-rows: auto minmax(0, 1fr);
    }

    .app-shell:has(.prediction-shell) .app-shell__main {
        min-height: 0;
        overflow: hidden;
        overscroll-behavior: contain;
    }

    .app-shell__content:has(.prediction-shell) {
        height: 100%;
        min-height: 0;
        padding-bottom: 0;
        display: grid;
        grid-template-rows: minmax(0, 1fr) auto;
    }

    .app-shell__content:has(.prediction-shell) .app-shell__meta {
        margin-top: 0.25rem;
        padding-top: 0.45rem;
    }

    .app-shell__article:has(.prediction-shell) {
        height: 100%;
        min-height: 0;
        grid-template-rows: minmax(0, 1fr);
    }

    .prediction-shell {
        --prediction-action-bar-offset: calc(2.3rem + env(safe-area-inset-bottom));
        --prediction-bottom-bar-space: 7.25rem;
        --prediction-rail-bottom: 7.25rem;
        height: 100%;
        min-height: 0;
        grid-template-rows: minmax(0, 1fr);
        overflow: hidden;
        padding-bottom: var(--prediction-bottom-bar-space);
    }

    .prediction-shell__frame,
    .prediction-shell__main-area,
    .prediction-shell__content-row,
    .prediction-shell__center-column {
        min-height: 0;
    }

    .prediction-shell__frame {
        height: 100%;
        align-content: stretch;
        align-items: stretch;
    }

    .prediction-shell__main-area {
        height: 100%;
        grid-template-rows: minmax(0, 1fr);
        align-content: stretch;
    }

    .prediction-shell__content-row,
    .prediction-shell__center-column {
        height: 100%;
    }

    .prediction-shell__center-column {
        overflow-y: auto;
        overscroll-behavior: contain;
        padding-bottom: var(--prediction-bottom-bar-space);
    }

    .prediction-shell-header__main {
        padding: 0.72rem 0.82rem 0.62rem;
        gap: 0.5rem;
    }

    .prediction-shell-header__meta {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .topn-module__layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .topn-module__workspace-stack {
        grid-column: 1;
    }

    .topn-module__sidebar {
        display: none;
    }

    .topn-module__mobile-picker {
        display: block;
    }

    .topn-module__categories {
        display: none;
    }

}

@media (min-width: 1024px) and (max-width: 1279.98px) {
    .prediction-shell__left-rail,
    .prediction-shell__summary-rail {
        display: none;
    }

    .topn-module__desktop-tabs {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.45rem;
    }

    .topn-module__workspace,
    .topn-module__inline-context {
        display: none;
    }

    .topn-module__workspace.is-pane-active {
        display: grid;
    }

    .topn-module__inline-context.is-pane-active {
        display: block;
    }
}

@media (min-width: 1280px) {
    .prediction-shell {
        --prediction-rail-top: 0.75rem;
        --prediction-rail-height: 100%;
        --prediction-left-rail-max-height: calc(100dvh - 5.6rem - var(--prediction-rail-bottom));
    }

    .prediction-shell__frame {
        grid-template-columns: minmax(15rem, 17.25rem) minmax(0, 1fr);
        column-gap: 1.1rem;
        row-gap: 0.88rem;
        align-content: stretch;
        align-items: stretch;
    }

    .prediction-shell__left-rail {
        grid-column: 1;
        grid-row: 1;
    }

    .prediction-shell__main-area {
        grid-column: 2;
        grid-row: 1;
        gap: 0.88rem;
        align-content: stretch;
    }

    .prediction-shell__content-row {
        grid-template-columns: minmax(0, 1fr) minmax(24rem, 28rem);
        gap: 1.1rem;
        align-content: stretch;
        align-items: stretch;
    }

    .prediction-shell__center-column {
        grid-column: 1;
        grid-row: 1;
        align-self: stretch;
    }

    .prediction-shell__summary-rail {
        grid-column: 2;
        grid-row: 1;
        align-self: stretch;
    }

    .prediction-shell-header__summary {
        grid-template-columns: minmax(14rem, 1fr) minmax(13rem, 0.78fr);
        align-items: center;
        column-gap: 1rem;
    }

    .prediction-shell-header__meta {
        grid-template-columns: minmax(13rem, 1fr);
        gap: 0;
        align-items: stretch;
    }

    .prediction-shell-header__meta-item {
        border: 0;
        border-left: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
        border-radius: 0;
        background: transparent;
        padding: 0.12rem 0.78rem;
        align-content: center;
        min-height: 4.1rem;
    }

    .prediction-shell-header__meta-item strong {
        white-space: nowrap;
    }

    .prediction-shell-header__progress-track {
        height: 0.34rem;
    }

    .prediction-shell__left-rail {
        display: block;
        position: sticky;
        top: var(--prediction-rail-top);
        align-self: start;
        min-height: 0;
        height: auto;
        max-height: var(--prediction-left-rail-max-height);
        overflow: visible;
    }

    .prediction-shell__summary-rail {
        display: block;
        position: sticky;
        top: var(--prediction-rail-top);
        align-self: stretch;
        min-height: 0;
        height: 100%;
        max-height: var(--prediction-rail-height);
        overflow: hidden;
    }

    .prediction-shell__left-rail-inner {
        height: auto;
        max-height: var(--prediction-left-rail-max-height);
        min-height: 0;
        grid-template-rows: auto minmax(0, auto);
        align-content: start;
        overflow: visible;
    }

    .prediction-shell__left-rail .category-status-list {
        max-height: calc(var(--prediction-left-rail-max-height) - 6.2rem);
    }

    .prediction-shell__summary-rail-content {
        height: 100%;
        max-height: var(--prediction-rail-height);
        min-height: 0;
        display: block;
        overflow: hidden;
    }

    .prediction-shell__summary-panel-wrap {
        width: 100%;
        height: 100%;
        max-height: var(--prediction-rail-height);
        min-height: 0;
        display: block;
        overflow: hidden;
    }

    .prediction-shell__summary-rail .prediction-summary-panel,
    .prediction-shell__summary-rail .prediction-context-panel {
        width: 100%;
        height: 100%;
        min-height: 0;
        max-height: var(--prediction-rail-height);
        overflow-y: auto;
    }

    .prediction-shell__summary-rail .prediction-context-panel:has(.prediction-context-panel__selector) {
        overflow: hidden;
    }

    .prediction-shell__summary-backdrop,
    .prediction-shell__summary-drawer {
        display: none;
    }

    .topn-module__mobile-picker {
        display: none;
    }

    .topn-module__desktop-tabs {
        display: none;
    }

    .topn-module:not(.topn-module--external-sidebar) .topn-module__layout {
        grid-template-columns: minmax(15rem, 17rem) minmax(0, 1fr);
        align-items: start;
    }

    .topn-module:not(.topn-module--external-sidebar) .topn-module__workspace-stack {
        grid-column: 2;
    }

    .topn-module:not(.topn-module--external-sidebar) .topn-module__sidebar {
        display: grid;
        grid-template-rows: auto minmax(0, 1fr);
        gap: 0.62rem;
        align-self: start;
        position: sticky;
        top: 5.6rem;
        bottom: var(--prediction-rail-bottom);
        max-height: calc(100dvh - 5.6rem - var(--prediction-rail-bottom));
        overflow: hidden;
    }

    .topn-module:not(.topn-module--external-sidebar) .topn-module__categories {
        display: block;
        overflow-y: auto;
    }

    .topn-module:not(.topn-module--external-sidebar) .topn-module__categories .category-status-list {
        height: 100%;
    }

    .topn-module:not(.topn-module--external-sidebar) .topn-module__categories .category-status-list__groups {
        overflow-y: auto;
    }

    .topn-module__inline-context {
        display: none;
    }
}

@media (max-width: 1023.98px) {
    .prediction-shell {
        padding-bottom: var(--prediction-bottom-bar-space);
    }
}

@media (min-width: 1600px) {
    .prediction-shell__frame {
        grid-template-columns: minmax(15.5rem, 17.5rem) minmax(0, 1fr);
        column-gap: 1.45rem;
    }

    .prediction-shell__content-row {
        grid-template-columns: minmax(0, 1fr) minmax(25rem, 30rem);
        column-gap: 1.45rem;
    }
}

/* What's New modal */

.whats-new-dialog-layer {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: grid;
    place-items: center;
    padding: 1.1rem;
    overscroll-behavior: contain;
}

.whats-new-dialog__backdrop {
    position: absolute;
    inset: 0;
    z-index: 0;
    border: 0;
    background: rgb(3 10 21 / 0.76);
    backdrop-filter: blur(3px);
    cursor: pointer;
}

.whats-new-dialog {
    position: relative;
    z-index: 1;
    width: min(40rem, 100%);
    max-height: min(86vh, 48rem);
    overflow: auto;
    border: 1px solid color-mix(in srgb, var(--border-strong) 90%, transparent);
    border-radius: var(--radius-md);
    background:
        linear-gradient(
            160deg,
            color-mix(in srgb, var(--accent) 10%, var(--bg-surface)) 0%,
            color-mix(in srgb, var(--bg-surface) 94%, transparent) 60%
        ),
        color-mix(in srgb, var(--bg-surface) 94%, transparent);
    padding: 1.1rem 1.2rem 1.2rem;
    display: grid;
    gap: 1rem;
    box-shadow: 0 24px 72px rgb(0 0 0 / 0.46);
}

.whats-new-dialog__head {
    display: flex;
    justify-content: space-between;
    gap: 0.6rem;
    align-items: flex-start;
}

.whats-new-dialog__eyebrow {
    display: block;
    color: var(--accent);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.whats-new-dialog__head h2 {
    margin: 0.25rem 0 0;
    font-size: 1.4rem;
    line-height: 1.2;
}

.whats-new-dialog__close {
    min-height: 2rem;
    min-width: 2rem;
    border: 1px solid var(--border);
    border-radius: 0.56rem;
    background: color-mix(in srgb, var(--bg-surface) 90%, transparent);
    color: var(--text-secondary);
    font-size: 1.2rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.whats-new-dialog__close:hover {
    color: var(--text-primary);
    border-color: var(--border-strong);
}

.whats-new-dialog__body {
    display: grid;
    gap: 1rem;
}

.whats-new-release {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--bg-surface-muted) 88%, transparent);
    padding: 0.9rem 0.95rem;
    display: grid;
    gap: 0.6rem;
}

.whats-new-release__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.whats-new-release__head h3 {
    margin: 0;
    font-size: 1.02rem;
    font-weight: 700;
}

.whats-new-release__subtitle {
    color: var(--text-secondary);
    font-weight: 500;
    margin-left: 0.25rem;
}

.whats-new-release__head small {
    color: var(--text-secondary);
    font-size: 0.78rem;
}

.whats-new-release__items {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.45rem;
}

.whats-new-release__item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.55rem;
    align-items: start;
    font-size: 0.92rem;
    line-height: 1.4;
}

.whats-new-release__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 3.4rem;
    padding: 0.16rem 0.5rem;
    border-radius: 999px;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--bg-surface) 86%, transparent);
    color: var(--text-secondary);
    line-height: 1;
}

.whats-new-release__item--feature .whats-new-release__badge {
    color: var(--accent);
    border-color: color-mix(in srgb, var(--accent) 56%, transparent);
    background: color-mix(in srgb, var(--accent) 12%, transparent);
}

.whats-new-release__item--fix .whats-new-release__badge {
    color: #f5a524;
    border-color: color-mix(in srgb, #f5a524 56%, transparent);
    background: color-mix(in srgb, #f5a524 12%, transparent);
}

.whats-new-release__item--improvement .whats-new-release__badge {
    color: #4ea8de;
    border-color: color-mix(in srgb, #4ea8de 56%, transparent);
    background: color-mix(in srgb, #4ea8de 12%, transparent);
}

.whats-new-release__text {
    color: var(--text-primary);
}

.whats-new-dialog__footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

.whats-new-dialog__primary {
    min-height: 2.4rem;
    padding: 0 1.2rem;
    border-radius: 0.6rem;
    border: 1px solid color-mix(in srgb, var(--accent) 72%, transparent);
    background: var(--accent);
    color: var(--accent-contrast, #fff);
    font-weight: 700;
    font-size: 0.92rem;
    cursor: pointer;
}

.whats-new-dialog__primary:hover {
    filter: brightness(1.05);
}


/* Footer meta row */

.app-shell__meta-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.app-shell__meta-sep {
    color: var(--text-muted);
    font-size: 0.72rem;
    user-select: none;
}


/* Privacy modal */

.privacy-dialog-layer {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: grid;
    place-items: center;
    padding: 1.1rem;
    overscroll-behavior: contain;
}

.privacy-dialog__backdrop {
    position: absolute;
    inset: 0;
    z-index: 0;
    border: 0;
    background: rgb(3 10 21 / 0.76);
    backdrop-filter: blur(3px);
    cursor: pointer;
}

.privacy-dialog {
    position: relative;
    z-index: 1;
    width: min(38rem, 100%);
    max-height: min(86vh, 46rem);
    overflow: auto;
    border: 1px solid color-mix(in srgb, var(--border-strong) 90%, transparent);
    border-radius: var(--radius-md);
    background: var(--bg-surface);
    padding: 1.1rem 1.2rem 1.2rem;
    display: grid;
    gap: 1rem;
    box-shadow: 0 24px 72px rgb(0 0 0 / 0.46);
}

.privacy-dialog__head {
    display: flex;
    justify-content: space-between;
    gap: 0.6rem;
    align-items: flex-start;
}

.privacy-dialog__head h2 {
    margin: 0;
    font-size: 1.3rem;
    line-height: 1.2;
}

.privacy-dialog__close {
    min-height: 2rem;
    min-width: 2rem;
    border: 1px solid var(--border);
    border-radius: 0.56rem;
    background: color-mix(in srgb, var(--bg-surface) 90%, transparent);
    color: var(--text-secondary);
    font-size: 1.2rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.privacy-dialog__close:hover {
    color: var(--text-primary);
    border-color: var(--border-strong);
}

.privacy-dialog__body {
    display: grid;
    gap: 0.6rem;
}

.privacy-section {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--bg-surface-muted) 88%, transparent);
    padding: 0.8rem 0.9rem;
    display: grid;
    gap: 0.35rem;
}

.privacy-section__title {
    margin: 0;
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--text-primary);
}

.privacy-section__body {
    margin: 0;
    font-size: 0.86rem;
    color: var(--text-secondary);
    line-height: 1.55;
}

.privacy-section__provider {
    margin: 0.2rem 0 0;
    font-size: 0.78rem;
    color: var(--text-muted);
    font-style: italic;
}

.privacy-dialog__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.privacy-dialog__note {
    color: var(--text-muted);
    font-size: 0.76rem;
    line-height: 1.45;
    flex: 1;
    min-width: 0;
}

.privacy-dialog__close-btn {
    min-height: 2.4rem;
    padding: 0 1.2rem;
    border-radius: 0.6rem;
    border: 1px solid var(--border-strong);
    background: color-mix(in srgb, var(--bg-surface) 80%, transparent);
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.92rem;
    cursor: pointer;
    white-space: nowrap;
}

.privacy-dialog__close-btn:hover {
    background: color-mix(in srgb, var(--bg-surface) 95%, var(--text-primary));
}


/* =======================================================================
   HOME SCOREBOARD
   ====================================================================== */

.scoreboard-page {
    display: grid;
    gap: 1.35rem;
}

.country-tag {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--bg-surface-muted) 80%, transparent);
    color: var(--text-secondary);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    padding: 0.18rem 0.42rem;
    border-radius: 0.32rem;
}

.tier-badge {
    display: inline-grid;
    place-items: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 0.36rem;
    font-size: 0.78rem;
    font-weight: 800;
    border: 1px solid var(--border);
}

.tier-badge--s {
    border-color: color-mix(in srgb, var(--accent) 60%, var(--border));
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 16%, transparent);
}

.tier-badge--a {
    border-color: color-mix(in srgb, var(--warning) 56%, var(--border));
    color: color-mix(in srgb, var(--warning) 88%, var(--text-primary));
    background: color-mix(in srgb, var(--warning) 16%, transparent);
}

.tier-badge--b {
    color: var(--text-secondary);
    background: color-mix(in srgb, var(--bg-surface-muted) 80%, transparent);
}

.mini-progress {
    width: 100%;
    height: 0.34rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--border) 80%, transparent);
    overflow: hidden;
}

.mini-progress__fill {
    height: 100%;
    border-radius: inherit;
    background: var(--accent);
    transition: width 130ms ease;
}

.filter-chips {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.42rem;
}

.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 2rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: color-mix(in srgb, var(--bg-surface) 84%, transparent);
    padding: 0.32rem 0.78rem;
    color: var(--text-secondary);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 130ms ease, border-color 130ms ease, color 130ms ease;
}

.filter-chip:hover {
    color: var(--text-primary);
    border-color: var(--border-strong);
}

.filter-chip--active {
    color: var(--text-primary);
    border-color: color-mix(in srgb, var(--accent) 60%, var(--border));
    background: color-mix(in srgb, var(--accent) 16%, transparent);
}

.filter-chip__dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 999px;
}

.filter-chip__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.32rem;
    height: 1.32rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--bg-surface-muted) 85%, transparent);
    border: 1px solid var(--border);
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0 0.32rem;
}

.filter-chip--active .filter-chip__count {
    background: color-mix(in srgb, var(--accent) 22%, transparent);
    border-color: color-mix(in srgb, var(--accent) 50%, var(--border));
}

.search-input {
    display: inline-grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.6rem;
    min-height: 2.4rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--bg-surface) 88%, transparent);
    padding: 0.36rem 0.7rem;
    color: var(--text-muted);
    width: 100%;
}

.search-input:focus-within {
    border-color: color-mix(in srgb, var(--accent) 60%, var(--border));
    color: var(--text-primary);
}

.search-input input {
    border: 0;
    background: transparent;
    outline: none;
    color: var(--text-primary);
    font-size: 0.92rem;
    font-weight: 500;
    min-width: 0;
    width: 100%;
}

.search-input input::placeholder {
    color: var(--text-muted);
}

.search-input__clear {
    border: 0;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    display: inline-flex;
    padding: 0.18rem;
}

.search-input__clear:hover {
    color: var(--text-primary);
}

.sb-section {
    display: grid;
    gap: 1.1rem;
}

.sb-marquee {
    position: relative;
    border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border));
    border-radius: var(--radius-md);
    background:
        linear-gradient(90deg, rgb(7 16 30 / 0.96) 0%, rgb(7 16 30 / 0.72) 48%, rgb(7 16 30 / 0.25) 100%),
        linear-gradient(180deg, rgb(3 8 16 / 0) 0%, rgb(3 8 16 / 0.55) 100%),
        var(--sb-marquee-bg-image, url("/assets/hero/totalcall-hero-main.webp")) 70% 60% / cover no-repeat;
    padding: 1.2rem 1.4rem;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) auto;
    align-items: center;
    gap: 1.6rem;
    overflow: hidden;
    box-shadow: var(--shadow-card);
}

.sb-marquee__lead {
    display: grid;
    gap: 0.55rem;
}

.sb-marquee__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--accent);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.sb-marquee__pulse {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 999px;
    background: var(--accent);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 60%, transparent);
    animation: sb-pulse 1.8s ease-out infinite;
}

@keyframes sb-pulse {
    0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 65%, transparent); }
    70%  { box-shadow: 0 0 0 0.6rem color-mix(in srgb, var(--accent) 0%, transparent); }
    100% { box-shadow: 0 0 0 0 transparent; }
}

.sb-marquee__title {
    margin: 0;
    font-size: clamp(1.7rem, 3vw, 2.3rem);
    line-height: 1;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.sb-marquee__title em {
    font-style: normal;
    color: var(--accent);
}

.sb-marquee__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem 1.2rem;
    color: var(--text-secondary);
    font-size: 0.88rem;
}

.sb-marquee__meta strong {
    color: var(--text-primary);
    font-weight: 700;
}

.sb-clock {
    display: grid;
    grid-template-columns: repeat(7, auto);
    gap: 0.2rem 0.48rem;
    align-items: stretch;
    border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--border));
    background: color-mix(in srgb, var(--bg-page) 80%, transparent);
    padding: 0.55rem 0.7rem;
    border-radius: var(--radius-sm);
    backdrop-filter: blur(6px);
}

.sb-clock__cell {
    text-align: center;
    min-width: 2.5rem;
}

.sb-clock__num {
    display: block;
    font-variant-numeric: tabular-nums;
    font-size: 1.6rem;
    line-height: 1;
    font-weight: 800;
    color: var(--text-primary);
}

.sb-clock__label {
    display: block;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-top: 0.22rem;
}

.sb-clock__sep {
    font-size: 1.4rem;
    color: var(--text-muted);
    opacity: 0.4;
    align-self: center;
}

.sb-tools {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.9rem;
    align-items: center;
}

.sb-tools__row--secondary {
    grid-template-columns: auto 1fr;
}

.sb-tools__tier {
    display: inline-flex;
    gap: 0.5rem;
    align-items: center;
}

.sb-tools__tier-label {
    color: var(--text-muted);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.sb-tools__summary {
    justify-self: end;
    color: var(--text-muted);
    font-size: 0.84rem;
}

.sb-tools__summary strong {
    color: var(--text-primary);
}

.sb-sec-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.8rem;
    margin-bottom: 0.5rem;
}

.sb-sec-head__lead {
    display: flex;
    align-items: baseline;
    gap: 0.7rem;
    min-width: 0;
}

.sb-sec-head__eyebrow {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.sb-sec-head__dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 999px;
    background: currentColor;
}

.sb-sec-head__count {
    font-size: 0.92rem;
    color: var(--text-muted);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.sb-board {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--bg-surface) 84%, transparent);
    overflow: hidden;
    box-shadow: var(--shadow-card);
}

.sb-row {
    display: grid;
    grid-template-columns:
        3.6rem
        auto
        minmax(0, 1fr)
        9rem
        11rem
        auto;
    align-items: center;
    gap: 1rem;
    padding: 0.78rem 1rem;
    border-top: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
    transition: background 130ms ease;
    text-decoration: none;
    color: inherit;
}

.sb-row:first-child {
    border-top: 0;
}

.sb-row:hover {
    background: color-mix(in srgb, var(--bg-surface-muted) 70%, transparent);
}

.sb-row--featured {
    background: color-mix(in srgb, var(--accent) 7%, transparent);
}

.sb-row--featured:hover {
    background: color-mix(in srgb, var(--accent) 11%, transparent);
}

.sb-date {
    display: grid;
    gap: 0.05rem;
    text-align: center;
    font-variant-numeric: tabular-nums;
    padding: 0.18rem 0;
    border-right: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
    padding-right: 0.6rem;
    margin-right: -0.4rem;
}

.sb-date__day {
    font-size: 1.4rem;
    line-height: 1;
    font-weight: 800;
}

.sb-date__month {
    font-size: 0.62rem;
    letter-spacing: 0.16em;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-muted);
}

.sb-name {
    display: grid;
    gap: 0.18rem;
    min-width: 0;
}

.sb-name__row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.sb-name__title {
    font-size: 1.04rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sb-name__sub {
    font-size: 0.8rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 0.48rem;
    flex-wrap: wrap;
}

.sb-name__sub-divider {
    display: inline-block;
    width: 0.22rem;
    height: 0.22rem;
    border-radius: 999px;
    background: var(--text-muted);
    opacity: 0.5;
}

.sb-mid {
    display: grid;
    gap: 0.16rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.sb-mid__label {
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.sb-mid__val {
    font-weight: 700;
    color: var(--text-primary);
}

.sb-mid__val--muted {
    color: var(--text-muted);
    font-weight: 600;
}

.sb-prog {
    display: grid;
    gap: 0.34rem;
}

.sb-prog__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    font-size: 0.78rem;
    color: var(--text-muted);
}

.sb-prog__count {
    color: var(--text-primary);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.sb-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 0.22rem 0.55rem 0.22rem 0.5rem;
}

.sb-pill__dot {
    width: 0.42rem;
    height: 0.42rem;
    border-radius: 999px;
    background: currentColor;
}

.sb-pill--open {
    color: var(--success);
    border-color: color-mix(in srgb, var(--success) 36%, var(--border));
    background: color-mix(in srgb, var(--success) 14%, transparent);
}

.sb-pill--locked {
    color: var(--accent);
    border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
    background: color-mix(in srgb, var(--accent) 14%, transparent);
}

.sb-pill--completed {
    color: var(--text-secondary);
    border-color: var(--border);
    background: color-mix(in srgb, var(--bg-surface-muted) 80%, transparent);
}

.sb-act {
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--bg-surface) 88%, transparent);
    padding: 0.4rem 0.72rem;
    color: var(--text-primary);
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 130ms ease;
    text-decoration: none;
    white-space: nowrap;
}

.sb-act:hover {
    border-color: var(--border-strong);
    background: color-mix(in srgb, var(--bg-surface-strong) 90%, transparent);
}

.sb-act--primary {
    color: #fff;
    border-color: var(--accent);
    background: linear-gradient(180deg, var(--accent-strong), var(--accent));
}

.sb-act--primary:hover {
    transform: translateY(-1px);
    border-color: var(--accent-strong);
    background: linear-gradient(180deg, var(--accent-strong), var(--accent));
}

.sb-empty {
    border: 1px dashed color-mix(in srgb, var(--border-strong) 60%, transparent);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--bg-surface-muted) 60%, transparent);
    padding: 1.5rem;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.92rem;
}

@media (max-width: 820px) {
    .sb-marquee {
        grid-template-columns: 1fr;
        padding: 1.05rem 1.05rem 1.15rem;
        gap: 0.95rem;
    }

    .sb-marquee__title {
        font-size: 1.55rem;
        line-height: 1.05;
    }

    .sb-marquee__meta {
        font-size: 0.82rem;
        gap: 0.4rem 0.95rem;
    }

    .sb-clock {
        justify-content: space-between;
        padding: 0.55rem 0.65rem;
    }

    .sb-clock__num {
        font-size: 1.3rem;
    }

    .sb-clock__cell {
        min-width: 1.9rem;
    }

    .sb-clock__label {
        font-size: 0.56rem;
        letter-spacing: 0.1em;
    }

    .sb-clock__sep {
        font-size: 1.1rem;
    }

    .sb-tools,
    .sb-tools__row--secondary {
        grid-template-columns: 1fr;
        gap: 0.6rem;
    }

    .sb-tools > * {
        min-width: 0;
    }

    .sb-tools .filter-chips {
        overflow-x: auto;
        flex-wrap: nowrap;
        margin: 0 -0.85rem;
        padding: 0 0.85rem 0.2rem;
        scrollbar-width: none;
    }

    .sb-tools .filter-chips::-webkit-scrollbar {
        display: none;
    }

    .sb-tools .filter-chip {
        flex-shrink: 0;
    }

    .sb-tools__summary {
        justify-self: start;
    }

    .sb-sec-head {
        margin-bottom: 0.25rem;
    }

    .sb-sec-head__eyebrow {
        font-size: 0.65rem;
        letter-spacing: 0.12em;
    }

    .sb-row {
        grid-template-columns: 3.1rem auto minmax(0, 1fr) auto;
        grid-template-rows: auto auto auto;
        align-items: start;
        gap: 0.65rem 0.65rem;
        padding: 0.85rem 0.9rem;
    }

    .sb-row > .sb-date {
        grid-row: 1;
        grid-column: 1;
        border-right: 0;
        padding-right: 0;
        margin-right: 0;
        text-align: left;
    }

    .sb-date__day {
        font-size: 1.32rem;
    }

    .sb-row > .tier-badge {
        grid-row: 1;
        grid-column: 2;
        align-self: center;
    }

    .sb-row > .sb-name {
        grid-row: 1;
        grid-column: 3 / span 2;
        min-width: 0;
    }

    .sb-name__title {
        font-size: 0.98rem;
    }

    .sb-name__sub {
        font-size: 0.74rem;
        gap: 0.36rem;
    }

    .sb-row > .sb-prog {
        grid-row: 2;
        grid-column: 1 / -1;
        padding-top: 0.6rem;
        border-top: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
    }

    .sb-prog__row {
        font-size: 0.78rem;
    }

    .sb-row > .sb-mid {
        grid-row: 3;
        grid-column: 1 / span 3;
        align-self: center;
        padding-top: 0.15rem;
    }

    .sb-mid__label {
        font-size: 0.6rem;
    }

    .sb-mid__val {
        font-size: 0.84rem;
    }

    .sb-row > .sb-act {
        grid-row: 3;
        grid-column: 4;
        align-self: center;
        justify-self: end;
        padding: 0.45rem 0.7rem;
    }

    .sb-row--featured {
        box-shadow: inset 3px 0 0 var(--accent);
    }
}


/* =======================================================================
   TOAST NOTIFICATIONS
   ====================================================================== */

.app-toast-host {
    position: fixed;
    top: calc(env(safe-area-inset-top) + 1rem);
    right: 1rem;
    z-index: 1300;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    pointer-events: none;
    max-width: min(28rem, calc(100vw - 2rem));
}

.app-toast {
    pointer-events: auto;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--bg-surface);
    color: var(--text-primary);
    font-size: 0.88rem;
    line-height: 1.35;
    box-shadow: 0 10px 36px rgb(0 0 0 / 0.38);
    animation: app-toast-in 160ms ease-out;
}

.app-toast--success {
    border-color: color-mix(in srgb, #22c55e 60%, var(--border-strong));
    box-shadow: 0 10px 36px rgb(34 197 94 / 0.16);
}

.app-toast--error {
    border-color: color-mix(in srgb, #ef4444 65%, var(--border-strong));
    box-shadow: 0 10px 36px rgb(239 68 68 / 0.18);
}

.app-toast__icon {
    width: 1.4rem;
    height: 1.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 700;
}

.app-toast--success .app-toast__icon {
    background: color-mix(in srgb, #22c55e 25%, transparent);
    color: #22c55e;
}

.app-toast--error .app-toast__icon {
    background: color-mix(in srgb, #ef4444 25%, transparent);
    color: #ef4444;
}

.app-toast--info .app-toast__icon {
    background: color-mix(in srgb, var(--accent) 22%, transparent);
    color: var(--accent);
}

.app-toast__text {
    min-width: 0;
    word-wrap: break-word;
}

.app-toast__close {
    border: 0;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0.15rem 0.4rem;
    font-size: 1.1rem;
    line-height: 1;
}

.app-toast__close:hover {
    color: var(--text-primary);
}

@keyframes app-toast-in {
    from { transform: translateY(-6px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

@media (max-width: 580px) {
    .app-toast-host {
        right: 0.6rem;
        left: 0.6rem;
        max-width: none;
    }
}

/* =======================================================================
   SHARE & EXPORT MODAL
   ====================================================================== */

.share-dialog-layer {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: grid;
    place-items: center;
    padding: 1.1rem;
    overscroll-behavior: contain;
}

.share-dialog__backdrop {
    position: absolute;
    inset: 0;
    z-index: 0;
    border: 0;
    background: rgb(3 10 21 / 0.76);
    backdrop-filter: blur(3px);
    cursor: pointer;
}

.share-dialog {
    position: relative;
    z-index: 1;
    width: min(38rem, 100%);
    max-height: min(90vh, 52rem);
    overflow: auto;
    border: 1px solid color-mix(in srgb, var(--border-strong) 90%, transparent);
    border-radius: var(--radius-md);
    background: var(--bg-surface);
    padding: 1.1rem 1.2rem 1.2rem;
    display: grid;
    gap: 1rem;
    box-shadow: 0 24px 72px rgb(0 0 0 / 0.46);
}

.share-dialog__head {
    display: flex;
    justify-content: space-between;
    gap: 0.6rem;
    align-items: flex-start;
}

.share-dialog__head-text h2 {
    margin: 0;
    font-size: 1.3rem;
    line-height: 1.2;
}

.share-dialog__subtitle {
    margin: 0.25rem 0 0;
    color: var(--text-secondary);
    font-size: 0.85rem;
    line-height: 1.45;
}

.share-dialog__close {
    min-height: 2rem;
    min-width: 2rem;
    border: 1px solid var(--border);
    border-radius: 0.56rem;
    background: color-mix(in srgb, var(--bg-surface) 90%, transparent);
    color: var(--text-secondary);
    font-size: 1.2rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.share-dialog__close:hover {
    color: var(--text-primary);
    border-color: var(--border-strong);
}

.share-dialog__body {
    display: grid;
    gap: 0.7rem;
}

.share-dialog__notice {
    border-radius: var(--radius-sm);
    padding: 0.6rem 0.75rem;
    font-size: 0.82rem;
    line-height: 1.45;
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--bg-surface-muted) 86%, transparent);
    color: var(--text-secondary);
}

.share-dialog__notice--warn {
    border-color: color-mix(in srgb, #f59e0b 55%, var(--border-strong));
    background: color-mix(in srgb, #f59e0b 12%, var(--bg-surface));
    color: var(--text-primary);
}

.share-cards {
    display: grid;
    gap: 0.6rem;
}

.share-card {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: 0.8rem;
    text-align: left;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--bg-surface-muted) 88%, transparent);
    padding: 0.85rem 0.95rem;
    cursor: pointer;
    color: var(--text-primary);
    transition: border-color 120ms ease, transform 120ms ease, background 120ms ease;
}

.share-card:hover:not(:disabled) {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--bg-surface) 80%, transparent);
}

.share-card:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.share-card[aria-busy="true"] {
    border-color: var(--accent);
}

.share-card__icon {
    width: 2.4rem;
    height: 2.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 16%, var(--bg-surface));
    color: var(--accent);
}

.share-card__content {
    display: grid;
    gap: 0.25rem;
    min-width: 0;
}

.share-card__title-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.share-card__title {
    font-weight: 700;
    font-size: 0.96rem;
}

.share-card__badge {
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.12rem 0.45rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 22%, transparent);
    color: var(--accent);
    border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}

.share-card__description {
    color: var(--text-secondary);
    font-size: 0.84rem;
    line-height: 1.45;
}

.share-card__cta {
    margin-top: 0.3rem;
    color: var(--accent);
    font-weight: 600;
    font-size: 0.85rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.share-card__spinner {
    width: 0.85rem;
    height: 0.85rem;
    border-radius: 999px;
    border: 2px solid color-mix(in srgb, var(--accent) 35%, transparent);
    border-top-color: var(--accent);
    animation: share-card-spin 0.7s linear infinite;
    display: inline-block;
}

@keyframes share-card-spin {
    to { transform: rotate(360deg); }
}

.share-dialog__footer {
    border-top: 1px solid var(--border);
    padding-top: 0.7rem;
}

.share-dialog__note {
    color: var(--text-muted);
    font-size: 0.76rem;
    line-height: 1.5;
}

.share-fallback {
    display: grid;
    gap: 0.55rem;
}

.share-fallback__title {
    margin: 0;
    font-size: 0.95rem;
}

.share-fallback__body {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.85rem;
    line-height: 1.45;
}

.share-fallback__textarea {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-surface-muted);
    color: var(--text-primary);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.82rem;
    line-height: 1.45;
    padding: 0.6rem 0.75rem;
    resize: vertical;
}

.share-fallback__actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

@media (max-width: 580px) {
    .share-dialog {
        padding: 0.9rem 0.95rem 1rem;
    }

    .share-card {
        padding: 0.7rem 0.8rem;
    }
}

/* ============================================================
   Athlete profile — deep-dive window (Variant A) + lean context panel
   Design: redesign/athlete-profile.html (ap-styles.css). Tokens mapped
   onto the app's CSS variables so light/dark themes both work.
   ============================================================ */
.ap,
.prediction-context-panel .sp-content {
    --c-green: var(--success);
    --c-green-bg: color-mix(in srgb, var(--success) 14%, transparent);
    --c-green-bd: color-mix(in srgb, var(--success) 36%, transparent);
    --c-amber: var(--warning);
    --c-amber-bg: color-mix(in srgb, var(--warning) 13%, transparent);
    --c-amber-bd: color-mix(in srgb, var(--warning) 34%, transparent);
    --c-violet: var(--score);
    --c-violet-bg: color-mix(in srgb, var(--score) 15%, transparent);
    --c-violet-bd: color-mix(in srgb, var(--score) 34%, transparent);
    --c-accent-bg: color-mix(in srgb, var(--accent) 13%, transparent);
    --c-accent-bd: color-mix(in srgb, var(--accent) 34%, transparent);
    --c-gold: #e8b64a;
    --c-gold-bg: rgb(232 182 74 / 0.13);
    --c-gold-bd: rgb(232 182 74 / 0.32);
    --c-card: var(--bg-surface-strong);
    --c-inset: var(--bg-surface-muted);
}

/* ---------- window shell ---------- */
.ap {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    container-type: inline-size;
    font-size: 14px;
    line-height: 1.45;
    color: var(--text-primary);
}

/* ---------- identity row ---------- */
.ap-id {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.ap-id .ph {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    flex: none;
    display: grid;
    place-items: center;
    background: var(--c-accent-bg);
    border: 1px solid var(--c-accent-bd);
    color: var(--accent-strong);
    font-weight: 800;
    font-size: 16px;
}

.ap-id__meta {
    min-width: 0;
}

.ap-id .nm {
    font-size: 21px;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.ap-id .ct {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    color: var(--text-secondary);
    font-weight: 600;
    margin-top: 2px;
}

.ap-id .id-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
}

.ap .pill {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.02em;
    padding: 5px 10px;
    border-radius: 20px;
}

.ap .pill.cat {
    color: var(--text-secondary);
    background: var(--c-card);
    border: 1px solid var(--border);
}

.ap .seg {
    display: inline-flex;
    background: var(--c-card);
    border: 1px solid var(--border);
    border-radius: 9px;
    overflow: hidden;
}

.ap .seg button {
    border: 0;
    background: transparent;
    color: var(--text-secondary);
    font-weight: 700;
    font-size: 12px;
    padding: 7px 13px;
    cursor: pointer;
    font-family: inherit;
}

.ap .seg button.on {
    background: var(--accent);
    color: #fff;
}

.ap .seg button:disabled {
    opacity: 0.6;
    cursor: default;
}

/* ---------- slot quick-actions (only when opened from a slot editor) ---------- */
.ap-quick {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--c-inset);
    border: 1px solid var(--border);
}

.ap-quick__hint {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
}

.ap-quick__row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.ap-empty {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    text-align: center;
    padding: 22px 4px;
}

.ap-empty-state {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
    padding: 14px 4px;
}

/* ---------- verdict banner ---------- */
.ap .verdict {
    display: flex;
    align-items: stretch;
    gap: 20px;
    margin-top: 12px;
    padding: 18px 20px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--c-green-bg), transparent);
    border: 1px solid var(--c-green-bd);
}

.ap .verdict.warn {
    background: linear-gradient(135deg, var(--c-amber-bg), transparent);
    border-color: var(--c-amber-bd);
}

.ap .verdict .vd-main {
    flex: 1;
    min-width: 0;
}

.ap .verdict .vd-flag {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--c-green);
}

.ap .verdict.warn .vd-flag {
    color: var(--c-amber);
}

.ap .verdict .vd-flag .pulse {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--c-green);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--success) 18%, transparent);
}

.ap .verdict.warn .vd-flag .pulse {
    background: var(--c-amber);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--warning) 18%, transparent);
}

.ap .verdict h2 {
    font-size: 23px;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 8px 0 4px;
}

.ap .verdict .vd-line {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-secondary);
}

.ap .verdict .vd-line b {
    color: var(--text-primary);
}

.ap .verdict .vd-sep {
    color: var(--text-muted);
}

.ap .verdict .vd-meter {
    margin-top: 14px;
    max-width: 340px;
}

.ap .meter {
    display: flex;
    gap: 4px;
}

.ap .meter i {
    flex: 1;
    height: 7px;
    border-radius: 20px;
    background: var(--c-card);
}

.ap .meter i.on {
    background: linear-gradient(90deg, var(--c-green), color-mix(in srgb, var(--c-green) 55%, #7af0d0));
}

.ap .verdict.warn .meter i.on {
    background: linear-gradient(90deg, var(--c-amber), color-mix(in srgb, var(--c-amber) 55%, #ffe08a));
}

.ap .meter-lbl {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    margin-bottom: 6px;
}

.ap .meter-lbl b {
    color: var(--c-green);
}

.ap .verdict.warn .meter-lbl b {
    color: var(--c-amber);
}

/* NOM -> PROGNOZA hero */
.ap .vd-dual {
    flex: none;
    display: flex;
    align-items: center;
    gap: 16px;
    padding-left: 20px;
    border-left: 1px solid var(--border);
}

.ap .verdict > .vd-dual:first-child {
    border-left: 0;
    padding-left: 0;
    margin-left: auto;
}

.ap .vd-dual .dual-col {
    text-align: right;
}

.ap .vd-dual .dual-col .k {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.1em;
    color: var(--text-muted);
}

.ap .vd-dual .dual-col .v {
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin-top: 3px;
}

.ap .vd-dual .dual-col.pred .v {
    color: var(--c-green);
}

.ap .dual-delta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.ap .dual-delta .arr {
    font-size: 18px;
    color: var(--c-green);
}

.ap .dual-delta .d {
    font-size: 12px;
    font-weight: 800;
    color: var(--c-green);
}

.ap .dual-delta.down .arr,
.ap .dual-delta.down .d {
    color: var(--c-amber);
}

.ap .dual-delta.flat .arr,
.ap .dual-delta.flat .d {
    color: var(--text-muted);
}

/* ---------- section heading ---------- */
.ap .sec-h {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 22px 0 12px;
}

.ap .sec-h .t {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.ap .sec-h .ln {
    flex: 1;
    height: 1px;
    background: var(--border);
}

.ap .sec-h .note {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--text-muted);
}

/* ---------- signal chips ---------- */
.ap .signals {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.ap .sig {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 14px;
    border-radius: 12px;
    background: var(--c-card);
    border: 1px solid var(--border);
    flex: 1 1 0;
    min-width: 170px;
}

.ap .sig .si {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    flex: none;
    display: grid;
    place-items: center;
    font-size: 15px;
    background: var(--c-inset);
    border: 1px solid var(--border);
}

.ap .sig.up .si {
    background: var(--c-green-bg);
    border-color: var(--c-green-bd);
    color: var(--c-green);
}

.ap .sig.acc .si {
    background: var(--c-accent-bg);
    border-color: var(--c-accent-bd);
    color: var(--accent-strong);
}

.ap .sig.vio .si {
    background: var(--c-violet-bg);
    border-color: var(--c-violet-bd);
    color: var(--c-violet);
}

.ap .sig.down .si {
    background: var(--c-amber-bg);
    border-color: var(--c-amber-bd);
    color: var(--c-amber);
}

.ap .sig .sk {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    text-transform: uppercase;
}

.ap .sig .sv {
    font-size: 16px;
    font-weight: 800;
    margin-top: 2px;
}

.ap .sig .sv small {
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 700;
    margin-left: 5px;
}

/* ---------- metric minis ---------- */
.ap .metrics {
    display: grid;
    gap: 10px;
}

.ap .metrics.c1 { grid-template-columns: repeat(1, 1fr); }
.ap .metrics.c2 { grid-template-columns: repeat(2, 1fr); }
.ap .metrics.c3 { grid-template-columns: repeat(3, 1fr); }
.ap .metrics.c4 { grid-template-columns: repeat(4, 1fr); }

.ap .mc {
    background: var(--c-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 13px 15px;
}

.ap .mc .k {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    text-transform: uppercase;
}

.ap .mc .v {
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -0.01em;
    margin-top: 4px;
}

.ap .mc .s {
    font-size: 11.5px;
    color: var(--text-muted);
    font-weight: 600;
    margin-top: 3px;
}

.ap .mc.accent {
    background: linear-gradient(180deg, var(--c-accent-bg), transparent);
    border-color: var(--c-accent-bd);
}

.ap .mc.accent .v {
    color: var(--accent-strong);
}

.ap .mc.good .v {
    color: var(--c-green);
}

.ap .mc .dots-row {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    font-weight: 800;
    margin-top: 4px;
    color: var(--c-violet);
}

.ap .mc .dots-row .lab {
    color: var(--text-muted);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.04em;
    margin-right: 3px;
}

/* ---------- trend chart wrapper ---------- */
.ap .chart-card {
    background: var(--c-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 16px 18px;
}

/* ---------- attempt success ---------- */
.ap .att {
    display: flex;
    flex-direction: column;
    gap: 13px;
}

.ap .att-row .att-top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 12px;
    margin-bottom: 5px;
}

.ap .att-row .att-lift {
    font-weight: 800;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
}

.ap .att-row .att-pct {
    font-weight: 800;
    font-size: 14px;
}

.ap .att-bar {
    height: 8px;
    border-radius: 20px;
    background: var(--c-card);
    overflow: hidden;
    position: relative;
}

.ap .att-bar i {
    display: block;
    height: 100%;
    border-radius: 20px;
    background: linear-gradient(90deg, color-mix(in srgb, var(--c-green) 60%, #0a8060), var(--c-green));
}

.ap .att-bar.partial i {
    background: linear-gradient(90deg, color-mix(in srgb, var(--c-green) 42%, var(--bg-surface-muted)), color-mix(in srgb, var(--c-green) 78%, #ffffff));
}

.ap .att-meta {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 600;
    margin-top: 5px;
}

.ap .att-meta .vs {
    font-weight: 800;
    color: var(--text-secondary);
}

.ap .att-meta .att-delta--up {
    color: var(--c-green);
}

.ap .att-meta .att-delta--down {
    color: var(--c-amber);
}

/* ---------- recent starts table ---------- */
.ap .ap-starts--cards {
    display: none;
}

.ap .tbl {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.ap .tbl th {
    text-align: left;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    text-transform: uppercase;
    padding: 0 12px 10px;
    border-bottom: 1px solid var(--border);
}

.ap .tbl td {
    padding: 13px 12px;
    border-bottom: 1px solid var(--border);
    font-weight: 600;
    color: var(--text-secondary);
}

.ap .tbl tr:last-child td {
    border-bottom: 0;
}

.ap .tbl td.meet {
    color: var(--text-primary);
    font-weight: 700;
}

.ap .tbl td.meet small {
    display: block;
    color: var(--text-muted);
    font-weight: 600;
    font-size: 11px;
    margin-top: 1px;
}

.ap .tbl th.num,
.ap .tbl td.num {
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.ap .tbl td.total {
    color: var(--accent-strong);
    font-weight: 800;
}

.ap .tbl tr.best td {
    background: color-mix(in srgb, var(--accent) 6%, transparent);
}

.ap .tbl .plc {
    display: inline-grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 7px;
    font-weight: 800;
    font-size: 12px;
    background: var(--c-card);
    border: 1px solid var(--border);
    color: var(--text-secondary);
}

.ap .tbl .plc.p1 {
    background: var(--c-gold-bg);
    border-color: var(--c-gold-bd);
    color: var(--c-gold);
}

/* ---------- recent starts as cards (narrow window) ---------- */
.ap .mstart {
    background: var(--c-card);
    border: 1px solid var(--border);
    border-radius: 13px;
    padding: 12px 13px;
    margin-bottom: 9px;
}

.ap .mstart:last-child {
    margin-bottom: 0;
}

.ap .mstart.best {
    background: color-mix(in srgb, var(--accent) 6%, transparent);
    border-color: var(--c-accent-bd);
}

.ap .mstart .ms-top {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ap .mstart .ms-meet-wrap {
    min-width: 0;
}

.ap .mstart .plc {
    display: inline-grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    font-weight: 800;
    font-size: 12px;
    background: var(--c-inset);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    flex: none;
}

.ap .mstart .plc.p1 {
    background: var(--c-gold-bg);
    border-color: var(--c-gold-bd);
    color: var(--c-gold);
}

.ap .mstart .ms-meet {
    font-size: 13.5px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ap .mstart .ms-date {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 600;
    margin-top: 1px;
}

.ap .mstart .ms-bw {
    margin-left: auto;
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 700;
    flex: none;
}

.ap .mstart .ms-lifts {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 7px;
    margin-top: 11px;
}

.ap .mstart .ms-l {
    background: var(--c-inset);
    border-radius: 8px;
    padding: 8px 6px;
    text-align: center;
}

.ap .mstart .ms-l .k {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

.ap .mstart .ms-l .v {
    font-size: 13px;
    font-weight: 800;
    margin-top: 2px;
}

.ap .mstart .ms-l.tot .v {
    color: var(--accent-strong);
}

.ap .ap-foot {
    margin-top: 18px;
}

/* ---------- narrow-window reflow (in-app equivalent of the mobile sheet) ---------- */
@container (max-width: 640px) {
    .ap .verdict {
        flex-direction: column;
        gap: 0;
    }

    .ap .verdict .vd-meter {
        max-width: none;
    }

    .ap .vd-dual {
        padding: 14px 0 2px;
        margin-top: 14px;
        border-left: 0;
        border-top: 1px solid var(--c-green-bd);
        justify-content: space-between;
    }

    .ap .verdict.warn .vd-dual {
        border-top-color: var(--c-amber-bd);
    }

    .ap .vd-dual .dual-col {
        text-align: left;
    }

    .ap .vd-dual .dual-col.pred {
        text-align: right;
    }

    .ap .verdict h2 {
        font-size: 19px;
        line-height: 1.25;
    }

    .ap .signals .sig {
        flex: 1 1 calc(50% - 5px);
        min-width: 0;
    }

    .ap .metrics.c3,
    .ap .metrics.c4 {
        grid-template-columns: 1fr 1fr;
    }

    .ap .ap-starts--table {
        display: none;
    }

    .ap .ap-starts--cards {
        display: block;
    }
}

/* ============================================================
   Side panel — lean athlete context (complements the window)
   ============================================================ */
.prediction-context-panel .sp-content {
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.prediction-context-panel .sp-card {
    background: var(--c-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 15px;
}

.prediction-context-panel .sp-top {
    display: flex;
    align-items: center;
    gap: 12px;
}

.prediction-context-panel .sp-ph {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    flex: none;
    display: grid;
    place-items: center;
    background: var(--c-accent-bg);
    border: 1px solid var(--c-accent-bd);
    color: var(--accent-strong);
    font-weight: 800;
    font-size: 15px;
}

.prediction-context-panel .sp-top__meta {
    min-width: 0;
}

.prediction-context-panel .sp-nm {
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.prediction-context-panel .sp-ct {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: var(--text-secondary);
    font-weight: 600;
    margin-top: 1px;
}

.prediction-context-panel .sp-rk {
    margin-left: auto;
    font-size: 11px;
    font-weight: 800;
    color: var(--c-gold);
    background: var(--c-gold-bg);
    border: 1px solid var(--c-gold-bd);
    padding: 5px 10px;
    border-radius: 20px;
    white-space: nowrap;
}

.prediction-context-panel .sp-verdict {
    margin-top: 13px;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 12px 13px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--c-green-bg), transparent);
    border: 1px solid var(--c-green-bd);
}

.prediction-context-panel .sp-verdict.warn {
    background: linear-gradient(135deg, var(--c-amber-bg), transparent);
    border-color: var(--c-amber-bd);
}

.prediction-context-panel .sp-verdict .vdot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--c-green);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--success) 18%, transparent);
    flex: none;
}

.prediction-context-panel .sp-verdict.warn .vdot {
    background: var(--c-amber);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--warning) 18%, transparent);
}

.prediction-context-panel .sp-verdict .vt {
    font-size: 13px;
    font-weight: 800;
    color: var(--text-primary);
    min-width: 0;
}

.prediction-context-panel .sp-verdict .vt small {
    display: block;
    font-size: 11px;
    color: var(--text-secondary);
    font-weight: 600;
    margin-top: 1px;
}

.prediction-context-panel .sp-verdict .vmeter {
    margin-left: auto;
    display: flex;
    gap: 3px;
    flex: none;
}

.prediction-context-panel .sp-verdict .vmeter i {
    width: 5px;
    height: 15px;
    border-radius: 3px;
    background: var(--c-inset);
}

.prediction-context-panel .sp-verdict .vmeter i.on {
    background: var(--c-green);
}

.prediction-context-panel .sp-verdict.warn .vmeter i.on {
    background: var(--c-amber);
}

.prediction-context-panel .sp-hero {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 11px;
    padding: 13px 15px;
    border-radius: 12px;
    background: var(--c-inset);
    border: 1px solid var(--border);
}

.prediction-context-panel .sp-hero .hc {
    flex: 1;
    min-width: 0;
}

.prediction-context-panel .sp-hero .hc.r {
    text-align: right;
}

.prediction-context-panel .sp-hero .k {
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.09em;
    color: var(--text-muted);
    text-transform: uppercase;
}

.prediction-context-panel .sp-hero .v {
    font-size: 21px;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin-top: 2px;
}

.prediction-context-panel .sp-hero .hc.r .v {
    color: var(--c-green);
}

.prediction-context-panel .sp-hero .mid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    flex: none;
    padding: 0 4px;
}

.prediction-context-panel .sp-hero .mid .arr {
    font-size: 15px;
    color: var(--c-green);
}

.prediction-context-panel .sp-hero .mid .d {
    font-size: 11px;
    font-weight: 800;
    color: var(--c-green);
}

.prediction-context-panel .sp-hero .mid.down .arr,
.prediction-context-panel .sp-hero .mid.down .d {
    color: var(--c-amber);
}

.prediction-context-panel .sp-hero .mid.flat .arr,
.prediction-context-panel .sp-hero .mid.flat .d {
    color: var(--text-muted);
}

.prediction-context-panel .sp-lbl {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    text-transform: uppercase;
    margin: 4px 2px -2px;
}

.prediction-context-panel .sp-sigs {
    display: flex;
    flex-direction: column;
    gap: 2px;
    border-radius: 12px;
    overflow: hidden;
}

.prediction-context-panel .sp-sig {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 13px;
    background: var(--c-card);
    border: 1px solid var(--border);
}

.prediction-context-panel .sp-sig .si {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    flex: none;
    display: grid;
    place-items: center;
    font-size: 14px;
    background: var(--c-inset);
    border: 1px solid var(--border);
}

.prediction-context-panel .sp-sig.up .si {
    background: var(--c-green-bg);
    border-color: var(--c-green-bd);
    color: var(--c-green);
}

.prediction-context-panel .sp-sig.acc .si {
    background: var(--c-accent-bg);
    border-color: var(--c-accent-bd);
    color: var(--accent-strong);
}

.prediction-context-panel .sp-sig.vio .si {
    background: var(--c-violet-bg);
    border-color: var(--c-violet-bd);
    color: var(--c-violet);
}

.prediction-context-panel .sp-sig.down .si {
    background: var(--c-amber-bg);
    border-color: var(--c-amber-bd);
    color: var(--c-amber);
}

.prediction-context-panel .sp-sig .sk {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--text-secondary);
    flex: 1;
    min-width: 0;
}

.prediction-context-panel .sp-sig .sv {
    font-size: 14px;
    font-weight: 800;
    text-align: right;
}

.prediction-context-panel .sp-sig .sv small {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 700;
    margin-left: 5px;
}

.prediction-context-panel .sp-spark {
    background: var(--c-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 13px;
}

.prediction-context-panel .sp-spark .sh {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-bottom: 8px;
}

.prediction-context-panel .sp-spark .sh b {
    color: var(--c-green);
}

.prediction-context-panel .sp-pr {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2px;
    border-radius: 12px;
    overflow: hidden;
}

.prediction-context-panel .sp-pr .cell {
    background: var(--c-card);
    border: 1px solid var(--border);
    padding: 11px 6px;
    text-align: center;
}

.prediction-context-panel .sp-pr .cell.tot {
    background: linear-gradient(180deg, var(--c-accent-bg), transparent);
    border-color: var(--c-accent-bd);
}

.prediction-context-panel .sp-pr .k {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    text-transform: uppercase;
}

.prediction-context-panel .sp-pr .v {
    font-size: 14px;
    font-weight: 800;
    margin-top: 3px;
}

.prediction-context-panel .sp-pr .cell.tot .v {
    color: var(--accent-strong);
}

.prediction-context-panel .sp-cta {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin-top: 3px;
}

.prediction-context-panel .sp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px;
    border-radius: 10px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    border: 1px solid transparent;
}

.prediction-context-panel .sp-btn--go {
    background: linear-gradient(135deg, var(--accent-strong), var(--accent));
    color: #fff;
}

.prediction-context-panel .sp-btn--go:hover {
    filter: brightness(1.06);
}

.prediction-context-panel .sp-btn--compare {
    background: var(--c-violet-bg);
    border-color: var(--c-violet-bd);
    color: var(--c-violet);
}

.prediction-context-panel .sp-btn--compare:hover {
    background: color-mix(in srgb, var(--score) 22%, transparent);
}

.prediction-context-panel .sp-source {
    margin-top: 2px;
}