@font-face {
    font-family: "Space Grotesk";
    src: url("/assets/cyrcys/fonts/SpaceGrotesk/SpaceGrotesk-Variable.ttf") format("truetype");
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
}

@font-face {
    font-family: "Oxanium";
    src: url("/assets/cyrcys/fonts/Oxanium/Oxanium-Variable.ttf") format("truetype");
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
}

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

html,
body {
    font-family: var(--st-font-body);
    max-width: 100%;
    overflow-x: hidden;
}

:root {
    --st-font-body: "Space Grotesk", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --st-font-display: "Oxanium", "Space Grotesk", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --st-bg: #050814;
    --st-surface: rgba(218, 242, 255, 0.075);
    --st-surface-2: rgba(218, 242, 255, 0.125);
    --st-border: rgba(165, 224, 255, 0.18);
    --st-text: rgba(244, 250, 255, 0.94);
    --st-text-muted: rgba(211, 231, 246, 0.72);
    --st-accent: #6fe8ff;
    --st-accent-2: #8ff6d2;
    --st-accent-3: #c6a7ff;
    --st-action: #85a8ff;
    --st-link: #86efff;
    --st-energy: #ff7aa8;
    --st-success: #8ff6a7;
    --st-warning: #ffd166;
    --st-danger: #ff5f7d;
    --st-focus-ring: rgba(111, 232, 255, 0.42);
    --st-radius: 8px;
    --st-radius-control: 8px;
    --st-control-bg: color-mix(in srgb, var(--st-bg) 28%, rgba(255, 255, 255, 0.08));
    --st-control-bg-hover: color-mix(in srgb, var(--st-control-bg) 86%, var(--st-accent) 14%);
    --st-control-border: color-mix(in srgb, var(--st-border) 82%, var(--st-accent) 18%);
    --st-control-border-focus: color-mix(in srgb, var(--st-accent) 70%, var(--st-border));
    --st-control-text: var(--st-text);
    --st-control-placeholder: color-mix(in srgb, var(--st-text-muted) 72%, transparent);
    --st-control-disabled-bg: color-mix(in srgb, var(--st-surface) 62%, transparent);
    --st-control-disabled-text: color-mix(in srgb, var(--st-text-muted) 72%, transparent);
    --st-button-radius: 8px;
    --st-button-shadow: 0 8px 24px color-mix(in srgb, var(--st-accent) 18%, transparent);
    --st-card-bg: var(--st-surface);
    --st-card-bg-hover: var(--st-surface-2);
    --st-card-border: var(--st-border);
    --st-card-shadow: 0 10px 30px color-mix(in srgb, var(--st-bg) 38%, transparent);
    --st-card-padding: 0.95rem;
    --st-media-card-text: rgba(244, 250, 255, 0.96);
    --st-media-card-text-muted: rgba(218, 236, 248, 0.82);
    --st-media-card-chip-bg: rgba(5, 10, 22, 0.58);
    --st-media-card-chip-border: rgba(143, 246, 210, 0.44);
    --st-page-bg-opacity: 0.70;
    --st-motion-fast: 120ms cubic-bezier(0.2, 0, 0, 1);
    --st-motion-base: 180ms cubic-bezier(0.2, 0, 0, 1);
    --st-motion-spring: 360ms cubic-bezier(0.16, 1, 0.3, 1);
    --st-token-xp: #70d9ff;
    --st-token-fire: #ffb36b;
    --st-token-heart: #ff7aa8;
    --st-token-cred: #9df7c9;

    /* Chrome + glow tokens (used by shell + background) */
    --st-chrome: rgba(5, 10, 22, 0.58);
    --st-chrome-2: rgba(5, 10, 22, 0.78);
    --st-glow-1: rgba(111, 232, 255, 0.18);
    --st-glow-2: rgba(198, 167, 255, 0.16);
    --st-glow-3: rgba(143, 246, 210, 0.10);
}

:root[data-st-theme="light"] {
    --st-bg: #f6fbff;
    --st-surface: rgba(13, 36, 62, 0.055);
    --st-surface-2: rgba(13, 36, 62, 0.085);
    --st-border: rgba(24, 74, 118, 0.16);
    --st-text: rgba(9, 24, 42, 0.90);
    --st-text-muted: rgba(35, 57, 83, 0.66);
    --st-accent: #047fa3;
    --st-accent-2: #168c72;
    --st-accent-3: #7658d8;
    --st-action: #315df5;
    --st-link: #056a8f;
    --st-energy: #cc3d73;
    --st-success: #207a43;
    --st-warning: #aa6a00;
    --st-danger: #b72745;
    --st-focus-ring: rgba(4, 127, 163, 0.28);
    --st-chrome: rgba(255, 255, 255, 0.78);
    --st-chrome-2: rgba(255, 255, 255, 0.91);
    --st-glow-1: rgba(67, 178, 209, 0.11);
    --st-glow-2: rgba(118, 88, 216, 0.10);
    --st-glow-3: rgba(22, 140, 114, 0.08);
    --st-control-bg: color-mix(in srgb, #ffffff 82%, var(--st-surface-2));
    --st-control-bg-hover: color-mix(in srgb, #ffffff 74%, var(--st-accent) 9%);
    --st-control-border: color-mix(in srgb, var(--st-border) 72%, var(--st-accent) 20%);
    --st-control-placeholder: rgba(35, 57, 83, 0.56);
    --st-control-disabled-bg: rgba(13, 36, 62, 0.075);
    --st-control-disabled-text: rgba(35, 57, 83, 0.42);
    --st-card-shadow: 0 12px 28px rgba(24, 74, 118, 0.10);
    --st-page-bg-opacity: 0.24;
}

body {
    margin: 0;
    color: var(--st-text);
    background:
        radial-gradient(1200px 800px at 10% -10%, var(--st-glow-1), transparent 55%),
        radial-gradient(900px 600px at 95% 0%, var(--st-glow-2), transparent 55%),
        radial-gradient(760px 520px at 55% 108%, var(--st-glow-3), transparent 58%),
        var(--st-bg);
}

img,
svg,
video,
canvas {
    max-width: 100%;
}

.page,
main,
article,
.content,
.st-page,
.st-page-shell,
.st-page-shell-body,
.st-section,
.st-card,
.st-list,
.st-grid {
    min-width: 0;
    max-width: 100%;
}

a {
    color: var(--st-link);
    text-decoration: none;
    text-underline-offset: 0.16em;
}

a:hover {
    color: color-mix(in srgb, var(--st-link) 70%, white);
    text-decoration: none;
}

.st-link,
.btn-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-height: 2.25rem;
    max-width: 100%;
    padding: 0.34rem 0.62rem;
    border: 1px solid color-mix(in srgb, var(--st-link) 36%, var(--st-border));
    border-radius: var(--st-radius);
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--st-link) 10%, transparent),
            color-mix(in srgb, var(--st-surface) 88%, transparent));
    color: var(--st-link);
    font-weight: 680;
    line-height: 1.1;
    text-decoration: none;
    transition: transform var(--st-motion-fast), border-color var(--st-motion-fast), background var(--st-motion-fast), box-shadow var(--st-motion-fast), color var(--st-motion-fast);
    touch-action: manipulation;
}

