/* Shared components for the completion, creator and Premium surfaces (library, activity, goals,
   clubs, creator pages, stats). Loaded on every page by Layout.astro, after components.css.

   These follow the site's existing look (DESIGN.md): a gradient-framed page header, translucent
   cards with 2px cyan strokes, gradient pill primary buttons with the player glow, underline
   tabs, cyan stat figures, gradient progress fills and centred emoji empty states. Tints are
   mixed from --player-one / --player-two so the user's colour theme carries through.

   The race lane (.fx-lane) draws progress as a track with checkpoint ticks, with you and your
   rivals as markers on the same lane (player one = you, player two = rivals, as in races). */

:root {
    --fx-ground: var(--primary-black, #252A34);
    --fx-text: var(--primary-text, #f7f7f7);
    --fx-you: var(--player-one, #08D9D6);
    --fx-rival: var(--player-two, #FF2E63);
    --fx-gradient: linear-gradient(135deg, var(--player-one, #08D9D6), var(--player-two, #FF2E63));
    --fx-gradient-bar: linear-gradient(90deg, var(--player-one, #08D9D6), var(--player-two, #FF2E63));

    /* Surfaces: translucent white washes over the charcoal ground. */
    --fx-surface: rgba(255, 255, 255, 0.05);
    --fx-raised: rgba(255, 255, 255, 0.08);
    --fx-sunk: rgba(255, 255, 255, 0.03);
    --fx-track: rgba(255, 255, 255, 0.1);

    /* Cyan strokes and tints (theme-aware). */
    --fx-line: color-mix(in srgb, var(--player-one, #08D9D6) 20%, transparent);
    --fx-line-strong: color-mix(in srgb, var(--player-one, #08D9D6) 30%, transparent);
    --fx-tint: color-mix(in srgb, var(--player-one, #08D9D6) 10%, transparent);
    --fx-tint-strong: color-mix(in srgb, var(--player-one, #08D9D6) 15%, transparent);
    --fx-glow: 0 10px 30px color-mix(in srgb, var(--player-one, #08D9D6) 30%, transparent);

    /* Text hierarchy by opacity (no grey hexes). */
    --fx-muted: rgba(247, 247, 247, 0.8);
    --fx-faint: rgba(247, 247, 247, 0.65);

    /* Status vocabulary. */
    --fx-positive: rgb(34, 197, 94);
    --fx-warning: rgb(251, 191, 36);
    --fx-negative: var(--player-two, #FF2E63);
    /* Player-two text on tinted fills, lifted to stay above 4.5:1 contrast. */
    --fx-rival-text: color-mix(in srgb, var(--player-two, #FF2E63) 65%, #ffffff);
    --fx-premium: rgb(243, 186, 29);

    --fx-radius: 15px;
    --fx-radius-inner: 10px;
    --fx-gap: 20px;
    --fx-ease: ease;
}

/* ---------- Page frame ---------- */
.fx-page {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 40px;
    color: var(--fx-text);
}

/* The gradient-framed page header every page opens with (.fx-hero frames the custom headers on
   game, compare, club and creator pages the same way). */
.fx-titlebar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

.fx-titlebar,
.fx-hero {
    position: relative;
    margin-bottom: 30px;
    padding: 35px 40px;
    border-radius: 20px;
    background: var(--fx-tint);
    border: 2px solid transparent;
}

.fx-hero h1 {
    color: var(--fx-you);
    text-shadow: none;
}

.fx-hero > * { position: relative; z-index: 1; }

.fx-titlebar::before,
.fx-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 20px;
    padding: 2px;
    background: var(--fx-gradient);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.fx-titlebar h1 {
    font-size: 2.5rem;
    line-height: 1.2;
    margin: 0 0 8px;
    color: var(--fx-you);
}

.fx-titlebar__sub {
    margin: 0;
    font-size: 1.1rem;
    opacity: 0.8;
    max-width: 62ch;
}

.fx-titlebar__actions {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.fx-titlebar .fx-titlebar__actions { position: relative; z-index: 1; }

.fx-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--fx-gap);
    align-items: start;
}

.fx-span-12 { grid-column: span 12; }
.fx-span-8 { grid-column: span 8; }
.fx-span-7 { grid-column: span 7; }
.fx-span-6 { grid-column: span 6; }
.fx-span-5 { grid-column: span 5; }
.fx-span-4 { grid-column: span 4; }

.fx-stack {
    display: flex;
    flex-direction: column;
    gap: var(--fx-gap);
}

/* ---------- Cards (the site's .section-card) ---------- */
.fx-panel {
    background: var(--fx-surface);
    border: 2px solid var(--fx-line-strong);
    border-radius: var(--fx-radius);
    padding: 25px 30px;
    min-width: 0;
}

.fx-panel--flush { padding: 10px; }

.fx-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}

.fx-panel__head h2,
.fx-panel__title {
    font-size: 1.5rem;
    line-height: 1.3;
    font-weight: 700;
    margin: 0;
    color: var(--fx-you);
}

.fx-panel__meta {
    font-size: 0.9rem;
    opacity: 0.7;
}

.fx-panel__head a,
.fx-link {
    color: var(--fx-you);
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
}

.fx-panel__head a:hover,
.fx-link:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.fx-nested {
    background: var(--fx-sunk);
    border: 1px solid var(--fx-line);
    border-radius: var(--fx-radius-inner);
    padding: 18px 20px;
}

/* ---------- Tabs (the profile page's underline tabs) ---------- */
.fx-tabs {
    display: flex;
    gap: 30px;
    border-bottom: 2px solid var(--fx-line-strong);
    margin-bottom: 30px;
    overflow-x: auto;
    scrollbar-width: none;
}

.fx-tabs::-webkit-scrollbar { display: none; }

.fx-tab {
    position: relative;
    flex: none;
    padding: 15px 0;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    font: inherit;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--fx-text);
    opacity: 0.6;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.3s ease;
}

.fx-tab:hover { opacity: 0.8; }

.fx-tab[aria-selected="true"],
.fx-tab.is-active {
    opacity: 1;
    color: var(--fx-you);
    border-bottom-color: var(--fx-you);
}

.fx-tab__count {
    margin-left: 6px;
    font-size: 0.85rem;
    opacity: 0.7;
    font-variant-numeric: tabular-nums;
}

/* ---------- Segmented control (pill group) ---------- */
.fx-segmented {
    display: inline-flex;
    flex-wrap: wrap;
    padding: 4px;
    gap: 4px;
    border-radius: 50px;
    background: var(--fx-surface);
    border: 2px solid var(--fx-line-strong);
}

.fx-segmented button {
    border: none;
    background: transparent;
    color: var(--fx-text);
    opacity: 0.7;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    padding: 7px 16px;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.fx-segmented button:hover { opacity: 1; background: var(--fx-tint); }

.fx-segmented button[aria-pressed="true"] {
    opacity: 1;
    background: var(--fx-tint-strong);
    color: var(--fx-you);
}

/* ---------- Buttons (pills; one gradient primary per view) ---------- */
.cp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
}

.cp-btn--invert,
.cp-btn--quiet,
.cp-btn--outline,
.cp-btn--text,
.cp-btn--danger-text {
    min-height: 42px;
    padding: 11px 26px;
    border-radius: 50px;
    font-size: 1rem;
    font-weight: 600;
    color: var(--fx-text);
    transition: all 0.3s ease;
}

/* Primary: the rival gradient with the cyan glow, handing over to pink on hover. */
.cp-btn--invert {
    background: var(--fx-gradient);
    border: none;
    box-shadow: 0 5px 20px color-mix(in srgb, var(--player-one, #08D9D6) 40%, transparent);
}

/* Secondary: translucent with a cyan stroke. */
.cp-btn--quiet,
.cp-btn--outline {
    background: var(--fx-surface);
    border: 2px solid var(--fx-line-strong);
}

.cp-btn--text {
    background: transparent;
    border: 2px solid transparent;
    color: var(--fx-you);
    padding-left: 12px;
    padding-right: 12px;
}

.cp-btn--danger-text {
    background: var(--fx-surface);
    border: 2px solid color-mix(in srgb, var(--player-two, #FF2E63) 50%, transparent);
    color: var(--fx-rival-text);
}

.cp-btn--sm {
    min-height: 34px;
    padding: 6px 16px;
    font-size: 0.9rem;
}

.cp-btn--text.cp-btn--sm { padding-left: 10px; padding-right: 10px; }

@media (hover: hover) and (pointer: fine) {
    .cp-btn--invert:hover {
        transform: scale(1.05);
        box-shadow: 0 8px 30px color-mix(in srgb, var(--player-two, #FF2E63) 60%, transparent);
    }
    .cp-btn--quiet:hover,
    .cp-btn--outline:hover {
        background: var(--fx-tint);
        border-color: var(--fx-you);
        transform: translateY(-1px);
    }
    .cp-btn--text:hover { background: var(--fx-tint); }
    .cp-btn--danger-text:hover {
        background: color-mix(in srgb, var(--player-two, #FF2E63) 12%, transparent);
        border-color: var(--fx-rival);
    }
}

.cp-btn--invert:active,
.cp-btn--quiet:active,
.cp-btn--outline:active,
.cp-btn--text:active,
.cp-btn--danger-text:active { transform: scale(0.97); }

.cp-btn[disabled],
.cp-btn[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.cp-btn[aria-busy="true"] { cursor: progress; opacity: 0.75; }

/* Visible keyboard focus in the site's cyan. */
.fx-page :is(a, button, input, select, textarea, [tabindex]):focus-visible,
.fx-dialog :is(a, button, input, select, textarea, [tabindex]):focus-visible,
.cp-btn:focus-visible {
    outline: 2px solid var(--fx-you);
    outline-offset: 3px;
}

/* Inline SVG icons (FX.icon): one stroke weight, sized by font-size. */
.fx-icon {
    width: 1.1em;
    height: 1.1em;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
    vertical-align: -0.15em;
}

/* ---------- Figures (stat boxes, as on Community) ---------- */
.num {
    font-variant-numeric: tabular-nums;
}

.fx-stats {
    display: grid;
    grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr));
    gap: 15px;
}

.fx-stat {
    padding: 20px;
    min-width: 0;
    text-align: center;
    background: var(--fx-surface);
    border: 2px solid var(--fx-line-strong);
    border-radius: 12px;
    transition: all 0.3s ease;
}

@media (hover: hover) and (pointer: fine) {
    .fx-stat:hover { transform: translateY(-3px); border-color: var(--fx-you); }
}

.fx-stat__label {
    font-size: 0.9rem;
    opacity: 0.7;
    margin-bottom: 4px;
}

.fx-stat__value {
    font-size: 1.8rem;
    line-height: 1.2;
    font-weight: 700;
    color: var(--fx-you);
    font-variant-numeric: tabular-nums;
}

.fx-stat__value small {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--fx-text);
    opacity: 0.7;
    margin-left: 3px;
}

.fx-stat__note {
    margin-top: 4px;
    font-size: 0.82rem;
    opacity: 0.65;
}

/* ---------- Rows ---------- */
.fx-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.fx-row {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 58px;
    padding: 10px 14px;
    border-radius: var(--fx-radius-inner);
    color: inherit;
    text-decoration: none;
}

.fx-row + .fx-row,
.fx-list > li + li { margin-top: 4px; }

a.fx-row,
button.fx-row {
    width: 100%;
    border: 1px solid transparent;
    background: transparent;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: all 0.3s ease;
}

@media (hover: hover) and (pointer: fine) {
    a.fx-row:hover,
    button.fx-row:hover {
        background: var(--fx-tint);
        border-color: var(--fx-line);
    }
}

.fx-row__main {
    flex: 1;
    min-width: 0;
}

.fx-row__title {
    display: block;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fx-row__meta {
    display: block;
    margin-top: 3px;
    font-size: 0.88rem;
    opacity: 0.75;
    line-height: 1.4;
}

.fx-row__end {
    flex: none;
    display: flex;
    align-items: center;
    gap: 8px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.fx-cover {
    flex: none;
    width: 64px;
    height: 30px;
    border-radius: 6px;
    object-fit: cover;
    background: var(--fx-surface);
    border: 1px solid var(--fx-line);
}

.fx-cover--placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--fx-you);
    background: var(--fx-tint);
}

/* ---------- People (gradient avatars, as in the nav and races) ---------- */
.fx-avatar {
    flex: none;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--fx-gradient);
    color: var(--fx-ground);
    font-weight: 700;
    font-size: 1.05rem;
    overflow: hidden;
}

.fx-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.fx-avatar--sm { width: 28px; height: 28px; font-size: 0.85rem; }
.fx-avatar--lg { width: 64px; height: 64px; font-size: 1.8rem; }

.fx-people {
    display: inline-flex;
}

.fx-people .fx-avatar {
    box-shadow: 0 0 0 2px var(--fx-ground);
}

.fx-people .fx-avatar + .fx-avatar { margin-left: -8px; }

/* ---------- Chips and status badges ---------- */
.fx-chip {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 26px;
    padding: 3px 12px;
    border-radius: 20px;
    background: var(--fx-surface);
    border: 1px solid var(--fx-line-strong);
    color: var(--fx-text);
    font-size: 0.82rem;
    font-weight: 600;
    white-space: nowrap;
}

/* Status vocabulary: tint fill, solid stroke, text in the status colour. */
.fx-chip--positive { background: rgba(34, 197, 94, 0.2); border: 2px solid var(--fx-positive); color: var(--fx-positive); }
.fx-chip--warning { background: rgba(251, 191, 36, 0.2); border: 2px solid var(--fx-warning); color: var(--fx-warning); }
.fx-chip--negative,
.fx-chip--live { background: color-mix(in srgb, var(--player-two, #FF2E63) 20%, transparent); border: 2px solid var(--fx-rival); color: var(--fx-rival-text); }
.fx-chip--premium { background: rgba(243, 186, 29, 0.15); border: 2px solid var(--fx-premium); color: var(--fx-premium); }

.fx-chip--live::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}

button.fx-chip {
    font: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

button.fx-chip:active { transform: scale(0.96); }

button.fx-chip[aria-pressed="true"] {
    background: var(--fx-tint-strong);
    border-color: var(--fx-you);
    color: var(--fx-you);
}

/* ---------- Progress (gradient fill, as on race cards) ---------- */
.fx-bar {
    height: 10px;
    border-radius: 10px;
    background: var(--fx-track);
    overflow: hidden;
}

.fx-bar__fill {
    height: 100%;
    border-radius: inherit;
    background: var(--fx-gradient-bar);
    transition: width 0.5s ease;
}

.fx-bar__fill--rival { background: var(--fx-rival); }
.fx-bar__fill--neutral { background: var(--fx-you); }

.fx-bar-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 6px;
    font-size: 0.85rem;
    opacity: 0.7;
    font-variant-numeric: tabular-nums;
}

/* The race lane: a track with checkpoint ticks, markers for you and rivals on one scale. */
.fx-lane {
    position: relative;
    height: 36px;
    margin: 6px 0 2px;
}

.fx-lane__track {
    position: absolute;
    left: 0;
    right: 0;
    top: 14px;
    height: 8px;
    border-radius: 10px;
    background: var(--fx-track);
}

.fx-lane__tick {
    position: absolute;
    top: 12px;
    width: 2px;
    height: 12px;
    margin-left: -1px;
    border-radius: 1px;
    background: var(--fx-line-strong);
}

.fx-lane__tick--goal {
    top: 4px;
    height: 28px;
    width: 3px;
    background: var(--fx-text);
}

.fx-lane__fill {
    position: absolute;
    left: 0;
    top: 14px;
    height: 8px;
    border-radius: 10px;
    background: var(--fx-gradient-bar);
    transition: width 0.5s ease;
}

.fx-lane__marker {
    position: absolute;
    top: 4px;
    width: 28px;
    height: 28px;
    margin-left: -14px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--fx-ground);
    background: var(--fx-rival);
    box-shadow: 0 0 0 3px var(--fx-ground), 0 4px 14px color-mix(in srgb, var(--player-two, #FF2E63) 45%, transparent);
    transition: left 0.5s ease;
}

.fx-lane__marker--you {
    background: var(--fx-you);
    box-shadow: 0 0 0 3px var(--fx-ground), 0 4px 14px color-mix(in srgb, var(--player-one, #08D9D6) 45%, transparent);
    z-index: 2;
}

.fx-lane__marker img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.fx-lane-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    font-size: 0.9rem;
}

.fx-lane-legend span { opacity: 0.85; }

.fx-lane-legend span::before {
    content: '';
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    margin-right: 6px;
    background: var(--fx-rival);
}

.fx-lane-legend .is-you::before { background: var(--fx-you); }

/* ---------- Forms (the site's inputs) ---------- */
.fx-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 18px;
}

.fx-field > label,
.fx-label {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--fx-text);
}

.fx-help {
    font-size: 0.85rem;
    opacity: 0.7;
    line-height: 1.45;
}

.fx-input,
.fx-select,
.fx-textarea {
    width: 100%;
    min-height: 44px;
    padding: 10px 14px;
    border-radius: var(--fx-radius-inner);
    border: 2px solid var(--fx-line-strong);
    background: var(--fx-surface);
    color: var(--fx-text);
    font: inherit;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.fx-select option { background: var(--fx-ground); color: var(--fx-text); }

.fx-textarea {
    min-height: 96px;
    resize: vertical;
    line-height: 1.5;
}

.fx-input::placeholder,
.fx-textarea::placeholder {
    color: var(--fx-text);
    opacity: 0.5;
}

.fx-input:focus,
.fx-select:focus,
.fx-textarea:focus {
    outline: none;
    border-color: var(--fx-you);
    background: var(--fx-raised);
}

.fx-input[aria-invalid="true"] { border-color: var(--fx-negative); }

.fx-field-error {
    font-size: 0.85rem;
    color: var(--fx-rival-text);
}

.fx-form-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 20px;
}

.fx-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.95rem;
    cursor: pointer;
    margin-bottom: 12px;
}

.fx-check input {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    accent-color: var(--fx-you);
    flex: none;
}

/* Toggle switch, the size and colours of the Settings toggles. */
.fx-switch {
    position: relative;
    flex: none;
    display: inline-block;
    width: 60px;
    height: 30px;
}

.fx-switch input {
    position: absolute;
    inset: 0;
    opacity: 0;
    margin: 0;
    cursor: pointer;
    z-index: 1;
}

.fx-switch span {
    position: absolute;
    inset: 0;
    border-radius: 30px;
    background: var(--fx-track);
    transition: background 0.3s ease;
}

.fx-switch span::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #fff;
    transition: transform 0.3s ease;
}

.fx-switch input:checked + span { background: var(--fx-you); }
.fx-switch input:checked + span::after { transform: translateX(30px); }
.fx-switch input:focus-visible + span { outline: 2px solid var(--fx-you); outline-offset: 3px; }
.fx-switch input:disabled + span { opacity: 0.5; }

/* A settings row, as .setting-item on the Settings page. */
.fx-setting {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px;
    margin-bottom: 12px;
    background: var(--fx-sunk);
    border: 1px solid var(--fx-line);
    border-radius: var(--fx-radius-inner);
}

.fx-setting:last-child { margin-bottom: 0; }

.fx-setting__title { font-size: 1.05rem; font-weight: 600; }
.fx-setting__desc { font-size: 0.9rem; opacity: 0.7; margin-top: 4px; }

/* Inside Settings the section already frames its content, so panels drop their own frame. */
.fx-settings-host > .fx-panel {
    background: transparent;
    border: none;
    padding: 0;
}

/* ---------- States ---------- */
.fx-empty {
    padding: 50px 30px;
    text-align: center;
}

.fx-empty__icon {
    font-size: 3.5rem;
    line-height: 1;
    margin-bottom: 16px;
    opacity: 0.7;
}

.fx-empty h3 {
    margin: 0 0 10px;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--fx-text);
}

.fx-empty p {
    margin: 0 auto 20px;
    font-size: 1rem;
    opacity: 0.7;
    max-width: 52ch;
}

.fx-empty p:last-child { margin-bottom: 0; }
.fx-empty .fx-titlebar__actions { justify-content: center; }

.fx-error {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    border-radius: 12px;
    border: 2px solid color-mix(in srgb, var(--player-two, #FF2E63) 50%, transparent);
    background: color-mix(in srgb, var(--player-two, #FF2E63) 10%, transparent);
    color: var(--fx-text);
    font-size: 0.95rem;
}

.fx-notice {
    padding: 16px 20px;
    border-radius: 12px;
    border: 2px solid rgba(251, 191, 36, 0.5);
    background: rgba(251, 191, 36, 0.1);
    color: var(--fx-text);
    font-size: 0.95rem;
    line-height: 1.5;
}

/* Loading: the site's shimmer. */
.fx-skel {
    border-radius: 8px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.05) 100%);
    background-size: 200% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
}

.fx-skel--row { height: 58px; margin-bottom: 6px; border-radius: var(--fx-radius-inner); }
.fx-skel--text { height: 14px; width: 60%; margin: 6px 0; }

/* Premium: the dimmed dashed card the Settings plan card uses, with the premium badge. */
.fx-premium {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 14px 18px;
    margin-bottom: 18px;
    border-radius: 12px;
    border: 2px dashed rgba(243, 186, 29, 0.6);
    background: rgba(243, 186, 29, 0.07);
    font-size: 0.95rem;
}

.fx-premium__badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-right: 6px;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--fx-text);
    background: var(--fx-gradient);
    border: 2px solid var(--fx-premium);
    box-shadow: 0 4px 14px rgba(243, 186, 29, 0.45);
}

/* ---------- Dialog (native <dialog>, from FX.formDialog), as .cp-dialog ---------- */
.fx-dialog {
    width: min(540px, calc(100vw - 32px));
    max-height: calc(100dvh - 48px);
    padding: 0;
    border: 2px solid color-mix(in srgb, var(--player-one, #08D9D6) 40%, transparent);
    border-radius: 20px;
    background: var(--fx-ground);
    color: var(--fx-text);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    opacity: 1;
    transform: none;
    transition: opacity 0.25s ease, transform 0.25s ease, overlay 0.25s allow-discrete, display 0.25s allow-discrete;
}

@starting-style {
    .fx-dialog[open] {
        opacity: 0;
        transform: scale(0.96);
    }
}

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

.fx-dialog form {
    display: flex;
    flex-direction: column;
    max-height: inherit;
}

.fx-dialog__head {
    padding: 26px 28px 4px;
}

.fx-dialog__head h2 {
    font-size: 1.4rem;
    margin: 0;
    color: var(--fx-you);
}

.fx-dialog__head p {
    margin: 8px 0 0;
    font-size: 0.95rem;
    opacity: 0.8;
}

.fx-dialog__body {
    padding: 18px 28px 4px;
    overflow-y: auto;
}

.fx-dialog__foot {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 28px 26px;
}

.fx-dialog__error {
    margin: 0 28px 10px;
}

/* ---------- Feed (activity rows, as the Race Feed) ---------- */
.fx-feed-item {
    display: flex;
    gap: 14px;
    padding: 16px 6px;
}

.fx-feed-item + .fx-feed-item { border-top: 1px solid var(--fx-line); }

.fx-feed-item__text {
    font-size: 1rem;
    line-height: 1.5;
}

.fx-feed-item__text strong { font-weight: 600; }

.fx-feed-item__meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 8px;
    font-size: 0.85rem;
    opacity: 0.85;
}

.fx-feed-item__meta time { opacity: 0.8; }

.fx-kudos {
    display: inline-flex;
    gap: 6px;
    flex-wrap: wrap;
}

.fx-kudos button {
    min-height: 30px;
    padding: 3px 12px;
    border: 1px solid var(--fx-line-strong);
    border-radius: 20px;
    background: var(--fx-surface);
    color: var(--fx-text);
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    font-variant-numeric: tabular-nums;
    transition: all 0.3s ease;
}

.fx-kudos button:hover { background: var(--fx-tint); border-color: var(--fx-you); }
.fx-kudos button:active { transform: scale(0.94); }

.fx-kudos button[aria-pressed="true"] {
    background: var(--fx-tint-strong);
    border-color: var(--fx-you);
    color: var(--fx-you);
}

/* ---------- Rank lists ---------- */
.fx-rank {
    flex: none;
    width: 28px;
    text-align: right;
    font-weight: 700;
    color: var(--fx-you);
    font-variant-numeric: tabular-nums;
}

.fx-row.is-you {
    background: var(--fx-tint);
    border: 1px solid var(--fx-line-strong);
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
    .fx-span-8, .fx-span-7, .fx-span-6, .fx-span-5, .fx-span-4 { grid-column: span 12; }
    .fx-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
    .fx-page { padding: 20px 16px; }
    .fx-titlebar, .fx-hero { padding: 25px; }
    .fx-titlebar h1 { font-size: 2rem; }
    .fx-panel { padding: 20px; }
    .fx-form-row { grid-template-columns: 1fr; }
    .fx-tabs { gap: 20px; }
    .fx-tab { font-size: 1rem; }
}

@media (max-width: 600px) {
    .fx-titlebar__actions { width: 100%; }
    .fx-row__end .cp-btn { padding-left: 12px; padding-right: 12px; }
    .fx-cover { width: 48px; height: 22px; }
    .fx-empty { padding: 36px 16px; }
}

/* ---------- Completion section (profile and user pages) ---------- */
.fx-completion {
    margin-bottom: 30px;
}

.completion-streak__value {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.2;
    margin: 2px 0 4px;
    color: var(--fx-you);
}

.completion-streak__value small {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--fx-text);
    opacity: 0.7;
}

.completion-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.completion-favs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.completion-fav {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    color: var(--fx-text);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
    transition: transform 0.3s ease;
}

.completion-fav:hover { transform: translateY(-3px); }

.completion-fav .fx-cover {
    width: 100%;
    height: auto;
    aspect-ratio: 460 / 215;
    border-radius: 10px;
}

.completion-fav span:not(.fx-help) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Rows whose text should sit on the card's left edge (the hover fill bleeds instead). */
.fx-list--flush .fx-row {
    margin-left: -14px;
    margin-right: -14px;
}

/* Names inside sentences (feed items, hunts): cyan, like the site's links. */
.fx-inline-link {
    color: var(--fx-you);
    font-weight: 600;
    text-decoration: none;
}

.fx-inline-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Cards for goals, rivalries, plans, challenges, sessions and events ---------- */
.goal-grid {
    display: grid;
    /* As many 420px columns as fit: a lone card spans the row, narrow columns stack. */
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
    gap: var(--fx-gap);
    align-items: start;
}

.goal-card { transition: all 0.3s ease; }

@media (hover: hover) and (pointer: fine) {
    .goal-card:hover { border-color: var(--fx-you); background: var(--fx-raised); }
}

.goal-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.goal-card__title {
    font-size: 1.3rem;
    font-weight: 700;
    margin: 0;
    line-height: 1.3;
    color: var(--fx-text);
}

.goal-card__what {
    font-size: 0.9rem;
    opacity: 0.75;
    margin-top: 4px;
}

.goal-card__numbers {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 16px 0 6px;
    font-variant-numeric: tabular-nums;
}

.goal-card__numbers strong {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--fx-you);
}

.goal-card__numbers span {
    opacity: 0.7;
    font-size: 0.95rem;
}

.goal-card__foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid var(--fx-line);
}

/* Dashboard completion strip */
.dash-modules {
    display: grid;
    grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr));
    gap: 15px;
}

.dash-goal {
    display: block;
    color: var(--fx-text);
    text-decoration: none;
    margin-bottom: 12px;
}

.dash-goal .fx-bar { margin-top: 8px; height: 8px; }

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

@media (max-width: 600px) {
    .dash-modules { grid-template-columns: 1fr; }
}
/* ---------- Premium showcase layouts (37/45) ---------- */
.profile-showcase--shelf,
.profile-showcase--spotlight {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 8px;
}

.profile-showcase--spotlight .showcase-card--lead {
    grid-column: span 2;
    grid-row: span 2;
    justify-content: flex-end;
    min-height: 120px;
}

.profile-showcase--spotlight .showcase-card--lead .showcase-card__label { font-size: 1.15rem; }

.showcase-card {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--fx-surface);
    border: 1px solid var(--fx-line-strong);
    min-width: 0;
}

.showcase-card__label {
    font-weight: 600;
    font-size: 0.92rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.showcase-card__meta {
    font-size: 0.8rem;
    opacity: 0.7;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---------- Premium profile themes (37): one flat field and one accent each ---------- */
.profile-theme-midnight { --fx-you: #7aa2ff; --player-one: #7aa2ff; }
.profile-theme-midnight .profile-header { background: #151b2d !important; border-color: rgba(122, 162, 255, 0.4) !important; }
.profile-theme-ember { --fx-you: #ff8a4c; --player-one: #ff8a4c; }
.profile-theme-ember .profile-header { background: #2e1a17 !important; border-color: rgba(255, 138, 76, 0.4) !important; }
.profile-theme-verdant { --fx-you: #4cd38a; --player-one: #4cd38a; }
.profile-theme-verdant .profile-header { background: #15271f !important; border-color: rgba(76, 211, 138, 0.4) !important; }
.profile-theme-arcade { --fx-you: #f5d547; --player-one: #f5d547; }
.profile-theme-arcade .profile-header { background: #1f1e12 !important; border-color: rgba(245, 213, 71, 0.4) !important; }
.profile-theme-mono { --fx-you: #e6e6e6; --player-one: #e6e6e6; }
.profile-theme-mono .profile-header { background: #1f2125 !important; border-color: rgba(230, 230, 230, 0.3) !important; }

/* Sub-headings inside a card (h3) sit below the cyan card title in size. */
h3.fx-panel__title {
    font-size: 1.15rem;
    color: var(--fx-text);
}