* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --accent: #c7ff19;
    --accent-ink: #101014;
    --page-bg: #0d0d12;
    --panel-bg: #101014;
    --soft-bg: #19191f;
    --muted-bg: #15151b;
    --border: #25252c;
    --text: #ffffff;
    --muted-text: #66667a;
}

/* Instrument Sans (a variable font, every weight in one file), served from /fonts. */
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/instrument-sans-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/instrument-sans-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

body {
    background-color: var(--page-bg);
    color: var(--text);
    font-family: "Instrument Sans", Arial, sans-serif;
    font-variant-numeric: tabular-nums;
    -webkit-font-smoothing: antialiased;
}

button, input, select, textarea { font-family: inherit; }
.stat-card h2 { font-family: inherit; letter-spacing: normal; }

/* Headings and the big numbers: bold and set a touch tighter. */
:is(h1, h2),
:is(
    .stat-card p, .performance-metric-value, .profile-hero-stat strong, .workout-summary-stats strong,
    .workout-detail-stats strong, .split-stat strong, .coach-race-tile strong, .coach-weight-stat strong,
    .social-post-stats strong, .coach-review-metric strong, .coach-progress-metric strong
) {
    font-weight: 700;
    letter-spacing: -0.01em;
}

.skeleton-block,
.skeleton-line {
    display: block;
    background: linear-gradient(100deg, var(--soft-bg) 25%, color-mix(in srgb, var(--border) 72%, var(--panel-bg)) 48%, var(--soft-bg) 70%);
    background-size: 220% 100%;
    animation: skeleton-shimmer 1.35s ease-in-out infinite;
}

.skeleton-line {
    width: var(--skeleton-width, 62%);
    height: 12px;
    border-radius: 6px;
}

/* Placeholder rows while a list loads (js/ui/skeleton.js): an optional round avatar and a line or two. */
.skeleton-rows { display: grid; gap: 12px; padding: 4px 0; }
.skeleton-row { display: flex; align-items: center; gap: 10px; }
.skeleton-row-lines { display: grid; flex: 1 1 auto; min-width: 0; gap: 6px; }
.skeleton-row-lines .skeleton-line:nth-child(2) { --skeleton-width: 38%; height: 9px; }
.skeleton-avatar { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; }
.skeleton-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* A card-sized placeholder (club page, dialogs). */
.skeleton-card { display: grid; gap: 12px; padding: 20px; background: color-mix(in srgb, var(--panel-bg) 90%, transparent); border: 1px solid var(--border); border-radius: 12px; }
.skeleton-card .skeleton-block { height: 56px; border-radius: 8px; }

@keyframes skeleton-shimmer {
    to { background-position: -220% 0; }
}

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

/* Numbers that change (js/ui/rollNumber.js): the old character slides up, the new one comes in from below. */
.roll-char { display: inline-block; height: 1.2em; overflow: hidden; line-height: 1.2; vertical-align: bottom; }
.roll-stack { display: block; animation: roll-number .42s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--roll-index, 0) * 30ms); }
.roll-stack > span { display: block; height: 1.2em; }
.roll-char.is-leaving { animation: roll-place-close .42s cubic-bezier(.2, .8, .2, 1) both; }
.roll-char.is-entering { animation: roll-place-open .42s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes roll-place-close { from { max-width: 1em; } to { max-width: 0; } }
@keyframes roll-place-open { from { max-width: 0; } to { max-width: 1em; } }
@keyframes roll-number {
    from { transform: translateY(0); }
    to { transform: translateY(-50%); }
}

/* Spinner while new data is loading (js/services/supabase.js). */
.data-spinner {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + 10px);
    left: 50%;
    z-index: 1000;
    width: 28px;
    height: 28px;
    margin-left: -14px;
    visibility: hidden;
    background: var(--panel-bg);
    border: 1px solid var(--border);
    border-radius: 50%;
    box-shadow: 0 6px 18px rgb(0 0 0 / 35%);
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease, visibility .18s;
}
.data-spinner.is-visible { visibility: visible; opacity: 1; }
.data-spinner::after {
    position: absolute;
    inset: 6px;
    border: 2px solid color-mix(in srgb, var(--accent) 25%, transparent);
    border-top-color: var(--accent);
    border-radius: 50%;
    content: "";
    animation: data-spinner .75s linear infinite;
}
@keyframes data-spinner {
    to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
    .data-spinner::after { animation-duration: 2s; }
}
/* On phones the page switch stays at the top, so the spinner sits just below it. */
@media (max-width: 600px) {
    .data-spinner { top: calc(env(safe-area-inset-top, 0px) + 62px); }
}