.st-link:hover,
.btn-link:hover,
.st-link:focus-visible,
.btn-link:focus-visible {
    border-color: color-mix(in srgb, var(--st-link) 66%, var(--st-border));
    background: color-mix(in srgb, var(--st-link) 15%, var(--st-surface-2));
    color: var(--st-text);
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 10px 26px color-mix(in srgb, var(--st-link) 13%, transparent);
}

.st-link:active,
.btn-link:active {
    transform: translateY(0) scale(0.985);
}

.btn-primary {
    color: color-mix(in srgb, var(--st-bg) 82%, #000);
    background-color: var(--st-accent);
    border-color: color-mix(in srgb, var(--st-accent) 60%, transparent);
    box-shadow: var(--st-button-shadow);
}

.btn {
    border-radius: var(--st-button-radius);
    min-height: 2.25rem;
    font-weight: 680;
    transition: transform var(--st-motion-fast), border-color var(--st-motion-fast), background var(--st-motion-fast), box-shadow var(--st-motion-fast), color var(--st-motion-fast), opacity var(--st-motion-fast);
    touch-action: manipulation;
}

.btn:hover {
    transform: translateY(-1px);
}

.btn:active {
    transform: translateY(0) scale(0.985);
}

.btn:disabled,
.btn.disabled,
[aria-disabled="true"] {
    cursor: not-allowed;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem color-mix(in srgb, var(--st-bg) 70%, white), 0 0 0 0.25rem var(--st-focus-ring);
}

.form-label {
    color: var(--st-text);
    font-weight: 700;
}

.form-control,
.form-select,
.st-input {
    min-height: 2.45rem;
    border-radius: var(--st-radius-control);
    border-color: var(--st-control-border);
    background-color: var(--st-control-bg);
    color: var(--st-control-text);
    font-family: var(--st-font-body);
    font-weight: 560;
    box-shadow: inset 0 1px 0 color-mix(in srgb, white 5%, transparent);
    transition: background var(--st-motion-fast), border-color var(--st-motion-fast), box-shadow var(--st-motion-fast), color var(--st-motion-fast);
}

.form-select,
select.st-input {
    --bs-form-select-bg-img: none;
    appearance: auto;
}

.form-control:hover,
.form-select:hover,
.st-input:hover {
    background-color: var(--st-control-bg-hover);
    border-color: color-mix(in srgb, var(--st-accent) 34%, var(--st-control-border));
}

.form-control:focus,
.form-select:focus,
.st-input:focus {
    background-color: var(--st-control-bg-hover);
    border-color: var(--st-control-border-focus);
    color: var(--st-control-text);
    box-shadow: 0 0 0 0.1rem color-mix(in srgb, var(--st-bg) 70%, white), 0 0 0 0.25rem var(--st-focus-ring);
}

.form-control::placeholder,
.st-input::placeholder {
    color: var(--st-control-placeholder);
    opacity: 1;
}

.form-control:disabled,
.form-select:disabled,
.st-input:disabled {
    background-color: var(--st-control-disabled-bg);
    color: var(--st-control-disabled-text);
    border-color: color-mix(in srgb, var(--st-control-border) 70%, transparent);
}

.st-input {
    display: block;
    width: 100%;
    padding: 0.48rem 0.78rem;
}

.form-check-input {
    border-color: var(--st-control-border);
    background-color: var(--st-control-bg);
}

.form-check-input:checked {
    border-color: var(--st-accent);
    background-color: var(--st-accent);
}

.form-check-label {
    color: var(--st-text);
}

.content {
    padding-top: 1.1rem;
}

.st-page {
    max-width: 980px;
    margin: 0 auto;
    padding: 1rem;
}

@media (min-width: 641px) {
    .st-page {
        padding: 1.5rem;
    }
}

.st-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
    gap: 0.75rem;
}

.st-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.75rem;
}

.st-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
    gap: 0.75rem;
}

.st-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
    gap: 0.75rem;
}

.st-form-field {
    min-width: 0;
}

.st-chip-row label {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 2.35rem;
    padding: 0.45rem 0.68rem;
    border: 1px solid color-mix(in srgb, var(--st-control-border) 82%, transparent);
    border-radius: var(--st-radius-control);
    background: color-mix(in srgb, var(--st-control-bg) 84%, transparent);
    color: var(--st-text);
    font-weight: 700;
    line-height: 1.15;
}

.st-chip-row input[type="checkbox"] {
    flex: 0 0 auto;
    width: 1.05rem;
    height: 1.05rem;
    accent-color: var(--st-accent);
}

.st-filter-command {
    display: grid;
    grid-template-columns: minmax(13rem, 1fr) minmax(7rem, auto) minmax(7rem, auto);
    gap: 0.75rem;
    align-items: end;
}

.st-filter-command .form-control,
.st-filter-command .form-select {
    min-width: 0;
}

.st-filter-command .btn {
    width: 100%;
}

.st-action-rail {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.st-browse-results {
    display: grid;
    gap: 0.75rem;
}

.st-list {
    margin-top: 0.85rem;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}

.st-card {
    background: var(--st-card-bg);
    border: 1px solid var(--st-card-border);
    border-radius: var(--st-radius);
    padding: var(--st-card-padding);
    position: relative;
    box-shadow: var(--st-card-shadow);
    isolation: isolate;
    transition: background var(--st-motion-fast), border-color var(--st-motion-fast), box-shadow var(--st-motion-base), filter var(--st-motion-base), transform var(--st-motion-fast);
}

a.st-card,
button.st-card,
.st-nav-card,
.st-list-row-card,
.st-mission-card,
.st-program-card,
.st-journey-card,
.st-experience-card,
[role="button"].st-card {
    cursor: pointer;
    touch-action: manipulation;
}

/* Optional card media (icon + background image with gradient overlay) */
.st-card--with-bg {
    overflow: hidden;
    color: var(--st-media-card-text);
}

.st-card--with-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        var(--st-card-bg-gradient, linear-gradient(135deg, rgba(0,0,0,0.68), rgba(0,0,0,0.18))),
        var(--st-card-bg-image, none),
        linear-gradient(135deg, color-mix(in srgb, var(--st-accent) 30%, var(--st-surface)), color-mix(in srgb, var(--st-glow-2) 24%, var(--st-bg)));
    background-size: cover;
    background-position: var(--st-card-bg-position, center);
    opacity: var(--st-card-bg-opacity, 0.9);
    filter: saturate(1.16) contrast(1.04);
    z-index: 0;
}

.st-card--with-bg > * {
    position: relative;
    z-index: 1;
}

.st-card--with-bg .st-card-title,
.st-card--with-bg .st-card-kicker,
.st-card--with-bg h2,
.st-card--with-bg h3,
.st-card--with-bg h4,
.st-card--with-bg strong {
    color: var(--st-media-card-text);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.36);
}

.st-card--with-bg .st-card-sub,
.st-card--with-bg .st-card-meta,
.st-card--with-bg p,
.st-card--with-bg small {
    color: var(--st-media-card-text-muted);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.32);
}

.st-card--with-bg .st-chip {
    border-color: var(--st-media-card-chip-border);
    background: var(--st-media-card-chip-bg);
    color: var(--st-media-card-text-muted);
}

.st-list > .st-card,
.home-context-grid > .st-card,
.home-feed-grid > .st-card,
.home-continue-list > .st-card,
.home-modules-dock > .st-card,
.competitions-nav-grid > .st-card,
.competitions-mission-grid > .st-card {
    animation: st-card-sharpen 18s var(--st-card-attention-delay, 0s) infinite;
}

.st-list > .st-card::after,
.home-context-grid > .st-card::after,
.home-feed-grid > .st-card::after,
.home-continue-list > .st-card::after,
.home-modules-dock > .st-card::after,
.competitions-nav-grid > .st-card::after,
.competitions-mission-grid > .st-card::after {
    content: "";
    position: absolute;
    inset: -1px;
    z-index: 2;
    pointer-events: none;
    border-radius: inherit;
    border: 1px solid color-mix(in srgb, var(--st-accent-2) 70%, transparent);
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--st-accent) 22%, transparent),
        0 0 30px color-mix(in srgb, var(--st-accent-2) 34%, transparent),
        inset 0 0 24px color-mix(in srgb, var(--st-accent) 18%, transparent);
    opacity: 0;
    animation: st-card-halo 18s var(--st-card-attention-delay, 0s) infinite;
}

.st-list > .st-card:nth-child(6n+1),
.home-context-grid > .st-card:nth-child(6n+1),
.home-feed-grid > .st-card:nth-child(6n+1),
.home-continue-list > .st-card:nth-child(6n+1),
.home-modules-dock > .st-card:nth-child(6n+1),
.competitions-nav-grid > .st-card:nth-child(6n+1),
.competitions-mission-grid > .st-card:nth-child(6n+1) {
    --st-card-attention-delay: 0s;
}

.st-list > .st-card:nth-child(6n+2),
.home-context-grid > .st-card:nth-child(6n+2),
.home-feed-grid > .st-card:nth-child(6n+2),
.home-continue-list > .st-card:nth-child(6n+2),
.home-modules-dock > .st-card:nth-child(6n+2),
.competitions-nav-grid > .st-card:nth-child(6n+2),
.competitions-mission-grid > .st-card:nth-child(6n+2) {
    --st-card-attention-delay: 3s;
}

.st-list > .st-card:nth-child(6n+3),
.home-context-grid > .st-card:nth-child(6n+3),
.home-feed-grid > .st-card:nth-child(6n+3),
.home-continue-list > .st-card:nth-child(6n+3),
.home-modules-dock > .st-card:nth-child(6n+3),
.competitions-nav-grid > .st-card:nth-child(6n+3),
.competitions-mission-grid > .st-card:nth-child(6n+3) {
    --st-card-attention-delay: 6s;
}

.st-list > .st-card:nth-child(6n+4),
.home-context-grid > .st-card:nth-child(6n+4),
.home-feed-grid > .st-card:nth-child(6n+4),
.home-continue-list > .st-card:nth-child(6n+4),
.home-modules-dock > .st-card:nth-child(6n+4),
.competitions-nav-grid > .st-card:nth-child(6n+4),
.competitions-mission-grid > .st-card:nth-child(6n+4) {
    --st-card-attention-delay: 9s;
}