body[data-theme="purple"] { --accent: #b27aff; }
body[data-theme="blue"] { --accent: #5ca7ff; }
body[data-theme="orange"] { --accent: #ff9b42; --accent-ink: #211409; }
body[data-theme="red"] { --accent: #ff6670; --accent-ink: #260d11; }
body[data-theme="yellow"] { --accent: #f2d447; --accent-ink: #211c08; }
body[data-theme="grey"] { --accent: #b4bec9; --accent-ink: #151a20; }
body[data-mode="light"] {
    --accent: #385000;
    --accent-ink: #ffffff;
    --page-bg: #b8bdc2;
    --panel-bg: #c8cdd1;
    --soft-bg: #adb3b9;
    --muted-bg: #a3a9af;
    --border: #858e97;
    --text: #1d252c;
    --muted-text: #4f5b66;
}

body[data-mode="light"][data-theme="purple"] { --accent: #5a2c82; }
body[data-mode="light"][data-theme="blue"] { --accent: #104f7a; }
body[data-mode="light"][data-theme="orange"] { --accent: #994600; --accent-ink: #ffffff; }
body[data-mode="light"][data-theme="red"] { --accent: #a32335; --accent-ink: #ffffff; }
body[data-mode="light"][data-theme="yellow"] { --accent: #765300; --accent-ink: #ffffff; }
body[data-mode="light"][data-theme="grey"] { --accent: #4a5663; --accent-ink: #ffffff; }

.page-content {
    margin-left: 44px;
    min-height: 100vh;
    padding: 40px;
    transition: margin-left 260ms cubic-bezier(0.2, 0.75, 0.25, 1);
}

body.sidebar-expanded .page-content {
    margin-left: 170px;
}

@media (max-width: 600px) {
    .page-content { padding: calc(12px + env(safe-area-inset-top, 0px)) 16px 24px; }
    .page-content,
    body.sidebar-expanded .page-content { margin-left: 0; }
    body.sidebar-expanded::before {
        content: "";
        position: fixed;
        z-index: 49;
        inset: 0;
        background: rgb(0 0 0 / 48%);
    }
}

footer {
    margin-top: 50px;
    padding: 25px 0;
    border-top: 1px solid var(--border);
    color: var(--muted-text);
    font-size: 13px;
}

body[data-mode="light"] .workout-form,
body[data-mode="light"] .workout-card,
body[data-mode="light"] .statistics-calendar,
body[data-mode="light"] .stat-card,
body[data-mode="light"] .train-today,
body[data-mode="light"] .personal-records,
body[data-mode="light"] .settings-section { color: var(--text); }

/* Moving between pages fades instead of flashing. The menus stay in place, only the page changes. Browsers
   without support simply change page as before. */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: 160ms; }
.sidebar { view-transition-name: zevrik-sidebar; }
.mobile-tabbar { view-transition-name: zevrik-tabbar; }
.mobile-section-switch { view-transition-name: zevrik-section-switch; }
@media (prefers-reduced-motion: reduce) {
    ::view-transition-group(*),
    ::view-transition-old(*),
    ::view-transition-new(*) { animation: none; }
}