.st-list > .st-card:nth-child(6n+5),
.home-context-grid > .st-card:nth-child(6n+5),
.home-feed-grid > .st-card:nth-child(6n+5),
.home-continue-list > .st-card:nth-child(6n+5),
.home-modules-dock > .st-card:nth-child(6n+5),
.competitions-nav-grid > .st-card:nth-child(6n+5),
.competitions-mission-grid > .st-card:nth-child(6n+5) {
    --st-card-attention-delay: 12s;
}

.st-list > .st-card:nth-child(6n+6),
.home-context-grid > .st-card:nth-child(6n+6),
.home-feed-grid > .st-card:nth-child(6n+6),
.home-continue-list > .st-card:nth-child(6n+6),
.home-modules-dock > .st-card:nth-child(6n+6),
.competitions-nav-grid > .st-card:nth-child(6n+6),
.competitions-mission-grid > .st-card:nth-child(6n+6) {
    --st-card-attention-delay: 15s;
}

@keyframes st-card-halo {
    0%, 1%, 14%, 100% {
        opacity: 0;
    }

    4%, 9% {
        opacity: 1;
    }
}

@keyframes st-card-sharpen {
    0%, 1%, 14%, 100% {
        filter: none;
    }

    4%, 9% {
        filter: saturate(1.18) contrast(1.08) brightness(1.04);
    }
}

.st-card-header {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
}

.st-card-icon {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 8px;
    border: 1px solid var(--st-border);
    background: rgba(0, 0, 0, 0.25);
    object-fit: cover;
}

.st-card-heading {
    min-width: 0;
}

.st-card:hover {
    background: var(--st-card-bg-hover);
}

a.st-card:hover,
button.st-card:hover,
.st-nav-card:hover,
.st-list-row-card:hover,
.st-mission-card:hover,
.st-program-card:hover,
.st-journey-card:hover,
.st-experience-card:hover,
[role="button"].st-card:hover,
a.st-card:focus-visible,
button.st-card:focus-visible,
.st-nav-card:focus-visible,
.st-list-row-card:focus-visible,
.st-mission-card:focus-visible,
.st-program-card:focus-visible,
.st-journey-card:focus-visible,
.st-experience-card:focus-visible,
[role="button"].st-card:focus-visible {
    border-color: color-mix(in srgb, var(--st-accent) 58%, var(--st-border));
    box-shadow:
        0 16px 42px color-mix(in srgb, var(--st-accent) 12%, transparent),
        0 0 0 1px color-mix(in srgb, var(--st-accent-3) 18%, transparent);
    color: var(--st-text);
    transform: translateY(-2px);
}

a.st-card:active,
button.st-card:active,
.st-nav-card:active,
.st-list-row-card:active,
.st-mission-card:active,
.st-program-card:active,
.st-journey-card:active,
.st-experience-card:active,
[role="button"].st-card:active {
    transform: translateY(0) scale(0.988);
}

/* Optional page background media (applied by setting CSS variables on `.st-page`) */
.st-page--with-bg {
    position: relative;
}

.st-page--with-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: var(--st-radius);
    background-image:
        var(--st-page-bg-gradient, none),
        var(--st-page-bg-image, none);
    background-size: cover;
    background-position: var(--st-page-bg-position, center);
    opacity: var(--st-page-bg-opacity, 0.70);
    z-index: 0;
}

.st-page--with-bg > * {
    position: relative;
    z-index: 1;
}

.st-card-title {
    margin: 0 0 0.25rem;
    font-size: 1.05rem;
    letter-spacing: 0.2px;
}

.st-card-sub {
    margin: 0;
    color: var(--st-text-muted);
    font-size: 0.9rem;
}

.st-card-kicker,
.st-card-title,
.st-card-sub,
.st-page-title,
.st-page-subtitle,
.st-section-title,
.st-section-subtitle,
.st-journey-hero h1,
.st-journey-hero p,
.st-immediate-action h2,
.st-immediate-action p,
.st-journey-step h3,
.st-journey-step p,
.st-condition-card__body,
.st-message-card p {
    min-width: 0;
    overflow-wrap: anywhere;
}

.st-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0.55rem;
    border-radius: 999px;
    border: 1px solid var(--st-border);
    background: rgba(0, 0, 0, 0.25);
    color: var(--st-text-muted);
    font-size: 0.82rem;
}

.st-page-title,
.st-topbar-brand,
.st-card-kicker,
.st-chip,
.st-badge,
.st-wallet-token__code,
.st-wallet-token__value,
.st-reward-token__code,
.st-reward-token__value,
.st-progress-ring-center-text,
.st-timeline-time,
.st-metric-card__value,
.st-metric-card-value,
.st-stat-value,
.st-hud-value {
    font-family: var(--st-font-display);
}

.st-wallet-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.4rem;
    width: 100%;
    min-width: 0;
}

.st-wallet-strip--compact {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    max-width: 20rem;
}

.st-wallet-token {
    position: relative;
    min-width: 0;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--st-wallet-token-accent, var(--st-accent)) 42%, var(--st-border));
    border-radius: 8px;
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--st-wallet-token-accent, var(--st-accent)) 16%, transparent),
            color-mix(in srgb, var(--st-surface) 96%, transparent));
    padding: 0.38rem 0.5rem;
}

.st-wallet-token::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--st-wallet-token-accent, var(--st-accent));
    opacity: 0.9;
}

.st-wallet-token__code,
.st-wallet-token__value,
.st-wallet-token__delta,
.st-wallet-token__detail {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.st-wallet-token__code {
    color: var(--st-text-muted);
    font-size: 0.66rem;
    font-weight: 780;
    letter-spacing: 0.08rem;
}

.st-wallet-token__value {
    color: var(--st-text);
    font-size: 0.9rem;
    font-weight: 850;
    line-height: 1.05;
}

.st-wallet-token__delta,
.st-wallet-token__detail {
    color: var(--st-text-muted);
    font-size: 0.64rem;
    line-height: 1.05;
}

.st-wallet-token__delta--gain {
    color: var(--st-token-cred);
}

.st-wallet-token__delta--loss {
    color: var(--st-token-heart);
}

.st-wallet-token--missing {
    opacity: 0.58;
}

.st-wallet-token--changed {
    animation: st-wallet-balance-pulse 520ms cubic-bezier(0.0, 0.0, 0.2, 1);
}

@keyframes st-wallet-balance-pulse {
    0% {
        border-color: color-mix(in srgb, var(--st-wallet-token-accent, var(--st-accent)) 90%, white);
        transform: translateY(0) scale(1);
    }
    36% {
        transform: translateY(-1px) scale(1.025);
    }
    100% {
        transform: translateY(0) scale(1);
    }
}

.st-success-flash,
[data-st-flash="success"] {
    animation: st-success-flash 780ms var(--st-motion-spring);
}

.st-celebration-burst {
    position: relative;
    overflow: hidden;
}

.st-celebration-burst::after {
    content: "";
    position: absolute;
    inset: -35%;
    pointer-events: none;
    background:
        radial-gradient(circle at 24% 35%, color-mix(in srgb, var(--st-accent) 70%, transparent) 0 0.28rem, transparent 0.3rem),
        radial-gradient(circle at 55% 22%, color-mix(in srgb, var(--st-accent-2) 70%, transparent) 0 0.24rem, transparent 0.27rem),
        radial-gradient(circle at 72% 55%, color-mix(in srgb, var(--st-accent-3) 70%, transparent) 0 0.22rem, transparent 0.25rem),
        radial-gradient(circle at 42% 74%, color-mix(in srgb, var(--st-energy) 58%, transparent) 0 0.2rem, transparent 0.23rem);
    opacity: 0;
    transform: scale(0.76) rotate(-8deg);
    animation: st-celebration-burst 860ms var(--st-motion-spring);
}

@keyframes st-success-flash {
    0% {
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--st-success) 48%, transparent);
    }
    38% {
        box-shadow:
            0 0 0 0.22rem color-mix(in srgb, var(--st-success) 26%, transparent),
            0 0 34px color-mix(in srgb, var(--st-success) 22%, transparent);
    }
    100% {
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--st-success) 0%, transparent);
    }
}

@keyframes st-celebration-burst {
    0% {
        opacity: 0;
        transform: scale(0.72) rotate(-8deg);
    }
    36% {
        opacity: 0.9;
    }
    100% {
        opacity: 0;
        transform: scale(1.12) rotate(8deg);
    }
}

@media (max-width: 360px) {
    .st-wallet-strip,
    .st-wallet-strip--compact {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-width: none;
    }

    .st-wallet-token {
        padding: 0.34rem 0.45rem;
    }
}

@media (max-width: 640.98px) {
    .st-form-grid {
        grid-template-columns: 1fr;
    }

    .st-filter-command {
        grid-template-columns: 1fr 1fr;
    }

    .st-filter-command > :first-child {
        grid-column: 1 / -1;
    }

    .st-page {
        padding: 0.85rem;
    }

    .btn,
    .st-link,
    .btn-link,
    .st-nav-card,
    .st-list-row-card,
    .st-mission-card {
        min-height: 2.5rem;
    }

    .st-action-rail {
        gap: 0.45rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.001ms !important;
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
    }

    .st-wallet-token--changed,
    .st-success-flash,
    [data-st-flash="success"],
    .st-celebration-burst::after,
    .st-list > .st-card,
    .home-context-grid > .st-card,
    .home-feed-grid > .st-card,
    .home-continue-list > .st-card,
    .home-modules-dock > .st-card,
    .competitions-nav-grid > .st-card,
    .competitions-mission-grid > .st-card,
    .st-list > .st-card::after,
    .home-context-grid > .st-card::after,
    .home-feed-grid > .st-card::after,
    .home-continue-list > .st-card::after,
    .home-modules-dock > .st-card::after,
    .competitions-nav-grid > .st-card::after,
    .competitions-mission-grid > .st-card::after {
        animation: none;
    }
}

.st-chip--selected {
    background: color-mix(in srgb, var(--st-accent) 24%, transparent);
    border-color: color-mix(in srgb, var(--st-accent) 55%, var(--st-border));
    color: var(--st-text);
}

.st-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.18rem 0.5rem;
    border-radius: 999px;
    border: 1px solid var(--st-border);
    background: var(--st-surface);
    color: var(--st-text-muted);
    font-size: 0.78rem;
    letter-spacing: 0.2px;
}

.st-badge--success { border-color: color-mix(in srgb, var(--st-success) 65%, var(--st-border)); }
.st-badge--warning { border-color: color-mix(in srgb, var(--st-warning) 65%, var(--st-border)); }
.st-badge--danger { border-color: color-mix(in srgb, var(--st-danger) 65%, var(--st-border)); }
.st-badge--info { border-color: color-mix(in srgb, var(--st-accent) 65%, var(--st-border)); }

.st-skeleton {
    display: block;
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--st-surface) 80%, transparent) 0%,
        color-mix(in srgb, var(--st-surface-2) 80%, transparent) 50%,
        color-mix(in srgb, var(--st-surface) 80%, transparent) 100%);
    background-size: 200% 100%;
    animation: st-skeleton-shimmer 1.2s ease-in-out infinite;
}

@keyframes st-skeleton-shimmer {
    0% { background-position: 0% 0%; }
    100% { background-position: -200% 0%; }
}

@media (prefers-reduced-motion: reduce) {
    .st-skeleton {
        animation: none;
    }
}

.st-progress-ring {
    position: relative;
    display: inline-grid;
    place-items: center;
}

.st-progress-ring-svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.st-progress-ring-track {
    fill: none;
    stroke: color-mix(in srgb, var(--st-border) 85%, transparent);
    stroke-width: 3.2;
}

.st-progress-ring-value {
    fill: none;
    stroke: var(--st-progress-ring-stroke, var(--st-accent));
    stroke-width: 3.2;
    stroke-linecap: round;
}

.st-progress-ring-center {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    text-align: center;
    padding: 0.35rem;
    line-height: 1.05;
}

.st-progress-ring-center-text {
    font-weight: 750;
    letter-spacing: 0.2px;
    font-size: clamp(0.8rem, calc(var(--st-progress-ring-size, 84px) * 0.20), 1.15rem);
    line-height: 1;
    max-width: 85%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.st-progress-ring-center-sub {
    color: var(--st-text-muted);
    font-size: clamp(0.62rem, calc(var(--st-progress-ring-size, 84px) * 0.14), 0.88rem);
    margin-top: 0.1rem;
    max-width: 80%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.st-sparkline {
    width: 120px;
    height: 28px;
}

.st-card-kicker {
    color: var(--st-text-muted);
    font-size: 0.76rem;
    font-weight: 760;
    text-transform: uppercase;
}

.st-journey-active-rail,
.st-experience-grid,
.st-collaborator-stack,
.st-evidence-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 0.75rem;
}

.st-journey-card,
.st-experience-card {
    display: grid;
    gap: 0.65rem;
    min-height: 15.5rem;
    color: var(--st-text);
    text-decoration: none;
    align-content: end;
}

.st-journey-card:hover,
.st-experience-card:hover {
    color: var(--st-text);
    transform: translateY(-1px);
}

.st-journey-card h3,
.st-experience-card h3,
.st-journey-hero h1,
.st-immediate-action h2,
.st-journey-step h3 {
    margin: 0;
}

.st-journey-card p,
.st-experience-card p,
.st-journey-hero p,
.st-immediate-action p,
.st-journey-step p,
.st-support-card p,
.st-message-card p {
    margin: 0;
    color: var(--st-text-muted);
}

.st-card--with-bg.st-journey-card,
.st-card--with-bg.st-experience-card,
.st-card--with-bg.st-journey-hero {
    color: var(--st-media-card-text);
}

.st-card--with-bg.st-journey-card:hover,
.st-card--with-bg.st-experience-card:hover,
.st-card--with-bg.st-journey-hero:hover {
    color: var(--st-media-card-text);
}

.st-card--with-bg.st-journey-card p,
.st-card--with-bg.st-experience-card p,
.st-card--with-bg.st-journey-hero p {
    color: var(--st-media-card-text-muted);
}

.st-journey-card--compact {
    min-height: 12.5rem;
}

.st-journey-progress {
    width: 100%;
    height: 0.45rem;
    overflow: hidden;
    border-radius: 999px;
    background: color-mix(in srgb, var(--st-bg) 68%, transparent);
    border: 1px solid var(--st-border);
}

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

.st-privacy-scope {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    max-width: 100%;
    padding: 0.18rem 0.48rem;
    border-radius: 999px;
    border: 1px solid var(--st-border);
    background: color-mix(in srgb, var(--st-surface) 80%, transparent);
    color: var(--st-text-muted);
    font-size: 0.76rem;
}

.st-privacy-scope--public {
    border-color: color-mix(in srgb, var(--st-accent-2) 58%, var(--st-border));
}

.st-privacy-scope--household,
.st-privacy-scope--participants {
    border-color: color-mix(in srgb, var(--st-token-heart) 52%, var(--st-border));
}

.st-privacy-scope--internal,
.st-privacy-scope--counsel {
    border-color: color-mix(in srgb, var(--st-warning) 55%, var(--st-border));
}

.st-reward-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr));
    gap: 0.45rem;
}

.st-reward-token {
    min-width: 0;
    border: 1px solid color-mix(in srgb, var(--st-reward-accent, var(--st-accent)) 50%, var(--st-border));
    border-radius: 8px;
    background: color-mix(in srgb, var(--st-reward-accent, var(--st-accent)) 12%, var(--st-surface));
    padding: 0.45rem 0.55rem;
}

.st-reward-token--xp { --st-reward-accent: var(--st-token-xp); }
.st-reward-token--fire { --st-reward-accent: var(--st-token-fire); }
.st-reward-token--heart { --st-reward-accent: var(--st-token-heart); }
.st-reward-token--skill { --st-reward-accent: var(--st-action); }
.st-reward-token--cred { --st-reward-accent: var(--st-token-cred); }
.st-reward-token--badge,
.st-reward-token--achievement { --st-reward-accent: var(--st-accent); }

.st-reward-token__code,
.st-reward-token__value,
.st-reward-token__label,
.st-reward-token__detail {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.st-reward-token__code,
.st-reward-token__detail {
    color: var(--st-text-muted);
    font-size: 0.68rem;
}

.st-reward-token__value {
    font-size: 1rem;
    font-weight: 850;
}

.st-reward-token__label {
    color: var(--st-text);
    font-size: 0.78rem;
}

.st-journey-hero,
.st-immediate-action,
.st-experience-detail-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(18rem, 0.75fr);
    gap: 1rem;
    align-items: end;
    min-height: 22rem;
}

.st-journey-hero__copy,
.st-immediate-action__copy,
.st-immediate-action__side,
.st-journey-hero__panel {
    display: grid;
    gap: 0.7rem;
    min-width: 0;
}

.st-journey-hero h1 {
    font-size: clamp(2rem, 4vw, 4rem);
    line-height: 0.98;
    max-width: 12ch;
}

.st-immediate-action {
    border: 1px solid color-mix(in srgb, var(--st-accent) 40%, var(--st-border));
    border-radius: var(--st-radius);
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--st-accent) 16%, var(--st-surface)), var(--st-surface));
    padding: 1rem;
}

.st-immediate-action--blocked {
    border-color: color-mix(in srgb, var(--st-token-heart) 58%, var(--st-border));
}

.st-journey-timeline,
.st-readiness-list,
.st-condition-strip {
    display: grid;
    gap: 0.65rem;
}

.st-journey-step,
.st-readiness-row,
.st-support-card,
.st-condition-card,
.st-collaborator-card,
.st-gotcha-card,
.st-evidence-card,
.st-message-card,
.st-package-bridge {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.75rem;
    align-items: start;
    border: 1px solid var(--st-border);
    border-radius: 8px;
    background: color-mix(in srgb, var(--st-surface) 88%, transparent);
    padding: 0.75rem;
}

.st-readiness-row,
.st-support-card,
.st-condition-card,
.st-gotcha-card,
.st-evidence-card,
.st-message-card,
.st-package-bridge {
    grid-template-columns: minmax(0, 1fr) auto;
}

.st-condition-card,
.st-gotcha-card,
.st-evidence-card,
.st-message-card,
.st-package-bridge {
    grid-template-columns: 1fr;
}

.st-collaborator-card {
    grid-template-columns: auto minmax(0, 1fr);
}

.st-avatar {
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 8px;
    background: color-mix(in srgb, var(--st-accent-2) 20%, var(--st-surface));
    border: 1px solid color-mix(in srgb, var(--st-accent-2) 42%, var(--st-border));
    font-weight: 850;
}

.st-message-composer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.6rem;
    align-items: end;
}

.st-package-bridge {
    border-color: color-mix(in srgb, var(--st-accent-2) 46%, var(--st-border));
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--st-accent-2) 12%, transparent),
            color-mix(in srgb, var(--st-surface) 96%, transparent));
}

.st-package-bridge--compact {
    padding: 0.7rem;
}

:root[data-st-theme="light"] .st-package-bridge,
:root[data-st-theme="light"] .st-collaborator-card,
:root[data-st-theme="light"] .st-gotcha-card,
:root[data-st-theme="light"] .st-evidence-card,
:root[data-st-theme="light"] .st-message-card {
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--st-accent-2) 10%, white),
            color-mix(in srgb, var(--st-surface) 88%, white));
}

.st-journey-step--blocker,
.st-readiness-row--blocker {
    border-color: color-mix(in srgb, var(--st-token-heart) 62%, var(--st-border));
}

.st-journey-step--complete,
.st-readiness-row--complete {
    border-color: color-mix(in srgb, var(--st-token-cred) 52%, var(--st-border));
}

.st-journey-step__marker {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 8px;
    background: color-mix(in srgb, var(--st-accent) 22%, var(--st-surface));
    font-weight: 800;
}

.st-journey-step__body,
.st-journey-step__actions {
    min-width: 0;
}

.st-journey-step__topline,
.st-journey-step__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.38rem;
    align-items: center;
}

.st-journey-step__topline {
    color: var(--st-text-muted);
    font-size: 0.74rem;
    text-transform: uppercase;
}

.st-journey-step__actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.st-condition-card__body {
    color: var(--st-text);
    font-size: 0.9rem;
}

@media (max-width: 720px) {
    .st-journey-hero,
    .st-immediate-action,
    .st-experience-detail-hero {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .st-journey-hero h1 {
        max-width: none;
    }

    .st-journey-step,
    .st-readiness-row,
    .st-support-card,
    .st-message-composer {
        grid-template-columns: 1fr;
    }

    .st-journey-step__marker {
        width: 100%;
        height: 0.35rem;
        color: transparent;
    }

    .st-journey-step__actions {
        justify-content: flex-start;
    }
}

.st-sparkline-line {
    fill: none;
    stroke: var(--st-sparkline-stroke, var(--st-accent));
    stroke-width: 2.2;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.st-minibars {
    width: 120px;
    height: 24px;
}

.st-minibars-bar {
    fill: var(--st-minibars-fill, var(--st-accent));
    opacity: 0.85;
}

.st-timeline {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    padding-bottom: 0.25rem;
    scroll-snap-type: x mandatory;
}

/* Utility: contain wide tables without causing page-level horizontal overflow. */
.st-table-scroll {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.st-table-scroll > table {
    min-width: 520px;
}

.st-timeline-item {
    flex: 0 0 auto;
    scroll-snap-align: start;
    border: 1px solid var(--st-border);
    border-radius: calc(var(--st-radius) - 4px);
    background: var(--st-surface);
    padding: 0.55rem 0.65rem;
    min-width: 11rem;
    position: relative;
}

.st-timeline-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.st-timeline-glyph {
    width: 30px;
    height: 30px;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--st-border) 80%, transparent);
    background: color-mix(in srgb, var(--st-surface-2) 80%, transparent);
    display: grid;
    place-items: center;
    font-size: 1.05rem;
    line-height: 1;
}

.st-timeline-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    border-top-left-radius: calc(var(--st-radius) - 4px);
    border-bottom-left-radius: calc(var(--st-radius) - 4px);
    background: var(--st-timeline-accent, var(--st-accent));
    opacity: 0.85;
}

.st-timeline-time {
    color: var(--st-text-muted);
    font-size: 0.82rem;
}

.st-timeline-label {
    margin-top: 0.15rem;
    font-weight: 650;
}

.st-timeline-detail {
    margin-top: 0.15rem;
    color: var(--st-text-muted);
    font-size: 0.86rem;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Drawer / sheet (mobile-first filters and menus) */
.st-drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 900;
}

.st-drawer {
    position: fixed;
    right: 0;
    top: 0;
    bottom: 0;
    width: min(92vw, 420px);
    background:
        radial-gradient(900px 600px at 20% 0%, var(--st-glow-1), transparent 60%),
        radial-gradient(900px 600px at 90% 0%, var(--st-glow-2), transparent 60%),
        color-mix(in srgb, var(--st-chrome-2) 88%, var(--st-bg));
    border-left: 1px solid var(--st-border);
    z-index: 910;
    display: flex;
    flex-direction: column;
    transform: translateX(0);
    animation: st-drawer-enter var(--st-motion-spring);
}

@keyframes st-drawer-enter {
    from {
        opacity: 0.72;
        transform: translateX(1.25rem);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.st-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.9rem 0.9rem 0.75rem;
    border-bottom: 1px solid var(--st-border);
}

.st-drawer-title {
    font-weight: 750;
    letter-spacing: 0.2px;
}

.st-drawer-body {
    padding: 0.9rem;
    overflow: auto;
}

/* Coaching browse - visual-first result cards */
.st-program-card {
    display: grid;
    grid-template-columns: 148px 1fr;
    gap: 0.85rem;
    text-decoration: none;
    background: var(--st-surface);
    border: 1px solid var(--st-border);
    border-radius: var(--st-radius);
    overflow: hidden;
    padding: 0;
    color: var(--st-text);
}

.st-program-card:hover {
    background: var(--st-surface-2);
}

.st-program-card-media {
    min-height: 132px;
    position: relative;
    display: grid;
    place-items: center;
    background-image:
        radial-gradient(900px 500px at 20% 0%, color-mix(in srgb, var(--st-glow-1) 120%, transparent), transparent 55%),
        radial-gradient(900px 500px at 90% 0%, color-mix(in srgb, var(--st-glow-2) 120%, transparent), transparent 55%),
        linear-gradient(135deg, rgba(0,0,0,0.40), rgba(0,0,0,0.08)),
        var(--st-program-card-media-image, none);
    background-size: cover;
    background-position: center;
}

.st-program-card-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.00), rgba(0,0,0,0.25));
    pointer-events: none;
}

.st-program-card-media-icon {
    position: relative;
    z-index: 1;
    width: 58px;
    height: 58px;
    border-radius: 18px;
    border: 1px solid color-mix(in srgb, var(--st-border) 80%, transparent);
    background: rgba(0, 0, 0, 0.28);
    display: grid;
    place-items: center;
    font-size: 2rem;
    line-height: 1;
    text-shadow: 0 10px 30px rgba(0,0,0,0.65);
}

.st-program-card-body {
    padding: 0.85rem 0.85rem 0.9rem 0;
    min-width: 0;
}

.st-program-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.st-program-card-title {
    font-weight: 760;
    letter-spacing: 0.25px;
    line-height: 1.15;
}

.st-program-card-meta {
    margin-top: 0.55rem;
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.st-program-card-bottom {
    margin-top: 0.65rem;
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    align-items: baseline;
    color: var(--st-text-muted);
    font-size: 0.92rem;
}

.st-program-card-price {
    color: var(--st-text);
    font-weight: 700;
}

.st-program-card--compact {
    grid-template-columns: 92px 1fr;
}

.st-program-card--compact .st-program-card-media {
    min-height: 92px;
}

.st-program-card--compact .st-program-card-media-icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    font-size: 1.55rem;
}

.st-program-card--compact .st-program-card-body {
    padding: 0.7rem 0.75rem 0.75rem 0;
}

@media (max-width: 520px) {
    .st-program-card {
        grid-template-columns: 1fr;
    }

    .st-program-card-body {
        padding: 0.75rem;
    }

    .st-program-card-media {
        min-height: 172px;
    }

    .st-program-card-media-icon {
        width: 52px;
        height: 52px;
        border-radius: 16px;
        font-size: 1.85rem;
    }
}

.st-skeleton-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.75rem;
}

.st-skeleton-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}

/* Shared state surfaces (Loading/Empty/Error) */
.st-state {
    padding: 0.25rem 0;
}

.st-state-card {
    background: var(--st-surface);
    border: 1px solid var(--st-border);
    border-radius: var(--st-radius);
    padding: 1rem;
}

.st-state-title {
    font-weight: 650;
    letter-spacing: 0.2px;
}

.st-state-sub {
    margin-top: 0.25rem;
    color: var(--st-text-muted);
}

.st-state-actions {
    margin-top: 0.85rem;
}

.st-state-bar {
    margin-top: 0.85rem;
    height: 10px;
    border-radius: 999px;
    background:
        linear-gradient(90deg,
            color-mix(in srgb, var(--st-accent) 15%, transparent),
            color-mix(in srgb, var(--st-accent) 72%, transparent),
            color-mix(in srgb, var(--st-accent-3) 62%, transparent),
            color-mix(in srgb, var(--st-accent-3) 15%, transparent));
    background-size: 200% 100%;
    animation: st-shimmer 1.25s linear infinite;
}

@keyframes st-shimmer {
    0% { background-position: 0% 0%; }
    100% { background-position: 200% 0%; }
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--st-success);
}

.invalid {
    outline: 1px solid var(--st-danger);
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}
/* Identity boundary */
.auth-required {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: center;
    padding: 1.25rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(10, 14, 22, 0.72);
}

.auth-required h1 {
    margin: 0 0 0.35rem;
    font-size: 1.35rem;
}

.auth-required p {
    margin: 0;
    color: var(--st-muted, rgba(255, 255, 255, 0.72));
}

.auth-required__actions {
    display: flex;
    gap: 0.55rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

@media (max-width: 720px) {
    .auth-required {
        grid-template-columns: 1fr;
    }

    .auth-required__actions {
        justify-content: flex-start;
    }
}